.consumption-chart{min-width:0;padding:12px;background:rgba(25,36,53,.94);border:1px solid #73839a;border-radius:12px;color:#f3f6ff}
.consumption-chart-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.consumption-chart h3{margin:0;font-size:14px;color:#f4f7ff}.consumption-chart-actions{display:flex;gap:6px;flex-wrap:wrap}
.consumption-chart select,.consumption-filters input{min-width:0;background:#2a3b52!important;border:1px solid #8c9bb0!important;color:#f3f6ff!important;border-radius:8px;padding:7px;font:inherit}
.consumption-chart select{width:auto;font-size:12px}.consumption-chart-status,.consumption-chart-legend{margin:8px 0;font-size:11px;line-height:1.5;color:#e0eaff!important}.consumption-canvas-scroll{position:relative;overflow-x:auto;overflow-y:hidden;min-height:230px;max-width:100%;background:#172234;border-radius:8px}.consumption-canvas-scroll canvas{display:block;touch-action:pan-x pan-y}
.consumption-chart-tooltip{position:absolute;z-index:5;width:260px;padding:9px;background:#f0f5ff;color:#102035;font-size:12px;line-height:1.5;border:1px solid #8dbbf0;border-radius:8px;pointer-events:none;box-shadow:0 3px 15px #0008}
.consumption-chart-tooltip[hidden],.consumption-chart-cursor[hidden]{display:none!important}
.consumption-chart-cursor{position:absolute;z-index:3;top:25px;bottom:59px;width:1px;background:#d7eaff;pointer-events:none;box-shadow:0 0 0 1px #10172255}
.consumption-hover-readout{display:block;min-height:18px;margin:4px 0;color:#f1f6ff;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.consumption-timeline{margin:5px 0 7px;padding:4px 8px;border:1px solid #687f9f;border-radius:8px;background:#243247}
.consumption-timeline-captions{display:flex;justify-content:space-between;gap:8px;color:#e5efff;font-size:11px;font-variant-numeric:tabular-nums}
.consumption-timeline-track{position:relative;height:25px;--range-start:0%;--range-end:100%}
.consumption-timeline-track:before{content:"";position:absolute;left:9px;right:9px;top:10px;height:5px;background:#536783;border-radius:5px}
.consumption-timeline-fill{position:absolute;left:clamp(9px,var(--range-start),calc(100% - 9px));right:clamp(9px,calc(100% - var(--range-end)),calc(100% - 9px));height:5px;top:10px;border-radius:5px;background:#8fc4ff;pointer-events:none}
body .consumption-timeline input[type=range]{position:absolute;left:0;top:0;width:100%;height:25px;min-height:0;padding:0;margin:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;appearance:none;-webkit-appearance:none;pointer-events:none}
.consumption-timeline input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;border:2px solid #f4f8ff;background:#397ab2;cursor:ew-resize;pointer-events:auto;box-shadow:0 1px 4px #0008}
.consumption-timeline input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:2px solid #f4f8ff;background:#397ab2;cursor:ew-resize;pointer-events:auto}
.consumption-range-from{z-index:2}.consumption-range-to{z-index:3}.consumption-timeline input:focus-visible{z-index:4;outline:none!important}.consumption-timeline input:focus-visible::-webkit-slider-thumb{outline:3px solid #b5d5ff;outline-offset:2px}
.consumption-timeline input:disabled{opacity:.45!important}
.consumption-chart-events{font-size:11px;max-height:115px;overflow:auto;line-height:1.5}.consumption-chart-events p{margin:3px 0;padding-left:8px;border-left:2px solid #f2cc54;color:#ffeaa0}.consumption-chart-events p.reported{border-color:#f2cc54;color:#ffeaa0}
.consumption-data-table{margin-top:6px;color:#e8f0ff;font-size:11px}.consumption-data-table table{width:100%;border-collapse:collapse}.consumption-data-table :is(th,td){padding:5px;text-align:left;color:#e8f0ff;background:#24364c;border-bottom:1px solid #536783}.consumption-data-table summary{cursor:pointer;padding:5px}
.consumption-expanded-dialog{width:min(1300px,96vw);max-width:96vw;max-height:94dvh;padding:14px;background:#172234;color:#f2f6ff;border:1px solid #8e9fb9;border-radius:14px;overflow:auto}.consumption-expanded-dialog::backdrop{background:#000a}.consumption-expanded-dialog>.button{display:block;margin:0 0 8px auto}.consumption-expanded-content .consumption-chart{border:0;padding:4px}
#detailConsumption{margin-bottom:9px}.consumption-view{min-height:0;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1}.consumption-view[hidden]{display:none!important}.consumption-filters{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr)) 140px 140px;gap:8px;width:100%;padding-top:8px}.consumption-filters label{display:grid;gap:4px;color:#eff5ff;font-size:11px}.consumption-filters input{width:100%;height:36px}.consumption-module-actions{display:flex;gap:8px;flex-wrap:wrap}.consumption-module-status{font-size:12px;line-height:1.5;color:#e0eaff;padding:8px;background:#25364e;border:1px solid #7e91ac;border-radius:8px;margin:0}
.consumption-results{min-height:140px;overflow:auto;flex:none;border:1px solid #73839a;border-radius:10px}.consumption-results table{width:100%;border-collapse:collapse;font-size:12px}.consumption-results th{position:sticky;top:0;background:#223247;color:#f2f6ff;padding:9px;text-align:left;z-index:2}.consumption-results td{padding:8px;background:rgba(26,38,56,.93);color:#eff5ff;border-bottom:1px solid #53647a}.consumption-product-button{border:0;background:transparent;color:#9bd3ff;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}.consumption-results td:nth-last-child(2){text-align:right;white-space:nowrap}
@media(max-width:1000px){.consumption-filters{grid-template-columns:repeat(3,minmax(100px,1fr))}}
@media(max-width:760px){.consumption-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.consumption-view{overflow:visible}.consumption-results{max-height:50dvh;flex:none}.consumption-chart{padding:9px}.consumption-chart-heading{align-items:flex-start}.consumption-chart-actions .button{font-size:11px;padding:6px}.consumption-chart-tooltip{width:230px}.consumption-expanded-dialog{padding:8px}}

.consumption-search-wide{grid-column:span 2}

@media(min-width:761px){
 .app-shell .header-workspace-controls:has(>#consumptionFilters:not([hidden])){padding:0 20px 6px;align-self:end}
 .header-workspace-controls #consumptionFilters{grid-template-columns:90px 110px minmax(130px,1fr) minmax(130px,1fr) 125px 125px minmax(180px,1.5fr);gap:7px;overflow-x:auto;overflow-y:hidden;margin:0;padding:0 0 2px}
 .header-workspace-controls #consumptionFilters label{gap:2px;font-size:10px;line-height:12px}
 .header-workspace-controls #consumptionFilters input{height:30px;padding:5px 7px;font-size:11px}
 .header-workspace-controls #consumptionFilters .consumption-search-wide{grid-column:auto}
}

/* Misma superficie protegida y respuesta al foco del listado del parque. */
#consumptionView .consumption-results :is(th,td){border-color:#667b99;line-height:1.25}
#consumptionView .consumption-results thead th{background:#2b3b52;color:#f6f8ff;font-size:10px;padding:8px 12px}
#consumptionView .consumption-results tbody tr td,
#consumptionView .consumption-results tbody tr:nth-child(even) td{background:var(--panel-protected-glass,#1b2534);background-image:none;color:#f0f5fe;font-size:11px;font-weight:550;padding:6px 12px}
#consumptionView .consumption-results tbody tr:is(:hover,:focus-within) td{background:#344b6a;color:#fff}
#consumptionView .consumption-product-button{color:inherit;font-weight:700}
body .consumption-data-table tbody tr td,
body .consumption-data-table tbody tr:nth-child(even) td{background:var(--panel-protected-glass,#1b2534);background-image:none;color:#f0f5fe}
body .consumption-data-table tbody tr:hover td{background:#344b6a;color:#fff}
.consumption-chart-analysis{display:flex;flex-wrap:wrap;gap:5px 16px;margin:5px 0 9px;font-size:11px;line-height:1.5}
.consumption-chart-analysis[hidden]{display:none}
.consumption-chart-analysis span{display:inline-flex;align-items:center;gap:6px}
.consumption-chart-analysis span:before{content:"";width:20px;border-top:2px dashed currentColor;flex:none}
body .consumption-chart-analysis .consumption-trend-key{color:#f4f7ff}
body .consumption-chart-analysis .consumption-max-key{color:#ff9ca8}
body .consumption-chart-analysis .consumption-min-key{color:#7dd8ed}

/* Mapa y consumos juntos a la derecha; antecedentes en su columna independiente. */
#detailDialog .detail-context-map{align-self:stretch;overflow-y:auto;overscroll-behavior:contain;min-height:0}
#detailDialog .detail-map{height:clamp(160px,20dvh,190px);min-height:0;aspect-ratio:auto;flex:0 0 auto}
#detailDialog .detail-map-heading{padding:8px 11px;flex:0 0 auto}
#detailDialog .detail-map-hint{padding:6px 10px;min-height:0;flex:0 0 auto}
#detailConsumption{margin:8px;flex:0 0 auto;min-width:0}
#detailConsumption .consumption-chart{padding:8px}
#detailConsumption .consumption-chart h3{font-size:12px}
#detailConsumption .consumption-chart select{padding:4px;font-size:11px}
#detailConsumption .consumption-chart-actions .button{padding:5px 7px;font-size:10px}
#detailConsumption .consumption-chart-actions :is(.button,select){height:32px;min-height:32px}
#detailConsumption .consumption-canvas-scroll{min-height:180px}
#detailConsumption :is(.consumption-chart-status,.consumption-chart-legend){margin:4px 0;font-size:10px}
#detailConsumption .consumption-chart-analysis{gap:3px 9px;font-size:10px;margin:4px 0}
#detailConsumption .consumption-chart-events{max-height:55px;font-size:10px}
#detailConsumption :is(.consumption-timeline-captions,.consumption-hover-readout){font-size:10px}
#detailConsumption .consumption-hover-readout{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#detailConsumption .consumption-timeline{padding:3px 6px;margin:4px 0}
.consumption-scope-note{margin:0;color:#d0dbea;font-size:11px;line-height:1.4}
.consumption-extra-filters{color:#dce8fc;font-size:11px;flex:none}
.consumption-extra-filters>summary{padding:6px 9px;cursor:pointer;border:1px solid #687f9f;border-radius:7px;background:var(--panel-protected-glass,#1b2534)}
.consumption-extra-filters[open]>summary{margin-bottom:5px}
.app-shell.inventory-workspace-active #consumptionView{flex:1 1 0;width:100%;min-height:0;overflow:auto;overscroll-behavior:contain}
#consumptionView .consumption-filters{grid-template-columns:repeat(4,minmax(100px,1fr)) 125px 125px;gap:7px;padding:8px;border:1px solid #687f9f;border-radius:9px;background:var(--panel-protected-glass,#1b2534)}
#consumptionView .consumption-filters input{height:32px}
@media(max-width:1000px){#consumptionView .consumption-filters{grid-template-columns:repeat(3,minmax(100px,1fr))}}
@media(max-width:760px){
 #detailDialog .detail-context-map{overflow:visible}
 #detailDialog .detail-map{height:38dvh!important;min-height:220px!important}
 #detailConsumption{margin:8px 4px}
 #consumptionView .consumption-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 .app-shell.inventory-workspace-active #consumptionView{overflow:visible;flex:none}
 .consumption-timeline-track,body .consumption-timeline input[type=range]{height:32px}
 .consumption-timeline-track:before,.consumption-timeline-fill{top:13px}
}