/* ============================================================
   ATLAS RS — tema.css
   Páginas de conteúdo por tema (Vegetação, Biomas, Bacias, Recursos
   Hídricos, Solo e Clima). Uma página genérica, config por tema em js/tema.js.
   ============================================================ */

.tema-hero{
  background: var(--bg-dark);
  color: var(--on-dark);
  padding: 40px 0 30px;
}
.tema-hero .breadcrumb{ font-size: .78rem; color: var(--on-dark-muted); margin-bottom: 12px; }
.tema-hero .breadcrumb a:hover{ color: var(--accent-light); }
.tema-hero h1{ font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.tema-hero p{ color: var(--on-dark-muted); max-width: 68ch; margin-top: 10px; }
.tema-hero .btn{ margin-top: 22px; }

.tema-shell{ padding: 40px 0 70px; }
.tema-tabs{
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
  overflow-x: auto;
}
.tema-tabs button{
  background: none; border: 0; padding: 12px 6px; margin-right: 22px;
  font-size: .92rem; font-weight: 600; color: var(--ink-muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tema-tabs button.active{ color: var(--brand-green); border-color: var(--brand-green); }
.tema-panel{ display: none; }
.tema-panel.active{ display: block; }

.tema-columns{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
}
.tema-columns p{ color: var(--ink); line-height: 1.7; margin-bottom: 14px; max-width: 60ch; }

.donut-wrap{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donut-total{ font-family: var(--font-display); font-size: 26px; fill: var(--ink); font-weight: 600; }
.donut-legend{ list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; }
.donut-legend li{
  display: flex; align-items: center; gap: 8px;
  font-size: .84rem; padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.donut-legend .dot{ width: 11px; height: 11px; border-radius: 3px; flex: none; }
.donut-legend .legend-label{ flex: 1; }
.donut-legend .legend-val{ font-family: var(--font-mono); font-size: .74rem; color: var(--ink-muted); }

.stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 20px 0 10px;
}
.stat-card{
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.stat-card .n{ font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--brand-green); }
.stat-card .l{ font-size: .8rem; color: var(--ink-muted); margin-top: 2px; }

.tabela-tema{ width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: 10px; }
.tabela-tema th, .tabela-tema td{ text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.tabela-tema th{ font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.tabela-tema tbody tr:hover{ background: #faf8f0; }

.tema-fontes .fonte-item{
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 20px; margin-bottom: 14px;
}
.tema-fontes h4{ font-family: var(--font-body); font-size: .95rem; margin-bottom: 4px; }
.tema-fontes p{ font-size: .84rem; color: var(--ink-muted); line-height: 1.55; }

.tema-badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.tema-badge .sw{ width: 7px; height: 7px; border-radius: 50%; }
.tema-badge--oficial{ background: rgba(134,180,107,.16); color: #a9d18f; }
.tema-badge--oficial .sw{ background: #a9d18f; }
.tema-badge--calculado{ background: rgba(201,154,75,.18); color: #e0b16a; }
.tema-badge--calculado .sw{ background: #e0b16a; }
.tema-badge--generalizado{ background: rgba(185,118,47,.2); color: #e6a866; }
.tema-badge--generalizado .sw{ background: #e6a866; }

@media (max-width: 900px){
  .tema-columns{ grid-template-columns: 1fr; }
}