@netzi/tokens 0.1.0-beta.10 → 0.1.0-beta.9

package/styles/tokens.css

@@ -1,1348 +1,657 @@
 /* ===========================================================
    @netzi/tokens — Design tokens (CSS custom properties)
 
-   ARCHIVO GENERADO desde la fuente DTCG (formato del W3C Design Tokens
-   Community Group, 2025.10): no se edita a mano. Un test comprueba que no se
-   desincronizan.
-
    Ejes de tema (los aplica NetziThemeService sobre <html>):
      [data-theme=dark]        → tema OSCURO (default: claro)
-     [data-theme=light]       → claro también en una sección dentro de una oscura
      [data-preset=...]        → color primario (blue|green|purple|orange|red|cyan)
-     [data-contrast=high]     → más contraste (bordes/texto); sin el atributo
-                                sigue a prefers-contrast: more, y normal lo fija
+     [data-contrast=high]     → más contraste (bordes/texto)
      [data-glass=on]          → capas flotantes de cristal (translúcidas)
-     [data-ambient=on]        → fondo ambiental bajo el contenido
      [data-density=compact]   → controles más compactos
      dir=rtl                  → de derecha a izquierda (CSS usa props lógicas)
-     prefers-reduced-motion   → las duraciones de desplazamiento (move) se anulan
-     print                    → papel: los ejes oscuro, cristal y ambiental no aplican
-                                (van en @media not print); sin sombras ni movimiento
      --netzi-font-sans inline → familia tipográfica
 
+   El PRIMARIO (`--netzi-primary*`) es themeable por preset. Los colores de
+   marca/semánticos (blue/green/purple/red/yellow) son constantes y se usan para
+   estados fijos, que además tienen su alias por lo que significan
+   (`--netzi-info`, `--netzi-success`, `--netzi-warning`, `--netzi-danger`).
+
    OVERRIDE (white-label por app): redefine cualquier token en tu propio scope.
    Las actualizaciones de este paquete cambian SOLO los defaults.
    =========================================================== */
 
 :root {
-  /* Capa 1 — PRIMITIVOS. Valores de marca y escalas, iguales en todos los temas. Los semánticos
-     y los de componente se apoyan en ellos. */
-  /* Colores de marca para RELLENO: saturados, para que un fondo, un punto de estado o una barra
-     de gráfica se vean. Como texto sobre una superficie clara no llegan al mínimo; para lo que
-     se lee está su variante text (capa semántica). */
+  /* --- Acentos de marca / semánticos (constantes) --- */
   --netzi-blue: #0ba5ff;
   --netzi-blue-dark: #0476c2;
   --netzi-green: #0ae972;
   --netzi-purple: #8c4cff;
   --netzi-red: #ff6b6b;
   --netzi-yellow: #f0c040;
-  /* Forma: radios de esquina, la materia prima de los radios por papel (capa semántica:
-     control, surface, pill). La densidad compacta los reduce. */
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-radius-surface-sm
-     (paneles de un control, avisos, tarjetas compactas). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-radius: 8px;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-radius-control
-     (controles y piezas pequeñas). Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como
-     pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-radius-sm: 6px;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-radius-surface
-     (tarjetas, diálogos, paneles). Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como
-     pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-radius-lg: 10px;
-  /* Del todo redondeado (#220): la materia prima de --netzi-radius-pill. La densidad compacta
-     no lo toca. Interna: no llegó a publicarse como pública (#228). */
-  --netzi-radius-full: 9999px;
-  /* Espaciado de layout (base 4px): la materia prima de los espaciados por papel (capa
-     semántica: related, group, stack, inset, section, page). Pública solo mientras convive su
-     desuso (#228). La densidad compacta reduce los pasos medios y grandes. */
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa 0, que no necesita token.
-     Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como pronto en @netzi/tokens
-     0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-space-0: 0;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): sin papel propio (2px no es
-     un paso del ritmo de layout); entre piezas de un mismo elemento usa --netzi-space-related.
-     Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como pronto en @netzi/tokens
-     0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-space-1: 2px;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-space-related
-     (piezas de un mismo elemento). Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como
-     pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-space-2: 4px;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-space-group
-     (elementos hermanos de un grupo). Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como
-     pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-space-3: 8px;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-space-stack
-     (grupos apilados) o --netzi-space-inset-sm (relleno compacto). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-space-4: 12px;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-space-inset
-     (relleno de una tarjeta o un panel). Deprecado en @netzi/tokens 0.1.0-beta.10; se retira
-     como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-space-5: 16px;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-space-inset-lg
-     (relleno de un diálogo o un panel grande). Deprecado en @netzi/tokens 0.1.0-beta.10; se
-     retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-space-6: 24px;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-space-section
-     (entre secciones de una página). Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como
-     pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-space-7: 32px;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa --netzi-space-page (entre
-     regiones de una página y su margen). Deprecado en @netzi/tokens 0.1.0-beta.10; se retira
-     como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-space-8: 48px;
-  /* Escala tipográfica: la materia prima de los estilos de texto (typography, capa semántica).
-     Pública solo mientras convive su desuso (#228). */
-  /* Escala tipográfica (#51) para el texto que NO es un control: líneas secundarias, pies,
-     metadatos, títulos. Ratio cercano a 1.15 y md = 14px, que es el 100 % de la escala (el
-     panel de ajustes divide entre 14). Todos escalan con el ajuste de accesibilidad; la
-     densidad compacta no los toca: el texto no se encoge, se encoge el aire. */
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el tamaño de su papel,
-     --netzi-typography-caption-font-size (#155), o su estilo de texto entero,
-     --netzi-typography-caption. Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como pronto
-     en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-size-xs: calc(11px * var(--netzi-font-scale, 1));
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el tamaño de su papel,
-     --netzi-typography-body-sm-font-size (#155), o su estilo de texto entero,
-     --netzi-typography-body-sm. Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como pronto
-     en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-size-sm: calc(12.5px * var(--netzi-font-scale, 1));
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el tamaño de su papel,
-     --netzi-typography-body-ui-font-size (#155), o su estilo de texto entero,
-     --netzi-typography-body-ui. Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como pronto
-     en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-size-md: calc(14px * var(--netzi-font-scale, 1));
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el tamaño de su papel,
-     --netzi-typography-body-font-size (#155), o su estilo de texto entero,
-     --netzi-typography-body. Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como pronto en
-     @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-size-lg: calc(16px * var(--netzi-font-scale, 1));
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el tamaño de su papel,
-     --netzi-typography-title-font-size (#155), o su estilo de texto entero,
-     --netzi-typography-title. Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como pronto
-     en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-size-xl: calc(18px * var(--netzi-font-scale, 1));
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el tamaño de su papel,
-     --netzi-typography-headline-font-size (#155), o su estilo de texto entero,
-     --netzi-typography-headline. Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como
-     pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-size-2xl: calc(22px * var(--netzi-font-scale, 1));
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el tamaño de su papel,
-     --netzi-typography-display-font-size (#155), o su estilo de texto entero,
-     --netzi-typography-display. Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como pronto
-     en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-size-3xl: calc(28px * var(--netzi-font-scale, 1));
-  /* Peso. Los cinco cortes que trae la fuente cargada (fonts.css); otro valor se sintetiza y se
-     ve peor. */
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el estilo de texto de su
-     papel (--netzi-typography-body, --netzi-typography-body-sm). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-weight-regular: 400;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): sin estilo propio; usa el
-     estilo de texto de su papel (--netzi-typography-body). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-weight-medium: 500;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el estilo de texto de su
-     papel (--netzi-typography-title-sm, --netzi-typography-caption). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-weight-semibold: 600;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el estilo de texto de su
-     papel (--netzi-typography-title, --netzi-typography-headline). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-weight-bold: 700;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el estilo de texto de su
-     papel, --netzi-typography-display. Deprecado en @netzi/tokens 0.1.0-beta.10; se retira como
-     pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-font-weight-extrabold: 800;
-  /* Interlineado sin unidad: none para lo que mide una línea, tight para títulos, normal para
-     texto corriente, relaxed para lectura larga. Materia prima de los estilos de texto
-     (typography); pública solo mientras convive su desuso (#228). */
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): sin estilo propio; cada
-     estilo de texto trae su interlineado (--netzi-typography-caption). Deprecado en
-     @netzi/tokens 0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando
-     pasa a interna. */
-  --netzi-line-height-none: 1;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el estilo de texto de su
-     papel (--netzi-typography-title, --netzi-typography-caption). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-line-height-tight: 1.25;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): usa el estilo de texto de su
-     papel (--netzi-typography-body, --netzi-typography-body-sm). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-line-height-normal: 1.5;
-  /* deprecated: Escala primitiva, en desuso para las apps (#228): sin estilo propio; cada
-     estilo de texto trae su interlineado (--netzi-typography-body). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11, cuando pasa a interna. */
-  --netzi-line-height-relaxed: 1.65;
-  /* Capa 2 — SEMÁNTICOS. Papeles (superficie, texto, borde, primario, estado) con los valores
-     del tema por defecto: claro, contraste normal y preset azul. Los ejes de tema (themes/) los
-     redefinen. */
-  /* Los colores de marca PARA TEXTO: su versión legible, oscurecida en claro y aclarada en
-     oscuro solo donde hace falta. Si lo que pintas se lee, va el text; si es relleno, el de
-     marca (el verde de relleno daba 1.63:1 como texto). */
+
+  /* --- Los mismos colores, pero PARA TEXTO ---
+     Los de arriba son de RELLENO: saturados para que un fondo, un punto de
+     estado o una barra de gráfica se vean. Sobre una superficie clara, como
+     texto, no llegan ni de lejos al mínimo (el verde daba 1.63:1). Estos son su
+     versión legible, oscurecida en claro y aclarada en oscuro solo donde hace
+     falta. Si lo que pintas se lee, va el `-text`; si es relleno, el de arriba. */
   --netzi-blue-text: #076aa3;
-  /* Los colores de marca para lo NO textual que comunica un estado (#189): la estrella marcada,
-     el punto de presencia, el icono de un resultado sobre su velo, el borde de un campo
-     inválido. Llegan a 3:1 (WCAG 1.4.11) sobre cada superficie y sobre su propio velo (el veil
-     del estado); el crudo no llega en claro (azul 2.08:1, verde 1.33, amarillo 1.41, rojo 2.15
-     en el peor fondo) y el text cumple de sobra pero se aleja del color. Es el tono más cercano
-     al crudo que llega; en oscuro, el crudo tal cual. */
-  --netzi-blue-graphic: #0e84cd;
   --netzi-green-text: #05773a;
-  --netzi-green-graphic: #069047;
   --netzi-yellow-text: #7d6421;
-  --netzi-yellow-graphic: #9d7a0c;
   --netzi-red-text: #a34444;
-  --netzi-red-graphic: #df464b;
   --netzi-purple-text: #743fd4;
-  /* Alias de estado: el mismo color con el nombre de lo que significa. Existen porque toda app
-     los da por hechos, y un token que no existe muere en silencio (la declaración entera se
-     descarta sin aviso). Son referencias, no copias, para que sigan al color aunque cambie.
-     Mismo reparto que la marca: el raíz es RELLENO y el text es lo que se lee. */
+
+  /* --- Alias SEMÁNTICOS de estado ---
+     El mismo color con el nombre de lo que significa. Existen porque toda app
+     los da por hechos, y un token que no existe **muere en silencio**: la
+     declaración entera se descarta (sin fondo, sin color, sin radio) sin un
+     aviso en build ni en consola. Se declaran como referencia, no como copia,
+     para que sigan al color aunque este cambie. Mismo reparto de papeles que
+     arriba: el crudo es RELLENO, el `-text` es lo que se lee. */
   --netzi-info: var(--netzi-blue);
   --netzi-success: var(--netzi-green);
   --netzi-warning: var(--netzi-yellow);
   --netzi-danger: var(--netzi-red);
-  /* Superficies de contenido, de la más clara a la más marcada. */
-  --netzi-surface: #ffffff;
-  --netzi-surface-2: #f4f6f8;
-  --netzi-surface-3: #eef1f4;
-  /* Texto: tres niveles con papeles DISTINTOS, no tres grados de gris intercambiables. text es
-     el texto principal; text-2 es CUALQUIER texto secundario legible (rótulos, ayudas, pies,
-     metadatos, placeholders) y es el suelo de 4.5:1; text-3 es lo NO textual (iconos
-     decorativos, separadores, chevrons, líneas, estados deshabilitados) y cumple 3:1, no 4.5:1.
-     El papel de cada uno lo fija su contrato de contraste y lo comprueba el build: si lo que
-     pintas se lee, va text-2. */
-  --netzi-text: #1c252e;
-  --netzi-text-2: #5c6b78;
-  /* NO vale para texto legible (3:1, SC 1.4.11). Es el tono de lo que acompaña: chevrons,
-     separadores, iconos decorativos, la barra de redimensionar, el brillo del esqueleto de
-     carga y los estados deshabilitados. La regla existe porque con 45 archivos usándolo
-     indistintamente el kit entero se quedó por debajo del mínimo sin que nadie lo notara. */
-  --netzi-text-3: #7a8996;
-  /* Radios por papel (#228): el de lo que se pulsa, el de una superficie y el de lo del todo
-     redondeado. Apuntan a la escala de forma, así que la densidad compacta los reduce (salvo la
-     píldora); se redeclaran en cada elemento con densidad propia. */
-  /* Del todo redondeado: píldoras, puntos, avatares e interruptores; en una pieza cuadrada, un
-     círculo. Sustituye a los 999px y 50% sueltos (#220). La densidad no lo toca. */
-  --netzi-radius-pill: var(--netzi-radius-full);
-  /* Color PRIMARIO, themeable por preset (eje preset); por defecto, el azul de marca. */
+  --netzi-info-text: var(--netzi-blue-text);
+  --netzi-success-text: var(--netzi-green-text);
+  --netzi-warning-text: var(--netzi-yellow-text);
+  --netzi-danger-text: var(--netzi-red-text);
+
+  /* --- Alias por SIMETRÍA ---
+     El primer escalón de cada escala no lleva número (`--netzi-surface` y
+     `--netzi-surface-2`), y quien ve el `-2` escribe el `-1`. Igual con el radio
+     medio, que se llama `--netzi-radius` a secas. Son el mismo valor con el
+     nombre que la app espera, por el mismo motivo que los de arriba. */
+  --netzi-surface-1: var(--netzi-surface);
+  --netzi-text-1: var(--netzi-text);
+  --netzi-radius-md: var(--netzi-radius);
+
+  /* --- Color PRIMARIO (themeable por preset; default = azul) --- */
   --netzi-primary: var(--netzi-blue);
-  /* El relleno de lo marcado en checkbox, radio y toggle: frente a cualquier superficie, no
-     solo al fondo de la página (#147). Lleva on-primary-dark encima. */
   --netzi-primary-dark: var(--netzi-blue-dark);
-  /* El relleno del primario al pasar el puntero, con la MISMA tinta encima (on-primary). No es
-     primary-dark: ese es el fondo de lo que lleva blanco (pulgar, marca del checkbox), y la
-     tinta oscura sobre él se quedaba en 3.93:1 en azul y 4.0:1 en rojo (#68). Cada preset
-     declara el suyo: más oscuro que su primario, pero sin bajar de 4.5:1 con su tinta. */
+  /* El relleno del primario al pasar el puntero, con la MISMA tinta encima
+     (`--netzi-on-primary`). No es `--netzi-primary-dark`: ese es el fondo de lo que
+     lleva blanco (pulgar, marca del checkbox), y la tinta oscura sobre él se quedaba
+     en 3.93:1 en azul y 4.0:1 en rojo (#68). Cada preset declara el suyo: más oscuro
+     que su primario, pero sin bajar de 4.5:1 con su tinta. */
   --netzi-primary-hover: #0a8fdd;
-  /* El relleno del primario PRESIONADO (#156), con la misma tinta encima (on-primary). Es su
-     hover con la capa de presionado (state.pressed.opacity, 12 %) del color que se aleja de su
-     tinta: blanco si la tinta es oscura, negro si es blanca. No lleva la capa de texto de los
-     demás controles porque sobre un relleno de marca acerca el fondo a la tinta y la dejaba en
-     3.8:1; así el presionado se distingue del hover y la tinta no baja de 4.5:1 en ningún
-     preset ni tema. Cada preset declara el suyo. */
-  --netzi-primary-pressed: #279ce1;
-  /* El primario PARA TEXTO (enlaces, ítem activo del menú, cifras destacadas). Cada preset y
-     cada tema lo redefinen: el crudo no llega a 4.5:1 sobre superficie clara. */
-  --netzi-primary-text: #076ba6;
-  /* El primario para lo NO textual que tiene que verse (#140): el relleno de una barra de
-     progreso, el anillo de carga del rail, la barra de navegación. Llega a 3:1 (WCAG 1.4.11)
-     sobre cada superficie y sobre el tinte del primario, que es el fondo del ítem activo. El
-     crudo no llega en claro con azul (2.15:1), verde (1.36), naranja (1.78), rojo (2.51) ni
-     cian (1.92), y primary-text cumple de sobra pero se aleja del color de marca: este es el
-     tono más cercano al primario que llega, calibrado por preset y por tema. Algo que LATE en
-     opacidad no vale con este: en el valle del latido baja de 3:1, y por eso esos indicadores
-     van con primary-text. */
-  --netzi-primary-graphic: #0987d2;
-  /* La TINTA sobre el relleno del primario: cada preset usa la que cumple sobre SU color, no
-     una fija (el blanco sobre el azul da 2.68:1 y la tinta oscura 7.05:1). */
+  /* La TINTA sobre el relleno del primario. Cada preset usa la que cumple sobre
+     SU color, no una fija: el blanco sobre el azul da 2.68:1 y la tinta oscura
+     7.05:1. Verde, naranja y cyan ya venían así; el azul y el rojo se suman. */
   --netzi-on-primary: #04121f;
-  /* Lo que va ENCIMA de primary-dark: el pulgar del interruptor, la marca del checkbox, el
-     punto del radio. Blanco en todos los presets: el primario oscuro es lo bastante oscuro para
-     que el blanco pase de 3:1 (el mínimo de un control) en cada uno. on-primary no sirve para
-     esto: sobre el azul claro tiene que ser casi negro, y un pulgar negro sobre un interruptor
-     azul se ve raro. */
+  /* El primario PARA TEXTO (enlaces, ítem activo del menú, cifras destacadas).
+     Cada preset lo redefine: el crudo no llega a 4.5:1 sobre superficie clara. */
+  --netzi-primary-text: #076ba6;
+  /* Lo que va ENCIMA de `--netzi-primary-dark`: el pulgar del interruptor, la
+     marca del checkbox, el punto del radio. Es blanco en TODOS los presets: el
+     primario oscuro es lo bastante oscuro para que el blanco pase de 3:1 (el
+     mínimo de un control) en cada uno —3.2 en naranja, 3.3 en verde, 4.7+ en
+     azul, rojo y morado—; lo verifica `tokens-contrast.spec.ts`. `--netzi-on-primary`
+     no sirve para esto: sobre el azul claro tiene que ser casi negro, y un pulgar
+     negro sobre un interruptor azul se ve raro (queja literal del usuario). */
   --netzi-on-primary-dark: #ffffff;
-  /* Tinta sobre un relleno de color de marca (verde, rojo, amarillo…): todos son claros, así
-     que la oscura es la que cumple. El blanco daba 2.78:1 sobre el rojo del contador de
-     notificaciones. */
-  --netzi-on-accent: #04121f;
-  /* Estados de interacción como UN sistema (#156, criterio B.7): una capa translúcida por
-     estado, que se pinta ENCIMA del fondo del control sin cambiarlo, con su opacidad. La capa
-     es del color del texto (text), así que oscurece en claro y aclara en oscuro, y la etiqueta
-     en text sigue a 4.5:1 sobre cada superficie con cualquier capa encima: el build lo
-     comprueba. El orden de las opacidades es el del gesto, de menos a más: hover 8 %, foco 12
-     %, presionado 12 % y arrastrado 16 %. Las opacidades van aparte (state.*.opacity) para la
-     plataforma que pinta la capa con su propio color; en CSS la capa ya es un color
-     (--netzi-state-pressed) y se pinta como imagen de fondo, que no se anima: aparece al
-     instante, también con movimiento reducido y con el dedo. Un control con fondo de marca no
-     lleva capa: tiene su propio color presionado (primary.pressed). El foco, además, conserva
-     su anillo (focus-ring), que es lo que exige WCAG 2.4.7; el seleccionado es el tinte del
-     primario. */
-  --netzi-state-hover-opacity: 0.08;
-  --netzi-state-focus-opacity: 0.12;
-  --netzi-state-pressed-opacity: 0.12;
-  --netzi-state-dragged-opacity: 0.16;
-  /* El tratamiento de lo DESHABILITADO: una sola opacidad sobre el control entero (antes había
-     seis, de 0.3 a 0.8). Un control deshabilitado no recibe el foco de teclado ni actúa, pero
-     el lector de pantalla lo lee y lo anuncia como no disponible (disabled o aria-disabled).
-     WCAG no pide contraste a lo deshabilitado; aun así su texto en text se queda a 3:1 sobre
-     cada superficie, para que se vea que está ahí: el build lo comprueba. */
-  --netzi-state-disabled-opacity: 0.6;
-  /* Fondo de la página. */
+  /* El pulgar de un interruptor o de un deslizador. OPACO y literal a propósito:
+     iba con `--netzi-surface`, y dentro de un panel de cristal esa superficie es
+     un tinte translúcido (re-escopada por el panel), así que el pulgar salía como
+     un agujero oscuro con un aro. Blanco en los dos temas, como el de cualquier
+     sistema: sobre la pista apagada (`surface-3`) y sobre la encendida
+     (`primary-dark`) se ve igual de bien. */
+  --netzi-thumb: #ffffff;
+  /* Tinte del primario, derivado automáticamente (cambia con el preset). */
+  --netzi-primary-tint: color-mix(in srgb, var(--netzi-primary) 10%, transparent);
+  /* El mismo tinte, MARCADO. El del 10 % está calibrado para superficies
+     grandes (una fila resaltada, un panel); en una pieza pequeña —un chip, una
+     píldora— se pierde contra el fondo: sobre `surface-3` da 1.13:1 y no se
+     distingue. Este llega a 1.32:1, que sí se ve.
+     ⚠️ Su tinta es `--netzi-text` (≥9:1 con cualquier preset). NO vale
+     `--netzi-primary-text` encima: sobre este tinte se queda en 3.9:1, y por eso
+     el tinte suave no se puede subir sin más — es el techo del otro. */
+  --netzi-primary-tint-strong: color-mix(in srgb, var(--netzi-primary) 22%, transparent);
+
+  /* --- Tema CLARO: superficies --- */
   --netzi-bg: #f7f9fb;
-  /* Bordes. */
+  --netzi-surface: #ffffff;
+  --netzi-surface-2: #f4f6f8;
+  --netzi-surface-3: #eef1f4;
+
+  /* --- Tema CLARO: bordes --- */
   --netzi-border: #eaedf0;
   --netzi-border-2: #dce0e5;
-  /* Elevación (#220): cuánto se despega una pieza de lo que tiene debajo, con nombre de
-     intención y de menos a más. En la web se pinta con sombra (y con el borde de cada pieza:
-     una sombra nunca es lo único que separa una capa); en papel no hay ninguna. Cada plataforma
-     la pinta a su manera, con el mismo nivel. */
-  /* Base: pegado a su superficie, sin sombra. Para devolver a cero una pieza que hereda
-     elevación. */
-  --netzi-elevation-base: 0 0 rgba(0, 0, 0, 0);
-  /* Elevado: una pieza levantada sobre su propia superficie, como el pulgar de un interruptor o
-     de un deslizador, la pastilla del segmentado o una tecla. */
-  --netzi-elevation-raised: 0 1px 2px rgba(145, 158, 171, 0.16);
-  /* Flotante: algo pequeño y suelto que flota sobre el contenido, como el tooltip, la etiqueta
-     de una gráfica, el enlace «Ir al contenido» o la esfera del reloj. */
-  --netzi-elevation-floating:
-    0 0 2px rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
-  /* Modal: las capas que se abren encima del contenido y lo apartan, como los desplegables, los
-     menús, el aviso, los diálogos y los paneles laterales. */
-  --netzi-elevation-modal:
-    0 0 2px rgba(145, 158, 171, 0.2), 0 16px 40px -8px rgba(145, 158, 171, 0.24);
-  /* Espaciado por papel (#228), de lo más cercano a lo más lejano: cuanto más relacionadas dos
-     cosas, menos aire entre ellas (proximidad). Apuntan a la escala primitiva de base 4px; la
-     densidad compacta reduce desde stack hacia arriba, y por eso esos se redeclaran en cada
-     elemento con densidad propia. */
-  /* Entre piezas de un mismo elemento: icono y texto, los chips de una lista, una rejilla de
-     muestras, un campo y su ayuda. */
-  --netzi-space-related: var(--netzi-space-2);
-  /* Entre elementos hermanos de un grupo: los botones de una barra, la cabecera de un bloque y
-     lo que tiene debajo. */
-  --netzi-space-group: var(--netzi-space-3);
-  /* Familias y escala de letra: papeles, no pasos. La app puede cambiar la familia en línea
-     sobre la raíz; la escala la cambia el ajuste de tamaño de letra. */
-  /* Familia tipográfica del texto. La app puede cambiarla en línea sobre la raíz. */
-  --netzi-font-sans:
-    'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system, system-ui, sans-serif;
-  /* Familia monoespaciada: código, identificadores y cifras que se comparan columna a columna. */
-  --netzi-font-mono: 'Fira Code', 'Fira Code Fallback', ui-monospace, monospace;
-  /* Escala global del tamaño de letra (1 = 100 %). Los tamaños con fontScale la multiplican; la
-     cambia el panel de ajustes (ajuste de accesibilidad). */
-  --netzi-font-scale: 1;
-  /* Estilos de texto (#220): familia, tamaño, peso, interlineado y espaciado entre letras
-     juntos, con el nombre de su papel; cada paso de la escala tiene al menos uno. En CSS cada
-     uno sale como el atajo font (que no incluye el espaciado), su -letter-spacing aparte y su
-     -font-size, el tamaño solo, para quien pone el peso y el interlineado por su cuenta (#155).
-     Todo escala con el ajuste de tamaño de letra: el tamaño porque es el de la escala y el
-     espaciado porque el estilo lleva fontScale. */
-  /* Cifras grandes y portadas: 3xl, extrabold, apretado. */
-  --netzi-typography-display: var(--netzi-font-weight-extrabold) var(--netzi-font-size-3xl) /
-    var(--netzi-line-height-tight) var(--netzi-font-sans);
-  --netzi-typography-display-letter-spacing: calc(-0.5px * var(--netzi-font-scale, 1));
-  --netzi-typography-display-font-size: var(--netzi-font-size-3xl);
-  /* Títulos de página: 2xl, bold, apretado. */
-  --netzi-typography-headline: var(--netzi-font-weight-bold) var(--netzi-font-size-2xl) /
-    var(--netzi-line-height-tight) var(--netzi-font-sans);
-  --netzi-typography-headline-letter-spacing: calc(-0.2px * var(--netzi-font-scale, 1));
-  --netzi-typography-headline-font-size: var(--netzi-font-size-2xl);
-  /* Títulos de sección: xl, bold, apretado. */
-  --netzi-typography-title: var(--netzi-font-weight-bold) var(--netzi-font-size-xl) /
-    var(--netzi-line-height-tight) var(--netzi-font-sans);
-  --netzi-typography-title-letter-spacing: 0;
-  --netzi-typography-title-font-size: var(--netzi-font-size-xl);
-  /* Texto destacado y títulos de tarjeta: lg, semibold, apretado. */
-  --netzi-typography-title-sm: var(--netzi-font-weight-semibold) var(--netzi-font-size-lg) /
-    var(--netzi-line-height-tight) var(--netzi-font-sans);
-  --netzi-typography-title-sm-letter-spacing: 0;
-  --netzi-typography-title-sm-font-size: var(--netzi-font-size-lg);
-  /* Texto corrido (#219, ADR 0015): párrafos, descripciones de bloque y contenido que se lee
-     como prosa. lg (16 px, política 17 § 4), regular, interlineado normal. */
-  --netzi-typography-body: var(--netzi-font-weight-regular) var(--netzi-font-size-lg) /
-    var(--netzi-line-height-normal) var(--netzi-font-sans);
-  --netzi-typography-body-letter-spacing: 0;
-  --netzi-typography-body-font-size: var(--netzi-font-size-lg);
-  /* Texto de interfaz (#219, ADR 0015): opciones de menú y de lista, pestañas, celdas de tabla
-     y mensajes breves, lo que se recorre con la vista más que leerse. md (14 px), regular,
-     interlineado normal. */
-  --netzi-typography-body-ui: var(--netzi-font-weight-regular) var(--netzi-font-size-md) /
-    var(--netzi-line-height-normal) var(--netzi-font-sans);
-  --netzi-typography-body-ui-letter-spacing: 0;
-  --netzi-typography-body-ui-font-size: var(--netzi-font-size-md);
-  /* Líneas secundarias, pistas, pies y celdas compactas: sm, regular, interlineado normal. */
-  --netzi-typography-body-sm: var(--netzi-font-weight-regular) var(--netzi-font-size-sm) /
-    var(--netzi-line-height-normal) var(--netzi-font-sans);
-  --netzi-typography-body-sm-letter-spacing: 0;
-  --netzi-typography-body-sm-font-size: var(--netzi-font-size-sm);
-  /* Metadatos y etiquetas cortas: xs, semibold, apretado y algo abierto (en mayúsculas, el
-     text-transform lo pone quien lo usa). */
-  --netzi-typography-caption: var(--netzi-font-weight-semibold) var(--netzi-font-size-xs) /
-    var(--netzi-line-height-tight) var(--netzi-font-sans);
-  --netzi-typography-caption-letter-spacing: calc(0.5px * var(--netzi-font-scale, 1));
-  --netzi-typography-caption-font-size: var(--netzi-font-size-xs);
-  /* Movimiento: duraciones por intención (#151). instant para la respuesta a una pulsación,
-     fast para el hover y los cambios de color, base para lo que se despliega o gira, slow para
-     los paneles y capas que entran. Son las de los fundidos: no cambian con movimiento
-     reducido. Lo que desplaza, gira, escala o cambia la geometría usa las de move, que con
-     movimiento reducido se anulan. flash y loop no son cambios de estado y quedan fuera de esa
-     escala (#214). */
-  --netzi-duration-instant: 100ms;
-  --netzi-duration-fast: 150ms;
-  --netzi-duration-base: 200ms;
-  --netzi-duration-slow: 280ms;
-  /* Un aviso que se enciende, se deja ver y se apaga solo, sin que nadie lo cierre (el destello
-     de error de un ítem del menú). Largo a propósito: tiene que dar tiempo a verlo. */
-  --netzi-duration-flash: 1400ms;
-  /* Bucles (#214): la duración de UNA vuelta de una animación infinita, no la de un cambio de
-     estado. spin para el giro de un indicador de carga; orbit para el anillo que recorre el
-     borde de un ítem o de una pestaña que carga; pulse para el latido de opacidad que sustituye
-     al giro con movimiento reducido; sweep para la barra de progreso indeterminada; shine para
-     el brillo del skeleton. No cambian con movimiento reducido: cada hoja quita o sustituye su
-     bucle en su propia regla. */
-  --netzi-duration-loop-spin: 700ms;
-  --netzi-duration-loop-orbit: 1100ms;
-  --netzi-duration-loop-pulse: 1200ms;
-  --netzi-duration-loop-sweep: 1200ms;
-  --netzi-duration-loop-shine: 1300ms;
-  /* Duraciones del DESPLAZAMIENTO (#151): transform, translate, rotate, scale, la posición y la
-     geometría (alturas, filas de rejilla, márgenes). Valen lo mismo que fast, base y slow, pero
-     con prefers-reduced-motion se anulan en un solo sitio (themes/motion) y lo que las usa
-     salta sin moverse, mientras los fundidos de color y opacidad conservan su duración. */
-  --netzi-duration-move-fast: var(--netzi-duration-fast);
-  --netzi-duration-move-base: var(--netzi-duration-base);
-  --netzi-duration-move-slow: var(--netzi-duration-slow);
-  /* Movimiento: curvas por intención (#151). standard para lo que cambia sin entrar ni salir
-     (la de ease de CSS), enter para lo que aparece (frena al llegar), exit para lo que se va
-     (acelera al irse), settle para lo que llega, se pasa un poco y se asienta (un rebote
-     sutil). Para los bucles (#214): swing para lo que va y vuelve, arrancando y frenando en
-     cada vuelta (la de ease-in-out: latidos, barridos, brillos), y spin para lo que gira sin
-     fin a velocidad constante (la de linear). */
-  --netzi-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
-  --netzi-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
-  --netzi-ease-exit: cubic-bezier(0.4, 0, 1, 1);
-  --netzi-ease-settle: cubic-bezier(0.34, 1.45, 0.5, 1);
-  --netzi-ease-swing: cubic-bezier(0.42, 0, 0.58, 1);
-  --netzi-ease-spin: cubic-bezier(0, 0, 1, 1);
-  /* MEDIDA legible del texto corrido (#213, criterio C.9): el ancho máximo de un párrafo, una
-     descripción o un aviso, para que cada línea se quede en unos 40 a 75 caracteres (64 de
-     mediana) en cualquier ancho de ventana. Se aplica al TEXTO (max-inline-size en el párrafo),
-     nunca a la página ni a la sección: el hueco junto al texto lo llenan el contenido auxiliar,
-     las acciones, otro panel, la rejilla o la prosa en columnas entre párrafos; un párrafo no
-     se parte en columnas, y una descripción corta puede dejar hueco. En em, que escala con el
-     tamaño de letra del propio párrafo, y NO en ch: el ch es el ancho del cero de la fuente que
-     pinta en ese momento, y el de la fuente de respaldo mide un 21 % menos que el de Plus
-     Jakarta Sans, así que al llegar la fuente de marca cada párrafo acotado cambiaba de ancho y
-     rehacía sus líneas (C.12). Solo CSS: el formato DTCG no admite em, y en móvil la medida la
-     dan los paneles y las clases de tamaño. */
-  --netzi-measure: 33em;
-  /* Capas de apilamiento (#215): el z-index de lo que se pinta encima de otra cosa sale de
-     aquí, con nombre de intención y en este orden, de abajo arriba. Un componente no escribe
-     números sueltos: dentro de su propia capa solo usa -1, 0 o 1, o un escalón sobre su capa
-     con calc(). Los huecos entre valores dejan sitio a la app sin tener que mover la escala. */
-  /* El contenido de la página: el punto de partida. */
-  --netzi-layer-content: 0;
-  /* Pegajoso: encabezados y columnas fijas que se quedan quietos mientras el contenido desplaza
-     por debajo (la tabla de datos). */
-  --netzi-layer-sticky: 2;
-  /* Barra: lo del marco de la app que pasa por encima del contenido, como el botón de plegar el
-     menú lateral o la barra de carga. Una barra fija de la app va aquí, por encima de lo
-     pegajoso. */
-  --netzi-layer-bar: 20;
-  /* Flotante del marco: submenús del menú lateral plegado y menús contextuales anclados al
-     contenido. Por debajo del velo: un modal los tapa. */
-  --netzi-layer-flyout: 50;
-  /* Velo: lo que apaga la página detrás de un panel lateral que se abre por encima (el menú
-     lateral en el móvil, que va un escalón por encima de su velo). */
-  --netzi-layer-scrim: 80;
-  /* Modal: diálogos y paneles laterales, con su velo dentro. */
-  --netzi-layer-modal: 100;
-  /* Desplegable: paneles anclados a un control (select, fecha, hora, autocompletado, popover,
-     cron) y la paleta de comandos. Por encima del modal: la paleta de comandos se abre sobre
-     cualquier diálogo. Dentro de un modal o de un panel lateral, un desplegable ya va en la
-     capa de su contenedor. */
-  --netzi-layer-dropdown: 120;
-  /* Aviso: el toast, que tiene que verse aunque haya un modal o un desplegable abiertos. */
-  --netzi-layer-toast: 200;
-  /* Tooltip: la etiqueta de lo que tiene el puntero o el foco, encima de cualquier capa
-     interactiva. */
-  --netzi-layer-tooltip: 300;
-  /* Bloqueante: la pantalla que impide usar la app hasta que se resuelve algo (sin conexión).
-     Tapa todo lo anterior. */
-  --netzi-layer-blocking: 1000;
-  /* Tope: lo que nunca puede quedar tapado, como el enlace «Ir al contenido» cuando recibe el
-     foco. */
-  --netzi-layer-top: 10000;
-  /* TAMAÑOS DE VENTANA con nombre (#157, ADR 0016, criterio C.8): los cortes de ancho de la
-     ventana en los que cambia el diseño, siempre los mismos en el kit y en las apps. Cada
-     valor, salvo reflow, es el ancho en el que EMPIEZA ese tamaño: compacto (menos de 600, un
-     panel), medio (600 a 839, uno o dos), expandido (840 a 1199, dos), grande (1200 a 1599,
-     dos, con el menú lateral completo) y extragrande (1600 o más, hasta tres). Una var() no
-     vale dentro de @media: en las hojas se escribe el número del token en forma de rango,
-     (width < 600px) o (width >= 600px), y un guardián del kit rechaza cualquier otro corte de
-     ventana. Lo que depende de su propia caja y no de la ventana usa una consulta de contenedor
-     con nombre. */
-  /* Ancho de reflujo: por debajo (teléfonos de 320 y 360 px y el zoom al 400 % de WCAG 1.4.10)
-     lo que va en fila dentro de un panel flotante se apila. Es un corte dentro de compacto, no
-     un tamaño de ventana: no cambia el número de paneles. */
-  --netzi-window-reflow: 375px;
-  /* Empieza el tamaño medio: uno o dos paneles, y el menú lateral adaptable (netzi-layout con
-     adaptive) pasa de cajón a riel. */
-  --netzi-window-medium: 600px;
-  /* Empieza el tamaño expandido: dos paneles, lista y detalle a la vez. */
-  --netzi-window-expanded: 840px;
-  /* Empieza el tamaño grande: dos paneles, y el menú lateral adaptable vuelve a ir completo,
-     con sus etiquetas. */
-  --netzi-window-large: 1200px;
-  /* Empieza el tamaño extragrande: hasta tres paneles (lista, detalle y uno de apoyo). */
-  --netzi-window-extra-large: 1600px;
-  /* Capa 3 — DE COMPONENTE. Tokens con un uso concreto: capas flotantes, velo modal, indicador
-     de foco, pulgar de los interruptores y medidas de los controles. */
-  /* El pulgar de un interruptor o de un deslizador. OPACO y literal a propósito: iba con
-     surface, y dentro de un panel de cristal esa superficie es un tinte translúcido, así que el
-     pulgar salía como un agujero oscuro con un aro. Blanco en los dos temas, como el de
-     cualquier sistema. */
-  --netzi-thumb: #ffffff;
-  /* Capas FLOTANTES: las que se pintan ENCIMA del contenido (topbar, sidebar, paneles anclados,
-     modal, drawer, menús, tooltips y toasts). Por defecto son exactamente la superficie opaca
-     de siempre; el eje glass las convierte en cristal sin que ningún componente tenga que
-     enterarse. Los valores van literales, no como referencia a surface, porque el cristal los
-     redefine y una referencia cruzada crearía un ciclo de custom properties. */
+
+  /* --- Capas FLOTANTES ---
+     Las que se pintan ENCIMA del contenido: topbar, sidebar, paneles anclados,
+     modal, drawer, menús, tooltips y toasts. Por defecto son exactamente la
+     superficie opaca de siempre; el eje [data-glass=on] las convierte en
+     cristal sin que ningún componente tenga que enterarse (ver GLASS abajo).
+     Los valores van literales, no como `var(--netzi-surface)`, porque el modo
+     cristal los redefine y una referencia cruzada crearía un ciclo. */
   --netzi-float-bg: #ffffff;
   --netzi-float-border: #eaedf0;
   --netzi-float-border-2: #dce0e5;
-  /* Superficies ANIDADAS dentro de una capa flotante (una tarjeta en el drawer, la burbuja de
-     un comentario, el hover de un botón). Sin cristal son las de siempre; con cristal, tintes
-     translúcidos. Los paneles las re-escopan como surface para que todo lo que llevan dentro
-     las herede. */
+  /* Superficies ANIDADAS dentro de una capa flotante (una tarjeta en el drawer,
+     la burbuja de un comentario en el popover, el hover de un botón). Sin
+     cristal son las superficies de siempre; con cristal, tintes translúcidos
+     (ver el bloque de cristal). Los paneles las re-escopan como
+     `--netzi-surface*` para que TODO lo que llevan dentro las herede. */
   --netzi-float-surface: #ffffff;
   --netzi-float-surface-2: #f4f6f8;
   --netzi-float-surface-3: #eef1f4;
   --netzi-float-filter: none;
-  /* La MISMA cadena que float-filter, en identidad: el punto del que parte la entrada de un
-     panel de cristal y al que llega su salida. El desenfoque se anima de 0 a su valor, porque
-     un fundido por opacity apaga el cristal justo mientras entra. Mismo orden de funciones que
-     el token real: si no coinciden, no se interpola. */
+  /* La MISMA cadena que `--netzi-float-filter`, en identidad. Es el punto del
+     que PARTE la entrada de un panel de cristal y al que llega su salida: el
+     desenfoque se anima de 0 a su valor (un tirón de foco), porque un fundido
+     por `opacity` no vale — con opacidad < 1 el elemento (o su capa) deja de
+     ver la página y el cristal se apaga justo mientras entra. Mismo orden de
+     funciones que el token real: si no coinciden, no se interpola. */
   --netzi-float-filter-identity: saturate(1) contrast(1) brightness(1) blur(0);
   --netzi-float-glow: 0 0 rgba(0, 0, 0, 0);
-  /* VELO de las capas modales: lo que se pinta DETRÁS de un modal, un drawer o la paleta de
-     comandos para apagar el contenido. Es un token porque cada componente lo llevaba escrito a
-     mano y no coincidían. */
+
+  /* --- VELO de las capas modales ---
+     Lo que se pinta DETRÁS de un modal, un drawer o la paleta ⌘K para apagar el
+     contenido. Es un token porque cada componente lo llevaba escrito a mano y no
+     coincidían: modal, drawer y ⌘K iban a `rgba(8,12,20,.55)` con `blur(2px)` y
+     `connection-guard` a `.62` con `blur(3px)`, así que la misma app se oscurecía
+     distinto según qué capa la tapara. */
   --netzi-scrim: rgba(8, 12, 20, 0.28);
   --netzi-scrim-filter: blur(1px);
-  /* Controles. py y px son el relleno interior; h, px y fs por tamaño (sm, md, lg) dan una
-     altura FIJA para que todos los campos y el botón midan lo mismo y alineen en fila. Las
-     alturas y los tamaños de letra escalan con font-scale (ajuste de accesibilidad) para no
-     recortar el texto. La densidad compacta los reduce. */
+
+  /* --- Tema CLARO: texto ---
+     Tres niveles con papeles DISTINTOS, no tres grados de gris intercambiables
+     (ver la tabla de la sección TEXTO al final del archivo):
+       text    → texto principal.
+       text-2  → CUALQUIER texto secundario legible (rótulos, ayudas, pies,
+                 metadatos, placeholders). Es el suelo de 4.5:1 para texto.
+       text-3  → NO textual: iconos decorativos, separadores, chevrons, líneas y
+                 estados deshabilitados. Cumple 3:1 (SC 1.4.11), no 4.5:1. */
+  --netzi-text: #1c252e;
+  --netzi-text-2: #5c6b78;
+  --netzi-text-3: #7a8996;
+  /* Tinta sobre un relleno de color de marca (verde, rojo, amarillo…): todos son
+     claros, así que la oscura es la que cumple. El blanco daba 2.78:1 sobre el
+     rojo del contador de notificaciones. */
+  --netzi-on-accent: #04121f;
+
+  /* --- Tema CLARO: sombras --- */
+  --netzi-shadow-sm: 0 1px 2px rgba(145, 158, 171, 0.16);
+  --netzi-shadow: 0 0 2px rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
+  --netzi-shadow-lg: 0 0 2px rgba(145, 158, 171, 0.2), 0 16px 40px -8px rgba(145, 158, 171, 0.24);
+
+  /* --- Tinte de acento (alias histórico del tinte del primario) --- */
+  --netzi-tint: var(--netzi-primary-tint);
+
+  /* --- Forma --- */
+  --netzi-radius-sm: 6px;
+  --netzi-radius: 8px;
+  --netzi-radius-lg: 10px;
+
+  /* --- Espaciado ---
+     Escala de gaps/paddings de layout (base 4px). Usa estos tokens en la app en
+     vez de píxeles/rem sueltos para mantener el ritmo del sistema. La densidad
+     compacta reduce los pasos medios/grandes. */
+  --netzi-space-0: 0;
+  --netzi-space-1: 2px;
+  --netzi-space-2: 4px;
+  --netzi-space-3: 8px;
+  --netzi-space-4: 12px;
+  --netzi-space-5: 16px;
+  --netzi-space-6: 24px;
+  --netzi-space-7: 32px;
+  --netzi-space-8: 48px;
+
+  /* --- Densidad de controles (la cambia [data-density=compact]) --- */
   --netzi-control-py: 12px;
   --netzi-control-px: 14px;
-  --netzi-control-px-sm: 12px;
-  --netzi-control-px-md: 14px;
-  --netzi-control-px-lg: 16px;
+
+  /* --- Tamaño estándar de controles (sm/md/lg) ---
+     Altura FIJA por tamaño para que todos los inputs de valor y el botón midan
+     exactamente lo mismo y alineen al ponerlos en fila. Escalan con
+     `--netzi-font-scale` (ajuste de accesibilidad) para no recortar el texto.
+     La densidad compacta las reduce. */
   --netzi-control-h-sm: calc(36px * var(--netzi-font-scale, 1));
   --netzi-control-h-md: calc(44px * var(--netzi-font-scale, 1));
   --netzi-control-h-lg: calc(52px * var(--netzi-font-scale, 1));
+  --netzi-control-px-sm: 12px;
+  --netzi-control-px-md: 14px;
+  --netzi-control-px-lg: 16px;
   --netzi-control-fs-sm: calc(13.5px * var(--netzi-font-scale, 1));
   --netzi-control-fs-md: calc(15px * var(--netzi-font-scale, 1));
   --netzi-control-fs-lg: calc(16px * var(--netzi-font-scale, 1));
-  /* Objetivo táctil mínimo (#100): lado mínimo de lo que se toca con el dedo (WCAG 2.5.5). Con
-     puntero táctil los controles no bajan de aquí, ni en tamaño sm ni con densidad compacta. */
-  --netzi-touch-target: 44px;
-  /* Separación táctil mínima (#210): hueco entre las zonas de toque de dos objetivos vecinos
-     con puntero táctil (política 17, criterio A.5), medido entre zonas y no entre los dibujos.
-     Cada componente la usa en su media pointer coarse; con ratón no cambia nada. Las piezas de
-     un control segmentado se tocan y quedan fuera. */
-  --netzi-touch-gap: 8px;
-  /* Paleta CATEGÓRICA de las gráficas (#175): ocho colores para ocho series, sin repetirse, en
-     el orden en que se asignan. Fija y no themeable por preset a propósito: si la serie 1 fuera
-     el primario, con el preset verde o rojo chocaría con la serie del mismo tono, que era justo
-     el fallo de la paleta anterior (azul repetido en las series 1 y 6). Elegida para que los
-     pares se distingan también con protanopia, deuteranopia y tritanopia (simulación de Machado
-     2009; distancia mínima en OKLab de 10 sin daltonismo y 7 con él en claro, 8,9 y 6,2 en
-     oscuro), alternando la luminosidad donde el tono se confunde. Cada color llega a 3:1 (WCAG
-     1.4.11) sobre cada superficie, en claro y en oscuro: el build lo comprueba. El color no
-     basta solo: netzi-chart añade forma de marcador, trazo y trama por serie (WCAG 1.4.1). */
-  /* Serie 1: azul. */
-  --netzi-chart-1: #0072b2;
-  /* Serie 2: naranja quemado. */
-  --netzi-chart-2: #bd582d;
-  /* Serie 3: verde azulado. */
-  --netzi-chart-3: #2d968c;
-  /* Serie 4: vino. */
-  --netzi-chart-4: #7b2c51;
-  /* Serie 5: oliva. */
-  --netzi-chart-5: #4d5200;
-  /* Serie 6: índigo. */
-  --netzi-chart-6: #35468d;
-  /* Serie 7: rosa rojizo. */
-  --netzi-chart-7: #a73b50;
-  /* Serie 8: pizarra. */
-  --netzi-chart-8: #555f7b;
-  /* Fondo ambiental: manchas de color suaves DEBAJO del contenido, que el layout pinta bajo bg.
-     Sin el eje ambient, none. */
-  --netzi-ambient: none;
-}
 
-:root,
-[data-theme] {
-  --netzi-info-text: var(--netzi-blue-text);
-  --netzi-info-graphic: var(--netzi-blue-graphic);
-  /* El velo del 14 % del gráfico de su estado: el fondo redondo de un icono de estado
-     (netzi-result, netzi-connection-guard). El gráfico se mide sobre él, compuesto sobre cada
-     superficie, en su contrato. */
-  --netzi-info-veil: color-mix(in srgb, var(--netzi-info-graphic) 14%, transparent);
-  --netzi-success-text: var(--netzi-green-text);
-  --netzi-success-graphic: var(--netzi-green-graphic);
-  --netzi-success-veil: color-mix(in srgb, var(--netzi-success-graphic) 14%, transparent);
-  --netzi-warning-text: var(--netzi-yellow-text);
-  --netzi-warning-graphic: var(--netzi-yellow-graphic);
-  --netzi-warning-veil: color-mix(in srgb, var(--netzi-warning-graphic) 14%, transparent);
-  --netzi-danger-text: var(--netzi-red-text);
-  --netzi-danger-graphic: var(--netzi-red-graphic);
-  --netzi-danger-veil: color-mix(in srgb, var(--netzi-danger-graphic) 14%, transparent);
-  /* Sinónimo de surface, que es el nombre canónico (#216): el primer escalón de la escala no
-     lleva número. */
-  /* deprecated: Usa surface (--netzi-surface). Deprecado en @netzi/tokens 0.1.0-beta.10; se
-     retira como pronto en @netzi/tokens 0.1.0-beta.11. */
-  --netzi-surface-1: var(--netzi-surface);
-  /* Sinónimo de text, que es el nombre canónico (#216). */
-  /* deprecated: Usa text (--netzi-text). Deprecado en @netzi/tokens 0.1.0-beta.10; se retira
-     como pronto en @netzi/tokens 0.1.0-beta.11. */
-  --netzi-text-1: var(--netzi-text);
-}
-
-:root,
-[data-density] {
-  /* Controles y piezas pequeñas dentro de una superficie: botones, campos, ítems de menú,
-     celdas, iconos en caja. */
-  --netzi-radius-control: var(--netzi-radius-sm);
-  /* Superficies: tarjetas, diálogos, popovers, paneles y la paleta de comandos. */
-  --netzi-radius-surface: var(--netzi-radius-lg);
-  /* Superficies pequeñas o pegadas a un control: el panel de un select, una fecha o una hora,
-     un aviso, una tarjeta compacta. */
-  --netzi-radius-surface-sm: var(--netzi-radius);
-  /* Sinónimo del radio medio (#216), que hoy es el de una superficie pequeña (#228). */
-  /* deprecated: Usa radius.surface.sm (--netzi-radius-surface-sm). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11. */
-  --netzi-radius-md: var(--netzi-radius-surface-sm);
-  /* Entre grupos apilados dentro de un panel o un formulario: campos, filas, columnas. */
-  --netzi-space-stack: var(--netzi-space-4);
-  /* Relleno interior de un contenedor. */
-  /* El de una tarjeta o un panel. */
-  --netzi-space-inset: var(--netzi-space-5);
-  /* El de un contenedor compacto: un panel flotante, un aviso, una sección dentro de un panel. */
-  --netzi-space-inset-sm: var(--netzi-space-4);
-  /* El de un diálogo, un panel lateral o una tarjeta grande. */
-  --netzi-space-inset-lg: var(--netzi-space-6);
-  /* Entre secciones de una página. */
-  --netzi-space-section: var(--netzi-space-7);
-  /* Entre las regiones grandes de una página y como su margen en pantallas anchas. */
-  --netzi-space-page: var(--netzi-space-8);
-}
+  /* --- Tipografía --- */
+  --netzi-font-sans: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
+  --netzi-font-mono: 'Fira Code', ui-monospace, monospace;
 
-:root,
-[data-preset] {
-  /* Tintes del primario, derivados del preset. El suave (10 %) es para superficies grandes, una
-     fila resaltada o un panel, y aguanta primary-text encima justo. El marcado (22 %) es para
-     piezas pequeñas, un chip o una píldora, donde el suave se pierde contra el fondo (1.13:1
-     sobre surface-3); su tinta es text, NO primary-text, que sobre él se queda en 3.9:1. Por
-     eso el suave no se puede subir sin más: es el techo del otro. */
-  --netzi-primary-tint: color-mix(in srgb, var(--netzi-primary) 10%, transparent);
-  --netzi-primary-tint-strong: color-mix(in srgb, var(--netzi-primary) 22%, transparent);
-}
+  /* Escala global del tamaño de letra (1 = 100%). Los componentes calculan
+     sus tamaños como calc(Npx * escala); la cambia el panel de ajustes. */
+  --netzi-font-scale: 1;
 
-:root,
-[data-theme],
-[data-contrast] {
-  /* La capa de hover: el puntero encima. Los controles que ya pintaban su hover con una
-     superficie (surface-2) o con el hover del primario lo conservan; la capa es para lo nuevo y
-     para quien pinte sus propios controles. */
-  --netzi-state-hover: color-mix(in srgb, var(--netzi-text) 8%, transparent);
-  /* La capa de foco: para lo que se enfoca DENTRO de un compuesto (la opción activa de una
-     lista que se recorre con flechas). El foco de un control siempre lleva además su anillo
-     (focus-ring). */
-  --netzi-state-focus: color-mix(in srgb, var(--netzi-text) 12%, transparent);
-  /* La capa de presionado: mientras el dedo o el botón del ratón están abajo. Se suma al hover
-     (en táctil, a lo que haya), y se ve en menos de 100 ms porque no se anima. */
-  --netzi-state-pressed: color-mix(in srgb, var(--netzi-text) 12%, transparent);
-  /* La capa de arrastrado: la pieza que se lleva con el puntero (la pestaña que se reordena). */
-  --netzi-state-dragged: color-mix(in srgb, var(--netzi-text) 16%, transparent);
-  /* Sombras: los nombres de antes de la escala de elevación, en desuso (#220). Apuntan a su
-     nivel y se redeclaran en cada sección con tema o contraste propios, como el anillo de foco,
-     para que sigan al tema donde se usen. */
-  /* deprecated: Usa elevation.floating (--netzi-elevation-floating). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11. */
-  --netzi-shadow: var(--netzi-elevation-floating);
-  /* deprecated: Usa elevation.raised (--netzi-elevation-raised). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11. */
-  --netzi-shadow-sm: var(--netzi-elevation-raised);
-  /* deprecated: Usa elevation.modal (--netzi-elevation-modal). Deprecado en @netzi/tokens
-     0.1.0-beta.10; se retira como pronto en @netzi/tokens 0.1.0-beta.11. */
-  --netzi-shadow-lg: var(--netzi-elevation-modal);
-}
+  /* --- Escala tipográfica (#51) ---
+     El texto que NO es un control (una línea secundaria bajo un título, un pie
+     de tarjeta, un metadato, un título de página) no tenía token: cada app se
+     inventaba la suya y `var(--netzi-font-size-xs)` —que parece existir— se
+     descartaba en silencio. Los pasos salen de lo que el kit ya usa (picos en
+     11 · 12.5 · 14 · 16 · 18 · 22 · 28), con ratio ≈1.15 y **md = 14px**, que es
+     el 100 % de `--netzi-font-scale` (el panel de ajustes divide entre 14).
+     Todos escalan con el ajuste de accesibilidad, como los controles. Los
+     tamaños de los controles (`--netzi-control-fs-*`) son otra familia: van
+     ligados a la altura del control, no a esta escala. La densidad compacta no
+     los toca: el texto no se encoge, se encoge el aire. */
+  --netzi-font-size-xs: calc(11px * var(--netzi-font-scale, 1));
+  --netzi-font-size-sm: calc(12.5px * var(--netzi-font-scale, 1));
+  --netzi-font-size-md: calc(14px * var(--netzi-font-scale, 1));
+  --netzi-font-size-lg: calc(16px * var(--netzi-font-scale, 1));
+  --netzi-font-size-xl: calc(18px * var(--netzi-font-scale, 1));
+  --netzi-font-size-2xl: calc(22px * var(--netzi-font-scale, 1));
+  --netzi-font-size-3xl: calc(28px * var(--netzi-font-scale, 1));
 
-:root,
-[data-theme],
-[data-preset] {
-  /* El fondo de lo SELECCIONADO o activo (la opción elegida, el ítem actual del menú): el tinte
-     suave del primario, el mismo de siempre. El color no basta solo: lo elegido lleva además su
-     marca (aria-selected, aria-current o aria-pressed, y un indicador que no es solo color). */
-  --netzi-state-selected: var(--netzi-primary-tint);
-  /* Tinte de acento: alias histórico del tinte del primario. */
-  --netzi-tint: var(--netzi-primary-tint);
-  /* El indicador de FOCO: contorno o borde del control enfocado. Tiene que llegar a 3:1 sobre
-     el fondo (WCAG 1.4.11) y el primario no llega en claro con azul, verde, naranja ni cian
-     (#76): se apoya en el primario para texto, que cada preset y cada tema calibran. Se declara
-     también en cada elemento con tema o preset propios (redeclareOn): una variable que usa otra
-     se resuelve donde se declara, y una sección oscura dentro de una página clara heredaría el
-     anillo claro. */
-  --netzi-focus-ring: var(--netzi-primary-text);
-}
+  /* Interlineado, sin unidad (se multiplica por el tamaño de cada elemento).
+     `none` para lo que mide una línea (controles, chips); `tight` para
+     títulos; `normal` para texto corriente; `relaxed` para lectura larga. */
+  --netzi-line-height-none: 1;
+  --netzi-line-height-tight: 1.25;
+  --netzi-line-height-normal: 1.5;
+  --netzi-line-height-relaxed: 1.65;
 
-:root,
-[data-theme],
-[data-contrast],
-[data-glass] {
-  /* El PULGAR de las barras de desplazamiento finas del kit (la tabla de datos, #117), sobre un
-     carril transparente: lo que se ve es el pulgar contra la superficie, y es lo que se
-     arrastra, así que pide 3:1 (WCAG 1.4.11). Las barras superpuestas (móvil, macOS) se pintan
-     ENCIMA de las filas, así que también se mide sobre el tinte del primario (fila seleccionada
-     o con el puntero encima): ahí text-3 se quedaba en 2.4–2.98:1, y por eso es text-2. El modo
-     de alto contraste, que se pone en la raíz, lo sube con él. Se declara también en cada
-     elemento con tema propio (redeclareOn), como el anillo de foco: una sección oscura dentro
-     de una página clara heredaría el pulgar claro. */
-  --netzi-scrollbar-thumb: var(--netzi-text-2);
+  /* Peso. Los cinco que usa el kit; la fuente cargada (`fonts.css`) trae
+     exactamente estos cortes, otro valor se sintetiza y se ve peor. */
+  --netzi-font-weight-regular: 400;
+  --netzi-font-weight-medium: 500;
+  --netzi-font-weight-semibold: 600;
+  --netzi-font-weight-bold: 700;
+  --netzi-font-weight-extrabold: 800;
 }
 
-/* Eje MODO (data-theme). Sin el atributo, claro: los valores de las capas. dark los redefine. */
-
-@media not print {
-  [data-theme='light'] {
-    /* El valor por defecto puesto en un elemento: los de las capas otra vez, para una sección
-       dentro de otra con data-theme. */
-    --netzi-blue-text: #076aa3;
-    --netzi-blue-graphic: #0e84cd;
-    --netzi-green-text: #05773a;
-    --netzi-green-graphic: #069047;
-    --netzi-purple-text: #743fd4;
-    --netzi-red-text: #a34444;
-    --netzi-red-graphic: #df464b;
-    --netzi-yellow-text: #7d6421;
-    --netzi-yellow-graphic: #9d7a0c;
-    --netzi-surface-2: #f4f6f8;
-    --netzi-surface-3: #eef1f4;
-    --netzi-surface: #ffffff;
-    --netzi-text-2: #5c6b78;
-    --netzi-text-3: #7a8996;
-    --netzi-text: #1c252e;
-    --netzi-primary-dark: var(--netzi-blue-dark);
-    --netzi-primary-hover: #0a8fdd;
-    --netzi-primary-pressed: #279ce1;
-    --netzi-primary-text: #076ba6;
-    --netzi-primary-graphic: #0987d2;
-    --netzi-primary-tint: color-mix(in srgb, var(--netzi-primary) 10%, transparent);
-    --netzi-primary-tint-strong: color-mix(in srgb, var(--netzi-primary) 22%, transparent);
-    --netzi-on-accent: #04121f;
-    --netzi-bg: #f7f9fb;
-    --netzi-border-2: #dce0e5;
-    --netzi-border: #eaedf0;
-    --netzi-elevation-raised: 0 1px 2px rgba(145, 158, 171, 0.16);
-    --netzi-elevation-floating:
-      0 0 2px rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
-    --netzi-elevation-modal:
-      0 0 2px rgba(145, 158, 171, 0.2), 0 16px 40px -8px rgba(145, 158, 171, 0.24);
-    --netzi-float-bg: #ffffff;
-    --netzi-float-border-2: #dce0e5;
-    --netzi-float-border: #eaedf0;
-    --netzi-float-surface-2: #f4f6f8;
-    --netzi-float-surface-3: #eef1f4;
-    --netzi-float-surface: #ffffff;
-    --netzi-float-filter: none;
-    --netzi-float-glow: 0 0 rgba(0, 0, 0, 0);
-    --netzi-scrim: rgba(8, 12, 20, 0.28);
-    --netzi-chart-1: #0072b2;
-    --netzi-chart-2: #bd582d;
-    --netzi-chart-3: #2d968c;
-    --netzi-chart-4: #7b2c51;
-    --netzi-chart-5: #4d5200;
-    --netzi-chart-6: #35468d;
-    --netzi-chart-7: #a73b50;
-    --netzi-chart-8: #555f7b;
-    --netzi-ambient: none;
-  }
+[data-theme='dark'] {
+  /* --- Tema OSCURO: superficies --- */
+  --netzi-bg: #0d1117;
+  --netzi-surface: #161b22;
+  --netzi-surface-2: #0d1117;
+  --netzi-surface-3: #21262d;
+
+  /* --- Tema OSCURO: bordes --- */
+  --netzi-border: #21262d;
+  --netzi-border-2: #30363d;
+
+  /* --- Tema OSCURO: capas flotantes --- */
+  --netzi-float-bg: #161b22;
+  --netzi-float-border: #21262d;
+  --netzi-float-border-2: #30363d;
+  --netzi-float-surface: #161b22;
+  --netzi-float-surface-2: #0d1117;
+  --netzi-float-surface-3: #21262d;
+
+  /* --- Tema OSCURO: los semánticos como texto ---
+     Sobre fondo oscuro casi todos sirven crudos; solo el rojo y el morado piden
+     un punto de luz para llegar al mínimo. */
+  --netzi-blue-text: #0ba5ff;
+  --netzi-green-text: #0ae972;
+  --netzi-yellow-text: #f0c040;
+  --netzi-red-text: #ff7272;
+  --netzi-purple-text: #ac7eff;
+  --netzi-primary-text: #0da6ff;
+
+  /* --- Tema OSCURO: texto (mismos papeles que en claro) --- */
+  --netzi-text: #ffffff;
+  --netzi-text-2: #8b949e;
+  --netzi-text-3: #6e7681;
+  --netzi-on-accent: #04121f;
 
-  [data-theme='dark'] {
-    /* Tema OSCURO. Sobre fondo oscuro casi todos los colores de marca sirven crudos como texto;
-       solo el rojo y el morado piden un punto de luz para llegar al mínimo. Por lo mismo, el
-       gráfico de cada estado (#189) es su crudo. El tinte del primario sube un poco de alfa. */
-    --netzi-bg: #0d1117;
-    --netzi-surface: #161b22;
-    --netzi-surface-2: #0d1117;
-    --netzi-surface-3: #21262d;
-    --netzi-border: #21262d;
-    --netzi-border-2: #30363d;
-    --netzi-float-bg: #161b22;
-    --netzi-float-border: #21262d;
-    --netzi-float-border-2: #30363d;
-    --netzi-float-surface: #161b22;
-    --netzi-float-surface-2: #0d1117;
-    --netzi-float-surface-3: #21262d;
-    --netzi-blue-text: #0ba5ff;
-    --netzi-blue-graphic: var(--netzi-blue);
-    --netzi-green-text: #0ae972;
-    --netzi-green-graphic: var(--netzi-green);
-    --netzi-yellow-text: #f0c040;
-    --netzi-yellow-graphic: var(--netzi-yellow);
-    --netzi-red-text: #ff7272;
-    --netzi-red-graphic: var(--netzi-red);
-    --netzi-purple-text: #ac7eff;
-    --netzi-primary-text: #0da6ff;
-    --netzi-primary-graphic: #0ba5ff;
-    --netzi-primary-tint: color-mix(in srgb, var(--netzi-primary) 15%, transparent);
-    --netzi-primary-tint-strong: color-mix(in srgb, var(--netzi-primary) 28%, transparent);
-    --netzi-text: #ffffff;
-    --netzi-text-2: #8b949e;
-    --netzi-text-3: #6e7681;
-    /* La paleta de las gráficas en oscuro: mismos tonos, aclarados hasta 3:1 sobre la
-       superficie más clara del tema (surface-3). */
-    --netzi-chart-1: #3d9df0;
-    --netzi-chart-2: #e37b51;
-    --netzi-chart-3: #52ddd8;
-    --netzi-chart-4: #c062a0;
-    --netzi-chart-5: #cfa726;
-    --netzi-chart-6: #5c7ec7;
-    --netzi-chart-7: #d55444;
-    --netzi-chart-8: #9aa4b2;
-    --netzi-on-accent: #04121f;
-    --netzi-elevation-raised: 0 1px 2px rgba(0, 0, 0, 0.4);
-    --netzi-elevation-floating: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -6px rgba(0, 0, 0, 0.45);
-    --netzi-elevation-modal: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 50px -10px rgba(0, 0, 0, 0.6);
-  }
+  /* --- Tema OSCURO: sombras --- */
+  --netzi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --netzi-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -6px rgba(0, 0, 0, 0.45);
+  --netzi-shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 50px -10px rgba(0, 0, 0, 0.6);
 
-  [data-theme='dark'] :where([data-preset]:not([data-theme])) {
-    --netzi-primary-tint: color-mix(in srgb, var(--netzi-primary) 15%, transparent);
-    --netzi-primary-tint-strong: color-mix(in srgb, var(--netzi-primary) 28%, transparent);
-  }
+  /* El tinte sube un poco de alfa en oscuro. */
+  --netzi-primary-tint: color-mix(in srgb, var(--netzi-primary) 15%, transparent);
+  --netzi-primary-tint-strong: color-mix(in srgb, var(--netzi-primary) 28%, transparent);
 }
 
-/* Eje PRESET (data-preset): el color primario. Sin el atributo, azul (el de las capas). Cada
-   contexto con mode además del preset es la combinación de los dos: gana a cada eje por
-   separado. */
-
+/* ===========================================================
+   PRESETS de color primario
+   =========================================================== */
 [data-preset='green'] {
   --netzi-primary: #0ae972;
-  --netzi-primary-dark: #079b4e;
+  --netzi-primary-dark: #07a352;
   --netzi-primary-hover: #07a352;
-  --netzi-primary-pressed: #25ae67;
-  --netzi-primary-text: #05793b;
-  --netzi-primary-graphic: #06984a;
   --netzi-on-primary: #04121f;
+  --netzi-primary-text: #05793b;
 }
-
-@media not print {
-  [data-preset='green'] :where([data-theme='light']:not([data-preset])) {
-    --netzi-primary-dark: #079b4e;
-    --netzi-primary-hover: #07a352;
-    --netzi-primary-pressed: #25ae67;
-    --netzi-primary-text: #05793b;
-    --netzi-primary-graphic: #06984a;
-  }
-}
-
+/* El morado es el ÚNICO preset donde la tinta oscura no cumple (4.13): se queda
+   en blanco, que sí (4.57). La regla es «la que cumpla sobre su color». */
 [data-preset='purple'] {
-  /* El morado es el ÚNICO preset donde la tinta oscura no cumple (4.13): se queda en blanco,
-     que sí (4.57). La regla es la que cumpla sobre su color. */
   --netzi-primary: #8c4cff;
   --netzi-primary-dark: #6a2fd6;
   --netzi-primary-hover: #6a2fd6;
-  --netzi-primary-pressed: #5d29bc;
-  --netzi-primary-text: #7841db;
-  --netzi-primary-graphic: #8c4cff;
   --netzi-on-primary: #ffffff;
+  --netzi-primary-text: #7841db;
 }
-
-@media not print {
-  [data-preset='purple'] :where([data-theme='light']:not([data-preset])) {
-    --netzi-primary-dark: #6a2fd6;
-    --netzi-primary-hover: #6a2fd6;
-    --netzi-primary-pressed: #5d29bc;
-    --netzi-primary-text: #7841db;
-    --netzi-primary-graphic: #8c4cff;
-  }
-}
-
 [data-preset='orange'] {
   --netzi-primary: #f0a020;
-  --netzi-primary-dark: #bf780a;
+  --netzi-primary-dark: #c97e0a;
   --netzi-primary-hover: #c97e0a;
-  --netzi-primary-pressed: #cf8d27;
-  --netzi-primary-text: #8e5e13;
-  --netzi-primary-graphic: #b47718;
   --netzi-on-primary: #04121f;
+  --netzi-primary-text: #8e5e13;
 }
-
-@media not print {
-  [data-preset='orange'] :where([data-theme='light']:not([data-preset])) {
-    --netzi-primary-dark: #bf780a;
-    --netzi-primary-hover: #c97e0a;
-    --netzi-primary-pressed: #cf8d27;
-    --netzi-primary-text: #8e5e13;
-    --netzi-primary-graphic: #b47718;
-  }
-}
-
 [data-preset='red'] {
   --netzi-primary: #ff5630;
   --netzi-primary-dark: #d63916;
   --netzi-primary-hover: #eb4a25;
-  --netzi-primary-pressed: #ed603f;
-  --netzi-primary-text: #b53d22;
-  --netzi-primary-graphic: #e34d2b;
   --netzi-on-primary: #04121f;
+  --netzi-primary-text: #b53d22;
 }
-
-@media not print {
-  [data-preset='red'] :where([data-theme='light']:not([data-preset])) {
-    --netzi-primary-dark: #d63916;
-    --netzi-primary-hover: #eb4a25;
-    --netzi-primary-pressed: #ed603f;
-    --netzi-primary-text: #b53d22;
-    --netzi-primary-graphic: #e34d2b;
-  }
-}
-
 [data-preset='cyan'] {
   --netzi-primary: #00b8d9;
   --netzi-primary-dark: #0892ab;
   --netzi-primary-hover: #0892ab;
-  --netzi-primary-pressed: #269fb5;
-  --netzi-primary-text: #007287;
-  --netzi-primary-graphic: #008ea8;
   --netzi-on-primary: #04121f;
+  --netzi-primary-text: #007287;
 }
 
-@media not print {
-  [data-preset='cyan'] :where([data-theme='light']:not([data-preset])) {
-    --netzi-primary-dark: #0892ab;
-    --netzi-primary-hover: #0892ab;
-    --netzi-primary-pressed: #269fb5;
-    --netzi-primary-text: #007287;
-    --netzi-primary-graphic: #008ea8;
-  }
-
-  [data-theme='dark'][data-preset='green'] {
-    --netzi-primary-text: #0ae972;
-    --netzi-primary-graphic: #0ae972;
-  }
-
-  [data-theme='dark'][data-preset='purple'] {
-    /* El morado oscuro de claro (#6a2fd6) se hunde en el fondo oscuro (2.7:1): un interruptor
-       encendido apenas se distinguía de la tarjeta. */
-    --netzi-primary-text: #ad80ff;
-    --netzi-primary-graphic: #9255ff;
-    --netzi-primary-dark: #824ff3;
-    --netzi-primary-hover: #7d48f2;
-    --netzi-primary-pressed: #6e3fd5;
-  }
-
-  [data-theme='dark'][data-preset='orange'] {
-    --netzi-primary-text: #f0a020;
-    --netzi-primary-graphic: #f0a020;
-  }
-
-  [data-theme='dark'][data-preset='red'] {
-    --netzi-primary-text: #ff6a49;
-    --netzi-primary-graphic: #ff5630;
-  }
-
-  [data-theme='dark'][data-preset='cyan'] {
-    --netzi-primary-text: #00b8d9;
-    --netzi-primary-graphic: #00b8d9;
-  }
+/* El indicador de FOCO: contorno o borde que marca el control enfocado. Tiene que
+   llegar a 3:1 sobre el fondo (WCAG 1.4.11) y el primario no llega en claro con azul,
+   verde, naranja ni cian (2.7, 1.6, 2.2 y 2.4:1; #76). Se apoya en el primario para
+   texto, que cada preset y cada tema ya calibran a 4.5:1 sobre las superficies. Se
+   declara también en cada elemento con tema o preset propios: una variable que usa
+   otra se resuelve donde se declara, y una sección oscura dentro de una página clara
+   heredaría el anillo claro. */
+:root,
+[data-theme],
+[data-preset] {
+  --netzi-focus-ring: var(--netzi-primary-text);
 }
 
-/* Eje CONTRASTE (data-contrast): bordes y texto más marcados. Cada nivel de texto toma el valor
-   del nivel de encima, así que text-3 pasa de 3:1 a más de 4.5:1 y el modo cumple incluso donde
-   alguien lo haya usado para texto, que es justo lo que se espera de un modo de alto contraste.
-   El borde fuerte (border-2) llega a 3:1 sobre cada superficie, como el borde de un control
-   (WCAG 1.4.11). Sin el atributo en la página, sigue al sistema (#150): con prefers-contrast
-   more aplica el alto, y data-contrast='normal' lo deja fuera a mano. */
+/* El primario para TEXTO en oscuro: los saturados ya sirven, salvo dos. */
+[data-theme='dark'][data-preset='green'] {
+  --netzi-primary-text: #0ae972;
+}
+[data-theme='dark'][data-preset='purple'] {
+  --netzi-primary-text: #ad80ff;
+  /* El morado oscuro de claro (#6a2fd6) se hunde en el fondo oscuro (2.7:1): un
+     interruptor encendido apenas se distinguía de la tarjeta. */
+  --netzi-primary-dark: #7d48f2;
+  --netzi-primary-hover: #7d48f2;
+}
+[data-theme='dark'][data-preset='orange'] {
+  --netzi-primary-text: #f0a020;
+}
+[data-theme='dark'][data-preset='red'] {
+  --netzi-primary-text: #ff6a49;
+}
+[data-theme='dark'][data-preset='cyan'] {
+  --netzi-primary-text: #00b8d9;
+}
 
+/* ===========================================================
+   CONTRASTE alto: bordes y texto más marcados
+   =========================================================== */
+/* Cada nivel de texto toma el valor del nivel de encima: text-2 sube al tono
+   reforzado y text-3 hereda el text-2 por defecto. Así `text-3` pasa de 3:1 a
+   más de 4.5:1 y el modo cumple incluso donde alguien lo haya usado para texto,
+   que es justo lo que se espera de un modo de alto contraste. */
 [data-contrast='high'] {
   --netzi-border: #c9cfd6;
-  --netzi-border-2: #828b94;
+  --netzi-border-2: #aeb6bf;
   --netzi-text-2: #2a333c;
   --netzi-text-3: #5c6b78;
   --netzi-float-border: #c9cfd6;
-  --netzi-float-border-2: #828b94;
-  --netzi-elevation-raised: 0 1px 2px rgba(99, 115, 129, 0.3);
+  --netzi-float-border-2: #aeb6bf;
+  --netzi-shadow-sm: 0 1px 2px rgba(99, 115, 129, 0.3);
 }
 
-@media not print {
-  [data-contrast='high'] :where([data-theme='light']:not([data-contrast])) {
-    --netzi-border-2: #828b94;
-    --netzi-border: #c9cfd6;
-    --netzi-text-2: #2a333c;
-    --netzi-text-3: #5c6b78;
-    --netzi-float-border-2: #828b94;
-    --netzi-float-border: #c9cfd6;
-    --netzi-elevation-raised: 0 1px 2px rgba(99, 115, 129, 0.3);
-  }
+[data-theme='dark'][data-contrast='high'] {
+  --netzi-border: #3a434d;
+  --netzi-border-2: #525c66;
+  --netzi-text-2: #aab4bf;
+  --netzi-text-3: #8b949e;
+  --netzi-float-border: #3a434d;
+  --netzi-float-border-2: #525c66;
 }
 
-@media (prefers-contrast: more) {
-  :root:where(:not([data-contrast])) {
-    /* Lo mismo cuando lo pide el sistema y nadie fija data-contrast. */
-    --netzi-border: #c9cfd6;
-    --netzi-border-2: #828b94;
-    --netzi-text-2: #2a333c;
-    --netzi-text-3: #5c6b78;
-    --netzi-float-border: #c9cfd6;
-    --netzi-float-border-2: #828b94;
-    --netzi-elevation-raised: 0 1px 2px rgba(99, 115, 129, 0.3);
-  }
+/* ===========================================================
+   GLASS: las capas flotantes, de cristal
+
+   Translúcidas, con el fondo desenfocado y saturado por detrás. Se activa con
+   `data-glass="on"` en <html> (lo pone NetziThemeService), y solo afecta a las
+   capas que FLOTAN sobre el contenido: las superficies de contenido —tarjetas,
+   secciones, tablas— siguen opacas, porque ahí el cristal solo resta.
+
+   Sobre cristal el texto NO se lee contra una superficie fija: se lee contra lo
+   que haya debajo, que cambia al scrollear. El peor caso es "negro puro debajo"
+   en claro y "blanco puro debajo" en oscuro, y es ESE el que tiene que cumplir
+   4.5:1. Hay dos formas de conseguirlo y solo una deja que esto parezca cristal:
+
+     - Subir el alfa hasta tapar el fondo. Cumple, pero con 0.82 ya es
+       prácticamente una superficie opaca: se pierde el efecto entero.
+     - **Acotar el fondo con el propio filtro**: `contrast()` comprime su rango
+       hacia el medio y `brightness()` lo empuja hacia el tono de la capa (arriba
+       en claro, abajo en oscuro). Al entrar ya acotado, un alfa MUCHO más bajo
+       basta para el mismo suelo — y con menos alfa se ve lo de detrás, que es
+       justo de lo que va el efecto.
+
+   Por eso el filtro no es solo `blur`: cada función tiene un papel.
+     saturate(180%)  el color de debajo se aviva al difuminarse (lo vistoso).
+     contrast(0.6)   comprime el rango del fondo hacia el gris medio.
+     brightness()    lo empuja al tono de la capa: >1 en claro, <1 en oscuro.
+     blur(28px)      lo difumina; cuanto más ancho, más "vidrio esmerilado".
+
+   Medido con esa cadena: en los dos temas el plano
+   contrario puro debajo (negro en claro, blanco en oscuro) es el único caso
+   donde el texto secundario cede a ~4.1-4.2:1 con el primario ≥ 4.5; contra
+   el fondo del kit y contra un gris medio, ambos pasan de 6:1. Sin la compresión del filtro haría falta alfa 0.82 para
+   el mismo suelo, y a 0.82 esto ya no parece cristal. Lo verifica
+   `tokens-contrast.spec.ts`, que modela la cadena entera —no solo el alfa—, así
+   que tocar cualquiera de las cuatro funciones o el alfa mueve el veredicto.
+   =========================================================== */
+[data-glass='on'] {
+  --netzi-float-bg: rgba(255, 255, 255, 0.44);
+  --netzi-float-border: rgba(255, 255, 255, 0.7);
+  --netzi-float-border-2: rgba(255, 255, 255, 0.85);
+  /* Lo anidado en un panel de cristal también es vidrio: una tarjeta opaca
+     dentro de un drawer translúcido era exactamente la queja («hay elementos
+     que no se ponen translúcidos»). Los tres son tintes OSCUROS que se alejan
+     de la lámina un paso, dos y tres, a LA MISMA distancia que las superficies
+     opacas que imitan: `#f4f6f8` es un 4,5 % de tinta sobre blanco y `#eef1f4`
+     un 7,5 %. Más fuertes (se probó al 9 y al 13 %) las tarjetas de un drawer
+     salían como placas grises, como deshabilitadas. Un tinte blanco no vale: la
+     lámina clara ya es casi blanca y la burbuja de un comentario desaparecía
+     sobre ella. Oscurecer resta contraste al texto, y por eso `--netzi-text-2`
+     baja aquí dos niveles; el guardián comprueba que sobre el tinte más fuerte
+     sigue por encima de 4.5:1 con negro puro debajo. */
+  --netzi-float-surface: rgba(28, 37, 46, 0.02);
+  --netzi-float-surface-2: rgba(28, 37, 46, 0.045);
+  --netzi-float-surface-3: rgba(28, 37, 46, 0.075);
+  /* Alfa 0.44, brillo 1.25 y solo 10 px de desenfoque, para que se vea lo que
+     hay debajo (el usuario eligió este punto tras probar cinco niveles, del más
+     denso al más abierto; se quedó el más abierto). El brillo bajó
+     de 1.5 a 1.25 porque a 1.5 todo lo de debajo se lavaba a blanco y en claro el
+     cristal «no se notaba». El precio, como en oscuro, lo paga el caso extremo:
+     con un plano NEGRO debajo el texto secundario (#2a333c) queda en 4.2:1 (el
+     primario en 5.1); sobre la tinta del kit, 5.1; contra el fondo del kit y
+     contra un gris medio, ambos pasan de 7:1. */
+  --netzi-float-filter: saturate(200%) contrast(0.6) brightness(1.25) blur(10px);
+  /* El texto sube un nivel con el cristal, en TODA la página y no solo dentro de
+     las capas. Va aquí, en el mismo elemento que `data-theme`, y con literales:
+     declararlo en cada capa como `var(--netzi-float-text-2)` NO se reinvalidaba
+     al cambiar de tema en caliente y el sidebar se quedaba con el color del tema
+     anterior (medido: 3.08:1 tras pulsar el interruptor). En una superficie
+     opaca el refuerzo tampoco estorba: sube de 4.84 a 7.94. */
+  --netzi-text-2: #2a333c;
+  --netzi-text-3: #5c6b78;
+  /* --- LENTE del canto (opt-in: `data-glass-lens="on"`) ---
+     Un anillo con su PROPIO desenfoque, más fuerte que el del interior, para que
+     el canto parezca tener espesor. No es refracción de verdad —el fondo no se
+     curva— porque eso hoy no se puede: Chromium acepta
+     `backdrop-filter: url(#filtro-svg)` y luego lo IGNORA (comprobado: el mismo
+     filtro como `filter` normal sí deforma), y Safari ni lo acepta.
+     La cadena sale de destripar una implementación que sí convence (tonnitools):
+     lo que parece refracción es `invert()` + `contrast()` alto en un anillo
+     ESTRECHO del canto. Ellos apilan siete capas de `backdrop-filter` para
+     conseguirlo; aquí va una sola, porque cada capa cuesta frames.
+     ⚠️ Cuesta caro: es una segunda capa de `backdrop-filter`. Con una sola capa
+     en pantalla sale gratis (60 fps medidos); apilada con el shell cae a ~26.
+     Por eso es opt-in y por eso el shell se apaga cuando hay una capa encima. */
+  --netzi-float-lens: blur(18px) invert(0.18) brightness(1.1) saturate(1.3) hue-rotate(-10deg)
+    contrast(2);
+  --netzi-float-lens-size: 5px;
+
+  /* Filo especular, con GROSOR: luz en el canto de arriba y sombra dentro del de
+     abajo. Un solo filo de luz se lee como un velo iluminado; los dos juntos dan
+     el canto de una pieza de vidrio, que es la diferencia entre «translúcido» y
+     «cristal». No toca ni el alfa ni el filtro, así que no mueve el contraste. */
+  --netzi-float-glow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(11, 22, 34, 0.07);
+}
+
+[data-theme='dark'][data-glass='on'] {
+  --netzi-float-bg: rgba(22, 27, 34, 0.12);
+  --netzi-float-border: rgba(255, 255, 255, 0.14);
+  --netzi-float-border-2: rgba(255, 255, 255, 0.22);
+  /* En oscuro los tintes van hacia el negro, que aquí además MEJORA el
+     contraste del texto claro. */
+  --netzi-float-surface: rgba(0, 0, 0, 0.12);
+  --netzi-float-surface-2: rgba(0, 0, 0, 0.22);
+  --netzi-float-surface-3: rgba(0, 0, 0, 0.32);
+  /* Alfa 0.12, brillo 0.56 y 10 px de desenfoque (el usuario eligió este punto
+     tras probar cinco niveles; se quedó el más abierto). El alfa es lo que deja
+     pasar el COLOR de debajo; el brillo lo topa el contraste: el texto primario
+     tiene que quedar en 4.5:1 con un plano BLANCO debajo (5.1 aquí) y el
+     secundario, subido dos niveles (#d8dee6), en 3:1 (4.1). Sobre el fondo del
+     kit y sobre un gris medio (una tarjeta clara o una foto) los tres siguen
+     holgados. Los números los fija `tokens-contrast.spec.ts`. */
+  --netzi-float-filter: saturate(200%) contrast(0.6) brightness(0.56) blur(10px);
+  --netzi-text-2: #d8dee6;
+  --netzi-text-3: #aab4bf;
+  /* En oscuro la sombra del canto inferior es más marcada: sobre fondo oscuro una
+     línea negra se pierde, y sin ella el canto vuelve a no tener grosor. */
+  --netzi-float-glow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
+  /* El velo también se hunde en oscuro: el mismo alfa sobre un fondo ya oscuro
+     apenas separa la capa del contenido. */
+  --netzi-scrim: rgba(2, 5, 10, 0.45);
+  /* En oscuro se invierte menos: sobre fondo oscuro, invertir de más convierte el
+     canto en un halo blanco. */
+  --netzi-float-lens: blur(18px) invert(0.12) brightness(1.05) saturate(1.3) hue-rotate(-10deg)
+    contrast(1.7);
 }
 
-@media not print {
-  @media (prefers-contrast: more) {
-    :root:where(:not([data-contrast])) :where([data-theme='light']:not([data-contrast])) {
-      --netzi-border-2: #828b94;
-      --netzi-border: #c9cfd6;
-      --netzi-text-2: #2a333c;
-      --netzi-text-3: #5c6b78;
-      --netzi-float-border-2: #828b94;
-      --netzi-float-border: #c9cfd6;
-      --netzi-elevation-raised: 0 1px 2px rgba(99, 115, 129, 0.3);
-    }
-  }
+/* ===========================================================
+   FONDO AMBIENTAL (`data-ambient="on"`, lo pone `NetziThemeService`)
+   Manchas de color suaves DEBAJO del contenido, que el layout pinta bajo
+   `--netzi-bg`. Es lo que le da al cristal algo que desenfocar: sobre un fondo
+   liso, un panel translúcido se ve como una placa gris; sobre esto, como
+   vidrio. Va con los colores del preset (`--netzi-primary`) y dos de marca.
+   Los porcentajes son bajos a propósito: el texto se sigue leyendo encima
+   (medido: `--netzi-text-3` sobre la mancha más fuerte, 4.4:1 en claro y 4.6:1
+   en oscuro, por encima del 3:1 que exige). En alto contraste se apaga.
+   =========================================================== */
+:root {
+  --netzi-ambient: none;
 }
 
-@media not print {
-  [data-theme='dark'][data-contrast='high'] {
-    --netzi-border: #3a434d;
-    --netzi-border-2: #68717b;
-    --netzi-text-2: #aab4bf;
-    --netzi-text-3: #8b949e;
-    --netzi-float-border: #3a434d;
-    --netzi-float-border-2: #68717b;
-  }
+[data-ambient='on'] {
+  --netzi-ambient:
+    radial-gradient(
+      55% 45% at 8% 0%,
+      color-mix(in srgb, var(--netzi-primary) 16%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      45% 40% at 100% 100%,
+      color-mix(in srgb, var(--netzi-purple) 12%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      35% 30% at 70% 10%,
+      color-mix(in srgb, var(--netzi-green) 8%, transparent),
+      transparent 70%
+    );
 }
 
-@media not print {
-  @media (prefers-contrast: more) {
-    [data-theme='dark']:not([data-contrast]):where(:not([data-contrast] *)) {
-      /* Lo mismo cuando lo pide el sistema y nadie fija data-contrast. */
-      --netzi-border: #3a434d;
-      --netzi-border-2: #68717b;
-      --netzi-text-2: #aab4bf;
-      --netzi-text-3: #8b949e;
-      --netzi-float-border: #3a434d;
-      --netzi-float-border-2: #68717b;
-    }
-  }
+[data-theme='dark'][data-ambient='on'] {
+  --netzi-ambient:
+    radial-gradient(
+      55% 45% at 8% 0%,
+      color-mix(in srgb, var(--netzi-primary) 22%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      45% 40% at 100% 100%,
+      color-mix(in srgb, var(--netzi-purple) 18%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      35% 30% at 70% 10%,
+      color-mix(in srgb, var(--netzi-green) 10%, transparent),
+      transparent 70%
+    );
 }
 
-/* Eje CRISTAL (data-glass): las capas flotantes, translúcidas, con el fondo desenfocado y
-   saturado por detrás. Solo afecta a lo que FLOTA sobre el contenido; las superficies de
-   contenido siguen opacas, porque ahí el cristal solo resta. Sobre cristal el texto se lee
-   contra lo que haya debajo, que cambia al desplazar: el peor caso es negro puro debajo en
-   claro y blanco puro en oscuro. El suelo no lo pone solo el alfa: el filtro ACOTA el fondo
-   antes de componerlo (saturate aviva el color, contrast comprime el rango hacia el gris medio,
-   brightness lo empuja al tono de la capa, blur lo difumina), y por eso basta un alfa mucho más
-   bajo, con el que se ve lo de detrás. Lo mide el test de contraste modelando la cadena entera:
-   tocar cualquiera de las funciones o el alfa mueve el veredicto. Quien pide menos
-   transparencia, o un navegador sin backdrop-filter, recibe la superficie opaca de siempre. */
+/* En alto contraste no hay manchas: el fondo vuelve a ser liso. */
+[data-contrast='high'][data-ambient='on'] {
+  --netzi-ambient: none;
+}
 
-@media not print {
+/* Quien pide menos transparencia recibe la superficie opaca de siempre, igual
+   que el kit ya respeta `prefers-reduced-motion` en las animaciones. */
+@media (prefers-reduced-transparency: reduce) {
   [data-glass='on'] {
-    /* Alfa 0.44, brillo 1.25 y 10 px de desenfoque, para que se vea lo que hay debajo (el
-       usuario eligió el más abierto de cinco niveles). Lo anidado en un panel de cristal
-       también es vidrio: tintes OSCUROS que se alejan de la lámina a la misma distancia que las
-       superficies opacas que imitan; más fuertes las tarjetas salían como placas grises.
-       Oscurecer resta contraste al texto, y por eso text-2 sube aquí dos niveles, en TODA la
-       página y con literales: declararlo por capa como referencia no se reinvalidaba al cambiar
-       de tema en caliente. La LENTE del canto (opt-in, data-glass-lens) es un anillo con su
-       propio desenfoque para que el canto parezca tener espesor; cuesta una segunda capa de
-       backdrop-filter. El filo especular (glow) da luz arriba y sombra abajo: el canto de una
-       pieza de vidrio; no toca ni el alfa ni el filtro. */
-    --netzi-float-bg: rgba(255, 255, 255, 0.44);
-    --netzi-float-border: rgba(255, 255, 255, 0.7);
-    --netzi-float-border-2: rgba(255, 255, 255, 0.85);
-    --netzi-float-surface: rgba(28, 37, 46, 0.02);
-    --netzi-float-surface-2: rgba(28, 37, 46, 0.045);
-    --netzi-float-surface-3: rgba(28, 37, 46, 0.075);
-    --netzi-float-filter: saturate(200%) contrast(0.6) brightness(1.25) blur(10px);
-    --netzi-float-lens: blur(18px) invert(0.18) brightness(1.1) saturate(1.3) hue-rotate(-10deg)
-      contrast(2);
-    --netzi-float-lens-size: 5px;
-    --netzi-float-glow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(11, 22, 34, 0.07);
-    --netzi-text-2: #2a333c;
-    --netzi-text-3: #5c6b78;
-  }
-
-  [data-glass='on'] :where([data-theme='light']:not([data-glass])) {
-    --netzi-float-bg: rgba(255, 255, 255, 0.44);
-    --netzi-float-border-2: rgba(255, 255, 255, 0.85);
-    --netzi-float-border: rgba(255, 255, 255, 0.7);
-    --netzi-float-surface-2: rgba(28, 37, 46, 0.045);
-    --netzi-float-surface-3: rgba(28, 37, 46, 0.075);
-    --netzi-float-surface: rgba(28, 37, 46, 0.02);
-    --netzi-float-filter: saturate(200%) contrast(0.6) brightness(1.25) blur(10px);
-    --netzi-float-lens: blur(18px) invert(0.18) brightness(1.1) saturate(1.3) hue-rotate(-10deg)
-      contrast(2);
-    --netzi-float-glow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(11, 22, 34, 0.07);
-    --netzi-text-2: #2a333c;
-    --netzi-text-3: #5c6b78;
+    --netzi-float-bg: #ffffff;
+    --netzi-float-border: #eaedf0;
+    --netzi-float-border-2: #dce0e5;
+    --netzi-float-surface: #ffffff;
+    --netzi-float-surface-2: #f4f6f8;
+    --netzi-float-surface-3: #eef1f4;
+    --netzi-float-filter: none;
+    --netzi-float-glow: 0 0 rgba(0, 0, 0, 0);
+    --netzi-scrim-filter: none;
   }
 
   [data-theme='dark'][data-glass='on'] {
-    /* En oscuro los tintes van hacia el negro, que aquí MEJORA el contraste del texto claro.
-       Alfa 0.12 y brillo 0.56: el texto primario queda en 4.5:1 con un plano blanco debajo y el
-       secundario, subido dos niveles, en 3:1. La sombra del canto inferior es más marcada, el
-       velo se hunde y la lente invierte menos, para no convertir el canto en un halo blanco. */
-    --netzi-float-bg: rgba(22, 27, 34, 0.12);
-    --netzi-float-border: rgba(255, 255, 255, 0.14);
-    --netzi-float-border-2: rgba(255, 255, 255, 0.22);
-    --netzi-float-surface: rgba(0, 0, 0, 0.12);
-    --netzi-float-surface-2: rgba(0, 0, 0, 0.22);
-    --netzi-float-surface-3: rgba(0, 0, 0, 0.32);
-    --netzi-float-filter: saturate(200%) contrast(0.6) brightness(0.56) blur(10px);
-    --netzi-float-glow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
-    --netzi-float-lens: blur(18px) invert(0.12) brightness(1.05) saturate(1.3) hue-rotate(-10deg)
-      contrast(1.7);
-    --netzi-text-2: #d8dee6;
-    --netzi-text-3: #aab4bf;
-    --netzi-scrim: rgba(2, 5, 10, 0.45);
-  }
-}
-
-@media not print {
-  @media (prefers-reduced-transparency: reduce) {
-    [data-glass='on'] {
-      /* Quien pide menos transparencia recibe la superficie opaca de siempre. */
-      --netzi-float-bg: #ffffff;
-      --netzi-float-border: #eaedf0;
-      --netzi-float-border-2: #dce0e5;
-      --netzi-float-surface: #ffffff;
-      --netzi-float-surface-2: #f4f6f8;
-      --netzi-float-surface-3: #eef1f4;
-      --netzi-float-filter: none;
-      --netzi-float-glow: 0 0 rgba(0, 0, 0, 0);
-      --netzi-scrim-filter: none;
-    }
-
-    [data-glass='on'] :where([data-theme='light']:not([data-glass])) {
-      --netzi-float-bg: #ffffff;
-      --netzi-float-border-2: #dce0e5;
-      --netzi-float-border: #eaedf0;
-      --netzi-float-surface-2: #f4f6f8;
-      --netzi-float-surface-3: #eef1f4;
-      --netzi-float-surface: #ffffff;
-      --netzi-float-filter: none;
-      --netzi-float-glow: 0 0 rgba(0, 0, 0, 0);
-    }
-
-    [data-theme='dark'][data-glass='on'] {
-      --netzi-float-bg: #161b22;
-      --netzi-float-border: #21262d;
-      --netzi-float-border-2: #30363d;
-      --netzi-float-surface: #161b22;
-      --netzi-float-surface-2: #0d1117;
-      --netzi-float-surface-3: #21262d;
-    }
-  }
-}
-
-@media not print {
-  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-    [data-glass='on'] {
-      /* Sin backdrop-filter no hay desenfoque, y una capa translúcida sin desenfocar lo que hay
-         debajo es texto sobre ruido: se degrada a opaco entero. */
-      --netzi-float-bg: #ffffff;
-      --netzi-float-border: #eaedf0;
-      --netzi-float-border-2: #dce0e5;
-      --netzi-float-surface: #ffffff;
-      --netzi-float-surface-2: #f4f6f8;
-      --netzi-float-surface-3: #eef1f4;
-    }
-
-    [data-glass='on'] :where([data-theme='light']:not([data-glass])) {
-      --netzi-float-bg: #ffffff;
-      --netzi-float-border-2: #dce0e5;
-      --netzi-float-border: #eaedf0;
-      --netzi-float-surface-2: #f4f6f8;
-      --netzi-float-surface-3: #eef1f4;
-      --netzi-float-surface: #ffffff;
-    }
-
-    [data-theme='dark'][data-glass='on'] {
-      --netzi-float-bg: #161b22;
-      --netzi-float-border: #21262d;
-      --netzi-float-border-2: #30363d;
-      --netzi-float-surface: #161b22;
-      --netzi-float-surface-2: #0d1117;
-      --netzi-float-surface-3: #21262d;
-    }
+    --netzi-float-bg: #161b22;
+    --netzi-float-border: #21262d;
+    --netzi-float-border-2: #30363d;
+    --netzi-float-surface: #161b22;
+    --netzi-float-surface-2: #0d1117;
+    --netzi-float-surface-3: #21262d;
   }
 }
 
-/* Eje FONDO AMBIENTAL (data-ambient): manchas de color suaves debajo del contenido, con el
-   primario del preset y dos de marca, que le dan al cristal algo que desenfocar. Los
-   porcentajes son bajos a propósito: el texto se sigue leyendo encima (text-3 sobre la mancha
-   más fuerte, 4.4:1 en claro y 4.6:1 en oscuro). En alto contraste se apaga. */
-
-@media not print {
-  [data-ambient='on'] {
-    --netzi-ambient:
-      radial-gradient(
-        55% 45% at 8% 0%,
-        color-mix(in srgb, var(--netzi-primary) 16%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        45% 40% at 100% 100%,
-        color-mix(in srgb, var(--netzi-purple) 12%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        35% 30% at 70% 10%,
-        color-mix(in srgb, var(--netzi-green) 8%, transparent),
-        transparent 70%
-      );
-  }
-
-  [data-ambient='on'] :where([data-preset]:not([data-ambient])) {
-    --netzi-ambient:
-      radial-gradient(
-        55% 45% at 8% 0%,
-        color-mix(in srgb, var(--netzi-primary) 16%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        45% 40% at 100% 100%,
-        color-mix(in srgb, var(--netzi-purple) 12%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        35% 30% at 70% 10%,
-        color-mix(in srgb, var(--netzi-green) 8%, transparent),
-        transparent 70%
-      );
-  }
-
-  [data-ambient='on'] :where([data-theme='light']:not([data-ambient])) {
-    --netzi-ambient:
-      radial-gradient(
-        55% 45% at 8% 0%,
-        color-mix(in srgb, var(--netzi-primary) 16%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        45% 40% at 100% 100%,
-        color-mix(in srgb, var(--netzi-purple) 12%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        35% 30% at 70% 10%,
-        color-mix(in srgb, var(--netzi-green) 8%, transparent),
-        transparent 70%
-      );
-  }
-
-  [data-theme='dark'][data-ambient='on'] {
-    --netzi-ambient:
-      radial-gradient(
-        55% 45% at 8% 0%,
-        color-mix(in srgb, var(--netzi-primary) 22%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        45% 40% at 100% 100%,
-        color-mix(in srgb, var(--netzi-purple) 18%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        35% 30% at 70% 10%,
-        color-mix(in srgb, var(--netzi-green) 10%, transparent),
-        transparent 70%
-      );
-  }
-
-  [data-theme='dark'][data-ambient='on'] :where([data-preset]:not([data-theme], [data-ambient])) {
-    --netzi-ambient:
-      radial-gradient(
-        55% 45% at 8% 0%,
-        color-mix(in srgb, var(--netzi-primary) 22%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        45% 40% at 100% 100%,
-        color-mix(in srgb, var(--netzi-purple) 18%, transparent),
-        transparent 70%
-      ),
-      radial-gradient(
-        35% 30% at 70% 10%,
-        color-mix(in srgb, var(--netzi-green) 10%, transparent),
-        transparent 70%
-      );
-  }
-
-  [data-contrast='high'][data-ambient='on'] {
-    /* En alto contraste no hay manchas: el fondo vuelve a ser liso. */
-    --netzi-ambient: none;
-  }
-
-  [data-contrast='high'][data-ambient='on']
-    :where([data-preset]:not([data-contrast], [data-ambient])) {
-    --netzi-ambient: none;
-  }
-
-  [data-contrast='high'][data-ambient='on']
-    :where([data-theme='light']:not([data-contrast], [data-ambient])) {
-    --netzi-ambient: none;
+/* Sin `backdrop-filter` no hay desenfoque, y una capa translúcida sin desenfocar
+   lo que hay debajo es texto sobre ruido: se degrada a opaco entero. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  [data-glass='on'] {
+    --netzi-float-bg: #ffffff;
+    --netzi-float-border: #eaedf0;
+    --netzi-float-border-2: #dce0e5;
+    --netzi-float-surface: #ffffff;
+    --netzi-float-surface-2: #f4f6f8;
+    --netzi-float-surface-3: #eef1f4;
   }
-}
-
-@media not print {
-  @media (prefers-contrast: more) {
-    [data-ambient='on']:not([data-contrast]):where(:not([data-contrast] *)) {
-      /* Lo mismo cuando lo pide el sistema y nadie fija data-contrast. */
-      --netzi-ambient: none;
-    }
 
-    [data-ambient='on']:not([data-contrast]):where(:not([data-contrast] *))
-      :where([data-preset]:not([data-contrast], [data-ambient])) {
-      --netzi-ambient: none;
-    }
-
-    [data-ambient='on']:not([data-contrast]):where(:not([data-contrast] *))
-      :where([data-theme='light']:not([data-contrast], [data-ambient])) {
-      --netzi-ambient: none;
-    }
+  [data-theme='dark'][data-glass='on'] {
+    --netzi-float-bg: #161b22;
+    --netzi-float-border: #21262d;
+    --netzi-float-border-2: #30363d;
+    --netzi-float-surface: #161b22;
+    --netzi-float-surface-2: #0d1117;
+    --netzi-float-surface-3: #21262d;
   }
 }
 
-/* Eje DENSIDAD (data-density): controles, radios y espaciado más ajustados (los pasos finos no
-   cambian). La tipografía no se toca: se encoge el aire, no la letra. */
-
+/* ===========================================================
+   DENSIDAD compacta: controles y radios más ajustados
+   =========================================================== */
 [data-density='compact'] {
   --netzi-control-py: 8px;
   --netzi-control-px: 11px;
-  --netzi-control-px-sm: 10px;
-  --netzi-control-px-md: 11px;
-  --netzi-control-px-lg: 13px;
   --netzi-control-h-sm: calc(32px * var(--netzi-font-scale, 1));
   --netzi-control-h-md: calc(40px * var(--netzi-font-scale, 1));
   --netzi-control-h-lg: calc(46px * var(--netzi-font-scale, 1));
-  --netzi-radius: 6px;
+  --netzi-control-px-sm: 10px;
+  --netzi-control-px-md: 11px;
+  --netzi-control-px-lg: 13px;
   --netzi-radius-sm: 5px;
+  --netzi-radius: 6px;
   --netzi-radius-lg: 8px;
+  /* Espaciado más ajustado (pasos medios/grandes; los finos no cambian). */
   --netzi-space-4: 10px;
   --netzi-space-5: 12px;
   --netzi-space-6: 20px;
@@ -1350,77 +659,32 @@
   --netzi-space-8: 40px;
 }
 
-/* Entorno PUNTERO TÁCTIL (media pointer coarse): ningún control por debajo del objetivo táctil
-   (#100). Más 2 px porque el borde de 1 px del contenedor no le quita al campo que se toca;
-   cada densidad parte de su propia base, que con la letra más grande es la que manda. Va
-   después de la densidad para ganarle con la misma especificidad. */
-
-@media (pointer: coarse) {
-  :root {
-    --netzi-control-h-sm: max(
-      calc(var(--netzi-touch-target) + 2px),
-      calc(36px * var(--netzi-font-scale, 1))
-    );
-    --netzi-control-h-md: max(
-      calc(var(--netzi-touch-target) + 2px),
-      calc(44px * var(--netzi-font-scale, 1))
-    );
-  }
-
-  [data-density='compact'] {
-    --netzi-control-h-sm: max(
-      calc(var(--netzi-touch-target) + 2px),
-      calc(32px * var(--netzi-font-scale, 1))
-    );
-    --netzi-control-h-md: max(
-      calc(var(--netzi-touch-target) + 2px),
-      calc(40px * var(--netzi-font-scale, 1))
-    );
-  }
-}
-
-/* Entorno MOVIMIENTO REDUCIDO (media prefers-reduced-motion reduce, #151, WCAG 2.3.3): las
-   duraciones del desplazamiento se anulan aquí, en un solo sitio, y lo que se desplaza, gira o
-   escala salta a su estado final. Van a 0.01 ms y no a 0 para que transitionend y animationend
-   sigan llegando a quien los espera. Los fundidos (las duraciones sin move) no cambian: un
-   cambio de color u opacidad no es movimiento. */
-
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --netzi-duration-move-fast: 0.01ms;
-    --netzi-duration-move-base: 0.01ms;
-    --netzi-duration-move-slow: 0.01ms;
-  }
-}
-
-/* Entorno IMPRESIÓN (media print, #176): el papel es claro, opaco y quieto. El tema oscuro, el
-   cristal y el fondo ambiental vuelven a su valor por defecto (resets): cada bloque que los
-   fija va en el CSS dentro de @media not print, así que al imprimir no aplica y sale el claro y
-   opaco de siempre, con el preset, el contraste y la densidad intactos. En papel un fondo
-   oscuro gasta tinta y el navegador lo quita a medias, y un vidrio desenfoca lo que no se va a
-   ver. Las sombras desaparecen, porque en papel no despegan nada y salen como manchas grises;
-   el velo de las capas modales no desenfoca; y las duraciones bajan a 0.01 ms para que nada se
-   imprima a medio camino. */
-
-@media print {
-  :root,
-  [data-contrast='high'] {
-    --netzi-elevation-floating: 0 0 rgba(0, 0, 0, 0);
-    --netzi-elevation-raised: 0 0 rgba(0, 0, 0, 0);
-    --netzi-elevation-modal: 0 0 rgba(0, 0, 0, 0);
-    --netzi-scrim-filter: none;
-    --netzi-duration-instant: 0.01ms;
-    --netzi-duration-fast: 0.01ms;
-    --netzi-duration-base: 0.01ms;
-    --netzi-duration-slow: 0.01ms;
-    --netzi-duration-flash: 0.01ms;
-    --netzi-duration-loop-spin: 0.01ms;
-    --netzi-duration-loop-orbit: 0.01ms;
-    --netzi-duration-loop-pulse: 0.01ms;
-    --netzi-duration-loop-sweep: 0.01ms;
-    --netzi-duration-loop-shine: 0.01ms;
-    --netzi-duration-move-fast: 0.01ms;
-    --netzi-duration-move-base: 0.01ms;
-    --netzi-duration-move-slow: 0.01ms;
-  }
-}
+/* ===========================================================
+   TEXTO: para qué sirve cada nivel y cuánto contrasta
+
+   Ratios WCAG 2.1 medidos contra las cuatro superficies del tema (bg, surface,
+   surface-2 y surface-3); se anota el PEOR de los cuatro, que siempre es
+   surface-3. Los verifica `tokens-contrast.spec.ts` en @netzi/ui, así que si
+   alguien cambia un valor aquí y deja de cumplir, la suite se pone roja.
+
+   Mínimos que se aplican
+     texto normal      4.5:1   (SC 1.4.3)
+     no textual        3:1     (SC 1.4.11, iconos y bordes con significado)
+     deshabilitado     exento  (SC 1.4.3 no cubre componentes inactivos)
+
+   nivel    claro                oscuro               para qué
+   text     #1c252e  13.69       #ffffff  15.22       texto principal
+   text-2   #5c6b78   4.84       #8b949e   4.95       TODO texto secundario
+   text-3   #7a8996   3.17       #6e7681   3.31       NO textual, ver abajo
+
+   Con alto contraste
+   text-2   #45525e   7.07       #aab4bf   7.24
+   text-3   #5c6b78   4.84       #8b949e   4.95
+
+   `text-3` NO vale para texto legible. Es el tono de lo que acompaña: chevrons,
+   separadores, iconos decorativos, la barra de redimensionar, el brillo del
+   esqueleto de carga y los estados deshabilitados. Para un rótulo, una ayuda, un
+   pie, un metadato o un placeholder va SIEMPRE `text-2`. La regla existe porque
+   con 45 archivos usándolo indistintamente el kit entero se quedó por debajo del
+   mínimo sin que nadie lo notara.
+   =========================================================== */