:root{color-scheme:light;--navy:#112235;--navy2:#1a2e43;--ink:#213247;--muted:#7b8b9c;--blue:#2976c9;--cobalt:#1269bf;--orange:#f58439;--cream:#f6f8fa;--stroke:#e7ecf1;--red:#e6484c;--yellow:#d6a03b;--green:#149e77;--shadow:0 14px 50px rgba(17,34,53,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:#fff;color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}[hidden]{display:none!important}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}button, a{-webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #5facf5;outline-offset:3px}svg:not(.leaflet-zoom-animated):not(.leaflet-pane svg){width:100%;height:100%;display:block}.leaflet-pane svg,.leaflet-container svg.leaflet-zoom-animated{width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;display:inline!important}.skip-link{position:fixed;z-index:10000;top:-100px;left:12px;background:#fff;padding:12px;border-radius:8px}.skip-link:focus{top:12px}.app-shell{min-height:100svh;display:flex;flex-direction:column}.site-header{height:86px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 3.2%;background:#fff;border-bottom:1px solid var(--stroke);position:relative;z-index:500}.brand{text-decoration:none;display:flex;gap:12px;align-items:center}.brand-symbol{width:47px;height:47px;color:#1872c0}.brand-copy{display:flex;flex-direction:column;gap:1px}.brand-copy strong{font:800 22px/1.06 Manrope,sans-serif;letter-spacing:-1.15px;color:#183247}.brand-copy strong span{color:var(--blue)}.brand-copy small{font-size:10px;font-weight:800;letter-spacing:1.35px;color:#8995a4;text-transform:uppercase}.header-right{display:flex;align-items:center;gap:22px}.header-date{color:#8e99a6;font-size:12px;font-weight:700}.connection-badge{border:1px solid #deeae5;border-radius:24px;background:#f4fbf8;min-height:34px;padding:0 13px;display:flex;align-items:center;gap:8px;font-size:11px;color:#348267;font-weight:800;letter-spacing:.2px;white-space:nowrap}.connection-badge[data-state=error]{background:#fff6f4;border-color:#f5d2ce;color:#c65b4a}.connection-badge[data-state=stale]{background:#fffaf0;border-color:#f2e2c8;color:#a47d32}.connection-badge[data-state=loading]{background:#f4f7fb;border-color:#e3eaf0;color:#667e99}.status-dot{height:7px;width:7px;background:currentColor;border-radius:50%;box-shadow:0 0 0 4px currentColor;outline:2px solid #fff;outline-offset:-2px;opacity:.8}.source-link{text-decoration:none;color:#75859a;display:flex;align-items:center;gap:5px;font-weight:800;font-size:12px}.source-link:hover{color:var(--blue)}.source-link svg{width:16px;height:16px}.workspace{display:grid;grid-template-columns:minmax(336px,398px) minmax(0,1fr);height:calc(100svh - 86px);min-height:575px;overflow:hidden}.panel{background:#fff;border-right:1px solid var(--stroke);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d9e2ea transparent;z-index:3}.panel-inner{padding:35px 27px 14px 34px}.intro-label{display:flex;gap:10px;align-items:center;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:2.4px}.intro-dash{display:block;background:var(--orange);width:19px;height:3px;border-radius:99px}.panel h1{font:800 clamp(31px,2.7vw,41px)/1.08 Manrope,sans-serif;letter-spacing:-1.8px;margin:17px 0 11px;color:#142739}.panel h1 em{font-style:normal;color:#217ac5}.intro-copy{color:#8794a2;font-size:12.5px;line-height:1.7;max-width:305px;margin:0 0 24px}.update-strip{display:flex;align-items:center;gap:11px;background:#f5f9fc;border:1px solid #e9f0f5;border-radius:13px;padding:11px 11px 11px 13px;margin-bottom:19px}.update-indicator{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:10px;background:#e3f4ea}.update-indicator span{display:block;width:9px;height:9px;background:#19a574;box-shadow:0 0 0 4px rgba(25,165,116,.14);border-radius:50%}.update-strip[data-state=error] .update-indicator{background:#fae9e6}.update-strip[data-state=error] .update-indicator span{background:#db6556;box-shadow:0 0 0 4px #db655627}.update-strip[data-state=stale] .update-indicator{background:#fff0cc}.update-strip[data-state=stale] .update-indicator span{background:#d4a341;box-shadow:0 0 0 4px #d4a34127}.update-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.update-text strong{font-size:11.5px;font-weight:800;color:#344b5c;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.update-text small{font-size:10.5px;color:#91a0af;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.icon-button{height:31px;width:31px;flex:none;border:1px solid #e3edf3;border-radius:10px;color:#587f9f;background:#fff;display:grid;place-items:center;padding:8px}.icon-button:hover{background:#eef6fb;color:#1d74bd}.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:29px}.metric{min-height:100px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border:1px solid #e8edf3;border-radius:13px;padding:13px 16px;background:#fff}.metric-primary{background:#132c41;color:white;border-color:#132c41}.metric-name{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1.1px;font-weight:800;color:#8c9cac;white-space:nowrap}.metric-primary .metric-name{color:#80a9c7}.metric strong{font:800 32px/1.2 Manrope,sans-serif;letter-spacing:-1.2px;margin:4px 0 1px;color:#20364b}.metric-primary strong{color:#fff}.metric small{font-size:10px;color:#9faaba}.metric-primary small{color:#84a4ba}.mini-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none}.dot-red{background:var(--red)}.dot-orange{background:var(--orange)}.dot-yellow{background:var(--yellow)}.list-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.list-toolbar h2{font:800 15px Manrope,sans-serif;margin:0;color:#1b3045;letter-spacing:-.4px}.list-toolbar p{font-size:10.5px;color:#95a3b0;margin:6px 0 0}.list-counter{font:800 12px Manrope,sans-serif;color:#5385a8;background:#edf5fb;border-radius:8px;min-width:31px;height:29px;display:grid;place-items:center;padding:0 8px}.search-wrap{display:flex;align-items:center;width:100%;height:45px;border:1px solid #e5ebef;border-radius:11px;gap:10px;padding:0 11px;margin-bottom:12px;background:#fbfcfd}.search-wrap:focus-within{border-color:#71b2e7;background:white;box-shadow:0 0 0 3px #4d9dd814}.search-wrap svg{width:17px;height:17px;flex:none;color:#9bafbf}.search-wrap input{border:0;outline:none;flex:1;min-width:0;background:transparent;font-size:12px;color:#2f445a}.search-wrap input::placeholder{color:#a4b0bc}.search-wrap kbd{background:#fff;border:1px solid #e4e8ed;padding:4px 5px;border-radius:4px;font:700 9px Manrope,sans-serif;color:#b3bdc6}.filter-scroll{overflow:auto hidden;margin:0 -27px 10px -34px;padding:0 27px 6px 34px;scrollbar-width:none}.filter-scroll::-webkit-scrollbar{display:none}.filters{display:flex;gap:6px;width:max-content}.filter{white-space:nowrap;border:1px solid #edf0f4;border-radius:8px;background:#fff;font-weight:800;font-size:10.5px;color:#8695a5;padding:9px 12px;min-height:36px}.filter:hover{border-color:#b7d4e7;color:#146dad}.filter.active{background:#1d78bd;border-color:#1d78bd;color:#fff;box-shadow:0 5px 14px rgba(27,112,193,.18)}.feedback{background:#fff8ed;border:1px solid #f5e2c3;border-radius:11px;color:#8c6429;padding:12px;font-size:11.5px;line-height:1.6;margin:10px 0 12px}.feedback.error{background:#fff4f3;border-color:#f3d3ce;color:#a53e3c}.feedback a{font-weight:700}.incidents{display:grid;gap:10px;padding-bottom:10px}.incident-card{display:flex;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid #e8edf2;border-radius:12px;padding:14px 12px;box-shadow:0 2px 5px rgba(10,35,60,.018);transition:border-color .2s,transform .2s,box-shadow .2s;position:relative}.incident-card:hover,.incident-card:focus-visible{border-color:#a7cbe5;box-shadow:0 5px 20px rgba(14,67,109,.065);transform:translateY(-1px)}.incident-card:disabled{opacity:1;cursor:default}.incident-card:disabled:hover{transform:none}.incident-icon{display:grid;place-items:center;height:37px;width:37px;flex:none;border-radius:11px;font-size:16px;color:var(--blue);background:#e9f3fd}.incident-icon svg{height:19px;width:19px}.incident-icon.closure{background:#fff0ef;color:#e85852}.incident-icon.accident{background:#fff1e8;color:#f08435}.incident-icon.traffic{background:#fff6e5;color:#cc9628}.incident-icon.works{background:#f1efff;color:#8768d6}.incident-icon.other{background:#e9f3fd;color:#407bb9}.incident-main{min-width:0;flex:1}.incident-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.incident-tag{font-size:9px;line-height:1.35;font-weight:800;letter-spacing:.2px;border-radius:5px;padding:4px 6px;background:#eff4f9;color:#57738f}.incident-tag.closure{background:#fff1ef;color:#dc5652}.incident-tag.accident{background:#fff3e9;color:#e17a30}.incident-tag.traffic{background:#fff6e7;color:#ae7e25}.incident-tag.works{background:#f3f0ff;color:#7c62c4}.incident-tag.other{background:#ecf4fb;color:#4b82b6}.incident-time{font-size:9px;color:#a0acb7}.incident-title{font:800 12.5px/1.45 Manrope,sans-serif;margin:9px 0 4px;color:#283b50;overflow-wrap:anywhere}.incident-description{font-size:11px;line-height:1.6;margin:0 0 9px;color:#8393a2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.incident-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px}.incident-road{font-size:10.5px;font-weight:800;color:#4d7591}.incident-map-action{font-size:10px;font-weight:800;color:#1b79c6;white-space:nowrap}.incident-map-action svg{display:inline-block;vertical-align:middle;width:13px;height:13px;margin-left:2px}.incident-uncertain{font-size:9px;color:#a3aeba}.empty-state{padding:35px 15px 40px;text-align:center;color:#8b9bad;display:flex;align-items:center;flex-direction:column;gap:10px;border:1px dashed #dce5ec;border-radius:14px;background:#fcfdfe}.empty-state strong{font:800 13px Manrope,sans-serif;color:#526b7c}.empty-state p{font-size:11.5px;line-height:1.5;margin:0}.empty-graphic{width:41px;height:41px;background:#e7f0f7;border-radius:15px;display:grid;place-items:center;font-size:24px;color:#428abd}.loading-ring{height:32px;width:32px;border:3px solid #e8f1f8;border-top-color:#368bca;border-radius:50%;animation:spin 1s linear infinite}.panel-tail{font-size:10px;line-height:1.65;color:#a2afbb;border-top:1px solid #edf0f3;padding:17px 0 6px;margin-top:11px}.panel-tail a{color:#6f92b3}.map-section{min-width:0;position:relative;background:#c8dad4;overflow:hidden}.map-section #map,.map-section #map-google{position:absolute;inset:0;width:100%;height:100%;z-index:0}.map-gradient{position:absolute;z-index:1;pointer-events:none;inset:0 0 auto 0;height:160px;background:linear-gradient(180deg,rgba(17,34,53,.14),transparent)}.map-topline{position:absolute;z-index:400;display:flex;align-items:center;justify-content:space-between;gap:16px;top:28px;left:32px;right:31px;pointer-events:none}.map-location-pill{display:flex;align-items:center;gap:10px;border-radius:12px;padding:10px 16px 10px 11px;background:#fff;box-shadow:var(--shadow);pointer-events:auto;min-width:0}.location-icon{height:37px;width:37px;flex:none;border-radius:10px;background:#e9f3fa;display:grid;place-items:center;color:#247bb8;padding:9px}.map-location-pill strong{display:block;font:800 13px Manrope,sans-serif;color:#213647}.map-location-pill small{font-size:10px;color:#99a9b5;display:block;margin-top:3px}.top-actions{pointer-events:auto}.btn{border:none;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;height:46px;font-size:12px;font-weight:800;box-shadow:var(--shadow)}.btn-sync{background:#1d79bd;color:#fff;transition:background .2s}.btn-sync:hover{background:#145e99}.btn-sync svg{width:18px;height:18px}.btn-sync.is-loading svg,.update-quick.is-loading svg{animation:spin .85s linear infinite}.map-side-controls{position:absolute;right:28px;top:108px;z-index:400;background:#fff;border-radius:13px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px}.map-control{height:37px;width:37px;background:#fff;border:0;display:grid;place-items:center;color:#597087;border-radius:8px;padding:9px}.map-control:hover{background:#edf5fa;color:#1471ad}.control-divider{border-top:1px solid #e6ecf1;margin:3px 4px}.map-bottom{position:absolute;z-index:400;bottom:28px;left:32px;right:29px;pointer-events:none;display:flex;gap:12px;align-items:flex-end;justify-content:space-between}.traffic-card{pointer-events:auto;background:#fff;border:1px solid #ecf0f3;border-radius:14px;padding:16px 17px;box-shadow:var(--shadow);max-width:310px;width:100%}.traffic-card-top{display:flex;align-items:center;justify-content:space-between;gap:9px}.traffic-title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:#284459}.traffic-title svg{width:20px;height:20px;color:#3c8fb7}.traffic-flag{color:#8d9ba6;font-size:8px;font-weight:800;letter-spacing:.5px;background:#f1f5f8;padding:6px 7px;border-radius:5px;white-space:nowrap}.traffic-flag.on{color:#178a6a;background:#e9f7f0}.traffic-flag.off{color:#ad7535;background:#fff4e3}.traffic-legend{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#7f90a0;margin-top:14px}.traffic-legend span{display:flex;gap:5px;align-items:center;white-space:nowrap}.traffic-legend i{width:21px;height:4px;border-radius:4px;display:block}.line-green{background:#46ae67}.line-orange{background:#f19e40}.line-red{background:#df534b}.traffic-card p{color:#8d9ead;font-size:10.5px;line-height:1.55;margin:12px 0 0}.traffic-card p code{font-family:ui-monospace,monospace;background:#eef2f6;padding:1px 4px;border-radius:3px}.traffic-toggle{color:#247cba;border:0;background:#edf6ff;border-radius:7px;margin-top:9px;padding:7px 10px;font-size:10px;font-weight:800}.map-caption{background:#fff;box-shadow:var(--shadow);border-radius:10px;max-width:285px;display:flex;align-items:flex-start;gap:9px;padding:11px 13px;line-height:1.5;color:#8899a8;font-size:10px}.caption-icon{font:700 12px Manrope,sans-serif;color:#3188c5;background:#eaf3fa;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;flex:none}.leaflet-control-attribution{font:10px DM Sans,sans-serif!important;background:#fffe!important;color:#4d6d7c!important}.leaflet-container a{color:#2074b1}.leaflet-control-container .leaflet-top.leaflet-left{display:none}.gc-pin{--pin-color:#4682bd;width:37px;height:44px;position:relative;filter:drop-shadow(0 3px 6px rgba(7,26,40,.2))}.gc-pin__head{width:37px;height:37px;border-radius:13px 13px 13px 3px;background:var(--pin-color);color:white;display:grid;place-items:center;border:3px solid white;transform:rotate(-45deg)}.gc-pin__head span{font:800 15px Manrope,sans-serif;transform:rotate(45deg)}.gc-pin--closure{--pin-color:#df4d4c}.gc-pin--accident{--pin-color:#f18b33}.gc-pin--traffic{--pin-color:#d4a03b}.gc-pin--works{--pin-color:#8161c6}.gc-pin--other{--pin-color:#488abc}.popup-inner{font-family:'DM Sans',sans-serif;max-width:255px}.popup-inner .popup-category{display:inline-block;text-transform:uppercase;color:#257ebc;font-size:9px;letter-spacing:1.2px;font-weight:800}.popup-inner h3{color:#1e384e;font:800 15px/1.35 Manrope,sans-serif;margin:8px 0}.popup-inner p{font-size:12px;line-height:1.5;color:#687e90;margin:7px 0;overflow-wrap:anywhere}.popup-inner small{font-size:10px;color:#9aa9b6}.popup-inner a{font-weight:700;color:#1977b7;display:inline-block;font-size:11px;margin-top:9px}.leaflet-popup-content-wrapper{border-radius:14px!important;box-shadow:0 15px 40px #172b4028!important}.leaflet-popup-content{margin:14px 17px!important}.mobile-footer{display:none}@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1090px){.workspace{grid-template-columns:minmax(315px,350px) minmax(0,1fr)}.panel-inner{padding:30px 19px 14px 22px}.filter-scroll{margin-left:-22px;margin-right:-19px;padding-left:22px;padding-right:19px}.map-bottom{left:20px;bottom:20px;right:20px}.map-topline{top:20px;left:20px;right:20px}.map-caption{max-width:230px}.traffic-card{max-width:280px}.traffic-legend{gap:4px}}
@media (max-width:760px){.site-header{height:69px;padding:0 16px}.brand-symbol{width:39px;height:39px}.brand-copy strong{font-size:19px}.brand-copy small{font-size:8px;letter-spacing:1.1px}.header-right{gap:9px}.header-date,.source-link{display:none}.connection-badge{font-size:9px;padding:0 9px;min-height:30px}.workspace{display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible}.map-section{order:0;height:clamp(390px,57svh,610px);flex:none}.panel{order:1;overflow:visible;border:0}.panel-inner{padding:29px 18px 17px}.panel h1{font-size:37px}.intro-copy{max-width:540px;font-size:12px}.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.metric{padding:11px 8px;min-height:86px}.metric-name{font-size:8px;letter-spacing:.2px;white-space:normal}.metric strong{font-size:28px}.metric small{font-size:8px}.map-topline{top:15px;left:14px;right:14px}.map-location-pill{padding:8px 10px;gap:7px}.location-icon{height:33px;width:33px;padding:8px}.map-location-pill strong{font-size:11px}.map-location-pill small{font-size:9px}.btn{height:43px;padding:0 12px;font-size:11px}.map-side-controls{right:13px;top:79px}.map-bottom{left:12px;right:12px;bottom:21px;display:block}.traffic-card{width:auto;max-width:285px}.map-caption{max-width:100%;margin-top:8px;padding:7px 9px;font-size:9px}.filter-scroll{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}.mobile-footer{display:flex;padding:22px 18px;background:#f4f7fa;color:#9caab8;font-size:10px;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}.mobile-footer a{color:#2e83bd;text-decoration:none;font-weight:700}.panel-tail{display:none}}
@media (max-width:480px){.site-header{padding:0 12px}.brand{gap:5px}.brand-symbol{width:38px;height:38px}.brand-copy strong{font-size:17px}.brand-copy small{font-size:7px;letter-spacing:.7px}.connection-badge{font-size:9px}.map-section{height:460px}.map-location-pill{min-width:0}.map-location-pill small{display:none}.map-location-pill strong{font-size:11px}.btn-sync{height:42px}.traffic-card{max-width:255px;padding:12px 13px}.traffic-card p{font-size:9px}.traffic-legend{font-size:9px}.map-caption{font-size:8.5px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{min-height:88px;padding:12px 16px}.metric-name{font-size:9px;letter-spacing:1px}.metric strong{font-size:30px}.metric small{font-size:10px}.panel h1{font-size:36px}.map-control{height:34px;width:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* Módulos complementarios: red municipal de cámaras y avisos del Cabildo */
.top-actions{display:flex;align-items:center;gap:8px}.btn-cameras{background:#fff;color:#315473;white-space:nowrap}.btn-cameras:hover{background:#eaf5ff;color:#196eae}.btn-cameras span{font-size:16px}.local-module,.camera-module{border-top:1px solid #e9eff5;margin-top:20px;padding-top:21px}.local-module-label{display:block;color:#277dbd;letter-spacing:1.4px;font-size:9px;font-weight:800;margin-bottom:9px}.local-module h2,.camera-module h2{font:800 16px/1.3 Manrope,sans-serif;letter-spacing:-.5px;color:#223b50;margin:0 0 8px}.local-module>p,.camera-intro,.camera-disclaimer{font-size:10.5px;line-height:1.6;color:#8396a5;margin:0 0 12px}.local-links{display:grid;gap:7px}.local-link{text-decoration:none;display:flex;align-items:center;gap:10px;background:#f5f9fc;border:1px solid #e5edf4;padding:12px;border-radius:11px;color:#3b6e94}.local-link:hover{background:#eaf4fa}.local-link>span:nth-child(2){display:grid;gap:2px;flex:1;min-width:0}.local-link strong{font-size:11px;color:#2d4e66}.local-link small{font-size:9.5px;color:#7992a5}.local-link>span:last-child{font-size:15px}.local-emoji{font-size:19px;width:25px;text-align:center}.local-warning{margin-top:10px!important;color:#926e46!important}.camera-heading-row{display:flex;justify-content:space-between;gap:9px;align-items:center}.camera-count{background:#e9f4fb;border-radius:6px;padding:3px 7px;font:800 10px Manrope,sans-serif;color:#2274aa;vertical-align:middle}.camera-refresh{flex:none;color:#2478aa;background:#eaf5fc;border:1px solid #cfe8f6;border-radius:8px;font-weight:800;font-size:10px;padding:9px 10px}.camera-refresh:hover{background:#dbeffb}.camera-details{border:1px solid #e0eaf2;border-radius:11px;background:#fbfdff;overflow:hidden}.camera-details>summary{padding:12px 13px;font-size:11px;font-weight:800;color:#3177a7;display:flex;justify-content:space-between;gap:8px;cursor:pointer;list-style:none}.camera-details>summary::-webkit-details-marker{display:none}.camera-details[open]>summary{border-bottom:1px solid #e0eaf2}.camera-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:11px}.camera-card{border:1px solid #e7edf4;border-radius:10px;background:#fff;overflow:hidden}.camera-picture{aspect-ratio:16/9;position:relative;background:linear-gradient(135deg,#dce9ee,#f6fafc);overflow:hidden;display:grid;place-items:center}.camera-picture img{width:100%;height:100%;object-fit:cover;display:block}.camera-noimage{position:absolute;inset:0;display:grid;place-items:center;color:#617e90;background:#e8f0f5;text-align:center;font-size:11px;padding:20px}.camera-card-foot{padding:10px}.camera-card-foot strong{font-size:11px;color:#2b4053;display:block;margin-bottom:4px}.camera-card-foot small{font-size:9px;color:#8597a5;line-height:1.4;display:block}.camera-card-foot a{font-size:10px;color:#1f76b3;display:inline-block;margin-top:8px;text-decoration:none;font-weight:800}.camera-disclaimer{margin-top:11px}.camera-disclaimer a{color:#267bb5;font-weight:800}.camera-module:focus{outline:none}
@media(max-width:760px){.top-actions{gap:6px}.btn-cameras{font-size:10px;height:43px;padding:0 10px}.local-module,.camera-module{margin-top:24px}.camera-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.camera-card-foot strong{font-size:10px}}
@media(max-width:480px){.btn-cameras{height:42px;font-size:9.5px;padding:0 9px}.btn-cameras span{display:none}.camera-grid{grid-template-columns:1fr}}

/* ========================================================
   SISTEMA DE AJUSTES, FLUIDEZ SIN API Y MODAL CON CONTRASEÑA
   ======================================================== */
.btn-settings {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f1f6fb;
  color: #1a6cb3;
  border: 1px solid #d4e3f0;
  border-radius: 20px;
  padding: 0 13px;
  height: 35px;
  font-size: 11.5px;
  font-weight: 800;
  transition: all .2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-settings:hover {
  background: #e2eef8;
  border-color: #bad3ea;
  color: #105996;
  transform: translateY(-1px);
}
.btn-settings svg {
  width: 15px;
  height: 15px;
}
.auth-indicator {
  font-size: 11px;
  line-height: 1;
}

/* Acciones en la tarjeta de fluidez */
.traffic-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.traffic-btn-secondary {
  background: #f1f5f9 !important;
  color: #47627b !important;
  border: 1px solid #dbe4ec !important;
}
.traffic-btn-secondary:hover {
  background: #e2ebf4 !important;
  color: #213c54 !important;
}

/* Capa de fluidez vial inteligente */
.traffic-road-pulse {
  animation: roadPulseAnim 2.5s ease-in-out infinite;
}
@keyframes roadPulseAnim {
  0%, 100% { stroke-opacity: 0.85; filter: drop-shadow(0 0 2px rgba(20, 158, 119, .4)); }
  50% { stroke-opacity: 1; filter: drop-shadow(0 0 7px rgba(20, 158, 119, .8)); }
}

/* Desplegable de capas rápido */
.layer-picker-menu {
  position: absolute;
  right: 76px;
  top: 175px;
  z-index: 500;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 45px rgba(17, 34, 53, 0.18);
  border: 1px solid #e2e9f0;
  padding: 10px;
  width: 195px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: fadeInDown .2s ease-out;
}
.layer-picker-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #7b8e9f;
  padding: 4px 6px 6px;
  border-bottom: 1px solid #edf2f7;
}
.layer-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 7px 8px;
  text-align: left;
  transition: all .15s;
}
.layer-opt:hover {
  background: #f4f8fb;
  border-color: #dbe7f2;
}
.layer-opt.active {
  background: #eef6fd;
  border-color: #bcd9f2;
}
.layer-opt-dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
  border: 1px solid rgba(0,0,0,.1);
}
.layer-opt-positron { background: linear-gradient(135deg, #f6f8fb, #e2e8f0); }
.layer-opt-osm { background: linear-gradient(135deg, #cde3d6, #e7dec8); }
.layer-opt-dark { background: linear-gradient(135deg, #1f2937, #111827); }
.layer-opt-sat { background: linear-gradient(135deg, #1b4d3e, #4b5e28); }
.layer-opt strong { display: block; font: 800 11.5px Manrope, sans-serif; color: #213548; }
.layer-opt small { display: block; font-size: 9px; color: #7f91a2; }

/* Modales */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(12, 24, 38, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: fadeIn .2s ease-out;
}
.modal-backdrop[hidden] {
  display: none !important;
}
.modal-card {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 25px 65px rgba(8, 24, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: scaleUp .22s cubic-bezier(.16, 1, .3, 1);
}
.settings-card {
  max-width: 720px;
  max-height: 90vh;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid #edf2f7;
  position: relative;
}
.modal-head-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f0f6fc;
  border: 1px solid #dce8f4;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: none;
}
.modal-head h2 {
  font: 800 17px/1.25 Manrope, sans-serif;
  letter-spacing: -.5px;
  color: #172b3d;
  margin: 0;
}
.modal-head p {
  font-size: 11.5px;
  color: #798b9c;
  margin: 3px 0 0;
}
.modal-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid #e2eaf1;
  background: #fff;
  color: #63778a;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.modal-close:hover {
  background: #f1f6fb;
  color: #18334b;
}

/* Tabs */
.settings-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 18px 0;
  border-bottom: 1px solid #edf2f7;
  background: #fbfcfe;
  overflow-x: auto;
  scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 10px 14px;
  font: 800 11.5px Manrope, sans-serif;
  color: #718395;
  border-radius: 6px 6px 0 0;
  transition: all .15s;
}
.settings-tab:hover {
  color: #1b6fb2;
}
.settings-tab.active {
  color: #186cb0;
  border-bottom-color: #186cb0;
  background: rgba(24, 108, 176, 0.05);
}

/* Cuerpo de modal */
.modal-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.settings-body {
  padding: 22px;
  overflow-y: auto;
  max-height: calc(90vh - 170px);
}
.settings-pane[hidden] {
  display: none !important;
}
.settings-section {
  background: #fcfdfe;
  border: 1px solid #e7edf3;
  border-radius: 13px;
  padding: 18px;
  margin-bottom: 16px;
}
.settings-section:last-child {
  margin-bottom: 0;
}
.section-title {
  font: 800 14px Manrope, sans-serif;
  color: #1b3044;
  margin: 0 0 4px;
}
.section-desc {
  font-size: 11.5px;
  line-height: 1.55;
  color: #7c8e9f;
  margin: 0 0 14px;
}

/* Mode Cards */
.mode-cards {
  display: grid;
  gap: 10px;
}
.mode-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #e1e9f0;
  border-radius: 12px;
  padding: 13px 14px;
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}
.mode-card:hover {
  border-color: #b7d6ee;
  background: #fcfdfe;
}
.mode-card:has(input:checked) {
  border-color: #217bc1;
  background: #f6fbff;
  box-shadow: 0 0 0 2px rgba(33, 123, 193, 0.15);
}
.mode-card input {
  margin-top: 3px;
  cursor: pointer;
}
.mode-card-content strong {
  display: block;
  font: 800 13px Manrope, sans-serif;
  color: #1e3549;
  margin: 3px 0;
}
.mode-card-content p {
  font-size: 11px;
  line-height: 1.5;
  color: #778a9c;
  margin: 0;
}
.mode-badge-green {
  display: inline-block;
  background: #e6f7f0;
  color: #138965;
  font: 800 9px Manrope, sans-serif;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.mode-badge-orange {
  display: inline-block;
  background: #fff4e5;
  color: #c76f18;
  font: 800 9px Manrope, sans-serif;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.mode-badge-blue {
  display: inline-block;
  background: #edf5fe;
  color: #1c71b6;
  font: 800 9px Manrope, sans-serif;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Quick Sim Buttons */
.quick-sim-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}
.btn-chip {
  background: #f1f6fa;
  border: 1px solid #dbe6ef;
  border-radius: 8px;
  padding: 6px 11px;
  font: 700 11px 'DM Sans', sans-serif;
  color: #3b5770;
  transition: all .15s;
}
.btn-chip:hover {
  background: #e3edf5;
  border-color: #c2d5e5;
  color: #16466e;
}

/* Road Override Grid */
.road-override-grid {
  display: grid;
  gap: 8px;
  background: #fff;
  border: 1px solid #e7edf3;
  border-radius: 10px;
  padding: 10px;
}
.road-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f8;
}
.road-row:last-child {
  border-bottom: 0;
}
.road-row span {
  font-size: 12px;
  color: #49637a;
}
.road-row span strong {
  color: #1c3246;
  font-family: Manrope, sans-serif;
}
.select-traffic {
  border: 1px solid #dce4eb;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 11.5px;
  background: #fdfefe;
  color: #21384e;
  outline: none;
}
.select-traffic:focus {
  border-color: #2b7bc4;
}

/* Switch Row */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f7;
  cursor: pointer;
}
.switch-row:last-child {
  border-bottom: 0;
}
.switch-row strong {
  display: block;
  font: 800 12.5px Manrope, sans-serif;
  color: #1d3347;
}
.switch-row small {
  display: block;
  font-size: 11px;
  color: #7d8f9f;
  margin-top: 2px;
}
.switch-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #1d79bd;
}
.select-inline {
  border: 1px solid #dce4ec;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 11.5px;
  color: #284158;
}

/* Map Tile Options in Settings */
.map-tile-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.tile-option {
  cursor: pointer;
}
.tile-option input {
  position: absolute;
  opacity: 0;
}
.tile-box {
  border: 2px solid #e4ecf3;
  border-radius: 12px;
  padding: 9px;
  background: #fff;
  transition: all .15s;
  height: 100%;
}
.tile-option:hover .tile-box {
  border-color: #b3d3eb;
}
.tile-option:has(input:checked) .tile-box {
  border-color: #1e78be;
  background: #f6fbff;
  box-shadow: 0 4px 15px rgba(30, 120, 190, 0.15);
}
.tile-preview {
  height: 48px;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,.08);
}
.tile-positron-bg { background: linear-gradient(135deg, #f8fafd, #d6e2ee); }
.tile-osm-bg { background: linear-gradient(135deg, #d3e7da, #f3eedf); }
.tile-dark-bg { background: linear-gradient(135deg, #242f3e, #111822); }
.tile-sat-bg { background: linear-gradient(135deg, #1b4d3e, #475a2d); }
.tile-box strong { display: block; font: 800 12px Manrope, sans-serif; color: #1e3549; }
.tile-box small { display: block; font-size: 10px; color: #7f91a2; margin-top: 2px; }

/* Form Fields */
.field-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.field-wrap:last-child {
  margin-bottom: 0;
}
.field-wrap label {
  font: 800 12px Manrope, sans-serif;
  color: #2a4155;
}
.field-wrap input, .field-wrap select {
  height: 42px;
  border: 1px solid #dce4eb;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 12.5px;
  color: #21374d;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.field-wrap input:focus, .field-wrap select:focus {
  border-color: #2076be;
  box-shadow: 0 0 0 3px rgba(32, 118, 190, 0.1);
}
.field-help {
  font-size: 10.5px;
  color: #8496a6;
}
.password-input-group {
  display: flex;
  position: relative;
}
.password-input-group input {
  width: 100%;
  padding-right: 44px;
}
.btn-toggle-eye {
  position: absolute;
  right: 6px;
  top: 5px;
  height: 32px;
  width: 32px;
  border: 0;
  background: transparent;
  color: #798b9c;
  display: grid;
  place-items: center;
  font-size: 15px;
}

/* Checkbox wrap */
.checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #435b71;
  cursor: pointer;
}
.checkbox-wrap input {
  accent-color: #1e79bf;
  width: 16px;
  height: 16px;
}
.auth-hint {
  background: #f2f7fc;
  border: 1px solid #e0ecf7;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 11px;
  color: #3b5c7b;
}
.auth-hint code {
  background: #e2eef9;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 700;
  color: #164e7c;
}
.auth-error-msg {
  background: #fff3f2;
  border: 1px solid #f8d2cf;
  color: #b73834;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 11.5px;
  font-weight: 600;
}

/* Modal Foot */
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  background: #f8fafc;
  border-top: 1px solid #edf2f7;
}
.settings-foot {
  justify-content: space-between;
}
.save-status-indicator {
  font-size: 11px;
  color: #279469;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-primary {
  background: #1c79bd;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 0 18px;
  height: 40px;
  font: 800 12px Manrope, sans-serif;
  transition: background .15s;
}
.btn-primary:hover {
  background: #145e99;
}
.btn-secondary {
  background: #fff;
  color: #3f5870;
  border: 1px solid #dbe4ec;
  border-radius: 10px;
  padding: 0 16px;
  height: 40px;
  font: 800 12px Manrope, sans-serif;
  transition: all .15s;
}
.btn-secondary:hover {
  background: #f1f6fb;
  border-color: #c4d7e7;
  color: #1b3854;
}
.btn-danger {
  background: #fff4f3;
  color: #c0403e;
  border: 1px solid #f4cfcb;
  border-radius: 10px;
  padding: 0 16px;
  height: 40px;
  font: 800 12px Manrope, sans-serif;
  transition: all .15s;
}
.btn-danger:hover {
  background: #fee7e5;
  border-color: #ecb8b3;
}
.security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  background: #142738;
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  font: 800 12px Manrope, sans-serif;
  box-shadow: 0 12px 35px rgba(9, 21, 35, 0.4);
  display: flex;
  align-items: center;
  gap: 9px;
  animation: toastIn .25s cubic-bezier(.16, 1, .3, 1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleUp {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

/* Marcadores de cámaras en mapa */
.camera-map-marker {
  width: 32px;
  height: 32px;
  background: #1c79bd;
  color: white;
  border-radius: 50%;
  border: 3px solid #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s;
}
.camera-map-marker:hover {
  transform: scale(1.15);
  background: #125e98;
}
.camera-popup-img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  object-fit: cover;
  margin: 6px 0;
  background: #e9f0f5;
}

/* Mejoras en interactividad del mapa para evitar congelaciones */
.map-section {
  touch-action: pan-x pan-y pinch-zoom;
}
.map-section #map,
.map-section #map-google {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.map-bottom {
  pointer-events: none;
}
.map-bottom > * {
  pointer-events: auto;
}

/* Control de mapa activo (ej: fluidez de tráfico activa) */
.map-control.is-active {
  color: #178a6a;
  background: #e9f7f0;
}
.map-control.is-active:hover {
  background: #d8f1e5;
  color: #116e54;
}

/* Botón de instalación PWA en móvil */
.btn-install-pwa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #149e77;
  color: #fff;
  border: 0;
  border-radius: 20px;
  padding: 0 13px;
  height: 35px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 158, 119, 0.25);
  transition: all .2s;
  white-space: nowrap;
}
.btn-install-pwa:hover {
  background: #0f8261;
  transform: translateY(-1px);
}
.btn-install-pwa svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 600px) {
  .btn-install-pwa span {
    display: none;
  }
  .btn-install-pwa {
    padding: 0 10px;
  }
}

/* Mini leyenda compacta de fluidez */
.traffic-mini-legend {
  position: absolute;
  bottom: 18px;
  left: 20px;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(220, 230, 240, 0.9);
  border-radius: 20px;
  padding: 6px 14px;
  box-shadow: 0 4px 14px rgba(15, 35, 55, 0.08);
  font-family: 'DM Sans', sans-serif;
  pointer-events: auto;
  user-select: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.traffic-mini-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #334e68;
  white-space: nowrap;
}
.traffic-mini-legend .legend-bar {
  display: inline-block;
  width: 14px;
  height: 4px;
  border-radius: 3px;
  flex: none;
}
.traffic-mini-legend .legend-bar.bar-fluid {
  background: #10b981;
}
.traffic-mini-legend .legend-bar.bar-dense {
  background: #eab308;
}
.traffic-mini-legend .legend-bar.bar-jam {
  background: #ef4444;
}
.traffic-mini-legend .legend-bar.bar-closed {
  background: #991b1b;
}

@media (max-width: 760px) {
  .traffic-mini-legend {
    bottom: 12px;
    left: 12px;
    gap: 8px;
    padding: 4px 10px;
  }
  .traffic-mini-legend .legend-item {
    font-size: 9.5px;
    gap: 4px;
  }
  .traffic-mini-legend .legend-bar {
    width: 10px;
    height: 3.5px;
  }
}