/* ═══════════════════════════════════════════════════════════════════════════════
 * @traid/ui — EL TEMA. ARCHIVO GENERADO: NO SE EDITA A MANO.
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * Lo produce `src/tema/emitir-css.ts` a partir de `src/tema/tokens.ts`, que es la única
 * lista de tokens que existe. Para cambiar un color, un radio o una sombra: se edita
 * `tokens.ts` y se regenera con
 *
 *     pnpm --filter @traid/ui test -u
 *
 * Un test compara este archivo, byte por byte, contra lo que produce el emisor. Editarlo a
 * mano no «funciona igual»: se pone rojo en la próxima corrida.
 *
 * ───────────────────────────────────────────────────────────────────────────────
 * QUÉ TRAE EL PACKET Y QUÉ TRAE EL CLIENTE
 * ───────────────────────────────────────────────────────────────────────────────
 *
 * EL PACKET TRAE LA FORMA (radio, espaciado, tipografía, foco, estados, variantes) Y UN
 * DEFAULT DE COLOR COMPLETO: el molde de la agencia. Ese default es un PISO, no un techo.
 *
 * La paleta de un cliente serio es una MEDICIÓN, no una preferencia: el primer consumidor
 * de este packet recalculó sus tokens oklch → sRGB → ratio hasta pasar WCAG AA 4,5:1, y
 * validó sus tres colores de serie contra simulación de daltonismo. Un cliente con una
 * paleta así la enchufa por cualquiera de los dos mecanismos de más abajo y no toca nada
 * de acá. El default existe para que un repo NUEVO no arranque en gris, no para pisar una
 * medición ajena.
 *
 * ───────────────────────────────────────────────────────────────────────────────
 * ⚠️ TAILWIND v4 — DEFINIR LA VARIABLE NO ALCANZA
 * ───────────────────────────────────────────────────────────────────────────────
 *
 * Éste es el error que hace perder la tarde, así que va en mayúsculas: en Tailwind, una
 * clase como `bg-card` NO existe por el solo hecho de que exista `--color-card`. Tailwind
 * tiene que saber, EN TIEMPO DE COMPILACIÓN, que `card` es un color del tema; si no lo
 * sabe, `bg-card` es una clase desconocida y no emite NADA. El síntoma es cruel: la
 * tarjeta sale sin fondo, transparente, y en las herramientas del navegador no hay ninguna
 * regla tachada que mirar — simplemente no hay regla.
 *
 * Eso es lo que hace el bloque `@theme` de abajo, y por eso este archivo va importado
 * DESPUÉS de `@import "tailwindcss"` en la hoja de entrada de la app:
 *
 *     @import "tailwindcss";
 *     @import "@traid/ui/tema.css";
 *
 * ───────────────────────────────────────────────────────────────────────────────
 * Y REGISTRAR EL TOKEN TAMPOCO ALCANZA: TAILWIND TIENE QUE VER LOS COMPONENTES
 * ───────────────────────────────────────────────────────────────────────────────
 *
 * Es el mismo modo de falla un escalón más afuera, y hasta 0.5.0 lo pagaba cada consumidor
 * por separado. Tailwind v4 arma la hoja escaneando archivos, y por defecto no entra a
 * `node_modules` — donde viven los componentes de este packet. Con los tokens perfectamente
 * registrados, `bg-muted` sigue sin emitirse porque nadie la vio escrita.
 *
 * DESDE 0.6.0 ESO YA NO ES PROBLEMA TUYO: la directiva `@source` viaja acá abajo. No hay
 * que agregar nada.
 *
 * ⚠️ SALVO QUE NO IMPORTES ESTE ARCHIVO. Si tenés paleta propia y por eso lo dejás afuera
 * —el mecanismo B de más abajo—, el `@source` se va con él. Para ese caso el packet trae
 * un archivo que es SÓLO la directiva, sin un color adentro:
 *
 *     @import "tailwindcss";
 *     @import "@traid/ui/fuente.css";
 *     @theme { … tu paleta medida … }
 *
 * ───────────────────────────────────────────────────────────────────────────────
 * QUÉ TENÉS QUE DECLARAR SI TRAÉS TU PALETA — Y CÓMO SABERLO SIN LEER ESTO
 * ───────────────────────────────────────────────────────────────────────────────
 *
 * Todo lo que sigue en este comentario se puede RECORRER en vez de leer. Desde 0.6.0 el
 * contrato es un dato y viene con su medidor:
 *
 *     import { faltantesDelContrato, informeDeFaltantes } from '@traid/ui/contrato';
 *     const faltan = faltantesDelContrato(readFileSync('app/globals.css', 'utf8'));
 *     if (faltan.length > 0) throw new Error(informeDeFaltantes(faltan));
 *
 * Y los pares de contraste de más abajo tampoco hay que recalcularlos a mano: `medirPares`
 * y `paresQueNoPasan` corren sobre TU paleta la misma máquina con la que este packet mide
 * la suya. Un repo de la cartera escribió esa conversión oklch → sRGB → ratio por su cuenta,
 * con la matriz copiada; ésa es la deuda que el módulo paga.
 *
 * ───────────────────────────────────────────────────────────────────────────────
 * EL TEMA OSCURO ANDA SIN JAVASCRIPT (las dos formas, se pueden usar juntas)
 * ───────────────────────────────────────────────────────────────────────────────
 *
 * 1 · PREFERENCIA DEL SISTEMA. No hay que hacer nada: si el sistema operativo está en
 *     oscuro, la página sale oscura. Es el bloque `@media (prefers-color-scheme: …)`.
 *
 * 2 · UNA CLASE EN `<html>`, que la puede poner EL SERVIDOR — no hace falta ninguna isla
 *     de cliente, ni hidratación, ni parpadeo:
 *
 *         // app/layout.tsx  (Server Component)
 *         const tema = (await cookies()).get('tema')?.value === 'oscuro' ? 'dark' : 'light';
 *         return <html lang="es" className={tema}> … </html>
 *
 *     La clase explícita LE GANA a la preferencia del sistema, que es lo que hace que
 *     alguien con el sistema en oscuro pueda quedarse en claro.
 *
 * El conmutador `ThemeToggle` del packet es OPCIONAL y usa exactamente el mismo mecanismo
 * 2: pone y saca esas clases. Un repo que no lo monte no pierde el tema oscuro.
 *
 * ───────────────────────────────────────────────────────────────────────────────
 * CÓMO PONER TU PALETA (las dos formas, elegí una)
 * ───────────────────────────────────────────────────────────────────────────────
 *
 * A · PISAR EL VALOR EN TIEMPO DE EJECUCIÓN. Las utilidades de Tailwind v4 compilan a
 *     `background-color: var(--color-card)`, así que redefinir la variable alcanza. Tu
 *     bloque va DESPUÉS del import de este archivo, y con LOS MISMOS SELECTORES que usa
 *     acá abajo si querés pisar también el oscuro:
 *
 *         :root { --color-card: oklch(0.995 0.003 250); }
 *         @media (prefers-color-scheme: dark) { :root { --color-card: oklch(0.24 0.01 250); } }
 *         :root.dark { --color-card: oklch(0.24 0.01 250); }
 *
 *     ⚠️ LAS SOMBRAS SE PISAN POR OTRA VARIABLE. `--shadow-card` es un alias fijo que
 *     apunta a `--traid-shadow-card`, y ésa es la que cambia con el tema — Tailwind
 *     incrusta el valor de una sombra al compilar, así que redefinir `--shadow-card` no
 *     tiene ningún efecto sobre la utilidad `shadow-card`:
 *
 *         :root { --traid-shadow-card: 0 1px 2px oklch(0.28 0.03 293 / 0.06); }
 *
 * B · ALIAS, si tu app ya tiene su paleta con OTROS NOMBRES. Es el caso real del primer
 *     consumidor, que tiene los tokens en castellano (`--color-fondo`, `--color-tinta`,
 *     `--color-superficie`…). No hay que renombrar nada: se apunta el contrato a la paleta
 *     que ya está medida.
 *
 *         @theme {
 *           --color-background: var(--color-fondo);
 *           --color-foreground: var(--color-tinta);
 *           --color-card:       var(--color-superficie);
 *           --color-border:     var(--color-borde);
 *           --color-primary:    var(--color-acento);
 *           --color-destructive:var(--color-alarma);
 *         }
 *
 *     Ese bloque va DESPUÉS de este archivo. Los nombres del contrato están en inglés
 *     porque son vocabulario shadcn prestado, no inventado: cualquiera que haya tocado
 *     shadcn los reconoce sin leer nada. Traducirlos habría sido más lindo y menos útil.
 *
 * ───────────────────────────────────────────────────────────────────────────────
 * TAILWIND v3
 * ───────────────────────────────────────────────────────────────────────────────
 *
 * `@theme` no existe en v3: le pasa por al lado como una at-rule desconocida. Las
 * variables igual llegan, porque el bloque `:root` de abajo es CSS común — lo que falta en
 * v3 son las UTILIDADES, que se declaran en el config. NO LAS ESCRIBAS A MANO: el packet
 * trae el config generado de la misma fuente que este archivo.
 *
 *     // tailwind.config.ts
 *     import { presetTailwind3 } from '@traid/ui/preset-tailwind3';
 *
 *     export default {
 *       content: [ … tus rutas … ],   // ⚠️ agregá también las del packet, ver abajo
 *       presets: [presetTailwind3()],
 *     };
 *
 * ⚠️ `content` TIENE QUE INCLUIR `node_modules/@traid/ui/src`. v3 descubre las clases
 * escaneando archivos, y las de los componentes están adentro del packet: sin esa ruta, el
 * preset registra los tokens y v3 no emite una sola utilidad. El patrón exacto está en el
 * encabezado de `src/tema/preset-tailwind3.ts` (acá no se puede escribir un glob: la
 * secuencia que lleva cerraría este comentario de CSS).
 *
 * Hasta el 2026-08-24 acá abajo había un `theme.extend.colors` de ejemplo para copiar. Se
 * sacó porque copiarlo es el error que la cartera ya cometió —un repo consumidor tiene
 * escrito en su config que mantener la misma lista en dos archivos «se desincroniza, es
 * exactamente lo que ya pasó»— y porque el mapeo obvio a `var(--color-*)` ROMPE EN
 * SILENCIO todos los estados translúcidos de los componentes (`bg-primary/10`,
 * `hover:bg-muted/50`…): en v3 esas clases no emiten NADA. El porqué, medido compilando,
 * está en el encabezado de `src/tema/preset-tailwind3.ts`.
 *
 * ───────────────────────────────────────────────────────────────────────────────
 * LOS PARES QUE HAY QUE MEDIR SI CAMBIÁS LA PALETA
 * ───────────────────────────────────────────────────────────────────────────────
 *
 * El default que trae este archivo ya los cumple, y `tests/tokens.test.ts` los MIDE en cada
 * corrida convirtiendo cada oklch a sRGB — no están escritos a mano en ningún comentario.
 * Lo que el packet no puede verificar es la paleta que pongas VOS. Los pares que los
 * componentes ponen en pantalla, y el umbral de cada uno:
 *
 *   TEXTO — 4,5:1 (WCAG AA). Ojo: el umbral de «texto grande» (3:1) NO aplica a ninguno
 *   de estos; el chip de `Badge` y el encabezado de `Table` son de 11 px.
 *
 *     foreground        sobre  background     ← el cuerpo de la página
 *     card-foreground   sobre  card           ← todo lo que va dentro de una tarjeta
 *     muted-foreground  sobre  background     ← CardDescription, botón `ghost`
 *     muted-foreground  sobre  muted          ← Badge `muted`, encabezado de Table,
 *                                               botón `ghost` en hover. ⚠️ ES UN PAR
 *                                               APARTE: pasar contra el fondo de la
 *                                               página no implica pasar contra `muted`.
 *     primary-foreground sobre primary        ← el único botón sólido (`variant="default"`)
 *     foreground        sobre  el tinte al 10 % de primary / accent / destructive
 *                                             ← Badge y botón `accent`. El tinte mueve
 *                                               poco el fondo, pero si tu `accent` es muy
 *                                               oscuro conviene medirlo igual.
 *     destructive-text  sobre  LAS CUATRO SUPERFICIES (background, card, muted, surface-3)
 *                                             ← la variación adversa y la advertencia de
 *                                               `CifraTile`. ⚠️ SON CUATRO PARES, NO UNO:
 *                                               una tarjeta puede estar parada sobre
 *                                               cualquier escalón, y el escalón más hundido
 *                                               es el que decide.
 *
 *   NO-TEXTO — 3:1 (WCAG 1.4.11 / 2.4.11):
 *
 *     primary  sobre  background   ← es el anillo de foco de TODO el packet. Si no pasa,
 *                                    la navegación por teclado queda sin señal visible.
 *     border   sobre  background   ← obligatorio SI usás `Button variant="outline"`: ahí
 *                                    el borde es lo único que dice que hay un control.
 *
 *   ⚠️ LA REGLA QUE VALE PARA TUS PROPIAS PANTALLAS, y que este packet aprendió pagando:
 *   HAY DOS FAMILIAS DE COLOR Y NO SE PUEDEN INTERCAMBIAR.
 *
 *     `primary`, `accent` y `destructive` son COLORES DE RELLENO: borde, fondo al 10 %,
 *     anillo de foco. Como tales les alcanza con 3:1. Los componentes del packet no los
 *     usan como color de texto, y vos tampoco deberías: son colores de identidad, elegidos
 *     para verse, y sobre un fondo claro un violeta o un rojo de marca se quedan cortos de
 *     los 4,5:1 que necesita una letra. Medido en el default de este packet el 2026-08-24:
 *     `text-destructive` daba entre 3,02:1 y 4,45:1 según la superficie, y `text-primary`
 *     en tema oscuro caía a 2,89:1.
 *
 *     `destructive-text` es el ÚNICO color de marca pensado para ser letra: el mismo tono,
 *     con otra luminosidad y otro croma. Si tu paleta necesita escribir en violeta o en
 *     rosa, agregá el token equivalente y medilo contra las cuatro superficies — no reuses
 *     el color del relleno. Hasta el 2026-08-24 este archivo afirmaba acá que los colores
 *     de marca «nunca se usan como texto», y era falso: `CifraTile` los usaba, con el gate
 *     en verde, porque el gate enumeraba esos tokens sólo como FONDO. Hoy la enumeración de
 *     pares de texto se DERIVA del fuente de los componentes
 *     (`tests/contraste-de-la-paleta.test.ts`), justamente para que la próxima clase
 *     `text-<token>` que alguien escriba no pueda quedar sin medir.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── QUÉ TIENE QUE ESCANEAR TAILWIND v4 ───────────────────────────────────────
   Tailwind arma la hoja mirando qué clases se usan de verdad, y por defecto NO
   entra a `node_modules` — que es donde viven los componentes de este packet. Sin
   esta línea, `bg-muted`, `bg-primary/10` y `shadow-card` no se emiten: no hay error
   de build, hay una pantalla sin fondos.

   La ruta es `./` y se resuelve relativa a ESTE archivo, que vive en la misma
   carpeta que los componentes. Por eso vale igual en el monorepo productor y en el
   `node_modules/` del consumidor, sin que nadie cuente cuántos `../` hacen falta.

   Hasta 0.5.0 el packet no traía ninguna: la escribía a mano cada consumidor. ── */
