/* APP019 EMERGENCIAS - folha de estilo v2 (EMERGDESIGN0911, 11/09/2026)
   Substitui app.css v1 + vidro.css. Uma folha, uma escala, uma camada.
   Base grafite elegante · ouro do APP019 so como DESTAQUE (marca, acao principal, aba ativa)
   · cores funcionais de emergencia nos 4 numeros (policia azul, saude vermelho, fogo laranja,
   civil verde) · sem vidro, sem brilho especular, sem sombra dupla, sem sombra de texto.
   Tamanhos em rem: acompanham o tamanho de letra do aparelho (Dynamic Type / escala Android).
   Piso: 13 px em texto de apoio, 16 px no corpo; 12 px so em rotulo de aba e selo curto. */

:root{
  /* --- superficies e texto (tema escuro = padrao) --- */
  --fundo:#141418;
  --superficie:#1E1F24;
  --superficie-2:#2A2B32;
  --linha:rgba(255,255,255,.09);
  --texto:#F4F4F6;
  --texto-2:#BFC3CC;
  --texto-3:#9096A2;
  --sombra:0 2px 10px rgba(0,0,0,.35);

  /* --- marca APP019 (brandbook, hex identico) --- */
  --ouro:#E9A930;               /* destaque sobre fundo escuro (8,3:1 no fundo) */
  --ouro-fundo:rgba(233,169,48,.14);
  --ouro-tinta:#2E1D02;          /* texto sobre ouro claro */
  --ouro-botao:#A86305;          /* botao de acao, liso; branco sobre ele: 4,72:1 */
  --grad-logo-texto:linear-gradient(90deg,#A86305 0%,#D18F1C 30%,#E9A930 45%,#EFAF3F 50%,#E9A930 55%,#D18F1C 70%,#A86305 100%);

  /* --- semantica de emergencia (branco sobre cada uma: >= 4,5) --- */
  --sos-policia:#1E5FBF;
  --sos-saude:#C62828;
  --sos-fogo:#C94D1C;
  --sos-civil:#1E7A46;
  --perigo:#FF8A80;
  --perigo-fundo:rgba(198,40,40,.14);
  --ok:#6FD79B;
  --ok-fundo:rgba(30,122,70,.18);

  /* --- forma e ritmo --- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --raio-card:14px; --raio-botao:12px; --raio-campo:16px; --raio-pilula:999px;
  --fonte-display:'Montserrat','Segoe UI',Roboto,sans-serif;
  --fonte-ui:'Inter','Segoe UI',Roboto,Arial,sans-serif;
  --topo:56px;
  --barra:60px;
  --alvo:48px;
}

/* tema claro: manual (modo-sol) ou automatico (auto-claro, quando o aparelho esta no claro
   e a pessoa nunca escolheu). So trocam tokens; nenhuma regra de layout muda. */
body.modo-sol,body.auto-claro{
  --fundo:#F5F6F8;
  --superficie:#FFFFFF;
  --superficie-2:#EDEFF3;
  --linha:rgba(0,0,0,.11);
  --texto:#141418;
  --texto-2:#40444D;
  --texto-3:#5E6370;
  --sombra:0 2px 10px rgba(0,0,0,.12);
  --ouro:#8A5E04;               /* 6,3:1 sobre branco */
  --ouro-fundo:rgba(138,94,4,.10);
  --perigo:#B3261E;
  --perigo-fundo:#FCE8E6;
  --ok:#0D652D;
  --ok-fundo:#E6F4EA;
}

/* ================= BASE ================= */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:100%;background:var(--fundo)}
html.modo-idoso{font-size:120%}
/* Dynamic Type do iPhone: app.js mede a letra do sistema (font:-apple-system-body), limita a 1,6x e grava aqui */
html[style*="--dt"]{font-size:calc(100% * var(--dt,1))}
html.modo-idoso[style*="--dt"]{font-size:calc(120% * var(--dt,1))}
html,body{margin:0;padding:0}
body{
  font-family:var(--fonte-ui);
  background:var(--fundo);
  color:var(--texto);
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  -webkit-user-select:none;user-select:none;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;padding:0}
a{color:var(--ouro);text-decoration:none}
:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
/* zoom por pinca liberado (WCAG 1.4.4); nos controles o toque duplo nao amplia, para o LIGAR responder ao 1.o toque */
button,a,input,select,summary,[role=button]{touch-action:manipulation}

/* ================= TOPO ================= */
#topo{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:var(--fundo);
  border-bottom:1px solid var(--linha);
  padding-top:env(safe-area-inset-top,0px);
}
#topo .linha{height:var(--topo);display:flex;align-items:center;gap:var(--e2);padding:0 var(--e4)}
#topo .marca{
  flex:1;font-family:var(--fonte-display);font-weight:800;font-size:1.0625rem;letter-spacing:.02em;
  background:var(--grad-logo-texto);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;line-height:1.1;
}
#topo .marca small{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  -webkit-text-fill-color:var(--texto-3);color:var(--texto-3);background:none;margin-top:2px;
}
body.modo-sol #topo .marca,body.auto-claro #topo .marca{background:none;-webkit-text-fill-color:var(--ouro);color:var(--ouro)}
.btopo{
  width:var(--alvo);height:var(--alvo);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--superficie);color:var(--ouro);
}
.btopo:active{background:var(--superficie-2)}
.btopo svg{width:22px;height:22px;fill:currentColor}

