/* ═══════════════════════════════════════════════════════════════
   VILLAL · TU BOLSA (carrito.html)
   ───────────────────────────────────────────────────────────────
   Diseño "tres pasos": 1 Revisa · 2 Entrega · 3 Tus datos, cada
   uno con su número en una etiquetica roja con ojal (nuestro sello),
   y a la derecha el resumen quieto con el total y el botón verde
   de WhatsApp.
   ═══════════════════════════════════════════════════════════════ */

body { background: #F7F2F1; }

.cb { padding-block: 40px 80px; }

.cb .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cb .wa  { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }


/* ─── 1. Título y la rutica de pasos ─────────────────────────── */

.cb-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cb-cab h1 { font: 800 clamp(30px, 3.6vw, 42px)/1 var(--fuente-titulo); letter-spacing: -.03em; }

.cb-ruta { display: flex; align-items: center; gap: 8px; }
.cb-ruta li { display: flex; align-items: center; gap: 8px; color: #57484E; font-size: 13.5px; font-weight: 700; }
.cb-ruta li + li::before { content: ""; width: 36px; height: 2px; border-radius: 2px; background: #E2D4D1; }

/* El número del paso va en una etiqueta: esquinas de arriba cortadas y su ojal */
.cb-num {
  position: relative; display: grid; place-items: center; flex: none;
  width: 30px; height: 38px; padding-top: 9px;
  border-radius: 0 0 7px 7px; background: var(--marca); color: #fff;
  font: 800 14px/1 var(--fuente-titulo);
  clip-path: polygon(22% 0, 78% 0, 100% 9px, 100% 100%, 0 100%, 0 9px);
}
.cb-num::before { content: ""; position: absolute; left: 50%; top: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #fff; }


/* ─── 2. Las dos columnas ────────────────────────────────────── */

.cb-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cb-pasos { display: flex; flex-direction: column; gap: 16px; }

.cb-bloque { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; }
.cb-bcab { display: flex; align-items: center; gap: 12px; }
.cb-btit { font: 800 19px/1.1 var(--fuente-titulo); letter-spacing: -.01em; }
.cb-bsub { margin-top: 2px; color: #9A8B91; font-size: 13px; line-height: 1.35; }

.cb-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }


/* ─── 3. Productos ───────────────────────────────────────────── */

.cb-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #F2EAE8; }
.cb-item:first-child { border-top: 0; padding-top: 0; }
.cb-item:last-child { padding-bottom: 0; }

.cb-foto { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #FBF0EE; color: #D9B9C0; }
.cb-foto img { width: 100%; height: 100%; object-fit: cover; }
.cb-foto .ico { width: 26px; height: 26px; }

.cb-nom { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
a.cb-nom:hover { color: var(--marca); }
.cb-u { margin-top: 3px; color: #9A8B91; font-size: 12.5px; }
.cb-u s { margin-left: 4px; }
.cb-tags { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cb-tags:empty { display: none; }

/* −14 %: etiquetica roja acostada con su ojal */
.cb-etq {
  position: relative; display: inline-flex; align-items: center;
  padding: 3px 8px 3px 15px; border-radius: 0 4px 4px 0;
  background: var(--marca); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.2; white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
.cb-etq::before { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #fff; }
.cb-etq.oscura { background: var(--tinta); }
.cb-ahorra { display: inline-block; padding: 2px 7px; border-radius: 5px; background: #E7F7EE; color: #0E7A3C; font-size: 11.5px; font-weight: 800; line-height: 1.4; }
.cb-quedan { color: var(--marca); font-size: 11.5px; font-weight: 800; }

/* − 1 + */
.cb-cant { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: #F6EEEC; }
.cb-cant button {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--tinta); font-size: 17px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 2px rgba(26, 18, 22, .12); transition: background .15s, color .15s;
}
@media (hover: hover) { .cb-cant button:hover { background: var(--tinta); color: #fff; } }
.cb-cant button:active { background: var(--tinta); color: #fff; }
.cb-cant button:disabled { opacity: .35; cursor: not-allowed; background: #fff; color: var(--tinta); }
.cb-cant b { min-width: 26px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }

.cb-acc { display: contents; }   /* en PC, − 1 + y el precio son columnas; en celular van juntos abajo */
.cb-der { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 96px; }
.cb-sub { font: 800 17px/1 var(--fuente-titulo); white-space: nowrap; }
.cb-quitar { color: #9A8B91; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cb-quitar:hover { color: var(--marca); }


/* ─── 4. Campos ──────────────────────────────────────────────── */

.cb .campo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cb .campo label { margin: 0; color: #57484E; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.cb .campo label small { margin: 0; color: #9A8B91; font-size: 11px; font-weight: 600; }
.cb .campo input,
.cb .campo select {
  height: 48px; padding: 0 14px; border: 1.5px solid #E6DCDA; border-radius: 12px;
  background-color: #fff; color: var(--tinta); font-size: 15px; font-weight: 500;
}
.cb .campo select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #57484E 50%), linear-gradient(135deg, #57484E 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.cb .campo input:focus,
.cb .campo select:focus { border-color: var(--marca); box-shadow: 0 0 0 4px rgba(200, 30, 60, .12); }
.cb .campo input.invalido,
.cb .campo select.invalido { border-color: var(--marca); background-color: #FFF7F8; box-shadow: 0 0 0 4px rgba(200, 30, 60, .12); }
.cb .campo-ayuda { margin: 0; color: #9A8B91; font-size: 12.5px; line-height: 1.4; }
.cb .campo-ayuda:empty { display: none; }

/* A domicilio / Recojo en tienda */
.cb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-tabs .entrega-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 10px;
  border: 1.5px solid #E6DCDA; border-radius: 12px; background: #fff; color: #57484E; font-size: 14px; font-weight: 700;
  transition: border-color .15s, background .15s, color .15s;
}
.cb-tabs .entrega-tab:hover { border-color: #D9B9C0; }
.cb-tabs .entrega-tab.activo { border-color: var(--marca); background: var(--marca-clara); color: var(--marca-oscura); }

.cb-domicilio { display: flex; flex-direction: column; gap: 16px; }
.cb-local { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #FBF0EE; color: #57484E; font-size: 13.5px; line-height: 1.45; }
.cb-local .ico { margin-top: 1px; color: var(--marca); }
.cb-local b { color: var(--tinta); }


/* ─── 5. Resumen ─────────────────────────────────────────────── */

.cb-resumen { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -26px rgba(120, 20, 40, .45); }
.cb-rtit { display: flex; align-items: center; gap: 10px; font: 800 18px/1 var(--fuente-titulo); }

/* Cuánto falta para el envío gratis, con la motico avanzando */
.cb-gratis { display: flex; flex-direction: column; gap: 10px; }
.cb-gtxt { display: flex; align-items: center; gap: 8px; color: #3E3238; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.cb-gtxt .ico { width: 20px; height: 20px; color: var(--marca); }
.cb-gtxt b { color: var(--marca); }
.cb-via { position: relative; height: 10px; margin: 0 15px 0 0; border-radius: 99px; background: #F3E6E8; }
.cb-via-lleno { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #FF7A59, var(--marca)); transition: width .5s cubic-bezier(.3, .9, .3, 1); }
.cb-via-moto { position: absolute; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; color: var(--marca); box-shadow: 0 2px 8px rgba(120, 20, 40, .3); transition: left .5s cubic-bezier(.3, .9, .3, 1); }
.cb-via-moto .ico { width: 18px; height: 18px; }
.cb-listo { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #E7F7EE; color: #0E7A3C; font-size: 13.5px; font-weight: 800; }

.cb-filas { display: flex; flex-direction: column; gap: 9px; }
.cb-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #57484E; font-size: 14.5px; font-weight: 600; }
.cb-fila b { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cb-fila.ahorro, .cb-fila.ahorro b { color: #0E7A3C; font-weight: 800; }
.cb-fila.gratis b { color: #0E7A3C; font-weight: 800; }
.cb-fila.falta b { color: #9A8B91; font-weight: 600; }
.cb-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1.5px dashed #E6DCDA; font: 800 21px/1.1 var(--fuente-titulo); }
.cb-total b { font-variant-numeric: tabular-nums; }

.cb-enviar {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; padding: 0 16px;
  border-radius: 16px; background: #16C15E; color: #fff; font-size: 16.5px; font-weight: 800;
  box-shadow: 0 4px 0 #0FA84F, 0 12px 24px -10px rgba(22, 193, 94, .6);
  transition: translate .15s, box-shadow .15s;
}
.cb-enviar:hover { translate: 0 -1px; box-shadow: 0 5px 0 #0FA84F, 0 16px 28px -10px rgba(22, 193, 94, .65); }
.cb-enviar:active { translate: 0 3px; box-shadow: 0 1px 0 #0FA84F, 0 6px 14px -8px rgba(22, 193, 94, .6); }
.cb-enviar:disabled { opacity: .7; cursor: wait; translate: none; }
.cb-nota { margin-top: -6px; color: #9A8B91; font-size: 12px; text-align: center; }

.cb-confianza { display: flex; flex-direction: column; gap: 8px; }
.cb-confianza li { display: flex; align-items: center; gap: 8px; color: #57484E; font-size: 13px; font-weight: 600; }
.cb-confianza .ico { width: 17px; height: 17px; color: var(--marca); }

#aviso-entrega:empty { display: none; }
#aviso-entrega .aviso { margin: 0; }
#aviso-entrega b { font-weight: 800; }


/* ─── 6. Bolsa vacía ─────────────────────────────────────────── */

.cb-vacia { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 20px; border-radius: 20px; background: #fff; text-align: center; }
.cb-vacia > .ico { width: 54px; height: 54px; color: var(--marca); stroke-width: 1.6; }
.cb-vacia-t { font: 800 26px/1.1 var(--fuente-titulo); }
.cb-vacia-s { max-width: 380px; color: #57484E; font-size: 15px; }
.cb-vacia-b { padding: 13px 24px; border-radius: 99px; background: var(--marca); color: #fff; font-size: 15px; font-weight: 700; transition: background .15s; }
.cb-vacia-b:hover { background: var(--marca-oscura); color: #fff; }
.cb-ok { padding: 10px 16px; border-radius: 12px; background: #E7F7EE; color: #0E7A3C; font-size: 14.5px; font-weight: 700; }


/* ─── 7. Tablet y celular ────────────────────────────────────── */

@media (max-width: 900px) {
  .cb-grid { grid-template-columns: 1fr; }
  .cb-resumen { position: static; }
  .cb-dos { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .cb { padding-block: 24px 60px; }
  .cb-ruta { display: none; }
  .cb-bloque, .cb-resumen { padding: 18px 16px; }
  .cb-item { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; align-items: start; }
  .cb-acc { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .cb-der { flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
}

@media (max-width: 360px) {
  .cb-item { grid-template-columns: 56px minmax(0, 1fr); }
  .cb-acc { grid-column: 1 / -1; }
  .cb-tabs .entrega-tab { font-size: 13px; gap: 6px; }
}


/* Producto de la bolsa que se agotó: "Avísame cuando llegue" (WhatsApp del bot) */
.cb-avisame { color: var(--marca); font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cb-avisame:hover { color: var(--marca-oscura); }