/* Efecto al arrastrar un archivo sobre la zona */
#drop-zone.dragover {
    border-color: #3b82f6; /* Tailwind blue-500 */
    background-color: #eff6ff; /* Tailwind blue-50 */
    transform: scale(1.02);
}

/* Animación de entrada para el panel del editor */
#editor-panel {
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Transición suave para el fondo a cuadros de la previsualización */
#image-preview {
    background-image: 
      linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
      linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}