/* ================= CORPO ================= */
main{
  padding-top:calc(var(--topo) + env(safe-area-inset-top,0px));
  padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom,0px) + var(--e4));
  min-height:100vh;
}
.tela{display:none;padding:var(--e4) var(--e4) var(--e5)}
.tela.on{display:block;animation:sobe .16s ease-out}
@keyframes sobe{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (min-width:600px){.tela{max-width:560px;margin:0 auto}}

h2.sec{
  font-family:var(--fonte-display);font-size:.875rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--texto-2);
  margin:var(--e5) 0 var(--e2);
}
h2.sec:first-child{margin-top:0}
.nota{font-size:.875rem;color:var(--texto-3);line-height:1.45;margin:0 0 var(--e3)}
.resp-txt{font-size:1rem;line-height:1.6;color:var(--texto-2)}
h3.sub-sec{
  font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto-3);margin:var(--e4) 0 var(--e2);
}

/* ================= HERO: a pergunta e a busca ================= */
.hero{margin-bottom:var(--e4)}
.hero-txt{display:flex;flex-direction:column;gap:var(--e1);margin-bottom:var(--e3)}
.hero-kicker{
  font-family:var(--fonte-display);font-size:.8125rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ouro);
}
.hero-tit{font-family:var(--fonte-display);font-size:1.625rem;font-weight:800;line-height:1.15;color:var(--texto);letter-spacing:-.01em}
.hero-sub{font-size:.9375rem;color:var(--texto-2)}

/* campo unico: lupa + texto + microfone DENTRO, a direita */
.busca{margin-bottom:var(--e2)}
.busca .campo{
  display:flex;align-items:center;gap:var(--e2);
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio-campo);padding:0 var(--e2) 0 var(--e4);height:56px;
}
.busca .campo:focus-within{border-color:var(--ouro)}
.busca .campo>svg{width:20px;height:20px;fill:var(--texto-3);flex:none}
.busca input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;font-size:1.0625rem;color:var(--texto);
  -webkit-user-select:text;user-select:text;height:100%;
  -webkit-appearance:none;appearance:none;border-radius:0;padding:0;margin:0;box-shadow:none;
}
.busca input::-webkit-search-decoration,.busca input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.busca input::placeholder{color:var(--texto-3)}
.bmic{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--ouro-fundo);color:var(--ouro);
  display:flex;align-items:center;justify-content:center;
}
.bmic svg{width:22px;height:22px;fill:currentColor}
.bmic:active{background:var(--ouro);color:var(--ouro-tinta)}
.bmic.ouvindo{background:var(--ouro);color:var(--ouro-tinta);animation:pulsa 1.1s ease-in-out infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(233,169,48,.55)}50%{box-shadow:0 0 0 12px rgba(233,169,48,0)}}
#vozDica{font-size:.875rem;color:var(--texto-3);margin:0 var(--e1)}
#vozDica.ouvindo{color:var(--ouro);font-weight:600}
#vozResp:not(:empty){margin-bottom:var(--e4)}

