@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ══════════════════════════════════════════════════════════════════════════
   IL TEMA CFBRAIN (17 settembre 2026)
   Colori, carattere e componenti vengono dalla demo approvata
   (Demo-Piattaforma-CFBRAIN.html) e dal design system del brand
   (cfbrain-brand/references/design-system.md). Il carattere sta sul server:
   l'interfaccia non chiama servizi terzi (DECISIONI.md, Architettura).

   Regola per chi lavora sopra questo file: i colori si prendono SOLO dalle
   variabili qui sotto, mai scritti a mano nei modelli o nei file di corsia.
   I nomi di prima (--teal-*) restano come alias dei colori nuovi: classi e
   modelli di cinque corsie li usano ancora, e il 18 settembre valgono uguale.

   Contrasto: tutti i colori usati per del testo stanno almeno a 4,5:1 sul
   loro fondo (WCAG AA). Per questo --muted, --faint, --amber-700, --red-700 e
   --green-700 sono un poco più scuri di quelli della demo: la demo mostrava le
   etichette in maiuscoletto a 2,5:1, che al sole sul telefono non si leggono.
   ══════════════════════════════════════════════════════════════════════════ */
  :root{
    /* blu CFBRAIN, campionato dai loghi */
    --navy-900:#021A3A;   /* navy profondo: fine del gradiente, fondi scuri */
    --navy-800:#04366F;   /* inizio del gradiente della barra laterale */
    --brand:#032A5D;      /* primario */
    --brand-600:#1B4F8F;
    --brand-400:#6EA8F0;  /* accento: icone attive, evidenze */
    --brand-300:#9CC4F7;  /* azzurro chiaro */
    --brand-100:#CFE0F6;
    --brand-50:#EEF4FD;
    --ink:#0E1726; --ink-2:#31415C; --muted:#5F6C84; --faint:#66738A;
    --bg:#ffffff; --surface:#ffffff; --wash:#F6F9FD; --line:#DFE6F0; --line-2:#EDF1F7;
    --line-3:#C7D2E2;     /* bordo al passaggio del mouse, righe e tratteggi */
    /* il bordo di quello che si tocca o si riempie: campi, tendine, caselle da
       spuntare e tasti bianchi. 3:1 sul bianco e sui fondi chiari (--wash,
       --brand-50, --soft), come chiede WCAG 1.4.11 per i controlli: con
       --line (1,3:1) e --line-3 (1,5:1) da un metro non si vedeva dove
       scrivere né cosa toccare (meeting interno del 16 ottobre 2026, «troppo
       poco contrasto»). Lo stesso grigio-blu delle altre linee, più scuro. */
    --line-4:#7D8AA0;
    --soft:#EDF1F7;       /* fondo di interruttori, targhette spente, barre vuote */
    --tint:#EFF4FB;       /* intestazioni di gruppo, bottoni icona al passaggio */
    --hover:#F5F9FE;      /* riga sotto il mouse */
    --amber-50:#fbf3e4; --amber-100:#f6e6c4; --amber-700:#8a5d0c; --amber-900:#7a5410;
    --red-50:#fbeae7; --red-100:#f2d5cf; --red-700:#b03b2e;
    --green-50:#e7f4ec; --green-700:#177245;
    --blue-50:#eaf1fb; --blue-100:#d4e4f7; --blue-700:#2a5f9e;
    --plum-50:#f2ecfa; --plum-100:#e0d5f2; --plum-700:#6b4fa8;
    --wa-bg:#e7ded4; --wa-in:#ffffff; --wa-out:#d8fdd2; --wa-out-2:#c7f7bd;
    /* la barra laterale e quella delle sezioni sul telefono */
    --side-grad:linear-gradient(180deg,var(--navy-800) 0%,var(--brand) 44%,var(--navy-900) 100%);
    --side-text:#A9BDDC; --side-text-2:#9AB0D3; --side-on:#E8F0FC;
    --side-hover:rgba(255,255,255,.06); --side-sel:rgba(110,168,240,.15);
    --side-line:rgba(255,255,255,.10);
    /* la barra luminosa del brand, qui come indicatore della sezione attiva */
    --glow-bar:linear-gradient(180deg,var(--brand-300),#4D86D6);
    --font:"Plus Jakarta Sans","Helvetica Neue",Arial,system-ui,sans-serif;
    --r:10px; --r-sm:7px; --r-lg:14px;
    --tabbar-h:58px;   /* barra delle sezioni, fissa in basso sul telefono */
    --sh-sm:0 1px 2px rgba(9,30,66,.06),0 1px 3px rgba(9,30,66,.04);
    --sh-md:0 6px 18px rgba(9,30,66,.08),0 2px 5px rgba(9,30,66,.05);
    --sh-lg:0 18px 46px rgba(9,30,66,.16);
    --ease:cubic-bezier(.22,.61,.36,1);

    /* Alias del tema verde di prima. Non toglierli: li usano i modelli
       (style="color:var(--teal-700)"), le aree di «Da fare» salvate nel
       database (crm.task_area.color_bg, seed.sql) e le corsie aperte. */
    --teal-900:var(--navy-900); --teal-700:var(--brand); --teal-600:var(--brand-600);
    --teal-100:var(--brand-100); --teal-50:var(--brand-50);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* `hidden` deve vincere sempre: una classe che imposta display — .btn è
     inline-flex — batte la regola del browser, e il bottone «Pausa» restava
     a video prima che la registrazione cominciasse. */
  [hidden]{display:none!important}
  html,body{min-height:100%}
  body{
    font-family:var(--font);
    color:var(--ink); background:var(--bg); font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased; font-feature-settings:"cv05","ss01";
    /* iOS ingrandisce i caratteri ruotando il telefono se non glielo si vieta,
       e colora di azzurro ogni cosa toccata: due difetti solo da mobile */
    -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
  }
  .num{font-variant-numeric:tabular-nums}
  /* .serif era il carattere dei titoli del tema di prima: il brand ha un
     carattere solo, e i titoli si distinguono per peso */
  .serif{font-family:var(--font);font-weight:700;letter-spacing:-.4px}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  ::selection{background:var(--brand-100);color:var(--navy-900)}
  a{color:var(--brand)}
  :focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}

  /* ---------- shell ----------
     Si parte dal telefono. Due conseguenze che non sono estetiche:
     - la pagina scorre da sola invece che dentro un contenitore con overflow,
       così scendendo la barra del browser si ritrae e si guadagna uno spazio
       che su uno schermo stretto vale una riga e mezza di elenco;
     - l'altezza è 100dvh e non 100vh: su iOS 100vh vale la finestra CON la
       barra degli indirizzi aperta, e taglia in fondo quello che si guarda.
     La colonna di sinistra e la griglia a due colonne tornano da 900px in su. */
  .app{display:block;min-height:100vh;min-height:100dvh}
  .side{display:none;background:var(--side-grad);color:var(--side-text);flex-direction:column;padding:20px 14px;position:relative;overflow:hidden}
  /* alone morbido in alto a sinistra: la firma del brand. radial-gradient e
     mai box-shadow sfocata, che stampata diventa un rettangolo (trappola 9) */
  .side::before{content:"";position:absolute;left:-70px;top:-60px;width:260px;height:230px;pointer-events:none;
    background:radial-gradient(closest-side at 50% 50%,rgba(110,168,240,.30) 0%,rgba(110,168,240,.09) 55%,rgba(110,168,240,0) 100%)}
  .side>*{position:relative}

  /* ---------- il marchio ----------
     Il cervello e la scritta CFBRAIN al posto di «la Piattaforma», con sotto
     il nome dello studio (core.setting 'studio.name'). I due loghi sono
     bianchi su trasparente: stanno solo su fondo navy, cioè nella barra
     laterale e nella testata del telefono. Misure dal design system: cervello
     1,15:1, scritta 9,14:1. */
  .brand{display:flex;align-items:center;gap:11px;padding:4px 8px 20px}
  .brand .cf-brain{width:36px;height:31px;flex:none;display:block}
  .brand .brand-t{min-width:0}
  .brand .cf-word{width:118px;height:13px;display:block}
  .brand .mark{width:34px;height:34px;border-radius:9px;background:var(--brand-600);display:flex;align-items:center;justify-content:center;flex:none}
  .brand .mark svg{width:19px;height:19px}
  .brand .wm{font-weight:700;font-size:16.5px;color:#fff;letter-spacing:-.3px;line-height:1}
  /* il nome dello studio sta proprio sopra l'alone azzurro in alto a
     sinistra, che schiarisce il fondo: con --side-text-2 stava a 3,5:1 sulla
     scrivania e a 4,2:1 sul telefono (misurato sui pixel in Chromium), sotto
     AA per un testo di 11 px. --brand-100 regge anche il punto più chiaro
     dell'alone (test_t1_tema.py lo ricalcola dal file). */
  .brand .ws{font-size:11px;color:var(--brand-100);margin-top:5px;line-height:1.3;overflow-wrap:anywhere}
  /* le classi dei loghi della demo, per chi porta del markup da lì */
  .cf{background-position:center;background-repeat:no-repeat;background-size:contain;display:block;flex:none}
  .cf-brain{background-image:url(/static/marchio/cf-brain.png)}
  .cf-word{background-image:url(/static/marchio/cf-word.png)}
  img.cf-brain,img.cf-word{background:none}

  /* sul telefono la barra laterale non c'è: il marchio sta in una testata navy
     che scorre via con la pagina. In cima allo schermo il pollice non arriva
     comunque, e il titolo della pagina, che serve di più, resta attaccato. */
  .marchio-tel{background:var(--side-grad);position:relative;overflow:hidden;
    padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
  .marchio-tel::before{content:"";position:absolute;left:-60px;top:-80px;width:220px;height:200px;pointer-events:none;
    background:radial-gradient(closest-side at 50% 50%,rgba(110,168,240,.28) 0%,rgba(110,168,240,.08) 55%,rgba(110,168,240,0) 100%)}
  .marchio-tel .brand{position:relative;padding:0;gap:10px}
  .marchio-tel .brand .cf-brain{width:31px;height:27px}
  .marchio-tel .brand .cf-word{width:100px;height:11px}
  .marchio-tel .brand .ws{margin-top:4px}

  .nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
  .nav-i{display:flex;align-items:center;gap:11px;padding:9px 10px 9px 12px;border-radius:8px;font-size:13.5px;line-height:normal;color:var(--side-text);font-weight:500;transition:.16s var(--ease);text-align:left;width:100%;position:relative}
  .nav-i svg{width:17px;height:17px;flex:none;opacity:.9}
  .nav-i:hover{background:var(--side-hover);color:var(--side-on)}
  .nav-i.on{background:var(--side-sel);color:#fff;font-weight:600}
  .nav-i.on svg{color:var(--brand-400);opacity:1}
  .nav-i.on::after{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--glow-bar)}
  /* i due pomelli dell'icona di Impostazioni coprono la riga che li attraversa:
     hanno il colore del fondo della barra, non un colore loro */
  .nav-i .pomello{fill:var(--brand)}
  .nav-i .rm{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--navy-900);background:#C9A24A;padding:2px 6px;border-radius:100px}
  .nav-i .bdg{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--navy-900);background:var(--brand-400);padding:1px 7px;border-radius:100px;min-width:20px;text-align:center}
  .side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--side-line)}
  .side-by{display:flex;align-items:center;gap:9px;padding:0 8px 13px;opacity:.62}
  .side-by small{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--side-text-2);font-weight:600}
  .side-by .cf-word{width:82px;height:9px}
  .user{display:flex;align-items:center;gap:10px;padding:6px 8px}
  .user .av{width:32px;height:32px;border-radius:50%;background:rgba(110,168,240,.20);color:var(--brand-300);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex:none}
  .user .nm{font-size:13px;color:var(--side-on);font-weight:600}
  .user .rl{font-size:11px;color:var(--side-text-2)}
  .user .rl-banco{font-size:10px;padding:1px 7px;margin-left:auto;align-self:center;flex:none}

  .main{position:relative}
  /* alta almeno 84 anche sul telefono, come nella demo (GUIDA-UI §3): senza
     sottotitolo era 64, e il selettore delle pagine comuni stava più su in
     Incontri che in Oggi (giro 2 del 16 ottobre 2026) */
  .top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:flex-start;gap:12px;
       padding:16px max(18px,env(safe-area-inset-right)) 16px max(18px,env(safe-area-inset-left));min-height:84px}
  .top>div:not(.right){flex:1;min-width:0}
  .top h1{font-weight:700;font-size:21px;letter-spacing:-.45px;line-height:1.5;overflow-wrap:anywhere}
  .top .sub{font-size:12.5px;color:var(--muted);margin-top:1px}
  .top .right{display:flex;align-items:center;gap:12px;margin-left:auto}
  .demo-badge{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--brand);background:var(--brand-50);border:1px solid var(--brand-100);padding:4px 10px;border-radius:100px}

  /* ---------- «Indietro» (decisione dell'utente del 17 settembre 2026) ----------
     Le pagine che non sono una voce del menu hanno in cima, a sinistra del
     titolo, il tasto per tornare alla pagina da cui logicamente vengono. Il
     contratto sta in base.html. Sta nella testata che resta attaccata in
     cima: su un verbale lungo si torna indietro senza risalire la pagina.
     Alto 40px (44 al dito), come chiede il pollice; il nome della pagina di
     destinazione si legge da 600px in su, sul telefono c'è spazio per la sola
     parola. */
  .indietro,.inc-back{display:inline-flex;align-items:center;gap:6px;flex:none;align-self:center;
    min-height:40px;padding:6px 14px 6px 10px;border-radius:100px;
    font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;
    background:var(--surface);border:1px solid var(--line-4);box-shadow:var(--sh-sm);transition:.18s var(--ease)}
  .indietro:hover,.inc-back:hover{border-color:var(--brand-600);color:var(--brand);background:#FAFCFF}
  .indietro svg,.inc-back svg{width:16px;height:16px;flex:none;transition:transform .18s var(--ease)}
  .indietro:hover svg,.inc-back:hover svg{transform:translateX(-2px)}
  .indietro .indietro-a{display:none;font-weight:500;color:var(--muted);padding-left:8px;margin-left:2px;border-left:1px solid var(--line)}
  @media(min-width:600px){ .indietro .indietro-a{display:inline} }
  .inc-back{margin-bottom:16px}
  /* Sotto i 600 px accanto a «Indietro» il titolo ha 246 px: a 21 px ci
     stanno due righe fino a 45 lettere («Prepara l'incontro con Zanella
     Federica»), con un cognome doppio («… con Castelnuovo Bertolini Maria»)
     tre, e la testata, che resta attaccata in cima, si prendeva un quinto
     dello schermo. Da 31 lettere (base.html, .top-lungo) il titolo scende a
     18 px (fusione del 14 ottobre 2026; la soglia da 46 a 31 dal giro 1). */
  @media(max-width:599px){ .top-lungo h1{font-size:18px;line-height:1.35;letter-spacing:-.3px} }

  /* lo spazio in fondo tiene conto della barra delle sezioni e della tacca:
     l'ultima riga dell'elenco non deve nascondersi sotto le linguette */
  /* 28 px sopra e 18 ai lati come la demo sotto i 900 px: il telefono ha le
     misure della demo, non una versione stretta sua */
  .content{max-width:1120px;
           padding:28px max(18px,env(safe-area-inset-right)) calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
  .view{display:none;animation:fade .4s var(--ease)}
  .view.on{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* ---------- primitives ---------- */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
  .eyebrow{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:26px 0 10px;display:flex;align-items:center;gap:8px}
  .eyebrow:first-child{margin-top:0}
  /* Chi vedere e Clienti avvolgono elenco ed etichetta in un riquadro che si
     rilegge da solo (hx-select): l'etichetta diventava il primo figlio e
     perdeva i 26 px sopra, e l'elenco stava attaccato alla ricerca. Il
     riquadro che apre la pagina resta a zero, come nella demo. */
  [hx-select]:not(:first-child)>.eyebrow:first-child{margin-top:26px}
  /* ---------- i bottoni: tre pesi, una misura (15 ottobre 2026) ----------
     Richiesta di prodotto del 15 ottobre 2026: «più contrasto tra pulsanti».
     In .app il bianco con il bordo (--line, quasi il colore della carta) e
     il pieno stavano a 27–36 px e si confondevano con il fondo. Da qui:
     - .btn-primary  l'azione principale, piena e blu: UNA per schermata
                     (o per sezione), mai due affiancate;
     - .btn-ghost    la secondaria: bianca, il bordo che si vede (--line-4),
                     la scritta nel navy, l'ombra piccola delle carte;
     - .btn-link     la terziaria: solo scritta, per le azioni minori in una
                     riga («Apri», «Cambia», «Non conta», un «Annulla» in
                     riga): niente bordo, 40 px da toccare lo stesso;
     - .btn-danger   quello che toglie o elimina: rosso chiaro, distinto;
     - .btn-wa       solo WhatsApp.
     Tutti alti almeno 40 px (44 al dito, sotto); .btn-sm è la misura per le
     righe e le etichette: scritta più piccola, altezza uguale. Gli stati:
     il passaggio del mouse scurisce, il tocco abbassa di un pixel, lo spento
     è a metà opacità (disabled, o aria-disabled per un <a>).
     line-height normal: nella demo i bottoni sono <button>, che non eredita
     l'interlinea; da noi molti sono <a>, e a parità di classe venivano 3 px
     più alti. Il bordo c'è sempre, anche trasparente: senza, il pieno era
     alto 2 px meno del bianco accanto (fusione del 14 ottobre 2026).
     I «gradini blu» (meeting interno del 16 ottobre 2026: «a distanza non
     si capisce quali sono i tasti da cliccare, da lontano deve essere chiaro
     il percorso ideale»): il pieno è BLU (--brand-600, il blu del marchio
     dei punti fatti e del fuoco, 8,2:1 con la scritta bianca) e non più
     navy, che da lontano si confondeva con il testo e con la barra
     laterale; il bianco ha il bordo dei controlli (--line-4, 3,5:1 sul
     bianco). Il rosso resta solo a «Registra» e a quello che toglie. Lo
     stesso blu fa i gradini dei percorsi a passi (.gradini, .gradino). */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;
    font-size:13px;font-weight:600;line-height:normal;padding:8px 15px;border-radius:9px;
    border:1px solid transparent;transition:.15s var(--ease);text-decoration:none;cursor:pointer}
  .btn svg{width:15px;height:15px;flex:none}
  .btn-primary{background:var(--brand-600);color:#fff;border-color:var(--brand-600);box-shadow:0 1px 2px rgba(27,79,143,.32)}
  .btn-primary:hover{background:var(--brand);border-color:var(--brand)}
  .btn-ghost{background:var(--surface);color:var(--brand);border-color:var(--line-4);box-shadow:var(--sh-sm)}
  .btn-ghost:hover{border-color:var(--brand-600);background:var(--brand-50)}
  .btn-link{background:none;color:var(--brand);border-color:transparent;box-shadow:none;padding-left:8px;padding-right:8px}
  .btn-link:hover{background:var(--brand-50);text-decoration:underline;text-underline-offset:3px}
  .btn-wa{background:#25d366;color:#0a3d20;border-color:#25d366}
  .btn-wa:hover{background:#1fb257;border-color:#1fb257}
  .btn-danger{background:var(--red-50);color:var(--red-700);border-color:var(--red-100);box-shadow:var(--sh-sm)}
  .btn-danger:hover{background:#f7ded8;border-color:var(--red-700)}
  /* il pieno rosso di «Registra», fuori dalla pagina che registra: «Riprendi»
     una registrazione rimasta a metà (giro 1 del 16 ottobre 2026), come
     «Comincia a registrare» (incontri.css, .rec-avvia) */
  .btn-rec{background:var(--red-700);color:#fff;border-color:var(--red-700);box-shadow:0 1px 2px rgba(176,59,46,.3)}
  .btn-rec:hover{filter:brightness(1.08)}
  /* il collegamento rosso, solo scritta, per quello che toglie e non è il
     passo della pagina: «Elimina la registrazione» in fondo alla pagina
     (giro 1 del 16 ottobre 2026: era un tasto rosso chiaro accanto a «Torna
     agli incontri») */
  .btn-link.rosso{color:var(--red-700)}
  .btn-link.rosso:hover{background:var(--red-50)}
  /* la scritta e i lati restano quelli di .app (12 px, 11 ai lati): i quattro
     tasti della scheda dell'appuntamento stanno in una riga del cassetto per
     pochi pixel, e mezzo punto in più li mandava a capo */
  .btn-sm{padding:5px 11px;font-size:12px;border-radius:8px}
  .btn-sm svg{width:14px;height:14px}
  .btn:active:not(:disabled):not([aria-disabled=true]){transform:translateY(1px);box-shadow:none}
  /* spento: si legge, non si tocca. Per un <a> vale aria-disabled; il clic
     lo ferma chi lo scrive (un tasto spento in una riga che si apre non deve
     aprire la riga: «✓ Da chiamare» in Chi vedere) */
  .btn:disabled,.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:default;box-shadow:none}
  .btn:disabled:hover,.btn[disabled]:hover,.btn[aria-disabled=true]:hover{background:var(--surface);border-color:var(--line-4)}
  .btn-primary:disabled:hover,.btn-primary[disabled]:hover,.btn-primary[aria-disabled=true]:hover{background:var(--brand-600);border-color:var(--brand-600)}
  .btn-link:disabled:hover,.btn-link[aria-disabled=true]:hover{background:none;text-decoration:none;border-color:transparent}
  /* un tasto in una riga di tabella da scrivania non la alza: i 15 px di
     padding della riga assorbono i 6 in più del tasto (40 contro 27 di .app) */
  @media(min-width:720px){ .tbl td>.actions{margin:-6px 0} }
  /* una carta dentro una carta non ha l'ombra: un bordo basta (meno
     riquadri annidati, 15 ottobre 2026) */
  .card .card{box-shadow:none}
  .pill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:2.5px 9px;border-radius:100px;white-space:nowrap}
  .pill-ok{background:var(--green-50);color:var(--green-700)}
  .pill-warn{background:var(--amber-50);color:var(--amber-700)}
  .pill-red{background:var(--red-50);color:var(--red-700)}
  .pill-muted{background:var(--soft);color:var(--muted)}
  .pill-teal,.pill-brand{background:var(--brand-50);color:var(--brand)}
  /* nella demo «blu» è il viola (pill-blue = pill-plum): «in pausa» e la zona
     di Mantova dell'agenda hanno il colore della demo */
  .pill-blue{background:var(--plum-50);color:var(--plum-700)}
  .pill-plum{background:var(--plum-50);color:var(--plum-700)}

  /* metrics */
  /* una targhetta per riga sotto i 900 px, tre da lì in su, come la demo */
  .metrics{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:6px}
  .metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
  .metric .k{font-size:12.5px;color:var(--muted);font-weight:500}
  /* il colore scritto: una targhetta che è un collegamento (<a class="metric">)
     prendeva il blu dei collegamenti, le altre l'inchiostro (giro 1, 14 ottobre 2026) */
  .metric .v{font-size:34px;font-weight:800;line-height:1.05;margin-top:7px;letter-spacing:-1.3px;color:var(--ink)}
  .metric.attn{background:#FDF8EE;border-color:var(--amber-100)}
  .metric.attn .k{color:var(--amber-700)} .metric.attn .v{color:var(--amber-700)}
  /* il collegamento in fondo a destra di una targhetta che porta altrove
     («Rivedi ›», «Apri ›»): stava in pratiche.css, ma vale per tutte
     (fusione del 14 ottobre 2026) */
  .metric .go{position:absolute;right:16px;bottom:14px;font-size:12px;font-weight:600;color:var(--brand-600)}
  .metric.attn .go{position:absolute;right:16px;bottom:14px;font-size:12px;font-weight:600;color:var(--amber-700);display:inline-flex;align-items:center;gap:4px}
  .metric.attn .go svg{width:13px;height:13px}
  .metric.clickable{cursor:pointer;transition:.15s var(--ease)}
  .metric.clickable:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}

  /* table */
  .tbl{width:100%;border-collapse:collapse}
  .tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:11px 16px;border-bottom:1px solid var(--line)}
  .tbl td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle}
  .tbl tr:last-child td{border-bottom:none}
  .tbl .rowlink{cursor:pointer;transition:background .12s}
  .tbl .rowlink:hover{background:var(--hover)}
  .t-time{color:var(--muted);font-variant-numeric:tabular-nums;width:64px}
  /* un nome senza spazi più largo dello schermo (una ragione sociale, un
     cognome scritto attaccato) va a capo dentro la sua cella: sul telefono le
     righe diventano schede, e la parola usciva trascinando di lato la pagina */
  .t-name{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
  .zonehdr td{background:var(--tint);color:var(--ink-2);font-weight:600;font-size:12px;letter-spacing:.02em;padding:8px 16px;text-transform:uppercase}
  .zonehdr td .zdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle}
  /* I pallini delle zone nell'ordine della demo: la prima zona blu, la
     seconda ambra, la terza viola, come Reggio, Bologna e Mantova. chi.html
     scrive .zdot.z0-.z4 (l'indice della zona modulo cinque): all'integrazione
     del 17 settembre 2026 gli esadecimali che stavano nell'attributo style
     sono spariti dal modello, e con loro i selettori [style*="..."] che li
     ridipingevano, che si sarebbero rotti al primo colore cambiato. */
  .zdot.z0{background:var(--brand-600)}
  .zdot.z1{background:var(--amber-700)}
  .zdot.z2{background:var(--plum-700)}
  .zdot.z3{background:var(--green-700)}
  .zdot.z4{background:var(--red-700)}
  .actions{display:flex;gap:6px;justify-content:flex-end}

  /* ---------- to-do (modello "Da fare") ---------- */
  .todo-tabs{display:flex;gap:4px;padding:10px 12px 6px;border-bottom:1px solid var(--line-2)}
  .todo-tab{font-size:12px;font-weight:700;color:var(--muted);padding:6px 12px;border-radius:8px;transition:.14s;
            display:inline-flex;align-items:center;min-height:40px}
  .todo-tab:hover{background:var(--tint)}
  /* la linguetta scelta è leggera, non piena (giro 1 del 16 ottobre 2026,
     «gradini blu»: il pieno blu è solo dei tasti, e la linguetta navy piena
     accanto a un .btn-primary sembrava un secondo tasto, 1,72:1 fra i due):
     fondo azzurro chiaro, scritta navy, il bordo blu di 1,5 px dentro.
     «Arretrato» scelto resta ambra pieno: è un avviso, non una scelta. */
  .todo-tab.on{background:var(--brand-50);color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand-600)}
  .todo-tab.late.on{background:var(--amber-700);color:#fff;box-shadow:none}
  .todo-list{display:flex;flex-direction:column}
  .voce{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-2);transition:.14s}
  .voce:last-child{border-bottom:none}
  .voce:hover{background:var(--hover)}
  .voce .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;background:#BCC7D8}
  .voce.late .dot{background:var(--amber-700)}
  .voce .vtxt{flex:1;min-width:0;cursor:pointer}
  .voce .vtxt b{font-weight:600;font-size:13.5px;display:block;color:var(--ink);overflow-wrap:anywhere}
  .voce.fatta .vtxt b{color:var(--muted);text-decoration:line-through}
  .voce.fatta .dot{background:var(--brand-600)}
  .voce .vtxt .cli{text-decoration:none}
  .voce .vtxt small{color:var(--muted);font-size:11.5px;display:block;margin-top:2px}
  .voce .vtxt .cli{color:var(--brand);font-weight:600;cursor:pointer}
  .voce .vtxt .cli:hover{text-decoration:underline}
  .voce .vtxt .nota{color:var(--amber-700);font-style:italic}
  .voce .check{width:23px;height:23px;border-radius:6px;border:1.6px solid var(--line-4);flex:none;display:grid;place-items:center;color:transparent;font-size:13px;font-weight:800;transition:.14s;margin-top:1px}
  .voce .check:hover{border-color:var(--brand-600);color:var(--brand-600);background:var(--brand-50)}
  .todo-add{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line-2);background:#FAFCFF;flex-wrap:wrap;align-items:center}
  .todo-add input[type=text]{flex:1;min-width:170px;border:1px solid var(--line-4);border-radius:8px;padding:8px 11px;font-family:inherit;font-size:13px;outline:none;background:#fff}
  .todo-add input[type=text]:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-50)}
  .mini-date,.mini-sel{border:1px solid var(--line-4);border-radius:8px;padding:7px 9px;background:#fff;color:var(--muted);font-family:inherit;font-size:12.5px;max-width:160px;outline:none}
  .empty{padding:26px 16px;text-align:center;color:var(--faint);font-size:13px}

  /* ---------- viste to-do: lista / per area / per cliente ---------- */
  .todo-modes{display:inline-flex;background:var(--soft);border-radius:11px;padding:3px;margin-bottom:14px}
  /* i controlli a segmenti alti 40 anche col mouse, come il selettore dei
     mondi e i .btn (GUIDA-UI §23; giro 2 del 16 ottobre 2026: 27, 30 e 32 px
     accanto ai 40 del selettore) */
  .todo-modes .mode{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:8px;font-weight:600;font-size:13px;color:var(--muted);transition:.15s var(--ease);min-height:40px}
  .todo-modes .mode svg{width:15px;height:15px}
  .todo-modes .mode:hover{color:var(--ink-2)}
  /* la voce scelta dei commutatori (Lista unica | Per tipo, Calendario | Per
     zona, WhatsApp | Email, Verbale | Trascrizione) come la linguetta scelta
     (.todo-tab.on) e il selettore dei mondi: fondo azzurro chiaro, scritta
     navy in grassetto, il bordo blu dentro. Bianco su --soft era 1,13:1,
     sotto il 3:1 dello stato di un controllo (correzioni del 16 ottobre 2026) */
  .todo-modes .mode.on{background:var(--brand-50);color:var(--brand);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--brand-600)}
  .board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:14px;align-items:start}
  .wid{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column}
  .wid-h{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line-2)}
  .wid-h .wic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
  .wid-h .wic svg{width:16px;height:16px}
  /* _dafare.html scrive a mano due colori del tema verde (il quadratino con le
     iniziali del cliente e quello del cassetto di ripiego), e il seed delle
     aree ne ha uno uguale: finché non passano a variabili si ridipingono qui,
     invece di toccare un modello che la corsia dafare sta rifacendo. */
  .wid-h .wic[style*="#0e1a16"]{background:var(--brand)!important;color:#fff!important}
  .wid-h .wic[style*="#eef2f0"]{background:var(--soft)!important}
  /* le aree create da chi usa il software prendono i colori di default della
     tabella (#eef2f0 e #6b7772, baseline.sql): lo schema non si tocca per un
     grigio, si ridipinge qui */
  .wid-h .wic[style*="#6b7772"]{color:var(--muted)!important}
  /* «Da fissare» nel seed ha i colori blu del tema di prima: nella demo è viola */
  .wid-h .wic[style*="--blue-50"]{background:var(--plum-50)!important;color:var(--plum-700)!important}
  .wid-h .wt{flex:1;min-width:0}
  .wid-h .wt b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
  .wid-h .wt small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
  .wid-h.clickable{cursor:pointer;transition:.14s}
  .wid-h.clickable:hover{background:var(--hover)}
  .wid-h .wc{font-size:12px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:100px;padding:2px 9px;flex:none}
  .wid-h .wc.late{background:var(--amber-50);color:var(--amber-700)}
  .wid-b{flex:1}
  .wid-b .voce{padding:11px 15px}
  .wid-f{display:flex;gap:7px;padding:10px 12px;border-top:1px solid var(--line-2);background:#FAFCFF}
  .wid-f input{flex:1;min-width:0;border:1px solid var(--line-4);border-radius:7px;padding:7px 10px;font-family:inherit;font-size:12.5px;outline:none;background:#fff}
  .wid-f input:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-50)}
  /* il «+» è l'azione della riga: blu come il tasto pieno (16 ottobre 2026) */
  .wid-f .add{width:30px;border-radius:7px;background:var(--brand-600);color:#fff;font-size:15px;font-weight:600;flex:none}
  .wid-f .add:hover{background:var(--brand)}
  .ic-btn{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--faint);flex:none;font-size:12px;transition:.13s}
  .ic-btn:hover{background:var(--tint);color:var(--ink-2)}
  /* la scritta al centro del riquadro, anche quando la riga del cruscotto lo
     allunga (giro 1, 14 ottobre 2026: stava in alto) */
  .wid.dashed{border-style:dashed;background:transparent;box-shadow:none;min-height:96px;display:flex}
  .wid.dashed button{flex:1;width:100%;padding:22px;color:var(--brand);font-weight:600;font-size:13px;
    display:flex;align-items:center;justify-content:center}
  .wid.dashed button:hover{background:var(--brand-50)}
  .tagpill{font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:1.5px 7px;border-radius:100px;background:var(--soft);color:var(--muted);margin-left:7px;vertical-align:middle}

  /* whatsapp panel */
  .wa{background:var(--wa-bg);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-sm);background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 0);background-size:16px 16px}
  .wa-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .wa-head .av{width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}
  .wa-head .nm{font-size:13.5px;font-weight:600;color:var(--ink)}
  .wa-head .st{font-size:11.5px;color:var(--muted)}
  .wa-head .wa-logo{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#0a7d3f}
  .wa-head .wa-logo svg{width:15px;height:15px}
  .bubble{max-width:80%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.5;box-shadow:0 1px .5px rgba(11,20,16,.13);position:relative;margin-bottom:8px;color:var(--ink)}
  .bubble .tm{font-size:10px;color:#5d6570;float:right;margin:6px -2px -2px 10px}
  .bubble.in{background:var(--wa-in);border-top-left-radius:3px}
  .bubble.out{background:var(--wa-out);border-top-right-radius:3px;margin-left:auto}
  .qr{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
  .qr button{background:var(--wa-in);color:#0a7d3f;border:1px solid rgba(10,125,63,.2);font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:100px;transition:.14s}
  .qr button:hover{background:#f0fff5}
  .wa-note{font-size:12.5px;color:var(--muted);margin-top:12px}
  .wa-compose{background:var(--wa-in);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.55;color:var(--ink);box-shadow:0 1px .5px rgba(11,20,16,.13);outline:none}
  .wa-compose:focus{box-shadow:0 0 0 3px var(--brand-50)}
  .wa-fake-bar{display:flex;align-items:center;gap:9px;background:#075e54;color:#fff;border-radius:10px 10px 0 0;padding:9px 13px;font-size:13px;font-weight:600}
  .wa-fake-bar .avx{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:11px}
  .wa-fake-bar small{margin-left:auto;font-weight:500;opacity:.8;font-size:11px}

  /* pipeline: dall'incontro al verbale, un passo per riga (dalla demo) */
  .pipe-card{padding:16px 18px;max-width:660px}
  .pipe-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
  .pipe-head .pipe-t{font-weight:600;font-size:14px}
  .pipe-head .pipe-s{font-size:12.5px;color:var(--muted);margin-top:2px}
  .pipe{display:flex;flex-direction:column;gap:2px}
  .pstep{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:10px;transition:.25s var(--ease);opacity:.42}
  .pstep.active{background:var(--brand-50);opacity:1}
  .pstep.done{opacity:1}
  .pstep.wait{background:var(--amber-50);opacity:1}
  .pstep .pic{width:30px;height:30px;flex:none;border-radius:8px;background:var(--soft);color:var(--muted);display:flex;align-items:center;justify-content:center;transition:.25s}
  .pstep .pic svg{width:16px;height:16px}
  .pstep.active .pic{background:var(--brand-100);color:var(--brand)}
  .pstep.wait .pic{background:var(--amber-100);color:var(--amber-700)}
  .pstep.done .pic{background:var(--brand-600);color:#fff}
  .pstep .pl{flex:1;font-size:13.5px;color:var(--ink-2)}
  .pstep.done .pl{color:var(--ink);font-weight:500}
  .pstep .pl .psub{color:var(--muted);font-weight:400}
  .pchk{width:18px;height:18px;flex:none;position:relative}
  .pchk .spin{position:absolute;inset:0;border:2px solid var(--brand-100);border-top-color:var(--brand-600);border-radius:50%;animation:spin .7s linear infinite;display:none}
  .pchk .ok{width:18px;height:18px;color:var(--brand-600);display:none}
  .pstep.active .pchk .spin{display:block}
  .pstep.done .pchk .ok{display:block}
  @keyframes spin{to{transform:rotate(360deg)}}
  .pipe-done{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);display:none;align-items:center;gap:12px;flex-wrap:wrap}
  .pipe-done.show{display:flex;animation:fade .3s var(--ease)}

  /* human in the loop */
  .hitl{display:none;margin-top:12px;border:1px solid var(--amber-100);background:#FDF9F0;border-radius:var(--r);padding:15px 17px}
  .hitl.show{display:block;animation:fade .35s var(--ease)}
  .hitl .hl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-700);display:flex;align-items:center;gap:7px;margin-bottom:8px}
  .hitl .hl svg{width:14px;height:14px}
  .hitl .hq{font-size:13.5px;color:var(--ink-2);line-height:1.55}
  .hitl .prop{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 13px;display:flex;align-items:center;gap:11px}
  .hitl .prop .pv{width:32px;height:32px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
  .hitl .prop .pn{font-weight:600;font-size:13.5px}
  .hitl .prop .pd{font-size:11.5px;color:var(--muted)}
  .hitl .hact{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

  /* assistente agenda */
  .assist{border:1px solid var(--brand-100);background:var(--brand-50);border-radius:var(--r);padding:16px 18px;box-shadow:none;margin-bottom:18px}
  .assist .al{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:7px;margin-bottom:10px}
  .assist .al svg{width:14px;height:14px}
  .assist-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
  .assist-row select{appearance:none;font-family:inherit;font-size:13.5px;color:var(--ink);background-color:#fff;border:1px solid var(--line-4);border-radius:9px;padding:9px 30px 9px 12px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235F6C84' stroke-width='1.6'><path d='M4 6l4 4 4-4' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
  .assist .aq{font-size:13.5px;color:var(--ink-2)}
  .slots{margin-top:14px;display:none;flex-direction:column;gap:9px}
  .slots.show{display:flex;animation:fade .35s var(--ease)}
  .slot{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:13px;box-shadow:var(--sh-sm)}
  .slot .rank{width:26px;height:26px;border-radius:7px;background:var(--brand-600);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
  .slot .rank.b{background:#6E7F9B}
  .slot .sw{flex:1;min-width:0}
  .slot .sd{font-weight:600;font-size:13.5px}
  .slot .sr{font-size:12px;color:var(--muted);margin-top:2px}
  .slot .sr b{color:var(--brand);font-weight:600}
  .slot-foot{margin-top:2px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
  .slot-foot .note{margin:0}
  .excl{font-size:12px;color:var(--muted);line-height:1.7}
  .excl b{color:var(--ink-2);font-weight:600}

  /* warning conflitto */
  .warnbox{border:1px solid var(--amber-100);background:var(--amber-50);border-radius:9px;padding:12px 14px;display:flex;gap:11px;align-items:flex-start;margin-top:4px}
  .warnbox svg{width:17px;height:17px;color:var(--amber-700);flex:none;margin-top:1px}
  .warnbox .wt{font-size:13px;color:var(--amber-900);line-height:1.55}

  /* search */
  /* la ricerca è un campo: il bordo dei controlli (16 ottobre 2026) */
  .search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-4);border-radius:11px;padding:12px 16px;box-shadow:var(--sh-sm);transition:.15s}
  .search:focus-within{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-50)}
  .search svg{width:17px;height:17px;color:var(--faint);flex:none}
  .search input{border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:14px;color:var(--ink);background:none}
  .search input::placeholder{color:var(--faint)}
  /* il segnaposto di ogni campo: quello del navigatore (#757575) sul fondo
     --wash di alcune ricerche stava a 4,4:1, sotto AA; --faint regge 4,5:1
     anche lì e resta più chiaro di quello che si scrive (16 ottobre 2026) */
  input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
  .chip{font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);padding:6px 12px;border-radius:100px;transition:.15s}
  .chip:hover{border-color:var(--brand-600);color:var(--brand);background:var(--brand-50)}
  .answer{margin-top:14px;border:1px solid var(--brand-100);background:var(--brand-50);border-radius:var(--r);padding:16px 18px;box-shadow:none;display:none}
  .answer.show{display:block;animation:fade .35s var(--ease)}
  .answer .a-lbl{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:6px;margin-bottom:7px}
  .answer .a-lbl svg{width:13px;height:13px;flex:0 0 auto}
  .answer .a-txt{font-size:13.5px;color:var(--ink-2)}
  .answer .a-src{margin-top:10px;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
  .answer .a-src:hover{color:var(--brand)}

  /* ---------- risultati della ricerca: passaggi, non risposte ---------- */
  .hits{margin-top:14px;display:flex;flex-direction:column;gap:9px}
  .hit{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--sh-sm);cursor:pointer;transition:.14s var(--ease)}
  .hit:hover{border-color:var(--brand-100);box-shadow:var(--sh-md)}
  .hit .hh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
  .hit .hn{font-size:13px;font-weight:600}
  .hit .hd{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
  .hit .hx{font-size:13.5px;color:var(--ink-2);line-height:1.6}
  .hit .hx mark{background:var(--brand-100);color:var(--navy-900);padding:0 2px;border-radius:2px}
  .hit .hf{margin-top:8px;font-size:11.5px;color:var(--faint)}
  .hit .hf b{color:var(--muted);font-weight:600}
  .srcnote{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.6;border-top:1px solid var(--line);padding-top:11px}
  .srcnote b{color:var(--ink-2)}
  .noh{padding:18px;text-align:center;color:var(--muted);font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-top:14px}

  /* agenda */
  .agenda-tabs{display:inline-flex;background:var(--soft);border-radius:10px;padding:3px;margin-bottom:16px}
  .agenda-tabs button{font-size:13px;font-weight:600;color:var(--muted);padding:7px 16px;border-radius:8px;transition:.15s;min-height:40px}
  .agenda-tabs button.on{background:var(--brand-50);color:var(--brand);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--brand-600)}
  .legend{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 14px;font-size:12px;color:var(--muted);align-items:center}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
  .z-reggio{background:var(--brand-600)} .z-reggio-s{background:var(--brand-50);border-left:3px solid var(--brand-600);color:var(--brand)}
  .z-bologna{background:var(--amber-700)} .z-bologna-s{background:var(--amber-50);border-left:3px solid var(--amber-700);color:var(--amber-900)}
  .z-mantova{background:var(--plum-700)} .z-mantova-s{background:var(--plum-50);border-left:3px solid var(--plum-700);color:#553D87}
  .z-teams{background:#7E8AA0} .z-teams-s{background:var(--soft);border-left:3px solid #7E8AA0;color:var(--ink-2)}
  .cal{display:grid;grid-template-columns:52px repeat(5,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--sh-sm)}
  .cal-hd{padding:10px 6px;text-align:center;border-bottom:1px solid var(--line);border-left:1px solid var(--line-2);font-size:12px}
  .cal-hd:first-child{border-left:none}
  .cal-hd .dw{font-weight:600;color:var(--ink)} .cal-hd .dd{color:var(--faint);font-size:11px}
  .cal-gutter{border-right:1px solid var(--line-2)}
  .cal-gutter .hr{height:46px;font-size:10.5px;color:var(--faint);text-align:right;padding:2px 6px 0 0;position:relative;top:-7px}
  .cal-col{position:relative;border-left:1px solid var(--line-2);height:414px}
  .cal-col .line{position:absolute;left:0;right:0;height:1px;background:var(--line-2)}
  .appt{position:absolute;left:5px;right:5px;border-radius:7px;padding:6px 8px;font-size:11.5px;overflow:hidden;box-shadow:var(--sh-sm)}
  .appt .ac{font-weight:600;line-height:1.2}
  /* il luogo sotto il nome senza trasparenza: a .8 sull'ambra di un
     appuntamento da confermare stava a 3,9:1 (16 ottobre 2026) */
  .appt .az{font-size:10.5px;margin-top:1px}
  .appt.pop{animation:apptpop .5s var(--ease)}
  @keyframes apptpop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.04)}100%{transform:none;opacity:1}}
  .zday{display:flex;flex-direction:column;gap:14px}
  .zblock{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);background:var(--surface)}
  .zblock .zh{padding:10px 16px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:9px;color:var(--ink)}
  .zblock .zi{padding:12px 16px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:12px;font-size:13.5px}
  .zblock .zi .zt{color:var(--muted);font-variant-numeric:tabular-nums;width:56px}
  .zblock .zi .zn{font-weight:600}

  /* form / compose */
  .compose{padding:18px 20px}
  .field{margin-bottom:16px}
  .field:last-child{margin-bottom:0}
  .field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
  .field input[type=text],.field input[type=date],.field input[type=tel],.field input[type=email],
  .field input[type=number],.field input[type=time],.field select,.field textarea{width:100%;font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line-4);border-radius:9px;padding:10px 13px;outline:none;transition:.15s}
  .field textarea{min-height:76px;resize:vertical;line-height:1.6}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-50)}
  /* la riga di due campi porta lei lo spazio sotto: con .field:last-child a
     zero, sul telefono (una colonna) il secondo campo di una riga toccava il
     primo della riga dopo («Nome» attaccato a «Titolo») */
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
  .frow:last-child{margin-bottom:0}
  .frow>.field{margin-bottom:0}
  .select{position:relative}
  /* nei modelli «select» è usata anche direttamente sul campo (_dafare,
     _azioni, la scheda cliente), non solo sull'involucro: senza queste righe
     restava un campo di sistema, fuori dal disegno e con l'altezza sbagliata */
  input.select,select.select,textarea.select{
    max-width:100%;font-family:inherit;font-size:14px;color:var(--ink);
    background:var(--surface);border:1px solid var(--line-4);border-radius:9px;
    padding:10px 12px;outline:none;transition:.15s}
  input.select:focus,select.select:focus,textarea.select:focus{
    border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-50)}
  .select select{appearance:none;width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line-4);border-radius:9px;padding:11px 38px 11px 14px;cursor:pointer;transition:.15s}
  .select select:hover{border-color:var(--brand-600)}
  .select svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
  .msgbox{border:1px solid var(--line);border-radius:9px;padding:14px 16px;font-size:13.5px;line-height:1.6;color:var(--ink-2);background:#FAFCFF}
  .var{background:var(--brand-100);color:var(--navy-900);border-radius:5px;padding:0 5px;font-weight:600;font-size:12.5px}
  .preview{margin-top:9px;font-size:12px;color:var(--muted)}
  .preview b{color:var(--ink-2)}
  .cost{margin-top:10px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
  .cost svg{width:14px;height:14px;color:var(--faint);flex:none}

  /* settings */
  .setrow{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
  .setrow:last-child{border-bottom:none}
  .setrow .lead{flex:1}
  .setrow .lead .t{font-weight:600;font-size:14px}
  .setrow .lead .d{font-size:12.5px;color:var(--muted);margin-top:2px}
  .stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--line-4);border-radius:9px;overflow:hidden}
  .stepper button{width:36px;height:40px;font-size:17px;color:var(--muted);transition:.12s}
  .stepper button:hover{background:var(--tint);color:var(--brand)}
  .stepper .val{min-width:74px;text-align:center;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
  .toggle{width:42px;height:24px;border-radius:100px;background:#D3DCE9;position:relative;transition:.2s var(--ease);flex:none;cursor:pointer}
  .toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-sm);transition:.2s var(--ease)}
  .toggle.on{background:var(--brand-600)}
  .toggle.on::after{transform:translateX(18px)}
  /* L'interruttore vero: .toggle è solo il disegno; con una casella dentro
     (<label class="imp-tog"><input type="checkbox"><span class="toggle">) si
     legge e si manda come un modulo e si accende con lo spazio. Nato in
     Impostazioni (segmenti.css), in comune dalla fusione del 14 ottobre 2026. */
  .imp-tog{position:relative;display:inline-flex;align-items:center;flex:none;cursor:pointer;min-height:40px}
  .imp-tog input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
  .imp-tog input:checked+.toggle{background:var(--brand-600)}
  .imp-tog input:checked+.toggle::after{transform:translateX(18px)}
  .imp-tog input:focus-visible+.toggle{box-shadow:0 0 0 3px var(--brand-50),0 0 0 4px var(--brand-600)}
  .tmpl{display:flex;gap:8px;flex-wrap:wrap;padding:16px 18px}
  .tmpl .tg{font-size:12.5px;color:var(--ink-2);background:var(--tint);padding:7px 13px;border-radius:9px;display:flex;align-items:center;gap:7px}
  .tmpl .tg svg{width:13px;height:13px;color:var(--brand-600)}
  .note{font-size:12.5px;color:var(--muted);margin-top:11px}
  /* .hint compare 28 volte nei modelli e non era mai stata definita: quelle
     righe uscivano grandi e nere come il testo normale invece che piccole e
     smorzate. Da scrivania si notava poco, sul telefono si mangiavano lo
     schermo — la spiegazione pesava quanto il dato. */
  .hint{font-size:12px;color:var(--muted);line-height:1.45}
  .hint b{color:var(--ink-2);font-weight:600}

  /* ---------- cadenza: quanto manca o quanto è scoperto ---------- */
  .gauge{display:flex;align-items:center;gap:9px;min-width:148px}
  .gauge .tk{position:relative;flex:1;height:8px;background:var(--soft);border-radius:100px;overflow:hidden;min-width:58px}
  .gauge .tk .fl{position:absolute;left:0;top:0;bottom:0;background:var(--brand-100)}
  .gauge .tk .ov{position:absolute;top:0;bottom:0;background:var(--red-700);opacity:.8}
  .gauge .tk .du{position:absolute;top:-1px;bottom:-1px;width:1.5px;background:var(--ink);opacity:.32}
  .gauge .gv{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:50px;text-align:right;color:var(--muted)}
  .gauge .gv.late{color:var(--red-700)}
  .gauge.wide{min-width:100%}

  /* ---------- materiale grezzo: attesa e ricevuta ---------- */
  .rcpt{border:1px solid var(--line);background:var(--wash);border-radius:var(--r);padding:14px 16px}
  .rcpt.gone{border-color:var(--red-100);background:var(--red-50)}
  .rcpt .rh{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:700;color:var(--brand);line-height:1.4}
  .rcpt.gone .rh{color:var(--red-700)}
  .rcpt .rh svg{width:15px;height:15px;flex:none;margin-top:2px}
  .rcpt p{font-size:12.5px;color:var(--ink-2);margin-top:7px;line-height:1.6}
  .rcpt .fine{margin-top:11px;padding-top:10px;border-top:1px solid rgba(14,23,38,.09);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);line-height:1.9;word-break:break-all}
  .rcpt .fine b{color:var(--ink-2);font-weight:600}

  /* ---------- materiale originale: ascoltare, leggere, scaricare ----------
     Pensato sul telefono. Il lettore prende tutta la larghezza, perché la
     barra del tempo è quella che si tocca col pollice. La trascrizione
     chiusa è una riga, e aperta scorre dentro il riquadro invece di spingere
     il resto della pagina tre schermate più giù. */
  .mat{padding:4px 17px 14px;max-width:720px}
  .mat-voce{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .mat-voce:last-of-type{border-bottom:none}
  .mat-t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
  .mat-t svg{width:15px;height:15px;flex:none;color:var(--brand)}
  .mat-audio{display:block;width:100%;max-width:100%;margin-top:10px;height:44px}
  .mat-az{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
  .mat-p{font-size:12.5px;color:var(--ink-2);margin-top:7px;line-height:1.6}
  .mat-vuoto{font-size:13px;color:var(--muted);padding:10px 0 0;line-height:1.55}
  .mat-voce .warnbox{margin-top:10px}
  .mat-testo{margin-top:8px}
  /* il triangolo di <details> sparisce con display:flex (e su Safari non
     c'è comunque): una freccia che gira dice che la riga si apre */
  .mat-testo summary{cursor:pointer;font-size:13px;color:var(--brand);padding:8px 0;min-height:40px;
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;list-style:none}
  .mat-testo summary::-webkit-details-marker{display:none}
  .mat-testo summary::before{content:"";width:6px;height:6px;margin:0 5px 0 2px;flex:none;
    border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
    transform:rotate(-45deg);transition:transform .15s}
  .mat-testo[open] summary::before{transform:rotate(45deg)}
  .mat-corpo{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.65;color:var(--ink-2);
    background:var(--wash);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px;
    max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mat-fine{margin-top:4px;padding-top:10px;border-top:1px solid rgba(14,23,38,.09);font-size:11.5px;
    color:var(--muted);line-height:1.8;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
  .mat-fine b{color:var(--ink-2);font-weight:600}

  /* ---------- consensi ---------- */
  .cons{border:1px solid var(--line);border-radius:9px;overflow:hidden}
  .cons .cr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid var(--line-2)}
  .cons .cr:last-child{border-bottom:none}
  .cons .cr .t{font-size:13px;font-weight:600}
  .cons .cr .d{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}

  /* ---------- consenso mancante: blocco di un percorso ---------- */
  .blockc{border:1px solid var(--amber-100);background:var(--amber-50);border-radius:var(--r);padding:17px 19px;max-width:620px}
  .blockc b{color:var(--amber-900);font-size:13.5px}
  .blockc p{font-size:12.5px;color:var(--amber-900);margin-top:7px;line-height:1.6}
  /* il consenso dentro Importa, accanto al file audio, e l'audio che aspetta
     il consenso (1 ottobre 2026) */
  .cons-in{border:1px solid var(--amber-100);background:var(--amber-50);border-radius:var(--r);padding:13px 15px;margin-top:12px}
  .cons-in[hidden]{display:none}
  .cons-in b{color:var(--amber-900);font-size:13.5px}
  .cons-in>p{font-size:12.5px;color:var(--amber-900);margin-top:5px;line-height:1.55}
  .cons-in .chk-riga{margin-top:6px;min-height:44px;font-weight:600;color:var(--amber-900)}
  .cons-in .hint{margin-top:4px}
  .attesa-file{display:flex;align-items:center;gap:12px;padding:13px 15px;margin-top:14px;max-width:620px}
  .attesa-file svg{width:20px;height:20px;flex:none;color:var(--muted)}
  .attesa-file div{min-width:0}
  .attesa-file b{display:block;font-size:13.5px;overflow-wrap:anywhere}
  .attesa-file small{color:var(--muted);font-size:12px}
  .attesa-azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
  .attesa-azioni form{display:contents}

  /* ---------- dettaglio tecnico dell'elaborazione ---------- */
  .tech{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:12.5px;margin:0}
  .tech dt{color:var(--muted)}
  .tech dd{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}

  /* ---------- nucleo familiare ---------- */
  .nuc{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--brand-100);background:var(--brand-50);border-radius:9px;margin-top:12px}
  .nuc .nt{font-size:12.5px;color:var(--navy-900);line-height:1.5;flex:1}
  .nuc .nt b{font-weight:700}
  .chkline{display:flex;align-items:flex-start;gap:9px;cursor:pointer;padding:8px 0}
  .chkline input{margin-top:2px;accent-color:var(--brand);width:15px;height:15px;flex:none}
  .chkline .cl-t{font-size:13px;font-weight:600}
  .chkline .cl-d{font-size:11.5px;color:var(--muted);margin-top:1px}

  /* ---------- import ---------- */
  .imp-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
  .imp-step:last-child{border-bottom:none}
  .imp-step .n{width:24px;height:24px;flex:none;border-radius:50%;background:var(--brand-600);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
  .imp-step.todo .n{background:var(--soft);color:var(--muted)}
  .imp-step .b{flex:1}
  .imp-step .t{font-size:13.5px;font-weight:600}
  .imp-step .d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5}
  .impbar{height:7px;background:var(--soft);border-radius:100px;overflow:hidden;margin:10px 0 6px}
  .impbar i{display:block;height:100%;background:var(--brand-600);border-radius:100px;transition:width .5s var(--ease)}
  .errtbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px}
  .errtbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
  .errtbl td{padding:7px 8px;border-bottom:1px solid var(--line-2);vertical-align:top}
  .errtbl .rn{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

  /* ---------- registro azioni ---------- */
  .aud{font-size:12.5px;border-collapse:collapse;width:100%}
  .aud td{padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
  .aud .ts{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;width:1%}
  .aud .who{font-weight:600;white-space:nowrap;width:1%}
  .aud .act{color:var(--ink-2);line-height:1.5}

  /* drawer */
  .scrim{position:fixed;inset:0;background:rgba(2,26,58,.4);opacity:0;pointer-events:none;transition:.28s var(--ease);z-index:40}
  .scrim.show{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100vh;width:min(480px,94vw);background:var(--surface);box-shadow:var(--sh-lg);transform:translateX(100%);transition:transform .34s var(--ease);z-index:50;display:flex;flex-direction:column}
  .drawer.show{transform:none}
  /* chiuso, fuori schermo, non lascia la sua ombra sul bordo (giro 2 di
     v17-registra: una fascia grigia lungo il bordo destro di ogni pagina) */
  .drawer:not(.show){box-shadow:none}
  #drawer-inner{display:flex;flex-direction:column;height:100%;min-height:0}
  .dr-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between}
  .dr-head .eal{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
  .dr-head .ti{font-size:19px;font-weight:700;margin-top:3px;letter-spacing:-.45px;overflow-wrap:anywhere}
  .dr-head>div:first-child{min-width:0}
  .dr-head .mt{font-size:12.5px;color:var(--muted);margin-top:2px}
  /* 40 px anche col mouse, come ogni bottone (15 ottobre 2026; era 34) */
  .x{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.12s;flex:none}
  .x:hover{background:var(--tint);color:var(--ink)}
  .x svg{width:18px;height:18px}
  .dr-body{flex:1;overflow-y:auto;padding:22px 24px}
  .dr-body.wa-body{background:var(--wa-bg);padding:18px;background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 0);background-size:16px 16px}
  .dr-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;background:#FAFCFF;flex-wrap:wrap}
  .sec-l{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:20px 0 9px;display:flex;align-items:center;gap:7px}
  .sec-l:first-child{margin-top:0}
  .summary{font-size:14px;line-height:1.65;color:var(--ink-2)}
  .todo-l{list-style:none;display:flex;flex-direction:column;gap:8px}
  /* overflow-wrap: la lista serve i punti chiave e «Cosa non è chiaro», e le
     righe delle incertezze portano la frase detta nell'incontro, cioè testo
     di whisper, che ogni tanto attacca due parole in una sola lunghissima.
     Dentro un elemento flex una parola che non va a capo non si stringe: esce
     dal riquadro e a 390 px trascina di lato tutta la pagina (misurato:
     riga 939 px in un riquadro da 322, pagina 973 px su schermo da 390).
     `anywhere` e non `break-word` perché è l'unico che stringe anche la
     larghezza minima dell'elemento, che è quella che allargava la pagina. */
  .todo-l li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink-2);
    overflow-wrap:anywhere}
  .todo-l li .d{width:6px;height:6px;border-radius:50%;background:var(--brand-600);margin-top:7px;flex:none}
  .privacy{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--green-700);background:var(--green-50);padding:6px 11px;border-radius:100px}
  .privacy svg{width:14px;height:14px}
  .kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
  .kv .l{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-bottom:2px}
  .kv .v{font-size:14px;color:var(--ink);font-weight:500}
  .tline{list-style:none;padding-left:4px}
  .tline li{position:relative;padding:0 0 16px 20px;border-left:2px solid var(--line);margin-left:3px;font-size:13.5px;color:var(--ink-2)}
  .tline li:last-child{border-left-color:transparent;padding-bottom:0}
  .tline li::before{content:"";position:absolute;left:-6px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--brand-100);border:2px solid var(--brand-600)}
  .tline .dt{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;display:block;margin-bottom:2px}
  .textarea{width:100%;min-height:96px;font-family:inherit;font-size:13.5px;line-height:1.6;color:var(--ink);border:1px solid var(--brand-600);border-radius:9px;padding:12px 14px;outline:none;resize:vertical;box-shadow:0 0 0 3px var(--brand-50)}
  .edit-todo{display:flex;align-items:center;gap:9px;margin-bottom:8px}
  .edit-todo input{flex:1;font-family:inherit;font-size:13.5px;border:1px solid var(--line-4);border-radius:8px;padding:9px 11px;outline:none}
  .edit-todo input:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-50)}
  .edit-todo .rm{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--faint);flex:none}
  .edit-todo .rm:hover{background:var(--red-50);color:var(--red-700)}

  /* messaggio pronto da mandare al cliente */
  .ch-tabs{display:inline-flex;background:var(--soft);border-radius:9px;padding:3px;margin-bottom:12px}
  .ch-tabs button{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 13px;border-radius:7px;transition:.15s;min-height:40px}
  .ch-tabs button svg{width:14px;height:14px}
  .ch-tabs button.on{background:var(--brand-50);color:var(--brand);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--brand-600)}
  .msg-doc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:17px 19px;font-size:13.5px;line-height:1.62;color:var(--ink-2);box-shadow:var(--sh-sm)}
  .msg-doc p{margin-bottom:13px}
  .msg-doc p:last-child{margin-bottom:0}
  .msg-doc .arg{margin-bottom:13px;padding-left:15px;border-left:2px solid var(--brand-100)}
  .msg-doc .arg b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
  .msg-doc .lbl{font-weight:600;color:var(--ink);margin-bottom:5px}
  .msg-doc ul{list-style:none;margin-bottom:13px}
  .msg-doc ul li{padding-left:22px;position:relative;margin-bottom:4px}
  /* il trattino breve e non quello lungo: il brand non lo usa mai */
  .msg-doc ul li::before{content:"–";position:absolute;left:0;color:var(--brand-600)}
  .msg-doc .firma{color:var(--muted)}
  .edit-arg{border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:9px;background:#FAFCFF}
  .edit-arg input{width:100%;font-family:inherit;font-size:13px;font-weight:600;border:1px solid var(--line-4);border-radius:7px;padding:8px 10px;outline:none;margin-bottom:7px}
  .edit-arg textarea{width:100%;min-height:58px;font-family:inherit;font-size:12.5px;line-height:1.55;border:1px solid var(--line-4);border-radius:7px;padding:8px 10px;outline:none;resize:vertical}
  .edit-arg input:focus,.edit-arg textarea:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-50)}
  .edit-arg .eh{display:flex;align-items:center;gap:8px;margin-bottom:7px}
  .edit-arg .eh input{margin:0}
  .interno{background:#F5F8FD;border:1px dashed #CFD9E8;border-radius:9px;padding:13px 15px}
  .interno .il{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:6px;margin-bottom:8px}
  .interno .il svg{width:13px;height:13px}

  /* modal */
  .mscrim{position:fixed;inset:0;background:rgba(2,26,58,.42);opacity:0;pointer-events:none;transition:.24s var(--ease);z-index:60;display:grid;place-items:center;padding:20px}
  .mscrim.show{opacity:1;pointer-events:auto}
  .modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:min(480px,100%);max-height:88vh;display:flex;flex-direction:column;transform:translateY(12px) scale(.98);transition:.24s var(--ease)}
  .mscrim.show .modal{transform:none}
  .m-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
  .m-head .mt2{font-size:16.5px;font-weight:700;letter-spacing:-.35px}
  .m-body{padding:20px 22px;overflow-y:auto}
  .m-foot{padding:15px 22px;border-top:1px solid var(--line);display:flex;gap:9px;background:#FAFCFF;align-items:center}
  .m-foot .left{margin-right:auto}

  /* toasts */
  .toasts{position:fixed;bottom:24px;right:24px;z-index:80;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
  .toast{background:var(--navy-900);color:var(--side-on);font-size:13.5px;font-weight:500;padding:13px 17px;border-radius:11px;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:11px;transform:translateY(10px) scale(.96);opacity:0;animation:pop .35s var(--ease) forwards;max-width:360px}
  .toast svg{width:18px;height:18px;color:var(--brand-400);flex:none}
  @keyframes pop{to{transform:none;opacity:1}}
  .toast.out{animation:popout .3s var(--ease) forwards}
  @keyframes popout{to{opacity:0;transform:translateY(6px) scale(.97)}}

  /* ══════ INCONTRI ══════ */
  .inc-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px;margin-bottom:6px}
  a.inc-mode{display:block;text-decoration:none;color:inherit}
  /* i percorsi che aspettano il modulo di elaborazione si vedono e si aprono —
     dicono cosa faranno e cosa serve — ma non si travestono da attivi */
  .inc-mode h3 .pill{margin-left:6px;vertical-align:middle}
  .inc-mode{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:19px 17px;text-align:left;box-shadow:var(--sh-sm);transition:.18s var(--ease)}
  .inc-mode:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--brand-100)}
  .inc-mode .ic{width:38px;height:38px;border-radius:11px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;margin-bottom:12px}
  .inc-mode .ic svg{width:19px;height:19px}
  .inc-mode h3{font-size:14.5px;font-weight:600;margin-bottom:4px}
  .inc-mode p{font-size:12.5px;color:var(--muted);line-height:1.45}
  .inc-mode .tm{margin-top:10px;font-size:11.5px;font-weight:600;color:var(--brand)}

  .inc-rec-wrap{display:grid;grid-template-columns:1fr 330px;gap:15px;align-items:start}
  .inc-recmain{padding:24px 20px;text-align:center}
  .inc-dot{width:12px;height:12px;border-radius:50%;background:var(--red-700);display:inline-block;margin-right:8px;vertical-align:middle;animation:incblink 1.5s var(--ease) infinite}
  .inc-dot.pau{background:var(--amber-700);animation:none}
  @keyframes incblink{0%,100%{opacity:1}50%{opacity:.25}}
  .inc-time{font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1;margin:7px 0 2px;font-variant-numeric:tabular-nums}
  .inc-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:42px;margin-bottom:20px}
  .inc-wave i{width:3px;border-radius:2px;background:var(--brand-600);opacity:.75;animation:incw 1.1s var(--ease) infinite}
  .inc-wave.off i{animation-play-state:paused;opacity:.26}
  @keyframes incw{0%,100%{height:7px}50%{height:32px}}
  .inc-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .inc-consent{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--amber-50);border:1px solid var(--amber-100);border-radius:var(--r-sm);margin-bottom:18px;text-align:left}
  .inc-consent input{margin-top:2px;width:16px;height:16px;accent-color:var(--amber-700);flex:none}
  .inc-consent label{font-size:12.5px;color:var(--amber-900);line-height:1.45;cursor:pointer}

  .inc-notes{display:flex;flex-direction:column;max-height:500px}
  .inc-nh{padding:13px 15px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between}
  .inc-nl{flex:1;overflow-y:auto;padding:5px 0;min-height:105px}
  .inc-ni{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line-2)}
  .inc-ni input{flex:1;border:1px solid var(--line-4);border-radius:8px;padding:8px 11px;background:var(--wash);font-family:inherit;font-size:13px}
  .inc-note{display:flex;gap:10px;padding:8px 15px;border-bottom:1px solid var(--line-2);font-size:13px}
  .inc-note:last-child{border-bottom:none}
  .inc-note .tt{color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums;flex:none;padding-top:2px}
  .inc-ne{padding:24px 15px;text-align:center;color:var(--faint);font-size:12.5px}

  .inc-proc{padding:28px 22px;text-align:center}
  .inc-el{font-size:38px;font-weight:800;letter-spacing:-1.6px;line-height:1;font-variant-numeric:tabular-nums}
  .inc-steps{display:flex;flex-direction:column;gap:2px;max-width:330px;margin:20px auto 0;text-align:left}
  .inc-step{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:13px;color:var(--faint);transition:.2s}
  .inc-step.on{background:var(--brand-50);color:var(--brand);font-weight:600}
  .inc-step.done{color:var(--ink-2)}
  .inc-step .mk{width:19px;height:19px;border-radius:50%;border:1.8px solid currentColor;display:grid;place-items:center;flex:none;font-size:10px}
  .inc-step.done .mk{background:var(--brand);border-color:var(--brand);color:#fff}

  .inc-ai{display:flex;gap:9px;align-items:flex-start;padding:11px 14px;background:var(--amber-50);border:1px solid var(--amber-100);border-radius:var(--r-sm);font-size:12.5px;color:var(--amber-900);margin-bottom:16px}
  .inc-ai svg{width:15px;height:15px;flex:none;margin-top:1px}
  .inc-ta{width:100%;border:0;background:none;resize:vertical;line-height:1.6;font-size:13.8px;font-family:inherit;color:inherit}
  .inc-ta:focus{outline:none}
  .inc-saved{font-size:11px;color:var(--brand);font-weight:600;opacity:0;transition:.25s;text-transform:none;letter-spacing:0}
  .inc-saved.on{opacity:1;animation:svanisci 2.4s var(--ease) forwards}
  @keyframes svanisci{0%,55%{opacity:1}100%{opacity:0}}
  .inc-td{border-top:1px solid var(--line-2);padding:12px 16px}
  .inc-td:first-child{border-top:0}
  .inc-tdr{display:flex;gap:11px;align-items:flex-start}
  .inc-chk{width:20px;height:20px;border-radius:6px;border:1.7px solid var(--line-4);flex:none;margin-top:2px;display:grid;place-items:center;color:transparent;font-size:11px;transition:.14s}
  .inc-chk.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .inc-tdr input[type=text]{flex:1;min-width:0;border:0;background:none;padding:2px 0;font-size:13.8px;font-weight:600;font-family:inherit;color:inherit}
  .inc-tdr input[type=text]:focus{outline:none;border-bottom:1px solid var(--brand-600)}
  .inc-tdm{display:flex;gap:8px;align-items:center;margin:7px 0 0 31px;flex-wrap:wrap}
  .inc-tdm input[type=date]{border:1px solid var(--line-4);border-radius:7px;padding:3px 8px;font-size:11.5px;color:var(--muted);background:var(--surface);font-family:inherit}
  .inc-src{font-size:11.5px;font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:4px}
  .inc-src.ded{color:var(--amber-700)}
  .inc-cite{display:none;margin:9px 0 0 31px;padding:10px 13px;background:var(--wash);border-left:2.5px solid var(--brand-600);border-radius:0 7px 7px 0;font-size:12.8px;color:var(--ink-2);font-style:italic;line-height:1.5}
  .inc-cite.ded{border-left-color:var(--amber-700);color:var(--amber-900);font-style:normal;background:var(--amber-50)}
  .inc-td.open .inc-cite{display:block}
  .inc-tog{display:inline-flex;background:var(--soft);border-radius:9px;padding:3px;gap:2px}
  .inc-tog button{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:7px;color:var(--muted);text-transform:none;letter-spacing:0}
  .inc-tog button.on{background:var(--brand-50);color:var(--brand);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--brand-600)}

  .inc-arch{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
  .inc-folders{display:flex;flex-direction:column;gap:2px}
  .inc-fold{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;font-size:13px;color:var(--ink-2);text-align:left;width:100%;transition:.14s}
  .inc-fold:hover{background:var(--soft)}
  .inc-fold.on{background:var(--brand-50);color:var(--brand);font-weight:600}
  .inc-fold svg{width:15px;height:15px;flex:none;opacity:.75}
  .inc-fold .n{margin-left:auto;font-size:11px;color:var(--faint)}
  .inc-row{display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;transition:.14s}
  .inc-row:last-child{border-bottom:none}
  .inc-row:hover{background:var(--hover)}
  .inc-row .dt{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none;width:50px}
  .inc-row .nm{font-weight:600;font-size:13.5px}
  .inc-row .ex{font-size:12px;color:var(--muted);margin-top:1px}

  @media(max-width:899px){
    .inc-modes{grid-template-columns:1fr}
    .inc-rec-wrap{grid-template-columns:1fr}
    .inc-arch{grid-template-columns:1fr}
    .inc-folders{flex-direction:row;overflow-x:auto;padding-bottom:6px}
    .inc-fold{white-space:nowrap}
    .inc-time{font-size:42px}
    .inc-tdm,.inc-cite{margin-left:0}
  }


  .inc-picker{display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:18px;flex-wrap:wrap}
  .inc-pk-l{font-size:13px;font-weight:600;color:var(--ink-2);flex:none}
  .inc-pk-box{position:relative;flex:1;min-width:200px}
  .inc-pk-box input{width:100%;border:1px solid var(--line-4);border-radius:9px;padding:9px 12px;background:var(--wash);font-family:inherit;font-size:13.5px;color:inherit}
  .inc-pk-box input:focus{outline:none;border-color:var(--brand-600);background:var(--surface)}
  .inc-pk-drop{display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);z-index:60;max-height:250px;overflow-y:auto}
  .inc-pk-drop.on{display:block}
  .inc-pk-i{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--line-2);text-align:left;width:100%}
  .inc-pk-i:last-child{border-bottom:none}
  .inc-pk-i:hover{background:var(--brand-50)}
  .inc-pk-i .av{width:29px;height:29px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;font-weight:600;font-size:11px;flex:none}
  .inc-pk-i b{font-size:13.3px;font-weight:600;display:block}
  .inc-pk-i small{font-size:11.5px;color:var(--muted)}
  .inc-pk-new{color:var(--brand);font-weight:600;font-size:13px;padding:11px 13px;border-top:1px solid var(--line);width:100%;text-align:left}
  .inc-pk-new:hover{background:var(--brand-50)}
  .inc-sel{display:flex;align-items:center;gap:11px;padding:12px 16px;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r);margin-bottom:18px}
  .inc-sel .av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:600;font-size:12.5px;flex:none}
  .inc-sel b{font-size:13.8px;display:block;overflow-wrap:anywhere}
  .inc-sel>div{min-width:0}
  .inc-sel small{font-size:11.5px;color:var(--brand);opacity:.85}
  .inc-sel .inc-src{margin-left:auto}


