/* ============================================================
   DAL Prototipo gerencial — Tokens de diseño (3 capas)
   Origen: tokens de la app DAL @ commit f4fce1e (copia, no import).
   Capa 1 primitive: unicos valores literales (colores, px, sombras).
   Capa 2 semantic : significado (fondo, texto, borde); claro por
                     defecto y oscuro via [data-theme='dark'].
   Capa 3 component: nodos, lienzo y foco; solo referencian semantic.
   Reconciliacion con la app real (src/styles/tokens.css):
   - Escala tipografica y radios: iguales a la app (base 14px, TV >= 1920px x1.14);
     el minimo es 12px por lectura en pantalla de reunion.
   - Sombras, easing, transiciones, superficies popover/tooltip y acento: iguales.
   - Divergencias deliberadas por contraste AA (4.5:1): texto atenuado (blue-500),
     estados (amber/rojo oscuros en claro), boton primario oscuro (green-700),
     grafico 1 en teal (claro) y foco solido azul/verde (la app usa un halo de 10 %).
   Breakpoints (var() no es valido en @media, valores canonicos):
     mobile <= 767px | tablet 768-1099px | laptop >= 1100px | tv >= 1920px
   ============================================================ */

/* ── Capa 1: primitive ─────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Marca DAL */
  --p-blue-900: #163a65;
  --p-blue-500: #477099;
  --p-blue-600: #4b7aa3;
  --p-blue-300: #7aa3c9;
  --p-teal-600: #338a7b;
  --p-green-500: #12d27c;
  --p-green-600: #0ea863;
  --p-green-400: #3fe293;
  --p-green-700: #0a8044;
  --p-green-900: #065f36;
  --p-coral-500: #ef8b72;
  --p-red-700: #c24233;
  --p-purple-600: #7c3aed;
  --p-violet-400: #a78bfa;

  /* Neutros */
  --p-white: #ffffff;
  --p-gray-50: #f8f9fa;
  --p-gray-100: #f1f5f9;
  --p-gray-150: #f0f4f8;
  --p-gray-200: #eaf0f5;
  --p-gray-250: #d0dce8;
  --p-gray-300: #b9c9db;
  --p-slate-350: #a7b5c9;
  --p-slate-400: #94a3b8;
  --p-slate-500: #8ba3b8;
  --p-slate-600: #64748b;
  --p-slate-700: #334155;
  --p-slate-750: #293548;
  --p-slate-800: #1e293b;
  --p-slate-900: #0f172a;

  /* Textos de estado (claro / oscuro) */
  --p-status-ok-light: #166534;
  --p-status-warn-light: #854d0e;
  --p-status-crit-light: #b91c1c;
  --p-status-info-light: #1d4ed8;
  --p-status-ok-dark: #34d399;
  --p-status-warn-dark: #fbbf24;
  --p-status-crit-dark: #fb8585;
  --p-status-info-dark: #60a5fa;
  --p-status-off-light: #475569;
  --p-status-off-dark: #a7b5c9;

  /* Sombras */
  --p-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --p-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
  --p-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --p-shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --p-shadow-xl-dark: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --p-hover-card: 0 12px 40px rgba(22, 58, 101, 0.12);
  --p-hover-card-dark: 0 12px 40px rgba(0, 0, 0, 0.3);
  --p-node-shadow: drop-shadow(0 1px 2px rgba(22, 58, 101, 0.1))
    drop-shadow(0 4px 10px rgba(22, 58, 101, 0.08));
  --p-node-shadow-hover: drop-shadow(0 2px 3px rgba(22, 58, 101, 0.12))
    drop-shadow(0 10px 18px rgba(22, 58, 101, 0.16));
  --p-node-shadow-dark: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  --p-node-shadow-hover-dark: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
  --p-scrim: rgba(15, 23, 42, 0.5);
  --p-shadow-sm-dark: 0 1px 2px rgba(0, 0, 0, 0.2);
  --p-shadow-md-dark: 0 1px 3px rgba(0, 0, 0, 0.25);
  --p-shadow-lg-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);

  /* Tipografia */
  --font-heading: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-subheading: 'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-primary: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  /* Texto dentro de las tarjetas del lienzo: fijo, escala con el zoom (no con la escala TV) */
  --font-size-node-title: 13px;
  --font-size-node-meta: 10.5px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Espaciado (base 4px) */
  --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;

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  --radius-node: 12px;

  /* Movimiento */
  --easing-brand: cubic-bezier(0.23, 1, 0.32, 1);
  --transition-fast: 200ms var(--easing-brand);
  --transition-base: 300ms var(--easing-brand);

  /* Medidas de layout y accesibilidad */
  --tap-min: 44px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --border-width: 1px;
  --stroke-thin: 1.5px;
  --stroke-base: 2px;
  --stroke-bold: 3px;
  --header-height: 52px;
  --logo-height: 28px;
  --content-max-width: 1400px;
  --content-padding: var(--space-4);
  --palette-width: 272px;
  --palette-width-collapsed: 64px;
  --inspector-width: 304px;
  --sheet-max-height: 52dvh;
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-slow: 400ms var(--easing-brand);
  --transition-panel: 250ms var(--easing-out);
}

