/* =============================================================
   SISGCOMP · LOGIN / CIERRE DE SESIÓN
   Hoja de estilos del rediseño — css/login.css

   Alcance: páginas/login.php y pages/logout_success.php
   Dependencias: ../css/all.min.css (Font Awesome) — sin recursos
   externos, sin importaciones de hojas remotas y sin imágenes de
   fondo (el mural es un <svg> inline en el HTML). Compatible con la
   CSP de .htaccess.

   Convenciones:
   - Todos los tokens llevan el prefijo --lg- para no colisionar
     con el dashboard.
   - Nunca se usan las clases heredadas de logotipo: js/app.js
     sobrescribe el src de esos elementos con una ruta de otro
     proyecto. Aquí solo existen .lg-brand__logo y
     .lg-brand__company-logo.
   ============================================================= */


/* =============================================================
   1) RESET + TOKENS
   ============================================================= */

html {
    margin: 0;
    padding: 0;
}

body.lg-body,
body.lg-body *,
body.lg-body *::before,
body.lg-body *::after {
    box-sizing: border-box;
}

:root {
    /* --- Marca (constantes) --- */
    --lg-brand-navy: #0253a2;
    --lg-brand-navy-600: #013c7d;
    --lg-brand-navy-700: #012f6b;
    --lg-brand-navy-900: #012348;
    --lg-brand-navy-950: #04142c;
    --lg-brand-red: #cd2439;
    --lg-brand-red-600: #a81b2c;
    --lg-brand-red-300: #ff6b7d;
    --lg-brand-cyan: #37beed;
    --lg-brand-cyan-600: #1b8fc4;
    --lg-brand-cyan-700: #0b6f9b;
    --lg-brand-orange: #ee892f;
    --lg-brand-amber: #fac926;
    --lg-brand-green: #80b332;
    --lg-brand-green-600: #4f7a17;

    /* --- Superficies --- */
    --lg-bg: #eef1f6;
    --lg-bg-deep: #e4e9f1;
    --lg-surface: #ffffff;
    --lg-surface-2: #f6f8fb;
    --lg-surface-3: #eef2f7;

    /* --- Tinta --- */
    --lg-ink: #0f2744;
    --lg-ink-2: #4a5b70;
    --lg-ink-3: #5f6b7a;
    --lg-ink-4: #8a97a8;

    /* --- Bordes --- */
    --lg-border: #dfe5ee;
    --lg-border-strong: #c6d0de;
    --lg-border-focus: #1b8fc4;

    /* --- Estados --- */
    --lg-danger: #cd2439;
    --lg-danger-ink: #7d1626;
    --lg-danger-bg: #fdecee;
    --lg-danger-bd: #f6c3ca;
    --lg-warn-ink: #8a6100;
    --lg-warn-bg: #fff6e0;
    --lg-warn-bd: #f2d79a;
    --lg-info-ink: #0b6f9b;
    --lg-info-bg: #e6f4fc;
    --lg-info-bd: #b6e0f5;
    --lg-ok-ink: #4f7a17;
    --lg-ok-bg: #eef7e2;
    --lg-ok-bd: #c8e3a5;

    /* --- Foco --- */
    --lg-focus: #1b8fc4;
    --lg-focus-ring: rgba(55, 190, 237, .24);
    --lg-focus-ring-2: rgba(27, 143, 196, .38);

    /* --- Radios --- */
    --lg-r-xs: 8px;
    --lg-r-sm: 10px;
    --lg-r-md: 12px;
    --lg-r-lg: 16px;
    --lg-r-xl: 20px;
    --lg-r-pill: 999px;

    /* --- Sombras --- */
    --lg-shadow-xs: 0 1px 2px rgba(4, 20, 44, .06);
    --lg-shadow-sm: 0 2px 8px -2px rgba(4, 20, 44, .10);
    --lg-shadow-md: 0 12px 28px -16px rgba(4, 20, 44, .28);
    --lg-shadow-lg: 0 28px 64px -30px rgba(4, 20, 44, .38), 0 2px 6px -2px rgba(4, 20, 44, .06);
    --lg-shadow-brand: 0 14px 30px -16px rgba(2, 83, 162, .78);

    /* --- Tipografía --- */
    --lg-font: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --lg-font-num: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --lg-fs-wordmark: clamp(30px, 3.4vw, 44px);
    --lg-fs-brand-h1: clamp(24px, 2.6vw, 38px);
    --lg-fs-title: clamp(25px, 2.2vw, 30px);
    --lg-fs-body: 15.5px;
    --lg-fs-sm: 14px;
    --lg-fs-xs: 12.5px;
    --lg-fs-label: 12px;

    /* --- Espaciado --- */
    --lg-s-1: 4px;
    --lg-s-2: 8px;
    --lg-s-3: 12px;
    --lg-s-4: 16px;
    --lg-s-5: 20px;
    --lg-s-6: 24px;
    --lg-s-7: 32px;
    --lg-s-8: 40px;
    --lg-s-9: 48px;
    --lg-s-10: 64px;

    /* --- Movimiento --- */
    --lg-ease-out: cubic-bezier(.22, .68, .28, 1);
    --lg-ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --lg-ease-shake: cubic-bezier(.36, .07, .19, .97);
    --lg-dur-1: 120ms;
    --lg-dur-2: 180ms;
    --lg-dur-3: 260ms;
    --lg-dur-4: 420ms;
    --lg-dur-5: 620ms;
    --lg-dur-6: 900ms;
}


