/* ══════════════════════════════════════════════════════════════════════════
   UH16.30 · COMPARACIÓN MASIVA
   Construida DESDE el mockup aprobado —lienzo «Comparación Masiva», tableros
   Main, Partida y Estados, 2026-09-06—, no repintando lo que había.

   POR QUÉ EXISTE ESTE ARCHIVO Y NO SE TOCA `style.css`: las reglas viejas
   (`.ci-bulk-*`) describen otra pantalla —filas de dos líneas, sombras que
   simulan las columnas fijas, doce columnas siempre— y aquí no queda nada de
   eso. Se dejan donde están: `style.css` es el escaparate de las demos y
   quitarle reglas no aporta nada a esta UH.

   LO QUE LA PANTALLA DE HOY HACÍA MAL, MEDIDO ANTES DE EMPEZAR:
     · la tabla medía 2,198px y el hueco disponible son 1,158
     · había que desplazar 987px para llegar a «Mejor precio» — la respuesta —
       y esa columna NO estaba congelada, se iba con el desplazamiento
     · la fila medía 62px: las 40 filas sumaban 2,480px
     · el código de barras se cortaba (columna de 120px, SKU de 13 dígitos)
   ══════════════════════════════════════════════════════════════════════════ */

#bulkCompareView { display: flex; flex-direction: column; gap: var(--pf-s-4); }

/* ══ 1 · EL ESTADO DE PARTIDA ══════════════════════════════════════════════
   Antes: un párrafo explicando la pantalla, una etiqueta, y el selector de
   archivos del navegador. Ahora, la única cosa que se puede hacer, y se puede
   hacer soltando el archivo encima. */

.pfm-soltar {
  display: flex; align-items: center; gap: var(--pf-s-5);
  background: var(--pf-card);
  border: 1.5px dashed var(--pf-teal-300);
  border-radius: var(--pf-r-md);
  padding: var(--pf-s-6);
  transition: background var(--pf-t-fast), border-color var(--pf-t-fast);
}
/* Mientras el archivo está encima. La clase la pone app.js en `dragover`. */
.pfm-soltar--encima { background: var(--pf-accent); border-color: var(--pf-brand); }
.pfm-soltar__ico {
  flex: none; width: 52px; height: 52px; border-radius: var(--pf-r-md);
  display: grid; place-items: center;
  background: var(--pf-accent); color: var(--pf-accent-foreground);   /* 6.60 */
}
.pfm-soltar__ico svg { width: 26px; height: 26px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pfm-soltar__txt { flex: 1; min-width: 0; }
.pfm-soltar__tit {
  font-family: var(--pf-font-display); font-size: var(--pf-fs-md);
  font-weight: 700; color: var(--pf-sup-900);
}
.pfm-soltar__sub { font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground); margin-top: 5px; }
.pfm-soltar__sub b { font-weight: 700; color: var(--pf-foreground); }

/* ══ 2 · EL MANDO ══════════════════════════════════════════════════════════
   El archivo deja de ser un input que se olvida y pasa a ser un objeto con
   identidad: nombre, cuántas filas trajo y cuánto tardó. */

.pfm-mando { display: flex; align-items: flex-start; gap: var(--pf-s-3); flex-wrap: wrap; }
/* Lo que informa se reparte en los renglones que hagan falta; la acción no se
   mueve de su esquina mientras quepa en la fila. */
