/* ============================================================
   ATLAS RS — lista.css
   Página de listagem/diretório dos 497 municípios.
   ============================================================ */

.lista-hero{
  background: var(--paper);
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--line);
}
.lista-hero h1{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.lista-hero p{ color: var(--ink-muted); margin-top: 8px; max-width: 62ch; }
.lista-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 18px;
  font-size: .82rem;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.lista-stats b{ color: var(--brand-green); }

.lista-shell{ padding: 30px 0 70px; }

.lista-filtros{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
  position: sticky;
  top: 0;
  background: var(--paper);
  padding: 12px 0;
  z-index: 5;
}
.lista-filtros input[type="search"]{
  flex: 1;
  min-width: 220px;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #fff;
  font-size: .9rem;
}
.lista-filtros select{
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #fff;
  font-size: .86rem;
  color: var(--ink);
}
.lista-count{
  font-size: .8rem;
  color: var(--ink-muted);
  white-space: nowrap;
  margin-left: auto;
}

.lista-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.muni-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: border-color .15s, transform .15s;
}
.muni-card:hover{ border-color: var(--brand-green); transform: translateY(-1px); }
.muni-card h3{ font-family: var(--font-body); font-size: .96rem; font-weight: 600; }
.muni-card .bacia{ font-size: .78rem; color: var(--ink-muted); margin-top: 4px; }
.muni-card .pill{
  display: inline-block;
  margin-top: 10px;
  font-size: .68rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}
.pill.bioma-pampa{ background: #fbf3df; color: #8a6510; }
.pill.bioma-mata{ background: #e7f1e9; color: #2f6b4f; }

.lista-empty{
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 0;
  color: var(--ink-muted);
}