/* ================= OS 4 NUMEROS: uma linha cada, LIGAR inequivoco ================= */
.sos{display:grid;grid-template-columns:1fr;gap:var(--e2);margin:var(--e3) 0 var(--e2)}
.sos-lin{
  --cor:var(--ouro);
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--e3);
  background:var(--superficie);border-radius:var(--raio-card);
  padding:10px var(--e3) 10px var(--e4);min-height:72px;
  position:relative;overflow:hidden;text-align:left;color:var(--texto);
}
.sos-lin::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--cor)}
.sos-lin:active{background:var(--superficie-2)}
.sos-lin.b190{--cor:var(--sos-policia)}
.sos-lin.b192{--cor:var(--sos-saude)}
.sos-lin.b193{--cor:var(--sos-fogo)}
.sos-lin.b199{--cor:var(--sos-civil)}
.sos-ico{
  width:44px;height:44px;border-radius:12px;background:var(--superficie-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sos-ico img{width:100%;height:100%;object-fit:contain;padding:5px;display:block}
.sos-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sos-lin .n{font-family:var(--fonte-display);font-size:2.25rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--texto)}
.sos-lin .l{font-size:1.0625rem;font-weight:700;line-height:1.15}
.sos-lin .q{font-size:.875rem;color:var(--texto-2);line-height:1.3}
.sos-bt{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--alvo);padding:0 14px;border-radius:var(--raio-botao);
  background:var(--cor);color:#fff;font-weight:800;font-size:.875rem;letter-spacing:.02em;
  flex:none;
}
.sos-bt svg{width:18px;height:18px;fill:currentColor}
.sos-txt{overflow-wrap:anywhere}
@media (max-width:400px){.sos-lin .n{font-size:2rem}}
@media (max-width:360px){.sos-lin{grid-template-columns:40px 1fr auto;gap:var(--e2)}.sos-bt{padding:0 var(--e3)}}
/* dobra: em ecras baixos (360x740) o kicker decorativo sai para os 4 numeros caberem acima da barra */
@media (max-height:760px){.hero-kicker{display:none}}
/* tela baixa (iPhone 8/SE 375x667, Android 360x640, 320x568): sem isto o 199 fica abaixo da barra.
   Subtitulo sai, campo 48 px, numero e nome na mesma linha, descricao sai; a linha fica com 56 px e o LIGAR com 44 px. */
@media (max-height:700px){
  .hero-sub{display:none}
  .hero-tit{font-size:1.375rem}
  .hero-txt{margin-bottom:var(--e2)}
  .busca .campo{height:48px}
  .sos{margin-top:var(--e2)}
  .sos-lin{min-height:56px;padding:6px var(--e3) 6px var(--e4);grid-template-columns:36px 1fr auto;gap:var(--e2)}
  .sos-ico{width:36px;height:36px;border-radius:10px}
  .sos-txt{flex-direction:row;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
  .sos-lin .n{font-size:1.5rem}
  .sos-lin .l{font-size:1rem}
  .sos-lin .q{display:none}
  .sos-bt{height:44px;padding:0 12px}
}
/* paisagem (telefone deitado): a altura e o que falta e a largura sobra — as 4 linhas compactas em 2 colunas */
@media (orientation:landscape) and (max-height:500px){
  .tela{max-width:760px}
  .hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:var(--e3);margin-bottom:var(--e2)}
  .hero-txt{margin:0}
  .hero-tit{font-size:1.25rem}
  .busca{margin:0}
  .sos{grid-template-columns:1fr 1fr;column-gap:var(--e3);margin-top:var(--e2)}
}
/* em tablet as 4 linhas continuam a largura inteira (560 px): 2 colunas cortavam "Policia Militar" */

.aviso-off{
  display:flex;gap:var(--e2);align-items:flex-start;
  background:var(--superficie-2);border-radius:var(--raio-card);padding:var(--e3) var(--e4);
  margin:var(--e2) 0;font-size:.875rem;color:var(--texto-2);line-height:1.45;
}
.aviso-off b{color:var(--texto)}
.aviso-off svg{width:18px;height:18px;fill:var(--ouro);flex:none;margin-top:1px}
/* no escuro o tom de ouro sobre grafite lia-se como castanho: superficie neutra + icone ouro; no claro fica o creme */
body.modo-sol .aviso-off,body.auto-claro .aviso-off{background:var(--ouro-fundo)}

