/* ==========================================================================
   Trevol · Colores · versión 2.0.0 · fase 03 v2 (10 de octubre de 2026)
   Generado desde assets/color/trevol-colores.json con 03-sistema/v2/sintesis-paleta-tokens.py.
   No se edita a mano: se cambia el JSON y se vuelve a generar.
   Contraste WCAG 2.x verificado en los cuatro temas (03-sistema/v2/sintesis-paleta.md, sección 5).

   Paleta v2: verdes vivos al estilo QuickBooks, neutros fríos y nada de pasteles.
   Ojo con dos nombres: --trevol-marca es el Verde Trevol del logotipo (#179B08);
   --trevol-verde es el Verde acción de botones e indicadores (#118305).

   Capas:
   1. Primitivos con nombre de marca (--trevol-*): no cambian con el tema.
   2. Semánticos (--color-*): cambian con el tema. Los componentes solo usan estos.
   3. Puente con el sistema de diseño del producto (20-SISTEMA §2.2): mismos valores con los nombres que ya usan los componentes.

   Temas: claro por defecto; oscuro con prefers-color-scheme o data-theme="dark";
   más contraste con prefers-contrast: more, o con data-contrast="more" junto a un data-theme explícito.
   data-theme también funciona en una sección (por ejemplo, un bloque oscuro dentro de una página clara).
   ========================================================================== */

