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

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight;
  }
  
  h1 { @apply text-4xl md:text-5xl font-bold; }
  h2 { @apply text-2xl md:text-3xl; }
  h3 { @apply text-xl md:text-2xl; }
}

@layer components {
  .card-premium {
    @apply bg-white rounded-2xl border border-stone-200/60 transition-all duration-300;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  
  .card-premium:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.07);
    transform: translateY(-2px);
  }

  .btn-primary {
    @apply bg-stone-900 text-white px-5 py-2.5 rounded-full text-sm font-medium 
           hover:bg-stone-800 transition-all duration-200 inline-flex items-center justify-center;
  }

  .btn-accent {
    @apply bg-[#ff4082] text-white px-5 py-2.5 rounded-full text-sm font-medium 
           hover:bg-[#e63670] transition-all duration-200 inline-flex items-center justify-center;
  }
  
  .btn-secondary {
    @apply bg-stone-100 text-stone-600 px-5 py-2.5 rounded-full text-sm font-medium 
           hover:bg-stone-200 transition-all duration-200 inline-flex items-center justify-center;
  }
  
  .btn-outline {
    @apply bg-white text-stone-600 px-5 py-2.5 rounded-full text-sm font-medium border border-stone-200
           hover:bg-stone-50 hover:border-stone-300 transition-all duration-200 inline-flex items-center justify-center;
  }

  .category-pill {
    @apply inline-flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 cursor-pointer border;
  }
  
  .category-pill-active {
    @apply bg-stone-900 text-white border-stone-900 shadow-sm;
  }
  
  .category-pill-inactive {
    @apply bg-white text-stone-500 border-stone-200 hover:border-stone-300 hover:text-stone-700 hover:shadow-sm;
  }

  .tab-group {
    @apply inline-flex bg-stone-100 rounded-full p-1 gap-0.5;
  }
  .tab-btn {
    @apply px-4 py-1.5 text-sm font-medium rounded-full transition-all duration-200 cursor-pointer;
  }
  .tab-active {
    @apply bg-[#ff4082] text-white shadow-sm;
  }
  .tab-inactive {
    @apply text-stone-500 hover:text-stone-700;
  }
  .tab-panel {
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .search-input {
    @apply w-full bg-stone-50 border border-stone-200 rounded-full pl-11 pr-5 py-3 text-sm 
           text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 
           focus:ring-[#ff4082]/10 focus:border-[#ff4082]/30 transition-all duration-200;
  }
}

@layer utilities {
  .hide-scrollbar::-webkit-scrollbar { display: none; }
  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * { scroll-snap-align: start; }

}

html { scroll-behavior: smooth; }

*:focus-visible {
  outline: 2px solid #ff4082;
  outline-offset: 2px;
  border-radius: inherit;
}

::selection {
  background-color: #ff4082;
  color: white;
}

main {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Estilos para el efecto de texto animado */
.loader {
    color: rgb(124, 124, 124);
    font-family: inherit;
    font-weight: 500;
    font-size: 1.25rem;
    box-sizing: content-box;
    height: 40px;
    padding: 0 4px;
    display: flex;
    border-radius: 8px;
  }
  
  .words {
    overflow: hidden;
    position: relative;
  }
  
  .words::after {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 20;
  }
  
  .word {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 6px;
    text-align: left;
    animation: spin_4991 10s infinite;
  }
  
  .word:nth-child(1) {
    color: #ff4082;
  }
  
  .word:nth-child(2) {
    color: #45b4ff;
  }
  
  .word:nth-child(3) {
    color: #ff4082;
  }
  
  .word:nth-child(4) {
    color: #45b4ff;
  }
  
  .word:nth-child(5) {
    color: #ff4082;
  }
  
  @keyframes spin_4991 {
    10% {
      transform: translateY(-102%);
    }
  
    25% {
      transform: translateY(-100%);
    }
  
    35% {
      transform: translateY(-202%);
    }
  
    50% {
      transform: translateY(-200%);
    }
  
    60% {
      transform: translateY(-302%);
    }
  
    75% {
      transform: translateY(-300%);
    }
  
    85% {
      transform: translateY(-402%);
    }
  
    100% {
      transform: translateY(-400%);
    }
  }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

@layer utilities {
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @keyframes slideDown {
    0% { transform: translateY(-50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes slideUp {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes bounceSlight {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .animate-fadeIn {
    animation: fadeIn 1s ease-in-out forwards;
  }
  
  .animate-slideDown {
    animation: slideDown 0.8s ease-out forwards;
  }
  
  .animate-slideUp {
    animation: slideUp 0.8s ease-out forwards;
  }
  
  .animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .animate-bounce-subtle {
    animation: bounceSlight 2s infinite;
  }
  
  .animated-bg-gradient {
    background: linear-gradient(270deg, #1a202c, #2d3748, #4a5568, #2d3748, #1a202c);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
    opacity: 0.8;
  }

  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
}