/* =====================================================================
   cuenta_v2.css — F3/F4 del plan IMPLEMENTACION_PUBLICA_UX.md
   Pantallas de cuenta servidas por la app: registro, olvido y reset.

   Se carga DESPUES de landing_v3.css y solo agrega lo que esas tres
   pantallas necesitan: la caja centrada, los mensajes de error bajo el
   campo y el detalle de los requisitos de contrasenia. Todo lo demas
   —tokens, .campo, .btn, el encabezado— viene de la hoja de la landing,
   que es lo que hace que se vean como la misma casa.

   REGLA DEL PROYECTO: el bucket es compartido con produccion y los assets
   no se sobrescriben, de ahi el _v2: el _v1 se publico antes de que F4
   agregara las paginas legales. El siguiente cambio sera _v3.
   ===================================================================== */

.cuenta { max-width: 520px; margin: 0 auto; padding: 36px 20px 64px; }
.cuenta .tarjeta {
  background: var(--blanco);
  border: 1px solid #E7E7E2;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 28px 24px;
}
.cuenta h1 { font-size: clamp(22px, 3.4vw, 28px); line-height: 1.2; margin-bottom: 6px; }
.cuenta .lead { margin-bottom: 22px; }
.cuenta form { display: grid; gap: 16px; }
.cuenta .campo input { width: 100%; }
.cuenta .btn { width: 100%; }
.cuenta .volver { display: block; text-align: center; margin-top: 20px; }

/* El correo del reset llega en el enlace y no se edita: que se vea que
   es un dato, no un campo por llenar. */
.cuenta input[readonly] { background: var(--crema); color: var(--gris); }

/* Ayudas y errores.
   #B3261E sobre blanco da 6,4:1 — el rojo "de sistema" (#FF0000) se queda
   en 4:1 y no pasa AA para texto normal. El error ademas NO se anuncia
   solo con color: lleva su texto bajo el campo y el campo queda marcado
   con aria-invalid. */
.cuenta .ayuda { font-size: 13px; color: var(--gris); }
.cuenta .error { color: #B3261E; font-size: 13.5px; font-weight: 600; }
.cuenta .error:empty { display: none; }
.cuenta .campo input[aria-invalid="true"] { border-color: #B3261E; }

/* Requisitos de la contrasenia: visibles ANTES de escribir, no como
   regaño despues de fallar. */
.cuenta .requisitos { font-size: 13px; color: var(--gris); margin: 0; padding-left: 18px; }
.cuenta .requisitos li { margin: 2px 0; }

/* Mientras el navegador postea, el boton se apaga: sin esto un doble clic
   manda dos registros. */
.cuenta .btn[disabled] { opacity: .6; cursor: progress; }

/* mensaje1.ejs (confirmaciones "recibira un correo...") usa la misma caja. */
.cuenta .mensaje { white-space: pre-line; margin-bottom: 22px; }

/* ============ F4: paginas legales (privacidad y terminos) ============
   Texto largo para leer, no un formulario: columna mas ancha que la de las
   pantallas de cuenta pero con medida de lectura (unos 75 caracteres), y
   jerarquia clara para poder saltar por titulos. */
.legal { max-width: 760px; }
.legal .tarjeta { padding: 32px 28px; }
.legal h2 { font-size: 21px; margin: 28px 0 10px; }
.legal h2:first-of-type { margin-top: 18px; }
.legal h3 { font-size: 16.5px; margin: 18px 0 6px; }
.legal p, .legal li { color: var(--gris); margin-bottom: 10px; }
.legal ul, .legal ol { padding-left: 20px; margin-bottom: 12px; }
.legal .fecha { font-size: 13.5px; color: var(--gris); }
.legal a { text-decoration: underline; }

/* El aviso de BORRADOR va arriba y se ve: mientras el texto no lo revise un
   abogado, quien lo lea tiene que saberlo. Amarillo de marca sobre tinta:
   14,4:1, y ademas lo dice con palabras, no solo con color. */
.legal .borrador {
  background: #FFF8C4;
  border: 1px solid #E0D48A;
  border-left: 4px solid #B58900;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 22px;
  color: var(--tinta);
}
/* Lo que falta por confirmar se marca en el texto y salta a la vista. */
.legal .pendiente {
  background: #FFF8C4;
  border-bottom: 1px dashed #B58900;
  padding: 0 3px;
  font-weight: 600;
  color: #6B5200;
}