/* ====== Visual iOS ====== */
:root{--fundo:#F2F2F7;--card:#FFFFFF;--texto:#1C1C1E;--sec:#3C3C43;--mudo:#8E8E93;--sep:#E5E5EA;--azul:#007AFF;--verde:#34C759;--laranja:#FF9500;--verm:#FF3B30;--amarelo:#FFCC00;--roxo:#5E5CE6;--fill:#E9E9EB;--blur:rgba(249,249,249,.85);--raio:14px;--sombra:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06)}
@media(prefers-color-scheme:dark){:root{--fundo:#000;--card:#1C1C1E;--texto:#F2F2F7;--sec:#EBEBF5;--mudo:#8E8E93;--sep:#2C2C2E;--fill:#2C2C2E;--blur:rgba(28,28,30,.85);--sombra:0 1px 2px rgba(0,0,0,.4)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overscroll-behavior:none}
@supports(height:100dvh){body{height:100dvh}}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",Roboto,sans-serif;background:var(--fundo);color:var(--texto);font-size:16px;line-height:1.35;overflow:hidden;position:fixed;inset:0}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:34px;font-weight:800;letter-spacing:-.4px;margin:0}
h2{font-size:22px;font-weight:700;margin:0 0 6px}
h3{font-size:17px;font-weight:600;margin:0 0 8px}
.muted{color:var(--mudo)}.centro{text-align:center;padding:40px 20px}
.aba{position:absolute;inset:0;display:none;flex-direction:column;padding-bottom:calc(58px + env(safe-area-inset-bottom))}
.aba.ativa{display:flex}
.nav{display:flex;align-items:center;gap:8px;padding:calc(6px + env(safe-area-inset-top)) 14px 6px;background:var(--blur);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--sep);min-height:50px;z-index:5}
.nav.grande{padding-bottom:8px;justify-content:space-between}
.nav-titulo{flex:1;text-align:center;line-height:1.15;min-width:0}.nav-titulo small{display:block;color:var(--mudo);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-titulo b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.nav-btn{background:none;border:0;font-size:22px;padding:6px 8px;min-width:40px;color:var(--azul);border-radius:10px}
.nav-btn.azul{font-size:17px;font-weight:600}
.pill{display:inline-block;padding:2px 8px;border-radius:12px;background:var(--fill);font-size:14px}
.pill.ok{background:var(--verde);color:#fff}
.segmento{display:flex;margin:8px 14px;background:var(--fill);border-radius:10px;padding:2px}
.segmento button{flex:1;border:0;background:none;padding:6px 2px;border-radius:8px;font-size:13px;font-weight:500;color:var(--texto);white-space:nowrap}
.segmento button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.15);font-weight:600}
.conteudo{flex:1;overflow:auto;padding:0 14px 20px;-webkit-overflow-scrolling:touch}
.card{background:var(--card);border-radius:var(--raio);padding:14px;margin:10px 0;box-shadow:var(--sombra)}
.card h3{display:flex;justify-content:space-between;align-items:center}
.grupo{background:var(--card);border-radius:var(--raio);margin:10px 0;overflow:hidden;box-shadow:var(--sombra)}
.linha{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--sep);min-height:44px}
.linha:last-child{border-bottom:0}.linha.clique{cursor:pointer}.linha.clique:active{background:var(--fill)}
.linha .txt{flex:1;min-width:0}.linha .txt small{display:block;color:var(--mudo);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha .valor{color:var(--mudo);font-size:15px;white-space:nowrap}.linha .seta{color:#C7C7CC}
.linha input,.linha select,.linha textarea{flex:1;border:0;background:none;text-align:right;padding:0;min-width:0;outline:none}
.linha textarea{text-align:left;resize:vertical;min-height:60px}
.linha label{color:var(--texto);white-space:nowrap}
.rotulo{font-size:13px;color:var(--mudo);text-transform:uppercase;letter-spacing:.4px;margin:18px 14px 6px}
.busca{width:100%;border:0;background:var(--fill);border-radius:10px;padding:9px 12px;margin:8px 0;outline:none}
.btn-cheio{display:block;width:100%;border:0;background:var(--azul);color:#fff;border-radius:12px;padding:14px;font-size:17px;font-weight:600;margin:10px 0}
.btn-cheio.cinza{background:var(--fill);color:var(--azul)}.btn-cheio.verm{background:var(--verm)}
.btn-cheio.verde{background:var(--verde)}
.btn-link{background:none;border:0;color:var(--azul);font-size:16px;padding:8px}
.btn-mini{border:0;background:var(--fill);color:var(--azul);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600}
.btn-mini.azul{background:var(--azul);color:#fff}.btn-mini.verm{color:var(--verm)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.kpi{background:var(--card);border-radius:12px;padding:10px;text-align:center;box-shadow:var(--sombra)}
.kpi b{display:block;font-size:22px;font-weight:700;letter-spacing:-.3px}.kpi small{color:var(--mudo);font-size:12px}
.kpi .sub{font-size:12px;font-weight:600;display:block}.kpi .tag{display:inline-block;margin-top:2px}
.tag{display:inline-block;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:600;background:var(--fill)}
.tag.verde{background:#E8F8EC;color:#1B7A34}.tag.laranja{background:#FFF1DE;color:#A35A00}.tag.verm{background:#FFE5E3;color:#B3261E}.tag.azul{background:#E5F0FF;color:#0A5BD1}.tag.roxo{background:#ECECFD;color:#4B49B8}
@media(prefers-color-scheme:dark){.tag.verde{background:#153D22;color:#7DE39A}.tag.laranja{background:#4A2E00;color:#FFC46B}.tag.verm{background:#4A1512;color:#FF9A94}.tag.azul{background:#0E2E5A;color:#7FB5FF}.tag.roxo{background:#26254F;color:#B3B2FF}}
.insight{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--sep)}.insight:last-child{border:0}
.insight .ic{font-size:22px;width:30px;text-align:center}.insight .txt{flex:1}.insight .txt small{display:block;color:var(--mudo)}
/* palco */
.palco{flex:1;overflow:auto;position:relative;display:flex;align-items:flex-start;justify-content:center;padding:6px 10px;touch-action:pan-x pan-y pinch-zoom}
.vazio{margin:auto;text-align:center;max-width:380px;padding:30px 10px}.vazio-icone{font-size:64px}.vazio p{color:var(--mudo)}
.quadro{position:relative;display:inline-block;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--sombra);max-width:100%}
.quadro img{display:block;max-width:100%;max-height:calc(100vh - 290px);user-select:none;-webkit-user-drag:none}
.camada{position:absolute;inset:0;width:100%;height:100%}
#calor{opacity:.7;pointer-events:none;mix-blend-mode:multiply}
#vetor{pointer-events:none}
#marcadores{pointer-events:none}
.marc{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;pointer-events:auto;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.marc.sel{outline:3px solid var(--azul);outline-offset:2px}
.marc.fantasma{opacity:.45;border-style:dashed}
.marc.medindo{background:var(--azul);animation:pulsa 1s infinite;font-size:9px}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(0,122,255,.6)}50%{box-shadow:0 0 0 10px rgba(0,122,255,0)}}
.rot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:10px;background:#1C1C1E;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;pointer-events:auto;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4);border:2px solid #fff}
.rot.proposto{background:var(--laranja);border-style:dashed}
.rot small{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:10px;background:rgba(0,0,0,.65);color:#fff;padding:1px 5px;border-radius:5px;white-space:nowrap;margin-top:2px}
.mira{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border:2px dashed var(--azul);border-radius:50%;pointer-events:none}
.mapa-rodape{padding:6px 14px 8px;background:var(--blur);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--sep)}
.legenda{display:flex;flex-direction:column;gap:3px;margin-bottom:6px;font-size:11px;color:var(--mudo)}
.legenda-barra{height:8px;border-radius:4px;background:linear-gradient(90deg,#FF3B30,#FF9500,#FFCC00,#A4D65E,#34C759)}
.legenda-rot{display:flex;justify-content:space-between}
.ferramentas{display:flex;gap:4px}
.ferr{flex:1;border:0;background:var(--fill);border-radius:10px;padding:6px 0;min-width:0;font-size:18px;display:flex;flex-direction:column;align-items:center;gap:0;color:var(--texto)}
.ferr small{font-size:9px;color:var(--mudo);white-space:nowrap}.ferr.on{background:var(--azul);color:#fff}.ferr.on small{color:#fff}
.barra-comodo{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:13px;color:var(--mudo)}.barra-comodo span{flex:1}
/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--blur);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--sep);padding:6px 0 calc(4px + env(safe-area-inset-bottom));z-index:20}
.tab{flex:1;border:0;background:none;color:var(--mudo);font-size:10px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px}
.tab span{font-size:22px;line-height:1.1}.tab.on{color:var(--azul)}
/* sheet */
.sheet-fundo{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--fundo);border-radius:16px 16px 0 0;z-index:41;max-height:92vh;display:flex;flex-direction:column;animation:sobe .25s ease-out;box-shadow:0 -4px 30px rgba(0,0,0,.2)}
@media(min-width:700px){.sheet{left:50%;transform:translateX(-50%);width:560px;bottom:20px;border-radius:16px}}
@keyframes sobe{from{transform:translateY(100%)}to{transform:none}}
@media(min-width:700px){@keyframes sobe{from{transform:translate(-50%,40px);opacity:0}to{transform:translateX(-50%);opacity:1}}}
.grabber{width:36px;height:5px;border-radius:3px;background:#C7C7CC;margin:8px auto 0}
.sheet-corpo{overflow:auto;padding:6px 14px calc(16px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.sheet-cab{display:flex;justify-content:space-between;align-items:center;padding:6px 0 8px}
.sheet-cab h2{font-size:20px}
.sheet-cab button{background:none;border:0;color:var(--azul);font-size:17px;font-weight:600;padding:6px}
.teste{background:var(--card);border-radius:var(--raio);padding:12px;margin:8px 0;box-shadow:var(--sombra)}
.teste-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.teste-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.teste-grid div{background:var(--fill);border-radius:10px;padding:6px 2px}
.teste-grid small{display:block;color:var(--mudo);font-size:11px}.teste-grid b{display:block;font-size:19px;letter-spacing:-.3px}.teste-grid span{font-size:10px;color:var(--mudo)}
.prog{height:5px;background:var(--fill);border-radius:3px;margin:8px 0 4px;overflow:hidden}.prog div{height:100%;width:0;background:var(--azul);transition:width .2s}
.teste small.st{color:var(--mudo);font-size:12px}
.gauge{display:flex;align-items:center;gap:12px}
.gauge b{font-size:34px;letter-spacing:-1px}
.sparkline{height:36px;width:100%}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#1C1C1E;color:#fff;padding:10px 16px;border-radius:12px;z-index:60;font-size:14px;max-width:90vw;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.toast.erro{background:var(--verm)}
.switch{appearance:none;width:51px;height:31px;border-radius:16px;background:var(--fill);position:relative;transition:.2s;flex:none}
.switch:checked{background:var(--verde)}.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.2s}.switch:checked::after{left:22px}
.slider{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--fill);flex:1}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.item-orc{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--sep)}
.item-orc img{width:44px;height:44px;border-radius:10px;background:var(--fill);object-fit:cover;flex:none}
.item-orc .txt{flex:1;min-width:0}.item-orc .txt small{display:block;color:var(--mudo);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-orc .qtd{display:flex;align-items:center;gap:4px}.item-orc .qtd button{width:28px;height:28px;border-radius:50%;border:0;background:var(--fill);color:var(--azul);font-size:18px;line-height:1}
.item-orc .tot{text-align:right;white-space:nowrap;font-weight:600;min-width:80px}
.total-linha{display:flex;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--sep)}.total-linha.grande{font-size:20px;font-weight:700;color:var(--azul)}
.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0}
.cat-item{background:var(--card);border-radius:12px;padding:10px;box-shadow:var(--sombra);cursor:pointer;text-align:center}
.cat-item img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:8px;background:var(--fill)}
.cat-item b{display:block;font-size:13px;margin-top:6px;line-height:1.2}.cat-item small{color:var(--mudo);font-size:12px}.cat-item .preco{color:var(--azul);font-weight:700;font-size:14px}
.cat-item.off{opacity:.45}
.preco-inline{display:flex;align-items:center;gap:2px;color:var(--azul);font-weight:700;white-space:nowrap}.preco-inline input{width:96px;border:1px solid var(--sep);border-radius:8px;padding:6px 4px;font-size:15px;text-align:right;background:var(--fill);color:var(--azul);font-weight:700}.preco-inline small{color:var(--mudo);font-weight:400}
.item-orc .txt[data-edit]{cursor:pointer}
canvas.grafico{width:100%;height:120px}
.hist-item{background:var(--card);border-radius:var(--raio);padding:12px 14px;margin:10px 0;box-shadow:var(--sombra);cursor:pointer}
.hist-item .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.hist-item b{font-size:17px}.hist-item .info{color:var(--mudo);font-size:13px;margin-top:4px}
.hist-item .rodape{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;font-size:12px;align-items:center}
.hist-item .rodape .esp{flex:1}
.acoes{display:flex;gap:8px;margin:8px 0}.acoes .btn-cheio{margin:0}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip-lista{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--fill);border-radius:14px;padding:4px 10px;font-size:13px}
.cor-pontos{display:flex;gap:8px}.cor-pontos span{width:28px;height:28px;border-radius:50%;border:3px solid transparent;cursor:pointer}.cor-pontos span.on{border-color:var(--texto)}
.avatar{width:36px;height:36px;border-radius:10px;background:var(--fill);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
/* ====== Desktop / tablet: barra lateral ====== */
@media(min-width:900px){
  body{font-size:15px}
  .tabbar{top:0;bottom:0;right:auto;width:200px;flex-direction:column;justify-content:flex-start;border-top:0;border-right:1px solid var(--sep);padding:18px 10px}
  .tab{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:10px;font-size:15px;padding:10px 12px;border-radius:10px;margin-bottom:2px;width:100%}
  .tab span{font-size:20px}.tab.on{background:var(--fill)}
  .tabbar::before{content:"📶 Wi-Fi Map";font-weight:800;font-size:18px;padding:6px 12px 18px;color:var(--texto);display:block}
  .aba{left:200px;padding-bottom:0}
  .nav{padding-top:10px}
  .nav.grande{padding:18px 24px 10px}
  .conteudo{padding:0 24px 30px;max-width:1100px}
  .palco{padding:14px 20px}
  .quadro img{max-height:calc(100vh - 210px)}
  .mapa-rodape{display:grid;grid-template-columns:260px 1fr auto;gap:16px;align-items:center;padding:10px 20px}
  .legenda{margin:0}
  .ferramentas{max-width:520px}
  .ferr{flex-direction:row;gap:6px;font-size:16px;padding:8px 10px}.ferr small{font-size:12px}
  .kpis{grid-template-columns:repeat(6,1fr)}
  .segmento{margin:8px 20px;max-width:640px}
  .catalogo{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .hist-item{display:block}
  #listaHistorico{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}#listaHistorico .hist-item{margin:0}
}
@media(min-width:1300px){.tabbar{width:230px}.aba{left:230px}}
@media print{.tabbar,.nav,.mapa-rodape,.segmento{display:none}}