/* ═══════════════════════════════════════════════════════════════
   Entrada con código, dentro del panel del alumno.
   Hereda los tokens del panel (--jma-*), así que se adapta sola al tema elegido
   —Clásico, Neomorphism o Bento— y al modo oscuro. Los valores de reserva son
   por si alguien coloca el bloque fuera del panel.
   ═══════════════════════════════════════════════════════════════ */

.uni-2fa {
    --u-card:   var(--jma-card, #fff);
    --u-line:   var(--jma-border, #e7eaf0);
    --u-txt:    var(--jma-text, #1b2230);
    --u-mut:    var(--jma-muted, #5b6577);
    --u-acc:    var(--jma-primary, #2563eb);
    --u-r:      var(--jma-r, 16px);
    color: var(--u-txt);
    font-size: 14px;
    line-height: 1.55;
}

/* ── Cabecera ── */
.uni-2fa .uni-2fa__cab {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 16px; margin-bottom: 18px;
    border-bottom: 1px solid var(--u-line);
}
.uni-2fa .uni-2fa__escudo {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 12px; color: var(--u-acc);
    background: color-mix(in srgb, var(--u-acc) 10%, transparent);
}
.uni-2fa .uni-2fa__escudo svg { width: 22px; height: 22px; }
.uni-2fa .uni-2fa__t { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.uni-2fa .uni-2fa__sub { margin: 2px 0 0; font-size: 13px; color: var(--u-mut); }
.uni-2fa .uni-2fa__estado {
    margin-left: auto; flex: none; border-radius: 999px; padding: 5px 12px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.uni-2fa .uni-2fa__estado.es-on { background: #dcfce7; color: #166534; }
.uni-2fa .uni-2fa__estado.es-off { background: rgba(120,130,150,.14); color: var(--u-mut); }

/* ── Por qué ── */
.uni-2fa .uni-2fa__porque {
    background: color-mix(in srgb, var(--u-acc) 5%, transparent);
    border-left: 3px solid var(--u-acc);
    border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 0 0 16px;
}
.uni-2fa .uni-2fa__porque p { margin: 0 0 8px; font-size: 13.5px; }
.uni-2fa .uni-2fa__porque p:last-child { margin-bottom: 0; }
.uni-2fa .uni-2fa__necesitas { margin: 0 0 20px; font-size: 13px; color: var(--u-mut); }
.uni-2fa .uni-2fa__necesitas b { color: var(--u-txt); }

/* ── Los tres pasos ── */
.uni-2fa .uni-2fa__pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.uni-2fa .uni-2fa__pasos > li { display: flex; gap: 14px; align-items: flex-start; }
.uni-2fa .uni-2fa__num {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px;
    border-radius: 50%; background: var(--u-acc); color: #fff; font-size: 13px; font-weight: 700;
}
.uni-2fa .uni-2fa__pasos strong { display: block; margin-bottom: 6px; font-size: 14px; }
.uni-2fa .uni-2fa__pista { margin: 0 0 10px; font-size: 12.5px; color: var(--u-mut); }

/* ── El cuadro ── */
.uni-2fa .uni-2fa__qr {
    display: inline-block; padding: 12px; margin: 4px 0 10px;
    background: #fff; border: 1px solid var(--u-line); border-radius: 14px;
    line-height: 0;
}
.uni-2fa .uni-2fa__qr img { display: block; width: 168px; height: 168px; image-rendering: pixelated; }

.uni-2fa .uni-2fa__manual { font-size: 12.5px; color: var(--u-mut); }
.uni-2fa .uni-2fa__manual summary { cursor: pointer; color: var(--u-acc); font-weight: 600; }
.uni-2fa .uni-2fa__manual p { margin: 8px 0 6px; }
.uni-2fa .uni-2fa__manual code {
    display: inline-block; padding: 8px 12px; border-radius: 10px;
    background: rgba(120,130,150,.12); font-size: 13px; letter-spacing: 2px; word-break: break-all;
}

/* ── Campo del código y botones ── */
.uni-2fa .uni-2fa__fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.uni-2fa .uni-2fa__codigo {
    width: 160px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--u-line); background: var(--u-card); color: var(--u-txt);
    font-size: 20px; font-weight: 700; letter-spacing: 6px; text-align: center;
    font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s;
}
.uni-2fa .uni-2fa__codigo::placeholder { color: var(--u-mut); opacity: .45; letter-spacing: 6px; }
.uni-2fa .uni-2fa__codigo:focus {
    outline: none; border-color: var(--u-acc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--u-acc) 18%, transparent);
}
.uni-2fa .uni-2fa__btn {
    border: 0; border-radius: 12px; padding: 13px 22px; cursor: pointer;
    background: var(--u-acc); color: #fff; font: 600 14px/1 inherit;
    transition: filter .15s, opacity .15s;
}
.uni-2fa .uni-2fa__btn:hover { filter: brightness(1.06); }

.uni-2fa .uni-2fa__btn--suave {
    background: transparent; color: var(--u-mut); border: 1px solid var(--u-line);
}
.uni-2fa .uni-2fa__btn--suave:hover { color: var(--u-txt); background: rgba(120,130,150,.08); filter: none; }

/* ── Cuando ya está puesta ── */
.uni-2fa .uni-2fa__ok { margin: 0 0 14px; font-size: 13.5px; }
.uni-2fa .uni-2fa__dato {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 16px; margin-bottom: 16px;
    border: 1px solid var(--u-line); border-radius: var(--u-r); background: var(--u-card);
}
.uni-2fa .uni-2fa__dato span { font-size: 13px; color: var(--u-mut); }
.uni-2fa .uni-2fa__dato strong { font-size: 15px; }

/* ── Códigos de rescate ── */
.uni-2fa .uni-2fa__rescates {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;
    margin: 14px 0 0; padding: 0;
}
.uni-2fa .uni-2fa__rescates span {
    padding: 10px; border-radius: 10px; text-align: center;
    background: rgba(120,130,150,.12); border: 1px dashed var(--u-line);
    font-family: ui-monospace, Menlo, monospace; font-size: 13px; letter-spacing: 1px;
}

/* ── Avisos ── */
.uni-2fa .uni-2fa__msg { margin: 14px 0 0; font-size: 13px; }
.uni-2fa .uni-2fa__msg:empty { display: none; }
.uni-2fa .uni-2fa__msg.es-mal { color: #b91c1c; }
.uni-2fa .uni-2fa__msg.es-bien { color: #166534; }

@media (max-width: 480px) {
    .uni-2fa .uni-2fa__codigo { width: 100%; }
    .uni-2fa .uni-2fa__fila .uni-2fa__btn { width: 100%; }
    .uni-2fa .uni-2fa__qr img { width: 148px; height: 148px; }
}
[data-jma-dark="1"] .uni-2fa__estado.es-on { background: #14351f; color: #86efac; }
[data-jma-dark="1"] .uni-2fa__qr { background: #fff; }


/* ═══════════════════════════════════════════════════════════════
   Elegir método, casillas del código y animaciones.
   Todo hereda los mismos tokens del panel, así que sigue la línea del tema
   y se adapta solo al modo oscuro.
   ═══════════════════════════════════════════════════════════════ */

.uni-2fa .uni-2fa__eligeT { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; }

.uni-2fa .uni-2fa__elige {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 22px;
}
.uni-2fa .uni-2fa__via {
    display: block; text-align: left; cursor: pointer;
    padding: 14px 15px; border-radius: 14px;
    border: 1px solid var(--u-line); background: var(--u-card); color: var(--u-txt);
    font: inherit; transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.uni-2fa .uni-2fa__via:hover { border-color: color-mix(in srgb, var(--u-acc) 40%, var(--u-line)); transform: translateY(-1px); }
.uni-2fa .uni-2fa__via.is-on {
    border-color: var(--u-acc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--u-acc) 14%, transparent);
    background: color-mix(in srgb, var(--u-acc) 4%, var(--u-card));
}
.uni-2fa .uni-2fa__viaIco {
    display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 9px;
    border-radius: 10px; color: var(--u-mut);
    background: color-mix(in srgb, var(--u-mut) 12%, transparent);
    transition: color .16s, background .16s;
}
.uni-2fa .uni-2fa__via.is-on .uni-2fa__viaIco {
    color: var(--u-acc); background: color-mix(in srgb, var(--u-acc) 12%, transparent);
}
.uni-2fa .uni-2fa__viaIco svg { width: 17px; height: 17px; }
.uni-2fa .uni-2fa__via strong { display: block; margin-bottom: 4px; font-size: 13.5px; }
.uni-2fa .uni-2fa__via small { display: block; font-size: 12px; line-height: 1.45; color: var(--u-mut); }

/* Los paneles entran deslizándose, no de golpe. */
.uni-2fa .uni-2fa__panel[hidden] { display: none; }
.uni-2fa .uni-2fa__panel.is-on { animation: uni2faEntra .3s cubic-bezier(.2,.8,.3,1) both; }
@keyframes uni2faEntra {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ── Las seis casillas ── */
.uni-2fa .uni-2fa__cod { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.uni-2fa .uni-2fa__casillas { display: flex; gap: 7px; }
.uni-2fa .uni-2fa__casilla {
    width: 40px; height: 50px; padding: 0; text-align: center;
    border: 1px solid var(--u-line); border-radius: 11px;
    background: var(--u-card); color: var(--u-txt);
    font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums;
    transition: border-color .14s, box-shadow .14s, transform .14s;
}
.uni-2fa .uni-2fa__casilla:focus {
    outline: none; border-color: var(--u-acc); transform: translateY(-2px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--u-acc) 18%, transparent);
}
/* Una casilla con cifra se marca: se ve de un vistazo cuánto falta. */
/* Antes esto colgaba de «:placeholder-shown» y del atributo «value», y ninguno de los
   dos cambia al escribir: la casilla nunca se marcaba. Ahora la clase la pone el guion. */

/* Código equivocado: se sacude y se vacía. */
.uni-2fa .uni-2fa__cod.es-mal .uni-2fa__casillas { animation: uni2faNo .4s ease both; }
@keyframes uni2faNo {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

.uni-2fa .uni-2fa__rescate { margin: 12px 0 0; font-size: 12.5px; color: var(--u-mut); }
.uni-2fa .uni-2fa__largo {
    display: inline-block; width: 170px; max-width: 100%; margin-left: 8px; padding: 7px 11px;
    border: 1px solid var(--u-line); border-radius: 10px;
    background: var(--u-card); color: var(--u-txt);
    font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; letter-spacing: 1px;
    text-transform: uppercase;
}
.uni-2fa .uni-2fa__largo:focus { outline: none; border-color: var(--u-acc); }

/* ── Botón esperando ── */
.uni-2fa .uni-2fa__btn { position: relative; display: inline-flex; align-items: center; gap: 9px; }
/* Apagado, no invisible. Antes era el mismo rojo al 50 % de opacidad sobre tarjeta
   clara y parecía que el botón no estaba: la gente no sabía qué pulsar. */
.uni-2fa .uni-2fa__btn[disabled] {
    background: rgba(120,130,150,.16); color: var(--u-mut);
    opacity: 1; cursor: default; box-shadow: none;
}
.uni-2fa .uni-2fa__btn[disabled]:hover { filter: none; }
.uni-2fa .uni-2fa__girando { display: none; width: 14px; height: 14px; }
.uni-2fa .uni-2fa__btn.es-esperando .uni-2fa__girando {
    display: block; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    border-radius: 50%; animation: uni2faGira .7s linear infinite;
}
@keyframes uni2faGira { to { transform: rotate(360deg); } }

/* ── El escudo se cierra al activar ── */
.uni-2fa .uni-2fa__escudo svg { overflow: visible; }
.uni-2fa.es-listo .uni-2fa__escudo {
    color: #0d8f63; background: rgba(13,143,99,.12);
    animation: uni2faLate .6s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes uni2faLate {
    0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); }
}
.uni-2fa.es-listo .uni-2fa__tic {
    stroke-dasharray: 12; stroke-dashoffset: 12;
    animation: uni2faTic .45s .18s ease forwards;
}
@keyframes uni2faTic { to { stroke-dashoffset: 0; } }

/* ── Lo que se va y lo que entra al terminar ── */
.uni-2fa .es-fuera { animation: uni2faSale .26s ease both; pointer-events: none; }
@keyframes uni2faSale {
    to { opacity: 0; transform: translateY(-6px); }
}
.uni-2fa .uni-2fa__fin { opacity: 0; transform: translateY(10px); }
.uni-2fa .uni-2fa__fin.is-on { animation: uni2faEntra .34s cubic-bezier(.2,.8,.3,1) both; }
.uni-2fa .uni-2fa__finT { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #0d8f63; }
.uni-2fa .uni-2fa__finS { margin: 0 0 4px; font-size: 13px; line-height: 1.55; color: var(--u-mut); }
.uni-2fa .uni-2fa__fin .uni-2fa__btn--suave { margin-top: 14px; }

/* Los códigos de rescate entran de uno en uno. */
.uni-2fa .uni-2fa__fin .uni-2fa__rescates span { animation: uni2faEntra .3s both; }
.uni-2fa .uni-2fa__fin .uni-2fa__rescates span:nth-child(1) { animation-delay: .04s; }
.uni-2fa .uni-2fa__fin .uni-2fa__rescates span:nth-child(2) { animation-delay: .08s; }
.uni-2fa .uni-2fa__fin .uni-2fa__rescates span:nth-child(3) { animation-delay: .12s; }
.uni-2fa .uni-2fa__fin .uni-2fa__rescates span:nth-child(4) { animation-delay: .16s; }
.uni-2fa .uni-2fa__fin .uni-2fa__rescates span:nth-child(5) { animation-delay: .20s; }
.uni-2fa .uni-2fa__fin .uni-2fa__rescates span:nth-child(6) { animation-delay: .24s; }
.uni-2fa .uni-2fa__fin .uni-2fa__rescates span:nth-child(7) { animation-delay: .28s; }
.uni-2fa .uni-2fa__fin .uni-2fa__rescates span:nth-child(8) { animation-delay: .32s; }

.uni-2fa .uni-2fa__msg:not(:empty) { animation: uni2faEntra .24s ease both; }

@media (max-width: 560px) {
    .uni-2fa .uni-2fa__elige { grid-template-columns: 1fr; }
    .uni-2fa .uni-2fa__casilla { width: 38px; height: 47px; font-size: 19px; }
    .uni-2fa .uni-2fa__cod { gap: 10px; }
    .uni-2fa .uni-2fa__cod .uni-2fa__btn { width: 100%; justify-content: center; }
    .uni-2fa .uni-2fa__largo { width: 100%; margin: 7px 0 0; }
}

/* Quien pide menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .uni-2fa .uni-2fa__panel.is-on, .uni-2fa .uni-2fa__fin.is-on, .uni-2fa .es-fuera, .uni-2fa .uni-2fa__msg:not(:empty), .uni-2fa.es-listo .uni-2fa__escudo, .uni-2fa.es-listo .uni-2fa__tic, .uni-2fa .uni-2fa__cod.es-mal .uni-2fa__casillas, .uni-2fa .uni-2fa__fin .uni-2fa__rescates span {
        animation: none !important;
    }
    .uni-2fa .uni-2fa__fin { opacity: 1; transform: none; }
    .uni-2fa .uni-2fa__via:hover, .uni-2fa .uni-2fa__casilla:focus { transform: none; }
}


/* ── Contra el tema del sitio ──
   Salient pone «input[type=text] { width:100% }», que pesa más que una sola clase y
   estiraba las casillas de lado a lado hasta que parecían tres campos rotos. Estas
   reglas llevan el contenedor delante para pesar más, sin recurrir a !important. */
.uni-2fa .uni-2fa__casillas .uni-2fa__casilla {
    width: 44px; min-width: 44px; max-width: 44px; flex: 0 0 44px;
    height: 52px; box-sizing: border-box;
}
.uni-2fa .uni-2fa__rescate .uni-2fa__largo { width: 170px; max-width: 100%; box-sizing: border-box; }
.uni-2fa .uni-2fa__cod { align-items: flex-start; }
.uni-2fa .uni-2fa__casillas { flex-wrap: nowrap; }

/* Los dibujos no heredan el tamaño de las imágenes del tema. */
.uni-2fa svg { max-width: 100%; height: auto; }
.uni-2fa .uni-2fa__viaIco svg { width: 17px; height: 17px; }
.uni-2fa .uni-2fa__escudo svg { width: 22px; height: 22px; }

@media (max-width: 560px) {
    .uni-2fa .uni-2fa__casillas .uni-2fa__casilla {
        width: 40px; min-width: 40px; max-width: 40px; flex: 0 0 40px; height: 48px;
    }
    .uni-2fa .uni-2fa__casillas { gap: 6px; }
}

/* ── La elección, inequívoca ──
   Con dos tarjetas parecidas nadie sabe cuál está puesta. La elegida lleva marca de
   verificación, etiqueta «Elegido» y el borde del color de la casa; la otra se apaga. */
.uni-2fa .uni-2fa__intro { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; }
.uni-2fa .uni-2fa__mas {
    color: var(--u-acc); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.uni-2fa .uni-2fa__mas:hover { text-decoration: underline; }
.uni-2fa .uni-2fa__porque[hidden] { display: none; }

.uni-2fa .uni-2fa__eligeT {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 12px; font-size: 14.5px; font-weight: 650;
}
.uni-2fa .uni-2fa__paso {
    flex: none; display: grid; place-items: center; width: 24px; height: 24px;
    border-radius: 50%; background: var(--u-acc); color: #fff; font-size: 12.5px; font-weight: 700;
}

.uni-2fa .uni-2fa__via { position: relative; padding-right: 40px; }
.uni-2fa .uni-2fa__viaTic {
    position: absolute; top: 13px; right: 13px;
    display: grid; place-items: center; width: 21px; height: 21px;
    border-radius: 50%; border: 1.5px solid var(--u-line);
    color: transparent; background: transparent;
    transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.uni-2fa .uni-2fa__viaTic svg { width: 12px; height: 12px; }
.uni-2fa .uni-2fa__via.is-on .uni-2fa__viaTic {
    background: var(--u-acc); border-color: var(--u-acc); color: #fff; transform: scale(1.06);
}
.uni-2fa .uni-2fa__viaEstado {
    display: none; margin-top: 9px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--u-acc);
}
.uni-2fa .uni-2fa__via.is-on .uni-2fa__viaEstado { display: block; }
/* La que no está elegida se retira un paso, para que no compitan. */
.uni-2fa .uni-2fa__via:not(.is-on) { opacity: .72; }
.uni-2fa .uni-2fa__via:not(.is-on):hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .uni-2fa .uni-2fa__viaTic { transition: none; }
    .uni-2fa .uni-2fa__via.is-on .uni-2fa__viaTic { transform: none; }
}

.uni-2fa .uni-2fa__porque.is-on { animation: uni2faEntra .28s cubic-bezier(.2,.8,.3,1) both; }

/* ── En móvil la cabecera no cabe en una línea ──
   El escudo, el título y la etiqueta de estado se peleaban por el ancho y el texto
   salía partido en tres renglones. Se apilan: escudo y estado arriba, texto debajo. */
@media (max-width: 560px) {
    .uni-2fa .uni-2fa__cab {
        display: grid; grid-template-columns: 42px 1fr; grid-template-areas:
            "escudo estado"
            "texto  texto";
        gap: 10px 12px; align-items: center;
    }
    .uni-2fa .uni-2fa__escudo { grid-area: escudo; }
    .uni-2fa .uni-2fa__cab > div { grid-area: texto; }
    .uni-2fa .uni-2fa__estado { grid-area: estado; justify-self: end; margin-left: 0; }
    .uni-2fa .uni-2fa__t { font-size: 15.5px; }
    .uni-2fa .uni-2fa__sub { font-size: 12.5px; }
    .uni-2fa .uni-2fa__eligeT { font-size: 14px; }
    .uni-2fa .uni-2fa__qr img { width: 160px; height: 160px; }
}


/* ── Al escribir el código ──
   Cada cifra que entra da un saltito y deja la casilla marcada; cuando están las seis,
   la fila entera confirma con un golpe y el botón se enciende. Sin esto, escribir el
   código no producía ninguna señal y no se sabía si el sistema se enteraba. */
.uni-2fa .uni-2fa__casilla.es-puesta {
    border-color: var(--u-acc);
    background: color-mix(in srgb, var(--u-acc) 5%, var(--u-card));
}
.uni-2fa .uni-2fa__casilla.es-late { animation: uni2faCifra .22s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes uni2faCifra {
    0%   { transform: scale(1);    }
    45%  { transform: scale(1.14); }
    100% { transform: scale(1);    }
}

/* Las seis puestas: un pulso corto que recorre la fila. */
.uni-2fa .uni-2fa__cod.es-listo .uni-2fa__casillas { animation: uni2faFila .42s ease both; }
@keyframes uni2faFila {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}
.uni-2fa .uni-2fa__cod.es-completo .uni-2fa__casilla.es-puesta {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--u-acc) 12%, transparent);
}
/* Y el botón deja de estar apagado con una transición, no de golpe. */
.uni-2fa .uni-2fa__btn { transition: background .22s, color .22s, box-shadow .22s, filter .15s; }
.uni-2fa .uni-2fa__cod.es-completo .uni-2fa__alta:not([disabled]) {
    animation: uni2faDespierta .3s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes uni2faDespierta {
    0%   { transform: scale(.96); }
    55%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .uni-2fa .uni-2fa__casilla.es-late,
    .uni-2fa .uni-2fa__cod.es-listo .uni-2fa__casillas,
    .uni-2fa .uni-2fa__cod.es-completo .uni-2fa__alta:not([disabled]) { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   LA PORTADA: sobre → cifras disparadas → escudo con números girando

   Todo con CSS. El sobre entra, estalla en cifras que salen del centro hacia sus
   órbitas, y detrás se dibuja el escudo. Luego las dos órbitas giran despacio y en
   sentidos contrarios, para siempre: da sensación de que algo está pasando mientras
   la persona busca el código en su correo.

   Cada cifra va dentro de un brazo que gira; la cifra gira al revés a la misma
   velocidad, y así se queda derecha en vez de dar vueltas de campana.
   ═══════════════════════════════════════════════════════════════ */

:is(.uni-2fa, .uni-paso2) .uni-orb {
    position: relative; width: 190px; height: 190px; margin: 4px auto 18px;
    flex: none; pointer-events: none;
}

/* El resplandor de fondo. */
:is(.uni-2fa, .uni-paso2) .uni-orb__halo {
    position: absolute; inset: 22%; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--u-acc) 20%, transparent), transparent 70%);
    opacity: 0; animation: uniOrbHalo 1s .15s ease forwards;
}
@keyframes uniOrbHalo { to { opacity: 1; } }

/* Los dos aros. */
:is(.uni-2fa, .uni-paso2) .uni-orb__aro {
    position: absolute; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--u-acc) 22%, transparent);
    opacity: 0; transform: scale(.6);
    animation: uniOrbAro .7s cubic-bezier(.2,.8,.3,1.2) forwards;
}
:is(.uni-2fa, .uni-paso2) .uni-orb__aro--1 { inset: 30%; animation-delay: .30s; }
:is(.uni-2fa, .uni-paso2) .uni-orb__aro--2 { inset: 4%;  animation-delay: .42s; border-color: color-mix(in srgb, var(--u-acc) 14%, transparent); }
@keyframes uniOrbAro { to { opacity: 1; transform: scale(1); } }

/* El sobre: entra, aguanta un momento y se va al abrirse. */
:is(.uni-2fa, .uni-paso2) .uni-orb__sobre {
    position: absolute; left: 50%; top: 50%; width: 62px; height: 62px;
    margin: -31px 0 0 -31px;
    transform: scale(.4); opacity: 0;
    animation: uniOrbSobre 1.15s cubic-bezier(.2,.8,.3,1.3) forwards;
}
:is(.uni-2fa, .uni-paso2) .uni-orb__sobre svg { width: 100%; height: 100%; display: block; }
@keyframes uniOrbSobre {
    0%   { transform: scale(.4)  rotate(-8deg); opacity: 0; }
    22%  { transform: scale(1.06) rotate(0deg); opacity: 1; }
    46%  { transform: scale(1)    rotate(0deg); opacity: 1; }
    70%  { transform: scale(1.25) rotate(0deg); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
}

/* El escudo se dibuja cuando el sobre desaparece. */
:is(.uni-2fa, .uni-paso2) .uni-orb__escudo {
    position: absolute; left: 50%; top: 50%; width: 66px; height: 66px;
    margin: -33px 0 0 -33px; opacity: 0;
    animation: uniOrbEscudo .5s .72s cubic-bezier(.2,.8,.3,1.3) forwards;
}
:is(.uni-2fa, .uni-paso2) .uni-orb__escudo svg { width: 100%; height: 100%; display: block; }
:is(.uni-2fa, .uni-paso2) .uni-orb__trazo {
    fill: color-mix(in srgb, var(--u-acc) 9%, transparent);
    stroke-dasharray: 180; stroke-dashoffset: 180;
    animation: uniOrbTrazo .9s .72s ease forwards;
}
@keyframes uniOrbEscudo { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes uniOrbTrazo  { to { stroke-dashoffset: 0; } }

/* El brazo que gira. La cifra sale del centro hasta su radio. */
:is(.uni-2fa, .uni-paso2) .uni-orb__giro {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0;
    transform: rotate(var(--a));
}
:is(.uni-2fa, .uni-paso2) .uni-orb__giro--1 { animation: uniOrbGira 26s linear infinite; }
:is(.uni-2fa, .uni-paso2) .uni-orb__giro--2 { animation: uniOrbGira 40s linear infinite reverse; }
@keyframes uniOrbGira { to { transform: rotate(calc(var(--a) + 360deg)); } }

:is(.uni-2fa, .uni-paso2) .uni-orb__n {
    position: absolute; left: -9px; top: -11px;
    display: block; width: 18px; text-align: center;
    font-size: 15px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    animation: uniOrbSale .62s cubic-bezier(.16,.9,.25,1.25) var(--d) forwards,
               uniOrbDerecha 26s linear infinite;
}
:is(.uni-2fa, .uni-paso2) .uni-orb__giro--2 .uni-orb__n {
    font-size: 13px;
    animation: uniOrbSaleLejos .62s cubic-bezier(.16,.9,.25,1.25) var(--d) forwards,
               uniOrbDerecha 40s linear infinite reverse;
}
/* Salen disparadas del centro a su órbita. */
@keyframes uniOrbSale {
    0%   { transform: translateY(0)     scale(.3); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translateY(-52px) scale(1);  opacity: 1; }
}
@keyframes uniOrbSaleLejos {
    0%   { transform: translateY(0)     scale(.3); opacity: 0; }
    35%  { opacity: .85; }
    100% { transform: translateY(-84px) scale(1);  opacity: .85; }
}
/* Y giran al revés que su brazo, para no ir del revés. */
@keyframes uniOrbDerecha { to { rotate: -360deg; } }

/* Los colores de las cifras. Variados como en un teclado de colores, pero sacados de
   la paleta de la casa para que no parezcan pegatinas de otro sitio. */
:is(.uni-2fa, .uni-paso2) .uni-orb__n--a { color: var(--u-acc); }
:is(.uni-2fa, .uni-paso2) .uni-orb__n--b { color: #2563eb; }
:is(.uni-2fa, .uni-paso2) .uni-orb__n--c { color: #c77700; }
:is(.uni-2fa, .uni-paso2) .uni-orb__n--d { color: #0d8f63; }
:is(.uni-2fa, .uni-paso2) .uni-orb__n--e { color: #7c3aed; }
:is(.uni-2fa, .uni-paso2) .uni-orb__n--f { color: #0891b2; }

@media (max-width: 560px) {
    :is(.uni-2fa, .uni-paso2) .uni-orb { width: 168px; height: 168px; }
    :is(.uni-2fa, .uni-paso2) .uni-orb__n { font-size: 14px; }
    @keyframes uniOrbSale      { 0%{transform:translateY(0) scale(.3);opacity:0} 35%{opacity:1} 100%{transform:translateY(-46px) scale(1);opacity:1} }
    @keyframes uniOrbSaleLejos { 0%{transform:translateY(0) scale(.3);opacity:0} 35%{opacity:.85} 100%{transform:translateY(-74px) scale(1);opacity:.85} }
}

/* Sin movimiento: se enseña el resultado, no el camino. */
@media (prefers-reduced-motion: reduce) {
    :is(.uni-2fa, .uni-paso2) .uni-orb__halo, :is(.uni-2fa, .uni-paso2) .uni-orb__aro, :is(.uni-2fa, .uni-paso2) .uni-orb__escudo,
    :is(.uni-2fa, .uni-paso2) .uni-orb__trazo, :is(.uni-2fa, .uni-paso2) .uni-orb__giro, :is(.uni-2fa, .uni-paso2) .uni-orb__n {
        animation: none !important; opacity: 1; transform: rotate(var(--a)); stroke-dashoffset: 0;
    }
    :is(.uni-2fa, .uni-paso2) .uni-orb__sobre { display: none; }
    :is(.uni-2fa, .uni-paso2) .uni-orb__n { transform: translateY(-52px); opacity: 1; }
    :is(.uni-2fa, .uni-paso2) .uni-orb__giro--2 .uni-orb__n { transform: translateY(-84px); }
    :is(.uni-2fa, .uni-paso2) .uni-orb__aro, :is(.uni-2fa, .uni-paso2) .uni-orb__escudo { transform: none; }
}

/* ── La misma portada y las mismas casillas en la pantalla de acceso al panel ──
   El bloque va envuelto en «.uni-2fa», así que hereda todo; aquí solo se ajusta para
   que quepa dentro del formulario de entrada, que es más estrecho. */
.uni-2fa--acceso { text-align: center; }
.uni-2fa--acceso .uni-orb { width: 168px; height: 168px; margin: 0 auto 10px; }
.uni-2fa--acceso .jma__lf-label { display: block; margin-bottom: 8px; text-align: left; }
.uni-2fa--acceso .uni-2fa__casillas { justify-content: space-between; }
.uni-2fa--acceso .uni-2fa__casilla { width: 44px; min-width: 0; flex: 1 1 0; max-width: 48px; }
.uni-2fa--acceso .uni-2fa__resc { margin: 10px 0 0; font-size: 12.5px; text-align: left; }
.uni-2fa--acceso .uni-2fa__resc a { color: var(--u-acc); text-decoration: none; font-weight: 600; }
.uni-2fa--acceso .uni-2fa__resc a:hover { text-decoration: underline; }
@media (max-width: 420px) {
    .uni-2fa--acceso .uni-orb { width: 144px; height: 144px; }
    .uni-2fa--acceso .uni-2fa__casilla { height: 48px; font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════════
   EL ACIERTO: el escudo se cierra en verde y estalla el confeti

   Hasta aquí la pantalla solo contaba la espera. Faltaba lo otro: decirle a la persona
   que ha acertado, antes de llevársela. Medio segundo de celebración y adentro.

   Se dispara poniendo «es-ok» en la escena; el resto lo hace el CSS.
   ═══════════════════════════════════════════════════════════════ */

/* El tic, escondido hasta que toca. */
:is(.uni-2fa, .uni-paso2) .uni-orb__tic {
    stroke-dasharray: 34; stroke-dashoffset: 34; opacity: 0;
}

/* Las cifras que orbitaban se retiran: ya no hay nada que esperar. */
:is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__giro {
    animation: none;
    transition: opacity .25s ease;
    opacity: 0;
}

/* El escudo pasa a verde y se rellena. */
:is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__trazo {
    stroke: #19a565; fill: rgba(25,165,101,.16);
    animation: uniOkEscudo .5s cubic-bezier(.2,.9,.3,1.5) both;
    transition: stroke .3s, fill .3s;
}
@keyframes uniOkEscudo {
    0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); }
}
:is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__escudo { transform-box: fill-box; transform-origin: center; }
:is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__tic {
    opacity: 1; animation: uniOkTic .4s .16s cubic-bezier(.3,.9,.4,1) forwards;
}
@keyframes uniOkTic { to { stroke-dashoffset: 0; } }

/* Los aros se tiñen y se abren un poco. */
:is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__aro {
    border-color: rgba(25,165,101,.30);
    animation: uniOkAro .6s cubic-bezier(.2,.8,.3,1.2) both;
}
@keyframes uniOkAro { 0% { transform: scale(1); } 100% { transform: scale(1.07); opacity: .55; } }
:is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__halo {
    background: radial-gradient(circle, rgba(25,165,101,.26), transparent 70%);
}

/* ── El confeti ── */
:is(.uni-2fa, .uni-paso2) .uni-orb__fiesta {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none;
}
:is(.uni-2fa, .uni-paso2) .uni-orb__fiesta i {
    position: absolute; left: 0; top: 0;
    width: var(--s); height: calc(var(--s) * 1.6);
    margin: calc(var(--s) * -.8) 0 0 calc(var(--s) * -.5);
    background: var(--c); border-radius: 1px;
    opacity: 0; transform: scale(0);
}
:is(.uni-2fa, .uni-paso2) .uni-orb__fiesta i.es-redondo { border-radius: 50%; height: var(--s); }
/* Sale disparado en su ángulo, gira y se apaga al final del recorrido. */
:is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__fiesta i {
    animation: uniOkPapel .95s cubic-bezier(.12,.75,.3,1) var(--r) both;
}
@keyframes uniOkPapel {
    0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) rotate(0deg) scale(.2); }
    12%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0;
           transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(var(--g)) scale(1); }
}

/* ── Las casillas del código, en verde ── */
:is(.uni-2fa, .uni-paso2) .uni-2fa__casilla.es-ok,
:is(.uni-2fa, .uni-paso2) .uni-paso2__casilla.es-ok,
.uni-paso2__casilla.es-ok {
    border-color: #19a565 !important;
    background: rgba(25,165,101,.10) !important;
    color: #0f7a4a;
    box-shadow: 0 0 0 3px rgba(25,165,101,.14) !important;
    animation: uniOkCasilla .38s cubic-bezier(.2,.9,.3,1.5) var(--ro, 0ms) both;
}
@keyframes uniOkCasilla {
    0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); }
}

/* Sin movimiento: se ve el resultado, no el camino. */
@media (prefers-reduced-motion: reduce) {
    :is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__trazo,
    :is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__tic,
    :is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__aro,
    :is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__fiesta i,
    .uni-paso2__casilla.es-ok, :is(.uni-2fa, .uni-paso2) .uni-2fa__casilla.es-ok {
        animation: none !important;
    }
    :is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__tic { opacity: 1; stroke-dashoffset: 0; }
    :is(.uni-2fa, .uni-paso2) .uni-orb.es-ok .uni-orb__fiesta i { opacity: 0; }
}

/* ── Los dos enlaces del segundo paso, cada uno en su línea ──
   Pegados en la misma línea, en el móvil se pulsaba «usa un código de rescate» al ir a
   por «enviarme otro»: desaparecían las seis casillas y salía el campo largo. Ahora hay
   separación de sobra y cada uno ocupa su renglón. */
.uni-2fa--acceso .uni-2fa__resc { margin: 12px 0 0; display: block; }
.uni-2fa--acceso .uni-2fa__resc--otro { margin-top: 14px; }
.uni-2fa--acceso .uni-2fa__resc a {
    display: inline-block; padding: 4px 0;
    font-size: 13px; font-weight: 600; text-decoration: none; color: var(--u-acc);
}
.uni-2fa--acceso .uni-2fa__resc a:hover { text-decoration: underline; }
/* El de rescate es la salida de emergencia: se ve, pero no compite. */
.uni-2fa--acceso .uni-2fa__resc:not(.uni-2fa__resc--otro) a {
    font-size: 12.5px; font-weight: 500; color: var(--u-mut);
}
.uni-2fa--acceso .uni-2fa__resc:not(.uni-2fa__resc--otro) a:hover { color: var(--u-txt); }
/* En pantalla táctil, cada enlace con su propia zona de toque. */
@media (pointer: coarse) {
    .uni-2fa--acceso .uni-2fa__resc a { padding: 9px 0; }
    .uni-2fa--acceso .uni-2fa__resc--otro { margin-top: 10px; }
}