@source "./";

/* ── REGISTRO EN TAILWIND v4 ───────────────────────────────────────────────────
   Esto es lo que hace que existan `bg-card`, `text-muted-foreground`, `rounded-lg`
   y `shadow-card`. Los colores llevan los valores del tema por defecto y el que manda
   en tiempo de ejecución es el bloque `:root` de abajo; las sombras llevan una
   REFERENCIA en vez del valor, porque Tailwind las incrusta al compilar y si no el
   tema oscuro se quedaría con la sombra del claro. ── */
@theme {
  /* colores — tema claro */
  --color-background: oklch(0.972 0.004 293);
  --color-foreground: oklch(0.24 0.015 293);
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.24 0.015 293);
  --color-muted: oklch(0.945 0.007 293);
  --color-muted-foreground: oklch(0.48 0.02 293);
  --color-border: oklch(0.58 0.012 293);
  --color-primary: oklch(0.541 0.247 293);
  --color-primary-foreground: oklch(0.99 0 0);
  --color-accent: oklch(0.592 0.218 0.6);
  --color-destructive: oklch(0.577 0.215 27.3);
  --color-destructive-text: oklch(0.48 0.19 27.3);
  --color-surface-0: oklch(0.972 0.004 293);
  --color-surface-1: oklch(1 0 0);
  --color-surface-2: oklch(0.945 0.007 293);
  --color-surface-3: oklch(0.912 0.01 293);
  --color-primary-hover: oklch(0.521 0.247 293);
  --color-primary-active: oklch(0.501 0.247 293);
  --color-ring: oklch(0.541 0.247 293);
  --color-warning: oklch(0.56 0.14 75);
  --color-warning-text: oklch(0.49 0.12 85);
  --color-success: oklch(0.52 0.14 155);
  --color-success-text: oklch(0.46 0.12 155);
  --color-sidebar: oklch(0.22 0.02 293);
  --color-sidebar-foreground: oklch(0.96 0.005 293);
  --color-sidebar-muted: oklch(0.3 0.02 293);
  --color-sidebar-muted-foreground: oklch(0.74 0.015 293);
  --color-sidebar-border: oklch(0.36 0.02 293);
  --color-sidebar-accent: oklch(0.72 0.16 293);

  /* radios — transversales a los dos temas */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;

  /* sombras — el alias del contrato; el valor vive en `--traid-shadow-*` */
  --shadow-card: var(--traid-shadow-card);
  --shadow-card-hover: var(--traid-shadow-card-hover);
  --shadow-tooltip: var(--traid-shadow-tooltip);
}

