/* AllConnected v2 · tokens de diseño.
 * Una sola fuente de color, tipografía, radios y sombras para todo el panel. Todo con prefijo --ac-.
 * base-theme.css (shell viejo) y las variables históricas (--primary, --card-bg, …) son aliases de estos. */

@font-face { font-family: 'HK Grotesk'; font-weight: 300; font-style: normal; font-display: swap; src: url("../../fonts/hkgrotesk-light.d9cb79cf8737.woff2") format('woff2'), url("../../fonts/hkgrotesk-light.539752d0f380.woff") format('woff'); }
@font-face { font-family: 'HK Grotesk'; font-weight: 400; font-style: normal; font-display: swap; src: url("../../fonts/hkgrotesk-regular.32795d5cd0f1.woff2") format('woff2'), url("../../fonts/hkgrotesk-regular.e362f79bc288.woff") format('woff'); }
@font-face { font-family: 'HK Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url("../../fonts/hkgrotesk-medium.313c838435fd.woff2") format('woff2'), url("../../fonts/hkgrotesk-medium.296bfb9b8b1a.woff") format('woff'); }
@font-face { font-family: 'HK Grotesk'; font-weight: 600; font-style: normal; font-display: swap; src: url("../../fonts/hkgrotesk-semibold.c990d93a23b9.woff2") format('woff2'), url("../../fonts/hkgrotesk-semibold.28d43353b758.woff") format('woff'); }
@font-face { font-family: 'HK Grotesk'; font-weight: 700; font-style: normal; font-display: swap; src: url("../../fonts/hkgrotesk-bold.048f35d28175.woff2") format('woff2'), url("../../fonts/hkgrotesk-bold.8719b97274de.woff") format('woff'); }

:root {
  /* Tipografía */
  --ac-font-sans: 'Inter', 'HK Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ac-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ac-fs-xs: 0.72rem; --ac-fs-sm: 0.8rem; --ac-fs-md: 0.9rem; --ac-fs-lg: 1.05rem; --ac-fs-xl: 1.35rem; --ac-fs-2xl: 1.75rem;

  /* Marca */
  --ac-primary: #4f46e5;
  --ac-primary-hover: #4338ca;
  --ac-primary-soft: rgba(79, 70, 229, 0.10);
  --ac-primary-soft-2: rgba(79, 70, 229, 0.18);
  --ac-primary-fg: #ffffff;
  --ac-accent: #0ea5e9;
  --ac-accent-soft: rgba(14, 165, 233, 0.12);

  /* Semánticos (fondo suave + texto) */
  --ac-success: #16a34a; --ac-success-bg: #dcfce7; --ac-success-fg: #166534;
  --ac-warning: #d97706; --ac-warning-bg: #fef3c7; --ac-warning-fg: #92400e;
  --ac-danger:  #dc2626; --ac-danger-bg:  #fee2e2; --ac-danger-fg:  #991b1b;
  --ac-info:    #2563eb; --ac-info-bg:    #dbeafe; --ac-info-fg:    #1e40af;
  --ac-neutral: #64748b; --ac-neutral-bg: #f1f5f9; --ac-neutral-fg: #334155;

  /* Neutros y superficies */
  --ac-bg: #f4f6fb;
  --ac-surface: #ffffff;
  --ac-surface-2: #f8fafc;
  --ac-surface-3: #eef2f7;
  --ac-border: #e2e8f0;
  --ac-border-strong: #cbd5e1;
  --ac-text: #0f172a;
  --ac-text-2: #475569;
  --ac-text-3: #94a3b8;
  --ac-text-inverse: #ffffff;

  /* Shell */
  --ac-sidebar-w: 264px;
  --ac-sidebar-w-collapsed: 72px;
  --ac-sidebar-bg: #0b1222;
  --ac-sidebar-bg-2: #111a2e;
  --ac-sidebar-text: #9aa8c0;
  --ac-sidebar-text-hover: #f1f5f9;
  --ac-sidebar-active: #a5b4fc;
  --ac-sidebar-active-bg: rgba(129, 140, 248, 0.16);
  --ac-sidebar-section: #55637d;
  --ac-sidebar-divider: rgba(148, 163, 184, 0.10);
  --ac-topbar-h: 64px;
  --ac-topbar-bg: rgba(255, 255, 255, 0.86);
  --ac-topbar-border: #e2e8f0;

  /* Series de gráficos (orden fijo; ver charts-theme.js) */
  --ac-chart-1: #4f46e5; --ac-chart-2: #0ea5e9; --ac-chart-3: #16a34a; --ac-chart-4: #f59e0b;
  --ac-chart-5: #ef4444; --ac-chart-6: #8b5cf6; --ac-chart-7: #14b8a6; --ac-chart-8: #64748b;
  --ac-chart-grid: #e2e8f0;
  --ac-chart-text: #64748b;

  /* Geometría y movimiento */
  --ac-radius-sm: 8px; --ac-radius: 12px; --ac-radius-lg: 16px; --ac-radius-pill: 999px;
  --ac-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ac-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
  --ac-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --ac-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ac-focus: 0 0 0 3px rgba(79, 70, 229, 0.28);

  /* App Marketing (solo la usa body.app-marketing en shell.css) */
  --ac-marketing: #c2410c;
  --ac-marketing-hover: #9a3412;
  --ac-marketing-soft: rgba(194, 65, 12, 0.12);
  --ac-marketing-fg: #ffffff;
  --ac-marketing-rgb: 194, 65, 12;

  /* Puente a Bootstrap 5.3 */
  --bs-primary: var(--ac-primary);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--ac-primary);
  --bs-link-hover-color: var(--ac-primary-hover);
  --bs-body-bg: var(--ac-bg);
  --bs-body-color: var(--ac-text);
  --bs-border-color: var(--ac-border);
  --bs-body-font-family: var(--ac-font-sans);
  --bs-secondary-color: var(--ac-text-2);
  --bs-tertiary-color: var(--ac-text-3);
  --bs-card-bg: var(--ac-surface);
}

