/* Messaggi telefonici — foglio di stile unico (contratto tecnico v2, SPEC_PROTOTIPO.md §6)
 *
 * CSS puro, nessuna risorsa esterna, caratteri di sistema, tema chiaro, alto contrasto.
 * Regole di colore: il ROSSO significa solo "Urgente" (eccezioni volute dal contratto: le
 * fasce "Disconnesso" e "NON INVIATO" e la spunta rossa di "Prova questo PC"); il BLU è per
 * le azioni; il GRIGIO per le persone assenti; il grassetto per i messaggi non ancora visti.
 * Nessun colore per l'età dei messaggi.
 *
 *    1. Variabili e base            7. Nuovo messaggio (griglia 1366×768)
 *    2. Pulsanti e campi            8. Liste "Non ancora visti" e "Aperti"
 *    3. Fascia demo e intestazione  9. I miei
 *    4. Fasce, avvisi, invii       10. Storico, cronologia
 *    5. Accesso e caricamento      11. Prova questo PC, Amministrazione
 *    6. Dialoghi, menu, tendina    12. Smartphone (≤ 700 px)
 */

/* ==========================================================================
   1. VARIABILI E BASE
   ========================================================================== */

:root {
  --sfondo: #f2f4f7;
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --bordo: #d3d9e2;
  --bordo-forte: #b4bdca;
  --testo: #111827;
  --tenue: #4b5563;

  --blu: #1d4ed8;            /* azioni */
  --blu-scuro: #1e3a8a;
  --blu-chiaro: #e7eeff;
  --blu-bordo: #9db5f5;

  --rosso: #c81e1e;          /* SOLO "Urgente" */
  --rosso-chiaro: #fdeeee;

  --grigio: #6b7280;         /* persone assenti */
  --grigio-chiaro: #eceff3;

  --verde: #157f3c;          /* spunta di "Prova questo PC" */
  --ambra: #8a4b08;          /* errori dei moduli: non rossi */
  --ambra-chiaro: #fff4d6;
  --giallo-demo: #fde047;

  --scuro: #1f2937;          /* avvisi a comparsa */

  --raggio: 10px;
  --raggio-s: 7px;
  --ombra: 0 1px 2px rgba(17, 24, 39, .06), 0 4px 14px rgba(17, 24, 39, .07);
  --ombra-forte: 0 18px 50px rgba(17, 24, 39, .28);
  --carattere: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* L'attributo hidden vince sempre (molti contenitori sono flex o grid). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.45 var(--carattere);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.3rem; font-weight: 700; }
h2 { font-size: 1.02rem; font-weight: 700; }
h3 { font-size: .92rem; font-weight: 700; }
p { margin: 0 0 .6em; }
code { font-family: Consolas, "Cascadia Mono", monospace; background: var(--grigio-chiaro); padding: 1px 5px; border-radius: 4px; }
kbd {
  font: 600 .72rem/1 var(--carattere);
  padding: 3px 6px; margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 4px;
  opacity: .9;
}

:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }

.tenue { color: var(--tenue); }
.piccolo { font-size: .85rem; }
.grigio { color: var(--grigio); }
.centro { text-align: center; }
.visivo-nascosto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.vuoto { color: var(--tenue); margin: 10px 4px; }
.vuoto-grande { font-size: 1.25rem; color: var(--tenue); text-align: center; margin: 48px 0 40px; }
.avvertenza {
  margin: 12px 0 0; padding: 8px 12px;
  background: var(--ambra-chiaro); color: var(--ambra);
  border-radius: var(--raggio-s); font-weight: 600;
}
.noscript { margin: 3rem auto; max-width: 30rem; text-align: center; }

/* "URGENTE": l'unico rosso dell'interfaccia. */
.urgente-tag {
  display: inline-block; flex: none;
  padding: 1px 7px; margin-right: 6px;
  background: var(--rosso); color: #fff;
  border-radius: 4px;
  font-size: .74rem; font-weight: 800; letter-spacing: .04em; line-height: 1.5;
  vertical-align: 1px;
}

/* ==========================================================================
   2. PULSANTI E CAMPI
   ========================================================================== */

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 14px;
  background: var(--superficie); color: var(--blu-scuro);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: var(--blu-chiaro); border-color: var(--blu-bordo); }