/* ================= CARTOES E LISTAS ================= */
.card{background:var(--superficie);border-radius:var(--raio-card);overflow:hidden;margin-bottom:var(--e3)}
.item{
  display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);width:100%;
  min-height:var(--alvo);border-bottom:1px solid var(--linha);text-align:left;color:var(--texto);
}
.item:last-child{border-bottom:0}
.item:active{background:var(--superficie-2)}
.item .ico{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:var(--superficie-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--fonte-display);font-weight:800;font-size:.8125rem;color:var(--ouro);overflow:hidden;
}
.item .ico svg{width:22px;height:22px;fill:var(--texto)}
.ico.ico-marca{padding:0}
.ico.ico-marca img{width:100%;height:100%;object-fit:contain;padding:5px;display:block}
.item .txt{flex:1;min-width:0}
.item .t1{font-size:.9375rem;font-weight:600;line-height:1.3}
.item .t2{font-size:.8125rem;color:var(--texto-2);margin-top:2px;line-height:1.35}
.item .acao{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--ouro-fundo);display:flex;align-items:center;justify-content:center;
}
.item .acao svg{width:22px;height:22px;fill:var(--ouro)}
.item .chev{flex:none;width:20px;height:20px;fill:var(--texto-3)}

.selo{
  display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;padding:2px 8px;border-radius:var(--raio-pilula);
  background:var(--ok-fundo);color:var(--ok);margin-left:6px;vertical-align:1px;
}
.selo.selo-pat{background:var(--superficie-2);color:var(--texto-2)}

/* ================= FILTROS ================= */
.chips{display:flex;gap:var(--e2);overflow-x:auto;padding-bottom:var(--e1);margin-bottom:var(--e3);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:0 var(--e4);min-height:var(--alvo);display:inline-flex;align-items:center;
  border-radius:var(--raio-pilula);background:var(--superficie);
  font-size:.875rem;font-weight:600;color:var(--texto-2);white-space:nowrap;
}
.chip.on{background:var(--ouro-botao);color:#fff;font-weight:700}

/* ================= SITUACOES E GUIAS ================= */
.sit{background:var(--superficie);border-radius:var(--raio-card);margin-bottom:var(--e2);overflow:hidden}
.sit>summary{
  padding:var(--e4);min-height:var(--alvo);font-size:1rem;font-weight:600;line-height:1.35;
  display:flex;gap:var(--e3);align-items:flex-start;list-style:none;cursor:pointer;
}
.sit>summary::-webkit-details-marker{display:none}
.sit>summary .mais{flex:none;width:22px;height:22px;fill:var(--ouro);transition:transform .16s;margin-top:1px}
.sit[open]>summary .mais{transform:rotate(45deg)}
.sit[open]>summary{border-bottom:1px solid var(--linha)}
.sit .corpo{padding:var(--e3) var(--e4) var(--e4);font-size:1rem;color:var(--texto-2);line-height:1.6}
.sit .tels{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e3)}
.tel-pill{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--alvo);
  padding:0 var(--e4);border-radius:var(--raio-botao);
  background:var(--ouro-botao);color:#fff;font-weight:800;font-size:.9375rem;
}
.tel-pill svg{width:16px;height:16px;fill:#fff}
.tel-pill.vazia{background:var(--superficie-2);color:var(--ouro)}

/* bloco de acao no topo do guia: LIGUE AGORA */
.agora{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  background:var(--perigo-fundo);border-radius:var(--raio-card);padding:var(--e3) var(--e4);
  margin-bottom:var(--e3);
}
.agora b{font-size:.9375rem;color:var(--texto);line-height:1.3}
.agora .tel-pill{background:var(--sos-saude);flex:none}

.corpo h4,.nao h4,.sinais h4{
  margin:0 0 var(--e2);font-size:.8125rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-3);
}
.passos{counter-reset:p;list-style:none;padding:0;margin:0 0 var(--e3)}
.passos li{
  counter-increment:p;position:relative;padding:0 0 var(--e3) 44px;
  font-size:1rem;line-height:1.5;color:var(--texto);
}
.passos li::before{
  content:counter(p);position:absolute;left:0;top:-2px;
  width:32px;height:32px;border-radius:50%;
  background:var(--ouro-botao);color:#fff;
  font-family:var(--fonte-display);font-weight:800;font-size:.9375rem;
  display:flex;align-items:center;justify-content:center;
}
.passos li:last-child{padding-bottom:0}

