.root{--bg:#eaf7fb}
:root{--bg:#eaf7fb;--card:#ffffff;--muted:#4b6678;--accent:#0ea5b7;--glass:rgba(255,255,255,0.6)}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif;margin:0;background:linear-gradient(180deg,#eaf7fb 0%, #f6fcff 60%);color:#072033}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#081f2d;backdrop-filter:blur(4px)}
.brand strong{font-size:1.1rem;display:block}
.brand small{color:var(--muted);font-size:0.85rem}
.site-header .brand strong,.site-header .brand small,.site-header .controls input,.site-header .controls select{color:#f3f8fb}
.site-header .controls input,.site-header .controls select{border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04)}
.site-header .controls input::placeholder{color:rgba(243,248,251,0.72)}
.site-header .controls button{background:#d7f0f5;color:#081f2d}
.controls{display:flex;gap:8px;align-items:center}
.controls input{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;min-width:200px}
.controls select{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit}
.controls button{background:var(--accent);color:#042027;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.meta{padding:12px 24px;color:var(--muted)}
.groups{padding:6px 18px}
.group{margin-bottom:20px}
.group-title{font-weight:600;color:#083344;margin:6px 0}
.group-title{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.caret{font-size:0.9rem;color:var(--muted);margin-left:8px}
.group-collapsed .gallery{display:none}
.group-collapsed .diario-layout{display:none}
.gallery{padding:8px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}

.diario-layout{display:flex;flex-direction:column;gap:12px;align-items:stretch;width:100%}
.diario-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(460px,1.15fr);gap:18px;align-items:stretch;width:100%}
.diario-layout .map-column{background:transparent;padding:8px;border-radius:8px;border:1px solid rgba(4,20,30,0.04);min-width:0}
.map-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.map-update{color:var(--muted);font-size:0.82rem}
.map-update.is-stale{color:#b91c1c;font-weight:600}
.diario-layout .list-column{flex:1}
.diario-map{position:relative;width:100%;height:420px;overflow:hidden}
.diario-map svg{width:100%;height:100%}
.municipio-ranking{position:absolute;right:10px;bottom:10px;z-index:2;width:min(210px,46%);max-height:calc(100% - 20px);overflow-y:auto;padding:10px 12px;border:1px solid rgba(4,20,30,0.12);border-radius:10px;background:rgba(255,255,255,0.92);box-shadow:0 4px 12px rgba(2,6,23,0.12)}
.municipio-ranking h3{margin:0 0 7px;color:#083344;font-size:0.85rem}
.municipio-ranking ol{margin:0;padding-left:20px}
.municipio-ranking li{display:flex;justify-content:space-between;gap:8px;padding:2px 0;color:#093449;font-size:0.8rem}
.municipio-ranking strong{white-space:nowrap}
.cloud-status-summary{margin-top:16px;padding:16px;border-radius:12px;background:rgba(255,255,255,0.68);border:1px solid rgba(4,20,30,0.06)}
.cloud-status-summary h3{margin:0;color:#083344;font-size:1rem}
.cloud-status-summary p{margin:4px 0 12px;color:var(--muted);font-size:0.84rem}
.cloud-status-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cloud-status-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:#fff;color:#093449;font-size:0.85rem;font:inherit}
.cloud-status-item img{width:24px;height:24px;object-fit:contain}
.cloud-status-item span{min-width:0;flex:1}
.cloud-status-item strong{font-size:1rem}
button.cloud-status-item{width:100%;border:1px solid transparent;cursor:pointer;text-align:left}
button.cloud-status-item:hover,button.cloud-status-item:focus-visible{border-color:rgba(8,123,141,0.5);outline:none}
button.cloud-status-item.is-active{border-color:#087b8d;background:#e5f7fa}
.cloud-status-summary h4{margin:18px 0 9px;color:#083344;font-size:0.92rem}
.cloud-problem-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cloud-problem-header h4{flex:1}
.cloud-problem-reset{border:0;background:transparent;color:#087b8d;padding:0;cursor:pointer;font:inherit;font-size:0.82rem;font-weight:600}
.cloud-problem-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cloud-problem-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:#f8fafc;color:#093449;font-size:0.85rem}
.cloud-problem-item img{width:22px;height:22px;object-fit:contain}
.cloud-problem-item span{min-width:0;flex:1}
.cloud-problem-item strong{font-size:0.95rem}
button.cloud-problem-item{width:100%;border:1px solid transparent;cursor:pointer;text-align:left}
button.cloud-problem-item:hover,button.cloud-problem-item:focus-visible{border-color:rgba(8,123,141,0.5);outline:none}
button.cloud-problem-item.is-active{border-color:#087b8d;background:#e5f7fa}
.cloud-export-button{margin-top:16px;border:0;border-radius:8px;background:var(--accent);color:#042027;padding:8px 12px;cursor:pointer;font:inherit;font-size:0.88rem}
.map-point{cursor:pointer;stroke:#fff;stroke-width:1px;opacity:0.95;transition:opacity 0.15s,stroke-width 0.15s}
.map-point-muted{opacity:0.16}
.map-point-highlight{stroke:#64748b;stroke-width:1.75px}
.map-tooltip{position:absolute;background:white;padding:8px;border-radius:6px;box-shadow:0 6px 16px rgba(2,6,23,0.08);display:none;z-index:80}
.detail-column{background:linear-gradient(180deg,rgba(255,255,255,0.80),rgba(255,255,255,0.64));border:1px solid rgba(4,20,30,0.06);border-radius:14px;padding:24px 26px;min-height:420px;box-shadow:0 8px 24px rgba(2,6,23,0.05);justify-self:stretch;align-self:stretch;overflow:auto}
.detail-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:24px}
.detail-card{display:flex;flex-direction:column;gap:14px}
.detail-title{font-weight:700;color:#083344;font-size:1.08rem}
.detail-total{color:var(--muted);font-size:0.95rem}
.detail-list{display:flex;flex-direction:column;gap:12px}
.municipio-row{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(7,32,51,0.08)}
.municipio-row:last-child{border-bottom:none}
.municipio-row-icon{width:30px;height:30px;object-fit:contain;flex:0 0 30px;margin-top:1px}
.municipio-row-main{min-width:0;flex:1}
.municipio-row-title{font-size:0.98rem;font-weight:600;color:#093449;line-height:1.25}
.municipio-row-count{margin-top:6px;color:var(--muted);font-size:0.92rem;word-break:break-word}
.sensor-code-list{white-space:normal}
.sensor-code-link{appearance:none;border:0;background:transparent;color:#087b8d;font:inherit;font-weight:600;padding:0;cursor:pointer}
.sensor-code-link:hover,.sensor-code-link:focus-visible{color:#045766;outline-offset:3px}
.card{background:var(--card);border-radius:10px;padding:8px;display:flex;flex-direction:column;align-items:center;box-shadow:0 6px 18px rgba(2,6,23,0.06);transition:transform .12s}
.card:hover{transform:translateY(-6px)}
.card img,.card video{width:100%;height:120px;object-fit:cover;border-radius:8px}
.caption{margin-top:8px;font-size:0.85rem;color:var(--muted);text-align:center;word-break:break-all}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;background:var(--accent);color:#042027;text-decoration:none;margin-top:8px}

.site-footer{padding:14px 18px;text-align:center;color:var(--muted)}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(7,20,36,0.35),rgba(7,20,36,0.5));backdrop-filter:blur(4px);z-index:60}
.modal[aria-hidden="false"]{display:flex}
.modal-content{max-width:920px;width:92%;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:18px;border-radius:12px;position:relative}
.modal-media img,.modal-media video{max-width:100%;max-height:70vh;display:block;margin:0 auto;border-radius:8px}
.chart-periods{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 12px}
.chart-period{border:1px solid rgba(8,31,45,0.2);border-radius:999px;background:#fff;color:#083344;padding:7px 11px;cursor:pointer;font:inherit;font-size:0.85rem}
.chart-period.is-active{background:var(--accent);border-color:var(--accent);color:#042027;font-weight:600}
.chart-period:focus-visible{outline:2px solid #083344;outline-offset:2px}
.chart-image-missing{min-height:180px;border:1px dashed #b91c1c;object-fit:contain}
.chart-missing{margin:10px auto 0;padding:9px 12px;border-radius:8px;background:#fef2f2;color:#b91c1c;text-align:center;font-size:0.9rem}
.modal-info{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.modal-name{color:var(--muted);font-size:0.95rem}
.close{position:absolute;right:12px;top:8px;background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer}

.modal-actions{display:flex;gap:8px;align-items:center}
.modal-actions .btn{padding:8px 10px;border-radius:8px}
.modal-actions button{border:none;background:var(--accent);color:#042027;cursor:pointer}


/* header logos */
.brand{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand-left{display:flex;align-items:center;gap:12px}
.logo-siata{height:36px}
.logo-unal{height:0px;display:none}
.brand-text strong{display:block}
.brand-text small{display:block;color:var(--muted)}

/* footer */
.site-footer-2{background:linear-gradient(180deg,rgba(14,165,183,0.06),transparent);padding:12px 18px;border-top:1px solid rgba(4,20,30,0.04)}
.footer-inner{display:flex;justify-content:center;align-items:center;max-width:1100px;margin:0 auto;text-align:center}
.footer-right{color:var(--muted)}
.footer-illustration{width:100%;overflow:hidden;line-height:0}
.footer-illustration-img{display:block;width:100%;height:auto}

/* decorative clouds */
/* removed decorative clouds per user feedback */
/* body::before and body::after removed to reduce visual clutter */

@media (max-width:900px){.diario-top{grid-template-columns:1fr}.detail-column{min-height:auto}.diario-map{height:min(75vw,420px);min-height:280px}}
@media (max-width:520px){.controls input{min-width:120px}.card img{height:100px}.map-controls select{width:100%}.map-update{width:100%}.cloud-status-list,.cloud-problem-list{grid-template-columns:1fr}}