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

/* Estilos base personalizados */
@layer base {
  input[type="email"],
  input[type="password"],
  input[type="text"] {
    @apply w-full rounded-lg border-gray-300;
  }

  button {
    @apply transition-colors duration-200;
  }
}

/* Componentes personalizados */
@layer components {
  .input-icon {
    @apply absolute inset-y-0 left-3 flex items-center pointer-events-none text-gray-400;
  }

  .btn-primary {
    @apply w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-lg font-semibold;
  }
}