/* Messaggi telefonici — foglio di stile unico (contratto tecnico v2, SPEC_PROTOTIPO.md §6)
 * Grafica "Fluent Enterprise" (Microsoft Fluent 2 / Windows 11) con il marchio Tecnica Industriale.
 *
 * CSS puro, nessuna risorsa esterna: caratteri di sistema (Segoe UI Variable), icone solo come
 * SVG in data-URI (la CSP permette img-src data:) o caratteri Unicode. Tema chiaro.
 *
 * Regole di colore (inviolabili):
 *   - ROSSO  = solo "Urgente" (etichetta, barra a sinistra, spunta Urgente attiva). Nient'altro.
 *     Errori, "Disconnesso", "NON INVIATO" e la ✗ di "Prova questo PC" usano grafite + ambra.
 *   - BLU Tecnica Industriale (#0a4d8c) = azioni principali, selezione, schede attive, conteggi.
 *   - GRIGIO = persona assente.   GRASSETTO (700) = messaggio non ancora visto.
 *   - ARANCIONE di marchio (#e8861e) solo come segno di marchio (onde del logo, filetto
 *     dell'accesso): mai per segnalare problemi o stati.
 *   - Nessun colore per l'età dei messaggi.
 *
 *    1. Variabili, icone e base       7. Nuovo messaggio (griglia 1366×768)
 *    2. Pulsanti e campi              8. Liste "Aperti da oltre 2 ore" 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. Schermi medi e smartphone
 */

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

:root {
  /* Marchio */
  --blu: #0a4d8c;              /* primario: azioni, selezione */
  --blu-hover: #08427a;
  --blu-premuto: #073864;
  --blu-notte: #0b2a4a;
  --blu-chiaro: #edf3fa;       /* tinta: sfondo di hover/selezione leggera */
  --blu-chiaro-2: #dbe7f4;
  --blu-bordo: #a9c3e0;
  --arancio: #e8861e;          /* accento di marchio: solo decorativo */

  /* Neutri freddi (strati Fluent) */
  --canvas: #f3f5f8;
  --superficie: #ffffff;
  --superficie-2: #f8f9fb;
  --superficie-3: #eef1f5;
  --divisore: #edf0f4;
  --bordo: #e0e4ea;
  --bordo-controllo: #c8cfd9;
  --bordo-forte: #a9b3c1;
  --bordo-basso: #7f8a99;      /* bordo inferiore dei campi, come in Fluent */
  --testo: #18212e;
  --testo-2: #374252;
  --tenue: #586374;            /* 5,9:1 su bianco */
  --segnaposto: #6a7483;       /* 4,7:1 su bianco */

  /* Significati */
  --grigio: #5d6877;           /* persone assenti (4,9:1 sul loro sfondo) */
  --grigio-sfondo: #eff1f4;
  --rosso: #c42b1c;            /* SOLO "Urgente" — bianco su rosso 5,6:1 */
  --rosso-premuto: #a52417;
  --verde: #0e700e;            /* spunta di "Prova questo PC" */
  --ambra: #7a4300;            /* errori dei moduli e avvertenze: mai rossi */
  --ambra-chiaro: #fff7e3;
  --ambra-bordo: #efd18f;
  --ambra-vivo: #f4b324;
  --grafite: #252b34;          /* fasce di sistema scure, avvisi a comparsa */
  --grafite-2: #343c47;
  --giallo-demo: #ffd84a;

  --fuoco: #0b2a4a;            /* anello del fuoco da tastiera */
  --alt-demo: 36px;            /* altezza della fascia DIMOSTRAZIONE (su smartphone va su due righe) */

  /* Logo: tessera blu Tecnica Industriale, cornetta bianca, onde arancioni di marchio */
  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23115c9f'/%3E%3Cstop offset='1' stop-color='%230a4d8c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3Cpath fill='%23fff' transform='translate(3 9) scale(.84)' d='M20 14c-3 0-6 3-6 7 0 16 13 29 29 29 4 0 7-3 7-6v-5c0-1.5-1-2.6-2.4-2.9l-7-1.6c-1.2-.3-2.4.1-3.2 1l-2.6 2.9c-5.6-2.8-10.1-7.3-12.9-12.9l2.9-2.6c.9-.8 1.3-2 1-3.2l-1.6-7C24.6 15 23.5 14 22 14z'/%3E%3Cg fill='none' stroke='%23e8861e' stroke-width='4.4' stroke-linecap='round'%3E%3Cpath d='M36 18a10 10 0 0 1 10 10'/%3E%3Cpath d='M36 9a19 19 0 0 1 19 19'/%3E%3C/g%3E%3C/svg%3E");

  /* Forme ed elevazione (rampa Fluent, ombre tinte di blu notte) */
  --raggio: 8px;
  --raggio-s: 6px;
  --raggio-xs: 4px;
  --ombra-1: 0 1px 2px rgba(16, 32, 56, .06);
  --ombra-2: 0 0 1px rgba(16, 32, 56, .10), 0 1px 3px rgba(16, 32, 56, .08);
  --ombra-4: 0 0 2px rgba(16, 32, 56, .10), 0 2px 6px rgba(16, 32, 56, .10);
  --ombra-16: 0 0 2px rgba(16, 32, 56, .12), 0 8px 18px rgba(16, 32, 56, .14);
  --ombra-28: 0 0 8px rgba(16, 32, 56, .12), 0 14px 30px rgba(16, 32, 56, .20);
  --ombra-64: 0 0 8px rgba(16, 32, 56, .12), 0 32px 64px rgba(16, 32, 56, .24);
  --durata: 120ms;

  --carattere: "Segoe UI Variable Text", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --carattere-titoli: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;

  /* Icone sottili (stile Fluent "Regular"), SVG in data-URI */
  --ic-cerca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23586374' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6'/%3E%3Cpath d='m10.3 10.3 3.9 3.9'/%3E%3C/svg%3E");
  --ic-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23374252' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 4.4 6 7.8l3.4-3.4'/%3E%3C/svg%3E");
  --ic-persona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a4d8c' stroke-width='1.25' stroke-linecap='round'%3E%3Ccircle cx='8' cy='5.4' r='2.7'/%3E%3Cpath d='M2.9 13.9c.6-2.5 2.6-3.9 5.1-3.9s4.5 1.4 5.1 3.9'/%3E%3C/svg%3E");
  --ic-campana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a4d8c' stroke-width='1.25' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 11.3V7.2a4 4 0 0 1 8 0v4.1l1.1 1.3H2.9z'/%3E%3Cpath d='M6.6 14.3a1.5 1.5 0 0 0 2.8 0'/%3E%3C/svg%3E");
  --ic-attenzione: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8 14.8 13.6H1.2z' fill='%23f4b324' stroke='%23f4b324' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 6v3.7' stroke='%23252b34' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.7' r='.9' fill='%23252b34'/%3E%3C/svg%3E");
  --ic-attenzione-ambra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8 14.8 13.6H1.2z' fill='none' stroke='%237a4300' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M8 6.2v3.3' stroke='%237a4300' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='.85' fill='%237a4300'/%3E%3C/svg%3E");
  --ic-spunta-bianca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.6 8.4 2.9 2.8 6-6.3'/%3E%3C/svg%3E");
  --ic-copia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23586374' stroke-width='1.2'%3E%3Crect x='5.5' y='5.5' width='8' height='8.5' rx='1.6'/%3E%3Cpath d='M10.5 3.6v-.2A1.6 1.6 0 0 0 8.9 1.8H4.1a1.6 1.6 0 0 0-1.6 1.6v5.3a1.6 1.6 0 0 0 1.6 1.6h.3'/%3E%3C/svg%3E");
  --ic-telefono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M4.6 1.7c.5-.2 1.1 0 1.4.5l1.2 2c.3.5.2 1.1-.2 1.5l-.9.8a7.6 7.6 0 0 0 3.3 3.4l.9-.9c.4-.4 1-.5 1.5-.2l2 1.2c.5.3.7.9.5 1.4l-.4 1.1c-.3.9-1.2 1.4-2.1 1.3C6.7 13.5 2.5 9.3 2.1 4.2c-.1-.9.4-1.8 1.3-2.1z'/%3E%3C/svg%3E");
  --ic-contatto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a4d8c' stroke-width='1.2' stroke-linecap='round'%3E%3Crect x='1.6' y='3' width='12.8' height='10' rx='1.6'/%3E%3Ccircle cx='5.6' cy='7.1' r='1.5'/%3E%3Cpath d='M3.4 10.9c.4-.9 1.2-1.4 2.2-1.4s1.8.5 2.2 1.4M9.6 6.6h3M9.6 9.1h2'/%3E%3C/svg%3E");
  --ic-busta-chiusa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.4' y='3.2' width='13.2' height='9.6' rx='1.7' fill='%230a4d8c'/%3E%3Cpath d='m2.4 4.4 5.6 4.3 5.6-4.3' fill='none' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-busta-aperta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a94a3' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M1.8 7.1 8 2.6l6.2 4.5v5.6a1.2 1.2 0 0 1-1.2 1.2H3a1.2 1.2 0 0 1-1.2-1.2z'/%3E%3Cpath d='m1.9 7.2 6.1 4.3 6.1-4.3'/%3E%3C/svg%3E");
  --ic-orologio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a4d8c' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 4.5V8l2.4 1.6'/%3E%3C/svg%3E");
  --ic-vassoio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a4d8c' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M2 9.2 3.8 3.4a1.3 1.3 0 0 1 1.2-.9h6a1.3 1.3 0 0 1 1.2.9L14 9.2v3.2a1.3 1.3 0 0 1-1.3 1.3H3.3A1.3 1.3 0 0 1 2 12.4z'/%3E%3Cpath d='M2 9.2h3.3l.9 1.6h3.6l.9-1.6H14'/%3E%3C/svg%3E");
  --ic-fatto-cerchio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='22' fill='%23edf3fa'/%3E%3Ccircle cx='24' cy='24' r='15' stroke='%230a4d8c' stroke-width='2'/%3E%3Cpath d='m17.5 24.5 4.6 4.4 8.6-9.4' stroke='%230a4d8c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a4d8c' stroke-width='1.2'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cpath d='M8 7.2v4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='5' r='.7' fill='%230a4d8c' stroke='none'/%3E%3C/svg%3E");

  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%;
  /* il fuoco da tastiera non finisce sotto la barra fissa in alto né sotto avvisi e fasce in basso */
  scroll-padding-top: 64px; scroll-padding-bottom: 96px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--testo);
  font: 400 14px/20px var(--carattere);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #cfe0f3; color: var(--testo); }

