/**
 * Estilos del módulo Legal.
 *
 * Se apoya en tokens.css y hub.css. Aquí solo lo específico de Legal.
 * Corrección (10 ago 2026): sin ámbar — el precio no compite con el ámbar
 * de otros módulos. Rosa = selección (--selection).
 *
 * Ronda 4 (11 ago 2026), pedido directo de producto:
 *   - Los precios pasan de blanco a --legal-blue (azul vivo sampleado del
 *     logo del módulo), no turquesa -- ver tokens.css.
 *   - Los "tipos" (p. ej. los 5 certificados) pasan de etiquetas planas a
 *     chips grandes y seleccionables, rosa al marcarse.
 *   - Bordes de tarjetas y chips: negro + --navy-deep (mismo patrón que
 *     ya usan los iconos del resto de la app: hub-tile__icon,
 *     tool-intro__icon), en vez del borde pálido genérico anterior.
 * Ver Herizo_Legales_Diseno_Modulo.md §2.
 *
 * Ronda 5 (11 ago 2026), pedido directo de producto -- rechazo explícito
 * del look anterior ("el gris oscuro o azul apagado uno sobre otro no es
 * elegante"). Dirección nueva:
 *   - Tarjeta: fondo sólido --navy-deep (sin capa gris translúcida encima
 *     del degradado del hero -- eso era lo que se leía "apagado"). Borde
 *     fino azul (color-mix con --legal-blue), no gris genérico.
 *   - Sin iconos decorativos en ningún caso (pedido explícito).
 *   - Los "tipos" (certificados) pasan de chips en cuadrícula a una lista
 *     de filas dentro de un contenedor con borde propio, cada fila con un
 *     check circular (control de selección, no icono ilustrativo) --
 *     referencia de estilo compartida por producto (selector de plan,
 *     tipografía Inter ya bloqueada, alto contraste, check azul relleno).
 *   - Tipografía sigue siendo Inter (bloqueada en tokens.css) -- no se
 *     introduce familia nueva; el efecto "tech" sale de tracking más
 *     ajustado en títulos y tabular-nums en el precio, no de otra fuente.
 */

/* Ronda 12 ago 2026 (tarde): bug real encontrado por Fidel -- varias
   clases de abajo (.legal-cola__vista, .legal-cola__correo,
   .legal-cola__acciones, .legal-cola__pago...) fijan su propio "display"
   (flex/grid), y eso pisa el estilo nativo del atributo hidden (los
   estilos de autor siempre ganan sobre los del navegador, sin importar
   especificidad). Resultado: cola.js marcaba bien qué vista ocultar, pero
   las 4 vistas (A/B/C/D) se seguían viendo todas a la vez. Con esta regla,
   cualquier elemento oculto con hidden se oculta de verdad, sin tener que
   acordarse de añadir "display: none" a mano en cada clase nueva. */
[hidden] {
  display: none !important;
}

.card-moment--legal {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.85rem;
  /* 12 ago 2026: negro con un degradado muy ligero hacia azul oscuro (pedido
     de producto). Oscurece el conjunto; las tarjetas internas (#0f1d30, más
     claras) resaltan encima. Sin cristal/blur. */
  background: linear-gradient(
    160deg,
    #05080f 0%,
    #071223 55%,
    #0a1a31 100%
  );
  border: 1px solid color-mix(in srgb, var(--legal-blue) 14%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
    0 12px 30px color-mix(in srgb, #000000 45%, transparent);
}

/* En el asistente de certificado: solo el recuadro del flujo.
   Sin título «Trámites legales», sin sello, sin capa/marco gris del card. */
.card-moment--legal.is-cert-flow {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  margin-bottom: 0.5rem;
  padding-left: 0;
  padding-right: 0;
}

.card-moment--legal.is-cert-flow .legal-hero,
.card-moment--legal.is-cert-flow .module-info-trigger--seal {
  display: none;
}

.card-moment--legal.is-cert-flow .legal-cert-flow {
  margin-top: 0;
}

/* Sello con el icono propio del módulo (10 ago 2026), mismo patrón que
   Pasaporte/Aduana/Gaceta: icono de identidad en vez del logo genérico. */
.card-moment--legal .card-moment__seal {
  width: 2.5rem;
  height: 2.5rem;
  top: 0.75rem;
  right: 0.75rem;
}

.legal-hero {
  margin: 0.1rem 0 0.15rem;
  padding-right: 2.25rem;
}

.legal-hero__title {
  margin: 0;
  font-family: var(--font-headline);
  /* 12 ago 2026: reducido (antes clamp 1.35–1.6rem) por pedido de producto. */
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #ffffff;
}

/* —— Catálogo —— */
.legal-catalogo-wrap {
  margin: 0.85rem 0 0;
}

.legal-catalogo-estado {
  margin: 0.75rem 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--on-surface-muted);
}

.legal-seccion {
  margin: 0;
}

/* Ronda 8 (11 ago 2026), pedido directo de producto: se retira el
   acordeón "Herizo también gestiona" y toda su CSS (fondo propio, nota de
   alerta, anillos de estímulo para abrir) -- con un solo trámite dentro,
   ya no aportaba, solo añadía un clic de más. El catálogo ahora es plano;
   ver renderCatalogo en legal.js. */
.legal-catalogo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.legal-card {
  margin: 0;
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 30%, var(--navy-deep));
  background: var(--navy-deep);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease,
    box-shadow 0.3s ease;
}

/* Resalte breve al llegar desde un enlace interno (p. ej. Matrimonio por
   Poderes → Poder Especial) — confirma que el salto encontró su destino. */
.legal-card--destacada {
  border-color: color-mix(in srgb, var(--selection) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--selection) 22%, transparent);
}

/* —— Destello azul que gira lento por el borde de "Certificados del Registro
   Civil" (12 ago 2026, pedido de producto) —— Misma técnica y mismo keyframe
   (legal-cert-border-spin) que el asistente de certificados (.legal-cert-panel):
   un conic-gradient más grande que la tarjeta gira detrás, y un ::after navy
   tapa el centro dejando solo el anillo del borde. La tarjeta es navy sólido,
   así que el relleno opaco no rompe nada. Solo esta tarjeta (data-tramite-id). */
.legal-card[data-tramite-id="certificados-registro-civil"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.legal-card[data-tramite-id="certificados-registro-civil"]::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 255deg,
    color-mix(in srgb, var(--legal-blue) 18%, transparent) 290deg,
    color-mix(in srgb, var(--legal-blue) 80%, white) 325deg,
    color-mix(in srgb, var(--legal-blue) 22%, transparent) 350deg,
    transparent 360deg
  );
  animation: legal-cert-border-spin 16s linear infinite;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.legal-card[data-tramite-id="certificados-registro-civil"]::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-card) - 1px);
  background: var(--navy-deep);
  pointer-events: none;
  z-index: 1;
}

.legal-card[data-tramite-id="certificados-registro-civil"] > * {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .legal-card[data-tramite-id="certificados-registro-civil"]::before {
    animation: none;
  }
}

.legal-card__title {
  margin: 0 0 0.3rem;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--on-surface);
}

