/* ─────────────────────────────────────────────────────────────────────────────
   nowa.css — hoja compartida de nowa-pos.com: la portada y las tres páginas
   legales (privacidad, términos, soporte).

   IDENTIDAD. Los valores de color, espacio, radio y sombra están copiados TAL
   CUAL del design system de Nowa (la copia viva está en
   projects/nowa-menu-qr/nowa.css), para que el sitio y el menú QR del comensal se
   lean como la misma marca: papel cálido, carbón y brasa. Aquí vive SOLO el
   subconjunto que un sitio de documentos usa. Lo que no aplica —los tonos de
   estado de inventario, la escala del KDS, los tamaños de control— no se copia:
   una hoja llena de tokens que nadie usa no es un design system, es ruido.

   SIN NADA EXTERNO. Tipografía del sistema, ni una fuente ni una hoja de fuera.
   El menú QR sí carga Instrument Sans desde Google Fonts; este sitio no puede:
   la página principal es una política de tratamiento de datos, y cada host de
   terceros que se cargara vería la IP de quien la está leyendo. build.sh corta el
   despliegue si alguien mete un CDN o una fuente remota.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Primitivos de marca: BRASA ──────────────────────────────────────────
     Símbolo #E37D45, seleccionado #93400F. Mismos hexadecimales que el POS. */
  --color-brand-400: #E9925A;
  --color-brand-600: #E37D45;
  --color-brand-800: #93400F;

  /* ── Crítico ─────────────────────────────────────────────────────────────
     La única rampa de estado que este sitio necesita. No está por decorar: la
     usa .pendiente, que marca los huecos que un documento legal no puede llevar
     al aire (razón social, NIT). Mismos valores que el POS. */
  --color-critical-50: #FEF1F0;
  --color-critical-300: #F79B94;
  --color-critical-400: #F06A60;
  --color-critical-600: #C42D20;
  --color-critical-700: #A3241A;

  /* ── Neutros del design system ──────────────────────────────────────────── */
  --color-neutral-0: #FFFFFF;
  --color-neutral-200: #E4E2EB;
  --color-neutral-300: #CFCCD9;
  --color-neutral-500: #7D788D;
  --color-neutral-600: #5C5769;
  --color-neutral-900: #1A1724;

  /* ── Cálidos ─────────────────────────────────────────────────────────────
     El papel y el carbón del menú QR, que es lo que le da temperatura a la
     marca. Cinco vienen tal cual de nowa-menu-qr/index.html (papel, tinta tenue,
     borde carbón, carbón e inverso) y todavía no están en el JSON maestro del
     design system: se suben cuando se regenere. Los TRES marcados abajo son
     nuevos de este sitio, y cada uno responde a algo que el menú no tiene:
     documentos largos en oscuro y cajas sobre papel cálido.

     Comprobado, no supuesto: en claro el cuerpo da 16,3:1 sobre el papel, el
     texto secundario 6,5:1 y el enlace 6,5:1; en oscuro, 17,6:1, 8,4:1 y 7,9:1.
     El terciario (#7D788D) se queda en 3,9:1 sobre papel, así que NO se usa para
     texto que haya que leer —solo para las viñetas—: la fecha del documento y el
     pie van en secundario. */
  --color-warm-paper: #F9F6F1;
  --color-warm-100: #F2ECE3;  /* NUEVO: superficie hundida cálida (índice, notas) */
  --color-warm-300: #B7ABA0;  /* NUEVO: texto secundario en oscuro */
  --color-warm-400: #877A6E;
  --color-warm-700: #4A3F35;  /* NUEVO: borde fuerte en oscuro */
  --color-warm-800: #352D26;
  --color-warm-900: #211C17;
  --color-warm-950: #14100C;

  /* ── Semánticos (modo claro) ─────────────────────────────────────────────
     Mismos nombres que el design system: quien venga del POS o del menú los
     reconoce. --color-text-brand es brand-800 y no brand-600 porque un enlace
     hay que poder leerlo: #E37D45 sobre papel da 2,3:1 y #93400F da 6,5:1. */
  --color-bg-page: var(--color-warm-paper);
  /* El design system pone aquí neutral-100 (#F1F0F5), que es un gris FRÍO. Sobre
     el papel cálido de este sitio, una caja de ese gris —el índice, las notas— se
     ve lavanda al lado del texto. Se usa el mismo papel un paso más abajo. */
  --color-bg-sunken: var(--color-warm-100);
  --color-bg-inverse: var(--color-warm-900);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-brand: var(--color-brand-800);
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-feedback-critical-bg: var(--color-critical-50);
  --color-feedback-critical-solid: var(--color-critical-600);
  --color-feedback-critical-text: var(--color-critical-700);
  /* «Inverso» = lo contrario del papel de esta página, sea cual sea. En claro es
     el carbón con la N brasa; en oscuro se da la vuelta (ver más abajo), porque
     un cuadrado carbón sobre una página carbón no es una marca, es un hueco.
     --color-text-on-inverse no existe todavía en el JSON maestro. */
  --color-text-on-inverse: var(--color-brand-600);

  /* ── Espaciado (ritmo del design system) ────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-md: 8px;

  /* ── Tipografía ──────────────────────────────────────────────────────────
     Las dos familias del design system, sin la capa de Google Fonts que le
     pone encima el menú QR. */
  --font-family-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* La escala del design system está calibrada para la UI del POS: densa,
     cuerpo de 15px, pensada para mirar de reojo entre pedido y pedido. Un
     documento legal es lo contrario: se lee entero, seguido y casi siempre en el
     teléfono. Por eso el cuerpo sube a 17px, el interlineado a 1.65 y la línea se
     corta en ~70 caracteres, que es donde el ojo encuentra el renglón siguiente
     sin perderse. Es una desviación deliberada, no un descuido. */
  --doc-size: 17px;
  --doc-line: 1.65;
  --medida: 38rem;
}