[data-bs-theme="dark"] {
  --ac-primary: #818cf8;
  --ac-primary-hover: #a5b4fc;
  --ac-primary-soft: rgba(129, 140, 248, 0.16);
  --ac-primary-soft-2: rgba(129, 140, 248, 0.26);
  --ac-primary-fg: #0b1222;
  --ac-accent: #38bdf8;
  --ac-accent-soft: rgba(56, 189, 248, 0.16);

  --ac-success: #4ade80; --ac-success-bg: rgba(34, 197, 94, 0.16); --ac-success-fg: #bbf7d0;
  --ac-warning: #fbbf24; --ac-warning-bg: rgba(245, 158, 11, 0.16); --ac-warning-fg: #fde68a;
  --ac-danger:  #f87171; --ac-danger-bg:  rgba(239, 68, 68, 0.16);  --ac-danger-fg:  #fecaca;
  --ac-info:    #60a5fa; --ac-info-bg:    rgba(59, 130, 246, 0.16); --ac-info-fg:    #bfdbfe;
  --ac-neutral: #94a3b8; --ac-neutral-bg: rgba(148, 163, 184, 0.12); --ac-neutral-fg: #cbd5e1;

  --ac-bg: #0b0f1a;
  --ac-surface: #131828;
  --ac-surface-2: #182036;
  --ac-surface-3: #1e2740;
  --ac-border: #1e2740;
  --ac-border-strong: #2b3652;
  --ac-text: #e5e9f2;
  --ac-text-2: #a3aec4;
  --ac-text-3: #6b7a95;
  --ac-text-inverse: #0b1222;

  --ac-sidebar-bg: #070b14;
  --ac-sidebar-bg-2: #0d1322;
  --ac-sidebar-divider: rgba(148, 163, 184, 0.06);
  --ac-topbar-bg: rgba(19, 24, 40, 0.86);
  --ac-topbar-border: #1e2740;

  --ac-chart-1: #818cf8; --ac-chart-2: #38bdf8; --ac-chart-3: #4ade80; --ac-chart-4: #fbbf24;
  --ac-chart-5: #f87171; --ac-chart-6: #a78bfa; --ac-chart-7: #2dd4bf; --ac-chart-8: #94a3b8;
  --ac-chart-grid: #1e2740;
  --ac-chart-text: #94a3b8;

  --ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ac-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  --ac-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --ac-focus: 0 0 0 3px rgba(129, 140, 248, 0.35);

  --ac-marketing: #fb923c;
  --ac-marketing-hover: #fdba74;
  --ac-marketing-soft: rgba(251, 146, 60, 0.18);
  --ac-marketing-fg: #0b1222;
  --ac-marketing-rgb: 251, 146, 60;

  --bs-primary-rgb: 129, 140, 248;
}

/* Utilidades mínimas sobre tokens (los componentes viven en components.css) */
.ac-tabular, .kpi-card, .ac-table td, .table td { font-variant-numeric: tabular-nums; }
.ac-text-2 { color: var(--ac-text-2) !important; }
.ac-text-3 { color: var(--ac-text-3) !important; }
.ac-bg-surface { background: var(--ac-surface) !important; }
.ac-border { border: 1px solid var(--ac-border) !important; }
.ac-radius { border-radius: var(--ac-radius) !important; }
.ac-mkp { color: var(--ac-mkp-color, var(--ac-text-2)); }
.ac-mkp-bg { background: var(--ac-mkp-color, var(--ac-neutral)); color: var(--ac-mkp-fg, #fff); }