:root{
  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--bg4:#2d333b;
  --border:#30363d;--border2:#484f58;
  --text:#e6edf3;--text2:#8b949e;--text3:#484f58;
  --green:#1D9E75;--green2:#0d6b50;--glow:rgba(29,158,117,.18);
  --blue:#3B82F6;--amber:#F59E0B;--red:#EF4444;--purple:#8B5CF6;--cyan:#06B6D4;--magenta:#EC4899;
  --r:6px;--rl:10px;--rxl:14px;
  --font:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);touch-action:manipulation}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* TOPBAR */
#topbar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#0d6b50,#161b22);border-bottom:2px solid var(--green);height:52px;flex-shrink:0;padding:0 16px;box-shadow:0 2px 12px rgba(0,0,0,.5);z-index:100}
#logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:#fff;white-space:nowrap}
#logo svg{width:24px;height:24px;stroke:#1D9E75}
#topbar-right{display:flex;align-items:center;gap:12px}
.theme-toggle{width:36px;height:36px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--amber);font-size:16px;transition:all .2s}
.theme-toggle:hover{background:var(--bg4)}

/* MAPA */
#main{display:flex;flex:1;overflow:hidden}
#mw{flex:1;position:relative;z-index:1}
#map{width:100%;height:100%}

/* STATUSBAR */
#sb{height:26px;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:14px;font-size:11px;font-family:var(--mono);color:var(--text3);flex-shrink:0;z-index:100}
.sbv{color:var(--text2)}
#sbm{color:var(--green);font-weight:600}
#sb-autosave{color:var(--text3);font-size:10px;margin-left:auto}

/* TOGGLES EXTERNOS */
.ext-toggle{
  position:fixed; width:44px; height:44px; border-radius:50%;
  background:var(--green2); border:2px solid var(--green);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#fff; font-size:18px; z-index:1500;
  transition:all .2s; box-shadow:0 0 12px rgba(29,158,117,.3);
}
.ext-toggle:hover{ background:var(--green); box-shadow:0 0 16px var(--glow); }
.ext-toggle.active{ background:var(--green); box-shadow:0 0 16px var(--glow); }
#toggle-tools  { top:60px; right:12px; }
#toggle-search { top:60px; right:64px; }
#toggle-info   { bottom:calc(60px + env(safe-area-inset-bottom,0px)); left:12px; }

/* BANDEJAS */
.tray{
  position:fixed; display:none; flex-direction:column; gap:8px; padding:12px;
  background:rgba(22,27,34,.95); border:1px solid var(--border); border-radius:12px;
  backdrop-filter:blur(10px); box-shadow:0 8px 32px rgba(0,0,0,.4);
  z-index:1400; transition:all .3s ease; overflow-y:auto;
}
.tray.show{ display:flex; }
.tray.right     { top:116px; right:12px; width:280px; max-height:calc(100dvh - 140px); }
.tray.search-tray{ top:116px; right:12px; width:300px; max-height:calc(100dvh - 140px); }
.tray.left      { bottom:calc(116px + env(safe-area-inset-bottom,0px)); left:12px; width:240px; max-height:calc(100dvh - 180px); }