h1, h2, h3 { margin: 0; color: var(--testo); }
h1 { font: 600 24px/32px var(--carattere-titoli); letter-spacing: -.012em; }
h2 { font: 600 16px/22px var(--carattere-titoli); }
h3 { font-size: 14px; line-height: 20px; font-weight: 600; }
p { margin: 0 0 8px; }
b, strong { font-weight: 600; }
a { color: var(--blu); }
code {
  font: 500 .92em/1 var(--mono);
  background: var(--superficie-3); border: 1px solid var(--bordo);
  padding: 2px 6px; border-radius: var(--raggio-xs);
}
kbd {
  display: inline-block;
  font: 600 11px/14px var(--carattere);
  padding: 2px 6px; margin-left: 10px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32); border-radius: var(--raggio-xs);
  letter-spacing: .01em;
}

/* Fuoco da tastiera: anello scuro netto, staccato dal bordo. */
:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }

.tenue { color: var(--tenue); }
.piccolo { font-size: 12px; line-height: 16px; }
.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: 0; padding: 14px 16px; font-size: 13px; }
.vuoto-grande {
  margin: 0; padding: 40px 16px 44px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-1);
  font: 600 18px/24px var(--carattere-titoli); color: var(--testo-2); text-align: center;
}
.vuoto-grande::before {
  content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 14px;
  background: var(--ic-fatto-cerchio) center / contain no-repeat;
}
.avvertenza {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; padding: 8px 12px;
  background: var(--ambra-chiaro); color: var(--ambra);
  border: 1px solid var(--ambra-bordo); border-radius: var(--raggio-s);
  font-weight: 600; font-size: 13px;
}
.avvertenza::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px;
  background: var(--ic-attenzione-ambra) center / contain no-repeat;
}
.noscript { margin: 3rem auto; max-width: 30rem; text-align: center; }

/* "URGENTE": l'unico rosso dell'interfaccia. Parola + colore: mai solo colore. */
.urgente-tag {
  display: inline-flex; align-items: center; flex: none;
  height: 20px; padding: 0 7px; margin-right: 8px;
  background: var(--rosso); color: #fff;
  border-radius: var(--raggio-xs);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 20px;
  vertical-align: 1px;
}

/* Barre di scorrimento sottili, come in Windows 11 */
.lista, .riquadro-dentro, .dialogo-corpo, .tendina, .velo, .schermo {
  scrollbar-width: thin; scrollbar-color: #c3cad4 transparent;
}

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

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 5px 14px;
  background: var(--superficie); color: var(--testo);
  border: 1px solid var(--bordo-controllo); border-radius: var(--raggio-s);
  font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap;
  box-shadow: var(--ombra-1);
  transition: background-color var(--durata), border-color var(--durata), color var(--durata), box-shadow var(--durata);
}
.btn:hover:not(:disabled) { background: var(--superficie-2); border-color: var(--bordo-forte); }
.btn:active:not(:disabled) { background: var(--superficie-3); box-shadow: none; }
.btn:disabled { background: var(--superficie-3); border-color: var(--bordo); color: #8b94a1; box-shadow: none; }

.btn-primario { background: var(--blu); border-color: var(--blu); color: #fff; box-shadow: 0 1px 2px rgba(10, 77, 140, .25); }
.btn-primario:hover:not(:disabled) { background: var(--blu-hover); border-color: var(--blu-hover); }
.btn-primario:active:not(:disabled) { background: var(--blu-premuto); border-color: var(--blu-premuto); }
.btn-primario:disabled { background: #b9c9db; border-color: #b9c9db; color: #fff; }

.btn-piccolo { min-height: 28px; padding: 3px 10px; font-size: 13px; line-height: 18px; }
.btn-grande { min-height: 44px; padding: 10px 22px; font-size: 15px; }
.btn-largo { width: 100%; min-height: 44px; }
.btn-testo { background: transparent; border-color: transparent; color: var(--blu); box-shadow: none; }
.btn-testo:hover:not(:disabled) { background: var(--blu-chiaro); border-color: transparent; }
.btn-menu { min-width: 40px; padding: 4px 10px; font-size: 16px; letter-spacing: .08em; color: var(--testo-2); }
.btn-su-scuro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.btn-su-scuro:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: #fff; }
.btn-su-scuro:active:not(:disabled) { background: rgba(255, 255, 255, .22); }

/* Campi Fluent: bordo sottile, bordo inferiore più scuro, accento blu di 2 px al fuoco. */
input[type="text"], input[type="search"], input[type="password"], input[type="number"],
input[type="date"], input[type="email"], input[type="tel"], input:not([type]), select, textarea {
  width: 100%; min-height: 34px; padding: 6px 10px;
  background-color: var(--superficie); color: var(--testo);
  border: 1px solid var(--bordo-controllo); border-bottom-color: var(--bordo-basso);
  border-radius: var(--raggio-s);
  line-height: 20px;
  transition: border-color var(--durata), box-shadow var(--durata), background-color var(--durata);
}
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--bordo-forte); border-bottom-color: var(--testo-2);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blu);
  box-shadow: inset 0 -2px 0 var(--blu), 0 0 0 3px rgba(10, 77, 140, .13);
}
input:disabled, select:disabled, textarea:disabled { background-color: var(--superficie-3); color: #7c8593; }
::placeholder { color: var(--segnaposto); opacity: 1; }
textarea { resize: vertical; line-height: 20px; }
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px; cursor: pointer;
  background-image: var(--ic-giu); background-repeat: no-repeat;
  background-position: right 10px center; background-size: 12px 12px;
}
input[type="search"] {
  padding-left: 32px;
  background-image: var(--ic-cerca); background-repeat: no-repeat;
  background-position: 10px center; background-size: 15px 15px;
}
input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--blu); flex: none; cursor: pointer; }
input[type="checkbox"]:focus { box-shadow: none; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo-etichetta { font-weight: 600; font-size: 13px; line-height: 18px; color: var(--testo-2); }
.spunta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin: 2px 0 12px; }
.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
   ========================================================================== */

/* Solo in modalità demo: gialla piena, impossibile da non vedere; la rigatura "da cantiere"
   resta in una sola linguetta a sinistra, così accanto a un'interfaccia sobria non fa rumore. */
.fascia-demo {
  position: relative; z-index: 95; flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  min-height: var(--alt-demo); padding: 3px 16px 3px 42px;
  background:
    repeating-linear-gradient(-45deg, rgba(43, 33, 0, .62) 0 5px, transparent 5px 10px) left top / 26px 100% no-repeat,
    var(--giallo-demo);
  color: #2b2100;
  border-bottom: 1px solid #d6aa00;
  font-size: 13px; line-height: 18px;
}
.fascia-demo::before {        /* filo che chiude la linguetta rigata */
  content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px; background: rgba(43, 33, 0, .22);
}
.fascia-demo strong {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; letter-spacing: .02em;
}
.fascia-demo strong::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #2b2100; box-shadow: 0 0 0 3px rgba(43, 33, 0, .14);
}
.demo-scelta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.demo-scelta select {
  width: auto; min-height: 28px; padding-top: 3px; padding-bottom: 3px;
  min-width: 16rem; max-width: 70vw; font-size: 13px;
  border-color: rgba(70, 50, 0, .35); border-bottom-color: rgba(70, 50, 0, .6);
}

/* Barra superiore pulita, opaca e appena tinta come il materiale Mica di Windows 11,
   con il filo di marchio blu notte → blu Tecnica Industriale in cima. */
.testa {
  position: sticky; top: 0; z-index: 30; flex: none;
  display: flex; align-items: center; gap: 8px 16px;
  min-height: 51px; padding: 3px 12px 0 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border-bottom: 1px solid var(--bordo);
  box-shadow: 0 1px 2px rgba(16, 32, 56, .04);
}
.testa::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--blu-notte) 0%, var(--blu) 55%, var(--blu) 100%);
}
.testa-marchio { display: flex; align-items: center; gap: 10px; min-width: 0; }
.testa-marchio img { display: none; }          /* il logo è disegnato qui sotto, con le onde di marchio */
.testa-marchio::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 7px;
  background: var(--logo) center / contain no-repeat;
  box-shadow: 0 1px 2px rgba(10, 77, 140, .28);
}
.testa-nome { font: 650 16px/20px var(--carattere-titoli); color: var(--blu-notte); letter-spacing: -.01em; }
.testa-azienda {
  padding-left: 10px; border-left: 1px solid var(--bordo-controllo);
  color: var(--tenue); font-size: 13px; max-width: 24ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.testa-ora { color: var(--tenue); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Schede come la TabList di Fluent: testo + indicatore blu sotto. */
.schede-nav { display: flex; gap: 2px; margin-left: auto; align-self: stretch; }
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 14px;
  color: var(--tenue); text-decoration: none; font-weight: 600; font-size: 14px;
  border-radius: var(--raggio-s);
  white-space: nowrap;
  transition: color var(--durata), background-color var(--durata);
}
.tab::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: transparent;
  transition: background-color var(--durata);
}
.tab:hover { color: var(--testo); }
.tab:hover::after { background: var(--bordo-forte); }
.tab.attiva { color: var(--blu); }
.tab.attiva::after { background: var(--blu); }
.tab:focus-visible { outline-offset: -2px; }

/* Conteggi: pillola blu con cifre tabellari. Le parentesi restano nel testo per i lettori di
   schermo ("I miei (3)"), nascoste alla vista. Zero e liste di consultazione: pillola neutra. */
.conta {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px;
  background: var(--blu); color: #fff; border-radius: 999px;
  font: 600 12px/1 var(--carattere); font-variant-numeric: tabular-nums; letter-spacing: 0;
  vertical-align: 1px;
}
.conta.conta-zero, .conta.conta-neutro {
  background: var(--superficie-3); color: var(--testo-2); box-shadow: inset 0 0 0 1px var(--bordo);
}
.tab .conta { margin-left: 4px; }

