ani67/src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Colores base usando COLOR_PALETTE */
    --background: 0 0% 100%; /* COLOR_PALETTE.white */
    --foreground: 215 25% 27%; /* COLOR_PALETTE.gray[700] */
    --card: 0 0% 100%; /* COLOR_PALETTE.white */
    --card-foreground: 215 25% 27%; /* COLOR_PALETTE.gray[700] */
    --popover: 0 0% 100%; /* COLOR_PALETTE.white */
    --popover-foreground: 215 25% 27%; /* COLOR_PALETTE.gray[700] */
    
    /* Colores primarios - azul de COLOR_PALETTE.primary */
    --primary: 217 91% 60%; /* COLOR_PALETTE.primary[500] */
    --primary-foreground: 0 0% 100%; /* COLOR_PALETTE.white */
    
    /* Colores secundarios - púrpura de COLOR_PALETTE.secondary */
    --secondary: 262 83% 58%; /* COLOR_PALETTE.secondary[500] */
    --secondary-foreground: 0 0% 100%; /* COLOR_PALETTE.white */
    
    /* Colores neutros */
    --muted: 220 14% 96%; /* COLOR_PALETTE.gray[100] */
    --muted-foreground: 215 16% 47%; /* COLOR_PALETTE.gray[500] */
    --accent: 220 14% 96%; /* COLOR_PALETTE.gray[100] */
    --accent-foreground: 215 25% 27%; /* COLOR_PALETTE.gray[700] */
    
    /* Colores de estado - error de COLOR_PALETTE.error */
    --destructive: 0 84% 60%; /* COLOR_PALETTE.error[500] */
    --destructive-foreground: 0 0% 100%; /* COLOR_PALETTE.white */
    
    /* Colores de éxito - success de COLOR_PALETTE.success */
    --success: 142 71% 45%; /* COLOR_PALETTE.success[500] */
    --success-foreground: 0 0% 100%; /* COLOR_PALETTE.white */
    
    /* Colores de advertencia - warning de COLOR_PALETTE.warning */
    --warning: 38 92% 50%; /* COLOR_PALETTE.warning[500] */
    --warning-foreground: 0 0% 100%; /* COLOR_PALETTE.white */
    
    /* Bordes y inputs */
    --border: 220 13% 91%; /* COLOR_PALETTE.gray[200] */
    --input: 220 13% 91%; /* COLOR_PALETTE.gray[200] */
    --ring: 217 91% 60%; /* COLOR_PALETTE.primary[500] */
    --radius: 0.5rem;
  }

  .dark {
    /* Colores base para tema oscuro usando COLOR_PALETTE */
    --background: 215 28% 17%; /* COLOR_PALETTE.gray[800] */
    --foreground: 210 20% 98%; /* COLOR_PALETTE.gray[50] */
    --card: 215 28% 17%; /* COLOR_PALETTE.gray[800] */
    --card-foreground: 210 20% 98%; /* COLOR_PALETTE.gray[50] */
    --popover: 215 28% 17%; /* COLOR_PALETTE.gray[800] */
    --popover-foreground: 210 20% 98%; /* COLOR_PALETTE.gray[50] */
    
    /* Colores primarios para tema oscuro */
    --primary: 217 91% 60%; /* COLOR_PALETTE.primary[500] */
    --primary-foreground: 0 0% 100%; /* COLOR_PALETTE.white */
    
    /* Colores secundarios para tema oscuro */
    --secondary: 215 25% 27%; /* COLOR_PALETTE.gray[700] */
    --secondary-foreground: 210 20% 98%; /* COLOR_PALETTE.gray[50] */
    
    /* Colores neutros para tema oscuro */
    --muted: 215 25% 27%; /* COLOR_PALETTE.gray[700] */
    --muted-foreground: 215 16% 47%; /* COLOR_PALETTE.gray[500] */
    --accent: 215 25% 27%; /* COLOR_PALETTE.gray[700] */
    --accent-foreground: 210 20% 98%; /* COLOR_PALETTE.gray[50] */
    
    /* Colores de estado para tema oscuro */
    --destructive: 0 84% 60%; /* COLOR_PALETTE.error[500] */
    --destructive-foreground: 210 20% 98%; /* COLOR_PALETTE.gray[50] */
    
    /* Colores de éxito para tema oscuro */
    --success: 142 71% 45%; /* COLOR_PALETTE.success[500] */
    --success-foreground: 210 20% 98%; /* COLOR_PALETTE.gray[50] */
    
    /* Colores de advertencia para tema oscuro */
    --warning: 38 92% 50%; /* COLOR_PALETTE.warning[500] */
    --warning-foreground: 210 20% 98%; /* COLOR_PALETTE.gray[50] */
    
    /* Bordes y inputs para tema oscuro */
    --border: 215 25% 27%; /* COLOR_PALETTE.gray[700] */
    --input: 215 25% 27%; /* COLOR_PALETTE.gray[700] */
    --ring: 217 91% 60%; /* COLOR_PALETTE.primary[500] */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out;
  }

  .animate-slide-in {
    animation: slideIn 0.5s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.4s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(-10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Animación para el chat preview */
  .chat-message-enter {
    animation: messageEnter 0.4s ease-out;
  }

  @keyframes messageEnter {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Transición suave para el reset del chat */
  .chat-reset {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .chat-reset.resetting {
    opacity: 0.2;
    transform: scale(0.98);
  }

  .chat-reset.normal {
    opacity: 1;
    transform: scale(1);
  }

  /* Estilos para Sonner Toast */
  .toaster {
    --width: 356px;
    --front-toast-height: 64px;
    --offset: 16px;
    --gap: 8px;
    --z-index: 9999;
  }

  .toast {
    @apply backdrop-blur-sm;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: toast-slide-in 0.3s ease-out;
  }

  .toast:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  @keyframes toast-slide-in {
    from {
      opacity: 0;
      transform: translateX(100%) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }

  /* Estilos específicos para diferentes tipos de toast */
  [data-sonner-toast][data-type="success"] {
    border-left: 4px solid hsl(142, 76%, 36%);
    background: hsl(142, 76%, 97%) !important;
  }

  [data-sonner-toast][data-type="error"] {
    border-left: 4px solid hsl(0, 84%, 60%);
    background: hsl(0, 84%, 97%) !important;
  }

  [data-sonner-toast][data-type="warning"] {
    border-left: 4px solid hsl(38, 92%, 50%);
    background: hsl(38, 92%, 97%) !important;
  }

  [data-sonner-toast][data-type="info"] {
    border-left: 4px solid hsl(217, 91%, 60%);
    background: hsl(217, 91%, 97%) !important;
  }

  /* Botón de cerrar personalizado */
  [data-sonner-toast] [data-close-button] {
    @apply opacity-60 hover:opacity-100 transition-opacity duration-200;
  }
}