/* 1. Primitivos de marca */
:root {

  /* Verdes de la marca */
  --trevol-marca: #179B08;  /* Verde Trevol: logotipo, ícono de app, favicon, ilustración y bloques grandes de marca. Encima solo van el trébol y las letras en Blanco y titulares de 24 px o más (3,67:1). Nunca texto, botón ni texto blanco pequeño. */
  --trevol-verde: #118305;  /* Verde acción: botón primario (texto Blanco 4,92:1), indicador de selección, serie única de gráficos y "trevol.si" sobre Blanco. Como texto, solo sobre Blanco; el texto de éxito usa verde-hover. */
  --trevol-verde-hover: #117208;  /* Hover del botón primario y texto e ícono de éxito ("Pagada", "Validada por la DIAN"): 6,11:1 sobre Blanco y 5,22:1 en la fila alterna con hover. */
  --trevol-verde-presionado: #0E6506;  /* Botón primario presionado (7,28:1). En el tema claro con más contraste: botón primario y éxito. */
  --trevol-selva: #07550C;  /* Selva: lo seleccionado (ítem activo de la barra lateral y fila con foco, con texto Blanco 9,08:1), círculos de los íconos de módulo, superficies oscuras de marca y titulares en verde (8,33:1 sobre Niebla). Con moderación: no es fondo dominante del producto. */
  --trevol-chispa: #65E468;  /* Chispa: solo sobre oscuro. Botón, éxito e indicador del modo oscuro (texto Grafito encima, 9,18:1), "trevol.si" sobre Selva (5,55:1), glifos de los íconos de módulo y variante oscura del ícono de iOS. Nunca texto ni fondo sobre claro, ni sobre Verde Trevol. */
  --trevol-chispa-hover: #73F275;  /* Hover del botón primario en modo oscuro (texto Grafito 10,49:1). Paso funcional, no es color de piezas. */
  --trevol-chispa-presionado: #53D358;  /* Botón primario presionado en modo oscuro (texto Grafito 7,73:1). Paso funcional. */

  /* Neutros fríos del lado claro */
  --trevol-blanco: #FFFFFF;  /* Superficie de trabajo: tarjetas, tablas, formularios y factura. Letras y trébol sobre Verde Trevol, Verde acción y Selva. */
  --trevol-niebla: #F4F5F8;  /* Fondo de página y barra lateral, buscador, fila alterna. Reemplaza a Papel. */
  --trevol-bruma: #E9ECEF;  /* Hover y presionado sobre Niebla (barra lateral, píldoras), selección sin foco, cuadrícula de tablas y fondo bajo la vista previa de la factura. */
  --trevol-plata: #D4D7DC;  /* Bordes de tarjetas y píldoras, separadores. Estructura, no control: nunca el único borde de un campo. */
  --trevol-acero: #7C818A;  /* Borde de campos y del botón secundario (3,91:1 sobre Blanco, 3,59:1 sobre Niebla, 3,30:1 sobre Bruma), íconos inactivos y texto deshabilitado. */
  --trevol-pizarra: #5A5F67;  /* Texto secundario y terciario, etiquetas, encabezados de columna, marcador de posición y estado neutro (Borrador, Enviada a la DIAN). */
  --trevol-pizarra-profunda: #3B3F47;  /* Texto secundario, encabezados y estado neutro del tema claro con más contraste (10,56:1). Paso funcional. */
  --trevol-grafito: #24272B;  /* Texto principal, cifras e importes (15,00:1); logotipo a una tinta; texto sobre Chispa y sobre el resaltado de búsqueda. */

  /* Señales del producto: enlace, aviso y error (y sus variantes de tema) */
  --trevol-azul: #056DB5;  /* Azul Enlace: enlaces (subrayados dentro de un texto), información y anillo de foco con 2 px de separación blanca. */
  --trevol-mandarina: #AB4F01;  /* Mandarina: aviso (por vencer, revisar, descuadre por resolver), siempre con ícono y texto. */
  --trevol-aji: #9F010D;  /* Ají: error, rechazada, vencida, importes negativos (≥ 7:1 en todas las filas) y acción destructiva (texto Blanco 8,45:1). */
  --trevol-azul-claro: #4DABFD;  /* Enlace, información y foco en modo oscuro (6,18:1 sobre noche-800). */
  --trevol-mandarina-clara: #FE8612;  /* Aviso en modo oscuro (6,24:1 sobre noche-800). */
  --trevol-aji-claro: #FE6258;  /* Error en modo oscuro (texto e ícono de estado; insignia con texto Grafito 5,07:1): rojo vivo, ≥ 4,5:1 sobre todas las superficies oscuras. No se usa en cifras: en oscuro los importes negativos van en el color de texto con su signo. */
  --trevol-azul-profundo: #034F86;  /* Enlace, información y foco del tema claro con más contraste (8,51:1). */
  --trevol-mandarina-profunda: #904204;  /* Aviso del tema claro con más contraste (≥ 7:1 sobre Blanco). */
  --trevol-resaltado-busqueda: #FFD21F;  /* Coincidencias de búsqueda en tablas (claro). Amarillo vivo, no pálido. El texto encima siempre es Grafito (10,35:1). Funcional, no de marca. */
  --trevol-resaltado-busqueda-oscuro: #E6B800;  /* Coincidencias de búsqueda en oscuro. El texto encima siempre es Grafito (8,01:1). */

  /* Noche · neutros fríos del modo oscuro */
  --trevol-noche-950: #101214;  /* Ventana y cromo en oscuro; contenido del oscuro con más contraste. */
  --trevol-noche-900: #17191C;  /* Contenido en oscuro (tablas, formularios). */
  --trevol-noche-850: #1E2023;  /* Fila alterna y paneles en oscuro. */
  --trevol-noche-800: #242629;  /* Menús, popovers y hojas en oscuro; cuadrícula. */
  --trevol-noche-700: #34373B;  /* Separadores y selección sin foco en oscuro. */
  --trevol-noche-500: #777C83;  /* Bordes de control en oscuro (≥ 3:1); deshabilitado. No es texto. */
  --trevol-noche-300: #9EA3AB;  /* Texto terciario y marcador de posición en oscuro (5,98:1 sobre noche-800); bordes en oscuro con más contraste. */
  --trevol-noche-200: #B3B8BF;  /* Texto secundario, encabezados y estado neutro en oscuro (8,83:1 sobre noche-900). */

  /* Estados: color de texto e ícono por tema (sin fondos tintados desde la v2) */
  --trevol-exito: var(--trevol-verde-hover);  /* Texto e ícono de éxito en claro. */
  --trevol-exito-oscuro: var(--trevol-chispa);  /* Texto e ícono de éxito en oscuro. */
  --trevol-exito-mas-contraste: var(--trevol-verde-presionado);  /* Éxito en el claro con más contraste. */
  --trevol-exito-oscuro-mas-contraste: var(--trevol-chispa);  /* Éxito en el oscuro con más contraste. */
  --trevol-aviso: var(--trevol-mandarina);  /* Texto e ícono de aviso en claro. */
  --trevol-aviso-oscuro: var(--trevol-mandarina-clara);  /* Texto e ícono de aviso en oscuro. */
  --trevol-aviso-mas-contraste: var(--trevol-mandarina-profunda);  /* Aviso en el claro con más contraste. */
  --trevol-aviso-oscuro-mas-contraste: var(--trevol-mandarina-clara);  /* Aviso en el oscuro con más contraste. */
  --trevol-error: var(--trevol-aji);  /* Texto e ícono de error en claro. */
  --trevol-error-oscuro: var(--trevol-aji-claro);  /* Texto e ícono de error en oscuro. */
  --trevol-error-mas-contraste: var(--trevol-aji);  /* Error en el claro con más contraste. */
  --trevol-error-oscuro-mas-contraste: var(--trevol-aji-claro);  /* Error en el oscuro con más contraste. */
  --trevol-info: var(--trevol-azul);  /* Texto e ícono de información en claro. */
  --trevol-info-oscuro: var(--trevol-azul-claro);  /* Información en oscuro. */
  --trevol-info-mas-contraste: var(--trevol-azul-profundo);  /* Información en el claro con más contraste. */
  --trevol-info-oscuro-mas-contraste: var(--trevol-azul-claro);  /* Información en el oscuro con más contraste. */
  --trevol-neutro: var(--trevol-pizarra);  /* Estado neutro (Borrador, Enviada a la DIAN, Anulado) en claro. */
  --trevol-neutro-oscuro: var(--trevol-noche-200);  /* Estado neutro en oscuro. */
  --trevol-neutro-mas-contraste: var(--trevol-pizarra-profunda);  /* Estado neutro en el claro con más contraste. */
  --trevol-neutro-oscuro-mas-contraste: var(--trevol-bruma);  /* Estado neutro en el oscuro con más contraste. */

  /* Motivo gráfico (decorativo, ≤ 1,25:1) */
  --trevol-motivo-trama-sobre-verde: #0F8F00;  /* Trama de tréboles sobre Verde Trevol (1,16:1). Decorativa. */
  --trevol-motivo-trama-sobre-selva: #126115;  /* Trama de tréboles sobre Selva (1,19:1). Decorativa. */
  --trevol-motivo-trama-sobre-niebla: var(--trevol-bruma);  /* Trama de tréboles sobre Niebla (1,09:1). Decorativa. */
  --trevol-motivo-cuadricula: var(--trevol-bruma);  /* Cuadrícula del contador sobre Blanco (1,19:1). Decorativa. */

  /* Ilustración · tonos de piel (solo en ilustración) */
  --trevol-ilustracion-piel-1: #F1D2BC;  /* Tono de piel 1 de 6. Solo en ilustración: nunca texto, fondo ni estado. El más claro. */
  --trevol-ilustracion-piel-2: #DDAF8C;  /* Tono de piel 2 de 6. Solo en ilustración: nunca texto, fondo ni estado. */
  --trevol-ilustracion-piel-3: #C08A64;  /* Tono de piel 3 de 6. Solo en ilustración: nunca texto, fondo ni estado. */
  --trevol-ilustracion-piel-4: #8C5A3C;  /* Tono de piel 4 de 6. Solo en ilustración: nunca texto, fondo ni estado. */
  --trevol-ilustracion-piel-5: #6B4229;  /* Tono de piel 5 de 6. Solo en ilustración: nunca texto, fondo ni estado. */
  --trevol-ilustracion-piel-6: #4A2C1C;  /* Tono de piel 6 de 6. Solo en ilustración: nunca texto, fondo ni estado. El más oscuro. */
}

