@import "tailwindcss";

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

@layer base {
  :root {
    --primary: #6366f1;
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
  }
}

@layer components {
  .btn-primary {
    @apply rounded-full px-6 py-3 text-base font-semibold text-white shadow-lg bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 transition-all duration-300 hover:scale-105;
  }
  
  .btn-secondary {
    @apply rounded-full px-6 py-3 text-base font-semibold text-white border-2 border-white/20 hover:bg-white/10 transition-all duration-300;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 text-transparent bg-clip-text;
  }

  .mobile-menu-link {
    @apply -mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50;
  }

  .nav-link {
    @apply text-sm font-medium text-gray-900 hover:text-gray-600;
  }

  .dropdown-menu {
    @apply transition-all duration-100 transform opacity-0 scale-95;
  }

  .dropdown-menu.show {
    @apply opacity-100 scale-100;
  }

  .fade-out {
    @apply opacity-0 transform scale-95 transition-all duration-300 ease-in-out;
  }

  .fade-in {
    @apply opacity-100 transform scale-100 transition-all duration-300 ease-in-out;
  }

  /* Estilos para el card de vehículo */
  .vehicle-card-shadow {
    @apply shadow-[0_4px_12px_rgba(0,0,0,0.05)];
  }
}

.nested-fields {
  @apply py-2;
}

.nested-fields input,
.nested-fields select {
  @apply h-10;
}

.line-total {
  @apply text-right block pr-4;
}

/* Estilos personalizados para el select */
select {
  @apply appearance-none;
}

.select-wrapper {
  @apply relative;
}

.select-wrapper::after {
  @apply absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none;
  content: "▼";
}