/* Chatversa Corporate Colors - Variables CSS */
:root {
  /* Colores Principales Oficiales de Chatversa */
  --chatversa-turquoise: #49e5b7;
  --chatversa-navy: #20304b;
  --chatversa-purple: #7c6fcc;

  /* Variaciones de los colores oficiales - Contraste final optimizado */
  --chatversa-turquoise-light: #6ef0c7;
  --chatversa-turquoise-dark: #1db584;
  --chatversa-turquoise-darker: #178a64;
  --chatversa-navy-light: #2d4066;
  --chatversa-navy-dark: #162030;
  --chatversa-purple-light: #9588d6;
  --chatversa-purple-dark: #6956c2;

  /* Colores de fondo basados en los oficiales */
  --chatversa-turquoise-bg: #f0fdf9;
  --chatversa-navy-bg: #f8fafc;
  --chatversa-purple-bg: #faf8ff;

  /* Colores de Acento */
  --chatversa-gold: #F59E0B;
  --chatversa-gold-light: #FEF3C7;

  /* Colores Neutrales */
  --chatversa-gray-dark: #374151;
  --chatversa-gray: #6B7280;
  --chatversa-gray-light: #9CA3AF;
  --chatversa-gray-extra-light: #F3F4F6;

  /* Estados y Utilidades */
  --chatversa-success: #10B981;
  --chatversa-success-light: #A7F3D0;
  --chatversa-warning: #F59E0B;
  --chatversa-error: #EF4444;

  /* Gradientes Corporativos - Contraste final perfecto */
  --chatversa-gradient-primary: linear-gradient(135deg, var(--chatversa-turquoise) 0%, var(--chatversa-turquoise-dark) 100%);
  --chatversa-gradient-secondary: linear-gradient(135deg, var(--chatversa-turquoise-light) 0%, var(--chatversa-turquoise) 100%);
  --chatversa-gradient-accent: linear-gradient(135deg, var(--chatversa-turquoise) 0%, var(--chatversa-turquoise-light) 50%, var(--chatversa-turquoise-darker) 100%);
  --chatversa-gradient-light: linear-gradient(135deg, var(--chatversa-turquoise-bg) 0%, var(--chatversa-navy-bg) 100%);

  /* Sombras Corporativas con colores oficiales */
  --chatversa-shadow-primary: 0 4px 15px rgba(32, 48, 75, 0.3);
  --chatversa-shadow-primary-hover: 0 8px 25px rgba(32, 48, 75, 0.4);
  --chatversa-shadow-turquoise: 0 4px 15px rgba(73, 229, 183, 0.3);
  --chatversa-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
  --chatversa-shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.1);

  /* Tipografía */
  --chatversa-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Espaciado */
  --chatversa-spacing-xs: 0.25rem;
  --chatversa-spacing-sm: 0.5rem;
  --chatversa-spacing-md: 1rem;
  --chatversa-spacing-lg: 1.5rem;
  --chatversa-spacing-xl: 2rem;
  --chatversa-spacing-2xl: 3rem;

  /* Border Radius */
  --chatversa-radius-sm: 0.25rem;
  --chatversa-radius-md: 0.5rem;
  --chatversa-radius-lg: 0.75rem;
  --chatversa-radius-xl: 1rem;

  /* Transiciones */
  --chatversa-transition-fast: 0.15s ease;
  --chatversa-transition-normal: 0.3s ease;
  --chatversa-transition-slow: 0.5s ease;
}

/* Clases de utilidad para colores corporativos */
.text-primary { color: var(--chatversa-blue-primary); }
.text-secondary { color: var(--chatversa-blue-secondary); }
.text-gold { color: var(--chatversa-gold); }
.text-gray { color: var(--chatversa-gray); }

.bg-primary { background-color: var(--chatversa-blue-primary); }
.bg-secondary { background-color: var(--chatversa-blue-secondary); }
.bg-light { background-color: var(--chatversa-blue-bg); }
.bg-gold { background-color: var(--chatversa-gold); }

.border-primary { border-color: var(--chatversa-blue-primary); }
.border-secondary { border-color: var(--chatversa-blue-secondary); }

/* Gradientes como clases */
.gradient-primary { background: var(--chatversa-gradient-primary); }
.gradient-light { background: var(--chatversa-gradient-light); }
.gradient-accent { background: var(--chatversa-gradient-accent); }

/* Sombras como clases */
.shadow-primary { box-shadow: var(--chatversa-shadow-primary); }
.shadow-soft { box-shadow: var(--chatversa-shadow-soft); }
.shadow-medium { box-shadow: var(--chatversa-shadow-medium); }

/* Modo oscuro (para futuras implementaciones) */
@media (prefers-color-scheme: dark) {
  :root {
    --chatversa-blue-primary: #3B82F6;
    --chatversa-blue-secondary: #60A5FA;
    --chatversa-blue-light: #93C5FD;
    --chatversa-blue-extra-light: #1E3A8A;
    --chatversa-blue-bg: #0F172A;

    --chatversa-gray-dark: #F9FAFB;
    --chatversa-gray: #E5E7EB;
    --chatversa-gray-light: #9CA3AF;
    --chatversa-gray-extra-light: #374151;
  }
}

/* Animaciones corporativas */
@keyframes chatversa-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(30, 58, 138, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(30, 58, 138, 0);
  }
}

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

@keyframes chatversa-slide-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-pulse { animation: chatversa-pulse 2s infinite; }
.animate-float { animation: chatversa-float 6s ease-in-out infinite; }
.animate-slide-in { animation: chatversa-slide-in 0.6s ease-out; }