/* ==========================
   LOGIN RRHH
========================== */
/* Archivo: public/assets/css/login.css
   Estilos de las pantallas de autenticación de ZasTalent:
   auth/login.blade.php (inicio de sesión, diseño de pantalla dividida),
   auth/forgot-password.blade.php (pedir enlace para recuperar clave),
   auth/reset-password.blade.php (escribir la nueva contraseña),
   auth/verify-pin.blade.php (código de verificación en dos pasos, 2FA)
   y terminos.blade.php (aceptar términos y condiciones).
   Se apoya en Bootstrap (clases form-label / form-control) y aquí se
   personalizan. Las clases .error-field / .field-error.show las añade
   el JS de validación de cada formulario. */

/* Variables de color de las pantallas de acceso. */

:root{
    --primary:#2f67ad;
    --primary-dark:#17345c;
    --card:#ffffff;
    --text:#1d3557;
    --muted:#6b7a90;
    --border:#d8e0ec;
    --error:#dc3545;
}



/* Fondo general: degradado azul oscuro de las páginas de acceso. */
body{
    min-height:100vh;
    font-family:'Inter',sans-serif;
    background:linear-gradient(
        135deg,
        #1e3a5f 0%,
        #0f2544 100%
    );
}

/* ==========================
   NAVBAR
========================== */

/* Barra superior con el logo y el enlace "Volver" (pantallas que no
   usan el diseño dividido, p. ej. recuperar contraseña o PIN). */
.navbar-rrhh{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 40px;
}

.logo-navbar{
    width:180px;
    height:auto;
    display:block;
}

/* ==========================
   CONTENEDOR LOGIN
========================== */

/* Ocupa toda la altura de la ventana y centra la tarjeta del formulario. */
.login-wrap{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    position:relative;
    overflow:hidden;
}

/* ── círculos decorativos del fondo ── */

.bg-circle{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    filter:blur(50px);
    pointer-events:none;
    z-index:0;
}

.bg-circle-1{
    width:480px;
    height:480px;
    top:-180px;
    left:-140px;
}

.bg-circle-2{
    width:420px;
    height:420px;
    bottom:-160px;
    right:-120px;
    background:rgba(96,165,250,.10);
}

.bg-circle-3{
    width:260px;
    height:260px;
    top:55%;
    right:10%;
    background:rgba(255,255,255,.05);
}

/* ==========================
   CARD
========================== */

/* Tarjeta blanca donde va el formulario (correo, contraseña, PIN...). */
.login-card{
    width:100%;
    max-width:420px;
    background:var(--card);
    border-radius:24px;
    padding:35px;
    box-shadow:
        0 20px 40px rgba(0,0,0,.15);
    position:relative;
    z-index:1;
}

/* ==========================
   ICONO
========================== */

/* Cuadro con el icono que encabeza la tarjeta (candado, llave, etc.). */
.card-icon{
    width:56px;
    height:56px;
    border-radius:15px;
    background:#dbe8ff;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:20px;
}

/* ==========================
   TITULOS
========================== */

.login-card h2{
    font-family:'Playfair Display',serif;
    color:var(--text);
    font-size:42px;
    margin-bottom:8px;
}

.subtitulo{
    color:var(--muted);
    margin-bottom:30px;
}

/* ==========================
   FORMULARIO
========================== */

/* Etiquetas e inputs. .input-wrap permite poner el icono (.ic) a la
   izquierda y el botón del ojo a la derecha dentro del input. */
.form-label{
    font-weight:600;
    color:var(--text);
    margin-bottom:8px;
}

.input-wrap{
    position:relative;
}

.ic{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:#93a5bf;
}

.form-control{
    height:48px;
    border:1px solid var(--border);
    border-radius:12px;
    padding-left:38px;
    padding-right:45px;
}

.form-control:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(47,103,173,.15);
}

/* ==========================
   OJO PASSWORD
========================== */

/* Botón con el ojo para mostrar/ocultar la contraseña (lo maneja JS). */
.toggle{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:none;
    color:#93a5bf;
    cursor:pointer;
}

/* ==========================
   BOTON LOGIN
========================== */

/* Botón principal de envío del formulario (Ingresar, Enviar, Verificar). */
.btn-login{
    width:100%;
    border:none;
    border-radius:12px;
    background:var(--primary);
    color:white;
    font-weight:600;
    padding:14px;
    margin-top:10px;
    transition:.3s;
}

.btn-login:hover{
    background:#255897;
}

.btn-login i{
    margin-right:8px;
}

/* Botón secundario para volver al paso anterior */
.btn-regresar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--text);
    font-weight:600;
    padding:13px;
    margin-top:16px;
    text-align:center;
    text-decoration:none;
    transition:.3s;
}

.btn-regresar:hover{
    background:#f8fafc;
    border-color:var(--primary);
    color:var(--primary);
}

.btn-regresar i{
    font-size:14px;
}

/* ==========================
   DIVISOR
========================== */

/* ==========================
   ERRORES
========================== */

