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

/* Estilos base personalizados para reemplazar preflight de TailwindCSS */
@layer base {
  html, body {
    margin: 0;
    padding: 0;
    background: #0b0b0b;
    color: #f6f6f6;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  }
  
  * {
    box-sizing: border-box;
  }
}

/* Variables CSS personalizadas para compatibilidad */
:root {
  --bg: #0b0b0b;         
  --panel: #111114;      
  --accent: #F9F05D;     
  --accent-2: #FFD700;   
  --text: #f6f6f6;       
  --muted: #c8c8c8;      
  --ring: rgba(249, 240, 93, 0.3);
  --success: #00d084;
  --warning: #ffa500;
}

/* Base styles */
@layer base {
  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    background-image: 
      radial-gradient(1200px 800px at 20% 10%, rgba(249, 240, 93, .08), transparent 60%),
      radial-gradient(800px 600px at 80% 90%, rgba(255, 215, 0, .06), transparent 60%),
      #0b0b0b;
    color: #f6f6f6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
  }

  /* Scroll personalizado */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #0b0b0b;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #F9F05D, #FFD700);
    border-radius: 4px;
    border: 1px solid rgba(249, 240, 93, 0.2);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FFD700, #F9F05D);
    box-shadow: 0 0 8px rgba(249, 240, 93, 0.3);
  }
}

/* Componentes personalizados */
@layer components {
  /* HTMX Loading States */
  .htmx-indicator {
    @apply flex items-center justify-center gap-2.5 p-5 bg-genius-primary/10 border-2 border-genius-primary rounded-lg my-5 font-medium text-genius-primary;
  }

  .loading-spinner {
    @apply w-5 h-5 border-2 border-genius-primary/30 border-t-genius-primary rounded-full animate-spin-slow;
  }

  .htmx-request {
    @apply opacity-70 pointer-events-none;
  }

  .htmx-request .htmx-indicator {
    @apply flex !important;
  }

  /* Error y Success Messages */
  .error-message {
    @apply bg-red-500/10 border border-red-500 text-red-500 p-4 rounded-lg my-2.5 hidden;
  }

  .error-message.show {
    @apply block animate-fade-in;
  }

  .success-message {
    @apply bg-genius-success/10 border border-genius-success text-genius-success p-4 rounded-lg my-2.5 hidden;
  }

  .success-message.show {
    @apply block animate-fade-in;
  }

  /* HTMX Response Indicators */
  .htmx-response-indicator {
    @apply relative;
  }

  .htmx-response-indicator::after {
    content: '';
    @apply absolute -top-1 -right-1 w-2.5 h-2.5 bg-genius-success rounded-full opacity-0;
    animation: pulse 0.6s ease-out;
  }

  /* Botones personalizados */
  .btn-genius {
    @apply appearance-none outline-none border border-genius-primary/35 bg-button-gradient text-black font-bold tracking-wide py-4 px-6 rounded-genius-sm cursor-pointer no-underline flex items-center gap-2 shadow-button transition-all duration-200 text-base;
  }

  .btn-genius:hover {
    @apply -translate-y-0.5 shadow-button-hover text-black no-underline;
  }

  .btn-genius:active {
    @apply translate-y-0 scale-98;
  }

  .btn-genius.primary {
    @apply bg-button-primary border-genius-primary text-black;
  }

  .btn-genius.secondary {
    @apply border-genius-primary/25 bg-transparent text-genius-primary;
  }

  .btn-genius.secondary:hover {
    @apply bg-genius-primary/10 text-genius-primary;
  }

  /* Cards personalizadas */
  .card-genius {
    @apply relative overflow-hidden bg-card-gradient border border-genius-primary/18 rounded-genius p-8 shadow-genius;
  }

  /* Status indicators */
  .status-indicator {
    @apply w-2 h-2 bg-genius-success rounded-full animate-pulse-slow;
  }

  /* Bot info sections */
  .bot-info-section {
    @apply bg-genius-primary/5 border border-genius-primary/20 rounded-lg p-5 my-5;
  }

  .bot-info-section h3 {
    @apply text-genius-primary mb-2.5;
  }

  .bot-info-item {
    @apply flex justify-between py-2 border-b border-genius-primary/10 last:border-b-0;
  }

  .bot-info-label {
    @apply font-medium text-gray-300;
  }

  .bot-info-value {
    @apply text-genius-primary font-mono;
  }

  /* Quick actions */
  .quick-actions {
    @apply flex gap-2.5 justify-center flex-wrap my-5;
  }

  .quick-actions .btn-genius {
    @apply min-w-44 justify-center;
  }
}

/* Utilities personalizadas */
@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in;
  }

  .animate-pop {
    animation: pop 420ms cubic-bezier(.2, .8, .2, 1) both;
  }

  .animate-ring {
    animation: ring 1.2s ease-out .2s both;
  }

  /* Responsive utilities */
  @media (max-width: 768px) {
    .quick-actions {
      @apply flex-col items-center;
    }
    
    .quick-actions .btn-genius {
      @apply w-full max-w-72;
    }
    
    .bot-info-item {
      @apply flex-col gap-1;
    }
    
    .bot-info-label {
      @apply text-sm;
    }
  }

  /* Dark mode enhancements */
  @media (prefers-color-scheme: dark) {
    .htmx-indicator {
      @apply bg-genius-primary/5;
    }
    
    .bot-info-section {
      @apply bg-genius-primary/3;
    }
  }

  /* Accesibilidad: reducción de movimiento */
  @media (prefers-reduced-motion: reduce) {
    .icon, .btn-genius, .ring, .stat-card, .step {
      animation: none !important;
      transition: none !important;
    }
  }
}