.nao{background:var(--perigo-fundo);border-radius:var(--raio-card);padding:var(--e3) var(--e4);margin-top:var(--e3)}
.nao h4{color:var(--perigo)}
.nao ul,.sinais ul{margin:0;padding-left:20px;font-size:.9375rem;line-height:1.5;color:var(--texto)}
.nao li,.sinais li{margin-bottom:var(--e1)}
.sinais{background:var(--superficie-2);border-radius:var(--raio-card);padding:var(--e3) var(--e4);margin-top:var(--e3)}
.sinais h4{color:var(--ouro)}
.obs{font-size:.875rem;color:var(--texto-3);line-height:1.5;margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--linha)}

/* ================= METRONOMO RCP ================= */
.metro{
  display:flex;align-items:center;gap:var(--e4);margin-top:var(--e3);
  background:var(--superficie-2);border-radius:var(--raio-card);padding:var(--e4);
}
.metro .bola{
  width:60px;height:60px;border-radius:50%;flex:none;
  background:var(--ouro-botao);display:flex;align-items:center;justify-content:center;
  font-family:var(--fonte-display);font-weight:800;font-size:.8125rem;color:#fff;
}
.metro.ativo .bola{animation:bate .545s ease-in-out infinite}
@keyframes bate{0%,100%{transform:scale(1)}22%{transform:scale(1.2)}}
.metro .info{flex:1}
.metro .info b{display:block;font-size:1rem;font-weight:700}
.metro .info span{font-size:.875rem;color:var(--texto-2)}

/* ================= FORMULARIO (ficha, cidade) ================= */
.campo{margin-bottom:var(--e3)}
.campo label{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-3);margin-bottom:var(--e2)}
.campo input,.campo textarea,.campo select{
  width:100%;background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio-botao);padding:var(--e3) var(--e4);font-size:1rem;outline:0;min-height:var(--alvo);
  -webkit-user-select:text;user-select:text;color:var(--texto);
}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--ouro)}
.campo textarea{min-height:80px;resize:vertical}

.bt-ouro{
  display:flex;align-items:center;justify-content:center;gap:var(--e2);width:100%;
  background:var(--ouro-botao);color:#fff;
  font-weight:800;font-size:1rem;min-height:52px;padding:var(--e3) var(--e4);border-radius:var(--raio-botao);
  margin-top:var(--e3);
}
.bt-ouro:active{opacity:.9}
.bt-ouro svg{width:20px;height:20px;fill:#fff;flex:none}
.bt-vazio{
  display:flex;align-items:center;justify-content:center;gap:var(--e2);width:100%;
  background:var(--superficie);color:var(--ouro);
  font-weight:700;font-size:.9375rem;min-height:var(--alvo);padding:var(--e3) var(--e4);
  border-radius:var(--raio-botao);margin-top:var(--e2);
}
.bt-vazio svg{width:20px;height:20px;flex:none;fill:currentColor}
.bt-vazio:active{background:var(--superficie-2)}

/* ================= BARRA INFERIOR ================= */
#barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--fundo);border-top:1px solid var(--linha);
  padding-bottom:env(safe-area-inset-bottom,0px);display:flex;
}
#barra button{
  flex:1;height:var(--barra);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--texto-3);font-size:.75rem;font-weight:600;letter-spacing:.01em;
}
#barra button svg{width:24px;height:24px;fill:currentColor}
#barra button.on{color:var(--ouro)}
#barra button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}

