/* =============================================================
   AVIASTEC — Pantallas de acceso (login, recuperar contraseña, errores)
   Se carga DESPUÉS de bootstrap.min.css, site.css y aviastec.css.
   Layout "split": panel de marca a la izquierda (azul Aviastec, sin
   fotografía) y columna de contenido a la derecha sobre blanco.
   El split vive en _LayoutLogin.cshtml, así que login, recuperación de
   contraseña y páginas de error comparten el mismo marco: cada vista
   solo aporta el contenido del panel derecho.
   ============================================================= */

/* ── Marco general ────────────────────────────────────────────── */
/* .av-body ya es flex-column con min-height:100vh (aviastec.css); aquí
   solo se impide el scroll del marco y se deja crecer al split. */
body.av-login-body {
    min-height: 100vh;
    background: #fff;
}

.av-login {
    display: flex;
    flex: 1 1 auto;
    min-height: 100vh;
}

/* ── Panel de marca (izquierda) ───────────────────────────────── */
.av-login-brand {
    flex: 0 0 54%;
    max-width: 54%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px;
    color: #fff;
    background: radial-gradient(120% 90% at 12% 12%, var(--av-blue-600) 0%, rgba(77, 31, 212, 0) 55%),
                linear-gradient(150deg, var(--av-blue-800) 0%, var(--av-blue-900) 62%, #12024E 100%);
}

/* Trazas de ruta / radar: decorativas, se dibujan en SVG inline. */
.av-login-deco {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    pointer-events: none;
}

.av-login-logo {
    position: relative;
    z-index: 1;
}
.av-login-logo img { height: 34px; width: auto; }

/* El ancho se fija en px: un max-width en ch se mediría con la tipografía base
   (13px) y no con la del titular, dejando el claim mucho más estrecho. */
.av-login-claim {
    position: relative;
    z-index: 1;
    max-width: 460px;
}
.av-login-claim h1 {
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: .2px;
    margin: 0 0 14px;
    color: #fff;
}
.av-login-claim p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .78);
}

/* Seis módulos: rejilla de 3×2. En flex se apilarían de forma irregular al
   variar el largo de cada descripción. */
.av-login-feats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.av-login-feat {
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .72);
}
.av-login-feat b {
    display: block;
    margin-bottom: 2px;
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: .4px;
    color: #fff;
}

/* ── Columna de contenido (derecha) ───────────────────────────── */
.av-login-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #fff;
}
.av-login-panel {
    width: 100%;
    max-width: 340px;
}

/* Banda de marca para viewports estrechos (el panel azul se oculta). */
.av-login-topbrand {
    display: none;
    margin-bottom: 26px;
    text-align: center;
}
.av-login-topbrand img { height: 30px; width: auto; }

.av-login-panel h2 {
    font-family: var(--av-font-display);
    font-weight: 600;
    font-size: 27px;
    line-height: 1.15;
    margin: 0 0 4px;
    color: var(--av-gray-900);
}
.av-login-sub {
    margin: 0 0 24px;
    font-size: 12.5px;
    color: var(--av-gray-500);
}

/* Formularios: etiqueta en versalitas + campo alto. Se aplica por
   descendencia para que valga en todas las vistas del layout sin
   añadir clases en cada input. */
.av-login-panel .form-group { margin-bottom: 14px; }
.av-login-panel .form-group label {
    display: block;
    font-family: var(--av-font-heading);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--av-gray-600);
    margin-bottom: 5px;
}
.av-login-panel .form-control {
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    border: 1px solid var(--av-gray-200);
    border-radius: var(--av-radius-md);
    color: var(--av-gray-800);
}
.av-login-panel .form-control::placeholder { color: var(--av-gray-300); }
.av-login-panel .form-control:focus {
    border-color: var(--av-blue-500);
    box-shadow: var(--av-focus-ring);
}

.av-login-panel .btn-primary {
    height: 42px;
    border: 0;
    border-radius: var(--av-radius-md);
    font-family: var(--av-font-heading);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(40, 5, 161, .28);
}

.av-login-panel a { color: var(--av-blue-600); }
.av-login-link { font-size: 12px; }

/* Mostrar / ocultar contraseña. */
.av-pw-wrap { position: relative; }
.av-pw-wrap .form-control { padding-right: 38px; }
.av-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--av-gray-400);
    line-height: 1;
    cursor: pointer;
}
.av-pw-toggle:hover { color: var(--av-blue); }
.av-pw-toggle:focus { outline: none; color: var(--av-blue); }

/* Avisos (sesión expirada, credenciales incorrectas, correo enviado). */
.av-login-panel .alert {
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.45;
    border-radius: var(--av-radius-md);
    margin-bottom: 14px;
}

/* Pie del panel: idioma + copyright. */
.av-login-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--av-gray-100);
}
.av-login-copy { font-size: 10.5px; color: var(--av-gray-400); }

.av-login-lang {
    display: inline-flex;
    border: 1px solid var(--av-gray-200);
    border-radius: var(--av-radius-pill);
    overflow: hidden;
    background: #fff;
}
.av-login-lang a {
    font-family: var(--av-font-heading);
    font-weight: 600;
    font-size: 11px;
    padding: 4px 11px;
    color: var(--av-gray-500);
    text-decoration: none;
}
.av-login-lang a:hover { background: var(--av-gray-50); text-decoration: none; }
.av-login-lang a.active { background: var(--av-blue-50); color: var(--av-blue); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* El panel de marca no cabe: se sustituye por la banda superior. */
    .av-login-brand { display: none; }
    .av-login-topbrand {
        display: block;
        padding: 18px 0;
        border-radius: var(--av-radius-lg);
        background: linear-gradient(100deg, var(--av-blue-800), var(--av-blue-600));
    }
    .av-login-main { padding: 32px 20px; align-items: flex-start; padding-top: 8vh; }
}

@media (max-width: 575.98px) {
    .av-login-main { padding: 24px 16px; }
    .av-login-panel h2 { font-size: 24px; }
}

/* Pantallas anchas: el formulario no se despega del centro óptico. */
@media (min-width: 1600px) {
    .av-login-brand { flex-basis: 50%; max-width: 50%; }
    .av-login-claim h1 { font-size: 48px; }
}