/* =============================================================
   2) MODO OSCURO
   ============================================================= */

html.dark-mode {
    color-scheme: dark;

    --lg-bg: #0a1220;
    --lg-bg-deep: #060c17;
    --lg-surface: #121d2f;
    --lg-surface-2: #18243a;
    --lg-surface-3: #1e2c45;

    --lg-ink: #eef3fa;
    --lg-ink-2: #b7c6d9;
    --lg-ink-3: #93a4ba;
    --lg-ink-4: #6f8098;

    --lg-border: #23334b;
    --lg-border-strong: #31445f;

    --lg-brand-navy: #1668cf;
    --lg-brand-navy-600: #1a78e6;

    --lg-danger: #ff6b7d;
    --lg-danger-ink: #ffb3bd;
    --lg-danger-bg: rgba(205, 36, 57, .16);
    --lg-danger-bd: rgba(205, 36, 57, .42);

    --lg-warn-ink: #f7c85c;
    --lg-warn-bg: rgba(250, 201, 38, .13);
    --lg-warn-bd: rgba(250, 201, 38, .36);

    --lg-info-ink: #6ecdf5;
    --lg-info-bg: rgba(55, 190, 237, .13);
    --lg-info-bd: rgba(55, 190, 237, .34);

    --lg-ok-ink: #a5d167;
    --lg-ok-bg: rgba(128, 179, 50, .13);
    --lg-ok-bd: rgba(128, 179, 50, .34);

    --lg-focus: #58b9ec;
    --lg-focus-ring: rgba(55, 190, 237, .26);
    --lg-focus-ring-2: rgba(55, 190, 237, .42);

    --lg-shadow-lg: 0 28px 64px -30px rgba(0, 0, 0, .80), 0 2px 6px -2px rgba(0, 0, 0, .40);
    --lg-shadow-brand: 0 14px 30px -16px rgba(22, 104, 207, .60);
}


/* =============================================================
   3) BASE
   ============================================================= */

body.lg-body {
    margin: 0;
    padding: 0;
    font-family: var(--lg-font);
    font-size: var(--lg-fs-body);
    line-height: 1.5;
    color: var(--lg-ink);
    background: var(--lg-bg);
    min-height: 100vh;
    min-height: 100dvh;
    /* Nunca se bloquea el desplazamiento vertical: impediría el
       scroll en móvil. */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.lg-body img {
    max-width: 100%;
}


/* =============================================================
   4) LAYOUT
   ============================================================= */

.lg-shell {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Variante simple (cierre de sesión): mismo esqueleto, pero el
   titular de marca se mantiene visible aunque no exista formulario,
   de modo que la pantalla nunca queda vacía a la izquierda. */
.lg-shell--simple:not(:has(#login-form)) .lg-brand__pitch {
    display: block;
}


/* =============================================================
   5) PANEL DE MARCA
   ============================================================= */

.lg-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 3.4vw, 56px);
    color: #fff;
    background: linear-gradient(165deg, var(--lg-brand-navy-950) 0%, var(--lg-brand-navy-900) 45%, #031129 100%);
}

.lg-brand__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 20% 10%, #000 0%, transparent 72%);
    mask-image: radial-gradient(120% 90% at 20% 10%, #000 0%, transparent 72%);
}

.lg-brand__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lg-brand__glow--cyan {
    background: radial-gradient(520px 420px at 12% 8%, rgba(55, 190, 237, .22), transparent 70%);
}

.lg-brand__glow--red {
    background: radial-gradient(480px 420px at 88% 92%, rgba(205, 36, 57, .22), transparent 70%);
}

.lg-mural {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 300px;
    opacity: .9;
    pointer-events: none;
}

.lg-brand__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    height: 100%;
    max-width: 520px;
}

/* Identidad: placa + logotipo */
.lg-brand__id {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* La placa blanca protege el logo: su swoosh azul marino se
   perdería sobre el fondo navy. */
.lg-brand__plate {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    padding: 10px;
    background: var(--lg-surface);
    border-radius: 16px;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75);
    flex: none;
}

.lg-brand__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lg-brand__names {
    min-width: 0;
}

.lg-wordmark {
    margin: 0;
    font-family: var(--lg-font-num);
    font-size: var(--lg-fs-wordmark);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.02;
}

.lg-wordmark__a {
    color: #fff;
}

.lg-wordmark__b {
    color: var(--lg-brand-red-300);
}

.lg-brand__tag {
    margin: 6px 0 0;
    font-size: var(--lg-fs-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .60);
}

/* Propuesta de valor */
.lg-brand__title {
    margin: 0 0 14px;
    font-size: var(--lg-fs-brand-h1);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.16;
    text-wrap: balance;
    max-width: 16ch;
}

.lg-brand__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    color: rgba(255, 255, 255, .72);
    max-width: 46ch;
    text-wrap: pretty;
}