.legal-card__desc {
  margin: 0 0 0.55rem;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

/* Enlace a otro trámite, en chip de líneas finas (10 ago 2026) — antes era
   texto subrayado en ámbar dentro del párrafo de descripción; ahora se lee
   como una salida clara hacia otra tarjeta, no como texto corrido. */
.legal-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-surface) 24%, transparent);
  background: color-mix(in srgb, var(--on-surface) 4%, transparent);
  color: var(--on-surface);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.legal-card__link-icon {
  width: 0.8rem;
  height: 0.8rem;
  stroke: var(--on-surface-muted);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

@media (hover: hover) {
  .legal-card__link:hover {
    border-color: color-mix(in srgb, var(--on-surface) 42%, transparent);
    background: color-mix(in srgb, var(--on-surface) 9%, transparent);
  }
  .legal-card__link:hover .legal-card__link-icon {
    stroke: var(--on-surface);
  }
}

.legal-card__link:active {
  border-color: var(--selection);
}

/* Ronda 5 (11 ago 2026): de chips en cuadrícula a lista de filas dentro de
   un único contenedor con borde fino azul -- referencia de estilo
   compartida por producto (selector de plan: check circular relleno de
   azul + etiqueta, alto contraste, sin iconos ilustrativos). Divisores
   internos finos, también azulados, no grises. */
.legal-card__tipos {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 22%, var(--navy-deep));
  overflow: hidden;
}

.legal-card__tipos li + li {
  border-top: 1px solid color-mix(in srgb, var(--legal-blue) 16%, var(--navy-deep));
}

.legal-card__tipo {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.8rem 0.95rem;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.002em;
  line-height: 1.25;
  color: var(--on-surface-muted);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.legal-card__tipo-check {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--on-surface) 32%, transparent);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.legal-card__tipo-check::after {
  content: "";
  width: 0.32rem;
  height: 0.58rem;
  border-right: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

.legal-card__tipo:active {
  background: color-mix(in srgb, var(--legal-blue) 10%, transparent);
}

.legal-card__tipo[aria-pressed="true"] {
  color: var(--on-surface);
  background: color-mix(in srgb, var(--legal-blue) 12%, transparent);
}

.legal-card__tipo[aria-pressed="true"] .legal-card__tipo-check {
  background: var(--legal-blue);
  border-color: var(--legal-blue);
}

.legal-card__tipo[aria-pressed="true"] .legal-card__tipo-check::after {
  transform: translateY(-1px) rotate(45deg) scale(1);
}

@media (hover: hover) {
  .legal-card__tipo:hover {
    background: color-mix(in srgb, var(--legal-blue) 7%, transparent);
    color: var(--on-surface);
  }
}

/* Precio protagonista: sin badge de estado al lado (verificado/práctica/
   provisional ya no se pintan, se repetían en casi todas las tarjetas sin
   aportar nada al usuario). 11 ago 2026: de blanco a --legal-blue, el azul
   vivo del logo del módulo -- pedido directo, no turquesa. */
.legal-card__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.65rem;
}

.legal-card__cifra {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--legal-blue);
}

/* Sufijo muy pequeño junto a la cifra (p. ej. "230 € · cada trámite") — evita
   una frase suelta arriba; 12 ago 2026, pedido de producto. */
.legal-card__cifra-sufijo {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--on-surface-muted);
}

/* Consulta inicial (recurso de reposición, nacionalidad/residencia): cifra
   deliberadamente pequeña + etiqueta propia, para que 20 € no se lea como
   el precio del trámite completo. */
.legal-card__precio--consulta {
  align-items: center;
}

.legal-card__precio-tag {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.legal-card__cifra--sm {
  font-size: 0.95rem;
  color: var(--legal-blue);
}

.legal-card__aclaracion {
  width: 100%;
  margin: 0.15rem 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

/* Sin cifra: texto llano, nunca ámbar (diseño §2) */
.legal-card__mensaje {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-surface);
}

/* Ronda 7 (11 ago 2026): CTA de "gestión externa por consulta" -- abre el
   cajón de consulta con contexto del trámite (ver renderConsultaCta /
   initCajonConsulta). Un solo botón sólido en --legal-blue, no una fila de
   chips ni un precio: aquí no hay tarifa, hay una puerta de entrada. */
.legal-card__consulta-cta {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--radius-control);
  background: var(--legal-blue);
  font-family: var(--font-headline);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.legal-card__consulta-cta svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: #ffffff;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

.legal-card__consulta-cta:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .legal-card__consulta-cta:hover {
    background: color-mix(in srgb, var(--legal-blue) 85%, white);
  }
}

/* «Otros trámites de Cuba» — 5 oct 2026 */
.legal-card--otros {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #f2f8ff 0%, #e4f1fd 100%);
  border: 1px solid #c3dcf6;
}

.legal-card--otros::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(59, 163, 240, 0.1);
  pointer-events: none;
}

.legal-card--otros .legal-card__body {
  position: relative;
  z-index: 1;
}

.legal-card--otros .legal-card__title {
  color: #0c2552;
}

.legal-card__pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

.legal-card__pastilla {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0.42rem 0.78rem;
  border: 1px solid #c3dcf6;
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: #1b3f86;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.legal-card__pastilla:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .legal-card__pastilla:hover {
    background: color-mix(in srgb, #c3dcf6 28%, #ffffff);
  }
}

.legal-card__consulta-cta--otros {
  justify-content: center;
  border-radius: 16px;
  background: #0c2552;
}

.legal-card__consulta-cta--otros svg {
  display: none;
}

@media (hover: hover) {
  .legal-card__consulta-cta--otros:hover {
    background: color-mix(in srgb, #0c2552 88%, white);
  }
}

.legal-disclaimer {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.6;
  color: var(--on-surface-muted);
}

.legal-disclaimer strong {
  color: var(--on-surface);
  font-weight: 700;
}

/* —— Línea de consulta (cajón) —— presente en ambas secciones del catálogo */
.legal-cajon-trigger {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin: 0.85rem 0 0.15rem;
  padding: 0.95rem 1rem;
  text-align: left;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--legal-blue) 28%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--legal-blue) 14%, transparent) 0%,
      color-mix(in srgb, var(--navy-deep) 70%, transparent) 55%
    );
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.legal-cajon-trigger:active {
  transform: scale(0.985);
}

.legal-cajon-trigger__icon {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--legal-blue) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 35%, transparent);
}

.legal-cajon-trigger__icon svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: var(--legal-blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-cajon-trigger__copy {
  flex: 1;
  min-width: 0;
}

.legal-cajon-trigger__title {
  display: block;
  font-family: var(--font-headline);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

.legal-cajon-trigger__sub {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--legal-blue) 55%, var(--on-surface-muted));
}

.legal-cajon-trigger__chevron {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  stroke: color-mix(in srgb, var(--legal-blue) 70%, var(--on-surface-muted));
  fill: none;
  stroke-width: 2;
}

@media (hover: hover) {
  .legal-cajon-trigger:hover {
    border-color: color-mix(in srgb, var(--legal-blue) 55%, transparent);
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--legal-blue) 22%, transparent) 0%,
        color-mix(in srgb, var(--navy-deep) 55%, transparent) 55%
      );
  }
}

.legal-cajon-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--navy-deep) 82%, transparent);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.legal-cajon-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 640px) {
  .legal-cajon-overlay {
    align-items: center;
    padding: 1.5rem;
  }
}

.legal-cajon {
  position: relative;
  width: 100%;
  max-width: 28rem;
  max-height: min(92vh, 40rem);
  overflow-y: auto;
  background: var(--navy-deep);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 32%, transparent);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--legal-blue) 10%, transparent),
    0 -16px 48px color-mix(in srgb, #000000 50%, transparent);
  padding: 1.35rem 1.2rem calc(1.35rem + env(safe-area-inset-bottom));
  transform: translateY(18px);
  transition: transform 0.22s ease;
}

