:root {
  /* Tutti i colori dell'app: si cambiano qui. Stessa palette di Inventario Alident, cosi' le due app sembrano una sola. */
  --accento: #2563eb;
  --accento-scuro: #1d4ed8;
  --accento-tenue: #eff6ff;
  --accento-bordo: #bfdbfe;
  --sfondo: #f7f8fa;
  --pannello: #ffffff;
  --bordo: #e5e7eb;
  --bordo-forte: #d1d5db;
  --testo: #1a1d29;
  --testo-debole: #6b7280;
  --testo-tenue: #9ca3af;
  --neutro-tenue: #f2f4f7;
  --bolla-in: #ffffff;
  --bolla-out: #e6effe;
  --pericolo: #b42318;
  --pericolo-tenue: #fef4f4;
  --pericolo-bordo: #fca5a5;
  --pericolo-testo: #b42318;
  --avviso-tenue: #fef3ec;
  --avviso-bordo: #fdcf9b;
  --avviso-testo: #c2410c;
  --ok-tenue: #ecfdf3;
  --ok-testo: #166534;
  --evidenzia: #fef08a;
  --nota-sfondo: #fef9c3;
  --nota-bordo: #fde68a;
  --interruttore-spento: #d1d5db;
  --ombra-menu: 0 8px 24px rgba(15, 17, 22, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  background: var(--sfondo);
  color: var(--testo);
  height: 100vh;
  overflow: hidden;
}

a { color: var(--accento-scuro); text-decoration: none; }
input, select, textarea { font-family: inherit; }
/* Focus uguale ovunque, nel colore dell'app (al posto dell'alone arancione del browser) */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accento) !important; box-shadow: 0 0 0 3px var(--accento-tenue); }

/* ---------- Barra laterale e sezioni ---------- */
.applicazione { display: flex; height: 100vh; }
.contenuto { flex: 1; min-width: 0; height: 100vh; }
.sezione { height: 100vh; }

.barra-laterale {
  flex-shrink: 0; width: 236px; background: var(--pannello); border-right: 1px solid var(--bordo);
  display: flex; flex-direction: column; overflow-y: auto;
}
.testa-barra { padding: 18px 14px 14px; }
.nome-app { font-size: 16px; font-weight: 700; }
.utente-barra { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.avatar-utente {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accento); color: white;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.utente-info { flex: 1; min-width: 0; }
.utente-nome { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utente-ruolo { font-size: 10.5px; color: var(--testo-debole); text-transform: uppercase; }
.bottone-esci { border: none; background: transparent; color: var(--testo-debole); cursor: pointer; font: inherit; font-size: 12px; padding: 2px 0; }
.bottone-esci:hover { color: var(--testo); }

.voci-barra { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-top: 1px solid var(--bordo); }
.gruppo-barra { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--testo-tenue); text-transform: uppercase; padding: 10px 12px 2px; }
.voce-barra {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px; border: none; border-left: 3px solid transparent;
  border-radius: 0 9px 9px 0; background: transparent; color: var(--testo-debole); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
}
.voce-barra svg { width: 18px; height: 18px; flex-shrink: 0; margin-right: 4px; }
.voce-barra:hover:not(.attiva) { color: var(--testo); }
.voce-barra.attiva { background: var(--accento-tenue); border-left-color: var(--accento); color: var(--accento); }
.voce-barra.in-fondo { margin-top: auto; }

.pagina-vuota { max-width: 460px; margin: 15vh auto 0; text-align: center; padding: 0 20px; }
.pagina-vuota h2 { margin: 0 0 8px; font-size: 20px; }
.pagina-vuota p { color: var(--testo-debole); line-height: 1.5; }

/* ---------- Login / setup ---------- */
.schermo-centrato { display: flex; align-items: center; justify-content: center; height: 100vh; padding: 20px; }
.scheda-login {
  background: var(--pannello); padding: 28px; border-radius: 18px; border: 1px solid var(--bordo);
  box-shadow: 0 18px 50px rgba(20, 30, 50, .12); width: min(420px, 100%);
}
.logo-login {
  width: 46px; height: 46px; border-radius: 12px; background: var(--accento); color: white;
  display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 18px;
}
.scheda-login h1 { font-size: 20px; margin: 0 0 20px; }
.scheda-login input {
  width: 100%; padding: 11px 12px; margin-bottom: 12px; border: 1px solid var(--bordo); border-radius: 9px; font-size: 14px;
}
.scheda-login button {
  width: 100%; margin-top: 5px; padding: 11px; background: var(--accento); border: none; border-radius: 8px;
  color: white; font-weight: 600; cursor: pointer; font-size: 14px;
}
.scheda-login button:hover { background: var(--accento-scuro); }
.scheda-login .errore { color: var(--pericolo); font-size: 13px; margin-bottom: 10px; }

/* ---------- Avatar ---------- */
.avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
}

/* ---------- Inbox: colonna elenco ---------- */
.corpo-inbox { display: flex; }

