/* ================================================================ base */
*{box-sizing:border-box}
:root{
  --bg:#0b0d12;--cartao:rgba(24,27,36,.82);--cartao2:rgba(255,255,255,.04);--borda:rgba(255,255,255,.08);
  --txt:#eef0f4;--fraco:#98a0ae;--laranja:#ff9a3c;--laranja2:#ff6a55;--verde:#3ddc84;--vermelho:#ff4d5e;--azul:#5aa9ff;--amarelo:#f3c74b;
  --raio:20px;--nav:74px;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--txt);margin:0;
  padding:12px 14px calc(var(--nav) + 26px + env(safe-area-inset-bottom));max-width:1180px;margin:auto;line-height:1.4}
.fundo{position:fixed;inset:0;z-index:-1;transition:background .6s;background:
  radial-gradient(700px 420px at 8% -10%,rgba(255,154,60,.15),transparent 60%),
  radial-gradient(600px 420px at 108% 8%,rgba(90,169,255,.12),transparent 60%),var(--bg)}
body.fora .fundo{background:radial-gradient(900px 560px at 50% 0%,rgba(255,40,60,.38),transparent 65%),#160709}
h1{font-size:22px;margin:6px 0}h2{font-size:21px;margin:0;font-weight:800}h3{font-size:15px;margin:0 0 10px;font-weight:700}
.fraco{color:var(--fraco);font-size:14px}.pequeno{font-size:12.5px}.ok-t{color:var(--verde)}.no-t{color:#ff8a95}.am-t{color:var(--amarelo)}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ================================================================ cartões e layout */
.cartao{background:var(--cartao);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--borda);
  border-radius:var(--raio);padding:16px;margin-bottom:12px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cab-cartao{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.cab-cartao h3{margin:0}
.cab-tela{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 2px 14px}
.grade-agora,.grade-casa,.grade-2{display:grid;gap:12px;grid-template-columns:1fr}
.grade-agora .col,.grade-2>div{min-width:0}
@media (min-width:900px){
  .grade-agora{grid-template-columns:minmax(330px,.85fr) 1.15fr}
  .grade-casa{grid-template-columns:1.4fr minmax(320px,.9fr);align-items:start}
  .grade-2{grid-template-columns:1fr 1fr;align-items:start}
  .grade-casa #painelCasa{position:sticky;top:12px}
}
.tela{animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}}

/* ================================================================ topo */
.topo{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 12px}
.marca{display:flex;gap:10px;align-items:center}.marca b{display:block;font-size:17px}.marca small{color:var(--fraco);font-size:13px}
.logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:linear-gradient(135deg,#ff9a3c,#ff5f6d)}
.topo-dir{display:flex;gap:8px;align-items:center}
.icone{border:1px solid var(--borda);background:var(--cartao);color:#fff;border-radius:12px;width:40px;height:40px;font-size:18px;display:grid;place-items:center}
.pill{display:inline-block;font-size:13px;font-weight:600;padding:8px 12px;border-radius:99px;background:#232733;color:#bbb;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.pill.ok{background:rgba(61,220,132,.14);color:#7ff0ae}.pill.off{background:rgba(240,200,90,.13);color:#f3d58c}
/* só cor muda: animar filter/transform aqui deixava o elemento gigante no Safari do iPhone */
.pill.alerta{background:var(--vermelho);color:#fff;animation:piscaCor 1s infinite}
@keyframes piscaCor{50%{background:#ff8f9b}}
@keyframes pisca{50%{opacity:.6}}
.faixa-som{display:flex;width:100%;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid rgba(243,199,75,.35);background:rgba(243,199,75,.1);
  color:#f6dc8f;border-radius:14px;padding:11px 14px;margin-bottom:12px;font-size:14px;text-align:left}
.faixa-som b{margin-left:auto;background:var(--amarelo);color:#1a1405;padding:6px 12px;border-radius:99px}
.faixa-busca{border:1px solid rgba(90,169,255,.35);background:rgba(90,169,255,.1);color:#bcdcff;border-radius:14px;padding:11px 14px;margin-bottom:12px;font-size:14px}

/* ================================================================ navegação inferior */
.nav-baixo{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));z-index:8;
  display:flex;gap:2px;padding:6px;border-radius:24px;background:rgba(20,23,31,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--borda);box-shadow:0 12px 40px rgba(0,0,0,.5);width:min(560px,calc(100% - 20px))}
.nav-baixo button{flex:1;border:0;background:none;color:#8d95a3;border-radius:18px;padding:7px 2px 6px;font:600 11.5px Inter,system-ui;
  display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.nav-baixo button span{font-size:20px;filter:grayscale(.7);opacity:.75;transition:.2s}
.nav-baixo button.on{background:rgba(255,154,60,.13);color:#fff}
.nav-baixo button.on span{filter:none;opacity:1;transform:translateY(-1px)}
.nav-baixo button .ponto{position:absolute;top:5px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:var(--vermelho);box-shadow:0 0 0 2px #14171f}

/* ================================================================ botões e formulários */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:1px solid #3a4050;background:#232733;color:#eef0f4;
  border-radius:12px;font:600 14px Inter,system-ui;margin:6px 6px 0 0;transition:transform .1s,filter .2s}
.bt:active{transform:scale(.97)}.bt:disabled{opacity:.45;pointer-events:none}
.bt.largo{display:flex;width:100%;margin:8px 0 0;padding:13px;font-size:15px}
.bt.primario{border:0;background:linear-gradient(135deg,#ff9a3c,#ff6a55);color:#fff}
.bt.verde{border:0;background:linear-gradient(135deg,#25b866,#1d8f52);color:#fff}
.bt.azul{border:0;background:linear-gradient(135deg,#4c9dff,#3a6fe0);color:#fff}
.bt.perigo{border-color:#6b2c34;color:#ffb5bd;background:rgba(255,77,94,.06)}
.bt.branco{border:0;background:#fff;color:#6b0f19}.bt.contorno{background:transparent;border:2px solid rgba(255,255,255,.7);color:#fff}
.bt.fantasma{background:transparent;border:0;color:rgba(255,255,255,.85)}
.bt.mini{padding:6px 10px;font-size:13px;border-radius:10px}
.link{border:0;background:none;color:var(--laranja);font:600 13px Inter,system-ui;padding:4px}
label{display:block;font-size:13px;color:var(--fraco);margin:10px 0 0}
input,textarea,select{width:100%;padding:11px 12px;font:16px Inter,system-ui;border-radius:12px;border:1px solid #343a48;background:rgba(0,0,0,.28);color:var(--txt);margin-top:5px}
input:focus,textarea:focus{outline:2px solid rgba(255,154,60,.5);border-color:transparent}
input[type=range]{padding:0;accent-color:var(--laranja);background:none;border:0}
textarea{min-height:84px;resize:vertical}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.linha-bt{display:flex;flex-wrap:wrap;align-items:center}
.erro-txt{color:#ff8a95;font-size:14px;min-height:1em}
/* interruptor */
.interruptor{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;margin:0;color:var(--txt);font-size:14.5px}
.interruptor:last-child{border-bottom:0}
.interruptor .tx{flex:1}.interruptor .tx small{display:block;color:var(--fraco);font-size:12.5px;margin-top:2px}
.interruptor input{display:none}
.interruptor .chave{width:46px;height:28px;border-radius:99px;background:#3a3f4c;position:relative;flex-shrink:0;transition:.2s}
.interruptor .chave::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.interruptor input:checked+.chave{background:var(--verde)}
.interruptor input:checked+.chave::after{left:21px}
.chips-esc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips-esc button{border:1px solid #3a4050;background:rgba(255,255,255,.04);color:#dfe3ea;border-radius:99px;padding:7px 11px;font:600 13px Inter,system-ui}
.chips-esc button.on{background:rgba(255,154,60,.18);border-color:rgba(255,154,60,.6);color:#fff}
.cores{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.cores button{width:30px;height:30px;border-radius:9px;border:2px solid transparent}.cores button.on{border-color:#fff}

/* ================================================================ guia de configuração */
.guia{background:linear-gradient(135deg,rgba(255,154,60,.16),rgba(24,27,36,.88) 55%);border-color:rgba(255,154,60,.3)}
.guia-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.progresso{height:8px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0 6px}
.progresso div{height:100%;background:linear-gradient(90deg,#ff9a3c,#ffcf6b);border-radius:9px;transition:width .6s}
.passo{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid rgba(255,255,255,.06);width:100%;background:none;border-left:0;border-right:0;border-bottom:0;color:var(--txt);text-align:left;font-size:14.5px}
.passo .num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:800;font-size:13px;flex-shrink:0}
.passo.feito .num{background:var(--verde);color:#062b14}.passo.feito .tx b{color:var(--fraco);text-decoration:line-through}
.passo.atual .num{background:var(--laranja);color:#2b1300;box-shadow:0 0 0 4px rgba(255,154,60,.25)}
.passo .tx{flex:1}.passo .tx small{display:block;color:var(--fraco);font-size:12.5px}
.passo .seta{color:var(--laranja);font-weight:700;font-size:13px;white-space:nowrap}

/* ================================================================ status (hero) */
.hero{display:flex;gap:16px;align-items:center;transition:background .5s,border-color .5s}
.hero-txt{flex:1;min-width:0}
.rotulo{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--fraco)}
.hero-titulo{font-size:24px;font-weight:800;line-height:1.15;margin:3px 0 4px}
.hero-sub{font-size:14px;color:#c9ced8}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:12px;font-weight:600;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.08);color:#d6dae2}
.avatar{position:relative;width:80px;height:80px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#3a3f50,#1b1e27);font-size:44px}
.avatar.grande{width:96px;height:96px;font-size:56px;margin:0 auto 6px}
.avatar span{animation:flutua 3s ease-in-out infinite;display:inline-block}
.avatar .anel{position:absolute;inset:-5px;border-radius:50%;border:3px solid var(--verde);opacity:.85}
.avatar .anel::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid currentColor;color:var(--verde);animation:onda 2.2s ease-out infinite}
@keyframes flutua{50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes onda{from{transform:scale(1);opacity:.8}to{transform:scale(1.45);opacity:0}}
.hero.ok{background:linear-gradient(135deg,rgba(61,220,132,.16),var(--cartao) 60%);border-color:rgba(61,220,132,.3)}
.hero.fora{background:linear-gradient(135deg,rgba(255,77,94,.5),rgba(120,20,30,.65));border-color:var(--vermelho)}
.hero.fora .anel,.hero.fora .anel::after{border-color:var(--vermelho);color:var(--vermelho)}
.hero.fora .avatar span{animation:assusta .6s ease-in-out infinite}
.hero.neutro .anel,.hero.neutro .anel::after{border-color:#777;color:#777}
.hero.busca .anel,.hero.busca .anel::after{border-color:var(--azul);color:var(--azul)}
@keyframes treme{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes assusta{50%{transform:scale(1.15) rotate(6deg)}}
.acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.acao{text-align:left;border:1px solid var(--borda);background:var(--cartao);border-radius:18px;padding:14px;color:var(--txt);display:flex;flex-direction:column;gap:3px;transition:transform .12s}
.acao:active{transform:scale(.98)}
.acao.larga{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(255,154,60,.18),var(--cartao) 70%);border-color:rgba(255,154,60,.3)}
.acao.larga div{display:flex;flex-direction:column;gap:2px}.acao span{font-size:24px}.acao b{font-size:14.5px}.acao small{color:var(--fraco);font-size:12px}
#btProcurar{background:linear-gradient(135deg,rgba(90,169,255,.2),var(--cartao) 70%);border-color:rgba(90,169,255,.3)}

/* ================================================================ mapa */
.mapa-cartao{padding:12px;transition:box-shadow .4s,border-color .4s}
.mapa-cartao.fora{border-color:var(--vermelho);animation:brilho 1.2s ease-in-out infinite}
@keyframes brilho{50%{box-shadow:0 0 0 3px rgba(255,77,94,.5),0 0 40px rgba(255,77,94,.55)}}
.mapa-wrap{position:relative;width:100%}
canvas{display:block;width:100%;border-radius:14px;touch-action:auto;user-select:none;-webkit-user-select:none}
canvas.editando{touch-action:none}
.faixa-fora{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:var(--vermelho);color:#fff;font-weight:800;padding:8px 14px;border-radius:99px;font-size:13px;letter-spacing:.5px;animation:piscaCor 1s infinite;white-space:nowrap;pointer-events:none}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;color:var(--fraco)}
.legenda span{display:flex;align-items:center;gap:6px}
.lg{display:inline-block;width:12px;height:12px;border-radius:50%}
.lg.gato{background:var(--laranja)}.lg.nuvem{background:rgba(255,150,40,.4)}.lg.placa{background:#1d7a4c;border:2px solid #fff}
.lg.seguro{border-radius:3px;border:2px solid var(--verde)}.lg.perigo{border-radius:3px;border:2px dashed var(--vermelho)}
.barra-ferr{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.barra-ferr .bt{margin:0}
.dica{margin-top:10px;font-size:13px;color:var(--fraco);line-height:1.5}
.seg{display:flex;background:rgba(0,0,0,.32);border-radius:13px;padding:3px;max-width:100%;overflow-x:auto}
.seg button{border:0;background:none;color:#aab0bc;padding:9px 12px;border-radius:10px;font:600 13.5px Inter,system-ui;white-space:nowrap}
.seg button.on{background:#2d3240;color:#fff}

/* probabilidade por cômodo */
.prob{display:flex;align-items:center;gap:10px;font-size:14px;margin:8px 0}
.prob .nome{width:130px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prob .trilho{flex:1;height:10px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden}
.prob .trilho div{height:100%;border-radius:6px;background:linear-gradient(90deg,#ff9a3c,#ffcf6b);transition:width .8s}
.prob.fora .trilho div{background:linear-gradient(90deg,#ff4d5e,#ff8a95)}
.prob .pct{width:44px;text-align:right;color:var(--fraco);font-variant-numeric:tabular-nums}

/* ================================================================ listas */
.item{padding:12px;border-radius:14px;background:var(--cartao2);border:1px solid var(--borda);margin:8px 0}
.item.atual{border-color:rgba(61,220,132,.55);background:rgba(61,220,132,.07)}
.item.clica{cursor:pointer}.item.clica:active{transform:scale(.99)}
.item .cab{display:flex;justify-content:space-between;gap:8px;align-items:center}
.item .cab b{overflow:hidden;text-overflow:ellipsis;min-width:0}
.item .cab span{color:var(--fraco);white-space:nowrap;font-size:13.5px}
.cor{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.barras{display:inline-flex;gap:2px;align-items:flex-end;height:14px;vertical-align:-2px;margin-right:6px}
.barras i{width:4px;border-radius:1px;background:rgba(255,255,255,.18)}
.barras i:nth-child(1){height:5px}.barras i:nth-child(2){height:8px}.barras i:nth-child(3){height:11px}.barras i:nth-child(4){height:14px}
.barras i.on{background:var(--verde)}.barras.s1 i.on{background:var(--vermelho)}.barras.s2 i.on{background:var(--amarelo)}
.ev{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;align-items:flex-start}
.ev:last-child{border-bottom:0}
.ev .h{color:var(--fraco);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:44px}
.ev .bolha{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);flex-shrink:0;font-size:15px}
.ev.saiu .bolha{background:rgba(255,77,94,.2)}.ev.voltou .bolha{background:rgba(61,220,132,.2)}
.ev.saiu .tx{color:#ffadb5;font-weight:600}.ev.voltou .tx{color:#a4f3c2;font-weight:600}
.dia{margin:14px 0 2px;font-weight:700;text-transform:capitalize;color:var(--fraco);font-size:13px}
.dia:first-child{margin-top:0}
.vazio{text-align:center;padding:24px 10px;color:var(--fraco);font-size:14px}.vazio .grande{font-size:38px;display:block;margin-bottom:8px}
.filtros{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros button{border:1px solid var(--borda);background:var(--cartao);color:#aab0bc;padding:9px 13px;border-radius:99px;font:600 13px Inter,system-ui;white-space:nowrap}
.filtros button.on{background:#2d3240;color:#fff;border-color:rgba(255,154,60,.45)}
.resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.resumo .n{background:var(--cartao);border:1px solid var(--borda);border-radius:16px;padding:12px}
.resumo .n b{display:block;font-size:22px}.resumo .n small{color:var(--fraco);font-size:12px}

/* ================================================================ mapear andando */
.medidor-mini{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:rgba(0,0,0,.25);margin:10px 0}
.medidor-mini .big{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;min-width:74px}
.medidor-mini .trilho{flex:1;height:12px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.medidor-mini .trilho div{height:100%;border-radius:8px;transition:width .5s,background .5s}
.passos{padding-left:20px;line-height:1.6;font-size:14px;color:#c9ced8;margin:8px 0}
.passos li{margin:3px 0}
.qualidade{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);margin-top:10px}
.qualidade .anel-q{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;flex-shrink:0}
.gravando{border-color:rgba(255,154,60,.6)!important;background:rgba(255,154,60,.1)!important}

/* ================================================================ alerta em tela cheia */
.alerta{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:22px;
  background:radial-gradient(circle at 50% 30%,#c4182a,#5a0610 70%);animation:alertaFundo 1.1s ease-in-out infinite}
@keyframes alertaFundo{50%{background:radial-gradient(circle at 50% 30%,#ff2b40,#7a0815 70%)}}
.alerta-caixa{max-width:420px;width:100%;text-align:center;color:#fff}
.alerta-fechar{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
  background:rgba(0,0,0,.25);color:#fff;font-size:22px;font-weight:700;display:grid;place-items:center}
.faixa-alerta{position:sticky;top:8px;z-index:9;display:flex;width:100%;align-items:center;gap:10px;border:0;background:#c4182a;color:#fff;
  border-radius:14px;padding:12px 14px;margin-bottom:12px;font:600 14px Inter,system-ui;text-align:left;box-shadow:0 8px 24px rgba(196,24,42,.45);animation:piscaCor2 1.4s infinite}
.faixa-alerta span{flex:1}.faixa-alerta b{background:#fff;color:#8a0f1c;padding:6px 12px;border-radius:99px;white-space:nowrap}
@keyframes piscaCor2{50%{background:#e2283b}}
.alerta-gato{font-size:96px;animation:assusta .6s ease-in-out infinite;filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.alerta h1{font-size:28px;font-weight:800;margin:10px 0 6px}
.alerta p{font-size:16px;margin:6px 0;opacity:.95}.alerta-hora{font-size:13px!important;opacity:.75!important;margin-bottom:18px!important}

/* ================================================================ radar (procurar) */
.radar{position:fixed;inset:0;z-index:25;background:radial-gradient(circle at 50% 35%,#13233a,#07090e 75%);display:flex;flex-direction:column;
  padding:calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto}
.radar-topo{display:flex;justify-content:space-between;align-items:center;font-size:17px}
.radar-centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0;min-height:330px}
.medidor{position:relative;width:min(300px,78vw);aspect-ratio:1}
.medidor svg{width:100%;height:100%;transform:rotate(-90deg)}
.medidor circle{fill:none;stroke-width:14;stroke-linecap:round}
.medidor .trilha{stroke:rgba(255,255,255,.08)}
.medidor .valor{stroke:var(--azul);stroke-dasharray:540;stroke-dashoffset:540;transition:stroke-dashoffset .5s,stroke .5s}
.medidor-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.medidor-ico{font-size:54px;transition:transform .3s}
.medidor-num{font-size:30px;font-weight:800;margin-top:4px}
.medidor-rot{color:var(--fraco);font-size:15px;font-weight:600}
.medidor.pulso .medidor-ico{animation:batida .3s ease}
@keyframes batida{40%{transform:scale(1.25)}}
.radar-tendencia{margin-top:14px;font-size:18px;font-weight:700;min-height:24px}
.radar-baixo{max-width:520px;width:100%;margin:0 auto}

/* ================================================================ janela e aviso */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:20px;z-index:40}
.modal-caixa{max-width:460px;width:100%;max-height:88vh;overflow:auto}
.barra-prog{height:12px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden;margin:12px 0}
.barra-prog div{height:100%;width:0;background:linear-gradient(90deg,#25b866,#7ff0ae);transition:width .6s}
.toast{position:fixed;left:50%;bottom:calc(var(--nav) + 26px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#2d3240;color:#fff;
  padding:12px 16px;border-radius:14px;font-size:14px;z-index:50;max-width:92%;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:entra .2s ease}
.toast.ok{background:#1d6b42}.toast.erro{background:#8a2230}
.tela-login{min-height:90vh;display:flex;align-items:center;justify-content:center}
.login{max-width:360px;width:100%;text-align:center}
.qr{display:block;margin:12px auto;width:240px;max-width:80%;border-radius:12px;background:#fff;padding:8px}
.codigo{font:800 34px ui-monospace,Menlo,monospace;letter-spacing:4px;text-align:center;margin:12px 0;color:#fff}
.sub{background:rgba(90,169,255,.08);border:1px solid rgba(90,169,255,.2);border-radius:14px;padding:12px;margin:10px 0}
details summary{cursor:pointer;font-weight:600;color:#c9ced8;padding:8px 0;font-size:14px}
.estado-whats{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--cartao2);border:1px solid var(--borda)}
.estado-whats .bola{width:12px;height:12px;border-radius:50%;background:#777}.estado-whats .bola.on{background:var(--verde);box-shadow:0 0 0 4px rgba(61,220,132,.2)}
@media (max-width:520px){
  .hero-titulo{font-size:20px}.avatar{width:66px;height:66px;font-size:36px}
  .resumo .n b{font-size:19px}.cab-tela h2{font-size:19px}
}