/* ============================================================
   luzgasia — area.css
   Área privada de cliente (contratación): pedir enlace + panel con
   tarjetas de documentos agrupadas y checklist lateral (espíritu iAhorro,
   identidad luzgasia). Mobile-first. Reutiliza tokens.css y base.css.

   Rendimiento: animaciones solo con transform/opacity (GPU). Sin hacks de
   z-index (escala de --capa-* de tokens.css).
   ============================================================ */

.pagina-area {
  background: var(--c-fondo-suave);
}

/* Contenedor ANCHO del tablero: el área de cliente usa casi todo el viewport
   (dashboard izq-derecha), no la tarjeta estrecha del funnel. Se acota en
   monitores enormes para que las líneas no queden ilegibles. */
.area-shell {
  width: 100%;
  max-width: min(90rem, 100%);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ============================ Pedir enlace (acceso) ============================ */
/* ==== Puerta de acceso (rediseño 2026-08-09) ====
   Sobre el fondo compartido de acceso.css: tarjeta ANCHA en dos paneles
   (identidad navy | formulario), centrada en el viewport. El ancho es
   dinámico — nada de columna estrecha con scroll. */
.pagina-area--acceso { background: transparent; }

/* La puerta ya NO flota en medio de un viewport entero.
   ---------------------------------------------------------------------------
   Medido a 1366x768: la caja medía 696 px y la tarjeta 557 -> 69 px muertos
   arriba y 69 abajo. Y como el pie va debajo (508 px), la página scrolleaba
   igual: ese centrado no compraba nada y a 1280x720 empujaba «Volver a
   luzgasia» debajo del aviso de cookies. Petición del dueño (2026-08-15): «que
   esté más cerca del límite superior, no dejes tanto espacio» — y también en
   pantalla grande, no solo con el navegador estrecho, por eso se quita el
   `min-height` en vez de meter una media query. */
.area-acceso {
  display: grid;
  align-items: start;
  padding-block: var(--esp-5) var(--esp-8);
  /* La puerta OCUPA el viewport aunque la tarjeta vaya arriba: así el footer
     queda BAJO el pliegue y solo aparece al scrollear (petición del dueño,
     2026-08-15 — «login es lo principal, y si scrolea mágicamente sale el
     footer»). No es el centrado de antes: la tarjeta sigue pegada arriba;
     esto solo estira la sección para empujar lo que viene después. */
  min-height: calc(100dvh - 4.5rem);
}

/* La entrada del footer, solo en las puertas del área: sube y se enciende a
   medida que entra en pantalla. Scroll-driven puro tras las DOS puertas de la
   casa; sin soporte (o con reduced-motion) el footer simplemente está, que es
   lo de siempre — el estado oculto vive DENTRO de la puerta. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pagina-area--acceso .lz-pie {
      animation: area-pie-entra both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes area-pie-entra {
      from { opacity: 0.15; translate: 0 48px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
}

.area-acceso__tarjeta {
  width: min(100%, 60rem);
  margin-inline: auto;
  /* Lienzo NAVY con borde AZUL (2026-08-10): con el fondo blanco de la
     tarjeta asomaba un filo blanco alrededor de la zona azul. El lado
     claro lo pinta .area-acceso__forma. */
  background: var(--c-marino-900);
  border: 1px solid color-mix(in srgb, var(--lg-blue) 45%, transparent);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-2);
  overflow: clip;
  display: grid;
}
@media (min-width: 60rem) {
  .area-acceso__tarjeta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Panel de identidad: navy, con la nota de seguridad a la vista. */
.area-acceso__lado {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--esp-3);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background:
    radial-gradient(120% 100% at 0% 0%, var(--c-marino-800), transparent 65%),
    var(--c-marino-900);
  color: var(--c-blanco);
}
.area-acceso__lado .area-nota-seguridad {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  margin-top: var(--esp-2);
}
.area-acceso__lado .area-acceso__volver { color: var(--c-amarillo-400); margin-top: 0; }

/* El lado claro CENTRA su contenido y separa sus bloques. Sin esto, en la
   pantalla de confirmación —que tiene poco que decir— todo se apelotonaba
   arriba (el aviso pegado al botón, sin aire para leerlo antes de pulsar) y
   dejaba media columna vacía debajo: el hueco muerto que prohíbe la regla de
   composición «recuadro completo» (§6.5). El `gap` no afecta a la puerta con
   pestañas, que ya llena su columna. */
/* Panel claro. El lado NAVY es el que fija el alto de la tarjeta, así que aquí
   sobra sitio: con `align-content: center` ese sobrante se partía en dos
   márgenes iguales arriba y abajo (31 px medidos a 1600x900) y dejaba la nota
   de «¿Aún no tienes contraseña?» flotando lejos del borde.

   En columna flexible el sobrante se lo lleva ENTERO la botonera con sus
   paneles (`flex: 1`), que por dentro lo reparte como separación entre título,
   intro, formulario y ayuda. Resultado: la nota baja hasta el borde y solo
   queda el padding de la tarjeta — «un espacio, pero mínimo» (petición del
   dueño). El aviso de error, cuando lo hay, conserva su alto natural. */
.area-acceso__forma {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  text-align: left;
  background: var(--c-blanco);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}
.area-acceso__forma > .area-tabs { flex: 1; min-height: 0; }
/* El aviso es lo ÚLTIMO que se lee antes de entrar en una cuenta: necesita su
   propio aire, no ir pegado al botón que lo confirma. */
.area-acceso__forma > .alerta { margin: 0; }
.area-acceso__forma > .area-acceso__campos { margin-top: var(--esp-2); }

.area-acceso__sello {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50% 50% 50% 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-amarillo-400);
  margin-bottom: var(--esp-2);
}

.area-acceso__sello svg { width: 1.6rem; height: 1.6rem; }

.area-acceso__titulo {
  font-size: var(--texto-2xl);
  color: inherit;
}

.area-acceso__intro {
  margin: 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--texto-m);
}

.area-acceso__form {
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--c-borde);
  text-align: left;
}

.area-acceso__form-titulo { font-size: var(--texto-l); color: var(--c-marino-900); }
.area-acceso__form-intro { margin: var(--esp-1) 0 var(--esp-4); color: var(--c-texto-suave); font-size: var(--texto-s); }

.area-acceso__campos {
  display: grid;
  gap: var(--esp-3);
}

/* Con sitio de sobra, el login reparte email y contraseña en dos columnas
   y el botón cierra a lo ancho. Los formularios de UN campo (enlace,
   olvido) van apilados a ancho completo: meter el botón en la misma fila
   estrangulaba el campo (bug 2026-08-09). */
@media (min-width: 48rem) {
  #panel-login .area-acceso__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #panel-login .area-acceso__campos .boton { grid-column: 1 / -1; }
  /* El reto (Turnstile) va a lo ancho como el botón: si no, quedaría en media
     columna con la otra mitad vacía. Solo aplica cuando el captcha está
     encendido (el parcial no pinta nada apagado). */
  #panel-login .area-acceso__campos .reto-captcha { grid-column: 1 / -1; }
}

.area-acceso__campos .boton { width: 100%; }

/* El botón de entrar es la acción de la pantalla: se le da cuerpo y un gesto
   propio al pulsar. Solo `transform`/`box-shadow` (GPU) y todo tras la puerta
   de motion, como el resto de la casa. */
.area-acceso__campos .boton--primario {
  border-radius: var(--radio-pill);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-amarillo-500) 32%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .area-acceso__campos .boton--primario {
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  .area-acceso__campos .boton--primario:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--c-amarillo-500) 42%, transparent);
  }
  .area-acceso__campos .boton--primario:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--c-amarillo-500) 30%, transparent);
  }
}

.area-acceso__volver {
  display: inline-block;
  margin-top: var(--esp-5);
  color: var(--c-marino-700);
  font-weight: 700;
  font-size: var(--texto-s);
}

/* ============================ Nota de seguridad ============================ */
.area-nota-seguridad {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin-top: var(--esp-5);
  padding: var(--esp-3) var(--esp-4);
  background: var(--c-marino-50);
  border-radius: var(--radio-m);
  color: var(--c-texto-suave);
  font-size: var(--texto-s);
  text-align: left;
}

.area-nota-seguridad svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.15rem; color: var(--c-marino-700); }
.area-nota-seguridad--compacta { margin-top: var(--esp-3); padding: var(--esp-2) var(--esp-3); font-size: var(--texto-xs); }

/* ============================ Cabecera del panel ============================ */
.area-cab {
  padding-top: clamp(1.25rem, 4vw, 2.25rem);
}

.area-cab__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.area-cab__saludo {
  font-size: var(--texto-xl);
  color: var(--c-marino-900);
  display: inline;
  margin-right: var(--esp-3);
}

