.password {
    position: relative;
}

.password .material-icons {
    right: 10px;
    position: absolute;
    top: 6px;
    cursor: pointer;
    z-index: 2;
}

.login-page .card-login .card-header {
    border-radius: 50%;
    margin-top: -20%;
    margin-left: 30%;
    margin-right: 30%;
    margin-bottom: 30px;
}

.card [data-background-color].card-header {
    padding: 5px;
}

.card-header .img-container>img {
    border-radius: 50%;
    max-height: 120px;
}
.card-header .img-container-horizontal>img {
    max-width: 220px;
}

.card-login .checkbox {
    margin-top: 10px;
}

.lds-dual-ring {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: -11px;
}
.input-group.input-group-outline.is-focused label {
    z-index: 3;
}

/* Cambiar el color de fondo cuando el campo es autocompletado */
input:-webkit-autofill {
    background-color: rgb(255, 255, 255) !important;
    -webkit-box-shadow: 0 0 0px 1000px rgb(255, 255, 255) inset !important;
    box-shadow: 0 0 0px 1000px rgb(255, 255, 255) inset !important;
}

/* Para otros navegadores que soportan la pseudo-clase :autofill */
.input-group.input-group-outline.is-focused input:autofill {
    background-color: rgb(255, 255, 255) !important;
    box-shadow: 0 0 0px 1000px rgb(255, 255, 255) inset !important;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 34px;
    height: 34px;
    margin: 1px;
    border-radius: 50%;
    border: 3px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

[data-tooltip] {
    position: relative;
    z-index: 2;
}

[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

[data-tooltip]:before {
    position: absolute;
    bottom: 74%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    transition: opacity 500ms, transform 500ms;
}

[data-tooltip]:after {
    position: absolute;
    bottom: 74%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
    transition: opacity 500ms, transform 500ms;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.ulDesc {
    top: 53px;
    width: 210px;
    text-align: -webkit-center;
    border-radius: 15px !important;
    left: auto !important;
    right: 0 !important;
}

.h1Desc {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 10px 10px 0 0;
    font-weight: 500;
}

/*
 * Legacy split-layout (.full-page display:grid) — unused by current app/login.
 * Kept neutralized so admin/login.php and app/user/reset.php can safely link this file
 * (admin uses class "full-page"; grid broke Material min-vh-100 layout).
 */
.split {
    z-index: 4;
    overflow-x: hidden;
    padding-top: 20px;
}

.split.left {
    display: none;
}

.split.right {
    background-color: #fff;
}

.page-background {
    display: flex;
    align-items: center;
    justify-content: center;
}

.centered {
    margin: 25px 10px;
    max-width: 450px;
}

.shadowL {
    box-shadow: 0px 0px 15px -12px rgb(0 0 0 / 42%),
        0 4px 25px 0 rgb(0 0 0 / 12%),
        0 8px 10px -5px rgb(0 0 0 / 20%) !important;
    border-radius: 11px !important;
}

.createD {
    width: 250px;
    margin: auto;
    text-align: center;
}

.createD {
    text-align: center !important;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    text-align: left;
    line-height: 1.2em;
}

.linkOf {
    margin: auto;
    width: 350px;
    font-family: inherit;
    color: #fff;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    letter-spacing: 2px;
    padding-top: 20px;
    text-align: center;
}

.full-page-background.lazy {
    background-image: none;
}

.clH {
    color: white;
}

.clH:hover {
    color: white;
    text-decoration: underline;
    cursor: pointer;
    text-transform: lowercase;
}

.descCt {
    border-radius: 10%;
    margin: auto;
    backdrop-filter: saturate(108%) blur(3px);
    background-color: rgb(255 255 255 / 0%) !important;
    padding: 6px;
}

.message-login {
    transition: opacity 0.5s;
    min-height: 64px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 16px;
    padding-bottom: 16px;
}

#random-msg {
    margin-top: 8px;
}

#random-msg .opacity-hr {
    margin-top: 16px;
}

.color-msg {
    background-color: #eaf3ff;
    border-bottom-right-radius: var(--bs-card-border-radius);
    border-bottom-left-radius: var(--bs-card-border-radius);
}

.hidden {
    opacity: 0;
}

.card-login-pd{
    padding: 0px 15px!important;
}

.opacity-hr {
    opacity: 0.65;
}

.login-options {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
}

.login-options>div {
    align-self: start;
}

#forgot-div {
    padding-top: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#forgot-div .text-sm {
    margin-bottom: 0;
}

#rem-pass-div {
    display: none;
}

.pointer-eye {
    cursor: pointer;
}

/* Link recover — contraste AA (no --radio-label) */
.auth-recover-link {
    color: var(--a);
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    padding: 8px 0;
    line-height: 1.4;
}

.auth-recover-link:hover,
.auth-recover-link:focus {
    color: var(--a-hover);
    text-decoration: underline;
}

.auth-recover-link:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Stack 1-col (premium): forgot → switches; sin grid 2-col que empuja “Olvidé…” al borde */
@media (min-width: 768px) {
    .login-options {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        column-gap: 0;
        row-gap: 8px;
    }
    #forgot-div {
        padding-top: 0;
        grid-column: 1 / -1;
        text-align: right;
        justify-content: flex-end;
    }
    #rem-pass-div {
        grid-row: auto;
        grid-column: 1 / -1;
        display: block;
    }
    #remember-div {
        grid-column: 1 / -1;
    }
}

