/* =============================================================
   KOBU · carrito — hoja compartida por LAS DOS páginas
   -------------------------------------------------------------
   Vive aparte porque el panel del pedido es UNO SOLO: lo dibuja
   tienda-cart.js y se carga igual en la tienda mobile y en el
   catálogo A4 de escritorio. Antes había dos carritos con dos
   estilos y dos juegos de reglas, y se fueron separando solos.

   Depende de tokens.css (colores de marca) y de que la página
   defina --rule, --gain y --gain-soft, que difieren entre las dos
   hojas a propósito.
   ============================================================= */
/* ============================================================
   CARRITO PROPIO (tienda-cart.js) — comprobante
   ============================================================ */
.t-cart-overlay{
  position: fixed; inset: 0; background: rgba(20,20,25,.45); z-index: 700;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.t-cart-overlay.is-open{ opacity: 1; pointer-events: auto; }
.t-cart{
  width: 100%; max-width: 430px; background: #fff;
  border-radius: 20px 20px 0 0; max-height: 90vh; overflow-y: auto;
  transform: translateY(100%); transition: transform .22s ease;
}
.t-cart-overlay.is-open .t-cart{ transform: translateY(0); }
.t-cart__inner{ padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
.t-cart__head{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; margin-bottom: 10px; }
.t-cart__head h3{ font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0; }
.t-cart__close{ border: none; background: none; font-size: 20px; padding: 8px; cursor: pointer; color: var(--ink-2); }
.t-cart__list{ list-style: none; margin: 0 0 12px; padding: 0; }
.t-cart__row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.t-cart__info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-cart__name{ font-size: 15px; font-weight: 700; color: var(--ink); }
.t-cart__size{ font-size: 12.5px; color: var(--kobu-blue-2); font-weight: 700; }
.t-cart__right{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.t-cart__stepper{ display: inline-flex; align-items: center; border: 1.5px solid var(--rule); border-radius: 10px; overflow: hidden; }
.t-cart__stepper button{ width: 40px; height: 40px; border: none; background: var(--kobu-gray-soft); font-size: 18px; font-weight: 800; cursor: pointer; color: var(--ink); }
.t-cart__stepper span{ min-width: 28px; text-align: center; font-weight: 800; }
.t-cart__sub{ font-family: var(--serif); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; }
.t-cart__empty{ font-size: 14.5px; color: var(--ink-2); padding: 28px 4px; text-align: center; line-height: 1.6; }
.t-cart__prog.is-complete .t-cart__prog-fill{ background: var(--gain); }
.t-cart__prog.is-complete .t-cart__prog-label{ color: var(--gain); font-weight: 700; }
.t-cart__send{ display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 14px; background: #25d366; color: #fff; font-weight: 800; font-size: 15.5px; text-decoration: none; margin-top: 12px; }
.t-cart__ship.is-complete{ color: var(--gain); background: var(--gain-soft); border-color: var(--gain); font-size: 14px; }
.t-cart__note{ margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.4; }
.t-cart__opt.is-on{ border-color: var(--kobu-blue-2); background: var(--kobu-blue-soft); }

/* ============================================================
   PV26 · agregados del panel único
   ============================================================ */

.t-cart__unit{ font-size: 11.5px; color: var(--ink-3); }

/* saldo de regalo: la meta que sigue después del mínimo */
.t-cart__gift{
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--kobu-yellow-soft, oklch(0.965 0.055 92));
  border: 1.5px solid var(--kobu-yellow, oklch(0.93 0.11 92));
  border-radius: 12px; padding: 11px 12px; margin-bottom: 12px;
}
.t-cart__gift.is-on{ border-width: 2px; }
.t-cart__gift-ico{ flex-shrink: 0; font-size: 18px; line-height: 1.15; }
.t-cart__gift-txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-cart__gift-txt strong{ font-size: 14px; font-weight: 900; color: var(--kobu-yellow-ink, oklch(0.42 0.08 75)); }
.t-cart__gift-txt span{ font-size: 12px; color: var(--ink-2); line-height: 1.35; }

/* detalle del cálculo: ningún número tiene que aparecer de la nada */
.t-cart__detalle{ display: flex; flex-direction: column; gap: 5px; margin: 12px 0 0; }
.t-cart__drow{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.t-cart__drow b{ font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.t-cart__drow.is-gift b{ color: var(--gain); }
.t-cart__payopt.is-on{ border-color: var(--kobu-blue-2); border-width: 2px; background: var(--kobu-blue-soft); }
.t-cart__payopt.is-on:first-child{ border-color: var(--gain); background: var(--gain-soft); }

/* desglose: el descuento del catálogo se ve, no aparece un número ya bajado */
.t-cart__drow.is-off b{ color: var(--kobu-blue-2); }

/* ============================================================
   PV26 · RONDA 7 — un renglón por descuento
   ------------------------------------------------------------
   El desglose tenía dos líneas fijas de 5% y todo lo demás caía
   adentro: un pack mostraba "−$23.400" rotulado 5% sobre
   $123.000, que es 19%. Ahora cada origen tiene su renglón y su
   color, el mismo que ya usa en la vitrina — naranja para packs
   y combos, rojo para liquidación.
   ============================================================ */
.t-cart__drow.is-pack b{ color: var(--pack); }
.t-cart__drow.is-liq  b{ color: var(--liq); }

/* ================================================================
   EL PANEL SIMPLE (16/8/2026)

   El anterior pedía leer, de arriba abajo: una barra de progreso al
   mínimo, una tarjeta de sugerencia con su botón, una caja de saldo de
   regalo, dos tarjetas de entrega de tres renglones cada una, un
   desglose de seis líneas, DOS bloques de forma de pago con tres
   números cada uno, un cartel de "ahorrás 10% más" y otro de "estás
   ahorrando". Nueve bloques antes del botón de pedir — y el mayorista
   se trababa justo ahí, con el pedido armado.

   Ahora: productos → regalo → desglose → TOTAL → envío → pedir.
   ================================================================ */

/* El total, que es lo que se busca al abrir el panel. Sin el envío
   adentro: el flete tiene su switch abajo y metido acá hacía saltar el
   número grande cada vez que se tocaba retiro/envío. */
.t-cart__total{
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 2px 10px;
  border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 10px;
}
.t-cart__total-lbl{ font-size: 16px; font-weight: 800; color: var(--ink); }
.t-cart__total-val{
  font-family: var(--serif); font-size: 27px; font-weight: 800; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.t-cart__total-sub{ grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }
/* El total con el flete: mismo renglón de apoyo, pero el número en tinta
   —es plata que se paga— para que no se lea como una aclaración más. */
.t-cart__total-envio{
  grid-column: 1 / -1; margin-top: 4px;
  font-size: 12.5px; color: var(--ink-2);
}
.t-cart__total-envio b{ color: var(--ink); font-weight: 800; }

/* El envío: dos pastillas del mismo ancho. Lo único que se compara es
   el precio, así que es lo único que va en negrita. */
.t-cart__envio{ display: flex; gap: 8px; margin: 12px 0 4px; }
.t-cart__pill{
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border: 1.5px solid var(--rule); border-radius: 12px;
  padding: 9px 11px; cursor: pointer; background: #fff;
  font-size: 12.5px; color: var(--ink-2);
  transition: border-color .14s ease, background .14s ease;
}
.t-cart__pill.is-on{ border-color: var(--kobu-blue-2); background: var(--kobu-blue-soft); color: var(--ink); }
.t-cart__pill input{ position: absolute; opacity: 0; pointer-events: none; }
.t-cart__pill em{ font-style: normal; color: var(--ink-3); font-size: 11px; display: block; }
.t-cart__pill b{ font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.t-cart__pill:focus-within{ outline: 2px solid var(--kobu-blue-2); outline-offset: 2px; }

/* El mínimo: un renglón, y sólo cuando falta. */
.t-cart__min{ margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); text-align: center; }
.t-cart__min b{ color: var(--ink); }

/* La seña salió del panel y quedó como una línea: se arregla por
   WhatsApp, que es donde se arreglaba igual. */
.t-cart__sena{ margin: 8px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.4; }

/* El regalo GANADO, en caja y con el monto grande. Como renglón del
   desglose, $100.000 de regalo se leían igual que un descuento de
   $2.000: el premio más grande de la tienda entraba por el mismo lugar
   que cualquier otra resta. Sin alcanzar todavía, la caja queda en su
   versión chica — ahí el número es una meta, no un logro. */
.t-cart__gift.is-on{ display: flex; align-items: center; gap: 12px; }
.t-cart__gift.is-on .t-cart__gift-txt{ display: flex; flex-direction: column; gap: 1px; }
.t-cart__gift-lbl{ font-size: 12px; font-weight: 800; color: var(--kobu-yellow-ink); text-transform: uppercase; letter-spacing: .06em; }
.t-cart__gift-monto{
  font-family: var(--serif); font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--kobu-yellow-ink); font-variant-numeric: tabular-nums;
}
.t-cart__gift-sub{ font-size: 12px; color: var(--ink-2); }
.t-cart__gift-next{ font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }


/* ============================================================
   LA BOLSA DE REGALO, COMO ÍTEM DEL PEDIDO
   ------------------------------------------------------------
   No es un descuento: es mercadería que viaja. Por eso vive en la
   lista de ítems y no en el desglose, con la misma forma que un
   renglón comprado y cobrada en "sin cargo". Se distingue por el
   fondo amarillo del regalo, no por ser una caja aparte.
   ============================================================ */
.t-cart__row--regalo{
  background: var(--kobu-yellow-soft, oklch(0.965 0.055 92));
  border-radius: 12px;
  border-bottom: 0;
  padding: 12px;
  margin-bottom: 8px;
}
.t-cart__row--regalo .t-cart__name{ color: var(--kobu-yellow-ink, oklch(0.42 0.08 75)); }
.t-cart__row--regalo .t-cart__size{ color: var(--ink-2); font-weight: 700; }
.t-cart__regalo-precio{
  font-family: var(--serif); font-weight: 700; font-size: 14px;
  color: var(--gain, oklch(0.52 0.13 155));
  white-space: nowrap;
}


/* El flete ganado, tachado al lado del "Sin cargo" — en las dos
   pastillas, se elija envío o retiro. */
.t-cart__pill s{
  color: var(--ink-3);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
  margin-right: 4px;
}
/* El pin del depósito: dibujo, no emoji (en Windows 📍 depende de la
   fuente del sistema). Va del cuerpo de la línea que acompaña. */
.t-cart__pin{
  width: 13px; height: 13px;
  vertical-align: -2px;
  color: var(--kobu-blue-2);
  fill: currentColor;
}
.t-cart__pill em b{ font-weight: 900; font-style: normal; color: var(--ink-2); }


/* ============================================================
   EL RENGLÓN DEL PEDIDO ES UNA PUERTA
   ------------------------------------------------------------
   Toca el producto y volvés a su hoja. La chevron aparece tenue
   siempre —para que se sepa que se puede— y se acentúa al pasar
   el mouse; el contador de la derecha sigue siendo suyo y no
   dispara la navegación.
   ============================================================ */
.t-cart__row[data-ver] .t-cart__info{ cursor: pointer; }
.t-cart__ver{
  display: inline-block;
  margin-left: 5px;
  color: var(--ink-3);
  font-weight: 900;
  opacity: .45;
  transition: opacity .13s ease, transform .13s ease;
}
.t-cart__row[data-ver]:hover .t-cart__ver{ opacity: 1; transform: translateX(2px); color: var(--kobu-blue-2); }
.t-cart__row[data-ver]:hover .t-cart__name{ color: var(--kobu-blue-2); }

/* EL PANEL NO CAMBIA DE ALTO AL TOCAR RETIRO/ENVÍO.
   La nota del pie dice una cosa con envío ("Envío por Correo Argentino,
   2 a 4 días hábiles") y otra más corta con retiro, así que al cambiar
   de opción el panel entero se acortaba y todo lo de abajo saltaba. Se
   reserva el alto de la más larga, que es la del correo. */
.t-cart__note{ min-height: 2.9em; }


/* ============================================================
   LA META QUE SIGUE — primero el envío, después la bolsa
   ------------------------------------------------------------
   Un solo bloque que cambia de contenido según dónde esté el
   pedido. El envío va en verde oscuro sobre verde tenue (es un
   beneficio que se gana, el mismo verde de la pieza flotante y
   de la barra de progreso); la bolsa, en amarillo, que es el
   color del regalo en toda la tienda.
   ============================================================ */
.t-cart__meta{
  display: flex; gap: 10px; align-items: flex-start;
  margin: 12px 0 0;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1.5px solid;
}
.t-cart__meta-ico{
  flex: 0 0 auto;
  width: 20px; height: 20px;
  font-size: 17px; line-height: 1;
}
.t-cart__meta-txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-cart__meta-txt strong{ font-size: 14.5px; font-weight: 900; line-height: 1.25; }
.t-cart__meta-txt span{ font-size: 12px; line-height: 1.35; }

.t-cart__meta--envio{
  background: var(--gain-soft, oklch(0.96 0.03 155));
  border-color: var(--gain, oklch(0.52 0.13 155));
  color: oklch(0.40 0.11 155);
  fill: currentColor;
}
.t-cart__meta--envio .t-cart__meta-txt span{ color: oklch(0.45 0.06 155); }

.t-cart__meta--bolsa{
  background: var(--kobu-yellow-soft, oklch(0.965 0.055 92));
  border-color: var(--kobu-yellow, oklch(0.93 0.11 92));
  color: var(--kobu-yellow-ink, oklch(0.42 0.08 75));
}
.t-cart__meta--bolsa .t-cart__meta-txt span{ color: var(--ink-2); }


/* El envío ya ganado: un renglón simple, gris, con el beneficio en
   verde. No es una tarjeta más — el bloque de abajo es el que todavía
   se está buscando. */
.t-cart__yatenes{
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-3);
}
.t-cart__yatenes b{ color: var(--gain, oklch(0.52 0.13 155)); font-weight: 900; }


/* ==============================================================
   LA PIEZA DEL PEDIDO — el acceso al carrito, en LAS DOS PÁGINAS

   Vivía en revista.css y por lo tanto sólo existía en el catálogo de
   escritorio. Desde el 4/9/2026 la dibuja tienda-cart.js también en la
   tienda mobile, donde reemplazó a #t-bar, así que el componente se
   mudó a esta hoja — la única que cargan las dos páginas, igual que el
   panel del pedido que abre.

   Lo que NO está acá y sí en cada página:
     revista.css → dónde se para (centrada bajo el pliego, corrida por
                   la barra lateral) y su alto fijo `--kb-ped-h`
     tienda.css  → `.kb-ped--tienda`, apoyada en el borde de abajo, a
                   ancho de pantalla y con el alto que le pida el texto

   Los tres tokens de papel tienen respaldo: en el escritorio los
   define revista.css, y en la tienda —que no la carga— caen en el
   valor de acá.
   ============================================================== */
:root{
  --kb-paper:      oklch(0.985 0.012 85);
  --kb-paper-line: oklch(0.885 0.028 80);
}
/* ------------------------------------------------------------------
   2 · LA PIEZA DEL PEDIDO. Centrada bajo el pliego —no en una esquina—
   porque es el resumen de lo que se está armando, no un aviso al pasar.
   Marfil con borde fino y sombra suave: la misma materia que una hoja
   del catálogo, para que no se lea como una notificación del navegador.
   El verde queda para lo que se acciona y lo que se gana — el carrito,
   el botón y la barra de progreso.

   El contenedor no escucha clicks (así el margen gris de los costados
   sigue pasando hoja); la tarjeta sí, entera.
------------------------------------------------------------------ */
.kb-ped{
  position: fixed;
  left: 0; right: 0; bottom: 12px;
  z-index: 50;
  /* COLUMNA, no fila: arriba de la tarjeta vive el globo de la
     recomendación (`.kb-reco`), que tiene que quedar pegado a ella y
     del mismo ancho. En fila se le ponía al lado. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 16px;
  pointer-events: none;
}
.kb-ped__card{
  pointer-events: auto;
  width: min(620px, 100%);
  height: var(--kb-ped-h, auto);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 9px 13px;
  margin: 0; padding: 11px 13px;
  border: 1px solid var(--kb-paper-line);
  border-radius: 14px;
  background: var(--kb-paper);
  box-shadow: 0 14px 34px -16px oklch(0 0 0 / .55), 0 2px 6px -3px oklch(0 0 0 / .22);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kb-ped__card:hover{
  transform: translateY(-2px);
  border-color: var(--gain, oklch(0.52 0.13 155));
  box-shadow: 0 18px 40px -16px oklch(0 0 0 / .6), 0 2px 6px -3px oklch(0 0 0 / .22);
}
.kb-ped__card:focus-visible{ outline: 2px solid var(--kobu-blue-2); outline-offset: 3px; }

/* El carrito, verde y dibujado (icons.js): es el mismo que lleva cada
   botón de agregar de las hojas, que es el gesto que la pieza explica.
   Con productos, el contador se le monta en la esquina. */
.kb-ped__ico{
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--gain, oklch(0.52 0.13 155));
  color: #fff;
}
.kb-ped__ico svg{ width: 23px; height: 23px; }
.kb-ped__n{
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 2px solid var(--kb-paper);
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums;
}

.kb-ped__txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-ped__t{
  font-size: 12.5px; font-weight: 900;
  letter-spacing: .075em; text-transform: uppercase;
  color: var(--ink);
}
.kb-ped__s{ font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.kb-ped__datos{
  display: flex; align-items: baseline; gap: 7px;
  font-size: 13px; color: var(--ink-2);
}
.kb-ped__datos i{ font-style: normal; color: var(--ink-3); }
.kb-ped__datos b{
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* EL BOTÓN OCUPA EL ALTO ENTERO DE LA PIEZA, no un renglón.
   Es la única acción que hay acá y compartía altura con el nombre del
   pedido, así que a la altura del ojo pesaban lo mismo dos cosas que no
   valen lo mismo. Alto completo se lee como el bloque al que se va, y
   de paso le devuelve ancho a la barra de progreso. */
.kb-ped__cta{
  grid-column: 3; grid-row: 1 / -1; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--gain, oklch(0.52 0.13 155));
  color: #fff;
  font-size: 14px; font-weight: 900; letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 10px 20px -10px oklch(0.52 0.13 155 / .95);
  transition: background .14s ease, box-shadow .14s ease;
}
.kb-ped__cta-flecha{
  display: grid; place-items: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: oklch(1 0 0 / .22);
  font-size: 13px; line-height: 1;
  transition: transform .14s ease;
}
.kb-ped__card:hover .kb-ped__cta{
  background: oklch(0.47 0.14 155);
  box-shadow: 0 12px 24px -10px oklch(0.52 0.13 155 / 1);
}
.kb-ped__card:hover .kb-ped__cta-flecha{ transform: translateX(2px); }

/* LA LÍNEA DE PROGRESO cruza la pieza entera: es del pedido, no de una
   columna. El texto va al lado y no debajo para no sumar un tercer
   renglón — el alto de la pieza es alto que pierde el pliego. */
/* EL ENVÍO SE DIBUJA, NO SE CUENTA.

   Era una línea gris con una barra fina y el texto al lado: leído como
   un dato más, cuando es el beneficio que mueve el pedido hacia arriba.
   Ahora la fila entera es el envío — camión adelante, riel con relleno
   verde, y el estado al final — y se prende cuando se desbloquea: el
   camión pasa de gris a verde, el riel se completa y el texto sale con
   su tilde. El cambio de estado se ve de reojo, sin leer.

   El riel va sobre marfil, no sobre gris: la pieza es papel, y un gris
   de interfaz acá adentro la delataba como widget. */
.kb-ped__prog{
  grid-column: 1 / 3;
  display: flex; align-items: center; gap: 9px;
}
.kb-ped__camion{
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 9px;
  background: oklch(0.93 0.012 250);
  color: var(--ink-3);
  transition: background .25s ease, color .25s ease;
}
.kb-ped__camion svg{ width: 18px; height: 18px; fill: currentColor; }
.kb-ped__barra{
  flex: 1 1 auto; min-width: 70px;
  height: 11px; border-radius: 999px;
  background: oklch(0.945 0.012 150);
  box-shadow: inset 0 0 0 1px oklch(0.86 0.02 150), inset 0 1px 2px oklch(0 0 0 / .10);
  overflow: hidden;
}
.kb-ped__barra i{
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, oklch(0.68 0.15 150), var(--gain, oklch(0.52 0.13 155)));
  box-shadow: 0 0 0 1px oklch(0.45 0.12 155 / .35) inset;
  transition: width .45s cubic-bezier(.2, .8, .3, 1);
}
/* EL TEXTO DEL ENVÍO SE TIENE QUE LEER DE LEJOS.
   Estaba en 12px gris claro, del cuerpo de una nota al pie: la frase que
   dice cuánto falta para el envío gratis —el argumento que hace crecer
   el pedido— se perdía al lado del precio. Va al cuerpo de un renglón de
   lectura, en negrita y en tinta plena; el monto, más grande todavía y
   en verde, porque es el número que se mira. */
.kb-ped__meta{
  flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 13.5px; font-weight: 800; color: var(--ink);
  letter-spacing: -.005em;
}
.kb-ped__meta b{
  font-size: 15px; font-weight: 900;
  color: var(--gain, oklch(0.52 0.13 155));
  font-variant-numeric: tabular-nums;
}
.kb-ped__ok{
  width: 17px; height: 17px; align-self: center;
  color: var(--gain, oklch(0.52 0.13 155));
}

/* DESBLOQUEADO: el renglón entero se pinta. */
.kb-ped__prog.is-listo .kb-ped__camion{
  background: var(--gain, oklch(0.52 0.13 155)); color: #fff;
}
.kb-ped__prog.is-listo .kb-ped__meta{
  color: var(--gain, oklch(0.52 0.13 155)); font-weight: 900;
}
.kb-ped__prog.is-listo .kb-ped__barra{
  box-shadow: inset 0 0 0 1px oklch(0.52 0.13 155 / .45);
}

/* EL SALTO AL AGREGAR. Corto y una sola vez: es un acuse de recibo, no
   una animación. El anillo sale del ícono verde, que es el mismo dibujo
   del botón que se acaba de tocar en la hoja. */
@keyframes kb-ped-bump{
  0%{ transform: none; }
  35%{ transform: translateY(-7px) scale(1.025); }
  100%{ transform: none; }
}
@keyframes kb-ped-ring{
  from{ box-shadow: 0 0 0 0 oklch(0.52 0.13 155 / .55); }
  to{ box-shadow: 0 0 0 16px oklch(0.52 0.13 155 / 0); }
}
.kb-ped__card.is-bump{ animation: kb-ped-bump .42s cubic-bezier(.2, .8, .3, 1); }
.kb-ped__card.is-bump .kb-ped__ico{ animation: kb-ped-ring .6s ease-out; }
@media (prefers-reduced-motion: reduce){
  .kb-ped__card, .kb-ped__barra i, .kb-ped__cta{ transition: none; }
  .kb-ped__card.is-bump,
  .kb-ped__card.is-bump .kb-ped__ico{ animation: none; }
}

/* Pantallas angostas: la pieza se aprieta pero no pierde ninguna de sus
   tres cosas —lo que llevás, el botón y el progreso—. */
@media (max-width: 1100px){
  .kb-ped__card{ gap: 8px 10px; padding: 10px; }
  .kb-ped__s{ font-size: 11.5px; }
  .kb-ped__meta{ font-size: 11px; }
}


/* La composición de un pack o un combo dentro del pedido es larga —el
   combo semanal lista siete medidas— y desplegada entera empujaba el
   total dos pantallas abajo. Dos renglones alcanzan para reconocer qué
   es; el detalle completo está en su ficha, a un toque del nombre. */
.t-cart__size{
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ==============================================================
   LA RECOMENDACIÓN — "Sumá también"

   Un solo componente en dos marcos, porque es una sola
   recomendación (la elige `recomendador.js`) y se dibuja con las
   mismas funciones (`tienda-cart.js`):

     .kb-reco        el globo que brota sobre "Mi pedido". Vive
                     ADENTRO de `.kb-ped`, que es una columna, así
                     que queda pegado a la pieza y del mismo ancho
                     en las dos páginas sin repetir acá dónde se
                     para la pieza.
     .t-cart__reco   la ficha de adentro del panel, entre los
                     productos elegidos y las metas.

   El cuerpo (`.kb-reco__card`) lo comparten los dos: miniatura,
   nombre, qué trae, precio y botón. Lo que cambia es el marco.

   COLOR: naranja de packs (`--pack*`). En todo el sitio el verde
   significa "esto es tu margen de reventa" y el rojo, liquidación;
   el naranja es el de "esto es una oferta armada", que es
   exactamente lo que la tarjeta ofrece. Sobre el marfil de la
   pieza se despega sin gritar.

   NO TAPA NADA QUE SE USE. El globo mide ~72px y se apoya sobre la
   pieza: en la tienda las solapas están arriba y en la revista las
   flechas de pasar hoja están contra los bordes, lejos de sus 600px
   centrados. Su alto entra en `--t-bar-h` (lo mide `medirPieza`),
   así que el final del catálogo nunca queda debajo.
   ============================================================== */
.kb-reco{
  pointer-events: none;
  width: min(600px, 100%);
  margin-bottom: 8px;
  /* Entra desde abajo, apenas: es un agregado a la pieza, no una
     notificación que aterriza encima. */
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2, .8, .3, 1);
}
.kb-reco.is-on{ opacity: 1; transform: none; }
.kb-reco .kb-reco__card{ pointer-events: auto; }

/* El cuerpo, compartido por el globo y la ficha del panel.
   Tres columnas —miniatura, texto, botón— y el encabezado arriba de
   todo: es lo mínimo que se entiende de un vistazo. */
.kb-reco__card{
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 10px 9px;
  border: 1.5px solid var(--pack-line);
  border-radius: 13px;
  background: var(--pack-soft);
  font-family: var(--sans);
  text-align: left;
}
.kb-reco .kb-reco__card{
  box-shadow: 0 10px 26px -14px oklch(0 0 0 / .5);
}

.kb-reco__head{
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pack-ink);
}
/* La chapa del descuento. El texto lo trae el candidato —el sello
   que escribió el dueño para los combos, el derivado y topeado de
   los packs, el 10% de una medida suelta—, nunca se escribe en el
   CSS ni en el renderer. */
.kb-reco__off{
  font-style: normal;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--pack);
  color: #fff;
  font-size: 9.5px; font-weight: 900; letter-spacing: .06em;
}

/* El cierre, discreto: está para el que no la quiere, no para
   competir con "Agregar". */
.kb-reco__x{
  position: absolute; top: 4px; right: 5px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none; color: var(--ink-3);
  font-size: 12px; line-height: 1;
  cursor: pointer;
  opacity: .65;
  transition: opacity .15s ease, background .15s ease;
}
.kb-reco__x:hover{ opacity: 1; background: oklch(0 0 0 / .06); }
.kb-reco__x:focus-visible{ outline: 2px solid var(--pack-ink); outline-offset: 1px; }

.kb-reco__thumb{
  width: 44px; height: 44px;
  border-radius: 9px; overflow: hidden;
  background: #fff;
  border: 1px solid var(--pack-line);
  display: grid; place-items: center;
}
.kb-reco__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto —los packs todavía no tienen la suya— va lo que sí
   describe al conjunto: cuántas unidades trae. No se le presta la
   foto del producto: mostraría una cama donde se venden siete. */
.kb-reco__thumb--n{
  flex-direction: column;
  background: #fff; color: var(--pack-ink);
  line-height: 1;
}
.kb-reco__thumb--n b{ font-size: 17px; font-weight: 900; }
.kb-reco__thumb--n i{ font-style: normal; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; }
.kb-reco__thumb.is-vacia{ background: var(--pack-soft); }

.kb-reco__txt{ min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Hasta dos renglones. En una sola línea, "Promo Regulables Doble
   estación" se cortaba en "Promo Regulables Doble es..." justo en el
   dato que distingue una version de la otra. */
.kb-reco__name{
  font-size: 13px; font-weight: 800; color: var(--ink);
  line-height: 1.22;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Qué trae, en un renglón. La composición de un combo son siete
   medidas: entera empujaría el globo al doble de alto y el dato que
   decide —el precio— quedaría abajo del pliegue. */
.kb-reco__det{
  font-size: 10.5px; color: var(--ink-3); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-reco__det i{ font-style: normal; color: var(--gain); font-weight: 700; }

/* MISMA GRAMÁTICA DE PRECIO QUE TODA LA VITRINA: el de lista tachado
   al lado del que se paga, y el ahorro como número aparte. Los tres
   salen del candidato, así que la recomendación no puede prometer
   una cuenta distinta de la que hace la ficha del producto. */
.kb-reco__precio{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px;
  margin-top: 1px;
}
.kb-reco__precio s{ font-size: 10.5px; color: var(--ink-3); }
.kb-reco__precio b{ font-size: 15px; font-weight: 900; color: var(--pack-ink); }
.kb-reco__precio em{
  font-style: normal;
  font-size: 10px; font-weight: 800; color: var(--gain);
}

.kb-reco__add{
  align-self: center;
  min-height: 36px;
  padding: 0 12px;
  border: 0; border-radius: 10px;
  background: var(--pack); color: #fff;
  font-family: var(--sans); font-size: 12.5px; font-weight: 900;
  white-space: nowrap; cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
}
.kb-reco__add:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.kb-reco__add:active{ transform: none; }
.kb-reco__add:focus-visible{ outline: 2px solid var(--pack-ink); outline-offset: 2px; }

/* Cambió el candidato con el globo a la vista (cerraron el anterior,
   quitaron un producto): late en el lugar en vez de irse y volver. */
@keyframes kb-reco-bump{
  0%   { transform: none; }
  40%  { transform: translateY(-3px) scale(1.012); }
  100% { transform: none; }
}
.kb-reco.is-bump{ animation: kb-reco-bump .38s cubic-bezier(.2, .8, .3, 1); }

@media (prefers-reduced-motion: reduce){
  .kb-reco{ transition: none; }
  .kb-reco.is-bump{ animation: none; }
  .kb-reco__add{ transition: none; }
}

/* ---- la ficha de adentro del panel ----
   Casi un producto más de la lista: el mismo ancho y el mismo lugar
   que los renglones que tiene arriba, pero con fondo propio y borde
   naranja para que se lea como una oferta y no como algo ya cobrado.
   Sin sombra: adentro del panel no flota, forma parte de la lista. */
.t-cart__reco{
  margin: 2px 0 10px;
  border-width: 2px;
}
.t-cart__reco .kb-reco__name{ font-size: 14px; }
/* Adentro del panel la columna es más angosta y el nombre baja a dos
   renglones: la miniatura centrada quedaba a la altura del precio, no
   del producto. Arriba, alineada con el nombre. */
.t-cart__reco .kb-reco__thumb{ align-self: start; margin-top: 2px; }
.t-cart__reco .kb-reco__det{ white-space: normal; }
.t-cart__reco .kb-reco__precio b{ font-size: 16px; }

/* Teléfonos: el botón se aprieta pero se queda al lado. Bajado a su
   propio renglón el globo pasaba de 99 a 137px de alto, y encima de una
   pieza de 95 son 232px fijos abajo de una pantalla de 812. */
@media (max-width: 430px){
  .kb-reco__card{ grid-template-columns: 42px minmax(0, 1fr) auto; padding: 7px 9px 8px; gap: 3px 9px; }
  .kb-reco__thumb{ width: 42px; height: 42px; }
  .kb-reco__add{ padding: 0 10px; font-size: 12px; min-height: 34px; }
  .kb-reco__precio b{ font-size: 14.5px; }
}
/* Debajo de 340px ya no entra nada al lado del botón: ahí sí baja. */
@media (max-width: 340px){
  .kb-reco__card{ grid-template-columns: 40px minmax(0, 1fr); }
  .kb-reco__add{ grid-column: 1 / -1; width: 100%; margin-top: 3px; }
}