.area-cab__intro {
  margin-top: var(--esp-3);
  color: var(--c-texto-suave);
  font-size: var(--texto-m);
  max-width: 46rem;
}

.area-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radio-pill);
  font-size: var(--texto-xs);
  font-weight: 700;
  border: 1px solid transparent;
  vertical-align: middle;
}

.area-badge--progreso { background: #e8f0fc; border-color: #b9d0f2; color: #164a93; }
.area-badge--ok { background: var(--c-exito-fondo); border-color: #a8dcc3; color: var(--c-exito); }

.area-salir {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radio-pill);
  border: 1.5px solid var(--c-borde-fuerte);
  color: var(--c-marino-800);
  font-weight: 700;
  font-size: var(--texto-s);
  transition: border-color var(--trans-rapida), background-color var(--trans-rapida);
}

.area-salir:hover { border-color: var(--c-marino-800); background: var(--c-blanco); }
.area-salir svg { width: 1.05rem; height: 1.05rem; }

/* ============================ Tablero (lateral + pestañas) ============================ */
.area-tablero {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

@media (min-width: 64rem) {
  .area-tablero {
    /* Lateral "lo que falta" a la izquierda; pestañas + contenido a la derecha. */
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  }
}

.area-principal {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  min-width: 0;
}

/* --- Panel lateral "lo que falta" (siempre visible; sticky en desktop) --- */
.area-lateral { min-width: 0; }

.area-lateral__caja {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
  padding: var(--esp-5);
}

@media (min-width: 64rem) {
  .area-lateral { align-self: start; position: sticky; top: calc(var(--altura-cabecera) + 1rem); }
}

.area-lateral__titulo { font-size: var(--texto-l); color: var(--c-marino-900); }
.area-lateral__intro { margin: var(--esp-4) 0 var(--esp-3); font-size: var(--texto-s); color: var(--c-texto-suave); }
.area-lateral__nota { margin-top: var(--esp-4); font-size: var(--texto-xs); color: var(--c-texto-suave); }

.area-progreso { margin-top: var(--esp-4); }

.area-progreso__cabecera {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}

.area-progreso__pct {
  font-size: var(--texto-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--c-marino-900);
  font-variant-numeric: tabular-nums;
}

.area-progreso__barra {
  height: 8px;
  border-radius: var(--radio-pill);
  background: var(--c-marino-100);
  overflow: hidden;
}

.area-progreso__relleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-marino-700), var(--c-amarillo-500));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--trans-media);
}

.area-progreso__texto {
  font-size: var(--texto-s);
  font-weight: 700;
  color: var(--c-marino-800);
}

.area-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-1); }

.area-req { font-size: var(--texto-s); color: var(--c-texto-suave); }

/* Fila-botón: salta a la pestaña donde se resuelve el requisito (accesible). */
.area-req__salto {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2);
  border: 0;
  border-radius: var(--radio-m);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background-color var(--trans-rapida);
}

.area-req__salto:hover { background: var(--c-marino-50); }
.area-req__salto:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 2px; }

.area-req__icono {
  position: relative;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid var(--c-borde-fuerte);
  background: var(--c-blanco);
  transition: background-color var(--trans-rapida), border-color var(--trans-rapida);
}

.area-req__punto {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--c-borde-fuerte);
}

.area-req__check {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--c-blanco);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--trans-rapida), transform 260ms var(--rebote);
}

.area-req__texto { flex: 1; min-width: 0; }

/* Rótulo "en qué pestaña está" (solo visible mientras el req está pendiente). */
.area-req__pestana {
  flex: none;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radio-pill);
  background: var(--c-marino-50);
  border: 1px solid var(--c-marino-100);
  color: var(--c-marino-700);
  font-size: var(--texto-xs);
  font-weight: 700;
  transition: opacity var(--trans-rapida);
}

.area-req.aportado .area-req__texto { color: var(--c-marino-900); font-weight: 600; }
.area-req.aportado .area-req__icono { background: var(--c-exito); border-color: var(--c-exito); }
.area-req.aportado .area-req__punto { opacity: 0; }
.area-req.aportado .area-req__check { opacity: 1; transform: scale(1); }
.area-req.aportado .area-req__pestana { opacity: 0; pointer-events: none; }

/* ============================ Stepper de pestañas ============================ */
.area-pasos { min-width: 0; }

.area-pasos__lista {
  display: flex;
  gap: var(--esp-2);
  overflow-x: auto;
  padding-bottom: var(--esp-1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.area-paso {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--c-borde);
  border-radius: var(--radio-m);
  background: var(--c-blanco);
  color: var(--c-marino-800);
  font-weight: 700;
  font-size: var(--texto-s);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--sombra-1);
  transition: border-color var(--trans-rapida), background-color var(--trans-rapida), transform var(--trans-media), box-shadow var(--trans-rapida);
}

.area-paso:hover { border-color: var(--c-marino-700); transform: translateY(-1px); }
.area-paso:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 2px; }

.area-paso.es-activa {
  border-color: var(--c-marino-700);
  box-shadow: 0 0 0 1px var(--c-marino-700) inset, var(--sombra-1);
  color: var(--c-marino-900);
}

.area-paso__icono { flex: none; display: inline-flex; color: var(--c-marino-700); }
.area-paso__icono svg { width: 1.2rem; height: 1.2rem; }
.area-paso__texto { flex: 1; }

/* Indicador de estado por pestaña: check verde (completa) / punto ámbar
   (pendiente, con contador) / sin nada (opcional). */
.area-paso__estado {
  position: relative;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.area-paso__check {
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0.22rem;
  border-radius: 50%;
  background: var(--c-exito);
  color: var(--c-blanco);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--trans-rapida), transform 260ms var(--rebote);
}

.area-paso__punto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--c-aviso);
  opacity: 0;
  transition: opacity var(--trans-rapida);
}

.area-paso__cuenta {
  position: absolute;
  top: -0.5rem;
  right: -0.7rem;
  padding: 0.02rem 0.35rem;
  border-radius: var(--radio-pill);
  background: var(--c-aviso-fondo);
  border: 1px solid #ecd9a1;
  color: var(--c-aviso);
  font-size: 0.65rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: 0;
}

.area-paso.es-completa .area-paso__check { opacity: 1; transform: scale(1); }
.area-paso.es-pendiente .area-paso__punto { opacity: 1; }
.area-paso.es-pendiente .area-paso__cuenta { opacity: 1; }
.area-paso.es-pendiente { border-color: #ecd9a1; }
.area-paso.es-pendiente.es-activa { border-color: var(--c-marino-700); }

/* ============================ Panel de pestaña ============================ */
.area-paneles { min-width: 0; }
.area-tabpanel { min-width: 0; }
.area-tabpanel[hidden] { display: none; }
.area-tabpanel:focus-visible { outline: none; }

.area-tabpanel__cab { margin-bottom: var(--esp-4); }
.area-tabpanel__titulo { font-size: var(--texto-xl); color: var(--c-marino-900); }
.area-tabpanel__intro { margin: var(--esp-1) 0 0; color: var(--c-texto-suave); font-size: var(--texto-s); }

/* ============================ Tarjetas ============================ */
.area-tarjetas {
  display: grid;
  gap: var(--esp-4);
}

@media (min-width: 40rem) {
  .area-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-doc--ancha,
  .area-doc--informativa { grid-column: 1 / -1; }
}

.area-doc {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
  padding: var(--esp-5);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-media), transform var(--trans-media);
}

.area-doc.aportado { border-color: #a8dcc3; box-shadow: 0 0 0 1px #a8dcc3 inset, var(--sombra-1); }

.area-doc__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}

.area-doc__titulo { font-size: var(--texto-m); color: var(--c-marino-900); }
.area-doc__ayuda { margin: var(--esp-2) 0 var(--esp-4); color: var(--c-texto-suave); font-size: var(--texto-s); }
.area-doc--informativa .area-doc__ayuda { margin-bottom: 0; }

/* Las tarjetas de subida ESTRECHAS van en parejas (DNI por delante / por
   detrás) y estiran a la misma altura en su fila del grid. Pero la ayuda tiene
   distinto largo, así que el recuadro «Arrastra tu archivo» quedaba a distinto
   nivel entre las dos (se veía raro). Se hace la tarjeta una columna flex y la
   zona de subida se ancla ABAJO (`margin-top:auto`): las dos zonas quedan
   niveladas sin fijar alturas —robusto en los 6 idiomas— y la tarjeta más alta
   no cambia. Solo las estrechas: las `--ancha`/`--informativa` ocupan toda la
   fila y no tienen pareja con la que alinearse. */
.area-doc:not(.area-doc--ancha):not(.area-doc--informativa) {
  display: flex;
  flex-direction: column;
}
.area-doc:not(.area-doc--ancha):not(.area-doc--informativa) .area-subida {
  margin-top: auto;
}

