/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
 @tailwind base;

 @layer base {
    h1 {
      @apply text-2xl;
    }
    h2 {
      @apply text-xl;
    }
    h3 {
      @apply text-lg;
    }
  }

 /**
  * This injects Tailwind's component classes and any component classes
  * registered by plugins.
  */
 @tailwind components;
 
 /**
  * This injects Tailwind's utility classes and any utility classes registered
  * by plugins.
  */
 @tailwind utilities;

 @layer utilities {
   /* antes lo daba el plugin de flowbite */
   .h-modal {
     height: calc(100% - 2rem);
   }
   .animate-fadeInUp {
     animation: fadeInUp 0.8s ease-out;
   }
   .animate-fadeInUp-200 {
     animation: fadeInUp 0.8s ease-out 0.2s both;
   }
   .animate-fadeInUp-300 {
     animation: fadeInUp 0.8s ease-out 0.3s both;
   }
   .animate-fadeInUp-400 {
     animation: fadeInUp 0.8s ease-out 0.4s both;
   }
   .animate-fadeInUp-500 {
     animation: fadeInUp 0.8s ease-out 0.5s both;
   }
   .animate-fadeIn {
     animation: fadeIn 1.05s ease forwards;
   }
   .animate-boot-eyebrow {
     animation: bReveal 2s cubic-bezier(0.2,0.8,0.2,1) 0.4s forwards;
   }
   .animate-boot-brand {
     animation: bReveal 2s cubic-bezier(0.2,0.8,0.2,1) 0.8s forwards;
   }
   .animate-check-pop {
     animation: checkPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
   }
   .hide-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
   .hide-scrollbar::-webkit-scrollbar {
     display: none;
   }
 }

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

 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
 }

 @keyframes bReveal {
   from { opacity: 0; transform: translateY(15px); filter: blur(4px); }
   to { opacity: 1; transform: translateY(0); filter: blur(0); }
 }

 @keyframes checkPop {
   0% { transform: scale(0); opacity: 0; }
   70% { transform: scale(1.08); opacity: 1; }
   100% { transform: scale(1); }
 }

 @keyframes toastIn {
   0% { opacity: 0; transform: translateX(100%) scale(0.9); }
   60% { transform: translateX(-8px) scale(1.02); }
   100% { opacity: 1; transform: translateX(0) scale(1); }
 }

 @keyframes toastOut {
   0% { opacity: 1; transform: translateX(0) scale(1); }
   100% { opacity: 0; transform: translateX(100%) scale(0.9); }
 }

 .animate-toast-in {
   animation: toastIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }

 .animate-toast-out {
   animation: toastOut 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
 }

 @keyframes bellRing {
   0%, 100% { transform: rotate(0deg); }
   20% { transform: rotate(15deg); }
   40% { transform: rotate(-15deg); }
   60% { transform: rotate(10deg); }
   80% { transform: rotate(-10deg); }
 }

 .animate-bell-ring {
   animation: bellRing 0.6s ease-in-out;
 }

 @keyframes badgePop {
   0% { transform: scale(0); }
   60% { transform: scale(1.2); }
   100% { transform: scale(1); }
 }

 .animate-badge-pop {
   animation: badgePop 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }
 
 /**
  * Use this directive to control where Tailwind injects the responsive
  * variations of each utility.
  *
  * If omitted, Tailwind will append these classes to the very end of
  * your stylesheet by default.
  */
 /* @tailwind screens; */