/* ═══════════════════════════════════════════════════════════════════════════
   K2 · LOS TOKENS DE COLOR DE LAS PÁGINAS JINJA
   COPIA EXACTA de frontend/src/gestor.css: el bloque [data-theme="dark"], el
   [data-theme="light"] (también para :root sin tema) y el respaldo oscuro de
   prefers-color-scheme para cuando no hay guion. No se editan aquí: si cambia
   un gris en el gestor, se vuelve a copiar. tests/test_k2_base_jinja.py
   compara propiedad por propiedad y falla si se desalinean (docs/DISENO.md §4).
   Va antes de k2_base.css, que no tiene un solo color literal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens · OSCURO ─────────────────────────────────────────────────────────
   ORIGEN: frontend/src/gestor.css, bloque [data-theme="dark"] (igual al de
   origin/main del 12-oct-2026). Copia exacta, comentarios incluidos. Aquí
   --accent es CLARO (hueso): sobre él va --accent-fg. */
[data-theme="dark"] {
  /* Paleta K2 (Kravio + cobalto) */
  --bg:        #0b0b0b;   /* página y menú */
  --bg-1:      #181818;   /* tarjeta */
  --bg-2:      #242424;   /* seleccionado o elevado: capa ELEVADA, no la bandeja */
  --bg-3:      #262626;
  --bg-hover:  rgba(255,255,255,0.035);
  --bg-active: rgba(255,255,255,0.045);

  --border:        rgba(255,255,255,0.085);
  --border-md:     rgba(255,255,255,0.16);
  --border-strong: #70737c;

  --text:   #ececef;
  --text-2: #b5b7bd;
  /* El piso legible: 4,92:1 sobre la superficie más clara que lo lleva
     (#262626). Se midió sobre todas las superficies del tema, no solo la más
     oscura: ese error ya dejó una vez el terciario bajo el mínimo justo en las
     filas que el cursor señala. */
  --text-3: #90939b;
  /* Igual que --text-3 a propósito: dos niveles que pasen 4,5:1 sobre el mismo
     fondo tienen que ser casi igual de claros. Se conserva el token para no
     tocar las reglas que lo usan; la jerarquía fina va con tamaño y peso. */
  --text-4: #90939b;
  --dot-neutro: #7b7f89;
  /* Los rellenos semánticos son punto, borde y fondo; como TEXTO van estas. */
  --red-text:   #ff8a80;
  --amber-text: #f0aa4f;
  --green-text: #4fcf8f;

  --accent:        #e6e7ea;
  --accent-2:      #f1f2f4;   /* hover: aclara, nunca cambia de matiz */
  --accent-light:  #e6e7ea;   /* solo como TEXTO */
  --accent-bg:     rgba(255,255,255,0.06);
  --accent-border: rgba(255,255,255,0.16);
  --accent-fg:     #121316;   /* texto sobre el acento — OJO: es OSCURO */
  /* El anillo de foco es el hilo cobalto, en su peso claro: ≥ 6,4:1 contra
     todas las superficies del tema. */
  --focus:         #93a3ff;

  --green:  #36b26f; --green-bg:  rgba(54,178,111,0.13);  --green-border:  rgba(54,178,111,0.30);
  --amber:  #e08a1e; --amber-bg:  rgba(232,150,47,0.14);  --amber-border:  rgba(224,138,30,0.32);
  --red:    #ec5a50; --red-bg:    rgba(240,106,96,0.14);  --red-border:    rgba(236,90,80,0.30);
  /* --blue: alias histórico: es el matiz de EVENTO y AUDIENCIA; en K2 es violeta. */
  --blue:   var(--violeta); --blue-bg: var(--violeta-bg); --blue-border: var(--violeta-border);

  /* La hoja real de Folium en CREMA; en claro es marino. Es la firma, no la paleta. */
  --logo-ink:   #f0ebe2;
  --logo-punto: #f0ebe2;

  --shadow-md: inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 48px -18px rgba(0,0,0,0.7);
  /* El cajón flota sobre un velo: conserva la sombra negra, que oscurece el
     borde de lo que tapa. */
  --shadow-xl: -24px 0 60px rgba(0,0,0,0.50);
  --topbar-bg: rgba(17,17,17,0.86);
  --glass:     rgba(17,17,17,0.86);   /* cabeceras translúcidas (backdrop-filter) */

  /* Superficies nuevas, de abajo hacia arriba */
  --hoja:          #111111;   /* el contenido, sobre la página */
  --bandeja:       #0d0d0d;   /* un pozo, con rayado */
  --tabla-cab:     #1f1f1f;
  --seg-fondo:     #0f0f0f;
  --pildora:       #1c1c1c;   /* ítem actual del menú */
  --pulgar:        #262626;   /* opción elegida de un segmentado */
  --sup-rail:      #151515;
  --sup-btn:       #1a1a1a;
  --sup-btn-hover: #202020;
  --sup-chip:      #242424;
  --sup-campo:     #101010;   /* los campos son pozos, no relieves */
  --sup-cajon:     #131313;
  --sup-paleta:    #191919;
  --sup-flota:     #232323;
  --sup-baldosa:   #1f1f1f;
  --inhabil-fondo: #141414;

  --grid:         rgba(255,255,255,0.055);
  --deco:         #5c5f66;   /* separadores y trazos: NUNCA como texto */
  --text-fila:    #cfd0d5;
  --border-in:    rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.16);
  /* El canto de los campos: 3,99:1 sobre la hoja y 3,28 sobre --bg-2. */
  --border-campo: #70737c;
  /* Texto o ícono sobre un relleno semántico. En oscuro los rellenos son
     CLAROS, así que se invierte igual que --accent-fg. */
  --fg-sobre-relleno: #121316;

  --accent-grad:       linear-gradient(180deg, #f1f2f4 0%, #d6d8dd 64.7%);
  --accent-grad-hover: linear-gradient(180deg, #ffffff 0%, #e2e4e8 64.7%);

  /* El hilo cobalto: mismo matiz que en claro (231°), más luz. */
  --rol:           #93a3ff;   /* ROL · 7,55:1 sobre la tarjeta */
  --novedad:       #6f86ff;   /* punto de novedad · 5,52:1 sobre la tarjeta */
  --novedad-tinte: rgba(111,134,255,0.14);
  --novedad-halo:  rgba(111,134,255,0.28);

  --violeta:        #b07cf0;
  --violeta-bg:     rgba(176,124,240,0.15);
  --violeta-border: rgba(176,124,240,0.30);
  --gris-dato:      #7b7f89;
  --resaltador:     #4a3a14;

  --luz-borde:      inset 0 1px 0 rgba(255,255,255,0.045);
  --sombra-reposo:  inset 0 1px 0 rgba(255,255,255,0.06);
  --sombra-hover:   inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.09);
  --sombra-menu:    0 0 0 1px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 48px -18px rgba(0,0,0,0.7);
  /* 2,4 % en blanco da el mismo escalón percibido que el 3 % negro del claro. */
  --rayado: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.024) 0 0.8px, transparent 0.8px 9.6px);
  /* Lo inhábil (domingos y feriados) va rayado, más tupido y más marcado que la
     bandeja: el día se lee apagado sin perder su número. La muestra de la
     leyenda mide 10 px y lleva el trazo al doble. Valores de K2 (oscuro.css). */
  --rayado-inhabil:         repeating-linear-gradient(117.4deg, rgba(255,255,255,0.07) 0 0.8px, transparent 0.8px 4px);
  --rayado-inhabil-muestra: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.14) 0 0.8px, transparent 0.8px 3px);
  /* La banda «hoy puede crecer» del gráfico de Inicio y su muestra. */
  --rayado-banda:   repeating-linear-gradient(117.4deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px);
  --rayado-muestra: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.22) 0 1px, transparent 1px 4px);
  /* El pozo donde se suelta un archivo (Importar, en «Agregar o exportar»):
     más hondo que la tarjeta y con un rayado más marcado que la bandeja, como
     `.ac-suelta` de K2 (#141414 y blanco al 4 %). */
  --pozo:        #141414;
  --rayado-pozo: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.04) 0 0.8px, transparent 0.8px 9.6px);
  /* La columna de Tareas donde va a caer la tarjeta que se arrastra: se raya
     más tupido que la bandeja (K2, `.tk-col.destino`). */
  --rayado-destino: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 7px);

  /* La tinta en relieve (la acción principal y la barra de hoy): en oscuro un
     filo de luz arriba y un filete claro, sin sombra negra. */
  --sombra-tinta:       inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(255,255,255,0.5);
  --sombra-tinta-hover: inset 0 1px 0 #ffffff, inset 0 0 0 0.5px rgba(255,255,255,0.6);
  --sombra-barra-hoy:   inset 0 1px 0 #ffffff, inset 0 0 0 0.5px rgba(255,255,255,0.6);
  /* Un campo que vive suelto sobre la tarjeta (el buscador de la actividad, el
     redactor del chat): en oscuro, una luz apenas visible arriba. */
  --sombra-campo:       inset 0 1px 0 rgba(255,255,255,0.035);
  /* Las barras grises del gráfico: se apagan hacia abajo y llevan un brillo
     arriba. K2 las pinta con un punto de azul (#2c2c2d, #353537); aquí van en
     neutro puro (DISENO §1): son las barras de las NOVEDADES, y un gris azulado
     al lado le quita señal al cobalto. A la vista no se distinguen. */
  --barra-fondo:  linear-gradient(180deg, #2c2c2c 0%, rgba(44,44,44,0.7) 100%);
  --barra-sombra: inset 0 0 0 0.5px #353535, inset 0 1px 0 rgba(255,255,255,0.07);
  /* El riel de un progreso (la revisión en curso de la franja). */
  --riel: #2a2a2a;

  /* El velo bajo un cajón. En oscuro sigue como estaba: negro al 50 %. */
  --velo:             rgba(0,0,0,0.5);
  --velo-desenfoque:  1.5px;

  /* Los controles nativos (barras de desplazamiento, selectores de fecha, el
     menú de un <select>) siguen al tema y no al sistema. */
  color-scheme: dark;
  scrollbar-color: #34343a transparent;
}
[data-theme="dark"] ::selection { background: rgba(111,134,255,0.34); }

