/* Copiado de wsc-marca/src/estilos/valores.css (4f300a7 2026-10-14) por web/traer-sistema.py. No se edita aquí: se cambia en el sistema y se vuelve a traer. Rutas de las fuentes: ../recursos/fuentes/. */
/* ==========================================================================
   Sistema de marca WSC · VALORES DE DISEÑO: el único fichero de valores
   Color (primitivas y roles en claro y en oscuro), contextos (islas y bandas), letra, retícula,
   espacio, forma, movimiento, botón principal y las medidas de la carcasa. Todo el resto del CSS
   usa estos nombres; ningún otro fichero declara un color, un tamaño de letra ni un tiempo.
   Sale del sistema actual (~/Developer/wsc-sistema/css, 02/10/2026) copiado línea a línea, sin
   valores nuevos. Cambios respecto al original:
     · las fuentes se sirven desde el propio sitio (src/assets/fuentes/, rutas relativas: Astro les
       pone la base /marca/ y la huella); Fragment Mono también, como hace hoy el sitio cifrado;
     · lo repetido en color.css y secundarios.css va una vez;
     · bloque 12: los pocos colores que el CSS de hoy pedía por primitiva (la guía de la retícula, el
       icono del cuentagotas, la banda que cambia) pasan a tener nombre de rol.
   TEMA. Claro en :root; oscuro si el dispositivo lo pide y no se ha fijado claro
   (@media + :root:not([data-theme="light"])), y oscuro con :root[data-theme="dark"]. El atributo lo
   pone el guion de <head> (layouts/Base.astro) con la clave de hoy: localStorage «wsc-tema».
   TRAMOS Y LETRA FLUIDA. Las columnas, el medianil, el margen y los siete pasos fluidos NO son
   constantes: se vuelven a declarar en body (la ventana) y en los hijos de .lienzo (la página), cada
   uno con su --cq (1 % del ancho de su caja). Así el h1 mide lo mismo que hoy: 47,89 px a 1440 con
   el menú fijo (la página mide 1184). No lo simplifiques a un :root solo (bloques 6 y 7).
   Orden de bloques: 0 registro · 1 letra (@font-face) · 2 primitivas de color · 3 roles en
   claro · 4 roles en oscuro · 5 contextos (islas y bandas) · 6 escala de letra · 7 retícula y
   espacio · 8 forma y trazo · 9 movimiento · 10 botón principal · 11 carcasa · 12 piezas.
   ========================================================================== */

/* ==== 0. Propiedades registradas · origen: css/reticula.css l. 14–21 ==== */
/* La colocación no se hereda: una retícula anidada no arrastra la del padre */
@property --s { syntax: "*"; inherits: false; }
@property --m { syntax: "*"; inherits: false; }
@property --l { syntax: "*"; inherits: false; }
/* 1 % del ancho de la página: en body, la ventana sin la barra (lo de fuera del contenido); en
   cada página (lienzo, guía, .pagina-propia), su ancho. Registrada: se resuelve donde se declara
   y ningún contenedor interior la cambia. La escala fluida (tipo y espacio) se escribe con ella */