.btn-primario { background: var(--blu); border-color: var(--blu); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--blu-scuro); border-color: var(--blu-scuro); }
.btn-piccolo { min-height: 28px; padding: 3px 10px; font-size: .84rem; }
.btn-grande { min-height: 46px; padding: 10px 22px; font-size: 1.02rem; }
.btn-largo { width: 100%; min-height: 44px; }
.btn-testo { background: none; border-color: transparent; color: var(--blu); }
.btn-testo:hover:not(:disabled) { background: var(--blu-chiaro); }
.btn-menu { min-width: 44px; font-size: 1.15rem; letter-spacing: .05em; padding: 4px 10px; }
.btn-su-scuro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn-su-scuro:hover:not(:disabled) { background: rgba(255, 255, 255, .16); border-color: #fff; }

input[type="text"], input[type="search"], input[type="password"], input[type="number"],
input[type="date"], input:not([type]), select, textarea {
  width: 100%; min-height: 36px; padding: 6px 10px;
  background: #fff; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
}
textarea { resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blu); outline-offset: 0; border-color: var(--blu); }
input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--blu); flex: none; }

.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.campo-etichetta { font-weight: 600; font-size: .9rem; }
.spunta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin: 4px 0 10px; }
.azioni-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.azioni-riga > input { flex: 1 1 260px; width: auto; }

/* ==========================================================================
   3. FASCIA DEMO E INTESTAZIONE
   ========================================================================== */

.fascia-demo {
  position: relative; z-index: 95; flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  min-height: 40px; padding: 5px 16px;
  background: var(--giallo-demo); color: #3b2a00;
  border-bottom: 1px solid #d9b800;
  font-size: .9rem;
}
.demo-scelta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.demo-scelta select { width: auto; min-height: 30px; padding: 3px 8px; min-width: 16rem; max-width: 70vw; }

