/* Shared PVPC cards and chart. Loaded only by Inicio and Precios. */
.price-summary svg,.today-panel .section-title svg { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.price-summary .price-context,.price-summary .price-stats dt,.price-summary .price-stats small { color:var(--muted) }
.price-summary .price-stats { font-variant-numeric:tabular-nums }
.price-summary .price-stats dd { letter-spacing:-.025em }
.price-summary .price-stats dd span { letter-spacing:normal }
.price-source { max-width:none }
.today-panel { position:relative; background:var(--paper); border:1px solid #e7f2f8; border-radius:var(--radius-lg); padding:var(--space-lg); box-shadow:var(--shadow-panel) }
.today-panel .section-title { align-items:center; gap:var(--space-md) }
.today-panel .section-title h2 { display:flex; align-items:center; gap:var(--space-sm); font-size:1.8rem; margin:0 }
.today-panel .section-title h2 svg { box-sizing:content-box; padding:11px; width:26px; height:26px; background:#eaf6ff; border-radius:50% }
.price-summary .price-context { margin:0 0 20px 60px; font-size:.85rem }
.price-summary .notice { padding:var(--space-sm) var(--space-md); margin-bottom:var(--space-md); border-radius:12px; background:var(--warn-bg); color:var(--warn); font-size:.82rem; line-height:1.6 }
.price-summary .notice strong { color:#795009; margin-right:6px }
.price-summary .price-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 20px }
.price-summary .price-stats>div { min-width:0; position:relative; padding:var(--space-md) var(--space-md) 15px 62px; border:1px solid #e4ecf7; border-radius:var(--radius); background:linear-gradient(120deg,#f3f6fd,#f9fbfd) }
.price-summary .price-stats .stat-now { border-color:#c5eaff; background:linear-gradient(120deg,#e4f5ff,#f1faff) }
.price-summary .price-stats .stat-min { border-color:#c6f0e4; background:linear-gradient(120deg,var(--success-bg),#f0fcf8) }
.price-summary .price-stats .stat-max { border-color:#fbe9b7; background:linear-gradient(120deg,#fff4d5,#fffbed) }
.price-summary .price-stats dt { font-size:.77rem; font-weight:700 }
.price-summary .stat-now dt { color:#006a9c }
.price-summary .stat-min dt { color:var(--success) }
.price-summary .stat-max dt { color:#875000 }
.price-summary .price-stats dt svg { position:absolute; top:14px; left:14px; width:36px; height:36px; padding:var(--space-xs); background:#e6ecf7; border-radius:50% }
.price-summary .stat-now dt svg { background:#c8ecff; color:#0084c3 }
.price-summary .stat-min dt svg { background:#bdf1de; color:#008460 }
.price-summary .stat-max dt svg { background:#ffeab1; color:#aa6200 }
.price-summary .price-stats dd { font-size:clamp(1.45rem,2.1vw,1.85rem); line-height:1.3; font-weight:var(--weight-heading); margin:5px 0 var(--space-xs); white-space:nowrap }
.price-summary .price-stats dd span { font-size:var(--text-caption); font-weight:500; display:inline }
.price-summary .price-stats small { display:block; font-size:.68rem; letter-spacing:-.01em; line-height:1.5 }
.price-summary .price-stats small span { display:inline-block; white-space:nowrap }
.price-chart { min-width:0; margin:0 0 var(--space-md); border:1px solid #e2edf7; border-radius:var(--radius); padding:14px var(--space-md) var(--space-sm) }
.chart-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-xs); font-size:.77rem; font-weight:600; color:var(--ink) }
.chart-heading a { min-height:32px; display:flex; align-items:center; font-weight:500 }
.chart-unit { color:var(--muted); font-weight:400 }
.chart-scroll-hint { display:none }
.chart-scroll { overflow-x:auto; scrollbar-width:thin; scrollbar-color:#94bed3 #f1f8fc }
.price-summary .chart-scroll>svg { display:block; width:100%; height:auto; min-width:560px; stroke:none; overflow:visible; margin:var(--space-xs) 0 0 }
.price-summary .chart-grid line { stroke:#e9f0f7; stroke-width:1 }
.price-summary .chart-grid text,.price-summary .chart-tick text { fill:var(--muted); font-size:12px; font-family:var(--font) }
.price-summary .price-bar { stroke:none }
.price-summary .price-bar.regular { fill:url(#bars-blue) }
.price-summary .price-bar.minimum { fill:url(#bars-green) }
.price-summary .price-bar.maximum { fill:url(#bars-warm) }
.price-summary .price-bar.is-current { stroke:var(--ink); stroke-width:2; stroke-dasharray:3 2 }
.price-chart figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; color:var(--muted); font-size:.67rem; margin-top:4px }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px }
.chart-legend>span { display:inline-flex; align-items:center; gap:5px }
.chart-legend i { width:9px; height:9px; border-radius:50%; display:inline-block }
.key-regular { background:var(--chart-regular) }
.key-min { background:var(--chart-min) }
.key-max { background:var(--chart-max) }
.chart-legend .key-current { border:1px dashed var(--ink); background:var(--paper) }
.price-summary .price-source,.price-summary .price-source+p { font-size:.68rem; line-height:1.6; color:var(--muted); margin-bottom:4px }
@media(max-width:1150px) {
.price-summary .chart-grid text,.price-summary .chart-tick text { font-size:21px }
.price-summary .price-stats>div { padding:14px }
.price-summary .price-stats dt { min-height:32px; padding-left:var(--space-2xl); display:flex; align-items:center }
.price-summary .price-stats dt svg { width:30px; height:30px; padding:6px }
.price-summary .price-stats dd { font-size:1.6rem }
.price-summary .price-stats small { font-size:.65rem }
}
@media(max-width:900px) {
.price-summary .price-stats { grid-template-columns:repeat(2,minmax(0,1fr)) }
.price-summary .price-stats>div { padding:14px var(--space-md) 14px 62px }
.price-summary .price-stats dt { min-height:initial; padding:0 }
.price-summary .price-stats dt svg { width:34px; height:34px }
.price-summary .price-stats small { font-size:.7rem }
}
@media(max-width:600px) {
.today-panel { padding:18px 14px; border-radius:18px }
.today-panel .section-title { display:flex; flex-wrap:wrap; gap:var(--space-xs) }
.today-panel .section-title h2 { font-size:1.45rem; gap:10px }
.today-panel .section-title h2 svg { width:22px; height:22px; padding:var(--space-xs) }
.today-panel .section-title a { display:inline-flex; margin:0 0 var(--space-xs); font-size:.7rem; min-height:38px; padding:var(--space-xs) var(--space-sm) }
.price-summary .price-context { margin:0 0 var(--space-md); font-size:.7rem; line-height:1.65 }
.price-summary .notice { padding:var(--space-sm); font-size:.72rem; margin-bottom:var(--space-sm) }
.price-summary .notice strong { display:block; margin-bottom:4px }
.price-summary .price-stats { gap:10px; margin-bottom:14px }
.price-summary .price-stats>div { padding:11px 10px }
.price-summary .price-stats dt { padding-left:29px; min-height:25px; font-size:var(--text-caption) }
.price-summary .price-stats dt svg { top:11px; left:10px; width:23px; height:23px; padding:4px }
.price-summary .price-stats dd { font-size:1.35rem; margin:var(--space-xs) 0 5px; white-space:normal }
.price-summary .price-stats dd span { font-size:.7rem }
.price-summary .price-stats small { font-size:.7rem; letter-spacing:normal }
.price-chart { padding:10px; border-radius:10px }
.chart-heading { font-size:.68rem; gap:2px }
.chart-heading a { min-height:36px }
.chart-scroll-hint { display:block; margin:2px 0 0; font-size:.7rem; color:var(--muted) }
.price-chart figcaption { font-size:.62rem; gap:var(--space-xs) }
.chart-legend { gap:10px }
.price-summary .price-source,.price-summary .price-source+p { font-size:.7rem; overflow-wrap:anywhere }
}

/* Compact interval detail; chronological DOM order also serves mobile. */
.history-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-md); font-size:var(--text-small) }
.history-heading strong { display:block; font-size:1.4rem; color:var(--accent-dark) }
.history-selection { align-self:center; font-weight:600 }
.history-svg { display:block; width:100%; min-width:720px; height:auto; font-family:var(--font); font-variant-numeric:tabular-nums }
.history-grid line { stroke:var(--line) }
.history-grid text { fill:var(--muted); font-size:14px }
.history-line { fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round }
.history-mean { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:7 5 }
.history-selected { stroke:var(--ink); stroke-width:2; stroke-dasharray:3 4 }
.history-hit { fill:transparent }
.history-dot { fill:var(--paper); stroke:var(--accent); stroke-width:2 }
.history-point.is-selected .history-dot { fill:var(--ink); stroke:var(--ink) }
.history-point { cursor:crosshair }
.history-point:focus { outline:none }
.history-point:focus .history-dot,.history-point:hover .history-dot { stroke:var(--ink); stroke-width:4 }
.history-tooltip { display:none; pointer-events:none }
.history-tooltip rect { fill:var(--ink) }
.history-tooltip text { fill:var(--paper); font-size:14px }
.history-point:hover .history-tooltip,.history-point:focus .history-tooltip { display:block }
.price-history details { margin-bottom:var(--space-md) }
.price-history tr[aria-current] { background:var(--soft) }
.price-history .price-chart figcaption { font-size:var(--text-caption) }

.interval-legend { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); max-width:none; font-size:var(--text-small) }
.interval-context { color:var(--muted); font-size:var(--text-small); max-width:none }
.interval-tables { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-xl); align-items:start }
.interval-table { background:var(--paper); line-height:1.4 }
.interval-table caption { padding:var(--space-sm); font-weight:600 }
.interval-table th,.interval-table td { min-width:0; padding:var(--space-xs) var(--space-sm); vertical-align:middle }
.interval-table th { white-space:nowrap }
.interval-table td strong { white-space:nowrap; font-weight:700 }
.interval-table td strong span { font-size:var(--text-small); font-weight:500 }
.interval-table small { display:block; font-size:var(--text-caption) }
.price-low { color:var(--success) }
.price-normal { color:var(--accent) }
.price-high { color:var(--error) }
@media(max-width:760px) {
.interval-tables { grid-template-columns:minmax(0,1fr); gap:0 }
.interval-table { font-size:.875rem }
.interval-table th,.interval-table td { padding:var(--space-xs) }
}