body {
    background: #f0f4f8;
    font-family: 'Inter', sans-serif;
    color: #334155;
}

.card {
    border-radius: 1.5rem;
}

.btn-primary {
    background-color: #008cba;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #00729a;
    transform: translateY(-2px);
}

#qrcode img {
    border: 10px solid white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.input-group-text {
    border-right: none;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25 margin-left: rgba(0, 140, 186, 0.25);
    border-color: #008cba;
}

pre {
    margin-bottom: 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: 'Courier New', Courier, monospace;
    border: 1px solid #333;
}

#widgetPreview a {
    pointer-events: none; /* Evita que el usuario navegue al probar el diseño en la preview */
}

#seccionWidget .card-header {
    border-bottom: 2px solid #008cba;
}