/* recuperar.css — casi todo se peina solo.

   El formulario usa `.campo`, `.btn`, `.error` y `.aviso`, que ya existen como
   componentes. Lo único propio son dos cosas que no se repiten en ninguna otra
   vista, y por eso viven aquí y no en `componentes/`: el acuse de que el
   código salió, y el campo del código, que se lee mejor con los seis dígitos
   separados y grandes.

   Si mañana hace falta un segundo código en otra pantalla —confirmar el correo,
   por ejemplo— `.codigo` se sube a `componentes/`. Hoy no, y sacarlo antes de
   tener el segundo uso es adivinar. */

#vista-recuperar .campo-acciones { margin-top: 1rem; }

/* El acuse. No es un error ni un aviso: es la confirmación de que algo salió,
   así que va en el color de marca y no en `--acento`, que en esta página es el
   de advertencia (ver `componentes/aviso/aviso.css`). Distinguirlos importa:
   la caja de arriba y esta pueden salir a la vez. */
.acuse{
  background:var(--brand-suave);
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius:var(--radio); padding:.8rem 1rem; font-size:.9rem;
  margin:0 0 1.2rem;
}

/* Seis dígitos que se copian de un correo y se comparan con la vista. Con la
   tipografía normal, `111111` y `11111` se distinguen mal; con espaciado y
   ancho fijo, se cuentan de un vistazo. */
#r-codigo{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:1.5rem; letter-spacing:.35em; text-align:center;
}

/* El código entra en mayúsculas o con espacios copiado del correo; el JS lo
   limpia, pero mientras se escribe conviene que se vea centrado y ancho.
   A 390 px el `letter-spacing` desborda si el campo no encoge. */
@media (max-width: 420px){
  #r-codigo{ font-size:1.25rem; letter-spacing:.25em; }
}