/* ============================================================
   Painel do gestor — mesmo visual 2026 do app (visual.css):
   fundo claro, cartões brancos, um destaque verde (#00843D),
   Plus Jakarta Sans. Vermelho só para "faltou".
   Arquivo único (sem app.css/tema3d/moderno) e sem estilo inline no <head>.
   ============================================================ */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap;
  src: url("/static/vendor/fontes/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap;
  src: url("/static/vendor/fontes/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap;
  src: url("/static/vendor/fontes/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap;
  src: url("/static/vendor/fontes/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --acento: #00843D; --acento-escuro: #0B5D33; --acento-claro: #E3F2E9; --acento-suave: #EEF4F1;
  --pagina: #F5F7F6; --cartao: #FFFFFF; --campo: #F5F7F6;
  --tinta: #14201A; --cinza: #5A6862; --cinza-2: #8A9690; --linha: #E3E9E5;
  --falta: #D64032; --falta-texto: #B42318; --falta-suave: #FDECEA;
  --achou: #CBD5D0; --aviso: #8A5A00; --aviso-fundo: #FFF6DB; --aviso-borda: #F2D27A;
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 18px; --raio-ctrl: 12px;
  --sombra: 0 1px 2px rgba(16, 40, 28, .05), 0 6px 18px rgba(16, 40, 28, .06);
}
html[data-tema="escuro"] {
  color-scheme: dark;
  --pagina: #0E1513; --cartao: #17211D; --campo: #1D2924;
  --tinta: #E7EEEA; --cinza: #A8B5AE; --cinza-2: #7E8C85; --linha: #2A3832;
  --acento-escuro: #6BE29C; --acento-claro: #16301F; --acento-suave: #1B2A23;
  --falta: #F0645A; --falta-texto: #FF8A80; --falta-suave: #3A1C1A;
  --achou: #3A4A43; --aviso: #FFE7A3; --aviso-fundo: #2E2510; --aviso-borda: #5C4A12;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .35);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--pagina); color: var(--tinta); font: 15px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }
svg { flex: none; }

/* ---------- topo ---------- */
.topo-p { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--pagina) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-in { max-width: 1160px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 12px; }
.marca-p { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); margin-right: auto; min-width: 0; }
.logo { width: 36px; height: 36px; border-radius: 11px; background: var(--acento); display: grid; place-items: center; }
.logo svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marca-p .nome { font: 800 1.2rem/1 var(--fonte); letter-spacing: -.02em; white-space: nowrap; }
.interrogacao { color: #C99A00; }
.marca-p .tag { font-size: .78rem; font-weight: 700; color: var(--acento-escuro); background: var(--acento-claro);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.topo-acoes { display: flex; align-items: center; gap: 8px; }
.btn-g, .btn-tema { height: 40px; border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta);
  border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: .88rem; }
.btn-g { padding: 0 14px; }
.btn-tema { width: 40px; padding: 0; }
.btn-tema svg { width: 17px; height: 17px; }
.btn-g svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-g:hover, .btn-tema:hover { border-color: var(--cinza-2); }
.btn-g[aria-expanded="true"] { background: var(--tinta); color: var(--pagina); border-color: var(--tinta); }
.btn-sair:hover { color: var(--falta-texto); border-color: var(--falta-texto); }

/* ---------- conteúdo ---------- */
main { max-width: 1160px; margin: 0 auto; padding: 26px 24px 56px; }
.intro h1 { margin: 0; font: 800 clamp(1.45rem, 2.6vw, 1.9rem)/1.15 var(--fonte); letter-spacing: -.025em; }
.intro p { margin: 6px 0 0; color: var(--cinza); font-size: .92rem; }
.intro .acesso { font-size: .82rem; color: var(--cinza-2); }
.intro .acesso b { color: var(--tinta); }

.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 16px; margin: 20px 0 18px; padding: 14px 16px;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.campo label, .rot-f { display: block; font-size: .74rem; font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px 2px; }
.filtros select { height: 42px; min-width: 200px; padding: 0 38px 0 14px; border: 1px solid var(--linha); border-radius: var(--raio-ctrl);
  background: var(--campo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300843D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  appearance: none; font-weight: 700; cursor: pointer; }
.periodo { display: inline-flex; padding: 4px; gap: 2px; background: var(--campo); border: 1px solid var(--linha); border-radius: 999px; }
.periodo button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--cinza); font-weight: 700; font-size: .88rem; cursor: pointer; }
.periodo button[aria-pressed="true"] { background: var(--tinta); color: var(--pagina); }
.filtros-acoes { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.btn-acessos, .teste-rel, .baixar { height: 42px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: .88rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-acessos, .teste-rel { border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta); }
.btn-acessos[aria-expanded="true"] { background: var(--tinta); color: var(--pagina); border-color: var(--tinta); }
.baixar { border: 0; background: var(--acento); color: #fff; }
.baixar:hover { background: var(--acento-escuro); }
html[data-tema="escuro"] .baixar:hover { background: #0A9A4A; }
.baixar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- avisos ---------- */
.faixa-velho-p, .alerta-faixa { border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; font-size: .9rem; }
.faixa-velho-p { background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); color: var(--aviso); }
.alerta-faixa { background: var(--falta-suave); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--falta) 30%, transparent); }
.alerta-faixa b { color: var(--falta-texto); }

/* ---------- números ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.card { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); }
.card .rot { font-size: .8rem; font-weight: 600; color: var(--cinza); }
.card .val { font: 800 2.2rem/1.1 var(--fonte); letter-spacing: -.03em; margin-top: 6px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.card .val.ruim { color: var(--falta-texto); }
.card .val.alerta { color: #B45309; }
html[data-tema="escuro"] .card .val.alerta { color: #FDBA74; }
.card .sub { font-size: .78rem; color: var(--cinza-2); margin-top: 4px; }

/* ---------- blocos ---------- */
.grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.bloco { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--sombra); }
.bloco h2 { margin: 0 0 2px; font: 800 1.05rem/1.3 var(--fonte); letter-spacing: -.01em; }
.bloco .obs { margin: 0 0 14px; font-size: .8rem; color: var(--cinza); }
.vazio-p { color: var(--cinza); font-size: .9rem; margin: 6px 0; }
.rodape { font-size: .78rem; color: var(--cinza-2); margin-top: 6px; }
.sub-t { margin: 14px 0 4px; font-weight: 800; font-size: .92rem; }

.linha { margin-bottom: 12px; }
.linha .topo-l { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; }
.linha .topo-l b { font-weight: 700; }
.linha .num { color: var(--cinza); white-space: nowrap; font-variant-numeric: tabular-nums; }
.linha .num i { font-style: normal; color: var(--falta-texto); font-weight: 700; }
.barra { height: 8px; background: var(--campo); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.barra > div { height: 8px; display: flex; border-radius: 999px; overflow: hidden; }
.barra .sem { background: var(--falta); } .barra .com { background: var(--achou); }
.legenda-p { display: flex; gap: 16px; font-size: .76rem; color: var(--cinza); margin-top: 8px; }
.legenda-p span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--falta); }
.legenda-p span.c::before { background: var(--achou); }

.dias { display: flex; align-items: end; gap: 4px; height: 120px; margin-top: 10px; border-bottom: 1px solid var(--linha); }
.dias .d { flex: 1; display: flex; flex-direction: column-reverse; min-width: 4px; }
.dias .d > div:last-child { border-radius: 5px 5px 0 0; }
.dias .d .sem { background: var(--falta); } .dias .d .com { background: var(--achou); }
.dias .d:hover { filter: brightness(.92); }
.eixo { display: flex; justify-content: space-between; font-size: .72rem; color: var(--cinza-2); margin-top: 6px; }

table.t { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.t th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza); font-weight: 700; padding: 8px 6px; border-bottom: 1px solid var(--linha); }
table.t td { padding: 9px 6px; border-bottom: 1px solid var(--linha); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.n { text-align: right; font-weight: 800; color: var(--acento-escuro); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.t small { color: var(--cinza) !important; }

.cmp-l { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 56px; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 12px; }
.cmp-l.eu { background: var(--acento-claro); }
.cmp-l.uf { background: var(--campo); }
.cmp-nome b { display: block; font-size: .92rem; } .cmp-nome small { color: var(--cinza); font-size: .76rem; }
.cmp-barra { height: 10px; background: var(--campo); border-radius: 999px; overflow: hidden; }
.cmp-l.uf .cmp-barra, .cmp-l.eu .cmp-barra { background: var(--cartao); }
.cmp-barra div { height: 100%; border-radius: 999px; background: var(--cinza-2); }
.cmp-l.eu .cmp-barra div { background: var(--acento); }
.cmp-pct { font: 800 1.2rem/1 var(--fonte); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- acessos e segurança ---------- */
#telaAcessos, #telaSeguranca { border-color: color-mix(in srgb, var(--acento) 35%, var(--linha)); }
.form-a { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 14px; align-items: end; }
.form-a label, .seg-linha label { display: block; font-size: .78rem; font-weight: 700; color: var(--cinza); margin-bottom: 6px; }
.form-a input, .seg-linha input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--linha); border-radius: var(--raio-ctrl); background: var(--campo); }
.form-a input:focus, .seg-linha input:focus { border-color: var(--acento); outline: none; background: var(--cartao); }
.seg-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 10px; }
.seg-linha input { width: 150px; letter-spacing: .2em; font-weight: 700; }
.chips-c { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 8px; }
.chips-c span { display: inline-flex; align-items: center; gap: 6px; background: var(--acento-claro); color: var(--acento-escuro); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .84rem; font-weight: 700; }
.chips-c button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.btn-salvar { height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--acento); color: #fff; font-weight: 700; cursor: pointer; }
.btn-salvar:hover { background: var(--acento-escuro); }
.btn-mini { border: 1px solid var(--linha); background: var(--cartao); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: .8rem; font-weight: 700; margin-left: 4px; }
.btn-mini.perigo { color: var(--falta-texto); }
.msg-a { margin: 10px 0 0; font-size: .88rem; font-weight: 700; min-height: 0; }
.msg-a.ok { color: var(--acento-escuro); } .msg-a.erro { color: var(--falta-texto); }
.origem { font-size: .74rem; color: var(--cinza); font-weight: 400; }
.seg-ok { color: var(--acento-escuro); font-weight: 800; }
.seg-chave { font: 700 1.05rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; background: var(--campo); padding: 10px 12px; border-radius: 12px; word-break: break-all; margin-top: 6px; }

