:root{--c:#22d3ee;--c2:#6366f1;--on:#04121a;--bg:#060a12;--bg2:#0c1322;--panel:rgba(255,255,255,.05);--panel2:rgba(255,255,255,.085);--line:rgba(255,255,255,.1);--grid:rgba(255,255,255,.035);
--tx:#e8edf7;--mut:#8f9bb5;--ok:#34d399;--info:#38bdf8;--warn:#fbbf24;--bad:#fb7185;--r:16px;--side:256px;
--s1:var(--c);--s2:var(--c2);--s3:#34d399;--s4:#fbbf24;--s5:#fb7185;--s6:#a78bfa;
--fd:'Sora',system-ui,'Segoe UI',sans-serif;--fb:'Inter',system-ui,'Segoe UI',sans-serif;color-scheme:dark}
:root[data-theme=light]{--bg:#eef2f8;--bg2:#ffffff;--panel:rgba(255,255,255,.9);--panel2:#eef2f9;--line:#dbe2ee;--grid:rgba(20,40,80,.045);--tx:#0e1a2f;--mut:#5b6985;--ok:#059669;--info:#0284c7;--warn:#b45309;--bad:#e11d48;color-scheme:light}
:root.mini{--side:76px}
*{box-sizing:border-box}
body{margin:0;font:14.5px/1.55 var(--fb);color:var(--tx);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(900px 520px at 88% -8%,color-mix(in srgb,var(--c) 17%,transparent),transparent 62%),radial-gradient(760px 520px at -8% 108%,color-mix(in srgb,var(--c2) 15%,transparent),transparent 62%),
linear-gradient(var(--grid) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/44px 44px}
a{color:var(--c)}.ic{flex:none}
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .25s ease}
.side{position:sticky;top:0;height:100vh;padding:18px 12px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 78%,transparent);backdrop-filter:blur(20px);display:flex;flex-direction:column;overflow:hidden}
.brand{display:flex;gap:12px;align-items:center;padding:2px 6px 20px;white-space:nowrap}
.brand-t b{display:block;font:600 15px var(--fd);letter-spacing:-.01em}.brand-t small{color:var(--mut);font-size:12px}
.logo{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;font:700 15px var(--fd);color:var(--on);background:linear-gradient(135deg,var(--c),var(--c2));box-shadow:0 0 26px color-mix(in srgb,var(--c) 45%,transparent)}
.side nav{flex:1;overflow-y:auto;overflow-x:hidden}
.side nav a{display:flex;align-items:center;gap:12px;padding:10px 13px;margin-bottom:3px;border-radius:12px;color:var(--mut);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.side nav a:hover{background:var(--panel);color:var(--tx)}
.side nav a.on{background:var(--panel2);color:var(--tx);box-shadow:inset 3px 0 0 var(--c)}.side nav a.on .ic{color:var(--c)}
.sep{height:1px;background:var(--line);margin:10px 8px}
.mini .lbl,.mini .brand-t,.mini .chip-t{display:none}.mini .brand{justify-content:center;padding-inline:0}.mini .side nav a{justify-content:center;padding-inline:0}
.wrap{min-width:0}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 28px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px)}
.crumb{display:flex;align-items:center;gap:6px;color:var(--mut)}.crumb b{color:var(--tx);font-weight:500}.sp{flex:1}
.clock{color:var(--mut);font-size:13px;font-variant-numeric:tabular-nums;margin-right:6px}
.chip{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:99px;background:var(--panel);border:1px solid var(--line)}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--fd);color:var(--on);background:linear-gradient(135deg,var(--c),var(--c2))}
.chip-t b{display:block;font-size:13px;line-height:1.1;font-weight:500}.chip-t small{color:var(--mut);font-size:11.5px}
main{padding:28px;max-width:1560px}
h1{font:600 25px/1.2 var(--fd);letter-spacing:-.02em;margin:0 0 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ph{margin-bottom:22px}.ph h1{margin-bottom:4px}.sub{margin:0;color:var(--mut)}
.count{font:500 12px var(--fb);letter-spacing:0;padding:3px 11px;border-radius:99px;background:var(--panel2);color:var(--mut);border:1px solid var(--line)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:18px}
.kpi{position:relative;overflow:hidden;padding:18px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px)}
.kpi::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%)}
.kpi .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.kpi b{display:block;margin-top:16px;font:600 32px/1 var(--fd);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.kpi span{display:block;margin-top:6px;color:var(--mut)}
.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;margin-bottom:16px}
.box{padding:20px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);overflow:auto;margin-bottom:16px}.cg .box{margin-bottom:0}
.box h3{margin:0 0 14px;font:600 15px var(--fd);letter-spacing:-.01em}.empty{color:var(--mut);margin:0}
table{width:100%;border-collapse:collapse}
th{padding:9px 12px;text-align:left;font-size:12.5px;font-weight:500;color:var(--mut);border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
td{padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}tr:last-child td{border-bottom:0}tbody tr:hover td,table tr:hover td{background:var(--panel)}
td:last-child .ib{margin-left:4px}td form{display:inline}
.badge{--bc:var(--mut);display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:500;color:var(--bc);background:color-mix(in srgb,var(--bc) 13%,transparent);border:1px solid color-mix(in srgb,var(--bc) 30%,transparent)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bc)}.badge.ok{--bc:var(--ok)}.badge.info{--bc:var(--info)}.badge.warn{--bc:var(--warn)}.badge.bad{--bc:var(--bad)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border:0;border-radius:12px;font:600 14px var(--fb);color:var(--on);background:linear-gradient(135deg,var(--c),var(--c2));text-decoration:none;cursor:pointer;transition:box-shadow .2s,transform .1s}
.btn:hover{box-shadow:0 0 24px color-mix(in srgb,var(--c) 45%,transparent)}.btn:active{transform:translateY(1px)}
.btn.gray{color:var(--tx);background:var(--panel2);border:1px solid var(--line)}.btn.gray:hover{box-shadow:none;border-color:var(--c)}.btn.wide{width:100%;justify-content:center;padding:12px}
.ib{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--mut);cursor:pointer;text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.ib:hover{color:var(--c);border-color:var(--c);background:var(--panel2)}.ib.bad:hover{color:var(--bad);border-color:var(--bad)}
.bar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.bar form{display:flex;gap:8px;flex-wrap:wrap}
input,select,textarea{width:100%;padding:10px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font:inherit;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
select option{background:var(--bg2);color:var(--tx)}.bar input,.bar select{width:auto;min-width:170px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}label{display:block;margin-bottom:5px;font-size:13px;color:var(--mut)}
.flash,.err{padding:12px 16px;border-radius:12px;margin-bottom:16px;border:1px solid}
.flash{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.err{background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}.tabs a{padding:8px 15px;border-radius:99px;text-decoration:none;color:var(--mut);background:var(--panel);border:1px solid var(--line)}
.tabs a:hover{color:var(--tx)}.tabs a.on{color:var(--on);background:linear-gradient(135deg,var(--c),var(--c2));border-color:transparent;font-weight:600}
.donut{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.donut svg{width:160px;height:160px;flex:none}.dn{font:600 26px var(--fd);fill:var(--tx)}.dl{font-size:11px;fill:var(--mut)}
.leg{list-style:none;margin:0;padding:0;flex:1;min-width:150px}.leg li{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--line)}.leg li:last-child{border:0}
.leg i{width:10px;height:10px;border-radius:3px}.leg span{flex:1;color:var(--mut);text-transform:capitalize}
.bars{width:100%;height:auto;max-height:230px}.bv{font-size:11px;fill:var(--tx);font-weight:600}.bl{font-size:10.5px;fill:var(--mut)}
.mapgrid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}#map{height:600px;border-radius:12px;border:1px solid var(--line)}
:root[data-theme=dark] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--bg2);color:var(--tx)}
.veh span{display:block;width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent),0 0 20px var(--c);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--c) 8%,transparent),0 0 26px var(--c)}}
.vl{list-style:none;margin:0;padding:0}.vl li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.vl li:last-child{border:0}.vl small{display:block;color:var(--mut)}
/* inicio de sesión */
.lg{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh}
.hero{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:40px 56px;border-right:1px solid var(--line)}
.radar{position:relative;width:min(400px,62vw);aspect-ratio:1;margin:0 auto;border-radius:50%;overflow:hidden;background:repeating-radial-gradient(circle,transparent 0 44px,var(--line) 45px 46px)}
.radar::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--c) 50%,transparent),transparent 30%);animation:sweep 6s linear infinite}
.radar::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
@keyframes sweep{to{transform:rotate(360deg)}}
.core{position:absolute;z-index:2;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;color:var(--on);background:linear-gradient(135deg,var(--c),var(--c2));box-shadow:0 0 40px color-mix(in srgb,var(--c) 55%,transparent)}
.blip{position:absolute;z-index:2;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c);animation:blink 3s ease-in-out infinite}
.b1{left:70%;top:24%}.b2{left:26%;top:62%;animation-delay:1s}.b3{left:62%;top:76%;animation-delay:2s}@keyframes blink{50%{opacity:.25}}
.hero-t h2{font:600 clamp(24px,2.6vw,34px)/1.2 var(--fd);letter-spacing:-.02em;margin:0 0 16px;max-width:520px}
.feat{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}.feat li{padding:5px 13px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--mut);font-size:13px}
.lgf{display:grid;place-items:center;padding:28px}
.glass{width:100%;max-width:390px;padding:32px;border-radius:20px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(22px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.glass h1{margin-bottom:4px}.glass .sub{margin-bottom:22px}.fld{margin-bottom:16px}.hint{margin:18px 0 0;text-align:center;color:var(--mut);font-size:13px}
:focus-visible{outline:2px solid var(--c);outline-offset:2px}
@media(max-width:1000px){.mapgrid{grid-template-columns:1fr}}
@media(max-width:900px){.app{grid-template-columns:1fr}.side{position:sticky;z-index:9;height:auto;flex-direction:row;align-items:center;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
.brand{padding:0 8px 0 0}.brand-t,.sep,.lbl,.clock,.chip-t,.crumb{display:none}.side nav{display:flex;gap:2px;overflow:visible}.side nav a{padding:10px;margin:0}#navToggle{display:none}
.top{position:static;padding:10px 16px}main{padding:18px 16px}.lg{grid-template-columns:1fr}.hero{display:none}.lgf{min-height:100vh}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:18px}
.stat>div{padding:12px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}.stat small{display:block;color:var(--mut)}.stat b{font:600 16px var(--fd)}
.live{display:flex;align-items:center;gap:9px}.dotl{width:9px;height:9px;border-radius:50%;background:var(--mut)}.dotl.on{background:var(--ok);box-shadow:0 0 12px var(--ok);animation:blink 1.6s ease-in-out infinite}