/* ========================================
   ESTILOS PRINCIPALES COBAQROO 45 ANIVERSARIO
   ======================================== */

/* Estilos base */
body { 
  font-family: 'Poppins', sans-serif; 
  background: var(--color-bg-secondary); 
}

.shadow-xl { 
  box-shadow: 0 10px 32px 0 var(--color-shadow)!important; 
}

/* ========================================
   CLASES CSS PERSONALIZADAS
   ======================================== */

/* ===== CLASES PRINCIPALES ===== */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-hover:hover { background-color: var(--color-primary-hover) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }

.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-light { color: var(--color-text-light) !important; }
.text-white { color: var(--color-text-white) !important; }

/* ===== CLASES DE ACTIVIDADES ===== */
.bg-activity-1 { background-color: var(--color-activity-1) !important; }
.bg-activity-1-hover:hover { background-color: var(--color-activity-1-hover) !important; }
.bg-activity-2 { background-color: var(--color-activity-2) !important; }
.bg-activity-2-hover:hover { background-color: var(--color-activity-2-hover) !important; }
.bg-activity-3 { background-color: var(--color-activity-3) !important; }
.bg-activity-3-hover:hover { background-color: var(--color-activity-3-hover) !important; }
.bg-activity-4 { background-color: var(--color-activity-4) !important; }
.bg-activity-4-hover:hover { background-color: var(--color-activity-4-hover) !important; }
.bg-activity-5 { background-color: var(--color-activity-5) !important; }
.bg-activity-5-hover:hover { background-color: var(--color-activity-5-hover) !important; }
.bg-activity-6 { background-color: var(--color-activity-6) !important; }
.bg-activity-6-hover:hover { background-color: var(--color-activity-6-hover) !important; }

/* ===== CLASES DE FONDO ===== */
.bg-card { background-color: var(--color-bg-card) !important; }
.bg-overlay { background-color: var(--color-bg-overlay) !important; }

/* ===== CLASES DE BOTONES ===== */
.btn-primary { 
  background-color: var(--color-button-primary) !important; 
  color: white !important;
}
.btn-primary:hover { 
  background-color: var(--color-button-hover) !important; 
}

/* ===== CLASES DE ICONOS ===== */
.icon-primary { color: var(--color-icon-primary) !important; }
.icon-secondary { color: var(--color-icon-secondary) !important; }
.icon-white { color: var(--color-text-white) !important; }

/* ===== CLASES DE TEXTO ===== */
.text-dark { color: var(--color-text-dark) !important; }
.text-medium { color: var(--color-text-medium) !important; }
.text-light-gray { color: var(--color-text-light-gray) !important; }

/* ========================================
   OVERRIDE DE COLORES DE TAILWIND
   ======================================== */

/* Colores fuchsia (usados como principal) */
.bg-fuchsia-500 { background-color: var(--color-primary) !important; }
.bg-fuchsia-600 { background-color: var(--color-primary-hover) !important; }
.hover\:bg-fuchsia-600:hover { background-color: var(--color-primary-hover) !important; }
.text-fuchsia-500 { color: var(--color-primary) !important; }
.text-fuchsia-600 { color: var(--color-primary-hover) !important; }

/* Colores de texto gris */
.text-gray-600 { color: var(--color-text-medium) !important; }
.text-gray-700 { color: var(--color-text-dark) !important; }
.text-gray-500 { color: var(--color-text-light-gray) !important; }
.text-gray-300 { color: var(--color-text-light) !important; }
.text-gray-200 { color: var(--color-text-light) !important; }

/* Colores de fondo gris */
.bg-gray-100 { background-color: var(--color-bg-secondary) !important; }

/* Colores de actividades específicas */
.bg-sky-400 { background-color: var(--color-activity-2) !important; }
.bg-sky-500 { background-color: var(--color-activity-2-hover) !important; }
.hover\:bg-sky-500:hover { background-color: var(--color-activity-2-hover) !important; }

.bg-emerald-400 { background-color: var(--color-activity-3) !important; }
.bg-emerald-500 { background-color: var(--color-activity-3-hover) !important; }
.hover\:bg-emerald-500:hover { background-color: var(--color-activity-3-hover) !important; }

.bg-indigo-400 { background-color: var(--color-activity-4) !important; }
.bg-indigo-500 { background-color: var(--color-activity-4-hover) !important; }
.hover\:bg-indigo-500:hover { background-color: var(--color-activity-4-hover) !important; }

.bg-pink-400 { background-color: var(--color-activity-5) !important; }
.bg-pink-500 { background-color: var(--color-activity-5-hover) !important; }
.hover\:bg-pink-500:hover { background-color: var(--color-activity-5-hover) !important; }

.bg-orange-400 { background-color: var(--color-activity-6) !important; }
.bg-orange-500 { background-color: var(--color-activity-6-hover) !important; }
.hover\:bg-orange-500:hover { background-color: var(--color-activity-6-hover) !important; }

/* ===== COLORES ESPECIALES ===== */
.bg-llamado-accion { background-color: var(--color-llamado-accion) !important; }
.bg-llamado-accion:hover { background-color: var(--color-llamado-accion-hover) !important; }
.text-llamado { color: var(--color-text-llamado) !important; }
.text-llamado-sub { color: var(--color-text-llamado-sub) !important; }

/* Colores de estadísticas */
.text-stats-number { color: var(--color-stats-number) !important; }

/* Colores de modales */
.bg-modal { background-color: var(--color-modal-bg) !important; }
.border-modal { border-color: var(--color-modal-border) !important; }
.text-modal { color: var(--color-modal-text) !important; }
.text-modal-sub { color: var(--color-modal-text-sub) !important; }

/* ========================================
   OVERRIDE DE COLORES ESPECÍFICOS DE LA PÁGINA
   ======================================== */

/* Colores específicos usados en el HTML */
.bg-\[#2d2c4e\] { background-color: var(--color-secondary) !important; }
.bg-\[#1ac6d3\] { background-color: var(--color-primary) !important; }
.bg-\[#E040FB\] { background-color: var(--color-llamado-accion) !important; }
.bg-\[#D63384\] { background-color: var(--color-llamado-accion-hover) !important; }
.hover\:bg-\[#D63384\]:hover { background-color: var(--color-llamado-accion-hover) !important; }

.text-\[#2d2c4e\] { color: var(--color-text-primary) !important; }
.text-\[#332B47\] { color: var(--color-text-llamado) !important; }
.text-\[#5A526B\] { color: var(--color-text-llamado-sub) !important; }

/* Colores de estadísticas */
.text-fuchsia-500 { color: var(--color-stats-number) !important; }

/* Overlay para mejorar la legibilidad del botón */
.hamburger-menu-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}