:root{
  /* Sala de control de obra: barra superior oscura, superficies claras, color solo para el semáforo */
  --ink:#16212e; --ink2:#4a5868; --line:#d9dfe6; --bg:#eef1f4; --card:#ffffff; --accent:#1d5fa6; --accent-soft:#e3edf8;
  --ok:#2e9e5b; --warn:#e2a400; --bad:#d64545; --mag:#b23a9f; --off:#9aa5b1;
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --f-body:"Barlow",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.4 var(--f-body);display:flex;flex-direction:column}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
header{background:var(--ink);color:#fff;display:flex;align-items:center;gap:20px;padding:10px 18px;flex-wrap:wrap}
header .t1{font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#9fc3ea}
header .t2{font:600 20px/1.1 var(--f-display);letter-spacing:.01em}
nav.tabs{margin-left:auto;display:flex;gap:4px;background:#243243;padding:4px;border-radius:8px}
nav.tabs a{color:#cbd6e2;text-decoration:none;padding:6px 14px;border-radius:6px;font-weight:600}
nav.tabs a[aria-current="true"]{background:#fff;color:var(--ink)}
.filters{display:flex;gap:12px;align-items:end;padding:10px 18px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
.filters label{display:flex;flex-direction:column;font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;gap:3px}
.filters select{min-width:150px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink)}
.filters .note{margin-left:auto;font-size:12px;color:var(--ink2)}
.btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 10px;cursor:pointer;font-weight:600}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.pri:hover{background:#174d87;color:#fff}
main{flex:1;min-height:0;position:relative}
section.view{position:absolute;inset:0;display:none}
section.view.on{display:flex}
/* MAPA */
#v-mapa{flex-direction:row}
.side{width:280px;background:var(--card);border-right:1px solid var(--line);overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:14px}
.side h3,.panel h3{font:600 15px var(--f-display);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;color:var(--ink2)}
.lyr{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer}
.lyr input{margin:0}
.sw{width:22px;height:0;border-top:4px solid;flex:none}
.sw.box{height:12px;border:2px solid;background:transparent}
.cnt{margin-left:auto;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
#map{flex:1;background:#f7f8f6}
.search{display:flex;gap:6px}
.search input{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:6px}
#sres{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow:auto}
#sres button{text-align:left;border:0;background:none;padding:4px 6px;border-radius:4px;cursor:pointer;font-size:12px}
#sres button:hover{background:var(--accent-soft)}
.panel{width:390px;background:var(--card);border-left:1px solid var(--line);overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.panel .empty{color:var(--ink2)}
.code{font:600 17px/1.2 var(--f-display);word-break:break-word}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;color:#fff}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
dl.kv{display:grid;grid-template-columns:120px 1fr;gap:4px 10px;margin:0;font-size:13px}
dl.kv dt{color:var(--ink2)}
dl.kv dd{margin:0;font-weight:500;word-break:break-word}
.grp{border-top:1px solid var(--line);padding-top:10px}
.prots{display:flex;flex-direction:column;gap:6px}
.prot{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.prot b{font-family:var(--f-display);font-size:15px;min-width:64px}
.prot span{font-size:12px;color:var(--ink2);flex:1}
.txt{font-size:13px;background:#f6f8fa;border-left:3px solid var(--off);padding:6px 8px;border-radius:4px;white-space:pre-wrap}
.txt.obs{border-color:var(--bad);background:#fdf1f1}
.txt.acc{border-color:var(--warn);background:#fff8e5}
.labels{position:absolute;inset:0;pointer-events:none;z-index:450}
/* DASHBOARD */
#v-dash,#v-prot{overflow:auto;display:none;flex-direction:column}
#v-dash.on,#v-prot.on{display:flex}
.wrap{padding:16px 18px 40px;display:flex;flex-direction:column;gap:16px;max-width:1500px;width:100%;margin:0 auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;border-top:4px solid var(--accent)}
.kpi .k{font-size:12px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.kpi .v{font:700 30px/1.1 var(--f-display);font-variant-numeric:tabular-nums;margin-top:4px}
.kpi .s{font-size:12px;color:var(--ink2)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.card h2{font:600 18px var(--f-display);margin:0 0 2px}
.card .sub{font-size:12px;color:var(--ink2);margin:0 0 10px}
.ch{position:relative;height:280px}
.ch.tall{height:340px}
table.t{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
table.t th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);border-bottom:2px solid var(--line);padding:6px 8px;position:sticky;top:0;background:var(--card);cursor:pointer;white-space:nowrap}
table.t td{border-bottom:1px solid var(--line);padding:6px 8px;vertical-align:top}
table.t td.n{text-align:right}
table.t tr:hover td{background:#f6f9fc}
.tbox{max-height:460px;overflow:auto}
.bar{height:8px;background:#e6eaef;border-radius:4px;overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink2)}
.legend span{display:inline-flex;gap:6px;align-items:center}
.rule{font-size:12px;color:var(--ink2);line-height:1.5}
.rule b{color:var(--ink)}
.linkish{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;font-weight:600}
/* visor */
#viewer{position:fixed;inset:0;background:rgba(15,22,32,.88);z-index:5000;display:none;flex-direction:column}
#viewer.on{display:flex}
#viewer .bar2{display:flex;align-items:center;gap:10px;padding:10px 16px;color:#fff;flex-wrap:wrap}
#viewer .bar2 b{font:600 20px var(--f-display)}
#viewer .bar2 .path{font-size:12px;color:#b9c6d4;flex:1;min-width:200px;word-break:break-all}
#viewer .bar2 .btn{background:#243243;color:#fff;border-color:#3a4b60}
#vimgbox{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:10px}
#vimg{max-width:100%;background:#fff}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:4000;font:600 18px var(--f-display);color:var(--ink2)}
@media (max-width:1100px){.panel{position:absolute;right:0;top:0;bottom:0;z-index:1200;box-shadow:-4px 0 16px rgba(0,0,0,.15)}.panel.hide{display:none}}
@media (max-width:760px){.side{display:none}.grid2{grid-template-columns:1fr}.panel{width:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.leaflet-container{font:12px var(--f-body)}
.basesw{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.3);padding:4px;display:flex;gap:2px}
.basesw button{border:0;background:none;padding:6px 10px;border-radius:6px;font-weight:600;cursor:pointer;font:600 12px var(--f-body)}
.basesw button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg{display:inline-flex;background:#e6eaef;border-radius:8px;padding:3px;gap:3px}
.seg button{border:0;background:none;padding:8px 16px;border-radius:6px;font-weight:700;cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.15)}
#vframe{flex:1;border:0;background:#fff;width:100%}
#critm{position:fixed;inset:0;background:rgba(10,20,30,.55);display:none;z-index:3000;padding:24px;overflow:auto}#critm.on{display:block}#critm .cbox{background:#fff;max-width:1100px;margin:0 auto;padding:18px 20px;border-radius:8px}table.vt td,table.vt th{padding:4px 6px;font-size:12.5px}
table.kt{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px;color:#16212e}table.kt td{padding:5px 4px;border-top:1px solid #e6eaef}table.kt td:nth-child(2){color:#4a5868;white-space:nowrap}table.kt td:nth-child(3){text-align:right;font-weight:700;white-space:nowrap}.kn{font-size:11.5px;color:#5d6977;margin-top:6px}.kbig .v{font-size:30px}
.kref{margin-top:10px;padding:8px 10px;background:#f4f6f8;border-radius:6px;font-size:12.5px;color:#4a5868}.kref table.kt{font-size:12.5px}.kref table.kt td:nth-child(3){color:#4a5868}
.kv9{margin-top:10px;padding:8px 10px;background:#eef4fb;border-radius:6px;font-size:12.5px;color:#1d3d63}.kv9 table.kt{font-size:12.5px}
nav.tabs.sys a{padding:6px 12px}
.ptabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ptab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:600 13px var(--f-body,inherit);color:var(--ink);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.ptab span{background:#e8edf3;border-radius:999px;padding:1px 8px;font-size:12px}
.ptab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.ptab[aria-selected="true"] span{background:rgba(255,255,255,.25);color:#fff}
/* ===== Dashboard común (CNX AGUA · CNX ALC · REDES ALC) ===== */
.dsec{display:flex;flex-direction:column;gap:12px}
.dsec>h2.st{font:700 20px/1.1 var(--f-display);margin:6px 0 0;display:flex;align-items:center;gap:10px;color:var(--ink)}
.dsec>h2.st .nro{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px}
.dsec>p.sd{margin:-6px 0 0 38px;font-size:12.5px;color:var(--ink2)}
.kpi .v.sm{font-size:24px}
table.t td.tot,table.t tr.tot td{font-weight:700;background:#f4f6f8}
table.t th.n{text-align:right}
table.t td .pct{display:flex;align-items:center;gap:6px;justify-content:flex-end}
table.t td .pct .bar{width:90px;min-width:60px}
table.t td .pct span{white-space:nowrap;min-width:46px;text-align:right}
.bar i.ok{background:#2e9e5b}
.sw2{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.dnote{font-size:11.5px;color:#5d6977;margin-top:8px;line-height:1.45}
.dgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}
@media (max-width:1100px){.dgrid{grid-template-columns:1fr}}