/* ── Tokens · CLARO ──────────────────────────────────────────────────────────
   ORIGEN: frontend/src/gestor.css, bloque [data-theme="light"]. Copia exacta.
   También vale para <html> sin data-theme: claro es el tema por omisión
   cuando el sistema no dice nada (D6). */
[data-theme="light"],
:root:not([data-theme]) {
  /* Paleta K2 (Kravio + cobalto) */
  --bg:        #f8f8f8;   /* página y menú */
  --bg-1:      #ffffff;   /* tarjeta */
  --bg-2:      #f3f4f6;
  --bg-3:      #eceef1;
  --bg-hover:  rgba(0,0,0,0.02);
  --bg-active: rgba(0,0,0,0.045);

  --border:        #e5e7eb;
  --border-md:     #d1d5db;
  --border-strong: #878c96;

  --text:   #1f2937;
  --text-2: #4b5563;
  /* Peor caso 4,97:1, sobre --bg-3. */
  --text-3: #5f6673;
  /* Igual que --text-3 a propósito (ver el bloque oscuro). */
  --text-4: #5f6673;
  --dot-neutro: #878c96;
  /* Los rellenos semánticos son punto, borde y fondo; como TEXTO van estas
     (≥ 5,96:1 sobre blanco). */
  --red-text:   #b53434;
  --amber-text: #955300;
  --green-text: #1d714d;

  /* Tinta pizarra: la de K2. Más clara empieza a leerse como gris y el botón
     deja de mandar sobre el delineado de al lado. */
  --accent:        #1f2937;
  --accent-2:      #263244;   /* hover: aclara, nunca cambia de matiz */
  --accent-light:  #1f2937;   /* solo como TEXTO */
  --accent-bg:     rgba(0,0,0,0.04);
  --accent-border: #d1d5db;
  --accent-fg:     #ffffff;   /* texto sobre el acento (badges, botón enviar) */
  --focus:         #2e48e9;

  --green:  #269451; --green-bg:  #e8f5ed; --green-border:  rgba(38,148,81,0.28);
  --amber:  #ca6e03; --amber-bg:  #fdf1dc; --amber-border:  rgba(202,110,3,0.30);
  --red:    #cf413a; --red-bg:    #fdecea; --red-border:    rgba(207,65,58,0.26);
  /* --blue: alias histórico: es el matiz de EVENTO y AUDIENCIA; en K2 es violeta. */
  --blue:   var(--violeta); --blue-bg: var(--violeta-bg); --blue-border: var(--violeta-border);

  /* La hoja real de Folium en su AZUL MARINO; en oscuro, crema. */
  --logo-ink:   #1e3a5e;
  --logo-punto: #1e3a5e;

  --shadow-md: 0 4px 7px rgba(0,0,0,0.04);
  --shadow-lg: 0 0 0 1px rgba(0,0,0,0.06), 0 1px 1px -0.5px rgba(0,0,0,0.06), 0 3px 3px -1.5px rgba(0,0,0,0.06),
    0 6px 6px -3px rgba(0,0,0,0.06), 0 12px 12px -6px rgba(0,0,0,0.06), 0 24px 24px -12px rgba(0,0,0,0.06);
  --shadow-xl: -24px 0 60px rgba(0,0,0,0.10);
  --topbar-bg: rgba(255,255,255,0.86);
  --glass:     rgba(255,255,255,0.9);   /* cabeceras translúcidas en tema claro */

  /* Superficies nuevas */
  --hoja:          #ffffff;
  --bandeja:       #f6f6f6;
  --tabla-cab:     #f7f7f7;
  --seg-fondo:     #f3f4f6;
  --pildora:       #ffffff;
  --pulgar:        #ffffff;
  --sup-rail:      #ffffff;
  --sup-btn:       #ffffff;
  --sup-btn-hover: #fcfcfc;
  --sup-chip:      #f3f4f6;
  --sup-campo:     #ffffff;
  --sup-cajon:     #ffffff;
  --sup-paleta:    #ffffff;
  --sup-flota:     #ffffff;
  --sup-baldosa:   #ffffff;
  --inhabil-fondo: #f3f3f4;

  --grid:         #f0f0f2;
  --deco:         #9ca3af;   /* separadores y trazos: NUNCA como texto */
  --text-fila:    #52525b;
  --border-in:    rgba(0,0,0,0.1);
  --border-hover: #d1d5db;
  /* El canto de los campos: 3,38:1 sobre blanco, 3,18 sobre --bg, 3,07 sobre
     --bg-2 y 2,90 sobre --bg-3. Un campo NO se apoya en --bg-3. */
  --border-campo: #878c96;
  --fg-sobre-relleno: #ffffff;

  --accent-grad:       linear-gradient(180deg, #37475d 0%, #1f2937 64.7%);
  --accent-grad-hover: linear-gradient(180deg, #415370 0%, #263244 64.7%);

  /* El hilo cobalto */
  --rol:           #2a43df;   /* ROL · 7,08:1 sobre blanco */
  --novedad:       #2e48e9;   /* punto de novedad · 6,52:1 sobre blanco */
  --novedad-tinte: #edf2ff;
  --novedad-halo:  rgba(46,72,233,0.22);

  --violeta:        #8a3acc;
  --violeta-bg:     #f3ebfb;
  --violeta-border: rgba(138,58,204,0.28);
  --gris-dato:      #878c96;
  --resaltador:     #fef3c7;

  --luz-borde:      0 0 0 0 transparent;
  --sombra-reposo:  0 4px 7px rgba(0,0,0,0.04);
  --sombra-hover:   0 2px 3px -1px rgba(0,0,0,0.1), 0 1px 0 rgba(25,28,33,0.02), 0 0 0 1px rgba(25,28,33,0.08);
  --sombra-menu:    0 0 0 1px rgba(0,0,0,0.06), 0 1px 1px -0.5px rgba(0,0,0,0.06), 0 3px 3px -1.5px rgba(0,0,0,0.06),
    0 6px 6px -3px rgba(0,0,0,0.06), 0 12px 12px -6px rgba(0,0,0,0.06), 0 24px 24px -12px rgba(0,0,0,0.06);
  --rayado: repeating-linear-gradient(117.4deg, rgba(0,0,0,0.03) 0 0.8px, transparent 0.8px 9.6px);
  /* Lo inhábil y la banda del gráfico (ver el bloque oscuro). */
  --rayado-inhabil:         repeating-linear-gradient(117.4deg, rgba(0,0,0,0.07) 0 0.8px, transparent 0.8px 4px);
  --rayado-inhabil-muestra: repeating-linear-gradient(117.4deg, rgba(0,0,0,0.14) 0 0.8px, transparent 0.8px 3px);
  --rayado-banda:   repeating-linear-gradient(117.4deg, rgba(0,0,0,0.055) 0 1px, transparent 1px 7px);
  --rayado-muestra: repeating-linear-gradient(117.4deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 4px);
  /* El pozo de Importar y la columna de destino de Tareas (ver el bloque
     oscuro). En claro el pozo es el gris de la cabecera de la tabla. */
  --pozo:        #f7f7f7;
  --rayado-pozo: repeating-linear-gradient(117.4deg, rgba(0,0,0,0.03) 0 0.8px, transparent 0.8px 9.6px);
  --rayado-destino: repeating-linear-gradient(117.4deg, rgba(0,0,0,0.075) 0 1px, transparent 1px 7px);

  /* La tinta en relieve: un filete de su color, un brillo arriba y un halo
     abajo. Sin ellos el botón se veía plano junto a la maqueta [medido]. En
     claro el halo no cambia al pasar el cursor; cambia el degradado. */
  --sombra-tinta:       inset 0 0 0 0.5px var(--accent), inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 10px rgba(31,41,55,0.12);
  --sombra-tinta-hover: inset 0 0 0 0.5px var(--accent), inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 10px rgba(31,41,55,0.12);
  --sombra-barra-hoy:   inset 0 0 0 0.5px var(--accent), 0 2px 10px rgba(31,41,55,0.1);
  --sombra-campo:       0 4px 14px rgba(0,0,0,0.04);
  --barra-fondo:  linear-gradient(180deg, #e6e7ea 0%, rgba(230,231,234,0.65) 100%);
  --barra-sombra: inset 0 0 0 0.5px #d6d8dc, inset 0 1px 0 rgba(255,255,255,0.9);
  --riel: #e6e7ea;

  /* El velo bajo un cajón, como K2: pizarra al 20 % con 2 px de desenfoque.
     El negro al 50 % de antes apagaba la página entera en claro. */
  --velo:             rgba(17,24,39,0.2);
  --velo-desenfoque:  2px;

  color-scheme: light;
}

/* ── Respaldo sin data-theme: sigue al sistema ───────────────────────────────
   Solo actúa si nadie puso el atributo (sin guion, o antes de que corra). Es
   el MISMO bloque oscuro de arriba, repetido porque un @media no puede
   reutilizar un selector; verificar-kit.py exige que los dos sean idénticos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Paleta K2 (Kravio + cobalto) */
    --bg:        #0b0b0b;   /* página y menú */
    --bg-1:      #181818;   /* tarjeta */
    --bg-2:      #242424;   /* seleccionado o elevado: capa ELEVADA, no la bandeja */
    --bg-3:      #262626;
    --bg-hover:  rgba(255,255,255,0.035);
    --bg-active: rgba(255,255,255,0.045);

    --border:        rgba(255,255,255,0.085);
    --border-md:     rgba(255,255,255,0.16);
    --border-strong: #70737c;

    --text:   #ececef;
    --text-2: #b5b7bd;
    /* El piso legible: 4,92:1 sobre la superficie más clara que lo lleva
       (#262626). Se midió sobre todas las superficies del tema, no solo la más
       oscura: ese error ya dejó una vez el terciario bajo el mínimo justo en las
       filas que el cursor señala. */
    --text-3: #90939b;
    /* Igual que --text-3 a propósito: dos niveles que pasen 4,5:1 sobre el mismo
       fondo tienen que ser casi igual de claros. Se conserva el token para no
       tocar las reglas que lo usan; la jerarquía fina va con tamaño y peso. */
    --text-4: #90939b;
    --dot-neutro: #7b7f89;
    /* Los rellenos semánticos son punto, borde y fondo; como TEXTO van estas. */
    --red-text:   #ff8a80;
    --amber-text: #f0aa4f;
    --green-text: #4fcf8f;

    --accent:        #e6e7ea;
    --accent-2:      #f1f2f4;   /* hover: aclara, nunca cambia de matiz */
    --accent-light:  #e6e7ea;   /* solo como TEXTO */
    --accent-bg:     rgba(255,255,255,0.06);
    --accent-border: rgba(255,255,255,0.16);
    --accent-fg:     #121316;   /* texto sobre el acento — OJO: es OSCURO */
    /* El anillo de foco es el hilo cobalto, en su peso claro: ≥ 6,4:1 contra
       todas las superficies del tema. */
    --focus:         #93a3ff;

    --green:  #36b26f; --green-bg:  rgba(54,178,111,0.13);  --green-border:  rgba(54,178,111,0.30);
    --amber:  #e08a1e; --amber-bg:  rgba(232,150,47,0.14);  --amber-border:  rgba(224,138,30,0.32);
    --red:    #ec5a50; --red-bg:    rgba(240,106,96,0.14);  --red-border:    rgba(236,90,80,0.30);
    /* --blue: alias histórico: es el matiz de EVENTO y AUDIENCIA; en K2 es violeta. */
    --blue:   var(--violeta); --blue-bg: var(--violeta-bg); --blue-border: var(--violeta-border);

    /* La hoja real de Folium en CREMA; en claro es marino. Es la firma, no la paleta. */
    --logo-ink:   #f0ebe2;
    --logo-punto: #f0ebe2;

    --shadow-md: inset 0 1px 0 rgba(255,255,255,0.06);
    --shadow-lg: 0 0 0 1px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.07),
      0 24px 48px -18px rgba(0,0,0,0.7);
    /* El cajón flota sobre un velo: conserva la sombra negra, que oscurece el
       borde de lo que tapa. */
    --shadow-xl: -24px 0 60px rgba(0,0,0,0.50);
    --topbar-bg: rgba(17,17,17,0.86);
    --glass:     rgba(17,17,17,0.86);   /* cabeceras translúcidas (backdrop-filter) */

    /* Superficies nuevas, de abajo hacia arriba */
    --hoja:          #111111;   /* el contenido, sobre la página */
    --bandeja:       #0d0d0d;   /* un pozo, con rayado */
    --tabla-cab:     #1f1f1f;
    --seg-fondo:     #0f0f0f;
    --pildora:       #1c1c1c;   /* ítem actual del menú */
    --pulgar:        #262626;   /* opción elegida de un segmentado */
    --sup-rail:      #151515;
    --sup-btn:       #1a1a1a;
    --sup-btn-hover: #202020;
    --sup-chip:      #242424;
    --sup-campo:     #101010;   /* los campos son pozos, no relieves */
    --sup-cajon:     #131313;
    --sup-paleta:    #191919;
    --sup-flota:     #232323;
    --sup-baldosa:   #1f1f1f;
    --inhabil-fondo: #141414;

    --grid:         rgba(255,255,255,0.055);
    --deco:         #5c5f66;   /* separadores y trazos: NUNCA como texto */
    --text-fila:    #cfd0d5;
    --border-in:    rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.16);
    /* El canto de los campos: 3,99:1 sobre la hoja y 3,28 sobre --bg-2. */
    --border-campo: #70737c;
    /* Texto o ícono sobre un relleno semántico. En oscuro los rellenos son
       CLAROS, así que se invierte igual que --accent-fg. */
    --fg-sobre-relleno: #121316;

    --accent-grad:       linear-gradient(180deg, #f1f2f4 0%, #d6d8dd 64.7%);
    --accent-grad-hover: linear-gradient(180deg, #ffffff 0%, #e2e4e8 64.7%);

    /* El hilo cobalto: mismo matiz que en claro (231°), más luz. */
    --rol:           #93a3ff;   /* ROL · 7,55:1 sobre la tarjeta */
    --novedad:       #6f86ff;   /* punto de novedad · 5,52:1 sobre la tarjeta */
    --novedad-tinte: rgba(111,134,255,0.14);
    --novedad-halo:  rgba(111,134,255,0.28);

    --violeta:        #b07cf0;
    --violeta-bg:     rgba(176,124,240,0.15);
    --violeta-border: rgba(176,124,240,0.30);
    --gris-dato:      #7b7f89;
    --resaltador:     #4a3a14;

    --luz-borde:      inset 0 1px 0 rgba(255,255,255,0.045);
    --sombra-reposo:  inset 0 1px 0 rgba(255,255,255,0.06);
    --sombra-hover:   inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.09);
    --sombra-menu:    0 0 0 1px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.07),
      0 24px 48px -18px rgba(0,0,0,0.7);
    /* 2,4 % en blanco da el mismo escalón percibido que el 3 % negro del claro. */
    --rayado: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.024) 0 0.8px, transparent 0.8px 9.6px);
    /* Lo inhábil (domingos y feriados) va rayado, más tupido y más marcado que la
       bandeja: el día se lee apagado sin perder su número. La muestra de la
       leyenda mide 10 px y lleva el trazo al doble. Valores de K2 (oscuro.css). */
    --rayado-inhabil:         repeating-linear-gradient(117.4deg, rgba(255,255,255,0.07) 0 0.8px, transparent 0.8px 4px);
    --rayado-inhabil-muestra: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.14) 0 0.8px, transparent 0.8px 3px);
    /* La banda «hoy puede crecer» del gráfico de Inicio y su muestra. */
    --rayado-banda:   repeating-linear-gradient(117.4deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px);
    --rayado-muestra: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.22) 0 1px, transparent 1px 4px);
    /* El pozo donde se suelta un archivo (Importar, en «Agregar o exportar»):
       más hondo que la tarjeta y con un rayado más marcado que la bandeja, como
       `.ac-suelta` de K2 (#141414 y blanco al 4 %). */
    --pozo:        #141414;
    --rayado-pozo: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.04) 0 0.8px, transparent 0.8px 9.6px);
    /* La columna de Tareas donde va a caer la tarjeta que se arrastra: se raya
       más tupido que la bandeja (K2, `.tk-col.destino`). */
    --rayado-destino: repeating-linear-gradient(117.4deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 7px);

    /* La tinta en relieve (la acción principal y la barra de hoy): en oscuro un
       filo de luz arriba y un filete claro, sin sombra negra. */
    --sombra-tinta:       inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(255,255,255,0.5);
    --sombra-tinta-hover: inset 0 1px 0 #ffffff, inset 0 0 0 0.5px rgba(255,255,255,0.6);
    --sombra-barra-hoy:   inset 0 1px 0 #ffffff, inset 0 0 0 0.5px rgba(255,255,255,0.6);
    /* Un campo que vive suelto sobre la tarjeta (el buscador de la actividad, el
       redactor del chat): en oscuro, una luz apenas visible arriba. */
    --sombra-campo:       inset 0 1px 0 rgba(255,255,255,0.035);
    /* Las barras grises del gráfico: se apagan hacia abajo y llevan un brillo
       arriba. K2 las pinta con un punto de azul (#2c2c2d, #353537); aquí van en
       neutro puro (DISENO §1): son las barras de las NOVEDADES, y un gris azulado
       al lado le quita señal al cobalto. A la vista no se distinguen. */
    --barra-fondo:  linear-gradient(180deg, #2c2c2c 0%, rgba(44,44,44,0.7) 100%);
    --barra-sombra: inset 0 0 0 0.5px #353535, inset 0 1px 0 rgba(255,255,255,0.07);
    /* El riel de un progreso (la revisión en curso de la franja). */
    --riel: #2a2a2a;

    /* El velo bajo un cajón. En oscuro sigue como estaba: negro al 50 %. */
    --velo:             rgba(0,0,0,0.5);
    --velo-desenfoque:  1.5px;

    /* Los controles nativos (barras de desplazamiento, selectores de fecha, el
       menú de un <select>) siguen al tema y no al sistema. */
    color-scheme: dark;
    scrollbar-color: #34343a transparent;
  }
  :root:not([data-theme]) ::selection { background: rgba(111,134,255,0.34); }
}