/* Animaciones simples para cuando cambiamos de pestaña */
.qr-form {
    animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-4px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Asegurar que el canvas y el svg sean responsive y encajen en el contenedor */
#qr-canvas-container canvas, 
#qr-canvas-container svg {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Redondear un poco los bordes del QR generado */
}

/* Modificar la apariencia de los inputs de color para hacerlos más redondos */
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}