/* ---------- RELATÓRIO: NÃO ENTREGUES + PENDÊNCIAS ---------- */
.rel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rel-titulo { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.rel-meta { font-size: 12px; color: var(--muted); }

.rel-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 18px;
}
@media (max-width: 720px) { .rel-kpis { grid-template-columns: 1fr; } }
.rel-kpi-sub { font-size: 13px; font-weight: 600; margin-top: 4px; color: var(--text-soft); }
.rel-kpi-total { background: var(--surface); border-color: var(--accent); }
.rel-kpi-total .value { color: var(--accent); }

.rel-grupo { padding: 16px 18px; }
.rel-grupo-titulo {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--text-soft);
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px;
}
.rel-grupo-nome { color: var(--text); }
.rel-grupo-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.rel-tabela-titulo { font-size: 12px; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.rel-tabela-titulo:first-of-type { margin-top: 0; }
.rel-tabela { margin-bottom: 6px; border-radius: 8px; overflow: hidden; }

/* Guias não entregues: tom azul/accent no cabeçalho */
.rel-tabela.tabela-guias thead th {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  color: var(--accent);
}
/* Pendências abertas: tom âmbar no cabeçalho, ecoando o ⚠️ */
.rel-tabela.tabela-pendencias thead th {
  background: color-mix(in srgb, var(--warn) 20%, var(--surface-2));
  color: var(--warn);
}
.rel-tabela tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.rel-tabela .col-valor { font-weight: 700; color: var(--text); }

.rel-aging { color: var(--warn); border-color: var(--warn); }
.rel-aging.aging-danger { color: var(--danger); border-color: var(--danger); }
.rel-aging.aging-ok { color: var(--success); border-color: var(--success); }