/* Cobertura: oficinas por estado de una AFORE (/<marca>/sucursales) — .cobe
 *
 * Reemplaza al SVG de 720 de ancho que además pedía min-width:640px (app.css:763): en un
 * teléfono de 412px había que arrastrar la página de lado para leer "Ciudad de México — 5",
 * que es puro texto. Un SVG de coordenadas absolutas escala como una imagen y su texto no
 * envuelve; acá la fila se reacomoda sola y el nombre del estado se lee entero.
 *
 * Las reglas de la casa y las piezas compartidas (.figh__t, .figh__st, .figh__pie y sobre todo
 * .figh__barra, que es el carril + relleno de toda barra proporcional del sitio) están en
 * ../figuras.css; esta hoja sólo trae lo específico del ranking de estados.
 *
 * Ojo: estas cifras son REALES, salen del directorio scrapeado. Por eso la barra va acompañada
 * SIEMPRE del número: la barra compara de un vistazo, el número es el dato.
 */

.cobe__lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}

/* ── La fila ───────────────────────────────────────────────────────────────────────────────
   Dos maquetas con el MISMO orden de DOM (rótulo, barra, cantidad) gracias a las áreas: no hay
   nada que reordenar ni duplicar entre anchos.

   Angosto —que es como se consulta esta página, desde el celular y de camino—: el nombre del
   estado y su cantidad comparten renglón, con el número pegado al margen derecho, y la barra
   va debajo a todo el ancho. Así el rótulo nunca queda exprimido en una columna de 6em y la
   barra, que es la comparación, se queda con todo el espacio disponible.

   El auto de la segunda columna es la cantidad: como cada fila es su propia rejilla, acá SÍ
   puede ser auto (el número va al borde derecho y no hay nada que alinear a su izquierda). */
.cobe__fila{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"est num" "bar bar";align-items:center;gap:5px 10px}

.cobe__est{grid-area:est;font-size:13px;font-weight:600;line-height:1.35;color:var(--ink)}
.cobe__barra{grid-area:bar}
/* tabular-nums para que las unidades de "5" y de "100" caigan en la misma vertical. El
   --brand-d es el mismo de la voz fuerte del tema, así que el número gana sobre el rótulo. */
.cobe__n{grid-area:num;font-size:13px;font-weight:800;line-height:1.35;color:var(--brand-d);
  font-variant-numeric:tabular-nums}

/* ── Ancho: rótulo · barra · cantidad en un solo renglón ───────────────────────────────────
   Es la maqueta del SVG original (rótulo alineado a la derecha contra el arranque de las
   barras, todas empezando en la misma vertical).

   Las dos columnas laterales van en em y no en px a propósito: tienen que ser IGUALES en todas
   las filas —si fueran auto, cada fila dimensionaría la suya y las barras arrancarían en una x
   distinta, que es justo lo que hace ilegible un ranking—, pero atadas al tamaño de letra y no
   a una medida absoluta. 11em cubre el nombre más largo del catálogo ("Baja California Sur");
   si algún día entra uno mayor, envuelve en dos renglones y no rompe nada. 2.6em cubre tres
   dígitos tabulares (Coppel llega a 100 en un estado y a 365 en la fila del resto). */
@media (min-width:620px){
  .cobe__fila{grid-template-columns:11em minmax(0,1fr) 2.6em;
    grid-template-areas:"est bar num";gap:0 12px}
  .cobe__est{text-align:right}
}

/* ── La fila del resto ─────────────────────────────────────────────────────────────────────
   Va fuera del <ol> (no es el puesto 11 del ranking) y por eso necesita el filete que la
   separa: sin él se lee como una fila más del top diez.

   El relleno es --bar-off, el token que app.css:51 define literalmente como "barras inactivas
   de los gráficos". El SVG pintaba este rectángulo con --border-2, pero --border-2 es también
   el color del CARRIL de .figh__barra: la barra habría quedado invisible sobre sí misma. O sea
   que --bar-off es el mismo gris apagado que el SVG buscaba, ejecutado donde sí se ve. */
.cobe__fila--resto{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.cobe__fila--resto .cobe__est{color:var(--muted)}
.cobe__fila--resto .cobe__n{font-weight:700;color:var(--muted)}
.cobe__fila--resto .figh__barra i{background:var(--bar-off)}

@media (max-width:620px){
  /* Con la barra debajo del rótulo, la fila mide el doble de alto: el hueco entre filas tiene
     que crecer o la barra de una se confunde con el rótulo de la siguiente. */
  .cobe__lista{gap:15px}
}