.testa-persona {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 36px; padding: 3px 10px 3px 4px; margin-left: 4px;
  background: transparent; color: var(--testo);
  border: 1px solid transparent; border-radius: var(--raggio-s);
  font-weight: 600; white-space: nowrap; max-width: 15rem; overflow: hidden;
  transition: background-color var(--durata), border-color var(--durata);
}
.testa-persona::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--blu-chiaro-2) var(--ic-persona) center / 16px 16px no-repeat;
}
.testa-persona > span:first-child { overflow: hidden; text-overflow: ellipsis; }
/* freccina disegnata come quella delle tendine; ruota quando il menu è aperto */
.testa-persona > span[aria-hidden] {
  width: 12px; height: 12px; flex: none; font-size: 0;
  background: var(--ic-giu) center / 12px 12px no-repeat;
  transition: transform var(--durata);
}
.testa-persona[aria-expanded="true"] > span[aria-hidden] { transform: rotate(180deg); }
.testa-persona:hover, .testa-persona[aria-expanded="true"] { background: var(--superficie-3); border-color: var(--bordo); }
/* Storico, Prova questo PC e Amministrazione si aprono dal menu della persona: lì si vede dove si è. */
body[data-vista="storico"] #menu-persona, body[data-vista="prova"] #menu-persona, body[data-vista="admin"] #menu-persona {
  background: var(--blu-chiaro); border-color: #cddcee; color: var(--blu-notte);
}

/* ==========================================================================
   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: 36px; padding: 5px 16px;
  font-size: 13px; line-height: 18px;
}
/* "Disconnesso" e "NON INVIATO (n)": fascia grafite con triangolo ambra — mai rossa. */
.fascia-rossa {
  background: var(--grafite); color: #fff;
  box-shadow: inset 4px 0 0 var(--ambra-vivo);
  border-bottom: 1px solid #12161c;
}
.fascia-rossa strong {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.fascia-rossa strong::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: var(--ic-attenzione) center / contain no-repeat;
}
.fascia-rossa > span { color: #d9dee6; }
.fascia-rossa .btn { min-height: 26px; padding: 2px 12px; font-size: 13px; line-height: 18px; }
.fascia-blu {
  background: var(--blu-chiaro); color: var(--blu-notte);
  border-bottom: 1px solid #cddcee;
}
.fascia-blu::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-right: -6px;
  background: var(--ic-info) center / contain no-repeat;
}
.fascia-attiva {
  width: 100%; justify-content: center; gap: 8px;
  background: var(--blu-chiaro); color: var(--blu);
  border: 0; border-bottom: 1px solid #cddcee;
  font-weight: 600;
  transition: background-color var(--durata);
}
.fascia-attiva::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: var(--ic-campana) center / contain no-repeat;
}
.fascia-attiva:hover { background: var(--blu-chiaro-2); }
.fascia-attiva:focus-visible { outline-offset: -3px; }

/* 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: 16px; 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;
  min-height: 48px; padding: 8px 8px 8px 16px;
  background: var(--grafite); color: #fff;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--raggio); box-shadow: var(--ombra-28);
  animation: entra .14s ease-out;
}
.avviso-errore { box-shadow: inset 4px 0 0 var(--ambra-vivo), var(--ombra-28); padding-left: 14px; }
.avviso-errore::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-left: 4px;
  background: var(--ic-attenzione) center / contain no-repeat;
}
.avviso-testo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.avviso-azione {
  flex: none; min-height: 32px; padding: 4px 12px;
  background: transparent; color: #a8ccf5;
  border: 1px solid rgba(168, 204, 245, .7); border-radius: var(--raggio-s);
  font-weight: 600;
  transition: background-color var(--durata);
}
.avviso-azione:hover { background: rgba(168, 204, 245, .14); }
.avviso-x {
  flex: none; width: 32px; height: 32px; padding: 0;
  background: none; border: 0; color: #c3cad4; font-size: 20px; line-height: 1;
  border-radius: var(--raggio-s);
  transition: background-color var(--durata), color var(--durata);
}
.avviso-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.avviso-tempo {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: #a8ccf5;
  animation-name: scorre; animation-timing-function: linear; animation-fill-mode: forwards;
}

/* "Inviato a Marco — [Annulla] [Stesso chiamante per un altro]  9 s": blu notte di marchio. */
.invio-fascia {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  min-height: 52px; padding: 8px 14px 8px 12px;
  background: var(--blu-notte); color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--raggio); box-shadow: var(--ombra-28);
  animation: entra .14s ease-out;
}
.invio-testo { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.invio-testo::before {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: #1e6fb8 var(--ic-spunta-bianca) center / 14px 14px no-repeat;
}
.invio-secondi {
  min-width: 3.4em; padding: 2px 8px; text-align: center;
  font-variant-numeric: tabular-nums; color: #cfe2f7; font-weight: 600; font-size: 13px;
  background: rgba(255, 255, 255, .08); border-radius: 999px;
}
.invio-fascia .btn, .avviso .btn { min-height: 30px; }

/* Sulle superfici scure l'anello del fuoco è bianco. */
.avviso :focus-visible, .invio-fascia :focus-visible, .fascia-rossa :focus-visible { outline-color: #fff; }

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

/* ==========================================================================
   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; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(10, 77, 140, .11), transparent 62%),
    radial-gradient(900px 520px at 108% 112%, rgba(10, 77, 140, .07), transparent 60%),
    var(--canvas);
}
body.con-demo .schermo { top: var(--alt-demo); }
/* Sessione scaduta: l'accesso si apre sopra l'app, che resta com'era sotto. */
.schermo.sopra-app { background: rgba(12, 22, 38, .5); }
.schermo-box {
  position: relative; overflow: hidden;
  width: 100%; max-width: 420px; margin: auto;
  padding: 36px 32px 28px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-16);
}
/* Filetto di marchio: blu Tecnica Industriale con un tocco di arancione. */
.schermo-box::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--blu) 0, var(--blu) calc(100% - 64px), var(--arancio) calc(100% - 64px));
}
.schermo.sopra-app .schermo-box { box-shadow: var(--ombra-64); }
.schermo-box h1 { margin-bottom: 16px; font-size: 22px; line-height: 28px; }
.schermo-marchio {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--divisore);
}
.schermo-marchio img { display: none; }        /* stesso logo della barra, disegnato qui sotto */
.schermo-marchio::before {
  content: ""; flex: none; width: 46px; height: 46px; border-radius: 11px;
  background: var(--logo) center / contain no-repeat;
  box-shadow: 0 2px 6px rgba(10, 77, 140, .26);
}
.schermo-marchio h1 { margin: 0; font-size: 20px; line-height: 26px; color: var(--blu-notte); }
.schermo-marchio .tenue { font-size: 13px; }
/* Cambio password obbligatorio: stessa testata dell'accesso (logo e titolo affiancati, chiusi da un filo). */
#modulo-password > h1 {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--divisore);
  font-size: 20px; line-height: 26px; color: var(--blu-notte);
}
#modulo-password > h1::before {
  content: ""; flex: none; width: 46px; height: 46px; border-radius: 11px;
  background: var(--logo) center / contain no-repeat;
  box-shadow: 0 2px 6px rgba(10, 77, 140, .26);
}
/* Nota informativa (non un errore): accesso, e nei dialoghi (.nota-info), es. "le email non sono ancora attive". */
.schermo-nota, .nota-info {
  display: flex; gap: 8px;
  padding: 10px 12px; margin-bottom: 16px;
  background: var(--blu-chiaro); color: var(--blu-notte);
  border: 1px solid #cddcee; border-radius: var(--raggio-s);
  font-size: 13px; line-height: 18px;
}
.schermo-nota::before, .nota-info::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px;
  background: var(--ic-info) center / contain no-repeat;
}
.schermo-errore, .dialogo-errore, .modulo-errore {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; margin: 4px 0 12px;
  background: var(--ambra-chiaro); color: var(--ambra);
  border: 1px solid var(--ambra-bordo); border-radius: var(--raggio-s);
  font-weight: 600; font-size: 13px; line-height: 18px;
}
.schermo-errore::before, .dialogo-errore::before, .modulo-errore::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px;
  background: var(--ic-attenzione-ambra) center / contain no-repeat;
}
.schermo-box .btn-largo { min-height: 44px; margin-top: 4px; font-size: 15px; }
.schermo-box .btn-testo { width: 100%; margin-top: 8px; }

/* Pulsanti "Entra come…" della dimostrazione: un pannello giallo tenue, legato alla fascia. */
.accesso-demo {
  margin-top: 22px; padding: 14px;
  background: #fffbe8; border: 1px solid #f0dd94; border-radius: var(--raggio);
}
.accesso-demo-titolo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; margin-bottom: 10px; color: #3d3000;
}
.accesso-demo-titolo::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #2b2100; box-shadow: 0 0 0 3px rgba(43, 33, 0, .12);
}
.accesso-demo-pulsanti { display: flex; flex-direction: column; gap: 6px; }
.btn-demo {
  justify-content: flex-start; width: 100%; min-height: 34px; padding: 6px 10px;
  text-align: left; white-space: normal;
  background: var(--superficie); border-color: #e7d697; color: var(--testo);
  font-weight: 500; font-size: 13px; line-height: 17px;
}
.btn-demo:hover:not(:disabled) { background: #fff6cc; border-color: #d6b53c; }

/* Con la dimostrazione, sul PC: modulo a sinistra, persone di prova a destra. */
@media (min-width: 900px) {
  #modulo-accesso:has(> #accesso-demo:not([hidden])) {
    max-width: 900px;
    display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 32px;
    grid-template-rows: repeat(7, auto) 1fr; align-content: start;
  }
  #modulo-accesso:has(> #accesso-demo:not([hidden])) > * { grid-column: 1; }
  #modulo-accesso:has(> #accesso-demo:not([hidden])) > #accesso-demo {
    grid-column: 2; grid-row: 1 / -1; margin: 0; align-self: start;
  }
  #modulo-accesso:has(> #accesso-demo:not([hidden])) .accesso-demo-pulsanti {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }
}

.caricamento {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 50vh; padding: 24px;
  color: var(--tenue); font-size: 14px; text-align: center;
}
.caricamento::before {
  content: ""; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--blu-chiaro-2); border-top-color: var(--blu);
  animation: gira .8s linear infinite;
}

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