/* Pie del panel: módulos, confianza y empresa */
.lg-brand__foot {
    min-width: 0;
}

.lg-modules {
    list-style: none;
    margin: 0 0 var(--lg-s-5);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lg-s-2);
}

.lg-module {
    display: inline-flex;
    align-items: center;
    gap: var(--lg-s-2);
    padding: 7px 13px 7px 10px;
    border-radius: var(--lg-r-pill);
    font-size: var(--lg-fs-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        background var(--lg-dur-2) var(--lg-ease-out),
        border-color var(--lg-dur-2) var(--lg-ease-out),
        transform var(--lg-dur-2) var(--lg-ease-out);
}

.lg-module:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-1px);
}

.lg-module i {
    font-size: 13px;
}

.lg-module--cyan i {
    color: var(--lg-brand-cyan);
}

.lg-module--green i {
    color: var(--lg-brand-green);
}

.lg-module--orange i {
    color: var(--lg-brand-orange);
}

.lg-module--amber i {
    color: var(--lg-brand-amber);
}

.lg-module--red i {
    color: var(--lg-brand-red-300);
}

.lg-trust {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    font-size: var(--lg-fs-xs);
    font-weight: 500;
    color: rgba(255, 255, 255, .66);
}

.lg-trust i {
    color: var(--lg-brand-cyan);
}

.lg-brand__company {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--lg-fs-label);
    color: rgba(255, 255, 255, .55);
}

/* El logo de Alto Impacto es azul: sobre navy sería ilegible, así
   que se fuerza a silueta blanca. */
.lg-brand__company-logo {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .85;
}


/* =============================================================
   6) CONSOLA (panel de acceso)
   ============================================================= */

.lg-access {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(24px, 4vw, 56px);
    background: radial-gradient(120% 100% at 0% 50%, var(--lg-surface) 0%, var(--lg-bg) 46%, var(--lg-bg-deep) 100%);
}

.lg-access__inner {
    width: 100%;
    display: grid;
    place-items: center;
}

.lg-theme {
    position: absolute;
    top: 22px;
    right: 24px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--lg-r-md);
    border: 1px solid var(--lg-border);
    background: var(--lg-surface);
    color: var(--lg-ink-2);
    cursor: pointer;
    transition:
        background var(--lg-dur-2) var(--lg-ease-out),
        color var(--lg-dur-2) var(--lg-ease-out),
        transform var(--lg-dur-2) var(--lg-ease-out);
}

.lg-theme:hover {
    background: var(--lg-surface-3);
    color: var(--lg-ink);
    transform: translateY(-1px);
}

.lg-theme:focus-visible {
    outline: 2px solid var(--lg-focus);
    outline-offset: 2px;
}


/* =============================================================
   7) TARJETA
   ============================================================= */

.lg-card {
    width: 100%;
    max-width: 440px;
    padding: 40px 36px;
    background: var(--lg-surface);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-r-xl);
    box-shadow: var(--lg-shadow-lg);
}

.lg-card__head {
    margin-bottom: 28px;
}

.lg-eyebrow {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--lg-brand-navy);
}

html.dark-mode .lg-eyebrow {
    color: var(--lg-brand-cyan);
}

.lg-card__title {
    margin: 0 0 8px;
    font-size: var(--lg-fs-title);
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.2;
    color: var(--lg-ink);
}

