/* ══════════════════════════════════════════════════════════════════════════ UH18.5 · LA TARJETA DE PRODUCTO, CONSTRUIDA DESDE EL MOCKUP Esto NO adapta lo que había: es el CSS del mockup aprobado —«C · la B en vertical», lienzo «Tarjeta de Producto», 2026-09-05— con los nombres cambiados a `pft-` y nada más. Los contrastes vienen medidos de ahí, sobre la superficie real donde va cada cosa. UH18.4 hizo lo contrario: repintar los componentes de UH18.3. El resultado no se parecía al diseño —la ficha fuera de la placa y centrada, la cifra partida en tres trozos, los pies como chips, la regla sin sus cuatro cotas nombradas y sin la columna de ganancia— y por eso se rehace entera. ══════════════════════════════════════════════════════════════════════════ */ .B { width: 1180px; box-sizing: border-box; padding: 24px; background: #f0f2fc; font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; color: #4A4E63; -webkit-font-smoothing: antialiased; } .B * { box-sizing: border-box; } .pft-num { font-variant-numeric: tabular-nums; } .pft-ico { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .pft-hair { height: 1px; background: rgba(255,255,255,.18); margin: 18px 0; } .pft-sku { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; background: rgba(255,255,255,.09); color: #DEE1F0; /* 11.40 sobre #232736 */ font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .pft-ib { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: rgba(255,255,255,.09); color: #c5c9d8; } .pft-nom2 { margin: 12px 0 0; font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; color: #FFFFFF; line-height: 1.25; } .pft-sus { margin-top: 7px; font-size: 12px; line-height: 1.5; color: #c5c9d8; } .pft-micro { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #c5c9d8; } .pft-cifra { font-family: 'Montserrat', sans-serif; font-size: 30px; font-weight: 700; color: #FFFFFF; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .pft-pie { margin-top: 11px; font-size: 13px; color: #c5c9d8; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .pft-pie b { color: #f0f2fc; font-weight: 700; font-size: 14px; } .pft-sep { color: #747A96; } .pft-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(95,217,193,.16); color: #5FD9C1; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .pft-card { background: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(31,38,84,.05), 0 2px 6px rgba(31,38,84,.05); } .pft-card--mkt { background: #f0f2fc; border: none; box-shadow: inset 0 0 0 1px #DEE1F0; } .pft-cab { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px 14px; } .pft-tit { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: #232736; } .pft-sub { font-size: 13px; color: #646984; } .pft-tab { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .pft-tab th { padding: 9px 14px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #646984; text-align: right; border-top: 1px solid #E8EAF5; border-bottom: 1px solid #E8EAF5; background: #F6F7FD; } .pft-tab th.l { text-align: left; padding-left: 20px; } .pft-tab th.r { padding-right: 20px; } .pft-tab td { padding: 0 14px; height: 44px; text-align: right; color: #4A4E63; border-bottom: 1px solid #F0F1F8; } .pft-tab td.l { text-align: left; padding-left: 20px; } .pft-tab td.r { padding-right: 20px; } .pft-tab tr:last-child td { border-bottom: none; } .pft-precio { font-weight: 700; color: #232736; } .pft-fecha { color: #646984; font-size: 13px; } .pft-gana td { background: #e4f5f0; } .pft-gana td.l { box-shadow: inset 3px 0 0 #00836F; } /* El chip del ganador, en el teal de marca por decisión de Gerardo. */ .pft-badge { display: inline-flex; align-items: center; white-space: nowrap; height: 20px; padding: 0 8px; border-radius: 999px; background: #00a48b; color: #FFFFFF; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .pft-mkt th { background: #E8EAF5; border-color: #DEE1F0; color: #646984; } .pft-mkt td { border-bottom-color: #DEE1F0; } .pft-av { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: #fff2df; color: #735400; font-size: 12px; font-weight: 600; } .pft-placa { background: #232736; border-radius: 10px; padding: 24px 26px; box-shadow: 0 8px 28px rgba(31,38,84,.14); } .pft-nom { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 700; color: #FFFFFF; letter-spacing: -.01em; } .pft-ficha .k { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #c5c9d8; } .pft-ficha .v { font-size: 13px; font-weight: 600; color: #f0f2fc; margin-top: 3px; } .pft-dec { display: flex; align-items: stretch; } .pft-cel { flex: 1 1 0; padding: 0 26px; } .pft-cel:first-child { padding-left: 0; } .pft-cel:last-child { padding-right: 0; } .pft-cel + .pft-cel { border-left: 1px solid rgba(255,255,255,.18); } .pft-placa { background: #4A4E63; border-radius: 10px; padding: 24px 26px; box-shadow: 0 8px 28px rgba(31,38,84,.14); } .pft-nom { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 700; color: #FFFFFF; letter-spacing: -.01em; } .pft-ficha .k { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #c5c9d8; } .pft-ficha .v { font-size: 13px; font-weight: 600; color: #f0f2fc; margin-top: 3px; } .pft-dec { display: flex; align-items: stretch; } .pft-cel { flex: 1 1 0; padding: 0 26px; } .pft-cel:first-child { padding-left: 0; } .pft-cel:last-child { padding-right: 0; } .pft-cel + .pft-cel { border-left: 1px solid rgba(255,255,255,.18); } .pft-num { font-variant-numeric: tabular-nums; } .pft-regla { background: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(31,38,84,.05), 0 2px 6px rgba(31,38,84,.05); } .pft-regla-cab { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px 12px; } .pft-regla-tit { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: #232736; } .pft-regla-sub { font-size: 13px; color: #646984; } .pft-barra { position: relative; height: 10px; border-radius: 999px; background: #E8EAF5; } /* El relleno, en el TEAL DE MARCA puro. Ver el bloque de override al final del archivo: es decisión de Gerardo y lo que se revisa es la regla. */ .pft-costos { position: absolute; left: 0; top: 0; height: 10px; border-radius: 999px; background: #00a48b; } .pft-mercado { position: absolute; top: 0; height: 10px; border-radius: 999px; border: 2px solid #747A96; background: #FFFFFF; } .pft-nodo { position: absolute; top: -4px; left: 0; width: 18px; height: 18px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 3px #00836F; } .pft-cota { position: absolute; top: 0; width: 1px; height: 8px; background: #747A96; } .pft-rot { position: relative; margin-top: 4px; height: 34px; font-size: 12px; color: #646984; } .pft-rot span { position: absolute; } .pft-rot b { color: #4A4E63; font-weight: 700; } .pft-card--costo .pft-cab { padding: 18px 20px 16px; gap: 10px; } .pft-card--costo .pft-sub { line-height: 1.3; } .pft-card--costo tbody td { height: 52px; } .pft-card--costo th.qty, .pft-card--costo td.qty { text-align: center; padding-left: 14px; padding-right: 14px; } .pft-card--costo th.buy { text-align: right; padding-right: 29px; } .pft-card--costo td.buy { text-align: right; padding-right: 20px; } .pft-card--costo .pft-badge { height: 22px; font-size: 11px; } .pft-card--costo tr.pft-gana td { border-bottom-color: #DEE1F0; } .pft-card--costo tbody tr:hover:not(.pft-gana) td { background: #f0f2fc; } .pft-card--costo td.pft-total--cero { color: #646984; } .pft-card--costo td.pft-nd { color: #646984; } .pft-card--costo .pft-nota { padding: 14px 20px 16px; line-height: 1.6; } /* UH3.18 — quién ya no publica este producto: no compite, solo se informa. #4A4E63 sobre blanco = 7.35:1 */ .pft-card--costo .pft-nota-retirados { border-top: 1px solid #DEE1F0; color: #4A4E63; } .pft-nota-retirados .pft-ico { vertical-align: -2px; margin-right: 4px; } /* UH18.6 — Estos anchos son de LA TABLA DE COSTOS, y ahora lo dicen. Iban escritos como «cualquier tabla que no sea la de mercado», que mientras hubo dos tablas era lo mismo; al entrar la lista de resultados con sus ocho columnas de texto, dejó de serlo. */ /* UH18.7 — LA TABLA DE COSTOS CABE EN SU TARJETA. Estos anchos sumaban 1,070px FIJOS. Con la barra lateral abierta la tarjeta mide casi siempre menos, y «Total» y el botón del carrito quedaban fuera de vista tras un desplazamiento lateral (medido el 2026-10-09: 70px a 1280 de pantalla, 154 a 1024, 398 a 780). Justo lo que se necesita para comprar. Ahora la columna del PROVEEDOR no lleva ancho: toma lo que sobra. Las demás conservan el suyo. Y cuando la tarjeta es angosta (consulta de CONTENEDOR, no de pantalla: el ancho útil depende de si la barra lateral está abierta) pasan a una versión compacta. Ver el bloque de UH18.7 al final del archivo. */ .pft-card--costo .pft-tab th:nth-child(2) { width: 110px; } .pft-card--costo .pft-tab th:nth-child(3) { width: 120px; } .pft-card--costo .pft-tab th:nth-child(4) { width: 140px; } .pft-card--costo .pft-tab th:nth-child(5) { width: 110px; } .pft-card--costo .pft-tab th:nth-child(6) { width: 110px; } .pft-card--costo .pft-tab th:nth-child(7) { width: 100px; } /* UH18.7 — La referencia toma lo que sobra; las demás conservan su ancho. */ .pft-tab.pft-mkt th:nth-child(2) { width: 170px; } .pft-tab.pft-mkt th:nth-child(3) { width: 150px; } .pft-tab.pft-mkt th:nth-child(4) { width: 160px; } .pft-tab.pft-mkt th:nth-child(5) { width: 150px; } /* ── Lo que en el mockup iba en estilos EN LÍNEA ──────────────────────────── En una maqueta de una sola pantalla eso vale; en la app no, porque estos estados dependen de los datos y aparecen o no según el producto. Aquí tienen nombre. Los contrastes son los mismos de arriba, sobre su superficie real. */ /* La etiqueta del corchete del margen: va CENTRADA sobre su tramo, cortando la línea, con el fondo de la tarjeta detrás para que la línea no la atraviese. */ .pft-corchete-etq { position: absolute; bottom: 3px; transform: translateX(-50%); padding: 0 12px; white-space: nowrap; background: #FFFFFF; font-size: 12px; font-weight: 700; color: #00a48b; } /* «Sin comparación», «Sin ventaja», «Sin comparar». No son un cero: son la ausencia de una comparación, y por eso no se escriben como cifra. */ .pft-nulo { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 22px; font-weight: 700; color: #c5c9d8; line-height: 1.2; } /* 5.84 */ .pft-nulo-claro { font-size: 13px; color: #646984; padding: 6px 0 2px; } /* 5.39 */ /* El margen, y su versión en pérdida. Sobre la placa oscura el teal de marca se queda en 3.59 y hace falta más, así que sube un escalón; el rojo hace lo mismo, de #cc0000 (2.52) a rojo-400. */ .pft-margen { color: #5FD9C1; } /* 4.84 */ .pft-perdida { color: #ffb3a0; } /* 5.31 */ /* En la tabla, sobre blanco, el rojo puede ser el de siempre. */ .pft-perdida-txt { color: #b60100; font-weight: 700; } /* 6.37 */ /* La referencia que vende por debajo de tu costo. Es la alerta más accionable de la app y hasta UH18.1 iba disfrazada de «mejor precio». */ .pft-bajo td { background: #fff1ed; } .pft-bajo td:first-child { box-shadow: inset 3px 0 0 #b60100; } .pft-tag-bajo { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 9px; border-radius: 999px; background: #ffe4dc; color: #b60100; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; /* 6.37 */ } /* El segundo precio, cuando difiere del de factura. Es dato, no advertencia. */ .pft-nota-iva { margin-top: 3px; font-size: 12px; font-weight: 400; color: #646984; } /* 5.39 */ .pft-nota-duda { color: #735400; } /* 6.35 sobre blanco */ /* «sin dato» no es lo mismo que cero unidades, y por eso no se escribe igual. */ .pft-nd { color: #747A96; } /* 4.23 */ /* El total de la fila, apagado mientras la cantidad sea cero: la columna existe sin gritar once veces lo mismo antes de que nadie haya pedido nada. */ .pft-tab td.pft-total { text-align: right; font-weight: 700; color: #232736; font-variant-numeric: tabular-nums; } /* 14.84 */ .pft-tab td.pft-total--cero { font-weight: 400; color: #747A96; } /* 4.23 */ /* ── LA FICHA, en una sola fila ───────────────────────────────────────── Diez campos con la misma anatomía —rótulo arriba, valor abajo, centrados— incluidos el SKU, el nombre y la sustancia. Decisión de Gerardo del 2026-09-05: antes esos tres iban aparte en un titular, y la ficha se leía como dos bloques con jerarquías distintas en vez de una línea. NO son columnas iguales: cada campo toma el ancho de su contenido y el aire sobrante se reparte entre ellos. Con diez columnas de igual medida tocarían a 113px y «Solución Inyectable» no cabe en una línea; así el que necesita más lo toma del que necesita menos. */ .pft-ficha { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; } .pft-campo { min-width: 0; text-align: center; } .pft-campo .k { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #c5c9d8; white-space: nowrap; /* 5.84 sobre la placa */ } .pft-campo .v { margin-top: 5px; font-size: 14px; font-weight: 600; color: #f0f2fc; line-height: 1.35; /* 10.11 */ } /* Los dos campos largos —nombre y sustancia— se parten en dos líneas dentro de su propio ancho. Sin este tope, «Ketorolaco 10 Mg/ Tramadol 25 Mg» se lleva el sitio de tres campos y empuja a «Base fiscal» a una segunda fila, sola. */ .pft-campo--nombre { max-width: 132px; } .pft-campo--sustancia { max-width: 172px; } /* Los tres largos pueden partirse; los cortos no, para que su rótulo y su valor no se separen nunca en dos líneas distintas. */ .pft-campo--nombre .v, .pft-campo--sustancia .v { text-wrap: pretty; } .pft-campo--sku .v { margin-top: 3px; } .pft-campo--sku, .pft-campo--nombre, .pft-campo--sustancia { text-align: center; } @media (max-width: 1100px) { /* Apretados, los diez no caben en una línea; se reparten en varias sin dejar ningún campo suelto, porque el reparto lo decide el contenido. */ .pft-ficha { justify-content: flex-start; gap: 14px 26px; } } /* ── Las acciones, junto al botón de buscar ───────────────────────────── Sobre fondo CLARO, así que los iconos cambian de tinta: dentro de la placa iban en #c5c9d8 sobre oscuro, y aquí eso daría 1.4 sobre el fondo de la app. El botón mide 34px, igual que los de la tabla. */ .pf-mando-acciones { display: flex; align-items: center; gap: 6px; } .pf-mando-acciones:empty { display: none; } .pft-ib--claro:hover { border-color: #747A96; color: #00614F; } /* 4.23 · 7.44 */ /* ── LA SEPARACIÓN ENTRE SECCIONES ────────────────────────────────────── Las cuatro tarjetas iban PEGADAS: medido, 0px entre placa y regla, entre regla y «Tu costo», y entre «Tu costo» y el mercado. El único hueco era el de 16px que el buscador deja sobre la placa, y por eso se leía como una sola masa en vez de cuatro bloques. El hueco se pone aquí, en el contenedor, y no como margen de cada tarjeta: así ninguna necesita saber quién va antes ni después, y añadir una sección nueva no obliga a acordarse de darle su margen. */ /* UH18.6 — Va en una CLASE y no en el identificador de la pantalla de SKU: la misma tarjeta se dibuja ahora también dentro de la lista de resultados, y la separación entre sus bloques es de la tarjeta, no del sitio donde cae. */ .pft-lienzo { display: flex; flex-direction: column; gap: var(--pf-s-4); } /* ── LA BARRA DE LA TARJETA, y su estado plegado (UH18.6) ──────────────── Blanca como las demás tarjetas, más baja, y con el nombre en el mismo Montserrat de los títulos de sección. Al plegar se esconde TODO menos ella: por eso el estado plegado no necesita marcado propio. */ .pft-top { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s-3); background: #FFFFFF; border-radius: 10px; padding: 10px 12px 10px 20px; box-shadow: 0 1px 2px rgba(31,38,84,.05), 0 2px 6px rgba(31,38,84,.05); /* Los botones BAJAN a su propia línea cuando el nombre no cabe, en vez de montarse encima del SKU. Medido a 390px con un nombre de tres palabras: los cuatro botones tapaban el código entero. La condición la pone el CONTENIDO, no un ancho de pantalla elegido a ojo: con `flex-wrap` y un mínimo de 320px para el nombre, envuelve cuando ese producto concreto lo necesita. Un punto de quiebre fijo acertaría con «CORIVER» y fallaría con «*HS* PARACETAMOL SOL GTS 15ML *BQI*». */ flex-wrap: wrap; } .pft-top__nom { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 320px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: #232736; line-height: 1.3; /* 14.84 */ } .pft-top__sku { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #646984; } /* 5.39 */ .pft-top__acc { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; } .pft-plegado > *:not(.pft-top) { display: none; } /* ══════════════════════════════════════════════════════════════════════════ EL FONDO DE LA PLACA = EL DE LA BARRA LATERAL (Gerardo, 2026-09-05) #4A4E63, el mismo gris de la barra. El razonamiento del cliente: si un color se lee sobre la barra lateral, se lee sobre la placa. Es cierto, y por eso este bloque OVERRIDE al design system para el caso de la tarjeta: la placa deja de usar superficie-900 y pasa a superficie-700. PERO EL FONDO SUBE UN ESCALÓN DE CLARIDAD, así que tres colores que cumplían sobre #353A4C dejan de cumplir sobre #4A4E63 y suben con él. Medido, no estimado: rótulos y pies #b6bacb 4.25 -> #c5c9d8 4.97 (texto de 11-13px) el acento #12BFA2 3.51 -> #5FD9C1 4.76 (menta, la MISMA que la barra lateral usa como acento sobre este gris) la pérdida #ff7d5e 3.26 -> #ffb3a0 4.77 Lo que NO cambia porque ya cumplía: blanco 8.20 · #f0f2fc 7.35 · la píldora con tinta #232736 sobre menta 8.61. Y el teal de marca #00a48b queda FUERA de la placa: da 2.61 sobre este gris. Es exactamente la regla que ya rige en la barra lateral y por la que allí el acento es menta y no verde. No es una excepción nueva: es la misma. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · El chip del ahorro, con su aire ──────────────────────────────── Iba pegado a la cifra. Toma la misma separación que los datos de la línea de apoyo justo debajo, que van con 7px entre sí. */ .pft-cifra + .pft-pill, .pft-pill { margin-left: 7px; } /* ── 4 · La etiqueta del margen sobre la regla ────────────────────────── Sube de 12 a 14px —el escalón siguiente de la escala— y toma la tinta de las cifras que tiene justo debajo, para que se lean como lo que son: el mismo tipo de dato. */ .pft-corchete-etq { font-size: 14px; color: #4A4E63; } /* 8.20 sobre blanco */ /* ══════════════════════════════════════════════════════════════════════════ EL TEAL DE MARCA EN LA TARJETA · OVERRIDE DEL DESIGN SYSTEM Decisión de Gerardo, 2026-09-05 y reafirmada el 2026-09-06. El chip «Mejor precio», el relleno de la barra, el corchete del margen y los botones van en #00a48b, el teal de marca puro. El design system lo reserva para superficies donde alcanza el contraste y aquí no siempre lo alcanza —2.62 contra el carril de la barra, 3.14 con texto blanco encima—, pero la decisión es NO tocar la pantalla y revisar la regla. Queda anotado aquí para esa revisión, no como un descuido. ══════════════════════════════════════════════════════════════════════════ */ .pft-nodo { box-shadow: 0 0 0 3px #00a48b; } /* ══════════════════════════════════════════════════════════════════════════ REGLA · LOS BOTONES DE LA TARJETA (Gerardo, 2026-09-06) COLOR · #00a48b en reposo, #4A4E63 al pasar el ratón, contenido siempre en claro al mejor contraste posible. Medido: el blanco puro es el mejor claro en los dos —3.14 sobre el teal y 8.20 sobre el gris—, así que el contenido no cambia entre estados; lo que cambia es el fondo. ACABADO · del proyecto B2B: sombra TEÑIDA del propio color del botón —no una sombra gris genérica—, borde de 1.5px, peso 600 y transición de 0.18s que afecta también al color. Sin gradiente, por decisión de Gerardo. TAMAÑO · también como en el B2B: lo da el RELLENO, no un alto fijo. Antes eran 34x34 clavados, lo que obligaba a que el icono encajara en el hueco que quedara; ahora el botón crece con lo que lleve dentro y el mismo estilo sirve para uno de solo icono y para uno con texto. El radio va en proporción: 8px sobre un botón de ~35px es la misma relación que 16px sobre uno de 70. ══════════════════════════════════════════════════════════════════════════ */ .pft-btn, .pft-btn--p, .pft-ib--claro { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; box-sizing: border-box; cursor: pointer; border: 1.5px solid transparent; border-radius: 8px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 600; font-size: 12px; line-height: 1.4; white-space: nowrap; text-decoration: none; background: #00a48b; color: #FFFFFF; /* 3.14 */ box-shadow: 0 2px 8px rgba(0, 164, 139, .30); transition: all .18s ease; } /* Con texto, el relleno se ensancha a los lados; el alto lo sigue dando el mismo relleno vertical, así que los dos tipos de botón casan en una fila. */ .pft-btn--txt { padding: 8px 14px; } .pft-btn:hover, .pft-btn--p:hover, .pft-ib--claro:hover { background: #4A4E63; color: #FFFFFF; /* 8.20 */ box-shadow: 0 2px 8px rgba(74, 78, 99, .30); } .pft-btn:active, .pft-btn--p:active, .pft-ib--claro:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(74, 78, 99, .30); } .pft-btn:focus-visible, .pft-btn--p:focus-visible, .pft-ib--claro:focus-visible { outline: 2px solid #4A4E63; outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════════════ LAS TABLAS SE DESPLAZAN EN VEZ DE CORTARSE (medido el 2026-09-06) Sus columnas tienen ancho FIJO —1,070px la de costos y 1,132 la de mercado— y la tarjeta vive en un contenedor que se estrecha con la ventana. La tarjeta lleva `overflow: hidden` para redondear sus esquinas, así que lo que no cabía NO SE PODÍA VER DE NINGUNA MANERA: se cortaba y ya. Medido a siete anchos, y no era un problema de teléfono: **a 1280px —una laptop normal— se perdían 70px, que es justo la columna «Comprar»**. A 900px se perdían 278 y a 390, 704. Venía de UH18.5 y estaba en producción; salió al medir la tarjeta dentro de la lista, donde el hueco es el mismo. El arreglo va aquí, en la tarjeta, así que corrige las DOS pantallas a la vez. ══════════════════════════════════════════════════════════════════════════ */ .pft-scroll { overflow-x: auto; } /* ═══════════════════════════════════════════════════════════════════════════ UH18.7 · LA TABLA DE COSTOS, SIN DESPLAZAMIENTO LATERAL El problema y la medida están arriba, junto a los anchos de las columnas. Aquí va el resto: la tarjeta pasa a ser un CONTENEDOR y la tabla se compacta cuando ella —no la pantalla— se queda corta. EL UMBRAL SE CALCULÓ, NO SE ELIGIÓ. Con los anchos cómodos (110+120+140+110+ 110+100 = 690px) más 290px que necesita el nombre del proveedor con su insignia de «Mejor precio» en una sola línea, la tabla pide 980px. Por debajo de eso se compacta. En el modo cotizar la columna del botón crece (150px): el proveedor cede 50px y, si no cabe, baja a dos líneas; el umbral es el mismo para los dos modos. La versión compacta (paddings de 8px, cantidad de 78px, proveedor que puede partirse en dos líneas con su insignia debajo) cabe desde unos 640px de tarjeta. Por debajo de eso —un teléfono— la tabla sí se desplaza: la vista móvil de la tarjeta es otra decisión. ═══════════════════════════════════════════════════════════════════════════ */ .pft-card--costo { container: pft-costo / inline-size; } .pft-card--costo .pft-tab { min-width: 640px; } @container pft-costo (width < 980px) { .pft-card--costo .pft-tab th, .pft-card--costo .pft-tab td { padding-left: 8px; padding-right: 8px; } .pft-card--costo .pft-tab th.l, .pft-card--costo .pft-tab td.l { padding-left: 16px; } .pft-card--costo th.qty, .pft-card--costo td.qty { padding-left: 8px; padding-right: 8px; } .pft-card--costo th.buy, .pft-card--costo td.buy { padding-right: 12px; } .pft-card--costo .pft-tab th:nth-child(2) { width: 90px; } .pft-card--costo .pft-tab th:nth-child(3) { width: 88px; } .pft-card--costo .pft-tab th:nth-child(4) { width: 128px; } .pft-card--costo .pft-tab th:nth-child(5) { width: 80px; } .pft-card--costo .pft-tab th:nth-child(6) { width: 92px; } .pft-card--costo .pft-tab th:nth-child(7) { width: 84px; } /* El nombre del proveedor y su insignia pueden bajar a dos líneas. */ .pft-card--costo .pft-tab td.l > span { flex-wrap: wrap; gap: 4px 9px; } .pft-card--costo .pft-tab td { height: auto; padding-top: 8px; padding-bottom: 8px; } .pft-card--costo .pft-tab th { white-space: normal; } } /* La tabla de REFERENCIAS DE MERCADO, igual: medido el 2026-10-09 se desplazaba 132px a 1280 de pantalla y 460 a 780, y la ganancia —lo que importa de esa tabla— quedaba fuera de vista. Sus columnas sumaban 1,132px fijos. Cómoda: 170+150+160+150 = 630px más 250px para el nombre → 880px. Por debajo, compacta; y por debajo de 560px (un teléfono) sí se desplaza. */ .pft-card--mkt { container: pft-mkt / inline-size; } .pft-card--mkt .pft-tab { min-width: 560px; } @container pft-mkt (width < 880px) { .pft-card--mkt .pft-tab th, .pft-card--mkt .pft-tab td { padding-left: 8px; padding-right: 8px; } .pft-card--mkt .pft-tab th.l, .pft-card--mkt .pft-tab td.l { padding-left: 16px; } .pft-card--mkt .pft-tab th.r, .pft-card--mkt .pft-tab td.r { padding-right: 16px; } .pft-tab.pft-mkt th:nth-child(2) { width: 128px; } .pft-tab.pft-mkt th:nth-child(3) { width: 92px; } .pft-tab.pft-mkt th:nth-child(4) { width: 118px; } .pft-tab.pft-mkt th:nth-child(5) { width: 100px; } .pft-card--mkt .pft-tab td.l > span { flex-wrap: wrap; gap: 4px 9px; } .pft-card--mkt .pft-tab td { height: auto; padding-top: 8px; padding-bottom: 8px; } .pft-card--mkt .pft-tab th { white-space: normal; } } /* La nota al pie de «Referencias de mercado» no tenía relleno —solo lo llevaba la de «Tu costo»— y el texto quedaba pegado al borde de la tarjeta. Mismo relleno. */ .pft-card--mkt .pft-nota { padding: 14px 20px 16px; line-height: 1.6; } /* ══ UH4.8 · LO QUE NO TIENE EXISTENCIAS ══════════════════════════════════ Construido desde el mockup aprobado (v10-agotados, 2026-10-16). Un proveedor en cero no compite: sale de la comparación y queda resumido en una barra con el interruptor «Incluir sin existencias». Con el interruptor encendido el producto se explora tal como lo publican los proveedores: las filas en cero se ven con su etiqueta y no se pueden comprar ni cotizar. Contrastes MEDIDOS (2026-10-16): etiqueta #8a3b30 sobre #f1e4e2 = 6.16 · texto de la barra #4A4E63 sobre #f7f8fd = 7.73 · su resumen #646984 = 5.08 · banda #6b4a00 sobre #fff3dc = 7.34 · «Sin existencias» apagado #c5c9d8 sobre la placa = 4.97 · texto de una fila en cero #646984 sobre #fbf7f6 = 5.07. Todos por encima de 4.5. */ .pft-pill--ag { background: #f1e4e2; color: #8a3b30; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 12px; } .pft-cifra--apagada { font-size: 20px; color: #c5c9d8; line-height: 1.3; } .pft-pie-extra { display: block; margin-top: 6px; color: #f0f2fc; } .pft-ag-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: #f1e4e2; color: #8a3b30; font: 600 11px 'Plus Jakarta Sans', system-ui, sans-serif; white-space: nowrap; } .pft-card--costo tr.pft-ag-fila td { background: #fbf7f6; } .pft-card--costo tr.pft-ag-fila.pft-gana td { background: #e4f5f0; } .pft-card--costo .pft-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; } .pft-ag-banda { display: flex; align-items: center; gap: 10px; padding: 11px 20px; background: #fff3dc; color: #6b4a00; font: 600 13px 'Plus Jakarta Sans', system-ui, sans-serif; } .pft-ag-vacio { padding: 26px 20px; text-align: center; color: #4A4E63; } .pft-ag-vacio b { display: block; font: 700 15px 'Montserrat', sans-serif; margin-bottom: 4px; } .pft-ag-vacio span { font-size: 13px; color: #646984; } .pft-ag-barra { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 20px; border: 0; border-top: 1px solid #DEE1F0; background: #f7f8fd; font: 600 13px 'Plus Jakarta Sans', system-ui, sans-serif; color: #4A4E63; cursor: pointer; text-align: left; } .pft-ag-barra:hover { background: #f0f2fc; } .pft-ag-barra:focus-visible { outline: 2px solid #00a48b; outline-offset: -2px; } .pft-ag-barra .n { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #e6e8f3; font-size: 12px; } .pft-ag-barra .res { font-weight: 500; color: #646984; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pft-ag-barra .sw { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; } .pft-sw { position: relative; display: inline-block; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: #c9cde0; transition: background .18s; } .pft-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .18s; } .pft-sw--on { background: #00a48b; } .pft-sw--on::after { transform: translateX(16px); } @media (max-width: 720px) { .pft-ag-barra .res { display: none; } } /* La barra de arriba de la lista de resultados (UH4.8): mismo interruptor que el de la tarjeta. */ .pf-sinex-caja { margin-bottom: var(--pf-s-3, 12px); } .pf-sinex { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 1px solid #DEE1F0; border-radius: 10px; background: #fff; font: 500 13px 'Plus Jakarta Sans', system-ui, sans-serif; color: #4A4E63; cursor: pointer; text-align: left; } .pf-sinex:hover { background: #f7f8fd; } .pf-sinex:focus-visible { outline: 2px solid #00a48b; outline-offset: 2px; } .pf-sinex__txt { flex: 1; min-width: 0; } .pf-sinex__txt b { font-weight: 700; } .pf-sinex__txt span { color: #646984; } .pf-sinex__sw { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; font-weight: 600; } .pfl-agot { display: block; font-size: var(--pf-fs-micro, 11px); font-weight: 600; color: #646984; white-space: nowrap; } tr.pfl-agot-fila td { opacity: .62; } .ci-desde-agot { color: #646984; font-weight: 600; } @media (max-width: 720px) { .pf-sinex__txt span { display: none; } }