/**
 * Sistema de colores LUUA - Luua
 * Basado en el Manual de Identidad Visual LUUA
 * "Empowering Purposeful Play"
 */

:root {
  /* ========== COLORES PRINCIPALES LUUA ========== */
  
  /* Color Canvas (blanco LUUA) */
  --luua-canvas: #F8F8F8;
  --luua-canvas-rgb: 248, 248, 248;
  
  /* Color Negro LUUA */
  --luua-black: #2F2F2F;
  --luua-black-rgb: 47, 47, 47;
  
  /* ========== PALETA SECUNDARIA OFICIAL LUUA ========== */
  
  /* Verde Lima - Energía vital, naturaleza, alegría */
  --luua-lime: #CEDC28;
  --luua-lime-rgb: 206, 220, 40;
  --luua-lime-pantone: 381C;
  
  /* Turquesa - Mente, confianza, concentración */
  --luua-turquoise: #46BFC8;
  --luua-turquoise-rgb: 70, 191, 200;
  --luua-turquoise-pantone: 2227C;
  --luua-turquoise-hover: #3BAAB4;
  
  /* Violeta - Poder, creatividad, juego */
  --luua-violet: #CB6CE6;
  --luua-violet-rgb: 203, 108, 230;
  --luua-violet-pantone: 252C;
  
  /* Rosa - Inocencia, gratitud, sensibilidad */
  --luua-pink: #FF66C4;
  --luua-pink-rgb: 255, 102, 196;
  --luua-pink-pantone: 232U;
  --luua-pink-hover: #E54FB0;
  
  /* ========== COLORES DERIVADOS (IN-BETWEEN) ========== */
  
  /* Naranja (único color derivado que puede usarse aislado) */
  --luua-orange: #FF9F1C;
  --luua-orange-rgb: 255, 159, 28;
  
  /* Gradientes derivados */
  --luua-gradient-lime-turquoise: linear-gradient(135deg, var(--luua-lime), var(--luua-turquoise));
  --luua-gradient-turquoise-violet: linear-gradient(135deg, var(--luua-turquoise), var(--luua-violet));
  --luua-gradient-violet-pink: linear-gradient(135deg, var(--luua-violet), var(--luua-pink));
  --luua-gradient-pink-lime: linear-gradient(135deg, var(--luua-pink), var(--luua-lime));
  
  /* ========== SISTEMA DE COLORES PARA UI ========== */
  
  /* Colores primarios del sistema */
  --color-primary: var(--luua-turquoise);
  --color-primary-light: #6BCDD4;
  --color-primary-dark: #3A9BA3;
  --color-primary-rgb: var(--luua-turquoise-rgb);
  
  /* Colores secundarios del sistema */
  --color-secondary: var(--luua-lime);
  --color-secondary-light: #D6E442;
  --color-secondary-dark: #B8C520;
  --color-secondary-rgb: var(--luua-lime-rgb);
  
  /* Estados del sistema */
  --color-success: var(--luua-lime);
  --color-success-rgb: var(--luua-lime-rgb);
  --color-danger: var(--luua-pink);
  --color-danger-rgb: var(--luua-pink-rgb);
  --color-warning: var(--luua-orange);
  --color-warning-rgb: var(--luua-orange-rgb);
  --color-info: var(--luua-turquoise);
  --color-info-rgb: var(--luua-turquoise-rgb);
  --color-creative: var(--luua-violet);
  --color-creative-rgb: var(--luua-violet-rgb);
  
  /* ========== COLORES NEUTROS ========== */
  
  --color-canvas: var(--luua-canvas);
  --color-light: var(--luua-canvas);
  --color-dark: var(--luua-black);
  --color-black: #000000;
  --color-gray: #bbbbbb;
  --color-gray-light: #dee2e6;
  --color-gray-dark: #6c757d;
  
  /* ========== TRANSPARENCIAS Y EFECTOS ========== */
  
  /* Transparencias de colores LUUA */
  --luua-lime-10: rgba(var(--luua-lime-rgb), 0.1);
  --luua-lime-20: rgba(var(--luua-lime-rgb), 0.2);
  --luua-lime-30: rgba(var(--luua-lime-rgb), 0.3);
  
  --luua-turquoise-10: rgba(var(--luua-turquoise-rgb), 0.1);
  --luua-turquoise-20: rgba(var(--luua-turquoise-rgb), 0.2);
  --luua-turquoise-30: rgba(var(--luua-turquoise-rgb), 0.3);
  
  --luua-violet-10: rgba(var(--luua-violet-rgb), 0.1);
  --luua-violet-20: rgba(var(--luua-violet-rgb), 0.2);
  --luua-violet-30: rgba(var(--luua-violet-rgb), 0.3);
  
  --luua-pink-10: rgba(var(--luua-pink-rgb), 0.1);
  --luua-pink-20: rgba(var(--luua-pink-rgb), 0.2);
  --luua-pink-30: rgba(var(--luua-pink-rgb), 0.3);
  
  /* Efectos glassmorphism LUUA */
  --luua-glass-bg: rgba(var(--luua-canvas-rgb), 0.8);
  --luua-glass-border: rgba(var(--luua-black-rgb), 0.1);
  --luua-glass-blur: blur(20px);
  
  /* Sombras con estilo LUUA */
  --luua-shadow-light: 0 4px 20px rgba(var(--luua-black-rgb), 0.1);
  --luua-shadow-medium: 0 8px 30px rgba(var(--luua-black-rgb), 0.15);
  --luua-shadow-heavy: 0 12px 40px rgba(var(--luua-black-rgb), 0.2);
  
  /* ========== VARIABLES DE COMPATIBILIDAD ========== */

  /* Variables Bootstrap necesarias para btn-outline-* */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-secondary);
  --bs-secondary-rgb: var(--color-secondary-rgb);
  --bs-success: var(--color-success);
  --bs-success-rgb: var(--color-success-rgb);
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: var(--color-danger-rgb);
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: var(--color-warning-rgb);
  --bs-info: var(--color-info);
  --bs-info-rgb: var(--color-info-rgb);
  --bs-light: var(--color-light);
  --bs-light-rgb: var(--luua-canvas-rgb);
  --bs-dark: var(--color-dark);
  --bs-dark-rgb: var(--luua-black-rgb);

  /* Estados hover para botones outline */
  --bs-primary-hover: var(--color-primary-darker);
  --bs-secondary-hover: var(--color-secondary-darker);
  --bs-success-hover: #A8B81A;
  --bs-danger-hover: var(--color-danger-darker);
  --bs-warning-hover: var(--color-warning-darker);
  --bs-info-hover: var(--color-info-darker);

  /* Bordes y colores de foco */
  --bs-border-color: var(--color-gray-light);
  --bs-focus-ring-color: var(--luua-turquoise-focus);

  --color-border: var(--luua-glass-border);
  --color-shadow: rgba(var(--luua-black-rgb), 0.15);
  --color-menu-hover: var(--luua-turquoise-20);
  --color-menu-active: var(--luua-turquoise-30);
  
  /* ========== RADIOS DE BORDE LUUA ========== */
  
  --luua-radius-sm: 0.5rem;
  --luua-radius-md: 1rem;
  --luua-radius-lg: 1.5rem;
  --luua-radius-xl: 2rem;
  
  /* Compatibilidad */
  --border-radius-sm: var(--luua-radius-sm);
  --border-radius-md: var(--luua-radius-md);
  --border-radius-lg: var(--luua-radius-lg);
}

