@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0b1522;--panel:#122132;--line:#27384b;--muted:#8fa5ba;--text:#eaf1f8;--cyan:#41d5df;--blue:#528cff;--green:#5ed9aa;--amber:#f4bc63;--red:#f87582}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',Arial,sans-serif}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0}.topbar{height:100px;position:fixed;top:0;left:0;right:0;background:#122033;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:16px 28px;gap:25px;z-index:20}.brand{width:188px;background:#fff;border-radius:7px;padding:10px 13px;display:flex;align-items:center;height:68px}.brand img{width:100%;height:100%;object-fit:contain}.product{border-right:1px solid #344359;padding-right:26px}.product strong{font:800 34px 'Manrope',sans-serif;letter-spacing:2px}.product strong span{font-size:12px;vertical-align:top;letter-spacing:0}.product small{display:block;font-size:8px;letter-spacing:1.8px;color:#b3c6da}.tagline{font:600 17px 'Manrope',sans-serif;letter-spacing:.1px}.tagline small{display:block;font:9px 'DM Sans',sans-serif;letter-spacing:1.5px;margin-top:9px;color:var(--muted)}.topright{margin-left:auto;display:flex;align-items:center;gap:13px}.clock{text-align:right;margin-right:12px}.clock b{font-size:18px;font-variant-numeric:tabular-nums}.clock small,.operator small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.operator b{font-size:12px}.avatar{border:1px solid #41617a;background:#1e3d55;width:38px;height:38px;border-radius:50%;font-size:12px;color:#9de5ea}.sidebar{position:fixed;top:100px;bottom:0;left:0;width:230px;background:#101e2d;border-right:1px solid var(--line);padding:29px 16px;display:flex;flex-direction:column;z-index:15}.nav-label{font-size:9px;letter-spacing:1.7px;color:#8198ae;margin:0 12px 22px}nav{display:grid;gap:6px}nav a{display:flex;align-items:center;gap:14px;padding:14px;border-radius:7px;color:#9eb0c5;font-size:12px;position:relative}nav a:hover{background:#182d40;color:white}nav a.active{background:linear-gradient(90deg,#17455b,#193245);color:#8beaf0}nav a.active:before{content:'';position:absolute;left:-16px;height:23px;width:3px;background:var(--cyan);border-radius:3px}.nav-badge{margin-left:auto;background:#55313b;color:#ffacb5;border-radius:5px;font-size:10px;padding:2px 6px}.side-bottom{margin-top:auto;border-top:1px solid var(--line);padding:22px 12px 0}.connection{font-size:10px;color:#91cbbd;display:flex;gap:7px;align-items:center}.side-bottom p{font:600 18px/1.5 'Manrope',sans-serif;color:#c8d7e4;margin:25px 0}.demo-mark{font-size:9px;color:var(--cyan);letter-spacing:1.3px;margin-bottom:10px}.side-bottom small{font-size:10px;line-height:1.8;color:#7f94a9}main{margin:100px 0 0 230px;padding:20px 30px 0;max-width:2200px}.demo-banner{border:1px solid #2a3c4d;background:#132535;padding:10px 14px;border-radius:6px;display:flex;gap:16px;align-items:center;color:#a8bdcf}.demo-banner span{font-size:9px;letter-spacing:1px;white-space:nowrap;color:#70d7dd;font-weight:700;display:flex;align-items:center;gap:7px}.demo-banner span i{width:5px;height:5px;border-radius:50%;background:var(--cyan)}.demo-banner p{font-size:10px;margin:0}.demo-banner button{background:none;border:0;color:#9ab7c9;margin-left:auto;font-size:17px}.page-heading{display:flex;justify-content:space-between;align-items:end;margin:29px 0 25px;gap:18px}.breadcrumb,.eyebrow{font-size:9px;letter-spacing:1.7px;color:var(--cyan);font-weight:600}h1{font:800 29px 'Manrope',sans-serif;margin:10px 0 8px;letter-spacing:-.9px}.page-heading p{color:var(--muted);font-size:12px;margin:0;line-height:1.6}.heading-actions{display:flex;align-items:center;gap:9px}.updated{color:var(--muted);font-size:9px;max-width:100px;line-height:1.6}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;padding:11px 14px;font-size:11px;font-weight:600;border:1px solid transparent;white-space:nowrap}.button svg{width:15px;height:15px}.secondary{background:#172738;border-color:#34485b;color:#c0d0df}.primary{background:var(--cyan);color:#092433}.button:hover{filter:brightness(1.12)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:23px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:19px 19px 16px;position:relative;overflow:hidden}.stat-top{display:flex;justify-content:space-between;color:#9cb0c5;font-size:11px}.stat-top svg{color:var(--cyan);width:18px}.stat strong{font:700 32px 'Manrope';display:block;margin:9px 0 6px;letter-spacing:-1px}.stat strong small{font:500 12px 'DM Sans';letter-spacing:0;color:var(--muted)}.stat-bottom{font-size:10px;color:var(--muted)}.stat-bottom .green{color:var(--green)}.stat-bottom .amber{color:var(--amber)}.stat .spark{position:absolute;right:12px;bottom:21px;width:76px;height:33px;stroke:var(--cyan);opacity:.55}.stat.alert .stat-top svg{color:var(--amber)}.stat.alert strong{color:var(--amber)}.dashboard-grid{display:grid;grid-template-columns:minmax(380px,1.6fr) minmax(290px,1fr);gap:20px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.panel-head{padding:18px 21px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #263749;gap:10px}.panel-head h2{font:700 14px 'Manrope';margin:0}.panel-head p{font-size:10px;color:var(--muted);margin:5px 0 0}.pill{font-size:9px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid #315965;background:#183744;color:#84dbe0;border-radius:4px;white-space:nowrap}.map-wrap{position:relative;height:365px;background:radial-gradient(ellipse at 50% 45%,#173b45 0,#10283a 45%,#102332 80%);overflow:hidden}.map-grid{position:absolute;inset:0;background-image:linear-gradient(#31506125 1px,transparent 1px),linear-gradient(90deg,#31506125 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse,black,transparent 85%)}.map-svg{position:relative;width:100%;height:100%;stroke:none;fill:none}.map-svg .country{fill:#1c4851;stroke:#4c7d82;stroke-width:1.2}.map-svg .river{stroke:#57b5cb;stroke-width:1.6;opacity:.5;fill:none}.map-svg text{font-family:'DM Sans',sans-serif;fill:#7ca1b5;font-size:10px}.map-svg .map-station{cursor:pointer;outline:none}.map-station circle{stroke:#102c3c;stroke-width:3}.map-station:hover circle,.map-station:focus circle{stroke:white;stroke-width:2}.map-svg .station-label{fill:#dcebf1;font-size:11px;font-weight:600}.map-region{position:absolute;top:17px;left:19px;letter-spacing:2px;font-size:9px;color:#799cae}.map-note{position:absolute;bottom:17px;left:19px;font-size:9px;color:#6f92a7}.map-key{display:flex;gap:17px;padding:13px 21px;border-top:1px solid var(--line);font-size:10px;color:#a5b8ca}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.dot.green{background:var(--green)}.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}.dot.gray{background:#7c92a5}.map-key .link{margin-left:auto}.link{border:0;background:none;color:var(--cyan);font-size:10px;padding:0;display:flex;align-items:center;gap:5px}.link svg{width:13px}.camera-box{height:218px;background:#1b3040;position:relative}.camera-box img{width:100%;height:100%;object-fit:cover}.camera-box:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#07152233 35%,#071522df)}.camera-badge{position:absolute;top:14px;left:15px;z-index:1;font-size:8px;font-weight:600;background:#132433dd;padding:6px 8px;border-radius:4px;letter-spacing:1px}.camera-caption{position:absolute;bottom:16px;left:18px;z-index:1}.camera-caption b{display:block;font-size:14px}.camera-caption small{font-size:10px;color:#b1c3d1;display:block;margin-top:5px}.camera-open{position:absolute;bottom:18px;right:17px;z-index:1;background:#ffffff17;border:1px solid #ffffff50;padding:7px;border-radius:5px;display:flex}.station-metrics{display:grid;grid-template-columns:repeat(3,1fr);padding:17px 19px;border-bottom:1px solid var(--line);gap:10px}.station-metrics span{font-size:9px;color:var(--muted)}.station-metrics b{display:block;font:700 22px 'Manrope';margin-top:5px}.station-metrics b small{font:10px 'DM Sans';color:var(--muted)}.metric-status{display:flex;justify-content:space-between;padding:16px 19px;font-size:10px;color:#a8bdcd}.metric-status span{display:flex;align-items:center;gap:5px}.metric-status svg{width:13px;height:13px;color:var(--green)}.lower-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:20px}.chart-area{padding:20px}.chart-header{display:flex;align-items:center;gap:15px;margin-bottom:10px;font-size:10px;color:var(--muted)}.chart-header b{font-size:20px;color:#e9f3f9}.chart-header .trend{color:var(--amber);margin-left:auto}.chart-controls{display:flex;gap:3px}.chart-controls button{border:0;background:transparent;color:var(--muted);padding:5px 7px;border-radius:4px;font-size:9px}.chart-controls button.active{background:#254256;color:#8de3e7}.water-chart{width:100%;height:146px;stroke:none;overflow:visible}.water-chart text{font-size:9px;fill:#7f9bb1}.chart-disclaimer{font-size:9px;color:#708da3;margin:10px 0 0}.incident{display:flex;gap:11px;padding:15px 19px;border-bottom:1px solid #263749;cursor:pointer}.incident:hover{background:#193042}.incident:last-child{border:0}.incident .incident-icon{padding:7px;border-radius:6px;background:#f4bc6317;color:var(--amber);height:32px}.incident .incident-icon svg{width:17px;height:17px}.incident-icon.red{background:#f8758217;color:var(--red)}.incident h3{font-size:11px;margin:1px 0 5px;font-weight:600}.incident p{font-size:10px;color:var(--muted);margin:0;line-height:1.5}.incident time{font-size:9px;color:#7996ad;white-space:nowrap;margin-left:auto}.section-gap{margin-top:22px}.toolbar{display:flex;gap:10px;padding:17px 20px;align-items:center;border-bottom:1px solid var(--line)}.search-field{display:flex;align-items:center;gap:8px;border:1px solid #31475c;border-radius:6px;padding:9px 12px;background:#0f1e2d;min-width:200px;flex:1;max-width:340px;color:#829caf}.search-field svg{width:15px;height:15px}.search-field input{background:none;border:0;outline:none;color:#e5f1f8;width:100%;font-size:11px}.toolbar select,select{background:#172b3c;border:1px solid #355064;color:#c9d9e6;padding:9px;border-radius:6px;font-size:11px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}th{font-size:9px;letter-spacing:.6px;color:#8199ae;background:#102031;font-weight:500;padding:12px 20px}td{border-top:1px solid #25374a;padding:16px 20px;font-size:11px;color:#b7c9d8}td strong{color:#e3edf5;font-weight:600;display:block}td small{display:block;font-size:9px;color:#7c96ab;margin-top:4px}.status-tag{font-size:9px;display:inline-flex;gap:5px;align-items:center;background:#5ed9aa11;color:var(--green);padding:5px 8px;border-radius:4px}.status-tag.warning{background:#f4bc6314;color:var(--amber)}.status-tag.off{background:#7c92a51a;color:#9db0c2}.status-tag.critical{background:#f8758215;color:var(--red)}.row-action{border:0;background:#21394e;color:#8bdbe4;border-radius:5px;padding:7px 10px;font-size:10px}.row-action:hover{background:#2b5062}.table-footer{padding:13px 20px;color:#7c94aa;font-size:9px;display:flex;justify-content:space-between;border-top:1px solid var(--line)}footer{display:flex;justify-content:space-between;color:#607a90;font-size:9px;padding:23px 0 20px;gap:15px}.camera-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.camera-grid .camera-box{height:260px}.camera-placeholder{height:260px;display:grid;place-content:center;text-align:center;background:radial-gradient(ellipse,#1a3748,#102132);color:#66899d;gap:9px}.camera-placeholder svg{margin:auto;width:32px;height:32px}.camera-placeholder p{margin:0;font-size:11px}.notice{background:#173344;border:1px solid #285465;border-radius:8px;padding:17px 20px;margin-bottom:20px;color:#a5cbd6;font-size:12px;line-height:1.7}.config-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.config-card{padding:24px}.config-card h2{font:700 16px 'Manrope';margin-top:0}.config-card p,.config-card li{color:var(--muted);font-size:12px;line-height:1.9}.config-card ul{padding-left:20px}.empty{padding:40px;text-align:center;color:var(--muted)}dialog{border:1px solid #3a586e;border-radius:12px;background:#122436;color:#e4f0f7;padding:25px;width:640px;max-width:94vw;max-height:90vh}dialog::backdrop{background:#040c17bb;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:start;justify-content:space-between;margin-bottom:20px}.dialog-head h2{font:700 23px 'Manrope';margin:8px 0}.close{background:#243d50;color:#c0d7e5;border:0;border-radius:6px;font-size:24px;width:32px;height:32px}.dialog-copy{font-size:12px;color:#a7bdce;line-height:1.9}.dialog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.dialog-grid div{background:#0e1d2b;border:1px solid var(--line);padding:15px;border-radius:7px}.dialog-grid span{font-size:10px;color:var(--muted)}.dialog-grid b{display:block;font-size:22px;margin-top:8px}.dialog-photo{width:100%;max-height:260px;object-fit:cover;border-radius:8px}.toast{position:fixed;bottom:25px;left:calc(50% + 110px);transform:translateX(-50%) translateY(100px);opacity:0;transition:.2s;z-index:60;background:#dcf6f0;color:#123b35;border:1px solid #81c3b1;border-radius:7px;padding:14px 22px;font-size:12px;max-width:90vw;box-shadow:0 12px 50px #0008}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.mobile-menu{display:none}.report-options{display:flex;gap:10px;margin-top:25px;flex-wrap:wrap}.attribution{font-size:9px;color:#7996ab;line-height:1.5}.attribution a{text-decoration:underline}.skeleton{animation:blink 1s infinite alternate}@keyframes blink{to{opacity:.4}}@media(min-width:1600px){main{padding:25px 38px 0}.map-wrap{height:420px}.camera-box{height:273px}.water-chart{height:180px}.sidebar{width:250px}main{margin-left:250px}.topbar{gap:35px}.brand{width:196px}.stat{padding:23px}.stat strong{font-size:36px}.panel-head{padding:20px 23px}}@media(max-width:1250px){.tagline{display:none}.operator{display:none}.sidebar{width:195px}main{margin-left:195px;padding-left:20px;padding-right:20px}.nav-label{font-size:8px}nav a{font-size:11px;padding:13px 10px}.topbar{padding-left:20px}.brand{width:155px}.dashboard-grid{grid-template-columns:1.2fr 1fr}.lower-grid{grid-template-columns:1.2fr 1fr}.updated{display:none}.stat strong{font-size:28px}.stat{padding:15px}.stat .spark{width:53px}.map-key{gap:10px;padding:13px;font-size:9px}.map-key .link{font-size:9px}.page-heading h1{font-size:26px}.heading-actions .button{padding:10px}.page-heading p{max-width:390px}}@media(max-width:950px){.sidebar{width:72px;padding:25px 10px}.nav-label,.nav-text,.side-bottom,.nav-badge{display:none}nav a{justify-content:center;padding:14px}nav a.active:before{left:-10px}main{margin-left:72px}.dashboard-grid,.lower-grid{grid-template-columns:1fr 1fr}.page-heading{align-items:start}.heading-actions{flex-wrap:wrap;justify-content:end}.stats{gap:9px}.stat-top{font-size:10px}.stat-top svg{display:none}.stat strong{font-size:26px}.stat .spark{display:none}.map-key .link{display:none}.camera-caption b{font-size:12px}.map-wrap{height:365px}.camera-box{height:218px}.station-metrics{padding:17px 12px}.station-metrics b{font-size:18px}.metric-status{padding:16px 12px}.incident{padding:15px 12px}.incident time{display:none}.demo-banner p{font-size:9px}.toast{left:55%}}@media(max-width:700px){.topbar{height:80px;padding:10px 15px;gap:14px}.brand{width:130px;height:52px;padding:7px}.product{border:0;padding:0}.product strong{font-size:26px}.product small{font-size:6px;letter-spacing:1px}.clock,.avatar{display:none}.mobile-menu{display:block;border:0;background:none;color:#dcebf3;font-size:20px;padding:0}.sidebar{top:80px;transform:translateX(-100%);transition:.2s;width:215px;padding:25px 15px}.sidebar.open{transform:none;box-shadow:15px 0 40px #0009}.sidebar.open .nav-text,.sidebar.open .nav-label,.sidebar.open .side-bottom{display:block}.sidebar.open nav a{justify-content:start}main{margin:80px 0 0;padding:14px}.demo-banner{gap:8px}.demo-banner span{font-size:8px}.demo-banner p{display:none}.page-heading{margin:22px 0;display:block}.page-heading h1{font-size:27px}.heading-actions{margin-top:17px;justify-content:start}.stats{grid-template-columns:repeat(2,1fr);gap:10px}.stat{padding:15px}.stat strong{font-size:30px}.stat-top svg{display:block}.dashboard-grid,.lower-grid,.camera-grid,.config-grid{grid-template-columns:1fr;gap:16px}.map-wrap{height:370px}.camera-box{height:240px}.map-key .link{display:flex}.stat-bottom{font-size:9px}.toolbar{flex-wrap:wrap;padding:13px}.toolbar .search-field{max-width:100%;min-width:100%;flex-basis:100%}.panel-head{padding:17px}.dialog-grid{grid-template-columns:repeat(2,1fr)}footer{font-size:8px;line-height:1.7}.toast{left:50%;width:max-content;max-width:90vw}.section-gap{margin-top:18px}}@media print{.topbar,.sidebar,.demo-banner,.heading-actions,button,.toolbar,footer{display:none!important}main{margin:0;padding:0}.panel,.stat{break-inside:avoid}body{background:white;color:#111}.panel,.stat,.notice{background:white;color:#111;border-color:#bbb}td,th,.panel-head p,.stat-top,.stat-bottom{color:#222!important}.map-wrap{print-color-adjust:exact}.dashboard-grid,.lower-grid{display:block}.panel{margin-bottom:15px}h1:before{content:'ANA · GUARD — DEMOSTRACIÓN / '}}