/* ================= DIVERSOS ================= */
.vazio{text-align:center;padding:var(--e6) var(--e4);color:var(--texto-3);font-size:.9375rem}
.vazio svg{width:44px;height:44px;fill:var(--superficie-2);margin-bottom:var(--e3)}
.rodape{
  text-align:center;font-size:.8125rem;color:var(--texto-3);
  line-height:1.6;padding:var(--e5) var(--e2) var(--e2);border-top:1px solid var(--linha);margin-top:var(--e5);
}
.rodape b{color:var(--texto-2)}
.rodape .c3{display:block;margin-top:var(--e2);padding-top:var(--e2);border-top:1px solid var(--linha);font-size:.8125rem}
.rodape .c3 b{color:var(--ouro)}
/* propaganda da casa em TODOS os rodapes (ordem do Rafael 11/09): APP019 e VAGAS019, links externos (abrem o navegador) */
.promo{margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--linha);text-align:left}
.promo-lin{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--e3);
  min-height:var(--alvo);padding:var(--e2) var(--e3);margin-bottom:var(--e2);border-radius:var(--raio-card);
  background:var(--superficie);color:var(--texto-2);text-decoration:none;font-size:.875rem;line-height:1.3}
.promo-lin:active{background:var(--superficie-2)}
.promo-lin b{color:var(--texto)}
.promo-marca{font-family:var(--fonte-display);font-weight:800;font-size:.8125rem;letter-spacing:.06em;color:var(--ouro);white-space:nowrap}
.promo-marca.vagas{color:#5B8DEF}
body.modo-sol .promo-marca.vagas,body.auto-claro .promo-marca.vagas{color:#1a56b8}
.promo-ir{font-weight:700;color:var(--ouro);font-size:.8125rem;white-space:nowrap}
.promo .c3{border-top:0;padding-top:0;margin-top:var(--e1);text-align:center}
.promo-lin:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
/* atalhos de cidade */
#chipsCidade{margin-bottom:var(--e3)}
#chipsCidade:empty{display:none}
/* item de site (portal da prefeitura) como link externo */
a.item{text-decoration:none;color:inherit}


.toast{
  position:fixed;left:50%;bottom:calc(var(--barra) + env(safe-area-inset-bottom,0px) + var(--e4));
  transform:translateX(-50%) translateY(12px);z-index:60;
  background:var(--superficie-2);color:var(--texto);
  padding:var(--e3) var(--e4);border-radius:var(--raio-card);font-size:.9375rem;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  max-width:88vw;text-align:center;box-shadow:var(--sombra);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- ferramentas (tela Mais) ---- */
.grade-fer{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2);margin-bottom:var(--e2)}
.fer{
  background:var(--superficie);border-radius:var(--raio-card);
  padding:var(--e4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--e1);
  text-align:left;min-height:104px;color:var(--texto);
}
.fer svg{width:26px;height:26px;fill:var(--ouro);margin-bottom:var(--e1)}
.fer b{font-size:1rem;font-weight:700;line-height:1.25}
.fer span{font-size:.8125rem;color:var(--texto-2);line-height:1.35}
.fer:active{background:var(--superficie-2)}
.fer.on{background:var(--ouro-fundo);box-shadow:inset 0 0 0 2px var(--ouro)}

/* ---- faixa de luz: lanterna SOS e sinalizacao ---- */
#faixaLuz{
  position:fixed;inset:0;z-index:90;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e5);
}
#faixaLuz .faixa-txt{font-family:var(--fonte-display);font-size:1rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:0 var(--e5);color:#fff}
#faixaLuz .faixa-sair{background:#111;color:#fff;border:2px solid #fff;border-radius:var(--raio-pilula);padding:var(--e3) var(--e6);font-size:1rem;font-weight:800;min-height:52px}

/* ---- onde eu estou ---- */
.card.onde{padding:var(--e4);text-align:center}
.onde-rot{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ouro);margin-bottom:var(--e2)}
.onde-num{font-family:'Roboto Mono',Consolas,monospace;font-size:2rem;font-weight:700;line-height:1.15;color:var(--texto);-webkit-user-select:text;user-select:text;word-break:break-all}
.onde-leg{font-size:.8125rem;color:var(--texto-3);margin:2px 0 var(--e3);text-transform:uppercase;letter-spacing:.04em}

