@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, caselle da spuntare */
    --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)}

  .main{position:relative}
  .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))}
  .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);box-shadow:var(--sh-sm);transition:.18s var(--ease)}
  .indietro:hover,.inc-back:hover{border-color:var(--brand-100);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}

  /* 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}
  /* 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 */
  .btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;line-height:normal;padding:9px 15px;border-radius:9px;transition:.15s var(--ease);text-decoration:none}
  .btn svg{width:15px;height:15px}
  .btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(3,42,93,.30)}
  .btn-primary:hover{background:var(--navy-900)}
  .btn-ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
  .btn-ghost:hover{border-color:var(--line-3);background:#FAFCFF}
  .btn-wa{background:#25d366;color:#0a3d20}
  .btn-wa:hover{background:#1fb257}
  .btn-danger{background:var(--red-50);color:var(--red-700);border:1px solid var(--red-100)}
  .btn-danger:hover{background:#f7ded8}
  .btn-sm{padding:6px 11px;font-size:12px;border-radius:8px}
  .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}
  .metric .v{font-size:34px;font-weight:800;line-height:1.05;margin-top:7px;letter-spacing:-1.3px}
  .metric.attn{background:#FDF8EE;border-color:var(--amber-100)}
  .metric.attn .k{color:var(--amber-700)} .metric.attn .v{color:var(--amber-700)}
  .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}
  .todo-tab:hover{background:var(--tint)}
  .todo-tab.on{background:var(--brand);color:#fff}
  .todo-tab.late.on{background:var(--amber-700)}
  .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-3);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);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);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}
  .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)}
  .todo-modes .mode svg{width:15px;height:15px}
  .todo-modes .mode:hover{color:var(--ink-2)}
  .todo-modes .mode.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
  .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);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)}
  .wid-f .add{width:30px;border-radius:7px;background:var(--brand);color:#fff;font-size:15px;font-weight:600;flex:none}
  .wid-f .add:hover{background:var(--navy-900)}
  .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)}
  .wid.dashed{border-style:dashed;background:transparent;box-shadow:none;min-height:96px}
  .wid.dashed button{width:100%;height:100%;padding:22px;color:var(--brand);font-weight:600;font-size:13px}
  .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);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 */
  .search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);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)}
  .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}
  .agenda-tabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
  .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}
  .appt .az{font-size:10.5px;opacity:.8;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 select,.field textarea{width:100%;font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);border:1px solid var(--line);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);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);border-radius:9px;padding:11px 38px 11px 14px;cursor:pointer;transition:.15s}
  .select select:hover{border-color:var(--line-3)}
  .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);border-radius:9px;overflow:hidden}
  .stepper button{width:32px;height:34px;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)}
  .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}

  /* ---------- 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}
  #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}
  .x{width:34px;height:34px;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);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}
  .ch-tabs button svg{width:14px;height:14px}
  .ch-tabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
  .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);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);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);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-3);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);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(--surface);color:var(--ink);box-shadow:var(--sh-sm)}

  .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);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;
  display:grid;grid-template-columns:repeat(5,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}
.tabbar .tab.on{color:#fff}
.tabbar .tab.on svg{color:var(--brand-400)}
/* la barra luminosa del brand, orizzontale, sopra la sezione in cui si è */
.tabbar .tab.on::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){
  .reg-contatto{display:flex;flex-direction:row;align-items:center;flex:1;min-width:280px}
  .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}
  .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%}
  .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 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 */
  .eyebrow{flex-wrap:wrap;gap:8px}
  .eyebrow .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}
  .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)}
  .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);color:var(--ink-2);background:var(--surface)}
  .indietro:hover svg{transform: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);
    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}
  .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)}
}