/* Stesso sistema di controlli, colori e caratteri del portale. */
.integrazioni { display: grid; gap: 20px; min-width: 0; }
.integrazioni [hidden] { display: none !important; }
.int-stato { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px; background: var(--superficie-2); border-left: 3px solid var(--accento); }
.int-stato > div { flex: 1; min-width: min(100%, 280px); }
.int-stato p { margin: 4px 0 0; max-width: 72ch; }
.int-etichetta { font-size: var(--t-nota); font-weight: 600;
  border: 1px solid var(--linea); padding: 4px 8px; border-radius: 4px; }
.int-schede { display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--linea); }
.int-scheda { font: inherit; color: inherit; cursor: pointer;
  border: 0; border-bottom: 3px solid transparent; background: transparent;
  padding: 12px 16px; min-height: 44px; }
.int-scheda[aria-selected="true"] { color: var(--accento-inchiostro);
  border-color: var(--accento); font-weight: 700; background: var(--accento-tenue); }
.int-scheda:focus-visible, .int-dettagli > summary:focus-visible {
  outline: 2px solid var(--accento-inchiostro); outline-offset: 2px; }
.int-pannello { min-width: 0; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 8px; padding: 24px; }
.int-pannello h2 { font-size: var(--t-titolo); margin: 0; }
.int-pannello h3 { font-size: var(--t-sottotitolo); margin: 12px 0 0; }
.int-pannello p { margin: 0; max-width: 80ch; overflow-wrap: anywhere; }
.int-passaggi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin: 0; padding: 16px 0; list-style: none; counter-reset: passo;
  border-bottom: 1px solid var(--linea); }
.int-passaggi li { display: flex; gap: 12px; counter-increment: passo; }
.int-passaggi li::before { content: counter(passo); color: var(--accento-inchiostro);
  font-family: var(--f-cifre); font-weight: 600; }
.int-dettagli { min-width: 0; border-top: 1px solid var(--linea); }
.int-dettagli > summary { padding: 16px 0; cursor: pointer;
  font-weight: 600; color: var(--accento-inchiostro); min-height: 44px; }
.int-dettagli > div { padding-bottom: 16px; }
.int-modulo { max-width: 960px; width: 100%; }
.int-modulo > button { align-self: start; }
.int-modulo .campo { min-width: 0; }
.int-modulo .controllo { width: 100%; max-width: 100%; }
.int-modulo input[type="checkbox"] { width: 20px; height: 20px; }
.int-griglia { display: grid; gap: 16px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; padding: 0; min-width: 0; }
.int-griglia legend { font-weight: 600; padding: 0 0 16px; }
.int-griglia > p { grid-column: 1 / -1; }
.int-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.int-elenco { list-style: none; padding: 0; margin: 0; }
.int-elenco > li { border: 1px solid var(--linea); border-radius: 6px;
  padding: 16px; min-width: 0; overflow-wrap: anywhere; }
.int-elenco > li > p { margin: 8px 0; }
.int-elenco > li > button { margin: 4px 8px 4px 0; }
.int-elenco ul { padding-left: 20px; }
.int-indirizzo, .int-codice { font-family: var(--f-cifre); font-size: var(--t-nota);
  background: var(--superficie-2); padding: 12px; overflow-wrap: anywhere; }
.integrazioni textarea { width: 100%; min-height: 80px; }
.integrazioni pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.integrazioni [role="status"]:empty { display: none; }
@media (max-width: 700px) {
  .int-pannello { padding: 16px; }
  .int-passaggi, .int-griglia { grid-template-columns: minmax(0, 1fr); }
  .int-scheda { padding: 12px; flex: 1 1 auto; }
  .int-stato { padding: 16px; }
  .int-stato .pulsante { width: 100%; }
}