/* Páginas legales de CataGo — /terminos, /privacidad, /cookies y
   /privacidad-pedido (rama claude/integracion-legal, 2026-09-24).

   UNA sola hoja para las cuatro, no un <style> copiado cuatro veces: son
   documentos largos, con tablas y listas, y cuatro copias de esto se
   desincronizan a la primera corrección de tipografía. Va en public/css/, así
   que el servidor la precomprime al arrancar sola (ver ESTATICOS_COMPRIMIDOS
   en server.js — recorre la carpeta, no una lista escrita a mano).

   El color sale SOLO de tokens.css, y de los semánticos del bloque 2 (regla 9
   de CLAUDE.md). Ni un #hex aquí, salvo el `theme-color` de cada <meta>, que
   es una de las excepciones anotadas y vive en el HTML, no aquí.

   Nada de tema oscuro propio: hoy NINGUNA página pública del sitio (portada,
   login, registro, recuperar) lo tiene, y dárselo solo a las legales las
   dejaría distintas de las páginas desde las que se llega a ellas. Como todo
   el color sale de tokens.css, el día que el sitio público tenga tema oscuro
   estas cuatro lo heredan sin tocar este archivo. */

*{box-sizing:border-box;margin:0;padding:0;font-family:'Inter',system-ui,sans-serif;}
body{background:var(--cg-fondo);color:var(--cg-texto);line-height:1.7;}

/* ---- Barra de arriba ---- */
.top{background:var(--cg-nav-bg);color:var(--cg-texto-invertido);}
.top-in{max-width:880px;margin:0 auto;padding:16px 20px;display:flex;justify-content:space-between;gap:14px;align-items:center;}
.brand{font-weight:800;text-decoration:none;color:var(--cg-texto-invertido);font-size:1.05rem;}
.back{color:var(--cg-texto-invertido);text-decoration:none;border:1px solid var(--cg-sobre-oscuro-borde);border-radius:999px;padding:8px 15px;font-size:.86rem;min-height:38px;display:inline-flex;align-items:center;}
.back:hover{background:var(--cg-sobre-oscuro-sutil-hover);}

/* ---- La hoja del documento ---- */
.doc{max-width:880px;margin:0 auto;padding:30px 20px 60px;}
.card{background:var(--cg-superficie);border:1px solid var(--cg-borde);border-radius:18px;padding:32px 34px 36px;box-shadow:var(--cg-sombra-1);}

h1{color:var(--cg-azul-700);font-size:1.95rem;line-height:1.2;margin-bottom:10px;letter-spacing:-.01em;}
h2{color:var(--cg-azul-700);font-size:1.16rem;line-height:1.35;margin:34px 0 10px;scroll-margin-top:16px;}
h3{color:var(--cg-texto);font-size:1rem;margin:22px 0 6px;}
h2+h3{margin-top:14px;}

/* Versión y fecha: siempre visibles, arriba del todo. El número no está
   escrito aquí ni en el HTML — lo inyecta server.js al arrancar desde
   LEGAL_DOCS, antes de precomprimir (ver paginaLegal()). */
.meta{color:var(--cg-texto-suave);font-size:.88rem;margin-bottom:6px;line-height:1.6;}
.meta .ver{display:inline-block;background:var(--cg-azul-50);color:var(--cg-azul-800);border:1px solid var(--cg-azul-200);border-radius:999px;padding:3px 11px;font-weight:700;font-size:.82rem;margin-top:6px;}
.regla{border:0;border-top:1px solid var(--cg-borde);margin:22px 0 4px;}

p,li{font-size:.95rem;color:var(--cg-texto-suave);}
p{margin:10px 0;}
ul,ol{padding-left:22px;margin:10px 0;}
li{margin:5px 0;}
li>ul,li>ol{margin:4px 0;}
b,strong{color:var(--cg-texto);font-weight:700;}
a{color:var(--cg-enlace);}
a:hover{color:var(--cg-enlace-hover);}
a:focus-visible,.back:focus-visible{outline:3px solid var(--cg-foco);outline-offset:2px;border-radius:3px;}
em,i{color:var(--cg-texto-suave);}

/* ---- Recuadros ---- */
.nota{background:var(--cg-aviso-info-bg);border:1px solid var(--cg-aviso-info-texto);border-left-width:4px;border-radius:10px;padding:13px 15px;margin:18px 0;}
.nota p,.nota li{color:var(--cg-aviso-info-texto);}
.nota p:first-child{margin-top:0;}
.nota p:last-child{margin-bottom:0;}
.ojo{background:var(--cg-aviso-alerta-bg);border:1px solid var(--cg-aviso-alerta-texto);border-left-width:4px;border-radius:10px;padding:13px 15px;margin:18px 0;}
.ojo p,.ojo li{color:var(--cg-aviso-alerta-texto);}
.ojo p:first-child{margin-top:0;}
.ojo p:last-child{margin-bottom:0;}

/* ---- Tablas ----
   Envueltas en .tabla para que en un celular angosto la tabla se deslice
   dentro de su propio recuadro en vez de estirar la página entera (el
   documento nunca hace scroll horizontal). */
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0;border:1px solid var(--cg-tabla-borde);border-radius:10px;}
table{border-collapse:collapse;width:100%;min-width:400px;}
th,td{text-align:left;padding:9px 12px;font-size:.89rem;border-bottom:1px solid var(--cg-tabla-borde);vertical-align:top;color:var(--cg-texto-suave);}
th{background:var(--cg-tabla-encab-bg);color:var(--cg-tabla-encab-texto);font-weight:700;font-size:.82rem;}
tbody tr:last-child td{border-bottom:0;}

/* ---- Pie de enlaces entre documentos ---- */
.links{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:1px solid var(--cg-borde);}
.links a{color:var(--cg-enlace);font-weight:700;font-size:.9rem;}

footer{text-align:center;color:var(--cg-texto-tenue);font-size:.82rem;padding:0 20px 34px;line-height:1.6;}

/* En celular las tablas se APILAN, no se deslizan de lado. Medido: la tabla
   de las tres cookies tiene 4 columnas y a 375px deja la última cortada fuera
   de la vista — un documento legal no puede depender de que la persona
   descubra que ahí adentro hay un scroll horizontal. Cada celda lleva su
   encabezado encima, sacado del <th> de su columna (atributo data-etq, que se
   escribe en el HTML junto a la celda). */
@media(max-width:560px){
  .tabla{overflow:visible;border:0;border-radius:0;}
  table{min-width:0;}
  thead{display:none;}
  tbody tr{display:block;border:1px solid var(--cg-tabla-borde);border-radius:10px;padding:6px 2px;margin-bottom:10px;}
  tbody tr:last-child{margin-bottom:0;}
  tbody td{display:block;border-bottom:0;padding:5px 12px;}
  tbody td::before{content:attr(data-etq);display:block;font-size:.7rem;font-weight:700;color:var(--cg-tabla-encab-texto);text-transform:uppercase;letter-spacing:.04em;margin-bottom:1px;}
  tbody td[data-etq='']::before,tbody td:not([data-etq])::before{display:none;}
}

@media(max-width:620px){
  .top-in{padding:14px 16px;}
  .doc{padding:20px 14px 44px;}
  .card{padding:20px 18px 24px;border-radius:14px;}
  h1{font-size:1.45rem;}
  h2{font-size:1.06rem;margin-top:26px;}
  p,li{font-size:.92rem;}
  .links{gap:12px;}
}