/* 2. Semánticos · tema claro (por defecto) */
:root,
[data-theme="light"] {
  color-scheme: light;
  --color-fondo-ventana: var(--trevol-niebla);  /* Cromo: barra lateral, barra superior con el buscador, barra de estado. */
  --color-fondo-contenido: var(--trevol-blanco);  /* Tablas, formularios, tarjetas y documentos. */
  --color-fila-alterna: var(--trevol-niebla);  /* Cebra de tablas anchas. */
  --color-superficie-elevada: var(--trevol-blanco);  /* Paneles e inspector. */
  --color-superficie-flotante: var(--trevol-blanco);  /* Menús, popovers y hojas. */
  --color-fondo-bajo-pagina: var(--trevol-bruma);  /* Detrás de la vista previa de factura o PDF. */
  --color-fila-hover: rgb(36 39 43 / 0.04);  /* Tinte neutro de hover en filas (nunca un verde con opacidad). */
  --color-velo: rgb(36 39 43 / 0.25);  /* Atenuación bajo hojas y alertas. */
  --color-texto: var(--trevol-grafito);  /* Texto principal, cifras e importes. */
  --color-texto-secundario: var(--trevol-pizarra);  /* Texto secundario. */
  --color-texto-terciario: var(--trevol-pizarra);  /* Texto terciario y metadatos. En claro coincide con el secundario: la jerarquía la dan el tamaño y el peso. */
  --color-texto-cuaternario: var(--trevol-acero);  /* Solo decorativo. La marca de agua "BORRADOR" lo usa únicamente si el estado se repite legible en otra parte y va con aria-hidden. */
  --color-texto-marcador: var(--trevol-pizarra);  /* Ejemplos dentro de los campos. */
  --color-texto-encabezado: var(--trevol-pizarra);  /* Encabezados de columna. */
  --color-texto-deshabilitado: var(--trevol-acero);  /* Deshabilitado: exento de WCAG 1.4.3. El motivo va visible o en un control enfocable asociado, nunca solo en un tooltip. */
  --color-cuadricula: var(--trevol-bruma);  /* Líneas de cuadrícula de tablas (decorativas; con más contraste, ≥ 3:1). */
  --color-separador: var(--trevol-plata);  /* Separadores de sección y bordes de tarjeta. */
  --color-borde-control: var(--trevol-acero);  /* Borde de campos y botones secundarios (≥ 3:1). */
  --color-accion: var(--trevol-verde);  /* Relleno del botón primario. En oscuro, Chispa con texto Grafito: con texto blanco, el Verde acción da 3,09:1 de silueta sobre un popover oscuro en reposo, pero su hover y su presionado bajan a 2,48 y 2,08:1. */
  --color-accion-hover: var(--trevol-verde-hover);  /* Hover del botón primario. */
  --color-accion-presionada: var(--trevol-verde-presionado);  /* Botón primario presionado. */
  --color-texto-sobre-accion: var(--trevol-blanco);  /* Texto e ícono sobre el botón primario. */
  --color-enlace: var(--trevol-azul);  /* Enlaces a comprobantes, terceros y reportes. Azules, como en QuickBooks; subrayados dentro de un texto. */
  --color-seleccion: var(--trevol-selva);  /* Fila seleccionada en el panel con foco e ítem activo de la barra lateral: Selva. */
  --color-texto-seleccion: var(--trevol-blanco);  /* Texto de lo seleccionado con foco: Blanco, también los estados, los enlaces y los negativos (con su ícono y su signo). */
  --color-seleccion-indicador: var(--trevol-verde);  /* Barra de 3 px en el borde inicial de la fila seleccionada (en oscuro el relleno no contrasta 3:1). */
  --color-seleccion-sin-foco: var(--trevol-bruma);  /* Fila seleccionada cuando el foco está en otro panel. */
  --color-seleccion-sin-foco-indicador: var(--trevol-pizarra);  /* Barra de 3 px de la selección sin foco. */
  --color-texto-seleccion-sin-foco: var(--trevol-grafito);  /* Texto de la selección sin foco. Los estados y los importes negativos de esa fila también van en este color, con su ícono y su signo. */
  --color-foco: var(--trevol-azul);  /* Anillo de foco de 2 px, separado 2 px del componente (separación Blanco en claro). */
  --color-foco-sobre-seleccion: var(--trevol-blanco);  /* Anillo de foco dentro de lo seleccionado. */
  --color-foco-sobre-marca: var(--trevol-blanco);  /* Anillo de foco sobre Verde Trevol y Selva. Sobre Selva también sirve Chispa (5,55:1); sobre Verde Trevol, solo Blanco. */
  --color-resaltado-busqueda: var(--trevol-resaltado-busqueda);  /* Coincidencias de búsqueda. */
  --color-texto-resaltado-busqueda: var(--trevol-grafito);  /* Texto sobre el resaltado: siempre Grafito. */
  --color-exito: var(--trevol-exito);  /* Éxito: texto e ícono. */
  --color-exito-fondo: var(--trevol-blanco);  /* Sin tinte desde la v2: la superficie del tema. */
  --color-aviso: var(--trevol-aviso);  /* Aviso: texto e ícono. */
  --color-aviso-fondo: var(--trevol-blanco);  /* Sin tinte desde la v2: la superficie del tema. */
  --color-error: var(--trevol-error);  /* Error: texto e ícono. */
  --color-error-fondo: var(--trevol-blanco);  /* Sin tinte desde la v2: la superficie del tema. */
  --color-info: var(--trevol-info);  /* Información: texto e ícono. */
  --color-info-fondo: var(--trevol-blanco);  /* Sin tinte desde la v2: la superficie del tema. */
  --color-neutro: var(--trevol-neutro);  /* Neutro: texto e ícono. */
  --color-neutro-fondo: var(--trevol-blanco);  /* Sin tinte desde la v2: la superficie del tema. */
  --color-importe-negativo: var(--trevol-error);  /* Importes cuyo valor es negativo (nota crédito, saldo a favor, pérdida), siempre con signo menos o paréntesis. No se aplica a las restas dentro de una liquidación, como las retenciones y los descuentos de una factura: esas van en el color de texto, con «−». En claro, Ají (≥ 7:1 en toda fila). En oscuro, el color de texto: un rojo que llegue a 7:1 sobre gris oscuro solo puede ser salmón. Dentro de una fila seleccionada van en el color de texto de la selección. */
  --color-texto-sobre-error: var(--trevol-blanco);  /* Insignia crítica y botón destructivo: texto sobre el color de error. */
  --color-superficie-marca: var(--trevol-marca);  /* Bloques de marca en Verde Trevol: encima solo logotipo, trébol y titulares Blanco de 24 px o más. */
  --color-superficie-marca-profunda: var(--trevol-selva);  /* Bloques oscuros de marca en Selva: aquí sí va texto corrido en Blanco. */
  --color-texto-sobre-marca: var(--trevol-blanco);  /* Texto sobre superficies de marca. Sobre Verde Trevol, solo titulares de 24 px o más (3,67:1); el texto corrido en Blanco va sobre Selva (9,08:1). */
  --color-logo: var(--trevol-marca);  /* Letras del logotipo según el fondo. */
  --color-logo-trebol: var(--trevol-marca);  /* Trébol del logotipo según el fondo. El negativo va todo en Blanco. */
}