/* Modo oscuro. Solo se re-mapean los semánticos: los primitivos no cambian, así
   que sigue siendo la misma marca con otra luz. El oscuro es CARBÓN CÁLIDO (el
   mismo #14100C de la barra del carrito del menú), no un gris azulado: leer un
   documento largo sobre carbón frío cansa más. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page: var(--color-warm-950);
    --color-bg-sunken: var(--color-warm-900);
    --color-bg-inverse: var(--color-warm-paper);
    --color-text-on-inverse: var(--color-brand-800);
    --color-text-primary: var(--color-warm-paper);
    --color-text-secondary: var(--color-warm-300);
    --color-text-tertiary: var(--color-warm-400);
    --color-text-brand: var(--color-brand-400);
    --color-border-default: var(--color-warm-800);
    --color-border-strong: var(--color-warm-700);
    /* En oscuro el rojo claro sobre un fondo rojo no existe: el aviso se apoya en
       la superficie hundida y lo rojo queda en la barra y en el texto. */
    --color-feedback-critical-bg: var(--color-warm-900);
    --color-feedback-critical-solid: var(--color-critical-400);
    --color-feedback-critical-text: var(--color-critical-300);
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, ul, ol, li, dl, dd, table, figure, blockquote {
  margin: 0;
  padding: 0;
}

html {
  /* Safari en horizontal infla el texto por su cuenta; en un documento con la
     medida ya calculada, eso rompe el ancho de línea. */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-ui);
  font-size: var(--doc-size);
  line-height: var(--doc-line);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-brand-600);
  color: var(--color-neutral-0);
}

/* DOS VOCABULARIOS, UNA HOJA. La portada y las tres páginas legales se
   escribieron en paralelo y llegaron con nombres de clase distintos para las
   mismas cosas: .pagina/.doc, .entrada/.lede, .fecha/.vigencia, .nota/.aviso,
   .cabecera/.site-header, .pie/.site-footer. En vez de reescribir cuatro páginas
   —y en vez de dejar tres cuartas partes del sitio sin estilo— la hoja responde a
   los dos, agrupando selectores sobre una sola declaración. No hay reglas
   duplicadas: si mañana se unifica el nombre, se borra el sobrante de la lista y
   nada más. */

/* Contenedor único. Se aplica a la cabecera, al contenido y al pie por separado
   para que las líneas divisorias empiecen y acaben donde acaba el texto. */
