/* Colores actualizados basados en el nuevo diseño */
:root{
    --deep-blue:#00204A;
    --cyan:#00B7EB;
    --bright-cyan:#05D3F8;
    --white:#FFFFFF;
}
*{box-sizing:border-box;font-family:'Poppins', 'Segoe UI', Arial, sans-serif}
body,html{height:100%;margin:0}
.login-page{
    display:flex;
    min-height:100vh;
    position:relative;
    overflow:hidden;
    /* Fondo principal (imagen proporcionada por el usuario) */
    background:url('../img/Fondo_Login_01.jpg') center center;
    background-size:cover;
}
/* Overlay degradado: oscurece la parte izquierda y deja la derecha más clara */
.login-page::before {
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(0,32,74,0.88) 0%, rgba(0,32,74,0.68) 35%, rgba(255,255,255,0.0) 65% );
    z-index:1;
}
/* No diagonal: la línea diagonal ha sido eliminada a petición del usuario */
.login-left{
    /* Tarjeta de login a la izquierda */
    flex:0 0 44%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 80px;
    position:relative;
    z-index:2;
}
.login-right{
    /* Zona derecha (área clara del fondo) con logo y mensaje */
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px;
    position:relative;
    z-index:2;
}

.login-right::before{content:'';position:absolute;left:-20%;top:-30%;width:120%;height:80%;background:linear-gradient(90deg,#022744, #00b7eb);transform:rotate(-18deg);opacity:0.06;z-index:1;pointer-events:none}

.card{
    background:rgba(255,255,255,0.98);
    padding:40px;
    border-radius:16px;
    width:100%;
    max-width:420px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    border:1px solid rgba(5,10,20,0.06); /* borde sutil solicitado */
}
.logo{
    width:220px;
    display:block;
    margin:0 auto 28px;
}
.card h2{
    margin:0 0 30px;
    text-align:center;
    color:var(--deep-blue);
    font-size:28px;
    font-weight:600;
}
.alert{
    background:#ffcccc;
    color:#700;
    padding:12px;
    border-radius:10px;
    margin-bottom:20px;
    text-align:center;
}
 .input-wrap{
     display:flex;
     align-items:center;
     background:rgba(250,250,250,0.95);
     border:1px solid rgba(0,0,0,0.05);
     border-radius:12px;
     padding:10px 14px;
     margin-bottom:22px; /* más espacio para tooltips debajo */
     transition:all 0.18s ease;
     position:relative; /* necesario para tooltips anclados al input */
 }
.input-wrap:focus-within{
    border-color:var(--cyan);
    background:white;
    box-shadow:0 0 0 2px rgba(0,183,235,0.1);
}
.input-wrap input{
    border:0;
    outline:0;
    padding:12px 8px;
    flex:1;
    background:transparent;
    font-size:15px;
    color:var(--deep-blue);
}
.left-icon{
    margin-right:12px;
    display:flex;
    align-items:center;
}
.left-icon img{
    width:20px;
    height:20px;
    opacity:1; /* asegurar visibilidad */
    display:block;
}

/* Tooltip pequeño junto al campo (estilo tipo 'completa este campo') */
.field-tooltip{
    position:absolute;
    left:14px;
    top:calc(100% + 8px); /* aparece debajo del input */
    transform:none;
    background:#fff8ed;
    border:1px solid rgba(255,152,0,0.25);
    color:#a65800;
    padding:8px 10px;
    border-radius:8px;
    font-size:13px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    display:flex;
    gap:8px;
    align-items:center;
    z-index:30;
    min-width:180px;
}
.field-tooltip .icon{
    width:18px;height:18px;border-radius:50%;background:#fff3e0;display:inline-flex;align-items:center;justify-content:center;color:#ff9800;font-weight:700;font-size:12px;
}
.field-tooltip.hide{display:none}

/* Ajuste para que tooltips no tapen totalmente el input en pantallas pequeñas */
@media(max-width:900px){
    .field-tooltip{right:10px; font-size:12px;padding:6px 8px}
}

/* Check shown cuando el email es válido */
.email-ok{
    color: #0bb3e8;
    font-weight:700;
    margin-left:10px;
    display:none;
    background: rgba(3,169,244,0.08);
    border-radius:6px;
    padding:4px 8px;
    font-size:14px;
}

/* Right side: quitar recuadro y mostrar logo y mensaje directamente sobre el fondo */
.login-right .welcome{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
    max-width:720px;
    padding:0;
}
.login-right .welcome img{
    width:380px;
    height:auto;
    display:block;
    margin:0 auto 18px;
}
.login-right .welcome h1{
    color:#07284A;
    font-size:42px; /* +2 puntos */
    margin:8px 0 12px;
    font-weight:700;
}
.login-right .welcome p{
    color:#0b2b3a;
    font-size:17px; /* +1 punto */
    line-height:1.7;
}

/* Hint bajo el input para errores de email */
.form-hint{
    margin-top:18px;
    padding:10px 14px;
    border-radius:10px;
    background:rgba(198,40,40,0.06);
    border:1px solid rgba(198,40,40,0.14);
    color:#c62828;
    font-size:14px;
    display:none;
}
.form-hint.visible{
    display:block;
}
.eye{
    background:transparent;
    border:0;
    cursor:pointer;
    font-size:16px;
    padding:6px;
    opacity:0.6;
    transition:opacity 0.3s;
}
.eye:hover{
    opacity:1;
}
.btn-primary{
    width:100%;
    padding:16px;
    background:linear-gradient(135deg,var(--cyan),var(--bright-cyan));
    color:#fff;
    border-radius:12px;
    border:0;
    font-weight:600;
    font-size:16px;
    box-shadow:0 6px 20px rgba(0,183,235,0.3);
    cursor:pointer;
    transition:transform 0.2s;
}
.btn-primary:hover{
    transform:translateY(-2px);
}
.welcome{background:rgba(255,255,255,0.98);padding:48px;border-radius:12px;max-width:640px;text-align:center;color:#222;box-shadow:0 6px 20px rgba(0,0,0,0.06)}
.present-img{width:140px;margin-bottom:8px}
.welcome h1{color:var(--deep-blue);margin-top:6px}
.email-ok{color:green;font-weight:700;margin-left:8px;display:none}

/* Responsive */
@media(max-width:900px){
    .login-page{flex-direction:column}
    .login-left{flex:unset;width:100%;padding:30px}
    .login-right{order:2;padding:30px;width:100%}
}

/* Dashboards skeleton */
.sidebar{width:220px;background:linear-gradient(180deg,var(--deep-blue),#02345a);min-height:100vh;padding:24px;color:var(--white)}
.content{flex:1;padding:28px}
.nav-btn{display:block;padding:10px 12px;margin:8px 0;border-radius:6px;color:var(--white);text-decoration:none}
.card-skel{background:#fff;padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.08)}