/* verificacion.css — el bloque de verificación del correo dentro del alta.

   Es el único sitio de la página donde se piden datos que en la vida real
   serían sensibles, así que va visualmente separado del resto del formulario:
   quien lo rellena tiene que darse cuenta de que esto no es «un campo más». */

.verificacion{
  border:1px solid var(--line); border-radius:var(--radio);
  padding:1rem 1.1rem; margin-bottom:1.15rem; background:var(--card);
}
.verificacion > h3{font-size:1rem; margin-bottom:.2rem}

/* La advertencia de que esto es una maqueta y no hay que subir una cédula de
   verdad. En rojo, no en el azul del resto de avisos: los avisos informan,
   este pide que NO hagas algo. */
.verificacion .no-subas{
  border:1px solid color-mix(in srgb, #c0392b 40%, transparent);
  background:color-mix(in srgb, #c0392b 8%, transparent);
  border-radius:10px; padding:.7rem .85rem; margin:.6rem 0 1rem; font-size:.87rem;
}
.verificacion .no-subas strong{color:#c0392b}
@media (prefers-color-scheme:dark){ .verificacion .no-subas strong{color:#ff9a8f} }
.verificacion .no-subas p{margin:0}

.verificacion .paso{margin-top:1.1rem}
.verificacion .paso > label{display:block; font-weight:600; font-size:.92rem; margin-bottom:.35rem}

/* El resultado de comprobar el número, debajo del campo. */
.verificacion .dictamen{display:block; font-size:.83rem; margin-top:.35rem}
.verificacion .dictamen.bien{color:var(--acento)}
.verificacion .dictamen.mal{color:#c0392b}
@media (prefers-color-scheme:dark){ .verificacion .dictamen.mal{color:#ff9a8f} }

/* Cuando ya está verificada, todo el bloque se sustituye por esta línea: no se
   vuelve a pedir la cédula cada vez que alguien edita su descripción. */
.verificacion .hecha{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.verificacion .hecha .mascara{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.9rem}

/* El código que este servidor no puede mandar por correo, dentro del aviso de
   que no lo manda. Grande y tabular porque hay que teclearlo mirándolo. */
.verificacion .codigo-prueba{
  font-variant-numeric:tabular-nums; letter-spacing:.15em;
  font-size:1.15rem; white-space:nowrap;
}