/* UH16.22 — EL MANDO: el formulario de Buscar Precios, en una sola fila.
 *
 * Archivo propio y NO `style.css`: esa hoja la comparten las doce vistas que
 * todavía conservan su aspecto viejo. Aquí solo vive el mando nuevo.
 *
 * Va DESPUÉS de style.css en el <head>, así que puede reajustar `.ci-mode-btn`
 * sin tocar su definición original: si algún día se revierte esta vista, basta
 * con quitar el enlace a este archivo.
 *
 * Fuente: el mockup BuscarV2-V5 (idénticos entre sí en este bloque).
 * Ni un color suelto: todo sale de los tokens del Epic 16.
 */

/* ── La fila ────────────────────────────────────────────────────────────────
   `flex-wrap` a propósito: por debajo de ~900px la fila no cabe y tiene que
   plegarse en vez de desbordar. El contrato del design system exige que la
   franja 780-899px se comporte, y ahí el segmentado pasa a su propio renglón. */
/* SIN TARJETA. En el mockup el mando es una fila suelta sobre el fondo de la
   app: sin relleno, sin borde, sin sombra. La primera version lo metio en una
   `.ci-card` blanca, y Gerardo lo cazo comparando con el mockup.

   Y el mockup tiene razon: la tarjeta blanca es la superficie donde se LEE un
   resultado. Aqui todavia no hay resultado, hay un control — envolverlo le daba
   el mismo peso visual que a la respuesta que viene despues.

   El `margin-bottom` SI hace falta: la tarjeta aportaba su propia separacion y
   al quitarla el mando quedaba pegado al primer resultado (medido: 0px). Son
   los 16px del ritmo de la app, equivalentes a los 14 del area de contenido del
   mockup. */
.pf-mando {
  display: flex;
  align-items: center;
  gap: var(--pf-s-3);
  flex-wrap: wrap;
  margin-bottom: var(--pf-s-4);
}

/* ── El segmentado ──────────────────────────────────────────────────────────
   Un control, no tres botones sueltos. La pestaña activa es BLANCA sobre el
   gris del carril y se eleva con una sombra: la elevación es la que dice cuál
   está activa, no un relleno oscuro. Así el activo no compite con el botón
   Buscar, que es la acción de verdad. */
.pf-segmentado {
  display: flex;
  background: var(--pf-sup-200);
  border-radius: var(--pf-r-sm);
  padding: 3px;
  gap: 0;
  flex: none;
}

/* Se reescribe `.ci-mode-btn` SOLO dentro del segmentado: el borde, el relleno
   oscuro del activo y el hover gris eran del diseño viejo. */
.pf-segmentado .ci-mode-btn {
  border: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  color: var(--ci-text-muted);
  transition: background var(--pf-t-fast), color var(--pf-t-fast), box-shadow var(--pf-t-fast);
}
.pf-segmentado .ci-mode-btn:hover:not(.active) {
  background: rgba(255, 255, 255, .55);
  color: var(--ci-text-main);
}
.pf-segmentado .ci-mode-btn.active {
  background: var(--pf-card);
  color: var(--ci-text-main);
  font-weight: 700;
  border-color: transparent;
  box-shadow: var(--pf-sh-xs);
}
.pf-segmentado .ci-mode-btn:focus-visible {
  outline: 2px solid var(--pf-ring);
  outline-offset: 1px;
}

/* ── El campo y su botón ──────────────────────────────────────────────────── */
.pf-mando-campos {
  display: flex;
  align-items: center;
  gap: var(--pf-s-2);
  flex: 1 1 auto;
  min-width: 0;
}

/* El campo lleva la lupa DENTRO. Es el contenedor quien dibuja el borde y el
   anillo de foco, no el <input>: así el icono queda dentro del recuadro y no
   al lado, que es lo que distingue un buscador de un campo de texto normal. */
.pf-buscador {
  display: flex;
  align-items: center;
  gap: var(--pf-s-2);
  box-sizing: border-box;
  width: 100%;
  max-width: 340px;
  height: 40px;
  padding: 0 var(--pf-s-3);
  background: var(--pf-card);
  border: 1.5px solid var(--pf-input);
  border-radius: var(--pf-r-sm);
  transition: border-color var(--pf-t-fast), box-shadow var(--pf-t-fast);
}
/* El anillo se dibuja cuando el foco está DENTRO del contenedor, porque quien
   se enfoca de verdad es el <input> que vive adentro. */
