/* =====================================================================================
   Portal SCT 2026 · Login, pantalla de carga, «¿Ha olvidado su contraseña?», «Cambiar clave» y
   «Verificación en dos pasos» (php/verificarMFA.php)
   MOD 04-11-2026 (rediseño 2026). Diseño copiado de la maqueta aprobada y congelada:
   _propuestas_diseno_CONGELADO_2026-11-04/login.html  (ver GUIA_DISENO_SCT2026.md §1 y §10).

   Se carga DESPUÉS de estilosWeb.<tema>.css y login.<tema>.css (login.php, php/olvidoPassword.php, php/verificarMFA.php)
   o de cambiarClave.<tema>.css (php/cambiarClave.php), así que el aspecto es el mismo en todos los
   temas/dominios.
   - Reglas de página completa (fondo, body): solo bajo body.sct26 (login y olvido; NO en el portal).
   - Tarjeta, campos, botones y avisos: bajo .s26-card (también dentro del portal, en cambiar clave).
   - «:not(#s26z)» es un truco para sumar la especificidad de un id y ganar a las reglas antiguas
     del tipo «input#user {... !important}» sin tener que tocar los CSS de cada tema.
   ===================================================================================== */

:root {
    --s26-ink: #01113A;
    --s26-text: #1B2A4E;
    --s26-muted: #5B6B86;
    --s26-label: #33415C;
    --s26-line: #D3DCEE;
    --s26-blue: #1C4BFE;
    --s26-blue-d: #0F36D6;
    --s26-red: #E0344A;
    --s26-green: #12A15A;
    --s26-amber: #B07A00;
    --s26-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---------- Página completa (login.php, php/olvidoPassword.php y php/verificarMFA.php) ---------- */
html body.sct26 {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 100vh;
    display: block !important;
    font-family: var(--s26-font) !important;
    font-size: 14px;
    line-height: 1.5;
    color: var(--s26-text) !important;
    background: #F3F6FF none !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}
/* login.default.css pintaba círculos difuminados con body::before: fuera */
html body.sct26::before,
html body.sct26::after {
    content: none !important;
    display: none !important;
}
body.sct26 *,
body.sct26 *::before,
body.sct26 *::after,
.s26-card *,
.s26-card *::before,
.s26-card *::after {
    box-sizing: border-box;
}

/* Fondo suave animado (degradados + rejilla difuminada + manchas de color que flotan) */
.s26-bg {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(70% 60% at 15% 10%, rgba(28, 75, 254, .14), transparent 70%),
        radial-gradient(60% 60% at 90% 95%, rgba(0, 194, 224, .16), transparent 70%),
        #F3F6FF;
}
.s26-bg::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image:
        linear-gradient(rgba(28, 75, 254, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 75, 254, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 20%, transparent 75%);
}
.s26-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .28;
    pointer-events: none;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.s26-blob.b1 { width: 420px; height: 420px; background: #00C2E0; right: -80px; top: -80px; animation: s26float1 14s ease-in-out infinite; }
.s26-blob.b2 { width: 360px; height: 360px; background: #1C4BFE; left: -100px; bottom: -120px; animation: s26float2 16s ease-in-out infinite; }
.s26-blob.b3 { width: 220px; height: 220px; background: #7DFFD8; left: 55%; top: 60%; opacity: .2; animation: s26float1 18s ease-in-out infinite reverse; }
@keyframes s26float1 { 0%, 100% { translate: 0 0; } 50% { translate: -30px 40px; } }
@keyframes s26float2 { 0%, 100% { translate: 0 0; } 50% { translate: 40px -30px; } }

/* Contenedor que centra la tarjeta */
.s26-login {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

/* ---------- Tarjeta ---------- */
.s26-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 38px 38px 30px;
    background: #fff;
    border: 1px solid #E3E9F6;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(28, 75, 254, .14), 0 6px 18px rgba(1, 17, 58, .06);
    text-align: left;
    color: var(--s26-text);
    font-family: var(--s26-font);
    font-size: 14px;
    line-height: 1.5;
    animation: s26rise .6s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes s26rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.s26-card .s26-logo {
    display: block;
    height: 72px;
    width: auto;
    max-width: 100%;
    margin: 0 auto 22px;
    border-radius: 0;
}
.s26-card .s26-logo.s26-logo-sm {
    height: 54px;
    margin-bottom: 18px;
}
.s26-card h1.s26-title {
    margin: 0 0 24px;
    padding: 0;
    text-align: center;
    font-family: var(--s26-font);
    font-size: 30px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--s26-ink);
}
.s26-card p {
    padding-left: 0;
    padding-right: 0;
}

/* ---------- Campos ---------- */
.s26-card .s26-fld {
    margin: 0 0 16px;
    padding: 0;
    text-align: left;
}
.s26-card .s26-fld > label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font-family: var(--s26-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--s26-label);
    text-align: left;
}
.s26-card .s26-req {
    color: var(--s26-red);
    font-weight: 700;
    margin-left: 2px;
}
.s26-card .s26-inp {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.s26-card .s26-inp > .s26-ic {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #8A97AE;
    font-size: 14px;
    pointer-events: none;
    transition: color .15s;
}
.s26-card .s26-inp:focus-within > .s26-ic { color: var(--s26-blue); }

.s26-card .s26-input:not(#s26z) {
    display: block;
    width: 100%;
    max-width: none;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    font-family: var(--s26-font);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: var(--s26-text) !important;
    -webkit-text-fill-color: var(--s26-text) !important;
    background: #fff !important;
    border: 1.5px solid var(--s26-line) !important;
    border-radius: 12px !important;
    -webkit-box-shadow: inset 0 0 0 1000px #fff !important;
    box-shadow: inset 0 0 0 1000px #fff !important;
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.s26-card .s26-inp.s26-has-ic .s26-input:not(#s26z) { padding-left: 42px; }
.s26-card .s26-inp.s26-has-eye .s26-input:not(#s26z) { padding-right: 46px; }
.s26-card .s26-input:not(#s26z)::placeholder {
    color: #9AA8C4 !important;
    -webkit-text-fill-color: #9AA8C4 !important;
    opacity: 1;
}
.s26-card .s26-input:not(#s26z):hover { border-color: #AFC0E6 !important; }
.s26-card .s26-input:not(#s26z):focus {
    border-color: var(--s26-blue) !important;
    -webkit-box-shadow: inset 0 0 0 1000px #fff, 0 0 0 4px rgba(28, 75, 254, .12) !important;
    box-shadow: inset 0 0 0 1000px #fff, 0 0 0 4px rgba(28, 75, 254, .12) !important;
}
/* Autorrelleno del navegador (Chrome/Edge): sin fondo amarillo/azul */
.s26-card .s26-input:not(#s26z):-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px #fff !important;
    box-shadow: inset 0 0 0 1000px #fff !important;
    -webkit-text-fill-color: var(--s26-text) !important;
    caret-color: var(--s26-text);
}
.s26-card .s26-input:not(#s26z):-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px #fff, 0 0 0 4px rgba(28, 75, 254, .12) !important;
    box-shadow: inset 0 0 0 1000px #fff, 0 0 0 4px rgba(28, 75, 254, .12) !important;
}
.s26-card .s26-input:not(#s26z)[readonly] {
    background: #F5F7FB !important;
    color: var(--s26-muted) !important;
    -webkit-text-fill-color: var(--s26-muted) !important;
    -webkit-box-shadow: inset 0 0 0 1000px #F5F7FB !important;
    box-shadow: inset 0 0 0 1000px #F5F7FB !important;
    cursor: default;
}
.s26-card .s26-input:not(#s26z):disabled {
    opacity: .7;
    cursor: not-allowed;
}
/* Ocultar el «ojo» nativo de Edge/IE para que solo se vea el nuestro */
.s26-card input[type="password"]::-ms-reveal,
.s26-card input[type="password"]::-ms-clear { display: none; }

/* Ojo de mostrar/ocultar contraseña (el <i class="show-password"> que usa initializePasswordToggle) */
.s26-card .s26-inp > .s26-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    margin: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #8A97AE !important;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.s26-card .s26-inp > .s26-eye:hover,
.s26-card .s26-inp > .s26-eye:focus {
    background: #F1F5FF;
    color: var(--s26-blue) !important;
    outline: none;
}

/* Aviso de mayúsculas activadas */
.s26-card .s26-caps {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--s26-amber);
}
.s26-card .s26-caps.on { display: flex; }

/* Fila «¿Has olvidado tu contraseña?» */
.s26-card .s26-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 4px;
    margin: 4px 0 22px;
    font-size: 13.5px;
}
.s26-card a.s26-link {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: 600;
    color: var(--s26-blue);
    text-decoration: none;
}
.s26-card a.s26-link:hover,
.s26-card a.s26-link:focus {
    color: var(--s26-blue-d);
    text-decoration: underline;
}

/* ---------- Botón principal ---------- */
.s26-card .s26-go {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    height: 50px;
    margin: 0;
    padding: 0 16px;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: var(--s26-blue);
    color: #fff;
    font-family: var(--s26-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 10px 24px rgba(28, 75, 254, .3);
    transition: background .15s, transform .12s, box-shadow .15s;
}
.s26-card .s26-go:hover {
    background: var(--s26-blue-d);
    color: #fff;
    box-shadow: 0 14px 30px rgba(28, 75, 254, .38);
}
.s26-card .s26-go:active { transform: translateY(1px); }
.s26-card .s26-go:focus { outline: none; }
.s26-card .s26-go:focus-visible { box-shadow: 0 0 0 4px rgba(28, 75, 254, .25), 0 10px 24px rgba(28, 75, 254, .3); }
.s26-card .s26-go:disabled,
.s26-card .s26-go[disabled] {
    background: #8FA6F7;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.s26-card .s26-go .arr { transition: transform .2s; }
.s26-card .s26-go:hover .arr { transform: translateX(4px); }
.s26-card .s26-go .spin {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    opacity: 0;
    animation: s26rot .8s linear infinite;
}
/* «busy»: se pone al enviar el formulario de login (js/login.js) mientras responde el servidor */
.s26-card .s26-go.busy { pointer-events: none; }
.s26-card .s26-go.busy .lbl,
.s26-card .s26-go.busy .arr { opacity: 0; }
.s26-card .s26-go.busy .spin { opacity: 1; }
@keyframes s26rot { to { transform: rotate(360deg); } }

/* ---------- Avisos (errores del servidor y de los pasos de cambio de contraseña) ---------- */
.s26-card .alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 18px;
    padding: 11px 13px;
    border: 1px solid #F6CBD2;
    border-radius: 12px;
    background: #FFF3F5;
    color: #A61B30;
    font-family: var(--s26-font);
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
}
.s26-card .alert::before {
    content: "!";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 9px 0 0;
    border-radius: 50%;
    background: var(--s26-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: -3px;
}
.s26-card .alert.alert-danger {
    color: #A61B30 !important;
    background-color: #FFF3F5 !important;
    border-color: #F6CBD2 !important;
    animation: s26shake .35s;
}
.s26-card .alert.alert-success {
    color: #0E7A45 !important;
    background-color: #E9F8F0 !important;
    border-color: #BFE8D2 !important;
}
.s26-card .alert.alert-success::before {
    content: "\2713";
    background: var(--s26-green);
}
@keyframes s26shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- Tarjeta compacta: olvido de contraseña y cambiar clave (§7: campos 38 px) ---------- */
.s26-card.s26-compact {
    max-width: 420px;
    padding: 32px 32px 26px;
}
.s26-card.s26-compact .s26-input:not(#s26z) {
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    border-width: 1px !important;
    border-radius: 9px !important;
}
.s26-card.s26-compact .s26-inp.s26-has-eye .s26-input:not(#s26z) { padding-right: 40px; }
.s26-card.s26-compact .s26-input:not(#s26z):focus,
.s26-card.s26-compact .s26-input:not(#s26z):-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px #fff, 0 0 0 3px rgba(28, 75, 254, .12) !important;
    box-shadow: inset 0 0 0 1000px #fff, 0 0 0 3px rgba(28, 75, 254, .12) !important;
}
.s26-card.s26-compact .s26-inp > .s26-eye {
    right: 4px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 14px;
}
.s26-card.s26-compact .s26-fld { margin-bottom: 14px; }
.s26-card.s26-compact .s26-go {
    height: 40px;
    margin-top: 4px;
    border-radius: 10px;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(28, 75, 254, .25);
}
.s26-card.s26-compact .s26-go:hover { box-shadow: 0 10px 22px rgba(28, 75, 254, .32); }
.s26-card.s26-compact .s26-go:disabled,
.s26-card.s26-compact .s26-go[disabled] { box-shadow: none; }

/* Icono del paso en baldosa azul suave + título + explicación */
.s26-card .s26-step-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 15px;
    background: linear-gradient(135deg, #EEF3FF, #E3EBFF);
    box-shadow: inset 0 0 0 1px #D6E1FB;
    color: var(--s26-blue);
    font-size: 22px;
    line-height: 1;
}
.s26-card h1.s26-step-title {
    margin: 0 0 8px;
    padding: 0;
    text-align: center;
    font-family: var(--s26-font);
    font-size: 22px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--s26-ink);
}
.s26-card p.s26-help {
    display: block;
    margin: 0 0 20px;
    padding: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--s26-muted);
}
/* «Volver a enviar código (05:00)»: el JS le pone color gris en línea mientras corre el tiempo */
.s26-card #resend-link {
    display: block;
    margin: 14px 0 0;
    text-align: center;
    font-size: 13.5px;
}
.s26-card #aRensedLink {
    display: inline;
    margin: 0;
    font-weight: 600;
    color: var(--s26-blue);
    text-decoration: none;
}
.s26-card #aRensedLink:hover { text-decoration: underline; }
.s26-card #timer { font-variant-numeric: tabular-nums; }
.s26-card #repeat-password-wrapper { margin-top: 0; }
.s26-card .s26-back {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid #EEF2FA;
    text-align: center;
    font-size: 13.5px;
}
.s26-card .s26-back a.s26-link i { margin-right: 4px; font-size: 12px; }

/* Cambiar clave dentro del portal: tarjeta centrada en la zona de contenido */
.sct26-clave {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.sct26-clave .s26-card { margin: 16px auto 0; }

/* ---------- Verificación en dos pasos (php/verificarMFA.php, doble factor de producción) ----------
   Sustituye al <style> que traía la página (.mfa-qr, .mfa-secreto, .mfa-codigo, .mfa-pasos, .mfa-recordar y
   «#centrarform p», que deshacía el «form p { display:flex; padding: 0 120px }» de estilosWeb.<tema>.css). */
.s26-card.s26-mfa form p:not(.alert) {
    display: block;
    padding-left: 0;
    padding-right: 0;
}
.s26-card.s26-mfa p.s26-help b { color: var(--s26-ink); font-weight: 600; }
.s26-card ol.s26-mfa-pasos {
    margin: -8px 0 16px;
    padding: 12px 14px 12px 32px;
    border: 1px solid #E3E9F6;
    border-radius: 12px;
    background: #F7F9FF;
    text-align: left;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--s26-text);
}
.s26-card ol.s26-mfa-pasos li { margin: 0 0 4px; padding: 0; }
.s26-card ol.s26-mfa-pasos li:last-child { margin-bottom: 0; }
.s26-card img.s26-mfa-qr {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto 12px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--s26-line);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(28, 75, 254, .08);
}
.s26-card.s26-mfa p.s26-mfa-clave {
    margin: 0 0 18px;
    font-size: 12.5px;
}
.s26-card .s26-mfa-secreto {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #F1F5FF;
    color: var(--s26-ink);
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    word-break: break-all;
}
/* El campo del código: grande, centrado y con los dígitos separados */
.s26-card.s26-compact .s26-input.s26-mfa-codigo:not(#s26z) {
    height: 50px;
    padding: 0 12px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 8px;
    font-variant-numeric: tabular-nums;
}
.s26-card.s26-compact .s26-input.s26-mfa-codigo:not(#s26z)::placeholder { letter-spacing: 8px; font-weight: 400; }
/* «Recordar este dispositivo durante 30 días» */
.s26-card label.s26-check {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    font-family: var(--s26-font);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--s26-label);
    text-align: left;
    cursor: pointer;
}
.s26-card label.s26-check input[type="checkbox"]:not(#s26z) {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--s26-blue);
    cursor: pointer;
}
/* «Volver a enviar el código (01:00)»: el script de la página lo pone gris en línea mientras corre el minuto */
.s26-card .s26-mfa-reenviar {
    display: block;
    margin: 14px 0 0;
    text-align: center;
    font-size: 13.5px;
}
.s26-card .s26-mfa-reenviar a {
    display: inline;
    margin: 0;
    font-weight: 600;
    color: var(--s26-blue);
    text-decoration: none;
}
.s26-card .s26-mfa-reenviar a:hover { text-decoration: underline; }
.s26-card #timerReenviar { font-variant-numeric: tabular-nums; }

/* ---------- Pantalla de carga tras un login correcto ---------- */
.s26-loader {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
    font-family: var(--s26-font);
    color: var(--s26-text);
    background:
        radial-gradient(70% 60% at 20% 10%, rgba(28, 75, 254, .12), transparent 70%),
        radial-gradient(60% 60% at 90% 90%, rgba(0, 194, 224, .12), transparent 70%),
        #F7F9FF;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility .45s;
}
/* Sin «fill-mode»: al acabar la entrada manda la opacidad normal y así .done puede desvanecerla */
.s26-loader.on {
    opacity: 1;
    visibility: visible;
    animation: s26fade .35s ease;
}
.s26-loader.done {
    opacity: 0;
    transition: opacity .4s ease;
}
@keyframes s26fade { from { opacity: 0; } to { opacity: 1; } }

.s26-ld-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 440px;
    max-width: 90vw;
    text-align: center;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
/* Logo con anillos girando y órbita de puntos */
.s26-ld-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 170px;
    margin-bottom: 26px;
}
.s26-ld-ring {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 55%, #1C4BFE 75%, #00C2E0 92%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: s26rot 1.4s linear infinite;
}
.s26-ld-ring.r2 {
    top: 16px; right: 16px; bottom: 16px; left: 16px;
    background: conic-gradient(from 180deg, transparent 0 60%, #7DFFD8 85%, transparent 100%);
    animation-duration: 2.2s;
    animation-direction: reverse;
    opacity: .9;
}
.s26-ld-core {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 18px 40px rgba(28, 75, 254, .18), inset 0 0 0 1px #E3E9F6;
    animation: s26breathe 2.4s ease-in-out infinite;
}
.s26-ld-core img { display: block; width: 84px; height: auto; }
@keyframes s26breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.s26-orbit {
    position: absolute;
    top: -14px; right: -14px; bottom: -14px; left: -14px;
    animation: s26rot 6s linear infinite;
}
.s26-orbit i {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1C4BFE;
    box-shadow: 0 0 12px rgba(28, 75, 254, .7);
}
.s26-orbit i:nth-child(1) { top: 0; left: 50%; }
.s26-orbit i:nth-child(2) { bottom: 12%; left: 6%; background: #00C2E0; box-shadow: 0 0 12px rgba(0, 194, 224, .7); }
.s26-orbit i:nth-child(3) { bottom: 12%; right: 6%; background: #7DFFD8; box-shadow: 0 0 12px rgba(125, 255, 216, .8); }

.s26-ld-hello {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--s26-blue);
}
.s26-loader h1.s26-ld-title {
    min-height: 32px;
    margin: 0 0 18px;
    padding: 0;
    font-family: var(--s26-font);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--s26-ink);
}
.s26-ld-bar {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #E3EBFF;
}
.s26-ld-bar i {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #1C4BFE, #0A86FF, #00C2E0);
    transition: width .35s ease;
}
.s26-ld-bar i::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: s26shimmer 1.2s infinite;
}
@keyframes s26shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.s26-ld-meta {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 8px 0 22px;
    font-size: 12.5px;
    color: var(--s26-muted);
}
.s26-ld-meta b { color: var(--s26-ink); font-variant-numeric: tabular-nums; }
.s26-ld-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
}
.s26-ld-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #E3E9F6;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: #9AA8C4;
    transition: color .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.s26-ld-step .st {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #F1F5FF;
    color: #AFC0E6;
    font-size: 12px;
    transition: background .25s, color .25s;
}
.s26-ld-step.act {
    color: var(--s26-ink);
    border-color: #AFC3FF;
    box-shadow: 0 8px 20px rgba(28, 75, 254, .1);
    transform: translateX(4px);
}
.s26-ld-step.act .st { background: #E3EBFF; color: var(--s26-blue); }
.s26-ld-step.act .st i { animation: s26rot 1s linear infinite; }
.s26-ld-step.ok { color: var(--s26-label); }
.s26-ld-step.ok .st { background: var(--s26-green); color: #fff; }
.s26-loader a.s26-ld-skip {
    display: inline-block;
    margin-top: 20px;
    font-size: 13px;
    color: var(--s26-muted);
    text-decoration: none;
}
.s26-loader a.s26-ld-skip:hover,
.s26-loader a.s26-ld-skip:focus {
    color: var(--s26-blue);
    text-decoration: underline;
}

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 480px) {
    .s26-login { padding: 16px; }
    .s26-card { padding: 28px 22px 24px; border-radius: 18px; }
    .s26-card.s26-compact { padding: 26px 20px 22px; }
    .s26-card .s26-logo { height: 60px; margin-bottom: 18px; }
    .s26-card h1.s26-title { font-size: 26px; margin-bottom: 20px; }
    .s26-ld-logo { width: 140px; height: 140px; margin-bottom: 20px; }
    .s26-ld-core { width: 92px; height: 92px; }
    .s26-ld-core img { width: 68px; }
}

@media (prefers-reduced-motion: reduce) {
    body.sct26 *, body.sct26 *::before, body.sct26 *::after,
    .s26-card, .s26-card *, .s26-card *::before, .s26-card *::after {
        animation: none !important;
        transition: none !important;
    }
}