/* 2b. Semánticos · tema oscuro: por preferencia del sistema o explícito */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-fondo-ventana: var(--trevol-noche-950);
    --color-fondo-contenido: var(--trevol-noche-900);
    --color-fila-alterna: var(--trevol-noche-850);
    --color-superficie-elevada: var(--trevol-noche-850);
    --color-superficie-flotante: var(--trevol-noche-800);
    --color-fondo-bajo-pagina: var(--trevol-noche-950);
    --color-fila-hover: rgb(244 245 248 / 0.05);
    --color-velo: rgb(16 18 20 / 0.55);
    --color-texto: var(--trevol-niebla);
    --color-texto-secundario: var(--trevol-noche-200);
    --color-texto-terciario: var(--trevol-noche-300);
    --color-texto-cuaternario: var(--trevol-noche-500);
    --color-texto-marcador: var(--trevol-noche-300);
    --color-texto-encabezado: var(--trevol-noche-200);
    --color-texto-deshabilitado: var(--trevol-noche-500);
    --color-cuadricula: var(--trevol-noche-800);
    --color-separador: var(--trevol-noche-700);
    --color-borde-control: var(--trevol-noche-500);
    --color-accion: var(--trevol-chispa);
    --color-accion-hover: var(--trevol-chispa-hover);
    --color-accion-presionada: var(--trevol-chispa-presionado);
    --color-texto-sobre-accion: var(--trevol-grafito);
    --color-enlace: var(--trevol-azul-claro);
    --color-seleccion: var(--trevol-selva);
    --color-texto-seleccion: var(--trevol-blanco);
    --color-seleccion-indicador: var(--trevol-chispa);
    --color-seleccion-sin-foco: var(--trevol-noche-700);
    --color-seleccion-sin-foco-indicador: var(--trevol-noche-300);
    --color-texto-seleccion-sin-foco: var(--trevol-niebla);
    --color-foco: var(--trevol-azul-claro);
    --color-foco-sobre-seleccion: var(--trevol-blanco);
    --color-foco-sobre-marca: var(--trevol-blanco);
    --color-resaltado-busqueda: var(--trevol-resaltado-busqueda-oscuro);
    --color-texto-resaltado-busqueda: var(--trevol-grafito);
    --color-exito: var(--trevol-exito-oscuro);
    --color-exito-fondo: var(--trevol-noche-900);
    --color-aviso: var(--trevol-aviso-oscuro);
    --color-aviso-fondo: var(--trevol-noche-900);
    --color-error: var(--trevol-error-oscuro);
    --color-error-fondo: var(--trevol-noche-900);
    --color-info: var(--trevol-info-oscuro);
    --color-info-fondo: var(--trevol-noche-900);
    --color-neutro: var(--trevol-neutro-oscuro);
    --color-neutro-fondo: var(--trevol-noche-900);
    --color-importe-negativo: var(--trevol-niebla);
    --color-texto-sobre-error: var(--trevol-grafito);
    --color-superficie-marca: var(--trevol-marca);
    --color-superficie-marca-profunda: var(--trevol-selva);
    --color-texto-sobre-marca: var(--trevol-blanco);
    --color-logo: var(--trevol-blanco);
    --color-logo-trebol: var(--trevol-blanco);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-fondo-ventana: var(--trevol-noche-950);
  --color-fondo-contenido: var(--trevol-noche-900);
  --color-fila-alterna: var(--trevol-noche-850);
  --color-superficie-elevada: var(--trevol-noche-850);
  --color-superficie-flotante: var(--trevol-noche-800);
  --color-fondo-bajo-pagina: var(--trevol-noche-950);
  --color-fila-hover: rgb(244 245 248 / 0.05);
  --color-velo: rgb(16 18 20 / 0.55);
  --color-texto: var(--trevol-niebla);
  --color-texto-secundario: var(--trevol-noche-200);
  --color-texto-terciario: var(--trevol-noche-300);
  --color-texto-cuaternario: var(--trevol-noche-500);
  --color-texto-marcador: var(--trevol-noche-300);
  --color-texto-encabezado: var(--trevol-noche-200);
  --color-texto-deshabilitado: var(--trevol-noche-500);
  --color-cuadricula: var(--trevol-noche-800);
  --color-separador: var(--trevol-noche-700);
  --color-borde-control: var(--trevol-noche-500);
  --color-accion: var(--trevol-chispa);
  --color-accion-hover: var(--trevol-chispa-hover);
  --color-accion-presionada: var(--trevol-chispa-presionado);
  --color-texto-sobre-accion: var(--trevol-grafito);
  --color-enlace: var(--trevol-azul-claro);
  --color-seleccion: var(--trevol-selva);
  --color-texto-seleccion: var(--trevol-blanco);
  --color-seleccion-indicador: var(--trevol-chispa);
  --color-seleccion-sin-foco: var(--trevol-noche-700);
  --color-seleccion-sin-foco-indicador: var(--trevol-noche-300);
  --color-texto-seleccion-sin-foco: var(--trevol-niebla);
  --color-foco: var(--trevol-azul-claro);
  --color-foco-sobre-seleccion: var(--trevol-blanco);
  --color-foco-sobre-marca: var(--trevol-blanco);
  --color-resaltado-busqueda: var(--trevol-resaltado-busqueda-oscuro);
  --color-texto-resaltado-busqueda: var(--trevol-grafito);
  --color-exito: var(--trevol-exito-oscuro);
  --color-exito-fondo: var(--trevol-noche-900);
  --color-aviso: var(--trevol-aviso-oscuro);
  --color-aviso-fondo: var(--trevol-noche-900);
  --color-error: var(--trevol-error-oscuro);
  --color-error-fondo: var(--trevol-noche-900);
  --color-info: var(--trevol-info-oscuro);
  --color-info-fondo: var(--trevol-noche-900);
  --color-neutro: var(--trevol-neutro-oscuro);
  --color-neutro-fondo: var(--trevol-noche-900);
  --color-importe-negativo: var(--trevol-niebla);
  --color-texto-sobre-error: var(--trevol-grafito);
  --color-superficie-marca: var(--trevol-marca);
  --color-superficie-marca-profunda: var(--trevol-selva);
  --color-texto-sobre-marca: var(--trevol-blanco);
  --color-logo: var(--trevol-blanco);
  --color-logo-trebol: var(--trevol-blanco);
}