.lg-card__sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--lg-ink-2);
}

/* Variante centrada (pantalla de cierre de sesión) */
.lg-card--centered {
    text-align: center;
    padding: 44px 36px;
}

/* El icono de la sesión cerrada es un acierto: verde de éxito. */
.lg-card__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: var(--lg-ok-bg);
    color: var(--lg-ok-ink);
    font-size: 30px;
}

.lg-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: var(--lg-s-6);
    height: 50px;
    padding: 0 26px;
    border-radius: var(--lg-r-md);
    background: linear-gradient(180deg, #0a5cb8, #0253a2);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    box-shadow: var(--lg-shadow-brand);
    transition:
        transform var(--lg-dur-2) var(--lg-ease-out),
        box-shadow var(--lg-dur-3) var(--lg-ease-out);
}

.lg-card__cta:hover {
    transform: translateY(-1px);
}

.lg-card__cta:focus-visible {
    outline: 3px solid var(--lg-focus-ring-2);
    outline-offset: 3px;
}

html.dark-mode .lg-card__cta {
    background: linear-gradient(180deg, #1a78e6, #1668cf);
}

/* Fila de acciones de la tarjeta (pantalla de cierre de sesión) */
.lg-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: var(--lg-s-6);
}

.lg-card__actions .lg-card__cta,
.lg-card__actions .lg-btn-ghost {
    margin-top: 0;
}

/* Botón secundario (fantasma): el mismo lenguaje visual, sin relleno */
.lg-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 22px;
    border: 1.5px solid var(--lg-border-strong);
    border-radius: var(--lg-r-md);
    background: transparent;
    color: var(--lg-ink-2);
    font-family: var(--lg-font);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color var(--lg-dur-2) var(--lg-ease-out),
        border-color var(--lg-dur-2) var(--lg-ease-out),
        color var(--lg-dur-2) var(--lg-ease-out),
        transform var(--lg-dur-2) var(--lg-ease-out);
}

.lg-btn-ghost:hover {
    background: var(--lg-surface-3);
    border-color: #aab8ca;
    color: var(--lg-ink);
    transform: translateY(-1px);
}

.lg-btn-ghost:focus-visible {
    outline: 3px solid var(--lg-focus-ring-2);
    outline-offset: 3px;
}

/* Cuenta regresiva del cierre de sesión */
.lg-timer {
    margin: 22px 0 0;
    padding: 16px;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-r-md);
    background: var(--lg-surface-2);
}

.lg-timer__label {
    margin: 0;
    font-size: var(--lg-fs-sm);
    color: var(--lg-ink-2);
}

.lg-timer__value {
    margin: 6px 0 0;
    font-family: var(--lg-font-num);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    /* Cifras de ancho fijo: el número no baila al descontar. */
    font-variant-numeric: tabular-nums;
    color: var(--lg-brand-navy);
}

.lg-timer__value--paused {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--lg-ink-2);
}

html.dark-mode .lg-timer__value {
    color: var(--lg-brand-cyan);
}


/* =============================================================
   8) BANNER DE ALERTA
   ============================================================= */

.lg-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 var(--lg-s-6);
    padding: 14px 16px;
    border: 1px solid var(--lg-danger-bd);
    border-left: 3px solid var(--lg-danger);
    border-radius: var(--lg-r-sm);
    background: var(--lg-danger-bg);
    color: var(--lg-danger-ink);
    font-size: var(--lg-fs-sm);
    line-height: 1.5;
}

/* El atributo hidden debe ganarle al display:flex del componente. */
.lg-alert[hidden] {
    display: none;
}

.lg-alert > i {
    font-size: 17px;
    line-height: 1.35;
    flex: none;
    margin-top: 1px;
}

.lg-alert__body {
    /* min-width:0 permite que los textos largos se partan dentro del
       flex en lugar de desbordar la tarjeta. */
    min-width: 0;
}

.lg-alert__title {
    margin: 0 0 3px;
    font-weight: 700;
    font-size: 13.5px;
}

.lg-alert__text {
    margin: 0;
}

.lg-alert--warning {
    background: var(--lg-warn-bg);
    border-color: var(--lg-warn-bd);
    border-left-color: var(--lg-brand-amber);
    color: var(--lg-warn-ink);
}

.lg-alert--info {
    background: var(--lg-info-bg);
    border-color: var(--lg-info-bd);
    border-left-color: var(--lg-brand-cyan);
    color: var(--lg-info-ink);
}

.lg-alert:focus-visible {
    outline: 2px solid var(--lg-focus);
    outline-offset: 2px;
}