/* ── EL DEFAULT ────────────────────────────────────────────────────────────────
   No es una copia decorativa del bloque de arriba: Tailwind v4 poda las variables
   de `@theme` que ninguna utilidad usa, y Tailwind v3 no entiende `@theme` en
   absoluto. Para los dos casos, ÉSTA es la fuente de las variables. ── */
:root {
  color-scheme: light;

  /* colores — tema claro */
  --color-background: oklch(0.972 0.004 293);
  --color-foreground: oklch(0.24 0.015 293);
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.24 0.015 293);
  --color-muted: oklch(0.945 0.007 293);
  --color-muted-foreground: oklch(0.48 0.02 293);
  --color-border: oklch(0.58 0.012 293);
  --color-primary: oklch(0.541 0.247 293);
  --color-primary-foreground: oklch(0.99 0 0);
  --color-accent: oklch(0.592 0.218 0.6);
  --color-destructive: oklch(0.577 0.215 27.3);
  --color-destructive-text: oklch(0.48 0.19 27.3);
  --color-surface-0: oklch(0.972 0.004 293);
  --color-surface-1: oklch(1 0 0);
  --color-surface-2: oklch(0.945 0.007 293);
  --color-surface-3: oklch(0.912 0.01 293);
  --color-primary-hover: oklch(0.521 0.247 293);
  --color-primary-active: oklch(0.501 0.247 293);
  --color-ring: oklch(0.541 0.247 293);
  --color-warning: oklch(0.56 0.14 75);
  --color-warning-text: oklch(0.49 0.12 85);
  --color-success: oklch(0.52 0.14 155);
  --color-success-text: oklch(0.46 0.12 155);
  --color-sidebar: oklch(0.22 0.02 293);
  --color-sidebar-foreground: oklch(0.96 0.005 293);
  --color-sidebar-muted: oklch(0.3 0.02 293);
  --color-sidebar-muted-foreground: oklch(0.74 0.015 293);
  --color-sidebar-border: oklch(0.36 0.02 293);
  --color-sidebar-accent: oklch(0.72 0.16 293);

  /* radios — transversales a los dos temas */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;

  /* sombras — el alias del contrato; el valor vive en `--traid-shadow-*` */
  --shadow-card: var(--traid-shadow-card);
  --shadow-card-hover: var(--traid-shadow-card-hover);
  --shadow-tooltip: var(--traid-shadow-tooltip);

  /* sombras — tema claro */
  --traid-shadow-card: 0 1px 2px oklch(0.28 0.03 293 / 0.04);
  --traid-shadow-card-hover: 0 8px 28px oklch(0.28 0.03 293 / 0.08), 0 1px 2px oklch(0.28 0.03 293 / 0.04);
  --traid-shadow-tooltip: 0 8px 32px oklch(0.28 0.03 293 / 0.12);
}

