/* Efecto de Drag & Drop */
#drop-zone.dragover {
    border-color: #3b82f6; /* Tailwind blue-500 */
    background-color: #eff6ff;
    transform: scale(1.02);
}

/* Patrón de ajedrez para indicar transparencia en la imagen de resultado */
.checkerboard {
    background-image: 
      linear-gradient(45deg, #e5e7eb 25%, transparent 25%), 
      linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), 
      linear-gradient(45deg, transparent 75%, #e5e7eb 75%), 
      linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #f9fafb;
}

/* Animaciones suaves para la aparición de paneles */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

#result-panel, #loading-panel {
    animation: fadeIn 0.5s ease-out forwards;
}