/* =========================================================
   Gráficos SVG animados (js/graficos.js): torta, barras y
   línea tipo cotización. Las animaciones solo existen bajo
   [aria-pressed="true"]: arrancan al girar la tarjeta y se
   reinician cada vez. Colores desde la capa de marca.
   ========================================================= */
.grafico {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--fuente-base);
  /* Espera a que la tarjeta termine de girar antes de dibujar. */
  --grafico-espera: calc(var(--t-giro) * 0.6);
  --grafico-paso: 120ms;
}

/* ---- Torta (dona) ---- */
.grafico--torta {
  max-width: 150px;
  margin-inline: auto;
}

.grafico__pista,
.grafico__arco {
  fill: none;
  stroke-width: 12;
}

.grafico__pista {
  stroke: var(--color-linea);
}

.grafico__arco {
  stroke: var(--color-acento);
  stroke-linecap: round;
  stroke-dasharray: var(--valor) 100;
  transform: rotate(-90deg);
  transform-origin: center;
}

[aria-pressed="true"] .grafico__arco {
  animation: grafico-llenar var(--t-escena) var(--curva) var(--grafico-espera) both;
}

.grafico__centro {
  font-family: var(--fuente-titulos);
  font-size: 22px;
  font-weight: 700;
  fill: var(--color-tinta);
  text-anchor: middle;
  dominant-baseline: central;
}

@keyframes grafico-llenar {
  from {
    stroke-dasharray: 0 100;
  }
}

/* ---- Barras ---- */
.grafico__barra {
  transform-box: fill-box;
  transform-origin: bottom;
}

.grafico__barra--0 {
  fill: var(--color-oscuro-tenue);
}

.grafico__barra--1 {
  fill: var(--color-acento);
}

[aria-pressed="true"] .grafico__barra,
[aria-pressed="true"] .grafico__valor {
  animation: grafico-crecer var(--t-lenta) var(--curva) both;
  animation-delay: calc(var(--grafico-espera) + var(--i) * var(--grafico-paso));
}

.grafico__valor {
  font-size: 9px;
  font-weight: 700;
  fill: var(--color-texto);
  text-anchor: middle;
}

.grafico__base {
  stroke: var(--color-linea);
}

.grafico__leyenda {
  display: flex;
  justify-content: center;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--color-tenue);
}

.grafico__clave::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.35em;
  border-radius: 2px;
}

.grafico__clave--0::before {
  background: var(--color-oscuro-tenue);
}

.grafico__clave--1::before {
  background: var(--color-acento);
}

.grafico__unidad {
  font-style: italic;
}

@keyframes grafico-crecer {
  from {
    opacity: 0;
    scale: 1 0;
  }
}

/* ---- Línea (cotización) ---- */
.grafico__guia {
  stroke: var(--color-linea);
  stroke-dasharray: 3 4;
}

.grafico__trazo {
  fill: none;
  stroke: var(--color-acento);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
}

.grafico__area {
  fill: var(--color-acento-velo);
}

[aria-pressed="true"] .grafico__trazo {
  animation: grafico-trazar var(--t-escena) var(--curva) var(--grafico-espera) both;
}

[aria-pressed="true"] .grafico__area,
[aria-pressed="true"] .grafico__punto,
[aria-pressed="true"] .grafico__ultimo {
  animation: grafico-aparecer var(--t-lenta) var(--curva) both;
  animation-delay: calc(var(--grafico-espera) + var(--t-escena) * 0.6);
}

.grafico__punto {
  fill: var(--color-acento);
  stroke: var(--color-superficie);
  stroke-width: 2;
}

.grafico__ultimo {
  font-size: 9px;
  font-weight: 700;
  fill: var(--color-acento);
  text-anchor: end;
}

@keyframes grafico-trazar {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes grafico-aparecer {
  from {
    opacity: 0;
  }
}

/* ---- Común ---- */
.grafico__eje {
  font-size: 9px;
  fill: var(--color-tenue);
  text-anchor: middle;
}