/* ── OSCURO POR PREFERENCIA DEL SISTEMA — SIN JAVASCRIPT ────────────────
   Nadie tiene que montar el conmutador ni poner una clase: si el sistema operativo
   está en oscuro, la página sale oscura. Especificidad (0,1,0) a propósito, para que
   una clase explícita —y también el override de un consumidor— le puedan ganar. ── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* colores — tema oscuro */
    --color-background: oklch(0.145 0 0);
    --color-foreground: oklch(0.95 0 0);
    --color-card: oklch(0.19 0 0);
    --color-card-foreground: oklch(0.95 0 0);
    --color-muted: oklch(0.24 0 0);
    --color-muted-foreground: oklch(0.68 0 0);
    --color-border: oklch(0.58 0 0);
    --color-primary: oklch(0.565 0.225 293);
    --color-primary-foreground: oklch(0.99 0 0);
    --color-accent: oklch(0.592 0.218 0.6);
    --color-destructive: oklch(0.577 0.215 27.3);
    --color-destructive-text: oklch(0.72 0.17 27.3);
    --color-surface-0: oklch(0.145 0 0);
    --color-surface-1: oklch(0.19 0 0);
    --color-surface-2: oklch(0.24 0 0);
    --color-surface-3: oklch(0.28 0 0);
    --color-primary-hover: oklch(0.555 0.225 293);
    --color-primary-active: oklch(0.545 0.225 293);
    --color-ring: oklch(0.6 0.225 293);
    --color-warning: oklch(0.62 0.14 75);
    --color-warning-text: oklch(0.82 0.13 85);
    --color-success: oklch(0.6 0.14 155);
    --color-success-text: oklch(0.8 0.13 155);
    --color-sidebar: oklch(0.22 0.02 293);
    --color-sidebar-foreground: oklch(0.96 0.005 293);
    --color-sidebar-muted: oklch(0.3 0.02 293);
    --color-sidebar-muted-foreground: oklch(0.74 0.015 293);
    --color-sidebar-border: oklch(0.36 0.02 293);
    --color-sidebar-accent: oklch(0.72 0.16 293);

    /* sombras — tema oscuro */
    --traid-shadow-card: 0 1px 2px oklch(0 0 0 / 0.24);
    --traid-shadow-card-hover: 0 8px 28px oklch(0 0 0 / 0.48), 0 1px 2px oklch(0 0 0 / 0.24);
    --traid-shadow-tooltip: 0 8px 32px oklch(0 0 0 / 0.72);
  }
}