.velo {
  position: fixed; inset: 0; z-index: 85;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 9vh 16px 16px; overflow-y: auto;
  background: rgba(12, 22, 38, .42);
  animation: appare .12s ease-out;
}
/* La fascia demo (z 95) resta sopra il velo: il dialogo parte sotto di lei, titolo sempre visibile. */
body.con-demo .velo { padding-top: max(9vh, calc(var(--alt-demo) + 16px)); }
/* Dialoghi strutturati: testa con filo, corpo, piede grigio chiaro con i pulsanti a destra. */
.dialogo {
  width: 100%; max-width: 520px;
  background: var(--superficie);
  border: 1px solid rgba(16, 32, 56, .08); border-radius: var(--raggio);
  box-shadow: var(--ombra-64);
  animation: entra .14s ease-out;
}
.dialogo-largo { max-width: 720px; }
.dialogo:focus { outline: none; }
.dialogo-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 10px 12px 10px 24px;
  border-bottom: 1px solid var(--bordo);
}
.dialogo-titolo { font: 600 18px/24px var(--carattere-titoli); color: var(--testo); }
.dialogo-x {
  width: 32px; height: 32px; padding: 0; flex: none;
  background: none; border: 0; border-radius: var(--raggio-s);
  font-size: 22px; line-height: 1; color: var(--tenue);
  transition: background-color var(--durata), color var(--durata);
}
.dialogo-x:hover { background: var(--superficie-3); color: var(--testo); }
.dialogo-corpo { padding: 18px 24px 6px; max-height: 66vh; overflow-y: auto; }
.dialogo-corpo > p.tenue:first-child { margin-bottom: 14px; }
.dialogo:has(> .dialogo-piede[hidden]) .dialogo-corpo { padding-bottom: 22px; }
.dialogo-errore { margin: 0 24px 12px; }
.dialogo-piede {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  padding: 14px 24px; margin-top: 12px;
  background: var(--superficie-2); border-top: 1px solid var(--bordo);
  border-radius: 0 0 var(--raggio) var(--raggio);
}
.dialogo-piede .btn { min-width: 96px; }
/* Con tre pulsanti il primo è un'azione a sé ("È presente"): sta a sinistra, staccato da Annulla e Salva. */
.dialogo-piede > .btn:first-child:nth-last-child(3) { margin-right: auto; }
/* Nei dialoghi ogni spunta sta sulla sua riga (Risponde al telefono / Amministratore). */
.dialogo-corpo > .spunta { display: flex; width: fit-content; margin: 4px 0 12px; }
.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 24px/1.3 var(--mono); letter-spacing: .08em;
  padding: 14px; margin: 4px 0 12px; text-align: center; user-select: all;
  background: var(--superficie-2); border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-s);
}
.elenco-coda { margin: 8px 0 0; padding-left: 20px; }
.elenco-coda li { margin-bottom: 6px; }

/* Menu ⋯ e menu della persona: il Menu di Fluent. */
.menu-tendina {
  position: fixed; z-index: 90;
  min-width: 220px; max-width: min(340px, calc(100vw - 16px));
  padding: 4px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-16);
  animation: appare .1s ease-out;
}
.menu-voce {
  display: flex; align-items: center; width: 100%; min-height: 36px; padding: 7px 12px;
  background: none; border: 0; border-radius: var(--raggio-xs);
  text-align: left; font-weight: 400; color: var(--testo);
  transition: background-color var(--durata);
}
.menu-voce:hover, .menu-voce:focus { background: var(--superficie-3); outline: none; }
.menu-voce:focus-visible { outline: 2px solid var(--fuoco); outline-offset: -2px; }
/* "Esci" in un gruppo a sé, separato da un filo */
.menu-voce-esci { position: relative; margin-top: 9px; }
.menu-voce-esci::before {
  content: ""; position: absolute; left: -4px; right: -4px; top: -5px; height: 1px;
  background: var(--bordo);
}

/* Suggerimenti della rubrica: circa 4 voci visibili, le altre scorrono (coprono poco le righe sotto). */
.tendina {
  position: fixed; z-index: 80;
  max-height: 216px; max-width: calc(100vw - 8px); overflow-y: auto;
  margin: 0; padding: 4px; list-style: none;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-16);
}
.tendina-voce {
  position: relative;
  padding: 6px 10px 6px 12px; cursor: pointer;
  border-radius: var(--raggio-xs);
  transition: background-color var(--durata);
}
.tendina-voce + .tendina-voce { margin-top: 1px; }
.tendina-voce:hover { background: var(--superficie-2); }
.tendina-voce.attiva { background: var(--blu-chiaro); }
.tendina-voce.attiva::before {
  content: ""; position: absolute; left: 2px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 2px; background: var(--blu);
}
/* colonne di larghezza fissa: nome, azienda e numero allineati fra una voce e l'altra */
.voce-rubrica {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 8.5rem; gap: 0 12px; align-items: baseline;
}
.voce-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce-azienda { color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce-tel { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--testo-2); text-align: right; }
.voce-quando { grid-column: 1 / -1; color: var(--tenue); font-size: 12px; line-height: 16px; }

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

.principale { display: block; }

/* Piede di pagina: © e dati del cliente, "created by". Una riga discreta; sul telefono va a capo
   tra una voce e l'altra, mai a metà. Nascosto finché il programma non è avviato. */
