/*
 * KummaraDS — tokens (#2003, #2005, #2006, #2008)
 * ============================================================
 * Cuatro capas, de abajo hacia arriba:
 *   1. primitivos   --kds-paleta-*: los colores que existen, sin función. Ninguna pieza los lee.
 *   2. papeles      --kds-<papel>: el trabajo de un valor (fondo, texto, borde, acento, peligro…) y las escalas.
 *   3. componente   --kds-<pieza>-<propiedad>: lo que un tema puede fijar de una pieza; la pieza lo lee con el
 *                   respaldo de hoy.
 *   4. privadas     --_x, adentro de una pieza.
 * Una pieza lee papeles y escalas. Un hex, --color-* o --ds-* sólo aparecen como respaldo igual al de hoy.
 *
 * TEMA = una clase en <html>. Sin clase rige el de KDS (el panel); la tienda es html.kds-tienda
 * (kds-tema-tienda.css); otro sistema, html.kds-tema-<nombre>. Un tema define todos los papeles.
 * MODO = el atributo data-kds-modo en <html>: «oscuro» o «kmma»; sin atributo, el claro. Un modo sólo cambia
 * papeles de color, sombras y color-scheme, y nunca entra en una página que no lo pide.
 * TONO = data-kds-tono="kmma" junto al oscuro (#2039): el kmma oscuro, el kmma con la base oscura. Toma todo lo que el
 * oscuro resolvió y le cambia los colores a los de Kummara; --kds-sobre-pastel es la letra sobre un relleno pastel.
 * Quién gana: :root (0,1,0) < un modo, :root:where([data-kds-modo]) (0,1,0, escrito después) < html.kds-<tema> (0,1,1).
 * Así un modo guardado en el panel no se mete en el tema de otra página.
 *
 * Puente: --ds-* y --color-* siguen existiendo con los MISMOS valores. --ds-* apuntan a los papeles, así las piezas
 * viejas siguen al tema y al modo; el panel en claro queda igual.
 * Un color nuevo sólo nace de uno que existe: color-mix(in srgb, <primitivo> N%, #000 o #fff), lo mínimo que se lea.
 * ============================================================
 */

/* ---- Escala (#1436) ----
   La perilla de tamaño de TODA la librería: las medidas van en rem (16px = 1rem) y siguen a la medida base que fija
   esta perilla. En el tema de KDS (el panel), .8 en escritorio y 1 en el teléfono y la tableta. Cada tema fija la suya
   (la tienda, 1). Una medida nueva va en rem; px sólo para líneas de 1-2px. */
:root { --kds-escala: .8; }
@media (max-width: 991.98px) {
  :root { --kds-escala: 1; }
}
html { font-size: calc(var(--kds-escala) * 100%); }

