/* ==========================================================================
   El Camino DT — EL ÍMPETU DEL PARTIDO (`.impetu`)
   --------------------------------------------------------------------------
   El dibujo que cuenta quién tuvo el partido y cuándo se dio vuelta: barras a
   los dos lados de un eje horizontal, una cada cinco minutos, con la pelotita
   del gol encima. Medido de FM26 el 4/9/2026 (`referencia/fm26/notas.md`, «La
   PAUSA del partido»). Lo que se dibuja y por qué está en `entretiempo.js`,
   en `pintarImpetu()`; acá está sólo el aspecto.

   1. LOS COLORES SON LOS DE LA ESTADÍSTICA ENFRENTADA, y tienen que serlo: en
      este panel el ímpetu es una vista más, hermana de las cifras, y las tres
      vistas de cifras ya dicen «lo verde es tuyo». Que el dibujo lo dijera con
      otro color obligaría a aprender dos códigos para el mismo panel.

   2. EL EJE ES UN HAIRLINE, no un borde. Es la línea del cero y no un marco:
      con un trazo grueso el dibujo se lee como dos gráficos apilados en vez de
      uno solo con dos lados.

   3. EL CORTE DEL DESCANSO VA PUNTEADO Y APAGADO. Divide, no informa: si
      pesara igual que las barras competiría con el dato.

   4. LA BARRA NO SE ANIMA AL ENTRAR. Se probó y se sacó: son dieciocho barras
      y la entrada escalonada convertía un gráfico que se lee de un vistazo en
      una animación que hay que esperar. Lo que sí responde es el `title` de
      cada barra, que llega cuando la pedís.
   ========================================================================== */

.impetu {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* El rival, en el gris del sistema — el mismo `--ink-500` que la mitad ajena
   de la estadística enfrentada. */
.impetu__barra { fill: var(--ink-500); }
.impetu__barra--mia { fill: var(--good); }

.impetu__eje {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.impetu__corte {
  stroke: var(--ink-600);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}

/* El gol del rival también se ve: es parte de la historia del partido, y un
   gráfico que sólo marca los propios cuenta la mitad. */
.impetu__gol { fill: var(--text-muted); }
.impetu__gol--mio { fill: var(--good); }

/* La lectura en palabras, que es texto de verdad y no un pie de foto: es lo
   que se anuncia y lo que queda si el dibujo no se puede mirar. */
.impetu__resumen {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   CUANDO OCUPA EL CAMPO (día del partido, con el partido terminado)
   --------------------------------------------------------------------------
   Se coloca DENTRO de la caja de la cancha y encima del lienzo escondido, así
   que hereda su alto sin que nadie tenga que recalcular nada: `--campo-alto`
   ya reservó ese sitio y `medirLoQueNoEsCampo()` sigue contando lo mismo.

   Se centra en vez de estirarse: la cancha es mucho más alta que el gráfico y
   un ímpetu de 400 px de alto sería un cartel, no un dato. */
.pitch__impetu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--sp-7);
}

/* Acá el dibujo tiene ancho de sobra —es la columna más ancha de la pantalla—
   así que se le pone un techo: estirado a 900 px, cinco minutos de partido
   medirían cincuenta y el gráfico se leería como una empalizada. */
.pitch__impetu .impetu {
  max-width: 560px;
  margin: 0 auto;
}

.pitch__impetu .impetu__resumen { font-size: var(--fs-xs); }

/* El rótulo, centrado sobre el dibujo y con el mismo aire que el resumen de
   abajo: entre los dos encuadran el gráfico en una caja que es mucho más alta
   que él. */
.pitch__impetu-rotulo {
  display: block;
  text-align: center;
  margin-bottom: var(--sp-5);
}