/* ============================================================================
   Pantallas de Acceso (pre-login): Login, Registro, Recuperación de contraseña.
   Layout de dos paneles del prototipo de UX (01_acceso_registro_prototipo.html).
   Usa los mismos tokens de color que site-buap.css (ya cargado en la página).
   ============================================================================ */

.auth-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns: 1.05fr 1fr;
}
@media (max-width: 880px){
    .auth-shell{ grid-template-columns:1fr; }
    .auth-marca{ min-height:200px; padding:32px 24px; }
    .auth-hero h1{ font-size:22px; }
    .auth-foot{ display:none; }
}

/* ---------- Panel de marca (izquierdo) ---------- */
.auth-marca{
    position:relative;
    background:radial-gradient(120% 140% at 15% 10%, var(--azul-profundo) 0%, var(--azul-profundo-2) 60%, #061F2C 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:48px 56px;
    overflow:hidden;
}
.auth-marca-top{ display:flex; align-items:center; gap:14px; position:relative; z-index:2; }
.auth-escudo{
    width:46px; height:46px; flex:none; position:relative;
    background:#fff; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px -6px rgba(0,0,0,0.35);
}
.auth-escudo svg{ width:32px; height:32px; display:block; }
.auth-marca-textos{ line-height:1.15; }
.auth-marca-textos .inst{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; font-weight:600; }
.auth-marca-textos .dir{ font-size:13px; opacity:.6; font-weight:400; }

.auth-hero{ position:relative; z-index:2; margin-top:auto; margin-bottom:auto; }
.auth-hero h1{
    font-weight:900; font-size:clamp(22px, 3.4vw, 42px); line-height:1.1;
    margin:0 0 16px 0; letter-spacing:-0.01em;
}
.auth-hero p{
    font-weight:400; font-size:16px; line-height:1.55; max-width:420px;
    color:rgba(255,255,255,0.78); margin:0;
}

.auth-foot{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:20px 28px; font-size:13px; color:rgba(255,255,255,0.55); }
.auth-foot span{ display:flex; align-items:center; gap:8px; }
.auth-foot .dot{ width:6px; height:6px; border-radius:50%; background:var(--azul-claro); flex:none; }

/* Lente/iris animado — elemento de firma visual del prototipo */
.auth-iris{ position:absolute; right:-120px; top:50%; transform:translateY(-50%); width:520px; height:520px; z-index:1; }
.auth-iris svg{ width:100%; height:100%; }
.auth-iris circle.anillo{ fill:none; stroke:rgba(0,174,239,0.35); stroke-width:1; transform-origin:center; animation:auth-pulso 5s ease-in-out infinite; }
.auth-iris circle.anillo:nth-child(2){ animation-delay:1.2s; }
.auth-iris circle.anillo:nth-child(3){ animation-delay:2.4s; }
@keyframes auth-pulso{
    0%,100%{ opacity:.25; stroke-width:1; }
    50%{ opacity:.7; stroke-width:1.6; }
}
@media (prefers-reduced-motion: reduce){
    .auth-iris circle.anillo{ animation:none; opacity:.4; }
}
@media (max-width: 880px){
    .auth-iris{ display:none; }
}

/* ---------- Panel de formulario (derecho) ---------- */
.auth-forma{
    display:flex; align-items:center; justify-content:center;
    padding:32px 24px; background:#fff;
}
.auth-tarjeta{ width:100%; max-width:400px; }
.auth-eyebrow{
    font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--azul-claro); font-weight:700; margin-bottom:8px; display:block;
}
.auth-tarjeta h2{ font-size:26px; font-weight:700; margin:0 0 6px 0; letter-spacing:-0.01em; color:var(--tinta); }
.auth-tarjeta .subtitulo{ color:var(--gris-texto); font-size:14.5px; margin:0 0 28px 0; line-height:1.5; }

.auth-campo{ margin-bottom:18px; }
.auth-campo label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--tinta); }
.auth-tarjeta .form-control{
    width:100%; height:auto; padding:12px 14px; border-radius:8px; border:1.5px solid var(--gris-borde);
    font-size:15px; color:var(--tinta); background:var(--gris-niebla); box-shadow:none;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-tarjeta .form-control::placeholder{ color:#9FB0B8; }
.auth-tarjeta .form-control:focus{
    outline:none; border-color:var(--azul-claro); background:#fff;
    box-shadow:0 0 0 4px var(--azul-claro-suave);
}
.auth-campo .ayuda{ font-size:12.5px; color:var(--gris-texto); margin-top:6px; }
.auth-tarjeta .text-danger{ font-size:12.5px; margin-top:6px; display:block; }

.auth-fila-entre{ display:flex; align-items:center; justify-content:flex-end; margin-bottom:22px; }
.auth-tarjeta a{ color:var(--azul-profundo); font-weight:600; font-size:13.5px; }
.auth-tarjeta a:hover{ color:var(--azul-claro); text-decoration:none; }

.auth-tarjeta .btn-primary{
    width:100%; padding:13px 16px; border-radius:8px; border:none;
    font-size:15.5px; font-weight:700; letter-spacing:.01em;
}

.auth-pie{ margin-top:24px; text-align:center; font-size:14px; color:var(--gris-texto); }
.auth-pie a{ font-weight:600; }