@property --cq { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* ==== 1. Letra: @font-face · origen: css/tipo.css l. 7–38 ====
   Ficheros: src/assets/fuentes/ (copiados de ~/Developer/wsc-propuestas-kit/fuentes, los mismos que
   wsc-sistema/fonts). Licencia web de la Haas (W06): la del sitio de hoy. */
@font-face {
  font-family: "Haas";
  src: url("../recursos/fuentes/Neue-Haas-Unica-W06-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Haas";
  src: url("../recursos/fuentes/Neue-Haas-Unica-W06-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Haas";
  src: url("../recursos/fuentes/Neue-Haas-Unica-W06-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Respaldo con las métricas de la Haas: si la fuente tarda, el texto no salta
   al cambiar (CLS ≈ 0). Arial ajustada, medida sobre 98 párrafos a 32 em. */
@font-face {
  font-family: "Haas respaldo";
  src: local("Arial"), local("ArialMT");
  size-adjust: 98.77%;
  ascent-override: 118.05%;
  descent-override: 34.42%;
  line-gap-override: 0%;
}
/* Fragment Mono (OFL, src/assets/fuentes/FragmentMono-OFL.txt) · origen: wsc-equipo/herramientas/equipo.py
   (MONO_CSS), que ya la sirve así en el sitio cifrado: dos ficheros con su unicode-range. Nada de Google Fonts */
@font-face { font-family: "Fragment Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../recursos/fuentes/FragmentMono-Regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fragment Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../recursos/fuentes/FragmentMono-Regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==== 2. Color · primitivas (iguales en los dos temas) ====
   Origen: css/secundarios.css l. 7–115 (generado por paleta/final/generar.py; las cifras son
   contraste WCAG sobre blanco / capa clara / tinta / capa oscura) + css/color.css l. 11 (--neutro-0)
   y l. 45–47 (--naranja, --rojo). Los nueve de marca (descargas/wsc-colores.json): Verde verde-700,
   Blanco neutro-0, Niebla neutro-100, Salvia neutro-400, Pizarra neutro-800, Tinta neutro-950,
   Piedra piedra-100, Basalto piedra-900 y Menta. */
:root {
  /* color.css l. 11 */
  --neutro-0:   #FFFFFF;  /* marca · Blanco */
  /* Verde · fijo, ESPEC §3.2 · contraste sobre blanco / capa #EDF4F3 / #1A1A1A / capa oscura #242D2D */
  --verde-50: #F0FBF8; /* 1,06 / 1,05 / 16,46 / 13,34 */
  --verde-100: #E7F3F0; /* 1,14 / 1,02 / 15,31 / 12,41 */
  --verde-200: #D6EBE6; /* 1,24 / 1,12 / 13,99 / 11,35 */
  --verde-300: #9AC9BE; /* 1,83 / 1,64 / 9,51 / 7,71 */
  --verde-400: #61AA9A; /* 2,72 / 2,44 / 6,40 / 5,19 */
  --verde-500: #008A75; /* 4,29 / 3,85 / 4,05 / 3,29 */
  --verde-600: #076B5F; /* 6,41 / 5,75 / 2,72 / 2,20 */
  --verde-700: #0C4F48; /* 9,43 / 8,46 / 1,85 / 1,50 */
  --verde-800: #0A413B; /* 11,46 / 10,28 / 1,52 / 1,23 */
  --verde-900: #07312D; /* 14,13 / 12,67 / 1,23 / 1,00 */
  --verde-950: #04221F; /* 16,75 / 15,02 / 1,04 / 1,19 */
  /* Neutro · fijo, ESPEC §3.1 · contraste sobre blanco / capa #EDF4F3 / #1A1A1A / capa oscura #242D2D */
  --neutro-50: #F4F7F6; /* 1,08 / 1,03 / 16,15 / 13,09 */
  --neutro-100: #EDF4F3; /* 1,11 / 1,00 / 15,61 / 12,66 */
  --neutro-200: #DFE6E4; /* 1,27 / 1,14 / 13,74 / 11,14 */
  --neutro-300: #C4CFCC; /* 1,60 / 1,43 / 10,89 / 8,83 */
  --neutro-400: #A2B2AF; /* 2,21 / 1,98 / 7,89 / 6,40 */
  --neutro-500: #7C8985; /* 3,64 / 3,26 / 4,79 / 3,88 */
  --neutro-600: #5B6B66; /* 5,62 / 5,04 / 3,10 / 2,51 */
  --neutro-700: #445653; /* 7,77 / 6,97 / 2,24 / 1,82 */
  --neutro-800: #2D4141; /* 10,80 / 9,69 / 1,61 / 1,31 */
  --neutro-900: #242D2D; /* 14,11 / 12,66 / 1,23 / 1,00 */
  --neutro-950: #1A1A1A; /* 17,40 / 15,61 / 1,00 / 1,23 */
  /* Piedra · anclas 50/100/300 fijas · contraste sobre blanco / capa #EDF4F3 / #1A1A1A / capa oscura #242D2D */
  --piedra-50: #F7F7F1; /* 1,08 / 1,04 / 16,19 / 13,12 */
  --piedra-100: #EEEDE3; /* 1,18 / 1,05 / 14,80 / 12,00 */
  --piedra-200: #E6E5D7; /* 1,27 / 1,14 / 13,72 / 11,12 */
  --piedra-300: #D4D2C0; /* 1,52 / 1,37 / 11,42 / 9,26 */
  --piedra-400: #B0AF9E; /* 2,22 / 1,99 / 7,85 / 6,36 */
  --piedra-500: #888776; /* 3,64 / 3,26 / 4,79 / 3,88 */
  --piedra-600: #696858; /* 5,64 / 5,06 / 3,08 / 2,50 */
  --piedra-700: #545343; /* 7,79 / 6,99 / 2,23 / 1,81 */
  --piedra-800: #3E3D31; /* 10,96 / 9,83 / 1,59 / 1,29 */
  --piedra-900: #2C2B22; /* 14,23 / 12,76 / 1,22 / 1,01 */
  --piedra-950: #1B1A15; /* 17,42 / 15,63 / 1,00 / 1,23 */
  /* Índigo · serie 2, segunda secuencial, brazo «por encima» de la comparación, etiqueta · contraste sobre blanco / capa #EDF4F3 / #1A1A1A / capa oscura #242D2D */
  --indigo-50: #F4F6FF; /* 1,08 / 1,03 / 16,14 / 13,08 */
  --indigo-100: #ECEFFF; /* 1,14 / 1,03 / 15,21 / 12,33 */
  --indigo-200: #DFE4FE; /* 1,26 / 1,13 / 13,81 / 11,20 */
  --indigo-300: #B1B8F4; /* 1,90 / 1,71 / 9,14 / 7,41 */
  --indigo-400: #8D8DEE; /* 2,93 / 2,62 / 5,95 / 4,82 */
  --indigo-500: #6A65D0; /* 4,79 / 4,30 / 3,63 / 2,95 */
  --indigo-600: #524BAC; /* 7,09 / 6,36 / 2,45 / 1,99 */
  --indigo-700: #393A7F; /* 10,07 / 9,03 / 1,73 / 1,40 */
  --indigo-800: #2E345D; /* 11,90 / 10,67 / 1,46 / 1,19 */
  --indigo-900: #232743; /* 14,56 / 13,06 / 1,20 / 1,03 */
  --indigo-950: #181B2C; /* 17,05 / 15,29 / 1,02 / 1,21 */
  /* Azul · serie 4, estado info, etiqueta · contraste sobre blanco / capa #EDF4F3 / #1A1A1A / capa oscura #242D2D */
  --azul-50: #EFF8FE; /* 1,08 / 1,04 / 16,18 / 13,12 */
  --azul-100: #E3F2FD; /* 1,14 / 1,02 / 15,24 / 12,35 */
  --azul-200: #D1EAFC; /* 1,24 / 1,12 / 13,99 / 11,35 */
  --azul-300: #8EC4F1; /* 1,86 / 1,66 / 9,38 / 7,60 */
  --azul-400: #49A0EC; /* 2,79 / 2,50 / 6,23 / 5,05 */
  --azul-500: #1D7AC4; /* 4,53 / 4,07 / 3,84 / 3,11 */
  --azul-600: #095F9D; /* 6,70 / 6,01 / 2,60 / 2,11 */
  --azul-700: #054871; /* 9,67 / 8,67 / 1,80 / 1,46 */
  --azul-800: #073C59; /* 11,67 / 10,47 / 1,49 / 1,21 */
  --azul-900: #0E2D40; /* 14,30 / 12,83 / 1,22 / 1,01 */
  --azul-950: #0C1F2B; /* 16,85 / 15,11 / 1,03 / 1,19 */
  /* Ciruela · serie 5, etiqueta · contraste sobre blanco / capa #EDF4F3 / #1A1A1A / capa oscura #242D2D */
  --ciruela-50: #FDF3F8; /* 1,09 / 1,03 / 16,04 / 13,00 */
  --ciruela-100: #FCEAF3; /* 1,15 / 1,03 / 15,09 / 12,23 */
  --ciruela-200: #F9DDEB; /* 1,27 / 1,14 / 13,73 / 11,13 */
  --ciruela-300: #E7A8C7; /* 1,94 / 1,74 / 8,97 / 7,27 */
  --ciruela-400: #D973A6; /* 3,02 / 2,71 / 5,76 / 4,67 */
  --ciruela-500: #B84683; /* 4,95 / 4,44 / 3,52 / 2,85 */
  --ciruela-600: #952E68; /* 7,32 / 6,57 / 2,38 / 1,93 */
  --ciruela-700: #6E244F; /* 10,35 / 9,29 / 1,68 / 1,36 */
  --ciruela-800: #522740; /* 12,19 / 10,93 / 1,43 / 1,16 */
  --ciruela-900: #3C1F2F; /* 14,69 / 13,18 / 1,18 / 1,04 */
  --ciruela-950: #281620; /* 17,13 / 15,37 / 1,02 / 1,21 */
  /* Bronce · serie 3, estado aviso, brazo «por debajo» de la comparación, infografía, etiqueta · contraste sobre blanco / capa #EDF4F3 / #1A1A1A / capa oscura #242D2D */
  --bronce-50: #FBF5EF; /* 1,08 / 1,03 / 16,09 / 13,04 */
  --bronce-100: #F9EEE2; /* 1,14 / 1,03 / 15,21 / 12,33 */
  --bronce-200: #F5E2CF; /* 1,26 / 1,13 / 13,81 / 11,20 */
  --bronce-300: #DBB68D; /* 1,89 / 1,70 / 9,19 / 7,45 */
  --bronce-400: #B99262; /* 2,86 / 2,56 / 6,09 / 4,94 */
  --bronce-500: #A0690C; /* 4,65 / 4,17 / 3,75 / 3,04 */
  --bronce-600: #7E5107; /* 6,85 / 6,14 / 2,54 / 2,06 */
  --bronce-700: #5F3B04; /* 9,93 / 8,91 / 1,75 / 1,42 */
  --bronce-800: #4E300B; /* 11,99 / 10,75 / 1,45 / 1,18 */
  --bronce-900: #39250E; /* 14,53 / 13,04 / 1,20 / 1,03 */
  --bronce-950: #261A0C; /* 17,00 / 15,25 / 1,02 / 1,20 */
  /* Naranja · señal (500) y brazo de exceso de la desviación · contraste sobre blanco / capa #EDF4F3 / #1A1A1A / capa oscura #242D2D */
  --naranja-50: #FFF4EF; /* 1,08 / 1,03 / 16,11 / 13,06 */
  --naranja-100: #FFEBE4; /* 1,15 / 1,03 / 15,13 / 12,27 */
  --naranja-200: #FEDED1; /* 1,27 / 1,14 / 13,74 / 11,14 */
  --naranja-300: #EBAD94; /* 1,92 / 1,72 / 9,06 / 7,35 */
  --naranja-400: #D7805C; /* 2,94 / 2,64 / 5,91 / 4,79 */
  --naranja-500: #D9632B; /* 3,64 / 3,26 / 4,78 / 3,88 */
  --naranja-600: #963C0C; /* 7,12 / 6,39 / 2,44 / 1,98 */
  --naranja-700: #722B05; /* 10,18 / 9,13 / 1,71 / 1,39 */
  --naranja-800: #5A260E; /* 12,22 / 10,96 / 1,42 / 1,15 */
  --naranja-900: #411F10; /* 14,70 / 13,19 / 1,18 / 1,04 */
  --naranja-950: #2C160D; /* 17,11 / 15,34 / 1,02 / 1,21 */
  /* Rojo · solo error · contraste sobre blanco / capa #EDF4F3 / #1A1A1A / capa oscura #242D2D */
  --rojo-50: #FFF3F2; /* 1,09 / 1,03 / 16,04 / 13,00 */
  --rojo-100: #FFEBE8; /* 1,15 / 1,03 / 15,17 / 12,30 */
  --rojo-200: #FEDDD8; /* 1,27 / 1,14 / 13,71 / 11,12 */
  --rojo-300: #EDAAA1; /* 1,93 / 1,73 / 9,01 / 7,30 */
  --rojo-400: #DA7B71; /* 2,98 / 2,67 / 5,85 / 4,74 */
  --rojo-500: #BA5047; /* 4,85 / 4,35 / 3,59 / 2,91 */
  --rojo-600: #993730; /* 7,13 / 6,40 / 2,44 / 1,98 */
  --rojo-700: #732722; /* 10,28 / 9,22 / 1,69 / 1,37 */
  --rojo-800: #5C231F; /* 12,24 / 10,98 / 1,42 / 1,15 */
  --rojo-900: #431D19; /* 14,70 / 13,19 / 1,18 / 1,04 */
  --rojo-950: #2D1512; /* 17,11 / 15,34 / 1,02 / 1,21 */
  --menta: #00FFAB; /* 1,32 / 1,19 / 13,17 / 10,68 */

  /* color.css l. 45–47 */
  /* ---- Señal y error ---- */
  --naranja: #D9632B;     /* 3,64: gráfico y marca, no texto */
  --rojo: var(--rojo-600);  /* error: la familia roja vive en secundarios.css */
}

/* ==== 3. Color · roles en claro ====
   Origen: css/secundarios.css l. 117–216 + css/color.css l. 8 (color-scheme) y l. 69 (--velo).
   Los componentes usan solo roles, nunca primitivas. */
:root {
  /* color.css l. 8 */
  color-scheme: light;

  /* ---- Roles y tokens de tema: CLARO ---- */

  --fondo: #FFFFFF; /* #FFFFFF · texto encima 17,40 */
  --capa: var(--neutro-100); /* #EDF4F3 · texto encima 15,61 */
  --hundido: var(--neutro-50); /* #F4F7F6 · texto encima 16,15 */
  --texto: var(--neutro-950); /* #1A1A1A · 17,40 fondo · 15,61 capa */
  --texto-2: var(--neutro-600); /* #5B6B66 · 5,62 fondo · 5,04 capa */
  --texto-3: var(--neutro-500); /* #7C8985 · 3,64 fondo · 3,26 capa */
  --linea: var(--neutro-200); /* #DFE6E4 · 1,27 fondo · 1,14 capa */
  --linea-2: var(--neutro-300); /* #C4CFCC · 1,60 fondo · 1,43 capa */
  --linea-control: var(--neutro-500); /* #7C8985 · 3,64 fondo · 3,26 capa */
  --accion: var(--verde-700); /* #0C4F48 · accion-texto encima 7,13 */
  --accion-texto: var(--menta); /* #00FFAB · 7,13 sobre la acción */
  --accion-hover: var(--verde-800); /* #0A413B · accion-texto encima 8,67 */
  --accion-pulsado: var(--verde-900); /* #07312D · accion-texto encima 10,69 */
  --seleccion: var(--verde-200); /* #D6EBE6 · texto encima 13,99 */
  --enlace: var(--verde-700); /* #0C4F48 · 9,43 fondo · 8,46 capa */
  --foco: var(--verde-700); /* #0C4F48 · 9,43 fondo · 8,46 capa */
  --marca: var(--verde-700); /* #0C4F48 · 9,43 fondo · 8,46 capa */

  --dato-1: var(--verde-500); /* #008A75 · 4,29 fondo · 3,85 capa */
  --dato-2: var(--indigo-500); /* #6A65D0 · 4,79 fondo · 4,30 capa */
  --dato-3: var(--bronce-500); /* #A0690C · 4,65 fondo · 4,17 capa */
  --dato-4: var(--azul-600); /* #095F9D · 6,70 fondo · 6,01 capa */
  --dato-5: var(--ciruela-700); /* #6E244F · 10,35 fondo · 9,29 capa */
  --dato-senal: var(--naranja-500); /* #D9632B · 3,64 fondo · 3,26 capa */
  --dato-rejilla: var(--linea); /* #DFE6E4 · 1,27 fondo · 1,14 capa */
  --dato-eje: var(--linea-2); /* #C4CFCC · 1,60 fondo · 1,43 capa */
  --dato-texto: var(--texto-2); /* #5B6B66 · 5,62 fondo · 5,04 capa */
  --dato-otros: var(--neutro-300); /* #C4CFCC · 1,60 fondo · 1,43 capa */

  --seq-verde-1: var(--verde-100); /* #E7F3F0 · 1,14 fondo · 1,02 capa */
  --seq-verde-2: var(--verde-300); /* #9AC9BE · 1,83 fondo · 1,64 capa */
  --seq-verde-3: var(--verde-400); /* #61AA9A · 2,72 fondo · 2,44 capa */
  --seq-verde-4: var(--verde-500); /* #008A75 · 4,29 fondo · 3,85 capa */
  --seq-verde-5: var(--verde-600); /* #076B5F · 6,41 fondo · 5,75 capa */
  --seq-verde-6: var(--verde-700); /* #0C4F48 · 9,43 fondo · 8,46 capa */
  --seq-verde-7: var(--verde-900); /* #07312D · 14,13 fondo · 12,67 capa */
  --seq-indigo-1: var(--indigo-100); /* #ECEFFF · 1,14 fondo · 1,03 capa */
  --seq-indigo-2: var(--indigo-300); /* #B1B8F4 · 1,90 fondo · 1,71 capa */
  --seq-indigo-3: var(--indigo-400); /* #8D8DEE · 2,93 fondo · 2,62 capa */
  --seq-indigo-4: var(--indigo-500); /* #6A65D0 · 4,79 fondo · 4,30 capa */
  --seq-indigo-5: var(--indigo-600); /* #524BAC · 7,09 fondo · 6,36 capa */
  --seq-indigo-6: var(--indigo-700); /* #393A7F · 10,07 fondo · 9,03 capa */
  --seq-indigo-7: var(--indigo-900); /* #232743 · 14,56 fondo · 13,06 capa */

  --ord-verde-1: var(--verde-400); /* #61AA9A · 2,72 fondo · 2,44 capa */
  --ord-verde-2: var(--verde-500); /* #008A75 · 4,29 fondo · 3,85 capa */
  --ord-verde-3: var(--verde-600); /* #076B5F · 6,41 fondo · 5,75 capa */
  --ord-verde-4: var(--verde-700); /* #0C4F48 · 9,43 fondo · 8,46 capa */
  --ord-verde-5: var(--verde-900); /* #07312D · 14,13 fondo · 12,67 capa */

  --div-desviacion-1: var(--naranja-500); /* #D9632B · 3,64 fondo · 3,26 capa */
  --div-desviacion-2: var(--naranja-400); /* #D7805C · 2,94 fondo · 2,64 capa */
  --div-desviacion-3: var(--naranja-300); /* #EBAD94 · 1,92 fondo · 1,72 capa */
  --div-desviacion-4: var(--neutro-200); /* #DFE6E4 · 1,27 fondo · 1,14 capa */
  --div-desviacion-5: var(--verde-300); /* #9AC9BE · 1,83 fondo · 1,64 capa */
  --div-desviacion-6: var(--verde-400); /* #61AA9A · 2,72 fondo · 2,44 capa */
  --div-desviacion-7: var(--verde-500); /* #008A75 · 4,29 fondo · 3,85 capa */
  --div-comparacion-1: var(--bronce-500); /* #A0690C · 4,65 fondo · 4,17 capa */
  --div-comparacion-2: var(--bronce-400); /* #B99262 · 2,86 fondo · 2,56 capa */
  --div-comparacion-3: var(--bronce-300); /* #DBB68D · 1,89 fondo · 1,70 capa */
  --div-comparacion-4: var(--neutro-200); /* #DFE6E4 · 1,27 fondo · 1,14 capa */
  --div-comparacion-5: var(--indigo-300); /* #B1B8F4 · 1,90 fondo · 1,71 capa */
  --div-comparacion-6: var(--indigo-400); /* #8D8DEE · 2,93 fondo · 2,62 capa */
  --div-comparacion-7: var(--indigo-500); /* #6A65D0 · 4,79 fondo · 4,30 capa */

  --exito-fondo: var(--verde-50); /* #F0FBF8 · ΔE00 5,6 con el fondo */
  --exito-borde: var(--verde-500); /* #008A75 · 4,06 sobre su fondo · 4,29 fondo · 3,85 capa */
  --exito-texto: var(--verde-700); /* #0C4F48 · 8,92 sobre su fondo · 9,43 fondo · 8,46 capa */
  --exito-icono: var(--verde-500); /* #008A75 · 4,06 sobre su fondo · 4,29 fondo · 3,85 capa */
  --aviso-fondo: var(--bronce-50); /* #FBF5EF · ΔE00 4,0 con el fondo */
  --aviso-borde: var(--bronce-500); /* #A0690C · 4,29 sobre su fondo · 4,65 fondo · 4,17 capa */
  --aviso-texto: var(--bronce-700); /* #5F3B04 · 9,18 sobre su fondo · 9,93 fondo · 8,91 capa */
  --aviso-icono: var(--bronce-500); /* #A0690C · 4,29 sobre su fondo · 4,65 fondo · 4,17 capa */
  --error-fondo: var(--rojo-50); /* #FFF3F2 · ΔE00 5,7 con el fondo */
  --error-borde: var(--rojo-600); /* #993730 · 6,58 sobre su fondo · 7,13 fondo · 6,40 capa */
  --error-texto: var(--rojo-700); /* #732722 · 9,48 sobre su fondo · 10,28 fondo · 9,22 capa */
  --error-icono: var(--rojo-600); /* #993730 · 6,58 sobre su fondo · 7,13 fondo · 6,40 capa */
  --info-fondo: var(--azul-50); /* #EFF8FE · ΔE00 4,6 con el fondo */
  --info-borde: var(--azul-600); /* #095F9D · 6,23 sobre su fondo · 6,70 fondo · 6,01 capa */
  --info-texto: var(--azul-700); /* #054871 · 8,99 sobre su fondo · 9,67 fondo · 8,67 capa */
  --info-icono: var(--azul-600); /* #095F9D · 6,23 sobre su fondo · 6,70 fondo · 6,01 capa */

  --etq-verde-fondo: var(--verde-200); /* #D6EBE6 · texto encima 13,99 */
  --etq-verde-texto: var(--verde-700); /* #0C4F48 · 7,58 sobre su fondo */
  --etq-indigo-fondo: var(--indigo-200); /* #DFE4FE · texto encima 13,81 */
  --etq-indigo-texto: var(--indigo-700); /* #393A7F · 7,99 sobre su fondo */
  --etq-azul-fondo: var(--azul-200); /* #D1EAFC · texto encima 13,99 */
  --etq-azul-texto: var(--azul-700); /* #054871 · 7,77 sobre su fondo */
  --etq-ciruela-fondo: var(--ciruela-200); /* #F9DDEB · texto encima 13,73 */
  --etq-ciruela-texto: var(--ciruela-700); /* #6E244F · 8,17 sobre su fondo */
  --etq-bronce-fondo: var(--bronce-200); /* #F5E2CF · texto encima 13,81 */
  --etq-bronce-texto: var(--bronce-700); /* #5F3B04 · 7,88 sobre su fondo */
  --etq-neutro-fondo: var(--neutro-200); /* #DFE6E4 · texto encima 13,74 */
  --etq-neutro-texto: var(--neutro-700); /* #445653 · 6,14 sobre su fondo */

  --banda-piedra: var(--piedra-100); /* #EEEDE3 · texto encima 14,80 */
  --banda-piedra-texto: var(--neutro-950); /* #1A1A1A · 14,80 sobre la banda */
  --banda-piedra-texto-2: var(--piedra-600); /* #696858 · 4,80 sobre la banda */

  /* color.css l. 69 */
  --velo: rgb(26 26 26 / .44);
}

/* Sobre foto · origen: css/color.css l. 72–82 (literal) */
/* ==== Sobre foto: iguales en claro y en oscuro (una foto no cambia con el tema), así que ni el
   tema oscuro ni las islas ni las bandas los redefinen. El texto claro sobre una foto va con su
   velo: tinta al 68 %, que deja el blanco en 6,01:1 y la menta en 4,55:1 hasta sobre el blanco
   puro de la foto (el peor píxel). Un bloque sobre foto pone estos valores en sus roles
   (--texto, --texto-2, --linea, --enlace, --foco). ==== */
:root {
  --velo-foto: rgb(26 26 26 / .68);           /* tinta al 68 % */
  --sobre-foto-texto: var(--neutro-0);        /* texto y texto 2 · 6,01 */
  --sobre-foto-linea: rgb(255 255 255 / .28); /* filetes */
  --sobre-foto-enlace: var(--menta);          /* enlace y foco · 4,55 */
}

/* ==== 4. Color · roles en oscuro ====
   Origen: css/secundarios.css l. 219–321 y 323–423 + css/color.css l. 88 / 110 (color-scheme)
   y l. 106 / 128 (--velo). Los dos bloques son idénticos: uno sigue al dispositivo salvo que se
   haya elegido claro; el otro es la elección explícita de oscuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* color.css l. 88 */
    color-scheme: dark;

    --fondo: var(--neutro-950); /* #1A1A1A · texto encima 16,15 */
    --capa: var(--neutro-900); /* #242D2D · texto encima 13,09 */
    --hundido: #111313; /* #111313 · texto encima 17,30 */
    --texto: var(--neutro-50); /* #F4F7F6 · 16,15 fondo · 13,09 capa */
    --texto-2: var(--neutro-400); /* #A2B2AF · 7,89 fondo · 6,40 capa */
    --texto-3: var(--neutro-500); /* #7C8985 · 4,79 fondo · 3,88 capa */
    --linea: #2D3636; /* #2D3636 · 1,40 fondo · 1,14 capa */
    --linea-2: #3C4646; /* #3C4646 · 1,79 fondo · 1,45 capa */
    --linea-control: var(--neutro-500); /* #7C8985 · 4,79 fondo · 3,88 capa */
    --accion: var(--menta); /* #00FFAB · accion-texto encima 7,13 */
    --accion-texto: var(--verde-700); /* #0C4F48 · 7,13 sobre la acción */
    --accion-hover: #1BEA9E; /* #1BEA9E · accion-texto encima 5,97 */
    --accion-pulsado: #17D38E; /* #17D38E · accion-texto encima 4,82 */
    --seleccion: var(--verde-800); /* #0A413B · texto encima 10,63 */
    --enlace: var(--menta); /* #00FFAB · 13,17 fondo · 10,68 capa */
    --foco: var(--menta); /* #00FFAB · 13,17 fondo · 10,68 capa */
    --marca: var(--verde-50); /* #F0FBF8 · 16,46 fondo · 13,34 capa */

    --dato-1: var(--verde-500); /* #008A75 · 4,05 fondo · 3,29 capa */
    --dato-2: var(--indigo-400); /* #8D8DEE · 5,95 fondo · 4,82 capa */
    --dato-3: var(--bronce-400); /* #B99262 · 6,09 fondo · 4,94 capa */
    --dato-4: var(--azul-300); /* #8EC4F1 · 9,38 fondo · 7,60 capa */
    --dato-5: var(--ciruela-400); /* #D973A6 · 5,76 fondo · 4,67 capa */
    --dato-senal: var(--naranja-500); /* #D9632B · 4,78 fondo · 3,88 capa */
    --dato-rejilla: var(--linea); /* #2D3636 · 1,40 fondo · 1,14 capa */
    --dato-eje: var(--linea-2); /* #3C4646 · 1,79 fondo · 1,45 capa */
    --dato-texto: var(--texto-2); /* #A2B2AF · 7,89 fondo · 6,40 capa */
    --dato-otros: var(--neutro-700); /* #445653 · 2,24 fondo · 1,82 capa */

    --seq-verde-1: var(--verde-900); /* #07312D · 1,23 fondo · 1,00 capa */
    --seq-verde-2: var(--verde-700); /* #0C4F48 · 1,85 fondo · 1,50 capa */
    --seq-verde-3: var(--verde-600); /* #076B5F · 2,72 fondo · 2,20 capa */
    --seq-verde-4: var(--verde-500); /* #008A75 · 4,05 fondo · 3,29 capa */
    --seq-verde-5: var(--verde-400); /* #61AA9A · 6,40 fondo · 5,19 capa */
    --seq-verde-6: var(--verde-300); /* #9AC9BE · 9,51 fondo · 7,71 capa */
    --seq-verde-7: var(--verde-100); /* #E7F3F0 · 15,31 fondo · 12,41 capa */
    --seq-indigo-1: var(--indigo-900); /* #232743 · 1,20 fondo · 1,03 capa */
    --seq-indigo-2: var(--indigo-700); /* #393A7F · 1,73 fondo · 1,40 capa */
    --seq-indigo-3: var(--indigo-600); /* #524BAC · 2,45 fondo · 1,99 capa */
    --seq-indigo-4: var(--indigo-500); /* #6A65D0 · 3,63 fondo · 2,95 capa */
    --seq-indigo-5: var(--indigo-400); /* #8D8DEE · 5,95 fondo · 4,82 capa */
    --seq-indigo-6: var(--indigo-300); /* #B1B8F4 · 9,14 fondo · 7,41 capa */
    --seq-indigo-7: var(--indigo-100); /* #ECEFFF · 15,21 fondo · 12,33 capa */

    --ord-verde-1: var(--verde-600); /* #076B5F · 2,72 fondo · 2,20 capa */
    --ord-verde-2: var(--verde-500); /* #008A75 · 4,05 fondo · 3,29 capa */
    --ord-verde-3: var(--verde-400); /* #61AA9A · 6,40 fondo · 5,19 capa */
    --ord-verde-4: var(--verde-300); /* #9AC9BE · 9,51 fondo · 7,71 capa */
    --ord-verde-5: var(--verde-200); /* #D6EBE6 · 13,99 fondo · 11,35 capa */

    --div-desviacion-1: var(--naranja-400); /* #D7805C · 5,91 fondo · 4,79 capa */
    --div-desviacion-2: var(--naranja-500); /* #D9632B · 4,78 fondo · 3,88 capa */
    --div-desviacion-3: var(--naranja-600); /* #963C0C · 2,44 fondo · 1,98 capa */
    --div-desviacion-4: var(--neutro-800); /* #2D4141 · 1,61 fondo · 1,31 capa */
    --div-desviacion-5: var(--verde-600); /* #076B5F · 2,72 fondo · 2,20 capa */
    --div-desviacion-6: var(--verde-500); /* #008A75 · 4,05 fondo · 3,29 capa */
    --div-desviacion-7: var(--verde-400); /* #61AA9A · 6,40 fondo · 5,19 capa */
    --div-comparacion-1: var(--bronce-400); /* #B99262 · 6,09 fondo · 4,94 capa */
    --div-comparacion-2: var(--bronce-500); /* #A0690C · 3,75 fondo · 3,04 capa */
    --div-comparacion-3: var(--bronce-600); /* #7E5107 · 2,54 fondo · 2,06 capa */
    --div-comparacion-4: var(--neutro-800); /* #2D4141 · 1,61 fondo · 1,31 capa */
    --div-comparacion-5: var(--indigo-600); /* #524BAC · 2,45 fondo · 1,99 capa */
    --div-comparacion-6: var(--indigo-500); /* #6A65D0 · 3,63 fondo · 2,95 capa */
    --div-comparacion-7: var(--indigo-400); /* #8D8DEE · 5,95 fondo · 4,82 capa */

    --exito-fondo: var(--verde-950); /* #04221F · ΔE00 12,9 con el fondo */
    --exito-borde: var(--verde-500); /* #008A75 · 3,90 sobre su fondo · 4,05 fondo · 3,29 capa */
    --exito-texto: var(--verde-300); /* #9AC9BE · 9,15 sobre su fondo · 9,51 fondo · 7,71 capa */
    --exito-icono: var(--verde-500); /* #008A75 · 3,90 sobre su fondo · 4,05 fondo · 3,29 capa */
    --aviso-fondo: var(--bronce-950); /* #261A0C · ΔE00 9,5 con el fondo */
    --aviso-borde: var(--bronce-500); /* #A0690C · 3,66 sobre su fondo · 3,75 fondo · 3,04 capa */
    --aviso-texto: var(--bronce-300); /* #DBB68D · 8,97 sobre su fondo · 9,19 fondo · 7,45 capa */
    --aviso-icono: var(--bronce-500); /* #A0690C · 3,66 sobre su fondo · 3,75 fondo · 3,04 capa */
    --error-fondo: var(--rojo-950); /* #2D1512 · ΔE00 13,3 con el fondo */
    --error-borde: var(--rojo-300); /* #EDAAA1 · 8,85 sobre su fondo · 9,01 fondo · 7,30 capa */
    --error-texto: var(--rojo-300); /* #EDAAA1 · 8,85 sobre su fondo · 9,01 fondo · 7,30 capa */
    --error-icono: var(--rojo-300); /* #EDAAA1 · 8,85 sobre su fondo · 9,01 fondo · 7,30 capa */
    --info-fondo: var(--azul-950); /* #0C1F2B · ΔE00 9,1 con el fondo */
    --info-borde: var(--azul-300); /* #8EC4F1 · 9,08 sobre su fondo · 9,38 fondo · 7,60 capa */
    --info-texto: var(--azul-300); /* #8EC4F1 · 9,08 sobre su fondo · 9,38 fondo · 7,60 capa */
    --info-icono: var(--azul-300); /* #8EC4F1 · 9,08 sobre su fondo · 9,38 fondo · 7,60 capa */

    --etq-verde-fondo: var(--verde-800); /* #0A413B · texto encima 10,63 */
    --etq-verde-texto: var(--verde-300); /* #9AC9BE · 6,26 sobre su fondo */
    --etq-indigo-fondo: var(--indigo-800); /* #2E345D · texto encima 11,04 */
    --etq-indigo-texto: var(--indigo-300); /* #B1B8F4 · 6,25 sobre su fondo */
    --etq-azul-fondo: var(--azul-800); /* #073C59 · texto encima 10,83 */
    --etq-azul-texto: var(--azul-300); /* #8EC4F1 · 6,29 sobre su fondo */
    --etq-ciruela-fondo: var(--ciruela-800); /* #522740 · texto encima 11,31 */
    --etq-ciruela-texto: var(--ciruela-300); /* #E7A8C7 · 6,28 sobre su fondo */
    --etq-bronce-fondo: var(--bronce-800); /* #4E300B · texto encima 11,12 */
    --etq-bronce-texto: var(--bronce-300); /* #DBB68D · 6,33 sobre su fondo */
    --etq-neutro-fondo: var(--neutro-800); /* #2D4141 · texto encima 10,02 */
    --etq-neutro-texto: var(--neutro-300); /* #C4CFCC · 6,76 sobre su fondo */

    --banda-piedra: var(--neutro-900); /* #242D2D · texto encima 13,09 */
    --banda-piedra-texto: var(--neutro-50); /* #F4F7F6 · 13,09 sobre la banda */
    --banda-piedra-texto-2: var(--neutro-400); /* #A2B2AF · 6,40 sobre la banda */

    /* color.css l. 106 */
    --velo: rgb(0 0 0 / .56);
  }
}

:root[data-theme="dark"] {
  /* color.css l. 110 */
  color-scheme: dark;

  --fondo: var(--neutro-950); /* #1A1A1A · texto encima 16,15 */
  --capa: var(--neutro-900); /* #242D2D · texto encima 13,09 */
  --hundido: #111313; /* #111313 · texto encima 17,30 */
  --texto: var(--neutro-50); /* #F4F7F6 · 16,15 fondo · 13,09 capa */
  --texto-2: var(--neutro-400); /* #A2B2AF · 7,89 fondo · 6,40 capa */
  --texto-3: var(--neutro-500); /* #7C8985 · 4,79 fondo · 3,88 capa */
  --linea: #2D3636; /* #2D3636 · 1,40 fondo · 1,14 capa */
  --linea-2: #3C4646; /* #3C4646 · 1,79 fondo · 1,45 capa */
  --linea-control: var(--neutro-500); /* #7C8985 · 4,79 fondo · 3,88 capa */
  --accion: var(--menta); /* #00FFAB · accion-texto encima 7,13 */
  --accion-texto: var(--verde-700); /* #0C4F48 · 7,13 sobre la acción */
  --accion-hover: #1BEA9E; /* #1BEA9E · accion-texto encima 5,97 */
  --accion-pulsado: #17D38E; /* #17D38E · accion-texto encima 4,82 */
  --seleccion: var(--verde-800); /* #0A413B · texto encima 10,63 */
  --enlace: var(--menta); /* #00FFAB · 13,17 fondo · 10,68 capa */
  --foco: var(--menta); /* #00FFAB · 13,17 fondo · 10,68 capa */
  --marca: var(--verde-50); /* #F0FBF8 · 16,46 fondo · 13,34 capa */

  --dato-1: var(--verde-500); /* #008A75 · 4,05 fondo · 3,29 capa */
  --dato-2: var(--indigo-400); /* #8D8DEE · 5,95 fondo · 4,82 capa */
  --dato-3: var(--bronce-400); /* #B99262 · 6,09 fondo · 4,94 capa */
  --dato-4: var(--azul-300); /* #8EC4F1 · 9,38 fondo · 7,60 capa */
  --dato-5: var(--ciruela-400); /* #D973A6 · 5,76 fondo · 4,67 capa */
  --dato-senal: var(--naranja-500); /* #D9632B · 4,78 fondo · 3,88 capa */
  --dato-rejilla: var(--linea); /* #2D3636 · 1,40 fondo · 1,14 capa */
  --dato-eje: var(--linea-2); /* #3C4646 · 1,79 fondo · 1,45 capa */
  --dato-texto: var(--texto-2); /* #A2B2AF · 7,89 fondo · 6,40 capa */
  --dato-otros: var(--neutro-700); /* #445653 · 2,24 fondo · 1,82 capa */

  --seq-verde-1: var(--verde-900); /* #07312D · 1,23 fondo · 1,00 capa */
  --seq-verde-2: var(--verde-700); /* #0C4F48 · 1,85 fondo · 1,50 capa */
  --seq-verde-3: var(--verde-600); /* #076B5F · 2,72 fondo · 2,20 capa */
  --seq-verde-4: var(--verde-500); /* #008A75 · 4,05 fondo · 3,29 capa */
  --seq-verde-5: var(--verde-400); /* #61AA9A · 6,40 fondo · 5,19 capa */
  --seq-verde-6: var(--verde-300); /* #9AC9BE · 9,51 fondo · 7,71 capa */
  --seq-verde-7: var(--verde-100); /* #E7F3F0 · 15,31 fondo · 12,41 capa */
  --seq-indigo-1: var(--indigo-900); /* #232743 · 1,20 fondo · 1,03 capa */
  --seq-indigo-2: var(--indigo-700); /* #393A7F · 1,73 fondo · 1,40 capa */
  --seq-indigo-3: var(--indigo-600); /* #524BAC · 2,45 fondo · 1,99 capa */
  --seq-indigo-4: var(--indigo-500); /* #6A65D0 · 3,63 fondo · 2,95 capa */
  --seq-indigo-5: var(--indigo-400); /* #8D8DEE · 5,95 fondo · 4,82 capa */
  --seq-indigo-6: var(--indigo-300); /* #B1B8F4 · 9,14 fondo · 7,41 capa */
  --seq-indigo-7: var(--indigo-100); /* #ECEFFF · 15,21 fondo · 12,33 capa */

  --ord-verde-1: var(--verde-600); /* #076B5F · 2,72 fondo · 2,20 capa */
  --ord-verde-2: var(--verde-500); /* #008A75 · 4,05 fondo · 3,29 capa */
  --ord-verde-3: var(--verde-400); /* #61AA9A · 6,40 fondo · 5,19 capa */
  --ord-verde-4: var(--verde-300); /* #9AC9BE · 9,51 fondo · 7,71 capa */
  --ord-verde-5: var(--verde-200); /* #D6EBE6 · 13,99 fondo · 11,35 capa */

  --div-desviacion-1: var(--naranja-400); /* #D7805C · 5,91 fondo · 4,79 capa */
  --div-desviacion-2: var(--naranja-500); /* #D9632B · 4,78 fondo · 3,88 capa */
  --div-desviacion-3: var(--naranja-600); /* #963C0C · 2,44 fondo · 1,98 capa */
  --div-desviacion-4: var(--neutro-800); /* #2D4141 · 1,61 fondo · 1,31 capa */
  --div-desviacion-5: var(--verde-600); /* #076B5F · 2,72 fondo · 2,20 capa */
  --div-desviacion-6: var(--verde-500); /* #008A75 · 4,05 fondo · 3,29 capa */
  --div-desviacion-7: var(--verde-400); /* #61AA9A · 6,40 fondo · 5,19 capa */
  --div-comparacion-1: var(--bronce-400); /* #B99262 · 6,09 fondo · 4,94 capa */
  --div-comparacion-2: var(--bronce-500); /* #A0690C · 3,75 fondo · 3,04 capa */
  --div-comparacion-3: var(--bronce-600); /* #7E5107 · 2,54 fondo · 2,06 capa */
  --div-comparacion-4: var(--neutro-800); /* #2D4141 · 1,61 fondo · 1,31 capa */
  --div-comparacion-5: var(--indigo-600); /* #524BAC · 2,45 fondo · 1,99 capa */
  --div-comparacion-6: var(--indigo-500); /* #6A65D0 · 3,63 fondo · 2,95 capa */
  --div-comparacion-7: var(--indigo-400); /* #8D8DEE · 5,95 fondo · 4,82 capa */

  --exito-fondo: var(--verde-950); /* #04221F · ΔE00 12,9 con el fondo */
  --exito-borde: var(--verde-500); /* #008A75 · 3,90 sobre su fondo · 4,05 fondo · 3,29 capa */
  --exito-texto: var(--verde-300); /* #9AC9BE · 9,15 sobre su fondo · 9,51 fondo · 7,71 capa */
  --exito-icono: var(--verde-500); /* #008A75 · 3,90 sobre su fondo · 4,05 fondo · 3,29 capa */
  --aviso-fondo: var(--bronce-950); /* #261A0C · ΔE00 9,5 con el fondo */
  --aviso-borde: var(--bronce-500); /* #A0690C · 3,66 sobre su fondo · 3,75 fondo · 3,04 capa */
  --aviso-texto: var(--bronce-300); /* #DBB68D · 8,97 sobre su fondo · 9,19 fondo · 7,45 capa */
  --aviso-icono: var(--bronce-500); /* #A0690C · 3,66 sobre su fondo · 3,75 fondo · 3,04 capa */
  --error-fondo: var(--rojo-950); /* #2D1512 · ΔE00 13,3 con el fondo */
  --error-borde: var(--rojo-300); /* #EDAAA1 · 8,85 sobre su fondo · 9,01 fondo · 7,30 capa */
  --error-texto: var(--rojo-300); /* #EDAAA1 · 8,85 sobre su fondo · 9,01 fondo · 7,30 capa */
  --error-icono: var(--rojo-300); /* #EDAAA1 · 8,85 sobre su fondo · 9,01 fondo · 7,30 capa */
  --info-fondo: var(--azul-950); /* #0C1F2B · ΔE00 9,1 con el fondo */
  --info-borde: var(--azul-300); /* #8EC4F1 · 9,08 sobre su fondo · 9,38 fondo · 7,60 capa */
  --info-texto: var(--azul-300); /* #8EC4F1 · 9,08 sobre su fondo · 9,38 fondo · 7,60 capa */
  --info-icono: var(--azul-300); /* #8EC4F1 · 9,08 sobre su fondo · 9,38 fondo · 7,60 capa */

  --etq-verde-fondo: var(--verde-800); /* #0A413B · texto encima 10,63 */
  --etq-verde-texto: var(--verde-300); /* #9AC9BE · 6,26 sobre su fondo */
  --etq-indigo-fondo: var(--indigo-800); /* #2E345D · texto encima 11,04 */
  --etq-indigo-texto: var(--indigo-300); /* #B1B8F4 · 6,25 sobre su fondo */
  --etq-azul-fondo: var(--azul-800); /* #073C59 · texto encima 10,83 */
  --etq-azul-texto: var(--azul-300); /* #8EC4F1 · 6,29 sobre su fondo */
  --etq-ciruela-fondo: var(--ciruela-800); /* #522740 · texto encima 11,31 */
  --etq-ciruela-texto: var(--ciruela-300); /* #E7A8C7 · 6,28 sobre su fondo */
  --etq-bronce-fondo: var(--bronce-800); /* #4E300B · texto encima 11,12 */
  --etq-bronce-texto: var(--bronce-300); /* #DBB68D · 6,33 sobre su fondo */
  --etq-neutro-fondo: var(--neutro-800); /* #2D4141 · texto encima 10,02 */
  --etq-neutro-texto: var(--neutro-300); /* #C4CFCC · 6,76 sobre su fondo */

  --banda-piedra: var(--neutro-900); /* #242D2D · texto encima 13,09 */
  --banda-piedra-texto: var(--neutro-50); /* #F4F7F6 · 13,09 sobre la banda */
  --banda-piedra-texto-2: var(--neutro-400); /* #A2B2AF · 6,40 sobre la banda */

  /* color.css l. 128 */
  --velo: rgb(0 0 0 / .56);
}

/* ==== 5. Contextos: islas (el otro tema dentro de la página) y bandas (verde, piedra, capa) ====
   Origen: css/color.css l. 131–443 (literal). Redefinen los roles en un trozo de página.
   Lleva dos reglas que pintan (l. 323 y l. 440–443: fondo y texto de islas, bandas y body):
   van aquí porque sin ellas el contexto no se ve; ::selection (l. 445) va a la base. */
/* ==== Islas: enseñan el otro tema dentro de la página (comparativas).
   Llevan TODOS los tokens de tema (roles, datos, estados, etiquetas). ==== */
.isla-oscura {
  color-scheme: dark;
  --fondo: var(--neutro-950);
  --capa: var(--neutro-900);
  --hundido: #111313;
  --texto: var(--neutro-50);
  --texto-2: var(--neutro-400);
  --texto-3: var(--neutro-500);
  --linea: #2D3636;
  --linea-2: #3C4646;
  --linea-control: var(--neutro-500);
  --accion: var(--menta);
  --accion-texto: var(--verde-700);
  --accion-hover: #1BEA9E;
  --accion-pulsado: #17D38E;
  --seleccion: var(--verde-800);
  --enlace: var(--menta);
  --foco: var(--menta);
  --marca: var(--verde-50);
  --dato-1: var(--verde-500);
  --dato-2: var(--indigo-400);
  --dato-3: var(--bronce-400);
  --dato-4: var(--azul-300);
  --dato-5: var(--ciruela-400);
  --dato-senal: var(--naranja-500);
  --dato-rejilla: var(--linea);
  --dato-eje: var(--linea-2);
  --dato-texto: var(--texto-2);
  --dato-otros: var(--neutro-700);
  --seq-verde-1: var(--verde-900);
  --seq-verde-2: var(--verde-700);
  --seq-verde-3: var(--verde-600);
  --seq-verde-4: var(--verde-500);
  --seq-verde-5: var(--verde-400);
  --seq-verde-6: var(--verde-300);
  --seq-verde-7: var(--verde-100);
  --seq-indigo-1: var(--indigo-900);
  --seq-indigo-2: var(--indigo-700);
  --seq-indigo-3: var(--indigo-600);
  --seq-indigo-4: var(--indigo-500);
  --seq-indigo-5: var(--indigo-400);
  --seq-indigo-6: var(--indigo-300);
  --seq-indigo-7: var(--indigo-100);
  --ord-verde-1: var(--verde-600);
  --ord-verde-2: var(--verde-500);
  --ord-verde-3: var(--verde-400);
  --ord-verde-4: var(--verde-300);
  --ord-verde-5: var(--verde-200);
  --div-desviacion-1: var(--naranja-400);
  --div-desviacion-2: var(--naranja-500);
  --div-desviacion-3: var(--naranja-600);
  --div-desviacion-4: var(--neutro-800);
  --div-desviacion-5: var(--verde-600);
  --div-desviacion-6: var(--verde-500);
  --div-desviacion-7: var(--verde-400);
  --div-comparacion-1: var(--bronce-400);
  --div-comparacion-2: var(--bronce-500);
  --div-comparacion-3: var(--bronce-600);
  --div-comparacion-4: var(--neutro-800);
  --div-comparacion-5: var(--indigo-600);
  --div-comparacion-6: var(--indigo-500);
  --div-comparacion-7: var(--indigo-400);
  --exito-fondo: var(--verde-950);
  --exito-borde: var(--verde-500);
  --exito-texto: var(--verde-300);
  --exito-icono: var(--verde-500);
  --aviso-fondo: var(--bronce-950);
  --aviso-borde: var(--bronce-500);
  --aviso-texto: var(--bronce-300);
  --aviso-icono: var(--bronce-500);
  --error-fondo: var(--rojo-950);
  --error-borde: var(--rojo-300);
  --error-texto: var(--rojo-300);
  --error-icono: var(--rojo-300);
  --info-fondo: var(--azul-950);
  --info-borde: var(--azul-300);
  --info-texto: var(--azul-300);
  --info-icono: var(--azul-300);
  --etq-verde-fondo: var(--verde-800);
  --etq-verde-texto: var(--verde-300);
  --etq-indigo-fondo: var(--indigo-800);
  --etq-indigo-texto: var(--indigo-300);
  --etq-azul-fondo: var(--azul-800);
  --etq-azul-texto: var(--azul-300);
  --etq-ciruela-fondo: var(--ciruela-800);
  --etq-ciruela-texto: var(--ciruela-300);
  --etq-bronce-fondo: var(--bronce-800);
  --etq-bronce-texto: var(--bronce-300);
  --etq-neutro-fondo: var(--neutro-800);
  --etq-neutro-texto: var(--neutro-300);
  --banda-piedra: var(--neutro-900);
  --banda-piedra-texto: var(--neutro-50);
  --banda-piedra-texto-2: var(--neutro-400);
  --velo: rgb(0 0 0 / .56);
}
.isla-clara {
  color-scheme: light;
  --fondo: #FFFFFF;
  --capa: var(--neutro-100);
  --hundido: var(--neutro-50);
  --texto: var(--neutro-950);
  --texto-2: var(--neutro-600);
  --texto-3: var(--neutro-500);
  --linea: var(--neutro-200);
  --linea-2: var(--neutro-300);
  --linea-control: var(--neutro-500);
  --accion: var(--verde-700);
  --accion-texto: var(--menta);
  --accion-hover: var(--verde-800);
  --accion-pulsado: var(--verde-900);
  --seleccion: var(--verde-200);
  --enlace: var(--verde-700);
  --foco: var(--verde-700);
  --marca: var(--verde-700);
  --dato-1: var(--verde-500);
  --dato-2: var(--indigo-500);
  --dato-3: var(--bronce-500);
  --dato-4: var(--azul-600);
  --dato-5: var(--ciruela-700);
  --dato-senal: var(--naranja-500);
  --dato-rejilla: var(--linea);
  --dato-eje: var(--linea-2);
  --dato-texto: var(--texto-2);
  --dato-otros: var(--neutro-300);
  --seq-verde-1: var(--verde-100);
  --seq-verde-2: var(--verde-300);
  --seq-verde-3: var(--verde-400);
  --seq-verde-4: var(--verde-500);
  --seq-verde-5: var(--verde-600);
  --seq-verde-6: var(--verde-700);
  --seq-verde-7: var(--verde-900);
  --seq-indigo-1: var(--indigo-100);
  --seq-indigo-2: var(--indigo-300);
  --seq-indigo-3: var(--indigo-400);
  --seq-indigo-4: var(--indigo-500);
  --seq-indigo-5: var(--indigo-600);
  --seq-indigo-6: var(--indigo-700);
  --seq-indigo-7: var(--indigo-900);
  --ord-verde-1: var(--verde-400);
  --ord-verde-2: var(--verde-500);
  --ord-verde-3: var(--verde-600);
  --ord-verde-4: var(--verde-700);
  --ord-verde-5: var(--verde-900);
  --div-desviacion-1: var(--naranja-500);
  --div-desviacion-2: var(--naranja-400);
  --div-desviacion-3: var(--naranja-300);
  --div-desviacion-4: var(--neutro-200);
  --div-desviacion-5: var(--verde-300);
  --div-desviacion-6: var(--verde-400);
  --div-desviacion-7: var(--verde-500);
  --div-comparacion-1: var(--bronce-500);
  --div-comparacion-2: var(--bronce-400);
  --div-comparacion-3: var(--bronce-300);
  --div-comparacion-4: var(--neutro-200);
  --div-comparacion-5: var(--indigo-300);
  --div-comparacion-6: var(--indigo-400);
  --div-comparacion-7: var(--indigo-500);
  --exito-fondo: var(--verde-50);
  --exito-borde: var(--verde-500);
  --exito-texto: var(--verde-700);
  --exito-icono: var(--verde-500);
  --aviso-fondo: var(--bronce-50);
  --aviso-borde: var(--bronce-500);
  --aviso-texto: var(--bronce-700);
  --aviso-icono: var(--bronce-500);
  --error-fondo: var(--rojo-50);
  --error-borde: var(--rojo-600);
  --error-texto: var(--rojo-700);
  --error-icono: var(--rojo-600);
  --info-fondo: var(--azul-50);
  --info-borde: var(--azul-600);
  --info-texto: var(--azul-700);
  --info-icono: var(--azul-600);
  --etq-verde-fondo: var(--verde-200);
  --etq-verde-texto: var(--verde-700);
  --etq-indigo-fondo: var(--indigo-200);
  --etq-indigo-texto: var(--indigo-700);
  --etq-azul-fondo: var(--azul-200);
  --etq-azul-texto: var(--azul-700);
  --etq-ciruela-fondo: var(--ciruela-200);
  --etq-ciruela-texto: var(--ciruela-700);
  --etq-bronce-fondo: var(--bronce-200);
  --etq-bronce-texto: var(--bronce-700);
  --etq-neutro-fondo: var(--neutro-200);
  --etq-neutro-texto: var(--neutro-700);
  --banda-piedra: var(--piedra-100);
  --banda-piedra-texto: var(--neutro-950);
  --banda-piedra-texto-2: var(--piedra-600);
  --velo: rgb(26 26 26 / .44);
}
.isla-oscura, .isla-clara { background: var(--fondo); color: var(--texto); }

/* ==== Contextos de banda: iguales en claro y en oscuro ==== */
.banda-verde {
  --fondo: var(--verde-700);
  --capa: var(--verde-800);
  --hundido: var(--verde-900);
  --texto: var(--neutro-0);            /* 9,43 */
  --texto-2: var(--neutro-300);        /* 5,90 */
  --texto-3: var(--neutro-400);        /* 4,28 */
  --linea: rgb(255 255 255 / .16);
  --linea-2: rgb(255 255 255 / .28);
  --linea-control: var(--neutro-400);
  --accion: var(--menta);
  --accion-texto: var(--verde-700);
  --accion-hover: #1BEA9E;
  --accion-pulsado: #17D38E;
  --enlace: var(--menta);
  --foco: var(--menta);
  --marca: var(--verde-50);
  --seleccion: var(--verde-900);
  /* Estados sobre verde: el paso 300 de cada familia (≥ 3:1 sobre verde-700) */
  --exito-fondo: var(--verde-800); --exito-borde: var(--verde-300); --exito-texto: var(--verde-300); --exito-icono: var(--verde-300);
  --aviso-fondo: var(--verde-800); --aviso-borde: var(--bronce-300); --aviso-texto: var(--bronce-300); --aviso-icono: var(--bronce-300);
  --error-fondo: var(--verde-800); --error-borde: var(--rojo-300); --error-texto: var(--rojo-300); --error-icono: var(--rojo-300);
  --info-fondo: var(--verde-800); --info-borde: var(--azul-300); --info-texto: var(--azul-300); --info-icono: var(--azul-300);
  color-scheme: dark;
}
/* Piedra: banda editorial, solo en claro. En claro, Piedra (piedra-100); dentro de una
   isla oscura, la banda oscura de piedra, Basalto (piedra-900). En el tema oscuro no hay
   piedra: la banda es neutra, con los roles del tema oscuro. */
.banda-piedra {
  --fondo: var(--piedra-100);
  --capa: var(--piedra-50);
  --hundido: var(--piedra-50);
  --texto: var(--neutro-950);          /* 14,80 */
  --texto-2: var(--piedra-600);        /* 4,80 */
  --texto-3: var(--piedra-500);
  --linea: var(--piedra-300);
  --linea-2: var(--piedra-300);
  --linea-control: var(--piedra-500);
  /* Registro cálido: sin menta. Verde de marca con texto piedra (8,77). */
  --accion: var(--verde-700);
  --accion-texto: var(--piedra-50);
  --accion-hover: var(--verde-800);
  --accion-pulsado: var(--verde-900);
  --enlace: var(--verde-700);
  --foco: var(--verde-700);
  --marca: var(--verde-700);
  --seleccion: var(--piedra-300);
  color-scheme: light;
}
/* La banda oscura de piedra, en claro: Basalto dentro de una isla oscura. Sin menta. */
.isla-oscura .banda-piedra {
  color-scheme: dark;
  --fondo: var(--piedra-900);
  --capa: var(--piedra-800);
  --hundido: var(--piedra-950);
  --texto: var(--piedra-50);
  --texto-2: var(--piedra-400);
  --texto-3: var(--piedra-500);
  --linea: var(--piedra-800);
  --linea-2: var(--piedra-700);
  --linea-control: var(--piedra-500);
  --accion: var(--piedra-100);
  --accion-texto: var(--verde-800);
  --accion-hover: var(--piedra-50);
  --accion-pulsado: var(--piedra-200);
  --enlace: var(--piedra-200);
  --foco: var(--piedra-100);
  --marca: var(--piedra-50);
  --seleccion: var(--piedra-700);
}
/* En el tema oscuro, la banda es neutra (también dentro de una isla oscura). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .banda-piedra {
    color-scheme: dark;
    --fondo: var(--neutro-900);
    --capa: var(--neutro-800);
    --hundido: var(--neutro-950);
    --texto: var(--neutro-50);
    --texto-2: var(--neutro-400);
    --texto-3: var(--neutro-500);
    --linea: #2D3636;
    --linea-2: #3C4646;
    --linea-control: var(--neutro-500);
    --accion: var(--menta);
    --accion-texto: var(--verde-700);
    --accion-hover: #1BEA9E;
    --accion-pulsado: #17D38E;
    --seleccion: var(--verde-800);
    --enlace: var(--menta);
    --foco: var(--menta);
    --marca: var(--verde-50);
  }
}
:root[data-theme="dark"] .banda-piedra {
  color-scheme: dark;
  --fondo: var(--neutro-900);
  --capa: var(--neutro-800);
  --hundido: var(--neutro-950);
  --texto: var(--neutro-50);
  --texto-2: var(--neutro-400);
  --texto-3: var(--neutro-500);
  --linea: #2D3636;
  --linea-2: #3C4646;
  --linea-control: var(--neutro-500);
  --accion: var(--menta);
  --accion-texto: var(--verde-700);
  --accion-hover: #1BEA9E;
  --accion-pulsado: #17D38E;
  --seleccion: var(--verde-800);
  --enlace: var(--menta);
  --foco: var(--menta);
  --marca: var(--verde-50);
}
/* Una banda piedra dentro de una isla clara sigue en claro aunque la página esté en oscuro (las muestras
   «Claro» de Color, también en una sola pieza: .isla-clara.banda-piedra). Son los roles de .banda-piedra:
   el build comprueba que dicen lo mismo (lib/valores.ts). Va después de las reglas del oscuro: con su misma
   especificidad, gana por orden. Solo en Color (#s-04), como hoy (wsc-sistema/secciones/s-04-color.css l. 26–49):
   en el resto del sistema, una banda piedra en oscuro es neutra también dentro de una isla clara (Clientes). */
:root #s-04 .isla-clara .banda-piedra, :root #s-04 .isla-clara.banda-piedra {
  color-scheme: light;
  --fondo: var(--piedra-100);
  --capa: var(--piedra-50);
  --hundido: var(--piedra-50);
  --texto: var(--neutro-950);
  --texto-2: var(--piedra-600);
  --texto-3: var(--piedra-500);
  --linea: var(--piedra-300);
  --linea-2: var(--piedra-300);
  --linea-control: var(--piedra-500);
  --accion: var(--verde-700);
  --accion-texto: var(--piedra-50);
  --accion-hover: var(--verde-800);
  --accion-pulsado: var(--verde-900);
  --enlace: var(--verde-700);
  --foco: var(--verde-700);
  --marca: var(--verde-700);
  --seleccion: var(--piedra-300);
}
.banda-capa { --fondo: var(--capa); }
.banda-verde, .banda-piedra, .banda-capa, body {
  background: var(--fondo);
  color: var(--texto);
}

/* ==== 6. Letra: familias, pasos y pesos · origen: css/tipo.css l. 40–73 ====
   Los siete pasos fluidos dependen de --cq (bloque 7): 1 % del ancho de la ventana (body) o
   de la página (.lienzo, .guia, .pagina-propia). */
:root {
  --f-haas: "Haas", "Haas respaldo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Diez pasos: los tres fijos; los siete fluidos, en el bloque siguiente */
  --t-rotulo: 12px;
  --t-nota: 13px;
  --t-menor: 15px;

  /* Pesos */
  --p-ligero: 300;
  --p-normal: 400;
  --p-medio: 500;
}
/* Los siete pasos fluidos respiran con el ancho de la página (--cq: la ventana fuera del
   contenido, en body; dentro, la página). Se declaran en cada sitio para que cada uno tome su --cq */
:root, body, :where(.lienzo, .guia, .pagina-propia) > * {
  --t-cuerpo: clamp(16px, 15.694px + 0.0816 * var(--cq), 17px);
  --t-destacado: clamp(18px, 17.388px + 0.1633 * var(--cq), 20px);
  --t-titulo-3: clamp(20px, 18.776px + 0.3265 * var(--cq), 24px);
  --t-titulo-2: clamp(28px, 25.551px + 0.6531 * var(--cq), 36px);
  --t-titulo-1: clamp(36px, 30.490px + 1.4694 * var(--cq), 54px);
  --t-cartel: clamp(48px, 39.429px + 2.2857 * var(--cq), 76px);
  --t-numero: clamp(54px, 42.367px + 3.1020 * var(--cq), 92px);
}

/* La interfaz (tarjetas, menú, filtro, tablas, preguntas, pie) no respira con la
   ventana: cada paso se queda en su cota menor. */
.interfaz {
  --t-cuerpo: 16px;
  --t-destacado: 18px;
  --t-titulo-3: 20px;
  --t-titulo-2: 28px;
}

/* ==== 7. Retícula y espacio · origen: css/reticula.css l. 23–86 ====
   Dos contenedores: «ventana» (html) para lo de fuera del contenido y «pagina» (.lienzo, .guia,
   .pagina-propia) para lo de dentro. Cortes 640 y 1024. Las reglas de colocación (.reticula,
   --s / --m / --l, composiciones) no son valores: van con la base (ver valores.md §4). */
/* La ventana: el ancho de html es el de la ventana sin la barra de desplazamiento */
html { container: ventana / inline-size; }

:root {
  --cq: 1vw;
  /* Tramo S (< 640): 4 columnas */
  --tramo: s;
  --cols: 4;
  --medianil: 16px;
  --margen: 24px;
  --contenedor: 1600px;

  /* Espacio: escala cerrada (px) */
  --e-4: 4px;
  --e-8: 8px;
  --e-12: 12px;
  --e-16: 16px;
  --e-24: 24px;
  --e-32: 32px;
  --e-48: 48px;
  --e-64: 64px;
  --e-96: 96px;
  --e-128: 128px;

  /* Módulos verticales */
  --e-grupo: var(--e-24);
  --e-bloque: var(--e-48);
  --e-seccion: clamp(64px, 8 * var(--cq), 128px);

  /* Medidas de lectura */
  --medida: 32em;
  --medida-entradilla: 28em;
}

/* Lo de fuera del contenido (cabecera, pie, avisos que cuelgan de body): tramo y escala de la
   ventana. Tramo S (< 640): 4 columnas; M (640–1023): 8; L (≥ 1024): 12 */
body {
  --cq: 1cqi;
  --e-seccion: clamp(64px, 8 * var(--cq), 128px);
}
@container ventana (min-width: 640px) {
  body { --tramo: m; --cols: 8; --medianil: 24px; --margen: 40px; }
}
@container ventana (min-width: 1024px) {
  body { --tramo: l; --cols: 12; --medianil: 32px; --margen: 48px; }
}

/* La página: el contenido (.lienzo) es un contenedor («pagina») y se compone con el ancho que
   tiene, con o sin menú al lado. También lo son la guía, que pinta las columnas de la página, y
   lo que va a pantalla completa dentro del contenido (.pagina-propia: la sala de «Presentar»),
   que se compone con la pantalla y no con el contenido de debajo. Sus hijos toman el tramo, las
   columnas y la escala fluida de su caja, con los mismos cortes: S < 640, M 640–1023, L ≥ 1024 */
.lienzo, .guia, .pagina-propia { container: pagina / inline-size; }
:where(.lienzo, .guia, .pagina-propia) > * {
  --cq: 1cqi;
  --tramo: s; --cols: 4; --medianil: 16px; --margen: 24px;
  --e-seccion: clamp(64px, 8 * var(--cq), 128px);
}
@container pagina (min-width: 640px) {
  :where(.lienzo, .guia, .pagina-propia) > * { --tramo: m; --cols: 8; --medianil: 24px; --margen: 40px; }
}
@container pagina (min-width: 1024px) {
  :where(.lienzo, .guia, .pagina-propia) > * { --tramo: l; --cols: 12; --medianil: 32px; --margen: 48px; }
}

/* ==== 8. Forma y trazo · origen: css/formas.css l. 6–16 ==== */
:root {
  --r: 4px;
  --r-s: 2px;
  --trazo: 1px;
  --trazo-foco: 2px;
  --foco-sep: 3px;
  --alto-m: 48px;
  --alto-s: 40px;
  --marco: var(--linea-2); /* borde de marcos de demostración: se resuelve con la línea de la página */
  --icono: 1.5; /* stroke-width en viewBox 24 = 0,0625 em ≈ asta de la Haas Light (0,062 em medido en la tipografía) */
}

/* ==== 9. Movimiento: tiempos, curvas, distancias y escalonado · origen: css/movimiento.css l. 8–42 ====
   Las recetas (.llega, .desliza, .traza, .crece, luz…), los @keyframes y la regla de «reducir
   movimiento» se quedan en movimiento.css (ver valores.md §3 y §4). */
:root {
  /* Tiempos (razón ≈ 1,5) */
  --m-t1: 100ms;
  --m-t2: 160ms;
  --m-t3: 240ms;
  --m-t4: 360ms;
  --m-encima: 560ms; /* respuesta larga: lo que se mueve al pasar el puntero (titular, imagen) */
  --m-t5: 720ms;   /* relato: más lento para que respire */
  --m-t6: 1120ms;
  --m-t7: 1680ms;

  /* Curvas */
  --m-ui: cubic-bezier(.2, 0, 0, 1);        /* respuesta */
  --m-sale: cubic-bezier(.16, 1, .3, 1);    /* entrada de relato (≤ 24 px) */
  --m-suave: cubic-bezier(.22, .61, .36, 1); /* fundidos */
  --m-traza: cubic-bezier(.45, .05, .2, 1); /* trazos y paneles */
  --m-va: cubic-bezier(.4, .14, 1, 1);      /* salidas */

  /* Distancias */
  --m-dy: 12px;
  --m-dx: min(.6em, 24px);

  /* Escalonado */
  --m-paso: 80ms;       /* portada */
  --m-paso-fino: 30ms;  /* listas */
  --m-paso-max: 600ms;
}
/* Fuera del contenido, las distancias siguen a la ventana; dentro, a la página */
@container ventana (max-width: 639px) {
  body { --m-dy: 8px; --m-dx: 0px; }
}
:where(.lienzo, .guia, .pagina-propia) > * { --m-dy: 12px; --m-dx: min(.6em, 24px); }
@container pagina (max-width: 639px) {
  :where(.lienzo, .guia, .pagina-propia) > * { --m-dy: 8px; --m-dx: 0px; }
}

/* ==== 10. Botón principal: sus valores por tema y contexto ====
   Origen: css/formas.css l. 155–246 (literal). Son de un componente, pero siguen el mismo
   mecanismo de tema que los roles; aquí, para que el oscuro viva en un solo sitio.
   Las @property --luz-giro / --luz-cola (formas.css l. 153–154) se quedan con el botón. */
:root {
  --bp-fondo: var(--verde-700);
  --bp-texto: var(--neutro-0);
  --bp-encima: var(--verde-800);
  --bp-pulsado: var(--verde-900);
  --bp-reposo: transparent;
  --bp-luz: var(--menta);
  --bpt-texto: var(--verde-700);
  --bpt-filo: var(--verde-700);
  --bpt-velo: var(--verde-700);
  --bpt-velo-a: 12%;
  --bpt-velo-p: 18%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bp-encima: var(--verde-600);
    --bp-pulsado: var(--verde-800);
    --bp-reposo: rgb(0 255 171 / .32);
    --bpt-texto: var(--neutro-0);
    --bpt-filo: var(--neutro-200);
    --bpt-velo: var(--neutro-0);
  }
}
:root[data-theme="dark"], .isla-oscura {
  --bp-fondo: var(--verde-700);
  --bp-texto: var(--neutro-0);
  --bp-encima: var(--verde-600);
  --bp-pulsado: var(--verde-800);
  --bp-reposo: rgb(0 255 171 / .32);
  --bp-luz: var(--menta);
  --bpt-texto: var(--neutro-0);
  --bpt-filo: var(--neutro-200);
  --bpt-velo: var(--neutro-0);
}
.isla-clara {
  --bp-fondo: var(--verde-700);
  --bp-texto: var(--neutro-0);
  --bp-encima: var(--verde-800);
  --bp-pulsado: var(--verde-900);
  --bp-reposo: transparent;
  --bp-luz: var(--menta);
  --bpt-texto: var(--verde-700);
  --bpt-filo: var(--verde-700);
  --bpt-velo: var(--verde-700);
}
.banda-verde {
  --bp-fondo: var(--verde-900);
  --bp-texto: var(--neutro-0);
  --bp-encima: var(--verde-950);
  --bp-pulsado: var(--verde-950);
  --bp-reposo: rgb(0 255 171 / .64);
  --bp-luz: var(--menta);
  --bpt-texto: var(--neutro-0);
  --bpt-filo: var(--neutro-200);
  --bpt-velo: var(--neutro-0);
}
.banda-piedra {
  --bp-fondo: var(--accion);
  --bp-texto: var(--accion-texto);
  --bp-encima: var(--accion-hover);
  --bp-pulsado: var(--accion-pulsado);
  --bp-reposo: transparent;
  --bp-luz: transparent;
  --bpt-texto: var(--accion);
  --bpt-filo: var(--accion);
  --bpt-velo: var(--accion);
}
/* En el tema oscuro la banda piedra es neutra: el botón del tema oscuro, con su luz */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .banda-piedra {
    --bp-fondo: var(--verde-700);
    --bp-texto: var(--neutro-0);
    --bp-encima: var(--verde-600);
    --bp-pulsado: var(--verde-800);
    --bp-reposo: rgb(0 255 171 / .32);
    --bp-luz: var(--menta);
    --bpt-texto: var(--neutro-0);
    --bpt-filo: var(--neutro-200);
    --bpt-velo: var(--neutro-0);
  }
}
:root[data-theme="dark"] .banda-piedra {
  --bp-fondo: var(--verde-700);
  --bp-texto: var(--neutro-0);
  --bp-encima: var(--verde-600);
  --bp-pulsado: var(--verde-800);
  --bp-reposo: rgb(0 255 171 / .32);
  --bp-luz: var(--menta);
  --bpt-texto: var(--neutro-0);
  --bpt-filo: var(--neutro-200);
  --bpt-velo: var(--neutro-0);
}

/* ==== 11. Carcasa (armazón): alto de la cabecera, ancho del menú, mandos y estado del menú ====
   Origen: css/herramienta.css l. 10–20 y l. 30–42 (literal). especimen.css l. 7 dice
   --alto-cabecera: 64px, pero herramienta.css se carga la última y manda: 56. */
:root {
  --alto-cabecera: 56px;    /* sin su filete: los topes de lo que se pega suman --trazo. 56: aire arriba y
                               abajo de los mandos (8 con el ratón, 6 con el dedo) sin robar alto a la página.
                               La web lleva más (76, Composición web): allí la cabecera tiene menos que hacer */
  --ancho-menu: 256px;
  /* Los mandos de la cabecera (menú, buscar, campo, retícula, tema): una sola altura, centrada en
     los 56; 44 con el dedo. --aire-icono: lo que queda a cada lado de un icono de 20 en su botón */
  --mando: 40px;
  --aire-icono: calc((var(--mando) - 20px) / 2);
}
@media (pointer: coarse) { :root { --mando: 44px; } }
/* Cuánto ocupa el menú fijo a la izquierda: 0 mientras es panel. Lo leen la guía de la retícula,
   el aviso del cuentagotas y herramienta.js (el JS no repite el corte) */
/* Registradas para que se animen: al fijar o quitar el menú se mueve una sola medida y la siguen el
   menú, la retícula de la página, la cabecera y la guía de columnas */
@property --menu-visible { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --menu-fijo { syntax: '<number>'; inherits: true; initial-value: 0; }
body { --menu-visible: 0px; --menu-fijo: 0; --menu-cabe: 0; }
/* Desde 1280 el menú cabe fijo a la izquierda y empieza siempre abierto; se cierra con el mismo botón
   (html[data-menu="cerrado"], solo mientras dura la visita) */
@container ventana (min-width: 1280px) {
  body { --menu-cabe: 1; }
  html:not([data-menu="cerrado"]) body { --menu-visible: var(--ancho-menu); --menu-fijo: 1; }
}

/* ==== 12. Piezas: colores que el CSS de hoy pedía por primitiva, ahora con nombre ====
   Mismos valores que hoy: reticula.css l. 185 (.guia), formas.css l. 733–734 (.cuentagotas) y
   movimiento.css l. 232 (.banda-cambia). No cambian con el tema: la guía es una luz, el icono del
   cuentagotas elige blanco o Tinta por contraste con la muestra (lo decide especimen.js) */
:root {
  --guia-columna: color-mix(in oklab, var(--menta) 14%, transparent);
  --cuentagotas-blanco: var(--neutro-0);
  --cuentagotas-tinta: var(--neutro-950);
  --banda-cambia: var(--verde-700);
}

/* ==========================================================================
   PENDIENTE Y AVISOS
   1. Quién manda en el color (lo decide Javier): este fichero o paleta/final/generar.py del sistema
      actual. Mientras se decide, un cambio de color se hace aquí y en el sistema actual a la vez.
   2. Cada rol va escrito varias veces, porque lo obliga el mecanismo de tema: en claro, :root y
      .isla-clara; en oscuro, el @media, [data-theme="dark"] y .isla-oscura; la banda piedra, en sus
      bloques (también dentro de una isla clara, bloque 5). Si cambias uno, cámbialo en todos: si no, el
      build para y dice dónde (lib/valores.ts). También para si el texto baja de AA (lib/contraste.ts).
      Las cifras de los comentarios (HEX y contrastes) van a mano: corrígelas.
   3. --naranja (= --naranja-500), --rojo y --e-grupo no se usan con var(); --tramo solo lo lee el JS.
      Se quedan porque son del sistema.
   ========================================================================== */