/* ========== DARK MODE THEME ========== */
[data-theme="dark"] {
  /* Canvas */
  --luua-canvas: #121212;
  --luua-canvas-rgb: 18, 18, 18;
  
  /* Text */
  --luua-black: #F8F8F8;
  --luua-black-rgb: 248, 248, 248;
  
  /* Colors adjusted for dark mode */
  --luua-glass-bg: rgba(30, 30, 30, 0.8);
  --luua-glass-border: rgba(255, 255, 255, 0.08);
  
  /* System colors */
  --color-canvas: #121212;
  --color-light: #1E1E1E; /* Dark gray for cards */
  --color-dark: #F8F8F8;
  --color-black: #FFFFFF;
  --color-gray: #666666;
  --color-gray-light: #2C2C2C;
  --color-gray-dark: #AAAAAA;
  
  /* Navbar background */
  --bg-light: rgba(18, 18, 18, 0.95);
  --bg-lighter: rgba(30, 30, 30, 0.95);
  
  /* Shadows */
  --luua-shadow-light: 0 4px 20px rgba(0, 0, 0, 0.3);
  --luua-shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.4);
  --luua-shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.5);
  
  /* Borders */
  --border-light: rgba(255, 255, 255, 0.1);
  --border-medium: rgba(255, 255, 255, 0.2);
  
  /* Bootstrap overrides */
  --bs-body-bg: #121212;
  --bs-body-color: #F8F8F8;
  --bs-border-color: rgba(255, 255, 255, 0.1);
}