.pagina,
.doc,
.site-header,
.site-footer {
  max-width: var(--medida);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.cabecera,
.site-header {
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
}

/* Las páginas legales llevan cabecera con navegación: el nombre a la izquierda y
   las cuatro páginas del sitio al lado. Se envuelve en pantalla estrecha en vez
   de encogerse, porque cuatro enlaces apretados en un teléfono no se aciertan. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
}

/* El nombre de la marca en esas cabeceras es texto, no el cuadrado de la
   portada: se le da el mismo peso para que las cuatro páginas empiecen igual. */
.site-header > a:first-child {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  text-decoration: none;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* El mismo cuadrado con la N brasa que lleva el menú QR arriba a la izquierda.
   Se invierte con el tema (carbón sobre papel, papel sobre carbón) y por eso la
   letra cambia de tono: brasa clara sobre carbón da 5,9:1 y brasa oscura sobre
   papel 6,5:1, mientras que dejar fija la clara sobre papel daría 2,5:1. */
.marca-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-inverse);
  color: var(--color-text-on-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
}

.marca-nombre {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Jerarquía del documento ──────────────────────────────────────────────── */

h1 {
  /* clamp en vez de media query: el título más largo que va a existir aquí es
     «Política de tratamiento de datos personales» y tiene que caber en un
     teléfono estrecho sin partirse en cinco renglones. */
  font-size: clamp(27px, 6.5vw, 32px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

/* La línea sobre cada h2 es lo que hace hojeable un documento largo: marca dónde
   empieza cada obligación sin tener que leerla. */
h2 {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-default);
  margin-bottom: var(--space-4);
}

/* Los términos separan sus dos partes con un <hr> propio, y ese <hr> cae justo
   antes de un h2 que YA trae su divisoria: salían dos líneas paralelas a cuatro
   dedos una de otra. Cuando el documento ya puso la suya, el h2 cede la propia.
   Hacen falta las dos formas porque unas veces el h2 va suelto tras el <hr> y
   otras viene envuelto en la <section> que abre. */
hr + h2,
hr + section > h2:first-child {
  border-top: 0;
  padding-top: 0;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

p, ul, ol, dl, .nota, .tabla {
  margin-bottom: var(--space-4);
}

/* El <hr> del navegador es un bisel de los noventa. Se deja en la misma hairline
   que las divisorias de los h2 y del pie, para que el documento tenga una sola
   línea y no tres distintas. */
hr {
  border: 0;
  border-top: 1px solid var(--color-border-default);
  margin: var(--space-8) 0;
}

/* Entradilla: el párrafo que resume la página antes del primer h2. */
.entrada,
.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* La vigencia del documento, al principio de cada página legal. Se distingue del
   cuerpo por tamaño y color, NO por versalitas: aquí no siempre cabe un «22 de
   agosto de 2026» y ya —los términos explican además que ésta es la primera
   versión—, y dos frases enteras en mayúsculas se leen bastante peor. Va en
   secundario y no en terciario porque en un documento legal saber qué versión
   estás leyendo es justo lo que hay que poder leer. */
.fecha,
.vigencia {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

ul, ol {
  padding-left: 1.3em;
}

li {
  margin-bottom: var(--space-2);
}

li > ul, li > ol {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

li::marker {
  color: var(--color-text-tertiary);
}

/* Listas de definiciones: para los glosarios («responsable», «encargado»,
   «titular») que la Ley 1581 obliga a dejar claros. */
dt {
  font-weight: 600;
  margin-top: var(--space-4);
}

dd {
  margin-left: 0;
  color: var(--color-text-secondary);
}

strong, b { font-weight: 600; }

code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  background: var(--color-bg-sunken);
  border-radius: 4px;
  padding: 2px 5px;
  /* Un NIT o una resolución no se parten a mitad de renglón. */
  white-space: nowrap;
}

/* ── Enlaces ──────────────────────────────────────────────────────────────── */

a {
  color: var(--color-text-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Foco visible con el anillo de marca. Sin esto, quien navega con el teclado no
   sabe dónde está: en un documento de veinte enlaces eso es no poder leerlo. */
:focus-visible {
  outline: 2px solid var(--color-brand-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Tablas ───────────────────────────────────────────────────────────────── */

/* Una tabla de finalidades o de plazos no cabe en 375px. El envoltorio la deja
   desplazarse sola, en vez de arrastrar toda la página en horizontal:
   <div class="tabla"><table>…</table></div> */
.tabla {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  line-height: 1.5;
}

/* El título de la tabla, alineado con ella y no centrado como lo deja el
   navegador: en un documento de texto a la izquierda, un título centrado sobre
   la tabla parece un pie suelto de otra cosa. */
caption {
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding-bottom: var(--space-2);
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-default);
}

th {
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom-color: var(--color-border-strong);
}

/* ── Nota al margen ───────────────────────────────────────────────────────── */

/* Para lo que hay que leer sí o sí: un plazo, una excepción, un «esto no lo
   hacemos». La banda brasa a la izquierda lo separa del cuerpo sin gritar. */
.nota,
.aviso {
  background: var(--color-bg-sunken);
  border-left: 3px solid var(--color-brand-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.nota :last-child,
.aviso :last-child { margin-bottom: 0; }

/* ── Índice de documentos (portada) ───────────────────────────────────────── */

.documentos {
  list-style: none;
  padding: 0;
}

.documentos li {
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-default);
}

.documentos li:last-child {
  border-bottom: 1px solid var(--color-border-default);
}

.documentos a {
  font-size: 17px;
  font-weight: 600;
}

.documentos p {
  margin: var(--space-1) 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.pie,
.site-footer {
  margin-top: var(--space-12);
  padding-bottom: var(--space-10);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* La divisoria va en un pseudo-elemento y no en el borde del .pie a propósito.
   El pie ES el contenedor .pagina, así que un border-top suyo se dibujaría
   también sobre los 20px de relleno lateral y saldría más ancho que las
   divisorias de los h2 y de la lista de documentos, que sí van por dentro. Un
   bloque hijo respeta el relleno y las tres líneas quedan alineadas. */
.pie::before,
.site-footer::before {
  content: "";
  display: block;
  border-top: 1px solid var(--color-border-default);
  margin-bottom: var(--space-6);
}

.pie p,
.site-footer p { margin-bottom: var(--space-3); }
.pie p:last-child,
.site-footer p:last-child { margin-bottom: 0; }

/* Las tres páginas legales se enlazan entre sí desde el pie: quien acaba de leer
   los términos suele querer la política, y no debería tener que volver atrás. */
.pie-enlaces {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.pie-enlaces li { margin: 0; }

/* La misma tira de enlaces, en la variante que usan las páginas legales: ahí son
   <a> sueltos dentro de un <nav>, sin lista. Van sin subrayado porque en una
   barra de navegación el subrayado sobra; se enciende al pasar por encima y con
   el teclado, y la página en la que estás va marcada con aria-current. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: 15px;
}

.site-nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--color-text-brand);
  text-decoration: underline;
}

.site-nav a[aria-current] {
  color: var(--color-text-primary);
  font-weight: 600;
}

.site-footer .site-nav { margin-bottom: var(--space-4); }

/* ── Índice del documento ─────────────────────────────────────────────────── */

/* La política tiene diecisiete secciones. Sin índice, encontrar «cómo ejercer
   mis derechos» obliga a leerla entera, que es justo lo que hace que nadie la
   lea. Va en caja hundida para que se distinga del cuerpo de un vistazo. */
.toc {
  background: var(--color-bg-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-8);
  font-size: 15px;
}

.toc ol {
  margin: 0;
  padding-left: 1.4em;
}

.toc li {
  margin-bottom: var(--space-1);
  line-height: 1.45;
}

.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ── Marca de pendiente ───────────────────────────────────────────────────── */

/* Un hueco declarado dentro de un documento legal —la razón social, el NIT— no
   es una nota al margen: es algo que NO puede llegar a producción. Por eso no
   comparte el estilo tranquilo de .nota y se pinta en rojo, para que moleste
   mientras siga ahí. Lo ideal es que build.sh también se niegue a empaquetar una
   página que la contenga; hoy no lo hace. */
.pendiente {
  background: var(--color-feedback-critical-bg);
  border-left: 3px solid var(--color-feedback-critical-solid);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-feedback-critical-text);
}

.pendiente a { color: inherit; }

/* ── Impresión ────────────────────────────────────────────────────────────── */

/* Un documento legal se imprime o se guarda en PDF más de lo que parece: cuando
   alguien reclama, quiere el papel. Se quita el fondo, se suelta la medida y los
   enlaces externos se convierten en su dirección, porque en papel un subrayado
   azul no lleva a ningún sitio. */
@media print {
  body {
    background: #FFF;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }

  .pagina {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  a {
    color: #000;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  h2, h3 {
    break-after: avoid;
  }

  .nota,
.aviso {
    border: 1px solid #000;
    background: none;
  }
}