/* ============================================================================
 * DATAMAP EFC — Design tokens (piloto Vale-Ready)
 * Carregado APÓS bootstrap e ANTES de project.css/ml.css.
 *
 * REGRA DE DESIGN (decisão deliberada): cor de MARCA != cor de DADO.
 *   --vale-*  : identidade Vale (verde + dourado) — navbar, headers, botoes,
 *               acentos. O "cara de produto Vale".
 *   --risk-*  : rampa PERCEPTUAL daltonismo-segura (azul->ambar->vermelho, SEM
 *               verde) para codificar P(degradado). Nunca usar verde-Vale para
 *               risco: (a) ~8% dos homens confundem verde/vermelho; (b) verde =
 *               marca colidiria com verde = "saudavel". Cor sempre redundante
 *               com numero + glifo (▲▬▼) + tamanho.
 *
 * NOTA: os hex --vale-* sao aproximacoes da marca Vale — confirmar valores
 * exatos no brand guide oficial antes de producao.
 * ========================================================================== */

:root {
  /* --- Marca Vale (identidade/chrome) — valores OFICIAIS (Guia de Marca Vale 2.0) -----
   *   Verde Vale  : Pantone 328  · RGB 0,126,122  · #007E7A
   *   Amarelo Vale: Pantone 124  · RGB 238,167,34 · #EEA722
   *   (cinza Vale Pantone Cool Gray 9 #919191 não usado p/ chrome aqui) */
  --vale-green:      #007e7a;   /* Verde Vale — Pantone 328 */
  --vale-green-700:  #00625f;   /* derivado escuro p/ hover */
  --vale-green-050:  #e6f3f2;   /* tint claro */
  --vale-gold:       #eea722;   /* Amarelo Vale — Pantone 124 */
  --vale-gold-050:   #fdf3dc;
  --vale-ink:        #0f1b18;

  /* --- Superficies "engenharia" (cinza-azulado, nao branco generico) ---- */
  --efc-bg:          #eef1f5;
  --efc-surface:     #ffffff;
  --efc-surface-2:   #f6f8fb;
  --efc-border:      #d6dbe3;
  --efc-ink:         #16202c;
  --efc-ink-mut:     #5a6675;

  /* --- Rampa de RISCO (perceptual, daltonismo-safe: azul->ambar->vermelho,
   *     SEM verde). low=frio/seguro, high=quente/critico. -------------------*/
  --risk-0: #2c6fbb;   /* p < 0.20  — baixo (azul) */
  --risk-1: #73a8d4;   /* 0.20–0.40 — azul claro   */
  --risk-2: #f4b740;   /* 0.40–0.60 — ambar        */
  --risk-3: #e8772e;   /* 0.60–0.80 — laranja      */
  --risk-4: #b5302a;   /* p >= 0.80 — critico (vermelho) */
  --risk-unknown: #9ca3af;
  --risk-uncertain-ring: #94a3b8;  /* cinza — incerteza != alarme */

  /* --- Tipografia / escala / forma ------------------------------------- */
  /* Fonte oficial Vale = "Vale Sans" (proprietária; fallback oficial Arial).
   * Inter entra como fallback web profissional quando Vale Sans não instalada. */
  --efc-font: "Vale Sans", "Inter", Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --efc-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --efc-1: 4px; --efc-2: 8px; --efc-3: 12px; --efc-4: 16px; --efc-6: 24px; --efc-8: 32px;
  --efc-radius: 8px; --efc-radius-sm: 6px;
  --efc-shadow: 0 1px 3px rgba(16,32,44,.08), 0 4px 12px rgba(16,32,44,.06);

  /* --- Semantica de estado (banners/flags) ----------------------------- */
  --efc-info-bg:    var(--vale-green-050);  --efc-info-ink:   var(--vale-green-700);
  --efc-caution-bg: #fff6e6;                --efc-caution-ink:#8a5a00;
  --efc-blocked-bg: #fdecec;                --efc-blocked-ink:#9b2226;
}

/* Dark mode — herda dos mesmos nomes; ml.css ja usa [data-theme="dark"]. */
[data-theme="dark"] {
  --efc-bg:        #0f1117;
  --efc-surface:   #1a1d27;
  --efc-surface-2: #20232f;
  --efc-border:    #2e3347;
  --efc-ink:       #e2e8f0;
  --efc-ink-mut:   #94a3b8;
  --vale-green-050:#11302a;
  --vale-gold-050: #2a2410;
  /* rampa de risco mantem-se (perceptual independe de tema) */
  --efc-info-bg:   #11302a;  --efc-info-ink:   #7fd9c4;
  --efc-caution-bg:#2a2410;  --efc-caution-ink:#e6b450;
  --efc-blocked-bg:#3a1414;  --efc-blocked-ink:#f08a8a;
}

