/* Impacto de precio · reglas de página sobre gv-*
   (app/assets/stylesheets/gaviota_ui.css). Solo layout y alto del canvas;
   colores y tipografía vienen de --gv-*. */
.pi-sections { display: grid; gap: 1.5rem; }
/* La tarjeta base recorta (overflow: hidden); el popover del rango de fechas debe salir de ella. */
.card.pi-filters, .gv-card.pi-filters { overflow: visible; }
.pi-chart { position: relative; height: 280px; }
.pi-section-head { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; justify-content: space-between; margin-bottom: 0.75rem; }
.pi-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8125rem; color: var(--gv-slate-600); }
.pi-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 0.35rem; }
.pi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.pi-details { border-top: 1px solid var(--gv-slate-200); padding: 0.75rem 0; }
.pi-details > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.pi-details > summary::-webkit-details-marker { display: none; }
.pi-chevron { display: inline-block; transition: transform 120ms; color: var(--gv-slate-500); }
.pi-details[open] > summary .pi-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .pi-chevron { transition: none; } }