.pf-buscador:focus-within {
  border-color: var(--pf-primary);
  box-shadow: 0 0 0 3px rgba(0, 131, 111, .14);
}

.pf-buscador__ico {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: var(--pf-sup-500);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El input no dibuja nada: el marco lo pone el contenedor. */
.pf-buscador__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  height: 100%;
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-base);
  color: var(--ci-text-main);
  /* Los SKU son de 13 dígitos: con cifras de ancho fijo se leen y se comparan
     de un vistazo, y no bailan al teclear. */
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.pf-buscador__campo:focus { outline: none; }   /* el anillo lo pone el contenedor */
.pf-buscador__campo::placeholder { color: var(--pf-sup-500); letter-spacing: normal; }

/* ── La "x" que vacía el campo (UH16.23) ───────────────────────────────────
   NO está en el mockup: la pidió Gerardo. Se dibuja al estilo del resto para
   que no cante.

   Solo aparece con contenido: una "x" sobre un campo vacío no borra nada y
   suma ruido a un control que el mockup dejó deliberadamente limpio.

   Va DENTRO del recuadro, a la derecha, donde el mockup pone el cursor. */
.pf-buscador__limpiar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-right: -4px;          /* acerca la x al filo sin romper el relleno */
  padding: 0;
  border: 0;
  border-radius: var(--pf-r-pill);
  background: transparent;
  color: var(--pf-sup-500);
  cursor: pointer;
  transition: background var(--pf-t-fast), color var(--pf-t-fast);
}
.pf-buscador__limpiar[hidden],
.pf-buscador__limpiar.ci-hidden { display: none !important; }
.pf-buscador__limpiar svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round;
}
.pf-buscador__limpiar:hover { background: var(--pf-sup-200); color: var(--ci-text-main); }
.pf-buscador__limpiar:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 1px; }

/* En táctil la zona de toque sube a 44px SIN agrandar el dibujo: el recuadro
   mide 44 y la x se queda en 14, que es lo que pide el design system sin que
   el icono se coma el campo. */
@media (pointer: coarse) {
  .pf-buscador__limpiar { width: 44px; height: 44px; margin-right: -8px; }
}

.pf-mando-btn { height: 40px; flex: none; }

/* ── Pantalla angosta ───────────────────────────────────────────────────────
   EL PUNTO DE QUIEBRE ESTÁ MEDIDO, NO ELEGIDO A OJO. Bajando de 20 en 20px con
   la fila forzada a `nowrap`, el mando cabe entero hasta **700px** y solo
   desborda a 680. El campo se encoge de 340 a 223px por el camino, que sigue
   sobrando para un SKU de 13 dígitos.

   La primera versión lo partía en 899px: plegaba la fila DOSCIENTOS PÍXELES
   antes de hacer falta, y rompía en tablet la fila única que es la idea del
   mockup. La franja 780-899 —la que manda sobre este rediseño— entra holgada. */
@media (max-width: 699px) {
  .pf-segmentado { width: 100%; }
  .pf-segmentado .ci-mode-btn { flex: 1; text-align: center; }
  .pf-mando-campos { width: 100%; }
  .pf-buscador { max-width: none; }
}

/* En táctil, el propio design system pide 44×44 como mínimo. */
@media (pointer: coarse) {
  .pf-segmentado .ci-mode-btn { min-height: 44px; }
  .pf-buscador { height: 44px; }
  .pf-mando-btn { height: 44px; }
}

/* ═══════════════ UH18.3 · LA TARJETA DEL PRODUCTO ═══════════════
   La ficha y la placa dejan de ser dos tarjetas. Piel del mockup V5:
   transparente con filete de 2px, conservando la sombra.

   POR QUÉ NO SE USA EL TEAL DE MARCA AQUÍ: `--pf-teal-500` (#00a48b) da
   2.82:1 sobre el fondo de la página (#f0f2fc) y no llega al mínimo de 3:1
   que pide un elemento gráfico. Sobre claro se usa teal-600 (#00836F), que
   da 4.20:1. Es el mismo motivo por el que el teal no se usa en la barra
   lateral: el verde de marca no sirve sobre cualquier superficie. */
