/* manager-stats · design system "Salone Vincente"
   Linguaggio del logo: gradiente turchese→blu royal, serif elegante (Playfair),
   maiuscolo spaziato per le etichette, foglie line-art come decorazione. */

:root {
  /* ── brand (campionato dal logo) ─────────────────────────────────────── */
  --sv-teal:  #45c8dc;
  --sv-azure: #2286dd;
  --sv-royal: #1a56c9;
  --brand-grad: linear-gradient(115deg, #45c8dc 0%, #2286dd 42%, #1a56c9 74%, #113c9f 100%);
  --brand: #1a56c9;
  --brand-deep: #113c9f;
  --azure: #2286dd;
  --teal: #45c8dc;

  /* ── superfici ───────────────────────────────────────────────────────── */
  /* Quattro superfici e non una: la pagina (--page) sta SOTTO le carte
     (--surface), e le fasce di servizio dentro una carta — intestazione di
     tabella, riga dei totali, piede — usano --surface-2/2b per staccarsi dal
     corpo senza un altro bordo. --surface-3 e' il binario dei segmentati. */
  --page: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --surface-2b: #fbfcfe;
  --surface-3: #f1f5fa;
  --header-bg: rgba(255, 255, 255, 0.94);
  --hover: #f5f9fe;

  /* ── testo ───────────────────────────────────────────────────────────── */
  --ink: #10233c;
  --ink-2: #44586f;
  --muted: #7789a0;
  --muted-2: #6b7f97;

  /* ── filetti, bordi, decorazioni ─────────────────────────────────────── */
  /* Quattro filetti in scala: --line separa dentro una carta, --line-2 e -2b
     reggono le intestazioni di tabella, --line-3 le righe (piu' chiaro del
     bordo della carta, altrimenti la griglia urla piu' dei numeri). */
  --line: #eef2f7; --line-2: #e7edf4; --line-2b: #e0e8f2; --line-3: #f2f6fa; --line-5: #d3e0ef;
  --border: rgba(16, 51, 105, 0.09);
  --border-soft: rgba(16, 51, 105, 0.08);
  --border-2: rgba(16, 51, 105, 0.14);
  --border-hover: #9db6dc;
  --track: #dbe6f4;
  --veil: rgba(16, 42, 84, 0.42);

  /* ── semantica ───────────────────────────────────────────────────────── */
  --good: #0c7a52; --good-bg: #f4faf8; --green: #0f9f85;
  --bad: #c23a3a;  --bad-bg: #fdeeee;  --bad-bd: #f0c4c4;
  /* task nate da una regola: fondo appena tinto, non un allarme a tutto campo */
  --auto-bg: rgba(194, 58, 58, 0.05); --auto-bg-h: rgba(194, 58, 58, 0.10);
  --warn: #e8a01d; --warn-bg: #fdf4e3; --warn-fg: #8a6410;
  --gold: #b3891a; --copper: #c9591b;
  --ok-bg: #e6f5ee;  --ok-fg: #0c7a52;
  --via-bg: #e8f0fd; --via-fg: #1a56c9;
  --off-bg: #eef1f5; --off-fg: #5b6b80;
  --nav-bg: #e8f0fd; --nav-fg: #0d3ea8;
  --pill-on: #ffffff; --pill-fg: #0d3ea8;

  --ring: rgba(34, 134, 221, 0.15);
  --shadow-card: 0 1px 2px rgba(16, 42, 84, 0.04), 0 14px 34px -24px rgba(16, 42, 84, 0.30);
  --shadow-pill: 0 1px 3px rgba(16, 42, 84, 0.18);
  --shadow-pop: 0 24px 60px -20px rgba(16, 42, 84, 0.45);

  /* ── alias verso i nomi storici ──────────────────────────────────────────
     Il repo ha 3.000 righe di CSS scritte su --text-primary, --surface-1,
     --grid, --row-hover. Sono var() e non copie del colore: ridefinire --ink
     nel tema scuro basta a spostare anche l'alias, quindi non esistono due
     palette da tenere allineate a mano. */
  --surface-1: var(--surface);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --grid: var(--line-2);
  --baseline: var(--line-5);
  --row-alt: var(--surface-2);
  --row-hover: var(--hover);
  --row-link-hover: rgba(34, 112, 216, 0.08);
  --good-text: var(--good);
  --bad-text: var(--bad);

  /* serie grafici (palette validata: CVD DeltaE 65 - contrasto >= 3:1) */
  --series-1: #2270d8;   /* metrica primaria (blu royal) */
  --series-2: #0f9f85;   /* metrica secondaria / appuntamento (teal) */
  --series-3: #c9591b;   /* terza serie (rame) - validata: CVD DeltaE 12 vs teal, contrasto >= 3:1 */
  --seq-300: #7fb0ec;
  --seq-450: #2270d8;

  /* ── Le quattro voci di "che fine fanno i lead" ────────────────────────────
     Prima erano una scala ordinale, una tinta sola dal chiaro allo scuro, col
     ragionamento che le voci SONO ordinate (da scarti ad appuntamenti). Leo,
     31/08: "i colori sono veramente brutti, falli piu' vivaci e diversi" — e
     aveva ragione sul fatto che conta: quattro passi dello stesso blu si
     distinguono a fatica se non sono uno accanto all'altro, e nelle barre
     orizzontali qui sotto non lo sono. Adesso sono QUATTRO TINTE, e l'ordine
     lo porta la posizione (la barra e le righe sono sempre nella stessa
     sequenza), non la luminosita'.
     🚨 Scelte con lo script della skill dataviz, non a occhio: passa tutti e
        cinque i controlli su #ffffff con --pairs all — banda L, croma, CVD
        (peggior coppia blu/magenta DeltaE 12,2 deutan) e contrasto >= 3:1.
     🚨 QUATTRO E' IL MASSIMO: cercando una quinta tinta su tutto il giro delle
        tinte, a ogni L e croma della banda, non ne passa NESSUNA. Se un domani
        serve una quinta voce non si aggiunge un colore: si accorpa. */
  --seg-1: #a21f8f;   /* scarti - magenta/porpora */
  --seg-2: #bd5214;   /* non risposto - rame (piu' scuro di --series-3: cosi' regge la cifra bianca, 4,8:1) */
  --seg-3: #2270d8;   /* da richiamare - blu (= --series-1) */
  --seg-4: #0f9f85;   /* appuntamenti - teal (= --series-2) */
  /* Grigio-ardesia FUORI dalle quattro tinte, per la voce che non e' un esito ma
     un "non e' ancora successo niente". Con una tinta sua sembrerebbe la quinta
     categoria. Stesso ruolo di --cat-blocco in Task. */
  --seg-fermo: #5b6b80;
  /* L'INCHIOSTRO che va SOPRA ogni tinta, quando dentro il segmento ci si scrive
     la percentuale: non e' sempre bianco, e non si sceglie a occhio. E' quello
     dei due che vince il contrasto sul riempimento — qui 6,7:1 / 4,8:1 / 4,8:1 /
     4,9:1 / 5,4:1, quindi il teal e' l'unico che si prende l'inchiostro scuro. */
  --seg-1-ink: #ffffff; --seg-2-ink: #ffffff; --seg-3-ink: #ffffff;
  --seg-4-ink: #0e2038; --seg-fermo-ink: #ffffff;

  /* colore blocco calendario per tipologia task (Task): stessi toni delle chip
     cat-*, ma con un amber piu' scuro per il Controllo - #e8a01d su testo bianco
     non passa il contrasto minimo. */
  --cat-operativa: var(--series-1);
  --cat-chiamata:  var(--series-2);
  --cat-controllo: #b3891a;
  --cat-riunione:  var(--series-3);
  --cat-blocco:    #5b6b80;   /* grigio-ardesia: non un'attivita', un calendario chiuso */

  /* Google Calendar: volutamente FUORI dalla scala delle tipologie task. E'
     contesto, non lavoro da fare - quindi neutro e in secondo piano, cosi' a
     colpo d'occhio si distingue "cosa devo fare" da "dove sono gia' impegnato". */
  --gcal-fill: #e6ecf4;
  --gcal-edge: #8496ad;

  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;

  color-scheme: light;
}

/* ── i marchi ────────────────────────────────────────────────────────────────
   Tutto quello che distingue un marchio dall'altro sta in questi token, e
   nient'altro: il resto del foglio e' gia' scritto su var(), quindi non ci sono
   due copie della palette da tenere allineate. L'attributo lo scrive
   js/marchio.js, come fa js/tema.js con data-tema.

   🚨 I GRAFICI NON CAMBIANO COLORE. --series-* e la scala --seq-* sono una
   palette validata per daltonismo e contrasto (vedi la nota piu' su): qui si
   cambia la CORNICE — testata, nav, bottoni, gradienti, anelli di focus — non
   il modo in cui si leggono i dati. Su Poltrona Piena c'e' anche una ragione
   in piu': il verde del marchio finirebbe addosso a --good, che nelle tabelle
   vuol dire "sopra benchmark". */

/* Poltrona Piena — i verdi campionati dal logo (lo swoosh chiaro, il dente).
   Non solo i bottoni: si spostano anche le SUPERFICI, i filetti e il testo, che
   e' quello che fa sentire verde tutta la piattaforma. La struttura di
   luminosita' resta identica a quella di Salone Vincente — cambia la tinta, non
   il contrasto — cosi' i rapporti gia' verificati non si rompono. */
:root[data-marchio="pp"] {
  --sv-teal:  #8ed24a;
  --sv-azure: #4cb862;
  --sv-royal: #12a05c;
  --brand-grad: linear-gradient(115deg, #8ed24a 0%, #4cb862 42%, #12a05c 74%, #0a7a45 100%);
  --brand: #0f8f52;
  --brand-deep: #0a6d3f;
  --azure: #4cb862;
  --teal: #8ed24a;

  --page: #edf5f0;
  --surface: #ffffff;
  --surface-2: #f6fbf8;
  --surface-2b: #fafdfb;
  --surface-3: #eef7f1;
  --header-bg: rgba(255, 255, 255, 0.94);
  --hover: #f3faf6;

  --ink: #0d2b1d;
  --ink-2: #40614e;
  --muted: #769a86;
  --muted-2: #6a8f7b;

  --line: #edf5f0; --line-2: #e3efe8; --line-2b: #daeae1; --line-3: #eff8f3; --line-5: #cce4d6;
  --border: rgba(11, 74, 44, 0.10);
  --border-soft: rgba(11, 74, 44, 0.08);
  --border-2: rgba(11, 74, 44, 0.15);
  --border-hover: #92c7a8;
  --track: #d6ecdf;
  --veil: rgba(8, 48, 29, 0.42);
  --row-link-hover: rgba(15, 143, 82, 0.09);

  --ring: rgba(76, 184, 98, 0.18);
  --nav-bg: #e2f5e9; --nav-fg: #0a6d3f;
  --via-bg: #e2f5e9; --via-fg: #0b7a46;
  --pill-fg: #0a6d3f;
  --shadow-card: 0 1px 2px rgba(9, 58, 34, 0.05), 0 14px 34px -24px rgba(9, 58, 34, 0.30);
  --shadow-pill: 0 1px 3px rgba(9, 58, 34, 0.18);
  --shadow-pop: 0 24px 60px -20px rgba(9, 58, 34, 0.40);
}

/* MACH10 — la holding: monocromatico come il suo logo. Qui la tinta non si
   sposta, si TOGLIE: grigi neutri, niente azzurro sotto le superfici. E' quello
   che rende Sauron e Accessi riconoscibili a colpo d'occhio come "roba
   dell'azienda" e non di un cliente. */
:root[data-marchio="m10"] {
  --sv-teal:  #6b7280;
  --sv-azure: #3f464f;
  --sv-royal: #22262c;
  --brand-grad: linear-gradient(115deg, #6b7280 0%, #3f464f 42%, #22262c 74%, #0b0d10 100%);
  --brand: #1c2026;
  --brand-deep: #0b0d10;
  --azure: #3f464f;
  --teal: #6b7280;

  --page: #eeeff1;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --surface-2b: #fbfbfc;
  --surface-3: #f1f2f4;
  --header-bg: rgba(255, 255, 255, 0.94);
  --hover: #f5f6f8;

  --ink: #15171a;
  --ink-2: #4a4f56;
  --muted: #868b93;
  --muted-2: #767b83;

  --line: #eeeff1; --line-2: #e7e9ec; --line-2b: #e0e2e6; --line-3: #f2f3f5; --line-5: #d5d8dd;
  --border: rgba(20, 22, 26, 0.10);
  --border-soft: rgba(20, 22, 26, 0.08);
  --border-2: rgba(20, 22, 26, 0.15);
  --border-hover: #a6adb7;
  --track: #dbdee2;
  --veil: rgba(10, 12, 15, 0.45);
  --row-link-hover: rgba(28, 32, 38, 0.06);

  --ring: rgba(34, 38, 44, 0.16);
  --nav-bg: #e7e9ed; --nav-fg: #1c2026;
  --via-bg: #e7e9ed; --via-fg: #1c2026;
  --pill-fg: #1c2026;
  --shadow-card: 0 1px 2px rgba(10, 12, 15, 0.05), 0 14px 34px -24px rgba(10, 12, 15, 0.28);
  --shadow-pill: 0 1px 3px rgba(10, 12, 15, 0.18);
  --shadow-pop: 0 24px 60px -20px rgba(10, 12, 15, 0.40);
}

/* Il tema NON passa piu' da @media (prefers-color-scheme): l'attributo lo
   scrive js/tema.js, che risolve "auto" leggendo la preferenza di sistema e
   restando in ascolto se cambia. Cosi' esiste UN solo interruttore — l'utente
   puo' forzare chiaro o scuro dalla testata — e il CSS ha una sola regola
   invece di due copie della stessa palette (una nel media query, una
   nell'attributo) da tenere allineate. */
:root[data-tema="scuro"] {
  color-scheme: dark;

  --page: #081120;
  --surface: #0e1c31;
  --surface-2: #101f37;
  --surface-2b: #0c1a2e;
  --surface-3: #16273f;
  --header-bg: rgba(14, 28, 49, 0.93);
  --hover: #16273f;

  --ink: #eef4fb;
  --ink-2: #b7c5d9;
  --muted: #8b9db5;
  --muted-2: #93a5bd;

  --line: #1c2c46; --line-2: #24375a; --line-2b: #2a3f66; --line-3: #182842; --line-5: #35496b;
  --border: rgba(148, 180, 255, 0.14);
  --border-soft: rgba(148, 180, 255, 0.10);
  --border-2: rgba(148, 180, 255, 0.20);
  --border-hover: #5b7ba8;
  --track: #2c3f5e;
  --veil: rgba(2, 7, 16, 0.62);

  --brand: #3d8be8;
  --brand-deep: #2a5fd0;
  --azure: #4aa6e8;
  --teal: #5fd6e0;

  --good: #2fbf8f; --good-bg: #0f2a25; --green: #14a88c;
  --bad: #ff8a7a;  --bad-bg: #33191c;  --bad-bd: #5a2f2f;
  --auto-bg: rgba(255, 138, 122, 0.07); --auto-bg-h: rgba(255, 138, 122, 0.13);
  --warn: #cf9a2a; --warn-bg: #33280f; --warn-fg: #e8bf6a;
  --gold: #cf9a2a; --copper: #d97430;
  --ok-bg: #102c24;  --ok-fg: #48d3a4;
  --via-bg: #16304f; --via-fg: #8ec0f7;
  --off-bg: #1a2537; --off-fg: #93a5bd;
  --nav-bg: #16304f; --nav-fg: #9cc4f5;
  --pill-on: #22385c; --pill-fg: #bcd7fa;

  --ring: rgba(61, 139, 232, 0.35);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 14px 34px -20px rgba(0, 0, 0, 0.55);
  --shadow-pill: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.70);

  --row-link-hover: rgba(77, 148, 234, 0.14);

  /* palette dark validata su superficie #0f1d33 */
  --series-1: #3d8be8;
  --series-2: #14a88c;
  --series-3: #d97430;   /* rame dark - banda L 0.48-0.67 rispettata */
  --seq-300: #2c5a9e;
  --seq-450: #3d8be8;
  /* la scala ordinale sul fondo scuro NON e' quella chiara ribaltata: e' ripresa
     dai suoi passi e rivalidata sulla superficie #0e1c31 */
  /* le quattro tinte dell'esito sul fondo scuro NON sono quelle chiare
     schiarite: sono ripassate dallo script su #0e1c31 (banda L 0.48-0.67, CVD
     peggior coppia blu/magenta DeltaE 11,5 deutan, contrasto >= 3:1) */
  --seg-1: #b2339f; --seg-2: #d97430; --seg-3: #3d8be8; --seg-4: #14a88c;
  --seg-fermo: #8296ae;
  /* qui e' il contrario del tema chiaro: le tinte sono piu' luminose e a vincere
     il contrasto e' quasi sempre l'inchiostro scuro — 5,4:1 (bianco, sul
     magenta) / 5,3:1 / 4,9:1 / 5,7:1 / 5,6:1 */
  --seg-1-ink: #ffffff; --seg-2-ink: #0e1c31; --seg-3-ink: #0e1c31;
  --seg-4-ink: #0e1c31; --seg-fermo-ink: #0e1c31;
  --cat-controllo: #cf9a2a;   /* amber dark, testo bianco resta leggibile */
  --cat-blocco: #7c8ba3;
  --gcal-fill: #182740;
  --gcal-edge: #6d809b;
}

/* I marchi sul tema scuro. Vanno DOPO :root[data-tema="scuro"], che ridefinisce
   --brand e compagnia: a parita' di specificita' vince chi viene dopo, e questi
   due selettori ne hanno una piu' alta comunque. */
:root[data-tema="scuro"][data-marchio="pp"] {
  /* ⚠️ --brand fa DUE mestieri: sfondo del bottone primario (che porta testo
     bianco) e colore d'accento sopra la superficie scura. Un verde piu' chiaro
     si leggeva meglio come accento ma affogava il bianco sopra. #12a05c e' il
     verde del dente del logo, e tiene i due lati sugli stessi rapporti di
     Salone Vincente scuro: bianco 3,38 (SV 3,47) e su superficie 5,03 (SV 4,93). */
  --brand: #12a05c;
  --brand-deep: #0d8a4e;
  --azure: #46c477;
  --teal: #93dc63;
  --sv-teal: #93dc63; --sv-azure: #46c477; --sv-royal: #21a866;
  --brand-grad: linear-gradient(115deg, #5cc46e 0%, #2eae68 42%, #12a05c 74%, #0a7a45 100%);

  /* 🚨 LE SUPERFICI DI QUESTO TEMA SONO QUASI NEUTRE, ED E' VOLUTO. Ci sono
     arrivato dopo tre tentativi e due bocciature di Leo ("il verde scuro e'
     veramente troppo brutto e infastidisce", poi "questo verde vomito e'
     veramente brutto"), e la diagnosi giusta era la terza:
       1° tentativo — stessa LUMINOSITA' del navy di Salone Vincente. Sbagliato:
          un blu molto scuro si legge "notte", un verde altrettanto scuro si
          legge MARCIO. La stessa luminanza non da' la stessa sensazione.
       2° tentativo — piu' chiaro, stessa tinta. Sbagliato lo stesso: il verde
          del logo sta a 152°, e a bassa luminosita' 152° vira sull'OLIVA. Non
          era una questione di quanto scuro, era la TINTA.
       3° — questo. Sciolto guardando, non indovinando: un prototipo con due
          manopole (tinta e saturazione) e Leo che le ha girate fino a
          **120° e 5%**. Cinque per cento vuol dire che le superfici sono
          praticamente GRIGIE — a quella saturazione la tinta quasi non si
          vede piu', ed e' il punto: il verde vero vive negli ACCENTI, dove si
          nota senza dare fastidio (filetto, pastiglia della nav, bottoni,
          logo, barrette del funnel).
     ⚠️ Chi passasse di qui a "ravvivare il verde delle card" rifarebbe il
     secondo tentativo. E' gia' stato bocciato. */
  --page: #191c19;
  --surface: #282d28;
  --surface-2: #2d322d;
  --surface-2b: #232723;
  --surface-3: #343a34;
  --header-bg: rgba(40, 45, 40, 0.93);
  --hover: #343a34;

  --ink: #f2f2f2;
  --ink-2: #c9cac9;
  --muted: #9d9f9d;
  --muted-2: #a7aaa7;

  --line: #303630; --line-2: #3d433d; --line-2b: #444b44; --line-3: #2d322d; --line-5: #5e685e;
  --border: rgba(228, 236, 228, 0.13);
  --border-soft: rgba(228, 236, 228, 0.09);
  --border-2: rgba(228, 236, 228, 0.18);
  --border-hover: #6d786d;
  --track: #4e564e;
  --veil: rgba(10, 12, 10, 0.64);
  --row-link-hover: rgba(53, 193, 125, 0.14);

  --ring: rgba(53, 193, 125, 0.32);
  --nav-bg: #26513e; --nav-fg: #9ae7bd;
  --via-bg: #26513e; --via-fg: #9ae7bd;
  --pill-on: #2e5c48; --pill-fg: #bcf0d5;
}
:root[data-tema="scuro"][data-marchio="m10"] {
  /* Stesso equilibrio di sopra: #838a95 regge il bianco (3,48) e si stacca
     dalla superficie (5,25). ⚠️ Il gradiente non puo' scendere fino al nero del
     logo: .hdr-filo e' una striscia di 3px su una pagina quasi nera, e con
     l'estremo a #0b0d10 sparirebbe del tutto. */
  --brand: #838a95;
  --brand-deep: #6f7681;
  --azure: #aeb6c1;
  --teal: #dfe4ea;
  --sv-teal: #dfe4ea; --sv-azure: #aeb6c1; --sv-royal: #8a939f;
  --brand-grad: linear-gradient(115deg, #9aa2ae 0%, #737b87 42%, #5b626d 74%, #454b54 100%);

  --page: #08090b;
  --surface: #131519;
  --surface-2: #16191e;
  --surface-2b: #111317;
  --surface-3: #1c1f25;
  --header-bg: rgba(19, 21, 25, 0.93);
  --hover: #1c1f25;

  --ink: #f1f3f6;
  --ink-2: #c2c8d0;
  --muted: #939aa3;
  --muted-2: #9ba2ab;

  --line: #22252b; --line-2: #2b2f36; --line-2b: #333840; --line-3: #1d2026; --line-5: #3d434c;
  --border: rgba(215, 224, 236, 0.14);
  --border-soft: rgba(215, 224, 236, 0.10);
  --border-2: rgba(215, 224, 236, 0.20);
  --border-hover: #6d7684;
  --track: #333841;
  --veil: rgba(0, 0, 0, 0.66);
  --row-link-hover: rgba(200, 208, 220, 0.10);

  --ring: rgba(195, 202, 212, 0.28);
  --nav-bg: #232830; --nav-fg: #ced4dd;
  --via-bg: #232830; --via-fg: #ced4dd;
  --pill-on: #2d333c; --pill-fg: #dfe4ea;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
/* velo di luce brand in cima alla pagina */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1100px 420px at 50% -140px, rgba(69, 200, 220, 0.16), transparent 70%);
}
:root[data-tema="scuro"] body::before { background: radial-gradient(1100px 460px at 50% -140px, rgba(34, 134, 221, 0.18), transparent 70%); }
/* il velo segue il marchio: su Poltrona Piena un alone turchese sopra una
   testata verde si vede, e sembra un residuo dell'altro tema */
:root[data-marchio="pp"] body::before { background: radial-gradient(1100px 420px at 50% -140px, rgba(76, 184, 98, 0.16), transparent 70%); }
:root[data-tema="scuro"][data-marchio="pp"] body::before { background: radial-gradient(1100px 460px at 50% -140px, rgba(90, 210, 150, 0.13), transparent 70%); }
:root[data-marchio="m10"] body::before { background: radial-gradient(1100px 420px at 50% -140px, rgba(90, 98, 110, 0.12), transparent 70%); }
:root[data-tema="scuro"][data-marchio="m10"] body::before { background: radial-gradient(1100px 460px at 50% -140px, rgba(195, 202, 212, 0.10), transparent 70%); }
.hidden { display: none !important; }
/* Il gemello di .hidden per chi NON guarda lo schermo: toglie una cosa dalla
   pagina disegnata senza toglierla da quella letta. Serve al titolo di pagina.
   La testata di sezione (.pg-head) l'ha fatta togliere Leo il 27/08 da tutte le
   pagine, e a schermo aveva ragione — il titolo lo ripete gia' la voce di menu
   accesa. Ma la voce accesa e' una classe CSS: chi legge con la voce non la
   sente, e senza un h1 ogni schermata comincia da un h2. Saltando di
   intestazione in intestazione non si sa dove si e' atterrati.
   1px e non 0: un riquadro largo zero certi lettori lo saltano come vuoto.
   clip-path e non il vecchio clip: rect(), deprecato — stessa resa.
   nowrap perche' dentro un pixel ogni parola andrebbe a capo, e c'e' chi allora
   legge una lettera per riga. !important come su .hidden qui sopra: e' una
   utility, deve vincere ovunque la si appoggi. */
.solo-lettori {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

button, input, select { font-family: inherit; }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 3px solid var(--ring); outline-offset: 1px;
}

/* ── LOGIN (e "scegli la password": stessa scenografia) ────────────────── */
#login, #recupero {
  /* svh = l'altezza che resta con la barra degli indirizzi APERTA. Con 100vh
     iOS conta la finestra a barra nascosta: la card si centra rispetto a uno
     schermo piu' alto di quello che si vede, e il bottone "Accedi" finisce
     sotto la barra. Il 100vh resta come ripiego per i browser senza svh. */
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
  background: var(--brand-grad);
}
.login-leaf {
  position: absolute; color: #fff; opacity: 0.16; pointer-events: none;
}
.login-leaf.leaf-a { width: 380px; left: -70px; bottom: -60px; transform: rotate(8deg); }
.login-leaf.leaf-b { width: 300px; right: -60px; top: -50px; transform: rotate(190deg); }
.login-card {
  position: relative;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 22px;
  padding: 36px 32px 30px; width: 392px; max-width: 100%;
  box-shadow: 0 30px 80px -20px rgba(6, 24, 64, 0.55);
  text-align: center;
}
.login-mark {
  width: 96px; height: 96px; margin: 0 auto 16px; display: block;
  border-radius: 24px; object-fit: cover;
  box-shadow: 0 14px 34px -12px rgba(17, 60, 159, 0.6);
}
.login-title {
  font-family: var(--font-display); font-size: 27px; font-weight: 600;
  letter-spacing: 0.01em; margin-bottom: 6px;
}
.login-brand {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--sv-azure); margin-bottom: 16px;
}
.login-sub { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
#loginForm, #recuperoForm, #scordataForm { display: flex; flex-direction: column; gap: 14px; text-align: left; }
#loginForm label, #recuperoForm label, #scordataForm label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
#loginForm input, #recuperoForm input, #scordataForm input {
  font: inherit; font-size: 15px; padding: 11px 13px;
  background: var(--page); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 11px;
  transition: border-color .15s, box-shadow .15s;
}
#loginForm input:focus, #recuperoForm input:focus, #scordataForm input:focus { border-color: var(--sv-azure); box-shadow: 0 0 0 3px var(--ring); outline: none; }
#loginForm button, #recuperoForm button, #scordataForm button {
  font: inherit; font-size: 15px; font-weight: 700; padding: 12px; margin-top: 6px; cursor: pointer;
  background: var(--brand-grad); color: #fff; border: none; border-radius: 12px;
  letter-spacing: 0.02em; box-shadow: 0 10px 24px -10px rgba(18, 63, 175, 0.6);
  transition: filter .15s, transform .1s;
}
#loginForm button:hover, #recuperoForm button:hover, #scordataForm button:hover { filter: brightness(1.07); }
#loginForm button:active, #recuperoForm button:active, #scordataForm button:active { transform: translateY(1px); }
#loginForm button:disabled, #recuperoForm button:disabled, #scordataForm button:disabled { opacity: .6; cursor: default; }
.login-error { color: var(--bad-text); font-size: 13px; min-height: 18px; text-align: center; }
/* la stessa riga usata per dire "fatto": non e' un errore, non deve essere rossa */
.login-error.ok { color: var(--muted); line-height: 1.55; }
/* "Ho dimenticato la password" e "torna all'accesso": sono vie d'uscita, non
   l'azione principale — il bottone pieno resta uno solo per schermata. */
.login-link {
  display: block; margin: 14px auto 0; padding: 4px 6px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  background: none; border: none; border-radius: 8px; cursor: pointer;
  color: var(--sv-azure);
}
.login-link:hover { text-decoration: underline; }

/* ── SHELL / HEADER / NAV ──────────────────────────────────────────────── */
/* La testata non e' piu' una card blu che scorre via con la pagina: e' una
   fascia FISSA in cima, chiara, con il gradiente del logo ridotto a un filo di
   3px. Il motivo e' d'uso, non di gusto: le tabelle di questa app sono lunghe
   (Panoramica ne ha 24 colonne e un centinaio di righe) e con la testata che
   scorreva via si perdevano insieme la navigazione, il periodo filtrato e il
   "aggiornato alle" — cioe' proprio il contesto che dice di cosa parlano i
   numeri che si stanno leggendo. Il blu pieno, appiccicato in alto per sempre,
   sarebbe stato troppo rumore: resta nel filo e nella voce accesa del menu. */
#shell { max-width: none; margin: 0; padding: 0; }

header {
  position: sticky; top: 0; z-index: 40;
  /* contesto di impilamento SCRITTO: ci vive dentro l'alone di #freshness, che
     sta a z-index -1 e senza un contesto finisce dietro al fondo della fascia.
     Su desktop lo aprirebbe gia' `position: sticky` + z-index, ma sotto i 640px
     la testata torna `position: static` e quello z-index non conta piu'.
     Vedi la nota lunga su #freshness::after. */
  isolation: isolate;
  display: block; padding: 0; margin: 0; border-radius: 0; overflow: visible;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  color: var(--ink); box-shadow: none;
}
header::before { content: none; }
/* la targhetta della copia di prova: piccola, ferma, impossibile da confondere
   con un dato. Sta prima del marchio perche' e' la prima cosa da sapere. */
.dev-badge {
  position: fixed; left: 10px; bottom: 10px; z-index: 90;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  padding: 4px 8px; border-radius: 6px;
  background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--bad-bd);
  box-shadow: var(--shadow-pill); pointer-events: none;
}
/* ⚠️ var(--brand-grad) e non il gradiente scritto a mano: e' il filetto che
   fa capire a colpo d'occhio in che marchio si e', e con i colori copiati qui
   dentro restava blu anche su Poltrona Piena. L'angolo cambia (90deg contro
   115deg) perche' qui la striscia e' alta 3px e larga tutto lo schermo. */
.hdr-filo { height: 3px; background: var(--brand-grad); }
.hdr-in {
  max-width: 1460px; margin: 0 auto; padding: 0 22px;
  height: 56px; display: flex; align-items: center; gap: 14px;
}
.hdr-azioni { display: flex; align-items: center; gap: 10px; flex: none; }

.brand-mark {
  width: 34px; height: 34px; flex: none; display: block;
  border-radius: 9px; object-fit: cover; box-shadow: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-ui); font-size: 15.5px; font-weight: 700; letter-spacing: -0.012em; }
.brand-sub { font-size: 8.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* ── l'interruttore dei marchi ───────────────────────────────────────────────
   La targhetta e' diventata un bottone: stessa forma di prima, piu' un caret e
   una tendina. Deliberatamente NON usa la .dd di Sauron: quella e' un filtro
   dentro una pagina, larga quanto una tendina di modulo; questa e' l'identita'
   della schermata e deve restare la cosa piu' grande in alto a sinistra. */
.brand-dd { position: relative; flex: none; }
.brand {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink);
  flex: none;
  /* ora e' un <button>: via i suoi stili di serie */
  background: none; border: 0; padding: 4px 6px 4px 0; margin: 0;
  font: inherit; text-align: left; cursor: pointer; border-radius: 10px;
}
.brand:hover { background: var(--surface-3); }
.brand-fisso .brand { cursor: default; }
.brand-fisso .brand:hover { background: none; }
.brand-fisso .brand-caret { display: none; }
.brand-segno { display: flex; flex: none; color: var(--brand); }
/* Il logo di Salone Vincente e' un PNG quadrato pieno, e .brand-mark lo tratta
   come tale (angoli tondi, ritagliato per riempire). Gli altri due sono SVG
   trasparenti disegnati sul loro margine: vanno lasciati interi e senza cornice,
   o il dente uscirebbe con gli angoli mangiati. */
.brand-mark.mk-piatto { border-radius: 0; object-fit: contain; }
.brand-caret { color: var(--muted); font-size: 11px; margin-left: 2px; flex: none; }

.brand-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 268px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 14px; box-shadow: var(--shadow-pop);
}
.brand-voce {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border: 0; border-radius: 10px;
  background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
.brand-voce:hover { background: var(--row-hover); }
.brand-voce.on { background: var(--nav-bg); }
.bv-segno { display: flex; flex: none; }
.bv-segno .brand-mark { width: 30px; height: 30px; }
/* ⚠️ Vale solo per MACH10, l'unico segno che prende il colore del testo. E' un
   colore FISSO e non var(--brand): nella tendina le tre voci si vedono tutte
   insieme, e con la variabile del marchio attivo la freccia si tingerebbe di
   verde stando dentro Poltrona Piena. Gli altri due sono file a colori loro. */
.brand-voce.mk-m10 .bv-segno { color: #1c2026; }
:root[data-tema="scuro"] .brand-voce.mk-m10 .bv-segno { color: #dfe4ea; }
.bv-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.bv-nome { font-size: 14px; font-weight: 650; }
.bv-sotto { font-size: 11.5px; color: var(--muted); }
.bv-check { color: var(--brand); font-weight: 700; opacity: 0; flex: none; }
.brand-voce.on .bv-check { opacity: 1; }

/* La navigazione si prende lo spazio che avanza e scorre di lato quando le
   voci non ci stanno (min-width:0 e' quello che permette a un figlio flex di
   stringersi sotto la larghezza del suo contenuto). */
#nav { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
#nav::-webkit-scrollbar { display: none; }
#nav a {
  text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  padding: 7px 13px; border-radius: 8px; color: var(--ink-2);
  transition: background .15s, color .15s;
}
#nav a:hover { color: var(--ink); background: var(--surface-3); }
#nav a.active { color: var(--nav-fg); background: var(--nav-bg); font-weight: 600; box-shadow: none; }

/* "aggiornato alle 14:30" non e' piu' una pastiglia ma una riga di servizio:
   il pallino verde basta a dire che il dato e' vivo. Resta il pulsare, che e'
   l'unica cosa in movimento nella testata e quindi si nota anche in coda. */
#freshness {
  margin-left: 0; position: relative; flex: none;
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
  background: none; border: none; border-radius: 0; padding: 0 0 0 13px;
}
#freshness:empty { display: none; }
#freshness::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}
/* ⚠️ L'alone che pulsa e' un SECONDO pallino che cresce, non piu' un box-shadow
   animato. La differenza non e' di gusto: il pallino sta dentro la testata
   sfocata (backdrop-filter), e' sempre a schermo, e box-shadow si anima
   ridisegnando — cioe' il browser rifaceva il disegno di tutta la fascia a ogni
   fotogramma, per sempre, anche a pagina ferma. `opacity` e `transform` invece
   li muove il compositore e la testata non si ridisegna piu'.
   La resa e' la stessa: parte grande quanto il pallino (l'ombra partiva da
   spread 0) e arriva a 20px di diametro — 6 del pallino piu' 7 di spread per
   lato, cioe' scala 3,33 — sfumando fino a sparire.
   z-index: -1 lo tiene DIETRO al pallino, dov'era l'ombra: dentro un contesto
   di impilamento un valore negativo si disegna sopra il fondo di quel contesto
   e sotto tutto il resto. Il contesto e' la TESTATA, ed e' li' che sta la
   trappola: su desktop lo apre `position: sticky` + `z-index: 40`, ma sotto i
   640px `header { position: static }` (vedi @media) spegne lo z-index. Misurato
   a 390px: senza un contesto l'alone finisce DIETRO al fondo della fascia e
   sparisce (pixel 251,253,253 invece di 219,240,238; in tema scuro 14,29,50
   invece di 13,45,61). Prima lo teneva in piedi per caso il `backdrop-filter`
   della testata — cioe' un dettaglio di resa, che in questo stesso giro e'
   stato tolto da .filter-wrap per motivi di ridisegno. Per questo la testata
   dichiara `isolation: isolate`: il contesto e' scritto, non dedotto.
   ⚠️ Il verde e' scritto a mano e non var(--green) apposta: era cosi' anche
   prima nei fotogrammi, quindi sul tema scuro l'alone resta questo. */
#freshness::after {
  content: ''; position: absolute; left: 0; top: 50%; z-index: -1;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(15, 159, 133, 0.5);
  transform: translateY(-50%) scale(1);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: translateY(-50%) scale(1);    opacity: 1; }
  70%  { transform: translateY(-50%) scale(3.33); opacity: 0; }
  100% { transform: translateY(-50%) scale(3.33); opacity: 0; }
}

/* interruttore del tema: dice DOVE SI E' (Auto / Chiaro / Scuro), non dove si
   andrebbe — un interruttore che mostra la destinazione si legge al contrario */
.hdr-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--border-2); border-radius: 9px; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.hdr-btn:hover { background: var(--surface-3); color: var(--ink); }

/* "dati di 3 min fa": l'eta' di quello che si sta guardando, cioe' da quanto le
   risposte stanno nella cache di rete (js/cache.js). Vuoto = i numeri sono di
   adesso, e allora non si scrive niente: una casella che dice "0 min fa" e'
   solo rumore addosso a una testata gia' piena. Per rinfrescare si ricarica la
   pagina: non c'e' un pulsante, farebbe la stessa identica cosa. */
#etaDati {
  font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: none;
}
#etaDati:empty { display: none; }

.logout-btn {
  position: relative;
  font: inherit; font-size: 13px; font-weight: 500; padding: 7px 10px; cursor: pointer;
  background: none; color: var(--muted);
  border: none; border-radius: 9px;
  transition: color .15s, background .15s;
}
.logout-btn:hover { background: none; color: var(--bad); }

/* il corpo della pagina: la stessa colonna della testata, cosi' titolo e logo
   sono incolonnati */
#main { max-width: 1460px; margin: 0 auto; padding: 22px 22px 72px; }

/* ── FILTRI ────────────────────────────────────────────────────────────── */
/* position: relative = àncora dei fumetti ⓘ della barra (vedi .kg-i::after).
   Senza, il fumetto si ancora al blocco contenitore iniziale — né #app né
   #shell sono posizionati — e cade ~550px più in basso, staccato dall'icona. */
.filters { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* La barra filtri sta appiccicata SOTTO la testata (57px = 3 del filo + 54 di
   riga, meno un pelo perche' i due bordi non facciano una doppia linea): il
   periodo su cui si sta guardando non deve sparire quando si scorre una
   tabella lunga. Il fondo e' lo stesso della testata, cosi' insieme leggono
   come un'unica fascia di comando.
   ⚠️ FONDO PIENO E NIENTE `backdrop-filter`. Ce l'aveva anche lei, identico a
   quello della testata: due strati appiccicati uno sull'altro che sfocavano la
   stessa roba due volte, a ogni fotogramma di ogni scorrimento, su tutte le
   schermate. La sfocatura resta a quello di SOPRA — la testata — e qui si usa
   var(--surface), che e' esattamente var(--header-bg) portato ad alfa 1: il
   token della testata e' rgba() dello stesso colore in tutti e sei i temi
   (bianco in chiaro, #0e1c31 / #282d28 / #131519 in scuro). */
.filter-wrap {
  position: sticky; top: 59px; z-index: 30;   /* 3 del filo + 56 di riga, meno il bordo: i due filetti si sovrappongono invece di lasciare una fessura */
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
.filter-bar {
  max-width: 1460px; margin: 0 auto; padding: 9px 22px;
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 9px 14px;
  background: none; border: none; border-radius: 0; box-shadow: none;
}
/* Le etichette maiuscole davanti a ogni tendina ("CONSULENTE", "MEDIA BUYER")
   ripetevano quello che la tendina dice gia' da sola nella voce "Tutti i
   consulenti": tolte dalla barra in alto, restano nel markup perche' app.js le
   accende e spegne insieme alla loro tendina. */
.filter-bar .filter-cap { display: none; }
.filters-sep { flex: 1; min-width: 0; }

#chMode { margin-bottom: 18px; }
.filters-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.filter-cap {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-right: 6px; min-width: 74px;
}

/* ── segmentati ──────────────────────────────────────────────────────────
   I preset di periodo (e ogni altro gruppo .seg) non sono piu' sette pastiglie
   sciolte ma UN comando: binario grigio, e dentro il selezionato in rilievo.
   Cosi' si legge che sono alternative fra loro — con sette pastiglie uguali
   sembravano sette bottoni indipendenti — e la barra occupa meno spazio. */
.filters .seg, .filters-row.seg { gap: 3px; padding: 3px; background: var(--surface-3); border-radius: 10px; }
.filters .seg button, .filters-row.seg button { padding: 5px 11px; border-radius: 7px; font-size: 12.5px; }

.filters button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  border: 1px solid transparent; border-radius: 9px;
  transition: background .15s, color .15s, border-color .15s;
}
.filters button:hover { background: var(--hover); color: var(--ink); }
.filters button.active {
  color: var(--pill-fg); background: var(--pill-on); border-color: transparent;
  box-shadow: var(--shadow-pill);
}
.filters .custom {
  display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px;
  padding-left: 0; border-left: none; margin-left: 0;
}
.filters .custom button { border: 1px solid var(--border-2); background: var(--surface); }
.filters input[type=date] {
  font: inherit; font-size: 12px; padding: 4px 8px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-2); border-radius: 8px;
}
.filters input[type=date]:focus { border-color: var(--azure); }
.consulente-wrap { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.consulente-wrap select {
  font: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 28px 5px 10px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--border-2); border-radius: 8px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237789a0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* ── KPI ───────────────────────────────────────────────────────────────── */
/* riga piatta (sezione Chiamate) */
/* position: relative = àncora dei fumetti ⓘ delle tile (vedi .kg-i::after) */
.kpi-row { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }

/* testata di pagina dentro una sezione (titolo + nota a sinistra, chip a destra) */
.sm-head { position: relative; display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.sm-title .kg-i { width: 15px; height: 15px; margin-left: 7px; vertical-align: 2px; font-size: 9.5px; }
.sm-head .lead-tabs { margin: 0 0 0 auto; }
.sm-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.01em; }
.sm-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 78ch; }

/* Le tre fasce — etichetta, numero, nota — sono le STESSE righe per tutte le
   tile della riga: un'etichetta che va a capo (FATTURATO CONTRATTUALIZZATO) o
   una nota su due righe non spostano più il numero delle vicine. Prima, con il
   solo flex, si allineava il fondo: bastava una nota più lunga per far salire
   il numero di quella tile. Le tre righe le disegna il contenitore, quindi il
   row-gap del .kpi-row va azzerato qui dentro (lo spazio lo fanno i margini). */
@supports (grid-template-rows: subgrid) {
  .kpi-row .tile {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  }
  .kpi-row .tile .value { margin-top: 0; align-self: end; }
}
.tile .label, .kg-tile .label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.tile .value {
  margin-top: auto;
  font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.tile .sub, .kg-tile .sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* gruppi a funnel (Panoramica): 1 Investimento → 2 Appuntamenti → 3 Vendite */
.kpi-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi-groups > .status { grid-column: 1 / -1; }
/* card alte quanto il loro contenuto: con gruppi di lunghezza diversa lo stretch
   lascia mezza card vuota (opt-in: dove i gruppi sono simili è meglio pari) */
.kpi-groups.kpi-auto { align-items: start; }
.kpi-group {
  position: relative;           /* niente overflow:hidden: i tooltip ⓘ escono dalla card */
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 15px 18px 13px 21px; box-shadow: var(--shadow-card);
}
.kpi-group::before { /* filo brand sul bordo sinistro */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brand-grad); border-radius: 16px 0 0 16px;
}
.kg-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.kg-step {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  background: var(--brand-grad); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.kg-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-secondary);
}
.kg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 6px 14px; }
.kg-tile .value { font-size: 17.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kg-hero { grid-column: 1 / -1; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px dashed var(--grid); }
.kg-hero .value { font-size: 31px; letter-spacing: -0.015em; }

/* variante a righe (Sauron): etichetta a sinistra, numero a destra, una per riga.
   Con etichette lunghe la griglia a colonne mandava i titoli a capo su 2-3 righe
   e i numeri non si allineavano mai fra loro. */
.kg-righe { grid-template-columns: 1fr; gap: 0; }
.kg-righe .kg-tile {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 14px; padding: 7px 0; border-top: 1px solid var(--grid);
}
.kg-righe .kg-tile:first-child, .kg-righe .kg-hero + .kg-tile { border-top: none; }
.kg-righe .kg-tile .label { margin-bottom: 0; }
.kg-righe .kg-tile .value { font-size: 15.5px; text-align: right; white-space: nowrap; }
.kg-righe .kg-tile .sub { grid-column: 1 / -1; }
.kg-righe .kg-hero {
  display: block; padding: 0 0 11px; margin-bottom: 2px; border-top: none;
}
.kg-righe .kg-hero .label { margin-bottom: 5px; }
.kg-righe .kg-hero .value { font-size: 31px; text-align: left; }

/* gruppo su due colonne: le voci si dispongono su due file di righe, così un
   gruppo lungo riempie la riga della griglia invece di lasciare un buco */
.kg-wide { grid-column: span 2; }
.kg-wide .kg-righe { grid-template-columns: 1fr 1fr; column-gap: 34px; }
.kg-wide .kg-hero { grid-column: 1 / -1; }
.kg-wide .kg-righe .kg-tile:nth-child(-n+3) { border-top: none; }  /* hero + prima riga di ogni colonna */
/* 1020 e non 1100: 1024 e' l'iPad in orizzontale */
@media (max-width: 1020px) {
  .kg-wide { grid-column: auto; }
  .kg-wide .kg-righe { grid-template-columns: 1fr; }
  .kg-wide .kg-righe .kg-tile:nth-child(3) { border-top: 1px solid var(--grid); }
}
.val-good { color: var(--good-text); }
.val-bad { color: var(--bad-text); }

/* ⓘ accanto al titolo della tile: la spiegazione compare in hover, così la
   dashboard resta titolo + numero. Il fumetto è ancorato alla CARD (non
   all'icona) e largo quanto lei: non esce mai dallo schermo. */
.kg-nb { white-space: nowrap; }   /* ultima parola + ⓘ non si separano mai */
.kg-i {
  display: inline-grid; place-items: center; vertical-align: -2px;
  width: 13px; height: 13px; margin-left: 5px; padding: 0; flex: none;
  border: 1px solid currentColor; border-radius: 50%; background: none;
  color: var(--muted); cursor: help;
  font: 700 8.5px/1 var(--font-ui); letter-spacing: 0; text-transform: none;
}
.kg-i:hover, .kg-i:focus-visible { color: var(--text-primary); outline: none; }
.kg-i::after {
  content: attr(data-tip);
  position: absolute; left: 12px; right: 12px; max-width: 520px; top: calc(100% + 7px); z-index: 40;
  padding: 9px 12px; border-radius: 11px;
  background: var(--text-primary); color: var(--page);
  box-shadow: 0 10px 28px -12px rgba(16, 42, 84, 0.55);
  font: 500 11.5px/1.45 var(--font-ui); letter-spacing: 0; text-transform: none;
  /* pre-line: le spiegazioni con un dettaglio voce per voce arrivano con gli \n
     (il testo sta in un attributo, quindi non può contenere HTML) */
  text-align: left; white-space: pre-line;
  /* ⚠️ Da chiuso è `display: none`, NON `visibility: hidden`. Il fumetto è
     assoluto e un assoluto invisibile spinge comunque l'area scorribile del suo
     contenitore: nelle th di una tabella dentro .table-scroll (overflow: auto)
     i fumetti pendevano sotto l'intestazione per tutta la loro altezza, e la
     tabella "Per beauty" di #/mia — 78px, una riga — scorreva per 439px di
     vuoto (misurato). Lo stesso difetto, in orizzontale, si era già visto sui
     telefoni: la correzione stava solo nel blocco ≤640, adesso vale ovunque.
     La dissolvenza resta: `display` transisce con allow-discrete, e lo stato
     di partenza sta nel @starting-style qui sotto. Dove il browser non li
     conosce il fumetto compare secco, come già faceva sui telefoni. */
  display: none;
  opacity: 0; transform: translateY(-3px);
  transition: opacity .13s ease, transform .13s ease, display .13s allow-discrete;
}
.kg-i:hover::after, .kg-i:focus-visible::after { display: block; opacity: 1; transform: none; }
@media (hover: none) { .kg-i:focus::after { display: block; opacity: 1; transform: none; } }
@starting-style {
  .kg-i:hover::after, .kg-i:focus-visible::after, .kg-i:focus::after { opacity: 0; transform: translateY(-3px); }
}

/* La regola base della tile sta qui, fusa con l'ancora del suo fumetto (4/9). */
/* stessa ⓘ dentro i quadratini (.tile). Il fumetto si ancora alla tile, ma la
   tile è stretta: se restasse largo quanto lei diventerebbe una colonna di testo
   alta mezza pagina, quindi qui va a larghezza contenuto. Le ultime due tile
   della riga lo aprono verso sinistra, altrimenti uscirebbe dallo schermo. */
.tile {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow-card);
  /* ripiego senza subgrid: allinea solo il fondo (vedi @supports più sopra) */
  display: flex; flex-direction: column;
  position: relative;
}
.tile .kg-i::after { left: 0; right: auto; width: max-content; max-width: min(420px, 78vw); }
.kpi-row .tile:nth-last-child(-n+2) .kg-i::after { left: auto; right: 0; }

/* stessa ⓘ nell'intestazione di una tabella (benchmark di Panoramica). La th è
   stretta: il fumetto va a larghezza contenuto, e le ultime colonne lo aprono
   verso sinistra per non finire fuori dall'area che scorre. */
thead th .kg-i::after { left: 0; right: auto; width: max-content; max-width: min(360px, 70vw); }
thead th:nth-last-child(-n+4) .kg-i::after { left: auto; right: 0; }

/* stessa ⓘ accanto a un comando di una barra di filtri (l'interruttore di vista
   di Beauty Manager, dentro #filtriExtra). Una cosa da rimettere a posto:
   `.filters button` (specificità 0,1,1) batte `.kg-i` (0,1,0) e trasforma il
   cerchietto in una pastiglia 30×14 col bordo trasparente e la "i" a 13px.
   Serve un selettore a due classi, come già fanno .sm-title .kg-i e
   .card h2 .kg-i. Idem per l'hover: .filters button:hover (0,2,1) batte
   .kg-i:hover (0,2,0).
   Il fumetto resta con la geometria di DEFAULT, ancorato alla barra, che è
   larga: left:12px/right:12px/max-width:520px non sfora a nessun breakpoint.
   (Il vecchio involucro `.fl-info`, che teneva la ⓘ e il suo bottone in un
   unico flex item e la nascondeva quando la modalità non era quella scelta, non
   c'è più: adesso la ⓘ è sorella del segmentato intero, non di un bottone.) */
.filters .kg-i {
  display: inline-grid; place-items: center; flex: none;
  width: 13px; height: 13px; margin-left: 6px; padding: 0;
  border: 1px solid currentColor; border-radius: 50%; background: none;
  color: var(--muted); cursor: help;
  font: 700 8.5px/1 var(--font-ui); letter-spacing: 0; text-transform: none;
}
.filters .kg-i:hover, .filters .kg-i:focus-visible { background: none; color: var(--text-primary); }

/* 1020 e non 1100: 1024 e' l'iPad in orizzontale */
@media (max-width: 1020px) { .kpi-groups { grid-template-columns: 1fr; } }

/* otto KPI = due file piene di quattro: con l'auto-fit venivano 7 + 2 spaiate */
.kpi-row.kpi-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .kpi-row.kpi-4 { grid-template-columns: repeat(2, 1fr); } }

/* ── tabella con celle editabili (tab Team) ────────────────────────────── */
.mt-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.mt-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); padding: 0 6px 8px; white-space: nowrap;
}
.mt-table td { padding: 5px 6px; border-top: 1px solid var(--grid); vertical-align: middle; }
.mt-table tbody tr:first-child td { border-top: none; }
.mt-vuoto { color: var(--muted); font-size: 13px; padding: 18px 6px; text-align: center; }
.cell-inp, .cell-sel {
  font-family: inherit; font-size: 13px; color: var(--text-primary); width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 7px 9px;
}
.cell-inp:hover, .cell-sel:hover { border-color: var(--border); background: var(--surface-1); }
.cell-inp:focus, .cell-sel:focus { outline: none; border-color: var(--sv-azure); box-shadow: 0 0 0 3px var(--ring); background: var(--surface-1); }
.cell-sel { cursor: pointer; }

/* ── tab Team ──────────────────────────────────────────────────────────── */
.tm-chip {
  display: inline-flex; align-items: center; gap: 5px; margin: 2px 4px 2px 0;
  padding: 4px 9px; border-radius: 20px; cursor: pointer;
  background: var(--row-alt); border: 1px solid transparent; color: var(--text-secondary);
  font-family: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.tm-chip:hover { border-color: var(--border); color: var(--text-primary); }
.tm-chip.on { background: rgba(34, 112, 216, 0.12); color: var(--series-1); }
.tm-chip.alias { cursor: default; font-weight: 500; }
.tm-chip.alias.da-conf { background: rgba(232, 160, 29, 0.16); color: #9a6a04; }
.tm-x {
  border: none; background: none; cursor: pointer; color: inherit; opacity: 0.55;
  font-size: 11px; line-height: 1; padding: 0 1px;
}
.tm-x:hover { opacity: 1; color: var(--bad-text); }
.tm-add {
  font-family: inherit; font-size: 12px; color: var(--text-primary); width: 150px;
  background: transparent; border: 1px dashed var(--border); border-radius: 20px; padding: 3px 10px;
}
.tm-add:focus { outline: none; border-style: solid; border-color: var(--sv-azure); }
.tm-tipo { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tm-fonte { font-size: 11.5px; color: var(--muted); }
.tm-num { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.tm-azioni { white-space: nowrap; text-align: right; }
.tm-azioni .tk-btn { margin-left: 4px; }
.tm-uscito td { opacity: 0.5; }
.tm-toggle { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }

/* ── tab Team · la tabella .tm-persone NON ESISTE PIU' ─────────────────────
   La lista delle persone la disegna Accessi con .ac-tab, e la ricerca in
   testata e' un `input[type=search]` dentro .pn-tab-cmd. Cancellate insieme
   .tm-cerca, .tm-persone (e le sue celle .tm-cel-team / .tm-cel-azioni),
   .tm-login e .tm-accesso-no: nessun modulo scrive piu' quei nomi. Restano le
   classi ancora usate — .tm-nome, .tm-tel, .tm-chip, .tm-ruoli… */

/* il nome è il dato, il telefono la riga di servizio sotto.
   display:block: due input a width:100% nella stessa cella restano affiancati */
.tm-nome, .tm-tel {
  display: block; box-sizing: border-box; width: 100%; font-family: inherit;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
}
.tm-nome { font-size: 13.5px; font-weight: 600; color: var(--text-primary); padding: 4px 7px; }
.tm-tel { font-size: 11.5px; color: var(--muted); padding: 2px 7px; font-variant-numeric: tabular-nums; }
.tm-nome:hover, .tm-tel:hover { border-color: var(--border); background: var(--surface-1); }
.tm-nome:focus, .tm-tel:focus {
  outline: none; border-color: var(--sv-azure); box-shadow: 0 0 0 3px var(--ring); background: var(--surface-1);
}
.tm-segnale {
  display: inline-block; font-family: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px;
  margin: 2px 0 0 7px; border: none;
}
.tm-segnale.dedotto { background: rgba(232, 160, 29, 0.16); color: #9a6a04; }
.tm-segnale.doppio { background: rgba(214, 69, 69, 0.14); color: var(--bad-text); cursor: pointer; }
.tm-segnale.doppio:hover { background: rgba(214, 69, 69, 0.26); }

/* ── unione di due doppioni (finestra) ─────────────────────────────────── */
.tm-fusione { width: 620px; max-width: 100%; }
.tm-fus-con { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.tm-fus-con .cell-sel {
  width: auto; flex: 1 1 200px; border-color: var(--border); background: var(--surface-1);
}
.tm-fus-scelta { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 6px; }
.tm-fus-carte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .tm-fus-carte { grid-template-columns: 1fr; } }
.tm-fus-carta {
  display: block; cursor: pointer; padding: 10px 11px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-1);
}
.tm-fus-carta.on { border-color: var(--sv-azure); box-shadow: 0 0 0 3px var(--ring); }
.tm-fus-testa { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 7px; }
.tm-fus-ex { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tm-fus-riga { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.5; }
.tm-fus-riga span { color: var(--muted); flex: 0 0 92px; }
.tm-fus-riga b { font-weight: 500; color: var(--text-secondary); word-break: break-word; }
.tm-fus-esito {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--row-alt);
  font-size: 12.5px; line-height: 1.6; display: grid; gap: 6px;
}

.tm-ruoli, .tm-alias { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tm-ruoli .tm-chip, .tm-alias .tm-chip { margin: 0; }
.tm-alias .tm-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tm-ruolo {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  background: rgba(34, 112, 216, 0.12); color: var(--series-1);
}
.tm-ruolo.vuoto { background: none; color: var(--muted); font-weight: 500; padding-left: 2px; }
.tm-piu {
  border: 1px dashed var(--border); background: none; color: var(--muted); cursor: pointer;
  font-family: inherit; font-size: 12px; line-height: 1; padding: 3px 8px; border-radius: 20px;
}
.tm-piu:hover { border-style: solid; border-color: var(--sv-azure); color: var(--sv-azure); }

/* Centri: il numero è quello di adesso, lo storico sta nel title */
.tm-centri { display: grid; gap: 2px; }
.tm-centro { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.tm-centro b { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--text-primary); }
.tm-centro .q { color: var(--muted); font-size: 11.5px; }
.tm-niente { color: var(--muted); font-size: 12.5px; }

.tm-invito { width: 460px; max-width: 100%; }
.tm-invito .tk-campi { grid-template-columns: 1fr; }
.tm-invito-esito { margin-top: 12px; font-size: 13px; display: grid; gap: 8px; }
.tm-invito-link { border-color: var(--border); background: var(--row-alt); font-size: 12px; }

/* etichetta d'avviso in riga (es. persona non ancora in anagrafica) */
.badge-nota {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 20px;
  background: rgba(232, 160, 29, 0.16); color: #9a6a04;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
}
:root[data-tema="scuro"] .badge-nota { color: var(--warn); }

/* ── tab Marketing: inserimento dati del mese ──────────────────────────── */
.mm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 18px; }
.mm-campo > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.mm-inp {
  font-family: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text-primary); text-align: right;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; width: 100%;
}
.mm-inp::placeholder { font-weight: 400; color: var(--muted); }
.mm-inp:hover { border-color: var(--baseline); }
.mm-inp:focus { outline: none; border-color: var(--sv-azure); box-shadow: 0 0 0 3px var(--ring); }

/* ── tab Marketing: le sezioni di riquadri (MARKETING · VENDITE · KPI CHIAVE) ─ */
.mm-sez { margin-top: 18px; }
.mm-sez + .mm-sez { margin-top: 26px; }
.mm-sez-tit {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--grid);
}

/* voce CALCOLATA: stessa forma e stessa altezza della casella accanto, ma piena
   e senza bordo — si vede che non ci si scrive prima di provare a cliccarci.
   Il bordo trasparente serve a tenere l'altezza identica all'input. */
.mm-out {
  font-family: inherit; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-primary); text-align: right;
  background: var(--row-alt); border: 1px solid transparent; border-radius: 9px;
  padding: 9px 12px; width: 100%;
}

/* La regola base del riquadro sta qui, fusa con l'ancora del suo fumetto (4/9). */
/* la ⓘ nell'etichetta di un riquadro si ancora al RIQUADRO, non alla card:
   ancorata alla card il fumetto usciva in fondo alla sezione, lontano dalla voce
   che spiega. Larga quanto il testo, come nelle tile. */
.mm-campo {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  position: relative;
}
.mm-campo .kg-i::after { left: 0; right: auto; width: max-content; max-width: min(420px, 78vw); }

/* variazione sul mese prima, sotto il numero della tile. Il numero grande resta
   nero: a colorarsi è solo il giudizio, cioè la freccia. Due righe (il CAC ha
   anche il target), quindi display: block. */
.mkd, .mkd-target { display: block; font-variant-numeric: tabular-nums; }
.mkd { font-weight: 600; color: var(--muted); }
.mkd-good { color: var(--good-text); }
.mkd-bad  { color: var(--bad-text); }
.mkd-target { color: var(--muted); margin-top: 2px; }
.mkd-target.fuori { color: var(--bad-text); font-weight: 600; }

/* due righe da tre tile: `auto-fit` ne farebbe quattro sui monitor larghi e la
   riga si spaierebbe con quella da quattro qui sotto */
.kpi-row.kpi-3 { grid-template-columns: repeat(3, 1fr); }
/* 700 e non 640: fra 641 e 700 ci sono i telefoni in ORIZZONTALE (iPhone SE 667,
   8 Plus 736): tre tessere da 210px lì sono strette, due stanno bene. */
@media (max-width: 700px) {
  .kpi-row.kpi-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── funnel del Marketing ──────────────────────────────────────────────── */
/* Nome a sinistra, barra proporzionale ai LEAD, conversione dal gradino prima a
   destra. La barra è in una "pista" che occupa lo spazio libero, così le
   percentuali di destra restano incolonnate qualunque sia la larghezza. */
.mkf { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mkf-riga { display: flex; align-items: center; gap: 12px; }
.mkf-nome {
  flex: none; width: 132px; text-align: right;
  font-size: 12.5px; color: var(--text-secondary);
}
.mkf-pista { flex: 1; min-width: 0; }
.mkf-barra {
  display: flex; align-items: center; height: 34px; min-width: 46px;
  padding: 0 12px; border-radius: 9px;
  background: linear-gradient(90deg, var(--sv-royal), var(--sv-teal));
}
.mkf-barra b {
  color: #fff; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mkf-conv {
  flex: none; width: 94px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .mkf-nome { width: 92px; font-size: 11.5px; }
  .mkf-conv { width: 74px; font-size: 11px; }
}

/* ── CARD ──────────────────────────────────────────────────────────────── */
.card {
  position: relative;           /* àncora dei fumetti ⓘ dei titoli (vedi .kg-i::after) */
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow-card);
}
.card h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.018em; margin-bottom: 4px; }
/* la stessa ⓘ delle tile, ma accanto a un titolo di card: un filo più grande,
   perché il titolo è a 19px e l'icona da 13 sparirebbe */
.card h2 .kg-i { width: 14px; height: 14px; margin-left: 7px; vertical-align: 1px; font-size: 9px; }
.card .subtitle { font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.note-info {
  font-size: 12px; color: var(--text-secondary); background: rgba(232, 160, 29, 0.1);
  border: 1px solid rgba(232, 160, 29, 0.35); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
}
.mk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.mk-head h2 { margin-bottom: 0; }
.btn-back {
  padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px;
  transition: background .15s, color .15s;
}
.badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
  background: rgba(232, 160, 29, 0.14); color: #9a6b00; border: 1px solid rgba(232, 160, 29, 0.4);
}
:root[data-tema="scuro"] .badge { color: var(--warn); }
.cell-sub { color: var(--muted); font-size: 11px; }

/* ── CHART / TOOLTIP ───────────────────────────────────────────────────── */
svg text { font-family: inherit; }
.chart-wrap { position: relative; }
#tooltip {
  position: fixed; pointer-events: none; z-index: 60; display: none;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; font-size: 12px; color: var(--text-primary);
  box-shadow: 0 8px 26px rgba(6, 24, 64, 0.22); min-width: 140px;
}
#tooltip .t-date { color: var(--muted); margin-bottom: 4px; }
#tooltip .t-row { display: flex; justify-content: space-between; gap: 12px; }

/* ── TABLE ─────────────────────────────────────────────────────────────── */
.table-scroll {
  overflow: auto; max-height: 70vh;
  border: 1px solid var(--grid); border-radius: 12px;
  /* col dito: inerzia su iOS, e soprattutto lo scorrimento non deve "sfondare"
     nella pagina dietro — arrivato in fondo alla tabella, su iOS il gesto
     orizzontale diventa la navigazione indietro e si esce dalla dashboard. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* dettaglio commissioni: il nome del centro non deve mai spingere la colonna
   Commissioni fuori dalla card. Il nome intero resta nel title. */
.dc-centro { display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
/* Lo stesso dettaglio in #/sales ("I tuoi compensi" → clic su un mese) ha una
   colonna in più di quello di Sauron: il RUOLO con cui quella rata è tua. Con i
   340px di sopra la tabella sfondava di 118px e a restare fuori dalla card era
   COMPENSO — la colonna per cui la finestra si apre, che si trovava solo
   scorrendo di lato. `min()` e non una media query: sul telefono resta il 44vw
   che vale per l'altro pop-up, senza una seconda regola da tenere allineata. */
#slModal .dc-centro { max-width: min(240px, 44vw); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-1);
  color: var(--muted); font-weight: 700; cursor: pointer; user-select: none;
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  border-bottom: 2px solid var(--grid);
}
th:hover { color: var(--text-primary); }
th .arrow { font-size: 9px; color: var(--series-1); }
td { font-variant-numeric: tabular-nums; color: var(--text-primary); }
td.name { font-weight: 600; }
/* prima colonna sticky (orizzontale) — lo sfondo segue la riga */
tbody tr { background: var(--surface-1); }
tbody tr:nth-child(even) { background: var(--row-alt); }
th:first-child, td:first-child {
  text-align: left;
  position: sticky; left: 0; z-index: 1;
  background: inherit; border-right: 1px solid var(--grid);
}
thead th:first-child { z-index: 4; background: var(--surface-1); }
tbody tr:hover { background: var(--row-hover); }
/* ⚠️ Lo sfondo della prima colonna deve essere OPACO: è sticky, e le celle le
   scorrono SOTTO. Con `background: inherit` prendeva quello della riga, che in
   hover su una riga cliccabile è un rgba con alfa 0,08 → il nome della campagna
   e i numeri di destra si leggevano sovrapposti (visibile su KPI ALL 3, la
   tabella più larga: 25 colonne). Qui la tinta dell'hover si stende come
   IMMAGINE sopra un colore di fondo pieno, così resta la stessa sfumatura ma
   non si vede più attraverso. */
tbody tr.rowlink:hover > td:first-child {
  background-color: var(--surface-1);
  background-image: linear-gradient(var(--row-link-hover), var(--row-link-hover));
}
tbody tr.rowlink:nth-child(even):hover > td:first-child { background-color: var(--row-alt); }
.mini-bar {
  display: inline-block; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sv-teal), var(--sv-royal));
  vertical-align: middle; margin-right: 8px;
}
.pct-good { color: var(--good-text); font-weight: 600; }

/* ── Intestazioni a sezioni (colonne raggruppate) ───────────────────────────
   Venti colonne in fila sono un muro: renderTable puo' mettere sopra una
   seconda riga di intestazione che accorpa le colonne contigue con lo stesso
   `group` (Panoramica: Facebook ads / Appuntamento / Show / Vendita).
   Il titolo di sezione NON ordina: e' l'unico th senza data-k.
   L'altezza della riga dei titoli e' FISSA ed e' la stessa che la seconda riga
   usa come `top`: devono combaciare al pixel, se no scorrendo la seconda copre
   un filo della prima (o ci lascia una fessura). Fissata a mano perche' con
   padding e line-height liberi dipenderebbe dalle metriche del font, e in
   mobile cambia anche il padding di `th`. */
.th-grouped { --th2-h: 27px; }
.th-group {
  height: var(--th2-h); padding: 0 12px;
  text-align: center; cursor: default;
  color: var(--text-secondary); background: var(--row-hover);
  border-bottom: 1px solid var(--grid);
}
.th-group:hover { color: var(--text-secondary); }
.th-grouped thead tr + tr th { top: var(--th2-h); }
/* filetto verticale dove comincia una sezione — in intestazione e in ogni riga */
.g-start { border-left: 1px solid var(--baseline); }
/* ⚠️ Nella SECONDA riga il primo th non e' la colonna del nome (quella sta
   nella prima con rowspan=2): non deve prendersi lo sticky orizzontale, il
   bordo e l'allineamento a sinistra di `th:first-child`. E nemmeno il suo
   z-index 4, o scorrendo in orizzontale passerebbe SOPRA la colonna sticky. */
.th-grouped thead tr + tr th:first-child {
  left: auto; z-index: 3; border-right: none; text-align: right;
  max-width: none; overflow: visible;
}
input[type=search] {
  font: inherit; font-size: 13px; padding: 7px 12px 7px 32px; margin-bottom: 12px;
  background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Ccircle cx='5.5' cy='5.5' r='4.2' fill='none' stroke='%237789a0' stroke-width='1.5'/%3E%3Cpath d='M9 9l3 3' stroke='%237789a0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center;
  color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 999px; width: 260px; max-width: 100%;
}
tbody tr.rowlink { cursor: pointer; }
tbody tr.rowlink:hover { background: var(--row-link-hover); }
/* ⚠️ Il fuoco da tastiera si disegna sulle CELLE, non sulla riga. L'anello
   predefinito del browser sta sul <tr>, che non e' posizionato, mentre
   `td:first-child` e' `position: sticky; z-index: 1` e quindi dipinge SOPRA:
   spariva proprio il bordo attorno al NOME, cioe' alla cosa che si sta
   scegliendo (misurato: nella fascia sinistra della prima cella cambiavano 9
   pixel su 1303, solo gli angoli). Su telefono, dove il nome si prende quasi
   tutta la riga, restava un rettangolo attorno a due numeri.
   Un'ombra `inset` invece sta DENTRO la cella, sopra il suo fondo, e nessuno
   la puo' coprire: ogni cella disegna il suo pezzo di anello — sopra e sotto
   tutte, a sinistra la prima, a destra l'ultima. var(--brand) e' il colore del
   fuoco in tutto il resto dell'app (.bc-card, .pn-step, .pf-menu) ed esiste in
   tutti e sei i temi. */
/* ⚠️ `.lead-click` e' la stessa cosa con un altro nome: sono le righe della
   tabella dei lead di kpiall3.js, scritte a mano invece che da renderTable.
   Senza nominarla anche lei, l'unica tabella dell'app che NON passa dal
   renderatore comune sarebbe anche l'unica senza anello di fuoco. */
tbody tr.rowlink:focus-visible,
tbody tr.lead-click:focus-visible { outline: none; }
tbody tr.rowlink:focus-visible > td,
tbody tr.lead-click:focus-visible > td {
  box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand);
}
tbody tr.rowlink:focus-visible > td:first-child,
tbody tr.lead-click:focus-visible > td:first-child {
  box-shadow: inset 2px 0 0 var(--brand), inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand);
}
tbody tr.rowlink:focus-visible > td:last-child,
tbody tr.lead-click:focus-visible > td:last-child {
  box-shadow: inset -2px 0 0 var(--brand), inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand);
}
/* Le intestazioni che ordinano prendono il TAB (renderTable ci mette
   tabindex="0"): l'anello va TIRATO DENTRO con un offset negativo, perche' i
   th sono sticky e si scavalcano fra loro — quello della colonna del nome ha
   z-index 4 e mangerebbe il bordo del vicino. */
thead th:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.status { padding: 40px; text-align: center; color: var(--muted); font-size: 14px; }
/* la "moneta": il logo del MARCHIO ATTIVO ritagliato in cerchio che ruota sul
   proprio asse verticale. Il perspective() sta DENTRO la transform (su uno
   pseudo-elemento non c'è un genitore a cui darlo) e il retro specchiato a
   metà giro è voluto, come una moneta vera. L'attributo data-marchio lo scrive
   marchio.js. I segni di PP e M10 sono su fondo TRASPARENTE: senza un disco
   sotto — bianco per il dente, il gradiente monocromo del marchio per la
   freccia (mach10-segno.svg, la freccia sola: la scritta del file intero a
   44px non si leggerebbe) — la moneta non esisterebbe. Il bordino serve alla
   moneta bianca di PP sulle superfici bianche. */
:root { --moneta: url('../assets/logo.png') center/cover no-repeat; }
:root[data-marchio="pp"] { --moneta: url('../assets/poltrona-piena.svg') center/78% no-repeat #fff; }
:root[data-marchio="m10"] { --moneta: url('../assets/mach10-segno.svg') center/62% no-repeat, var(--brand-grad); }
.status.loading::before {
  content: ''; display: block; margin: 0 auto 12px; width: 44px; height: 44px;
  border-radius: 50%; background: var(--moneta); border: 1px solid var(--border);
  animation: moneta 1.2s linear infinite;
}
@keyframes moneta {
  from { transform: perspective(130px) rotateY(0deg); }
  to   { transform: perspective(130px) rotateY(360deg); }
}

/* ── il velo del PRIMO caricamento ─────────────────────────────────────────
   Le sezioni scrivono lo scheletro subito e poi accendono la loro rotellina,
   che nel template sta in CODA: nel Project Manager finiva sotto due tabelle e
   la card dei report, cioe' fuori dalla piega — a schermo si vedeva una pagina
   vuota e la moneta solo scorrendo fino in fondo. Qui la stessa rotellina
   diventa un velo fisso a tutto schermo con la moneta al CENTRO, sopra testata
   e barra filtri: dove si sta gia' guardando.
   ⚠️ Il selettore e' `#app > `, figlia DIRETTA, ed e' la parte importante: le
      altre .status.loading — dentro un pop-up, dentro la tab annunci di Sauron,
      dentro una tabella — non sono figlie di #app e restano rotelline in linea,
      dove servono. Le otto sezioni la mettono al primo livello del mount, quindi
      passano tutte di qui, compresa quella del cambio sezione in app.js.
   ⚠️ `pointer-events: none`: il velo copre nav e filtri per non lasciarli
      appesi a mezz'aria, ma non li deve BLOCCARE — cambiare sezione mentre i
      numeri arrivano deve restare possibile.
   z-index 70: sopra testata (40), barra filtri (30) e assistente (60), sotto i
   pop-up (80) — durante un primo caricamento non sono aperti, ma se uno lo
   fosse e' lui la cosa in primo piano, non il velo.
   Le .status NON loading — "Nessun dato nel periodo selezionato" (#mgVuoto),
   gli errori, il "Non hai i permessi" di Accessi — non sono toccate: restano
   messaggi in pagina, e infatti le sezioni tolgono `loading` prima di scriverli. */
#app > .status.loading {
  position: fixed; inset: 0; z-index: 70; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* il fondo della pagina appena velato: dietro non c'e' niente da leggere (il
     corpo delle sezioni sta `hidden` finche' i dati non arrivano), ma cosi' la
     testata resta riconoscibile invece di sparire. La prima riga e' la scialuppa
     per chi non ha color-mix: fondo pieno, che e' comunque meglio di niente. */
  background: var(--page);
  background: color-mix(in srgb, var(--page) 88%, transparent);
  pointer-events: none;
}

footer { color: var(--muted); font-size: 11px; text-align: center; margin: 26px 0 16px; letter-spacing: 0.02em; }

/* ── MODAL ESITI ───────────────────────────────────────────────────────────
   Il pop-up di riga: gli esiti con le note scritte al telefono e, per gli
   admin, tutte le chiamate con l'audio. È il posto dove un numero diventa una
   storia — si clicca "Non interessato: 41" e si legge cosa hanno detto.
   Ridisegnato col linguaggio nuovo: fasce a tutta larghezza invece di una card
   con padding unico, testata come quella del drill-down del centro, schede
   come segmentato. Il markup resta quello di index.html e di modal.js. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: var(--veil);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.modal-overlay.hidden { display: none; }
/* ⚠️ .modal-card la usano SEI moduli (report, Sauron, Task, Team, Accessi e il
   pop-up esiti): qui stanno solo colori e cornice, che valgono per tutti. Le
   fasce a tutta larghezza — padding zero e le sue conseguenze — sono SOLO del
   pop-up esiti e stanno sotto il suo id: applicate a tutti lasciavano i form di
   Task e Sauron senza margini, e con l'ordine dei blocchi sottosopra. */
.modal-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  width: 640px; max-width: 100%; padding: 20px 24px 22px;
  box-shadow: var(--shadow-pop);
}

/* ── il solo pop-up esiti: fasce a tutta larghezza ─────────────────────────
   Colonna flex per un motivo solo: rimettere le schede PRIMA della legenda.
   modal.js crea la barra al volo e la infila subito sopra il corpo, quindi nel
   DOM finisce dopo la legenda — che però spiega i colori delle barre e ha senso
   solo dentro la scheda Esiti. Spostarla con `order` costa una riga; spostarla
   nel JS vorrebbe dire toccare un modulo che un browser può avere in cache. */
#esitiModal .modal-card { padding: 0; display: flex; flex-direction: column; }
#esitiModal .modal-head { order: 1; padding: 20px 24px 4px; }
/* order: 2 e' .modal-sub — sta nella sua regola, sotto quella di .modal-sub */
#esitiModal #emTabs { order: 3; }
#esitiModal .modal-legend { order: 4; }
#esitiModal #emBody { order: 5; }
.modal-head { display: flex; align-items: flex-start; gap: 20px; }
.modal-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; flex: 1; min-width: 0; }
.modal-close {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  font: inherit; font-size: 14px; cursor: pointer;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 8px; padding: 0;
}
.modal-close:hover { color: var(--ink); background: var(--surface-3); }
.modal-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; text-wrap: pretty; }
#esitiModal .modal-sub { order: 2; padding: 0 24px 14px; margin-bottom: 0; }

/* le schede Esiti / Registrazioni: lo stesso segmentato del resto dell'app */
/* ⚠️ Selettori con l'ID di proposito: modal.js mette sulla barra anche la classe
   .lead-tabs, che porta le pastiglie col gradiente ed è dichiarata PIÙ IN BASSO
   nel foglio — a parità di specificità vincerebbe lei. */
#emTabs { display: flex; gap: 3px; padding: 3px; background: var(--surface-3); border-radius: 10px; margin: 0 24px 14px; width: max-content; max-width: calc(100% - 48px); }
#emTabs.hidden { display: none; }
#emTabs button {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px; cursor: pointer;
  border: none; border-radius: 7px; background: none; color: var(--ink-2); white-space: nowrap;
}
#emTabs button:hover { background: none; color: var(--ink); }
#emTabs button.active { background: var(--pill-on); color: var(--pill-fg); box-shadow: var(--shadow-pill); }

.modal-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
  padding: 12px 24px; border-top: 1px solid var(--line); margin: 0;
}
.modal-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.modal-legend .swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
#emBody { padding: 0 24px 22px; }

/* ── il pannello esiti: una riga per esito ───────────────────────────────────
   28/08. Prima erano nome e numero su una riga e la barra sotto, tutte dello
   stesso blu tranne gli appuntamenti: diciassette barre uguali in cui non si
   vedeva ne' il peso dei gruppi ne' la fine della lista (serviva scorrere).
   Adesso la riga e' una sola — pastiglia, nome, barra, numero — e il colore e'
   quello del GRUPPO della bacheca. Ci stanno tutti gli esiti senza scorrere, in
   meno della meta' dell'altezza.
   ⚠️ `.esito-row` e `.esito-click` restano i nomi di prima perche' `toggleNote`
      ci appende dentro il riquadro delle note: cambiarli vorrebbe dire toccare
      anche quello. */
.esito-row { margin: 0; }
.esito-row .esito-click { cursor: pointer; border-radius: 9px; }
.esito-row .esito-click:hover { background: var(--hover); }

/* La barra vecchia, quella a due piani (etichetta + valore sopra, barra sotto).
   Il pannello esiti non la usa piu' — l'ha sostituita `.em-riga-c` qui sopra —
   ma `sauron.js` la scrive ancora in due carte: «Dove vanno i soldi» (renderPnl)
   e «Classifica per rinnovi» (renderDelivery). Il redesign del 28/08 si e'
   portato via le regole insieme al markup che le usava: da allora quelle due
   carte disegnano barre alte ZERO (misurato in Chromium: 0px contro i 9px di
   prima) e l'etichetta va a capo invece di stare al capo opposto del valore. */
.esito-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 3px; gap: 12px; }
.esito-top .lbl { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esito-top .val { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.esito-track { height: 9px; background: var(--grid); border-radius: 5px; overflow: hidden; }
.esito-fill { height: 100%; border-radius: 5px; }

/* la striscia del totale e la sua legenda: tutto il periodo in una riga sola */
.em-strip { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 2px 0 11px; }
.em-strip > i { display: block; min-width: 3px; }
.em-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--ink-2); margin-bottom: 14px; }
.em-leg .k { display: inline-flex; align-items: center; gap: 6px; }
.em-leg .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.em-leg b { color: var(--ink); font-variant-numeric: tabular-nums; }

.em-riga-c {
  display: grid; grid-template-columns: minmax(0, 300px) 1fr auto;
  align-items: center; gap: 16px; padding: 6px 8px; margin: 0 -8px; font-size: 12.5px;
}
.em-lbl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.em-lbl .dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.em-lbl > span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-track { height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.em-track > i { display: block; height: 100%; border-radius: 4px; }
.em-val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.em-val b { color: var(--ink); }

/* Sul telefono le tre colonne non ci stanno: il nome va sopra, barra e numero
   sotto. La barra resta — e' l'unica cosa che si confronta a occhio. */
@media (max-width: 640px) {
  .em-riga-c { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .em-lbl { grid-column: 1 / -1; }
  .em-val { font-size: 12px; }
}

/* ── la BACHECA degli esiti (migration 120) ──────────────────────────────────
   Sostituisce la lista di barre nella vista "per data inserimento lead": una
   card per lead, in colonne per gruppo. Colori e misure sono quelli delle altre
   tabelle, non un linguaggio nuovo. */
.bc-legenda {
  display: flex; gap: 13px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted);
  padding-bottom: 12px;
}
.bc-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.bc-legenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ⚠️ Il board scorre di lato DENTRO di sé: senza questo overflow scorrerebbe
   tutto il pop-up e la colonna piu' a destra finirebbe sotto il bordo. */
.bc-board {
  display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 6px;
}
.bc-col {
  flex: 0 0 244px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; max-height: 56vh;
}
.bc-col.allarme { border-color: var(--bad); background: var(--bad-bg); }
/* `background: inherit` e non un colore: la colonna d'allarme ha il suo fondo,
   e una testata opaca di un'altra tinta ci si vedrebbe sopra. */
.bc-head {
  padding: 10px 12px 9px; border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; background: inherit; border-radius: 12px 12px 0 0; z-index: 1;
}
.bc-riga { display: flex; align-items: baseline; gap: 8px; }
.bc-nome {
  flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.045em; text-transform: uppercase; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help;
}
.bc-col.allarme .bc-nome { color: var(--bad); }
.bc-n { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bc-p { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bc-bar { height: 3px; border-radius: 2px; margin-top: 7px; }
.bc-body { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }

.bc-card {
  appearance: none; text-align: left; font: inherit; width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--linea); border-radius: 9px;
  padding: 9px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
  color: inherit;
}
.bc-card:hover { border-color: var(--border-2); background: var(--hover); }
.bc-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.bc-top { display: flex; align-items: baseline; gap: 8px; }
.bc-centro {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-ora { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bc-esito { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--linea); }
/* la nota si apre al clic: due righe da chiusa, tutte da aperta */
.bc-nota {
  font-size: 11.5px; color: var(--ink-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-card.aperta .bc-nota { -webkit-line-clamp: unset; }
.bc-nota.vuota { color: var(--muted); font-style: italic; }
.bc-piede { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--muted); }
.bc-lead { font-variant-numeric: tabular-nums; }
.bc-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  padding: 1.5px 6px; border-radius: 5px; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2);
}
.bc-chip.rossa { background: var(--bad-bg); color: var(--bad); }
.bc-resto {
  padding: 9px 10px; font-size: 11.5px; color: var(--muted); text-align: center;
  border: 1px dashed var(--border-2); border-radius: 9px;
}
.bc-vuota { padding: 14px 10px; font-size: 11.5px; color: var(--muted); text-align: center; }
/* Le note della beauty: un riquadro, non un filetto a sinistra. Sono testo
   scritto a mano in mezzo a numeri, e il riquadro dice "qui si cambia registro". */
.note-box {
  margin: 10px 0 2px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  max-height: 260px; overflow-y: auto;
}
.nota { display: flex; gap: 10px; font-size: 12px; color: var(--ink-2); padding: 5px 0; line-height: 1.5; }
/* 🚨 Le tre colonne davanti al testo hanno una LARGHEZZA FISSA, non "quella che
   viene": con ottanta note una sotto l'altra il senso della lista e' scorrerla
   con l'occhio, e tre incolonnamenti che ballano la rendono illeggibile.
   Il testo prende quel che resta (`min-width: 0` o non va mai a capo). */
.nota .nota-data { flex: 0 0 66px; color: var(--muted); margin-right: 0; font-variant-numeric: tabular-nums; }
.nota .nota-chi {
  flex: 0 0 118px; color: var(--ink-2); text-decoration: none;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nota a.nota-chi:hover { text-decoration: underline; }
/* il ripiego "Lead #NNN": si vede che e' un'altra cosa, senza gridarlo */
.nota .nota-chi.senza { color: var(--muted); cursor: help; }
.nota .nota-centro {
  flex: 0 0 150px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nota .nota-testo { flex: 1 1 auto; min-width: 0; }
.note-vuote { font-size: 12px; color: var(--muted); padding: 6px 0; }
.modal-loading { padding: 34px; text-align: center; color: var(--muted); font-size: 13px; }

@media (max-width: 640px) {
  /* come il drill-down del centro: su telefono il pop-up È la pagina */
  #esitiModal .modal-card { padding: 0; }
  #esitiModal .modal-head { padding: 14px 14px 4px; }
  #esitiModal .modal-sub, .modal-legend, #emBody { padding-left: 14px; padding-right: 14px; }
  #emTabs { margin-left: 14px; margin-right: 14px; max-width: calc(100% - 28px); }
  /* Le quattro colonne della nota su 347px non ci stanno (334 solo le prime tre
     coi vuoti). Il TESTO va a capo tutto intero e sopra resta il cartellino —
     quando · numero · azienda — che e' l'ordine in cui si cerca una riga. */
  .nota { flex-wrap: wrap; row-gap: 1px; }
  .nota .nota-centro { flex: 1 1 auto; }
  .nota .nota-testo { flex: 1 0 100%; }
  /* Andate a capo, due note diventano tre righe attaccate a tre righe: senza un
     filetto non si vede dove finisce una. Sul largo non serve — le colonne lo
     fanno gia' da sole. */
  .nota + .nota { border-top: 1px solid var(--line-2); margin-top: 3px; padding-top: 7px; }
}

/* ── KPI ALL 3 (Sauron > Marketing) ─────────────────────────────────────── */

/* Tendina a spunte (campagne): sostituisce una fila di chip larghi mezza pagina */
.dd { position: relative; display: inline-block; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer;
  background: var(--page); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
  max-width: 320px;
}
.dd-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn:hover { border-color: var(--baseline); }
.dd-btn.dd-attivo { border-color: var(--series-1); color: var(--series-1); }
.dd-caret { color: var(--muted); font-size: 11px; }
.dd-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: min(320px, calc(100vw - 48px)); max-width: min(460px, calc(100vw - 48px));
  max-height: 340px; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px -14px rgba(4, 16, 40, 0.45); padding: 6px;
}
.dd-menu.hidden { display: none; }
.dd-azioni {
  display: flex; gap: 6px; padding: 2px 4px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--grid);
}
.dd-azioni button {
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px;
}
.dd-azioni button:hover { background: var(--row-hover); color: var(--text-primary); }
.dd-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: 9px; cursor: pointer; font-size: 13px;
}
.dd-item:hover { background: var(--row-hover); }
.dd-item input { width: 15px; height: 15px; flex: none; accent-color: var(--series-1); }
.dd-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-val { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dd-check {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; color: var(--text-secondary);
}
.dd-check input { width: 15px; height: 15px; accent-color: var(--series-1); }

/* La riga TOTALE sta DENTRO il thead: così non entra nell'ordinamento, come la
   riga 12 del foglio. Non è sticky (lo resta solo la riga delle intestazioni),
   quindi scorre via insieme ai dati. */
thead tr.ka-tot th {
  position: static;
  background: var(--row-alt); color: var(--text-primary);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
  cursor: default; border-bottom: 2px solid var(--baseline);
}
thead tr.ka-tot th:first-child { position: sticky; left: 0; z-index: 2; background: var(--row-alt); }

/* I conteggi del funnel sono cliccabili: aprono i loro lead soltanto. Devono
   sembrare numeri, non bottoni — il tratteggio sotto basta a dire "ci si clicca". */
.ka-n {
  font: inherit; font-variant-numeric: tabular-nums; color: inherit;
  background: none; border: 0; border-bottom: 1px dashed var(--baseline);
  padding: 0; cursor: pointer;
}
.ka-n:hover { color: var(--series-1); border-bottom-color: var(--series-1); }
thead tr.ka-tot .ka-n { font-weight: 700; }

/* La "% compilati" della tabella Per centro porta DENTRO il buco: un clic apre
   Notion già filtrato sugli appuntamenti da compilare di quel centro in quel
   periodo. Stessa lingua di .ka-n — deve sembrare la percentuale che era, non
   un bottone — ma il colore NON si tocca al passaggio: dentro c'è già la cella
   verde/gialla/rossa della regola del 90%, e sovrascriverla toglierebbe il
   giudizio proprio mentre ci si punta sopra. Si muove solo il tratteggio. */
/* ── QUADRO PM · le micro-grafiche (28/08, proposta "B" scelta da Leo) ───────
   I numeri che hanno una SOGLIA si portano dietro il disegno che la mostra:
   "40" non dice quanto sopra sia, "29%" non dice da che parte della regola
   stia. Otto colonne invece di quattordici dietro un segmentato — si stringe
   invece di nascondere, e quello che era una colonna diventa il sotto-numero
   della cella a cui appartiene. */
.qp-nome { font-weight: 620; }
.qp-sub { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.qp-num { font-variant-numeric: tabular-nums; font-weight: 620; }

/* Il carico: barra col TRAGUARDO. Il fondo scala e' 1,4x la soglia, cosi' la
   tacca cade sempre nello stesso punto e le righe si confrontano a occhio. */
/* ⚠️ `margin-left: auto`: le celle dei numeri sono allineate a DESTRA, e una
   barra larga 92px dentro un blocco largo quanto la cella si incolla a
   sinistra — staccata dal numero che spiega. */
.qp-bar { position: relative; height: 5px; width: 92px; border-radius: 3px;
  background: var(--track); margin: 5px 0 0 auto; }
.qp-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--series-1); }
.qp-bar i.quasi { background: var(--warn); }
.qp-bar i.pieno { background: var(--bad); }
.qp-bar u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--muted); opacity: .5; }

/* Lo score: tre segmenti larghi quanto la fascia conta. */
.qp-sc { display: flex; width: 92px; height: 7px; border-radius: 4px;
  overflow: hidden; background: var(--track); margin: 0 0 4px auto; }
.qp-sc b { display: block; }
.qp-sc .v { background: var(--good); } .qp-sc .g { background: var(--warn); } .qp-sc .r { background: var(--bad); }
.qp-sc-n { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.qp-sc-n .dv-scn { font-weight: 680; }
.qp-sc-n .cv { color: var(--good); } .qp-sc-n .cg { color: var(--warn-fg); } .qp-sc-n .cr { color: var(--bad); }
.qp-sc-n .qp-zero { color: var(--muted); font-weight: 620; }
.qp-sep { color: var(--muted); opacity: .5; margin: 0 5px; }

/* Il semaforo: il pallino dice da che parte della regola sta il numero PRIMA
   ancora di leggerlo — su sette righe e' la differenza fra scorrere e cercare. */
.qp-sem { display: inline-flex; align-items: center; gap: 6px; }
.qp-pal { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--track); }
.qp-pal.ok { background: var(--good); } .qp-pal.warn { background: var(--warn); } .qp-pal.ko { background: var(--bad); }

.pc-buchi, .dv-scn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  border-bottom: 1px dashed var(--baseline); cursor: pointer;
}
.pc-buchi:hover, .dv-scn:hover { border-bottom-color: currentColor; }
.pc-buchi > span, .dv-scn > span { border-bottom: 0; }
/* .dv-scn = i conteggi delle fasce di score nel Quadro PM: stessa lingua e
   stesso motivo — deve sembrare il numero che era, e il colore resta quello
   della fascia perche' e' lui a dare il giudizio. Col filtro acceso il
   tratteggio diventa pieno: e' l'unico segno che quella lista viene da li'. */
.dv-scn.on { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: currentColor; }

/* SCARTI oltre il 30%: la cella va in rosso (numero e percentuale). Sulla riga
   TOTALE serve anche la versione :hover, se no `th:hover` — che è più
   specifico di una classe secca — se lo riporta al nero appena ci passi sopra. */
tr.ka-tot th.val-bad, tr.ka-tot th.val-bad:hover { color: var(--bad-text); }

/* i lead di una riga: la finestra sta larga, sono sei colonne */
.ka-bucket {
  font-family: var(--font-body, inherit); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--series-1); vertical-align: 1px;
}
.ka-lead-card { width: 900px; }
.ka-lead-card .table-scroll { max-height: 60vh; }
.ka-lead td, .ka-lead th { white-space: nowrap; }
.ka-lead td:nth-child(2), .ka-lead td:nth-child(3) { text-align: left; }
.ka-lead th:nth-child(2), .ka-lead th:nth-child(3) { text-align: left; cursor: default; }
.ka-lead a { color: var(--series-1); font-weight: 600; text-decoration: none; }
.ka-lead a:hover { text-decoration: underline; }
.ka-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--row-hover); color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

/* clic su un lead → le sue note su GHL, aperte sotto la riga.
   ⚠️ La cella va sganciata dalle regole generali della prima colonna: senza
   `position: static` resterebbe incollata a sinistra (è sticky) e senza
   `white-space: normal` le note lunghe uscirebbero dalla finestra su una riga
   sola (`.ka-lead td` è nowrap). */
.ka-lead tr.lead-click { cursor: pointer; }
.ka-lead tr.ka-lead-det:hover { background: var(--surface-1); }
.ka-lead tr.ka-lead-det > td {
  position: static; white-space: normal; text-align: left;
  padding: 2px 14px 12px 30px; font-variant-numeric: normal;
}
/* "Carico le note…" / "Nessuna nota": qui è una riga dentro una tabella, non
   una sezione vuota — i 40px di padding di .status ci lasciavano un buco */
.ka-lead tr.ka-lead-det .status { padding: 10px 0; text-align: left; }

/* ── MOBILE ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* La testata su telefono va a capo (marchio + azioni, poi la striscia delle
     sezioni): due righe di altezza variabile. Un `top` fisso per la barra
     filtri non potrebbe piu' combaciare, quindi qui la testata scorre via e
     resta appiccicata solo la barra filtri — che e' quella che dice su cosa si
     stanno guardando i numeri. Su 812px di schermo tenerle entrambe voleva dire
     regalare un quarto della pagina alla cornice. */
  header { position: static; }
  .filter-wrap { top: 0; }
  .brand { order: 1; }
  /* il sottotitolo non e' piu' decorativo: e' il NOME del marchio, e su un
     telefono sapere di chi sono i numeri conta piu' di dieci pixel di testata */
  .brand-sub { display: block; }
  /* "aggiornato alle 25/08, 14:20" e' lungo quanto due bottoni: su una riga
     sua i tre comandi restano insieme invece di lasciarne uno spaiato sotto */
  #freshness { order: 0; flex: 1 1 100%; font-size: 10.5px; }
  #btnReport, .hdr-btn { font-size: 11.5px; padding: 6px 10px; }
  /* Sul telefono la riga dei comandi e' gia' al limite e "aggiornato alle …" si
     prende una riga sua: l'eta' dei dati sparisce. Resta #freshness, che e'
     l'orologio che conta davvero (quanto sono vecchi i dati nel database, non
     da quanto sono in memoria in questa scheda). */
  #etaDati { display: none; }
  .tile .value { font-size: 22px; }
}

/* Report attività nuovi/vecchi: stacco visivo tra il blocco chiamate e il blocco appuntamenti */
#vdFunnel tr.fn-sep td,
#slFunnel tr.fn-sep td,
#chNV     tr.fn-sep td { border-top: 2px solid var(--baseline); }

/* #/sales · il pallino del gruppo dentro la pastiglia "Dov'è adesso": porta il
   colore della colonna della bacheca, così la riga della tabella e il cartellino
   in fondo alla pagina si riconoscono come la stessa cosa. */
.sl-pun { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 4px; vertical-align: 1px; }

/* Pannello Accessi: il messaggio di salvataggio, sotto i comandi della riga */
.ac-msg { font-size: 11.5px; color: var(--muted); display: block; }
/* modale "Password di …": il link torna sempre, anche quando WhatsApp l'ha
   consegnato — e' la via di fuga se il messaggio non arriva */
.ac-pw-link { display: block; width: 100%; margin: 10px 0 8px; font-size: 12px; }

/* "gia' chiamato il gg/mm": il contatto era stato lavorato PRIMA che nascesse
   questa opportunita' — non e' un lead abbandonato (rosso) ne' una risposta nei
   tempi (neutro), quindi ambra */
.lead-prec { color: var(--warn); }
.lead-prec-n { color: var(--muted); font-size: 11px; }
.lead-det-prec { margin-top: 12px; opacity: .72; }
.lead-det-tit { color: var(--muted); font-size: 12px; font-weight: 600; margin-bottom: 4px; }

/* Elenco lead · colonna Stage: dove sta l'opportunita' su GHL ADESSO. E' contesto,
   non una misura — colore secondario cosi' non compete con i numeri della riga. */
.lead-stage { color: var(--text-secondary); }

/* Elenco lead: riga cliccabile → dettaglio del lead (tab Chiamate / Note) */
#vdStlLead tr.lead-click { cursor: pointer; }
.lead-caret { color: var(--muted); font-size: 11px; }
#vdStlLead tr.lead-det:hover { background: none; }
#vdStlLead tr.lead-det > td { padding: 0 12px 14px 24px; }
.lead-det-tab { width: 100%; font-size: 13px; }
.lead-det-tab th { color: var(--muted); font-weight: 600; }
.lead-det-tab .status, .lead-note-list + .status { padding: 12px; }
.lead-tabs button {
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  border: 1px solid transparent; border-radius: 999px;
}
.lead-nota { padding: 7px 0; border-bottom: 1px solid var(--row-hover); }
.lead-nota:last-child { border-bottom: none; }
.lead-nota-meta { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.lead-nota-testo { font-size: 13px; white-space: pre-wrap; }

/* ── il funnel del dettaglio centro: NON ESISTE PIU' ───────────────────────
   Era una colonna di barre (.funnel, .f-label, .f-bar-1…5, .f-kpi) con una sua
   scala di blu (--funnel-1…5). Nessun modulo scrive piu' quelle classi: il
   funnel del centro adesso e' un disegno SVG (.dr-funnel-tela, drill.js) e
   quello di sezione una fascia di tessere (.pn-funnel). Regole e token
   cancellati insieme, come si e' fatto con .pg-head e .mia-sc. */

/* ------------------------------------------------ accessi: scoping centri */

/* Come il nome: una tendina con il bordo su ogni riga era una scatola in più
   per trenta righe. Il bordo compare quando ci passi sopra. */
select.ac-vede {
  width: 100%; max-width: 100%; font-size: 12px; padding: 5px 8px; border-radius: 8px;
  background: transparent; color: var(--text-primary); border: 1px solid transparent;
}
select.ac-vede:hover { border-color: var(--border); background: var(--surface); }
select.ac-vede:focus { border-color: var(--sv-azure); background: var(--surface); box-shadow: 0 0 0 3px var(--ring); outline: none; }

/* Il cassetto dei centri scelti a mano. ⚠️ La sua cella è l'ULTIMA della riga,
   quindi si porta dietro l'allineamento a destra della colonna dei comandi: va
   rimesso a sinistra o la casella di ricerca finisce in fondo alla pagina. */
.ac-tab tr.ac-picker-row > td { text-align: left; background: var(--surface-2); padding: 12px 18px 16px; }
.ac-picker { max-width: 1000px; }
.ac-picker-tit { font-size: 11.5px; color: var(--ink-2); margin-bottom: 8px; }
.ac-cerca {
  width: 260px; font-size: 12px; padding: 6px 10px; border-radius: 8px;
  background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-2);
  margin-bottom: 8px;
}
/* A colonne: in fila unica 550 centri sono un tunnel di 550 righe da scorrere,
   e la casella accanto al nome resta comunque larga come tutta la tabella. */
.ac-lista {
  max-height: 240px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 10px; padding: 5px; background: var(--surface);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0 8px;
  align-content: start;
}
.ac-centro {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px;
  font-size: 12.5px; cursor: pointer; min-width: 0;
}
.ac-centro > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-centro input { accent-color: var(--sv-royal); flex: none; }
.ac-centro:hover { background: var(--row-hover); }
.ac-centro.hidden { display: none; }
.ac-centro-cons { margin-left: auto; color: var(--muted); font-size: 11px; }
/* ------------------------------------------------------------ sezione Task */

.mk-head #tkNuova { margin-left: auto; }
.tk-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
/* stesso margine per i due segmentati: sono in fila, e con due margini diversi
   si vedeva che erano due cose incollate */
.tk-barra .tk-tabs, .tk-barra .tk-vista { margin: 6px 0; }
/* Dal 3/9 anche Calendario ed Esperimenti mettono i loro comandi QUI dentro,
   invece che su una riga sotto: sono tre gusci che si danno il cambio nello
   stesso posto, quindi si vestono come i due segmentati qui sopra — stesso
   margine, e via i margini automatici che avevano quando stavano da soli su una
   riga tutta loro (li' spingevano a destra, qui spaccherebbero la fila). */
.tk-barra .cal-bar, .tk-barra .ex-barra { margin: 6px 0; }
/* ⚠️ margin, non margin-left: .lead-tabs (10px 0 6px) sta PIU' IN BASSO nel
   foglio di .cal-giorni e gli vince il margine per ordine, non per peso — con
   il solo margin-left la barra restava alta 16px in piu' della Lista e
   l'interruttore delle viste si spostava di otto pixel a ogni cambio. */
.tk-barra .cal-giorni { margin: 0; }
/* La ricerca del diario: in fila con le linguette, e si stringe prima di loro
   quando lo spazio finisce. ⚠️ margin: 0 e non solo margin-left — ogni
   input[type=search] del foglio nasce con 12px di margine sotto, e in una riga
   di comandi quelli alzano la barra di 10px senza che si veda perche'. */
.tk-barra .ex-cerca { margin: 0; flex: 1 1 180px; }
/* In Esperimenti il filtro azienda non c'e' (il diario ha gia' la sua ricerca):
   la fascia si prende la riga fino in fondo, cosi' la casella si allarga invece
   di troncare il segnaposto e "+ Nuovo esperimento" finisce all'estremita'
   destra, sotto al "+ Assegna task" della testata. */
.tk-barra .ex-barra { flex: 1 1 auto; }
/* Il guscio del diario non e' una scatola in mezzo: i suoi figli sono figli
   della barra, allineati come tutto il resto. ⚠️ display:contents e .hidden
   convivono perche' .hidden e' display:none !important e vince lo stesso. */
.tk-esp-barra { display: contents; }
/* filtro azienda: all'estremità destra della barra, lontano dalle linguette —
   non è una vista sulle task, è quali task */
.tk-azienda { margin-left: auto; }
.tk-azienda .dd-btn { max-width: 240px; }
/* il menu sborda a destra dalla card: si aggancia al bordo destro del bottone */
.tk-azienda .dd-menu { left: auto; right: 0; }

/* riga task */
.tk-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: inherit; cursor: pointer; padding: 11px 12px;
  background: var(--surface-1); color: var(--text-primary);
  border: none; border-bottom: 1px solid var(--grid);
}
/* la riga non e' piu' un <button> (dentro ci vive il tasto Future): il segno del
   fuoco da tastiera va rimesso a mano */
.tk-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.tk-time {
  width: 74px; flex: none; font-size: 13px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.tk-time b { display: block; font-size: 14px; color: var(--text-primary); font-weight: 600; }
.tk-time small { font-size: 11px; color: var(--muted); }
.tk-time .tk-noora { color: var(--muted); }
.tk-body { flex: 1; min-width: 0; }
.tk-title { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.tk-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-note { font-size: 11.5px; color: var(--muted); }
.tk-min { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; width: 38px; text-align: right; flex: none; }
.tk-caret { color: var(--muted); font-size: 17px; flex: none; }
.tk-vuoto { padding: 34px; text-align: center; color: var(--muted); font-size: 13px; }

/* "Mostra altre 50" in fondo alla lista delle task. Il tasto è .mg-altre, quello
   già disegnato per "Espandi · altre 12" del Project Manager: stesso mestiere
   (il fondo di un elenco richiuso), stesso vestito, nessun bottone nuovo.
   L'unica differenza è il filetto. Nel Manager le righe sopra hanno il bordo in
   ALTO (.mg-tk), quindi il border-top del tasto continua la serie; qui le righe
   ce l'hanno in BASSO (.tk-row), e i due filetti si sommavano in una linea da due
   pixel. Il selettore parte da un id apposta: batte .mg-altre ovunque stia scritto
   nel foglio, quindi non dipende dall'ordine delle righe qui sotto. */
#tkList > .mg-altre { border-top: 0; }

/* serie richiusa: la prossima volta + il tasto "Future" con le altre.
   Il tasto sta nella riga meta, in mezzo alle chip, e prende il posto del
   marcatore ↻: fuori a destra faceva a pugni con la freccia della riga (due
   bersagli identici a due centimetri) e costava una colonna in più. */
.tk-fut {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 2px 5px 2px 7px; border-radius: 999px;
  color: var(--series-1); background: var(--row-link-hover);
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.tk-fut:hover { background: transparent; border-color: var(--series-1); }
/* aperta = contorno vuoto, chiusa = pastiglia piena: la freccia ↻ da sola,
   girata di mezzo giro, non si vede */
.tk-serie.aperta .tk-fut { background: transparent; border-color: var(--series-1); }
.tk-fut-r { font-size: 12px; line-height: 1; transition: transform 0.2s; }
.tk-serie.aperta .tk-fut-r { transform: rotate(180deg); }
.tk-fut-n {
  min-width: 16px; padding: 0 4px; border-radius: 999px; text-align: center;
  background: var(--series-1); color: #fff;
  font-size: 10px; font-variant-numeric: tabular-nums;
}
/* la riga capofila sta dentro .tk-serie: lì .tk-row:first-child si ripiglierebbe
   il bordo SUPERIORE, raddoppiando quello della riga sopra */
.tk-serie > .tk-row:first-child { border-top: none; }
#tkList > .tk-serie:first-child > .tk-row:first-child { border-top: 1px solid var(--grid); }
/* le altre volte: rientrate, su fondo alternato e sotto un filetto colorato che
   le tiene attaccate alla riga che le ha aperte */
/* il filetto è un ::before, non un box-shadow interno: il bordo inferiore di
   ogni riga ci passava sopra e lo spezzava in tanti trattini */
.tk-serie-fut { position: relative; background: var(--row-alt); }
.tk-serie-fut::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--series-1); z-index: 1;
}
.tk-serie-tit {
  padding: 8px 14px 7px 26px; font-size: 11.5px; font-weight: 500;
  color: var(--muted);
}
.tk-serie-fut .tk-row { background: transparent; padding-left: 26px; }
.tk-serie-fut .tk-row:hover { background: var(--row-hover); }
.tk-serie-fut .tk-row:last-child { border-bottom-color: var(--baseline); }

/* cattura veloce nella tab "Da schedulare" */
.tk-rapida { display: flex; gap: 8px; padding: 12px 4px; border-bottom: 1px solid var(--grid); }
.tk-rapida .cell-inp { flex: 1; }

/* chip */
.tk-chip {
  display: inline-block; font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px;
  background: var(--row-alt); color: var(--text-secondary); border: 1px solid var(--border);
}
.tk-cat.cat-operativa { background: rgba(34, 112, 216, 0.12); color: var(--series-1); border-color: rgba(34, 112, 216, 0.3); }
.tk-cat.cat-chiamata  { background: rgba(15, 159, 133, 0.14); color: var(--series-2); border-color: rgba(15, 159, 133, 0.32); }
.tk-cat.cat-controllo { background: rgba(232, 160, 29, 0.14); color: #9a6b00; border-color: rgba(232, 160, 29, 0.38); }
.tk-cat.cat-riunione  { background: rgba(201, 89, 27, 0.13); color: var(--series-3); border-color: rgba(201, 89, 27, 0.32); }
.tk-cat.cat-blocco    { background: rgba(91, 107, 128, 0.14); color: var(--cat-blocco); border-color: rgba(91, 107, 128, 0.34); }
:root[data-tema="scuro"] .tk-cat.cat-controllo { color: var(--warn); }
.tk-pers { background: var(--page); }
.tk-centro { background: transparent; color: var(--muted); }
.tk-late { background: rgba(194, 58, 58, 0.12); color: var(--bad-text); border-color: rgba(194, 58, 58, 0.35); }
.tk-stato { flex: none; }
.tk-stato.st-todo  { background: var(--page); color: var(--text-secondary); }
.tk-stato.st-doing { background: rgba(34, 112, 216, 0.14); color: var(--series-1); border-color: rgba(34, 112, 216, 0.32); }
.tk-stato.st-done  { background: rgba(12, 122, 82, 0.13); color: var(--good-text); border-color: rgba(12, 122, 82, 0.32); }
.tk-esito { flex: none; }
.tk-esito.es-ok     { background: rgba(12, 122, 82, 0.10); color: var(--good-text); border-color: rgba(12, 122, 82, 0.28); }
.tk-esito.es-review { background: rgba(232, 160, 29, 0.14); color: #9a6b00; border-color: rgba(232, 160, 29, 0.38); }
:root[data-tema="scuro"] .tk-esito.es-review { color: var(--warn); }

/* bottoni */
.tk-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px; cursor: pointer;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 999px;
  transition: background .15s, filter .15s;
}
.tk-btn:hover { background: var(--row-hover); }
.tk-btn:disabled { opacity: .55; cursor: default; }
.tk-btn-ghost { background: transparent; color: var(--text-secondary); }
.tk-azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tk-msg { font-size: 12px; color: var(--muted); }
/* la bozza della task nuova (task.js): la riga sotto il sottotitolo del form,
   e la pastiglia su "+ Assegna task" quando ce n'è una chiusa in attesa */
.tk-bozza {
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
  margin: -4px 0 14px; padding: 8px 12px; border-radius: 10px;
  font-size: 12.5px; color: var(--ink-2);
  background: var(--row-link-hover); border: 1px solid var(--border);
}
.tk-bozza-via {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 0; border: none; background: none; color: var(--series-1);
  text-decoration: underline; text-underline-offset: 2px;
}
.tk-bozza-via:hover { color: var(--ink); }
/* bianco traslucido su fondo pieno: regge sia il gradiente sia il brand pieno */
.tk-bozza-pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.28); color: #fff; vertical-align: 1px;
}

/* pannello di dettaglio */
.tk-scrim.open { display: block; }
.tk-panel.open { transform: none; }
.tk-panel-head h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 10px; padding-right: 26px; }
.tk-x {
  position: absolute; top: 14px; right: 14px;
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  background: none; border: none; color: var(--muted); padding: 5px 8px; border-radius: 999px;
}
.tk-x:hover { color: var(--text-primary); background: var(--row-hover); }
.tk-kick {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.tk-panel-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-centro-link { cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; }
.tk-centro-link:hover { color: var(--series-1); border-color: var(--series-1); }
.tk-panel-body { padding: 6px 22px 26px; }
.tk-sez { padding: 14px 0; border-bottom: 1px solid var(--grid); }
.tk-sez:last-child { border-bottom: none; }
.tk-lab {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.tk-seg button {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 13px; cursor: pointer;
  background: var(--page); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px;
}
.tk-dett { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; padding: 4px 0; }
.tk-dett span:first-child { color: var(--muted); }
.tk-dett span:last-child { text-align: right; }
.tk-descr {
  font-size: 12.5px; color: var(--text-secondary); white-space: pre-wrap; line-height: 1.5;
  background: var(--row-alt); border-radius: 8px; padding: 9px 11px; margin-top: 8px;
}
.tk-note-list { max-height: 240px; overflow-y: auto; margin-bottom: 8px; }
.tk-nota { padding: 7px 0; border-bottom: 1px solid var(--row-hover); }
.tk-nota:last-child { border-bottom: none; }
.tk-nota-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.tk-nota-testo { font-size: 13px; white-space: pre-wrap; }
.tk-note-vuote { font-size: 12px; color: var(--muted); padding: 6px 0; }
.tk-panel textarea, .tk-form-card textarea {
  width: 100%; font: inherit; font-size: 13px; padding: 9px 11px; resize: vertical;
  background: var(--page); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
}

/* ── "L'esperimento e' finito": il riquadro in cima al pannello (migration 165)
   Sta PRIMA di Stato ed Esito perche' e' il motivo per cui quella task esiste:
   o si scrive com'e' andata, o si posticipa dicendo perche'. Sfondo d'attesa
   (--warn, come il badge "Da concludere" del diario) e niente riga di chiusura:
   non e' una sezione come le altre, e' una domanda a cui rispondere. */
/* ── «Mandala in revisione», nel pannello della task (3/9) ─────────────────
   Stessa forma del riquadro dell'esito esperimento — un blocco col filetto a
   sinistra, sopra Stato — ma neutro: qui non c'e' niente in ritardo, c'e' una
   scelta su come chiudere. L'ambra sarebbe un allarme che non esiste. */
.tk-rev {
  background: var(--row-alt); border-left: 3px solid var(--border-2);
  border-radius: 10px; padding: 12px 14px; margin-top: 10px; border-bottom: none;
}
.tk-rev .tk-lab { color: var(--muted); }
.tk-rev-p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 10px; }

.tk-espfine {
  background: var(--warn-bg); border-left: 3px solid var(--warn-fg);
  border-radius: 10px; padding: 12px 14px; margin-top: 10px;
  border-bottom: none;
}
.tk-espfine .tk-lab { color: var(--warn-fg); }
/* Aperta prima della scadenza non e' un'urgenza: stessa forma, colori neutri.
   L'arancione dell'attesa si accende quando l'esito e' davvero in ritardo. */
.tk-espfine-corso { background: var(--row-alt); border-left-color: var(--border); }
.tk-espfine-corso .tk-lab { color: var(--muted); }
.tk-espfine-q { font-size: 13.5px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.tk-espfine-q small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.tk-espfine-no { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.tk-espfine-scelta { margin-bottom: 10px; }
/* Verde e rosso invece del gradiente del marchio: qui la scelta E' la risposta,
   e va riconosciuta senza rileggere l'etichetta. Vincono su .tk-seg button.sel
   per specificita' (tre classi contro due), non per ordine nel foglio. */
.tk-espfine-scelta button:first-child.sel {
  background: var(--good-bg); border-color: var(--good); color: var(--good);
}
.tk-espfine-scelta button:last-child.sel {
  background: var(--bad-bg); border-color: var(--bad); color: var(--bad);
}
.tk-espfine-post {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 9px;
}

/* form crea / modifica */
.tk-form-card { width: 560px; }
.tk-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
/* ⚠️ min-width: 0 — senza, ogni casella della griglia si dimensiona sul proprio
   contenuto minimo: la fila "Si ripete" (largh. max-content) allargava la colonna
   a 441px dentro una finestra da 375, e sul telefono meta' form finiva fuori
   schermo. Serve anche al bottone "Assegna a", che con i nomi lunghi deve
   ritagliare con i puntini invece di allargare il form. */
.tk-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.tk-campo-hint { font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: normal; }
/* cosa succede a chi aggiungi o togli: da quando ogni persona ha la sua riga
   (migration 110) selezionare due nomi non e' piu' "una task condivisa" */
.tk-persone-nota {
  display: block; margin-top: 6px; font-size: 11.5px; font-weight: 500; line-height: 1.45;
  color: var(--muted); text-transform: none; letter-spacing: normal;
}
.tk-campo.tk-largo { grid-column: 1 / -1; }
.tk-campo input, .tk-campo select {
  font: inherit; font-size: 13px; font-weight: 500; padding: 8px 11px;
  background: var(--page); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
}

/* "Assegna a": la tendina a spunte al posto della griglia di bottoni (una fila
   per ogni nome del team, che spingeva data e ora sotto il bordo della finestra).
   Riusa la .dd delle campagne in Sauron, larga quanto il campo invece che
   dimensionata sul suo testo: sta in colonna con gli altri campi del form. */
.tk-dd-pers { display: block; }
.tk-dd-pers .dd-btn {
  width: 100%; max-width: 100%; justify-content: space-between; font-weight: 500; padding: 8px 11px;
}
.tk-dd-pers .dd-menu { width: 100%; min-width: 0; max-width: 100%; }
.dd-cerca input {
  width: 100%; font: inherit; font-size: 13px; font-weight: 500; padding: 7px 10px;
  background: var(--page); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 9px;
}
.dd-cerca input:focus { outline: none; border-color: var(--sv-azure); box-shadow: 0 0 0 3px var(--ring); }
.dd-item.on .dd-nome { color: var(--series-1); font-weight: 600; }
.dd-vuota { padding: 10px; font-size: 12.5px; color: var(--muted); }
.tk-azioni-form { justify-content: flex-end; margin-top: 16px; }
.tk-azioni-form .tk-msg { margin-right: auto; }

/* ricorrenza: il segno ↻ nella lista/calendario e il blocco "Si ripete" del form */
.tk-ric-mark { font-size: 12px; line-height: 1; color: var(--muted); }
.cal-ev-ric { font-size: 10px; opacity: 0.75; margin-left: 3px; }
.tk-ric-chip { background: var(--page); color: var(--text-secondary); }
/* La task che fa parte di un esperimento (migration 132, aggancio dalla 157).
   Viola: nella riga e' l'unica tinta che non sia gia' presa dalla categoria,
   dallo stato o dall'esito, e accanto al nome del centro deve leggersi come
   una cosa diversa. Il titolo di un esperimento puo' essere lungo: si taglia
   con i puntini invece di spingere fuori riga stato ed esito. */
.tk-esp {
  max-width: 24ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  background: rgba(122, 92, 158, 0.13); color: #5f4383; border-color: rgba(122, 92, 158, 0.34);
}
:root[data-tema="scuro"] .tk-esp {
  background: rgba(168, 142, 204, 0.18); color: #c6b2e2; border-color: rgba(168, 142, 204, 0.36);
}
.tk-ric { gap: 8px; }
.tk-ric .tk-seg button:disabled { opacity: 0.45; cursor: default; }
.tk-ric-dett {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px 12px; border-radius: 10px;
  background: var(--row-alt); border: 1px solid var(--border);
}
.tk-ric-riga {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
}
.tk-ric-riga input[type="number"] { width: 74px; }
.tk-ric-riga input, .tk-ric-riga select {
  font: inherit; font-size: 13px; font-weight: 500; padding: 6px 9px;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 9px;
}
.tk-ric-gg { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-ric-gg .tm-chip { min-width: 44px; justify-content: center; text-align: center; }
/* il giorno della data scelta: acceso e non togliibile, la ripetizione lo comprende sempre */
.tk-ric-gg .tm-chip.fisso { cursor: default; box-shadow: inset 0 0 0 1px var(--series-1); }
.tk-ric-riass { font-size: 12px; font-weight: 600; color: var(--series-1); }
.tk-ric-nota { font-size: 11.5px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: normal; }

/* modalino "solo questa / le successive / tutta la serie" */
.tk-scelta-card { width: 460px; }
.tk-scelta {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  margin-top: 8px; padding: 11px 13px; border-radius: 11px;
  background: var(--page); color: var(--text-primary); border: 1px solid var(--border);
}
.tk-scelta:hover { background: var(--row-hover); border-color: var(--series-1); }
.tk-scelta-danger:hover { border-color: rgba(194, 58, 58, 0.55); }
.tk-scelta-t { display: block; font-size: 13.5px; font-weight: 600; }
.tk-scelta-d { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------ calendario (vista Settimana) */

.cal-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.cal-nav {
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 5px 12px;
  background: var(--surface-1); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px;
}
.cal-nav:hover { background: var(--row-hover); color: var(--text-primary); }
.cal-giorni { margin: 0 0 0 auto; }

/* pannello "Calendari": una spunta colorata per persona (sostituisce la tendina) */
.tk-wrap { display: flex; align-items: flex-start; gap: 16px; }
.tk-wrap > #tkList { flex: 1; min-width: 0; }
.cal-rail {
  width: 208px; flex: none; padding: 10px 8px 12px;
  background: var(--row-alt); border: 1px solid var(--border); border-radius: 12px;
}
.rail-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 2px 8px 8px;
}
.rail-tutti {
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: none;
  margin-left: auto; padding: 2px 8px; cursor: pointer;
  background: transparent; color: var(--series-1);
  border: 1px solid var(--border); border-radius: 999px;
}
.rail-tutti:hover { background: var(--row-hover); }
.rail-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 5px 8px; border-radius: 8px;
  background: transparent; color: var(--text-secondary); border: none;
}
.rail-item:hover { background: var(--row-hover); }
.rail-item.on { color: var(--text-primary); font-weight: 600; }
.rail-box {
  width: 17px; height: 17px; flex: none; border-radius: 5px;
  border: 2px solid var(--baseline); display: grid; place-items: center;
}
.rail-box svg { width: 10px; height: 10px; }
.rail-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-nm small { color: var(--muted); font-weight: 500; }
/* la riga del pannello: la spunta + la puntina del "tieni in alto"
   (ms_task_pin, migration 111). La puntina e' un <button> a se': dentro
   .rail-item, che e' gia' un button, sarebbe HTML non valido. */
.rail-riga { display: flex; align-items: center; width: 100%; }
.rail-riga > .rail-item { flex: 1; min-width: 0; }
/* dove finiscono i calendari messi in alto e cominciano gli altri */
.rail-stacco { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.rail-pin {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  padding: 0; margin-right: 2px; cursor: pointer; border: none; border-radius: 7px;
  background: transparent; color: var(--muted); opacity: 0;
}
.rail-pin svg { width: 13px; height: 13px; }
/* col mouse compare passando sopra; se e' messa, si vede sempre */
.rail-riga:hover .rail-pin, .rail-pin.on, .rail-pin:focus-visible { opacity: 1; }
.rail-pin.on { color: var(--series-1); }
.rail-pin:hover { background: var(--row-hover); color: var(--text-primary); }

.cal { border: 1px solid var(--grid); border-radius: 12px; overflow: auto; }
.cal-head { display: grid; grid-template-columns: 56px repeat(7, minmax(128px, 1fr)); border-bottom: 1px solid var(--grid); }
.cal-gutter-head {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; justify-content: flex-end; padding: 0 7px;
}
.cal-giorno {
  padding: 7px 4px; width: 100%; text-align: center; border-left: 1px solid var(--grid);
  border-top: none; border-right: none; border-bottom: none; background: transparent;
  font: inherit; cursor: pointer;
}
.cal-giorno:hover { background: var(--row-hover); }
.cal-gg { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cal-dd { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-giorno.oggi { background: var(--row-hover); }
.cal-giorno.oggi .cal-dd { color: var(--series-1); }
/* ⚠️ La fascia "senza ora" NON deve poter spingere la griglia oraria fuori dallo
   schermo: quante task senza orario ci siano quel giorno non lo decide nessuno
   (il generatore del Delivery ne ha fatte quindici il 30/08). Il tetto lo mette
   disegnaSettimana — poche righe per giorno e un "+N altre" — e qui c'e' solo
   il fermo di sicurezza per quando la fascia e' APERTA: meta' schermo, poi
   scorre per conto suo. Lo scroll sta sulla RIGA e non sulle celle, o si
   ritroverebbero sette barre di scorrimento affiancate. */
.cal-head-nohour { border-bottom: 2px solid var(--grid); }
.cal-head-nohour.aperta { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
/* ⚠️ align-self: start — la cella del margine e' alta quanto TUTTA la fascia
   aperta, e con l'altezza piena `sticky` non ha niente da attaccare: la scritta
   restava a meta' banda (centrata in 767px) invece che in cima. Ridotta al suo
   contenuto, si incolla al bordo e il chevron per richiudere resta raggiungibile
   anche dopo aver scorso. */
.cal-head-nohour.aperta .cal-gutter-head {
  position: sticky; top: 0; z-index: 2; align-self: start;
  background: var(--surface-1); padding-top: 5px; padding-bottom: 5px;
}
.cal-gh-nohour { flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; }
.cal-espandi {
  font: inherit; font-size: 11px; line-height: 1; cursor: pointer;
  background: none; border: none; color: var(--series-1); padding: 1px 2px;
}
.cal-espandi:hover { color: var(--text-primary); }
/* "+N altre" della fascia: stesso vestito del "+N altre" delle corsie (neutro,
   tratteggiato, non e' una tipologia) ma in colonna, non posizionato */
.cal-piu {
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; text-align: left;
  background: var(--row-alt); color: var(--text-secondary);
  border: 1.5px dashed var(--baseline); border-radius: 8px; padding: 4px 8px;
}
.cal-piu:hover { color: var(--text-primary); border-color: var(--series-1); }
.cal-nohour {
  border-left: 1px solid var(--grid); padding: 3px; min-height: 26px;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-body { display: grid; grid-template-columns: 56px 1fr; }
.cal-gutter { display: flex; flex-direction: column; }
.cal-ora {
  font-size: 10.5px; color: var(--muted); text-align: right; padding-right: 7px;
  font-variant-numeric: tabular-nums; transform: translateY(-6px);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); }
.cal-col { position: relative; border-left: 1px solid var(--grid); }
.cal-col.oggi { background: rgba(34, 112, 216, 0.04); }
.cal-slot { display: block; width: 100%; padding: 0; cursor: pointer; background: transparent; border: none; border-bottom: 1px solid var(--grid); }
.cal-slot:hover { background: var(--row-link-hover); }
.cal-ev {
  position: absolute; overflow: hidden; cursor: grab; text-align: left; touch-action: none;
  font: inherit; font-size: 11.5px; line-height: 1.3; color: #fff;
  border: 2px solid var(--surface-1); border-radius: 8px; padding: 5px 8px 8px;
  box-shadow: 0 1px 3px rgba(6, 24, 64, 0.25);
}
.cal-ev.nohour, .cal-ev.cal-overflow { cursor: pointer; }
.cal-ev.cal-ev-drag { cursor: grabbing; opacity: 0.88; box-shadow: 0 8px 20px rgba(6, 24, 64, 0.4); }
body.cal-dragging, body.cal-dragging * { cursor: grabbing !important; user-select: none !important; }
/* maniglie di ridimensionamento: hitbox invisibile a bordo blocco, una barretta
   compare solo al passaggio del mouse (poco spazio, non serve ingombrare) */
.cal-ev-handle { position: absolute; left: 8px; right: 8px; height: 9px; cursor: ns-resize; touch-action: none; }
.cal-ev-handle-top { top: -4px; }
.cal-ev-handle-bottom { bottom: -4px; }
.cal-ev-handle::before {
  content: ''; position: absolute; left: 32%; right: 32%; height: 2.5px; border-radius: 2px;
  background: rgba(255, 255, 255, 0); transition: background 0.15s;
}
.cal-ev-handle-top::before { top: 4px; }
.cal-ev-handle-bottom::before { bottom: 4px; }
.cal-ev:hover .cal-ev-handle::before { background: rgba(255, 255, 255, 0.65); }
/* il bordo colore-superficie apre un "gutter" fra eventi sovrapposti (percentuali
   adiacenti, non calcolabile in px): niente più blocchi che si toccano */
.cal-ev.cat-operativa { background: var(--cat-operativa); }
.cal-ev.cat-chiamata  { background: var(--cat-chiamata); }
.cal-ev.cat-controllo { background: var(--cat-controllo); }
.cal-ev.cat-riunione  { background: var(--cat-riunione); }
.cal-ev.cat-blocco    { background: var(--cat-blocco); }
.cal-ev:hover { filter: brightness(1.12); }
.cal-ev.nohour { position: relative; width: 100%; margin-bottom: 3px; }
.cal-ev.fatta { opacity: 0.55; }
.cal-ev.corta { padding: 3px 8px; font-size: 10.5px; border-width: 1.5px; }
.cal-ev.corta .cal-ev-s { display: none; }
.cal-ev.corta .cal-ev-users { display: none; }
.cal-ev.stretta { padding: 4px 5px; font-size: 10.5px; border-width: 1.5px; }
.cal-ev.stretta .cal-ev-s { display: none; }
.cal-ev.fatta .cal-ev-t { text-decoration: line-through; }
.cal-ev-t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-s { display: block; font-size: 10px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* striscia identificativa degli assegnatari: solo con più calendari
   sovrapposti (vedi selezione.size in task.js) — il colore blocco resta la
   tipologia. Un segmento per persona: con più assegnatari si vede subito
   chi c'è dietro senza aprire il dettaglio. */
.cal-ev-users {
  position: absolute; left: 4px; right: 4px; bottom: 3px; height: 4px;
  display: flex; gap: 2px;
}
.cal-ev-user { flex: 1; min-width: 3px; border-radius: 999px; }

/* chip "+N altre": oltre la soglia di sovrapposizione, invece di stringere
   all'infinito si raggruppano le ultime in un blocco neutro — non è una
   tipologia, quindi niente colore di categoria — che apre la vista Giorno */
.cal-ev.cal-overflow {
  background: var(--row-alt); color: var(--text-secondary);
  border: 1.5px dashed var(--baseline);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; text-align: center;
}
.cal-ev.cal-overflow:hover { background: var(--row-hover); color: var(--text-primary); }

/* ------------------------------------------------------- Google Calendar */
/* Evento importato: si legge, non si tocca (niente drag, niente pannello).
   La barretta a sinistra è l'unico segno di identità — il resto è neutro
   apposta, per non competere con i colori delle tipologie task. */
.cal-ev.cal-gcal {
  background: var(--gcal-fill); color: var(--text-secondary);
  box-shadow: inset 3px 0 0 var(--gcal-edge); cursor: default; padding-left: 11px;
}
.cal-ev.cal-gcal:hover { filter: none; }
.cal-ev.cal-gcal .cal-ev-t b { color: var(--text-primary); }
.cal-ev.cal-gcal.corta, .cal-ev.cal-gcal.stretta { padding-left: 8px; }

.rail-h-2 { padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); }
.rail-box-g { border-color: var(--gcal-edge); }
/* agende riservate: la casella non ha il colore di una persona, perché non c'è
   un calendario dietro — c'è solo "occupato" */
.rail-box-ris { border-color: var(--muted); }

/* Slot cieco: a quell'ora è occupato, e non si sa da cosa. Niente colore di
   tipologia (non la conosciamo), niente cursore da cliccare: non è una task.
   Le righine diagonali dicono "zona presa" senza inventare una categoria. */
.cal-ev.cal-occupato {
  background: repeating-linear-gradient(-45deg,
    var(--row-alt) 0 7px, var(--grid) 7px 14px);
  color: var(--text-secondary); cursor: default;
  border: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--muted); padding-left: 11px;
}
.cal-ev.cal-occupato:hover { filter: none; }
.cal-ev.cal-occupato .cal-ev-t b { color: var(--text-primary); }
.cal-ev.cal-occupato.corta, .cal-ev.cal-occupato.stretta { padding-left: 8px; }
.rail-gestisci, .rail-collega {
  font: inherit; font-size: 11.5px; cursor: pointer; text-align: left;
  padding: 4px 8px; margin-top: 2px; background: transparent;
  color: var(--series-1); border: none; border-radius: 8px; width: 100%;
}
.rail-gestisci:hover, .rail-collega:hover { background: var(--row-hover); }
.rail-collega { font-weight: 600; }
/* perché gli eventi di Google non si vedono, quando il filtro azienda è acceso.
   La spunta resta come l'hai messa — è una tua preferenza e non si tocca — ma
   la riga si smorza: una casella accesa sopra una griglia senza quegli eventi
   si legge come un guasto. */
.rail-nota { padding: 2px 8px 0; font-size: 11px; line-height: 1.45; color: var(--muted); }
.rail-item.rail-spenta { opacity: 0.55; }

.gc-feed { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin-bottom: 10px; background: var(--row-alt); }
.gc-feed-top { display: flex; align-items: center; gap: 10px; }
.gc-feed-nm { font-weight: 600; font-size: 13.5px; flex: 1; }
.gc-mini { padding: 3px 10px; font-size: 11.5px; }
.gc-feed-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.gc-errore {
  font-size: 12px; color: var(--bad-text); margin-top: 7px;
  background: rgba(194, 58, 58, 0.08); border-radius: 8px; padding: 6px 9px;
}
.gc-check { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; cursor: pointer; font-size: 12.5px; }
.gc-check input { margin-top: 2px; flex: none; }
.gc-check small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.gc-come { margin-top: 4px; }
.gc-come > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--series-1); padding: 4px 0; }
.gc-passi { margin: 8px 0 0 18px; padding: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.65; }
.gc-passi code { font-size: 11.5px; background: var(--row-hover); padding: 1px 5px; border-radius: 5px; }
.gc-nota { font-size: 11.5px; color: var(--muted); margin: 9px 0 0; line-height: 1.5; }
.gc-aggiungi { margin-top: 11px; }

@media (max-width: 820px) {
  /* su schermo stretto i calendari diventano una riga di spunte sopra la lista */
  /* ⚠️ align-items: stretch NON e' decorativo. .tk-wrap nasce con flex-start,
     che sull'asse trasversale vale "larghezza a contenuto": girata in colonna,
     l'asse trasversale e' l'ORIZZONTALE, e #tkList si allargava quanto la
     griglia del calendario (954px a 7 giorni). L'overflow:auto di .cal non
     entrava mai in gioco — non c'era niente da stringere — e a scorrere in
     orizzontale era l'intera PAGINA: header, filtri e card trascinati fuori
     schermo insieme al calendario. */
  .tk-wrap { flex-direction: column; align-items: stretch; }
  .cal-rail { width: 100%; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
  .rail-h { width: 100%; padding-bottom: 4px; }
  .rail-item { width: auto; }
  /* in riga il pannello non ha piu' un "sopra" e un "sotto": la linea di
     stacco fra i calendari in alto e gli altri qui non vuol dire niente */
  .rail-riga { width: auto; }
  .rail-stacco { margin-top: 0; padding-top: 0; border-top: none; }
}
@media (max-width: 640px) {
  .tk-time { width: 58px; }
  .tk-min, .tk-caret { display: none; }
  .tk-campi { grid-template-columns: 1fr; }
}

/* ── SAURON (ex Finance): tabelle statiche (P&L, rinnovi, andamento) e supporto ── */
.fn-pnl th { cursor: default; }
.fn-pnl tr.fn-head td {
  padding-top: 17px; border-bottom: none; font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.fn-pnl tr.fn-tot td { font-weight: 700; border-top: 1px solid var(--baseline); }
.fn-pnl td.fn-quota { color: var(--muted); }
/* capienza per persona, modificabile dentro le tabelle Delivery */
/* ⚠️ Qui c'erano tre nomi di un'altra nomenclatura, mai definiti in questo
   foglio: --text (senza ripiego, quindi la dichiarazione era invalida e il
   colore lo ereditava dalla cella), --card-bg e --accent (col ripiego, quindi
   a decidere era sempre il ripiego). Ora sono i token di casa, e il tema scuro
   smette di prendersi il blu chiaro scritto a mano. */
.cap-inp {
  width: 66px; padding: 3px 6px; font: inherit; font-size: 13px; text-align: right;
  color: var(--ink); background: transparent;
  border: 1px solid var(--grid); border-radius: 7px;
}
.cap-inp:focus { outline: none; border-color: var(--series-1); }
/* "Nascondi": toglie una persona dal conteggio di un ruolo. Discreto — si nota
   solo quando lo cerchi, perché è un'azione rara e non un'azione di riga. */
.esc-btn {
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 9px; cursor: pointer;
  color: var(--muted); background: transparent;
  border: 1px solid var(--grid); border-radius: 999px; white-space: nowrap;
}
.esc-btn:hover { color: var(--text-primary); border-color: var(--muted); }
.esc-btn.attivo { color: var(--series-1); border-color: var(--series-1); }
.fn-rank { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.fn-rank-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.fn-export-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--grid);
}
.fn-export-row:last-child { border-bottom: none; }
.fn-export-row > div { margin-right: auto; }
.fn-note { margin: 4px 0 0 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.fn-note li { margin-bottom: 7px; }

/* ── Assistente AI: bolla flottante presente in ogni sezione ──────────────── */
#asHost { position: fixed; right: 22px; bottom: 22px; z-index: 60; }

#asBolla {
  width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand-grad); padding: 0; overflow: hidden;
  box-shadow: 0 6px 18px -4px rgba(16, 42, 84, .45), 0 2px 6px rgba(16, 42, 84, .2);
  display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
#asBolla:hover { transform: translateY(-2px) scale(1.04); }
#asBolla.attivo { transform: scale(.92); }
.as-bolla-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
span.as-fallback {
  display: grid; place-items: center; background: var(--brand-grad); color: #fff;
  font-weight: 700; font-size: 12px; letter-spacing: .5px; border-radius: 50%;
}
#asBolla span.as-fallback { width: 100%; height: 100%; font-size: 17px; }

#asPannello {
  position: absolute; right: 0; bottom: 76px; width: 420px; max-width: calc(100vw - 32px);
  height: 620px; max-height: calc(100vh - 130px);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-card), 0 24px 60px -28px rgba(16, 42, 84, .5);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
#asPannello.aperto { opacity: 1; visibility: visible; transform: none; }

.as-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--border); background: var(--page);
  flex-wrap: nowrap;   /* con 3 bottoni la testata andava a capo e la X finiva sotto */
}
/* min-width:0 e' quello che permette al testo di comprimersi invece di
   spingere fuori i bottoni: senza, un flex item non scende sotto il contenuto */
.as-head-txt { display: flex; flex-direction: column; margin-right: auto; line-height: 1.25; min-width: 0; }
.as-head-txt strong { font-size: 14px; color: var(--text-primary); }
.as-head-txt span {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.as-head button {
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-secondary); font-size: 11.5px; padding: 5px 8px; cursor: pointer;
  flex: 0 0 auto; white-space: nowrap;
}
.as-head button:hover { background: var(--row-hover); color: var(--text-primary); }
#asChiudi { border: none; font-size: 14px; padding: 5px 7px; }

.as-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: 0 0 auto; }
span.as-avatar { font-size: 10px; }
.as-avatar-big { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; margin-bottom: 4px; }
span.as-avatar-big { font-size: 20px; }

.as-msg { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.as-riga { display: flex; gap: 9px; align-items: flex-start; }
.as-riga.as-io { justify-content: flex-end; }
.as-bolla {
  max-width: 84%; padding: 10px 13px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.55; color: var(--text-primary);
  overflow-wrap: anywhere;
}
.as-io .as-bolla { background: var(--brand-grad); color: #fff; border-bottom-right-radius: 5px; }
.as-lui .as-bolla { background: var(--page); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.as-testo p { margin: 0 0 8px; }
.as-testo p:last-child { margin-bottom: 0; }
.as-testo p.as-tit { font-weight: 700; margin-top: 4px; }
.as-testo ul { margin: 4px 0 8px; padding-left: 18px; }
.as-testo li { margin-bottom: 5px; }
.as-testo code {
  background: var(--row-hover); border-radius: 5px; padding: 1px 5px;
  font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.as-cod {
  display: inline-block; background: var(--brand-grad); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
}
.as-fonti {
  margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
}

/* Riquadri di conferma: l'assistente PROPONE la modifica, l'utente la esegue.
   Il riepilogo prima → dopo è la cosa che si legge davvero prima di cliccare,
   quindi sta in tabellare (le date e le ore incolonnate si confrontano a colpo
   d'occhio) e non nel corpo del testo. */
.as-azioni { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.as-az {
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--page); padding: 10px 11px;
}
.as-az-rossa { border-color: var(--bad-text); }
.as-az-tipo {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.as-az-rossa .as-az-tipo { color: var(--bad-text); }
.as-az-titolo { font-size: 13px; font-weight: 600; line-height: 1.35; }
.as-az-diff {
  margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.as-az-btn { display: flex; gap: 7px; margin-top: 10px; }
.as-az-btn button {
  flex: 1; border-radius: 9px; padding: 7px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); font-family: inherit;
}
.as-az-ok { background: var(--brand-grad); color: #fff; border-color: transparent; }
.as-az-rossa .as-az-ok { background: var(--bad-text); }
.as-az-no { background: var(--surface-1); color: var(--text-secondary); }
.as-az-btn button:disabled { opacity: .55; cursor: default; }
.as-az-esito { margin-top: 9px; font-size: 11.5px; font-weight: 600; }

.as-attesa span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: asPulse 1.1s infinite ease-in-out;
}
.as-attesa span:nth-child(2) { animation-delay: .16s; }
.as-attesa span:nth-child(3) { animation-delay: .32s; }
@keyframes asPulse { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

/* Riga di avanzamento mentre l'assistente lavora ("Interrogo v_calls").
   Dentro .as-attesa e' un figlio flex: flex-basis 100% + wrap sul genitore,
   altrimenti i tre puntini gli si mettono di fianco invece che sotto. */
.as-attesa { display: flex; gap: 5px; align-items: center; padding: 14px 15px; flex-wrap: wrap; }
.as-passo {
  flex-basis: 100%; width: 100%;
  font-size: 11.5px; line-height: 1.45; font-style: italic; color: var(--muted);
}
.as-testo > .as-passo { margin-bottom: 7px; }

.as-vuoto { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; }
.as-vuoto p { font-size: 13px; color: var(--text-secondary); max-width: 30ch; margin: 0; line-height: 1.55; }
.as-spunti { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 4px; }
.as-spunti button {
  background: var(--page); border: 1px solid var(--border); border-radius: 11px;
  color: var(--text-secondary); font-size: 12.5px; padding: 9px 12px;
  cursor: pointer; text-align: left; line-height: 1.4;
}
.as-spunti button:hover { background: var(--row-hover); color: var(--text-primary); }

.as-foot { display: flex; gap: 8px; align-items: flex-end; padding: 11px 12px; border-top: 1px solid var(--border); background: var(--page); }
#asInput {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-1); color: var(--text-primary);
  padding: 9px 11px; font: inherit; font-size: 13.5px; line-height: 1.45;
  max-height: 130px; overflow-y: auto;
}
#asInput:focus { outline: none; border-color: var(--muted); }
#asInvia {
  width: 36px; height: 36px; flex: 0 0 auto; border: none; border-radius: 50%;
  background: var(--brand-grad); color: #fff; font-size: 17px; cursor: pointer;
}
#asInvia:disabled { opacity: .45; cursor: default; }

@media (max-width: 640px) {
  #asBolla { width: 54px; height: 54px; }
}

/* La bolla vive fuori da #shell (è appesa al body): senza questa regola
   resterebbe a schermo anche sulla pagina di login. */
#shell.hidden ~ #asHost { display: none; }

/* Storico conversazioni dentro il pannello dell'assistente */
.as-lista { display: flex; flex-direction: column; gap: 4px; }
.as-voce { display: flex; align-items: stretch; gap: 4px; border-radius: 10px; }
.as-voce:hover { background: var(--row-hover); }
.as-voce.corrente { background: var(--row-hover); box-shadow: inset 2px 0 0 var(--series-2, #0f9f85); }
.as-voce-apri {
  flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 9px 6px 9px 11px; color: var(--text-primary); font: inherit; font-size: 13px;
}
.as-voce-tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-voce-data { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.as-voce-del {
  flex: 0 0 auto; background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 12px; padding: 0 10px; border-radius: 10px;
}
.as-voce-del:hover { color: var(--text-primary); background: var(--border); }
.as-voce-del:disabled { opacity: .4; cursor: default; }
#asStorico.attivo { background: var(--brand-grad); color: #fff; border-color: transparent; }

/* ── REPORT GIORNALIERO ─────────────────────────────────────────────────────
   Da appendere in fondo a css/app.css. Usa i token gia' definiti in :root e le
   classi comuni (.modal-*, .tk-btn, .tk-chip, .tk-campo, .table-scroll). */

.rp-card { width: 480px; }
#rpCorpo .tk-campo { margin-bottom: 9px; }
#rpCorpo .tk-campo textarea, #rpCorpo .tk-campo select {
  font: inherit; font-size: 13px; padding: 8px 11px; width: 100%; resize: vertical;
  background: var(--page); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
}

/* blocchi numerati del form */
.rp-blocco { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--grid); }
.rp-blocco:first-child { padding-top: 4px; margin-top: 0; border-top: none; }
.rp-blocco-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.rp-n { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rp-t { font-size: 13px; font-weight: 600; }

/* Sì / No, e Svolta / No sulle task */
.tk-seg label { font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  cursor: pointer; user-select: none; }
.tk-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tk-seg label:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 1px; }
.rp-task-sw label.rp-si:has(input:checked) { background: rgba(12, 122, 82, .13); color: var(--good-text); border-color: rgba(12, 122, 82, .32); }
.rp-task-sw label.rp-no:has(input:checked) { background: rgba(232, 160, 29, .14); color: #9a6b00; border-color: rgba(232, 160, 29, .38); }
:root[data-tema="scuro"] .rp-task-sw label.rp-no:has(input:checked) { color: var(--warn); }

.rp-reveal { display: none; }
.rp-reveal.on { display: block; }

.rp-prob { border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px;
  background: var(--row-alt); margin-bottom: 8px; }
.rp-prob-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rp-prob-n { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rp-prob .rp-rm { font-size: 11.5px; padding: 4px 10px; }
.rp-prob .tk-campo:last-child { margin-bottom: 0; }
.rp-add { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--series-1);
  background: transparent; border: 1px dashed var(--border); border-radius: 999px;
  width: 100%; padding: 8px; cursor: pointer; }
.rp-add:hover { background: var(--row-hover); }

.rp-task { border: 1px solid var(--border); border-radius: 12px; background: var(--row-alt);
  padding: 10px 12px; margin-bottom: 8px; }
.rp-task-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.rp-task-info { flex: 1; min-width: 150px; }
.rp-task-t { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.rp-task-m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.rp-why { display: none; margin-top: 9px; }
.rp-why.on { display: block; }

/* la domanda del venerdì sulle agende (migration 187): una riga per azienda,
   riusa .rp-task — qui serve solo la domanda in testa, che è il testo che
   decide la risposta e non deve leggersi come una nota di servizio */
.rp-agende-d { font-size: 13px; font-weight: 600; margin: 0 0 10px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--series-1); background: var(--row-alt); border: 1px solid var(--border); }
.rp-agenda .rp-task-info { display: flex; align-items: center; min-height: 26px; }
.rp-agenda .rp-task-t { margin-bottom: 0; }
.rp-vuoto { font-size: 12.5px; color: var(--muted); background: var(--page);
  border: 1px dashed var(--border); border-radius: 12px; padding: 14px; text-align: center; }
.rp-errore { color: var(--bad-text); font-weight: 600; }

/* conferma dell'invio: il form resta sotto, a vista ma non toccabile — chi
   conferma deve poter rileggere quello che ha appena scritto */
#rpCorpo.rp-freeze .rp-blocco { opacity: .45; pointer-events: none; }
.rp-conferma { margin-top: 14px; padding: 13px 14px 4px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--row-alt); }
.rp-conf-h { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.rp-conf-d { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.rp-conf-l { list-style: none; margin: 10px 0 0; padding: 0; }
.rp-conf-l li { font-size: 12.5px; color: var(--text-secondary); padding: 4px 0 4px 15px; position: relative; }
.rp-conf-l li::before { content: '·'; position: absolute; left: 4px; color: var(--muted); font-weight: 700; }
.rp-conf-avviso { font-size: 12.5px; color: #9a6b00; background: rgba(232, 160, 29, .13);
  border: 1px solid rgba(232, 160, 29, .34); border-radius: 10px; padding: 7px 10px; margin-top: 8px; }
/* "Conferma invio modulo serale" e' un'etichetta lunga: dentro una card da 480px
   i due bottoni entrano solo se il messaggio prende una riga tutta sua */
.rp-conferma .tk-azioni-form .tk-msg { flex: 1 0 100%; margin-right: 0; margin-bottom: 2px; }

/* vista PM */
.rp-tabs { margin: 4px 0 14px; }
.rp-tab[aria-selected="true"] { background: rgba(34, 112, 216, .12); color: var(--series-1); border-color: rgba(34, 112, 216, .3); }
.rp-ok { font-size: 13px; color: var(--good-text); text-align: center; padding: 24px; }
.rp-giorno { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--grid); }
.rp-voce { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--row-hover); }
.rp-voce:last-child { border-bottom: none; }
.rp-voce-bar { flex: none; width: 3px; border-radius: 2px; background: var(--warn); }
.rp-voce.task .rp-voce-bar { background: var(--series-3); }
.rp-voce-r1 { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.rp-voce-cli { font-size: 13px; font-weight: 600; }
.rp-voce-chi { font-size: 12px; color: var(--muted); }
.rp-voce-t { font-size: 13px; color: var(--text-secondary); }

.rp-legenda { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; flex-wrap: wrap; }
.rp-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.rp-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid transparent; }
.rp-key.ok   { background: rgba(12, 122, 82, .13);  border-color: rgba(12, 122, 82, .4); }
.rp-key.attn { background: rgba(232, 160, 29, .16); border-color: rgba(232, 160, 29, .45); }
.rp-key.miss { background: rgba(194, 58, 58, .12);  border-color: rgba(194, 58, 58, .4); }
.rp-key.off  { background: rgba(91, 107, 128, .14); border-color: rgba(91, 107, 128, .4); border-style: dashed; }

.rp-tab-griglia th, .rp-tab-griglia td { text-align: center; }
.rp-tab-griglia th:first-child, .rp-tab-griglia td:first-child { text-align: left; min-width: 180px; }
.rp-who { display: block; font-size: 13px; font-weight: 600; }
.rp-who-m { display: flex; gap: 5px; align-items: center; font-size: 11px; color: var(--muted); margin-top: 2px; }
.rp-cell { padding: 5px 4px; }
.rp-chip { width: 25px; height: 25px; border-radius: 7px; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.rp-chip.ok   { background: rgba(12, 122, 82, .13);  border-color: rgba(12, 122, 82, .32); color: var(--good-text); }
.rp-chip.attn { background: rgba(232, 160, 29, .16); border-color: rgba(232, 160, 29, .4);  color: #9a6b00; }
.rp-chip.miss { background: rgba(194, 58, 58, .12);  border-color: rgba(194, 58, 58, .35); color: var(--bad-text); }
.rp-chip.off  { background: rgba(91, 107, 128, .14); border-color: rgba(91, 107, 128, .34); color: var(--cat-blocco); border-style: dashed; }
:root[data-tema="scuro"] .rp-chip.attn { color: var(--warn); }

@media (max-width: 640px) { .rp-card { width: 100%; } .rp-task-top { flex-direction: column; } }

/* ── La griglia dei report DENTRO le sezioni (report-griglia.js) ─────────────
   Riusa i pezzi del popup (.rp-chip, .rp-legenda, .rp-tab-griglia); qui ci
   sono solo la riga-titolo dei gruppi, il bottone che apre la cella e la riga
   di dettaglio. */
.rg-gruppo td { padding: 10px 8px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  text-align: left; border-bottom: none; }
/* il bottone è trasparente: a video si vede solo il chip, ma è cliccabile e
   raggiungibile da tastiera */
.rg-apri { padding: 0; margin: 0; border: none; background: none; cursor: pointer; font: inherit; }
.rg-apri:hover .rp-chip { filter: brightness(.93); }
.rg-dett td { text-align: left; background: var(--row-alt); border-radius: 10px; padding: 10px 12px; }
.rg-dett-tit { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rg-voce { font-size: 12.5px; color: var(--text-secondary); padding: 3px 0; }
.rg-voce .tk-chip { margin-right: 6px; }

/* ── l'elenco delle segnalazioni (l'altra linguetta della stessa card) ───────
   Forma a CONVERSAZIONE, scelta da Leo il 28/08 fra tre prototipi: le iniziali di
   chi ha scritto e il testo in una bolla. Sono messaggi di persone, e letti come
   messaggi costano meno fatica di una tabella. La lista piatta di prima, con la
   barretta colorata a sinistra, e' durata un giorno.
   ⚠️ Il corpo RIENTRA di 20px come la testata della card: senza, le pastiglie
   toccavano il bordo e il testo non era allineato al titolo (Leo: "dai un po' di
   spazio dalla linea di sinistra"). Vale solo dentro una .pn-tab, che di padding
   suo non ne ha (ce l'ha la sua testata): nelle card di Delivery e Project
   Manager il rientro e' gia' quello della .card. */
.pn-tab .rg-feed { padding: 0 20px 16px; }

/* I comandi che montaCard() aggiunge nella testata: le due linguette e la
   ricerca. In Beauty Manager finiscono dentro la .pn-tab-cmd che c'e' gia'; in
   Delivery e Project Manager, dove la testata e' titolo + nota, si spingono a
   destra da soli. `align-self: center` perche' quella testata allinea alla
   BASELINE, e un segmentato allineato alla baseline del titolo balla. */
.rg-cmd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rg-cmd input[type=search] { width: 230px; }
.pn-card-head .rg-cmd { margin-left: auto; align-self: center; }

/* La data resta in cima mentre si scorre: con due settimane di segnalazioni
   davanti, senza, non si sa piu' di che giorno si sta leggendo. Il fondo pieno
   e' obbligatorio — sticky su fondo trasparente si vedono le righe sotto. */
.sg-giorno { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  padding: 16px 0 9px; border-bottom: 1px solid var(--line-2); }
.sg-giorno b { font-size: 14px; font-weight: 700; color: var(--ink); }
.sg-giorno span { font-size: 11.5px; color: var(--muted); }
.sg-vuoto { font-size: 12.5px; color: var(--muted); text-align: center; padding: 30px; }

.sg-riga { display: flex; gap: 11px; padding: 7px 0; }
/* la pastiglia con le iniziali: stessi colori della voce di nav attiva, che nel
   foglio sono gia' la coppia "fondo tenue + testo del marchio" in tutti e due i temi */
.sg-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: var(--nav-fg); background: var(--nav-bg); }
.sg-bolla { flex: 1 1 auto; min-width: 0; background: var(--surface-2b);
  border: 1px solid var(--border-soft); border-radius: 4px 13px 13px 13px; padding: 10px 14px 11px; }
/* una task rimasta aperta non e' un problema segnalato: si distingue dal bordo */
.sg-bolla.task { border-color: var(--bad-bd); }
.sg-bolla-h { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.sg-nome { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sg-sep { font-size: 12.5px; color: var(--muted); }
.sg-cli { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sg-cli.nessuno { font-weight: 500; font-style: italic; color: var(--muted); }
.sg-txt { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
/* chi vede il CONTEGGIO ma non i testi (migration 130): la riga resta, spenta —
   farla sparire vorrebbe dire far credere che quel giorno non ci fosse niente */
.sg-txt.muto { color: var(--muted); }
.rg-voce b { color: var(--text-primary); }

/* ── Scheda cliente (in cima al drill-down del centro) ───────────────────── */
.sc-load { color: var(--muted); font-size: 13px; }
.sc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sc-head h2 { margin-bottom: 0; }

.sc-stato { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; }
.sc-edit  { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin: 12px 0 2px; }
.sc-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sc-vuoto { color: var(--muted); font-size: 12.5px; font-style: normal; }

/* Pastiglie dello stato. Il colore è SOLO un aiuto a colpo d'occhio: la
   definizione di "cliente gestito" non è questa (vedi FUORI_GESTIONE in sauron.js). */
.sc-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; border: 1px solid transparent; }
.sc-ok   { background: rgba(12, 122, 82, .13);  border-color: rgba(12, 122, 82, .32);  color: var(--good-text); }
.sc-via  { background: rgba(34, 112, 216, .10); border-color: rgba(34, 112, 216, .30); color: var(--series-1); }
.sc-attn { background: rgba(232, 160, 29, .16); border-color: rgba(232, 160, 29, .40); color: #9a6b00; }
.sc-off  { background: rgba(91, 107, 128, .14); border-color: rgba(91, 107, 128, .34);
  color: var(--cat-blocco); border-style: dashed; }
:root[data-tema="scuro"] .sc-attn { color: var(--warn); }

/* Lo stato attività si sceglie dalla tendina a spunte condivisa (.dd), la stessa
   di Sauron: 13 opzioni come pulsanti riempivano mezza card. */

.sc-azioni { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-primario[disabled] { opacity: .55; cursor: default; filter: none; }
.sc-esito { font-size: 12.5px; color: var(--text-secondary); }
.sc-esito.ko { color: var(--bad-text); }
.sc-msg { margin-top: 8px; font-size: 12.5px; }
.sc-msg.ok { color: var(--good-text); }
.sc-msg.ko { color: var(--bad-text); }

/* Comandi della scheda, sulla stessa riga del titolo. */
.sc-comandi { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Il "+" dei giorni di servizio: sta attaccato al numero, non in testata, perché
   il comando deve essere lì dove si guarda il dato. */
.sc-piu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; margin-left: 6px; vertical-align: -3px;
  font: inherit; font-size: 14px; line-height: 1; font-weight: 700; cursor: pointer;
  color: var(--series-1); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 999px; padding: 0;
}

/* Pannellino ancorato alla voce (che è già position:relative per la ⓘ). */
.sc-pop {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: max-content; min-width: 250px; max-width: min(340px, calc(100vw - 48px));
  display: flex; flex-direction: column; gap: 9px; padding: 12px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px -14px rgba(4, 16, 40, 0.45);
}
.sc-pop.hidden { display: none; }
.sc-pop.sc-pop-dx { left: auto; right: 0; }
.sc-pop-tit { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.sc-pop input[type=number] { width: 96px; }

/* La matita delle tre persone del centro: stesso bottoncino del "+", ma il
   glifo è più largo e non va in grassetto o non ci sta dentro il cerchio. */
.sc-mat { font-size: 11px; font-weight: 400; }
/* L'elenco delle persone può essere lungo (12 beauty attive): scorre dentro il
   pannello invece di allungarlo oltre il bordo dello schermo. Il margine
   negativo recupera il padding del pannello, così le righe evidenziate
   arrivano al bordo come in una tendina vera. */
.sc-scelte {
  display: flex; flex-direction: column; gap: 1px;
  max-height: 246px; overflow-y: auto; margin: 0 -6px;
}
/* L'email compare solo sulle omonime (Assunta Tolomeo ha due account Notion) e
   va SOTTO il nome, non accanto: in linea mangiava lo spazio del nome, che
   `.dd-nome` tronca con l'ellissi — e fra due righe troncate uguali la seconda
   email non serviva più a niente. */
.sc-scelte .dd-item { padding: 6px 8px; flex-wrap: wrap; }
.sc-scelte .dd-val { flex-basis: 100%; margin-left: 24px; font-size: 11px; }
/* L'anteprima dice cosa succede PRIMA del clic: la data si sposta davvero. */
.sc-anteprima { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.sc-anteprima b { color: var(--text-primary); }

.sc-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 22px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--grid);
}
.sc-k { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sc-v { font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.sc-v a { color: var(--series-1); text-decoration: none; }
.sc-v a:hover { text-decoration: underline; }
.sc-extra { font-style: normal; font-size: 11.5px; color: var(--muted); }
.sc-sep { color: var(--muted); margin: 0 6px; }

/* La regola base della voce sta qui, fusa con l'ancora del suo fumetto (4/9). */
/* ⓘ dentro una voce della scheda: si ancora alla VOCE, non alla card, o il
   fumetto uscirebbe in fondo al riquadro, lontano dal dato che spiega. La voce
   è stretta, quindi il fumetto va a larghezza contenuto e si apre a sinistra. */
.sc-voce { display: flex; flex-direction: column; gap: 1px; min-width: 0; position: relative; }
.sc-voce .kg-i { width: 12px; height: 12px; margin-left: 4px; vertical-align: 0; font-size: 8px; }
.sc-voce .kg-i::after { left: 0; right: auto; width: max-content; max-width: min(400px, 78vw); }

/* ── PIANIFICAZIONE COMMERCIALE (tab dentro Vendita) ────────────────────────
   Un foglio di lavoro, non un rapporto: qui si SCRIVE, quindi i campi hanno un
   bordo visibile (nelle altre sezioni gli input in cella lo mostrano solo in
   hover) e le tabelle non sono ordinabili. Tutto il resto — card, tile, tipi,
   colori — è quello della piattaforma. */

/* Scala del funnel: un solo colore che si schiarisce lungo gli stadi. Le tinte
   del brand vanno bene in chiaro; in scuro il blu profondo sparirebbe contro il
   fondo della traccia, quindi la scala si alza tutta. */
:root {
  --pc-f1: #113c9f; --pc-f2: #1a56c9; --pc-f3: #2286dd; --pc-f4: #33a7dd; --pc-f5: #45c8dc;
  --pc-track: var(--grid);
}
:root[data-tema="scuro"] {
  --pc-f1: #2a5fd0; --pc-f2: #3d8be8; --pc-f3: #4aa6e8; --pc-f4: #3fbdd6; --pc-f5: #5fd6e0;
}

.pc-head-azioni { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.pc-gg { font-size: 12.5px; color: var(--muted); }
.pc-mut { color: var(--muted); font-weight: 500; }
.pc-ok-t { color: var(--good-text); } .pc-warn-t { color: var(--warn); } .pc-bad-t { color: var(--bad-text); }
.pc-legenda { font-size: 12px; color: var(--text-secondary); margin-top: 12px; line-height: 1.6; }
.pc-kpi { margin: 16px 0 0; }
.pc-fonte { gap: 10px; margin-bottom: 14px; }

/* ── blocchi di campi ──────────────────────────────────────────────────── */
.pc-blocchi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pc-blocchi-motore { grid-template-columns: 1.55fr 1fr; }
.pc-blocco { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--row-alt); }
.pc-blocco-piatto { margin-bottom: 16px; }
.pc-blocco h3 {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary);
}
.pc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pc-campi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
.pc-campi-4 { grid-template-columns: repeat(4, 1fr); }
.pc-campi-5 { grid-template-columns: repeat(5, 1fr); }
.pc-campi-3 { grid-template-columns: repeat(3, 1fr); }
.pc-campo { display: flex; flex-direction: column; gap: 5px; }
.pc-campo label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
.pc-campo-btn { justify-content: flex-end; }
.pc-inp {
  font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  width: 100%; padding: 9px 11px; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
}
.pc-inp:focus { outline: none; border-color: var(--sv-azure); box-shadow: 0 0 0 3px var(--ring); }
/* i campi calcolati non si toccano: restano leggibili ma senza invito a scriverci */
.pc-inp:disabled { background: var(--page); color: var(--text-secondary); border-style: dashed; }
.pc-import { margin-top: 12px; }
.pc-import label {
  display: block; margin-bottom: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
.pc-paste {
  width: 100%; min-height: 58px; resize: vertical; padding: 9px 11px;
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--text-primary);
  background: var(--surface-1); border: 1px dashed var(--border); border-radius: 10px;
}
.pc-paste:focus { outline: none; border-style: solid; border-color: var(--sv-azure); box-shadow: 0 0 0 3px var(--ring); }

/* ── semaforo ──────────────────────────────────────────────────────────── */
.pc-sem {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 14px; margin-bottom: 18px;
}
.pc-lamp { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.pc-sem-t1 { display: block; font-size: 15px; font-weight: 700; }
.pc-sem-t2 { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.pc-sem.pc-neutro { background: var(--row-alt); }
.pc-sem.pc-neutro .pc-lamp { background: var(--muted); }
.pc-sem.pc-neutro .pc-sem-t1 { color: var(--text-secondary); }
.pc-sem.pc-ok { background: rgba(15, 159, 133, 0.10); border-color: rgba(15, 159, 133, 0.35); }
.pc-sem.pc-ok .pc-lamp { background: var(--good-text); box-shadow: 0 0 0 5px rgba(15, 159, 133, 0.16); }
.pc-sem.pc-ok .pc-sem-t1 { color: var(--good-text); }
.pc-sem.pc-warn { background: rgba(232, 160, 29, 0.10); border-color: rgba(232, 160, 29, 0.38); }
.pc-sem.pc-warn .pc-lamp { background: var(--warn); box-shadow: 0 0 0 5px rgba(232, 160, 29, 0.18); }
.pc-sem.pc-warn .pc-sem-t1 { color: #9a6b00; }
.pc-sem.pc-bad { background: rgba(194, 58, 58, 0.09); border-color: rgba(194, 58, 58, 0.32); }
.pc-sem.pc-bad .pc-lamp { background: var(--bad-text); box-shadow: 0 0 0 5px rgba(194, 58, 58, 0.15); }
.pc-sem.pc-bad .pc-sem-t1 { color: var(--bad-text); }
:root[data-tema="scuro"] .pc-sem.pc-warn .pc-sem-t1 { color: var(--warn); }

/* ── barre di avanzamento ──────────────────────────────────────────────── */
.pc-barre { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.pc-pb { margin-bottom: 15px; }
.pc-pb-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; margin-bottom: 5px; }
.pc-pb-lbl { font-weight: 600; }
.pc-pb-h b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pc-pb-t { position: relative; height: 13px; background: var(--pc-track); border-radius: 7px; }
.pc-pb-t i { display: block; height: 100%; border-radius: 7px; transition: width .35s; }
/* la tacca "dove dovresti essere oggi": un filo scuro che sfora sopra e sotto,
   così si legge anche quando il riempimento le arriva esattamente sotto */
.pc-pb-t u {
  position: absolute; top: -4px; width: 2px; height: 21px;
  background: var(--text-primary); border-radius: 2px; opacity: .75;
}
.pc-pb-t u::after {
  content: attr(data-l); position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 700; color: var(--text-secondary); text-decoration: none; white-space: nowrap;
}
.pc-pb-f { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.pc-fill-ok { background: linear-gradient(90deg, var(--sv-azure), var(--good-text)); }
.pc-fill-warn { background: linear-gradient(90deg, var(--sv-azure), var(--warn)); }
.pc-fill-bad { background: linear-gradient(90deg, var(--sv-azure), var(--bad-text)); }

/* ── funnel ────────────────────────────────────────────────────────────── */
.pc-funnel { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 14px; }
.pc-frow { display: grid; grid-template-columns: 190px 1fr 150px; align-items: center; gap: 14px; }
.pc-frow-rin { margin-top: 4px; padding-top: 11px; border-top: 1px dashed var(--grid); }
.pc-fname { font-size: 12.5px; font-weight: 600; }
.pc-ftrack { background: var(--pc-track); border-radius: 7px; height: 26px; }
.pc-ftrack i { display: block; height: 100%; border-radius: 7px; transition: width .35s; }
/* il numero sta FUORI dalla barra: sui toni chiari della coda del funnel il
   bianco sopra il colore non reggerebbe il contrasto */
.pc-fval { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.pc-fmeta { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }

/* ── tabelle del piano ─────────────────────────────────────────────────── */
/* non sono ordinabili: la mano del cursore prometterebbe un clic che non fa nulla */
.pc-tab thead th { cursor: default; }
.pc-tab thead th:hover { color: var(--muted); }
.pc-tab td { padding: 6px 10px; }
.pc-tab tfoot tr { background: var(--row-alt); }
.pc-tab tfoot td { font-weight: 700; border-top: 2px solid var(--grid); border-bottom: none; }
.pc-tab .cell-inp { border-color: var(--border); background: var(--surface-1); }
.pc-cifra { max-width: 96px; text-align: right; font-variant-numeric: tabular-nums; margin-left: auto; }
.pc-testo { min-width: 140px; font-weight: 600; }
.pc-azione-cella { width: 34px; }
.pc-x {
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer; padding: 6px 7px;
  background: none; border: none; border-radius: 8px; color: var(--muted); opacity: .6;
}
.pc-x:hover { opacity: 1; color: var(--bad-text); background: var(--row-hover); }
.pc-chip {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pc-chip.pc-ok { background: rgba(15, 159, 133, 0.14); color: var(--good-text); }
.pc-chip.pc-bad { background: rgba(194, 58, 58, 0.12); color: var(--bad-text); }
.pc-avanz { white-space: nowrap; }
.pc-mini {
  display: inline-block; vertical-align: middle; width: 62px; height: 6px; margin-right: 8px;
  background: var(--pc-track); border-radius: 3px; overflow: hidden;
}
.pc-mini i { display: block; height: 100%; }

/* ── note ──────────────────────────────────────────────────────────────── */
/* .note-info è ambra (un avviso). Qui servono anche il verde e il rosso: stessa
   forma, tinta diversa, così si distinguono senza rileggerle. */
.note-info.pc-ok-note { background: rgba(15, 159, 133, 0.10); border-color: rgba(15, 159, 133, 0.32); }
.note-info.pc-bad-note { background: rgba(194, 58, 58, 0.09); border-color: rgba(194, 58, 58, 0.30); }

/* ── il piano in parole ────────────────────────────────────────────────── */
.pc-brief-head { display: flex; align-items: flex-start; gap: 14px; }
.pc-brief-head > div { flex: 1; }
.pc-brief { font-size: 14px; line-height: 1.75; color: var(--text-primary); }
.pc-brief p { margin: 0 0 14px; }
/* h4 E h3 nella stessa regola, e non e' indecisione. I quattro sottotitoli del
   piano in parole sono passati a h3 — sotto un <h2> un h4 lasciava un livello
   vuoto — ma pianificazione.js si importa con un ?v= (vendita.js) e un browser
   che ha ancora in cache quello vecchio continua a scrivere h4 per una decina di
   minuti. Tenendoli tutti e due nessuno si ritrova un quarto d'ora con i
   sottotitoli spogli, ne' prima ne' dopo il rilascio. Quando la cache e' passata
   l'h4 qui si puo' togliere. */
.pc-brief h4, .pc-brief h3 {
  margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--grid);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary);
}
.pc-brief ul { margin: 0 0 14px; padding-left: 20px; }
.pc-brief li { margin-bottom: 7px; }
/* i numeri del discorso: si devono poter ritrovare a colpo d'occhio senza
   rileggere la frase */
.pc-n {
  display: inline-block; padding: 1px 7px; border-radius: 6px; white-space: nowrap;
  font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(34, 112, 216, 0.12); color: var(--series-1);
}
.pc-n-gr { background: rgba(15, 159, 133, 0.14); color: var(--good-text); }
.pc-n-or { background: rgba(201, 89, 27, 0.13); color: var(--series-3); }
.pc-n-te { background: rgba(15, 159, 133, 0.12); color: var(--series-2); }
.pc-vrow {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px;
  padding: 11px 13px; background: var(--row-alt); border: 1px solid var(--border); border-radius: 12px;
}
.pc-vn { flex: 0 0 150px; font-weight: 700; }
.pc-vt { flex: 1; }
.pc-ckp { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pc-ck {
  padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.55;
  background: var(--row-alt); border: 1px solid var(--border);
}
.pc-sintesi { border-left: 3px solid var(--sv-teal); padding-left: 13px; color: var(--text-secondary); }

/* ── stretto ───────────────────────────────────────────────────────────── */
/* 1050 e non 1100: portandola a 1100 la Pianificazione si incolonna prima e la pagina
   si allunga di 695px su un portatile da 13" (misurato il 4/9). Resta 1050. */
@media (max-width: 1050px) {
  .pc-blocchi, .pc-blocchi-motore, .pc-barre { grid-template-columns: 1fr; }
  .pc-campi, .pc-campi-4, .pc-campi-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pc-campi, .pc-campi-3, .pc-campi-4, .pc-campi-5 { grid-template-columns: 1fr; }
  .pc-frow { grid-template-columns: 120px 1fr; row-gap: 4px; }
  .pc-fval { grid-column: 2; text-align: left; }
  .pc-head-azioni { margin-left: 0; }
  .pc-vrow { flex-direction: column; gap: 4px; }
  .pc-vn { flex: none; }
}

/* ── stampa ────────────────────────────────────────────────────────────────
   Il bottone "Stampa / PDF" della Pianificazione stampa la pagina intera: la
   shell (header, nav, barra filtri, bottoni) su carta è solo inchiostro. Le
   regole valgono per tutta l'app — nessuna sezione vuole la navigazione in un
   PDF — e le card non si spezzano a metà fra due pagine. */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PANORAMICA — la schermata ridisegnata                                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Tre blocchi, in quest'ordine: (1) il funnel dell'azienda in una fascia sola,
   con sotto i benchmark come barrette; (2) due carte affiancate — dove sta il
   buco / che fine fanno i lead; (3) la tabella per centro. Prima erano tre
   gruppi di KPI affiancati e poi la tabella: le stesse cifre, ma senza il
   passo del funnel e senza mai dire, in cima, QUALI centri guardare. */

/* ── testata di pagina: NON ESISTE PIU' ────────────────────────────────────
   `.pg-head` (titolo + sottotitolo + periodo e conteggi a destra) l'ha fatta
   togliere Leo il 27/08 da TUTTE le sezioni ("è inutile"), dopo averla gia'
   fatta togliere il 26/08 dal Project Manager. Ed era vero: il titolo lo ripete
   la voce di menu evidenziata, il periodo lo dice la barra filtri appiccicata
   sopra, e i conteggi stavano lontani dalle tabelle che contavano.
   Le regole sono state cancellate insieme al markup: se un giorno servisse una
   testata, si riscrive — tenerle qui avrebbe solo fatto credere alla prossima
   sessione che qualcuno le usi ancora. Dove c'era qualcosa da salvare e' stato
   spostato: i conteggi accanto al titolo della tabella (`.bm-conta`), le ⓘ
   "Che cos'è" di Sales Manager e Delivery Manager nello slot `#filtriExtra`. */

/* ── fascia funnel + benchmark ─────────────────────────────────────────── */
/* ⚠️ Dal 26/08 la usa SOLO "LE TUE CHIAMATE" (mia.js): la fascia in cima al
   Project Manager l'ha fatta togliere Leo. Non e' CSS morto. */
.pn-strip {
  /* position: relative = àncora dei fumetti ⓘ dei benchmark. Senza, si ancorano
     al blocco contenitore iniziale e cadono a mezza pagina di distanza
     dall'icona (stessa trappola gia' segnata su .card e .filters). */
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-card); margin-bottom: 16px;
  /* niente overflow:hidden, o i fumetti verrebbero tagliati dal bordo della
     fascia: gli angoli tondi se li fanno da soli le celle ai quattro capi */
}
.pn-funnel > .pn-step:first-child { border-top-left-radius: 16px; }
/* DUE righe di tessere nella stessa fascia: dall'01/09/2026 il Sales Manager
   mette i soldi del periodo SOPRA le chiamate. Il filetto che le separa lo
   prende la seconda.
   🚨 Il `:not(.hidden)` non e' decorativo: la riga dei soldi nasce nascosta e la
      accende solo la RPC (a un setter risponde con zero righe). Un selettore
      adiacente guarda il DOM e non il `display`, quindi senza quel pezzo il
      filetto resterebbe sospeso in cima alla fascia di tutti gli altri.
   ⚠️ Il raggio in alto a sinistra sta gia' sulla prima cella di OGNI .pn-funnel
      e qui non da' fastidio: le celle sono trasparenti, quindi l'angolo tondo di
      una riga di mezzo non si vede (verificato a schermo, non dedotto). Se un
      domani una .pn-step di mezzo prende un fondo suo, quella regola va rivista. */
.pn-strip > .pn-funnel:not(.hidden) + .pn-funnel { border-top: 1px solid var(--line); }

/* etichetta di un comando dentro la barra filtri (Attribuzione): la sorella
   .filter-cap li' e' nascosta di proposito, qui serve — senza, il segmentato
   coorte/evento sarebbe due parole senza nome accanto alle tendine */
.fx-cap { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* auto-fit e non un numero di colonne fisso: i passi del funnel sono sette su
   desktop e devono poter diventare due su un telefono senza un breakpoint per
   ogni taglio. 164px = la colonna piu' stretta in cui "1.482" a 27px e la sua
   didascalia stanno senza andare a capo. */
.pn-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); }
.pn-step { min-width: 0; padding: 16px 18px 18px; border-left: 1px solid var(--line); }
.pn-step:first-child { border-left: none; }
.pn-step.is-key { background: var(--surface-2b); }
.pn-cap { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pn-val { margin-top: 9px; font-size: 27px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pn-step .sub { margin-top: 9px; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.pn-step .track { margin-top: 8px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pn-step .track > i { display: block; height: 100%; border-radius: 2px; }

/* gli angoli in basso della fascia: .pn-strip non ha overflow:hidden (vedi sopra) */
.pn-gauges {
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); border-top: 1px solid var(--line); background: var(--surface-2b);
}
.pn-gauge { min-width: 0; padding: 13px 18px 15px; border-left: 1px solid var(--line); }
.pn-gauge:first-child { border-left: none; }
.pn-gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* ⚠️ L'etichetta e' TESTO NORMALE, non un flex, e va a capo. Nata corta
   ("% Risposta", "Conversione") stava su una riga sola col nowrap; il Sales
   Manager ne ha di lunghe ("Appuntamento su risposte") e in due colonne strette
   uscivano dalla cella scavalcando il numero della gauge accanto. Col flex il
   testo e la ⓘ erano due caselle affiancate che non potevano andare a capo
   l'una sotto l'altra — l'icona sa gia' stare in linea da se' (.kg-i e'
   inline-grid con vertical-align), quindi il flex non serviva. Dove c'e' spazio
   non cambia niente: si va a capo solo quando davvero non ci si sta. */
.pn-gauge-lab { min-width: 0; line-height: 1.35; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pn-gauge-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Il binario e' la scala 0 → 160% del benchmark, e la tacca scura sta dove
   passa il benchmark (a 62,5%, cioe' 100/160). Cosi' "sopra o sotto la tacca"
   si vede senza leggere il numero, e due gauge diversi restano confrontabili. */
.pn-gauge-track { margin-top: 9px; position: relative; height: 5px; border-radius: 3px; background: var(--line-2); }
.pn-gauge-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.pn-gauge-track > b { position: absolute; left: 62.5%; top: -3px; bottom: -3px; width: 1.5px; background: var(--ink-2); border-radius: 1px; }
.pn-gauge-tgt { margin-top: 6px; font-size: 10.5px; color: var(--muted); }

/* ── testata di una card ────────────────────────────────────────────────── */
.pn-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.pn-card-head .nota { font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: none; }

/* ── la riga KPI, vestita da fascia ──────────────────────────────────────────
   `renderKpiRow` disegna delle .tile, che nel vecchio linguaggio erano piccole
   card con bordo e ombra: dentro una schermata nuova sembravano quattro
   riquadri appiccicati sopra una carta. Qui diventano la stessa fascia dei
   passi del funnel — nessun bordo, un filetto verticale a separarle — senza
   toccare una riga di JavaScript: la card che le contiene aggiunge la classe.

   Serve alle card importate dalla sezione Beauty (Time to lead), e servirà a
   tutte le altre quando toccherà a loro. */
.pn-fascia { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; }
.pn-fascia .tile {
  background: none; border: none; border-radius: 0; box-shadow: none;
  border-left: 1px solid var(--line); padding: 14px 18px 16px;
}
.pn-fascia .tile:first-child { border-left: none; }
.pn-fascia .tile .label { font-size: 9.5px; letter-spacing: 0.14em; margin-bottom: 8px; }
.pn-fascia .tile .value { font-size: 22px; letter-spacing: -0.02em; }
.pn-fascia .tile .sub { font-size: 11px; color: var(--muted); }
/* il grafico dentro una card senza padding se lo prende da sé */
.pn-grafico { padding: 14px 20px 4px; border-top: 1px solid var(--line); }

/* ── tabella per centro ────────────────────────────────────────────────── */
/* La carta non ha padding: intestazione, tabella e piede sono tre fasce che
   arrivano al bordo, come nel disegno. */
:is(.pn-tab, .tab-nuova) { padding: 0; overflow: hidden; }
.pn-tab-head { padding: 18px 20px 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pn-tab-head h2 { margin-bottom: 4px; }
.pn-tab-head .subtitle { margin-bottom: 0; }
/* ⚠️ position: relative = ancora del fumetto ⓘ dell'ATTRIBUZIONE, che dal 26/08
   sta qui dentro (testata di "Per centro") e non più nella barra filtri. Il
   fumetto è assoluto: senza un'ancora vicina si aggancerebbe alla .card e
   uscirebbe in fondo alla sezione, sotto tutta la tabella. Stessa trappola di
   .mm-campo. Si apre verso sinistra perché la riga dei comandi è a destra. */
.pn-tab-cmd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.pn-tab-cmd .kg-i::after { left: auto; right: 0; width: max-content; max-width: min(420px, 78vw); }

/* Lo score dei centri in testata a "Per centro" (Leo, 4/9): la stessa barra a tre
   fasce del Quadro PM (.qp-sc), in fondo a destra della riga dei comandi.
   ⚠️ `flex-grow` sulla riga e non `width: 100%`: la riga va a capo quando serve
      esattamente come prima — a deciderlo è ancora il contenuto — e cresce solo
      per riempire quella su cui è finita. Senza, il `margin-left: auto` dello
      score non avrebbe spazio dove spingere e resterebbe appiccicato alle viste. */
.pn-tab-cmd.mg-cmd { flex-grow: 1; }
.mg-score { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mg-score .fx-cap { white-space: nowrap; }
.mg-score .kg-i { margin-left: -3px; }
/* La barra è larga quanto i tre numeri che spiega, non 92px come in tabella:
   qui non ha una colonna a cui incolonnarsi. */
.mg-score-b { min-width: 96px; }
.mg-score-b .qp-sc { width: 100%; margin: 0 0 3px; }
.mg-score-b .qp-sc-n { white-space: nowrap; text-align: center; }

/* ── Il portafoglio del Project Manager, come composizione ─────────────────
   I tre conteggi sono uno DENTRO l'altro (gestiti ⊃ operativi ⊃ ads accese):
   in quattro tessere quel rapporto andava ricostruito a mente, la barra lo fa
   vedere. Sotto, due liste corte: perché sono fermi, e chi sta per scadere. */
.mg-port { padding: 15px 17px 17px; }
.mp-cap { font-size: 9.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.mp-tot { display: flex; align-items: baseline; gap: 7px; margin: 11px 0 1px; }
.mp-tot b { font-size: 33px; font-weight: 700; letter-spacing: -0.032em; line-height: 1; font-variant-numeric: tabular-nums; }
.mp-tot span { font-size: 11.5px; color: var(--ink-2); }
.mp-quando { font-size: 10.5px; color: var(--muted); }
.mp-barra { display: flex; gap: 2px; height: 9px; margin: 14px 0 13px; }
.mp-barra i { display: block; border-radius: 999px; min-width: 2px; }
/* le tinte delle tre fette, riusate dai pallini della legenda */
i.mp-attive { background: var(--teal); }
i.mp-spente { background: var(--brand); }
i.mp-fermi  { background: var(--off-bg); }
.mp-leg { display: grid; gap: 9px; }
.mp-leg .r { display: grid; grid-template-columns: 8px 26px 1fr; gap: 9px; align-items: baseline; }
.mp-leg .r i { width: 8px; height: 8px; border-radius: 3px; align-self: center; }
.mp-leg .r b { font-size: 14.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mp-leg .r span { font-size: 11px; color: var(--ink-2); line-height: 1.3; }
.mp-leg .r span em { display: block; font-style: normal; color: var(--muted); font-size: 10.5px; margin-top: 1px; }
.mp-leg .r.fermi b, .mp-leg .r.fermi span { color: var(--muted); }
.mp-sotto { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mp-tit { font-size: 9.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px; }
.mp-sotto .r { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: baseline; padding: 4px 0; }
.mp-sotto .r b { font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mp-sotto .r span { font-size: 11px; color: var(--ink-2); }
/* le scadenze hanno il nome a sinistra e il "quando" a destra */
.mp-scad .r { grid-template-columns: 1fr auto; gap: 8px; }
.mp-scad .r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-scad .r b { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.mp-altre { font-size: 10.5px; color: var(--muted); padding-top: 4px; }
.mp-finiti { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
.mp-finiti b { color: var(--warn); font-weight: 700; }

/* ── il portafoglio si apre: le fette sono bersagli ──────────────────────────
   Ogni riga della composizione (e la sua fetta di barra) apre la bacheca dei
   clienti che ci stanno dentro. Il fondo dell'hover esce di 8px per lato con un
   margine negativo pari: così la riga si accende tutta senza che una virgola
   del disegno si sposti di un pixel. */
.mp-leg .r[data-port], .mp-sotto .r[data-port] {
  cursor: pointer; border-radius: 8px;
  margin: 0 -8px; padding-left: 8px; padding-right: 8px;
}
.mp-leg .r[data-port]:hover, .mp-sotto .r[data-port]:hover { background: var(--hover); }
.mp-leg .r[data-port]:focus-visible, .mp-sotto .r[data-port]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 0;
}
.mp-barra i[data-port] { cursor: pointer; }
.mp-barra i[data-port]:hover { filter: brightness(1.12); }
.mp-barra i[data-port]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── i colori delle colonne del portafoglio ─────────────────────────────────
   Palette CATEGORICA, una tinta per colonna (Leo, 31/08: "metti dei colori che
   li differenzino"): prima erano tre, una per fetta della barra, e dentro una
   fetta le colonne erano tutte uguali.
   ✅ Validata con `scripts/validate_palette.js` della skill dataviz sulle coppie
      ADIACENTI (le colonne si leggono una accanto all'altra) e su tutte e due le
      superfici — chiaro #f8fafd, scuro #101f37. Nelle 12 colonne che si vedono
      davvero: banda di luminosità PASS e soglia a vista normale PASS in tutti e
      due i temi (ΔE 17,6 chiaro · 16,0 scuro, floor 15). La separazione CVD
      resta nella fascia 6,5-6,9, ammessa solo con una SECONDA CODIFICA: qui ci
      sono il nome della colonna scritto in testa, il vuoto fra le colonne e il
      tratteggio dei fuori gestione. Non toccare un hex senza rilanciare lo
      script su tutte e due le superfici.
   ⚠️ Due tinte sono GRIGE di proposito, e lo script le segnala ("reads gray"):
      grigio = non si sa (senza stato), ardesia = fermo (standby, riparte a
      gennaio). Non sono un'identità, sono l'assenza di una.
   ⚠️ Le tinte si ripetono dove il senso si ripete e le colonne sono lontane:
      blu = sta per partire, viola = torna più avanti, ardesia = fermo. */
:root {
  --pf-grigio:  #5c5f66;   --pf-slate:   #46536b;
  --pf-blu:     #2a78d6;   --pf-magenta: #e87ba4;   --pf-giallo: #eda100;
  --pf-verde:   #008300;   --pf-viola:   #4a3aa7;   --pf-arancio: #eb6834;
  --pf-rosso:   #e34948;   --pf-aqua:    #1baf7a;   --pf-copper: #a8531d;
}
/* Il tema scuro non è un ribaltamento: sono le stesse tinte ri-gradinate sulla
   superficie scura e validate come insieme (banda OKLCH 0,48-0,67). */
:root[data-tema="scuro"] {
  --pf-grigio:  #8d8f91;   --pf-slate:   #6f7f99;
  --pf-blu:     #3987e5;   --pf-magenta: #d55181;   --pf-giallo: #c98500;
  --pf-verde:   #14a88c;   --pf-viola:   #9085e9;   --pf-arancio: #d95926;
  --pf-rosso:   #e66767;   --pf-aqua:    #199e70;   --pf-copper: #d97430;
}
/* La riga in cima non è più una legenda di colori — ogni colonna ha il suo — ma
   i conti della card: 53 · 44 · 49 · 29. Il pallino qui non spiegherebbe niente. */
.pf-corpo .bc-legenda i { display: none; }
.pf-corpo .bc-legenda { gap: 16px; font-size: 12px; }

/* ── la finestra del portafoglio ────────────────────────────────────────────
   Larga come TUTTE le altre (.dr-card, 980px): era l'unica a 1360px, e aperta
   accanto alla scheda cliente si vedeva che erano due finestre diverse (Leo,
   3/9: *"facciamolo della stessa grandezza di scheda cliente, così è tutto
   omogeneo"*). Le dodici colonne da 244px non ci stavano nemmeno prima: il
   board scorre di lato dentro di sé da sempre (.bc-board ha il suo overflow),
   e adesso ne mostra quattro invece di cinque. */
.pf-corpo { padding: 16px 24px 22px; }
/* La colonna da cui si è arrivati. NON è l'allarme di bacheca.js (rosso): qui
   non c'è niente che non va, c'è solo "hai cliccato di qui". */
.bc-col.pf-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.bc-col.pf-on .bc-nome { color: var(--brand); }
.pf-card .bc-piede { justify-content: space-between; }
.pf-pm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-altri {
  font-size: 10.5px; color: var(--muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── oltre lo stacco: i fuori gestione ──────────────────────────────────────
   Non sono il portafoglio, e non devono sembrarlo: uno stacco largo con la sua
   riga in mezzo, il bordo tratteggiato e la testata smorzata. La percentuale
   sparisce del tutto — sarebbe una quota "sul portafoglio" di clienti che nel
   portafoglio non ci sono. */
.bc-col.pf-stacco { margin-left: 26px; }
.bc-col.pf-stacco::before {
  content: ''; position: absolute; left: -20px; top: 4px; bottom: 4px;
  width: 1px; background: var(--border-2);
}
.bc-col.pf-fuori { position: relative; background: none; border-style: dashed; }
.bc-col.pf-fuori .bc-p { display: none; }
.bc-col.pf-fuori .bc-nome, .bc-col.pf-fuori .bc-n { color: var(--muted); }

/* ── spostare una card da una colonna all'altra ─────────────────────────────
   Si trascina, oppure si preme il ⇄: il secondo modo esiste perché col
   drag-and-drop la tastiera non ci arriva, e perché con dodici colonne
   trascinare fino in fondo è peggio che scegliere da un elenco.
   ⚠️ Il cursore è quello del CLIC e non più la manina che afferra: dal 3/9 il
      clic sulla card apre la scheda cliente, e una card che sembra solo da
      trascinare direbbe una cosa che non è più vera. Si trascina lo stesso. */
.pf-card { cursor: pointer; }
.pf-card.pf-presa { opacity: .45; }

/* Il ⇄ sta SOPRA la card e non dentro — un <button> dentro un <button> non è
   HTML valido — quindi i due sono fratelli dentro un contenitore posizionato:
   è tutto quello che fa `.pf-slot`. */
.pf-slot { position: relative; }
/* la riga del nome si ferma prima del ⇄, o un nome lungo ci finisce sotto */
.pf-slot .bc-top { padding-right: 20px; }
.pf-sposta {
  position: absolute; top: 6px; right: 6px;
  width: 21px; height: 21px; display: grid; place-items: center;
  appearance: none; font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--muted); opacity: .55;
}
/* Si accende quando il puntatore entra nella CARD, non solo quando è già
   sopra il bottoncino: un comando che si vede solo dopo averlo trovato non lo
   trova nessuno. Smorzato e non nascosto, così esiste anche col dito. */
.pf-slot:hover .pf-sposta, .pf-sposta:focus-visible { opacity: 1; }
.pf-sposta:hover { background: var(--surface-3); border-color: var(--border-2); color: var(--ink); }
.pf-sposta:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pf-sposta[disabled] { opacity: .25; cursor: default; }
/* la colonna sotto il puntatore: si accende tutta, non solo il bordo, o sopra
   una colonna piena di card non si capisce dove si sta per lasciare */
.bc-col.pf-sopra { border-color: var(--brand); background: var(--hover); box-shadow: 0 0 0 1px var(--brand); }
/* mentre si scrive su Notion (~1s): la card resta al suo posto e si spegne, e
   non accetta un secondo clic */
.pf-card.pf-scrivo { opacity: .5; pointer-events: none; }
.pf-card.pf-scrivo::after {
  content: 'salvo su Notion…'; font-size: 10.5px; color: var(--muted);
}

/* L'elenco delle destinazioni. Appeso al VELO e non alla colonna: dentro
   `.bc-body`, che scorre e taglia quello che esce, sarebbe mezzo invisibile. */
.pf-menu {
  position: fixed; z-index: 90; min-width: 208px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 12px; box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 1px;
}
.pf-menu-t {
  font-size: 10.5px; color: var(--muted); padding: 5px 9px 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-menu button {
  appearance: none; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  padding: 7px 9px; border-radius: 8px; display: flex; align-items: center; gap: 9px;
}
.pf-menu button:hover { background: var(--hover); }
.pf-menu button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pf-menu i { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* Le mie task e le tre basi del portafoglio, affiancate (26/08, Leo: "la sezione
   task è troppo larga"): la lista è alta ma stretta di contenuto. Sotto i
   1100px tornano incolonnate — due colonne strette non le legge nessuno. */
.mg-riga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 18px; align-items: start; }
.mg-riga > .card { margin-bottom: 18px; }
@media (max-width: 1100px) {
  .mg-riga { grid-template-columns: 1fr; gap: 0; }
}
.pn-tab-cmd input[type=search] { margin-bottom: 0; width: 190px; border-radius: 9px; border-color: var(--border-2); background-color: var(--surface); }
.pn-tab-foot { padding: 12px 20px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); background: var(--surface-2b); }

/* interruttori sopra la tabella: "Solo fuori benchmark" e i tagli di colonne */
.pn-sw {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; cursor: pointer;
  border-radius: 9px; white-space: nowrap;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2);
}
.pn-sw:hover { border-color: var(--border-hover); color: var(--ink); }
.pn-sw.on { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
.pn-seg { display: flex; gap: 3px; padding: 3px; background: var(--surface-3); border-radius: 10px; }
.pn-seg button {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; cursor: pointer;
  border: none; border-radius: 7px; background: none; color: var(--ink-2); white-space: nowrap;
}
.pn-seg button:hover { color: var(--ink); }
.pn-seg button.active { background: var(--pill-on); color: var(--pill-fg); box-shadow: var(--shadow-pill); }

/* La tabella scorre di lato dentro la carta, senza cornice propria: il bordo
   della carta e' gia' li'. max-height alto perche' con la testata e la barra
   filtri appiccicate in cima l'intestazione della tabella non serve piu' che
   resti visibile a tutti i costi. */
:is(.pn-tab, .tab-nuova) .table-scroll { border: none; border-radius: 0; border-top: 1px solid var(--line); max-height: 74vh; }
:is(.pn-tab, .tab-nuova) table { font-size: 13px; }
:is(.pn-tab, .tab-nuova) thead th {
  background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 700;
  letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--line-2);
}
:is(.pn-tab, .tab-nuova) thead th:first-child { background: var(--surface-2); }
:is(.pn-tab, .tab-nuova) .th-group {
  background: var(--surface-2); color: var(--muted);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: left; border-bottom: 1px solid var(--line-2b);
}
:is(.pn-tab, .tab-nuova) .g-start { border-left: 1px solid var(--line-2b); }
:is(.pn-tab, .tab-nuova) tbody tr, .pn-tab tbody tr:nth-child(even) { background: var(--surface); }
:is(.pn-tab, .tab-nuova) tbody tr:hover { background: var(--hover); }
:is(.pn-tab, .tab-nuova) tbody tr.rowlink:hover > td:first-child { background-color: var(--surface); }
:is(.pn-tab, .tab-nuova) tbody td:first-child { border-right: 1px solid var(--line); }
:is(.pn-tab, .tab-nuova) .mini-bar {
  position: absolute; right: 12px; bottom: 5px; margin: 0;
  height: 3px; border-radius: 2px; background: var(--track);
}
:is(.pn-tab, .tab-nuova) tbody td { border-bottom: 1px solid var(--line-3); position: relative; }

/* la cella del nome: pallino di stato, nome, e sotto consulente + stato ads */
.pn-nome { display: flex; align-items: center; gap: 10px; }
.pn-nome .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pn-nome .txt { min-width: 0; flex: 1; }
.pn-nome .n1 { display: block; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.pn-nome .n2 { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.pn-nome .meta { font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pn-stato { flex: none; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 5px; white-space: nowrap; background: var(--off-bg); color: var(--off-fg); }
.pn-stato.st-on { background: var(--ok-bg); color: var(--ok-fg); }
.pn-stato.st-via { background: var(--via-bg); color: var(--via-fg); }
.pn-stato.st-warn { background: var(--warn-bg); color: var(--warn-fg); }

/* riga dei totali: stessa fascia dell'intestazione, appiccicata in fondo allo
   scorrimento — con cento centri il totale non deve essere una riga da cercare */
:is(.pn-tab, .tab-nuova) tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--surface-2); border-top: 1px solid var(--line-2b); border-bottom: none;
  font-weight: 700; font-size: 13px;
}
:is(.pn-tab, .tab-nuova) tfoot td:first-child { z-index: 3; font-size: 12px; letter-spacing: 0.02em; }

:is(.pn-tab, .tab-nuova) .cell-sub { font-size: 10.5px; color: var(--muted-2); font-weight: 400; }

/* ── "LE TUE CHIAMATE": il quadro personale della beauty ─────────────────────
   Riusa la fascia della Panoramica (.pn-strip, .pn-step, .pn-gauge) perché è la
   stessa idea — numeri grandi in cima, barrette sotto — ma la tacca del gauge
   qui non è un benchmark dell'agenzia: è la media del team. */
.mia-tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* Dal 28/08 fra le tessere ce ne sono due con la didascalia lunga
   ("Non lavorati correttamente", "Chiamate non registrate"): `.pn-cap` nasce
   `nowrap` perche' altrove sono corte, e li' scavalcava la tessera accanto.
   Stessa deroga gia' fatta per la fascia di Beauty Manager (#chPassi). */
.mia-tiles .pn-cap { white-space: normal; line-height: 1.3; }
/* Il secondo numero della tessera "Appuntamenti e acconti": piu' piccolo e spento,
   cosi' si legge che il numero principale e' il primo e l'altro gli sta dietro. */
.mia-val-sec { font-size: 0.72em; color: var(--muted); }

/* La bacheca e la griglia dei report dentro le carte della vista beauty: le carte
   sono `.tab-nuova` (padding 0), quindi il respiro lo mettono i due contenitori.
   Il board scorre di lato dentro di se' — ci pensa gia' `.bc-board`. */
.mia-board { padding: 4px 20px 18px; }
#miaRepBody { padding: 4px 20px 18px; }
@media (max-width: 640px) {
  .mia-board, #miaRepBody { padding: 4px 13px 16px; }
}
/* Stesso problema dei binari: "Tasso di appuntamento su risposta" occupa due
   righe e "% Risposta" una, quindi le barrette finivano a due altezze diverse.
   L'intestazione parte dall'alto e ha l'altezza di due righe per tutti: cosi'
   i cinque binari si leggono incolonnati, che e' il senso di metterli in fila. */
.mia-gauges .pn-gauge-head { align-items: flex-start; min-height: 2.9em; flex-wrap: nowrap; }
/* ⚠️ `nowrap` e' la meta' del rimedio: senza, con l'etichetta su due righe il
   numero andava a capo SOTTO di lei e la barretta scendeva di un'altra riga. */
.mia-gauges .pn-gauge-val { flex: none; }
/* Il saluto e la spiegazione del confronto anonimo: una riga sopra la fascia,
   quello che resta della testata di pagina tolta il 27/08. */
/* "Stai guardando la schermata di X": la fascia esiste perche' i titoli dentro la
   pagina dicono "i tuoi", "le tue", "la tua" — e sono giusti cosi', perche' e'
   esattamente la pagina che vede lei. Senza una fascia che lo grida, pero', un
   admin puo' scambiare i numeri di un'altra per i propri. */
.mia-altrui {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  margin-bottom: 14px; padding: 10px 14px; border-radius: 10px;
  background: var(--warn-bg); color: var(--warn-fg); font-size: 12.5px;
}
.mia-altrui b { font-weight: 700; }
.mia-altrui a { color: inherit; font-weight: 600; }

/* L'elenco di chi guardare, per un admin che qui numeri suoi non ne ha. */
.mia-scegli-tit { max-width: 74ch; margin: 0 0 12px; }
.mia-scegli { display: flex; flex-wrap: wrap; gap: 8px; }
.mia-scegli a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--ink); font-size: 12.5px; font-weight: 600;
}
.mia-scegli a:hover { background: var(--hover); border-color: var(--border-2); }

/* Il pulsante "Compila il report di oggi" sta a DESTRA nella testata della carta
   (Leo, 28/08). `.pn-tab-head` va a capo quando il primo blocco chiede tutta la
   larghezza — e qui il sottotitolo e' lungo, quindi il pulsante finiva sotto, a
   sinistra. Il blocco di testo diventa restringibile e il pulsante no: cosi'
   restano sulla stessa riga finche' c'e' spazio, e sul telefono vanno a capo
   come tutto il resto. */
#miaRep .pn-tab-head > div:first-child { flex: 1 1 340px; min-width: 0; }
#miaRepBtn { flex: none; }

/* La pastiglia .mia-sc (lo scarto dalla media) NON C'È PIÙ: il 2/9 Leo ha fatto
   togliere ogni scritta sulla media dalle due viste personali, e con le scritte se
   n'è andata anche lei. Regole cancellate, non commentate: il CSS morto si toglie.
   La media continua a esistere sotto — decide il colore e il riempimento dei
   binari — ma non si scrive più da nessuna parte. */

/* ── "Dove sei": il medagliere ────────────────────────────────────────────────
   Erano quattro pastiglie di testo tutte uguali (28/08, Leo: "fammelo piu' carino
   con un podio o medaglie o qualcosa insomma di piu' bellino"). Un podio VERO qui
   non si puo' fare: mostrerebbe chi sta sui gradini accanto, e i nomi delle altre
   sono proprio la cosa che questa schermata non dice. Le medaglie risolvono lo
   stesso bisogno — si vede a colpo d'occhio quanto vale ogni posizione — senza
   tirare in ballo nessuno: il metallo e' del posto, non della persona.
   ⚠️ Oro/argento/bronzo sono colori di METALLI, non della palette: restano gli
   stessi nei due temi e nei tre marchi, come le medaglie vere. Il numero sopra
   e' scuro proprio perche' il disco e' chiaro in tutti e due i temi. */
/* Sempre DUE per riga, non auto-fit: dal 28/08 la carta sta accanto al grafico
   (.bm-due) e con l'auto-fit veniva una riga da tre e una da uno — spaiata, e
   la carta restava molto piu' bassa del grafico. Due e due sta in colonna col
   disegno accanto, e sul telefono e' gia' il taglio che veniva da solo. */
.mia-medaglie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 2px 20px 20px; }
.mia-med {
  text-align: center; padding: 16px 10px 14px; border-radius: 14px;
  background: var(--surface-2b); border: 1px solid var(--line);
}
/* la migliore delle quattro si stacca appena dal fondo: e' la prima che si guarda */
.mia-med.oro { background: var(--surface); border-color: var(--line-2); box-shadow: var(--shadow-pill); }
.mia-med-disco {
  width: 58px; height: 58px; margin: 0 auto 11px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  box-shadow: inset 0 -3px 7px rgba(0, 0, 0, 0.20), inset 0 2px 5px rgba(255, 255, 255, 0.45),
              0 3px 9px rgba(0, 0, 0, 0.16);
}
.mia-med-disco b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.mia-med-disco sup { font-size: 10px; font-weight: 700; vertical-align: super; }
/* il cerchietto inciso dentro il bordo: e' quello che lo fa leggere "medaglia"
   invece che "cerchio colorato" */
.mia-med-disco::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.40);
}
.mia-med.oro .mia-med-disco     { background: linear-gradient(145deg, #f8e69a, #dfae2b 52%, #a97d0e); color: #4a3606; }
.mia-med.argento .mia-med-disco { background: linear-gradient(145deg, #f4f7fa, #c2ccd6 52%, #8c97a3); color: #333a42; }
.mia-med.bronzo .mia-med-disco  { background: linear-gradient(145deg, #f2cfa8, #cd8a48 52%, #96591f); color: #40230b; }
/* Dal quarto posto in giu' niente metallo: un cerchio vuoto col numero dentro.
   Dare una medaglia a tutti vorrebbe dire non darne a nessuno. */
.mia-med.fuori .mia-med-disco {
  background: var(--surface-3); border: 1.5px solid var(--line-2); color: var(--ink-2); box-shadow: none;
}
.mia-med.fuori .mia-med-disco::after { border-color: transparent; }
.mia-med-lab { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.mia-med-sub { margin-top: 3px; font-size: 11px; color: var(--muted); }

/* ── il funnel in fondo al pop-up del centro ─────────────────────────────────
   Una fascia sola, dopo le campagne: il fondo della finestra e' il posto dove si
   guarda "e allora quante persone sono arrivate in centro". Fondo appena
   staccato, come il piede delle altre carte. */
.dr-funnel {
  padding: 16px 24px 22px; border-top: 1px solid var(--line);
  background: var(--surface-2b);
  border-radius: 0 0 18px 18px;
}
.dr-funnel-testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.dr-funnel-testa h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.dr-funnel-soldi { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dr-funnel-soldi b { color: var(--ink); font-weight: 600; }
/* ⚠️ altezza dall'attributo e preserveAspectRatio nel markup: un <svg> con solo
   la larghezza al 100% si stira e porta con se' il corpo del testo — 12,5px
   diventano 18 e la fascia non parla piu' la lingua del resto della finestra. */
.dr-funnel-tela { display: block; width: 100%; }
.dr-funnel-tela text { font-family: var(--font-ui); }

@media (max-width: 640px) {
  .dr-funnel { padding: 14px 14px 18px; border-radius: 0; }
}


/* ── il caricamento si deve vedere ────────────────────────────────────────
   Cambiando attribuzione la schermata restava identica per due o tre secondi,
   coi numeri vecchi ancora a video: si spegne il corpo (così è chiaro che
   quello che si legge non è più valido) e si accende una rotellina accanto
   all'interruttore appena premuto. `pointer-events: none` perché mentre carica
   un secondo clic non farebbe che rimettersi in coda. */
.in-carico { opacity: .38; pointer-events: none; transition: opacity .12s; }
.in-carico-slot { position: relative; }
.in-carico-slot::after {
  content: ''; position: absolute; right: -24px; top: 50%; margin-top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--moneta); border: 1px solid var(--border);
  animation: moneta .9s linear infinite;
}
.in-carico-slot button { opacity: .55; }

.mg-avviso {
  padding: 11px 14px; margin-bottom: 16px; border-radius: 12px;
  background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--bad-bd);
  font-size: 12.5px;
}
/* la meta' che non c'e': piu' pallida del "—" di un dato mancante, perche' qui
   non manca il numero — manca proprio la riga da cui leggerlo */
.mg-nd { color: var(--muted); opacity: .55; }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  DRILL-DOWN DEL CENTRO — la finestra sopra la Panoramica                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Il clic su una riga non porta piu' via: apre il centro SOPRA la tabella, che
   resta dov'era. Dentro, nell'ordine: chi e' (testata), come va (i KPI, gli
   stessi numeri della riga cliccata), cosa sappiamo di lui (la scheda cliente,
   disegnata da scheda.js), e dove finiscono i soldi (l'albero campagne). */
.dr-velo {
  position: fixed; inset: 0; z-index: 80;
  background: var(--veil);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.dr-card {
  width: 100%; max-width: 980px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-pop);
  /* ⚠️ niente overflow:hidden, anche se il disegno ce l'ha: dentro la scheda
     ci sono i fumetti ⓘ e il pannellino dei giorni di servizio, che sono
     `position: absolute` e verrebbero tagliati dal bordo. Gli angoli tondi
     reggono lo stesso — nessuna fascia interna ha un fondo diverso dalla
     card ai due capi. */
}

.dr-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dr-head h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.dr-meta { margin: 0; font-size: 12.5px; color: var(--muted); }
.dr-head-az { display: flex; align-items: center; gap: 10px; flex: none; }
/* La pagina intera non sparisce: ha il funnel del periodo e le tre tab, che qui
   sono un albero solo. Serve anche a farsi un link da mandare a qualcuno. */
.dr-intera { font-size: 12.5px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.dr-x {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  font: inherit; font-size: 14px; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--muted);
}
.dr-x:hover { background: var(--surface-3); color: var(--ink); }

.dr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); border-bottom: 1px solid var(--line); }
.dr-kpi { padding: 13px 16px; border-left: 1px solid var(--line); min-width: 0; }
.dr-kpi:first-child { border-left: none; }
.dr-kpi .l { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.dr-kpi .v { margin-top: 6px; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── la scheda cliente, appiattita ────────────────────────────────────────
   Il markup lo fa scheda.js (la stessa di #/marketing, con dentro le due
   scritture verso Notion): qui si toglie solo il vestito da card, perche' la
   card e' gia' la finestra. Le voci passano da colonna a riga — etichetta a
   sinistra, valore a destra — che a due colonne si legge molto piu' in fretta. */
.dr-scheda { border-bottom: 1px solid var(--line); }
/* Nella finestra dell'azienda della beauty (mia.js) la scheda e' l'ULTIMA cosa
   della card: il filetto di chiusura resterebbe sospeso sopra il bordo tondo. */
.dr-card > .dr-scheda:last-child { border-bottom: none; }
.dr-scheda .sc-card { background: none; border: none; border-radius: 0; box-shadow: none; margin: 0; padding: 16px 24px 18px; }
.dr-scheda .sc-head h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.dr-scheda .sc-griglia {
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 0 26px;
  margin-top: 12px; padding-top: 11px;
}
.dr-scheda .sc-voce {
  flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line-3);
}
.dr-scheda .sc-k { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.dr-scheda .sc-v { font-size: 12.5px; font-weight: 600; text-align: right; min-width: 0; }
/* la fascia dello stato attivita': l'unica cosa che da qui si SCRIVE */
.dr-scheda .sc-stato, .dr-scheda .sc-edit { margin: 10px 0 0; }

.dr-tab-head { padding: 16px 24px 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dr-tab-head h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.dr-tab-head .nota { font-size: 11.5px; color: var(--muted); }
/* ⚠️ Niente padding ORIZZONTALE sul contenitore che scorre: `left: 0` di una
   cella sticky si appiccica al bordo dello scrollport, non al bordo del
   padding, e quei 24px diventano una fessura in cui si vedono passare le
   colonne dietro il nome. Il margine se lo prendono le righe: a sinistra la
   cella sticky (che quindi resta staccata dal bordo anche da ferma), a destra
   la riga stessa, che è larga quanto il suo contenuto. */
.dr-tab { padding: 6px 0 22px; overflow-x: auto; }

/* Ventidue colonne dentro una finestra: la riga si allarga oltre la card e
   scorre di lato, ma la colonna del NOME resta ferma a sinistra — senza,
   arrivati al ricavo non si sa più di quale annuncio si stia leggendo.
   Le larghezze le scrive il JS (stanno nella definizione delle colonne, dove
   c'è anche il formato): qui restano solo allineamento e cornice. */
.dr-fasce, .dr-intestazione, .dr-riga { display: flex; align-items: center; width: max-content; min-width: 100%; gap: 10px; padding-right: 24px; }
.dr-fasce {
  padding: 7px 0 5px; border-bottom: 1px solid var(--line-2b);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.dr-fasce > .f { flex: none; text-align: left; border-left: 1px solid var(--line-2); padding-left: 8px; }
.dr-intestazione {
  padding: 8px 0; border-bottom: 1px solid var(--line-2);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.dr-riga { padding: 9px 0; border-bottom: 1px solid var(--line-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dr-riga.apribile { cursor: pointer; }
.dr-riga.apribile:hover { background: var(--hover); }
.dr-fasce > .nome, .dr-intestazione > .nome, .dr-riga > .nome {
  position: sticky; left: 0; z-index: 1; flex: none;
  width: 284px; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: var(--surface); padding-left: 24px; padding-right: 10px;
}
.dr-riga.apribile:hover > .nome { background-color: var(--surface); background-image: linear-gradient(var(--hover), var(--hover)); }
.dr-fasce > .nome, .dr-intestazione > .nome { background: var(--surface); }
.dr-riga .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-riga .dot { width: 6px; height: 6px; border-radius: 2px; flex: none; }
.dr-riga .caret { flex: none; width: 10px; font-size: 10px; color: var(--muted); transition: transform .12s; }
.dr-riga .caret.giu { transform: rotate(90deg); }
.dr-intestazione > .c, .dr-riga > .c { flex: none; text-align: right; }
/* il numero che non c'è: più pallido di un valore vero, così non si legge come uno zero */
.dr-nd { color: var(--muted); opacity: .55; }
.dr-vuoto { padding: 26px 24px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ── lo scheletro di quello che sta arrivando ────────────────────────────────
   Una barra grigia al posto di ogni numero, dentro le stesse righe e le stesse
   larghezze del contenuto vero (le scrive il JS, come per le righe vere). Non è
   un vezzo: la finestra del centro si apriva alta una riga di testo e all'arrivo
   dei dati cresceva di colpo, portandosi giù funnel e bacheca da sotto il punto
   in cui si stava guardando.
   Ferma di proposito, senza pulsare: un'animazione andrebbe spenta con
   prefers-reduced-motion, e una barra immobile dice già tutto. */
.sk-barra {
  display: inline-block; width: 70%; height: 9px; border-radius: 3px;
  background: var(--line-2); opacity: .7; vertical-align: middle;
}
.dr-scheletro { pointer-events: none; }

/* ── le tre schede del drill-down (26/08) ────────────────────────────────────
   Scheda cliente · Analisi · Esperimenti. La fila riusa .lead-tabs, la lingua
   dei comandi di tutta l'app; qui perde i margini e prende il filetto sotto,
   perché fa da confine fra i KPI e il pannello. */
.dr-tabs { margin: 0; padding: 12px 24px; border-bottom: 1px solid var(--line); }
/* la scheda cliente aveva un filetto suo sotto (serviva quando tutto era in
   colonna): dentro un pannello che finisce lì raddoppierebbe il bordo */
.dr-pann .dr-scheda { border-bottom: none; }

/* la bacheca dei lead, in fondo ad Analisi: il board .bc-* è lo stesso del
   pop-up esiti di #/beauty, qui cambia solo la cornice */
.dr-bacheca { padding: 16px 24px 22px; border-top: 1px solid var(--line); }
.dr-bacheca-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dr-bacheca-testa h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.dr-bacheca-tot { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  /* Su telefono la finestra e' la pagina: bordi a filo e niente velo intorno,
     o dei 375px ne restavano 327 per una tabella che ne chiede 540. */
  .dr-velo { padding: 0; }
  .dr-card { max-width: none; border-radius: 0; border: none; min-height: 100%; }
  .dr-head { padding: 14px 14px 12px; position: sticky; top: 0; z-index: 2; background: var(--surface); }
  .dr-scheda .sc-card { padding: 14px; }
  .dr-tab-head { padding: 14px 14px 6px; }
  .dr-tab { padding: 6px 0 20px; }
  .dr-fasce, .dr-intestazione, .dr-riga { padding-right: 14px; }
  .dr-fasce > .nome, .dr-intestazione > .nome, .dr-riga > .nome { width: 214px; padding-left: 14px; }
  .dr-kpi { padding: 11px 13px; }
  .dr-tabs { padding: 10px 14px; }
  .dr-bacheca { padding: 14px 14px 18px; }
}

/* ── i bottoni della scheda cliente, col vestito nuovo ──────────────────────
   "Salva su Notion" era una pastiglia col gradiente e gli angoli tondi da 999px:
   l'ultimo comando rimasto del linguaggio vecchio, e per giunta dentro il
   drill-down ridisegnato. Adesso e' pieno di brand con gli angoli da 9px, come
   "+ Assegna task" e "Salva" in Task, e i secondari sono bordati come .tk-btn.
   .btn-back la usano anche il "← Indietro" del drill-down a pagina intera e i
   comandi dei giorni di servizio: cambiano tutti, ed e' voluto. */
.btn-back { border-radius: 9px; border-color: var(--border-2); color: var(--ink-2); }
.btn-back:hover { background: var(--surface-3); color: var(--ink); }
.sc-primario { background: var(--brand); color: #fff; border-color: transparent; }
.sc-primario:hover { background: var(--brand-deep); color: #fff; filter: none; }
.sc-primario[disabled] { opacity: .55; cursor: default; }
/* il "+" dei giorni di servizio: tondo resta giusto (e' un'icona, non un'azione
   con un'etichetta), cambia solo il pieno acceso */
.sc-piu { color: var(--brand); border-color: var(--border-2); }
.sc-piu:hover { border-color: var(--brand); }
.sc-piu.on { background: var(--brand); color: #fff; border-color: transparent; }

/* ── "Le mie task" dentro Project Manager ────────────────────────────────────
   Non è la sezione Task in miniatura: è la prima cosa che deve stare sotto gli
   occhi di chi apre la schermata — cosa tocca a me oggi. Righe compatte, in
   cima alla pagina, e per fare qualcosa si va di là. */
.mg-tk {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 20px; border-top: 1px solid var(--line-3);
  font-size: 12.5px; cursor: pointer;
}
.mg-tk:hover { background: var(--hover); }
/* 🔔 Gli avvisi automatici (migration 124-126) sono NOTIFICHE, non task: niente
   data, niente ora, niente stato — icona tonda, la frase, il perché sotto e a
   destra da quanto sono lì. Decisione di Leo il 27/8: "devono essere come se
   fosse una notifica". Stanno sempre in cima alla lista e fuori dalle linguette:
   con la loro data di scadenza (la domenica) sarebbero finiti solo dentro
   "Prossime", cioè nascosti. */
.mg-nt { display: flex; align-items: flex-start; gap: 12px; padding: 11px 20px;
  border-top: 1px solid var(--line-3); cursor: pointer; }
.mg-nt:hover { background: var(--hover); }
.mg-nt .ic { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--auto-bg-h); color: var(--bad); }
.mg-nt.r-muti .ic { background: var(--warn-bg); color: var(--warn); }
.mg-nt.r-senzaspesa .ic { background: var(--off-bg); color: var(--off-fg); font-weight: 400; }
/* il report di oggi (dopo le 17): ambra come le scadenze, non rossa — non è un
   problema trovato dal sistema, è una cosa da fare prima di staccare */
.mg-nt.r-report .ic { background: var(--warn-bg); color: var(--warn); font-weight: 400; }
.mg-nt .c { flex: 1; min-width: 0; }
.mg-nt .t { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mg-nt .m { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.mg-nt .eta { flex: none; font-size: 10.5px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
/* la × per nascondere l'avviso: smorzata finché non ci passi sopra, o quattro
   crocette rosse in colonna sarebbero più rumorose degli avvisi stessi */
.mg-nt-x { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0;
  background: none; color: var(--muted); font: 400 15px/1 var(--font-ui); cursor: pointer;
  opacity: .45; transition: opacity .12s ease, background .12s ease, color .12s ease; }
.mg-nt:hover .mg-nt-x { opacity: 1; }
.mg-nt-x:hover, .mg-nt-x:focus-visible { background: var(--auto-bg-h); color: var(--bad-text); opacity: 1; outline: none; }
.mg-nt-x[disabled] { opacity: .3; cursor: default; }
/* l'avviso aperto: è lui che sta filtrando la tabella qui sotto, e si vede —
   filetto blu come i tagli attivi, non rosso (rosso qui vuol dire "problema") */
.mg-nt.on { background: var(--auto-bg-h); box-shadow: inset 3px 0 0 var(--brand); }
.mg-nt.on .t { color: var(--brand); }
.mg-tk > .q { flex: none; width: 74px; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-tk > .c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mg-tk .t { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-tk .m { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-tk > .s { flex: none; }

/* "Espandi · altre 12": la lista nasce richiusa a cinque righe, perché sotto ci
   sono le tabelle dei centri, che sono il resto della schermata. A tutta
   larghezza e non una scritta in un angolo: è il fondo della lista, e lì
   l'occhio ci arriva scorrendo. */
.mg-altre {
  display: block; width: 100%; padding: 10px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: none; border: none; border-top: 1px solid var(--line-3);
}
.mg-altre:hover { background: var(--hover); color: var(--ink); }
.mg-altre-nota { padding: 0 20px 10px; font-size: 11.5px; color: var(--muted); }

/* ── «Da approvare»: le task finite che aspettano chi le ha assegnate ──────
   3/9/2026, richiesta di Lorenzo. La riga vive nella stessa lista delle altre
   (.mg-tk) e cambia solo quello che deve: al posto dell'ora un tondo con le
   iniziali di chi l'ha fatta, al posto dello stato le due uscite. */
.mg-ap { align-items: flex-start; }
.mg-ini {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; background: var(--warn-bg); color: var(--warn-fg);
}
.mg-ap > .c { gap: 5px; }
.mg-ap-az { flex: none; display: flex; gap: 7px; align-items: center; }
/* il campo del perché prende il posto dei due bottoni, nello stesso spazio */
.mg-ap-perche {
  font: inherit; font-size: 12px; padding: 6px 10px; min-width: 220px;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.mg-ap-perche:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--brand); }
.mg-ap-ko { font-size: 11.5px; color: var(--bad); max-width: 260px; }
/* La pastiglia della linguetta: ambra e non rossa — è gente che aspetta una
   risposta, non un allarme. Zero non si scrive (lo fa già il JS). */
.mg-badge {
  display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-fg);
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.mg-nt.r-appr .ic { background: var(--warn-bg); color: var(--warn); }

@media (max-width: 640px) {
  .mg-tk { padding: 9px 13px; gap: 10px; }
  .mg-tk > .q { width: 56px; }
  .mg-altre-nota { padding-left: 13px; padding-right: 13px; }
  /* sotto i 640 i due bottoni non stanno accanto al titolo: vanno sotto, e la
     riga diventa alta il doppio invece di spingere la pagina di lato */
  .mg-ap { flex-wrap: wrap; }
  .mg-ap-az { width: 100%; padding-left: 40px; }
  .mg-ap-perche { min-width: 0; flex: 1; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  TASK E CALENDARI — il vestito nuovo                                     ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Era l'ultima sezione grossa col corpo vecchio: pastiglie col gradiente, file
   di tab sciolte, pannello e calendario con filetti spessi. Qui viene ridipinta
   col linguaggio del redesign senza toccare il markup di task.js — le regole
   originali stanno più su nel foglio, queste vengono dopo e vincono.

   Dal 4/9 alcune di queste regole sono FUSE con la loro base, che non sta piu'
   in alto: .lead-tabs, .lead-tabs.seg-tabs, .tk-tabs .tk-count, .tk-seg, .tk-panel,
   .tk-panel-head, .tk-scrim, .cal-etichetta. Per quelle la regola qui sotto e'
   l'unica (prima le dichiarazioni di base, poi la ridipintura); le altre restano
   ridipinture di regole scritte piu' su.

   Le file di tab (.lead-tabs) le usano anche Beauty, Vendita e Sauron: la
   ridipintura vale per tutte, ed è voluta. Erano l'ultimo posto dove restava il
   gradiente sui comandi. */
.lead-tabs {
  display: flex;
  gap: 3px; padding: 3px; margin: 10px 0 6px;
  background: var(--surface-3); border-radius: 10px; width: max-content; max-width: 100%;
}
.lead-tabs button {
  border: none; border-radius: 7px; font-size: 12.5px; font-weight: 600; padding: 6px 13px;
  color: var(--ink-2);
}
.lead-tabs button:hover { background: none; color: var(--ink); }
.lead-tabs button.active { color: var(--pill-fg); background: var(--pill-on); box-shadow: var(--shadow-pill); }
/* Sotto-tab: a sinistra e sopra il titolo, dentro una cornice, così non si
   confondono con la barra dei tab della sezione (che è a filo pagina). */
.lead-tabs.seg-tabs {
  display: inline-flex; gap: 3px; border-radius: 999px; background: var(--surface-1);
  margin: 0 0 14px;
  border: none; padding: 3px;
}
.lead-tabs.seg-tabs button { padding: 6px 13px; font-size: 12.5px; }
/* il contatore dentro la pastiglia: su fondo bianco il bianco su bianco non si legge */
.tk-tabs .tk-count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--line-2); color: var(--muted-2);
}
.tk-tabs button.active .tk-count { background: var(--nav-bg); color: var(--nav-fg); }

/* comandi: pieno di brand, non gradiente con l'ombra colorata */
.tk-btn-pri {
  background: var(--brand); color: #fff; border-color: transparent; box-shadow: none;
}
.tk-btn-pri:hover { background: var(--brand-deep); filter: none; }
.tk-btn-danger { color: var(--bad); border-color: var(--bad-bd); }
.cal-nav, .tk-btn { border-radius: 9px; border-color: var(--border-2); }
.cal-nav:hover, .tk-btn:hover { background: var(--surface-3); }

/* i segmentati dentro il pannello e il form */
/* ⚠️ `flex-wrap` esplicito, e vale anche per il segmentato del form task: senza
   il wrap la fila "Si ripete" non va a capo, e sul telefono usciva dal bordo
   della finestra, invisibile. */
.tk-seg {
  display: inline-flex; flex-wrap: wrap;
  gap: 3px; padding: 3px; background: var(--surface-3); border-radius: 10px; width: max-content; max-width: 100%;
}
.tk-seg button { border: none; border-radius: 7px; padding: 6px 13px; color: var(--ink-2); }
.tk-seg button:hover { background: none; color: var(--ink); }
.tk-seg button.sel { background: var(--pill-on); color: var(--pill-fg); border-color: transparent; box-shadow: var(--shadow-pill); }
/* la variante a radio (le tre tipologie nel form) usa <label>, non <button> */
.tk-seg label { border-radius: 7px; border-color: transparent; padding: 6px 13px; }
.tk-seg label:has(input:checked) { background: var(--pill-on); color: var(--pill-fg); border-color: transparent; box-shadow: var(--shadow-pill); }

/* la lista delle task: righe come quelle delle tabelle nuove */
.tk-row { border-bottom: 1px solid var(--line-3); }
.tk-row:first-child { border-top: 1px solid var(--line); }
.tk-row:hover { background: var(--hover); }
.tk-chip { border-radius: 6px; }

/* il pannello di dettaglio: la stessa carta del drill-down, non un cassetto
   con l'ombra nera */
.tk-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 46; width: 430px; max-width: 100%;
  overflow-y: auto; transform: translateX(102%); transition: transform .18s ease-out;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
}
.tk-panel-head {
  position: relative;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--line);
}
.tk-panel-head h3 { font-family: var(--font-ui); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.tk-scrim {
  position: fixed; inset: 0; z-index: 45; display: none; backdrop-filter: blur(2px);
  background: var(--veil);
}

/* la testata della card: come quella delle tabelle ridisegnate */
.mk-head h2 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.018em; }
.cal-etichetta { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cal-rail { border-right: 1px solid var(--line); }

@media print {
  body { background: #fff; }
  body::before { display: none; }
  header, #filterBar, #filterWrap, .lead-tabs, .tk-btn, .pc-x, #tooltip, footer, .filters { display: none !important; }
  .card, .pc-blocco, .tile, .kpi-group { box-shadow: none; break-inside: avoid; }
  .table-scroll { max-height: none; overflow: visible; }
  .pc-brief h4, .pc-brief h3 { break-after: avoid; }
}

/* ── DELIVERY MANAGER (js/sections/delivery.js) ───────────────────────────
   Il numero fuori soglia e il 📌 della tabella.
   Colori dai token del tema: niente tinte nuove, la sezione deve sembrare
   nata qui. */
.dv-warn { color: var(--warn); font-weight: 600; }
/* il 📌 nella tabella: solo simbolo, niente cornice da bottone. Spento è
   grigio; ACCESO (.on, il centro è pinnato in cima) è a colori e pieno — e
   quel clic lo TOGLIE, quindi si deve vedere che è uno stato, non un invito */
.dv-pin-btn {
  background: none; border: none; cursor: pointer; padding: 0 4px;
  filter: grayscale(1); opacity: 0.45; font-size: 14px;
}
.dv-pin-btn:hover { filter: none; opacity: 1; }
.dv-pin-btn.on { filter: none; opacity: 1; }
.dv-pinnato { padding: 0 4px; font-size: 14px; cursor: help; }
/* da Project Manager il 📌 già messo è un link a #/delivery */
a.dv-pinnato { cursor: pointer; text-decoration: none; }

/* ── Esperimenti — il diario nel drill-down del centro (esperimenti.js) ──────
   Una card per esperimento: badge di stato, titolo, periodo, poi (a chiusura)
   l'esito con le note e sotto le task agganciate. I colori sono i token
   good/bad/warn già in uso nelle tabelle: stesso verde, stesso rosso. */
.ex-wrap { padding: 16px 24px 24px; }
.ex-testa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ex-testa h4 { margin: 0; font-size: 14px; }
.ex-conta { font-size: 12.5px; color: var(--muted); margin-right: auto; }
.ex-spazio { flex: 1; }

.ex-btn {
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary);
  border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.ex-btn:hover { background: var(--surface-3); }
.ex-btn-pri { background: var(--brand); border-color: var(--brand); color: #fff; }
.ex-btn-pri:hover { background: var(--brand); filter: brightness(1.08); }
.ex-btn-mini { padding: 3px 10px; font-size: 12px; }

.ex-wrap input[type=text], .ex-wrap input[type=date], .ex-wrap textarea, .ex-wrap select {
  font: inherit; font-size: 13px; padding: 8px 11px;
  background: var(--page); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
}
.ex-wrap textarea { resize: vertical; width: 100%; }

.ex-form { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.ex-form.hidden { display: none; }
.ex-form-date { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.ex-form-date label { display: flex; align-items: center; gap: 6px; }
.ex-durate { display: flex; gap: 4px; }
.ex-durate button {
  border: 1px solid var(--border); background: transparent; color: var(--ink-2);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.ex-durate button:hover { background: var(--surface-3); color: var(--ink); }

.ex-card { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.ex-riga1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ex-titolo { font-size: 14px; }
.ex-quando { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ex-badge {
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 10px;
  white-space: nowrap; align-self: center;
}
.ex-b-ok   { background: var(--good-bg); color: var(--good); }
.ex-b-ko   { background: var(--bad-bg);  color: var(--bad); }
.ex-b-scad { background: var(--warn-bg); color: var(--warn-fg); }
.ex-b-corso{ background: var(--surface-3); color: var(--ink-2); }
.ex-x {
  border: none; background: transparent; color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 7px;
}
.ex-x:hover { color: var(--bad); background: var(--bad-bg); }
.ex-desc { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); text-wrap: pretty; }
.ex-firma { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }

/* l'esito, quando c'è: il bordo a sinistra dice il colore prima delle parole */
.ex-esito { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.ex-e-ok { background: var(--good-bg); border-left: 3px solid var(--good); }
.ex-e-ko { background: var(--bad-bg);  border-left: 3px solid var(--bad); }
.ex-esito-note { color: var(--ink); white-space: pre-wrap; }
.ex-esito .ex-firma { margin-top: 4px; }

.ex-card > .ex-btn { margin-top: 10px; }
.ex-chiudi { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line-2); padding-top: 10px; }
.ex-chiudi.hidden { display: none; }
.ex-scelta { display: flex; gap: 8px; }
.ex-scelta button {
  border: 1px solid var(--border); background: var(--page); color: var(--ink-2);
  border-radius: 9px; padding: 6px 14px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.ex-scelta button:first-child.attiva { background: var(--good-bg); border-color: var(--good); color: var(--good); font-weight: 700; }
.ex-scelta button:last-child.attiva  { background: var(--bad-bg);  border-color: var(--bad);  color: var(--bad);  font-weight: 700; }

.ex-task { margin-top: 12px; border-top: 1px solid var(--line-3); padding-top: 8px; }
.ex-task-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.ex-task-riga { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.ex-t-stato { color: var(--muted); }
.ex-t-fatta .ex-t-stato { color: var(--good); }
.ex-t-fatta .ex-t-titolo { text-decoration: line-through; color: var(--muted); }
.ex-t-meta { font-size: 11.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.ex-task-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ex-task-form.hidden { display: none; }
.ex-task-form input[type=text] { flex: 1; min-width: 180px; }
.ex-msg { font-size: 12.5px; color: var(--bad); }
.ex-msg.hidden { display: none; }

/* ── Le due uscite di una scadenza: l'esito, o il posticipo (migration 165) ──
   Stanno sulla stessa riga perche' sono la stessa domanda: questo esperimento
   e' finito, che si fa. Il posticipo apre un secondo riquadro come quello della
   chiusura (.ex-chiudi, che infatti si riusa) e chiede la motivazione. */
.ex-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* Chi ha in mano l'esito e per quando: la task nasce con l'esperimento
   (migration 166), e chi lo apre deve vedere subito che e' finita nella lista
   di qualcuno. Una riga sotto i bottoni, non una voce in mezzo alle altre task:
   non e' lavoro aggiunto, e' la scadenza stessa. */
.ex-prom { margin: 7px 0 0; font-size: 11.5px; color: var(--muted); }
/* la pastiglia in testa alla carta: quante volte la fine e' stata spostata.
   Il colore e' quello dell'attesa (--warn), lo stesso del badge "Da concludere":
   un esperimento posticipato tre volte e' una risposta che non arriva. */
.ex-pror-tag {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px;
  background: var(--warn-bg); color: var(--warn-fg);
}
/* Il registro dei posticipi: e' diario anche lui, quindi si legge sotto
   l'esperimento e sopra l'esito, in ordine di tempo. */
.ex-proroghe { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.ex-pror { border-left: 2px solid var(--line-2); padding-left: 10px; }
.ex-pror-r { font-size: 11.5px; color: var(--muted); }
.ex-pror-r .ex-firma { display: inline; margin: 0 0 0 6px; }
.ex-pror-m { font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; text-wrap: pretty; }

/* ── La vista Esperimenti dentro Task: lo stesso diario, di tutti i clienti ──
   E' lo stesso modulo della tab del drill-down (js/esperimenti.js con centro
   null), quindi carte, badge e form sono gia' vestiti. Qui c'e' solo quello
   che nella tab non esiste: la fascia dei filtri (con dentro la ricerca e il
   tasto del nuovo esperimento — una riga, non due: i numeri stanno gia' sulle
   linguette) e la pastiglia del cliente su ogni carta. Il padding va a zero:
   il diario sta dentro #tkList, che vive gia' dentro la .card della sezione. */
.ex-sezione { padding: 4px 0 0; }
.ex-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.ex-barra .ex-tabs { margin: 0; }
.ex-cerca {
  margin-left: auto; min-width: 180px; flex: 0 1 280px;
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px;
  font: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink);
}
/* Il cliente di ogni esperimento. E' un bottone perche' fa qualcosa: mette il
   suo nome nella ricerca, cioe' lascia a video solo il suo diario. 24px di
   altezza minima li fa il flex, senza pseudo-elementi (vedi il blocco dei
   bersagli piu' sotto: qui non serve, il bottone e' gia' abbastanza alto). */
.ex-centro {
  display: inline-flex; align-items: center; min-height: 24px;
  border: 1px solid var(--border); background: var(--page); color: var(--ink-2);
  border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}
.ex-centro:hover { color: var(--series-1); border-color: var(--series-1); }
/* la tendina del cliente nel form del nuovo esperimento: nella tab non c'e',
   li' il cliente e' quello della finestra aperta */
.ex-campo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.ex-campo select { flex: 1; min-width: 0; }

/* ── DRILL-DOWN: la riga delle schede col periodo, e l'andamento ─────────────
   Le schede a sinistra e il periodo a destra stanno nella STESSA fascia: sono
   la stessa domanda in due meta' — che cosa guardo, e di quando. Il bordo e il
   padding che erano su .dr-tabs passano alla riga che le contiene, o si
   sommerebbero a quelli della fascia. */
.dr-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 12px 24px; border-bottom: 1px solid var(--line);
}
.dr-barra .dr-tabs { margin: 0; padding: 0; border-bottom: none; }
.dr-periodo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.dr-periodo input[type=date] {
  font: inherit; font-size: 12px; padding: 4px 7px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--ink);
}
.dr-periodo .applica {
  font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-3); color: var(--ink-2);
}
.dr-periodo .applica:hover { border-color: var(--border-hover); color: var(--ink); }
/* Il ritorno al periodo della pagina compare SOLO quando i due divergono:
   finche' combaciano non c'e' niente da annullare, e un bottone spento sarebbe
   soltanto una cosa in piu' da leggere. */
.dr-periodo .torna {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1;
  padding: 5px 9px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--brand);
}
.dr-periodo .torna:hover { border-color: var(--border-2); }
.dr-periodo .torna.hidden { display: none; }

.dr-and { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.and-testa { padding: 16px 24px 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.and-testa-2 { padding-top: 4px; }
.and-testa h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.and-testa .nota { font-size: 11.5px; color: var(--muted); }
.and-leg { margin: 0; }
.and-leg em { font-style: normal; color: var(--muted); }
/* la linea nella legenda e' una LINEA, non un quadratino: il segno deve essere
   la stessa cosa che si vede nel disegno */
.and-leg .swatch.linea { height: 3px; border-radius: 1px; }
.and-tela { padding: 6px 20px 4px; }
.and-piede { padding: 8px 24px 0; font-size: 11.5px; color: var(--muted); }
.and-piede b { color: var(--ink-2); font-weight: 600; }

/* ── Sales Manager · "Dal lead alla firma" ─────────────────────────────────
   Riusa la fascia della Panoramica (.pn-funnel / .pn-step) dentro una card,
   come fa gia' `.mia-tiles`: sono quattro valori singoli, e una barra sola si
   legge peggio del numero.
   🚨 Colonne FISSE a 4 e non auto-fit: i numeri sono esattamente quattro e
      devono stare in una riga sola. Con l'auto-fit da minmax(164px) sotto i
      ~700px ne restava uno orfano largo tutta la card — la stessa forma gia'
      bocciata sulla fascia di Beauty Manager. */
/* Le tappe del viaggio del lead sono SEI tessere dall'01/09/2026 (lead entrati ·
   primo squillo · app. fissato · data appuntamento · vendita · CR lead): erano quattro
   e la quinta andava a capo da sola. Sotto i 1240px si spezza in tre + tre, che
   e' meglio di sei colonne da 150px con le etichette tronche. Sotto i 900px,
   due e due. */
.vd-tempi { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1240px) { .vd-tempi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .vd-tempi { grid-template-columns: repeat(2, 1fr); } }

/* Le tre distribuzioni AFFIANCATE, non impilate (Leo, 01/09: "rivedi i 3 grafici
   in modo che occupino meno spazio"). Erano due colonnine di barrette piu' un
   grafico SVG grande, uno sotto l'altro: mezza pagina. Adesso e' una riga di tre
   istogrammi in percentuale, divisi da un filetto verticale come le tessere. */
.vd-forme { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.vd-forme:empty { display: none; border-top: none; }
.vd-forma { min-width: 0; padding: 14px 18px 16px; border-left: 1px solid var(--line); }
.vd-forma:first-child { border-left: none; }
.vd-forma-cap { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 11px; }
/* il denominatore accanto al titolo NON e' maiuscolo spaziato: e' una didascalia,
   e in maiuscolo competerebbe col titolo invece di spiegarlo */
.vd-forma-cap em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.vd-ist { display: flex; align-items: flex-end; gap: 5px; height: 116px; }
.vd-ist-c { flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.vd-ist-c b { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* height in PERCENTUALE del contenitore: la barra piu' alta e' il 100% dello
   spazio, non un numero di pixel — cosi' non serve misurare niente in JS */
.vd-ist-c i { display: block; width: 100%; max-width: 30px; border-radius: 3px 3px 0 0; }
.vd-ist-c span { font-size: 9.5px; color: var(--muted); text-align: center; line-height: 1.25; }
/* "mai chiamato" non e' un tempo, e' un'assenza: sta di la' dal filetto */
.vd-ist-sep { width: 1px; align-self: stretch; background: var(--line-2); margin: 0 3px; }

/* Le barre CLICCABILI (01/09): stringono l'elenco dei lead su quel secchio. Sono
   <button> veri, non div con un onclick, se no col tasto TAB non ci si arriva.
   ⚠️ `all: unset` no: si porterebbe via anche il display flex della cella. Si
      spengono solo le tre cose che il browser mette ai bottoni. */
.vd-ist-c.vd-clic { background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; border-radius: 6px; }
.vd-ist-c.vd-clic:hover i { filter: brightness(1.18); }
.vd-ist-c.vd-clic:hover b { color: var(--text-primary); }
.vd-ist-c.vd-clic:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* il secchio scelto: il filetto sotto la colonna, non un fondo — un fondo pieno
   dietro una barra ne falserebbe l'altezza a occhio */
.vd-ist-c.acceso { box-shadow: inset 0 -2px 0 0 var(--brand); }
.vd-ist-c.acceso b { color: var(--text-primary); }

/* la via d'uscita dal taglio, accanto al conteggio dei lead */
.vd-via { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--pill-fg); background: var(--nav-bg); border: 0; border-radius: 6px;
  padding: 3px 8px; margin-left: 8px; cursor: pointer; }
.vd-via:hover { filter: brightness(1.08); }
.vd-via:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 1100px) {
  .vd-forme { grid-template-columns: 1fr; }
  .vd-forma { border-left: none; border-top: 1px solid var(--line); }
  .vd-forma:first-child { border-top: none; }
}

/* Le distribuzioni in colonna (.vd-dist) NON CI SONO PIU': dall'01/09 sono i
   tre istogrammi affiancati di .vd-forme qui sopra. */

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  MOBILE — il telefono come schermo di lavoro, non come ripiego            ║
   ╚══════════════════════════════════════════════════════════════════════════╝

   Sta in fondo al foglio DI PROPOSITO: molte regole qui sotto hanno la stessa
   specificita' di quelle che correggono (`.modal-card`, `.tm-nome`, `.kg-i`) e
   vincono solo perche' vengono dopo. Spostare questo blocco piu' in alto le
   disattiva in silenzio.

   Due assi, non uno solo:
   · @media (pointer: coarse)  → si tocca con un DITO. Vale anche sul telefono
     in orizzontale (844px di larghezza: nessun breakpoint di larghezza lo
     prende, ma il dito resta un dito) e su un tablet.
   · @media (max-width: …)     → c'e' poco SPAZIO. Vale anche su una finestra
     stretta col mouse.
   Mescolarli — "se è stretto allora è touch" — e' il modo classico di lasciare
   il telefono in orizzontale con i bersagli da 29px e i campi che zoomano.

   Misurato prima di scrivere una riga, su iPhone 375×812:
   · la pagina scorreva in ORIZZONTALE fino a 964px (barra filtri + calendario)
   · header 184px + barra filtri 326px = 566px dei 812 mangiati PRIMA del primo
     dato: il 70% dello schermo
   · 23 campi su 23 sotto i 16px → iOS zooma al focus e non torna piu' indietro
   · 72 bersagli sotto i 40px                                                   */

/* ── Fondamenta, ovunque ─────────────────────────────────────────────────── */
/* Senza questo iOS "aiuta" gonfiando il testo quando il telefono gira in
   orizzontale: i numeri delle tabelle cambiano corpo da soli e le colonne
   incolonnate smettono di esserlo. */
html { -webkit-text-size-adjust: 100%; }


/* ╭──────────────────────────────────────────────────────────────────────────╮
   │  0 · VENTIQUATTRO PIXEL, ANCHE COL MOUSE                                 │
   ╰──────────────────────────────────────────────────────────────────────────╯
   Sta QUI, appena PRIMA del blocco del dito, e non in coda al foglio come le
   altre correzioni: le regole di la' sotto (il padding di .sc-piu, .ka-n,
   .pc-buchi) vincono solo perche' vengono dopo, e queste scritte in fondo le
   spegnerebbero in silenzio. Provato in pagina: da qui il "+" dei giorni di
   servizio col dito resta 43x43; spostato in fondo scende a 29x29. Muovere
   questo blocco piu' in basso e' l'unico modo di romperlo.

   Il blocco "SI TOCCA CON UN DITO" allarga i bersagli quando c'e' un dito, ed
   e' giusto cosi'. Ma la misura minima di un bersaglio — 24x24 — non dipende
   dal puntatore: chi lavora col trackpad di un portatile sbaglia mira come col
   dito, e il cerchietto della ⓘ non si centra col mouse piu' di quanto si
   centri col pollice. Misurato COL MOUSE, in pagina, prima di scrivere una riga:
     · ⓘ 13x13 (12 nella scheda cliente, 14 sul titolo di card, 15 su quello
       di sezione) — e col dito arrivano a 18/16/19, cioe' comunque sotto
     · "Solo io" del pannello Calendari       55 x 17,5
     · "Apri tutto" del report giornaliero    57 x 14,5
     · il tasto che toglie o azzera una persona in Accessi   45 x 13,5
     · "Nascondi" dei ruoli (.esc-btn)        73 x 19,5
     · "Future" di una serie (.tk-fut)        70 x 19
     · "Scollega" di un feed Google           70 x 21,5
     · il caret che apre una persona          20 x 20
     · la × che chiude un avviso automatico   22 x 22
     · il 📌 che fissa un centro in cima      22 x 18,5
     · la barra dell'audio di una chiamata   561 x 16
     · il conteggio del funnel (.ka-n)       9,8 x 20
   La densita' della pagina e' stata approvata cosi' e NON si tocca: qui si
   allarga l'AREA CHE RISPONDE, non la scatola che si vede. Uno pseudo
   trasparente non ha colore, non ha bordo e non occupa spazio nel flusso — la
   pagina resta identica al pixel — e il clic arriva comunque all'elemento: uno
   pseudo non e' un bersaglio a se', l'evento nasce gia' sul suo elemento. Per
   questo tutti i `if (e.target.closest('.kg-i')) return` sparsi in tables.js,
   beauty.js, kpiall3.js e sauron.js continuano a funzionare senza toccarli.

   ⚠️ Due cose da sapere prima di aggiungere una riga qui sotto.
   · L'`inset` NON si conta dal bordo esterno ma dal riquadro INTERNO (il
     padding box). Su un bottone con un bordo da 1px sono due pixel che non
     tornano, e si finisce mezzo pixel sotto la soglia credendo di esserci.
   · Due pseudo che si sovrappongono se li mangiano a vicenda: vince quello che
     viene DOPO nel documento. Capitato in prova mettendo il summary dei
     calendari Google subito sotto il "Scollega": il bersaglio del secondo
     tornava da 29,5 a 24,5. Nel markup vero in mezzo ci sono due righe, ma se
     un giorno due di questi comandi diventano vicini di riga, si ricontrolla. */

/* ── La ⓘ: l'unico punto dove `position: relative` e' VIETATA ──────────────
   Il fumetto (.kg-i::after) e' ancorato di proposito alla CARD, alla tile o
   alla th — non all'icona — ed e' cosi' che sta largo 520px senza uscire dallo
   schermo. Renderla posizionata lo riporterebbe addosso al cerchietto: c'e'
   scritto anche piu' sotto, nel blocco del dito. Quindi qui non si puo' fare
   ne' come .sc-piu (`position: relative` piu' `inset`, che un'ancora la
   pretende) ne' con ::after, che il fumetto se l'e' gia' preso.
   Si allarga SENZA ancora: uno pseudo assoluto che non ha nessun offset resta
   dove sarebbe finito da fermo, cioe' dentro il bottone, e .kg-i e' gia'
   `place-items: center` — quindi il quadrato da 24 si centra da solo sul
   cerchietto qualunque misura abbia, senza una riga per variante. Misurato:
   con l'icona da 13 lo scarto e' -5,5 per lato, con quella da 19 e' -2,5, con
   quella da 12 e' -6; l'area che risponde e' 24x24 in tutti e tre i casi.
   ⚠️ NIENTE `inset`, niente `top`, niente `left`: basta un offset e l'ancora
   torna a essere la card, il quadrato si stende su tutta la carta e si mangia
   ogni altro clic. La larghezza e l'altezza in px non hanno questo problema. */
.kg-i::before { content: ''; position: absolute; width: 24px; height: 24px; }

/* ── I comandi che finora crescevano solo col dito ─────────────────────────
   Qui `position: relative` e' innocua e la differenza con la ⓘ e' tutta li':
   nessuno di questi ha dentro qualcosa di assoluto da riancorare, e nessuno
   sta in un contenitore con overflow: hidden che ritaglierebbe l'area
   invisibile (la lezione della × degli alias, scritta piu' sotto).
   Si cresce in alto e in basso dove c'e' gia' del vuoto fra una riga e
   l'altra, e di fianco solo dove di fianco non c'e' nessun altro comando. */
.rail-tutti, .tm-piu, .esc-btn, .login-link, .tk-fut, .gc-mini, .dr-intera,
.dd-check, .gc-come > summary, .ac-caret, .pc-x, .sc-piu,
.ex-durate button, .reg-vel button, .ac-link, .mg-nt-x, .dv-pin-btn, .ex-x { position: relative; }
.rail-tutti::before, .tm-piu::before, .esc-btn::before, .login-link::before,
.tk-fut::before, .gc-mini::before, .dd-check::before,
.gc-come > summary::before { content: ''; position: absolute; inset: -5px 0; }
/* "Apri tutto" del report e il tasto che toglie una persona in Accessi sono
   righe di testo nude, alte 14 e 13,5: -5 non basta. Sopra e sotto hanno solo
   spazio — una barra di comandi la prima, un blocco con 16px di gap l'altra. */
.dr-intera::before, .ac-link::before { content: ''; position: absolute; inset: -6px 0; }
/* Questi stanno in strisce con 3 o 4 pixel di gap: di fianco non c'e' un pixel
   da prendere senza finire sul bottone accanto, quindi si cresce solo in alto
   e in basso. La barra dell'audio e' gia' posizionata (ci vive dentro
   l'avanzamento) e il suo ::after e' il filo che si vede: libero solo ::before. */
.ex-durate button::before, .reg-vel button::before,
.reg-barra-audio::before { content: ''; position: absolute; inset: -4px 0; }
/* Quadratini a cui manca da tutte e quattro le parti. Alla × degli avvisi
   bastano due pixel: e' gia' 22x22, e la riga sotto e' cliccabile a sua volta. */
.ac-caret::before, .pc-x::before { content: ''; position: absolute; inset: -4px; }
.mg-nt-x::before { content: ''; position: absolute; inset: -2px; }
.dv-pin-btn::before { content: ''; position: absolute; inset: -3px -1px; }
.ex-x::before { content: ''; position: absolute; inset: -3px -2px; }
/* Il "+" dei giorni di servizio col dito e' gia' 43x43 (vedi il blocco sotto,
   che vince perche' viene dopo e resta a -12). Col mouse era 19x19: -6 basta e
   non sconfina nella voce accanto, che sta su un'altra riga della griglia. */
.sc-piu::before { content: ''; position: absolute; inset: -6px; }

/* ── Dove lo pseudo non si puo' usare ──────────────────────────────────────
   Le righe di una lista non hanno un pixel di vuoto fra loro: uno pseudo che
   sborda finirebbe SOPRA la riga vicina e si aprirebbe il centro sbagliato —
   in Accessi vorrebbe dire spuntare un permesso a chi non deve averlo. L'unica
   strada e' l'altezza minima, e sono un paio di pixel: .ac-lista ha gia'
   max-height e overflow, quindi la pagina non si allunga di niente, si scorre
   appena un filo di piu'.
   Su un <input> gli pseudo non esistono proprio — il browser non ci disegna
   dentro nulla — quindi anche li' o si alza la scatola o non si fa: uno e due
   pixel su due campi che si vedono di rado. */
.ac-centro, .rail-gestisci, .rail-collega { min-height: 24px; }
.tm-add, .cap-inp { min-height: 24px; }
/* le pastiglie dei ruoli e dei giorni: 23,5, mancano per mezzo pixel */
.tm-chip { min-height: 24px; }

/* ── I numeri cliccabili dentro le tabelle ─────────────────────────────────
   .ka-n, .pc-buchi e .dv-scn col dito si allargano gia' col padding (blocco
   sotto): li' il bersaglio diventa alto 42 dentro una riga da 33, e va bene,
   perche' col dito il rischio e' sbagliare colonna, non riga.
   Col MOUSE quel padding sposterebbe di 11px il tratteggio sotto il numero,
   cioe' l'unica cosa che dice "ci si clicca": qui si allarga con lo pseudo,
   che non sposta niente. E si scrive dentro `pointer: fine` per non SOMMARSI
   al padding — sommati farebbero un bersaglio alto 48 su una riga da 33, e si
   aprirebbe la riga sbagliata. Le due media query si escludono a vicenda,
   quindi l'ordine qui non conta.
   La × degli alias sta con loro per un motivo diverso: la pastiglia che la
   contiene ha overflow: hidden (le serve per accorciare i nomi lunghi) e
   ritaglia tanto lo pseudo quanto il padding — e ritaglia sul riquadro INTERNO
   della pastiglia, che col bordo trasparente da 1px per lato e' 22, non 24.
   Ventidue e' il tetto: si passa da 10x11 a 24x22, la larghezza rientra e
   l'altezza no. Per arrivare davvero a 24 servirebbe alzare .tm-chip di due
   pixel, ed e' una decisione di chi ha firmato la densita'. */
@media (pointer: fine) {
  .ka-n, .pc-buchi, .dv-scn { position: relative; }
  .ka-n::before, .pc-buchi::before, .dv-scn::before {
    content: ''; position: absolute; inset: -4px -8px;
  }
  .tm-x { padding: 6px 8px; margin: -6px -7px; }
}


/* ╭──────────────────────────────────────────────────────────────────────────╮
   │  1 · SI TOCCA CON UN DITO                                                │
   ╰──────────────────────────────────────────────────────────────────────────╯ */
@media (pointer: coarse) {

  /* ── I campi non devono far zoomare la pagina ────────────────────────────
     Regola di iOS: se al focus il campo ha meno di 16px, Safari ingrandisce la
     pagina per farci stare il cursore — e NON torna indietro da solo. Si resta
     su una dashboard zoomata al 130%, con la barra filtri fuori schermo, e
     l'unico modo di uscirne e' pizzicare. Qui i campi erano 23 su 23 sotto i
     16px (11,5 → 15).

     `!important` a ragion veduta, ed e' l'unico di questo blocco: il corpo dei
     campi e' dichiarato in una trentina di punti sparsi (.cell-inp, .tm-nome,
     .mm-inp, .tk-campo input, #loginForm input, .filters input[type=date]…),
     quasi tutti con selettori a classe che battono `input`. Elencarli tutti
     funzionerebbe oggi e si romperebbe al primo campo aggiunto domani: il
     difetto tornerebbe in silenzio, e in silenzio e' il modo peggiore. Cosi'
     vale su OGNI campo, anche quelli ancora da scrivere. */
  input, select, textarea { font-size: 16px !important; }

  /* Il telefono sotto il nome, in anagrafica, e' la riga di servizio: a 16px
     pareggia col nome e la cella perde la gerarchia. Non si torna indietro sul
     corpo (sotto i 16 si rizooma): la si tiene col colore, che c'e' gia', e
     togliendo peso. */
  .tm-tel { font-weight: 400; }

  /* Campi a larghezza fissa, calcolata su un corpo piu' piccolo: a 16px il
     testo ci sbatteva dentro. */
  .cap-inp { width: 80px; }
  .tk-ric-riga input[type="number"] { width: 92px; }
  .sc-pop input[type=number] { width: 110px; }
  .tm-add { width: 180px; }
  .ac-cerca, select.ac-vede { width: 100%; max-width: 100%; }

  /* ── Bersagli ────────────────────────────────────────────────────────────
     Il polpastrello copre ~9mm. Sotto i 40px si sbaglia bottone, e in una
     dashboard sbagliare bottone vuol dire cambiare periodo o sezione e
     ricaricare tutto. Qui si allarga il PADDING, mai il corpo del testo: la
     densita' della pagina resta quella disegnata. */
  #nav a { padding: 10px 16px; }
  .filters button { padding: 9px 15px; }
  .logout-btn { padding: 9px 16px; }
  .tk-btn { padding: 9px 15px; }
  .mg-altre { padding: 12px 10px; }
  .btn-back { padding: 9px 15px; }
  .lead-tabs button, .lead-tabs.seg-tabs button { padding: 9px 15px; }
  .tk-seg button, .tk-seg label { padding: 9px 15px; }
  .tm-chip { padding: 7px 12px; }
  .tk-fut { padding: 6px 6px 6px 9px; font-size: 11.5px; }
  .tm-piu, .esc-btn { padding: 7px 13px; }
  .dd-btn { padding: 9px 13px; }
  .dd-item { padding: 11px 10px; }
  .dd-azioni button { padding: 8px 14px; }
  .as-az-btn button { padding: 10px 14px; }
  .dd-check, .gc-check { padding: 6px 0; }
  .rail-item { padding: 9px 8px; }
  /* col dito non esiste il passaggio sopra: la puntina si vede sempre */
  .rail-pin { opacity: 1; width: 30px; height: 30px; }
  .rail-tutti, .rail-gestisci, .rail-collega { padding: 7px 10px; }
  .cal-nav { padding: 8px 16px; }
  .modal-close { padding: 10px 14px; }
  .tk-x { padding: 10px 13px; }
  .tm-x, .as-voce-del { padding: 7px 11px; }
  .login-link { padding: 10px 12px; }
  .esito-row .esito-click { padding: 7px 4px; }
  /* l'intestazione della tabella non e' un'etichetta: e' il comando che
     riordina, ed era alta 26px */
  thead th { padding-top: 13px; padding-bottom: 13px; }
  /* le caselle del pannello Accessi: 17px, e sbagliarne una da' un permesso a
     chi non deve averlo */
  #acTable input[type=checkbox] { width: 24px; height: 24px; }
  .ac-centro { padding: 9px 12px; }

  /* La ⓘ resta piccola per forza — sta dentro un'etichetta da 10,5px — ma a
     13px era un bersaglio da francobollo. 18px e' il massimo che non fa
     sembrare l'icona piu' importante della parola che accompagna.
     NB: niente position:relative qui. Il fumetto (.kg-i::after) e' ancorato di
     proposito alla CARD, non all'icona: renderla posizionata lo riporterebbe
     addosso al cerchietto e uscirebbe dallo schermo. */
  .kg-i, .filters .kg-i { width: 18px; height: 18px; font-size: 10.5px; }
  .card h2 .kg-i, .sm-title .kg-i { width: 19px; height: 19px; font-size: 11px; }
  .sc-voce .kg-i { width: 16px; height: 16px; font-size: 9.5px; vertical-align: -3px; }

  /* Il riquadro grigio che iOS disegna sopra ogni cosa toccata e' piu' brutto
     di qualsiasi hover: qui diventa un lampo del blu di casa. */
  a, button, .tk-row, .dd-item, .rail-item, .ac-centro, tbody tr.rowlink,
  .esito-click, .cal-slot, .cal-ev { -webkit-tap-highlight-color: rgba(34, 134, 221, 0.16); }

  /* ── Il calendario non si trascina col dito ──────────────────────────────
     `touch-action: none` sui blocchi serviva al drag col mouse: dice al
     browser "questo gesto e' mio, non scrollare". Col dito diventa una
     trappola — una scorrimento verticale che parte SOPRA una task non scorre
     la pagina, la SPOSTA: si cambia l'ora di un impegno credendo di scorrere,
     e il salvataggio parte da solo (`supabase.update` a fine gesto).
     Su touch il gesto torna al browser: `manipulation` lascia scorrere e
     pizzicare, toglie solo il ritardo del doppio tap. Il drag resta al mouse;
     data, ora e durata si cambiano dal pannello, che col dito e' comunque la
     strada piu' precisa (una colonna del calendario e' larga 128px).
     Le maniglie di ridimensionamento sono alte 9px e comparivano in hover:
     col dito non esistono proprio, meglio non lasciarle a intercettare tap. */
  .cal-ev { touch-action: manipulation; cursor: pointer; }
  .cal-ev-handle { display: none; }

  /* Un grafico si "legge" tenendo il dito sul punto: il fumetto compare sopra
     il dito (sotto lo coprirebbe il dito stesso) e resta qualche secondo.
     `manipulation` toglie il ritardo di 300ms del doppio tap. */
  .chart-wrap svg { touch-action: manipulation; }
}


/* ╭──────────────────────────────────────────────────────────────────────────╮
   │  2 · IL BOTTONE DELLA BARRA FILTRI                                       │
   ╰──────────────────────────────────────────────────────────────────────────╯
   Fuori da ogni media query e nascosto: su desktop non esiste. Lo accende il
   blocco ≤640 qui sotto — che DEVE venire dopo: stessa specificita', decide
   l'ordine, e un display:none scritto piu' in basso spegnerebbe il bottone. Se un browser ha in cache un index.html vecchio, il
   bottone non c'e' nel markup e non succede niente — e quel vecchio index.html
   chiede comunque il vecchio app.css (il ?v= sta nel link), quindi non puo'
   nemmeno capitare il caso opposto, CSS nuovo senza bottone. */
.filtri-apri {
  display: none; align-items: center; gap: 9px; width: 100%;
  font: inherit; font-size: 13px; font-weight: 600; text-align: left;
  padding: 12px 13px; cursor: pointer;
  background: none; border: none; border-radius: 16px;
  color: var(--text-primary);
}
.fa-cap {
  flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.fa-riass {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; color: var(--text-secondary);
}
.fa-caret { flex: none; color: var(--muted); font-size: 11px; transition: transform .15s; }
.filter-bar.aperta .fa-caret { transform: rotate(180deg); }


/* ╭──────────────────────────────────────────────────────────────────────────╮
   │  3 · C'E' POCO SPAZIO (≤ 640px)                                          │
   ╰──────────────────────────────────────────────────────────────────────────╯ */
@media (max-width: 640px) {

  /* ── Guscio ──────────────────────────────────────────────────────────────
     max() e non un valore secco: su iPhone col notch, in orizzontale, la
     tacca mangia 44px del lato — senza safe-area il primo carattere di ogni
     riga ci finisce sotto. Il fondo lascia posto alla bolla dell'assistente,
     che e' fixed: senza questo spazio l'ultima riga dell'ultima tabella resta
     coperta per sempre, e non c'e' modo di scorrere piu' giu' per vederla. */
  #main {
    padding: 14px 10px 40px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
  /* la testata va a capo: marchio + azioni, poi la striscia delle sezioni (il
     perche' sta nel blocco MOBILE in alto); i due padding sotto sono la safe-area */
  .hdr-in {
    height: auto; padding: 8px 12px; flex-wrap: wrap; gap: 8px 10px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* ── Header ──────────────────────────────────────────────────────────────
     Era alto 184px su 812: cinque righe, e i due bottoni del report davanti
     alla navigazione. Ordinato a mano: prima chi sei e come esci, poi le
     azioni, poi la striscia delle sezioni. "SALONE VINCENTE" sotto il titolo
     sparisce — e' scritto anche nel logo, a due centimetri. */
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand-name { font-size: 15px; }
  /* senza wrap "Esci" finiva mezzo fuori dal bordo destro: .hdr-azioni e' un
     flex nowrap, e su 375px le quattro voci non ci stanno in riga */
  /* flex:none e nowrap facevano sfondare "Esci" oltre il bordo destro: qui il
     gruppo si prende la riga che avanza, va a capo se serve e si allinea a
     destra invece di uscire dallo schermo. */
  .hdr-azioni {
    order: 2; margin-left: auto; gap: 8px;
    flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end;
  }

  /* ── le schermate ridisegnate ────────────────────────────────────────────
     (Qui c'erano anche i due ritocchi alla testata di pagina: sono spariti con
     lei il 27/08, vedi la nota su .pg-head piu' sopra.) */
  .pn-val { font-size: 23px; }
  .pn-step { padding: 13px 14px 15px; }
  .pn-gauge { padding: 11px 14px 13px; }
  .pn-tab-head { padding: 15px 13px 13px; }
  .pn-tab-cmd { width: 100%; }
  /* ── E la testata dei report giornalieri deve andare a capo ──────────────
     La riga qui sopra e' scritta per .pn-tab-head, che va a capo: li' "largo
     il 100%" vuol dire "prenditi la tua riga". Ma report-griglia.js timbra
     `pn-tab-cmd` anche sul .rg-cmd che appende a .pn-card-head, e quella
     testata in riga non ci va a capo: il 100% le rende solo la riga
     sovraccarica, e i tre figli scendono ognuno al proprio minimo.
       il titolo   78,8px  (l'ultima parola incollata alla ⓘ da .kg-nb)
       la nota    187,2px  (piu' su e' nowrap e flex:none: zero elasticita')
       il .rg-cmd 200,2px  (dentro ha .pn-seg, e il suo minimo sono i due
                            bottoni interi: "Chi ha compilato" + "I report")
       i due gap   32,0px
     Fanno 498px chiesti dentro una testata da 342, e il di piu' esce dalla
     carta — che qui e' una .card semplice, senza l'overflow:hidden delle
     .pn-tab — e diventa scorrimento laterale di TUTTA la pagina. Misurato a
     390px: Project Manager 522, Delivery Manager 549. Sotto i ~523 capita
     sempre, cioe' su ogni telefono in verticale.
     Va a capo solo QUI DENTRO, e non insieme alla regola base: sopra i 640 la
     testata non sfonda niente — il titolo si stringe e i tre figli restano in
     riga, com'e' stato disegnato — e il wrap globale la smonterebbe dove non
     c'e' nulla da aggiustare (misurato: a 700 la testata passerebbe da 45,5 a
     73,8px, e a 900 con la ricerca aperta il .rg-cmd da 365 a 400).
     Il min-width: 0 e' una cintura: oggi non sposta un pixel, ma tiene buono
     il .rg-cmd anche piu' stretto di qualunque telefono in commercio, dove la
     striscia che ha dentro sa gia' scorrere da se'. */
  .pn-card-head { flex-wrap: wrap; }
  .pn-card-head > * { min-width: 0; }
  .pn-tab-cmd input[type=search] { width: 100%; }
  /* i tagli di colonne diventano una striscia che scorre, come le altre file
     di tab del telefono */
  .pn-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .pn-seg::-webkit-scrollbar { display: none; }
  .pn-seg button { flex: none; }
  .pn-tab-foot { padding: 11px 13px; }

  /* ── Barra filtri: si apre, non occupa ───────────────────────────────────
     Era il pezzo piu' costoso della schermata: 326px, cioe' il 40% dello
     schermo, per quattro etichette (`.filter-cap` ha min-width:100%, quindi
     ognuna si prendeva una riga intera), sette pastiglie di periodo su tre
     righe e tre tendine incolonnate. E l'intervallo "dal … al … Applica" non
     ci stava comunque: era lui a far scorrere in orizzontale TUTTA la pagina
     fino a 964px, perche' `.filters .custom` e' un flex nowrap e la sua
     larghezza minima (401px) non si stringe.

     Adesso: una riga sola con il riassunto di cosa e' filtrato, e il resto si
     apre col tap. Aperta, ogni riga e' una striscia che scorre in
     ORIZZONTALE come la navigazione: sette pastiglie su una riga sola invece
     che su tre, e l'intervallo personalizzato in coda alla striscia.

     Il bottone e' nascosto di default (vedi .filtri-apri piu' sotto, fuori da
     ogni media query): su desktop la barra resta esattamente com'era. */
  .filter-bar { padding: 0; gap: 0; }
  .filters-sep { display: none; }
  .filtri-apri { display: flex; }
  .filter-bar:not(.aperta) > .filters-row { display: none; }
  .filter-bar.aperta { padding-bottom: 12px; }
  .filter-bar.aperta > .filters-row {
    padding: 0 13px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .filter-bar.aperta > .filters-row::-webkit-scrollbar { display: none; }
  .filter-bar > .filters-row > * { flex: none; }
  /* min-width:100% era quello che dava una riga a testa a ogni etichetta */
  .filter-cap { min-width: 0; margin-right: 4px; }
  .filters .custom { border-left: none; padding-left: 10px; margin-left: 2px; }

  /* ── Card e titoli ───────────────────────────────────────────────────── */
  .card { padding: 15px 13px; border-radius: 14px; margin-bottom: 14px; }
  .card h2 { font-size: 17px; }
  .card .subtitle, .sm-sub { font-size: 12px; }
  .sm-title { font-size: 18px; }
  /* il gruppo di tab a destra del titolo, su una riga sua invece che spinto a
     destra da un margin:auto che qui non ha spazio */
  .sm-head .lead-tabs { margin: 6px 0 0; }
  .mk-head { flex-wrap: wrap; }
  input[type=search] { width: 100%; }

  /* ── Le file di tab diventano strisce che scorrono ───────────────────────
     Sauron ha sette tab, Vendita cinque: andando a capo diventavano tre righe
     di pastiglie alte mezza schermata. Una striscia orizzontale e' lo stesso
     gesto della navigazione in alto, e resta alta una riga. */
  .lead-tabs, .tk-tabs, .rp-tabs, .cal-giorni {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain; padding-bottom: 2px;
  }
  .lead-tabs::-webkit-scrollbar, .tk-tabs::-webkit-scrollbar,
  .rp-tabs::-webkit-scrollbar, .cal-giorni::-webkit-scrollbar { display: none; }
  .lead-tabs button, .tk-tabs button, .rp-tabs button, .cal-giorni button { flex: none; }

  /* ── KPI ────────────────────────────────────────────────────────────────
     Due colonne e non tre: a 355px una tile da tre colonne e' larga 100px, e
     "FATTURATO CONTRATTUALIZZATO" ci va a capo quattro volte. */
  .kpi-groups { gap: 10px; margin-bottom: 14px; }
  .kpi-group { padding: 13px 15px 11px 18px; }
  .kg-tiles { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px 12px; }
  .kpi-row, .kpi-row.kpi-4, .kpi-row.kpi-3 { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .tile { padding: 12px 13px; }
  .kg-hero .value { font-size: 27px; }

  /* ── Tabelle ────────────────────────────────────────────────────────────
     Restano tabelle: la Panoramica ha 21 colonne e KPI ALL 3 ne ha 25 —
     impilarle in schede sarebbe una dashboard diversa, non la stessa piu'
     stretta. Si stringe la cella e si tiene a bada la prima colonna, che e'
     sticky e con un nome lungo ("Centro Benessere La Perla") si prendeva
     mezzo schermo lasciando spazio a due numeri.
     dvh e non vh: `vh` su iOS e' l'altezza a barra degli indirizzi NASCOSTA,
     quindi 62vh sono piu' del 62% di quello che si vede davvero. */
  table { font-size: 12.5px; }
  th, td { padding: 8px 9px; }
  thead th { font-size: 10px; letter-spacing: 0.05em; }
  .table-scroll { max-height: 62vh; max-height: 62dvh; }
  th:first-child, td:first-child { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
  .dc-centro { max-width: 44vw; }

  /* ── Finestre: dal centro al fondo dello schermo ─────────────────────────
     Una card centrata verticalmente, con 40px di margine sopra e sotto, su un
     telefono e' una card che sfarfalla a meta' schermo e si legge a fatica.
     Attaccata in basso e' il gesto che ci si aspetta da un telefono (e il
     pollice arriva ai bottoni, che stanno in fondo).
     NIENTE `width` e NIENTE `max-width` qui: .modal-card ha gia' max-width:100%
     ed e' quello che tiene a bada sia le classi larghe (.ka-lead-card 900px)
     sia l'unica larghezza scritta a mano nel markup (sauron.js, style="width:820px",
     che essendo inline batterebbe qualsiasi regola scritta qui). */
  .modal-overlay { padding: 0; align-items: flex-end; overscroll-behavior: contain; }
  .modal-card {
    border: none; min-height: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92dvh; overflow-y: auto;
    padding: 18px 15px calc(20px + env(safe-area-inset-bottom));
  }
  .modal-head h3 { font-size: 17px; }
  .ka-lead-card .table-scroll { max-height: 52dvh; }

  /* ── Pannello laterale della task: a tutto schermo ──────────────────── */
  .tk-panel { width: 100%; max-height: 100dvh; }
  .tk-panel-head { padding: 16px 16px 14px; }
  .tk-panel-body { padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); }
  .tk-barra { gap: 10px; }
  /* sul telefono la barra va a capo: il filtro azienda prende la sua riga
     intera invece di restare schiacciato in fondo a quella delle viste */
  .tk-azienda { margin-left: 0; width: 100%; }
  .tk-azienda .dd-btn { max-width: 100%; width: 100%; }
  .tk-azienda .dd-menu { right: auto; left: 0; }
  .tk-row { padding: 12px 11px; gap: 10px; }

  /* Serie richiusa: il tasto e' gia' dentro la riga meta e va a capo con le
     chip, quindi qui basta stringere il rientro delle altre volte. */
  .tk-serie-fut .tk-row { padding-left: 18px; }
  .tk-serie-tit { padding-left: 18px; }

  /* ── Assistente ─────────────────────────────────────────────────────────
     dvh anche qui: con 100vh il campo di scrittura finiva sotto la barra di
     Safari, cioe' proprio la riga che serve. */
  #asHost {
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
  #asPannello {
    position: fixed; right: 8px; left: 8px; width: auto; max-height: none;
    bottom: 74px; height: calc(100dvh - 104px);
  }
  .as-foot { padding-bottom: calc(11px + env(safe-area-inset-bottom)); }
  .as-bolla { max-width: 88%; }

  /* ── Login ──────────────────────────────────────────────────────────── */
  #login, #recupero { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .login-card { padding: 28px 20px 24px; border-radius: 18px; }
  .login-mark { width: 76px; height: 76px; margin-bottom: 13px; border-radius: 20px; }
  .login-title { font-size: 24px; }
  .login-leaf.leaf-a { width: 260px; left: -60px; }
  .login-leaf.leaf-b { width: 210px; right: -50px; }

  /* ── Griglie varie ──────────────────────────────────────────────────── */
  .sc-griglia { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px 16px; }
  .fn-rank { gap: 16px; }
  .mm-grid { gap: 12px 14px; }
  .sc-head { gap: 8px; }
  .sc-comandi { width: 100%; }

  /* Il fumetto del grafico non deve uscire dallo schermo */
  #tooltip { max-width: calc(100vw - 22px); }
  .dd-btn { max-width: 100%; }

  /* Il calendario resta l'unica cosa che scorre in orizzontale, e lo fa DENTRO
     la sua cornice: la colonna delle ore si stringe per lasciare spazio ai
     giorni. Le due intestazioni prendono la griglia da uno style inline
     scritto in task.js, dove il valore e' allineato a questo. */
  .cal-ora, .cal-gutter-head { font-size: 9.5px; padding-right: 5px; }
  .cal-bar { gap: 6px; }
  .cal-etichetta { font-size: 12.5px; width: 100%; order: 9; margin-left: 0; }
  /* nella barra della sezione i comandi del calendario e del diario prendono la
     riga intera (come il filtro azienda): in fila starebbero schiacciati in
     fondo a quella delle viste, e l'etichetta del periodo qui sopra vuole
     comunque una larghezza vera su cui andare a capo */
  .tk-barra .cal-bar, .tk-barra .ex-barra { width: 100%; }
}


/* ╭──────────────────────────────────────────────────────────────────────────╮
   │  4 · TELEFONO IN ORIZZONTALE                                             │
   ╰──────────────────────────────────────────────────────────────────────────╯
   844×390: nessuna delle regole di larghezza qui sopra lo prende, ma l'altezza
   utile e' meno della meta'. Le due cose che vivono a schermo intero — il
   pannello dell'assistente e le finestre — devono starci dentro. */
@media (max-height: 500px) and (orientation: landscape) {
  #asPannello { height: calc(100dvh - 92px); bottom: 66px; }
  #asBolla { width: 46px; height: 46px; }
  .modal-card { max-height: 96dvh; }
  .table-scroll { max-height: 70dvh; }
}


/* ╭──────────────────────────────────────────────────────────────────────────╮
   │  5 · QUELLO CHE SI ROMPE SOLO NEI PUNTI PROFONDI                         │
   ╰──────────────────────────────────────────────────────────────────────────╯
   Difetti trovati schermata per schermata, non deducibili dalla struttura.
   Stanno in fondo perche' molti correggono regole di pari specificita': a
   decidere e' l'ordine. */

/* ── La bolla dell'assistente non deve stare sopra le finestre ──────────────
   #asHost e' z-index 60 contro il 50 delle finestre, il 46 del pannello task e
   il 45 del suo velo: resta davanti a tutto e si prende l'angolo in basso a
   destra, che e' esattamente dove stanno i bottoni di conferma ("Salva",
   "Aggiungi e avvisa", "Invita"). Su un telefono il pannello della task e'
   a tutto schermo, quindi la bolla ci galleggia sopra in permanenza.
   Non si abbassa lo z-index — servirebbe infilarla fra tre livelli e ogni
   futuro overlay ricomincerebbe il ballo — si toglie di mezzo mentre c'e'
   qualcosa di aperto. Le finestre nascono in due modi diversi (chi mette
   .hidden e chi crea/rimuove il nodo): `:not(.hidden)` copre entrambi. */
body:has(.modal-overlay:not(.hidden)) #asHost,
body:has(.tk-panel.open) #asHost { display: none; }

/* ── La colonna delle ore del calendario non deve scorrere via ──────────────
   La griglia a 7 giorni e' larga 952px: per arrivare a venerdi' si scorre di
   ~600px, e la colonna con 8:00 / 9:00 / 10:00 esce dallo schermo. Da li' in
   poi i blocchi sono senza orario — e nei blocchi bassi o stretti l'ora non e'
   nemmeno scritta dentro (classi .corta / .stretta). Incollata a sinistra
   resta il riferimento.
   ⚠️ Lo sfondo deve essere OPACO: e' sticky e le colonne le scorrono sotto.
   Stessa lezione gia' imparata sulla prima colonna delle tabelle. */
.cal-gutter, .cal-gutter-head {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface-1);
}
/* ⚠️ Senza questa riga la sticky qui sopra non serve a niente, e il perche' non
   e' ovvio: .cal-head e .cal-body sono due blocchi DENTRO .cal, che e' il
   contenitore che scorre. Un blocco prende la larghezza del contenitore — 353px
   su un telefono — mentre le sue colonne (56 + 7×128 = 952) gli escono fuori.
   Un elemento sticky si puo' muovere solo dentro il proprio blocco contenitore:
   con .cal-body largo 353 la colonna delle ore resta incollata per 353px di
   scorrimento e poi se ne va comunque, che e' esattamente il difetto da
   correggere. `min-width: min-content` porta i due blocchi alla larghezza delle
   loro colonne (952), e da li' la sticky ha dove tenersi.
   min-content e non max-content: con max-content le fasce "senza ora" — che
   contengono i titoli delle task, in nowrap — allargherebbero le colonne quanto
   il titolo piu' lungo. min-content prende i 128px dichiarati nel minmax, cioe'
   il numero che task.js ha gia' scelto. In vista Giorno il minmax parte da 0 e
   questa riga non fa niente: e' un minimo, non una larghezza. */
.cal-head, .cal-body { min-width: min-content; }

/* Lo scorrimento dentro una finestra o un pannello non deve proseguire nella
   pagina sotto: su iOS, arrivato in fondo, il gesto passa al documento e alla
   chiusura ci si ritrova in un punto a caso della sezione. */
.tk-panel, .tk-scrim, .as-msg, .table-scroll, .dd-menu, .ac-lista, .note-box,
.tk-note-list { overscroll-behavior: contain; }

@media (pointer: coarse) {
  /* I conteggi del funnel di KPI ALL 3 sono bottoni con padding 0: una cifra
     sola e' un bersaglio di 7×16px. E sbagliarlo non e' un tocco a vuoto — il
     resto della cella appartiene al clic della RIGA, che apre tutti i lead
     invece dei soli "non risposto". Il margine negativo restituisce alla cella
     lo spazio che il padding le ha preso: le colonne non si allargano. */
  .ka-n { padding: 11px 6px; margin: -11px -6px; }
  /* Stessa storia per la % compilati: sbagliare il bersaglio non e' un tocco a
     vuoto, apre il drill-down del centro invece di Notion. */
  .pc-buchi, .dv-scn { padding: 11px 6px; margin: -11px -6px; }

  /* Il "+" dei giorni di servizio e' 19×19px ed e' l'UNICA strada per
     aggiungere giorni (che spostano la fine servizio su Notion e scrivono sul
     gruppo WhatsApp). Il cerchietto resta piccolo — sta attaccato a un numero,
     ingrandirlo sposterebbe la griglia — ma l'area che risponde al dito
     diventa 43×43 con uno pseudo-elemento trasparente.
     `position: relative` qui e' sicuro: #scPop e' FRATELLO del bottone, non
     figlio, quindi resta ancorato a .sc-voce come e' stato disegnato.
     I 26px qui sotto stavano nel primo blocco del dito (fusi qui il 4/9): col
     dito il cerchietto e' 26, non 19, e con lo pseudo-elemento l'area fa 50×50. */
  .sc-piu { width: 26px; height: 26px; font-size: 17px; vertical-align: -7px; position: relative; }
  .sc-piu::before { content: ''; position: absolute; inset: -12px; }
}

@media (max-width: 640px) {
  /* ── La navigazione scorre ma non lo dice ────────────────────────────────
     Con tutti i permessi le voci sommano 574px contro 327 visibili: Sauron,
     Task e Accessi sono fuori schermo, la barra di scorrimento e' spenta di
     proposito e non c'e' nessun segno che ci sia altro. Una sfumatura sul
     bordo destro e' il segno; app.js porta in vista la voce attiva al cambio
     rotta, cosi' chi arriva su #/accessi non trova la barra ferma su
     "Panoramica" con la voce accesa da nessuna parte. */
  #nav {
    order: 3; width: 100%; flex: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    scroll-behavior: smooth;
    /* la sfumatura mangerebbe l'ultima voce anche a striscia finita: 8px di
       coda le lasciano l'aria per non essere tagliata a meta' */
    padding-right: 8px;
  }

  /* ── Il fumetto delle tile si apre dal lato sbagliato ────────────────────
     `.kpi-row .tile:nth-last-child(-n+2)` apre verso sinistra le ULTIME DUE
     tile della lista: giusto su desktop, dove sono le due piu' a destra.
     A due colonne le ultime due sono una sotto l'altra — la penultima sta
     nella colonna SINISTRA e col fumetto verso sinistra finiva fuori schermo.
     Qui il lato lo decide la COLONNA, non la posizione nella lista.
     Stessa specificita' della regola che corregge (0,4,1): vince perche' viene
     dopo. */
  .kpi-row .tile:nth-child(odd) .kg-i::after { left: 0; right: auto; }
  .kpi-row .tile:nth-child(even) .kg-i::after { left: auto; right: 0; }
  .kpi-row .tile .kg-i::after { max-width: calc(100vw - 36px); }

  /* ── Le strisce di tab devono poter stringersi ───────────────────────────
     `overflow-x: auto` da solo non basta dentro un flex: senza min-width:0 la
     striscia non scende sotto la sua larghezza minima e a scorrere finisce per
     essere la pagina. In #/task le cinque tab sommano ~430px. */
  /* .pn-seg mancava all'appello, ed e' la striscia piu' diffusa di tutte (i
     tagli di colonne, l'attribuzione, le linguette dei report). Da sola non
     raddrizza la testata dei report giornalieri — li' il pavimento lo metteva
     il contenitore, non lei — ma senza, il giorno che una di queste strisce si
     ritrova in una riga stretta ricomincia a spingere invece di scorrere. */
  .lead-tabs, .tk-tabs, .rp-tabs, .cal-giorni, .pn-seg { min-width: 0; max-width: 100%; }

  /* ── Uscire dal pannello della task ──────────────────────────────────────
     A tutto schermo il velo non ha piu' un pixel scoperto da toccare, non c'e'
     Esc e non c'e' un gesto di chiusura: la ✕ e' l'unica uscita, e misurava
     28×25px. */
  .tk-x { top: 10px; right: 10px; padding: 12px 15px; font-size: 18px; }

  /* ── La finestra dei lead di KPI ALL 3 ───────────────────────────────────
     Dentro una finestra larga 343px la prima colonna sticky ("Lead", 217px)
     lasciava 74px alle altre cinque. In una finestra lo sticky serve a poco —
     ci si sta dentro pochi secondi, per un lead alla volta — e toglierlo
     restituisce due colonne leggibili. Il nome resta accorciato dalla regola
     generale sulla prima colonna. */
  .ka-lead th:first-child, .ka-lead td:first-child { position: static; }
  /* Le note del lead si aprono in una cella con colspan: si impaginavano sulla
     larghezza della TABELLA (~770px), quindi restavano fuori schermo a destra
     mentre la riga sopra era a sinistra. Incollate al bordo sinistro si leggono
     dove si e' toccato. */
  .ka-lead tr.ka-lead-det > td {
    position: sticky; left: 0;
    max-width: calc(100vw - 84px); padding-left: 16px;
  }

  /* ── La tabella a larghezza fissa del pannello Accessi ───────────────────
     860px era tarato su celle da 13px con 8px di padding. Il padding piu'
     stretto non la rende comoda su un telefono — resta una tabella da spostare
     di lato — ma toglie un terzo dello scorrimento. */
  .mt-table { min-width: 720px; }
  .mt-table th, .mt-table td { padding: 4px 5px; }
}

/* ── I fumetti ⓘ allargano la pagina anche da CHIUSI ────────────────────────
   Misurato a 375px: documento largo 512, cioe' 137px di scorrimento laterale su
   tutta la dashboard. Spegnendo `.kg-i::after` torna esatto a 375.
   Il fumetto e' `position: absolute`, e un assoluto nascosto con `visibility`
   contribuisce comunque all'area scorribile del suo contenitore: da chiuso e'
   invisibile e continua a spingere. Qui si era corretto solo sotto i 640,
   credendo che su desktop i contenitori fossero larghi abbastanza: non e' vero
   in verticale — dentro .table-scroll i fumetti delle th pendevano sotto
   l'intestazione e le tabelle corte scorrevano nel vuoto. Il `display: none`
   da chiuso adesso sta nella regola base di .kg-i::after (con la dissolvenza
   salvata da allow-discrete); qui resta solo quello che e' davvero da telefono. */
@media (max-width: 640px) {
  /* col dito il fumetto si apre col tap, cioe' col focus, anche dove il
     browser non si dichiara `hover: none` */
  .kg-i:focus::after { display: block; opacity: 1; transform: none; }

  /* E da APERTO non deve uscire dallo schermo. I fumetti ancorati a un elemento
     stretto (tile, voce della scheda, intestazione di colonna, riquadro del
     Marketing) hanno `width: max-content`: partono dal bordo sinistro
     dell'ancora e vanno dove capita. Il tetto li tiene dentro lo schermo, e
     nelle griglie a due colonne quelli di destra si aprono verso sinistra. */
  .tile .kg-i::after, .sc-voce .kg-i::after, .mm-campo .kg-i::after,
  thead th .kg-i::after { max-width: calc(100vw - 40px); }
  .sc-griglia .sc-voce:nth-child(even) .kg-i::after { left: auto; right: 0; }
}

/* ── Gli ultimi bersagli rimasti sotto misura ───────────────────────────────
   In fondo a tutto perche' due di questi (i bottoni del report) li stringe il
   blocco ≤640 qui sopra per far stare l'header in tre righe: la fila e' giusta,
   ma non a costo di un bottone alto 30px. */
@media (pointer: coarse) {
  #btnReport { padding: 9px 13px; }
  .rail-tutti { padding: 8px 12px; }
  .tm-piu { padding: 8px 13px; }
  /* la ✕ toglie un alias, cioe' cancella qualcosa: 30×25 e' troppo poco per
     un'azione che non si annulla. Si allarga col padding e non con uno
     pseudo-elemento, perche' la pastiglia degli alias ha overflow:hidden e
     ritaglierebbe l'area invisibile insieme al testo. */
  .tm-x { padding: 9px 8px; }
}

/* ── Registrazioni: la seconda scheda del pop-up di Beauty ──────────────────
   Una riga per CHIAMATA che si apre sulla registrazione. E' una lista e non una
   <table> proprio per questo: in tabella il corpo che si espande avrebbe avuto
   bisogno di una <tr> fantasma a tutta larghezza sotto ogni riga.
   L'audio non si sente qui dentro: i file stanno sul Drive dell'agenzia, non sono
   pubblici e la CSP della pagina non apre media-src — il bottone ▶︎ porta su Drive,
   dove la sessione Google c'e' gia'. */
.modal-largo .modal-card { width: 940px; }
.em-tabs { margin: 12px 0 10px; }

.reg-barra { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.reg-barra input[type=search] { flex: 1 1 260px; width: auto; min-width: 0; margin-bottom: 0; }
.reg-riass { font-size: 12px; color: var(--muted); }
.reg-riass b { color: var(--text-primary); }
/* Il filtro per esito, accanto alla ricerca. Stesso vestito delle altre tendine di
   filtro dell'app (.consulente-wrap select): non c'e' niente di nuovo da imparare.
   ⚠️ max-width: certi esiti CRM4 sono lunghi ("Appuntamento confermato con messaggio")
      e senza tetto la tendina scaccerebbe la ricerca a capo da sola. */
.reg-barra select {
  flex: 0 1 auto; max-width: 240px;
  font: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 28px 6px 10px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--border-2); border-radius: 8px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237789a0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.reg-barra select:disabled { opacity: .5; }
@media (max-width: 640px) { .reg-barra select { flex: 1 1 100%; max-width: 100%; } }

.reg-intestazione, .reg-testa {
  display: grid; align-items: center; text-align: left; gap: 10px;
  /* La colonna NUMERO (27/08): il telefono e' l'unico modo che ha un manager per
     ritrovare una cliente di cui si ricorda il numero e non il nome. Larghezza
     fissa perche' i numeri sono tutti della stessa lunghezza — a fr si sarebbe
     mangiata lo spazio del nome sulle liste corte. */
  grid-template-columns: 96px minmax(110px, 1.3fr) 100px minmax(100px, 1.15fr) 52px minmax(100px, 1.15fr) 128px 14px;
}
.reg-intestazione {
  padding: 0 8px 7px; border-bottom: 1px solid var(--grid);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.reg-testa {
  width: 100%; padding: 8px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-primary);
}
.reg-ora { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.reg-chi { font-weight: 600; }
.reg-centro, .reg-esito { font-size: 12.5px; color: var(--text-secondary); }
.reg-durata { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 12.5px; }
/* i nomi lunghi accorciano invece di mandare a capo la riga: una lista di 600
   chiamate deve restare scorribile a colpo d'occhio */
.reg-chi, .reg-num, .reg-centro, .reg-esito { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* il numero e' un dato da confrontare a colpo d'occhio: cifre a larghezza fissa,
   e piu' spento del nome perche' e' l'appiglio, non il soggetto della riga */
.reg-num { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.reg-manca-num { font-style: normal; color: var(--muted); opacity: .55; }
.reg-caret { color: var(--muted); transition: transform .15s ease; }
.reg-riga.aperta .reg-caret { transform: rotate(180deg); }

/* Lo stato dell'audio. "del giorno" NON e' un mezzo successo da colorare come tale:
   e' un'informazione onesta su un aggancio che non si e' potuto stringere, quindi
   resta neutra. Il verde sta solo dove la registrazione e' davvero di quella chiamata. */
.reg-audio { font-size: 11.5px; white-space: nowrap; }
.reg-si    { color: var(--good-text); font-weight: 600; }
.reg-forse { color: var(--text-secondary); border-bottom: 1px dotted var(--baseline); cursor: help; }
.reg-no    { color: var(--muted); }

.reg-corpo { padding: 2px 8px 16px; }
.reg-info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.reg-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.reg-flag { cursor: help; }
.reg-manca { font-size: 12px; color: var(--muted); font-style: italic; }
.reg-notaop {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.45;
  margin-bottom: 10px; white-space: pre-wrap;
}
.reg-notaop-cap {
  display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.reg-avviso {
  font-size: 12px; color: var(--text-secondary); line-height: 1.45;
  background: var(--row-alt); border-left: 3px solid var(--warn);
  padding: 8px 12px; border-radius: 0 8px 8px 0; margin-bottom: 10px;
}
.reg-clip + .reg-clip { margin-top: 12px; }
.reg-clip-cap {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
/* Il player in casa. Le clip stanno in un bucket privato: la URL si firma al
   momento e dura un'ora, e lo Storage risponde alle Range request, quindi la barra
   di avanzamento salta davvero invece di riscaricare il file da capo. */
.reg-player {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 9px; border-radius: 999px;
  background: var(--row-alt); border: 1px solid var(--border);
}
.reg-pp {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand-grad); color: #fff; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.reg-pp:hover { filter: brightness(1.08); }
.reg-player.attesa .reg-pp { opacity: .55; }
.reg-salta {
  flex: none; border: 1px solid var(--border); background: none; cursor: pointer;
  border-radius: 999px; padding: 3px 8px; font: inherit; font-size: 11px;
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
/* la barra si VEDE alta 4px ma si CLICCA su 16: chi punta col dito non deve
   centrare un filo di quattro pixel */
.reg-barra-audio {
  position: relative; flex: 1 1 120px; min-width: 90px; height: 16px; cursor: pointer;
}
.reg-barra-audio::after {
  content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 4px;
  border-radius: 999px; background: var(--grid);
}
.reg-avanzamento {
  position: absolute; left: 0; top: 6px; height: 4px; width: 0; z-index: 1;
  border-radius: 999px; background: var(--series-1); pointer-events: none;
}
.reg-tempo { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.reg-vel { flex: none; display: inline-flex; gap: 3px; }
.reg-vel button {
  border: 1px solid transparent; background: none; cursor: pointer; border-radius: 999px;
  padding: 3px 7px; font: inherit; font-size: 11px; color: var(--muted);
}
.reg-vel button:hover { background: var(--row-hover); color: var(--text-primary); }
.reg-player.ko { border-color: var(--bad-text); }
.reg-player.ko .reg-tempo::after { content: ' · non si carica'; color: var(--bad-text); }

.reg-azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.reg-play, .reg-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.reg-play { background: var(--brand-grad); color: #fff; }
.reg-link { border: 1px solid var(--border); color: var(--text-secondary); }
.reg-play:hover, .reg-link:hover { filter: brightness(1.06); }
.reg-trascr {
  padding: 12px 14px; border-radius: 0 8px 8px 0;
  background: var(--row-alt); border-left: 3px solid var(--seq-300);
  font-size: 13px; line-height: 1.65; color: var(--text-secondary);
  white-space: pre-wrap; max-height: 300px; overflow-y: auto;
}
.reg-attesa { font-style: italic; color: var(--muted); }
.reg-nota { font-size: 12px; color: var(--muted); }
.reg-altre {
  display: block; width: 100%; margin-top: 14px; padding: 10px; border-radius: 8px;
  border: 1px dashed var(--border); background: none; color: var(--text-secondary);
  font: inherit; font-size: 12.5px; cursor: pointer;
}

/* ── Registrazioni: il vestito nuovo ────────────────────────────────────────
   Le regole qui sopra sono del linguaggio vecchio (pastiglie col gradiente,
   filetti colorati a sinistra, barre da 4px). Dentro un pop-up ridisegnato
   stonavano, quindi vengono ridipinte qui — dopo, così vincono senza dover
   toccare quelle e senza rischiare di rompere la scheda dove è già in uso.
   Il markup di registrazioni.js non cambia di una riga. */
.reg-intestazione {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); border-bottom: 1px solid var(--line-2);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.reg-riga { border-bottom: 1px solid var(--line-3); }
.reg-testa:hover { background: var(--hover); }
.reg-riga.aperta > .reg-testa { background: var(--surface-2b); }
.reg-caret { color: var(--muted); }

/* Lo stato dell'audio come pastiglia e non come testo colorato: sono tre stati
   di una macchina (c'è / forse / non c'è), e una pastiglia si legge a colpo
   d'occhio scorrendo dieci righe. */
.reg-audio .reg-si, .reg-audio .reg-forse, .reg-audio .reg-no {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 2.5px 8px; border-radius: 6px; white-space: nowrap; border-bottom: none;
}
.reg-audio .reg-si    { background: var(--ok-bg);  color: var(--ok-fg); }
.reg-audio .reg-forse { background: var(--warn-bg); color: var(--warn-fg); cursor: help; }
.reg-audio .reg-no    { background: var(--off-bg); color: var(--off-fg); }

/* La nota della beauty: un riquadro azzurrino con la sua etichetta, come nel
   disegno. È l'unica cosa scritta a mano in mezzo a numeri e va vista. */
.reg-notaop {
  padding: 10px 12px; border-radius: 10px; background: var(--via-bg);
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
}
.reg-notaop-cap { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 4px; }
.reg-avviso {
  background: var(--warn-bg); color: var(--warn-fg); border-left: none;
  border-radius: 10px; padding: 10px 12px;
}
.reg-trascr {
  border-radius: 10px; border-left: none;
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--ink-2); font-size: 12px; line-height: 1.6;
}
.reg-manca, .reg-clip .reg-attesa { font-style: normal; }

/* Il player: un riquadro con gli angoli tondi, non una pillola. Dentro ci sono
   sei comandi e un tempo: la pillola li faceva sembrare una barra di stato. */
.reg-player {
  border-radius: 11px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border-2);
}
.reg-pp { background: var(--brand); }
.reg-salta {
  border: 1px solid var(--border-2); border-radius: 7px; padding: 5px 8px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.reg-salta:hover { background: var(--surface-3); color: var(--ink); }
.reg-barra-audio::after { top: 5px; height: 7px; border-radius: 4px; background: var(--line-2); }
.reg-avanzamento { top: 5px; height: 7px; border-radius: 4px; background: var(--brand); }
.reg-vel button { border-radius: 6px; font-weight: 700; }
.reg-vel button.active { background: var(--nav-bg); color: var(--nav-fg); }
.reg-play { background: var(--brand); }
.reg-play, .reg-link { border-radius: 9px; }
.reg-altre { border: 1px solid var(--border-2); border-radius: 9px; font-weight: 600; color: var(--ink-2); }
.reg-altre:hover { background: var(--surface-3); }

/* Sette colonne non stanno in un telefono. Da qui in giu' la riga diventa un
   blocchetto: cliente + durata, il numero per esteso, quando + contesto, esito +
   audio. Il numero si prende una riga sua e non la meta' di una: e' quello che si
   confronta a occhio con la rubrica, e tagliato non serve a niente. */
@media (max-width: 780px) {
  .reg-intestazione { display: none; }
  .reg-testa { grid-template-columns: 1fr auto 14px; gap: 3px 10px; }
  .reg-chi    { grid-area: 1 / 1 / 2 / 2; }
  .reg-durata { grid-area: 1 / 2 / 2 / 3; }
  .reg-caret  { grid-area: 1 / 3 / 5 / 4; align-self: center; }
  .reg-num    { grid-area: 2 / 1 / 3 / 3; }
  .reg-ora    { grid-area: 3 / 1 / 4 / 2; }
  .reg-centro { grid-area: 3 / 2 / 4 / 3; text-align: right; }
  .reg-esito  { grid-area: 4 / 1 / 5 / 2; }
  .reg-audio  { grid-area: 4 / 2 / 5 / 3; text-align: right; }
  /* senza numero la riga non deve lasciare un buco vuoto */
  .reg-num:has(.reg-manca-num) { display: none; }
}
@media (pointer: coarse) {
  .reg-testa { padding: 12px 8px; }
  .reg-play, .reg-link { padding: 9px 15px; }
}

/* ── "Registrazioni dal numero di telefono": la card in cima a #/beauty ─────
   Riusa il vestito del pop-up (.reg-*), perche' e' la stessa cosa vista dall'altro
   capo. Cambiano solo le colonne: CINQUE invece delle otto del pop-up (qui il
   cliente e il numero stanno una volta sola nell'intestazione del gruppo — un
   numero e' una persona, ripeterne il nome su ogni riga sarebbe rumore — e non
   c'e' la pastiglia dell'audio: qui l'audio c'e' sempre, e' il motivo per cui la riga
   esiste). Senza la regola a cinque colonne qui sotto la riga eredita la griglia
   a otto di .reg-testa e "Esito di quel giorno" finisce nella colonna NUMERO
   larga 100px fissi. */
.cerca-num .cn-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cerca-num .cn-form input[type=search] { margin-bottom: 0; width: 300px; }
.cerca-num .cn-form button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 18px; cursor: pointer;
  border: 0; border-radius: 999px; background: var(--brand-grad); color: #fff;
}
.cerca-num .cn-form button:hover { filter: brightness(1.06); }

.cn-gruppo { margin-top: 18px; }
.cn-gruppo + .cn-gruppo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--grid); }
.cn-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cn-chi { font-size: 15px; font-weight: 700; }
.cn-num { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cn-meta { font-size: 12px; color: var(--muted); margin: 3px 0 10px; text-wrap: pretty; }
.cerca-num .reg-avviso { margin-bottom: 12px; }
.cerca-num .reg-corpo { padding-bottom: 10px; }
.cerca-num .reg-intestazione, .cerca-num .reg-testa {
  grid-template-columns: 84px minmax(110px, 1fr) minmax(130px, 1.6fr) 56px 14px;
}

/* Su telefono l'esito prende una riga sua: accostato al nome, con "Richiamo
   importante (personale)" accanto, il nome della beauty si riduceva a "Valentin…". */
@media (max-width: 780px) {
  .cerca-num .reg-testa { grid-template-columns: 1fr auto 14px; gap: 3px 10px; }
  .cerca-num .reg-ora    { grid-area: 1 / 1 / 2 / 2; }
  .cerca-num .reg-durata { grid-area: 1 / 2 / 2 / 3; }
  .cerca-num .reg-caret  { grid-area: 1 / 3 / 4 / 4; align-self: center; }
  .cerca-num .reg-chi    { grid-area: 2 / 1 / 3 / 3; }
  .cerca-num .reg-esito  { grid-area: 3 / 1 / 4 / 3; }
  .cerca-num .cn-form input[type=search] { flex: 1 1 150px; width: auto; min-width: 0; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  BEAUTY MANAGER — la schermata del call center, ridisegnata (26/08)       ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Quasi tutto viene da altrove e non e' roba nuova: .pn-strip / .pn-step /
   .pn-gauge sono la fascia della Panoramica, .pn-tab e .pn-seg le tabelle e gli
   interruttori del Project Manager. Qui sotto c'e' SOLO quello che prima non
   esisteva da nessuna parte. */

/* SEI tessere, mai un numero variabile (Leo, 28/08): tre numeri e tre allarmi.
   Colonne FISSE e non auto-fit, perche' sei si divide bene e l'auto-fit invece
   contava quante ne stavano e lasciava le ultime orfane in fondo — cinque piu'
   una. Sei in riga sul monitor largo (236px l'una: ci stanno le didascalie
   lunghe degli allarmi), tre e tre in mezzo, due e due sul telefono.
   ⚠️ La tessera delle registrazioni la vedono i soli admin: per gli altri sono
   CINQUE, e allora l'ultima riga da tre ne ha due. E' il caso peggiore e va
   bene cosi': meglio una fila incompleta che una griglia che cambia forma. */
#chPassi { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1379px) { #chPassi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 759px)  { #chPassi { grid-template-columns: repeat(2, 1fr); } }

/* Le didascalie della fascia nascono `nowrap` perche' altrove sono corte ("Lead
   FB", "Presenze"). Qui no: "BEAUTY SOTTO IL 60% REGISTRATE" e' piu' larga di una
   colonna da 164px e in nowrap usciva dalla sua cella scavalcando la tessera
   accanto — la stessa trappola gia' pagata in Sauron con "NUOVI CLIENTI — 1a
   RATA". Va a capo solo dove non ci sta: le tessere corte non cambiano di un
   pixel. */
#chPassi .pn-cap { white-space: normal; line-height: 1.3; }

/* I binari sono TRE (Leo, 28/08): app su risposta, app su lead, show. Colonne
   fisse per lo stesso motivo delle tessere; sotto i 760px uno sotto l'altro,
   perche' un terzo di telefono e' 110px e il binario non si legge piu'. */
#chGauge { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 759px) { #chGauge { grid-template-columns: 1fr; } }

/* Il binario senza tacca. Ce l'hanno i quattro gauge che non hanno un benchmark:
   il loro binario e' una proporzione (quanta parte del tutto), non una distanza
   da un obiettivo — e una tacca a meta' si leggerebbe come un obiettivo. */
.pn-gauge-track.senza-tacca > b { display: none; }

/* Le due carte affiancate: l'andamento e nuovi-contro-vecchi. Stanno insieme
   perche' la seconda e' la risposta alla prima quando la linea non sale; 1.35fr
   perche' la tabellina ha quattro colonne strette e il grafico no. */
.bm-due { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.bm-due > .card { margin-bottom: 18px; }
/* la legenda sta nella testata della carta, in fondo a destra: e' un'etichetta
   del grafico, non una riga di contenuto */
.bm-due .pn-tab-head .legend { margin-bottom: 0; flex: none; }

/* ── KPI ALL 3: i soldi e l'esito, affiancati ─────────────────────────────────
   Due carte a meta' schermo. Non e' .bm-due (1.35fr/1fr, tarata su grafico +
   tabellina stretta): qui a destra c'e' una barra a segmenti larga quanto puo',
   e mezzo e mezzo e' la divisione giusta.
   ⚠️ minmax(0, 1fr) e non 1fr: senza il minimo a zero un SVG dentro una colonna
      grid non si lascia stringere e la carta di destra esce dallo schermo. */
.ka-due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ka-due > .card { margin-bottom: 18px; display: flex; flex-direction: column; }
.ka-due .pn-tab-head .legend { margin-bottom: 0; flex: none; }
/* 980 e non 1100: 1024 e' l'iPad in orizzontale, e a 1100 le due carte di KPI ALL 3
   si incolonnerebbero proprio li'. Stessa ragione del 1020 dei gruppi KPI. */
@media (max-width: 980px) { .ka-due { grid-template-columns: minmax(0, 1fr); } }

/* La riga in fondo alla carta che dice cosa se ne ricava. `margin-top: auto` la
   incolla al fondo, cosi' due carte affiancate di contenuto diverso finiscono
   comunque alla stessa altezza invece di lasciare un gradino. */
.ka-quindi {
  margin-top: auto; padding: 12px 20px 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
}
.ka-quindi b { color: var(--text-primary); }

/* Il corpo della carta se lo prende da se', esattamente come .pn-grafico nella
   carta accanto: `.tab-nuova` ha padding 0 perche' testata, tabella e piede
   arrivano al bordo, e senza questa riga la barra, le etichette e i numeri
   finivano INCOLLATI ai bordi della carta. Il filetto in cima e' lo stesso di
   .pn-grafico, cosi' le due carte affiancate hanno lo stesso ritmo. */
.ka-corpo { padding: 16px 20px 4px; border-top: 1px solid var(--line); }
.ka-segmenti { margin-bottom: 16px; }

/* ── KPI ALL 3 · le chiusure in ordine di tempo ──────────────────────────────
   Non una tabella: i nomi delle aziende e delle campagne arrivano a sessanta
   caratteri, e in colonna diventano un muro di ellissi. Qui la data sta su un
   binario stretto a sinistra, il nome ha tutta la riga e la strada
   dell'annuncio va a capo da sola quando serve.
   ⚠️ `.tab-nuova` ha `padding: 0` — testata e piede arrivano al bordo — quindi
      il respiro se lo prende questo contenitore, esattamente come .ka-corpo. */
.ka-diario { padding: 6px 20px 14px; border-top: 1px solid var(--line); }
.ka-diario .status { padding: 22px 0; }
.ka-di-mese { display: flex; align-items: baseline; gap: 10px; padding: 16px 0 8px; }
.ka-di-mese span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.ka-di-mese em { font-size: 11.5px; font-style: normal; color: var(--muted); }
.ka-di-ev { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line-3); }
/* il binario delle date: larghezza fissa, cosi' i giorni restano incolonnati
   anche quando il nome accanto va a capo */
.ka-di-bin { flex: none; width: 44px; text-align: center; padding-top: 1px; }
.ka-di-bin b { display: block; font-size: 17px; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ka-di-bin i { display: block; font-style: normal; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
/* ⚠️ `flex-basis: 0` e non `auto`: su .ka-di-ev c'e' il wrap (serve al telefono,
   dove la cifra va sotto) e con basis auto il corpo si porta dietro la larghezza
   del suo contenuto — una pastiglia da 260px lo faceva andare a capo SOTTO il
   binario delle date, con il nome che ripartiva dal bordo. Con basis 0 il corpo
   non ha mai una taglia sua da difendere: si stringe e resta accanto alla data. */
.ka-di-corpo { flex: 1 1 0; min-width: 0; }
.ka-di-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ka-di-az { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ka-di-ref { font-size: 11.5px; color: var(--muted); }
.ka-di-via { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* i tre passi della strada sono pastiglie, non testo corrente: cosi' si vede a
   colpo d'occhio dove finisce la campagna e dove comincia l'adset */
.ka-di-liv {
  font-size: 11px; color: var(--muted); background: var(--surface-3);
  border-radius: 6px; padding: 2px 7px; max-width: min(260px, 100%);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ka-di-liv.forte { color: var(--ink); font-weight: 600; }
.ka-di-fre { font-size: 11px; color: var(--muted-2); }
.ka-di-vuoto { font-size: 11px; color: var(--muted-2); }
.ka-di-num { flex: none; text-align: right; }
.ka-di-num b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ka-di-num i { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
/* sul telefono la colonna dei soldi va sotto: tre blocchi in fila su 375px
   lascerebbero al nome una ventina di pixel */
@media (max-width: 640px) {
  .ka-di-ev { flex-wrap: wrap; }
  .ka-di-num { width: 100%; text-align: left; padding-left: 58px; margin-top: 4px; }
  .ka-di-num b, .ka-di-num i { display: inline; }
  .ka-di-num i::before { content: ' · '; }
}

/* ── una barra sola divisa in segmenti (parte-tutto) ────────────────────────
   2px di SUPERFICIE fra un segmento e l'altro (il `gap`), mai un bordo: un
   bordo aggiunge una terza tinta che non vuol dire niente.
   La percentuale entra nel segmento solo se ci sta — sotto il 10% la porta la
   legenda, o si vedrebbe mezza cifra tagliata. */
.sg-barra { display: flex; height: 30px; border-radius: 6px; overflow: hidden; gap: 2px; }
/* il `color` NON sta qui: lo scrive renderSegmenti segmento per segmento
   (--seg-N-ink), perche' il bianco su un riempimento chiaro sparisce */
.sg-barra > i {
  display: flex; align-items: center; justify-content: center; min-width: 3px;
  font-size: 11px; font-weight: 700; font-style: normal;
}
.sg-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12px; color: var(--text-secondary); }
.sg-legenda .key { display: inline-flex; align-items: center; gap: 6px; }
.sg-legenda .swatch { width: 10px; height: 10px; border-radius: 3px; }
.sg-legenda b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── barre orizzontali ordinate ──────────────────────────────────────────────
   Nome a sinistra, pista, valore a destra, e sotto la riga di contorno (quota e
   costo). Le etichette stanno FUORI dalla barra: dentro un segmento corto
   verrebbero tagliate a meta' parola. */
.bh { display: grid; gap: 10px; }
.bh-riga {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto;
  grid-template-areas: "cap pista val" ". sotto sotto";
  align-items: center; column-gap: 12px; row-gap: 3px;
}
.bh-cap {
  grid-area: cap; min-width: 0; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bh-pista { grid-area: pista; height: 12px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.bh-pista > i { display: block; height: 100%; border-radius: 4px; }
.bh-val { grid-area: val; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.bh-sotto { grid-area: sotto; font-size: 11.5px; color: var(--muted); }
@media (max-width: 640px) {
  .bh-riga { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cap val" "pista pista" "sotto sotto"; }
}

/* Il segno della legenda per una serie disegnata come LINEA: una barretta, non
   un quadratino. Il quadratino dice "barra", ed e' proprio l'altra serie. */
.legend .swatch.linea { height: 3px; border-radius: 2px; }
/* "scala sx" / "scala dx": con due assi la legenda deve dire anche QUALE dei due
   si sta leggendo, o i numeri a destra sembrano quelli a sinistra */
.bm-scala { font-style: normal; font-size: 10px; color: var(--muted); letter-spacing: 0.02em; }

/* La tessera "Beauty sotto il 90%" e' un BOTTONE: porta alla lista di chi ci sta
   sotto. Deve restare identica alle altre della fascia — se si vestisse da bottone
   sembrerebbe un comando in mezzo ai numeri — e dichiararsi solo col cursore e con
   una reazione al passaggio del mouse. */
/* Dove atterra uno scorrimento comandato da un clic. Testata e barra filtri sono
   appiccicate in cima: senza questo margine il bersaglio finisce SOTTO di loro e la
   prima riga della tabella non si vede. Vale anche per la tabella del Project
   Manager, che ci arriva dalle sue bande d'allarme con lo stesso scrollIntoView. */
#chSetterCard, #chReport, #mgTable { scroll-margin-top: 124px; }

.pn-step[role="button"]:hover { background: var(--hover); }
.pn-step[role="button"]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* ── le tre tessere d'allarme ────────────────────────────────────────────────
   Sotto il 90%, registrate sotto il 60%, almeno un modulo non completato: le tre
   che si aprono su una lista. sono IMPILATE come tutte le altre
   tessere della fascia — didascalia, numero, sottotitolo — e si distinguono per
   due cose sole:
     · il numero e' rosso quando non e' zero;
     · la freccia in basso a destra dice che la tessera si apre. Prima lo diceva
       la coda del sottotitolo, "— clicca per la lista", tre volte nella stessa
       fascia.
   🔁 Il 28/08 il numero e' stato per mezz'ora in alto a DESTRA, sulla riga della
   didascalia: era cosi' nel mockup di Leo, e l'ha fatto rimettere sotto — "metti
   7 5 e 9 sotto il testo come le altre scritte". Non riprovarci senza chiedere.
   ⚠️ `padding-bottom` piu' alto del solito: e' lo spazio della freccia, che e'
   in posizione assoluta e non spinge niente. */
.bm-all { padding-bottom: 34px; }
/* rosso solo quando il numero NON e' zero: un allarme che dice "0" grida di stare
   tranquilli. Stessa regola delle bande del Project Manager. */
.bm-all.ko .pn-val { color: var(--bad); }
.bm-frecc { position: absolute; right: 16px; bottom: 12px; font-size: 14px; color: var(--muted);
            transition: transform .12s ease, color .12s ease; }
/* l'ancora della freccia. Sulle altre tessere non cambia niente. */
.pn-step { position: relative; }
/* 🖱 Su una tessera che si CLICCA la selezione del testo e' solo un fastidio: il
   trascinamento del mouse dipingeva di blu mezza tessera invece di aprirla. */
.pn-step[role="button"] { cursor: pointer; -webkit-user-select: none; user-select: none; }
.pn-step[role="button"]:hover .bm-frecc { color: var(--ink); transform: translateX(3px); }

/* La riga derivata dentro una tessera: il numero che prima aveva una colonna sua
   e adesso vive sotto sua madre — le risposte sotto Chiamate, gli acconti sotto
   Appuntamenti (Leo, 28/08, dal suo esempio). Piu' piccola e piu' spenta del
   sottotitolo: e' una cosa in meno da leggere, non una in piu'. */
.bm-der { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* Quanti sono, accanto al titolo della tabella: prima stavano nella testata di
   pagina, che dal 27/08 non c'e' piu'. Con una ricerca attiva diventa "3 su 18",
   cosi' si vede subito che quello a schermo non e' tutto. */
.bm-conta { font-size: 11.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
/* nota di servizio dentro la barra filtri, accanto a un interruttore di sezione */
.fx-nota { font-size: 11px; color: var(--muted); }

/* Le cifre nel piede della carta dell'andamento: quello che si leggerebbe a
   occhio dalla linea, e a occhio si sbaglia. */
.bm-cifre { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.bm-cifre b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* La cella del nome nella tabella per beauty: iniziali + nome. Il pallino non e'
   decorazione — e' l'unico appiglio per ritrovare una riga in un elenco di venti
   nomi tutti della stessa lunghezza. */
.bm-chi { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bm-ini {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em;
  background: var(--surface-3); color: var(--ink-2);
}
.bm-nome { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* Nuovi contro vecchi: quattro colonne, la prima e' l'etichetta. Le righe di
   percentuale sono piu' pallide dei conteggi — sono una lettura dei numeri
   sopra, non un numero in piu'. */
.bm-nv td.name { font-weight: 500; color: var(--ink-2); }
.bm-nv tbody td { text-align: right; }
.bm-nv tbody td.name { text-align: left; }

@media (max-width: 1100px) {
  .bm-due { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* il nome per esteso mangerebbe mezza tabella su un telefono */
  .bm-nome { max-width: 118px; }
  .bm-cifre { gap: 2px 14px; }
}

/* ── ACCESSI (linguaggio nuovo, 27/08) ───────────────────────────────────────
   La sezione aveva la chrome nuova e il corpo vecchio: una griglia di sei
   colonne di caselle. Qui le classi sono quelle di Beauty Manager e del Project
   Manager (.pn-strip / .pn-tab / .tk-btn) — di nuovo c'e' solo il prefisso .ac-.

   La tessera della fascia E' il filtro della tabella: accesa, si tinge come una
   voce di menu scelta invece di restare bianca come le altre. */
/* Qui la fascia PUO' tagliare quello che esce (le altre no, o mangerebbero i
   fumetti ⓘ): dentro queste tessere di ⓘ non ce n'è, e senza il taglio il fondo
   di una tessera accesa sborderebbe dagli angoli tondi della carta. */
.ac-strip { overflow: hidden; }
.ac-passo.on { background: var(--nav-bg); box-shadow: inset 0 0 0 1px var(--border-2); }
.ac-passo.on .pn-val, .ac-passo.on .pn-cap { color: var(--nav-fg); }
/* rosso solo se il numero NON e' zero: un allarme che dice "0" grida di stare
   tranquilli. Stessa regola delle bande del Project Manager. */
.ac-passo.ko .pn-val { color: var(--bad); }

/* Larghezze in colgroup + table-layout fisso: e' quello che tiene le targhette
   INCOLONNATE fra una riga e l'altra. Senza, ogni cella dimensiona la sua
   griglia sul proprio contenuto e "Beauty" di una riga finisce sotto "Sales
   Manager" di quella sopra — cioe' si perde la lettura per colonna, che era
   l'unica cosa buona della griglia di caselle. */
.ac-tab { table-layout: fixed; min-width: 1060px; }
.ac-tab td { vertical-align: middle; }
.ac-tab tbody td { padding-top: 7px; padding-bottom: 7px; }
/* Le colonne di serie sono allineate a destra perché di solito sono numeri: qui
   dentro non c'è un numero, ci sono targhette, tendine e stati. Si allinea per
   CLASSE e non per nth-child: le righe di chi non ha un account hanno una cella
   sola al posto di quattro, quindi la posizione non è la stessa su ogni riga. */
.ac-tab th, .ac-tab td { text-align: left; }
.ac-tab td.ac-entra { text-align: center; }
.ac-tab td.ac-azioni, .ac-tab th:last-child { text-align: right; }
/* nessuna colonna si ordina: la manina prometterebbe un ordinamento che non c'è */
.ac-tab thead th { cursor: default; }
.ac-tab thead th:hover { color: var(--muted); }
/* Chi in anagrafica c'è ma nell'app non entra: una cella sola al posto delle
   quattro dell'accesso. Quattro celle vuote in fila si leggono come un dato che
   manca, non come "non ha un account". */
.ac-senza { color: var(--muted); font-size: 12.5px; white-space: normal; }
.ac-senza > * { vertical-align: middle; margin-right: 8px; }
.ac-senza .cell-sel { max-width: 240px; }

/* 🚨 Segnato uscito dal team ma con l'accesso ancora acceso: è il buco che
   questa pagina esiste per far notare, quindi la riga NON si sbiadisce come le
   altre uscite e si porta il filo rosso. */
.ac-tab tr.ac-allarme > td { opacity: 1; background: var(--auto-bg); }
.ac-tab tr.ac-allarme > td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.tm-segnale.fuori { background: var(--bad-bg); color: var(--bad); }
.ac-tab tr.ac-off td { opacity: 0.55; }
/* riga toccata e non ancora salvata: un filo brand a sinistra, non un fondo
   colorato (le righe qui sono gia' fitte di colore). */
.ac-tab tr.ac-dirty > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* La persona: iniziali + nome + email sotto. Il nome e l'email erano due colonne
   e la seconda era larga quanto la prima pur essendo un'etichetta di servizio. */
/* Il cursore apre il cassetto della persona. È l'unico modo di aprirlo: un
   click sulla riga intera sarebbe partito anche scrivendo nel nome. */
.ac-caret {
  flex: none; width: 20px; height: 20px; padding: 0; cursor: pointer;
  font: inherit; font-size: 15px; line-height: 1; color: var(--muted);
  background: none; border: none; border-radius: 6px;
  transition: transform 0.15s, background 0.15s;
}
.ac-caret:hover { background: var(--surface-3); color: var(--ink); }
.ac-caret.vuoto { cursor: default; }
.ac-aperta .ac-caret { transform: rotate(90deg); color: var(--ink); }

.ac-chi { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ac-ini {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em;
  background: var(--surface-3); color: var(--ink-2);
}
.ac-chi-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.ac-chi-txt b { font-size: 13px; font-weight: 650; padding-left: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-chi-txt .tm-nome { width: 100%; }
/* la riga di servizio sotto il nome: ruoli ed email dell'account. Allineata al
   testo del nome, che sta dentro una casella con 7px di respiro. */
.ac-meta {
  padding-left: 7px; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Le sezioni: sei targhette in una griglia a colonne uguali. Spenta = contorno
   e niente altro; accesa = fondo brand. Admin ha il suo colore perche' non e'
   una sezione fra le altre: e' il passe-partout. */
/* TRE per riga, non sei: in fila da sei "Delivery Manager" e "Manager
   venditori" si leggono solo tronche, e un permesso non è una cosa da indovinare
   dalle prime otto lettere. Due file da tre stanno in 30% di tabella per intero. */
.ac-sez { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
/* 🚨 Spenta = TESTO, non una casella vuota. Sei riquadri vuoti per riga, per
   trenta righe, erano centottanta scatole che chiedevano attenzione senza dire
   niente: la griglia si legge lo stesso — le colonne sono fisse — e a saltare
   all'occhio restano solo le sezioni davvero accese. */
.ac-chip {
  font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.25;
  padding: 6px 3px; cursor: pointer; text-align: center; letter-spacing: -0.005em;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-chip:hover { background: var(--surface-3); color: var(--ink-2); }
.ac-chip.on { background: var(--nav-bg); color: var(--nav-fg); font-weight: 700; }
.ac-adm.on { background: rgba(179, 137, 26, 0.16); color: var(--gold); }
/* accesa PERCHE' c'e' Admin, non perche' l'ha scelto qualcuno: si vede che c'e'
   ma non si puo' toccare, e il tratteggio dice che e' una conseguenza. */
.ac-chip.implicita { cursor: default; opacity: 0.55; font-weight: 600; }
.ac-chip:disabled:hover { background: var(--nav-bg); }

.ac-come { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ac-come:hover { color: var(--ink-2); }

.ac-tutti { font-size: 11.5px; color: var(--muted); font-style: italic; }
.ac-npicked { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* Ultimo accesso: il colore dice da quanto, il testo dice quando. Freddo e' un
   grigio, non un rosso — non essere entrati non e' un errore. */
.ac-quando { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-quando.ok { color: var(--ink-2); }
.ac-quando.tiepido { color: var(--muted); }
.ac-quando.freddo { color: var(--muted); }
.ac-quando.mai { color: var(--warn-fg); font-weight: 600; }

/* "Può entrare": una casella di spunta e' una scelta da salvare, questo si
   applica subito — un interruttore lo dice senza scriverlo. */
.ac-sw { display: inline-flex; cursor: pointer; }
.ac-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.ac-sw span {
  width: 34px; height: 19px; border-radius: 999px; background: var(--track);
  position: relative; transition: background 0.15s;
}
.ac-sw span::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-pill); transition: transform 0.15s;
}
.ac-sw input:checked + span { background: var(--good); }
.ac-sw input:checked + span::after { transform: translateX(15px); }
.ac-sw input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }

/* Il CASSETTO della persona: telefono, ruoli, forme nei dati, centri e le
   azioni rare. Erano due colonne fitte di targhette in ogni riga; qui sono
   campi con la loro etichetta, e si aprono solo quando servono. */
.ac-det-row > td { background: var(--surface-2); padding: 0; border-bottom: 1px solid var(--line-2b); }
.ac-det { padding: 14px 18px 15px 46px; }
.ac-det-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 22px; }
.ac-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ac-campo.ac-largo { grid-column: span 2; }
.ac-lab { font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.ac-det-azioni { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line-2); }
.ac-det .tm-tel { width: 100%; max-width: 190px; padding: 5px 7px; font-size: 12.5px; }

/* In riga restano Salva e Password: le altre azioni sono nel cassetto. */
.ac-azioni { text-align: right; white-space: nowrap; }
.ac-azioni .ac-save { min-width: 68px; margin-right: 10px; }
.ac-link {
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 0; cursor: pointer;
  background: none; border: none; color: var(--muted); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--border-2);
}
.ac-link:hover { color: var(--ink); }
.ac-link.ac-del:hover { color: var(--bad); }
.ac-msg:empty { display: none; }

.ac-impatto { margin: 0 0 12px 18px; font-size: 13px; line-height: 1.7; }

/* ── TEAM dentro la carta nuova ─────────────────────────────────────────────
   .pn-tab ha padding zero (il bordo della carta lo tirano le sue fasce): quello
   che ci si mette dentro se lo porta da sé, allineato ai 20px della testata. */
/* la tendina dei ruoli sta nella fila dei comandi: stessa altezza della
   casella di ricerca, e il menu si apre sotto senza allargare la testata */
.pn-tab-cmd .dd-btn { padding: 7px 12px; }
/* il piede scrive per esteso chi e' spuntato: col menu chiuso il bottone da solo
   direbbe "5 persone", e chi sono si vedrebbe solo riaprendo */
.dd-piede {
  white-space: normal; line-height: 1.5;
  padding: 8px 12px 4px; font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--line-2); margin-top: 4px;
}
.pn-tab-cmd .tm-toggle { white-space: nowrap; }
.pn-tab > .status { padding: 28px; }

@media (max-width: 900px) {
  /* col dito la tabella scorre già in orizzontale: qui si stringe solo quanto
     basta a non far sparire la colonna dei comandi */
  .ac-sez { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-tab { min-width: 900px; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  SAURON — la schermata dei soldi, ridisegnata (27/08)                    ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Sauron aveva già la chrome nuova (la testata, le linguette) e il corpo
   vecchio: cinque riquadri di KPI affiancati in Dashboard, carte con gli <h2>
   vestiti con lo style inline, tabelle in cornice dentro un'altra cornice.
   Qui non nasce quasi niente: la fascia è .pn-strip della Panoramica, le carte
   sono .tab-nuova del Project Manager, le tessere sono .pn-fascia. Sotto c'è
   SOLO quello che prima non esisteva da nessuna parte. */

/* ── la barra filtri quando comanda solo la sezione ──────────────────────────
   Sauron guarda un MESE, non un periodo: la fascia dei preset, l'intervallo a
   mano e le tendine persona non comandano niente. Prima per questo la barra
   spariva del tutto e la sezione se ne disegnava una propria, che scorreva via
   con la pagina. Ora resta la barra di tutti — appiccicata in cima — con dentro
   il solo slot dei comandi di sezione. La classe la mette app.js sul GUSCIO
   (#filterWrap) per rotta, così nessuna riga resta nascosta quando si va
   altrove: è il CSS a dirlo, in un posto solo. */
.filtri-solo-sezione #datePresets,
.filtri-solo-sezione #dateCustom,
.filtri-solo-sezione #consulenteRow,
.filtri-solo-sezione .filters-sep { display: none; }

/* Il selettore del mese: le due frecce e il campo sono UN comando solo, non tre
   bottoni sciolti in fila. Cornice unica, filetti a dividere — la stessa forma
   del segmentato accanto. */
.sr-mese {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-2); border-radius: 9px;
  background: var(--surface); overflow: hidden;
}
.sr-mese > button {
  font: inherit; font-size: 15px; line-height: 1; padding: 0 10px; cursor: pointer;
  border: none; background: none; color: var(--muted-2);
}
.sr-mese > button:hover { background: var(--hover); color: var(--ink); }
.sr-mese > input[type=month] {
  margin: 0; border: none; border-radius: 0; background: none;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 5px 8px;
}
.sr-mese > input[type=month]:focus { outline: none; }

/* ── i passi della fascia: qui le etichette sono lunghe ──────────────────────
   `.pn-cap` nasce `nowrap` perché altrove le didascalie sono corte ("Lead FB",
   "Presenze"). Qui no — "NUOVI CLIENTI — 1ª RATA" è più larga di una colonna da
   164px, e in nowrap usciva dalla sua cella scavalcando la ⓘ della tessera
   accanto. Va a capo solo quando davvero non ci sta: dove c'è spazio non cambia
   niente. Stessa scelta già fatta per `.pn-gauge-lab` col Sales Manager. */
.sr-funnel .pn-cap { white-space: normal; line-height: 1.3; }

/* ── due carte affiancate ────────────────────────────────────────────────────
   .bm-due del Beauty Manager sta a 1,35fr/1fr perché lì a sinistra c'è un
   grafico. Qui le due carte portano lo stesso genere di cose — quattro tessere
   a testa — e vanno di pari passo. Sotto i 1100px si incolonnano: due fasce da
   quattro tessere in mezza pagina non le legge nessuno. */
.sr-due { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sr-due > .card { margin-bottom: 18px; }
@media (max-width: 1100px) {
  .sr-due { grid-template-columns: 1fr; gap: 0; }
}

/* ── il totale in cima al tab Costi ──────────────────────────────────────────
   Era una card con due <h2> e uno style inline che spingeva il numero a destra.
   Adesso è la testata di una carta con il numero al posto dei comandi: stessa
   riga, stessa altezza dei titoli delle altre. */
.sr-totale { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sr-totale-sub { font-size: 11px; color: var(--muted); text-align: right; margin-top: 2px; }

/* ── il piede di una carta, quando è una nota lunga ─────────────────────────
   .pn-tab-foot nasce per una riga sola; le note di Sauron sono paragrafi (le
   definizioni del tab Report, le avvertenze del P&L). */
/* Una nota lunga quanto una carta larga 1400px non la legge nessuno: la riga si
   ferma dove l'occhio riesce a tornare a capo da solo. */
.pn-tab-foot p, .pn-tab-foot ul { max-width: 108ch; }
.pn-tab-foot p { margin: 0 0 7px; }
.pn-tab-foot p:last-child { margin-bottom: 0; }
.pn-tab-foot ul { margin: 0; padding-left: 17px; }
.pn-tab-foot li { margin-bottom: 6px; line-height: 1.55; }
.pn-tab-foot li:last-child { margin-bottom: 0; }

/* ── esportazioni ────────────────────────────────────────────────────────────
   Righe della stessa carta invece di sei riquadri: sono sei varianti della
   stessa azione, e l'unica cosa che le distingue è la frase. */
.sr-exp { display: grid; }
.sr-exp-riga {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--line);
}
.sr-exp-riga > div { margin-right: auto; min-width: 0; }
.sr-exp-tit { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sr-exp-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ── P&L: la tabella del conto economico ─────────────────────────────────────
   Le righe-titolo delle sezioni e i totali avevano i colori del foglio vecchio.
   Qui prendono quelli delle intestazioni delle tabelle nuove. */
:is(.pn-tab, .tab-nuova) .fn-pnl tr.fn-head td {
  background: var(--surface-2b); color: var(--muted);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding-top: 13px; padding-bottom: 9px; border-bottom: 1px solid var(--line-2b);
}
:is(.pn-tab, .tab-nuova) .fn-pnl tr.fn-tot td {
  font-weight: 700; border-top: 1px solid var(--line-2b); background: var(--surface-2b);
}
:is(.pn-tab, .tab-nuova) .fn-pnl tr.fn-head:hover td,
:is(.pn-tab, .tab-nuova) .fn-pnl tr.fn-tot:hover td { background: var(--surface-2b); }

/* ── Delivery: il titolo di un ruolo dentro la carta ─────────────────────────
   Le tre tabelle per ruolo stanno in una carta sola, separate da una testata
   ciascuna: erano tre carte, e tre cornici per la stessa domanda ("chi è
   pieno?") facevano sembrare tre sezioni diverse. */
.pn-tab-head.sr-sotto { border-top: 1px solid var(--line); }

/* ── il modulo del Marketing dentro una carta senza padding ──────────────── */
.sr-modulo { padding: 4px 20px 20px; }

/* ── la barra dei comandi di KPI ALL 3 ───────────────────────────────────────
   Il suo periodo NON è il mese in alto: i comandi stanno dentro la sua carta,
   non nella barra appiccicata, dove sembrerebbero comandare tutta la sezione.
   Era una `.filters.filter-bar` piantata in mezzo alla pagina — cioè il guscio
   della barra di sistema, in un posto dove nessuno si aspetta di trovarlo. */
.sr-barra { border-top: 1px solid var(--line); background: var(--surface-2b); }
/* 🚨 La carta che porta la barra dei filtri NON puo' tagliare quello che le
   esce fuori: `:is(.pn-tab, .tab-nuova)` ha `overflow: hidden` (serve alle
   fasce e alla tabella per arrivare al bordo tondo) e con quello la tendina
   delle campagne si apriva TAGLIATA al bordo della carta — si vedeva la prima
   voce e mezza e sembrava che il filtro non funzionasse (Leo, 31/08).
   Il taglio serviva solo a stondare i due angoli in basso della .sr-barra, che
   e' l'ultima figlia: glieli si da' direttamente, e la carta puo' lasciar
   uscire la tendina. 15px e non 16: dentro il bordo da 1px della carta. */
.sr-carta { overflow: visible; }
.sr-carta .sr-barra { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }

/* La ricerca dentro la tendina: compare dalle dodici voci in su, cioe' di fatto
   sempre quando si filtrano gli annunci (un centinaio in un mese). */
.dd-cerca {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 6px;
  font: inherit; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text-primary);
}
.dd-cerca:focus { outline: none; border-color: var(--series-1); }
.sr-barra-riga {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 20px; border-top: 1px solid var(--line);
}
.sr-barra-riga:first-child { border-top: none; }
.sr-barra-riga input[type=date] {
  margin: 0; font-size: 12.5px; padding: 5px 9px; border-radius: 9px;
  border: 1px solid var(--border-2); background: var(--surface);
}
.sr-freccia { color: var(--muted); }
/* I preset del periodo non sono uno stato ma tre scorciatoie: restano bottoni
   sciolti. In un segmentato — dove uno dei tre è sempre "quello scelto" — un
   binario con nessuno acceso si legge come un comando rotto. */
.sr-preset { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sr-preset button {
  font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); white-space: nowrap;
}
.sr-preset button:hover { border-color: var(--border-hover); color: var(--ink); }

/* ── i gruppi KPI, spogliati ─────────────────────────────────────────────────
   `renderKpiGroups` disegna delle carte col filo brand sul bordo sinistro: il
   linguaggio vecchio. Dentro una carta nuova diventano le colonne di una fascia,
   come .pn-fascia fa con le tile — senza toccare una riga di JavaScript.
   L'unico posto che le usa ancora è KPI ALL 3. */
.gruppi-nuovi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 0; margin: 0; border-top: 1px solid var(--line);
}
.gruppi-nuovi .kpi-group {
  background: none; border: none; border-radius: 0; box-shadow: none;
  border-left: 1px solid var(--line); padding: 15px 18px 16px;
}
.gruppi-nuovi .kpi-group::before { display: none; }
.gruppi-nuovi .kpi-group:first-child { border-left: none; }
.gruppi-nuovi .kg-title { font-size: 9.5px; letter-spacing: 0.14em; color: var(--muted); }
.gruppi-nuovi .kg-step { background: var(--surface-3); color: var(--ink-2); }

/* Due fasce di tessere una sotto l'altra nella stessa carta: un filetto a
   dividerle, o sembrerebbero una fascia sola andata a capo. */
.pn-fascia + .pn-fascia { border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  .sr-exp-riga { padding: 12px 14px; }
  .sr-modulo { padding: 4px 14px 16px; }
  .sr-barra-riga { padding: 10px 14px; }
  .sr-totale { font-size: 24px; }
  /* La barra qui non è richiudibile: il mese è l'unico comando e nasconderlo
     dietro "FILTRI" vorrebbe dire un tap per ogni cambio di mese. Lo slot si
     comporta come una riga APERTA della barra: una striscia sola che scorre di
     lato, come la navigazione — a capo, il segmentato delle agenzie usciva dallo
     schermo a destra e non c'era modo di raggiungerlo. */
  .filtri-solo-sezione .filtri-apri { display: none; }
  .filtri-solo-sezione .filter-bar { padding: 9px 0; }
  .filtri-solo-sezione .filter-bar:not(.aperta) > #filtriExtra {
    display: flex; padding: 0 13px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .filtri-solo-sezione .filter-bar > #filtriExtra::-webkit-scrollbar { display: none; }
}

/* ── Drill-down su schermo stretto ────────────────────────────────────────
   Dalla riga delle schede pende anche il periodo (due caselle data + Applica).
   A 375px non ci sta in fila e "Applica" finiva oltre il bordo destro della
   finestra, cioe' irraggiungibile: qui va a capo. ⚠️ Le caselle data a 16px le
   impone la regola iOS piu' su, quindi la riga e' larga davvero — stringere il
   carattere non sarebbe una soluzione, sarebbe lo zoom al focus. */
@media (max-width: 640px) {
  .dr-barra { padding: 12px 16px; gap: 10px; }
  .dr-periodo { flex-wrap: wrap; row-gap: 8px; }
  .and-testa { padding: 14px 16px 8px; }
  .and-tela { padding: 6px 4px 4px; }
  .and-piede { padding: 8px 16px 0; }
}

/* ╭──────────────────────────────────────────────────────────────────────────╮
   │  6 · CHI HA CHIESTO MENO MOVIMENTO                                       │
   ╰──────────────────────────────────────────────────────────────────────────╯
   Sta in fondo a tutto ed e' l'unico posto dove puo' stare: spegne cose
   dichiarate in duecento punti diversi del foglio, e per farlo senza elencarli
   uno per uno serve `!important` piu' l'ultima parola nell'ordine.

   Chi ha acceso "riduci il movimento" nel sistema non lo ha fatto per gusto:
   per una parte delle persone un'animazione che parte da sola e' nausea o
   emicrania, e in questa app ce ne sono tre che non si possono nemmeno evitare
   guardando altrove — la moneta che gira al caricamento, il pallino che pulsa
   nella testata (sempre a schermo) e i tre puntini dell'assistente.

   Non si NASCONDE niente: 0,01ms invece di 0 perche' l'animazione deve
   comunque partire e finire, cosi' chi ascolta `animationend` (nessuno oggi,
   ma e' la trappola classica) non resta appeso. Il risultato e' che ogni cosa
   si presenta gia' al suo stato finale invece di arrivarci muovendosi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}