.inbox-nav {
  width: 190px; flex-shrink: 0; padding: 18px 10px; background: var(--sfondo); border-right: 1px solid var(--bordo);
  overflow-y: auto;
}
.inbox-nav-titolo { padding: 0 10px 14px; font-size: 16px; font-weight: 700; }
.inbox-nav-sezione {
  padding: 20px 10px 6px; color: var(--testo-tenue); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.inbox-nav-voci { display: flex; flex-direction: column; gap: 3px; }
.inbox-nav-voce {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: none;
  border-left: 3px solid transparent; border-radius: 0 8px 8px 0; background: transparent; color: var(--testo-debole);
  font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.inbox-nav-voce > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-nav-voce:hover:not(.attiva) { background: var(--pannello); color: var(--testo); }
.inbox-nav-voce.attiva { background: var(--accento-tenue); border-left-color: var(--accento); color: var(--accento-scuro); }
.inbox-nav-icona { width: 17px; height: 17px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.inbox-nav-icona svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-nav-icona .pallino-sede, .inbox-nav-pallino { width: 9px; height: 9px; border-radius: 50%; display: block; }
.inbox-nav-voce b {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--accento); color: white;
  font-size: 10.5px; line-height: 17px; text-align: center;
}

.elenco-conversazioni { width: 340px; border-right: 1px solid var(--bordo); background: var(--pannello); display: flex; flex-direction: column; }

.intestazione-lista {
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; border-bottom: 1px solid var(--bordo);
}

.barra-ricerca { padding: 8px 12px; display: flex; gap: 8px; border-bottom: 1px solid var(--bordo); }
.barra-ricerca input {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 18px; border: 1px solid var(--bordo);
  background: var(--sfondo); font-size: 13px;
}
.barra-ricerca select { padding: 6px 6px; border-radius: 8px; border: 1px solid var(--bordo); background: white; font-size: 12px; width: 100px; flex-shrink: 0; }

.titolo-sezione { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; color: var(--testo-debole); text-transform: uppercase; letter-spacing: .04em; }
.risultato-paziente {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer;
}
.avatar-numero { background: var(--accento-tenue); color: var(--accento-scuro); font-size: 20px; }
.risultato-paziente:hover { background: var(--sfondo); }
.risultato-paziente.disabilitato { opacity: 0.5; cursor: not-allowed; }
.risultato-paziente .info-risultato { flex: 1; min-width: 0; }
.risultato-paziente .nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.risultato-paziente .dettaglio { font-size: 12px; color: var(--testo-debole); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Senza un limite il tag-sedi (con piu' di una sede) si prende tutto lo spazio e schiaccia nome/numero: meglio che vada
   a capo su piu' righe lui, dentro una colonna piu' stretta, piuttosto che rubare spazio al resto della riga. */
.risultato-paziente .tag-sedi { flex: 0 1 auto; max-width: 45%; justify-content: flex-end; }

.zona-elenco { flex: 1; overflow-y: auto; }
.voce-conversazione { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--bordo); cursor: pointer; }
.voce-conversazione:hover { background: var(--sfondo); }
.voce-conversazione.attiva { background: var(--accento-tenue); }
.voce-conversazione.non-letta .nome, .voce-conversazione.non-letta .anteprima { color: var(--testo); font-weight: 700; }
.contatore-non-letti {
  flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accento); color: white;
  font-size: 10.5px; font-weight: 700; line-height: 19px; text-align: center;
}
.voce-conversazione .info-conversazione { flex: 1; min-width: 0; }
.voce-conversazione .riga-nome { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.voce-conversazione .nome { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce-conversazione .anteprima { font-size: 13px; color: var(--testo-debole); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* Il colore della sede e' il pallino (dato inline da etichette.js), lo stesso di Inventario Alident */
.tag-sede {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap; background: var(--neutro-tenue); color: var(--testo);
}
.tag-sede .pallino-sede { width: 7px; height: 7px; }
.tag-sedi { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag-sede.tag-nessuna { background: var(--neutro-tenue); color: var(--testo-debole); }
.tag-sede-secondaria { color: var(--testo-debole); font-weight: 500; }
.tag-sede-riferimento { box-shadow: inset 0 0 0 1px var(--bordo); }
.segno-riferimento { color: var(--accento); font-size: 11px; font-weight: 800; }
.voce-conversazione .riga-tag { margin-top: 3px; }

.filtro-sedi { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--bordo); }
.pillola {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--bordo); background: white; color: var(--testo-debole); font-size: 12.5px; font-weight: 600;
  padding: 5px 13px; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.pillola:hover:not(.attiva) { color: var(--testo); }
.pallino-sede { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pillola.attiva .pallino-sede { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.pillola.attiva { background: var(--accento); border-color: var(--accento); color: white; }

@media (max-width: 1150px) {
  .inbox-nav { width: 155px; }
  .elenco-conversazioni { width: 300px; }
}

/* ---------- Inbox: pannello chat ---------- */
.pannello-chat { flex: 1; min-width: 0; display: flex; }
.colonna-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Scheda contatto: la terza colonna (sparisce sugli schermi stretti) */
.scheda-contatto { display: none; position: relative; width: 300px; flex-shrink: 0; background: var(--pannello); border-left: 1px solid var(--bordo); padding: 20px 18px; overflow-y: auto; }
.con-scheda .scheda-contatto { display: block; }
.chiudi-scheda { position: absolute; top: 8px; right: 10px; border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--testo-debole); cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.chiudi-scheda:hover { background: var(--sfondo); color: var(--testo); }
.riga-dato { display: flex; flex-direction: column; margin-bottom: 8px; font-size: 13px; }
.riga-dato > span { font-size: 11px; color: var(--testo-debole); }
.riga-dato b { font-weight: 500; overflow-wrap: anywhere; }
.griglia-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.griglia-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; background: var(--neutro-tenue); }
.file-scheda { display: block; padding: 7px 10px; border: 1px solid var(--bordo); border-radius: 8px; margin-bottom: 6px; color: inherit; }
.file-scheda:hover { background: var(--sfondo); }
.file-scheda b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.file-scheda span { font-size: 11px; color: var(--testo-debole); }
.contatto-testa { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 0 14px; }
.contatto-testa .avatar { width: 64px; height: 64px; font-size: 22px; margin-bottom: 10px; }
.contatto-nome { font-weight: 600; font-size: 16px; }
.contatto-numero { color: var(--testo-debole); font-size: 13px; margin-top: 2px; }
.contatto-sedi-riga { margin-top: 8px; }
.azioni-contatto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 0 14px; border-bottom: 1px solid var(--bordo); }
.azioni-contatto button {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--bordo); border-radius: 9px; background: var(--sfondo); color: var(--testo); font: inherit;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.azioni-contatto button:hover { border-color: var(--accento); background: var(--accento-tenue); color: var(--accento-scuro); }
.azioni-contatto svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scelta-sede-riferimento { width: 100%; margin-top: 12px; padding: 10px; border: 1px solid var(--bordo); border-radius: 10px; text-align: left; background: var(--sfondo); }
.scelta-sede-riferimento label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 600; color: var(--testo-debole); text-transform: uppercase; letter-spacing: .04em; }
.scelta-sede-riferimento select { width: 100%; padding: 7px 9px; border: 1px solid var(--bordo); border-radius: 8px; background: white; color: var(--testo); font: inherit; }
.scelta-sede-riferimento small { display: block; margin-top: 6px; color: var(--testo-debole); font-size: 11px; line-height: 1.35; }
.esito-sede-riferimento { min-height: 15px; margin-top: 4px; color: var(--accento-scuro); font-size: 11px; }

/* ---------- Scheda contatto: sezioni richiudibili (<details> nativo, nessuno stato JS da mantenere) ---------- */
.contatto-sezione { border-bottom: 1px solid var(--bordo); }
.contatto-sezione:last-of-type { border-bottom: none; }
.contatto-sezione > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 0; font-size: 11px; font-weight: 600; color: var(--testo-debole); text-transform: uppercase; letter-spacing: .04em;
}
.contatto-sezione > summary::-webkit-details-marker { display: none; }
.contatto-sezione > summary::after {
  content: ""; flex-shrink: 0; width: 6px; height: 6px; border-right: 2px solid var(--testo-debole); border-bottom: 2px solid var(--testo-debole);
  transform: rotate(-45deg); transition: transform .15s;
}
.contatto-sezione[open] > summary::after { transform: rotate(45deg); }
.contatto-sezione-corpo { padding-bottom: 14px; font-size: 14px; }
.contatto-sezione-corpo .aiuto { font-size: 12px; color: var(--testo-debole); margin-top: 2px; }
.nota-contatto { padding: 9px 10px; margin-bottom: 7px; border: 1px solid var(--bordo); border-radius: 9px; background: var(--sfondo); }
.nota-contatto p { margin: 0 0 5px; font-size: 12px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-contatto small { display: block; color: var(--testo-debole); font-size: 10px; }
/* Documenti Alfadocs aperti dalla graffetta: griglia di miniature invece di un elenco di nomi. Foto vere (caricate solo quando
   la miniatura entra nello schermo, "loading=lazy"); per gli altri formati un'icona generica + l'estensione, che
   basta a riconoscere il tipo di file senza leggerne il nome. */
.griglia-documenti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.documento-riquadro {
  display: flex; flex-direction: column; gap: 2px; border: none; background: none; padding: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer;
}
.documento-riquadro.disabilitato { cursor: default; opacity: .6; }
.documento-miniatura {
  position: relative; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--bordo); background: var(--neutro-tenue);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.documento-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.documento-miniatura svg { width: 26px; height: 26px; color: var(--testo-debole); }
.documento-estensione {
  position: absolute; bottom: 4px; right: 4px; background: rgba(15, 17, 22, .65); color: white;
  font-size: 9px; font-weight: 700; letter-spacing: .02em; padding: 1px 5px; border-radius: 4px;
}
.documento-nome-breve { font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documento-didascalia { display: block; margin: 0; font-size: 10px; }
.documento-esito { display: block; margin-top: 1px; }
.voce-timeline { padding: 8px 10px; border: 1px solid var(--bordo); border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
.tl-riga { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-riga b { font-weight: 600; }
.tl-dettaglio { font-size: 12px; color: var(--testo-debole); margin-top: 2px; }
.tl-stato { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--neutro-tenue); color: var(--testo-debole); white-space: nowrap; }
.tl-stato-confirmed { background: var(--ok-tenue); color: var(--ok-testo); }
.tl-stato-absent { background: var(--pericolo-tenue); color: var(--pericolo-testo); }
.voce-timeline .tag-sede { margin-top: 6px; }
.avviso-omaggio { padding: 9px 10px; margin-bottom: 7px; border: 1px solid var(--avviso-bordo); border-radius: 8px; background: var(--avviso-tenue); }
.avviso-omaggio.da_consegnare { border-color: #9ad4ad; background: var(--ok-tenue); }
.avviso-omaggio b, .avviso-omaggio span { display: block; }
.avviso-omaggio b { font-size: 13px; }
.avviso-omaggio span { margin: 2px 0 6px; color: var(--testo-debole); font-size: 11px; }
/* su schermi stretti la scheda si sovrappone alla conversazione invece di stringerla */
.pannello-chat { position: relative; }
@media (max-width: 1100px) { .con-scheda .scheda-contatto { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; box-shadow: -4px 0 16px rgba(0,0,0,.08); } }
.pannello-chat .vuoto { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--testo-debole); text-align: center; padding: 0 40px; }

.intestazione-chat {
  padding: 8px 16px; background: var(--pannello); border-bottom: 1px solid var(--bordo);
  display: flex; align-items: center; gap: 10px;
}
.chat-identita { display: flex; align-items: center; gap: 10px; border: none; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 4px 10px 4px 4px; margin: -4px 0 -4px -4px; border-radius: 10px; }
.chat-identita:hover { background: var(--sfondo); }
.chat-identita:hover .nome { color: var(--accento); }
.freccia-scheda { font-size: 20px; color: var(--testo-debole); margin-left: 2px; }
.con-scheda .freccia-scheda { transform: rotate(180deg); }
.intestazione-chat .info-chat { min-width: 0; display: flex; flex-direction: column; }
/* i file dentro le bolle */
.foto-messaggio { display: block; max-width: 100%; max-height: 260px; border-radius: 6px; margin-bottom: 6px; }
.audio-messaggio { display: block; max-width: 100%; margin-bottom: 6px; }
.video-messaggio { display: block; max-width: 100%; max-height: 260px; border-radius: 6px; margin-bottom: 6px; }
.file-messaggio { display: block; padding: 8px 10px; border-radius: 8px; background: var(--neutro-tenue); color: inherit; margin-bottom: 6px; }
.file-messaggio b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.file-messaggio span { font-size: 11px; color: var(--testo-debole); }
.file-non-scaricato { font-style: italic; color: var(--testo-debole); font-size: 13px; }
.allegato-chat + .allegato-chat { margin-top: 6px; }
.azioni-allegato { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 3px 0 5px; }
.salva-alfadocs, .scarica-allegato {
  display: inline-block; margin: 0; padding: 4px 8px; border: 1px solid var(--accento-bordo); border-radius: 6px;
  background: white; color: var(--accento-scuro); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.salva-alfadocs:hover, .scarica-allegato:hover { border-color: var(--accento); background: var(--accento-tenue); }
.salva-alfadocs:disabled { opacity: .6; cursor: default; }
.allegato-salvato-alfadocs { display: inline-block; color: var(--ok-testo); font-size: 11px; font-weight: 600; }
.dialogo-alfadocs { width: min(440px, calc(100vw - 32px)); padding: 0; border: none; border-radius: 14px; box-shadow: var(--ombra-menu); }
.dialogo-alfadocs::backdrop { background: rgba(15, 23, 42, .38); }
.dialogo-anteprima-documento { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.dialogo-documenti-alfadocs { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.dialogo-documenti-alfadocs .modulo-alfadocs { max-height: calc(100vh - 32px); overflow-y: auto; }
.dialogo-documenti-alfadocs .griglia-documenti { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dialogo-anteprima-documento .modulo-alfadocs { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.anteprima-documento { min-height: 240px; max-height: 65vh; display: flex; align-items: center; justify-content: center; overflow: auto; border: 1px solid var(--bordo); border-radius: 10px; background: var(--sfondo); }
.anteprima-documento img { display: block; max-width: 100%; max-height: 65vh; object-fit: contain; }
.anteprima-documento-frame { width: 100%; height: 62vh; border: 1px solid var(--bordo); border-radius: 10px; background: white; }
.anteprima-documento-non-disponibile { padding: 28px; text-align: center; border: 1px solid var(--bordo); border-radius: 10px; background: var(--sfondo); color: var(--testo-debole); }
.anteprima-documento-non-disponibile .scarica-allegato { margin-top: 8px; }
.modulo-alfadocs { padding: 20px; }
.modulo-alfadocs-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.modulo-alfadocs-testa h3 { margin: 0 0 4px; font-size: 18px; }
.modulo-alfadocs-testa p { margin: 0; color: var(--testo-debole); font-size: 12px; overflow-wrap: anywhere; }
.chiudi-modulo-alfadocs { border: none; background: transparent; color: var(--testo-debole); font-size: 24px; line-height: 1; cursor: pointer; }
.modulo-alfadocs label { display: block; margin-top: 13px; color: var(--testo-debole); font-size: 12px; font-weight: 600; }
.modulo-alfadocs input, .modulo-alfadocs select, .modulo-alfadocs textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--bordo-forte);
  border-radius: 8px; background: white; color: var(--testo); font: inherit; font-size: 14px;
}
.modulo-alfadocs textarea { resize: vertical; line-height: 1.4; }
.errore-modulo-alfadocs { min-height: 18px; margin-top: 10px; color: var(--pericolo); font-size: 12px; }
.azioni-modulo-alfadocs { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.azioni-modulo-alfadocs button { padding: 8px 14px; border: 1px solid var(--bordo); border-radius: 8px; background: white; cursor: pointer; font: inherit; }
.azioni-modulo-alfadocs button.primario { background: var(--accento); border-color: var(--accento); color: white; font-weight: 600; }
.azioni-modulo-alfadocs button:disabled { opacity: .55; cursor: default; }
.intestazione-chat .nome { font-weight: 600; font-size: 15px; }
.intestazione-chat .numero { font-size: 12px; color: var(--testo-debole); }
.intestazione-chat select { font-size: 13px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--bordo); background: white; }

.thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: var(--sfondo); }

.bolla { max-width: 60%; padding: 8px 10px; border-radius: 8px; font-size: 14px; line-height: 1.35; position: relative; }
.bolla.in { align-self: flex-start; background: var(--bolla-in); border: 1px solid var(--bordo); }
.bolla.out { align-self: flex-end; background: var(--bolla-out); border: 1px solid var(--accento-bordo); }
.bolla .ora { display: block; font-size: 10px; color: var(--testo-debole); margin-top: 4px; text-align: right; }

.barra-invio { display: flex; align-items: center; padding: 10px; background: var(--pannello); border-top: 1px solid var(--bordo); gap: 6px; }
.barra-invio input[name="testo"] { flex: 1; min-width: 0; padding: 10px; border-radius: 20px; border: 1px solid var(--bordo); font-size: 14px; }
.barra-invio button[type="submit"] { flex-shrink: 0; background: var(--accento); border: none; border-radius: 50%; width: 40px; height: 40px; color: white; cursor: pointer; font-size: 16px; }
.barra-invio .azione-compositore {
  flex-shrink: 0; width: 36px; height: 36px; padding: 7px; border: none; border-radius: 50%; background: transparent;
  color: var(--testo-debole); cursor: pointer;
}
.barra-invio .azione-compositore:hover { background: var(--neutro-tenue); color: var(--accento); }
.barra-invio .azione-compositore svg, .menu-allegati svg {
  display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.allegati-compositore { position: relative; flex-shrink: 0; }
.menu-allegati {
  position: absolute; left: 0; bottom: calc(100% + 9px); z-index: 8; width: 290px; padding: 6px;
  border: 1px solid var(--bordo); border-radius: 12px; background: var(--pannello); box-shadow: var(--ombra-menu);
}
.menu-allegati button {
  width: 100%; height: auto; display: flex; align-items: center; gap: 11px; padding: 10px; border: none; border-radius: 8px;
  background: transparent; color: var(--testo); font: inherit; text-align: left; cursor: pointer;
}
.menu-allegati button:hover:not(:disabled) { background: var(--sfondo); }
.menu-allegati button:disabled { opacity: .5; cursor: default; }
.menu-allegati svg { width: 21px; height: 21px; flex-shrink: 0; color: var(--testo-debole); }
.menu-allegati span { min-width: 0; display: flex; flex-direction: column; }
.menu-allegati b { font-size: 13px; }
.menu-allegati small { margin-top: 2px; color: var(--testo-debole); font-size: 11px; }

.banner-finestra-chiusa { background: var(--avviso-tenue); border-top: 1px solid var(--avviso-bordo); padding: 10px 16px; }
.banner-finestra-chiusa p { margin: 0 0 8px; font-size: 13px; color: var(--avviso-testo); }
.banner-finestra-chiusa button {
  background: var(--accento-scuro); color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
}

.vuoto-lista { text-align: center; color: var(--testo-debole); padding: 24px 0; font-size: 13px; }

/* ---------- Comuni: elementi nascosti e esito di un'azione ---------- */
[hidden] { display: none !important; }
.esito { font-size: 12px; }
.esito.ok { color: var(--accento); }
.esito.errore { color: var(--pericolo); }

.nota-sistema {
  align-self: center; max-width: 80%; text-align: center; background: var(--avviso-tenue); border: 1px solid var(--avviso-bordo);
  color: var(--avviso-testo); border-radius: 8px; padding: 6px 12px; font-size: 12px;
}
.nota-sistema .ora { color: var(--testo-debole); margin-left: 6px; }

/* ---------- Stato dei messaggi su Meta (chip) e anteprima del testo ---------- */
.badge-stato { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.badge-stato.ok { background: var(--ok-tenue); color: var(--ok-testo); }
.badge-stato.attesa { background: var(--avviso-tenue); color: var(--avviso-testo); }
.badge-stato.errore { background: var(--pericolo-tenue); color: var(--pericolo-testo); }
.anteprima-template { font-size: 13px; white-space: pre-wrap; color: var(--testo); }
.anteprima-template mark { background: var(--evidenzia); padding: 0 2px; border-radius: 3px; }

/* ---------- Template dalla chat ---------- */
.banner-finestra-chiusa button.secondario { background: white; color: var(--accento-scuro); border: 1px solid var(--accento-scuro); margin-left: 6px; }
.pannello-template { background: var(--pannello); border-top: 1px solid var(--bordo); max-height: 55vh; overflow-y: auto; padding: 10px 12px; }
.testa-pannello-template { display: flex; gap: 8px; margin-bottom: 8px; }
.testa-pannello-template input { flex: 1; padding: 8px 12px; border: 1px solid var(--bordo); border-radius: 18px; font-size: 13px; }
.testa-pannello-template button { border: 1px solid var(--bordo); background: white; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; color: var(--testo-debole); }
.voce-template { border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; cursor: pointer; background: white; }
.voce-template:hover { border-color: var(--accento); }
.pannello-template .nome-template { font-weight: 600; font-size: 13px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.tag-marketing { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9px; background: var(--avviso-tenue); color: var(--avviso-testo); }
.testo-template { font-size: 14px; line-height: 1.9; white-space: pre-wrap; background: var(--bolla-out); border-radius: 8px; padding: 10px 12px; }
.campo-variabile { border: none; border-bottom: 2px solid var(--accento-scuro); background: rgba(255,255,255,.75); font: inherit; padding: 0 4px; border-radius: 3px; }
.azioni-template { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.azioni-template button { border: 1px solid var(--bordo); background: white; border-radius: 8px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.azioni-template button.primario { background: var(--accento); border-color: var(--accento); color: white; font-weight: 600; }
.azioni-template button:disabled { opacity: .5; cursor: default; }

/* ---------- Bottoni dei template (anteprima) ---------- */
.anteprima-bottone { margin-top: 6px; text-align: center; background: white; color: #00a5f4; border-radius: 6px; padding: 6px; font-size: 13px; font-weight: 600; }
.bottoni-template { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bottoni-template .anteprima-bottone { margin-top: 0; padding: 4px 12px; }

/* ---------- Varie: avviso, azioni del banner, pannello template ---------- */
.azioni-banner { display: flex; flex-wrap: wrap; gap: 6px; }
.avviso { color: var(--avviso-testo); }
.pannello-template .aiuto { font-size: 12px; color: var(--testo-debole); margin-top: 6px; }

/* ---------- Sezione Impostazioni: fila di sottopagine in cima, contenuto sotto ---------- */
.pagina-recensioni-impostazioni { max-width: 560px; padding: 24px 28px 60px; overflow-y: auto; height: 100%; }
.pagina-recensioni-impostazioni label.campo { display: block; font-size: 12px; font-weight: 600; color: var(--testo-debole); margin-top: 18px; }
.pagina-recensioni-impostazioni input:not([type=color]) {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bordo-forte); border-radius: 8px; font-size: 14px; background: white; margin-top: 4px;
}
.riga-colore { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.riga-colore input[type=color] { width: 40px; height: 38px; padding: 2px; border: 1px solid var(--bordo-forte); border-radius: 8px; flex-shrink: 0; cursor: pointer; }
.riga-colore input:not([type=color]) { margin-top: 0; }
.riga-sede-recensioni { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.etichetta-sede { font-size: 13px; font-weight: 700; }

.pagina-orari-impostazioni { max-width: 560px; padding: 24px 28px 60px; overflow-y: auto; height: 100%; }
.blocco-sede-orari { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.intestazione-sede-orari { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.riga-giorno-orario { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.riga-giorno-orario .etichetta-giorno { width: 90px; flex-shrink: 0; font-size: 13px; color: var(--testo-debole); }
.fasce-giorno { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fasce-giorno input[type=time] { padding: 6px 8px; border: 1px solid var(--bordo-forte); border-radius: 8px; font-size: 13px; background: white; }
.fasce-giorno span { color: var(--testo-tenue); }

.pagina-recensioni { display: flex; flex-direction: column; height: 100%; }
.aiuto-pagina { font-size: 13px; color: var(--testo-debole); padding: 12px 24px 0; }
.elenco-feedback { padding: 16px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.riga-feedback { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--pannello); }
.info-feedback { flex: 1; min-width: 0; }
.feedback-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feedback-testa b { font-size: 14px; }
.feedback-stelle { color: #f5a623; letter-spacing: 1px; font-size: 13px; }
.feedback-dettaglio { font-size: 12px; color: var(--testo-debole); margin-top: 2px; }
.feedback-testo { font-size: 13px; margin-top: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.riga-feedback > button.link { flex-shrink: 0; white-space: nowrap; margin-top: 2px; }

/* ---------- Sondaggi interni ---------- */
.pagina-sondaggi { height: 100%; min-width: 0; display: flex; flex-direction: column; }
.sondaggi-barra {
  min-height: 58px; padding: 9px 18px; background: var(--pannello); border-bottom: 1px solid var(--bordo);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.sondaggi-barra > div:first-child { display: flex; flex-direction: column; gap: 1px; }
.sondaggi-barra > div:first-child b { font-size: 15px; }
.sondaggi-barra > div:first-child span { font-size: 12px; color: var(--testo-debole); }
.sondaggi-tab { display: flex; padding: 3px; border-radius: 9px; background: var(--neutro-tenue); }
.sondaggi-tab button { border: 0; border-radius: 7px; background: transparent; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--testo-debole); cursor: pointer; }
.sondaggi-tab button.attivo { background: white; color: var(--testo); box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.sondaggi-tab em { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--accento); color: white; font-size: 10px; font-style: normal; }
.sondaggi-layout { min-height: 0; flex: 1; display: flex; }
.sondaggi-elenco { width: 285px; flex-shrink: 0; background: var(--pannello); border-right: 1px solid var(--bordo); display: flex; flex-direction: column; }
button.primario.compatto { padding: 7px 12px; font-size: 12px; }
.sondaggi-voci { overflow-y: auto; padding: 8px; }
.sondaggio-voce { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 9px; padding: 10px; display: flex; align-items: center; gap: 8px; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.sondaggio-voce:hover { background: var(--sfondo); }
.sondaggio-voce.attiva { background: var(--accento-tenue); border-color: var(--accento-bordo); }
.sondaggio-voce > span { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sondaggio-voce b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sondaggio-voce small { margin-top: 2px; color: var(--testo-debole); font-size: 11px; }
.sondaggio-voce i { min-width: 24px; height: 24px; border-radius: 12px; background: white; border: 1px solid var(--bordo); display: grid; place-items: center; font-size: 11px; font-style: normal; color: var(--testo-debole); }
.sondaggio-dettaglio { min-width: 0; flex: 1; overflow-y: auto; }
.sondaggio-nessuna-selezione { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--testo-debole); gap: 5px; }
.sondaggio-editor { width: min(760px, 100%); padding: 26px 30px 70px; }
.sondaggio-editor-testa h2, .omaggi-intro h2 { margin: 0; font-size: 20px; }
.sondaggio-editor-testa p, .omaggi-intro p { margin: 5px 0 0; color: var(--testo-debole); font-size: 13px; line-height: 1.45; }
.sondaggio-editor label.campo { display: block; margin-top: 18px; font-size: 12px; font-weight: 650; color: var(--testo-debole); }
.sondaggio-editor label.campo input, .sondaggio-editor label.campo textarea,
.sondaggio-domanda > input, .sondaggio-domanda > textarea, .sondaggio-domanda select {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--bordo-forte); border-radius: 8px; background: white; font: inherit; font-size: 13px; color: var(--testo);
}
.sondaggio-editor .riga-interruttore { margin-top: 18px; }
.sondaggio-domande-titolo { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid var(--bordo); }
.sondaggio-domande { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sondaggio-domanda { padding: 14px; border: 1px solid var(--bordo); border-radius: 11px; background: var(--pannello); }
.sondaggio-domanda-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.sondaggio-domanda-opzioni { display: flex; align-items: center; gap: 16px; margin-top: 9px; }
.sondaggio-domanda-opzioni select { width: auto; min-width: 190px; margin: 0; }
.sondaggio-domanda-opzioni label { display: flex; align-items: center; gap: 5px; color: var(--testo-debole); font-size: 12px; }
.sondaggio-azioni { display: flex; align-items: center; gap: 16px; }
.sondaggio-risposte-titolo { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--bordo); }
.sondaggio-risposte-titolo h3 { margin: 0; font-size: 16px; }
.sondaggio-risposte-titolo span { display: block; margin-top: 3px; font-size: 12px; color: var(--testo-debole); }
.sondaggio-risposte { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sondaggio-risposta { border: 1px solid var(--bordo); border-radius: 10px; background: var(--pannello); overflow: hidden; }
.sondaggio-risposta summary { list-style: none; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.sondaggio-risposta summary::-webkit-details-marker { display: none; }
.sondaggio-risposta summary > span { min-width: 0; display: flex; flex-direction: column; }
.sondaggio-risposta summary small, .sondaggio-risposta summary time { color: var(--testo-debole); font-size: 11px; }
.sondaggio-risposta-corpo { padding: 12px 14px 14px; border-top: 1px solid var(--bordo); }
.risposta-campo { margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.risposta-campo span { color: var(--testo-debole); font-size: 11px; }
.risposta-campo b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.omaggi-pagina { overflow-y: auto; padding: 26px 30px 70px; }
.omaggi-intro { max-width: 680px; }
.omaggi-elenco { display: flex; flex-direction: column; gap: 9px; max-width: 900px; margin-top: 20px; }
.omaggio-riga { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; border: 1px solid var(--bordo); border-radius: 11px; background: var(--pannello); }
.omaggio-riga.da_consegnare { border-color: #9ad4ad; box-shadow: inset 3px 0 #22a657; }
.omaggio-riga.consegnato, .omaggio-riga.non_assegnato { opacity: .58; }
.omaggio-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.omaggio-info > div { display: flex; align-items: center; gap: 8px; }
.omaggio-info strong { font-size: 13px; }
.omaggio-info small { color: var(--testo-debole); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omaggio-stato { padding: 2px 7px; border-radius: 999px; background: var(--neutro-tenue); color: var(--testo-debole); font-size: 10px; font-weight: 650; }
.da_consegnare .omaggio-stato { background: var(--ok-tenue); color: var(--ok-testo); }
.omaggio-azioni { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) {
  .sondaggi-elenco { width: 220px; }
  .sondaggio-editor, .omaggi-pagina { padding-left: 18px; padding-right: 18px; }
  .omaggio-riga { align-items: flex-start; flex-direction: column; }
}

/* .imp-nav e' il livello "sezione" (Impostazioni): sfondo pagina (--sfondo), non un pannello, cosi' non si confonde con
   l'elenco della sotto-pagina (.messaggi-elenco, sotto) che invece e' contenuto vero e resta un pannello bianco. Il
   titolo e' un'etichetta piccola (non un titolo di pagina): il titolo vero e' quello della sotto-pagina aperta. */
.pagina-impostazioni { display: flex; flex-direction: row; min-width: 0; }
.imp-nav {
  width: 180px; flex-shrink: 0; padding: 20px 12px; background: var(--sfondo); border-right: 1px solid var(--bordo);
  overflow-y: auto;
}
.imp-nav-titolo { padding: 0 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-debole); }
.imp-nav-voci { display: flex; flex-direction: column; gap: 3px; }
.imp-voce {
  width: 100%; padding: 9px 11px; border: none; border-left: 3px solid transparent; border-radius: 0 8px 8px 0;
  background: transparent; color: var(--testo-debole); font: inherit; font-size: 13.5px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.imp-voce:hover:not(.attiva) { background: var(--pannello); color: var(--testo); }
.imp-voce.attiva { background: var(--accento-tenue); border-left-color: var(--accento); color: var(--accento-scuro); }
.imp-contenuto { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
@media (max-width: 1100px) { .imp-nav { width: 150px; } }

/* ---------- Sottopagina Utenti (dentro le Impostazioni) ---------- */
.pagina-utenti-impostazioni { max-width: 560px; padding: 24px 28px 60px; overflow-y: auto; height: 100%; }
.pagina-utenti-impostazioni label.campo { display: block; font-size: 12px; font-weight: 600; color: var(--testo-debole); margin-top: 18px; }
.pagina-utenti-impostazioni label.campo-riga { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.pagina-utenti-impostazioni input:not([type=checkbox]), .pagina-utenti-impostazioni select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bordo-forte); border-radius: 8px; font-size: 14px; background: white; margin-top: 4px;
}
.pagina-utenti-impostazioni .azioni-fondo { display: flex; gap: 8px; flex-wrap: wrap; }
.pagina-utenti-impostazioni button.secondario {
  border: 1px solid var(--bordo-forte); background: white; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 13px;
}
.elenco-utenti { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.riga-utente {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--pannello);
}
.riga-utente.disattivato { opacity: .55; }
.riga-utente-nome { font-weight: 600; font-size: 14px; }
.riga-utente-dettagli { font-size: 12px; color: var(--testo-debole); margin-top: 2px; }
.azioni-riga-utente { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.scheda-utente-titolo { font-size: 17px; font-weight: 700; margin-bottom: 4px; }

/* ---------- Sottopagina Etichette (dentro le Impostazioni) ---------- */
.pagina-etichette-impostazioni { max-width: 560px; padding: 24px 28px 60px; overflow-y: auto; height: 100%; }
.pagina-etichette-impostazioni label.campo { display: block; font-size: 12px; font-weight: 600; color: var(--testo-debole); margin-top: 18px; }
.pagina-etichette-impostazioni input:not([type=color]) {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bordo-forte); border-radius: 8px; font-size: 14px; background: white; margin-top: 4px;
}
.elenco-etichette { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.riga-etichetta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--pannello);
}
.azioni-riga-etichetta { display: flex; gap: 10px; flex-shrink: 0; }
.azioni-riga-etichetta .elimina { color: var(--pericolo); }

/* Il tag di un'etichetta libera (issue #29): colore scelto dall'utente e salvato in DB, non da una palette fissa
   come i tag sede (etichette.js: tagEtichetta). */
.tag-etichetta {
  flex-shrink: 0; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap;
}

/* ---------- Etichette assegnate a una chat (intestazione del thread) ---------- */
.etichette-thread { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 8px; position: relative; }
.etichette-assegnate { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tag-etichetta-rimuovi { border: none; cursor: pointer; font: inherit; transition: filter .12s; }
.tag-etichetta-rimuovi:hover { filter: saturate(1.2) brightness(.94); }
.tag-etichetta-x { margin-left: 4px; font-size: 14px; line-height: 10px; opacity: .7; }
.menu-etichette { position: relative; }
.bottone-etichette {
  height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border-radius: 999px;
  border: 1px dashed var(--bordo-forte); background: none; color: var(--testo-debole); cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; flex-shrink: 0;
}
.bottone-etichette svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottone-etichette:hover { border-color: var(--accento); color: var(--accento); }
.tendina-etichette {
  position: absolute; top: 32px; right: 0; z-index: 20; width: 260px; max-height: 340px; overflow-y: auto;
  background: white; border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra-menu); padding: 7px;
}
.tendina-etichette-testa { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 9px; border-bottom: 1px solid var(--bordo); margin-bottom: 4px; }
.tendina-etichette-testa b { font-size: 13px; }
.tendina-etichette-testa small { color: var(--testo-debole); font-size: 11px; }
.voce-etichetta-menu {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: none; border-radius: 7px;
  background: transparent; color: var(--testo); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.voce-etichetta-menu > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.voce-etichetta-menu:hover { background: var(--sfondo); }
.voce-etichetta-menu.attiva { background: var(--accento-tenue); }
.spunta-etichetta { color: var(--accento); font-weight: 800; }

/* ---------- Sottopagina Template (dentro le Impostazioni): elenco pieno a tabella + finestra flottante per editor/anteprima ---------- */
.messaggi { height: 100%; overflow-y: auto; }
.messaggi-elenco-pieno { max-width: 900px; margin: 0 auto; padding: 24px 28px 60px; }
.messaggi-elenco-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.messaggi-elenco-testa h2 { margin: 0; font-size: 20px; }
.tabella-messaggi { width: 100%; border-collapse: collapse; background: var(--pannello); border: 1px solid var(--bordo); border-radius: 12px; overflow: hidden; }
.tabella-messaggi th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--testo-debole); padding: 10px 16px;
  border-bottom: 1px solid var(--bordo); background: var(--sfondo);
}
.tabella-messaggi td { padding: 12px 16px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella-messaggi tbody tr:last-child td { border-bottom: none; }
.riga-messaggio { cursor: pointer; }
.riga-messaggio:hover td { background: var(--sfondo); }
.riga-messaggio.attiva td { background: var(--accento-tenue); }
.tabella-messaggi td.cella-menu { width: 1%; white-space: nowrap; text-align: right; }
.tabella-messaggi td.cella-menu .menu-puntini { display: inline-block; }
.nome-messaggio { font-weight: 600; font-size: 14px; margin-right: 8px; }
.riga-chip { display: flex; gap: 4px; flex-wrap: wrap; }
.badge-stato.neutro { background: var(--neutro-tenue); color: var(--testo-debole); }

.messaggi-finestra-sfondo { position: fixed; inset: 0; background: rgba(15, 23, 42, .38); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; }
.messaggi-finestra {
  width: min(960px, 100%); max-height: calc(100vh - 32px); background: white; border-radius: 14px; box-shadow: var(--ombra-menu);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
}
.chiudi-finestra-messaggio { position: absolute; top: 8px; right: 10px; border: none; background: transparent; color: var(--testo-debole); font-size: 24px; line-height: 1; cursor: pointer; z-index: 1; }
.messaggi-finestra-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 0; }
.messaggi-finestra .messaggi-editor { padding-right: 44px; }

button.primario {
  background: var(--accento); color: white; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer; font-size: 13px;
}
button.primario:hover { background: var(--accento-scuro); }
button.primario:disabled { opacity: .5; cursor: default; }
.messaggi-nuovo button.primario { width: 100%; }
button.link { background: none; border: none; color: var(--accento-scuro); cursor: pointer; padding: 0; font-size: 12px; text-decoration: underline; font-family: inherit; }
button.link.elimina { color: var(--pericolo); }

.messaggi-editor { overflow-y: auto; padding: 22px 28px 40px; min-height: 0; }
.testa-messaggio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.testa-messaggio h2 { margin: 0; font-size: 20px; }
.aiuto { font-size: 12px; color: var(--testo-debole); margin: 6px 0; line-height: 1.45; }
.etichetta-campo { font-size: 12px; font-weight: 600; color: var(--testo-debole); margin: 22px 0 6px; display: flex; justify-content: space-between; }
.contatore { font-weight: 400; }
.contatore.errore { color: var(--pericolo); }
.messaggi-editor label.campo { display: block; font-size: 12px; font-weight: 600; color: var(--testo-debole); margin-top: 18px; }
.messaggi-editor input:not([type=checkbox]) {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bordo-forte); border-radius: 8px; font-size: 14px; background: white; margin-top: 4px;
}
.messaggi-editor select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bordo-forte); border-radius: 8px; font-size: 14px; background: white; margin-top: 4px;
}
.banner-esito { margin: 12px 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.banner-esito.ok { background: var(--ok-tenue); color: var(--ok-testo); }
.banner-esito.errore { background: var(--pericolo-tenue); color: var(--pericolo-testo); }
.banner-esito.avviso { background: var(--avviso-tenue); color: var(--avviso-testo); }

.campo-testo {
  min-height: 130px; padding: 12px 14px; border: 1px solid var(--bordo-forte); border-radius: 10px; background: white;
  font-size: 15px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere;
}
.campo-testo:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-tenue); }
.campo-testo:empty:before { content: attr(data-segnaposto); color: var(--testo-debole); }
.campo-testo.compatto { min-height: unset; padding: 9px 11px; line-height: 1.4; }
.chip-dato { display: inline-block; background: var(--bolla-out); color: var(--accento-scuro); border-radius: 6px; padding: 0 8px; margin: 0 1px; font-size: 13px; font-weight: 600; line-height: 1.7; user-select: all; }

.gruppo-dati { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.titolo-gruppo { flex: 0 0 110px; font-size: 12px; color: var(--testo-debole); }
.chips-dati { display: flex; flex-wrap: wrap; gap: 6px; }
.campo-riga .chips-dati { margin-bottom: 6px; }
.chip-inserisci { border: 1px solid var(--accento); color: var(--accento-scuro); background: white; border-radius: 14px; padding: 3px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.chip-inserisci:hover { background: var(--accento-tenue); }
.chip-inserisci.tratteggiato { border-style: dashed; }
.form-manuale { display: flex; gap: 8px; margin: 6px 0 4px; }
.form-manuale input { margin-top: 0 !important; }

.riga-campo-doppia { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.riga-campo-doppia input { margin-top: 0 !important; flex: 1; }
#msg-bottoni button.link { display: block; margin: 6px 0; }

.scelte { display: flex; gap: 10px; }
.scelta { flex: 1; text-align: left; border: 1px solid var(--bordo-forte); background: white; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit; color: inherit; }
.scelta b { display: block; font-size: 14px; margin-bottom: 2px; }
.scelta span { font-size: 12px; color: var(--testo-debole); line-height: 1.4; display: block; }
.scelta.attiva { border-color: var(--accento); background: var(--accento-tenue); box-shadow: 0 0 0 1px var(--accento); }
.scelta:disabled { cursor: default; opacity: .7; }

.riga-interruttore { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.riga-interruttore.spento { opacity: .55; cursor: default; }
input.interruttore { appearance: none; -webkit-appearance: none; width: 36px !important; height: 20px; border-radius: 10px; background: var(--interruttore-spento); position: relative; cursor: inherit; margin: 0 !important; padding: 0 !important; border: none !important; flex-shrink: 0; transition: background .15s; }
input.interruttore:after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: left .15s; }
input.interruttore:checked { background: var(--accento); }
input.interruttore:checked:after { left: 18px; }
.azioni-fondo { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--bordo); }

.messaggi-anteprima { background: var(--sfondo); border-left: 1px solid var(--bordo); padding: 22px 20px; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.messaggi-anteprima .etichetta-campo { margin-top: 0; }
.fumetto { background: var(--bolla-out); border: 1px solid var(--accento-bordo); border-radius: 12px; padding: 10px 12px; }
.intestazione-fumetto { font-size: 14px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; overflow-wrap: anywhere; }
.testo-fumetto { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.testo-fumetto mark, .intestazione-fumetto mark { background: rgba(37, 99, 235, .14); color: inherit; border-radius: 4px; padding: 0 2px; }
.bottone-fumetto { margin-top: 6px; background: white; border: 1px solid var(--bordo); border-radius: 10px; text-align: center; padding: 7px; color: var(--accento-scuro); font-weight: 600; font-size: 13px; }
.azioni-anteprima { margin-top: auto; padding-top: 20px; }
.azioni-anteprima button { width: 100%; padding: 10px; }
.azioni-anteprima .esito { margin-top: 8px; font-size: 12px; }
@media (max-width: 720px) { .messaggi-finestra-corpo { grid-template-columns: minmax(0, 1fr); } .messaggi-anteprima { border-left: none; border-top: 1px solid var(--bordo); } }

/* ---------- Sezione Automazioni: elenco pieno a tabella (come i Messaggi) oppure, aperta un'automazione, l'editor a schermo
   intero - mai piu' fianco a fianco (issue #23): un'automazione si apre sempre a tutta pagina, "Automazioni" in alto la richiude.
   Dentro, si vede SOLO il canvas: intestazione, esito del salvataggio e barra strumenti sono card flottanti sopra di lui
   (position:absolute), non righe che lo spingono in basso - vedi .canvas-contenitore/.canvas-finestra piu' sotto. ---------- */
.auto-editor { height: 100%; overflow: hidden; padding: 0; min-height: 0; }

/* Intestazione flottante: torna all'elenco, nome, interruttore, menu "...", salva - card sopra l'angolo in alto a sinistra del
   canvas (stesso stile della barra strumenti in basso, .canvas-strumenti). */
.auto-intestazione {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 12px;
  background: white; border: 1px solid var(--bordo); border-radius: 14px; padding: 8px 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.torna-elenco {
  flex-shrink: 0; border: none; background: transparent; color: var(--testo-debole); cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; padding: 6px 4px 6px 0;
}
.torna-elenco:hover { color: var(--accento-scuro); }
.auto-intestazione #auto-nome { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--bordo-forte); border-radius: 8px; font-size: 17px; font-weight: 600; background: white; }
.auto-intestazione-azioni { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.chip-interruttore { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--testo-debole); cursor: pointer; }
.chip-interruttore.attivo { color: var(--ok-testo); }

/* L'esito del salvataggio: appena sotto l'intestazione flottante, stessa larghezza contenuta di un banner normale. */
.auto-esito-flottante { position: absolute; top: 76px; left: 14px; right: 14px; z-index: 2; max-width: 420px; }

/* Il menu "..." dell'intestazione: Duplicare / Elimina e, sotto un separatore, la Prova (issue: spostata qui perche' il canvas e'
   ora a schermo pieno e non c'e' piu' una sezione fissa sotto di lui per ospitarla) - ancorato sotto l'icona che lo apre. */
.menu-puntini { position: relative; }
.menu-puntini-lista {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 3; width: 280px; padding: 6px;
  background: white; border: 1px solid var(--bordo); border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  display: flex; flex-direction: column; gap: 2px;
}
.voce-menu {
  text-align: left; border: none; background: transparent; padding: 8px 10px; border-radius: 6px;
  font: inherit; font-size: 13px; color: var(--testo); cursor: pointer;
}
.voce-menu:hover { background: var(--sfondo); }
.menu-puntini-separatore { height: 1px; margin: 6px 4px; background: var(--bordo); }
.menu-prova { padding: 2px 8px 6px; }
.menu-prova .riga-campo-doppia input { padding: 9px 11px; border: 1px solid var(--bordo-forte); border-radius: 8px; font-size: 14px; background: white; }
.menu-prova .banner-esito { margin: 8px 0 0; }
.voce-menu-pericolo { color: var(--pericolo); }

/* La ricerca di un blocco da creare e collegare (issue #55, htmlRicercaCollegamento): il campo di ricerca e l'elenco dei tipi
   raggruppati per categoria (Alfadocs, WhatsApp...) con l'icona di ognuno - stesso stile di base del menu "..." (.menu-puntini-
   lista), ma piu' largo per ospitare icona + etichetta sulla stessa riga. */
.menu-aggiungi-contenitore { position: relative; }
.menu-aggiungi-contenitore > input {
  width: 100%; padding: 10px 12px 10px 38px; border: 1px solid var(--bordo-forte); border-radius: 10px;
  background: white; font: inherit; font-size: 14px;
}
.barra-aggiungi-icona { position: absolute; left: 12px; top: 11px; width: 17px; height: 17px; color: var(--testo-tenue); z-index: 1; }
.barra-aggiungi-icona svg { width: 100%; height: 100%; }
.menu-aggiungi-categoria { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--testo-tenue); }
.voce-menu-aggiungi {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: transparent;
  padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--testo); cursor: pointer;
}
.voce-menu-aggiungi:hover { background: var(--sfondo); }
/* .voce-menu-aggiungi-testo come riga flex (non piu' due <span> inline nello stesso blocco di testo): un'etichetta lunga che va a
   capo resta cosi' allineata dopo l'etichetta "Se"/"Allora" su ogni riga, invece di tornare al margine sinistro dalla seconda riga
   in poi (comportamento normale del testo inline, che ignora dove finisce un elemento sulla riga precedente). */
.voce-menu-aggiungi-testo { display: flex; align-items: baseline; gap: 7px; }
.voce-menu-aggiungi-tipo { flex-shrink: 0; min-width: 40px; color: var(--accento); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.voce-menu-aggiungi-icona { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--accento); }
.voce-menu-aggiungi-icona svg { width: 100%; height: 100%; }
.menu-aggiungi-vuoto { padding: 16px 10px; color: var(--testo-tenue); font-size: 13px; text-align: center; }

.icona-strumento {
  flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; background: transparent; color: var(--testo-debole); cursor: pointer;
}
.icona-strumento:hover { background: var(--sfondo); color: var(--accento-scuro); }
.icona-strumento:disabled { opacity: .35; cursor: default; background: transparent; color: var(--testo-tenue); }
.icona-strumento.attivo { background: var(--accento-tenue); color: var(--accento-scuro); }
.icona-strumento svg { width: 16px; height: 16px; }

/* Il contenitore del canvas: riempie tutto .auto-editor (relative anche per far galleggiare intestazione/esito/barra strumenti
   sopra la finestra, senza che scorrano col pan). */
.canvas-contenitore { position: relative; height: 100%; }

/* La barra strumenti flottante: centrata in basso sopra il canvas, card bianca con bordo (come il riferimento mostrato dall'utente). */
.canvas-strumenti {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 2px; padding: 5px; background: white;
  border: 1px solid var(--bordo); border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.canvas-strumenti-separatore { width: 1px; height: 20px; margin: 0 3px; background: var(--bordo); }
.canvas-zoom-valore { min-width: 42px; text-align: center; font-size: 11px; font-weight: 600; color: var(--testo-debole); }
.canvas-ricerca-contenitore { position: relative; }
.canvas-ricerca-panel {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: 300px; padding: 8px; z-index: 4;
  background: white; border: 1px solid var(--bordo); border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.canvas-ricerca-panel > input { width: 100%; padding: 8px 9px; border: 1px solid var(--bordo-forte); border-radius: 8px; font: inherit; font-size: 13px; }
.canvas-ricerca-risultati { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.voce-ricerca-nodo { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--testo); text-align: left; cursor: pointer; }
.voce-ricerca-nodo:hover { background: var(--sfondo); }
.voce-ricerca-nodo > span:first-child { width: 20px; height: 20px; color: var(--accento); flex-shrink: 0; }
.voce-ricerca-nodo svg { width: 100%; height: 100%; }
.voce-ricerca-nodo small { display: block; color: var(--testo-tenue); font-size: 10px; text-transform: uppercase; font-weight: 700; }

/* La ricerca di un blocco da creare e collegare (issue #55), aperta trascinando un ramo/bottone su uno spazio vuoto - oggi l'unico
   modo per aggiungere un'azione: stesso sfondo/finestra centrata dell'editor dei messaggi (.messaggi-finestra-sfondo/
   .messaggi-finestra), stesso campo di ricerca e stessa lista a voci (.menu-aggiungi-contenitore/.voce-menu-aggiungi) di prima. */
.collegamento-sfondo { position: fixed; inset: 0; background: rgba(15, 23, 42, .38); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.collegamento-finestra {
  width: min(420px, 100%); background: white; border-radius: 14px; box-shadow: var(--ombra-menu); padding: 14px;
}
.collegamento-lista { max-height: min(60vh, 420px); overflow-y: auto; margin-top: 8px; }

/* La finestra sul canvas: sfondo a puntini, si scorre trascinandola. #canvas-tela e' piu' grande della finestra e si sposta con un
   transform; le frecce (SVG) e i nodi vivono entrambi dentro, nello stesso spazio di coordinate. */
.canvas-finestra {
  position: relative; overflow: hidden; height: 100%; cursor: grab;
  border: 1px solid var(--bordo); border-radius: 14px; background-color: var(--sfondo);
  background-image: radial-gradient(var(--bordo-forte) 1.3px, transparent 1.3px); background-size: 20px 20px;
}
.canvas-finestra.si-scorre { cursor: grabbing; }
.canvas-tela { position: relative; }
/* overflow:visible: l'SVG ha width/height fissi (canvas.js) solo per definire l'origine delle coordinate, non per limitare dove le
   frecce possono disegnarsi - un nodo trascinato oltre quel bordo non deve tagliare la freccia che lo raggiunge (la finestra intorno
   la ritaglia comunque con il proprio overflow:hidden). */
.canvas-frecce { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
/* fill:none qui (non solo inline sulle frecce fisse, vedi canvas.js frecciaSvg): la freccia temporanea disegnata trascinando un
   collegamento (abilitaConnessione) e' un <path> creato via JS senza l'attributo fill, e un path SVG aperto senza fill:none si
   riempie di nero chiudendo da solo tra inizio e fine della curva (bug: https://github.com/narf12-00/whatsapp-alident/issues/5). */
.canvas-freccia-linea { stroke: var(--testo-tenue); stroke-width: 1.8; fill: none; }

/* Un nodo: posizionato liberamente sul canvas, icona + nome del tipo in testa, sotto SEMPRE tutti i suoi campi (niente piu' un
   pannello a parte da aprire con un clic: il contenuto si vede sempre). Tutta l'intestazione si trascina o si clicca (per
   selezionarlo/evidenziarlo): niente piu' una tendina a occuparne quasi tutto lo spazio, cosi' il clic ha una zona larga da
   centrare invece di uno stretto margine. */
.nodo {
  position: absolute; width: 300px; background: var(--pannello); border: 1px solid var(--bordo); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 17, 22, .1);
}
.nodo.si-trascina { box-shadow: 0 4px 14px rgba(15, 17, 22, .18); z-index: 2; }
.nodo-testa { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--bordo); cursor: grab; touch-action: none; }
.nodo.si-trascina .nodo-testa { cursor: grabbing; }
.nodo.selezionato { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-tenue); z-index: 2; }
.nodo-icona {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; background: var(--accento-tenue); color: var(--accento-scuro);
  display: flex; align-items: center; justify-content: center;
}
.nodo-icona svg { width: 15px; height: 15px; }
.nodo-titolo { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nodo-togli { border: none; background: transparent; color: var(--testo-tenue); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 6px; flex-shrink: 0; }
.nodo-togli:hover { background: var(--pericolo-tenue); color: var(--pericolo); }
.nodo-corpo { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 12px; }

/* Bottone di chiusura generico (oggi: solo la nota libera). */
.chiudi-pannello { border: none; background: transparent; font-size: 20px; line-height: 1; color: var(--testo-debole); cursor: pointer; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; }
.chiudi-pannello:hover { background: var(--sfondo); color: var(--testo); }

/* La nota libera (post-it): scritta dalla segretaria, non dal sistema. Si trascina dalla testa, si scrive nel resto. */
.canvas-nota {
  position: absolute; width: 220px; background: var(--nota-sfondo); border: 1px solid var(--nota-bordo); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 17, 22, .1);
}
.canvas-nota.si-trascina { box-shadow: 0 4px 14px rgba(15, 17, 22, .18); z-index: 2; }
.canvas-nota-testa { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0; cursor: grab; touch-action: none; }
.canvas-nota.si-trascina .canvas-nota-testa { cursor: grabbing; }
.canvas-nota textarea {
  display: block; width: 100%; height: 110px; border: none; background: transparent; resize: vertical; font-family: inherit;
  font-size: 13px; line-height: 1.4; padding: 6px 10px 10px; cursor: text;
}
.canvas-nota textarea:focus { outline: none; }

/* Un campo di un nodo: etichetta sopra, controllo, aiuto sotto */
.campo-riga { display: flex; flex-direction: column; gap: 4px; }
.campo-etichetta { font-size: 11.5px; font-weight: 600; color: var(--testo-debole); }
.campo-aiuto { font-size: 11px; color: var(--testo-tenue); }
.campo-riga select, .campo-riga input:not([type=checkbox]), .campo-riga textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--bordo-forte); border-radius: 8px; font-size: 13.5px; background: white; font-family: inherit; resize: vertical; }
.campo-riga input[type=number], .campo-riga input[type=time] { width: auto; min-width: 78px; }
.scelte-multiple { display: flex; flex-direction: column; gap: 4px; }
.scelta-multipla { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.campo-bottoni-risposta { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* I rami Si/No di una condizione e "Poi" di un'azione (issue #35, albero delle condizioni): una riga compatta ciascuno (niente
   box bordato ne' testo d'aiuto ripetuto come i bottoni di "rispondi_con_bottoni" sotto: qui non c'e' un'etichetta da scrivere). */
.campo-rami { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.riga-ramo { display: flex; align-items: center; gap: 8px; }
.ramo-etichetta { font-size: 11.5px; font-weight: 600; color: var(--testo-debole); flex-shrink: 0; min-width: 32px; }
.ramo-collegato { flex: 1; min-width: 0; font-size: 13px; color: var(--accento); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ramo-non-collegato { flex: 1; min-width: 0; font-size: 12px; color: var(--testo-tenue); }
.riga-bottone-risposta { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--bordo); border-radius: 8px; }
.riga-bottone-risposta-corpo { display: flex; align-items: center; gap: 8px; }
.riga-bottone-risposta-corpo input { flex: 1; min-width: 0; }
.bottone-template-etichetta { font-size: 13.5px; font-weight: 600; color: var(--testo); }
.riga-bottone-template { background: var(--pannello); }
.bottone-non-collegato { flex: 1; min-width: 0; margin: 0; }
/* Il pallino di uscita di un bottone: si trascina fino a un altro blocco per collegarlo (canvas.js: abilitaConnessione). */
.bottone-uscita {
  flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--pannello); border: 2px solid var(--accento);
  cursor: crosshair; touch-action: none;
}
.bottone-uscita:hover { background: var(--accento-tenue); }
.bottone-uscita[data-connesso-a] { background: var(--accento); }
.bottone-collegato { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px dashed var(--accento); border-radius: 8px; background: var(--accento-tenue); font-size: 13px; }
.bottone-collegato span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-freccia-temp { stroke: var(--accento); stroke-dasharray: 4 3; }
/* L'anteprima dell'immagine scelta per un blocco "Rispondi con questo testo"/"con bottoni" (campi.js: immagine_automazione). */
.anteprima-immagine-automazione { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.anteprima-immagine-automazione img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bordo); }

/* Il titolo "Prova" dentro il menu "..." (.menu-prova piu' sopra). */
.titolo-auto { display: flex; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-debole); margin-bottom: 8px; }
.titolo-auto .aiuto { margin: 0; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* interruttori con la scritta Attiva/Spenta accanto */
.acceso { color: var(--ok-testo); }
.spento-testo { color: var(--testo-debole); }