/* === Coronel Sur — Design Tokens (admin) ===
 *
 * Tokens del handoff "Sistema de Facturación Coronel Sur" aplicados al
 * sistema de gestión interno. Los aplicamos como variables CSS en :root
 * para que cada página admin pueda usarlas sin refactorizar componentes.
 *
 * El acento se sobreescribe dinamicamente por rol via admin_role.js
 * (admin -> ámbar dorado, facturacion -> cian, crm -> violeta).
 *
 * NO aplica al shop publico (/shop) — ese mantiene el look naranja sobre
 * crema de la marca. Esto es solo para /admin/* y la pagina principal.
 */

:root {
  /* Fondos y superficies (dark, default del sistema).
   * Refinado para acercarse al mockup: gris-marino sutil en vez de
   * negro absoluto, surfaces con tonos progresivos para jerarquia
   * visual mas clara entre niveles. */
  --bg: #0d1117;
  --bg-elev: #161b22;
  --surface: #1c2128;
  --surface-2: #22272e;
  --surface-3: #2d333b;
  --line: #30363d;
  --line-strong: #444c56;

  /* Tipografía (ink = texto sobre fondo) */
  --ink: #e6edf3;
  --ink-2: #b1bac4;
  --ink-3: #8b949e;
  --ink-4: #6e7681;
  --ink-5: #484f58;

  /* Acento principal: ámbar dorado (default admin). Lo sobreescribe
   * admin_role.js segun el rol del usuario logueado. */
  --accent: #f5b51d;
  --accent-2: #ffc94a;
  --accent-3: #d99700;
  --accent-soft: #3a2e10;
  --accent-ink: #1a1300;

  /* Naranja Coronel — branding / logo / avatares (gradient con accent) */
  --accent-warm: #fb923c;
  --accent-warm-2: #f97316;
  --accent-warm-soft: #3a1f10;
  --gold: #f5b51d;
  --gold-soft: #3a2e10;

  /* Estados (usados por badges, alertas, indicadores, deltas) */
  --pos: #22c55e;
  --pos-soft: #133525;
  --warn: #fbbf24;
  --warn-soft: #3a2a0a;
  --neg: #ef4444;
  --neg-soft: #3a1414;
  --info: #60a5fa;
  --info-soft: #102338;

  /* Tipografía: Inter para body, JetBrains Mono para numeros y codigo */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* === Aliases de compat ===
     Las páginas/routers que crecieron antes de que el sistema de
     tokens se estabilizara usaron nombres alternativos. Los alias
     evitan tener que reescribir todos los var(--font-mono, ...) en
     ~63 lugares. La fuente real sigue siendo --mono y --ink-*.    */
  --font-mono: var(--mono);
  --font-sans: var(--sans);
  --text:     var(--ink);
  --text-2:   var(--ink-2);
  --text-3:   var(--ink-3);
  --text-4:   var(--ink-4);
  --border:   var(--line);

  /* Densidad / espaciados */
  --row-h: 44px;
  --pad-card: 20px;
  --pad-cell: 14px;
  --gap: 16px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* === Escala tipografica de KPIs ===
   *
   * Antes habia 3 tamanos conviviendo sin coordinacion: 22px (escritorio),
   * 32px (cockpit + dashboard), 24px (mobile fallback). Y los labels
   * variaban entre 10-12px con letter-spacing de 0.04em a 0.6px.
   *
   * Convencion (PR tipografia):
   * - Cockpit es "monitor mode" con numeros leibles a distancia -> --lg.
   * - Escritorio y dashboard son "modo trabajo con sidebar", numeros
   *   en escala intermedia -> --md.
   * - Mobile baja todos a --sm.
   *
   * Dentro de la misma pagina, TODOS los KPI usan el mismo tamano.
   */
  --kpi-value-lg: 32px;       /* Cockpit monitor (sin cambios) */
  --kpi-value-md: 28px;       /* Escritorio + dashboard unificados */
  --kpi-value-sm: 20px;       /* Mobile (todas las paginas) */
  --kpi-label: 11px;          /* Era 10/11/11.5/12 mezclados */
  --kpi-label-spacing: 0.08em; /* Era 0.04 / 0.06 / 0.12 / 0.5px / 0.6px */
  --kpi-delta: 12px;          /* Era 12 / 12.5 / 13 */
  --kpi-card-padding: 14px 16px;
  --kpi-card-gap: 14px;

  /* Sombras refinadas para fondo dark — mas sutiles que las viejas,
   * con una capa interior de borde (mockup style). */
  --shadow-sm: 0 0 0 1px rgba(240,246,252,0.04), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 0 0 1px rgba(240,246,252,0.05), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 0 0 1px rgba(240,246,252,0.06), 0 12px 32px rgba(0,0,0,0.5);
}

/* Densidades alternativas — opcional, controla tamano de filas y padding */
[data-density="compact"] {
  --row-h: 36px;
  --pad-card: 14px;
  --pad-cell: 10px;
  --gap: 12px;
}
[data-density="comfy"] {
  --row-h: 52px;
  --pad-card: 26px;
  --pad-cell: 18px;
  --gap: 22px;
}