:root {
    --primary: #0056b3;
    --bg: #f4f6f9;
    --card: #ffffff;
}

body {  }

.container_codigos { font-family: 'Segoe UI', sans-serif; background: var(--bg); margin: 0; background: var(--card); padding: 2rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

.generator-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 600px) { .generator-wrapper { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 1.5rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #555; }
input[type="text"], select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }

/* Color Picker */
.color-picker { display: flex; gap: 10px; }
.color-picker input { display: none; }
.color-picker label { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s; }
.color-picker input:checked + label { border-color: #333; transform: scale(1.1); box-shadow: 0 0 5px rgba(0,0,0,0.3); }

button { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; }
button:hover { opacity: 0.9; }

.result-section { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fafafa; border-radius: 8px; padding: 20px; border: 2px dashed #ddd; }
#qr-image { max-width: 100%; height: auto; margin-bottom: 15px; border: 1px solid #eee; }

.btn-outline { text-decoration: none; color: var(--primary); border: 1px solid var(--primary); padding: 8px 16px; border-radius: 4px; display: inline-block; margin-top: 10px; }

/* Estilos para vCard */
.vcard-group input {
    margin-bottom: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
}

.form-row {
    display: flex;
    gap: 10px;
}