/* ============================================================
   TOKENS — Contenidos TR3BOL
   Portado 1:1 de contenidos-tr3bol-shell.html (mockup de referencia).
   Única capa que se toca cuando Emma/Guada confirmen la paleta definitiva
   (hoy hay conflicto entre MARCA_TR3BOL.md y lo que usan las miniaturas del
   canal) — nada más del app debería tener un hex hardcodeado.
   ============================================================ */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(/assets/fonts/archivo-variable-latin.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
}

:root{
  /* superficies */
  --bg:#0A1016;
  --s1:#0F1821;
  --s2:#14212C;
  --s3:#1B2C39;
  --line:#20323F;
  --line-soft:#182634;

  /* tinta */
  --ink:#E8F0F4;
  --ink-2:#9FB3C0;
  --ink-3:#6A8291;

  /* marca */
  --petroleo:#00788F;
  --turquesa:#2AA79B;
  --turquesa-dim:rgba(42,167,155,.13);
  --turquesa-line:rgba(42,167,155,.35);
  --ambar:#E8B44A;
  --ambar-dim:rgba(232,180,74,.13);
  --rojo:#E8302A;

  /* ---------- TINTA DE MARCA ----------
     El mismo color de marca sirve para RELLENAR (un botón, un chip, un borde) y para
     ESCRIBIR, y esas dos cosas no piden lo mismo cuando cambia el fondo. Sobre el oscuro
     conviven sin problema y estos tres tokens son idénticos a los de arriba: en tema
     oscuro no mueven un píxel. Sobre el claro no: --ambar sobre blanco da 1,8:1 de
     contraste, o sea ilegible, mientras que como relleno de botón sigue siendo perfecto.
     Por eso el tema claro los redefine más oscuros y deja los de arriba para rellenar.
     Regla: `color:` usa la tinta, `background`/`border` usa el color de marca. */
  --ambar-ink:var(--ambar);
  --turquesa-ink:var(--turquesa);
  --rojo-ink:var(--rojo);

  /* Los dos rojos de estado. Son MÁS CLAROS que --rojo porque tienen que leerse sobre el
     fondo oscuro; en el tema claro pasan a ser más oscuros que él, por lo mismo al revés.
     --rojo-2 son etiquetas cortas («se cortó», «no se pudo leer»); --rojo-3 es el texto
     largo del error, en mono. */
  --rojo-2:#ff8a85;
  --rojo-3:#ffb3af;

  /* Superficies con un rol propio, que no siguen la escala s1..s3 */
  --lienzo:#06303B;                 /* el marco detrás del preview del carrusel */
  --codigo:#0a1319;                 /* fondo de los bloques mono: el log y el prompt */
  --velo:rgba(10,16,22,.72);        /* tapa la app detrás de un diálogo o un drawer */
  --velo-barra:rgba(15,24,33,.85);  /* la barra de arriba, translúcida con blur */

  /* Tinta sobre un relleno de marca. NO cambian con el tema: los rellenos siguen siendo
     los mismos amarillo y turquesa brillantes en los dos, así que lo que se lee encima
     tiene que seguir siendo oscuro. */
  --sobre-ambar:#1B1503;
  --sobre-turquesa:#06231F;

  /* ---------- ETAPAS DEL RECORRIDO (Bloque 2) ----------
     Un tinte por etapa de Hoy / Producción. Los cuatro de marca son los de arriba; violeta
     y celeste son los dos nuevos del mockup v2 y existen solo para que seis columnas se
     distingan de un vistazo. Cada tinte tiene su `-dim` (fondo al 6 %) escrito a mano, como
     --turquesa-dim, para no depender de color-mix. Se cambian acá y en ningún otro lado. */
  --e-ideas:#00788F;  --e-ideas-dim:rgba(0,120,143,.06);
  --e-prod:#E8B44A;   --e-prod-dim:rgba(232,180,74,.06);
  --e-rev:#8E7CC3;    --e-rev-dim:rgba(142,124,195,.06);
  --e-salir:#2AA79B;  --e-salir-dim:rgba(42,167,155,.06);
  --e-prog:#5AA9E6;   --e-prog-dim:rgba(90,169,230,.06);
  --e-num:#F08C3A;    --e-num-dim:rgba(240,140,58,.06);

  /* La tinta de cada etapa. Mismo problema que --ambar-ink y compañía, un nivel más
     arriba: el color de la etapa pinta el puntito y el borde (relleno) Y el número y el
     título (texto). Sobre el claro, «En camino · 8» en ámbar da 1,6:1. En oscuro son
     idénticos a los de arriba. */
  --e-ideas-ink:var(--e-ideas);
  --e-prod-ink:var(--e-prod);
  --e-rev-ink:var(--e-rev);
  --e-salir-ink:var(--e-salir);
  --e-prog-ink:var(--e-prog);
  --e-num-ink:var(--e-num);

  /* radios y ritmo */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:16px;
  --gut:22px;
  --sidebar:238px;
  --rail:28px;

  /* tipografía */
  --f-ui:'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.6);

  /* ---------- ESCALA DE ESPACIADO (etapa 0 del rediseño de flujo) ----------
     Los nueve valores son EXACTAMENTE los que la app ya usaba a mano; ninguno es
     redondeo ni promedio. Migrar un `12px` a `var(--sp-5)` no mueve un píxel, y por eso
     la migración se hizo solo donde el número coincidía exacto. Los que no estan en la
     escala (2, 3, 5, 7, 9, 11, 18, 20, 40) siguen escritos a mano a propósito: cada uno
     se limpia en su etapa, con su pantalla verificada a 1366px.
     --sp-8 es el mismo valor que --gut, que ya existía; --gut sigue siendo el nombre del
     margen del shell y no se toca. */
  --sp-1:4px;
  --sp-2:6px;
  --sp-3:8px;
  --sp-4:10px;
  --sp-5:12px;
  --sp-6:14px;
  --sp-7:16px;
  --sp-8:22px;   /* == --gut */
  --sp-9:32px;

  /* ---------- ESCALA TIPOGRÁFICA ----------
     Hoy conviven 12 tamaños (10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 15, 15.5, 16).
     Estos siete son el destino; en esta etapa SOLO se migraron los enteros que ya
     coincidían (10, 11, 12, 13, 14). Los .5 y el 15/16 se limpian módulo por módulo más
     adelante: bajarlos ahora cambiaría píxeles en pantalla. */
  --fs-micro:10px;
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-md:13px;
  --fs-base:14px;
  --fs-lg:15.5px;
  --fs-xl:18px;
  --lh-tight:1.3;
  --lh-base:1.45;

  /* ---------- CAPAS ----------
     Un solo lugar donde leer quién tapa a quién. Los números son los que ya estaban; lo
     único que cambia es que los cinco drawers (40/45/46/46/47) se agrupan en dos tokens.
     Cuatro de ellos comparten --z-drawer: no se solapan, así que el número exacto daba
     igual. El quinto NO: "Esto funcionó" (#co-marcar, conocimiento.js) y "Cargar números"
     (#mt-abrir, metricas.js) cuelgan de la MISMA barra de la pieza (#tabs-pieza) y ninguno
     cierra al otro, así que se abren juntos de verdad. Con los dos en 40 gana el que esté
     más abajo en el DOM —co-panel, que se monta después— y el drawer de métricas, que es
     el que la persona acaba de abrir, queda invisible. Por eso metricas conserva un token
     propio, más alto, igual que su 47 original. Cuando la etapa 5 unifique los drawers en
     un solo sistema (uno abierto a la vez), --z-drawer-alto se puede colapsar en
     --z-drawer. */
  --z-sticky:5;    /* .md-toolbar pegada bajo la topbar */
  --z-topbar:10;
  --z-side:20;
  --z-drawer:40;        /* panel-crear, feedback, ia, conocimiento */
  --z-drawer-alto:41;   /* metricas: se solapa con conocimiento y tiene que quedar arriba */
  --z-overlay:60;  /* fondo oscuro del modal del banco */
  --z-dialog:70;   /* .dlg (definido, todavía sin usar) */
  --z-aviso:80;    /* TR3BOL_DESHACER (definido, todavía sin usar) */
  --z-gate:100;    /* #login-gate: siempre lo último */
}