/* ---- patrocinio (SO em tela de consulta - voto P2) ---- */
.patroc{margin-top:var(--e4)}
.pat-card{background:var(--superficie);border-radius:var(--raio-card);padding:var(--e3) var(--e4);display:flex;flex-direction:column;gap:var(--e1);position:relative}
.pat-rot{position:absolute;top:var(--e2);right:var(--e3);font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--texto-3);background:var(--superficie-2);border-radius:6px;padding:2px 8px}
.pat-card b{font-size:.9375rem;padding-right:96px}
.pat-card span{font-size:.875rem;color:var(--texto-2)}
.pat-bt{align-self:flex-start;margin-top:var(--e2);display:inline-flex;align-items:center;gap:8px;min-height:var(--alvo);background:var(--ouro-botao);color:#fff;font-weight:800;font-size:.9375rem;padding:0 var(--e4);border-radius:var(--raio-botao)}
.pat-bt svg{width:16px;height:16px;fill:#fff}

/* ---- chave liga/desliga dos ajustes ---- */
.chave{flex:none;width:48px;height:28px;border-radius:14px;background:var(--superficie-2);position:relative;transition:background .18s}
.chave::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--texto-3);transition:transform .18s,background .18s}
.chave.on{background:var(--ouro)}
.chave.on::after{transform:translateX(20px);background:#fff}

.cx-bloq{
  width:100%;min-height:96px;margin-top:var(--e2);background:var(--superficie-2);
  border:0;border-radius:var(--raio-botao);padding:var(--e3);
  font-size:.9375rem;line-height:1.5;color:var(--texto);resize:vertical;
  -webkit-user-select:text;user-select:text;
}

/* ---- modo maos livres (voto P5) ---- */
#painelML{
  position:fixed;inset:0;z-index:80;background:var(--fundo);
  padding:calc(env(safe-area-inset-top,0px) + var(--e4)) var(--e4) calc(env(safe-area-inset-bottom,0px) + var(--e4));
  display:flex;flex-direction:column;
}
.ml-topo{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e4)}
.ml-tit{flex:1;font-size:1rem;font-weight:700;line-height:1.3;color:var(--ouro)}
.ml-sair{background:var(--superficie);color:var(--ouro);border-radius:var(--raio-pilula);padding:0 var(--e4);min-height:var(--alvo);font-weight:800;font-size:.9375rem;flex:none}
.ml-num{font-family:var(--fonte-display);font-size:.8125rem;font-weight:800;letter-spacing:.1em;color:var(--texto-3);margin-bottom:var(--e3)}
.ml-txt{flex:1;font-size:1.625rem;line-height:1.45;font-weight:600;overflow-y:auto;color:var(--texto)}
.ml-bts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--e2);margin-top:var(--e4)}
.ml-bt{background:var(--superficie);color:var(--texto);border-radius:var(--raio-botao);min-height:56px;padding:var(--e3) var(--e2);font-size:.9375rem;font-weight:700}
.ml-bt.ml-rep{background:var(--ouro-botao);color:#fff}
.ml-dica{font-size:.875rem;color:var(--texto-3);text-align:center;margin-top:var(--e3);line-height:1.4}
body.com-ml #barra,body.com-ml #topo{display:none}

/* ================= MODO IDOSO: a escala em rem ja cresce 20 % pelo html.modo-idoso;
   aqui so o que precisa de mais respiro ================= */
body.modo-idoso .hero-tit{font-size:1.75rem}
/* com letra 20 % maior (ou Dynamic Type do iPhone), o que empurrava o 199 para baixo da barra era o subtitulo
   e a descricao de cada linha: saem, e numero + nome ficam na mesma linha (medido: 4/4 a 360x740 e 375x812 @120 %) */
body.modo-idoso .hero-sub,html.letra-grande .hero-sub{display:none}
body.modo-idoso .sos-txt,html.letra-grande .sos-txt{flex-direction:row;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
body.modo-idoso .sos-lin .q,html.letra-grande .sos-lin .q{display:none}
body.modo-idoso .sos-lin,html.letra-grande .sos-lin{min-height:64px;padding:8px var(--e3) 8px var(--e4)}

/* ================= MENOS ANIMACAO ================= */
@media (prefers-reduced-motion:reduce){
  .tela.on{animation:none}
  .bmic.ouvindo{animation:none;box-shadow:0 0 0 3px var(--ouro)}
  .metro.ativo .bola{animation:none;outline:3px solid var(--ouro)}
  .chave::after,.toast{transition:none}
}