/* Página da auditoria do 2º turno de 2026 (/auditoria/): artigo longo, mesmo visual do painel (estilo.css). */
.artigo { max-width: 820px; gap: 40px; }
.artigo .abas { margin-bottom: -16px; }
.artigo-topo { display: flex; flex-direction: column; gap: 12px; }
.sobretitulo { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.artigo h1 { font-size: 30px; line-height: 1.15; }
.linha-fina { font-size: 18px; line-height: 1.5; color: var(--t2); text-wrap: pretty; }
.assinatura-artigo { font-size: 14px; color: var(--t3); }
.sobretitulo .trilha { color: inherit; text-decoration: none; }
.sobretitulo .trilha:hover { text-decoration: underline; }
.acoes-artigo { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.acoes-artigo .botao { text-decoration: none; display: inline-flex; align-items: center; }

.artigo p, .artigo li, .artigo dd { font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.artigo ul, .artigo ol { padding-left: 22px; margin: 0; }
.artigo li + li { margin-top: 8px; }
.artigo h2 { font-size: 24px; line-height: 1.2; }
.artigo h3 { font-size: 19px; line-height: 1.3; font-weight: 600; margin-top: 10px; }
.artigo a:not(.botao) { color: var(--t1); text-underline-offset: 2px; }
.artigo code { font-size: 14px; background: var(--superficie); padding: 1px 5px; border-radius: 6px; overflow-wrap: anywhere; }

.secao-artigo, .resumo-artigo { display: flex; flex-direction: column; gap: 14px; }
.secao-artigo { border-top: 1px solid var(--div); padding-top: 32px; }
.indice { padding: 20px 24px; border-radius: var(--raio); background: var(--superficie); display: flex; flex-direction: column; gap: 10px; }
.indice h2 { font-size: 17px; }
.indice li + li { margin-top: 4px; }
.indice-sub { margin-top: 4px !important; font-size: 15px; list-style: disc; }
.indice a { text-decoration: none; font-weight: 500; }
.indice a:hover { text-decoration: underline; }

.passos li + li { margin-top: 12px; }
.destaque-artigo { padding: 14px 18px; border-radius: 14px; background: var(--superficie); }
.nota-artigo { font-size: 15px; color: var(--t2); padding-left: 12px; border-left: 2px solid var(--div-forte); }
.nota-tabela { font-size: 13px !important; color: var(--t3); margin-top: -6px; }

/* veredito de cada parte e de cada afirmação */
.veredito { font-weight: 600; padding: 10px 14px; border-radius: 12px; }
.veredito-ok { background: #E4F5E9; color: #1B6E35; }
.veredito-nao { background: #FFF1E5; color: #8A3B00; }

.afirmacao { display: flex; flex-direction: column; gap: 12px; padding: 22px 0 6px; border-top: 1px dashed var(--div-forte); }
.afirmacao:first-of-type { border-top: 0; }

/* tabelas do artigo: texto à esquerda, números alinhados à direita */
.tabela-artigo { font-size: 14px; }
.tabela-artigo th, .tabela-artigo td { white-space: normal; overflow-wrap: break-word; }
.tabela-artigo thead th { text-align: left; padding: 6px 8px 8px; height: auto; vertical-align: bottom; white-space: normal; }
.tabela-artigo tbody th, .tabela-artigo tbody td, .tabela-artigo tfoot th, .tabela-artigo tfoot td {
  text-align: left; height: auto; padding: 10px 8px; vertical-align: top; line-height: 1.4; font-weight: 400; }
.tabela-artigo tbody th, .tabela-artigo tfoot th { font-weight: 600; }
.tabela-artigo.numeros td, .tabela-artigo.numeros thead th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.resumo-artigo .tabela-artigo tbody th { width: 42%; }
@media (max-width: 600px) {
  .tabela-artigo { font-size: 13px; }
  .tabela-artigo thead th, .tabela-artigo tbody th, .tabela-artigo tbody td, .tabela-artigo tfoot th, .tabela-artigo tfoot td { padding-left: 5px; padding-right: 5px; }
  .tabela-artigo.numeros td, .tabela-artigo.numeros thead th:not(:first-child) { white-space: normal; }
}

.glossario { display: grid; grid-template-columns: 1fr; gap: 4px 20px; margin: 0; }
.glossario dt { font-weight: 600; margin-top: 10px; }
.glossario dd { margin: 0; color: var(--t2); }

@media (min-width: 768px) {
  .artigo h1 { font-size: 40px; }
  .glossario { grid-template-columns: 220px 1fr; }
  .glossario dt { margin-top: 0; }
}

/* PDF (ferramentas/gerar_pdf_auditoria.ts): sem menu nem botões, tabelas inteiras na página */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  .artigo { max-width: none; padding: 0; gap: 24px; }
  .abas, .acoes-artigo { display: none !important; }
  .secao-artigo { break-before: auto; padding-top: 20px; }
  table, .veredito, .destaque-artigo { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .tabela-moldura { overflow: visible; margin: 0; padding: 0; }
  .artigo p, .artigo li, .artigo dd { font-size: 11pt; }
  .tabela-artigo { font-size: 9.5pt; }
  .artigo a:not(.botao) { text-decoration: none; }
  .tabela-artigo.numeros td { white-space: nowrap; }
}

/* gráficos (ferramentas/graficos_auditoria.py): SVG em linha, com a tabela dos mesmos números ao lado */
.grafico { margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.grafico-titulo { font-size: 15px; font-weight: 600; color: var(--t1); }
.grafico-svg { width: 100%; height: auto; display: block; font-family: inherit; }
.grafico-nota { font-size: 13px !important; color: var(--t3); line-height: 1.45 !important; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--t2); }
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-legenda i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { padding: 14px 16px; border-radius: 14px; background: var(--superficie); display: flex; flex-direction: column; gap: 4px; }
.kpi-valor { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--t1); line-height: 1.1; }
.kpi-rotulo { font-size: 13px; color: var(--t2); line-height: 1.35; }
.tabela-anexo { font-size: 13px; }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media print { .grafico, .kpis { break-inside: avoid; } .kpi-valor { font-size: 22pt; } }
/* no celular o gráfico mantém uma largura mínima legível e rola para o lado, como as tabelas largas */
.grafico-rolagem { overflow-x: auto; margin: 0 calc(var(--margem) * -1); padding: 0 var(--margem); }
.grafico-svg { min-width: 560px; }
@media print { .grafico-rolagem { overflow: visible; margin: 0; padding: 0; } .grafico-svg { min-width: 0; } }