/* =============================================================
   9) FORMULARIO
   ============================================================= */

.lg-form {
    display: block;
}

.lg-field {
    position: relative;
    margin-bottom: var(--lg-s-6);
    /* El espacio inferior reservado evita el salto de layout al
       aparecer el mensaje de error o el aviso de Caps Lock. */
    padding-bottom: var(--lg-s-5);
}

.lg-label {
    display: block;
    margin-bottom: var(--lg-s-2);
    font-size: var(--lg-fs-label);
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--lg-ink-2);
}

.lg-input {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    background: var(--lg-surface-2);
    border: 1.5px solid var(--lg-border-strong);
    border-radius: var(--lg-r-md);
    /* Recorta el fondo de autocompletado a las esquinas redondeadas. */
    overflow: hidden;
    transition:
        border-color var(--lg-dur-2) var(--lg-ease-out),
        background-color var(--lg-dur-2) var(--lg-ease-out),
        box-shadow var(--lg-dur-2) var(--lg-ease-out);
}

.lg-input:hover {
    background: var(--lg-surface-3);
    border-color: #aab8ca;
}

.lg-input:focus-within {
    background: var(--lg-surface);
    border-color: var(--lg-border-focus);
    box-shadow: 0 0 0 3.5px var(--lg-focus-ring);
}

.lg-input__icon {
    position: absolute;
    left: 15px;
    font-size: 17px;
    color: var(--lg-ink-4);
    pointer-events: none;
    transition:
        color var(--lg-dur-2) var(--lg-ease-out),
        transform var(--lg-dur-2) var(--lg-ease-out);
}

.lg-input:focus-within .lg-input__icon {
    color: var(--lg-focus);
    transform: scale(1.06);
}

.lg-input__control {
    width: 100%;
    height: 100%;
    padding: 0 46px 0 45px;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--lg-font);
    font-size: var(--lg-fs-body);
    line-height: 1.4;
    color: var(--lg-ink);
}

.lg-input__control::placeholder {
    color: var(--lg-ink-4);
    opacity: 1;
}

.lg-input__control:-webkit-autofill {
    -webkit-text-fill-color: var(--lg-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--lg-surface-2) inset;
    caret-color: var(--lg-ink);
    transition: background-color 9999s ease-in-out 0s;
}

.lg-input__toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--lg-ink-4);
    cursor: pointer;
    transition:
        color var(--lg-dur-2) var(--lg-ease-out),
        background-color var(--lg-dur-2) var(--lg-ease-out);
}

.lg-input__toggle:hover {
    color: var(--lg-ink-2);
    background: var(--lg-surface-3);
}

.lg-input__toggle:focus-visible {
    outline: 2px solid var(--lg-focus);
    outline-offset: -2px;
}

/* Mensajes: error y aviso comparten la misma franja (bottom:0). */
.lg-field__error {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    gap: 7px;
    align-items: flex-start;
    margin: 0;
    font-size: var(--lg-fs-xs);
    font-weight: 500;
    line-height: 1.45;
    color: var(--lg-danger-ink);
}

.lg-field__error[hidden],
.lg-field__hint[hidden] {
    display: none;
}

.lg-field__error i {
    font-size: 13px;
    margin-top: 1px;
}

.lg-field__hint {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    gap: 7px;
    align-items: center;
    margin: 0;
    padding: 3px 9px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-warn-bg);
    color: var(--lg-warn-ink);
    font-size: var(--lg-fs-label);
    font-weight: 600;
}

.lg-field.is-invalid .lg-input {
    border-color: var(--lg-danger);
    background: var(--lg-danger-bg);
    box-shadow: 0 0 0 3.5px rgba(205, 36, 57, .14);
    animation: lgShake 220ms var(--lg-ease-shake) 1;
}

.lg-field.is-invalid .lg-input__icon {
    color: var(--lg-danger);
}

.lg-field.is-invalid .lg-label {
    color: var(--lg-danger-ink);
}

.lg-field.is-invalid .lg-input__control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--lg-danger-bg) inset;
}

/* Marca el campo como error sin animación (movimiento reducido). */
.lg-field.is-invalid.lg-no-shake .lg-input {
    animation: none;
}


/* =============================================================
   10) BOTÓN
   ============================================================= */

