.inflacion-main {
  padding-top: 8px;
  padding-bottom: 44px;
}

.inflacion-main .phd {
  border-bottom: 1px solid var(--rule);
}

.inflacion-toolbar,
.inflacion-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.inflacion-toolbar h2,
.inflacion-section-head h2 {
  flex: 1 1 360px;
}

.inflacion-periods {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule-hi);
  background: var(--bg-1);
}

.inflacion-periods button {
  min-width: 42px;
  padding: 5px 9px;
  color: var(--fg-dim);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-left: 1px solid var(--rule);
}

.inflacion-periods button:first-child { border-left: 0; }
.inflacion-periods button:hover,
.inflacion-periods button:focus-visible { color: var(--hot); background: var(--bg-2); }
.inflacion-periods button.on {
  color: var(--inv-fg);
  background: var(--fg);
}

.inflacion-periods button:focus-visible {
  outline: 1px solid var(--hot);
  outline-offset: 2px;
}

.inflacion-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 8px;
  border: 1px solid var(--rule-hi);
  background: var(--rule-hi);
}

.inflacion-kpi {
  min-width: 0;
  min-height: 102px;
  padding: 13px 14px 12px;
  background: var(--bg-1);
}

.inflacion-kpi-label {
  color: var(--fg-dim);
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.inflacion-kpi-value {
  margin-top: 8px;
  color: var(--fg);
  font-size: clamp(20px, 3vw, 29px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
}

.inflacion-kpi-value.hot { color: var(--hot); }
.inflacion-kpi-value.up { color: var(--up); }
.inflacion-kpi-value.down { color: var(--down); }

.inflacion-kpi-meta {
  margin-top: 9px;
  color: var(--fg-faint);
  font-size: 9px;
  line-height: 1.35;
}

.inflacion-chart {
  min-height: 300px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.inflacion-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.inflacion-chart-surface { position: relative; }
.inflacion-chart .chart-hover-zone {
  fill: transparent;
  cursor: crosshair;
  outline: 0;
}
.inflacion-chart .chart-hover-zone:focus-visible {
  fill: color-mix(in srgb, var(--hot) 7%, transparent);
  stroke: var(--hot);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.inflacion-chart .chart-hover-line {
  display: none;
  stroke: var(--fg-dim);
  stroke-dasharray: 3 4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.inflacion-chart .chart-hover-line.visible { display: block; }
.inflacion-chart .chart-hover-point {
  display: none;
  stroke: var(--bg-1);
  stroke-width: 2;
  pointer-events: none;
}
.inflacion-chart .chart-hover-point.visible { display: block; }
.inflacion-chart .chart-hover-point.ipc { fill: var(--hot); }
.inflacion-chart .chart-hover-point.ipim { fill: #c9a9ff; }
.inflacion-chart-tooltip {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 2;
  display: grid;
  min-width: 124px;
  padding: 8px 10px;
  border: 1px solid var(--rule-hi);
  background: color-mix(in srgb, var(--bg-1) 96%, transparent);
  box-shadow: 0 8px 18px rgb(0 0 0 / .22);
  pointer-events: none;
  transform: translateX(-50%);
}
.inflacion-chart-tooltip.is-start { transform: translateX(0); }
.inflacion-chart-tooltip.is-end { transform: translateX(-100%); }
.inflacion-chart-tooltip[hidden] { display: none; }
.chart-tooltip-date {
  color: var(--fg);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.chart-tooltip-value {
  margin-top: 4px;
  font-size: 11px;
}
.chart-tooltip-value.ipc { color: var(--hot); }
.chart-tooltip-value.ipim { color: #c9a9ff; }
.chart-tooltip-value.muted { color: var(--fg-faint); }

.inflacion-chart .grid-line { stroke: var(--rule); stroke-width: 1; }
.inflacion-chart .zero-line { stroke: var(--rule-hi); stroke-width: 1; }
.inflacion-chart .axis-label,
.inflacion-chart .date-label {
  fill: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}
.inflacion-chart .date-label { font-size: 10px; }
.inflacion-chart .series-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.inflacion-chart .series-line.ipc { stroke: var(--hot); }
.inflacion-chart .series-line.ipim { stroke: #c9a9ff; }
.inflacion-chart .series-point { stroke: var(--bg-1); stroke-width: 2; }
.inflacion-chart .series-point.ipc { fill: var(--hot); }
.inflacion-chart .series-point.ipim { fill: #c9a9ff; }

.inflacion-chart-empty {
  min-height: 280px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--rule-hi);
  color: var(--fg-faint);
  font-size: 11px;
}

.inflacion-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 3px;
  color: var(--fg-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.legend-swatch {
  display: inline-block;
  width: 20px;
  height: 2px;
  margin: 0 6px 3px 0;
  vertical-align: middle;
  background: var(--hot);
}
.legend-swatch.ipim { background: #c9a9ff; }
.inflacion-chart-unit { margin-left: auto; color: var(--fg-faint); }

.inflacion-source { margin: 9px 0 0; }

.inflacion-section-head { align-items: baseline; }
.inflacion-section-head h2 { margin-bottom: 0; }
.inflacion-section-head .hint { margin: 0; }

.inflacion-rubro-chart {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 2px 0 12px;
  border-top: 1px solid var(--rule);
}

.inflacion-rubro-row {
  display: grid;
  grid-template-columns: minmax(205px, 1fr) minmax(160px, 2.2fr) 68px;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.inflacion-rubro-label {
  min-width: 0;
  overflow: hidden;
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inflacion-rubro-track {
  position: relative;
  height: 12px;
  background: var(--bg-2);
}

.inflacion-rubro-bar {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--hot);
  transform-origin: left center;
}

.inflacion-rubro-row:nth-child(2) .inflacion-rubro-bar { background: #e4b85b; }
.inflacion-rubro-row:nth-child(3) .inflacion-rubro-bar { background: #c9a9ff; }
.inflacion-rubro-row:nth-child(4) .inflacion-rubro-bar { background: #a6d9bd; }
.inflacion-rubro-row:nth-child(5) .inflacion-rubro-bar { background: #8bb7db; }
.inflacion-rubro-row:nth-child(n+6) .inflacion-rubro-bar { background: var(--fg-dim); }

.inflacion-rubro-value {
  color: var(--fg);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
.inflacion-rubro-value.negative { color: var(--down); }

.inflacion-rubro-table {
  margin-top: 4px;
  border-top: 1px solid var(--rule);
}
.inflacion-rubro-table table { margin-top: 0; }
.inflacion-rubro-table th,
.inflacion-rubro-table td { font-size: 10px; }
.inflacion-rubro-table td:first-child {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inflacion-notes { padding-bottom: 4px; }
.inflacion-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 12px;
}
.inflacion-note-grid > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  border-top: 1px solid var(--rule);
  padding-top: 9px;
}
.note-mark { color: var(--hot); font-size: 11px; }
.inflacion-note-grid p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 10px;
  line-height: 1.55;
}
.inflacion-note-grid b { color: var(--fg); font-weight: 400; text-transform: uppercase; }

@media (max-width: 850px) {
  .inflacion-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inflacion-rubro-row { grid-template-columns: minmax(180px, 1fr) minmax(120px, 2fr) 62px; }
  .inflacion-note-grid { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 600px) {
  .inflacion-main .phd { padding-bottom: 16px; }
  .inflacion-toolbar { align-items: flex-start; }
  .inflacion-periods { width: 100%; }
  .inflacion-periods button { flex: 1; min-width: 0; }
  .inflacion-kpis { grid-template-columns: 1fr 1fr; }
  .inflacion-kpi { min-height: 92px; padding: 10px; }
  .inflacion-kpi-value { font-size: 21px; }
  .inflacion-chart { min-height: 250px; }
  .inflacion-chart-unit { width: 100%; margin-left: 0; }
  .inflacion-rubro-row { grid-template-columns: minmax(125px, 1fr) minmax(70px, 1fr) 58px; gap: 7px; }
  .inflacion-rubro-label { font-size: 9px; white-space: normal; }
  .inflacion-rubro-table { overflow-x: visible; }
  .inflacion-rubro-table table { min-width: 0; table-layout: fixed; }
  .inflacion-rubro-table th,
  .inflacion-rubro-table td { padding-left: 5px; padding-right: 5px; font-size: 9px; }
  .inflacion-rubro-table th:first-child { width: 58%; }
  .inflacion-rubro-table th:nth-child(2),
  .inflacion-rubro-table th:nth-child(3) { width: 21%; }
}