/* =========================================================================
   SANEAGO · Painel de Indicadores — DIPRO
   styles.css — layout responsivo (desktop-first, adaptável a smartphone)
   ========================================================================= */

:root {
  --azul-900:#0b3a5b; --azul-800:#0b3a5b; --azul-700:#0f5c8c; --azul-600:#1372ad; --azul-500:#1e8fd0;
  --azul-400:#5aa9de; --azul-100:#e6f2fa; --azul-050:#f2f8fc;
  --verde-600:#1f9e6e; --verde-500:#27c088; --verde-100:#e3f7ee;
  --amarelo:#e8a71a; --vermelho:#d9534f; --vermelho-100:#fbe9e8;
  --roxo:#6a4bbd; --roxo-100:#efeaff;
  --cinza-900:#1b2733; --cinza-700:#3d4b59; --cinza-600:#55636f; --cinza-500:#6b7a89;
  --cinza-400:#98a6b3; --cinza-300:#c6d0d9; --cinza-200:#e2e9ef; --cinza-100:#eef3f7; --branco:#fff;
  --bg:#f4f7fa;
  --dim-res:var(--azul-600); --dim-proc:var(--verde-600); --dim-fac:var(--roxo);
  --ok:var(--verde-600); --ok-bg:var(--verde-100);
  --no:var(--vermelho); --no-bg:var(--vermelho-100);
  --radius:14px; --radius-sm:9px;
  /* padding interno padrão dos cards de conteúdo — use sempre estas variáveis
     para os cards ficarem com o mesmo respiro em todas as telas */
  --card-pad-y:20px; --card-pad-x:22px;
  --shadow:0 1px 3px rgba(16,42,67,.08),0 6px 20px rgba(16,42,67,.06);
  --shadow-sm:0 1px 2px rgba(16,42,67,.08);
  --sidebar-w:250px;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:var(--font); color:var(--cinza-900); background:var(--bg);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.45; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
select { font-family:inherit; }
a { color:var(--azul-600); }

/* ------------------------- ÍCONES VETORIAIS ------------------------- */
.icn { width:22px; height:22px; flex-shrink:0; vertical-align:middle; }
.icn.i-sm { width:16px; height:16px; }
.icn.i-xs { width:13px; height:13px; }

#app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }

/* ------------------------- SIDEBAR ------------------------- */
.sidebar { background:linear-gradient(180deg,var(--azul-900),var(--azul-700));
  color:#dbeaff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:12px; padding:20px 18px 16px; }
.brand-logo-img { width:46px; height:46px; background:#fff; padding:7px; border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.18); flex-shrink:0; }
.brand-txt { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.brand-txt strong { font-size:17px; color:#fff; letter-spacing:.2px; }
.brand-txt span { font-size:11.5px; opacity:.82; }

.nav { display:flex; flex-direction:column; gap:1px; padding:8px 12px; flex:1; overflow-y:auto; }
.nav-group { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:#9fc3e4;
  opacity:.7; font-weight:700; padding:12px 13px 5px; }
.nav-sep { height:1px; background:rgba(255,255,255,.13); margin:8px 10px; }
.nav-item { display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:10px;
  color:#cfe4f7; font-size:14px; font-weight:500; text-align:left; transition:.15s; }
.nav-item .ic { width:22px; height:22px; display:inline-grid; place-items:center; color:#a9cef0; }
.nav-item:hover { background:rgba(255,255,255,.09); color:#fff; }
.nav-item:hover .ic { color:#fff; }
.nav-item.is-active { background:rgba(255,255,255,.16); color:#fff; box-shadow:inset 3px 0 0 var(--verde-500); }
.nav-item.is-active .ic { color:var(--verde-500); }

.sidebar-foot { padding:14px 16px 20px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:12px; }
.sidebar-foot label { display:block; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; opacity:.8; margin-bottom:5px; color:#cfe4f7; }
/* seletores em destaque: fundo branco, texto azul */
.sidebar-foot select { width:100%; padding:9px 10px; border-radius:9px; border:1px solid #fff;
  background:#fff; color:var(--azul-700); font-size:13.5px; font-weight:600; }
.sidebar-foot select option { color:#1b2733; }
.period-row { display:flex; gap:8px; }
.period-row select { flex:1; min-width:0; }

/* ------------------------- MAIN ------------------------- */
.main { display:flex; flex-direction:column; min-width:0; }
.topbar { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--cinza-200);
  display:flex; align-items:center; gap:14px; padding:12px 26px; min-height:60px; }
.hamb { display:none; color:var(--azul-700); }
.hamb .icn { width:24px; height:24px; }
.back-btn { display:none; align-items:center; gap:5px; padding:7px 13px 7px 9px; border-radius:9px;
  background:var(--azul-050); border:1px solid var(--cinza-200); color:var(--azul-700);
  font-size:13.5px; font-weight:600; transition:.15s; }
.back-btn:hover { background:var(--azul-100); border-color:var(--azul-500); transform:translateX(-2px); }
.back-btn .back-arrow { width:17px; height:17px; }
.crumbs { font-size:13.5px; color:var(--cinza-500); display:flex; align-items:center;
  gap:7px; flex-wrap:wrap; flex:1; min-width:0; }
.crumbs .cr-link { color:var(--azul-600); cursor:pointer; font-weight:600; }
.crumbs .cr-sep { opacity:.5; }
.crumbs .cr-cur { color:var(--cinza-900); font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.topbar .mini-picker { display:none; gap:8px; align-items:center; }   /* só no celular */
.topbar select { padding:7px 9px; border-radius:8px; border:1px solid var(--cinza-300);
  background:#fff; font-size:13px; color:var(--cinza-900); max-width:180px; }
.topbar .btn-report .ic { display:inline-grid; place-items:center; }
.topbar .btn-report .ic .icn { width:16px; height:16px; }

/* ---------- Combobox de unidade (busca + hierarquia) ---------- */
.ucombo { position:relative; width:100%; }
.ucombo-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border-radius:9px; font-size:13.5px; text-align:left; cursor:pointer;
  border:1px solid var(--cinza-300); background:#fff; color:var(--cinza-900); }
.ucombo-btn:hover { border-color:var(--azul-500); }
.ucombo-cur { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.ucombo-chev .icn { width:16px; height:16px; opacity:.65; transition:transform .15s; }
.ucombo.is-open .ucombo-chev .icn { transform:rotate(180deg); }
/* variante da sidebar: seletor em destaque (branco, texto azul) */
.ucombo-dark .ucombo-btn { border-color:#fff; background:#fff; color:var(--azul-700); font-weight:700; }
.ucombo-dark .ucombo-btn:hover { border-color:var(--azul-100); }
.ucombo-dark .ucombo-chev .icn { opacity:.9; }

.ucombo-pop { position:absolute; z-index:60; left:0; width:330px; max-width:86vw; background:#fff; color:var(--cinza-900);
  border:1px solid var(--cinza-200); border-radius:12px; box-shadow:var(--shadow); padding:8px;
  display:flex; flex-direction:column; gap:7px; }
.ucombo-pop[hidden] { display:none; }
.ucombo:not(.ucombo-up) .ucombo-pop { top:calc(100% + 6px); }
.ucombo-up .ucombo-pop { bottom:calc(100% + 6px); }
.ucombo-search { width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--cinza-300);
  font-size:13.5px; color:var(--cinza-900); outline:none; }
.ucombo-search:focus { border-color:var(--azul-500); box-shadow:0 0 0 3px var(--azul-100); }
.ucombo-list { max-height:44vh; overflow-y:auto; display:flex; flex-direction:column; }
.ucombo-item { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--cinza-900); white-space:nowrap; }
.ucombo-item:hover, .ucombo-item.is-hi { background:var(--azul-050); }
.ucombo-item.is-cur { background:var(--azul-100); }
.ucombo-item.is-cur .ucombo-nm { font-weight:700; color:var(--azul-900); }
.ucombo-nm { overflow:hidden; text-overflow:ellipsis; flex-shrink:0; max-width:70%; }
.ucombo-tgl { width:16px; flex-shrink:0; text-align:center; color:var(--cinza-500); font-size:11px; user-select:none; }
.ucombo-tgl:hover { color:var(--azul-600); }
.ucombo-tgl-empty { visibility:hidden; }
.ucombo-badge { font-size:9px; font-weight:800; letter-spacing:.4px; padding:2px 5px; border-radius:5px; flex-shrink:0; }
.ucombo-badge.b-diretoria { background:var(--azul-900); color:#fff; }
.ucombo-badge.b-superintendencia { background:var(--azul-100); color:var(--azul-700); }
.ucombo-badge.b-gerencia { background:var(--verde-100); color:var(--verde-600); }
.ucombo-badge.b-distrito { background:#eef1f4; color:var(--cinza-500); }
.ucombo-path { font-size:11px; color:var(--cinza-500); overflow:hidden; text-overflow:ellipsis; margin-left:auto; padding-left:8px; }
.ucombo-empty { padding:16px; text-align:center; color:var(--cinza-500); font-size:13px; }

.content { padding:24px 26px 90px; max-width:1240px; width:100%; }

/* ------------------------- SEÇÕES / TÍTULOS ------------------------- */
.page-head { margin-bottom:20px; }
.page-head h1 { font-size:23px; color:var(--azul-900); letter-spacing:-.3px; }
.page-head p { color:var(--cinza-500); font-size:14px; margin-top:4px; }
.section-title { font-size:13px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--cinza-500); font-weight:700; margin:26px 0 12px; }
/* seção com divisão mais clara: mais respiro em cima + barra de acento */
.section-title.sec-accent { display:flex; align-items:center; gap:10px; font-size:13.5px;
  color:var(--azul-900); margin:34px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--cinza-200); }
.section-title.sec-accent::before { content:''; width:4px; height:15px; border-radius:3px;
  background:var(--azul-600); flex-shrink:0; }
.content > .unit-hero + .section-title.sec-accent { margin-top:22px; }

/* topo da seção Desempenho: resumo + alerta lado a lado, quebrando junto */
.desemp-topo { display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.desemp-topo .resumo-card { margin-bottom:0; }
.desemp-topo .alert-banner { margin-bottom:0; align-self:center; }

/* ------------------------- CARDS / GRID ------------------------- */
.card { background:#fff; border:1px solid var(--cinza-200); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); }
.grid { display:grid; gap:16px; }
.grid.kpi { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.grid.cards3 { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.grid.cards1 { grid-template-columns:minmax(0,560px); }
.grid.cards2 { grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); }

/* KPI tiles */
.kpi-tile { padding:18px 18px 16px; position:relative; overflow:hidden; }
.kpi-tile .kpi-label { font-size:12.5px; color:var(--cinza-500); font-weight:600; }
.kpi-tile .kpi-value { font-size:30px; font-weight:800; letter-spacing:-1px; margin-top:6px; color:var(--azul-900); }
.kpi-tile .kpi-sub { font-size:12px; color:var(--cinza-500); margin-top:3px; }
.kpi-tile .kpi-ic { position:absolute; top:14px; right:16px; color:var(--azul-500); opacity:.5; }
.kpi-tile .kpi-ic .icn { width:22px; height:22px; }
.kpi-tile.tone-no .kpi-ic { color:var(--vermelho); }
.kpi-tile.tone-ok .kpi-ic { color:var(--verde-600); }

/* donut summary */
.summary-card { display:flex; gap:26px; align-items:center;
  padding:calc(var(--card-pad-y) + 2px) calc(var(--card-pad-x) + 2px); flex-wrap:wrap; }
.donut-wrap { display:flex; align-items:center; gap:20px; }
.donut-legend { display:flex; flex-direction:column; gap:10px; }
.leg { display:flex; align-items:center; gap:9px; font-size:14px; }
.leg .dot { width:12px; height:12px; border-radius:4px; }
.leg .leg-val { font-weight:700; margin-left:auto; padding-left:14px; }

/* ------------------------- STATUS PILLS ------------------------- */
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; white-space:nowrap; }
.pill.ok { background:var(--ok-bg); color:var(--ok); }
.pill.no { background:var(--no-bg); color:var(--no); }
.pill .pdot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill-lg { padding:6px 14px; font-size:13px; }

/* ------------------------- INDICATOR CARD (compacto) ------------------------- */
.ind-card { padding:18px var(--card-pad-x) 16px; display:flex; flex-direction:column; gap:9px; cursor:pointer;
  transition:.15s; border:1px solid var(--cinza-200); }
.ind-card:hover { border-color:var(--azul-500); box-shadow:var(--shadow); transform:translateY(-2px); }

.ic-badge { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; }
.ic-badge .icn { width:22px; height:22px; }
.ic-badge.b-ok { background:var(--verde-100); color:var(--verde-600); }
.ic-badge.b-off { background:var(--vermelho-100); color:var(--vermelho); }
.ic-badge.b-neutral { background:var(--azul-050); color:var(--azul-600); }
.ic-badge.b-esg { background:var(--verde-100); color:var(--verde-600); }
/* cor do ícone conforme a dimensão estratégica */
.ic-badge.dim-res { background:var(--azul-100); color:var(--azul-600); }
.ic-badge.dim-proc { background:var(--verde-100); color:var(--verde-600); }
.ic-badge.dim-fac { background:var(--roxo-100); color:var(--roxo); }
.ic-badge.sm { width:30px; height:30px; border-radius:8px; }
.ic-badge.sm .icn { width:16px; height:16px; }
.ic-badge.lg { width:50px; height:50px; border-radius:14px; }
.ic-badge.lg .icn { width:26px; height:26px; }

.ind-card .ic-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ind-card .ic-name { font-size:14.5px; font-weight:700; color:var(--cinza-700); line-height:1.25; min-width:0; }
.ic-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.ic-dot.ok { background:var(--verde-500); } .ic-dot.no { background:var(--vermelho); } .ic-dot.sd { background:var(--cinza-300); }

.ind-card .ic-metricline { display:flex; align-items:baseline; gap:10px; }
.ind-card .ic-result { font-size:23px; font-weight:800; letter-spacing:-.6px; line-height:1; font-variant-numeric:tabular-nums; }
.ind-card .ic-meta { margin-left:auto; font-size:13px; color:var(--cinza-500); font-weight:600; white-space:nowrap; }
.ind-card .ic-spark { margin:2px -2px 0; }
.ind-card .ic-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ind-card .ic-status { font-size:12.5px; font-weight:700; }
.ind-card .ic-status.ok { color:var(--verde-600); } .ind-card .ic-status.no { color:var(--vermelho); } .ind-card .ic-status.sd { color:var(--cinza-500); }
.ind-card .ic-asof { font-size:10.5px; color:var(--cinza-400); font-weight:600; white-space:nowrap; }
.realizado-asof { display:block; font-size:10px; font-weight:600; color:var(--cinza-400); margin-top:1px; }

/* ------------------------- TABELA ------------------------- */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--cinza-200); background:#fff; }
table.grid-tbl { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
table.grid-tbl th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--cinza-500); font-weight:700; padding:12px 14px; border-bottom:1px solid var(--cinza-200);
  background:var(--azul-050); position:sticky; top:0; }
table.grid-tbl td { padding:12px 14px; border-bottom:1px solid var(--cinza-100); vertical-align:middle; }
table.grid-tbl tr:last-child td { border-bottom:none; }
table.grid-tbl tr.clickable { cursor:pointer; }
table.grid-tbl tr.clickable:hover td { background:var(--azul-050); }
.num { font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
.th-num { text-align:right; }

/* barra de aderência inline */
.bar { height:7px; background:var(--cinza-200); border-radius:4px; overflow:hidden; min-width:70px; }
.bar > i { display:block; height:100%; border-radius:4px; }

/* ------------------------- DETALHE INDICADOR ------------------------- */
.detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.detail-head-left { display:flex; gap:14px; align-items:flex-start; }
.detail-head h1 { font-size:23px; color:var(--azul-900); line-height:1.2; }
.detail-meta-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.tag { font-size:12px; padding:4px 10px; border-radius:8px; background:var(--azul-100); color:var(--azul-700); font-weight:600; }
.detail-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-top:18px; }
.chart-card { padding:var(--card-pad-y) var(--card-pad-x); }
.chart-card h3 { font-size:14px; color:var(--cinza-700); margin-bottom:14px; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:4px 12px; min-width:0; }
.chart-card h3 > span { min-width:0; }
.chart-legend { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; color:var(--cinza-500); }
.chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.chart-legend i { width:14px; height:3px; border-radius:2px; display:inline-block; }
.side-col { display:flex; flex-direction:column; gap:16px; }
.info-card { padding:var(--card-pad-y) var(--card-pad-x); }
.info-card h3 { font-size:13px; text-transform:uppercase; letter-spacing:.4px; color:var(--cinza-500); margin-bottom:10px; }
.info-card p { font-size:13.5px; color:var(--cinza-700); line-height:1.55; }
.bench-list { display:flex; flex-direction:column; gap:8px; }
.bench-row { display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px dashed var(--cinza-200); }
.bench-row:last-child { border-bottom:none; }
.bench-row b { color:var(--azul-800,#0b3a5b); }

/* ---- Balanço hídrico: cascata do volume disponibilizado ---- */
.bh-grid { display:flex; gap:8px; align-items:stretch; min-height:520px; margin-bottom:6px; }
.bh-col { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.bh-col:first-child { flex:0 0 21%; }
.bh-bl { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-radius:var(--radius-sm); padding:10px 12px; text-align:center; color:#fff; min-height:56px;
  box-shadow:var(--shadow-sm); overflow:hidden; }
.bh-lb { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; line-height:1.2; opacity:.95; }
.bh-vl { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; }
.bh-pc { font-size:13px; font-weight:700; opacity:.9; font-variant-numeric:tabular-nums; }
.bh-bl sup { font-size:9px; }
/* níveis: total (azul) · aproveitado (verde) · perdido (vermelho), clareando a cada nível */
.bh-total { background:var(--azul-700); }
.bh-ok  { background:var(--verde-600); }
.bh-ok2 { background:var(--verde-500); }
.bh-ok3 { background:#4dd3a3; }
.bh-no  { background:var(--vermelho); }
.bh-no2 { background:#e2726e; }
.bh-no3 { background:#eda9a6; }
/* continuação de um ramo que não se subdivide nesta base */
.bh-cont { box-shadow:none; opacity:.4; }
.bh-nota { margin-top:2px; }
.bh-nota sup { color:var(--cinza-600); font-weight:700; }
@media (max-width:900px) {
  .bh-grid { flex-direction:column; min-height:0; }
  .bh-col, .bh-col:first-child { flex:none; }
  .bh-bl { flex-grow:0 !important; min-height:64px; }
  .bh-cont { display:none; }
}

/* ---- Empregados: barras por dimensão do quadro ---- */
.emp-grid { grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); align-items:start; }
.emp-dim { padding:16px 18px; }
.emp-dim h3 { font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--cinza-500);
  margin-bottom:12px; }
.emp-l { display:grid; grid-template-columns:minmax(0,1.5fr) 30% auto auto; align-items:center;
  gap:8px; padding:4px 0; font-size:12.5px; color:var(--cinza-700); }
.emp-k { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emp-bar { height:8px; border-radius:999px; background:var(--cinza-100); overflow:hidden; }
.emp-bar i { display:block; height:100%; border-radius:999px; }
.emp-n { font-weight:700; color:var(--cinza-900); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
.emp-p { font-size:11.5px; color:var(--cinza-400); font-variant-numeric:tabular-nums; min-width:42px; text-align:right; }
.emp-resto .emp-k { font-style:italic; color:var(--cinza-500); }

/* linhas do card-resumo de empregados no Painel Geral */
.sisres-els { display:flex; flex-direction:column; gap:6px; }
.sisres-el { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:12.5px; color:var(--cinza-600); }
.sisres-el b { color:var(--cinza-900); font-weight:700; font-variant-numeric:tabular-nums; }

/* ---- Pontos de atenção do distrito ---- */
.pontos-card { padding:6px 4px; }
.ponto { display:flex; gap:11px; padding:12px 16px; border-bottom:1px solid var(--cinza-100); }
.ponto:last-child { border-bottom:none; }
.ponto-ic { display:inline-flex; width:26px; height:26px; border-radius:8px; flex:none;
  align-items:center; justify-content:center; }
.ponto-txt { min-width:0; }
.ponto-tit { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px; }
.ponto-sis { font-weight:700; color:var(--cinza-500); text-transform:none; letter-spacing:0; }
.ponto-txt p { font-size:13.5px; color:var(--cinza-700); line-height:1.55; }
.pt-no .ponto-ic { background:var(--vermelho-100); color:var(--vermelho); }
.pt-no .ponto-tit { color:var(--vermelho); }
.pt-ok .ponto-ic { background:var(--verde-100); color:var(--verde-600); }
.pt-ok .ponto-tit { color:var(--verde-600); }
.pt-rv .ponto-ic { background:var(--azul-100); color:var(--azul-700); }
.pt-rv .ponto-tit { color:var(--azul-700); }
.pt-sd .ponto-ic { background:var(--cinza-100); color:var(--cinza-500); }
.pt-sd .ponto-tit { color:var(--cinza-500); }

/* desdobramento DIPRO > Superintendência > GRS > distrito, no topo do Painel Geral */
.uh-trilha { display:flex; align-items:center; flex-wrap:wrap; gap:3px; width:100%; margin-top:14px; }
.uht-item { display:inline-flex; flex-direction:column; gap:1px; text-align:left; font-family:inherit;
  background:none; border:none; padding:4px 9px; border-radius:8px; cursor:pointer; }
.uht-item .uht-niv { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--cinza-400); }
.uht-item .uht-nome { font-size:13px; font-weight:700; color:var(--azul-600); }
button.uht-item:hover { background:var(--azul-100); }
button.uht-item:hover .uht-nome { color:var(--azul-700); }
.uht-item.is-cur { cursor:default; background:var(--azul-050); }
.uht-item.is-cur .uht-nome { color:var(--cinza-900); }
.uht-item.is-cur .uht-niv { color:var(--cinza-500); }
.uht-sep { color:var(--cinza-300); display:inline-flex; }

/* ---- AVTO ---- */
.avto-res .sisres-row.avto-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
.avto-emp { font-size:13px; color:var(--cinza-700); line-height:1.4; }

/* AVTO futura: faixa no card do Painel Geral + cartão de destaque na lista */
.avto-fut { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--cinza-200); cursor:pointer; }
.avto-fut:hover .af-esq b { color:var(--azul-700); }
.af-esq { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--cinza-600); min-width:0; }
.af-ic { display:inline-flex; width:26px; height:26px; border-radius:8px; flex:none; align-items:center;
  justify-content:center; background:rgba(232,167,26,.16); color:var(--amarelo); }
.af-esq b { font-size:17px; font-weight:800; color:var(--azul-800); margin-right:2px; }
.af-esq span { display:block; font-size:11.5px; color:var(--cinza-400); }
.af-dir { display:flex; gap:16px; flex-wrap:wrap; }
.af-kv { display:flex; flex-direction:column; align-items:flex-end; }
.af-kv i { font-style:normal; font-size:10.5px; color:var(--cinza-400); text-transform:uppercase; letter-spacing:.3px; }
.af-kv b { font-size:14px; font-weight:800; color:var(--cinza-900); font-variant-numeric:tabular-nums; }
.af-vaz b { color:var(--amarelo); }
.avto-futcard { padding:var(--card-pad-y) var(--card-pad-x); cursor:pointer; margin-bottom:4px; border-top:3px solid var(--amarelo); }
.avto-futcard:hover { box-shadow:0 2px 6px rgba(16,42,67,.10),0 10px 26px rgba(16,42,67,.10); }

/* obras vinculadas */
.obra-cab { padding:16px 18px; margin-bottom:14px; }
.obra-tit { font-size:16px; font-weight:800; color:var(--cinza-900); line-height:1.35; margin-bottom:10px; }
.obra-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pill-sis { display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.3px;
  padding:4px 9px; border-radius:999px; }
.ps-saa { background:var(--azul-100); color:var(--azul-700); }
.ps-ses { background:#fbeadb; color:#b5651d; }
.sem-nome { color:var(--cinza-400); font-style:italic; font-size:12.5px; }
.avto-row .sisres-it i { display:block; font-style:normal; font-size:10.5px; color:var(--cinza-400);
  margin-top:2px; font-variant-numeric:tabular-nums; }
.avto-row .avto-neg { background:var(--vermelho-100); }
.avto-row .avto-neg b { color:var(--vermelho); }
.avto-row .avto-neg i { color:var(--vermelho); opacity:.8; }
@media (max-width:620px) { .avto-res .sisres-row.avto-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- Custo Financeiro: memorial nos cards e painel do sistema otimizado ---- */
.cc-mem { margin-top:12px; padding-top:10px; border-top:1px dashed var(--cinza-200);
  display:flex; flex-direction:column; gap:5px; }
.cc-ml { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:12.5px; color:var(--cinza-600); }
.cc-ml b { color:var(--cinza-900); font-weight:700; font-variant-numeric:tabular-nums; }
.cc-mt { border-top:1px solid var(--cinza-100); margin-top:3px; padding-top:6px; font-weight:700; color:var(--cinza-700); }

.otim-card { padding:var(--card-pad-y) var(--card-pad-x); }
.otim-txt { font-size:13.5px; color:var(--cinza-700); line-height:1.6; margin-bottom:10px; }
.otim-txt:last-of-type { margin-bottom:14px; }
.otim-tbl th { text-align:center; }
.otim-tbl th.th-l { text-align:left; }
.otim-tbl td { padding:11px 14px; }
.otim-tbl tr.is-editado { background:var(--azul-050); }
.otim-in { display:inline-flex; align-items:baseline; gap:5px; }
.otim-in input { width:96px; font-family:inherit; font-size:14px; font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--azul-800); padding:7px 9px; border-radius:8px;
  border:1px solid var(--cinza-300); background:#fff; outline:none; }
.otim-in input:focus { border-color:var(--azul-500); box-shadow:0 0 0 3px var(--azul-100); }
.otim-in i { font-style:normal; font-size:12px; color:var(--cinza-500); }
.otim-rst { font-family:inherit; font-size:12.5px; font-weight:600; color:var(--azul-700);
  background:var(--azul-050); border:1px solid var(--cinza-200); border-radius:8px;
  padding:7px 12px; cursor:pointer; white-space:nowrap; }
.otim-rst:hover:not(:disabled) { border-color:var(--azul-400); }
.otim-rst:disabled { opacity:.42; cursor:default; }

/* tabela de custo: cabeçalho em duas linhas e mais respiro nas células */
.tbl-custo th { padding:10px 12px; vertical-align:bottom; }
.tbl-custo .ch-ind { display:block; font-size:11.5px; }
.tbl-custo .ch-tipo { display:block; font-size:10px; font-weight:600; color:var(--cinza-400);
  text-transform:none; letter-spacing:0; margin-top:2px; }
.tbl-custo td { padding:14px 12px; font-variant-numeric:tabular-nums; }
.tbl-custo td.td-ind { padding-left:16px; }
@media (max-width:620px) {
  .otim-tbl td, .otim-tbl th { padding:9px 10px; }
  .otim-in input { width:78px; }
}

/* ---- Rankings de evolução anual (detalhe do indicador) ---- */
.rk-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr)); }
.rk-col { min-width:0; display:flex; flex-direction:column; gap:8px; }
.rk-h { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
  letter-spacing:.2px; text-transform:uppercase; }
.rk-h.up { color:var(--verde-600); }
.rk-h.down { color:var(--vermelho); }
.rk-card { padding:0; overflow:hidden; }
.rk-card.up { border-left:4px solid var(--verde-500); }
.rk-card.down { border-left:4px solid var(--vermelho); }
.rk-card .table-wrap { border:none; border-radius:0; }
table.rk-tbl { min-width:460px; }
.rk-tbl th.th-l { text-align:left; }
.rk-tbl td { padding:9px 10px; cursor:pointer; }
.rk-tbl th { padding-left:10px; padding-right:10px; }
.rk-tbl tr:hover td { background:var(--azul-050); }
.rk-tbl .td-nome { font-weight:650; color:var(--cinza-900); }
.rk-tbl .td-sub { font-size:12px; color:var(--cinza-500); }
.rk-tbl .num, .alerta-tbl .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rk-v { line-height:1.35; }
.rk-bar { display:block; height:4px; border-radius:2px; background:var(--cinza-100); margin-top:4px; }
.rk-bar i { display:block; height:100%; border-radius:2px; background:var(--azul-400); }
.rk-dif { font-weight:700; }
.rk-dif.gan { color:var(--verde-600); }
.rk-dif.per { color:var(--vermelho); }
.rk-dif small { display:block; font-weight:600; opacity:.75; }
.rk-mais { display:block; width:100%; margin-top:10px; font-family:inherit; font-size:13px;
  font-weight:600; color:var(--azul-700); background:var(--azul-050);
  border:1px solid var(--cinza-200); border-radius:var(--radius); padding:10px; cursor:pointer; }
.rk-mais:hover { border-color:var(--azul-400); }

/* ---- Atenção e alerta por unidade ---- */
.alerta-cfg { padding:var(--card-pad-y) var(--card-pad-x); }
.alerta-cfg-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; }
.alerta-cfg-item { display:flex; flex-direction:column; gap:5px; min-width:0; }
.alerta-cfg-item > span:first-child { font-size:11.5px; font-weight:600; color:var(--cinza-500);
  text-transform:uppercase; letter-spacing:.3px; }
.alerta-cfg-item.is-editado .otim-in input { border-color:var(--azul-500); background:var(--azul-050); }
.alerta-chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.alerta-chip { display:inline-flex; align-items:baseline; gap:6px; font-size:12.5px; font-weight:600;
  padding:6px 11px; border-radius:999px; border:1px solid var(--cinza-200); color:var(--cinza-600); }
.alerta-chip b { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.alerta-chip.alerta_max { background:var(--vermelho-100); border-color:#f2c6c4; color:#9b2f2c; }
.alerta-chip.alerta { background:#fdf3f2; border-color:#f3d4d2; color:var(--vermelho); }
.alerta-chip.atencao { background:#fdf6e6; border-color:#f0dfb4; color:#9a6c07; }
.alerta-chip.ok { background:var(--verde-100); border-color:#c6ecdc; color:var(--verde-600); }
.alerta-tbl th.th-l { text-align:left; }
.alerta-tbl th small { display:block; font-size:10px; font-weight:600;
  color:var(--cinza-400); text-transform:none; letter-spacing:0; }
.alerta-tbl td { padding:11px 13px; cursor:pointer; }
.alerta-tbl tr:hover td { background:var(--azul-050); }
.alerta-tbl .td-nome { font-weight:650; }
.alerta-tbl .td-sub { font-size:12.5px; color:var(--cinza-500); white-space:nowrap; }
.alerta-tbl tr.al-alerta_max td:first-child { box-shadow:inset 4px 0 0 var(--vermelho); }
.alerta-tbl tr.al-alerta td:first-child { box-shadow:inset 4px 0 0 #ef8f8c; }
.alerta-tbl tr.al-atencao td:first-child { box-shadow:inset 4px 0 0 var(--amarelo); }
.alerta-pill { display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px;
  border-radius:999px; white-space:nowrap; }
.alerta-pill.alerta_max { background:var(--vermelho); color:#fff; }
.alerta-pill.alerta { background:var(--vermelho-100); color:var(--vermelho); }
.alerta-pill.atencao { background:#fdf6e6; color:#9a6c07; }
.alerta-motivo { display:block; margin-top:4px; font-size:11.5px; color:var(--cinza-500); }
.td-sub-m { display:none; }
/* Em tela estreita as colunas de GRS e Superintendência viram uma linha discreta
   sob o nome do distrito, para que os resultados caibam sem rolar a tabela. */
@media (max-width:620px) {
  table.rk-tbl td, table.alerta-tbl td, table.rk-tbl th, table.alerta-tbl th { padding-left:7px; padding-right:7px; }
  table.rk-tbl td, table.alerta-tbl td { padding-top:9px; padding-bottom:9px; }
  .rk-tbl .rk-dif, .alerta-tbl .rk-dif { font-size:13px; }
  table.rk-tbl th, table.alerta-tbl th { font-size:10px; letter-spacing:0; }
  .alerta-cfg-row { gap:10px; }
  .alerta-cfg-item { flex:1 1 140px; }
  table.rk-tbl, table.alerta-tbl { min-width:0; }
  .rk-tbl th:nth-child(2), .rk-tbl th:nth-child(3),
  .rk-tbl td:nth-child(2), .rk-tbl td:nth-child(3),
  .alerta-tbl th:nth-child(2), .alerta-tbl th:nth-child(3),
  .alerta-tbl td:nth-child(2), .alerta-tbl td:nth-child(3) { display:none; }
  .td-sub-m { display:block; margin-top:2px; font-size:11.5px; font-weight:500;
    color:var(--cinza-500); }
}

/* ---- Sistemas: mapa, legenda, cards e listas ---- */
.mapa-card { padding:0; overflow:hidden; }
.sis-mapwrap { position:relative; }
/* Busca de sistema no mapa (barra acima da malha) */
.sis-busca { position:relative; display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--cinza-200); background:var(--azul-050); }
.sis-busca-ic { display:inline-flex; color:var(--cinza-400); flex:none; }
.sis-busca-in { flex:1; min-width:0; font-family:inherit; font-size:14px; color:var(--cinza-900);
  border:none; background:none; outline:none; padding:4px 0; }
.sis-busca-in::placeholder { color:var(--cinza-400); }
.sis-busca-x { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px; border:1px solid var(--cinza-200);
  background:#fff; color:var(--cinza-500); cursor:pointer; }
.sis-busca-x:hover { border-color:var(--azul-400); color:var(--azul-700); }
.sis-busca-pop { position:absolute; left:10px; right:10px; top:100%; z-index:6;
  max-height:340px; overflow-y:auto; background:#fff; border:1px solid var(--cinza-200);
  border-radius:12px; box-shadow:var(--shadow); padding:6px; }
.sis-busca-it { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:2px 9px;
  width:100%; text-align:left; font-family:inherit; border:none; background:none;
  border-radius:8px; padding:8px 10px; cursor:pointer; }
.sis-busca-it .sis-dot { grid-row:1 / span 2; align-self:center; }
.sis-busca-it.is-hi, .sis-busca-it:hover { background:var(--azul-050); }
.sbi-nome { font-size:13.5px; font-weight:650; color:var(--cinza-900); }
.sbi-sub { font-size:11.5px; color:var(--cinza-500); grid-column:2; }
.sis-busca-vazio { padding:10px 12px; font-size:12.5px; color:var(--cinza-500); }
/* anel que marca o elemento achado pela busca */
.sis-anel-pulsa { animation:sisAnel 1.1s ease-out 2; }
@keyframes sisAnel { 0% { opacity:0; } 35% { opacity:1; } 100% { opacity:.55; } }

.sis-svg { display:block; width:100%; background:linear-gradient(180deg,#fbfdfe,#f4f8fb); }
.sis-svg { touch-action:none; cursor:grab; }          /* pinça/arrasto tratados no JS */
.sis-mapwrap.is-drag .sis-svg { cursor:grabbing; }
.sis-zoom { position:absolute; right:10px; top:10px; z-index:4; display:flex; flex-direction:column; gap:4px; }
.sis-zb { width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font:700 16px/1 var(--font); color:var(--azul-700); background:rgba(255,255,255,.94);
  border:1px solid var(--cinza-200); border-radius:8px; cursor:pointer; box-shadow:var(--shadow-sm); }
.sis-zb:hover { border-color:var(--azul-400); background:#fff; }
.sis-zb svg { width:14px; height:14px; }
.sis-dica { position:absolute; left:10px; bottom:8px; z-index:4; font-size:11px; color:var(--cinza-500);
  background:rgba(255,255,255,.82); border-radius:6px; padding:2px 7px; pointer-events:none; }
.sis-mapwrap.is-zoom .sis-dica { display:none; }
@media (max-width:620px) { .sis-dica { display:none; } }
.sis-tip { position:absolute; z-index:5; pointer-events:none; background:var(--cinza-900); color:#fff;
  font-size:12px; line-height:1.4; padding:7px 10px; border-radius:8px; box-shadow:var(--shadow);
  max-width:240px; }
.sis-tip i { font-style:italic; opacity:.8; }
.sis-leg { display:flex; flex-wrap:wrap; gap:8px 16px; margin:10px 2px 4px; }
.sis-leg-it { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--cinza-600); }
.sis-leg-it i { width:11px; height:11px; border-radius:50%; display:inline-block; flex:none; }
.sis-leg-off i { background:transparent; border:2px solid var(--cinza-400); }

.sis-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
@media (min-width:1180px) { .sis-grid { grid-template-columns:repeat(5,1fr); } }
.sis-card { padding:var(--card-pad-y) var(--card-pad-x); cursor:pointer; border-top:3px solid var(--sis-cor,var(--azul-600));
  transition:transform .12s ease, box-shadow .12s ease; }
.sis-card:hover { transform:translateY(-2px); box-shadow:0 2px 6px rgba(16,42,67,.10),0 10px 26px rgba(16,42,67,.10); }
.sis-head { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.sis-ic { width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--sis-cor-bg,var(--cinza-100)); color:var(--sis-cor,var(--azul-600)); flex:none; }
.sis-ic svg { width:17px; height:17px; }
.sis-tit { font-size:13.5px; font-weight:700; color:var(--cinza-900); flex:1; min-width:0; }
.sis-chev { color:var(--cinza-400); flex:none; }
.sis-card:hover .sis-chev { color:var(--sis-cor,var(--azul-600)); }
.sis-num { display:flex; align-items:baseline; gap:7px; margin-bottom:12px; }
.sis-num b { font-size:30px; font-weight:800; color:var(--sis-cor,var(--azul-600)); font-variant-numeric:tabular-nums; line-height:1; }
.sis-num span { font-size:12px; color:var(--cinza-500); line-height:1.35; }
.sis-linhas { display:flex; flex-direction:column; gap:6px; border-top:1px dashed var(--cinza-200); padding-top:10px; }
.sis-l { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12.5px; color:var(--cinza-600); }
.sis-l b { color:var(--cinza-900); font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.sis-dot { width:9px; height:9px; border-radius:50%; display:inline-block; border:2px solid var(--cinza-400); flex:none; }

/* cabeçalho que classifica (clique) e filtra (funil) — lista de sistemas */
table.grid-tbl.sis-tbl { min-width:860px; }   /* no celular a tabela rola dentro do card */
.sis-tbl th.th-sis { padding:6px 8px; white-space:normal; }
.sis-tbl th.th-sis { position:relative; }
.th-sis .th-ord { display:inline-flex; align-items:center; gap:4px; font:inherit; color:inherit;
  background:none; border:none; padding:6px; cursor:pointer; text-align:left; border-radius:6px;
  max-width:calc(100% - 26px); vertical-align:middle; }
.th-sis .th-ord:hover { color:var(--azul-700); background:var(--azul-100); }
.th-sis .th-lb { overflow:hidden; text-overflow:ellipsis; }
.th-sis .th-arrow { font-size:9px; color:var(--azul-600); flex:none; }
.th-sis .th-fx { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border:none; background:none; border-radius:6px; color:var(--cinza-400); cursor:pointer; vertical-align:middle; }
.th-sis .th-fx:hover { background:var(--azul-100); color:var(--azul-700); }
.th-sis.is-ord .th-ord { color:var(--azul-700); }
.th-sis.is-filtrada .th-fx { color:var(--azul-600); background:var(--azul-100); }
.th-sis.is-filtrada .th-fx svg { fill:currentColor; }
table.tbl-center th.th-sis, .sis-tbl th.th-sis { text-align:left; }

/* popover de filtro da coluna (vai no body, position:fixed) */
.th-pop { position:fixed; z-index:60; width:270px; background:#fff; border:1px solid var(--cinza-200);
  border-radius:var(--radius-sm); box-shadow:0 4px 12px rgba(16,42,67,.14),0 16px 40px rgba(16,42,67,.14);
  text-transform:none; letter-spacing:0; font-weight:400; color:var(--cinza-900); }
.th-pop-top { padding:10px 10px 8px; border-bottom:1px solid var(--cinza-100); }
.th-pop-busca { width:100%; box-sizing:border-box; font-family:inherit; font-size:13px; padding:7px 10px;
  border:1px solid var(--cinza-200); border-radius:8px; outline:none; color:var(--cinza-900); }
.th-pop-busca:focus { border-color:var(--azul-400); }
.th-pop-acoes { display:flex; gap:6px; margin-top:8px; }
.th-pop-acoes button { flex:1; font-family:inherit; font-size:12px; font-weight:600; color:var(--azul-700);
  background:var(--azul-050); border:1px solid var(--cinza-200); border-radius:7px; padding:5px 8px; cursor:pointer; }
.th-pop-acoes button:hover { border-color:var(--azul-400); }
.th-pop-lista { max-height:230px; overflow-y:auto; padding:6px; }
.th-pop-it { display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:6px; cursor:pointer;
  font-size:13px; color:var(--cinza-700); }
.th-pop-it:hover { background:var(--azul-050); }
.th-pop-it input { flex:none; accent-color:var(--azul-600); cursor:pointer; }
.th-pop-v { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.th-pop-v i { color:var(--cinza-400); }
.th-pop-n { flex:none; font-size:11.5px; color:var(--cinza-400); font-variant-numeric:tabular-nums; }
.th-pop-vazio { padding:10px 8px; font-size:12.5px; color:var(--cinza-500); }
.th-pop-foot { display:flex; gap:8px; padding:9px 10px; border-top:1px solid var(--cinza-100); }
.th-pop-foot button { font-family:inherit; font-size:12.5px; font-weight:700; border-radius:8px;
  padding:7px 12px; cursor:pointer; border:1px solid transparent; }
.th-pop-ok { flex:1; background:var(--azul-600); color:#fff; }
.th-pop-ok:hover { background:var(--azul-700); }
.th-pop-cancel { background:#fff; color:var(--cinza-600); border-color:var(--cinza-200); }
.th-pop-cancel:hover { border-color:var(--cinza-400); }
/* telas estreitas: o filtro vira um painel centralizado, com fundo escurecido */
.th-scrim { position:fixed; inset:0; background:rgba(11,58,91,.34); z-index:59; }
.th-pop-folha { width:340px; max-width:calc(100vw - 24px); }
.th-pop-folha .th-pop-lista { max-height:44vh; }

.sis-limpar { font-family:inherit; font-size:12px; font-weight:700; color:var(--azul-700);
  background:var(--azul-050); border:1px solid var(--cinza-200); border-radius:999px; padding:5px 12px;
  cursor:pointer; flex:none; }
.sis-limpar:hover { border-color:var(--azul-400); }
.sis-limpar[hidden] { display:none; }

/* busca + paginação da lista de elementos */
.sis-busca { display:flex; align-items:center; gap:8px; background:var(--branco); border:1px solid var(--cinza-200);
  border-radius:var(--radius-sm); padding:0 12px; margin:0 0 12px; box-shadow:var(--shadow-sm); }
.sis-busca-ic { display:inline-flex; color:var(--cinza-400); flex:none; }
.sis-busca-in { flex:1; min-width:0; border:none; outline:none; background:none; font-family:inherit;
  font-size:13.5px; color:var(--cinza-900); padding:10px 0; }
.sis-busca-n { font-size:12px; color:var(--cinza-500); font-variant-numeric:tabular-nums; flex:none; }
.sis-mais { display:flex; justify-content:center; margin-top:12px; }
.sis-mais-btn { font-family:inherit; font-size:13px; font-weight:600; color:var(--azul-600); background:var(--branco);
  border:1px solid var(--cinza-200); border-radius:999px; padding:9px 18px; cursor:pointer; box-shadow:var(--shadow-sm); }
.sis-mais-btn:hover { background:var(--azul-050); border-color:var(--azul-400); }

.sis-trilha { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin:-4px 0 14px; }
.sis-crumb { font-size:12.5px; color:var(--azul-600); background:none; border:none; padding:2px 4px; cursor:pointer;
  border-radius:6px; font-family:inherit; }
.sis-crumb:hover { background:var(--azul-100); }
.sis-crumb.is-cur { color:var(--cinza-600); font-weight:700; cursor:default; }
.sis-sep { color:var(--cinza-400); display:inline-flex; }
.sis-on { color:var(--verde-600); }
.sis-off { color:var(--cinza-500); }

/* card-resumo de sistemas no Painel Geral do distrito */
.sisres-card { padding:var(--card-pad-y) var(--card-pad-x); cursor:pointer; display:flex; flex-direction:column; }
.sisres-card:hover { box-shadow:0 2px 6px rgba(16,42,67,.10),0 10px 26px rgba(16,42,67,.10); }
.sisres-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.sisres-it { text-align:center; border-radius:10px; padding:9px 4px; background:var(--cinza-100); }
.sisres-it .sisres-ic { display:inline-flex; color:var(--sis-c,var(--azul-600)); }
.sisres-it .sisres-ic svg { width:16px; height:16px; }
.sisres-it b { display:block; font-size:19px; font-weight:800; color:var(--cinza-900); font-variant-numeric:tabular-nums; line-height:1.15; }
.sisres-it span { display:block; font-size:10.5px; color:var(--cinza-500); line-height:1.25;
  overflow-wrap:anywhere; }
.sisres-bh { display:flex; flex-direction:column; gap:9px; flex:1; justify-content:center; }
.sisres-bhv { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.sisres-bhv b { font-size:24px; font-weight:800; color:var(--azul-700); font-variant-numeric:tabular-nums; line-height:1.1; }
.sisres-bhv span { font-size:12.5px; color:var(--cinza-500); }
.sisres-bar { display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--vermelho); }
.sisres-bar i { display:block; height:100%; }
.sisres-bar i.ok { background:var(--verde-500); }
.sisres-bhleg { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--cinza-600); }
.sisres-bhleg i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px; }
.sisres-bhleg i.ok { background:var(--verde-500); }
.sisres-bhleg i.no { background:var(--vermelho); }
.sisres-bhleg b { color:var(--cinza-900); font-variant-numeric:tabular-nums; }
.sisres-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 10px; font-size:12.5px; color:var(--cinza-600);
  border-top:1px dashed var(--cinza-200); margin-top:auto; padding-top:12px; }
.sisres-foot b { color:var(--cinza-900); font-variant-numeric:tabular-nums; }
@media (max-width:620px) {
  .sisres-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---- Sobre: tabela de fonte dos dados por indicador ---- */
.fonte-tbl .fonte-cell { font-size:12.5px; color:var(--cinza-700); line-height:1.5; padding-top:10px; padding-bottom:10px; }

/* mini estatística no detalhe */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:4px; }
.stat { background:var(--azul-050); border-radius:10px; padding:12px; text-align:center; }
.stat .s-val { font-size:20px; font-weight:800; color:var(--azul-900); }
.stat .s-lab { font-size:11px; color:var(--cinza-500); margin-top:2px; }

/* ------------------------- ÁRVORE DE UNIDADES ------------------------- */
.tree { display:flex; flex-direction:column; gap:4px; }
.tree-node { }
.tree-row { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px;
  cursor:pointer; transition:.12s; border:1px solid transparent; }
.tree-row:hover { background:var(--azul-050); border-color:var(--cinza-200); }
.tree-row.is-sel { background:var(--azul-100); border-color:var(--azul-500); }
.tw-toggle { width:18px; text-align:center; color:var(--cinza-500); font-size:11px; user-select:none; }
.tw-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.3px; }
.tw-badge.op { background:#e4f2ff; color:var(--azul-700); }
.tw-badge.ap { background:#efeaff; color:#6a4bbd; }
.tw-badge.di { background:var(--azul-900); color:#fff; }
.tw-name { font-size:14px; font-weight:600; }
.tw-sub { font-size:12px; color:var(--cinza-500); }
.tree-children { margin-left:18px; padding-left:12px; border-left:1.5px solid var(--cinza-200); margin-top:2px; }

.chips { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 6px; }
.chip { font-size:12.5px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--cinza-300);
  color:var(--cinza-700); font-weight:600; cursor:pointer; transition:.12s; }
.chip:hover { border-color:var(--azul-500); }
.chip.is-active { background:var(--azul-600); border-color:var(--azul-600); color:#fff; }

.empty { padding:40px; text-align:center; color:var(--cinza-500); font-size:14px; }

/* ------------------------- BANNER DE ALERTA (fora da meta) — compacto ------------------------- */
.alert-banner { background:var(--vermelho-100); border:1px solid #f2c4c2; border-left:4px solid var(--vermelho);
  border-radius:10px; padding:9px 14px; margin-bottom:18px; display:inline-flex; align-items:center;
  gap:9px; flex-wrap:wrap; max-width:100%; }
.alert-banner .ab-ic { display:inline-flex; color:var(--vermelho); }
.alert-banner .ab-ic .icn { width:18px; height:18px; }
.alert-banner strong { color:var(--vermelho); font-size:13.5px; }
.ab-chip { font-size:12.5px; padding:4px 11px; border-radius:999px; background:#fff;
  border:1px solid #f0bfbd; color:var(--vermelho); font-weight:600; cursor:pointer; transition:.12s; }
.ab-chip:hover { background:var(--vermelho); color:#fff; }

/* KPI tone */
.kpi-tile.tone-no { border-color:#f2c4c2; background:linear-gradient(180deg,var(--vermelho-100),#fff); }
.kpi-tile.tone-no .kpi-value { color:var(--vermelho); }
.kpi-tile.tone-ok .kpi-value { color:var(--verde-600); }

/* ------------------------- TABELA: célula de indicador ------------------------- */
.td-ind { display:flex; align-items:center; gap:9px; text-align:left; }
.td-ind .ic-badge.sm { display:inline-grid; flex-shrink:0; }
.td-ind-name { font-weight:700; color:var(--azul-900); line-height:1.25; }

/* ------------------------- DESTAQUE FORA DA META ------------------------- */
.ind-card.is-off { border-color:#f0bfbd; border-left:4px solid var(--vermelho);
  background:linear-gradient(180deg,#fdf1f0,#fff); }
.ind-card.is-off:hover { border-color:var(--vermelho); box-shadow:0 6px 22px rgba(217,83,79,.16); }
.ind-card.is-ok { border-left:4px solid var(--verde-500); }
table.grid-tbl tr.row-off td { background:#fdf3f2; }
table.grid-tbl tr.row-off td:first-child { box-shadow:inset 3px 0 0 var(--vermelho); }
.stat.off { background:var(--vermelho-100); }
.stat.off .s-val { color:var(--vermelho); }
.detail-head.off { border-left:5px solid var(--vermelho); padding-left:14px; border-radius:8px; }

/* pills extra */
.pill.rv { background:#eef1f4; color:var(--cinza-500); }
.pill.sd { background:#eef1f4; color:var(--cinza-500); }

/* ------------------------- ATIVIDADES / MISC ------------------------- */
.hint { font-size:13px; color:var(--cinza-500); margin:-4px 0 12px; max-width:760px; }
.ph-tag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  background:#fff4d6; color:#a5760a; padding:2px 7px; border-radius:6px; border:1px solid #f0dca0; }
.btn-primary { margin-top:16px; width:100%; padding:11px; border-radius:10px; background:var(--azul-600);
  color:#fff; font-weight:600; font-size:14px; transition:.15s; }
.btn-primary:hover { background:var(--azul-700); }
.unidades-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start; }
code { background:var(--cinza-100); padding:1px 6px; border-radius:5px; font-size:12.5px; color:var(--azul-700); }

/* ------------------------- ESG AMBIENTAL ------------------------- */
.esg-card { padding:var(--card-pad-y) var(--card-pad-x); display:flex; flex-direction:column; gap:12px; }
.esg-card .ic-row { display:flex; align-items:center; gap:11px; }
.esg-card .ic-titles { display:flex; flex-direction:column; flex:1; min-width:0; }
.esg-card .ic-name { font-size:15px; font-weight:700; color:var(--azul-900); line-height:1.25; }
.esg-card .ic-dim { font-size:11.5px; color:var(--cinza-500); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.esg-card .esg-desc { font-size:13.5px; color:var(--cinza-700); line-height:1.55; }
.esg-card .esg-foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--cinza-100); padding-top:11px; font-size:12.5px; color:var(--cinza-500); }
.esg-card .esg-foot span { display:inline-flex; align-items:center; gap:6px; }
.link-btn { color:var(--azul-600); font-weight:600; font-size:12.5px; }
.link-btn:hover { text-decoration:underline; }
.ods-row { display:flex; gap:10px; flex-wrap:wrap; }
.ods-badge { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  color:var(--verde-600); background:var(--verde-100); padding:8px 14px; border-radius:10px; }

/* ------------------------- ORÇAMENTO ------------------------- */
.orc-row { padding:14px 0; border-bottom:1px solid var(--cinza-100); }
.orc-row:last-of-type { border-bottom:none; }
.orc-head { display:flex; align-items:center; gap:10px; margin-bottom:9px; flex-wrap:wrap; }
.orc-head b { font-size:15px; color:var(--azul-900); }
.orc-nome { font-size:12.5px; color:var(--cinza-500); flex:1; min-width:120px; }
.orc-pct { font-size:15px; font-weight:800; padding:2px 10px; border-radius:8px; }
.orc-pct.ok { background:var(--verde-100); color:var(--verde-600); }
.orc-pct.warn { background:#fdf2dc; color:var(--amarelo); }
.orc-pct.crit { background:var(--vermelho-100); color:var(--vermelho); }
.orc-bar { position:relative; height:12px; background:var(--cinza-200); border-radius:7px; overflow:visible; }
.orc-bar > i { display:block; height:100%; border-radius:7px; }
.orc-param { position:absolute; top:-4px; bottom:-4px; width:0; border-left:2px dashed var(--cinza-700); z-index:2; }
.orc-obs { font-size:12.5px; color:var(--cinza-500); margin-top:8px; line-height:1.5; }

/* ------------------------- PLANOS DE AÇÃO ------------------------- */
.stack-bar { display:flex; height:26px; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-sm); }
.stack-bar > div { height:100%; transition:.2s; }
.planos-leg { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; }
.planos-leg .leg { font-size:13px; color:var(--cinza-700); }
.planos-leg .leg-val { color:var(--cinza-500); font-weight:700; margin-left:6px; }
.obj-card { padding:var(--card-pad-y) var(--card-pad-x); }
.obj-head { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.obj-num { width:28px; height:28px; border-radius:8px; background:var(--azul-600); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:14px; flex-shrink:0; }
.obj-title { font-size:14.5px; font-weight:700; color:var(--azul-900); line-height:1.25; }
.obj-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.obj-list li { display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--cinza-700); line-height:1.45; }
.obj-list li .icn { color:var(--azul-500); margin-top:1px; flex-shrink:0; }

/* ---- Planos de Ação: cards com ações detalhadas ---- */
.plano-card { padding:var(--card-pad-y) var(--card-pad-x); margin-bottom:16px; }
.plano-head { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--cinza-100); }
.plano-tit { display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:800; color:var(--azul-900); line-height:1.25; min-width:0; }
.plano-meta { display:flex; flex-wrap:wrap; gap:6px; }
.tag-alert { background:#fdeaea; color:var(--vermelho); }
.plano-tbl th, .plano-tbl td { font-size:13px; }
.plano-acao { font-weight:600; color:var(--azul-900); line-height:1.4; min-width:260px; }
.plano-info { border:none; background:none; cursor:pointer; color:var(--azul-500); vertical-align:middle; padding:0 2px; }
.plano-info:hover { color:var(--azul-700); }
.repro { color:#b6820f; cursor:help; font-weight:800; }
.plano-coment { font-size:13.5px; color:var(--cinza-700); line-height:1.55; max-height:60vh; overflow:auto; white-space:normal; }
.plano-repro { margin-top:12px; padding-top:12px; border-top:1px dashed var(--cinza-200); font-size:13px; color:var(--cinza-600); }

/* Dropdown de indicador no título do detalhe */
.ind-dd { position:relative; display:inline-block; }
.ind-dd-btn { display:inline-flex; align-items:center; gap:8px; font-size:23px; font-weight:800;
  color:var(--azul-900); letter-spacing:-.3px; line-height:1.2; cursor:pointer; text-align:left; }
.ind-dd-btn .icn { width:20px; height:20px; opacity:.6; transition:transform .15s; margin-top:3px; }
.ind-dd-btn:hover { color:var(--azul-700); }
.ind-dd-pop { position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:300px; max-width:92vw;
  background:#fff; border:1px solid var(--cinza-200); border-radius:12px; box-shadow:var(--shadow); padding:7px; }
.ind-dd-pop[hidden] { display:none; }
.ind-dd-item { display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; border-radius:8px;
  font-size:14px; font-weight:600; color:var(--cinza-700); text-align:left; cursor:pointer; }
.ind-dd-item:hover { background:var(--azul-050); color:var(--azul-700); }
.ind-dd-item.is-cur { background:var(--azul-100); color:var(--azul-900); }
.ind-dd-item .icn { width:17px; height:17px; flex-shrink:0; }

/* Cabeçalho do painel com referência Mês/ano em destaque */
.dash-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ref-badge { display:inline-flex; align-items:center; gap:7px; background:var(--azul-600); color:#fff;
  font-size:15px; font-weight:800; padding:8px 16px; border-radius:10px; box-shadow:var(--shadow-sm); white-space:nowrap; }
.ref-badge .icn { width:16px; height:16px; }

/* Cabeçalho do painel com o NOME DA UNIDADE em destaque + ações */
.unit-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.uh-eyebrow { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--cinza-500); }
.uh-name { font-size:34px; font-weight:900; letter-spacing:-1px; color:var(--azul-900); line-height:1.05; margin-top:2px; }
.uh-sub { display:block; font-size:14px; color:var(--cinza-500); margin-top:3px; }
.uh-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn-report { display:inline-flex; align-items:center; gap:7px; background:var(--verde-600); color:#fff;
  font-size:13.5px; font-weight:700; padding:9px 15px; border-radius:10px; cursor:pointer; transition:.15s; box-shadow:var(--shadow-sm); }
.btn-report:hover { background:var(--verde-500); }
.btn-report .icn { width:16px; height:16px; }

/* Dados da unidade: cards (Água / Esgoto / Comercial) */
.op-grid2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); margin-bottom:4px; }
.op-grid3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-bottom:4px; }
.opc { padding:16px 18px; }
.opc-head { display:flex; align-items:center; gap:11px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--cinza-100); }
.opc-ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; }
.opc-ic .icn { width:22px; height:22px; }
.opc-tit { font-size:17px; font-weight:800; }
.opc-agua .opc-ic { background:var(--azul-100); color:var(--azul-600); }
.opc-agua .opc-tit { color:var(--azul-700); }
.opc-agua { border-top:3px solid var(--azul-500); }
.opc-esgoto .opc-ic { background:#f6e7d6; color:#b5651d; }
.opc-esgoto .opc-tit { color:#a4571a; }
.opc-esgoto { border-top:3px solid #c9812f; }
.opc-comercial .opc-ic { background:var(--verde-100,#e3f3ea); color:var(--verde-600); }
.opc-comercial .opc-tit { color:var(--verde-700,#1c7a4d); }
.opc-comercial { border-top:3px solid var(--verde-500); }
.opc-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--cinza-100); border-radius:6px; }
.opc-row:last-child { border-bottom:none; }
.opc-clk { cursor:pointer; margin:0 -8px; padding-left:8px; padding-right:8px; transition:background .12s; }
.opc-clk:hover, .opc-clk:focus-visible { background:var(--cinza-50,#f4f7fa); outline:none; }
.opc-clk:hover .opc-l { color:var(--azul-700); }
.opc-l { font-size:13px; color:var(--cinza-500); font-weight:600; }
.opc-v { font-size:15.5px; font-weight:800; color:var(--azul-900); font-variant-numeric:tabular-nums; text-align:right; }
.op-deltas { display:block; margin-top:2px; font-size:11px; font-weight:600; }
.op-delta { display:inline-block; margin-left:8px; }
.op-delta.up { color:var(--verde-600); }
.op-delta.down { color:var(--vermelho); }

/* ---- Custo financeiro: cards consolidados ---- */
.custo-card { padding:var(--card-pad-y) var(--card-pad-x); border-top:3px solid var(--cinza-300); }
.custo-card.cc-red { border-top-color:var(--vermelho); }
.custo-card.cc-amber { border-top-color:var(--amarelo,#e0a41b); }
.custo-card.cc-blue { border-top-color:var(--azul-500); }
.cc-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cc-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--cinza-100); color:var(--cinza-600); flex-shrink:0; }
.cc-red .cc-ic { background:#fdeaea; color:var(--vermelho); }
.cc-amber .cc-ic { background:#fbf1d9; color:#b6820f; }
.cc-blue .cc-ic { background:var(--azul-100); color:var(--azul-600); }
.cc-tit { font-size:14px; font-weight:700; color:var(--cinza-700); }
.cc-val { font-size:27px; font-weight:900; letter-spacing:-1px; color:var(--azul-900); font-variant-numeric:tabular-nums; line-height:1.05; }
.cc-red .cc-val { color:var(--vermelho); }
.cc-sub { margin-top:6px; font-size:12.5px; color:var(--cinza-500); }
.cc-sub b { color:var(--azul-900); }
.cc-pct { font-weight:700; }
/* legenda/critérios */
.custo-leg { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:12px 0 4px; font-size:12.5px; color:var(--cinza-600); }
.custo-leg b { color:var(--azul-800); }
.custo-leg .cl-note { flex-basis:100%; font-size:11.5px; color:var(--cinza-400); }
/* colunas da tabela de custo */
.c-cf { color:var(--vermelho); } .c-po { color:#b6820f; }

/* Card único de resumo (na meta / fora / aderência) — largura só do conteúdo */
.resumo-card { display:inline-flex; align-items:stretch; gap:8px;
  padding:calc(var(--card-pad-y) - 2px) 4px; margin-bottom:4px; }
.resumo-item { display:flex; flex-direction:column; gap:5px; align-items:flex-start;
  padding:2px calc(var(--card-pad-x) - 4px); }
.resumo-v { font-size:28px; font-weight:900; letter-spacing:-1px; line-height:1; color:var(--azul-900); font-variant-numeric:tabular-nums; }
.resumo-v.ok { color:var(--verde-600); } .resumo-v.no { color:var(--vermelho); }
.resumo-l { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--cinza-500); }
.resumo-l .icn { width:14px; height:14px; }
.resumo-sep { width:1px; background:var(--cinza-200); align-self:stretch; }
/* Card único de estatísticas (detalhe do indicador / operacional) */
.stats-card { flex-wrap:wrap; max-width:100%; margin-bottom:16px; }
@media (max-width:640px) {
  /* vale para o card de resumo do Painel Geral e para o de estatísticas: em
     linha única eles não cabem em telas de 320-390px e a página rolava de lado */
  .resumo-card { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
    gap:10px 4px; width:100%; }
  .resumo-card .resumo-sep { display:none; }
  .resumo-card .resumo-v { font-size:23px; }
  .resumo-item { padding:2px 12px; }
  .desemp-topo .resumo-card { width:100%; }
}

/* Dois gráficos lado a lado */
.charts-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
/* Gráfico único (ex.: distrito, sem subunidades): mesma largura de um dos de cima */
.charts-grid.solo { grid-template-columns:minmax(0,560px); }
@media (max-width:1080px) { .charts-grid, .charts-grid.solo { grid-template-columns:minmax(0,1fr); } }

/* Gráfico de unidade única: tooltip de ponto (crosshair) */
.single-chart { position:relative; }
.single-chart svg { display:block; }
.chart-tip { position:absolute; top:6px; transform:translateX(-50%); background:var(--azul-900); color:#fff;
  font-size:11.5px; padding:6px 9px; border-radius:8px; box-shadow:var(--shadow-sm); pointer-events:none;
  white-space:nowrap; z-index:5; }
.chart-tip.flip { transform:translateX(-100%); }
.chart-tip[hidden] { display:none; }
.chart-tip .ct-per { font-weight:800; margin-bottom:3px; }
.chart-tip .ct-row { display:flex; align-items:center; gap:6px; }
.chart-tip .ct-row b { margin-left:auto; padding-left:10px; }
.chart-tip .ct-dot { width:8px; height:8px; border-radius:50%; }

/* Gráfico interativo de unidades subordinadas */
.chart-card .sub-hint { font-size:11.5px; color:var(--cinza-400); font-weight:500; text-transform:none; letter-spacing:0; }
.sub-chart { position:relative; }
.sub-chart svg { display:block; }
.sub-legend { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--cinza-100); }
.sub-leg-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--cinza-600); background:var(--azul-050); border:1px solid transparent;
  padding:4px 9px; border-radius:999px; cursor:pointer; transition:.12s; }
.sub-leg-chip i { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.sub-leg-chip:hover { border-color:var(--cinza-300); }
.sub-leg-chip.is-sel { background:var(--azul-100); border-color:var(--azul-500); color:var(--azul-900); }
.sub-tip { position:absolute; z-index:30; pointer-events:none; background:var(--azul-900); color:#fff;
  font-size:12px; padding:5px 9px; border-radius:7px; white-space:nowrap; box-shadow:var(--shadow-sm); }
.sub-tip[hidden] { display:none; }
.sub-empty { padding:24px; text-align:center; color:var(--cinza-500); font-size:13px; }

/* ------------------------- TABELAS: fixa, centralizada, ordenável ------------------------- */
.tbl-fixed { table-layout:fixed; }
/* títulos de coluna centralizados em todas as tabelas (scoped em `table` p/ vencer table.grid-tbl th) */
table.tbl-center th { text-align:center; }
table.tbl-center th.th-l { text-align:left; }
table.tbl-center td.num-c, table.tbl-center td.td-c { text-align:center; }
table.tbl-center td.num-c { font-variant-numeric:tabular-nums; font-weight:600; }
table.tbl-center td.td-c { vertical-align:middle; }
.ad-cell > div { justify-content:center; }
.th-sort { cursor:pointer; user-select:none; white-space:nowrap; }
.th-sort:hover { color:var(--azul-700); }
.th-arrow { font-size:10px; color:var(--azul-600); margin-left:2px; }

/* barra: botões expandir/recolher por nível + rótulo do nível */
.tree-wrap { display:flex; flex-direction:column; gap:8px; }
.tree-bar { display:flex; align-items:center; gap:8px; }
.tree-exp-btn { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  color:var(--azul-700); background:var(--azul-050); border:1px solid var(--cinza-200); border-radius:8px;
  padding:6px 12px; cursor:pointer; transition:.12s; }
.tree-exp-btn:hover:not(:disabled) { border-color:var(--azul-500); }
.tree-exp-btn:disabled { opacity:.4; cursor:default; }
.tree-exp-btn .icn { width:14px; height:14px; }
.tree-exp-btn .icn.rot180 { transform:rotate(180deg); }
.tree-level-lbl { font-size:12px; font-weight:700; color:var(--cinza-500); text-transform:uppercase; letter-spacing:.4px; margin-left:2px; }

/* tabela por nível: zebra + 1ª coluna congelada; células numéricas em uma linha */
.tbl-tree td, .tbl-tree th { padding:11px 9px; }
.tbl-tree tbody tr td { border-bottom:1px solid var(--cinza-100); }
.tbl-tree tbody tr:nth-child(even) td { background:#f6f9fc; }
.tbl-tree tbody tr.clickable:hover td { background:var(--azul-050); }
.tbl-tree .td-c, .tbl-tree .num-c { white-space:nowrap; }
.tbl-tree .td-unit { text-align:left; font-weight:600; color:var(--azul-900); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.tbl-tree .td-unit-nm { overflow:hidden; text-overflow:ellipsis; }
/* congela a coluna Unidade no scroll horizontal, mantendo a mesma cor da linha (zebra) */
.sticky-first table th:first-child, .sticky-first table td:first-child { position:sticky; left:0; z-index:2; }
.sticky-first table th:first-child { background:var(--azul-050); }
.tbl-tree tbody tr td:first-child { background:#fff; box-shadow:1px 0 0 var(--cinza-100); }
.tbl-tree tbody tr:nth-child(even) td:first-child { background:#f6f9fc; }
.tbl-tree tbody tr.clickable:hover td:first-child { background:var(--azul-050); }

/* ------------------------- BOTTOM NAV / SCRIM ------------------------- */
.bottomnav { display:none; }
.scrim { display:none; }

/* ------------------------- MODAL (configurar relatório) ------------------------- */
.modal-scrim { position:fixed; inset:0; z-index:80; background:rgba(6,20,33,.5); display:flex;
  align-items:center; justify-content:center; padding:20px; }
.modal { background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.25); width:520px;
  max-width:100%; max-height:88vh; overflow-y:auto; padding:20px 22px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; }
.modal-head h2 { font-size:19px; color:var(--azul-900); }
.modal-x { color:var(--cinza-500); display:inline-flex; padding:4px; border-radius:7px; }
.modal-x:hover { background:var(--cinza-100); color:var(--cinza-900); }
.modal-sub { font-size:13px; color:var(--cinza-500); margin:2px 0 14px; }
.cfg-group { margin-bottom:14px; }
.cfg-h { font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--cinza-500); font-weight:700; margin-bottom:7px; }
.cfg-item { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; font-size:14px;
  color:var(--cinza-700); cursor:pointer; }
.cfg-item:hover { background:var(--azul-050); }
.cfg-item input { width:16px; height:16px; accent-color:var(--azul-600); cursor:pointer; }
.cfg-item .ic-badge.sm { width:24px; height:24px; }
.cfg-inds { display:flex; flex-direction:column; gap:2px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.btn-ghost { padding:9px 16px; border-radius:9px; font-weight:600; font-size:13.5px; color:var(--cinza-700);
  background:var(--cinza-100); }
.btn-ghost:hover { background:var(--cinza-200); }
.btn-primary2 { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:9px;
  font-weight:700; font-size:13.5px; color:#fff; background:var(--azul-600); }
.btn-primary2:hover { background:var(--azul-700); }
.btn-primary2 .icn { width:15px; height:15px; }
.btn-primary2:disabled { background:var(--cinza-300); cursor:not-allowed; }
.btn-ghost.sm { padding:6px 11px; font-size:12.5px; }

/* ---- Modal de seleção do mapa ---- */
.mapa-sel { max-width:560px; }
.mapa-tools { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.mapa-search { flex:1; display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--cinza-200); border-radius:9px; background:var(--cinza-050,#f7fafc); }
.mapa-search .icn { width:15px; height:15px; color:var(--cinza-400); }
.mapa-search input { flex:1; border:none; background:none; font-size:13.5px; color:var(--cinza-900); outline:none; }
.mapa-tree { max-height:46vh; overflow:auto; border:1px solid var(--cinza-100); border-radius:10px; padding:4px; }
.mtree-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; font-size:13.5px; color:var(--cinza-800); cursor:pointer; }
.mtree-row.lvl-d { cursor:pointer; }
.mtree-row.lvl-g { color:var(--cinza-700); }
.mtree-row:hover { background:var(--azul-050); }
.mtree-row .mck { width:15px; height:15px; accent-color:var(--azul-600); cursor:pointer; }
.mtree-tog { display:inline-flex; color:var(--cinza-400); transition:transform .15s; }
.mtree-tog .icn { width:13px; height:13px; }
.mtree-row.open .mtree-tog { transform:rotate(180deg); }
.mtree-n { margin-left:auto; font-size:11.5px; color:var(--cinza-400); font-weight:700; }
.mtree-body { margin-left:16px; }
.mtree-grs .mtree-body { margin-left:20px; }
.mapa-count { margin-right:auto; font-size:12.5px; color:var(--cinza-500); font-weight:600; }

/* ---- Folha do mapa ---- */
.mp-legrow { display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:12px; }
.mp-leg { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--cinza-700); }
.mp-leg i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.mp-leg b { font-variant-numeric:tabular-nums; }
.mp-mapwrap { border:1px solid var(--cinza-200); border-radius:10px; overflow:hidden; background:#fbfdfe; }
.mp-svg { display:block; width:100%; height:auto; }
.mp-note { font-size:12px; color:var(--cinza-500); margin-top:8px; }
.mp-list { column-count:3; column-gap:18px; margin-top:6px; }
.mp-listcol { break-inside:avoid; margin-bottom:10px; }
.mp-listcol h4 { font-size:12.5px; color:var(--azul-800); margin-bottom:3px; }
.mp-listcol ul { list-style:none; }
.mp-listcol li { font-size:11.5px; color:var(--cinza-700); line-height:1.45; }
@media (max-width:640px) { .mp-list { column-count:1; } }

/* ---- Configuração + preview do mapa ---- */
.map-layout { display:flex; align-items:flex-start; gap:0; }
.map-cfg { width:290px; flex-shrink:0; position:sticky; top:57px; align-self:flex-start;
  max-height:calc(100vh - 57px); overflow:auto; background:#fff; border-right:1px solid var(--cinza-200); padding:16px 16px 24px; }
.map-preview { flex:1; min-width:0; padding:16px 12px; }
.map-preview .report-page { margin:0 auto; }
.mcfg-sec { font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--cinza-500); font-weight:700; margin:16px 0 8px; }
.mcfg-sec:first-child { margin-top:0; }
.mcfg-row { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--cinza-700); margin-bottom:10px; }
.mcfg-row > span { display:flex; justify-content:space-between; align-items:center; }
.mcfg-row > span b { color:var(--azul-800); font-variant-numeric:tabular-nums; }
.mcfg-row input[type=range] { width:100%; accent-color:var(--azul-600); }
.mcfg-row select { padding:7px 9px; border:1px solid var(--cinza-200); border-radius:8px; font-size:13px; color:var(--cinza-800); background:#fff; }
.mcfg-chk { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--cinza-700); margin-bottom:10px; cursor:pointer; }
.mcfg-chk input { width:15px; height:15px; accent-color:var(--azul-600); cursor:pointer; }
.mcfg-color { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--cinza-700); margin-bottom:7px; }
.mcfg-color input[type=color] { width:32px; height:23px; border:1px solid var(--cinza-200); border-radius:6px; padding:0; background:none; cursor:pointer; flex-shrink:0; }
.mcfg-color em { color:var(--cinza-400); font-style:normal; }
.mcfg-color .mcfg-rm { margin-left:auto; color:var(--cinza-400); display:inline-flex; padding:2px; border-radius:5px; }
.mcfg-color .mcfg-rm:hover { background:var(--cinza-100); color:var(--vermelho); }
.mcfg-hint { display:flex; gap:6px; align-items:flex-start; font-size:11.5px; color:var(--cinza-500); margin:8px 0; }
.mcfg-hint .icn { width:13px; height:13px; margin-top:1px; flex-shrink:0; color:var(--azul-500); }
.mcfg-oh { font-size:11.5px; font-weight:700; color:var(--cinza-500); margin:10px 0 6px; }
/* Agrupamento das cores (segmentado) */
.mcfg-seg { display:flex; gap:0; border:1px solid var(--cinza-200); border-radius:9px;
  overflow:hidden; background:#fff; margin-bottom:4px; }
.mcfg-seg button { flex:1; min-width:0; font-family:inherit; font-size:11.5px; font-weight:600;
  color:var(--cinza-600); background:none; border:none; padding:8px 4px; cursor:pointer;
  border-right:1px solid var(--cinza-200); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcfg-seg button:last-child { border-right:none; }
.mcfg-seg button.is-on { background:var(--azul-600); color:#fff; }
/* Árvore de cores: Superintendência › GRS › Município */
.mcfg-arv { border:1px solid var(--cinza-200); border-radius:10px; padding:4px;
  max-height:320px; overflow-y:auto; background:#fff; margin-bottom:10px; }
.mcfg-arv-row { display:flex; align-items:center; gap:7px; padding:4px 5px; border-radius:7px; }
.mcfg-arv-row:hover { background:var(--azul-050); }
.mcfg-arv-row.is-set { background:var(--azul-050); }
.mcfg-arv-row input[type=color] { width:28px; height:20px; border:1px solid var(--cinza-200);
  border-radius:5px; padding:0; background:none; cursor:pointer; flex:none; }
.mcfg-arv-nome { flex:1; min-width:0; font-size:12.5px; color:var(--cinza-700);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcfg-arv-row.lvl-sup .mcfg-arv-nome { font-weight:700; color:var(--azul-900); font-size:13px; }
.mcfg-arv-row.lvl-grs .mcfg-arv-nome { font-weight:600; }
.mcfg-arv-n { font-size:10.5px; font-weight:700; color:var(--cinza-500);
  background:var(--cinza-100); border-radius:999px; padding:1px 6px; flex:none; }
.mcfg-tog { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:none; background:none; color:var(--cinza-400); cursor:pointer;
  transition:transform .12s ease; }
.mcfg-tog.is-open { transform:rotate(180deg); }
.mcfg-arv-row .mcfg-rm { flex:none; color:var(--cinza-400); display:inline-flex; padding:2px;
  border:none; background:none; border-radius:5px; cursor:pointer; }
.mcfg-arv-row .mcfg-rm:hover { background:var(--cinza-100); color:var(--vermelho); }
.mcfg-arv-filhos { padding-left:16px; border-left:1px solid var(--cinza-100); margin-left:12px; }
@media (max-width:820px) {
  .map-layout { flex-direction:column; }
  .map-cfg { width:auto; position:static; max-height:none; border-right:none; border-bottom:1px solid var(--cinza-200); }
}
@media print {
  .map-layout { display:block; }
  .map-preview { padding:0; }
}

/* ------------------------- RELATÓRIO (folha A4) ------------------------- */
.report-overlay { position:fixed; inset:0; z-index:90; background:#e9edf1; overflow-y:auto; }
.report-bar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 20px; background:#fff; border-bottom:1px solid var(--cinza-200); }
.rb-title { font-size:14px; font-weight:700; color:var(--azul-900); }
.rb-actions { display:flex; gap:10px; }
.report-page { width:210mm; max-width:100%; min-height:297mm; margin:20px auto; background:#fff;
  padding:16mm 15mm; box-shadow:0 4px 24px rgba(0,0,0,.15); color:var(--cinza-900); }
.rp-head { display:flex; align-items:center; gap:16px; border-bottom:2px solid var(--azul-600); padding-bottom:12px; margin-bottom:16px; }
.rp-logo { width:54px; height:54px; }
.rp-titles h1 { font-size:20px; color:var(--azul-900); }
.rp-meta { font-size:12.5px; color:var(--cinza-600); margin-top:4px; }
.rp-sec { font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--azul-700);
  border-bottom:1px solid var(--cinza-200); padding-bottom:5px; margin:18px 0 10px; }
.rp-table { width:100%; border-collapse:collapse; font-size:13px; }
.rp-table th, .rp-table td { padding:7px 10px; border-bottom:1px solid var(--cinza-200); text-align:left; }
.rp-table th { background:var(--azul-050); color:var(--cinza-600); font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
.rp-table .rp-num { text-align:right; font-variant-numeric:tabular-nums; }
.rp-op td:first-child { color:var(--cinza-600); }
.rp-op td.rp-num { font-weight:700; color:var(--azul-900); }
.rp-resumo { display:flex; gap:26px; }
.rp-resumo div { display:flex; flex-direction:column; }
.rp-resumo b { font-size:26px; font-weight:900; color:var(--azul-900); }
.rp-resumo b.ok { color:var(--verde-600); } .rp-resumo b.no { color:var(--vermelho); }
.rp-resumo span { font-size:12px; color:var(--cinza-500); }
.rp-ind { border:1px solid var(--cinza-200); border-radius:10px; padding:12px 14px; margin-bottom:12px; page-break-inside:avoid; }
.rp-ind-head { display:flex; align-items:center; gap:9px; }
.rp-ind-nome { font-size:15px; font-weight:700; color:var(--azul-900); flex:1; }
.rp-ind-nums { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--cinza-600); margin:8px 0 4px; }
.rp-ind-nums b { color:var(--azul-900); }
.rp-ind-nums .rp-dim { margin-left:auto; color:var(--cinza-400); }
.rp-chart { margin-top:6px; }
/* trilha da unidade no cabeçalho do relatório */
.rp-trilha { font-size:11.5px; color:var(--cinza-500); margin-top:5px; }
.rp-trilha b { color:var(--azul-800); font-weight:700; }
.rp-sub { font-size:12.5px; font-weight:700; color:var(--azul-800); margin:12px 0 5px; }
.rp-nota { font-size:11px; color:var(--cinza-500); margin-top:5px; line-height:1.5; }
.rp-resumo { flex-wrap:wrap; row-gap:12px; }
.rp-pontos { list-style:none; margin:0; }
.rp-pontos li { font-size:12px; color:var(--cinza-700); line-height:1.5;
  padding:5px 0 5px 12px; border-left:2px solid var(--cinza-200); margin-bottom:4px;
  page-break-inside:avoid; }
.rp-pontos li b { color:var(--azul-800); }
.rp-listcol { break-inside:avoid; margin-bottom:10px; }
.rp-listcol h4 { font-size:12.5px; color:var(--azul-800); margin-bottom:3px; }
.rp-listcol ul { list-style:none; }
.rp-listcol li { font-size:11.5px; color:var(--cinza-700); line-height:1.5;
  display:flex; justify-content:space-between; gap:10px; }
.rp-listcol li b { color:var(--azul-900); font-variant-numeric:tabular-nums; }
.rp-foot { margin-top:20px; padding-top:10px; border-top:1px solid var(--cinza-200); font-size:11px; color:var(--cinza-400); text-align:center; }

@media print {
  #app { display:none !important; }
  .modal-scrim { display:none !important; }
  .no-print { display:none !important; }
  .report-overlay { position:static; background:#fff; overflow:visible; }
  .report-page { width:auto; min-height:0; margin:0; padding:0; box-shadow:none; }
  @page { size:A4; margin:14mm; }
}

/* ------------------------- BOTÃO SAIR (sidebar) ------------------------- */
.logout-btn { margin-top:4px; align-self:flex-start; font-size:12px; font-weight:600;
  color:#cfe4f7; opacity:.8; padding:4px 2px; }
.logout-btn:hover { opacity:1; text-decoration:underline; }

/* ------------------------- GATE (acesso controlado) ------------------------- */
.gate { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:linear-gradient(135deg,var(--azul-900),var(--azul-700)); overflow-y:auto; }
.gate-card { width:400px; max-width:100%; background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:26px 26px 24px; }
.gate-brand { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.gate-brand img { width:46px; height:46px; background:#fff; border-radius:11px; }
.gate-brand strong { display:block; font-size:17px; color:var(--azul-900); }
.gate-brand span { font-size:12px; color:var(--cinza-500); }
.gate-tabs { display:flex; gap:6px; background:var(--cinza-100); padding:4px; border-radius:10px; margin-bottom:18px; }
.gate-tab { flex:1; padding:8px; border-radius:8px; font-size:13.5px; font-weight:700; color:var(--cinza-500); }
.gate-tab.is-active { background:#fff; color:var(--azul-700); box-shadow:var(--shadow-sm); }
.gate-l { display:block; font-size:12px; font-weight:700; color:var(--cinza-500); margin:10px 0 5px; text-transform:uppercase; letter-spacing:.4px; }
.gate-in { width:100%; padding:11px 12px; border-radius:9px; border:1px solid var(--cinza-300); font-size:15px; color:var(--cinza-900); outline:none; }
.gate-in:focus { border-color:var(--azul-500); box-shadow:0 0 0 3px var(--azul-100); }
.gate-btn { width:100%; margin-top:16px; padding:12px; border-radius:10px; background:var(--azul-600); color:#fff; font-weight:700; font-size:15px; transition:.15s; }
.gate-btn:hover { background:var(--azul-700); }
.gate-msg, .gate-err { color:var(--vermelho); font-size:13px; font-weight:600; margin-top:10px; min-height:1px; }
.gate-hint { font-size:13px; color:var(--cinza-600); line-height:1.5; margin-bottom:6px; }
.gate-result { margin-top:16px; padding:14px; border-radius:10px; background:var(--azul-050); font-size:13.5px; color:var(--cinza-700); line-height:1.5; }
.gate-code { font-size:30px; font-weight:900; letter-spacing:4px; color:var(--azul-700); margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.gate-code.ok { color:var(--verde-600); }
.gate-sub { font-size:12px; color:var(--cinza-500); }
.gate-admin-foot { display:flex; justify-content:space-between; margin-top:16px; }
.gate-link { font-size:13px; font-weight:700; color:var(--azul-600); }
.gate-link:hover { text-decoration:underline; }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width:1080px) {
  .detail-grid { grid-template-columns:1fr; }
  .unidades-layout { grid-template-columns:1fr; }
}

@media (max-width:820px) {
  #app { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; z-index:60; width:280px; transform:translateX(-100%);
    transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.3); }
  #app.nav-open .sidebar { transform:translateX(0); }
  #app.nav-open .scrim { display:block; position:fixed; inset:0; background:rgba(6,20,33,.45); z-index:55; }
  .hamb { display:block; }
  /* Topbar em duas linhas: ações à direita em cima, seletores embaixo — em uma
     linha só os botões + seletores passam de 500px e a página rolava de lado. */
  .topbar { padding:10px 14px; gap:8px 10px; flex-wrap:wrap; }
  .crumbs { display:none; }
  .topbar-right { flex:1; min-width:0; justify-content:flex-end; gap:8px; }
  .topbar .mini-picker { display:flex; order:5; flex-basis:100%; width:100%; min-width:0; }
  .topbar .btn-report { padding:8px 11px; }
  .topbar .btn-report .btn-txt { display:none; }   /* só o ícone (title/aria-label mantêm o nome) */
  .mini-picker .ucombo { width:auto; flex:1; min-width:0; }
  .mini-picker .ucombo-btn { min-width:0; max-width:none; padding:7px 9px; font-size:13px; }
  .mini-picker select { flex:none; }
  #unitComboTop .ucombo-pop { left:0; right:auto; min-width:min(280px, 82vw); }
  .tree-bar { flex-wrap:wrap; }
  .tree-level-lbl { min-width:0; }
  .sidebar-foot { display:none; }
  .content { padding:18px 16px 96px; }
  .page-head h1 { font-size:20px; }
  .detail-head h1 { font-size:20px; }

  /* bottom nav */
  .bottomnav { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:40;
    background:#fff; border-top:1px solid var(--cinza-200); box-shadow:0 -2px 12px rgba(16,42,67,.08); }
  .bn-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px 8px;
    font-size:11px; color:var(--cinza-500); font-weight:600; }
  .bn-item .ic { display:inline-grid; place-items:center; }
  .bn-item .ic .icn { width:21px; height:21px; }
  .bn-item.is-active { color:var(--azul-600); }
}

@media (max-width:480px) {
  .mini-picker select { max-width:none; width:76px; font-size:12px; padding:7px 6px; }
  .topbar { padding:9px 12px; }
  .kpi-tile .kpi-value { font-size:26px; }
  .summary-card { gap:16px; }
  .back-btn .back-txt { display:none; }
  .back-btn { padding:7px 10px; }
}

/* Em telas estreitas os cards usam um padding um pouco menor, mas continuam
   iguais entre si (as variáveis valem para todos). */
@media (max-width:620px) {
  :root { --card-pad-y:16px; --card-pad-x:16px; }
}