/* =====================================================================
   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 --- */