:root { --main-color: #0d6efd; }
        
        body { background-color: #f8f9fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

        .viewer-container {
            max-width: 600px;
            margin: auto;
            background: white;
            border-radius: 20px;
            padding: 20px;
        }

       

        #canvas-3d {
                width: 100%;
                max-width: 600px;
                aspect-ratio: 1/1;
                position: relative;
                overflow: hidden;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
        }

.cuerpo-img {
    position: absolute; /* Superpone todas las imágenes */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    /* Configuración de suavidad */
    opacity: 0; 
    transition: opacity 0.4s ease-in-out; /* Duración del desvanecimiento */
    pointer-events: none;
}

.cuerpo-img.active {
    opacity: 1; /* Solo la imagen activa es visible */
    z-index: 10;
}

 .angle-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.1);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
        }