/* Resalte cuando el usuario intenta finalizar y falta esta tarjeta */
@keyframes area-resalta {
  0%, 100% { box-shadow: var(--sombra-1); }
  25%, 75% { box-shadow: 0 0 0 3px var(--c-amarillo-500); }
}
.area-resalta { animation: area-resalta 1.1s ease; }

/* --- Badges de estado / tags --- */
.area-estado {
  flex: none;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radio-pill);
  font-size: var(--texto-xs);
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.area-estado--pend { background: var(--c-aviso-fondo); border-color: #ecd9a1; color: var(--c-aviso); }
.area-estado--ok { background: var(--c-exito-fondo); border-color: #a8dcc3; color: var(--c-exito); }

.area-tag {
  flex: none;
  padding: 0.1rem 0.55rem;
  border-radius: var(--radio-pill);
  font-size: var(--texto-xs);
  font-weight: 700;
}

.area-tag--obligatorio { background: var(--c-error-fondo); color: var(--c-error); }
.area-tag--opcional { background: var(--c-marino-50); color: var(--c-marino-700); border: 1px solid var(--c-marino-100); }

/* --- Máscara (dato guardado) --- */
.area-mascara {
  display: inline-flex;
  align-items: baseline;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
  padding: 0.35rem 0.75rem;
  background: var(--c-marino-50);
  border-radius: var(--radio-m);
  font-size: var(--texto-s);
}

.area-mascara__label { color: var(--c-texto-suave); font-size: var(--texto-xs); }
.area-mascara__valor { font-weight: 700; color: var(--c-marino-900); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* --- Datos autollenados --- */
.area-datos { display: grid; gap: var(--esp-3); margin: 0; }

@media (min-width: 30rem) { .area-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.area-datos div {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-m);
  padding: var(--esp-3) var(--esp-4);
}

.area-datos dt { font-size: var(--texto-xs); color: var(--c-texto-suave); }
.area-datos dd { margin: 0.1rem 0 0; font-weight: 700; color: var(--c-marino-900); word-break: break-word; }

/* --- Formularios de tarjeta --- */
.area-forma .campo { margin-bottom: var(--esp-3); }

.area-consent {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  margin-bottom: var(--esp-3);
  cursor: pointer;
}

.area-consent__check { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--c-marino-700); }
.area-consent__texto { font-size: var(--texto-s); color: var(--c-texto); }

/* ============================ Botón mini (acciones de tarjeta) ============================ */
.area-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.5rem 1rem;
  min-height: 2.5rem;
  border: 1.5px solid var(--c-borde-fuerte);
  border-radius: var(--radio-pill);
  background: var(--c-blanco);
  color: var(--c-marino-800);
  font-weight: 700;
  font-size: var(--texto-s);
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms var(--rebote), border-color var(--trans-rapida), background-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.area-mini:hover { border-color: var(--c-marino-800); transform: translateY(-1px); }
.area-mini:active { transform: translateY(0) scale(0.97); }
.area-mini svg { width: 1rem; height: 1rem; }

.area-mini--primario { background: var(--c-acento); border-color: transparent; color: var(--c-marino-900); }
.area-mini--primario:hover { background: var(--c-amarillo-400); box-shadow: var(--sombra-acento); }

.area-mini[disabled], .area-mini.cargando { opacity: 0.7; cursor: not-allowed; transform: none; }
.area-mini.cargando .boton__spinner { display: inline-block; animation: nz-girar 0.8s linear infinite; }

/* ============================ Zona de subida ============================ */
.area-subida { margin-top: var(--esp-2); }

.area-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-4);
  border: 2px dashed var(--c-borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--c-fondo-suave);
  text-align: center;
  transition: border-color var(--trans-rapida), background-color var(--trans-rapida), transform var(--trans-media);
}

.area-drop.arrastrando { border-color: var(--c-amarillo-500); background: var(--c-amarillo-100); transform: scale(1.01); }
.area-drop__icono { width: 2rem; height: 2rem; color: var(--c-marino-700); }
.area-drop__texto { font-weight: 700; color: var(--c-marino-800); font-size: var(--texto-s); }
.area-drop__sep { font-size: var(--texto-xs); color: var(--c-texto-suave); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; }
.area-drop__botones { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: center; }
.area-drop__formatos { font-size: var(--texto-xs); color: var(--c-texto-suave); margin: 0; }

/* Progreso de subida */
/* ===================== `hidden` DEBE GANAR SIEMPRE =====================
   BUG DE FONDO (arreglado 2026-07-27): el `[hidden] { display: none }` que trae
   el navegador es una regla de la HOJA DE USUARIO-AGENTE, y CUALQUIER regla de
   autor la gana — incluso una tan simple como `.area-prog { display: flex }`.
   Resultado: poner `elemento.hidden = true` (o el atributo `hidden` en el SSR)
   no ocultaba nada en todos los bloques del área que declaran `display`.

   El síntoma que se veía: al terminar de subir un archivo aparecía "Archivo
   guardado" y DEBAJO seguía la barra "Subiendo… 0 %", las dos a la vez; y al
   recargar con documentos ya subidos salía la zona de arrastre, la barra a 0 %
   y el archivo guardado apilados.

   Se declaran aquí TODOS los bloques del área que se ocultan por atributo, en
   un solo sitio, para que el próximo que añada un `display:` no vuelva a
   romperlo en silencio. Si añades un bloque que se oculte con `hidden` y tenga
   `display`, súmalo a esta lista.
   ====================================================================== */
.area-drop[hidden],
.area-prog[hidden],
.area-aportado[hidden],
.area-firma[hidden],
.area-firma-aportado[hidden],
.area-final-ok[hidden],
.area-mascara[hidden],
.area-revision[hidden],
/* El campo de detalle de un opcional ("¿qué potencia?", "¿quién te
   representa?") se oculta hasta que la respuesta es "sí". Sin esta línea salía
   siempre —cayó en la misma trampa que describe el bloque de arriba— e invitaba
   a rellenar algo que el servidor iba a descartar. */
.area-prefs__detalle[hidden],
.area-titular__nota[hidden] { display: none; }

.area-prog { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3) 0; }

.area-prog__barra {
  flex: 1;
  height: 8px;
  border-radius: var(--radio-pill);
  background: var(--c-marino-100);
  overflow: hidden;
}

.area-prog__relleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-marino-700);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms linear;
}

.area-prog__pct { font-weight: 700; font-size: var(--texto-s); color: var(--c-marino-800); font-variant-numeric: tabular-nums; min-width: 2.7rem; text-align: right; }
.area-prog__label { font-size: var(--texto-xs); color: var(--c-texto-suave); }

/* Vista "aportado" */
.area-aportado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding: var(--esp-3);
  border: 1px solid #a8dcc3;
  border-radius: var(--radio-m);
  background: var(--c-exito-fondo);
}

.area-aportado__mini {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-s);
  overflow: hidden;
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
}

.area-aportado__img { width: 100%; height: 100%; object-fit: cover; }
.area-aportado__doc { width: 1.5rem; height: 1.5rem; color: var(--c-marino-700); }
.area-aportado__mini .area-aportado__img[hidden] + .area-aportado__doc,
.area-aportado__mini .area-aportado__img:not([src]) { display: block; }

.area-aportado__acciones { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }

.area-aportado__ok {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-weight: 700;
  font-size: var(--texto-s);
  color: var(--c-exito);
}

.area-aportado__ok svg { width: 1.1rem; height: 1.1rem; }
.area-aportado__ok--inline { color: var(--c-exito); }

/* Rechazado: ni verde ni tic. Lo que hay guardado NO vale y lo que toca es
   subirlo otra vez — un «hecho» en verde ahí contradice al aviso de debajo. */
.area-aportado__ok--reparo { color: var(--c-acento); }

/* Revisión humana del documento: lo que el cliente ve cuando un admin ha
   validado o rechazado lo que subió. Se pinta en SSR (area.js no lo toca). */
.area-revision {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: var(--esp-2) 0 0;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid transparent;
  border-radius: var(--radio-s);
  font-size: var(--texto-s);
}

.area-revision__badge { font-weight: 700; }
.area-revision__texto { color: var(--c-texto-suave); }

.area-revision__motivo {
  flex-basis: 100%;
  font-weight: 600;
}

.area-revision--pendiente {
  background: var(--c-marino-50, rgba(0, 0, 0, 0.03));
  border-color: var(--c-borde);
}

.area-revision--validado {
  background: var(--c-exito-fondo);
  border-color: var(--c-exito);
}
.area-revision--validado .area-revision__badge { color: var(--c-exito); }

.area-revision--rechazado {
  background: var(--c-error-fondo);
  border-color: var(--c-error);
}
.area-revision--rechazado .area-revision__badge,
.area-revision--rechazado .area-revision__motivo { color: var(--c-error); }