.pfm-mando__izq {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--pf-s-3);
  /* `flex-basis: 0`, no `auto`: con `auto` este grupo reclama el ancho de todo
     su contenido, no cabe junto al botón y es el BOTÓN el que se va a un
     renglón vacío. Con 0 se conforma con lo que sobra y envuelve por dentro. */
  flex: 1 1 0; min-width: 0;
}
.pfm-mando > .ci-btn { flex: none; }
.pfm-archivo {
  display: flex; align-items: center; gap: var(--pf-s-2);
  height: 40px; padding: 0 var(--pf-s-4) 0 11px;
  border-radius: var(--pf-r-md); background: var(--pf-card);
  border: 1px solid var(--pf-border); border-left: 3px solid var(--pf-brand);
}
.pfm-archivo svg { width: 16px; height: 16px; flex: none; color: var(--pf-accent-foreground);
  stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pfm-archivo__nom { font-size: var(--pf-fs-sm); font-weight: 700; white-space: nowrap; }
.pfm-archivo__dato { font-size: var(--pf-fs-xs); color: var(--pf-muted-foreground);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Las columnas escondidas y el interruptor para traerlas. El rótulo dice POR
   QUÉ se ocultan, no solo cuántas: el número cambia con cada archivo, y sin el
   motivo la primera vez que salgan tres en vez de cinco parecerá un fallo. */
.pfm-ocultos {
  display: flex; align-items: center; gap: var(--pf-s-2);
  height: 40px; padding: 0 var(--pf-s-3);
  border-radius: var(--pf-r-md); background: var(--pf-card);
  border: 1px solid var(--pf-border);
  font-size: var(--pf-fs-sm); color: var(--pf-muted-foreground);
}
.pfm-ocultos svg { width: 15px; height: 15px; flex: none; color: var(--pf-sup-500);
  stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.pfm-ocultos b { color: var(--pf-foreground); font-weight: 700; }

/* ══ 3 · LA PLACA · LA RESPUESTA ═══════════════════════════════════════════
   El mismo gris de la barra lateral y de la tarjeta de producto. Las cuatro
   cifras salen de datos que el servidor YA manda: el ahorro contra la
   siguiente opción de cada producto, cuántos tienen con qué compararse, el
   total al mejor precio y entre cuántos proveedores se reparte. */

.pfm-placa {
  background: var(--pf-sup-700); border-radius: var(--pf-r-md);
  padding: 18px 26px 15px; box-shadow: var(--pf-sh-md);
}
/* LAS TRES CELDAS TENÍAN PROHIBIDO ENCOGERSE (`flex: none`), y con eso la
   placa se salía de la pantalla: a 1280px la celda de la derecha terminaba
   72px fuera y era la PÁGINA ENTERA la que se desplazaba de lado, no la
   tabla. Ahora cada celda cede hasta el ancho que su cifra necesita de
   verdad y el texto de apoyo se reparte en dos renglones. */
.pfm-placa__fila { display: flex; align-items: stretch; gap: var(--pf-s-6); }
.pfm-cel { flex: 0 1 auto; min-width: 150px; }
.pfm-cel--ancha { flex: 1 1 300px; min-width: 300px; }
.pfm-cel--der { margin-left: auto; text-align: right; min-width: 170px; }
.pfm-hair { width: 1px; background: rgba(255, 255, 255, .18); flex: none; }
.pfm-micro {
  font-size: var(--pf-fs-micro); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #c5c9d8;                          /* 4.97 */
}
.pfm-cifra {
  font-family: var(--pf-font-display); font-size: var(--pf-fs-2xl); font-weight: 700;
  color: #FFFFFF; letter-spacing: -.02em; line-height: 1; margin-top: 10px;
  font-variant-numeric: tabular-nums;                                 /* 8.20 */
}
.pfm-pie { font-size: var(--pf-fs-sm); color: #c5c9d8; margin-top: 10px; line-height: 1.45; }
.pfm-pie b { color: #f0f2fc; font-weight: 700; }
.pfm-pct {
  display: inline-flex; align-items: center; margin-left: 10px; padding: 4px 10px;
  border-radius: var(--pf-r-pill); background: rgba(95, 217, 193, .16);
  font-family: var(--pf-font-display); font-size: var(--pf-fs-sm); font-weight: 700;
  color: #5FD9C1; vertical-align: middle;          /* 4.76 */
}

/* DE QUÉ ESTÁ HECHO EL ARCHIVO. Es la pieza que hoy no existe y más falta
   hace: sin ella, un ahorro calculado sobre el 65% del archivo se lee como si
   fuera sobre el 100%. */
.pfm-compo { margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.18); }
.pfm-compo__cab { display: flex; align-items: baseline; gap: var(--pf-s-2); flex-wrap: wrap; }
.pfm-compo__dato { font-size: var(--pf-fs-xs); color: #c5c9d8; font-variant-numeric: tabular-nums; }
.pfm-compo__dato b { color: #FFFFFF; font-weight: 700; }
.pfm-barra {
  display: flex; gap: 3px; height: 8px; margin-top: 11px;
  border-radius: var(--pf-r-pill); overflow: hidden; background: rgba(0,0,0,.24);
}
.pfm-barra span { display: block; }
.pfm-barra__ok    { background: #5FD9C1; }
.pfm-barra__solo  { background: rgba(255,255,255,.55); }
.pfm-barra__fuera { background: var(--pf-warning); }
.pfm-compo__pies {
  display: flex; justify-content: space-between; gap: var(--pf-s-4);
  margin-top: 8px; font-size: var(--pf-fs-micro); color: #c5c9d8;
  font-variant-numeric: tabular-nums;
}
.pfm-compo__pies b { color: #FFFFFF; font-weight: 700; }
.pfm-compo__pies .pfm-fuera { color: var(--pf-warning); font-weight: 700; }

/* ══ 4 · LOS CÓDIGOS QUE NO EXISTEN ════════════════════════════════════════
   Hoy son una cadena de N códigos separados por comas dentro de un aviso. */

.pfm-nofound {
  display: flex; align-items: center; gap: var(--pf-s-3); flex-wrap: wrap;
  background: var(--pf-warning-subtle); color: var(--pf-warning-on-subtle);
  border-radius: var(--pf-r-md); border-left: 3px solid var(--pf-warning);
  padding: 12px 18px 12px 15px;                                        /* 6.35 */
}
.pfm-nofound svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pfm-nofound__tit { font-size: var(--pf-fs-sm); font-weight: 700; }
.pfm-chip {
  display: inline-flex; padding: 3px 9px; border-radius: var(--pf-r-sm);
  background: var(--pf-amber-200); color: var(--pf-warning-on-subtle);
  font-size: var(--pf-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.pfm-nofound__mas { font-size: var(--pf-fs-xs); }

/* ══ 5 · LA TABLA · TRES ZONAS ═════════════════════════════════════════════

   IDENTIDAD (no se mueve) · EVIDENCIA (se desplaza) · CONCLUSIÓN (no se mueve)

   La conclusión anclada A LA DERECHA es el cambio que sostiene toda la
   pantalla: hoy la respuesta se calcula y se pone a 987px de la vista.

   `border-collapse: separate` NO es decorativo y viene heredado de la tabla
   anterior con su motivo: con `collapse`, el fondo y el z-index de una celda
   fija no pintan bien y el texto de las columnas que se desplazan se cuela por
   encima. Es un defecto conocido de Chrome con celdas `sticky` en tablas.   */

.pfm-caja {
  background: var(--pf-card); border-radius: var(--pf-r-md);
  box-shadow: var(--pf-sh-sm); overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
.pfm-zonas { display: flex; align-items: center; border-bottom: 1px solid var(--pf-sup-200); }
.pfm-zonas__id  { width: 392px; flex: none; padding: 9px 20px; }
.pfm-zonas__ev  { flex: 1; min-width: 0; padding: 9px 16px; border-left: 1px solid var(--pf-sup-200);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfm-zonas__co  { width: 300px; flex: none; padding: 9px 20px; color: var(--pf-accent-foreground);
                  background: var(--pf-accent); border-left: 1px solid var(--pf-teal-100); }
.pfm-zonas span { font-size: var(--pf-fs-micro); font-weight: 700; letter-spacing: .09em;
                  text-transform: uppercase; color: var(--pf-sup-500); }
.pfm-zonas__co span { color: var(--pf-accent-foreground); }

.pfm-scroll { overflow: auto; max-height: 62vh; }

.pfm-tab {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--pf-fs-sm); font-variant-numeric: tabular-nums;
}
.pfm-tab th {
  position: sticky; top: 0; z-index: 21;
  padding: 7px 12px; text-align: right;
  font-size: var(--pf-fs-micro); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--pf-muted-foreground);
  background: var(--pf-sup-50); border-bottom: 1px solid var(--pf-sup-200);
  white-space: nowrap;
}
.pfm-tab td { height: 40px; padding: 0 12px; text-align: right; color: var(--pf-sup-900);
  border-bottom: 1px solid #F0F1F8; background: var(--pf-card); }
.pfm-tab tr:last-child td { border-bottom: none; }
.pfm-tab tbody tr:hover td { background: var(--pf-sup-50); }

/* Las tres primeras columnas, ancladas a la izquierda. El SKU cabe entero:
   13 dígitos con su pastilla piden 152px, no los 120 de antes. */
.pfm-id1, .pfm-id2, .pfm-id3 { position: sticky; z-index: 20; }
/* LOS ANCHOS VAN CLAVADOS con min y max, y no es cosmético: el desplazamiento
   lateral coloca cada columna fija con un `left` en píxeles, así que si el
   ancho real no coincide con el declarado, la primera columna de evidencia se
   mete DEBAJO de la zona fija y se le come el signo de pesos. Con `min-width`
   y `max-width` iguales, lo declarado y lo real son lo mismo.
   152px para el código: 13 dígitos con su pastilla no caben en los 120 de la
   pantalla anterior, que los cortaba. */
.pfm-id1 { left: 0;     min-width: 152px; max-width: 152px; padding-left: 20px; }
.pfm-id2 { left: 152px; min-width: 182px; max-width: 182px; }
.pfm-id3 { left: 334px; min-width: 58px;  max-width: 58px;
           border-right: 1px solid var(--pf-sup-200); }
.pfm-tab th.pfm-id1, .pfm-tab td.pfm-id1,
.pfm-tab th.pfm-id2, .pfm-tab td.pfm-id2 { text-align: left; }
.pfm-tab th.pfm-id3, .pfm-tab td.pfm-id3 { text-align: center; }
th.pfm-id1, th.pfm-id2, th.pfm-id3 { z-index: 22; }

/* EL NOMBRE NO PARTE LA FILA. Un nombre largo —«Onivix Fem Suplemento
   Alimenticio Polvo 30 Sobres»— se envolvía en cuatro líneas y esa fila pasaba
   de 40 a 100px, rompiendo el ritmo que acabábamos de ganar. Se recorta con
   puntos suspensivos y el nombre entero queda en el `title`. */
.pfm-tab td.pfm-id2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Las columnas de proveedor: ancho mínimo para que quepa una cifra con miles. */
.pfm-tab th:not(.pfm-id1):not(.pfm-id2):not(.pfm-id3):not(.pfm-co) { min-width: 118px; }

/* La conclusión, anclada a la DERECHA. */
.pfm-co { position: sticky; right: 0; z-index: 20; min-width: 300px; max-width: 300px;
          padding: 3px 14px 3px 12px; border-left: 1px solid var(--pf-teal-100); }
th.pfm-co { z-index: 22; }

/* El bloque de la conclusión. Cada número lleva su palabra pegada —decisión de
   Gerardo, 2026-09-06—: sin ellas, tres cifras seguidas bajo un solo rótulo
   obligan a adivinar cuál es cuál.
   ⚠️ El blanco sobre el verde de marca da 3.14: la excepción declarada de
   §5.bis, la misma de los botones y de la placa del banner. */
.pfm-bloque {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 7px;
  white-space: nowrap; border-radius: var(--pf-r-sm); padding: 4px 10px;
  background: var(--pf-brand); color: #FFFFFF;                          /* 3.14 */
  overflow: hidden;
}
/* QUÉ CEDE CUANDO NO CABE, y no es un detalle: con cifras grandes —$375,000.00
   con un ahorro de $100,854.27— el bloque se pasaba de largo y, al ir alineado
   a la derecha, lo que se salía y se cortaba era el NOMBRE DEL PROVEEDOR por la
   izquierda: la fila decía «DRO :» en vez de «NADRO :».
   El nombre y la cifra no se encogen nunca; el que se recorta, y con puntos
   suspensivos, es el ahorro — que es el dato de apoyo. */
.pfm-bloque__ap { font-size: var(--pf-fs-micro); flex: none; }
.pfm-bloque__ap:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden;
                              text-overflow: ellipsis; }
.pfm-bloque__ap b { font-size: 12px; }
.pfm-bloque__num { font-family: var(--pf-font-display); font-size: var(--pf-fs-md);
                   font-weight: 700; flex: none; }

/* SIN COMPARACIÓN: un solo proveedor. Va en GRIS y no en verde a propósito —
   el verde significa «esto ganó una comparación», y aquí no hubo ninguna que
   ganar. Es el mismo criterio por el que la placa dice «Sin comparación» en
   vez de un $0.00. */
.pfm-bloque--solo { background: var(--pf-sup-200); color: var(--pf-foreground); }

/* La celda del proveedor que gana, dentro de la evidencia: dice DÓNDE está el
   ganador en la fila, mientras el bloque dice CUÁL es. */
.pfm-gana { background: var(--pf-accent); font-weight: 700; color: var(--pf-foreground); }
.pfm-tab tbody tr:hover td.pfm-gana { background: var(--pf-accent); }
.pfm-nd { color: var(--pf-sup-500); }
.pfm-sinstock { color: var(--pf-warning-on-subtle); font-weight: 600; }

/* La fila del producto que no existe en el catálogo. */
.pfm-fuera-fila td { background: var(--pf-warning-subtle); color: var(--pf-warning-on-subtle); }
.pfm-tab tbody tr.pfm-fuera-fila:hover td { background: var(--pf-warning-subtle); }
.pfm-fuera-fila .pfm-id1 { border-left: 3px solid var(--pf-warning); padding-left: 17px; }
.pfm-fuera-fila .pfm-chip { background: var(--pf-amber-200); }

/* El pie de la tabla: los totales por proveedor, que YA existían y se
   conservan — dicen cuánto costaría el archivo entero comprándoselo a cada
   uno, y eso no está en ninguna otra parte de la app. */
.pfm-tab tfoot td {
  position: sticky; bottom: 0; z-index: 19;
  height: 44px; font-weight: 700;
  background: var(--pf-sup-50); border-top: 2px solid var(--pf-border);
  border-bottom: none;
}
.pfm-tab tfoot td.pfm-id1, .pfm-tab tfoot td.pfm-id2, .pfm-tab tfoot td.pfm-id3 { z-index: 20; }
.pfm-tab tfoot td.pfm-co { z-index: 20; color: var(--pf-accent-foreground); }

.pfm-nota {
  display: flex; align-items: center; gap: var(--pf-s-3);
  padding: 10px 20px; border-top: 1px solid var(--pf-sup-200);
  font-size: var(--pf-fs-xs); color: var(--pf-muted-foreground);
}
.pfm-nota svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; }
.pfm-nota__der { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ══ 6 · EL CIERRE ═════════════════════════════════════════════════════════
   Hoy «Armar pedidos» vive al final de la página, debajo de una tabla de 40
   filas. Aquí es una banda con el resumen y la única acción primaria. */

.pfm-cierre {
  display: flex; align-items: center; gap: var(--pf-s-4); flex-wrap: wrap;
  background: var(--pf-card); border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-md); padding: 9px 14px 9px 20px;
  box-shadow: var(--pf-sh-md);
}
.pfm-cierre__txt { font-size: var(--pf-fs-sm); font-variant-numeric: tabular-nums; }
.pfm-cierre__txt b { font-weight: 700; }
.pfm-cierre__txt .pfm-ahorro { color: var(--pf-accent-foreground); font-weight: 700; }
.pfm-cierre .ci-btn { margin-left: auto; }

/* EL PUNTO DE QUIEBRE ESTÁ MEDIDO, NO ELEGIDO: la fila de la placa necesita
   718px de ancho útil (300 + 150 + 170 de cifras, 96 de huecos y 2 de las
   rayas), y ese hueco útil se acaba cuando la ventana baja de 998px. Por eso
   apila en 1023 y no en los 899 que puse a ojo: entre 900 y 1000 la fila no
   cabía y se salía en silencio. */
@media (max-width: 1023px) {
  .pfm-placa__fila { flex-wrap: wrap; gap: var(--pf-s-4); }
  .pfm-hair { display: none; }
  .pfm-cel--der { margin-left: 0; text-align: left; }
  .pfm-zonas__id { width: auto; flex: 1; }
  .pfm-zonas__co { width: auto; }
}

/* En un teléfono la cifra grande no cabe en su renglón: baja un escalón de la
   escala tipográfica en vez de desbordar. */
@media (max-width: 479px) {
  .pfm-cifra { font-size: var(--pf-fs-xl); }
  .pfm-pct { margin-left: 8px; padding: 3px 8px; }
}

/* LOS FILTROS DEL MANDO. Forma de pastilla, no de botón: no ejecutan nada,
   solo dicen qué parte del archivo estás mirando. La activa toma el tinte de
   marca —no el verde lleno— porque compite en la misma fila con el único
   botón de verdad de la pantalla. */
.pfm-filtros { display: flex; gap: 4px; flex-wrap: wrap; }
.pfm-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--pf-sup-200); border-radius: var(--pf-r-sm);
  background: #FFFFFF; color: var(--pf-sup-600); font-family: inherit;
  font-size: var(--pf-fs-xs); font-weight: 600; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.pfm-filtro:hover:not(:disabled) { border-color: var(--pf-teal-200); color: var(--pf-text); }
.pfm-filtro:disabled { opacity: .5; cursor: default; }
.pfm-filtro__n {
  font-family: var(--pf-font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--pf-text);
}
/* El borde va en teal-600 y no en el 300 del tinte: sobre la página el 300
   daba 1.73 y el límite de un componente necesita 3. Con el 600 son 4.20. */
.pfm-filtro--on {
  background: var(--pf-teal-50); border-color: var(--pf-teal-600);     /* 4.20 */
  color: var(--pf-teal-700);                                           /* 6.60 */
}
.pfm-filtro--on .pfm-filtro__n { color: var(--pf-teal-700); }

/* En un teléfono los tres rótulos de zona se parten en tres renglones cada uno
   y ensucian más de lo que orientan: la tabla se entiende igual sin ellos. */
@media (max-width: 599px) {
  .pfm-zonas { display: none; }
}

/* ══ EL MODAL COMPARTIDO ════════════════════════════════════════════════════
   La lista de códigos que no existen se enseña en el modal de la Orden de
   Compra, que trae en el pie los botones de la orden —exportar, descargar,
   enviar— que aquí no pintan nada. Se apagan con una clase en el modal y no
   tocando los botones uno a uno: así el estado se deshace de golpe cuando la
   clase se quita, y una orden nunca puede heredar el pie de esta lista.
   (Se intentó al revés y dejó las órdenes sin «Descargar PDF».) */
#ocModal.pfm-modo-codigos .ci-modal-footer > *:not(#btnCerrarOcModal) { display: none; }

/* UH4.8b · LO QUE NO TIENE EXISTENCIAS NO COMPITE (mockup v10-agotados, pantalla 7).
   La celda de un proveedor en cero se ve apagada y tachada, con «agotado» debajo, y no puede ganar. Contrastes medidos:
   #646984 sobre blanco = 5.39 (medido). */
.pfm-agot { color: #646984; }
.pfm-agot s { color: #646984; text-decoration-thickness: 1px; }
.pfm-agot__rot { display: block; font-size: var(--pf-fs-xs); font-weight: 600; color: #646984; line-height: 1.2; }
.pfm-barra__ag { background: #d9a59d; }

/* UH4.8 — Leyenda de la barra de composición: un punto del color de su segmento, cantidad, nombre y porcentaje; mismo orden y
   mismos nombres que los filtros. Cada elemento crece según su segmento, para quedar bajo él. #c5c9d8 sobre #4A4E63 = 4.97. */
.pfm-leyenda { display: flex; flex-wrap: wrap; gap: 4px var(--pf-s-4); margin: 8px 0 0; padding: 0; list-style: none;
               font-size: var(--pf-fs-xs); color: #c5c9d8; font-variant-numeric: tabular-nums; }
.pfm-leyenda li { display: flex; align-items: baseline; gap: 6px; min-width: max-content; }
.pfm-leyenda i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; align-self: center; }
.pfm-leyenda b { color: #FFFFFF; font-weight: 700; }
.pfm-leyenda__pct::before { content: '· '; }
.pfm-leyenda__pct { color: #c5c9d8; }   /* pegado al nombre: lejos parecía del segmento vecino */