/* ── Capa 2: semantic (claro por defecto) ─────────────────── */
:root {
  --color-accent: var(--p-green-500);
  --color-accent-hover: var(--p-green-600);
  --color-on-accent: var(--p-blue-900);
  --color-accent-light: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, transparent);

  --color-text-primary: var(--p-blue-900);
  --color-text-secondary: var(--p-blue-500);
  /* La app usa blue-600 (4.3:1 sobre gray-50, no cumple AA); aqui blue-500 */
  --color-text-muted: var(--p-blue-500);
  --color-text-on-dark: var(--p-gray-100);

  --color-bg-page: var(--p-gray-50);
  --color-bg-card: var(--p-white);
  --color-bg-raised: var(--p-gray-150);
  --color-bg-code: var(--p-gray-100);
  --color-surface-popover: var(--p-white);
  --color-surface-tooltip: var(--p-blue-900);
  --color-scrim: var(--p-scrim);

  --color-border: var(--p-gray-300);
  --color-border-light: var(--p-gray-200);
  /* Bordes de controles: >= 3:1 contra el fondo (WCAG 1.4.11) */
  --color-border-control: var(--p-blue-600);

  --color-focus-ring: var(--p-blue-900);
  --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--color-accent) 30%, transparent);

  --color-btn-primary-bg: var(--p-green-500);
  --color-btn-primary-text: var(--p-blue-900);
  --color-btn-primary-hover: var(--p-green-400);

  --color-status-ok: var(--p-status-ok-light);
  --color-status-warn: var(--p-status-warn-light);
  --color-status-crit: var(--p-status-crit-light);
  --color-status-info: var(--p-status-info-light);
  --color-status-off: var(--p-status-off-light);
  --color-status-info-bg: color-mix(in srgb, var(--color-status-info) 10%, transparent);
  --color-status-ok-bg: color-mix(in srgb, var(--color-status-ok) 10%, transparent);
  --color-status-warn-bg: color-mix(in srgb, var(--color-status-warn) 12%, transparent);
  --color-status-crit-bg: color-mix(in srgb, var(--color-status-crit) 10%, transparent);

  --color-chart-grid: var(--p-gray-250);
  --color-chart-1: var(--p-teal-600);
  --color-chart-2: var(--p-blue-900);
  --color-chart-3: var(--p-purple-600);
  --color-chart-4: var(--p-red-700);

  /* Categorias de paso: color solido (chip) + color del icono sobre el chip */
  --color-cat-ai: var(--p-green-700);
  --color-cat-data: var(--p-status-info-light);
  --color-cat-control: var(--p-status-warn-light);
  --color-cat-person: var(--p-purple-600);
  --color-on-cat: var(--p-white);

  --color-scrollbar: var(--p-slate-400);

  --shadow-sm: var(--p-shadow-sm);
  --shadow-md: var(--p-shadow-md);
  --shadow-lg: var(--p-shadow-lg);
  --shadow-xl: var(--p-shadow-xl);
  --hover-card-shadow: var(--p-hover-card);
  --shadow-node: var(--p-node-shadow);
  --shadow-node-hover: var(--p-node-shadow-hover);
}