/* ============================================================
   TEMA CLARO
   El equipo pidió una versión clara además de la oscura (2026-09-06).

   Por qué hay UN solo bloque y no también un @media (prefers-color-scheme): el script del
   <head> del índice (#tema-temprano) resuelve la preferencia del sistema y escribe SIEMPRE
   `data-tema` en el <html>, así que acá alcanza con el atributo. Duplicar la paleta en un
   media query sería tener dos fuentes de verdad para lo mismo, que es lo que este archivo
   viene evitando desde el principio. Si el JS no corre, no hay atributo y queda el oscuro.

   Ese script va en el <head> y no en base.js —que se carga al final del body— porque si
   no se ve el parpadeo: la primera pintada saldría oscura y saltaría a clara al abrir.
   El botón del pie de la sidebar y el seguir-al-sistema-en-vivo sí viven en base.js.

   Esto NO es el oscuro invertido. Dos cosas cambian de forma:

   1. La elevación va al revés. En oscuro, cuanto más arriba está algo, más CLARO es
      (--bg es lo más oscuro y --s3 lo más claro). En claro la página es la gris y las
      tarjetas suben hacia el blanco.
   2. Los colores de marca no se tocan como RELLENO —el ámbar y el turquesa de TR3BOL son
      los mismos en los dos temas— pero sí como TINTA: --ambar sobre blanco da 1,8:1, que
      es ilegible. Para eso están los `-ink`, que acá se oscurecen. Contraste medido de
      cada uno contra la tarjeta (#FBFCFD), mínimo AA 4,5:1:
        --ink 17,2:1 · --ink-2 7,1:1 · --ink-3 5,7:1
        --ambar-ink 5,3:1 · --turquesa-ink 6,3:1 · --rojo-ink 5,9:1
      (De referencia: el tema oscuro deja --ink-3 en 4,1:1, así que el claro no baja la
      vara de nadie.)
   ============================================================ */