/* == aggiunte per l'app (non presenti nel prototipo) ================== */
a.nav-i{text-decoration:none}
.htmx-request .htmx-indicator{display:inline}
.htmx-indicator{display:none}
input[type=file].filein{font-size:13px;color:var(--ink-2)}
.map-tbl td{vertical-align:middle}
.map-tbl select{min-width:190px}
.badge-n{display:inline-block;min-width:22px;text-align:center;font-weight:700;border-radius:100px;padding:1px 8px;font-size:12px}
.badge-ok{background:var(--green-50);color:var(--green-700)}
.badge-warn{background:var(--amber-50);color:var(--amber-700)}
.badge-err{background:var(--red-50);color:var(--red-700)}
/* ══════════════════════════════════════════════════════════════════════════
   IL TELEFONO
   Il giro quotidiano — vedere chi è scoperto, aprire una scheda, registrare
   un contatto appena fatto, buttare giù due note dopo un incontro — si fa su
   uno schermo stretto, con una mano sola, con il pollice. Da qui in giù:
   le sezioni in basso dove il pollice arriva, gli elenchi come schede
   impilate invece che tabelle a cinque colonne, bersagli grandi abbastanza
   da centrarli in auto, e la scheda cliente che sale dal basso.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- le sezioni: in basso, non in cima ----------
   Reggendo il telefono con una mano il pollice copre il terzo basso dello
   schermo e non arriva all'angolo in alto. Le quattro sezioni del giro
   quotidiano stanno lì; il resto — che si fa da scrivania — sotto «Altro».
   Navy come la barra laterale: è la stessa barra, spostata dove arriva il
   pollice. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  /* una colonna per tasto, cinque in tutte le app: Oggi · Agenda · il
     tasto rosso · l'elenco del mondo · Altro (base.html, A_VISTA) */
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  background:var(--navy-900);border-top:1px solid var(--side-line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar .tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--tabbar-h);padding:0 3px;position:relative;
  color:var(--side-text);text-decoration:none;font-size:10.5px;font-weight:600;line-height:1.15;
  text-align:center;white-space:nowrap;list-style:none;cursor:pointer;
}
.tabbar .tab svg{width:21px;height:21px;flex:none}
/* «Altro» aperto si accende come la casella della pagina in cui si è (giro
   della barra, 16 ottobre 2026): il menu sta sopra la sua casella */
