/* Tokens y base — mismos valores que la consola de admins («Sala blanca»).
   Duplicados a propósito: son dos sitios estáticos con despliegues distintos, y un archivo
   compartido acoplaría los dos despliegues. `tests/frontend/test_tokens.py` falla si
   divergen, así que la duplicación es ruidosa en vez de silenciosa. */

:root{
  --bg:#ffffff; --bg-2:#f6f6f7; --ink:#111113; --ink-2:#65656C; --acc:#2B3FD1;
  --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.2);
  --ok:#17753C; --warn:#8A5200; --bad:#C1121F;
  --serif:Georgia,"Times New Roman",serif;
  --display:system-ui,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:system-ui,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --bg-2:#0c0c0e; --ink:#F2F2F5; --ink-2:#9A9AA4; --acc:#7B8CFF;
    --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.3);
    --ok:#3FBB74; --warn:#D79B3A; --bad:#FF6B6B;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --bg-2:#0c0c0e; --ink:#F2F2F5; --ink-2:#9A9AA4; --acc:#7B8CFF;
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.3);
  --ok:#3FBB74; --warn:#D79B3A; --bad:#FF6B6B;
}
:root[data-theme="light"]{
  --bg:#ffffff; --bg-2:#f6f6f7; --ink:#111113; --ink-2:#65656C; --acc:#2B3FD1;
  --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.2);
  --ok:#17753C; --warn:#8A5200; --bad:#C1121F;
}
html{background:var(--bg);scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-wrap:pretty;}
*{box-sizing:border-box;}
a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--ink);}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;}
::selection{background:var(--acc);color:#fff;}
input,textarea,button,select{font:inherit;color:inherit;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;animation:none!important;}}


/* El filtro del catálogo. Vive en el CSS y no en el JS: ocultar una tarjeta no toca ni un
   estilo inline, y el estado de los chips queda en `aria-pressed`, que es lo que lee un
   lector de pantalla. Sin JS, `[data-filtro]` no está y se ven todas — que es el estado
   correcto por defecto. */
[data-filtro="prod"]  [data-m]:not([data-m="prod"]),
[data-filtro="casi"]  [data-m]:not([data-m="casi"]),
[data-filtro="const"] [data-m]:not([data-m="const"]),
[data-filtro="ruta"]  [data-m]:not([data-m="ruta"]) { display: none !important; }

[data-chip] { background: transparent; color: var(--ink-2); }
[data-chip][aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* El header en móvil no colapsa ni tapa: la fila scrollea en su propio contenedor,
   que es la misma regla que ya siguen las tablas y el diagrama anchos. */
header > div{overflow-x:auto;scrollbar-width:none;}

/* Hovers que en la exportación venían como atributo `style-hover`. */
.h1:hover{color:var(--ink);}
.h2:hover{background:var(--acc);color:#fff;}
.h3:hover{border-color:var(--ink);}
.h4:hover{background:var(--bg-2);}
.h5:hover{color:var(--ink);border-color:var(--ink);}


/* En el teléfono el header no puede esconder el CTA detrás de un
   swipe invisible: quedan la marca, PEDIR ACCESO y el tema. */
@media (max-width: 640px){ .h-oculta-movil{ display:none !important; } }