.legal-cajon-overlay.is-open .legal-cajon {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .legal-cajon {
    border-radius: var(--radius-card);
  }
}

.legal-cajon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.2rem;
  right: 1.2rem;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--legal-blue) 85%, white),
    transparent
  );
  opacity: 0.85;
}

.legal-cajon__close {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: none;
  background: color-mix(in srgb, var(--legal-blue) 12%, transparent);
  color: var(--on-surface-muted);
  cursor: pointer;
}

.legal-cajon__close svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.legal-cajon__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 1.8rem 0.55rem 0;
}

.legal-cajon__mark {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.legal-cajon__eyebrow {
  margin: 0 0 0.1rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--legal-blue) 70%, var(--on-surface-muted));
}

.legal-cajon__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #ffffff;
}

.legal-cajon__intro {
  margin: 0 0 1.15rem;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.legal-cajon__form {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.legal-cajon__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.legal-cajon__label {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--legal-blue) 45%, var(--on-surface-muted));
}

.legal-cajon__optional {
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
  color: var(--on-surface-muted);
  opacity: 0.75;
}

.legal-cajon__tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.legal-cajon__canales {
  display: flex;
  gap: 0.5rem;
}

.legal-cajon__canal {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  padding: 0.65rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--legal-blue) 28%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 8%, transparent);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.legal-cajon__canal[aria-pressed="true"] {
  border-color: var(--legal-blue);
  background: color-mix(in srgb, var(--legal-blue) 22%, transparent);
  color: #fff;
}

/* WhatsApp discreto — campo compacto, no pastilla grande */
.legal-cajon__field--wa {
  gap: 0.3rem;
}

.legal-cajon__label--wa {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

.legal-cajon__wa {
  -webkit-appearance: none;
  appearance: none;
  width: min(100%, 14rem);
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--legal-blue) 22%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 5%, #081428);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
}

.legal-cajon__wa:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--legal-blue) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--legal-blue) 14%, transparent);
}

.legal-cajon__tipo {
  -webkit-appearance: none;
  appearance: none;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--legal-blue) 22%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 6%, transparent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--on-surface-muted);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.legal-cajon__tipo[aria-pressed="true"] {
  border-color: var(--legal-blue);
  background: color-mix(in srgb, var(--legal-blue) 24%, transparent);
  color: var(--on-surface);
}

.legal-cajon__field textarea,
.legal-cajon__field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.72rem 0.85rem;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 20%, transparent);
  background: color-mix(in srgb, var(--navy-deep) 78%, transparent);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.45;
}

.legal-cajon__field textarea {
  resize: vertical;
  min-height: 6rem;
}

.legal-cajon__field textarea:focus,
.legal-cajon__field input[type="email"]:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--legal-blue) 65%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--legal-blue) 18%, transparent);
}

.legal-cajon__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0.85rem;
  border-radius: var(--radius-control);
  border: 1px dashed color-mix(in srgb, var(--legal-blue) 40%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 7%, transparent);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--on-surface);
  cursor: pointer;
  text-align: center;
}

.legal-cajon__drop svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: 0.15rem;
  stroke: var(--legal-blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-cajon__drop-hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--on-surface-muted);
}

.legal-cajon__file-list {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.legal-cajon__file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--legal-blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 18%, transparent);
}

.legal-cajon__file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--on-surface);
}

.legal-cajon__file-size {
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--on-surface-muted);
}

.legal-cajon__file-remove {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  color: var(--on-surface-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.legal-cajon__error {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--selection) 80%, white);
}

.legal-cajon__submit {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: var(--radius-control);
  padding: 0.8rem 1rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--legal-blue) 92%, white) 0%,
    var(--legal-blue) 100%
  );
  color: #ffffff;
  font-family: var(--font-headline);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.legal-cajon__submit:active {
  transform: scale(0.985);
}

/* 7 oct 2026 · Embudo: sin WhatsApp o correo el botón no se pulsa y dice lo que falta. */
.legal-cajon__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.legal-cajon__footnote {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

/* —— Fase A: asistente certificados — misma familia visual que
   Línea de consulta (cajón): logo + eyebrow, navy profundo, borde/azul
   vivo, tipografía Inter fina. Copy del paso 1 sin cambiar. —— */
.legal-cert-flow {
  margin: 0.75rem 0 0;
  padding: 0 0 0.25rem;
}

.legal-cert-panel {
  position: relative;
  padding: 1.35rem 1.2rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--navy-deep);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 22%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--legal-blue) 8%, transparent),
    0 12px 36px color-mix(in srgb, #000000 45%, transparent);
  overflow: hidden;
  isolation: isolate;
}

/* Reflejo azul fino que gira alrededor del borde — muy suave */
.legal-cert-panel::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 255deg,
    color-mix(in srgb, var(--legal-blue) 18%, transparent) 290deg,
    color-mix(in srgb, var(--legal-blue) 80%, white) 325deg,
    color-mix(in srgb, var(--legal-blue) 22%, transparent) 350deg,
    transparent 360deg
  );
  animation: legal-cert-border-spin 16s linear infinite;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.legal-cert-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-card) - 1px);
  background: var(--navy-deep);
  pointer-events: none;
  z-index: 1;
}

@keyframes legal-cert-border-spin {
  to {
    transform: rotate(360deg);
  }
}

.legal-cert-panel > * {
  position: relative;
  z-index: 2;
}

.legal-cert-close {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: none;
  background: color-mix(in srgb, var(--legal-blue) 12%, transparent);
  color: var(--on-surface-muted);
  cursor: pointer;
}

.legal-cert-close svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.legal-cert-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 1.8rem 0.75rem 0;
}

.legal-cert-mark {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.legal-cert-eyebrow {
  margin: 0 0 0.1rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--legal-blue) 70%, var(--on-surface-muted));
}

.legal-cert-title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #ffffff;
}

.legal-cert-lead {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.4;
  color: color-mix(in srgb, var(--on-surface) 92%, var(--legal-blue));
}

.legal-cert-sub {
  margin: 0 0 1.1rem;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--on-surface-muted);
}

.legal-cert-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 5.4rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px dashed color-mix(in srgb, var(--legal-blue) 42%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 8%, transparent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.legal-cert-upload:active {
  background: color-mix(in srgb, var(--legal-blue) 14%, transparent);
}

.legal-cert-upload--sm {
  min-height: 2.7rem;
  margin-bottom: 0.35rem;
  flex-direction: row;
  border-style: solid;
  border-radius: 999px;
  background: color-mix(in srgb, var(--legal-blue) 16%, #0a1628);
  font-weight: 400;
  font-size: 0.82rem;
}

.legal-cert-upload svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: var(--legal-blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-cert-preview {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--legal-blue) 10%, #081428);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 22%, transparent);
}

.legal-cert-preview img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 0.45rem;
}

.legal-cert-preview__name {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--on-surface-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legal-cert-preview__remove {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--legal-blue);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
}

/* Datos del titular: solo tras subir la foto */
.legal-cert-titular {
  margin-top: 0.85rem;
  padding: 0.75rem 0.8rem 0.85rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--legal-blue) 28%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 8%, #081428);
  animation: legal-cert-titular-in 0.28s ease-out;
}