.tabbar .tab.on,.tabbar .tab-more[open]>.tab{color:#fff}
.tabbar .tab.on svg,.tabbar .tab-more[open]>.tab svg{color:var(--brand-400)}
/* la barra luminosa del brand, orizzontale, sopra la sezione in cui si è */
.tabbar .tab.on::before,.tabbar .tab-more[open]>.tab::before{content:"";position:absolute;top:0;left:50%;width:28px;height:3px;
  transform:translateX(-50%);border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--brand-300),#4D86D6)}
.tabbar .tab:active{background:rgba(255,255,255,.07)}
.tabbar .tab::-webkit-details-marker{display:none}
.tabbar .tab::marker{content:""}

/* «Altro» apre le sezioni da scrivania. <details> invece di un menù scritto
   a mano: si apre e si chiude da solo, funziona anche senza JavaScript. */
.tab-more{position:relative}
.tab-more>.more-menu{
  position:absolute;bottom:calc(100% + 7px);right:6px;min-width:210px;
  background:linear-gradient(180deg,var(--brand),var(--navy-900));
  border:1px solid rgba(255,255,255,.12);border-radius:13px;
  box-shadow:var(--sh-lg);padding:6px;display:flex;flex-direction:column;
}
.tab-more>.more-menu a{
  display:flex;align-items:center;min-height:44px;padding:10px 13px;border-radius:9px;position:relative;
  color:var(--side-on);text-decoration:none;font-size:14px;font-weight:500;
}
/* le voci hanno le icone della barra laterale, come le voci del menu della
   demo: è lo stesso menu, spostato dove arriva il pollice */
.tab-more>.more-menu a{gap:11px}
.tab-more>.more-menu a svg{width:17px;height:17px;flex:none;opacity:.9}
.tab-more>.more-menu a.on svg{color:var(--brand-400);opacity:1}
.tab-more>.more-menu .pomello{fill:var(--navy-900)}
.tab-more>.more-menu a.on{background:var(--side-sel);color:#fff;font-weight:600}
.tab-more>.more-menu a.on::after{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--glow-bar)}
.tab-more>.more-menu a:active{background:rgba(255,255,255,.08)}

/* ---------- registrare un contatto appena fatto ----------
   Il gesto più frequente dal telefono, spesso in auto appena finita la
   telefonata. Sul telefono i tre pezzi si impilano e il bottone è pieno e
   largo quanto la scheda; da 720px tornano in riga come nel prototipo. */
.filtro{margin:0;flex:1 1 100%}
@media(min-width:720px){.filtro{flex:0 1 auto;min-width:190px}}
.dr-azioni{display:flex;gap:8px;align-items:center}
.dr-azioni .btn{flex:1;justify-content:center}
/* Sul telefono canale e nota stanno sulla stessa riga e il bottone sotto,
   pieno: cinque controlli impilati mangiavano metà della scheda e restava una
   finestrella per quello che del cliente si è venuti a leggere. */
.reg-contatto{display:grid;grid-template-columns:auto 1fr;gap:8px;width:100%;min-width:0}
.reg-contatto .canale{grid-column:1}
.reg-contatto .nota{grid-column:2;min-width:0}
.reg-contatto .btn{grid-column:1/-1;width:100%;justify-content:center}
.riga-agg{display:flex;flex-direction:column;gap:8px;padding:12px 15px;border-top:1px solid var(--line-2)}
.riga-agg.nuda{padding:0;border-top:none;margin-top:10px}
.riga-agg .btn{width:100%;justify-content:center}

@media(min-width:720px){
  /* nel piede del cassetto il contatto (pieno) e i due tasti sulla stessa
     riga (giro 1 del 15 ottobre 2026) */
  .reg-contatto{display:flex;flex-direction:row;align-items:center;flex:1 1 240px;min-width:240px}
  .reg-contatto .canale{width:auto;flex:none}
  .reg-contatto .nota{flex:1;min-width:150px}
  .reg-contatto .btn{width:auto}
  .reg-contatto .btn,.riga-agg .btn{width:auto}
  .dr-azioni .btn{flex:none}
  /* nel piede del cassetto il pieno non si allarga a tutta la riga: pieno ·
     bianco · scritta su una riga (giro 2 del 15 ottobre 2026) */
  .dr-foot .reg-contatto{flex:0 0 auto;width:auto;min-width:0}
  .dr-foot{flex-wrap:nowrap;align-items:center}
  .riga-agg{flex-direction:row;align-items:center;padding:11px 16px}
  .riga-agg.nuda{padding:0}
  .riga-agg .testo{flex:1}
}

/* ══════ sotto i 720px: telefono ══════ */
@media(max-width:719px){

  /* ---------- gli elenchi diventano schede impilate ----------
     Cinque colonne su 375px o si tagliano o si stringono a due lettere per
     cella. Il nome prende la sua riga, il resto scorre sotto, e la barra
     della cadenza — che è la cosa da leggere di sbieco — va a tutta larghezza.
     La mappatura dell'import resta una tabella vera: si fa da scrivania. */
  .tbl:not(.map-tbl),
  .tbl:not(.map-tbl) tbody{display:block}
  .tbl:not(.map-tbl) thead{display:none}
  .tbl:not(.map-tbl) tr{
    display:flex;flex-wrap:wrap;align-items:center;gap:3px 9px;
    padding:13px 16px;border-bottom:1px solid var(--line-2)}
  .tbl:not(.map-tbl) tr:last-child{border-bottom:none}
  .tbl:not(.map-tbl) td{display:block;padding:0;border:none;width:auto;font-size:13.5px;order:4}
  .tbl:not(.map-tbl) td:empty{display:none}
  .tbl:not(.map-tbl) td[colspan]{flex-basis:100%}
  /* Tre righe con un ordine deciso, non quello delle colonne: il nome in cima
     con accanto la targhetta di stato, i dati smorzati sotto, e la barra della
     cadenza a chiudere per tutta la larghezza. Senza, la targhetta finiva da
     sola su una terza riga e ogni cliente occupava mezzo schermo. */
  .tbl:not(.map-tbl) td.t-name{order:1;flex-basis:100%;font-size:15.5px;line-height:1.3}
  .tbl:not(.map-tbl) tr:has(.pill) td.t-name{flex:1 1 auto;flex-basis:auto;min-width:45%}
  /* Con la targhetta in una cella sua, base zero e non la larghezza del
     contenuto: un nome lungo, o con sotto una seconda riga («fissato da …»),
     mandava la targhetta su una riga sua. Sotto il 40% il nome non si
     stringe: è la targhetta lunghissima ad andare a capo. Quando la
     targhetta sta dentro la cella del nome («aspetti 2 cose da lui» in Chi
     vedere) resta la regola di sopra: non va a capo, e in 220 px uscirebbe
     dalla cella (fusione del 14 ottobre 2026). */
  .tbl:not(.map-tbl) tr:has(.pill) td.t-name:not(:has(.pill)){flex:1 1 0;min-width:40%}
  .tbl:not(.map-tbl) td:has(.pill):not(:has(.gauge)){order:2;margin-left:auto}
  /* Un'interruzione di riga vera, non un elemento largo: allargare una cella
     non basta, perché il browser prima riempie la riga e solo dopo distribuisce
     lo spazio — e con un nome corto la prima riga diventava «Antonello Ivano ·
     in pausa · Retail», tre cose di peso diverso messe in fila. Lo pseudo-
     elemento della riga è un elemento della griglia come gli altri e, largo
     quanto tutta la riga, manda a capo. Solo dove c'è un nome: le righe di
     «Da fare» non hanno niente da spezzare. */
  .tbl:not(.map-tbl) tr:has(.t-name)::after{content:"";flex-basis:100%;height:0;order:3}
  /* la larghezza fissa della cella della cadenza è scritta nel modello:
     qui va tolta, se no si porta dietro 200px su uno schermo da 375 */
  .tbl:not(.map-tbl) td:has(.gauge){order:5;flex-basis:100%;width:auto!important;margin-top:4px}
  .tbl:not(.map-tbl) td:last-child:not([colspan]):not(:has(.gauge)){margin-left:auto}
  /* l'intestazione della zona resta quella della demo (12 px in maiuscoletto,
     8 e 16 di margine): la regola delle celle qui sopra la portava a 13,5 */
  .tbl:not(.map-tbl) tr.zonehdr{background:var(--tint);padding:8px 16px}
  .tbl:not(.map-tbl) .zonehdr td{flex-basis:100%;background:none;padding:0;font-size:12px}
  .tbl .gauge{min-width:0}
  .map-tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .map-tbl select{min-width:150px}
  /* le tabelle degli scarti dell'import scorrono invece di sfondare la pagina */
  .errtbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .errtbl td{white-space:normal;min-width:130px}

  /* ---------- campi: 16px, o iOS ingrandisce la pagina ----------
     Sotto i 16px Safari zuma sul campo appena lo si tocca e la pagina resta
     storta finché non la si rimette a mano. Vale anche sopra le misure
     scritte a mano nei modelli, da cui !important. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  select,textarea,[contenteditable]{font-size:16px!important}
  input[type=date]{min-height:44px}
  .field input[type=text],.field input[type=date],.field input[type=tel],.field input[type=email],
  .field input[type=number],.field input[type=time],.field select,.field textarea,
  input.select,select.select{padding:11px 13px}
  .frow{grid-template-columns:1fr}

  /* ---------- testata e titoli ----------
     Titolo, sottotitolo, targhette ed etichette hanno le misure della demo
     anche qui: 21 px, 12,5 px, 26 px sopra ogni etichetta. */
  .top{gap:10px}
  /* «margin-left:auto» sul primo bottone è scritto nei modelli: da scrivania
     lo spinge a destra, sul telefono spezzava la riga e lasciava «Nuovo
     cliente» da solo sotto, più in ombra di uno scarico CSV. Solo dove i
     bottoni sono più d'uno: un tasto solo resta a destra, come da scrivania,
     invece di attaccarsi al titolo come una sua parola («Le fonti · 6 Scarica
     adesso»; fusione del 14 ottobre 2026, come .sez-testa) */
  .eyebrow{flex-wrap:wrap;gap:8px}
  .eyebrow:has(.btn ~ .btn) .btn{margin-left:0!important}

  /* ---------- la scheda cliente sale dal basso ----------
     Un cassetto che entra da destra su uno schermo stretto è una finestra
     intera con la chiusura nell'angolo più lontano dal pollice. Dal basso è
     il gesto che il telefono già conosce, e la chiusura resta in alto ma il
     foglio si può spingere giù. */
  .drawer{
    top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
    max-height:92dvh;border-radius:18px 18px 0 0;
    transform:translateY(100%)}
  .drawer::before{
    content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:2px;background:var(--line);z-index:2}
  .dr-head{padding:20px 18px 15px}
  .dr-head .ti{font-size:19px}
  .dr-body{padding:18px;overscroll-behavior-y:contain}
  .dr-foot{
    padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
    flex-direction:column;align-items:stretch}
  .dr-foot .btn{justify-content:center}

  /* ---------- finestre e avvisi ---------- */
  .mscrim{padding:12px;align-items:end}
  .modal{max-height:90dvh;margin-bottom:env(safe-area-inset-bottom)}
  .m-foot{flex-wrap:wrap}
  .m-foot .btn{flex:1;justify-content:center}
  /* gli avvisi devono stare sopra le linguette, non sotto */
  .toasts{left:12px;right:12px;bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));align-items:stretch}
  .toast{max-width:none}

  /* ---------- resto ---------- */
  .todo-modes,.agenda-tabs,.ch-tabs,.inc-tog{display:flex;width:100%}
  .todo-modes .mode,.agenda-tabs button,.ch-tabs button{flex:1;justify-content:center}
  /* la riga di un'area (.wid-f) non va a capo: il «+» resta accanto alla sua
     casella, come nella demo. Con la casella a tutta riga il «+» finiva sotto,
     largo 30 px e alto 19 */
  .todo-add{flex-wrap:wrap}
  .todo-add input[type=text]{min-width:0;flex:1 1 100%}
  /* una tendina è larga quanto la sua voce più lunga, e i nomi di aree e
     clienti li scrive chi usa il software: con un'area da 60 caratteri la riga
     «Aggiungi» di Oggi allargava la pagina a 417 px su 390 (misurato). Due per
     riga, e la voce lunga si taglia dentro la tendina chiusa. */
  .mini-date,.mini-sel{max-width:100%;min-width:0;flex:1 1 40%}
  .kv-grid{gap:12px 14px}
  .inc-time{font-size:40px}
  .inc-el{font-size:34px}
  /* la settimana a cinque colonne non entra: scorre invece di schiacciarsi */
  .cal{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .assist-row select,.assist-row .btn{width:100%}
  .blockc,.inc-steps{max-width:none}
  .rcpt .fine{word-break:break-word;overflow-wrap:anywhere}
}

