/* Painel de resumo, tabela ordenável, relatórios e documentos para impressão */

/* ---------- Cores dos gráficos (paleta validada: daltonismo e contraste nos dois modos) ---------- */
:root { --serie-1: #2a78d6; --serie-2: #eb6834; --viz-grade: #e6e9ee; --viz-eixo: #5d6b7a; }
@media (prefers-color-scheme: dark) {
  :root { --serie-1: #3987e5; --serie-2: #d95926; --viz-grade: #26313c; --viz-eixo: #93a1b0; }
}

/* ---------- Painel de resumo ---------- */
.painel-resumo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.cartao {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .1rem; white-space: normal; text-align: left;
  padding: .6rem .8rem; border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra);
  border: 1px solid var(--borda); border-left: 4px solid var(--borda);
}
.cartao-valor { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cartao-rotulo { font-size: .8rem; color: var(--suave); }
.cartao.c-aviso { border-left-color: var(--aviso); }
.cartao.c-perigo { border-left-color: var(--perigo); }
.cartao.c-perigo .cartao-valor { color: var(--perigo); }
.cartao.c-ok { border-left-color: var(--ok); }
.cartao.ativo { outline: 2px solid var(--primaria); outline-offset: -1px; background: var(--info-fundo); }

/* ---------- Tabela ordenável / paginação ---------- */
th button.ordenar { background: none; border: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
th button.ordenar:hover { color: var(--texto); background: none; }
th .seta { font-size: .7rem; }
.paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .8rem 0; }
.paginacao button.atual { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); opacity: 1; }
.pilha-direita { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.pilha-direita .navegacao, .pilha-direita .acoes { margin: 0; }
.cabecalho-pagina .linha.pequena { margin-top: .3rem; }

/* ---------- Relatórios ---------- */
.filtros-relatorio { margin-bottom: 1rem; max-width: 720px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.tile { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem 1rem; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.tile-valor { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-rotulo { color: var(--suave); font-size: .85rem; }
.bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bloco-cab h2 { margin: 0; }
.grade-relatorios { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.viz-caixa { width: 100%; overflow-x: auto; }
svg.viz { width: 100%; min-width: 520px; height: auto; display: block; }
.viz-caixa svg.viz { width: auto; max-width: none; }
.viz-grade { stroke: var(--viz-grade); stroke-width: 1; }
.viz-base { stroke: var(--viz-eixo); stroke-width: 1; }
.viz-eixo { fill: var(--viz-eixo); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-s1 { fill: var(--serie-1); }
.viz-s2 { fill: var(--serie-2); }
.viz-alvo { fill: transparent; }
.viz-alvo:hover { fill: var(--superficie-2); fill-opacity: .5; }
.viz-legenda { display: flex; gap: 1rem; font-size: .85rem; color: var(--suave); margin: .6rem 0; }
.viz-legenda > span { display: inline-flex; align-items: center; gap: .35rem; }
.viz-amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.viz-dica { position: fixed; z-index: 2000; pointer-events: none; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 6px; padding: .4rem .6rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); font-size: .85rem; }
.viz-dica > div { display: flex; align-items: center; gap: .4rem; }
.viz-dica > div:first-child { font-weight: 600; }
.viz-dica strong { margin-left: auto; padding-left: .8rem; font-variant-numeric: tabular-nums; }
ol.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
ol.ranking li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 2.5rem; align-items: center; gap: .5rem; font-size: .88rem; padding: .1rem 0; }
ol.ranking li:hover { background: var(--superficie-2); border-radius: 4px; }
.ranking-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-trilho { height: 12px; }
.ranking-barra { display: block; height: 100%; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.ranking-valor { text-align: right; font-variant-numeric: tabular-nums; color: var(--suave); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pequeno { font-size: .85rem; }

/* ---------- Documentos para impressão (laudo / recibo) ---------- */
body.impressao .topo { display: none; }
body.impressao .conteudo { max-width: none; padding: 0; }
.barra-impressao { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .8rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.folhas { padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.folha {
  width: 210mm; min-height: 297mm; padding: 16mm 16mm 14mm; background: #fff; color: #111; box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; gap: 6mm; font-size: 11pt; color-scheme: light;
}
.folha.meia { min-height: 0; height: 138mm; padding: 10mm 14mm; gap: 3.5mm; font-size: 10pt; }
.doc-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; border-bottom: 2px solid #0b5cad; padding-bottom: 3mm; }
.doc-empresa { display: flex; gap: 3mm; align-items: flex-start; }
.doc-empresa img { width: 12mm; height: 12mm; }
.doc-empresa div { display: flex; flex-direction: column; font-size: 8.5pt; color: #444; }
.doc-empresa strong { font-size: 15pt; color: #0b5cad; }
.doc-titulo { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.doc-titulo strong { font-size: 13pt; text-transform: uppercase; letter-spacing: .03em; }
.doc-titulo span { font-family: var(--mono); font-size: 10pt; }
.doc-titulo .via { font-family: var(--fonte); font-size: 8.5pt; color: #444; border: 1px solid #999; border-radius: 3px; padding: 0 2mm; margin-top: 1mm; }
.doc-grade { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #bbb; border-radius: 2mm; }
.doc-campo { display: flex; flex-direction: column; padding: 1.8mm 3mm; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.doc-campo:nth-child(3n) { border-right: none; }
.doc-campo:nth-last-child(-n+3) { border-bottom: none; }
.doc-campo span { font-size: 7.5pt; text-transform: uppercase; color: #666; letter-spacing: .03em; }
.doc-campo.mono strong { font-family: var(--mono); }
.doc-bloco h3 { font-size: 10pt; text-transform: uppercase; color: #333; margin: 3mm 0 1.5mm; letter-spacing: .03em; }
.doc-datas { display: flex; gap: 10mm; }
.doc-texto { white-space: pre-wrap; margin: 0; line-height: 1.5; min-height: 20mm; border: 1px solid #ddd; border-radius: 2mm; padding: 3mm; }
.folha.meia .doc-texto { min-height: 14mm; }
.doc-obs { font-size: 8.5pt; color: #444; margin: 0; }
.doc-local { margin: 0; text-align: right; }
.doc-assinaturas { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; padding-top: 10mm; }
.folha.meia .doc-assinaturas { padding-top: 6mm; }
.doc-assinaturas div { display: flex; flex-direction: column; align-items: center; font-size: 9pt; color: #333; }
.linha-ass { width: 100%; border-top: 1px solid #333; margin-bottom: 1.5mm; }
.corte { width: 210mm; max-width: 100%; text-align: center; color: #888; font-size: 9pt; overflow: hidden; white-space: nowrap; }

@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff !important; }
  .topo, .barra-impressao, #toasts, .viz-dica { display: none !important; }
  .conteudo { padding: 0 !important; max-width: none !important; }
  .folhas { padding: 0; gap: 0; }
  .folha { box-shadow: none; }
  .folha:not(.meia) { break-after: page; }
  .corte { margin: 2mm 0; }
}
@media (max-width: 760px) {
  .folhas { align-items: flex-start; overflow-x: auto; }
  .pilha-direita { align-items: flex-start; }
}