/* Componenti condivisi: pulsanti, form, badge, superfici, tabelle, avvisi. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s5); border-radius: var(--radius-sm); border: 1px solid var(--color-rule); background: var(--color-surface); color: var(--color-ink); font: 500 14px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background var(--dur), border-color var(--dur); }
.btn:hover { background: var(--color-soft); color: var(--color-ink); }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-dark); }
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-dark); }
.btn-danger { color: var(--color-danger); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 var(--s3); font-size: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; color: var(--color-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.field { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s4); }
.field label, .label { font-size: 13px; font-weight: 500; }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-surface); font: 15px/1.4 var(--font-body); color: var(--color-ink); }
.textarea { min-height: 120px; resize: vertical; }
.textarea-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; min-height: 480px; line-height: 1.5; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.check { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; min-height: 44px; font-size: 14px; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--color-accent); }
.form-error { color: var(--color-danger); font-size: 13px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--color-soft); color: var(--color-muted); white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-verde, .badge-ok { background: var(--color-success-bg); color: var(--color-success); }
.badge-giallo, .badge-warn { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-arancione { background: var(--color-orange-bg); color: var(--color-orange); }
.badge-rosso, .badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.chip { display: inline-block; padding: 3px 10px; border: 1px solid var(--color-rule); border-radius: var(--radius-sm); font-size: 13px; margin: 0 4px 4px 0; background: var(--color-surface); }

.panel { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--s6); margin-bottom: var(--s6); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s4); }
.panel-head h2 { margin: 0; }
.rows > * { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--color-rule-soft); }
.rows > *:first-child { border-top: 0; }
.kv dt { font-size: 12px; color: var(--color-muted); }
.kv dd { margin: 0 0 var(--s3); }

.alert { padding: var(--s3) var(--s4); border-radius: var(--radius-md); margin-bottom: var(--s4); font-size: 14px; background: var(--color-info-bg); color: var(--color-ink); border: 1px solid transparent; }
.alert strong { display: block; margin-bottom: 2px; }
.alert-ok { background: var(--color-success-bg); }
.alert-warn { background: var(--color-warning-bg); }
.alert-arancione { background: var(--color-orange-bg); }
.alert-danger, .alert-rosso { background: var(--color-danger-bg); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--color-muted); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
.table td { padding: var(--s3); border-bottom: 1px solid var(--color-rule-soft); vertical-align: top; }
.table tr:hover td { background: var(--color-paper); }
.table .input, .table .select { min-height: 36px; font-size: 13px; }

.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--color-rule-soft); font-size: 14px; }
.steps li:first-child { border-top: 0; }
.steps .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-rule); flex: none; display: grid; place-items: center; font-size: 12px; }
.steps .done .dot { background: var(--color-success); border-color: var(--color-success); color: var(--color-on-dark); }
.steps .current { font-weight: 600; }
.steps .current .dot { border-color: var(--color-accent); }
.steps .skip { color: var(--color-muted); text-decoration: line-through; }

.empty { padding: var(--s8); text-align: center; color: var(--color-muted); border: 1px dashed var(--color-rule); border-radius: var(--radius-md); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: var(--color-on-dark); padding: var(--s3) var(--s5); border-radius: var(--radius-sm); font-size: 14px; z-index: 50; }
.copy-box { display: flex; gap: var(--s2); }
.copy-box .input { font-size: 13px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } .panel { padding: var(--s4); } }
.alert-giallo { background: var(--color-warning-bg); }
.alert-verde { background: var(--color-success-bg); }
.table td .input { min-width: 120px; }

/* Campo antispam escluso dal percorso di lettura e di tastiera. */
.honeypot { display: none; }

.account-panel { max-width: 620px; }

.survey-qr { width: 188px; margin: 12px 0 24px; }
.survey-qr svg { width: 100%; height: auto; display: block; }