/* Animaciones personalizadas */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Clases de animación */
.animate-fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 0.4s ease-out;
}

.animate-zoom-in {
    animation: zoomIn 0.3s ease-out;
}

/* Clases utilitarias */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aspect ratio para imágenes */
.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Galería de imágenes */
.image-gallery {
    position: relative;
}

.main-image {
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.main-image:hover {
    transform: scale(1.05);
}

.thumbnail {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.thumbnail:hover {
    border-color: #2563eb;
    transform: scale(1.1);
}

.thumbnail.active {
    border-color: #2563eb;
    opacity: 1;
}

.thumbnail:not(.active) {
    opacity: 0.7;
}

/* Badge personalizado */
.badge-disponible {
    background: linear-gradient(135deg, #10b981, #059669);
}

.badge-pocas {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.badge-agotado {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Breadcrumbs */
.breadcrumb-item:not(:last-child)::after {
    content: '›';
    margin: 0 0.5rem;
    color: #6b7280;
}

/* Especificaciones */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* Productos relacionados scroll */
.related-products-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
}

.related-products-scroll::-webkit-scrollbar {
    height: 8px;
}

.related-products-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.related-products-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.related-product-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

/* Responsive */
@media (max-width: 768px) {
    .spec-grid {
        grid-template-columns: 1fr;
    }
    
    .related-product-card {
        flex: 0 0 250px;
    }
}

/* HEADER STYLES - Control de visibilidad por página SIMPLIFICADO */
.catalog-only {
    display: none;
}

.product-only {
    display: none;
}

/* Mostrar elementos de catálogo por defecto (index.html) */
body:not([data-page]) #headerSearchContainer,
body[data-page="catalog"] #headerSearchContainer {
    display: flex;
}

body:not([data-page]) #totalProductos,
body[data-page="catalog"] #totalProductos {
    display: inline;
}

/* Mostrar barra móvil solo en catálogo Y solo en pantallas pequeñas */
body:not([data-page]) #mobileSearchContainer,
body[data-page="catalog"] #mobileSearchContainer {
    display: block;
}

/* OCULTAR elementos de producto en catálogo */
body:not([data-page]) .product-only,
body[data-page="catalog"] .product-only {
    display: none !important;
}

body:not([data-page]) #backToCatalog,
body[data-page="catalog"] #backToCatalog {
    display: none !important;
}

/* Mostrar elementos de producto solo en producto.html */
body[data-page="product"] .product-only {
    display: flex;
}

body[data-page="product"] #backToCatalog {
    display: flex;
}

/* OCULTAR elementos de catálogo en producto */
body[data-page="product"] .catalog-only {
    display: none !important;
}

body[data-page="product"] #headerSearchContainer {
    display: none !important;
}

body[data-page="product"] #totalProductos {
    display: none !important;
}

/* Responsive para búsqueda - IMPORTANTE: esto debe ir al final */
@media (min-width: 768px) {
    /* En pantallas grandes, ocultar búsqueda móvil */
    #mobileSearchContainer {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /* En pantallas pequeñas, ocultar búsqueda desktop */
    #headerSearchContainer {
        display: none !important;
    }
}

/* Header fijo - SOLUCIÓN DEFINITIVA */
#header-container header,
header.sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background-color: white !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    width: 100% !important;
}

/* Fuerza el contenedor del header también */
#header-container {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

/* Asegurar que el body tenga el scroll correcto */
body {
    position: relative;
}

/* =================================
   ESTILOS PARA EL MENÚ DE CATEGORÍAS
   ================================= */

/* Estilos para el menú de categorías */
.category-menu-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 2px solid transparent;
}

.category-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    transform: translateY(-1px);
}

.category-menu-btn.active {
    background-color: white;
    color: #1d4ed8;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Scroll horizontal suave en móvil */
#categoryMenu nav {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#categoryMenu nav::-webkit-scrollbar {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .category-menu-btn {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* En móvil, permitir scroll horizontal */
    #categoryMenu nav {
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
}

/* AGREGAR al final de styles.css: */
/* Mostrar menú de categorías solo en catálogo */
body:not([data-page]) #categoryMenu,
body[data-page="catalog"] #categoryMenu {
    display: block !important;
}

/* Ocultar menú en páginas de producto */
body[data-page="product"] #categoryMenu {
    display: none !important;
}