/* ==========================================================================
   login.css — Acceso (login.php)
   Concepto: la puerta del sistema. No dice qué empresas hay detrás (quien no
   tiene la contraseña no tiene por qué saberlo): el fondo es un libro mayor
   en verde botella, sin ningún color de empresa. Toda la página va en color; la tarjeta queda en blanco para que
   los campos se lean con máximo contraste.
   ========================================================================== */

body.login-page {
    --login-bg: #0e2f27;
    --rule: rgba(167, 243, 208, .12);      /* renglón del libro */
    --col: rgba(167, 243, 208, .12);       /* columnas de montos */
    --margin: rgba(255, 138, 122, .8);    /* doble margen coral, el detalle audaz */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: #fff;
    background-color: var(--login-bg);
    /* Verde botella de libro contable, con una sola luz cálida arriba, como una lámpara sobre el escritorio */
    background-image:
        radial-gradient(70rem 42rem at 50% -18%, rgba(255, 214, 160, .17), transparent 62%),
        linear-gradient(180deg, #123a30 0%, #0e2f27 45%, #0a241d 100%);
    background-attachment: fixed;
}
/* Papel de libro mayor: renglones, doble margen y columnas de montos */
body.login-page::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        /* doble línea de margen, a la izquierda */
        linear-gradient(90deg,
            transparent calc(16% - 7px), var(--margin) calc(16% - 7px), var(--margin) calc(16% - 6px),
            transparent calc(16% - 6px), transparent calc(16% - 2px), var(--margin) calc(16% - 2px),
            var(--margin) calc(16% - 1px), transparent calc(16% - 1px)),
        /* columnas de debe, haber y saldo, a la derecha */
        linear-gradient(90deg,
            transparent 72%, var(--col) 72%, var(--col) calc(72% + 1px), transparent calc(72% + 1px),
            transparent 81%, var(--col) 81%, var(--col) calc(81% + 1px), transparent calc(81% + 1px),
            transparent 90%, var(--col) 90%, var(--col) calc(90% + 1px), transparent calc(90% + 1px)),
        /* renglones */
        repeating-linear-gradient(180deg, transparent 0, transparent 35px, var(--rule) 35px, var(--rule) 36px);
    /* el papel se desvanece hacia abajo, sin cortes duros */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
/* Encabezados de las columnas del libro, sobre el doble filete */
.login-ledger { position: fixed; top: 50px; left: 0; right: 0; height: 18px; pointer-events: none; z-index: 0; }
.login-ledger span {
    position: absolute; transform: translateX(8px);
    font-family: var(--font-display); font-size: .75rem; font-weight: 500; letter-spacing: .02em;
    color: rgba(209, 250, 229, .55);
}
.login-ledger span:nth-child(1) { left: 72%; }
.login-ledger span:nth-child(2) { left: 81%; }
.login-ledger span:nth-child(3) { left: 90%; }
.login-ledger span:nth-child(4) { left: 16%; color: rgba(255, 170, 158, .7); }
/* Cabecera del libro: doble filete horizontal arriba */
body.login-page::after {
    content: ''; position: fixed; left: 0; right: 0; top: 72px; height: 5px; pointer-events: none; z-index: 0;
    border-top: 1px solid rgba(167, 243, 208, .22); border-bottom: 1px solid rgba(167, 243, 208, .22);
}
@media (max-width: 575.98px) {
    body.login-page::before {
        background-image:
            linear-gradient(90deg,
                transparent 18px, var(--margin) 18px, var(--margin) 19px,
                transparent 19px, transparent 23px, var(--margin) 23px, var(--margin) 24px, transparent 24px),
            repeating-linear-gradient(180deg, transparent 0, transparent 35px, var(--rule) 35px, var(--rule) 36px);
    }
    body.login-page::after { top: 22px; }
    .login-ledger { display: none; }
}

.login-shell {
    position: relative; z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem 2rem;
}

.login-brand {
    display: flex; align-items: center; gap: .65rem;
    margin-bottom: 2rem;
    color: #fff; text-decoration: none;
    font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em;
}
.login-brand__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 11px;
    background: #fff; color: #14503f; font-size: 1rem;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
}

