/* =====================================================================
   STATIO — estilo do site
   Identidade PMMT / Governo de MT, a mesma do protótipo (prototipo/statio.html):
   faixa azul-marinho em degradê, menu cinza, aba ativa e botões em azul vivo,
   títulos em caixa azul-marinho. Nada de style="" no HTML: a CSP não permite
   (ver _headers). Tudo que muda de aparência muda por classe ou data-atributo.
   ===================================================================== */
:root{
  color-scheme: light;
  /* Visual leve (21/09/2026, opção 2 escolhida pelo Murilo): a faixa e o menu
     viram UMA moldura marinho lisa (#0e1a48, o tom mais escuro que ele pediu), e
     a página fica neutra e clara. O degradê institucional saiu da faixa. */
  --pm-band:#0e1a48;
  --pm-band-solid:#0e1a48;
  --pm-nav-bg:#0e1a48; --pm-nav-line:#1c2c66; --pm-nav-ink:#dfe6f5;
  --pm-ativo:#1570bf; --pm-ativo-ink:#ffffff;
  --pm-titulo:#1c2d6b; --pm-titulo-ink:#ffffff;
  --brand:#1c2433; --brand-2:#0d1b52; --brand-50:#eef3fb; --brand-100:#d9e3f3;
  --gold:#f2c230;
  --ground:#f5f7fa; --surface:#ffffff; --surface-2:#f3f5f9; --surface-3:#e9edf3;
  --ink:#1c2433; --ink-2:#4f5a6b; --ink-3:#646e7e;
  --line:#e3e7ee; --line-2:#edf0f4; --line-campo:#cfd5de;
  --accent:#1a5fc9; --accent-hover:#1553b0; --accent-ink:#ffffff; --accent-wash:#eaf1fc;
  /* botão principal e o "Lançar o que fiz": no claro é o próprio --accent; no escuro o
     --accent vira branco (marcação) e o botão continua no azul vivo */
  --botao:#1a66d6; --botao-hover:#1553b0; --botao-ink:#ffffff;
  --brass:#865a00; --brass-wash:#fbf2dc;
  --good:#0ca30c; --good-ink:#0a6a0a; --good-wash:#e5f4e5;
  --warn:#fab219; --warn-ink:#7f5300; --warn-wash:#fdf2d8;
  --crit:#d03b3b; --crit-ink:#a52626; --crit-wash:#fbe5e5;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --s4:#7454d6; --s5:#b8860b; --s6:#8a93a3;   /* BO, TCO e sem documento (039) */
  /* rampa do mapa de calor e do mapa de bairros: 0 = neutro, 1..6 sobe.
     Fica aqui, e não solta lá embaixo, porque cada tema precisa da sua — no
     escuro a rampa é ao contrário (ver o bloco do modo escuro). */
  --q1:#84b5ee; --q2:#5c9de8; --q3:#2f7ddb; --q4:#2263b5; --q5:#184c8c; --q6:#0d3466;
  --r1:#66c29f; --r2:#3fb189; --r3:#1b9a69; --r4:#138057; --r5:#0d6344; --r6:#084731;
  /* mapa de calor dos pontos (042): do amarelo ao vermelho, como se lê um calor */
  --cal1:#fed976; --cal2:#feb24c; --cal3:#fd8d3c; --cal4:#fc4e2a; --cal5:#e31a1c; --cal6:#b10026;
  /* ocorrências do SROP (043): vermelho, com o tom pela origem; e o quadro de presença */
  --srop-pm:#e53935; --srop-pjc:#9e1b1b; --srop-dig:#e2407a; --srop-out:#8d6e63;
  --lac1:#fde4e0; --lac2:#f9bdb4; --lac3:#f28b7d; --lac4:#df5a4a; --lac5:#bf392c; --lac6:#8c1f16; --lac-tx-claro:#1c2433; --lac-tx-forte:#ffffff;
  --hach-fundo:#f2f5f9; --hach-linha:#c3cedd; --cel-num:#12325e; --cel-num-claro:#ffffff;
  --mapa-bairro:#e3e8ef; --mapa-borda:#ffffff; --mapa-vazio:#eef1f6; --mapa-neutro:#dde3eb;
  --mapa-outra:#c3ccd8; --mapa-sem:#ffffff; --mapa-sem-borda:#b8c2d0; --mapa-fora:#edf0f4;
  --mapa-sel:#1672d6; --mapa-rotulo:#1b2333; --mapa-rotulo-borda:#ffffff;
  --mapa-divisa:#0e1a48; --mapa-divisa-fundo:#ffffff; --mapa-listra:rgba(14,26,72,.5);   /* 045: limite das áreas e bairro de divisa */
  --shadow:0 1px 2px rgba(10,30,80,.06),0 6px 20px rgba(10,30,80,.08);
  --radius:8px; --radius-sm:6px;   /* cantos arredondados: o visual leve (eram 4 e 3) */
  --largura:1280px;
  --f-display:"Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}
/* =====================================================================
   TEMAS ESCUROS — MARINHO e GRAFITE (21/09/2026), escolhidos no painel do Aa.
   Os dois usam data-tema="escuro" (tudo o que é de escuro — a rampa do mapa de
   calor, o mapa, as sombras — serve aos dois); o grafite ainda ganha
   data-paleta="grafite", que troca só as cores de base (bloco logo abaixo).
   Visual leve (opção 2 do Murilo): a faixa e o menu são UMA moldura lisa, a
   página é mais escura que o cartão, e quase nada tem borda forte.
   - letra e marcação BRANCAS (V27): título, link, aba e item ativos, seleção.
     Nada de azul claro em letra — o #6fb2ea ficou só como cor de série nos
     gráficos e no mapa (--s1, --mapa-sel), porque dado precisa de cor;
   - o botão principal fica no azul vivo (--botao) com letra branca;
   - texto de apoio em cinza-azulado neutro.
   Toda dupla de cor foi conferida em contraste (mínimo WCAG AA: 4,5:1); a
   menor é a do botão principal, 4,7:1.
   Fica ANTES do alto contraste de propósito: os dois mexem nas mesmas
   variáveis, e com os dois ligados quem tem de ganhar é o alto contraste.
   ===================================================================== */
html[data-tema="escuro"]{
  color-scheme: dark;
  --pm-band:#121a30; --pm-band-solid:#121a30;
  --pm-nav-bg:#121a30; --pm-nav-line:#1f2a47; --pm-nav-ink:#d9e0ee;
  --pm-ativo:#ffffff; --pm-ativo-ink:#0d1b52;
  --pm-titulo:#1c2d6b; --pm-titulo-ink:#ffffff;
  --brand:#ffffff; --brand-2:#0b1120; --brand-50:#121e57; --brand-100:#1b2a6b;
  --ground:#0b1120; --surface:#111a2c; --surface-2:#16213a; --surface-3:#1c2947;
  --ink:#f1f4f9; --ink-2:#b6c0d2; --ink-3:#8793a9;
  --line:#1f2b45; --line-2:#18223a; --line-campo:#2c3a58;
  --accent:#ffffff; --accent-hover:#dfe6f5; --accent-ink:#0d1b52; --accent-wash:#1a2644;
  --botao:#2f6fdc; --botao-hover:#2860c2; --botao-ink:#ffffff;
  --menu-sel-bg:#ffffff1a; --menu-sel-ink:#ffffff; --menu-sel-barra:transparent;
  --brass:#e0b04a; --brass-wash:#2a2308;
  --good:#35b06b; --good-ink:#86dcae; --good-wash:#0c2b1d;
  --warn:#e5ac2a; --warn-ink:#f4cf72; --warn-wash:#2e2508;
  --crit:#e46f6f; --crit-ink:#f7a3a3; --crit-wash:#331616;
  --s1:#6fb2ea; --s2:#f0946a; --s3:#4cc79c;
  --s4:#a894f2; --s5:#e0b84a; --s6:#9aa3b3;
  /* A rampa vai AO CONTRÁRIO: no claro ela escurece conforme sobe; aqui tem de
     clarear, senão o pico do mapa de calor some dentro do fundo. O número dentro
     da célula acompanha — o desenho põe .claro nos níveis 4 a 6 (js/graficos.js),
     que aqui são justamente os claros. */
  --q1:#1a2a6e; --q2:#223c92; --q3:#2b55b4; --q4:#3d74cf; --q5:#6197e0; --q6:#93bdef;
  --r1:#113a2c; --r2:#16563e; --r3:#1c7253; --r4:#2a9070; --r5:#54b18f; --r6:#88ceb1;
  --cal1:#6b1d1d; --cal2:#a3281c; --cal3:#d9441c; --cal4:#f07a26; --cal5:#f8b243; --cal6:#fde58b;
  --srop-pm:#ff6b5f; --srop-pjc:#e57373; --srop-dig:#f48fb1; --srop-out:#bcaaa4;
  --lac1:#3a1714; --lac2:#5a2019; --lac3:#842a20; --lac4:#b23a2c; --lac5:#dc5a4a; --lac6:#ff8d80; --lac-tx-claro:#f1f4f9; --lac-tx-forte:#1c2433;
  --hach-fundo:#101c52; --hach-linha:#2c3f8f; --cel-num:#e6ecfb; --cel-num-claro:#0a1140;
  --mapa-bairro:#182a63; --mapa-borda:#0a1140; --mapa-vazio:#111d55; --mapa-neutro:#22357d;
  --mapa-outra:#2a3a72; --mapa-sem:#0b1443; --mapa-sem-borda:#2c3f8f; --mapa-fora:#080f3a;
  --mapa-sel:#6fb2ea; --mapa-rotulo:#ffffff; --mapa-rotulo-borda:#0a1140;
  --mapa-divisa:#ffffff; --mapa-divisa-fundo:#0a1140; --mapa-listra:rgba(255,255,255,.55);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.45);
}
/* Mapa com rua ou satélite por baixo (etapa 11): ali o fundo é CLARO mesmo no
   tema escuro, então a rampa volta a ser a do tema claro — escurecendo conforme
   sobe. Com a rampa invertida, o bairro de maior movimento ficava quase branco
   sobre um mapa branco, a 42% de opacidade, e sumia. Como tudo é variável,
   basta redefini-las no próprio mapa. */
/* V50: a legenda acompanha: com imagem por baixo, as rampas do mapa invertem, e a legenda
   de fora do SVG mostrava a rampa do tema — o tom "mais forte" da legenda era o mais fraco do mapa */
html[data-tema="escuro"] .mapa-svg.com-base,
html[data-tema="escuro"] .mapa-cartao:has(.mapa-svg.com-base) .legenda{
  --q1:#84b5ee; --q2:#5c9de8; --q3:#2f7ddb; --q4:#2263b5; --q5:#184c8c; --q6:#0d3466;
  --r1:#66c29f; --r2:#3fb189; --r3:#1b9a69; --r4:#138057; --r5:#0d6344; --r6:#084731;
  --cal1:#fed976; --cal2:#feb24c; --cal3:#fd8d3c; --cal4:#fc4e2a; --cal5:#e31a1c; --cal6:#b10026;
  --srop-pm:#e53935; --srop-pjc:#9e1b1b; --srop-dig:#e2407a; --srop-out:#8d6e63;
  --mapa-neutro:#dde3eb; --mapa-outra:#c3ccd8; --mapa-fora:#edf0f4;
}
html[data-tema="escuro"] .card{box-shadow:0 1px 2px rgba(0,0,0,.3)}
html[data-tema="escuro"] .dica{box-shadow:0 6px 20px rgba(0,0,0,.5)}
/* GRAFITE (21/09/2026, pedido do Murilo): o escuro em cinza quase preto, com as
   mesmas regras do marinho e outras cores de base. Nunca vale com o alto
   contraste ligado (o :not) — o alto contraste ganha de qualquer tema. */
html[data-paleta="grafite"]:not([data-contraste="alto"]){
  --pm-band:#111318; --pm-band-solid:#111318;
  --pm-nav-bg:#111318; --pm-nav-line:#23262d; --pm-nav-ink:#d7dae0;
  --pm-titulo:#2a2e36;
  --brand-2:#16181d; --brand-50:#1f2229; --brand-100:#2a2e36;
  --ground:#16181d; --surface:#1c1f25; --surface-2:#22262d; --surface-3:#2a2e36;
  --ink:#eceef1; --ink-2:#b4b9c2; --ink-3:#8b919b;
  --line:#2a2e36; --line-2:#23262c; --line-campo:#3a3f49;
  --accent-wash:#262b35;
  --menu-sel-bg:#ffffff14;
  --hach-fundo:#1b1e24; --hach-linha:#2f343d; --cel-num-claro:#111318;
  --mapa-bairro:#262a32; --mapa-borda:#16181d; --mapa-vazio:#1f2228; --mapa-neutro:#30353e;
  --mapa-outra:#383d47; --mapa-sem:#16181d; --mapa-sem-borda:#3a3f49; --mapa-fora:#131519;
  --mapa-rotulo-borda:#16181d; --mapa-divisa-fundo:#16181d;
}

/* alto contraste (botão da barra de acessibilidade) */
html[data-contraste="alto"]{
  --pm-band:#000; --pm-band-solid:#000;
  --pm-nav-bg:#000; --pm-nav-line:#ffe14d; --pm-nav-ink:#ffe14d;
  --pm-ativo:#ffe14d; --pm-ativo-ink:#000;
  --pm-titulo:#000; --pm-titulo-ink:#ffe14d;
  --brand:#ffe14d; --brand-2:#000; --brand-50:#1a1a1a; --brand-100:#555;
  --ground:#000; --surface:#000; --surface-2:#0d0d0d; --surface-3:#222;
  --ink:#fff; --ink-2:#f2f2f2; --ink-3:#d6d6d6;
  --line:#bdbdbd; --line-2:#5a5a5a;
  --accent:#ffe14d; --accent-hover:#fff27a; --accent-ink:#000; --accent-wash:#262100;
  --botao:#ffe14d; --botao-hover:#fff27a; --botao-ink:#000;
  --menu-sel-bg:#ffe14d; --menu-sel-ink:#000; --menu-sel-barra:transparent;
  --brass:#ffe14d; --brass-wash:#1f1a00; --warn-ink:#ffe14d; --warn-wash:#1f1a00;
  --good-ink:#8dff8d; --good-wash:#002600; --crit-ink:#ff9a9a; --crit-wash:#2b0000;
  --hach-fundo:#000; --hach-linha:#bdbdbd; --cel-num-claro:#000;
  --mapa-borda:#bdbdbd; --mapa-rotulo:#fff; --mapa-rotulo-borda:#000;
  --mapa-divisa:#ffe14d; --mapa-divisa-fundo:#000; --mapa-listra:rgba(255,225,77,.7);
}
html[data-contraste="alto"] .btn,html[data-contraste="alto"] .input,html[data-contraste="alto"] .card{border-color:#bdbdbd}
html[data-contraste="alto"] a{color:#ffe14d}
/* tamanho da letra (-A / +A / A) */
html[data-fonte="-1"]{font-size:87.5%}
html[data-fonte="1"]{font-size:112.5%}
html[data-fonte="2"]{font-size:125%}
html[data-fonte="3"]{font-size:137.5%}

*{box-sizing:border-box}
html,body{min-height:100%}
/* --topo é a altura do que ficou preso no alto (js/cabecalho.js escreve). Sem
   isto, o Tab que leva a um campo abaixo da dobra o encosta no topo da janela —
   ou seja, debaixo do cabeçalho. */
html{scroll-padding-top:var(--topo,0px)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:0.9375rem;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.pm-top :focus-visible,.auth-art :focus-visible{outline-color:var(--gold)}
.mono{font-family:var(--f-mono);font-size:.92em;letter-spacing:-.01em}
.muted{color:var(--ink-3)}
.sec{color:var(--ink-2)}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
.pular{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface);color:var(--accent);padding:8px 12px;border-radius:var(--radius);border:2px solid var(--accent)}
.pular:focus{left:8px}
.carregando{padding:48px 16px;text-align:center;color:var(--ink-3)}

/* ---------- marca ---------- */
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand svg,.brand img{flex:none}
.brand .sub{font-size:0.75rem;letter-spacing:.02em;line-height:1.2;opacity:.85}
.logo-grande{width:auto;display:block}

/* ---------- cabeçalho institucional e menu lateral ---------- */
/* Menu lateral (21/09/2026, pedido do Murilo). A faixa ficou fina e continua
   PRESA no alto; o menu foi para uma coluna à esquerda, com os grupos em sanfona
   — no celular, uma gaveta aberta pelo botão "Menu" da barra do rodapé.
   Antes, faixa + barra dos grupos + fita + barra dos itens somavam 164 px presos
   numa tela de notebook de 589 (28%); agora são 60 (faixa de 56 + fita de 4).
   No celular o conteúdo começava a 249 px do alto; agora, a 56.
   A altura do que ficou preso vai para --topo (js/cabecalho.js). */
:root{--lado:204px;--veu:rgba(6,14,40,.55);
  /* O menu é escuro nos três temas (a moldura): a tela aberta é uma pílula de
     realce branco leve, e o passar do mouse, um véu branco mais leve ainda. */
  --menu-sel-bg:#ffffff24;--menu-sel-ink:#ffffff;--menu-sel-barra:transparent;--menu-hover:#ffffff14}
.pm-top{position:sticky;top:0;z-index:20}
.pm-wrap{max-width:var(--largura);margin:0 auto;padding:0 24px}
.pm-band{background:var(--pm-band);color:#fff}
.pm-faixa{display:flex;align-items:center;gap:10px 20px;min-height:56px;padding:6px 20px}
.pm-id{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto}
/* Brasão oficial da PMMT e brasão do STATIO: arte, não desenho de CSS. Vêm de
   img/ (local/gerar_imagens.py, originais em dados/marca/) e são decorativos —
   o nome da instituição já está escrito ao lado, em texto. */
.brasao{flex:none;width:auto;height:42px}
.selo{flex:none;width:auto;height:36px}
/* A marca gráfica oficial no lugar do nome escrito à mão: é o desenho aprovado
   da instituição, e economiza a altura que o texto em duas linhas custava. */
.pm-marca{flex:none;width:auto;height:34px}
.pm-sep{width:1px;align-self:stretch;margin:4px 2px;background:rgba(255,255,255,.35)}
.pm-sis{display:flex;align-items:center;gap:9px;min-width:0}
.pm-sis b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.3125rem;letter-spacing:.12em;line-height:1}
.pm-sis span{display:block;font-size:0.6875rem;opacity:.82;line-height:1.25;max-width:230px;margin-top:3px}
/* nome · unidade · Aa · Sair, numa linha só, à direita da faixa */
.pm-quem{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 10px}
.pm-quem .name{font-weight:500;font-size:0.875rem}
.pm-quem .lot{font-size:0.8125rem;opacity:.8}
.pm-acess-abrir,.pm-sair{border:1px solid rgba(255,255,255,.45);background:none;color:#fff;border-radius:8px;padding:6px 12px;font-size:0.8125rem;font-weight:500;
  line-height:1.2}
.pm-acess-abrir{text-transform:none;font-weight:800;min-width:36px}
.pm-acess-abrir[aria-expanded="true"]{background:#fff;color:var(--pm-band-solid)}
.pm-sair:hover,.pm-acess-abrir:hover{background:rgba(255,255,255,.14)}
.pm-lado-mostrar{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.6);background:none;color:#fff;border-radius:3px}
.pm-lado-mostrar:hover{background:rgba(255,255,255,.14)}
.papel{font-size:0.7188rem;padding:2px 7px;border-radius:99px;background:var(--accent-wash);color:var(--accent);font-weight:600;white-space:nowrap}
.papel.b{background:var(--brass-wash);color:var(--brass)}
/* A acessibilidade abre por baixo da faixa, sem empurrar nada (o --topo não muda). */
.pm-acess{position:absolute;right:16px;top:100%;margin-top:6px;display:flex;align-items:center;gap:4px;padding:8px 8px 8px 12px;
  background:var(--pm-band-solid);color:#fff;box-shadow:0 8px 24px rgba(3,10,40,.3);font-size:0.75rem;font-weight:500;border-radius:10px}
.pm-acess>span{margin-right:6px}
.pm-acess button,.pm-lado-acess button{border:0;background:none;color:inherit;font-weight:800;padding:4px 6px;border-radius:3px;font-size:0.75rem;line-height:1}
.pm-acess button:hover{background:rgba(255,255,255,.16)}
.pm-acess button[aria-pressed="true"]{background:#fff;color:var(--pm-band-solid)}
.pm-acess-fechar{display:inline-grid;place-items:center;margin-left:4px;width:28px;height:28px;border-radius:99px}
/* Os três temas (Claro, Marinho, Grafite): amostra de cor + nome. As amostras
   são cores fixas de propósito — mostram o tema, não seguem o tema aberto. */
:root{--amostra-claro:#f5f7fa;--amostra-marinho:#121a30;--amostra-grafite:#1c1f25}
.temas{display:inline-flex;gap:2px;margin:0 4px}
.tema-bt{display:inline-flex;align-items:center;gap:5px}
.amostra{flex:none;width:12px;height:12px;border-radius:99px;border:1px solid rgba(128,128,128,.75)}
.amostra.claro{background:var(--amostra-claro)}.amostra.escuro{background:var(--amostra-marinho)}.amostra.grafite{background:var(--amostra-grafite)}
.tema-bt .rot{text-transform:none;letter-spacing:0;font-weight:600}
.auth-acess .tema-bt .rot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* na tela de entrada, só a amostra */

/* A coluna do menu. Cinza da barra de menu da identidade, grupos em caixa alta e
   a tela aberta em azul vivo — as mesmas cores da barra de antes, em pé. */
.pm-corpo{display:grid;grid-template-columns:var(--lado) minmax(0,1fr);align-items:start}
.pm-corpo.recolhido{grid-template-columns:minmax(0,1fr)}
.pm-corpo.recolhido .pm-lado{display:none}
.pm-lado{position:sticky;top:var(--topo,0px);height:calc(100vh - var(--topo,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  display:flex;flex-direction:column;padding:12px 8px 0;background:var(--pm-nav-bg);color:var(--pm-nav-ink);border-right:1px solid var(--pm-nav-line)}
.pm-lado ul{list-style:none;margin:0;padding:0}
.pm-lado li button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;color:inherit;border-radius:8px;
  font-size:0.875rem;font-weight:400;line-height:1.3;padding:7px 10px;margin:1px 0}
.pm-lado li button svg{flex:none;opacity:.8}
/* foco do teclado sobre a moldura escura: branco (o azul do --accent sumia no marinho) */
.pm-band :focus-visible,.pm-lado :focus-visible{outline-color:#fff}
.pm-lado li button:hover{background:var(--menu-hover)}
.pm-lado li button[aria-current="page"]{background:var(--menu-sel-bg);color:var(--menu-sel-ink);box-shadow:inset 3px 0 0 var(--menu-sel-barra);font-weight:500}
.pm-lado li button[aria-current="page"] svg{opacity:1}
.pm-grupo li button{padding-left:14px}
.pm-lado .breve{font-size:0.6875rem;font-weight:700;color:var(--ink-3);border:1px solid var(--line);border-radius:99px;padding:0 6px}
.pm-papeis{display:flex;flex-wrap:wrap;gap:4px;padding:0 4px 10px}
.pm-lado .papel{background:#ffffff1f;color:#fff}
.pm-lado .papel.b{background:var(--gold);color:#2b1d00}
.pm-soltos{padding-bottom:6px}
.pm-grupo summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 10px;margin-top:4px;border-radius:8px;
  font-size:0.8125rem;font-weight:500;color:color-mix(in oklab,var(--pm-nav-ink) 72%,transparent)}
.pm-grupo summary::-webkit-details-marker{display:none}
.pm-grupo summary>span:first-child{flex:1}
.pm-grupo summary::after{content:"";flex:none;width:5px;height:5px;margin:0 4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.8}
.pm-grupo[open] summary::after{transform:rotate(45deg)}
.pm-grupo summary:hover{background:var(--menu-hover)}
.pm-grupo ul{padding-bottom:6px}
/* pedidos esperando: com o grupo fechado, o número vai para o título */
.pm-aviso{min-width:20px;padding:1px 6px;border-radius:99px;background:var(--gold);color:#2b1d00;font-size:0.6875rem;text-align:center;letter-spacing:0}
.pm-lado-topo,.pm-lado-acess,.pm-lado-sair,.pm-veu{display:none}
.pm-lado-pe{margin-top:auto;display:grid;gap:10px;padding:14px 10px 16px}
.pm-recolher{display:flex;align-items:center;gap:6px;border:0;background:none;color:inherit;font-size:0.8125rem;font-weight:600;padding:4px 0;justify-self:start}
.pm-recolher:hover{text-decoration:underline}
.pm-lado-cr{font-size:0.75rem;font-weight:500;opacity:.7}
.main{max-width:var(--largura);margin:0 auto;padding:24px 24px 64px;min-width:0}
@media (max-width:1100px){.pm-sis span{display:none}}
/* Barra de atalhos no rodapé (21/09/2026), só no celular. `--baixo` é a altura
   dela: tudo que flutua no pé da tela (a barra do lote, o aviso de versão, o
   rodapé de ações e o próprio conteúdo) se levanta por essa variável, senão a
   barra tapa o botão de salvar. O último botão abre a gaveta do menu. */
:root{--baixo:0px}
.pm-baixo{display:none}
@media (max-width:860px){
  :root{--baixo:58px}
  .pm-baixo{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(10,25,60,.10);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .pm-baixo button{border:0;background:none;display:grid;justify-items:center;align-content:center;gap:3px;min-height:var(--baixo);padding:6px 4px;
    font-size:0.75rem;font-weight:500;color:var(--ink-2)}
  .pm-baixo button[aria-current="page"],.pm-baixo button[aria-expanded="true"]{color:var(--pm-ativo);box-shadow:inset 0 3px 0 var(--pm-ativo)}
  .pm-baixo svg{flex:none}
  /* o Lançar, no meio: círculo no azul do botão principal, levantado sobre a barra
     (a borda na cor da barra faz o recorte); a tela aberta muda só o rótulo */
  .pm-baixo button.pm-baixo-lancar{align-content:end;padding-top:0;padding-bottom:9px}
  .pm-baixo-circulo{display:grid;place-items:center;width:54px;height:54px;margin-top:-28px;border-radius:50%;
    background:var(--botao);color:var(--botao-ink);border:4px solid var(--surface);box-shadow:var(--shadow)}
  .pm-baixo button.pm-baixo-lancar[aria-current="page"]{box-shadow:none}
  .pm-baixo button.pm-baixo-lancar:active .pm-baixo-circulo{background:var(--botao-hover)}
}
@media print{.pm-baixo{display:none}}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.eyebrow{font-size:0.8125rem;color:var(--ink-3);font-weight:500}
.page-title{font-family:var(--f-body);font-weight:500;font-size:1.75rem;letter-spacing:-.015em;line-height:1.2;color:var(--brand);margin-top:2px}
.page-lead{color:var(--ink-2);max-width:68ch;margin-top:6px}
.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);margin-bottom:16px;font-size:0.875rem}
.banner svg{flex:none;margin-top:1px}
.banner.b{border-color:color-mix(in oklab,var(--brass) 40%,var(--line));background:var(--brass-wash)}
.banner.w{border-color:color-mix(in oklab,var(--warn) 55%,var(--line));background:var(--warn-wash)}
.banner.c{border-color:color-mix(in oklab,var(--crit) 45%,var(--line));background:var(--crit-wash);color:var(--crit-ink)}
.banner.ok{border-color:color-mix(in oklab,var(--good) 45%,var(--line));background:var(--good-wash);color:var(--good-ink)}
.banner strong{font-weight:700}
.banner .acoes{margin-top:8px}

@media (max-width: 860px){
  /* No celular a faixa só identifica: o nome, a acessibilidade e o Sair vão para
     a gaveta do menu. Continua presa no alto, com 60 px (V34: as marcas cresceram). */
  .pm-faixa{min-height:60px;padding:6px 16px;gap:10px}
  .pm-quem,.pm-lado-mostrar,.pm-acess{display:none}
  .pm-wrap{padding:0 16px}
  /* marcas maiores no celular (21/09/2026, pedido do Murilo: estavam pequenas perto
     do nome do policial) — cabem até em 320 px */
  .brasao{height:44px}
  .pm-marca{height:34px}
  .selo{height:38px}
  .pm-sep{margin:8px 0}
  .pm-sis span{display:none}
  .pm-sis b{font-size:1.375rem}
  /* A coluna vira gaveta, por cima de tudo, aberta pelo "Menu" do rodapé.
     Fechada, fica fora da tela E invisível — senão o Tab entraria nela. */
  .pm-corpo{display:block}
  .pm-corpo.recolhido .pm-lado{display:flex}
  .pm-lado{position:fixed;top:0;bottom:0;left:0;z-index:40;width:min(320px,86vw);height:auto;padding-top:0;border-right:0;
    transform:translateX(-105%);visibility:hidden;box-shadow:6px 0 24px rgba(3,10,40,.35)}
  .pm-lado.aberto{transform:none;visibility:visible}
  .pm-lado-topo{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:10px 8px 10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));
    background:var(--pm-band);color:#fff}
  .pm-lado-topo b{display:block;font-size:0.9375rem}
  .pm-lado-topo span{display:block;font-size:0.8125rem;opacity:.85}
  .pm-lado-fechar{margin-left:auto;flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:#fff;border-radius:99px}
  .pm-lado-fechar:hover{background:rgba(255,255,255,.16)}
  .pm-lado li button{min-height:44px}
  .pm-grupo summary{min-height:44px}
  .pm-lado-acess{display:flex;flex-wrap:wrap;gap:4px}
  .pm-lado-acess button{min-width:40px;min-height:40px;border:1px solid var(--pm-nav-line)}
  .pm-lado-acess .tema-bt{padding:0 10px}
  .pm-lado-acess button[aria-pressed="true"]{background:var(--pm-ativo);color:var(--pm-ativo-ink);border-color:var(--pm-ativo)}
  .pm-lado .pm-lado-sair{display:block;border-color:var(--pm-nav-ink);color:var(--pm-nav-ink);min-height:44px}
  .pm-recolher{display:none}
  .pm-lado-pe{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .pm-veu{display:block;position:fixed;inset:0;z-index:39;border:0;padding:0;background:var(--veu)}
  html.gaveta-aberta{overflow:hidden}
  .main{padding:18px 16px calc(24px + var(--baixo))}   /* folga para a barra de atalhos do rodapé */
  .page-title{font-size:1.375rem}   /* no celular o título é menor (21/09/2026, pedido do Murilo: "nomes menores, mais organizado") */
  .page-title.ola{font-size:1.125rem}   /* o "Olá, …" da abertura, menor ainda: quem manda na tela é o conteúdo */
  /* Na abertura, no celular, sai a frase que explica o menu: quem está no celular
     já tem o menu no rodapé. No computador ela fica. */
  .inicio-explica{display:none}
}
/* Celular estreito: quem encolhe é o tamanho, não a identidade — o brasão do
   STATIO e o nome ficam na faixa (até 20/09/2026 o STATIO sumia aqui). */
@media (max-width: 420px){
  .pm-id{gap:8px}
  .pm-sis b{letter-spacing:.1em}
}

/* Tela de toque (21/09/2026): alvo de dedo tem 44 px, não 34. Vale por
   `pointer: coarse` — quem decide é o APARELHO, não a largura: tablet deitado
   também é dedo. Medido antes: o par "Ação ostensiva / Ocorrência", por onde
   começa todo lançamento na rua, tinha 34 px; o Sair, 29; as letras da
   acessibilidade, 16. */
@media (pointer: coarse){
  .btn{min-height:44px}
  .btn.sm{min-height:36px}
  .seg button{min-height:44px;padding-left:14px;padding-right:14px}
  .input,select.input{min-height:44px}
  .pm-lado li button,.pm-grupo summary{min-height:44px}
  .pm-sair{min-height:36px;padding:8px 12px}
  .pm-acess-abrir{min-height:36px;min-width:44px}
  .pm-acess-fechar{width:36px;height:36px}
  .pm-acess button{min-width:34px;min-height:34px}
  .btn-x{width:34px;height:34px}
  .check input{width:24px;height:24px}
}

/* ---------- blocos ---------- */
.grid{display:grid;gap:16px}
/* item de grade não estica pelo conteúdo mínimo (tabela larga dentro da coluna empurrava a página) */
.grid>*{min-width:0}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.cols-2{grid-template-columns:1fr}}
/* botão de texto longo no celular: quebra em vez de empurrar a página */
@media (max-width:480px){.btn{white-space:normal;text-align:center;max-width:100%}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;min-width:0}
.card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;margin-bottom:12px}
.card-title{font-weight:500;font-size:0.9688rem}
.card-sub{font-size:0.8125rem;color:var(--ink-3)}
.sec-title{font-family:var(--f-body);font-weight:500;font-size:1.0625rem;color:var(--ink);margin:22px 0 10px}
.field{display:grid;gap:5px;min-width:0;align-content:start}
.field>span,.field>label{font-size:0.8125rem;font-weight:500;color:var(--ink-2)}
.field .help{font-size:0.7812rem;color:var(--ink-3)}
.input{width:100%;border:1px solid var(--line-campo);background:var(--surface);border-radius:var(--radius);padding:9px 11px;min-width:0}
.input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.input.codigo{font-family:var(--f-mono);font-size:1.5rem;letter-spacing:.35em;text-align:center;padding:10px 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);padding:8px 14px;font-weight:500;font-size:0.875rem;color:var(--ink);white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--botao);border-color:var(--botao);color:var(--botao-ink);font-weight:500}
.btn.primary:hover{background:var(--botao-hover);border-color:var(--botao-hover)}
.btn.danger{color:var(--crit-ink);border-color:color-mix(in oklab,var(--crit) 45%,var(--line))}
.btn.ghost{border-color:transparent;background:none;color:var(--accent)}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:0.75rem;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.chip.ok{background:var(--good-wash);color:var(--good-ink)}
.chip.pend{background:var(--warn-wash);color:var(--warn-ink)}
.chip.neu{background:var(--surface-3);color:var(--ink-2)}
.note{font-size:0.7812rem;color:var(--ink-3);display:flex;gap:6px;align-items:center;margin-top:4px}
.note svg{flex:none}
/* .note é flex por causa do ícone: negrito solto no meio da frase viraria um item
   do flex e quebraria a linha. Texto com marcação inline vai dentro de um <span>. */
.msg{font-size:0.8438rem;font-weight:600;border-radius:var(--radius);padding:8px 12px}
.msg.erro{background:var(--crit-wash);color:var(--crit-ink)}
.msg.info{background:var(--accent-wash);color:var(--accent)}
.kv{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:6px 14px;font-size:0.875rem;margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.lista{margin:0;padding-left:18px;display:grid;gap:4px;font-size:0.875rem;color:var(--ink-2)}
.empty{padding:28px;text-align:center;color:var(--ink-3)}

/* ---------- acesso (entrar, primeiro acesso, autenticador) ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-art{position:relative;background:var(--pm-band);color:#fff;padding:40px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;gap:24px}
.auth-art canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.22}
.auth-art>*{position:relative}
/* o brasão é mais alto que largo: medida pela ALTURA, senão ele empurra o
   texto para fora da faixa nas telas estreitas. */
.auth-art .logo-grande{height:clamp(170px,24vw,290px)}
.auth-art .brand .selo{height:38px}
/* brasão centrado na faixa azul, com uma linha só embaixo */
.auth-marca{display:grid;justify-items:center;text-align:center;gap:18px}
.auth-art .def{max-width:30ch;font-family:var(--f-display);font-size:1.125rem;font-weight:500;
  letter-spacing:.02em;line-height:1.3;opacity:.92}
.auth-art .rodape{font-size:0.8125rem;opacity:.8}
.auth-acess{display:flex;gap:4px;align-items:center;font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.auth-acess button{border:0;background:none;color:#fff;font-weight:800;padding:2px 5px;border-radius:3px;font-size:0.75rem;line-height:1}
.auth-acess button:hover{background:rgba(255,255,255,.16)}
.auth-acess button[aria-pressed="true"]{background:#fff;color:var(--pm-band-solid)}
.auth-topo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px 16px;background:var(--surface)}
.auth-card{width:min(400px,100%);display:grid;gap:16px}
.auth-card form{display:grid;gap:16px}
.timeline{display:grid;gap:0;border-left:2px solid var(--line);margin-left:8px}
.timeline .st{position:relative;padding:0 0 16px 20px}
.timeline .st::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.timeline .st.done::before{background:var(--good);border-color:var(--good)}
.timeline .st.now::before{background:var(--warn);border-color:var(--warn)}
.qr{display:grid;justify-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.qr img{width:200px;height:200px;image-rendering:pixelated}
.segredo{font-family:var(--f-mono);font-size:0.875rem;letter-spacing:.08em;word-break:break-all;text-align:center;color:#1b2333}
.passos{margin:0;padding-left:20px;display:grid;gap:6px;font-size:0.875rem;color:var(--ink-2)}
@media (max-width:760px){.auth{grid-template-columns:1fr;min-height:0}.auth-art{padding:24px 16px;min-height:0}.auth-art .logo-grande{height:130px}}

/* ---------- gestão (etapa 2): tabelas, filtros, janelas, árvore, quadros ---------- */
.page-acoes{display:flex;flex-wrap:wrap;gap:8px}
.btn.sm{padding:5px 10px;font-size:0.8125rem;gap:6px}
.btn.danger-cheio{background:var(--crit);border-color:var(--crit);color:#fff;font-weight:700}
.btn.danger-cheio:hover{background:var(--crit-ink)}
.num{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.quebra{overflow-wrap:anywhere}
.sub{font-size:0.7812rem;color:var(--ink-3);font-weight:400}
.pequeno{font-size:0.75rem}
.opcional{font-weight:400;color:var(--ink-3)}
.espaco{flex:1}
.centro{justify-content:center;margin-top:10px}
.filtros{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-bottom:12px}
.filtros .field{min-width:180px;flex:0 1 240px}
.filtros .field:first-child{flex:1 1 260px;max-width:380px}
.filtro-upm{max-width:220px}
.contagem{font-size:0.8125rem;color:var(--ink-3);margin:0 0 8px}
.tabela-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
/* Tabela larga vira CARTÃO no celular (21/09/2026). A lista nominal tinha 859 px
   de tabela numa janela de 341: dava 28,7 telas de rolagem e ainda obrigava a
   arrastar para o lado para ler a situação do lançamento. Aqui cada linha vira um
   cartão, com o nome da coluna (data-rot, posto por ui.js) na frente do valor, e
   as colunas marcadas "so-larga" saem — no cartão elas são detalhe.
   É só CSS: o MESMO html serve a tabela do computador e o cartão do telefone. */
@media (max-width:700px){
  .tabela.cartoes{display:block}
  .tabela.cartoes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabela.cartoes tbody{display:grid;gap:10px;padding:10px}
  .tabela.cartoes tr{display:grid;gap:3px;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--surface)}
  .tabela.cartoes tr:nth-child(even){background:var(--surface)}
  /* minmax(0,1fr): a coluna do cartão fica presa à largura da tela. Sem isso ela
     cresce até o conteúdo mais largo — um código sem espaço como VISITA_COMUNITARIA
     alargava o cartão inteiro para 514 px (pego na varredura das telas). */
  .tabela.cartoes tr{grid-template-columns:minmax(0,1fr)}
  .tabela.cartoes td{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;border:0;padding:0;text-align:left;white-space:normal;min-width:0;overflow-wrap:anywhere}
  .tabela.cartoes td::before{content:attr(data-rot);flex:none;min-width:76px;color:var(--ink-3);font-size:0.8125rem}
  .tabela.cartoes td.num{text-align:left}
  .tabela.cartoes td.so-larga{display:none}
  .tabela-wrap:has(.tabela.cartoes){border:0;background:none}
  /* célula sem nome de coluna (botões, caixa de marcar, o detalhe aberto): sem o
     rótulo vazio empurrando o conteúdo 76 px para dentro */
  .tabela.cartoes td[data-rot=""]::before{display:none}
  .tabela.cartoes .nome{min-width:0}
  /* os botões da linha vão para o pé do cartão, à direita, e podem quebrar */
  .tabela.cartoes td.acoes{width:auto;justify-content:flex-end;white-space:normal;margin-top:6px}
  .tabela.cartoes td.acoes .acoes-linha{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
  /* a caixa de marcar sobe para o canto do cartão: não gasta uma linha sozinha */
  .tabela.cartoes tr{position:relative}
  .tabela.cartoes td.marcar{position:absolute;top:8px;right:10px}
  .tabela.cartoes tr:has(td.marcar){padding-right:48px}
  /* tabela que continua tabela (3 ou 4 colunas): o título da coluna pode quebrar
     — "Em quantas ocorrências" sozinho empurrava a tabela para fora da tela */
  /* .tabela-wrap na frente: a regra-base de .tabela th (nowrap) vem DEPOIS deste
     bloco no arquivo e ganharia no empate — pego medindo, o título continuava
     numa linha só */
  .tabela-wrap .tabela th{white-space:normal}
  /* e um respiro menor nas beiradas: 12 px de cada lado × 3 colunas eram 72 px de
     uma tela de 303 (a tabela de resultados do painel passava 5 px) */
  .tabela-wrap .tabela th,.tabela-wrap .tabela td{padding-left:9px;padding-right:9px}
}

/* Sombra de rolagem (21/09/2026): quando a faixa tem mais conteúdo do que cabe,
   aparece uma sombra na borda; ao chegar no fim, ela some. Sem isso, a tabela
   larga escondia colunas sem nenhum aviso (a linha de grupos do menu, que tinha
   o mesmo problema, virou a coluna lateral em 21/09/2026).
   É só background: as duas primeiras camadas são do tamanho do conteúdo
   (attachment local) e tapam a sombra quando a barra está no batente; as duas
   últimas ficam presas à moldura (scroll). Nada de JS. */
.tabela-wrap{
  --fundo-rolagem:var(--surface);
  background-image:
    linear-gradient(to right,var(--fundo-rolagem) 40%,transparent),
    linear-gradient(to left,var(--fundo-rolagem) 40%,transparent),
    linear-gradient(to right,color-mix(in oklab,var(--ink) 22%,transparent),transparent),
    linear-gradient(to left,color-mix(in oklab,var(--ink) 22%,transparent),transparent);
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:26px 100%,26px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll}
.tabela{width:100%;border-collapse:collapse;font-size:0.875rem}
.tabela th{text-align:left;font-size:0.8125rem;font-weight:500;color:var(--ink-3);background:transparent;padding:12px 12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabela td{padding:12px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr:hover{background:var(--surface-2)}
.tabela .num{text-align:right}
.tabela .nome{min-width:170px}
.tabela .acoes{text-align:right;white-space:nowrap;width:1%}
.acoes-linha{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.cols-3{grid-template-columns:1fr}}
/* Sala de Situação (E3, 21/09/2026): o Painel em apresentação, em letra grande.
   Em tela cheia só a sala aparece: a faixa, o menu, a barra do rodapé e a do
   "ver como" somem (a tela cheia é da página toda — o app redesenha a página a
   cada troca de painel, e um elemento em tela cheia sumiria no redesenho). */
.sala-topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin-bottom:10px}
.sala-titulo{margin:2px 0 0;font-family:var(--f-body);font-weight:500;font-size:1.75rem;color:var(--brand);line-height:1.2}
.sala-conta{font-size:1rem;color:var(--ink-3);font-weight:400;margin-left:8px}
.sala-controles{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sala-controles .input{width:auto;min-width:90px}
.sala-prox svg{transform:scaleX(-1)}
.sala-pontos{display:flex;gap:8px;margin:0 0 14px}
.sala-pontos button{width:12px;height:12px;padding:0;border-radius:50%;border:0;background:var(--line);cursor:pointer}
.sala-pontos button[aria-current="true"]{background:var(--botao);width:28px;border-radius:99px}
.sala .tile .val{font-size:clamp(2.25rem,3.6vw,3.5rem)}
.sala .tile .lbl{font-size:1rem}
.sala .tile .delta{font-size:0.9375rem}
.sala .sec-title{font-size:1.375rem}
.sala-slide > .sec-title:first-child{display:none}   /* o título do painel já está no alto da Sala */
.sala .card-title{font-size:1.125rem}
html:fullscreen .pm-top,html:fullscreen .pm-lado,html:fullscreen .pm-veu,html:fullscreen .pm-baixo,html:fullscreen .vc-barra,html:fullscreen .aviso-versao{display:none}
html:fullscreen .pm-corpo{display:block}
html:fullscreen .main{max-width:none;padding:24px 36px}
html:fullscreen body{background:var(--ground)}
@media print{.sala-controles,.sala-pontos{display:none}}
/* os três quadros da triagem (relatório mensal): no telefone, lado a lado e compactos */
@media (max-width:560px){.cols-3.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cols-3.tiles .tile{padding:10px}.cols-3.tiles .tile .val{font-size:1.375rem}.cols-3.tiles .tile .lbl{font-size:0.75rem}.cols-3.tiles .tile .delta{display:none}}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cols-4{grid-template-columns:1fr}}
/* números curtos (o serviço na unidade): no telefone ficam 2×2, não uma tela inteira de quadros */
@media (max-width:480px){.cols-4.tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles-2 .tile .val{font-size:1.625rem}}
.tiles{margin-bottom:16px}
.tile{display:grid;gap:4px;align-content:start}
.tile .lbl{font-size:0.8125rem;color:var(--ink-3);font-weight:500}
.tile .val{font-family:var(--f-body);font-size:2rem;font-weight:500;letter-spacing:-.01em;color:var(--brand);line-height:1}
.tile .delta{font-size:0.7812rem;color:var(--ink-3)}
/* a linha da comparação com outro período (039): sem cor — mais ocorrência não é bom nem ruim por si */
.tile .delta.comp{font-size:0.75rem}
.tile .btn{justify-self:start;margin-top:4px}
.arvore{list-style:none;margin:0;padding:0}
.arvore li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 4px;border-bottom:1px solid var(--line-2)}
.arvore li:last-child{border-bottom:0}
.arvore li.nivel-1{padding-left:24px}
.arvore li.nivel-2{padding-left:48px}
.arvore li.nivel-3{padding-left:72px}
.arvore .tp{font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--pm-ativo);border:1px solid color-mix(in oklab,var(--pm-ativo) 40%,var(--line));border-radius:99px;padding:0 7px}
.parametros{display:grid;gap:18px;max-width:640px}
.parametros .input{max-width:160px}
textarea.input{resize:vertical;font-family:inherit}
textarea.planilha{font-family:var(--f-mono);font-size:0.8125rem;white-space:pre;overflow-x:auto}
.lista-escolha{padding:4px}
.lista-escolha option{padding:5px 6px;border-radius:3px}
/* janela (modal): sempre com o ✕ no alto */
.janela-fundo{position:fixed;inset:0;z-index:50;background:var(--veu);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto}
.janela{background:var(--surface);color:var(--ink);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.35);width:min(520px,100%);display:grid}
.janela.larga{width:min(760px,100%)}
.janela-topo{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px 12px 0 0}
.janela-topo h2{flex:1;margin:0;font-family:var(--f-body);font-size:1.125rem;font-weight:500}
.janela-fechar{border:0;background:none;color:inherit;padding:6px;border-radius:4px;display:inline-flex}
.janela-fechar:hover{background:var(--surface-2)}
.janela-corpo{display:grid;gap:14px;padding:18px}
.janela-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:6px;border-top:1px solid var(--line-2);margin-top:4px}
/* no telefone a janela ocupa a tela; o conteúdo começa do alto (sem isso, a janela curta
   espalhava título, texto e botões pela altura inteira) */
@media (max-width:560px){.janela-fundo{padding:0}.janela,.janela.larga{width:100%;min-height:100%;border-radius:0;align-content:start}.janela-topo{border-radius:0}}
html[data-contraste="alto"] .janela{border:2px solid var(--line)}
html[data-contraste="alto"] .tabela th{background:#000;color:var(--ink)}

/* ---------- policial e validador (etapa 3): lançar, histórico, fila ---------- */
.cat-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.cat-dot.cat-preventiva{background:var(--s1)} .cat-dot.cat-proativa{background:var(--s2)} .cat-dot.cat-reativa{background:var(--s3)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:2px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:7px 12px;border-radius:var(--radius);color:var(--ink-2);font-size:0.875rem;font-weight:500}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.chip.crit{background:var(--crit-wash);color:var(--crit-ink)}
.passos-lanc{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:520px}
.passos-lanc li{border-top:4px solid var(--line);padding-top:6px;font-size:0.8125rem;font-weight:500;color:var(--ink-3)}
.passos-lanc li.feito{border-top-color:var(--accent);color:var(--accent)}
.lanc-titulo{font-size:1.1875rem;font-weight:700;margin:0 0 10px}
.lanc-cabeca{margin-bottom:6px}
.lanc-cabeca .lanc-titulo{margin:0}
/* passo 1 do lançamento em cascata: cada grupo é um <details> que abre com um
   toque; a faixa colorida da esquerda é a mesma cor dos cartões do grupo */
.lanc-cascata{display:grid;gap:8px;margin-top:14px}
.lanc-grupo{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:8px;background:var(--surface)}
.lanc-grupo.cat-preventiva{border-left-color:var(--s1)} .lanc-grupo.cat-proativa{border-left-color:var(--s2)} .lanc-grupo.cat-reativa{border-left-color:var(--s3)}
.lanc-grupo>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;cursor:pointer;list-style:none;
  font-weight:700;font-size:1rem;color:var(--ink)}
.lanc-grupo>summary::-webkit-details-marker{display:none}
.lanc-grupo>summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .15s;margin-right:4px}
.lanc-grupo[open]>summary::before{transform:rotate(45deg)}
.lanc-grupo>summary .nm{flex:1}
.lanc-grupo>summary .qt{font-size:0.75rem;font-weight:700;color:var(--ink-2);background:var(--surface-3);border-radius:99px;padding:2px 9px}
.lanc-grupo>summary:hover{background:var(--surface-2)}
.lanc-grupo[open]>summary{border-bottom:1px solid var(--line-2)}
.lanc-grupo .itemgrid{padding:10px}
.itemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.item{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:11px 12px 11px 14px;text-align:left;display:grid;gap:4px;min-height:62px;
  border-left-width:4px;color:var(--ink)}
.item.cat-preventiva{border-left-color:var(--s1)} .item.cat-proativa{border-left-color:var(--s2)} .item.cat-reativa{border-left-color:var(--s3)}
.item:hover{border-color:var(--accent)}
.item[aria-pressed="true"]{background:var(--accent-wash)}
.item .nm{font-weight:600;font-size:0.9062rem;line-height:1.2}
.item .u{font-size:0.75rem;color:var(--ink-3)}
.lanc-form{display:grid;gap:14px;max-width:720px}
.caixa-gps{border:1px dashed var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:4px;background:var(--surface-2)}
.caixa-gps .realce{color:var(--accent);display:inline-flex}
.doc-num{flex:1 1 180px;width:auto}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.check span{display:grid;gap:2px}
.resultados{border:1px solid var(--line);border-radius:8px;padding:8px 14px 12px;margin:0;display:grid;gap:2px}
.resultados legend{font-size:0.8125rem;font-weight:600;color:var(--ink-2);padding:0 4px}
.res-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line-2)}
.res-linha:last-child{border-bottom:0}
.res-linha label{font-size:0.875rem}
.res-linha .input{width:90px;text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:99px;padding:3px 4px 3px 10px;font-size:0.8125rem;background:var(--surface-2)}
.pchip .x{width:26px;height:26px;border:0;background:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)}
.pchip .x:hover{background:var(--surface-3)}
.sugestoes{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sugestoes button{display:flex;justify-content:space-between;gap:8px;width:100%;border:0;border-bottom:1px solid var(--line-2);background:var(--surface);padding:10px 12px;text-align:left;color:var(--ink)}
.sugestoes button:last-child{border-bottom:0}
.sugestoes button:hover{background:var(--accent-wash)}
.btn.arquivo{justify-self:start;cursor:pointer;position:relative}
.btn.arquivo:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.foto-previa{display:flex;gap:12px;align-items:center}
.foto-previa img{width:96px;height:96px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.foto-grande{display:block;max-width:100%;max-height:70vh;margin:0 auto;border-radius:6px}
.rodape-fixo{position:sticky;bottom:var(--baixo,0px);display:flex;gap:8px;padding:12px 0;background:linear-gradient(to top,var(--ground) 75%,transparent);z-index:5}
.btn.cresce{flex:1}
.lanc-feito{display:grid;justify-items:center;text-align:center;gap:8px;padding:28px 18px;max-width:520px;color:var(--good-ink)}
.lanc-feito h2{margin:0;color:var(--ink)}
.lanc-feito p{color:var(--ink-2);margin:0}
/* Serviço assumido (035): o cartão do alto da abertura, o aviso no Lançar e a
   escolha do tipo na janela de assumir */
.servico-card{display:grid;gap:8px;margin-bottom:12px}
.servico-card.em{border-color:color-mix(in oklab,var(--good) 45%,var(--line))}
.servico-linha{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.servico-horario{color:var(--ink-2);font-size:0.875rem}
.servico-horario b{color:var(--ink);font-weight:500}
.servico-tipo{margin:0;color:var(--ink-2);font-size:0.875rem}
.servico-card .row{margin:0}
/* o serviço no canto da abertura (21/09/2026): uma linha só; o detalhe abre numa janela */
.servico-selo{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:99px;padding:6px 12px;font:inherit;font-size:0.8125rem;font-weight:500;line-height:1.2;cursor:pointer;white-space:nowrap}
.servico-selo small{font-size:0.75rem;font-weight:400;color:var(--ink-2)}
.servico-selo .ponto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--good)}
.servico-selo.em{border-color:color-mix(in oklab,var(--good) 50%,var(--line));background:var(--good-wash)}
.servico-selo.pend{border-color:color-mix(in oklab,var(--warn) 50%,var(--line));background:var(--warn-wash)}
.servico-selo.pend .ponto{background:var(--warn)}
.servico-selo:hover{border-color:var(--ink-3)}
.servico-na-janela{margin:0}
/* a linha da unidade, com o selo no canto direito: cabe em qualquer largura e com qualquer nome */
.inicio-topo{margin-bottom:16px}
.inicio-quem{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;min-height:32px}
.servico-aviso{display:flex;align-items:center;gap:6px;margin:0 0 12px;color:var(--ink-2);font-size:0.875rem}
.servico-tipos{border:0;padding:0;margin:0 0 14px;display:grid;gap:8px;min-width:0}
.servico-tipos legend{font-size:0.8125rem;font-weight:500;color:var(--ink-2);margin-bottom:6px;padding:0}
.opcao{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-campo);border-radius:10px;cursor:pointer;background:var(--surface)}
.opcao input{margin-top:3px;accent-color:var(--botao);flex:none}
.opcao b{display:block;font-weight:500}
.opcao small{display:block;color:var(--ink-3);font-size:0.8125rem}
.opcao:has(input:checked){border-color:var(--botao);background:color-mix(in oklab,var(--botao) 8%,var(--surface))}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.stats3 .s{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:3px;background:var(--surface)}
.stats3 .s b{font-family:var(--f-body);font-weight:500;font-size:1.625rem;line-height:1;color:var(--brand)}
.stats3 .s span{font-size:0.75rem;color:var(--ink-2)}
.lista-lanc,.lista-fila{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.lanc-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 12px;border-bottom:1px solid var(--line-2)}
.lanc-li:last-child,.fila-item:last-child{border-bottom:0}
.lanc-li .cat-dot{margin-top:6px}
.t1{font-weight:500;overflow-wrap:anywhere}
.t2{font-size:0.8125rem;color:var(--ink-3);overflow-wrap:anywhere}
/* Celular (21/09/2026): títulos de cartão e nomes da lista um pouco menores. Esta
   regra vem DEPOIS das de base de propósito: no mesmo peso de seletor, ganha a última. */
@media (max-width:860px){.card-title,.t1{font-size:0.9375rem}}
.t2.recusa{color:var(--crit-ink)}
.t2.obs{font-style:italic}
.acoes-linha.esquerda{justify-content:flex-start;flex-wrap:wrap;margin-top:6px;align-items:center}
.dia{margin-bottom:14px}
.dia .eyebrow{margin:0 0 6px}
.fila-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px;border-bottom:1px solid var(--line-2)}
.fila-item input[type=checkbox]{width:22px;height:22px;margin-top:2px;accent-color:var(--accent)}
.fila-item.bloqueado{background:var(--surface-2)}
.fila-corpo{display:grid;gap:3px;min-width:0}
.fila-corpo .t1{display:flex;align-items:center;gap:8px;cursor:pointer}
.lista-fila{margin:10px 0 70px}
.barra-lote{position:fixed;left:50%;bottom:calc(16px + var(--baixo,0px));transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  width:min(640px,calc(100% - 24px));padding:10px 14px;border-radius:8px;background:var(--pm-titulo);color:var(--pm-titulo-ink);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.barra-lote .btn:not(.primary){background:var(--surface);color:var(--ink)}
.barra-lote .btn.danger{color:var(--crit-ink)}
html[data-contraste="alto"] .item,html[data-contraste="alto"] .stats3 .s,html[data-contraste="alto"] .lista-lanc,html[data-contraste="alto"] .lista-fila{border-color:#bdbdbd}
html[data-contraste="alto"] .barra-lote{border:2px solid var(--ink)}
@media (max-width:560px){.itemgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats3 .s{padding:6px 10px;gap:2px}.stats3 .s b{font-size:1.0625rem}.stats3 .s span{font-size:0.6875rem}}

/* ---------- "ver como" (só o administrador vê; em simulação fica amarela) ---------- */
.vc-barra{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:0.8125rem}
.vc-barra.ativa{background:var(--warn);border-bottom-color:color-mix(in oklab,var(--warn) 60%,#000);color:#2b1d00}
.vc-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding-top:6px;padding-bottom:6px}
.vc-aviso{display:flex;gap:6px;align-items:center;margin:0}
.vc-aviso svg{flex:none}
.vc-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vc-form{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vc-sel{width:auto;max-width:220px;padding:5px 8px;font-size:0.8125rem}
.vc-barra .btn{padding:5px 12px;font-size:0.8125rem}
.vc-voltar{background:#2b1d00;border-color:#2b1d00;color:#fff}
.vc-voltar:hover{background:#000}
.vc-carregando{color:var(--ink-3)}
html[data-contraste="alto"] .vc-barra.ativa{background:#000;color:var(--warn-ink);border-bottom:2px solid var(--warn-ink)}
html[data-contraste="alto"] .vc-voltar{background:var(--warn-ink);color:#000}
@media (max-width:560px){.vc-form,.vc-sel{width:100%;max-width:none}.vc-form .btn,.vc-voltar{flex:1}}

/* ---------- etapa 4: painéis e gráficos (SVG desenhado em js/graficos.js) ---------- */
.main.atualizando .tiles,.main.atualizando .grafico,.main.atualizando .tabela-wrap,.main.atualizando .reserva-grid{opacity:.55;transition:opacity .15s}
.filtros-painel{align-items:center}
.filtros-painel .field{min-width:200px;flex:0 1 280px;max-width:320px}
.filtros-painel .check{align-items:center}
.filtros-painel .check input{margin-top:0}
.campo-data{min-width:150px!important;flex:0 0 170px!important}
.bloco-graficos{margin-bottom:22px}
.span-2{grid-column:1 / -1}
.card-sub{margin:2px 0 0}
.grafico .card-head .btn{flex:none}
.seg-grafico{margin-bottom:10px}
.viz{width:100%;min-height:40px}
.viz svg{display:block;max-width:100%;height:auto}
/* os nomes no mapa ficam de fora: o tamanho deles é o atributo que acompanha o zoom (mapa_svg.js) */
.viz text:not(.rot-bairro):not(.rot-area){font-family:var(--f-body);font-size:11px;fill:var(--ink-3)}
.viz .rot-forte{fill:var(--ink);font-weight:600}
.viz .rot-2{fill:var(--ink-2)}
.viz .base{stroke:var(--line);stroke-width:1}
.viz .grade{stroke:var(--line-2);stroke-width:1}
.viz .alvo{fill:transparent}
.viz .mk{transition:opacity .12s}
.viz .mk.apagado{opacity:.4}
.mk.s1{fill:var(--s1)} .mk.s2{fill:var(--s2)} .mk.s3{fill:var(--s3)} .mk.s4{fill:var(--s4)} .mk.s5{fill:var(--s5)} .mk.s6{fill:var(--s6)}
.viz .traco{fill:var(--ink);stroke:var(--surface);stroke-width:1}
/* mapa de calor: 0 = neutro; 1..6 = rampa (azul para ações e efetivo, verde para ocorrências — a cor da natureza) */
.cel.q0,.cel.r0{fill:var(--surface-3)}
.cel.q1{fill:var(--q1)}.cel.q2{fill:var(--q2)}.cel.q3{fill:var(--q3)}.cel.q4{fill:var(--q4)}.cel.q5{fill:var(--q5)}.cel.q6{fill:var(--q6)}
.cel.r1{fill:var(--r1)}.cel.r2{fill:var(--r2)}.cel.r3{fill:var(--r3)}.cel.r4{fill:var(--r4)}.cel.r5{fill:var(--r5)}.cel.r6{fill:var(--r6)}
.cel.destaque{stroke:var(--gold);stroke-width:2.5}
.viz .alvo[data-j]:hover{fill:rgba(255,255,255,.18);stroke:var(--ink);stroke-width:1}
/* barra que leva a algum lugar (afunilar a tela numa unidade) */
.viz .alvo.ir{cursor:pointer}
.viz .alvo.ir:hover{fill:color-mix(in oklab,var(--accent) 12%,transparent)}
.hach-fundo{fill:var(--hach-fundo)} .hach-linha{stroke:var(--hach-linha);stroke-width:2}
.viz .cel-v{font-size:10px;fill:var(--cel-num);pointer-events:none} .viz .cel-v.claro{fill:var(--cel-num-claro)}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:0.8125rem;color:var(--ink-2);margin:-2px 0 10px}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.sw.s1{background:var(--s1)} .sw.s2{background:var(--s2)} .sw.s3{background:var(--s3)} .sw.s4{background:var(--s4)} .sw.s5{background:var(--s5)} .sw.s6{background:var(--s6)} .sw.ink{background:var(--ink)}
.sw.traco-leg{width:3px;height:14px;border-radius:2px;background:var(--ink)}
.dica{position:fixed;z-index:80;pointer-events:none;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 6px 20px rgba(10,38,76,.16);padding:8px 10px;font-size:0.8125rem;min-width:150px;max-width:300px}
.dica-t{font-weight:700;margin-bottom:4px}
.dica-l{display:flex;gap:10px;align-items:baseline;justify-content:space-between}
.dica-l b{font-variant-numeric:tabular-nums;order:2}
.dica-l span{color:var(--ink-2);display:inline-flex;gap:6px;align-items:center;order:1}
.dica-l .sw{width:12px;height:3px;border-radius:2px}
.recorte{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-2px 0 14px}
.recorte .rot{font-size:0.8125rem;font-weight:700;color:var(--ink-2);margin-right:2px}
.chip-sel{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;font-size:0.8125rem;font-weight:500;color:var(--ink-2);min-height:32px}
.chip-sel:hover{border-color:var(--accent)}
.chip-sel[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.so-impressao{display:none}
.reserva-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.reserva-grid>div{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:3px;background:var(--surface-2)}
.reserva-grid b{font-family:var(--f-body);font-weight:500;font-size:1.625rem;line-height:1;color:var(--brand)}
.reserva-grid span{font-size:0.75rem;color:var(--ink-2)}
@media (max-width:640px){.reserva-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.espaco-acima{margin-top:14px;margin-bottom:8px}
.card .sec + .sec,.card .sec + .note{margin-top:8px}
.item-lista{display:inline-flex;gap:6px;align-items:center}
.lista-rodape{justify-content:space-between;margin-top:8px}
.page-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tabela td .muted{font-size:0.8125rem}
html[data-contraste="alto"] .dica{border-color:#bdbdbd}

/* ---------- etapa 5: mapa dos bairros (SVG em js/mapa_svg.js) ---------- */
.mapa-caixa{position:relative}
.mapa-svg{display:block;width:100%;height:auto;touch-action:pan-y;background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;cursor:grab;user-select:none}
.mapa-svg:active{cursor:grabbing}
.mapa-dica-toque{display:none;font-size:0.75rem;color:var(--ink-3);margin:6px 0 0}
@media (pointer:coarse){.mapa-dica-toque{display:block}}
.mapa-botoes{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:4px}
/* Fundo do mapa (etapa 11): a imagem de fora fica por baixo de tudo e não
   recebe clique — quem responde ao toque continua sendo o polígono do bairro. */
.mapa-svg g.mapa-base-camada{pointer-events:none}
.mapa-bases,.mapa-camadas{box-shadow:0 1px 4px rgba(0,0,0,.18)}
.mapa-bases button,.mapa-camadas button{padding:5px 10px;font-size:0.8125rem}
/* V50: o fundo e o botão do contorno numa faixa só no alto do mapa,
   que quebra a linha no celular sem cobrir os botões de zoom; a faixa em si não pega o
   mouse (arrastar o mapa por baixo dela continua valendo), só os botões */
.mapa-topo{position:absolute;top:8px;left:8px;right:52px;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;pointer-events:none}
.mapa-topo>*{pointer-events:auto}
/* sem contorno, o bairro é só a cor (os vizinhos da mesma cor viram uma mancha); ao passar
   o mouse, o contorno volta para dizer qual é */
.mapa-svg.sem-contorno path.bairro{stroke:transparent}
.mapa-svg.sem-contorno path.bairro:hover{stroke:var(--ink);stroke-width:2}
.mapa-credito{margin:4px 2px 0;font-size:0.6875rem;color:var(--ink-3);text-align:right}
.mapa-credito:empty{display:none}
/* Com imagem por baixo, o bairro deixa de ser bloco de cor e vira transparência
   por cima da rua: sem isso o fundo não serve para nada. */
.mapa-svg.com-base path.bairro{fill-opacity:.42}
.mapa-svg.com-base path.bairro:hover{fill-opacity:.62}
.mapa-svg.com-base path.q0,.mapa-svg.com-base path.r0,.mapa-svg.com-base path.sem{fill-opacity:.1}
.mapa-svg.com-base path.fora-escopo{fill-opacity:.3}
.mapa-svg.com-base path.area{fill-opacity:.5}
/* V50: sobre a imagem, o bairro com registro mais forte e o sem registro quase invisível —
   antes o "nenhum" escurecia a rua e o tom da rampa se perdia na imagem */
.mapa-svg.com-base path.q1,.mapa-svg.com-base path.q2,.mapa-svg.com-base path.q3,.mapa-svg.com-base path.q4,.mapa-svg.com-base path.q5,.mapa-svg.com-base path.q6,
.mapa-svg.com-base path.r1,.mapa-svg.com-base path.r2,.mapa-svg.com-base path.r3,.mapa-svg.com-base path.r4,.mapa-svg.com-base path.r5,.mapa-svg.com-base path.r6{fill-opacity:.64}
.mapa-svg.com-base path.q0,.mapa-svg.com-base path.r0{fill-opacity:.04}
/* "fora" = bairro que não é da unidade em foco. Tem de vir DEPOIS da regra de
   `path.bairro` acima: as duas têm a mesma especificidade, e sem esta linha o
   bairro de fora ficava com a mesma opacidade dos seus — some justamente o
   aviso de "este aqui não é seu". */
.mapa-svg.com-base path.fora{fill-opacity:.18}
/* Rótulo por cima de imagem: branco com contorno escuro é o único par que se lê
   nos dois fundos — a rua é clara, o satélite é escuro. Seguir a cor do tema
   deixaria o nome do bairro sumido num dos dois. */
.mapa-svg.com-base text.rot-bairro{fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.78);stroke-width:3.5px;stroke-linejoin:round}
.mapa-svg.com-base circle.pt{stroke:#fff;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.mapa-svg.com-base{--mapa-divisa:#ffffff; --mapa-divisa-fundo:rgba(0,0,0,.75); --mapa-listra:rgba(255,255,255,.75)}
.mapa-svg.com-base text.rot-area{fill:#fff;stroke:rgba(0,0,0,.78)}
.mapa-botoes .btn{min-width:34px;justify-content:center;font-weight:700;background:var(--surface)}
.mapa-svg path.bairro{fill:var(--mapa-bairro);stroke:var(--mapa-borda);stroke-width:1;vector-effect:non-scaling-stroke;fill-rule:evenodd;transition:fill-opacity .12s}
.mapa-svg path.bairro:hover{stroke:var(--ink);stroke-width:2}
.mapa-svg path.bairro[data-act]{cursor:pointer}
.mapa-svg path.q0,.mapa-svg path.r0{fill:var(--mapa-vazio)}
.mapa-svg path.q1{fill:var(--q1)}.mapa-svg path.q2{fill:var(--q2)}.mapa-svg path.q3{fill:var(--q3)}.mapa-svg path.q4{fill:var(--q4)}.mapa-svg path.q5{fill:var(--q5)}.mapa-svg path.q6{fill:var(--q6)}
.mapa-svg path.r1{fill:var(--r1)}.mapa-svg path.r2{fill:var(--r2)}.mapa-svg path.r3{fill:var(--r3)}.mapa-svg path.r4{fill:var(--r4)}.mapa-svg path.r5{fill:var(--r5)}.mapa-svg path.r6{fill:var(--r6)}
.mapa-svg path.fora{fill-opacity:.35}
.mapa-svg path.neutro{fill:var(--mapa-neutro)}
.mapa-svg path.sel{fill:var(--mapa-sel);fill-opacity:.8}
.mapa-svg path.outra{fill:var(--mapa-outra)}
.mapa-svg path.sem{fill:var(--mapa-sem);stroke:var(--mapa-sem-borda)}
.mapa-svg path.fora-escopo{fill:var(--mapa-fora);fill-opacity:.6;pointer-events:none}
.mapa-svg path.area{fill-opacity:.75}
.mapa-svg path.c1,.sw.c1{fill:#2a78d6;background:#2a78d6}.mapa-svg path.c2,.sw.c2{fill:#eb6834;background:#eb6834}
.mapa-svg path.c3,.sw.c3{fill:#1baf7a;background:#1baf7a}.mapa-svg path.c4,.sw.c4{fill:#eda100;background:#eda100}
.mapa-svg path.c5,.sw.c5{fill:#e87ba4;background:#e87ba4}.mapa-svg path.c6,.sw.c6{fill:#008300;background:#008300}
.mapa-svg path.c7,.sw.c7{fill:#4a3aa7;background:#4a3aa7}.mapa-svg path.c8,.sw.c8{fill:#e34948;background:#e34948}
/* 045: o limite de cada área (linha forte sobre um contorno do fundo, para ler em qualquer
   cor) e o bairro de divisa listrado; nenhum dos dois pega o mouse — a dica do bairro passa */
.mapa-svg path.listrado{stroke:none;pointer-events:none}
.mapa-svg rect.listra{fill:var(--mapa-listra)}
.mapa-svg path.divisa,.mapa-svg path.divisa-fundo{fill:none;pointer-events:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.mapa-svg path.divisa-fundo{stroke:var(--mapa-divisa-fundo);stroke-width:4.5}
.mapa-svg path.divisa{stroke:var(--mapa-divisa);stroke-width:2}
.mapa-svg text.rot-area{fill:var(--mapa-rotulo);stroke:var(--mapa-rotulo-borda);stroke-width:4;paint-order:stroke;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none;font-family:var(--f-body);font-weight:600}
.sw.listrado{background:repeating-linear-gradient(45deg,var(--mapa-listra) 0 2px,transparent 2px 5px),var(--mapa-outra)}
.sw.divisa{width:16px;height:0;border-radius:0;border-top:3px solid var(--mapa-divisa)}
.tabela .sw{vertical-align:middle}
.mapa-svg circle.pt{stroke:var(--mapa-borda);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mapa-svg circle.pt.s1{fill:var(--s1)}.mapa-svg circle.pt.s2{fill:var(--s2)}.mapa-svg circle.pt.s3{fill:var(--s3)}
.mapa-svg circle.pt:hover{stroke:var(--ink);stroke-width:2}
/* mapa de calor (042): seis caminhos, um por nível; não pega o mouse (a dica do bairro
   passa através) e as bordas ficam secas para os quadrados vizinhos não mostrarem costura */
.mapa-svg path.calor{pointer-events:none;shape-rendering:crispEdges;fill-opacity:.82}
.mapa-svg.com-base path.calor{fill-opacity:.68}
.mapa-svg path.cal1{fill:var(--cal1)}.mapa-svg path.cal2{fill:var(--cal2)}.mapa-svg path.cal3{fill:var(--cal3)}
.mapa-svg path.cal4{fill:var(--cal4)}.mapa-svg path.cal5{fill:var(--cal5)}.mapa-svg path.cal6{fill:var(--cal6)}
.sw.cal1{background:var(--cal1)}.sw.cal2{background:var(--cal2)}.sw.cal3{background:var(--cal3)}
.sw.cal4{background:var(--cal4)}.sw.cal5{background:var(--cal5)}.sw.cal6{background:var(--cal6)}
/* alto contraste: fundo preto, então sem rua por baixo a rampa é a que sobe para o claro */
html[data-contraste="alto"] .mapa-svg:not(.com-base){--cal1:#6b1d1d; --cal2:#a3281c; --cal3:#d9441c; --cal4:#f07a26; --cal5:#f8b243; --cal6:#fde58b;}
html[data-contraste="alto"] .mapa-svg g.calor-camada{filter:none}
.recorte-mapa{align-items:center}
/* ocorrências do SROP no mapa (043): a origem pela cor; o anel = o BO já lançado no STATIO */
.mapa-svg circle.pt.o-pm{fill:var(--srop-pm)}.mapa-svg circle.pt.o-pjc{fill:var(--srop-pjc)}
.mapa-svg circle.pt.o-dig{fill:var(--srop-dig)}.mapa-svg circle.pt.o-out{fill:var(--srop-out)}
.mapa-svg circle.pt.lancado{fill:var(--surface);stroke-width:3}
.mapa-svg circle.pt.lancado.o-pm{stroke:var(--srop-pm)}.mapa-svg circle.pt.lancado.o-pjc{stroke:var(--srop-pjc)}
.mapa-svg circle.pt.lancado.o-dig{stroke:var(--srop-dig)}.mapa-svg circle.pt.lancado.o-out{stroke:var(--srop-out)}
.mapa-svg circle.pt.acao{opacity:.85}
.sw.o-pm{background:var(--srop-pm)}.sw.o-pjc{background:var(--srop-pjc)}.sw.o-dig{background:var(--srop-dig)}.sw.o-out{background:var(--srop-out)}
.sw.lancado{background:var(--surface);border:3px solid var(--srop-pm);border-radius:50%}
.filtros-fonte{margin-top:-6px}
/* onde faltou presença (043): a cor mede a falta de presença, não o volume */
.quadro-lacuna th[scope="row"]{font-weight:500;white-space:nowrap;text-align:left}
.quadro-lacuna td{text-align:center;min-width:64px}
.quadro-lacuna td.lac b{display:block;font-size:1rem}
.quadro-lacuna .lac-acoes{display:block;font-size:.75rem;opacity:.85}
.quadro-lacuna td.lac-vazia{color:var(--ink-3)}
.lac1,.sw.lac1{background:var(--lac1)}.lac2,.sw.lac2{background:var(--lac2)}.lac3,.sw.lac3{background:var(--lac3)}
.lac4,.sw.lac4{background:var(--lac4)}.lac5,.sw.lac5{background:var(--lac5)}.lac6,.sw.lac6{background:var(--lac6)}
.quadro-lacuna td.lac1,.quadro-lacuna td.lac2,.quadro-lacuna td.lac3{color:var(--lac-tx-claro)}
.quadro-lacuna td.lac4,.quadro-lacuna td.lac5,.quadro-lacuna td.lac6{color:var(--lac-tx-forte)}
.tabela small.bloco{display:block;color:var(--ink-3);font-size:.8125rem;margin-top:2px}
@media print{.quadro-lacuna td{min-width:0;padding:4px}}
.recorte-mapa .btn{margin-left:auto;flex:none}
@media print{.recorte-mapa .btn{display:none}}
.mapa-svg text.rot-bairro{display:none;fill:var(--mapa-rotulo);pointer-events:none;paint-order:stroke;stroke:var(--mapa-rotulo-borda);stroke-width:3;vector-effect:non-scaling-stroke;font-family:var(--f-body);font-weight:600}
.mapa-svg.perto text.rot-bairro{display:block}
.sw.q1{background:var(--q1)}.sw.q2{background:var(--q2)}.sw.q3{background:var(--q3)}.sw.q4{background:var(--q4)}.sw.q5{background:var(--q5)}.sw.q6{background:var(--q6)}
.sw.r1{background:var(--r1)}.sw.r2{background:var(--r2)}.sw.r3{background:var(--r3)}.sw.r4{background:var(--r4)}.sw.r5{background:var(--r5)}.sw.r6{background:var(--r6)}
.sw.vazio{background:var(--mapa-vazio);border:1px solid var(--line)}
.sw.sel{background:var(--mapa-sel)}.sw.outra{background:var(--mapa-outra)}.sw.sem{background:var(--mapa-sem);border:1px solid var(--mapa-sem-borda)}
.rampa-leg{display:inline-flex;gap:0}.rampa-leg .sw{border-radius:0;width:16px}
.mapa-cartao.sem-borda{border:0;padding:0;box-shadow:none}
.divisao{grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);align-items:start}
@media (max-width:860px){.divisao{grid-template-columns:1fr}}
.divisao-lado{display:grid;gap:12px}
.lista-achados{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:320px;overflow:auto}
.lista-achados small{display:block}
.resumo-divisao{display:grid;gap:8px;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--surface-2)}
.lista-sel{max-height:160px;overflow:auto;margin:0}
.lista-erros{margin:0;padding-left:18px;display:grid;gap:4px;font-size:0.875rem;max-height:320px;overflow:auto}
.fonte-mapa{font-size:0.75rem}
html[data-contraste="alto"] .mapa-svg{background:#000}

/* ---------- etapa 6: escala de serviço ---------- */
.filtro-chip{align-self:flex-end;padding-bottom:9px}
.btn.icone{padding:5px 7px}
/* minha escala */
.lista-servicos{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.servico{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:start;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--radius);padding:10px 14px}
.servico-dia{display:grid;gap:2px}
.servico-dia b{font-family:var(--f-display);font-size:1rem}
.servico-dia b::first-letter{text-transform:uppercase}
.servico-corpo{display:grid;gap:4px;min-width:0}
.passados .servico{border-left-color:var(--line)}
@media (max-width:520px){.servico{grid-template-columns:1fr;gap:4px}}
/* montar a escala */
.esc-montagem{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);gap:16px;align-items:start}
@media (max-width:980px){.esc-montagem{grid-template-columns:1fr}}
.esc-sugestao{position:sticky;top:calc(var(--topo,0px) + 8px);display:grid;gap:10px;max-height:calc(100vh - var(--topo,0px) - 24px);overflow:auto}
@media (max-width:980px){.esc-sugestao{position:static;max-height:none}}
.esc-lista-sug{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:420px;overflow:auto}
.esc-sug{display:flex;gap:8px;align-items:flex-start;padding:6px;border-radius:var(--radius-sm);cursor:pointer}
.esc-sug:hover{background:var(--surface-2)}
.esc-sug input{margin-top:3px}
.esc-sug.bloqueado{cursor:default}
.esc-linhas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.esc-linha{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;display:grid;gap:8px}
.esc-linha.marcada{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.esc-linha.com-erro{border-color:color-mix(in oklab,var(--crit) 55%,var(--line));background:var(--crit-wash)}
.esc-quem{display:flex;gap:10px;align-items:flex-start}
.esc-quem input[type=checkbox]{margin-top:4px}
.esc-nome{flex:1;min-width:0;overflow-wrap:anywhere}
.msg-linha{font-size:0.8125rem;font-weight:600;color:var(--crit-ink);margin-top:4px;display:flex;gap:4px;align-items:center}
.esc-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.esc-textos{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.esc-rot{font-size:0.75rem;font-weight:600;color:var(--ink-2)}
.esc-campos .input{padding:6px 8px}
.esc-horas b{padding:6px 0;font-family:var(--f-mono)}
.input.falta{border-color:var(--crit);background:var(--crit-wash)}
.esc-lote{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:10px 12px;margin-bottom:10px;border:1px solid var(--accent);
  border-radius:var(--radius);background:var(--accent-wash)}
.esc-lote .field{min-width:110px}
.esc-acoes{align-items:center;flex-wrap:wrap}
.esc-resumo{font-size:0.8438rem;color:var(--ink-2)}
.esc-mexido{color:var(--warn-ink)}
/* escalas do dia */
.esc-unidades{display:grid;gap:10px;margin-bottom:12px}
.esc-unidade{display:grid;gap:6px;border-left:4px solid var(--line)}
.esc-unidade.st-autorizada{border-left-color:var(--good)}
.esc-unidade.st-enviada{border-left-color:var(--warn)}
.esc-unidade.st-devolvida,.esc-unidade.st-sem{border-left-color:var(--crit)}
.esc-unidade.st-rascunho{border-left-color:var(--ink-3)}
.esc-unidade-topo{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.esc-unidade-topo h3{margin:0;font-size:1rem}
.esc-unidade p{margin:0}

/* etapa 7: rotina do mês e controle */
.btn-link{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-weight:600;text-align:left;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;overflow-wrap:break-word}
.btn-link:hover{color:var(--ink)}
.btn-x{display:inline-grid;place-items:center;border:0;background:none;color:inherit;padding:0;margin-left:2px;width:20px;height:20px;border-radius:99px;cursor:pointer}
.btn-x:hover{background:var(--surface)}
.input.peso{max-width:120px;text-align:right;font-family:var(--f-mono)}
.input.peso:placeholder-shown{border-style:dashed}
.pts-pesos .tabela{table-layout:fixed;min-width:560px}
/* no celular a tabela dos pesos vira cartão: a largura mínima de 560 px, que só
   serve à tabela, obrigava cada cartão a ter 560 px numa tela de 343 */
@media (max-width:700px){.pts-pesos .tabela.cartoes{min-width:0}.pts-pesos .input.peso{margin-left:0}}
.pts-pesos th:nth-child(1){width:34%}.pts-pesos th:nth-child(2){width:22%}.pts-pesos th:nth-child(3){width:14%}
.pts-pesos th:nth-child(4){width:18%}.pts-pesos th:nth-child(5){width:12%}
.pts-pesos .input.peso{margin-left:auto}
.pts-liga .card-head{margin-bottom:6px}
.pts-liga p{margin:0 0 8px}
.cat-regras{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 16px;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;margin:10px 0 0}
.cat-regras legend{font-weight:700;font-size:0.8125rem;padding:0 4px}
.ctl-linha-det td{background:var(--surface-2);padding-top:4px}
.ctl-dif{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:0.8125rem;overflow-wrap:anywhere}
.ctl-antes{color:var(--crit-ink);text-decoration:line-through;text-decoration-thickness:1px}
.ctl-depois{color:var(--good-ink);font-weight:600}

@media print{.pm-top{position:static}.pm-corpo{display:block}}
@media print{.pm-lado,.pm-veu,.pm-strip,.pm-acess,.pm-acess-abrir,.pm-lado-mostrar,.pm-sair,.vc-acoes,.page-acoes,.filtros,.acoes-linha,.janela-fundo,.barra-lote,.rodape-fixo,.tabela .marcar{display:none}}
@media print{.esc-sugestao,.esc-lote,.esc-unidades{display:none}}
@media print{.btn-x,.pts-liga .row,.ctl-linha-det .btn{display:none}.btn-link{color:inherit;text-decoration:none}}
@media print{.recorte,.seg-grafico,.grafico .card-head .btn,.dica,.lista-rodape .btn,.mapa-botoes{display:none}
  .so-impressao{display:block;margin-top:10px}
  .card,.grafico{break-inside:avoid}
  .main.atualizando .tiles,.main.atualizando .grafico{opacity:1}}
.proximo-servico p{margin:0}
.proximo-servico .t1::first-letter{text-transform:uppercase}

/* etapa 9: aviso de versão nova (js/atualizacao.js). Fica por cima de tudo, mas
   embaixo, para não tapar o que o policial está preenchendo. */
.aviso-versao{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + var(--baixo,0px));z-index:60;display:flex;
  align-items:center;gap:10px;max-width:min(640px,calc(100vw - 24px));padding:10px 12px;
  background:var(--pm-titulo);color:#fff;border:1px solid #0b1740;box-shadow:0 6px 20px rgba(3,10,40,.35)}
.aviso-versao p{margin:0;font-size:.9375rem}
.aviso-versao .btn{white-space:nowrap}
@media (max-width:480px){.aviso-versao{flex-wrap:wrap;justify-content:flex-end}.aviso-versao p{flex:1 1 100%}}
@media print{.aviso-versao{display:none}}

/* etapa 9: barra do trajeto da saturação (progress nativo — a CSP não deixa style="") */
.prog{display:block;width:100%;height:10px;margin:8px 0;appearance:none;border:1px solid var(--line);background:var(--surface-2)}
.prog::-webkit-progress-bar{background:var(--surface-2)}
.prog::-webkit-progress-value{background:var(--accent)}
.prog::-moz-progress-bar{background:var(--accent)}

/* =====================================================================
   IMPRESSÃO — a folha é SEMPRE clara.
   O PDF do sistema sai por window.print() (CLAUDE.md). Sem isto, quem estiver
   no modo escuro manda para o papel letra clara sobre fundo que o navegador não
   imprime: sai a folha em branco. Alto contraste idem — preto e amarelo é
   recurso de tela, não de papel. Como tudo aqui passou a ser variável, basta
   devolver os valores do tema claro; nenhuma regra de tela precisa mudar.
   ===================================================================== */
@media print{
  html[data-tema="escuro"],html[data-contraste="alto"],html[data-paleta="grafite"]:not([data-contraste="alto"]){
    --pm-band:#0e1a48; --pm-band-solid:#0e1a48;
    --pm-nav-bg:#0e1a48; --pm-nav-line:#1c2c66; --pm-nav-ink:#dfe6f5;
    --pm-ativo:#1570bf; --pm-ativo-ink:#ffffff;
    --pm-titulo:#1c2d6b; --pm-titulo-ink:#ffffff;
    --brand:#1c2433; --brand-2:#0d1b52; --brand-50:#eef3fb; --brand-100:#d9e3f3;
    --ground:#ffffff; --surface:#ffffff; --surface-2:#f3f5f9; --surface-3:#e9edf3;
    --ink:#1c2433; --ink-2:#4f5a6b; --ink-3:#646e7e;
    --line:#e3e7ee; --line-2:#edf0f4; --line-campo:#cfd5de;
    --accent:#1a5fc9; --accent-hover:#1553b0; --accent-ink:#ffffff; --accent-wash:#eaf1fc;
    --botao:#1a66d6; --botao-hover:#1553b0; --botao-ink:#ffffff;
    --brass:#865a00; --brass-wash:#fbf2dc;
    --good:#0ca30c; --good-ink:#0a6a0a; --good-wash:#e5f4e5;
    --warn:#fab219; --warn-ink:#7f5300; --warn-wash:#fdf2d8;
    --crit:#d03b3b; --crit-ink:#a52626; --crit-wash:#fbe5e5;
    --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
    --s4:#7454d6; --s5:#b8860b; --s6:#8a93a3;
    --q1:#84b5ee; --q2:#5c9de8; --q3:#2f7ddb; --q4:#2263b5; --q5:#184c8c; --q6:#0d3466;
    --r1:#66c29f; --r2:#3fb189; --r3:#1b9a69; --r4:#138057; --r5:#0d6344; --r6:#084731;
    --cal1:#fed976; --cal2:#feb24c; --cal3:#fd8d3c; --cal4:#fc4e2a; --cal5:#e31a1c; --cal6:#b10026;
    --srop-pm:#e53935; --srop-pjc:#9e1b1b; --srop-dig:#e2407a; --srop-out:#8d6e63;
    --lac1:#fde4e0; --lac2:#f9bdb4; --lac3:#f28b7d; --lac4:#df5a4a; --lac5:#bf392c; --lac6:#8c1f16; --lac-tx-claro:#1c2433; --lac-tx-forte:#ffffff;
    --hach-fundo:#f2f5f9; --hach-linha:#c3cedd; --cel-num:#12325e; --cel-num-claro:#ffffff;
    --mapa-bairro:#e3e8ef; --mapa-borda:#ffffff; --mapa-vazio:#eef1f6; --mapa-neutro:#dde3eb;
    --mapa-outra:#c3ccd8; --mapa-sem:#ffffff; --mapa-sem-borda:#b8c2d0; --mapa-fora:#edf0f4;
    --mapa-sel:#1672d6; --mapa-rotulo:#1b2333; --mapa-rotulo-borda:#ffffff;
    --mapa-divisa:#0e1a48; --mapa-divisa-fundo:#ffffff; --mapa-listra:rgba(14,26,72,.5);
  }
  html[data-contraste="alto"] a{color:#1672d6}
  html[data-contraste="alto"] .mapa-svg{background:#f4f6fa}
  html[data-contraste="alto"] .mapa-svg:not(.com-base){--cal1:#fed976; --cal2:#feb24c; --cal3:#fd8d3c; --cal4:#fc4e2a; --cal5:#e31a1c; --cal6:#b10026;}
}