/* ── Relatórios — Filtros ─────────────────────────────────────────── */
.rel-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 0 8px;
}

.rel-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rel-chip {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border, #e0e0e0);
  background: #fff;
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  color: var(--text, #333);
}
.rel-chip:hover {
  background: var(--teal-light, #e3f0f4);
  border-color: var(--teal-mid, #1A4E62);
}
.rel-chip.active {
  background: var(--teal-mid, #1A4E62);
  color: #fff;
  border-color: var(--teal-mid, #1A4E62);
}

.rel-custom-range {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rel-date-input {
  width: 140px;
  font-size: .82rem;
  padding: 5px 8px;
}

.rel-select {
  min-width: 180px;
  font-size: .82rem;
  padding: 5px 8px;
}

/* ── Sub-abas ─────────────────────────────────────────────────────── */
.rel-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border, #e0e0e0);
  margin-bottom: 16px;
}

.rel-tab {
  padding: 8px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: .88rem;
  color: #666;
  transition: color .15s, border-color .15s;
}
.rel-tab:hover {
  color: var(--teal-mid, #1A4E62);
}
.rel-tab.active {
  color: var(--teal-mid, #1A4E62);
  border-bottom-color: var(--teal-mid, #1A4E62);
  font-weight: 600;
}

/* ── Painel ───────────────────────────────────────────────────────── */
.rel-panel {
  display: none;
}
.rel-panel.active {
  display: block;
}

/* ── KPIs ─────────────────────────────────────────────────────────── */
.rel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.rel-kpi-card {
  background: #fff;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.rel-kpi-card.rel-kpi-success {
  border-left: 3px solid #2e7d32;
}

.rel-kpi-label {
  font-size: .72rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.rel-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--teal, #0D2E3A);
  line-height: 1.1;
}

/* ── Tabela ───────────────────────────────────────────────────────── */
.rel-table th {
  white-space: nowrap;
}

.rel-sort {
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.rel-sort:hover {
  color: var(--teal-mid, #1A4E62);
}
.rel-sort i {
  margin-left: 4px;
  font-size: .75rem;
  opacity: .6;
}
.rel-sort:hover i {
  opacity: 1;
}

/* Top 3 por taxa — destaque verde suave */
.rel-row-top3 td:last-child {
  color: #2e7d32;
  font-weight: 700;
}
.rel-row-top3 {
  background: #f1f8f1;
}
.rel-row-top3:hover {
  background: #e5f3e5 !important;
}

/* Linha clicável */
.rel-row {
  cursor: pointer;
  transition: background .1s;
}