/* SCROLLBAR CAMUFLADA */
::-webkit-scrollbar            { width:4px; height:4px; }
::-webkit-scrollbar-track      { background:transparent; }
::-webkit-scrollbar-thumb      { background:transparent; border-radius:4px; transition:background .3s; }
::-webkit-scrollbar-thumb:hover{ background:rgba(139,148,158,.25); }
*{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
.tray:hover,::-webkit-scrollbar-thumb:hover{ scrollbar-color:rgba(139,148,158,.2) transparent; }

.tray-header{display:flex;align-items:center;justify-content:space-between;padding:0 4px 4px 4px}
.tray-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-family:var(--mono)}
.tray-body{display:flex;flex-direction:column;gap:6px}
.tray-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tray-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;
  border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);
  cursor:pointer;font-size:11px;font-family:var(--font);font-weight:500;transition:all .18s;text-align:center;
}
.tray-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.tray-btn.act{background:var(--green2);color:#fff;border-color:var(--green);box-shadow:0 0 8px var(--glow)}
.tray-btn.danger{background:rgba(239,68,68,.12);color:#ff6b6b;border-color:rgba(239,68,68,.28)}
.tray-btn.danger:hover{background:rgba(239,68,68,.22);border-color:rgba(239,68,68,.5)}
.tray-btn-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tray-btn-label{font-size:9px;line-height:1.2}

/* ── Tool Buttons — layout sofisticado ── */
.tb-tool{
  flex-direction:column;align-items:center;justify-content:center;
  padding:14px 6px 11px;border-radius:12px;gap:9px;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
}
.tb-tool:hover{
  background:var(--bg4);color:var(--text);border-color:var(--border2);
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.tb-tool:active{transform:translateY(0);transition:transform .08s}
.tb-tool.act{
  background:linear-gradient(145deg,rgba(29,158,117,.22),rgba(29,158,117,.06));
  color:#d1fae5;border-color:var(--green);
  box-shadow:0 0 22px rgba(29,158,117,.18),inset 0 1px 0 rgba(255,255,255,.05);
  transform:none;
}
.tb-tool .tray-btn-icon{
  width:42px;height:42px;border-radius:11px;font-size:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  transition:all .2s;
}
.tb-tool:hover .tray-btn-icon{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.13);
}
.tb-tool.act .tray-btn-icon{
  background:rgba(29,158,117,.18);border-color:rgba(29,158,117,.4);
  box-shadow:0 0 12px rgba(29,158,117,.15);
}
.tb-tool .tray-btn-label{font-size:10px;font-weight:600;letter-spacing:.25px;line-height:1.2}

/* PAINEL ESQUERDO */
.ps{border-bottom:1px solid var(--border);padding:8px 10px}
.pt{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-family:var(--mono);margin-bottom:6px}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.sc{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:5px 8px}
.sl{font-size:10px;color:var(--text3);font-family:var(--mono)}
.sv{font-size:15px;font-weight:700;margin-top:2px}
.sv.blue{color:var(--blue)}.sv.amber{color:var(--amber)}.sv.red{color:var(--red)}.sv.green{color:var(--green)}
.sf{grid-column:span 2}
.li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text2);padding:2px 0}
.ld{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ll{width:18px;height:3px;border-radius:2px;flex-shrink:0}
#elw{flex:1;overflow-y:auto}
.ei{display:flex;align-items:center;gap:7px;padding:6px 10px;cursor:pointer;font-size:11px;color:var(--text2);border-bottom:1px solid rgba(48,54,61,.4);transition:background .1s}
.ei:hover{background:var(--bg3);color:var(--text)}
.ei.sel{background:var(--green2);color:#fff}
.eid{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ein{flex:1;font-family:var(--mono);font-size:10px}
.eidel{color:var(--red);opacity:0;cursor:pointer;padding:0 3px;font-size:13px}
.ei:hover .eidel{opacity:1}

/* MODAIS – CSS COMPLETO (herdado da v7.8) */
#cable-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:8000;align-items:center;justify-content:center}
#cable-overlay.show{display:flex}
#cable-modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rxl);width:520px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.7)}
.cm-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.cm-hdr h2{font-size:15px;font-weight:700}
.cm-close{width:28px;height:28px;border-radius:var(--r);border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
.cm-close:hover{background:var(--red);color:#fff;border-color:var(--red)}
.cm-body{padding:20px}
.cm-section{margin-bottom:18px}
.cm-label{font-size:11px;color:var(--text3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.cm-input{width:100%;padding:9px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);color:var(--text);font-family:var(--font);font-size:13px;outline:none}
.cm-input:focus{border-color:var(--green)}
.cm-row{display:flex;gap:10px}
.cm-row .cm-input{flex:1}
.cable-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.ctb{padding:10px 8px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);cursor:pointer;text-align:center;transition:all .15s}
.ctb:hover{border-color:var(--border2);background:var(--bg4)}
.ctb.sel{border-color:var(--green);background:rgba(29,158,117,.1)}
.ctb-name{font-size:12px;font-weight:600;color:var(--text);font-family:var(--mono)}
.ctb-desc{font-size:10px;color:var(--text3);margin-top:2px}
.cm-footer{display:flex;gap:8px;justify-content:flex-end;padding:0 20px 20px}
.cm-btn{padding:9px 20px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;transition:all .15s}
.cm-btn.primary{background:var(--green2);color:#fff;border-color:var(--green)}
.cm-btn.primary:hover{background:var(--green)}

.fiber-preview{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px;padding:8px;background:var(--bg3);border-radius:var(--r);border:1px solid var(--border);min-height:32px}
.fp-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(0,0,0,.3);cursor:default;position:relative}

#em-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9000;align-items:center;justify-content:center}
#em-overlay.show{display:flex}
#em-modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rxl);width:820px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.7);overflow:hidden}
#emhdr{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
#em-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:var(--mono);flex-shrink:0}
#em-ttl{flex:1}
#em-ttl h2{font-size:15px;font-weight:700}
#em-ttl p{font-size:11px;color:var(--text3);font-family:var(--mono)}
#em-x{width:30px;height:30px;border-radius:var(--r);border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .12s}
#em-x:hover{background:var(--red);color:#fff;border-color:var(--red)}
#em-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg3)}
.em-tab{flex:1;padding:9px 0;text-align:center;font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.em-tab:hover:not(.act){color:var(--text2)}
.em-tab.act{color:var(--green);border-bottom-color:var(--green);background:var(--bg2)}
#em-body{flex:1;overflow:hidden;display:flex}
.etc{display:none;flex:1;overflow-y:auto;padding:16px 18px}
.etc.act{display:block}

.prs{margin-bottom:16px}
.prt{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;font-family:var(--mono);margin-bottom:8px}
.prr{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text2);padding:6px 0;border-bottom:1px solid rgba(48,54,61,.4)}
.prr:last-child{border-bottom:none}
.pv{color:var(--text);font-family:var(--mono);font-size:11px}
.pv.green{color:var(--green)}.pv.amber{color:var(--amber)}.pv.red{color:var(--red)}
.pin{padding:5px 9px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:12px;font-family:var(--mono);outline:none;width:180px}
.pin:focus{border-color:var(--green)}
.pact{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pab{padding:7px 14px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:12px;font-family:var(--font);font-weight:500;transition:all .15s}
.pab:hover{background:var(--bg4);color:var(--text)}
.pab.gn{background:var(--green2);color:#fff;border-color:var(--green)}.pab.gn:hover{background:var(--green)}
.pab.rd{border-color:rgba(239,68,68,.4);color:var(--red)}.pab.rd:hover{background:rgba(239,68,68,.1)}

.ci{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);margin-bottom:7px}
.ci-info{flex:1}
.ci-name{font-size:12px;font-weight:600;color:var(--text);font-family:var(--mono)}
.ci-meta{font-size:11px;color:var(--text3);margin-top:2px}
.ci-dir{font-size:10px;padding:2px 7px;border-radius:3px;font-family:var(--mono);font-weight:600}
.ci-in{background:rgba(29,158,117,.15);color:var(--green)}
.ci-out{background:rgba(59,130,246,.15);color:var(--blue)}
.ci-mid{background:rgba(139,92,246,.15);color:var(--purple)}

.ac{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:8px}
.ac-t{font-size:12px;font-weight:600;color:var(--text);font-family:var(--mono)}
.ar{display:flex;justify-content:space-between;font-size:11px;color:var(--text2);padding:3px 0;font-family:var(--mono)}
.ar span:last-child{color:var(--text)}
.ab{display:inline-block;padding:3px 8px;border-radius:3px;font-size:10px;font-weight:600;font-family:var(--mono);margin-top:6px}
.ab.ok{background:rgba(29,158,117,.15);color:var(--green)}
.ab.wn{background:rgba(245,158,11,.15);color:var(--amber)}
.ab.bd{background:rgba(239,68,68,.15);color:var(--red)}

.qag{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:4px}
.qab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 8px;border-radius:var(--rl);border:1px solid var(--border);background:var(--bg3);cursor:pointer;transition:all .15s;text-align:center}
.qab:hover{border-color:var(--border2);background:var(--bg4)}
.qai{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-family:var(--mono)}
.qal{font-size:11px;color:var(--text2);font-family:var(--mono)}

#conf-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;align-items:center;justify-content:center}
#conf-overlay.show{display:flex}
#conf-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:22px 24px;min-width:300px;max-width:420px;box-shadow:0 16px 60px rgba(0,0,0,.6)}
#conf-box h3{font-size:14px;font-weight:600;margin-bottom:8px}
#conf-box p{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:18px}
#conf-btns{display:flex;gap:8px;justify-content:flex-end}
.cfb{padding:7px 16px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;transition:all .15s}
.cfb:hover{background:var(--bg4)}
.cfb.ok{background:var(--red);color:#fff;border-color:var(--red)}
.cfb.ok.gn{background:var(--green2);border-color:var(--green)}
.cfb.ok.gn:hover{background:var(--green)}

.leaflet-container{background:#1a1f2e}
.leaflet-popup-content-wrapper{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:var(--rl)}

/* ═══ CORES RECENTES ═══ */
.recent-color-swatch{
  width:34px;height:34px;border-radius:7px;cursor:pointer;flex-shrink:0;
  border:2px solid rgba(255,255,255,.13);
  transition:transform .12s,border-color .12s;
  touch-action:manipulation;
}
.recent-color-swatch:hover{transform:scale(1.14);border-color:rgba(255,255,255,.45)}
.recent-color-swatch:active{transform:scale(.9);border-color:rgba(255,255,255,.6)}

/* ═══ TOUCH — resposta rápida sem delay de 300ms ═══ */
button,.tray-btn,.ext-toggle,.em-tab,.ctb,.qab,.tile-opt,.ei,.ci,.search-result,.ca-btn,.cfb,.cm-btn,.pab,.fcb{touch-action:manipulation}

/* ═══ TABS DO MODAL — scroll horizontal em telas pequenas ═══ */
#em-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#em-tabs::-webkit-scrollbar{display:none}
.em-tab{flex-shrink:0;min-width:64px}

/* Popup fixo ao clicar elemento */
.elem-popup .leaflet-popup-content-wrapper{
  background:var(--bg2);border:1px solid var(--green);border-radius:10px;
  box-shadow:0 0 18px rgba(29,158,117,.22),0 4px 16px rgba(0,0,0,.6);padding:0;
}
.elem-popup .leaflet-popup-content{margin:9px 13px}
.elem-popup .leaflet-popup-tip{background:var(--bg2)}
.elem-popup .leaflet-popup-tip-container{filter:drop-shadow(0 1px 0 var(--green))}

/* Ações flutuantes (cabo e poste) */
#cable-actions, #poste-actions{
  display:none;position:fixed;bottom:calc(34px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
  z-index:1600;flex-direction:row;gap:10px;align-items:center;
  background:rgba(13,17,23,.93);border:1px solid var(--border);border-radius:24px;
  padding:8px 14px;backdrop-filter:blur(12px);box-shadow:0 4px 24px rgba(0,0,0,.6);
}
#cable-actions.show, #poste-actions.show{display:flex}
.ca-btn{
  padding:7px 20px;border-radius:16px;border:1px solid var(--border);
  background:var(--bg3);color:var(--text2);cursor:pointer;
  font-size:12px;font-family:var(--font);font-weight:600;transition:all .15s;
}
.ca-btn.confirm{background:var(--green2);color:#fff;border-color:var(--green)}
.ca-btn.confirm:hover{background:var(--green);box-shadow:0 0 12px var(--glow)}
.ca-btn.cancel:hover{background:rgba(239,68,68,.15);color:var(--red);border-color:rgba(239,68,68,.4)}

.poste-tooltip{background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:4px;font-size:10px;font-family:var(--mono);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.6)}

.gmaps-link {
  background: var(--green2); color: #fff; padding: 3px 8px; border-radius: 4px;
  text-decoration: none; font-size: 11px; font-weight: 600; display: inline-block;
  white-space: nowrap; margin-left: 4px;
}
.gmaps-link:hover { background: var(--green); }

/* Busca */
.search-box{display:flex;gap:6px;padding:8px;background:var(--bg3);border-radius:var(--r);border:1px solid var(--border)}
.search-box input{flex:1;background:transparent;border:none;color:var(--text);font-size:12px;outline:none;font-family:var(--mono)}
.search-results{max-height:300px;overflow-y:auto}
.search-result{padding:8px 10px;cursor:pointer;border-bottom:1px solid rgba(48,54,61,.4);transition:background .15s;font-size:11px;color:var(--text2)}
.search-result:hover{background:var(--bg4);color:var(--text)}

/* Toast */
.toast{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:20px;font-size:13px;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.4);animation:slideUp .3s ease}
.toast.show{display:block}

/* ═══ MEDIÇÃO ═══ */
.measure-label{
  background:rgba(13,13,13,.85);border:1px solid #F59E0B;color:#F59E0B;
  padding:2px 7px;border-radius:4px;font-size:11px;font-family:'JetBrains Mono',monospace;
  font-weight:600;white-space:nowrap;pointer-events:none;
}
#measure-total{
  position:fixed;bottom:calc(40px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
  background:rgba(13,13,13,.92);border:1px solid #F59E0B;color:#F59E0B;
  padding:6px 16px;border-radius:20px;font-size:13px;font-weight:700;
  font-family:'JetBrains Mono',monospace;z-index:2000;display:none;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
#measure-total.show{display:block}

/* ═══ HISTÓRICO ═══ */
#history-panel{display:none;position:fixed;right:12px;bottom:calc(60px + env(safe-area-inset-bottom,0px));width:300px;
  max-height:360px;background:rgba(22,27,34,.97);border:1px solid var(--border);
  border-radius:12px;backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,.5);
  z-index:1400;overflow:hidden;flex-direction:column}
#history-panel.show{display:flex}
#history-header{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
#history-header span{font-size:11px;font-weight:600;color:var(--text3);
  text-transform:uppercase;letter-spacing:.8px;font-family:var(--mono)}
#history-list{overflow-y:auto;flex:1;padding:4px 0}
.hitem{display:flex;align-items:center;gap:10px;padding:7px 14px;
  font-size:11px;color:var(--text2);border-bottom:1px solid rgba(48,54,61,.3);
  cursor:pointer;transition:background .12s}
.hitem:hover{background:var(--bg3)}
.hitem.current{background:rgba(29,158,117,.08);border-left:2px solid var(--green)}
.htime{font-size:9px;color:var(--text3);font-family:var(--mono);white-space:nowrap;margin-left:auto}
.hdot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--green)}

/* ═══ GEOLOCALIZAÇÃO ═══ */
.geo-btn{
  width:36px;height:36px;border-radius:50%;background:var(--bg3);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;transition:all .2s;color:var(--cyan);
}
.geo-btn:hover{background:var(--bg4);border-color:var(--cyan)}
.geo-btn.active{background:rgba(6,182,212,.15);border-color:var(--cyan);
  box-shadow:0 0 10px rgba(6,182,212,.3)}

/* ═══ TILE SWITCHER ═══ */
#tile-switcher{
  position:fixed;bottom:calc(60px + env(safe-area-inset-bottom,0px));left:64px;z-index:1300;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
#tile-btn{
  width:44px;height:44px;border-radius:50%;
  background:var(--bg2);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:20px;box-shadow:0 2px 12px rgba(0,0,0,.5);
  transition:all .2s;color:var(--text);
}
#tile-btn:hover{border-color:var(--green);box-shadow:0 0 14px var(--glow)}
#tile-btn.open{border-color:var(--green);background:var(--bg3)}
#tile-panel{
  display:none;flex-direction:column;gap:6px;
  background:rgba(22,27,34,.97);border:1px solid var(--border);border-radius:12px;
  padding:10px;box-shadow:0 8px 32px rgba(0,0,0,.6);backdrop-filter:blur(12px);
  width:220px;
}
#tile-panel.open{display:flex}
.tile-opt{
  display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;
  cursor:pointer;border:1px solid transparent;transition:all .15s;
}
.tile-opt:hover{background:var(--bg3);border-color:var(--border)}
.tile-opt.active{background:rgba(29,158,117,.12);border-color:var(--green)}
.tile-thumb{
  width:46px;height:32px;border-radius:5px;overflow:hidden;flex-shrink:0;
  border:1px solid var(--border);position:relative;background:var(--bg4);
}
.tile-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tile-info{flex:1;min-width:0}
.tile-name{font-size:12px;font-weight:600;color:var(--text);font-family:var(--font)}
.tile-desc{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:1px}
.tile-opt.active .tile-name{color:var(--green)}
.tile-check{font-size:14px;color:var(--green);opacity:0;transition:opacity .15s}
.tile-opt.active .tile-check{opacity:1}
#csv-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);
  z-index:8500;align-items:center;justify-content:center}
