/* sandy_ds 1.2.0 · tokens · huella 587f84333cc43791 */
/* GENERADO por sandy_ds/tokens.py — NO editar a mano.
   Regenerar:  python -m sandy_ds.tokens
   El servidor no lee este archivo: sirve generar_css() en memoria,
   así que el disco nunca puede desincronizarse de lo que ve el navegador. */

:root {
  /* ════ Capa 1 · PRIMITIVOS — rampa cruda (usos: sandy32 · on61) ════ */
  /* blanco */
  --blanco: #ffffff;                                       /* 281 · 277 — #fff y #ffffff sumados; superficie de tarjeta */
  /* gris */
  --gris-05: #fbfbfc;                                      /* 2 · 2 — fondo inferior de la tarjeta de ranking */
  --gris-10: #fbfcfd;                                      /* 7 · 4 */
  --gris-15: #fafbfc;                                      /* 2 · 6 — cebra de tabla */
  --gris-20: #f9fafb;                                      /* 2 · 2 */
  --gris-25: #f8f9fa;                                      /* 6 · 4 — fondo inferior de panel */
  --gris-30: #f7f8fa;                                      /* 6 · 10 — superficie suave */
  --gris-35: #f7f8f9;                                      /* 5 · 1 */
  --gris-40: #f6f7f8;                                      /* 6 · 9 — lienzo de la página */
  --gris-45: #f5f6f8;                                      /* 1 · 4 — --gray-soft del :root */
  --gris-47: #f5f6f7;                                      /* 3 · 0 */
  --gris-50: #f4f5f7;                                      /* 3 · 5 */
  --gris-55: #f3f4f6;                                      /* 7 · 6 */
  --gris-60: #f1f2f3;                                      /* 10 · 2 — cabecera de tabla, caja de segmentado */
  --gris-65: #f0f1f3;                                      /* 0 · 1 — --gray-soft-2 del :root */
  --gris-70: #eef0f3;                                      /* 6 · 2 — pista de la dona */
  --gris-72: #eef0f2;                                      /* 4 · 4 */
  --gris-75: #eceff2;                                      /* 17 · 21 — línea suave de tabla */
  --gris-80: #eceef1;                                      /* 3 · 5 — pista de barra de ranking */
  --gris-85: #eceeef;                                      /* 7 · 0 */
  --gris-90: #e7eaee;                                      /* 3 · 3 */
  --gris-100: #e5e7eb;                                     /* 8 · 9 — dona segmentada vacía */
  --gris-110: #e2e5e9;                                     /* 3 · 5 */
  --gris-115: #e1e4e7;                                     /* 1 · 1 — rejilla de gráfico de línea */
  --gris-116: #e1e3e6;                                     /* 2 · 0 — divisor de columna total */
  --gris-120: #dfe2e6;                                     /* 9 · 3 */
  --gris-130: #dde1e6;                                     /* 2 · 1 — --line del :root */
  --gris-140: #d9dde2;                                     /* 1 · 13 */
  --gris-150: #d5d8dc;                                     /* 25 · 10 — borde de control */
  --gris-160: #d1d5db;                                     /* 5 · 7 — dona segmentada sin datos */
  --gris-170: #cfd5dc;                                     /* 0 · 4 — --line-strong del :root */
  --gris-180: #cfd2d6;                                     /* 17 · 5 — --scroll-thumb; borde de tarjeta de tabla */
  --gris-200: #bfc2c6;                                     /* 7 · 0 — eje de barras */
  --gris-300: #9ca3af;                                     /* 7 · 8 */
  --gris-320: #9aa0a6;                                     /* 17 · 9 — texto tenue */
  --gris-350: #a0a0a1;                                     /* 1 · 0 — barra año anterior (arriba) */
  --gris-400: #8a9099;                                     /* 6 · 1 */
  --gris-410: #8b8f94;                                     /* 3 · 0 — área de línea semanal */
  --gris-412: #85898e;                                     /* 3 · 0 — punto de línea */
  --gris-415: #858586;                                     /* 1 · 0 — leyenda año anterior */
  --gris-420: #7c8085;                                     /* 10 · 0 */
  --gris-430: #7d8186;                                     /* 4 · 1 — línea de promedio */
  --gris-440: #7b7f84;                                     /* 6 · 0 — delta sin cambio */
  --gris-445: #777879;                                     /* 1 · 0 — barra año anterior (abajo) */
  --gris-500: #6b7280;                                     /* 35 · 21 — --muted: texto apagado */
  --gris-520: #6f7378;                                     /* 6 · 0 — trazo de línea semanal */
  --gris-550: #5f6368;                                     /* 11 · 4 — rótulo de la dona */
  --gris-560: #5d6066;                                     /* 6 · 9 — arriba del degradado oscuro */
  --gris-570: #5b5e63;                                     /* 3 · 0 */
  --gris-580: #55585d;                                     /* 7 · 0 */
  --gris-600: #4e4f54;                                     /* 15 · 7 — Cool Gray 11C (oficial Goldery) */
  --gris-610: #4c4f54;                                     /* 0 · 2 — --gray del :root */
  --gris-620: #45484c;                                     /* 5 · 0 */
  --gris-650: #404247;                                     /* 42 · 20 — --gray-dark: texto fuerte */
  --gris-660: #3f4247;                                     /* 6 · 0 */
  --gris-700: #34363a;                                     /* 8 · 0 */
  --gris-720: #33363b;                                     /* 6 · 1 */
  --gris-750: #2f3135;                                     /* 8 · 0 — rejilla dura de tabla de periodos */
  --gris-900: #111827;                                     /* 5 · 4 — --text: texto base */
  /* naranja */
  --naranja-25: #fffaf6;                                   /* 6 · 6 */
  --naranja-50: #fff8f3;                                   /* 10 · 17 — arriba de los degradados cálidos */
  --naranja-100: #fff4ed;                                  /* 25 · 16 — --orange-soft: resaltado suave */
  --naranja-110: #fff3e8;                                  /* 2 · 6 */
  --naranja-120: #fff2e6;                                  /* 1 · 2 — cabecera de tabla de vista */
  --naranja-150: #ffd0b1;                                  /* 5 · 10 — borde de badge naranja */
  --naranja-160: #f4d7c2;                                  /* 6 · 4 — borde de tarjeta de vista */
  --naranja-170: #f2ddcc;                                  /* 4 · 4 */
  --naranja-200: #f6c6a8;                                  /* 5 · 2 — --orange-line */
  --naranja-250: #f7bb90;                                  /* 8 · 0 — selección parcial */
  --naranja-300: #f2a06a;                                  /* 4 · 3 — marca de fila hija, scroll hover */
  --naranja-350: #ff9a4d;                                  /* 4 · 2 */
  --naranja-400: #ff8f47;                                  /* 5 · 9 — arriba del degradado claro */
  --naranja-420: #ff8a3c;                                  /* 9 · 2 */
  --naranja-450: #ff7d24;                                  /* 7 · 2 — arriba del degradado vivo */
  --naranja-500: #ff6400;                                  /* 32 · 9 — --orange del :root (más var(--orange)) */
  --naranja-550: #f16400;                                  /* 87 · 46 — Pantone 3556C oficial; el hex más usado */
  --naranja-600: #e25800;                                  /* 2 · 1 — --orange-dark (más var(--orange-dark)) */
  --naranja-650: #d95700;                                  /* 17 · 4 */
  --naranja-700: #c25200;                                  /* 40 · 36 — texto naranja sobre fondo suave */
  --naranja-750: #c05000;                                  /* 5 · 1 */
  --naranja-900: #9a3412;                                  /* 0 · 2 — texto de fila de totales */
  /* rojo */
  --rojo-50: #fdf1f0;                                      /* 6 · 2 — fondo de aviso de fallo */
  --rojo-100: #fbe6e3;                                     /* 2 · 2 */
  --rojo-110: #ffe9e7;                                     /* 0 · 1 — --red-soft */
  --rojo-120: #fee2e2;                                     /* 0 · 2 */
  --rojo-200: #f0b3ae;                                     /* 1 · 0 */
  --rojo-250: #e0aca6;                                     /* 3 · 0 — borde de botón de peligro */
  --rojo-500: #fa3b32;                                     /* 1 · 3 — --red del :root */
  --rojo-520: #ef3832;                                     /* 1 · 0 — rojo oficial Goldery; triángulo de baja */
  --rojo-600: #c0392b;                                     /* 24 · 11 — peligro: el rojo más usado */
  --rojo-650: #b91c1c;                                     /* 3 · 1 — delta negativo */
  --rojo-700: #9c2f28;                                     /* 0 · 12 — semáforo rojo (on61) */
  --rojo-750: #991b1b;                                     /* 0 · 2 */
  --rojo-800: #8f2c22;                                     /* 1 · 0 — texto de aviso de fallo */
  /* verde */
  --verde-50: #eaf7ee;                                     /* 4 · 1 */
  --verde-60: #dcfce7;                                     /* 0 · 1 — --green-soft */
  --verde-80: #d8f0e0;                                     /* 1 · 1 */
  --verde-300: #79c08a;                                    /* 2 · 1 */
  --verde-400: #5b9c72;                                    /* 10 · 1 — arriba del degradado de éxito */
  --verde-450: #65a30d;                                    /* 4 · 1 — triángulo de subida, punto de estado */
  --verde-500: #16a34a;                                    /* 1 · 3 — --green del :root */
  --verde-600: #1e7a3c;                                    /* 34 · 4 — éxito: el verde más usado */
  --verde-610: #1f7a3d;                                    /* 0 · 12 — semáforo verde (on61) */
  --verde-650: #3b6a4a;                                    /* 3 · 1 — texto del botón de exportar */
  --verde-700: #4d7c0f;                                    /* 2 · 0 — delta positivo */
  --verde-750: #166534;                                    /* 0 · 1 */
  --verde-760: #15803d;                                    /* 0 · 2 */
  /* azul */
  --azul-25: #f5f8ff;                                      /* 6 · 0 */
  --azul-50: #eef2fb;                                      /* 2 · 0 */
  --azul-60: #eaf4ff;                                      /* 0 · 2 */
  --azul-70: #e9edf5;                                      /* 2 · 0 — pista apagada del interruptor */
  --azul-100: #dbeafe;                                     /* 0 · 1 — --blue-soft */
  --azul-200: #c3cde6;                                     /* 7 · 0 */
  --azul-210: #cfd6e4;                                     /* 1 · 0 — borde apagado del interruptor */
  --azul-400: #5b79c9;                                     /* 4 · 0 — arriba del degradado info */
  --azul-450: #4a90c4;                                     /* 14 · 0 — serie secundaria (PEDIDO $) */
  --azul-550: #2e6fa3;                                     /* 3 · 0 */
  --azul-600: #2d4a97;                                     /* 23 · 1 — info: el azul más usado */
  --azul-620: #315f8f;                                     /* 0 · 4 */
  --azul-650: #1d4ed8;                                     /* 0 · 2 — --blue del :root */
  --azul-700: #233c7d;                                     /* 1 · 0 */
  /* morado */
  --morado-50: #f7f4fc;                                    /* 3 · 1 */
  --morado-150: #cdbfe6;                                   /* 1 · 0 */
  --morado-160: #d9d2e6;                                   /* 1 · 0 */
  --morado-400: #9b7cd4;                                   /* 2 · 1 — arriba del degradado de categoría */
  --morado-600: #6d4fae;                                   /* 15 · 8 — categoría especial (MOTIVOS) */
  --morado-800: #4b3b7a;                                   /* 1 · 0 */
  /* ambar */
  --ambar-50: #fffaf0;                                     /* 2 · 0 */
  --ambar-60: #fdf3e2;                                     /* 0 · 1 — fondo de semáforo ámbar */
  --ambar-200: #f0d191;                                    /* 1 · 0 */
  --ambar-300: #f0c169;                                    /* 0 · 2 */
  --ambar-400: #f0b429;                                    /* 1 · 0 */
  --ambar-600: #c9880f;                                    /* 0 · 3 */
  --ambar-700: #a8750d;                                    /* 1 · 0 — texto de badge de aviso */
  --ambar-750: #96650d;                                    /* 0 · 5 — semáforo ámbar (on61) */

  /* ════ Capa 2 · SEMÁNTICOS — el propósito, no el color ════ */
  --color-marca: var(--naranja-500);                       /* métrica principal, estado activo (--orange) */
  --color-marca-pantone: var(--naranja-550);               /* el mismo papel con el hex oficial; ver HALLAZGOS H-01 */
  --color-marca-oscuro: var(--naranja-600);                /* --orange-dark */
  --color-marca-medio: var(--naranja-650);
  --color-marca-texto: var(--naranja-700);                 /* texto naranja legible sobre fondo claro */
  --color-marca-suave: var(--naranja-100);                 /* resaltado suave (--orange-soft) */
  --color-marca-tenue: var(--naranja-50);
  --color-marca-borde: var(--naranja-150);
  --color-marca-linea: var(--naranja-200);                 /* --orange-line */
  --color-exito: var(--verde-600);                         /* cumplido, entregado, sobre el objetivo */
  --color-exito-vivo: var(--verde-400);
  --color-exito-suave: var(--verde-50);
  --color-alerta: var(--ambar-750);                        /* a medio camino; semáforo ámbar */
  --color-alerta-suave: var(--ambar-60);
  --color-peligro: var(--rojo-600);                        /* pendiente, incumplido, negativo */
  --color-peligro-suave: var(--rojo-50);
  --color-info: var(--azul-600);                           /* informativo, navegación secundaria */
  --color-info-claro: var(--azul-450);                     /* segunda serie de un gráfico */
  --color-info-suave: var(--azul-25);
  --color-categoria: var(--morado-600);                    /* categoría especial (MOTIVOS) */
  --color-categoria-suave: var(--morado-50);
  --texto: var(--gris-900);                                /* texto base (--text) */
  --texto-fuerte: var(--gris-650);                         /* títulos, cifras (--gray-dark) */
  --texto-medio: var(--gris-610);                          /* etiquetas de panel (--gray) */
  --texto-apagado: var(--gris-500);                        /* etiquetas secundarias (--muted) */
  --texto-tenue: var(--gris-320);                          /* índices, notas, placeholders */
  --texto-invertido: var(--blanco);                        /* sobre degradado oscuro o de marca */
  --linea: var(--gris-130);                                /* hairline de tarjeta (--line) */
  --linea-suave: var(--gris-75);                           /* separador interno */
  --linea-control: var(--gris-150);                        /* borde de control */
  --linea-fuerte: var(--gris-170);                         /* borde de campo (--line-strong) */
  --lienzo: var(--gris-40);                                /* fondo de la página */
  --superficie: var(--blanco);                             /* tarjetas */
  --superficie-suave: var(--gris-30);                      /* filas pendientes, chips */
  --superficie-hundida: var(--gris-60);                    /* cabeceras de tabla, cajas de segmentado */
  --superficie-resaltada: var(--naranja-100);              /* resaltado naranja suave */
  --grad-marca: linear-gradient(180deg,var(--naranja-500) 0%,var(--naranja-600) 100%); /* botón primario (on61 ×7 como var(--orange)→var(--orange-dark)) */
  --grad-marca-claro: linear-gradient(180deg,var(--naranja-400) 0%,var(--naranja-500) 100%); /* interruptor encendido, badge de modo (×9) */
  --grad-marca-vivo: linear-gradient(180deg,var(--naranja-450) 0%,var(--naranja-550) 100%); /* botones de acción de sandy32 (×9) */
  --grad-marca-hover: linear-gradient(180deg,var(--naranja-550) 0%,var(--naranja-650) 100%); /* (×3) */
  --grad-oscuro: linear-gradient(180deg,var(--gris-560) 0%,var(--gris-650) 100%); /* título píldora, botón oscuro (×9) */
  --grad-exito: linear-gradient(180deg,var(--verde-400) 0%,var(--verde-600) 100%); /* (×7) */
  --grad-info: linear-gradient(180deg,var(--azul-400) 0%,var(--azul-600) 100%); /* (×3) */
  --grad-categoria: linear-gradient(180deg,var(--morado-400) 0%,var(--morado-600) 100%); /* (×2) */
  --grad-neutro: linear-gradient(180deg,#8b9098 0%,var(--gris-550) 100%); /* interruptor neutro encendido (sandy32:10341) */
  --grad-resaltado: linear-gradient(180deg,var(--naranja-50) 0%,var(--blanco) 100%); /* (×8) */
  --grad-info-suave: linear-gradient(180deg,var(--azul-25) 0%,var(--blanco) 100%); /* (×3) */
  --grad-panel: linear-gradient(180deg,var(--blanco) 0%,var(--gris-25) 100%); /* panel base */
  --grad-tarjeta: linear-gradient(180deg,var(--blanco) 0%,var(--gris-05) 100%); /* tarjeta de ranking (sandy32:6930) */
  --grad-control: linear-gradient(180deg,var(--blanco) 0%,var(--gris-40) 100%); /* badge neutro */
  --grad-indicador: linear-gradient(135deg,var(--naranja-50) 0%,var(--blanco) 58%,var(--gris-30) 100%); /* fondo del bloque del indicador (×3) */

  /* ════ ESCALAS ════ */
  /* espacio */
  --esp-3xs: 3px;                                          /* gap 3px ×20 */
  --esp-2xs: 4px;                                          /* gap 4px ×15 */
  --esp-xs: 6px;                                           /* gap 6px ×33 */
  --esp-s: 8px;                                            /* gap 8px ×48 (el más usado) */
  --esp-m: 10px;                                           /* gap 10px ×40 */
  --esp-l: 12px;                                           /* gap 12px ×23 */
  --esp-xl: 14px;                                          /* gap 14px ×21 */
  --esp-2xl: 18px;                                         /* padding de panel 18px; margin-bottom 18px */
  --esp-3xl: 26px;                                         /* padding del body (onfillrate3:290) */
  /* lienzo */
  --page-max: 1780px;                                      /* on61:800 :root */
  --page-gutter: clamp(16px,2vw,30px);                     /* on61:800 :root */
  --pagina-relleno: 26px;                                  /* body padding (onfillrate3:290) */
  --pagina-relleno-movil: 16px;                            /* body padding ≤900px */
  /* radio */
  --radio-pildora: 999px;                                  /* ×128, el más usado */
  --radio-panel: 20px;                                     /* .card/.panel base (onfillrate3:345) */
  --radio-tarjeta: 18px;                                   /* tarjeta grande (sandy32:6930) */
  --radio-bloque: 16px;                                    /* tarjeta de tabla, banda de fechas */
  --radio-caja: 14px;                                      /* tarjeta de periodo, campo grande */
  --radio-caja-chica: 12px;                                /* tarjeta interior, formulario de filtro */
  --radio-control-grande: 11px;                            /* caja de tooltip, sugerencias */
  --radio-control: 10px;                                   /* botón exportar */
  --radio-control-chico: 9px;                              /* botón compacto, posición de ranking (×33) */
  --radio-boton: 8px;                                      /* botón chico, buscador de tabla */
  --radio-chip: 7px;                                       /* botón de acción, paginación */
  --radio-celda: 6px;                                      /* tab, select pequeño */
  --radio-mini: 5px;                                       /* toggle de fila */
  --radio-micro: 4px;                                      /* celda de mapa de calor */
  --radio-circulo: 50%;                                    /* thumb, FAB, punto de leyenda */
  --radio-tope-barra: 3px 3px 0 0;                         /* barra vertical (sandy32:2600) */
  --radio-pestana: 9px 9px 0 0;                            /* pestaña de carpeta (sandy32:9157) */
  /* sombra */
  --sombra-flotante: 0 2px 10px rgba(31,41,55,.10);        /* interruptor flotante (sandy32:5756) */
  --sombra-hover: 0 6px 14px rgba(64,66,71,.08);           /* fila de ranking al pasar (sandy32:7074) */
  --sombra-tarjeta: 0 8px 22px rgba(64,66,71,.06);         /* tarjeta de ranking (sandy32:6930) */
  --sombra-titulo: 0 14px 30px rgba(64,66,71,.20);         /* título píldora (sandy32:3426) */
  --sombra-panel: 0 14px 34px rgba(76,79,84,.08);          /* --shadow del :root */
  --sombra-plana: 0 5px 16px rgba(64,66,71,.05);           /* tarjeta de tabla y de periodo */
  --sombra-control: 0 3px 10px rgba(64,66,71,.16);         /* pestaña del título, botón de nav */
  --sombra-fab: 0 4px 12px rgba(64,66,71,.16);             /* FAB (sandy32:10770) */
  --sombra-tooltip: 0 14px 35px rgba(31,41,55,.20);        /* tooltip (sandy32:2684) */
  --sombra-popover: 0 12px 30px rgba(31,41,55,.18);        /* popover (sandy32:6117) */
  --sombra-lista: 0 14px 30px rgba(35,40,47,.15);          /* sugerencias (sandy32:7663) */
  --sombra-modal: 0 24px 60px rgba(31,41,55,.32);          /* modal (sandy32:9707) */
  /* anillo */
  --anillo-foco: 0 0 0 3px rgba(255,100,0,.20);            /* foco universal (on61:899) */
  --anillo-marca: 0 0 0 3px rgba(241,100,0,.20);           /* ×10; foco naranja */
  --anillo-marca-2: 0 0 0 3px rgba(240,99,0,.20);          /* variante de exportar/FAB (×3) */
  --anillo-exito: 0 0 0 3px rgba(30,122,60,.20);           /* ×5 */
  --anillo-info: 0 0 0 3px rgba(45,74,151,.20);            /* ×3 */
  --anillo-categoria: 0 0 0 3px rgba(109,79,174,.16);      /* ×5 */
  --anillo-neutro: 0 0 0 3px rgba(95,99,104,.22);          /* interruptor neutro (sandy32:10348) */
  --anillo-campo: 0 0 0 3px rgba(255,100,0,.10);           /* campo compacto (sandy32:6418) */
  --anillo-campo-grande: 0 0 0 4px rgba(255,100,0,.08);    /* campo grande (onfillrate3:1053) */
  --anillo-busqueda: 0 0 0 3px rgba(255,100,0,.14);        /* buscador de tabla (sandy32:8363) */
  /* borde-interno */
  --borde-interno-marca: inset 0 0 0 1px rgba(255,100,0,.10); /* tab activa (sandy32:3244) */
  --borde-interno-info: inset 0 0 0 1px rgba(74,144,196,.12); /* tab activa info (sandy32:3248) */
  --borde-interno-linea: inset 0 0 0 1px var(--linea);     /* agujero de dona CSS */
  /* movimiento */
  --ease: cubic-bezier(.22,.61,.36,1);                     /* curva canónica, 76 usos (on61) */
  --ease-trazo: cubic-bezier(.4,0,.15,1);                  /* trazado de línea (sandy32:3194) */
  --dur-micro: .12s;                                       /* micro-interacción */
  --dur-estado: .15s;                                      /* cambio de estado */
  --dur-estado-lento: .16s;                                /* cambio de estado (colapsable con .15s) */
  --dur-transformar: .18s;                                 /* transformación (thumb, chevron) */
  --dur-panel: .2s;                                        /* interruptor clásico, formulario */
  --dur-dock: .28s;                                        /* título anclado */
  --dur-trazo: 1.35s;                                      /* trazado progresivo de la línea */
  /* capa */
  --capa-contenido: 1;                                     /* contenido elevado (×19) */
  --capa-tabla-cab: 2;                                     /* cabecera sticky de tabla */
  --capa-columna-fija: 4;                                  /* columna congelada */
  --capa-esquina: 6;                                       /* esquina de tabla con columna congelada */
  --capa-cabecera: 900;                                    /* título anclado (sandy32:3410) */
  --capa-fab: 950;                                         /* FAB: sobre el contenido, bajo los tooltips (sandy32:10770) */
  --capa-flotante: 960;                                    /* interruptores flotantes (sandy32:5756) */
  --capa-popover: 1200;                                    /* caja de simulación (sandy32:9998) */
  --capa-popover-alto: 1300;                               /* editor de motivos (sandy32:6117) */
  --capa-sugerencias: 1400;                                /* autocompletado (sandy32:7663) */
  --capa-tooltip: 5000;                                    /* tooltip de gráfico (sandy32:2684) */
  --capa-tooltip-alto: 5100;                               /* tooltip semanal (sandy32:2987) */
  --capa-modal: 6000;                                      /* modal (sandy32:9695); queda SOBRE los tooltips */
  --capa-progreso: 99999;                                  /* barra de navegación (on61:7968) */
  /* fuente */
  --fuente: "Segoe UI", Arial, sans-serif;                 /* stack único (onfillrate3:290); ver HALLAZGOS H-05 */
  --fuente-mono: Consolas, "Courier New", monospace;       /* on61:23417 */
  --fuente-control: var(--fuente);                         /* botones y campos: la misma que el texto (HALLAZGOS H-05) */
  --fuente-legado: 'Inter', sans-serif;                    /* shorthand font: de sandy32 (Inter no está cargada → sans-serif) */
  /* tamano */
  --txt-micro: 8px;                                        /* ×22 */
  --txt-mini: 8.5px;                                       /* ×23 */
  --txt-2xs: 9px;                                          /* ×42 */
  --txt-xs: 9.5px;                                         /* ×40 */
  --txt-s: 10px;                                           /* ×65, el más usado */
  --txt-s2: 10.5px;                                        /* ×16 */
  --txt-m: 11px;                                           /* ×57 */
  --txt-m2: 11.5px;                                        /* ×9 */
  --txt-base: 12px;                                        /* ×56 */
  --txt-l: 13px;                                           /* ×42 */
  --txt-l2: 14px;                                          /* ×16 */
  --txt-xl: 15px;                                          /* ×10 */
  --txt-xl2: 16px;                                         /* ×7 */
  --txt-2xl: 17px;                                         /* ×4 */
  --txt-3xl: 18px;                                         /* ×4 */
  --txt-titulo: 22px;                                      /* título de sección */
  --txt-kpi: 24px;                                         /* cifra de dona */
  --txt-hero: 30px;                                        /* título de página (×6) */
  /* peso */
  --peso-regular: 400;                                     /* ×1 */
  --peso-medio: 500;                                       /* ×2 */
  --peso-semi: 600;                                        /* ×9 */
  --peso-fuerte: 700;                                      /* ×28 */
  --peso-extra: 800;                                       /* ×69 */
  --peso-negro: 900;                                       /* ×95 */
  --peso-maximo: 1000;                                     /* ×215, el más usado; Segoe UI lo pinta como 900 (HALLAZGOS H-06) */
  /* tracking */
  --trk-negativo: -.01em;
  --trk-2xs: .02em;                                        /* 13px */
  --trk-xs: .04em;                                         /* 12px (×32) */
  --trk-s: .05em;                                          /* 11px (×26) */
  --trk-m: .06em;                                          /* 10.5px (×31) */
  --trk-l: .08em;                                          /* 10px (×34) */
  --trk-xl: .1em;                                          /* 9.5px (×18) */
  --trk-2xl: .12em;                                        /* 9px (×22) */
  --trk-3xl: .14em;                                        /* 8.5px (×9) */
  --trk-4xl: .16em;                                        /* 8px (×6) */
  /* interlineado */
  --lh-1: 1;                                               /* ×37 */
  --lh-ajustado: 1.05;                                     /* ×9 */
  --lh-compacto: 1.15;                                     /* ×7 */
  --lh-titulo: 1.25;                                       /* ×6 */
  --lh-cuerpo: 1.45;                                       /* ×7 */
  /* pares tamaño ↔ tracking de etiquetas en mayúsculas */
  --par-micro-tam: 8px;                                    /* sandy-comex-sup, sandy-ranking-sufijo */
  --par-micro-trk: .16em;
  --par-mini-tam: 8.5px;                                   /* sandy-cd-limpiar, sandy-sub-boton (.11em) */
  --par-mini-trk: .14em;
  --par-diminuta-tam: 9px;                                 /* sandy-chip-dato-label, sandy-mode-badge */
  --par-diminuta-trk: .12em;
  --par-chica-tam: 9.5px;                                  /* sandy-buscador-label, sandy-coredemo-aviso */
  --par-chica-trk: .1em;
  --par-base-tam: 10px;                                    /* sandy-carpeta-tab, fillrate-metric-label */
  --par-base-trk: .08em;
  --par-media-tam: 10.5px;                                 /* zone-btn, sandy-tabla-busca-input */
  --par-media-trk: .06em;
  --par-grande-tam: 12px;                                  /* summary-subtitle, field label */
  --par-grande-trk: .04em;

  /* ════ Capa 3 · COMPONENTE ════ */
  --dona-pista: var(--gris-70);                            /* sandy32:728 */
  --dona-arco: var(--color-marca);                         /* sandy32:729 */
  --dona-texto: var(--gris-650);                           /* sandy32:733 */
  --dona-rotulo: var(--gris-550);                          /* sandy32:734 */
  --dona-vacia: var(--gris-100);                           /* conic sin datos (sandy32:5991) */
  --dona-sin-datos: var(--gris-160);                       /* conic base (sandy32:5981) */
  --barra-anterior: linear-gradient(180deg,var(--gris-350) 0%,var(--gris-445) 100%); /* sandy32:2615 */
  --barra-actual: linear-gradient(180deg,#ff812f 0%,var(--naranja-550) 100%); /* sandy32:2618 */
  --barra-guia: rgba(78,79,83,.055);                       /* sandy32:2586 */
  --barra-eje: var(--gris-200);                            /* sandy32:2586 */
  --barra-sube: var(--verde-450);                          /* sandy32:2523 */
  --barra-baja: var(--rojo-520);                           /* sandy32:2528 */
  --barra-igual: var(--gris-410);                          /* sandy32:2533 */
  --delta-sube: var(--verde-700);                          /* sandy32:2644 */
  --delta-baja: var(--rojo-650);                           /* sandy32:2645 */
  --delta-igual: var(--gris-440);                          /* sandy32:2646 */
  --progreso-pista: var(--gris-80);                        /* sandy32:7120 */
  --progreso-positivo: linear-gradient(90deg,#ff9b5c 0%,var(--naranja-500) 100%); /* sandy32:7133 */
  --progreso-negativo: linear-gradient(90deg,var(--naranja-350) 0%,var(--naranja-550) 100%); /* sandy32:7136 */
  --progreso-info: linear-gradient(90deg,var(--azul-400) 0%,var(--azul-600) 100%); /* sandy32:7197 */
  --progreso-exito: linear-gradient(90deg,#5cbb7f 0%,var(--verde-610) 100%); /* on61:4943 */
  --progreso-alerta: linear-gradient(90deg,var(--ambar-300) 0%,var(--ambar-600) 100%); /* on61:4944 */
  --progreso-peligro: linear-gradient(90deg,#e88e86 0%,var(--rojo-600) 100%); /* on61:4945 */
  --progreso-bueno: linear-gradient(90deg,#ffc29c 0%,var(--naranja-500) 100%); /* onfillrate3:1783 */
  --linea-trazo: var(--gris-520);                          /* sandy32:2853 */
  --linea-punto: var(--gris-412);                          /* sandy32:2870 */
  --linea-promedio: var(--gris-430);                       /* sandy32:2831 */
  --linea-rejilla: var(--gris-115);                        /* sandy32:2822 */
  --linea-rejilla-texto: #8a8e93;                          /* sandy32:2826 (valor único) */
  --linea-valor: var(--gris-620);                          /* sandy32:2891 */
  --linea-area: var(--gris-410);                           /* sandy32:1750 */
  --fila-cubierta: var(--color-exito);                     /* sandy32:10207 */
  --fila-sin-cubrir: var(--color-peligro);                 /* sandy32:10211 */
  --fila-proyectada: var(--naranja-700);                   /* on61:7602 */
  --fila-par: var(--gris-15);                              /* sandy32:8427 */
  --fila-hover: var(--naranja-100);                        /* sandy32:8428 */
  --tabla-cab: var(--gris-60);                             /* sandy32:8407 */
  --tabla-cab-texto: var(--gris-600);                      /* sandy32:8407 */
  --tabla-borde: var(--gris-180);                          /* sandy32:8286 */
  --tabla-linea: var(--gris-75);                           /* sandy32:8421 */
  --tabla-celda: var(--gris-650);                          /* sandy32:8421 */
  --switch-pista: var(--azul-70);                          /* sandy32:9381 */
  --switch-pista-borde: var(--azul-210);                   /* sandy32:9381 */
  --switch-thumb-sombra: 0 1px 3px rgba(45,74,151,.35);    /* sandy32:9392 */
  --scroll-thumb: var(--gris-180);                         /* on61:800 :root */
  --scroll-thumb-hover: var(--naranja-300);                /* on61:891 */
  --serie-1: #f16400;                                      /* sandy32:11259 */
  --serie-2: #2563eb;
  --serie-3: #16a34a;
  --serie-4: #7c3aed;
  --serie-5: #d97706;
  --serie-6: #0891b2;
  --serie-7: #dc2626;
  --serie-8: #4f46e5;
  --serie-9: #65a30d;
  --serie-10: #9333ea;
  --serie-11: #0f766e;
  --serie-12: #c2410c;
  --serie-sin-dato: #9ca3af;                               /* GRIS de «no analizado» (sandy32:11262) */
  --gestion-lienzo: var(--gris-45);                        /* --bg · focos1:909 */
  --gestion-tinta: var(--gris-900);                        /* color del body · focos1:913 */
  --gestion-texto: var(--gris-650);                        /* --gray-dark · focos1:903 */
  --gestion-texto-suave: var(--gris-550);                  /* --gray · focos1:904 */
  --gestion-linea: #e9ebee;                                /* --line · focos1:905 (solo en gestión) */
  --gestion-linea-fuerte: #dcdfe3;                         /* --line-strong · focos1:906 (solo en gestión) */
  --gestion-marca-linea: #ffd8be;                          /* --orange-line · focos1:902 (solo en gestión) */
  --gestion-sombra: 0 10px 30px rgba(64,66,71,.10);        /* --shadow · focos1:910 */
  --gestion-hundido: #f2f3f5;                              /* fondo de la barra de pestañas · focos1:1042 */
  --gestion-pista: var(--gris-70);                         /* pista de barra · focos1:1266 */
  --gestion-ficha: #f1f2f4;                                /* ficha neutra: posición y etiqueta · focos1:1260, 1367 */
  --gestion-campo-suave: #f6f7f9;                          /* campo en reposo: nota y adjuntar · focos1:1381, 1390 */
  --gestion-peligro-lavado: #fef2f2;                       /* fondo rojo lavado · focos1:1145, 1204 */
  --gestion-exito: var(--verde-500);                       /* --ok · focos1:907 */
  --gestion-exito-suave: var(--verde-60);                  /* --ok-soft · focos1:908 */
  --gestion-exito-texto: var(--verde-760);                 /* texto verde · focos1:1377 */
  --gestion-peligro: #dc2626;                              /* --bad · cafecito1:426 */
  --gestion-peligro-suave: var(--rojo-120);                /* --bad-soft · cafecito1:427 */
  --gestion-peligro-texto: var(--rojo-650);                /* texto rojo · cafecito1:617 */
  --gestion-grad-exito: linear-gradient(180deg,#22c55e 0%,var(--verde-760) 100%); /* botón Excel · focos1:1035 */
  --eje-1: var(--naranja-500);                             /* focos1:1663 */
  --eje-2: var(--serie-2);                                 /* focos1:1663 */
  --eje-3: var(--serie-4);                                 /* focos1:1663 */
  --eje-4: #0d9488;                                        /* focos1:1663 (solo en gestión) */
  --eje-5: var(--serie-5);                                 /* focos1:1663 */
  --eje-6: #db2777;                                        /* focos1:1663 (solo en gestión) */
  --eje-sin: var(--gris-650);                              /* eje desconocido · colorEje() focos1:1664 */

  /* ════ COMPATIBILIDAD — nombres del :root canónico (on61:800). No usar en código nuevo. ════ */
  --orange: var(--naranja-500);
  --orange-dark: var(--naranja-600);
  --orange-soft: var(--naranja-100);
  --orange-line: var(--naranja-200);
  --red: var(--rojo-500);
  --red-soft: var(--rojo-110);
  --green: var(--verde-500);
  --green-soft: var(--verde-60);
  --blue: var(--azul-650);
  --blue-soft: var(--azul-100);
  --gray: var(--gris-610);
  --gray-dark: var(--gris-650);
  --gray-soft: var(--gris-45);
  --gray-soft-2: var(--gris-65);
  --text: var(--gris-900);
  --muted: var(--gris-500);
  --line-strong: var(--gris-170);
  --shadow: var(--sombra-panel);
}

/* Breakpoints (documentación: las media queries no aceptan var()).
   --bp-pantalla-ancha: 1500px — la tabla mensual pasa a scroll horizontal
   --bp-escritorio: 1360px — el ranking de producto oculta PARTICIPACIÓN
   --bp-escritorio-compacto: 1280px — columnas del ranking más estrechas; tablero a 1 columna (base)
   --bp-portatil: 1180px — el tablero de rankings pasa a 1 columna
   --bp-tableta-horizontal: 980px — indicador y métricas a 1 columna
   --bp-tableta: 900px — cabeceras de tarjeta en columna; body 16px
   --bp-tableta-vertical: 768px — FAB más pequeño; título anclado a 6px
   --bp-movil-grande: 720px — (on61) paneles de búsqueda a 2 columnas
   --bp-movil: 620px — ranking compacto; tablas a scroll
*/