/* ========================================
   SISTEMA DE COLORES COBAQROO 45 ANIVERSARIO
   ========================================
   
   INSTRUCCIONES DE USO:
   
   1. PARA CAMBIAR COLORES: Modifica los valores en las variables CSS de abajo
   2. TODOS los colores de la página se controlan desde aquí
   3. Los cambios se aplican automáticamente a toda la página
   4. No necesitas tocar el HTML, solo cambiar estos valores
   
   EJEMPLOS:
   - Cambiar color principal: modifica --color-primary
   - Cambiar color de botones: modifica --color-button-primary
   - Cambiar color de iconos: modifica --color-icon-primary
   
   ======================================== */
:root {
  /* ===== COLORES PRINCIPALES ===== */
  --color-primary: #1ac6d3;           /* Color principal (cyan) */
  --color-primary-hover: #0dcaf0;     /* Color principal hover */
  --color-secondary: #2d2c4e;         /* Color secundario (azul oscuro) */
  --color-accent: #1ac6d3;            /* Color de acento */
  
  /* ===== COLORES DE ACTIVIDADES ===== */
  --color-activity-1: #1ac6d3;        /* Festival de Papalotes */
  --color-activity-1-hover: #0dcaf0;  /* Festival de Papalotes hover */
  --color-activity-2: #1ac6d3;        /* Carreras (sky-400) */
  --color-activity-2-hover: #0dcaf0;  /* Carreras hover */
  --color-activity-3: #1ac6d3;        /* Convivencia Deportiva (emerald-400) */
  --color-activity-3-hover: #0dcaf0;  /* Convivencia Deportiva hover */
  --color-activity-4: #6366f1;        /* Desfile Conmemorativo (indigo-400) */
  --color-activity-4-hover: #4f46e5;  /* Desfile Conmemorativo hover */
  --color-activity-5: #ec4899;        /* Eventos Culturales (pink-400) */
  --color-activity-5-hover: #db2777;  /* Eventos Culturales hover */
  --color-activity-6: #f97316;        /* Jornada Académica (orange-400) */
  --color-activity-6-hover: #ea580c;  /* Jornada Académica hover */
  
  /* ===== COLORES DE TEXTO ===== */
  --color-text-primary: #2d2c4e;      /* Texto principal */
  --color-text-secondary: #6b7280;    /* Texto secundario */
  --color-text-light: #9ca3af;        /* Texto claro */
  --color-text-white: #ffffff;        /* Texto blanco */
  --color-text-dark: #2d2c4e;         /* Texto oscuro */
  --color-text-medium: #6b7280;       /* Texto medio */
  --color-text-light-gray: #9ca3af;   /* Texto gris claro */
  
  /* ===== COLORES DE FONDO ===== */
  --color-bg-primary: #ffffff;        /* Fondo blanco */
  --color-bg-secondary: #f4f4f9;      /* Fondo gris claro */
  --color-bg-card: #ffffff;           /* Fondo de tarjetas */
  --color-bg-overlay: rgba(0, 0, 0, 0.8); /* Overlay del menú */
  
  /* ===== COLORES DE BOTONES ===== */
  --color-button-primary: #1ac6d3;    /* Color principal de botones */
  --color-button-hover: #c026d3;      /* Color hover de botones */
  
  /* ===== COLORES DE ICONOS ===== */
  --color-icon-primary: #1ac6d3;      /* Color principal de iconos */
  --color-icon-secondary: #2d2c4e;    /* Color secundario de iconos */
  
  /* ===== COLORES DE BORDES ===== */
  --color-border: #f0f0f0;            /* Bordes claros */
  --color-border-hover: #f8f9fa;      /* Hover de elementos */
  
  /* ===== COLORES DE SOMBRAS ===== */
  --color-shadow: rgba(90, 62, 177, 0.16); /* Sombra principal */
  
  /* ===== COLORES ESPECIALES ===== */
  --color-llamado-accion: #E040FB;    /* Color del botón "Llamado a la Acción" */
  --color-llamado-accion-hover: #D63384; /* Hover del botón "Llamado a la Acción" */
  --color-text-llamado: #332B47;      /* Texto del "Llamado a la Acción" */
  --color-text-llamado-sub: #5A526B;  /* Texto secundario del "Llamado a la Acción" */
  
  /* ===== COLORES DE ESTADÍSTICAS ===== */
  --color-stats-number: #d63384;      /* Números de estadísticas */
  
  /* ===== COLORES DE MODALES ===== */
  --color-modal-bg: #F5F0F8;          /* Fondo de modales */
  --color-modal-border: rgba(224, 64, 251, 0.2); /* Bordes de modales */
  --color-modal-text: #332B47;        /* Texto de modales */
  --color-modal-text-sub: #5A526B;    /* Texto secundario de modales */
}