/* El resumen comparte siempre un rango completo con su equivalente del año anterior. */
.dashboard-period-control { display: block; }
.dashboard-period-control .date-chip {
  min-width: 176px;
  margin-top: 13px;
  cursor: pointer;
  color: var(--ink);
  background-color: var(--panel);
}
.chart-legend { flex-wrap: wrap; row-gap: 7px; }
.chart-legend .line-key.previous {
  height: 0;
  background: transparent;
  border-top: 3px dashed var(--pink);
  border-radius: 0;
  margin-left: 12px;
}
.chart-legend > strong { white-space: nowrap; }
.sales-chart-frame {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  position: relative;
}
.sales-chart {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: clamp(180px, 16vw, 230px);
  margin-top: 8px;
  overflow: visible;
  cursor: crosshair;
  touch-action: pan-y;
  outline: none;
}
.sales-chart:focus-visible {
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-strong) 30%, transparent);
}
.dashboard-chart-grid-lines line {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}
.dashboard-chart-y-axis {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  width: 46px;
  height: clamp(180px, 16vw, 230px);
  margin-top: 8px;
  pointer-events: none;
}
.dashboard-chart-y-axis span {
  position: absolute;
  top: var(--chart-y);
  right: 2px;
  max-width: 44px;
  color: var(--muted);
  font: 600 10px/1 "DM Sans", system-ui, sans-serif;
  white-space: nowrap;
  transform: translateY(-50%);
}
.dashboard-chart-zero {
  stroke: color-mix(in srgb, var(--muted) 50%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
#dashboard-chart-line,
#dashboard-chart-previous-line {
  vector-effect: non-scaling-stroke;
}
.dashboard-chart-hover { pointer-events: none; }
.dashboard-chart-hover line {
  stroke: color-mix(in srgb, var(--ink) 38%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.dashboard-chart-hover circle {
  fill: var(--panel);
  stroke: var(--accent-strong);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.dashboard-chart-hover circle.previous {
  stroke: var(--pink);
  stroke-width: 2.5;
}
.sales-chart-tooltip {
  position: absolute;
  z-index: 5;
  width: max-content;
  min-width: 178px;
  max-width: min(230px, calc(100% - 12px));
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, var(--accent-strong));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(34, 28, 48, .18);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.sales-chart-tooltip[hidden] { display: none; }
.sales-chart-tooltip > strong {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  line-height: 1.3;
}
.sales-chart-tooltip-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}
.sales-chart-tooltip-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-strong);
}
.sales-chart-tooltip-row.previous i { background: var(--pink); }
.sales-chart-tooltip-row b {
  color: var(--ink);
  font-size: 11px;
  white-space: nowrap;
}
.chart-labels {
  padding-left: 50px;
  padding-right: 4px;
}
@media (max-width: 650px) {
  .dashboard-period-control { width: 100%; }
  .dashboard-period-control .date-chip { width: 100%; margin-top: 0; }
  .chart-legend .line-key.previous { margin-left: 0; }
  .sales-chart { height: 190px; }
  .dashboard-chart-y-axis { height: 190px; }
  .chart-labels { padding-left: 50px; padding-right: 4px; }
}