:root {
  --bg: #0a0c0d;
  --panel: #101416;
  --panel2: #151b1e;
  --line: #242e32;
  --ink: #cfe0e6;
  --mut: #5f7178;
  --cy: #00e5ff;
  --or: #ff8c1a;
  --rd: #ff2d2d;
  --gn: #39d98a;
  --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 11px/1.4 var(--mono);
  overflow: hidden;
  user-select: none;
}

/* HEADER / DASHBOARD */
#dash {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  z-index: 10;
}
#dash h1 {
  font-size: 12px;
  margin: 0;
  letter-spacing: .5px;
  color: var(--cy);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
#dash .meta { color: var(--mut); font-size: 10px; }
.modes, .tools { display: flex; gap: 4px; margin-left: 6px; }
.btn {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font: 10.5px var(--mono);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn.on, .btn:active {
  border-color: var(--cy);
  color: var(--cy);
  box-shadow: 0 0 8px -2px var(--cy);
}
.btn:hover { border-color: var(--or); }
.btn-accent { border-color: var(--or); color: var(--or); }
.btn-accent.on { background: rgba(255,140,26,.15); }
.layers { display: flex; gap: 6px; margin-left: auto; }
.layers label {
  display: flex;
  gap: 4px;
  align-items: center;
  border: 1px solid var(--line);
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
}
.layers input { accent-color: var(--cy); }
#zbtns { display: flex; gap: 3px; }
#zbtns button {
  width: 22px;
  height: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  border-radius: 3px;
  font-weight: 700;
}

/* LAYOUT PRINCIPAL */
main { display: flex; height: calc(100% - 39px); position: relative; }
#mapWrap { flex: 1; position: relative; overflow: hidden; background: #050607; cursor: grab; }
#mapWrap.panning { cursor: grabbing; }
#mapWrap.crosshair { cursor: crosshair; }
svg#plano { display: block; width: 100%; height: 100%; }

/* PANELES FLOTANTES */
.float-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(16,20,22,.94);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  width: 260px;
  z-index: 20;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
}
.float-panel h3 {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--cy);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.float-panel .close { cursor: pointer; color: var(--mut); }
.prow { display: flex; align-items: center; justify-content: space-between; margin: 4px 0; gap: 6px; }
.prow label { color: var(--mut); font-size: 10px; flex: 1; }
.prow input[type="range"] { flex: 1.4; accent-color: var(--cy); }
.prow input[type="number"] {
  width: 55px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--cy);
  font: 10px var(--mono);
  padding: 2px 4px;
  border-radius: 2px;
}

