html, body {
                background-color: transparent; 
                overflow: auto; 
                scrollbar-width: none;
                -ms-overflow-style: none;
                overflow-x: hidden; 
            }

            .table-busqueda {
                width: 100%;
                border-collapse: collapse;
                margin-top: 20px;
                background-color: #fff;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                font-family: 'Lato', sans-serif;
                table-layout: auto;
            }
            
            .table-busqueda th, .table-busqueda td {
                padding: 12px;
                text-align: left;
                border: 1px solid #ddd;
            }
            
            .table-busqueda th {
                background-color: #f4f4f4;
                font-weight: bold;
                color: #333;
                text-transform: uppercase;
            }
            
            .table-busqueda tr:nth-child(even) {
                background-color: #fafafa;
            }
            
            .table-busqueda tr:hover {
                background-color: #f1f1f1;
            }
            
            .table-busqueda td {
                color: #555;
                font-size: 14px;
            }
            
            .table-busqueda td:first-child {
                font-weight: bold;
            }
            
            .table-busqueda .valor-col {
                font-weight: bold;
                color: #2a9d8f;
            }
            
            .table-busqueda .categoria-col { width: 10%; }
            .table-busqueda .marca_repuesto-col { width: 8%; }
            .table-busqueda .descripcion-col { width: 32%; }
            .table-busqueda .stock-col { width: 5%; }
            .table-busqueda .valor-col { width: 5%; text-align: right; }
            .table-busqueda .carrito-col { width: 5%; text-align: right; }

            .descripcion-col a {
    background: transparent;
    color: #222;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    display: inline;
}

.descripcion-col a:hover {
    color: #2a9d8f;
    text-decoration: underline;
}

