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

/* VARIABLES GLOBALES */
:root {
    --color-primary: #FF9900;   /* Naranja Feseg */
    --color-secondary: #1A1A1A; /* Negro/Gris oscuro del logo */
    --color-accent: #FFB347;    /* Naranja claro para hovers */
    --color-white: #ffffff;
    --color-gray-light: #F3F4F6;
}

/* CLASES REUTILIZABLES */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }

@layer components {

    /* BOTONES */
    .btn-slider {
        @apply px-10 py-4 rounded-full font-bold w-fit transition-all duration-300;
        background-color: var(--color-primary);
        color: white;
    }

    .btn-slider:hover {
        @apply shadow-lg transform -translate-y-1;
        background-color: white;
        color: var(--color-secondary);
    }

    .btn-cart {
        @apply w-full py-2 rounded font-bold text-xs uppercase transition-colors duration-300;
        background-color: var(--color-secondary);
        color: white;
    }

    .btn-cart:hover {
        background-color: var(--color-primary);
    }

    .btn-category {
        @apply inline-block w-fit px-5 py-2 text-[10px] font-bold uppercase rounded-full transition-all shadow-md;
        background-color: var(--color-primary);
        color: white;
    }

    .btn-category:hover {
        background-color: var(--color-white);
        color: var(--color-primary);
    }

    /* TARJETAS */
    .card-category {
        @apply flex items-center bg-white border border-gray-200 rounded-2xl shadow-sm transition-all duration-300 overflow-hidden group;
    }

    .card-category:hover {
        @apply shadow-xl border-primary;
    }

    .card-product {
        @apply bg-white p-4 border border-gray-200 rounded-lg flex flex-col items-center text-center transition-all duration-300;
    }
    
    .card-product:hover {
        @apply shadow-lg border-primary;
    }

    /* FOOTER OPTIMIZADO */
    .title-footer {
        @apply font-black uppercase tracking-wider mb-6 pb-2 border-b border-gray-700;
        color: var(--color-primary); /* Contraste alto sobre fondo oscuro */
        display: block;
    }

    .footer-link {
        @apply transition-colors duration-300 text-gray-400 text-sm;
    }

    .footer-link:hover {
        @apply text-white translate-x-1;
    }

    .icon-orange {
        @apply transition-transform duration-300;
        color: var(--color-primary);
    }
}

/* WHATSAPP WIDGET */
#whatsapp-widget { 
    transition: all 0.3s ease; 
}

#whatsapp-menu { 
    animation: fadeIn 0.3s ease-out; 
}

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

/* SWIPER CUSTOMIZATION */
.main-next, .main-prev {
    width: 45px !important;
    height: 45px !important;
    background-color: var(--color-primary) !important;
    color: white !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease !important;
}

.main-next:hover, .main-prev:hover {
    transform: scale(1.1);
}

.main-next::after, .main-prev::after {
    font-size: 20px !important;
    font-weight: bold;
}

.brand-next, .brand-prev {
    background: none !important;
    color: var(--color-primary) !important;
    width: 20px !important;
}

.brand-next::after, .brand-prev::after {
    font-size: 25px !important;
    font-weight: bold;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-primary) !important;
}