.lg-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--lg-r-md);
    background: linear-gradient(180deg, #0a5cb8 0%, #0253a2 100%);
    color: #fff;
    font-family: var(--lg-font);
    font-size: var(--lg-fs-body);
    font-weight: 700;
    letter-spacing: .012em;
    cursor: pointer;
    box-shadow: var(--lg-shadow-brand), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition:
        transform var(--lg-dur-2) var(--lg-ease-out),
        box-shadow var(--lg-dur-3) var(--lg-ease-out),
        background var(--lg-dur-2) var(--lg-ease-out),
        opacity var(--lg-dur-2) var(--lg-ease-out);
}

/* Barrido de brillo al pasar el cursor. */
.lg-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .26) 50%, transparent 68%);
    transform: translateX(-120%);
    transition: transform 620ms var(--lg-ease-in-out);
}

.lg-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #0a5cb8 0%, #013c7d 100%);
    box-shadow: 0 18px 34px -16px rgba(2, 83, 162, .88), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.lg-btn:hover::after {
    transform: translateX(120%);
}

.lg-btn:active {
    transform: translateY(0) scale(.994);
    box-shadow: 0 6px 14px -10px rgba(2, 83, 162, .8);
}

.lg-btn:focus-visible {
    outline: 3px solid var(--lg-focus-ring-2);
    outline-offset: 3px;
}

.lg-btn[disabled] {
    opacity: .55;
    filter: saturate(.55);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.lg-btn.is-loading {
    pointer-events: none;
    opacity: .9;
}

.lg-btn__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .34);
    border-top-color: #fff;
    animation: lgSpin 700ms linear infinite;
}

.lg-btn.is-loading .lg-btn__spinner {
    display: block;
}

.lg-btn__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}


/* =============================================================
   11) FOOTER
   ============================================================= */

.lg-card__foot {
    margin-top: var(--lg-s-7);
    padding-top: var(--lg-s-5);
    border-top: 1px solid var(--lg-border);
    text-align: center;
}

.lg-card__legal {
    margin: 0;
    font-size: var(--lg-fs-xs);
    line-height: 1.55;
    color: var(--lg-ink-3);
}

.lg-card__company {
    font-weight: 700;
    color: var(--lg-ink-2);
}


/* =============================================================
   12) UTILIDADES
   ============================================================= */

.lg-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    background: var(--lg-brand-navy);
    color: #fff;
    border-radius: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.lg-skip:focus {
    left: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =============================================================
   13) KEYFRAMES
   ============================================================= */

@keyframes lgRise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes lgRiseUp {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes lgSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes lgShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    45% {
        transform: translateX(4px);
    }

    70% {
        transform: translateX(-2px);
    }
}

@keyframes lgAlertIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes lgFade {
    from {
        opacity: 0;
    }

    to {
        opacity: .9;
    }
}


/* =============================================================
   14) ANIMACIONES DE ENTRADA
   ============================================================= */

/* Escalonado del panel de marca (hasta 5 bloques). */
.lg-brand__inner > * {
    animation: lgRise 620ms var(--lg-ease-out) both;
}

.lg-brand__inner > *:nth-child(1) {
    animation-delay: 0ms;
}

.lg-brand__inner > *:nth-child(2) {
    animation-delay: 80ms;
}

.lg-brand__inner > *:nth-child(3) {
    animation-delay: 160ms;
}

.lg-brand__inner > *:nth-child(4) {
    animation-delay: 240ms;
}

.lg-brand__inner > *:nth-child(5) {
    animation-delay: 320ms;
}

.lg-card {
    animation: lgRise 680ms var(--lg-ease-out) 120ms both;
}

.lg-alert {
    animation: lgAlertIn 320ms var(--lg-ease-out) both;
}

.lg-mural {
    animation: lgFade 900ms var(--lg-ease-in-out) 200ms both;
}

.lg-theme {
    animation: lgRiseUp 400ms var(--lg-ease-out) 300ms both;
}

.lg-field__error {
    animation: lgAlertIn 200ms var(--lg-ease-out) both;
}


/* =============================================================
   15) MEDIA QUERIES
   ============================================================= */

/* --- Tablet y móvil: una sola columna --- */
@media (max-width: 1023px) {
    .lg-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .lg-brand {
        padding: 26px 24px 30px;
    }

    .lg-brand__inner {
        max-width: none;
        gap: 22px;
    }

    /* El titular largo se oculta: el espacio lo ocupa el formulario. */
    .lg-brand__pitch {
        display: none;
    }

    .lg-mural {
        height: 120px;
    }

    .lg-modules {
        gap: 6px;
        margin-bottom: 12px;
    }

    .lg-trust {
        margin-bottom: 12px;
    }

    .lg-access {
        padding: 28px 20px 40px;
    }

    .lg-card {
        padding: 34px 30px;
    }

    .lg-theme {
        top: 16px;
        right: 16px;
    }
}