/* ---- Componentes-base derivados (reaproveitam Bootstrap) --------------- */
.efc-brandbar { background: var(--vale-green); color: #fff; }
.efc-brandbar .navbar-brand,
.efc-brandbar .nav-link { color: #fff !important; }
.efc-brandbar .navbar-brand { font-weight: 700; letter-spacing: .02em; }
.efc-brandbar .efc-brand-accent { color: var(--vale-gold); }

.efc-card {
  background: var(--efc-surface); border: 1px solid var(--efc-border);
  border-radius: var(--efc-radius); box-shadow: var(--efc-shadow);
}

/* Banner honesto calmo (info por padrao; caution/blocked so quando real). */
.efc-banner { display:flex; gap:var(--efc-2); align-items:center;
  padding: var(--efc-2) var(--efc-4); border-radius: var(--efc-radius-sm);
  font-size:.85rem; line-height:1.3; }
.efc-banner--info    { background:var(--efc-info-bg);    color:var(--efc-info-ink); }
.efc-banner--caution { background:var(--efc-caution-bg); color:var(--efc-caution-ink); }
.efc-banner--blocked { background:var(--efc-blocked-bg); color:var(--efc-blocked-ink); }

/* Chip de flag (AMV/ponte/cobertura). */
.efc-chip { display:inline-flex; align-items:center; gap:4px; padding:1px 7px;
  border-radius:999px; font-size:.72rem; font-weight:600;
  background:var(--efc-surface-2); color:var(--efc-ink-mut); border:1px solid var(--efc-border); }
.efc-chip--anom { background:var(--efc-caution-bg); color:var(--efc-caution-ink); border-color:transparent; }

/* Selo de incerteza (cinza, nunca vermelho). Cor do texto = --efc-ink-mut
 * (~#5a6675, contraste 5.85:1, WCAG AA OK); o token --risk-uncertain-ring
 * (2.56:1) segue só no anel do mapa, onde contraste de texto não se aplica. */
.efc-uncertain { font-size:.7rem; color:var(--efc-ink-mut); font-weight:600; }

/* ============================================================================
 * Estados unificados (T-08): empty / error / loading reaproveitáveis em
 * dashboard, simulador e projeção. SÓ tokens (theme-aware), zero hex novo.
 * ========================================================================== */

/* Bloco de estado centrado: ícone + título + texto + (CTA opcional). */
.efc-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--efc-2);
  padding: var(--efc-6) var(--efc-4);
  color: var(--efc-ink-mut);   /* 5.85:1 sobre surface — WCAG AA */
  font-size: .85rem;
  line-height: 1.4;
}
.efc-state__icon {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--efc-surface-2);
  color: var(--efc-ink-mut);
  border: 1px solid var(--efc-border);
}
.efc-state__icon svg { width: 22px; height: 22px; }
.efc-state__title {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--efc-ink);       /* título usa ink forte (contraste alto) */
}
.efc-state__text { margin: 0; max-width: 34ch; }
.efc-state__cta { margin-top: var(--efc-2); }

/* Variante erro: ícone/título herdam a semântica "blocked" (vermelho calmo). */
.efc-state--error .efc-state__icon {
  background: var(--efc-blocked-bg);
  color: var(--efc-blocked-ink);
  border-color: transparent;
}
.efc-state--error .efc-state__title { color: var(--efc-blocked-ink); }

/* Skeleton shimmer (T-08): complementa o .efc-skeleton de efc-components.css
 * (que faz pulse). .efc-skeleton--shimmer adiciona o brilho deslizante; o
 * gradiente usa surfaces de token (theme-aware). prefers-reduced-motion
 * desliga a animação. */
@keyframes efc-shimmer {
  0%   { background-position: -180% 0; }
  100% { background-position:  180% 0; }
}
.efc-skeleton--shimmer {
  background-image: linear-gradient(
    100deg,
    var(--efc-surface-2) 30%,
    color-mix(in srgb, var(--efc-border) 55%, var(--efc-surface-2)) 50%,
    var(--efc-surface-2) 70%
  );
  background-size: 220% 100%;
  animation: efc-shimmer 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .efc-skeleton--shimmer { animation: none; }
}