.area-error {
  margin: var(--esp-2) 0 0;
  font-size: var(--texto-s);
  font-weight: 600;
  color: var(--c-error);
}

/* ============================ Firma (digital principal + manual secundaria) ============================ */
.area-firma { display: flex; flex-direction: column; gap: var(--esp-4); }

/* Bloque DIGITAL: la opción destacada (recomendada). Fondo suave + padding lo
   separan visualmente de la alternativa manual, discreta y plegada debajo. */
.area-firma__digital {
  padding: var(--esp-4);
  border: 1.5px solid var(--c-marino-100);
  border-radius: var(--radio-m);
  background: var(--c-marino-50);
}

.area-firma__digital-cab {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-bottom: var(--esp-1);
}

.area-firma__sub { font-size: var(--texto-m); color: var(--c-marino-900); }
.area-firma__ayuda { margin: var(--esp-1) 0 var(--esp-3); font-size: var(--texto-s); color: var(--c-texto-suave); }

.area-tag--recomendado { background: var(--c-exito-fondo); color: var(--c-exito); border: 1px solid #a8dcc3; }

.area-firma__lienzo {
  position: relative;
  border: 1.5px solid var(--c-borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--c-blanco);
  overflow: hidden;
}

.area-firma__canvas {
  display: block;
  width: 100%;
  height: clamp(170px, 26vw, 230px);
  touch-action: none;   /* al firmar en móvil no debe hacer scroll la página */
  cursor: crosshair;
  position: relative;
  z-index: var(--capa-elevada);
}

.area-firma__linea {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 26%;
  border-bottom: 1.5px dashed var(--c-borde-fuerte);
  pointer-events: none;
}

/* Marca de agua "Firma aquí" dentro del lienzo (bajo el trazo, decorativa). */
.area-firma__marca {
  position: absolute;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  color: var(--c-texto-suave);
  opacity: 0.4;
  font-size: var(--texto-s);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.area-firma__acciones { display: flex; gap: var(--esp-2); margin-top: var(--esp-3); flex-wrap: wrap; }

/* Alternativa MANUAL: plegable y discreta (progressive disclosure). */
.area-firma__manual {
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-m);
  background: var(--c-blanco);
}

.area-firma__manual-toggle {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--texto-s);
  color: var(--c-marino-800);
  list-style: none;
}

.area-firma__manual-toggle::-webkit-details-marker { display: none; }
.area-firma__manual-toggle:hover { color: var(--c-marino-900); }
.area-firma__manual-toggle:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 2px; border-radius: var(--radio-m); }
.area-firma__manual-icono { flex: none; color: var(--c-marino-700); }
.area-firma__manual-toggle > span { flex: 1; }
.area-firma__manual-chevron { flex: none; color: var(--c-texto-suave); transition: transform var(--trans-rapida); }
.area-firma__manual[open] .area-firma__manual-chevron { transform: rotate(180deg); }

.area-firma__manual-cuerpo { padding: 0 var(--esp-4) var(--esp-4); }
.area-firma__subir-titulo { margin: var(--esp-4) 0 var(--esp-1); font-weight: 700; font-size: var(--texto-s); color: var(--c-marino-800); }

.area-firma-aportado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid #a8dcc3;
  border-radius: var(--radio-m);
  background: var(--c-exito-fondo);
}

/* ============================ Switch (renovación) ============================ */
.area-switch {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  cursor: pointer;
}

.area-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.area-switch__pista {
  flex: none;
  width: 3rem;
  height: 1.7rem;
  border-radius: var(--radio-pill);
  background: var(--c-borde-fuerte);
  transition: background-color var(--trans-media);
  position: relative;
}

.area-switch__bola {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--c-blanco);
  box-shadow: var(--sombra-1);
  transition: transform var(--trans-media);
}

.area-switch__input:checked + .area-switch__pista { background: var(--c-exito); }
.area-switch__input:checked + .area-switch__pista .area-switch__bola { transform: translateX(1.3rem); }
.area-switch__input:focus-visible + .area-switch__pista { outline: 3px solid var(--c-foco); outline-offset: 2px; }
.area-switch__texto { font-weight: 700; font-size: var(--texto-s); color: var(--c-marino-800); }

/* ============================ Finalizar ============================ */
.area-final {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
  padding: var(--esp-5);
  text-align: center;
}

.area-final__titulo { font-size: var(--texto-xl); color: var(--c-marino-900); }
.area-final__intro { margin: var(--esp-2) auto var(--esp-4); color: var(--c-texto-suave); font-size: var(--texto-s); max-width: 40rem; }
.area-final [data-finalizar].area-listo { box-shadow: var(--sombra-acento); }

.area-final-ok {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-5);
  border-radius: var(--radio-l);
  background: linear-gradient(135deg, var(--c-marino-900), var(--c-marino-700));
  color: var(--c-texto-inverso);
  box-shadow: var(--sombra-2);
}

.area-final-ok__icono {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-amarillo-500);
  color: var(--c-marino-900);
}

.area-final-ok__icono svg { width: 1.5rem; height: 1.5rem; }
.area-final-ok__titulo { font-size: var(--texto-l); color: var(--c-blanco); }
.area-final-ok__texto { margin-top: var(--esp-2); color: var(--c-texto-inverso-suave); font-size: var(--texto-s); }

/* ============================ Toasts (feedback flotante) ============================ */
.area-toasts {
  position: fixed;
  left: 50%;
  bottom: var(--esp-5);
  transform: translateX(-50%);
  z-index: var(--capa-flotante);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  width: min(92vw, 26rem);
  pointer-events: none;
}

.area-toast {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-3);
  font-weight: 700;
  font-size: var(--texto-s);
  background: var(--c-marino-900);
  color: var(--c-texto-inverso);
  position: relative;
  padding-left: 2.2rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--trans-media), transform var(--trans-media);
}

/* Punto de estado en vez de la banda izquierda (cliche de IA, 2026-08-13). */
.area-toast::before {
  content: ""; position: absolute; left: 0.9rem; top: 1.1rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--c-amarillo-500);
}
.area-toast--ok::before { background: var(--c-exito-claro); }
.area-toast--error { background: var(--c-marino-950); }
.area-toast--error::before { background: #ff8a80; }
.area-toast.entra { opacity: 1; transform: translateY(0); }
.area-toast.sale { opacity: 0; transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) {
  .area-toast { transition: opacity var(--trans-rapida); transform: none; }
  .area-progreso__relleno, .area-prog__relleno, .area-req__check, .area-req__salto,
  .area-switch__bola, .area-mini, .area-doc, .area-paso, .area-paso__check,
  .area-paso__punto, .area-firma__manual-chevron { transition: none; }
  .area-paso:hover { transform: none; }
  .area-resalta { animation: none; }
}

/* ============================================================
   Pestañas de acceso (entrar con contraseña / enlace / olvido)
   ============================================================ */
/* La puerta NO puede bailar al cambiar de pestaña. Los tres paneles tienen
   contenidos de altura distinta (dos campos / uno / uno con nota), y al
   alternarlos la tarjeta encogía y crecía: los botones subían y bajaban, y el
   sitio donde acabas de pulsar ya no está donde estaba.

   `.area-tabs` reparte en dos filas —botonera arriba, paneles abajo ocupando
   el resto— y los paneles se APILAN en la misma celda, así que el bloque
   reserva siempre el alto del más alto. El oculto conserva `hidden` (lo
   necesitan la accesibilidad y los selectores de la animación) pero se esconde
   con `visibility`, que a diferencia de `display:none` mantiene el hueco. */
.area-tabs {
  /* Sin margen propio: el panel claro ya pone su padding, y sumar los dos
     dejaba 68 px por encima de la botonera. La separación con lo de arriba
     (cuando hay aviso de error) la da el `gap` de `.area-acceso__forma`. */
  margin-top: 0;
  text-align: left;
  display: grid;
  grid-template-rows: auto 1fr;
  /* `minmax(0, 1fr)` + `min-width: 0`: sin esto, las pestañas con
     `white-space: nowrap` fijan un ancho mínimo mayor que la columna y la
     rejilla lo respeta — el contenido se salía por la derecha de la tarjeta. */
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}

/* BOTONERA tipo segmentado: los tres al mismo nivel, con su propia superficie.
   Antes eran texto suelto sobre una línea y el activo solo se distinguía por
   el color — con el panel moviéndose debajo, costaba saber dónde estabas. */
.area-tabs__lista {
  position: relative;   /* ancla del indicador deslizante */
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  padding: 0.28rem;
  border-radius: var(--radio-l);
  background: var(--c-fondo-suave);
  border: 1px solid var(--c-borde);
  margin-bottom: var(--esp-5);
  min-width: 0;
}

/* INDICADOR DESLIZANTE de la pestaña activa.
   ---------------------------------------------------------------------------
   Mismo patrón que el selector de tipo de cliente del funnel (`.segmentos__
   thumb`): el JS mide la pestaña activa con `offset*` y mueve este span con
   `transform` (GPU) + `width`; la transición vive solo aquí.

   OJO: NO se declara `display`. Un `display:` de autor gana al
   `[hidden]{display:none}` del navegador y el indicador saldría siempre — un
   pill suelto en la esquina al cargar. Es la trampa que ya está documentada en
   esta misma hoja. */
.area-tabs__thumb {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radio-pill);
  background: var(--c-blanco);
  box-shadow: 0 1px 2px rgba(11, 26, 51, 0.10), 0 0 0 1px var(--c-borde);
  pointer-events: none;
  transition: transform var(--dur-v2-2) var(--rebote),
              width var(--dur-v2-2) var(--rebote);
}
/* Colocaciones que NO deben animarse: arranque, resize, carga de la fuente. */
.area-tabs__thumb.sin-transicion { transition: none; }