/* 2c. Más contraste · claro (solo lo que cambia).
   Se activa por preferencia del sistema o con data-contrast="more" en un ancestro o en el mismo elemento. */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-texto-secundario: var(--trevol-pizarra-profunda);
    --color-texto-terciario: var(--trevol-pizarra-profunda);
    --color-texto-encabezado: var(--trevol-pizarra-profunda);
    --color-cuadricula: var(--trevol-acero);
    --color-separador: var(--trevol-pizarra);
    --color-borde-control: var(--trevol-pizarra);
    --color-accion: var(--trevol-verde-presionado);
    --color-accion-hover: var(--trevol-selva);
    --color-accion-presionada: var(--trevol-selva);
    --color-enlace: var(--trevol-azul-profundo);
    --color-seleccion-indicador: var(--trevol-selva);
    --color-seleccion-sin-foco: var(--trevol-plata);
    --color-seleccion-sin-foco-indicador: var(--trevol-pizarra-profunda);
    --color-foco: var(--trevol-azul-profundo);
    --color-exito: var(--trevol-exito-mas-contraste);
    --color-aviso: var(--trevol-aviso-mas-contraste);
    --color-error: var(--trevol-error-mas-contraste);
    --color-info: var(--trevol-info-mas-contraste);
    --color-neutro: var(--trevol-neutro-mas-contraste);
    --color-importe-negativo: var(--trevol-error-mas-contraste);
  }
}
@media (prefers-color-scheme: light) {
  :root[data-contrast="more"]:not([data-theme="dark"]) {
    --color-texto-secundario: var(--trevol-pizarra-profunda);
    --color-texto-terciario: var(--trevol-pizarra-profunda);
    --color-texto-encabezado: var(--trevol-pizarra-profunda);
    --color-cuadricula: var(--trevol-acero);
    --color-separador: var(--trevol-pizarra);
    --color-borde-control: var(--trevol-pizarra);
    --color-accion: var(--trevol-verde-presionado);
    --color-accion-hover: var(--trevol-selva);
    --color-accion-presionada: var(--trevol-selva);
    --color-enlace: var(--trevol-azul-profundo);
    --color-seleccion-indicador: var(--trevol-selva);
    --color-seleccion-sin-foco: var(--trevol-plata);
    --color-seleccion-sin-foco-indicador: var(--trevol-pizarra-profunda);
    --color-foco: var(--trevol-azul-profundo);
    --color-exito: var(--trevol-exito-mas-contraste);
    --color-aviso: var(--trevol-aviso-mas-contraste);
    --color-error: var(--trevol-error-mas-contraste);
    --color-info: var(--trevol-info-mas-contraste);
    --color-neutro: var(--trevol-neutro-mas-contraste);
    --color-importe-negativo: var(--trevol-error-mas-contraste);
  }
}
@media (prefers-contrast: more) {
  [data-theme="light"] {
    --color-texto-secundario: var(--trevol-pizarra-profunda);
    --color-texto-terciario: var(--trevol-pizarra-profunda);
    --color-texto-encabezado: var(--trevol-pizarra-profunda);
    --color-cuadricula: var(--trevol-acero);
    --color-separador: var(--trevol-pizarra);
    --color-borde-control: var(--trevol-pizarra);
    --color-accion: var(--trevol-verde-presionado);
    --color-accion-hover: var(--trevol-selva);
    --color-accion-presionada: var(--trevol-selva);
    --color-enlace: var(--trevol-azul-profundo);
    --color-seleccion-indicador: var(--trevol-selva);
    --color-seleccion-sin-foco: var(--trevol-plata);
    --color-seleccion-sin-foco-indicador: var(--trevol-pizarra-profunda);
    --color-foco: var(--trevol-azul-profundo);
    --color-exito: var(--trevol-exito-mas-contraste);
    --color-aviso: var(--trevol-aviso-mas-contraste);
    --color-error: var(--trevol-error-mas-contraste);
    --color-info: var(--trevol-info-mas-contraste);
    --color-neutro: var(--trevol-neutro-mas-contraste);
    --color-importe-negativo: var(--trevol-error-mas-contraste);
  }
}
[data-contrast="more"][data-theme="light"],
[data-contrast="more"] [data-theme="light"] {
  --color-texto-secundario: var(--trevol-pizarra-profunda);
  --color-texto-terciario: var(--trevol-pizarra-profunda);
  --color-texto-encabezado: var(--trevol-pizarra-profunda);
  --color-cuadricula: var(--trevol-acero);
  --color-separador: var(--trevol-pizarra);
  --color-borde-control: var(--trevol-pizarra);
  --color-accion: var(--trevol-verde-presionado);
  --color-accion-hover: var(--trevol-selva);
  --color-accion-presionada: var(--trevol-selva);
  --color-enlace: var(--trevol-azul-profundo);
  --color-seleccion-indicador: var(--trevol-selva);
  --color-seleccion-sin-foco: var(--trevol-plata);
  --color-seleccion-sin-foco-indicador: var(--trevol-pizarra-profunda);
  --color-foco: var(--trevol-azul-profundo);
  --color-exito: var(--trevol-exito-mas-contraste);
  --color-aviso: var(--trevol-aviso-mas-contraste);
  --color-error: var(--trevol-error-mas-contraste);
  --color-info: var(--trevol-info-mas-contraste);
  --color-neutro: var(--trevol-neutro-mas-contraste);
  --color-importe-negativo: var(--trevol-error-mas-contraste);
}

