/* ============================================================
   login.css — Pantalla de acceso al Copiloto Académico
   ============================================================ */

.lg-body {
    background: linear-gradient(160deg, var(--nb-navy) 0%, #013a66 55%, #01508f 100%);
    min-height: 100vh;
}

.lg-wrap {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px 20px;
}

.lg-card {
    background: var(--nb-surface);
    border-radius: 20px;
    width: 100%; max-width: 410px;
    padding: 36px 32px 30px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    text-align: center;
}

.lg-brand { margin-bottom: 20px; }
/* Sobre la tarjeta blanca el logo se sostiene solo: ya no necesita
   el chip dorado que llevaba el texto ESAM. La imagen no es cuadrada
   (386x324), asi que object-fit evita que se estire. */
.lg-mark {
    display: block;
    /* El chip anterior era inline y heredaba el centrado del contenedor.
       Como bloque hay que centrarlo explicitamente. */
    margin: 0 auto;
    width: 78px; height: 78px;
    object-fit: contain;
}

.lg-title { font-size: 24px; color: var(--nb-navy); margin-bottom: 6px; }
.lg-sub {
    font-size: 14px; color: var(--nb-text-soft);
    line-height: 1.5; margin-bottom: 22px;
}

.lg-error {
    background: #fde8e8; color: #b32020;
    border-radius: 10px; padding: 11px 14px;
    font-size: 13.5px; line-height: 1.5;
    margin-bottom: 18px; text-align: left;
}

.lg-form { display: flex; flex-direction: column; text-align: left; }
.lg-label {
    font-size: 13px; font-weight: 600; color: var(--nb-navy);
    margin-bottom: 6px;
}
.lg-form .nb-field { margin-bottom: 16px; }

.lg-pass-wrap { position: relative; }
.lg-pass-wrap .nb-field { padding-right: 78px; }
.lg-pass-toggle {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    margin-top: -8px; /* compensa el margin-bottom del campo */
    background: transparent; border: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--nb-navy-300);
    padding: 6px 8px; border-radius: 6px;
}
.lg-pass-toggle:hover { color: var(--nb-navy); background: var(--nb-bg); }

.lg-submit { width: 100%; margin-top: 6px; padding-top: 13px; padding-bottom: 13px; }

.lg-help {
    font-size: 12.5px; color: var(--nb-text-mut);
    margin-top: 20px; line-height: 1.5;
}

.lg-foot {
    margin-top: 26px; font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 460px) {
    .lg-card { padding: 30px 22px 26px; }
    .lg-title { font-size: 21px; }
}