#scene-container {
    position: fixed;
    /* --- Tus reglas exactas --- */
    right: 2%;
    bottom: 2%;
    width: 69%;
    height: 91%;
}

#main-script-input {
 
width: 80%;
height: 150px;


}




/* El canvas debe rellenar su contenedor al 100% */
#scene-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

        #controls-panel {
            width: 28%;
            height: 100vh;
            overflow-y: auto;
        }
        /* Estilo para la barra de scroll */
        #controls-panel::-webkit-scrollbar { width: 8px; }
        #controls-panel::-webkit-scrollbar-track { background: #1f2937; }
        #controls-panel::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Estilo para los selectores de color */
        input[type="color"] {
            -webkit-appearance: none;
            width: 100%;
            height: 40px;
            border: none;
            cursor: pointer;
            background: none;
        }
        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        input[type="color"]::-webkit-color-swatch {
            border: 1px solid #4b5563;
            border-radius: 0.375rem; /* rounded-md */
        }