/* =====================================================================
   EL PEDIDO — ícono flotante, panel y botones "Agregar"
   =====================================================================
   No es un carrito de ecommerce real (no hay cuentas ni pago): es una
   lista local que termina en un solo WhatsApp. Visualmente sí se siente
   como un carrito —contador, vuelo de producto, panel deslizante—
   porque eso fue justo lo que se pidió: que "se sienta" a una tienda,
   sin dejar de terminar en WhatsApp y sin pedir cuenta a nadie.
   ===================================================================== */

/* ---------------------------------------------------------------
   Botón "Agregar"
   Color azul —no verde—: el verde se queda exclusivo para lo que de
   verdad abre WhatsApp. "Agregar" es una acción de la marca, no de
   WhatsApp, así que lleva el azul.
   --------------------------------------------------------------- */
.js-agregar{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  flex:1; min-height:44px; padding:.7rem 1rem; border-radius:99px;
  border:1.5px solid var(--s-azul,#1e2d5c); background:var(--s-azul,#1e2d5c);
  color:#fff; font-weight:700; font-size:.86rem; font-family:inherit;
  cursor:pointer; text-decoration:none;
  transition:background .18s, transform .15s, box-shadow .18s;
  box-shadow:0 8px 18px -10px rgba(30,45,92,.55);
}
.js-agregar:hover{ background:var(--s-azul-claro,#2a3d6e); transform:translateY(-1px); }
.js-agregar:active{ transform:scale(.96); }
.js-agregar.agregado{
  background:#0f7b4f; border-color:#0f7b4f; color:#fff;
  animation:carr-confirma .4s ease;
}
@keyframes carr-confirma{ 0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); } }

/* Botón de WhatsApp directo, compacto —solo ícono— para quien quiere
   preguntar por una sola cosa sin pasar por el pedido. */
.js-wa-directo{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid #25D366; color:#128c4e; background:#fff;
  text-decoration:none; font-size:1rem; transition:background .18s, color .18s, transform .15s;
}
.js-wa-directo:hover{ background:#25D366; color:#fff; transform:translateY(-1px); }
.js-wa-directo:active{ transform:scale(.94); }

/* ---------------------------------------------------------------
   Ícono flotante
   Se suma al grupo que ya arman el asistente y WhatsApp: mismo tamaño,
   misma fila, mismo ritmo. Solo se muestra —con una entrada suave—
   cuando hay algo en el pedido.
   --------------------------------------------------------------- */
.carr-lanza{
  position:fixed; z-index:61;
  right:calc(1.15rem + (56px + .6rem) * 2); bottom:1.15rem;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(150deg, #d8a21f, #b9860f 65%);
  color:#20160a;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  box-shadow:0 6px 16px -4px rgba(185,134,15,.5), 0 14px 34px -12px rgba(185,134,15,.55);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, opacity .2s, visibility .2s;
  opacity:0; visibility:hidden; transform:scale(.7);
}
.carr-lanza.con-cosas{ opacity:1; visibility:visible; transform:scale(1); }
.carr-lanza:hover{ transform:scale(1.06); }
.carr-lanza:focus-visible{ outline:3px solid var(--s-azul,#1e2d5c); outline-offset:3px; }
.carr-lanza.pulso{ animation:carr-pulso .5s cubic-bezier(.34,1.5,.64,1); }
@keyframes carr-pulso{ 0%{ transform:scale(1); } 35%{ transform:scale(1.22); } 100%{ transform:scale(1); } }

.carr-badge{
  position:absolute; top:-2px; right:-2px; min-width:22px; height:22px;
  padding:0 5px; border-radius:11px; background:var(--s-rojo,#b91c1c);
  color:#fff; border:2px solid #fff; font-size:.7rem; font-weight:800;
  line-height:18px; text-align:center; font-variant-numeric:tabular-nums;
}

/* Mismo tamaño en el teléfono que en escritorio: ni WhatsApp ni el
   asistente se achican ahí, así que el carrito tampoco —para que las
   tres burbujas se sigan leyendo como un solo grupo parejo. */

/* Con la barra móvil de la ficha, el grupo entero se sube (ver ui.css
   para .as-lanza / .av-tira bajo la misma clase en body). */
body.con-barra-movil .carr-lanza{ bottom:calc(76px + 1.15rem) !important; }

/* ---------------------------------------------------------------
   El panel — reutiliza .u-hoja de ui.css (la misma hoja que ya usan
   los filtros del catálogo), así el gesto de "sube desde abajo" es
   uno solo en todo el sitio.
   --------------------------------------------------------------- */
.carr-hoja{ max-width:480px; margin:0 auto; left:0; right:0; }
.carr-lista{ padding:.5rem 1.25rem; display:flex; flex-direction:column; gap:.7rem; }

.carr-item{
  display:flex; align-items:center; gap:.75rem; padding:.6rem;
  border:1px solid var(--s-linea,#e5e7eb); border-radius:14px;
  animation:carr-entra .3s ease both;
}
@keyframes carr-entra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.carr-item-foto{ width:52px; height:52px; flex:none; border-radius:10px; overflow:hidden;
                  background:linear-gradient(160deg,#eef1f7,#dfe5ef); }
.carr-item-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.carr-sin-foto{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
                color:var(--s-gris-2,#9ca3af); }

.carr-item-txt{ flex:1; min-width:0; }
.carr-item-txt .n{ display:block; font-size:.86rem; font-weight:700; color:var(--s-tinta,#111827);
                    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.carr-item-txt .p{ display:block; font-size:.75rem; color:var(--s-gris,#6b7280); margin-top:.1rem; }

.carr-cant{ flex:none; transform:scale(.88); transform-origin:right center; }
.carr-cant input{ width:40px; }

.carr-quitar{
  flex:none; width:34px; height:34px; border-radius:50%; border:none; background:transparent;
  color:var(--s-gris-2,#9ca3af); cursor:pointer; transition:background .15s, color .15s;
}
.carr-quitar:hover{ background:#fdeeee; color:var(--s-rojo,#b91c1c); }

.carr-vacio{ text-align:center; padding:2.5rem 1.5rem; color:var(--s-gris,#6b7280); }
.carr-vacio i{ font-size:2rem; color:var(--s-linea,#e5e7eb); display:block; margin-bottom:.75rem; }
.carr-vacio p{ margin:0; font-size:.88rem; line-height:1.5; }

.carr-pie{
  position:sticky; bottom:0; background:#fff; padding:1rem 1.25rem 0;
  border-top:1px solid var(--s-linea,#e5e7eb); margin-top:.5rem;
}
.carr-total-fila{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.85rem; }
.carr-total-fila span{ font-size:.85rem; color:var(--s-gris,#6b7280); font-weight:600; }
.carr-total{ font-size:1.55rem; font-weight:800; color:var(--s-azul,#1e2d5c); letter-spacing:-.02em; }
.carr-enviar{ width:100%; }
.carr-vaciar{
  display:block; width:100%; text-align:center; border:none; background:transparent;
  color:var(--s-gris-2,#9ca3af); font-size:.8rem; padding:.75rem 0 .25rem; cursor:pointer;
  font-family:inherit; transition:color .15s;
}
.carr-vaciar:hover{ color:var(--s-rojo,#b91c1c); }

/* ---------------------------------------------------------------
   AVISO DE DISPONIBILIDAD
   No bloquea el envío —la negociación sigue siendo por WhatsApp—
   pero avisa ANTES de mandar un pedido que ya no se puede cumplir.
   --------------------------------------------------------------- */
.carr-aviso-fecha{
  margin:0 1.25rem .75rem; padding:.7rem .9rem; border-radius:12px;
  font-size:.78rem; line-height:1.4; display:flex; gap:.55rem; align-items:flex-start;
  background:#f0f4ff; color:#1d3a7a;
}
.carr-aviso-fecha i{ color:var(--s-azul,#1e2d5c); margin-top:.1rem; flex:none; }
.carr-aviso-fecha.alerta{ background:#fdf6e3; color:#8a6410; }
.carr-aviso-fecha.alerta i{ color:#b9860f; }

.carr-falta{
  display:inline-block; margin-top:.25rem; font-size:.7rem; font-weight:800;
  color:#991b1b; background:#fdeeee; padding:.15rem .5rem; border-radius:99px;
}

/* ---- Apartar el pedido desde el carrito ---- */
.carr-datos { display:grid; gap:.5rem; margin:.75rem 0 .5rem; }
.carr-datos input {
  width:100%; padding:.6rem .75rem; border:1.5px solid var(--bd, #d7dce5);
  border-radius:10px; font:inherit; font-size:.95rem; background:#fff;
}
.carr-datos input:focus { outline:none; border-color:var(--az-700, #1e3a8a); }
.carr-msg {
  margin:.25rem 0 .5rem; font-size:.88rem; color:#1e3a8a;
  background:#f1f5ff; border-radius:8px; padding:.5rem .7rem;
}
.carr-msg-error { color:#991b1b; background:#fdeeee; }
.carr-nota { font-size:.8rem; color:#6b7280; margin:.4rem 0 .6rem; }
.carr-solo-wa {
  display:block; text-align:center; font-size:.85rem; color:#047857;
  margin:.2rem 0 .4rem; text-decoration:underline;
}
.carr-hecho {
  display:flex; flex-direction:column; gap:.5rem; align-items:flex-start;
  background:#ecfdf5; border:1px solid #a7f3d0; border-radius:14px;
  padding:1rem; margin-bottom:.75rem; color:#065f46;
}
.carr-hecho > i { font-size:1.6rem; color:#059669; }
.carr-hecho strong { font-size:1rem; color:#064e3b; }
.carr-hecho span { font-size:.9rem; }
.carr-hecho .s-btn { width:100%; justify-content:center; }
.carr-ver { font-size:.85rem; color:#065f46; text-decoration:underline; }

/* Elegir el día desde el propio carrito, cuando todavía no hay fecha */
.carr-aviso-elegir label { display:flex; align-items:center; gap:.5rem; font-weight:600; margin-bottom:.4rem; }
.carr-fecha-input {
  width:100%; padding:.6rem .75rem; border:1.5px solid var(--bd, #d7dce5);
  border-radius:10px; font:inherit; font-size:1rem; background:#fff;
}

/* Rango de fechas y precio final en la confirmacion */
.carr-hasta-l { font-size:.85rem; font-weight:600; color:#374151; margin-top:.2rem; }
.carr-hasta-l span { font-weight:400; color:#6b7280; }
.carr-fecha-fin {
  width:100%; padding:.6rem .75rem; border:1.5px solid var(--bd, #d7dce5);
  border-radius:10px; font:inherit; font-size:.95rem; background:#fff;
}
.carr-precio-nota { font-size:.8rem; color:#6b7280; }