/* 2d. Más contraste · oscuro (solo lo que cambia) */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-fondo-contenido: var(--trevol-noche-950);
    --color-fila-alterna: var(--trevol-noche-900);
    --color-superficie-elevada: var(--trevol-noche-900);
    --color-superficie-flotante: var(--trevol-noche-850);
    --color-texto: var(--trevol-blanco);
    --color-texto-secundario: var(--trevol-bruma);
    --color-texto-terciario: var(--trevol-plata);
    --color-texto-marcador: var(--trevol-plata);
    --color-texto-encabezado: var(--trevol-bruma);
    --color-cuadricula: var(--trevol-noche-500);
    --color-separador: var(--trevol-noche-300);
    --color-borde-control: var(--trevol-noche-300);
    --color-seleccion-sin-foco-indicador: var(--trevol-plata);
    --color-texto-seleccion-sin-foco: var(--trevol-blanco);
    --color-exito: var(--trevol-exito-oscuro-mas-contraste);
    --color-exito-fondo: var(--trevol-noche-950);
    --color-aviso: var(--trevol-aviso-oscuro-mas-contraste);
    --color-aviso-fondo: var(--trevol-noche-950);
    --color-error: var(--trevol-error-oscuro-mas-contraste);
    --color-error-fondo: var(--trevol-noche-950);
    --color-info: var(--trevol-info-oscuro-mas-contraste);
    --color-info-fondo: var(--trevol-noche-950);
    --color-neutro: var(--trevol-neutro-oscuro-mas-contraste);
    --color-neutro-fondo: var(--trevol-noche-950);
    --color-importe-negativo: var(--trevol-blanco);
  }
}
@media (prefers-color-scheme: dark) {
  :root[data-contrast="more"]:not([data-theme="light"]) {
    --color-fondo-contenido: var(--trevol-noche-950);
    --color-fila-alterna: var(--trevol-noche-900);
    --color-superficie-elevada: var(--trevol-noche-900);
    --color-superficie-flotante: var(--trevol-noche-850);
    --color-texto: var(--trevol-blanco);
    --color-texto-secundario: var(--trevol-bruma);
    --color-texto-terciario: var(--trevol-plata);
    --color-texto-marcador: var(--trevol-plata);
    --color-texto-encabezado: var(--trevol-bruma);
    --color-cuadricula: var(--trevol-noche-500);
    --color-separador: var(--trevol-noche-300);
    --color-borde-control: var(--trevol-noche-300);
    --color-seleccion-sin-foco-indicador: var(--trevol-plata);
    --color-texto-seleccion-sin-foco: var(--trevol-blanco);
    --color-exito: var(--trevol-exito-oscuro-mas-contraste);
    --color-exito-fondo: var(--trevol-noche-950);
    --color-aviso: var(--trevol-aviso-oscuro-mas-contraste);
    --color-aviso-fondo: var(--trevol-noche-950);
    --color-error: var(--trevol-error-oscuro-mas-contraste);
    --color-error-fondo: var(--trevol-noche-950);
    --color-info: var(--trevol-info-oscuro-mas-contraste);
    --color-info-fondo: var(--trevol-noche-950);
    --color-neutro: var(--trevol-neutro-oscuro-mas-contraste);
    --color-neutro-fondo: var(--trevol-noche-950);
    --color-importe-negativo: var(--trevol-blanco);
  }
}
@media (prefers-contrast: more) {
  [data-theme="dark"] {
    --color-fondo-contenido: var(--trevol-noche-950);
    --color-fila-alterna: var(--trevol-noche-900);
    --color-superficie-elevada: var(--trevol-noche-900);
    --color-superficie-flotante: var(--trevol-noche-850);
    --color-texto: var(--trevol-blanco);
    --color-texto-secundario: var(--trevol-bruma);
    --color-texto-terciario: var(--trevol-plata);
    --color-texto-marcador: var(--trevol-plata);
    --color-texto-encabezado: var(--trevol-bruma);
    --color-cuadricula: var(--trevol-noche-500);
    --color-separador: var(--trevol-noche-300);
    --color-borde-control: var(--trevol-noche-300);
    --color-seleccion-sin-foco-indicador: var(--trevol-plata);
    --color-texto-seleccion-sin-foco: var(--trevol-blanco);
    --color-exito: var(--trevol-exito-oscuro-mas-contraste);
    --color-exito-fondo: var(--trevol-noche-950);
    --color-aviso: var(--trevol-aviso-oscuro-mas-contraste);
    --color-aviso-fondo: var(--trevol-noche-950);
    --color-error: var(--trevol-error-oscuro-mas-contraste);
    --color-error-fondo: var(--trevol-noche-950);
    --color-info: var(--trevol-info-oscuro-mas-contraste);
    --color-info-fondo: var(--trevol-noche-950);
    --color-neutro: var(--trevol-neutro-oscuro-mas-contraste);
    --color-neutro-fondo: var(--trevol-noche-950);
    --color-importe-negativo: var(--trevol-blanco);
  }
}
[data-contrast="more"][data-theme="dark"],
[data-contrast="more"] [data-theme="dark"] {
  --color-fondo-contenido: var(--trevol-noche-950);
  --color-fila-alterna: var(--trevol-noche-900);
  --color-superficie-elevada: var(--trevol-noche-900);
  --color-superficie-flotante: var(--trevol-noche-850);
  --color-texto: var(--trevol-blanco);
  --color-texto-secundario: var(--trevol-bruma);
  --color-texto-terciario: var(--trevol-plata);
  --color-texto-marcador: var(--trevol-plata);
  --color-texto-encabezado: var(--trevol-bruma);
  --color-cuadricula: var(--trevol-noche-500);
  --color-separador: var(--trevol-noche-300);
  --color-borde-control: var(--trevol-noche-300);
  --color-seleccion-sin-foco-indicador: var(--trevol-plata);
  --color-texto-seleccion-sin-foco: var(--trevol-blanco);
  --color-exito: var(--trevol-exito-oscuro-mas-contraste);
  --color-exito-fondo: var(--trevol-noche-950);
  --color-aviso: var(--trevol-aviso-oscuro-mas-contraste);
  --color-aviso-fondo: var(--trevol-noche-950);
  --color-error: var(--trevol-error-oscuro-mas-contraste);
  --color-error-fondo: var(--trevol-noche-950);
  --color-info: var(--trevol-info-oscuro-mas-contraste);
  --color-info-fondo: var(--trevol-noche-950);
  --color-neutro: var(--trevol-neutro-oscuro-mas-contraste);
  --color-neutro-fondo: var(--trevol-noche-950);
  --color-importe-negativo: var(--trevol-blanco);
}

