/* ==========================================================
   Acessa+  |  Santo André (SP)
   Fora do celular: página bi-tema (claro/escuro).
   Dentro do celular: paleta fixa azul/branco/verde — é a tela
   de um aparelho, tem a própria luz (escolha de projeto).
   ========================================================== */

/* ---- tokens da PÁGINA (tema claro) ---- */
:root{
  --pg-fundo:#eaf1f8;
  --pg-fundo-2:#dde8f3;
  --pg-superficie:#ffffff;
  --pg-tinta:#152233;
  --pg-tinta-2:#556880;          /* cinza com viés azul, escolhido */
  --pg-borda:#cddcec;
  --pg-azul:#1358a8;
  --pg-verde:#2c7a4b;
  --pg-amarelo:#8a6206;
  --pg-vermelho:#a92e26;
  --pg-sombra:rgba(15,45,85,.22);
  --pg-vidro:rgba(255,255,255,.75);
  --pg-realce:#f2f7fd;

  --f-display:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --f-corpo:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --f-dados:ui-monospace,"Cascadia Mono",Consolas,monospace;

  --e0:.78rem; --e1:.88rem; --e2:1rem; --e3:1.15rem;
  --e4:1.45rem; --e5:1.95rem; --e6:2.7rem;

  --base:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --pg-fundo:#0b1420; --pg-fundo-2:#0f1c2b; --pg-superficie:#142130;
    --pg-tinta:#e7eef7; --pg-tinta-2:#9aabc0; --pg-borda:#25384f;
    --pg-azul:#79b2f0; --pg-verde:#77cb96; --pg-amarelo:#e8bb5c; --pg-vermelho:#f08a80;
    --pg-sombra:rgba(0,0,0,.5); --pg-vidro:rgba(20,33,48,.75); --pg-realce:#18293c;
  }
}
:root[data-theme="dark"]{
  --pg-fundo:#0b1420; --pg-fundo-2:#0f1c2b; --pg-superficie:#142130;
  --pg-tinta:#e7eef7; --pg-tinta-2:#9aabc0; --pg-borda:#25384f;
  --pg-azul:#79b2f0; --pg-verde:#77cb96; --pg-amarelo:#e8bb5c; --pg-vermelho:#f08a80;
  --pg-sombra:rgba(0,0,0,.5); --pg-vidro:rgba(20,33,48,.75); --pg-realce:#18293c;
}
:root[data-theme="light"]{
  --pg-fundo:#eaf1f8; --pg-fundo-2:#dde8f3; --pg-superficie:#ffffff;
  --pg-tinta:#152233; --pg-tinta-2:#556880; --pg-borda:#cddcec;
  --pg-azul:#1358a8; --pg-verde:#2c7a4b; --pg-amarelo:#8a6206; --pg-vermelho:#a92e26;
  --pg-sombra:rgba(15,45,85,.22); --pg-vidro:rgba(255,255,255,.75); --pg-realce:#f2f7fd;
}

