/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  AUTH · Pantalla de acceso (layouts/guest)                            ║
   ║                                                                       ║
   ║  Escenario partido: panel de marca (plata, rojo y carbón, como el     ║
   ║  escudo del logo) + panel de formulario. Se carga DESPUÉS de          ║
   ║  brand.css: respeta los tokens --brand-* / --erp-* y sólo añade lo    ║
   ║  propio de esta pantalla.                                             ║
   ║                                                                       ║
   ║  Índice                                                               ║
   ║   1) Tokens y armazón            5) Formulario (campos flotantes)     ║
   ║   2) Panel de marca              6) Botón, avisos y pie               ║
   ║   3) Carretera y luces           7) Tema oscuro                       ║
   ║   4) Panel del formulario        8) Responsive y movimiento reducido  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ────────────────────────────────────────────────────────────────────────
   1) TOKENS Y ARMAZÓN
   ──────────────────────────────────────────────────────────────────────── */
.auth-body {
    /* ── El rojo del logo vive AQUÍ, no en el sistema ──────────────────
       El panel administrativo conserva el teal de la plantilla (ver el
       encabezado de brand.css: en una operación de rentas el rojo ya
       significa vencido / mora / anulación). La puerta de entrada sí lleva
       la marca, así que estos tokens redefinen el primario sólo dentro de
       .auth-body y arrastran con él botón, foco, enlaces y píldoras.      */
    --erp-primary:        var(--brand-red, #D01A21);
    --erp-primary-600:    var(--brand-red-600, #B0141A);
    --erp-primary-700:    var(--brand-red-700, #8D1015);
    --erp-primary-soft:   var(--brand-red-soft, #FDEFF0);
    --erp-primary-soft-2: var(--brand-red-soft-2, #F9D6D8);
    --erp-primary-rgb:    var(--brand-red-rgb, 208, 26, 33);
    --c-brand:            var(--brand-red, #D01A21);

    /* Escenario "escudo del logo": plata clara con resplandor rojo, el mismo
       gris sobre el que vive el logo. Se rebrandea desde brand.css con
       --brand-stage-* / --brand-accent; el tema oscuro lo pasa a carbón. */
    --stage-from: var(--brand-stage-from, #FAFBFC);
    --stage-mid:  var(--brand-stage-mid, #EAECEF);
    --stage-to:   var(--brand-stage-to, #D8DCE1);
    --accent:     var(--brand-accent, #E8262F);
    --accent-rgb: var(--brand-accent-rgb, 232, 38, 47);
    --silver:     var(--brand-silver, #D7DBDF);

    /* Tintas y superficies del escenario (el tema oscuro las invierte). */
    --stage-ink:    #16171A;
    --stage-ink-2:  #55595F;
    --stage-line:   rgba(18, 19, 22, .075);
    --stage-tile:   rgba(255, 255, 255, .92);
    --stage-edge:   rgba(18, 19, 22, .07);
    --stage-glow:   rgba(var(--accent-rgb), .13);
    --stage-sheen:  rgba(255, 255, 255, .6);
    --stage-shade:  rgba(18, 19, 22, .07);
    --stage-lane:   var(--accent);
    --stage-tile-ico: var(--erp-primary, #D01A21);

    --auth-bg:      #F7F8FA;
    --auth-surface: var(--erp-surface, #FFFFFF);
    --auth-ink:     var(--erp-ink, #1F2A37);
    --auth-ink-2:   var(--erp-ink-2, #3D4A5A);
    --auth-muted:   var(--erp-muted, #6B7785);
    --auth-border:  var(--erp-border-2, #D3DBE2);
    --auth-field:   #FFFFFF;
    --auth-card-shadow: 0 40px 80px -40px rgba(10, 11, 13, .5), 0 2px 10px rgba(16, 32, 48, .06);

    margin: 0;
    /* En el móvil, 100vh cuenta la barra de direcciones que luego se esconde:
       la pantalla queda más alta que lo visible y aparece un scroll fantasma.
       100svh mide el alto realmente visible; el 100vh previo es el respaldo
       para navegadores viejos. */
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    background: var(--stage-to);
    color: var(--auth-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-body * { box-sizing: border-box; }

.auth-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1.06fr .94fr;
}

/* Enlace de salto: accesibilidad de teclado sin ensuciar el diseño. */
.auth-skip {
    position: absolute; left: 12px; top: -60px; z-index: 60;
    background: #fff; color: var(--erp-primary-700, #8D1015);
    padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 13px;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); transition: top .18s ease;
}
.auth-skip:focus { top: 12px; outline: 3px solid var(--accent); }

/* ────────────────────────────────────────────────────────────────────────
   2) PANEL DE MARCA
   ──────────────────────────────────────────────────────────────────────── */
.auth-stage {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: 46px 54px 74px;
    color: var(--stage-ink);
    background:
        radial-gradient(120% 80% at 8% 0%, var(--stage-sheen) 0%, transparent 55%),
        linear-gradient(158deg, var(--stage-from) 0%, var(--stage-mid) 46%, var(--stage-to) 100%);
    box-shadow: inset -1px 0 0 var(--stage-edge);
    isolation: isolate;
}

/* Resplandores: el rojo del logo y un reflejo claro, respirando muy
   despacio sobre la plata. */
.auth-stage::before {
    content: "";
    position: absolute; inset: -25%;
    z-index: 0; pointer-events: none;
    background:
        radial-gradient(40% 36% at 20% 24%, var(--stage-glow) 0%, transparent 70%),
        radial-gradient(44% 40% at 84% 70%, var(--stage-sheen) 0%, transparent 72%);
    animation: auth-aurora 22s ease-in-out infinite alternate;
}
@keyframes auth-aurora {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4%, -3%, 0) scale(1.12); }
}

/* Rejilla técnica difuminada hacia el centro. */
.auth-stage::after {
    content: "";
    position: absolute; inset: 0;
    z-index: 1; pointer-events: none;
    background-image:
        linear-gradient(var(--stage-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--stage-line) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(115% 85% at 26% 8%, #000 34%, transparent 78%);
            mask-image: radial-gradient(115% 85% at 26% 8%, #000 34%, transparent 78%);
}

.auth-stage > * { position: relative; z-index: 4; }

/* ── Cabecera: marca ──────────────────────────────────────────────────── */
/* El logo lleva el nombre dentro: no se repite en texto, sólo el descriptor. */
.auth-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.auth-brand__logo {
    width: auto; height: 168px; display: block;
    filter: drop-shadow(0 12px 26px rgba(18, 19, 22, .22));
}
.auth-brand__tag {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 700; color: var(--stage-ink-2);
    padding-left: 3px;
}

/* ── Cuerpo: titular, texto y capacidades ─────────────────────────────── */
.auth-stage__mid { margin: auto 0; max-width: 30rem; }

.auth-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;
    color: var(--erp-primary-600, #B0141A);
    background: var(--stage-tile);
    border: 1px solid rgba(var(--accent-rgb), .32);
    box-shadow: 0 2px 8px rgba(18, 19, 22, .06);
}
.auth-eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .7);
    animation: auth-pulse 2.4s ease-out infinite;
}
@keyframes auth-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .65); }
    70%  { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.auth-stage__mid h1 {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: clamp(30px, 3.1vw, 42px);
    line-height: 1.1; font-weight: 800; letter-spacing: -.03em;
    margin: 0 0 16px;
}
.auth-stage__mid h1 .hl {
    color: var(--accent);
    position: relative; white-space: nowrap;
}
/* Subrayado tipo señalización vial bajo la palabra destacada. */
.auth-stage__mid h1 .hl::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, var(--stage-lane) 0 14px, transparent 14px 24px);
    opacity: .45;
}
.auth-stage__lead {
    font-size: 15.5px; line-height: 1.65; color: var(--stage-ink-2); margin: 0;
}

.auth-features { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 13px; }
.auth-features li { display: flex; align-items: flex-start; gap: 13px; }
.auth-features .ico {
    width: 36px; height: 36px; flex: none; border-radius: 11px;
    display: grid; place-items: center; font-size: 14px;
    color: var(--stage-tile-ico);
    background: var(--stage-tile);
    border: 1px solid var(--stage-edge);
    box-shadow: 0 4px 12px rgba(18, 19, 22, .07);
}
.auth-features .txt { display: block; }
.auth-features .t { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.auth-features .d { display: block; font-size: 12.5px; color: var(--stage-ink-2); line-height: 1.45; margin-top: 2px; }

/* ── Pie del panel ────────────────────────────────────────────────────── */
.auth-stage__bot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    font-size: 12px; color: var(--stage-ink-2);
    padding-top: 20px;
    border-top: 1px solid var(--stage-line);
}
.auth-stage__bot .sep { opacity: .45; margin: 0 6px; }

/* ────────────────────────────────────────────────────────────────────────
   3) CARRETERA Y LUCES
   Una carretera en perspectiva al pie del panel: las líneas transversales
   corren hacia el espectador y el eje central marca la vía.
   ──────────────────────────────────────────────────────────────────────── */
/* Franja de asfalto al pie del panel: oscurece el borde inferior y sirve de
   base a la línea de la vía. */
.auth-asphalt {
    position: absolute; left: 0; right: 0; bottom: 0; height: 132px;
    z-index: 2; pointer-events: none;
    background: linear-gradient(to top, var(--stage-shade) 0%, transparent 100%);
}
/* Reflejo del horizonte, donde el asfalto empieza. */
.auth-asphalt::before {
    content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent);
    filter: blur(2px);
}

/* Línea discontinua central: la señalización que corre bajo el vehículo. */
.auth-road {
    position: absolute; left: 0; right: 0; bottom: 26px; height: 5px;
    z-index: 3; pointer-events: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.auth-road__lane {
    position: absolute; inset: 0;
    border-radius: 3px;
    background-image: repeating-linear-gradient(90deg,
        var(--stage-lane) 0 52px, transparent 52px 104px);
    opacity: .5;
    animation: auth-lane 2.6s linear infinite;
}
@keyframes auth-lane { to { background-position: -104px 0; } }

/* Rodadura: dos trazos tenues que acompañan a la línea central. */
.auth-asphalt::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 5px;
    background: linear-gradient(90deg, transparent, var(--stage-line), transparent);
}

/* Barrido de faros: una luz cálida que cruza el panel de vez en cuando. */
.auth-beam {
    position: absolute; inset: -20% -40%;
    z-index: 3; pointer-events: none; opacity: .0;
    background: linear-gradient(74deg, transparent 38%, var(--stage-sheen) 50%, transparent 62%);
    animation: auth-beam 11s ease-in-out infinite;
}
@keyframes auth-beam {
    0%, 62%  { opacity: 0; transform: translateX(-32%); }
    72%      { opacity: .9; }
    100%     { opacity: 0; transform: translateX(32%); }
}

/* Paralaje sutil siguiendo el puntero (lo alimenta auth.js). */
.auth-stage { --px: 0; --py: 0; }
.auth-stage::before { translate: calc(var(--px) * 14px) calc(var(--py) * 10px); }

/* ────────────────────────────────────────────────────────────────────────
   4) PANEL DEL FORMULARIO
   ──────────────────────────────────────────────────────────────────────── */
.auth-panel {
    position: relative;
    background: var(--auth-bg);
    display: flex; align-items: center; justify-content: center;
    padding: 44px 28px;
}
/* Halo de color muy tenue detrás de la tarjeta. */
.auth-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(var(--erp-primary-rgb, 194, 16, 25), .07) 0%, transparent 70%),
        radial-gradient(50% 40% at 50% 100%, rgba(20, 21, 25, .06) 0%, transparent 70%);
}

/* Vive en la esquina superior derecha del armazón: sobre el panel claro en
   escritorio y sobre el panel de marca cuando todo cae a una columna. */
.auth-theme {
    position: absolute; top: 18px; right: 20px; z-index: 20;
    width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid var(--erp-border, #E4EAEF);
    background: var(--auth-surface); color: var(--auth-muted);
    display: grid; place-items: center; cursor: pointer;
    transition: color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.auth-theme:hover {
    color: var(--erp-primary, #D01A21);
    border-color: var(--erp-primary, #D01A21);
    box-shadow: 0 0 0 4px rgba(var(--erp-primary-rgb, 194, 16, 25), .12);
}
.auth-theme:active { transform: scale(.94); }

.auth-form { position: relative; z-index: 2; width: 100%; max-width: 424px; }

.auth-card {
    background: var(--auth-surface);
    border: 1px solid var(--erp-border, #E4EAEF);
    border-radius: 22px;
    box-shadow: var(--auth-card-shadow);
    padding: 34px 34px 30px;
}

/* Entrada escalonada de la tarjeta y sus bloques. */
.auth-reveal { opacity: 0; transform: translateY(14px); animation: auth-in .55s cubic-bezier(.22, .8, .3, 1) forwards; }
.auth-reveal:nth-child(1) { animation-delay: .04s; }
.auth-reveal:nth-child(2) { animation-delay: .12s; }
.auth-reveal:nth-child(3) { animation-delay: .2s; }
@keyframes auth-in { to { opacity: 1; transform: none; } }

.auth-head { margin-bottom: 24px; }
.auth-greet {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--erp-primary-600, #B0141A);
    background: var(--erp-primary-soft, #FCEAEB);
    padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.auth-head h2 {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 25px; font-weight: 800; letter-spacing: -.025em;
    color: var(--auth-ink); margin: 0 0 5px;
}
.auth-head p { font-size: 13.5px; color: var(--auth-muted); margin: 0; }

/* ────────────────────────────────────────────────────────────────────────
   5) FORMULARIO · campos con etiqueta flotante
   ──────────────────────────────────────────────────────────────────────── */
.auth-field { position: relative; margin-bottom: 16px; }

.auth-field .auth-input {
    width: 100%; height: 62px;
    padding: 25px 46px 9px 46px;
    font-size: 15px; color: var(--auth-ink);
    background: var(--auth-field);
    border: 1.5px solid var(--auth-border);
    border-radius: 14px;
    transition: border-color .16s, box-shadow .16s, background .16s;
    -webkit-appearance: none; appearance: none;
}
.auth-field .auth-input::placeholder { color: transparent; }
.auth-field .auth-input:hover { border-color: var(--erp-primary-soft-2, #F6CED0); }
.auth-field .auth-input:focus {
    border-color: var(--erp-primary, #D01A21);
    box-shadow: 0 0 0 4px rgba(var(--erp-primary-rgb, 194, 16, 25), .15);
}
/* El anillo accesible de erp.css lleva !important: no se pelea con él, se
   pega al borde para que se lea como un solo aro teal con halo. */
.auth-field .auth-input:focus-visible { outline-offset: 0; border-radius: 14px; }

.auth-field label {
    position: absolute; left: 46px; top: 50%; transform: translateY(-50%);
    font-size: 14.5px; font-weight: 500; color: var(--auth-muted);
    pointer-events: none; transition: all .16s ease;
    max-width: calc(100% - 92px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-field .auth-input:focus + label,
.auth-field .auth-input:not(:placeholder-shown) + label,
.auth-field .auth-input:-webkit-autofill + label {
    top: 15px; transform: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--erp-primary-600, #B0141A);
}

.auth-field .auth-ico {
    position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
    font-size: 15px; color: var(--erp-faint, #97A2AE);
    pointer-events: none; transition: color .16s;
}
.auth-field:focus-within .auth-ico { color: var(--erp-primary, #D01A21); }

.auth-field .auth-toggle {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; border-radius: 10px;
    background: transparent; color: var(--auth-muted);
    display: grid; place-items: center; cursor: pointer;
    transition: background .15s, color .15s;
}
.auth-field .auth-toggle:hover { background: var(--erp-primary-soft, #FCEAEB); color: var(--erp-primary-600, #B0141A); }
.auth-field .auth-toggle:focus-visible { outline: 2px solid var(--erp-primary, #D01A21); outline-offset: 2px; }

/* Campo con error. Como la marca ya es roja, el aro de foco también lo es:
   el estado de error se distingue por el relleno rosado, no sólo por el borde. */
.auth-field.is-invalid .auth-input {
    border-color: var(--erp-danger, #D64550);
    background: #FDF2F3;
}
.auth-field.is-invalid .auth-input:focus { box-shadow: 0 0 0 4px rgba(214, 69, 80, .16); }
.auth-field.is-invalid .auth-ico { color: var(--erp-danger, #D64550); }

/* El autocompletado de Chrome pinta el fondo de amarillo: lo neutralizamos. */
.auth-field .auth-input:-webkit-autofill,
.auth-field .auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--auth-field) inset;
    transition: background-color 9999s ease-out;
}

/* Aviso de bloqueo de mayúsculas */
.auth-caps {
    display: none; align-items: center; gap: 7px;
    margin: 8px 2px 0; font-size: 12px; font-weight: 600;
    color: var(--erp-warning, #C77E06);
}
.auth-caps.is-on { display: flex; }

/* ── Fila: recordarme + ayuda ─────────────────────────────────────────── */
.auth-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 6px 0 22px;
}

.auth-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.auth-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-switch .track {
    width: 40px; height: 23px; border-radius: 999px; flex: none;
    background: var(--erp-border-2, #D3DBE2);
    position: relative; transition: background .18s;
}
.auth-switch .track::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 17px; height: 17px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(16, 32, 48, .3);
    transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
.auth-switch input:checked + .track { background: var(--erp-primary, #D01A21); }
.auth-switch input:checked + .track::after { transform: translateX(17px); }
.auth-switch input:focus-visible + .track { box-shadow: 0 0 0 4px rgba(var(--erp-primary-rgb, 194, 16, 25), .18); }
.auth-switch .lbl { font-size: 13.5px; font-weight: 600; color: var(--auth-ink-2); }

.auth-help { font-size: 13px; font-weight: 600; color: var(--erp-primary-600, #B0141A); text-decoration: none; }
.auth-help:hover { color: var(--erp-primary-700, #8D1015); text-decoration: underline; }

/* ────────────────────────────────────────────────────────────────────────
   6) BOTÓN, AVISOS Y PIE
   ──────────────────────────────────────────────────────────────────────── */
.auth-submit {
    position: relative; overflow: hidden;
    width: 100%; height: 54px; border: 0; border-radius: 14px;
    font-size: 15px; font-weight: 700; letter-spacing: .01em; color: #fff;
    background: linear-gradient(120deg, var(--erp-primary, #D01A21) 0%, var(--erp-primary-700, #8D1015) 100%);
    box-shadow: 0 16px 30px -14px rgba(var(--erp-primary-rgb, 194, 16, 25), .55);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    transition: transform .12s, box-shadow .18s, filter .18s;
}
.auth-submit:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 20px 34px -14px rgba(var(--erp-primary-rgb, 194, 16, 25), .62); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:focus-visible { outline: 3px solid var(--brand-carbon, #141519); outline-offset: 3px; }

/* Destello que recorre el botón al pasar el cursor. */
.auth-submit::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
    left: -60%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transition: left .55s ease;
}
.auth-submit:hover::after { left: 120%; }

.auth-submit .spin { display: none; width: 17px; height: 17px; }
.auth-submit[data-loading] { pointer-events: none; filter: saturate(.85); }
.auth-submit[data-loading] .txt,
.auth-submit[data-loading] .arrow { display: none; }
.auth-submit[data-loading] .spin { display: block; animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Aviso de error */
.auth-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 20px;
    border-radius: 13px; font-size: 13.5px; line-height: 1.45;
    color: #8E2A33;
    background: var(--erp-danger-soft, #FBE7E9);
    border: 1px solid rgba(214, 69, 80, .28);
    animation: auth-shake .45s cubic-bezier(.36, .07, .19, .97);
}
.auth-alert i { margin-top: 1px; color: var(--erp-danger, #D64550); }
@keyframes auth-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

/* Aviso informativo (sesión expirada): informa, no regaña — ni rojo ni temblor */
.auth-alert--info {
    color: #7A5310;
    background: var(--erp-warning-soft, #FDF3E0);
    border-color: rgba(214, 154, 38, .30);
    animation: none;
}
.auth-alert--info i { color: var(--erp-warning, #D69A26); }

.auth-sep {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 16px; font-size: 11.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--erp-faint, #97A2AE);
}
.auth-sep::before, .auth-sep::after {
    content: ""; flex: 1; height: 1px; background: var(--erp-border, #E4EAEF);
}

.auth-note { font-size: 12.5px; color: var(--auth-muted); text-align: center; line-height: 1.55; margin: 0; }
.auth-note a { color: var(--erp-primary-600, #B0141A); font-weight: 600; }

.auth-badges {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 8px; margin-top: 20px;
}
.auth-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; color: var(--auth-muted);
    background: var(--auth-surface);
    border: 1px solid var(--erp-border, #E4EAEF);
    border-radius: 999px; padding: 6px 11px;
}
.auth-badge i { color: var(--erp-success, #1E9E5A); font-size: 11px; }
.auth-badge--ink i { color: var(--erp-primary, #D01A21); }

/* ────────────────────────────────────────────────────────────────────────
   7) TEMA OSCURO
   Grafito neutro (no el gris azulado del panel): al lado del escenario de
   carbón, cualquier tinte frío se nota como un empalme.
   ──────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .auth-body,
[data-theme="dark"] body.auth-body {
    --auth-bg: #121316;
    --auth-surface: #1B1D21;
    --auth-ink: #ECEEF0;
    --auth-ink-2: #C7CACE;
    --auth-muted: #9A9DA3;
    --auth-border: #35383E;
    --auth-field: #121316;
    --auth-card-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85), 0 2px 10px rgba(0, 0, 0, .4);

    /* El escenario vuelve al carbón del escudo; el logo se apoya en una
       placa clara (su "MAIQUITO" es negro y sobre carbón se perdería). */
    --stage-from: #24262B;
    --stage-mid:  #141519;
    --stage-to:   #0A0B0D;
    --stage-ink:    #ECEEF0;
    --stage-ink-2:  #A7ABB1;
    --stage-line:   rgba(255, 255, 255, .12);
    --stage-tile:   rgba(255, 255, 255, .10);
    --stage-edge:   rgba(255, 255, 255, .18);
    --stage-glow:   rgba(var(--accent-rgb), .30);
    --stage-sheen:  rgba(255, 255, 255, .14);
    --stage-shade:  rgba(6, 6, 8, .75);
    --stage-lane:   var(--silver);
    --stage-tile-ico: #FFFFFF;
}
[data-theme="dark"] .auth-brand__logo {
    background: linear-gradient(150deg, #FFFFFF 0%, var(--silver) 100%);
    border-radius: 18px; padding: 8px 12px;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .6));
}
[data-theme="dark"] .auth-eyebrow { color: #FF8A90; box-shadow: none; }
[data-theme="dark"] .auth-card { border-color: #292B30; }
[data-theme="dark"] .auth-theme {
    background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #C7CACE;
}
[data-theme="dark"] .auth-theme:hover { color: #FF8A90; border-color: rgba(255, 255, 255, .3); box-shadow: none; }
[data-theme="dark"] .auth-greet { background: rgba(var(--erp-primary-rgb, 194, 16, 25), .20); color: #FF8A90; }
[data-theme="dark"] .auth-field label { color: var(--auth-muted); }
[data-theme="dark"] .auth-field .auth-input:focus + label,
[data-theme="dark"] .auth-field .auth-input:not(:placeholder-shown) + label { color: #FF8A90; }
[data-theme="dark"] .auth-sep::before,
[data-theme="dark"] .auth-sep::after { background: #292B30; }
[data-theme="dark"] .auth-badge { background: #1B1D21; border-color: #292B30; }
[data-theme="dark"] .auth-alert { background: rgba(214, 69, 80, .14); color: #F3B8BD; }
[data-theme="dark"] .auth-alert--info { background: rgba(199, 126, 6, .16); color: #F0CF95; }
[data-theme="dark"] .auth-switch .track { background: #35383E; }
[data-theme="dark"] .auth-field.is-invalid .auth-input { background: rgba(214, 69, 80, .12); }
[data-theme="dark"] .auth-help { color: #FF8A90; }

/* ────────────────────────────────────────────────────────────────────────
   8) RESPONSIVE Y MOVIMIENTO REDUCIDO
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .auth-stage { padding: 40px 40px 34px; }
    .auth-features .d { display: none; }
}

@media (max-width: 980px) {
    /* Una sola columna. La marca ocupa sólo lo que mide su contenido (auto) y
       el hueco sobrante se lo queda el formulario (1fr): con dos filas
       automáticas la rejilla las estiraba por igual y dejaba un vacío enorme
       entre el titular y la tarjeta. */
    .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .auth-stage {
        padding: 26px 24px 52px;
        gap: 18px;
        min-height: 0;
        justify-content: flex-start;
    }
    .auth-brand__logo { height: 104px; }
    .auth-stage__mid { margin: 14px 0 0; max-width: none; }
    .auth-stage__mid h1 { font-size: 27px; margin-bottom: 8px; }
    .auth-eyebrow { margin-bottom: 14px; }
    .auth-stage__lead, .auth-features, .auth-stage__bot { display: none; }
    .auth-asphalt { height: 92px; }
    .auth-road { bottom: 18px; }
    .auth-asphalt::after { bottom: 18px; }
    /* El formulario arranca pegado a la marca en lugar de flotar centrado. */
    .auth-panel { align-items: flex-start; padding: 26px 18px 40px; }
    /* En una columna cae sobre el panel de marca, que ya es claro: mantiene
       el mismo aspecto que en escritorio. */
    .auth-theme { top: 16px; right: 16px; }
}

/* ── Teléfonos ────────────────────────────────────────────────────────────
   La composición cambia de eje: en escritorio la marca vive a la izquierda
   de la tarjeta; aquí es una cabecera centrada sobre la que sube el
   formulario. Alineado a la izquierda y con la carretera de fondo, en 6 cm
   de ancho se leía como un montaje suelto.                                 */
@media (max-width: 640px) {
    .auth-stage {
        padding: 22px 18px 40px;
        gap: 10px;
        align-items: center;
        text-align: center;
    }
    .auth-brand { align-items: center; gap: 6px; }
    .auth-brand__logo { height: 88px; }
    .auth-brand__tag { font-size: 10px; letter-spacing: .12em; padding-left: 0; }
    .auth-stage__mid { margin: 4px 0 0; }
    .auth-eyebrow { font-size: 10.5px; padding: 6px 11px; margin-bottom: 10px; }
    .auth-stage__mid h1 { font-size: clamp(21px, 6.2vw, 26px); margin-bottom: 0; }
    /* Sin nowrap: en pantallas de 320 px «en una sola vista» se salía y
       obligaba a desplazar la página en horizontal. */
    .auth-stage__mid h1 .hl { white-space: normal; }
    /* El subrayado de señalización mide el ancho del renglón: cuando la frase
       parte en dos líneas queda una raya suelta a la derecha. */
    .auth-stage__mid h1 .hl::after { display: none; }

    /* Escenografía: la línea de la vía y el barrido de faros necesitan un
       panel ancho para leerse; a este tamaño sólo son ruido bajo el logo.
       Queda el degradado del asfalto, que sirve de sombra al borde. */
    .auth-road, .auth-beam, .auth-asphalt::after, .auth-asphalt::before { display: none; }
    .auth-asphalt { height: 54px; }

    /* La tarjeta sube sobre la marca: la costura entre los dos paneles deja
       de ser una raya recta de lado a lado. */
    .auth-panel {
        padding: 0 18px 30px;
        margin-top: -18px;
        border-radius: 22px 22px 0 0;
    }
    /* En el teléfono el panel ES la tarjeta: una hoja blanca a todo lo ancho.
       Anidar una tarjeta blanca dentro de un panel casi blanco desperdiciaba
       28 px de ancho útil y las dos superficies apenas se distinguían. */
    .auth-panel { background: var(--auth-surface); }
    .auth-panel::before { display: none; }
    .auth-card {
        background: transparent; border: 0; box-shadow: none;
        border-radius: 0; padding: 0;
    }
    .auth-form { padding-top: 26px; max-width: 460px; }
    .auth-theme { top: 12px; right: 12px; width: 38px; height: 38px; }

    /* 16 px es el umbral de Safari en iOS: con un tipo menor hace zoom al
       enfocar el campo y deja la pantalla corrida y con scroll lateral. */
    .auth-field .auth-input { font-size: 16px; height: 60px; padding: 24px 44px 8px 44px; }
    .auth-field label { font-size: 15px; left: 44px; max-width: calc(100% - 88px); }
    .auth-field .auth-ico { left: 16px; }
    .auth-field { margin-bottom: 13px; }

    .auth-badges { margin-top: 18px; }
    .auth-badge { background: var(--auth-bg); }
}

@media (max-width: 480px) {
    .auth-head { margin-bottom: 20px; }
    .auth-head h2 { font-size: 22px; }
    .auth-head p { font-size: 13px; }
    .auth-greet { margin-bottom: 12px; }
    .auth-row { flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
    .auth-sep { margin: 18px 0 14px; }
    .auth-submit { height: 52px; }
    .auth-badge { font-size: 11px; padding: 5px 10px; }
}

/* Pantallas cortas (teléfonos pequeños tipo 320×640): se recorta la cabecera
   para que el botón de entrar quede a la vista sin desplazar. */
@media (max-width: 640px) and (max-height: 700px) {
    .auth-stage { padding: 16px 18px 30px; gap: 6px; }
    .auth-brand__logo { height: 68px; }
    .auth-eyebrow { margin-bottom: 8px; }
    .auth-stage__mid h1 { font-size: clamp(19px, 5.8vw, 23px); }
    .auth-asphalt { height: 42px; }
    .auth-form { padding-top: 20px; }
    .auth-head { margin-bottom: 16px; }
    .auth-field { margin-bottom: 11px; }
    .auth-row { margin: 4px 0 16px; }
}

/* Apaisado en el teléfono: el titular se comía toda la pantalla y el
   formulario quedaba fuera de la vista. */
@media (max-width: 980px) and (max-height: 560px) {
    .auth-stage { padding: 14px 18px 26px; }
    .auth-brand__logo { height: 62px; }
    .auth-stage__mid { display: none; }
    /* En una franja de 100 px la línea de la vía queda como una raya suelta
       justo en la costura con el formulario. */
    .auth-road, .auth-beam, .auth-asphalt::after { display: none; }
    .auth-asphalt { height: 40px; }
    .auth-panel { padding-top: 16px; }
}

/* Muescas y barra de gestos (iPhone y Android con pantalla completa). */
@supports (padding: max(0px)) {
    @media (max-width: 980px) {
        .auth-stage {
            padding-left:  max(18px, env(safe-area-inset-left));
            padding-right: max(18px, env(safe-area-inset-right));
            padding-top:   max(20px, env(safe-area-inset-top));
        }
        .auth-panel {
            padding-left:  max(18px, env(safe-area-inset-left));
            padding-right: max(18px, env(safe-area-inset-right));
        }
        .auth-theme { right: max(12px, env(safe-area-inset-right)); }
    }
    @media (max-width: 640px) {
        .auth-panel { padding-bottom: max(30px, env(safe-area-inset-bottom)); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-body *,
    .auth-body *::before,
    .auth-body *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    .auth-reveal { opacity: 1; transform: none; }
    .auth-submit[data-loading] .spin { display: block; }
}