/* ═══════════════════════════════════════════════════════════════════════════
   ACREDITACIÓN · lo que le faltaba a la acreditación para pedir un código
   ═══════════════════════════════════════════════════════════════════════════

   Todo lo demás (.auth-stage, .auth-badge, .aw-input, .aw-btn…) ya vive en
   styles.css y NO se toca. Aquí sólo hay lo nuevo: las seis casillas del
   código y las dos líneas de apoyo que las acompañan.

   ⚠ NADA DE ESTO ES UN `.badge` PELADO. `badges.css` declara un `.badge` sin
     modificador de 200×300 y posicionado absoluto — una acreditación entera —
     y cualquier clase que se llame así lo hereda. Por eso los nombres de aquí
     empiezan todos por `ac-`.
*/

/* Las seis casillas. Grid y no flex: con `1fr` cada casilla mide EXACTAMENTE
   lo mismo, y el ancho lo pone el contenedor. Con flex, la casilla que tiene
   un dígito y la que está vacía se miden distinto en Safari y la fila baila
   mientras escribes. */
.ac-codigo {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.ac-codigo input {
    /* `width:100%` + `min-width:0` para que la casilla obedezca a su columna.
       Sin el min-width, un `input` tiene ancho intrínseco propio y las seis
       juntas desbordan el badge en cuanto la pantalla se estrecha. */
    width: 100%;
    min-width: 0;
    padding: 13px 0;
    text-align: center;
    font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    transition: background .15s ease, border-color .15s ease;
    -moz-appearance: textfield;
}

.ac-codigo input::-webkit-outer-spin-button,
.ac-codigo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ac-codigo input:focus {
    outline: none;
    background: rgba(255, 255, 255, .17);
    border-color: rgba(255, 255, 255, .55);
}

/* Una casilla con dígito se distingue de una vacía sin leerla. */
.ac-codigo input.lleno { background: rgba(255, 255, 255, .17); border-color: rgba(255, 255, 255, .40); }

/* El temblor del código incorrecto. Corto y sin desplazar nada alrededor:
   `transform` no reflowea, así que el badge no se mueve. */
.ac-codigo.mal input { border-color: rgba(255, 122, 122, .75); }
.ac-codigo.mal { animation: acTiembla .34s ease; }
@keyframes acTiembla {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    45% { transform: translateX(5px); }
    70% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) { .ac-codigo.mal { animation: none; } }

/* A quién se le mandó el código. Va debajo del título, en pequeño. */
.ac-destino {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .66);
    text-align: center;
    margin: 0 0 4px;
    /* Un correo largo no puede ensanchar el badge ni sacar barra horizontal. */
    overflow-wrap: anywhere;
}
.ac-destino b { color: #fff; font-weight: 650; }

/* «Reenviar código», con su cuenta atrás. */
.ac-reenviar {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
    margin-top: 13px;
}
.ac-reenviar a { color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; }
.ac-reenviar a:hover { text-decoration: underline; }
.ac-reenviar .esperando { color: rgba(255, 255, 255, .42); cursor: default; }

/* La regla de la contraseña, bajo el par de campos. */
.ac-pista {
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .52);
    margin: 2px 2px 0;
}
.ac-pista.mal { color: #ff9a9a; }

/* ═══════════════════════════════════════════════════════════════════════════
   EL INTERIOR SE MUEVE; LA ACREDITACIÓN NO
   ═══════════════════════════════════════════════════════════════════════════

   Corrección de Hector del 2026-09-04: dentro de un mismo flujo (nombre →
   correo → contraseña → código) la acreditación NO debe subir y ser
   reemplazada. Ese gesto es fuerte y gastarlo cuatro veces seguidas lo
   convierte en ruido: deja de decir «has cambiado de sitio» y pasa a decir
   «has pulsado un botón». Se reserva para el cambio de flujo — entrar, crear
   cuenta, recuperar contraseña — y dentro de cada uno se mueve el contenido.

   ⚠ SE ANIMA `translate`, NO `transform`, Y NO ES UN CAPRICHO.
     `encajar()` escribe `style.transform = 'scale(…)'` en ESTE MISMO elemento
     para que el contenido quepa en la ventana del PNG. Una animación sobre
     `transform` machacaría esa escala mientras dura y la devolvería de golpe al
     acabar: la pantalla daría un salto de tamaño en cada paso, y sólo en las
     pantallas que necesitan encogerse — o sea, en el móvil y no en el
     escritorio, que es como se cuela sin que nadie lo vea.

     `translate` es una propiedad independiente que COMPONE con `transform` en
     vez de sustituirlo. Las dos conviven sin tocarse.
*/
.aw-body.ac-entra  { animation: acEntra .26s cubic-bezier(.22,.61,.36,1) both; }
.aw-body.ac-vuelve { animation: acVuelve .26s cubic-bezier(.22,.61,.36,1) both; }

@keyframes acEntra {
    from { opacity: 0; translate: 0 12px; }
    to   { opacity: 1; translate: 0 0; }
}
/* Hacia atrás entra desde arriba: el sentido del movimiento es la única pista
   de que estás retrocediendo, ahora que la acreditación ya no se mueve. */
@keyframes acVuelve {
    from { opacity: 0; translate: 0 -12px; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .aw-body.ac-entra, .aw-body.ac-vuelve { animation: none; }
}