/* Legacy .full-page grid breakpoints removed — see comment above .split */
@media (min-width: 992px) {
    .split.left {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
@media (max-width: 991px) {

    .letterC {
        font-weight: bold;
    }

    .navCont {
        display: contents;
    }

    .back {
        background: #d29439;
    }
}
@media (max-width: 550px) {
    .card-header .img-container-horizontal>img {
        max-width: 145px;
    }
    .card-header .img-container>img {
        max-height: 90px;
    }
}


@media (max-width: 350px) {
    .message-login {
        min-height: 80px;
    }
    .card-header .img-container-horizontal>img {
        max-width: 145px;
    }
}

/* Botón "Continuar con Google" — Google branding guidelines */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    background: #fff;
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.btn-google:hover,
.btn-google:focus,
.btn-google:focus-visible {
    background: #f8f9fa;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
    color: #3c4043;
    text-decoration: none;
}

.btn-google:focus-visible {
    outline: 2px solid var(--primary-500, #4f69b5);
    outline-offset: 2px;
}

/*
 * Separators: técnica línea absoluta (no flex).
 * jQuery .show() fuerza display:block y rompería flex + ::before/::after.
 */
.google-login-separator {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    color: #616161;
    font-size: 13px;
    line-height: 1;
    text-align: center;
}

.google-login-separator::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 0;
    border-top: 1px solid #9e9e9e;
}

.google-login-separator::after {
    content: none;
}

.google-login-separator span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 10px;
    background-color: #fff;
    color: #616161;
}

/* Botón passkey / huella — misma familia visual que Google */
.btn-biometric {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--primary-300, #899acd);
    border-radius: 4px;
    background: #fff;
    color: var(--primary-700, #3949ab);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.btn-biometric:hover,
.btn-biometric:focus,
.btn-biometric:focus-visible {
    background: #f7f8fc;
    border-color: var(--primary-500, #4f69b5);
    box-shadow: 0 1px 2px rgba(57, 73, 171, 0.14);
    outline: none;
}

.btn-biometric:focus-visible {
    outline: 2px solid var(--primary-500, #4f69b5);
    outline-offset: 2px;
}

.btn-biometric:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-biometric .material-icons {
    font-size: 20px;
    line-height: 1;
}

/* ========== AUTH SPACE (Facture only — Deep Space Aurora) ========== */
body.auth-theme-space {
    --auth-glass-bg: rgba(15, 23, 42, 0.45);
    --auth-glass-blur: 20px;
    --auth-field-bg: #0b1220;
    /* Lift óptico dark: blur+saturate+aurora del glass. #0f172a (RGB glass) aún se leía sticker.
     * Origen: 50% #0f172a + 50% #243b6b. No usar --auth-field-bg. */
    --auth-chip-bg: #1a294b;
    --auth-on-glass: #e2e8f0;
    --auth-on-glass-muted: #94a3b8;
    /* Plan N tokens (D9): card 12 / controls 10 */
    --auth-radius-card: 12px;
    --auth-radius-control: 10px;
    --auth-space-2: 8px;
    --auth-space-3: 12px;
    --auth-space-4: 16px;
    --auth-space-5: 24px;
    /* Respiración óptica de switches bajo campos con icono interno (N1). Tunear aquí. */
    --auth-options-indent: var(--auth-space-4);
    --auth-control-h: 48px;
    /* Plan P: columna content = campos/CTA/tip (desktop) */
    --auth-inset: 24px;
    /* Elevación ambient CTA (no glow cromático Soft UI / MD) */
    --auth-elev-cta: 0 8px 24px rgba(2, 6, 23, 0.45);
    --auth-elev-cta-hover: 0 10px 28px rgba(2, 6, 23, 0.55);
}

body.auth-theme-space .page-header {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    isolation: isolate;
    background-color: #020617;
    background-image:
        radial-gradient(ellipse 90% 60% at 12% 22%, rgba(79, 105, 181, 0.42) 0%, transparent 58%),
        radial-gradient(ellipse 70% 55% at 88% 18%, rgba(124, 58, 237, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse 75% 55% at 78% 78%, rgba(53, 71, 126, 0.48) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 42% 58%, rgba(139, 92, 246, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 48% 48%, rgba(99, 120, 190, 0.16) 0%, transparent 62%),
        linear-gradient(165deg, #020617 0%, #0c1020 42%, #1e1b4b 100%);
}

/* Nebulosa + aurora violeta (CSS-only) */
body.auth-theme-space .page-header::before {
    content: "";
    position: absolute;
    inset: -18%;
    /* Anula MD .full-page:before { width/height:100% } — sin esto inset queda
     * sobre-restringido (admin usa .full-page) y aparece costura vertical. */
    width: auto;
    height: auto;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 36%, rgba(79, 105, 181, 0.34) 0%, transparent 40%),
        radial-gradient(circle at 72% 58%, rgba(36, 49, 87, 0.58) 0%, transparent 46%),
        radial-gradient(circle at 60% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 38%),
        radial-gradient(circle at 50% 20%, rgba(180, 200, 255, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 15% 80%, rgba(100, 130, 200, 0.08) 0%, transparent 40%);
    animation: auth-space-drift 36s ease-in-out infinite alternate;
}

/* Estrellas — un nodo, muchos puntos vía box-shadow */
body.auth-theme-space .page-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 2px;
    height: 2px;
    pointer-events: none;
    border-radius: 50%;
    background: transparent;
    opacity: 0.92;
    box-shadow:
        8vw 12vh 0 0 rgba(255, 255, 255, 0.75),
        18vw 22vh 0 0 rgba(255, 255, 255, 0.4),
        28vw 8vh 0 0 rgba(255, 255, 255, 0.55),
        38vw 35vh 0 0 rgba(255, 255, 255, 0.35),
        48vw 18vh 0 0 rgba(255, 255, 255, 0.7),
        58vw 42vh 0 0 rgba(255, 255, 255, 0.3),
        68vw 14vh 0 0 rgba(255, 255, 255, 0.5),
        78vw 28vh 0 0 rgba(255, 255, 255, 0.65),
        88vw 48vh 0 0 rgba(255, 255, 255, 0.35),
        12vw 58vh 0 0 rgba(255, 255, 255, 0.45),
        22vw 72vh 0 0 rgba(255, 255, 255, 0.6),
        32vw 52vh 0 0 rgba(255, 255, 255, 0.3),
        42vw 68vh 0 0 rgba(255, 255, 255, 0.55),
        52vw 82vh 0 0 rgba(255, 255, 255, 0.4),
        62vw 62vh 0 0 rgba(255, 255, 255, 0.7),
        72vw 78vh 0 0 rgba(255, 255, 255, 0.35),
        82vw 88vh 0 0 rgba(255, 255, 255, 0.5),
        92vw 66vh 0 0 rgba(255, 255, 255, 0.4),
        5vw 38vh 0 0 rgba(255, 255, 255, 0.55),
        95vw 22vh 0 0 rgba(255, 255, 255, 0.45),
        15vw 88vh 0 0 rgba(255, 255, 255, 0.3),
        45vw 5vh 0 0 rgba(255, 255, 255, 0.6),
        75vw 55vh 0 0 rgba(255, 255, 255, 0.4),
        55vw 95vh 0 0 rgba(255, 255, 255, 0.5);
    animation: auth-space-twinkle 10s ease-in-out infinite alternate;
}

/* Stacking: mask sigue absolute (Material); container encima del cielo */
body.auth-theme-space .page-header > .mask {
    z-index: 1;
}

body.auth-theme-space .page-header > .container {
    position: relative;
    z-index: 2;
}

/* Mask suave — no apagar nebulosa */
body.auth-theme-space .page-header > .mask.bg-gradient-dark {
    opacity: 0.18 !important;
    background: linear-gradient(180deg, rgba(12, 16, 32, 0.35) 0%, rgba(12, 16, 32, 0.15) 100%) !important;
}

/* Glass oscuro aurora: rim + elevación B2B; overflow hidden recorta banda light (sin gaps TL/TR) */
body.auth-theme-space .page-header .card {
    border-radius: var(--auth-radius-card);
    overflow: hidden;
    background: var(--auth-glass-bg);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 12px 40px rgba(2, 6, 23, 0.55),
        0 4px 12px rgba(2, 6, 23, 0.35);
    -webkit-backdrop-filter: blur(var(--auth-glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--auth-glass-blur)) saturate(150%);
    font-family: system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--auth-on-glass);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.auth-theme-space .page-header .card {
        /* WebView sin blur: opacidad alta oscura (≥0.92) */
        background: rgba(15, 23, 42, 0.92);
    }
}

/* Q2: banda de marca — geometría única dark/light (solo color cambia en scheme) */
body.auth-theme-space .page-header .card > .card-header {
    padding: 0 !important;
    border-bottom: none;
    background: transparent;
}

/* Marca: pad compartido (vence py-4 HTML); dark = transparente.
 * Asimétrico: top space-5, bottom space-3 (−12px) → franja más compacta. */
body.auth-theme-space .page-header .card > .card-header .bg-gradient-primary {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
    padding: var(--auth-space-5) var(--auth-inset) var(--auth-space-3) !important;
    background-color: transparent !important;
    background-image: none !important;
}

body.auth-theme-space .page-header .card > .card-header .shadow-primary {
    box-shadow: none !important;
}

body.auth-theme-space .page-header .card > .card-header .img-container-horizontal.mt-2 {
    margin-top: 0 !important;
}

/*
 * Fields dark + outline Material (assets_b5).
 * MD Soft UI notch (:before/:after) se mutea siempre — con campos opacos Facture
 * los segmentos border-top generan gaps en reposo. Focus/filled: borde top sólido
 * (vence MD transparent) + chip local en el label.
 */
body.auth-theme-space .page-header .card .form-control,
body.auth-theme-space .page-header .card .input-group-outline {
    background-color: var(--auth-field-bg);
    color: var(--auth-on-glass);
}

body.auth-theme-space .page-header .card .input-group.input-group-outline .form-control {
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: var(--auth-on-glass);
    background: var(--auth-field-bg);
    border-radius: var(--auth-radius-control);
    /* Defensa: el fill no pinta bajo el borde (evita comer el label flotante). */
    background-clip: padding-box;
}

/*
 * Fondo opaco (--auth-field-bg) tapa el floating label Soft UI en reposo
 * (MD solo pone z-index en is-focused/is-filled). pointer-events:none: el
 * label no debe robar clicks al input ni al .auth-toggle-pw del outline.
 */
body.auth-theme-space .page-header .card .input-group.input-group-outline > .form-label {
    z-index: 3;
    pointer-events: none;
}

/* Soft UI notch MD innecesario — display:none en todos los estados (reposo/focus/filled). */
body.auth-theme-space .page-header .card .input-group.input-group-outline .form-label:before,
body.auth-theme-space .page-header .card .input-group.input-group-outline .form-label:after {
    display: none !important;
}

/*
 * Focus/filled Facture: overlay Material (campos opacos).
 * Borde top sólido (MD pone transparent + notch); chip local en el label.
 * !important en box-shadow: anula inset Soft UI MD (L/R/bottom) — labio azul de la foto.
 */
body.auth-theme-space .page-header .card .input-group.input-group-outline.is-focused .form-label + .form-control,
body.auth-theme-space .page-header .card .input-group.input-group-outline.is-filled .form-label + .form-control {
    border-color: #3b82f6 !important;
    border-top-color: #3b82f6 !important;
    box-shadow: none !important;
}

body.auth-theme-space .page-header .card .input-group.input-group-outline.is-focused .form-label,
body.auth-theme-space .page-header .card .input-group.input-group-outline.is-filled .form-label {
    width: auto !important;
    max-width: calc(100% - 1.5rem);
    height: auto !important;
    padding: 0 5px;
    /* Chip = superficie card (no fill del campo) — corta el borde outline sin nicks. */
    background-color: var(--auth-chip-bg) !important;
    box-shadow: -3px 0 0 var(--auth-chip-bg), 3px 0 0 var(--auth-chip-bg);
    line-height: 1.25 !important;
    color: #93c5fd !important;
    /* Vence z-index:3 del label en reposo y form-control:focus (z-index:5). */
    z-index: 6;
}

body.auth-theme-space .page-header .card .form-label {
    color: var(--auth-on-glass-muted) !important;
}

/* Copy auxiliar (admin PIN #login_title, etc.): vence MD .text-muted !important */
body.auth-theme-space .page-header .card .text-muted {
    color: var(--auth-on-glass-muted) !important;
}

/*
 * Links MD text-gradient.text-primary usan navy (#123a6f→#001436) — ~1.5:1 sobre glass.
 * En dark: sólido cielo (mismo acento que recover), sin clip transparente.
 */
body.auth-theme-space .page-header .card a.text-gradient.text-primary {
    background-image: none;
    -webkit-text-fill-color: #93c5fd;
    color: #93c5fd;
}

body.auth-theme-space .page-header .card a.text-gradient.text-primary:hover,
body.auth-theme-space .page-header .card a.text-gradient.text-primary:focus {
    -webkit-text-fill-color: #bfdbfe;
    color: #bfdbfe;
}

/* Keyframe vacío: señal para auth_outline_filled_script (animationstart). */
@keyframes auth-outline-autofill {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

/* Autofill: debe ganar a filled/focus `box-shadow: none !important`
 * (misma cadena .form-label + .form-control + :autofill → +1 pseudo-class). */
body.auth-theme-space .page-header .card .input-group.input-group-outline .form-label + .form-control:-webkit-autofill,
body.auth-theme-space .page-header .card .input-group.input-group-outline .form-label + .form-control:autofill,
body.auth-theme-space .page-header .card .input-group.input-group-outline.is-focused .form-label + .form-control:-webkit-autofill,
body.auth-theme-space .page-header .card .input-group.input-group-outline.is-focused .form-label + .form-control:autofill,
body.auth-theme-space .page-header .card .input-group.input-group-outline.is-filled .form-label + .form-control:-webkit-autofill,
body.auth-theme-space .page-header .card .input-group.input-group-outline.is-filled .form-label + .form-control:autofill {
    background-color: var(--auth-field-bg) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 23, 42, 0.85) inset !important;
    box-shadow: 0 0 0 1000px rgba(15, 23, 42, 0.85) inset !important;
    -webkit-text-fill-color: var(--auth-on-glass) !important;
    caret-color: var(--auth-on-glass);
    animation-name: auth-outline-autofill;
    animation-duration: 0.001s;
}

/* Google oficial blanco. Biometric resting/hover: ver selector .page-header .card (N3). */
body.auth-theme-space .btn-google {
    background: #fff;
}

body.auth-theme-space .page-header .card .btn-biometric .material-icons {
    color: #cbd5e1;
    font-size: 18px;
    filter: none;
}

/* Separator: línea sin letra "o" */
body.auth-theme-space .google-login-separator span {
    font-size: 0;
    line-height: 0;
    color: transparent;
    background-color: transparent;
    padding: 0;
    width: 0;
    overflow: hidden;
}

body.auth-theme-space .google-login-separator::before {
    border-top-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* Spinner platino: ring claro (CTA usa blanco global) */
body.auth-theme-space .btn-biometric .lds-dual-ring:after {
    border: 3px solid rgba(226, 232, 240, 0.9);
    border-color: rgba(226, 232, 240, 0.9) transparent rgba(226, 232, 240, 0.9) transparent;
    width: 18px;
    height: 18px;
    margin: 1px;
}

body.auth-theme-space .navbar.navbar-transparent .navbar-brand {
    display: none;
}

@keyframes auth-space-drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(2.2%, -1.6%, 0) scale(1.04);
    }
}

@keyframes auth-space-twinkle {
    from {
        opacity: 0.65;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    body.auth-theme-space {
        --auth-glass-bg: rgba(15, 23, 42, 0.55);
        --auth-glass-blur: 16px;
        --auth-field-bg: #0b1220;
        --auth-inset: 20px;
    }

    /*
     * inset:-18% del aurora expande el scrollport si overflow-y:auto (móvil).
     * 18% de ~920px ≈ 166px de scroll a “solo fondo” — clip al borde del shell.
     */
    body.auth-theme-space .page-header::before {
        animation: none;
        inset: 0;
        will-change: auto;
    }

    body.auth-theme-space .page-header::after {
        animation: none;
        opacity: 0.85;
        box-shadow:
            8vw 12vh 0 0 rgba(255, 255, 255, 0.75),
            18vw 22vh 0 0 rgba(255, 255, 255, 0.4),
            28vw 8vh 0 0 rgba(255, 255, 255, 0.55),
            38vw 35vh 0 0 rgba(255, 255, 255, 0.35),
            48vw 18vh 0 0 rgba(255, 255, 255, 0.7),
            58vw 42vh 0 0 rgba(255, 255, 255, 0.3),
            68vw 14vh 0 0 rgba(255, 255, 255, 0.5),
            78vw 28vh 0 0 rgba(255, 255, 255, 0.65),
            88vw 48vh 0 0 rgba(255, 255, 255, 0.35),
            12vw 58vh 0 0 rgba(255, 255, 255, 0.45),
            22vw 72vh 0 0 rgba(255, 255, 255, 0.6),
            32vw 52vh 0 0 rgba(255, 255, 255, 0.3),
            42vw 68vh 0 0 rgba(255, 255, 255, 0.55),
            52vw 82vh 0 0 rgba(255, 255, 255, 0.4),
            62vw 62vh 0 0 rgba(255, 255, 255, 0.7),
            72vw 78vh 0 0 rgba(255, 255, 255, 0.35),
            82vw 88vh 0 0 rgba(255, 255, 255, 0.5),
            92vw 66vh 0 0 rgba(255, 255, 255, 0.4),
            5vw 38vh 0 0 rgba(255, 255, 255, 0.55),
            95vw 22vh 0 0 rgba(255, 255, 255, 0.45),
            40vw 48vh 0 0 rgba(255, 255, 255, 0.5),
            62vw 22vh 0 0 rgba(255, 255, 255, 0.4);
    }

    body.auth-theme-space .page-header .card {
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.1) inset,
            0 10px 32px rgba(2, 6, 23, 0.55);
    }

    body.auth-theme-space .page-header .card .card-body {
        padding-left: var(--auth-inset) !important;
        padding-right: var(--auth-inset) !important;
    }

    /* P1: vencer L1384 global 12px — misma columna footer */
    body.auth-theme-space .page-header .card .footer.text-center {
        padding: var(--auth-inset) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-theme-space .page-header::before,
    body.auth-theme-space .page-header::after {
        animation: none;
    }

    body.auth-theme-space .page-header .card .form-switch .form-check-input:after,
    body.auth-theme-space .page-header .card .form-switch .form-check-input::after {
        transition: none;
    }

    body.auth-theme-space .page-header .card .footer.text-center > .btn:active,
    body.auth-theme-space .page-header .card .footer.text-center > .btn-biometric:active {
        transform: none;
    }
}

/* ========== AUTH POLISH (SE / a11y / spacing) ========== */

/* Overhang header (Facture + no-Facture; space ya no anula mt-n4) */
.page-header .card > .card-header.mt-n4 {
    margin-top: -1rem !important;
}

/* Ritmo del formulario dentro del card — escala 8px; vencer utilities BS !important */
.page-header .card .card-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
}

/* Anula .row.px-sm-3 que desbalancea el padding horizontal */
.page-header .card .card-body .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-header .card .login-options {
    margin-top: 12px !important;
    row-gap: 10px;
}

@media (min-width: 768px) {
    .page-header .card .login-options {
        column-gap: 0;
        row-gap: 10px;
    }
}

/* Columna de inputs: vencer .w-95 (95%) para alinear con CTA full-width */
.page-header .card .w-95 {
    width: 100% !important;
}

.page-header .card .d-flex > .input-group.w-95,
.page-header .card .d-flex > .w-95 {
    flex: 1 1 auto;
    min-width: 0;
}

.page-header .card .d-flex.align-items-center {
    gap: 8px;
}

/*
 * Aire uniforme entre filas email / password (password no trae .my-3).
 * App: #user_email_pass · Admin: #div_login (mismo patrón, otro id).
 */
.page-header .card #user_email_pass .d-flex.align-items-center + .d-flex.align-items-center,
.page-header .card #div_login .d-flex.align-items-center + .d-flex.align-items-center {
    margin-top: 12px;
}

.page-header .card .input-group.my-3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 * Indent óptico premium: switches bajo campos full-bleed con icono interno (N1).
 * No usar translateX en el input — rompe gutter Soft UI (ver N3).
 * Hint (.auth-secure-hint) hereda este padding vía #remember-div; no sumar en su calc.
 */
body.auth-theme-space .page-header .card .login-options #rem-pass-div,
body.auth-theme-space .page-header .card .login-options #remember-div {
    padding-left: var(--auth-options-indent);
}

body.auth-theme-space .page-header .card .login-options #rem-pass-div > .form-check.form-switch,
body.auth-theme-space .page-header .card .login-options #remember-div > .form-check.form-switch {
    margin: 0 !important;
}

/* Forgot (P2): sin mb que abra valle; hit en el <a> via padding */
body.auth-theme-space .page-header .card .login-options #forgot-div {
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0;
}

/* Columna de iconos leading (rail WL / pe-1|pe-2) */
.page-header .card .d-flex > span.pe-1,
.page-header .card .d-flex > span.pe-2 {
    flex: 0 0 32px;
    width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.page-header .card .material-icons.mt-2 {
    margin-top: 0 !important;
}

.page-header .card .card-body .material-icons.text-muted,
.page-header .card .card-body .pointer-eye,
.page-header .card .card-body .auth-toggle-pw {
    opacity: 0.78;
    color: var(--primary-600, #41579b);
}

/* Iconos metálicos Facture (plateados sobre dark); !important vence .text-muted */
body.auth-theme-space .page-header .card .card-body .material-icons.text-muted,
body.auth-theme-space .page-header .card .card-body .pointer-eye,
body.auth-theme-space .page-header .card .card-body .auth-toggle-pw {
    opacity: 0.88;
    color: #cbd5e1 !important;
    filter: none;
}

/* Switches Material — contraste AA; sin my-2/mb-3 */
.page-header .card .form-switch {
    margin: 0 !important;
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.page-header .card .form-switch .form-check-input {
    background-color: #bdbdbd;
    border: 1px solid #757575;
    cursor: pointer;
}

.page-header .card .form-switch .form-check-input::after,
.page-header .card .form-switch .form-check-input:after {
    border-color: #9e9e9e;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.page-header .card .form-switch .form-check-input:checked {
    background-color: var(--primary-600, #41579b);
    border-color: var(--primary-700, #35477e);
}

.page-header .card .form-switch .form-check-input:checked::after,
.page-header .card .form-switch .form-check-input:checked:after {
    border-color: var(--primary-700, #35477e);
}

.page-header .card .form-switch .form-check-input:focus-visible {
    outline: 2px solid var(--primary-500, #4f69b5);
    outline-offset: 2px;
}

/* Switches premium Facture — dark track / thumb claro / checked zafiro */
body.auth-theme-space .page-header .card .form-switch .form-check-input {
    background-color: rgba(71, 85, 105, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

body.auth-theme-space .page-header .card .form-switch .form-check-input::after,
body.auth-theme-space .page-header .card .form-switch .form-check-input:after {
    background-color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(2, 6, 23, 0.45);
}

body.auth-theme-space .page-header .card .form-switch .form-check-input:checked {
    background-color: #2563eb;
    border-color: #1d4ed8;
}

body.auth-theme-space .page-header .card .form-switch .form-check-input:checked::after,
body.auth-theme-space .page-header .card .form-switch .form-check-input:checked:after {
    border-color: #1e3a8a;
}

.page-header .card .form-check-label {
    color: var(--font-color, #424242);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

body.auth-theme-space .page-header .card .form-check-label {
    color: var(--auth-on-glass-muted);
    font-weight: 400;
    letter-spacing: 0.01em;
}

body.auth-theme-space .page-header .card .auth-recover-link {
    color: #93c5fd;
    /* P2: hit ≥24 AA via pad; sin min-height 44 que inventa valle optico */
    padding: 4px 0 8px;
    display: inline-flex;
    align-items: center;
    min-height: 0;
    box-sizing: border-box;
}

body.auth-theme-space .page-header .card .auth-recover-link:hover,
body.auth-theme-space .page-header .card .auth-recover-link:focus {
    color: #bfdbfe;
}

/* P2: el <p.text-sm> no fuerza altura ni márgenes */
body.auth-theme-space .page-header .card .login-options #forgot-div > p.text-sm {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
}

body.auth-theme-space .page-header .card #pMessage {
    color: var(--auth-on-glass) !important;
}

/*
 * Footer: gap = única fuente de aire entre controles.
 * Márgenes 0 !important vencen .mb-4 / .my-3 / .mt-1 / .my-2 del HTML.
 */
.page-header .card .footer.text-center {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0 !important;
    /* padding-top: aire cluster opciones → CTA */
    padding: 16px 16px 16px;
}

.page-header .card .footer.text-center > .btn,
.page-header .card .footer.text-center > .btn-google,
.page-header .card .footer.text-center > .btn-biometric,
.page-header .card .footer.text-center > .google-login-separator {
    margin: 0 !important;
}

.page-header .card .footer.text-center > .btn.bg-gradient-primary,
.page-header .card .footer.text-center > .btn.btn-default {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

/*
 * CTA navy sólido — SOLO footer button (no header .bg-gradient-primary).
 * Tipografía: inherit del stack de la card; 14px / 600 / tracking UI (no display).
 */
body.auth-theme-space .page-header .card .footer.text-center > .btn.bg-gradient-primary {
    background-image: none !important;
    background-color: #1e3a8a;
    border: none;
    border-radius: var(--auth-radius-control);
    min-height: var(--auth-control-h);
    color: #fff;
    box-shadow: var(--auth-elev-cta) !important;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    /* vence MD .btn { text-transform: uppercase } por especificidad */
    text-transform: none;
    font-weight: 600;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

body.auth-theme-space .page-header .card .footer.text-center > .btn.bg-gradient-primary:hover,
body.auth-theme-space .page-header .card .footer.text-center > .btn.bg-gradient-primary:focus {
    background-image: none !important;
    background-color: #1e40af;
    box-shadow: var(--auth-elev-cta-hover) !important;
}

body.auth-theme-space .page-header .card .footer.text-center > .btn.bg-gradient-primary:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

body.auth-theme-space .page-header .card .footer.text-center > .btn.bg-gradient-primary:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

body.auth-theme-space .page-header .card .footer.text-center > .btn.bg-gradient-primary:active,
body.auth-theme-space .page-header .card .footer.text-center > .btn.btn-default:active,
body.auth-theme-space .page-header .card .footer.text-center > .btn-biometric:active {
    transform: scale(0.98);
}

body.auth-theme-space .page-header .card .footer.text-center > .btn.btn-default {
    background-image: none !important;
    background-color: rgba(71, 85, 105, 0.55);
    color: var(--auth-on-glass);
    box-shadow: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

body.auth-theme-space .page-header .card .footer.text-center > .btn.btn-default:hover,
body.auth-theme-space .page-header .card .footer.text-center > .btn.btn-default:focus {
    background-color: rgba(100, 116, 139, 0.72);
    color: #f8fafc;
}

body.auth-theme-space .page-header .card .footer.text-center {
    gap: var(--auth-space-3);
    padding: var(--auth-inset);
}

/* White-label / no-space: elevación ambient (misma geometría que light space) */
.page-header .card .footer.text-center > .btn.bg-gradient-primary {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.page-header .card .footer.text-center > .btn.bg-gradient-primary:hover,
.page-header .card .footer.text-center > .btn.bg-gradient-primary:focus {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.24);
}

.page-header .card .footer.text-center > .btn.bg-gradient-primary:focus-visible {
    outline: 2px solid var(--primary-300, #899acd);
    outline-offset: 2px;
}

/* Alt-auth: width/borde; márgenes los pone el gap del footer */
.page-header .card .btn-google,
.page-header .card .btn-biometric {
    width: 100%;
    margin: 0;
    border-width: 1px;
    border-radius: 4px;
}

.page-header .card .btn-google {
    border-color: #dadce0;
}

.page-header .card .btn-biometric {
    border-color: var(--primary-300, #899acd);
}

.page-header .card .btn-biometric:hover,
.page-header .card .btn-biometric:focus,
.page-header .card .btn-biometric:focus-visible {
    border-color: var(--primary-500, #4f69b5);
    background: #f7f8fc;
}

/*
 * Facture passkey (N3/O4): ghost quiet; min-height 44 restaura base L487
 * (N había subido a --auth-control-h 48 = mismo peso que CTA).
 */
body.auth-theme-space .page-header .card .btn-biometric {
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(148, 163, 184, 0.22);
    border-radius: var(--auth-radius-control);
    min-height: 44px;
    color: var(--auth-on-glass);
    font-weight: 400;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

body.auth-theme-space .page-header .card .btn-biometric:hover,
body.auth-theme-space .page-header .card .btn-biometric:focus,
body.auth-theme-space .page-header .card .btn-biometric:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(148, 163, 184, 0.4);
    color: #f8fafc;
}

.page-header .card .google-login-separator {
    margin: 0;
    width: 100%;
}

/*
 * Tras PIN, jQuery hace $('.google-login-separator').show() en todos los "o",
 * aunque passkey/huella sigan display:none → "o" huérfanos.
 */
.page-header .card .google-login-separator:has(+ [style*="display: none"]),
.page-header .card .google-login-separator:has(+ [style*="display:none"]) {
    display: none !important;
}

/* Registro / “Volver a…” (reset): subordinado al CTA; vence .mt-2/.mb-2/.mb-4 */
.page-header .card .footer.text-center > p.text-sm {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.page-header .card .footer.text-center > p.text-sm .text-gradient {
    font-weight: 500;
}

/* Tip: margen de sección sobre el gap del footer */
.page-header .card #random-msg {
    margin-top: 8px;
    padding-bottom: 4px;
    width: 100%;
}

.page-header .card #random-msg .opacity-hr {
    margin-top: 12px;
    margin-bottom: 0;
    opacity: 0.4;
}

.page-header .card .message-login {
    color: var(--font-color, #424242);
    opacity: 1;
    font-size: 12px;
    line-height: 1.45;
    min-height: calc(1.45em * 4);
    padding-top: 6px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* Tip whisper: altura fija 2 líneas (1 línea centrada; 2+ no agrandan el card) */
body.auth-theme-space .page-header .card #message-container.message-login,
body.auth-theme-space .page-header .card .message-login {
    font-weight: 400;
    opacity: 0.72;
    letter-spacing: 0.015em;
    font-size: clamp(11px, 2.8vw, 12px);
    line-height: 1.45;
    color: var(--auth-on-glass) !important;
    height: calc(1.45em * 2);
    min-height: calc(1.45em * 2);
    max-height: calc(1.45em * 2);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}

body.auth-theme-space .page-header .card .message-login.text-black {
    color: var(--auth-on-glass) !important;
    opacity: 0.72;
}

body.auth-theme-space .page-header .card #random-msg .opacity-hr {
    opacity: 0.22;
    border-color: rgba(148, 163, 184, 0.28);
}

/* Recover copy bajo glass oscuro */
body.auth-theme-space .page-header .card .category {
    color: var(--auth-on-glass);
    opacity: 0.9;
    font-weight: 400;
    line-height: 1.5;
}

@media (max-width: 767px) {
    /* Evita solape navbar vs logo en iPhone SE */
    .navbar.navbar-transparent .navbar-brand {
        display: none;
    }

    /* Móvil: overhang un poco más suave en todas las auth cards */
    .page-header .card > .card-header.mt-n4 {
        margin-top: -0.5rem !important;
    }

    /*
     * Auth móvil: vencer Bootstrap .min-vh-100 { min-height: 100vh !important }.
     * Sin !important, large-vh > viewport visible → scroll fantasma (card cabe, fondo vacío).
     * max-height: teclado/landscape scrollean DENTRO del shell (no estiran el documento).
     * overflow-y:auto + overscroll contain: escape hábil sin rubber-band a vacío.
     */
    .page-background,
    .page-header.min-vh-100 {
        align-items: flex-start;
        padding-top: 24px;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }

    /* Facture: no dejar que overflow-y:hidden del theme anule el scroll móvil */
    body.auth-theme-space .page-header.min-vh-100 {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    /* M5: conservar aire superior; solo apretar laterales en SE */
    .page-header .card .footer.text-center {
        padding: 16px 12px 16px;
    }

    .page-header .card .card-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ========== AUTH SCHEME TOGGLE + LIGHT (html[data-auth-scheme]) ========== */

body.auth-theme-space .navbar.navbar-transparent {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    padding-top: 8px;
}

.auth-scheme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 8px 4px 0 0;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.45);
    color: #e2e8f0;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.auth-scheme-toggle .material-icons {
    font-size: 20px;
    line-height: 1;
}

/* Iconos duales: CSS sigue html[data-auth-scheme] (sin flash JS) */
.auth-scheme-toggle .auth-scheme-icon--to-dark {
    display: none;
}

html[data-auth-scheme="light"] .auth-scheme-toggle .auth-scheme-icon--to-light {
    display: none;
}

html[data-auth-scheme="light"] .auth-scheme-toggle .auth-scheme-icon--to-dark {
    display: inline-block;
}

.auth-scheme-toggle:hover,
.auth-scheme-toggle:focus {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(148, 163, 184, 0.55);
    color: #f8fafc;
}

.auth-scheme-toggle:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

html[data-auth-scheme="light"] .auth-scheme-toggle {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(100, 116, 139, 0.35);
    color: #1e3a8a;
}

html[data-auth-scheme="light"] .auth-scheme-toggle:hover,
html[data-auth-scheme="light"] .auth-scheme-toggle:focus {
    background: #fff;
    border-color: rgba(30, 58, 138, 0.45);
    color: #1e40af;
}

/* --- Light scheme (additive; dark = default AUTH SPACE) --- */
html[data-auth-scheme="light"] body.auth-theme-space {
    --auth-glass-bg: rgba(255, 255, 255, 0.82);
    --auth-glass-blur: 16px;
    --auth-field-bg: #fff;
    --auth-chip-bg: #fff;
    --auth-on-glass: #1e293b;
    --auth-on-glass-muted: #64748b;
    --auth-elev-cta: 0 8px 24px rgba(15, 23, 42, 0.18);
    --auth-elev-cta-hover: 0 10px 28px rgba(15, 23, 42, 0.24);
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header {
    background-color: #e8eef7;
    background-image:
        radial-gradient(ellipse 90% 60% at 12% 22%, rgba(79, 105, 181, 0.22) 0%, transparent 58%),
        radial-gradient(ellipse 70% 55% at 88% 18%, rgba(99, 120, 190, 0.16) 0%, transparent 52%),
        radial-gradient(ellipse 75% 55% at 78% 78%, rgba(53, 71, 126, 0.14) 0%, transparent 55%),
        linear-gradient(165deg, #e8eef7 0%, #dce6f5 45%, #cfd9ec 100%);
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header::before {
    background:
        radial-gradient(circle at 28% 36%, rgba(79, 105, 181, 0.18) 0%, transparent 40%),
        radial-gradient(circle at 72% 58%, rgba(100, 130, 200, 0.12) 0%, transparent 46%);
}

/* Light: sin starfield — estrellas restan profesionalismo B2B */
html[data-auth-scheme="light"] body.auth-theme-space .page-header::after {
    opacity: 0;
    animation: none;
    box-shadow: none;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header > .mask.bg-gradient-dark {
    opacity: 0.08 !important;
    background: linear-gradient(180deg, rgba(232, 238, 247, 0.4) 0%, rgba(232, 238, 247, 0.1) 100%) !important;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card {
    background: var(--auth-glass-bg);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 16px 40px rgba(30, 41, 59, 0.12),
        0 4px 12px rgba(30, 41, 59, 0.08);
    color: var(--auth-on-glass);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html[data-auth-scheme="light"] body.auth-theme-space .page-header .card {
        background: rgba(255, 255, 255, 0.96);
    }
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card > .card-header {
    /* R1: barra full-bleed — sin inset lateral (los campos lo conservan en card-body) */
    padding: 0 !important;
    border-bottom: none;
    border-radius: 0;
}

/* Banda light = dark: transparente (sin fill #001436). Pad vive en selector base. */

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline .form-control {
    border-color: #E2E8F0 !important;
    color: var(--auth-on-glass);
    background: var(--auth-field-bg);
    background-clip: padding-box;
}

/*
 * Light: azul navy solo en focus. Filled sin focus permanece quieto (#E2E8F0)
 * para vencer MD !important en .is-filled.
 * Pseudos Soft UI: muteados en regla base Facture (no repetir aquí).
 */
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline.is-filled:not(.is-focused) .form-label + .form-control {
    border-color: #E2E8F0 !important;
    border-top-color: #E2E8F0 !important;
    box-shadow: none !important;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline.is-focused .form-label + .form-control {
    border-color: #1e40af !important;
    border-top-color: #1e40af !important;
    box-shadow: none !important;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .form-label {
    color: var(--auth-on-glass-muted) !important;
}

/* Estructura del chip (width/padding) hereda del bloque base Facture. */
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline.is-focused .form-label,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline.is-filled .form-label {
    color: #1e40af !important;
}

/* Autofill light: misma cadena .form-label + .form-control:autofill que filled none. */
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline .form-label + .form-control:-webkit-autofill,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline .form-label + .form-control:autofill,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline.is-focused .form-label + .form-control:-webkit-autofill,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline.is-focused .form-label + .form-control:autofill,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline.is-filled .form-label + .form-control:-webkit-autofill,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline.is-filled .form-label + .form-control:autofill {
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #1e293b !important;
    caret-color: #1e293b;
    animation-name: auth-outline-autofill;
    animation-duration: 0.001s;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .text-muted {
    color: var(--auth-on-glass-muted) !important;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .card-body .material-icons.text-muted,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .card-body .pointer-eye,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .card-body .auth-toggle-pw {
    color: #475569 !important;
    filter: none;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .form-check-label {
    color: var(--auth-on-glass-muted);
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .form-switch .form-check-input {
    background-color: rgba(148, 163, 184, 0.45);
    border: 1px solid rgba(100, 116, 139, 0.45);
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .form-switch .form-check-input:checked {
    background-color: #1e3a8a;
    border-color: #1e40af;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .auth-recover-link {
    color: #1d4ed8;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .auth-recover-link:hover,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .auth-recover-link:focus {
    color: #1e40af;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card a.text-gradient.text-primary {
    background-image: none;
    -webkit-text-fill-color: #1d4ed8;
    color: #1d4ed8;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card a.text-gradient.text-primary:hover,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card a.text-gradient.text-primary:focus {
    -webkit-text-fill-color: #1e40af;
    color: #1e40af;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card #pMessage,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .message-login,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .message-login.text-black,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .category {
    color: var(--auth-on-glass) !important;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card #message-container.message-login,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .message-login,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .message-login.text-black {
    opacity: 0.78;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card #random-msg .opacity-hr {
    opacity: 0.22;
    border-color: rgba(100, 116, 139, 0.28);
}

html[data-auth-scheme="light"] body.auth-theme-space .btn-google {
    background: #fff;
    border-color: #dadce0;
}

html[data-auth-scheme="light"] body.auth-theme-space .btn-biometric,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .btn-biometric {
    background: #fff;
    border-color: rgba(100, 116, 139, 0.45);
    border-radius: var(--auth-radius-control);
    min-height: 44px;
    color: #334155;
    font-weight: 400;
}

html[data-auth-scheme="light"] body.auth-theme-space .btn-biometric:hover,
html[data-auth-scheme="light"] body.auth-theme-space .btn-biometric:focus,
html[data-auth-scheme="light"] body.auth-theme-space .btn-biometric:focus-visible,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .btn-biometric:hover,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .btn-biometric:focus,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .btn-biometric:focus-visible {
    background: #f1f5f9;
    border-color: rgba(100, 116, 139, 0.55);
    color: #1e293b;
}

html[data-auth-scheme="light"] body.auth-theme-space .btn-biometric .material-icons {
    color: #475569;
    filter: none;
}

html[data-auth-scheme="light"] body.auth-theme-space .google-login-separator::before {
    border-top-color: rgba(15, 23, 42, 0.1);
}

/* Light CTA: misma familia que menú (.fondo-nav / --main-color). */
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .footer.text-center > .btn.bg-gradient-primary {
    background-image: none !important;
    background-color: var(--main-color, #001436);
    box-shadow: var(--auth-elev-cta) !important;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .footer.text-center > .btn.bg-gradient-primary:hover,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .footer.text-center > .btn.bg-gradient-primary:focus {
    background-image: none !important;
    background-color: var(--main-color-light, #123a6f);
    box-shadow: var(--auth-elev-cta-hover) !important;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .footer.text-center > .btn.btn-default {
    background-color: #e2e8f0;
    color: #1e293b;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .footer.text-center > .btn.btn-default:hover,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .footer.text-center > .btn.btn-default:focus {
    background-color: #cbd5e1;
    color: #0f172a;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .footer.text-center > .btn.btn-default .text-white {
    color: #1e293b !important;
}

@media (max-width: 767px) {
    html[data-auth-scheme="light"] body.auth-theme-space {
        --auth-glass-bg: rgba(255, 255, 255, 0.9);
        --auth-glass-blur: 14px;
    }

    html[data-auth-scheme="light"] body.auth-theme-space .page-header::before {
        animation: none;
    }
}

/* ========== AUTH BRAND SLOT (zero CLS) + secure hint ========== */
.auth-brand-slot {
    height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}

body.auth-theme-space .auth-brand-slot {
    width: fit-content;
    max-width: 100%;
    padding: 0;
    /* Hereda overflow:hidden del slot base (zero-CLS); sin glow que clipar. */
}

.auth-brand-img {
    display: block;
    max-height: 56px;
    max-width: min(92%, 280px);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Wordmark premium Facture */
body.auth-theme-space .auth-brand-img {
    max-width: min(92%, 240px);
    max-height: 56px;
}

/*
 * Light: wordmark navy #001436 (= --main-color / .fondo-nav / CTA light). No #000.
 * Dark: sin filter — wordmark claro limpio sobre glass.
 */
html[data-auth-scheme="light"] body.auth-theme-space .auth-brand-img {
    filter: brightness(0) saturate(100%)
        invert(6%) sepia(55%) saturate(1800%) hue-rotate(196deg)
        brightness(0.88) contrast(1.12);
}

.auth-brand-img.is-broken {
    display: none;
}

.auth-brand-fallback {
    display: block;
    margin: 0;
    max-width: 100%;
    font-family: system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(0.95rem, 3.2vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #f8fafc;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-auth-scheme="light"] body.auth-theme-space .auth-brand-fallback {
    color: var(--main-color, #001436);
}

/* Hint WL: gutter BS form-switch + ms-3 */
.page-header .card .auth-secure-hint {
    margin: 4px 0 0;
    padding: 0;
    padding-left: calc(2.375rem + 1rem);
    width: 100%;
    text-align: left;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--font-color, #64748b);
    opacity: 0.9;
    box-sizing: border-box;
}

.page-header .card .login-options #forgot-div {
    margin-bottom: 6px;
}

/* P2/P4: under space, #forgot-div mb lo fija el bloque space (0); WL conserva 6px arriba */

/* O3: hint AA — color, no bajar opacity (ya 0.9).
 * Indent horizontal: lo aporta #remember-div (--auth-options-indent); no sumar aquí. */
body.auth-theme-space .page-header .card .auth-secure-hint {
    color: #cbd5e1;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .auth-secure-hint {
    color: #475569;
}

.page-header .card.auth-shell-locked .btn-google {
    pointer-events: none;
    opacity: 0.55;
}

/* D8: ojo coherente con password disabled / cooldown */
.page-header .card.auth-shell-locked .auth-toggle-pw {
    pointer-events: none;
    opacity: 0.55;
    cursor: default;
}

.page-header .card [data-auth-live].auth-live-visible:not(.visually-hidden) {
    display: block;
    margin: 8px 16px 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--font-color, #424242);
}

body.auth-theme-space .page-header .card [data-auth-live].auth-live-visible:not(.visually-hidden) {
    color: var(--auth-on-glass);
    margin-left: var(--auth-inset);
    margin-right: var(--auth-inset);
}

/* ========== AUTH PREMIUM N (v1.5.0) — full-bleed, ojo trailing, ritmo ========== */

/*
 * N1: pe-1 leading icons dentro del outline (mismo patrón que .auth-toggle-pw trailing).
 * pe-2 (SVG PIN dorado) sigue oculto — no romper estética quieta.
 */
body.auth-theme-space .page-header .card .d-flex > span.pe-2 {
    display: none;
}

body.auth-theme-space .page-header .card .d-flex:has(> span.pe-1) {
    position: relative;
}

body.auth-theme-space .page-header .card .d-flex > span.pe-1 {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    /* Sobre .form-control:focus (z-index:5); mismo piso que el ojo (8). */
    z-index: 7;
    flex: none;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    /* !important: vence utilities BS (.pt-2 / .pe-1) y rail WL flex 32px */
    padding: 0 !important;
    pointer-events: none;
}

body.auth-theme-space .page-header .card .d-flex > span.pe-1 .material-icons {
    font-size: 20px;
    line-height: 1;
    margin: 0;
    /* Color estable en focus/filled — no heredar acento del campo */
    opacity: 0.88;
    color: #cbd5e1 !important;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .d-flex > span.pe-1 .material-icons {
    color: #475569 !important;
    opacity: 0.9;
}

/* Texto / caret no solapan el icono leading (paridad padding-right del ojo).
 * !important: vence MD Soft UI `.input-group-outline .form-control { padding: … !important }`. */
body.auth-theme-space .page-header .card .d-flex:has(> span.pe-1) .form-control {
    padding-left: 2.75rem !important;
}

/*
 * Soft UI label en reposo + pe-1: centrado vertical real junto al icono.
 * MD usa line-height:3.925 + top:-0.375rem (caja alta) → el texto queda ~1px
 * bajo el centro óptico del material-icon. Flex + lh normal alinea con pe-1
 * (top:50% + translateY(-50%)). Chip focus/filled no entra en este selector.
 * transition:none: evita leer/animar el salto desde el truco MD de line-height.
 */
body.auth-theme-space .page-header .card .d-flex:has(> span.pe-1)
    .input-group.input-group-outline:not(.is-focused):not(.is-filled) > .form-label {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 2.25rem;
    display: flex !important;
    align-items: center !important;
    line-height: 1.25 !important;
    transition: none !important;
}

/*
 * Reveal password: botón dentro del outline (login + reset; WL + Facture).
 * Hijo del .input-group (position:relative BS) — no hermano absolute del d-flex.
 * z-index 8 > label chip (6) y form-control:focus (5).
 */
.page-header .card .input-group.input-group-outline > .auth-toggle-pw {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
}

.page-header .card .input-group.input-group-outline > .auth-toggle-pw .material-icons {
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
}

.page-header .card .input-group.input-group-outline > .auth-toggle-pw:focus {
    outline: none;
}

.page-header .card .input-group.input-group-outline > .auth-toggle-pw:focus-visible {
    outline: 2px solid var(--primary-500, #4f69b5);
    outline-offset: 2px;
    border-radius: 6px;
}

.page-header .card .input-group.input-group-outline:has(> .auth-toggle-pw) > .form-control {
    padding-right: 2.75rem !important;
}

body.auth-theme-space .page-header .card .input-group.input-group-outline > .auth-toggle-pw {
    opacity: 0.88;
    color: #cbd5e1 !important;
}

body.auth-theme-space .page-header .card .input-group.input-group-outline > .auth-toggle-pw .material-icons {
    color: inherit !important;
    opacity: 1;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline > .auth-toggle-pw {
    color: #475569 !important;
    opacity: 0.9;
}

html[data-auth-scheme="light"] body.auth-theme-space .page-header .card .input-group.input-group-outline > .auth-toggle-pw:focus-visible {
    outline-color: #3b82f6;
}

/* D8: misma especificidad que ojo trailing — si no, opacity 0.88/0.9 gana al lock */
body.auth-theme-space .page-header .card.auth-shell-locked .auth-toggle-pw,
html[data-auth-scheme="light"] body.auth-theme-space .page-header .card.auth-shell-locked .auth-toggle-pw {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}

/*
 * Oculta reveal/clear nativo (Edge/Chrome) donde hay .auth-toggle-pw.
 * Admin sin toggle: nativo intacto (único control disponible).
 * #reset-form: defensa extra con autocomplete=new-password.
 */
.page-header .card .input-group.input-group-outline:has(> .auth-toggle-pw) input[type="password"]::-ms-reveal,
.page-header .card .input-group.input-group-outline:has(> .auth-toggle-pw) input[type="password"]::-ms-clear,
.page-header .card #reset-form input[type="password"]::-ms-reveal,
.page-header .card #reset-form input[type="password"]::-ms-clear {
    display: none;
}

.page-header .card .input-group.input-group-outline:has(> .auth-toggle-pw) input[type="password"]::-webkit-credentials-auto-fill-button,
.page-header .card .input-group.input-group-outline:has(> .auth-toggle-pw) input[type="password"]::-webkit-contacts-auto-fill-button,
.page-header .card #reset-form input[type="password"]::-webkit-credentials-auto-fill-button,
.page-header .card #reset-form input[type="password"]::-webkit-contacts-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

/* N3: switches densos — hit ≥44 vía label/fila; gap entre toggles = row-gap 8 */
body.auth-theme-space .page-header .card .login-options .form-check.form-switch {
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
}

body.auth-theme-space .page-header .card .login-options .form-switch .form-check-input {
    /* Densidad N3; sin translateX — era compensación del rail 32px ya retirado */
    transform: scale(0.88);
    transform-origin: left center;
}

body.auth-theme-space .page-header .card .login-options .form-check-label {
    padding-top: 0;
    padding-bottom: 0;
}

/* P2 ritmo: password → forgot → switches (row-gap compacto) */
body.auth-theme-space .page-header .card .login-options {
    margin-top: var(--auth-space-2) !important;
    row-gap: var(--auth-space-2);
}

body.auth-theme-space .page-header .card #user_email_pass .d-flex.align-items-center + .d-flex.align-items-center,
body.auth-theme-space .page-header .card #div_login .d-flex.align-items-center + .d-flex.align-items-center {
    margin-top: var(--auth-space-4);
}

body.auth-theme-space .page-header .card #random-msg {
    margin-top: var(--auth-space-3);
}

/*
 * P1: PIN / recover content column = mismo --auth-inset que .card-body
 * (N4 ponía 0 → flush al borde; admin PIN interno sigue en 0 vía filas abajo).
 */
body.auth-theme-space .page-header .card #user_pin.px-2,
body.auth-theme-space .page-header .card #recover-step1 > .px-2,
body.auth-theme-space .page-header .card #recover-step2 > .px-2 {
    padding-left: var(--auth-inset) !important;
    padding-right: var(--auth-inset) !important;
}

/*
 * Recover / PIN: aire Soft UI FUERA del CB del icono absoluto (N1 top:50%).
 * Antes: padding-top en el .d-flex position:relative → icono subía vs label.
 *
 * recover-step1 > .px-2: flex+gap OK (el show/hide es del padre #recover-step1).
 * #user_pin / #div_access_pin: jQuery .show() fuerza display:block inline → no flex.
 *   Aire = margin-top en la fila del campo (copy con margin 0 → no colapsa).
 */
body.auth-theme-space .page-header .card #recover-step1 > .px-2 {
    display: flex;
    flex-direction: column;
    gap: var(--auth-space-4);
}

/* Filas de campo: sin padding que dilate el CB del pe-1 */
body.auth-theme-space .page-header .card #user_pin .d-flex.align-items-center,
body.auth-theme-space .page-header .card #recover-step1 .d-flex.align-items-center,
body.auth-theme-space .page-header .card #div_access_pin .d-flex.align-items-center {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0 !important;
}

/* PIN: aire entre copy y campo (margin fuera del CB absoluto) */
body.auth-theme-space .page-header .card #user_pin > .d-flex.align-items-center,
body.auth-theme-space .page-header .card #div_access_pin > .d-flex.align-items-center {
    margin-top: var(--auth-space-4) !important;
}

/* Recover: el gap del padre cubre el aire — sin margin-top extra en la fila */
body.auth-theme-space .page-header .card #recover-step1 .d-flex.align-items-center {
    margin-top: 0 !important;
}

/* Copy sobre el campo: sin my-3/mt que compita con gap/margin del campo */
body.auth-theme-space .page-header .card #user_pin #pMessage,
body.auth-theme-space .page-header .card #recover-step1 .category,
body.auth-theme-space .page-header .card #div_access_pin #login_title {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Step2 (éxito): sin campo Soft UI — solo alinear columna; conservar ritmo vertical del copy */
body.auth-theme-space .page-header .card #recover-step2 .category {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Q1: sin overhang MD ni mx-3 — marca anclada al borde superior del card */
body.auth-theme-space .page-header .card > .card-header.mt-n4 {
    margin-top: 0 !important;
    margin-inline: 0 !important;
}

/* Card-body: pad-top space-3 — con header bottom space-3 → logo→campo = 24 (= top space-5).
 * Descendiente (no >): reset.php anida .card-body dentro de <form>. */
body.auth-theme-space .page-header .card .card-body {
    padding-top: var(--auth-space-3) !important;
    padding-bottom: 0 !important;
    padding-left: var(--auth-inset) !important;
    padding-right: var(--auth-inset) !important;
}

/* Tip: anular px-3 / px-sm-4 del markup (misma columna que CTA) */
body.auth-theme-space .page-header .card #message-container.message-login,
body.auth-theme-space .page-header .card #message-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* CTA + btn-default compartidos: altura token */
body.auth-theme-space .page-header .card .footer.text-center > .btn.btn-default {
    min-height: var(--auth-control-h);
    border-radius: var(--auth-radius-control);
    text-transform: none;
}

/* Google: radius alineado (sigue blanco oficial) */
body.auth-theme-space .page-header .card .btn-google {
    border-radius: var(--auth-radius-control);
    min-height: var(--auth-control-h);
}