/* ── Capa 2: semantic (oscuro) ─────────────────────────────── */
[data-theme='dark'] {
  color-scheme: dark;

  --color-on-accent: var(--p-slate-900);
  --color-accent-light: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, transparent);

  --color-text-primary: var(--p-gray-100);
  --color-text-secondary: var(--p-slate-350);
  --color-text-muted: var(--p-slate-350);

  --color-bg-page: var(--p-slate-900);
  --color-bg-card: var(--p-slate-800);
  --color-bg-raised: var(--p-slate-750);
  --color-bg-code: var(--p-slate-900);
  --color-surface-popover: var(--p-slate-800);
  --color-surface-tooltip: var(--p-slate-800);

  --color-border: var(--p-slate-700);
  --color-border-light: var(--p-slate-800);
  --color-border-control: var(--p-slate-500);

  --color-focus-ring: var(--p-green-500);
  --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--color-accent) 35%, transparent);

  --color-btn-primary-bg: var(--p-green-700);
  --color-btn-primary-text: var(--p-white);
  --color-btn-primary-hover: var(--p-green-900);

  --color-status-ok: var(--p-status-ok-dark);
  --color-status-warn: var(--p-status-warn-dark);
  --color-status-crit: var(--p-status-crit-dark);
  --color-status-info: var(--p-status-info-dark);
  --color-status-off: var(--p-status-off-dark);

  --color-chart-grid: var(--p-slate-700);
  --color-chart-1: var(--p-green-500);
  --color-chart-2: var(--p-blue-300);
  --color-chart-3: var(--p-status-info-dark);
  --color-chart-4: var(--p-coral-500);

  --color-cat-ai: var(--p-green-500);
  --color-cat-data: var(--p-status-info-dark);
  --color-cat-control: var(--p-status-warn-dark);
  --color-cat-person: var(--p-violet-400);
  --color-on-cat: var(--p-slate-900);

  --color-scrollbar: var(--p-slate-600);

  --shadow-sm: var(--p-shadow-sm-dark);
  --shadow-md: var(--p-shadow-md-dark);
  --shadow-lg: var(--p-shadow-lg-dark);
  --shadow-xl: var(--p-shadow-xl-dark);
  --hover-card-shadow: var(--p-hover-card-dark);
  --shadow-node: var(--p-node-shadow-dark);
  --shadow-node-hover: var(--p-node-shadow-hover-dark);
}

/* ── Capa 3: component ─────────────────────────────────────── */
:root {
  /* Lienzo */
  --canvas-bg: var(--color-bg-page);
  --canvas-dot: var(--color-chart-grid);
  --canvas-border: var(--color-border);
  --canvas-edge: var(--color-text-secondary);
  --canvas-edge-width: var(--stroke-base);
  --canvas-edge-conditional: var(--color-text-primary);
  --canvas-edge-conditional-width: var(--stroke-base);
  --canvas-edge-label-bg: var(--color-bg-card);
  --canvas-edge-label-text: var(--color-text-primary);
  --canvas-edge-active: var(--color-status-ok);

  /* Nodos: tarjeta con cabecera por categoria; forma + icono + texto, el color solo refuerza */
  --node-bg: var(--color-bg-card);
  --node-border: var(--color-border);
  --node-border-hover: var(--color-border-control);
  --node-border-width: var(--border-width);
  --node-text: var(--color-text-primary);
  --node-subtext: var(--color-text-secondary);
  --node-ring: var(--color-focus-ring);
  --node-ring-width: var(--stroke-base);
  --node-ring-focus-width: var(--stroke-bold);
  --node-ghost-opacity: 0.85;
  --node-dim-opacity: 0.7;
  --node-header-mix: 14%;
  --node-handle-bg: var(--color-bg-card);
  --node-handle-active: var(--color-accent);
  --node-badge-bg: var(--color-bg-card);
  --node-ai: var(--color-cat-ai);
  --node-data: var(--color-cat-data);
  --node-control: var(--color-cat-control);
  --node-person: var(--color-cat-person);
  --node-on-cat: var(--color-on-cat);

  /* Paneles y controles flotantes */
  --panel-bg: var(--color-bg-card);
  --panel-border: var(--color-border);
  --float-bg: var(--color-surface-popover);
  --float-border: var(--color-border);
  --float-shadow: var(--shadow-lg);
  --minimap-mask: color-mix(in srgb, var(--color-text-primary) 12%, transparent);
}

/* Escala TV (>= 1920px), igual que la app: sube toda la rampa tipografica */
@media (min-width: 1920px) {
  :root {
    --font-size-xs: 13px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 17px;
    --font-size-lg: 18px;
    --font-size-xl: 23px;
    --palette-width: 320px;
    --inspector-width: 360px;
  }
}

