/* ============================================================
   CiberGantt — Design tokens
   Paleta derivada del logo CiberConsulting:
   naranja #fc7800 · azul #0078b4 · azul profundo #003c78 / #001848
   ============================================================ */

:root {
  /* Superficies */
  --cg-bg: #e9eef4;
  --cg-surface: #ffffff;
  --cg-surface2: #f4f7fa;
  --cg-surface3: #e6ecf3;

  /* Bordes */
  --cg-border: #d7e0ea;
  --cg-bord2: #b8c6d6;

  /* Texto */
  --cg-text: #0b1f33;
  --cg-t2: #546a82;
  --cg-t3: #8798aa;

  /* Marca */
  --cg-orange: #fc7800;
  --cg-orange-d: #dd6a00;
  --cg-orange-s: #fff1e0;
  --cg-blue: #0078b4;
  --cg-blue-s: #e3f0f9;
  --cg-navy: #003c78;
  --cg-deep: #001848;

  /* Retícula del cronograma */
  --cg-grid2: #e2e9f1;
  --cg-wknd: #eaeff5;
  --cg-hol: #fceada;

  /* Semáforo */
  --cg-ok: #1c7d43;
  --cg-ok-s: #e2f5ea;
  --cg-warn: #c0392b;
  --cg-warn-s: #fdeceb;

  /* Elevación */
  --cg-shadow: 0 18px 44px rgba(0, 24, 72, .18);
  --cg-shadow2: 0 1px 3px rgba(0, 24, 72, .10);

  /* Rail lateral */
  --cg-rail-from: #003c78;
  --cg-rail-to: #001230;

  /* Iconos duotono: un solo tono con la capa secundaria clara */
  --cg-icon: #0078b4;
  --fa-primary-color: #003c78;
  --fa-secondary-color: #fc7800;
  --fa-secondary-opacity: 1;

  /* Métricas del Gantt (leídas también desde JS) */
  --cg-row-h: 40px;
  --cg-bar-h: 22px;
  --cg-head-h: 68px;
  --cg-rail-w: 60px;
  --cg-side-w: 246px;
  --cg-left-w: 616px;
  --cg-left-w-compact: 300px;
  --cg-detail-w: 380px;
  --cg-scrollbar: 11px;

  color-scheme: light;
}

[data-cg-theme="dark"] {
  --cg-bg: #061020;
  --cg-surface: #0d1e33;
  --cg-surface2: #12263e;
  --cg-surface3: #1a3050;

  --cg-border: #213b59;
  --cg-bord2: #2c4b6d;

  --cg-text: #e8f0f8;
  --cg-t2: #9ab1c9;
  --cg-t3: #6b8299;

  --cg-orange-s: #3a2408;
  --cg-blue-s: #0b2941;

  --cg-grid2: #1a2f49;
  --cg-wknd: #0b1a2c;
  --cg-hol: #3a2408;

  --cg-ok: #4cc182;
  --cg-ok-s: #0e2c1e;
  --cg-warn: #f2776a;
  --cg-warn-s: #331614;

  --cg-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  --cg-shadow2: 0 1px 3px rgba(0, 0, 0, .35);

  --cg-icon: #6cb6e4;
  --fa-primary-color: #9fc4e6;
  --fa-secondary-color: #fc7800;

  color-scheme: dark;
}