/* 3. Puente con 20-SISTEMA §2.2: los componentes del producto conservan sus nombres.
   Se declara también en [data-theme] para que siga al tema de cada sección. */
:root,
[data-theme] {
  --color-window-bg: var(--color-fondo-ventana);
  --color-content-bg: var(--color-fondo-contenido);
  --color-row-alt: var(--color-fila-alterna);
  --color-surface-raised: var(--color-superficie-elevada);
  --color-surface-overlay: var(--color-superficie-flotante);
  --color-under-page: var(--color-fondo-bajo-pagina);
  --color-row-hover: var(--color-fila-hover);
  --overlay-dim: var(--color-velo);
  --color-label: var(--color-texto);
  --color-label-secondary: var(--color-texto-secundario);
  --color-label-tertiary: var(--color-texto-terciario);
  --color-label-quaternary: var(--color-texto-cuaternario);
  --color-placeholder: var(--color-texto-marcador);
  --color-header-text: var(--color-texto-encabezado);
  --color-text-disabled: var(--color-texto-deshabilitado);
  --color-grid: var(--color-cuadricula);
  --color-separator: var(--color-separador);
  --color-control-border: var(--color-borde-control);
  --color-accent: var(--color-accion);
  --color-accent-hover: var(--color-accion-hover);
  --color-accent-pressed: var(--color-accion-presionada);
  --color-on-accent: var(--color-texto-sobre-accion);
  --color-accent-text: var(--color-enlace);
  --color-selection-bg: var(--color-seleccion);
  --color-selection-text: var(--color-texto-seleccion);
  --color-selection-indicator: var(--color-seleccion-indicador);
  --color-selection-bg-unfocused: var(--color-seleccion-sin-foco);
  --color-selection-indicator-unfocused: var(--color-seleccion-sin-foco-indicador);
  --color-selection-text-unfocused: var(--color-texto-seleccion-sin-foco);
  --color-focus-ring: var(--color-foco);
  --color-focus-ring-on-selection: var(--color-foco-sobre-seleccion);
  --color-focus-ring-on-brand: var(--color-foco-sobre-marca);
  --color-find-highlight: var(--color-resaltado-busqueda);
  --color-find-highlight-text: var(--color-texto-resaltado-busqueda);
  --color-success: var(--color-exito);
  --color-success-bg: var(--color-exito-fondo);
  --color-warning: var(--color-aviso);
  --color-warning-bg: var(--color-aviso-fondo);
  --color-danger: var(--color-error);
  --color-danger-bg: var(--color-error-fondo);
  --color-info-bg: var(--color-info-fondo);
  --color-neutral: var(--color-neutro);
  --color-neutral-bg: var(--color-neutro-fondo);
  --color-amount-negative: var(--color-importe-negativo);
}

/* 4. Colores forzados (alto contraste de Windows): mandan los colores del sistema.
   !important porque los bloques de tema tienen más especificidad.
   El foco se dibuja con outline y outline-offset, nunca solo con box-shadow, que desaparece en este modo. */
@media (forced-colors: active) {
  :root,
  [data-theme] {
    --color-foco: Highlight !important;
    --color-foco-sobre-seleccion: HighlightText !important;
    --color-foco-sobre-marca: Highlight !important;
    --color-seleccion: Highlight !important;
    --color-texto-seleccion: HighlightText !important;
    --color-seleccion-indicador: HighlightText !important;
    --color-seleccion-sin-foco: Highlight !important;
    --color-texto-seleccion-sin-foco: HighlightText !important;
    --color-seleccion-sin-foco-indicador: HighlightText !important;
  }
}