/* ============================================================================
   Páginas legales (/terms, /privacy) en el shell nuevo — flag `legal_shell`.
   Se carga DESPUÉS de seia-suite.css y depende de sus tokens: acá no se
   declara ningún color.

   Todo scopeado bajo `.legal-page`, por lo mismo que `auth.css` bajo
   `.auth-page`: seia-suite.css scopea sus reglas bajo `.seia-suite`
   (`.seia-suite a` = 0,1,1), así que una regla de UNA clase pierde por
   especificidad sin importar el orden de los archivos.

   Y el corolario que costó un hallazgo de code review en auth: el scoping
   también hace GANAR duelos que no se querían pelear. Por eso acá ninguna
   regla de hover toca `.btn` a secas — solo `.btn-primary` — para no pintar
   los botones fantasma de la topbar.
   ============================================================================ */

.legal-page {
  --legal-doc: 720px;   /* medida de lectura del documento */
  --legal-toc: 208px;   /* columna del índice */
  /* Focus ring del DS §2.5 (anillo blanco 2px + teal-700 4px, 5:1), el mismo
     token que declara auth.css. */
  --shadow-focus: 0 0 0 2px #fff, 0 0 0 4px var(--teal-700);
}

/* Sin modo oscuro (DS §1.4 lo posterga a v1.1). Los templates viejos traían un
   bloque `prefers-color-scheme` propio que ninguna otra pantalla del sitio
   respeta. */

/* ---- Layout: índice sticky + documento ----------------------------------
   Una sola columna hasta 1024px. El índice no es decoración: estas dos páginas
   son secuencias numeradas de 11 secciones y a quien las abre normalmente le
   interesa UNA (cookies, sus derechos, pagos). Es una lista de enlaces, sin
   scroll-spy ni JS. */
.legal-page .legal-wrap {
  padding: 44px 20px 80px;
  display: grid;
  grid-template-columns: minmax(0, var(--legal-doc));
  justify-content: center;
  gap: 48px;
}
@media (min-width: 1024px) {
  .legal-page .legal-wrap {
    grid-template-columns: var(--legal-toc) minmax(0, var(--legal-doc));
  }
}

.legal-page .legal-toc { display: none; }
@media (min-width: 1024px) {
  .legal-page .legal-toc {
    display: block;
    /* 48 de topbar sticky + aire */
    position: sticky;
    top: 72px;
    align-self: start;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
}
.legal-page .legal-toc-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.legal-page .legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.legal-page .legal-toc ol a {
  display: block;
  padding: 4px 0 4px 22px;
  position: relative;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-3);
  text-decoration: none;
}
/* El número es TEXTO del enlace, no un `counter()` en un `::before`. Dos
   razones, las dos aprendidas acá:
   1. Un contador usado fuera de su ámbito no falla, resuelve a 0 — colgando la
      regla de `.legal-toc a` en vez de `ol a`, el enlace del pie del índice
      salía rotulado "0".
   2. El contenido generado por CSS se anuncia de forma despareja entre lectores
      de pantalla, y con `list-style: none` WebKit además le quita al `ol` la
      semántica de lista. O sea que justo el dato por el que existe el número
      —la cláusula se cita por su número— era el que se perdía.
   Como contrapartida los números se escriben a mano y podrían desfasarse de las
   secciones; eso lo cubre un test que compara entrada por entrada. */
.legal-page .legal-toc-n {
  position: absolute;
  left: 0;
  top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}
.legal-page .legal-toc ol a:hover { color: var(--teal-700); }
.legal-page .legal-toc ol a:hover .legal-toc-n { color: var(--teal-700); }
.legal-page .legal-toc-alt {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
}
.legal-page .legal-toc-alt a { color: var(--teal-700); text-decoration: none; font-weight: 500; }
.legal-page .legal-toc-alt a:hover { text-decoration: underline; }

/* ---- Bloque de apertura (accent-line de §3.13, igual que auth) ------------ */
.legal-page .legal-head {
  margin-bottom: var(--space-6);
  padding-bottom: 4px;
}
.legal-page .legal-head .eyebrow { display: block; }
.legal-page .legal-head h1 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink-1);
  margin: 0 0 6px;
}
.legal-page .legal-updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
  margin: 0;
}
.legal-page .legal-head::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--teal-600);
  margin-top: 14px;
}

/* ---- Documento -----------------------------------------------------------
   Métricas de `.prose-pub` (biblioteca v4), que es el único estilo de texto
   largo del sistema nuevo: serif 15/1.7 sobre ink-2. Está copiado y no
   importado porque `.prose-pub` vive dentro de `biblioteca-v4.css` (37 KB de
   una pantalla entera): traerlo por dos páginas de texto sería peor. Promover
   ese primitivo a un archivo compartido queda como deuda en el DS. */
.legal-page .legal-doc {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
}
.legal-page .legal-doc section {
  margin-bottom: var(--space-6);
  /* La topbar es sticky (48px): sin esto un salto por #ancla deja el título
     tapado. */
  scroll-margin-top: 68px;
}
.legal-page .legal-doc h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-1);
  margin: 0 0 10px;
}
.legal-page .legal-doc h3 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  margin: 18px 0 8px;
}
.legal-page .legal-doc p { margin: 0 0 1.1em; }
.legal-page .legal-doc p:last-child { margin-bottom: 0; }
.legal-page .legal-doc strong { font-weight: 600; color: var(--ink-1); }
.legal-page .legal-doc ul { margin: 0 0 1.1em; padding-left: 1.3em; }
.legal-page .legal-doc ul ul { margin: 0.3em 0 0.4em; }
.legal-page .legal-doc li { margin: 0.3em 0; }
.legal-page .legal-doc li::marker { color: var(--ink-5); }
.legal-page .legal-doc a {
  color: var(--teal-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* Sin estilo de `code`: estos documentos ya no nombran cookies ni claves. Si
   alguna vez vuelve un identificador literal al texto, mirar `.chip-mono`. */

/* Callout de §3.26 para el aviso que la gente sí necesita leer: los datos son
   una copia indexada de fuentes públicas y no reemplazan la consulta oficial. */
.legal-page .legal-note {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--teal-50);
  border: 1px solid var(--teal-200);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0 0 var(--space-5);
}

/* ---- Pie ----------------------------------------------------------------- */
.legal-page .legal-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-sans);
  font-size: 12.5px;
}
.legal-page .legal-foot a { color: var(--teal-700); text-decoration: none; font-weight: 500; }
.legal-page .legal-foot a:hover { text-decoration: underline; }
.legal-page .legal-foot .legal-foot-meta { color: var(--ink-4); margin-left: auto; }

/* Acotado a lo que se puede enfocar en estas páginas. Alcanza también a los
   enlaces del chrome, a propósito: seia-suite.css no les define anillo de foco
   y acá es una mejora, no un choque — es `:focus-visible`, no color ni fondo. */
.legal-page a:focus-visible,
.legal-page .btn:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-focus);
}

@media (max-width: 560px) {
  .legal-page .legal-wrap { padding: 28px 16px 56px; }
  .legal-page .legal-head h1 { font-size: 23px; }
  .legal-page .legal-foot .legal-foot-meta { margin-left: 0; width: 100%; }
}