@keyframes legal-cert-titular-in {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.legal-cert-titular__title {
  margin: 0 0 0.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--on-surface);
}

.legal-cert-titular__hint {
  margin: 0 0 0.65rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

.legal-cert-titular .legal-cert-label {
  margin-top: 0.45rem;
}

.legal-cert-titular input {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  background: color-mix(in srgb, var(--on-surface) 5%, transparent);
  border-radius: var(--radius-control);
  padding: 0.55rem 0.65rem;
  color: var(--on-surface);
  font: inherit;
  font-size: 0.9rem;
}

.legal-cert-titular__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
  .legal-cert-titular {
    animation: none;
  }
}

.legal-cert-meta {
  margin: 0.9rem 0 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--legal-blue) 55%, var(--on-surface-muted));
  text-align: center;
}

/* Plazo discreto, siempre visible: punto azul intermitente + texto fino */
.legal-cert-plazo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--on-surface) 75%, var(--legal-blue));
}

.legal-cert-plazo__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--legal-blue);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--legal-blue) 55%, transparent);
  animation: legal-plazo-pulse 1.6s ease-out infinite;
}

@keyframes legal-plazo-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--legal-blue) 55%, transparent);
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 0.55rem transparent;
    opacity: 0.85;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    opacity: 1;
  }
}

.legal-cert-continue {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 0.95rem 0 0;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0.85rem;
  background: var(--legal-blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.legal-cert-continue:active {
  transform: scale(0.985);
}

/* 22 ago 2026: este bloque ya no cierra la pantalla, la ABRE. «Cómo funciona»
   subió a justo debajo del título del certificado porque el cliente tiene que
   encontrárselo al entrar, no después de haber subido el pasaporte —lo
   sugirieron dos personas ajenas probando la página—.

   Por eso se le quita la raya de encima y el aire de separador: ahí arriba una
   línea entre el título y el botón partiría la cabecera en dos, y lo que hace
   el botón es continuarla. El botón en sí no se toca. */
.legal-cert-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.85rem 0 0.25rem;
}

/* CTA compacta: solo ? + «Cómo funciona», efecto gradiente al tocar */
.legal-cert-como-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0.35rem 0.7rem 0.35rem 0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--legal-blue) 38%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 10%, transparent);
  color: color-mix(in srgb, var(--on-surface) 90%, var(--legal-blue));
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.legal-cert-como-btn:active,
.legal-cert-como-btn.is-open {
  border-color: color-mix(in srgb, var(--legal-blue) 75%, white);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--legal-blue) 55%, #0a1628) 0%,
    color-mix(in srgb, var(--legal-blue) 22%, #0a1628) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--legal-blue) 25%, transparent),
    0 0 18px color-mix(in srgb, var(--legal-blue) 35%, transparent);
  color: #fff;
  transform: scale(0.98);
}

@media (hover: hover) {
  .legal-cert-como-btn:hover {
    border-color: color-mix(in srgb, var(--legal-blue) 65%, white);
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--legal-blue) 42%, #0a1628) 0%,
      color-mix(in srgb, var(--legal-blue) 14%, #0a1628) 100%
    );
    box-shadow: 0 0 14px color-mix(in srgb, var(--legal-blue) 28%, transparent);
    color: #fff;
  }
}

.legal-cert-como-btn__icon {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--legal-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 0 10px color-mix(in srgb, var(--legal-blue) 45%, transparent);
}

.legal-cert-como-btn > span:nth-child(2) {
  flex: 0 1 auto;
  padding-right: 0.15rem;
}

.legal-cert-link {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  padding: 0.35rem 0.2rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--on-surface) 78%, var(--legal-blue));
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.legal-cert-link__hint {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--legal-blue) 35%, transparent);
  color: color-mix(in srgb, var(--legal-blue) 70%, var(--on-surface-muted));
  font-size: 0.62rem;
  font-weight: 600;
  font-style: italic;
  font-family: var(--font-headline);
  line-height: 1;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.legal-cert-link:active,
.legal-cert-link:focus-visible {
  color: #fff;
}

.legal-cert-link:active .legal-cert-link__hint,
.legal-cert-link:focus-visible .legal-cert-link__hint {
  border-color: var(--legal-blue);
  background: color-mix(in srgb, var(--legal-blue) 28%, transparent);
  color: #fff;
  box-shadow: 0 0 10px color-mix(in srgb, var(--legal-blue) 40%, transparent);
}

@media (hover: hover) {
  .legal-cert-link:hover {
    color: #fff;
  }

  .legal-cert-link:hover .legal-cert-link__hint {
    border-color: var(--legal-blue);
    background: color-mix(in srgb, var(--legal-blue) 22%, transparent);
    color: #fff;
    box-shadow: 0 0 8px color-mix(in srgb, var(--legal-blue) 32%, transparent);
  }
}

.legal-cert-como {
  margin-top: 0.45rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--legal-blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 20%, transparent);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.legal-cert-como ol {
  margin: 0;
  padding-left: 1.1rem;
}

.legal-cert-como li + li {
  margin-top: 0.4rem;
}

.legal-cert-como__envio {
  margin: 0.75rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid color-mix(in srgb, var(--legal-blue) 16%, transparent);
  font-size: 0.74rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.legal-cert-correos {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.65rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.legal-cert-correos__mark {
  flex-shrink: 0;
  width: 3.6rem;
  height: auto;
  border-radius: 0.3rem;
  object-fit: contain;
}

.legal-cert-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.legal-cert-label {
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--legal-blue) 70%, var(--on-surface-muted));
}

.legal-cert-opt {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--on-surface-muted);
}

.legal-cert-form input[type="email"],
.legal-cert-form input[type="text"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--legal-blue) 28%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 6%, #081428);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
}

.legal-cert-form input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--legal-blue) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--legal-blue) 18%, transparent);
}

.legal-cert-error {
  margin: 0.55rem 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--selection) 80%, white);
}

.legal-cert-submit {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin-top: 0.95rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0.85rem;
  background: var(--legal-blue);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.legal-cert-submit:active {
  transform: scale(0.985);
}

.legal-cert-footnote {
  margin: 0.65rem 0 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--on-surface-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .legal-card {
    transition: none;
  }

  .legal-cajon-overlay,
  .legal-cajon,
  .legal-cert-upload,
  .legal-cert-continue,
  .legal-cert-submit,
  .legal-cert-como-btn,
  .legal-cert-como-btn svg,
  .legal-cert-plazo__dot,
  .legal-cert-panel::before,
  .legal-cert-link__hint {
    transition: none;
  }

  .legal-cert-plazo__dot,
  .legal-cert-panel::before {
    animation: none;
  }

  .legal-cert-panel::before {
    inset: 0 auto auto 1.2rem;
    right: 1.2rem;
    width: auto;
    height: 2px;
    opacity: 0.85;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--legal-blue) 80%, white),
      transparent
    );
    transform: none;
  }

  .legal-cert-panel::after {
    display: none;
  }

  .legal-cert-continue:active,
  .legal-cert-submit:active,
  .legal-cert-como-btn:active {
    transform: none;
  }
}

/* —— Cola interna (Paso 3) — solo local, no catálogo público —— */
.legal-cola {
  padding: 0 0 2rem;
}

.legal-cola__aviso {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--on-surface);
  font-size: 0.85rem;
  line-height: 1.4;
}

.legal-cola__aviso code {
  font-size: 0.8em;
}

