/* ENAPOR Konekta — a evidência de uma resposta: os blocos (número, tabela, KPIs, ranking, SQL, fontes, «Como foi calculado», a ficha do
   indicador e a «Primeira leitura»), os gráficos em SVG e o «Ampliar». Quem os cria é o js/blocos.js e o js/graficos.js. O contentor
   dos blocos dentro da resposta e o painel lateral são da folha da conversa. */

:root {
  /* As cores das séries dos gráficos. A ordem é fixa e nunca se roda: o Real e o Plano são sempre as duas primeiras, e uma série
     nova toma a cor que sobra, nunca uma gerada. O conjunto foi validado (banda de luminosidade, croma, separação entre vizinhas
     para daltónicos ≥ 8 e para visão normal ≥ 15). Sobre o branco algumas ficam abaixo de 3:1; por isso os valores também estão na
     dica e na tabela de dados do «Ampliar». */
  --serie-1: #1464F4; --serie-2: #6DA7EC; --serie-3: #EB6834; --serie-4: #1BAF7A;
  --serie-5: #EDA100; --serie-6: #E87BA4; --serie-7: #6250D6; --serie-8: #E34948;
}
.cv-s1 { --cor: var(--serie-1); } .cv-s2 { --cor: var(--serie-2); } .cv-s3 { --cor: var(--serie-3); } .cv-s4 { --cor: var(--serie-4); }
.cv-s5 { --cor: var(--serie-5); } .cv-s6 { --cor: var(--serie-6); } .cv-s7 { --cor: var(--serie-7); } .cv-s8 { --cor: var(--serie-8); }

/* ---------------------------------------------------------------- o que todos os blocos têm */

.cv-bloco { margin: 0; min-width: 0; }
.cv-bloco-titulo { margin-bottom: 0.45rem; color: var(--texto); font-size: var(--t-peq); font-weight: 650; }
.cv-bloco-titulo code { font-size: var(--t-peq); }
.cv-bloco-titulo .dim { font-weight: 500; }
.cv-bloco-acoes { display: flex; flex-wrap: wrap; gap: 0.15rem; margin: 0.35rem 0 0 -0.6rem; }
.cv-unidade { font-weight: 450; color: var(--dim); }

/* o número: em ponto grande, com os algarismos proporcionais (um número sozinho não se alinha com nada) */
.cv-numero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.cv-numero strong { font-size: var(--t-xg); font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.cv-numero-unidade { font-size: var(--t-m); font-weight: 650; color: var(--dim); }
.cv-numero-rotulo { color: var(--dim); }

.cv-tabela .tabela :is(td, th).num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- KPIs */

.cv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.75rem; }
.cv-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; margin: 0; padding: 0.75rem 0.9rem;
  border: 1px solid var(--borda); border-radius: var(--raio-peq); background: var(--superficie); color: var(--texto);
  font: inherit; text-align: left;
}
.cv-kpi-rotulo { color: var(--dim); font-size: var(--t-peq); }
.cv-kpi-valor { font-size: var(--t-g); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.cv-kpi-var { font-size: var(--t-peq); font-weight: 650; color: var(--dim); }
.cv-kpi-var[data-tom="ok"] { color: var(--ok); }
.cv-kpi-var[data-tom="aviso"] { color: var(--aviso); }
.cv-kpi-var[data-tom="erro"] { color: var(--erro); }
.cv-kpi-ref { color: var(--dim); font-size: var(--t-peq); }
/* um cartão que abre a ficha do indicador é um botão; o da ficha aberta leva .ativo (a conversa põe-no) */
button.cv-kpi { cursor: pointer; transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida); }
button.cv-kpi:hover { border-color: var(--azul-claro); }
button.cv-kpi.ativo { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }

/* ---------------------------------------------------------------- o ranking (bloco `grafico`) */

/* o rótulo, a barra num trilho e o valor; o valor à direita, com os algarismos alinhados */
.cv-barras {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(6rem, 1fr) auto; gap: 0.35rem 0.85rem; align-items: center;
}
.cv-barras > li { display: contents; }
.cv-barra-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-peq); }
.cv-barra-trilho { position: relative; height: 1.1rem; border-radius: 4px; background: var(--superficie-2); }
.cv-barra {
  position: absolute; top: 50%; height: 0.7rem; transform: translateY(-50%); min-width: 3px;
  left: calc(var(--ini, 0) * 100%); width: calc(var(--larg, 0) * 100%); background: var(--serie-1); border-radius: 0 4px 4px 0;
}
.cv-barra-neg { border-radius: 4px 0 0 4px; }
/* o zero realçado: só quando há valores negativos (senão é a ponta da esquerda do trilho) */
.cv-com-negativos .cv-barra-trilho::before {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: calc(var(--zero, 0) * 100%); width: 1.5px; background: var(--dim); z-index: 1;
}
.cv-barra-valor { font-size: var(--t-peq); font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cv-barras > li:hover .cv-barra { background: var(--ativo); }

/* ---------------------------------------------------------------- os gráficos em SVG */

.cv-grafico { min-width: 0; }
.cv-grafico-caixa { position: relative; }
.cv-svg { display: block; width: 100%; max-width: 100%; overflow: visible; touch-action: pan-y; }
.cv-grafico-vazio { margin: 0; }

/* a legenda: um quadrado nas barras, um traço nas linhas — a cor está na marca, e o nome em tinta de texto */
.cv-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0 0 0.4rem; padding: 0; font-size: var(--t-peq); color: var(--dim); }
.cv-legenda li { display: inline-flex; align-items: center; gap: 0.4rem; }
.cv-chave { flex: none; display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 3px; background: var(--cor, var(--neutro)); }
.cv-legenda-linhas .cv-chave { width: 0.95rem; height: 3px; border-radius: 2px; }