/* ── LA ELECCIÓN EXPLÍCITA ─────────────────────────────────────────────────────
   La clase la puede poner EL SERVIDOR (`<html className="dark">` desde una cookie),
   y también el conmutador de cliente, que es opcional. Especificidad (0,2,0): le
   gana a la preferencia del sistema de arriba, que es lo que permite elegir claro
   con el sistema en oscuro. ── */
:root.light {
  color-scheme: light;

  /* colores — tema claro */
  --color-background: oklch(0.972 0.004 293);
  --color-foreground: oklch(0.24 0.015 293);
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.24 0.015 293);
  --color-muted: oklch(0.945 0.007 293);
  --color-muted-foreground: oklch(0.48 0.02 293);
  --color-border: oklch(0.58 0.012 293);
  --color-primary: oklch(0.541 0.247 293);
  --color-primary-foreground: oklch(0.99 0 0);
  --color-accent: oklch(0.592 0.218 0.6);
  --color-destructive: oklch(0.577 0.215 27.3);
  --color-destructive-text: oklch(0.48 0.19 27.3);
  --color-surface-0: oklch(0.972 0.004 293);
  --color-surface-1: oklch(1 0 0);
  --color-surface-2: oklch(0.945 0.007 293);
  --color-surface-3: oklch(0.912 0.01 293);
  --color-primary-hover: oklch(0.521 0.247 293);
  --color-primary-active: oklch(0.501 0.247 293);
  --color-ring: oklch(0.541 0.247 293);
  --color-warning: oklch(0.56 0.14 75);
  --color-warning-text: oklch(0.49 0.12 85);
  --color-success: oklch(0.52 0.14 155);
  --color-success-text: oklch(0.46 0.12 155);
  --color-sidebar: oklch(0.22 0.02 293);
  --color-sidebar-foreground: oklch(0.96 0.005 293);
  --color-sidebar-muted: oklch(0.3 0.02 293);
  --color-sidebar-muted-foreground: oklch(0.74 0.015 293);
  --color-sidebar-border: oklch(0.36 0.02 293);
  --color-sidebar-accent: oklch(0.72 0.16 293);

  /* sombras — tema claro */
  --traid-shadow-card: 0 1px 2px oklch(0.28 0.03 293 / 0.04);
  --traid-shadow-card-hover: 0 8px 28px oklch(0.28 0.03 293 / 0.08), 0 1px 2px oklch(0.28 0.03 293 / 0.04);
  --traid-shadow-tooltip: 0 8px 32px oklch(0.28 0.03 293 / 0.12);
}

