/* 
 * Este archivo contiene solo los estilos personalizados.
 * Usa Tailwind CDN en el header para las clases base.
 * 
 * Para usar: Incluye este archivo DESPUÉS del CDN de Tailwind en header.php
 */

:root {
  --background: oklch(0.98 0.003 250);
  --foreground: oklch(0.13 0.03 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.13 0.03 250);
  --primary: oklch(0.30 0.10 250);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.955 0.012 250);
  --secondary-foreground: oklch(0.20 0.05 250);
  --muted: oklch(0.94 0.01 250);
  --muted-foreground: oklch(0.45 0.03 250);
  --accent: oklch(0.62 0.18 170);
  --accent-foreground: oklch(0.98 0 0);
  --border: oklch(0.92 0.008 250);
  --input: oklch(0.92 0.008 250);
  --ring: oklch(0.40 0.12 250);
  --radius: 0.75rem;
}

/* Custom animations */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-fade-up {
  animation: fade-up 0.7s ease-out both;
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out both;
}

.animate-slide-in-right {
  animation: slide-in-right 0.6s ease-out both;
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animation-delay-150 { animation-delay: 150ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-450 { animation-delay: 450ms; }
.animation-delay-600 { animation-delay: 600ms; }

/* Utility classes para colores personalizados */
.bg-background { background-color: var(--background); }
.text-foreground { color: var(--foreground); }
.bg-card { background-color: var(--card); }
.text-card-foreground { color: var(--card-foreground); }
.bg-primary { background-color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.bg-secondary { background-color: var(--secondary); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.bg-muted { background-color: var(--muted); }
.text-muted-foreground { color: var(--muted-foreground); }
.bg-accent { background-color: var(--accent); }
.text-accent-foreground { color: var(--accent-foreground); }
.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }