/* ================= e13: relatórios =================
   Plano: auditoria/evidencias-construcao/e13/PLANO-VISUAL.md. Tokens da e03; as três cores dos gráficos
   foram validadas pela skill dataviz (validate_palette.js, modo claro).
   Ordem: base → componentes → @media (celular por último). */
.rl { --rl-1: var(--azul); --rl-2: #E0892B; --rl-3: #7A4FB0; }

/* ---------- o sumário do edital: assunto → relatório → item ---------- */
.rl-sumario { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--esp-4);
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.rl-assunto { min-width: 0; padding: 14px 10px 10px; }
.rl-assunto + .rl-assunto { border-left: 1px solid var(--borda); }
/* e24: sete assuntos, quatro por linha */
.rl-assunto:nth-child(4n+1) { border-left: 0; }
.rl-assunto:nth-child(n+5) { border-top: 1px solid var(--borda); }
.rl-assunto h3 { margin: 0 0 6px 10px; font-size: var(--t-rotulo); font-weight: 600; color: var(--apoio); }
.rl-assunto ul { list-style: none; margin: 0; padding: 0; }
.rl-item { all: unset; box-sizing: border-box; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 34px; padding: 7px 10px; border-radius: 8px; border-left: 3px solid transparent; cursor: pointer; font-size: var(--t-corpo); color: var(--tinta); }
.rl-item span { min-width: 0; }
.rl-item small { flex: none; font-size: var(--t-nota); color: var(--apoio); font-variant-numeric: tabular-nums; }
.rl-item:hover { background: var(--fundo-suave); }
.rl-item:hover span { text-decoration: underline; text-underline-offset: 3px; }
.rl-item:focus-visible { outline: 2px solid var(--agua); outline-offset: 1px; }
.rl-item.ativo { background: var(--azul-claro-fundo); border-left-color: var(--azul); color: var(--azul-escuro); font-weight: 600; }
.rl-item.ativo small { color: var(--azul-escuro); }
.rl-escolha { display: none; }

/* ---------- faixa marinho: o relatório escolhido e as ações ---------- */
.rl-faixa { display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-8); align-items: flex-end; }
.rl-faixa-texto { flex: 1 1 420px; min-width: 0; }
.rl-faixa h3 { margin: 0 0 4px; font-size: var(--t-titulo); font-weight: 600; color: var(--branco); }
.rl-faixa .pc-nota { margin: 0; max-width: 76ch; }
.rl-itens { margin: 8px 0 0; font-size: var(--t-rotulo); color: var(--agua); }
.rl-faixa-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ---------- filtros ---------- */
.rl-filtros .campo { flex: 1 1 160px; max-width: 240px; }
.rl-filtros .rl-campo-inteiro { flex: 0 1 130px; }
.rl-filtros .rl-campo-data { flex: 0 1 170px; }
.rl-filtros input[type=date] { width: 100%; box-sizing: border-box; }
.rl-filtros input[type=number] { width: 100%; box-sizing: border-box; }
.rl-mais-btn { display: none; }
.rl-tabela small.rl-oc { white-space: normal; max-width: 36ch; }

/* ---------- gráficos ---------- */
.rl-cor-1 { background: var(--rl-1); }
.rl-cor-2 { background: var(--rl-2); }
.rl-cor-3 { background: var(--rl-3); }
.rl-grafico figure { margin: 0; padding: var(--esp-4) 20px 20px; }
.rl-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); margin-bottom: var(--esp-3); font-size: var(--t-rotulo); color: var(--apoio); }
.rl-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.rl-legenda i { width: 10px; height: 10px; border-radius: 3px; }
[data-dica]:focus-visible { outline: 2px solid var(--agua); outline-offset: 2px; }

/* nome longo: barra horizontal, rótulo à esquerda e o valor na ponta */
.rl-hbarras { display: grid; gap: 6px; }
.rl-hbar { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); gap: var(--esp-3); align-items: center; }
.rl-hbar-rotulo { font-size: var(--t-rotulo); color: var(--tinta); text-align: right; line-height: 1.25; }
.rl-hbar-barras { display: grid; gap: 2px; min-width: 0; }
.rl-hbar-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rl-hbar-linha i { display: block; flex: none; width: max(var(--w), 2px); max-width: calc(100% - 92px); height: 12px; border-radius: 0 4px 4px 0; cursor: default;
  transform-origin: left; animation: rl-cresce-x .3s var(--ease) both; }
.rl-hbarras.duplo .rl-hbar-linha i { height: 9px; }
.rl-hbar-linha b { font-size: var(--t-rotulo); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
@keyframes rl-cresce-x { from { transform: scaleX(0); } }

/* ordem natural: colunas; várias séries empilhadas com 2 px de papel entre os segmentos */
/* o valor escrito fica acima da coluna, fora da altura dela: a barra de 100% encosta na linha de 100% */
.rl-colunas { position: relative; height: 220px; padding-left: 40px; margin-top: 22px; }
.rl-grade span { position: absolute; left: 40px; right: 0; border-top: 1px solid #E6EBF1; }
.rl-grade em { position: absolute; left: -40px; width: 34px; transform: translateY(-50%); text-align: right; font-style: normal; font-size: var(--t-nota); color: var(--apoio); font-variant-numeric: tabular-nums; }
.rl-cols { position: relative; height: 100%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 8px; border-bottom: 1px solid var(--borda-forte); }
.rl-col { display: flex; flex-direction: column-reverse; align-items: center; min-width: 0; height: 100%; }
.rl-col-pilha { display: flex; flex-direction: column-reverse; gap: 2px; width: min(100%, 44px); height: var(--h); flex-shrink: 0; transform-origin: bottom; animation: rl-cresce-y .3s var(--ease) both; }
.rl-col-pilha i { display: block; flex-basis: 0; min-height: 3px; cursor: default; }
.rl-col-pilha i:last-child { border-radius: 4px 4px 0 0; }
.rl-col b { margin-bottom: 4px; font-size: var(--t-nota); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }
.rl-eixo { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 8px; margin-left: 40px; padding-top: 6px; font-size: var(--t-nota); color: var(--apoio); text-align: center; }
.rl-eixo span { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.rl-eixo small { display: block; font-size: .92em; }
@keyframes rl-cresce-y { from { transform: scaleY(0); } }

/* ---------- tabela: grupos, subtotal e total ---------- */
.rl-resultado .bloco-cabeca p { overflow-wrap: anywhere; }
.rl-tabela tr.rl-grupo td { background: var(--fundo-suave); font-weight: 600; color: var(--tinta); padding-top: 10px; padding-bottom: 10px; }
.rl-tabela tr.rl-grupo td span { margin-left: 6px; font-weight: 400; color: var(--apoio); font-size: var(--t-rotulo); }
.rl-tabela tr.rl-subtotal td { font-weight: 600; color: var(--apoio); border-top: 1px solid var(--borda); }
.rl-tabela tr.rl-total td { font-weight: 700; border-top: 2px solid var(--marinho); background: var(--branco); }
/* e14: o nome do serviço quebra linha, para o valor faturado não sair da tabela */
.rl-t-estornos-inclusoes td.rl-primeira { white-space: normal; min-width: 16ch; }
.rl-tabela td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-var.sobe { color: var(--erro); font-weight: 600; }
.rl-var.desce { color: var(--azul-escuro); font-weight: 600; }
.rl-critica { display: inline-block; min-width: 22ch; max-width: 36ch; white-space: normal; line-height: 1.35; }
.rl-tabela td.rl-duplo small { display: block; margin-top: 2px; font-size: var(--t-nota); color: var(--apoio); white-space: nowrap; }
.rl-leituras { font-variant-numeric: tabular-nums; }
.rl-tabela td.rl-duplo small.rl-atraso { color: var(--erro); font-weight: 600; } /* e24 */
.rl-t-critica-leituras th { white-space: normal; vertical-align: bottom; line-height: 1.25; min-width: 58px; }
.rl-t-critica-leituras td, .rl-t-critica-leituras th { padding-left: 8px; padding-right: 8px; }
.rl-nota { margin: var(--esp-3) 0 0; padding: 0 20px 16px; }

/* ---------- impressão: o gráfico e os grupos da folha A4 ---------- */
.doc-filtros { font-size: 9pt; color: var(--apoio); }
/* e14 (item 67): cada via impressa diz qual é */
.doc-rel-via { float: right; margin: 0 0 2mm 4mm; padding: .8mm 3mm; border: 1px solid var(--marinho); border-radius: 999px; font-size: 8.5pt; font-weight: 600; }
.doc-grupo { font-size: 11pt; margin: 5mm 0 1.5mm; }
.doc-grafico { margin: 5mm 0 0; }
.doc-grafico figcaption { font-size: 9pt; font-weight: 600; margin-bottom: 2mm; }
.doc-legenda { display: flex; gap: 5mm; font-size: 8pt; color: var(--apoio); margin-bottom: 2mm; }
.doc-legenda i { display: inline-block; width: 3mm; height: 3mm; border-radius: .6mm; margin-right: 1.5mm; vertical-align: -.4mm; }
.doc-total { margin: 4mm 0 0; padding-top: 2mm; border-top: 1.5px solid var(--marinho); font-size: 9.5pt; }
.doc-relatorio .doc-tabela { width: 100%; font-size: 8.5pt; }
.doc-relatorio .doc-tabela th { font-size: inherit; }
.doc-relatorio.largo .doc-tabela { font-size: 7.5pt; }
.doc-relatorio.largo .doc-tabela th, .doc-relatorio.largo .doc-tabela td { padding-left: 1.2mm; padding-right: 1.2mm; }

@media (max-width: 1100px) {
  .rl-sumario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-assunto:nth-child(odd) { border-left: 0; }
  .rl-assunto:nth-child(n+3) { border-top: 1px solid var(--borda); }
}

@media (max-width: 760px) {
  .rl-sumario { display: none; }
  .rl-escolha { display: flex; flex-direction: column; margin-bottom: var(--esp-3); }
  .rl-escolha select { width: 100%; min-height: 44px; }
  .rl-faixa-acoes { flex: 1 1 100%; }
  .rl-faixa-acoes button { flex: 1 1 0; min-height: 44px; }
  .rl-filtros .campo, .rl-filtros .rl-campo-inteiro, .rl-filtros .rl-campo-data { max-width: none; flex: 0 0 auto; }
  .rl-hbar { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .rl-hbar-rotulo { text-align: left; }
  .rl-colunas { height: 180px; padding-left: 30px; }
  .rl-grade span { left: 30px; }
  .rl-grade em { left: -30px; width: 26px; }
  .rl-cols, .rl-eixo { gap: 0 3px; }
  .rl-eixo { margin-left: 30px; font-size: 10.5px; }
  .rl-col b { font-size: 10.5px; }
  .rl-tabela tr.rl-grupo td::before { display: none; }
  .rl-tabela tr.rl-grupo td { display: block; text-align: left; }
  .rl-tabela td.rl-rotulo-total { justify-content: flex-start; text-align: left; }
  .rl-tabela td.rl-rotulo-total::before { display: none; }
  .rl-tabela tr.rl-subtotal td:empty, .rl-tabela tr.rl-total td:empty { display: none; }
  .rl-critica { max-width: none; min-width: 0; }
  .rl-tabela tr.rl-total td, .rl-tabela tr.rl-subtotal td { border-top: 0; }
  .rl-tabela tr.rl-total { border-top: 2px solid var(--marinho); }
  .rl-tabela td.rl-rotulo-total::before { display: none; }
  .rl-celula { min-width: 0; text-align: right; }
  .rl-tabela td.rl-duplo small { white-space: normal; }
  .rl-mais-btn { display: flex; justify-content: center; min-height: 44px; }
  .rl-filtros:not(.aberto) .rl-extra { display: none; }
}

@media (prefers-reduced-motion: reduce) { .rl-hbar-linha i, .rl-col-pilha { animation: none; } }