/* ========== CLASES DE COLOR DE TEXTO LUUA ========== */

.luua-lime { color: var(--luua-lime); }
.luua-turquoise { color: var(--luua-turquoise); }
.luua-violet { color: var(--luua-violet); }
.luua-pink { color: var(--luua-pink); }
.luua-orange { color: var(--luua-orange); }
.luua-canvas { color: var(--luua-canvas); }
.luua-black { color: var(--luua-black); }

/* Clases de color del sistema */
.color-primary { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }
.color-success { color: var(--color-success); }
.color-danger { color: var(--color-danger); }
.color-warning { color: var(--color-warning); }
.color-info { color: var(--color-info); }
.color-creative { color: var(--color-creative); }
.color-dark { color: var(--color-dark); }
.color-light { color: var(--color-light); }

/* ========== CLASES DE FONDO LUUA ========== */

.bg-luua-lime { background-color: var(--luua-lime) !important; color: var(--luua-black); }
.bg-luua-turquoise { background-color: var(--luua-turquoise) !important; color: var(--luua-canvas); }
.bg-luua-violet { background-color: var(--luua-violet) !important; color: var(--luua-canvas); }
.bg-luua-pink { background-color: var(--luua-pink) !important; color: var(--luua-canvas); }
.bg-luua-orange { background-color: var(--luua-orange) !important; color: var(--luua-canvas); }
.bg-luua-canvas { background-color: var(--luua-canvas) !important; color: var(--luua-black); }
.bg-luua-black { background-color: var(--luua-black) !important; color: var(--luua-canvas); }

/* Fondos del sistema */
.bg-primary { background-color: var(--color-primary) !important; color: var(--luua-canvas); }
.bg-secondary { background-color: var(--color-secondary) !important; color: var(--luua-black); }
.bg-success { background-color: var(--color-success) !important; color: var(--luua-black); }
.bg-danger { background-color: var(--color-danger) !important; color: var(--luua-canvas); }
.bg-warning { background-color: var(--color-warning) !important; color: var(--luua-canvas); }
.bg-info { background-color: var(--color-info) !important; color: var(--luua-canvas); }
.bg-creative { background-color: var(--color-creative) !important; color: var(--luua-canvas); }
.bg-light { background-color: var(--color-light) !important; color: var(--color-dark); }
.bg-dark { background-color: var(--color-dark) !important; color: var(--color-light); }

/* ========== FONDOS CON GRADIENTES LUUA ========== */

.bg-gradient-lime-turquoise { background: var(--luua-gradient-lime-turquoise) !important; color: var(--luua-canvas); }
.bg-gradient-turquoise-violet { background: var(--luua-gradient-turquoise-violet) !important; color: var(--luua-canvas); }
.bg-gradient-violet-pink { background: var(--luua-gradient-violet-pink) !important; color: var(--luua-canvas); }
.bg-gradient-pink-lime { background: var(--luua-gradient-pink-lime) !important; color: var(--luua-canvas); }

/* ========== CLASES DE BORDE LUUA ========== */

.border-luua-lime { border-color: var(--luua-lime) !important; }
.border-luua-turquoise { border-color: var(--luua-turquoise) !important; }
.border-luua-violet { border-color: var(--luua-violet) !important; }
.border-luua-pink { border-color: var(--luua-pink) !important; }
.border-luua-orange { border-color: var(--luua-orange) !important; }

