/* ============================================================================
 * spics.css — só o brand-específico do SPICS — Poluentes.
 *
 * O chrome genérico (navbar, seletor de idioma, cards, KPIs, badges, tabelas
 * Bootstrap, banners, rodapé, tooltip de ajuda, painel "uma vez por sessão")
 * já vem de painel_base.css, lendo os tokens --painel-cor-*/--painel-fonte-*
 * derivados de [branding.paleta]/[branding.fonte_*] no painel.toml — mudar a
 * paleta ali muda a cor aqui também, sem editar este arquivo.
 *
 * Aqui ficam só: o gradiente decorativo de marca (não expressável como um
 * token de cor sólida) e o layout específico das páginas (mapa, DLNM, sobre).
 * ========================================================================== */

:root {
  --spics-gradiente: linear-gradient(135deg, rgba(0, 204, 106, 0.16), rgba(168, 85, 247, 0.16));
}

/* ── Logo da navbar ──────────────────────────────────────────────────────────
   O padding da navbar já está no mínimo (2px, ver .bslib-page-navbar > .navbar),
   então é o logo que dita a altura da barra. As margens negativas deixam o logo
   extravasar o próprio fluxo: 76px de imagem contribuindo só 56px de altura,
   ou seja, marca maior sem engordar o menu. O -8px lateral recupera o espaço
   que a sobra de largura abriria antes do nome do painel. */
.brand-logo {
  height: 76px;
  margin: -10px -8px;
  width: 76px;
}

.spics-brand-with-beta {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  max-width: min(600px, 68vw);
}