/* a grelha é um fio; o zero (quando está na escala) vem realçado, e o seu número também */
.cv-grade { stroke: var(--borda); stroke-width: 1; shape-rendering: crispEdges; }
.cv-zero-linha { stroke: var(--dim); stroke-width: 1.5; }
.cv-eixo-texto { fill: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.cv-zero-texto { fill: var(--texto); font-weight: 650; }
.cv-rotulo { fill: var(--dim); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-rotulo-forte { fill: var(--texto); }
.cv-barra-svg { fill: var(--cor); }
.cv-linha-s { fill: none; stroke: var(--cor); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* a bolinha leva um anel da cor da superfície, para se ler onde cruza uma linha */
.cv-ponto { fill: var(--cor); stroke: var(--superficie); stroke-width: 2; }
.cv-realce { fill: var(--superficie-2); }
.cv-cruz { stroke: var(--borda-forte); stroke-width: 1; shape-rendering: crispEdges; }

/* a dica: junto à coluna que se vê; o valor à frente, o nome da série atrás */
.cv-dica {
  position: absolute; z-index: 5; min-width: 8rem; max-width: 18rem; padding: 0.45rem 0.65rem; pointer-events: none;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-peq); background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-alta); font-size: var(--t-peq);
}
.cv-dica-titulo { margin-bottom: 0.2rem; font-weight: 650; }
.cv-dica-linha { display: flex; align-items: center; gap: 0.5rem; }
.cv-dica-linha .cv-chave { width: 0.95rem; height: 3px; border-radius: 2px; }
.cv-dica-linha strong { font-variant-numeric: tabular-nums; }

/* a tabela de dados do «Ampliar»: os nomes das linhas em tinta de texto, e não como cabeçalhos esbatidos */
.cv-dados { margin-top: 1rem; }
.cv-dados tbody th { background: transparent; color: var(--texto); font-size: inherit; font-weight: 500; text-align: left; }

/* ---------------------------------------------------------------- SQL, fontes */

.cv-sql pre {
  margin: 0; padding: 0.75rem 0.9rem; overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio-peq);
  background: var(--fundo); font-family: var(--mono); font-size: var(--t-peq); line-height: 1.55;
}
.cv-sql pre code { font-size: inherit; background: none; padding: 0; }
.cv-sql-origem { margin: 0 0 0.45rem; color: var(--dim); font-size: var(--t-peq); }
.cv-sql-executado { margin-top: 0.5rem; }
.cv-sql-executado summary { cursor: pointer; color: var(--dim); font-size: var(--t-peq); }
.cv-sql-executado pre { margin-top: 0.4rem; }
.cv-sql-pedido { margin: 0.4rem 0 0; font-size: var(--t-peq); }

.cv-fontes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.cv-fontes-titulo { color: var(--dim); font-size: var(--t-peq); font-weight: 650; }
.cv-fontes .chip .ico { color: var(--dim); }

/* ---------------------------------------------------------------- «Como foi calculado», a ficha do indicador, a «Primeira leitura» */

.cv-calculo h3, .cv-ficha h3 { margin: 0 0 0.4rem; font-size: var(--t-m); }
.cv-estado { margin: 0 0 0.3rem; }
.cv-estado .pill { white-space: normal; text-align: left; }
.cv-secao { margin-top: 0.9rem; }
.cv-secao h4 { margin: 0 0 0.35rem; color: var(--dim); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.cv-secao ul, .cv-secao ol { margin: 0; padding-left: 1.1rem; }
.cv-secao li + li { margin-top: 0.45rem; }
.cv-secao .md > :last-child { margin-bottom: 0; }

.cv-ficha-cab { color: var(--dim); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
.cv-ficha-valor { margin: 0 0 0.4rem; }
.cv-ficha-valor strong { font-size: var(--t-m); }
.cv-ficha-dl { margin: 0; display: flex; flex-direction: column; }
.cv-ficha-dl > div { padding: 0.5rem 0; border-top: 1px solid var(--borda); }
.cv-ficha-dl dt { color: var(--dim); font-size: var(--t-peq); }
.cv-ficha-dl dd { margin: 0; font-weight: 600; }

.cv-leitura { padding: 0.7rem 0.9rem; border: 1px dashed var(--azul-claro); border-radius: var(--raio-peq); background: var(--superficie-2); }
.cv-leitura-titulo { display: block; margin-bottom: 0.2rem; color: var(--ativo); }
.cv-leitura .md > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- o «Ampliar»: um <dialog> */

.cv-ampliar {
  width: min(70rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 4rem); padding: 0;
  border: 1px solid var(--borda-forte); border-radius: 14px; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta);
}
.cv-ampliar[open] { animation: sobe var(--dur) var(--curva) both; }
.cv-ampliar::backdrop { background: rgba(12, 36, 68, 0.5); }
.cv-ampliar-dentro { display: flex; flex-direction: column; max-height: calc(100dvh - 4rem); }
.cv-ampliar-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--borda); }
.cv-ampliar-cab h2 { margin: 0; font-size: var(--t-m); }
.cv-ampliar-corpo { overflow: auto; padding: 1rem; }

@media (max-width: 640px) {
  .cv-barras { grid-template-columns: minmax(4.5rem, 8rem) minmax(0, 1fr) auto; gap: 0.3rem 0.6rem; }
}