.testa {
  position: sticky; top: 0; z-index: 30; flex: none;
  display: flex; align-items: center; gap: 10px 18px;
  min-height: 52px; padding: 6px 16px;
  background: var(--superficie); border-bottom: 1px solid var(--bordo);
}
.testa-marchio { display: flex; align-items: center; gap: 8px; min-width: 0; }
.testa-marchio img { display: block; flex: none; }
.testa-nome { font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.testa-azienda {
  color: var(--tenue); font-size: .9rem; max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.testa-ora { color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.schede-nav { display: flex; gap: 4px; margin-left: auto; }
.tab {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 6px 16px;
  color: var(--testo); text-decoration: none; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--raggio-s);
  white-space: nowrap;
}
.tab:hover { background: var(--blu-chiaro); }
.tab.attiva { background: var(--blu); color: #fff; }
.conta { font-variant-numeric: tabular-nums; }
.testa-persona {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 6px 12px;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  font-weight: 600; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis;
}
.testa-persona:hover, .testa-persona[aria-expanded="true"] { background: var(--blu-chiaro); border-color: var(--blu-bordo); }

/* ==========================================================================
   4. FASCE, AVVISI A COMPARSA, INVII IN PARTENZA
   ========================================================================== */

.fasce { flex: none; }
.fasce:empty { display: none; }
.fascia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  min-height: 38px; padding: 6px 16px;
  font-size: .93rem;
}
/* Rosse per contratto: "Disconnesso" e "NON INVIATO (n)". */
.fascia-rossa { background: #b91c1c; color: #fff; }
.fascia-rossa strong { font-size: 1rem; letter-spacing: .02em; }
.fascia-blu { background: var(--blu-chiaro); color: var(--blu-scuro); border-bottom: 1px solid var(--blu-bordo); }
.fascia-attiva {
  width: 100%; justify-content: center;
  background: var(--blu-chiaro); color: var(--blu-scuro);
  border: 0; border-bottom: 1px solid var(--blu-bordo);
  font-weight: 700;
}
.fascia-attiva:hover { background: #d6e2ff; }

/* Contenitore in basso: fasce "Inviato a…" e avvisi a comparsa.
   Sotto il velo dei dialoghi (85) e sotto la tendina dei suggerimenti (80): non copre mai
   i pulsanti di un dialogo aperto né le ultime voci dei suggerimenti. */
.basso {
  position: fixed; z-index: 78; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  width: min(680px, calc(100vw - 24px));
  pointer-events: none;
}
.avvisi, .invii { display: flex; flex-direction: column; gap: 8px; }
.avvisi:empty, .invii:empty { display: none; }

.avviso {
  position: relative; overflow: hidden; pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 16px;
  background: var(--scuro); color: #fff;
  border-radius: var(--raggio); box-shadow: var(--ombra-forte);
  animation: entra .16s ease-out;
}
.avviso-errore { background: #3d2a05; box-shadow: inset 5px 0 0 #f5b301, var(--ombra-forte); }
.avviso-testo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.avviso-azione {
  flex: none; padding: 5px 12px;
  background: transparent; color: #a9c4ff;
  border: 1px solid #a9c4ff; border-radius: var(--raggio-s);
  font-weight: 700;
}
.avviso-azione:hover { background: rgba(169, 196, 255, .14); }
.avviso-x {
  flex: none; width: 30px; height: 30px; padding: 0;
  background: none; border: 0; color: #cbd5e1; font-size: 1.3rem; line-height: 1;
  border-radius: 6px;
}
.avviso-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.avviso-tempo {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: #a9c4ff;
  animation-name: scorre; animation-timing-function: linear; animation-fill-mode: forwards;
}

.invio-fascia {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 14px;
  background: var(--blu-scuro); color: #fff;
  border-radius: var(--raggio); box-shadow: var(--ombra-forte);
  animation: entra .16s ease-out;
}
.invio-testo { flex: 1 1 auto; font-weight: 700; }
.invio-secondi {
  min-width: 3.2em; text-align: right;
  font-variant-numeric: tabular-nums; color: #c7d6ff; font-weight: 600;
}

@keyframes entra { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes scorre { from { width: 100%; } to { width: 0; } }

/* ==========================================================================
   5. ACCESSO, CAMBIO PASSWORD, CARICAMENTO
   ========================================================================== */

.schermo {
  position: fixed; inset: 0; z-index: 92;          /* sopra i dialoghi: su 401 l'accesso deve restare raggiungibile */
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  background: var(--sfondo);
}
body.con-demo .schermo { top: 40px; }
/* Sessione scaduta: l'accesso si apre sopra l'app, che resta com'era sotto. */
.schermo.sopra-app { background: rgba(17, 24, 39, .55); }
.schermo-box {
  width: 100%; max-width: 410px; margin: auto;
  padding: 26px 26px 20px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 14px;
  box-shadow: var(--ombra);
}
.schermo.sopra-app .schermo-box { box-shadow: var(--ombra-forte); }
.schermo-box h1 { margin-bottom: 14px; }
.schermo-marchio { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.schermo-marchio h1 { margin: 0; font-size: 1.25rem; }
.schermo-nota {
  padding: 8px 12px; margin-bottom: 14px;
  background: var(--blu-chiaro); color: var(--blu-scuro); border-radius: var(--raggio-s);
  font-size: .92rem;
}
.schermo-errore, .dialogo-errore, .modulo-errore {
  padding: 8px 12px; margin: 4px 0 12px;
  background: var(--ambra-chiaro); color: var(--ambra);
  border: 1px solid #f1d38a; border-radius: var(--raggio-s);
  font-weight: 600;
}
.schermo-box .btn-testo { width: 100%; margin-top: 8px; }

.accesso-demo { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--bordo-forte); }
.accesso-demo-titolo { font-weight: 700; margin-bottom: 8px; }
.accesso-demo-pulsanti { display: flex; flex-direction: column; gap: 6px; }
.btn-demo {
  justify-content: flex-start; width: 100%; text-align: left; white-space: normal;
  background: #fffbe0; border-color: #e6cf5a; color: var(--testo);
}
.btn-demo:hover:not(:disabled) { background: #fff3a8; border-color: #d9b800; }

.caricamento {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 50vh; padding: 24px;
  color: var(--tenue); font-size: 1.05rem; text-align: center;
}

/* ==========================================================================
   6. DIALOGHI, MENU, TENDINA DEI SUGGERIMENTI
   ========================================================================== */

.velo {
  position: fixed; inset: 0; z-index: 85;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 16px 16px; overflow-y: auto;
  background: rgba(17, 24, 39, .45);
}
.dialogo {
  width: 100%; max-width: 500px;
  background: var(--superficie); border-radius: 14px; box-shadow: var(--ombra-forte);
  animation: entra .14s ease-out;
}
.dialogo-largo { max-width: 700px; }
.dialogo:focus { outline: none; }
.dialogo-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px 10px 20px; border-bottom: 1px solid var(--bordo);
}
.dialogo-titolo { font-size: 1.12rem; }
.dialogo-x {
  width: 36px; height: 36px; padding: 0; flex: none;
  background: none; border: 0; border-radius: 8px; font-size: 1.5rem; line-height: 1; color: var(--tenue);
}
.dialogo-x:hover { background: var(--grigio-chiaro); color: var(--testo); }
.dialogo-corpo { padding: 16px 20px 6px; max-height: 68vh; overflow-y: auto; }
.dialogo-errore { margin: 0 20px 8px; }
.dialogo-piede {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  padding: 12px 20px 16px;
}
.scelta-persone { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.scelta-persone .persona { min-height: 48px; }
.password-temporanea {
  font: 700 1.5rem/1.3 Consolas, "Cascadia Mono", monospace; letter-spacing: .06em;
  padding: 12px; text-align: center; user-select: all;
  background: var(--grigio-chiaro); border-radius: var(--raggio-s);
}
.elenco-coda { margin: 8px 0 0; padding-left: 20px; }
.elenco-coda li { margin-bottom: 6px; }

.menu-tendina {
  position: fixed; z-index: 90;
  min-width: 210px; max-width: min(340px, calc(100vw - 16px));
  padding: 6px 0;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-forte);
}
.menu-voce {
  display: block; width: 100%; padding: 10px 16px;
  background: none; border: 0; text-align: left; font-weight: 500;
}
.menu-voce:hover, .menu-voce:focus { background: var(--blu-chiaro); outline: none; }

/* Al massimo circa 4 voci visibili (le altre scorrono): l'elenco copre il meno possibile
   delle righe sotto (Numero, Urgente, Testo). */
.tendina {
  position: fixed; z-index: 80;
  max-height: 216px; max-width: calc(100vw - 8px); overflow-y: auto;
  margin: 0; padding: 4px 0; list-style: none;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s);
  box-shadow: var(--ombra-forte);
}
.tendina-voce { padding: 7px 12px; cursor: pointer; border-bottom: 1px solid var(--superficie-2); }
.tendina-voce:last-child { border-bottom: 0; }
.tendina-voce:hover { background: var(--superficie-2); }
.tendina-voce.attiva { background: var(--blu-chiaro); }
.voce-rubrica {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto; gap: 2px 12px; align-items: baseline;
}
.voce-nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce-azienda { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce-tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.voce-quando { grid-column: 1 / -1; color: var(--tenue); font-size: .8rem; }

/* ==========================================================================
   7. NUOVO MESSAGGIO
   ========================================================================== */

.principale { display: block; }
.vista-nuovo {
  display: grid; gap: 10px 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "per" "modulo" "chiamante" "liste";
  padding: 10px 16px 14px;
}
.vista-nuovo:not(.con-liste) { grid-template-areas: "per" "modulo"; }
.per-chi { grid-area: per; }
.nv-modulo { grid-area: modulo; }
.riquadro { grid-area: chiamante; }
.nv-liste { grid-area: liste; }

/* Per chi: pulsanti grandi in ordine fisso, numero 1–9. */
.per-chi-testa { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.per-chi-testa h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }
.per-chi-testa .tenue { font-size: .8rem; }
.persone { display: flex; flex-wrap: wrap; gap: 6px; }
.persone:focus { outline: none; }
.persone:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 6px; }
.persona-box { position: relative; flex: 1 1 auto; max-width: 260px; min-width: 112px; display: flex; }   /* larga quanto il nome: niente nomi tagliati anche con 20+ persone */
.persona {
  flex: 1 1 auto; min-width: 0; min-height: 50px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  padding: 6px 10px; text-align: left;
  background: var(--superficie); color: var(--testo);
  border: 2px solid var(--bordo-forte); border-radius: var(--raggio);
  line-height: 1.2;
}
.persona.con-menu { padding-right: 30px; }
.persona:hover { border-color: var(--blu); background: var(--blu-chiaro); }
.persona-riga { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.persona-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--grigio-chiaro); color: var(--testo);
  font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.persona-nome { font-size: 1.04rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-info {
  max-width: 100%; font-size: .76rem; color: var(--grigio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Assenti: grigi, con data e nota, ma cliccabili. */
.persona.assente { background: var(--grigio-chiaro); border-color: #cdd3db; color: var(--grigio); }
.persona.assente .persona-nome { font-weight: 600; }
.persona.assente .persona-num { background: #dde1e7; color: var(--grigio); }
.persona.assente:hover { border-color: var(--grigio); background: #e3e7ec; }
/* Scelta: blu pieno. */
.persona.scelta, .persona.scelta:hover { background: var(--blu); border-color: var(--blu); color: #fff; }
.persona.scelta .persona-num { background: #fff; color: var(--blu); }
.persona.scelta .persona-info { color: #dbe5ff; }
/* Di solito: cornice tratteggiata, solo un suggerimento. */
.persona.di-solito { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 6px var(--blu-bordo); border-style: dashed; border-color: var(--blu); }
.persona.di-solito.scelta { border-style: solid; }
.persona-menu {
  position: absolute; top: 3px; right: 3px;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; border-radius: 6px;
  color: inherit; font-size: 1.05rem; line-height: 1; opacity: .7;
}
.persona-box .persona.scelta + .persona-menu { color: #fff; }
.persona-menu:hover, .persona-menu[aria-expanded="true"] { background: rgba(0, 0, 0, .1); opacity: 1; }

/* Modulo */
.nv-modulo {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.campo-linea { font-weight: 600; font-size: .9rem; line-height: 1.15; }
.riga-campi {
  display: grid; align-items: center; gap: 8px 10px;
  grid-template-columns: 7.4rem minmax(0, 1fr) auto minmax(0, 1fr);
}
.riga-numero { grid-template-columns: 7.4rem minmax(0, 1fr) auto; }
.con-nota { display: flex; align-items: center; gap: 10px; min-width: 0; }
.con-nota input { flex: 1 1 auto; min-width: 0; }
.manca { flex: none; color: var(--ambra); font-weight: 600; font-size: .86rem; white-space: nowrap; }
.spunta-urgente {
  margin: 0; padding: 5px 12px; min-height: 36px;
  border: 2px solid var(--bordo-forte); border-radius: var(--raggio-s);
  font-weight: 700; letter-spacing: .02em;
}
.spunta-urgente input { accent-color: var(--rosso); }
.spunta-urgente.attiva { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.riga-frasi { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); align-items: center; gap: 8px 10px; }
.frasi { display: flex; flex-wrap: wrap; gap: 5px; }
.btn-frase { min-height: 28px; padding: 2px 10px; font-weight: 500; font-size: .88rem; border-radius: 999px; }
.riga-testo { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr) auto; align-items: start; gap: 8px 10px; }
.riga-testo .campo-linea { padding-top: 8px; }
.riga-testo textarea { min-height: 54px; }
.btn-invia { min-height: 54px; padding: 8px 18px; font-size: 1.05rem; }
.modulo-errore { margin: 0; }
.chiamata-arrivo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--blu-chiaro); color: var(--blu-scuro); border-radius: var(--raggio-s);
  font-weight: 600;
}

/* Riquadro "Questo chiamante" */
.riquadro {
  position: relative; min-height: 120px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.riquadro-dentro { padding: 10px 12px; overflow-y: auto; max-height: 340px; }
.riquadro h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.riquadro h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); margin: 10px 0 4px; }
.riquadro p { font-size: .88rem; }
.ch-msg {
  padding: 7px 9px; margin-bottom: 7px;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  font-size: .9rem;
}
.ch-msg.urgente { border-left: 4px solid var(--rosso); }
.ch-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.ch-chi { font-weight: 600; }
.ch-testo { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--testo); margin: 2px 0; max-height: 4.4em; overflow: hidden; }
.ch-stato { color: var(--tenue); font-size: .84rem; }
.btn-har { margin-top: 6px; min-height: 32px; padding: 4px 14px; font-weight: 800; letter-spacing: .03em; }
.ch-recente {
  display: flex; flex-direction: column;
  padding: 5px 0; border-bottom: 1px solid var(--superficie-2);
  font-size: .86rem;
}
.ch-recente:last-child { border-bottom: 0; }
.ch-fatto { color: var(--tenue); }

/* ==========================================================================
   8. LISTE IN BASSO: "NON ANCORA VISTI" E "APERTI"
   ========================================================================== */

.nv-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; }
.lista-box {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.lista-testa {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 38px; padding: 5px 12px; border-bottom: 1px solid var(--bordo);
}
.lista-testa h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }
.lista-nonvisti .lista-testa { background: var(--superficie-2); border-radius: var(--raggio) var(--raggio) 0 0; }
.lista-cerca { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; }
.lista-cerca input { width: 14rem; min-height: 28px; padding: 3px 8px; }
.lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: 420px; }

.riga { padding: 5px 12px; border-bottom: 1px solid var(--superficie-2); }
.riga:last-child { border-bottom: 0; }
.riga:hover { background: #fafbfc; }
.riga.urgente { box-shadow: inset 4px 0 0 var(--rosso); }
.riga-linea {
  display: flex; align-items: baseline; gap: 0 8px; min-width: 0;
  white-space: nowrap; overflow: hidden;
}
.riga-quando { flex: none; color: var(--tenue); font-variant-numeric: tabular-nums; font-size: .88rem; }
.riga-chi { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.riga.non-visto .riga-chi { font-weight: 700; }
.riga-dest { flex: none; font-weight: 600; }
.riga-linea .grigio { flex: none; font-size: .86rem; }
.riga-sotto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 2px; }
.riga-stato { color: var(--tenue); font-size: .84rem; min-width: 0; }
.riga-azioni { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.riga-azioni .btn-piccolo { min-height: 26px; padding: 2px 9px; }
/* Liste larghe: azioni a destra, sulla stessa altezza del testo (righe più basse, più righe visibili). */
.lista { container-type: inline-size; }
@container (min-width: 640px) {
  .riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .riga-linea { grid-column: 1; grid-row: 1; }
  .riga-sotto { display: contents; }
  .riga-stato { grid-column: 1; grid-row: 2; }
  .riga-azioni { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; }
  .riga .nota-fatto { grid-column: 1 / -1; }
}

/* Riga "✓ Fatto" con la nota facoltativa (I miei e liste) */
.nota-fatto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-top: 8px; padding: 8px 10px;
  background: var(--blu-chiaro); border: 1px solid var(--blu-bordo); border-radius: var(--raggio-s);
}
.nota-fatto-titolo { font-weight: 800; color: var(--blu-scuro); }
.nota-fatto input { flex: 1 1 240px; width: auto; min-height: 32px; }
.nota-fatto .tenue { flex-basis: 100%; }
.solo-tocco { display: none; }

/* --------------------------------------------------------------------------
   Disposizione a schermo intero per "Nuovo messaggio": in 1366×768 tutto sta
   nella finestra senza far scorrere la pagina; scorrono solo le liste in basso
   e il riquadro "Questo chiamante".
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .vista-nuovo.con-liste {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 31%);
    grid-template-areas: "per per" "modulo chiamante" "liste liste";
  }
  /* il riquadro non allunga la riga del modulo: scorre al suo interno */
  .vista-nuovo.con-liste .riquadro-dentro { position: absolute; inset: 0; max-height: none; }
  .vista-nuovo:not(.con-liste) { max-width: 1100px; margin: 0 auto; }
}
@media (min-width: 1100px) {
  .nv-liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
}
@media (min-width: 1000px) and (min-height: 560px) {
  body[data-vista="nuovo"] {
    height: 100vh; height: 100dvh; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
  }
  body[data-vista="nuovo"] > .principale { flex: 1 1 auto; min-height: 0; overflow: auto; }
  body[data-vista="nuovo"] .vista-nuovo.con-liste {
    height: 100%; min-height: 0;
    grid-template-rows: auto auto minmax(150px, 1fr);
    padding-bottom: 10px;
  }
  body[data-vista="nuovo"] .vista-nuovo.con-liste .nv-liste { min-height: 0; }
  body[data-vista="nuovo"] .vista-nuovo.con-liste .lista { max-height: none; }
}
/* Con la fascia "Inviato a…" in basso, le ultime righe delle liste si possono far scorrere
   sopra la fascia invece di restarle sotto per 10 secondi. */
body[data-vista="nuovo"]:has(#invii:not(:empty)) .lista { padding-bottom: 72px; }

/* ==========================================================================
   9. I MIEI
   ========================================================================== */

.pagina { max-width: 980px; margin: 0 auto; padding: 18px 16px 120px; }
.pagina-larga { max-width: 1440px; }
.pagina > h1 { margin-bottom: 14px; }
.miei-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 12px; }
.miei-testa .tenue { font-size: .88rem; }
.schede { display: flex; flex-direction: column; gap: 10px; }

.scheda {
  padding: 12px 16px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
.scheda.urgente { border-left: 5px solid var(--rosso); }
/* Grassetto = non ancora visto. */
.scheda.non-visto .scheda-nome, .scheda.non-visto .scheda-testo { font-weight: 700; }
.scheda.evidenziata { animation: lampeggia 1.6s ease-out 1; box-shadow: 0 0 0 3px var(--blu-bordo); }
@keyframes lampeggia { 0%, 40% { background: var(--blu-chiaro); } 100% { background: var(--superficie); } }

.scheda-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 16px; }
.scheda-chi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.scheda-nome { font-size: 1.06rem; font-weight: 500; overflow-wrap: anywhere; }
.scheda-chiamate { font-size: .88rem; font-weight: 700; color: var(--blu-scuro); white-space: nowrap; }
.scheda-testo { margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.scheda-note { margin: 6px 0 0; padding: 0 0 0 12px; list-style: none; border-left: 3px solid var(--bordo); font-size: .92rem; }
.scheda-note li { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.scheda-info { margin-top: 6px; color: var(--tenue); font-size: .88rem; }
.scheda-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Numero: sul PC un clic lo copia; sullo smartphone è un pulsante "chiama" (tel:). */
.numero { flex: none; }
.numero-pc {
  padding: 3px 8px; margin: -3px -8px 0 0;
  background: none; border: 1px dashed transparent; border-radius: var(--raggio-s);
  font-size: 1.08rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--testo);
}
.numero-pc:hover { border-color: var(--blu-bordo); background: var(--blu-chiaro); color: var(--blu-scuro); }
.numero-pc::after { content: "copia"; margin-left: 8px; font-size: .72rem; font-weight: 600; color: var(--tenue); vertical-align: 1px; }
.numero-tel { display: none; }
.numero-manca { flex: none; color: var(--ambra); font-size: .88rem; font-weight: 600; white-space: nowrap; }

.fatti-oggi { margin-top: 26px; }
.fatti-titolo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; margin-left: -10px;
  background: none; border: 0; border-radius: var(--raggio-s);
  font-weight: 700; font-size: 1rem; color: var(--testo);
}
.fatti-titolo:hover { background: var(--grigio-chiaro); }
.fatti-elenco { margin: 6px 0 0; padding: 0; list-style: none; }
.fatto-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; margin-bottom: 6px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
}
.fatto-testo { min-width: 0; overflow-wrap: anywhere; }
.fatto-chi { font-weight: 600; }

/* ==========================================================================
   10. STORICO E CRONOLOGIA
   ========================================================================== */

.cerca-riga { margin-bottom: 16px; }
.cerca-riga input { font-size: 1.05rem; min-height: 44px; max-width: 560px; }
.storico-gruppo {
  margin-bottom: 14px; padding: 12px 16px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.storico-gruppo h2 { margin-bottom: 6px; overflow-wrap: anywhere; }
.storico-elenco { margin: 0; padding: 0; list-style: none; }
.storico-riga { padding: 8px 0 8px 10px; border-top: 1px solid var(--superficie-2); }
.storico-riga:first-child { border-top: 0; }
.storico-riga.urgente { box-shadow: inset 3px 0 0 var(--rosso); }
.storico-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; font-weight: 600; }
.storico-testo { margin: 3px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--testo); }
.storico-riga .riga-azioni { margin: 6px 0 0; }
.storico-cron { margin-top: 8px; padding: 8px 12px; background: var(--superficie-2); border-radius: var(--raggio-s); }

.cron-testa { font-weight: 600; margin-bottom: 8px; }
.cron-elenco { margin: 0; padding: 0; list-style: none; }
.cron-elenco li {
  display: grid; grid-template-columns: 7.5em 9em minmax(0, 1fr); gap: 2px 10px;
  padding: 5px 0; border-bottom: 1px solid var(--bordo); font-size: .92rem;
}
.cron-elenco li:last-child { border-bottom: 0; }
.cron-quando { color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cron-tipo { font-weight: 700; }
.cron-chi { color: var(--testo); }
.cron-dettaglio { grid-column: 2 / -1; color: var(--tenue); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ==========================================================================
   11. PROVA QUESTO PC E AMMINISTRAZIONE
   ========================================================================== */

.prova { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.prova-riga {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.prova-segno {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 1.05rem;
}
.prova-riga.ok .prova-segno { background: var(--verde); }
.prova-riga.ko .prova-segno { background: #b91c1c; }   /* spunta rossa: voluta dal contratto */
.prova-testo { flex: 1 1 auto; min-width: 0; }
.passi { padding-left: 22px; }
.passi li { margin-bottom: 12px; }
.pagina > h2 { margin: 22px 0 10px; }

.adm-sezione {
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.adm-sezione > h2 { margin-bottom: 10px; }
.adm-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tabella-scorri { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella th, .tabella td { padding: 7px 8px; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: middle; }
.tabella th { font-size: .8rem; color: var(--tenue); font-weight: 700; white-space: nowrap; }
.tabella th.centro, .tabella td.centro { text-align: center; }
.tabella tr.disattivata td { color: var(--grigio); background: var(--superficie-2); }
.adm-azioni { width: auto; }
.adm-azioni-box { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 250px; }
.adm-azioni-box .btn { margin: 0; white-space: nowrap; }
.tabella-persone th.stretta { white-space: normal; line-height: 1.15; min-width: 64px; max-width: 90px; }
.tabella-persone td:nth-child(3), .tabella-persone .adm-stato { white-space: nowrap; }
.tabella-persone .adm-stato[title]:not([title=""]) { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.tabella .piccolo { font-size: .8rem; margin-top: 1px; }
.frasi-editor .frasi-righe { margin: 0 0 10px; padding-left: 26px; }
.frasi-righe li { margin-bottom: 6px; }
.frasi-righe li { display: list-item; }
.frasi-righe li > input { width: calc(100% - 190px); min-width: 160px; margin-right: 6px; vertical-align: middle; }
.frasi-righe li > .btn { vertical-align: middle; margin-right: 2px; }

/* ==========================================================================
   12. SCHERMI MEDI E SMARTPHONE
   ========================================================================== */

@media (max-width: 999px) {
  .testa { flex-wrap: wrap; }
  .riga-campi { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .riga-campi > .campo-linea:nth-of-type(2) { grid-column: 1; }
  .riga-numero { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .riga-numero > .spunta-urgente { grid-column: 2; justify-self: start; }
  .riga-frasi, .riga-testo { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .riga-testo .btn-invia { grid-column: 2; justify-self: start; min-height: 46px; }
}

/* Smartphone (≤ 700 px): schede a tutta larghezza, numero come pulsante grande "chiama". */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .fascia-demo { padding: 5px 10px; }
  .demo-scelta select { min-width: 0; max-width: 58vw; }
  .testa { gap: 6px 10px; padding: 6px 10px; }
  .testa-ora, .testa-azienda { display: none; }
  .testa-persona { margin-left: auto; }
  .schede-nav { order: 3; width: 100%; margin-left: 0; }
  .tab { flex: 1 1 0; justify-content: center; padding: 6px 8px; }
  .pagina { padding: 12px 10px 120px; }

  .vista-nuovo { padding: 8px 10px 14px; }
  .persona-box { flex: 1 1 140px; max-width: none; }
  .riga-campi, .riga-numero, .riga-frasi, .riga-testo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .riga-campi > .campo-linea:nth-of-type(2), .riga-numero > .spunta-urgente, .riga-testo .btn-invia { grid-column: 1; }
  .riga-testo .btn-invia { justify-self: stretch; }
  .riga-testo .campo-linea { padding-top: 0; }
  .lista-testa { flex-wrap: wrap; }
  .lista-cerca input { width: 100%; }
  .lista-cerca { flex: 1 1 100%; }

  .scheda { padding: 12px; border-radius: var(--raggio); }
  .scheda-testa { flex-direction: column; }
  .numero { width: 100%; }
  .scheda-azioni .btn { flex: 1 1 0; min-height: 46px; }
  .scheda-azioni .btn-menu { flex: 0 0 56px; }
  .riga-azioni .btn { min-height: 38px; }
  .nota-fatto .btn { flex: 1 1 0; min-height: 44px; }

  .cron-elenco li { grid-template-columns: 6.5em minmax(0, 1fr); }
  .cron-chi { grid-column: 2; }
  .cron-dettaglio { grid-column: 1 / -1; }

  .basso { bottom: 8px; }
  .velo { padding: 10px; }
  .dialogo-corpo { max-height: 74vh; }
  .tabella { font-size: .86rem; }
  .frasi-righe li > input { width: 100%; margin: 0 0 4px; }
}

/* Numero: pulsante "chiama" sugli schermi piccoli o solo a tocco; copia sul PC. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .numero-pc { display: none; }
  .numero-tel {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 50px; margin-top: 8px; padding: 8px 16px;
    background: var(--blu); color: #fff; text-decoration: none;
    border-radius: var(--raggio);
    font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .numero-tel.numero-testo { background: var(--grigio-chiaro); color: var(--testo); }
  .numero-chiama {
    padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px;
    font-size: .9rem; font-weight: 700; text-transform: lowercase;
  }
  /* sul telefono non ci sono Invio ed Esc: l'aiuto della riga "✓ Fatto" parla solo dei pulsanti */
  .solo-tastiera { display: none; }
  .solo-tocco { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  /* la barra del tempo di "Annulla" resta: misura i 10 secondi */
  *:not(.avviso-tempo), *::before, *::after { animation-duration: .01ms !important; transition: none !important; }
}

@media print {
  .fascia-demo, .testa, .fasce, .basso, .scheda-azioni, .riga-azioni { display: none !important; }
}