/* ---- 1. Primitivos ---- */
:root {
  --kds-paleta-gris-0:   #fff;
  --kds-paleta-gris-50:  #f8f9fa;
  --kds-paleta-gris-100: #eee;
  --kds-paleta-gris-200: #dee2e6;
  --kds-paleta-gris-400: #999;
  --kds-paleta-gris-500: #BDBDBD;
  --kds-paleta-gris-600: #606060;
  --kds-paleta-gris-800: #333;
  --kds-paleta-gris-900: #1e1e1e;
  --kds-paleta-tinta:    #212529;
  --kds-paleta-pizarra:  #334155;

  --kds-paleta-verde-agua:        #2EB8A8;
  --kds-paleta-verde-agua-oscuro: #1FA090;
  --kds-paleta-verde-agua-claro:  #7EC8BC;
  --kds-paleta-rosa:              #E6607B;
  --kds-paleta-rosa-oscuro:       #D03355;
  --kds-paleta-rosa-claro:        #F2A3B2;
  --kds-paleta-ambar:             #E8B30E;
  --kds-paleta-ambar-oscuro:      #C4960A;
  --kds-paleta-ambar-claro:       #F5D76E;
  --kds-paleta-verde:             #77b65d;
  --kds-paleta-verde-oscuro:      #459b40;
  --kds-paleta-verde-claro:       #92cc78;
  --kds-paleta-celeste:           #83d5cf;
  --kds-paleta-celeste-oscuro:    #309c9f;
  --kds-paleta-celeste-claro:     #b9e6df;
  --kds-paleta-violeta:           #9B51E0;
  --kds-paleta-violeta-oscuro:    #8A3FCC;
  --kds-paleta-violeta-claro:     #C9A0F0;
  --kds-paleta-azul:              #4A90D9;
  --kds-paleta-azul-oscuro:       #2E6DB4;
  --kds-paleta-azul-claro:        #A3C4E9;
  --kds-paleta-bosque:            #4DA637;
  --kds-paleta-bosque-oscuro:     #3B8029;
  --kds-paleta-bosque-claro:      #7BC66A;

  /* Los pasteles de Kummara */
  --kds-paleta-pastel-verde-agua: #9fe6da;
  --kds-paleta-pastel-menta:      #c7ecb0;
  --kds-paleta-pastel-manteca:    #ffe6a3;
  --kds-paleta-pastel-durazno:    #ffc9b3;
  --kds-paleta-pastel-rosa:       #f9bcd4;
  --kds-paleta-pastel-lavanda:    #cdc2f2;
  --kds-paleta-pastel-cielo:      #aadcf7;

  /* Ajustes: el mismo color con un poco de negro, para que se lea */
  --kds-paleta-verde-agua-profundo: #17786c; /* #1FA090 75% + negro */
  --kds-paleta-verde-legible:       #377a33; /* #459b40 79% + negro */
  --kds-paleta-gris-control:        #85888a; /* #dee2e6 60% + negro */

  /* La paleta de siempre, con los mismos valores (antes sólo en admin/theme-buttons.css) */
  --color-teal:         var(--kds-paleta-verde-agua);
  --color-teal-dark:    var(--kds-paleta-verde-agua-oscuro);
  --color-teal-light:   var(--kds-paleta-verde-agua-claro);
  --color-rose:         var(--kds-paleta-rosa);
  --color-rose-dark:    var(--kds-paleta-rosa-oscuro);
  --color-rose-light:   var(--kds-paleta-rosa-claro);
  --color-amber:        var(--kds-paleta-ambar);
  --color-amber-dark:   var(--kds-paleta-ambar-oscuro);
  --color-amber-light:  var(--kds-paleta-ambar-claro);
  --color-green:        var(--kds-paleta-verde);
  --color-green-dark:   var(--kds-paleta-verde-oscuro);
  --color-green-light:  var(--kds-paleta-verde-claro);
  --color-cyan:         var(--kds-paleta-celeste);
  --color-cyan-dark:    var(--kds-paleta-celeste-oscuro);
  --color-cyan-light:   var(--kds-paleta-celeste-claro);
  --color-violet:       var(--kds-paleta-violeta);
  --color-violet-dark:  var(--kds-paleta-violeta-oscuro);
  --color-violet-light: var(--kds-paleta-violeta-claro);
  --color-blue:         var(--kds-paleta-azul);
  --color-blue-dark:    var(--kds-paleta-azul-oscuro);
  --color-blue-light:   var(--kds-paleta-azul-claro);
  --color-forest:       var(--kds-paleta-bosque);
  --color-forest-dark:  var(--kds-paleta-bosque-oscuro);
  --color-forest-light: var(--kds-paleta-bosque-claro);
  --color-gray:         var(--kds-paleta-gris-600);
  --color-gray-dark:    var(--kds-paleta-gris-800);
  --color-gray-darker:  var(--kds-paleta-gris-900);
  --color-gray-light:   var(--kds-paleta-gris-500);

  --kds-fuente: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- 2. Papeles: el claro del tema de KDS (el panel de hoy, valor por valor) ---- */
:root {
  --kds-fondo:               #fff;
  --kds-superficie:          #fff;
  --kds-superficie-2:        #f8f9fa;
  --kds-superficie-flotante: #fff;

  --kds-texto:           #212529;
  --kds-texto-2:         #606060;
  --kds-texto-3:         #606060;
  --kds-texto-sutil:     #6b6b6b; /* era #999 (2,85 a 1); 5,3 sobre blanco y 4,6 sobre la fila resaltada #eeeff0 (#2025, #2030) */
  --kds-texto-titulo:    #334155;
  --kds-texto-invertido: #fff;
  --kds-tinta:           #212529;

  --kds-borde:         #eee;
  --kds-borde-control: #dee2e6;

  --kds-acento:        #2EB8A8;
  --kds-acento-hover:  #1FA090;
  --kds-acento-activo: #1FA090;
  --kds-sobre-acento:  #212529; /* era #fff (2,46 a 1 sobre el verde agua); la tinta da 6,27 (#2025) */
  --kds-marca:         #2EB8A8;
  --kds-acento-texto:  #17786c; /* era #1FA090 (3,24 a 1); el verde agua profundo de kmma, 5,33 (#2025) */
  --kds-enlace:        #17786c;
  --kds-acento-fondo:  #e6f6f2;

  --kds-foco:       #2EB8A8;
  --kds-foco-claro: #fff;
  --kds-foco-ancho: 2px;
  --kds-foco-sep:   2px;

  /* Error y logro: la marca (borde, relleno, ícono) y el texto van separados. Un tema de pasteles pone el pastel en
     la marca y deja el texto en tinta. */
  --kds-peligro:       #D03355;
  --kds-peligro-texto: #b8294a; /* era #D03355: 4,44 a 1 sobre su pastel; 5,5 (#2025) */
  --kds-sobre-peligro: #fff;
  --kds-exito:         #459b40;
  --kds-exito-texto:   #306c2d; /* era #459b40 (3,49 a 1); el verde profundo de kmma, 6,35 (#2025) */
  --kds-aviso:         #E8B30E;
  --kds-aviso-texto:   #334155;
  --kds-info:          #247577; /* era #309c9f (3,29 a 1); el turquesa profundo de kmma, 5,41 (#2025) */

  --kds-peligro-fondo: color-mix(in srgb, #E6607B 9%, transparent);
  --kds-peligro-borde: color-mix(in srgb, #E6607B 30%, transparent);
  --kds-exito-fondo:   color-mix(in srgb, #77b65d 12%, transparent);
  --kds-exito-borde:   color-mix(in srgb, #77b65d 32%, transparent);
  --kds-aviso-fondo:   color-mix(in srgb, #E8B30E 12%, transparent);
  --kds-aviso-borde:   color-mix(in srgb, #E8B30E 32%, transparent);
  --kds-info-fondo:    color-mix(in srgb, #83d5cf 14%, transparent);
  --kds-info-borde:    color-mix(in srgb, #83d5cf 45%, transparent);

  --kds-dato:      #1FA090;
  --kds-velo:      rgba(15, 23, 42, .4);
  --kds-seleccion: Highlight;

  --kds-cargando-1: #2EB8A8;
  --kds-cargando-2: #77b65d;
  --kds-cargando-3: #E6607B;
  --kds-cargando-4: #E8B30E;

  /* El arcoíris de guardar, confirmar y avisar (#2012, #2029): el borde que gira en kdsConfirm, KdsSaveFlow y KdsToast */
  --kds-arcoiris: #2EB8A8, #77b65d, #E8B30E, #E6607B, #2EB8A8;

  /* Las series de un gráfico de líneas (#2028): la línea y su relleno, que ya lleva su transparencia */
  --kds-serie-1:         #4A90D9;
  --kds-serie-2:         #77b65d;
  --kds-serie-3:         #E8B30E;
  --kds-serie-1-relleno: rgba(74, 144, 217, .1);
  --kds-serie-2-relleno: rgba(119, 182, 93, .1);
  --kds-serie-3-relleno: rgba(232, 179, 14, .1);

  --kds-globito-fondo: rgba(97, 97, 97, .92);
  --kds-globito-texto: #fff;

  --kds-sombra-flotante: 0 .5rem 1.5625rem rgba(0, 0, 0, .1);
  --kds-sombra-dialogo:  0 1.5rem 3.75rem rgba(17, 24, 39, .24);
}

/* ---- Escalas ---- */
:root {
  /* Letra: seis tamaños, tres pesos */
  --kds-fs-1: .75rem;
  --kds-fs-2: .875rem;
  --kds-fs-3: 1rem;
  --kds-fs-4: 1.25rem;
  --kds-fs-5: 1.5rem;
  --kds-fs-6: 2rem;
  --kds-lh-titulo: 1.2;
  --kds-lh-ui:     1.4;
  --kds-lh-texto:  1.5;
  --kds-lh-prosa:  1.6;
  --kds-medida:    70ch;
  --kds-peso-texto:  400;
  --kds-peso-ui:     600;
  --kds-peso-fuerte: 700;

  /* Aire, de a 4px */
  --kds-aire-0: .125rem;
  --kds-aire-1: .25rem;
  --kds-aire-2: .5rem;
  --kds-aire-3: .75rem;
  --kds-aire-4: 1rem;
  --kds-aire-5: 1.5rem;
  --kds-aire-6: 2rem;
  --kds-aire-7: 3rem;
  --kds-aire-8: 4rem;
  --kds-aire-9: 6rem;

  /* Controles y tacto */
  --kds-control-alto:        2.375rem;
  --kds-control-alto-chico:  2rem;
  --kds-control-alto-grande: 3rem;
  --kds-control-fs:          1rem;
  --kds-tactil:              2.75rem;
  --kds-boton-pad-x:         1rem;
  --kds-boton-caja:          none;
  --kds-boton-tracking:      0;
  --kds-boton-fs:            var(--kds-fs-3);

  /* Radios: uno por tipo de superficie */
  --kds-radio:            .375rem;
  --kds-radio-superficie: .375rem;
  --kds-radio-pastilla:   62.4375rem;

  /* Capas: ningún z-index suelto */
  --kds-capa-pegado:      1020;
  --kds-capa-cabecera:    1030;
  --kds-capa-velo:        1090;
  --kds-capa-cajon:       1092;
  --kds-capa-modal:       1094;
  --kds-capa-confirmar:   1095;
  --kds-capa-desplegable: 1200;
  --kds-capa-aviso:       2000;
  --kds-capa-globito:     3000;

  /* Movimiento */
  --kds-dur-1:      .12s;
  --kds-dur-2:      .2s;
  --kds-dur-3:      .32s;
  --kds-dur-sale-2: .14s;
  --kds-dur-sale-3: .22s;
  --kds-curva:      cubic-bezier(.2, 0, 0, 1);
  --kds-curva-entra: cubic-bezier(.2, .8, .2, 1);
  --kds-curva-sale:  cubic-bezier(.4, 0, 1, 1);
  --kds-recorrido:  .5rem;

  /* Marco de página */
  --kds-marco-ancho:          80rem;
  --kds-marco-margen:         1rem;
  --kds-marco-angosto:        28rem;
  --kds-dos-columnas-costado: 24rem;
  /* --kds-pegado-arriba (el alto de lo fijo arriba) no se declara acá: lo publica cada sistema, y cada pieza lo
     lee con su propia cuenta de respaldo. */
}

@media (pointer: coarse) {
  :root { --kds-tactil: max(2.75rem, 44px); }
}

/* ---- Puente: los nombres viejos apuntan a los papeles (mismo valor en claro) ----
   También en .kds-zona-oscura: una variable que apunta a otra se resuelve donde se declara. */
:root,
.kds-zona-oscura {
  --ds-surface:         var(--kds-superficie);
  --ds-surface-raised:  var(--kds-superficie);
  --ds-surface-sunken:  var(--kds-superficie-2);
  --ds-surface-overlay: var(--kds-superficie-flotante);
  --ds-border:          var(--kds-borde);
  --ds-border-strong:   var(--kds-borde-control);
  --ds-text:            var(--kds-texto);
  --ds-text-muted:      var(--kds-texto-2);
  --ds-heading:         var(--kds-texto-titulo);
  /* El texto sobre AMARILLO (#943): el fondo y el ícono siguen amarillos, el texto va oscuro. */
  --ds-text-on-warning: var(--kds-aviso-texto);
  --ds-text-subtle:     var(--kds-texto-sutil);
  --ds-text-inverse:    var(--kds-texto-invertido);
  --ds-shadow-lg:       var(--kds-sombra-flotante);
}

:root {
  --ds-shadow:      0 2px .5rem rgba(0, 0, 0, .05);
  --ds-shadow-soft: 0 1px 2px rgba(17, 24, 39, .05);

  /* Escala de espaciado de antes: alias del aire */
  --ds-space-2xs: var(--kds-aire-1);
  --ds-space-xs:  var(--kds-aire-2);
  --ds-space-sm:  var(--kds-aire-3);
  --ds-space-md:  var(--kds-aire-4);
  --ds-space-lg:  var(--kds-aire-5);
  --ds-space-xl:  var(--kds-aire-6);
  --ds-space-2xl: var(--kds-aire-7);

  /* La tarjeta: plana, se define por su borde (canon 2026-08) */
  --ds-radius-card: var(--kds-radio-superficie);
  --ds-card-pad:    1.75rem;
}

/* ---- Modo oscuro: neutro, con los grises de KDS. Lo que flota sube de luz; el acento lleva letra oscura. ---- */
:root:where([data-kds-modo="oscuro"]),
.kds-zona-oscura {
  color-scheme: dark;

  --kds-fondo:               #121212; /* #1e1e1e 60% + negro */
  --kds-superficie:          #1e1e1e;
  --kds-superficie-2:        #292929; /* #1e1e1e 95% + blanco */
  --kds-superficie-flotante: #292929;

  --kds-texto:           #f8f9fa;
  --kds-texto-2:         #BDBDBD;
  --kds-texto-3:         #a1a1a1; /* #BDBDBD 85% + negro */
  --kds-texto-sutil:     #a1a1a1;
  --kds-texto-titulo:    #f8f9fa;
  --kds-texto-invertido: #121212;
  --kds-tinta:           #fff;

  --kds-borde:         #333;
  --kds-borde-control: #7d7d7d; /* #606060 82% + blanco */

  --kds-acento:        #2EB8A8;
  --kds-acento-hover:  #4dc3b5; /* verde agua 85% + blanco */
  --kds-acento-activo: #2EB8A8;
  --kds-sobre-acento:  #1e1e1e;
  --kds-marca:         #2EB8A8;
  --kds-acento-texto:  #2EB8A8;
  --kds-enlace:        #4dc3b5;
  --kds-acento-fondo:  #213734;
  --kds-foco:          #2EB8A8;

  --kds-peligro:       #ea788f; /* rosa 85% + blanco */
  --kds-peligro-texto: #ea788f;
  --kds-sobre-peligro: #1e1e1e;
  --kds-exito:         #77b65d;
  --kds-exito-texto:   #77b65d;
  --kds-aviso:         #E8B30E;
  --kds-aviso-texto:   #f8f9fa;
  --kds-info:          #83d5cf;

  --kds-peligro-fondo: #3e292d;
  --kds-peligro-borde: color-mix(in srgb, #E6607B 40%, #1e1e1e);
  --kds-exito-fondo:   #2c3628;
  --kds-exito-borde:   color-mix(in srgb, #77b65d 40%, #1e1e1e);
  --kds-aviso-fondo:   #3e361b;
  --kds-aviso-borde:   color-mix(in srgb, #E8B30E 40%, #1e1e1e);
  --kds-info-fondo:    #2e3b3a;
  --kds-info-borde:    color-mix(in srgb, #83d5cf 40%, #1e1e1e);

  --kds-dato:      #2EB8A8;
  --kds-velo:      rgba(0, 0, 0, .6);
  --kds-seleccion: #245c55;

  --kds-globito-fondo: #f8f9fa;
  --kds-globito-texto: #1e1e1e;

  --kds-sombra-flotante: 0 .5rem 1.5rem rgba(0, 0, 0, .5);
  --kds-sombra-dialogo:  0 1.5rem 3.75rem rgba(0, 0, 0, .6);

  /* Las piezas que todavía leen la paleta: los tintes claros pasan a tintes sobre la superficie oscura */
  --color-teal-light:   color-mix(in srgb, #2EB8A8 22%, #1e1e1e);
  --color-rose-light:   color-mix(in srgb, #E6607B 22%, #1e1e1e);
  --color-amber-light:  color-mix(in srgb, #E8B30E 22%, #1e1e1e);
  --color-green-light:  color-mix(in srgb, #77b65d 22%, #1e1e1e);
  --color-cyan-light:   color-mix(in srgb, #83d5cf 22%, #1e1e1e);
  --color-violet-light: color-mix(in srgb, #9B51E0 22%, #1e1e1e);
  --color-blue-light:   color-mix(in srgb, #4A90D9 22%, #1e1e1e);
  --color-forest-light: color-mix(in srgb, #4DA637 22%, #1e1e1e);
  --color-gray-light:   #404040; /* #1e1e1e 85% + blanco */

  /* La banda del encabezado de una pantalla (kds-page-header, #2034) */
  --kds-page-header-fondo: var(--kds-superficie-2);
  --kds-page-header-sombra: inset 0 -1px 0 var(--kds-borde), 0 .375rem .875rem -2px rgba(0, 0, 0, .18);
  --kds-page-header-meta:  var(--kds-texto-2);
}

/* ---- Modo kmma: el claro con la identidad de Kummara (verde agua y pasteles) ---- */
:root:where([data-kds-modo="kmma"]) {
  color-scheme: light;

  --kds-fondo:               #f5fcfb; /* pastel verde agua 10% + blanco */
  --kds-superficie:          #fff;
  --kds-superficie-2:        #eafaf7; /* pastel verde agua 22% + blanco */
  --kds-superficie-flotante: #fff;

  --kds-texto:           #212529;
  --kds-texto-2:         #606060;
  --kds-texto-3:         #606060;
  --kds-texto-sutil:     #606060;
  --kds-texto-titulo:    #212529;
  --kds-texto-invertido: #fff;
  --kds-tinta:           #212529;

  --kds-borde:         #d4f4ee; /* pastel verde agua 45% + blanco */
  --kds-borde-control: #588c84; /* #7EC8BC 70% + negro */

  --kds-acento:        #9fe6da; /* kmma pastel (#2027): lo lleno en pastel verde agua, con la letra en tinta (10,9 a 1) */
  --kds-acento-hover:  #86ddcf;
  --kds-acento-activo: #86ddcf;
  --kds-sobre-acento:  #212529;
  --kds-marca:         #17786c;
  --kds-acento-texto:  #17786c;
  --kds-enlace:        #17786c;
  --kds-acento-fondo:  #ddf6f2; /* pastel verde agua 35% + blanco */
  --kds-foco:          #17786c;

  /* Error y logro en los pasteles de Kummara, con el texto en tinta */
  --kds-peligro:       #f9bcd4;
  --kds-peligro-texto: #212529;
  --kds-sobre-peligro: #212529;
  --kds-exito:         #c7ecb0;
  --kds-exito-texto:   #212529;
  --kds-aviso:         #E8B30E;
  --kds-aviso-texto:   #212529;
  --kds-info:          #309c9f;

  --kds-peligro-fondo: #fde4ee; /* pastel rosa 40% + blanco */
  --kds-peligro-borde: #f9bcd4;
  --kds-exito-fondo:   #e6f6db; /* pastel menta 45% + blanco */
  --kds-exito-borde:   #c7ecb0;
  --kds-aviso-fondo:   #fff4d6; /* pastel manteca 45% + blanco */
  --kds-aviso-borde:   #ffe6a3;
  --kds-info-fondo:    #ddf1fc; /* pastel cielo 40% + blanco */
  --kds-info-borde:    #aadcf7;

  --kds-dato:      #1FA090;
  --kds-seleccion: #9fe6da;

  --kds-globito-fondo: #212529;
  --kds-globito-texto: #fff;

  /* Kmma pastel (#2027): la paleta de rellenos. Siempre con la letra en tinta (9,7 a 12,8 a 1). */
  --kds-pastel-agua:    #9fe6da;
  --kds-pastel-agua-2:  #86ddcf;
  --kds-pastel-agua-3:  #cdf1eb;
  --kds-pastel-menta:   #c7ecb0;
  --kds-pastel-menta-2: #a9dd8f;
  --kds-pastel-manteca: #ffe6a3;
  --kds-pastel-rosa:    #f9bcd4;
  --kds-pastel-rosa-2:  #f49ab9;
  --kds-pastel-cielo:   #aadcf7;
  --kds-pastel-lila:    #dccbf5;
  --kds-pastel-gris:    #e3e6ea;

  --kds-table-head-bg: var(--kds-pastel-agua-3);
  --kds-table-head-fg: #212529;
  --kds-sobre-pastel:  #212529; /* la letra sobre un relleno pastel (#2039) */
  --kds-cargando-1:    var(--kds-pastel-agua-2);
  --kds-cargando-2:    var(--kds-pastel-menta-2);
  --kds-cargando-3:    var(--kds-pastel-rosa-2);
  --kds-cargando-4:    #ffd66b;

  --kds-page-header-fondo: var(--kds-superficie-2);
  --kds-page-header-sombra: inset 0 -1px 0 var(--kds-borde), 0 .375rem .875rem -2px rgba(0, 0, 0, .18);

  --kds-arcoiris: var(--kds-pastel-agua), var(--kds-pastel-cielo), var(--kds-pastel-lila), var(--kds-pastel-rosa), var(--kds-pastel-manteca), var(--kds-pastel-menta), var(--kds-pastel-agua);

  /* El gráfico de líneas en pastel: el relleno pastel y la línea en su tono profundo, para que se vea dónde va (5,3 a 6,3 a 1) */
  --kds-serie-1:         #2E6DB4;
  --kds-serie-2:         #306c2d;
  --kds-serie-3:         #896907; /* el ámbar de texto de kmma: #C4960A 70% + negro */
  --kds-serie-1-relleno: rgba(170, 220, 247, .45);
  --kds-serie-2-relleno: rgba(199, 236, 176, .45);
  --kds-serie-3-relleno: rgba(255, 230, 163, .45);
}

/* ---- Modo kmma oscuro (#2039): el oscuro con la identidad de Kummara. La página lleva data-kds-modo="oscuro" (todo lo
   que el oscuro ya resolvió vale igual) y data-kds-tono="kmma", que sólo cambia los colores: el fondo con un dejo de
   verde agua, la acción en pastel verde agua con letra oscura, error y logro en sus pasteles y el arcoíris pastel. ---- */
:root:where([data-kds-modo="oscuro"][data-kds-tono="kmma"]) {
  --kds-fondo:               #141c1b; /* verde agua 6% + #121212 */
  --kds-superficie:          #1f2a29; /* verde agua 8% + #1e1e1e */
  --kds-superficie-2:        #293433; /* verde agua 8% + #292929 */
  --kds-superficie-flotante: #293433;

  --kds-borde:         #33403e;
  --kds-borde-control: #7d8f8c;

  --kds-acento:        #9fe6da; /* el pastel verde agua de kmma, con la letra oscura */
  --kds-acento-hover:  #b5ece3; /* #9fe6da 75% + blanco */
  --kds-acento-activo: #86ddcf;
  --kds-sobre-acento:  #121212;
  --kds-marca:         #9fe6da;
  --kds-acento-texto:  #9fe6da;
  --kds-enlace:        #9fe6da;
  --kds-acento-fondo:  color-mix(in srgb, #9fe6da 16%, var(--kds-superficie));
  --kds-foco:          #9fe6da;

  --kds-peligro:       #f9bcd4;
  --kds-peligro-texto: #f9bcd4;
  --kds-sobre-peligro: #121212;
  --kds-exito:         #c7ecb0;
  --kds-exito-texto:   #c7ecb0;
  --kds-aviso:         #ffe6a3;
  --kds-info:          #aadcf7;

  --kds-peligro-fondo: color-mix(in srgb, #f9bcd4 14%, var(--kds-superficie));
  --kds-peligro-borde: color-mix(in srgb, #f9bcd4 40%, var(--kds-superficie));
  --kds-exito-fondo:   color-mix(in srgb, #c7ecb0 14%, var(--kds-superficie));
  --kds-exito-borde:   color-mix(in srgb, #c7ecb0 40%, var(--kds-superficie));
  --kds-aviso-fondo:   color-mix(in srgb, #ffe6a3 12%, var(--kds-superficie));
  --kds-aviso-borde:   color-mix(in srgb, #ffe6a3 40%, var(--kds-superficie));
  --kds-info-fondo:    color-mix(in srgb, #aadcf7 14%, var(--kds-superficie));
  --kds-info-borde:    color-mix(in srgb, #aadcf7 40%, var(--kds-superficie));

  --kds-dato:      #9fe6da;
  --kds-seleccion: color-mix(in srgb, #9fe6da 30%, var(--kds-superficie));

  --kds-pastel-agua:    #9fe6da;
  --kds-pastel-agua-2:  #86ddcf;
  --kds-pastel-agua-3:  #cdf1eb;
  --kds-pastel-menta:   #c7ecb0;
  --kds-pastel-menta-2: #a9dd8f;
  --kds-pastel-manteca: #ffe6a3;
  --kds-pastel-rosa:    #f9bcd4;
  --kds-pastel-rosa-2:  #f49ab9;
  --kds-pastel-cielo:   #aadcf7;
  --kds-pastel-lila:    #dccbf5;
  --kds-pastel-gris:    #e3e6ea;

  --kds-cargando-1: var(--kds-pastel-agua-2);
  --kds-cargando-2: var(--kds-pastel-menta-2);
  --kds-cargando-3: var(--kds-pastel-rosa-2);
  --kds-cargando-4: #ffd66b;

  --kds-arcoiris: var(--kds-pastel-agua), var(--kds-pastel-cielo), var(--kds-pastel-lila), var(--kds-pastel-rosa), var(--kds-pastel-manteca), var(--kds-pastel-menta), var(--kds-pastel-agua);

  --kds-serie-1:         #aadcf7;
  --kds-serie-2:         #c7ecb0;
  --kds-serie-3:         #ffe6a3;
  --kds-serie-1-relleno: rgba(170, 220, 247, .18);
  --kds-serie-2-relleno: rgba(199, 236, 176, .18);
  --kds-serie-3-relleno: rgba(255, 230, 163, .18);

  --kds-sobre-pastel:  #121212; /* los rellenos pastel del kmma llevan la letra oscura también acá */
  --kds-table-head-bg: color-mix(in srgb, #9fe6da 22%, var(--kds-superficie)); /* el encabezado verde agua del kmma, en oscuro */
  --kds-table-head-fg: #f8f9fa;

  --color-teal-light:   color-mix(in srgb, #9fe6da 18%, var(--kds-superficie));
  --color-gray-light:   #3a4645;
}