#csv-overlay.show{display:flex}
#csv-modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rxl);
  width:680px;max-width:96vw;max-height:90vh;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.7);display:flex;flex-direction:column}
#csv-preview-table{width:100%;border-collapse:collapse;font-size:11px;font-family:var(--mono)}
#csv-preview-table th{background:var(--bg3);color:var(--text3);text-align:left;
  padding:6px 10px;border-bottom:1px solid var(--border);text-transform:uppercase;
  font-size:10px;letter-spacing:.5px}
#csv-preview-table td{padding:5px 10px;border-bottom:1px solid rgba(48,54,61,.3);color:var(--text2)}
#csv-preview-table tr:hover td{background:var(--bg3);color:var(--text)}
#csv-preview-table td.ok{color:var(--green)}
#csv-preview-table td.err{color:var(--red)}
#csv-preview-table td.warn{color:var(--amber)}
.csv-summary{display:flex;gap:12px;padding:10px 16px;background:var(--bg3);
  border-top:1px solid var(--border);font-size:11px;font-family:var(--mono);flex-shrink:0}
.csv-badge{padding:2px 8px;border-radius:10px;font-weight:600}
.csv-badge.ok{background:rgba(29,158,117,.15);color:var(--green)}
.csv-badge.err{background:rgba(239,68,68,.15);color:var(--red)}
.csv-badge.warn{background:rgba(245,158,11,.15);color:var(--amber)}
.toast.success{background:var(--green2);color:#fff}
.toast.warning{background:rgba(245,158,11,.2);color:var(--amber);border:1px solid var(--amber)}
.toast.error{background:rgba(239,68,68,.2);color:var(--red);border:1px solid var(--red)}
@keyframes slideUp{from{transform:translateX(-50%) translateY(100px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes geoPulse{0%,100%{box-shadow:0 0 0 3px rgba(6,182,212,.35),0 2px 8px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 8px rgba(6,182,212,.12),0 2px 8px rgba(0,0,0,.5)}}

/* ═══ RESPONSIVO TABLET (≤768px) ═══ */
@media (max-width:768px){
  /* Topbar */
  #topbar{height:44px;padding:0 10px}
  #logo{font-size:15px}
  #logo svg{width:20px;height:20px}

  /* Toggles — abaixo da topbar de 44px */
  #toggle-tools {right:8px;top:52px}
  #toggle-search{right:60px;top:52px}
  #toggle-info  {left:8px;bottom:calc(52px + env(safe-area-inset-bottom,0px))}

  /* Bandejas */
  .tray.right{right:4px;top:102px;width:calc(100vw - 72px);max-height:calc(100dvh - 120px)}
  .tray.search-tray{right:4px;top:102px;width:calc(100vw - 16px);max-height:calc(100dvh - 120px)}
  .tray.left{left:4px;bottom:calc(104px + env(safe-area-inset-bottom,0px));width:calc(100vw - 8px);max-height:44dvh}

  /* Histórico */
  #history-panel{right:8px;bottom:calc(52px + env(safe-area-inset-bottom,0px));width:calc(100vw - 16px);max-height:44dvh}

  /* Tile switcher */
  #tile-switcher{bottom:calc(52px + env(safe-area-inset-bottom,0px));left:8px}
  #tile-panel{max-width:calc(100vw - 24px)}

  /* Ações flutuantes — esticam para preencher a largura */
  #cable-actions,#poste-actions{
    left:12px;right:12px;transform:none;
    bottom:calc(30px + env(safe-area-inset-bottom,0px));
    border-radius:16px;
  }
  .ca-btn{flex:1;justify-content:center;text-align:center}

  /* Medição */
  #measure-total{bottom:calc(36px + env(safe-area-inset-bottom,0px));font-size:12px;padding:5px 12px}

  /* Modal elemento — bottom-sheet em tablet */
  #em-overlay{align-items:flex-end}
  #em-modal{width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:92dvh}

  /* Modais genéricos */
  #cable-modal,#csv-modal{max-height:calc(100dvh - 20px)}
}

/* ═══ RESPONSIVO MOBILE (≤480px) ═══ */
@media (max-width:480px){
  /* Bandejas — largura total */
  .tray.right,.tray.search-tray{width:calc(100vw - 16px);right:8px}
  .tray.left{width:calc(100vw - 16px);left:8px}

  /* Oculta lat/lng no statusbar para não transbordar */
  .sb-coord{display:none}

  /* Grid de ferramentas: 3 colunas mais compactas */
  .tray-grid{grid-template-columns:repeat(3,1fr)}
  .tb-tool{padding:10px 4px 8px;gap:6px}
  .tb-tool .tray-btn-icon{width:36px;height:36px;font-size:17px}
  .tb-tool .tray-btn-label{font-size:9px}

  /* Modais como bottom-sheet */
  #cable-overlay,#em-overlay,#csv-overlay,#sub-overlay{align-items:flex-end}
  #cable-modal{border-radius:16px 16px 0 0;width:100%;max-width:100%;max-height:90dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
  #em-modal{border-radius:16px 16px 0 0;width:100%;max-width:100%;max-height:94dvh}
  #csv-modal{border-radius:16px 16px 0 0;width:100%;max-width:100%;max-height:90dvh}
  #sub-overlay>div{border-radius:16px 16px 0 0!important;margin-top:auto;width:100%!important;max-width:100%!important;padding-bottom:env(safe-area-inset-bottom,0px)}

  /* Cable-type grid: 2 colunas no modal de novo cabo */
  .cable-type-grid{grid-template-columns:1fr 1fr}
  .ctb{padding:8px 6px}
  .ctb-name{font-size:11px}
  .ctb-desc{font-size:9px}

  /* Tile panel — largura ajustada */
  #tile-panel{width:calc(100vw - 24px);max-width:none}
}

/* ═══ DISPOSITIVOS SEM HOVER (touch) — remove efeitos só-hover ═══ */
@media (hover:none){
  .tray-btn:hover,.tb-tool:hover{
    background:var(--bg3);color:var(--text2);border-color:var(--border);
    transform:none;box-shadow:none
  }
  .tb-tool:hover .tray-btn-icon{
    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07)
  }
  /* Toque ativo — feedback visual */
  .tray-btn:active,.tb-tool:active{transform:scale(.95);transition:transform .07s}
  .ca-btn:active{opacity:.75;transition:opacity .07s}
  .ext-toggle:active{transform:scale(.9);transition:transform .07s}
}

/* BUG FIX – Fiber diagram toolbar */
#fcd-toolbar{
  display:flex;align-items:center;gap:6px;padding:6px 10px;
  background:var(--bg3);border-bottom:1px solid var(--border);
  position:absolute;top:0;left:0;right:0;z-index:10;
}
.fcb{
  padding:5px 10px;border-radius:var(--r);border:1px solid var(--border);
  background:var(--bg4);color:var(--text2);cursor:pointer;font-size:11px;
  font-family:var(--font);font-weight:500;transition:all .15s;
}
.fcb:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.fcb.af{background:var(--green2);color:#fff;border-color:var(--green)}