/* .field-error: mensaje bajo el campo, oculto hasta que JS añade .show.
   .error-field: borde rojo en el input inválido.
   .alert-error: caja roja con errores devueltos por el servidor
   (por ejemplo, credenciales incorrectas). */
.field-error{
    display:none;
    color:var(--error);
    font-size:13px;
    margin-top:6px;
}

.field-error.show{
    display:block;
}

.error-field{
    border-color:var(--error) !important;
}

.alert-error{
    background:#ffe6e9;
    color:#842029;
    border:1px solid #f5c2c7;
    padding:12px;
    border-radius:12px;
    margin-bottom:20px;
}

/* ==========================================================
   LOGIN SPLIT-SCREEN (usado solo por login.blade.php)
========================================================== */

/* El body no hace scroll: el diseño ocupa exactamente la pantalla.
   .login-split reparte la pantalla en panel izquierdo y derecho. */
.login-split-body{
    height:100vh;
    height:100dvh;
    overflow:hidden;
}

.login-split{
    height:100%;
    width:100%;
    display:flex;
}

/* ── PANEL IZQUIERDO ── */

/* Panel izquierdo (60%): imagen de fondo con una capa de degradado
   (::before), botón para volver al inicio, etiqueta, título de
   bienvenida, texto, tarjetas de características y pie con datos. */
.login-split-left{
    position:relative;
    flex:0 0 60%;
    max-width:60%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:88px 64px 56px;
    background-size:cover;
    background-position:center;
    background-color:#0f1d33;
    color:#fff;
    overflow:hidden;
}

.login-split-left::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        115deg,
        rgba(10,20,40,.95) 0%,
        rgba(15,29,51,.85) 35%,
        rgba(23,52,92,.55) 70%,
        rgba(47,103,173,.35) 100%
    );
    z-index:1;
}

.login-split-left-content,
.login-split-left-footer{
    position:relative;
    z-index:2;
}

.login-split-back{
    position:absolute;
    top:28px;
    left:32px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.3);
    background:rgba(10,20,40,.45);
    color:#fff;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.login-split-back:hover{
    background:rgba(10,20,40,.65);
    color:#fff;
}

.login-split-back i{
    font-size:12px;
}

.login-badge{
    display:inline-block;
    align-self:flex-start;
    padding:6px 16px;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.08);
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:28px;
}

.login-hero-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:52px;
    line-height:1.15;
    margin-bottom:20px;
}

.login-hero-title .accent{
    color:#60a5fa;
}

.login-hero-divider{
    width:64px;
    height:4px;
    background:#60a5fa;
    border-radius:2px;
    margin-bottom:24px;
}

.login-hero-text{
    color:#c9d6ea;
    font-size:16px;
    line-height:1.6;
    max-width:420px;
    margin-bottom:36px;
}

.login-feature-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.login-feature-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100px;
    height:90px;
    background:rgba(23,52,92,.45);
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;
    font-size:12px;
    text-align:center;
    color:#e4ecfb;
}

.login-feature-card i{
    font-size:18px;
    color:#60a5fa;
}

.login-split-left-footer{
    font-size:12px;
    color:#9fb2cf;
    line-height:1.6;
}

.login-split-left-footer p{
    margin:0;
}

/* ── PANEL DERECHO ── */

/* Panel derecho (40%): fondo claro con formas circulares decorativas
   y la tarjeta del formulario de login. */
.login-split-right{
    position:relative;
    flex:1 1 40%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f7f9fc;
    overflow:hidden;
    padding:32px;
}

.login-split-shape{
    position:absolute;
    border-radius:50%;
    background:var(--primary);
    opacity:.05;
    z-index:0;
}

/* Botón "Volver" que solo se ve en celular (en escritorio está oculto). */
.login-back-mobile{
    display:none;
}

.login-split-shape-1{
    width:420px;
    height:420px;
    top:-120px;
    right:-140px;
}

.login-split-shape-2{
    width:280px;
    height:280px;
    bottom:-100px;
    left:-80px;
}

/* Tarjeta de login de este diseño: marca (logo + nombre en dos líneas),
   texto pequeño superior (kicker) y títulos centrados. */
.login-card.login-card-split{
    max-width:440px;
    width:100%;
    position:relative;
    z-index:1;
    padding:40px 36px;
}

.login-card-split h2{
    text-align:center;
    font-size:34px;
}

.login-card-split .subtitulo{
    text-align:center;
}

.login-card-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:6px;
}

.login-card-brand-icon-wrap{
    display:block;
}

.login-card-brand-logo{
    display:block;
    height:44px;
    width:auto;
    max-width:none;
}

.login-card-brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.05;
    font-family:'Playfair Display',serif;
}

.login-card-brand-line1{
    font-size:22px;
    font-weight:700;
    color:var(--text);
}

.login-card-brand-line2{
    font-size:22px;
    font-weight:700;
    color:#60a5fa;
}

.login-card-kicker{
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
    color:var(--muted);
    margin-bottom:18px;
}