.piede {
  flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px;
  padding: 10px 16px 14px; font-size: 12px; line-height: 16px; color: var(--tenue); text-align: center;
}
.piede > span { white-space: nowrap; }
.piede-sep { color: var(--bordo-forte); }
.piede a { color: var(--blu); font-weight: 600; text-decoration: none; }
.piede a:hover { text-decoration: underline; }
#principale[hidden] ~ .piede-app { display: none; }
.piede-schermo { width: 100%; max-width: 960px; padding-bottom: 0; }
.schermo > .schermo-box { flex: none; }   /* in colonna con il piede: il riquadro non si accorcia, scorre la schermata */
.vista-nuovo {
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "per" "modulo" "chiamante" "liste";
  padding: 12px 16px 16px;
}
.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: "tile" Fluent in ordine fisso, numero 1–9. */
.per-chi-testa { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }   /* spazio per la ✓ della persona scelta */
.per-chi-testa h2 { font: 600 14px/20px var(--carattere); color: var(--testo); }
.per-chi-testa .tenue { font-size: 12px; line-height: 16px; }
.persone { display: flex; flex-wrap: wrap; gap: 6px; }
.persone::after { content: ""; flex: 1000 1 0; min-width: 0; }   /* l'ultima riga non stira i pulsanti */
.persone:focus { outline: none; }
.persone:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 4px; border-radius: var(--raggio); }
/* larga quanto il nome: niente nomi tagliati anche con 20+ persone */
.persona-box { position: relative; flex: 1 1 auto; max-width: 250px; min-width: 96px; display: flex; }
.persona-box:has(> .persona.assente) { max-width: 340px; }
.persona {
  position: relative;
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 0;
  padding: 4px 10px; text-align: left;
  background: var(--superficie); color: var(--testo);
  border: 1px solid var(--bordo-controllo); border-radius: var(--raggio);
  box-shadow: var(--ombra-1);
  line-height: 18px;
  transition: background-color var(--durata), border-color var(--durata), box-shadow var(--durata), color var(--durata);
}
.persona.con-menu { padding-right: 36px; }
.persona:hover { border-color: var(--blu-bordo); background: var(--blu-chiaro); }
.persona:active { background: var(--blu-chiaro-2); box-shadow: none; }
.persona-riga { display: flex; flex: 1 0 100%; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.persona-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--raggio-xs);
  background: var(--superficie-3); color: var(--testo-2);
  border: 1px solid var(--bordo);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.persona-nome { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-info {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  font-size: 12px; line-height: 16px; color: var(--grigio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.persona-riga + .persona-info { padding-left: 28px; }      /* sotto il nome, non sotto il numero */
.persona-nota::before { content: "\00a0·\00a0"; }
.scelta-persone .persona { flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: nowrap; }
.scelta-persone .persona-info { padding-left: 0; }
.scelta-persone .persona-nota::before { content: none; }

/* Assenti: grigi, con data e nota, ma cliccabili. */
.persona.assente {
  background: var(--grigio-sfondo); border-color: var(--bordo); color: var(--grigio);
  box-shadow: none;
}
.persona.assente .persona-nome { font-weight: 500; }
.persona.assente .persona-num { background: #e3e7ec; border-color: #d6dbe2; color: var(--grigio); }
.persona.assente:hover { border-color: var(--bordo-forte); background: #e8ebef; }

/* Scelta: blu pieno + spunta nell'angolo (non solo colore). */
.persona.scelta, .persona.scelta:hover {
  background: var(--blu); border-color: var(--blu); color: #fff;
  box-shadow: 0 2px 6px rgba(10, 77, 140, .32);
}
.persona.scelta .persona-num { background: #fff; border-color: #fff; color: var(--blu); }
.persona.scelta .persona-info { color: #d7e5f5; }
.persona.scelta .persona-nome { font-weight: 600; }
.persona-box > .persona.scelta::after {
  content: ""; position: absolute; left: -6px; top: -6px; z-index: 1;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blu-notte) var(--ic-spunta-bianca) center / 12px 12px no-repeat;
  box-shadow: 0 0 0 2px var(--canvas);
}
/* Di solito: cornice tratteggiata DENTRO il pulsante, solo un suggerimento. L'anello del fuoco resta
   l'unico segno pieno fuori dal pulsante, e la ✓ della persona scelta accanto non la tocca. */
.persona.di-solito { outline: 2px dashed var(--blu); outline-offset: -5px; }
.persona.di-solito.scelta { outline-color: rgba(255, 255, 255, .8); }
.persona.di-solito:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }

/* ⋯ sul pulsante della persona (chi risponde al telefono): stessa forma orizzontale del ⋯ delle
   schede, area cliccabile 32×32 sul PC (44×44 sullo smartphone). */
.persona-menu {
  position: absolute; top: 50%; right: 3px; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--raggio-s);
  color: var(--testo-2); font-size: 16px; line-height: 1; letter-spacing: 0;
  opacity: .7;
  transition: background-color var(--durata), color var(--durata), opacity var(--durata);
}
.persona-box:hover .persona-menu, .persona-box:focus-within .persona-menu, .persona-menu[aria-expanded="true"] { opacity: 1; }
.persona-box .persona.scelta + .persona-menu { color: #fff; opacity: .9; }
.persona-menu:hover, .persona-menu[aria-expanded="true"] { background: rgba(16, 32, 56, .08); color: var(--testo); }
.persona-box .persona.scelta + .persona-menu:hover,
.persona-box .persona.scelta + .persona-menu[aria-expanded="true"] { background: rgba(255, 255, 255, .18); color: #fff; }
.persona-menu:focus-visible { outline-offset: 0; }
/* sul blu pieno della persona scelta l'anello scuro non si vedrebbe (1,7:1): bianco, dentro (8,6:1) */
.persona-box .persona.scelta + .persona-menu:focus-visible { outline-color: #fff; outline-offset: -3px; }

/* Modulo */
.nv-modulo {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-2);
}
.campo-linea { font-weight: 600; font-size: 13px; line-height: 16px; color: var(--testo-2); }
.riga-campi {
  display: grid; align-items: center; gap: 8px 12px;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto minmax(0, 1fr);
}
.riga-numero { grid-template-columns: 9.5rem 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; display: inline-flex; align-items: center; gap: 6px;
  color: var(--ambra); font-weight: 600; font-size: 12px; white-space: nowrap;
}
.manca::before {
  content: ""; width: 14px; height: 14px;
  background: var(--ic-attenzione-ambra) center / contain no-repeat;
}
.spunta-urgente {
  margin: 0; padding: 0 14px 0 12px; min-height: 34px; gap: 8px;
  background: var(--superficie);
  border: 1px solid var(--bordo-controllo); border-radius: var(--raggio-s);
  font-weight: 600; letter-spacing: .01em;
  box-shadow: var(--ombra-1);
  transition: background-color var(--durata), border-color var(--durata), color var(--durata);
}
.spunta-urgente:hover { background: var(--superficie-2); border-color: var(--bordo-forte); }
.spunta-urgente input { accent-color: var(--rosso); }
.spunta-urgente.attiva, .spunta-urgente.attiva:hover,
.spunta-urgente:has(input:checked), .spunta-urgente:has(input:checked):hover {
  background: var(--rosso); border-color: var(--rosso); color: #fff;
  box-shadow: 0 1px 3px rgba(196, 43, 28, .35);
}
.spunta-urgente.attiva input, .spunta-urgente:has(input:checked) input { accent-color: var(--rosso-premuto); }
.dialogo-corpo .spunta-urgente { margin: 0 0 14px; min-height: 36px; }
.spunta-urgente:focus-within:has(input:focus-visible) { outline: 2px solid var(--fuoco); outline-offset: 2px; }
.spunta-urgente input:focus-visible { outline: none; }
.riga-frasi { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.frasi { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-frase {
  min-height: 26px; padding: 2px 12px;
  background: var(--superficie-2); border-color: var(--bordo); color: var(--testo);
  font-weight: 500; font-size: 13px; line-height: 18px;
  border-radius: 999px; box-shadow: none;
}
.btn-frase:hover:not(:disabled) { background: var(--blu-chiaro); border-color: var(--blu-bordo); color: var(--blu); }
.riga-testo { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; }
.riga-testo .campo-linea { padding-top: 9px; }
.riga-testo textarea { min-height: 54px; }
.btn-invia { min-height: 54px; padding: 8px 18px 8px 22px; font-size: 15px; }
.modulo-errore { margin: 0; }
.chiamata-arrivo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 4px 6px 4px 12px;
  background: var(--blu-chiaro); color: var(--blu-notte);
  border: 1px solid #cddcee; border-radius: var(--raggio-s);
  font-weight: 600;
}
.chiamata-arrivo > span { flex: 1 1 auto; }
/* × come quella dei dialoghi: senza cornice, non compete con "Usa" */
.chiamata-arrivo [data-chiudi-tel] {
  min-width: 30px; border-color: transparent; background: transparent; box-shadow: none;
  font-size: 16px; color: var(--tenue);
}

/* Riquadro "Questo chiamante" */
.riquadro {
  position: relative; min-height: 120px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-2);
}
.riquadro-dentro { padding: 12px 14px; overflow-y: auto; max-height: 340px; }
.riquadro h2 {
  display: flex; align-items: center; gap: 8px;
  font: 600 14px/20px var(--carattere); margin-bottom: 8px;
}
.riquadro h2::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: var(--ic-contatto) center / contain no-repeat;
}
.riquadro h3 {
  font-size: 11px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tenue); margin: 14px 0 4px;
}
.riquadro p { font-size: 13px; line-height: 18px; }
.ch-msg {
  padding: 8px 10px; margin-bottom: 8px;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  font-size: 13px; line-height: 18px;
}
.ch-msg.urgente { box-shadow: inset 3px 0 0 var(--rosso); padding-left: 12px; }
/* testo in linea (non flex): "APERTO per Marco B., oggi 14:47" senza spazio prima della virgola */
.ch-riga { display: block; }
.ch-riga .urgente-tag { margin-right: 6px; }
.ch-chi { font-weight: 400; color: var(--testo); margin-top: 2px; }   /* grassetto = solo "non ancora visto" */
.ch-testo { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--testo); margin: 2px 0; max-height: 3.4em; overflow: hidden; }
.ch-stato { color: var(--tenue); font-size: 12.5px; line-height: 17px; }
.btn-har { margin-top: 8px; min-height: 30px; padding: 4px 14px; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.ch-recente {
  display: flex; flex-direction: column;
  padding: 6px 0; border-bottom: 1px solid var(--divisore);
  font-size: 13px; line-height: 18px;
}
.ch-recente:last-child { border-bottom: 0; }
.ch-fatto { color: var(--tenue); }

/* ==========================================================================
   8. LISTE IN BASSO: "APERTI DA OLTRE 2 ORE" E "APERTI"
   (il titolo della prima segue la soglia di lib/config.php: lo scrive il server)
   ========================================================================== */

.nv-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lista-box {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-2);
}
.lista-testa {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 4px 8px 4px 14px;
  border-bottom: 1px solid var(--bordo);
}
.lista-testa h2 { display: flex; align-items: center; gap: 8px; font: 600 14px/20px var(--carattere); }
.lista-testa h2::before { content: ""; flex: none; width: 16px; height: 16px; background: center / contain no-repeat; }
.lista-oltre .lista-testa h2::before { background-image: var(--ic-orologio); }
.lista-aperti .lista-testa h2::before { background-image: var(--ic-vassoio); }
/* Titolo e, sotto, la riga piccola "urgenti: dopo 15 minuti" (allineata al testo, non all'icona). */
.lista-titoli { min-width: 0; }
/* Titolo (18) + riga (14) + 3 + 3 + bordo: la testa resta alta 40 px come quella di "Aperti", le due liste
   cominciano alla stessa altezza. La pillola (20 px) non allarga la riga del titolo. */
.lista-oltre .lista-testa { padding-top: 3px; padding-bottom: 3px; }
.lista-titoli h2 { line-height: 18px; }
.lista-titoli h2 .conta { margin-top: -1px; margin-bottom: -1px; }
.lista-nota { margin: 0; padding-left: 24px; font-size: 12px; line-height: 14px; color: var(--tenue); }
.lista-cerca { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--testo-2); }
/* Ordina (e Cerca): a destra nella testata; se lo spazio non basta vanno sotto il titolo. */
.lista-testa { flex-wrap: wrap; }
.lista-comandi { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; margin-left: auto; }
.lista-ordina { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--testo-2); }
.lista-ordina select { min-height: 28px; padding: 3px 28px 3px 8px; font-size: 13px; }
/* Busta chiusa = non ancora visto dal destinatario; busta aperta = visto (titolo: da quando). */
.icona-visto { flex: none; display: inline-block; width: 16px; height: 16px; background: center / contain no-repeat; }
.icona-visto.is-non-visto { background-image: var(--ic-busta-chiusa); }
.icona-visto.is-visto { background-image: var(--ic-busta-aperta); }
.legenda-visto { display: inline-flex; align-items: center; gap: 6px; }
.legenda-visto .icona-visto + .icona-visto { margin-left: 8px; }
.lista-cerca input { width: 15rem; min-height: 28px; padding-top: 3px; padding-bottom: 3px; font-size: 13px; }
.lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: 420px; }

.riga {
  padding: 6px 12px 6px 14px;
  border-bottom: 1px solid var(--divisore);
  transition: background-color var(--durata);
}
.riga:last-child { border-bottom: 0; }
.riga:hover { background: #f6f8fb; }
.riga.urgente { box-shadow: inset 3px 0 0 var(--rosso); }
/* L'ora sta nel rientro di 80 px: se la riga va a capo, il seguito si allinea sotto il chiamante
   (come la riga dello stato) e non sotto l'ora. */
.riga-linea {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0;
  padding-left: 98px;
  white-space: nowrap; overflow: hidden;
}
.riga-quando { flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 90px; margin-left: -98px; color: var(--tenue); font-variant-numeric: tabular-nums; font-size: 13px; }
.riga-linea .urgente-tag { margin-right: 0; height: 18px; line-height: 18px; font-size: 10px; padding: 0 6px; vertical-align: 0; align-self: center; }
.riga-chi { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--testo); }
/* Grassetto = non ancora visto (nient'altro è in grassetto nella riga). */
.riga.non-visto .riga-chi { font-weight: 700; }
.riga-dest { flex: none; color: var(--testo-2); }
/* "(assente fino al…)": se non sta sulla riga va a capo intero (la data è l'informazione utile);
   il nome del chiamante resta leggibile. */