.pf-tarjeta-producto {
  background: transparent;
  border: 2px solid var(--pf-sup-700);
  border-radius: var(--pf-r-md);
  box-shadow: 0 8px 28px rgba(31, 38, 84, .14);
  margin-bottom: var(--pf-s-4);
}
.pf-tarjeta-producto .ci-product-row { border-bottom: 1px solid rgba(74, 78, 99, .16); }

.pf-placa { display: flex; align-items: stretch; gap: var(--pf-s-5); padding: 17px var(--pf-s-5) 18px; }
.pf-placa[hidden] { display: none; }
.pf-placa-filete { flex: none; width: 1px; background: rgba(74, 78, 99, .16); }

.pf-placa-bloque { flex: none; width: 214px; min-width: 0; }
.pf-placa-bloque--analisis { flex: 1; width: auto; }

.pf-placa-rotulo {
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pf-sup-700);
}
.pf-placa-sub {
  margin-left: var(--pf-s-2);
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-xs); font-weight: 500;
  letter-spacing: normal; text-transform: none;
  color: var(--pf-sup-600);
  font-variant-numeric: tabular-nums;
}
.pf-placa-cifra { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; }
.pf-placa-pie   { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px;
                  font-size: var(--pf-fs-sm); color: var(--pf-sup-700); }
.pf-placa-pie strong { font-weight: 700; }
.pf-placa-nulo  { font-family: var(--pf-font-ui); font-size: 1.375rem; font-weight: 700;
                  color: var(--pf-sup-600); line-height: 1.2; }

/* La cifra grande, con los centavos en menor tamaño.

   VA EN PLUS JAKARTA SANS, NO EN MONTSERRAT (decisión de Gerardo, 2026-09-04).
   OJO: el design system dice "Montserrat en logotipo, títulos y CIFRAS", así
   que esto es una excepción declarada, no un descuido. Si se confirma, hay que
   cambiarlo en la bóveda y en el panel, o la app tendrá dos familias para el
   mismo tipo de dato.
   Los rótulos SÍ siguen en Montserrat: son títulos, y ahí no cambia nada.

   Y baja de tamaño: 30 -> 26px la parte entera, 20 -> 17px el símbolo y los
   centavos. Jakarta tiene la caja más estrecha que Montserrat, así que a igual
   cuerpo se ve más pequeña; el recorte es sobre lo que YA se veía. */
.pf-cifra-sim { font-family: var(--pf-font-ui); font-size: 1.0625rem; font-weight: 600;
                color: var(--pf-sup-700); line-height: 1.55; }
.pf-cifra-ent { font-family: var(--pf-font-ui); font-size: 1.625rem; font-weight: 700;
                color: var(--pf-sup-700); letter-spacing: -.02em; line-height: 1.05;
                font-variant-numeric: tabular-nums; }
.pf-cifra-dec { font-family: var(--pf-font-ui); font-size: 1.0625rem; font-weight: 600;
                color: var(--pf-sup-700); line-height: 1.55; font-variant-numeric: tabular-nums; }

.pf-chip-stock, .pf-chip-precio {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--pf-s-05) var(--pf-s-2); border-radius: var(--pf-r-pill);
  background: rgba(74, 78, 99, .12); color: var(--pf-sup-700);
  font-size: var(--pf-fs-micro); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pf-chip-stock i { width: 5px; height: 5px; border-radius: var(--pf-r-pill); background: var(--pf-teal-600); }