/* ── Liquid Glass (3 capas) ─────────────────────────────────
   Se definen siempre; solo se APLICAN con <html data-glass='on'> (css/glass.css).
   Alfas minimos de superficie medidos con WCAG sobre el peor fondo posible
   (ver README, "Contraste del efecto cristal"): no bajar de los valores actuales. */

/* Capa 1: primitive (unicos valores literales del efecto) */
:root {
  --p-glass-white-92: rgba(255, 255, 255, 0.92);
  --p-glass-white-90: rgba(255, 255, 255, 0.9);
  --p-glass-white-84: rgba(255, 255, 255, 0.84);
  --p-glass-white-62: rgba(255, 255, 255, 0.62);
  --p-glass-white-78: rgba(255, 255, 255, 0.78);
  --p-glass-white-40: rgba(255, 255, 255, 0.4);
  --p-glass-white-14: rgba(255, 255, 255, 0.14);
  --p-glass-white-04: rgba(255, 255, 255, 0.04);
  --p-glass-white-00: rgba(255, 255, 255, 0);
  --p-glass-slate-94: rgba(30, 41, 59, 0.94);
  --p-glass-slate-92: rgba(30, 41, 59, 0.92);
  --p-glass-slate-84: rgba(30, 41, 59, 0.84);
  --p-glass-slate-66: rgba(30, 41, 59, 0.66);
  --p-glass-ink-10: rgba(22, 58, 101, 0.1);
  --p-glass-ink-14: rgba(22, 58, 101, 0.14);
  --p-glass-ink-06: rgba(22, 58, 101, 0.06);
  --p-glass-black-40: rgba(0, 0, 0, 0.4);
  --p-glass-black-30: rgba(0, 0, 0, 0.3);
  --p-glass-orb-green-light: rgba(18, 210, 124, 0.36);
  --p-glass-orb-blue-light: rgba(75, 122, 163, 0.34);
  --p-glass-orb-violet-light: rgba(167, 139, 250, 0.3);
  --p-glass-orb-green-dark: rgba(18, 210, 124, 0.16);
  --p-glass-orb-blue-dark: rgba(71, 112, 153, 0.3);
  --p-glass-orb-violet-dark: rgba(124, 58, 237, 0.2);
  --p-glass-base-light-a: #e4edf5;
  --p-glass-base-light-b: #f4f7f9;
  --p-glass-base-light-c: #e6f2ec;
  --p-glass-base-dark-a: #0b1220;
  --p-glass-base-dark-b: #0f172a;
  --p-glass-base-dark-c: #0a1522;
  --p-glass-blur: 12px;
  --p-glass-saturate: 1.6;
}

/* Capa 2: semantic (claro por defecto) */
:root {
  --glass-filter: blur(var(--p-glass-blur)) saturate(var(--p-glass-saturate));
  --glass-surface-strong: var(--p-glass-white-90);
  --glass-surface: var(--p-glass-white-84);
  --glass-surface-light: var(--p-glass-white-78);
  --glass-node: var(--p-glass-white-92);
  --glass-surface-airy: var(--p-glass-white-62);
  --glass-border: var(--p-glass-white-90);
  --glass-edge: var(--p-glass-ink-14);
  --glass-specular: var(--p-glass-white-90);
  --glass-sheen-from: var(--p-glass-white-40);
  --glass-sheen-to: var(--p-glass-white-00);
  --glass-shadow:
    0 1px 2px var(--p-glass-ink-10), 0 8px 24px var(--p-glass-ink-10),
    0 24px 48px -12px var(--p-glass-ink-06);
  --glass-shadow-soft: 0 1px 2px var(--p-glass-ink-10), 0 6px 16px var(--p-glass-ink-06);
  --glass-orb-a: var(--p-glass-orb-green-light);
  --glass-orb-b: var(--p-glass-orb-blue-light);
  --glass-orb-c: var(--p-glass-orb-violet-light);
  --glass-page-bg:
    radial-gradient(60rem 42rem at 8% -6%, var(--glass-orb-a), transparent 60%),
    radial-gradient(52rem 40rem at 96% 8%, var(--glass-orb-b), transparent 60%),
    radial-gradient(56rem 44rem at 60% 108%, var(--glass-orb-c), transparent 62%),
    linear-gradient(
      180deg,
      var(--p-glass-base-light-a) 0%,
      var(--p-glass-base-light-b) 55%,
      var(--p-glass-base-light-c) 100%
    );
}

