/* ===========================================================================
 * Hoja de estilo de las paginas legales estaticas (/legal/privacidad, /legal/terminos).
 *
 * NO pasa por Vite: vive en `public/legal/`, junto al `index.html` de cada pagina, con ruta
 * ESTABLE (`/legal/estilo.css`) a proposito -- estas paginas no son parte del bundle de React
 * (las genera `scripts/render-legal.mjs` a partir de Markdown), asi que no tienen manera de
 * importar `src/estilos/global.css` ni de beneficiarse del hash de `/assets/`.
 *
 * Los valores de las variables de abajo son un SUBSET COPIADO A MANO de
 * `apps/pasajero/src/estilos/global.css` (acento ambar, tipografia del sistema, colores light/
 * dark) -- deliberado, no un descuido: la idea es que estas paginas se vean del mismo producto,
 * sin inventar una paleta nueva. Al tocar el acento o los colores base en `global.css`, replicar
 * el cambio aca a mano; los dos archivos no se pueden compartir en build time porque uno vive
 * dentro del bundle de Vite y el otro es un estatico servido tal cual.
 * =========================================================================== */

:root {
  color-scheme: light dark;

  --ambar: #b26a00;
  --fondo: #ffffff;
  --superficie: #f6f5f3;
  --texto: #1c1b19;
  --tenue: #5d5a55;
  --linea: #d6d2cb;

  --sans:
    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ambar: #f2a93b;
    --fondo: #14120f;
    --superficie: #1e1b17;
    --texto: #f0ece5;
    --tenue: #a8a196;
    --linea: #38332b;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* Una sola columna de lectura. `ch` acota el ancho a algo legible sin depender de un breakpoint
   -- es texto legal largo, no un layout de app. */
.legal {
  width: min(70ch, 100% - 40px);
  margin: 0 auto;
  padding: 32px 0 calc(48px + env(safe-area-inset-bottom));
}

.legal h1 {
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.legal h2 {
  font-size: 1.2rem;
  font-weight: 650;
  margin: 2em 0 0.6em;
  padding-top: 0.6em;
  border-top: 1px solid var(--linea);
}

.legal h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.legal p,
.legal ul,
.legal ol {
  margin: 0.8em 0;
}

.legal ul,
.legal ol {
  padding-left: 1.4em;
}

.legal li {
  margin: 0.3em 0;
}

.legal a {
  color: var(--ambar);
}

.legal strong {
  font-weight: 650;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.92rem;
}

.legal th,
.legal td {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--linea);
  vertical-align: top;
}

.legal th {
  background: var(--superficie);
}

.legal hr {
  border: none;
  border-top: 1px solid var(--linea);
  margin: 2em 0;
}