.pf-chip-pct {
  align-self: center;
  padding: 3px 9px; border-radius: var(--pf-r-pill);
  background: rgba(0, 131, 111, .13); color: var(--pf-teal-700);
  font-family: var(--pf-font-ui); font-size: var(--pf-fs-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── LA BARRA ──────────────────────────────────────────────────────────
   Un solo eje de precio. Relleno = lo tuyo; contorno = lo que no puedes
   comprar. El hueco entre ambos ES el margen, dibujado a escala: no hay
   que leer el número para verlo.
   La distinción NO la carga el color: los dos grises quedan a un paso y
   relleno-contra-contorno se sigue leyendo sin él. */
.pf-barra {
  position: relative; height: 12px; margin-top: 13px;
  border-radius: var(--pf-r-pill); background: rgba(74, 78, 99, .13);
}
.pf-barra > span { position: absolute; top: 0; bottom: 0; }
.pf-barra-costo   { border-radius: var(--pf-r-pill); background: var(--pf-sup-700); }
.pf-barra-hueco   { top: 2px; bottom: 2px; background: var(--pf-teal-600); }
.pf-barra-mercado { box-sizing: border-box; border-radius: var(--pf-r-pill);
                    border: 2px solid var(--pf-sup-700); background: var(--pf-background); }
/* Cuando la competencia vende bajo tu costo los grupos se cruzan y la franja
   deja de ser margen: es pérdida. El rojo aquí sí significa lo de siempre. */
.pf-barra-hueco--perdida { background: var(--pf-red-600); }
.pf-barra-mejor {
  top: -3px; bottom: auto; width: 18px; height: 18px; margin-left: -1px;
  border-radius: var(--pf-r-pill); background: #FFFFFF;
  box-shadow: 0 0 0 3.5px var(--pf-sup-700);
}
.pf-barra-pies {
  position: relative; display: flex; justify-content: space-between;
  margin-top: 9px; font-size: var(--pf-fs-micro);
  color: var(--pf-sup-600); font-variant-numeric: tabular-nums;
}
.pf-barra-pies strong { color: var(--pf-sup-700); font-weight: 700; }
.pf-chip-margen {
  position: absolute; left: 50%; transform: translateX(-50%);
  padding: var(--pf-s-05) 9px; border-radius: var(--pf-r-pill);
  background: rgba(0, 131, 111, .13); color: var(--pf-teal-700); font-weight: 700;
}
.pf-chip-margen--perdida { background: #ffe2da; color: #b60100; }
/* Las demás referencias, cada una con SU margen. Enseñar solo la más barata
   escondía que el rango del mercado puede ser ancho: en Vitafusin va del 40.0%
   al 47.9%, y esos siete puntos son la banda de negociación. */
.pf-otras-refs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px;
}
.pf-otra-ref {
  padding: var(--pf-s-05) var(--pf-s-2); border-radius: var(--pf-r-pill);
  background: rgba(74, 78, 99, .10); color: var(--pf-sup-600);
  font-size: var(--pf-fs-micro); font-variant-numeric: tabular-nums;
}
.pf-otra-ref strong { color: var(--pf-sup-700); font-weight: 700; }

.pf-analisis-nulo {
  margin-top: 12px; font-size: var(--pf-fs-sm);
  color: var(--pf-sup-600); line-height: 1.45;
}

/* ── LA BANDA DEL MERCADO ──────────────────────────────────────────────
   Aparte de la tabla de costos, y el título lo dice: no le puedes comprar.
   Mezclarlas en una sola tabla es lo que hacía la app hasta el 3-sep. */
.pf-compare-sub { font-size: var(--pf-fs-sm); color: var(--pf-sup-600); }
.pf-compare-sub strong { color: var(--pf-sup-700); font-weight: 700; }
.pf-mercado-banda { border: 1px solid var(--pf-sup-200); }
.pf-mercado-nombre  { color: var(--pf-sup-700); font-weight: 600; }
.pf-mercado-precio  { font-weight: 700; color: var(--ci-text-main, #232736); font-variant-numeric: tabular-nums; }
.pf-mercado-nota    { font-size: var(--pf-fs-xs); color: var(--pf-sup-600); }
.pf-mercado-vacio   { padding: var(--pf-s-4) var(--pf-s-6); color: var(--pf-sup-600); }
.pf-margen-positivo { color: var(--pf-teal-700); font-size: var(--pf-fs-sm); font-weight: 600; }
.pf-margen-negativo { color: #b60100; font-size: var(--pf-fs-sm); font-weight: 600; }
.pf-mercado-bajo    { background: #fff1ed; }
.pf-mercado-bajo td:first-child { border-left: 3px solid var(--pf-red-600); }
.pf-tag-bajo {
  margin-left: 9px; padding: var(--pf-s-05) var(--pf-s-2);
  border-radius: var(--pf-r-pill); background: #ffe2da; color: #b60100;
  border: 1px solid #ffc8ba;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* La placa se apila cuando ya no caben tres columnas de verdad. Medido: los
   214+214 de los dos primeros bloques más los ~250 que necesita la barra para
   no volverse un adorno piden 780px de contenido. */
@media (max-width: 900px) {
  .pf-placa { flex-wrap: wrap; }
  .pf-placa-filete { display: none; }
  .pf-placa-bloque, .pf-placa-bloque--analisis { flex: 1 1 100%; width: auto; }
  .pf-placa-bloque:not(:first-child) { padding-top: var(--pf-s-4); border-top: 1px solid rgba(74,78,99,.16); }
}

/* ── EL PRECIO NO SE ESCONDE NUNCA ─────────────────────────────────────
   `style.css` oculta la columna 2 de .ci-tabla-comparacion en ≤768px y la 4
   en ≤480px. Con SEIS columnas eso escondía el "Precio unitario" y dejaba el
   "Precio total", que a cantidad 1 era el mismo número: no se perdía nada.

   UH18.3 quitó la columna "Precio total" de ESTA tabla, así que los índices se
   corrieron y esas mismas reglas dejaban la tabla sin NINGÚN precio en tablet
   y en móvil. Se veía PROVEEDOR · EXISTENCIAS · CARRITO. Lo cazó la captura,
   no las 57 comprobaciones de texto: todas seguían pasando.

   `style.css` no se toca (es el escaparate de las demos), así que se corrige
   aquí, que carga después, y SOLO para #priceTable: el modal de comparación
   masiva conserva sus seis columnas y sus reglas siguen siendo correctas.

   Lo que se sacrifica en su lugar es "Actualiz.", que es metadato: saber a
   cuánto y cuántas hay manda sobre saber de cuándo es el dato. */
@media (max-width: 768px) {
  #priceTable th:nth-child(2),
  #priceTable td:nth-child(2) { display: table-cell; }   /* Precio unitario, de vuelta */
  #priceTable th:nth-child(4),
  #priceTable td:nth-child(4) { display: none; }          /* Actualiz. */
}
@media (max-width: 480px) {
  #priceTable th:nth-child(3),
  #priceTable td:nth-child(3) { display: table-cell; }   /* Existencias, de vuelta */
  #priceTable th:nth-child(4),
  #priceTable td:nth-child(4) { display: none; }
}

/* ══════════════════ UH18.4 · LA TARJETA DE PRODUCTO ══════════════════════
   Diseño aprobado por Gerardo el 2026-09-05 sobre el mockup «C · la B en
   vertical». Tres cambios de fondo:

   1. LA PLACA ES OSCURA. Deja de ser una franja clara más y pasa a ser el
      bloque que responde: producto y tres cifras, nada más.
   2. LA REGLA SALE DE LA PLACA a banda propia. Dos de sus cotas son tus
      costos y dos del mercado: es el puente, y dentro de cualquiera de los
      dos bloques metería datos ajenos. Como su banda es BLANCA, la barra
      conserva los colores que ya tenía medidos y no se toca.
   3. VUELVE LA CANTIDAD, por fila, con su total al lado.

   TODO CONTRASTE DE ESTE BLOQUE ESTÁ MEDIDO sobre #353A4C, que es la
   superficie real donde va cada cosa.                                     */

.pf-placa {
  background: #353A4C; border-radius: var(--pf-r-md);
  padding: var(--pf-s-5); gap: 0;
  box-shadow: 0 8px 28px rgba(31, 38, 84, .14);
}
/* Los TRES bloques valen lo mismo: los tres contestan una pregunta y ninguno
   manda sobre los otros. Antes el tercero se comía el ancho sobrante porque
   llevaba dentro el dibujo, que ya no está aquí. */
.pf-placa .pf-placa-bloque { flex: 1 1 0; width: auto; padding: 0 var(--pf-s-5); }
.pf-placa .pf-placa-bloque:first-child { padding-left: 0; }
.pf-placa .pf-placa-bloque:last-child  { padding-right: 0; }
.pf-placa .pf-placa-filete { background: rgba(255, 255, 255, .13); }

.pf-placa .pf-placa-rotulo { color: #b6bacb; }               /* 5.84 sobre #353A4C */
.pf-placa .pf-placa-sub    { color: #b6bacb; }
.pf-placa .pf-placa-pie    { color: #b6bacb; }
.pf-placa .pf-placa-pie strong { color: #f0f2fc; }           /* 10.11 */
.pf-placa .pf-placa-nulo   { color: #b6bacb; }
.pf-placa .pf-cifra-sim,
.pf-placa .pf-cifra-ent,
.pf-placa .pf-cifra-dec    { color: #FFFFFF; }               /* 11.28 */

/* El margen, tercera cifra de la placa. Va en el teal CLARO: el de marca
   (#00a48b) se queda en 3.59 sobre esta superficie y a este cuerpo hace
   falta más. #12BFA2 da 4.84 y es el mismo verde un escalón arriba. */
.pf-placa .pf-placa-margen {
  font-family: var(--pf-font-ui); font-size: 1.625rem; font-weight: 700;
  color: #12BFA2; letter-spacing: -.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
/* Cuando la competencia vende por debajo del costo, el rojo significa lo que
   significa en el resto de la app. Sobre oscuro sube a rojo-400. */
.pf-placa .pf-placa-perdida {
  font-family: var(--pf-font-ui); font-size: 1.625rem; font-weight: 700;
  color: #ff7d5e; letter-spacing: -.02em; line-height: 1.05;      /* 5.31 */
  font-variant-numeric: tabular-nums;
}

/* Los chips de la placa, sobre oscuro. */
.pf-placa .pf-chip-stock,
.pf-placa .pf-chip-precio { background: rgba(255, 255, 255, .11); color: #f0f2fc; }
.pf-placa .pf-chip-stock i { background: #12BFA2; }
/* La píldora del ahorro: tinta OSCURA sobre el teal. Al revés —blanco sobre
   teal— daba 2.98 y a 13px hace falta 4.5. Así da 6.36 y la píldora sigue
   siendo la mancha luminosa de la placa. */
.pf-placa .pf-chip-pct { background: #12BFA2; color: #232736; }   /* 6.36 */

/* ── LA REGLA, en banda propia ──────────────────────────────────────────
   Tarjeta blanca como las dos tablas, así que la barra y sus pies conservan
   los colores que ya tenían medidos para fondo claro. */
.pf-regla-banda { margin-top: var(--pf-s-4); }
.pf-regla-cuerpo { padding: 0 var(--pf-s-5) var(--pf-s-5); }
.pf-regla-cuerpo .pf-barra { margin-top: 0; }
.pf-regla-banda .ci-compare-header { padding-bottom: var(--pf-s-3); }

/* El icono de la cabecera de sección, del mismo trazo que el resto. */
.pf-sec-ico { width: 17px; height: 17px; color: var(--pf-icon); align-self: center; }

/* ── LA CANTIDAD Y EL TOTAL, por fila ───────────────────────────────────
   La casilla es la MISMA que el modal de comparación por sustancia
   (.ci-input + .ci-input-qty): no se reinventa un control que ya existe. */
.ci-tabla-comparacion .ci-input-qty { width: 80px; }
/* El total apagado mientras la cantidad sea cero: la columna existe sin
   gritar once veces lo mismo antes de que nadie haya pedido nada. */
.ci-total-cero { font-weight: 400; color: var(--pf-icon); }       /* 4.23 */

/* ── LOS ANCHOS DE COLUMNA ──────────────────────────────────────────────
   Fijados por Gerardo el 2026-09-05. En CSS y no en <colgroup> a propósito.
   Las dos tablas tienen anchos PROPIOS: la de mercado tiene menos columnas y
   textos mucho más cortos, y heredando los de arriba le sobraba más de la
   mitad del ancho. */
.ci-tabla-comparacion th:nth-child(1) { width: 26.5%; }
.ci-tabla-comparacion th:nth-child(2) { width: 11.5%; }
.ci-tabla-comparacion th:nth-child(3) { width: 12%; }
.ci-tabla-comparacion th:nth-child(4) { width: 14%; }
.ci-tabla-comparacion th:nth-child(5) { width: 12%; }
.ci-tabla-comparacion th:nth-child(6) { width: 12%; }
.ci-tabla-comparacion th:nth-child(7) { width: 12%; }

.pf-tabla-mercado th:nth-child(1) { width: 34%; }
.pf-tabla-mercado th:nth-child(2) { width: 22%; }
.pf-tabla-mercado th:nth-child(3) { width: 21%; }
.pf-tabla-mercado th:nth-child(4) { width: 23%; }

/* ── LA FICHA DEL PRODUCTO, en rejilla ──────────────────────────────────
   Con la presentación y la base fiscal son DIEZ campos, y en una fila que se
   reparte sola los tres últimos caían a una segunda línea con un hueco enorme
   al lado. Es el fallo que ya costó rehacer esta tarjeta una vez.
   Siete columnas iguales y dos filas exactas: identidad arriba —SKU, nombre y
   sustancia—, ficha abajo. No queda ninguna celda suelta porque no hay ninguna
   posición sin contenido. */
.pf-tarjeta-producto .ci-product-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--pf-s-4) var(--pf-s-5);
  align-items: start;
}
.pf-tarjeta-producto .ci-pf-sku       { grid-column: span 2; }
.pf-tarjeta-producto .ci-pf-nombre    { grid-column: span 2; }
.pf-tarjeta-producto .ci-pf-sustancia { grid-column: span 3; }
.pf-tarjeta-producto .ci-pf-estado    { grid-column: 1 / -1; }

/* La tabla del mercado reparte por sus anchos y no por su contenido; sin esto
   los porcentajes de arriba no mandan nada. */
.pf-tabla-mercado { table-layout: fixed; }
.pf-tabla-mercado td:nth-child(2) { text-align: right; }
.pf-tabla-mercado td:nth-child(3),
.pf-tabla-mercado td:nth-child(4) { text-align: center; }

@media (max-width: 1100px) {
  /* Por debajo de este ancho siete columnas dejan celdas de menos de 130px y
     «Solución Inyectable» ya no cabe en una línea. Cuatro sí. */
  .pf-tarjeta-producto .ci-product-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-tarjeta-producto .ci-pf-sustancia { grid-column: span 4; }
  .pf-tarjeta-producto .ci-pf-estado    { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   UH18.6 · LA LISTA DE RESULTADOS SE VISTE COMO LA TARJETA

   «Por sustancia» y «Por nombre» comparten esta lista, y hasta ahora era una
   tarjeta del sistema viejo: título repetido, un párrafo explicando cómo
   funciona la pantalla, y una tabla con la cabecera de `style.css`. Al lado de
   la tarjeta de producto —que ya está en el sistema nuevo— se veían como dos
   aplicaciones distintas.

   Aquí solo cambia LA ROPA. Lo que la lista dice —qué productos, qué columnas,
   qué grupos de equivalencia, qué «más barato»— no se toca: eso es el paso 3
   del frente, y el chip del «más barato» además tiene una decisión de Gerardo
   pendiente (A-septies #1).

   POR QUÉ NO REUSA `.pft-tab` TAL CUAL, que sería lo natural: esa clase está
   escrita para las dos tablas de la tarjeta, que son de ancho FIJO y con las
   cifras a la derecha. Esta lista es de ocho columnas de texto, de ancho
   automático y alineadas a la izquierda: heredarla obligaba a desmontar media
   clase con `!important`. Se toman sus VALORES —los mismos hex, los mismos
   pesos— y no su maquetación.
   ══════════════════════════════════════════════════════════════════════════ */

/* La cabecera de columna de la tarjeta: más pequeña, más espaciada y sobre el
   gris más claro de la escala, en vez del gris medio y el filete de 2px. */
#sustanciaResults .pfl-tab th {
  background: #F6F7FD;
  border-top: 1px solid #E8EAF5;
  border-bottom: 1px solid #E8EAF5;
  padding: 9px var(--pf-s-3);
  font-size: 11px;
  letter-spacing: .09em;
  color: #646984;                                                  /* 5.39 */
}

/* Filas de la misma altura y con el mismo filete tenue que las de la tarjeta.
   `height` en una celda es un mínimo, así que las filas de dos líneas —nombre
   y SKU— siguen creciendo lo que necesiten. */
#sustanciaResults .pfl-tab td {
  height: 44px;
  border-bottom: 1px solid #F0F1F8;
  color: #4A4E63;                                                  /* 8.20 */
}
#sustanciaResults .pfl-tab tr:last-child td { border-bottom: none; }

/* El paginador vivía suelto bajo la tarjeta vieja; ahora es el pie de esta
   tarjeta y toma el mismo relleno que la nota al pie de las tablas. */
.pfl-pager { padding: 12px var(--pf-s-5) 14px; margin-top: 0; }

/* ── LA TARJETA INCRUSTADA, sobre la lista ──────────────────────────────
   Los 16px de la regla §5.ter del design system: el hueco lo pone el que va
   ENCIMA, no la lista, para que la lista no tenga que saber si hay una tarjeta
   arriba o no. */
#sustanciaTarjeta:not(.ci-hidden) { margin-bottom: var(--pf-s-4); }