.legal-cola__estado {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--on-surface-muted);
}

.legal-cola__estado.is-error {
  color: color-mix(in srgb, var(--selection) 80%, white);
}

/* Ronda 12 ago 2026 (tarde): pedido directo de Fidel -- una sola pantalla
   a la vez, nunca lista y detalle lado a lado ni uno encima del otro. Al
   abrir un expediente se oculta #cola-lista entera (ver cola.js
   abrirDetalle()/cerrarDetalle()), así que ya no hace falta ninguna
   cuadrícula de dos columnas -- lo que esté visible ocupa todo el ancho. */
.legal-cola__layout {
  display: block;
}

.legal-cola__lista,
.legal-cola__detalle {
  padding: 0.85rem;
  border-radius: var(--radius-card);
  background: var(--navy-deep);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 28%, transparent);
}

.legal-cola__lista-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.legal-cola__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.legal-cola__lista-head .legal-cola__title {
  margin: 0;
}

.legal-cola__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.legal-cola__filtro {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--on-surface) 18%, transparent);
  background: transparent;
  color: var(--on-surface-muted);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.legal-cola__filtro.is-active {
  border-color: color-mix(in srgb, var(--legal-blue) 55%, transparent);
  color: var(--on-surface);
  background: color-mix(in srgb, var(--legal-blue) 18%, transparent);
}

.legal-cola__filtro-n {
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.legal-cola__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 70vh;
  overflow: auto;
}

.legal-cola__vacio {
  color: var(--on-surface-muted);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

.legal-cola__item {
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
  background: color-mix(in srgb, var(--on-surface) 4%, transparent);
  border-radius: var(--radius-control);
  padding: 0.65rem 0.75rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.legal-cola__item:hover,
.legal-cola__item.is-active {
  border-color: color-mix(in srgb, var(--legal-blue) 45%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 12%, transparent);
}

.legal-cola__item-tipo {
  font-weight: 600;
  font-size: 0.9rem;
}

.legal-cola__item-meta {
  font-size: 0.75rem;
  color: var(--on-surface-muted);
}

.legal-cola__meta {
  margin: -0.25rem 0 0.85rem;
  font-size: 0.8rem;
  color: var(--on-surface-muted);
}

.legal-cola__seg {
  margin: -0.5rem 0 0.85rem;
  font-size: 0.82rem;
}

.legal-cola__seg a {
  color: var(--legal-blue);
  font-weight: 600;
  text-decoration: none;
}

.legal-cola__seg a:hover {
  text-decoration: underline;
}

.legal-cola__label {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

/* Ronda 12 ago 2026 (tarde): quitado el mapa de 4 pasos (A/B/C/D) del panel
   de entrada -- repetía las mismas casillas de la lista. Ahora se entra
   siempre directo a la vista del paso actual (ver cola.js abrirDetalle()). */

/* Vista aislada de un paso: nada más que esto (y el encabezado fijo de
   #cola-entrada -- pasaporte/planilla/datos del titular, que ya no se
   oculta) mientras está abierta. */
.legal-cola__vista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.legal-cola__volver {
  appearance: none;
  align-self: flex-start;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--legal-blue);
}

.legal-cola__vista-titulo {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

.legal-cola__vista-cliente {
  margin: 0;
  font-size: 0.88rem;
  color: var(--on-surface-muted);
}

.legal-cola__vista-listo {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--tramite) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tramite) 35%, transparent);
  font-size: 0.88rem;
  color: var(--on-surface);
}

.legal-cola__correo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--on-surface) 14%, transparent);
}

.legal-cola__correo-asunto,
.legal-cola__correo-cuerpo {
  appearance: none;
  /* Ronda 12 ago 2026 (tarde): un <textarea>/<input> sin "width" se queda
     con el ancho por defecto del navegador (angosto, tipo cols="20"), sin
     importar lo ancha que esté la ventana -- de ahí el "cajón" chiquito
     que reportó Fidel. Con width:100% + box-sizing ocupan todo el ancho
     disponible del bloque de correo. */
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  background: color-mix(in srgb, var(--on-surface) 5%, transparent);
  border-radius: var(--radius-control);
  padding: 0.6rem 0.7rem;
  color: var(--on-surface);
  font: inherit;
  font-size: 0.95rem;
}

.legal-cola__correo-cuerpo {
  resize: vertical;
  min-height: 20rem;
  line-height: 1.6;
}

.legal-cola__correo-asunto:focus,
.legal-cola__correo-cuerpo:focus {
  outline: 2px solid color-mix(in srgb, var(--legal-blue) 55%, transparent);
  outline-offset: 1px;
}

/* Ronda 12 ago 2026 (madrugada): el texto ya es el definitivo aprobado --
   se puede ver, pero no hace falta editarlo cada vez. */
.legal-cola__correo-asunto[readonly],
.legal-cola__correo-cuerpo[readonly] {
  background: transparent;
  color: var(--on-surface-muted);
  cursor: default;
}

.legal-cola__correo .legal-cola__details {
  margin-bottom: 0.5rem;
}

/* Datos del titular y redactar a mano: plegados por defecto -- ver menos,
   sin perder acceso a nada. */
.legal-cola__details {
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--on-surface) 14%, transparent);
  border-radius: var(--radius-control);
  padding: 0.15rem 0.85rem;
}

.legal-cola__details[open] {
  padding-bottom: 0.85rem;
}

.legal-cola__details summary {
  padding: 0.6rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface-muted);
  cursor: pointer;
  list-style: none;
}

.legal-cola__details summary::-webkit-details-marker {
  display: none;
}

.legal-cola__details summary::before {
  content: "▸ ";
  display: inline-block;
  color: var(--legal-blue);
}

.legal-cola__details[open] summary::before {
  content: "▾ ";
}

/* Ronda 12 ago 2026 (tarde): mismo bug que el de [hidden] -- .legal-cola__
   details-grid y .legal-cola__acciones fijan su propio "display" sin
   condición, y eso pisa el ocultado nativo del <details> cerrado (el
   navegador solo esconde el contenido que no sea el <summary> mientras no
   haya [open], pero un "display" de autor sin condición gana igual, venga
   de donde venga). Resultado para Fidel: "Ver datos del titular" se
   desplegaba pero ya no se podía volver a recoger -- el contenido se
   quedaba siempre visible. Con esto, el contenido solo se ve si el
   <details> está abierto de verdad. */
.legal-cola__details:not([open]) > :not(summary) {
  display: none !important;
}

.legal-cola__details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.75rem;
}

.legal-cola__pasaporte {
  margin-bottom: 1rem;
}

.legal-cola__pasaporte-img {
  display: block;
  width: 100%;
  max-width: 22rem;
  max-height: 14rem;
  object-fit: contain;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--on-surface) 14%, transparent);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  margin-bottom: 0.5rem;
}

/* Ronda 11 ago 2026 (tarde): planilla del cliente (solo lectura) y pago/tasa. */
.legal-cola__planilla {
  margin-bottom: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--legal-blue) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 22%, transparent);
}

.legal-cola__planilla-datos {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 0.75rem;
}

.legal-cola__planilla-datos dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.legal-cola__planilla-datos dd {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: var(--on-surface);
}

.legal-cola__pago {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.75rem;
}

.legal-cola__check {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--on-surface);
}

.legal-cola__check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--legal-blue);
}

