/* Spoter Design System — Tokens (piloto Conversaciones)
   Portado verbatim de docs/spoter_design_system/tokens/{palette,semantic,typography,spacing}.css
   Reemplaza a las variables --sp-* de webroot/css/themes/theme-{light,dark}.css. */

/* ══ Paleta (raw, theme-independent) ══ */
:root {
  /* ── Brand · Spoter Pink ───────────────────────────── */
  --pink-50:  #fdeaf3;
  --pink-100: #fbd0e2;
  --pink-300: #f185b6;
  --pink-500: #e42d7f;
  --pink-600: #c8226d;
  --pink-700: #a7004b;
  --pink-500-rgb: 228, 45, 127; /* 2026-07-23: triplete RGB de --pink-500, para usos con alpha (rgba) como box-shadow de spoter.css */

  /* ── Brand · Deep Indigo ───────────────────────────── */
  --indigo-900: #2e245a;
  --indigo-800: #423678;
  --indigo-700: #4a4a7f;
  --indigo-500: #616193;
  --indigo-300: #a6a6cc;
  --indigo-100: #d6d6ea;
  --indigo-50:  #e9eaf1; /* 2026-07-23: agregado — la rampa indigo saltaba de indigo-100 a nada más claro (pink sí tiene pink-50). Valor ya en producción (.btn-light de custom.css), no inventado. */

  /* ── Secondary & interactive ───────────────────────── */
  --mint-400: #2bdaa8;
  --mint-500: #28cd9e;
  /* mint-50/mint-700 agregados 2026-07-22: existían como hex crudo (#dcf7ee/#0f7a5c) en
     design-system/components.css (.sp-tag-mint), sin token — mismo hallazgo que el que ya motivó
     --text-on-warning. Valores ya en producción, no colores nuevos inventados; contraste verificado
     acá porque no se había hecho antes: mint-700 sobre mint-50 = 4.69:1, pasa AA texto (4.5:1). */
  --mint-50:  #dcf7ee;
  --mint-700: #0f7a5c;
  --blue-400: #2196f3;
  --blue-400-rgb: 33, 150, 243; /* 2026-07-24: triplete RGB de --blue-400, para usos con alpha (rgba) como el fondo pálido de wizard.css (era lightblue) */
  --blue-500: #0088ff;
  --blue-600: #1a6fc4;
  --cyan-500: #32ade6;

  /* ── Neutral ramp · Light ──────────────────────────── */
  --grey-0:   #ffffff;
  --grey-25:  #f6f7f9;
  --grey-50:  #efeff5;
  --grey-100: #dde2e6;
  --grey-200: #ced4da;
  --grey-300: #abb0c1;
  --grey-400: #adb5bd;
  --grey-500: #797e8f;
  --grey-600: #656e83;
  --grey-700: #424a5b;
  --grey-900: #212529;

  /* ── Neutral ramp · Dark ───────────────────────────── */
  --ink-0:   #0a0a0a;
  --ink-50:  #141414;
  --ink-100: #1c1c1f;
  --ink-150: #232327;
  --ink-200: #2b2b30;
  --ink-300: #38383f;
  --ink-400: #4a4a52;

  /* ── Status hues ───────────────────────────────────── */
  --green-500:  #28a745;
  --green-600:  #009951;
  --red-500:    #dc3545;
  --red-600:    #c00f0c;
  --amber-400:  #ffc107;
  --orange-500: #ff9500;
  --info-500:   #0288d1;

  --green-bright:  #4ae968;
  --red-bright:    #ff6961;
  --amber-bright:  #ffb340;
  --blue-bright:   #5cb8ff;

  /* ── Decorativos (avatar-label / tags de color libre, SIN semántica de estado) ──
     Nacen 2026-07-23: custom.css tenía 3 hex crudos en .avatar-label.red/.yellow/.green,
     una paleta de 3 puntos de color puramente decorativa (elegir un color para un contacto/avatar),
     distinta a --status-* y --red-500/--amber-400 (esos SÍ tienen semántica: error, warning, etc.).
     Nombres deliberadamente distintos de los hues de estado para no mezclar los dos sistemas.
     El verde coincide EXACTO con --mint-400 ya existente — se reusa, no se duplica. */
  --coral-500: #f05564;
  --sun-400:   #f8dd57;

  /* ── Teal (estados de Kanban/Tickets, ver categoría --stage-* más abajo) ──
     Nacen 2026-07-23: #2A6080/#2A9D94 eran hex crudos en tickets.css sin match en ninguna
     rampa existente (ni --blue-*, ni --mint-*). Valores ya en producción, no inventados. */
  --teal-700: #2a6080;
  --teal-500: #2a9d94;

  /* ── Data-viz · categorical set ────────────────────── */
  --dv-indigo: #2e245a;
  --dv-pink:   #e42d7f;
  --dv-mint:   #2bdaa8;
  --dv-blue:   #0088ff;
  --dv-cyan:   #32ade6;
  --dv-orange: #ff9500;
  --dv-amber:  #ffc107;
  --dv-slate:  #616193;

  --state-neutral:   #797e8f;
  --state-discovery: #616193;
  --state-live:      #2bdaa8;
  --state-attention: #ff9500;
  --state-highlight: #e42d7f;

  /* ── WhatsApp-style chat canvas ────────────────────── */
  /* 2026-08-13: era #efeae2 (beige WhatsApp original) — pedido externo, a pedido de Flor,
     de acercar el resultado final al look anterior a la unificación del asset de fondo
     (ver Changelog). Solo light: dark no reportó problema, --wa-canvas-dark sin cambios. */
  --wa-canvas-light:   #ffffff;
  --wa-canvas-dark:    #0b141a;
  --wa-bubble-in:      #ffffff;
  --wa-bubble-out:     #d9fdd3;
  --wa-bubble-in-dk:   #1f2c33;
  --wa-bubble-out-dk:  #144d37;

  /* 2026-08-13: opacidad del velo (--chat-canvas semitransparente) que atenúa el patrón de
     fondo tileado del chat (webroot/img/spoter-bg.png, ver .chat-content::before en
     whatsapp.css). Pedido externo priorizado por Flor: mismo asset PNG para los 2 temas,
     ajustable acá sin editar ningún PNG. Mismo valor para light y dark (confirmado por Flor).
     Bajado de 0.40 a 0.30 (menos velo = patrón menos transparente/más visible) al combinarlo
     con --wa-canvas-light en blanco — juntos se acercan más al look anterior que 0.40 solo. */
  --chat-pattern-dim: 0.30;

  /* 2026-08-14: tamaño del tile de spoter-bg.png (738x902 nativo), pedido del cliente vía Flor:
     unificar Panel de Control (antes tamaño natural, 738px — "demasiado grande" en esa columna
     angosta) y el chat tradicional de Contactos (antes background-size:35% del contenedor —
     "demasiado chico" en ese panel ancho). Eran 2 mecanismos distintos (px fijo vs. % relativo al
     contenedor), no solo 2 valores — por eso se veían opuestos en cada pantalla. Fix: un solo
     tamaño fijo en px, independiente del ancho del contenedor, consumido por .chat-content
     (whatsapp.css) Y #pc-col-chat (PanelControl/index.ctp) — ver comentarios ahí. Mockeado en las
     2 anchuras reales (~340px Panel de Control, ~600px Contactos) antes de elegir este valor. */
  --chat-pattern-size: 380px 464px;
}

