/* cuenta.css — páginas sin sesión de una sola columna (spec 13): entrar, alta por correo, recuperar la
   contraseña, mensajes y «muy pronto». Requiere marca.css y base.css. Solo tokens. */
main { max-width:400px; margin:0 auto; padding:16px 0 40px; }
.volver { color:var(--color-texto-suave); text-decoration:none; font-size:15px; }
main > .marca { display:block; text-align:center; font-size:26px; margin:28px 0 20px; }
h1 { font-size:24px; font-weight:var(--peso-titulo); letter-spacing:var(--interletra-titulo); text-align:center;
     margin:0 0 16px; }

/* Formularios */
label { display:block; font-weight:600; font-size:15px; margin:14px 0 6px; }
input[type=text], input[type=email], input[type=password] { width:100%; padding:12px 14px; font:inherit;
       color:var(--color-texto); background:var(--color-superficie); border:1px solid var(--color-borde-campo);
       border-radius:var(--radio); }
input:focus { outline:2px solid var(--color-acento); outline-offset:1px; }
.ayuda { color:var(--color-texto-suave); font-size:13px; margin:6px 0 0; }
button.principal { width:100%; margin:22px 0 0; padding:14px; font:700 16px/1 inherit; color:var(--color-acento-texto);
       background:var(--color-acento); border:0; border-radius:var(--radio-medio); cursor:pointer; }
button.principal:disabled { opacity:.45; cursor:not-allowed; }
.pie { text-align:center; margin:22px 0 0; font-size:15px; }
/* Verificación humana de Cloudflare (spec 08 §2.6, spec 13 §4b): invisible si no duda. */
.cf-turnstile { margin-top:18px; }
.cf-turnstile:empty { margin:0; }
.casilla { display:flex; align-items:center; gap:10px; font-weight:500; margin-top:16px; }
.casilla input { width:20px; height:20px; accent-color:var(--color-acento); }
.etiqueta-fila { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.etiqueta-fila label { margin-bottom:6px; }
.etiqueta-fila a { font-size:14px; font-weight:600; text-decoration:none; }

/* Requisitos de la contraseña con barra de avance (static/js/contrasena.js) */
.avance { height:6px; background:var(--color-borde-campo); border-radius:3px; overflow:hidden; margin:10px 0 8px; }
.avance i { display:block; height:100%; width:0; background:var(--color-error); transition:width .2s, background .2s; }
.avance.medio i { background:var(--color-progreso-medio); }
.avance.listo i { background:var(--color-acento); }
.avance.espera i { background:var(--color-progreso-espera); }
.requisitos { list-style:none; padding:0; margin:0; font-size:14px; color:var(--color-texto-suave); }
.requisitos li { padding-left:24px; position:relative; margin:3px 0; }
.requisitos li::before { content:"○"; position:absolute; left:4px; }
.requisitos li.ok { color:var(--color-acento); }
.requisitos li.ok::before { content:"✓"; font-weight:700; }

/* Correo sin confirmar (entrar) */
.pendiente { background:var(--color-acento-suave); border:1px solid var(--color-acento); border-radius:var(--radio);
             padding:12px 14px; margin:16px 0 0; font-size:15px; }
.pendiente p { margin:0 0 8px; }
.pendiente button { background:none; border:0; padding:0; color:var(--color-acento); font:700 15px/1.4 inherit;
                    cursor:pointer; text-decoration:underline; }

/* «Muy pronto» */
main.pronto { max-width:480px; padding:64px 0; }
.tarjeta { background:var(--color-superficie); border-radius:var(--radio-grande); padding:28px 24px; }
.tarjeta h1 { text-align:left; margin:0 0 8px; }
.tarjeta p { color:var(--color-texto-suave); margin:0 0 16px; }
.tarjeta a { font-weight:600; }

/* Página de mensaje (éxito, aviso o error): tarjeta con ícono, título, una frase y un botón (spec 13 §3b) */
.mensaje-tarjeta { background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:var(--radio-medio);
                   padding:28px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.mensaje-tarjeta h1 { margin:4px 0 0; font-size:22px; line-height:1.25; }
.mensaje-tarjeta p { margin:0; font-size:16px; line-height:1.5; color:var(--color-texto); }
.mensaje-tarjeta .boton { display:block; margin-top:8px; width:100%; max-width:280px; padding:14px; border-radius:var(--radio);
                         background:var(--color-acento); color:var(--color-acento-texto); font:700 16px/1 var(--fuente);
                         text-decoration:none; text-align:center; }
.mensaje-tarjeta .secundario { font-size:15px; }
.mensaje-icono { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; }
.mensaje-icono svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mensaje-tarjeta.error { border-color:var(--color-error); }
.mensaje-tarjeta.error .mensaje-icono { background:var(--color-error-suave); color:var(--color-error); }
.mensaje-tarjeta.aviso .mensaje-icono { background:var(--color-aviso-suave); color:var(--color-aviso); }
.mensaje-tarjeta.exito .mensaje-icono { background:var(--color-acento-suave); color:var(--color-acento); }