/* Capa 2: semantic (oscuro) */
[data-theme='dark'] {
  --glass-surface-strong: var(--p-glass-slate-94);
  --glass-surface: var(--p-glass-slate-92);
  --glass-surface-light: var(--p-glass-slate-84);
  --glass-node: var(--p-glass-slate-94);
  --glass-surface-airy: var(--p-glass-slate-66);
  --glass-border: var(--p-glass-white-14);
  --glass-edge: var(--p-glass-black-40);
  --glass-specular: var(--p-glass-white-14);
  --glass-sheen-from: var(--p-glass-white-04);
  --glass-sheen-to: var(--p-glass-white-00);
  --glass-shadow:
    0 1px 2px var(--p-glass-black-40), 0 8px 24px var(--p-glass-black-30),
    0 24px 48px -12px var(--p-glass-black-40);
  --glass-shadow-soft: 0 1px 2px var(--p-glass-black-40), 0 6px 16px var(--p-glass-black-30);
  --glass-orb-a: var(--p-glass-orb-green-dark);
  --glass-orb-b: var(--p-glass-orb-blue-dark);
  --glass-orb-c: var(--p-glass-orb-violet-dark);
  --glass-page-bg:
    radial-gradient(60rem 42rem at 8% -6%, var(--glass-orb-a), transparent 60%),
    radial-gradient(52rem 40rem at 96% 8%, var(--glass-orb-b), transparent 60%),
    radial-gradient(56rem 44rem at 60% 108%, var(--glass-orb-c), transparent 62%),
    linear-gradient(
      180deg,
      var(--p-glass-base-dark-a) 0%,
      var(--p-glass-base-dark-b) 55%,
      var(--p-glass-base-dark-c) 100%
    );
}

/* Capa 3: component (superficies del efecto) */
:root {
  --glass-bar-bg: var(--glass-surface);
  --glass-panel-bg: var(--glass-surface-strong);
  --glass-float-bg: var(--glass-surface);
  --glass-card-bg: var(--glass-surface);
  --glass-chip-bg: var(--glass-surface-strong);
  --glass-control-bg: var(--glass-surface-light);
  --glass-node-bg: var(--glass-node);
  --glass-minimap-bg: var(--glass-surface-airy);
  --glass-login-bg: var(--glass-surface);
  --glass-sheen: linear-gradient(135deg, var(--glass-sheen-from), var(--glass-sheen-to) 42%);
  --glass-ring: inset 0 1px 0 var(--glass-specular), inset 0 0 0 1px var(--glass-border);
}

/* ── Fondo de la app (identidad de la landing de Addon AI) ───
   Fondo azul noche / gris hielo con resplandores verde-cian-teal, rejilla de 60 px
   con puntos y nodos dispersos. Es estatico (sin animacion ni desenfoque). Se aplica
   a login, Agentes y Resultados (css/backdrop.css); el Constructor conserva su lienzo.
   La landing solo trae el modo oscuro y su tono claro (#f0f4f8); el claro conserva
   los mismos tonos de marca con resplandores algo mas opacos para que se lean. */

/* Capa 1: primitive (unicos valores literales del fondo) */
:root {
  --p-bg-base-dark: #050a14;
  --p-bg-base-light: #f0f4f8;
  --p-bg-glow-green-dark: rgba(18, 210, 124, 0.12);
  --p-bg-glow-cyan-dark: rgba(6, 182, 212, 0.09);
  --p-bg-glow-teal-dark: rgba(51, 138, 123, 0.14);
  --p-bg-glow-emerald-dark: rgba(34, 197, 94, 0.08);
  --p-bg-glow-green-light: rgba(110, 231, 183, 0.3);
  --p-bg-glow-cyan-light: rgba(125, 211, 252, 0.26);
  --p-bg-glow-teal-light: rgba(94, 234, 212, 0.24);
  --p-bg-glow-emerald-light: rgba(167, 243, 208, 0.3);
  --p-bg-grid-dark: rgba(0, 212, 255, 0.018);
  --p-bg-dot-dark: rgba(0, 212, 255, 0.05);
  --p-bg-node-dark: rgba(0, 212, 255, 0.16);
  --p-bg-grid-light: rgba(0, 100, 200, 0.03);
  --p-bg-dot-light: rgba(0, 100, 200, 0.07);
  --p-bg-node-light: rgba(0, 100, 200, 0.16);
  --p-bg-grid-step: 60px;
  --p-bg-text-light: #365a80;
  /* Puntos interactivos (js/ui/dot-field.js): canal RGB, opacidad, radio y paso de la rejilla */
  --p-dots-rgb-dark: 0, 212, 255;
  --p-dots-rgb-light: 0, 100, 200;
  --p-dots-opacity-dark: 0.35;
  --p-dots-opacity-light: 0.2;
  --p-dots-radius: 200px;
  --p-bg-text-dark: #a7b5c9;
}

