/* ══════════════════════════════════════════════════════════════════════════════
   Ponte painel-hud → AlmoxSystem

   O motor de gráficos e o corretor da skill "painel-hud" pedem ~50 tokens que
   este projeto não tinha. Em vez de trocar `tema.css`/`base.css` inteiros — o
   que atropelaria a identidade do app (padrão Gestão de Contratos, navy/azul) e
   3.200 linhas de tela em produção — esta camada TRADUZ o que já existe e
   acrescenta só o que falta.

   Carregue DEPOIS de styles.css: aqui há tokens que dependem dos dele.

   ⚠️ A paleta de séries (--viz-*) veio validada da skill e a ORDEM faz parte da
   validação (banda de luminosidade, piso de croma, separação sob daltonismo).
   Trocar a ordem exige revalidar — não reordene "para ficar bonito".
   ══════════════════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="light"] {
  /* ── Acento: VERDE VALE, o "neon discreto" ────────────────────────────────
     O acento do painel-hud é ciano #22E0F5 (escuro) / #0093B8 (claro). O ciano
     claro reprova como texto (3,58:1 < 4,5:1) e o pedido era um tom mais contido.
     #007E7A é a cor de marca da Vale e mede 4,92:1 tanto como texto no branco
     quanto com branco em cima — cumpre os DOIS contrastes, coisa que o teal
     original não fazia. É o acento; o navy segue como cor de estrutura. */
  --acento:        #007E7A;
  --acento-forte:  #006B67;   /* 6,37:1 — hover e estado ativo */
  --acento-sobre:  #ffffff;
  --acento-suave:  rgba(0, 126, 122, 0.10);
  --acento-linha:  rgba(0, 126, 122, 0.28);
  --acento-brilho: rgba(0, 126, 122, 0.38);

  /* ── Séries: paleta validada da skill (NÃO reordenar) ───────────────────── */
  --viz-1: #15a3b3; --viz-2: #8217fb; --viz-3: #6ca411; --viz-4: #fc179f;
  --viz-5: #075ff8; --viz-6: #c98712; --viz-7: #1294f9; --viz-8: #fc1658;
  --viz-1-soft: rgba(21,163,179,.10);  --viz-2-soft: rgba(130,23,251,.10);
  --viz-3-soft: rgba(108,164,17,.10);  --viz-4-soft: rgba(252,23,159,.10);
  --viz-5-soft: rgba(7,95,248,.10);    --viz-6-soft: rgba(201,135,18,.10);
  --viz-7-soft: rgba(18,148,249,.10);  --viz-8-soft: rgba(252,22,88,.10);
  --viz-neutro: #64748b;

  --grad-1: linear-gradient(180deg,#4fcdde 0%,#15a3b3 100%);
  --grad-2: linear-gradient(180deg,#a173fc 0%,#8217fb 100%);
  --grad-3: linear-gradient(180deg,#92ce48 0%,#6ca411 100%);
  --grad-4: linear-gradient(180deg,#fd91c1 0%,#fc179f 100%);
  --grad-5: linear-gradient(180deg,#5b93fc 0%,#075ff8 100%);
  --grad-6: linear-gradient(180deg,#f0af49 0%,#c98712 100%);
  --grad-7: linear-gradient(180deg,#81befd 0%,#1294f9 100%);
  --grad-8: linear-gradient(180deg,#fd8c96 0%,#fc1658 100%);
  --grad-pos:    linear-gradient(180deg,#4fb06e 0%,#2E7D46 100%);
  --grad-neg:    linear-gradient(180deg,#e05c70 0%,#C62A40 100%);
  --grad-neutro: linear-gradient(180deg,#93a2b8 0%,#64748b 100%);

  /* Dado com ORDEM (etapa, faixa, nível) pede rampa de um matiz só, escurecendo. */
  --ord-1:#23b9ca; --ord-2:#1da1b0; --ord-3:#178a97;
  --ord-4:#11737e; --ord-5:#0b5d67; --ord-6:#074b53;

  /* Eixo, grade e tooltip do gráfico */
  --viz-grid:        rgba(20,34,48,.10);
  --viz-axis-label:  rgba(20,34,48,.55);
  --viz-track:       rgba(20,34,48,.08);
  --viz-tooltip-bg:  #0E1B29;
  --viz-tooltip-fg:  #F5F9FF;

  /* ── Status: separado das séries pela luminosidade, sempre com rótulo junto ── */
  --positivo: #12855A;   /* = --green do app */
  --critico:  #C4362F;   /* = --red   */
  --atencao:  #B36A00;   /* = --orange */
  --sentiment-up:   var(--positivo);
  --sentiment-down: var(--critico);
  --sentiment-flat: var(--label3);

  /* ── Tradução dos nomes que o motor espera → tokens que o app já tem ────── */
  --font-system:            var(--sans);
  --color-bg-primary:       var(--surface);
  --color-label:            var(--label);
  --color-label-secondary:  var(--label2);
  --color-label-tertiary:   var(--label3);
  --color-fill-tertiary:    rgba(20,34,48,.05);
  --color-separator:        var(--hairline);
  --color-label-quaternary: rgba(20,34,48,.22);
  --shadow-4:               var(--shadow-l, var(--shadow-r));

  /* Escala densa (~0,85 do padrão Apple) — o app já é denso, mantém a mesma régua */
  --text-subheadline: 400 13px/18px   var(--sans);
  --text-footnote:    400 12px/16px   var(--sans);
  --text-caption1:    400 11px/15px   var(--sans);
  --text-caption2:    700 10px/13px   var(--sans);
  --text-kpi:         800 20px/24px   var(--sans);
  --text-card-title:  700 13.5px/18px var(--sans);

  --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --radius-xs:var(--r-xs); --radius-md:var(--r-m); --radius-full:var(--r-cap);

  /* ── Movimento: molas de verdade (linear() passa de 1 e dá o repique) ───── */
  --spring-fast:   linear(0,0.011,0.044,0.176 12.5%,0.452,0.7,0.879,0.976 38%,1.022,1.036 48%,1.032,1.013 61%,0.997,0.991,0.994 80%,1);
  --spring-subtle: linear(0,0.008,0.033,0.13,0.615 24%,0.795,0.91,0.972,1.001 49%,1.01,1.009 60%,1.003,0.999 74%,1);
  --ease-effects:  cubic-bezier(0.34,0.80,0.34,1);
  --duration-fast:150ms; --duration-normal:250ms; --duration-slow:350ms;
  --duration-slower:500ms; --duration-chart:900ms;
  --stagger-step:45ms; --reveal-delay:0ms;
}

/* ── Tema escuro: só o que muda de valor (o resto herda) ─────────────────── */
:root[data-theme="dark"] {
  --acento:        #22B3AD;   /* no escuro o verde sobe para manter 4,5:1 no fundo escuro */
  --acento-forte:  #4FD6D0;
  --acento-sobre:  #04201F;
  --acento-suave:  rgba(34,179,173,.12);
  --acento-linha:  rgba(34,179,173,.30);
  --acento-brilho: rgba(34,179,173,.45);
  --viz-grid:       rgba(150,180,210,.12);
  --viz-axis-label: rgba(210,228,245,.60);
  --viz-track:      rgba(150,180,210,.10);
  --viz-tooltip-bg: #F5F9FF;
  --viz-tooltip-fg: #0E1B29;
  --color-fill-tertiary: rgba(150,180,210,.08);
  --positivo:#2bbf62; --critico:#e23a52; --atencao:#d69412;
  --grad-pos: linear-gradient(180deg,#8bf0ae 0%,#2bbf62 100%);
  --grad-neg: linear-gradient(180deg,#ff9aa5 0%,#e23a52 100%);
}

/* ── Profundidade: o fio de luz na aresta de cima que faltava ─────────────
   O app já tinha sombra em duas camadas, mas sem o `rim`. É ele que separa
   "cartão com profundidade" de "retângulo com sombra". */
.card, .stat-card, .table-wrap, .modal, .tl-box, .aprov-card {
  box-shadow: var(--shadow-m), inset 0 1px 0 var(--spec-top, rgba(255,255,255,.9));
}
.card:hover, .stat-card:hover {
  box-shadow: var(--shadow-r), inset 0 1px 0 var(--spec-top, rgba(255,255,255,.9));
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .modal {
  box-shadow: var(--shadow-m), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── Caixa de gráfico: o motor se dimensiona; a altura fixa era do canvas do Chart.js ──
   Sem isto o gráfico é cortado em 300px e vaza por cima do cartão seguinte. */
.chart-box--hud, .chart-box--hud.chart-box, .chart-box--hud.chart-box-sm {
  height: auto; min-height: 0;
}
.hud-chart { width: 100%; }
/* A rosca fica lado a lado com a legenda; em tela estreita ela empilha sozinha. */
.chart-box--hud .donut-card { justify-content: center; }

/* ── Tabela para leitor de tela ────────────────────────────────────────────
   Cada gráfico do motor emite os números numa <table class="sr-only"> logo atrás
   (aria-label diz que há um gráfico, não diz o que ele diz). A regra que esconde
   mora no base.css da skill, que NÃO importamos — sem ela a tabela aparecia
   inteira embaixo do gráfico. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ══ Corretor pt-BR ══
   Extraído de controles.css da skill: só o bloco .corretor* (o resto daquele arquivo é
   seletor e calendário próprios, que colidiriam com os controles .ap-* que o app já tem).
   O espelho fica ATRÁS do textarea e desenha o sublinhado ondulado; as métricas do espelho
   e do campo têm de ser idênticas, senão o sublinhado sai do lugar da palavra. */
.corretor { position: relative; width: 100%; }
.corretor__pilha { position: relative; display: block; width: 100%; }

.corretor__pilha > .corretor__espelho,
.corretor__pilha > textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 68px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font: var(--text-subheadline);
  line-height: 1.45;
  letter-spacing: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
.corretor__espelho {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
  color: transparent;
}
.corretor__espelho mark {
  background: none; color: transparent;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.corretor__espelho .marca--corrigivel { text-decoration-color: var(--critico); }
.corretor__espelho .marca--provavel   { text-decoration-color: var(--atencao); }
.corretor__espelho .marca--desconhecida { text-decoration-color: var(--color-label-tertiary); }
.corretor textarea { position: relative; background: transparent; resize: vertical; }

.corretor__barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 7px;
  font: var(--text-caption1);
  color: var(--color-label-tertiary);
}
.corretor__msg::before {
  content: ''; display: inline-block; vertical-align: -1px;
  width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: var(--color-label-quaternary);
}
.corretor[data-estado="erro"] .corretor__msg { color: var(--critico); }
/* Sem halo: um ponto colorido com brilho de deslocamento zero é o "brilho legal"
   de interface gerada. A cor já diz o estado sozinha. */
.corretor[data-estado="erro"] .corretor__msg::before { background: var(--critico); }
.corretor[data-estado="aviso"] .corretor__msg { color: var(--atencao); }
.corretor[data-estado="aviso"] .corretor__msg::before { background: var(--atencao); }
.corretor[data-estado="ok"] .corretor__msg { color: var(--positivo); }
.corretor[data-estado="ok"] .corretor__msg::before { background: var(--positivo); }

.corretor__erros { display: flex; gap: 5px; flex-wrap: wrap; }
.corretor__erro {
  border: 1px solid transparent; cursor: pointer;
  padding: 3px 9px; border-radius: var(--radius-full);
  font: 600 11px/1.4 var(--font-system);
  background: rgba(255, 107, 122, 0.12); color: var(--critico);
  transition: background var(--duration-fast) var(--ease-out);
}

/* ══════════════════════════════════════════════════════════════════════════════
   O acento — "neon discreto"

   Doutrina do painel-hud: o acento é UMA cor, chapada, e só onde há INTERAÇÃO.
   Aqui o navy segue mandando na ESTRUTURA (barra lateral, títulos, botão primário)
   e o verde Vale entra como acento de interação: foco, estado ativo, seleção.
   É o que dá a energia do HUD sem a tela virar néon.

   Cobertura medida: o acento ocupa bem menos que os 10–15% que a skill admite —
   proposital, porque o pedido foi "mais discreto".
   ══════════════════════════════════════════════════════════════════════════════ */

/* Foco: um anel só, sempre visível, na cor do acento. Antes eram três cores
   diferentes de foco (--brand-bright, --brand, --accent-solid) em telas diferentes. */
.btn:focus-visible,
.fpill:focus-visible,
.kpi-click:focus-visible,
.nav-item:focus-visible,
.modal-close:focus-visible,
.req-item-rm:focus-visible,
.tl-mes:focus-visible,
.tl-nav:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: inherit;
}
.ap-field:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

/* Estado ativo — pílula de filtro e item de navegação selecionado. */
.fpill.active { background: var(--acento); border-color: transparent; color: var(--acento-sobre); }
.fpill.active .fpill-n { background: rgba(255,255,255,.24); }
.kpi-click.kpi-on { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset, var(--shadow-m); }
.kpi-click.kpi-on::after { background: var(--acento); }
.tl-mes.on { background: var(--acento); }

/* Botão primário fica navy (estrutura); o verde marca a AÇÃO de confirmar. */
.btn-primary:hover { background: var(--acento-forte); border-color: transparent; }

/* Seleção de texto na cor do acento — detalhe barato que amarra o conjunto. */
::selection { background: var(--acento-suave); color: var(--label); }

/* ══════════════════════════════════════════════════════════════════════════════
   Contraste — o que a auditoria pegou e o olho não pega

   `scripts/auditar.js` da skill mediu, no tema claro:
     · texto terciário (--label3) a 2,58:1  — mínimo para texto é 4,5:1
     · rótulo de eixo do gráfico a 3,73:1
     · cabeçalho de tabela a 4,49:1 (passava raspando e reprovava)
   Texto a 4,1:1 "parece legível" para quem tem visão boa e monitor bom; num
   tablet ao sol da obra, não é. Os valores abaixo foram CALCULADOS para fechar
   4,5:1 sobre a superfície de cada tema, não escolhidos no olho.
   ══════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* .66 e não .62: o cabeçalho de tabela e o rótulo de eixo não ficam sobre BRANCO puro,
     e sim sobre --surface-2 (#F5F7FA) — sobre ele .62 media 4,49:1 e reprovava por 0,01. */
  --label2: rgba(20,34,48,.66);
  --label3: rgba(20,34,48,.66);
  --viz-axis-label: rgba(20,34,48,.66);
}
:root[data-theme="dark"] {
  --label2: rgba(210,228,245,.58);
  --label3: rgba(210,228,245,.58);
  --viz-axis-label: rgba(210,228,245,.58);
}
/* Cabeçalho de tabela e rótulos de sistema: eram --label3 e ficavam abaixo do mínimo
   justamente por serem pequenos e em caixa alta, onde a leitura já é mais difícil. */
th, .stat-label, .tl-lbl, .kpi-head, .chart-legend { color: var(--label2); }
.donut-legend small, .hbar-name small { color: var(--label2); }

/* Aviso: #B36A00 media 4,22:1 no branco e 3,75:1 sobre o próprio fundo do selo — reprovava nos
   dois. #8F5500 fecha 6,06:1 e 5,39:1 e continua sendo laranja de aviso, não marrom. */
:root[data-theme="light"] { --orange-ink: #8F5500; }

/* Botões de ação suave no TEMA ESCURO: a auditoria mediu `btn-blue-soft` a 2,19:1 e
   `btn-danger` a 3,46:1 — defeito que já existia, não veio do painel-hud. A tinta sobe
   até fechar 4,5:1 sobre o próprio fundo translúcido do botão. */
:root[data-theme="dark"] {
  --blue-ink: #A9D4FF;
  --red-ink:  #FFB4AE;
}

/* ── Botões de ação suave: fundo OPACO ─────────────────────────────────────
   `btn-danger` e `btn-blue-soft` usavam fundo translúcido (rgba .10–.12). Com
   translucidez o contraste real depende de ONDE o botão está — a auditoria mediu
   2,19:1 e 3,46:1 em cima de superfícies diferentes, e a conta no papel dava outro
   número. Fundo opaco acaba com a ambiguidade: o contraste passa a ser um valor só,
   verificável, em qualquer tela. Os valores são o próprio fundo translúcido já
   resolvido sobre branco, então o visual não muda. */
:root[data-theme="light"] {
  --blue-chip: #E3EFFB;
  --red-chip:  #FBE6E5;
  --red-ink:   #A62B25;   /* 4,48:1 → 5,86:1 sobre o selo */
}
:root[data-theme="dark"] {
  --blue-chip: #16283C;
  --red-chip:  #33201F;
}
.btn-blue-soft { background: var(--blue-chip); color: var(--blue-ink); }
.btn-danger    { background: var(--red-chip);  color: var(--red-ink); }