.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-danger { border-color: var(--color-danger) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-info { border-color: var(--color-info) !important; }
.border-creative { border-color: var(--color-creative) !important; }
.border-light { border-color: var(--color-border) !important; }
.border-dark { border-color: var(--color-dark) !important; }

/* ========== EFECTOS GLASSMORPHISM LUUA ========== */

.luua-glass {
  background: var(--luua-glass-bg);
  backdrop-filter: var(--luua-glass-blur);
  border: 1px solid var(--luua-glass-border);
  border-radius: var(--luua-radius-md);
}

.luua-glass-card {
  background: var(--luua-glass-bg);
  backdrop-filter: var(--luua-glass-blur);
  border: 1px solid var(--luua-glass-border);
  border-radius: var(--luua-radius-lg);
  box-shadow: var(--luua-shadow-medium);
}

/* ========== ANIMACIONES LUUA ========== */

@keyframes luua-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes luua-pulse-glow {
  0%, 100% { box-shadow: 0 0 20px var(--luua-turquoise-20); }
  50% { box-shadow: 0 0 30px var(--luua-turquoise-30); }
}

@keyframes luua-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.luua-float { animation: luua-float 3s ease-in-out infinite; }
.luua-pulse-glow { animation: luua-pulse-glow 2s ease-in-out infinite; }
.luua-fadeInUp { animation: luua-fadeInUp 0.6s ease-out; }

/* ========== ESTILOS PARA COMPONENTES BOOTSTRAP LUUA ========== */

/* Botones Outline - Simplificados aprovechando Bootstrap */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary-hover);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary-hover);
}

/* Badges personalizados LUUA */
.badge {
  font-weight: 500;
  border-radius: var(--luua-radius-sm);
  padding: 0.35em 0.65em;
}

.bg-success {
  background-color: var(--bs-success) !important;
  color: var(--luua-black) !important;
}

.bg-danger {
  background-color: var(--bs-danger) !important;
  color: var(--luua-canvas) !important;
}

.bg-warning {
  background-color: var(--bs-warning) !important;
  color: var(--luua-black) !important;
}

.bg-info {
  background-color: var(--bs-info) !important;
  color: var(--luua-canvas) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: var(--luua-black) !important;
}

.bg-primary {
  background-color: var(--bs-primary) !important;
  color: var(--luua-canvas) !important;
}

/* Alerts personalizados LUUA */
.alert {
  border: none;
  border-radius: var(--luua-radius-md);
  font-weight: 500;
}

.alert-success {
  background-color: var(--luua-lime-10);
  border-left: 4px solid var(--luua-lime);
  color: var(--luua-black);
}

.alert-danger {
  background-color: var(--luua-pink-10);
  border-left: 4px solid var(--luua-pink);
  color: var(--luua-black);
}

.alert-info {
  background-color: var(--luua-turquoise-10);
  border-left: 4px solid var(--luua-turquoise);
  color: var(--luua-black);
}

.alert-warning {
  background-color: var(--luua-orange-10);
  border-left: 4px solid var(--luua-orange);
  color: var(--luua-black);
}

/* ========== MEJORAS PARA COMPONENTES LUUA ========== */

/* Tarjetas LUUA mejoradas */
.luua-card {
  border: 1px solid var(--border-light);
  border-radius: var(--luua-radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--bg-lighter);
  transition: all 0.3s ease;
}

.luua-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--luua-turquoise-20);
}

/* Formularios mejorados */
.form-control:focus {
  border-color: var(--luua-turquoise-focus);
  box-shadow: 0 0 0 0.2rem var(--luua-turquoise-20);
}

.form-select:focus {
  border-color: var(--luua-turquoise-focus);
  box-shadow: 0 0 0 0.2rem var(--luua-turquoise-20);
}

/* Modales mejorados */
.modal-content {
  border: none;
  border-radius: var(--luua-radius-lg);
  box-shadow: var(--shadow-xl);
}

.modal-header {
  background: linear-gradient(135deg, var(--luua-turquoise-10) 0%, var(--luua-violet-10) 100%);
  border-bottom: 1px solid var(--border-light);
  border-radius: var(--luua-radius-lg) var(--luua-radius-lg) 0 0;
}

/* Spinners personalizados */
.spinner-border {
  border-color: var(--luua-turquoise);
  border-right-color: transparent;
}

/* ========== UTILIDADES DE ESPACIADO LUUA ========== */