.riga-linea .grigio { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.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: 13px; line-height: 18px; min-width: 0; padding-left: 98px; }
.riga-azioni { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.riga-azioni .btn-piccolo {
  min-height: 26px; padding: 2px 9px; font-size: 12px; line-height: 16px;
  border-color: var(--bordo); color: var(--testo-2); box-shadow: none;
}
.riga-azioni .btn-piccolo:hover:not(:disabled) { border-color: var(--bordo-forte); color: var(--testo); background: var(--superficie-2); }
/* ✓ Fatto è l'azione principale della riga: colore primario, senza riempire 12 righe di blu. */
.riga-azioni [data-az="fatto"] { color: var(--blu); border-color: var(--blu-bordo); background: var(--blu-chiaro); }
.riga-azioni [data-az="fatto"]:hover:not(:disabled) { color: #fff; background: var(--blu); border-color: var(--blu); }
.riga-azioni .btn:focus-visible { outline-offset: 1px; }    /* l'anello non tocca il pulsante accanto (4 px) */
/* Solo con il mouse: le azioni secondarie restano senza cornice finché la riga non è sotto il mouse o
   non ha il fuoco. Meno rumore in 12 righe × 4 pulsanti, e ✓ Fatto spicca. Al tocco non cambia nulla. */
@media (hover: hover) and (pointer: fine) {
  .riga .riga-azioni .btn-piccolo:not([data-az="fatto"]) { border-color: transparent; background: transparent; }
  .riga:hover .riga-azioni .btn-piccolo:not([data-az="fatto"]),
  .riga:focus-within .riga-azioni .btn-piccolo:not([data-az="fatto"]) { border-color: var(--bordo); background: var(--superficie); }
  .riga .riga-azioni .btn-piccolo:not([data-az="fatto"]):hover:not(:disabled) { border-color: var(--bordo-forte); background: var(--superficie-2); color: var(--testo); }
}
/* 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: 8px;
  margin-top: 10px; padding: 10px 12px;
  background: var(--blu-chiaro); border: 1px solid var(--blu-bordo); border-radius: var(--raggio-s);
}
.nota-fatto-titolo { font-weight: 700; color: var(--blu-notte); }
.nota-fatto input { flex: 1 1 240px; width: auto; min-height: 32px; }
.nota-fatto .tenue { flex-basis: 100%; font-size: 12px; line-height: 16px; }
.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; padding-top: 20px; }
}
/* liste affiancate già da 1000 px: impilate, a 1000–1099 px resterebbero troppo basse */
@media (min-width: 1000px) {
  .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"] > .piede-app { padding-top: 0; padding-bottom: 6px; }
  body[data-vista="nuovo"] .vista-nuovo.con-liste {
    height: 100%; min-height: 0;
    grid-template-rows: auto auto minmax(96px, 1fr);
    padding-bottom: 12px;
  }
  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; }
}
/* Finestre basse (browser reale su schermo 1366×768: circa 657–690 px utili): densità compatta,
   una riga in più nelle liste. In 1366×768 pieno non cambia nulla. */
@media (min-width: 1000px) and (max-height: 720px) {
  .vista-nuovo { gap: 8px; padding-top: 8px; }
  .per-chi-testa { margin-bottom: 6px; }
  .persona { min-height: 34px; padding-block: 2px; }
  .nv-modulo { padding: 8px 14px; gap: 6px; }
  .riga-testo textarea, .btn-invia { min-height: 44px; }
  .fascia-attiva { min-height: 30px; padding-block: 3px; }
}
/* 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,
body[data-vista="nuovo"]:has(#avvisi:not(:empty)) .lista { padding-bottom: 72px; }
/* Lo stesso per gli avvisi a comparsa sopra le ultime schede delle altre viste. */
body:has(#avvisi:not(:empty)) .pagina, body:has(#invii:not(:empty)) .pagina { padding-bottom: 160px; }

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

.pagina { max-width: 940px; margin: 0 auto; padding: 24px 24px 120px; }
.pagina-larga { max-width: 1440px; }
.pagina > h1 { margin-bottom: 18px; }
/* "← Torna a…" sopra il titolo di Storico, Prova questo PC e Amministrazione */
.btn-indietro { min-height: 32px; margin: -10px 0 6px -10px; padding: 4px 10px; font-size: 14px; font-weight: 600; }
.miei-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 16px; }
.miei-testa .tenue { font-size: 13px; }
.miei-testa h1 .conta { min-width: 28px; height: 24px; padding: 0 8px; margin-left: 6px; font-size: 14px; vertical-align: 3px; }
.lista-testa h2 .conta { margin-left: -2px; }
.fatti-titolo .conta { margin-left: 6px; }
.schede { display: flex; flex-direction: column; gap: 10px; }
/* Sugli schermi larghi gli avvisi di I miei stanno a destra: non coprono i pulsanti delle schede,
   che sono a sinistra nella colonna da 940 px. */
@media (min-width: 1200px) {
  body[data-vista="miei"] .basso { left: auto; right: 24px; transform: none; width: min(440px, calc(100vw - 48px)); }
}

.scheda {
  position: relative;
  padding: 16px 20px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-2);
  transition: box-shadow var(--durata), border-color var(--durata);
}
.scheda:hover { box-shadow: var(--ombra-4); }
.scheda.urgente { box-shadow: inset 4px 0 0 var(--rosso), var(--ombra-2); }
.scheda.urgente:hover { box-shadow: inset 4px 0 0 var(--rosso), var(--ombra-4); }
/* 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; border-color: var(--blu-bordo); box-shadow: 0 0 0 3px var(--blu-chiaro-2), var(--ombra-4); }
@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: center; gap: 4px 10px; min-width: 0; }
.scheda-chi .urgente-tag { margin-right: 0; }
.scheda-nome { font: 400 16px/22px var(--carattere-titoli); color: var(--testo); overflow-wrap: anywhere; }
.scheda-chiamate {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  background: var(--blu-chiaro); color: var(--blu); border: 1px solid #cddcee; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.scheda-testo { margin-top: 8px; font-size: 15px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--testo); }
.scheda-note {
  margin: 8px 0 0; padding: 2px 0 2px 12px; list-style: none;
  border-left: 2px solid var(--blu-bordo); font-size: 13px; line-height: 19px;
}
.scheda-note li { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.scheda-info { margin-top: 8px; color: var(--tenue); font-size: 13px; line-height: 18px; }
.scheda-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scheda-azioni .btn { min-height: 36px; }
.scheda-azioni .btn-primario { min-width: 112px; }

/* Numero: sul PC un clic lo copia; sullo smartphone è un pulsante "chiama" (tel:). */
.numero { flex: none; }
.numero-pc {
  display: inline-flex; align-items: center;
  padding: 4px 8px; margin: -4px -8px 0 0;
  background: none; border: 1px solid transparent; border-radius: var(--raggio-s);
  font: 600 17px/22px var(--carattere-titoli); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em;
  color: var(--testo);
  transition: background-color var(--durata), border-color var(--durata), color var(--durata);
}
.numero-pc:hover { border-color: var(--blu-bordo); background: var(--blu-chiaro); color: var(--blu-notte); }
.numero-pc::after {
  content: "Copia"; display: inline-flex; align-items: center;
  margin-left: 10px; padding-left: 18px;
  background: var(--ic-copia) left center / 14px 14px no-repeat;
  font: 600 12px/16px var(--carattere); color: var(--tenue); letter-spacing: 0;
}
.numero-tel { display: none; }
.numero-manca {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--ambra); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.numero-manca::before { content: ""; width: 14px; height: 14px; background: var(--ic-attenzione-ambra) center / contain no-repeat; }

.fatti-oggi { margin-top: 28px; }
.fatti-titolo {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 6px 10px; margin-left: -10px;
  background: none; border: 0; border-radius: var(--raggio-s);
  font-weight: 600; font-size: 15px; color: var(--testo);
  transition: background-color var(--durata);
}
.fatti-titolo:hover { background: var(--superficie-3); }
.fatti-titolo:focus-visible { outline-offset: -2px; }   /* sullo smartphone l'anello non tocca il bordo dello schermo */
.fatti-elenco {
  margin: 8px 0 0; padding: 0; list-style: none;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-1); overflow: hidden;
}
.fatto-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--divisore);
}
.fatto-riga:last-child { border-bottom: 0; }
.fatto-testo { min-width: 0; overflow-wrap: anywhere; }
.fatto-chi { font-weight: 400; color: var(--testo); }   /* già fatti: niente grassetto */

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

.cerca-riga { margin-bottom: 18px; }
.cerca-riga input {
  font-size: 15px; min-height: 42px; max-width: 560px;
  padding-left: 38px; background-position: 13px center; background-size: 16px 16px;
  box-shadow: var(--ombra-1);
}
.cerca-riga input:focus { box-shadow: inset 0 -2px 0 var(--blu), 0 0 0 3px rgba(10, 77, 140, .13); }
.storico-gruppo {
  margin-bottom: 12px; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-2);
}
.storico-gruppo h2 {
  padding: 11px 16px; margin: 0;
  background: var(--superficie-2); border-bottom: 1px solid var(--bordo);
  font-size: 15px; line-height: 20px; overflow-wrap: anywhere;
}
.storico-elenco { margin: 0; padding: 0; list-style: none; }
.storico-riga { padding: 10px 16px; border-top: 1px solid var(--divisore); }
.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: center; gap: 2px 4px; font-weight: 400; font-size: 13px; color: var(--testo-2); }   /* metadati: niente grassetto (il grassetto vuol dire "non visto") */
.storico-testa .urgente-tag { margin-right: 4px; }
.storico-testo { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--testo); }
.storico-riga .riga-azioni { margin: 8px 0 0; }
.storico-riga .riga-azioni .btn-piccolo { min-height: 28px; }
.storico-cron {
  margin-top: 10px; padding: 10px 14px;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
}

