/* =====================================================================
   TakeData · páginas de acceso (sistema v2)
   Iniciar sesión, crear cuenta, confirmar la cuenta y restablecer la
   contraseña comparten carcasa: a la izquierda, el formulario en una
   tarjeta; a la derecha, la prueba del producto (el plano de Gràcia y la
   ficha del informe de ejemplo, como en la portada) con lo que recibes, el
   precio y las garantías. En el móvil, el formulario primero.
   Se carga DESPUÉS de components.css y solo usa sus tokens: aquí no se
   define ningún color nuevo.
   ===================================================================== */

/* styles.css pone márgenes a títulos, párrafos y listas: aquí cada bloque reparte su espacio */
.acceso :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.acceso :where(ul, ol) { padding: 0; list-style: none; }

/* ---------- Carcasa: dos columnas en escritorio, una en el móvil ---------- */
.acceso { background: var(--surface-1); }
.acceso__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 31rem) minmax(0, 1fr);
  gap: var(--sp-7) var(--sp-8);
  align-items: start;
  padding-block: var(--sp-7) var(--sp-8);
}
/* La tarjeta arranca a la altura del plano, no de su título: el formulario queda arriba
   aunque la pantalla sea baja (centrarlo en vertical lo empujaba hacia abajo) */
.acceso__formulario { margin-top: calc(var(--fs-h3) * 1.3 + var(--sp-5)); }
/* Formularios largos (registro): la prueba se queda a la vista mientras se baja */
.acceso--largo .acceso__prueba { position: sticky; top: calc(var(--navbar-h, 64px) + var(--sp-5)); }

/* ---------- Tarjeta del formulario ---------- */
.acceso__tarjeta {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-radius: var(--r-4);
  box-shadow: var(--e-1);
}
.acceso__cabeza { display: grid; gap: var(--sp-2); }
.acceso__cabeza h1 { font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2rem); line-height: 1.15; }
.acceso__entradilla { color: var(--ink-500); }
/* Al título de cada estado le llega el foco por código: sin recuadro alrededor */
.acceso [tabindex="-1"]:focus { outline: none; }

/* Icono de estado sobre el título (correo enviado, cuenta confirmada, enlace caducado) */
.acceso__icono {
  justify-self: start;
  width: 48px; height: 48px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--teal-50); color: var(--teal-700);
}
.acceso__icono .ic { width: 24px; height: 24px; }
.acceso__icono .gira { animation: acceso-gira 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .acceso__icono .gira { animation: none; } }
.acceso__icono--ok { background: var(--ok-bg); color: var(--ok-ink); }
.acceso__icono--err { background: var(--err-bg); color: var(--err-ink); }

/* Avisos: icono y texto (el aviso del sistema reserva una tercera columna para un botón) */
.acceso .aviso { grid-template-columns: 20px minmax(0, 1fr); }
.aviso__cuerpo { display: grid; gap: var(--sp-2); min-width: 0; }
.aviso__cuerpo .btn { justify-self: start; }
.aviso__cuerpo a { color: inherit; font-weight: 600; }

/* ---------- Formulario ---------- */
.acceso__form { display: grid; gap: var(--sp-5); }
.acceso__form .field + .field { margin-top: 0; }
.acceso__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
.field__error .ic { margin-top: 2px; }
.field__hint--ok { color: var(--ok-ink); font-weight: 500; }

/* Un botón que se lee como un enlace dentro de una frase («vuelve a enviármelo») */
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--teal-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-button:hover { color: var(--teal-800); }
.link-button:disabled { color: var(--ink-500); text-decoration: none; cursor: default; }

/* Estado tras enviar (correo enviado, cuenta confirmada…): sustituye al formulario */
.acceso__hecho { display: grid; gap: var(--sp-3); }
.acceso__hecho h1, .acceso__hecho h2 { font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.75rem); line-height: 1.2; margin-top: var(--sp-1); }
.acceso__hecho .acceso__acciones, .acceso__hecho .acceso__form, .acceso__hecho .acceso__alterna { margin-top: var(--sp-2); }
/* Pasos de una página (restablecer la contraseña): uno a la vista cada vez. La entradilla
   de cada paso va pegada al título, como en las demás páginas */
.acceso__paso { display: grid; gap: var(--sp-5); }
.acceso__paso > .acceso__entradilla:first-child { margin-top: calc(var(--sp-2) - var(--sp-5)); }
.acceso__nota { font-size: var(--fs-sm); color: var(--ink-500); }
.acceso__estado { font-size: var(--fs-sm); font-weight: 500; color: var(--ok-ink); }

/* Contraseña con «Mostrar» dentro del campo */
.campo-clave { position: relative; }
.campo-clave .input { padding-right: 6rem; }
.campo-clave__ver { position: absolute; top: 50%; right: var(--sp-1); transform: translateY(-50%); }

/* Recordarme y ¿Olvidaste tu contraseña?, en una fila */
.acceso__opciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); }
.acceso__opciones a { font-size: var(--fs-sm); font-weight: 600; }