/* --- La tarjeta ------------------------------------------------------------ */
.login-folder { position: relative; width: 100%; max-width: 420px; }

.login-card {
    position: relative; z-index: 4;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 22px;
    box-shadow: 0 40px 80px -30px rgba(2, 20, 15, .8), 0 0 0 6px rgba(255, 255, 255, .06);
    overflow: hidden;
}
/* Filete de color arriba de la tarjeta */
.login-card::before {
    content: ''; display: block; height: 5px;
    background: linear-gradient(90deg, #ff8a7a 0%, #f5c26b 50%, #34b38a 100%);
}
.login-card__body { padding: 2rem 2.25rem 2.25rem; }

.login-title {
    font-family: var(--font-display);
    font-size: 1.75rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.1;
    margin: 0 0 .5rem;
}
.login-lead { color: var(--muted); font-size: .9375rem; margin: 0 0 1.75rem; }

/* --- Campos ---------------------------------------------------------------- */
.login-field { margin-bottom: 1.1rem; }
.login-field label { display: block; font-size: .875rem; font-weight: 500; color: var(--ink-2); margin-bottom: .4rem; }
.login-field .form-control {
    height: 46px;
    padding: .55rem .85rem;
    font-size: 1rem;
    border-radius: 11px;
}
.login-field .form-control:focus { border-color: #1d6b54; box-shadow: 0 0 0 3px rgba(29, 107, 84, .18); }

.login-password { position: relative; }
.login-password .form-control { padding-right: 3rem; }
.login-reveal {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 8px;
    color: var(--muted); font-size: 1.05rem;
}
.login-reveal:hover { color: var(--ink); background: var(--surface-2); }
.login-reveal:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.login-remember { display: flex; align-items: center; gap: .55rem; margin: .35rem 0 1.5rem; font-size: .875rem; color: var(--ink-2); cursor: pointer; width: fit-content; }
.login-remember .form-check-input { margin: 0; width: 1.05rem; height: 1.05rem; }
.login-remember .form-check-input:checked { background-color: #1d6b54; border-color: #1d6b54; }

.login-submit {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; height: 48px;
    border: 0; border-radius: 12px; font-size: 1rem; font-weight: 600;
    color: #fff; background: linear-gradient(135deg, #1d6b54 0%, #14503f 100%);
    box-shadow: 0 10px 22px -12px rgba(20, 80, 63, .9);
}
.login-submit:hover, .login-submit:focus { color: #fff; filter: brightness(1.08); background: linear-gradient(135deg, #1d6b54 0%, #14503f 100%); }
.login-submit:focus-visible { outline: 2px solid #0a241d; outline-offset: 2px; }
.login-submit .bi { transition: transform .2s ease; }
.login-submit:hover .bi { transform: translateX(3px); }
.login-submit[disabled] { opacity: .7; }

.login-secondary { display: block; width: 100%; margin-top: .6rem; text-align: center; font-size: .875rem; color: var(--muted); text-decoration: none; padding: .5rem; border-radius: 10px; }
.login-secondary:hover { color: var(--ink); background: var(--surface-2); }

/* Código de doble factor: grande y espaciado para leerlo de un vistazo */
.login-code {
    height: 58px !important;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.5rem !important; font-weight: 500;
    letter-spacing: .4em; padding-left: 1.2rem !important;
}

.login-alert { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; margin-bottom: 1.25rem; }
.login-alert .bi { margin-top: .1rem; }

.login-foot { margin-top: 2rem; font-size: .8125rem; color: rgba(255, 255, 255, .62); text-align: center; }

@media (max-width: 575.98px) {
    .login-shell { justify-content: flex-start; padding-top: 2.5rem; }
    .login-brand { margin-bottom: 1.75rem; }
    .login-card__body { padding: 1.6rem 1.35rem 1.6rem; }
    .login-title { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .login-submit .bi { transition: none; }
}