/*
   ==========================================================================
   COMPONENTE: Carrito
   Globo flotante fijo en la esquina inferior derecha en todos los tamaños de
   pantalla — no hay modo "sidebar" de escritorio. Al agregar un producto el
   panel se abre solo (ver el listener de cart:add en cada vista); el botón
   de la cabecera lo minimiza de vuelta al globo sin vaciar el carrito ni
   perder el conteo (ver [data-cart-minimize] en welcome_message.php/
   catalogo.php/como_comprar.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Burbuja flotante
   -------------------------------------------------------------------------- */
.cart-bubble {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  /* Por encima de .modal-overlay (z-index 300): si el catálogo o el modal de
     WhatsApp están abiertos, la burbuja tiene que seguir visible y tocable
     para que agregar productos se sienta en vivo. */
  z-index: 325;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: none;
  background-color: var(--color-accent);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cart-bubble[hidden] { display: none; }
.cart-bubble svg { width: 1.4rem; height: 1.4rem; }

/* Mientras el panel está abierto, la burbuja que lo abre/minimiza se oculta —
   dos controles superpuestos para la misma acción en el mismo punto de la
   pantalla es redundante. Opacity/transform para que sea una transición
   suave, no un corte seco, sin pisar [hidden] (que decide si la burbuja
   existe según haya o no ítems en el carrito). */
.cart-bubble.is-panel-open {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

/* Bamboleo lateral breve y repetido para llamar la atención mientras hay
   ítems en el carrito y el panel está cerrado — se corta si el panel está
   abierto (ahí la burbuja ya está oculta, ver arriba) para no pelear con su
   transform de opacity/scale. */
.cart-bubble:not([hidden]):not(.is-panel-open) {
  animation: cart-bubble-wiggle 2.6s ease-in-out infinite;
}
@keyframes cart-bubble-wiggle {
  0%, 82%, 100% { transform: translateX(0); }
  85% { transform: translateX(-4px); }
  88% { transform: translateX(3px); }
  91% { transform: translateX(-3px); }
  94% { transform: translateX(2px); }
  97% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-bubble:not([hidden]):not(.is-panel-open) { animation: none; }
}

.cart-bubble-count {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg-main);
}

/* --------------------------------------------------------------------------
   Backdrop (mientras el carrito está abierto)
   -------------------------------------------------------------------------- */
.cart-backdrop {
  position: fixed;
  inset: 0;
  /* También por encima de .modal-overlay (300): el carrito tiene que poder
     abrirse sobre un catálogo/login abiertos, no quedar detrás. */
  z-index: 320;
  background-color: rgba(22, 36, 28, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cart-backdrop[hidden] { display: none; }
.cart-backdrop.is-open { opacity: 1; }

/* --------------------------------------------------------------------------
   Panel de carrito — tarjeta flotante anclada sobre la burbuja, igual en
   todos los tamaños de pantalla. `.page-with-cart` (ver welcome_message.php/
   catalogo.php/como_comprar.php) es hoy un wrapper inerte: el carrito ya no
   vive en el flujo del documento, así que <main> ocupa todo el ancho.
   -------------------------------------------------------------------------- */
.cart-panel {
  position: fixed;
  z-index: 321;
  right: 1rem;
  bottom: 5.5rem;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform-origin: bottom right;
  transform: translateY(0.75rem) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cart-panel[hidden] { display: none; }
.cart-panel.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.cart-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
}
.cart-panel-head h3 { margin: 0; font-size: 1.15rem; }
.cart-panel-head span { color: var(--color-text-soft); font-weight: 400; display: inline-block; }

/* Pulso breve sobre el contador al agregar un producto (feedback en vivo) */
.cart-count-bump { animation: cart-count-bump 0.35s ease; }
@keyframes cart-count-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); color: var(--color-accent); }
  100% { transform: scale(1); }
}

.cart-panel-items {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* Sin esto, Windows/Chrome pintan el scrollbar nativo con el accent color
     del sistema (celeste) sobre el fondo crema del panel — desentona con la
     paleta. Lo alineamos a los tokens en vez de dejarlo en default. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.cart-panel-items::-webkit-scrollbar { width: 6px; }
.cart-panel-items::-webkit-scrollbar-track { background: transparent; }
.cart-panel-items::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: var(--radius-sm);
}
.cart-panel-items::-webkit-scrollbar-thumb:hover { background-color: var(--color-secondary); }

.cart-empty {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  animation: cart-line-in 0.25s ease;
}

@keyframes cart-line-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cart-line img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.cart-line-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cart-line-info strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-line-info span { font-size: 0.75rem; color: var(--color-text-soft); }

.cart-line-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.cart-line-qty button {
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--color-text-main);
  cursor: pointer;
}
.cart-line-qty button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cart-line-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.cart-line-qty button:disabled:hover { border-color: var(--border-color); color: var(--color-text-main); }
.cart-line-qty span { font-family: var(--font-mono); font-size: 0.8rem; min-width: 1rem; text-align: center; }

.cart-line-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.cart-line-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-primary);
  white-space: nowrap;
}
.cart-line-remove {
  border: none;
  background: none;
  color: var(--color-text-soft);
  cursor: pointer;
  padding: 0.15rem;
}
.cart-line-remove:hover { color: var(--color-danger); }
.cart-line-remove svg { width: 0.9rem; height: 0.9rem; }

.cart-panel-footer {
  padding: 1rem 1.25rem 1.35rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cart-panel-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.cart-panel-total strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-primary);
}