/* Casillas: el enlace de un consentimiento se distingue por algo más que el color */
.check a { color: var(--teal-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.check input[aria-invalid="true"] { outline: 2px solid var(--err-ink); outline-offset: 2px; }

/* Código promocional plegado: se abre solo si llega en el enlace (?codigo=) */
.acceso__codigo summary {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 32px; cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--teal-700);
}
.acceso__codigo summary::-webkit-details-marker { display: none; }
.acceso__codigo summary:hover { color: var(--teal-800); }
.acceso__codigo summary .ic { transition: transform var(--dur) var(--ease); }
.acceso__codigo[open] summary .ic { transform: rotate(180deg); }
.acceso__codigo[open] summary { margin-bottom: var(--sp-3); }
/* El código va en mayúsculas; la pista, no */
.input--codigo { text-transform: uppercase; }
.input--codigo::placeholder { text-transform: none; }

/* Captcha, espera y botón: un solo bloque, para que lo que está vacío no deje hueco.
   Turnstile (appearance: 'interaction-only') solo enseña el widget si hace falta. */
.acceso__enviar { display: grid; }
.captcha-slot { margin: 0; }
.captcha-slot.is-visible { margin-bottom: var(--sp-4); }
.acceso__enviar > .field__error { margin-bottom: var(--sp-3); }
.cargando {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-500);
}
.cargando .ic { animation: acceso-gira 1s linear infinite; }
@keyframes acceso-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cargando .ic { animation: none; } }

/* Fila de email y botón (pedir un enlace nuevo) */
.acceso__linea-envio { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.acceso__linea-envio .input { flex: 1 1 14rem; min-width: 0; width: auto; }
.acceso__linea-envio .btn { flex: 0 0 auto; }

/* Botones de un estado (verificación, contraseña cambiada) */
.acceso__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Enlace a la otra puerta («¿No tienes cuenta?», «¿Ya tienes cuenta?») */
.acceso__alterna {
  padding-top: var(--sp-4); border-top: 1px solid var(--line-200);
  text-align: center; font-size: var(--fs-sm); color: var(--ink-500);
}
.acceso__alterna a { font-weight: 600; }

/* Medidor de la contraseña nueva: el nivel lo pone el script en data-nivel */
.medidor { display: grid; gap: var(--sp-1); }
.medidor__barra { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.medidor__relleno { height: 100%; width: 0; background: var(--err-ink); transition: width var(--dur) var(--ease); }
.medidor__texto { font-size: var(--fs-sm); font-weight: 600; min-height: 1.4em; color: var(--ink-500); }
.medidor[data-nivel="debil"] .medidor__relleno { background: var(--err-ink); }
.medidor[data-nivel="regular"] .medidor__relleno { background: var(--afl-3); }
.medidor[data-nivel="buena"] .medidor__relleno { background: var(--teal-700); }
.medidor[data-nivel="fuerte"] .medidor__relleno { background: var(--ok-ink); }
.medidor[data-nivel="debil"] .medidor__texto { color: var(--err-ink); }
.medidor[data-nivel="regular"] .medidor__texto { color: var(--warn-ink); }
.medidor[data-nivel="buena"] .medidor__texto { color: var(--teal-700); }
.medidor[data-nivel="fuerte"] .medidor__texto { color: var(--ok-ink); }

/* Hueco de los avisos de un paso: vacío, no ocupa sitio */
.acceso__mensaje:empty { display: none; }

/* ---------- Prueba del producto: plano, ficha y tres líneas ---------- */
/* Contenedor: la ficha decide si sus tres cifras caben en fila por el ancho de esta columna,
   no por el de la ventana (en un portátil a 1024-1100 px la columna es estrecha) */
.acceso__prueba { display: grid; gap: var(--sp-5); align-content: start; container-type: inline-size; }
.acceso__prueba .chapter-title h2 { font-size: var(--fs-h3); line-height: 1.3; }

.muestra { display: grid; }
.muestra__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 42%;
  border: 1px solid var(--line-200); border-radius: var(--r-4); background: var(--surface-1);
}
/* La ficha del informe de ejemplo (components.css) flota sobre el pie del plano, como en la portada */
.muestra .ficha-ejemplo { position: relative; margin: calc(-1 * var(--sp-8)) var(--sp-5) 0; }

.acceso__lineas { display: grid; gap: var(--sp-3); }
.acceso__lineas li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.acceso__lineas .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--teal-700); }
.acceso__lineas p { color: var(--ink-700); }
.acceso__lineas strong { color: var(--ink-900); font-weight: 600; }

/* Columna estrecha: las tres cifras, una debajo de otra y la cifra a la izquierda */
@container (max-width: 34rem) {
  .ficha-ejemplo .kpis { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .ficha-ejemplo .kpi { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto; column-gap: var(--sp-4); align-items: baseline; }
  .ficha-ejemplo .kpi__valor { grid-row: span 2; }
}

/* ---------- Portátil pequeño: la tarjeta cede sitio a la prueba ---------- */
@media (max-width: 1199px) {
  .acceso__rejilla { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: var(--sp-7); }
}

/* ---------- Tableta y móvil: una columna, el formulario primero ---------- */
@media (max-width: 1023px) {
  .acceso__rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); padding-block: var(--sp-6) var(--sp-7); }
  .acceso__formulario, .acceso__prueba { width: 100%; max-width: 36rem; justify-self: center; }
  .acceso__formulario { margin-top: 0; }
  .acceso--largo .acceso__prueba { position: static; }
}
@media (max-width: 560px) {
  .acceso__rejilla { padding-block: var(--sp-4) var(--sp-7); gap: var(--sp-6); }
  .acceso__tarjeta { padding: var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--r-3); }
  .acceso__fila { grid-template-columns: minmax(0, 1fr); }
  .acceso__acciones .btn, .acceso__linea-envio .btn { width: 100%; }
  .muestra .ficha-ejemplo { margin: calc(-1 * var(--sp-6)) var(--sp-3) 0; padding: var(--sp-4); }
  /* Sin consultas de contenedor, las cifras se apilan igual: components.css lo hace a 560 px */
}