@netzi/tokens 0.1.0-beta.10

package/styles/tokens.css

@@ -0,0 +1,1426 @@
+/* ===========================================================
+   @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-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
+
+   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). */
+  --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). */
+  --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. */
+  --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-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. */
+  --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). */
+  --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. */
+  --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. */
+  --netzi-bg: #f7f9fb;
+  /* 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. */
+  --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. */
+  --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. */
+  --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. */
+  --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. */
+  --netzi-control-py: 12px;
+  --netzi-control-px: 14px;
+  --netzi-control-px-sm: 12px;
+  --netzi-control-px-md: 14px;
+  --netzi-control-px-lg: 16px;
+  --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-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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+/* 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. 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);
+  }
+
+  [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);
+  }
+}
+
+/* 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. */
+
+[data-preset='green'] {
+  --netzi-primary: #0ae972;
+  --netzi-primary-dark: #079b4e;
+  --netzi-primary-hover: #07a352;
+  --netzi-primary-pressed: #25ae67;
+  --netzi-primary-text: #05793b;
+  --netzi-primary-graphic: #06984a;
+  --netzi-on-primary: #04121f;
+}
+
+@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;
+  }
+}
+
+[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;
+}
+
+@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-hover: #c97e0a;
+  --netzi-primary-pressed: #cf8d27;
+  --netzi-primary-text: #8e5e13;
+  --netzi-primary-graphic: #b47718;
+  --netzi-on-primary: #04121f;
+}
+
+@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;
+}
+
+@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;
+}
+
+@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;
+  }
+}
+
+/* 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. */
+
+[data-contrast='high'] {
+  --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);
+}
+
+@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);
+  }
+}
+
+@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);
+  }
+}
+
+@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);
+    }
+  }
+}
+
+@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;
+  }
+}
+
+@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;
+    }
+  }
+}
+
+/* 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. */
+
+@media not print {
+  [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;
+  }
+
+  [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;
+    }
+  }
+}
+
+/* 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;
+  }
+}
+
+@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;
+    }
+  }
+}
+
+/* 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. */
+
+[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-radius-sm: 5px;
+  --netzi-radius-lg: 8px;
+  --netzi-space-4: 10px;
+  --netzi-space-5: 12px;
+  --netzi-space-6: 20px;
+  --netzi-space-7: 28px;
+  --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;
+  }
+}