:root[data-tema="claro"]{
  /* superficies: la página es gris y la elevación sube al blanco */
  --bg:#E7ECF0;
  --s1:#F2F5F8;
  --s2:#FBFCFD;
  --s3:#FFFFFF;
  --line:#C3D0D9;
  --line-soft:#DDE5EA;

  /* tinta */
  --ink:#0F1A23;
  --ink-2:#485966;
  --ink-3:#566773;

  /* Marca: los rellenos NO cambian (son los de la marca), la tinta sí. */
  --ambar-ink:#8A6209;
  --turquesa-ink:#0C6A60;
  --rojo-ink:#C0201A;
  --rojo-2:#B81E18;
  --rojo-3:#9A2B26;

  /* Los tintes de fondo suben de opacidad: un 6 % de ámbar sobre blanco no se ve. */
  --turquesa-dim:rgba(42,167,155,.16);
  --turquesa-line:rgba(42,167,155,.45);
  --ambar-dim:rgba(232,180,74,.24);

  --e-ideas-dim:rgba(0,120,143,.10);
  --e-prod-dim:rgba(232,180,74,.13);
  --e-rev-dim:rgba(142,124,195,.10);
  --e-salir-dim:rgba(42,167,155,.10);
  --e-prog-dim:rgba(90,169,230,.10);
  --e-num-dim:rgba(240,140,58,.12);

  /* Tinta de etapa. El número es contra la página (#E7ECF0), que es el fondo más exigente
     de los dos; contra la tarjeta todas dan más. */
  --e-ideas-ink:#00697D;   /* 5,3:1 */
  --e-prod-ink:#8A6209;    /* 4,6:1 */
  --e-rev-ink:#6A57A0;     /* 5,1:1 */
  --e-salir-ink:#0C6A60;   /* 5,4:1 */
  --e-prog-ink:#1F6FA8;    /* 4,5:1 */
  --e-num-ink:#9A5308;     /* 4,9:1 */

  /* superficies con rol propio */
  --lienzo:#D8E0E6;
  --codigo:#EFF3F6;
  --velo:rgba(16,26,35,.42);
  --velo-barra:rgba(251,252,253,.85);

  /* La sombra del oscuro lleva un `inset` BLANCO al 3 % para simular el brillo del borde
     superior. Sobre claro eso no se ve y además aclara la tarjeta: acá el inset es una
     línea oscura muy tenue, y la sombra de abajo pierde negro porque sobre gris claro un
     negro al 60 % se ve sucio. */
  --shadow:0 1px 0 rgba(16,26,35,.04) inset, 0 6px 18px -10px rgba(16,26,35,.30);
}