/* =========================================================================
   reparto — El reparto de la cobertura.

   Tramo 7 de 8 de la hoja que antes era una sola (1 468 líneas). Los
   tramos son CONTIGUOS y se cargan en este orden: el orden de carga es la
   cascada. Mover una hoja de sitio puede cambiar qué regla gana sin que
   nada falle — se comprueba con `npm run huella`, no razonando.
   ========================================================================= */

/* ======================================================= reparto de cobertura
   De qué está hecho el sitio, en barras. Es un dato editorial, no un adorno:
   un medio que dice cubrir seis temas y dedica la mitad a uno está diciendo
   algo, y esto lo enseña sin que nadie cuente notas a mano.

   Un solo color a propósito. Seis colores afirmarían que el color distingue
   temas; aquí los distingue su nombre, escrito al lado. Y el sitio tiene un
   solo tono de marca: meter una paleta categórica aquí sería inventar cinco
   colores que no existen en ninguna otra parte.
   ========================================================================== */

.reparto {
  margin: 3.5rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--linea);
}

.reparto__titulo {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  margin: 0 0 1.25rem;
}

.reparto__lista { list-style: none; margin: 0; padding: 0; }

.reparto__enlace {
  display: grid;
  /* nombre | barra | dato. La columna del dato es fija para que los números
     queden alineados en vertical y se puedan comparar de un vistazo. */
  grid-template-columns: 8.5rem minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 1rem;
  padding: .5rem .6rem;
  margin: 0 -.6rem;
  border-radius: .5rem;
  text-decoration: none;
  color: inherit;
}

/* El área sensible es la fila entera, no la barra: apuntar a una tira de diez
   píxeles de alto con el dedo es imposible. */
.reparto__enlace:hover { background: var(--papel); }
.reparto__enlace:hover .reparto__nombre { color: var(--rojo); }

.reparto__nombre {
  font-size: .95rem;
  font-weight: 600;
}

/* La pista es el todo; la barra, la parte. La pista está UN paso por encima
   del papel, no dos: si contrastara fuerte competiría con la propia barra. */
.reparto__pista {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--linea);
  overflow: hidden;
}

.reparto__barra {
  display: block;
  height: 100%;
  background: var(--rojo);
  /* Recta contra el origen y redondeada en el extremo del dato: el punto de
     partida es un eje, no un valor, y redondearlo también haría que las
     barras chicas parecieran pastillas flotando. */
  border-radius: 0 4px 4px 0;
  min-width: 2px;      /* una sección con una sola nota tiene que verse */
}

.reparto__dato {
  font-size: .9rem;
  text-align: right;
  color: var(--tinta-tenue);
  /* Cifras de ancho fijo porque se leen en columna: sin esto el 4 y el 11
     bailan y la comparación cuesta. */
  font-variant-numeric: tabular-nums;
}

.reparto__dato strong { color: var(--tinta); font-size: 1rem; }
.reparto__pct { opacity: .7; }

.reparto__pie {
  margin: 1.25rem 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--tinta-tenue);
  max-width: 44rem;
}

@media (max-width: 560px) {
  /* El nombre se va arriba y la barra ocupa el ancho: a 320 px, tres columnas
     dejan la barra en cuarenta píxeles y deja de medir nada. */
  .reparto__enlace {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem .8rem;
  }
  .reparto__nombre { grid-column: 1; }
  .reparto__dato { grid-column: 2; grid-row: 1; }
  .reparto__pista { grid-column: 1 / -1; grid-row: 2; }
}