/* ========================================
   TEMA ROJO INTENSO - SISTEMA DE VARIABLES CSS
   ======================================== */

:root {
  /* ===== COLORES PRINCIPALES - ROJO INTENSO ===== */
  
  /* Color primario - Rojo vibrante y llamativo */
  --color-primary: #DC2626;         /* Rojo intenso */
  --color-primary-hover: #B91C1C;   /* Rojo más intenso */
  --color-primary-dark: #B91C1C;    /* Rojo oscuro */
  --color-primary-light: #EF4444;   /* Rojo suave */

  /* Color secundario - Rojo complementario */
  --color-secondary: #B91C1C;       /* Similar al hover del primario */
  --color-secondary-hover: #DC2626; /* Más oscuro */
  --color-secondary-light: #DC2626; /* Rojo base */

  /* Colores de fondo - Tonos rojos suaves */
  --color-bg-primary: #fef2f2;      /* Fondo muy suave (rojo claro) */
  --color-bg-secondary: #fee2e2;    /* Fondo suave */
  --color-bg-accent: #fecaca;       /* Fondo con más presencia */

  /* Color de acento - Rojo vibrante para badges */
  --color-accent: #DC2626;
  --color-accent-hover: #B91C1C;
  --color-accent-light: #EF4444;
  
  /* Color del footer - Más oscuro que primary-dark */
  --color-footer: #450a0a;
  
  /* Colores de estado - Manteniendo la funcionalidad */
  --color-success: #10b981;
  --color-success-light: #34d399;
  --color-success-bg: #d1fae5;
  
  --color-error: #ef4444;
  --color-error-light: #f87171;
  --color-error-bg: #fee2e2;
  
  --color-info: #3b82f6;
  --color-info-light: #60a5fa;
  --color-info-bg: #dbeafe;
  
  /* Colores con transparencia - Rojo */
  --color-alpha-light: rgba(239, 68, 68, 0.1);
  --color-alpha-medium: rgba(239, 68, 68, 0.2);
  --color-alpha-strong: rgba(239, 68, 68, 0.3);
  --color-alpha-overlay: rgba(239, 68, 68, 0.8);
  
  /* Overlay para modales */
  --color-overlay-dark: rgba(0, 0, 0, 0.6);
  
  /* ===== GRADIENTES ROJOS ===== */
  
  /* Gradiente principal - Rojo energético */
  --gradient-primary: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  
  /* Gradiente suave - Para fondos */
  --gradient-soft: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  
  /* Gradiente intenso - Rojo vibrante */
  --gradient-intense: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
  
  /* Gradiente radial - Efecto rojo */
  --gradient-radial: radial-gradient(circle at center, var(--color-primary) 0%, var(--color-secondary) 70%);
  
  /* Gradiente con transparencia */
  --gradient-overlay: linear-gradient(135deg, var(--color-alpha-medium) 0%, var(--color-alpha-strong) 100%);
  
  /* Gradiente WhatsApp - Adaptado a rojo */
  --gradient-whatsapp: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  
  /* ===== SOMBRAS ROJAS ===== */
  
  --shadow-soft: 0 2px 4px var(--color-alpha-light);
  --shadow-medium: 0 4px 8px var(--color-alpha-medium);
  --shadow-strong: 0 8px 16px var(--color-alpha-strong);
  --shadow-glow: 0 0 20px var(--color-alpha-medium);
}

/* ========================================
   CLASES UTILITARIAS MODERNAS
   ======================================== */

/* Colores de texto */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-primary-dark { color: var(--color-primary-dark); }

/* Colores de fondo */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-soft { background-color: var(--color-bg-primary); }
.bg-accent { background-color: var(--color-bg-secondary); }
.bg-overlay-dark { background-color: var(--color-overlay-dark); }

/* Gradientes */
.gradient-primary { background: var(--gradient-primary); }
.gradient-soft { background: var(--gradient-soft); }
.gradient-intense { background: var(--gradient-intense); }
.gradient-whatsapp { background: var(--gradient-whatsapp); }

/* Bordes */
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }

/* Sombras */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-strong { box-shadow: var(--shadow-strong); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* ========================================
   EFECTOS HOVER PROFESIONALES
   ======================================== */

.hover-primary:hover { 
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.hover-secondary:hover { 
  background-color: var(--color-secondary-hover);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.hover-gradient:hover {
  background: var(--gradient-intense);
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
  transition: all 0.3s ease;
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
  transition: all 0.3s ease;
}

/* ========================================
   COMPONENTES ESPECIALIZADOS
   ======================================== */

/* Botones profesionales */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  box-shadow: var(--shadow-medium);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: var(--gradient-intense);
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

/* Cards con gradiente */
.card-gradient {
  background: var(--gradient-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

.card-gradient:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

/* Botón agregar al carrito con estado active */
.btn-add-to-cart {
  background-color: var(--color-primary);
}

.btn-add-to-cart:active {
  background-color: var(--color-primary-dark) !important;
}