/* El rótulo, por encima del indicador. */
.area-tabs__tab { position: relative; }

/* Con indicador, la activa deja de pintar su propio pill: lo pinta el que se
   desliza. Sin JS esta clase no existe y manda el pill del servidor. */
.area-tabs__lista.es-con-thumb .area-tabs__tab.es-activa {
  background: transparent;
  box-shadow: none;
}

/* `stretch`, no `center`: centrar dejaba el bloque de paneles flotando con
   aire igual arriba y abajo dentro de la caja que le cede el panel claro. Al
   estirarse, ese aire entra DENTRO del panel y su `space-between` lo reparte
   entre título, intro, formulario y ayuda. */
.area-tabs__paneles { display: grid; align-content: stretch; min-width: 0; }
.area-tabs__paneles > .area-tabs__panel { min-width: 0; }
.area-tabs__paneles > .area-tabs__panel {
  grid-area: 1 / 1;
  /* EL HUECO RESERVADO SE REPARTE, NO SE QUITA.
     La fila mide lo que el panel más alto («No puedo entrar», 351 px) y con la
     pestaña de contraseña (262 px) sobraban 89 px que se quedaban como un
     bloque vacío al fondo. Ese hueco es el precio de que la tarjeta no baile al
     cambiar de pestaña y NO se toca; lo que cambia es que ahora el contenido lo
     llena: el aire sobrante se reparte como separación entre título, intro,
     formulario y ayuda — que es lo que pidió el dueño («no comprimas el
     contenido, usa el espacio, distribuye»).
     SIN `row-gap`: un gap sumaría a la altura propia de cada panel y AGRANDARÍA
     el hueco en vez de repartirlo. `space-between` es neutro por construcción. */
  display: grid;
  align-content: space-between;
}
/* Ocupa sitio pero ni se ve ni se puede tabular.
   `display: grid` y no `block`: los tres paneles tienen que compartir display o
   los márgenes de los hijos colapsan solo en unos y el visible mide más que el
   hueco que reservaron los ocultos — y vuelve el baile de altura. Nunca
   `display: none`: quita el hueco (lo vigila test_puerta_acceso_maqueta). */
.area-tabs__paneles > .area-tabs__panel[hidden] {
  display: grid;
  visibility: hidden;
  pointer-events: none;
}
/* Con la puerta ancha las TRES pestañas caben en una sola fila, al mismo
   nivel (2026-08-10): nada de segunda línea. */
/* Las tres en UNA fila y repartiéndose el ancho a partes iguales. `min-width:
   0` es lo que les permite encoger: con `nowrap` y sin él, la etiqueta más
   larga («He olvidado el acceso») fijaba el ancho de toda la tarjeta. */
@media (min-width: 48rem) {
  .area-tabs__lista { flex-wrap: nowrap; }
  .area-tabs__tab {
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 0.6rem;
  }
}

/* Cambio de opción con el gesto de la CASA (2026-08-10): un barrido
   láser — el mismo que escanea las facturas — recorre el panel y los
   campos se van IMPRIMIENDO escalonados tras él, como si el escáner
   cargara el formulario. Se relanza solo al quitarse `hidden`. Todo
   tras la puerta de motion. */
@media (prefers-reduced-motion: no-preference) {
  .area-tabs__tab { transition: color 0.25s ease, translate 0.2s ease; }
  .area-tabs__tab:active { translate: 0 1px; scale: 0.98; }
  .area-tabs__tab.es-activa { animation: area-tab-pulso 0.35s ease; }
  @keyframes area-tab-pulso {
    0% { translate: 0 2px; }
    60% { translate: 0 -1px; }
    100% { translate: 0 0; }
  }

  .area-tabs__panel { position: relative; }
  .area-tabs__panel:not([hidden])::after {
    content: "";
    position: absolute;
    inset-inline: -0.5rem;
    top: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--lg-blue-light), transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--lg-blue-light) 65%, transparent);
    pointer-events: none;
    animation: area-laser 0.6s ease-out both;
  }
  @keyframes area-laser {
    0% { top: 0; opacity: 1; }
    80% { opacity: 1; }
    100% { top: calc(100% - 2px); opacity: 0; }
  }

  /* Los bloques del panel se imprimen tras el paso del láser. */
  .area-tabs__panel:not([hidden]) > * { animation: area-imprime 0.4s cubic-bezier(0.22, 0.7, 0.35, 1) both; }
  .area-tabs__panel:not([hidden]) > :nth-child(2) { animation-delay: 0.08s; }
  .area-tabs__panel:not([hidden]) > :nth-child(3) { animation-delay: 0.16s; }
  .area-tabs__panel:not([hidden]) > :nth-child(4) { animation-delay: 0.24s; }
  .area-tabs__panel:not([hidden]) > :nth-child(5) { animation-delay: 0.32s; }
  .area-tabs__panel:not([hidden]) > :nth-child(n+6) { animation-delay: 0.4s; }
  @keyframes area-imprime {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
  }
}

.area-tabs__tab {
  appearance: none;
  border: 0;
  flex: 1 1 auto;
  background: transparent;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radio-pill);
  color: var(--c-texto-suave);
  font-weight: 700;
  font-size: var(--texto-s);
  text-align: center;
  cursor: pointer;
  transition: color var(--trans-rapida), background var(--trans-rapida),
              box-shadow var(--trans-rapida);
}

.area-tabs__tab:hover { color: var(--c-marino-800); }
/* La activa se LEVANTA sobre la banda, no se subraya: con tres opciones al
   mismo nivel hace falta que la elegida se vea sin comparar colores. */
.area-tabs__tab.es-activa {
  color: var(--c-marino-900);
  background: var(--c-blanco);
  box-shadow: 0 1px 2px rgba(11, 26, 51, 0.10), 0 0 0 1px var(--c-borde);
}
.area-tabs__tab:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 2px; }

/* Fuera de la puerta apilada (otras pestañas del área) sigue el comportamiento
   normal: `hidden` esconde de verdad. */
.area-tabs__panel[hidden] { display: none; }

/* Selector de canal del reset (correo / SMS) */
/* «No puedo entrar» (petición directa 2026-08-15): el selector de canal SUBE
   hacia su pregunta —había un hueco muerto en medio— y el botón de enviar BAJA
   un poco, que iba pegado a las dos píldoras. Entre correo y SMS, más aire en
   horizontal (var(--esp-4)) sin tocar el salto de línea en columnas
   estrechas. */
.area-canal { border: 0; padding: 0; margin: calc(-1 * var(--esp-1)) 0 0; }
.area-canal__opciones {
  display: flex; flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin-top: var(--esp-2);
}
[data-area-reset] .boton--primario { margin-top: var(--esp-2); }

.area-canal__opcion {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--c-borde-fuerte);
  border-radius: var(--radio-pill);
  font-size: var(--texto-s);
  font-weight: 700;
  color: var(--c-marino-800);
  cursor: pointer;
  transition: border-color var(--trans-rapida), background-color var(--trans-rapida);
}

.area-canal__opcion input { accent-color: var(--c-marino-700); }
.area-canal__opcion:has(input:checked) { border-color: var(--c-marino-700); background: var(--c-marino-50); }
.area-canal__opcion:has(input:focus-visible) { outline: 3px solid var(--c-foco); outline-offset: 2px; }

/* ============================================================
   Selector de tipo de titular (panel del cliente)
   ============================================================ */
.titular-opciones { display: grid; gap: var(--esp-3); }

@media (min-width: 34rem) {
  .titular-opciones { grid-template-columns: 1fr 1fr; }
}

.titular-opcion {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border: 1.5px solid var(--c-borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--c-blanco);
  cursor: pointer;
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida), background-color var(--trans-rapida);
}