:root {
  --luua-space-xs: 0.25rem;
  --luua-space-sm: 0.5rem;
  --luua-space-md: 1rem;
  --luua-space-lg: 1.5rem;
  --luua-space-xl: 2rem;
  --luua-space-2xl: 3rem;
  --luua-space-3xl: 4rem;
  --luua-space-4xl: 6rem;

  /* ========== VARIABLES ADICIONALES PARA UI ========== */

  /* Colores oscuros adicionales */
  --color-primary-darker: #2D8A91;
  --color-secondary-darker: #9EB019;
  --color-danger-darker: #CC007A;
  --color-warning-darker: #CC7A00;
  --color-info-darker: #2D8A91;
  --color-creative-darker: #A044C0;

  /* Transparencias adicionales */
  --luua-orange-10: rgba(var(--luua-orange-rgb), 0.1);
  --luua-orange-20: rgba(var(--luua-orange-rgb), 0.2);
  --luua-orange-30: rgba(var(--luua-orange-rgb), 0.3);

  /* Colores neutros adicionales */
  --color-gray-lighter: #f8f9fa;
  --color-gray-darker: #495057;

  /* Sombras adicionales */
  --shadow-sm: 0 2px 8px rgba(var(--luua-black-rgb), 0.1);
  --shadow-md: 0 4px 15px rgba(var(--luua-black-rgb), 0.08);
  --shadow-lg: 0 8px 25px rgba(var(--luua-black-rgb), 0.12);
  --shadow-xl: 0 15px 35px rgba(var(--luua-black-rgb), 0.1);
  --btn-hover-shadow: 0 4px 12px rgba(var(--luua-black-rgb), 0.15);

  /* Bordes */
  --border-light: rgba(222, 226, 230, 0.3);
  --border-medium: rgba(222, 226, 230, 0.5);

  /* Fondos */
  --bg-light: rgba(248, 248, 248, 0.9);
  --bg-lighter: rgba(248, 248, 248, 0.95);
  --bg-dark: var(--luua-gradient-turquoise-violet);
  --bg-neutral: linear-gradient(135deg, var(--luua-canvas) 0%, var(--color-gray-lighter) 100%);

  /* Colores adicionales para gradientes y efectos */
  --color-gray-lighter: #f0f0f0;

  /* Gradientes para badges de grupos de edad */
  --gradient-age-3-5: linear-gradient(45deg, var(--luua-lime), var(--luua-turquoise));
  --gradient-age-6-9: linear-gradient(45deg, var(--luua-turquoise), var(--luua-violet));
  --gradient-age-preadolescentes: linear-gradient(45deg, var(--luua-violet), var(--luua-pink));
  --gradient-age-adolescentes: linear-gradient(45deg, var(--luua-pink), var(--luua-lime));
  --gradient-age-adultos: linear-gradient(45deg, var(--luua-black), var(--luua-lime));

  /* Colores RGBA para gradientes de fondo */
  --luua-pink-10: rgba(255, 102, 196, 0.1);
  --luua-lime-10: rgba(206, 220, 40, 0.1);
  --luua-violet-10: rgba(203, 108, 230, 0.05);

  /* Color para focus de formularios */
  --luua-turquoise-focus: rgba(70, 191, 200, 0.25);

  /* ========== VARIABLES DE BOTONES ========== */

  --btn-padding-y: 0.75rem;
  --btn-padding-x: 1.5rem;
  --btn-font-weight: 600;
  --btn-border-width: 2px;
  --btn-border-radius: var(--luua-radius-md);
  --btn-transition: all 0.3s ease;
  --btn-hover-transform: translateY(-2px);

  /* ========== VARIABLES ADICIONALES ========== */

  --text-muted: var(--color-gray-dark);
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Roboto', sans-serif;

  /* Espaciado consistente */
  --space-xs: var(--luua-space-xs);
  --space-sm: var(--luua-space-sm);
  --space-md: var(--luua-space-md);
  --space-lg: var(--luua-space-lg);
  --space-xl: var(--luua-space-xl);
  --space-2xl: var(--luua-space-2xl);
  --space-3xl: var(--luua-space-3xl);
  --space-4xl: var(--luua-space-4xl);
}