/* ============================================================
   Barra flotante de "agregado al carrito"
   ------------------------------------------------------------
   Auditoría 22-sep-2026: en móvil, agregar un producto solo movía
   un número diminuto en el ícono del header — fácil de no notar,
   y la clienta se quedaba sin un camino claro hacia el checkout.
   Esta barra aparece SOBRE el botón flotante del chat (nunca lo
   tapa: se apila encima, usando el mismo punto de quiebre a 560px
   que assets/css/chat-widget.css) con el conteo del carrito y un
   botón directo a carrito.php.
   ============================================================ */
.carrito-flotante {
  position: fixed;
  left: 14px; right: 14px; bottom: 78px;
  z-index: 9997;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px;
  background: var(--black, #0D0D0D);
  color: var(--linen, #FAF8F5);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(13,13,13,.3);
  font-family: var(--font-body, sans-serif);
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s;
}
.carrito-flotante.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

.carrito-flotante-fila { display: flex; align-items: center; gap: 12px; }
.carrito-flotante-icono { font-size: 20px; flex: 0 0 auto; }
.carrito-flotante-texto { flex: 1; font-size: 13px; line-height: 1.35; }
.carrito-flotante-acciones { display: flex; gap: 8px; }
.carrito-flotante-btn {
  flex: 0 0 auto;
  background: var(--gold, #C4984A); color: #0D0D0D;
  padding: 9px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  text-align: center;
}
/* "Pagar ahora" (8-oct-2026): salta derecho a checkout.php, sin pasar por
   carrito.php — para quien ya sabe que quiere pagar y no necesita revisar
   el carrito primero. "Ver carrito" (ghost, menos prominente) sigue ahí
   para quien sí quiere revisarlo o agregar algo más antes de pagar. */
.carrito-flotante-acciones { flex-wrap: nowrap; }
.carrito-flotante-btn.carrito-flotante-btn--pagar { flex: 1 1 auto; text-align: center; }
.carrito-flotante-btn.carrito-flotante-btn--ver {
  background: none; color: var(--linen, #FAF8F5); border: 1.5px solid rgba(250,248,245,.35);
  flex: 0 0 auto;
}

@media (min-width: 561px) {
  .carrito-flotante {
    left: auto; right: 22px; bottom: 96px; max-width: 340px;
  }
}