.titular-opcion:hover { border-color: var(--c-marino-700); }

.titular-opcion__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.titular-opcion__cuerpo { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.titular-opcion__titulo { font-weight: 700; font-size: var(--texto-s); color: var(--c-marino-900); }
.titular-opcion__desc { font-size: var(--texto-xs); color: var(--c-texto-suave); }

.titular-opcion__marca {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid var(--c-borde-fuerte);
  background: var(--c-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-blanco);
  transition: background-color var(--trans-rapida), border-color var(--trans-rapida);
}

.titular-opcion__marca svg { width: 0.8rem; height: 0.8rem; opacity: 0; transform: scale(0.4); transition: opacity var(--trans-rapida), transform 260ms var(--rebote); }
.titular-opcion__radio:checked ~ .titular-opcion__marca { background: var(--c-marino-700); border-color: var(--c-marino-700); }
.titular-opcion__radio:checked ~ .titular-opcion__marca svg { opacity: 1; transform: scale(1); }
.titular-opcion:has(.titular-opcion__radio:checked) { border-color: var(--c-marino-700); box-shadow: 0 0 0 1px var(--c-marino-700) inset; background: var(--c-marino-50); }
.titular-opcion__radio:focus-visible ~ .titular-opcion__marca { outline: 3px solid var(--c-foco); outline-offset: 2px; }

.area-titular__nota { margin-top: var(--esp-3); }
.area-titular__nota:not([hidden]) { display: block; }

/* ============================================================
   Bloque de contraseña (vista "configurada")
   ============================================================ */
.area-password-set { display: flex; flex-direction: column; gap: var(--esp-2); align-items: flex-start; }
.area-password-set .area-doc__ayuda { margin: 0; }
.area-password-form[hidden], .area-password-set[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .titular-opcion__marca svg { transition: opacity var(--trans-rapida); transform: none; }
  .area-tabs__tab { transition: none; }
  /* El indicador salta en vez de deslizarse: sigue diciendo dónde estás. */
  .area-tabs__thumb { transition: none; }
}

/* Baja / supresión de datos (RGPD art. 17). Plegado y sobrio a propósito: el
   derecho tiene que estar y ser encontrable, no reclamar atención. */
.area-doc--peligro { border-color: var(--c-borde); }

.area-baja > summary { list-style: none; }
.area-baja > summary::-webkit-details-marker { display: none; }

.area-baja__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  cursor: pointer;
  font-weight: 700;
  color: var(--c-texto-suave);
}

.area-baja__toggle:hover { color: var(--c-error); }
.area-baja[open] .area-baja__toggle { color: var(--c-error); }

.area-baja__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--c-borde);
}

.area-baja__sub { margin: 0; font-weight: 700; font-size: var(--texto-s); }

.area-baja__lista {
  margin: 0;
  padding-inline-start: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  font-size: var(--texto-s);
  color: var(--c-texto-suave);
}

.area-baja__reclamar {
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
}

.area-mini--peligro {
  align-self: flex-start;
  background: var(--c-error-fondo);
  border-color: var(--c-error);
  color: var(--c-error);
}

.area-mini--peligro:hover:not(:disabled) {
  background: var(--c-error);
  color: var(--c-blanco);
}

.area-mini--peligro:disabled { opacity: 0.55; cursor: default; }

/* Autorrelleno del DNI desde la factura + lectura mostrada al cliente */
.area-dni__acciones { display: flex; gap: var(--esp-2); flex-wrap: wrap; }

.area-dni__aviso {
  margin: var(--esp-2) 0 0;
  font-size: var(--texto-s);
  color: var(--c-texto-suave);
}
.area-dni__aviso[hidden] { display: none; }

.area-lectura {
  display: grid;
  gap: var(--esp-2) var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: var(--esp-4) 0 0;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--c-borde);
}

/* CUPS y dirección ocupan la fila entera: son los dos datos que hay que leer
   enteros para confirmar que el suministro es el suyo. */
.area-lectura__fila--ancha { grid-column: 1 / -1; }

.area-lectura__fila dt {
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
  margin-bottom: 0.15rem;
}

.area-lectura__fila dd {
  margin: 0;
  font-weight: 700;
  color: var(--c-marino-900);
  font-size: var(--texto-s);
}

.area-lectura__cups { font-size: var(--texto-s); word-break: break-all; letter-spacing: 0.02em; }

.area-lectura__nota {
  margin: var(--esp-3) 0 0;
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
}

/* ============ Selector de método de firma (3 vías) ============
   Las tres opciones tienen el MISMO peso visual salvo el sello de "mayor
   validez": el certificado es el más fuerte, pero quien no lo tenga no debe
   sentir que está eligiendo mal. */
.area-firmas {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-bottom: var(--esp-5);
}

.area-firmas__op {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border: 1.5px solid var(--c-borde);
  border-radius: var(--radio-m);
  background: var(--c-blanco);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}

.area-firmas__op:hover { border-color: var(--c-marino-700); }

.area-firmas__op.es-activa {
  border-color: var(--c-marino-800);
  box-shadow: 0 0 0 3px var(--c-marino-50);
}

.area-firmas__ico {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-marino-50);
  color: var(--c-marino-700);
}

.area-firmas__ico svg { width: 1.2rem; height: 1.2rem; }
.area-firmas__op.es-activa .area-firmas__ico { background: var(--c-marino-800); color: var(--c-blanco); }

.area-firmas__txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.area-firmas__txt strong { color: var(--c-marino-900); font-size: var(--texto-s); }
.area-firmas__txt span { color: var(--c-texto-suave); font-size: var(--texto-xs); }

.area-firmas__op .area-tag {
  position: absolute;
  top: calc(var(--esp-2) * -1);
  right: var(--esp-3);
}

.area-firma__panel[hidden] { display: none; }

.area-firma__pasos {
  margin: 0 0 var(--esp-4);
  padding-inline-start: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  font-size: var(--texto-s);
  color: var(--c-texto-suave);
}

.area-firma__pasos .area-mini { margin-top: var(--esp-2); }

.area-firma__nota {
  margin: var(--esp-3) 0 0;
  padding: var(--esp-2) var(--esp-3);
  background: var(--c-marino-50);
  border-radius: var(--radio-m);
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
}

/* ---- Visor de la autorización (popup) ---- */
.area-visor[hidden] { display: none; }

.area-visor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 3vw, 2rem);
  background: rgba(6, 16, 31, 0.72);
}

.area-visor__caja {
  display: flex;
  flex-direction: column;
  width: min(64rem, 100%);
  height: min(88vh, 100%);
  background: var(--c-blanco);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

.area-visor__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--c-borde);
}

.area-visor__titulo { margin: 0; font-size: var(--texto-m); color: var(--c-marino-900); }
.area-visor__acciones { display: flex; gap: var(--esp-2); align-items: center; }

.area-visor__marco {
  flex: 1;
  width: 100%;
  border: 0;
  min-height: 0;
  background: var(--c-fondo-suave);
}

/* Las dos vías de "ya la tengo firmada" (certificado / papel), explicadas.
   Van una al lado de otra: son alternativas, no pasos. */
.area-vias {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: var(--esp-4) 0;
}

.area-via {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-m);
  background: var(--c-marino-50);
}

.area-via__titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-s);
  color: var(--c-marino-900);
}

.area-via__texto {
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
  line-height: 1.55;
}


/* ---------- Renovación anual: elegir es obligatorio ----------
   Las dos opciones pesan lo MISMO y ninguna viene marcada: el consentimiento
   tiene que ser libre (art. 7.4 RGPD), así que la interfaz no puede empujar
   hacia el "sí" ni hacerlo parecer el camino normal. */
.area-renovacion__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.area-renovacion__op {
  display: block;
  padding: var(--esp-3);
  border-radius: var(--radio-m);
  border: 2px solid var(--c-borde);
  background: var(--c-blanco);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.area-renovacion__op:hover:not(:disabled) {
  border-color: var(--c-texto-suave);
  transform: translateY(-1px);
}

.area-renovacion__op:disabled { opacity: 0.6; cursor: progress; }

.area-renovacion__op--activa {
  border-color: var(--c-acento, #f59e0b);
  background: var(--c-aviso-fondo, #fff4e5);
}

.area-renovacion__op-titulo {
  display: block;
  font-weight: 700;
  color: var(--c-texto);
}

.area-renovacion__op-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--texto-xs);
  line-height: 1.5;
  color: var(--c-texto-suave);
}

/* El NÚMERO de documento dentro de la tarjeta de identidad: son la misma
   pregunta («quién eres») y estaban en dos tarjetas con dos botones de
   guardar. Una línea fina los separa sin volver a partirlos. */
.area-identidad__num {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--c-borde);
}
.area-identidad__sub {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-s);
  font-weight: 800;
  color: var(--c-texto);
}