/* Ronda 12 ago 2026 (tarde): bug real -- esto era "display: grid;
   grid-template-columns: 1fr 1fr" (pensado para los campos internos de un
   formulario), pero #cola-form envuelve directo a #cola-entrada + las 4
   vistas. Con esa regla, #cola-entrada y la vista visible quedaban como dos
   columnas del mismo grid -- de ahí que "Ver datos del titular" se viera
   al lado de "Confirma viabilidad" en vez de encima. Ahora apila: el
   encabezado (pasaporte/planilla/datos) y, debajo, la vista activa. El
   grid de 2 columnas de los campos del titular sigue en
   .legal-cola__details-grid, que no cambia. */
.legal-cola__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.legal-cola__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--on-surface-muted);
}

/* Solo hace falta ya dentro de .legal-cola__pago (su propio grid interno de
   2 columnas) -- el resto de estas clases quedaron sueltas de la época en
   que .legal-cola__form era un grid; limpiado en la misma ronda. */
.legal-cola__field--full {
  grid-column: 1 / -1;
}

.legal-cola__field input,
.legal-cola__field textarea,
.legal-cola__field select {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  background: color-mix(in srgb, var(--on-surface) 5%, transparent);
  border-radius: var(--radius-control);
  padding: 0.55rem 0.65rem;
  color: var(--on-surface);
  font: inherit;
  font-size: 0.9rem;
}

.legal-cola__field select {
  cursor: pointer;
}

.legal-cola__field textarea {
  resize: vertical;
  min-height: 12rem;
  line-height: 1.45;
}

.legal-cola__field input:focus,
.legal-cola__field textarea:focus,
.legal-cola__field select:focus {
  outline: 2px solid color-mix(in srgb, var(--legal-blue) 55%, transparent);
  outline-offset: 1px;
}

.legal-cola__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.legal-cola__hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

.legal-cola__btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--legal-blue);
  color: #fff;
}

.legal-cola__btn--ghost {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid color-mix(in srgb, var(--on-surface) 22%, transparent);
  font-weight: 500;
}

.legal-cola__btn--amber {
  background: var(--amber);
  color: var(--navy-deep);
}

.legal-cola__btn:active {
  transform: translateY(1px);
}

/* —— Tras enviar: enlace de seguimiento bien visible —— */
.legal-cert-okfile {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--tramite) 40%, transparent);
  background: color-mix(in srgb, var(--tramite) 12%, transparent);
  font-size: 0.8rem;
  color: var(--on-surface);
  line-height: 1.4;
}

.legal-cert-extra {
  margin: 0.35rem 0 0.75rem;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
  padding: 0.45rem 0.65rem 0.55rem;
}

.legal-cert-extra summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--on-surface-muted);
  list-style: none;
}

.legal-cert-extra summary::-webkit-details-marker {
  display: none;
}

.legal-cert-extra__hint {
  margin: 0.45rem 0 0.55rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

.legal-cert-exito {
  margin-top: 0.5rem;
  padding: 0.9rem 0.85rem;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 40%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.legal-cert-exito__lead {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.4;
}

.legal-cert-exito__link {
  color: var(--legal-blue);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.legal-cert-exito__link:hover {
  text-decoration: underline;
}

.legal-cert-exito__copy {
  appearance: none;
  align-self: flex-start;
  border: 1px solid color-mix(in srgb, var(--on-surface) 20%, transparent);
  background: transparent;
  color: var(--on-surface);
  border-radius: var(--radius-control);
  padding: 0.45rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.legal-cert-exito__code {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--on-surface-muted);
}

.legal-cert-exito__token {
  display: block;
  font-size: 0.65rem;
  word-break: break-all;
  color: var(--on-surface-muted);
  line-height: 1.35;
}

.legal-cert-seguimiento {
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 35%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.legal-cert-seguimiento__label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--on-surface-muted);
}

.legal-cert-seguimiento__link {
  color: var(--legal-blue);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.legal-cert-seguimiento__link:hover {
  text-decoration: underline;
}

.legal-cert-seguimiento__copy {
  appearance: none;
  align-self: flex-start;
  border: 1px solid color-mix(in srgb, var(--on-surface) 20%, transparent);
  background: transparent;
  color: var(--on-surface);
  border-radius: var(--radius-control);
  padding: 0.35rem 0.65rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

/* —— Página cliente: seguimiento sin login —— */
.legal-seg {
  padding: 0 0 2rem;
}

.legal-seg__card {
  padding: 1.1rem 1rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--navy-deep);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 28%, transparent);
  max-width: 34rem;
  margin: 0 auto;
}

.legal-seg__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--legal-blue);
}

.legal-seg__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-headline);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.legal-seg__lead {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--on-surface-muted);
  line-height: 1.45;
}

.legal-seg__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.legal-seg__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--on-surface-muted);
}

.legal-seg__field input {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  background: color-mix(in srgb, var(--on-surface) 5%, transparent);
  border-radius: var(--radius-control);
  padding: 0.6rem 0.7rem;
  color: var(--on-surface);
  font: inherit;
  font-size: 0.9rem;
}

.legal-seg__btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-weight: 600;
  background: var(--legal-blue);
  color: #fff;
  cursor: pointer;
}

.legal-seg__estado {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--on-surface-muted);
}

.legal-seg__estado.is-error {
  color: color-mix(in srgb, var(--selection) 80%, white);
}

.legal-seg__tramite {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--on-surface);
}

.legal-seg__badge {
  display: inline-block;
  margin: 0 0 0.65rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--legal-blue) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--legal-blue) 40%, transparent);
  color: var(--on-surface);
}

.legal-seg__siguiente {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--on-surface);
}

.legal-seg__meta {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.legal-seg__meta dt {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.legal-seg__meta dd {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  color: var(--on-surface);
}

.legal-seg__nota {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

/* —— Segundo tramo de datos (planilla), ronda 11 ago 2026 (tarde) —— */
.legal-seg__planilla {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.legal-seg__planilla-intro {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.legal-seg__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.6rem 0.5rem;
}

.legal-seg__fieldset legend {
  grid-column: 1 / -1;
  padding: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--legal-blue);
}

.legal-seg__field--full {
  grid-column: 1 / -1;
}

.legal-seg__fieldset .legal-seg__field select {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent);
  background: color-mix(in srgb, var(--on-surface) 5%, transparent);
  border-radius: var(--radius-control);
  padding: 0.6rem 0.7rem;
  color: var(--on-surface);
  font: inherit;
  font-size: 0.9rem;
}

.legal-seg__planilla-error {
  margin: 0;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--selection) 80%, white);
}

.legal-seg__planilla-nota {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--on-surface-muted);
}


/* ============================================================
   MIGRACIÓN A CLARO — Legal público (landing). Añadido 13 ago 2026.
   Paleta: azul (legal-blue) · celeste · navy. Sin verde ni ámbar
   (excepción: el verde de marca de WhatsApp, discreto).
   NO cambia estructura, funciones ni procesos.
   Ámbito: body[data-page="entrada"]. NO afecta a la cola interna
   (cola-legal) ni al panel admin. Reversible: borrar este bloque.
   ============================================================ */