/* ELEMENTOS SVG */
.gridbg { stroke: #131a1d; stroke-width: 1; }
.blk { fill: #1d2529; stroke: #3a4a52; stroke-width: 1; }
body.mode-night .blk { stroke: var(--or); stroke-width: 1.1; }
.blk-top { fill: #202a2e; stroke: #3a4a52; stroke-width: 1; }
.tree-belt { fill: #173a29; opacity: .28; }
.road { fill: none; stroke: #20282c; stroke-width: 14; stroke-linecap: round; }
.road-dash { fill: none; stroke: #3b464b; stroke-width: 1; stroke-dasharray: 6 6; }
.ctrl { fill: #3d2a08; stroke: var(--or); stroke-width: 2; }
.ctrl-lbl { fill: var(--or); font-size: 9px; font-weight: 700; }
.blk-lbl { fill: #5c6f77; font-size: 6.5px; }
.lineA { fill: none; stroke: var(--cy); stroke-width: 1.4; opacity: .8; }
.lineB { fill: none; stroke: #3d8fd6; stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .8; }
.node { fill: #08181c; stroke: var(--cy); stroke-width: 1.2; }
.infra-lbl { fill: var(--cy); font-size: 8px; }

body.mode-infra #l-esq { opacity: .25; }
body.mode-infra #l-dev, body.mode-infra #l-fov { display: none !important; }
body.mode-infra #l-inf { opacity: 1; }
body:not(.mode-infra) #l-inf { opacity: .35; }

/* DISPOSITIVOS Y FOV */
.dev { cursor: grab; }
.dev:active { cursor: grabbing; }
.dev-lbl { fill: #ffffff; font-size: 6px; paint-order: stroke; stroke: #0a0c0d; stroke-width: 2; }
.dev-sn { fill: var(--cy); font-size: 5px; paint-order: stroke; stroke: #0a0c0d; stroke-width: 1.5; }
.dev-ring { fill: none; stroke: var(--rd); stroke-width: 1; opacity: .6; }
.dev.sel .dev-ring { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 2 2; }
.dev.ir-on .ir-glow { opacity: 1; }
.ir-glow { fill: none; stroke: var(--or); stroke-width: 2; opacity: 0; filter: blur(1px); }
.fov { fill: var(--cy); fill-opacity: .15; stroke: var(--cy); stroke-width: 1; pointer-events: none; }
body.mode-night .fov { fill: var(--or); fill-opacity: .25; stroke: var(--or); stroke-width: 1.3; }
.handle { fill: #0a0c0d; stroke: #fff; stroke-width: 1.4; cursor: ew-resize; }
.handle-line { stroke: #fff; stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }

/* SECTORES / POLÍGONOS */
.sec-poly { fill-opacity: .15; stroke-width: 1.5; stroke-dasharray: 4 4; transition: all .2s; cursor: pointer; }
.sec-poly:hover, .sec-poly.active { fill-opacity: .35; stroke-width: 2.5; stroke-dasharray: none; }
.sec-lbl { fill: #fff; font-weight: 700; font-size: 10px; paint-order: stroke; stroke: #000; stroke-width: 2.5; text-anchor: middle; pointer-events: none; }

/* REGLA */
.ruler-line { stroke: var(--or); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ruler-pt { fill: var(--or); stroke: #fff; stroke-width: 1; }
.ruler-txt { fill: var(--or); font-size: 9.5px; font-weight: 700; paint-order: stroke; stroke: #0a0c0d; stroke-width: 2; }

/* SIDEBAR Y TABS */
#sidebar { width: 310px; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; transition: width .15s; }
#sidebar.collapsed { width: 26px; }
#sidebar.collapsed .sbody, #sidebar.collapsed .tabs { display: none; }
#sbtoggle { background: var(--panel2); border: none; border-bottom: 1px solid var(--line); color: var(--cy); cursor: pointer; padding: 7px; font: 11px var(--mono); }
.tabs { display: flex; background: var(--panel2); border-bottom: 1px solid var(--line); }
.tab { flex: 1; padding: 7px; text-align: center; cursor: pointer; color: var(--mut); font-size: 10px; border-bottom: 2px solid transparent; }
.tab.active { color: var(--cy); border-bottom-color: var(--cy); background: var(--panel); }
.sbody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tab-content { display: none; flex-direction: column; flex: 1; min-height: 0; padding: 6px; }
.tab-content.active { display: flex; }
.shead { padding: 6px 4px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.shead b { font-size: 10.5px; color: var(--cy); }
.shead p { margin: 2px 0 0; color: var(--mut); font-size: 9.5px; }

/* LISTA INVENTARIO Y SECTORES */
#inv, #secList { flex: 1; overflow-y: auto; padding-right: 2px; }
.cat { color: var(--mut); font-size: 9px; letter-spacing: 1px; margin: 8px 4px 2px; text-transform: uppercase; font-weight: 700; }
.item { display: flex; gap: 6px; align-items: center; padding: 5px 6px; margin: 2px 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; cursor: grab; }
.item:hover { border-color: var(--cy); }
.item.placed { opacity: .45; background: #0d1113; }
.item .ic { width: 18px; height: 18px; flex: none; }
.item .tx { flex: 1; min-width: 0; }
.item .tx b { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.item .tx span { display: block; font-size: 8.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .sn { font-size: 8.5px; color: var(--or); display: block; }
.sec-card { background: var(--panel2); border: 1px solid var(--line); padding: 6px; border-radius: 3px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 4px; }
.sec-card h4 { margin: 0; font-size: 10.5px; color: var(--cy); display: flex; justify-content: space-between; align-items: center; }
.sec-card .actions { display: flex; gap: 4px; margin-top: 2px; }

/* OSD & INSPECTOR */
#osd { position: absolute; left: 8px; bottom: 8px; background: rgba(10,12,13,.88); border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font: 10px var(--mono); color: var(--cy); pointer-events: none; }
#osd .r2 { color: var(--mut); font-size: 9px; }
#insp { position: absolute; right: 320px; bottom: 8px; background: rgba(10,12,13,.92); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font: 10.5px var(--mono); display: none; min-width: 210px; z-index: 15; }
#insp b { color: var(--or); }
#insp .row { display: flex; justify-content: space-between; gap: 10px; margin: 3px 0; }