/* --- Móvil --- */
@media (max-width: 767px) {
    .lg-brand {
        padding: 20px 18px 22px;
    }

    .lg-brand__plate {
        width: 48px;
        height: 48px;
        border-radius: 13px;
        padding: 8px;
    }

    .lg-wordmark {
        font-size: 26px;
    }

    .lg-brand__tag {
        font-size: 10.5px;
        letter-spacing: .1em;
    }

    .lg-mural {
        height: 90px;
    }

    .lg-modules {
        display: none;
    }

    .lg-trust {
        font-size: 11.5px;
        margin-bottom: 0;
    }

    .lg-access {
        padding: 20px 14px 32px;
    }

    .lg-card {
        padding: 26px 20px;
        box-shadow: none;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .lg-brand__company {
        display: none;
    }
}

/* --- Móvil pequeño --- */
@media (max-width: 479px) {
    .lg-card {
        padding: 22px 16px;
    }

    .lg-btn {
        height: 52px;
    }

    .lg-card__title {
        font-size: 24px;
    }

    .lg-card__sub {
        font-size: 13.5px;
    }
}

/* --- Pantallas grandes --- */
@media (min-width: 1600px) {
    .lg-shell {
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    }
}

/* --- Pantallas bajas en horizontal (móvil apaisado) --- */
@media (max-height: 520px) and (max-width: 1023px) {
    .lg-brand {
        padding: 14px 18px;
    }

    .lg-brand__foot {
        display: none;
    }

    .lg-mural {
        height: 64px;
    }
}


/* =============================================================
   16) MOVIMIENTO REDUCIDO
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .lg-brand__inner > *,
    .lg-card,
    .lg-mural,
    .lg-theme,
    .lg-alert {
        opacity: 1 !important;
        transform: none !important;
    }

    .lg-btn::after {
        display: none;
    }

    .lg-input:focus-within .lg-input__icon {
        transform: none;
    }

    .lg-field.is-invalid .lg-input {
        animation: none;
    }

    /* La transición de entrada al sistema se resuelve sin movimiento:
       la cortina no barre, el mural no crece y el logotipo no recibe
       el barrido de luz. El JavaScript acorta además la espera antes
       de navegar. */
    .lg-is-exiting .lg-boot,
    .lg-is-exiting .lg-mural g rect,
    .lg-is-exiting .lg-brand__plate::after,
    .lg-is-exiting .lg-brand__id,
    .lg-is-exiting .lg-brand__pitch {
        animation: none !important;
    }

    .lg-is-exiting .lg-boot {
        transform: none !important;
        opacity: 0 !important;
    }
}


/* =============================================================
   17) TRANSICIÓN DE ACCESO (procesando / saliendo / error)
   ---------------------------------------------------------
   Estados que aplica js/login.js sobre <body class="lg-body">:
     .lg-is-processing  el sistema está comprobando
     .lg-is-exiting     la tarjeta se disuelve y entra SISGCOMP
     .lg-has-error     el aviso de error se muestra en el sitio
   ============================================================= */

/* ---------- Estado: PROCESANDO ---------- */
.lg-form,
.lg-field {
    transition:
        opacity var(--lg-dur-3) var(--lg-ease-out),
        filter var(--lg-dur-3) var(--lg-ease-out),
        transform var(--lg-dur-3) var(--lg-ease-out);
}

/* Los campos se atenúan y desenfocan: el sistema está comprobando.
   El botón queda fuera del desvanecimiento porque su spinner es la
   única señal de progreso y debe seguir siendo legible. */
.lg-is-processing .lg-field {
    opacity: .42;
    filter: blur(2px);
}

/* El formulario entero retrocede un poco mientras comprueba. */
.lg-is-processing .lg-form {
    transform: translateY(8px) scale(.995);
    pointer-events: none;
}

/* Latido del botón mientras procesa (el spinner ya existe).
   El latido sustituye al aspecto "deshabilitado": el botón sigue
   vivo mientras el sistema comprueba. */
.lg-btn.is-loading {
    filter: none;
    animation: lgPulse 1.5s ease-in-out infinite;
}

@keyframes lgPulse {
    0%, 100% {
        box-shadow: var(--lg-shadow-brand), inset 0 1px 0 rgba(255, 255, 255, .18);
    }
    50% {
        box-shadow: 0 18px 36px -14px rgba(2, 83, 162, .95), 0 0 0 6px rgba(55, 190, 237, .16), inset 0 1px 0 rgba(255, 255, 255, .22);
    }
}