.descripcion-col {
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

            /* Estilo base de los Selects (Combos) */
            .filtros select {
                padding: 10px 15px;
                font-size: 14px;
                font-family: 'Lato', sans-serif;
                color: #333;
                background-color: #ffffff;
                border: 2px solid #e0e0e0;
                border-radius: 8px;
                outline: none;
                cursor: pointer;
                transition: all 0.3s ease;
                min-width: 200px;
                appearance: none; 
                background-image: url("data:image/svg+xml,%3Csvg xmlns='www.w3.org' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 15px center;
            }

            /* Efecto al pasar el ratón */
            .filtros select:hover:not(:disabled) {
                border-color: #2a9d8f;
                box-shadow: 0 0 8px rgba(42, 157, 143, 0.2);
            }

            /* Efecto al hacer foco (click) */
            .filtros select:focus {
                border-color: #2a9d8f;
                background-color: #fff;
            }

            /* Estilo para los combos deshabilitados (disabled) */
            .filtros select:disabled {
                background-color: #f2f2f2;
                color: #aaa;
                cursor: not-allowed;
                border-color: #ddd;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='www.w3.org' width='12' height='12' fill='%23ccc' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            }        
                                
            .repuesto-info { cursor: pointer; color: #2a9d8f; text-decoration: underline; font-weight: 500; }
            .btn-carrito { background: #2a9d8f; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }

            /*nuevo*/
           .imagen-seccion {
                width: 140px;              
                height: 130px;             
                overflow: hidden;          
                border-radius: 8px;        
                background-color: #f0f0f0; 
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
                flex-shrink: 0;
                border: 2px solid #2a9d8f;
            }

            /* La imagen dentro del contenedor */
            .imagen-seccion img {
                width: 100%;               
                height: 100%;              
                object-fit: contain;       
                object-position: center;   
                display: block;            
                transition: opacity 0.3s ease; 
            }

            /* Para mostrar la imagen cuando esté completamente cargada */
            .imagen-seccion img.loaded {
                opacity: 1;             
            }

            .imagen-seccion {
                width: 160px;
                height: 150px;
                overflow: hidden;
                border-radius: 8px;
                background-color: #f0f0f0; 
                box-shadow: 0 4px 15px rgba(0,0,0,0.2);
                flex-shrink: 0;
                border: 2px solid #2a9d8f;
            }

            .filtros {
                display: flex;
                justify-content: center; 
                align-items: center;
                gap: 40px; 
                margin: 30px 20px 20px 20px; 
                padding: 15px;
                background-color: #f9f9f9;
                border-radius: 12px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            }

            
        

            .btn-buscar {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                padding: 12px 28px;
                background: linear-gradient(135deg, #2a9d8f 0%, #264653 100%);
                color: #ffffff;
                border: none;
                border-radius: 10px;
                font-size: 15px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 4px 15px rgba(42, 157, 143, 0.3);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }

            /* Efecto al pasar el mouse */
            .btn-buscar:hover {
                background: linear-gradient(135deg, #35b3a4 0%, #2a9d8f 100%);
                box-shadow: 0 6px 20px rgba(42, 157, 143, 0.4);
                transform: translateY(-2px);
            }

            /* Efecto al hacer clic */
            .btn-buscar:active {
                transform: translateY(1px);
                box-shadow: 0 2px 10px rgba(42, 157, 143, 0.2);
            }

            /* Estilo para el icono de lupa */
            .icon-buscar {
                width: 18px;
                height: 18px;
                transition: transform 0.3s ease;
            }

            .btn-buscar:hover .icon-buscar {
                transform: scale(1.2) rotate(-10deg);
            }

            .btn-carrito {
                background: linear-gradient(135deg, #28a745, #218838);
                color: white;
                border: none;
                padding: 7px 14px;
                border-radius: 8px;
                font-size: 13px;
                cursor: pointer;
                transition: background 0.2s ease, transform 0.1s ease;
            }

            .btn-carrito:hover {
                background: linear-gradient(135deg, #218838, #1e7e34);
                transform: scale(1.05);
            }

            /* =======================
            RESPONSIVE
            ======================= */
           @media (max-width: 900px) {
                .filtros {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 20px;
                }

                .filtros select {
                    min-width: 100%; /* Hace que los selects ocupen todo el ancho disponible */
                }

                .btn-buscar {
                    width: 100%; /* Botón a 100% de ancho */
                    margin-top: 10px;
                }

                .imagen-seccion {
                    width: 130px;
                    height: 120px;
                }
            }

            @media (max-width: 768px) {
                .filtros {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

            .filtros select {
                min-width: 100%; /* Hace que los selects ocupen todo el ancho disponible */
            }

            .btn-buscar {
                width: 100%; /* Botón a 100% de ancho */
                margin-top: 10px;
            }

            .imagen-seccion {
                width: 130px;
                height: 120px;
            }
        }
            

        /* Overlay oculto por defecto */
        #rotate-warning {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            z-index: 99999;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        #rotate-warning .rotate-box {
            max-width: 520px;
            width: 100%;
            background: #111;
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 14px;
            padding: 18px 16px;
            text-align: center;
            color: #fff;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }

        #rotate-warning .rotate-sub {
            opacity: 0.85;
            margin-top: 6px;
            font-size: 0.95rem;
        }

        /* En móvil y en vertical: mostrar overlay y ocultar contenido */
        @media screen and (max-width: 900px) and (orientation: portrait) {
           header {
                display: none !important;
            }

            body {
                margin-top: 0;
                padding-top: 0;
            }
            
            #rotate-warning {
                display: flex;
            }
            #page-content {
                display: none;
            }
        }
        
        
        
        /*NUEVOS CSS*/
.nav-galeria {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px; /* Cambié el tamaño de la fuente para que sea más acorde */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro para los botones */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Agregué transición suave */
    border-radius: 50%; /* Hace los botones redondos */
    user-select: none;
}

#prevImg {
    left: 10px;
}

#nextImg {
    right: 10px;
}

/* Efecto al pasar el mouse */
.nav-galeria:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Aumenta la opacidad del fondo al pasar el mouse */
    transform: translateY(-50%) scale(1.2); /* Aumenta el tamaño del botón cuando se pasa el mouse */
}