:root.dark {
  color-scheme: dark;

  /* colores — tema oscuro */
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.95 0 0);
  --color-card: oklch(0.19 0 0);
  --color-card-foreground: oklch(0.95 0 0);
  --color-muted: oklch(0.24 0 0);
  --color-muted-foreground: oklch(0.68 0 0);
  --color-border: oklch(0.58 0 0);
  --color-primary: oklch(0.565 0.225 293);
  --color-primary-foreground: oklch(0.99 0 0);
  --color-accent: oklch(0.592 0.218 0.6);
  --color-destructive: oklch(0.577 0.215 27.3);
  --color-destructive-text: oklch(0.72 0.17 27.3);
  --color-surface-0: oklch(0.145 0 0);
  --color-surface-1: oklch(0.19 0 0);
  --color-surface-2: oklch(0.24 0 0);
  --color-surface-3: oklch(0.28 0 0);
  --color-primary-hover: oklch(0.555 0.225 293);
  --color-primary-active: oklch(0.545 0.225 293);
  --color-ring: oklch(0.6 0.225 293);
  --color-warning: oklch(0.62 0.14 75);
  --color-warning-text: oklch(0.82 0.13 85);
  --color-success: oklch(0.6 0.14 155);
  --color-success-text: oklch(0.8 0.13 155);
  --color-sidebar: oklch(0.22 0.02 293);
  --color-sidebar-foreground: oklch(0.96 0.005 293);
  --color-sidebar-muted: oklch(0.3 0.02 293);
  --color-sidebar-muted-foreground: oklch(0.74 0.015 293);
  --color-sidebar-border: oklch(0.36 0.02 293);
  --color-sidebar-accent: oklch(0.72 0.16 293);

  /* sombras — tema oscuro */
  --traid-shadow-card: 0 1px 2px oklch(0 0 0 / 0.24);
  --traid-shadow-card-hover: 0 8px 28px oklch(0 0 0 / 0.48), 0 1px 2px oklch(0 0 0 / 0.24);
  --traid-shadow-tooltip: 0 8px 32px oklch(0 0 0 / 0.72);
}