/* ══ Semántica (role tokens) — la única capa de color que deben usar los componentes ══ */
:root, [data-theme="light"], .light {
  --surface-app:      var(--grey-25);
  --surface-default:  var(--grey-0);
  --surface-raised:   var(--grey-0);
  --surface-sunken:   var(--grey-50);
  --surface-field:    var(--grey-0);
  --surface-brand:    var(--indigo-900);
  --surface-hover:    var(--grey-50);

  --text-primary:     var(--grey-900);
  --text-secondary:   var(--grey-600);
  --text-muted:       var(--grey-700);
  --text-placeholder: var(--grey-300);
  --text-on-brand:    #ffffff;
  --text-link:        var(--blue-500);

  --border-default:   var(--grey-100);
  --border-strong:    var(--grey-500);   /* corregido 2026-07-21: grey-400 daba 2.07:1 sobre blanco, no llega al mínimo 3:1 (WCAG 1.4.11, borde de componente interactivo). grey-500 = 4.04:1. Neutro — para borde "de marca" más claro ver --border-accent. */
  --border-accent:    var(--indigo-500); /* nace 2026-07-21: pedido de Flor de mover el borde de .btn-outline-secondary de gris a una escala de primarios más clara. indigo-500 = 5.77:1 sobre blanco (indigo-300, más claro, daba 2.35:1 — no llega al mínimo 3:1, se descartó). */
  --border-focus:     var(--indigo-900);
  --accent-primary:   var(--indigo-900);
  --accent-pink:      var(--pink-500);
  --accent-mint:      var(--mint-400);

  --status-success:   var(--green-500);
  --status-danger:    var(--red-500);
  --status-warning:   var(--amber-400);
  --status-info:      var(--info-500);
  --status-success-bg: #d5f8ee;
  --status-danger-bg:  #fcdde0;
  --status-warning-bg: #fef8dd;
  --status-info-bg:    #e6f2fb;
  --text-on-warning:   #8a6d00;   /* contraste 4.61:1 sobre --status-warning-bg light. Ver DIR-BADGE-05 / DIR-TAG-03. */
  --text-on-success:   var(--mint-700);   /* contraste 4.67:1 sobre --status-success-bg light. Ver DIR-BADGE-04. --status-success (verde puro) no alcanza (2.76:1). */

  /* ── Categoría "stage" — 6 estados fijos de Kanban/Tickets (2026-07-23, a pedido de Flor) ──
     TicketsComponent::ALL_ESTADOS_TICKET se mapea 1:1 a estas 6 clases Bootstrap en
     Element/Scripts/kanban.ctp, que jkanban.js aplica al header de cada columna. Antes solo 3
     de 6 tenían color de marca (warning/info/primary, hardcodeados); success/danger/light
     quedaban con el default de Bootstrap, sin marca y sin adaptar a dark theme. No se unifica
     con Embudos (ver --gradient-etapa-* más abajo) porque son sistemas distintos: acá hay un
     enum fijo real, en Embudos un degradé calculado según cantidad de etapas — confirmado con
     Flor antes de tocar nada. */
  --stage-abierto:    var(--indigo-900);  /* ESTADO_ABIERTO (bg-warning) */
  --stage-pendiente:  var(--teal-700);    /* ESTADO_PENDIENTE / ESTADO_VALIDADO (bg-info) */
  --stage-en-curso:   var(--teal-500);    /* ESTADO_EN_CURSO / ESTADO_PREPARADO (bg-primary) */
  --stage-resuelto:   var(--mint-500); /* ESTADO_RESUELTO / ESTADO_DEVUELTO (bg-success) — 2026-07-23: Flor pidió algo apenas más claro que --status-success (--green-500, #28a745), que se sentía muy distinto del resto de la paleta stage (verde puro vs. los teal/indigo apagados de los otros 5). --mint-500 (#28cd9e) es ~27% más claro y comparte tono con --teal-500 (en-curso), da más continuidad visual. Alternativa si se quiere más luz aún: --mint-400 (#2bdaa8, ~36% más claro). */
  --stage-cancelado:  var(--status-danger);  /* ESTADO_CANCELADO (bg-danger) — antes Bootstrap default, ahora token real (mismo valor, --red-500) */
  --stage-finalizado: var(--grey-100);       /* ESTADO_FINALIZADO (bg-light) — se queda clara a propósito en los 2 temas, va con texto oscuro (text-dark) */

  /* ── Degradé de etapas de Embudo (2026-07-23) — NO es la misma categoría que --stage-*.
     KpiComponent::generarColoresRGB() (PHP, src/Controller/Component/Frontend/KpiComponent.php)
     calcula un degradé entre estos 2 extremos, repartido entre la cantidad de etapas de CADA
     embudo (variable, no un enum fijo). PHP no puede leer variables CSS, así que estos valores
     viven duplicados ahí — mantenerlos sincronizados a mano si se tocan acá. */
  --gradient-etapa-start: #b4ffc7; /* sin match en ninguna rampa existente, valor ya en producción */
  --gradient-etapa-end:   var(--indigo-900); /* antes rgb(46,36,89) en el PHP — redondeo de 1 unidad, corregido para coincidir exacto */

  --chat-canvas:      var(--wa-canvas-light);
  --chat-bubble-in:   var(--wa-bubble-in);
  --chat-bubble-out:  var(--wa-bubble-out);
  --chat-bubble-system: var(--blue-600);

  /* 2026-07-28: fix paridad (sugerencia de Flor) — tokens nuevos --chat-tag-0..9 y --overlay-scrim,
     agregados para tokenizar whatsapp.css (etiquetas de color de chat y overlay de carga/hover). */
  --chat-tag-0: #fdf8da; --chat-tag-1: #ffe6f1; --chat-tag-2: #ffad8d; --chat-tag-3: #c2def3; --chat-tag-4: #c5bbe0;
  --chat-tag-5: #f0f1f5; --chat-tag-6: #d2eddc; --chat-tag-7: #b3f9ef; --chat-tag-8: #fcdfd7; --chat-tag-9: #f3add1;
  --overlay-scrim: rgba(255, 255, 255, .6);

  /* Portado 2026-07-17 desde .chat-mass-note en whatsapp.css (nota "MASS" del gerente/IA en el chat).
     Hex crudos, no pertenecen a ninguna rampa (--pink-* e --indigo-*) — quedan igual en dark porque el
     componente de origen tampoco tiene variante dark hoy (gap conocido, no se resuelve acá). */
  --gradient-ai: linear-gradient(to right, #efd9f9, #e2a1ff);

  /* Nace 2026-07-17 en la card Recomendación IA (ícono + botón "Resolver"). Decisión de Flor: este
     gradiente queda reservado SOLO para confirmar acciones sugeridas por IA (equivalente al "solo un
     botón brand por vista" de otros design systems) — no usarlo como botón primario genérico. Ver
     .sp-btn-ai-confirm en components.css.
     Ajustado 2026-07-17 (2da vuelta): la 1ra versión (#c98edb/#8a3fd1, saturada pero libre) daba
     ~2.5:1 de contraste con texto blanco en el extremo claro — no pasa WCAG AA (4.5:1). Se reemplazó
     por los 2 colores de marca ya existentes en la paleta (--indigo-900/--pink-600), que dan 13.9:1 y
     5.4:1 respectivamente (calculado, no solo estimado) con blanco — el punto medio del gradiente da
     ~9.3:1, así que todo el recorrido queda arriba de 4.5:1. Bonus: usa colores que ya son de marca en
     vez de hex nuevos sueltos, menos deuda de paleta. */
  --gradient-ai-action: linear-gradient(to right, var(--indigo-900), var(--pink-600));

  /* 3ra variante, nace 2026-07-17: fondo de card de recomendación (faqRecomendacionIA.ctp), NO el
     mismo uso que --gradient-ai (fondo de burbuja de mensaje en el chat, más pastel/pálido) ni que
     --gradient-ai-action (relleno de texto/ícono, necesita contraste con blanco).
     Ajustado 2 veces el mismo día: 1ra vuelta fue vívida (#e9c9f7/#c48ce8, comparada contra el
     mockup de referencia de Flor). Después de ver la card+la nota del chat juntas en un preview,
     Flor pidió aclarar bastante el fondo — versión final más clara: #f5e6fa/#e3bdf0. La línea de
     acento de 3px arriba de la card (el gradiente oscuro, --gradient-ai-action) es la que ahora
     lleva el peso visual "de marca IA", no el fondo. Texto encima sigue en --text-primary (aunque
     con este fondo más claro ya no haría falta estrictamente, se deja así por margen y consistencia
     con el resto de la card).
     Dark: a propósito igual que en light, mismo criterio que --gradient-ai/--gradient-ai-action —
     el "look de IA" es una marca visual reconocible que no debe diluirse según el tema (confirmado
     2026-07-29, cierre de dark theme). Si en una revisión visual real se ve como un parche fuera de
     tono sobre superficie oscura, la opción a evaluar es oscurecer el extremo final (--e3bdf0) sin
     tocar el inicio, no aplicar un gradiente nuevo.
     2026-08-14: esa revisión visual real pasó — confirmado que en dark este gradiente (idéntico al
     light) rompe el contraste de --text-primary/--text-muted sobre la card (1.02:1–1.4:1 medido,
     bien debajo de AA 4.5:1, texto prácticamente invisible). Sigue existiendo tal cual para
     .chat-mass-note (whatsapp.css) — ahí no se toca. Para .sp-card-ai (Plan de Acción IA,
     PanelControl/index.ctp) se creó --gradient-ai-card-subtle abajo, que sí varía por tema. */
  --gradient-ai-card: linear-gradient(135deg, #f5e6fa, #e3bdf0);

  /* 2026-08-14: --gradient-ai-card-subtle (fondo alternativo para .sp-card-ai, Candidato A) vivió acá
     un día — rechazado en demo (badges/tags anidados no se recortaban del fondo pastel) y reemplazado
     por fondo plano --surface-default + box-shadow inset. Ver comentario de .sp-card-ai en
     components.css y Changelog. Token removido, no queda ningún consumidor. */

  --glass-bg:      rgba(255, 255, 255, 0.55);
  --glass-border:  rgba(255, 255, 255, 0.65);
  --glass-blur:    16px;

  --neu-bg:        #eef0f4;
  --neu-light:     rgba(255, 255, 255, 0.90);
  --neu-dark:      rgba(174, 178, 196, 0.55);
}

[data-theme="dark"], .dark {
  --surface-app:      var(--ink-50);
  --surface-default:  var(--ink-100);
  --surface-raised:   var(--ink-150);
  --surface-sunken:   var(--ink-0);
  --surface-field:    var(--ink-150);
  --surface-brand:    var(--indigo-700);
  --surface-hover:    var(--ink-200);

  --text-primary:     #e1e1e1;
  --text-secondary:   #abb0c1;
  --text-muted:       #c4c8d4;
  --text-placeholder: #6b6f7d;
  --text-on-brand:    #ffffff;
  --text-link:        var(--blue-bright);

  --border-default:   var(--ink-300);
  --border-strong:    var(--grey-300);   /* corregido 2026-07-21: ink-400 daba 1.94:1 sobre ink-100, no llega al mínimo 3:1. grey-300 = 7.86:1 — mismo valor que ya usa --text-secondary en dark, consistente. */
  --border-accent:    var(--indigo-300); /* nace 2026-07-21, ver bloque light. indigo-500 acá solo da 2.95:1 (no alcanza) — indigo-300 = 7.24:1 sobre ink-100, mismo valor que --border-focus dark (reutilizado, no un tono nuevo suelto). */
  --border-focus:     var(--indigo-300);
  --accent-primary:   var(--pink-500);
  --accent-pink:      var(--pink-500);
  --accent-mint:      var(--mint-400);

  --status-success:   var(--green-bright);
  --status-danger:    var(--red-bright);
  --status-warning:   var(--amber-bright);
  --status-info:      var(--blue-bright);
  --status-success-bg: #0c4a3a;
  --status-danger-bg:  #3a1b1e;
  --status-warning-bg: #3a2e12;
  --status-info-bg:    #12263a;
  --text-on-warning:   var(--amber-bright);   /* #ffb340 → 7.45:1 sobre --status-warning-bg dark. Reemplaza el #8a6d00 hardcodeado que fallaba en dark. */
  --text-on-success:   var(--status-success);   /* ya pasa en dark (6.39:1) con el mismo valor que --status-success — el problema era solo en light. */

  --stage-abierto:    var(--indigo-700);  /* mismo criterio que --surface-brand dark (indigo-900→indigo-700) */
  --stage-pendiente:  #3e87ad; /* 2026-07-28 fix paridad (sugerencia de Flor): --teal-700 aclarado ~25%, antes idéntico al light — gap cerrado (ver guidelines/ds-audit.md) */
  --stage-en-curso:   #4fc4ba; /* fix paridad: --teal-500 aclarado ~25%, antes idéntico al light */
  --stage-resuelto:   var(--mint-400); /* fix paridad: un paso más claro que --mint-500 (ya existía en la paleta), antes idéntico al light */
  --stage-cancelado:  var(--status-danger);  /* hereda --red-bright en dark automáticamente */
  --stage-finalizado: var(--grey-100);       /* a propósito clara en los 2 temas, va con texto oscuro */

  --chat-canvas:      var(--wa-canvas-dark);
  --chat-bubble-in:   var(--wa-bubble-in-dk);
  --chat-bubble-out:  var(--wa-bubble-out-dk);
  --chat-bubble-system: var(--blue-600);

  /* 2026-07-28: fix paridad (sugerencia de Flor) — contraparte dark de --chat-tag-0..9/--overlay-scrim. */
  --chat-tag-0: #4a4522; --chat-tag-1: #4a2536; --chat-tag-2: #5a3626; --chat-tag-3: #243a4a; --chat-tag-4: #332c4a;
  --chat-tag-5: #2b2b30; --chat-tag-6: #1f3a28; --chat-tag-7: #1a4a44; --chat-tag-8: #4a2c24; --chat-tag-9: #4a2638;
  --overlay-scrim: rgba(10, 10, 10, .6);

  /* Cierre de dark theme 2026-07-29 (propuesta de Claude, confirmada por Flor): el inicio del
     degradé de etapas (Embudo) usaba el mismo #b4ffc7 crudo de light, que nunca se había redeclarado
     acá. Se reemplaza por --mint-400 (#2bdaa8), ya usado como "success/resuelto" en dark — mismo
     criterio de marca que --stage-resuelto, en vez de un verde nuevo sin relación con la paleta.
     El extremo final (--gradient-etapa-end = var(--indigo-900)) NO se toca: ya es color de marca,
     funciona igual en los 2 temas.
     OJO — pendiente de decisión: `KpiComponent::generarColoresRGB()` (PHP) no lee variables CSS,
     tiene el degradé hardcodeado en un array y hoy SIEMPRE devuelve la versión light, sin importar
     el tema activo. Este token queda como fuente de verdad documentada, pero el fix real (que las
     etapas de Embudo/Flujos/Tickets/ReportesIndicadores usen esta versión en dark) requiere threadear
     el theme actual hasta ese método — no implementado todavía, ver guidelines/cierre-tema-oscuro.md. */
  --gradient-etapa-start: var(--mint-400);

  /* Mismo valor que en light a propósito — ver comentario en el bloque :root. */
  --gradient-ai: linear-gradient(to right, #efd9f9, #e2a1ff);
  --gradient-ai-action: linear-gradient(to right, var(--indigo-900), var(--pink-600));
  --gradient-ai-card: linear-gradient(135deg, #f5e6fa, #e3bdf0);

  /* --gradient-ai-card-subtle (contraparte dark) removido junto con el bloque :root — ver comentario ahí. */

  --glass-bg:      rgba(28, 28, 31, 0.55);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-blur:    18px;

  --neu-bg:        #1a1a1e;
  --neu-light:     rgba(58, 58, 66, 0.55);
  --neu-dark:      rgba(0, 0, 0, 0.55);
}

/* ══ Tipografía ══ */
:root {
  --font-display: 'Public Sans', system-ui, sans-serif;
  --font-body:    'Roboto', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, sans-serif;
  --font-mono:    'Cousine', ui-monospace, 'SF Mono', monospace;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --text-display: 96px;
  --text-h1:      32px;
  --text-h2:      24px;
  --text-h3:      20px;
  --text-h4:      16px;
  --text-body-lg: 16px;
  --text-body:    14px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-micro:   11px;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;

  --tracking-tight: -0.01em;
  --tracking-wide:   0.02em;
}

/* ══ Espaciado, radios, bordes, elevación, motion ══ */
:root, [data-theme="light"], .light {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  --border-width: 1px;

  --shadow-xs:  0 1px 2px rgba(34, 37, 47, 0.06);
  --shadow-sm:  0 1px 3px rgba(34, 37, 47, 0.10), 0 1px 2px rgba(34, 37, 47, 0.06);
  --shadow-md:  0 4px 12px rgba(34, 37, 47, 0.10);
  --shadow-lg:  0 12px 28px rgba(34, 37, 47, 0.14);
  --shadow-pop: 0 20px 48px rgba(34, 37, 47, 0.20);
  --shadow-focus-pink:   0 0 0 3px rgba(228, 45, 127, 0.25);
  --shadow-focus-indigo: 0 0 0 3px rgba(46, 36, 90, 0.22);

  --shadow-neu:        6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
  --shadow-neu-sm:     3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
  --shadow-neu-inset:  inset 4px 4px 9px var(--neu-dark), inset -4px -4px 9px var(--neu-light);

  --glass-shadow: 0 8px 32px rgba(46, 36, 90, 0.16);

  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
}

[data-theme="dark"], .dark {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 14px 32px rgba(0, 0, 0, 0.60);
  --shadow-pop: 0 24px 52px rgba(0, 0, 0, 0.70);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

/* ══ Escala de z-index (Foundation, 2026-07-21) — sin variante dark, el orden de capas no cambia
   por tema. Prerequisito pedido para documentar Modal, BottomSheet, Toast/Snackbar, ActionMenu,
   DatePicker, Tooltip y FileUpload — overlays que van a coexistir. Ninguno de estos tiene CKB
   todavía (ver guidelines/ds-audit.md, tabla de componentes formalizados) — esta escala se define
   ANTES que ellos, a propósito, no se retrofittea sobre un valor ya elegido.

   Arranca en 10000, muy por encima de TODO z-index legacy ya hardcodeado en producción
   (custom.css #nav-menu = 9999 x2, whatsapp.css overlays flotantes = 9999/9998). Decisión
   deliberada: una escala "prolija" al estilo Bootstrap (1020-1090, que de hecho ya usa qr.css para
   su propio modal/popover/tooltip vendorizado) dejaría cualquier Modal/Toast/BottomSheet del DS
   DEBAJO del menú de navegación global donde se solapen — el mismo bug de z-index que ya apareció
   puntualmente con #cola-drawer vs #nav-menu en PanelControl/index.ctp (corregido ahí con un offset
   de posición, acá se previene con el número de capa). Ver nota de conflicto en ds-audit.md. */
:root {
  --z-base:            0;   /* contenido normal en flujo, sin position elevado a propósito */
  --z-sticky:      10000;   /* headers/barras que se fijan al hacer scroll DENTRO de un componente (tabla, panel) — NO el nav global, que es su propio sistema legacy */
  --z-dropdown:    10010;   /* Dropdown, Popover, panel flotante de DatePicker, menú de ActionMenu */
  --z-tooltip:     10020;   /* Tooltip — arriba de dropdown/popover porque debe poder flotar sobre ellos (ej. tooltip de un ítem dentro de un ActionMenu abierto) */
  --z-modal-backdrop: 10030; /* fondo oscuro detrás de Modal/BottomSheet */
  --z-modal:       10040;   /* contenido de Modal/BottomSheet — arriba de su propio backdrop */
  --z-toast:       10050;   /* Toast/Snackbar — la única capa que debe ganarle a un Modal ya abierto */
}