/* amnesia — gráficos (valores tomados del Figma, frame 1440x860) */

@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/league-spartan-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/league-spartan-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+E000-FFFF;
}

.chart-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 860px;
  background: #ffffff;
  overflow: hidden;
  transform-origin: 0 0;
  font-family: 'League Spartan', sans-serif;
  font-weight: 500;
  color: #0d2d46;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
}

.chart-stage.is-thumb,
.chart-stage.is-thumb * { pointer-events: none !important; }

.chart-stage .t {
  position: absolute;
  margin: 0;
  line-height: normal;
  white-space: nowrap;
}
.chart-stage .t-center { transform: translateX(-50%); text-align: center; }
.chart-stage .t-right { transform: translateX(-100%); text-align: right; }

.chart-stage .a { position: absolute; display: block; max-width: none; }
.chart-stage div.a > svg { display: block; overflow: visible; }

/* Panel · reposo */
.chart-stage .hint {
  position: absolute;
  padding: 16px;
  border: 1px solid #e1e7f2;
  border-radius: 16px;
  background: #f5f7fb;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: #0d2d46;
  text-align: center;
  white-space: nowrap;
}
.chart-stage .hint-plain { border-color: transparent; background: none; color: #7a8aa3; }

/* Tooltip oscuro */
.chart-stage .tip {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 14px 10px;
  border-radius: 10px;
  background: #0d2d46;
  box-shadow: 0 4px 14px 0 rgba(13, 31, 64, 0.3);
  line-height: normal;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}
.chart-stage .tip p { margin: 0; }
.chart-stage .tip .tip-k { font-size: 12px; font-weight: 500; color: #a9bbd6; }
.chart-stage .tip .tip-v { font-size: 20px; font-weight: 600; color: #ffffff; }
.chart-stage .tip.tip-lg { gap: 2px; padding: 10px 16px 12px; }
.chart-stage .tip.tip-lg .tip-v { font-size: 24px; }
.chart-stage .tip .tip-s { font-size: 12px; font-weight: 500; color: #7a93b8; letter-spacing: 0.72px; }

.chart-stage .hit { position: absolute; cursor: pointer; }
.chart-stage .is-hidden { display: none !important; }

/* ---------- Graph #3 · barras ---------- */
.chart-stage .bar { background: #8ca0d6; border-radius: 6px 6px 0 0; }
.chart-stage .bar.is-hover { background: #3f5ba4; }
.chart-stage .tick-rot { display: flex; align-items: center; justify-content: center; }
.chart-stage .tick-rot p {
  flex: none;
  margin: 0;
  transform: rotate(-45deg);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: #7a8aa3;
  white-space: nowrap;
}

/* ---------- Graph #4 / #7 · puntos ---------- */
.chart-stage .pt-dot { border-radius: 50%; background: #3f5ba4; }
.chart-stage .pt-guide { background: rgba(63, 91, 164, 0.28); }

/* ---------- Graph #6 · toggle ---------- */
.chart-stage .g6-toggle { border-radius: 26px; background: #eef1f8; }
.chart-stage .g6-chip {
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 2px 8px 0 rgba(13, 31, 64, 0.14);
  transition: left 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.chart-stage .g6-toggle .t { transition: color 200ms ease; }
.chart-stage .g6-center { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.chart-stage .g6-center p { margin: 0; line-height: normal; }
.chart-stage .g6-value { font-size: 52px; font-weight: 600; color: #0d2d46; }
.chart-stage .g6-unit { font-size: 18px; font-weight: 500; color: #5a6b82; letter-spacing: 1.08px; }
.chart-stage .g6-panel { display: flex; flex-direction: column; gap: 20px; overflow: hidden; }
.chart-stage .g6-row { display: flex; gap: 14px; align-items: center; }
.chart-stage .g6-row p { margin: 0; line-height: normal; }
.chart-stage .g6-k { flex: 1 0 0; min-width: 1px; font-size: 18px; font-weight: 500; color: #33475f; }
.chart-stage .g6-v { flex: none; font-size: 22px; font-weight: 600; color: #0d2d46; text-align: right; white-space: nowrap; }
.chart-stage .g6-rule { height: 1px; background: #e7eaf0; }
.chart-stage .g6-note { margin: 0; font-size: 16px; font-weight: 500; line-height: 26px; color: #5a6b82; }

@media (prefers-reduced-motion: reduce) {
  .chart-stage .g6-chip, .chart-stage .g6-toggle .t { transition: none; }
}

/* ---------- Graph #2 · dona ---------- */
.chart-stage .g2-sector { cursor: pointer; }
.chart-stage .g2-hover { pointer-events: none; z-index: 2; }
.chart-stage .g2-legend { display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.chart-stage .g2-row { display: flex; gap: 14px; align-items: center; }
.chart-stage .g2-row p { margin: 0; line-height: normal; font-size: 18px; }
.chart-stage .g2-dot { flex: none; display: block; width: 14px; height: 14px; }
.chart-stage .g2-k { flex: 1 0 0; min-width: 1px; font-weight: 500; color: #33475f; }
.chart-stage .g2-v { flex: none; font-weight: 600; color: #0d2d46; text-align: right; white-space: nowrap; }
.chart-stage .g2-rule { height: 1px; background: #e7eaf0; }

/* SVG vivos: solo lo pintado recibe el cursor */
.chart-stage div.a > svg { pointer-events: none; }
.chart-stage div.a > svg path { pointer-events: visiblePainted; }
.chart-stage .g2-hover, .chart-stage .g2-hover * { pointer-events: none; }
div.a:has(> svg) { pointer-events: none; }

/* ---------- Graph #5 · mapa ---------- */
.chart-stage .g5-region path { cursor: pointer; }
.chart-stage .g5-panel {
  border: 1px solid #e1e7f2;
  border-radius: 16px;
  background: #f5f7fb;
  z-index: 3;
  pointer-events: none;
}
.chart-stage .g5-track { border-radius: 4px; background: #e1e7f2; }
.chart-stage .g5-fill { border-radius: 4px; background: #3f5ba4; }

/* ---------- Graph #8 · secuencia de mapas ---------- */
.chart-stage.g8 { cursor: pointer; }
.chart-stage .g8-step { animation: g8-in 260ms ease both; }
@keyframes g8-in { from { opacity: 0; } to { opacity: 1; } }
.chart-stage .g8-chip {
  padding: 9px 14px;
  border: 1px solid rgba(13, 45, 70, 0.35);
  border-radius: 4px;
  background: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  color: #0d2d46;
  white-space: nowrap;
}
.chart-stage .g8-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 10px 14px;
  border: 1px solid rgba(13, 45, 70, 0.25);
  border-radius: 4px;
  background: #ffffff;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
.chart-stage .g8-card p { margin: 0; line-height: normal; }
.chart-stage .g8-card-t { font-size: 20px; font-weight: 600; color: #0d2d46; }
.chart-stage .g8-card-s { font-size: 14px; font-weight: 500; color: #7a8aa3; letter-spacing: 2.52px; }
.chart-stage .g8-guide { background: rgba(13, 45, 70, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .chart-stage .g8-step { animation: none; }
}

/* ---------- Graph #1 · medidor ---------- */
.chart-stage .g1-tick { border-radius: 1px; background: #9aa6be; }
.chart-stage .g1-tick.is-major { background: #0d2d46; }
.chart-stage .g1-seg-label { display: flex; align-items: center; justify-content: center; }
.chart-stage .g1-seg-label p {
  flex: none;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}
.chart-stage .g1-needle {
  border-radius: 6px;
  background: #33475f;
  box-shadow: 0 3px 8px 0 rgba(13, 31, 64, 0.22);
  transform-origin: 6px 236px;
  transition: transform 900ms cubic-bezier(0.45, 0, 0.2, 1);
}
.chart-stage .g1-labels {
  display: flex;
  gap: 96px;
  padding: 0 8px;
  transform: translateX(-50%);
}
.chart-stage .g1-label {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  color: #808080;
  cursor: pointer;
}
.chart-stage .g1-label.is-active { color: #000000; }
.chart-stage .g1-dot { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .chart-stage .g1-needle { transition: none; }
}