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

@layer components {
    /* Botones Globales */
    .btn-slider { @apply bg-[#002B7A] text-white px-10 py-4 rounded-full font-bold w-fit hover:bg-white hover:text-black transition; }
    .btn-cart { @apply w-full bg-red-600 text-white py-2 rounded font-bold text-xs uppercase hover:bg-black transition; }
    
    /* Tarjetas de Categorías */
    .card-category { @apply flex items-center bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-xl hover:border-[#FFD700] transition-all duration-300 overflow-hidden group; }
    .btn-category { @apply inline-block w-fit px-5 py-2 bg-[#002B7A] text-white text-[10px] font-bold uppercase rounded-full hover:bg-[#FFD700] hover:text-[#002B7A] transition-all shadow-md; }
    
    /* Tarjetas de Productos */
    .card-product { @apply bg-white p-4 border border-gray-200 rounded-lg flex flex-col items-center text-center; }
    
    /* Enlaces del Footer */
    .footer-link { @apply hover:text-[#FFD700] transition-colors; }
}

/* --- Lógica visual de Plugins (Swiper y WhatsApp) --- */
#whatsapp-widget { transition: all 0.3s ease; }
#whatsapp-menu { animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Banner Principal */
.main-next, .main-prev {
    width: 40px !important; height: 40px !important;
    background-color: #002B7A !important; color: white !important; border-radius: 50% !important;
}
.main-next::after, .main-prev::after { font-size: 18px !important; font-weight: bold; }

/* Marcas */
.brand-next, .brand-prev { background: none !important; color: #002B7A !important; width: 20px !important; }
.brand-next::after, .brand-prev::after { font-size: 25px !important; font-weight: bold; }

/* Paginación Activa */
.swiper-pagination-bullet-active { background-color: #002B7A !important; }