/* ---------- celular ---------- */
@media (max-width: 860px) { .grade { grid-template-columns: 1fr; } .filtros-acoes { margin-left: 0; } }
@media (max-width: 600px) {
  .topo-in { padding: 10px 16px; gap: 8px; }
  .marca-p .tag { display: none; }
  .btn-g span { display: none; }
  .btn-g { width: 40px; padding: 0; }
  main { padding: 18px 16px 48px; }
  .filtros { padding: 12px; }
  .campo, .filtros select { width: 100%; min-width: 0; }
  .periodo { width: 100%; } .periodo button { flex: 1; }
  .filtros-acoes { width: 100%; } .filtros-acoes > * { flex: 1 1 auto; justify-content: center; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 14px; } .card .val { font-size: 1.8rem; }
  .bloco { padding: 16px; }
  .cmp-l { grid-template-columns: 1fr 48px; } .cmp-barra { grid-column: 1 / -1; grid-row: 2; }
}
@media print {
  .topo-p, .filtros, #telaAcessos, #telaSeguranca { display: none !important; }
  body { background: #fff; } .bloco, .card { box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   Painel 2 — "chamar atenção do gestor": herói com o número que
   importa, medidor, alertas que viram ação e gráficos de verdade.
   Cores de situação: verde = bom, âmbar = atenção, vermelho = crítico.
   ============================================================ */
:root { --bom: #12A150; --atencao: #E8A317; --critico: #E5484D; }

/* herói */
.heroi-p { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .9fr) minmax(220px, .8fr);
  gap: 24px; align-items: center; padding: 26px 28px; margin: 0 0 18px; border-radius: 24px; color: #EAF3EE;
  background: radial-gradient(120% 140% at 0% 0%, #1B4D36 0%, #0F2A1F 45%, #0A1A14 100%); box-shadow: 0 18px 40px rgba(10, 30, 20, .25); }
.heroi-p::after { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .06), transparent); }
.heroi-p.critico { background: radial-gradient(120% 140% at 0% 0%, #4A1F22 0%, #2A1416 45%, #160C0D 100%); }
.heroi-p.atencao { background: radial-gradient(120% 140% at 0% 0%, #4A3A12 0%, #2A210C 45%, #161108 100%); }
.h-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.h-cidade { font: 800 1.15rem/1 var(--fonte); letter-spacing: -.01em; }
.h-periodo { font-size: .82rem; color: rgba(234, 243, 238, .65); }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; background: rgba(255, 255, 255, .1); }
.status i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pulso 2s infinite; }
.status.critico { color: #FF8B8E; } .status.atencao { color: #FFCF5C; } .status.bom { color: #6BE29C; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.h-numero { font: 800 clamp(4rem, 9vw, 6.2rem)/.95 var(--fonte); letter-spacing: -.05em; margin: 14px 0 4px; font-variant-numeric: tabular-nums; }
.h-numero span { font-size: .45em; letter-spacing: 0; margin-left: 4px; opacity: .8; }
.heroi-p.critico .h-numero { color: #FF8B8E; } .heroi-p.atencao .h-numero { color: #FFCF5C; } .heroi-p.bom .h-numero { color: #6BE29C; }
.h-numero.vazio { color: rgba(234, 243, 238, .4); }
.h-frase { margin: 0; font-size: 1rem; color: rgba(234, 243, 238, .85); max-width: 34ch; }
.h-frase b { color: #fff; }
.h-tend { margin: 12px 0 0; font-size: .86rem; font-weight: 800; }
.h-tend.piora { color: #FF8B8E; } .h-tend.melhora { color: #6BE29C; }
.h-tend span { font-weight: 400; color: rgba(234, 243, 238, .6); margin-left: 4px; }
.h-medidor { text-align: center; }
.medidor { width: 100%; max-width: 260px; }
.medidor path { fill: none; stroke-width: 16; stroke-linecap: round; }
.medidor .f-bom { stroke: var(--bom); } .medidor .f-atencao { stroke: var(--atencao); } .medidor .f-critico { stroke: var(--critico); }
.medidor .ponteiro { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.medidor .pino-m { fill: #fff; }
.medidor .esc { fill: rgba(234, 243, 238, .55); font: 600 10px var(--fonte); }
.h-legenda { display: flex; justify-content: center; gap: 12px; font-size: .72rem; color: rgba(234, 243, 238, .7); margin-top: 2px; }
.h-legenda span::before, .legenda-n span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.h-legenda .bom::before, .legenda-n .bom::before { background: var(--bom); }
.h-legenda .atencao::before, .legenda-n .atencao::before { background: var(--atencao); }
.h-legenda .critico::before, .legenda-n .critico::before { background: var(--critico); }
.h-lado { display: grid; gap: 12px; }
.h-mini { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 12px 14px; }
.h-mini span { display: block; font-size: .74rem; color: rgba(234, 243, 238, .65); }
.h-mini b { display: block; font: 800 1.35rem/1.2 var(--fonte); margin-top: 3px; }
.h-mini b small, .h-mini > small { font-size: .78rem; font-weight: 600; color: rgba(234, 243, 238, .65); }
.h-mini.velho b { color: #FFCF5C; }
.h-prog { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); margin-top: 8px; overflow: hidden; }
.h-prog div { height: 100%; border-radius: 999px; background: #6BE29C; }

/* alertas que viram ação */
.sec { font: 800 .8rem/1 var(--fonte); text-transform: uppercase; letter-spacing: .08em; color: var(--cinza); margin: 4px 0 10px; }
.alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.alerta-c { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); border-left: 5px solid var(--critico); box-shadow: var(--sombra); }
.alerta-c.aviso { border-left-color: var(--atencao); }
.alerta-c svg { width: 22px; height: 22px; fill: none; stroke: var(--critico); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.alerta-c.aviso svg { stroke: #C98A0A; }
.alerta-c b { font-size: .95rem; } .alerta-c p { margin: 4px 0 0; font-size: .84rem; color: var(--cinza); }
.alerta-c p b { font-size: inherit; color: var(--tinta); }

/* cartões com ícone e mini-gráfico */
.c-topo { display: flex; align-items: center; gap: 8px; }
.c-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--acento-claro); color: var(--acento); }
.c-ic.vermelho { background: var(--falta-suave); color: var(--critico); } .c-ic.laranja { background: var(--aviso-fundo); color: #C98A0A; }
.c-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card .val { margin-top: 10px; }
.faisca { display: block; width: 100%; height: 36px; margin-top: 6px; }
.faisca .ln { fill: none; stroke: var(--acento); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.faisca .area { fill: var(--acento); opacity: .1; }
.faisca.vermelha .ln { stroke: var(--critico); } .faisca.vermelha .area { fill: var(--critico); }

/* ranking de remédios */
.g-60 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ranking li { display: flex; gap: 12px; align-items: flex-start; }
.ranking .pos { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--campo); font-weight: 800; font-size: .85rem; color: var(--cinza); }
.ranking li:first-child .pos { background: var(--critico); color: #fff; }
.r-corpo { flex: 1; min-width: 0; }
.r-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.r-topo b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { flex: none; font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.pill.critico { background: var(--falta-suave); color: var(--falta-texto); }
.pill.atencao { background: var(--aviso-fundo); color: #9A6700; } html[data-tema="escuro"] .pill.atencao { color: #FFCF5C; }
.pill.bom { background: var(--acento-claro); color: var(--acento-escuro); }
.r-barra { height: 10px; border-radius: 999px; background: var(--campo); margin: 6px 0 3px; overflow: hidden; }
.r-barra > div { height: 100%; border-radius: 999px; background: var(--achou); overflow: hidden; }
.r-barra i { display: block; height: 100%; background: linear-gradient(90deg, #F2994A, var(--critico)); border-radius: 999px; }
.r-corpo small { font-size: .74rem; color: var(--cinza-2); }

/* mapa de calor dos bairros */
.ladrilhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 84px; grid-auto-flow: dense; gap: 8px; }
.ladrilho { border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; overflow: hidden; }
.ladrilho.g { grid-column: span 2; grid-row: span 2; } .ladrilho.m { grid-column: span 2; }
.ladrilho.critico { background: linear-gradient(135deg, #E5484D, #B4232B); }
.ladrilho.atencao { background: linear-gradient(135deg, #F2B33D, #D68910); color: #2B1D00; }
.ladrilho.bom { background: linear-gradient(135deg, #22B866, #0E8A45); }
.ladrilho b { font: 800 1.5rem/1 var(--fonte); letter-spacing: -.02em; }
.ladrilho.g b { font-size: 2.4rem; }
.ladrilho span { font-weight: 700; font-size: .86rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ladrilho small { font-size: .72rem; opacity: .85; }
.legenda-n { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .74rem; color: var(--cinza); margin-top: 10px; align-items: center; }
.legenda-n em { font-style: normal; color: var(--cinza-2); }

/* gráfico por dia */
.b-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.legenda-g { display: flex; gap: 14px; font-size: .76rem; color: var(--cinza); }
.legenda-g span::before { content: ""; display: inline-block; vertical-align: middle; margin-right: 6px; }
.legenda-g .b::before { width: 12px; height: 12px; border-radius: 3px; background: var(--achou); }
.legenda-g .l::before { width: 16px; height: 3px; border-radius: 2px; background: var(--critico); }
.grafico-dias { width: 100%; height: auto; display: block; }
.grafico-dias .grade-l { stroke: var(--linha); stroke-dasharray: 3 4; }
.grafico-dias .eixo-p, .grafico-dias .eixo-b { fill: var(--cinza-2); font: 600 11px var(--fonte); }
.grafico-dias .eixo-p { fill: var(--critico); opacity: .8; }
.grafico-dias .barra-d { fill: var(--achou); }
.grafico-dias .barra-d:hover { fill: var(--cinza-2); }
.grafico-dias .linha-p { fill: none; stroke: var(--critico); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.grafico-dias .ponto-p { fill: var(--cartao); stroke: var(--critico); stroke-width: 2.5; }

/* comparação */
.cmp-barra div.critico { background: var(--critico); } .cmp-barra div.atencao { background: var(--atencao); } .cmp-barra div.bom { background: var(--bom); }
.cmp-l.eu { outline: 2px solid var(--acento); outline-offset: -2px; }
table.t th.dir { text-align: right; }

/* aviso antigo: agora vai nos alertas */
.faixa-velho-p, .alerta-faixa { display: none; }

@media (max-width: 1000px) {
  .heroi-p { grid-template-columns: 1fr 1fr; }
  .h-lado { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .g-60 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .heroi-p { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .h-medidor { order: 2; } .h-medidor .medidor { max-width: 190px; } .h-lado { order: 3; grid-template-columns: 1fr 1fr; }
  .h-mini b { font-size: 1.1rem; }
  .ladrilhos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 78px; }
  .ladrilho.m { grid-column: span 1; } .ladrilho.g b { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .status i { animation: none; } }
@media print { .heroi-p { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* acessos: convite por e-mail e "vê todas" */
.modo-a { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.modo-a label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 14px; cursor: pointer; background: var(--campo); }
.modo-a label:has(input:checked) { border-color: var(--acento); background: var(--acento-claro); }
.modo-a input { margin-top: 3px; accent-color: var(--acento); }
.modo-a b { display: block; font-size: .9rem; } .modo-a small { color: var(--cinza); font-size: .78rem; }
.check-a { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: .86rem; cursor: pointer; }
.check-a input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--acento); }
.st-conv { display: inline-block; margin-top: 2px; font-weight: 700; color: #9A6700; background: var(--aviso-fundo); padding: 1px 8px; border-radius: 999px; }
.st-conv.venc { color: var(--falta-texto); background: var(--falta-suave); }
.chips-c small { width: 100%; font-size: .74rem; font-weight: 700; color: var(--cinza); }
.form-a #campoCidade { align-self: start; }
.form-a { align-items: start; }
.form-a > div:last-child { padding-top: 24px; }

/* cartões e alertas clicáveis: levam ao detalhe */
a.card-link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
a.alerta-c.card-link { display: flex; }
a.card-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acento) 45%, var(--linha)); box-shadow: 0 10px 26px rgba(16, 40, 28, .12); }
a.card-link:active { transform: translateY(0); }
.card .ver { display: inline-block; margin-left: 4px; color: var(--acento-escuro); font-weight: 700; white-space: nowrap; }
.bloco { scroll-margin-top: 84px; }
.bloco.piscar { animation: piscar 1.6s ease-out; }
@keyframes piscar { 0% { box-shadow: 0 0 0 4px var(--acento); } 100% { box-shadow: var(--sombra); } }
@media (prefers-reduced-motion: reduce) { a.card-link, a.card-link:hover { transform: none; transition: none; } .bloco.piscar { animation: none; } }
.nota-b { margin: 10px 0 0; font-size: .8rem; color: var(--cinza); background: var(--campo); border-radius: 12px; padding: 10px 12px; }
.nota-b b { color: var(--tinta); }

/* uso do app (Brasil) */
.btn-acessos[aria-pressed="true"] { background: var(--tinta); color: var(--pagina); border-color: var(--tinta); }
.heroi-p.uso { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); }
.heroi-p.uso .h-numero { color: #6BE29C; }
.barra .com.uso { background: var(--acento); opacity: .8; }
.lin-cid a { color: var(--tinta); font-weight: 700; text-decoration: none; }
.lin-cid a:hover { color: var(--acento-escuro); text-decoration: underline; }
.nota-b code { background: var(--cartao); padding: 1px 6px; border-radius: 6px; font-size: .78rem; }
@media (max-width: 600px) { .heroi-p.uso { grid-template-columns: 1fr; } }