/* ═══════════════════════════════════════════════════════════════════════════
   Las páginas legales de la plataforma.

   Se copia a `css/legal.css` de cada dominio al publicar y se carga DESPUÉS de
   `landing.css`. Una sola fuente para las cinco landings, por lo mismo que
   `comun.js`: escribirlo cinco veces es escribir cinco cosas que se separan.

   Por qué existe, y no es sólo estética:

   1. Dos de las cinco landings no tenían NINGUNA regla legal. Sus documentos
      salían con el estilo por defecto del navegador.
   2. Ninguna de las cinco estilaba tablas ni listas. Los documentos colombianos
      son los primeros que las traen —el reparto de responsabilidades, las
      categorías de cookies, el inventario— y una tabla sin estilo, en una
      página de 66 caracteres de ancho, se sale por la derecha.
   3. Los nombres de los tokens NO coinciden entre landings: aquí `--linea` y
      allí `--line`, `--tinta` y `--ink`. Por eso cada valor se pide con los dos
      nombres y un literal detrás. Sin el literal, un dominio nuevo saldría sin
      color.

   Un documento legal se lee y se imprime. Las dos cosas están cuidadas.
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-body .col{
  /* La medida manda. Una línea de 66 caracteres se lee; una de 140 se abandona,
     y estos textos ya cuestan bastante de leer. */
  max-width:66ch;
  font-size:16.5px;
  line-height:1.62;
  color:var(--suave, var(--ink-soft, #5C5148));
}

/* ── jerarquía ───────────────────────────────────────────────────────────── */
/* El espacio de encima es lo que separa un apartado del anterior. Sin él, doce
   apartados son un muro. */
.legal-body h2{
  font-size:20px; line-height:1.25; margin:38px 0 12px;
  color:var(--tinta, var(--ink, #181310));
}
.legal-body h2:first-child{ margin-top:0 }
.legal-body h3{
  font-size:16.5px; line-height:1.3; margin:26px 0 8px; font-weight:650;
  color:var(--tinta-2, var(--ink-2, #2C231D));
}
.legal-body p{ margin:0 0 13px }
.legal-body strong,
.legal-body b{ color:var(--tinta, var(--ink, #181310)); font-weight:650 }

/* La ficha de cabecera del documento —«Operador: The Automatic Office Corp»—
   son pares dato/valor seguidos. Juntos y con la etiqueta en negrita se leen
   como una ficha; con el interlineado de un párrafo normal, como un párrafo
   roto. */
.legal-body p > b:first-child{ color:var(--tinta, var(--ink, #181310)) }

/* ── listas ──────────────────────────────────────────────────────────────── */
/* No las tenía ninguna landing. Los documentos colombianos traen 27 viñetas en
   la política de datos. */
.legal-body ul{ margin:0 0 15px; padding-left:22px }
.legal-body li{ margin-bottom:7px }
.legal-body li::marker{ color:var(--oro, var(--spark, #C08A2E)) }

/* ── tablas ──────────────────────────────────────────────────────────────── */
/* El motivo real de esta hoja. El inventario de cookies tiene siete columnas y
   la columna del texto legal mide 66 caracteres: sin `overflow-x` la tabla se
   sale de la página y en un móvil se pierde media.
   El envoltorio lo pone `_render_legal_pages`, no el documento. */
.legal-tabla{
  /* La tabla se sale de la medida del texto, a propósito. El párrafo quiere 66
     caracteres para leerse; el inventario de cookies tiene siete columnas y
     dentro de 66 caracteres cada celda se parte en seis líneas. A la derecha
     hay sitio de sobra: la columna de lectura ocupa la mitad del ancho.
     En un móvil, `100vw - 44px` la devuelve dentro y queda el desplazamiento. */
  width:min(1060px, calc(100vw - 44px));
  overflow-x:auto;
  margin:0 0 18px;
  border:1px solid var(--linea, var(--line, #E4DACB));
  border-radius:var(--r, 6px);
  /* Que se vea que hay más a la derecha antes de intentar arrastrar. */
  background:
    linear-gradient(to right, var(--blanco, #fff) 30%, rgba(255,255,255,0)),
    linear-gradient(to left,  var(--blanco, #fff) 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.09), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.09), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
}
.legal-body table{
  border-collapse:collapse;
  width:100%;
  min-width:720px;
  font-size:15px;
  line-height:1.5;
}
.legal-body thead th{
  text-align:left;
  font-weight:650;
  font-size:13.5px;
  letter-spacing:.01em;
  color:var(--tinta, var(--ink, #181310));
  background:var(--papel-2, var(--mist, #F3ECE1));
  padding:10px 13px;
  border-bottom:1px solid var(--linea, var(--line, #E4DACB));
  vertical-align:bottom;
}
.legal-body tbody td{
  padding:11px 13px;
  border-bottom:1px solid var(--linea, var(--line, #E4DACB));
  vertical-align:top;
}
.legal-body tbody tr:last-child td{ border-bottom:0 }
/* El nombre técnico de una cookie se compara carácter a carácter. En
   proporcional, `eg_order` y `eg_orden` se parecen demasiado. */
.legal-body tbody td:first-child{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;
  font-size:13.5px;
  white-space:nowrap;
  color:var(--tinta, var(--ink, #181310));
}

/* ── cabecera, pie y vuelta ──────────────────────────────────────────────── */
.legal-head{ border-bottom:1px solid var(--linea, var(--line, #E4DACB)) }
.legal-meta{ font-size:13.5px; opacity:.65; margin-top:10px }
.legal-body .back{
  display:inline-block; margin-top:36px; text-decoration:none; font-weight:650;
  border-bottom:2px solid var(--oro, var(--spark, #C08A2E)); padding-bottom:2px;
  color:var(--tinta, var(--ink, #181310));
}

/* ── impresión ───────────────────────────────────────────────────────────── */
/* Una política de tratamiento de datos se imprime y se archiva. Sin esto sale
   con el fondo crema, la cabecera de marca y las tablas partidas por la mitad. */
@media print{
  .legal-head{ border:none; padding:0 0 18pt }
  .legal-head .mark, .foot, .back, nav{ display:none !important }
  .legal-head h1{ font-size:20pt }
  .legal-meta{ font-size:9pt }
  .legal-body{ padding:0 }
  .legal-body .col{ max-width:none; font-size:10pt; color:#000 }
  .legal-body h2{ font-size:13pt; margin:16pt 0 6pt; page-break-after:avoid }
  .legal-body h3{ font-size:11pt; page-break-after:avoid }
  .legal-body p, .legal-body li{ font-size:10pt; line-height:1.45; orphans:3; widows:3 }
  .legal-tabla{ overflow:visible; border:0; background:none }
  .legal-body table{ font-size:9pt; min-width:0; page-break-inside:avoid }
  .legal-body thead th{ background:none; border-bottom:1px solid #000 }
  .legal-body tbody td{ border-bottom:1px solid #ccc }
  body{ background:#fff; color:#000 }
  @page{ margin:18mm 16mm 20mm }
}