/* Variables de marca Disgrafca — mismas que el tema Tailwind (base.html). */
:root {
  --color-primary:     #D40000;   /* Rojo de marca */
  --color-primary-dark:#AA0000;
  --color-accent:      #F5A800;   /* Amarillo/dorado de acento */
  --color-accent-dark: #D48C00;
  --color-surface:     #F9FAFB;   /* gris-50 (fondo del sitio) */
  --color-text:        #1F2937;   /* gris-800 (texto) */
  --color-muted:       #6B7280;
}

/* Botón WhatsApp flotante */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  width: 3.5rem;
  height: 3.5rem;
  background-color: #25D366;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Badge de producto */
.badge-featured  { background: #F59E0B; color: #fff; }
.badge-new       { background: #10B981; color: #fff; }
.badge-sale      { background: #EF4444; color: #fff; }
.badge-by-order  { background: #8B5CF6; color: #fff; }

/* Card hover */
.product-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* HTMX loading indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator  { display: inline; }