/* ---------- Estado: SALIENDO (entrada a SISGCOMP) ---------- */
.lg-card {
    transition:
        opacity var(--lg-dur-4) var(--lg-ease-out),
        transform var(--lg-dur-4) var(--lg-ease-out),
        filter var(--lg-dur-4) var(--lg-ease-out),
        border-color var(--lg-dur-2) var(--lg-ease-out);
}

/* La tarjeta se levanta y se disuelve.
   La animación de entrada se cancela: con fill-mode "both" seguiría
   manteniendo la tarjeta opaca y taparía la transición. */
.lg-is-exiting .lg-card {
    animation: none;
    opacity: 0;
    transform: translateY(-16px) scale(.965);
    filter: blur(3px);
}

.lg-access {
    transition: opacity var(--lg-dur-4) var(--lg-ease-out);
}

.lg-is-exiting .lg-access {
    opacity: 0;
}

/* Cortina: entra desde la derecha y tapa la pantalla con el azul de
   marca. El último fotograma es el azul de SISGCOMP y de ahí se pasa
   al sistema. */
.lg-boot {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: linear-gradient(135deg, #04142c 0%, #012348 55%, #0253a2 100%);
    transform: translateX(100%);
    will-change: transform;
}

.lg-is-exiting .lg-boot {
    animation: lgCurtain 560ms cubic-bezier(.7, 0, .2, 1) 140ms forwards;
}

@keyframes lgCurtain {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Mural de barras: crecen desde su base. Es el "el sistema se pone en
   marcha" del momento. */
.lg-is-exiting .lg-mural g rect {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: lgBarsRise 560ms var(--lg-ease-out) both;
}

@keyframes lgBarsRise {
    from { transform: scaleY(0); opacity: .25; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* Retardos escalonados: 17 barras, 30ms entre ellas (0ms … 480ms). */
.lg-is-exiting .lg-mural g rect:nth-child(1)  { animation-delay:   0ms; }
.lg-is-exiting .lg-mural g rect:nth-child(2)  { animation-delay:  30ms; }
.lg-is-exiting .lg-mural g rect:nth-child(3)  { animation-delay:  60ms; }
.lg-is-exiting .lg-mural g rect:nth-child(4)  { animation-delay:  90ms; }
.lg-is-exiting .lg-mural g rect:nth-child(5)  { animation-delay: 120ms; }
.lg-is-exiting .lg-mural g rect:nth-child(6)  { animation-delay: 150ms; }
.lg-is-exiting .lg-mural g rect:nth-child(7)  { animation-delay: 180ms; }
.lg-is-exiting .lg-mural g rect:nth-child(8)  { animation-delay: 210ms; }
.lg-is-exiting .lg-mural g rect:nth-child(9)  { animation-delay: 240ms; }
.lg-is-exiting .lg-mural g rect:nth-child(10) { animation-delay: 270ms; }
.lg-is-exiting .lg-mural g rect:nth-child(11) { animation-delay: 300ms; }
.lg-is-exiting .lg-mural g rect:nth-child(12) { animation-delay: 330ms; }
.lg-is-exiting .lg-mural g rect:nth-child(13) { animation-delay: 360ms; }
.lg-is-exiting .lg-mural g rect:nth-child(14) { animation-delay: 390ms; }
.lg-is-exiting .lg-mural g rect:nth-child(15) { animation-delay: 420ms; }
.lg-is-exiting .lg-mural g rect:nth-child(16) { animation-delay: 450ms; }
.lg-is-exiting .lg-mural g rect:nth-child(17) { animation-delay: 480ms; }

/* Barrido de luz sobre el logotipo. */
.lg-brand__plate {
    position: relative;
    overflow: hidden;
}

.lg-brand__plate::after {
    content: '';
    position: absolute;
    inset: -50% -70%;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .9) 50%, transparent 58%);
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
}

.lg-is-exiting .lg-brand__plate::after {
    animation: lgSweep 780ms var(--lg-ease-in-out) 120ms forwards;
}

@keyframes lgSweep {
    0%   { transform: translateX(-120%); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}

/* El logotipo y el titular se elevan levemente (reutiliza lgRise). */
.lg-is-exiting .lg-brand__id,
.lg-is-exiting .lg-brand__pitch {
    animation: lgRise 520ms var(--lg-ease-out) both;
}

/* ---------- Estado: ERROR en el sitio ---------- */
.lg-has-error .lg-card {
    border-color: var(--lg-danger-bd);
}