/* Identidade visual UNIR (estilizacao/Cores e fontes UNIR.pdf).
   Plano: projeto_unir/estilizacao/PLANO_ESTILIZACAO_UNIR_2026-10-24.md.
   As URLs são relativas a este arquivo: funcionam atrás do prefixo /shiny_rocinha/.
   Fontes servidas pelo próprio app (sem Google Fonts). Montserrat: SIL OFL (fonts/OFL-Montserrat.txt).
   Cogenta Text (corpo) entra quando houver licença web (decisão E1): novo @font-face aqui e o
   nome no início de --unir-fonte-corpo e de FONTE_CORPO em R/config.R. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

/* Contrastes (WCAG 2.2): amarelo/azul 8,2:1; branco/azul 14,6:1; preto/branco 21:1.
   O amarelo NUNCA vai sobre fundo branco (1,8:1). */
:root {
  --unir-azul: #002c43;
  --unir-azul-escuro: #00202f;
  --unir-amarelo: #dfc225;
  --unir-branco: #ffffff;
  --unir-preto: #000000;
  --unir-suave-claro: #b8c7d1;   /* texto secundário sobre azul (8,4:1) */
  --unir-suave-escuro: #5f6b73;  /* texto secundário sobre branco (5,5:1) */
  --unir-borda: #d5dbe1;
  --unir-fonte-corpo: "Montserrat", system-ui, sans-serif;
  --unir-fonte-titulo: "Montserrat", system-ui, sans-serif;
}

/* Barra superior: azul da marca, itens brancos, ativo e hover em amarelo (como o site UNIR) */
.navbar.bg-unir { background-color: var(--unir-azul) !important; border-bottom: 0; }
.navbar.bg-unir .navbar-brand { color: var(--unir-branco); font-family: var(--unir-fonte-titulo); font-weight: 600; letter-spacing: .02em; }
.navbar.bg-unir .navbar-brand .marca-unir { color: var(--unir-amarelo); }
.navbar.bg-unir .nav-link { color: var(--unir-branco); font-weight: 500; }
.navbar.bg-unir .nav-link:hover,
.navbar.bg-unir .nav-link:focus,
.navbar.bg-unir .nav-link.active { color: var(--unir-amarelo) !important; }
.navbar.bg-unir .nav-link.active { box-shadow: inset 0 -3px 0 var(--unir-amarelo); }
.navbar.bg-unir .navbar-toggler { border-color: var(--unir-suave-claro); }
/* Foco sobre o azul: amarelo (o foco padrão, azul, sumiria na barra) */
.navbar.bg-unir :focus-visible { outline: 3px solid var(--unir-amarelo); outline-offset: 2px; }

/* Títulos */
h1, h2, h3, h4, h5, h6, .h5 { font-family: var(--unir-fonte-titulo); font-weight: 600; color: var(--unir-preto); }

/* Radio e checkbox desmarcados: a borda padrão (#dee2e6, 1,3:1) some no branco; precisa de >= 3:1 */
.form-check-input { border-color: var(--unir-suave-escuro); }

/* Leaflet usa Helvetica por padrão */
.leaflet-container { font-family: var(--unir-fonte-corpo); }

/* ==========================================================================
   Responsividade (projeto_unir/estilizacao/ESPEC_RESPONSIVIDADE_2026-10-24.md)
   Faixas: celular < 768, tablet 768–1199 (hambúrguer < 992), desktop >= 1200.
   ========================================================================== */

/* Barra de contexto (só < 992, classe d-lg-none): botão "Filtros" e resumo do filtro ativo */
.barra-contexto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.btn-unir { background: var(--unir-azul); color: var(--unir-branco); border: 0; min-height: 44px; padding: 0 16px; font-weight: 600; }
.btn-unir:hover, .btn-unir:focus-visible { background: var(--unir-azul-escuro); color: var(--unir-amarelo); }
.resumo-filtros { font-size: 14px; color: var(--unir-preto); line-height: 1.35; }
.nota-kpi { font-size: 12px; color: var(--unir-suave-escuro); margin: 0 0 6px; }

/* Sem rolagem aninhada no card: o gráfico tem a altura do conteúdo */
.grafico-barras, .grafico-linhas, .grafico-rosca { overflow: visible; }

/* COVID: mapa ocupa o resto da tela no desktop */
.mapa-covid { height: calc(100svh - 360px); min-height: 420px; width: 100%; border: 1px solid var(--unir-borda); border-radius: 6px; overflow: hidden; }

/* Slider sem grade (ticks = FALSE): números e alça legíveis e tocáveis */
.irs--shiny .irs-min, .irs--shiny .irs-max, .irs--shiny .irs-single { font-size: 12px; }
.irs--shiny .irs-handle { width: 28px; height: 28px; top: 19px; }
.leaflet-container .leaflet-control-attribution { font-size: 12px; }

/* Legenda do mapa fora do mapa (celular) */
.legenda-mapa { margin: 8px 0 0; font-size: 12px; color: var(--unir-preto); }
.legenda-mapa-titulo { font-weight: 600; display: block; margin-bottom: 4px; }
.legenda-mapa-rampa { height: 12px; border-radius: 3px; border: 1px solid var(--unir-borda); }
.legenda-mapa-limites { display: flex; justify-content: space-between; margin-top: 2px; }

/* Tablet e abaixo: KPIs em 2x2 por prioridade (Rocinha, Diferencial / CAP, Município), D3 */
@media (max-width: 1199.98px) {
  .grade-kpi > :nth-child(1) { order: 1; }
  .grade-kpi > :nth-child(4) { order: 2; }
  .grade-kpi > :nth-child(2) { order: 3; }
  .grade-kpi > :nth-child(3) { order: 4; }
}

/* Hambúrguer: alvos de 44 px no chevron da sidebar */
@media (max-width: 991.98px) {
  .bslib-sidebar-layout > .collapse-toggle { min-width: 44px; min-height: 44px; }
}

/* O bslib força uma coluna em toda grade abaixo de 576 px, ignorando col_widths: aqui, KPIs em 2x2
   e os cartões do COVID em 3 colunas */
@media (max-width: 575.98px) {
  .bslib-grid.grade-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bslib-grid.grade-vb { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .grade-kpi > .bslib-grid-item, .grade-vb > .bslib-grid-item { grid-column: auto !important; }
  /* O chevron do bslib (linha própria de 48 px aqui) fica visível: escondê-lo com display:none ou
     mudar a grade deixa a gaveta vazia (o bslib finaliza a abertura no fim da transição), e puxar
     a barra de contexto para essa linha a deixa cortada pelo .main. */
}

/* Celular */
@media (max-width: 767.98px) {
  .kpi { padding: 10px 12px; }
  .kpi .kpi-titulo { font-size: 12px; }
  .kpi-nota.repetida { display: none; }
  .grafico-linhas .html-widget { height: 340px !important; }
  .grafico-rosca .html-widget { height: 360px !important; }
  .mapa-covid { height: 60svh; min-height: 320px; max-height: 520px; }
  .mapa-covid .leaflet-control.legend { display: none; }
  .vb-compacto .card-body { padding: 10px 8px; }
  .vb-compacto .value-box-area { padding: 0; }
  .vb-compacto .value-box-title { font-size: 12px; margin-bottom: 2px; overflow-wrap: normal; word-break: normal; hyphens: none; }
  .vb-compacto .value-box-value { font-size: 1.25rem; white-space: nowrap; }
  .vb-compacto { min-height: 0 !important; }
}