/* Fila con la casilla "Recordarme" y el enlace "¿Olvidaste tu contraseña?". */
.login-row-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:4px 0 20px;
    font-size:14px;
}

.login-remember{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    cursor:pointer;
}

.login-remember input{
    width:16px;
    height:16px;
    accent-color:var(--primary);
}

.login-forgot-link,
.login-forgot-link:visited{
    color:var(--primary);
    text-decoration:underline;
    font-size:14px;
}

/* ── RESPONSIVE ── */

/* En pantallas <= 900px se oculta el panel izquierdo, el formulario
   ocupa todo el ancho, se permite scroll y aparece el botón "Volver"
   móvil. El padding-bottom de 220px deja espacio para el banner de
   cookies fijo en la parte inferior. */
@media (max-width:900px){
    .login-split-left{
        display:none;
    }

    .login-split-right{
        flex:1 1 100%;
        max-width:100%;
        padding:20px;
    }

    .login-card.login-card-split{
        max-width:420px;
    }

    .login-split-body{
        height:auto;
        min-height:100vh;
        overflow-y:auto;
    }

    .login-split{
        height:auto;
        min-height:100vh;
    }

    .login-split-right{
        flex-direction:column;
        overflow-y:auto;
        overflow-x:hidden;
        max-height:none;
        padding-bottom:220px;
    }

    .login-back-mobile{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        width:100%;
        margin-top:12px;
        padding:13px;
        border-radius:12px;
        border:1px solid var(--border);
        background:#fff;
        color:var(--text);
        font-size:14px;
        font-weight:600;
        text-decoration:none;
        transition:.3s;
    }

    .login-back-mobile:hover{
        background:#f8fafc;
        border-color:var(--primary);
        color:var(--primary);
    }

    .login-wrap{
        min-height:100vh;
        height:auto;
        align-items:flex-start;
        overflow-y:auto;
        padding-top:40px;
        padding-bottom:220px;
    }
}

/* Celulares pequeños: menos margen lateral y tarjeta a todo el ancho. */
@media (max-width:480px){
    .login-split-right{
        padding:20px 16px 220px;
    }

    .login-card.login-card-split{
        max-width:100%;
    }
}

/* ==========================
   TÉRMINOS Y CONDICIONES
========================== */

/* Casilla "Acepto los términos" con el botón-enlace que abre el modal
   y el botón para rechazarlos (terminos.blade.php). */
.terminos-check{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:22px;
}

.terminos-check input{
    width:16px;
    height:16px;
    margin-top:3px;
    flex-shrink:0;
    accent-color:var(--primary);
    cursor:pointer;
}

.terminos-check label{
    color:var(--text);
    font-size:14px;
    line-height:1.5;
    cursor:pointer;
}

.terminos-link{
    background:none;
    border:none;
    padding:0;
    color:var(--primary);
    font-size:14px;
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
}
.terminos-link:hover{ color:var(--primary-dark); }

.btn-terminos-rechazar{
    width:100%;
    background:none;
    border:none;
    color:var(--muted);
    font-size:13px;
    text-align:center;
    text-decoration:underline;
    padding:14px 0 0;
    cursor:pointer;
    transition:.3s;
}
.btn-terminos-rechazar:hover{ color:var(--error); }

/* ── Modal ── */
/* Fondo oscuro que cubre la pantalla; se oculta con el atributo [hidden]. */
.terminos-modal-overlay{
    position:fixed;
    inset:0;
    z-index:2200;
    background:rgba(15,23,42,.6);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
}
.terminos-modal-overlay[hidden]{ display:none; }

/* Ventana con el texto de los términos: encabezado con título y botón
   cerrar, y cuerpo con scroll (títulos h4 y párrafos). */
.terminos-modal{
    background:#fff;
    color:var(--text);
    border-radius:16px;
    max-width:640px;
    width:100%;
    max-height:min(680px,85vh);
    padding:1.75rem;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    display:flex;
    flex-direction:column;
}

.terminos-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1rem;
    flex-shrink:0;
}
.terminos-modal-header h3{
    font-family:'Playfair Display',serif;
    font-size:1.2rem;
    color:var(--primary-dark);
    margin:0;
}
.terminos-modal-close{
    background:none;
    border:none;
    color:var(--muted);
    font-size:1.1rem;
    cursor:pointer;
    padding:.25rem;
}
.terminos-modal-close:hover{ color:var(--text); }

.terminos-modal-body{
    overflow-y:auto;
    font-size:.85rem;
    line-height:1.6;
    color:#475569;
}
.terminos-modal-body h4{
    font-size:.92rem;
    color:var(--primary-dark);
    margin:1.1rem 0 .4rem;
}
.terminos-modal-body h4:first-child{ margin-top:0; }
.terminos-modal-body p{ margin:0 0 .6rem; }

/* En celular el modal tiene menos relleno interno. */
@media (max-width:480px){
    .terminos-modal{ padding:1.25rem; }
}