/* Bottoni del sito: una grammatica sola per tutti i comandi.

   Erano otto famiglie indipendenti (`cond-btn`, `btn-azione`, `art-btn`, `account-btn`,
   `mise-doc-btn`, `dett-doc-btn`, `aud-btn`, `abil-btn`), ciascuna con padding, raggio e
   corpo propri: differenze da 8px 14px a 11px 24px che nessuno aveva deciso: erano accidenti
   di scrittura, nate copiando e ritoccando. I colori invece già convergevano — azzurro accent
   #52bdec e hover #3aa9db quasi ovunque — segno che la grammatica c'era, solo non scritta.

   DUE TAGLIE, non una:
   - normale (.btn)        comandi che stanno da soli o in coppia: Salva, Annulla, Scarica.
                           Misura presa dalla più grande in uso (era dei bottoni articoli).
   - piccola (.btn-piccolo) comandi in fila dentro tabelle e card, dove ce ne sono parecchi
                           vicini e la taglia normale li farebbe sfondare la riga.

   Composizione: class="btn btn-primario" oppure class="btn btn-neutro btn-piccolo". */

/* ── Base (taglia normale) ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* L'icona non si deforma quando il testo accanto è lungo. */
.btn svg { flex: 0 0 auto; }
.btn:focus-visible { outline: 2px solid #52bdec; outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Taglia piccola ──────────────────────────────────────────────────────────────────── */

.btn-piccolo {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13.5px;
}

/* ── Varianti ────────────────────────────────────────────────────────────────────────── */

/* Azione principale: pieno, accent. Gli stati dei link sono elencati uno per uno perché
   `default.css` del tema colora i link di bluette su :focus/:active — su un fondo azzurro
   il testo sparirebbe. */
.btn-primario,
.btn-primario:link,
.btn-primario:visited,
.btn-primario:focus,
.btn-primario:active { background: #52bdec; color: #fff; }
.btn-primario:hover:not(:disabled) { background: #3aa9db; color: #fff; }

/* Azione secondaria (annulla, torna indietro): bianco con bordo, non tira il clic. */
.btn-neutro,
.btn-neutro:link,
.btn-neutro:visited,
.btn-neutro:focus,
.btn-neutro:active { background: #fff; border-color: #d4dbe0; color: #6a6c5e; }
.btn-neutro:hover:not(:disabled) { background: #fff; border-color: #6a6c5e; color: #252525; }

/* Azione che non si annulla (elimina, svuota): rosso solo al bordo a riposo, pieno al
   passaggio del mouse — deve farsi riconoscere senza tirare il clic mentre si legge. */
.btn-pericolo,
.btn-pericolo:link,
.btn-pericolo:visited,
.btn-pericolo:focus,
.btn-pericolo:active { background: #fff; border-color: #e6b3bb; color: #b00020; }
.btn-pericolo:hover:not(:disabled) { background: #b00020; border-color: #b00020; color: #fff; }
.btn-pericolo:focus-visible { outline-color: #b00020; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}