@import "tom-select/dist/css/tom-select.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Componentes y utilidades propias */
@layer components {
    .nlx-navbar { @apply bg-white border-b border-gray-200 shadow-sm; }
    .nlx-navlink { @apply text-slate-700 hover:text-slate-900 transition; }
    .nlx-btn-accent { @apply inline-flex items-center rounded-md bg-accent px-3 py-2 text-white font-semibold hover:bg-accent-600 transition; }
    .nlx-footer { @apply bg-gray-900 text-white mt-10; }
    .nlx-footer a { @apply text-white/80 hover:text-white; }

    /* menú móvil coherente con el header */
    .nlx-mobile { @apply bg-white border-t border-gray-200; }
    .nlx-footer-inner { @apply container py-6 flex flex-col gap-3 md:flex-row md:items-center md:justify-between; }

    .nlx-card {
        @apply bg-white border border-base-border rounded-xl shadow-card overflow-hidden;
    }
    .nlx-card-body { @apply p-4; }
    .nlx-price { @apply text-lg font-semibold text-gray-900; }
    .nlx-badge { @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700; }

    .btn-accent { @apply inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-white text-sm font-semibold hover:bg-blue-700 transition; }
    .card      { @apply bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden; }
    .card-body { @apply p-4; }

    .btn-primary {
        @apply inline-flex items-center justify-center rounded-md bg-indigo-600 text-white
            px-3 py-2 text-sm font-medium hover:bg-indigo-700 focus:outline-none
            focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
    }

}