/* =====================================================================
   COMPONENTI COMUNI DEL CRM (reparto DESIGN)
   Caricato DOPO modern-theme.css. Regole scritte apposta per non
   pestare gli stili che le pagine hanno gia': classi nuove (cc-*) per
   i pezzi nuovi, e un "livello" a parte (@layer) per le regole di
   base, che cosi' perdono sempre contro qualunque regola della pagina.
   I colori sono tutti variabili del tema: valgono in chiaro e in scuro.
   ===================================================================== */

/* --- MARCA_76141_OCCHIO_PASSWORD: inizio ---------------------------------
   L'occhio dentro i campi password (vedi componenti-comuni.js).
   Queste regole NON stanno nel livello a parte, apposta: alcune pagine
   danno a TUTTI i pulsanti del modulo larghezza piena e margini (la
   pagina di accesso, per esempio), e l'occhio deve restare un occhio.
   Per questo il pulsante parte da "all:unset" e si ridisegna da capo.
   ------------------------------------------------------------------------ */
.cc-occhio-campo{position:relative;display:block;min-width:0}
.cc-occhio-campo.cc-occhio-in-linea{display:inline-block;vertical-align:middle}
/* il campo lo nasconde la pagina (x-show): sparisce anche l'occhio */
.cc-occhio-campo:has(> .cc-occhio-input[style*="display: none"]),
.cc-occhio-campo:has(> .cc-occhio-input[hidden]){display:none}

/* Lo spazio per l'occhio si tiene da parte una volta sola: il testo non
   scorre sotto il pulsante e non si sposta quando la password si mostra. */
.cc-occhio-campo > input.cc-occhio-input{padding-right:46px !important}
/* Edge disegna un suo occhio: due occhi nello stesso campo confondono */
.cc-occhio-campo > input.cc-occhio-input::-ms-reveal,
.cc-occhio-campo > input.cc-occhio-input::-ms-clear{display:none}