/* Capa 2: semantic (claro por defecto) */
:root {
  --bg-base: var(--p-bg-base-light);
  --bg-glow-a: var(--p-bg-glow-green-light);
  --bg-glow-b: var(--p-bg-glow-cyan-light);
  --bg-glow-c: var(--p-bg-glow-teal-light);
  --bg-glow-d: var(--p-bg-glow-emerald-light);
  --bg-grid: var(--p-bg-grid-light);
  --bg-dot: var(--p-bg-dot-light);
  --bg-node: var(--p-bg-node-light);
  /* Texto atenuado directamente sobre el fondo: mas oscuro que text-muted (4,5:1 en el peor punto) */
  --bg-text-muted: var(--p-bg-text-light);
  --dots-rgb: var(--p-dots-rgb-light);
  --dots-opacity: var(--p-dots-opacity-light);
  --dots-radius: var(--p-dots-radius);
  --dots-step: var(--p-bg-grid-step);
}

/* Capa 2: semantic (oscuro) */
[data-theme='dark'] {
  --bg-base: var(--p-bg-base-dark);
  --bg-glow-a: var(--p-bg-glow-green-dark);
  --bg-glow-b: var(--p-bg-glow-cyan-dark);
  --bg-glow-c: var(--p-bg-glow-teal-dark);
  --bg-glow-d: var(--p-bg-glow-emerald-dark);
  --bg-grid: var(--p-bg-grid-dark);
  --bg-dot: var(--p-bg-dot-dark);
  --bg-node: var(--p-bg-node-dark);
  --bg-text-muted: var(--p-bg-text-dark);
  --dots-rgb: var(--p-dots-rgb-dark);
  --dots-opacity: var(--p-dots-opacity-dark);
}

/* Capa 3: component (fondo compuesto; capas de arriba hacia abajo) */
:root {
  --bg-glow-a-soft: color-mix(in srgb, var(--bg-glow-a) 50%, transparent);
  --bg-glow-b-soft: color-mix(in srgb, var(--bg-glow-b) 50%, transparent);
  --bg-glow-c-soft: color-mix(in srgb, var(--bg-glow-c) 50%, transparent);
  --bg-glow-d-soft: color-mix(in srgb, var(--bg-glow-d) 50%, transparent);
  --bg-backdrop:
    radial-gradient(circle 4px at 9% 16%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 23% 62%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 31% 9%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 38% 84%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 47% 37%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 55% 71%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 64% 12%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 72% 55%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 81% 27%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 88% 78%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 94% 44%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 4px at 4% 90%, var(--bg-node) 0, var(--bg-node) 1.5px, transparent 4px),
    radial-gradient(circle 2px at 50% 50%, var(--bg-dot) 0, var(--bg-dot) 1px, transparent 2px)
      calc(var(--p-bg-grid-step) / -2) calc(var(--p-bg-grid-step) / -2) / var(--p-bg-grid-step)
      var(--p-bg-grid-step),
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0 / var(--p-bg-grid-step)
      var(--p-bg-grid-step),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0 / var(--p-bg-grid-step)
      var(--p-bg-grid-step),
    radial-gradient(circle min(24rem, 55vw) at 72% 30%, var(--bg-glow-a), var(--bg-glow-a-soft) 50%, transparent),
    radial-gradient(circle min(19rem, 45vw) at 62% 56%, var(--bg-glow-b), var(--bg-glow-b-soft) 50%, transparent),
    radial-gradient(circle min(16rem, 40vw) at 82% 62%, var(--bg-glow-c), var(--bg-glow-c-soft) 50%, transparent),
    radial-gradient(circle min(14rem, 36vw) at 56% 34%, var(--bg-glow-d), var(--bg-glow-d-soft) 50%, transparent),
    radial-gradient(circle min(20rem, 50vw) at 12% 88%, var(--bg-glow-b), var(--bg-glow-b-soft) 50%, transparent),
    radial-gradient(circle min(16rem, 40vw) at 6% 18%, var(--bg-glow-c), var(--bg-glow-c-soft) 50%, transparent),
    var(--bg-base);
}