/* ---------- dita, non puntatori ----------
   Con il dito il bersaglio utile è ~44px: sotto, si sbaglia riga. Le misure
   del prototipo sono giuste per il mouse e piccole per il pollice, quindi
   crescono solo dove si tocca, senza toccare il disegno da scrivania. */
@media(pointer:coarse){
  .btn{min-height:44px;padding:11px 16px}
  .btn-sm{min-height:40px;padding:9px 14px;font-size:13px}
  /* una scritta piccola tiene i suoi 8 px di lato anche col dito: con i 14 di
     .btn-sm le righe di scritte non partivano a filo del testo (ultime
     correzioni del 15 ottobre 2026; prima corretto a mano solo in .vb-minori) */
  .btn-link.btn-sm{padding-left:8px;padding-right:8px}
  .x{width:44px;height:44px}
  .ic-btn,.edit-todo .rm{width:40px;height:40px}
  .wid-f .add{width:40px;min-height:40px}
  .inc-chk,.voce .check{width:28px;height:28px;font-size:14px}
  .chip,.qr button,.todo-tab,.inc-fold,.tmpl .tg{min-height:40px;display:inline-flex;align-items:center}
  .todo-modes .mode,.agenda-tabs button,.ch-tabs button,.inc-tog button{min-height:40px}
  .stepper button{width:44px;height:44px}
  .toggle{width:52px;height:30px}
  .toggle::after{width:24px;height:24px}
  .toggle.on::after{transform:translateX(22px)}
  .imp-tog input:checked+.toggle::after{transform:translateX(22px)}
  .chkline input,.inc-consent input{width:20px;height:20px}
  .nav-i{min-height:44px}
  .indietro,.inc-back{min-height:44px}
  .tbl .rowlink td.t-name{padding-block:2px}
  /* il tocco deve dare un segnale: senza :hover resta solo :active */
  .tbl .rowlink:active,.voce:active,.hit:active,.inc-row:active{background:#EAF1FB}
  .btn:active,.indietro:active{transform:scale(.985)}
}
/* niente stati appiccicati dopo il tocco su chi non ha un puntatore */
@media(hover:none){
  .tbl .rowlink:hover,.voce:hover,.hit:hover,.inc-row:hover,.wid-h.clickable:hover{background:transparent}
  .metric.clickable:hover,.inc-mode:hover{transform:none;box-shadow:var(--sh-sm)}
  .hit:hover{border-color:var(--line);box-shadow:var(--sh-sm)}
  .indietro:hover{border-color:var(--line-4);color:var(--ink-2);background:var(--surface)}
  .indietro:hover svg{transform:none}
  .btn-ghost:hover{border-color:var(--line-4);background:var(--surface)}
  /* il blu resta blu dopo il tocco: il navy del passaggio del mouse, sul
     telefono, restava acceso e il tasto sembrava un altro */
  .btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600)}
  .btn-link:hover{background:none;text-decoration:none}
}