*{box-sizing:border-box}
html{font-size:var(--base)}
body{
  margin:0;
  font-family:var(--f-corpo);
  color:var(--pg-tinta);
  background:
    radial-gradient(1100px 480px at 12% -8%, var(--pg-fundo-2) 0%, transparent 62%),
    linear-gradient(168deg, var(--pg-fundo) 0%, var(--pg-fundo-2) 100%);
  min-height:100vh;line-height:1.55;overflow-x:hidden;
}
.oculto-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ================= TOPO ================= */
.topo{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  padding:.7rem clamp(.9rem,4vw,2.4rem);
  background:var(--pg-vidro);border-bottom:1px solid var(--pg-borda);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:9;
}
.topo__marca{
  font-family:var(--f-display);font-weight:700;font-size:var(--e3);
  letter-spacing:-.4px;margin-right:auto;display:flex;align-items:center;gap:.5rem;
}
.topo__marca em{font-style:normal;color:var(--pg-verde)}
.topo__logo{width:36px;height:36px;border-radius:9px;flex:0 0 auto;display:block}
.topo__rotulo{
  font-size:var(--e0);letter-spacing:.14em;text-transform:uppercase;
  color:var(--pg-tinta-2);font-weight:700;
}
.mini{
  font:inherit;font-size:var(--e1);cursor:pointer;background:transparent;
  color:var(--pg-tinta);border:2px solid var(--pg-borda);border-radius:999px;padding:.3rem .85rem;
}
.mini:hover{border-color:var(--pg-azul);color:var(--pg-azul)}
.mini[aria-pressed="true"]{background:var(--pg-azul);border-color:var(--pg-azul);color:#fff}

/* ================= PALCO ================= */
.palco{
  display:grid;gap:clamp(1.4rem,4vw,3rem);
  grid-template-columns:minmax(0,390px) minmax(0,1fr);
  align-items:start;justify-content:center;
  padding:clamp(1.2rem,4vw,2.8rem) clamp(.8rem,4vw,2.4rem) 3rem;
  max-width:1120px;margin:0 auto;
}
@media (max-width:880px){ .palco{grid-template-columns:minmax(0,1fr)} }

/* ---------- o aparelho ---------- */
.fone{
  /* paleta do APP — não muda com o tema da página */
  --azul:#1565c0; --azul-escuro:#0d47a1; --azul-claro:#e3f0fd;
  --verde:#2e7d32; --verde-claro:#e6f4e7;
  --amarelo:#f0a11a; --vermelho:#c62828; --roxo:#5e35b1;
  --tinta:#16212e; --cinza:#5b6b7c; --borda:#d7e2ee;
  --raio:16px;

  width:100%;max-width:390px;margin:0 auto;
  background:#0e1a29;border-radius:44px;padding:13px 11px;
  box-shadow:0 28px 60px var(--pg-sombra), inset 0 0 0 2px #27394f;
  position:sticky;top:5rem;
}
@media (max-width:880px){ .fone{position:static} }
.fone__topo{height:20px;display:flex;align-items:center;justify-content:center}
.fone__camera{width:54px;height:8px;background:#05090f;border-radius:99px}
.fone__barra{height:16px;display:flex;align-items:center;justify-content:center}
.fone__barra span{width:118px;height:5px;background:#455870;border-radius:99px}

.tela-area{
  position:relative;background:#fff;color:var(--tinta);
  border-radius:30px;height:660px;overflow:hidden;font-size:var(--e2);
}

/* ---------- telas ---------- */
.tela{
  position:absolute;inset:0;padding:1.05rem;overflow-y:auto;
  display:flex;flex-direction:column;gap:.7rem;animation:entra .26s ease;
}
.tela[hidden]{display:none}
@keyframes entra{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .tela{animation:none}
  .respira{transition:none}
}
.tela--centro{align-items:center;text-align:center;justify-content:center}
.tela--inicial{
  align-items:center;text-align:center;justify-content:center;
  background:linear-gradient(165deg,#1565c0 0%,#0d47a1 55%,#093068 100%);color:#fff;
}
/* o logo é feito para fundo branco: entra num cartão branco sobre o azul */
.marca-cartao{
  background:#fff;border-radius:24px;padding:.9rem;
  box-shadow:0 14px 34px rgba(4,26,60,.35);
  max-width:82%;
}
.marca-logo{display:block;width:100%;height:auto;border-radius:12px}
.slogan{font-size:var(--e3);font-weight:700;margin:1.1rem 0 1.3rem;line-height:1.3;text-wrap:balance}
.tela--inicial .sub{color:#c9dffa;margin:.15rem 0 1.3rem}
.rodape-app{margin-top:1.4rem;font-size:var(--e0);color:#9dbfe8}
.rodape-app strong{font-family:var(--f-dados);color:#8ff0a4}

/* ---------- cabeçalhos ---------- */
.cab{display:flex;align-items:center;gap:.6rem;margin:-.15rem 0 .15rem}
.cab h2{font-family:var(--f-display);font-size:var(--e4);margin:0;letter-spacing:-.3px}
.cab--azul h2{color:var(--azul-escuro)}
.cab--verde h2{color:var(--verde)}
.cab--ia h2{color:var(--roxo)}
.voltar{
  font-size:1.35rem;line-height:1;cursor:pointer;width:42px;height:42px;flex:0 0 42px;
  border:2px solid var(--borda);border-radius:12px;background:#fff;color:var(--azul-escuro);
}
.voltar:hover{background:var(--azul-claro)}
.ajuda{font-size:var(--e1);color:var(--cinza);margin:0}
.sub{color:var(--cinza);margin:.2rem 0}
.rotulo{font-weight:700;font-size:var(--e1);margin-top:.3rem}
.sub-titulo{font-family:var(--f-display);font-size:var(--e2);margin:.6rem 0 -.2rem;color:var(--verde)}

/* ---------- botões do app ---------- */
.btn{
  font:inherit;font-weight:700;cursor:pointer;background:var(--azul);color:#fff;border:0;
  border-radius:var(--raio);padding:.95rem 1.05rem;min-height:56px;text-align:center;
  box-shadow:0 4px 0 var(--azul-escuro);transition:transform .08s ease;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--azul-escuro)}
.btn--grande{font-size:var(--e3);padding:1.05rem 3rem;border-radius:999px;background:#fff;color:var(--azul-escuro);box-shadow:0 5px 0 #74acea}
.btn--verde{background:var(--verde);box-shadow:0 4px 0 #1b5e20}
.btn--ia,.btn--ia-cheio{background:var(--roxo);box-shadow:0 4px 0 #4527a0}
.btn--linha{background:#fff;color:var(--azul-escuro);border:2px solid var(--azul);box-shadow:none;min-height:50px}
.btn--linha.ok{background:var(--verde-claro);border-color:var(--verde);color:var(--verde)}
.btn--texto{background:none;color:var(--cinza);box-shadow:none;min-height:44px;text-decoration:underline}
.tela--inicial .btn--texto{color:#c9dffa}
.btn--card{display:flex;align-items:center;gap:.85rem;text-align:left;padding:.85rem 1rem}
.btn__icone{font-size:1.85rem;flex:0 0 auto}
.btn__texto{display:flex;flex-direction:column;font-size:var(--e2)}
.btn__texto small{font-weight:400;font-size:var(--e0);opacity:.92}

button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,
input:focus-visible,.foto-area:focus-within{outline:4px solid #ffb300;outline-offset:3px}

/* ---------- menus agrupados (2x2 + botões) ---------- */
.grupo-titulo{
  font-size:var(--e0);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza);margin:.3rem 0 -.25rem;
}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.quadro{
  font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.1rem;text-align:center;
  background:var(--azul-claro);color:var(--azul-escuro);
  border:2px solid #bcdcfa;border-radius:var(--raio);
  padding:.7rem .4rem;min-height:92px;
}
.quadro > span{font-size:1.7rem;line-height:1}
.quadro b{font-size:var(--e1);font-weight:700;line-height:1.15}
.quadro small{font-size:var(--e0);color:var(--cinza);font-variant-numeric:tabular-nums}
.quadro:hover{background:#d3e8fc;border-color:var(--azul)}
.quadro--verde{background:var(--verde-claro);color:#1b5e20;border-color:#bde0c1}
.quadro--verde:hover{background:#d6efd9;border-color:var(--verde)}

.btn--ajuda{background:#c2185b;box-shadow:0 4px 0 #880e4f}
.btn--calmo{background:#37474f;box-shadow:0 4px 0 #1c262b}
.btn--calmo[aria-pressed="true"]{background:#546e7a;box-shadow:0 4px 0 #263238}

/* ---------- cartão para pedir ajuda ---------- */
.tela--cartao{background:linear-gradient(180deg,#fff3f7 0%,#eef4fb 100%)}
.tela--cartao .cab--transp h2{color:#ad1457}
.cartao-msg{
  background:#fff;border:4px solid #c2185b;border-radius:var(--raio);
  padding:1.1rem .9rem;display:flex;align-items:center;justify-content:center;
  min-height:210px;box-shadow:0 10px 26px rgba(173,20,87,.18);
}
.cartao-msg__texto{
  margin:0;text-align:center;font-family:var(--f-display);
  font-size:1.5rem;font-weight:700;line-height:1.35;color:#111c28;text-wrap:balance;
}
.chip--frase.ativa{background:#c2185b;color:#fff;border-color:#880e4f}

/* ---------- alerta de barulho ---------- */
.medidor--alerta{background:#f7fbf8}
.aviso-alto{
  display:flex;flex-direction:column;gap:.15rem;text-align:center;
  background:#ffe9e6;border:3px solid var(--vermelho);border-radius:var(--raio);
  padding:.7rem;color:#8c1b1b;
}
.aviso-alto strong{font-size:var(--e3)}
.aviso-alto span{font-size:var(--e1)}
.aviso-alto[hidden]{display:none}

/* ---------- modo calmo: menos cor e movimento ---------- */
.fone.calmo .tela{animation:none}
.fone.calmo .respira{transition:none}
.fone.calmo .btn,
.fone.calmo .quadro,
.fone.calmo .marca-cartao{box-shadow:none}
.fone.calmo .btn{background:#5a7184}
.fone.calmo .btn--verde{background:#5f7f66}
.fone.calmo .btn--ia,
.fone.calmo .btn--ajuda,
.fone.calmo .btn--calmo{background:#6b6b80}
.fone.calmo .btn--grande{background:#fff;color:#33475b}
.fone.calmo .tela--inicial{background:#4b6076}
.fone.calmo .tela--calma,
.fone.calmo .tela--cartao{background:#eef1f3}
.fone.calmo .quadro{background:#eef1f4;border-color:#d6dde3;color:#33475b}
.fone.calmo .quadro--verde{background:#eef2ee;border-color:#d6ded7;color:#3b5240}
.fone.calmo .cab--azul h2,
.fone.calmo .cab--verde h2,
.fone.calmo .cab--ia h2{color:#33475b}
.fone.calmo .cartao-msg{border-color:#8f9aa5}
.fone.calmo .respira{background:#7d9d88}

/* ---------- denúncia ---------- */
.foto-area{
  display:flex;align-items:center;justify-content:center;min-height:148px;
  border:3px dashed var(--azul);border-radius:var(--raio);
  background:var(--azul-claro);cursor:pointer;overflow:hidden;
}
.foto-area--ia{border-color:var(--roxo);background:#f2ecfd}
.foto-area img{width:100%;height:148px;object-fit:cover;display:block}
.foto-area__vazio{display:flex;flex-direction:column;align-items:center;gap:.12rem;color:var(--azul-escuro);font-size:1.55rem}
.foto-area__vazio strong{font-size:var(--e2)}
.foto-area__vazio small{font-size:var(--e0);color:var(--cinza)}
.foto-area--ia .foto-area__vazio{color:var(--roxo)}

textarea,select,.busca{
  font:inherit;width:100%;padding:.65rem;border:2px solid var(--borda);
  border-radius:12px;background:#fff;color:var(--tinta);
}
textarea{resize:vertical}
select[size]{padding:.2rem}
.sugestoes,.ia-exemplos{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font:inherit;font-size:var(--e0);cursor:pointer;background:#fff;color:var(--azul-escuro);
  border:2px solid var(--borda);border-radius:999px;padding:.32rem .7rem;
}
.chip:hover{background:var(--azul-claro);border-color:var(--azul)}
.local-info{margin:0;font-size:var(--e0);color:var(--verde);font-weight:700;min-height:1.2em}
.selo-ok{
  width:84px;height:84px;border-radius:50%;background:var(--verde);color:#fff;
  display:grid;place-items:center;font-size:2.5rem;box-shadow:0 0 0 10px var(--verde-claro);
}
.protocolo{font-size:var(--e1);color:var(--cinza);margin:.2rem 0}
.protocolo strong{font-family:var(--f-dados);font-variant-numeric:tabular-nums}

/* ---------- MAPA REAL ---------- */
.filtros{display:flex;gap:.3rem;flex-wrap:wrap}
.filtro{
  font:inherit;font-size:var(--e0);font-weight:700;cursor:pointer;
  background:#fff;color:var(--cinza);border:2px solid var(--borda);
  border-radius:999px;padding:.3rem .6rem;
}
.filtro.ativo{background:var(--azul);border-color:var(--azul-escuro);color:#fff}

.mapa-caixa{position:relative}
.mapa-palco{
  position:relative;width:100%;aspect-ratio:1/1.07;overflow:hidden;
  border:2px solid var(--borda);border-radius:var(--raio);
  background:#eef3ec;cursor:grab;touch-action:none;
}
.mapa-palco.arrastando{cursor:grabbing}
.mapa-conteudo{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.mapa__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mapa__pinos{position:absolute;inset:0}

.pino-mapa{
  position:absolute;transform:translate(-50%,-50%);
  width:14px;height:14px;padding:0;border-radius:50%;
  border:2px solid #fff;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  display:grid;place-items:center;font-size:0;line-height:1;
}
.pino-mapa--verde{background:#2e7d32}
.pino-mapa--amarelo{background:#f0a11a}
.pino-mapa--vermelho{background:#c62828}
.pino-mapa--cinza{background:#78909c}
.pino-mapa.oculto{display:none}
.pino-mapa.escolhido{
  outline:3px solid #ffb300;outline-offset:2px;z-index:5;
  width:22px;height:22px;font-size:.7rem;
}
.mapa-palco.perto .pino-mapa{opacity:.35}
.mapa-palco.perto .pino-mapa.vizinho{opacity:1;width:18px;height:18px;z-index:4}
.pino-eu{
  position:absolute;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;
  background:#1565c0;border:3px solid #fff;box-shadow:0 0 0 6px rgba(21,101,192,.28);z-index:6;
}

.mapa-zoom{position:absolute;right:.5rem;bottom:.5rem;display:flex;flex-direction:column;gap:.3rem}
.mapa-zoom button{
  font:inherit;font-size:1.2rem;font-weight:700;line-height:1;cursor:pointer;
  width:38px;height:38px;border-radius:10px;border:2px solid var(--borda);
  background:rgba(255,255,255,.95);color:var(--azul-escuro);
}
.mapa-zoom button:hover{background:var(--azul-claro)}

.lista-perto{display:flex;flex-direction:column;gap:.3rem}
.item-perto{
  display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;align-items:center;
  font:inherit;font-size:var(--e1);text-align:left;cursor:pointer;
  background:#fff;border:2px solid var(--borda);border-left-width:7px;border-radius:10px;padding:.4rem .55rem;
}
.item-perto--verde{border-left-color:var(--verde)}
.item-perto--amarelo{border-left-color:var(--amarelo)}
.item-perto--vermelho{border-left-color:var(--vermelho)}
.item-perto:hover{background:var(--azul-claro)}
.item-perto b{font-weight:700}
.item-perto span.dist{font-family:var(--f-dados);font-size:var(--e0);color:var(--cinza);white-space:nowrap}

.ficha{border:2px solid var(--borda);border-left:8px solid var(--azul);border-radius:12px;padding:.75rem;background:#fbfdff}
.ficha h3{font-family:var(--f-display);margin:0 0 .15rem;font-size:var(--e2)}
.ficha--verde{border-left-color:var(--verde)}
.ficha--amarelo{border-left-color:var(--amarelo)}
.ficha--vermelho{border-left-color:var(--vermelho)}
.ficha ul{margin:.35rem 0 0;padding-left:1.05rem;font-size:var(--e1)}
.ficha .nota-ficha{font-weight:700;color:var(--azul-escuro);margin:.25rem 0}
.ficha .vazio{color:var(--cinza);font-style:italic}
.ficha .selo-osm{font-size:var(--e0);color:var(--cinza);margin:.45rem 0 0}
.fonte-dados{font-size:var(--e0);color:var(--cinza);margin:.2rem 0 0;border-top:1px solid var(--borda);padding-top:.5rem}

/* ---------- avaliação ---------- */
.perguntas{display:flex;flex-direction:column;gap:.55rem}
.pergunta{border:2px solid var(--borda);border-radius:12px;padding:.55rem .65rem}
.pergunta p{margin:0 0 .42rem;font-weight:700;font-size:var(--e1)}
.opcoes{display:flex;gap:.32rem}
.opcao{flex:1;font:inherit;font-size:var(--e0);cursor:pointer;background:#fff;border:2px solid var(--borda);border-radius:10px;padding:.42rem .2rem;min-height:42px}
.opcao[aria-pressed="true"]{background:var(--azul);color:#fff;border-color:var(--azul-escuro)}
.estrelas{font-size:2.5rem;color:var(--amarelo);letter-spacing:.08rem;line-height:1}
.nota-num{margin:.2rem 0;font-size:var(--e3);font-family:var(--f-dados);font-variant-numeric:tabular-nums}
.lista-check{list-style:none;padding:0;margin:.35rem 0 .5rem;font-size:var(--e1);text-align:left}
.lista-check li{padding:.12rem 0}

/* ---------- medidor de barulho ---------- */
.medidor{border:2px solid var(--borda);border-radius:var(--raio);padding:.9rem;text-align:center;background:#f8fbf8}
.medidor__valor{
  font-family:var(--f-dados);font-size:2.6rem;font-weight:700;line-height:1;
  color:var(--verde);font-variant-numeric:tabular-nums;
}
.medidor__rotulo{font-weight:700;font-size:var(--e2);margin-top:.15rem}
.medidor__barra{height:20px;border-radius:99px;background:#e6ebe6;margin-top:.6rem;overflow:hidden}
.medidor__barra > i{display:block;height:100%;width:0;border-radius:99px;background:var(--verde);transition:width .12s linear}
.medidor__pico{font-size:var(--e0);color:var(--cinza);margin:.4rem 0 0;font-family:var(--f-dados)}
.lista-barulho{display:flex;flex-direction:column;gap:.5rem}
.item-barulho{border:2px solid var(--borda);border-radius:12px;padding:.5rem .65rem}
.item-barulho__topo{display:flex;justify-content:space-between;gap:.5rem;font-size:var(--e1)}
.item-barulho__topo span{font-size:var(--e0);color:var(--cinza);white-space:nowrap}
.barra{height:14px;border-radius:99px;background:#eef2f7;margin-top:.38rem;overflow:hidden}
.barra > i{display:block;height:100%;border-radius:99px}
.vazio-lista{font-size:var(--e1);color:var(--cinza);font-style:italic;margin:.2rem 0}

/* ---------- relaxar ---------- */
.tela--calma{align-items:center;text-align:center;background:linear-gradient(180deg,#e7f5eb 0%,#ddeffb 100%)}
.cab--transp{width:100%}
.cab--transp h2{color:var(--verde)}
.respira{
  width:176px;height:176px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8ed6a4,#2e7d32);
  color:#fff;display:grid;place-items:center;font-size:var(--e3);font-weight:700;
  margin:.7rem 0;transition:transform 4s ease-in-out;box-shadow:0 0 0 14px rgba(46,125,50,.12);
}
.respira.dentro{transform:scale(1.26)}
.respira.fora{transform:scale(.86)}
.contador{margin:0;font-weight:700;color:var(--verde)}

/* ---------- IA ---------- */
.aviso-demo{font-size:var(--e0);background:#f2ecfd;border:2px dashed var(--roxo);color:#3d2874;border-radius:12px;padding:.5rem .65rem;margin:0}
.ia-resultado{border:2px solid var(--borda);border-radius:12px;padding:.75rem;background:#fbfaff}
.ia-resultado h3{font-family:var(--f-display);margin:0 0 .25rem;font-size:var(--e2)}
.ia-frase{font-size:var(--e3);font-weight:700;margin:.2rem 0 .45rem}
.ia-frase--verde{color:var(--verde)}
.ia-frase--amarelo{color:#96650a}
.ia-frase--vermelho{color:var(--vermelho)}
.ia-lista{margin:.25rem 0 0;padding-left:1.05rem;font-size:var(--e1)}
.ia-conf{font-size:var(--e0);color:var(--cinza);margin:.45rem 0 0}
.ia-conf b{font-family:var(--f-dados);font-variant-numeric:tabular-nums}
.pensando{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--roxo)}
.pensando i{width:14px;height:14px;border-radius:50%;border:3px solid #d5c8f4;border-top-color:var(--roxo);animation:gira .8s linear infinite;display:inline-block}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- alto contraste (dentro do app) ---------- */
.fone.contraste .tela-area,
.fone.contraste .ficha,.fone.contraste .ia-resultado,.fone.contraste .pergunta,
.fone.contraste .item-barulho,.fone.contraste .item-perto,.fone.contraste textarea,
.fone.contraste select,.fone.contraste .busca,.fone.contraste .chip,.fone.contraste .voltar,
.fone.contraste .opcao,.fone.contraste .filtro,.fone.contraste .medidor,
.fone.contraste .mapa-zoom button{background:#000;color:#fff;border-color:#ffe000}
.fone.contraste .tela--inicial,.fone.contraste .tela--calma{background:#000;color:#fff}
.fone.contraste .btn{background:#ffe000;color:#000;box-shadow:0 4px 0 #8a7a00}
.fone.contraste .btn--texto{background:none;color:#ffe000}
.fone.contraste .ajuda,.fone.contraste .sub,.fone.contraste .cab h2,
.fone.contraste .foto-area__vazio small,.fone.contraste .contador,
.fone.contraste .item-barulho__topo span,.fone.contraste .ia-conf,
.fone.contraste .fonte-dados,.fone.contraste .medidor__valor,
.fone.contraste .sub-titulo,.fone.contraste .item-perto span.dist{color:#fff}
.fone.contraste .foto-area{background:#000;border-color:#ffe000}
.fone.contraste .foto-area__vazio{color:#ffe000}
.fone.contraste .titulo-app span,.fone.contraste .rodape-app strong{color:#ffe000}
.fone.contraste .aviso-demo{background:#000;color:#ffe000}
.fone.contraste .barra,.fone.contraste .medidor__barra{background:#222}
.fone.contraste .filtro.ativo{background:#ffe000;color:#000}

/* ================= NOTAS (coluna direita) ================= */
.notas{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.cartao{
  background:var(--pg-superficie);border:1px solid var(--pg-borda);
  border-radius:18px;padding:1.3rem clamp(1rem,3vw,1.6rem);
}
.cartao h2{font-family:var(--f-display);font-size:var(--e4);margin:0 0 .5rem;letter-spacing:-.4px;text-wrap:balance}
.cartao h3{font-family:var(--f-display);font-size:var(--e2);margin:1.2rem 0 .3rem;color:var(--pg-azul)}
.cartao p{margin:.5rem 0;max-width:62ch}
.eyebrow{font-size:var(--e0);letter-spacing:.15em;text-transform:uppercase;color:var(--pg-tinta-2);font-weight:700;margin:0 0 .3rem}
.passos{list-style:none;margin:.4rem 0 0;padding:0;counter-reset:p}
.passos li{
  counter-increment:p;display:grid;grid-template-columns:auto 1fr;gap:.7rem;
  padding:.42rem 0;border-top:1px solid var(--pg-borda);align-items:baseline;
}
.passos li:first-child{border-top:0}
.passos li::before{
  content:counter(p);font-family:var(--f-dados);font-size:var(--e0);color:var(--pg-azul);
  border:1.5px solid var(--pg-borda);border-radius:6px;width:1.55rem;text-align:center;padding:.05rem 0;
}
.recursos{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.recursos li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:var(--e1);align-items:baseline}
.recursos b{color:var(--pg-tinta)}
.selo-verde{color:var(--pg-verde);font-weight:700}
.selo-amarelo{color:var(--pg-amarelo);font-weight:700}
.aviso{font-size:var(--e1);color:var(--pg-tinta-2);border-top:1px solid var(--pg-borda);margin-top:1rem;padding-top:.8rem}
.frase-chave{
  font-size:var(--e2);font-weight:700;color:var(--pg-azul);
  background:var(--pg-realce);border-radius:12px;padding:.7rem .9rem;margin:1rem 0 0;
}

.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;margin:.8rem 0 .4rem}
.numero{
  border:1px solid var(--pg-borda);border-radius:14px;padding:.7rem .8rem;
  background:var(--pg-realce);display:flex;flex-direction:column;gap:.1rem;
}
.numero b{font-family:var(--f-dados);font-size:var(--e5);line-height:1;font-variant-numeric:tabular-nums;color:var(--pg-azul)}
.numero span{font-size:var(--e0);color:var(--pg-tinta-2)}
.numero--verde b{color:var(--pg-verde)}
.numero--amarelo b{color:var(--pg-amarelo)}
.numero--vermelho b{color:var(--pg-vermelho)}

.destaque{
  border-left:5px solid var(--pg-vermelho);background:var(--pg-realce);
  border-radius:0 14px 14px 0;padding:.8rem 1rem;font-size:var(--e2);
}
.destaque b{font-family:var(--f-dados);font-variant-numeric:tabular-nums;color:var(--pg-vermelho)}

.destaque--onibus{border-left-color:var(--pg-amarelo)}
.destaque--onibus b{color:var(--pg-vermelho)}
.destaque__fecho{display:block;margin-top:.5rem;font-weight:700;color:var(--pg-tinta)}

.rodape{
  text-align:center;font-size:var(--e0);color:var(--pg-tinta-2);
  padding:0 1rem 2.5rem;line-height:1.7;
}

/* ================= INSTALAR O APP (PWA) ================= */
.mini--instalar{
  background:var(--pg-verde);border-color:var(--pg-verde);color:#fff;font-weight:700;
}
.mini--instalar:hover{filter:brightness(1.08);color:#fff;border-color:var(--pg-verde)}
.mini--instalar[hidden]{display:none}

.dlg{
  border:1px solid var(--pg-borda);border-radius:18px;
  background:var(--pg-superficie);color:var(--pg-tinta);
  padding:1.4rem clamp(1rem,4vw,1.8rem);max-width:34rem;width:calc(100% - 2rem);
  box-shadow:0 24px 60px var(--pg-sombra);
}
.dlg::backdrop{background:rgba(8,20,34,.55)}
.dlg h2{font-family:var(--f-display);font-size:var(--e4);margin:0 0 .3rem;letter-spacing:-.4px}
.dlg h3{font-family:var(--f-display);font-size:var(--e2);margin:0 0 .4rem;color:var(--pg-azul)}
.dlg__sub{color:var(--pg-tinta-2);margin:0 0 1rem;font-size:var(--e1)}
.dlg__passos{
  border:1px solid var(--pg-borda);border-radius:14px;
  padding:.9rem 1rem;background:var(--pg-realce);margin-bottom:1rem;
}
.dlg__passos[hidden]{display:none}
.dlg__passos ol{margin:.2rem 0;padding-left:1.3rem}
.dlg__passos li{margin:.3rem 0}
.dlg__nota{font-size:var(--e0);color:var(--pg-tinta-2);margin:.6rem 0 0}
.dlg .btn{width:100%;background:var(--pg-azul);box-shadow:none}