body[data-page="entrada"]{
  --navy-deep:#ffffff;
  --neutral:#eef2f8;
  --on-surface:#0c2552;
  --on-surface-muted:#5b6b83;
  --card-moment-gradient:linear-gradient(180deg,#ffffff 0%,#f6f9fe 100%);
  --celeste:#3aa0f0;
  --navi-grad:linear-gradient(135deg,
    color-mix(in srgb, var(--legal-blue) 55%, #0a1628) 0%,
    color-mix(in srgb, var(--legal-blue) 22%, #0a1628) 100%);
  background:linear-gradient(180deg,#f7f9fc 0%,#eaf0f9 100%) !important;
  color:#0c2552;
}
body[data-page="entrada"] .topbar--sub{
  background:#ffffff;
  border-bottom:1px solid color-mix(in srgb, var(--legal-blue) 16%, transparent);
}
body[data-page="entrada"] .subpage-brand__wordmark{ color:#0c2552 !important; }
body[data-page="entrada"] .bottom-nav{
  background:#ffffff;
  border-top:1px solid color-mix(in srgb, var(--legal-blue) 16%, transparent);
}
body[data-page="entrada"] .reloj-cuba{
  background:color-mix(in srgb, var(--celeste) 12%, #ffffff) !important;
  border:1px solid color-mix(in srgb, var(--celeste) 32%, transparent) !important;
  color:#0c2552 !important; border-radius:999px; padding:.28rem .58rem;
}
body[data-page="entrada"] .reloj-cuba__hora{ color:#0c2552 !important; font-weight:600; }
body[data-page="entrada"] .card-moment,
body[data-page="entrada"] .card-moment--legal{
  background:linear-gradient(180deg,#ffffff 0%,#f6f9fe 100%) !important;
  border:1px solid color-mix(in srgb, var(--legal-blue) 14%, transparent) !important;
  box-shadow:0 10px 30px rgba(12,37,82,.06) !important;
}
body[data-page="entrada"] .legal-hero__title{ color:#0c2552 !important; }
body[data-page="entrada"] .legal-card{
  border:1px solid color-mix(in srgb, var(--legal-blue) 14%, transparent) !important;
  border-left:1px solid color-mix(in srgb, var(--legal-blue) 14%, transparent) !important;
  box-shadow:0 6px 18px rgba(12,37,82,.05) !important;
}
body[data-page="entrada"] .legal-card--otros{
  background:linear-gradient(140deg,#F2F8FF 0%,#E4F1FD 100%) !important;
  border:1px solid #C3DCF6 !important;
  border-left:1px solid #C3DCF6 !important;
  box-shadow:0 6px 18px rgba(12,37,82,.05) !important;
}
body[data-page="entrada"] .legal-card--otros .legal-card__title{
  color:#0C2552 !important;
}
body[data-page="entrada"] .legal-card__consulta-cta--otros{
  background:#0C2552 !important;
  border-radius:16px !important;
  justify-content:center !important;
}
body[data-page="entrada"] .legal-card__cifra{ color:#0c2552 !important; }
/* Chips; ELEGIDO = navy como "Cómo funciona" */
body[data-page="entrada"] .legal-card__tipos{
  border:0 !important; background:transparent !important; overflow:visible !important;
  display:flex !important; flex-wrap:wrap !important; gap:.5rem !important; margin:0 0 .9rem !important;
}
body[data-page="entrada"] .legal-card__tipos li{ display:inline-flex !important; }
body[data-page="entrada"] .legal-card__tipos li + li{ border-top:0 !important; }
body[data-page="entrada"] .legal-card__tipo{
  width:auto !important; padding:.44rem .82rem !important; gap:0 !important;
  border:1px solid color-mix(in srgb, var(--legal-blue) 22%, transparent) !important;
  border-radius:999px !important;
  background:color-mix(in srgb, var(--legal-blue) 6%, transparent) !important;
}
body[data-page="entrada"] .legal-card__tipo-check{ display:none !important; }
body[data-page="entrada"] .legal-card__tipo-label{ color:var(--on-surface-muted) !important; font-size:.82rem; }
body[data-page="entrada"] .legal-card__tipo:hover{ background:color-mix(in srgb, var(--legal-blue) 12%, transparent) !important; }
body[data-page="entrada"] .legal-card__tipo[aria-pressed="true"]{
  border-color:color-mix(in srgb, var(--legal-blue) 75%, white) !important;
  background:var(--navi-grad) !important;
}
body[data-page="entrada"] .legal-card__tipo[aria-pressed="true"] .legal-card__tipo-label{ color:#ffffff !important; }
/* ¿Necesitas ayuda? */
body[data-page="entrada"] .legal-cajon-trigger{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--celeste) 14%, #ffffff),
    color-mix(in srgb, var(--legal-blue) 10%, #ffffff)) !important;
  border:1px solid color-mix(in srgb, var(--celeste) 30%, transparent) !important;
  box-shadow:0 8px 22px rgba(12,37,82,.07) !important;
}
body[data-page="entrada"] .legal-cajon-trigger__title{ color:#0c2552 !important; }
body[data-page="entrada"] .legal-cajon-trigger__icon{
  background:color-mix(in srgb, var(--celeste) 18%, #ffffff) !important;
  color:var(--legal-blue) !important;
  border-color:color-mix(in srgb, var(--celeste) 32%, transparent) !important;
}
body[data-page="entrada"] .legal-cajon-trigger__chevron{ color:var(--legal-blue) !important; }
body[data-page="entrada"] .legal-cajon__label--wa{ color:#1faa53 !important; }
body[data-page="entrada"] .legal-cajon__wa{ border-color:color-mix(in srgb, #25d366 42%, transparent) !important; background:color-mix(in srgb, var(--celeste) 5%, #ffffff) !important; }
body[data-page="entrada"] .legal-cajon__wa:focus{
  border-color:color-mix(in srgb, #25d366 65%, transparent) !important;
  box-shadow:0 0 0 2px color-mix(in srgb, #25d366 16%, transparent) !important;
}
body[data-page="entrada"] .legal-cert-preview{ background:color-mix(in srgb, var(--celeste) 8%, #ffffff) !important; }
body[data-page="entrada"] .legal-cert-titular{ background:color-mix(in srgb, var(--celeste) 6%, #ffffff) !important; }
body[data-page="entrada"] .legal-cert-form{ background:color-mix(in srgb, var(--celeste) 5%, #ffffff) !important; }
body[data-page="entrada"] .legal-cajon__title,
body[data-page="entrada"] .legal-cert-title,
body[data-page="entrada"] .legal-cajon__canal{ color:#0c2552 !important; }
/* Pasos: título navy destacado, descripción gris */
body[data-page="entrada"] .legal-cert-como li{ color:#5b6b83 !important; }
body[data-page="entrada"] .legal-cert-como li strong{ color:#0c2552 !important; font-weight:700 !important; }
body[data-page="entrada"] .legal-cert-como__envio{ color:#5b6b83 !important; }
body[data-page="entrada"] .legal-cert-como__envio strong{ color:#0c2552 !important; font-weight:700 !important; }
/* Zonas de subir: base clara + al tocar azul intermedio */
body[data-page="entrada"] .legal-cert-upload,
body[data-page="entrada"] .legal-cert-upload--sm{ background:color-mix(in srgb, var(--celeste) 8%, #ffffff) !important; }
body[data-page="entrada"] .legal-cert-upload:hover,
body[data-page="entrada"] .legal-cert-upload:active,
body[data-page="entrada"] .legal-cert-upload:focus-within,
body[data-page="entrada"] .legal-cert-upload--sm:hover,
body[data-page="entrada"] .legal-cert-upload--sm:active,
body[data-page="entrada"] .legal-cajon__drop:hover,
body[data-page="entrada"] .legal-cajon__drop:active,
body[data-page="entrada"] .legal-cajon__drop:focus-within{
  background:color-mix(in srgb, var(--legal-blue) 18%, #ffffff) !important;
  border-color:color-mix(in srgb, var(--legal-blue) 50%, transparent) !important;
}
/* Panel "¿Deseas avanzar?" + ficha módulo */
body[data-page="entrada"] .tool-intro{ background:color-mix(in srgb, #0c2552 30%, transparent) !important; }
body[data-page="entrada"] .tool-intro__sheet{
  background:#ffffff !important;
  border:1px solid color-mix(in srgb, var(--legal-blue) 16%, transparent) !important;
  box-shadow:0 26px 70px rgba(12,37,82,.26), 0 3px 12px rgba(12,37,82,.14) !important;
}
body[data-page="entrada"] .tool-intro__title,
body[data-page="entrada"] .tool-intro__question{ color:#0c2552 !important; }
body[data-page="entrada"] .tool-intro__desc{ color:#5b6b83 !important; }
body[data-page="entrada"] .tool-intro__back{
  color:#0c2552 !important;
  border:1px solid color-mix(in srgb, var(--legal-blue) 22%, transparent) !important;
}
body[data-page="entrada"] .tool-intro__icon,
body[data-page="entrada"] .module-info-panel__icon{
  background:color-mix(in srgb, var(--celeste) 10%, #ffffff) !important;
  border:1px solid color-mix(in srgb, var(--celeste) 26%, transparent) !important;
  box-shadow:none !important;
}
body[data-page="entrada"] .module-info-overlay{ background:color-mix(in srgb, #0c2552 30%, transparent) !important; }
body[data-page="entrada"] .module-info-panel{ background:#ffffff !important; }
body[data-page="entrada"] .module-info-panel__title{ color:#0c2552 !important; }
body[data-page="entrada"] .module-info-panel__desc{ color:#5b6b83 !important; }
/* "Sí, entrar": no blanco al tocar */
body[data-page="entrada"] .tool-intro__continue{ background:#0c2552 !important; border-color:#0c2552 !important; color:#ffffff !important; }
body[data-page="entrada"] .tool-intro__continue:hover{ background:color-mix(in srgb, #0c2552 86%, #ffffff) !important; color:#ffffff !important; }
/* "Tengo una duda" idéntico a "Cómo funciona" + se oscurece */
body[data-page="entrada"] .legal-cert-link{
  gap:.4rem !important;
  padding:.35rem .7rem .35rem .35rem !important;
  border-radius:999px !important;
  border:1px solid color-mix(in srgb, var(--legal-blue) 38%, transparent) !important;
  background:color-mix(in srgb, var(--legal-blue) 10%, transparent) !important;
  color:color-mix(in srgb, var(--on-surface) 90%, var(--legal-blue)) !important;
  font-size:.78rem !important; font-weight:500 !important;
}
body[data-page="entrada"] .legal-cert-link:hover,
body[data-page="entrada"] .legal-cert-link:active,
body[data-page="entrada"] .legal-cert-link:focus-visible{
  border-color:color-mix(in srgb, var(--legal-blue) 75%, white) !important;
  background:var(--navi-grad) !important;
  color:#ffffff !important;
}
body[data-page="entrada"] .legal-cert-link__hint{
  order:-1 !important;
  width:1.35rem !important; height:1.35rem !important;
  border-radius:999px !important;
  background:var(--legal-blue) !important;
  border:0 !important;
  color:#ffffff !important;
  font-style:normal !important; font-weight:700 !important; font-size:.72rem !important;
}
/* Texto de las zonas de subir en navy (legible sobre claro) */
body[data-page="entrada"] .legal-cert-upload,
body[data-page="entrada"] .legal-cert-upload span,
body[data-page="entrada"] .legal-cajon__drop{ color:#0c2552 !important; }
/* Campos del formulario de certificados (paso "¿Cómo te avisamos?") en claro */
body[data-page="entrada"] .legal-cert-form input[type="email"],
body[data-page="entrada"] .legal-cert-form input[type="text"]{
  background:#ffffff !important;
  color:#0c2552 !important;
  border:1px solid color-mix(in srgb, var(--legal-blue) 26%, transparent) !important;
}
body[data-page="entrada"] .legal-cert-form input::placeholder{ color:#8a99b0 !important; }
/* Nota "Pasaporte listo": de verde a celeste (sin verde, tu paleta) */
body[data-page="entrada"] .legal-cert-okfile{
  border:1px solid color-mix(in srgb, var(--celeste) 30%, transparent) !important;
  background:color-mix(in srgb, var(--celeste) 10%, #ffffff) !important;
  color:#0c2552 !important;
}

/* ── La palabra que decide si el trámite se puede hacer ───────────────────
 *
 * 22 ago 2026, corrección de Fidel: el paso decía «legalizado» y es
 * DIGITALIZADO. No es un matiz de redacción — legalizar y digitalizar son dos
 * gestiones distintas, y pedirle a alguien la que no es le manda a perder
 * tiempo y dinero en Cuba antes de escribirnos.
 *
 * Y por eso va resaltada: es la condición de la que depende que el trámite
 * pueda hacerse o no, dentro de un párrafo donde todo lo demás es
 * procedimiento. Se resalta el requisito, no la frase.
 *
 * Con el azul de Legal, que ya es el color del módulo: un color nuevo aquí
 * sería un idioma nuevo para decir lo mismo. */
.legal-cert-clave {
  color: var(--legal-blue);
  font-weight: 600;
  background: color-mix(in srgb, var(--legal-blue) 13%, transparent);
  border-radius: 0.3rem;
  padding: 0.05em 0.3em;
  /* Que no se parta entre dos líneas: media palabra resaltada se lee como un
     error de maquetación, no como un énfasis. */
  white-space: nowrap;
}

/* —— 25 ago 2026 · «Cómo funciona» arriba, precio dentro ——————————————
   Pedido directo de producto, dos movimientos que van juntos:

   1) «Cómo funciona» sale del asistente de cada certificado y sube al
      catálogo. No lleva estilos nuevos a propósito: reutiliza .legal-cert-links
      / .legal-cert-como-btn / .legal-cert-como tal cual estaban, porque lo que
      se pidió fue moverlo, no rediseñarlo. Aquí solo se le da el aire que
      necesita en su sitio nuevo, encima del catálogo.

   2) El precio baja del catálogo a la pantalla del trámite y ocupa el hueco
      que deja el botón: bajo el título, antes de pedir nada. Fila con la
      etiqueta a la izquierda y la cifra a la derecha — se lee como una línea
      de precio, no como un titular suelto. */
.legal-como-cat {
  margin: 0 0 1.15rem;
}

.legal-como-cat .legal-cert-links {
  margin: 0;
}

.legal-cert-precio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.9rem 0 1.1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--legal-blue) 20%, transparent);
  background: color-mix(in srgb, var(--legal-blue) 8%, transparent);
}

.legal-cert-precio__tag {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.legal-cert-precio__cifra {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--legal-blue);
}

body[data-page="entrada"] .legal-cert-precio {
  background: color-mix(in srgb, var(--celeste) 8%, #ffffff) !important;
}

body[data-page="entrada"] .legal-cert-precio__tag {
  color: #5b6b83 !important;
}

body[data-page="entrada"] .legal-cert-precio__cifra {
  color: #0c2552 !important;
}