/* Estilos para la zona de arrastrar y soltar (Drag and Drop) */

.ps-drag-drop-area {
    /* Posicionamiento para superponerse */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; /* Un z-index alto para asegurar que esté por encima del canvas de Three.js */

    /* Apariencia */
    border: 2px dashed #aaa;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);

    /* Centrar contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    /* Transición para suavizar cambios */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;

    /* Habilitar eventos de puntero para esta área específica */
    pointer-events: auto;

    /* Inicialmente visible, pero se puede ocultar con JS si se carga un modelo */
    visibility: visible;
    opacity: 1;
}

/* Estilo cuando se arrastra un archivo sobre la zona */
.ps-drag-drop-area.drag-over {
    border-color: var(--ps-accent-color, #2271b1);
    background-color: rgba(220, 235, 255, 0.9);
}

.ps-drag-drop-content p {
    font-size: 1.2em;
    color: #555;
    pointer-events: none; /* Para que no interfiera con los eventos de arrastre */
}

/* Ocultar la zona de drop cuando un modelo ya está cargado */
.ps-drag-drop-area.ps-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none; /* Desactivar interacciones cuando está oculto */
}