/* ===== Corregir el punto de suministro =====
   Plegado: la mayoría no lo necesita y abrirlo por defecto invitaría a tocar
   unos datos que ya están bien. El aviso NO usa el cliché de banda + pastel
   (regla de alertas): superficie limpia, punto de color y texto en tinta. */
.area-corrige { margin-top: var(--esp-3); }
.area-corrige__abrir {
  display: inline-block;
  font-size: var(--texto-s);
  font-weight: 700;
  color: var(--c-texto);
  cursor: pointer;
  list-style: none;
}
.area-corrige__abrir::-webkit-details-marker { display: none; }
.area-corrige__aviso {
  margin: var(--esp-3) 0;
  font-size: var(--texto-xs);
  line-height: 1.55;
  color: var(--c-texto-suave);
  text-wrap: pretty;
}
.area-corrige__aviso::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--c-acento);
  vertical-align: 0.08em;
}
.area-corrige__hecho {
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--c-exito);
}

/* ===== Acreditar al titular anterior: UNA vía a la vez =====
   OJO al nombre: `.area-vias` / `.area-via` YA EXISTÍAN para los dos métodos de
   firma. Reusarlos aquí les cambiaba la maqueta desde otro sitio, que es la
   clase de fallo que solo se ve por casualidad. Este bloque usa `area-acredita`.

   Con las tres vías abiertas a la vez parecían tres cosas obligatorias; lo
   primero que hay que decidir es CÓMO se acredita. */
.area-acredita { margin-top: var(--esp-3); }

.area-acredita__selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}

.area-acredita__op {
  padding: 0.5rem var(--esp-3);
  border-radius: var(--radio-pill);
  border: 2px solid var(--c-borde);
  background: var(--c-blanco);
  color: var(--c-texto);
  font-weight: 700;
  font-size: var(--texto-s);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.area-acredita__op:hover { border-color: var(--c-texto-suave); }
.area-acredita__op.es-activa {
  border-color: var(--c-acento);
  background: var(--c-aviso-fondo);
}

.area-acredita__ayuda {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-xs);
  line-height: 1.5;
  color: var(--c-texto-suave);
  text-wrap: pretty;
}

/* Las tres hojas del documento, en rejilla: un DNI son dos caras y algunos
   documentos traen una más. En estrecho se apilan. */
.area-acredita__hojas {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.area-acredita__hoja {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: 700;
  color: var(--c-texto);
}

/* ===== Opcionales del alta (obligatorios de contestar) =====
   UN recuadro con las preguntas dentro, separadas por una línea fina, en vez
   de seis tarjetas sueltas (§6.5 «recuadro completo»): seis cajas iguales para
   seis sí/no es exactamente el aire muerto que la regla prohíbe.

   Nada de banda gruesa + pastel para el aviso de precio (regla de alertas,
   §6.5): la marca es el punto de color de `.area-prefs__nota`. */
/* Qué pasa después de finalizar. Es lo único que la persona lee antes de
   cerrar la pestaña, así que va numerado y legible, no en un párrafo denso. */
.area-final-ok__pasos {
  margin: var(--esp-3) 0 0;
  padding-left: 1.35rem;
  display: grid;
  gap: var(--esp-2);
  font-size: var(--texto-s);
  line-height: 1.55;
  /* Esta caja es NAVY: el color se toma de la rampa inversa. Un
     `--c-texto-suave` aquí es gris de tema claro sobre azul marino, y es lo
     que dejó ilegible el aviso antifraude — justo el párrafo que más importa
     que se lea. */
  color: var(--c-texto-inverso);
  text-wrap: pretty;
}

/* La advertencia antifraude. Es lo único de este bloque que protege dinero, y
   estaba en gris sobre navy, ilegible. Va en BLANCO, con el punto ámbar como
   única marca de color (regla de alertas: ni banda gruesa ni fondo pastel) y
   separada por una línea fina para que se distinga de los pasos. */
.area-final-ok__aviso {
  margin: var(--esp-3) 0 0;
  padding-top: var(--esp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--texto-s);
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-blanco);
  text-wrap: pretty;
}
.area-final-ok__aviso::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--c-amarillo-400);
  vertical-align: 0.1em;
}

/* Al finalizar, la página cambia entera: este bloque aparece, el botón se
   apaga y el checklist se cierra. El realce dice DÓNDE mirar. Tras la puerta
   de motion, y con `transform`/`box-shadow` (GPU), nada de `top`/`height`. */
@media (prefers-reduced-motion: no-preference) {
  .area-final-ok--llega {
    animation: area-final-llega 1400ms cubic-bezier(0.2, 0, 0.2, 1);
  }
  @keyframes area-final-llega {
    0%   { transform: scale(0.97); box-shadow: var(--sombra-2); }
    28%  { transform: scale(1); box-shadow: 0 0 0 4px var(--c-amarillo-400), var(--sombra-2); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 transparent, var(--sombra-2); }
  }
}

/* El correo de contacto sobre navy: el azul del enlace por defecto desaparece. */
.area-final-ok a {
  color: var(--c-amarillo-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* «No a todo»: visible pero sin competir con las respuestas reales. No lleva
   el tratamiento de acción primaria — no queremos que se pulse por inercia. */
.area-prefs__masivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  margin-top: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--c-borde);
}
.area-prefs__masivo-nota {
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
  text-wrap: pretty;
}

.area-prefs__lista {
  list-style: none;
  margin: var(--esp-3) 0 0;
  padding: 0;
  display: grid;
}

.area-prefs__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--c-borde);
}
.area-prefs__item:first-child { border-top: 0; padding-top: 0; }

/* En estrecho, los botones bajan y ocupan el ancho: dos dianas grandes valen
   más que dos botones minúsculos al lado del texto. */
@media (max-width: 34rem) {
  .area-prefs__item { grid-template-columns: 1fr; }
}

.area-prefs__texto { min-width: 0; }

.area-prefs__titulo {
  margin: 0;
  font-weight: 700;
  color: var(--c-texto);
  text-wrap: pretty;
}

.area-prefs__desc {
  margin: 0.3rem 0 0;
  font-size: var(--texto-xs);
  line-height: 1.55;
  color: var(--c-texto-suave);
  text-wrap: pretty;
}

.area-prefs__precio {
  margin: 0.5rem 0 0;
  font-size: var(--texto-s);
  color: var(--c-texto);
}
.area-prefs__precio-dia { color: var(--c-texto-suave); }

/* Punto de estado como única marca de color, texto en tinta. */
.area-prefs__nota {
  display: block;
  margin: 0.35rem 0 0;
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
}
.area-prefs__nota::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--c-acento);
  vertical-align: 0.08em;
}

.area-prefs__opciones {
  display: flex;
  gap: var(--esp-2);
  align-self: center;
}

.area-prefs__op {
  min-width: 5.5rem;
  padding: 0.55rem var(--esp-3);
  border-radius: var(--radio-m);
  border: 2px solid var(--c-borde);
  background: var(--c-blanco);
  color: var(--c-texto);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.area-prefs__op:hover:not(:disabled) { border-color: var(--c-texto-suave); }
.area-prefs__op:disabled { opacity: 0.6; cursor: progress; }

/* Las dos opciones pesan LO MISMO: ninguna viene marcada y el "sí" no se
   destaca sobre el "no". Empujar hacia el sí en una venta adicional es
   exactamente lo que convierte un opcional en una condición. */
.area-prefs__op.es-activa {
  border-color: var(--c-acento);
  background: var(--c-aviso-fondo);
}

.area-prefs__detalle {
  grid-column: 1 / -1;
  display: block;
  max-width: 22rem;
}

.area-prefs__detalle-rotulo {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
}

/* ===== Nombre en piezas (G1/G2) =====
   Solo tokens `--c-*`: la rampa ya resuelve claro/oscuro, y un hex de fallback
   aquí rompería el tema oscuro justo donde no se mira. */
.area-identidad {
  display: grid;
  gap: var(--esp-3);
  /* TRES columnas fijas, no `auto-fit`: son exactamente tres campos —nombre,
     primer apellido, segundo apellido— y con `auto-fit` en una tarjeta ancha
     salían cinco carriles de 11rem, así que los tres campos se quedaban
     encogidos a la izquierda y dos columnas vacías a la derecha. La fila tiene
     que componer el rectángulo completo (regla de composición del proyecto). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 40rem) {
  /* En móvil, uno debajo de otro: tres campos de nombre en 390 px no se leen. */
  .area-identidad { grid-template-columns: minmax(0, 1fr); }
}
/* Todo lo que NO es un campo cruza las columnas enteras: el error, la fila de
   acciones y el aviso de la lectura del DNI.

   OJO al selector, que ya falló una vez. La regla decía `> button` y valía
   mientras el formulario tenía UN botón suelto. Al unificar la tarjeta, los dos
   botones pasaron a vivir dentro de `.area-dni__acciones` y el aviso se sumó
   como hermano: ninguno de los dos es un `button` directo, así que dejaron de
   cruzar y la rejilla los mandó a sus propias celdas de ~11rem — «Rellenar
   desde mi DNI» partido en dos líneas con el icono aplastado y el aviso en una
   columna de tres palabras de ancho. Sin ningún error: solo mal.

   Por eso ahora se nombran las CLASES de los bloques, no la etiqueta HTML que
   tenían el día que se escribió la regla. */
.area-identidad > .campo__error,
.area-identidad > .area-dni__acciones,
.area-identidad > .area-dni__aviso,
.area-identidad > button { grid-column: 1 / -1; }
.area-identidad > button,
.area-identidad > .area-dni__acciones { justify-self: start; }

/* El icono del botón no se deforma: en un flex con texto largo, un SVG sin
   `flex: none` cede ancho y se aplasta. */
.area-dni__acciones .area-mini > svg { flex: none; }

.campo__pista {
  margin: var(--esp-1) 0 0;
  font-size: var(--texto-s);
  color: var(--c-texto-suave);
}

/* Aviso de "este reparto es dudoso, míralo". Solo aparece cuando el troceo
   propuesto es ambiguo — un aviso permanente se vuelve invisible. */
.area-identidad__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-m);
  background: var(--c-aviso-fondo);
  color: var(--c-aviso);
  font-size: var(--texto-s);
  line-height: 1.45;
}
.area-identidad__aviso svg { flex: none; margin-top: 0.15em; }
.area-identidad__aviso[hidden] { display: none; }

