/* =========================================================================
   ODX — estilos próprios de `custo-ia.html`, o painel de uso do Claude Code.
   =========================================================================

   ★ NÃO HÁ UM SEGUNDO `:root` AQUI, mesma razão do cabeçalho de
   `estado.css`: os tokens vivem em `percursos.css`, esta folha só declara o
   que é específico deste ecrã — os cartões, os gráficos, as tabelas.

   Esta página fixa `data-theme="dark"` no HTML (ver o cabeçalho de
   `custo-ia.html`), por isso os tokens de `percursos.css` já resolvem para
   a paleta escura sem nada aqui repetir cores.

   ★ AS CLASSES `ci-*` FICARAM, e não é preguiça. `custo-ia.js` desenha os
   cartões com `.ci-bloco` e as tabelas com `.ci-tabela` — as mesmas regras
   que a página tinha antes da #1349. Renomeá-las para `cc-*` seria um
   `sed` sobre HTML, CSS e JS ao mesmo tempo, sem nada a ganhar. As `cc-*`
   novas são as peças que não existiam: filtros, saltos, grelha de gráficos.
   ========================================================================= */

.ci-titulo-seccao{font-size:1.05rem;font-weight:650;margin-top:var(--sp-6);
  margin-bottom:var(--sp-3)}

/* ── a nota de «isto corre à mão» ── */
.cc-manual{margin-top:var(--sp-4);color:var(--text-2);font-size:.85rem;
  border-left:3px solid var(--info);background:rgba(106,166,245,.10);
  padding:var(--sp-3) var(--sp-4);
  border-radius:0 var(--radius-panel) var(--radius-panel) 0}

/* ── filtros ── */
.cc-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-6);padding:var(--sp-4);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius-panel);
  box-shadow:var(--shadow-1)}
.cc-filtro-rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-3);font-weight:650}
.cc-filtro-sep{width:1px;align-self:stretch;background:var(--line-2)}
.cc-filtro-estado{flex:1 1 100%;color:var(--text-3);font-size:.78rem}

.cc-seleccao,.cc-multi-botao{background:var(--bg-1);color:var(--text-1);
  border:1px solid var(--line-2);border-radius:var(--radius-control);
  padding:var(--sp-2) var(--sp-3);font:inherit;font-size:.85rem;
  min-height:var(--touch-min);cursor:pointer}
.cc-seleccao:focus-visible,.cc-multi-botao:focus-visible,
.cc-salto:focus-visible,.cc-botao-mini:focus-visible{outline:2px solid var(--brand);
  outline-offset:2px}

.cc-multi{position:relative}
.cc-multi-botao{display:inline-flex;align-items:center;gap:var(--sp-2)}
.cc-seta{color:var(--text-3);font-size:.7rem}
.cc-multi-painel{position:absolute;z-index:30;top:calc(100% + 4px);left:0;
  min-width:16rem;max-height:20rem;overflow-y:auto;background:var(--bg-2);
  border:1px solid var(--line-2);border-radius:var(--radius-panel);
  box-shadow:var(--shadow-3);padding:var(--sp-3)}
.cc-multi-accoes{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.cc-caixa{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);
  border-radius:var(--radius-control);cursor:pointer;font-size:.82rem;
  font-family:var(--font-mono);color:var(--text-1)}
.cc-caixa:hover{background:var(--brand-dim)}

.cc-botao-mini{background:var(--bg-1);color:var(--text-2);
  border:1px solid var(--line-2);border-radius:var(--radius-chip);
  padding:var(--sp-1) var(--sp-3);font:inherit;font-size:.75rem;cursor:pointer;
  transition:background .12s ease,color .12s ease}
.cc-botao-mini:hover{background:var(--brand-dim);color:var(--text-1)}

/* ── saltos ── */
.cc-saltos{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;
  gap:var(--sp-2);margin-top:var(--sp-4);padding:var(--sp-3) 0;
  background:var(--bg-0);border-bottom:1px solid var(--line)}
.cc-salto{background:transparent;color:var(--text-2);border:1px solid transparent;
  border-radius:var(--radius-chip);padding:var(--sp-1) var(--sp-3);font:inherit;
  font-size:.78rem;cursor:pointer;transition:background .12s ease,color .12s ease}
.cc-salto:hover{background:var(--brand-dim);color:var(--text-1);
  border-color:var(--line-2)}

/* ── cartões de resumo ── */
/* ★ `minmax(13rem,…)` E `nowrap` NO VALOR, os dois medidos. Com 11rem e
   `overflow-wrap:anywhere` o número que a página existe para mostrar —
   «$13 021,20» — partia-se ao meio em duas linhas, com o «0» final sozinho
   por baixo. O separador de milhares de `toLocaleString("pt-PT")` é um
   espaço, e `anywhere` autoriza a quebra em qualquer sítio. */
.cc-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:var(--sp-4);margin-top:var(--sp-5)}
.ci-bloco{background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-panel);padding:var(--sp-5);box-shadow:var(--shadow-1);
  transition:transform .12s ease,box-shadow .12s ease}
.ci-bloco:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.ci-bloco-rotulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-3);font-weight:650}
.ci-bloco-valor{margin-top:var(--sp-2);font-family:var(--font-mono);
  font-size:1.35rem;font-weight:650;color:var(--text-1);
  white-space:nowrap;overflow-x:auto}