/* ══════ Incontri: le tre porte, la registrazione, le due liste ══════ */

  /* etichetta di un campo — era ripetuta inline in ogni modulo */
  .lbl{font-size:12.5px;color:var(--muted)}
  .chk-riga{display:flex;gap:10px;align-items:center;padding:6px 0;cursor:pointer;font-size:13.5px}
  .chk-riga input{width:20px;height:20px;accent-color:var(--brand);flex:none}

  /* ── registrare ──
     Il bottone è grande perché si preme con il telefono appoggiato sul
     tavolo, spesso senza guardare: sotto i 56px si sbaglia. */
  .rec-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .rec-btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;
    padding:0 22px;border-radius:100px;border:1.5px solid var(--line-4);
    background:var(--surface);font-family:inherit;font-size:15px;font-weight:600;
    color:var(--ink);cursor:pointer;transition:.16s var(--ease)}
  .rec-btn:disabled{opacity:.55;cursor:default}
  .rec-btn.on{background:var(--red-50);border-color:#e8b5ac;color:var(--red-700)}
  .rec-dot{width:12px;height:12px;border-radius:50%;background:var(--red-700);flex:none}
  .rec-btn.on .rec-dot{animation:rec-puls 1.4s ease-in-out infinite}
  @keyframes rec-puls{0%,100%{opacity:1}50%{opacity:.25}}
  .rec-time{font-size:22px;font-weight:700;color:var(--ink-2);min-width:64px;letter-spacing:-.5px}

  /* ── note prese mentre si parla ── */
  .note-vive{display:flex;flex-direction:column;gap:7px}
  .nv{display:flex;gap:10px;font-size:13.5px;color:var(--ink-2);align-items:baseline}
  .nv .t{color:var(--brand);font-weight:600;flex:none;min-width:42px}

  /* ── in elaborazione ── */
  .lav{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.6}
  .lav-spin{width:16px;height:16px;flex:none;margin-top:2px;border-radius:50%;
    border:2px solid var(--brand-100);border-top-color:var(--brand);
    animation:lav-gira .9s linear infinite}
  @keyframes lav-gira{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){
    .lav-spin,.rec-btn.on .rec-dot{animation:none}
  }

  /* ── la targhetta: com'è nato questo verbale ── */
  .tag-ai{display:inline-flex;align-items:center;gap:8px;font-size:12px;
    color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-100);
    padding:6px 12px;border-radius:100px;margin-bottom:14px}
  .tag-ai svg{width:14px;height:14px;flex:none}

  /* ── quello che il modello non ha capito ── */
  .inc-dubbi{border-color:var(--amber-100);background:var(--amber-50)}
  .todo-l li .d.q{background:var(--amber-700)}

  /* ── LE DUE LISTE ──
     Le due liste sono visivamente parallele ma non identiche: quella del
     cliente ha il bordo diverso, perché una voce letta di sfuggita non deve
     poter essere scambiata per una cosa da fare io. */
  .az-titolo{font-size:14px;font-weight:600;color:var(--ink);display:flex;
    gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
  .az-lista{display:flex;flex-direction:column}
  .az{padding:9px 0;border-bottom:1px solid var(--line-2)}
  .az:last-of-type{border-bottom:none}
  .az.scartata{opacity:.5}
  .az.scartata .az-testo,.az.scartata .az-t>span{text-decoration:line-through}
  .az-r1{display:flex;gap:10px;align-items:flex-start}
  .az-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
  .az-t>span{padding-top:1px}
  textarea.az-testo{width:100%;font-size:13.5px;padding:7px 9px;
    line-height:1.45;resize:vertical;min-height:56px;font-family:inherit}
  input.az-data{width:100%;max-width:170px;font-size:12.5px;padding:6px 9px;color:var(--muted)}
  .az-sposta{flex:none;white-space:nowrap;font-size:11.5px;padding:6px 9px}
  /* la citazione: è ciò che permette di verificare prima di accettare */
  .az-fonte{margin:6px 0 0 30px;font-size:12.5px;line-height:1.5;color:var(--muted);
    border-left:2px solid var(--line);padding-left:10px;font-style:italic}

  /* ── impegni del cliente, nella sua scheda ── */
  .attesa{display:flex;flex-direction:column;gap:2px;background:var(--amber-50);
    border:1px solid var(--amber-100);border-radius:var(--r);padding:12px 14px}
  .att{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
  .att+.att{border-top:1px solid rgba(138,93,12,.14)}
  .att-t{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.45}
  .att-d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
  .att.scaduto .att-d b{color:var(--red-700)}
  .att.fatto .att-t{color:var(--muted);text-decoration:line-through;font-weight:400}
  .att-fatti{margin-top:10px}
  .att-fatti summary{font-size:12.5px;color:var(--muted);cursor:pointer;padding:4px 0}
  /* «1 impegno mantenuto» nel cassetto: 40 px col dito, come nella pagina del
     cliente (cliente.css); era 27 (giro 1, 14 ottobre 2026) */
  @media(pointer:coarse){ .att-fatti summary{padding:11px 0;line-height:18px} }
  .d-imp{width:6px;height:6px;border-radius:50%;background:var(--amber-700);
    margin-top:7px;flex:none}

  /* Da 720px le due colonne di una voce stanno in riga: sul telefono il
     testo dell'azione ha bisogno di tutta la larghezza. */
  @media(min-width:720px){
    .az-t{flex-direction:row;align-items:center;gap:10px}
    textarea.az-testo{flex:1;min-height:44px}
    input.az-data{width:auto;flex:none}
  }

/* ══════ da 900px: la scrivania, com'era ══════ */
@media(min-width:900px){
  html,body{height:100%}
  .app{display:grid;grid-template-columns:246px 1fr;height:100vh;height:100dvh;overflow:hidden}
  .side{display:flex}
  .marchio-tel{display:none}
  .main{overflow-y:auto}
  .tabbar{display:none}
  .top{padding:16px 34px;gap:16px;min-height:84px}
  .content{padding:28px 34px 72px}
  .metrics{grid-template-columns:repeat(3,1fr)}
}

/* ══════════════════════════════════════════════════════════════════════════
   IL RITMO DELLA DEMO, PER TUTTE LE PAGINE (14 ottobre 2026)
   La demo approvata ha, sopra il CSS di .app, un blocco di ritocchi scritto
   pagina per pagina ([data-demo=oggi], [data-demo=chi-vedere]…):
   34 px fra le sezioni sul telefono e 30 da scrivania, 12 fra l'etichetta e la
   sua carta, righe più alte. Qui vale per tutte le pagine dello studio, così le
   sezioni nate dopo (Candidati, Pratiche, Comunicazioni, il pannello delle HR)
   respirano come quelle della demo approvata. Solo dentro .content: cassetti e
   finestre restano quelli di .app.
   ══════════════════════════════════════════════════════════════════════════ */
  :root{--sez:34px}
  @media(min-width:720px){:root{--sez:30px}}
  .content .eyebrow{margin:var(--sez) 0 12px}
  .content .eyebrow:first-child{margin-top:0}
  /* I blocchi che arrivano da soli (hx-get, o riletti con hx-select): la loro
     etichetta è il primo figlio del contenitore e con :first-child perdeva lo
     spazio sopra, attaccandosi alla carta del blocco prima (4–8 px invece di
     30). Chi scrive un blocco così gli dà la classe «sez»; il contenitore che
     apre la pagina resta a zero. */
  .content :is([hx-select],.sez):not(:first-child)>.eyebrow:first-child{margin-top:var(--sez)}
  .content .metrics{margin-bottom:0}
  .content .todo-modes{margin-bottom:12px}
  .content .todo-tabs{padding:12px 14px 10px}
  .content .voce{padding:15px 16px;gap:13px}
  .content .voce .dot{margin-top:7px}
  .content .voce .vtxt b{line-height:1.45}
  .content .voce .vtxt small{margin-top:6px;line-height:1.5}
  /* nei riquadri di Da fare (Per tipo, Per cliente…) le righe restano fitte */
  .content .wid-b .voce{padding:11px 15px;gap:12px}
  .content .todo-add{padding:14px 16px}
  .content .tbl:not(.map-tbl) td{padding-top:15px;padding-bottom:15px;line-height:1.4}
  /* Clienti resta quello della demo, fitto: l'elenco lungo da scorrere */
  @media(min-width:720px){ .content #clienti-lista .tbl.sel-tbl td{padding-top:13px;padding-bottom:13px;line-height:inherit} }
  /* l'elenco da leggere riga per riga (Archivio): ancora un poco più alto */
  .content .tbl-ampia{margin-top:6px}
  .content .tbl-ampia .tbl td{padding-top:16px;padding-bottom:16px;line-height:1.45}
  /* la lineetta dove manca un dato, da scrivania (Clienti, Candidati) */
  @media(min-width:720px){ .content .tbl td.t-dato[data-manca]:empty::before{content:attr(data-manca)} }

  /* «Rivedi ›», «Vedi ›», «Apri Andamento ›»: il collegamento con la freccia
     delle targhette di Oggi, uno solo per tutta l'app (prima anche «→» di testo) */
  .go{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--brand);white-space:nowrap}
  .go svg{width:13px;height:13px;flex:none}

  /* Un'etichetta di sezione con il suo tasto a destra, sulla stessa riga anche
     sul telefono («Pratiche · 2» e «+ Nuova pratica», «Da rivedere» e «Prepara
     adesso»). Pratiche e Comunicazioni l'avevano fatta ognuna a modo suo
     (.b-pbar, .com-sez-testa): dalla fusione del 14 ottobre 2026 è un pezzo
     solo. L'etichetta va a capo dentro di sé, il tasto non si stringe; il
     ritmo è quello di ogni etichetta (34/30 sopra, 12 sotto). */
  .content .sez-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:var(--sez) 0 12px}
  .content .sez-testa:first-child{margin-top:0}
  .content .sez-testa>.eyebrow{margin:0;min-width:0}
  .content .sez-testa>:not(.eyebrow){flex:none}

/* ══════ I campi, tutti uguali (14 ottobre 2026) ══════
   .field disegnava solo testo, data, telefono, email, numero e ora: gli altri
   tipi, e i campi scritti senza .field (Impostazioni → Reclutamento, «Come
   lavora lo studio», «Cosa vede»), restavano quelli del navigatore, squadrati
   e alti 21 px. */
  .field input[type=url],.field input[type=password],.field input[type=search],.field input:not([type]){
    width:100%;font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
    border:1px solid var(--line-4);border-radius:9px;padding:10px 13px;outline:none;transition:.15s}
  /* La rete di sicurezza: un campo senza classe e fuori da .field prende il
     disegno di input.select. :where() non pesa niente: ogni regola di un foglio
     che lo disegna già vince. */
  :where(.content) :where(select,textarea,input:not([type]),input[type=text],input[type=email],input[type=tel],
    input[type=number],input[type=url],input[type=password],input[type=search],input[type=time],
    input[type=date]):where(:not([class]):not(.field *):not(.search *)){
    max-width:100%;font-family:inherit;font-size:13.5px;color:var(--ink);background-color:var(--surface);
    border:1px solid var(--line-4);border-radius:9px;padding:9px 12px;min-height:40px;outline:none;transition:.15s}
  :where(.content) :where(select,textarea,input):where(:not([class]):not(.field *):not(.search *)):focus{
    border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-50)}
  /* Le tendine con la stessa freccia ovunque (ultime correzioni del 15
     ottobre 2026: «Cambia stato…» e «Nei messaggi», select.select, avevano
     quella di sistema accanto alle altre disegnate). Dopo le regole che usano
     background in breve, che toglierebbero l'immagine; .select select ha la
     sua freccia in un svg e pesa di più. */
  select.select,.field select,:where(.content,.drawer,.modal) select:where(:not([class])){
    -webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235F6C84' stroke-width='1.6'><path d='M4 6l4 4 4-4' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat;background-position:right 11px center;background-size:14px}
  select.select[multiple],.field select[multiple]{background-image:none;padding-right:12px}
  /* I collegamenti dentro il testo come in .app: navy 600, senza
     sottolineatura, che torna solo sotto il puntatore (ultime correzioni del
     15 ottobre 2026: «scrivi tu le note», «chi c'era», «Apri la scheda del
     candidato», «primo caricamento» erano blu sottolineati del navigatore).
     I tasti e le scritte con la loro classe hanno già il loro disegno. */
  :where(.content,.drawer) :where(p,.note,.hint,.mt,.empty,.sub) a:not(.btn):not(.cli-link),
  .inc-note-a,.ag-link,.vb-chi{color:var(--brand-600);font-weight:600;text-decoration:none}
  :where(.content,.drawer) :where(p,.note,.hint,.mt,.empty,.sub) a:not(.btn):not(.cli-link):hover,
  .inc-note-a:hover,.ag-link:hover,.vb-chi:hover{text-decoration:underline;text-underline-offset:3px}
  /* caselle e pallini nel navy del marchio, non nel blu del navigatore */
  :where(.content,.drawer,.modal) :where(input[type=checkbox],input[type=radio]){accent-color:var(--brand)}
  :where(.content) :where(input[type=checkbox],input[type=radio]):where(:not([class])){width:18px;height:18px;flex:none}
  /* il bottone «Scegli file» come gli altri bottoni dell'app (era solo nel
     calendario della banca, agenda.css) */
  input[type=file]::file-selector-button{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);
    background:var(--surface);border:1px solid var(--line-4);border-radius:9px;padding:8px 12px;margin-right:10px;cursor:pointer}
  input[type=file]::file-selector-button:hover{border-color:var(--brand-600);background:#FAFCFF}
  input[type=file]{font-family:inherit;font-size:13px;color:var(--ink-2);max-width:100%}
  @media(pointer:coarse){ input[type=file]::file-selector-button{min-height:44px} }

  /* ---------- i gradini blu (16 ottobre 2026) ----------
     Il meeting interno del 16 ottobre: «da lontano deve essere chiaro il
     percorso ideale», «più lo creiamo da scimmie, più viene utilizzato»,
     decisione «gradini blu per guidare il percorso». Due pezzi, nello
     stesso blu del tasto pieno (--brand-600):
     - .gradini, i passi di un percorso a più pagine (registrare, chi era,
       il verbale, approvarlo), in cima alla pagina (_gradini.html, da
       gradini.py): i fatti pieni con la spunta, quello di adesso pieno con
       il numero e cerchiato, quelli dopo bianchi con il bordo grigio;
     - .gradino, il numero di una parte di un modulo che sta in una pagina
       sola (il candidato nuovo e il suo primo colloquio, la pratica nuova):
       blu con il bordo, pieno quando si sta scrivendo lì.
     Il nome sotto ogni numero, centrato: sul telefono quattro passi stanno
     in 354 px senza andare a capo. Larghi al massimo come i moduli, così da
     scrivania non si spargono su tutta la riga. L'interlinea in pixel: alti
     53 px tondi, e quello che sta sotto non cade a mezzo pixel (i tasti
     a 43,99 px di test_g1_incontri_verbale). */
  .gradini{list-style:none;display:flex;align-items:flex-start;max-width:560px;margin:0 0 24px;padding:0}
  .gradini li{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
    text-align:center;font-size:12.5px;font-weight:600;line-height:16px;color:var(--muted)}
  /* la linea fra un gradino e l'altro: blu fin dove si è arrivati */
  .gradini li+li::before{content:"";position:absolute;top:14px;left:calc(-50% + 21px);right:calc(50% + 21px);
    height:2px;border-radius:2px;background:var(--line-4)}
  .gradini li.fatto+li::before{background:var(--brand-600)}
  .gradini .g-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
    font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;
    background:var(--surface);border:2px solid var(--line-4);color:var(--muted)}
  .gradini .g-n svg{width:15px;height:15px}
  .gradini li.fatto{color:var(--ink-2)}
  /* il passo fatto chiaro con la spunta blu, quello di adesso l'unico pieno
     e più grande (giro 2 del 16 ottobre 2026: due cerchi blu pieni uguali,
     e da un metro «Registra ✓» e «2 Chi era» sembravano lo stesso passo) */
  .gradini li.fatto .g-n{background:var(--brand-50);border-color:var(--brand-600);color:var(--brand-600)}
  /* 34 px che occupano i 30 degli altri (margine −2): la riga dei gradini
     resta alta uguale, e quello che sta sotto non si sposta */
  .gradini li.qui .g-n{width:34px;height:34px;margin:-2px 0;background:var(--brand-600);border-color:var(--brand-600);color:#fff}
  .gradini li.qui{color:var(--ink);font-weight:700}
  .gradini li.qui .g-n{box-shadow:0 0 0 4px var(--brand-100)}
  .gradini .g-t{max-width:100%;overflow-wrap:anywhere}
  .g-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* il numero di una parte di un modulo, davanti alla sua etichetta */
  .gradino{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;
    font-size:12px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums;
    background:var(--surface);border:2px solid var(--brand-600);color:var(--brand-600);transition:.15s var(--ease)}
  .gradino.qui{background:var(--brand-600);color:#fff}
  .gradino-t{display:flex;align-items:center;gap:9px;margin:4px 0 12px;font-size:13.5px;font-weight:700;color:var(--ink)}
  .gradino-sez+.gradino-sez{margin-top:8px;padding-top:14px;border-top:1px solid var(--line-2)}
  .gradino-sez:focus-within .gradino{background:var(--brand-600);color:#fff}

@media(max-width:719px){
  .content .metrics{gap:12px}
  /* le intestazioni di zona restano 8/16, come nella demo */
  .content .tbl:not(.map-tbl) tr:not(.zonehdr){padding:16px;row-gap:7px}
  .content .tbl:not(.map-tbl) td{padding:0;line-height:1.5}
  .content .tbl:not(.map-tbl) td.t-name{line-height:1.3}
  /* i dati della riga in fila con il «·» fra l'uno e l'altro, come in Clienti.
     Il punto sta in fondo al dato e non in testa a quello dopo: con quattro o
     cinque dati (Candidati) la riga va a capo, e una riga che comincia con
     «·» si legge male. Clienti ha già la sua regola (cliente.css). */
  .content .tbl td.t-dato{font-size:13px}
  .content .tbl td.t-dato:empty{display:none}
  .content .tbl:not(.sel-tbl) td.t-dato:not(:empty):has(~td.t-dato:not(:empty))::after{content:"·";margin-left:6px;color:var(--faint)}
  /* un dato in fondo alla riga resta in fila con gli altri: a destra va solo
     la cella delle azioni */
  .content .tbl:not(.map-tbl) td.t-dato:last-child{margin-left:0}
  /* La mappatura del primo caricamento diventa un elenco, come nella demo: la
     colonna in grassetto, gli esempi sotto, la tendina a tutta larghezza. Prima
     scorreva di lato dentro la carta e la scelta si faceva alla cieca. */
  .map-tbl{display:block;overflow:visible}
  .map-tbl thead{display:none}
  .map-tbl tbody{display:block}
  .map-tbl tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line-2)}
  .map-tbl tr:last-child{border-bottom:0}
  .map-tbl td{display:block;padding:2px 0!important;border:0!important}
  .map-tbl td .select,.map-tbl td select{width:100%;min-width:0;margin-top:8px}
  /* l'Archivio sul telefono: il titolo dell'incontro su una riga sua, poi
     «22 set 2026 · approvato il 22 set 2026» (la demo) */
  .content .tbl-archivio:not(.map-tbl) td:nth-child(2){flex-basis:100%;color:var(--ink-2)!important}
  .content .tbl-archivio:not(.map-tbl) td:nth-child(3),
  .content .tbl-archivio:not(.map-tbl) td:nth-child(4){margin-left:0!important}
  .content .tbl-archivio:not(.map-tbl) td:nth-child(4)::before{content:"· approvato il "}
}