/* ── Botones (lenguaje del CTA "Solicita tu diagnostico gratuito" de la landing de Addon AI) ───
   Version ligera: pildora de 36 px (44 px en tactil), texto 500 de --font-size-sm, padding lateral de
   16 px, degradado 135deg cian -> esmeralda, elevacion de 1 px, resplandor pequeno (0 2px 8px) y
   secundario con borde de 1 px y tinte del 3 %. Texto blanco sobre el degradado >= 4,5:1 (AA):
   base #0a7c9b -> #047d5a (4,81:1 / 5,14:1) y hover #0b809f -> #058560 (4,56:1 / 4,64:1). */

/* Capa 1: primitive */
:root {
  --p-btn-cyan-base: #0a7c9b;
  --p-btn-emerald-base: #047d5a;
  --p-btn-cyan-hover: #0b809f;
  --p-btn-emerald-hover: #058560;
  --p-btn-cyan-text-light: #155e75;
  --p-btn-cyan-text-dark: #22d3ee;
  --p-btn-glow-cyan: rgba(6, 182, 212, 0.22);
  --p-btn-glow-emerald: rgba(16, 185, 129, 0.16);
  --p-btn-glow-cyan-soft: rgba(8, 145, 178, 0.14);
  --p-btn-glow-emerald-soft: rgba(5, 150, 105, 0.1);
  --p-btn-tracking: 0.1px;
  --p-btn-lift: -1px;
}

/* Capa 3: component (claro por defecto) */
:root {
  --btn-radius: var(--radius-full);
  --btn-min-height: 36px;
  --btn-pad-x: var(--space-4);
  --btn-weight: var(--font-weight-medium);
  --btn-font-size: var(--font-size-sm);
  --btn-line-height: 1.25;
  --btn-tracking: var(--p-btn-tracking);
  --btn-lift: var(--p-btn-lift);
  --btn-primary-bg: linear-gradient(135deg, var(--p-btn-cyan-base), var(--p-btn-emerald-base));
  --btn-primary-bg-hover: linear-gradient(135deg, var(--p-btn-cyan-hover), var(--p-btn-emerald-hover));
  --btn-primary-text: var(--p-white);
  --btn-primary-shadow: 0 1px 3px var(--p-btn-glow-cyan-soft);
  --btn-primary-glow: 0 2px 8px var(--p-btn-glow-cyan-soft), 0 1px 3px var(--p-btn-glow-emerald-soft);
  --btn-secondary-text: var(--p-btn-cyan-text-light);
  --btn-secondary-border: color-mix(in srgb, var(--btn-secondary-text) 40%, transparent);
  --btn-secondary-border-hover: color-mix(in srgb, var(--btn-secondary-text) 70%, transparent);
  --btn-secondary-tint: color-mix(in srgb, var(--btn-secondary-text) 3%, transparent);
  --btn-secondary-tint-hover: color-mix(in srgb, var(--btn-secondary-text) 8%, transparent);
  --btn-secondary-glow: 0 1px 4px var(--p-btn-glow-cyan-soft);
  --btn-danger-text: var(--color-status-crit);
  --btn-danger-border: color-mix(in srgb, var(--color-status-crit) 40%, transparent);
  --btn-danger-tint: color-mix(in srgb, var(--color-status-crit) 3%, transparent);
  --btn-danger-tint-hover: color-mix(in srgb, var(--color-status-crit) 8%, transparent);
  --btn-danger-glow: 0 1px 4px color-mix(in srgb, var(--color-status-crit) 20%, transparent);
}

/* Capa 3: component (oscuro) */
[data-theme='dark'] {
  --btn-primary-shadow: 0 1px 3px var(--p-btn-glow-cyan);
  --btn-primary-glow: 0 2px 8px var(--p-btn-glow-cyan), 0 1px 3px var(--p-btn-glow-emerald);
  --btn-secondary-text: var(--p-btn-cyan-text-dark);
  --btn-secondary-glow: 0 1px 4px var(--p-btn-glow-cyan);
}

/* Tactil: los botones vuelven al objetivo de 44 px */
@media (pointer: coarse) {
  :root {
    --btn-min-height: var(--tap-min);
  }
}