.cc-cartao-sub{margin-top:var(--sp-2);color:var(--text-3);font-size:.74rem;
  line-height:1.4}
.cc-caixa-ids{display:block;margin-top:2px;color:var(--text-3);font-size:.68rem}

.ci-aviso{margin-top:var(--sp-4);color:var(--text-2);font-size:.85rem;
  border-left:3px solid var(--warn);background:var(--warn-dim);
  padding:var(--sp-3) var(--sp-4);
  border-radius:0 var(--radius-panel) var(--radius-panel) 0}

.ci-gerado-em{margin-top:var(--sp-5);color:var(--text-3);font-size:.78rem;
  font-family:var(--font-mono);line-height:1.6}

/* ── grelha de gráficos ── */
.cc-grelha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4);margin-top:var(--sp-6)}
.cc-cartao{background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-panel);padding:var(--sp-5);box-shadow:var(--shadow-1);
  min-width:0}
.cc-cartao.cc-largo{grid-column:1 / -1}
.cc-cartao h2{font-size:1rem;font-weight:650;margin:0}
.cc-dias{color:var(--text-3);font-size:.78rem;font-weight:400;
  font-family:var(--font-mono)}
.cc-nota{margin-top:var(--sp-2);color:var(--text-3);font-size:.78rem;
  line-height:1.5}
.cc-nota code{font-family:var(--font-mono);font-size:.95em}

.cc-grafico-caixa{position:relative;height:15rem;margin-top:var(--sp-4)}
.cc-grafico-caixa.cc-alto{height:22rem}
.cc-sem-grafico{display:flex;align-items:center;justify-content:center;
  height:100%;margin:0;padding:var(--sp-4);text-align:center;
  color:var(--text-3);font-size:.82rem;border:1px dashed var(--line-2);
  border-radius:var(--radius-panel)}

@media (max-width:860px){
  .cc-grelha{grid-template-columns:minmax(0,1fr)}
  .cc-cartao.cc-largo{grid-column:auto}
}

/* ── tabelas ── */
.cc-tabela-cartao{margin-top:var(--sp-6)}
.cc-tabela-topo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-3)}
.cc-tabela-topo h2{font-size:1rem;font-weight:650;margin:0}
.cc-tabela-topo .cc-botao-mini{margin-left:auto}

.cc-etiqueta{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;padding:2px 8px;border-radius:var(--radius-chip)}
.cc-autoritaria{background:var(--ok-dim);color:var(--text-1);
  border:1px solid var(--ok)}
.cc-derivada{background:var(--brand-dim);color:var(--text-1);
  border:1px solid var(--brand)}

.ci-tabela-caixa{background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-panel);overflow-x:auto;box-shadow:var(--shadow-1)}
.ci-tabela{width:100%;border-collapse:collapse;font-size:.86rem;white-space:nowrap}
.ci-tabela th,.ci-tabela td{text-align:left;padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line)}
.ci-tabela th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);font-weight:650}
.ci-tabela td{font-family:var(--font-mono);color:var(--text-1)}
.ci-tabela tbody tr:last-child td{border-bottom:none}
.ci-tabela tbody tr{transition:background .1s ease}
.ci-tabela tbody tr:hover{background:var(--brand-dim)}
.ci-tabela .cc-num{text-align:right;font-variant-numeric:tabular-nums}
.ci-tabela .cc-mono{font-family:var(--font-mono);color:var(--text-2)}

.cc-ordenavel th[data-ordem]{cursor:pointer;user-select:none}
.cc-ordenavel th[data-ordem]:hover{color:var(--text-1)}
.cc-ordenavel th[data-ordem]::after{content:"↕";margin-left:6px;opacity:.35}
.cc-ordenavel th.cc-ordem-asc::after{content:"↑";opacity:1;color:var(--brand)}
.cc-ordenavel th.cc-ordem-desc::after{content:"↓";opacity:1;color:var(--brand)}

.ci-tabela tfoot th{background:var(--bg-1);color:var(--text-1);
  font-size:.78rem;text-transform:none;letter-spacing:0;
  font-family:var(--font-mono);border-top:1px solid var(--line-2)}
.cc-corte{color:var(--text-3);font-size:.76rem;font-family:var(--font-body);
  white-space:normal}
.cc-vazio{color:var(--text-3);text-align:center;font-family:var(--font-body);
  white-space:normal;padding:var(--sp-6)}

.ci-pill{display:inline-flex;align-items:center;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  padding:2px 8px;border-radius:var(--radius-chip)}
.ci-pill.ci-ok{background:var(--ok-dim);color:var(--text-1);border:1px solid var(--ok)}
.ci-pill.ci-falhou{background:var(--warn-dim);color:var(--text-1);border:1px solid var(--warn)}
.ci-pill.cc-tipo{background:var(--gold-dim);color:var(--actor-human-ink);
  border:1px solid var(--actor-human);text-transform:none;letter-spacing:.02em;
  font-family:var(--font-mono)}

@media (prefers-reduced-motion:reduce){
  .ci-bloco,.ci-tabela tbody tr,.cc-salto,.cc-botao-mini{transition:none}
  .ci-bloco:hover{transform:none}
}