.cron-testa { font-weight: 600; margin-bottom: 10px; }
.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 12px;
  padding: 6px 0; border-bottom: 1px solid var(--divisore); font-size: 13px; line-height: 18px;
}
.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: 600; }
.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 20px; padding: 0; list-style: none;
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-2); overflow: hidden;
}
.prova-riga {
  display: flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 10px 16px;
  border-bottom: 1px solid var(--divisore);
}
.prova-riga:last-child { border-bottom: 0; }
.prova-segno {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-weight: 700; font-size: 14px; line-height: 1;
}
/* Segni disegnati (lo span è aria-hidden): la ✗ di ripiego dei caratteri di sistema stonava con la ✓. */
.prova-riga.ok .prova-segno { color: transparent; background: var(--verde) var(--ic-spunta-bianca) center / 16px 16px no-repeat; }
/* ✗ in ambra (non rossa: il rosso è solo per Urgente); la parola "no" è letta dagli screen reader. */
.prova-riga.ko .prova-segno {
  color: transparent; border: 1.5px solid #d9a441;
  background: var(--ambra-chiaro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237a4300' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4.5 4.5 7 7m0-7-7 7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.prova-testo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }      /* un indirizzo email lungo va a capo */
.prova-testo b { font-weight: 600; }
.prova-testo .tenue { font-size: 13px; line-height: 18px; margin-top: 1px; }
.passi { margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.passi li {
  counter-increment: passo; position: relative;
  margin-bottom: 8px; padding: 14px 16px 14px 56px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-1); line-height: 21px;
}
.passi li::before {
  content: counter(passo); position: absolute; left: 16px; top: 13px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blu-chiaro); color: var(--blu); border: 1px solid #cddcee;
  font-weight: 700; font-size: 13px;
}
.passi li b { color: var(--testo); }
.pagina > h2 { margin: 26px 0 12px; }

.adm-sezione {
  margin-bottom: 16px; padding: 18px 20px 20px;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-2);
}
.adm-sezione > h2 { margin-bottom: 12px; }
.adm-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tabella-scorri { overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--raggio-s); }
.tabella { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.tabella th, .tabella td { padding: 8px 10px; border-bottom: 1px solid var(--divisore); text-align: left; vertical-align: middle; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella th {
  font-size: 12px; color: var(--tenue); font-weight: 600; white-space: nowrap;
  background: var(--superficie-2); border-bottom-color: var(--bordo);
}
.tabella tbody tr { transition: background-color var(--durata); }
.tabella tbody tr:hover { background: #f6f8fb; }
.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; min-height: 28px; box-shadow: none; }
/* Solo con il mouse: pulsanti senza cornice finché la riga non è sotto il mouse o non ha il fuoco
   (anche quelli disattivati, che altrimenti resterebbero gli unici riquadri grigi). */
@media (hover: hover) and (pointer: fine) {
  .tabella-persone .adm-azioni-box .btn { border-color: transparent; background: transparent; }
  .tabella-persone tbody tr:hover .adm-azioni-box .btn:not(:disabled),
  .tabella-persone tbody tr:focus-within .adm-azioni-box .btn:not(:disabled) { border-color: var(--bordo-controllo); background: var(--superficie); }
  .tabella-persone tbody tr .adm-azioni-box .btn:hover:not(:disabled) { border-color: var(--bordo-forte); background: var(--superficie-2); }
}
.tabella-persone th.stretta { white-space: normal; line-height: 15px; min-width: 64px; max-width: 90px; }
.tabella-persone td:nth-child(3), .tabella-persone .adm-stato { white-space: nowrap; }
/* Nome utente in monospazio: la credenziale si distingue a colpo d'occhio dal nome. */
.tabella-persone td:nth-child(3) { font: 12.5px/18px var(--mono); color: var(--testo-2); letter-spacing: -.01em; }
.tabella-persone .adm-stato[title]:not([title=""]) { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.tabella .piccolo { font-size: 12px; margin-top: 1px; }
.frasi-editor .frasi-righe { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: frase; }
.frasi-righe li { counter-increment: frase; display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.frasi-righe li::before {
  content: counter(frase); flex: none; width: 24px; margin-right: 4px;
  color: var(--tenue); font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums;
}
.frasi-righe li > input { flex: 1 1 auto; width: auto; min-width: 160px; margin-right: 4px; }
.frasi-righe li > .btn { flex: none; box-shadow: none; }

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

@media (max-width: 999px) {
  .testa { flex-wrap: wrap; }
  .testa-ora { display: none; }                   /* 701–999 px: le schede restano sulla riga del marchio */
  .testa-azienda { max-width: 24ch; }            /* intero dove c'è posto (900 px) */
  .demo-scelta select { min-width: 12rem; max-width: 34vw; }   /* la fascia demo resta su una riga fino a 701 px */
  .riga-campi { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .riga-campi > .campo-linea:nth-of-type(2) { grid-column: 1; }
  .riga-numero { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .riga-numero > .spunta-urgente { grid-column: 2; justify-self: start; }
  .riga-frasi, .riga-testo { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .riga-testo .btn-invia { grid-column: 2; justify-self: start; min-height: 46px; }
}

@media (max-width: 860px) {
  .testa-azienda { display: none; }               /* dove non c'è posto, meglio niente che "Tecnica Industr…" */
}

/* Smartphone (≤ 700 px): schede a tutta larghezza, numero come pulsante grande "chiama". */
@media (max-width: 700px) {
  body { font-size: 15px; line-height: 21px; }
  input[type="text"], input[type="search"], input[type="password"], input[type="number"],
  input[type="date"], input:not([type]), select, textarea { font-size: 16px; min-height: 44px; }

  :root { --alt-demo: 68px; }                    /* fascia demo su due righe */
  html { scroll-padding-top: 112px; }            /* testata con le schede: 98 px */
  .fascia-demo { min-height: var(--alt-demo); padding: 6px 12px 6px 38px; gap: 4px 12px; font-size: 12px; }
  .demo-scelta { flex: 1 1 100%; min-width: 0; white-space: nowrap; }
  .demo-scelta select { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; min-height: 32px; font-size: 14px; }

  .testa { gap: 0 8px; padding: 6px 8px 0 12px; }
  .testa-ora, .testa-azienda { display: none; }
  .testa-marchio { min-height: 44px; }
  .testa-persona { margin-left: auto; min-height: 44px; }
  .schede-nav { order: 3; width: 100%; margin: 0 -8px 0 -12px; width: calc(100% + 20px); gap: 0; align-self: auto; border-top: 1px solid var(--divisore); }
  .tab { flex: 1 1 0; justify-content: center; min-height: 46px; padding: 0 8px; font-size: 15px; border-radius: 0; }
  .tab::after { left: 20%; right: 20%; }
  .fascia { padding: 6px 12px; }
  .pagina { padding: 16px 12px 120px; }
  h1 { font-size: 22px; line-height: 28px; }

  .vista-nuovo { padding: 10px 12px 16px; }
  /* due per riga; un nome che non ci sta ("Amministrazione 2") prende la riga intera invece di essere tagliato */
  .persona-box { flex: 1 1 140px; min-width: auto; max-width: 100%; }
  .persona-box:has(> .persona.assente) { flex-basis: 100%; max-width: 100%; }
  .persona { min-height: 48px; }
  .persona.con-menu { padding-right: 48px; }
  .persona-menu { width: 44px; height: 44px; right: 2px; opacity: .85; }
  .riga-campi, .riga-numero, .riga-frasi, .riga-testo { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .riga-campi > .campo-linea:nth-of-type(2), .riga-numero > .spunta-urgente, .riga-testo .btn-invia { grid-column: 1; }
  .riga-campi > .campo-linea:nth-of-type(2) { margin-top: 4px; }
  .spunta-urgente { min-height: 44px; }
  .btn-frase { min-height: 34px; padding: 4px 14px; font-size: 14px; }
  .riga-testo .btn-invia { justify-self: stretch; min-height: 50px; }
  .riga-testo .campo-linea { padding-top: 0; }
  .lista-testa { flex-wrap: wrap; }
  .lista-cerca input { width: 100%; }
  .lista-cerca { flex: 1 1 100%; }
  .lista-comandi { flex: 1 1 100%; justify-content: flex-start; }
  .riga-stato { padding-left: 0; }
  /* l'ora su una riga a sé, sopra chiamante e destinatario: stesso schema in tutte le righe */
  .riga-linea { padding-left: 0; }
  .riga-quando { flex-basis: 100%; margin-left: 0; font-size: 13px; line-height: 18px; }

  .miei-testa { margin-bottom: 12px; }
  .schede { gap: 12px; }
  .scheda { padding: 14px 14px 12px; }
  .scheda.urgente { padding-left: 18px; }
  .scheda-testa { flex-direction: column; }
  .scheda-nome { font-size: 17px; line-height: 24px; }
  .scheda-testo { font-size: 16px; line-height: 23px; }
  .scheda-info { font-size: 13px; }
  .numero { width: 100%; }
  .scheda-azioni { gap: 8px; margin-top: 12px; }
  .scheda-azioni .btn { flex: 1 1 0; min-height: 46px; font-size: 15px; }
  .scheda-azioni .btn-menu { flex: 0 0 52px; }
  .riga-azioni .btn, .riga-azioni .btn-piccolo { min-height: 38px; padding: 4px 12px; font-size: 13px; }
  .nota-fatto .btn { flex: 1 1 0; min-height: 44px; font-size: 15px; }
  .nota-fatto input { flex-basis: 100%; min-height: 44px; }
  .fatti-titolo { min-height: 44px; }
  .fatto-riga .btn { min-height: 44px; }
  .fascia-attiva { min-height: 44px; }
  .storico-riga .riga-azioni .btn-piccolo { min-height: 44px; padding: 6px 14px; font-size: 14px; }

  .menu-voce { min-height: 44px; font-size: 15px; }
  /* suggerimenti della rubrica: nome e numero sulla prima riga, azienda intera sotto */
  .voce-rubrica { grid-template-columns: minmax(0, 1fr) auto; }
  .voce-azienda { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .voce-quando { grid-row: 3; }

  .cron-elenco li { grid-template-columns: 6.5em minmax(0, 1fr); }
  .cron-chi { grid-column: 2; }
  .cron-dettaglio { grid-column: 2; }            /* sotto chi ha fatto l'azione, non sotto l'ora */

  .basso { bottom: 10px; }
  .invio-fascia { padding: 10px 12px; }
  /* Annulla è l'unico modo di tornare indietro: bersagli da 44 px */
  .avviso { min-height: 56px; }
  .avviso-azione { min-height: 44px; padding: 8px 16px; }
  .avviso-x { width: 44px; height: 44px; }
  .invio-fascia .btn { min-height: 44px; padding: 8px 14px; }
  .velo { padding: 12px; }
  body.con-demo .velo { padding-top: calc(var(--alt-demo) + 12px); }   /* il titolo non finisce sotto la fascia */
  .dialogo-testa { min-height: 52px; padding: 4px 4px 4px 18px; }
  .dialogo-corpo { max-height: 72vh; padding: 16px 18px 6px; }
  .dialogo-errore { margin: 0 18px 10px; }
  .dialogo-piede { padding: 12px 18px; margin-top: 10px; }
  .dialogo-piede .btn { flex: 1 1 auto; min-height: 44px; }
  .dialogo-x { width: 44px; height: 44px; }
  .schermo { padding: 16px 12px; align-items: flex-start; }
  .schermo-box { padding: 28px 20px 22px; }
  .schermo-box .btn-testo { min-height: 44px; }
  .tabella { font-size: 13px; }
  .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; }
  /* barra del numero tinta (blu notte su blu chiaro, 13:1): l'unico blocco blu pieno della scheda resta
     ✓ Fatto; la pillola "chiama" resta nel colore primario */
  .numero-tel {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 52px; margin-top: 10px; padding: 8px 10px 8px 16px;
    background: var(--blu-chiaro); color: var(--blu-notte); text-decoration: none;
    border: 1px solid var(--blu-bordo); border-radius: var(--raggio);
    box-shadow: none;
    font: 600 18px/24px var(--carattere-titoli); font-variant-numeric: tabular-nums; letter-spacing: .01em;
    transition: background-color var(--durata);
  }
  .numero-tel:active { background: var(--blu-chiaro-2); }
  .numero-tel.numero-testo { background: var(--superficie-3); color: var(--testo); box-shadow: none; border: 1px solid var(--bordo); }
  .numero-chiama {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 4px 14px 4px 10px;
    background: var(--blu); border: 1px solid var(--blu); border-radius: 999px; color: #fff;
    font: 600 14px/1 var(--carattere); letter-spacing: 0; text-transform: lowercase;
  }
  .numero-chiama::before {
    content: ""; width: 16px; height: 16px;
    background: var(--ic-telefono) center / contain no-repeat;
  }
  .numero-tel:focus-visible { outline-offset: 3px; }
  /* 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; }
  .btn-invia kbd { display: none; }               /* niente "Ctrl+Invio" dove non c'è la tastiera */
  .per-chi-testa .tenue { display: none; }        /* né "Alt+1–9" */
}

@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; }
  body { background: #fff; }
  .scheda, .lista-box, .storico-gruppo { box-shadow: none; }
}

/* ------------------------------------------------------------------------
   Verifica finale (01/10/2026): bersagli da 44 px sullo smartphone anche nelle
   fasce di sistema e in "Chiamata da…"; fascia demo su tre righe a 360 px.
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  .fascia-rossa .btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }
  .chiamata-arrivo .btn, .chiamata-arrivo [data-chiudi-tel] { min-height: 44px; min-width: 44px; }
}
@media (max-width: 380px) {
  :root { --alt-demo: 88px; }
}

/* ------------------------------------------------------------------------
   Azioni della scheda (02/10/2026): sul PC le azioni secondarie sono a vista,
   come pulsanti leggeri allineati a destra; il menu "⋯" serve solo sullo smartphone,
   dove diventa "⋯ Altro".
   ------------------------------------------------------------------------ */
.scheda-azioni { align-items: center; }
.scheda-secondarie { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.btn-secondaria { min-height: 32px; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--blu); }
.scheda-azioni .btn-menu { display: none; }
.btn-menu-testo { display: none; }
@media (max-width: 700px) {
  .scheda-secondarie { display: none; }
  .scheda-azioni .btn-menu { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; padding: 4px 14px; }
  .btn-menu-testo { display: inline; font-size: 14px; letter-spacing: 0; font-weight: 600; }
}

/* ------------------------------------------------------------------------
   Email (02/10/2026): dialogo "Email" del menu con il nome, riga Email di
   "Prova questo PC", campi email del dialogo Persona, colonna della tabella.
   ------------------------------------------------------------------------ */

/* Gruppo di campi senza cornice (le scelte delle email) e note sotto i campi */
.gruppo { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.gruppo > legend { padding: 0; margin-bottom: 6px; }
.gruppo > .spunta { margin: 0; }
.nota-campo { margin: 6px 0 0; color: var(--tenue); font-size: 12px; line-height: 16px; }
.nota-campo.rientro { padding-left: 26px; }        /* sotto il testo della spunta, non sotto la casella */
.spunta-lunga { align-items: flex-start; }
.spunta-lunga > input { margin-top: 1px; }

/* "Nessuna / Solo urgenti / Tutti": radio vere con l'aspetto del selettore a segmenti di Fluent
   (binario grigio, scelta bianca in rilievo con il testo blu). */
.segmenti {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px;
  padding: 3px;
  background: var(--superficie-3); border: 1px solid var(--bordo); border-radius: var(--raggio);
}
.segmento {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 6px 8px;
  border-radius: var(--raggio-s);
  font-weight: 400; font-size: 14px; line-height: 18px; color: var(--testo-2); text-align: center;
  cursor: pointer; user-select: none;
  transition: background-color var(--durata), color var(--durata), box-shadow var(--durata);
}
.segmento > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmento:hover { background: rgba(255, 255, 255, .65); color: var(--testo); }
.segmento:has(> input:checked) {
  background: var(--superficie); color: var(--blu); font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 32, 56, .12), inset 0 0 0 1px var(--blu-bordo);
}
.segmento:has(> input:focus-visible) { outline: 2px solid var(--fuoco); outline-offset: 1px; }
/* Contrasto elevato di Windows: sfondi e ombre spariscono, la scelta resta riconoscibile dal bordo */
@media (forced-colors: active) {
  .segmento { border: 1px solid transparent; }
  .segmento:has(> input:checked) { border: 2px solid Highlight; }
}

/* Il proprio indirizzo: in sola lettura (lo inserisce l'amministratore). L'icona è una chiocciola:
   le buste (chiusa, aperta) nel programma vogliono dire soltanto "non visto" e "visto". */
.email-indirizzo {
  display: flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 7px 12px;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  font-weight: 600; overflow-wrap: anywhere;
}
.email-indirizzo > span { flex: 1 1 auto; min-width: 0; }
.email-indirizzo::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23586374' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='2.6'/%3E%3Cpath d='M10.6 5.4v3.5c0 1.2.8 1.9 1.7 1.9 1.2 0 1.9-1.2 1.9-2.8A6.2 6.2 0 1 0 11.6 13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.email-indirizzo-manca {
  align-items: flex-start;
  background: var(--ambra-chiaro); color: var(--ambra); border-color: var(--ambra-bordo);
  font-size: 13px; line-height: 18px;
}
.email-indirizzo-manca::before { margin-top: 1px; background-image: var(--ic-attenzione-ambra); }

/* "Mandami un'email di prova" e il suo esito (regione "status": vuota non occupa spazio) */
.email-prova {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--divisore);
}
.email-prova .nota-campo { margin: 0; }
.email-esito { margin: 0; font-size: 13px; line-height: 18px; }
.email-esito.ok, .email-esito.errore {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 8px 12px;
  border: 1px solid; border-radius: var(--raggio-s); font-weight: 600;
}
.email-esito.ok::before, .email-esito.errore::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; }
.email-esito.ok { background: #f1f8f1; color: #0b5a0b; border-color: #c3e0c3; }
.email-esito.ok::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.2' fill='%230e700e'/%3E%3Cpath d='m4.8 8.3 2.2 2.1 4.2-4.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.email-esito.errore { background: var(--ambra-chiaro); color: var(--ambra); border-color: var(--ambra-bordo); }
.email-esito.errore::before { background: var(--ic-attenzione-ambra) center / contain no-repeat; }

/* Pulsante al lavoro (email di prova in partenza): resta raggiungibile da tastiera, non riparte */
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover, .btn[aria-disabled="true"]:active {
  background: var(--superficie-3); border-color: var(--bordo); color: #6f7987; box-shadow: none; cursor: progress;
}

/* "Prova questo PC": riga Email; "i" = né sì né no (le email non sono ancora attive, nessuna scelta) */
.prova-riga.info .prova-segno {
  color: transparent; border: 1px solid #cddcee;
  background: var(--blu-chiaro) var(--ic-info) center / 18px 18px no-repeat;
}

/* Dialogo Persona: campi su due colonne, spunte su una riga, sezione Email staccata da un filo */
.griglia-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.spunte-riga { display: flex; flex-wrap: wrap; gap: 0 28px; }
.sezione-dialogo { margin: 6px 0 14px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.sezione-dialogo > h3 { margin: 0 0 12px; }
.sezione-dialogo > .gruppo:last-of-type { margin-bottom: 14px; }

/* Amministrazione: le email partono? (pallino verde = sì, ambra = no, con il perché) */
.adm-email-stato {
  display: flex; align-items: flex-start; gap: 8px;
  margin: -2px 0 12px; font-size: 13px; line-height: 18px; color: var(--testo-2);
}
.adm-email-stato > span { flex: 1 1 auto; min-width: 0; }      /* il perché va a capo sotto di sé, non sotto "Email" */
.adm-email-stato::before {
  content: ""; flex: none; margin-top: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ambra-vivo); box-shadow: 0 0 0 3px var(--ambra-chiaro);
}
.adm-email-stato.attivo::before { background: var(--verde); box-shadow: 0 0 0 3px #e3f1e3; }
.adm-email-stato b { color: var(--testo); }
/* Colonna Email, stretta (la tabella non deve allargarsi): la scelta per i nuovi messaggi, "+ riepilogo"
   sotto; senza indirizzo una lineetta. position: relative tiene il testo per i lettori di schermo
   (.visivo-nascosto) dentro la tabella che scorre, senza allargare la pagina sullo smartphone. */
.tabella-persone .adm-email { position: relative; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
/* Per far posto alla colonna Email: le intestazioni a più righe (sopra a ✓ e numeri) sono più strette. */
.tabella-persone th.stretta { min-width: 56px; padding-left: 6px; padding-right: 6px; }
.adm-email-scelta { font-weight: 600; color: var(--testo); }
.adm-email.spente .adm-email-scelta, .adm-email-manca { font-weight: 400; color: var(--tenue); }
.tabella tr.disattivata .adm-email-scelta { color: var(--grigio); }
/* periodo di prova (solo_a): la persona per ora non riceve email; la sua scelta resta, in grigio (il perché nel suggerimento) */
.adm-email.esclusa .adm-email-scelta { font-weight: 400; font-style: italic; color: var(--tenue); }

@media (max-width: 700px) {
  .segmento { min-height: 44px; font-size: 15px; }
  .griglia-campi { grid-template-columns: minmax(0, 1fr); }
  .spunte-riga .spunta { min-height: 32px; }
  /* Prova questo PC: il pulsante dell'email va sotto il testo, allineato con esso */
  .prova-riga-email { flex-wrap: wrap; }
  .prova-riga-email > .prova-testo { flex-basis: calc(100% - 42px); }
  .prova-riga-email > .btn { margin-left: 42px; }
  .email-prova .btn { min-height: 44px; }
}