.spics-beta-badge {
  background: #EAB308;
  border: 1px solid #CA8A04;
  border-radius: 999px;
  color: #0B2431;
  display: inline-block;
  font-family: var(--painel-fonte-base, sans-serif);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 4px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Fundo do cartão: painel_base.css só define borda/raio/sombra em .card, então
   o fundo vinha do --bs-card-bg do Bootstrap (branco fixo) e os cartões de
   Explorar/Análise ficavam claros no tema escuro. Declarado cedo no arquivo de
   propósito: .gestor-card & cia. têm a mesma especificidade e vêm depois, então
   continuam mandando nos cartões do Gestor. */
.card {
  background: var(--painel-cor-card-bg, #FFFFFF);
}

/* ── Tabela de dados (classe própria do SPICS, diferente de .table Bootstrap) */
.spics-table {
  background: var(--painel-cor-card-bg, #FFFFFF);
  border-collapse: collapse;
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  width: 100%;
}

.spics-table th,
.spics-table td {
  border-bottom: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  /* Sem isto o <td> herda a cor de texto do Bootstrap (escura, fixa) e some no
     tema escuro — o <th> tem cor própria logo abaixo e não é afetado. */
  color: var(--painel-cor-texto, #18181B);
  padding: 10px 12px;
  vertical-align: middle;
}

.spics-table th {
  background: var(--painel-cor-primaria-suave, #ECFDF5);
  color: var(--painel-cor-primaria-hover, #00994F);
  font-size: 0.82rem;
  text-transform: uppercase;
}

/* ── Home: mapa (esquerda) + legenda/resumo/críticos (direita) ────────────── */
.map-shell {
  height: calc(100vh - 118px);
  min-height: 520px;
  position: relative;
  width: 100%;
}

.map-shell .shiny-bound-output,
.map-shell .html-fill-item,
.map-shell .html-fill-container {
  height: 100%;
}

.home-map {
  height: calc(100vh - 250px);
  min-height: 460px;
}

.spics-maplibre {
  height: 100%;
  position: relative;
  width: 100%;
}

.spics-maplibre .maplibregl-canvas {
  outline: none;
}

.spics-maplibre .maplibregl-canvas:focus-visible {
  box-shadow: inset 0 0 0 3px var(--painel-cor-primaria, #00B65E);
  outline: 2px solid transparent;
}

.home-right {
  padding-left: 8px;
}

.home-right h3 {
  color: var(--painel-cor-primaria-hover, #00994F);
  font-size: 1.05rem;
  margin: 4px 0 12px;
}

.home-side-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.home-side-card {
  background: var(--painel-cor-card-bg, #FFFFFF);
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.04);
  padding: 14px;
}

.home-critical-card {
  margin-top: 12px;
}

/* Resumo da Home (Municípios / Alertas). A classe não tinha regra nenhuma — nem
   aqui nem no painel_base.css — então os dois .kpi-card empilhavam e comiam a
   altura da coluna lateral. Lado a lado. */
.kpi-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

/* Sub-abas (navset_pill) das páginas Home/Análise. */
.home-page .nav-pills,
.analysis-page .nav-pills {
  align-items: flex-end;
  border-bottom: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.home-page .nav-pills .nav-link,
.analysis-page .nav-pills .nav-link {
  background: var(--painel-cor-card-bg, #FFFFFF);
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--painel-cor-texto-suave, #52525B);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 0.86rem;
  font-weight: 800;
  padding: 9px 18px;
}

.home-page .nav-pills .nav-link.active,
.analysis-page .nav-pills .nav-link.active {
  background: var(--painel-cor-primaria-suave, #ECFDF5);
  color: var(--painel-cor-primaria-hover, #00994F);
  margin-bottom: -1px;
}

.home-page .tab-content,
.analysis-page .tab-content {
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 16px;
}

.home-table-page {
  padding-top: 4px;
}

.home-table-filters {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, auto) minmax(360px, 1fr);
  margin-bottom: 12px;
}

.home-filter-title {
  color: var(--painel-cor-texto, #18181B);
  font-weight: 700;
}

.home-top-table {
  font-size: 0.82rem;
}

.home-top-table .severity-badge {
  min-width: 74px;
}

.home-risco-table-wrap {
  max-height: 620px;
  overflow: auto;
}

.home-risco-table {
  min-width: 920px;
}

.home-risco-table td:last-child {
  min-width: 190px;
}

.snapshot-note {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.severity-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  align-items: center;
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
}

.legend-swatch {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  display: inline-block;
  height: 18px;
  width: 26px;
}

.muni-table-wrap {
  padding-right: 6px;
}

/* ── Explorar dados + Análise (DLNM/HHWS) ──────────────────────────────────── */
.analysis-page {
  padding: 16px 8px 30px;
}

.analysis-page .layout-columns,
.explore-page .layout-columns {
  margin-bottom: 16px;
}

.analysis-header {
  align-items: center;
  background: var(--spics-gradiente);
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(130px, auto));
  margin-bottom: 18px;
  padding: 20px;
}

.explore-context {
  grid-template-columns: minmax(280px, 1.35fr) minmax(180px, 0.8fr) minmax(120px, 0.55fr) minmax(200px, 0.85fr);
}

.analysis-title {
  color: var(--painel-cor-texto, #18181B);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0 0 8px;
}

.analysis-copy {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.92rem;
  margin: 0 0 8px;
}

.analysis-chip {
  color: var(--painel-cor-texto-suave, #52525B);
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.analysis-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.chart-card,
.explore-card,
.analysis-section-card {
  margin-bottom: 18px;
}

.chart-card .card-header,
.explore-card .card-header {
  align-items: center;
  display: flex;
  font-size: 0.95rem;
  line-height: 1.25;
  min-height: 54px;
}

.chart-card .shiny-bound-output,
.chart-card .html-fill-item {
  min-height: 420px;
}

.explore-summary-table {
  font-size: 0.88rem;
}

.explore-summary-table th:first-child {
  min-width: 170px;
}

.hhws-explanation {
  display: grid;
  gap: 10px;
}

.hhws-explanation-list {
  color: var(--painel-cor-texto-suave, #52525B);
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

/* Bloco <details> "como ler este gráfico" (Explorar/Análise). */
.how-to {
  background: var(--painel-cor-card-header-bg, #F8FAFC);
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.9rem;
  margin-top: 12px;
  padding: 10px 14px;
}

.how-to summary {
  color: var(--painel-cor-primaria-hover, #00994F);
  cursor: pointer;
  font-weight: 800;
}

.how-to p {
  margin: 8px 0 0;
}

/* Título da matriz de confusão (validação DLNM). */
.eval-matrix-wrap h4 {
  color: var(--painel-cor-texto, #18181B);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 12px;
}

/* ── Sobre / Futuras Melhorias ─────────────────────────────────────────────── */
.about-page {
  padding: 18px 8px 28px;
}

.about-intro {
  background: var(--spics-gradiente);
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 24px;
}

.section-label {
  color: var(--painel-cor-primaria-hover, #00994F);
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.about-title {
  color: var(--painel-cor-texto, #18181B);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.about-placeholder {
  color: var(--painel-cor-texto-suave, #52525B);
  margin: 0 0 14px;
}

.project-link {
  background: var(--painel-cor-primaria, #00CC6A);
  border-radius: 8px;
  color: #FFFFFF;
  display: inline-flex;
  font-weight: 800;
  padding: 10px 16px;
  text-decoration: none;
}

.project-link:hover {
  color: #FFFFFF;
  text-decoration: none;
}

/* Anel, nao cor: `color` aqui repetia a regra base no claro e perdia para
   html[data-painel-tema-modo="escuro"] .project-link no escuro — teclado ficava
   sem indicador nos dois temas. --painel-cor-texto contrasta com o fundo do
   body nos dois, e o offset separa o anel do proprio botao. */
.project-link:focus-visible {
  outline: 3px solid var(--painel-cor-texto, #18181B);
  outline-offset: 3px;
}

.about-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-block {
  background: var(--painel-cor-card-bg, #FFFFFF);
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.04);
  min-height: 240px;
  padding: 20px;
}

.about-block h3 {
  color: var(--painel-cor-texto, #18181B);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.about-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Cartões de equipe: a caixa vem de `.cartao-pessoa` (painel_base.css). Aqui
   ficam só as diferenças do SPICS — grade em coluna, alinhamento à esquerda e o
   papel em verde de marca em vez do cinza padrão do núcleo. */
.developer-grid {
  display: grid;
  gap: 14px;
}

.cartao-pessoa.developer-card {
  align-items: stretch;
  box-shadow: none;
  max-width: none;
  padding: 14px;
  text-align: left;
}

.developer-card .cartao-pessoa-nome {
  font-size: 1rem;
  margin-bottom: 6px;
}

.developer-card .cartao-pessoa-papel {
  color: var(--painel-cor-primaria-hover, #00994F);
  font-size: 0.86rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.developer-card .cartao-pessoa-instituicao {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.88rem;
  margin: 0 0 8px;
}

.developer-card .cartao-pessoa-links {
  gap: 12px;
  justify-content: flex-start;
  margin-top: 0;
}

.developer-card .cartao-pessoa-link {
  color: var(--painel-cor-primaria-hover, #00994F);
  font-size: 0.86rem;
  font-weight: 800;
}

.developer-card .cartao-pessoa-link:hover {
  text-decoration: underline;
}

.melhorias-block {
  margin: 0 0 28px;
}

.melhorias-list {
  color: var(--painel-cor-texto, #18181B);
  line-height: 1.9;
  padding-left: 22px;
}

.btn-feedback {
  background: var(--painel-cor-primaria, #00CC6A);
  border-radius: 8px;
  /* Sobre --painel-cor-primaria (#124F6B no tema claro), texto branco. O #000
     antigo vinha da paleta verde-clara anterior à marca ClimaSUS. No escuro a
     primária é o azul-claro #7FC4D8 e o branco sumiria — ver o override
     html[data-painel-tema-modo="escuro"] no fim do arquivo. */
  color: #FFFFFF;
  display: inline-block;
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 12px;
  padding: 10px 22px;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-feedback:hover {
  background: var(--painel-cor-primaria-hover, #00994F);
  color: #FFFFFF;
}

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .analysis-header,
  .analysis-grid,
  .home-side-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
 * Gestor Publico
 *
 * Todo seletor desta secao e prefixado por gestor- (ou descendente direto de
 * .gestor-page) para que o dashboard nao altere Home, Explorar ou Analise.
 * ========================================================================== */

.gestor-page {
  /* --gestor-navy/-soft ficam FIXOS de propósito: são o fundo decorativo
     escuro do cabeçalho/abas ativas (.gestor-cabecalho, .nav-link.active),
     sempre pareados com texto branco também fixo (#FFFFFF) — um acento de
     marca da página, igual à escala --gestor-risk-* abaixo, não a base de
     cor do tema. Quem precisa acompanhar claro/escuro é o TEXTO de título
     (--gestor-heading) que reaproveitava este mesmo token por engano — ver
     as ~15 regras "color: var(--gestor-heading)" nesta seção. */
  --gestor-navy: #071B33;
  --gestor-navy-soft: #123A5A;
  --gestor-heading: var(--painel-cor-texto, #071B33);
  --gestor-surface: var(--painel-cor-card-bg, #FFFFFF);
  --gestor-surface-muted: color-mix(in srgb, var(--painel-cor-card-bg, #FFFFFF) 92%, var(--painel-cor-texto, #17212B) 8%);
  --gestor-border: var(--painel-cor-borda, #D7DEE7);
  --gestor-text: var(--painel-cor-texto, #17212B);
  --gestor-text-muted: var(--painel-cor-texto-suave, #526171);
  --gestor-focus: var(--painel-cor-primaria, #087EA4);
  --gestor-risk-muito-baixo: #22C55E;
  --gestor-risk-baixo: #F2B705;
  --gestor-risk-moderado: #FF6B00;
  --gestor-risk-alto: #F43F46;
  --gestor-risk-muito-alto: #A7191F;
  color: var(--gestor-text);
  padding: 18px 8px 32px;
}

.gestor-cabecalho,
.gestor-header {
  align-items: end;
  background: var(--gestor-navy);
  border-radius: 12px;
  color: #FFFFFF;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(280px, 1.4fr) minmax(240px, 0.75fr) auto;
  margin-bottom: 18px;
  padding: 22px 24px;
}

.gestor-cabecalho > .shiny-input-container,
.gestor-cabecalho > .form-group {
  grid-column: 2;
  margin: 0;
  order: 2;
  width: 100%;
}

.gestor-cabecalho > .shiny-bound-output {
  grid-column: 1;
  min-width: 0;
  order: 1;
}

.gestor-cabecalho > .gestor-metodologia-botao {
  grid-column: 3;
  order: 3;
}

.gestor-cabecalho h1,
.gestor-header h1,
.gestor-titulo {
  color: #FFFFFF;
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 850;
  line-height: 1.15;
  margin: 0 0 7px;
}

.gestor-cabecalho p,
.gestor-header p,
.gestor-subtitulo {
  color: #DDE7F0;
  margin: 0;
}

.gestor-contexto,
.gestor-municipio,
.gestor-cabecalho-contexto {
  min-width: 0;
}

.gestor-contexto label,
.gestor-municipio label,
.gestor-cabecalho-contexto label,
.gestor-cabecalho .control-label,
.gestor-header .control-label {
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.gestor-contexto .form-group,
.gestor-municipio .form-group,
.gestor-cabecalho-contexto .form-group,
.gestor-cabecalho .form-group,
.gestor-header .form-group {
  margin: 0;
}

.gestor-contexto .selectize-input,
.gestor-municipio .selectize-input,
.gestor-cabecalho-contexto .selectize-input,
.gestor-cabecalho .selectize-input,
.gestor-header .selectize-input {
  border: 2px solid transparent;
  border-radius: 7px;
  min-height: 40px;
}

.gestor-contexto .selectize-input.focus,
.gestor-municipio .selectize-input.focus,
.gestor-cabecalho-contexto .selectize-input.focus,
.gestor-cabecalho .selectize-input.focus,
.gestor-header .selectize-input.focus {
  border-color: #7DD3FC;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.28);
}

.gestor-atualizacao {
  color: #DDE7F0;
  display: block;
  font-size: 0.8rem;
  margin-top: 7px;
}

.gestor-eyebrow {
  color: #9ED8ED;
  display: block;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.085em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.gestor-metodologia,
.gestor-botao-metodologia,
.gestor-metodologia-botao {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 7px;
  color: #FFFFFF;
  display: inline-flex;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  min-height: 40px;
  padding: 8px 13px;
  text-decoration: none;
  white-space: nowrap;
}

.gestor-metodologia:hover,
.gestor-botao-metodologia:hover,
.gestor-metodologia-botao:hover,
.gestor-metodologia:focus-visible,
.gestor-botao-metodologia:focus-visible,
.gestor-metodologia-botao:focus-visible {
  background: #FFFFFF;
  color: var(--gestor-navy);
}

.gestor-info,
.gestor-info-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--gestor-navy-soft);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  padding: 0;
  width: 30px;
}

.gestor-info:hover,
.gestor-info-button:hover,
.gestor-info:focus-visible,
.gestor-info-button:focus-visible {
  background: #E0F2FE;
  box-shadow: 0 0 0 2px var(--gestor-focus);
  outline: 0;
}

.gestor-page .nav-tabs,
.gestor-page .nav-pills,
.gestor-tabs .nav-tabs,
.gestor-tabs .nav-pills {
  border-bottom: 1px solid var(--gestor-border);
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  overflow-x: auto;
  padding: 0 2px;
  scrollbar-width: thin;
}

.gestor-page .nav-tabs .nav-link,
.gestor-page .nav-pills .nav-link,
.gestor-tabs .nav-link {
  background: var(--gestor-surface-muted);
  border: 1px solid var(--gestor-border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--gestor-text-muted);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 0.86rem;
  font-weight: 800;
  min-height: 43px;
  padding: 10px 18px;
  white-space: nowrap;
}

.gestor-page .nav-tabs .nav-link.active,
.gestor-page .nav-pills .nav-link.active,
.gestor-tabs .nav-link.active {
  background: var(--gestor-navy);
  border-color: var(--gestor-navy);
  color: #FFFFFF;
}

.gestor-page .nav-link:focus-visible,
.gestor-tabs .nav-link:focus-visible {
  box-shadow: inset 0 0 0 3px #7DD3FC;
  outline: 0;
}

.gestor-page > .tab-content,
.gestor-tabs > .tab-content {
  background: var(--gestor-surface-muted);
  border: 1px solid var(--gestor-border);
  border-radius: 0 0 10px 10px;
  padding: 18px;
}

.gestor-aba {
  min-width: 0;
  padding-top: 2px;
}

.gestor-previsao,
.gestor-vulneraveis,
.gestor-territorios {
  width: 100%;
}

.gestor-secao-cabecalho,
.gestor-section-header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.gestor-secao-cabecalho h2,
.gestor-section-header h2,
.gestor-secao-titulo,
.gestor-section-heading {
  color: var(--gestor-heading);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1.2rem;
  font-weight: 850;
  margin: 0;
}

.gestor-section-heading {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}

.gestor-section-heading h3 {
  color: var(--gestor-heading);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1rem;
  font-weight: 850;
  margin: 0;
}

.gestor-card,
.gestor-painel,
.gestor-chart-card,
.gestor-risco-diario-card,
.gestor-impacto-card,
.gestor-condicoes-card,
.gestor-bairros-card,
.gestor-mapa-card,
.gestor-tendencia-card {
  background: var(--gestor-surface);
  border: 1px solid var(--gestor-border);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(7, 27, 51, 0.07);
  min-width: 0;
  padding: 18px;
}

.gestor-card h3,
.gestor-painel h3,
.gestor-chart-card h3,
.gestor-risco-diario-card h3,
.gestor-impacto-card h3,
.gestor-condicoes-card h3,
.gestor-bairros-card h3,
.gestor-mapa-card h3,
.gestor-tendencia-card h3,
.gestor-card-titulo {
  color: var(--gestor-heading);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1rem;
  font-weight: 850;
  margin: 0 0 12px;
}

.gestor-card > .card-header,
.gestor-impacto-card > .card-header,
.gestor-condicoes-card > .card-header,
.gestor-bairros-card > .card-header,
.gestor-mapa-card > .card-header,
.gestor-tendencia-card > .card-header {
  background: var(--gestor-surface-muted);
  border-bottom: 1px solid var(--gestor-border);
  margin: -18px -18px 16px;
  padding: 12px 16px;
}

.gestor-card-subtitulo,
.gestor-nota,
.gestor-fonte {
  color: var(--gestor-text-muted);
  font-size: 0.82rem;
}

.gestor-fonte {
  display: block;
  margin-top: 10px;
}

.gestor-grid-35-65,
.gestor-risco-layout,
.gestor-vulneraveis-layout,
.gestor-territorios-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(280px, 35fr) minmax(0, 65fr);
  margin-bottom: 16px;
}

.gestor-grid-2,
.gestor-impacto-grid,
.gestor-graficos-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.gestor-risco-card,
.gestor-risco-resumo {
  background: var(--gestor-navy);
  border: 0;
  color: #FFFFFF;
  overflow: hidden;
  position: relative;
}

.gestor-risco-card > .card-body,
.gestor-risco-resumo > .card-body {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 35fr) minmax(0, 65fr);
}

.gestor-risco-card::before,
.gestor-risco-resumo::before {
  background: var(--gestor-risco-color, var(--gestor-risk-alto));
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 7px;
}

.gestor-risco-card h2,
.gestor-risco-card h3,
.gestor-risco-resumo h2,
.gestor-risco-resumo h3 {
  color: #FFFFFF;
}

.gestor-risco-principal {
  min-width: 0;
  padding-left: 4px;
}

.gestor-risco-label {
  color: #DDE7F0;
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.gestor-risco-nivel {
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 18px;
}

.gestor-risco-datas,
.gestor-periodo-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gestor-risco-data,
.gestor-periodo-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 9px;
}

.gestor-risco-data span,
.gestor-periodo-item span {
  color: #C8D6E4;
  display: block;
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
}

.gestor-risco-data strong,
.gestor-periodo-item strong {
  color: #FFFFFF;
  display: block;
  margin-top: 2px;
}

.gestor-risco-clima {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.gestor-risco-clima-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #FFFFFF;
  padding: 9px;
}

.gestor-risco-clima-item span {
  color: #C8D6E4;
  display: block;
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
}

.gestor-risco-clima-item strong {
  display: block;
  margin-top: 2px;
}

.gestor-kpis,
.gestor-kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 16px;
}

.gestor-kpi {
  background: var(--gestor-surface);
  border: 1px solid var(--gestor-border);
  border-radius: 9px;
  min-width: 0;
  padding: 14px;
}

.gestor-kpi-label {
  color: var(--gestor-text-muted);
  display: block;
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.25;
  min-height: 2.35em;
  text-transform: uppercase;
}

.gestor-kpi-valor,
.gestor-kpi-value {
  color: var(--gestor-heading);
  display: block;
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 900;
  margin-top: 5px;
}

.gestor-kpi-detalhe {
  color: var(--gestor-text-muted);
  display: block;
  font-size: 0.75rem;
  margin-top: 3px;
}

.gestor-kpi-grid .kpi-card {
  background: var(--gestor-surface);
  border: 1px solid var(--gestor-border);
  border-radius: 9px;
  border-top-width: 4px;
  margin: 0;
  min-height: 126px;
  min-width: 0;
  padding: 14px;
}

.gestor-kpi-grid .kpi-label {
  color: var(--gestor-text-muted);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.25;
  min-height: 2.35em;
  text-transform: uppercase;
}

.gestor-kpi-grid .kpi-value {
  color: var(--gestor-heading);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 900;
  margin-top: 5px;
}

.gestor-kpi-grid .kpi-detail {
  color: var(--gestor-text-muted);
  font-size: 0.75rem;
  margin-top: 3px;
}

.gestor-risco-timeline,
.gestor-timeline {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(11, minmax(56px, 1fr));
  min-width: 680px;
}

.gestor-timeline-wrap,
.gestor-risco-timeline-wrap {
  overflow-x: auto;
  padding: 3px 2px 8px;
}

.gestor-risco-dia,
.gestor-timeline-dia {
  color: var(--gestor-text-muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-align: center;
}

.gestor-risco-marcador,
.gestor-timeline-marcador {
  background: var(--gestor-risk-color, var(--gestor-risk-moderado));
  border: 2px solid #FFFFFF;
  border-radius: 7px;
  box-shadow: 0 0 0 1px var(--gestor-border);
  display: block;
  height: 28px;
  margin: 5px 0;
  width: 100%;
}

.gestor-risco-faixa,
.gestor-timeline-faixa {
  background: color-mix(in srgb, var(--gestor-risk-color, var(--gestor-risk-moderado)) 22%, transparent);
  border-left: 2px solid var(--gestor-risk-color, var(--gestor-risk-moderado));
  display: block;
  font-size: 0.68rem;
  min-height: 25px;
  padding: 4px;
}

.gestor-risco-confianca {
  background: var(--gestor-surface-muted);
  border: 1px solid var(--gestor-border);
  border-radius: 8px;
  margin-top: 14px;
  padding: 13px;
}

.gestor-risco-confianca h4 {
  color: var(--gestor-heading);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 0.88rem;
  font-weight: 850;
  margin: 0 0 9px;
}

.gestor-risco-confianca-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gestor-risco-confianca-alta,
.gestor-risco-confianca-moderada,
.gestor-risco-confianca-baixa {
  background: var(--gestor-surface);
  border-left: 4px solid var(--gestor-confidence-color);
  border-radius: 6px;
  min-width: 0;
  padding: 9px 10px;
}

.gestor-risco-confianca-alta {
  --gestor-confidence-color: #167A5A;
}

.gestor-risco-confianca-moderada {
  --gestor-confidence-color: #B45309;
}

.gestor-risco-confianca-baixa {
  --gestor-confidence-color: #B91C1C;
}

.gestor-risco-confianca-grid strong {
  color: var(--gestor-heading);
  display: block;
  font-size: 0.78rem;
}

.gestor-risco-confianca-grid p {
  color: var(--gestor-text-muted);
  font-size: 0.73rem;
  line-height: 1.35;
  margin: 3px 0 0;
}

.gestor-risco-badge,
.gestor-badge-risco,
.gestor-risco {
  align-items: center;
  background: var(--gestor-risk-color, var(--gestor-risk-moderado));
  border-radius: 999px;
  color: #FFFFFF;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 850;
  justify-content: center;
  line-height: 1.1;
  min-width: 84px;
  padding: 6px 9px;
  text-align: center;
}

.gestor-risco--muito-baixo,
.gestor-risco-muito-baixo,
.gestor-risco-muito_baixo {
  --gestor-risk-color: var(--gestor-risk-muito-baixo);
}

.gestor-risco--baixo,
.gestor-risco-baixo {
  --gestor-risk-color: var(--gestor-risk-baixo);
}

.gestor-risco--moderado,
.gestor-risco-moderado {
  --gestor-risk-color: var(--gestor-risk-moderado);
}

.gestor-risco--alto,
.gestor-risco-alto {
  --gestor-risk-color: var(--gestor-risk-alto);
}

.gestor-risco--muito-alto,
.gestor-risco-muito-alto,
.gestor-risco-muito_alto {
  --gestor-risk-color: var(--gestor-risk-muito-alto);
}

.gestor-chart,
.gestor-grafico {
  min-height: 360px;
  width: 100%;
}

.gestor-chart .shiny-plot-output,
.gestor-grafico .shiny-plot-output,
.gestor-chart .html-widget,
.gestor-grafico .html-widget {
  min-height: 360px;
  width: 100% !important;
}

.gestor-resumo-periodo,
.gestor-impacto-resumo,
.gestor-resumo-impacto {
  align-items: center;
  background: #E8EFF5;
  border-left: 4px solid var(--gestor-navy-soft);
  border-radius: 6px;
  color: var(--gestor-text);
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
}

.gestor-resumo-impacto {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 16px;
}

.gestor-resumo-impacto > div {
  border-right: 1px solid #C7D3DE;
  min-width: 0;
  padding: 4px 10px;
}

.gestor-resumo-impacto > div:last-child {
  border-right: 0;
}

.gestor-resumo-impacto span,
.gestor-resumo-impacto strong {
  display: block;
}

.gestor-resumo-impacto span {
  color: var(--gestor-text-muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.gestor-resumo-impacto strong {
  color: var(--gestor-heading);
  margin-top: 3px;
}

.gestor-ranking,
.gestor-combinacoes-lista {
  display: grid;
  gap: 9px;
}

.gestor-ranking-item,
.gestor-combinacao-item {
  align-items: center;
  background: var(--gestor-surface-muted);
  border: 1px solid var(--gestor-border);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 10px;
}

.gestor-ranking-posicao,
.gestor-combinacao-posicao {
  align-items: center;
  background: var(--gestor-navy);
  border-radius: 50%;
  color: #FFFFFF;
  display: inline-flex;
  font-weight: 850;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.gestor-barras,
.gestor-faixas-etarias {
  display: grid;
  gap: 11px;
}

.gestor-barra-cabecalho,
.gestor-faixa-cabecalho {
  display: flex;
  font-size: 0.8rem;
  font-weight: 750;
  justify-content: space-between;
  margin-bottom: 4px;
}

.gestor-barra-trilho,
.gestor-faixa-trilho {
  background: #E3E8EE;
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.gestor-barra-valor,
.gestor-faixa-valor {
  background: var(--gestor-risk-color, var(--gestor-navy-soft));
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 3px;
}

.gestor-tabela-wrap,
.gestor-bairros-tabela-wrap,
.gestor-bairros-table-wrap,
.gestor-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.gestor-tabela,
.gestor-bairros-tabela,
.gestor-bairros-table,
.gestor-table,
.gestor-condicoes-table {
  background: var(--gestor-surface);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
  min-width: 620px;
  width: 100%;
}

.gestor-tabela th,
.gestor-bairros-tabela th,
.gestor-bairros-table th,
.gestor-table th,
.gestor-condicoes-table th {
  background: var(--gestor-navy);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  padding: 10px;
  position: sticky;
  text-align: left;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.gestor-tabela td,
.gestor-bairros-tabela td,
.gestor-bairros-table td,
.gestor-table td,
.gestor-condicoes-table td {
  border-bottom: 1px solid var(--gestor-border);
  color: var(--gestor-text);
  padding: 10px;
  vertical-align: middle;
}

.gestor-bairro-linha {
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.gestor-bairro-linha:hover {
  background: #EDF6FA;
}

.gestor-bairro-linha:focus-visible {
  box-shadow: inset 0 0 0 3px var(--gestor-focus);
  outline: 0;
}

.gestor-bairro-linha.gestor-bairro-selecionado,
.gestor-bairro-selecionado {
  background: #DDECF4;
  box-shadow: inset 4px 0 0 var(--gestor-navy-soft);
  font-weight: 750;
}

.gestor-mapa-bairros {
  background: #EEF2F6;
  border: 1px solid var(--gestor-border);
  border-radius: 9px;
  height: clamp(390px, 52vh, 590px);
  min-height: 390px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.gestor-mapa-shell {
  min-height: 390px;
  position: relative;
  width: 100%;
}

.gestor-mapa-shell > .shiny-bound-output {
  display: grid;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.gestor-mapa-shell > .shiny-bound-output .gestor-empty {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.94);
  margin: 0;
}

.gestor-mapa-shell .gestor-mapa-bairros {
  height: 100%;
  inset: 0;
  position: absolute;
}

.gestor-mapa-bairros .maplibregl-canvas {
  outline: none;
}

.gestor-mapa-bairros .maplibregl-canvas:focus-visible {
  box-shadow: inset 0 0 0 3px var(--gestor-focus);
}

.gestor-mapa-bairros .maplibregl-ctrl-group {
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(7, 27, 51, 0.26);
  overflow: hidden;
}

.gestor-mapa-bairros .maplibregl-popup-content {
  border-radius: 7px;
  box-shadow: 0 3px 12px rgba(7, 27, 51, 0.22);
  color: var(--gestor-text);
  padding: 10px 12px;
}

.gestor-mapa-popup {
  display: grid;
  font-size: 0.78rem;
  gap: 3px;
  min-width: 125px;
}

.gestor-mapa-popup strong {
  color: var(--gestor-heading);
  font-size: 0.86rem;
}

.gestor-mapa-home__button span {
  color: var(--gestor-heading);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.gestor-mapa-legenda {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--gestor-border);
  border-radius: 7px;
  box-shadow: 0 1px 5px rgba(7, 27, 51, 0.2);
  color: var(--gestor-text);
  max-width: 210px;
  min-width: 158px;
  padding: 9px 11px;
}

.gestor-mapa-legenda__titulo {
  color: var(--gestor-heading);
  display: block;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.025em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.gestor-mapa-legenda__lista {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gestor-mapa-legenda__item {
  align-items: center;
  display: flex;
  gap: 7px;
  line-height: 1.2;
  min-width: 0;
}

.gestor-mapa-legenda__cor {
  border: 1px solid rgba(7, 27, 51, 0.35);
  border-radius: 3px;
  flex: 0 0 15px;
  height: 12px;
  width: 15px;
}

.gestor-mapa-legenda__rotulo {
  font-size: 0.7rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.gestor-mapa-estado {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: var(--gestor-text-muted);
  display: flex;
  font-size: 0.88rem;
  font-weight: 750;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: absolute;
  text-align: center;
  z-index: 4;
}

.gestor-mapa-estado[hidden] {
  display: none;
}

.gestor-mapa-estado--loading::before {
  animation: gestor-spin 800ms linear infinite;
  border: 3px solid #CCD7E2;
  border-radius: 50%;
  border-top-color: var(--gestor-navy-soft);
  content: "";
  height: 25px;
  margin-right: 10px;
  width: 25px;
}

.gestor-mapa-estado--error {
  color: #8F1D1D;
}

.gestor-tendencia,
.gestor-bairro-tendencia {
  margin-top: 16px;
}

.gestor-vazio,
.gestor-erro,
.gestor-empty {
  align-items: center;
  background: var(--gestor-surface);
  border: 1px dashed var(--gestor-border);
  border-radius: 8px;
  color: var(--gestor-text-muted);
  display: flex;
  justify-content: center;
  min-height: 150px;
  padding: 22px;
  text-align: center;
}

.gestor-erro {
  background: #FFF4F4;
  border-color: #E5A5A5;
  color: #8F1D1D;
}

.gestor-modal .modal-header {
  background: var(--gestor-navy);
  color: #FFFFFF;
}

.gestor-modal .modal-title,
.gestor-modal .btn-close {
  color: #FFFFFF;
}

@keyframes gestor-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .gestor-cabecalho,
  .gestor-header {
    align-items: stretch;
    grid-template-columns: 1fr 1fr;
  }

  .gestor-cabecalho-principal,
  .gestor-header-main,
  .gestor-cabecalho > .shiny-bound-output {
    grid-column: 1 / -1;
  }

  .gestor-cabecalho > .shiny-input-container,
  .gestor-cabecalho > .form-group {
    grid-column: 1;
  }

  .gestor-cabecalho > .gestor-metodologia-botao {
    grid-column: 2;
  }

  .gestor-grid-35-65,
  .gestor-risco-layout,
  .gestor-vulneraveis-layout,
  .gestor-territorios-layout,
  .gestor-grid-2,
  .gestor-impacto-grid,
  .gestor-graficos-grid {
    grid-template-columns: 1fr;
  }

  .gestor-risco-card > .card-body,
  .gestor-risco-resumo > .card-body {
    grid-template-columns: 1fr;
  }

  .gestor-kpis,
  .gestor-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gestor-resumo-impacto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gestor-resumo-impacto > div:nth-child(even) {
    border-right: 0;
  }

  .gestor-resumo-impacto > div:last-child {
    border-right: 0;
    grid-column: 1 / -1;
  }

  .gestor-mapa-bairros {
    height: 480px;
  }
}

@media (max-width: 600px) {
  .gestor-page {
    padding: 10px 0 24px;
  }

  .gestor-cabecalho,
  .gestor-header {
    border-radius: 9px;
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .gestor-cabecalho-principal,
  .gestor-header-main,
  .gestor-cabecalho > .shiny-bound-output,
  .gestor-cabecalho > .shiny-input-container,
  .gestor-cabecalho > .form-group,
  .gestor-cabecalho > .gestor-metodologia-botao {
    grid-column: auto;
  }

  .gestor-metodologia,
  .gestor-botao-metodologia,
  .gestor-metodologia-botao {
    white-space: normal;
    width: 100%;
  }

  .gestor-page > .tab-content,
  .gestor-tabs > .tab-content {
    padding: 10px;
  }

  .gestor-page .nav-tabs .nav-link,
  .gestor-page .nav-pills .nav-link,
  .gestor-tabs .nav-link {
    font-size: 0.79rem;
    padding: 9px 12px;
  }

  .gestor-card,
  .gestor-painel,
  .gestor-chart-card,
  .gestor-risco-diario-card,
  .gestor-impacto-card,
  .gestor-condicoes-card,
  .gestor-bairros-card,
  .gestor-mapa-card,
  .gestor-tendencia-card {
    padding: 13px;
  }

  .gestor-kpis,
  .gestor-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gestor-kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .gestor-risco-datas,
  .gestor-periodo-grid {
    grid-template-columns: 1fr;
  }

  .gestor-risco-clima,
  .gestor-resumo-impacto,
  .gestor-risco-confianca-grid {
    grid-template-columns: 1fr;
  }

  .gestor-resumo-impacto > div,
  .gestor-resumo-impacto > div:nth-child(2) {
    border-bottom: 1px solid #C7D3DE;
    border-right: 0;
    padding-bottom: 10px;
  }

  .gestor-resumo-impacto > div:last-child {
    border-bottom: 0;
  }

  .gestor-chart,
  .gestor-grafico,
  .gestor-chart .shiny-plot-output,
  .gestor-grafico .shiny-plot-output,
  .gestor-chart .html-widget,
  .gestor-grafico .html-widget {
    min-height: 300px;
  }

  .gestor-mapa-bairros {
    height: 390px;
    min-height: 340px;
  }

  .gestor-mapa-legenda {
    max-width: calc(100vw - 92px);
    min-width: 0;
    padding: 7px 8px;
  }

  .gestor-mapa-legenda__lista {
    column-gap: 11px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 4px;
  }

  .gestor-mapa-legenda__rotulo {
    font-size: 0.66rem;
  }

  .gestor-card > .card-header,
  .gestor-impacto-card > .card-header,
  .gestor-condicoes-card > .card-header,
  .gestor-bairros-card > .card-header,
  .gestor-mapa-card > .card-header,
  .gestor-tendencia-card > .card-header {
    margin: -13px -13px 13px;
  }

  .gestor-ranking-item,
  .gestor-combinacao-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .gestor-ranking-item .gestor-risco-badge,
  .gestor-combinacao-item .gestor-risco-badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gestor-bairro-linha {
    transition: none;
  }

  .gestor-mapa-estado--loading::before {
    animation-duration: 1600ms;
  }
}

/* ==========================================================================
 * Gestor Público — revisão visual alinhada ao wireframe operacional
 * ========================================================================== */

.gestor-page {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  min-width: 0;
  overflow-x: hidden;
  padding: 14px 18px 34px;
  width: 100%;
}

.gestor-cabecalho {
  align-items: center;
  border-radius: 5px;
  display: flex;
  gap: 14px;
  margin-bottom: 0;
  min-height: 66px;
  padding: 10px 14px;
}

.gestor-cabecalho > .gestor-municipio-seletor {
  flex: 0 1 340px;
  margin-left: auto;
  min-width: 0;
  order: 2 !important;
}

.gestor-municipio-seletor .shiny-input-container,
.gestor-municipio-seletor .form-group {
  margin: 0;
  width: 100%;
}

.gestor-municipio-seletor .control-label {
  color: #B9E6F4;
  font-size: 0.66rem;
  line-height: 1;
  margin-bottom: 4px;
}

.gestor-municipio-seletor .selectize-input {
  border-radius: 4px;
  min-height: 34px;
  padding: 7px 10px;
}

.gestor-cabecalho > .shiny-bound-output,
.gestor-cabecalho > .shiny-html-output {
  flex: 0 1 auto;
  order: 1 !important;
}

.gestor-cabecalho-contexto {
  text-align: left;
}

.gestor-cabecalho-contexto .gestor-cabecalho-rotulo {
  color: #8FD7ED;
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.gestor-cabecalho-contexto h2 {
  color: #FFFFFF;
  font-size: 1.22rem;
  line-height: 1.1;
  margin: 0 0 3px;
}

.gestor-cabecalho-contexto .gestor-atualizacao {
  color: #DDE7F0;
  font-size: 0.76rem;
  margin: 0;
}

.gestor-cabecalho > .gestor-metodologia-botao {
  border-radius: 50%;
  flex: 0 0 36px;
  height: 36px;
  min-height: 36px;
  min-width: 36px;
  order: 3 !important;
  padding: 0;
  width: 36px;
}

.gestor-metodologia-botao > span {
  font-size: 1rem;
  line-height: 1;
}

.gestor-page .nav-pills {
  background: #FFFFFF;
  gap: 3px;
  padding-top: 10px;
}

.gestor-page .nav-pills .nav-link {
  border-radius: 5px 5px 0 0;
  font-size: 0.8rem;
  min-height: 38px;
  padding: 8px 14px;
}

.gestor-page > .tab-content {
  background: #E9ECEF;
  border-radius: 0 0 6px 6px;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  padding: 12px;
  width: 100%;
}

.gestor-card,
.gestor-risco-diario-card,
.gestor-impacto-card,
.gestor-impacto-resumo-card,
.gestor-condicoes-card,
.gestor-bairros-card,
.gestor-mapa-card,
.gestor-tendencia-card {
  border-radius: 7px;
  box-shadow: 0 2px 7px rgba(7, 27, 51, 0.08);
}

.gestor-risco-card.gestor-card {
  background: #D3D7DB;
  border: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(270px, 34%) minmax(0, 66%);
  margin-bottom: 12px;
  overflow: hidden;
  padding: 10px;
}

.gestor-risco-card::before {
  display: none;
}

.gestor-risco-principal {
  background: linear-gradient(145deg, var(--gestor-risco-color), #D62828);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(127, 29, 29, 0.18);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 190px;
  padding: 20px;
}

.gestor-risco-chamada {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 56px minmax(0, 1fr);
}

.gestor-risco-icone {
  align-items: center;
  background: #FFFFFF;
  border-radius: 50%;
  color: #D62828;
  display: inline-flex;
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 2rem;
  font-weight: 900;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.gestor-risco-tipo {
  display: block;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.gestor-risco-risco {
  color: #FFFFFF;
  display: block;
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 6px;
  text-transform: uppercase;
}

.gestor-risco-chamada p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.83rem;
  line-height: 1.35;
  margin: 9px 0 0;
}

.gestor-risco-clima-compacto {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  padding-top: 12px;
}

.gestor-risco-clima-compacto .gestor-risco-clima-item {
  background: transparent;
  padding: 0;
}

.gestor-risco-clima-compacto .gestor-risco-clima-item span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.58rem;
}

.gestor-risco-clima-compacto .gestor-risco-clima-item strong {
  color: #FFFFFF;
  font-size: 0.82rem;
}

.gestor-risco-card > .gestor-risco-datas {
  align-content: center;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gestor-risco-card .gestor-risco-data {
  align-content: center;
  background: #FFFFFF;
  border: 1px solid #D7DEE7;
  border-radius: 7px;
  box-shadow: 0 2px 5px rgba(7, 27, 51, 0.06);
  min-height: 112px;
  padding: 14px;
}

.gestor-risco-card .gestor-risco-data span {
  color: #526171;
  font-size: 0.66rem;
}

.gestor-risco-card .gestor-risco-data strong {
  color: #071B33;
  font-size: clamp(0.95rem, 1.45vw, 1.2rem);
  margin-top: 8px;
}

.gestor-kpi-grid {
  gap: 10px;
  margin-bottom: 12px;
}

.gestor-kpi-grid .kpi-card {
  min-height: 108px;
  padding: 12px 13px;
}

.gestor-kpi-grid .kpi-value {
  font-size: clamp(1.18rem, 1.7vw, 1.55rem);
}

.gestor-risco-diario-card {
  padding-bottom: 12px;
}

.gestor-risco-timeline-wrap {
  padding: 5px 0 10px;
}

.gestor-risco-timeline {
  gap: 8px;
  min-width: 860px;
}

.gestor-risco-dia {
  align-items: center;
  border-right: 1px solid #E1E7ED;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 5px 4px 8px;
}

.gestor-risco-dia:last-child {
  border-right: 0;
}

.gestor-risco-dia-rotulo {
  color: #071B33;
  font-size: 0.76rem;
}

.gestor-risco-dia-data {
  color: #526171;
  font-size: 0.68rem;
}

.gestor-risco-dia .gestor-risco {
  font-size: 0.66rem;
  min-width: 70px;
  padding: 5px 7px;
}

.gestor-risco-confianca {
  border: 0;
  border-top: 2px solid #AFC1D2;
  margin-top: 4px;
  padding: 10px 0 0;
}

.gestor-risco-confianca-grid {
  gap: 8px;
  grid-template-columns: 4fr 4fr 3fr;
}

.gestor-nota-faixa {
  align-items: center;
  background: #F4F9FD;
  border: 1px solid #C8DCEB;
  border-radius: 6px;
  color: #244A6A;
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 12px;
}

.gestor-nota-faixa > span {
  align-items: center;
  border: 2px solid #3B82C4;
  border-radius: 50%;
  color: #1E6AA5;
  display: inline-flex;
  flex: 0 0 21px;
  font-family: serif;
  font-size: 0.78rem;
  font-weight: 800;
  height: 21px;
  justify-content: center;
}

.gestor-nota-faixa p {
  font-size: 0.76rem;
  line-height: 1.35;
  margin: 0;
}

.gestor-previsao-layout {
  display: grid;
  gap: 14px;
  grid-template-areas: "graficos resumo";
  grid-template-columns: minmax(0, 2fr) minmax(280px, 0.85fr);
}

.gestor-previsao-graficos {
  display: grid;
  gap: 14px;
  grid-area: graficos;
}

.gestor-impacto-resumo-card {
  align-self: start;
  grid-area: resumo;
}

.gestor-impacto-card {
  margin: 0;
}

.gestor-impacto-card .gestor-chart,
.gestor-impacto-card .gestor-grafico,
.gestor-impacto-card .html-widget {
  min-height: 285px;
}

.gestor-impacto-resumo-card .gestor-resumo-impacto {
  background: transparent;
  border: 0;
  display: block;
  margin: 0;
  padding: 0;
}

.gestor-impacto-resumo-card .gestor-resumo-impacto > div,
.gestor-impacto-resumo-card .gestor-resumo-impacto > div:nth-child(2) {
  align-items: flex-start;
  border-bottom: 1px solid #D7DEE7;
  border-right: 0;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 13px 2px;
}

.gestor-impacto-resumo-card .gestor-resumo-impacto > div:last-child {
  border-bottom: 0;
}

.gestor-impacto-resumo-card .gestor-resumo-impacto span {
  flex: 1 1 42%;
}

.gestor-impacto-resumo-card .gestor-resumo-impacto strong {
  flex: 1 1 58%;
  margin-top: 0;
  text-align: right;
}

.gestor-combinacoes-card {
  margin-bottom: 14px;
}

.gestor-vulneraveis-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 0.85fr);
}

.gestor-territorios-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(430px, 0.9fr) minmax(0, 1.35fr);
  margin-bottom: 14px;
}

.gestor-territorios-grid > .gestor-card {
  margin: 0;
}

.gestor-vulneraveis .gestor-card > .card-header {
  border-top: 4px solid #F97316;
}

.gestor-territorios .gestor-card > .card-header {
  border-top: 4px solid #2563EB;
}

.gestor-mapa-bairros {
  height: 390px;
}

.gestor-table th {
  font-size: 0.68rem;
}

.gestor-table td {
  font-size: 0.75rem;
}

@media (max-width: 1100px) {
  .gestor-page {
    max-width: none;
  }

  .gestor-risco-card.gestor-card {
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
  }

  .gestor-risco-card > .gestor-risco-datas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gestor-risco-card .gestor-risco-data {
    min-height: 84px;
  }

  .gestor-previsao-layout,
  .gestor-vulneraveis-grid,
  .gestor-territorios-grid {
    grid-template-areas: none;
    grid-template-columns: 1fr;
  }

  .gestor-impacto-resumo-card,
  .gestor-previsao-graficos {
    grid-area: auto;
  }

  .gestor-impacto-resumo-card {
    order: -1;
  }

  .gestor-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .gestor-page {
    padding: 8px 0 24px;
  }

  .gestor-cabecalho {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 36px;
    padding: 10px;
  }

  .gestor-cabecalho > .gestor-municipio-seletor {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0;
  }

  .gestor-cabecalho > .shiny-bound-output,
  .gestor-cabecalho > .shiny-html-output {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;
  }

  .gestor-cabecalho > .gestor-metodologia-botao {
    grid-column: 2;
    grid-row: 1;
  }

  .gestor-cabecalho-contexto {
    text-align: left;
  }

  .gestor-page > .tab-content {
    padding: 9px;
  }

  .gestor-risco-card.gestor-card {
    grid-template-columns: 1fr;
  }

  .gestor-risco-principal {
    min-height: 0;
  }

  .gestor-risco-card > .gestor-risco-datas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gestor-risco-clima-compacto {
    grid-template-columns: 1fr;
  }

  .gestor-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gestor-risco-confianca-grid {
    grid-template-columns: 1fr;
  }

  .gestor-impacto-resumo-card .gestor-resumo-impacto > div {
    display: block;
  }

  .gestor-impacto-resumo-card .gestor-resumo-impacto strong {
    display: block;
    margin-top: 4px;
    text-align: left;
  }

  .gestor-territorios-grid {
    min-width: 0;
  }

  .gestor-mapa-bairros {
    height: 360px;
  }
}

/* ==========================================================================
 * Gestor Público — v3: largura total, cartões de alerta e refinamento visual
 *
 * Bloco final da cascata: sobrescreve cor/sombra/espaçamento e adiciona os
 * componentes novos (curva de risco, destaque de sobrecarga, realce do pico).
 * NÃO redefine grid-template-columns geridos por media queries (senão venceria
 * dentro dos breakpoints); as larguras de tela pequena são reaplicadas no fim
 * para não perder o quase full-bleed do mobile.
 * ========================================================================== */

/* ── Largura total: o dashboard ocupa a tela (antes travado em 1440px central) */
.gestor-page {
  margin: 0;
  max-width: none;
  padding: 16px clamp(14px, 2vw, 46px) 44px;
}

.gestor-page > .tab-content {
  padding: clamp(12px, 1.4vw, 22px);
}

/* ── Cartões: sombra em camadas e raio consistente ─────────────────────────── */
.gestor-card,
.gestor-risco-diario-card,
.gestor-impacto-card,
.gestor-impacto-resumo-card,
.gestor-combinacoes-card,
.gestor-condicoes-card,
.gestor-bairros-card,
.gestor-mapa-card,
.gestor-tendencia-card {
  border: 1px solid var(--gestor-border);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(7, 27, 51, 0.04), 0 8px 20px rgba(7, 27, 51, 0.06);
}

/* Barra de acento antes de cada título de seção (identidade visual coesa) */
.gestor-section-heading h3 {
  padding-left: 12px;
  position: relative;
}

.gestor-section-heading h3::before {
  background: var(--gestor-navy);
  border-radius: 3px;
  bottom: 2px;
  content: "";
  left: 0;
  position: absolute;
  top: 2px;
  width: 4px;
}

/* ── KPIs: leve elevação no hover (feedback de dashboard) ───────────────────── */
.gestor-kpi-grid .kpi-card {
  border: 1px solid var(--gestor-border);
  border-radius: 11px;
  border-top-width: 4px;
  box-shadow: 0 1px 2px rgba(7, 27, 51, 0.04), 0 5px 14px rgba(7, 27, 51, 0.05);
  transition: box-shadow 130ms ease, transform 130ms ease;
}

.gestor-kpi-grid .kpi-card:hover {
  box-shadow: 0 2px 4px rgba(7, 27, 51, 0.07), 0 12px 26px rgba(7, 27, 51, 0.1);
  transform: translateY(-2px);
}

/* ── Cartão de alerta: contêiner branco limpo para a chamada vermelha saltar ── */
.gestor-risco-card.gestor-card {
  background: #FFFFFF;
  border: 1px solid var(--gestor-border);
  box-shadow: 0 1px 2px rgba(7, 27, 51, 0.04), 0 8px 20px rgba(7, 27, 51, 0.06);
  gap: 14px;
  padding: 14px;
}

.gestor-risco-principal {
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 58%),
    linear-gradient(150deg, var(--gestor-risco-color, #C2410C) 0%, #9E1B1B 100%);
  box-shadow: 0 10px 24px rgba(127, 29, 29, 0.22);
}

.gestor-risco-icone {
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.18);
}

/* Realce do PICO — a data mais acionável do período */
.gestor-risco-card .gestor-risco-data--pico {
  border-color: var(--gestor-risco-color, #C2410C);
  box-shadow: inset 0 0 0 1px var(--gestor-risco-color, #C2410C), 0 3px 9px rgba(127, 29, 29, 0.14);
}

.gestor-risco-card .gestor-risco-data--pico span,
.gestor-risco-card .gestor-risco-data--pico strong {
  color: var(--gestor-risco-color, #C2410C);
}

/* Duração — âncora em navy entre as datas ("por quanto tempo") */
.gestor-risco-card .gestor-risco-data--duracao {
  background: var(--gestor-navy);
  border-color: var(--gestor-navy);
}

.gestor-risco-card .gestor-risco-data--duracao span {
  color: #9EC1E0;
}

.gestor-risco-card .gestor-risco-data--duracao strong {
  color: #FFFFFF;
}

/* ── Curva de risco (aba Alerta): separada da régua de selos logo abaixo ─────── */
.gestor-risco-curva {
  border-bottom: 1px solid var(--gestor-border);
  margin-bottom: 12px;
  padding-bottom: 6px;
}

/* ── Destaque de sobrecarga (resumo da Previsão) ────────────────────────────── */
.gestor-surge {
  align-items: baseline;
  background: linear-gradient(135deg, #0B2F5A, var(--gestor-navy));
  border-radius: 10px;
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 14px;
  padding: 15px 16px;
}

.gestor-surge > span:first-child {
  color: #B9D6EC;
  flex: 1 0 100%;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gestor-surge > strong {
  color: #FFFFFF;
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1.95rem;
  font-weight: 900;
  line-height: 1;
}

.gestor-surge .gestor-surge-sub {
  color: #FBBF24;
  font-size: 0.86rem;
  font-weight: 800;
}

/* ── Telas largas: mais respiro lateral ─────────────────────────────────────── */
@media (min-width: 1600px) {
  .gestor-page {
    padding-left: clamp(28px, 3vw, 72px);
    padding-right: clamp(28px, 3vw, 72px);
  }
}

/* ── Reaplica o quase full-bleed do mobile (o override de largura total acima é
 *    fora de media query e venceria estes se não fossem reapresentados) ─────── */
@media (max-width: 720px) {
  .gestor-page {
    padding: 10px 6px 26px;
  }

  .gestor-surge > strong {
    font-size: 1.7rem;
  }
}

@media (max-width: 600px) {
  .gestor-page {
    padding: 8px 4px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gestor-kpi-grid .kpi-card {
    transition: none;
  }

  .gestor-kpi-grid .kpi-card:hover {
    transform: none;
  }
}

.gestor-risco-principal {
  background: var(--gestor-risco-color, #C2410C) !important;
  box-shadow: 0 10px 24px rgba(127, 29, 29, 0.18);
}

.gestor-risco-principal,
.gestor-risco-principal *:not(.gestor-risco-icone) {
  color: var(--gestor-risco-foreground, #FFFFFF) !important;
}

/* O icone tem fundo branco proprio: herdar o foreground do nivel o apagaria
   em muito_alto e indisponivel, cujo foreground_hex e #FFFFFF. */
.gestor-risco-principal .gestor-risco-icone {
  color: var(--gestor-risco-color, #C2410C) !important;
}

.gestor-risco-timeline-plot {
  overflow-x: auto;
}

.gestor-risco-timeline-plot > div {
  min-width: 900px;
}

.gestor-resumo-contexto {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.gestor-resumo-contexto-item,
.gestor-resumo-metrica-card,
.gestor-viz-bloco {
  background: #FFFFFF;
  border: 1px solid var(--gestor-border);
  border-radius: 12px;
  padding: 14px 16px;
}

.gestor-resumo-contexto-item strong {
  color: var(--gestor-heading);
  display: block;
  font-size: 1rem;
}

.gestor-resumo-metricas-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gestor-viz-stack {
  display: grid;
  gap: 14px;
}

.gestor-viz-subheader {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.gestor-viz-subtitulo {
  color: var(--gestor-heading);
  font-size: 0.88rem;
  font-weight: 800;
}

.gestor-metrica-valor {
  color: var(--gestor-heading);
  display: block;
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1.8rem;
  line-height: 1.05;
  margin-bottom: 6px;
}

/* Data não é número: no card "Período observado" o valor cai para um corpo
   intermediário — 1.8rem quebraria "18/07/2025 a 22/07/2025" em duas linhas. */
.gestor-metrica-valor--texto {
  font-size: 1.05rem;
  line-height: 1.3;
}

.gestor-metrica-intervalo,
.gestor-metrica-percentual,
.gestor-metrica-vazia,
.gestor-tabela-metrica small {
  color: #64748B;
  display: block;
  font-size: 0.84rem;
  line-height: 1.4;
}

.gestor-tabela-metrica strong {
  color: var(--gestor-heading);
  display: block;
}

.gestor-mapa-card > .card-body {
  min-height: 360px;
  padding: 0;
}

.gestor-mapa-shell,
.gestor-mapa-bairros {
  height: 100%;
  min-height: 360px;
  width: 100%;
}

.gestor-mapa-shell {
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
  overflow: hidden;
}

.gestor-mapa-shell > .shiny-bound-output {
  height: 100%;
}

@media (max-width: 900px) {
  .gestor-resumo-contexto,
  .gestor-resumo-metricas-grid {
    grid-template-columns: 1fr;
  }
}

/* Contexto municipal único: Explorar, Análise e Gestor Público. */
.municipio-contexto-card {
  align-items: center;
  background: #F1F3F5;
  border: 1px solid #C7CDD4;
  border-radius: 28px;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(320px, 1.65fr) minmax(105px, 0.38fr) minmax(170px, 0.62fr) minmax(220px, 0.75fr) 44px;
  margin: 16px 0 20px;
  padding: 20px 22px;
}

.municipio-contexto-conteudo {
  align-items: center;
  display: contents;
}

.municipio-contexto-identidade { grid-column: 1; }
.municipio-contexto-mmt { grid-column: 2; }
.municipio-contexto-fontes { grid-column: 3; }

.municipio-contexto-rotulo,
.municipio-contexto-chip,
.municipio-contexto-seletor .control-label {
  /* Verde de marca escurecido: #22B968 sobre o fundo #F1F3F5 do cartao da
     5,94:1 (WCAG AA exige 4,5:1 para texto pequeno). */
  color: #046B3F;
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.municipio-contexto-titulo {
  color: #071B33;
  font-size: 1.55rem;
  margin: 0 0 5px;
}

.municipio-contexto-resumo,
.municipio-contexto-atualizado {
  color: #7A8796;
  margin: 0;
}

.municipio-contexto-atualizado { font-size: 0.86rem; margin-top: 8px; }

.municipio-contexto-mmt,
.municipio-contexto-fontes { color: #071B33; }
.municipio-contexto-mmt .help-icon { margin-left: 5px; }

.municipio-contexto-seletor { grid-column: 4; min-width: 0; }
.municipio-contexto-seletor .shiny-input-container,
.municipio-contexto-seletor .form-group { margin: 0; width: 100%; }
.municipio-contexto-seletor .selectize-input { background: #FFFFFF; border-color: #AEB8C2; min-height: 38px; }

.municipio-contexto-info {
  align-items: center;
  background: #5AD29D;
  border: 0;
  border-radius: 50%;
  color: #073B2A;
  display: inline-flex;
  font-family: Georgia, serif;
  font-size: 1.3rem;
  font-weight: 800;
  grid-column: 5;
  height: 40px;
  justify-content: center;
  min-width: 40px;
  padding: 0;
  width: 40px;
}

.gestor-impacto-resumo-conteudo {
  background: #F8FAFC;
  border: 2px solid #9AA5B1;
  border-radius: 28px;
  padding: 22px;
}

.gestor-resumo-lista { display: grid; gap: 14px; }
.gestor-resumo-lista .gestor-resumo-metrica-card {
  border: 2px solid #9AA5B1;
  border-radius: 20px;
  padding: 15px 18px;
}

.gestor-vulneraveis-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.gestor-table th,
.gestor-table td { padding: 0.45rem 0.5rem; }

@media (max-width: 1100px) {
  .municipio-contexto-card { grid-template-columns: 1fr 1fr; }
  .municipio-contexto-identidade { grid-column: 1 / -1; }
  .municipio-contexto-mmt { grid-column: 1; }
  .municipio-contexto-fontes { grid-column: 2; }
  .municipio-contexto-seletor { grid-column: 1; }
  .municipio-contexto-info { grid-column: 2; justify-self: end; }
  .gestor-vulneraveis-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .municipio-contexto-card { border-radius: 20px; gap: 14px; grid-template-columns: 1fr; padding: 17px; }
  .municipio-contexto-identidade,
  .municipio-contexto-mmt,
  .municipio-contexto-fontes,
  .municipio-contexto-seletor,
  .municipio-contexto-info { grid-column: 1; }
  .municipio-contexto-info { justify-self: start; }
  .municipio-contexto-resumo { line-height: 1.45; }
}

/* ==========================================================================
 * Território prioritário — painel de camadas do mapa e altura da tabela
 * ========================================================================== */

/* Painel "Camadas": HUD compacto sobre o mapa base (fonte pequena, paddings
 * curtos). Puramente visual — nada aqui volta ao servidor. */
.gestor-mapa-camadas {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(7, 27, 51, 0.26);
  color: var(--gestor-text);
  font-size: 11px;
  line-height: 1.35;
  max-width: 224px;
  overflow: hidden;
}

.gestor-mapa-camadas__titulo {
  cursor: pointer;
  display: flex;
  font-size: 10px;
  font-weight: 800;
  gap: 6px;
  justify-content: space-between;
  letter-spacing: 0.04em;
  list-style: none;
  padding: 5px 8px;
  text-transform: uppercase;
}

.gestor-mapa-camadas__titulo::-webkit-details-marker { display: none; }

.gestor-mapa-camadas__titulo::after { content: "\25BE"; }

.gestor-mapa-camadas[open] .gestor-mapa-camadas__titulo::after { content: "\25B4"; }

.gestor-mapa-camadas__titulo:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gestor-focus);
  outline: 0;
}

.gestor-mapa-camadas__lista {
  display: grid;
  gap: 5px;
  padding: 0 8px 7px;
}

.gestor-mapa-camadas__nivel {
  display: grid;
  gap: 2px;
}

.gestor-mapa-camadas__nivel + .gestor-mapa-camadas__nivel {
  border-top: 1px solid var(--gestor-border);
  padding-top: 5px;
}

.gestor-mapa-camadas__nivel--indisponivel {
  opacity: 0.45;
}

.gestor-mapa-camadas__nome {
  font-weight: 750;
}

.gestor-mapa-camadas__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 8px;
}

.gestor-mapa-camadas__opcao {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 3px;
  margin: 0;
}

.gestor-mapa-camadas__opcao input,
.gestor-mapa-camadas__opacidade {
  accent-color: var(--gestor-navy-soft);
  margin: 0;
}

.gestor-mapa-camadas__opcao input {
  height: 12px;
  width: 12px;
}

.gestor-mapa-camadas__opacidade {
  height: 12px;
  width: 100%;
}

/* "Bairros prioritários": os 10 mais críticos cabem na altura visível; a fila
 * restante (a tabela já vem ordenada por ordem_prioridade) sai por rolagem,
 * com o cabeçalho grudado no topo. */
.gestor-bairros-table-wrap {
  --gestor-bairros-linhas: 10;
  --gestor-bairros-linha: 2.55rem;
  --gestor-bairros-cabecalho: 2.15rem;
  max-height: calc(
    var(--gestor-bairros-cabecalho) + var(--gestor-bairros-linhas) * var(--gestor-bairros-linha)
  );
  overflow-y: auto;
}

.gestor-bairros-table tbody tr {
  height: var(--gestor-bairros-linha, 2.55rem);
}

.gestor-bairros-table thead th {
  z-index: 2;
}

/* ==========================================================================
 * Gestor Publico: ocupacao vertical
 *
 * A tela e operada em monitores grandes; os espacamentos abaixo mantem a
 * hierarquia visual, mas deixam contexto, abas e os dois paineis visiveis ao
 * mesmo tempo. O rodape fixo tambem reserva somente a altura que realmente
 * ocupa.
 * ========================================================================== */

.gestor-page {
  padding: 4px clamp(8px, 1.25vw, 24px) 24px;
}

/* A navbar continua disponivel, mas nao precisa ocupar a altura padrao do
 * Bootstrap quando o painel esta em modo operacional. */
.bslib-page-navbar > .navbar {
  padding-bottom: 2px;
  padding-top: 2px;
}

.bslib-page-navbar > .navbar .navbar-brand,
.bslib-page-navbar > .navbar .nav-link {
  padding-bottom: 4px;
  padding-top: 4px;
}

/* Respiro entre o bloco de marca (logo + "SPICS — Poluentes") e o primeiro item do
   menu — o padrão do Bootstrap é 1rem, apertado demais com o logo grande. */
.bslib-page-navbar > .navbar .navbar-brand {
  margin-right: 34px;
}

.gestor-page > .tab-content {
  padding: 8px;
}

.gestor-page .nav-pills {
  padding-top: 2px;
}

.gestor-page .nav-pills .nav-link {
  min-height: 34px;
  padding: 6px 12px;
}

.municipio-contexto-card {
  border-radius: 18px;
  gap: 14px;
  margin: 2px 0 4px;
  padding: 12px 16px;
}

.municipio-contexto-titulo {
  font-size: 1.35rem;
  margin-bottom: 2px;
}

.municipio-contexto-atualizado {
  margin-top: 4px;
}

.gestor-territorios-grid {
  gap: 10px;
  margin-bottom: 10px;
}

.gestor-territorios .gestor-card {
  padding: 10px;
}

.gestor-territorios .gestor-card > .card-header {
  margin: -10px -10px 8px;
  padding: 8px 12px;
}

.gestor-territorios .gestor-section-heading h3 {
  font-size: 0.94rem;
}

.gestor-territorios .gestor-bairros-card > .card-body {
  padding: 6px;
}

.gestor-territorios .gestor-bairros-table-wrap {
  --gestor-bairros-linha: 2.2rem;
  --gestor-bairros-cabecalho: 1.95rem;
  max-height: clamp(300px, calc(100vh - 410px), 690px);
}

.gestor-territorios .gestor-bairros-table th,
.gestor-territorios .gestor-bairros-table td {
  padding: 5px 7px;
}

.gestor-territorios .gestor-mapa-card > .card-body {
  min-height: 0;
  padding: 0;
}

.gestor-territorios .gestor-mapa-shell,
.gestor-territorios .gestor-mapa-bairros {
  min-height: 300px;
}

.gestor-territorios .gestor-mapa-bairros {
  height: clamp(300px, calc(100vh - 410px), 620px);
}

.gestor-territorios .gestor-tendencia-card {
  margin-top: 10px;
}

.gestor-territorios .gestor-tendencia-card > .card-header {
  margin-bottom: 8px;
}

.gestor-territorios > .gestor-nota-faixa {
  margin-top: 8px;
  padding: 7px 10px;
}

.app-footer {
  gap: 12px;
  padding: 7px 16px;
}

.supporter-logo {
  min-height: 32px;
  padding: 4px 8px;
}

/* 47px ≈ 85% de 55px, que por sua vez era 70% dos 78px originais — dois cortes
   sucessivos a pedido do usuário. max-width folgado junto: o logo do INCT tem
   proporção 5.34:1 e com o max-width de 221px do painel_base.css ficaria
   travado bem abaixo da altura pedida. */
.supporter-logo img {
  max-height: 47px;
  max-width: 263px;
}

.footer-copy {
  font-size: 0.78rem;
}

/* Reserva a altura real do rodapé (medida por spics-footer-altura.js via
   --spics-footer-altura); o fallback só vale no instante antes do JS rodar. */
.bslib-page-navbar > .navbar ~ * {
  padding-bottom: var(--spics-footer-altura, 100px);
}


/* O tour guiado (convite, backdrop, foco, diálogo) vem de painel_base.css —
   motor e estilos são do núcleo desde que [tutorial] passou a ser declarativo.
   Aqui fica só o posicionamento do botão solto nas páginas sem card. */
}

/* ==========================================================================
 * Tema escuro — overrides do layout
 *
 * spics.css é linkado DEPOIS da folha de tema ([temas.*]), então toda cor
 * escrita à mão aqui vence os tokens. Este bloco reverte as que foram
 * calibradas para fundo branco. O gancho é o atributo que o motor de temas
 * escreve no <html> (painel_core/temas.py:108).
 *
 * Ficam de fora de propósito: --gestor-navy/-soft e tudo pintado sobre eles
 * (cabeçalho do Gestor, abas ativas) e a escala --gestor-risk-*: são fundos
 * decorativos escuros, já pareados com texto branco fixo.
 * ========================================================================== */

html[data-painel-tema-modo="escuro"] {
  /* verde/roxo a 16% foi calibrado sobre branco; sobre #0B2431 vira lama */
  --spics-gradiente: linear-gradient(135deg, rgba(79, 209, 174, 0.10), rgba(127, 196, 216, 0.10));
}

/* ── Superfícies grandes ─────────────────────────────────────────────────── */
html[data-painel-tema-modo="escuro"] .gestor-page > .tab-content {
  background: var(--painel-cor-body-bg);
}

html[data-painel-tema-modo="escuro"] .gestor-page .nav-pills,
html[data-painel-tema-modo="escuro"] .gestor-viz-bloco,
html[data-painel-tema-modo="escuro"] .gestor-resumo-contexto-item,
html[data-painel-tema-modo="escuro"] .gestor-resumo-metrica-card,
html[data-painel-tema-modo="escuro"] .gestor-risco-card.gestor-card {
  background: var(--painel-cor-card-bg);
}

html[data-painel-tema-modo="escuro"] .gestor-mapa-bairros {
  background: var(--painel-cor-body-bg);
}

html[data-painel-tema-modo="escuro"] .municipio-contexto-card,
html[data-painel-tema-modo="escuro"] .gestor-impacto-resumo-conteudo {
  background: var(--painel-cor-card-bg);
  border-color: var(--painel-cor-borda);
}

html[data-painel-tema-modo="escuro"] .gestor-resumo-lista .gestor-resumo-metrica-card {
  border-color: var(--painel-cor-borda);
}

/* ── Fundo claro + texto tokenizado = texto invisível ────────────────────── */
html[data-painel-tema-modo="escuro"] .gestor-resumo-periodo,
html[data-painel-tema-modo="escuro"] .gestor-impacto-resumo,
html[data-painel-tema-modo="escuro"] .gestor-resumo-impacto,
html[data-painel-tema-modo="escuro"] .gestor-mapa-legenda,
html[data-painel-tema-modo="escuro"] .gestor-mapa-estado,
html[data-painel-tema-modo="escuro"] .gestor-mapa-camadas,
html[data-painel-tema-modo="escuro"] .gestor-mapa-shell > .shiny-bound-output .gestor-empty {
  background: var(--painel-cor-card-bg);
}

html[data-painel-tema-modo="escuro"] .gestor-bairro-linha:hover,
html[data-painel-tema-modo="escuro"] .gestor-bairro-linha.gestor-bairro-selecionado {
  background: var(--painel-cor-primaria-suave);
}

/* ── Texto escuro sem fundo próprio ──────────────────────────────────────── */
html[data-painel-tema-modo="escuro"] .gestor-risco-dia-rotulo,
html[data-painel-tema-modo="escuro"] .municipio-contexto-titulo,
html[data-painel-tema-modo="escuro"] .municipio-contexto-mmt,
html[data-painel-tema-modo="escuro"] .municipio-contexto-fontes,
html[data-painel-tema-modo="escuro"] .gestor-risco-card .gestor-risco-data strong {
  color: var(--painel-cor-texto);
}

html[data-painel-tema-modo="escuro"] .gestor-risco-dia-data,
html[data-painel-tema-modo="escuro"] .gestor-metrica-intervalo,
html[data-painel-tema-modo="escuro"] .gestor-metrica-percentual,
html[data-painel-tema-modo="escuro"] .gestor-metrica-vazia,
html[data-painel-tema-modo="escuro"] .gestor-tabela-metrica small,
html[data-painel-tema-modo="escuro"] .municipio-contexto-resumo,
html[data-painel-tema-modo="escuro"] .municipio-contexto-atualizado,
html[data-painel-tema-modo="escuro"] .gestor-risco-card .gestor-risco-data span {
  color: var(--painel-cor-texto-suave);
}

html[data-painel-tema-modo="escuro"] .municipio-contexto-rotulo,
html[data-painel-tema-modo="escuro"] .municipio-contexto-chip,
html[data-painel-tema-modo="escuro"] .municipio-contexto-seletor .control-label {
  color: var(--painel-cor-secundaria);
}

/* ── Ilhas claras isoladas ───────────────────────────────────────────────── */
html[data-painel-tema-modo="escuro"] .gestor-risco-card .gestor-risco-data {
  background: var(--painel-cor-card-bg);
  border-color: var(--painel-cor-borda);
}

html[data-painel-tema-modo="escuro"] .gestor-nota-faixa {
  background: var(--painel-cor-primaria-suave);
  border-color: var(--painel-cor-borda);
  color: var(--painel-cor-texto);
}

html[data-painel-tema-modo="escuro"] .gestor-nota-faixa > span {
  border-color: var(--painel-cor-primaria);
  color: var(--painel-cor-primaria);
}

html[data-painel-tema-modo="escuro"] .gestor-erro {
  background: var(--painel-cor-alerta-erro-bg);
  border-color: var(--painel-cor-alerta-erro-borda);
  color: var(--painel-cor-texto);
}

/* Selects: o núcleo não gera tokens de input, e o selectize fica branco */
html[data-painel-tema-modo="escuro"] .municipio-contexto-seletor .selectize-input,
html[data-painel-tema-modo="escuro"] .municipio-contexto-seletor .selectize-dropdown {
  background: var(--painel-cor-card-bg);
  border-color: var(--painel-cor-borda);
  color: var(--painel-cor-texto);
}

html[data-painel-tema-modo="escuro"] .municipio-contexto-seletor .selectize-input input,
html[data-painel-tema-modo="escuro"] .municipio-contexto-seletor .selectize-input .item {
  color: var(--painel-cor-texto);
}

/* ── Bordas, trilhos e marcadores ────────────────────────────────────────── */
html[data-painel-tema-modo="escuro"] .gestor-barra-trilho,
html[data-painel-tema-modo="escuro"] .gestor-faixa-trilho {
  background: var(--painel-cor-primaria-suave);
}

html[data-painel-tema-modo="escuro"] .gestor-risco-marcador,
html[data-painel-tema-modo="escuro"] .gestor-timeline-marcador {
  border-color: var(--painel-cor-card-bg);
}

html[data-painel-tema-modo="escuro"] .gestor-resumo-impacto > div,
html[data-painel-tema-modo="escuro"] .gestor-risco-dia,
html[data-painel-tema-modo="escuro"] .gestor-risco-confianca,
html[data-painel-tema-modo="escuro"] .gestor-impacto-resumo-card > div {
  border-color: var(--painel-cor-borda);
}

html[data-painel-tema-modo="escuro"] .legend-swatch {
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── Página Sobre / Futuras Melhorias ────────────────────────────────────── */
/* .project-link e .btn-feedback pintam texto quase preto sobre
   --painel-cor-primaria, que no escuro é o azul claro #7FC4D8 — um botão claro
   invertido no meio de uma página escura. */
html[data-painel-tema-modo="escuro"] .project-link,
html[data-painel-tema-modo="escuro"] .project-link:hover,
html[data-painel-tema-modo="escuro"] .btn-feedback,
html[data-painel-tema-modo="escuro"] .btn-feedback:hover {
  color: var(--painel-cor-body-bg);
}

/* Sombras pretas somem no escuro: os cartões perdem qualquer elevação. */
html[data-painel-tema-modo="escuro"] .about-block,
html[data-painel-tema-modo="escuro"] .developer-card {
  border-color: var(--painel-cor-borda);
  box-shadow: none;
}

/* ── Tour guiado ─────────────────────────────────────────────────────────── */
/* branco sobre --painel-cor-primaria (#7FC4D8 no escuro) não tem contraste */
html[data-painel-tema-modo="escuro"] .painel-tour-acoes .painel-tour-proximo {
  color: var(--painel-cor-body-bg);
}

/* Botão de tutorial nas páginas sem card de contexto */
.spics-tour-solto {
  float: right;
  margin: 0 0 8px 12px;
}

/* Botão de reset do mapa da Home (ControleVisoes do painel_geo) */
.painel-map-view-control {
  background: var(--painel-cor-card-bg);
  border: 1px solid var(--painel-cor-borda);
  border-radius: 7px;
  box-shadow: 0 1px 5px rgba(7, 27, 51, 0.2);
  overflow: hidden;
}

.painel-map-view-button {
  background: transparent;
  border: 0;
  align-items: center;
  color: var(--painel-cor-texto);
  cursor: pointer;
  display: flex;
  height: 29px;
  justify-content: center;
  padding: 0;
  width: 29px;
  /* Botão-ícone: o ControleVisoes do núcleo usa o mesmo texto para textContent,
     title e aria-label — e "Ver toda a Amazônia Legal" quebrava em 5 linhas
     dentro do controle. font-size 0 esconde só o texto visível; o tooltip e o
     nome acessível continuam completos. Mesmo ⌂ do HomeControl do mapa de
     bairros, por consistência entre os dois mapas. */
  font-size: 0;
}

.painel-map-view-button::before {
  content: "⌂";
  font-family: var(--painel-fonte-base, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.painel-map-view-button:hover,
.painel-map-view-button:focus-visible {
  background: var(--painel-cor-primaria-suave);
}

/* Cor + espessura do contorno, por nível, no painel "Camadas" */
.gestor-mapa-camadas__contorno {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.gestor-mapa-camadas__cor {
  border: 1px solid var(--gestor-border);
  border-radius: 4px;
  cursor: pointer;
  height: 20px;
  padding: 0;
  width: 28px;
}

.gestor-mapa-camadas__largura {
  flex: 1;
  height: 12px;
  min-width: 0;
}

/* "Entenda a metodologia" fora do cabeçalho navy.
   A regra base de .gestor-metodologia foi desenhada para aquele fundo escuro
   (texto e borda brancos, fundo transparente). Solto na página, entre o card de
   contexto e as abas, o botão ficava branco-sobre-claro — invisível, e lido
   como um bloco de ~40px de espaço vazio. Aqui ele volta a seguir o tema e
   encolhe, fechando a distância até as abas. */
.gestor-page > .gestor-metodologia {
  border-color: var(--painel-cor-borda);
  color: var(--painel-cor-texto);
  font-size: 0.78rem;
  margin: 0 0 6px;
  min-height: 30px;
  padding: 4px 11px;
}

.gestor-page > .gestor-metodologia:hover,
.gestor-page > .gestor-metodologia:focus-visible {
  background: var(--painel-cor-primaria-suave);
  color: var(--painel-cor-texto);
}

/* Legendas de artefato (Mapa 1 / Tabela 2) na Home: discretas, não competem
   com o conteúdo. O h3 nu herdaria ~1.75rem do Bootstrap. */
.home-map-titulo,
.home-tabela-titulo {
  color: var(--painel-cor-texto);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0 0 8px;
}

/* ==========================================================================
 * SPICS — Poluição do ar: Boletim, Mapa da pluma, Análise técnica e Sobre
 *
 * Prefixos spics-/boletim-/tecnica-. Só tokens --painel-cor-*: o mesmo CSS
 * serve aos temas claro e escuro. Cor nunca sozinha: toda faixa tem nome.
 * ========================================================================== */

/* Barra lateral por página (bslib). As variáveis --_* são as do próprio bslib:
   sem elas a barra fica branca no tema escuro. */
.bslib-sidebar-layout.spics-layout {
  --_sidebar-bg: var(--painel-cor-card-bg, #FFFFFF);
  --_sidebar-fg: var(--painel-cor-texto, #18181B);
  --_main-bg: transparent;
  --_main-fg: var(--painel-cor-texto, #18181B);
  --_border: var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  --_vert-border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  --_toggle-bg: var(--painel-cor-card-bg, #FFFFFF);
  border: 0;
  border-radius: 0;
}

.spics-lateral .sidebar-title {
  color: var(--painel-cor-texto, #18181B);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
}

.spics-lateral-controles .form-group,
.spics-lateral-controles .shiny-input-container {
  margin-bottom: 14px;
  width: 100%;
}

.spics-lateral-controles .spics-tour-solto {
  margin-top: 8px;
  position: static;
}

.spics-lateral-rotulo {
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.9rem;
  font-weight: 700;
  margin: 14px 0 6px;
}

/* Campos nativos no tema escuro: o Bootstrap os deixaria brancos, com seta escura. */
html[data-painel-tema-modo="escuro"] .spics-lateral .form-select,
html[data-painel-tema-modo="escuro"] .spics-lateral .form-control {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F0F4F4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-color: var(--painel-cor-body-bg, #0B2431);
  border-color: var(--painel-cor-borda, #3A5563);
  color: var(--painel-cor-texto, #F0F4F4);
  color-scheme: dark;
}

/* Texto da barra lateral com cor explícita: rótulos e opções do Bootstrap não
   herdam --_sidebar-fg e somem no tema escuro. */
.spics-lateral,
.spics-lateral label,
.spics-lateral .control-label,
.spics-lateral .form-check-label,
.spics-lateral .spics-legenda-item {
  color: var(--painel-cor-texto, #18181B);
}

/* Cabeçalho e textos curtos */
.boletim-cabecalho {
  margin-bottom: 10px;
  position: relative;
}

.boletim-titulo {
  color: var(--painel-cor-texto, #18181B);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0 0 6px;
}

.boletim-titulo,
.about-title,
.spics-fluxo-etapa h4 {
  text-wrap: balance;
}

/* Nome do sistema acima do título do Boletim: frase comum, sem caixa alta. */
.spics-sistema {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.9rem;
  margin: 0 0 4px;
}

.boletim-intro {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.95rem;
  margin: 0;
  max-width: 820px;
}

.boletim-demo {
  background: var(--painel-cor-primaria-suave, #ECFDF5);
  border-left: 4px solid var(--painel-cor-primaria, #124F6B);
  border-radius: 6px;
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.88rem;
  margin: 0 0 14px;
  padding: 8px 12px;
}

.boletim-significado {
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.95rem;
  margin: 0 0 6px;
}

.boletim-rodape,
.spics-nota {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.8rem;
  margin: 6px 0 0;
}


/* Números grandes (cartao_kpi do núcleo) */
.spics-kpis {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 2px;
}

.spics-kpis-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* O rótulo do cartao_kpi do núcleo vem em caixa alta; aqui, frase comum. */
.spics-kpis .kpi-label {
  letter-spacing: normal;
  text-transform: none;
}

.spics-kpis .kpi-value,
.spics-incerteza-legenda {
  font-variant-numeric: tabular-nums;
}

/* Blocos de qualidade do ar / risco / grupos */
.spics-blocos {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spics-bloco {
  background: var(--painel-cor-card-bg, #FFFFFF);
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 16px 18px;
}

.spics-bloco h3 {
  color: var(--painel-cor-texto, #18181B);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.spics-bloco .severity-badge {
  margin-bottom: 8px;
}

/* Escala de 5 faixas: a do dia em cor cheia, com contorno e nome em negrito */
.spics-escala {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.spics-escala-faixa {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spics-escala-cor {
  background: var(--faixa);
  border-radius: 4px;
  display: block;
  height: 22px;
  opacity: 0.55;
}

.spics-escala-rotulo {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.72rem;
  line-height: 1.15;
  text-align: center;
}

.spics-escala-faixa.ativa .spics-escala-cor {
  box-shadow: 0 0 0 2px var(--painel-cor-texto, #18181B);
  opacity: 1;
}

.spics-escala-faixa.ativa .spics-escala-rotulo {
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.85rem;
  font-weight: 800;
}

.spics-escala-faixa.ativa .spics-escala-rotulo::before {
  content: "▲ ";
}

/* Barra de incerteza: faixa do IC + ponto da estimativa */
.spics-incerteza {
  margin-top: 12px;
}

.spics-incerteza-titulo {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.85rem;
  font-weight: 600;
}

.spics-incerteza-trilho {
  background: var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  height: 10px;
  margin: 10px 0 8px;
  position: relative;
}

.spics-incerteza-faixa {
  background: var(--painel-cor-primaria, #124F6B);
  border-radius: 999px;
  bottom: 0;
  opacity: 0.35;
  position: absolute;
  top: 0;
}

.spics-incerteza-ponto {
  background: var(--painel-cor-primaria, #124F6B);
  border: 2px solid var(--painel-cor-card-bg, #FFFFFF);
  border-radius: 50%;
  height: 18px;
  margin: -9px 0 0 -9px;
  position: absolute;
  top: 50%;
  width: 18px;
}

.spics-incerteza-legenda {
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.88rem;
}

/* Manchete do Boletim: a frase que resume o dia, logo abaixo do título */
.spics-manchete {
  color: var(--painel-cor-texto, #18181B);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 12px;
  max-width: 70ch;
}

/* Régua da fumaça: PM2,5 em escala logarítmica, faixas oficiais do IQAr, linha da
   OMS, o valor do dia (pino) e as outras capitais (pontos). */
.spics-regua {
  margin: 4px 0 14px;
  padding-top: 30px;
  position: relative;
}

.spics-regua-barra {
  border-radius: 6px;
  height: 40px;
  overflow: hidden;
  position: relative;
}

.spics-regua-faixa {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
}

.spics-regua-faixa::before {
  background: var(--faixa);
  content: "";
  inset: 0;
  opacity: 0.35;
  position: absolute;
}

.spics-regua-faixa.ativa::before {
  opacity: 1;
}

.spics-regua-nome {
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.75rem;
  overflow: hidden;
  padding: 0 4px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spics-regua-faixa.ativa .spics-regua-nome {
  color: var(--tinta);
  font-weight: 800;
}

.spics-regua-oms {
  border-left: 2px dashed var(--painel-cor-texto, #18181B);
  height: 62px;
  position: absolute;
  top: 30px;
}

.spics-regua-pino {
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.95rem;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;  /* a haste passa por cima da barra */
}

/* Haste do pino até o pé da barra */
.spics-regua-pino::after {
  border-left: 2px solid var(--painel-cor-texto, #18181B);
  content: "";
  height: 48px;
  left: 50%;
  position: absolute;
  top: 22px;
}

.spics-regua-pino strong {
  font-variant-numeric: tabular-nums;
}

.spics-regua-pino-inicio {
  transform: translateX(-8px);
}

.spics-regua-pino-inicio::after {
  left: 8px;
}

.spics-regua-pino-fim {
  transform: translateX(calc(-100% + 8px));
}

.spics-regua-pino-fim::after {
  left: calc(100% - 8px);
}

.spics-regua-pontos {
  height: 16px;
  margin-top: 6px;
  position: relative;
}

.spics-regua-ponto {
  background: var(--painel-cor-card-bg, #FFFFFF);
  border: 2px solid var(--painel-cor-texto-suave, #52525B);
  border-radius: 50%;
  height: 10px;
  margin-left: -5px;
  position: absolute;
  top: 3px;
  width: 10px;
}

.spics-regua-marcas {
  height: 18px;
  position: relative;
}

.spics-regua-marca {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  position: absolute;
  transform: translateX(-50%);
}

.spics-regua-marca-ini {
  transform: none;
}

.spics-regua-marca-fim {
  transform: translateX(-100%);
}

.spics-regua-marca-oms {
  color: var(--painel-cor-texto, #18181B);
  font-weight: 700;
}

/* Risco à saúde: escala de uma cor e o número grande lado a lado */
.spics-risco {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.spics-risco-numero {
  color: var(--painel-cor-texto, #18181B);
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 2.6rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.spics-risco-numero-rotulo {
  color: var(--painel-cor-texto, #18181B);
  font-weight: 700;
  margin-top: 6px;
}

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

/* Celular: faixas estreitas demais para o nome; fica só o da faixa do dia. */
@media (max-width: 600px) {
  .spics-regua-nome {
    display: none;
  }

  .spics-regua-faixa.ativa .spics-regua-nome {
    display: block;
  }

  .spics-regua-marca-menor {
    display: none;
  }
}

/* Grupos de atenção com ícones */
.spics-grupos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

.spics-grupo {
  align-items: center;
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  color: var(--painel-cor-texto, #18181B);
  display: flex;
  gap: 8px;
  padding: 8px 12px;
}

.spics-grupo svg {
  color: var(--painel-cor-primaria, #124F6B);
  flex: none;
}

.spics-grupo.destaque {
  border-color: var(--painel-cor-primaria, #124F6B);
  box-shadow: inset 0 0 0 1px var(--painel-cor-primaria, #124F6B);
}

.spics-grupo-nome {
  font-size: 0.9rem;
  font-weight: 700;
}

.spics-grupo-tag {
  background: var(--painel-cor-primaria, #124F6B);
  border-radius: 999px;
  color: var(--painel-cor-card-bg, #FFFFFF);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
}

/* Cards de gráfico: minigráfico baixo, mapa da pluma alto */
.spics-card-curto .shiny-bound-output,
.spics-card-curto .html-fill-item {
  min-height: 0;
}

#pluma_mapa_card .shiny-bound-output {
  min-height: 640px;
}

.spics-saiba-mais {
  margin: 4px 0 12px;
}

/* Legenda da pluma (barra lateral) */
.spics-legenda {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
}

.spics-legenda-item {
  align-items: center;
  display: flex;
  font-size: 0.85rem;
  gap: 8px;
}

.spics-amostra {
  background: var(--amostra);
  /* Contorno: a amostra escura da trajetória some no tema escuro sem ele. */
  box-shadow: 0 0 0 1px var(--painel-cor-texto-suave, #52525B);
  display: inline-block;
  flex: none;
}

.spics-amostra-quadrado {
  border-radius: 3px;
  height: 14px;
  width: 14px;
}

.spics-amostra-circulo {
  border-radius: 50%;
  height: 14px;
  width: 14px;
}

.spics-amostra-linha {
  border-radius: 2px;
  height: 3px;
  width: 22px;
}

/* Mesma rampa YlOrBr do mapa */
.spics-rampa {
  background: linear-gradient(90deg, #FFFFE5, #FEE391, #FE9929, #CC4C02, #662506);
  border-radius: 4px;
  height: 12px;
}

.spics-rampa-rotulos {
  color: var(--painel-cor-texto-suave, #52525B);
  display: flex;
  font-size: 0.75rem;
  justify-content: space-between;
  margin: 2px 0 10px;
}

/* Análise técnica: três níveis de leitura */
.tecnica-niveis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 8px;
}

.spics-nivel-rotulo {
  color: var(--painel-cor-primaria, #124F6B);
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
}

.tecnica-nivel p {
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.9rem;
  margin: 6px 0 0;
}

#tecnica_resumo .shiny-bound-output {
  min-height: 0;
}

/* Sobre: diagrama do fluxo de dados (caixas + setas; vertical em tela estreita) */
.spics-fluxo {
  counter-reset: etapa;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.spics-fluxo-etapa {
  background: var(--painel-cor-card-bg, #FFFFFF);
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  border-top: 4px solid var(--painel-cor-secundaria, #2AA88B);
  counter-increment: etapa;
  padding: 14px;
  position: relative;
}

.spics-fluxo-etapa:not(:last-child)::after {
  color: var(--painel-cor-texto-suave, #52525B);
  content: "→";
  font-size: 1.4rem;
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
}

.spics-fluxo-icone {
  color: var(--painel-cor-primaria, #124F6B);
  margin-bottom: 6px;
}

.spics-fluxo-etapa h4 {
  color: var(--painel-cor-texto, #18181B);
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 6px;
}

.spics-fluxo-etapa h4::before {
  color: var(--painel-cor-texto-suave, #52525B);
  content: counter(etapa) ". ";
}

.spics-fluxo-itens {
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.84rem;
  margin: 0 0 10px;
  padding-left: 16px;
}

.spics-fluxo-periodo {
  background: var(--painel-cor-primaria-suave, #ECFDF5);
  border-radius: 999px;
  color: var(--painel-cor-primaria-hover, #0B3A4F);
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
}

@media (max-width: 1200px) {
  .spics-kpis-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spics-fluxo {
    gap: 28px;
    grid-template-columns: 1fr;
  }

  .spics-fluxo-etapa:not(:last-child)::after {
    bottom: -28px;
    content: "↓";
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) {
  .spics-kpis,
  .spics-kpis-4,
  .spics-blocos,
  .tecnica-niveis {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
 * Três boletins (06/10/2026): Público, Gestão e Técnico
 * ========================================================================== */

/* Título de card com o botão "i" ao lado: o texto longo mora na dica. */
.spics-titulo-dica {
  align-items: center;
  color: var(--painel-cor-texto, #18181B);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  gap: 6px;
  margin: 0;
}

h4.spics-titulo-dica {
  font-size: 0.98rem;
  margin: 18px 0 10px;
}

.spics-titulo-dica .help-wrap {
  display: inline-flex;
}

/* Os dois cards que respondem "como está o ar" e "qual o risco" */
.spics-card-principal > .card-header {
  background: transparent;
  border-bottom: 0;
  padding-bottom: 0;
}

/* Boletim Público: a resposta em uma palavra grande, na cor da faixa */
.spics-palavra {
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 10px;
  display: inline-block;
  font-family: var(--painel-fonte-titulo, sans-serif);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 2px 0 10px;
  padding: 8px 18px;
}

.spics-frase {
  color: var(--painel-cor-texto, #18181B);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 14px;
  max-width: 48ch;
}

/* Selo de nível: cor + nome; borda fina para os tons claros da rampa */
.spics-selo {
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 4px;
  line-height: 1.2;
  padding: 3px 10px;
  white-space: nowrap;
}

/* "Atenção" não é um nível: contorno, sem cor de fundo, com o triângulo */
.spics-selo.spics-selo-atencao {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--painel-cor-texto, #18181B);
}

/* Quem precisa de mais cuidado: uma linha por grupo, sempre na mesma ordem */
.spics-pgrupos {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.spics-pgrupo {
  align-items: center;
  background: color-mix(in srgb, var(--painel-cor-texto, #18181B) 5%, transparent);
  border-radius: 10px;
  color: var(--painel-cor-texto, #18181B);
  display: grid;
  gap: 10px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  padding: 8px 12px;
}

.spics-pgrupo-icone {
  color: var(--painel-cor-primaria, #124F6B);
  display: inline-flex;
}

.spics-pgrupo-nome {
  font-weight: 700;
}

/* Os próximos dias: um quadrado por dia, o escolhido com contorno forte */
.spics-dias {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.spics-dia {
  align-items: center;
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  color: var(--painel-cor-texto, #18181B);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  text-align: center;
}

.spics-dia.atual {
  border: 2px solid var(--painel-cor-texto, #18181B);
}

.spics-dia-semana {
  font-weight: 700;
}

.spics-dia-data {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.85rem;
}

.spics-dia-ar {
  border-radius: 6px;
  font-weight: 800;
  margin-top: 6px;
  padding: 6px 4px;
  width: 100%;
}

/* Mapas MapLibre (www/spics_mapas.js). Fundo claro nos dois temas. */
.spics-mapa {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

.card[data-full-screen="true"] .spics-mapa {
  height: 78vh !important;
}

.spics-mapa-dica .maplibregl-popup-content {
  color: #0F172A;
  font-family: var(--painel-fonte-base, sans-serif);
  font-size: 0.85rem;
  line-height: 1.35;
  padding: 8px 10px;
}

.spics-legenda.spics-legenda-mapa,
.spics-legenda-mapa .spics-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
}

.spics-legenda-mapa .spics-rampa {
  max-width: 320px;
}

.spics-legenda-mapa .spics-rampa-rotulos {
  max-width: 320px;
}

/* Tabelas do Gestão e do Técnico */
.spics-tabela-wrap {
  overflow-x: auto;
}

.spics-tabela {
  --bs-table-bg: transparent;
  --bs-table-color: var(--painel-cor-texto, #18181B);
  color: var(--painel-cor-texto, #18181B);
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.spics-tabela th,
.spics-tabela td {
  border-color: var(--painel-cor-borda, rgba(0, 0, 0, 0.08));
  vertical-align: middle;
}

.spics-tabela thead th {
  color: var(--painel-cor-texto-suave, #52525B);
  font-size: 0.8rem;
  font-weight: 600;
}

.spics-tabela .spics-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.spics-tabela tr.atual > * {
  background: color-mix(in srgb, var(--painel-cor-primaria, #124F6B) 10%, transparent);
  font-weight: 700;
}

.spics-tabela-grupo {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.spics-tabela-grupo svg {
  color: var(--painel-cor-primaria, #124F6B);
  flex: none;
}

.spics-tabela .spics-incerteza-trilho {
  height: 8px;
  margin: 8px 0 2px;
  min-width: 160px;
}

.spics-tabela .spics-incerteza-ponto {
  height: 14px;
  margin: -7px 0 0 -7px;
  width: 14px;
}

#gestao_resumo > .card,
#publico_dias,
#publico_mapa_card {
  margin-bottom: 16px;
}

@media (max-width: 600px) {
  .spics-palavra {
    font-size: 1.7rem;
  }

  .spics-pgrupo {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .spics-pgrupo > .spics-selo {
    grid-column: 2;
    justify-self: start;
  }
}

/* Cards do Público: cada um com a própria altura (o do ar é mais curto). */
#publico_cards > * {
  align-self: start;
}

/* Legenda dos mapas fora da barra lateral: cor explícita (somia no escuro) */
.spics-legenda-mapa .spics-legenda-item,
.spics-legenda-mapa.spics-legenda .spics-legenda-item {
  color: var(--painel-cor-texto, #18181B);
}

/* Cabeçalho das tabelas em frase comum (o tema põe caixa alta em thead) */
.spics-tabela thead th {
  letter-spacing: normal;
  text-transform: none;
}

.spics-tabela-capitais th[scope="row"] {
  white-space: nowrap;
}

/* Compartilhar e newsletter na barra lateral: só interface, por enquanto */
.spics-acoes {
  display: grid;
  gap: 8px;
  margin: 4px 0 14px;
}

.spics-acao {
  align-items: center;
  background: transparent;
  border: 1px solid var(--painel-cor-borda, rgba(0, 0, 0, 0.18));
  border-radius: 8px;
  color: var(--painel-cor-texto, #18181B);
  display: flex;
  font-weight: 600;
  gap: 8px;
  justify-content: flex-start;
  padding: 8px 12px;
  width: 100%;
}

.spics-acao:hover,
.spics-acao:focus-visible {
  border-color: var(--painel-cor-primaria, #124F6B);
  color: var(--painel-cor-texto, #18181B);
}

.spics-acao svg {
  color: var(--painel-cor-primaria, #124F6B);
  flex: none;
}

.spics-acao[aria-disabled="true"] {
  cursor: default;
}

.spics-acao-destinos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spics-acao-destino {
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 999px;
  cursor: default;
  font-size: 0.85rem;
  padding: 3px 10px;
}