.cc-occhio-campo > button.cc-occhio{
  all:unset;
  box-sizing:border-box;
  position:absolute; top:0; right:0; bottom:0;
  width:44px;                                  /* bersaglio da pollice */
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--ink-3,#70675d);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.cc-occhio-campo > button.cc-occhio .cc-occhio-disco{
  display:grid; place-items:center;
  width:34px; height:min(34px,100%);
  border-radius:999px;
  transition:background-color .15s ease, transform .12s ease;
}
.cc-occhio-campo > button.cc-occhio svg{width:21px;height:21px;display:block;overflow:visible}
@media (hover:hover){
  .cc-occhio-campo > button.cc-occhio:hover{color:var(--ink,#4b423b)}
  .cc-occhio-campo > button.cc-occhio:hover .cc-occhio-disco{background:var(--surface-2,#f1e9df)}
}
.cc-occhio-campo > button.cc-occhio:active .cc-occhio-disco{transform:scale(.9)}
.cc-occhio-campo > button.cc-occhio[aria-pressed="true"]{color:var(--accent,#8f6126)}
/* Il contorno da tastiera e' quello di tutto il programma (--link), sul
   cerchietto e non sul rettangolo invisibile del pulsante. */
.cc-occhio-campo > button.cc-occhio:focus-visible{outline:none}
.cc-occhio-campo > button.cc-occhio:focus-visible .cc-occhio-disco{
  outline:2px solid var(--link,#1257c9); outline-offset:0}

/* L'animazione. Da chiuso (password nascosta): la palpebra di sopra e'
   ribaltata su quella di sotto e si vedono le ciglia. Da aperto: la
   palpebra si solleva con un piccolo rimbalzo e la pupilla compare. */
.cc-occhio .cc-occhio-tutto{transform-box:view-box;transform-origin:12px 12px;
  transform:translateY(-2px);transition:transform .2s ease}
.cc-occhio .cc-occhio-sopra{transform-box:view-box;transform-origin:12px 12px;
  transform:scaleY(-1);transition:transform .18s cubic-bezier(.4,0,1,1)}
.cc-occhio .cc-occhio-pupilla{transform-box:fill-box;transform-origin:center;
  transform:scale(0);opacity:0;transition:transform .12s ease-in,opacity .1s ease-in}
.cc-occhio .cc-occhio-ciglia{opacity:1;transform:translateY(0);
  transition:opacity .16s ease .08s,transform .16s ease .08s}

.cc-occhio[aria-pressed="true"] .cc-occhio-tutto{transform:translateY(0)}
.cc-occhio[aria-pressed="true"] .cc-occhio-sopra{transform:scaleY(1);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.cc-occhio[aria-pressed="true"] .cc-occhio-pupilla{transform:scale(1);opacity:1;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1) .1s,opacity .12s ease .1s}
.cc-occhio[aria-pressed="true"] .cc-occhio-ciglia{opacity:0;transform:translateY(-2px);
  transition:opacity .08s ease,transform .08s ease}

@media (prefers-reduced-motion:reduce){
  .cc-occhio .cc-occhio-tutto,.cc-occhio .cc-occhio-sopra,.cc-occhio .cc-occhio-pupilla,
  .cc-occhio .cc-occhio-ciglia,.cc-occhio .cc-occhio-disco{transition:none !important}
}
@media (forced-colors:active){
  .cc-occhio-campo > button.cc-occhio{color:ButtonText}
  .cc-occhio-campo > button.cc-occhio:focus-visible .cc-occhio-disco{outline-color:Highlight}
}
/* --- MARCA_76141_OCCHIO_PASSWORD: fine --- */

/* --- MARCA_76143_SPUNTE_E_PULSANTI: inizio -------------------------------
   Due direttive di Giovanni:
   D35 - la spunta deve avere lo stile del CRM, ovunque;
   D36 - pulsanti e icone con grafica coerente.

   IL LIVELLO A PARTE. Le regole di base stanno dentro "@layer
   cc-comuni": per come funzionano i fogli di stile, QUALUNQUE regola
   scritta da una pagina vince su queste, anche la piu' debole. Quindi:
   dove una pagina ha gia' deciso qualcosa (una misura, un colore), resta
   la sua scelta; dove non ha deciso niente, arriva lo stile comune.
   Fuori dal livello restano solo le due correzioni ai pulsanti che
   DEVONO vincere (vedi in fondo), scritte su classi precise.
   ------------------------------------------------------------------------ */
@layer cc-comuni {

  /* Tutti i comandi nativi (spunte, cursori, barre) prendono il rame del
     marchio invece dell'azzurro del sistema. */
  :where(html){accent-color:var(--accent,#8f6126)}

  /* ---- D35: LA SPUNTA DEL CRM ----
     Solo le spunte "di sistema". Restano fuori, e non cambiano di un
     pixel, quelle che hanno gia' un disegno loro con la casella vera
     nascosta sotto: gli interruttori delle gallerie (.gal-toggle), quelli
     delle impostazioni (.interruttore), i giorni della settimana
     (.imp-giorno), le celle della vetrina (.gal-vetrina-cella).
     Una spunta che deve restare quella del sistema: data-spunta="sistema".

     DUE TIPI DI REGOLE, E PERCHE'.
     - Misura, margini, allineamento: regole normali. Se una pagina ha
       deciso quanto e' grande la sua spunta, vince la pagina.
     - Fondo, bordo, angoli, spazio interno, colore del segno: con
       !important. La spunta di sistema queste cose le IGNORAVA, quindi
       nessuna pagina puo' averle volute davvero su una spunta; ma alcune
       le danno a "tutti gli input" del modulo (la pagina di accesso:
       ".accesso-scheda input{padding:12px 14px;border-radius:14px;
       background:...}") e senza !important la casella diventava un
       cerchio grande e vuoto. Visto a schermo, chiaro e scuro. */
  :where(input[type="checkbox"], input[type="radio"]):not(:where(
      .gal-toggle *, .interruttore *, .imp-giorno *, .gal-vetrina-cella *,
      [data-spunta="sistema"])){
    -webkit-appearance:none !important; appearance:none !important;
    box-sizing:border-box !important;
    position:relative;
    width:18px; height:18px;
    /* Alcune pagine scrivono width:auto (la pagina di accesso): senza il
       disegno di sistema la casella resterebbe larga zero. Il rapporto 1:1
       la ricava dall'altezza, e resta quadrata anche al telefono, dove il
       tema da' 24px di altezza. Il minimo e' solo una rete: sotto le misure
       che le pagine usano davvero (16-24px), cosi' non le cambia. */
    aspect-ratio:1 / 1;
    min-width:12px; min-height:12px;
    /* dentro una riga flessibile con un testo lungo accanto la casella
       veniva schiacciata a ovale (le scelte delle gallerie al telefono:
       15x24). Quella di sistema non si schiacciava: nemmeno questa. */
    flex-shrink:0;
    vertical-align:-4px;
    padding:0 !important;
    border:1.5px solid var(--line-strong,#8a7f72) !important;
    border-radius:5px !important;
    background:var(--surface,#fffcf8) !important;
    box-shadow:none !important;
    color:var(--on-accent,#fff) !important;
    font-size:inherit !important;
    cursor:pointer;
    transition:background-color .15s ease,border-color .15s ease;
  }
  :where(input[type="radio"]):not(:where(.gal-toggle *, .interruttore *, .imp-giorno *,
      .gal-vetrina-cella *, [data-spunta="sistema"])){border-radius:50% !important}

  /* il segno: una V per la spunta, un pallino per la scelta singola */
  :where(input[type="checkbox"], input[type="radio"]):not(:where(.gal-toggle *, .interruttore *,
      .imp-giorno *, .gal-vetrina-cella *, [data-spunta="sistema"]))::before{
    content:""; position:absolute; inset:0; margin:auto;
    width:64%; height:64%;
    background-color:currentColor;
    clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
    transform:scale(0);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1);
  }
  :where(input[type="radio"]):not(:where(.gal-toggle *, .interruttore *, .imp-giorno *,
      .gal-vetrina-cella *, [data-spunta="sistema"]))::before{
    width:42%; height:42%; clip-path:none; border-radius:50%}

  :where(input[type="checkbox"], input[type="radio"]):not(:where(.gal-toggle *, .interruttore *,
      .imp-giorno *, .gal-vetrina-cella *, [data-spunta="sistema"])):checked,
  :where(input[type="checkbox"]):not(:where(.gal-toggle *, .interruttore *, .imp-giorno *,
      .gal-vetrina-cella *, [data-spunta="sistema"])):indeterminate{
    background:var(--accent,#8f6126) !important; border-color:var(--accent,#8f6126) !important}
  :where(input[type="checkbox"], input[type="radio"]):not(:where(.gal-toggle *, .interruttore *,
      .imp-giorno *, .gal-vetrina-cella *, [data-spunta="sistema"])):checked::before{transform:scale(1)}
  /* "una parte si', una parte no": una lineetta */
  :where(input[type="checkbox"]):not(:where(.gal-toggle *, .interruttore *, .imp-giorno *,
      .gal-vetrina-cella *, [data-spunta="sistema"])):indeterminate::before{
    clip-path:inset(40% 8% 40% 8% round 2px); transform:scale(1)}

  @media (hover:hover){
    :where(input[type="checkbox"], input[type="radio"]):not(:where(.gal-toggle *, .interruttore *,
        .imp-giorno *, .gal-vetrina-cella *, [data-spunta="sistema"])):not(:disabled):not(:checked):not(:indeterminate):hover{
      border-color:var(--accent,#8f6126) !important}
  }
  :where(input[type="checkbox"], input[type="radio"]):not(:where(.gal-toggle *, .interruttore *,
      .imp-giorno *, .gal-vetrina-cella *, [data-spunta="sistema"])):disabled{
    opacity:.5; cursor:not-allowed}

  @media (prefers-reduced-motion:reduce){
    :where(input[type="checkbox"], input[type="radio"])::before{transition:none}
  }
  /* Contrasto elevato di Windows: si torna alla spunta di sistema, che li'
     e' disegnata apposta per farsi vedere. */
  @media (forced-colors:active){
    :where(input[type="checkbox"], input[type="radio"]){
      appearance:auto !important; -webkit-appearance:auto !important}
    :where(input[type="checkbox"], input[type="radio"])::before{content:none}
  }

  /* ---- D36: IL "+" DEI PULSANTI CHE CREANO ----
     L'icona 'piu' di _icone.html ha la misura di tutte le icone del CRM
     (18px, la classe .ico del tema). Nei pulsanti pieni il tratto si
     ingrossa: stesso spessore, in pixel, del "+" bianco disegnato a mano
     oggi sul pulsante "Nuovo Lead" (2.6 su 16px = 2.3 su 18px). Si usa
     cosi':  {{ icone.icona('piu', 'ico ico-piu') }} */
  .btn > svg.ico-piu{stroke-width:2.3}
}

/* ---- FUORI DAL LIVELLO: le correzioni che devono vincere ---- */

/* D36. IL PULSANTE SPENTO CHE SPARIVA. Col mouse sopra, un pulsante spento
   prendeva come fondo quello del riquadro che lo contiene (regola
   ".btn:disabled:hover{background:inherit}" nel tema): su "Salva",
   "Elimina", "Conferma" il testo bianco finiva su fondo chiaro e il
   pulsante diventava un rettangolo vuoto. Misurato: fondo rgb(255,252,248)
   e testo bianco. Adesso uno spento resta uguale con o senza mouse. */
.btn.btn-primary:disabled:hover{background:var(--logo-gradient);border-color:transparent;color:var(--on-accent)}
.btn.btn-danger:disabled:hover{background:var(--bad);border-color:var(--bad);color:var(--on-bad);filter:none}
.btn.btn-success:disabled:hover{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.btn.btn-outline:disabled:hover{background:transparent;border-color:var(--line-strong)}
.btn.btn-ghost:disabled:hover{background:none;border-color:var(--line)}
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-outline):not(.btn-ghost):disabled:hover{
  background:var(--surface);border-color:var(--line-strong)}
.btn:disabled{box-shadow:none;transform:none}

/* D36. UN CONTORNO SOLO QUANDO SI ARRIVA COL TASTO TAB. Il programma usa
   l'azzurro (--link) ovunque; alcuni pulsanti avevano il loro (rame per
   "Modifica" nell'elenco dei lead, rosso per il cestino). Stesso segno per
   tutti: chi naviga con la tastiera cerca sempre la stessa cosa. */
:is(.btn, .btn-riga, .btn-cestino, .btn-archivia):focus-visible{
  outline:2px solid var(--link,#1257c9); outline-offset:2px}
/* --- MARCA_76143_SPUNTE_E_PULSANTI: fine --- */

/* --- MARCA_76147_SECONDARIO_E_ICONE: inizio -------------------------------
   D36, secondo giro.

   IL PULSANTE "SECONDARIO". 42 pulsanti del CRM (impostazioni, collaboratori,
   lead, chatbot, il mio accesso, assistenza, RegiaPro Photo) hanno la classe
   btn-secondary, ma il tema non l'ha mai definita: si vedevano come il
   pulsante normale solo per caso. Adesso esiste, con gli stessi valori del
   pulsante normale del tema: non cambia un pixel (misurato su tutti), ma
   da oggi il "secondario" e' una scelta scritta in un posto solo, e se un
   giorno lo si vuole diverso si cambia QUI, non in 42 righe.

   LE ICONE AL POSTO DEI CARATTERI. Crocette, emoji e simboli sono stati
   sostituiti dalle icone di _icone.html nelle pagine piu' usate. Qui
   sotto le misure, uguali ovunque:
   - dentro i pulsanti "solo icona" (chiudi): 18px, grande quanto la ✕ di prima;
   - nei riquadri vuoti ("nessun lead", "nessuna consegna"): 36px;
   - dentro una riga di testo (.ico-in-riga): 16px, sulla linea del testo.
   ------------------------------------------------------------------------ */
.btn.btn-secondary{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn.btn-secondary:hover{background:var(--sunken);border-color:var(--ink-3);color:var(--ink)}

:is(.notifiche-chiudi,.notifiche-togli,.notif-sistema-togli,.assistente-chiudi,.imp-manca-chiudi) > svg.ico{
  width:18px;height:18px;margin:auto}
/* 36px di disegno + 6px sopra e sotto = i 48px che occupava l'emoji: il
   riquadro vuoto resta alto uguale */
.empty-state-icon:has(> svg.ico){padding:6px 0}
.empty-state-icon > svg.ico{width:36px;height:36px;margin:0 auto;stroke-width:1.5}
.voce-icona > svg.ico{width:16px;height:16px}
.toggle-icon{display:grid;place-items:center}
.toggle-icon > svg.ico{width:18px;height:18px}
.ico.ico-in-riga{display:inline-block;vertical-align:-3px;width:16px;height:16px;margin-right:6px}
/* --- MARCA_76147_SECONDARIO_E_ICONE: fine --- */

/* --- MARCA_76157_ICONE_GIRO_3: inizio -------------------------------------
   D36, terzo giro: gallerie, piano social, infografiche, chatbot,
   calendario, costi. Le misure delle icone dove prendono il posto di un
   carattere: scelte per occupare lo STESSO spazio del carattere di prima
   (misurato elemento per elemento, prima e dopo).
   ------------------------------------------------------------------------ */
/* FRECCE nei pulsanti: 16px, e margini negativi per occupare lo spazio
   esatto di " →" o "← " di prima (misurato: +5,7 punti senza, 0 con). */
.btn > svg.ico-freccia{width:16px;height:16px;margin:0 -2.85px}
.btn > span > svg.ico-freccia{width:16px;height:16px;margin:0 -1.4px}
.gal-portfolio-frecce .btn > svg.ico-freccia{margin:2.5px -2.3px}
/* CROCETTE dei pulsanti "solo crocetta": stesso riquadro della ✕ di prima */
.btn > svg.ico-chiudi{width:16px;height:16px;margin:3.25px -2.3px}
.btn.btn-sm > svg.ico-chiudi{margin:2.5px -2.65px}
/* ICONA DAVANTI A UNA PAROLA ("+ Crea", "Vedi la galleria"...): 16px, e fra
   icona e parola lo spazio di una battuta, come fra carattere e parola. */
.btn > svg.ico-davanti,.btn > .cc-ico-stato > svg.ico-davanti{width:16px;height:16px;margin-right:-4px}
.btn > .cc-ico-stato > svg.ico-piu{stroke-width:2.3}
.cal-cmd-azione > .cc-ico-stato > svg.ico-piu{width:14px;height:14px;margin-right:-3px;stroke-width:2.3}
/* il triangolo dei filmati: pieno, grande quanto il carattere di prima */
.gal-play{display:grid;place-items:center}
.gal-play > svg.ico,.gal-fine-play > svg.ico{width:1em;height:1em;fill:currentColor}
/* piccoli segni delle gallerie, nella stessa altezza del carattere */
.gal-rimando-icona > svg.ico{width:14px;height:14px;margin:2.1px 0}
.gal-zona-icona:has(> svg.ico){padding:6.5px 0}
.gal-zona-icona > svg.ico{width:1em;height:1em;margin:0 auto}
.gal-segnata > svg.ico{display:inline-block;width:1em;height:1em;vertical-align:-.15em;stroke-width:2.4}
.gal-vetrina-segno > svg.ico{width:13px;height:13px;stroke-width:2.6}
.gal-vetrina-consenso-segno > svg.ico{width:17px;height:17px;margin:1.9px 1.5px}
/* un'icona che compare solo in uno stato del pulsante (x-show) */
:is(.btn,.cal-cmd-azione) > .cc-ico-stato{display:contents}
/* --- MARCA_76157_ICONE_GIRO_3: fine --- */

/* --- MARCA_76233_CAMPO_MANCANTE: inizio -----------------------------------
   Direttiva D30 di Giovanni: toccando un pulsante spento perche' manca un
   dato, il CRM porta al campo da compilare (il comportamento sta in
   componenti-comuni.js, stessa marca).
   COL DITO il comando spento lascia passare il tocco a chi gli sta sotto:
   e' l'unico modo sicuro, su ogni telefono, per accorgersi che e' stato
   toccato (la stessa strada della 76085 per i campi "serve prima").
   Il clic che ne segue viene fermato da componenti-comuni.js, quindi la
   riga o la scheda che contiene il pulsante non si apre per sbaglio.
   COL MOUSE non cambia niente: il cursore "vietato" e il suggerimento
   del pulsante restano come prima.
   Dentro il livello cc-comuni: se una pagina ha deciso diversamente
   (per esempio le frecce del visore delle gallerie), vince la pagina.
   ------------------------------------------------------------------------ */
@layer cc-comuni {
  @media (hover:none) and (pointer:coarse){
    :where(button, input, select, textarea):disabled{pointer-events:none}
  }
}
/* --- MARCA_76233_CAMPO_MANCANTE: fine --- */

/* --- MARCA_76235_ACCORDION_SI_VEDE_CHE_SI_APRE: inizio --------------------
   Direttiva D68 di Giovanni (14 settembre 2026): «le sezioni con
   accordion chiuse: fai capire meglio che sono cliccabili».

   IL DIFETTO. Nel CRM le parti che si aprono e si chiudono avevano come
   unico segno una freccina di testo grigia, da 12-14 punti (▾ o ▸),
   diversa da pagina a pagina e a volte a sinistra, a volte a destra.
   Chiuse sembravano titoli qualunque.

   COSA CAMBIA. Ogni intestazione che apre una parte (riconosciuta da
   componenti-comuni.js, stessa marca) prende lo stesso segno ovunque:
   un tondino con la freccia, a destra, che gira quando si apre. Col
   mouse sopra il tondino si accende del rame del marchio, da tastiera
   compare il contorno azzurro di tutto il programma, e da aperta il
   tondino resta acceso: si vede a colpo d'occhio cosa e' aperto.
   La zona che il dito prende e' alta almeno 44 punti.

   DUE TIPI DI REGOLE, COME NEI PEZZI DI PRIMA.
   - Il disegno del tondino: fuori dal livello e con !important, perche'
     deve essere uguale ovunque (prende il posto delle freccine delle
     pagine, che avevano misure e colori loro).
   - Posizione, altezza, contorno: nel livello cc-comuni, cosi' dove una
     pagina ha gia' deciso qualcosa (la freccia accanto al titolo nella
     scheda del lead da telefono, per esempio) resta la sua scelta.
   Colori tutti dal tema: valgono in chiaro e in scuro.
   ------------------------------------------------------------------------ */
@layer cc-comuni {
  .cc-acc{cursor:pointer;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation}
  /* 44 punti di altezza dove si tocca col dito. Col mouse no: sul computer
     il «Mio portfolio» delle gallerie passava da 30 a 44 punti per niente. */
  @media (pointer:coarse){ .cc-acc{min-height:44px} }
  /* i <summary>: la freccina del sistema se ne va, il testo e il tondino
     stanno sulla stessa riga, centrati in altezza */
  summary.cc-acc{list-style:none}
  summary.cc-acc::-webkit-details-marker{display:none}
  summary.cc-acc:not(.cc-acc-proprio){display:flex;align-items:center;gap:10px}
  summary.cc-acc > .cc-acc-testo{flex:1 1 auto;min-width:0}
  /* il tondino in fondo alla riga, a destra: si sposta solo quello che
     nel codice stava davanti al titolo (i mesi dei costi e dei report, le
     date libere del calendario). Quello che stava gia' in fondo resta
     dov'e': alcune pagine lo mettono loro accanto a un'etichetta, e su
     telefono spostarlo lo mandava da solo su una riga nuova (misurato sul
     «Mio portfolio» delle gallerie: 57 punti prima, 86 spostandolo). */
  .cc-acc > .cc-acc-freccia.cc-acc-sposta{order:99}
  .cc-acc:focus-visible{outline:2px solid var(--link,#1257c9);outline-offset:2px;border-radius:8px}
}

/* I MARGINI stanno fuori dal livello: il tema azzera i margini di tutto
   ("*{margin:0}"), e dentro il livello quella regola vinceva sempre.
   A destra: "margin-left:auto" pesa quanto le regole del tema, che viene
   caricato prima, e meno di quelle scritte nelle pagine, che vengono dopo
   (la freccia accanto al titolo nella scheda del lead da telefono resta).
   Sopra e sotto, negativi: il tondino (26 punti) e' piu' alto della
   freccina di testo che sostituisce, e senza questi ogni intestazione
   cresceva di 5 punti (misurato: 51 prima, 56 dopo). */
.cc-acc > .cc-acc-freccia{margin-left:auto}
.cc-acc-freccia{margin-top:-2.5px;margin-bottom:-2.5px}
.cc-acc-freccia{
  box-sizing:border-box !important;
  display:inline-grid !important;place-items:center !important;
  flex:0 0 auto !important;
  width:26px !important;height:26px !important;
  min-width:26px !important;
  padding:0 !important;
  border-radius:50% !important;
  border:1px solid var(--line-strong,#8a7f72) !important;
  background:var(--surface,#fffcf8) !important;
  color:var(--ink-2,#5c5249) !important;
  font-size:0 !important;line-height:0 !important;
  text-decoration:none !important;
  vertical-align:middle;
  transform:none !important;
  transition:transform .2s ease,background-color .15s ease,border-color .15s ease,color .15s ease !important;
}
.cc-acc-freccia::before{
  content:"" !important;display:block !important;
  width:14px !important;height:14px !important;
  background-color:currentColor !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cc-acc-freccia::after{content:none !important}
/* MARCA_76239_UNA_FRECCIA_SOLA: se dentro c'e' gia' un'icona disegnata, il
   tondino non ci aggiunge la sua (il riconoscimento le salta gia': questa
   e' la rete, per le intestazioni che una pagina accende a mano). */
.cc-acc-freccia:has(svg)::before{content:none !important;display:none !important}
/* aperta: la freccia guarda in su e il tondino resta acceso */
.cc-acc[aria-expanded="true"] .cc-acc-freccia,
details[open] > summary.cc-acc .cc-acc-freccia{
  transform:rotate(180deg) !important;
  border-color:var(--accent,#8f6126) !important;
  background:var(--accent-soft,#f4ede3) !important;
  color:var(--accent-ink,#6c4519) !important;
}
@media (hover:hover){
  .cc-acc:hover .cc-acc-freccia{
    border-color:var(--accent,#8f6126) !important;
    color:var(--accent-ink,#6c4519) !important;
    background:var(--accent-soft,#f4ede3) !important;
  }
}
.cc-acc:active .cc-acc-freccia{background:var(--accent-soft,#f4ede3) !important}
/* la freccina che la pagina disegnava da se' su un <summary>: se ne va,
   il tondino prende il suo posto (una freccia sola per riga) */
summary.cc-acc-via-prima::before{content:none !important;display:none !important}
summary.cc-acc-via-dopo::after{content:none !important;display:none !important}

@media (prefers-reduced-motion:reduce){
  .cc-acc-freccia{transition:none !important}
}
@media (forced-colors:active){
  .cc-acc-freccia{border-color:ButtonText !important;color:ButtonText !important;background:Canvas !important}
  .cc-acc-freccia::before{background-color:ButtonText !important}
}
/* --- MARCA_76235_ACCORDION_SI_VEDE_CHE_SI_APRE: fine --- */

/* --- MARCA_76237_TASTO_INFO_COMUNE: inizio --------------------------------
   Direttiva D68 di Giovanni (14 settembre 2026): «tasto Info anche in
   Attivita'», come nelle gallerie.

   IL TASTO INFO, UNO PER TUTTO IL CRM. Nelle gallerie c'era gia'
   (.gal-info-tasto, blocchi 4655 e 4839 del tema), ma scritto per quella
   pagina sola. Questo e' lo stesso disegno, misura per misura, in un
   posto solo: la pastiglia con la «i» e la parola Info, tenue da spenta,
   col rame del marchio da accesa, e 44 punti di zona per il dito che non
   alzano la riga. Il comportamento sta in componenti-comuni.js, stessa
   marca: nessuna pagina deve scriversi il suo.

   COME SI USA (nessun codice nella pagina):
     <button type="button" class="cc-info-tasto" data-cc-info="nome">
       <span class="cc-info-segno" aria-hidden="true">i</span><span class="cc-info-parola">Info</span>
     </button>
     <p class="cc-info-testo" data-cc-info-di="nome" hidden>la spiegazione</p>
   Tutti i testi con lo stesso nome si aprono e si chiudono insieme,
   anche quelli che la pagina disegna dopo (le righe di un elenco).
   ------------------------------------------------------------------------ */
.cc-info-tasto{
  position:relative;
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  vertical-align:middle;
  margin:0;padding:3px 10px 3px 4px;
  border:1px solid var(--line,#e2d8cc);border-radius:999px;
  background:var(--surface,#fffcf8);color:var(--ink-3,#70675d);
  font:inherit;font-size:11.5px;font-weight:600;line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.cc-info-segno{
  width:18px;height:18px;border-radius:50%;
  display:inline-grid;place-items:center;
  background:var(--sunken,#f1e9df);color:var(--ink-2,#5c5249);
  font-family:var(--font-display,inherit);font-weight:800;font-size:11.5px;line-height:1;
}
@media (hover:hover){
  .cc-info-tasto:hover{border-color:var(--accent,#8f6126);color:var(--accent-ink,#6c4519)}
}
.cc-info-tasto:focus-visible{outline:2px solid var(--link,#1257c9);outline-offset:2px}
.cc-info-tasto[aria-expanded="true"]{
  background:var(--accent-soft,#f4ede3);border-color:var(--accent,#8f6126);
  color:var(--accent-ink,#6c4519);
}
.cc-info-tasto[aria-expanded="true"] .cc-info-segno{
  background:var(--accent,#8f6126);color:var(--on-accent,#fff);
}
/* la zona che il dito prende: 44 punti, invisibile, non alza la riga */
.cc-info-tasto::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;min-width:44px;height:44px;
}
/* il testo che si apre: stesso tono delle note delle gallerie */
.cc-info-testo{font-size:13.5px;line-height:1.55;color:var(--ink-3,#70675d);margin:8px 0 0}
.cc-info-testo[hidden]{display:none !important}
@media (forced-colors:active){
  .cc-info-tasto{border-color:ButtonText}
  .cc-info-tasto[aria-expanded="true"]{outline:2px solid Highlight}
}
/* --- MARCA_76237_TASTO_INFO_COMUNE: fine --- */

/* --- MARCA_76800_RICERCA_AZIENDE_DAL_VIVO: inizio ---
   La tendina che si apre sotto il campo "Ragione sociale" dell'anagrafica
   (pagina /anagrafica e pannello "Creane una nuova" nella scheda del
   lead), mentre si scrive -- come Fatture in Cloud. Vedi
   frontend/static/js/components/anagrafica.js. */
.ana-rag-wrap{position:relative}
.ana-rag-tendina{
  position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:40;
  background:var(--surface,#fff);border:1px solid var(--line,#e0d5c8);
  border-radius:var(--r-m,10px);box-shadow:var(--shadow-lg,0 12px 24px rgba(0,0,0,.18));
  max-height:260px;overflow-y:auto;padding:6px;
}
.ana-rag-riga-stato{padding:8px 10px;font-size:13px;color:var(--ink-3,#70675d)}
.ana-rag-errore{color:var(--danger,#b3261e)}
.ana-rag-voce{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  text-align:left;background:none;border:0;border-radius:6px;padding:8px 10px;
  cursor:pointer;font:inherit;color:inherit;
}
.ana-rag-voce:hover,.ana-rag-voce:focus-visible{background:var(--surface-2,#f1e9df)}
.ana-rag-voce:disabled{opacity:.6;cursor:default}
.ana-rag-voce-nome{font-weight:600;font-size:14px}
.ana-rag-voce-sotto{font-size:12px;color:var(--ink-3,#70675d)}
/* --- MARCA_76800_RICERCA_AZIENDE_DAL_VIVO: fine --- */

/* --- MARCA_87801_PULSANTI_A_SINISTRA: inizio --------------------------------
   I PULSANTI A SINISTRA, COME NEL SOCIAL (reparto DESIGN, 4/10/2026, D684).
   Giovanni: «tutte le pagine come logica devono avere i pulsanti allineati a
   sinistra, che sono piu' comodi da raggiungere visto che il menu e' a
   sinistra; come struttura quella dei social va bene, quindi uniforma tutte
   le pagine».
   Qui solo le regole COMUNI, quelle che valgono per ogni pagina che usa questi
   pezzi del tema. Stanno in questo foglio (caricato PRIMA dei fogli delle
   pagine) apposta: una pagina che vuole davvero un pulsante a destra lo dice
   nel suo foglio e vince lei. I ritocchi delle singole pagine sono consegne a
   parte (87803 e seguenti).
   1. Il piede delle finestre (Lascia stare / Annulla / Salva): a sinistra.
      Erano spinti in fondo a destra (Costi, Anagrafica, Fatture ricorrenti,
      Modelli).
   2. La barra delle domande del programma («Tolgo questa spesa?», Annulla /
      Togli): a sinistra, come il piede delle finestre.
   3. La X che chiude le finestre era un bersaglio di 29 punti: ora 44, la
      misura del dito (stesso disegno, solo l'area che si tocca piu' grande).
   4. Sul telefono le due bolle tonde in basso a destra (Cerca e assistente)
      coprivano «Salva» e «Annulla» nel piede delle finestre (misurato su
      Costi, Anagrafica, Fatture ricorrenti a 375 punti). Finche' una finestra
      e' aperta si fanno da parte; si chiude e tornano. Stesso modo gia' usato
      col menu in alto a destra (78391).
   Le schede dei clienti (Nuovo cliente, Modifica lead) NON sono toccate qui:
   le sta rifacendo un altro reparto (D709); si allineano dopo. */
.modal-footer{justify-content:flex-start;flex-wrap:wrap}
.chiedi-barra{justify-content:flex-start}
.modal .modal-content:not(.modal-lead) .modal-header > .modal-close{min-width:44px;min-height:44px;
  display:inline-grid;place-items:center;padding:0;margin:-8px -8px -8px 0;flex:0 0 auto}
body:has(.modal.active .modal-content:not(.modal-lead)) .nav-fab,
body:has(.modal.active .modal-content:not(.modal-lead)) .assistente-fab,
body:has(.modal[style*="flex"] .modal-content:not(.modal-lead)) .nav-fab,
body:has(.modal[style*="flex"] .modal-content:not(.modal-lead)) .assistente-fab{
  visibility:hidden;pointer-events:none}
/* --- MARCA_87801_PULSANTI_A_SINISTRA: fine --- */