/* ── LA BARRA LATERAL CERRADA ──────────────────────────────────────────────────
   Cuelga de `<html data-sidebar="colapsado">`, que pone `sidebarInitScript()` antes
   del primer paint, y de los ganchos `data-sidebar-*` del marcado. Las tres piezas
   —el botón, estos estilos y el script— viajan juntas o el botón no achica nada.
   Sólo de escritorio para arriba: en celular la navegación es MobileNav. ── */
@media (min-width: 768px) {
  /* el ancho: 15rem → 4.5rem, lo justo para que entre la abreviatura */
  html[data-sidebar='colapsado'] [data-sidebar-aside] {
    width: 4.5rem;
  }

  /* lo que se esconde: `display:none` para que NO ocupe lugar */
  html[data-sidebar='colapsado'] [data-sidebar-texto] {
    display: none;
  }

  /* lo que aparece en su lugar */
  html[data-sidebar='colapsado'] [data-sidebar-inicial],
  html[data-sidebar='colapsado'] [data-sidebar-marca-corta] {
    display: block;
  }

  /* la cabecera pasa a columna: en fila no entran marca y botón en 4.5rem */
  html[data-sidebar='colapsado'] [data-sidebar-cabecera] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* sin el label, la sangría del grupo no significa nada y descentra */
  html[data-sidebar='colapsado'] [data-sidebar-nav] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  html[data-sidebar='colapsado'] [data-sidebar-nav] a {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* el encabezado de grupo queda con su triangulito, y sigue plegando */
  html[data-sidebar='colapsado'] [data-sidebar-grupo] > summary {
    justify-content: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  /* el chevron del botón apunta hacia donde va a ir la barra, sin un ternario en React */
  html[data-sidebar='colapsado'] [data-sidebar-plegar] svg {
    transform: rotate(180deg);
  }
}

/* ── LA BARRA LATERAL OSCURA ───────────────────────────────────────────────────
   El patrón «barra oscura sobre aplicación clara», como un tema FIJO de UNA pieza y
   no como un segundo @theme. Lo enciende `<Sidebar tono="oscuro">`. Cada línea apunta
   a una variable y nunca repite un color: ver el encabezado de `emitir-css.ts`. ── */
[data-sidebar-tono='oscuro'] {
  /* las seis que el componente ya usa, apuntando a la paleta de la barra */
  --color-card: var(--color-sidebar);
  --color-border: var(--color-sidebar-border);
  --color-foreground: var(--color-sidebar-foreground);
  --color-muted: var(--color-sidebar-muted);
  --color-muted-foreground: var(--color-sidebar-muted-foreground);
  --color-primary: var(--color-sidebar-accent);

  /* el anillo de foco: sin esto, el violeta de marca sobre el fondo oscuro */
  --color-ring: var(--color-sidebar-accent);

  /* lo que NO lleva clase de color propia y hereda: el nombre de la marca */
  color: var(--color-sidebar-foreground);

  /* la barra de desplazamiento se ve: es lo único que avisa que hay más abajo */
  scrollbar-width: thin;
  scrollbar-color: var(--color-sidebar-border) var(--color-sidebar);
}

/* ── LOS BLOQUES PLEGABLES, EN PAPEL ───────────────────────────────────────────
   Un <details> cerrado no imprime su contenido, y `print:open` no existe: `open` es
   un atributo. Cuelga del gancho `data-bloque-plegable` de `BloquePlegable`. ── */
@media print {
  /* todo lo que cuelga de un bloque plegable se muestra, esté abierto o no */
  [data-bloque-plegable] > * {
    display: block;
  }

  /* el resumen sigue arriba, pero sin el gesto de «apretame» */
  [data-bloque-plegable] > summary {
    list-style: none;
  }
}