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

@layer components {
  .panel { @apply bg-white rounded-lg shadow-sm border border-slate-200; }
  .btn { @apply inline-flex items-center justify-center px-3 py-1.5 rounded-md bg-slate-800 text-white text-sm; }
  .btn-ghost { @apply bg-transparent text-slate-700; }
  .input { @apply border border-slate-200 rounded-md px-3 py-2 text-sm bg-white; }
  .nav-item { @apply w-full text-left px-3 py-2 rounded-md text-sm text-slate-700 hover:bg-slate-50; }
  .nav-item.active { @apply bg-slate-100 font-medium; }
}

@layer utilities {
  .font-sans { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
  
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

/* Broadcasts (Transmisiones) specific */
@layer components {
  .create-card { @apply flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-sm text-left; }
  .create-card .icon { @apply w-12 h-12 rounded-md flex items-center justify-center text-xl; }
  .tab-btn { @apply px-3 py-1 rounded-md text-sm text-slate-600 hover:bg-slate-50; }
  .tab-btn.active { @apply text-sky-600 border-b-2 border-sky-500; }
}

/* Nextream-style Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float 6s ease-in-out infinite;
  animation-delay: 3s;
}

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

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

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out;
}

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

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

.pause-animation:hover {
  animation-play-state: paused;
}

/* Grid Pattern */
.bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #9333ea, #3b82f6);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #7c3aed, #2563eb);
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 1000px;
  }
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out;
}

.animate-slideDown {
  animation: slideDown 0.3s ease-out;
}
