/* El panel CON SCORIX apila como HOY en mobile.
 *
 * EL BUG. Los dos paneles muestran los mismos tres rótulos, en la misma página y con el mismo
 * ancho, y sólo uno se rompía:
 *
 *   HOY          display:flex con space-between      rótulo de 115 / 94 / 48 px
 *   CON SCORIX   grid 1fr 84px 62px                  rótulo de 12 px, alto de hasta 289
 *
 * Las dos columnas fijas suman 146 px más los gaps y no ceden nunca, así que toda la presión cae
 * sobre el 1fr hasta dejarlo del ancho de una letra. En un contenedor de 254 px no hay 1fr que
 * alcance.
 *
 * EL ARREGLO es estructural, no un nowrap: un nowrap ahí desbordaría el panel. La fila deja de
 * ser de tres columnas y pasa a dos filas — el rótulo entero arriba, la barra y el valor debajo—,
 * que es el mismo patrón que HOY ya usaba y que nunca se rompió.
 *
 * CÓMO SE ENCONTRÓ, porque costó tres hipótesis erradas (transitorio, un contenedor de 12px que
 * era de otro elemento, font boosting de Android): comparando los DOS paneles en vez de buscar
 * afuera. El dispositivo, el viewport, la fuente y el tiempo eran idénticos para ambos, así que
 * no podían explicar la diferencia. Ver la lección en NOTAS.
 */

@media (max-width: 767px) {
  [style*="grid-template-columns: 1fr 84px 62px"] {
    /* auto en la segunda columna y no 62px: el valor ocupa lo que necesita y la barra se queda
     * con el resto. Con las medidas fijas de escritorio la barra volvería a no ceder. */
    grid-template-columns: 1fr auto !important;
  }

  /* El rótulo cruza las dos columnas y se lleva la primera fila entera. */
  [style*="grid-template-columns: 1fr 84px 62px"] > *:first-child {
    grid-column: 1 / -1;
    min-width: 0;
  }

  /* La barra ocupa lo que sobra en la segunda fila; sin min-width:0 su contenido volvería a
   * empujar, que es la misma trampa un nivel más abajo. */
  [style*="grid-template-columns: 1fr 84px 62px"] > *:nth-child(2) {
    min-width: 0;
  }
}