/* ========================================================================
   «Invita a un amigo» (pestaña del área)
   ======================================================================== */
.area-invitar__fila { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.area-invitar__fila .campo__entrada { flex: 1 1 16rem; font-variant-numeric: tabular-nums; }

.area-invitar__cupones {
  margin: 0.4rem 0 0;
  font-weight: 800;
  font-size: 1.15rem;
}

.area-invitar__lista { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.area-invitar__lista li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: baseline;
  font-size: 0.92rem;
  border-block-end: 1px dashed var(--c-borde, #d8dee9);
  padding-block-end: 0.3rem;
}
.area-invitar__lista li:last-child { border-block-end: 0; }

.area-invitar__estado { font-weight: 700; }
.area-invitar__estado--contratado { color: var(--c-exito); }
.area-invitar__estado--contratando { color: var(--c-marino-700); }

/* ========================================================================
   CUENTA GESTIONADA POR UN COLABORADOR (spec colaborador-nivel2-fase2 §D11)
   Dos bloques que SOLO ve el titular de una cuenta que tramita un colaborador:
   «Tu comparativa» —con el botón que desbloquea «Finalizar»— y «Tu alta la
   tramita X», con la retirada de la autorización (art. 7.3 RGPD).
   ======================================================================== */

/* `hidden` DEBE GANAR SIEMPRE, y aquí va GENÉRICA en vez de por lista.
   ---------------------------------------------------------------------------
   El `[hidden] { display: none }` del navegador es hoja de USUARIO-AGENTE y
   CUALQUIER regla de autor la gana: basta un `display: flex` en la clase para
   que el atributo deje de ocultar. Esa trampa ya ha mordido dos veces en este
   proyecto (§6.36 en esta misma hoja, §6.70 en funnel.css, la segunda con
   consecuencias legales). La lista de arriba hay que acordarse de ampliarla;
   esto no: cubre cualquier descendiente de los dos bloques, incluidos los que
   todavía no existen. Especificidad (0,2,0), así que gana a cualquier clase
   suelta sin necesidad de `!important`. */
.area-comparativa[hidden],
.area-gestion[hidden],
.area-comparativa [hidden],
.area-gestion [hidden] { display: none; }

.area-comparativa,
.area-gestion {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
  padding: var(--esp-5);
}

/* El margen superior propio de `.alerta` sobra dentro de una rejilla que ya
   pone `gap`: sumados, abrían un hueco muerto justo encima del aviso. */
.area-comparativa > .alerta,
.area-gestion > .alerta { margin: 0; }

/* ---- «Tu comparativa» ---- */
.area-comparativa { display: grid; gap: var(--esp-4); }
/* Recibe el foco por código cuando «Finalizar» contesta 409: quien navega con
   teclado o lector de pantalla tiene que ACABAR aquí, no solo ver el scroll. */
.area-comparativa:focus-visible { outline: 3px solid var(--c-foco); outline-offset: 3px; }

.area-comparativa__cab { display: grid; gap: var(--esp-1); }
.area-comparativa__titulo { font-size: var(--texto-xl); color: var(--c-marino-900); margin: 0; }
.area-comparativa__intro,
.area-comparativa__mensaje {
  margin: 0;
  font-size: var(--texto-s);
  color: var(--c-texto-suave);
  line-height: 1.55;
  max-width: 68ch;
}
.area-comparativa__mensaje { color: var(--c-marino-900); }
.area-comparativa__subtitulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-s);
  color: var(--c-marino-900);
}

/* Cuerpo: la CIFRA y los cuatro datos, en dos columnas cuando hay sitio.
   Son DOS bloques conocidos, así que columnas explícitas y no `auto-fit`, que
   con un número fijo de elementos deja columnas cojas (§6.41). La variante
   `--texto` (resultado sin cifra) se queda en una sola columna: no hay panel
   numérico que poner al lado y media fila vacía es peor que una fila. */
.area-comparativa__cuerpo { display: grid; gap: var(--esp-4); }
@media (min-width: 52rem) {
  .area-comparativa__cuerpo:not(.area-comparativa__cuerpo--texto) {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    align-items: stretch;
  }
}

.area-comparativa__cifra {
  display: grid;
  align-content: center;
  gap: var(--esp-1);
  margin: 0;
  padding: var(--esp-4);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-m);
  background: var(--c-marino-50);
  text-align: center;
}
/* §6.42: cuando NO compensa no hay número que enseñar, solo la frase — y va
   alineada a la izquierda porque es texto, no una cifra. El color de ahorro
   (verde) no aparece por ninguna parte: pintar de verde un «hoy ya pagas
   menos» es exactamente la contradicción que esa landmine cerró. */
.area-comparativa__cifra.es-neutra { text-align: start; }

.area-comparativa__eti {
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}
.area-comparativa__cifra.es-neutra .area-comparativa__eti {
  font-size: var(--texto-s);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.55;
  color: var(--c-marino-900);
}
.area-comparativa__num {
  font-family: var(--fuente-display);
  font-size: var(--texto-2xl);
  font-weight: 800;
  line-height: 1.05;
  color: var(--c-exito);
  font-variant-numeric: tabular-nums;
}
.area-comparativa__mes { font-size: var(--texto-s); color: var(--c-texto-suave); }

.area-comparativa__datos { min-width: 0; align-content: start; }

/* MULTICOLUMNA, no rejilla: el número de declaraciones VARÍA (una factura sin
   histórico trae menos que una con doce meses), y una rejilla de dos carriles
   dejaría hueco muerto cada vez que fuera impar. La multicolumna se equilibra
   sola y cierra el rectángulo (§6.5, mismo criterio que los consentimientos del
   funnel en §6.41). */
.area-comparativa__declara ul {
  margin: 0;
  padding-inline-start: 1.1rem;
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
  line-height: 1.5;
}
.area-comparativa__declara li { break-inside: avoid; margin-block-end: var(--esp-1); }
.area-comparativa__declara li:last-child { margin-block-end: 0; }
@media (min-width: 52rem) {
  .area-comparativa__declara ul { columns: 2; column-gap: var(--esp-5); }
}

.area-comparativa__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}
.area-comparativa__nota {
  flex: 1 1 18rem;
  min-width: 0;
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
  line-height: 1.5;
}
.area-comparativa__ok { margin: 0; justify-self: start; }

/* ---- «Tu alta la tramita X» ---- */
.area-gestion { display: grid; gap: var(--esp-3); }
@media (min-width: 46rem) {
  /* Texto a la izquierda, la retirada a la derecha: dos bloques conocidos, dos
     columnas explícitas. La alerta cruza para que el recuadro cierre entero. */
  .area-gestion { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .area-gestion .alerta { grid-column: 1 / -1; }
}
.area-gestion__texto { min-width: 0; }
.area-gestion__titulo { margin: 0; font-size: var(--texto-l); color: var(--c-marino-900); }
.area-gestion__ayuda {
  margin: var(--esp-2) 0 0;
  font-size: var(--texto-s);
  color: var(--c-texto-suave);
  line-height: 1.55;
  max-width: 68ch;
}
.area-gestion__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }