/* ============================================================================
   Delta Planner — Tokens de diseno
   Paleta NORMALIZADA "Delta Core" (indigo de marca + estados afinados).
   Reglas: un solo primario (--navy/--brand/--accent = indigo); el acento es
   distinto de los estados (el azul "en curso" es celeste, no el acento);
   estados intocables por cliente; tema oscuro afinado (no una simple inversion).
   Los portales inyectan --navy/--brand/--accent con el color del cliente; los
   estados (--st, --kpi y --fase) NO se personalizan y significan siempre lo mismo.
   ============================================================================ */

/* Inter auto-hospedada (variable, pesos 100-900). No es CDN: el .woff2 vive en
   el repo (public/assets/fonts/). Cae a la pila del sistema si no carga. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

:root {
  /* -- Marca / identidad (indigo Delta Core; un unico primario) -- */
  --navy:      #4F46E5;  /* chrome: topbar, sidebar activo, cabeceras, botones */
  --navy-2:    #0D9488;  /* companero: capa "Entregables" del calendario (teal) */
  --brand:     #4F46E5;
  --brand-2:   #0EA5E9;  /* companero del gradiente de marca (sky); ver --grad-brand */
  --accent:    #4F46E5;  /* enlaces / foco / activo — DISTINTO de "en curso" */

  /* -- Semantica de ESTADO (afinada; el "en curso" es celeste, no el acento) -- */
  --st-done:   #059669; /* Completado (esmeralda) */
  --st-late:   #D97706; /* Completado con atraso (ambar) */
  --st-prog:   #0EA5E9; /* En curso (celeste) */
  --st-pend:   #64748B; /* Pendiente (pizarra) */
  --st-block:  #E11D48; /* Bloqueado (rosa/rojo) */

  /* -- Paleta FIJA de KPI por nivel (semantica, NO se personaliza por cliente/portal).
        Independiente de --accent/--brand para que el color signifique siempre lo mismo. -- */
  --kpi-green:  #059669; /* bueno / al dia */
  --kpi-blue:   #0EA5E9; /* informativo / neutro-positivo (celeste) */
  --kpi-orange: #D97706; /* atencion */
  --kpi-purple: #7C3AED; /* destacado (violeta) */
  --kpi-red:    #E11D48; /* critico / bloqueo */

  /* -- Semantica de FASE (cabeceras de fase del WBS/Gantt) -- */
  --fase-1:    #0EA5E9; /* Fase 1 (celeste) */
  --fase-2:    #7C3AED; /* Fase 2 (violeta) */
  --fase-3:    #EA580C; /* Fase 3 (naranja) */
  --fase-4:    #059669; /* Fase 4 (esmeralda) */

  /* -- Acentos utilitarios -- */
  --ok:        #059669;
  --warn:      #D97706;
  --danger:    #E11D48;
  --purple:    #7C3AED;

  /* -- Superficies / texto (tema claro) -- */
  --bg:        #F5F6FB;
  --bg2:       #EFF1F8;
  --sf:        #FFFFFF;
  --sf2:       #F3F4FA;  /* fondo de etiqueta KPI */
  --sf3:       #EAECF6;
  --ln:        #E2E5F0;
  --ln2:       #EBEDF6;
  --ink:       #171A2E;  /* tinta principal */
  --mut:       #5A5F7A;
  --fnt:       #6B7091;
  --ok-bg:     #D1FADF;  /* caja de diagnostico verde del Tablero */

  /* -- Tipografia (Inter auto-hospedada; cae a la pila del sistema si falta) -- */
  --sans: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Code", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  /* -- Radios / sombras -- */
  --r-sm: 5px;
  --r:    9px;
  --r-lg: 14px;
  --sh:   0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sh-md: 0 4px 12px rgba(16,24,40,.10), 0 2px 4px rgba(16,24,40,.06);
  --sh-lg: 0 12px 34px rgba(16,24,40,.16), 0 4px 10px rgba(16,24,40,.08);

  /* -- Movimiento (estilo "pro sutil") -- */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 120ms;
  --t:      200ms;
  --t-slow: 340ms;

  /* -- Marca: gradiente y anillo de foco (coherentes con el logo/login) -- */
  --grad-brand: linear-gradient(135deg, #4F46E5, #0EA5E9);
  --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---- Tema oscuro (toggle) : superficies y semantica RE-AFINADAS (mas brillo) ---- */
:root[data-theme="dark"] {
  /* superficies / texto */
  --bg:   #0B0C15;
  --bg2:  #0E1019;
  --sf:   #131523;
  --sf2:  #191C2E;
  --sf3:  #1F2338;
  --ln:   #232741;
  --ln2:  #1B1E31;
  --ink:  #E9EAF4;
  --mut:  #A7ABC4;
  --fnt:  #8B90AB;
  --ok-bg:#12351F;

  /* marca / chrome (indigo mas profundo en la barra; acento mas claro para contraste) */
  --navy:   #312E81;
  --navy-2: #2DD4BF;
  --brand:  #818CF8;
  --accent: #818CF8;

  /* estados (aclarados para leer sobre fondos oscuros) */
  --st-done:  #34D399;
  --st-late:  #FBBF24;
  --st-prog:  #38BDF8;
  --st-pend:  #8A90AC;
  --st-block: #FB7185;

  /* KPI */
  --kpi-green:  #34D399;
  --kpi-blue:   #38BDF8;
  --kpi-orange: #FBBF24;
  --kpi-purple: #A78BFA;
  --kpi-red:    #FB7185;

  /* fase */
  --fase-1: #38BDF8;
  --fase-2: #A78BFA;
  --fase-3: #FB923C;
  --fase-4: #34D399;

  /* utilitarios */
  --ok:     #34D399;
  --warn:   #FBBF24;
  --danger: #FB7185;
  --purple: #A78BFA;

  --grad-brand: linear-gradient(135deg, #6366F1, #38BDF8);
}

/* Utilidades de color por estado/fase (consumidas por chips, barras Gantt, KPIs) */
.st-done  { --st: var(--st-done);  }
.st-late  { --st: var(--st-late);  }
.st-prog  { --st: var(--st-prog);  }
.st-pend  { --st: var(--st-pend);  }
.st-block { --st: var(--st-block); }
.fase-1 { --fase: var(--fase-1); }
.fase-2 { --fase: var(--fase-2); }
.fase-3 { --fase: var(--fase-3); }
.fase-4 { --fase: var(--fase-4); }