/* =====================================================================
   Progetto Base (PBK) - foglio di stile unico del portale
   (nato dal foglio di FP Connect: le sezioni dei moduli non portati si tolgono man mano)
   Tutte le pagine (login compresa) usano solo questo file: nessuna pagina
   ha un proprio blocco <style>. Colori e misure stanno nelle variabili
   qui sotto; poi componenti comuni e, in fondo, le sezioni per pagina.
   ===================================================================== */

/* ===================== colori e misure ===================== */
:root{
  /* rosso del logo Manifattura Effe Pi */
  --accento:#da0219;
  --accento-velo:rgba(218,2,25,.10);
  /* rosso per testi e icone piccole: sul tema scuro va schiarito per restare leggibile */
  --accento-testo:#da0219;
  --accento2:#3b7bff;
  /* blu pieno dei pulsanti (piu' scuro di --accento2: il testo bianco sopra deve restare leggibile) */
  --blu:#2563eb;
  --verde:#1e9e57;

  --pericolo:#c94836;
  --pericolo-bordo:rgba(220,60,50,.35);
  --pericolo-velo:rgba(220,60,50,.10);
  --successo:#2f8a55;
  --successo-bordo:rgba(60,160,90,.40);
  --successo-velo:rgba(60,160,90,.12);

  --raggio:4px;
  --barra:264px;
  --testata:64px;
  --carattere:"Archivo","Helvetica Neue",Arial,sans-serif;
}
html[data-tema="scuro"]{
  --accento-testo:#ff4b5c;
  --campo-attivo:#252a32;
  --blocco-chiaro:#181b20;
  --campo-alone:rgba(255,75,92,.28);
  /* 03/10/2026 "nero e rosso" (proposta E scelta dall'utente; prima "vetro petrolio"): via il petrolio. Fondo nero
     carbone con la luce rossa che scende dall'alto (body::before, vedi "Tema scuro nero e rosso" in fondo), pannelli
     grafite, bordi neutri, ombra profonda. --pannello-vetro e' il fondo un filo trasparente dei riquadri principali:
     lascia intravedere la luce del fondo. */
  --bordo-forte:rgba(255,255,255,.26);
  --sfondo:#060709;
  --pannello:#14161a;
  --pannello2:#1d2026;
  --pannello-vetro:rgba(22,24,29,.70);
  --testo:#efe8d9;
  --tenue:rgba(239,232,217,.58);
  --debole:rgba(239,232,217,.34);
  --bordo:rgba(255,255,255,.11);
  --ombra:0 24px 50px -28px rgba(0,0,0,.9);
  --rilievo:inset 0 1px 0 rgba(255,255,255,.07),0 26px 52px -26px #000;
  /* il motivo di fondo (barra laterale, intestazioni, chat): dal 23/09/2026 la maglia del tessuto sportivo della
     pagina di accesso, finissima (punti allungati sfalsati, occhio di pernice), ferma e tenue come prima */
  --trama:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12'%3E%3Cpath d='M1.5 3h3.5M6.5 9h3.5' stroke='%23efe8d9' stroke-opacity='.075' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
html[data-tema="chiaro"]{
  --campo-attivo:#ffffff;
  --blocco-chiaro:#fdfcf8;
  --campo-alone:rgba(218,2,25,.18);
  /* 01/10/2026 variante A "carta calda": fondo beige piu' scuro e pannelli avorio con bordo e ombra leggera, cosi' il
     bianco non abbaglia e le sezioni si distinguono */
  --bordo-forte:rgba(16,34,43,.36);
  --sfondo:#e5dfd1;
  --pannello:#fffdf8;
  --pannello2:#f6f2ea;
  --testo:#10222b;
  --tenue:#5c6b74;
  --debole:#8b9aa1;
  --bordo:rgba(16,34,43,.18);
  --ombra:0 20px 44px -30px rgba(16,34,43,.45);
  --rilievo:0 1px 2px rgba(16,34,43,.07),0 8px 20px -14px rgba(16,34,43,.25);
  --trama:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12'%3E%3Cpath d='M1.5 3h3.5M6.5 9h3.5' stroke='%2310222b' stroke-opacity='.06' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ===================== base ===================== */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
/* testata fissa: quando la pagina porta in vista un modulo o un campo (PaginaFPC.PortaInVista, ancore, fuoco)
   si ferma sotto la testata invece di finirci dietro */
html{scroll-padding-top:calc(var(--testata) + 14px)}
body{
  background:var(--sfondo);color:var(--testo);
  font-family:var(--carattere);
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease,color .35s ease;
}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
.ico{flex:none}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* ===================== testata ===================== */
.testata{
  position:fixed;inset:0 0 auto 0;height:var(--testata);z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 20px;
  background:color-mix(in srgb, var(--pannello) 88%, transparent);
  backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--bordo);
}
.testata::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--accento),var(--accento2),transparent 70%);
  opacity:.65;
}
.marchio{display:flex;align-items:center;gap:13px;min-width:0}
.marchio img{height:22px;width:auto;display:block}
.marchio .filetto{width:1px;height:22px;background:var(--bordo)}
.marchio .nome{font-size:15.5px;font-weight:600;white-space:nowrap}
.marchio .nome b{color:var(--accento-testo)}
/* avviso BETA accanto al nome del portale (05/10/2026, variante A scelta dall'utente): pillola ambra "BETA" + scritta,
   si accende in Impostazioni > Setup > Sito in manutenzione (FPC.ModoManutenzione.AvvisoBeta). Con la pillola il gruppo
   del logo non si stringe piu': cede spazio la casella della ricerca. Dal 06/10/2026 la parte gialla "BETA" lampeggia e la
   scritta ("Attenzione. Dati non aggiornati") resta ferma; su tablet e telefono la scritta scende in una fascia in fondo
   alla testata, che si alza di 22px (--testata). Dal 07/10/2026 in fondo alla scritta c'e' anche la data dell'ultimo
   aggiornamento del gestionale (.beta-data): la fascia vale fino a 1280px (prima 980), se no la ricerca restava un'icona */
.testata .marchio:has(.beta-avviso){flex:none}
.beta-avviso{display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;padding:4px 11px 4px 4px;border:1px solid rgba(228,161,27,.55);border-radius:99px;background:rgba(228,161,27,.12);color:#f2c35b;font-size:12px;font-weight:600;line-height:1.2;cursor:help}
.beta-avviso b{padding:2px 7px;border-radius:99px;background:#e4a11b;color:#1a1204;font-size:10.5px;font-weight:800;letter-spacing:.08em;animation:beta-lampeggio 1.4s ease-in-out infinite}
@keyframes beta-lampeggio{0%,40%{opacity:1;box-shadow:0 0 0 0 rgba(228,161,27,.55)}55%,85%{opacity:.2;box-shadow:0 0 0 4px rgba(228,161,27,0)}100%{opacity:1}}
html[data-tema="chiaro"] .beta-avviso{color:#8a5a00;background:rgba(228,161,27,.14)}
@media (max-width:1280px){
  :root:has(.testata .beta-avviso){--testata:86px}
  .testata:has(.beta-avviso){padding-bottom:22px}
  .testata .beta-avviso{padding:3px}
  .testata .beta-avviso span{position:absolute;left:0;right:0;bottom:0;height:22px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-top:1px solid rgba(228,161,27,.35);background:rgba(228,161,27,.14);color:#f2c35b;font-size:11.5px;font-weight:600;letter-spacing:.01em}
  html[data-tema="chiaro"] .testata .beta-avviso span{background:#f8e7bf;color:#7a4f00}
}
.setup-beta{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:12px 16px;margin:4px 0 18px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello2)}
.setup-beta .setup-interruttore{margin:0}
.setup-beta .setup-aiuto{display:block;margin-top:4px;max-width:520px}
.setup-beta-anteprima{display:flex;align-items:center;gap:8px;color:var(--tenue);font-size:12px}
/* la scritta accanto a BETA, una casella per lingua (06/10/2026): sotto interruttore e anteprima, a tutta larghezza */
.setup-beta-scritta{flex-basis:100%;display:grid;gap:8px;padding-top:12px;border-top:1px dashed var(--bordo)}
.setup-beta-scritta > b{font-size:13px;font-weight:600}
.setup-beta-campi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;align-items:start}
.setup-beta-campi .campo > label,.setup-beta-campi .ms-campo-testa{min-height:24px;display:flex;align-items:center}
.setup-beta-campi .campo{margin:0}
.setup-beta-scritta .setup-aiuto{display:block;margin:0}
@media (max-width:640px){.setup-beta-campi{grid-template-columns:minmax(0,1fr)}.setup-beta .setup-interruttore{flex-direction:column;align-items:flex-start}.setup-beta-anteprima{flex-wrap:wrap}}

.strumenti{display:flex;align-items:center;gap:10px}

.orologio{
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;
  padding-right:12px;margin-right:2px;border-right:1px solid var(--bordo);
}
.orologio .ore{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.orologio .data{font-size:10.5px;color:var(--tenue);text-transform:capitalize}

/* prova "guarda con i suoi occhi": stato in testata, si preme per tornare al proprio account */
.impersona{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 11px;
  border:1px solid var(--accento);border-radius:999px;
  background:var(--accento-velo);color:var(--accento-testo);
  text-decoration:none;line-height:1.1;white-space:nowrap;cursor:pointer;
}
.impersona:hover,.impersona:focus-visible{background:var(--accento);color:#fff;border-color:var(--accento)}
.impersona .punto{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
/* dal 06/10/2026 lampeggia tutta la pillola, come la parte gialla di BETA (l'utente: "anche la pillola dell'impersonate deve
   lampeggiare"): da velo rosso a rosso pieno col testo bianco e un alone; al passaggio del mouse resta piena e ferma */
.impersona{animation:impersona-lampeggio 1.4s ease-in-out infinite}
.impersona:hover,.impersona:focus-visible{animation:none}
@keyframes impersona-lampeggio{0%,40%{background:var(--accento-velo);color:var(--accento-testo);box-shadow:0 0 0 0 rgba(218,2,25,.55)}55%,85%{background:var(--accento);color:#fff;box-shadow:0 0 0 5px rgba(218,2,25,0)}100%{background:var(--accento-velo);color:var(--accento-testo)}}
.impersona:hover .punto,.impersona:focus-visible .punto{background:#fff}
.impersona .chi{display:flex;flex-direction:column;align-items:flex-start}
.impersona .chi b{font-size:10.5px;font-weight:700;letter-spacing:.08em}
.impersona .chi small{font-size:10.5px;opacity:.85;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.impersona svg{flex:none;opacity:.8}
@keyframes impersona-batte{0%,100%{opacity:1}50%{opacity:.2}}
@media (max-width:980px){.impersona .chi small{display:none}}
@media (max-width:560px){.impersona{padding:0 9px;gap:6px}.impersona .chi b{font-size:9.5px}.impersona svg{display:none}}

.lingue{display:flex;gap:2px;padding:3px;border:1px solid var(--bordo);border-radius:999px}
.lingue a{
  display:block;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;
  color:var(--tenue);letter-spacing:.04em;transition:background-color .2s,color .2s;
}
.lingue a:hover{color:var(--testo)}
.lingue a.sel{background:var(--accento);color:#fff}

.tondo{
  width:36px;height:36px;display:grid;place-items:center;flex:none;
  border:1px solid var(--bordo);border-radius:50%;color:var(--tenue);
  background:transparent;cursor:pointer;transition:color .2s,border-color .2s,transform .2s;
}
.tondo:hover{color:var(--accento-testo);border-color:var(--accento);transform:translateY(-1px)}
html[data-tema="scuro"] .tondo .sole{display:block}
html[data-tema="scuro"] .tondo .luna{display:none}
html[data-tema="chiaro"] .tondo .sole{display:none}
html[data-tema="chiaro"] .tondo .luna{display:block}

.utente{position:relative}
.utente summary{
  display:flex;align-items:center;gap:10px;padding:4px 6px 4px 4px;
  border-radius:999px;cursor:pointer;list-style:none;border:1px solid transparent;
}
.utente summary::-webkit-details-marker{display:none}
.utente summary:hover{border-color:var(--bordo)}
.utente summary img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--bordo)}
/* senza foto: le iniziali in un tondo del colore d'accento */
.iniziali{flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accento);color:#fff;font-weight:600;letter-spacing:.02em}
.utente summary .iniziali{width:32px;height:32px;font-size:12.5px}
.utente summary .chi{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.utente summary .nomeu{font-size:13.5px;font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.utente summary .ruolou{font-size:11px;color:var(--tenue);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scheda{
  position:absolute;right:0;top:calc(100% + 10px);width:262px;padding:18px;
  background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:var(--ombra);
}
.scheda .capo{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--bordo)}
.scheda .capo img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.scheda .capo .iniziali{width:46px;height:46px;font-size:16px}
.scheda .capo b{display:block;font-size:14px}
.scheda .capo small{display:block;font-size:11.5px;color:var(--tenue);word-break:break-all}
.scheda .ruolo{
  display:inline-block;margin-top:14px;padding:3px 9px;border-radius:999px;
  font-size:10.5px;color:var(--tenue);border:1px solid var(--bordo);
}
.esci{
  border:0;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;gap:9px;width:100%;margin-top:14px;padding:10px 12px;
  border-radius:var(--raggio);background:var(--accento);color:#fff;
  font-size:13.5px;font-weight:500;justify-content:center;
}
.esci:hover{filter:brightness(1.08)}

/* app installabile e notifiche (js/app.js): pulsanti nel menu utente */
.azioni-app{display:grid;gap:6px;margin-top:14px}
.azioni-app:not(:has(button:not([hidden]))){display:none}
.app-azione{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border-radius:var(--raggio);
  border:1px solid var(--bordo);background:transparent;color:var(--testo);font:inherit;font-size:13px;text-align:left;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.app-azione:hover{border-color:var(--accento);color:var(--accento-testo)}
.app-azione svg{flex:none;color:var(--accento-testo)}
.app-azione.attiva{border-color:var(--successo-bordo)}
.app-azione.attiva svg{color:var(--successo)}
.app-azione:disabled{opacity:.6;cursor:default}

/* pagina offline (offline.html, mostrata dal service worker senza rete) */
body.pagina-offline{display:grid;place-items:center;min-height:100vh;padding:24px}
.offline{max-width:440px;text-align:center}
.offline img{height:40px;margin-bottom:28px}
.offline svg{display:block;margin:0 auto 14px;color:var(--accento-testo)}
.offline h1{margin:0 0 8px;font-size:24px;font-weight:600}
.offline p{margin:0 0 10px;font-size:14px;color:var(--tenue)}
.offline .en{margin-bottom:22px;font-size:12.5px;color:var(--debole)}

/* ===================== struttura: menu laterale e contenuto ===================== */
.corpo{display:flex;min-height:100%;padding-top:var(--testata)}

.barra{
  position:fixed;top:var(--testata);bottom:0;left:0;width:var(--barra);z-index:30;
  padding:20px 14px 24px;overflow-y:auto;
  background:var(--pannello);background-image:var(--trama);
  border-right:1px solid var(--bordo);
}
.barra .sezione{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--debole);
  padding:0 12px;margin:0 0 12px;
}
/* 01/10/2026 variante B scelta dall'utente: voci piu' grandi, in grassetto e con il colore pieno del testo (prima
   14px, normali e tenui: si leggevano male) */
.voce{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;margin-bottom:2px;border-radius:var(--raggio);
  font-size:15px;font-weight:600;color:var(--testo);cursor:pointer;
  position:relative;transition:color .18s,background-color .18s,padding-left .18s;
}
.voce:hover{color:var(--testo);background:var(--pannello2);padding-left:15px}
.voce.attiva{color:var(--testo);background:var(--pannello2);font-weight:700}
.voce.attiva::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;
  background:var(--accento);
}
.voce span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voce .punto{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45;margin-left:7px}
.voce.figlia{font-size:14px;font-weight:500;padding-left:22px}
.voce.figlia.attiva{font-weight:700}
.voce.figlia:hover{padding-left:25px}

.gruppo summary{list-style:none}
.gruppo summary::-webkit-details-marker{display:none}
.gruppo .frec{margin-left:auto;transition:transform .2s ease;opacity:.55}
.gruppo[open] .frec{transform:rotate(90deg)}
.gruppo .sotto{padding:2px 0 8px 12px;margin-left:19px;border-left:1px solid var(--bordo)}
.barra .stato-vuoto{padding:12px;align-items:flex-start;text-align:left}

.centro{flex:1;min-width:0;margin-left:var(--barra);padding:30px 34px 24px;display:flex;flex-direction:column;min-height:calc(100vh - var(--testata))}
.centro > .contenuto{flex:1 0 auto;min-width:0}
/* piede di ogni pagina: riservatezza e riferimenti dell'azienda, sempre in fondo anche con poco contenuto */
.piede{margin-top:36px;padding-top:16px;border-top:1px solid var(--bordo);font-size:11.5px;color:var(--debole);line-height:1.5;text-align:center}
.piede p{margin:0}
/* riquadro stretto e centrato: la specificita' deve battere ".piede p" */
.piede p.piede-riservato{margin:0 auto 8px;color:var(--tenue);max-width:110ch}
/* riga fissa di chi ha realizzato il portale: sotto la riservatezza, uguale in tutte le lingue.
   Stesso colore della riga di riservatezza che le sta sopra (--tenue, non --debole): dentro c'e'
   un indirizzo cliccabile e deve leggersi come il testo sopra, non piu' sbiadito */
.piede p.piede-logika{margin:0 0 8px;color:var(--tenue)}
.piede-logika a{color:inherit;text-decoration:none;border-bottom:1px solid var(--bordo)}
.piede-logika a:hover{color:var(--accento-testo);border-bottom-color:currentColor}
.piede-dati{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.piede-dati a{color:inherit;text-decoration:none}
.piede-dati a:hover{color:var(--accento-testo)}
/* in cima a ogni pagina (FPC.Master): percorso nel menu e titolo. Il percorso parte dalla casetta del cruscotto;
   i gruppi senza indirizzo sono testo, le voci con indirizzo sono link, l'ultima e' la pagina (aria-current) */
.pagina-testa{position:relative;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--bordo);min-width:0}
.pagina-testa::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;border-radius:2px;background:var(--accento)}
.percorso ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0 0 8px;padding:0;list-style:none;font-size:12.5px;line-height:1.3;color:var(--tenue)}
.percorso li{display:inline-flex;align-items:center;min-width:0}
.percorso li + li::before{content:"";flex:none;width:6px;height:6px;margin:0 10px 0 7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.45}
.percorso .percorso-voce{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--tenue);text-decoration:none;border-radius:3px}
.percorso .percorso-voce span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch}
.percorso .percorso-voce svg{flex:none;opacity:.8}
.percorso a.percorso-voce:hover,.percorso a.percorso-casa:hover{color:var(--accento-testo)}
.percorso .percorso-voce[aria-current="page"]{color:var(--testo);font-weight:600}
.percorso .percorso-voce[aria-current="page"] span{max-width:48ch}
.percorso .percorso-casa{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;margin-left:-4px;border-radius:4px;color:var(--tenue)}
.percorso a:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
/* elenco a comparsa delle sottovoci di un gruppo (FPC.Master.vb Briciola + js/percorso.js).
   In pagina e' un <details>: senza JavaScript si apre lo stesso e il percorso non si rompe.
   Il gruppo senza pagina propria apre l'elenco dal suo nome, quello che la pagina ce l'ha
   tiene il nome collegato e apre con la freccetta accanto.
   L'elenco scende sotto tutta la testata (.pagina-testa, che e' gia' position:relative) e non sopra
   il titolo della pagina: aperto, il titolo resta leggibile a ogni larghezza. */
.percorso,.percorso li.percorso-gruppo{position:static}
.percorso li.percorso-gruppo{gap:1px}
.percorso details.percorso-menu{display:inline-flex;align-items:center;min-width:0}
.percorso summary.percorso-somm{display:inline-flex;align-items:center;gap:6px;min-width:0;cursor:pointer;list-style:none;border-radius:3px}
.percorso summary.percorso-somm::-webkit-details-marker{display:none}
.percorso summary.percorso-somm::marker{content:""}
/* 24x24 come la casetta del cruscotto qui accanto: e' il minimo di un bersaglio col mouse */
.percorso summary.percorso-freccia{width:24px;height:24px;justify-content:center;color:var(--tenue)}
.percorso summary.percorso-somm:hover,.percorso details.percorso-menu[open] > summary.percorso-somm{color:var(--accento-testo)}
.percorso summary.percorso-somm:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.percorso summary.percorso-somm .percorso-frec{flex:none;opacity:.65;transition:transform .15s ease}
.percorso details.percorso-menu[open] > summary.percorso-somm .percorso-frec{transform:rotate(180deg)}
.percorso details.percorso-menu:not([open]) .percorso-elenco{display:none}
.percorso .percorso-elenco{position:absolute;z-index:40;top:calc(100% + 7px);left:0;margin:0;padding:6px;list-style:none;min-width:196px;max-width:min(300px,calc(100vw - 48px));background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--raggio);box-shadow:var(--ombra);font-size:13px}
.percorso .percorso-elenco li{display:block;min-width:0}
.percorso .percorso-elenco li + li::before{content:none;display:none}
.percorso .percorso-elenco a,.percorso .percorso-elenco > li > span{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:3px;color:var(--tenue);text-decoration:none}
.percorso .percorso-elenco a > span,.percorso .percorso-elenco > li > span > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.percorso .percorso-elenco .punto{flex:none;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45}
.percorso .percorso-elenco a:hover{background:var(--pannello2);color:var(--accento-testo)}
.percorso .percorso-elenco a.attiva{color:var(--testo);font-weight:600}
.percorso .percorso-elenco a.attiva .punto{background:var(--accento);opacity:1}
.percorso .percorso-elenco a:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.percorso summary.percorso-somm .percorso-frec{transition:none}}
/* schermi che si toccano (telefono e iPad): il nome del gruppo, la freccetta e le voci dell'elenco
   diventano bersagli da 38px, gli stessi delle icone tattili delle griglie */
@media (max-width:900px),(pointer:coarse){
  .percorso summary.percorso-somm{min-height:38px}
  .percorso summary.percorso-freccia{width:38px;height:38px}
  .percorso summary.percorso-freccia .percorso-frec{width:16px;height:16px}
  .percorso .percorso-elenco a,.percorso .percorso-elenco > li > span{min-height:38px;padding:8px 10px}
}
.titolopagina{margin:0;font-size:clamp(21px,2.3vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
@media (max-width:560px){
  .pagina-testa{margin-bottom:16px;padding-bottom:12px}
  .percorso ol{font-size:12px}
  .percorso .percorso-voce span{max-width:22ch}
  /* sul telefono l'elenco si aggancia a tutta la testata: non puo' sporgere di lato */
  .percorso .percorso-elenco{top:calc(100% + 4px);left:0;right:0;width:auto;min-width:0;max-width:none}
}

/* etichetta colorata di una categoria o evento delle opportunita' (DealCategorie.Colori): fondo velato, pallino pieno */
.tag-categoria,.camp-categoria-pallino{--tc:#5c6b74}
.c-rosso{--tc:#da0219}.c-arancio{--tc:#d66208}.c-ambra{--tc:#a66e14}.c-verde{--tc:#1e9e57}.c-teal{--tc:#0f8f8a}
.c-blu{--tc:#2563eb}.c-viola{--tc:#6d4fc4}.c-rosa{--tc:#c2417a}.c-grigio{--tc:#5c6b74}
html[data-tema="scuro"] .c-rosso{--tc:#ff5c6b}html[data-tema="scuro"] .c-arancio{--tc:#ffa24d}html[data-tema="scuro"] .c-ambra{--tc:#f2c14e}
html[data-tema="scuro"] .c-verde{--tc:#4fd08a}html[data-tema="scuro"] .c-teal{--tc:#3ccbc4}html[data-tema="scuro"] .c-blu{--tc:#8ab4ff}
html[data-tema="scuro"] .c-viola{--tc:#b39cff}html[data-tema="scuro"] .c-rosa{--tc:#ff8fc0}html[data-tema="scuro"] .c-grigio{--tc:#b7c1c6}
/* inline-block (non flex): cosi' un nome lungo finisce con i puntini */
.tag-categoria{
  display:inline-block;max-width:100%;padding:2px 9px 2px 7px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--tc) 34%,transparent);background:color-mix(in srgb,var(--tc) 12%,transparent);
  color:color-mix(in srgb,var(--tc) 72%,var(--testo));font-size:11px;font-weight:600;line-height:1.45;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
}
.tag-categoria::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--tc);vertical-align:1px}
a.tag-categoria:hover{background:color-mix(in srgb,var(--tc) 22%,transparent);border-color:var(--tc)}
a.tag-categoria:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.camp-categoria-pallino{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 20%,transparent)}

/* ---------- fascia del colore del tag, sul fianco sinistro di una riga o di una scheda ---------- */
/* Scheda articolo, scheda cliente e opportunita' portano il colore del proprio tag in una fascia larga 12px a sinistra:
   piena per i primi 6px, poi sfumata fino a sparire. E' la barretta del registro attivita', quattro volte piu' larga e
   con il bordo morbido invece che netto.
   Un solo nome di variabile per tutte le pagine (--fascia): ogni pagina la imposta con la sua classe (stato
   dell'articolo, stato del cliente, colore della categoria) e il disegno non sa da dove venga.
   La fascia e' un'immagine di fondo e non un bordo: non sposta il contenuto e non litiga con i bordi che le righe
   hanno gia'.
   ATTENZIONE: --fascia-sfumata contiene var(--fascia) e il valore di una variabile si risolve DOVE LA VARIABILE E'
   DICHIARATA, non dove si usa. Quindi non va messa su :root (prenderebbe sempre il grigio del bordo) ma sulle stesse
   righe o schede che portano il colore: da li' scende, gia' risolta, alle celle e agli pseudo-elementi. */
:root{--fascia:var(--bordo-forte)}
.art-fascia,.az-fascia,.deal-fascia,.camp-fascia,.tk-fascia,.post-fascia,.cat-ev-fascia{
  --fascia-sfumata:linear-gradient(90deg,
    var(--fascia) 0, var(--fascia) 6px,
    color-mix(in srgb,var(--fascia) 48%,transparent) 9px,
    transparent 12px);
}
/* articoli del catalogo (Catalogo.ClasseStato): nuova collezione verde, prodotto standard blu, disponibile a stock
   teal, fuori catalogo grigio. --ic-teal e --ic-grigio hanno gia' la versione schiarita per il tema scuro, a
   differenza del #0f8f8a e del #5c6b74 scritti a mano nelle etichette .cat-stato */
.s-nuova{--fascia:var(--verde)}
.s-standard{--fascia:var(--blu)}
.s-stock{--fascia:var(--ic-teal)}
.s-fuori{--fascia:var(--ic-grigio)}
/* tema scuro: --blu (#2563eb) e' il blu pieno dei pulsanti, pensato per reggere il testo bianco, e non ha la versione
   schiarita. Come fascia sul fondo scuro della scheda articolo restava a 2,9:1 contro il 4,3 / 7,5 / 8,2 delle altre
   tre: spariva nel fondo mentre l'etichetta PRODOTTO STANDARD accanto era ben visibile. Qui la fascia passa a
   --ic-blu, gia' schiarito. Solo sulle righe articolo dell'opportunita' (t-articoli): a catalogo la stessa --fascia
   colora anche il tag pieno con il testo bianco, che con un blu chiaro diventerebbe illeggibile. */
html[data-tema="scuro"] table.tabella.t-articoli tbody tr.art-fascia.s-standard{--fascia:var(--ic-blu)}
/* stato del cliente (AnagraficaAziende.EtichettaStato): il giallo dell'etichetta PROSPECT (#f5c518) come fascia larga
   accanto al rosso del logo era troppo acceso, qui e' un'ambra appena piu' calma (schiarita nel tema scuro).
   Nella scheda azienda il tag si appoggia sulla fascia e ne prende la tinta (.az-testa.az-fascia > .stato-cliente).
   Nell'elenco delle aziende (Anagrafica.aspx: tr.az-fascia + AnagraficaAziende.ClasseStato) la fascia e' la stessa
   della scheda, ma l'etichetta sta nella sua colonna, non la tocca, e resta il giallo pieno di sempre.
   Contrasto della fascia sul fondo della riga (--pannello) e della scheda del telefono (--pannello2): verde 3,4 e
   3,2:1 nel tema chiaro, 4,8 e 4,4:1 nello scuro; ambra 9,8 e 9,0:1 nello scuro, ma solo 2,0 e 1,9:1 nel chiaro
   (come nella testata della scheda: tenuta uguale di proposito, e' il colore approvato con la variante B) */
.s-cliente{--fascia:var(--verde)}
.s-prospect{--fascia:#e0b112}
html[data-tema="scuro"] .s-prospect{--fascia:#f2c14e}
/* opportunita': il colore della categoria o dell'evento e' gia' in --tc (classi .c-rosso ... .c-grigio, che qui
   stanno sulla riga dell'elenco o sulla testata della scheda). Senza categoria --tc non c'e' e la fascia resta il
   grigio del bordo: nessuna riga sembra "di sistema" per sbaglio. I selettori nominano l'elemento perche' devono
   battere le .c-* a parita' di classi. I colori li scelgono gli utenti: --tc ha gia' la versione schiarita per il
   tema scuro (poco piu' su), quindi la fascia resta leggibile anche con ambra e arancio nei due temi. */
tr.deal-fascia,.camp-testata.camp-fascia{--fascia:var(--tc,var(--bordo-forte))}
/* ticket di supporto (Supporto/Ticket.aspx): il colore della pillola dello stato, che e' gia' in --tc perche' la riga
   porta la stessa classe .c-* della pillola (TicketHtml.ColoreStato): nuovo blu, presa in carico ambra, completato
   verde, scartato grigio. Categorie ed eventi (Campionature/Categorie.aspx): il colore della categoria, come
   nell'elenco delle opportunita'. Sui fondi delle righe e delle schede gli stati stanno ad almeno 3,2:1 nel tema
   chiaro e 7,2:1 nello scuro; tutti i nove colori delle categorie ad almeno 3,2:1 e 5,0:1 */
tr.tk-fascia,.cat-ev-voce.cat-ev-fascia{--fascia:var(--tc,var(--bordo-forte))}
/* avvisi (Report/Post.aspx): il colore dell'etichetta del tipo (.t-post .badge.livello-*): informazione grigia come
   il --tenue del badge senza colore, novita' verde, importante rossa (--accento-testo, gia' schiarito nel tema
   scuro). Almeno 4,0:1 nel tema chiaro e 3,5:1 nello scuro */
tr.post-fascia{--fascia:var(--tenue)}
tr.post-fascia.livello-novita{--fascia:var(--successo)}
tr.post-fascia.livello-importante{--fascia:var(--accento-testo)}

/* menu compatto (solo schermi grandi, html[data-menu="compatto"]): restano le icone,
   i sotto menu si aprono in un riquadro accanto. Dal 10/10/2026 e' sempre cosi' sopra i 980px e si allarga sopra il
   contenuto al passaggio del mouse (html[data-menu="sopra"], js/app.js); il contenuto resta sempre a 72px */
.menu-compatto{display:none}
.sotto-titolo{display:none}
.barra{transition:width .22s ease,padding .22s ease}
.centro{transition:margin-left .22s ease}
@media (min-width:981px){
  .menu-compatto{display:grid}
  .menu-compatto .freccia{transition:transform .22s ease;transform-box:fill-box;transform-origin:center}
  html[data-menu]{--barra:72px}
  html[data-menu="compatto"] .menu-compatto .freccia{transform:scaleX(-1)}
  html[data-menu="compatto"] .barra{padding:16px 10px;overflow:visible}
  html[data-menu="compatto"] .barra .sezione{display:none}
  html[data-menu="compatto"] .barra .voce{justify-content:center;gap:0;padding:11px 0}
  html[data-menu="compatto"] .barra .voce:hover{padding-left:0}
  html[data-menu="compatto"] .barra .voce > span,
  html[data-menu="compatto"] .barra .voce .frec{display:none}
  html[data-menu="compatto"] .barra .gruppo{position:relative}
  html[data-menu="compatto"] .barra summary.contiene-attiva{color:var(--testo);background:var(--pannello2)}
  html[data-menu="compatto"] .barra summary.contiene-attiva::before{
    content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--accento);
  }
  html[data-menu="compatto"] .barra .gruppo[open] > summary{color:var(--testo);background:var(--pannello2)}
  html[data-menu="compatto"] .barra .gruppo .sotto{
    position:absolute;left:calc(100% + 12px);top:-6px;z-index:35;min-width:230px;margin:0;padding:6px;
    border:1px solid var(--bordo);border-left:3px solid var(--accento);border-radius:var(--raggio);
    background:var(--pannello);box-shadow:var(--ombra);animation:sotto-entra .16s ease-out;
  }
  html[data-menu="compatto"] .sotto-titolo{display:block;padding:6px 10px 6px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--debole)}
  html[data-menu="compatto"] .barra .voce.figlia{justify-content:flex-start;gap:11px;padding:9px 12px}
  html[data-menu="compatto"] .barra .voce.figlia > span{display:inline}
  html[data-menu="compatto"] .barra .voce.figlia:hover{padding-left:15px}
}
@keyframes sotto-entra{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .barra,.centro,.menu-compatto .freccia{transition:none}
  html[data-menu="compatto"] .barra .gruppo .sotto{animation:none}
}

#apri{display:none}
.burger{display:none}
@media (max-width:980px){
  .burger{display:grid}
  .barra{transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
  #apri:checked ~ .corpo .barra{transform:none;box-shadow:var(--ombra)}
  .centro{margin-left:0;padding:22px 18px 20px}
  .orologio .data{display:none}
  .utente summary .chi{display:none}
}
/* tablet in verticale e telefoni in orizzontale: "FP Connect" resta solo se ci sta. Se non ci sta (per esempio con la
   pillola della prova "guarda con i suoi occhi") va a capo e la seconda riga e' tagliata, invece di finire sotto la pillola.
   Il filetto diventa il bordo sinistro del nome, cosi' sparisce insieme al nome.
   Solo dove overflow-y:clip esiste (Safari 16+): senza, la seconda riga uscirebbe sotto la testata */
@supports (overflow-y:clip){
  @media (min-width:561px) and (max-width:980px){
    .marchio{flex-wrap:wrap;align-content:flex-start;height:40px;padding:2px 0;row-gap:20px;overflow-y:clip}
    .marchio .filetto{display:none}
    .marchio .nome{border-left:1px solid var(--bordo);padding-left:13px;line-height:22px}
  }
}
/* schermi stretti durante la prova: senza orologio la pillola non copre il pulsante del menu e il logo resta al suo posto */
@media (max-width:720px){.testata:has(.impersona) .orologio{display:none}}
@media (max-width:560px){
  /* telefono: in testata restano logo e pulsanti; orologio e lingue si tolgono (la lingua si cambia da PC o resta quella salvata) */
  .marchio .nome,.marchio .filetto,.lingue,.orologio{display:none}
  .testata{padding:0 10px;gap:8px}
  .marchio{gap:8px}
  .marchio img{height:20px}
  .strumenti{gap:6px}
  .tondo{width:34px;height:34px}
  .utente summary{padding:2px}
  .utente summary img{width:30px;height:30px}
}
@media (max-width:360px){
  .marchio img{display:none}
}

/* ===================== guida (pulsante "?" in testata, Help.ashx, App_Data/help) ===================== */
.help-sfondo{position:fixed;inset:0;z-index:85;background:rgba(4,20,28,.45);backdrop-filter:blur(2px)}
.help-pannello{
  position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(540px,100vw);display:flex;flex-direction:column;
  background:var(--pannello);color:var(--testo);border-left:1px solid var(--bordo);box-shadow:var(--ombra);
  animation:help-entra .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes help-entra{from{transform:translateX(48px);opacity:0}to{transform:none;opacity:1}}
.help-testa{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.help-simbolo{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accento);color:#fff}
.help-testa > div{flex:1;min-width:0}
.help-testa b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.help-testa small{display:block;font-size:11.5px;color:var(--tenue)}
.help-indice{padding:10px 16px 12px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.help-indice > b{display:block;margin-bottom:6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--debole)}
.help-indice ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:38vh;overflow-y:auto}
.help-indice button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;border:none;border-radius:6px;background:transparent;color:var(--testo);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.help-indice button:hover{background:var(--pannello)}
.help-indice button.attiva{background:var(--accento-velo);color:var(--accento-testo);font-weight:600}
.help-indice button small{font-size:10.5px;color:var(--tenue);white-space:nowrap}
.help-torna{display:block;width:100%;padding:8px 16px;border:none;border-bottom:1px solid var(--bordo);background:transparent;color:var(--accento-testo);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.help-torna:hover{background:var(--pannello2)}
.help-corpo{flex:1;overflow-y:auto;padding:20px 22px 48px;font-size:14px;line-height:1.55;overscroll-behavior:contain}
.help-attesa,.help-errore{padding:30px 10px;text-align:center;color:var(--debole)}
.help-errore{color:var(--pericolo)}

/* contenuto dei file di guida */
.help h2{margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.help h3{margin:24px 0 10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accento-testo)}
/* sottotitolo dentro una sezione lunga (per esempio i due argomenti del Setup): piu' leggero dell'h3, non maiuscolo */
.help h4{margin:18px 0 6px;font-size:13.5px;font-weight:600;color:var(--testo)}
.help p{margin:0 0 10px;color:var(--tenue)}
.help .help-intro{font-size:14.5px;color:var(--testo)}
.help strong,.help b{color:var(--testo)}
.help a{color:var(--accento2);text-decoration:underline}
/* nel pannello (496px utili) vengono due colonne larghe, non tre strette; align-items:start perche' una carta
   non si stiri fino all'altezza della piu' alta della riga, lasciando dentro un riquadro mezzo vuoto */
.help-carte{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start;margin:0 0 14px}
.help-carta{padding:12px 12px 10px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--sfondo)}
.help-carta .help-icona{display:block;font-size:22px;line-height:1;margin-bottom:8px}
.help-carta b{display:block;font-size:13px;margin-bottom:3px}
.help-carta p{margin:0;font-size:12.5px}
.help-passi{list-style:none;counter-reset:passo;margin:0 0 14px;padding:0}
.help-passi > li{position:relative;padding:3px 0 12px 40px;counter-increment:passo;color:var(--tenue)}
.help-passi > li::before{content:counter(passo);position:absolute;left:0;top:1px;width:27px;height:27px;border-radius:50%;background:var(--accento);color:#fff;font-weight:700;font-size:12.5px;display:grid;place-items:center}
.help-passi > li::after{content:"";position:absolute;left:13px;top:31px;bottom:0;width:1px;background:var(--bordo)}
.help-passi > li:last-child::after{display:none}
.help-passi b{color:var(--testo)}
.help-lista{margin:0 0 12px;padding-left:20px;color:var(--tenue)}
.help-lista li{margin-bottom:5px}
.help-lista b{color:var(--testo)}
.help-tip{display:flex;gap:10px;margin:12px 0;padding:10px 12px;border-radius:8px;border-left:3px solid var(--verde);background:var(--pannello2);font-size:13px;color:var(--tenue)}
.help-tip.attenzione{border-left-color:var(--accento)}
.help-tip .help-icona{flex:none;font-size:18px;line-height:1.3}
.help-tip p{margin:0}
.help kbd{display:inline-block;padding:1px 8px;border-radius:5px;border:1px solid var(--bordo-forte);background:var(--pannello2);font:inherit;font-size:12px;font-weight:600;color:var(--testo);white-space:nowrap;line-height:1.5}
.help kbd.verde{border-color:var(--verde);color:var(--verde)}
.help kbd.blu{border-color:var(--accento2);color:var(--accento2)}
.help kbd.rosso{border-color:var(--accento);color:var(--accento-testo)}
/* nomi di campo, percorsi e SQL dentro la guida: il codice si legge come un riquadrino e nel pannello stretto
   va a capo da solo, anche senza spazi, invece di scorrere di lato */
.help code,.help pre code{font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:.92em;padding:1px 5px;border-radius:5px;border:1px solid var(--bordo);background:var(--pannello2);color:var(--testo);white-space:pre-wrap;overflow-wrap:anywhere}
.help pre{margin:10px 0}.help pre code{display:block;padding:8px 10px;line-height:1.5}
/* le icone di riga (.icona-riga) come appaiono negli elenchi, con le stesse classi di colore (ir-consulta, ir-modifica,
   ir-crea, ir-chat, ir-speciale, elimina); tratto dell'svg messo qui per tenere corto l'HTML */
.help kbd.icona{--ic:var(--ic-grigio);display:inline-grid;place-items:center;width:24px;height:24px;padding:0;vertical-align:-6px;border:1px solid color-mix(in srgb,var(--ic) 34%,transparent);border-radius:5px;background:color-mix(in srgb,var(--ic) 11%,transparent);color:var(--ic)}
.help kbd.icona.ir-consulta{--ic:var(--ic-blu)}
.help kbd.icona.ir-modifica{--ic:var(--ic-rosso)}
.help kbd.icona.ir-crea{--ic:var(--ic-verde)}
.help kbd.icona.ir-chat{--ic:var(--ic-teal)}
.help kbd.icona.ir-speciale{--ic:var(--ic-viola)}
.help kbd.icona.attiva{background:var(--ic);border-color:var(--ic);color:#fff}
html[data-tema="scuro"] .help kbd.icona.attiva{color:#04141c}
.help kbd.icona svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* i comandi tondi delle testate (.tondo: nuova chat, nuovo gruppo, apri l'opportunita', chiama) */
.help kbd.icona.tondo{--ic:var(--ic-grigio);border-color:var(--bordo);border-radius:50%;background:transparent;color:var(--tenue)}
.help kbd.icona.tondo.verde{border-color:var(--verde);color:var(--verde)}
@media (max-width:560px){.help-pannello{width:100vw;border-left:none}.help-corpo{padding:16px 16px 40px}}
@media (prefers-reduced-motion:reduce){.help-pannello{animation:none}}

/* foto in grande (link con data-foto-grande) */
.modale-foto{padding:0;border:none;background:transparent;max-width:92vw;max-height:92vh;overflow:visible}
.modale-foto::backdrop{background:rgba(4,20,28,.8)}
.modale-foto img{display:block;max-width:92vw;max-height:90vh;border-radius:6px;background:#fff;box-shadow:var(--ombra)}
.modale-chiudi{
  position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:var(--pannello);color:var(--testo);font-size:22px;line-height:1;box-shadow:var(--ombra);
}
.modale-chiudi:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}

/* =====================================================================
   COMPONENTI COMUNI
   ===================================================================== */

/* testo introduttivo sotto il titolo */
.intro{margin:0 0 20px;color:var(--tenue);font-size:13.5px;max-width:64ch}

/* barra sopra i contenuti: ricerca a sinistra, azioni a destra */
.barra-azioni{display:flex;justify-content:space-between;align-items:center;gap:12px 14px;flex-wrap:wrap;margin-bottom:18px}
.barra-azioni p{margin:0;color:var(--tenue);font-size:13.5px;max-width:56ch}

/* pulsanti di barra e dei moduli: una sola regola di colore in tutte le pagine
   verde (.verde)  = crea qualcosa di nuovo: "+ Nuova azienda", "+ Nuova voce", "+ Aggiungi contatto", "+ Nuovo avviso"
   rosso (.pieno)  = conferma o modifica: Salva, Modifica
   blu   (.blu)    = consulta
   contorno (.vuoto) = azioni secondarie: Annulla, filtri
   rosso a contorno (.pericolo) = elimina
   I comandi ripetuti su ogni riga degli elenchi non sono .bottone ma .icona-riga (qui sotto). */
.bottone{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--raggio);
  border:1px solid transparent;font:inherit;font-size:13.5px;font-weight:500;line-height:1.3;
  cursor:pointer;white-space:nowrap;transition:filter .2s,border-color .2s,color .2s,background-color .2s;
}
.bottone.pieno{background:var(--accento);color:#fff}
.bottone.pieno:hover{filter:brightness(1.08)}
.bottone.vuoto{background:transparent;border-color:var(--bordo);color:var(--testo)}
.bottone.vuoto:hover{border-color:var(--accento);color:var(--accento-testo)}
.bottone.pericolo{background:transparent;border-color:var(--pericolo-bordo);color:var(--pericolo)}
.bottone.pericolo:hover{background:var(--pericolo-velo)}
.bottone.verde{background:var(--verde);color:#fff}
.bottone.verde:hover{filter:brightness(1.08)}
.bottone.blu{background:var(--blu);color:#fff}
.bottone.blu:hover{filter:brightness(1.12)}
.bottone.piccolo{padding:5px 11px;font-size:12px}
/* sola icona: quadrato, il testo resta nel title e in aria-label */
.bottone.icona{padding:0;width:30px;height:30px;justify-content:center;gap:0}
.bottone.icona svg{flex:none}
.bottone:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}

/* attesa mentre la pagina si carica (js/app.js, variante A scelta dall'utente il 19/09/2026): barra rossa che scorre sotto
   la testata e rotella sull'elemento premuto; parte solo se la risposta tarda piu' di un decimo di secondo.
   Voci del menu: la rotella (.attesa-rotella) prende il posto dell'icona. Pulsanti (anche <input>, che non possono avere
   figli): rotella animata sullo sfondo, bianca sui pulsanti pieni e rossa sugli altri. */
.attesa-barra{position:fixed;left:0;right:0;top:var(--testata);height:3px;z-index:45;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .15s}
.attesa-barra.in-cima{top:0}
html.in-attesa .attesa-barra{opacity:1}
.attesa-barra::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--accento) 30%,#ff4b5c 70%,transparent);
}
html.in-attesa .attesa-barra::before{animation:attesa-scorre 1.3s ease-in-out infinite}
@keyframes attesa-scorre{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
html.in-attesa,html.in-attesa *{cursor:progress}
.attesa-rotella{
  display:inline-block;flex:none;width:18px;height:18px;border-radius:50%;
  border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:var(--accento);
  animation:attesa-gira .7s linear infinite;
}
@keyframes attesa-gira{to{transform:rotate(360deg)}}
.voce.in-attesa > .attesa-rotella + svg,.voce.in-attesa > .attesa-rotella + i{display:none}
.voce.figlia > .attesa-rotella{width:12px;height:12px}
.bottone.in-attesa{
  padding-left:36px;background-repeat:no-repeat;background-position:12px center;background-size:16px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23da0219' stroke-opacity='.25' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23da0219' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}
.bottone.pieno.in-attesa,.bottone.verde.in-attesa,.bottone.blu.in-attesa{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}
.bottone.piccolo.in-attesa{padding-left:28px;background-position:8px center;background-size:13px 13px}
.bottone.icona.in-attesa{padding-left:0;background-position:center}
.bottone.icona.in-attesa > svg,.icona-riga.in-attesa > svg{visibility:hidden}
.icona-riga.in-attesa{
  background-repeat:no-repeat;background-position:center;background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23da0219' stroke-opacity='.25' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23da0219' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  html.in-attesa .attesa-barra::before{animation-duration:2.6s}
  .attesa-rotella{animation-duration:1.4s}
}

/* icone di riga negli elenchi (tabelle, schede, liste): quadrati con l'icona al centro, fondo velato e bordo sottile
   del colore della funzione. Stessa funzione = stessa icona e stesso colore in tutte le pagine:
     .ir-consulta  blu         apri, dettagli, guarda (occhio); elenco collegato (righe); scheda PDF; note e allegati
     .ir-modifica  rosso       modifica (matita)
     .ir-crea      verde       nuova opportunita' (+), metti nel cestino, segna come letto, sblocca, autorizza
     .ir-chat      verde acqua chat (fumetto)
     .ir-speciale  viola       azioni dell'amministratore (guarda con i suoi occhi)
     .elimina      grigio      elimina, togli, blocca (cestino): diventa rosso pieno solo al passaggio del mouse
   Senza classe di colore resta grigia. .attiva = stato acceso (chat gia' aperta, articolo gia' nel cestino, dettagli
   aperti): quadrato pieno del colore. I colori (--ic-*) hanno la versione schiarita per il tema scuro.
   Il testo sta in title e aria-label. I colori di .bottone qui sopra valgono per i pulsanti di barra e dei moduli. */
:root{--ic-grigio:#5c6b74;--ic-blu:#2563eb;--ic-rosso:#da0219;--ic-verde:#1e9e57;--ic-teal:#0f8f8a;--ic-viola:#6d4fc4}
html[data-tema="scuro"]{--ic-grigio:#b7c1c6;--ic-blu:#8ab4ff;--ic-rosso:#ff5c6b;--ic-verde:#4fd08a;--ic-teal:#3ccbc4;--ic-viola:#b39cff}
.icona-riga{
  --ic:var(--ic-grigio);
  position:relative;display:inline-grid;place-items:center;flex:none;width:32px;height:32px;padding:0;
  border:1px solid color-mix(in srgb,var(--ic) 34%,transparent);border-radius:6px;
  background:color-mix(in srgb,var(--ic) 11%,transparent);color:var(--ic);
  font:inherit;line-height:0;cursor:pointer;text-decoration:none;
  transition:background-color .15s,border-color .15s,color .15s;
}
.icona-riga.ir-consulta{--ic:var(--ic-blu)}
.icona-riga.ir-modifica{--ic:var(--ic-rosso)}
.icona-riga.ir-crea{--ic:var(--ic-verde)}
.icona-riga.ir-chat{--ic:var(--ic-teal)}
.icona-riga.ir-speciale{--ic:var(--ic-viola)}
.icona-riga svg{display:block;flex:none;width:17px;height:17px;stroke-width:2.1}
.icona-riga:hover,.icona-riga:active{background:color-mix(in srgb,var(--ic) 24%,transparent);border-color:var(--ic)}
.icona-riga:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.icona-riga.attiva,.icona-riga.attiva:hover{background:var(--ic);border-color:var(--ic);color:#fff}
.icona-riga.elimina:hover,.icona-riga.elimina:active{background:var(--ic-rosso);border-color:var(--ic-rosso);color:#fff}
/* tema scuro: sui colori schiariti l'icona piena resta scura, altrimenti il bianco non si legge */
html[data-tema="scuro"] .icona-riga.attiva,html[data-tema="scuro"] .icona-riga.elimina:hover,html[data-tema="scuro"] .icona-riga.elimina:active{color:#04141c}
.icona-riga[disabled],.icona-riga.aspNetDisabled{opacity:.4;pointer-events:none}
/* area di tocco piu' ampia su smartphone e schermi touch */
@media (max-width:900px),(pointer:coarse){.icona-riga{width:38px;height:38px}.icona-riga svg{width:19px;height:19px}}
.a-destra{margin-left:auto}

/* riquadri */
.riquadro{border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);overflow:hidden;margin-bottom:20px;min-width:0}
.riquadro h2{margin:0;padding:14px 20px;font-size:14px;font-weight:600;border-bottom:1px solid var(--bordo)}
.riquadro-testata{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--bordo);font-size:12.5px;color:var(--tenue)}
/* contenitore delle tabelle: le regole @container decidono la forma in base allo spazio vero (con o senza menu laterale) */
.scorri{overflow-x:auto;container-type:inline-size}

/* stato vuoto: nessun dato da mostrare */
.stato-vuoto{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 20px;text-align:center;color:var(--debole);font-size:13px}

/* avvisi */
.avviso{margin:0 0 16px;padding:10px 13px;border-radius:3px;font-size:13px}
.avviso.errore{background:var(--pericolo-velo);border:1px solid var(--pericolo-bordo);color:var(--pericolo)}
.avviso.ok{background:var(--successo-velo);border:1px solid var(--successo-bordo);color:var(--successo)}
/* indicazione su cosa fare nella pagina (blu: consultare/orientarsi) */
.avviso.info{background:color-mix(in srgb,var(--accento2) 10%,transparent);border:1px solid color-mix(in srgb,var(--accento2) 38%,transparent);color:var(--testo)}
.avviso.info b{color:var(--accento2)}
/* l'icona + delle righe citata nel testo: rossa come l'icona vera */
.avviso.info b.icona-testo{color:var(--ic-verde);font-size:15px}
.riquadro > .avviso{margin:14px 20px 0}

/* etichette arrotondate */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--bordo);color:var(--tenue);white-space:nowrap}
.badge.on{border-color:var(--accento);color:var(--accento-testo)}
.badge.off{opacity:.55}
.badge + .badge{margin-left:4px}

/* tabelle dati */
table.tabella{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
table.tabella th{
  text-align:left;padding:10px 12px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--debole);border-bottom:1px solid var(--bordo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
table.tabella td{padding:9px 12px;border-bottom:1px solid var(--bordo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
table.tabella tr:last-child td{border-bottom:none}
table.tabella td b{font-weight:600}
table.tabella td small{display:block;color:var(--tenue);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
table.tabella th .ordina{display:inline-flex;align-items:center;gap:6px;max-width:100%;color:inherit;text-transform:inherit;letter-spacing:inherit}
table.tabella th .ordina:hover,table.tabella th .ordina.attiva{color:var(--testo)}
table.tabella th .ordina svg{flex:none;opacity:.4}
table.tabella th .ordina.attiva svg{opacity:1;color:var(--accento-testo)}
.azioni-riga{display:flex;gap:6px;justify-content:flex-end}

/* paginazione */
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--bordo);font-size:12.5px;color:var(--tenue)}
.per-pagina{display:flex;align-items:center;gap:8px}
.per-pagina select{padding:5px 8px;border-radius:3px;border:1px solid var(--bordo);background:var(--sfondo);color:var(--testo);font:inherit}
.naviga{display:flex;align-items:center;gap:12px}
.icona-pager{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--bordo);color:var(--testo);transition:border-color .2s ease,color .2s ease}
.icona-pager:hover{border-color:var(--accento);color:var(--accento-testo)}
.icona-pager.aspNetDisabled{opacity:.35;pointer-events:none}

/* moduli */
.pannello-form{border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);padding:22px 24px;margin-bottom:22px;min-width:0}
.pannello-form h2{margin:0 0 16px;font-size:15px;font-weight:600}
.pannello-form h3{margin:22px 0 12px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.griglia-campi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo.largo{grid-column:1/-1}
.campo label{font-size:12px;color:var(--tenue)}
.campo input[type=text],.campo input[type=number],.campo input[type=email],.campo input[type=date],
.campo input[type=tel],.campo input[type=url],.campo input[type=search],.campo input[type=password],.campo select,.campo textarea{
  width:100%;min-width:0;padding:8px 11px;border-radius:3px;border:1px solid var(--bordo);
  background:var(--sfondo);color:var(--testo);font:inherit;
}
.campo-flag{flex-direction:row;align-items:center;gap:8px}
.campo-flag label{font-size:13px;color:var(--testo)}
/* interruttore: la casella vera resta nel form ma invisibile, si vede il cursore */
.interruttore{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:13px;color:var(--testo)}
.interruttore input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.interruttore .cursore{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:var(--bordo-forte);transition:background-color .2s}
.interruttore .cursore::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.interruttore input:checked ~ .cursore{background:var(--verde)}
.interruttore input:checked ~ .cursore::after{transform:translateX(16px)}
.interruttore input:focus-visible ~ .cursore{outline:2px solid var(--accento2);outline-offset:2px}
.interruttore input:disabled ~ .cursore{opacity:.4}
/* asp:CheckBox disabilitato esce dentro <span class="aspNetDisabled">: l'input non e' piu' fratello del cursore */
.interruttore:has(input:checked) .cursore{background:var(--verde)}
.interruttore:has(input:checked) .cursore::after{transform:translateX(16px)}
.interruttore:has(input:disabled){cursor:not-allowed}
.interruttore:has(input:disabled) .cursore{opacity:.4}
.suggerimento{font-size:12px;color:var(--debole);margin-top:4px}
.azioni-form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.nascosto{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* =====================================================================
   PAGINE
   ===================================================================== */

/* ---------- Login ----------
   Variante A scelta dall'utente il 23/09/2026: la finestra di accesso di VETRO (pochissima tinta e una sfocatura
   minima, testi chiari con una leggera ombra, pulsanti chiari e pieni). Lo sfondo, dalla stessa sera, e' un TESSUTO
   SPORTIVO disegnato nel canvas #tessuto (js/tessuto.js: maglia fitta in diagonale e pieghe che seguono il mouse),
   sotto la luce rossa e blu della presentazione (umore e sfere) e la grana. Attraverso il vetro si vede la maglia.
   Colori profondi dalla sera del 23/09 (variante B "petrolio notte", "le zone chiare sembrano sbiadite"): umore
   .85 -> .75, sfere .38 -> .22 e grana .07 -> .04, perche' le sfere in "screen" e la grana bianca schiarivano tutto
   come un velo lattiginoso. */
.pagina-login{
  --ink0:#06121a;
  --ink1:#0b2c38;
  --bone:#efe8d9;
  --graphite:#10222b;
  --accento-testo:#ff4b5c;
}
body.pagina-login{background:var(--ink0);color:var(--bone);overflow:hidden}
.pagina-login #form1{height:100%}
.pagina-login .sfondo-login{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.pagina-login .sfondo-login .umore{position:absolute;inset:0;opacity:.75;background:radial-gradient(ellipse at 18% 22%,rgba(218,2,25,.42),transparent 58%),radial-gradient(ellipse at 84% 72%,rgba(59,123,255,.26),transparent 55%)}
.pagina-login .sfondo-login .sfera{position:absolute;border-radius:50%;filter:blur(90px);opacity:.22;mix-blend-mode:screen;will-change:transform}
.pagina-login .sfondo-login .sfera.a{width:60vmax;height:60vmax;left:-20vmax;top:-25vmax;background:radial-gradient(circle,rgba(218,2,25,.55),rgba(218,2,25,0) 62%);animation:login-vaga 26s ease-in-out infinite alternate}
.pagina-login .sfondo-login .sfera.b{width:52vmax;height:52vmax;right:-18vmax;top:10vmax;background:radial-gradient(circle,rgba(59,123,255,.42),rgba(59,123,255,0) 62%);animation:login-vaga 34s ease-in-out infinite alternate-reverse}
.pagina-login .sfondo-login .sfera.c{width:46vmax;height:46vmax;left:20vmax;bottom:-28vmax;background:radial-gradient(circle,rgba(30,158,87,.30),rgba(30,158,87,0) 62%);animation:login-vaga 40s ease-in-out infinite alternate}
@keyframes login-vaga{to{transform:translate(6vmax,4vmax) scale(1.08)}}
.pagina-login #tessuto{position:absolute;inset:0;width:100%;height:100%;display:block}
.pagina-login .sfondo-login .grana{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");background-size:220px 220px}
@media (prefers-reduced-motion:reduce){ .pagina-login .sfondo-login .sfera{animation:none} }
.pagina-login .wrap{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:22px 22px 18px}
@media (min-width:960px){ .pagina-login .wrap{padding:34px 44px 26px} }

.pagina-login header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.pagina-login .mark{display:flex;align-items:center;gap:14px;min-width:0}
.pagina-login .mark img{height:52px;width:auto;display:block}
.pagina-login .mark .fallback{display:none;font-size:16px;font-weight:600;letter-spacing:.06em}
.pagina-login .mark .filetto{width:1px;height:26px;flex:none;background:rgba(239,232,217,.28)}
.pagina-login .mark .nome{font-size:16px;font-weight:600;font-stretch:108%;letter-spacing:-.005em;white-space:nowrap}
.pagina-login .mark .nome b{font-weight:600;color:var(--accento-testo)}
/* la pillola BETA anche qui, accanto al nome (05/10/2026). Dal 06/10/2026 sul telefono stretto non si accorcia piu': va a capo
   sotto il logo, intera, perche' la scritta "Attenzione. Dati non aggiornati" deve leggersi */
.pagina-login .mark .beta-avviso{font-size:12.5px}
@media (max-width:480px){.pagina-login .mark:has(.beta-avviso){flex-wrap:wrap;row-gap:10px}.pagina-login .mark .beta-avviso{flex-basis:auto}}
.pagina-login .since{
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(239,232,217,.5);white-space:nowrap;
}
.pagina-login .since form{display:contents}
.pagina-login .since .lng{border:0;background:none;padding:0;font-family:inherit;font-size:inherit;cursor:pointer;color:rgba(239,232,217,.5);text-decoration:none;font-weight:600;letter-spacing:.1em}
.pagina-login .since .lng:hover{color:var(--accento-testo)}
.pagina-login .since .sep{width:1px;height:14px;background:rgba(239,232,217,.22)}
@media (max-width:640px){ .pagina-login .since{display:none} }

.pagina-login main{display:grid;align-items:center;gap:34px;grid-template-columns:1fr;padding:26px 0;min-height:0}
@media (min-width:960px){
  .pagina-login main{grid-template-columns:1.15fr minmax(380px,420px);gap:64px}
}

.pagina-login .claim{max-width:none;min-width:0}
.pagina-login .claim h2{
  margin:0;font-size:clamp(64px,8.2vw,132px);line-height:.9;font-weight:800;
  font-stretch:110%;letter-spacing:-.045em;color:var(--bone);text-wrap:balance;
}
.pagina-login .claim h2 em{font-style:normal;display:block;color:var(--accento);padding-bottom:.08em}
.pagina-login .claim p{margin:26px 0 0;max-width:34ch;font-size:15.5px;line-height:1.65;color:rgba(239,232,217,.74)}
.pagina-login .rule{width:56px;height:2px;margin:24px 0 0;background:var(--accento)}
/* sotto i 960 px il claim resta, piu' piccolo, sopra la finestra */
@media (max-width:959px){
  .pagina-login .claim{max-width:none}
  .pagina-login .claim h2{font-size:clamp(46px,13vw,64px)}
  .pagina-login .claim p{margin-top:14px;font-size:14.5px}
  .pagina-login .rule{margin-top:16px}
}

.pagina-login .tag{
  position:relative;color:var(--bone);
  padding:34px 30px 28px;border-radius:20px;
  background:linear-gradient(155deg,rgba(24,50,64,.20),rgba(6,18,26,.14));
  -webkit-backdrop-filter:blur(2.5px) saturate(140%);backdrop-filter:blur(2.5px) saturate(140%);
  border:1px solid rgba(243,238,227,.26);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.03);
  justify-self:center;width:100%;max-width:440px;
}
/* il riflesso del vetro in alto a sinistra */
.pagina-login .tag::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,0) 38%)}
.pagina-login .tag > *{position:relative}

.pagina-login .swatch{display:flex;gap:6px;margin-bottom:24px}
.pagina-login .swatch i{height:4px;flex:1;border-radius:2px;background:rgba(243,238,227,.22)}
.pagina-login .swatch i:nth-child(1){background:var(--accento)}
.pagina-login .swatch i:nth-child(2){background:#3b7bff}
.pagina-login .swatch i:nth-child(3){background:#1e9e57}

.pagina-login .tag h1{margin:0 0 10px;font-size:30px;font-weight:700;font-stretch:104%;letter-spacing:-.02em;line-height:1.08;text-shadow:0 1px 10px rgba(6,18,26,.5)}
.pagina-login .tag .lede{margin:0 0 26px;max-width:38ch;font-size:14.5px;line-height:1.6;color:rgba(243,238,227,.86);text-shadow:0 1px 8px rgba(6,18,26,.55)}

.pagina-login .sso{
  display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:12px 18px;margin-bottom:12px;
  border:0;border-radius:10px;background:rgba(243,238,227,.95);color:#0b1c24;
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:left;text-decoration:none;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.8);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background-color .18s ease;
}
/* la freccetta a destra; lascia il posto alla rotella durante l'accesso */
.pagina-login .sso::after{content:"";margin-left:auto;width:16px;height:16px;flex:none;opacity:.55;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>") center/contain no-repeat}
.pagina-login .sso:hover{transform:translateY(-1px);background:#fff;box-shadow:0 14px 26px -14px rgba(0,0,0,.9)}
.pagina-login .sso:active{transform:translateY(0)}
.pagina-login .sso:focus-visible{outline:2px solid #8ab4ff;outline-offset:3px}
.pagina-login .sso .chip{width:28px;height:28px;flex:none;border-radius:6px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(11,28,36,.12)}
.pagina-login .sso .spin{
  margin-left:auto;width:15px;height:15px;flex:none;
  border:2px solid rgba(11,28,36,.22);border-top-color:#0b1c24;
  border-radius:50%;animation:gira .7s linear infinite;display:none;
}
.pagina-login .sso[aria-busy="true"]{cursor:progress}
.pagina-login .sso[aria-busy="true"] .spin{display:block}
.pagina-login .sso[aria-busy="true"]::after{display:none}

.pagina-login .specs{display:flex;gap:22px;margin:26px 0 0;padding-top:18px;border-top:1px solid rgba(243,238,227,.16)}
.pagina-login .specs div{min-width:0}
.pagina-login .specs b{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,238,227,.55);margin-bottom:4px}
.pagina-login .specs span{font-size:13px;color:var(--bone)}
.pagina-login .specs a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(243,238,227,.35)}
.pagina-login .specs a:hover{color:#ff8a96;border-color:#ff8a96}

.pagina-login .alert{
  display:none;margin:0 0 20px;padding:11px 13px;border-radius:8px;
  max-height:220px;overflow:auto;word-break:break-word;
  background:rgba(218,2,25,.22);border-left:3px solid var(--accento);
  font-size:13.5px;line-height:1.5;color:#ffe3e6;
}
.pagina-login .alert.on{display:block}

.pagina-login footer{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;font-size:11.5px;color:rgba(239,232,217,.42)}
.pagina-login footer a{color:inherit;text-decoration:none}
.pagina-login footer a:hover{color:var(--bone)}

.pagina-login .rise{opacity:0;transform:translateY(16px);animation:sale .9s cubic-bezier(.2,.7,.25,1) forwards}
.pagina-login .d1{animation-delay:.15s}
.pagina-login .d2{animation-delay:.45s}
.pagina-login .d3{animation-delay:.7s}
.pagina-login .d4{animation-delay:.95s}
@keyframes sale{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .pagina-login .rise{animation:none;opacity:1;transform:none}
}
@media (max-width:959px){
  body.pagina-login{overflow:auto}
  .pagina-login .wrap{min-height:100%;height:auto}
}

/* ---------- Login: sito in manutenzione (FPC.ModoManutenzione, Impostazioni > Setup) ----------
   Nastro a strisce rosse che scorre in cima alla pagina, sul cartellino un nastro "lavori in corso" con il puntino
   che lampeggia e due ingranaggi che girano in versi opposti; a sinistra "Torniamo presto". Senza animazioni se
   il sistema chiede movimento ridotto. */
.pagina-login .manut-barra{
  position:fixed;top:0;left:0;right:0;z-index:5;height:7px;
  background:repeating-linear-gradient(-45deg,var(--accento) 0 12px,var(--bone) 12px 24px);
  background-size:33.94px 100%;animation:manut-scorre .9s linear infinite;box-shadow:0 2px 14px rgba(218,2,25,.45);
}
@keyframes manut-scorre{to{background-position:33.94px 0}}
.pagina-login .claim h2.manut-claim em{animation:manut-respira 2.8s ease-in-out infinite}
@keyframes manut-respira{50%{opacity:.55}}

.pagina-login .tag.in-manutenzione{padding-top:0;overflow:hidden}
.pagina-login .tag.in-manutenzione::before{top:0}
.pagina-login .manut-nastro{
  display:flex;align-items:center;justify-content:center;height:42px;margin:0 -30px 22px;
  background:repeating-linear-gradient(-45deg,var(--accento) 0 16px,#a90013 16px 32px);
  background-size:45.25px 100%;animation:manut-scorre-nastro 1.4s linear infinite;
}
@keyframes manut-scorre-nastro{to{background-position:45.25px 0}}
.pagina-login .manut-nastro b{
  display:inline-flex;align-items:center;gap:9px;padding:5px 14px;border-radius:2px;
  background:var(--graphite);color:var(--bone);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.pagina-login .manut-nastro b i{width:8px;height:8px;border-radius:50%;background:#ff4b5c;box-shadow:0 0 0 0 rgba(255,75,92,.7);animation:manut-lampeggia 1.3s ease-out infinite}
@keyframes manut-lampeggia{0%{box-shadow:0 0 0 0 rgba(255,75,92,.75)}70%{box-shadow:0 0 0 9px rgba(255,75,92,0)}100%{box-shadow:0 0 0 0 rgba(255,75,92,0)}}
.pagina-login .manut-icona{position:relative;width:86px;height:70px;margin:4px 0 16px;color:var(--accento)}
.pagina-login .manut-icona .ingr{position:absolute;display:block;transform-box:fill-box;transform-origin:center}
.pagina-login .manut-icona .grande{left:0;top:0;width:60px;height:60px;animation:gira 7s linear infinite}
.pagina-login .manut-icona .piccolo{left:48px;top:34px;width:36px;height:36px;color:var(--bone);animation:gira 4.2s linear infinite reverse}
.pagina-login .tag.in-manutenzione h1{color:var(--accento-testo)}
.pagina-login .manut-messaggio{
  margin:-10px 0 22px;padding:12px 14px;border-left:3px solid var(--accento);border-radius:0 3px 3px 0;
  background:rgba(243,238,227,.08);font-size:14.5px;font-weight:500;line-height:1.55;color:var(--bone);overflow-wrap:anywhere;
}
.pagina-login .manut-anteprima{
  margin:0 0 18px;padding:10px 12px;border:1px dashed rgba(243,238,227,.35);border-radius:8px;
  font-size:12.5px;line-height:1.5;color:rgba(243,238,227,.82);
}
.pagina-login .manut-anteprima a{display:inline-block;margin-top:4px;font-weight:600;color:#ff8a96;text-decoration:none;border-bottom:1px solid currentColor}
.pagina-login .manut-tecnici{
  display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-size:12.5px;font-weight:500;
  color:rgba(243,238,227,.78);text-decoration:none;border-bottom:1px solid rgba(243,238,227,.3)
}
.pagina-login .manut-tecnici:hover{color:#ff8a96;border-color:#ff8a96}
.pagina-login .manut-tecnici:focus-visible{outline:2px solid var(--accento2);outline-offset:3px}
.pagina-login .manut-nota{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:rgba(243,238,227,.72)}
@media (prefers-reduced-motion:reduce){
  .pagina-login .manut-barra,.pagina-login .manut-nastro,.pagina-login .manut-nastro b i,
  .pagina-login .manut-icona .ingr,.pagina-login .claim h2.manut-claim em{animation:none}
}

/* ---------- Login: accesso da un'area non autorizzata (FPC.AccessoRete, Impostazioni > Setup) ----------
   Barra rossa con una luce che scorre in cima alla pagina; sul cartellino un radar (onde che si allargano e fascio
   che gira) attorno al mondo barrato e la scritta "accesso da un'area non autorizzata" attraversata da un lampo. */
.pagina-login .area-barra{
  position:fixed;top:0;left:0;right:0;z-index:5;height:6px;
  background:linear-gradient(90deg,#6b000c 0%,var(--accento) 35%,#ff9aa4 50%,var(--accento) 65%,#6b000c 100%);background-size:220% 100%;
  animation:area-scorre 2.2s linear infinite;box-shadow:0 0 18px rgba(218,2,25,.65)
}
@keyframes area-scorre{from{background-position:120% 0}to{background-position:-120% 0}}
.pagina-login .tag.in-area{border-color:rgba(218,2,25,.55);box-shadow:0 30px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(218,2,25,.35),0 0 40px -8px rgba(218,2,25,.45),inset 0 1px 0 rgba(255,255,255,.14)}
.pagina-login .area-avviso{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 0 14px;text-align:center}
.pagina-login .area-radar{position:relative;display:grid;place-items:center;width:118px;height:118px}
.pagina-login .area-onda{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(218,2,25,.55);opacity:0;animation:area-onda 2.4s ease-out infinite}
.pagina-login .area-onda:nth-child(2){animation-delay:.8s}
.pagina-login .area-onda:nth-child(3){animation-delay:1.6s}
@keyframes area-onda{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.05);opacity:0}}
.pagina-login .area-fascio{position:absolute;inset:12px;border-radius:50%;background:conic-gradient(from 0deg,rgba(218,2,25,.38),rgba(218,2,25,0) 28%,rgba(218,2,25,0));animation:gira 2.6s linear infinite}
.pagina-login .area-globo{position:relative;width:60px;height:60px;padding:11px;border-radius:50%;background:var(--bone);color:var(--accento);box-shadow:0 0 0 3px rgba(218,2,25,.2),0 8px 20px -8px rgba(218,2,25,.6)}
.pagina-login .area-titolo{
  margin:0;font-size:22px;font-weight:700;font-stretch:110%;line-height:1.18;letter-spacing:.02em;text-transform:uppercase;color:var(--accento);
  background:linear-gradient(100deg,#ff4b5c 0%,#ff6d7a 40%,#ffd3d8 50%,#ff6d7a 60%,#ff4b5c 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:area-luce 2.8s linear infinite
}
@keyframes area-luce{from{background-position:120% 0}to{background-position:-120% 0}}
.pagina-login .area-testo{max-width:none;margin:0 0 14px;text-align:center}
.pagina-login .area-dettaglio{padding:10px 12px;border-left:3px solid var(--accento);border-radius:0 6px 6px 0;background:rgba(243,238,227,.08);font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:13px;color:var(--bone);overflow-wrap:anywhere}
.pagina-login .area-aiuto{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:rgba(243,238,227,.72)}
.pagina-login .area-aiuto a{color:#ff8a96}
@media (prefers-reduced-motion:reduce){
  .pagina-login .area-barra,.pagina-login .area-onda,.pagina-login .area-fascio,.pagina-login .area-titolo{animation:none}
  .pagina-login .area-onda:first-child{opacity:.5;transform:scale(.8)}
}

/* ---------- Cruscotto (Default.aspx) ---------- */
.fascia.compatta{padding:22px 28px;margin-bottom:18px}
.fascia.compatta h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:4px}
.fascia.compatta p{font-size:14px}
.fascia.compatta .oggi{margin-bottom:10px}
/* Una colonna sola (03/10/2026): in cima la scheda del saluto con il profilo dentro (.cs-saluto, vedi "Cruscotto:
   saluto e profilo insieme" in fondo), poi l'accesso veloce, gli avvisi e i numeri, a tutta larghezza: le righe
   nascono da sole, quindi quando la sezione degli avvisi non c'e' (nessun avviso da leggere) non resta nessun buco.
   Prima il saluto e il profilo erano due riquadri affiancati. */
.cruscotto-griglia{
  display:grid;gap:18px;margin-bottom:26px;align-items:stretch;
  grid-template-columns:minmax(0,1fr);
}
.cruscotto-griglia > *{margin-bottom:0;min-width:0;grid-column:1 / -1}
.riquadro h2.con-icona-titolo{display:flex;align-items:center;gap:9px}
.riquadro h2.con-icona-titolo svg{color:var(--accento-testo);flex:none}
.info-agenti{list-style:none;margin:0;padding:6px 20px 10px}
/* solo le righe dell'elenco avvisi: gli elenchi scritti nel testo dell'avviso restano normali */
.info-agenti > li{position:relative;padding:12px 0 12px 16px;border-bottom:1px solid var(--bordo)}
.info-agenti > li:last-child{border-bottom:none}
.info-agenti > li::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--accento2)}
.info-agenti > li.livello-novita::before{background:var(--successo)}
.info-agenti > li.livello-importante::before{background:var(--accento)}
.info-agenti > li > b{display:block;font-size:14px;margin-bottom:3px}
/* testo degli avvisi (HTML ripulito da HtmlSicuro): stesso aspetto nel cruscotto e nell'editor di Gestione */
.info-testo{font-size:13px;line-height:1.5;color:var(--tenue);overflow-wrap:anywhere}
.info-testo > :first-child{margin-top:0}
.info-testo > :last-child{margin-bottom:0}
.info-testo p,.info-testo div,.info-testo ul,.info-testo ol,.info-testo blockquote{margin:0 0 6px}
.info-testo ul,.info-testo ol{padding-left:20px}
.info-testo h3,.info-testo h4{margin:10px 0 4px;font-size:14px;font-weight:600;color:var(--testo)}
.info-testo a{color:var(--accento2);text-decoration:underline}
.info-testo img{display:block;max-width:100%;height:auto;margin:8px 0;border-radius:6px}
.info-testo blockquote{padding-left:10px;border-left:3px solid var(--bordo)}
.info-testo hr{border:none;border-top:1px solid var(--bordo);margin:10px 0}
.info-agenti .info-testo b,.info-agenti .info-testo strong{display:inline;margin:0;font-size:inherit;color:var(--testo)}
.info-agenti time{display:block;font-size:11px;color:var(--debole)}
/* pulsante "Letto" (js/avvisi.js): l'avviso scivola via solo per chi lo preme */
.info-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.info-letto{gap:5px;padding:4px 10px;font-size:11.5px}
.info-letto svg{color:var(--verde)}
.info-agenti > li{transition:opacity .25s ease,transform .25s ease}
.info-agenti > li.via{opacity:0;transform:translateX(24px)}
.stato-vuoto .bottone{margin-top:2px}

/* ---------- Report > Elenco banner (Report/Post.aspx) ---------- */
/* colonne fisse strette (data, chi, lettura, icona) e il resto al testo dell'avviso; sotto i 900px diventa a schede */
/* table.tabella nel selettore: deve battere la regola generica delle celle (una riga sola, testo tagliato) */
table.tabella.t-post td{vertical-align:top;white-space:normal;overflow:visible;text-overflow:clip}
table.tabella.t-post td small{white-space:normal}
/* 128 = i 118 di prima piu' i 10px di rientro della fascia del tipo (qui sotto): la data non perde spazio */
.t-post .c-data{width:128px}
.t-post .c-utente{width:16%}
.t-post .c-stato{width:150px}
.t-post .c-azioni{width:64px}
.t-post td.post-testo{overflow-wrap:anywhere}
.t-post td.post-testo > b{display:block;margin:6px 0 4px;font-size:13.5px}
.t-post td.post-testo .info-testo{margin-bottom:4px}
.t-post .info-testo img{max-width:100%;height:auto}
.t-post .badge.livello-novita{border-color:var(--successo);color:var(--successo)}
.t-post .badge.livello-importante{border-color:var(--accento);color:var(--accento-testo)}
.t-post tr.daleggere td:first-child{box-shadow:inset 3px 0 0 var(--accento)}
.t-post tr.letta{opacity:.78}
.t-post tr.letta:hover{opacity:1}
.post-stato{display:block;font-size:12px;color:var(--tenue)}
tr.daleggere .post-stato{color:var(--accento-testo);font-weight:600}
/* icona del pulsante secondo lo stato: spunta "Segna come letto", freccia "Rimetti nel cruscotto" (le scambia js/avvisi.js) */
.t-post .icona-riga[data-letto] .i-rimetti,.t-post .icona-riga[data-nonletto] .i-letto{display:none}
/* segna come letto = verde come le altre conferme; rimetti nel cruscotto resta grigio */
.t-post .icona-riga[data-letto]{--ic:var(--ic-verde)}

/* tabella stretta, sotto i 900px (smartphone, tablet): ogni avviso diventa una scheda staccata, niente scorrimento
   orizzontale. In cima l'icona (a sinistra) e la data (a destra); sotto il testo; in fondo lettura e chi l'ha pubblicato.
   Bordo e fondo della scheda: regola comune nella sezione Campionature. */
@container (max-width:900px){
  table.tabella.t-post thead{display:none}
  table.tabella.t-post{display:block;width:100%}
  table.tabella.t-post tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"azioni data" "testo testo" "stato utente";
    gap:10px 12px;padding:12px 14px;
  }
  table.tabella.t-post td{display:block;width:auto;min-width:0;padding:0;border:none;white-space:normal;overflow:visible}
  table.tabella.t-post td small{white-space:normal}
  table.tabella.t-post td.c-azioni{grid-area:azioni}
  table.tabella.t-post td.c-data{grid-area:data;text-align:right}
  table.tabella.t-post td.c-testo{grid-area:testo}
  table.tabella.t-post td.c-stato{grid-area:stato;align-self:end}
  table.tabella.t-post td.c-utente{grid-area:utente;align-self:end;text-align:right;max-width:180px;color:var(--tenue);font-size:12.5px;overflow-wrap:anywhere}
  /* da leggere: la barretta rossa passa dalla prima cella al bordo della scheda */
  table.tabella.t-post tr.daleggere td:first-child{box-shadow:none}
  table.tabella.t-post tbody tr.daleggere{border-color:var(--accento);box-shadow:inset 3px 0 0 var(--accento)}
}
/* variante B: fascia del colore dell'etichetta del tipo (informazione grigia, novita' verde, importante rossa: le
   variabili --fascia stanno in cima al foglio), come le righe delle opportunita' e dei ticket. Su PC sta sulla prima
   cella (la <tr> non tiene il fondo) e prende il posto della barretta rossa "da leggere", che si sarebbe sovrapposta:
   lo stato di lettura resta scritto (Da leggere in rosso, le lette piu' chiare). Nella scheda del telefono la fascia
   passa alla scheda intera e la scheda da leggere tiene il suo bordo rosso, senza la barretta. */
table.tabella.t-post thead th.c-data{padding-left:22px}
table.tabella.t-post tbody tr.post-fascia > td.c-data{
  padding-left:22px;
  background-image:var(--fascia-sfumata);
  background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
}
table.tabella.t-post tbody tr.post-fascia.daleggere > td.c-data{box-shadow:none}
@container (max-width:900px){
  table.tabella.t-post tbody tr.post-fascia{
    background-image:var(--fascia-sfumata);
    background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
  }
  table.tabella.t-post tbody tr.post-fascia:not(.daleggere){border-color:color-mix(in srgb,var(--fascia) 45%,var(--bordo-forte))}
  table.tabella.t-post tbody tr.post-fascia.daleggere{box-shadow:none}
  table.tabella.t-post tbody tr.post-fascia > td.c-data{background-image:none;padding-left:0}
}
.profilo .badge{margin-top:8px}
.fascia{
  position:relative;overflow:hidden;border-radius:var(--raggio);
  border:1px solid var(--bordo);background:var(--pannello);
  padding:34px 32px;margin-bottom:26px;
}
.fascia canvas{position:absolute;inset:0;width:100%;height:100%}
/* la fascia di apertura del cruscotto con il tessuto (canvas, js/tessuto.js) e la luce rossa e blu non c'e' piu'
   dal 03/10/2026: il saluto e' una scheda bassa con il profilo dentro (.cs-saluto, in fondo al file) */
.fascia .dentro{position:relative;max-width:46ch}
.fascia h2{margin:0 0 8px;font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.fascia p{margin:0;color:var(--tenue);font-size:15px}
.fascia .oggi{
  display:inline-block;margin-bottom:16px;padding:4px 11px;border-radius:999px;
  border:1px solid var(--bordo);font-size:11px;color:var(--tenue);text-transform:capitalize;
}

.carta{
  position:relative;padding:20px;border-radius:var(--raggio);
  border:1px solid var(--bordo);background:var(--pannello);
  transition:border-color .2s ease,transform .2s ease;
}
.carta:hover{border-color:var(--accento);transform:translateY(-2px)}
.carta .eti{display:flex;align-items:center;gap:9px;color:var(--tenue);font-size:12.5px;margin-bottom:14px}
.carta .num{font-size:33px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.carta .var{margin-top:8px;font-size:12px;color:var(--tenue)}
.carta .var b{color:var(--accento-testo);font-weight:600}
.carta::after{
  content:"";position:absolute;left:20px;right:20px;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--accento),transparent);opacity:0;transition:opacity .2s;
}
.carta:hover::after{opacity:.8}

.due{display:grid;gap:18px;grid-template-columns:1.6fr 1fr}
@media (max-width:900px){.due{grid-template-columns:1fr}}

.profilo{display:flex;align-items:center;gap:15px;padding:20px;border-bottom:1px solid var(--bordo)}
.profilo img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--accento)}
.profilo b{display:block;font-size:16px;letter-spacing:-.01em}
.profilo small{display:block;color:var(--tenue);font-size:12.5px;word-break:break-all}

/* elenco etichetta / valore (scheda azienda, profilo) */
dl.dati{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:9px 18px;margin:0;padding:18px 20px;font-size:13.5px}
dl.dati dt{color:var(--tenue)}
dl.dati dd{margin:0;overflow-wrap:anywhere}
dl.dati code{font-size:12px;color:var(--tenue)}
dl.dati.compatto{grid-template-columns:auto 1fr;gap:10px 18px;padding:20px}
dl.dati.compatto dd{text-align:right}
@media (max-width:600px){
  dl.dati:not(.compatto){grid-template-columns:minmax(0,1fr);gap:2px}
  dl.dati:not(.compatto) dd{margin-bottom:10px}
}

/* stato dell'azienda: PROSPECT (FPC_Nuovo = 1) giallo, CLIENTE verde; nell'elenco e nella scheda */
.stato-cliente{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.1em;line-height:1.5;vertical-align:middle;white-space:nowrap}
.stato-cliente.prospect{background:#f5c518;color:#2b2200}
.stato-cliente.cliente{background:var(--verde);color:#fff}

/* ---------- Clienti: elenco aziende (Anagrafica.aspx) ---------- */
/* ricerca mentre si scrive (js/ricerca-live.js): lente a sinistra, attesa a destra */
.barra-cerca{position:relative;display:flex;flex:1;min-width:240px;max-width:420px}
.barra-cerca .lente{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--debole);pointer-events:none}
.barra-cerca input[type=text],.barra-cerca input[type=search]{
  flex:1;min-width:0;padding:9px 36px 9px 34px;border-radius:3px;border:1px solid var(--bordo);
  background:var(--pannello);color:var(--testo);font:inherit;transition:border-color .2s;
}
.barra-cerca input:focus{outline:none;border-color:var(--accento)}
.barra-cerca input:focus + .cerca-attesa,.barra-cerca:focus-within .lente{color:var(--accento-testo)}
/* la ricerca dell'elenco aziende dal 03/10/2026 sta nella fascia grande come "Nuova opportunita'" (.sa-fascia con
   .ea-fascia, in fondo al file): .barra-cerca resta per le altre pagine */
.cerca-attesa{
  position:absolute;right:11px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  border:2px solid var(--bordo);border-top-color:var(--accento);opacity:0;transition:opacity .15s;
}
.in-ricerca .cerca-attesa{opacity:1;animation:gira .7s linear infinite}
/* la tabella non allarga mai la pagina: sotto i 900px diventa a schede.
   Nazione prende lo spazio che resta; le azioni sono tre icone di riga (38px l'una su touch) */

/* tabella stretta, sotto i 900px (smartphone, tablet): ogni azienda diventa una scheda, niente scorrimento orizzontale.
   In cima le icone (a sinistra) e lo stato; sotto ragione sociale, luogo, nazione e partita IVA. */
/* variante B: fascia del colore dello stato (cliente verde, prospect ambra: le variabili --fascia stanno in cima al
   foglio), la stessa della testata della scheda azienda. Su PC sta sulla prima cella, come nell'elenco delle
   opportunita' (la <tr> non tiene il fondo), e i 10px di rientro li paga la ragione sociale, la colonna piu' larga;
   la sua intestazione rientra con lei e resta allineata al nome. Nella scheda del telefono la fascia passa alla
   scheda intera, con il bordo appena tinto; l'etichetta dello stato resta dov'e', in alto a destra. */

.anteprima{max-height:96px;max-width:160px;border-radius:4px;border:1px solid var(--bordo);object-fit:cover;display:block}

/* ---------- Clienti: nuova azienda, blocco contatto (nato per Anagrafica.aspx; la nuova azienda oggi sta in Clienti/Modifica.aspx) ---------- */

.scorciatoie{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.scorciatoie button{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bordo-forte);background:var(--pannello);color:var(--tenue);
  font:inherit;font-size:12px;font-weight:500;line-height:1.2;
  transition:border-color .15s,color .15s,transform .15s;
}
.scorciatoie button svg{flex:none}
.scorciatoie button:hover{border-color:var(--accento);color:var(--accento-testo);transform:translateY(-1px)}
.scorciatoie button:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
.scorciatoie button.compilato{border-color:var(--successo-bordo);color:var(--testo)}
.scorciatoie button.compilato::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--successo)}


/* campo con icona a sinistra */
.campo-errore{font-size:11.5px;color:var(--pericolo)}
@keyframes campo-lampo{0%,100%{box-shadow:0 0 0 3px var(--campo-alone)}45%{box-shadow:0 0 0 8px var(--campo-alone)}}

/* ---------- Clienti: globo "Presenza nel mondo" (Anagrafica.aspx, js/mappa-aziende.js) ----------
   Dal 03/10/2026 il riquadro segue il tema (prima restava "spaziale", scuro e blu, in tutti e due): e' un riquadro come
   gli altri, con i colori del tema. Scuro "nero e rosso": grafite con la luce rossa dal basso e le stelle appena
   accennate; chiaro: avorio, senza stelle. I colori del globo li sceglie js/mappa-*.js leggendo data-tema. */
.mappa-spazio{
  --spazio-testo:var(--testo);
  --spazio-tenue:var(--tenue);
  --spazio-bordo:var(--bordo-forte);
  --spazio-carta:color-mix(in srgb,var(--pannello) 90%,transparent);
  position:relative;overflow:hidden;margin-bottom:20px;min-width:0;
  border:1px solid var(--bordo);border-radius:var(--raggio);box-shadow:var(--rilievo,none);
  background:radial-gradient(110% 90% at 50% 125%,rgba(218,2,25,.08) 0%,transparent 60%),var(--pannello);
  color:var(--spazio-testo);
}
html[data-tema="scuro"] .mappa-spazio{
  background:
    radial-gradient(110% 90% at 50% 125%,rgba(218,2,25,.30) 0%,transparent 60%),
    radial-gradient(90% 70% at 50% -35%,rgba(218,2,25,.14) 0%,transparent 62%),
    var(--pannello-vetro);
}
.mappa-testa{
  position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--bordo);
}
.mappa-spazio.chiusa .mappa-testa{border-bottom:none}
.mappa-titolo{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;min-width:0}
.mappa-titolo b{font-size:14px;font-weight:600;letter-spacing:.02em}
.mappa-titolo b::before{
  content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;vertical-align:1px;
  background:var(--accento);box-shadow:0 0 0 0 rgba(218,2,25,.7);animation:mappa-pulsa 2.2s ease-out infinite;
}
.mappa-titolo small{font-size:12px;color:var(--spazio-tenue)}
.mappa-comandi{display:flex;gap:8px}
.mappa-spazio .bottone.vuoto{border-color:var(--spazio-bordo);color:var(--spazio-testo)}
.mappa-spazio .bottone.vuoto:hover{border-color:var(--accento);color:var(--accento-testo)}
/* "Mostra la mappa" / "Nascondi la mappa": pulsante blu (consultare) con il globo, ben visibile nella fascia chiusa */
.mappa-apri{display:inline-flex;align-items:center;gap:7px}
.mappa-apri svg{flex:none}

.mappa-corpo{position:relative;height:clamp(360px,54vh,580px)}
.mappa-globo{position:absolute;inset:0;z-index:1;cursor:grab}
.mappa-globo:active{cursor:grabbing}

/* campo di stelle a tre strati, con scintillio lento: solo nel tema scuro, e appena accennato */
html[data-tema="chiaro"] .mappa-stelle{display:none}
html[data-tema="scuro"] .mappa-stelle{opacity:.5}
.mappa-stelle,.mappa-stelle::before,.mappa-stelle::after{position:absolute;inset:0;pointer-events:none}
.mappa-stelle{
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 72%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 41% 33%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 86%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 83% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 58%, rgba(255,255,255,.8) 50%, transparent 51%);
  opacity:.85;
}
.mappa-stelle::before{
  content:"";
  background-image:
    radial-gradient(1px 1px at 18% 42%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 8%, rgba(190,210,255,.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 52% 58%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 66%, rgba(255,200,205,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 97% 94%, rgba(255,255,255,.7) 50%, transparent 51%);
  background-size:340px 260px;
  animation:mappa-scintilla 5.5s ease-in-out infinite alternate;
}
.mappa-stelle::after{
  content:"";
  background-image:
    radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 24%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 69% 49%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 7%, rgba(255,255,255,.5) 50%, transparent 51%);
  background-size:180px 150px;
  animation:mappa-deriva 90s linear infinite;
}

.mappa-stato{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:24px;text-align:center;font-size:13px;color:var(--spazio-tenue);
}
.mappa-stato .spin{width:16px;height:16px;border:2px solid var(--spazio-bordo);border-top-color:var(--accento);border-radius:50%;animation:gira .8s linear infinite}
.mappa-stato.errore .spin{display:none}

.mappa-suggerimento{
  position:absolute;left:16px;bottom:12px;z-index:2;margin:0;max-width:calc(100% - 32px);
  font-size:11.5px;color:var(--spazio-tenue);pointer-events:none;
}
.mappa-legenda{
  position:absolute;right:16px;bottom:12px;z-index:2;max-width:min(320px,55%);
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:11px;color:var(--spazio-tenue);pointer-events:none;
}
.mappa-legenda p{margin:0;text-align:right}
.mappa-scala{display:flex;align-items:center;gap:8px}
.mappa-scala i{display:block;width:110px;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(150,10,30,.6),#ff4b5c)}

/* scheda della nazione o regione selezionata */
.mappa-scheda{
  position:absolute;top:14px;right:14px;z-index:4;width:min(300px,calc(100% - 28px));max-height:calc(100% - 28px);overflow:auto;
  padding:16px 16px 14px;border-radius:var(--raggio);
  background:var(--spazio-carta);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid var(--spazio-bordo);box-shadow:var(--ombra);
  animation:mappa-entra .35s cubic-bezier(.2,.7,.3,1);
}
.mappa-chiudi{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--spazio-tenue);font-size:20px;line-height:1;
}
.mappa-chiudi:hover{color:var(--spazio-testo);background:color-mix(in srgb,var(--testo) 9%,transparent)}
.mappa-scheda-tipo{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accento-testo);margin-bottom:4px}
.mappa-scheda h3{margin:0 30px 2px 0;font-size:17px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.mappa-scheda p{margin:0 0 10px;font-size:12.5px;color:var(--spazio-tenue)}
.mappa-scheda ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;font-size:13px}
.mappa-scheda li{min-width:0;padding-left:12px;position:relative}
.mappa-scheda li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accento)}
.mappa-scheda li a{color:var(--spazio-testo);overflow-wrap:anywhere}
.mappa-scheda li a:hover{color:var(--accento-testo)}
.mappa-scheda li small{display:block;font-size:11px;color:var(--spazio-tenue)}
.mappa-scheda li.altre{color:var(--spazio-tenue);font-size:12px}
.mappa-scheda li.altre::before{background:var(--spazio-bordo)}
.mappa-scheda-azioni{display:flex;gap:8px;flex-wrap:wrap}

/* etichetta al passaggio del mouse (generata da globe.gl) */
.mappa-etichetta{
  padding:7px 10px;border-radius:3px;background:var(--pannello);border:1px solid rgba(255,75,92,.55);
  color:var(--testo);font-family:var(--carattere);font-size:12px;line-height:1.35;box-shadow:var(--ombra);
}
.mappa-etichetta b{display:block;font-size:13px;font-weight:600}
.mappa-etichetta small{display:block;color:var(--accento-testo);font-size:11.5px}

@keyframes mappa-pulsa{0%{box-shadow:0 0 0 0 rgba(218,2,25,.7)}70%{box-shadow:0 0 0 9px rgba(218,2,25,0)}100%{box-shadow:0 0 0 0 rgba(218,2,25,0)}}
@keyframes mappa-scintilla{from{opacity:.25}to{opacity:.95}}
@keyframes mappa-deriva{from{background-position:0 0}to{background-position:-360px 150px}}
@keyframes mappa-entra{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .mappa-corpo{height:420px}
  .mappa-scheda{top:auto;bottom:10px;right:10px;left:10px;width:auto;max-height:60%}
  .mappa-legenda{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mappa-titolo b::before,.mappa-stelle::before,.mappa-stelle::after,.mappa-scheda{animation:none}
}

/* ---------- Impostazioni > Registro attivita': globo "Da dove si accede" (LogAttivita.aspx, js/mappa-accessi.js) ----------
   Stesso spazio del globo dei clienti; verde gli accessi autorizzati degli agenti, rosso i tentativi respinti. */
.mappa-accessi .mappa-titolo b::before{background:#2ec46e;animation-name:mappa-pulsa-verde}
.mappa-voci{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.mappa-voci span{display:inline-flex;align-items:center;gap:7px;color:var(--spazio-testo)}
.mappa-voci i{display:block;flex:none;width:10px;height:10px;border-radius:50%}
.mappa-voci .verde i{background:#2ec46e;box-shadow:0 0 8px rgba(46,196,110,.8)}
.mappa-voci .rosso i{background:#ff4b5c;box-shadow:0 0 8px rgba(255,75,92,.8)}
.mappa-etichetta small.verde{color:var(--successo)}
.mappa-accessi .mappa-scheda-tipo{color:var(--spazio-tenue)}
.mappa-sezione{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--spazio-bordo)}
.mappa-sezione h4{margin:0 0 2px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mappa-sezione.verde h4{color:var(--successo)}
.mappa-sezione.rosso h4{color:var(--accento-testo)}
.mappa-sezione.verde li::before{background:#2ec46e}
.mappa-sezione code{font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:12.5px;color:var(--spazio-testo);overflow-wrap:anywhere}
.mappa-pillola{
  display:inline-block;margin-left:7px;padding:0 6px;border-radius:999px;vertical-align:1px;
  border:1px solid rgba(255,75,92,.6);background:var(--accento-velo);color:var(--accento-testo);
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.mappa-accessi .mappa-scheda-azioni{margin-top:12px}
@keyframes mappa-pulsa-verde{0%{box-shadow:0 0 0 0 rgba(46,196,110,.7)}70%{box-shadow:0 0 0 9px rgba(46,196,110,0)}100%{box-shadow:0 0 0 0 rgba(46,196,110,0)}}

/* ---------- Clienti: scheda azienda (Azienda.aspx, js/azienda.js) ---------- */
/* titolo di sezione con pulsante a destra e corpo dei moduli: servono anche a Campionature e Info agenti */
.testata-sezione{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-right:16px;border-bottom:1px solid var(--bordo)}
.testata-sezione h2{border-bottom:none}
.corpo-form{padding:18px 20px}
.corpo-form h3{margin:0 0 12px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.corpo-form h3.dopo{margin-top:20px}
.corpo-form .azioni-form{margin-top:20px}

/* Intestazione con biglietto da visita (o iniziali), stato, ragione sociale, indirizzo con il link alla mappa, fatti chiave e
   caratteristiche; sotto i riquadri Anagrafica, Sede e Dati fiscali, i contatti a schede con avatar e recapiti cliccabili,
   gli altri dati (solo interni) in un riquadro richiudibile. In modifica gli stessi riquadri diventano gruppi di campi.
   Le colonne le decide lo spazio vero (container query "az"): 3 su schermo largo, 2 su iPad, 1 su telefono.
   Tutte le regole hanno il prefisso az-. I pulsanti Copia (js/azienda.js) sono <button type="button">. */
.az-azioni{flex-wrap:wrap}
.az-scheda{container:az / inline-size}

/* intestazione */
.az-testa{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"visivo testo" "visivo piede";
  align-items:center;column-gap:24px;padding:22px 26px 22px 28px;margin-bottom:18px;
}
/* filetto rosso a sinistra e trama della maglia che sfuma verso destra */
.az-testa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accento)}
.az-testa::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:min(460px,55%);pointer-events:none;background-image:var(--trama);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--testo));mask-image:linear-gradient(90deg,transparent,var(--testo));
}
.az-testa > *{position:relative;z-index:1;min-width:0}
/* il filetto rosso fisso diventa la fascia del colore dello stato del cliente (cliente verde, prospect ambra: le
   variabili --fascia stanno in cima al foglio) e l'etichetta le si appoggia in alto nell'angolo, come una linguetta,
   invece di stare in mezzo alle informazioni. Nel markup lo stato passa da .az-sopra a figlio di .az-testa */
.az-testa.az-fascia{padding-top:32px}
.az-testa.az-fascia::before{width:12px;background:var(--fascia-sfumata)}
/* Qui il tag e la fascia si toccano, quindi il tag prende la tinta della fascia invece della sua: per CLIENTE erano
   gia' lo stesso verde, per PROSPECT no (#f5c518 il tag, l'ambra calmata la fascia) e restava uno scalino di colore.
   Il colore del testo resta quello di .stato-cliente: #2b2200 sta a 7,9:1 sull'ambra chiara e a 9,2:1 su quella
   schiarita del tema scuro, #fff a 3,5:1 sul verde come in tutto il sito. */
.az-testa.az-fascia > .stato-cliente{
  position:absolute;left:0;top:0;z-index:2;margin:0;
  padding:4px 12px 4px 20px;border-radius:0 0 var(--raggio) 0;
  background:var(--fascia);
}
/* se nella riga sopra il nome resta solo il nome breve e quello manca, niente spazio sprecato */
.az-testa.az-fascia .az-sopra:empty{display:none}
.az-visivo{grid-area:visivo;align-self:start}
.az-testa-testo{grid-area:testo;align-self:end}
.az-testa-piede{grid-area:piede;align-self:start;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}

/* biglietto da visita: quadrato con la foto, lente per ingrandire (finestra della master, data-foto-grande) */
/* senza biglietto: iniziali della ragione sociale */
.az-monogramma{
  display:grid;place-items:center;width:108px;height:108px;border-radius:12px;
  background:var(--accento);background-image:var(--trama);
  color:#fff;font-size:36px;font-weight:700;letter-spacing:-.02em;box-shadow:var(--ombra);
}

.az-sopra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.az-sopra .stato-cliente{margin-left:0}
.az-nomebreve{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);overflow-wrap:anywhere}
/* batte .riquadro h2 (14px con il filetto sotto) */
.az-testa h2.az-ragsoc{
  margin:0;padding:0;border:0;font-size:clamp(22px,2.9cqi,32px);font-weight:600;letter-spacing:-.025em;line-height:1.12;
  overflow-wrap:anywhere;
}
.az-luogo{display:flex;align-items:flex-start;gap:7px;margin:9px 0 0;font-size:13.5px;line-height:1.4;color:var(--tenue)}
.az-luogo > svg{flex:none;margin-top:1px;color:var(--accento-testo)}
.az-luogo a{color:var(--testo);text-decoration:underline;text-decoration-color:var(--bordo-forte);text-underline-offset:3px;overflow-wrap:anywhere}
.az-luogo a svg{display:inline-block;margin-left:5px;vertical-align:-1px;color:var(--tenue)}
.az-luogo a:hover{color:var(--accento-testo);text-decoration-color:currentColor}
.az-luogo a:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:2px}

/* fatti chiave (codice, partita IVA, area, ID) e caratteristiche: pillole */
.az-fatti,.az-caratteristiche{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.az-fatti li{
  display:inline-flex;align-items:baseline;gap:7px;max-width:100%;padding:4px 11px;border-radius:999px;
  border:1px solid var(--bordo);background:var(--pannello2);font-size:12.5px;line-height:1.35;
}
.az-fatti li span{flex:none;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.az-fatti li b{min-width:0;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.az-tag{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ic-verde) 38%,transparent);background:color-mix(in srgb,var(--ic-verde) 10%,transparent);
  color:var(--testo);font-size:12px;font-weight:500;line-height:1.35;
}
.az-tag svg{flex:none;color:var(--ic-verde)}

/* riquadri tematici */
.az-griglia{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}
.az-griglia > .riquadro{display:flex;flex-direction:column;margin-bottom:0}
.az-sezione > h2{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px 10px 20px}
.az-sezione-icona{
  flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:var(--accento-velo);color:var(--accento-testo);
}
/* l'icona della mappa (38px su touch) non allunga il titolo: resta alto come gli altri */
.az-sezione > h2 .icona-riga{margin:-6px 0 -6px auto}
.az-campi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin:0;padding:18px 20px 22px}
.az-campo{min-width:0}
.az-campo.largo{grid-column:1/-1}
.az-campo dt{margin:0 0 5px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.az-campo dd{display:flex;align-items:flex-start;gap:8px;min-width:0;margin:0;font-size:14.5px;font-weight:500;line-height:1.45}
.az-valore{min-width:0;overflow-wrap:anywhere}
.az-valore.numero{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.az-valore address{font-style:normal}
.az-nd{color:var(--debole);font-weight:400}
.az-sigla{
  display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;border:1px solid var(--bordo-forte);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;line-height:1.6;vertical-align:1px;color:var(--tenue);
}

/* copia negli appunti: grigio, blu al passaggio, verde con la spunta appena copiato; su schermi touch sempre visibile */
.az-copia{
  flex:none;position:relative;z-index:2;display:inline-grid;place-items:center;width:28px;height:28px;margin:-3px -4px -3px auto;padding:0;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--debole);font:inherit;cursor:pointer;
  opacity:0;transition:opacity .15s,color .15s,background-color .15s,border-color .15s;
}
.az-copia .i-fatto{display:none}
.az-campo:hover .az-copia,.az-rec:hover .az-copia,.az-copia:focus-visible,.az-copia.copiato{opacity:1}
.az-copia:hover{color:var(--ic-blu);border-color:color-mix(in srgb,var(--ic-blu) 34%,transparent);background:color-mix(in srgb,var(--ic-blu) 11%,transparent)}
.az-copia:focus-visible{outline:2px solid var(--accento2);outline-offset:1px}
.az-copia.copiato,.az-copia.copiato:hover{color:var(--ic-verde);border-color:color-mix(in srgb,var(--ic-verde) 40%,transparent);background:color-mix(in srgb,var(--ic-verde) 12%,transparent)}
.az-copia.copiato .i-copia{display:none}
.az-copia.copiato .i-fatto{display:block}
@media (pointer:coarse){.az-copia{opacity:1;width:38px;height:38px;margin:-9px -8px -9px auto;color:var(--tenue)}}

/* contatti */
.az-conta{
  display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 7px;border-radius:999px;
  border:1px solid var(--bordo);background:var(--pannello2);font-size:11px;font-weight:600;color:var(--tenue);
}
.az-contatti .testata-sezione h2{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px 10px 20px}
.az-persone{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));padding:18px 20px 20px}
.az-persona{
  display:flex;flex-direction:column;min-width:0;border:1px solid var(--bordo);border-radius:10px;background:var(--sfondo);
  transition:border-color .2s;
}
.az-persona:hover{border-color:var(--bordo-forte)}
.az-persona-testa{display:flex;align-items:center;gap:12px;padding:14px 12px 12px 14px}
.az-avatar{
  --av:var(--ic-blu);flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--av) 50%,transparent);background:color-mix(in srgb,var(--av) 14%,transparent);
  color:var(--av);font-size:15px;font-weight:700;letter-spacing:.03em;
}
.az-avatar.av-1{--av:var(--ic-blu)}
.az-avatar.av-2{--av:var(--ic-verde)}
.az-avatar.av-3{--av:var(--ic-teal)}
.az-avatar.av-4{--av:var(--ic-viola)}
.az-avatar.av-5{--av:var(--ic-rosso)}
.az-avatar.azienda{--av:var(--ic-grigio)}
.az-persona-nome{flex:1;min-width:0}
.az-persona-nome b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.az-persona-ruolo{display:block;margin-top:3px;font-size:12px;font-weight:600;color:var(--accento-testo);overflow-wrap:anywhere}
.az-persona-azioni{display:flex;gap:6px;align-self:flex-start}
.az-recapiti{display:grid;gap:2px;margin:0;padding:6px;list-style:none;border-top:1px solid var(--bordo)}
.az-rec{
  position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;
  min-height:48px;padding:6px 10px 6px 8px;border-radius:8px;transition:background-color .15s;
}
.az-rec:hover{background:var(--pannello)}
.az-rec-icona{
  --ic:var(--ic-grigio);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--ic) 13%,transparent);color:var(--ic);
}
.az-rec.r-email .az-rec-icona{--ic:var(--ic-blu)}
.az-rec.r-cell .az-rec-icona,.az-rec.r-tel .az-rec-icona{--ic:var(--ic-verde)}
.az-rec.r-sito .az-rec-icona{--ic:var(--ic-teal)}
/* 25/09/2026: Skype (solo dal gestionale) viola; il fax grigio come prima */
.az-rec.r-skype .az-rec-icona{--ic:var(--ic-viola)}
/* telefoni chiamabili: cornetta piena verde */
.az-rec-icona.chiama{background:var(--verde);color:#fff}
.az-rec-testo{min-width:0}
.az-rec-valore{display:block;font-size:13.5px;font-weight:500;line-height:1.3;color:var(--testo);overflow-wrap:anywhere}
.az-rec-valore.numero{font-size:14.5px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.az-rec-tipo{display:block;margin-top:1px;font-size:11px;color:var(--tenue)}
/* tutta la riga apre il recapito (mailto:, tel:, sito); il pulsante Copia resta sopra */
a.az-rec-valore::after{content:"";position:absolute;inset:0;border-radius:8px}
a.az-rec-valore:hover{color:var(--accento-testo)}
a.az-rec-valore:focus-visible{outline:none}
.az-rec:has(a.az-rec-valore:focus-visible){outline:2px solid var(--accento2);outline-offset:-2px}
.az-persona-vuota{margin:0;padding:12px 14px 14px;border-top:1px solid var(--bordo);font-size:12.5px;color:var(--debole)}

/* modulo di un contatto (nuovo o modifica) */

/* altri dati (solo interni): riquadro richiudibile */
/* allegati dell'azienda in sola lettura (si cambiano in Clienti/Modifica.aspx) */
.az-altri{margin-bottom:18px}
.az-altri > summary{
  display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px 10px 20px;
  font-size:14px;font-weight:600;cursor:pointer;list-style:none;user-select:none;
}
.az-altri > summary::-webkit-details-marker{display:none}
.az-altri > summary small{font-size:12px;font-weight:400;color:var(--tenue)}
.az-altri > summary .frec{flex:none;margin-left:auto;color:var(--tenue);transition:transform .2s}
.az-altri > summary:hover .frec{color:var(--accento-testo)}
.az-altri > summary:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.az-altri[open] > summary{border-bottom:1px solid var(--bordo)}
.az-altri[open] > summary .frec{transform:rotate(90deg)}
.az-altri .az-campi{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

/* modifica: gli stessi riquadri con i campi; Sede alta quanto Anagrafica e Dati fiscali insieme */

/* iPad e schermi medi: due colonne, Dati fiscali a tutta larghezza */
@container az (max-width:940px){
  .az-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .az-vista > .az-fiscale{grid-column:1 / -1}
  .az-vista > .az-fiscale .az-campi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .az-vista > .az-fiscale .az-campo.largo{grid-column:auto}
}
/* telefono: una colonna, intestazione compatta con fatti e caratteristiche a tutta larghezza.
   Salva / Annulla non restano attaccati in basso: con la tastiera aperta coprirebbero il campo */
@container az (max-width:620px){
  .az-testa{grid-template-areas:"visivo testo" "piede piede";column-gap:14px;padding:16px 16px 16px 18px}
  .az-testa-testo{align-self:center}
  .az-monogramma{width:68px;height:68px;border-radius:10px}
  .az-monogramma{font-size:24px}
  .az-testa h2.az-ragsoc{font-size:20px;letter-spacing:-.015em}
  .az-luogo{font-size:13px}
  .az-griglia{grid-template-columns:minmax(0,1fr)}
  .az-vista > .az-fiscale{grid-column:auto}
  .az-vista > .az-fiscale .az-campi{grid-template-columns:minmax(0,1fr)}
  .az-campi{padding:16px}
  .az-persone{padding:12px}
  .az-persona-testa{padding:12px 10px 10px 12px}
  .az-recapiti{padding:4px}
  .az-rec{grid-template-columns:32px minmax(0,1fr) auto;gap:10px;padding:6px 8px 6px 6px}
  .az-rec-icona{width:32px;height:32px}
}
@container az (max-width:380px){
  .az-campi{grid-template-columns:minmax(0,1fr)}
  .az-campo.largo{grid-column:auto}
}

/* tipo, recapito e X rossa per togliere la riga (l'interno non si chiede piu') */
/* smartphone: tipo e X sulla prima riga, recapito a tutta larghezza sotto (email e numeri esteri ci stanno interi);
   una linea separa un recapito dall'altro */

/* ---------- Campionature: nuova campionatura (Campionature/Nuovo.aspx, js/campionatura.js) ---------- */
.camp-testata{margin:0 0 20px}
.camp-testata h2{margin:0;font-size:clamp(24px,3.2vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1.1;overflow-wrap:anywhere}
.camp-luogo{margin:6px 0 0;font-size:13px;color:var(--tenue);overflow-wrap:anywhere}
.camp-chat{margin:12px 12px 0 0}
/* scheda in lettura: categoria sopra il titolo, cliente sotto */
.camp-categoria{margin:0 0 8px}
.camp-cliente{margin:8px 0 0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
/* variante B: l'intestazione prende il colore della categoria e la categoria le si appoggia in alto */
.camp-testata.camp-fascia{
  position:relative;padding:14px 0 16px 24px;
  background-image:var(--fascia-sfumata);
  background-repeat:no-repeat;background-size:12px 100%;
}
.camp-testata.camp-fascia .camp-categoria{margin-bottom:10px}
/* il tag esce dalla fascia: lato sinistro dritto, lato destro tondo com'e' ora */
.camp-testata.camp-fascia .camp-categoria .tag-categoria{
  margin-left:-24px;padding:3px 13px 3px 31px;
  border-radius:0 999px 999px 0;border-left-color:transparent;
}

/* titolo e categoria o evento dell'opportunita' (Nuovo.aspx), sopra le schede Appunti / Articoli */
.camp-identita{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px 18px;padding:16px 18px;overflow:visible}
.camp-identita .campo input[type=text]{font-size:15px;font-weight:600}
.camp-identita .campo input[type=text]::placeholder{font-weight:400;color:var(--debole)}
.camp-identita-aiuto{font-size:11.5px;color:var(--debole);line-height:1.45}
.camp-identita-aiuto a{color:var(--accento-testo);font-weight:500;white-space:nowrap}
.camp-identita-aiuto a:hover{text-decoration:underline}
/* tendina con il pallino del colore della categoria a sinistra */
.camp-categoria-scelta{position:relative;display:block}
.camp-categoria-scelta .camp-categoria-pallino{position:absolute;left:13px;top:50%;margin-top:-5px;pointer-events:none}
.campo .camp-categoria-scelta select{width:100%;padding-left:34px}
@media (max-width:720px){.camp-identita{grid-template-columns:minmax(0,1fr);padding:14px}}
/* pulsante Chat delle campionature: verde se la chat esiste gia' */
.bottone.deal-chat.attiva{border-color:var(--verde);color:var(--verde)}
.bottone.deal-chat.attiva:hover{background:color-mix(in srgb,var(--verde) 10%,transparent)}

.camp-sezione .camp-corpo{padding:18px 20px 20px}
.camp-sezione textarea{min-height:160px;resize:vertical;line-height:1.55}
.camp-sezione textarea.in-attesa{opacity:.6}

/* pulsante dettatura */
.camp-mic{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bordo-forte);background:var(--pannello);color:var(--testo);
  font:inherit;font-size:12.5px;font-weight:500;transition:border-color .15s,color .15s,background-color .15s;
}
.camp-mic:hover{border-color:var(--accento);color:var(--accento-testo)}
.camp-mic.attivo{background:var(--accento);border-color:var(--accento);color:#fff;animation:camp-pulsa 1.6s ease-out infinite}
.camp-mic:focus-visible,.camp-rec:focus-visible{outline:2px solid var(--accento2);outline-offset:3px}
.camp-provvisorio{min-height:1.3em;margin:8px 0 0;font-size:12.5px;font-style:italic;color:var(--tenue)}
@keyframes camp-pulsa{0%{box-shadow:0 0 0 0 rgba(218,2,25,.55)}70%{box-shadow:0 0 0 12px rgba(218,2,25,0)}100%{box-shadow:0 0 0 0 rgba(218,2,25,0)}}

/* allegati */
.camp-trascina{font-size:12.5px;color:var(--debole)}

.camp-galleria{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.camp-galleria:empty{margin:0}
.camp-galleria + .stato-vuoto{padding:18px 10px 4px}
.camp-allegato{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2)}
.camp-anteprima{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:#02080e;color:rgba(239,232,217,.6)}
.camp-anteprima a{display:grid;place-items:center;width:100%;height:100%}
.camp-anteprima img,.camp-anteprima video{display:block;width:100%;height:100%;object-fit:cover}
.tipo-audio .camp-anteprima{
  aspect-ratio:auto;gap:12px;padding:20px 12px;
  background:linear-gradient(135deg,rgba(218,2,25,.28),rgba(59,123,255,.2)),#06131b;
}
.camp-anteprima audio{width:100%}
.camp-info{min-width:0;padding:9px 12px 10px}
.camp-info .camp-tipo{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accento-testo)}
.camp-info b{display:block;overflow:hidden;font-size:12.5px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.camp-info small{display:block;font-size:11px;color:var(--tenue)}
.camp-elimina{
  position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;
  border:none;border-radius:50%;cursor:pointer;background:rgba(2,8,14,.72);color:#fff;opacity:0;transition:opacity .15s,background-color .15s;
}
.camp-elimina svg{width:17px;height:17px}
.camp-elimina:hover{background:var(--accento)}
.camp-allegato:hover .camp-elimina,.camp-elimina:focus-visible{opacity:1}
@media (hover:none){ .camp-elimina{opacity:1} }
.camp-avanzamento{height:4px;margin:0 12px 12px;overflow:hidden;border-radius:999px;background:var(--bordo)}
.camp-avanzamento span{display:block;width:0;height:100%;background:var(--accento);transition:width .15s}
.in-caricamento .camp-anteprima{animation:camp-attesa 1.1s ease-in-out infinite alternate}
@keyframes camp-attesa{from{opacity:.45}to{opacity:1}}

/* Documenti allegati (FPC.TipiFile, js/tipi-file.js): un foglio con l'angolo piegato, il segno della famiglia e la
   sigla dell'estensione su una fascia del suo colore; lo sfondo del riquadro prende una velatura dello stesso colore.
   Il colore (--fc) lo danno le classi fam-* sul contenitore (sulla voce della galleria: camp-allegato fam-foglio). */
.fam-pdf{--fc:#d93025}.fam-testo{--fc:#2b579a}.fam-foglio{--fc:#1d7a45}.fam-presentazione{--fc:#d24726}.fam-semplice{--fc:#5c6b74}
.fam-archivio{--fc:#8a6d1f}.fam-grafica{--fc:#b0317f}.fam-cad{--fc:#0f8f8a}.fam-email{--fc:#6b4fbb}
.tipo-documento .camp-anteprima{background:color-mix(in srgb,var(--fc,#5c6b74) 10%,var(--pannello));color:var(--fc,#5c6b74)}
.tipo-documento .camp-info .camp-tipo{color:var(--fc,#5c6b74)}
html[data-tema="scuro"] .tipo-documento .camp-info .camp-tipo{color:color-mix(in srgb,var(--fc,#5c6b74) 55%,#fff)}
a.doc-apri{display:grid;place-items:center;width:100%;height:100%;text-decoration:none}
a.doc-apri:focus-visible{outline:2px solid var(--accento2);outline-offset:-3px}
.doc-foglio{position:relative;display:block;flex:none;width:74px;height:94px;color:var(--fc,#5c6b74);transition:transform .2s ease}
a.doc-apri:hover .doc-foglio{transform:translateY(-3px) rotate(-1.5deg)}
.doc-foglio .doc-carta{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(16,34,43,.18))}
.doc-foglio .doc-carta path{fill:#fff;stroke:rgba(16,34,43,.25);stroke-width:2}
.doc-foglio .doc-carta path.doc-piega{fill:none}
.doc-foglio .doc-segno{position:absolute;right:12px;top:30px;width:26px;height:26px}
.doc-foglio .doc-sigla{
  position:absolute;left:-10px;bottom:16px;max-width:84px;padding:3px 8px;border-radius:5px;overflow:hidden;
  background:var(--fc,#5c6b74);color:#fff;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.04em;white-space:nowrap;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.4);
}
/* galleria dell'articolo, piu' fitta: foglio un po' piu' piccolo */
@media (prefers-reduced-motion:reduce){ .doc-foglio,a.doc-apri:hover .doc-foglio{transition:none;transform:none}  }

/* registratore */
.camp-registratore{
  display:flex;align-items:center;gap:16px 26px;flex-wrap:wrap;margin:0 0 18px;padding:16px 20px;
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--blocco-chiaro);
}
.camp-rec{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;color:var(--testo);font:inherit;cursor:pointer}
.camp-rec-cerchio{width:60px;height:60px;display:grid;place-items:center;border:2px solid var(--accento);border-radius:50%;transition:transform .2s}
.camp-rec-punto{width:26px;height:26px;border-radius:50%;background:var(--accento);transition:border-radius .2s,width .2s,height .2s}
.camp-rec:hover .camp-rec-cerchio{transform:scale(1.06)}
.camp-rec.attivo .camp-rec-cerchio{animation:camp-pulsa 1.6s ease-out infinite}
.camp-rec.attivo .camp-rec-punto{width:20px;height:20px;border-radius:4px}
.camp-rec-testo{font-size:15px;font-weight:600}
.camp-rec:disabled{opacity:.5;cursor:not-allowed}

.camp-rec-info{display:flex;align-items:center;gap:8px 16px;flex:1;flex-wrap:wrap;min-width:200px}
.camp-tempo{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.camp-onde{display:flex;align-items:center;gap:3px;height:36px}
.camp-onde i{display:block;width:4px;height:100%;border-radius:2px;background:linear-gradient(180deg,#ff4b5c,var(--accento));transform:scaleY(.12);transform-origin:center;transition:transform .08s linear}
.camp-rec-info small{flex-basis:100%;font-size:12px;color:var(--tenue);overflow-wrap:anywhere}

.camp-azioni-riga{display:flex;flex-wrap:wrap;gap:8px}

/* pulsanti in attesa: si vede che non rispondono (i riassunti della vecchia conversazione e il riquadro del
   riassunto della scheda non ci sono piu', 21/09/2026: qui resta solo quello che la riga dei pulsanti usa ancora) */
.camp-azioni-riga .bottone:disabled{opacity:.45;cursor:default}
.camp-azioni-riga .bottone.vuoto:disabled:hover{border-color:var(--bordo);color:var(--testo)}
/* schermi che si toccano: i pulsanti piccoli della riga diventano bersagli da 38px */
@media (pointer:coarse){
  .camp-azioni-riga .bottone.piccolo{min-height:38px;padding:8px 14px}
}
/* barra in cima alla scheda e alla pagina di modifica: accanto a Chat e Modifica (alti 38) c'e' il cestino, che e'
   un'icona di riga alta 32. Senza align-items l'icona si stira in alto e le basi dei tre pulsanti non coincidono
   (misurato a 1440: Chat e Modifica 194..232, cestino 194..226). Sui touch l'icona e' gia' 38 e non cambia nulla.
   La classe sta solo su Campionature/Scheda.aspx e Nuovo.aspx: .azioni-riga degli elenchi resta com'e'. */
.camp-azioni-testa{align-items:center}

/* stato del salvataggio automatico, sotto il nome dell'azienda */
.camp-autosalva{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;color:var(--tenue)}
.camp-autosalva::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bordo-forte)}
.camp-autosalva.attesa::before{background:none;width:10px;height:10px;border:2px solid var(--bordo);border-top-color:var(--accento);animation:gira .7s linear infinite}
.camp-autosalva.fatto{color:var(--successo)}
.camp-autosalva.fatto::before{background:var(--successo)}
.camp-autosalva.errore{color:var(--pericolo)}
.camp-autosalva.errore::before{background:var(--pericolo)}

/* ---------- Opportunita': schede Appunti / Articoli (Campionature/Nuovo.aspx, js/opportunita-articoli.js) ---------- */
.schede-pagina{display:flex;gap:10px;margin:0 0 18px;flex-wrap:wrap}
.scheda-pagina{position:relative;display:flex;flex:1 1 240px;max-width:340px;align-items:center;gap:12px;min-width:0;padding:10px 14px 10px 10px;border:2px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);color:var(--tenue);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s}
.scheda-pagina:hover{border-color:var(--accento);transform:translateY(-1px)}
.scheda-pagina:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.scheda-pagina-icona{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pannello2);color:var(--tenue);transition:background-color .15s,color .15s}
.scheda-pagina-testo{min-width:0}
.scheda-pagina-testo b{display:block;font-size:13.5px;color:var(--testo)}
.scheda-pagina-testo small{display:block;font-size:11.5px;color:var(--tenue)}
.scheda-pagina-conta{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello2);color:var(--tenue);font-size:12px;font-weight:700;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
.scheda-pagina.attiva{border-color:var(--accento);background:var(--accento-velo)}
.scheda-pagina.attiva .scheda-pagina-icona{background:var(--accento);color:#fff}
.scheda-pagina.attiva .scheda-pagina-conta{background:var(--accento);border-color:var(--accento);color:#fff}
@media (max-width:560px){
  .schede-pagina{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .scheda-pagina{max-width:none;padding:9px 8px}
  .scheda-pagina-testo small{display:none}
  .scheda-pagina-icona{width:32px;height:32px}
}

/* ricerca degli articoli: tendina dei risultati (combobox). Dal 05/10/2026 la casella e' quella grande del catalogo
   (.sa-cerca, blocco "Articoli dell'opportunita': la ricerca del catalogo" in fondo) */
/* la tendina (position:absolute) deve uscire dal riquadro, che di suo taglia con overflow:hidden */
section.riquadro.art-sezione{overflow:visible}
.art-risultati{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:min(420px,60vh);overflow:auto;margin:0;padding:6px;list-style:none;border:1px solid var(--bordo);border-radius:8px;background:var(--pannello);box-shadow:var(--ombra)}
.art-risultato{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:6px;cursor:pointer}
.art-risultato.attivo{background:var(--accento-velo)}
/* .presente (articolo gia' nell'opportunita'): dal 03/10/2026 si puo' aggiungere di nuovo, quindi la riga non si
   spegne piu' (era opacity:.6 e il "+" sembrava disattivato, richiesta dell'utente); resta la scritta GIA' PRESENTE */
.art-risultato-foto{flex:none;width:44px;height:44px;border-radius:6px;object-fit:cover;background:#fff;border:1px solid var(--bordo);image-orientation:none}
.art-risultato-foto.vuota{display:grid;place-items:center;color:var(--debole);background:var(--pannello2)}
.art-risultato-testo{flex:1;min-width:0}
.art-risultato-testo b{display:block;font-size:14px;font-weight:700;color:var(--testo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-risultato-testo .cat-famiglia{margin-bottom:1px}
.art-risultato-riga{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
/* inline-block e non inline-flex: il <mark> della parola trovata non deve diventare un elemento flex con gli spazi del gap */
.art-risultato-riga .cat-codice{display:inline-block;margin-top:0;font-size:11.5px}
.art-risultato-riga small{font-size:11px;color:var(--tenue)}
.art-risultato mark{background:none;color:var(--accento-testo);font-weight:700}
/* il + e' un'icona di riga verde quadrata (.icona-riga.ir-crea), come il + sotto la foto: mai tondo (05/10/2026) */
.art-risultato-aggiungi{flex:none;pointer-events:none}
.art-risultato.attivo .art-risultato-aggiungi{background:color-mix(in srgb,var(--ic) 24%,transparent);border-color:var(--ic)}
/* pillola fra le etichette della riga (03/10/2026): prima stava accanto al + e sul telefono copriva le etichette */
.art-risultato-gia{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid color-mix(in srgb,var(--successo) 60%,transparent);border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--successo);white-space:nowrap}
.art-risultato-vuoto{padding:14px 12px;color:var(--debole);font-size:13px}
.art-esito{min-height:1.3em;margin:8px 0 0;font-size:12.5px;color:var(--tenue)}
.art-esito.ok{color:var(--successo)}
.art-esito.errore{color:var(--pericolo)}
.art-esito.attesa::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border:2px solid var(--bordo);border-top-color:var(--accento);border-radius:50%;animation:gira .7s linear infinite;vertical-align:-1px}

/* cestino del catalogo: fascia verde con "Incolla nell'opportunita'" */
.art-cestino{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 0;padding:12px 14px;border:1px solid var(--successo-bordo);border-radius:var(--raggio);background:var(--successo-velo)}
.art-cestino-icona{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--verde);color:#fff}
.art-cestino-testo{flex:1;min-width:160px;font-size:13.5px;font-weight:600;color:var(--testo)}
.art-cestino-azioni{display:flex;gap:8px;flex-wrap:wrap}

/* tabella degli articoli: foto, articolo, quantita' e prezzo da scrivere, importo, icone (note e allegati, PDF, togli) */
.art-scorri{margin-top:16px}
table.tabella.t-articoli td{white-space:normal;overflow:visible;text-overflow:clip;vertical-align:top}
.t-articoli .c-foto{width:80px}
/* il "+" sotto la foto (05/10/2026): un'altra riga dello stesso articolo subito sotto. E' un'icona di riga verde
   (icona-riga ir-crea, quadrata come le altre: richiesta dell'utente) e sta in colonna con la foto, centrata sotto */
.art-foto-pila{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.art-duplica:disabled{opacity:.55;cursor:wait}
/* variante B: fascia del colore dello stato a catalogo, come nel catalogo articoli */
table.tabella.t-articoli tbody tr.art-riga.art-fascia > td.c-foto{
  padding-left:22px;
  background-image:var(--fascia-sfumata);
  background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
}
.t-articoli .c-qta{width:130px}
.t-articoli .c-prezzo{width:170px}
.t-articoli .c-importo{width:130px}
.t-articoli .c-azioni{width:136px}
@media (pointer:coarse){.t-articoli .c-azioni{width:152px}}
.t-articoli .cat-foto{width:64px;height:64px}
.t-articoli .cat-riga-codice{margin-top:4px}
.art-dettagli{display:block;margin-top:5px;font-size:11.5px;color:var(--tenue)}
.art-noncatalogo{font-size:10.5px;font-style:italic;color:var(--pericolo)}
.art-campo{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:0 10px 0 0;border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--sfondo);transition:border-color .15s,box-shadow .15s}
.art-campo:focus-within{border-color:var(--accento);box-shadow:0 0 0 3px var(--accento-velo)}
.art-campo input{width:76px;min-width:0;padding:8px 6px 8px 10px;border:none;background:transparent;color:var(--testo);font:inherit;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.art-campo input:focus{outline:none}
.art-campo .art-um{font-size:11.5px;font-weight:600;color:var(--tenue);white-space:nowrap}
.art-campo .art-um:first-child{padding-left:10px}
.art-campo .art-um + input{padding-left:0}
.t-articoli .c-prezzo .art-campo input{width:84px}
/* ticket 409 (19/09/2026): nella pagina dell'opportunita' il prezzo non e' una colonna ma sta nella parte richiusa
   dell'articolo (.art-prezzo-campo) e nel riepilogo della fascia; i metri prendono il suo spazio */
/* dal 22/09 la cella tiene un campo solo con dentro i metri E il tipo di campione (.art-qt, in fondo al foglio):
   serve una colonna un po' piu' larga, se no il nome del tipo finisce con i puntini */
.t-articoli.prezzo-nel-pannello .c-qta{width:268px}
/* .campo mette etichetta e campo in colonna: qui stanno sulla stessa riga, l'etichetta come quella delle note */
.art-prezzo-campo{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px}
.art-prezzo-campo > label{margin:0}
.art-prezzo-campo .art-campo input{width:110px}
.t-articoli .c-importo b{display:block;padding-top:9px;font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.t-articoli .c-importo b.vuoto{color:var(--debole);font-weight:500}
.art-stato{display:block;min-height:1.2em;margin-top:2px;font-size:10.5px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-stato.fatto{color:var(--successo)}
.art-stato.errore{color:var(--pericolo)}
.art-stato.attesa{color:var(--debole)}
tr.art-riga.aperta td{border-bottom:none}
tr.art-riga.nuova td{animation:art-nuova 2.4s ease-out}
@keyframes art-nuova{0%{background:var(--successo-velo)}100%{background:transparent}}

/* Sotto ogni articolo una fascia sempre visibile: freccia, "Note e allegati" e il contatore di quello che contiene
   ("2 foto, 1 nota"). Si apre sulle note e sui media dell'articolo (js/opportunita-articoli.js); nella scheda in sola
   lettura la stessa fascia e' un <details>/<summary>, senza script. */
table.tabella.t-articoli tr.art-espansa td{padding:0 12px 14px 92px;border-bottom:1px solid var(--bordo)}
.art-dettaglio{border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.art-dettaglio.aperto,details.art-dettaglio[open]{border-color:color-mix(in srgb,var(--ic-blu) 40%,var(--bordo));box-shadow:inset 3px 0 0 var(--ic-blu)}
.art-apri{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:none;color:var(--testo);font:inherit;text-align:left;cursor:pointer;list-style:none;transition:background-color .15s}
.art-apri::-webkit-details-marker{display:none}
.art-apri::marker{content:""}
.art-apri:hover{background:color-mix(in srgb,var(--ic-blu) 9%,transparent)}
.art-apri:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.art-apri-freccia{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ic-blu) 34%,transparent);background:color-mix(in srgb,var(--ic-blu) 11%,transparent);color:var(--ic-blu);
  transition:transform .22s ease,background-color .15s,border-color .15s,color .15s;
}
.art-apri-freccia svg{display:block;width:15px;height:15px;stroke-width:2.2}
.art-dettaglio.aperto .art-apri-freccia,details.art-dettaglio[open] > .art-apri .art-apri-freccia{transform:rotate(180deg);background:var(--ic-blu);border-color:var(--ic-blu);color:#fff}
html[data-tema="scuro"] .art-dettaglio.aperto .art-apri-freccia,
html[data-tema="scuro"] details.art-dettaglio[open] > .art-apri .art-apri-freccia{color:#04141c}
.art-apri-testo{min-width:0;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-apri-conta{margin-left:auto;flex:none;padding:3px 10px;border-radius:999px;font-size:11.5px;color:var(--debole)}
/* nel tema chiaro il blu delle icone su un velo dello stesso blu si ferma a 4,0:1: a fascia chiusa questa pillola e'
   l'unica cosa che dice cosa c'e' dentro l'articolo, quindi si scurisce (restando lo stesso blu di famiglia).
   Nel tema scuro --ic-blu e' gia' chiaro e sta a 6,4:1: li' non si tocca. */
.art-apri-conta.pieno{background:color-mix(in srgb,var(--ic-blu) 13%,transparent);color:color-mix(in srgb,var(--ic-blu) 82%,#000);font-weight:600}
html[data-tema="scuro"] .art-apri-conta.pieno{color:var(--ic-blu)}
/* apertura discreta: la riga della griglia passa da 0fr a 1fr (niente altezze fisse da indovinare) */
.art-pannello{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .24s ease,visibility .24s}
.art-pannello > div{min-height:0;overflow:hidden}
.art-dettaglio.aperto .art-pannello{grid-template-rows:1fr;visibility:visible}
@media (prefers-reduced-motion:reduce){.art-pannello,.art-apri-freccia{transition:none}}
.art-pannello-corpo{display:grid;gap:16px;padding:12px 14px 14px;border-top:1px solid var(--bordo)}
/* altezza di righe intere: 5 x 19,5 + 16 di spazio interno + 2 di bordo. Con 92px l'ultima riga restava tagliata a
   meta' delle lettere (le note dell'articolo sono quasi sempre di 4-6 righe; il campo ha rows="5") */
.art-note textarea{min-height:116px;resize:vertical;line-height:1.5;font-size:13px}
.art-note-conta{margin-left:auto;font-size:11px;color:var(--debole);font-variant-numeric:tabular-nums}
.art-note-conta.vicino{color:var(--pericolo);font-weight:600}
/* avviso: queste note finiscono nella commessa e le leggono anche gli altri */
.art-note-avviso{display:flex;align-items:flex-start;gap:7px;margin:7px 0 0;font-size:11.5px;line-height:1.45;color:var(--tenue)}
.art-note-avviso svg{flex:none;margin-top:1px;color:var(--ic-blu)}
.art-allegati-titolo{display:block;margin-bottom:7px;font-size:12px;font-weight:600;color:var(--tenue)}
/* vocale al volo (MediaRecorder): il pulsante diventa rosso e pulsa mentre registra */
table.tabella.t-articoli tfoot td{padding-top:12px;padding-bottom:12px;border-top:2px solid var(--bordo-forte);border-bottom:none;background:var(--pannello2)}
.art-totale .c-articolo b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue)}
.art-totale .c-articolo small{display:block;font-size:11px;color:var(--debole)}
.art-totale .c-qta b,.art-totale .c-importo b{display:block;padding-top:0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.art-totale .c-importo b{color:var(--accento-testo);font-size:17px}
.art-nessuno{padding:26px 12px 8px}
.art-nessuno svg{color:var(--debole)}
/* scheda in sola lettura: stessa tabella senza campi */
.t-articoli .art-valore{display:block;padding-top:9px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.t-articoli .art-valore.vuoto{color:var(--debole);font-weight:500}
.art-lettura .deal-testo{padding:0;font-size:13px}
.art-lettura .camp-galleria{margin:0}
.art-lettura .art-note-avviso{margin-top:8px}

/* commessa in PDF */
.art-commessa-corpo{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.art-commessa-anteprima{position:relative;flex:none;width:104px;height:132px;padding:14px 12px;border:1px solid var(--bordo);border-radius:6px;background:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.5);overflow:hidden}
.art-commessa-fascia{position:absolute;left:0;right:0;top:0;height:5px;background:var(--accento)}
.art-commessa-anteprima img{display:block;width:60px;height:auto;margin-top:6px}
.art-commessa-righe{display:block;margin-top:14px}
.art-commessa-righe i{display:block;height:5px;margin-bottom:7px;border-radius:3px;background:#e6e2d8}
.art-commessa-righe i:first-child{width:80%;background:#da0219;opacity:.6}
.art-commessa-righe i:nth-child(2){width:100%}
.art-commessa-righe i:nth-child(3){width:60%}
.art-commessa-testo{flex:1;min-width:240px}
.art-commessa-testo p{margin:0 0 12px;font-size:13.5px;color:var(--tenue);max-width:60ch}
.art-commessa-testo .bottone svg{flex:none}
.art-commessa-testo .bottone.disabilitato{opacity:.5;cursor:not-allowed}

/* invio della commessa via e-mail */
.dialogo-posta{width:min(560px,94vw);padding:0;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);color:var(--testo);box-shadow:var(--ombra);overflow:hidden}
.dialogo-posta::backdrop{background:rgba(4,20,28,.6)}
.dialogo-posta-testa{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.dialogo-posta-testa > div{flex:1;min-width:0}
.dialogo-posta-testa b{display:block;font-size:15px}
.dialogo-posta-testa small{display:block;font-size:11.5px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dialogo-posta-corpo{display:grid;gap:12px;padding:16px;max-height:70vh;overflow:auto}
.dialogo-posta-corpo .avviso{margin:0}
.dialogo-posta-corpo textarea{min-height:110px;resize:vertical;line-height:1.5}
.dialogo-posta-piede{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--bordo)}
.art-posta-esito{min-height:1.2em;margin:0;font-size:12.5px;color:var(--tenue)}
.art-posta-esito.ok{color:var(--successo)}
.art-posta-esito.errore{color:var(--pericolo)}

/* sotto i 900px di spazio: ogni articolo e' una scheda (foto, articolo e icone in cima; quantita', prezzo e importo
   con la loro etichetta); note e allegati si aprono attaccati sotto la scheda; i totali in una scheda a parte */
@container (max-width:900px){
  table.tabella.t-articoli{display:block;width:100%}
  table.tabella.t-articoli thead{display:none}
  table.tabella.t-articoli tbody,table.tabella.t-articoli tfoot{display:grid;gap:12px;padding:12px}
  table.tabella.t-articoli tbody tr.art-riga{
    display:grid;grid-template-columns:72px minmax(0,1fr) auto;
    grid-template-areas:"foto articolo azioni" "qta prezzo importo";
    gap:10px 12px;padding:12px 14px;
    border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello2);box-shadow:0 2px 6px -3px rgba(0,0,0,.35);
  }
  table.tabella.t-articoli tbody tr.art-riga.aperta{border-bottom-left-radius:0;border-bottom-right-radius:0}
  /* variante B: in modalita' scheda la fascia passa alla scheda intera (la cella della foto la lascia) */
  table.tabella.t-articoli tbody tr.art-riga.art-fascia{
    border-color:color-mix(in srgb,var(--fascia) 45%,var(--bordo-forte));
    background-image:var(--fascia-sfumata);
    background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
  }
  table.tabella.t-articoli tbody tr.art-riga.art-fascia > td.c-foto{background-image:none;padding-left:0}
  /* la fascia "Note e allegati" e' il fondo della scheda dell'articolo: si attacca senza stacchi ne' doppi bordi */
  table.tabella.t-articoli tbody tr.art-espansa{display:block;margin-top:-12px}
  table.tabella.t-articoli tbody tr.art-espansa td{display:block;padding:0}
  .art-dettaglio{border-color:var(--bordo-forte);border-top:none;border-radius:0 0 var(--raggio) var(--raggio)}
  /* qui il blocco non e' piu' rientrato sotto la colonna Articolo come su PC: sta sul fianco sinistro della scheda,
     attaccato alla fascia del colore dello stato. Il filetto blu di "aperto" (inset 3px) faceva un unico bordo
     sinistro che cambiava colore e larghezza a meta': 12px del colore dello stato sopra, 3px di blu sotto. Nella
     scheda in sola lettura il blocco e' sempre aperto, quindi succedeva su ogni articolo con note o allegati.
     L'aperto si vede lo stesso dal bordo, che resta virato di blu. */
  table.tabella.t-articoli tbody tr.art-espansa .art-dettaglio{box-shadow:none}
  table.tabella.t-articoli td{display:block;width:auto;min-width:0;padding:0;border:none;background:none}
  table.tabella.t-articoli td.c-foto{grid-area:foto}
  table.tabella.t-articoli td.c-articolo{grid-area:articolo}
  table.tabella.t-articoli td.c-azioni{grid-area:azioni}
  table.tabella.t-articoli td.c-qta{grid-area:qta}
  table.tabella.t-articoli td.c-prezzo{grid-area:prezzo}
  table.tabella.t-articoli td.c-importo{grid-area:importo;text-align:right}
  table.tabella.t-articoli td[data-etichetta]::before{content:attr(data-etichetta);display:block;margin-bottom:3px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--debole);white-space:normal}
  .t-articoli .cat-foto{width:72px;height:72px}
  .art-campo{width:100%;padding-right:8px}
  .art-campo input,.t-articoli .c-prezzo .art-campo input{width:100%;flex:1}
  .t-articoli .c-importo b,.t-articoli .art-valore{padding-top:6px}
  .art-pannello-corpo{padding:12px;background:var(--pannello)}
  /* i totali: le celle prendono le aree articolo/qta/importo delle regole qui sopra; foto, prezzo e azioni spariscono
     (selettore con tfoot: deve battere "table.tabella.t-articoli td{display:block}") */
  table.tabella.t-articoli tfoot tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"articolo qta importo";gap:8px 14px;align-items:center;padding:12px 14px;border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello2)}
  table.tabella.t-articoli tfoot td{padding:0;border:none;background:none}
  table.tabella.t-articoli tfoot td.c-foto,table.tabella.t-articoli tfoot td.c-prezzo,table.tabella.t-articoli tfoot td.c-azioni{display:none}
  /* senza la cella del prezzo i metri prendono tutta la riga fino all'importo; il prezzo nella parte richiusa resta corto */
  table.tabella.t-articoli.prezzo-nel-pannello tbody tr.art-riga{grid-template-areas:"foto articolo azioni" "qta qta importo"}
  /* a schede le larghezze della tabella non valgono (altrimenti i metri finirebbero sopra l'importo) */
  table.tabella.t-articoli.prezzo-nel-pannello td.c-qta{width:auto}
  .art-prezzo-campo .art-campo{width:auto;max-width:100%}
  .art-prezzo-campo .art-campo input{width:120px;flex:none}
}
/* telefono: le tre icone vanno in una riga loro sotto foto e articolo, cosi' nome e famiglia hanno tutta la larghezza */
@container (max-width:600px){
  table.tabella.t-articoli tbody tr.art-riga{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"foto articolo articolo" "azioni azioni azioni" "qta qta qta" "prezzo prezzo importo"}
  table.tabella.t-articoli.prezzo-nel-pannello tbody tr.art-riga{grid-template-areas:"foto articolo articolo" "azioni azioni azioni" "qta qta importo"}
  table.tabella.t-articoli tbody tr.art-riga td.c-azioni .azioni-riga{justify-content:flex-start}
  .t-articoli .cat-foto{width:64px;height:64px}
  /* il contatore va a capo invece di schiacciare "Note e allegati": con un articolo pieno (e in inglese, dove i testi
     sono piu' lunghi) l'etichetta spariva del tutto e restava solo la freccia accanto a una pillola di numeri */
  .art-apri{flex-wrap:wrap;row-gap:5px}
  .art-apri-testo{flex:none;max-width:100%}
  .art-apri-conta{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* due colonne fisse anche sul telefono piu' stretto: con la misura minima del tablet ne entrava una sola e sei
     allegati facevano un pannello alto 1800px, cinque schermate per arrivare all'articolo dopo */
}
@media (max-width:560px){
  .art-campo input{font-size:16px}
}

/* ---------- Tessuti > Catalogo: cestino degli articoli (js/catalogo.js) ---------- */
.cestino-barra{position:fixed;left:50%;bottom:18px;z-index:35;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:8px 10px 8px 12px;border:2px solid var(--verde);border-radius:999px;background:var(--pannello);color:var(--testo);box-shadow:0 22px 46px -18px rgba(16,34,43,.55);transform:translate(-50%,0)}
.cestino-barra-icona{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--verde);color:#fff}
.cestino-barra-conta{position:absolute;top:-5px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accento);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.cestino-barra-testo{font-size:13px;font-weight:600;white-space:nowrap}
.cestino-barra .bottone{white-space:nowrap}
html[data-tema="scuro"] .cestino-barra{box-shadow:0 22px 46px -18px rgba(0,0,0,.95)}
.cestino-spazio{height:74px}
/* con la fascia visibile anche il pie' di pagina (telefono, privacy) resta raggiungibile sopra di lei */
.centro:has(.cestino-barra:not([hidden])) .piede{margin-bottom:74px}
@media (max-width:700px){
  .cestino-barra{left:12px;right:12px;bottom:12px;max-width:none;flex-wrap:wrap;justify-content:center;border-radius:12px;transform:none}
  .cestino-barra-testo{flex:1}
  .cestino-spazio{height:120px}
  .centro:has(.cestino-barra:not([hidden])) .piede{margin-bottom:120px}
}
/* scelta dell'opportunita' in cui incollare gli articoli */
.dialogo-scelta{width:min(560px,94vw);padding:0;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);color:var(--testo);box-shadow:var(--ombra);overflow:hidden}
.dialogo-scelta::backdrop{background:rgba(4,20,28,.6)}
.dialogo-scelta .barra-cerca{max-width:none;margin:12px 16px 0}
.scelta-elenco{list-style:none;margin:0;padding:8px;max-height:min(420px,60vh);overflow:auto}
.scelta-voce{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;border-radius:6px;background:none;color:var(--testo);font:inherit;text-align:left;cursor:pointer}
.scelta-voce:hover,.scelta-voce:focus-visible{background:var(--accento-velo);outline:none}
.scelta-voce > span{flex:1;min-width:0}
.scelta-voce b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scelta-voce small{display:block;font-size:11.5px;color:var(--tenue)}
.scelta-voce .badge{flex:none}
.scelta-voce .tag-categoria{margin:0 0 3px}
.scelta-vuoto{padding:16px;color:var(--debole);font-size:13px;text-align:center}

/* ---------- Campionature: elenco (Elenco.aspx) e scheda in lettura (Scheda.aspx) ---------- */
/* colonne fisse strette (quando e chi, allegati, tre icone) e il resto ai testi, che sono la colonna piu' lunga */
.t-deal td{vertical-align:top}
/* la cella con l'etichetta della categoria serve solo quando la riga diventa scheda (sotto i 900px di spazio):
   li' sale in cima, appoggiata alla fascia, e resta un link che filtra l'elenco. Su schermo largo l'etichetta e'
   gia' dentro la colonna del cliente e questa cella sparisce (nessuna colonna in piu': display:none la toglie
   proprio dalla tabella, e infatti nel <thead> non c'e' nessun <th> che le corrisponda) */
table.tabella.t-deal td.deal-tag{display:none}
/* i 12px di rientro della fascia li paga la prima colonna, non le altre */
.t-deal .c-data{width:162px}
/* 30%: dal 23/09/2026 la colonna del cliente porta anche le etichette degli agenti e il cliente in grande */
.t-deal .c-azienda{width:30%}
.t-deal .c-allegati{width:20%}
.t-deal .c-azioni{width:150px}
.t-deal td.deal-testi{white-space:normal}
/* categoria e validazione, poi il CLIENTE piu' grande, sotto il TITOLO in un colore che si vede (e' anche il link alla
   scheda, fino a due righe) e la localita' in piccolo. Ordine chiesto dall'utente il 23/09/2026 ("da' l'idea di
   essere un po' confuso"): prima il cliente veniva dopo il titolo proposto, grigio, e il codice OC stava in mezzo
   alle etichette; ora il codice e' in cima alla prima colonna (.deal-rif) */
.t-deal{--deal-titolo:#1d5fd1}
html[data-tema="scuro"] .t-deal{--deal-titolo:#86b4ff}
.t-deal td.deal-identita{white-space:normal}
.deal-identita .tag-categoria{margin:0 0 5px}
.deal-cliente{display:block;margin-top:3px;font-size:15px;font-weight:700;line-height:1.3;color:var(--testo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal-titolo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin-top:2px;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--deal-titolo);text-decoration:none}
.deal-titolo:hover{text-decoration:underline}
.deal-titolo:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
/* il titolo proposto ("Opportunita' per ... del ...") nell'elenco non si scrive piu' (ripeteva cliente e data) */
table.tabella td.deal-identita a.deal-titolo{display:-webkit-box}
table.tabella td.deal-identita small.deal-luogo{margin-top:3px;font-size:10.5px;letter-spacing:.02em}
/* codice OC: il primo dato della riga, in cima alla prima colonna sopra la data */
.deal-rif{display:block;margin:0 0 6px}
.t-deal .deal-rif .deal-codice{margin:0}
/* categoria e validazione sulla stessa riga; se non ci stanno vanno a capo allineate a sinistra */
.deal-etichette{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 5px}
.deal-etichette:empty{display:none}
.deal-identita .deal-etichette .tag-categoria,.deal-identita .deal-etichette .vp-stato{margin:0}
.t-deal td.c-allegati{white-space:normal}
/* fascia del colore della categoria (le variabili --fascia stanno in cima al foglio): su PC sta sulla prima cella,
   perche' la <tr> di una tabella non collassata non tiene il fondo come ci si aspetta (stesso motivo per cui nel
   registro attivita' la barretta sta su td:first-child) */
table.tabella.t-deal tbody tr.deal-fascia > td.c-data{
  padding-left:22px;
  background-image:var(--fascia-sfumata);
  background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
}
/* icone della riga: con la quarta (il cestino, solo per chi ha creato l'opportunita') i 150px di .c-azioni non
   bastano piu' e la colonna NON si allarga da se' (table-layout:fixed): quello che esce lo taglia la cella
   (overflow:hidden) a sinistra, dove sta la prima icona (Apri), che diventa anche non cliccabile.
   Servono 4x32 + 3x6 di spazi + 24 di padding = 170px, e 4x38 + 3x6 + 24 = 194px dove le icone di riga passano a
   38px (schermi touch). La classe deal-c-azioni la mettono th e td in Campionature/Elenco.aspx: cosi' la larghezza
   nuova vale solo dove ci sono i cestini, e la colonna dei testi resta la piu' larga.
   Nella scheda del telefono (@container sotto i 900px) le larghezze non valgono piu' e, se lo spazio non basta,
   l'ultima icona va a capo invece di far scorrere la scheda di lato. */
.t-deal .deal-c-azioni{width:176px}
@media (pointer:coarse){.t-deal .deal-c-azioni{width:200px}}
@container (max-width:900px){.deal-azioni{flex-wrap:wrap}}
/* conferma dell'eliminazione: le righe (che cosa sparisce, cosa contiene, l'avvertenza) staccate fra loro */
.deal-elimina-riga + .deal-elimina-riga{margin-top:10px}
/* articoli dell'opportunita': codice e nome commerciale, uno per riga */
.deal-articoli{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:12px}
.deal-articoli li{display:flex;align-items:baseline;gap:6px;min-width:0}
.deal-articoli .cat-codice{flex:none;margin-top:0;padding:0 5px;font-size:10.5px;line-height:1.45}
.deal-articolo-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal-articoli .deal-articoli-altri{color:var(--tenue);font-size:11.5px}
/* filtro per categoria o evento, accanto alla ricerca */
/* subito accanto alla ricerca: il pulsante verde resta a destra */
.deal-filtro-categoria{position:relative;display:flex;align-items:center;min-width:200px;max-width:280px;flex:1;margin-right:auto}
.deal-filtro-categoria svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--debole);pointer-events:none}
.deal-filtro-categoria select{
  width:100%;padding:9px 12px 9px 34px;border:1px solid var(--bordo);border-radius:var(--raggio);
  background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:13.5px;
}
.deal-filtro-categoria select:focus{outline:none;border-color:var(--accento)}
.deal-filtro-categoria:focus-within svg{color:var(--accento-testo)}
@media (max-width:560px){.deal-filtro-categoria{max-width:none;min-width:0;flex-basis:100%}}
/* pannello Filtri dell'elenco (23/09/2026): gli stessi riquadri del catalogo (.cat-filtri, .cat-intervallo e la
   tendina .cat-filato-*); qui le pillole e la tendina dell'agente del cliente (colori delle etichette az-agente:
   viola i diretti, blu con agente) e le scorciatoie del periodo */
.deal-filtri{margin-bottom:14px}
/* .deal-filtro-scelta: pillole + tendina (agente del cliente per gli interni, "Inserite da" per il supervisore) */
.deal-filtro-scelta .cat-pillole,.deal-filtro-scelta select,.deal-periodi{grid-column:1/-1}
.deal-filtro-scelta .cat-pillole{display:flex;flex-wrap:wrap;gap:6px}
.cat-pillola.ag-diretti:has(input:checked) span{border-color:color-mix(in srgb,#6f42c1 45%,transparent);background:color-mix(in srgb,#6f42c1 10%,var(--pannello));color:#6f42c1}
html[data-tema="scuro"] .cat-pillola.ag-diretti:has(input:checked) span{color:#c3a6ff}
.cat-pillola.ag-con:has(input:checked) span{border-color:color-mix(in srgb,#3b7bff 45%,transparent);background:color-mix(in srgb,#3b7bff 10%,var(--pannello));color:#2f66d6}
html[data-tema="scuro"] .cat-pillola.ag-con:has(input:checked) span{color:#8ab4ff}
html[data-tema="scuro"] .deal-filtro-periodo input{color-scheme:dark}
.deal-periodi{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.deal-periodi button{padding:5px 10px;border:1px solid var(--bordo);border-radius:999px;background:var(--pannello);color:var(--tenue);font:inherit;font-size:12px;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.deal-periodi button:hover{border-color:var(--accento)}
.deal-periodi button.attiva{border-color:var(--accento);background:var(--accento-velo);color:var(--testo);font-weight:600}
.deal-periodi button:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
@media (pointer:coarse){.deal-periodi button{min-height:38px;padding:6px 12px}}
/* chi l'ha inserita, sotto data e ora */
.deal-autore{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--bordo)}
.deal-autore b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* schede su smartphone e tablet (clienti, opportunita', agenti): ogni riga e' un riquadro staccato dagli altri,
   con bordo e fondo propri, cosi' le icone di una scheda non si confondono con quelle della scheda vicina */
@container (max-width:900px){
  table.tabella.t-deal tbody,table.tabella.t-post tbody,table.ag-tabella tbody{display:grid;gap:12px;padding:12px}
  table.tabella.t-deal tbody tr,table.tabella.t-post tbody tr,table.ag-tabella tbody tr{
    border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello2);
    box-shadow:0 2px 6px -3px rgba(0,0,0,.35);
  }
}

/* tabella stretta, sotto i 900px (smartphone, tablet): ogni riga diventa una scheda, niente scorrimento orizzontale.
   In cima le icone (a sinistra) e, a destra, data con chi l'ha inserita; sotto azienda e allegati, infine i testi. */
@container (max-width:900px){
  /* selettori con table.tabella: devono battere le regole generali delle tabelle e le larghezze qui sopra */
  table.tabella.t-deal thead{display:none}
  table.tabella.t-deal{display:block;width:100%}
  /* prima colonna almeno 170px = QUATTRO icone da 38 e tre spazi da 6 (Apri, Chat, Modifica, Elimina): con il
     cestino le icone sono diventate quattro e i vecchi 130px non bastavano piu'. Misurato a 390px: con un autore
     lungo ("Supervisore Sistema FP") la colonna delle azioni scendeva a 143px e il cestino andava a capo da solo.
     Il min() serve ai telefoni davvero piccoli: quando il 70% della scheda e' meno di 170px il minimo scende con
     lui e l'ultima icona va a capo, perche' una riga di icone intera non vale una scheda che scorre di lato. */
  table.tabella.t-deal tr{
    display:grid;grid-template-columns:minmax(min(170px,70%),1fr) auto;
    grid-template-areas:"azioni data" "azienda azienda" "allegati allegati" "testi testi";
    gap:10px 12px;padding:12px 14px;
  }
  table.tabella.t-deal td{display:block;width:auto;min-width:0;padding:0;border:none;white-space:normal;overflow:visible}
  table.tabella.t-deal td small{white-space:normal}
  table.tabella.t-deal td.c-azioni{grid-area:azioni}
  table.tabella.t-deal td.c-data{grid-area:data;text-align:right;max-width:180px}
  table.tabella.t-deal td.c-azienda{grid-area:azienda}
  table.tabella.t-deal td.c-allegati{grid-area:allegati;align-self:start}
  table.tabella.t-deal td.c-testi{grid-area:testi}
  /* anywhere: l'autore senza nome e' un'e-mail senza spazi, va a capo invece di tagliarsi nella colonna stretta */
  .t-deal .deal-autore b{white-space:normal;overflow-wrap:anywhere}
  /* gli stessi 6px di stacco che le icone hanno su schermo largo: con quattro icone gli 8px di prima
     facevano finire il cestino a capo sui telefoni stretti */
  .t-deal .azioni-riga{justify-content:flex-start;gap:6px}
  /* la fascia passa alla scheda intera e la categoria sale in cima, appoggiata alla fascia.
     Tutti i selettori nominano t-deal: la regola della scheda qui sopra e' condivisa con t-aziende, t-post e
     ag-tabella, che hanno la fascia del loro tag nelle loro sezioni (az-fascia, post-fascia) o nessuna fascia
     (ag-tabella: niente tag colorati, e il fianco sinistro e' della linea dei subagenti). */
  table.tabella.t-deal tbody tr.deal-fascia{
    grid-template-areas:"tag tag" "azioni data" "azienda azienda" "allegati allegati" "testi testi";
    border-color:color-mix(in srgb,var(--fascia) 45%,var(--bordo-forte));
    background-image:var(--fascia-sfumata);
    background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
  }
  table.tabella.t-deal tbody tr.deal-fascia > td.c-data{background-image:none;padding-left:0}
  /* Il tag in cima e' il link vero della categoria (td.deal-tag, scritto da Elenco.aspx e nascosto su schermo
     largo): cliccandolo l'elenco mostra solo quella categoria, come promettono le guide. Prima qui c'era uno
     pseudo-elemento con content:attr(data-categoria): si vedeva ma non si poteva cliccare ne' raggiungere da
     tastiera, e la scorciatoia spariva proprio sul telefono e sull'iPad.
     Il nome della categoria lo sceglie l'utente e puo' essere chiaro (ambra, arancio): sul velo, come fa gia'
     .tag-categoria, resta leggibile in tutti e due i temi; su fondo pieno con il testo bianco no. */
  table.tabella.t-deal tbody tr.deal-fascia > td.deal-tag{
    display:block;grid-area:tag;justify-self:start;max-width:100%;min-width:0;
    margin:-12px 0 0 -14px;
  }
  table.tabella.t-deal tbody tr.deal-fascia > td.deal-tag .tag-categoria{
    display:block;max-width:100%;
    margin:0;padding:4px 12px 4px 21px;
    border:none;border-radius:0 0 var(--raggio) 0;
    background:color-mix(in srgb,var(--fascia) 16%,var(--pannello));
    color:color-mix(in srgb,var(--fascia) 72%,var(--testo));
    font-size:11.5px;font-weight:600;line-height:1.45;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  /* il pallino del tag a pillola qui non serve: il colore lo da' gia' la fascia sotto */
  table.tabella.t-deal tbody tr.deal-fascia > td.deal-tag .tag-categoria::before{display:none}
  table.tabella.t-deal tbody tr.deal-fascia > td.deal-tag a.tag-categoria:hover{background:color-mix(in srgb,var(--fascia) 30%,var(--pannello))}
  /* senza categoria la cella sparisce E con lei la riga "tag" del tracciato: altrimenti restava una traccia alta
     0px seguita dai 10px di gap, e la scheda senza tag partiva 10px piu' in basso delle altre */
  table.tabella.t-deal tbody tr.deal-fascia[data-categoria=""] > td.deal-tag{display:none}
  table.tabella.t-deal tbody tr.deal-fascia[data-categoria=""]{
    grid-template-areas:"azioni data" "azienda azienda" "allegati allegati" "testi testi";
  }
  /* la categoria e' gia' in cima: quella dentro la cella sparisce */
  table.tabella.t-deal tbody tr.deal-fascia .deal-identita .tag-categoria{display:none}
}
.badges-riga{display:flex;flex-wrap:wrap;gap:4px}
.badges-riga .badge{margin:0}
.deal-estratto{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:6px;white-space:normal;overflow:hidden;overflow-wrap:anywhere;color:var(--tenue);font-size:11.5px;line-height:1.45}
/* la regola generale "table.tabella td small{display:block}" e' piu' forte e toglieva il taglio a due righe */
table.tabella td small.deal-estratto{display:-webkit-box}
.deal-conteggi{display:flex;flex-wrap:wrap;gap:6px}
.deal-conta{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--bordo);font-size:11.5px;font-weight:600;color:var(--testo)}
.deal-conta svg{color:var(--accento-testo)}
.deal-nessuno{color:var(--debole)}

/* gruppi dell'elenco: supervisore, subagenti, altre */
.deal-gruppo-testa{flex-wrap:wrap}
.deal-gruppo-titolo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.deal-gruppo-titolo b{font-size:14px;font-weight:600;color:var(--testo)}
.deal-gruppo-info{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.deal-gruppo.tipo-capo{border-color:var(--accento);box-shadow:inset 3px 0 0 var(--accento)}
.deal-gruppo.tipo-sub{box-shadow:inset 3px 0 0 var(--bordo-forte)}
.deal-gruppo.tipo-sub .deal-gruppo-testa{padding-left:28px}
.deal-gruppo.tipo-sub .deal-gruppo-titolo b::before{content:"\21B3";margin-right:6px;color:var(--tenue);font-weight:400}
.deal-gruppo .stato-vuoto{padding:16px 20px;align-items:flex-start}
.deal-filtro{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 0 14px;padding:10px 14px;
  border:1px solid var(--accento);border-radius:var(--raggio);background:var(--accento-velo);font-size:13.5px;font-weight:500;
}
table.ag-tabella td.azioni{text-align:right}

.deal-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 0 0;font-size:12.5px;color:var(--tenue)}
.deal-testo{padding:16px 20px 18px;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.deal-testo p{margin:0}
.deal-testo .stato-vuoto{padding:6px 0;align-items:flex-start;white-space:normal}
/* testata della sezione Articoli della scheda: titolo a sinistra, "Apri il PDF" e "Scarica il PDF" a destra.
   .testata-sezione e' condivisa con altre pagine e non va a capo (flex-wrap:nowrap), e il riquadro taglia quello
   che esce (overflow:hidden): sui telefoni stretti il secondo pulsante si perdeva a destra senza nemmeno lasciare
   una barra di scorrimento (in inglese "Download the PDF" gia' a 360px, in italiano a 320px). Qui, e solo qui,
   la testata va a capo e i pulsanti finiscono sotto il titolo, allineati con lui. */
@media (max-width:480px){
  .camp-testata-articoli{flex-wrap:wrap;justify-content:flex-start;padding-bottom:12px}
  .camp-testata-articoli > .azioni-riga{padding-left:20px}
}
.deal-scarica{display:inline-block;margin-top:4px;font-size:11.5px;color:var(--accento-testo)}

@media (prefers-reduced-motion:reduce){
  .camp-mic.attivo,.camp-rec.attivo .camp-rec-cerchio,.in-caricamento .camp-anteprima{animation:none}
}

/* ---------- Contatti > Agenti (Agenti.aspx) ---------- */
.ag-barra{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:18px}
.ag-barra p{margin:0;color:var(--tenue);font-size:13.5px}
.ag-barra .conta{color:var(--debole);font-size:12.5px;margin-left:8px}
.ag-filtro{
  flex:0 1 280px;min-width:0;padding:8px 10px;border-radius:3px;border:1px solid var(--bordo);
  background:var(--pannello);color:var(--testo);font:inherit;
}
.ag-gruppo{border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);overflow:hidden;margin-bottom:18px;min-width:0}
.ag-testa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:13px 16px;border-bottom:1px solid var(--bordo)}
.ag-testa b{font-size:14.5px;font-weight:600}
.ag-testa small{color:var(--tenue);font-size:12px}
/* contenitore: le regole @container qui sotto decidono tabella, icone o schede in base allo spazio vero */
.ag-scorri{overflow-x:auto;container-type:inline-size}

table.ag-tabella{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
table.ag-tabella th{
  text-align:left;padding:9px 14px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--debole);border-bottom:1px solid var(--bordo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
table.ag-tabella td{padding:10px 14px;border-bottom:1px solid var(--bordo);vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
table.ag-tabella tr:last-child td{border-bottom:none}
table.ag-tabella .c-ruolo{width:24%}
table.ag-tabella .c-prv{width:110px}
table.ag-tabella .c-data{width:110px}
table.ag-tabella td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.ag-tabella .badge{margin:2px 4px 2px 0}

.ag-nome{display:flex;align-items:center;gap:10px;min-width:0}
.ag-nome .sigla{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--pannello2);border:1px solid var(--bordo);font-size:11px;font-weight:600;color:var(--tenue);
}
.ag-nome div{min-width:0}
.ag-nome b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-nome small{display:block;color:var(--tenue);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-nome a{color:inherit}
.ag-nome a:hover{color:var(--accento-testo)}

tr.capo td{background:var(--pannello2)}
tr.capo .sigla{background:var(--accento);border-color:var(--accento);color:#fff}
tr.sub td:first-child{padding-left:34px;position:relative}
tr.sub td:first-child::before{
  content:"";position:absolute;left:18px;top:0;bottom:50%;width:10px;
  border-left:1px solid var(--bordo);border-bottom:1px solid var(--bordo);border-bottom-left-radius:4px;
}

/* due icone di riga (impersona, opportunita'): su touch 38+6+38, piu' lo spazio fra i due tag (3-4px, conta perche'
   le icone sono in linea) e 28 di padding. Con 112px su iPad la seconda icona sforava di un pixel e al suo posto
   comparivano i puntini dell'ellissi. Con il mouse le icone sono da 32px e 112px bastano */
table.ag-tabella .c-azioni{width:112px;white-space:nowrap}
@media (pointer:coarse){table.ag-tabella .c-azioni{width:120px}}
table.ag-tabella td.c-azioni .icona-riga + .icona-riga{margin-left:6px}

/* tabella stretta, sotto i 900px (smartphone, tablet): ogni agente e' una scheda staccata (bordo e fondo nella regola
   comune della sezione Campionature). In cima icone e ruolo, poi nome ed e-mail, sotto provvigione e periodo con
   la loro etichetta. Il supervisore ha il bordo rosso, i subagenti sono rientrati. */
@container (max-width:900px){
  table.ag-tabella{display:block;width:100%}
  table.ag-tabella thead{display:none}
  table.ag-tabella tr{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-areas:"azioni azioni ruolo" "agente agente agente" "prv dal al";
    gap:10px 12px;padding:12px 14px;
  }
  table.ag-tabella td,table.ag-tabella tr.capo td{display:block;width:auto;min-width:0;padding:0;border:none;overflow:visible;white-space:normal;background:none}
  /* tr nel selettore: deve battere "tr.capo td" qui sopra, che altrimenti rimette display:block */
  table.ag-tabella tr td.c-azioni{grid-area:azioni;display:flex;align-items:center;gap:8px;text-align:left}
  /* le larghezze della tabella (icone, 24%, 110px) non valgono nella scheda: il ruolo con piu' badge li stringeva uno
     sotto l'altro, provvigione e date sforavano la colonna e sui telefoni la scheda scorreva di lato */
  table.ag-tabella tr td.c-azioni,table.ag-tabella tr td.c-ruolo,table.ag-tabella tr td.c-prv,table.ag-tabella tr td.c-data{width:auto}
  table.ag-tabella td.c-azioni .icona-riga + .icona-riga{margin-left:0}
  table.ag-tabella td.c-ruolo{grid-area:ruolo;text-align:right;align-self:center}
  table.ag-tabella td.c-agente{grid-area:agente}
  table.ag-tabella td.c-prv{grid-area:prv}
  table.ag-tabella td.c-dal{grid-area:dal}
  table.ag-tabella td.c-al{grid-area:al}
  table.ag-tabella td[data-etichetta]::before{
    content:attr(data-etichetta);display:block;margin-bottom:2px;
    font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--debole);
  }
  /* l'etichetta va a capo: ereditava il nowrap di td.num e in inglese "STD COMMISSION" copriva "FROM" */
  table.ag-tabella tr td[data-etichetta]::before{white-space:normal}
  table.ag-tabella .ag-nome b,table.ag-tabella .ag-nome small{white-space:normal;overflow-wrap:anywhere}
  table.ag-tabella tbody tr.capo{border-color:var(--accento)}
  table.ag-tabella tbody tr.sub{margin-left:16px}
  table.ag-tabella tr.sub td:first-child{padding-left:0}
  table.ag-tabella tr.sub td:first-child::before{display:none}
}
/* telefoni piu' stretti (320px): provvigione piu' stretta, date e ruolo piu' larghi, cosi' le date non escono dalla colonna */
@container (max-width:300px){
  table.ag-tabella tr{grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr)}
  table.ag-tabella tr td[data-etichetta]::before{overflow-wrap:anywhere}
}

/* ---------- Impostazioni (Admin/Default.aspx) ---------- */
.schede{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.scheda-link{
  display:block;padding:20px;border-radius:var(--raggio);
  border:1px solid var(--bordo);background:var(--pannello);
  transition:border-color .2s ease,transform .2s ease;
}
.scheda-link:hover{border-color:var(--accento);transform:translateY(-2px)}
.scheda-link b{display:block;font-size:15px;margin-bottom:6px}
.scheda-link span{font-size:13px;color:var(--tenue)}

/* ---------- Impostazioni > Struttura del menu (MenuStruttura.aspx) ---------- */
/* sotto i 900px ogni voce diventa una scheda staccata, come nelle altre griglie: in cima le icone e lo stato, poi
   testo e indirizzo, in fondo ordinamento e visibilita' con la loro etichetta; le sottovoci sono rientrate */
/* chi vede la voce: gruppi come cartelle spuntabili, persone singole in elenchi a scomparsa */
.vis-gruppi{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin-bottom:12px}
.vis-gruppo{position:relative;display:flex;align-items:center;gap:12px;padding:12px 40px 12px 12px;border:2px solid var(--bordo);border-radius:var(--raggio);background:var(--sfondo);cursor:pointer;user-select:none;transition:border-color .15s,background-color .15s,transform .15s,opacity .15s}
.vis-gruppo:hover{border-color:var(--accento);transform:translateY(-1px)}
.vis-gruppo input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.vis-gruppo .vis-icona{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--pannello2);color:var(--tenue);transition:background-color .15s,color .15s}
.vis-gruppo .vis-testo{min-width:0}
.vis-gruppo b{display:block;font-size:13.5px}
.vis-gruppo small{display:block;font-size:11.5px;color:var(--tenue)}
.vis-gruppo .vis-spunta{position:absolute;right:10px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:2px solid var(--bordo-forte);display:grid;place-items:center;color:transparent;transition:background-color .15s,border-color .15s,color .15s}
.vis-gruppo:has(input:checked){border-color:var(--verde);background:color-mix(in srgb,var(--verde) 9%,var(--sfondo))}
.vis-gruppo:has(input:checked) .vis-icona{background:var(--verde);color:#fff}
.vis-gruppo:has(input:checked) .vis-spunta{background:var(--verde);border-color:var(--verde);color:#fff}
.vis-gruppo:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
.vis-gruppo.spento{opacity:.45;pointer-events:none}
.vis-singoli-lista{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:6px}
@media (max-width:760px){.vis-singoli-lista{grid-template-columns:1fr}}
.vis-singoli{border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello)}
.vis-singoli summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:9px 12px;font-size:12.5px;color:var(--testo);cursor:pointer;list-style:none}
.vis-singoli summary::-webkit-details-marker{display:none}
.vis-singoli summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--tenue);border-bottom:1.5px solid var(--tenue);transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.vis-singoli[open] summary::before{transform:rotate(45deg)}
.vis-singoli summary .conta{color:var(--accento-testo);font-weight:600;font-size:11.5px}
.vis-singoli summary .bloccati{display:none;flex-basis:100%;font-size:11px;color:var(--debole)}
.vis-singoli.bloccato{opacity:.6}
.vis-singoli.bloccato summary{cursor:default}
.vis-singoli.bloccato summary .conta{display:none}
.vis-singoli.bloccato summary .bloccati{display:block}
.vis-singoli .cornice{border-top:1px solid var(--bordo);padding:12px;max-height:260px;overflow-y:auto;background:var(--sfondo)}
/* persone come pillole: casella nascosta, la pillola si accende quando e' scelta */
.pillole{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pillole li{position:relative;display:block}
.pillole li input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pillole li label{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 8px;border-radius:999px;border:1px solid var(--bordo-forte);background:var(--pannello);color:var(--testo);font-size:12.5px;cursor:pointer;user-select:none;transition:background-color .15s,border-color .15s,color .15s}
.pillole li label::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--bordo-forte);flex:none;transition:background-color .15s,border-color .15s;background-repeat:no-repeat;background-position:center;background-size:9px 9px}
.pillole li label:hover{border-color:var(--accento)}
.pillole li input:checked + label{background:var(--verde);border-color:var(--verde);color:#fff}
.pillole li input:checked + label::before{background-color:#fff;border-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d4f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E")}
.pillole li input:focus-visible + label{outline:2px solid var(--accento2);outline-offset:2px}
.pillole li.spento label,.pillole li input:disabled + label{opacity:.35;cursor:not-allowed;border-style:dashed}
.pillole li.spento label:hover{border-color:var(--bordo-forte)}

/* ---------- Impostazioni > Registro attivita' (LogAttivita.aspx) ---------- */
.filtri{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:18px}
.filtri input[type=text],.filtri input[type=date],.filtri select{
  padding:8px 10px;border-radius:3px;border:1px solid var(--bordo);background:var(--pannello);color:var(--testo);font:inherit;min-width:0;
}
.filtri .cerca{flex:1 1 240px}
.filtri label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--tenue)}
/* provenienza: nome della rete autorizzata, rete locale o paese con la sigla */
.provenienza{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;font-size:12px;vertical-align:top}
/* nomi lunghi (paesi, descrizioni delle reti) finiscono con i puntini: il nome intero e' nel title */
.provenienza .testo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.provenienza.rete{padding:1px 9px;border-radius:999px;border:1px solid var(--successo-bordo);background:var(--successo-velo);color:var(--successo);font-weight:600}
.provenienza.locale{padding:1px 9px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello2);color:var(--tenue)}
.sigla-paese{display:inline-grid;place-items:center;flex:none;min-width:24px;height:17px;padding:0 4px;border-radius:4px;border:1px solid var(--bordo);background:var(--pannello2);font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:10px;font-weight:700;color:var(--tenue)}
.badge.Login,.badge.Logout{border-color:var(--accento2);color:var(--accento2)}
.badge.Inserimento,.badge.Modifica,.badge.LetturaBiglietto{border-color:var(--accento);color:var(--accento-testo)}
.badge.Eliminazione{border-color:var(--pericolo-bordo);color:var(--pericolo)}
.badge.SchedaTecnica{border-color:var(--verde);color:var(--verde)}

/* righe scritte durante una prova "guarda con i suoi occhi": non sono attivita' vere dell'agente */
/* registro stretto, sotto i 900px (smartphone, tablet): ogni riga diventa una scheda, niente scorrimento orizzontale.
   In cima azione e data, poi agente e dettaglio a tutta larghezza, indirizzo con la provenienza, in fondo browser,
   sistema e dispositivo */

/* ---------- Impostazioni > Manutenzione (Admin/Manutenzione.aspx) ---------- */
/* riquadri della stessa altezza (griglia in stretch) e pulsante rosso sempre in fondo */
.manut{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:stretch}
.manut > .riquadro{margin-bottom:0;display:flex;flex-direction:column}
.manut-corpo{display:flex;flex-direction:column;flex:1}
.manut-corpo > p{margin:0;padding:16px 20px 4px;color:var(--tenue);font-size:13.5px}
.manut-corpo dl.dati.compatto{padding:12px 20px 8px}
.manut-azioni{margin-top:auto;padding:8px 20px 20px}
.dialogo-conferma{width:min(460px,92vw);padding:22px 24px;border:1px solid var(--pericolo-bordo);border-radius:8px;background:var(--pannello);color:var(--testo);box-shadow:var(--ombra)}
.dialogo-conferma::backdrop{background:rgba(4,20,28,.6)}
.dialogo-conferma h3{margin:0 0 10px;font-size:17px;color:var(--pericolo)}
.dialogo-conferma .campo{margin-top:14px}
.dialogo-conferma .azioni-form{margin-top:18px}
.manut-avviso{margin:0;font-size:13.5px;line-height:1.5;color:var(--tenue)}
.manut-avviso b{color:var(--testo)}
.manut-avviso kbd{display:inline-block;padding:1px 8px;border-radius:5px;border:1px solid var(--pericolo-bordo);background:var(--pericolo-velo);font:inherit;font-weight:700;color:var(--pericolo)}
.bottone.pericolo[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Manutenzione: tabelle del database (variante B scelta dall'utente il 19/09/2026) ----------
   Elenco delle tabelle FPC_ per area a sinistra, grafo della tabella scelta e scheda a destra (js/tabelle-db.js).
   Colore per tipo: blu dati del cliente, grigio sistema, ambra misto; verde acqua le tabelle esterne al portale.
   La sezione misura se stessa: sotto i 640px o l'elenco o la tabella (data-vista), come nello script. */
:root{--tdb-dati:var(--ic-blu);--tdb-sistema:var(--ic-grigio);--tdb-misto:var(--pos-ambra);--tdb-esterna:var(--ic-teal)}
.tdb{margin-top:18px;container-type:inline-size}
.tdb .cat-dati{--c:var(--tdb-dati)}
.tdb .cat-sistema{--c:var(--tdb-sistema)}
.tdb .cat-misto{--c:var(--tdb-misto)}
.tdb .cat-esterna{--c:var(--tdb-esterna)}
.tdb .cat-nuova{--c:var(--debole)}
.tdb-corpo{padding:16px 20px 20px}
.tdb-descrizione{margin:0;max-width:920px;font-size:13.5px;line-height:1.55;color:var(--tenue)}
.tdb-corpo > .avviso{margin:12px 0 0}
.tdb-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
.tdb-filtri{display:flex;flex-wrap:wrap;gap:6px}
.tdb-filtro{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--bordo);background:var(--pannello);color:var(--testo);font:inherit;font-size:12.5px;
}
.tdb-filtro b{font-size:11.5px;font-weight:700;color:var(--tenue)}
.tdb-filtro.scelto{border-color:var(--accento);background:var(--accento-velo)}
.tdb-filtro:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.tdb-punto{flex:none;width:9px;height:9px;border-radius:3px;background:var(--c,var(--debole))}
.tdb-cerca{display:flex;align-items:center;gap:8px;flex:1 1 220px;max-width:340px;margin-left:auto;padding:0 12px;border:1px solid var(--bordo);border-radius:999px;background:var(--sfondo);color:var(--tenue)}
.tdb-cerca:focus-within{border-color:var(--accento)}
.tdb-cerca input{flex:1;min-width:0;padding:7px 0;border:0;background:none;color:var(--testo);font:inherit;font-size:13px;outline:none}
.tdb-guscio{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start;margin-top:14px}
.tdb-elenco{max-height:760px;overflow-y:auto;padding:6px;border:1px solid var(--bordo);border-radius:6px;background:var(--pannello2)}
.tdb-gruppo{margin:8px 8px 4px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--debole)}
.tdb-voci{list-style:none;margin:0;padding:0}
.tdb-voce{
  display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:4px;cursor:pointer;
  background:none;color:var(--testo);font:inherit;font-size:13px;text-align:left;
}
.tdb-voce:hover{background:var(--pannello)}
.tdb-voce:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.tdb-voce-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdb-voce small{font-size:11px;color:var(--debole);font-variant-numeric:tabular-nums}
.tdb-voce.scelta{background:var(--accento-velo);box-shadow:inset 3px 0 0 var(--accento)}
.tdb-vuoto{margin:8px;font-size:12.5px;color:var(--tenue)}
.tdb-destra{display:grid;gap:12px;min-width:0}
.tdb-indietro{display:none}
.tdb-grafo{display:flex;justify-content:center;overflow:hidden;padding:6px;border:1px solid var(--bordo);border-radius:6px;background:var(--pannello2)}
.tdb-grafo svg{display:block;max-width:100%;height:auto}
.tdb-linea{fill:none;stroke:var(--c);stroke-width:1.6;opacity:.8}
.tdb-linea.logica{stroke-dasharray:5 4}
.tdb-punta{fill:var(--c)}
.tdb-nodo rect{fill:var(--pannello);stroke:var(--c);stroke-width:1.4;transition:fill .15s}
.tdb-nodo.cat-esterna rect{stroke-dasharray:3 2}
.tdb-nodo text,.tdb-centro text{font-family:var(--carattere);text-anchor:middle}
.tdb-nodo text{fill:var(--c);font-weight:600}
.tdb-nodo.apribile{cursor:pointer}
.tdb-nodo.apribile:hover rect{fill:color-mix(in srgb,var(--c) 16%,var(--pannello))}
.tdb-nodo:focus{outline:none}
.tdb-nodo:focus-visible rect{stroke-width:3}
.tdb-centro rect{fill:var(--c)}
.tdb-centro text{fill:#fff;font-weight:700}
.tdb-nessuno{fill:var(--tenue);text-anchor:middle;font-family:var(--carattere)}
.tdb-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:11.5px;color:var(--tenue)}
.tdb-legenda li{display:inline-flex;align-items:center;gap:7px}
.tdb-legenda line{stroke:var(--tenue);stroke-width:1.6}
.tdb-legenda line.logica{stroke-dasharray:5 4}
.tdb-legenda path{fill:var(--tenue)}
.tdb-scheda{padding:14px 15px;border:1px solid var(--bordo);border-radius:6px;background:var(--pannello2)}
.tdb-scheda-testa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.tdb-scheda-testa code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;font-weight:700;overflow-wrap:anywhere}
.tdb-pillola{display:inline-flex;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent)}
.tdb-funzione{margin:8px 0 0;font-size:13.5px;line-height:1.55}
.tdb-numeri{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;font-size:12px;color:var(--tenue)}
.tdb-numeri b{color:var(--testo);font-variant-numeric:tabular-nums}
.tdb-motivo{margin:6px 0 0;font-size:12px;font-style:italic;color:var(--tenue)}
.tdb-sottotitolo{margin:14px 0 6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.tdb-rel-elenco,.tdb-file{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.tdb-rel{
  display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:7px 10px;
  border:1px solid var(--bordo);border-radius:5px;background:var(--pannello);color:var(--testo);font:inherit;text-align:left;
}
button.tdb-rel{cursor:pointer;transition:border-color .15s}
button.tdb-rel:hover{border-color:var(--c)}
button.tdb-rel:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.tdb-rel-dir{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.tdb-rel-dir svg{width:14px;height:14px}
.tdb-rel-nome{min-width:0}
.tdb-rel-nome b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;overflow-wrap:anywhere}
.tdb-rel-nome small{display:block;font-size:11px;color:var(--tenue);overflow-wrap:anywhere}
.tdb-rel-nome small.tdb-rel-esterna{color:var(--c)}
.tdb-rel-tipo{padding:1px 8px;border:1px dashed var(--bordo-forte);border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--tenue)}
.tdb-rel-tipo.fk{border-style:solid;color:var(--testo)}
.tdb-file code{font-size:12px;color:var(--tenue);overflow-wrap:anywhere}
/* i campi della tabella (03/10/2026): righe in un solo riquadro; la chiave primaria velata di rosso con la chiave; il tipo
   accanto al nome, sotto la frase "a cosa serve"; a destra i segni: chiave primaria, numero automatico e la tabella a cui
   punta (bordo pieno = vincolo del database, tratteggiato = dal codice; si tocca per aprirla) */
.tdb-campi{margin:0;padding:0;list-style:none;border:1px solid var(--bordo);border-radius:5px;background:var(--pannello);overflow:hidden}
.tdb-campo{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:3px 9px;padding:7px 10px;border-top:1px solid var(--bordo)}
.tdb-campo:first-child{border-top:0}
.tdb-campo.pk{background:var(--accento-velo)}
.tdb-campo-icona{display:grid;place-items:center;width:18px;height:18px;color:var(--accento-testo)}
.tdb-campo-icona svg{width:15px;height:15px}
.tdb-campo-nome{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.tdb-campo-nome code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;font-weight:600;overflow-wrap:anywhere}
.tdb-campo.pk .tdb-campo-nome code{font-weight:800}
.tdb-campo-nome small{font-size:11px;color:var(--tenue)}
.tdb-campo-segni{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 6px}
.tdb-campo-desc{grid-column:2 / -1;margin:0;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.tdb-segno{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border:1px solid var(--bordo-forte);border-radius:999px;background:none;color:var(--tenue);font:inherit;font-size:10.5px;font-weight:700;white-space:nowrap}
.tdb-segno.pk{border-color:var(--accento);color:var(--accento-testo);font-size:10px;letter-spacing:.05em;text-transform:uppercase}
.tdb-segno.rif{border-style:dashed;border-color:color-mix(in srgb,var(--c) 55%,transparent);color:var(--c);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;white-space:normal;overflow-wrap:anywhere}
.tdb-segno.rif.fk{border-style:solid}
.tdb-segno.rif small{font-size:inherit;opacity:.75}
.tdb-segno svg{flex:none;width:11px;height:11px}
button.tdb-segno{cursor:pointer;transition:background .15s}
button.tdb-segno:hover{background:color-mix(in srgb,var(--c) 14%,transparent)}
button.tdb-segno:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
@media (pointer:coarse){.tdb-filtro{min-height:38px}}
@container (max-width:639px){
  .tdb-corpo{padding:14px 14px 16px}
  .tdb-guscio{display:block}
  .tdb[data-vista="elenco"] .tdb-destra{display:none}
  .tdb[data-vista="pannello"] .tdb-elenco{display:none}
  .tdb-elenco{max-height:none;padding:4px}
  .tdb-voce{min-height:44px;font-size:14px}
  .tdb-cerca{max-width:none;margin-left:0}
  .tdb-indietro{display:inline-flex;align-items:center;gap:4px;min-height:40px;color:var(--accento-testo);font-size:15px;font-weight:600;text-decoration:none}
  .tdb-rel{grid-template-columns:24px minmax(0,1fr)}
  .tdb-rel-tipo{grid-column:2;justify-self:start}
  .tdb-campo{grid-template-columns:18px minmax(0,1fr)}
  .tdb-campo-segni{grid-column:2;justify-content:flex-start}
  button.tdb-segno{min-height:30px}
}

/* ---------- Impostazioni > Setup (Admin/Setup.aspx): a pannelli ----------
   Variante A scelta dall'utente il 19/09/2026: a sinistra l'elenco delle sezioni in tre gruppi, ognuna con il pallino
   e la riga del suo stato; a destra solo la sezione aperta (.setup-area.attiva). Il contenitore misura se stesso:
   sotto i 760px (telefono, o menu esteso su un tablet in verticale) si vede o l'elenco (data-vista="elenco") o la
   sezione, a tutta larghezza, con "< Setup" per tornare. La soglia e' anche nello script della pagina. */
.setup-pannelli{container-type:inline-size}
.setup-guscio{display:grid;grid-template-columns:262px minmax(0,1fr);gap:20px;align-items:start}
.setup{min-width:0}
.setup > .riquadro{margin-bottom:0}
.setup-pannelli .setup-area:not(.attiva){display:none}
.setup-area > h2:focus{outline:none}
.setup-indietro{display:none}

.setup-nav{
  position:sticky;top:calc(var(--testata) + 14px);max-height:calc(100vh - var(--testata) - 28px);overflow-y:auto;
  padding:8px;border:1px solid var(--bordo);border-radius:6px;background:var(--pannello);
}
.setup-gruppo + .setup-gruppo{margin-top:4px}
.setup-gruppo-titolo{margin:0;padding:10px 10px 5px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--debole)}
.setup-voci{list-style:none;margin:0;padding:0}
.setup-voce{
  position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:8px 10px;border-radius:5px;
  color:var(--testo);text-decoration:none;transition:background-color .15s;
}
.setup-voce:hover{background:var(--pannello2)}
.setup-voce:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.setup-voce-icona{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pannello2);color:var(--tenue);transition:background-color .15s,color .15s}
.setup-voce-icona svg{width:17px;height:17px}
.setup-voce-testo{flex:1;min-width:0}
.setup-voce-testo b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.setup-voce-stato{display:flex;align-items:center;gap:6px;min-width:0;margin-top:2px;font-size:11.5px;color:var(--tenue)}
.setup-voce-stato > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setup-punto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--debole)}
.setup-voce-stato.ok .setup-punto{background:var(--successo)}
.setup-voce-stato.avvisa .setup-punto{background:var(--pos-ambra)}
.setup-voce-stato.no .setup-punto{background:var(--pericolo)}
.setup-voce-stato.no{color:var(--pericolo)}
.setup-voce-stato.pulsa .setup-punto{animation:setup-pulsa 1.4s ease-out infinite}
.setup-voce.attiva{background:var(--accento-velo)}
.setup-voce.attiva::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accento)}
.setup-voce.attiva .setup-voce-icona{background:var(--accento);color:#fff}
.setup-voce-freccia{display:none;flex:none;width:16px;height:16px;color:var(--debole)}

@container (max-width:759px){
  .setup-guscio{display:block}
  .setup-pannelli[data-vista="elenco"] .setup{display:none}
  .setup-pannelli[data-vista="pannello"] .setup-nav{display:none}
  /* l'elenco come le impostazioni del telefono: gruppi di righe dentro una scheda, con la freccia */
  .setup-nav{position:static;max-height:none;overflow:visible;padding:0;border:0;background:none}
  .setup-gruppo + .setup-gruppo{margin-top:8px}
  .setup-gruppo-titolo{padding:10px 4px 7px}
  .setup-voci{border:1px solid var(--bordo);border-radius:10px;background:var(--pannello);overflow:hidden}
  .setup-voci li + li{border-top:1px solid var(--bordo)}
  .setup-voce{min-height:60px;padding:11px 12px;border-radius:0}
  .setup-voce-testo b{font-size:15px}
  .setup-voce-stato{font-size:12.5px}
  .setup-voce.attiva{background:none}
  .setup-voce.attiva::before{display:none}
  .setup-voce.attiva .setup-voce-icona{background:var(--pannello2);color:var(--tenue)}
  .setup-voce-freccia{display:block}
  .setup-indietro{
    display:inline-flex;align-items:center;gap:4px;min-height:40px;margin:0 0 10px;padding:4px 8px 4px 0;
    color:var(--accento-testo);font-size:15px;font-weight:600;text-decoration:none;
  }
}
@media (prefers-reduced-motion:reduce){.setup-voce-stato.pulsa .setup-punto{animation:none}}
.setup-corpo{padding:18px 20px 20px}
.setup-corpo .campo{margin-top:16px}
.setup-corpo .azioni-form{margin-top:20px}
/* stato: verde aperto, rosso in manutenzione con la spia che pulsa */
.setup-stato{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:var(--raggio);border:1px solid var(--successo-bordo);background:var(--successo-velo)}
.setup-stato b{display:block;font-size:15px;color:var(--successo)}
.setup-stato small{display:block;margin-top:2px;font-size:12.5px;color:var(--tenue)}
.setup-spia{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:var(--successo)}
.setup-stato.attiva{border-color:var(--pericolo-bordo);background:var(--pericolo-velo)}
.setup-stato.attiva b{color:var(--pericolo)}
.setup-stato.attiva .setup-spia{background:var(--pericolo);animation:setup-pulsa 1.4s ease-out infinite}
/* ambra: funziona ma c'e' qualcosa da guardare (intelligenza artificiale: l'ultima prova non e' riuscita) */
.setup-stato.avvisa{border-color:color-mix(in srgb,var(--pos-ambra) 45%,transparent);background:color-mix(in srgb,var(--pos-ambra) 11%,transparent)}
.setup-stato.avvisa b{color:var(--pos-ambra)}
.setup-stato.avvisa .setup-spia{background:var(--pos-ambra)}
@keyframes setup-pulsa{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pericolo) 60%,transparent)}75%,100%{box-shadow:0 0 0 10px transparent}}
.setup-descrizione{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--tenue)}
.setup-corpo .avviso{margin:14px 0 0}
.setup-interruttore .interruttore{font-size:14px;font-weight:600}
.setup-corpo textarea{resize:vertical;min-height:74px}
.setup-aiuto{font-size:12px;color:var(--debole)}
.setup-creatori{margin-top:16px;font-size:12px;color:var(--tenue)}
.setup-creatori > b{display:block;margin-bottom:7px;font-weight:600}
.setup-persone{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.setup-persone li{padding:3px 10px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello2);font-size:12.5px;color:var(--testo)}
.setup-vuoto{color:var(--pericolo)}
@media (prefers-reduced-motion:reduce){.setup-stato.attiva .setup-spia{animation:none}}

/* --- Setup: accesso al sito (reti e paesi autorizzati) --- */
/* la tua connessione: indirizzo, provenienza ed esito */
.acc-io{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--raggio);border:1px solid var(--successo-bordo);background:var(--successo-velo)}
.acc-io.no{border-color:var(--pericolo-bordo);background:var(--pericolo-velo)}
.acc-io-icona{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--pannello);color:var(--successo);box-shadow:0 0 0 1px var(--successo-bordo)}
.acc-io.no .acc-io-icona{color:var(--pericolo);box-shadow:0 0 0 1px var(--pericolo-bordo)}
.acc-io-testo{flex:1;min-width:0}
.acc-io-testo small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.acc-io-testo b{display:block;margin:1px 0;font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:17px;overflow-wrap:anywhere}
.acc-io-testo span{display:block;font-size:13px;color:var(--testo)}
.acc-io-esito{flex:none;text-align:right}
.acc-io-esito b{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;background:var(--successo);color:#fff;font-size:12.5px;font-weight:700}
.acc-io-esito b::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.acc-io.no .acc-io-esito b{background:var(--pericolo)}
.acc-io-esito small{display:block;margin-top:5px;font-size:12px;color:var(--tenue)}
/* le due sezioni: numero, titolo e interruttore; quella che conta davvero si accende di rosso */
.acc-sezioni{display:grid;gap:16px;margin-top:16px;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));align-items:start}
.acc-sezione{min-width:0;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.acc-sezione.accesa{border-color:color-mix(in srgb,var(--accento) 60%,var(--bordo));box-shadow:0 0 0 1px color-mix(in srgb,var(--accento) 30%,transparent) inset,0 10px 24px -18px rgba(218,2,25,.6)}
.acc-testa{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.acc-numero{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--bordo);color:var(--testo);font-weight:700;font-size:13px;transition:background-color .25s,color .25s}
.acc-sezione.accesa .acc-numero{background:var(--accento);color:#fff}
.acc-titolo{flex:1;min-width:0}
.acc-titolo b{display:block;font-size:14.5px}
.acc-titolo small{display:block;margin-top:1px;font-size:12.5px;line-height:1.4;color:var(--tenue)}
.acc-interruttore{flex:none;font-weight:600}
/* reti */
.acc-reti{list-style:none;margin:0;padding:0}
.acc-rete{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--bordo)}
.acc-rete-icona{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:9px;background:var(--accento-velo);color:var(--accento-testo)}
.acc-rete.spenta .acc-rete-icona{background:var(--pannello2);color:var(--debole)}
.acc-rete.spenta .acc-rete-testo{opacity:.62}
.acc-rete.tua{box-shadow:inset 3px 0 0 var(--successo)}
.acc-rete-testo{flex:1;min-width:0}
.acc-cidr{display:inline-block;padding:1px 8px;border-radius:5px;border:1px solid var(--bordo);background:var(--pannello2);font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:13px;color:var(--testo);overflow-wrap:anywhere}
.acc-rete-testo b{display:block;margin-top:4px;font-size:13.5px;overflow-wrap:anywhere}
.acc-rete-testo small{display:block;font-size:12px;color:var(--debole)}
.acc-pillole{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.acc-pillola{padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.acc-pillola.tua{border:1px solid var(--successo-bordo);background:var(--successo-velo);color:var(--successo)}
.acc-pillola.spenta{border:1px solid var(--bordo);background:var(--pannello2);color:var(--debole)}
.acc-azioni{display:flex;flex:none;gap:6px}
.acc-vuoto{margin:0;padding:18px 16px;text-align:center;font-size:13px;color:var(--debole)}
.acc-barra{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}
.acc-modulo{padding:16px;border-top:1px dashed var(--bordo-forte);background:var(--pannello2)}
.acc-modulo h3{margin:0 0 12px;font-size:14px}
.acc-modulo .campo-flag{margin-top:12px}
.acc-modulo .azioni-form{margin-top:14px}
.acc-campo-cidr{font-family:Consolas,"SFMono-Regular",Menlo,monospace !important}
/* paesi */
.acc-nota{margin:12px 16px 0;padding:9px 12px;border-radius:var(--raggio);border:1px solid color-mix(in srgb,var(--accento2) 38%,transparent);background:color-mix(in srgb,var(--accento2) 10%,transparent);font-size:12.5px;line-height:1.45}
.acc-paesi{padding:12px 16px 6px;transition:opacity .25s}
.acc-paesi.spento{opacity:.6}
.acc-scelti{margin-bottom:10px}
.acc-scelti > b{display:block;margin-bottom:6px;font-size:13px}
.acc-chips{display:flex;flex-wrap:wrap;gap:5px;max-height:132px;overflow:auto}
.acc-chips:empty{display:none}
.acc-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accento) 50%,transparent);background:var(--accento-velo);color:var(--testo);font:inherit;font-size:12px;cursor:pointer;transition:background-color .15s,color .15s}
.acc-chip svg{color:var(--accento-testo)}
.acc-chip:hover{background:var(--accento);color:#fff}
.acc-chip:hover svg,.acc-chip:hover .acc-sigla{color:#fff}
.acc-chip:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.acc-sigla{display:inline-grid;place-items:center;flex:none;min-width:27px;height:19px;padding:0 4px;border-radius:5px;border:1px solid var(--bordo);background:var(--pannello2);color:var(--tenue);font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:10.5px;font-weight:700;letter-spacing:.04em}
.acc-chip .acc-sigla{border-color:transparent;background:var(--accento);color:#fff}
.acc-cerca{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 12px;border:1px solid var(--bordo);border-radius:999px;background:var(--sfondo);color:var(--debole);transition:border-color .15s,box-shadow .15s}
.acc-cerca:focus-within{border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.acc-cerca input,.acc-cerca input:hover,.acc-cerca input:focus{flex:1;min-width:0;height:38px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--testo);font:inherit;outline:none}
.acc-continenti{display:grid;gap:8px;max-height:560px;overflow:auto;padding:2px 4px 2px 0;margin-bottom:10px;overscroll-behavior:contain}
.acc-continente{border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello)}
.acc-continente.con-scelti{border-color:color-mix(in srgb,var(--accento) 40%,var(--bordo))}
.acc-continente > summary{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 12px;cursor:pointer;list-style:none;user-select:none}
.acc-continente > summary::-webkit-details-marker{display:none}
.acc-continente > summary:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px;border-radius:var(--raggio)}
.acc-freccia{flex:none;color:var(--debole);transition:transform .2s}
.acc-continente[open] .acc-freccia{transform:rotate(90deg)}
.acc-continente-nome{flex:1;min-width:0;font-size:13.5px}
.acc-continente-conta{font-size:12px;font-variant-numeric:tabular-nums;color:var(--debole)}
.acc-continente.con-scelti .acc-continente-conta{font-weight:700;color:var(--accento-testo)}
/* "tutto il continente": pillola con la casella disegnata (spuntata, vuota o a meta') */
.acc-tutto{position:relative;display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 6px;border-radius:999px;border:1px solid var(--bordo);font-size:12px;font-weight:600;color:var(--tenue);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.acc-tutto:hover{border-color:var(--accento);color:var(--testo)}
.acc-tutto input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.acc-tutto-segno{position:relative;flex:none;width:18px;height:18px;border-radius:5px;border:2px solid var(--bordo-forte);background:var(--sfondo);transition:background-color .15s,border-color .15s}
.acc-tutto:has(input:checked){border-color:var(--accento);background:var(--accento-velo);color:var(--testo)}
.acc-tutto input:checked + .acc-tutto-segno{border-color:var(--accento);background:var(--accento)}
.acc-tutto input:checked + .acc-tutto-segno::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.acc-tutto input:indeterminate + .acc-tutto-segno{border-color:var(--accento)}
.acc-tutto input:indeterminate + .acc-tutto-segno::after{content:"";position:absolute;left:2px;right:2px;top:6px;height:2px;border-radius:1px;background:var(--accento)}
.acc-tutto input:focus-visible + .acc-tutto-segno{outline:2px solid var(--accento2);outline-offset:2px}
.acc-tutto:has(input:disabled){cursor:default;opacity:.6}
.acc-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:4px;padding:2px 10px 10px}
.acc-paese{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border-radius:8px;border:1px solid transparent;font-size:13px;cursor:pointer;user-select:none;transition:background-color .15s,border-color .15s}
.acc-paese:hover{background:var(--pannello2)}
.acc-paese input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.acc-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-spunta{flex:none;opacity:0;color:var(--accento-testo);transition:opacity .15s}
.acc-paese:has(input:checked){border-color:color-mix(in srgb,var(--accento) 45%,transparent);background:var(--accento-velo)}
.acc-paese:has(input:checked) .acc-sigla{border-color:var(--accento);background:var(--accento);color:#fff}
.acc-paese:has(input:checked) .acc-spunta{opacity:1}
.acc-paese:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:1px}
.acc-paese:has(input:disabled){cursor:default}
/* database IP-paesi e fonte */
.acc-geo{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--bordo);background:var(--pannello2)}
.acc-geo-icona{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;background:var(--pannello);color:var(--tenue)}
.acc-geo-testo{flex:1;min-width:0;font-size:12.5px;line-height:1.45}
.acc-geo-testo small{display:block;margin-top:2px;font-size:11.5px;color:var(--debole)}
.acc-geo-testo a{color:var(--accento-testo)}
.acc-salva{align-items:center}
.acc-modifiche{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--pericolo)}
.acc-modifiche::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:setup-pulsa 1.4s ease-out infinite}
/* indirizzi bloccati: a tutta larghezza, soglie del blocco automatico in una frase, due colonne (bloccati e tentativi) */
.acc-bloccati{grid-column:1/-1}
.acc-soglia{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 16px;border-bottom:1px solid var(--bordo);font-size:13.5px;transition:opacity .25s}
.acc-soglia.spento{opacity:.55}
.acc-soglia-icona{flex:none;color:var(--accento-testo)}
.acc-soglia input[type=number],.acc-blocca input[type=text]{
  min-width:0;padding:8px 11px;border-radius:3px;border:1px solid var(--bordo);background:var(--sfondo);color:var(--testo);font:inherit;
}
.acc-soglia input.acc-campo-numero{width:86px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.acc-bloccati-colonne{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));background:var(--bordo)}
.acc-bloccati-colonna{min-width:0;background:var(--pannello)}
.acc-sottotitolo{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px 8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.acc-pallino{flex:none;width:8px;height:8px;border-radius:50%;background:var(--debole)}
.acc-pallino.rosso{background:var(--pericolo);box-shadow:0 0 0 3px var(--pericolo-velo)}
.acc-ip .acc-rete-icona{background:var(--pannello2);color:var(--tenue)}
.acc-ip.bloccato .acc-rete-icona{background:var(--pericolo-velo);color:var(--pericolo)}
.acc-ip.gia-bloccato .acc-rete-testo{opacity:.62}
.acc-luogo{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-size:12.5px;color:var(--testo);vertical-align:middle}
.acc-rete-testo small.acc-percorso{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:11px}
.acc-pillola.bloccato{border:1px solid var(--pericolo-bordo);background:var(--pericolo-velo);color:var(--pericolo)}
.acc-blocca{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-top:1px dashed var(--bordo-forte);background:var(--pannello2)}
.acc-blocca input{flex:1 1 180px;min-width:0}
.acc-blocca .campo-errore{flex-basis:100%}
@media (max-width:560px){
  .acc-io{flex-wrap:wrap}
  .acc-io-esito{width:100%;text-align:left}
  .acc-testa{flex-wrap:wrap;align-items:flex-start}
  .acc-titolo{flex:1 1 calc(100% - 42px)}
  .acc-interruttore{margin-left:42px}
  /* rete a scheda: comandi in cima a destra, testi a tutta larghezza */
  .acc-rete{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pillole azioni" "testo testo";gap:8px}
  .acc-rete-icona{display:none}
  .acc-rete-testo{grid-area:testo}
  .acc-pillole{grid-area:pillole;justify-content:flex-start}
  .acc-azioni{grid-area:azioni}
  .acc-geo{flex-wrap:wrap}
  .acc-griglia{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  /* continente: "Tutto il continente" va a capo sotto il nome invece di coprirlo */
  .acc-continente > summary{flex-wrap:wrap;row-gap:6px}
  .acc-continente-nome{flex:1 0 auto}
  .acc-tutto{margin-left:26px}
}
@media (prefers-reduced-motion:reduce){.acc-modifiche::before{animation:none}}

/* ---------- Report > Personale Effe Pi (Report/Personale.aspx) ---------- */
.personale-reparto .riquadro-testata b{color:var(--testo);font-size:13.5px}
.personale{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));padding:16px 20px}
.persona{position:relative;display:flex;align-items:flex-start;gap:14px;padding:14px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--sfondo);min-width:0;transition:border-color .2s,transform .2s}
.persona:hover{border-color:var(--accento);transform:translateY(-2px)}
.persona-foto{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--accento);background:var(--pannello2)}
.persona-testo{flex:1;min-width:0;padding-right:4px}
.persona-testo > b{display:block;font-size:14.5px;letter-spacing:-.01em;overflow-wrap:anywhere}
.persona-ruolo{display:block;margin:2px 0 8px;font-size:12px;color:var(--accento-testo);font-weight:600}
.persona-recapiti{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px;color:var(--tenue)}
.persona-recapiti li{display:flex;align-items:flex-start;gap:7px;min-width:0}
.persona-recapiti svg{flex:none;margin-top:2px;color:var(--debole)}
/* l'e-mail va a capo invece di tagliarsi */
.persona-recapiti a{color:inherit;overflow-wrap:anywhere;min-width:0}
.persona-recapiti a:hover{color:var(--accento-testo)}
/* interno: pulsante verde a pillola con la cornetta e il numero grande, si capisce che si preme per chiamare.
   Il numero resta nel colore del testo (leggibile anche nel tema scuro), il verde sta su bordo, velo e cornetta */
.persona-recapiti li.persona-tel{margin-top:6px;align-items:center}
.persona-recapiti .persona-interno{
  display:inline-flex;align-items:center;gap:9px;max-width:100%;min-height:38px;padding:4px 16px 4px 4px;
  border:1.5px solid var(--verde);border-radius:999px;background:rgba(30,158,87,.10);background:color-mix(in srgb,var(--verde) 10%,transparent);
  color:var(--testo);font-size:17px;font-weight:700;line-height:1.1;letter-spacing:.03em;font-variant-numeric:tabular-nums;
  text-decoration:none;transition:background-color .15s,box-shadow .15s,transform .15s;
}
.persona-interno .cornetta{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--verde);color:#fff}
.persona-recapiti .persona-interno svg{margin:0;color:inherit}
.persona-interno .numero{min-width:0;overflow-wrap:anywhere}
.persona-recapiti a.persona-interno:hover{color:var(--testo);background:rgba(30,158,87,.20);background:color-mix(in srgb,var(--verde) 20%,transparent);box-shadow:0 0 0 1px var(--verde) inset}
.persona-recapiti a.persona-interno:active{transform:scale(.97)}
.persona-recapiti a.persona-interno:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
@media (pointer:coarse){.persona-recapiti .persona-interno{min-height:44px}.persona-interno .cornetta{width:34px;height:34px}}
/* senza interno: niente pulsante, cornetta grigia e trattino */
.persona-recapiti .persona-interno.vuoto{min-height:0;padding:0;border:none;background:none;gap:7px;font-size:12.5px;font-weight:400;color:var(--debole)}
.persona-interno.vuoto svg{width:14px;height:14px}
/* permessi (solo amministratori): FPC verde, FPC ADMIN rosso quando accesi */
.persona-permessi{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.permesso{padding:3px 10px;border-radius:999px;border:1px solid var(--bordo-forte);background:transparent;color:var(--tenue);font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.permesso:hover{border-color:var(--accento);color:var(--testo)}
.permesso.attivo{background:var(--verde);border-color:var(--verde);color:#fff}
.permesso.admin.attivo{background:var(--accento);border-color:var(--accento)}
.permesso[disabled]{opacity:.5;cursor:not-allowed}
.permesso.attivo[disabled]{opacity:.7}
/* finestra di chiamata (componente Live Chat & Talk di 3CX dentro il portale) */
.dialogo-chiamata{width:min(440px,94vw);padding:0;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);color:var(--testo);box-shadow:var(--ombra);overflow:hidden}
.dialogo-chiamata::backdrop{background:rgba(4,20,28,.6)}
.chiamata-testa{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.chiamata-icona{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--verde);color:#fff}
.chiamata-testa > div{flex:1;min-width:0}
.chiamata-testa b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chiamata-testa small{display:block;font-size:11.5px;color:var(--tenue);line-height:1.35}
.chiamata-corpo{min-height:160px;max-height:70vh;overflow:auto;padding:14px;background:#f4f1ea}
.chiamata-corpo call-us{display:block;position:relative}
/* pulsante tondo di 3CX (call-us-phone) che js/personale-chiamata.js preme da solo: centrato nella finestra */
.chiamata-pulsante{display:flex;justify-content:center;padding:4px 0 18px}
.chiamata-attesa,.chiamata-errore{margin:0;padding:24px 8px;text-align:center;font-size:13px;color:#4c5a60}
.chiamata-errore{color:var(--pericolo)}
.chiamata-errore a{color:inherit}
/* chat: pulsante per chiamare la persona interna dal browser (solo agenti, se ha interno e link 3CX Talk) */
.chat-conv-testa .chat-chiama{color:var(--verde)}
.chat-conv-testa .chat-chiama:hover{border-color:var(--verde);background:color-mix(in srgb,var(--verde) 12%,transparent);color:var(--verde)}
/* diagnosi dal vivo della chiamata (?diagnosi=1): stato della connessione WebRTC */
.chiamata-diagnosi{margin:0;padding:8px 10px;border-radius:4px;border:1px dashed #c9c1b1;background:#fff;color:#2b3438;
  font:11px/1.45 Consolas,"SFMono-Regular",Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}

/* modifica in pagina di ruolo, interno e link 3CX (solo amministratori) */
/* le icone di riga della scheda stanno in colonna sul lato destro: in alto la Chat, sotto la matita Modifica dati
   (che sale al primo posto se la Chat non c'e' o e' nascosta). --lato-icona segue la misura di .icona-riga su touch */
.persona{--lato-icona:32px}
@media (max-width:900px),(pointer:coarse){.persona{--lato-icona:38px}}
/* Chat: icona di riga (verde acqua) in alto a destra nella scheda */
.persona-chat{position:absolute;right:10px;top:10px}
.persona:has(.persona-chat) .persona-testo{padding-right:calc(var(--lato-icona) + 10px)}
@media (max-width:560px){.personale{padding:12px}.persona{padding:12px}.persona-foto{width:56px;height:56px}}

/* ---------- Gestione > Info agenti (Gestione/InfoAgenti.aspx, js/info-agenti.js) ---------- */
.gestione-info{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start}
.gestione-info > .riquadro{margin-bottom:0}
@media (max-width:1100px){.gestione-info{grid-template-columns:minmax(0,1fr)}}
.gi-lista{list-style:none;margin:0;padding:0}
.gi-voce{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 22px;border-bottom:1px solid var(--bordo)}
.gi-voce:last-child{border-bottom:none}
.gi-voce::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--accento2)}
.gi-voce.livello-novita::before{background:var(--successo)}
.gi-voce.livello-importante::before{background:var(--accento)}
.gi-voce.attiva{background:var(--pannello2)}
.gi-voce.spenta .gi-voce-testo{opacity:.62}
.gi-voce-testo{flex:1;min-width:0}
.gi-voce-testo b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gi-voce-testo small{display:block;margin:2px 0 6px;font-size:11.5px;color:var(--tenue)}
.gi-voce .azioni-riga{flex:none;gap:6px}
.gi-testo{margin-top:16px}

/* ---------- Opportunita' > Categorie ed eventi (Campionature/Categorie.aspx) ---------- */
.categorie-pagina{display:grid;gap:18px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
@media (max-width:1100px){.categorie-pagina{grid-template-columns:minmax(0,1fr)}}
.cat-ev-lista{list-style:none;margin:0;padding:0}
.cat-ev-voce{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 24px;border-bottom:1px solid var(--bordo)}
.cat-ev-voce:last-child{border-bottom:none}
/* barra a sinistra nel colore dell'etichetta */
.cat-ev-voce::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--tc)}
/* variante B: la barretta diventa la fascia del colore dell'etichetta, larga 12px sul fianco sinistro, come la riga
   della stessa categoria nell'elenco delle opportunita' (le variabili --fascia stanno in cima al foglio). Resta uno
   pseudo-elemento: il contenuto non si sposta (24px di rientro, 12 di fascia) e la riga aperta (.attiva) cambia il
   fondo senza coprirla */
.cat-ev-voce.cat-ev-fascia::before{left:0;top:0;bottom:0;width:12px;border-radius:0;background:var(--fascia-sfumata)}
.cat-ev-voce.attiva{background:var(--pannello2)}
.cat-ev-voce.archiviata .cat-ev-testo{opacity:.62}
.cat-ev-testo{flex:1;min-width:0}
.cat-ev-nome{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-ev-testo small{display:block;margin:2px 0 6px;font-size:11.5px;color:var(--tenue);overflow-wrap:anywhere}
.cat-ev-stati{display:flex;flex-wrap:wrap;gap:4px}
.cat-ev-stati .badge{margin:0}
.cat-ev-voce .azioni-riga{flex:none}
.cat-ev-anteprima{margin:0 0 14px;padding:12px 14px;border:1px dashed var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello2)}
.cat-ev-anteprima .tag-categoria{font-size:12px}
.cat-ev-descrizione,.cat-ev-date{margin-top:14px}
.cat-ev-gruppo{margin:16px 0 0;padding:0;border:none;min-width:0}
.cat-ev-gruppo legend{margin-bottom:8px;padding:0;font-size:12px;color:var(--tenue)}
/* tavolozza: pallini da toccare, quello scelto con l'anello */
.cat-ev-tavolozza{display:flex;flex-wrap:wrap;gap:10px}
.cat-ev-colore{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .15s}
.cat-ev-pallino{width:22px;height:22px;border-radius:50%;background:var(--tc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cat-ev-colore:hover{transform:scale(1.08)}
.cat-ev-colore:has(input:checked){border-color:var(--tc)}
.cat-ev-colore:has(input:checked) .cat-ev-pallino{box-shadow:0 0 0 2px var(--pannello)}
.cat-ev-colore:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
.cat-ev-colore:has(input:disabled){cursor:default;opacity:.55;transform:none}
/* stato: due schede */
.cat-ev-stati-scelta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cat-ev-stato{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px 10px 36px;border:1px solid var(--bordo);border-radius:var(--raggio);cursor:pointer;background:var(--campo-attivo)}
.cat-ev-stato::before{content:"";position:absolute;left:12px;top:12px;width:14px;height:14px;border-radius:50%;border:2px solid var(--bordo-forte)}
.cat-ev-stato b{font-size:13px}
.cat-ev-stato small{font-size:11.5px;color:var(--tenue)}
.cat-ev-stato:has(input:checked){border-color:var(--accento);background:var(--accento-velo)}
.cat-ev-stato:has(input:checked)::before{border-color:var(--accento);background:radial-gradient(circle,var(--accento) 45%,transparent 50%)}
.cat-ev-stato.archiviata:has(input:checked){border-color:var(--bordo-forte);background:var(--pannello2)}
.cat-ev-stato.archiviata:has(input:checked)::before{border-color:var(--tenue);background:radial-gradient(circle,var(--tenue) 45%,transparent 50%)}
.cat-ev-stato:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
.cat-ev-stato:has(input:disabled){cursor:default;opacity:.6}
@media (max-width:560px){.cat-ev-stati-scelta{grid-template-columns:minmax(0,1fr)}}
.etichetta-campo{font-size:12px;color:var(--tenue)}

/* editor: barra degli strumenti + area modificabile */
.editor{border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--sfondo);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.editor:focus-within{border-color:var(--accento);box-shadow:0 0 0 3px var(--accento-velo)}
.editor-strumenti{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.editor-strumenti button{display:grid;place-items:center;min-width:32px;height:32px;padding:0 7px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--tenue);font:inherit;font-size:14px;cursor:pointer}
.editor-strumenti button:hover{background:var(--pannello);color:var(--testo);border-color:var(--bordo)}
.editor-strumenti button.attivo{background:var(--accento-velo);color:var(--accento-testo);border-color:var(--accento)}
.editor-strumenti button:focus-visible{outline:2px solid var(--accento2);outline-offset:1px}
.editor-strumenti .separa{align-self:stretch;width:1px;margin:4px 4px;background:var(--bordo)}
.editor-emoji{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:2px;padding:8px;border-bottom:1px solid var(--bordo);background:var(--pannello)}
.editor-emoji button{border:none;background:transparent;font-size:21px;line-height:1;padding:6px 0;border-radius:6px;cursor:pointer;transition:transform .12s}
.editor-emoji button:hover{background:var(--pannello2);transform:scale(1.18)}
.editor-area{min-height:240px;max-height:62vh;overflow-y:auto;padding:14px 16px;outline:none}
.editor-area.info-testo{font-size:14px;color:var(--testo)}
.editor-area:empty::before{content:attr(data-segnaposto);color:var(--debole);pointer-events:none}
.editor-stato{min-height:22px;padding:4px 12px;border-top:1px solid var(--bordo);font-size:11.5px;color:var(--tenue)}
.editor-stato.errore{color:var(--pericolo)}

/* ---------- Chat (Chat/Default.aspx, js/chat.js) ---------- */
.chat-testata{position:relative}
.chat-badge.nuovo{animation:chat-badge-pulsa .9s ease-out 3}
@keyframes chat-badge-pulsa{0%{box-shadow:0 0 0 0 rgba(218,2,25,.65);transform:scale(1)}40%{transform:scale(1.25)}100%{box-shadow:0 0 0 12px rgba(218,2,25,0);transform:scale(1)}}
/* avviso di nuovo messaggio sulle pagine diverse dalla Chat (js/app.js) */
.avviso-chat{
  position:fixed;top:calc(var(--testata) + 12px);right:16px;z-index:80;display:flex;align-items:flex-start;gap:10px;
  width:min(360px,calc(100vw - 32px));padding:12px 10px 12px 14px;border-radius:12px;background:var(--pannello);color:var(--testo);
  border:1px solid var(--bordo);border-left:4px solid var(--accento);box-shadow:var(--ombra);animation:avviso-chat-entra .35s cubic-bezier(.2,.9,.3,1.2);
  transition:opacity .25s,transform .25s;
}
.avviso-chat.via{opacity:0;transform:translateY(-8px)}
.avviso-chat-icona{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accento);color:#fff}
.avviso-chat a{flex:1;min-width:0;color:inherit;text-decoration:none}
.avviso-chat b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avviso-chat small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;color:var(--tenue)}
.avviso-chat button{flex:none;width:26px;height:26px;border:none;border-radius:50%;background:transparent;color:var(--tenue);font-size:18px;line-height:1;cursor:pointer}
.avviso-chat button:hover{background:var(--pannello2);color:var(--testo)}
@keyframes avviso-chat-entra{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.avviso-chat,.chat-badge.nuovo{animation:none}}
.chat-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--accento);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;
}
.chat{
  --chat-mio:#dff5e6;--chat-mio-testo:#10222b;--chat-suo:var(--pannello);--chat-sfondo:#e9e4d8;
  display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:calc(100vh - var(--testata) - 175px);min-height:480px;
  border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;background:var(--pannello);box-shadow:var(--ombra);
}
html[data-tema="scuro"] .chat{--chat-mio:#0f3f3a;--chat-mio-testo:#efe8d9;--chat-sfondo:#0b0c0f}
.centro:has(.chat:not(.chat-incorporata)) .pagina-testa{margin-bottom:14px}
.centro:has(.chat:not(.chat-incorporata)) .piede{margin-top:16px}
/* "Torna a <pagina>": la pagina da cui si e' aperta la chat (js/app.js). Sta nella testata della pagina,
   accanto al titolo: in cima e ben visibile, senza togliere righe alla conversazione. Alto 40px: si tocca
   comodamente anche nell'app installata, dove il tasto indietro del browser non c'e'. */
.chat-ritorno{
  display:inline-flex;align-items:center;gap:9px;max-width:100%;min-height:40px;margin:0 0 12px;padding:4px 16px 4px 5px;
  border-radius:999px;border:1px solid var(--bordo);background:var(--pannello);color:var(--testo);
  font-size:13.5px;line-height:1.2;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:border-color .18s,color .18s,box-shadow .18s,transform .18s;
}
.chat-ritorno[hidden]{display:none}
.chat-ritorno:hover{border-color:var(--accento);color:var(--accento-testo);box-shadow:0 3px 10px rgba(0,0,0,.12)}
.chat-ritorno:hover .chat-ritorno-icona{transform:translateX(-2px)}
.chat-ritorno:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.chat-ritorno-icona{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accento);color:#fff;transition:transform .18s}
.chat-ritorno-testo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-ritorno-testo b{font-weight:600}
/* toccato: si sta tornando (anche se la pagina di partenza ci mette a rispondere); un secondo tocco non conta */
.chat-ritorno[aria-busy="true"]{opacity:.62;cursor:progress;box-shadow:none}
.chat-ritorno[aria-busy="true"] .chat-ritorno-icona{transform:translateX(-3px)}
.pagina-testa .chat-ritorno{position:absolute;right:0;bottom:10px;margin:0;max-width:min(460px,calc(100% - 120px))}
@media (max-width:560px){
  .pagina-testa .chat-ritorno{bottom:8px;max-width:calc(100% - 96px);font-size:13px}
}
@media (prefers-reduced-motion:reduce){.chat-ritorno,.chat-ritorno-icona{transition:none}}

/* colonna sinistra */
/* min-height:0 su riga, colonna ed elenco: senza, l'elenco si allunga oltre il riquadro invece di scorrere */
.chat-lato{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--bordo);background:var(--pannello)}
.chat-lato-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.chat-io{display:flex;align-items:center;gap:10px;min-width:0}
.chat-io img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--accento)}
.chat-io b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-io small{display:block;font-size:11px;color:var(--tenue)}
.chat-lato-azioni{display:flex;gap:6px}
.chat-cerca{position:relative;padding:10px 12px 6px}
.chat-cerca svg{position:absolute;left:24px;top:50%;transform:translateY(-40%);color:var(--debole);pointer-events:none}
.chat-cerca input{width:100%;padding:8px 10px 8px 34px;border-radius:999px;border:1px solid var(--bordo);background:var(--sfondo);color:var(--testo);font:inherit;font-size:13px}
.chat-schede{display:flex;gap:4px;padding:6px 12px 8px}
.chat-schede button{flex:1;padding:6px 10px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--tenue);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.chat-schede button.attiva{background:var(--accento-velo);border-color:var(--accento);color:var(--accento-testo)}
.chat-elenco{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1 1 0;min-height:0;overscroll-behavior:contain}
.chat-tag{flex:none;margin-right:auto;padding:1px 7px;border-radius:999px;background:var(--accento-velo);color:var(--accento-testo);font-size:10px;font-weight:600;letter-spacing:.02em}
.chat-entra{flex:none;padding:1px 9px;border-radius:999px;border:1px solid var(--verde);color:var(--verde);font-size:11px;font-weight:600}
.chat-sezione{padding:10px 16px 4px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--debole)}
.chat-voce{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-left:3px solid transparent;transition:background-color .15s}
.chat-voce:hover{background:var(--pannello2)}
.chat-voce.attiva{background:var(--pannello2);border-left-color:var(--accento)}
.chat-voce-testo{flex:1;min-width:0}
.chat-voce .riga{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.chat-voce b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-voce time{font-size:11px;color:var(--debole);flex:none}
.chat-voce .ultimo{font-size:12.5px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-voce small{font-size:11px;color:var(--debole);flex:none}
.chat-voce small.on{color:var(--successo)}
.chat-voce .spunta{font-style:normal;color:var(--accento2)}
.digita-inline{color:var(--successo);font-style:normal}
.chat-nonletti{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accento);color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center}
.chat-vuoto{padding:24px 16px;text-align:center;color:var(--debole);font-size:13px}

/* avatar */
.chat-avatar{
  position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:hsl(var(--h,200) 45% 40%);color:#fff;font-size:13px;font-weight:700;letter-spacing:.03em;
}
.chat-avatar.gruppo{background:linear-gradient(135deg,var(--accento),var(--accento2))}
.chat-avatar .online{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--successo);border:2px solid var(--pannello)}
.chat-avatar.deal{background:linear-gradient(135deg,var(--verde),var(--accento2))}

/* stanza */
.chat-stanza{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--chat-sfondo);background-image:var(--trama)}
.chat-benvenuto{margin:auto;text-align:center;padding:40px 24px;color:var(--tenue);max-width:46ch}
.chat-benvenuto-icona{display:inline-grid;place-items:center;width:110px;height:110px;margin-bottom:18px;border-radius:50%;background:var(--pannello);color:var(--accento-testo);box-shadow:var(--ombra)}
.chat-benvenuto h2{margin:0 0 8px;font-size:22px;color:var(--testo)}
.chat-benvenuto p{margin:0;font-size:14px}
.chat-conv{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-conv-testa{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--bordo);
  background:color-mix(in srgb,var(--pannello) 88%,transparent);backdrop-filter:blur(10px);
}
.chat-conv-chi{flex:1;min-width:0}
.chat-conv-chi b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-conv-chi small{display:block;font-size:11.5px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-conv-chi small.on{color:var(--successo)}
.chat-indietro{display:none}
.chat-scollegata .chat-conv-testa::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:repeating-linear-gradient(90deg,var(--accento) 0 12px,transparent 12px 24px);animation:chat-scorri 1s linear infinite}
@keyframes chat-scorri{to{background-position:24px 0}}

.chat-messaggi{flex:1;overflow-y:auto;padding:14px 18px 8px;scroll-behavior:smooth;overscroll-behavior:contain}
.chat-caricamento{display:flex;justify-content:center;padding:8px}
.chat-caricamento .spin{width:18px;height:18px;border:2px solid var(--bordo);border-top-color:var(--accento);border-radius:50%;animation:gira .7s linear infinite}
.chat-giorno{display:flex;justify-content:center;margin:12px 0}
.chat-giorno span{padding:4px 12px;border-radius:999px;background:var(--pannello);color:var(--tenue);font-size:11.5px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chat-sistema{margin:8px auto;max-width:80%;padding:5px 12px;border-radius:999px;background:var(--pannello);color:var(--tenue);font-size:12px;text-align:center;width:fit-content}
.chat-sistema.errore{color:var(--pericolo);border:1px solid var(--pericolo-bordo)}

/* messaggi come WhatsApp: i miei a destra, quelli degli altri a sinistra con l'avatar di chi scrive */
.chat-msg{display:flex;align-items:flex-start;gap:8px;margin:2px 0;max-width:min(78%,680px);position:relative;animation:chat-entra .18s ease-out}
.chat-msg.mio{margin-left:auto;justify-content:flex-end}
.chat-msg:not(.continua){margin-top:12px}
.chat-msg-avatar{flex:none;width:32px}
.chat-msg-avatar .chat-avatar{width:32px;height:32px;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.chat-msg-avatar .chat-avatar .online{width:10px;height:10px;border-color:var(--chat-sfondo)}
.chat-msg-corpo{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}
.chat-msg.mio .chat-msg-corpo{align-items:flex-end}
.chat-bolla{position:relative;padding:7px 10px 6px;border-radius:12px;background:var(--chat-suo);color:var(--testo);box-shadow:0 1px 2px rgba(0,0,0,.1);min-width:60px;max-width:100%;overflow-wrap:anywhere}
.chat-msg.mio .chat-bolla{background:var(--chat-mio);color:var(--chat-mio-testo)}
/* codina della bolla sul primo messaggio di ogni blocco */
.chat-msg:not(.continua) .chat-bolla::before{content:"";position:absolute;top:0;width:9px;height:13px;background:inherit}
.chat-msg:not(.continua).suo .chat-bolla{border-top-left-radius:0}
.chat-msg:not(.continua).suo .chat-bolla::before{left:-8px;clip-path:polygon(0 0,100% 0,100% 100%)}
.chat-msg:not(.continua).mio .chat-bolla{border-top-right-radius:0}
.chat-msg:not(.continua).mio .chat-bolla::before{right:-8px;clip-path:polygon(0 0,100% 0,0 100%)}
.chat-bolla p{margin:0;font-size:14px;line-height:1.45;padding-right:52px}
.chat-bolla p a{color:var(--accento2);text-decoration:underline}
.chat-mittente{display:block;margin-bottom:2px;padding-right:40px;font-size:12px;font-weight:700;color:hsl(var(--h,200) 60% 38%)}
html[data-tema="scuro"] .chat-mittente{color:hsl(var(--h,200) 70% 68%)}
.chat-ora{position:absolute;right:8px;bottom:4px;font-size:10.5px;color:var(--tenue);display:inline-flex;align-items:center;gap:3px}
.chat-msg.con-media .chat-ora{right:10px;bottom:6px;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff}
.chat-msg.con-media .chat-bolla p{padding-top:6px}
.spunte{font-style:normal;color:var(--debole);letter-spacing:-3px;margin-left:2px}
.spunte.letto{color:var(--accento2)}
.chat-elim{color:var(--debole);font-size:13px}
.chat-cit{margin:0 0 6px;padding:5px 8px 5px 10px;border-left:3px solid var(--accento);border-radius:6px;background:rgba(0,0,0,.06);cursor:pointer;font-size:12.5px}
.chat-cit b{display:block;color:var(--accento-testo);font-size:11.5px}
.chat-cit span{display:block;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
/* max-width in pixel sul collegamento: con la sola percentuale sull'immagine la bolla si allargava fino alla
   larghezza vera della foto e restava una fascia vuota accanto (le foto del telefono sono larghe migliaia di px) */
.chat-foto{display:block;width:fit-content;max-width:360px;margin:-3px -6px 4px;border-radius:9px;overflow:hidden;cursor:zoom-in}
.chat-foto img{display:block;max-width:100%;max-height:360px;object-fit:cover}
/* foto che non si carica piu': una riga tenue al posto dell'icona rotta del browser (js/chat.js) */
.chat-foto.chat-foto-assente{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 0 4px;padding:8px 12px 8px 10px;background:rgba(0,0,0,.05);color:var(--tenue);font-size:13px;text-decoration:none;cursor:pointer}
html[data-tema="scuro"] .chat-foto.chat-foto-assente{background:rgba(255,255,255,.06)}
.chat-foto-assente svg{flex:none}
/* video nella bolla: anteprima ferma con il pulsante play; il lettore si apre nella finestra degli allegati */
.chat-video{position:relative;display:block;width:fit-content;max-width:360px;margin:-3px -6px 4px;border-radius:9px;overflow:hidden;background:#000;color:#fff;cursor:pointer}
.chat-video video{display:block;max-width:100%;max-height:320px;min-width:180px;min-height:110px;object-fit:cover;pointer-events:none}
.chat-video-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:54px;height:54px;margin:-27px 0 0 -27px;padding-left:3px;border-radius:50%;background:rgba(0,0,0,.55);border:1.5px solid rgba(255,255,255,.75);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:transform .15s,background-color .15s}
.chat-video:hover .chat-video-play{transform:scale(1.08);background:rgba(218,2,25,.85)}
.chat-video small{position:absolute;left:8px;bottom:7px;padding:1px 7px;border-radius:999px;background:rgba(0,0,0,.55);font-size:10.5px;font-variant-numeric:tabular-nums}
.chat-foto:focus-visible,.chat-video:focus-visible,.chat-doc:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.chat-audio{display:flex;align-items:center;gap:8px;min-width:240px;padding:4px 0 8px}
.chat-audio svg{color:var(--accento-testo);flex:none}
.chat-audio audio{flex:1;min-width:0;height:36px}
.chat-audio small{font-size:11px;color:var(--tenue)}
.chat-doc{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px 10px 4px;border-radius:8px;color:inherit;text-decoration:none;cursor:pointer;transition:background-color .15s}
.chat-doc:hover{background:rgba(0,0,0,.05)}
html[data-tema="scuro"] .chat-doc:hover{background:rgba(255,255,255,.06)}
.chat-doc svg{color:var(--accento-testo);flex:none}
.chat-doc-audio svg{color:var(--verde)}
/* documento conosciuto (js/tipi-file.js): il foglio con la sigla in piccolo (misure sue, la sigla resta leggibile) */
.chat-doc-foglio{flex:none;display:block;margin-left:10px}
.chat-doc-foglio .doc-foglio{width:32px;height:41px}
.chat-doc-foglio .doc-foglio .doc-carta{filter:none}
.chat-doc-foglio .doc-foglio .doc-segno{right:5px;top:13px;width:12px;height:12px}
.chat-doc-foglio .doc-foglio .doc-sigla{left:-6px;bottom:6px;padding:1px 3px;border-radius:3px;font-size:8.5px;letter-spacing:.02em}
.chat-doc .chat-doc-foglio svg{color:inherit}
.chat-doc b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.chat-doc small{display:block;font-size:11px;color:var(--tenue)}
.chat-reazioni{display:flex;flex-wrap:wrap;gap:4px;margin:-8px 0 0 4px;position:relative;z-index:1}
.chat-msg.mio .chat-reazioni{justify-content:flex-end;margin-right:4px}
.chat-reazioni button{padding:1px 7px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello);font-size:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.chat-reazioni button.mia{border-color:var(--accento2);background:var(--accento-velo)}
.chat-azioni{
  position:absolute;top:-30px;right:0;display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--pannello);border:1px solid var(--bordo);
  box-shadow:var(--ombra);opacity:0;pointer-events:none;transition:opacity .15s;z-index:2;
}
.chat-msg.suo .chat-azioni{right:auto;left:0}
/* col mouse passandoci sopra; col dito (dove l'hover "resta attaccato" dopo il tocco) solo con la classe aperto di js/chat.js */
.chat-msg.aperto .chat-azioni{opacity:1;pointer-events:auto}
@media (hover:hover){.chat-msg:hover .chat-azioni{opacity:1;pointer-events:auto}}
.chat-azioni button{width:28px;height:28px;border:none;border-radius:50%;background:transparent;font-size:15px;cursor:pointer;display:grid;place-items:center;color:var(--tenue)}
.chat-azioni button:hover{background:var(--pannello2);transform:scale(1.15)}
.chat-msg.lampo .chat-bolla{animation:chat-lampo 1.2s}
@keyframes chat-lampo{0%,60%{box-shadow:0 0 0 3px var(--accento2)}100%{box-shadow:0 1px 2px rgba(0,0,0,.1)}}
@keyframes chat-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chat-msg.in-invio .chat-bolla{opacity:.7}
.chat-avanzamento{height:3px;margin-top:6px;border-radius:2px;background:var(--bordo);overflow:hidden}
.chat-avanzamento span{display:block;height:100%;width:0;background:var(--accento);transition:width .15s}

.chat-digita{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:12px;color:var(--tenue)}
.chat-digita .punti{display:inline-flex;gap:3px;padding:8px 10px;border-radius:12px;background:var(--chat-suo);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.chat-digita .punti i{width:6px;height:6px;border-radius:50%;background:var(--tenue);animation:chat-punto 1.2s infinite}
.chat-digita .punti i:nth-child(2){animation-delay:.2s}
.chat-digita .punti i:nth-child(3){animation-delay:.4s}
@keyframes chat-punto{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat-giu{position:absolute;right:20px;bottom:86px;display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello);color:var(--testo);cursor:pointer;box-shadow:var(--ombra);font:inherit;font-size:12px;font-weight:600;z-index:3}
.chat-trascina{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(218,2,25,.12);border:3px dashed var(--accento);font-size:18px;font-weight:600;color:var(--accento-testo);pointer-events:none}

.chat-risposta{display:flex;align-items:center;gap:10px;margin:0 12px;padding:8px 12px;border-left:3px solid var(--accento);border-radius:8px 8px 0 0;background:var(--pannello);font-size:12.5px}
.chat-risposta div{flex:1;min-width:0}
.chat-risposta b{display:block;color:var(--accento-testo);font-size:11.5px}
.chat-risposta span{display:block;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-chiudi{width:26px;height:26px;border:none;border-radius:50%;background:transparent;color:var(--tenue);font-size:18px;cursor:pointer}
.chat-scrivi{position:relative;display:flex;align-items:flex-end;gap:6px;padding:10px 12px;border-top:1px solid var(--bordo);background:color-mix(in srgb,var(--pannello) 92%,transparent);backdrop-filter:blur(10px)}
.chat-scrivi .tondo{width:38px;height:38px;flex:none}
.chat-scrivi textarea{flex:1;min-width:0;max-height:160px;padding:9px 14px;border-radius:19px;border:1px solid var(--bordo);background:var(--sfondo);color:var(--testo);font:inherit;font-size:14px;line-height:1.4;resize:none}
.chat-invia,.chat-vocale{flex:none;width:40px;height:40px;border:none;border-radius:50%;background:var(--accento);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .15s,filter .15s}
.chat-invia:hover,.chat-vocale:hover{transform:scale(1.06);filter:brightness(1.08)}
.chat-vocale.attivo{animation:camp-pulsa 1.4s ease-out infinite}
.solo-mobile{display:none}
.chat-emoji{position:absolute;left:10px;bottom:62px;z-index:4;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:min(340px,calc(100% - 20px));padding:8px;border-radius:12px;background:var(--pannello);border:1px solid var(--bordo);box-shadow:var(--ombra)}
.chat-emoji button{border:none;background:transparent;font-size:22px;line-height:1;padding:5px 0;border-radius:8px;cursor:pointer}
.chat-emoji button:hover{background:var(--pannello2);transform:scale(1.2)}
.chat-registra{position:absolute;inset:6px 12px;z-index:4;display:flex;align-items:center;gap:12px;padding:0 14px;border-radius:24px;background:var(--pannello);border:1px solid var(--accento)}
.chat-registra .punto-rec{width:10px;height:10px;border-radius:50%;background:var(--accento);animation:chat-punto-rec 1s infinite}
@keyframes chat-punto-rec{50%{opacity:.2}}
.chat-registra .onde{display:flex;align-items:center;gap:3px;height:24px;flex:1}
.chat-registra .onde i{display:block;width:4px;height:100%;border-radius:2px;background:linear-gradient(180deg,#ff4b5c,var(--accento));transform:scaleY(.15);transform-origin:center;transition:transform .08s linear}

.chat-dialogo{width:min(460px,92vw);padding:22px 24px;border:1px solid var(--bordo);border-radius:8px;background:var(--pannello);color:var(--testo);box-shadow:var(--ombra)}
.chat-dialogo::backdrop{background:rgba(4,20,28,.6)}
.chat-dialogo h3{margin:0 0 14px;font-size:17px}
.chat-dialogo-info{margin:-4px 0 14px;padding:10px 12px;border-radius:8px;border-left:3px solid var(--verde);background:var(--pannello2);font-size:12.5px;line-height:1.45;color:var(--tenue)}
.chat-dialogo-info b{display:block;margin-bottom:3px;color:var(--testo);font-size:13px}
.chat-dialogo .campo{margin-bottom:12px}
.chat-scelta-membri{list-style:none;margin:0 0 12px;padding:0;max-height:260px;overflow-y:auto;border:1px solid var(--bordo);border-radius:4px}
.chat-scelta-membri label{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--bordo)}
.chat-scelta-membri li:last-child label{border-bottom:none}
.chat-scelta-membri .chat-avatar{width:32px;height:32px;font-size:11px}
.chat-scelta-membri span{font-size:13.5px}
.chat-scelta-membri small{display:block;font-size:11px;color:var(--tenue)}

@media (max-width:900px){
  .chat{grid-template-columns:1fr;height:calc(100vh - var(--testata) - 120px)}
  .chat-stanza{display:none}
  .chat-in-conv .chat-stanza{display:flex}
  .chat-in-conv .chat-lato{display:none}
  .chat-indietro{display:grid}
  .chat-msg{max-width:88%}
  .solo-mobile{display:grid}
}
/* touch: testo dei campi a 16px (sotto i 16px l'iPhone ingrandisce la pagina al tocco del campo) */
@media (pointer:coarse){
  .chat-scrivi textarea{font-size:16px}
  .chat-cerca input{padding:10px 12px 10px 36px;font-size:16px}
}
/* telefono e tablet: il campo per scrivere come nelle app di messaggi. Occupa tutta la riga tranne il pulsante tondo
   di invio/vocale; le emoji stanno dentro il campo a sinistra, allegato e fotocamera a destra e spariscono mentre si
   scrive (classe con-testo messa da js/chat.js), cosi' il testo ha quasi tutta la larghezza */
@media (max-width:900px){
  .chat-cerca input{padding:10px 12px 10px 36px;font-size:16px}
  .chat-scrivi{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"campo invio";align-items:end;column-gap:8px;padding:10px}
  .chat-scrivi textarea{grid-area:campo;min-height:52px;max-height:40vh;padding:14px 92px 14px 48px;border-radius:26px;font-size:17px;line-height:1.35}
  /* "Scrivi un messaggio" su una riga sola anche sugli schermi stretti (altrimenti il campo vuoto e' alto due righe) */
  .chat-scrivi textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chat-scrivi .tondo{grid-area:campo;align-self:end;z-index:1;width:40px;height:40px;margin-bottom:6px;border-color:transparent}
  .chat-scrivi #chatEmojiApri{justify-self:start;margin-left:5px}
  .chat-scrivi label.tondo{justify-self:end;margin-right:5px}
  .chat-scrivi label.tondo:not(.solo-mobile){margin-right:45px}
  /* mentre si scrive resta la graffetta (allega foto e file; sul telefono propone anche la fotocamera), sparisce la
     fotocamera per lasciare spazio al testo */
  .chat-scrivi.con-testo label.solo-mobile{display:none}
  .chat-scrivi.con-testo label.tondo:not(.solo-mobile){margin-right:5px}
  .chat-scrivi.con-testo textarea{padding-right:50px}
  .chat-invia,.chat-vocale{grid-area:invio;width:52px;height:52px}
  .chat-emoji{bottom:80px}
}
/* iPhone e iPad: la regola generale dei campi (piu' in basso) li porta a 16px; qui il campo della chat resta a 17px */
@supports (-webkit-touch-callout:none){
  @media (max-width:900px){.chat-scrivi textarea{font-size:17px !important}}
}
/* telefono: la chat usa tutta la larghezza dello schermo (senza i margini della pagina) */
@media (max-width:560px){
  .chat{margin-left:-18px;margin-right:-18px;border-left:0;border-right:0;border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .chat-msg,.chat-digita .punti i,.chat-vocale.attivo,.chat-registra .punto-rec{animation:none}
}

/* ---------- Pagina non presente (NonDisponibile.aspx) ---------- */
.nd{
  position:relative;overflow:hidden;border:1px solid var(--bordo);border-radius:var(--raggio);
  background:var(--pannello);padding:54px 24px 64px;text-align:center;
}
.nd-nastro{
  position:absolute;left:-10%;right:-10%;height:22px;opacity:.9;
  background:repeating-linear-gradient(-45deg,var(--accento) 0 16px,#10222b 16px 32px);
  background-size:45.25px 45.25px;animation:nd-scorri 1.6s linear infinite;
}
.nd-nastro.alto{top:0;transform:rotate(-1.2deg) translateY(-6px)}
.nd-nastro.basso{bottom:0;transform:rotate(1.2deg) translateY(6px);animation-direction:reverse}

.nd-scena{
  display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,16px);
  font-size:clamp(88px,18vw,168px);font-weight:700;line-height:1;letter-spacing:-.04em;
  color:var(--testo);margin:10px 0 26px;
}
.nd-cifra{display:inline-block;animation:nd-salta 2.4s ease-in-out infinite}
.nd-cifra.dopo{animation-delay:.35s}

.nd-ingranaggi{position:relative;width:.86em;height:.86em;flex:none}
.nd-ingranaggi svg{position:absolute;display:block}
.nd-grande{inset:0;width:100%;height:100%;color:var(--accento);animation:gira 6s linear infinite}
.nd-piccolo{width:46%;height:46%;right:-20%;top:-12%;color:var(--tenue);animation:gira 3.6s linear infinite reverse}
.nd-ingranaggi .foro{fill:var(--pannello)}

.nd-sotto{
  display:inline-block;margin:0 0 16px;padding:4px 12px;border-radius:999px;
  border:1px solid var(--accento);color:var(--accento-testo);font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.nd-testo{max-width:52ch;margin:0 auto 18px;color:var(--tenue);font-size:14.5px}
.nd-richiesta{margin:0 auto 24px;font-size:12.5px;color:var(--debole);overflow-wrap:anywhere}
.nd-richiesta code{color:var(--tenue)}

.nd-lavori{width:min(260px,70%);height:4px;margin:0 auto 28px;border-radius:999px;background:var(--bordo);overflow:hidden}
.nd-lavori span{display:block;width:40%;height:100%;border-radius:inherit;background:var(--accento);animation:nd-avanza 1.8s ease-in-out infinite}

@keyframes nd-salta{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-.08em)}}
@keyframes nd-scorri{to{background-position:45.25px 0}}
@keyframes nd-avanza{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

@media (prefers-reduced-motion:reduce){
  .nd-nastro,.nd-cifra,.nd-grande,.nd-piccolo,.nd-lavori span{animation:none}
}

/* ---------- Tessuti > Catalogo (Tessuti/Catalogo.aspx) ---------- */
/* colori delle fibre nella barra della composizione: sempre gli stessi, cosi' le righe si confrontano a colpo
   d'occhio; la sigla e il nome sono comunque scritti nella legenda */
.t-catalogo{
  --f-pl:#3b7bff;--f-ea:#1e9e57;--f-pa:#d4a017;--f-pp:#8b5cf6;--f-eol:#14b8a6;
  --f-co:#b0875a;--f-wo:#db2777;--f-vi:#0891b2;--f-li:#7c9a82;--f-cf:#475569;--f-altro:#8b9aa1;
}
html[data-tema="scuro"] .t-catalogo{--f-cf:#94a3b8}

/* stati da mostrare (Nuova collezione / Prodotto standard / Disponibile a stock / Fuori catalogo): schede spuntabili come
   quelle della visibilita' in Struttura del menu. Icona nel cerchio, nome e numero di articoli, spunta tonda a destra;
   accese = bordo, cerchio e spunta nel colore dello stato. La casella vera resta nel modulo, invisibile ma raggiungibile
   con la tastiera. La riga e' un contenitore: le regole @container qui sotto guardano lo spazio vero (con o senza menu) */
.cat-stati{container:cat-stati / inline-size;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.cat-stato-scelta{--stato:var(--verde);position:relative;display:flex;flex:1 1 220px;max-width:300px;align-items:center;gap:11px;min-width:0;padding:10px 40px 10px 10px;border:2px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);cursor:pointer;user-select:none;transition:border-color .15s,background-color .15s,transform .15s}
.cat-stato-scelta.nuova{--stato:var(--verde)}
.cat-stato-scelta.standard{--stato:var(--blu)}
.cat-stato-scelta.stock{--stato:#0f8f8a}
.cat-stato-scelta.fuori{--stato:#5c6b74}
.cat-stato-scelta:hover{border-color:var(--stato);transform:translateY(-1px)}
.cat-stato-scelta input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.cat-stato-icona{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pannello2);color:var(--tenue);transition:background-color .15s,color .15s}
.cat-stato-testo{min-width:0}
.cat-stato-testo b{display:block;font-size:13.5px;color:var(--testo)}
.cat-stato-testo small{display:block;font-size:11.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
.cat-stato-spunta{position:absolute;right:10px;top:50%;display:grid;place-items:center;width:22px;height:22px;margin-top:-11px;border:2px solid var(--bordo-forte);border-radius:50%;color:transparent;transition:background-color .15s,border-color .15s,color .15s}
.cat-stato-scelta:has(input:checked){border-color:var(--stato);background:rgba(30,158,87,.08);background:color-mix(in srgb,var(--stato) 9%,var(--pannello))}
.cat-stato-scelta:has(input:checked) .cat-stato-icona{background:var(--stato);color:#fff}
.cat-stato-scelta:has(input:checked) .cat-stato-spunta{background:var(--stato);border-color:var(--stato);color:#fff}
.cat-stato-scelta:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
/* tablet e finestre strette: le schede distese (220px l'una) non stanno piu' in riga, quattro (interni, con il fuori
   catalogo) sotto i 920px e tre (agenti) sotto i 690px. Invece di lasciarne una da sola sotto restano tutte su una riga,
   larghe uguali, con l'icona sopra il nome e la spunta nell'angolo. Una scheda sola (solo nuova collezione) resta distesa */
@container cat-stati (max-width:919px){
  .cat-stati:has(> .cat-stato-scelta.fuori) > .cat-stato-scelta{flex:1 1 0;max-width:none;flex-direction:column;justify-content:flex-start;gap:5px;padding:10px 6px 8px;text-align:center}
  .cat-stati:has(> .cat-stato-scelta.fuori) .cat-stato-testo b{line-height:1.2}
  .cat-stati:has(> .cat-stato-scelta.fuori) .cat-stato-spunta{top:6px;right:6px;width:18px;height:18px;margin-top:0}
}
@container cat-stati (max-width:689px){
  .cat-stati:has(> .cat-stato-scelta:nth-child(3)) > .cat-stato-scelta{flex:1 1 0;max-width:none;flex-direction:column;justify-content:flex-start;gap:5px;padding:10px 6px 8px;text-align:center}
  .cat-stati:has(> .cat-stato-scelta:nth-child(3)) .cat-stato-testo b{line-height:1.2}
  .cat-stati:has(> .cat-stato-scelta:nth-child(3)) .cat-stato-spunta{top:6px;right:6px;width:18px;height:18px;margin-top:0}
}
/* smartphone: schede strette a due a due, icona sopra il nome, niente numero */
@media (max-width:560px){
  .cat-stati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cat-stato-scelta{max-width:none;flex-direction:column;justify-content:center;gap:5px;padding:10px 6px 8px;text-align:center}
  .cat-stato-icona{width:34px;height:34px}
  .cat-stato-testo b{font-size:12px;line-height:1.2}
  .cat-stato-testo small{display:none}
  .cat-stato-spunta{top:6px;right:6px;width:18px;height:18px;margin-top:0}
}

/* etichetta dello stato sull'articolo, accanto al codice */
.cat-riga-codice{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.cat-riga-codice .cat-codice{margin-top:0}
.cat-stato{display:inline-block;padding:2px 7px;border-radius:3px;font-size:9.5px;font-weight:700;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;white-space:nowrap}
.cat-stato.nuova{background:var(--verde);color:#fff}
.cat-stato.standard{background:var(--blu);color:#fff}
.cat-stato.stock{background:#0f8f8a;color:#fff}
.cat-stato.fuori{border:1px solid var(--bordo-forte);color:var(--tenue);padding:1px 6px}
/* prodotto a collezione (Collezione = -1): etichetta bordata rossa con la stellina, accanto allo stato */
.cat-collezione{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border:1px solid color-mix(in srgb,var(--accento-testo) 55%,transparent);border-radius:3px;font-size:9.5px;font-weight:700;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;white-space:nowrap;color:var(--accento-testo)}
.cat-collezione svg{flex:none;fill:currentColor}

/* filtro avanzato: pulsante con il numero di filtri impostati, pannello a scomparsa sopra l'elenco */
.cat-filtri-apri .conta{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accento);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.cat-filtri-apri.attivo{border-color:var(--accento);color:var(--testo)}
.cat-filtri{padding:16px 18px}
/* align-items:start: i riquadri corti (famiglia, collezione) non si allungano fino all'altezza di quello del filato */
/* collezione: tre pillole (Tutti / A collezione / Non a collezione), la radio vera nascosta */
.cat-pillola{position:relative;display:inline-flex;cursor:pointer}
.cat-pillola input{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;pointer-events:none}
.cat-pillola span{display:inline-block;padding:6px 11px;border:1px solid var(--bordo);border-radius:999px;background:var(--pannello);font-size:12.5px;color:var(--tenue);transition:border-color .15s,background-color .15s,color .15s}
.cat-pillola:hover span{border-color:var(--accento)}
.cat-pillola:has(input:checked) span{border-color:var(--accento);background:var(--accento-velo);color:var(--testo);font-weight:600}
.cat-pillola:has(input:focus-visible) span{outline:2px solid var(--accento2);outline-offset:2px}
/* filato: la tendina prende tutta la larghezza, le percentuali stanno sotto.
   Prima c'era una casella di testo con un <datalist>, che Chrome apre solo quando quello che si e' scritto combacia
   gia' con un filato. Ora e' una tendina vera: la casella resta (si puo' sempre scrivere a mano, anche mezza parola,
   per esempio RECYCLED) e accanto c'e' la freccia che apre l'elenco dei filati presenti negli articoli, con il numero
   di articoli di ognuno; scrivendo, l'elenco si filtra ed evidenzia le lettere che combaciano (js/catalogo.js).
   Senza JavaScript l'elenco resta chiuso e la casella funziona come oggi. */
.riquadro.cat-filtri{overflow:visible} /* .riquadro ha overflow:hidden: la tendina ne uscirebbe tagliata */
.cat-filato-combo{position:relative;grid-column:1/-1;display:flex;flex-direction:column;gap:4px;min-width:0;font-size:11px;color:var(--tenue)}
.cat-filato-campo{position:relative;display:flex;min-width:0}
.cat-filato-campo input{width:100%;min-width:0;padding:7px 38px 7px 9px;border-radius:3px;border:1px solid var(--bordo);background:var(--pannello);color:var(--testo);font:inherit;font-size:13px}
.cat-filato-campo input:focus{outline:none;border-color:var(--accento)}
.cat-filato-apri{
  position:absolute;right:1px;top:1px;bottom:1px;width:34px;display:grid;place-items:center;
  border:0;border-left:1px solid var(--bordo);border-radius:0 3px 3px 0;
  background:transparent;color:var(--tenue);cursor:pointer;
}
.cat-filato-apri:hover{color:var(--accento-testo);background:var(--accento-velo)}
.cat-filato-apri:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.cat-filato-apri svg{transition:transform .15s}
.cat-filato-combo.aperta .cat-filato-apri svg{transform:rotate(180deg)}
.cat-filato-elenco{
  position:absolute;left:0;right:0;top:100%;z-index:30;display:none;
  max-height:min(320px,52vh);overflow-y:auto;margin:4px 0 0;padding:4px;list-style:none;
  border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello);
  box-shadow:0 18px 38px -22px rgba(0,0,0,.65);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.cat-filato-combo.aperta .cat-filato-elenco{display:block}
.cat-filato-voce{
  display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 10px;border-radius:3px;
  color:var(--testo);font-size:13px;line-height:1.3;cursor:pointer;
}
.cat-filato-voce > span{flex:1;min-width:0;overflow-wrap:anywhere}
.cat-filato-voce b{flex:none;font-weight:400;font-size:11.5px;color:var(--debole);font-variant-numeric:tabular-nums}
.cat-filato-voce:hover,.cat-filato-voce.sopra{background:var(--accento-velo)}
.cat-filato-voce.sopra b{color:var(--tenue)}
.cat-filato-voce[aria-selected="true"]{font-weight:600;color:var(--accento-testo)}
/* la parte del nome che combacia con quello che si sta scrivendo */
.cat-filato-voce mark{background:color-mix(in srgb,var(--accento) 24%,transparent);color:inherit;border-radius:2px}
.cat-filato-vuoto{padding:14px 10px;text-align:center;color:var(--debole);font-size:12.5px}
/* la voce che toglie il filtro sta in cima, staccata */
.cat-filato-voce.tutti{margin-bottom:3px;border-bottom:1px solid var(--bordo);border-radius:3px 3px 0 0;color:var(--tenue)}
@media (pointer:coarse){
  .cat-filato-voce{min-height:44px}
  .cat-filato-apri{width:42px}
  .cat-filato-campo input{padding-right:46px}
}
/* su smartphone almeno 16px: sotto, iPhone ingrandisce la pagina quando si tocca il campo */
@media (max-width:560px){
  .cat-filato-campo input{font-size:16px}
  .cat-filato-voce{font-size:14.5px}
}
.cat-filtri-piede{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:12px}
.cat-filtri-piede small{color:var(--debole);font-size:12px}
.cat-filtri-piede .bottone:disabled{opacity:.45;cursor:default}

/* elenco: su schermo grande una tabella, sotto i 1000px di spazio schede affiancate (regole in fondo alla sezione) */
.in-ricerca .t-catalogo{opacity:.55;transition:opacity .15s}
table.tabella.t-catalogo td{white-space:normal;overflow:visible;text-overflow:clip}
/* ogni articolo staccato dal successivo: righe piu' ariose e una fascia del colore di fondo pagina tra una e l'altra */
table.tabella.t-catalogo tbody td{padding-top:16px;padding-bottom:16px;border-bottom:12px solid var(--sfondo)}
table.tabella.t-catalogo tbody tr:last-child td{border-bottom:none}
/* due icone (cestino e scheda PDF): 32px l'una, 38px su touch, in un flex (nessun taglio con i puntini) */
.t-catalogo{--c-azioni:112px}
@media (pointer:coarse){.t-catalogo{--c-azioni:120px}}

/* PC (sopra i 1000px di spazio del contenitore): la riga non e' piu' una riga di tabella ma una griglia di due
   fasce. Sopra, incolonnati con l'intestazione, foto, articolo, dati di targa, composizione e icone; sotto, per
   tutta la larghezza della riga, le tre date in piccolo. Prima le date erano una colonna alta e mezza vuota da
   215px: quello spazio adesso va alle tessere di targa e soprattutto ai nomi dei filati, che finivano su tre
   righe. Le colonne restano incolonnate da una riga all'altra perche' il modello della griglia e' lo stesso per
   l'intestazione e per tutte le righe (table-layout:fixed qui non lavora piu').
   Sotto i 1000px il modello a schede, in fondo alla sezione, rifa' la griglia a modo suo. */
@container (width > 1000px){
  table.tabella.t-catalogo,
  table.tabella.t-catalogo thead,
  table.tabella.t-catalogo tbody{display:block;width:100%}
  table.tabella.t-catalogo thead tr,
  table.tabella.t-catalogo tbody tr{
    display:grid;row-gap:0;
    grid-template-columns:112px minmax(0,1.35fr) minmax(0,1.5fr) minmax(0,2.05fr) var(--c-azioni);
    grid-template-areas:"foto articolo targa comp azioni"
                        "date date date date date";
    align-items:center;
  }
  table.tabella.t-catalogo th,table.tabella.t-catalogo td{width:auto;min-width:0}
  .t-catalogo .c-foto{grid-area:foto}
  .t-catalogo .c-articolo{grid-area:articolo}
  .t-catalogo .c-targa{grid-area:targa}
  .t-catalogo .c-comp{grid-area:comp}
  .t-catalogo .c-date{grid-area:date}
  .t-catalogo .c-azioni{grid-area:azioni}
  /* nell'intestazione la voce "Date" non serve piu': ogni data porta scritta la sua etichetta */
  table.tabella.t-catalogo thead th.c-date{display:none}
  /* le intestazioni alte uguali: centrate una per una, la casella vuota delle icone e' piu' bassa e il filetto
     sotto l'intestazione finiva a gradino */
  table.tabella.t-catalogo thead tr{align-items:stretch}
  /* la striscia di 12px del colore della pagina tra una riga e l'altra passa dalle celle alla riga: adesso e'
     una griglia e non una riga di tabella, quindi bordo e fondo li tiene come ci si aspetta */
  table.tabella.t-catalogo tbody td{padding-top:14px;padding-bottom:12px;border-bottom:none}
  table.tabella.t-catalogo tbody tr{border-bottom:12px solid var(--sfondo)}
  table.tabella.t-catalogo tbody tr:last-child{border-bottom:none}
  /* fascia del colore dello stato dell'articolo (le variabili --fascia stanno in cima al foglio), alta quanto
     tutta la riga, date comprese. background-clip:padding-box: il fondo si ferma prima del bordo, cioe' della
     striscia del colore della pagina */
  table.tabella.t-catalogo tbody tr.art-fascia{
    background-image:var(--fascia-sfumata);
    background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
  }
  /* i 10px di rientro in piu' della fascia li paga la colonna della foto, non le altre (100px + 12) */
  table.tabella.t-catalogo tbody tr.art-fascia > td.c-foto{padding-left:22px}
  /* fascia delle date in fondo alla riga: testo piccolo, icone ridotte, le tre voci sulla stessa base e alla
     stessa distanza, nell'ordine creazione, ultimo ordine, ultima campionatura. Il filetto tratteggiato prende
     tutta la riga (parte dopo la fascia del colore), mentre le date cominciano sull'asse della colonna
     dell'articolo: sono di quell'articolo, e cosi' si incolonnano anche da una riga all'altra.
     La data ha una larghezza minima: la riga a cui manca una data (il trattino) non sposta quelle dopo */
  table.tabella.t-catalogo tbody td.c-date{
    margin:11px 0 0 12px;padding:9px 12px 3px 112px;border-top:1px dashed var(--bordo);
  }
  .t-catalogo .cat-date{display:flex;flex-wrap:wrap;align-items:center;gap:4px 34px}
  .t-catalogo .cat-date li{display:flex;align-items:center;gap:6px;white-space:nowrap}
  .t-catalogo .cat-date svg{flex:none;width:12px;height:12px}
  /* l'etichetta e' l'unica cosa che distingue tre date fatte uguali: va letta, quindi resta in --tenue come
     nella vista a schede (5,5:1 nel chiaro, 5,4:1 nello scuro). In --debole, a 9,5px, stava sotto il 4,5:1 */
  .t-catalogo .cat-date span{overflow:visible;text-overflow:clip;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue)}
  table.tabella.t-catalogo .cat-date b{min-width:63px;font-size:11.5px}
  /* la colonna delle composizioni respira: le due barre restano staccate anche a occhio */
  .t-catalogo .cat-comp-comm{margin-top:13px;padding-top:11px}
  /* le due barre della cella si riconoscono al volo: quella delle fibre e' piu' alta e la sua legenda ha i
     pallini tondi, la commerciale resta sottile ma squadrata e con i segmenti staccati di piu'. Sono ritocchi
     della vista a tabella: sotto i 1000px la scheda resta com'era (valori di base piu' avanti nel foglio) */
  .t-catalogo .cat-comp-barra{height:11px}
  .t-catalogo .cat-comp-leg i{border-radius:50%}
  .t-catalogo .cat-comp-comm .cat-comp-barra{gap:4px;border-radius:2px}
}
/* molto spazio davvero: le quattro tessere di targa stanno in fila su una riga sola. La soglia e' misurata sulle
   tessere, non a occhio: qui sopra ognuna arriva a 116px e valore, unita' e tolleranza stanno sulla stessa riga.
   Piu' in basso le quattro in fila starebbero strette (a 1241px di contenitore scendevano a 101px e la tolleranza
   andava a capo in 32 tessere su 52, con le tessere sfalsate) e si mangerebbero la colonna delle composizioni:
   li' restano a due a due, che a quelle misure le tiene sempre piu' larghe (138-149px) */
@container (width > 1380px){
  table.tabella.t-catalogo thead tr,
  table.tabella.t-catalogo tbody tr{
    grid-template-columns:112px minmax(0,1.15fr) minmax(0,2.5fr) minmax(0,2.05fr) var(--c-azioni);
  }
  .t-catalogo .cat-targa{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* foto: miniatura quadrata (versione res1_), clic = foto a piena risoluzione nel visualizzatore */
.cat-foto{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:6px;overflow:hidden;border:1px solid var(--bordo);background:var(--pannello2)}
/* numero dei colori sulla copertina: la galleria li sfoglia */
.cat-foto-conta{position:absolute;right:3px;bottom:3px;display:inline-flex;align-items:center;gap:3px;padding:1px 5px 1px 4px;border-radius:999px;background:rgba(4,20,28,.82);color:#fff;font-size:10.5px;font-weight:700;line-height:15px;font-variant-numeric:tabular-nums;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.cat-foto-conta svg{flex:none;color:#ff4b5c}
a.cat-foto{transition:border-color .15s,transform .15s}
a.cat-foto:hover{border-color:var(--accento);transform:scale(1.04)}
a.cat-foto:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
/* le versioni res_/res1_/res2_ sono gia' ruotate nel verso giusto ma a volte conservano il tag EXIF dell'originale:
   il browser le girerebbe una seconda volta. Si mostrano cosi' come sono salvate */
.cat-foto img,.gal-telo img,.gal-mini img,.gal-lente img{image-orientation:none}
.cat-foto img{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
/* foto che manca: icona standard di un tessuto */
.cat-foto.vuota{border-style:dashed;border-color:var(--bordo-forte);color:var(--debole)}

/* articolo: macrofamiglia sopra, nome commerciale ben visibile, codice sotto */
.cat-famiglia{display:block;margin-bottom:3px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accento-testo);overflow-wrap:anywhere}
table.tabella .cat-nome{display:block;font-size:15.5px;font-weight:700;line-height:1.25;color:var(--testo);overflow-wrap:anywhere}
table.tabella .cat-nome.senza{font-size:13px;font-weight:500;font-style:italic;color:var(--tenue)}
.cat-codice{display:inline-flex;align-items:baseline;gap:5px;margin-top:6px;padding:1px 7px;border-radius:3px;border:1px solid var(--bordo);background:var(--pannello2);font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--testo)}
table.tabella .cat-codice small{display:inline;font-family:var(--carattere);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--debole)}

/* dati di targa: quattro tessere a due a due (peso al m2, peso lineare, altezza, rotolo) con icona, etichetta, valore
   con unita' e tolleranza in piccolo */
.cat-targa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
/* icona sopra, etichetta su tutta la larghezza, valore sotto: anche su PC le colonne possono essere strette
   (tra 1000 e 1150px di spazio "ALTEZZA UTILE" accanto all'icona usciva dalla tessera) */
.cat-dato{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"icona" "eti" "val";align-content:start;align-items:start;gap:3px;min-width:0;padding:7px 8px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2)}
.cat-dato svg{grid-area:icona;color:var(--accento-testo)}
.cat-eti{grid-area:eti;min-width:0;font-size:9.5px;font-weight:600;letter-spacing:.04em;line-height:1.2;text-transform:uppercase;color:var(--tenue);overflow-wrap:anywhere}
.cat-val{grid-area:val;display:flex;align-items:baseline;flex-wrap:wrap;gap:1px 4px;line-height:1.25}
table.tabella .cat-val b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--testo)}
.cat-unita{font-size:11px;color:var(--tenue)}
table.tabella .cat-val small.cat-tol{display:inline-block;padding:0 5px;border:1px solid var(--bordo-forte);border-radius:999px;font-size:10px;font-weight:600;line-height:15px;color:var(--tenue);font-variant-numeric:tabular-nums}
/* dato mancante: "cat-vuoto" (non "nd", che e' il riquadro della pagina NonDisponibile) */
.cat-dato.cat-vuoto svg,.cat-dato.cat-vuoto .cat-eti{opacity:.6}
table.tabella .cat-dato.cat-vuoto .cat-val b{color:var(--debole);font-weight:500}

/* composizione: barra a segmenti e legenda con percentuale e nome della fibra.
   Questa e' la barra "riassunto": bastone tondo pieno, legenda in fila. Quella della composizione commerciale
   qui sotto e' disegnata apposta in un altro modo (vedi piu' giu').
   Questi sono i valori della vista a schede (sotto i 1000px), rimasti quelli di sempre: sulla vista a tabella la
   @container dei 1000px alza la barra a 11px e arrotonda i pallini della legenda */
.cat-comp-barra{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;background:var(--bordo)}
.cat-comp-barra span{display:block;flex:0 1 auto;min-width:3px;height:100%}
.cat-comp-leg{display:flex;flex-wrap:wrap;gap:3px 10px;margin:7px 0 0;padding:0;list-style:none;font-size:12px;color:var(--tenue)}
.cat-comp-leg li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.cat-comp-leg i{flex:none;width:9px;height:9px;border-radius:2px}
table.tabella .cat-comp-leg b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--testo)}
.f-pl{background:var(--f-pl)}.f-ea{background:var(--f-ea)}.f-pa{background:var(--f-pa)}.f-pp{background:var(--f-pp)}
.f-eol{background:var(--f-eol)}.f-co{background:var(--f-co)}.f-wo{background:var(--f-wo)}.f-vi{background:var(--f-vi)}
.f-li{background:var(--f-li)}.f-cf{background:var(--f-cf)}.f-altro{background:var(--f-altro)}
.cat-comp-testo{font-size:12.5px;color:var(--tenue)}
.cat-nd{color:var(--debole)}
/* composizione commerciale: barra a segmenti come quella delle fibre qui sopra, un colore per filato, e sotto la
   legenda con il quadratino, la percentuale e il nome. La percentuale resta scritta: chi non distingue i colori legge
   comunque quanto pesa ogni filato.
   Nella stessa cella ci sono due barre incolonnate, che su certi articoli disegnano quasi la stessa cosa. Perche'
   si riconoscano al volo sono fatte diverse in piu' modi: il titolino sopra c'e' sempre su tutte e due
   (Composizione per fibra / Composizione commerciale), questa barra e' piu' sottile, e la legenda e' a righe
   incolonnate con il quadratino mentre quella delle fibre e' in fila.
   Sulla vista a tabella (la @container dei 1000px) si aggiungono le due differenze che si vedono meglio da
   lontano: questa diventa squadrata invece che tonda e i suoi segmenti si staccano di piu' (4px), cosi' si vede
   che e' spezzettata, e i pallini della legenda delle fibre diventano tondi. */
.cat-comp-comm{margin-top:9px;padding-top:8px;border-top:1px dashed var(--bordo)}
.cat-comp-comm:first-child{margin-top:0;padding-top:0;border-top:none}
.cat-comp-comm-titolo,.cat-comp-titolo{display:block;margin-bottom:4px;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--debole)}
.cat-comp-comm .cat-comp-barra{height:8px;margin-top:2px}
/* i segmenti piccoli (l'1% di ELASTAN, il 2% di CARBON RESISTEX) restano visibili */
.cat-comp-comm .cat-comp-barra span{min-width:5px}
.cat-comp-comm ul{display:grid;gap:2px;margin:7px 0 0;padding:0;list-style:none}
/* la colonna della percentuale e' allineata a destra e cresce da sola: con 36px fissi un "33,3%" (le percentuali con
   la virgola esistono) ne misura gia' 35,4 e con un carattere di ripiego uscirebbe sopra il quadratino del colore.
   Il minimo di 36px tiene le righe allineate in tutti i casi normali; solo la riga con una percentuale piu' lunga
   del solito prende qualche pixel in piu', che e' sempre meglio del numero addosso al quadratino */
.cat-comp-comm li{display:grid;grid-template-columns:9px minmax(36px,max-content) minmax(0,1fr);gap:7px;align-items:baseline;font-size:11.5px;line-height:1.3;color:var(--tenue)}
table.tabella .cat-comp-comm li b{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--testo)}
.cat-comp-comm li span{min-width:0;overflow-wrap:anywhere}
/* il filo di bordo del quadratino sta fuori e non dentro: in 9px un bordo interno si mangerebbe quasi tutto il colore
   del tono piu' sfumato */
.cat-comp-comm li i{
  align-self:start;width:9px;height:9px;margin-top:4px;border-radius:2px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--testo) 14%,transparent);
}
/* colore di base del filato: le stesse variabili --f-* della composizione breve, scelte dalla fibra che il nome del
   filato contiene (POLYESTER -> PL, ELASTAN -> EA, CARBON -> CF ..., ComposizioneCommerciale.Fibra), cosi' le due
   barre dello stesso articolo si somigliano */
.fc-pl{--fc:var(--f-pl)}.fc-ea{--fc:var(--f-ea)}.fc-pa{--fc:var(--f-pa)}.fc-pp{--fc:var(--f-pp)}
.fc-eol{--fc:var(--f-eol)}.fc-co{--fc:var(--f-co)}.fc-wo{--fc:var(--f-wo)}.fc-vi{--fc:var(--f-vi)}
.fc-li{--fc:var(--f-li)}.fc-cf{--fc:var(--f-cf)}.fc-altro{--fc:var(--f-altro)}
/* Tono: 1 il primo filato di quella fibra nell'articolo, 2 il secondo, e cosi' via (succede quasi sempre: 83%
   MICROFYBER POLYESTER + 5% POLYESTER). Il secondo tono tira verso il colore del testo (piu' contrasto) e non verso
   il fondo, perche' il secondo filato della stessa fibra e' quasi sempre quello con la percentuale piccola e in un
   segmento di pochi pixel serve tutto il contrasto possibile. Mescolando con --testo e --pannello i toni si
   ricalcolano da soli nel tema scuro.
   I toni sono sei e poi il giro ricomincia da uno (Catalogo.TONI_FILATO): oggi il massimo nel catalogo e' tre filati
   della stessa fibra, ma fermarsi sull'ultimo tono darebbe due segmenti vicini dello stesso colore. */
.ft-1{background:var(--fc,var(--f-altro))}
.ft-2{background:color-mix(in srgb,var(--fc,var(--f-altro)) 55%,var(--testo))}
.ft-3{background:color-mix(in srgb,var(--fc,var(--f-altro)) 52%,var(--pannello))}
.ft-4{background:color-mix(in srgb,var(--fc,var(--f-altro)) 28%,var(--testo))}
.ft-5{background:color-mix(in srgb,var(--fc,var(--f-altro)) 75%,var(--pannello))}
.ft-6{background:color-mix(in srgb,var(--fc,var(--f-altro)) 40%,var(--testo))}
/* articoli dell'opportunita': composizione commerciale sotto i dettagli */
.art-dettagli.art-compcomm{font-style:italic}

/* date: icona, data e cosa rappresenta */
.cat-date{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:12px}
.cat-date li{display:grid;grid-template-columns:14px auto minmax(0,1fr);grid-template-areas:"icona data eti";align-items:center;gap:6px;min-width:0;color:var(--tenue)}
.cat-date svg{grid-area:icona;color:var(--debole)}
.cat-date span{grid-area:eti;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
table.tabella .cat-date b{grid-area:data;font-weight:600;font-variant-numeric:tabular-nums;color:var(--testo)}
table.tabella .cat-date li.cat-vuoto b{color:var(--debole);font-weight:500}

/* scheda tecnica: icona di riga blu con la sigla PDF */
.cat-pdf .cat-pdf-sigla{position:absolute;right:-7px;bottom:-6px;padding:0 3px;border-radius:3px;background:var(--ic,var(--accento));color:var(--pannello);font-size:8px;font-weight:800;line-height:12px;letter-spacing:.04em;pointer-events:none}

/* sotto i 1000px di spazio (tablet, smartphone, PC con poco spazio): ogni articolo e' una scheda, affiancate se
   c'e' posto. In alto foto, articolo e icona PDF; poi dati di targa, composizione e in fondo le date */
@container (max-width:1000px){
  table.tabella.t-catalogo{display:block;width:100%}
  table.tabella.t-catalogo thead{display:none}
  table.tabella.t-catalogo tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:22px;padding:16px 12px}
  table.tabella.t-catalogo tbody tr{
    display:grid;grid-template-columns:84px minmax(0,1fr) auto;
    grid-template-areas:"foto articolo azioni" "targa targa targa" "comp comp comp" "date date date";
    align-content:start;gap:12px;padding:12px 14px;
    border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello2);
    box-shadow:0 2px 6px -3px rgba(0,0,0,.35);
  }
  /* tbody nel selettore: deve battere la fascia tra le righe della tabella su PC */
  table.tabella.t-catalogo tbody td{display:block;width:auto;min-width:0;padding:0;border:none}
  table.tabella.t-catalogo td.c-foto{grid-area:foto}
  table.tabella.t-catalogo td.c-articolo{grid-area:articolo;align-self:center}
  table.tabella.t-catalogo td.c-azioni{grid-area:azioni}
  table.tabella.t-catalogo td.c-targa{grid-area:targa}
  table.tabella.t-catalogo td.c-comp{grid-area:comp}
  table.tabella.t-catalogo td.c-date{grid-area:date;padding-top:10px;border-top:1px dashed var(--bordo-forte)}
  .t-catalogo .cat-foto{width:84px;height:84px}
  /* la scheda ha gia' il fondo --pannello2: le tessere passano al fondo del pannello per staccarsi */
  .t-catalogo .cat-dato{padding:8px 7px;background:var(--pannello)}
  .t-catalogo .cat-codice{background:var(--pannello)}
  .t-catalogo .cat-date{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .t-catalogo .cat-date li{grid-template-columns:14px minmax(0,1fr);grid-template-areas:"icona eti" "data data";align-items:start;gap:3px 5px}
  .t-catalogo .cat-date span{overflow:visible;text-overflow:clip;white-space:normal;font-size:9px;font-weight:600;letter-spacing:.02em;line-height:1.25;text-transform:uppercase}
  /* la fascia passa dalla cella della foto alla scheda intera e lo stato sale in cima, appoggiato alla fascia: il
     testo arriva da data-stato sulla riga (Catalogo.NomeStatoArticolo) */
  table.tabella.t-catalogo tbody tr.art-fascia{
    grid-template-areas:"stato stato stato" "foto articolo azioni" "targa targa targa" "comp comp comp" "date date date";
    border-color:color-mix(in srgb,var(--fascia) 45%,var(--bordo-forte));
    background-image:var(--fascia-sfumata);
    background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
  }
  /* il rientro della scheda resta quello di sempre (14px): la sfumatura finisce a 12px e non tocca il contenuto.
     Allargandolo, su iPhone il nome commerciale andava a capo in mezzo alla parola */
  table.tabella.t-catalogo tbody tr.art-fascia > td.c-foto{background-image:none;padding-left:0}
  /* il tag dello stato appoggiato: parte dentro la fascia e ne esce, lato sinistro dritto e angolo in basso a destra tondo */
  table.tabella.t-catalogo tbody tr.art-fascia::before{
    content:attr(data-stato);grid-area:stato;justify-self:start;
    margin:-12px 0 -2px -14px;padding:4px 11px 4px 21px;
    border-radius:0 0 var(--raggio) 0;
    background:var(--fascia);color:#fff;
    font-size:9.5px;font-weight:700;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;
  }
  /* Nel tema scuro il verde e il teal della fascia restano chiari e il testo scuro si legge meglio del bianco
     (5,4:1 e 9,4:1 contro 3,5:1 e 4,0:1). Le altre due tinte no, e vanno escluse o il testo sparisce:
     - fuori catalogo ha il fondo del pannello (vedi la regola qui sotto) e con #04141c starebbe a 1,1:1;
     - il blu di "prodotto standard" e' scuro in tutti e due i temi: con #04141c sta a 3,6:1, con il bianco a 5,2:1. */
  html[data-tema="scuro"] table.tabella.t-catalogo tbody tr.art-fascia:not(.s-standard):not(.s-fuori)::before{color:#04141c}
  /* fuori catalogo: il tag resta vuoto con il bordo, come l'etichetta .cat-stato.fuori */
  table.tabella.t-catalogo tbody tr.art-fascia.s-fuori::before{
    background:var(--pannello);color:var(--tenue);box-shadow:inset 0 0 0 1px var(--bordo-forte);
  }
  /* lo stato e' gia' in cima: quello accanto al codice sparisce. "A collezione" resta dov'e', e' un'aggiunta e non lo stato */
  table.tabella.t-catalogo tbody tr.art-fascia .cat-riga-codice .cat-stato{display:none}
}

/* ---------- Tessuti > Catalogo: galleria dei colori (js/galleria-tessuti.js) ---------- */
/* A tutto schermo e sempre scura in tutti e due i temi (i colori propri stanno qui): i campioni sono disposti a
   ventaglio in 3D e si sfogliano come le pagine di un campionario; sotto il nome del colore, la ricerca e la
   striscia di miniature; sullo sfondo la foto attiva sfocata. */
html.gal-aperta{overflow:hidden}
/* i colori della galleria valgono anche per la giostra della finestra degli allegati (dialog.allw): la striscia
   delle miniature e l'alone sono gli stessi mattoni (vedi "Finestra degli allegati: la giostra", in fondo) */
dialog.galleria,dialog.allw{
  --gal-testo:#f3efe6;--gal-tenue:rgba(243,239,230,.62);--gal-vetro:rgba(255,255,255,.08);--gal-vetro-bordo:rgba(255,255,255,.16);
  --gal-rosso:#ff4b5c;
}
dialog.galleria{
  /* lato del campione: sta nello spazio tra testata e piede anche su schermi bassi */
  --gal-l:min(400px,58vw,calc((100vh - 350px) / 1.42));
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  overflow:hidden;background:#05090c;color:var(--gal-testo);font-family:var(--carattere);
}
@supports (height:100dvh){dialog.galleria{--gal-l:min(400px,58vw,calc((100dvh - 350px) / 1.42))}}
dialog.galleria[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
dialog.galleria::backdrop{background:rgba(2,5,7,.88)}
/* vignettatura sopra lo sfondo sfocato */
dialog.galleria::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 35%,rgba(0,0,0,.72) 100%)}
/* sfondo: la foto attiva molto sfocata e scura, cosi' anche un tessuto bianco resta un alone e non schiarisce tutto */
.gal-sfondo{position:absolute;inset:-12%;z-index:0;pointer-events:none;background:center/cover no-repeat;filter:blur(60px) saturate(1.6) brightness(.32);opacity:0;transform:scale(1.08);transition:opacity .9s ease,transform 1.6s ease}
.gal-sfondo.visibile{opacity:.9;transform:scale(1)}
.gal-testa,.gal-palco,.gal-didascalia,.gal-piede{position:relative;z-index:1;min-width:0}

.gal-testa{display:flex;align-items:center;gap:14px;padding:14px 18px}
.gal-titolo{flex:1;min-width:0;display:grid;gap:2px}
.gal-famiglia{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gal-rosso)}
.gal-nome{font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-codice{justify-self:start;margin-top:2px;padding:0 7px;border-radius:3px;border:1px solid var(--gal-vetro-bordo);font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:12px;color:var(--gal-tenue)}
.gal-codice:empty{display:none}
.gal-conta{flex:none;padding:4px 11px;border-radius:999px;background:var(--gal-vetro);border:1px solid var(--gal-vetro-bordo);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--gal-testo)}
.gal-conta:empty{display:none}
.gal-tondo{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--gal-vetro-bordo);background:var(--gal-vetro);color:var(--gal-testo);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .2s,border-color .2s,transform .2s,opacity .2s}
.gal-tondo:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);transform:scale(1.06)}
.gal-tondo:focus-visible{outline:2px solid var(--gal-rosso);outline-offset:3px}
.gal-tondo:disabled{opacity:.22;cursor:default;transform:none}

/* palco: prospettiva per il ventaglio 3D; si trascina di lato. Il pizzico resta al browser: se la pagina e' stata
   ingrandita si deve poter tornare indietro anche toccando il ventaglio, che occupa quasi tutto lo schermo */
.gal-palco{overflow:hidden;perspective:1500px;perspective-origin:50% 45%;cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;outline:none}
.gal-palco:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,75,92,.55)}
.gal-pista{position:absolute;inset:0;transform-style:preserve-3d}
.gal-pista.trascina{cursor:grabbing}
.gal-campione{
  position:absolute;left:50%;top:50%;width:var(--gal-l);height:calc(var(--gal-l) * 1.32);
  margin-left:calc(var(--gal-l) / -2);margin-top:calc(var(--gal-l) * -.66);
  will-change:transform;cursor:pointer;
  transition:transform .7s cubic-bezier(.2,.86,.24,1),opacity .5s ease;
}
.gal-pista.trascina .gal-campione{transition:none}
/* ombra sotto il campione: fuori dal telo, perche' la maschera del bordo seghettato la taglierebbe */
.gal-campione::before{content:"";position:absolute;inset:8% 6% 0;border-radius:14px;box-shadow:0 36px 60px -18px rgba(0,0,0,.85);pointer-events:none;transition:box-shadow .5s ease}
.gal-campione.attivo::before{box-shadow:0 52px 90px -22px rgba(0,0,0,.95)}
/* il telo: la foto del tessuto con il bordo in basso seghettato come uno scampolo, luce che cala sui campioni lontani */
.gal-telo{
  --dente:9px;
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:12px 12px 0 0;background:#1a2126;
  filter:brightness(var(--luce,1));transition:filter .6s ease;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - var(--dente)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2 * var(--dente)) var(--dente) repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - var(--dente)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2 * var(--dente)) var(--dente) repeat-x;
  -webkit-box-reflect:below 8px linear-gradient(transparent 62%,rgba(255,255,255,.16));
}
.gal-telo img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:filter .6s ease}
.gal-campione:not(.nitida) .gal-telo img{filter:saturate(.96)}
.gal-campione.attivo{cursor:zoom-in}
.gal-campione.attivo .gal-telo{filter:none}
/* la foto dell'articolo (non un colore) si riconosce da un filo rosso in alto */
.gal-campione.foto .gal-telo::before{content:"";position:absolute;inset:0 0 auto;height:4px;z-index:1;background:var(--gal-rosso)}
/* foto che non si carica: il disegno dello scampolo */
.gal-campione.rotta img{opacity:0}
.gal-campione.rotta .gal-telo{background:#1a2126 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f3efe6' stroke-opacity='.35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 8h30v26l-3.75 4-3.75-4-3.75 4-3.75-4-3.75 4-3.75-4-3.75 4L9 34z'/%3E%3Cpath d='M9 20L21 8M9 32L33 8M17 36l22-22M29 36l10-10' stroke-width='1.4'/%3E%3C/svg%3E") center/38% no-repeat}

.gal-freccia{position:absolute;top:50%;z-index:1100;width:54px;height:54px;margin-top:-27px}
.gal-prec{left:18px}
.gal-succ{right:18px}
.gal-stato{position:absolute;left:50%;top:50%;z-index:1200;margin:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;max-width:80%;text-align:center;font-size:14px;color:var(--gal-tenue)}
.gal-stato.carica::before{content:"";width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:var(--gal-rosso);animation:gira .8s linear infinite}
/* "Riprova" sotto il messaggio d'errore: compare solo per i guasti passeggeri (sessione scaduta, errore del
   server, rete caduta), mai quando l'articolo non e' piu' a catalogo. Alto 44px: si tocca col dito. */
.gal-riprova{
  min-height:44px;padding:0 22px;border-radius:999px;
  border:1px solid var(--gal-vetro-bordo);background:var(--gal-vetro);color:var(--gal-testo);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .2s,border-color .2s
}
.gal-riprova:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)}
.gal-riprova:focus-visible{outline:2px solid var(--gal-rosso);outline-offset:3px}

/* nome del colore: entra dal basso a ogni cambio */
.gal-didascalia{display:grid;justify-items:center;gap:2px;padding:6px 18px 2px;text-align:center}
.gal-tipo{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gal-rosso)}
.gal-colore{font-size:23px;font-weight:700;letter-spacing:.01em;line-height:1.2;max-width:100%;overflow-wrap:anywhere}
.gal-suggerimento{font-size:11.5px;color:var(--gal-tenue)}
.gal-didascalia.cambia .gal-tipo,.gal-didascalia.cambia .gal-colore{animation:gal-entra .5s cubic-bezier(.2,.8,.2,1) both}
.gal-didascalia.cambia .gal-colore{animation-delay:.04s}
@keyframes gal-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.gal-piede{display:grid;justify-items:center;gap:10px;padding:8px 16px 16px}
.gal-cerca{display:flex;align-items:center;gap:8px;width:min(340px,100%);padding:0 12px;border-radius:999px;border:1px solid var(--gal-vetro-bordo);background:var(--gal-vetro);color:var(--gal-tenue);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gal-cerca svg{flex:none}
/* 16px: con meno l'iPhone ingrandisce la pagina al tocco del campo e nella galleria a tutto schermo non si torna indietro */
dialog.galleria .gal-cerca input,dialog.galleria .gal-cerca input:hover,dialog.galleria .gal-cerca input:focus{
  flex:1;min-width:0;height:38px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--gal-testo);font:inherit;font-size:16px;outline:none;caret-color:var(--gal-rosso)
}
dialog.galleria .gal-cerca input::placeholder{color:var(--gal-tenue)}
.gal-cerca:focus-within{border-color:var(--gal-rosso);box-shadow:0 0 0 3px rgba(255,75,92,.22)}
.gal-striscia{position:relative;display:flex;gap:8px;width:100%;max-width:1100px;padding:8px 4px 6px;overflow-x:auto;overscroll-behavior:contain}
.gal-mini{flex:none;position:relative;width:54px;height:70px;padding:0;border-radius:6px;border:2px solid transparent;overflow:hidden;background:#1a2126;cursor:pointer;opacity:.5;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.gal-mini img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.gal-mini:hover{opacity:.9;transform:translateY(-3px)}
.gal-mini:focus-visible{outline:2px solid var(--gal-rosso);outline-offset:2px}
.gal-mini.attiva{opacity:1;border-color:var(--gal-rosso);transform:translateY(-5px) scale(1.06);box-shadow:0 10px 22px -8px rgba(0,0,0,.8)}
.gal-mini.foto::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gal-rosso)}
.gal-mini.rotta img{opacity:0}
.gal-mini.rotta{background:#1a2126 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23f3efe6' stroke-opacity='.4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 8h30v26l-3.75 4-3.75-4-3.75 4-3.75-4-3.75 4-3.75-4-3.75 4L9 34z'/%3E%3C/svg%3E") center/60% no-repeat}

/* lente: la foto grande ingrandita, segue il puntatore per esplorare la trama */
.gal-lente{position:absolute;inset:0;z-index:5000;display:grid;place-items:center;overflow:hidden;background:rgba(3,6,8,.97);cursor:zoom-out;touch-action:none}
.gal-lente img{max-width:100%;max-height:100%;object-fit:contain;transform:scale(1);transition:transform .45s cubic-bezier(.2,.8,.2,1),transform-origin .12s linear;-webkit-user-drag:none}
.gal-lente.pronta img{transform:scale(2.3)}

@media (max-width:560px){
  dialog.galleria{--gal-l:min(74vw,calc((100vh - 320px) / 1.42))}
  @supports (height:100dvh){dialog.galleria{--gal-l:min(74vw,calc((100dvh - 320px) / 1.42))}}
  .gal-testa{padding:10px 12px;gap:10px}
  .gal-nome{font-size:17px}
  .gal-tondo{width:40px;height:40px}
  .gal-colore{font-size:19px}
  .gal-mini{width:44px;height:58px}
  .gal-piede{padding:6px 10px 12px}
}
@media (pointer:coarse){.gal-freccia{display:none}}
@media (prefers-reduced-motion:reduce){
  .gal-campione,.gal-telo,.gal-sfondo,.gal-mini,.gal-lente img{transition-duration:.01s}
  .gal-didascalia.cambia .gal-tipo,.gal-didascalia.cambia .gal-colore{animation:none}
}

/* =====================================================================
   CAMPI DI INSERIMENTO: stato attivo
   In fondo al file di proposito: a parita' di specificita' vince sulle regole
   dei singoli componenti e pagine scritte sopra.
   ===================================================================== */
input[type=text],input[type=search],input[type=number],input[type=email],input[type=tel],
input[type=url],input[type=password],input[type=date],select,textarea{
  caret-color:var(--accento);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
input::placeholder,textarea::placeholder{color:var(--debole);opacity:1}

/* iPhone e iPad: toccando un campo con il testo sotto i 16px Safari ingrandisce la pagina e non la rimpicciolisce piu'
   (nelle finestre a tutto schermo non si arriva nemmeno a chiuderle). Solo su iOS (-webkit-touch-callout esiste solo
   li'), cosi' su computer e Android i campi piccoli restano come sono. */
@supports (-webkit-touch-callout:none){
  input[type=text],input[type=search],input[type=number],input[type=email],input[type=tel],
  input[type=url],input[type=password],input[type=date],select,textarea,[contenteditable="true"],[contenteditable=""]{font-size:max(16px,1em) !important}
}

/* passando sopra: bordo piu' marcato */
input[type=text]:hover,input[type=search]:hover,input[type=number]:hover,input[type=email]:hover,input[type=tel]:hover,
input[type=url]:hover,input[type=password]:hover,input[type=date]:hover,select:hover,textarea:hover{
  border-color:var(--bordo-forte);
}

/* campo in cui si sta scrivendo: bordo rosso, alone e sfondo piu' chiaro */
input[type=text]:focus,input[type=search]:focus,input[type=number]:focus,input[type=email]:focus,input[type=tel]:focus,
input[type=url]:focus,input[type=password]:focus,input[type=date]:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--accento);
  background-color:var(--campo-attivo);
  box-shadow:0 0 0 3px var(--campo-alone);
}

/* l'etichetta del campo attivo si accende insieme al campo */
.campo:focus-within > label,.filtri label:focus-within,.per-pagina:focus-within label{color:var(--accento-testo)}
.barra-cerca:focus-within .lente{color:var(--accento-testo)}

/* caselle di spunta raggiunte da tastiera */
input[type=checkbox]{accent-color:var(--accento)}
input[type=checkbox]:focus-visible{outline:2px solid var(--accento);outline-offset:2px}

/* campo con valore non valido (per esempio Gestione/UtentiEffepi.aspx): rosso di errore anche mentre e' attivo */
.campo.non-valido > label{color:var(--pericolo)}
.campo.non-valido input,.campo.non-valido input:hover,.campo.non-valido input:focus{border-color:var(--pericolo)}
.campo.non-valido input:focus{box-shadow:0 0 0 3px var(--pericolo-velo)}

/* =====================================================================
   grafici delle commesse (prefisso graf-): cruscotto e Opportunita' > Statistiche
   Sezione a se': non tocca nessuna regola di sopra (.cat-*, .az-*, .deal-*).
   Nessuna libreria: barre e colonne sono HTML+CSS, le scintille sono SVG
   scritto da App_Code\Grafici.vb.
   Tavolozza verificata con il validatore della skill dataviz sulle superfici
   vere del sito (chiaro #ffffff, scuro #08222c):
     chiaro, coppie adiacenti: banda L ok, croma ok, CVD dE 12,8 (protan),
        vista normale dE 19,6; ambra 2,17:1 e rosa 2,69:1 stanno sotto 3:1,
        percio' il valore scritto accanto alla barra e la tabella gemella
        non sono facoltativi.
     scuro, coppie adiacenti: CVD dE 13,0 (deutan), vista normale dE 19,3,
        contrasto tutti >= 3:1.
   ===================================================================== */
:root{
  /* otto tinte categoriche, ordine fisso: blu, arancio, teal, ambra, rosa, verde, viola, rosso.
     L'ordine e' il meccanismo di sicurezza per i daltonici: non si cambia. */
  --graf-s1:#2a78d6;
  --graf-s2:#eb6834;
  --graf-s3:#0f9c95;
  --graf-s4:#eda100;
  --graf-s5:#e87ba4;
  --graf-s6:#008300;
  --graf-s7:#4a3aa7;
  /* rosso delle serie, non il rosso del marchio: #da0219 resta l'accento (pulsanti, stati attivi)
     e non fa mai da tinta di una serie */
  --graf-s8:#e34948;
  /* grigio di scorta: "Altro", la coda ripiegata, i gruppi senza colore proprio */
  --graf-altro:#7d8c94;
  /* serie unica: la maggior parte dei grafici ha una tinta sola e nessuna legenda */
  --graf-uno:var(--graf-s1);
  --graf-su:#2f8a55;
  --graf-giu:#c94836;

  /* superficie su cui poggia il grafico: e' il colore degli stacchi da 2px */
  --graf-sup:var(--pannello);
  --graf-pista:rgba(16,34,43,.07);
  --graf-rete:var(--bordo);
  --graf-asse:rgba(16,34,43,.22);

  --graf-spessore:14px;
  --graf-stacco:2px;
  --graf-piano:184px;
  --graf-raggio:4px;
}
html[data-tema="scuro"]{
  --graf-s1:#3987e5;
  --graf-s2:#d95926;
  --graf-s3:#13a09a;
  --graf-s4:#c98500;
  --graf-s5:#d55181;
  --graf-s6:#008300;
  --graf-s7:#9085e9;
  --graf-s8:#e66767;
  --graf-altro:#7e929c;
  --graf-su:#4fd08a;
  --graf-giu:#ff7a70;
  --graf-pista:rgba(239,232,217,.09);
  --graf-asse:rgba(239,232,217,.26);
}

.graf{ --gc:var(--graf-uno); min-width:0 }

/* slot di tinta: la classe sta sul pieno (.q), sulla riga o sul pallino di legenda */
.graf-s1{--gc:var(--graf-s1)}
.graf-s2{--gc:var(--graf-s2)}
.graf-s3{--gc:var(--graf-s3)}
.graf-s4{--gc:var(--graf-s4)}
.graf-s5{--gc:var(--graf-s5)}
.graf-s6{--gc:var(--graf-s6)}
.graf-s7{--gc:var(--graf-s7)}
.graf-s8{--gc:var(--graf-s8)}
.graf-sa{--gc:var(--graf-altro)}

/* scorciatoie con i nomi di colore delle categorie (DEALC_Colore) */
.graf-c-blu{--gc:var(--graf-s1)}
.graf-c-arancio{--gc:var(--graf-s2)}
.graf-c-teal{--gc:var(--graf-s3)}
.graf-c-ambra{--gc:var(--graf-s4)}
.graf-c-rosa{--gc:var(--graf-s5)}
.graf-c-verde{--gc:var(--graf-s6)}
.graf-c-viola{--gc:var(--graf-s7)}
.graf-c-rosso{--gc:var(--graf-s8)}
.graf-c-grigio{--gc:var(--graf-altro)}

/* la trama alterna 45 e 135 gradi, mai orizzontale o verticale */
.graf-s1,.graf-c-blu,.graf-s3,.graf-c-teal,.graf-s5,.graf-c-rosa,.graf-s7,.graf-c-viola{--ga:45deg}
.graf-s2,.graf-c-arancio,.graf-s4,.graf-c-ambra,.graf-s6,.graf-c-verde,.graf-s8,.graf-c-rosso,.graf-sa,.graf-c-grigio{--ga:135deg}

/* ---------- testatina ---------- */
.graf-corpo{padding:16px 20px 18px;min-width:0}
@media (max-width:560px){ .graf-corpo{padding:14px 16px 16px} }

.graf-capo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.graf-capo .titoli{min-width:0}
.graf-capo h3{margin:0;font-size:13.5px;font-weight:600;line-height:1.3}
.graf-capo p{margin:3px 0 0;font-size:11.5px;color:var(--tenue);line-height:1.4}
.graf-capo .graf-filtro{margin:0;gap:6px}
/* "Vedi tutti": la via d'uscita di una classifica tagliata ai primi dieci. E' un link (la scelta sta
   nell'indirizzo, come i filtri), e sul telefono e' alto 38px come le pillole, per poterlo toccare. */
.graf-tutti{display:inline-flex;align-items:center;flex:none;padding:4px 2px;font-size:12px;color:var(--accento2);text-decoration:none;white-space:nowrap}
.graf-tutti:hover{text-decoration:underline}
.graf-tutti:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:6px}
@media (max-width:430px){ .graf-tutti{min-height:38px;font-size:13px} }

/* ---------- numeri di riepilogo ---------- */
/* la colonna minima tiene conto del numero piu' lungo che ci finisce dentro ("E 457.697,01" a 29px): con
   colonne piu' strette il valore non ci stava e andava a capo IN MEZZO alle cifre ("457.697,0" e sotto "1").
   Su iPad in verticale le colonne diventano tre invece di quattro, e il numero resta su una riga sola. */
.graf-numeri{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:0 0 18px}
.graf-num{border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);padding:14px 16px;min-width:0}
.graf-num .eti{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tenue);margin-bottom:9px}
.graf-num .eti svg{color:var(--accento-testo);flex:none}
/* cifre proporzionali: su un numero grande quelle a larghezza fissa sembrano sciolte */
.graf-num .val{font-size:29px;font-weight:600;letter-spacing:-.025em;line-height:1;word-break:break-word}
.graf-num .val small{font-size:15px;font-weight:500;color:var(--tenue);margin-left:4px;letter-spacing:0}
.graf-num .sotto{margin-top:8px;font-size:11.5px;color:var(--tenue);line-height:1.45}
.graf-num .sotto a{color:var(--accento2);text-decoration:none}
.graf-num .sotto a:hover{text-decoration:underline}
/* sul telefono il numero scende a 24px, cosi' l'unita' di misura resta accanto invece di andare a capo da sola,
   e la colonna minima torna a 168px. Due riquadri per riga si vedono dove il contenitore e' largo abbastanza:
   sul cruscotto da 390px in su (contenitore 354px) e nelle Statistiche da 430px in su (360px), perche' li'
   i riquadri stanno dentro .graf-corpo, che toglie 16px per lato. Sotto (360px, e 390px nelle Statistiche)
   resta una colonna sola, ed e' giusto: due colonne da 145px spezzerebbero di nuovo il valore in mezzo alle
   cifre, che e' esattamente il difetto per cui la minima e' stata alzata a 210px sopra. */
@media (max-width:430px){
  .graf-num .val{font-size:24px} .graf-num .val small{font-size:13px}
  .graf-numeri{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
}

.graf-eroe{padding:4px 0 18px}
.graf-eroe .eti{font-size:12px;color:var(--tenue);margin-bottom:8px}
.graf-eroe .val{font-size:52px;font-weight:600;letter-spacing:-.03em;line-height:1;word-break:break-word}
.graf-eroe .val small{font-size:22px;font-weight:500;color:var(--tenue);margin-left:6px;letter-spacing:0}
.graf-eroe-sotto{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:11.5px;color:var(--tenue)}
@media (max-width:560px){ .graf-eroe .val{font-size:40px} .graf-eroe .val small{font-size:18px} }

.graf-delta{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.graf-delta svg{flex:none}
.graf-delta.su{color:var(--graf-su)}
.graf-delta.giu{color:var(--graf-giu)}
.graf-delta.pari{color:var(--tenue)}
.graf-delta .quando{font-weight:400;color:var(--tenue)}

/* scintilla (sparkline): SVG scritto dal VB */
.graf-scintilla{display:block;margin-top:10px}
.graf-scintilla svg{display:block;width:100%;height:34px;overflow:visible}
.graf-scintilla .linea{fill:none;stroke:var(--graf-uno);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.graf-scintilla .velo{fill:var(--graf-uno);opacity:.10;stroke:none}
.graf-scintilla .capo{fill:var(--graf-uno);stroke:var(--graf-sup);stroke-width:2}

/* ---------- barre orizzontali ---------- */
.graf-barre{list-style:none;margin:0;padding:0}
.graf-barre li{
  display:grid;
  grid-template-columns:minmax(0,13.5em) minmax(0,1fr) max-content;
  grid-template-areas:"et pista val";
  align-items:center;column-gap:12px;
  padding:5px 0;min-width:0;
}
.graf-barre .et{grid-area:et;min-width:0;font-size:12.5px;line-height:1.35;display:flex;align-items:center;gap:7px}
.graf-barre .et .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.graf-barre .et .pos{flex:none;width:18px;text-align:right;font-size:11px;font-weight:600;color:var(--debole);font-variant-numeric:tabular-nums}
/* pallino della categoria: stessa tinta del segmento, per riconoscerla al volo */
.graf-barre .et .punto{flex:none;width:8px;height:8px;border-radius:2px;background:var(--gc)}
.graf-barre .pista{grid-area:pista;position:relative;min-width:0;height:var(--graf-spessore);border-radius:var(--graf-raggio);background:var(--graf-pista)}
.graf-barre .q{position:absolute;left:0;top:0;bottom:0;width:var(--v,0%);min-width:3px;max-width:100%;background:var(--gc);border-radius:0 var(--graf-raggio) var(--graf-raggio) 0}
.graf-barre li[data-vuoto] .q,.graf-barre .pista[data-vuoto] .q{display:none}
.graf-barre .val{grid-area:val;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.graf-barre .val small{font-size:11px;font-weight:400;color:var(--tenue);margin-left:2px}
.graf-barre li.spenta .q{background:var(--graf-altro)}
.graf-barre li.spenta .et,.graf-barre li.spenta .val{color:var(--tenue)}

/* risalto: una riga sola a colori, le altre in grigio. E' la forma giusta quando la storia e'
   "questo qui": il supervisore che si guarda in mezzo ai suoi subagenti. */
.graf-risalto .q{background:var(--graf-altro)}
.graf-risalto li.spicca .q{background:var(--gc)}
.graf-risalto li.spicca .et,.graf-risalto li.spicca .val{font-weight:600}
.graf-risalto li:not(.spicca) .et,.graf-risalto li:not(.spicca) .val{color:var(--tenue)}

/* barre impilate: lo stacco di 2px e' disegnato DENTRO il pieno (ombra interna del colore della
   superficie), non con gap: cosi' le larghezze restano esatte e la somma al 100% non sborda */
.graf-impilate .pista{background:transparent;display:flex;gap:0;overflow:visible}
.graf-impilate .q{position:static;width:var(--v,0%);min-width:6px;max-width:none;flex:0 0 auto;border-radius:0}
.graf-impilate .q + .q{box-shadow:inset var(--graf-stacco) 0 0 var(--graf-sup)}
.graf-impilate .q:first-child{border-radius:var(--graf-raggio) 0 0 var(--graf-raggio)}
.graf-impilate .q:last-child{border-radius:0 var(--graf-raggio) var(--graf-raggio) 0}
.graf-impilate .q:only-child{border-radius:var(--graf-raggio)}
.graf-impilate .pista::after{content:"";flex:1 1 auto;min-width:0}
/* riga senza nemmeno un pieno (cliente senza prezzi): la pista resta visibile, altrimenti sembra un errore */
.graf-impilate .pista:empty{background:var(--graf-pista)}

@media (max-width:640px){
  /* telefono: mai scorrimento di lato. Nome e valore sulla stessa riga, barra sotto a tutta larghezza. */
  .graf-barre li{grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"et val" "pista pista";row-gap:5px;padding:8px 0}
  .graf-barre .et{font-size:13px}
  .graf-barre .et .nome{white-space:normal;overflow:visible;text-overflow:clip}
}

/* ---------- colonne nel tempo ---------- */
.graf-colonne{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:10px;align-items:start;min-width:0}
.graf-y{
  height:calc(var(--graf-piano) + 1em);margin-top:-.5em;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  font-size:10.5px;line-height:1em;color:var(--debole);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.graf-piano{position:relative;min-width:0}
.graf-rete{position:absolute;left:0;right:0;top:0;height:var(--graf-piano);display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.graf-rete i{display:block;height:1px;background:var(--graf-rete)}
.graf-rete i:last-child{background:var(--graf-asse)}
.graf-mesi{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:3px;position:relative}
.graf-mesi li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.graf-mesi .pila{height:var(--graf-piano);width:100%;max-width:var(--graf-colonna,24px);display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:0}
.graf-mesi .q{flex:none;height:var(--v,0%);min-height:5px;width:100%;background:var(--gc);border-radius:0}
.graf-mesi .q + .q{box-shadow:inset 0 calc(var(--graf-stacco) * -1) 0 var(--graf-sup)}
.graf-mesi .q:last-child{border-radius:var(--graf-raggio) var(--graf-raggio) 0 0}
.graf-mesi li[data-vuoto] .q{display:none}
/* la data puo' uscire dalla sua colonna: chi disegna il grafico dirada le etichette (una ogni tot colonne), quindi
   le colonne accanto sono vuote e non c'e' niente da pestare. Tagliandola dentro i 10 px di una colonna di un
   giorno resterebbero i puntini al posto della data. */
.graf-mesi .x{margin-top:7px;font-size:10.5px;color:var(--debole);line-height:1.2;text-align:center;white-space:nowrap}
.graf-mesi li.adesso .x{color:var(--testo);font-weight:600}
/* etichetta del mese: quella con l'anno su schermo largo, quella corta sul telefono (la colonna e' 16px) */
.graf-mesi .x b{font-weight:inherit}
.graf-mesi .x .corta{display:none}
@media (max-width:900px){ .graf-mesi .pila{max-width:var(--graf-colonna,20px)} }
@media (max-width:560px){
  .graf-colonne{column-gap:7px}
  .graf-mesi{gap:2px}
  .graf-mesi .x{font-size:9.5px}
  .graf-mesi .pila{max-width:var(--graf-colonna,16px)}
  .graf-mesi .x .lunga{display:none}
  .graf-mesi .x .corta{display:inline}
  .graf-y{font-size:9.5px}
}

/* ---------- legenda ---------- */
.graf-legenda{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px 16px}
.graf-legenda li{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--tenue);min-width:0}
.graf-legenda .punto{flex:none;width:10px;height:10px;border-radius:3px;background:var(--gc)}
.graf-legenda .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14em}
.graf-legenda b{color:var(--testo);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- grafici disegnati da Chart.js (solo Opportunita' > Statistiche, js/statistiche-grafici.js) ----------
   .graf-cj avvolge il blocco JSON dei dati e, in .graf-html, il grafico HTML di sempre: e' il ripiego senza
   JavaScript o senza Chart.js. Il JS aggiunge la tela (.graf-tela) e la legenda a pulsanti: finche' Chart.js non
   ha disegnato la tela non occupa posto e non si vede, poi (.graf-cj-pronto) prende il posto del grafico HTML.
   I colori del disegno li legge il JS da qui (.graf-sonda e le variabili --graf-*, --testo...): nessuna tinta
   e' scritta nel JavaScript, e il tema scuro vale anche per la tela. */
.graf-cj{position:relative;min-width:0}
.graf-cj > .graf-tela{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none;min-width:0}
.graf-cj.graf-cj-pronto > .graf-tela{position:relative;visibility:visible;pointer-events:auto}
.graf-cj.graf-cj-pronto > .graf-html{display:none}
.graf-tela canvas{display:block;max-width:100%}
.graf-tela canvas:focus{outline:none}
.graf-tela canvas:focus-visible{outline:2px solid var(--accento2);outline-offset:4px;border-radius:4px}
/* la scintilla sotto il numero delle commesse: lo stesso stacco dell'SVG che sostituisce */
.graf-cj-scintilla.graf-cj-pronto > .graf-tela{margin-top:10px}
/* la sonda dei colori e l'area che leggono i lettori di schermo: non si vedono e non occupano posto */
.graf-sonda{position:absolute;width:0;height:0;overflow:hidden;color:var(--gc);pointer-events:none}
.graf-vivo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* la legenda a pulsanti, sempre sotto il grafico: tocca una voce e la sua categoria sparisce dal grafico
   (e ritorna); spenta ha il pallino vuoto e il nome barrato, non solo un colore diverso */
.graf-cj > .graf-legenda-cj{display:none}
.graf-cj.graf-cj-pronto > .graf-legenda-cj{display:flex;gap:4px 6px;margin-top:12px}
.graf-legenda-cj li{max-width:100%}
.graf-leg{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:30px;
  padding:4px 10px 4px 8px;border:1px solid transparent;border-radius:999px;background:transparent;
  font:inherit;font-size:11.5px;line-height:1.3;color:var(--tenue);text-align:left;cursor:pointer;
  transition:background-color .15s,border-color .15s,opacity .15s;
}
.graf-leg:hover{background:var(--pannello2);border-color:var(--bordo)}
.graf-leg:focus-visible{outline:2px solid var(--accento2);outline-offset:1px}
.graf-leg .punto{flex:none;width:10px;height:10px;border-radius:3px;background:var(--gc)}
/* il nome va a capo fra una parola e l'altra: mai i puntini a meta' parola */
.graf-legenda .graf-leg .nome{min-width:0;max-width:26em;overflow:visible;white-space:normal;text-overflow:clip}
.graf-leg b{color:var(--testo);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.graf-leg[aria-pressed="false"]{opacity:.7}
.graf-leg[aria-pressed="false"] .punto{background:transparent;box-shadow:inset 0 0 0 1.5px var(--gc)}
.graf-leg[aria-pressed="false"] .nome,.graf-leg[aria-pressed="false"] b{text-decoration:line-through}
/* telefono (anche girato) e iPad: bersagli da 38 px */
@media (pointer:coarse),(max-width:560px){ .graf-leg{min-height:38px;font-size:12.5px} }
@media (prefers-reduced-motion:reduce){ .graf-leg{transition:none} }
/* il suggerimento dei grafici Chart.js: HTML e non disegnato nel canvas, figlio di <body> e position:fixed,
   cosi' non lo taglia ne' una tela bassa (un grafico di una o due righe) ne' il riquadro (overflow:hidden).
   Il JS lo mette sopra il punto (o sotto, se sopra non c'e' posto) e sempre dentro la finestra, a 16 px dai
   lati. Colori invertiti come il suggerimento senza JS (.graf-sug): fondo --testo, scritte --pannello, che
   nel tema scuro cambiano da sole. Una riga lunga va a capo fra una parola e l'altra. */
.graf-sugg{
  position:fixed;left:0;top:0;z-index:1000;box-sizing:border-box;
  max-width:min(360px,calc(100vw - 32px));padding:8px 10px;border-radius:6px;
  background:var(--testo);color:var(--pannello);box-shadow:var(--ombra);
  font-size:12px;line-height:1.42;font-weight:400;text-align:left;
  pointer-events:none;visibility:hidden;opacity:0;
  transition:opacity .12s ease,visibility 0s linear .12s;
}
.graf-sugg.acceso{visibility:visible;opacity:1;transition:opacity .12s ease}
.graf-sugg > div{white-space:normal;overflow-wrap:break-word}
.graf-sugg .sugg-ti{font-weight:600}
.graf-sugg .sugg-ti + .sugg-vo,.graf-sugg .sugg-ti + .sugg-pi{margin-top:5px}
.graf-sugg .sugg-vo.forte{font-weight:600}
.graf-sugg .sugg-vo.rientro{position:relative;padding-left:16px}
.graf-sugg .sugg-chiave{position:absolute;left:0;top:.62em;width:10px;height:3px;border-radius:2px}
.graf-sugg .sugg-pi{margin-top:6px;font-weight:600}
@media (prefers-reduced-motion:reduce){ .graf-sugg,.graf-sugg.acceso{transition:none} }
@media (forced-colors:active){ .graf-sugg{border:1px solid CanvasText} .graf-sugg .sugg-chiave{forced-color-adjust:none} }

/* ---------- suggerimento al passaggio del mouse, senza JS ---------- */
.graf-sug{position:relative}
.graf-sug::before{content:"";position:absolute;inset:-7px -2px;border-radius:6px}
.graf-sug::after{
  content:attr(data-sug);
  position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
  z-index:9;padding:6px 9px;border-radius:var(--raggio);
  background:var(--testo);color:var(--pannello);
  font-size:11px;line-height:1.35;white-space:pre;text-align:left;
  box-shadow:var(--ombra);opacity:0;pointer-events:none;transition:opacity .13s ease;
}
.graf-sug:hover::after{opacity:1}
.graf-mesi .graf-sug::before{inset:0 -2px}
@media (prefers-reduced-motion:reduce){ .graf-sug::after{transition:none} }
@media (hover:none){ .graf-sug::after{display:none} }

/* ---------- scelta grafico/tabella: schede vere, casella nascosta ---------- */
.graf-cambio{position:relative;min-width:0}
.graf-cambio > input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.graf-vista{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--bordo);border-radius:999px;flex:none}
.graf-vista label{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--tenue);cursor:pointer;user-select:none;transition:background-color .15s,color .15s}
.graf-vista label:hover{color:var(--testo)}
.graf-r1:checked ~ .graf-capo .graf-vista label:nth-of-type(1),
.graf-r2:checked ~ .graf-capo .graf-vista label:nth-of-type(2){background:var(--blu);color:#fff}
.graf-r1:checked ~ .graf-p2,.graf-r2:checked ~ .graf-p1{display:none}
/* la tabella gemella puo' avere una colonna per categoria: su schermo largo scorre dentro al riquadro,
   sul telefono diventa schede e non scorre affatto */
.graf-p2{overflow-x:auto}
@media (max-width:640px){ .graf-p2{overflow-x:visible} }
.graf-r1:focus-visible ~ .graf-capo .graf-vista label:nth-of-type(1),
.graf-r2:focus-visible ~ .graf-capo .graf-vista label:nth-of-type(2){outline:2px solid var(--accento2);outline-offset:2px}

.graf-tabella{width:100%;border-collapse:collapse;font-size:12.5px}
.graf-tabella th,.graf-tabella td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--bordo)}
.graf-tabella th{font-size:11px;font-weight:600;color:var(--tenue);text-transform:uppercase;letter-spacing:.05em}
.graf-tabella td.n,.graf-tabella th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.graf-tabella tbody tr:last-child td{border-bottom:0}
.graf-tabella .punto{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--gc);margin-right:7px;vertical-align:baseline}
/* telefono: la tabella gemella diventa schede, mai scorrimento di lato */
@media (max-width:640px){
  .graf-tabella thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .graf-tabella tbody tr{display:block;padding:9px 0;border-bottom:1px solid var(--bordo)}
  .graf-tabella tbody tr:last-child{border-bottom:0}
  .graf-tabella td,.graf-tabella th{border-bottom:0;padding:2px 0}
  .graf-tabella td:first-child{font-weight:600;font-size:13px}
  /* l'etichetta della colonna viaggia dentro la cella: con un nome di categoria lungo la coppia
     "etichetta + valore" e' piu' larga del telefono, e senza andare a capo verrebbe tagliata via */
  .graf-tabella td.n{display:inline-block;text-align:left;margin-right:14px;color:var(--tenue);white-space:normal;overflow-wrap:anywhere;max-width:100%}
  .graf-tabella td.n::before{content:attr(data-eti) " ";font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--debole)}
  /* la scheda salta le celle senza valore (data-vuoto, scritto da Grafici.Tabella): con trenta giorni e sette
     categorie erano quasi duecento trattini in fila, e per leggere il totale di un giorno si scorrevano sette
     righe di "-". La colonna del totale non porta mai data-vuoto, quindi resta sempre. */
  .graf-tabella td.n[data-vuoto]{display:none}
}

/* ---------- niente dati ---------- */
.graf-vuoto{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:120px;padding:24px 18px;text-align:center;
  color:var(--debole);font-size:12.5px;
  border:1px dashed var(--bordo);border-radius:var(--raggio);
}
.graf-vuoto svg{color:var(--debole);opacity:.7}
.graf-nota{margin:12px 0 0;font-size:11px;color:var(--debole);line-height:1.45}

/* ---------- filtri a pillole: sono link, la scelta sta nell'indirizzo ---------- */
.graf-filtro{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;min-width:0}
.graf-filtro-eti{font-size:11.5px;color:var(--tenue);flex:none}
.graf-pillole{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
/* il <li> e' un elemento flex: senza min-width:0 non puo' stringersi sotto al suo contenuto e il nome lungo di
   una categoria farebbe scorrere di lato tutta la pagina sul telefono (l'ellissi sta gia' sullo <span>) */
.graf-pillole li{min-width:0;max-width:100%}
.graf-pillola{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:5px 12px;border-radius:999px;border:1px solid var(--bordo-forte);
  background:var(--pannello);color:var(--testo);font-size:12.5px;text-decoration:none;
  transition:background-color .15s,border-color .15s,color .15s;
}
.graf-pillola:hover{border-color:var(--accento)}
.graf-pillola > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.graf-pillola .punto{flex:none;width:9px;height:9px;border-radius:2px;background:var(--gc,var(--graf-altro))}
.graf-pillola b{font-weight:600;font-size:11px;color:var(--tenue);font-variant-numeric:tabular-nums}
.graf-pillola.scelta{background:var(--blu);border-color:var(--blu);color:#fff}
.graf-pillola.scelta b{color:rgba(255,255,255,.78)}
.graf-pillola.scelta .punto{box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.graf-pillola:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
/* telefono: le pillole restano queste (vanno gia' a capo da sole, nessuna riga scorre di lato), ma diventano
   bersagli da 38 px e il testo si legge. Il nome lungo di una categoria continua a troncarsi con l'ellissi. */
@media (max-width:430px){
  .graf-filtro{gap:8px 10px}
  .graf-pillole{gap:8px}
  .graf-pillola{min-height:38px;padding:8px 14px;font-size:13px}
  .graf-pillola b{font-size:11.5px}
  /* l'asse verticale e le etichette del tempo: meno fitte, cosi' i numeri non si toccano */
  .graf-y{font-size:10px}
  .graf-mesi .x{font-size:10px}
}

/* =====================================================================
   BARRA DEI FILTRI DELLE STATISTICHE (prefisso stb-, STatistiche Barra)
   Sostituisce le tre file di pillole incolonnate: con trenta categorie
   erano alte 390 px su computer e 1177 px sul telefono.
     riga 1  il PERIODO: sei scelte in un gruppo unito (link veri)
     riga 2  una frase che dice che cosa si sta guardando; a destra il
             pulsante "Filtri" con il contatore rosso, come nel catalogo.
   Il pannello e' un <details>: si apre e si chiude senza JavaScript, con
   la tastiera, e i lettori di schermo lo annunciano da soli. Dentro, le
   voci non sono pillole a capo ma due elenchi in colonna: 3 voci o 40
   occupano lo stesso spazio. Le pillole .graf-pillola restano dove
   servono ancora (l'ordinamento degli articoli dentro i riquadri).
   ===================================================================== */
/* la barra misura se stessa (container): con il menu laterale aperto a 1024 px e' stretta come un tablet,
   e alcune scelte dipendono dallo spazio vero della barra, non dalla larghezza della finestra */
.stb{display:flex;flex-direction:column;gap:8px;margin:0 0 20px;min-width:0;container:stb / inline-size}

/* ---------- riga 1: il periodo ---------- */
.stb-periodo{display:flex;align-items:center;gap:10px;min-width:0}
.stb-eti{flex:none;font-size:11.5px;color:var(--tenue)}
.stb-seg{
  list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:3px;gap:2px;min-width:0;
  border:1px solid var(--bordo);border-radius:999px;background:var(--pannello2);
}
.stb-seg li{display:flex;min-width:0}
/* flex:1 sull'ancora: la casella si riempie tutta, anche quando su telefono le sei scelte
   diventano una griglia 3x2 (altrimenti il fondo blu resta un bottoncino in mezzo) */
.stb-seg > li > a{flex:1 1 auto}
.stb-seg a{
  display:flex;align-items:center;justify-content:center;min-height:32px;padding:5px 13px;
  border-radius:999px;font-size:12.5px;line-height:1.2;color:var(--tenue);text-decoration:none;
  white-space:nowrap;transition:background-color .15s,color .15s;
}
.stb-seg a:hover{background:var(--pannello);color:var(--testo)}
/* la scelta: lo stesso blu pieno di .graf-pillola.scelta, cosi' la pagina resta una sola */
.stb-seg a.scelta{background:var(--blu);color:#fff;font-weight:600}
.stb-seg a:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}

/* ---------- riga 2: la frase che riassume, ed e' il pulsante ---------- */
.stb-alt{min-width:0}
/* min-height fissa: la riga e' alta uguale con zero filtri (le diciture in chiaro) e con due
   (le pillole con la x), cosi' la pagina non salta quando si toglie un filtro */
.stb-sunto{
  display:flex;align-items:center;gap:10px;min-height:42px;
  padding:4px 6px 4px 10px;margin:0 -6px 0 -10px;
  border-radius:999px;cursor:pointer;list-style:none;user-select:none;
  font-size:12.5px;line-height:1.45;color:var(--tenue);
  transition:background-color .15s;
}
.stb-sunto::-webkit-details-marker{display:none}
.stb-sunto:hover{background:var(--pannello2)}
.stb-sunto:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
/* senza niente da scegliere la frase non apre niente: non e' un pulsante */
.stb-sunto.senza{cursor:default;margin-bottom:0}
.stb-sunto.senza:hover{background:transparent}
/* l'occhio sta DENTRO la frase: quando la frase va a capo (telefono) non resta un'icona orfana in cima */
.stb-occhio{flex:none;margin-right:7px;color:var(--tenue)}
/* una riga sola: il periodo e le date non si spezzano mai, e sono le pillole dei filtri a stringersi
   (i nomi per intero restano nel title e nel pannello). Cosi' la riga e' alta uguale con zero filtri
   e con due, e togliendo un filtro la pagina non salta.
   padding e margine verticali (4 px, che si annullano): overflow:hidden taglia al bordo del padding, e
   senza questo margine la x dei filtri (38 px dentro una pillola di 32) resterebbe colpibile solo per 33 px. */
.stb-frase{min-width:0;flex:1 1 auto;display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;padding:4px 0;margin:-4px 0}
.stb-frase .dice{flex:none;margin-right:4px}
/* barra stretta (tablet, o computer con il menu laterale): "Stai guardando" lo dice gia' l'occhio, e lo
   spazio serve ai nomi dei filtri accesi, che altrimenti restano tre lettere e i puntini. Per i lettori
   di schermo la dicitura resta (nascosta alla vista, non tolta). */
@container stb (max-width:760px){
  .stb-frase .dice{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
/* periodo e date: un pezzo solo, in fila su computer, uno sotto l'altro sul telefono */
.stb-quando{flex:none;display:inline-flex;align-items:baseline;min-width:0;white-space:nowrap}
.stb-frase b{flex:none;color:var(--testo);font-weight:600;white-space:nowrap}
.stb-frase .sep{margin:0 5px;color:var(--bordo-forte)}
.stb-frase .tutti{color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* la data non si spezza: "19 ago - 17 set 2026" sta tutta intera o non si vede */
.stb-frase .data{flex:none;margin-left:5px;color:var(--debole);white-space:nowrap}
/* stesso padding che si annulla di .stb-frase: la x resta colpibile per tutti i suoi 38 px */
.stb-pezzi{display:flex;align-items:center;min-width:0;flex:0 1 auto;overflow:hidden;padding:4px 0;margin:-4px 0}
.stb-frase .pezzo{display:inline-flex;align-items:center;min-width:0;flex:0 1 auto}
/* quando lo spazio manca si stringe la pillola (il nome per intero sta nel title e nel pannello),
   non la dicitura in chiaro che le sta accanto. Senza pillole (due diciture e basta, per esempio fra
   561 e 580 px) si stringono le diciture, con i puntini: mai tagliate di netto a meta' parola */
.stb-pezzi:has(.stb-fil) .pezzo:has(.tutti){flex-shrink:0}
/* davanti a una pillola il puntino non serve: la pillola si stacca da sola */
.stb-frase .pezzo:has(.stb-fil) .sep{display:none}
.stb-frase .pezzo:has(.stb-fil){margin-left:7px}
.stb-frase .pezzo:has(.stb-fil):first-child{margin-left:9px}
/* il filtro acceso: pallino della tinta, nome, e la x che lo toglie */
.stb-fil{
  display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 2px 2px 9px;border-radius:999px;
  min-width:0;max-width:min(100%,30ch);
  border:1px solid color-mix(in srgb,var(--accento-testo) 45%,transparent);
  background:var(--accento-velo);color:var(--accento-testo);font-weight:600;
}
.stb-fil .punto{flex:none;width:8px;height:8px;border-radius:2px;background:var(--gc,var(--graf-altro))}
/* un nome lunghissimo non si mangia la riga: qui si taglia con i puntini (per esteso sta nel title
   e nel pannello, dove va a capo per intero) */
.stb-fil .nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* la x: bersaglio di 38 x 38 px davvero, ma i margini negativi fanno si' che dentro la pillola ne
   occupi 29 x 26 (in alto e in basso sborda di 3 px, a sinistra si prende lo stacco dal nome, a destra
   si ferma un pixel prima del bordo esterno della pillola): la riga resta alta uguale a quando i filtri
   non ci sono e la pillola larga come prima. Quel pixel di bordo tiene la x staccata dal pezzo che viene
   dopo ("tutti gli agenti"): a contatto, con le misure frazionarie l'ultimo pixel lo vinceva lui. */
.stb-togli{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin:-6px -2px -6px -7px;border-radius:999px;
  color:var(--accento-testo);text-decoration:none;
}
.stb-togli:hover{background:color-mix(in srgb,var(--accento) 22%,transparent)}
.stb-togli:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}

/* il pezzo di destra: e' il pulsante "Filtri" del catalogo, contatore rosso compreso */
.stb-apri{
  flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;min-height:34px;border:1px solid var(--bordo);border-radius:var(--raggio);
  background:var(--pannello);color:var(--testo);font-size:12.5px;
  transition:border-color .15s,color .15s;
}
.stb-sunto:hover .stb-apri{border-color:var(--accento);color:var(--accento-testo)}
.stb-apri .conta{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accento);
  color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;
}
.stb-apri .frec{flex:none;color:var(--tenue);transition:transform .2s}
.stb-alt[open] .stb-apri{border-color:var(--accento);color:var(--accento-testo)}
.stb-alt[open] .stb-apri .frec{transform:rotate(180deg);color:var(--accento-testo)}
/* con almeno un filtro acceso il pulsante si accende come nel catalogo (.cat-filtri-apri.attivo) */
.stb-alt.attivo .stb-apri{border-color:var(--accento)}
/* senza contatore il pulsante tiene lo stesso posto (18 px del pallino piu' 8 di stacco): cosi' alla
   frase resta sempre la stessa larghezza, va a capo sempre nello stesso punto e la barra e' alta uguale
   con zero filtri e con due */
.stb-alt:not(.attivo) .stb-apri{padding-right:38px}

/* ---------- il pannello ---------- */
.stb-pannello{
  --stb-lista:var(--sfondo);
  --stb-vel:rgba(16,34,43,.24);
  margin-top:8px;padding:14px 16px 12px;
  border:1px solid var(--bordo);border-radius:var(--raggio);
  background:var(--pannello);box-shadow:var(--ombra);
}
/* due colonne su computer, una sola quando non ci stanno: mai scorrimento laterale */
.stb-griglia{display:grid;gap:14px 18px;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));align-items:start}
.stb-col{min-width:0}
.stb-col h3{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--testo)}
.stb-col h3 svg{flex:none;width:15px;height:15px;color:var(--accento-testo)}
.stb-col h3 small{margin-left:auto;font-weight:400;font-size:11px;color:var(--debole);font-variant-numeric:tabular-nums}

/* la casella di ricerca: c'e' solo oltre le otto voci, e nasce hidden nel markup (la scopre
   js\statistiche-filtri.js). Senza JavaScript non compare: niente comandi che non fanno niente. */
.stb-cerca{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:0 10px;
  min-height:38px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--sfondo)}
.stb-cerca[hidden]{display:none}
.stb-cerca svg{flex:none;color:var(--debole)}
/* il campo riempie tutta la casella: il bersaglio e' alto 38 px davvero, non 36 con due bordi intorno */
.stb-cerca input{
  flex:1;min-width:0;align-self:stretch;min-height:38px;padding:0;border:0;background:transparent;
  color:var(--testo);font:inherit;font-size:13px;
}
.stb-cerca input::placeholder{color:var(--debole)}
.stb-cerca input:focus{outline:none}
.stb-cerca:focus-within{border-color:var(--accento)}
.stb-niente{margin:8px 2px 0;font-size:12px;color:var(--debole)}
.stb-niente[hidden]{display:none}

/* l'elenco: in colonna, non a capo. Con 40 voci scorre da solo e il pannello resta della stessa
   altezza; l'ombra ai bordi compare solo quando c'e' davvero altro da vedere (tutto in CSS). */
.stb-scorri{position:relative;min-width:0}
.stb-voci{
  list-style:none;margin:0;padding:2px;max-height:min(44vh,262px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border:1px solid var(--bordo);border-radius:var(--raggio);
  background:
    linear-gradient(var(--stb-lista) 40%, transparent) top / 100% 22px no-repeat local,
    linear-gradient(transparent, var(--stb-lista) 60%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--stb-vel), transparent) top / 100% 11px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--stb-vel), transparent) bottom / 100% 11px no-repeat scroll,
    var(--stb-lista);
}
/* con molte voci l'altezza e' fissa, non solo al massimo: scegliendo un filtro cambia il numero delle voci
   dell'altra colonna, e senza questo il pannello si allungherebbe e accorcerebbe a ogni scelta */
.stb-scorri.molte .stb-voci{height:min(44vh,262px)}
/* la ricerca nasconde le voci con l'attributo hidden: nessuna regola display lo deve coprire */
.stb-voci li[hidden]{display:none}
.stb-voce{
  display:flex;align-items:center;gap:9px;min-height:38px;padding:6px 9px;border-radius:3px;
  color:var(--testo);font-size:13px;line-height:1.3;text-decoration:none;
}
/* i nomi lunghissimi vanno a capo invece di essere tagliati: qui lo spazio c'e' */
.stb-voce > span{flex:1;min-width:0;overflow-wrap:anywhere}
.stb-voce b{flex:none;font-weight:400;font-size:11.5px;color:var(--debole);font-variant-numeric:tabular-nums}
.stb-voce .punto{flex:none;width:9px;height:9px;border-radius:2px;background:var(--gc,var(--graf-altro))}
.stb-voce .segno{flex:none;width:14px;height:14px;color:var(--accento-testo);opacity:0}
.stb-voce:hover{background:var(--accento-velo)}
.stb-voce:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.stb-voce.scelta{background:var(--accento-velo);color:var(--accento-testo);font-weight:600}
.stb-voce.scelta b{color:var(--accento-testo)}
.stb-voce.scelta .segno{opacity:1}
/* la voce che toglie il filtro sta in cima, staccata (come .cat-filato-voce.tutti). Quando e' lei
   quella accesa NON si tinge di rosso: "nessun filtro" e' il riposo, non un allarme. */
.stb-voce.tutte{margin-bottom:3px;border-bottom:1px solid var(--bordo);border-radius:3px 3px 0 0;color:var(--tenue)}
.stb-voce.tutte.scelta{background:transparent;color:var(--testo);font-weight:600}
.stb-voce.tutte.scelta b{color:var(--debole)}
.stb-voce.tutte.scelta .segno{color:var(--tenue)}
.stb-voce.tutte.scelta:hover{background:var(--accento-velo)}

/* "Mostra tutte le N voci": c'e' solo sul telefono e solo con il JavaScript (vedi la regola .corta sotto) */
.stb-piu{
  display:none;align-items:center;justify-content:center;width:100%;min-height:38px;margin-top:6px;padding:6px 10px;
  border:1px dashed var(--bordo-forte);border-radius:var(--raggio);background:transparent;
  color:var(--accento-testo);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
.stb-piu:hover{background:var(--accento-velo);border-style:solid}
.stb-piu:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}

.stb-piede{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:12px}
.stb-piede small{color:var(--debole);font-size:11.5px;min-width:0}
/* "Azzera" e' un LINK (l'indirizzo senza filtri): funziona senza JavaScript */
.stb-azzera{flex:none}

/* ---------- tablet stretto ---------- */
@media (max-width:760px){
  .stb-periodo{flex-direction:column;align-items:stretch;gap:5px}
  .stb-eti{font-size:11px}
}

/* ---------- smartphone (360-430 px) ----------
   Le sei scelte non stanno in riga: diventano una griglia 3x2. Niente fila che scorre di lato,
   niente testo tagliato, ogni casella alta almeno 38 px. E gli elenchi NON scorrono dentro la
   pagina che scorre: si allungano quanto serve, perche' uno scorrimento dentro l'altro sul
   telefono e' una trappola (il dito muove la lista sbagliata). Quelle regole stanno nel blocco
   subito dopo, che vale anche per il telefono girato. */
@media (max-width:560px){
  /* la parola "Periodo" sparisce: sei nomi di tempo si capiscono da soli e la frase sotto lo ripete.
     Per i lettori di schermo resta aria-label sulla <nav>, quindi non si perde niente */
  .stb-eti{display:none}
  /* anche "Stai guardando" sparisce: l'occhio davanti dice gia' di che si tratta */
  .stb-frase .dice{display:none}
  .stb-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border-radius:var(--raggio)}
  .stb-seg a{min-height:38px;padding:5px 4px;border-radius:3px;font-size:12px;white-space:normal;text-align:center}
  /* due righe sempre: sopra il periodo con le date e il pulsante, sotto i due filtri (le pillole
     accese oppure le diciture "tutte le categorie / tutti gli agenti"). La frase si scioglie dentro
     la riga (display:contents): cosi' i filtri prendono tutta la larghezza della barra invece della
     meta' rimasta accanto al pulsante, e i nomi si leggono invece di finire in tre puntini. */
  /* mezzo punto di carattere in meno: il periodo, le date e il pulsante stanno sulla stessa riga
     anche a 390 px, invece di occuparne tre */
  .stb-sunto{align-items:center;flex-wrap:wrap;row-gap:4px;column-gap:6px;padding:6px 8px;border-radius:var(--raggio);margin:0;font-size:12px}
  .stb-frase .data{font-size:11.5px}
  .stb-frase{display:contents}
  .stb-occhio{margin-right:0}
  .stb-frase .data{margin-left:0}
  /* periodo sopra e date sotto, accanto al pulsante: la prima riga e' alta uguale con ogni periodo e in
     tutte e due le lingue, e a 360 px il pulsante non finisce da solo su una riga sua */
  .stb-quando{flex:1 1 0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.3}
  .stb-quando > *{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .stb-apri{order:1;margin-left:auto;padding:6px 10px}
  /* la riga dei filtri e' alta come una pillola anche quando ci sono solo le diciture in chiaro:
     togliendo un filtro la barra non si accorcia sotto il dito (40 = 32 della pillola + i 4+4 px di
     padding che il margine negativo annulla: nel flusso resta 32) */
  .stb-pezzi{order:2;flex:1 0 100%;gap:6px;min-height:40px}
  .stb-frase .pezzo:has(.stb-fil):first-child{margin-left:0}
  .stb-frase .pezzo:first-child .sep{display:none}
  .stb-fil{max-width:100%}
  .stb-pannello{padding:12px 12px 10px}
  .stb-piede small{flex:1 1 100%;order:2}
  .stb-azzera{order:1;margin-left:auto}
}

/* ---------- telefono, dritto o girato: gli elenchi del pannello ----------
   Niente scorrimento dentro lo scorrimento: l'elenco si allunga quanto serve e a scorrere e' solo la
   pagina (con il dito, due scorrimenti annidati sono una trappola). Vale anche con il telefono girato
   (844x390, 740x360, 667x375): largo come un tablet, ma alto 360-420 px, dove un elenco di 170 px che
   scorre dentro la pagina sarebbe la trappola peggiore. (pointer:coarse) and (max-height:520px) prende i
   telefoni girati e lascia fuori l'iPad (alto almeno 744 px anche in orizzontale) e i computer. */
@media (max-width:560px), (pointer:coarse) and (max-height:520px){
  .stb-voci,.stb-scorri.molte .stb-voci{max-height:none;height:auto;overflow:visible;background:var(--stb-lista)}
  /* ...e con tante voci si ferma: "Tutte" piu' le prime otto (la scelta sta sempre in cima), poi il
     pulsante che mostra le altre. La classe .corta la mette js\statistiche-filtri.js e la toglie mentre
     si cerca: senza JavaScript l'elenco resta intero, quindi niente resta irraggiungibile */
  .stb-scorri.corta .stb-voci > li:nth-child(n+10){display:none}
  .stb-scorri.corta .stb-piu{display:flex}
}

/* dita invece del mouse: righe e caselle piu' alte */
@media (pointer:coarse){
  .stb-seg a{min-height:38px}
  .stb-voce{min-height:44px}
  .stb-sunto{min-height:46px}
  /* tutta la frase apre il pannello, ma il pulsante che si vede deve essere alto come gli altri bersagli */
  .stb-apri{min-height:38px}
}

/* ---------- tema scuro ----------
   Quasi tutto viene dalle variabili; qui solo dove serve piu' contrasto (il gruppo del periodo e
   il velo rosso, che sul fondo petrolio sono troppo timidi). */
html[data-tema="scuro"] .stb-seg{background:rgba(239,232,217,.05);border-color:var(--bordo)}
html[data-tema="scuro"] .stb-seg a:hover{background:rgba(239,232,217,.09)}
html[data-tema="scuro"] .stb-sunto:hover{background:rgba(239,232,217,.06)}
html[data-tema="scuro"] .stb-sunto.senza:hover{background:transparent}
html[data-tema="scuro"] .stb-pannello{--stb-lista:#0e1013;--stb-vel:rgba(0,0,0,.55)}
html[data-tema="scuro"] .stb-cerca{background:#0e1013}
html[data-tema="scuro"] .stb-voce:hover{background:rgba(255,75,92,.14)}
html[data-tema="scuro"] .stb-voce.scelta{background:rgba(255,75,92,.16)}
/* anche al buio "nessun filtro" resta in grigio: il rosso e' solo del filtro vero */
html[data-tema="scuro"] .stb-voce.tutte.scelta{background:transparent;color:var(--testo)}
html[data-tema="scuro"] .stb-voce.tutte.scelta:hover{background:rgba(255,75,92,.14)}
html[data-tema="scuro"] .stb-fil{background:rgba(255,75,92,.14)}
html[data-tema="scuro"] .stb-togli:hover{background:rgba(255,75,92,.26)}

/* chi ha chiesto meno animazioni non le vede */
@media (prefers-reduced-motion:reduce){
  .stb-seg a,.stb-sunto,.stb-apri,.stb-apri .frec{transition:none}
}

/* ---------- testatina della pagina: introduzione a sinistra, il pulsante del PDF a destra ---------- */
.graf-capo-pagina{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:0 0 16px}
.graf-capo-pagina .intro{margin:0;flex:1 1 30ch;min-width:0}
.graf-pdf{flex:none;gap:7px}
.graf-pdf svg{flex:none}
/* telefono: il pulsante va a capo, prende tutta la riga ed e' alto almeno 38 px, come le pillole */
@media (max-width:560px){ .graf-pdf{width:100%;justify-content:center;min-height:38px;font-size:13px} }

/* ---------- impaginazione dei riquadri dei grafici ---------- */
.graf-testata{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 0 14px}
.graf-testata h2{margin:0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px}
.graf-testata h2 svg{color:var(--accento-testo);flex:none}
.graf-testata p{margin:3px 0 0;font-size:12px;color:var(--tenue);max-width:64ch}
.graf-due{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;margin-bottom:20px}
.graf-due > *{margin-bottom:0;min-width:0}
@media (max-width:1000px){ .graf-due{grid-template-columns:minmax(0,1fr)} }
/* fra 1001 e 1300px i due riquadri restano affiancati ma sono stretti: il nome si prende le sue 13.5em e alla
   pista non resta niente (misurata 0px a 1024, 42px a 1150, 107px a 1280), cosi' al posto delle barre restavano
   tutti trattini uguali e il grafico non diceva piu' niente. Qui dentro la riga prende la forma del telefono:
   nome e valore sopra, barra sotto a tutta la colonna. */
@media (min-width:1001px) and (max-width:1300px){
  .graf-due .graf-barre li{grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"et val" "pista pista";row-gap:5px;padding:7px 0}
  .graf-due .graf-barre .et .nome{white-space:normal;overflow:visible;text-overflow:clip}
}

/* ---------- trama: il canale di scorta, solo in stampa e a colori forzati ---------- */
@media print{
  .graf .q,.graf .graf-legenda .punto{
    background-image:repeating-linear-gradient(var(--ga,45deg),rgba(255,255,255,.55) 0 3px,rgba(255,255,255,0) 3px 7px);
    print-color-adjust:exact;-webkit-print-color-adjust:exact;
  }
  .graf-sug::after{display:none}
  .graf-vista{display:none}
  .graf-r1:checked ~ .graf-p2{display:block}
}
@media (forced-colors:active){
  .graf .q{border:1px solid CanvasText}
  .graf-impilate .q + .q{border-left-width:2px}
  .graf-mesi .q + .q{border-bottom-width:2px}
  .graf-legenda .punto,.graf-tabella .punto{border:1px solid CanvasText}
  .graf-rete i{background:CanvasText}
}

/* ---------- Finestra dei documenti PDF (js/pdf-finestra.js) ---------- */
/* La commessa dell'opportunita' e le schede tecniche si guardano qui dentro, mai in una scheda nuova: con
   l'applicazione installata sul telefono uscire verso il visualizzatore di sistema vuol dire non tornare piu'
   indietro. Le pagine sono disegnate su canvas da pdf.js (js/lib). Su computer una finestra grande ma non a
   tutto schermo, sul telefono quasi piena; dietro i fogli bianchi un grigio neutro in tutti e due i temi. */
html.pdfw-aperta{overflow:hidden}
dialog.pdfw{
  --pdfw-fondo:#d9d4c9;
  width:min(1120px,94vw);height:min(90vh,980px);max-width:none;max-height:none;
  padding:0;margin:auto;border:1px solid var(--bordo);border-radius:8px;overflow:hidden;
  background:var(--pannello);color:var(--testo);font-family:var(--carattere);box-shadow:var(--ombra);
}
html[data-tema="scuro"] dialog.pdfw{--pdfw-fondo:#0c0d10}
@supports (height:100dvh){dialog.pdfw{height:min(90dvh,980px)}}
dialog.pdfw[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
dialog.pdfw::backdrop{background:rgba(4,20,28,.78)}

.pdfw-testa{grid-row:1;display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px 9px 16px;border-bottom:1px solid var(--bordo);background:var(--pannello)}
.pdfw-titolo{flex:1;min-width:0;display:grid;gap:1px}
.pdfw-nome{font-size:15px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfw-info{font-size:11.5px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfw-info:empty{display:none}
.pdfw-info.pdfw-avviso{color:var(--pericolo);font-weight:600;white-space:normal}
.pdfw-strumenti{flex:none;display:flex;align-items:center;gap:6px}
.pdfw-lente{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--bordo);border-radius:999px}

.pdfw-b{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:36px;height:36px;padding:0 10px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--testo);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,filter .2s}
.pdfw-b:hover{background:var(--pannello2);color:var(--accento-testo)}
.pdfw-b:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
.pdfw-b:disabled{opacity:.34;cursor:default;background:transparent;color:var(--testo)}
/* dentro l'applicazione installata "apri in una nuova scheda" sparisce davvero: display:inline-flex qui sopra
   batterebbe il display:none che il browser da' agli elementi con hidden */
.pdfw-b[hidden]{display:none}
.pdfw-b svg{flex:none}
.pdfw-lente .pdfw-b{min-width:30px;height:30px;padding:0}
.pdfw-zoom{min-width:50px;height:30px;padding:0 4px;border:0;border-radius:999px;background:transparent;color:var(--tenue);font:inherit;font-size:12px;font-variant-numeric:tabular-nums;cursor:pointer}
.pdfw-zoom:hover{color:var(--accento-testo)}
.pdfw-scarica{background:var(--accento);color:#fff}
.pdfw-scarica:hover{background:var(--accento);color:#fff;filter:brightness(1.08)}
.pdfw-scarica:disabled{background:var(--accento);color:#fff}

.pdfw-corpo{grid-row:2;grid-column:1;overflow:auto;overscroll-behavior:contain;background:var(--pdfw-fondo);touch-action:pan-x pan-y;outline:none;-webkit-overflow-scrolling:touch}
.pdfw-corpo:focus-visible{box-shadow:inset 0 0 0 2px var(--campo-alone)}
/* la larghezza in linea (zoom x 100%) la scrive misura() in js/pdf-finestra.js: niente min-width, altrimenti
   sotto il 100% il contenitore non si stringe e la pagina, disegnata con meno pixel, resta grande uguale e
   viene solo sgranata. Con margin:0 auto, rimpicciolita, resta in mezzo. */
.pdfw-pagine{position:relative;width:100%;margin:0 auto;padding:8px;display:grid;gap:10px;justify-items:center;transform-origin:0 0}
.pdfw-pagine.pdfw-pizzico{will-change:transform}
.pdfw-pagina{width:100%;background:#fff;border-radius:2px;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.pdfw-foglio{display:block;width:100%;height:auto;border-radius:2px}

/* attesa, errori e ripiego: mai una finestra vuota */
.pdfw-velo{grid-row:2;grid-column:1;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 20px;text-align:center;background:var(--pannello)}
.pdfw-velo[hidden]{display:none}
.pdfw-filatoio{display:none;width:34px;height:34px;border-radius:50%;border:3px solid var(--bordo);border-top-color:var(--accento);animation:gira .8s linear infinite}
.pdfw-velo.pdfw-attesa .pdfw-filatoio{display:block}
.pdfw-messaggio{margin:0;max-width:34em;font-size:14px;line-height:1.5;color:var(--tenue)}
.pdfw-velo-azioni{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pdfw-velo-azioni:empty{display:none}

.pdfw-piede{grid-row:3;display:flex;align-items:center;justify-content:center;gap:8px;padding:5px 12px;border-top:1px solid var(--bordo);background:var(--pannello)}
.pdfw-conta{min-width:9.5em;text-align:center;font-size:12.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
dialog.pdfw.pdfw-unica .pdfw-piede{display:none}
dialog.pdfw.pdfw-vuota .pdfw-corpo,dialog.pdfw.pdfw-vuota .pdfw-piede{display:none}
/* finche' il documento non c'e' (attesa, errore, ripiego) i comandi che lavorano sul documento non servono:
   quelli utili in quel momento stanno in mezzo alla finestra, sotto il messaggio */
dialog.pdfw:not(.pdfw-pronta) .pdfw-lente,dialog.pdfw:not(.pdfw-pronta) .pdfw-scarica,dialog.pdfw:not(.pdfw-pronta) .pdfw-piede{display:none}
dialog.pdfw:not(.pdfw-pronta) .pdfw-posta{display:none}

/* la scheda tecnica per e-mail (05/10/2026): "Invia per e-mail" accanto a Scarica e un riquadro sopra il documento */
.pdfw-posta{border-color:var(--bordo-forte)}
.pdfw-posta-pannello{grid-row:2 / 4;grid-column:1;z-index:3;display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:22px 16px;background:color-mix(in srgb,var(--pdfw-fondo) 55%,transparent);backdrop-filter:blur(2px)}
.pdfw-posta-pannello[hidden]{display:none}
.pdfw-posta-scheda{display:grid;gap:12px;width:min(560px,100%);padding:18px 18px 16px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.pdfw-posta-titolo{font-size:15px;font-weight:700}
.pdfw-posta-campo{display:grid;gap:5px;font-size:12.5px;font-weight:600;color:var(--tenue)}
.pdfw-posta-campo input,.pdfw-posta-campo textarea{width:100%;padding:9px 11px;border:1px solid var(--bordo-forte);border-radius:8px;background:var(--pannello2);color:var(--testo);font:inherit;font-size:14px;font-weight:400;resize:vertical}
.pdfw-posta-campo input:focus,.pdfw-posta-campo textarea:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.pdfw-posta-campo small{font-size:11.5px;font-weight:400;color:var(--debole)}
.pdfw-posta-esito{margin:0;font-size:13px;color:var(--tenue)}
.pdfw-posta-esito:empty{display:none}
.pdfw-posta-esito.ok{color:var(--successo,#1e9e57);font-weight:600}
.pdfw-posta-esito.errore{color:var(--pericolo);font-weight:600}
.pdfw-posta-azioni{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

/* indirizzi suggeriti mentre si scrivono i destinatari (js/rubrica-posta.js, 05/10/2026): la tendina sta subito
   sotto la casella, dentro il suo contenitore (rp-ospite); il tipo e' una pillola: Effe Pi rosso, agente blu,
   supervisore viola */
.rp-ospite{position:relative}
.rp-elenco{position:absolute;z-index:60;margin:0;padding:4px;list-style:none;max-height:300px;overflow:auto;border:1px solid var(--bordo-forte);border-radius:10px;background:var(--pannello);box-shadow:0 16px 36px -14px rgba(0,0,0,.6)}
.rp-elenco[hidden]{display:none}
.rp-voce{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 10px;align-items:center;padding:7px 10px;border-radius:7px;cursor:pointer}
.rp-voce:hover,.rp-voce.attivo{background:var(--accento-velo)}
.rp-nome{min-width:0;font-size:13.5px;font-weight:600;color:var(--testo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-mail{grid-column:1;min-width:0;font-size:12px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-tipo{grid-column:2;grid-row:1 / span 2;padding:2px 8px;border:1px solid;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.rp-t-interno{color:#c4001a;border-color:rgba(218,2,25,.4);background:rgba(218,2,25,.08)}
.rp-t-agente{color:#1d5fd1;border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.08)}
.rp-t-supervisore{color:#6d4fc4;border-color:rgba(109,79,196,.45);background:rgba(109,79,196,.1)}
html[data-tema="scuro"] .rp-t-interno{color:#ff5c6b}
html[data-tema="scuro"] .rp-t-agente{color:#8ab4ff}
html[data-tema="scuro"] .rp-t-supervisore{color:#b39cff}

@media (max-width:760px){
  dialog.pdfw{width:100vw;height:100vh;border:0;border-radius:0}
  .pdfw-testa{padding:7px 7px 7px 12px;gap:8px}
  .pdfw-nome{font-size:14px}
  .pdfw-etichetta{display:none}
  .pdfw-b{min-width:40px;height:40px;padding:0 8px}
  .pdfw-lente .pdfw-b{min-width:34px;height:34px}
  .pdfw-piede{padding:4px 10px}
}
@supports (height:100dvh){@media (max-width:760px){dialog.pdfw{height:100dvh}}}
@media (max-width:480px){.pdfw-zoom{display:none}}
/* al tocco (telefono, tablet, app installata) ogni comando della finestra e' alto almeno 40px, compresi - e +
   della lente e il 100%, che restavano a 30-34px; tutti i PDF della chat passano di qui. Col mouse la lente
   resta compatta. */
@media (pointer:coarse){
  .pdfw-b,.pdfw-lente .pdfw-b{min-width:40px;height:40px}
  .pdfw-lente{gap:0;padding:1px}
  .pdfw-zoom{height:40px}
}
@media (prefers-reduced-motion:reduce){.pdfw-filatoio{animation-duration:2.4s}}

/* ---------- Chat: finestra degli allegati (js/allegati-finestra.js) ---------- */
/* Foto, video, audio e file della chat si guardano qui dentro, mai in una scheda nuova ne' navigando verso il
   file: con l'applicazione installata sul telefono vorrebbe dire uscire dall'app. Stessa famiglia della
   galleria (fondo scuro in tutti e due i temi, pulsanti tondi di vetro) e della finestra dei PDF (le schede di
   audio e file hanno i colori del tema e il pulsante Scarica rosso). Prefisso .allw-*. */
html.allw-aperta{overflow:hidden}
dialog.allw{
  --allw-testo:#f3efe6;--allw-tenue:rgba(243,239,230,.68);--allw-vetro:rgba(255,255,255,.08);--allw-vetro-bordo:rgba(255,255,255,.18);
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  overflow:hidden;background:#05090c;color:var(--allw-testo);font-family:var(--carattere);
}
dialog.allw[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
dialog.allw::backdrop{background:rgba(2,5,7,.6)}
.allw-testa{
  position:relative;z-index:3;display:flex;align-items:center;gap:12px;min-width:0;
  padding:12px 14px 12px 20px;padding-top:max(12px,env(safe-area-inset-top));
}
.allw-titolo{flex:1;min-width:0;display:grid;gap:2px}
.allw-nome{font-size:15.5px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.allw-info{font-size:12px;color:var(--allw-tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.allw-info:empty{display:none}
.allw-info.allw-avviso{color:#ff8a95;font-weight:600;white-space:normal}
.allw-conta{flex:none;padding:4px 11px;border-radius:999px;background:var(--allw-vetro);border:1px solid var(--allw-vetro-bordo);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.allw-conta:empty{display:none}
.allw-strumenti{flex:none;display:flex;align-items:center;gap:8px}
.allw-tondo{
  display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid var(--allw-vetro-bordo);background:var(--allw-vetro);color:var(--allw-testo);cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .2s,border-color .2s,transform .2s,opacity .2s,filter .2s;
}
.allw-tondo:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);transform:scale(1.06)}
.allw-tondo:focus-visible{outline:2px solid #ff4b5c;outline-offset:3px}
.allw-tondo:disabled{opacity:.25;cursor:default;transform:none}
.allw-tondo[hidden]{display:none}
.allw-scarica{background:var(--accento);border-color:var(--accento);color:#fff}
.allw-scarica:hover{background:var(--accento);border-color:var(--accento);filter:brightness(1.12)}
.allw-scarica:disabled{background:var(--accento);opacity:.35}
/* +/- solo per le foto; sul telefono e sul tablet c'e' il pizzico */
dialog.allw:not(.allw-tipo-foto) .allw-meno,dialog.allw:not(.allw-tipo-foto) .allw-piu{display:none}
@media (pointer:coarse){.allw-meno,.allw-piu{display:none}}

/* palco: la foto (o il video, o la scheda) al centro, il fondo scuro intorno chiude la finestra */
.allw-palco{position:relative;grid-row:2;min-height:0;overflow:hidden;outline:none;touch-action:pan-y}
dialog.allw.allw-tipo-foto .allw-palco{touch-action:none}
.allw-vista{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:4px 20px max(20px,env(safe-area-inset-bottom))}
.allw-foto{
  display:block;max-width:100%;max-height:100%;border-radius:3px;opacity:0;cursor:zoom-in;
  box-shadow:0 24px 70px -24px rgba(0,0,0,.95);transform-origin:50% 50%;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .25s ease;
}
.allw-foto.allw-pronta{opacity:1}
.allw-foto.allw-senza-transizione{transition:opacity .25s ease}
dialog.allw.allw-ingrandita .allw-foto{cursor:grab;box-shadow:none}
.allw-video{display:block;max-width:100%;max-height:100%;border-radius:6px;background:#000;box-shadow:0 24px 70px -24px rgba(0,0,0,.95)}
.allw-ritorna{transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s ease !important}

/* schede di audio, file ed errori: i colori del tema, come la finestra dei PDF */
.allw-scheda{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(460px,100%);max-height:100%;overflow:auto;
  padding:30px 26px 24px;border-radius:14px;border:1px solid var(--bordo);background:var(--pannello);color:var(--testo);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.85);text-align:center;overscroll-behavior:contain;
}
.allw-scheda.allw-con-anteprima{width:min(760px,100%)}
.allw-simbolo{
  --allw-est:#5c6b74;position:relative;flex:none;display:grid;place-items:center;width:84px;height:84px;margin-bottom:10px;border-radius:22px;
  background:color-mix(in srgb,var(--allw-est) 13%,transparent);border:1px solid color-mix(in srgb,var(--allw-est) 34%,transparent);color:var(--allw-est);
}
.allw-simbolo b{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);padding:1px 8px;border-radius:999px;background:var(--allw-est);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.allw-est-pdf{--allw-est:#da0219}.allw-est-word{--allw-est:#2563eb}.allw-est-excel{--allw-est:#1e9e57}.allw-est-powerpoint{--allw-est:#d66208}
.allw-est-zip{--allw-est:#a66e14}.allw-est-testo,.allw-est-file{--allw-est:#5c6b74}.allw-est-audio{--allw-est:#0f8f8a}
html[data-tema="scuro"] .allw-est-pdf{--allw-est:#ff5c6b}html[data-tema="scuro"] .allw-est-word{--allw-est:#8ab4ff}html[data-tema="scuro"] .allw-est-excel{--allw-est:#4fd08a}
html[data-tema="scuro"] .allw-est-powerpoint{--allw-est:#ffa24d}html[data-tema="scuro"] .allw-est-zip{--allw-est:#f2c14e}
html[data-tema="scuro"] .allw-est-testo,html[data-tema="scuro"] .allw-est-file{--allw-est:#b7c1c6}html[data-tema="scuro"] .allw-est-audio{--allw-est:#3ccbc4}
/* documento conosciuto dal dizionario dei file (js/tipi-file.js): il foglio con la sigla, come nella galleria */
.allw-foglio{display:grid;place-items:center;width:112px;height:118px;margin-bottom:6px;border-radius:22px;background:color-mix(in srgb,var(--fc,#5c6b74) 10%,transparent)}
.allw-scheda-nome{max-width:100%;font-size:16px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.allw-scheda-info{font-size:12.5px;color:var(--tenue)}
.allw-nota{margin:10px 0 2px;max-width:34em;font-size:13.5px;line-height:1.5;color:var(--tenue)}
.allw-nota:empty{display:none}
.allw-scheda-azioni{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.allw-scheda-azioni .bottone{min-height:44px;display:inline-flex;align-items:center;gap:8px}
.allw-scheda audio{width:100%;margin-top:16px}
.allw-anteprima{width:100%;margin-top:18px;text-align:left}
.allw-anteprima small{display:block;margin-bottom:6px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--debole)}
.allw-testo{
  margin:0;max-height:44vh;overflow:auto;padding:12px 14px;border-radius:8px;border:1px solid var(--bordo);background:var(--sfondo);color:var(--testo);
  font:12.5px/1.55 Consolas,"SFMono-Regular",Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;touch-action:pan-x pan-y;
}
.allw-testo:focus-visible{outline:2px solid var(--accento2);outline-offset:1px}

/* frecce di lato (col mouse); sul telefono si trascina */
.allw-freccia{position:absolute;top:50%;z-index:4;width:54px;height:54px;margin-top:-27px}
.allw-prec{left:18px}
.allw-succ{right:18px}
@media (pointer:coarse){.allw-freccia{display:none}}

.allw-attesa{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;font-size:13.5px;color:var(--allw-tenue)}
.allw-attesa[hidden]{display:none}
.allw-filatoio{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:#ff4b5c;animation:gira .8s linear infinite}

@media (max-width:560px){
  .allw-testa{gap:8px;padding:8px 8px 8px 14px;padding-top:max(8px,env(safe-area-inset-top))}
  .allw-nome{font-size:14.5px}
  .allw-info{font-size:11.5px}
  .allw-conta{padding:3px 9px;font-size:12px}
  .allw-vista{padding:0 0 max(8px,env(safe-area-inset-bottom))}
  .allw-foto,.allw-video{border-radius:0}
  .allw-scheda{width:calc(100% - 24px);padding:26px 18px 20px;border-radius:12px}
  .allw-scheda.allw-con-anteprima{width:calc(100% - 16px)}
}
@media (prefers-reduced-motion:reduce){
  .allw-foto,.allw-tondo,.allw-ritorna{transition-duration:.01s !important}
  .allw-filatoio{animation-duration:2.4s}
}

/* =====================================================================
   TICKET DI SUPPORTO (piede della barra, ~/Supporto, Setup > posta)
   Tre prefissi, nessuna regola esistente riscritta:
     .barra-piede / .voce-supporto  pulsante nel piede della barra del menu
     .tk-*                          Supporto/Ticket.aspx, Nuovo.aspx, Scheda.aspx
     .pos-*                         Admin/Setup.aspx: server di posta e destinatari
   Le sole due righe che toccano selettori gia' presenti sono ".barra" e
   ".barra > nav" qui sotto: servono a fare della barra una colonna, cosi' il
   menu scorre e il piede resta fermo in fondo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. PIEDE DELLA BARRA DEL MENU
   Il pulsante e' una .voce come le altre: si comporta gia' da solo nei tre
   casi (menu esteso, menu compatto a sole icone >=981px, barra a scomparsa
   del telefono). Qui restano solo il fondo suo e la posizione del pallino.
   --------------------------------------------------------------------- */
.barra{display:flex;flex-direction:column}
.barra > nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}

.barra-piede{flex:none;margin-top:14px;padding-top:12px;border-top:1px solid var(--bordo)}
.voce-supporto{
  margin:0;border:1px solid var(--bordo-forte);background:var(--pannello2);color:var(--testo);
  font-weight:500;text-decoration:none;
}
.voce-supporto svg{flex:none;color:var(--accento-testo)}
.voce-supporto:hover{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
.voce-supporto.attiva{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
.voce-supporto:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
/* il pulsante ha gia' bordo e fondo suoi: il filetto rosso della voce attiva uscirebbe dal bordo */
.voce-supporto.attiva::before{content:none}
/* i ticket ancora aperti fra quelli che l'utente vede */
.voce-conta{
  flex:none;margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--accento);color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;
  font-variant-numeric:tabular-nums;
}
/* messaggi da leggere nei dialoghi dei ticket (23/09/2026): un pallino verde acqua, il colore della chat */
.voce-nuovo{flex:none;width:10px;height:10px;margin-left:6px;border-radius:50%;background:#0f8f8a;box-shadow:0 0 0 2px var(--pannello)}
.voce-conta + .voce-nuovo{margin-left:-2px}
.voce-supporto .voce-nuovo:first-child,.voce-supporto span + .voce-nuovo{margin-left:auto}

/* menu compatto: del pulsante resta la sola icona (lo fa gia' la regola comune di .voce) e il
   pallino va nell'angolo. Il nav torna visibile, altrimenti i sotto menu a comparsa (che escono
   dalla barra) verrebbero tagliati dallo scorrimento. */
@media (min-width:981px){
  html[data-menu="compatto"] .barra > nav{overflow:visible}
  html[data-menu="compatto"] .barra-piede{margin-top:10px;padding-top:10px}
  html[data-menu="compatto"] .voce-supporto{padding:11px 0}
  html[data-menu="compatto"] .voce-conta{
    position:absolute;top:-7px;right:-7px;margin:0;min-width:17px;height:17px;padding:0 4px;
    font-size:9.5px;line-height:17px;box-shadow:0 0 0 2px var(--pannello);
  }
  html[data-menu="compatto"] .voce-nuovo{position:absolute;bottom:-4px;right:-4px;margin:0}
}

/* ---------------------------------------------------------------------
   2. TICKET DI SUPPORTO
   Stati e tipi usano le classi di colore comuni .c-* (--tc), le stesse delle
   categorie delle opportunita': niente colori nuovi e tema scuro gia' previsto.
     tipo   commerciale = c-viola   sito = c-rosso   miglioramento = c-verde
     stato  Nuovo = c-blu   Presa in carico = c-ambra   Completato = c-verde   Scartato = c-grigio
   --------------------------------------------------------------------- */
.tk-pagina{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
@media (max-width:1180px){.tk-pagina{grid-template-columns:minmax(0,1fr)}}
.tk-pagina > .riquadro{margin-bottom:0}

/* colore di riserva quando sull'elemento non c'e' nessuna classe .c-*. Con :where() la regola non
   conta nella specificita': .c-rosso, .c-verde... vincono sempre, anche se scritte prima. */
:where(.tk-stato,.tk-tipo,.tk-filtro,.tk-tipo-scelta,.tk-passo,.pos-dest-voce){--tc:#5c6b74}

/* pillola dello stato: colore, icona propria (non solo il colore) e testo */
.tk-stato{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 11px 3px 8px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--tc) 38%,transparent);
  background:color-mix(in srgb,var(--tc) 13%,transparent);
  color:color-mix(in srgb,var(--tc) 74%,var(--testo));
  font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;vertical-align:middle;
}
.tk-stato svg{flex:none;width:13px;height:13px;stroke-width:2.3}
.tk-stato.grande{padding:5px 14px 5px 10px;font-size:13px}
.tk-stato.grande svg{width:15px;height:15px}

/* etichetta del tipo di ticket */
.tk-tipo{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 10px 2px 7px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--tc) 30%,transparent);
  background:color-mix(in srgb,var(--tc) 10%,transparent);
  color:color-mix(in srgb,var(--tc) 72%,var(--testo));
  font-size:11px;font-weight:600;line-height:1.45;white-space:nowrap;vertical-align:middle;
  overflow:hidden;text-overflow:ellipsis;
}
.tk-tipo svg{flex:none;width:13px;height:13px;stroke-width:2}
/* il nome sta in uno <span> suo: in una colonna stretta finisce con i puntini invece di uscire dalla pillola */
.tk-stato > span,.tk-tipo > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-numero{font-variant-numeric:tabular-nums;font-weight:700;color:var(--tenue)}

/* filtri a pillola (solo per gli interni di EFFE PI): niente caselle grezze, niente tendine.
   Sono collegamenti con il filtro nell'indirizzo: la pagina resta condivisibile e funziona senza JS. */
.tk-filtri{display:flex;flex-direction:column;gap:9px;margin:0 0 18px}
.tk-filtri-gruppo{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tk-filtri-titolo{
  flex:none;width:52px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--debole);
}
.tk-filtro{
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--bordo);background:var(--pannello);color:var(--tenue);
  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;text-decoration:none;
  transition:border-color .15s,color .15s,background-color .15s;
}
.tk-filtro svg{flex:none;width:14px;height:14px;color:var(--tc)}
.tk-filtro .tk-conta{
  min-width:21px;height:19px;padding:0 6px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello2);
  font-size:11px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums;color:var(--tenue);
}
.tk-filtro:hover{border-color:var(--accento);color:var(--accento-testo)}
.tk-filtro.attivo{border-color:var(--accento);background:var(--accento-velo);color:var(--testo)}
.tk-filtro.attivo .tk-conta{background:var(--accento);border-color:var(--accento);color:#fff}
.tk-filtro:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
@media (max-width:620px){
  .tk-filtri-titolo{width:100%;margin-bottom:-2px}
}

/* ---------- elenco dei ticket ---------- */
.tk-scorri{overflow-x:auto;container-type:inline-size}
/* 168 = i 158 di prima piu' i 10px di rientro della fascia dello stato (in fondo a questa parte): la pillola non si stringe */
table.tabella.t-ticket .c-stato{width:168px}
table.tabella.t-ticket .c-tipo{width:202px}
table.tabella.t-ticket .c-chi{width:152px}
table.tabella.t-ticket .c-date{width:152px}
table.tabella.t-ticket .c-azioni{width:80px}
table.tabella.t-ticket td{vertical-align:top;white-space:normal;overflow:visible;text-overflow:clip}
table.tabella.t-ticket td.c-stato,table.tabella.t-ticket td.c-azioni{vertical-align:middle}
table.tabella.t-ticket td.c-oggetto b{
  display:block;font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;
}
table.tabella.t-ticket td small{white-space:normal}
.tk-estratto{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--tenue);overflow-wrap:anywhere;
}
table.tabella td small.tk-estratto{display:-webkit-box}
.tk-riga-sotto{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px}
.tk-allegati-conta{
  display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 6px;border-radius:999px;
  border:1px solid var(--bordo);font-size:11px;font-weight:600;color:var(--tenue);white-space:nowrap;
}
.tk-allegati-conta svg{flex:none;width:12px;height:12px;color:var(--accento-testo)}
.tk-chi b{display:block;font-size:12.5px;font-weight:600;overflow-wrap:anywhere}
.tk-chi small{display:block;font-size:11px;color:var(--tenue);overflow-wrap:anywhere}
.tk-date{display:grid;gap:4px;font-size:11.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
.tk-date > span{display:grid;grid-template-columns:auto;gap:1px}
.tk-date i{font-style:normal;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--debole)}
.tk-date b{font-weight:600;color:var(--testo)}

/* sotto i 900px di spazio ogni ticket e' una scheda: niente scorrimento laterale */
@container (max-width:900px){
  table.tabella.t-ticket{display:block;width:100%}
  table.tabella.t-ticket thead{display:none}
  table.tabella.t-ticket tbody{display:grid;gap:12px;padding:12px}
  table.tabella.t-ticket tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"stato azioni" "oggetto oggetto" "tipo tipo" "chi date";
    gap:10px 12px;padding:12px 14px;
    border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello2);
    box-shadow:0 2px 6px -3px rgba(0,0,0,.35);
  }
  table.tabella.t-ticket td{display:block;width:auto;min-width:0;padding:0;border:none}
  table.tabella.t-ticket td.c-stato{grid-area:stato;align-self:center}
  table.tabella.t-ticket td.c-azioni{grid-area:azioni}
  table.tabella.t-ticket td.c-oggetto{grid-area:oggetto}
  table.tabella.t-ticket td.c-tipo{grid-area:tipo}
  table.tabella.t-ticket td.c-chi{grid-area:chi;align-self:center}
  table.tabella.t-ticket td.c-date{grid-area:date;justify-items:end;text-align:right}
  table.tabella.t-ticket .azioni-riga{justify-content:flex-end;gap:8px}
  table.tabella.t-ticket .tk-date{gap:6px}
}
/* telefoni stretti: richiedente e date su due righe intere, cosi' non si schiacciano */
@container (max-width:430px){
  table.tabella.t-ticket tbody tr{grid-template-areas:"stato azioni" "oggetto oggetto" "tipo tipo" "chi chi" "date date"}
  table.tabella.t-ticket td.c-date{justify-items:start;text-align:left}
  table.tabella.t-ticket .tk-date{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* variante B: fascia del colore dello stato, la stessa .c-* della pillola (nuovo blu, presa in carico ambra,
   completato verde, scartato grigio: le variabili --fascia stanno in cima al foglio), come le righe delle
   opportunita'. Su PC sta sulla prima cella, quella dello stato (la <tr> non tiene il fondo), e l'intestazione rientra
   con lei; nella scheda del telefono passa alla scheda intera, e la pillola dello stato, in alto a sinistra, le sta
   accanto. */
table.tabella.t-ticket thead th.c-stato{padding-left:22px}
table.tabella.t-ticket tbody tr.tk-fascia > td.c-stato{
  padding-left:22px;
  background-image:var(--fascia-sfumata);
  background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
}
@container (max-width:900px){
  table.tabella.t-ticket tbody tr.tk-fascia{
    border-color:color-mix(in srgb,var(--fascia) 45%,var(--bordo-forte));
    background-image:var(--fascia-sfumata);
    background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
  }
  table.tabella.t-ticket tbody tr.tk-fascia > td.c-stato{background-image:none;padding-left:0}
}

/* ---------- modulo: scelta del tipo a schede ---------- */
.tk-tipi{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(172px,100%),1fr));margin:0;padding:0;border:none}
.tk-tipi legend{padding:0;margin:0 0 9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.tk-tipo-scelta{
  position:relative;display:flex;align-items:flex-start;gap:10px;padding:12px 30px 12px 12px;cursor:pointer;
  border:2px solid var(--bordo);border-radius:var(--raggio);background:var(--campo-attivo);
  transition:border-color .15s,background-color .15s,transform .15s;
}
.tk-tipo-scelta input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tk-tipo-scelta:hover{border-color:var(--tc);transform:translateY(-1px)}
.tk-tipo-icona{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--tc) 14%,transparent);color:var(--tc);
  transition:background-color .15s,color .15s;
}
.tk-tipo-icona svg{width:18px;height:18px}
.tk-tipo-testo{min-width:0}
.tk-tipo-testo b{display:block;font-size:13px;font-weight:600;line-height:1.25;color:var(--testo)}
.tk-tipo-testo small{display:block;margin-top:4px;font-size:11.5px;line-height:1.4;color:var(--tenue)}
.tk-tipo-scelta::after{
  content:"";position:absolute;top:12px;right:11px;width:14px;height:14px;border-radius:50%;border:2px solid var(--bordo-forte);
}
.tk-tipo-scelta:has(input:checked){border-color:var(--tc);background:color-mix(in srgb,var(--tc) 9%,transparent)}
.tk-tipo-scelta:has(input:checked)::after{border-color:var(--tc);background:radial-gradient(circle,var(--tc) 45%,transparent 50%)}
.tk-tipo-scelta:has(input:checked) .tk-tipo-icona{background:var(--tc);color:#fff}
html[data-tema="scuro"] .tk-tipo-scelta:has(input:checked) .tk-tipo-icona{color:#04141c}
.tk-tipo-scelta:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
/* telefono: una scheda per riga, cosi' il nome non va a capo e l'area da toccare e' larga */
@media (max-width:560px){.tk-tipi{grid-template-columns:minmax(0,1fr)}}

.tk-modulo .campo{margin-top:18px}
.tk-modulo textarea{resize:vertical;line-height:1.55}
.tk-modulo textarea.note{min-height:170px}
.tk-modulo h3.dopo{margin:24px 0 9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.tk-obbligatorio{color:var(--accento-testo);font-weight:700;margin-left:2px}

/* ---------- scheda del singolo ticket ---------- */
.riquadro h2.tk-titolo{margin:0;padding:0;border:none;font-size:18px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.tk-scheda-testa{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--bordo)}
.tk-scheda-titolo{flex:1 1 300px;min-width:0}
.tk-scheda-pillole{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:8px}
.tk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 16px;margin:10px 0 0;font-size:12.5px;color:var(--tenue)}
.tk-meta b{color:var(--testo);font-weight:600}
.tk-meta span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.tk-meta svg{flex:none;width:14px;height:14px;opacity:.75}
.tk-corpo{padding:16px 20px 20px}
.tk-corpo h3{margin:0 0 9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.tk-corpo h3.dopo{margin-top:24px}
/* il numero degli allegati accanto al titolo: il titolo e' maiuscolo, il numero no */
.tk-corpo h3 .tk-allegati-conta{text-transform:none;letter-spacing:0;vertical-align:1px}
.tk-testo{margin:0;font-size:14px;line-height:1.62;white-space:pre-wrap;overflow-wrap:anywhere}
.tk-corpo .camp-galleria{margin:0}

/* storia degli stati: chi, quando e l'eventuale nota */
.tk-storia{position:relative;list-style:none;margin:0;padding:3px 0 0 24px}
.tk-storia::before{content:"";position:absolute;left:5px;top:10px;bottom:11px;width:2px;background:var(--bordo)}
.tk-passo{position:relative;padding-bottom:17px}
.tk-passo:last-child{padding-bottom:0}
.tk-passo::before{
  content:"";position:absolute;left:-24px;top:3px;width:12px;height:12px;border-radius:50%;
  background:var(--pannello);border:2px solid color-mix(in srgb,var(--tc) 55%,transparent);
}
.tk-passo.ultimo::before{background:var(--tc);border-color:var(--tc);box-shadow:0 0 0 4px color-mix(in srgb,var(--tc) 18%,transparent)}
.tk-passo b{display:block;font-size:13px;font-weight:600}
.tk-passo small{display:block;margin-top:2px;font-size:11.5px;color:var(--tenue);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tk-passo p{margin:6px 0 0;padding:8px 11px;border-left:2px solid var(--bordo);font-size:12.5px;line-height:1.5;color:var(--tenue);white-space:pre-wrap;overflow-wrap:anywhere}

/* cambio di stato: lo vedono solo gli interni di EFFE PI */
.tk-cambio{margin-top:22px;padding:14px 16px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--blocco-chiaro)}
.tk-cambio > b{display:block;font-size:13px;font-weight:600}
.tk-cambio > p{margin:4px 0 12px;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.tk-cambio textarea{
  width:100%;min-height:64px;resize:vertical;padding:8px 11px;border-radius:3px;
  border:1px solid var(--bordo);background:var(--sfondo);color:var(--testo);font:inherit;font-size:13.5px;
}
.tk-cambio .azioni-form{margin-top:12px}

/* colonna di destra della scheda: risposta e stato (solo interni) sopra, storia sotto */
.tk-colonna{display:grid;gap:18px;align-content:start;min-width:0}
.tk-colonna > .riquadro{margin-bottom:0}

/* la risposta di EFFE PI a chi ha aperto il ticket: in cima alla scheda, in un riquadro suo con il fumetto blu,
   staccata dalle note di chi l'ha aperto (che seguono, sotto il loro titolo) */
.tk-risposta{
  margin:0 0 20px;padding:14px 16px 15px;border-radius:var(--raggio);
  border:1px solid color-mix(in srgb,var(--accento2) 34%,transparent);border-left:4px solid var(--accento2);
  background:color-mix(in srgb,var(--accento2) 8%,var(--pannello));
}
.tk-risposta-testa{display:flex;align-items:flex-start;gap:11px}
.tk-risposta-icona{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--accento2) 16%,transparent);color:var(--accento2);
}
.tk-risposta-icona svg{width:18px;height:18px;stroke-width:1.8}
.tk-risposta-titolo{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tk-risposta-titolo > b{font-size:14px;font-weight:700;color:var(--testo)}
.tk-risposta-titolo small{flex-basis:100%;display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;color:var(--tenue);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tk-risposta-titolo small span + span::before{content:"\00b7";margin-right:10px;color:var(--debole)}
.tk-risposta-nuova{
  display:inline-flex;align-items:center;padding:1px 9px;border-radius:999px;background:var(--accento);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;
}
.tk-risposta-testo{margin:12px 0 0;font-size:14px;line-height:1.62;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--testo)}
.tk-risposta.nuova{box-shadow:0 0 0 3px color-mix(in srgb,var(--accento2) 16%,transparent)}
/* il DIALOGO del ticket nella sua scheda (23/09/2026): la chat (js/chat.js in modo incorporata, markup di
   App_Code/ChatHtml.vb) senza la colonna delle conversazioni, alta quanto basta per leggere qualche scambio. Anche sul
   telefono la conversazione resta visibile (nella pagina Chat, sotto i 900px, si vede o l'elenco o la conversazione) */
.tk-dialogo{margin:0 0 22px;scroll-margin-top:calc(var(--testata) + 16px)}
.chat.chat-incorporata{grid-template-columns:minmax(0,1fr);height:min(560px,72vh);min-height:380px;box-shadow:none}
.chat.chat-incorporata .chat-lato{display:none}
.chat.chat-incorporata .chat-stanza{display:flex}
.chat.chat-incorporata .chat-conv-testa{padding:8px 12px}
.chat.chat-incorporata .chat-conv-testa .chat-avatar{width:36px;height:36px}
.tk-dialogo-nota{margin:6px 2px 0;font-size:11.5px;line-height:1.45;color:var(--debole)}
@media (max-width:900px){.chat.chat-incorporata{height:70vh}}
@media (max-width:560px){
  .chat.chat-incorporata{margin-left:0;margin-right:0;border-left:1px solid var(--bordo);border-right:1px solid var(--bordo);border-radius:var(--raggio)}
}
/* elenco dei ticket: sull'icona del dialogo il numero dei messaggi da leggere */
.tk-dialogo-icona{position:relative}
.tk-dialogo-conta{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--accento);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--pannello);
}
/* "Rispondi" sotto la risposta (23/09/2026): porta al dialogo, subito sotto; accanto, in piccolo, chi lo leggera' */
.tk-rispondi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--accento2) 30%,transparent)}
.tk-rispondi .bottone{display:inline-flex;align-items:center;gap:7px}
.tk-rispondi .bottone svg{flex:none;width:15px;height:15px}
.tk-rispondi small{flex:1;min-width:180px;font-size:12px;line-height:1.45;color:var(--tenue)}
/* nessuna risposta ancora: una riga sola, tratteggiata, che dice dove arrivera' */
.tk-risposta.vuota{display:flex;align-items:center;gap:11px;padding:10px 14px;border-style:dashed;border-left-width:1px;background:transparent}
.tk-risposta.vuota p{margin:0;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.tk-risposta.vuota .tk-risposta-icona{width:30px;height:30px;opacity:.8}

/* riquadro "Risposta e stato" (solo interni): il campo della risposta e l'esito della sua mail */
.tk-risposta-campo label{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--testo)}
.tk-risposta-campo label svg{flex:none;width:16px;height:16px;color:var(--accento2)}
.tk-risposta-campo textarea{min-height:128px;resize:vertical;line-height:1.55}
.tk-risposta-azioni{margin-top:12px}
.tk-mail-risposta{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding:8px 11px;border-radius:3px;font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
.tk-mail-risposta svg{flex:none;width:16px;height:16px;margin-top:1px}
.tk-mail-risposta.ok{background:var(--successo-velo);border:1px solid var(--successo-bordo);color:var(--successo)}
.tk-mail-risposta.attesa{background:color-mix(in srgb,var(--accento2) 9%,transparent);border:1px solid color-mix(in srgb,var(--accento2) 34%,transparent);color:var(--testo)}
.tk-mail-risposta.errore{background:var(--pericolo-velo);border:1px solid var(--pericolo-bordo);color:var(--pericolo)}
/* la mail non doveva partire (ha risposto chi ha aperto il ticket): un'informazione, non un errore */
.tk-mail-risposta.info{background:var(--blocco-chiaro);border:1px solid var(--bordo);color:var(--tenue)}
/* telefono: "Scritta da ..." e "aggiornata da ..." una sotto l'altra e senza il punto, che andando a capo restava da solo
   in testa alla seconda riga; se un pezzo va a capo la seconda riga rientra, cosi' si vede dove comincia l'altro (la data
   con il suo "il" non si spezza: spazi fissi in FPC.TicketHtml.ChiQuando) */
@media (max-width:560px){
  .tk-risposta-titolo small{flex-direction:column;gap:2px}
  .tk-risposta-titolo small span{padding-left:12px;text-indent:-12px}
  .tk-risposta-titolo small span + span::before{display:none}
}
/* nel riquadro Risposta e stato il cambio di stato sta in cima, la risposta sotto */
.tk-gestione .tk-cambio{margin:0 0 20px}
/* "Elimina il ticket" (solo amministratori): in fondo al riquadro, staccato dalla risposta */

/* nell'elenco: c'e' una risposta (fumetto blu); nuova per chi ha aperto il ticket e non l'ha ancora letta (piena) */
.tk-segno-risposta{
  display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 6px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--accento2) 40%,transparent);background:color-mix(in srgb,var(--accento2) 10%,transparent);
  font-size:11px;font-weight:600;color:color-mix(in srgb,var(--accento2) 70%,var(--testo));
}
.tk-segno-risposta svg{flex:none;width:12px;height:12px;stroke-width:2.2;color:var(--accento2)}
.tk-segno-risposta.nuova{border-color:var(--accento);background:var(--accento);color:#fff}
.tk-segno-risposta.nuova svg{color:#fff}

/* ---------------------------------------------------------------------
   3. IMPOSTAZIONI > SETUP: server di posta e destinatari dei ticket
   --------------------------------------------------------------------- */
.pos-da{margin-top:3px;font-size:11.5px;color:var(--tenue)}
.pos-da code{font-size:11px;color:var(--accento-testo)}

/* compilazione guidata: i due tasti Microsoft e Google */
.pos-wizard{margin-top:16px;padding:14px 16px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--blocco-chiaro)}
.pos-wizard > b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.pos-wizard > b svg{flex:none;width:16px;height:16px;color:var(--accento-testo)}
.pos-wizard > p{margin:5px 0 12px;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.pos-tasti{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(235px,100%),1fr))}
.pos-preset{
  display:flex;align-items:center;gap:12px;padding:11px 14px;min-width:0;cursor:pointer;text-align:left;
  border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello);color:var(--testo);font:inherit;
  transition:border-color .15s,background-color .15s,transform .15s;
}
.pos-preset:hover{border-color:var(--accento);background:var(--accento-velo);transform:translateY(-1px)}
.pos-preset:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.pos-preset.scelto{border-color:var(--accento);background:var(--accento-velo)}
.pos-logo{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--bordo);background:var(--pannello2)}
.pos-logo svg{width:19px;height:19px}
.pos-preset-testo{min-width:0}
.pos-preset-testo b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.pos-preset-testo small{display:block;margin-top:3px;font-size:11px;color:var(--tenue);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* la punta a destra dice che il tasto fa qualcosa, non che e' solo un'etichetta */
.pos-preset::after{
  content:"";flex:none;margin-left:auto;width:8px;height:8px;
  border-top:2px solid var(--debole);border-right:2px solid var(--debole);transform:rotate(45deg);
  transition:border-color .15s;
}
.pos-preset:hover::after,.pos-preset.scelto::after{border-top-color:var(--accento);border-right-color:var(--accento)}
.pos-nota{
  margin:12px 0 0;padding:11px 13px;border-radius:3px;font-size:12.5px;line-height:1.55;
  border:1px solid color-mix(in srgb,var(--accento2) 38%,transparent);
  background:color-mix(in srgb,var(--accento2) 10%,transparent);
}
.pos-nota > b{display:block;margin-bottom:5px;color:var(--accento2)}
.pos-nota ol{margin:0;padding-left:19px}
.pos-nota li + li{margin-top:4px}
.pos-nota code{font-size:11.5px;color:var(--accento-testo)}

/* campi del server, in tre gruppi (server, accesso, mittente): quelli riempiti dal tasto
   guidato lampeggiano una volta, cosi' si vede subito cos'e' cambiato */
.pos-gruppo{margin-top:18px}
.pos-gruppo > h3{margin:0 0 10px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.pos-campi{display:grid;gap:14px 16px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));align-items:start}
.pos-campi.tre{grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,1.3fr)}
.pos-campi .campo{margin-top:0}
.pos-campi .campo input{font-variant-numeric:tabular-nums}
.pos-campi .campo-flag{align-self:center;padding-top:14px}
@media (max-width:760px){.pos-campi.tre{grid-template-columns:minmax(0,1fr)}.pos-campi .campo-flag{padding-top:0}}
.pos-riempito input{animation:pos-lampo 1s ease}
@keyframes pos-lampo{
  0%{background:var(--accento-velo);border-color:var(--accento)}
  70%{background:var(--accento-velo);border-color:var(--accento)}
  100%{background:var(--sfondo)}
}
/* l'elenco di ".campo input[type=...]" in cima al foglio non comprende input[type=password]
   (finora il sito non ne aveva nessuno fuori dal login): senza questa regola il campo resta
   bianco anche sul tema scuro. */
.pos-password{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pos-password input[type=password]{
  flex:1 1 190px;width:100%;min-width:0;padding:8px 11px;border-radius:3px;border:1px solid var(--bordo);
  background:var(--sfondo);color:var(--testo);font:inherit;
}
.pos-password input[type=password]:focus{outline:none;border-color:var(--accento)}
.pos-password .bottone{flex:none}
.pos-salvata{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;color:var(--successo)}
.pos-salvata svg{flex:none;width:13px;height:13px}
.pos-salvata.assente{color:var(--debole)}

/* prova di invio */
.pos-prova{margin-top:20px;padding:14px 16px;border:1px dashed var(--bordo-forte);border-radius:var(--raggio)}
.pos-prova > b{display:block;font-size:13px;font-weight:600}
.pos-prova > p{margin:4px 0 12px;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.pos-prova-riga{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.pos-prova-riga .campo{flex:1 1 250px;margin:0}
.pos-esito{margin:12px 0 0}
.pos-esito .avviso{margin:0}
.pos-esito pre{
  margin:7px 0 0;padding:9px 11px;border-radius:3px;border:1px solid var(--bordo);background:var(--pannello2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tenue);
}

/* destinatari delle notifiche, uno per tipo di ticket */
.pos-dest{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(265px,100%),1fr));margin-top:16px}
.pos-dest-voce{
  display:flex;flex-direction:column;gap:8px;padding:13px 14px;
  border:1px solid var(--bordo);border-left:3px solid var(--tc);border-radius:var(--raggio);background:var(--pannello2);
}
.pos-dest-capo{display:flex;align-items:center;gap:9px;min-width:0}
.pos-dest-capo svg{flex:none;width:17px;height:17px;color:var(--tc)}
.pos-dest-capo b{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.pos-dest-voce textarea{
  width:100%;min-height:58px;resize:vertical;padding:8px 11px;border-radius:3px;
  border:1px solid var(--bordo);background:var(--sfondo);color:var(--testo);font:inherit;font-size:13px;
}
.pos-dest-voce > small{font-size:11.5px;color:var(--debole)}
.pos-dest-voce > small.senza{color:var(--pericolo)}

/* metodo di invio: due schede (Microsoft 365, server classico); la casella vera resta nascosta dentro l'etichetta */
:root{--pos-ambra:#a66e14}
html[data-tema="scuro"]{--pos-ambra:#f2c14e}
.pos-metodi{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.pos-metodo{
  position:relative;display:flex;align-items:flex-start;gap:12px;min-width:0;min-height:58px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello);
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.pos-metodo:hover{border-color:var(--accento)}
.pos-metodo:has(input:checked){border-color:var(--accento);background:var(--accento-velo);box-shadow:inset 0 0 0 1px var(--accento)}
.pos-metodo:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
.pos-metodo:has(input:disabled){cursor:default;opacity:.65}
.pos-metodo:has(input:disabled):hover{border-color:var(--bordo-forte)}
.pos-metodo-testo{flex:1;min-width:0}
.pos-metodo-testo b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.pos-metodo-testo small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--tenue)}
.pos-metodo-segno{
  flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--bordo-forte);color:transparent;transition:background-color .15s,border-color .15s;
}
.pos-metodo-segno svg{width:13px;height:13px}
.pos-metodo:has(input:checked) .pos-metodo-segno{border-color:var(--accento);background:var(--accento);color:#fff}

/* la casella collegata (Microsoft 365): verde collegata, ambra segreto rifiutato, rosso da rifare, grigio non collegata */
.pos-ms{
  --pm-c:var(--debole);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:14px 16px;
  border:1px solid var(--bordo);border-left:3px solid var(--pm-c);border-radius:var(--raggio);background:var(--pannello2);
}
.pos-ms.ok{--pm-c:var(--successo)}
.pos-ms.avvisa{--pm-c:var(--pos-ambra)}
.pos-ms.no{--pm-c:var(--pericolo);border-color:var(--pericolo-bordo);border-left-color:var(--pericolo);background:var(--pericolo-velo)}
.pos-ms-icona{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--pm-c);background:color-mix(in srgb,var(--pm-c) 14%,transparent)}
.pos-ms-icona svg{width:21px;height:21px}
.pos-ms-testo{flex:1 1 160px;min-width:0}
.pos-ms-testo b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.pos-ms.ok .pos-ms-testo b{color:var(--successo)}
.pos-ms.no .pos-ms-testo b{color:var(--pericolo)}
.pos-ms-testo small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--tenue);overflow-wrap:anywhere}
.pos-ms-testo small.no{color:var(--pericolo)}
.pos-ms.avvisa .pos-ms-testo small.no{color:var(--pos-ambra)}
.pos-ms-azioni{flex:0 1 auto;margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.pos-collega{gap:9px}
.pos-ms-logo{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:3px;background:#fff}
.pos-ms-logo svg{width:14px;height:14px}
@media (max-width:560px){
  .pos-ms{padding:13px 13px 13px 12px}
  .pos-ms-azioni{flex:1 1 100%;margin-left:0}
  .pos-ms-azioni .bottone{flex:1 1 auto;justify-content:center}
  /* telefono: il campo della password o del segreto a tutta riga, il pulsante per toglierla sotto */
  .pos-password input[type=password]{flex-basis:100%}
}

/* segreto client in scadenza (ambra) o scaduto (rosso), sotto lo stato della posta */
.pos-scadenza{
  --pm-c:var(--pos-ambra);
  display:flex;align-items:flex-start;gap:10px;margin-top:10px;padding:10px 13px;border-radius:3px;font-size:13px;line-height:1.5;
  border:1px solid color-mix(in srgb,var(--pm-c) 45%,transparent);background:color-mix(in srgb,var(--pm-c) 11%,transparent);color:var(--testo);
}
.pos-scadenza.scaduto{--pm-c:var(--pericolo)}
.pos-scadenza svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--pm-c)}

/* ID dell'applicazione, segreto e URI di reindirizzamento (si legge e si copia, non si cambia) */
.campo input.pos-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;padding-top:9px;padding-bottom:9px}
.pos-campi-segreto{margin-top:14px}
.pos-redirect{display:flex;flex-direction:column;gap:5px;margin-top:16px}
.pos-redirect > small:first-child{font-size:12px;color:var(--tenue)}
.pos-redirect code{
  display:block;padding:8px 11px;border-radius:3px;border:1px dashed var(--bordo-forte);background:var(--pannello2);color:var(--testo);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;overflow-wrap:anywhere;user-select:all;
}
/* sul telefono e con il dito: i pulsanti della posta (anche i piccoli) alti almeno 38px */
@media (max-width:900px),(pointer:coarse){#setupPosta .bottone{min-height:38px}}
/* tema scuro: il calendario del campo data (scadenza del segreto) con l'icona chiara */
html[data-tema="scuro"] #setupPosta input[type=date]{color-scheme:dark}
.bottone.vuoto.pos-collega:hover{border-color:var(--verde);color:var(--verde)}

/* ---------------------------------------------------------------------
   Impostazioni > Setup: intelligenza artificiale (modello e chiave di OpenAI)
   Le schede dei modelli sono le .pos-metodo della posta (radio nascosta dentro l'etichetta);
   qui solo il nome in carattere fisso, la pillola della famiglia e "In uso".
   --------------------------------------------------------------------- */
.ia-usi{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ia-usi span{padding:3px 10px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello2);font-size:12px;color:var(--tenue)}
.ia-modelli{grid-template-columns:repeat(auto-fill,minmax(min(235px,100%),1fr))}
.ia-modello{min-height:0}
.ia-modello .pos-metodo-testo b{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px}
.ia-modello code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;font-weight:700;color:var(--testo);overflow-wrap:anywhere}
.ia-tipo,.ia-inuso{
  display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;
  --ia-c:var(--ic-grigio);color:var(--ia-c);border:1px solid color-mix(in srgb,var(--ia-c) 40%,transparent);background:color-mix(in srgb,var(--ia-c) 9%,transparent);
}
/* classi con il prefisso: .chat, .mini... da sole appartengono ad altre parti del sito */
.ia-tipo-nano{--ia-c:var(--ic-teal)}
.ia-tipo-mini{--ia-c:var(--ic-blu)}
.ia-tipo-standard{--ia-c:var(--ic-rosso)}
.ia-tipo-ragionamento{--ia-c:var(--ic-viola)}
.ia-tipo-chat{--ia-c:var(--ic-verde)}
.ia-inuso{border-color:var(--successo);background:var(--successo);color:#fff}
.ia-elenco{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.ia-elenco small{font-size:11.5px;color:var(--debole)}
.campo input.ia-campo-modello{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ia-risposta{
  margin:8px 0 0;padding:10px 13px;border-left:3px solid var(--successo);border-radius:0;background:var(--pannello2);
  font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--testo);
}
@media (max-width:900px),(pointer:coarse){#setupIa .bottone{min-height:38px}}
/* biglietti da visita: tendina del modello, foto di prova e campi letti */
.ia-biglietti{margin-top:26px;padding-top:20px;border-top:1px solid var(--bordo)}
.campo select.ia-campo-modello{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;max-width:420px}
.ia-biglietti-prova{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.ia-biglietti-prova input[type=file]{max-width:100%;font:inherit;font-size:13px}
.ia-biglietto-campi{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:10px 18px;margin:12px 0 0;padding:12px 14px;border-left:3px solid var(--successo);background:var(--pannello2)}
.ia-biglietto-campi dt{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.ia-biglietto-campi dd{margin:2px 0 0;font-size:14px;font-weight:500;overflow-wrap:anywhere}

/* ===================== Gestione Help (Admin/GestioneHelp.aspx) =====================
   Elenco delle guide, editor del sorgente HTML con anteprima nello stile vero del
   pannello della guida, e confronto con la versione del file.
   Niente tabella: righe a schede, cosi' sul telefono non si scorre di lato.
   =================================================================================== */
/* giallo delle guide divergenti: non esiste una --ic-ambra, se la fa questa sezione */
:root{--gh-ambra:#b97d0d}
html[data-tema="scuro"]{--gh-ambra:#f2c14e}

.gh-patto{display:flex;align-items:baseline;gap:8px}

.gh-riquadro{padding:0;overflow:hidden}
.gh-elenco{list-style:none;margin:0;padding:0}
.gh-riga{
  display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2.1fr);
  gap:6px 18px;align-items:center;padding:12px 18px;border-top:1px solid var(--bordo);
}
.gh-elenco > .gh-riga:first-child{border-top:none}
.gh-riga[hidden]{display:none}
.gh-nome{min-width:0}
.gh-nome b{display:block;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.gh-nome code{
  display:inline-block;margin-top:2px;padding:1px 6px;border-radius:4px;
  border:1px solid var(--bordo);background:var(--pannello2);
  font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:11px;color:var(--tenue);
}

.gh-lingue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.gh-lingua{
  display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2);
}
.gh-lingua[hidden]{display:none}
.gh-bandiera{
  flex:none;padding:2px 7px;border-radius:4px;border:1px solid var(--bordo-forte);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--tenue);
}
.gh-stato{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.gh-stato small{display:block;width:100%;font-size:11px;color:var(--tenue);overflow-wrap:anywhere}
.gh-lingua .azioni-riga{flex:none}

.gh-b-manuale{border-color:var(--accento);color:var(--accento-testo)}
.gh-b-file{color:var(--debole)}
.gh-b-cambiato{border-color:var(--gh-ambra);color:var(--gh-ambra)}
.gh-b-manca{border-style:dashed;color:var(--debole)}
.gh-vuoto[hidden]{display:none}

/* ---------- modulo di modifica ---------- */
.gh-editor-testa{margin-bottom:14px}
.gh-editor-testa h2{margin:0 0 6px;font-size:16px;font-weight:600}
.gh-editor-testa small{font-size:12px;color:var(--tenue)}
.gh-editor-testa .gh-stato{display:flex}

.gh-blocchi{margin-bottom:12px}
.gh-blocchi > b{display:block;margin-bottom:6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--debole)}
.gh-blocchi-lista{display:flex;flex-wrap:wrap;gap:6px}
.gh-blocco{
  padding:4px 10px;border-radius:999px;border:1px solid var(--bordo-forte);
  background:var(--pannello2);color:var(--testo);font:inherit;font-size:12px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.gh-blocco:hover{border-color:var(--accento);color:var(--accento-testo)}
.gh-blocco:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}

.gh-due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.gh-lato{min-width:0;display:flex;flex-direction:column;gap:6px}
.gh-lato > label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--debole)}
.gh-codice{
  width:100%;box-sizing:border-box;min-height:420px;resize:vertical;padding:10px 12px;
  border:1px solid var(--bordo);border-radius:3px;background:var(--sfondo);color:var(--testo);
  font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:12.5px;line-height:1.55;
  tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere;
}
.gh-codice:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.gh-conta{font-size:11.5px;color:var(--debole);font-variant-numeric:tabular-nums}
.gh-conta.troppo{color:var(--pericolo);font-weight:600}
.gh-aiuto{font-size:11.5px;color:var(--tenue);line-height:1.45}

.gh-anteprima-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.gh-anteprima-testa > label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--debole)}
.gh-ruoli{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gh-ruoli-eti{font-size:11.5px;color:var(--tenue)}
.gh-ruoli .pillole li label{padding:3px 10px 3px 7px;font-size:11.5px}
.gh-ruoli .pillole li label::before{width:11px;height:11px;background-size:7px 7px}
.gh-anteprima{
  width:100%;box-sizing:border-box;min-height:420px;height:420px;
  border:1px solid var(--bordo);border-radius:3px;background:var(--pannello);
}

/* ---------- errori e avvisi in elenco ---------- */
.gh-errori b{display:block;margin-bottom:4px}
.gh-errori ul{margin:0;padding-left:18px}
.gh-errori li{margin-bottom:3px;line-height:1.45;overflow-wrap:anywhere}

/* ---------- confronto ---------- */
.gh-avviso-cambiato{
  margin:0 0 12px;padding:8px 11px;border-radius:3px;font-size:12.5px;
  border:1px solid var(--gh-ambra);color:var(--gh-ambra);background:transparent;
}
.gh-diff{
  border:1px solid var(--bordo);border-radius:3px;background:var(--sfondo);
  font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:12px;line-height:1.5;
  max-height:60vh;overflow-y:auto;
}
.gh-diff > div{display:flex;align-items:baseline;gap:0;padding:1px 10px 1px 0;border-left:3px solid transparent}
.gh-diff code{
  flex:1;min-width:0;padding:0;border:none;background:none;color:inherit;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.gh-d-n{
  flex:none;width:3.4em;padding-right:8px;text-align:right;color:var(--debole);
  font-variant-numeric:tabular-nums;user-select:none;
}
.gh-d-uguale{color:var(--tenue)}
.gh-d-meno{border-left-color:var(--pericolo);background:var(--pericolo-velo);color:var(--testo)}
.gh-d-piu{border-left-color:var(--successo);background:var(--successo-velo);color:var(--testo)}
.gh-d-salto{
  justify-content:center;padding:3px 10px;color:var(--debole);font-size:11px;
  background:var(--pannello2);border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo);
}
.gh-d-salto::before{content:"\00b7\00b7\00b7 "}

/* ---------- schermi stretti: editor e anteprima uno sotto l'altro, righe a schede ---------- */
@media (max-width:1100px){
  .gh-due{grid-template-columns:minmax(0,1fr)}
  .gh-codice{min-height:300px}
  .gh-anteprima{height:340px;min-height:340px}
}
@media (max-width:860px){
  .gh-riga{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 14px}
  .gh-lingue{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .gh-lingua{flex-wrap:wrap;gap:6px 10px}
  /* prima riga: lingua a sinistra e pulsanti a destra; lo stato va sotto, a tutta larghezza */
  .gh-bandiera{order:-2}
  .gh-lingua .azioni-riga{order:-1;margin-left:auto}
  .gh-stato{flex:1 1 100%}
  .gh-anteprima-testa{align-items:flex-start;flex-direction:column}
  .gh-d-n:nth-child(2){display:none}
  .gh-d-n{width:2.6em}
}

/* ---------------------------------------------------------------------
   4. IMPOSTAZIONI > SETUP: archivio dei file (Admin/Setup.aspx, FPC.ArchivioFile)
   dove stanno i file caricati, cosa contiene ogni area, la verifica che il sito
   fa da solo all'avvio e la prova di accesso. "I file si trovano in" riusa .acc-io.
   --------------------------------------------------------------------- */
.arc-dove .acc-io-testo b{font-size:15px}
.arc-aree{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.arc-area{display:flex;align-items:center;gap:11px;min-width:0;padding:11px 13px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2)}
.arc-area-icona{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:8px;background:var(--pannello);color:var(--accento-testo);box-shadow:0 0 0 1px var(--bordo)}
.arc-area-icona svg{width:18px;height:18px}
.arc-area.vuota .arc-area-icona{color:var(--debole)}
.arc-area-testo{flex:1;min-width:0}
.arc-area-testo b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.arc-area-testo code{padding:0 6px;border-radius:4px;border:1px solid var(--bordo);background:var(--pannello);font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:11px;font-weight:400;color:var(--tenue)}
.arc-area-testo small{display:block;margin-top:3px;font-size:12px;color:var(--tenue);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.arc-area-testo small.arc-resto{color:var(--pericolo)}
/* verifica fatta dal sito al suo avvio */
.arc-avvio{margin-top:18px;padding:14px 16px;border:1px dashed var(--bordo-forte);border-radius:var(--raggio)}
.arc-avvio > b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;font-weight:600}
.arc-avvio > p{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--tenue);overflow-wrap:anywhere}
.arc-avvio > p.arc-sotto{margin-top:12px;color:var(--testo)}
.arc-avvio code{font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:11.5px;color:var(--accento-testo);overflow-wrap:anywhere}
.arc-pillola{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;background:var(--successo)}
.arc-pillola.no{background:var(--pericolo)}
.arc-avvio details{margin-top:12px}
.arc-avvio summary{cursor:pointer;font-size:12.5px;color:var(--accento-testo)}
.arc-avvio pre,.arc-errore{
  margin:8px 0 0;padding:9px 11px;border-radius:3px;border:1px solid var(--bordo);background:var(--pannello2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--tenue);
}
.arc-avvio details pre{max-height:360px;overflow:auto}
pre.arc-errore{border-color:var(--pericolo-bordo);background:var(--pericolo-velo);color:var(--pericolo)}
/* i cinque passi della prova: verde fatto, rosso dove si e' fermata, grigio non provato */
.arc-passi{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.arc-passi li{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello);font-size:12px;color:var(--debole)}
.arc-passi li svg{flex:none;width:12px;height:12px}
.arc-passi li.ok{border-color:var(--successo-bordo);background:var(--successo-velo);color:var(--successo)}
.arc-passi li.no{border-color:var(--pericolo-bordo);background:var(--pericolo-velo);color:var(--pericolo)}
/* campo del percorso e prova fatta adesso */
.campo input.arc-campo{font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:13.5px}
.arc-esito{margin-top:14px}
.arc-esito .arc-passi{margin-top:10px}
@media (max-width:560px){
  .arc-avvio{padding:12px}
  .arc-area{padding:10px 11px}
}

/* ---------------------------------------------------------------------
   IMPOSTAZIONI > VISIBILITA' ARTICOLI (Admin/VisibilitaArticoli.aspx, FPC.VisibilitaArticoliHtml,
   js/visibilita-articoli.js) e il suo riquadro nel Setup (.va-riepilogo).
   Nel DOM ogni gruppo e' una scheda (section.va-gruppo) con i suoi interruttori. Con spazio largo le
   schede diventano le colonne di una griglia accanto alla colonna dei nomi e dei numeri: righe allineate
   con subgrid. La tabella sta in 560px (iPad in orizzontale con il menu aperto: 650px); sotto i 600px di
   spazio (telefono) restano schede, una per gruppo, con nome, note e numero su ogni riga: niente
   scorrimento di lato. Righe alte 48px: tutta la riga e' l'area da toccare. Colore del gruppo (--vg):
   Effe Pi rosso del logo, agenti blu, supervisori viola.
   --------------------------------------------------------------------- */
.g-interni{--vg:var(--ic-rosso)}
.g-agenti{--vg:var(--ic-blu)}
.g-supervisori{--vg:var(--ic-viola)}
.va-corpo{padding:16px 20px 20px}
.va-regola{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--tenue);max-width:80ch}
.va{container:va / inline-size}
.va-avvisi .avviso{margin:0 0 10px}
.va-avvisi .avviso:last-child{margin-bottom:14px}

.va-griglia{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(76px,auto) repeat(3,minmax(104px,172px));
  grid-template-rows:repeat(var(--va-righe),auto);
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);overflow:hidden;
}
.va-etichette{grid-column:1 / 3;grid-row:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;min-width:0}
.va-gruppo{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;min-width:0;border-left:1px solid var(--bordo);background:color-mix(in srgb,var(--vg) 4%,var(--pannello))}
.va-etichette > *,.va-gruppo > *{border-top:1px solid var(--bordo);min-width:0}
.va-etichette > .va-testa,.va-gruppo > .va-testa{border-top:none}

/* testata: nomi delle colonne a sinistra, un gruppo per colonna con icona, nome e quanti articoli vede */
.va-testa-nome,.va-testa-num{display:flex;align-items:flex-end;padding:12px 14px;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--debole)}
.va-testa-num{justify-content:flex-end}
.va-testa-gruppo{display:flex;align-items:center;gap:9px;padding:12px 12px 13px;box-shadow:inset 0 -3px 0 var(--vg)}
.va-g-icona{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--vg);color:#fff}
.va-g-icona svg{display:block}
.va-g-testo{display:flex;flex-direction:column;min-width:0}
.va-g-testo b{font-size:13.5px;line-height:1.25}
.va-g-testo small{font-size:11px;line-height:1.3;color:var(--tenue)}
.va-g-vede{margin-top:3px;font-size:11.5px;font-weight:700;color:var(--vg);font-variant-numeric:tabular-nums}
.va-gruppo.vuoto .va-g-vede{color:var(--pericolo)}

/* titoli di sezione (Stato, Famiglia): una fascia su tutta la riga; la nota solo nella colonna dei nomi */
.va-sezione{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:9px 14px;background:var(--pannello2)}
.va-etichette > .va-sezione{grid-column:1 / -1}
.va-sezione b{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.va-sezione small{font-size:11.5px;line-height:1.4;color:var(--debole)}
.va-gruppo > .va-sezione b{visibility:hidden}
.va-gruppo > .va-sezione small{display:none}

/* nome della riga: lo stato con la sua icona e l'etichetta colorata del catalogo (.cat-stato), oppure la famiglia */
.va-nome{display:flex;align-items:center;gap:10px;padding:8px 14px;min-height:48px}
.va-num{display:flex;align-items:center;justify-content:flex-end;padding:8px 14px;font-size:12.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
.va-icona-stato{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--pannello2);color:var(--tenue)}
.va-icona-stato.nuova{background:var(--verde);color:#fff}
.va-icona-stato.standard{background:var(--blu);color:#fff}
.va-icona-stato.stock{background:#0f8f8a;color:#fff}
.va-icona-stato.fuori{background:#5c6b74;color:#fff}
.va-nome-testo{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.va-famiglia{font-size:12.5px;font-weight:600;letter-spacing:.02em;overflow-wrap:anywhere}
.va-famiglia.senza{font-weight:500;font-style:italic;color:var(--tenue)}
.va-nota{font-size:11px;line-height:1.35;color:var(--debole)}

/* l'interruttore: tutta la cella e' l'area da toccare; cambiata = non ancora salvata */
.interruttore.va-cella{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;min-height:48px;position:relative;transition:background-color .15s}
.va-cella:hover{background:color-mix(in srgb,var(--vg) 9%,transparent)}
.va-cella .va-voce{display:none}
.va-cella.cambiata{background:color-mix(in srgb,var(--accento) 8%,transparent);box-shadow:inset 3px 0 0 var(--accento)}
.va-voce-num{font-size:11.5px;color:var(--tenue);white-space:nowrap;font-variant-numeric:tabular-nums}
/* diversa dal valore iniziale (salvata o no): un pallino nel colore del gruppo nell'angolo, con la legenda sotto la tabella */
.va-cella.diverso::after,.va-segno{content:"";width:8px;height:8px;border-radius:50%;background:var(--vg);box-shadow:0 0 0 2px var(--pannello)}
.va-cella.diverso::after{position:absolute;top:7px;right:7px}
.va-legenda{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12px;line-height:1.4;color:var(--tenue)}
.va-legenda[hidden]{display:none}
.va-segno{--vg:var(--tenue);flex:none;box-shadow:none}

/* anteprima: una scheda per gruppo con la frase e la barretta di quanti articoli vede */
.va-anteprima{margin-top:18px}
.va-anteprima h3{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.va-anteprima ul{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin:0;padding:0;list-style:none}
.va-ant{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--bordo);border-left:3px solid var(--vg);border-radius:var(--raggio);background:var(--pannello2)}
.va-ant .va-g-icona{width:30px;height:30px}
.va-ant-testo{flex:1;min-width:0}
.va-ant-testo p{margin:0;font-size:13px;line-height:1.45}
.va-ant-testo small{display:block;margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--tenue)}
.va-ant.vuoto{border-color:var(--pericolo-bordo);border-left-color:var(--pericolo);background:var(--pericolo-velo)}
.va-barra{display:block;height:6px;margin-top:8px;border-radius:999px;background:var(--bordo);overflow:hidden}
.va-barra i{display:block;height:100%;border-radius:inherit;background:var(--vg);transition:width .25s ease}
.va-ultima{margin:14px 0 0;font-size:12px;color:var(--debole)}
.va-azioni{align-items:center}

/* conferme ed esito */
.va-dialogo-elenco{max-height:42vh;overflow:auto;margin:10px 0 0;padding-left:18px;font-size:13px;line-height:1.5}
.va-dialogo-elenco li.si{color:var(--successo)}
.va-dialogo-elenco li.no{color:var(--pericolo)}
.va-dialogo-elenco li.nessuna{margin-left:-18px;list-style:none;color:var(--tenue)}
.va-dialogo-avvisi .avviso{margin:12px 0 0}
.va-dialogo-conta{font-weight:600}
.va-esito-cambi{margin:6px 0 0;padding-left:18px}

/* nomi degli stati (ticket 410): per ogni stato l'etichetta di oggi e i campi italiano e inglese; sul telefono uno sotto l'altro */
.va-nomi{container:vanomi / inline-size;display:grid;gap:10px}
.va-nomi-riga{display:grid;grid-template-columns:minmax(150px,200px) 1fr 1fr;gap:8px 14px;align-items:end;padding:12px 14px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2)}
.va-nomi-riga > .cat-stato{align-self:center;justify-self:start;max-width:100%;overflow-wrap:anywhere}
@container vanomi (max-width:599px){
  .va-nomi-riga{grid-template-columns:1fr 1fr}
  .va-nomi-riga > .cat-stato{grid-column:1 / -1}
}
@container vanomi (max-width:379px){
  .va-nomi-riga{grid-template-columns:1fr}
}

/* tabella ancora, ma colonne strette (iPad in orizzontale con il menu aperto): icona del gruppo sopra il nome,
   nella colonna dei nomi basta l'etichetta colorata dello stato (senza il tondo) */
@container va (max-width:759px){
  .va-griglia{grid-template-columns:minmax(184px,1fr) minmax(76px,auto) repeat(3,minmax(104px,172px))}
  .va-testa-gruppo{flex-direction:column;align-items:flex-start;gap:7px}
  .va-nome .va-icona-stato{display:none}
}
/* telefono e spazi stretti: una scheda per gruppo, nome, note e numero su ogni riga */
@container va (max-width:599px){
  .va-griglia{display:block;border:none;border-radius:0;background:none;overflow:visible}
  .va-etichette{display:none}
  .va-gruppo{display:block;margin-bottom:14px;border:1px solid var(--bordo-forte);border-top:3px solid var(--vg);border-radius:var(--raggio);background:var(--pannello);overflow:hidden;box-shadow:0 2px 6px -3px rgba(0,0,0,.35)}
  .va-testa-gruppo{flex-direction:row;align-items:center;gap:9px;padding:12px 14px;box-shadow:none}
  .va-gruppo > .va-sezione{padding:8px 14px}
  .va-gruppo > .va-sezione b{visibility:visible}
  .va-gruppo > .va-sezione small{display:block}
  .interruttore.va-cella{justify-content:space-between;padding:8px 14px;min-height:52px}
  .va-cella .va-voce{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
  .va-voce .va-icona-stato{width:26px;height:26px}
  .va-voce .va-icona-stato svg{width:14px;height:14px}
  .va-voce-num{margin-left:auto}
}
@media (max-width:560px){
  .va-corpo{padding:14px 12px 16px}
  .va-ant{padding:11px 12px}
}

/* riquadro nel Setup: quanti articoli vede oggi ogni gruppo */
.va-riepilogo{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.va-riepilogo li{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--bordo);border-left:3px solid var(--vg);border-radius:var(--raggio);background:var(--pannello2)}
.va-riepilogo .va-g-icona{width:32px;height:32px}
.va-rg-testo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:2px 10px;flex:1;min-width:0}
.va-rg-testo b{font-size:13px}
.va-rg-testo small{justify-self:end;font-size:12px;color:var(--tenue);font-variant-numeric:tabular-nums}
.va-rg-testo .va-barra{grid-column:1 / -1;margin-top:5px}
.va-riepilogo li.vuoto small{font-weight:600;color:var(--pericolo)}
.setup-corpo .va-ultima{margin-top:10px}

/* ---------- Impostazioni > Traduzioni (Admin/Traduzioni.aspx, variante B, 19/09/2026) ----------
   a sinistra le aree (stesso elenco delle sezioni del Setup: .setup-nav), a destra l'italiano accanto a una lingua;
   sul telefono prima le aree (data-vista="elenco"), poi l'area con "< Aree" */
.tr-pagina{container:trpagina / inline-size}
.tr-guscio{display:grid;grid-template-columns:262px minmax(0,1fr);gap:20px;align-items:start}
.tr-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}
.tr-cerca{flex:1 1 300px;display:flex;align-items:center;gap:8px;min-width:0;padding:0 14px;border:1.5px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello);color:var(--tenue)}
.tr-cerca.piena,.tr-cerca:focus-within{border-color:var(--accento)}
.tr-cerca input{flex:1;min-width:0;border:none;background:none;padding:12px 0;font:inherit;font-size:15px;color:var(--testo);outline:none}
.tr-cerca kbd{font-size:11px;padding:2px 6px;border:1px solid var(--bordo);border-radius:5px;color:var(--debole)}
.tr-pillole{display:flex;flex-wrap:wrap;gap:6px}
.tr-pillola{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello);font:inherit;font-size:12.5px;line-height:1.2;color:var(--tenue);text-decoration:none;cursor:pointer}
.tr-pillola:hover{border-color:var(--bordo-forte);color:var(--testo)}
.tr-pillola b{font-weight:700;color:var(--testo)}
.tr-pillola.scelta{border-color:var(--accento);background:var(--accento-velo);color:var(--testo)}
.tr-pillola.manca b{color:var(--pos-ambra)}
.tr-pillola svg{flex:none}
.riquadro.tr-corpo{overflow:visible;margin-bottom:0} /* .riquadro ha overflow:hidden: la barra di Salva deve poter restare attaccata in fondo */
.tr-corpo{container:trcorpo / inline-size}
.tr-indietro{display:none;align-items:center;gap:6px;padding:12px 16px 0;font-size:13px;font-weight:600;color:var(--accento-testo);text-decoration:none}
.tr-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 18px;border-bottom:1px solid var(--bordo)}
.tr-titolo{min-width:0}
.tr-titolo b{display:block;font-size:15px;line-height:1.3}
.tr-titolo small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--tenue)}
.tr-sezione{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;background:var(--pannello2);border-bottom:1px solid var(--bordo);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.tr-sezione a{letter-spacing:0;text-transform:none;font-size:12px;font-weight:600;color:var(--accento-testo);text-decoration:none;white-space:nowrap}
.tr-riga{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding:12px 18px;border-bottom:1px solid var(--bordo)}
.tr-riga:not(:has(.tr-campo ~ .tr-campo)){grid-template-columns:minmax(0,1fr)}
.tr-chiave{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.tr-nome{font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--debole);overflow-wrap:anywhere}
.tr-segno{padding:2px 7px;border-radius:999px;background:var(--pannello2);font-size:10.5px;font-weight:600;color:var(--tenue);cursor:help}
.tr-campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.tr-campo-testa{display:flex;align-items:center;gap:8px;min-height:22px}
.tr-campo-testa label{flex:1;display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;color:var(--tenue)}
.tr-campo-testa label b{font-weight:700;letter-spacing:.06em}
.tr-campo-testa label i{font-style:normal;color:var(--debole);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* chi ha cambiato il testo a mano: cerchietto con le iniziali, nome e data nel title */
.tr-chi{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accento);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em;cursor:help}
/* "IA": traduzione chiesta a OpenAI */
.tr-ia{flex:none;padding:2px 8px;border:1px solid var(--bordo-forte);border-radius:999px;background:var(--pannello);font-family:inherit;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.06em;color:var(--blu, #2563eb);cursor:pointer}
.tr-ia:hover{border-color:currentColor}
.tr-ia.in-corso{cursor:progress;animation:tr-ia-pulsa 1s ease-in-out infinite}
@keyframes tr-ia-pulsa{50%{opacity:.3}}
.tr-area,.tr-sfondo{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--bordo);border-radius:8px;font-family:inherit;font-size:13.5px;line-height:1.45;letter-spacing:normal;white-space:pre-wrap;overflow-wrap:break-word;box-sizing:border-box}
.tr-area{display:block;resize:none;overflow:hidden;background:var(--pannello2);color:var(--testo)}
.tr-area:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--accento-velo)}
.tr-campo.vuoto .tr-area{border-color:color-mix(in srgb,var(--pos-ambra) 55%,transparent);background:color-mix(in srgb,var(--pos-ambra) 10%,transparent)}
.tr-campo.cambiato .tr-area{border-color:var(--accento);box-shadow:inset 3px 0 0 var(--accento)}
.tr-campo.errato .tr-area{border-color:var(--pericolo);box-shadow:inset 3px 0 0 var(--pericolo)}
.tr-msg,.tr-msg-ia{font-size:11.5px;line-height:1.4;color:var(--pericolo)}
.tr-msg-ia.attesa{color:var(--tenue)}
.tr-msg-ia.avviso{color:var(--pos-ambra)}
/* risultati di una ricerca: la parola trovata evidenziata dietro il campo (js/traduzioni.js) */
.tr-evidenza{position:relative;border-radius:8px;background:var(--pannello2)}
.tr-sfondo{position:absolute;inset:0;overflow:hidden;border-color:transparent;color:transparent;pointer-events:none}
.tr-sfondo mark{background:color-mix(in srgb,var(--pos-ambra) 38%,transparent);color:transparent;border-radius:3px}
.tr-evidenza .tr-area{position:relative;background:transparent}
.tr-ripristina{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:2px 0;border:none;background:none;font:inherit;font-size:12px;color:var(--tenue);cursor:pointer}
.tr-ripristina:hover{color:var(--accento-testo)}
.tr-vuoto{padding:24px 18px}
.tr-salva{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid var(--bordo);border-radius:0 0 var(--raggio) var(--raggio);background:var(--pannello);box-shadow:0 -6px 14px -10px rgba(0,0,0,.35)}
.tr-salva small{font-size:12.5px;color:var(--tenue)}
.tr-esito-errori{margin:6px 0 0;padding-left:18px}
/* finestra delle lingue */
.tr-dialogo{max-width:640px}
.tr-dialogo h4{margin:18px 0 8px;font-size:13px}
.tr-lingue-elenco{list-style:none;margin:12px 0 0;padding:0}
.tr-lingue-elenco li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--bordo);font-size:13.5px}
.tr-lingue-elenco li small{display:block;font-size:12px;color:var(--tenue)}
.tr-nuova{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
@container trcorpo (max-width:639px){
  .tr-riga{grid-template-columns:minmax(0,1fr)}
}
@container trpagina (max-width:759px){
  .tr-guscio{grid-template-columns:minmax(0,1fr)}
  .tr-pagina[data-vista="elenco"] .tr-corpo{display:none}
  .tr-pagina[data-vista="area"] .tr-sinistra{display:none}
  .tr-pagina[data-vista="area"] .tr-indietro{display:inline-flex}
  .tr-sinistra .setup-nav{position:static;max-height:none}
  .tr-cerca kbd{display:none}
}
@media (max-width:560px){
  .tr-nuova{grid-template-columns:minmax(0,1fr)}
  .tr-riga,.tr-testa,.tr-salva{padding-left:12px;padding-right:12px}
}

/* Setup > Identita' del sito: anteprima di logo e nome come nella testata (.marchio) */
.id-anteprima{margin-top:14px;padding:12px 14px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2)}
.id-anteprima > small{display:block;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--debole)}
.id-marchio{display:flex;align-items:center;gap:13px;min-width:0;padding:10px 14px;border-radius:8px;background:var(--pannello)}
.id-marchio img{height:22px;width:auto;max-width:60%;display:block;object-fit:contain}
.id-filetto{flex:none;width:1px;height:22px;background:var(--bordo)}
.id-nome{font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.id-nome b{color:var(--accento-testo)}

/* ===================== Modifica e nuova azienda (Clienti/Modifica.aspx, js/anagrafica-modifica.js) =====================
   Variante A scelta dall'utente il 19/09/2026: testata compatta, indice a sinistra (sul telefono schede in alto), sezioni
   con campi grandi, contatti modificati sul posto con i recapiti a icona colorata, un solo Salva in basso sempre in vista.
   Tutto sotto .am-pagina: nomi brevi come .c6 o .st non escono da qui. I campi compilati dal biglietto da visita letto
   da ChatGPT restano segnati in azzurro (.dal-biglietto) finche' non si toccano. */
.am-pagina{container:am / inline-size;--am-ia:#2f7de1}
html[data-tema="scuro"] .am-pagina{--am-ia:#8ab4ff}
/* la finestra della lettura sta nel body, fuori da .am-pagina: senza questo il suo blu mancava e la barra e la luce
   sulla foto non si vedevano (10/10/2026); serve anche alla finestra della Copia Commissioni */
.am-lettura{--am-ia:#2f7de1}
html[data-tema="scuro"] .am-lettura{--am-ia:#8ab4ff}
.am-pagina .am-errore{margin:0 0 16px}

/* testata */
.am-pagina .a-testa{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px 14px 22px;margin:0 0 18px;overflow:hidden;border-radius:12px;border:1px solid var(--bordo);background:var(--pannello)}
.am-pagina .a-testa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--fascia-sfumata,var(--accento))}
.am-pagina .a-testa > .stato-cliente{position:static;margin:0 0 0 auto;flex:none;border-radius:4px}
.am-pagina .a-mono{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:var(--accento);background-image:var(--trama);color:#fff;font-weight:700;font-size:17px;letter-spacing:-.01em}
.am-pagina .a-testa-t{flex:1;min-width:0}
.am-pagina .a-testa-t small{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accento-testo)}
.am-pagina .a-testa-t b{display:block;margin-top:3px;overflow:hidden;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}

/* indice e sezioni */
.am-pagina .a-corpo{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.am-pagina .a-corpo > *,.am-pagina .a-persona,.am-pagina .a-persona-corpo{min-width:0}
.am-pagina .a-indice{position:sticky;top:calc(var(--testata) + 16px);display:grid;gap:3px;padding:8px;border-radius:12px;border:1px solid var(--bordo);background:var(--pannello)}
.am-pagina .a-indice a{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;border-radius:8px;color:var(--tenue);font-size:14px;font-weight:600;text-decoration:none;transition:background-color .15s,color .15s}
.am-pagina .a-indice a:hover{background:var(--pannello2);color:var(--testo)}
.am-pagina .a-indice a.sel{background:var(--accento-velo);color:var(--accento-testo)}
.am-pagina .a-indice a svg{flex:none}
.am-pagina .a-indice .st{flex:none;margin-left:auto;width:9px;height:9px;border-radius:50%;background:var(--ic-verde)}
.am-pagina .a-indice .st.manca{background:#e4a11b}
.am-pagina .a-indice .n{flex:none;margin-left:auto;display:grid;place-items:center;min-width:22px;height:20px;padding:0 7px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello2);font-size:11px;color:var(--tenue)}
.am-pagina .a-indice .n:empty,.am-pagina .a-indice [hidden]{display:none}
.am-pagina .a-indice hr{margin:6px 4px;border:0;border-top:1px solid var(--bordo)}
.am-pagina .a-indice .legenda{margin:0;padding:4px 12px 6px;font-size:11.5px;line-height:1.6;color:var(--debole)}
.am-pagina .a-indice .legenda i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--ic-verde)}
.am-pagina .a-indice .legenda i.m{background:#e4a11b}
.am-pagina .a-sez{margin:0 0 18px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);scroll-margin-top:calc(var(--testata) + 16px)}
.am-pagina .a-sez > header{display:flex;align-items:center;gap:12px;padding:15px 18px 15px 20px;border-bottom:1px solid var(--bordo)}
.am-pagina .a-sez > header .az-sezione-icona{width:34px;height:34px;border-radius:9px}
.am-pagina .a-sez > header > div{flex:1 1 0;min-width:0}
.am-pagina .a-sez > header h2{margin:0;padding:0;border:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.am-pagina .a-sez > header p{margin:2px 0 0;font-size:12.5px;color:var(--tenue)}
.am-pagina .a-sez > header .bottone{margin-left:auto;flex:none}
.am-pagina .a-sez-corpo{padding:20px}

/* campi */
.am-pagina .am-griglia{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 18px}
.am-pagina .c12{grid-column:span 12}.am-pagina .c8{grid-column:span 8}.am-pagina .c6{grid-column:span 6}.am-pagina .c5{grid-column:span 5}
.am-pagina .c4{grid-column:span 4}.am-pagina .c3{grid-column:span 3}.am-pagina .c2{grid-column:span 2}
.am-pagina .am-campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.am-pagina .am-campo > label,.am-pagina .am-etichetta{font-size:12px;font-weight:600;color:var(--tenue);letter-spacing:.01em}
.am-pagina .am-campo > label i{margin-left:2px;font-style:normal;color:var(--accento-testo)}
.am-pagina .am-campo input,.am-pagina .am-campo select,.am-pagina .am-rec input{
  width:100%;min-width:0;height:44px;padding:0 13px;border-radius:8px;border:1px solid var(--bordo-forte);
  background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s;
}
.am-pagina .am-campo input:focus,.am-pagina .am-campo select:focus,.am-pagina .am-rec input:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.am-pagina .am-campo input.grande{font-size:17px;font-weight:600;letter-spacing:-.01em}
.am-pagina .am-campo input.maiuscolo{text-transform:uppercase;letter-spacing:.04em}
.am-pagina .am-campo input::placeholder,.am-pagina .am-rec input::placeholder{color:var(--debole);text-transform:none;letter-spacing:0}
.am-pagina .am-aiuto{font-size:12px;line-height:1.4;color:var(--debole)}
.am-pagina .am-con-sigla{position:relative}
.am-pagina .am-con-sigla .sigla{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:grid;place-items:center;min-width:30px;height:22px;padding:0 5px;border-radius:5px;border:1px solid var(--bordo);background:var(--pannello2);font-size:11px;font-weight:700;color:var(--tenue);pointer-events:none}
.am-pagina .am-con-sigla select{padding-left:50px}
.am-pagina .am-pillole{display:flex;flex-wrap:wrap;gap:6px}
.am-pagina .am-pillola{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--bordo-forte);background:var(--pannello);font-size:13.5px;font-weight:600;color:var(--tenue);cursor:pointer;user-select:none}
.am-pagina .am-pillola .spunta{display:none}
.am-pagina .am-pillola.sel{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
.am-pagina .am-pillola.sel .spunta{display:block}
.am-pagina .am-pillola:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}

/* campi compilati dal biglietto da visita: bordo e velo azzurri e la sigla IA accanto all'etichetta */
.am-pagina .dal-biglietto > input,.am-pagina .dal-biglietto > .am-con-sigla > select,.am-pagina .am-rec.dal-biglietto input{border-color:var(--am-ia);background:color-mix(in srgb,var(--am-ia) 8%,var(--campo-attivo))}
.am-pagina .am-campo.dal-biglietto > label::after{content:"IA";margin-left:7px;padding:1px 5px;border-radius:4px;background:var(--am-ia);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.06em;vertical-align:1px}

/* biglietto da visita */
.am-pagina .am-biglietto{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.am-pagina .am-biglietto-foto{flex:none;display:grid;place-items:center;width:180px;height:112px;overflow:hidden;border-radius:10px;border:1px dashed var(--bordo-forte);background:var(--pannello2);color:var(--debole)}
.am-pagina .am-biglietto-foto a{display:block;width:100%;height:100%}
.am-pagina .am-biglietto-foto img{display:block;width:100%;height:100%;object-fit:cover}
.am-pagina .am-biglietto-foto a + .am-biglietto-vuoto{display:none}
.am-pagina .am-biglietto-foto:has(a){border-style:solid}
.am-pagina .am-biglietto-azioni{flex:1 1 260px;min-width:0;display:grid;gap:8px;justify-items:start}
.am-pagina .am-biglietto-scegli{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.am-pagina .am-biglietto-azioni .am-aiuto{margin:0}
.am-pagina .am-biglietto-stato{display:flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.4;background:var(--pannello2);color:var(--testo)}
.am-pagina .am-biglietto-stato.in-corso{color:var(--tenue)}
.am-pagina .am-biglietto-stato.ok{background:color-mix(in srgb,var(--am-ia) 10%,var(--pannello));color:var(--testo);box-shadow:inset 3px 0 0 var(--am-ia)}
.am-pagina .am-biglietto-stato.avvisa{box-shadow:inset 3px 0 0 #e4a11b}
.am-pagina .am-biglietto-stato.errore{box-shadow:inset 3px 0 0 var(--pericolo);color:var(--pericolo)}
.am-pagina .am-biglietto-stato .spin{flex:none}

/* contatti */
.am-pagina .a-persone{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.am-pagina .a-persone:empty{display:none}
.am-pagina .a-persona{border:1px solid var(--bordo);border-radius:10px;background:var(--sfondo);transition:border-color .15s}
.am-pagina .a-persona:hover{border-color:var(--bordo-forte)}
.am-pagina .a-persona-riga{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;cursor:pointer}
.am-pagina .a-persona.aperta .a-persona-riga{cursor:default;border-bottom:1px solid var(--bordo)}
.am-pagina .a-persona-riga .nome{flex:1;min-width:0}
.am-pagina .a-persona-riga .nome b{display:block;overflow:hidden;font-size:15px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.am-pagina .a-persona-riga .nome span{display:block;margin-top:2px;overflow:hidden;font-size:12px;font-weight:600;color:var(--accento-testo);text-overflow:ellipsis;white-space:nowrap}
.am-pagina .a-persona-riga .nome span.grigio{color:var(--tenue)}
.am-pagina .a-persona-riga .icona-riga{flex:none}
.am-pagina .a-persona.aperta{background:var(--pannello);border-color:var(--accento);box-shadow:0 0 0 3px var(--accento-velo)}
.am-pagina .a-persona.dal-biglietto.aperta{border-color:var(--am-ia);box-shadow:0 0 0 3px color-mix(in srgb,var(--am-ia) 18%,transparent)}
.am-pagina .a-persona.tolta{opacity:.62;border-style:dashed}
.am-pagina .a-persona.tolta .nome b{text-decoration:line-through}
.am-pagina .a-persona-corpo{padding:16px 16px 18px}
.am-pagina .a-persona-corpo h4{margin:18px 0 10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.am-pagina .a-persona-corpo h4:first-child{margin-top:0}
.am-pagina .am-avatar{--av:var(--ic-blu);flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--av) 50%,transparent);background:color-mix(in srgb,var(--av) 14%,transparent);color:var(--av);font-size:14px;font-weight:700}
.am-pagina .am-avatar.v{--av:var(--ic-verde)}.am-pagina .am-avatar.t{--av:var(--ic-teal)}.am-pagina .am-avatar.g{--av:var(--ic-grigio)}
.am-pagina .am-mini{display:flex;flex-wrap:wrap;gap:5px}
.am-pagina .am-mini span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--ic) 14%,transparent);color:var(--ic)}

/* recapiti: tipo con icona colorata (menu con i cinque tipi), valore, togli; aggiungi con un tocco */
.am-pagina .am-recapiti{display:grid;gap:8px}
.am-pagina .am-recapiti:empty{display:none}
.am-pagina :where(.am-rec,.am-agg button,.am-menu button,.am-mini span){--ic:var(--ic-grigio)}
.am-pagina .r-email{--ic:var(--ic-blu)}.am-pagina .r-cell,.am-pagina .r-tel{--ic:var(--ic-verde)}.am-pagina .r-sito{--ic:var(--ic-teal)}.am-pagina .r-fax{--ic:var(--ic-grigio)}.am-pagina .r-skype{--ic:var(--ic-viola)}
.am-pagina .am-rec{position:relative;display:grid;grid-template-columns:148px minmax(0,1fr) 44px;gap:8px;align-items:center}
.am-pagina .am-rec-tipo{
  display:flex;align-items:center;gap:8px;min-width:0;height:44px;padding:0 10px 0 7px;border-radius:8px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ic) 38%,transparent);background:color-mix(in srgb,var(--ic) 9%,var(--pannello));
  color:var(--testo);font:inherit;font-size:13.5px;font-weight:600;
}
.am-pagina .am-rec-tipo:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.am-pagina .am-rec-tipo .ic,.am-pagina .am-menu .ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--ic) 18%,transparent);color:var(--ic)}
.am-pagina .am-rec-tipo .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-pagina .am-rec-tipo .giu{flex:none;margin-left:auto;color:var(--tenue)}
.am-pagina .am-rec input{font-variant-numeric:tabular-nums}
.am-pagina .am-togli{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--bordo);background:var(--pannello);color:var(--tenue);cursor:pointer}
.am-pagina .am-togli:hover{border-color:var(--pericolo-bordo);color:var(--pericolo)}
.am-pagina .am-menu{position:absolute;left:0;top:50px;z-index:8;display:grid;gap:2px;width:210px;padding:6px;border-radius:10px;border:1px solid var(--bordo-forte);background:var(--pannello);box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
.am-pagina .am-menu button{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 6px;border:0;border-radius:7px;background:transparent;color:var(--testo);font:inherit;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer}
.am-pagina .am-menu button .ic{width:28px;height:28px}
.am-pagina .am-menu button:hover,.am-pagina .am-menu button:focus-visible{background:var(--pannello2);outline:none}
.am-pagina .am-menu button.sel::after{content:"";margin-left:auto;width:12px;height:7px;border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg) translate(2px,-2px)}
.am-pagina .am-agg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.am-pagina .am-agg small{margin-right:2px;font-size:12px;font-weight:600;color:var(--tenue)}
.am-pagina .am-agg button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px 0 9px;border-radius:999px;border:1px dashed color-mix(in srgb,var(--ic) 55%,transparent);background:transparent;color:var(--testo);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.am-pagina .am-agg button:hover{background:color-mix(in srgb,var(--ic) 8%,transparent);border-style:solid}
.am-pagina .am-agg button svg,.am-pagina .am-agg button b{color:var(--ic)}
.am-pagina .am-agg button b{font-weight:700}

/* salva: sempre in vista in fondo allo schermo */
.am-pagina .a-salva{position:sticky;bottom:12px;z-index:6;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px 12px 18px;border-radius:12px;border:1px solid var(--bordo-forte);background:color-mix(in srgb,var(--pannello) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 16px 40px -18px rgba(0,0,0,.55)}
.am-pagina .a-salva .stato{display:flex;align-items:center;gap:9px;margin-right:auto;font-size:13.5px;font-weight:600;color:var(--tenue)}
.am-pagina .a-salva .stato i{width:10px;height:10px;border-radius:50%;background:var(--ic-verde)}
.am-pagina .a-salva .stato.sporco{color:var(--testo)}
.am-pagina .a-salva .stato.sporco i{background:#e4a11b;box-shadow:0 0 0 4px rgba(228,161,27,.2)}
.am-pagina .a-salva .bottone{min-height:42px;display:inline-flex;align-items:center}

/* tablet: indice piu' stretto */
@container am (max-width:980px){
  .am-pagina .a-corpo{grid-template-columns:190px minmax(0,1fr);gap:16px}
  .am-pagina .a-indice a{padding:0 10px;font-size:13px}
}
/* telefono: indice a schede in alto, sempre in vista; campi uno sotto l'altro (CAP e provincia affiancati); il tipo del
   recapito resta solo icona; Salva a tutta larghezza */
@container am (max-width:700px){
  .am-pagina .a-testa{padding:12px 12px 12px 16px}
  .am-pagina .a-testa > .stato-cliente{display:none}
  .am-pagina .a-corpo{grid-template-columns:minmax(0,1fr)}
  .am-pagina .a-indice{top:calc(var(--testata) + 6px);z-index:7;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:4px}
  .am-pagina .a-indice a{position:relative;flex-direction:column;justify-content:center;gap:3px;min-height:52px;padding:4px 1px;font-size:10.5px;text-align:center}
  .am-pagina .a-indice a > span:first-of-type{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .am-pagina .a-indice .st,.am-pagina .a-indice .n{position:absolute;top:4px;right:4px;margin:0}
  .am-pagina .a-indice .n{min-width:16px;height:15px;padding:0 4px;font-size:9.5px}
  .am-pagina .a-indice hr,.am-pagina .a-indice .legenda{display:none}
  .am-pagina .a-sez > header{padding:12px 14px;flex-wrap:wrap}
  .am-pagina .a-persona-riga .am-mini{display:none}
  .am-pagina .a-persona-riga{gap:10px;padding:8px 8px 8px 10px}
  .am-pagina .a-sez-corpo{padding:14px}
  .am-pagina .am-griglia{gap:14px}
  .am-pagina .am-griglia > *{grid-column:span 12}
  .am-pagina .am-griglia > .t6{grid-column:span 6}
  .am-pagina .am-biglietto-foto{width:100%;height:150px}
  .am-pagina .am-rec{grid-template-columns:52px minmax(0,1fr) 44px}
  .am-pagina .am-rec-tipo{justify-content:center;padding:0 4px}
  .am-pagina .am-rec-tipo .t,.am-pagina .am-rec-tipo .giu{display:none}
  .am-pagina .am-menu{width:200px}
  .am-pagina .am-agg button{height:40px}
  .am-pagina .a-persona-corpo{padding:12px}
  .am-pagina .a-salva{bottom:8px;padding:10px}
  .am-pagina .a-salva .stato{flex:1 1 100%;margin:0 0 2px}
  .am-pagina .a-salva .bottone{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.am-pagina .a-indice a,.am-pagina .am-campo input{transition:none}}
/* ===================== ricerca generale del portale (19/09/2026) =====================
   Casella in testata (#rgCasella, FPC.Master): pillola sugli schermi larghi, tondo sotto i 980px.
   Finestra veloce (dialog.rg-finestra, js/ricerca.js, variante A) e pagina dei risultati (Cerca.aspx, .rg-pagina,
   variante B). Ogni tipo di risultato ha il suo colore (--k) e la sua icona; <mark> sono le parole cercate. */
.k-azienda{--k:var(--ic-blu)}.k-contatto{--k:var(--ic-teal)}.k-opportunita{--k:var(--accento)}.k-documento{--k:#1d7a45}
.k-articolo{--k:var(--ic-viola)}.k-ticket{--k:#d98a0b}.k-chat{--k:var(--ic-verde)}.k-pagina{--k:var(--ic-grigio)}.k-persona{--k:#be185d}
html[data-tema="scuro"] .k-documento{--k:#4fbf7f}
html[data-tema="scuro"] .k-ticket{--k:#f0b04a}
html[data-tema="scuro"] .k-persona{--k:#f472b6}
.rg-finestra mark,.rg-pagina mark{background:color-mix(in srgb,#ffd84d 70%,transparent);color:inherit;border-radius:3px;padding:0 1px}
html[data-tema="scuro"] .rg-finestra mark,html[data-tema="scuro"] .rg-pagina mark{background:rgba(255,216,77,.32)}

/* casella in testata */
.rg-casella{
  flex:1 1 360px;max-width:440px;min-width:0;margin:0 auto;display:flex;align-items:center;gap:10px;height:40px;
  padding:0 6px 0 14px;border-radius:999px;border:1px solid var(--bordo-forte);background:var(--pannello2);
  color:var(--tenue);font-size:13.5px;text-decoration:none;cursor:text;transition:border-color .2s,box-shadow .2s,color .2s;
}
.rg-casella svg{flex:none}
.rg-casella span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-casella kbd,.rg-tasti kbd{
  flex:none;font:600 11px/1 var(--carattere);padding:4px 7px;border-radius:6px;
  border:1px solid var(--bordo-forte);background:var(--pannello);color:var(--tenue);
}
.rg-casella:hover,.rg-casella:focus-visible{border-color:var(--accento);color:var(--testo);box-shadow:0 0 0 3px var(--campo-alone);outline:none}
@media (max-width:1180px){.rg-casella kbd{display:none}}
@media (max-width:980px){
  .rg-casella{flex:none;width:36px;height:36px;padding:0;margin:0 0 0 auto;justify-content:center;border-color:var(--bordo);background:transparent;cursor:pointer}
  .rg-casella span{display:none}
}
@media (max-width:560px){.rg-casella{width:34px;height:34px}}

/* icone dei tipi, pillole dei tipi */
.rg-ic,.rg-av{
  flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;overflow:hidden;
  background:color-mix(in srgb,var(--k) 13%,transparent);color:var(--k);border:1px solid color-mix(in srgb,var(--k) 30%,transparent);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.rg-av,.rg-ic.rg-tondo{border-radius:50%}
.rg-av.rg-quadro{border-radius:10px}
.rg-quadro.s-cliente{--k:var(--ic-blu)}
.rg-quadro.s-prospect{--k:#d98a0b}
.rg-ic[class*="fam-"]{--k:var(--fc)}
.rg-ic.rg-foto{background:var(--pannello2)}
.rg-ic.rg-foto img{width:100%;height:100%;object-fit:cover;display:block}
.rg-tipi{display:flex;flex-wrap:wrap;gap:6px}
.rg-pillola{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 9px 0 11px;border-radius:999px;
  border:1px solid var(--bordo);background:var(--pannello);font-size:13px;font-weight:600;color:var(--tenue);
  white-space:nowrap;text-decoration:none;transition:border-color .2s,color .2s,background-color .2s;
}
.rg-pillola svg{flex:none;color:var(--k,var(--tenue));margin-left:-2px}
.rg-pillola em{
  font-style:normal;min-width:20px;height:19px;padding:0 6px;border-radius:999px;background:var(--pannello2);
  border:1px solid var(--bordo);font-size:11px;display:grid;place-items:center;color:var(--tenue);
}
.rg-pillola:hover{border-color:var(--k,var(--accento));color:var(--testo)}
.rg-pillola.sel{background:var(--testo);border-color:var(--testo);color:var(--pannello)}
.rg-pillola.sel svg{color:var(--pannello)}
.rg-pillola.sel em{background:rgba(255,255,255,.18);border-color:transparent;color:var(--pannello)}
html[data-tema="scuro"] .rg-pillola.sel em{background:rgba(0,0,0,.16)}

/* finestra veloce */
dialog.rg-finestra{
  width:min(1000px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 12vh);margin:6vh auto auto;padding:0;border:0;
  border-radius:18px;background:var(--pannello);color:var(--testo);flex-direction:column;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 1px var(--bordo);
}
dialog.rg-finestra[open]{display:flex}
dialog.rg-finestra::backdrop{background:rgba(10,22,30,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
html.rg-aperta{overflow:hidden}
.rg-f-input{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--bordo)}
.rg-f-input > svg{flex:none;color:var(--accento-testo)}
.rg-f-input input{
  flex:1;min-width:0;height:44px;padding:0;border:0;outline:0;background:transparent;color:var(--testo);
  font:500 21px/1.2 var(--carattere);letter-spacing:-.01em;-webkit-appearance:none;appearance:none;
}
.rg-f-input input::placeholder{color:var(--debole);font-weight:400}
/* il campo e' gia' dentro la sua cornice: niente bordo, alone e sfondo dei campi normali (regole in fondo al file) */
.rg-f-input input[type=search],.rg-f-input input[type=search]:hover,.rg-f-input input[type=search]:focus,
.rg-cerca input[type=search],.rg-cerca input[type=search]:hover,.rg-cerca input[type=search]:focus{border:0;border-radius:0;box-shadow:none;background:transparent;outline:none}
.rg-cerca:focus-within{box-shadow:0 0 0 6px var(--campo-alone),0 24px 50px -30px rgba(0,0,0,.4)}
.rg-f-input input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.rg-f-stato{flex:none;font-size:12px;color:var(--tenue);white-space:nowrap}
.rg-cerca-in-corso .rg-f-input > svg{animation:rg-pulsa 1s ease-in-out infinite}
@keyframes rg-pulsa{50%{opacity:.3}}
.rg-f-tipi{padding:10px 20px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.rg-f-tipi[hidden]{display:none}
.rg-f-corpo{flex:1 1 auto;min-height:0;height:460px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.rg-f-elenco{overflow-y:auto;overscroll-behavior:contain;padding:4px 10px 12px;border-right:1px solid var(--bordo)}
.rg-f-gruppo{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:12px 10px 4px;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);
}
.rg-f-gruppo a{color:var(--accento-testo);letter-spacing:0;text-transform:none;font-size:12px;font-weight:600;text-decoration:none}
.rg-f-gruppo a:hover{text-decoration:underline}
.rg-voce{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;color:inherit;text-decoration:none;scroll-margin:10px}
.rg-voce .rg-testi{flex:1;min-width:0}
.rg-voce b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-voce small{display:block;margin-top:2px;font-size:12px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-voce.sel{background:color-mix(in srgb,var(--k,var(--accento)) 9%,var(--pannello));box-shadow:inset 3px 0 0 var(--k,var(--accento))}
.rg-recente{--k:var(--ic-grigio)}
.rg-invio{flex:none;visibility:hidden;font-size:11px;color:var(--tenue);border:1px solid var(--bordo-forte);border-radius:6px;padding:2px 6px}
.rg-voce.sel .rg-invio{visibility:visible}
.rg-f-vuoto{display:grid;justify-items:center;gap:6px;padding:34px 24px 14px;text-align:center;color:var(--tenue)}
.rg-f-vuoto b{color:var(--testo);font-size:15px;font-weight:600}
.rg-f-vuoto p{margin:0;max-width:430px;font-size:13px;line-height:1.5}
.rg-f-vuoto-icona{display:grid;place-items:center;width:54px;height:54px;margin-bottom:6px;border-radius:16px;background:var(--accento-velo);color:var(--accento-testo)}
.rg-f-anteprima{overflow-y:auto;overscroll-behavior:contain;padding:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--k,var(--accento)) 7%,var(--pannello)),var(--pannello) 55%)}
.rg-f-anteprima[class*="fam-"]{--k:var(--fc)}
.rg-a-testa{display:flex;gap:16px;align-items:center}
.rg-a-testa > div{min-width:0}
.rg-a-testa b{display:block;font-size:17px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.rg-a-testa small{display:block;margin-top:4px;font-size:12.5px;color:var(--tenue);line-height:1.4}
.rg-a-testa small.rg-a-tag{margin:0 0 3px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--k)}
.rg-a-mono{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:var(--k);color:#fff;font-size:21px;font-weight:700}
.k-contatto > .rg-a-testa .rg-a-mono,.k-chat > .rg-a-testa .rg-a-mono,.k-persona > .rg-a-testa .rg-a-mono{border-radius:50%}
.rg-a-foto{flex:none;width:92px;height:92px;border-radius:14px;object-fit:cover;border:1px solid var(--bordo);background:var(--pannello2)}
.rg-a-dove{margin:18px 0 0;padding:10px 12px;border-radius:10px;background:var(--pannello);border:1px solid var(--bordo);font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.rg-a-dove small{display:block;margin-bottom:3px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.rg-a-info{margin:10px 0 0;font-size:12.5px;color:var(--tenue)}
.rg-a-legami{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 0}
.rg-a-legami small{flex:1 1 100%;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.rg-a-legami a{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:28px;padding:3px 10px 3px 8px;border-radius:999px;
  background:var(--pannello);border:1px solid var(--bordo);font-size:12px;font-weight:600;color:var(--testo);text-decoration:none;
}
.rg-a-legami a svg{flex:none;color:var(--k)}
.rg-a-legami a:hover{border-color:var(--k)}
.rg-a-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.rg-f-piede{display:flex;align-items:center;gap:18px;padding:10px 20px;border-top:1px solid var(--bordo);background:var(--pannello2);font-size:12px;color:var(--tenue)}
.rg-tasti{display:flex;flex-wrap:wrap;gap:14px}
.rg-tasti kbd{padding:3px 6px}
.rg-f-tutti{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--accento-testo);text-decoration:none;white-space:nowrap}
.rg-f-tutti:hover{text-decoration:underline}
.rg-f-tutti[hidden]{display:none}
@media (max-width:700px){
  dialog.rg-finestra{width:100vw;height:100dvh;max-height:none;margin:0;border-radius:0;box-shadow:none}
  .rg-f-input{gap:10px;padding:8px 8px 8px 14px;padding-top:calc(8px + env(safe-area-inset-top))}
  .rg-f-input input{font-size:17px}
  .rg-f-stato{display:none}
  .rg-f-tipi{padding:8px 12px}
  .rg-pillola{height:30px;padding:0 7px 0 9px;font-size:12.5px;gap:5px}
  .rg-pillola svg{display:none}
  .rg-f-corpo{height:auto;grid-template-columns:minmax(0,1fr)}
  .rg-f-elenco{border:0;padding:2px 6px 16px}
  .rg-f-anteprima,.rg-tasti,.rg-invio{display:none}
  .rg-voce{padding:9px 8px}
  .rg-f-piede{justify-content:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .rg-f-tutti{margin:0;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.rg-cerca-in-corso .rg-f-input > svg{animation:none}}

/* pagina dei risultati */
.rg-pagina{container:rg / inline-size;max-width:1180px}
.rg-cerca{
  display:flex;align-items:center;gap:14px;min-height:64px;padding:0 10px 0 22px;border-radius:18px;border:2px solid var(--accento);
  background:var(--pannello);box-shadow:0 0 0 5px var(--campo-alone),0 24px 50px -30px rgba(0,0,0,.4);
}
.rg-cerca > svg{flex:none;color:var(--accento-testo)}
.rg-cerca input{
  flex:1;min-width:0;height:58px;padding:0;border:0;outline:0;background:transparent;color:var(--testo);box-shadow:none;
  font:500 22px/1.2 var(--carattere);-webkit-appearance:none;appearance:none;
}
.rg-cerca input::placeholder{color:var(--debole);font-weight:400}
.rg-cerca .bottone{flex:none;min-height:44px}
.rg-riassunto{display:grid;gap:12px;margin:18px 2px 16px}
.rg-riassunto p{margin:0;font-size:14px;color:var(--tenue)}
.rg-riassunto p b{color:var(--testo)}
.rg-migliore{
  position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  margin:0 0 20px;padding:20px 22px 20px 26px;border-radius:16px;background:var(--pannello);border:1px solid var(--bordo);
  box-shadow:0 18px 40px -32px rgba(0,0,0,.45);
}
.rg-migliore::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--k)}
.rg-migliore.s-prospect{--k:#d98a0b}
.rg-mono{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:var(--k);color:#fff;font-weight:700;font-size:22px}
.rg-migliore.k-contatto .rg-mono,.rg-migliore.k-persona .rg-mono{border-radius:50%}
.rg-migliore-testi small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--k)}
.rg-migliore h2{margin:4px 0;padding:0;border:0;font-size:21px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.rg-migliore h2 a{color:inherit;text-decoration:none}
.rg-migliore h2 a:hover{text-decoration:underline}
.rg-migliore p{margin:0;font-size:13.5px;color:var(--tenue)}
.rg-migliore-azioni{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.rg-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.rg-gruppo{border-radius:14px;background:var(--pannello);border:1px solid var(--bordo);overflow:hidden}
.rg-intero{grid-column:1 / -1}
.rg-gruppo > header{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 16px;border-bottom:1px solid var(--bordo)}
.rg-gruppo > header .rg-ic{width:32px;height:32px;border-radius:9px}
.rg-gruppo > header h3{margin:0;padding:0;border:0;font-size:15px;font-weight:600;white-space:nowrap}
.rg-gruppo > header em{min-width:0;font-style:normal;font-size:12px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-gruppo > header a{flex:none;margin-left:auto;font-size:12.5px;font-weight:600;color:var(--accento-testo);text-decoration:none}
.rg-gruppo > header a:hover{text-decoration:underline}
.rg-righe{display:grid}
.rg-riga{position:relative;display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--bordo)}
.rg-riga:last-child{border-bottom:0}
.rg-riga:hover{background:color-mix(in srgb,var(--k,var(--accento)) 5%,var(--pannello))}
.rg-riga .rg-testi{flex:1;min-width:0;color:inherit;text-decoration:none}
.rg-riga .rg-testi::after{content:"";position:absolute;inset:0}
.rg-riga .rg-testi:focus-visible{outline:none}
.rg-riga:has(.rg-testi:focus-visible){box-shadow:inset 0 0 0 2px var(--accento2)}
.rg-riga .rg-testi b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-riga .rg-testi small{display:block;margin-top:2px;font-size:12.5px;color:var(--tenue);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-frammento{margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--testo);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rg-frammento i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.rg-fascia{flex:none;align-self:stretch;width:4px;border-radius:4px;background:var(--k)}
.rg-freccia{flex:none;color:var(--debole);transition:transform .2s,color .2s}
.rg-riga:hover .rg-freccia{color:var(--k);transform:translateX(2px)}
.rg-rapide{position:relative;z-index:1;display:flex;gap:6px}
.rg-rapide a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;text-decoration:none;transition:filter .2s}
.rg-rapide a:hover{filter:brightness(1.08)}
/* nomi con il prefisso rg-: "chat" da sola e' la classe della PAGINA della chat (altezza minima 480px) e
   trasformava il tondo verde in un'ellisse lunga mezza pagina (22/09/2026) */
.rg-rapide a.rg-tel{background:var(--verde);color:#fff}
.rg-rapide a.rg-mail{background:color-mix(in srgb,var(--ic-blu) 14%,transparent);color:var(--ic-blu)}
.rg-rapide a.rg-chat{background:color-mix(in srgb,var(--ic-verde) 14%,transparent);color:var(--ic-verde)}
.rg-documenti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
.rg-doc{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:12px 14px 12px 16px;border-radius:12px;
  border:1px solid var(--bordo);background:var(--sfondo);color:inherit;text-decoration:none;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.rg-doc:hover{border-color:var(--fc,var(--bordo-forte));transform:translateY(-1px);box-shadow:0 12px 26px -20px rgba(0,0,0,.55)}
.rg-doc .doc-foglio{transform:scale(.62);transform-origin:top left;margin:0 -28px -36px 0}
.rg-doc-testi{min-width:0}
.rg-doc-testi b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-doc-testi small{display:block;margin-top:2px;font-size:11.5px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-articoli{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:14px}
.rg-articolo{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--bordo);background:var(--sfondo);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.rg-articolo:hover{border-color:var(--k);transform:translateY(-1px)}
.rg-articolo img,.rg-articolo-vuoto{display:block;width:100%;height:96px;object-fit:cover;background:var(--pannello2)}
.rg-articolo-vuoto{display:grid;place-items:center;color:var(--k)}
.rg-articolo b{display:block;padding:8px 10px 0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-articolo small{display:block;padding:2px 10px 10px;font-size:11.5px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-inizio,.rg-nessuno{display:grid;justify-items:center;gap:6px;margin:34px auto 10px;max-width:520px;text-align:center;color:var(--tenue)}
.rg-inizio b,.rg-nessuno b{color:var(--testo);font-size:16px;font-weight:600}
.rg-inizio p,.rg-nessuno p{margin:0;font-size:13.5px;line-height:1.55}
.rg-inizio-icona,.rg-nessuno > span{display:grid;place-items:center;width:62px;height:62px;margin-bottom:6px;border-radius:18px;background:var(--accento-velo);color:var(--accento-testo)}
@container rg (max-width:760px){
  .rg-griglia,.rg-documenti{grid-template-columns:minmax(0,1fr)}
  .rg-migliore{grid-template-columns:auto minmax(0,1fr);padding:16px 16px 16px 20px;gap:14px}
  .rg-mono{width:48px;height:48px;font-size:17px}
  .rg-migliore h2{font-size:17px}
  .rg-migliore-azioni{grid-column:1 / -1;justify-content:stretch}
  .rg-migliore-azioni .bottone{flex:1 1 auto;justify-content:center}
}
@container rg (max-width:520px){
  .rg-cerca{min-height:54px;gap:10px;padding:0 6px 0 14px;border-radius:14px}
  .rg-cerca input{height:50px;font-size:18px}
  .rg-cerca .bottone{padding:9px 12px}
  .rg-riga{padding:10px 12px}
  .rg-documenti,.rg-articoli{padding:10px}
  .rg-articoli{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rg-gruppo > header em{display:none}
}
@media (prefers-reduced-motion:reduce){.rg-doc,.rg-articolo,.rg-freccia{transition:none}.rg-doc:hover,.rg-articolo:hover{transform:none}}

/* ===================== Contatti > Agenti: fascia sul fianco e supervisori in evidenza (20/09/2026) =====================
   La pagina Agenti passa allo stile delle altre gia' rifatte (elenco opportunita', elenco aziende, personale):
   - il gruppo e' un .riquadro con la sua .riquadro-testata e il filetto sul fianco sinistro (tipo-capo / tipo-senza),
     come .deal-gruppo.tipo-capo nell'elenco delle opportunita';
   - ogni riga porta la fascia larga 12px sul fianco sinistro, disegnata con le stesse variabili di articoli, aziende,
     opportunita', ticket e avvisi (--fascia / --fascia-sfumata, in cima al foglio): rossa per chi ha il ruolo di
     supervisore, grigia per gli altri;
   - il supervisore si riconosce anche dal cerchietto delle iniziali pieno di rosso, dalla stella accanto al nome e
     dal fondo della riga appena tinto.
   Le regole stanno in fondo al foglio apposta: la sezione "Contatti > Agenti" piu' in alto resta com'e' e queste,
   a parita' di peso, arrivano dopo. */

/* --fascia-sfumata contiene var(--fascia) e il valore si risolve DOVE E' DICHIARATO: sta sulla riga, che e' anche
   quella che porta il colore (s-supervisore / s-agente). Stesso disegno di .art-fascia, .az-fascia, .deal-fascia */
.ag-fascia{
  --fascia-sfumata:linear-gradient(90deg,
    var(--fascia) 0, var(--fascia) 6px,
    color-mix(in srgb,var(--fascia) 48%,transparent) 9px,
    transparent 12px);
}
/* supervisore: il rosso del logo nella versione per testi e icone piccole, gia' schiarita nel tema scuro (la stessa
   scelta degli avvisi importanti, tr.post-fascia.livello-importante). Agente semplice: il grigio del bordo forte,
   cioe' quello che :root da' gia' a --fascia, cosi' nessuna riga sembra speciale per sbaglio */
.s-supervisore{--fascia:var(--accento-testo)}
.s-agente{--fascia:var(--bordo-forte)}

/* schermo largo: la fascia sta sulla prima cella, perche' la <tr> di una tabella non collassata non tiene il fondo
   come ci si aspetta (stesso motivo dell'elenco aziende). I 22px di rientro li paga la colonna dell'agente e la sua
   intestazione rientra con lei, cosi' resta allineata al nome */
table.ag-tabella thead th.c-agente{padding-left:22px}
table.ag-tabella tbody tr.ag-fascia > td.c-agente{
  padding-left:22px;
  background-image:var(--fascia-sfumata);
  background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
}
/* subagente: la linea a gomito che lo lega al supervisore si sposta oltre la fascia (prima partiva da 18px, dentro) */
table.ag-tabella tbody tr.ag-fascia.sub > td.c-agente{padding-left:44px}
table.ag-tabella tbody tr.ag-fascia.sub > td.c-agente::before{left:28px}

/* supervisore in evidenza: fondo appena tinto, cerchietto delle iniziali pieno di rosso con l'alone, nome marcato.
   I selettori nominano table e tbody perche' devono battere "tr.capo td{background:var(--pannello2)}" piu' in alto,
   che con la scorciatoia background spegnerebbe anche l'immagine della fascia */
table.ag-tabella tbody tr.s-supervisore > td{background-color:color-mix(in srgb,var(--accento) 7%,var(--pannello2))}
table.ag-tabella tbody tr.s-supervisore .ag-nome .sigla{
  background:var(--accento);border-color:var(--accento);color:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accento) 16%,transparent);
}
table.ag-tabella tbody tr.s-supervisore .ag-nome > div > b{font-weight:700}
/* la stella sta dentro il nome, subito dopo l'ultima lettera: fuori, accanto al blocco del nome, si allontanerebbe
   ogni volta che l'e-mail sotto e' piu' larga del nome */
.ag-stella{display:inline-block;margin-left:6px;vertical-align:-2px;color:var(--accento-testo)}
.ag-stella svg{display:block}

/* testata del gruppo: icona, nome del supervisore, etichetta e, a destra, quanti sono.
   .riquadro-testata divide in due (space-between): qui le prime tre cose stanno in fila e solo il conteggio va a destra */
.riquadro-testata.ag-testa{flex-wrap:wrap;justify-content:flex-start;gap:8px 12px;padding:13px 16px;color:var(--testo)}
.riquadro-testata.ag-testa small{margin-left:auto;color:var(--tenue);font-size:12px}
.ag-testa-icona{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--bordo);background:var(--pannello2);color:var(--tenue);
}
.ag-testa-icona svg{display:block}
/* il filetto sul fianco del riquadro, come .deal-gruppo.tipo-capo / .tipo-sub; i 22px di rientro della testata
   la allineano alla colonna dell'agente, che rientra della stessa misura per fare posto alla fascia */
.ag-gruppo.tipo-capo{border-color:color-mix(in srgb,var(--accento) 45%,var(--bordo));box-shadow:inset 3px 0 0 var(--accento)}
.ag-gruppo.tipo-capo .ag-testa-icona{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
.ag-gruppo.tipo-senza{box-shadow:inset 3px 0 0 var(--bordo-forte)}
.ag-gruppo > .ag-testa{padding-left:22px}
/* il gruppo dove il filtro non lascia nessuno (nascosto finche' il filtro non lo serve: lo spegne la regola
   [hidden]{display:none !important} in cima al foglio, che batte anche il display:flex di .stato-vuoto) */
.ag-gruppo > .ag-nessuno{padding:18px 20px;border-top:1px solid var(--bordo)}

/* barra in cima: a destra la ricerca con la lente (.barra-cerca, come nell'elenco delle opportunita') e le due
   pillole del filtro; sotto la riga dell'intro quando lo spazio finisce */
/* pillole del filtro in rosso, come i filtri delle Traduzioni (.tr-pillola.scelta), e non nel verde di .pillole:
   in questo portale il verde vuol dire "crea qualcosa di nuovo" */

/* smartphone e tablet: la riga e' gia' una scheda staccata (regola comune della sezione Campionature). Qui la fascia
   passa alla scheda intera, con il bordo appena tinto, e la cella dell'agente torna senza rientro */
@container (max-width:900px){
  table.ag-tabella tbody tr.ag-fascia{
    padding-left:22px;
    border-color:color-mix(in srgb,var(--fascia) 45%,var(--bordo-forte));
    background-image:var(--fascia-sfumata);
    background-repeat:no-repeat;background-size:12px 100%;background-clip:padding-box;
  }
  table.ag-tabella tbody tr.ag-fascia > td.c-agente,
  table.ag-tabella tbody tr.ag-fascia.sub > td.c-agente{padding-left:0;background-image:none}
  table.ag-tabella tbody tr.ag-fascia.sub > td.c-agente::before{display:none}
  /* nella scheda il colore lo porta la scheda, non le celle (che qui sono blocchi senza fondo) */
  table.ag-tabella tbody tr.s-supervisore > td{background-color:transparent}
  table.ag-tabella tbody tr.s-supervisore{
    border-color:var(--accento);
    background-color:color-mix(in srgb,var(--accento) 7%,var(--pannello2));
  }
}

/* ---------- Impostazioni > Struttura del menu: pulsante IA del testo inglese (20/09/2026) ----------
   Stesso pulsante e stesso modo di mostrare l'esito di Impostazioni > Traduzioni (.tr-ia, .tr-msg-ia): qui il
   pulsante sta nella riga dell'etichetta, sopra il campo, e il messaggio sotto il campo. */
.ms-campo-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.ms-campo-testa label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* l'etichetta non e' piu' figlia diretta del campo: la regola generale ".campo:focus-within > label" non la
   raggiungerebbe e resterebbe grigia mentre si scrive */
.campo:focus-within > .ms-campo-testa > label{color:var(--accento-testo)}
.ms-campo-ia .tr-msg-ia{display:block}

/* ------------------------------------------------------------------
   codice dell'opportunita' (OC57) e articoli senza la colonna Importo
   (20/09/2026: il codice si vede in elenco e scheda; dove si aggiungono
   gli articoli l'importo sta nel pannello, non piu' in colonna)
   ------------------------------------------------------------------ */
.deal-codice{margin-top:0}
.deal-identita .deal-codice{margin:0 0 4px}
.camp-codice{margin:0 0 8px}
.art-totale .c-qta b.art-totale-importo{color:var(--accento-testo);font-size:17px}
@container (max-width:900px){
  table.tabella.t-articoli.prezzo-nel-pannello.senza-importo tbody tr.art-riga{grid-template-areas:"foto articolo azioni" "qta qta qta"}
  table.tabella.t-articoli.senza-importo tfoot tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"articolo qta"}
}
@container (max-width:600px){
  table.tabella.t-articoli.prezzo-nel-pannello.senza-importo tbody tr.art-riga{grid-template-areas:"foto articolo articolo" "azioni azioni azioni" "qta qta qta"}
}

/* ======================================================================
   Oggetto documento multimediale (ODM) - tappa 1, 21/09/2026
   Il blocco unico degli oggetti: striscia di foto, video e audio in alto, tutto il resto uno per riga
   sotto (js/odm.js). Oggi sta in quasi tutte le pagine del portale (opportunita', aziende, ticket, note, documenti).

   TUTTE le classi nuove hanno il prefisso odm-, senza eccezioni: in questo foglio .anteprima e .scheda
   esistono gia' e vogliono dire altro. Tutto il resto e' riuso di classi che ci sono gia' (.riquadro
   .camp-galleria .camp-allegato .camp-anteprima .camp-info .camp-elimina .camp-avanzamento .doc-foglio
   .fam-* .icona-riga .bottone .badge .avviso .scheda-pagina .a-destra).

   Scelte grafiche decise dall'utente:
    - la riga si apre sul posto e spinge giu' le altre, un oggetto alla volta, e dentro ci va solo
      l'anteprima (il contenuto intero si apre nella finestra allegati/PDF che gia' esiste);
    - la graffetta e' un pannello a schede con icona, mai una tendina e mai caselle da spuntare;
    - sul telefono la striscia va a capo due per riga: non si scorre mai di lato.
   ====================================================================== */

/* ---------- testata del blocco ---------- */
.odm-testata{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--bordo)}
.odm-titolo{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600}
.odm-titolo svg{color:var(--tenue);flex:none}
.odm-conta{min-width:24px;height:22px;padding:0 8px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello2);color:var(--tenue);font-size:11.5px;font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.odm-corpo{padding:14px 16px 16px}
.odm-corpo.odm-sopra{outline:2px dashed var(--accento);outline-offset:-6px}
.odm-avviso{margin:0 0 12px}
.odm-sezione{margin:0 0 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--debole)}
.odm-sezione + .odm-striscia,.odm-sezione + .odm-righe{margin-top:8px}
.odm-vuoto{margin:6px 0 0;padding:18px 10px;text-align:center;font-size:13px;color:var(--tenue)}
/* la casella dei file vera resta fuori vista: si apre dalle schede della graffetta (mai caselle da spuntare) */
.odm-scelta{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- striscia di foto, video e audio ---------- */
/* su computer: una riga sola che scorre, con le due frecce */
.odm-striscia{display:flex;gap:12px;margin:0 0 18px;padding-bottom:6px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;grid-template-columns:none}
.odm-striscia > li{flex:0 0 168px;scroll-snap-align:start}
.odm-striscia-guida{display:flex;align-items:center;gap:8px;margin:-2px 0 10px;font-size:11.5px;color:var(--debole)}
.odm-striscia-guida .ir{margin-left:auto;display:flex;gap:6px}
.odm-durata{position:absolute;left:8px;top:8px;padding:2px 7px;border-radius:999px;background:rgba(2,8,14,.72);color:#fff;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}
.odm-mattonella .camp-anteprima{position:relative}

/* ---------- oggetti uno per riga ---------- */
.odm-righe{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.odm-riga{
  --fc:#5c6b74;
  display:flex;flex-direction:column;min-width:0;padding:10px 12px;
  border:1px solid var(--bordo);border-left:3px solid color-mix(in srgb,var(--fc) 70%,transparent);
  border-radius:var(--raggio);background:var(--pannello2);
}
.odm-riga:hover{border-color:var(--bordo-forte);border-left-color:var(--fc)}
.odm-riga-testa{display:flex;align-items:flex-start;gap:12px;min-width:0}
.odm-riga-icona{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:color-mix(in srgb,var(--fc) 12%,transparent);color:var(--fc)}
/* il foglio del documento (TipiFile) porta gia' il suo colore: niente fondo colorato dietro.
   Il foglio e' disegnato 74x94 e si rimpicciolisce a meta' con transform, che pero' non cambia lo spazio
   occupato: si rimpicciolisce dall'angolo in alto a sinistra e la casella e' esattamente la meta', cosi'
   il foglio non scavalca il titolo della riga. */
.odm-riga-foglio{display:block;background:none;width:46px;height:58px}
.odm-riga-foglio .doc-foglio{transform:scale(.62);transform-origin:top left}
.odm-riga-testo{flex:1;min-width:0;cursor:pointer}
.odm-riga-testo > b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odm-riga-estratto{margin-top:2px;font-size:12px;line-height:1.45;color:var(--tenue);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.odm-riga-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:5px;font-size:11px;color:var(--debole)}
.odm-punto{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;flex:none}
.odm-riga-azioni{flex:none;display:flex;align-items:center;gap:6px}
/* i colori di famiglia degli oggetti che non sono file: per i documenti il colore lo da' TipiFile (--fc) */
.odm-f-nota{--fc:#2563eb}
.odm-f-dettata{--fc:#da0219}
.odm-f-trascrizione{--fc:#0f8f8a}
.odm-f-scansione{--fc:#6d4fc4}
.odm-f-documento{--fc:#5c6b74}
.odm-riga.in-caricamento{opacity:.75}
.odm-riga.in-caricamento .camp-avanzamento{margin:10px 0 0}

/* ---------- l'oggetto aperto sul posto (uno alla volta, solo l'anteprima) ---------- */
.odm-riga.odm-aperto{border-color:var(--accento);border-left-color:var(--accento);background:var(--pannello)}
.odm-pannello{margin-top:12px;padding:14px 2px 2px;border-top:1px solid var(--bordo)}
.odm-etichetta{display:block;margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
.odm-etichetta-campo{display:block;margin:0 0 12px}
/* solo l'anteprima: il testo si ferma a poche righe, la riga non deve mai diventare enorme */
.odm-testo{
  position:relative;max-height:150px;margin:0 0 12px;padding:12px 14px;overflow:hidden;
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--blocco-chiaro);
  font-size:13.5px;line-height:1.62;white-space:pre-wrap;
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);mask-image:linear-gradient(180deg,#000 76%,transparent);
}
.odm-campo{
  display:block;width:100%;padding:9px 11px;border:1px solid var(--bordo);border-radius:var(--raggio);
  background:var(--sfondo);color:var(--testo);font:inherit;font-size:13.5px;line-height:1.55;
}
.odm-campo:focus{outline:none;border-color:var(--accento)}
.odm-campo-testo{resize:vertical;min-height:84px;max-height:280px}
.odm-foto-piccola{display:block;width:100%;max-height:180px;object-fit:cover;margin:0 0 12px;border:1px solid var(--bordo);border-radius:var(--raggio)}
/* la nota dettata si ascolta dentro la riga, senza aprire niente */
.odm-lettore{margin:0 0 12px;padding:10px 12px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--blocco-chiaro)}
.odm-lettore audio{display:block;width:100%}
.odm-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 0}

/* ---------- nota scritta e trascrizione: si scrivono qui ---------- */
.odm-editore{margin:0 0 16px;padding:14px;border:1px solid var(--accento);border-radius:var(--raggio);background:var(--pannello)}

/* ---------- la graffetta: pannello a schede con icona ---------- */
.odm-blocco{overflow:visible}
.odm-graffetta{position:relative;display:inline-block}
.odm-pannello-tipi{
  position:absolute;z-index:30;top:calc(100% + 8px);right:0;width:min(560px,86vw);padding:14px;
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);box-shadow:var(--ombra);
}
.odm-menu-titolo{margin:0 0 9px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--debole)}
.odm-tipi + .odm-menu-titolo{margin-top:14px}
.odm-tipi{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.odm-tipi .scheda-pagina{flex:none;max-width:none;padding:10px 12px 10px 10px}
.odm-tipi .scheda-pagina-icona{width:34px;height:34px;border-radius:8px;background:color-mix(in srgb,var(--fc,#5c6b74) 12%,transparent);color:var(--fc,#5c6b74)}
.odm-tipi .scheda-pagina:hover{border-color:var(--fc,var(--accento))}
.odm-tipi .scheda-pagina[disabled]{opacity:.55;cursor:default;transform:none}
.odm-tipi .scheda-pagina[disabled]:hover{border-color:var(--bordo);transform:none}
.odm-presto{margin-left:6px;font-size:10px;vertical-align:1px}
.odm-trascina{display:flex;align-items:center;gap:8px;margin:14px 0 0}
.odm-t-foto{--fc:#c2417a}
.odm-t-video{--fc:#6d4fc4}
.odm-t-audio{--fc:#0f8f8a}
.odm-t-documento{--fc:#d93025}
.odm-t-nota{--fc:#2563eb}
.odm-t-dettata{--fc:#da0219}
.odm-t-scansione{--fc:#a66e14}
.odm-t-trascrizione{--fc:#1e9e57}

/* ---------- area NOTE: bacheca a mattonelle (preparata per la tappa 6) ---------- */
.odm-bacheca{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.odm-carta{display:flex;flex-direction:column;gap:8px;min-height:170px;padding:14px;border:1px solid var(--bordo);border-top:3px solid var(--accento);border-radius:var(--raggio);background:var(--pannello)}
.odm-carta > b{font-size:14.5px;font-weight:600;line-height:1.3}
.odm-carta > p{margin:0;font-size:12.5px;line-height:1.5;color:var(--tenue);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.odm-carta-piede{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:11px;color:var(--debole)}
.odm-carta-mini{display:flex;gap:4px}
.odm-carta-mini i{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:color-mix(in srgb,var(--fc,#5c6b74) 14%,transparent);color:var(--fc,#5c6b74)}

/* ---------- telefono e tablet stretto: la striscia va a capo, non si scorre mai di lato ---------- */
@media (max-width:719px){
  .odm-striscia{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:visible;padding-bottom:0;scroll-snap-type:none}
  .odm-striscia > li{flex:none}
  .odm-striscia-guida .ir{display:none}
  .odm-corpo{padding:12px 12px 14px}
  .odm-testata{padding:11px 12px}
  .odm-bottone-aggiungi{flex:1}
  /* la graffetta diventa un foglio che sale dal basso */
  .odm-graffetta{position:static;display:block}
  .odm-pannello-tipi{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:76vh;overflow-y:auto;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom));
    border-radius:14px 14px 0 0;border-left:none;border-right:none;border-bottom:none;
  }
  .odm-tipi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .odm-tipi .scheda-pagina{flex-direction:column;align-items:flex-start;gap:8px}
  .odm-riga{background:var(--pannello)}
  /* i pulsanti della riga vanno in cima, come icone: sul telefono non si cerca il pulsante a destra */
  .odm-riga-testa{flex-wrap:wrap}
  .odm-riga-azioni{order:-1;width:100%;justify-content:flex-end;margin-bottom:2px}
  .odm-riga-azioni .icona-riga{width:38px;height:38px}
}

/* ======================================================================
   Area NOTE - ODM tappa 6, 21/09/2026
   La bacheca personale (Note/Default.aspx) e la nota aperta (Note/Nota.aspx).

   Quasi tutto e' gia' scritto altrove e qui non si rifa': .barra-azioni .barra-cerca .pillole .riquadro
   .stato-vuoto .badge .bottone .icona-riga .azioni-riga .avviso .campo .dialogo-posta* .tondo,
   le mattonelle .odm-bacheca / .odm-carta / .odm-carta-mini / .odm-carta-piede (messe con la tappa 1,
   apposta per questa) e le classi di colore del portale .c-rosso .c-blu .c-verde .c-viola .c-teal
   .c-ambra, che portano --tc gia' pronto per il chiaro e per lo scuro.

   Quello che si aggiunge qui e' solo quello che manca: la mattonella che e' tutta un collegamento, il
   colore della nota, il dialogo che chiede titolo e colore, la bacheca ancora vuota e i ripieghi.
   Tutte le classi nuove cominciano per nt- (note), tranne le poche righe che vestono .odm-carta.
   ====================================================================== */

/* ---------- barra della bacheca ---------- */
.nt-barra .conta{color:var(--debole);font-size:12.5px;margin-left:8px}
.nt-strumenti{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nt-strumenti .barra-cerca{min-width:200px;max-width:320px}

/* ---------- la mattonella: tutta un collegamento ---------- */
/* il colore della nota arriva da .c-rosso / .c-blu / ... che scrivono --tc */
.odm-carta{border-top-color:var(--tc,var(--accento))}
/* la mattonella e' un <a> dentro un <li>: senza questo il collegamento non si allunga fino in fondo alla
   casella della griglia e, nella stessa riga, le mattonelle finiscono ad altezze diverse */
.nt-bacheca > li{display:flex;min-width:0}
.nt-bacheca > li > .odm-carta{flex:1;min-width:0}
a.odm-carta{
  color:inherit;text-decoration:none;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
a.odm-carta:hover{border-color:var(--bordo-forte);transform:translateY(-2px);box-shadow:var(--ombra)}
a.odm-carta:hover > b{color:var(--tc,var(--accento-testo))}
a.odm-carta:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.odm-carta > b{transition:color .15s}
/* la nota che non ha ancora niente dentro: si vede che e' vuota, senza gridarlo */
.odm-carta .nt-senza{font-style:italic;color:var(--debole)}
/* fra le iconcine e il piede ci vuole aria, se no il piede sembra attaccato ai tipi */
.odm-carta-mini{margin-top:2px}

/* ---------- la bacheca ancora vuota ---------- */
.nt-vuoto{padding:40px 20px 34px;gap:12px}
.nt-vuoto-segno{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--accento-velo);color:var(--accento-testo);
}
.nt-vuoto b{font-size:15.5px;font-weight:600;color:var(--testo)}
.nt-vuoto p{margin:0;max-width:42ch;font-size:13px;line-height:1.55}

/* ---------- la nota aperta ---------- */
/* una riga grigia sola: quando e' nata e, se e' stata toccata dopo, quando */
.nt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-6px 0 14px;font-size:11.5px;color:var(--debole)}
/* la fascia sul fianco sinistro del blocco prende il colore della nota: e' l'unico posto dove si rivede,
   ed e' quello che la fa riconoscere fra le mattonelle della bacheca */
.nt-nota > .riquadro{border-left:3px solid var(--tc,var(--accento))}
/* il cestino e' un'icona alta 32 accanto a un pulsante alto 38: senza questo resta incollato in alto */
.nt-azioni-testa{align-items:center}

/* ---------- il dialogo: titolo e colore, niente altro ---------- */
.nt-dialogo{width:min(520px,94vw)}
.nt-dialogo .dialogo-posta-corpo{gap:14px}
.nt-icona-pericolo{background:var(--pericolo);color:#fff}
.nt-conferma{margin:0;font-size:13.5px;line-height:1.6}
/* il colore come pillole: ogni pillola porta la sua tinta, quella scelta si riempie. La casella vera
   resta il pulsante di scelta nascosto sotto (.pillole), mai una casella da spuntare */
.nt-colori li label::before{background-color:var(--tc,var(--accento));border-color:var(--tc,var(--accento))}
.nt-colori li label:hover{border-color:var(--tc,var(--accento))}
.nt-colori li input:checked + label{background:var(--tc,var(--accento));border-color:var(--tc,var(--accento));color:#fff}
.nt-colori li input:checked + label::before{background-color:#fff;border-color:#fff;background-image:none}

/* ---------- ripiego dove <dialog> non c'e' ---------- */
.nt-dialogo.nt-ripiego{
  position:fixed;z-index:120;left:50%;top:50%;transform:translate(-50%,-50%);
  max-height:86vh;overflow:auto;box-shadow:var(--ombra);
}

/* ---------- telefono: niente scorrimento di lato, i pulsanti larghi ---------- */
@media (max-width:719px){
  /* la bacheca va a una colonna sola: le mattonelle restano leggibili e non si scorre mai di lato */
  .nt-bacheca{grid-template-columns:1fr;gap:12px}
  .nt-strumenti{width:100%}
  .nt-strumenti .barra-cerca{flex:1 1 100%;max-width:none}
  /* l'azione evidente occupa tutta la riga: sul telefono e' la prima cosa che si tocca */
  .nt-strumenti > .bottone{flex:1 1 100%;justify-content:center}
  .nt-vuoto{padding:32px 16px 28px}
  .nt-vuoto .bottone{width:100%;justify-content:center}
  /* i due pulsanti della nota aperta: quello rosso prende lo spazio, il cestino resta quadrato */
  .nt-azioni-testa{flex:1 1 auto}
  .nt-azioni-testa .bottone{flex:1}
  .nt-azioni-testa .icona-riga{width:38px;height:38px;flex:none}
  /* il dialogo diventa un foglio che sale dal basso, come la graffetta del blocco */
  .nt-dialogo{
    width:100%;max-width:none;margin:auto 0 0;
    border-radius:14px 14px 0 0;border-left:none;border-right:none;border-bottom:none;
  }
  .nt-dialogo .dialogo-posta-piede{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .nt-dialogo .dialogo-posta-piede .bottone{flex:1;justify-content:center}
  .nt-dialogo.nt-ripiego{top:auto;bottom:0;left:0;transform:none;max-height:86vh}
}

/* ======================================================================
   FP CONNECT - ODM tappa 5: la nota dettata (21/09/2026)

   DA APPENDERE IN FONDO a css/fpc.css, dopo la sezione ODM della tappa 1.
   E' un frammento a parte apposta: mentre si scriveva questa tappa un altro lavoro stava gia' toccando
   css/fpc.css, e due mani sullo stesso foglio si pestano i piedi.

   Cosa disegna:
     - il pannello che si apre premendo "Nota dettata" nella graffetta: la lingua, il pulsante rosso di
       registrazione, il tempo, l'onda sonora, la trascrizione che si scrive da sola;
     - i due stati che si vedono sulla riga mentre l'oggetto lavora: "sto trascrivendo" (la riga respira) e
       "trascrizione non riuscita" (il fianco rosso).

   TUTTE le classi nuove hanno il prefisso odm-, come le altre: nel foglio i nomi generici sono gia' presi.
   Il pulsante di registrazione, il tempo e le barrette dell'onda NON si ridisegnano: sono .camp-rec,
   .camp-tempo e .camp-onde, che esistono gia' e sono quelli che l'utente ha sempre visto nella pagina
   dell'opportunita'. Qui si sistema solo come stanno dentro il blocco.
   ====================================================================== */

/* ---------- il pannello della nota dettata ---------- */
.odm-dettatura{border-color:var(--accento)}
.odm-dettatura-spiega{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--tenue)}
/* mentre registra la riga in cima lo dice, in rosso, con il pallino che pulsa: e' il primo dei quattro
   stati della nota dettata (sto registrando, sto trascrivendo, pronta, non riuscita) */
.odm-dettatura-spiega.odm-registrando{
  display:flex;align-items:center;gap:9px;color:var(--accento-testo);font-weight:600;
}
.odm-dettatura-spiega.odm-registrando::before{
  content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--accento);
  animation:odm-pulsa-punto 1.4s ease-in-out infinite;
}
@keyframes odm-pulsa-punto{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}

/* la tendina della lingua: stessa cassetta degli altri campi del blocco, larghezza sua (non tutta la riga) */
select.odm-campo{max-width:320px;cursor:pointer}
select.odm-campo:disabled{opacity:.6;cursor:default}

/* il registratore dentro il blocco: piu' compatto del riquadro che stava in fondo alla pagina */
.odm-registratore{margin:0 0 14px}
.odm-registratore .camp-rec-cerchio{width:52px;height:52px}
.odm-registratore .camp-rec-punto{width:22px;height:22px}
.odm-registratore .camp-rec.attivo .camp-rec-punto{width:17px;height:17px}
.odm-registratore .camp-tempo{font-size:21px}
.odm-registratore .camp-onde{height:30px}

/* ---------- gli stati sulla riga ---------- */
/* sto trascrivendo: la riga respira piano, senza saltare ne' spostare niente */
.odm-riga.odm-lavora{animation:odm-respira 2.2s ease-in-out infinite}
@keyframes odm-respira{0%,100%{border-left-color:color-mix(in srgb,var(--fc) 70%,transparent)}
                       50%{border-left-color:var(--fc)}}
/* trascrizione non riuscita: il fianco rosso. L'oggetto pero' e' sano - c'e' l'audio, c'e' il titolo -
   quindi niente allarmi: si vede e basta */
.odm-riga.odm-guasto{--fc:#b3261e;border-left-color:#b3261e}
/* la riga di attesa dentro l'oggetto aperto, al posto del riassunto che non e' ancora arrivato */
.odm-in-corso{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:10px 12px;
  border:1px dashed var(--bordo-forte);border-radius:var(--raggio);background:var(--blocco-chiaro);
  font-size:12.5px;color:var(--tenue);
}
.odm-in-corso::before{
  content:"";flex:none;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--bordo-forte);border-top-color:var(--accento);
  animation:odm-gira .9s linear infinite;
}
@keyframes odm-gira{to{transform:rotate(360deg)}}

/* ---------- telefono: niente scorrimento di lato, bersagli grandi ---------- */
@media (max-width:719px){
  select.odm-campo{max-width:none}
  /* il pulsante di registrazione occupa tutta la riga: sul telefono si preme con il pollice, al volo,
     mentre si e' davanti al cliente */
  .odm-registratore{flex-direction:column;align-items:stretch;gap:12px}
  .odm-registratore .camp-rec{justify-content:center;padding:6px 0}
  .odm-registratore .camp-rec-info{justify-content:center;text-align:center}
  .odm-registratore .camp-onde{width:100%;justify-content:center}
}

/* chi ha chiesto meno animazioni non deve vedere niente muoversi */
@media (prefers-reduced-motion:reduce){
  .odm-riga.odm-lavora,.odm-dettatura-spiega.odm-registrando::before,.odm-in-corso::before{animation:none}
}


/* ===================== ricerca generale: gruppo "Note" (ODM tappa 6, 21/09/2026) =====================
   Le note della bacheca personale sono un gruppo di risultati per conto loro (RicercaPortale.TIPO_NOTA):
   una nota e' un posto, non un documento, e va trovata per il suo titolo anche quando e' vuota.
   Servono due sole cose: il colore del gruppo (pillola, intestazione della scheda, riga scelta nella
   finestra veloce) e il modo di far vincere, sulla singola nota, la tinta che l'utente le ha dato. */
.k-nota{--k:#4f46e5}
html[data-tema="scuro"] .k-nota{--k:#a5b4fc}
/* campioni e tirelle (05/10/2026): lo stesso viola del pacco nella cronologia della scheda cliente */
.k-campione{--k:#7c4dff}
html[data-tema="scuro"] .k-campione{--k:#b39dff}
/* cartelle dei documenti (07/10/2026): l'oro delle cartelle nella scheda del cliente (.cc-cartella) */
.k-cartella{--k:#c99a06}
html[data-tema="scuro"] .k-cartella{--k:#f2c94c}

/* La tinta della singola nota al posto del colore del gruppo. Le classi di colore del portale
   (.c-rosso, .c-blu, .c-verde, .c-viola, .c-teal, .c-ambra) scrivono --tc, che e' gia' giusta anche sul
   tema scuro; qui la si porta dentro --k, che e' quello che .rg-ic, .rg-a-mono e .rg-f-anteprima usano
   per sfondo, bordo e tratto.
   Le due righe servono tutt'e due: nella finestra veloce l'anteprima porta insieme k-nota e rg-tinta
   sullo STESSO elemento, e sul tema scuro "html[data-tema=scuro] .k-nota" pesa piu' di ".rg-tinta" da
   sola. Scritte cosi' - stesso peso e dopo - vince sempre il colore della nota. */
.rg-tinta{--k:var(--tc,var(--accento))}
html[data-tema="scuro"] .rg-tinta{--k:var(--tc,var(--accento))}

/* ======================================================================
   LA TRASCRIZIONE LEGATA ALLA SUA REGISTRAZIONE - ODM, 21/09/2026
   Da APPENDERE in fondo a css/fpc.css (un frammento, non il foglio intero).

   Fino a oggi "Trascrizione" e "Nota scritta" erano la stessa cosa con due nomi. Adesso una trascrizione e'
   il TESTO DI QUALCOSA: si sceglie l'audio o il video che nel blocco c'e' gia', e resta agganciata a quello.
   Qui c'e' solo quello che serve a farlo vedere:
     - le SCHEDE con cui si sceglie la registrazione (casella vera nascosta sotto, mai da spuntare);
     - la riga "Trascrizione di ..." che sta nella riga della trascrizione e porta alla registrazione;
     - il segno sulla mattonella della registrazione, che porta al suo testo (il verso opposto);
     - il lampo che fa notare dove si e' arrivati, quando si passa da una parte all'altra.

   Tutte le classi nuove cominciano per odm-tr-, tranne .odm-indicato, che e' il lampo e potra' servire a
   qualunque altro legame del blocco. Tutto il resto e' riuso: .odm-editore .odm-campo .odm-azioni .bottone
   .scheda-pagina .odm-riga .camp-anteprima, e la variabile di famiglia --fc che il blocco scrive gia'.

   Sul telefono le schede vanno una sotto l'altra: non si scorre mai di lato.
   ====================================================================== */

/* ---------- la domanda in cima all'editore: di quale registrazione e'? ---------- */
.odm-tr-domanda{margin:0 0 4px;font-size:13.5px;font-weight:600;color:var(--testo)}
.odm-tr-aiuto{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--tenue)}

/* ---------- le registrazioni fra cui scegliere: schede, mai caselle da spuntare ---------- */
.odm-tr-scelte{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.odm-tr-scelte > li{display:flex;min-width:0}
/* la casella vera resta sotto, invisibile ma vera: e' lei che tiene la scelta e che si raggiunge da tastiera */
.odm-tr-scelte input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
/* il fondo e' quello piu' scuro (--pannello2) e il bordo quello marcato: l'editore intorno e' gia'
   --pannello, e una scheda dello stesso colore su quel fondo non si vedrebbe come una scheda */
.odm-tr-scheda{
  --fc:#0f8f8a;
  flex:1;display:flex;align-items:center;gap:11px;min-width:0;padding:10px 12px 10px 10px;
  border:2px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello2);
  cursor:pointer;user-select:none;transition:border-color .15s,background-color .15s,transform .15s;
}
.odm-tr-scheda:hover{border-color:var(--fc);transform:translateY(-1px)}
.odm-tr-scheda-icona{
  flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:color-mix(in srgb,var(--fc) 13%,transparent);color:var(--fc);
  transition:background-color .15s,color .15s;
}
.odm-tr-scheda-testo{min-width:0}
.odm-tr-scheda-testo b{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--testo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odm-tr-scheda-testo small{display:block;margin-top:2px;font-size:11px;line-height:1.4;color:var(--debole)}
/* quella scelta si riempie: si vede da lontano che cosa si sta trascrivendo */
.odm-tr-scelte input:checked + .odm-tr-scheda{border-color:var(--fc);background:color-mix(in srgb,var(--fc) 10%,var(--pannello))}
.odm-tr-scelte input:checked + .odm-tr-scheda .odm-tr-scheda-icona{background:var(--fc);color:#fff}
.odm-tr-scelte input:focus-visible + .odm-tr-scheda{outline:2px solid var(--accento2);outline-offset:2px}

/* ---------- "Trascrizione di ...": la riga che la distingue da una nota ---------- */
/* Sta nella riga, subito sotto il titolo, e si vede sempre: aperta o chiusa che sia. Se la registrazione
   c'e' ancora e' un pulsante e ci porta; se e' nel cestino resta solo scritta.
   Sta su UNA riga sola, anche stretta: quando lo spazio manca e' il nome della registrazione ad accorciarsi
   con i puntini, non la frase a spezzarsi in mezzo alle parole. */
.odm-tr-riferimento{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:3px 0 0;padding:3px 9px 3px 5px;
  border:1px solid color-mix(in srgb,var(--fc,#0f8f8a) 30%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--fc,#0f8f8a) 9%,transparent);
  color:var(--tenue);font:inherit;font-size:11.5px;line-height:1.5;text-align:left;
  white-space:nowrap;overflow:hidden;cursor:pointer;transition:border-color .15s,background-color .15s;
}
button.odm-tr-riferimento:hover{border-color:var(--fc,#0f8f8a);background:color-mix(in srgb,var(--fc,#0f8f8a) 16%,transparent)}
button.odm-tr-riferimento:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
/* il nowrap sta QUI e non sulla pillola: sullo stretto la pillola va a capo per far scendere l'avvertenza
   del cestino, ma "Trascrizione di ..." deve restare comunque su una riga sola */
.odm-tr-frase{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap}
/* il nome e' l'unico pezzo che puo' accorciarsi: tutto il resto della pillola resta leggibile */
.odm-tr-frase > b{flex:0 1 auto;min-width:3.5em;font-weight:600;color:var(--fc,#0f8f8a);overflow:hidden;text-overflow:ellipsis}
.odm-tr-riferimento > small{flex:none;font-size:10.5px;color:var(--debole)}
.odm-tr-segnetto{flex:none;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:color-mix(in srgb,var(--fc,#0f8f8a) 18%,transparent);color:var(--fc,#0f8f8a)}
/* la registrazione e' nel cestino: il legame c'e' ancora e il testo pure, ma non si va da nessuna parte.
   Il grigio arriva da --tenue, che il portale cambia da solo fra chiaro e scuro */
.odm-tr-perduta{--fc:var(--tenue);cursor:default}
.odm-tr-perduta b{text-decoration:line-through}

/* ---------- la voce "Trascrizione" spenta: il perche' si deve LEGGERE ---------- */
/* La scheda spenta del portale sbiadisce tutto al 55%, e sul telefono la riga di spiegazione sparisce
   proprio (.scheda-pagina-testo small). Va bene per una voce che dira' "Presto", non per questa: qui la
   spiegazione E' il motivo per cui il pulsante non si preme, e se non si legge la voce sembra rotta.
   Quindi: a sbiadire restano il nome e l'icona, la spiegazione resta leggibile, e si vede anche stretto. */
.odm-tipi .scheda-pagina.odm-t-trascrizione[disabled]{opacity:1;cursor:default}
.odm-tipi .scheda-pagina.odm-t-trascrizione[disabled] .scheda-pagina-icona,
.odm-tipi .scheda-pagina.odm-t-trascrizione[disabled] .scheda-pagina-testo b{opacity:.45}
.odm-tipi .scheda-pagina.odm-t-trascrizione[disabled] .scheda-pagina-testo small{display:block;color:var(--tenue)}

/* ---------- il verso opposto: dalla registrazione al suo testo ---------- */
/* sta in ALTO a destra della mattonella: sotto ci sono i comandi di audio e video, e un pulsante li' sopra
   sarebbe un pulsante che non si riesce a premere */
.odm-tr-segno{
  position:absolute;right:8px;top:8px;z-index:2;display:grid;place-items:center;width:32px;height:32px;
  padding:0;border:none;border-radius:50%;background:rgba(2,8,14,.62);color:#fff;
  cursor:pointer;transition:background-color .15s,transform .15s;
}
.odm-tr-segno:hover{background:var(--accento);transform:scale(1.06)}
.odm-tr-segno:focus-visible{outline:2px solid #fff;outline-offset:1px}
/* la durata sta a sinistra in alto e il segno a destra: non si toccano mai */
.odm-mattonella .odm-durata{max-width:calc(100% - 52px)}

/* ---------- il lampo: "sei arrivato qui" ---------- */
/* passando da una parte all'altra del legame l'occhio deve ritrovare subito il punto d'arrivo. Dura meno di
   due secondi e poi sparisce: non resta niente di acceso a confondere le idee */
.odm-indicato{animation:odm-lampo 1.8s ease-out 1}
@keyframes odm-lampo{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accento) 55%,transparent)}
  22%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accento) 40%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accento) 0%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .odm-indicato{animation:none;outline:2px solid var(--accento);outline-offset:2px}
}

/* ---------- telefono: una scheda per riga, niente scorrimento di lato ---------- */
@media (max-width:719px){
  .odm-tr-scelte{grid-template-columns:1fr;gap:8px}
  .odm-tr-scheda{padding:10px}
  /* il bersaglio da dito: 38px come le altre icone del portale sui dispositivi che si toccano */
  .odm-tr-segno{width:38px;height:38px;right:6px;top:6px}
  .odm-mattonella .odm-durata{max-width:calc(100% - 56px)}
  /* sullo stretto l'avvertenza del cestino va a capo, tutta intera: con due righe la forma a pillola non
     sta piu' in piedi, e si passa all'angolo normale del portale */
  .odm-tr-riferimento{flex-wrap:wrap;white-space:normal;border-radius:var(--raggio);padding:5px 9px}
}

/* ---------------------------------------------------------------------
   Setup > Intelligenza artificiale: il riquadro della trascrizione delle note dettate (21/09/2026).
   Una riga sola: la stessa riga di separazione che ha gia' il riquadro dei biglietti da visita, cosi' i
   riquadri dentro la sezione si leggono come blocchi distinti invece che come un muro unico.
   Tutto il resto (interruttore, tendine, prova, esito) usa le classi che ci sono gia'.
   Se si vuole, aggiungendo .ia-ocr a questa stessa regola anche il riquadro dell'OCR - che oggi la riga
   non ce l'ha - diventa uguale agli altri due.
   --------------------------------------------------------------------- */
.ia-trascrizione{margin-top:26px;padding-top:20px;border-top:1px solid var(--bordo)}


/* ======================================================================
   IL CESTINO - 21/09/2026
   Da APPENDERE in fondo a css/fpc.css (un frammento, non il foglio intero: mentre si scriveva questa parte
   altri lavori stavano toccando lo stesso foglio, e due mani sullo stesso file si pestano i piedi).

   QUESTO FILE E' SALVATO SENZA BOM, apposta ed e' l'unica eccezione alla regola: un BOM finirebbe in mezzo
   al foglio di stile, dove non e' l'inizio di niente, e il browser lo leggerebbe come un carattere
   sbagliato. Il foglio intero (css/fpc.css) il BOM ce l'ha, come sempre.

   Cosa disegna:
     - il pulsante del CESTINO nel piede della barra del menu, accanto a quello dei ticket. Non si ridisegna
       niente: e' la stessa .voce .voce-supporto, e qui c'e' solo lo spazio fra i due;
     - la pagina Cestino/Default.aspx: le righe di quello che si e' buttato, con la fascia colorata sul
       fianco sinistro, e dentro una nota buttata l'elenco di quello che conteneva;
     - la riga "spostato nel cestino" che il blocco degli oggetti scrive subito dopo un'eliminazione.

   Tutte le classi nuove cominciano per cs-, tranne .voce-cestino (che sta nel piede della barra, con le
   altre voci) e .odm-buttato (che sta dentro il blocco degli oggetti, con le altre odm-).
   Tutto il resto e' riuso: .riquadro .riquadro-testata .barra-azioni .barra-cerca .stato-vuoto .badge
   .bottone .avviso .odm-punto, le famiglie di colore .odm-t-* (che scrivono --fc) e i colori delle note
   .c-* (che scrivono --tc). Nessuna tinta nuova, tema scuro gia' compreso.

   Sul telefono le righe diventano schede: l'icona e il titolo in cima, il pulsante largo in fondo. Non si
   scorre mai di lato.
   ====================================================================== */

/* ---------- il pulsante nel piede della barra ---------- */
/* i due pulsanti del piede (cestino e supporto) sono .voce, che ha gia' il suo margine: qui basta un
   filo d'aria in piu' fra loro, perche' con due bottoni attaccati non si capisce che sono due cose */
.barra-piede .voce-cestino{margin-bottom:6px}

/* ---------- la barra in cima alla pagina ---------- */
.cs-barra p{max-width:64ch}
.cs-strumenti{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cs-strumenti .barra-cerca{min-width:200px;max-width:320px}
.cs-riquadro .riquadro-testata b{font-size:13px;font-weight:600;color:var(--testo)}
.cs-riquadro .conta{color:var(--debole);font-size:12.5px;font-weight:400;margin-left:8px}
.cs-riquadro .riquadro-testata small{white-space:nowrap}

/* ---------- l'elenco di quello che si e' buttato ---------- */
.cs-elenco{list-style:none;margin:0;padding:0}
/* la fascia sul fianco sinistro prende il colore della famiglia dell'oggetto (--fc, dalle classi
   .odm-t-*): a colpo d'occhio si vede che cosa si e' buttato prima ancora di leggere */
.cs-riga{
  border-left:3px solid var(--fc,var(--accento));
  border-bottom:1px solid var(--bordo);
  padding:13px 16px 13px 13px;
}
.cs-elenco > li:last-child{border-bottom:none}
/* una nota della bacheca porta il colore che l'utente ha scelto per lei (--tc, dalle classi .c-*):
   e' quello che la fa riconoscere fra le mattonelle della bacheca */
.cs-riga.cs-nota{--fc:var(--tc,var(--accento))}

.cs-corpo{display:flex;align-items:flex-start;gap:12px;min-width:0}
.cs-segno{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:color-mix(in srgb,var(--fc,var(--accento)) 13%,transparent);color:var(--fc,var(--accento));
}
.cs-testo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cs-testo > b{font-size:14px;font-weight:600;color:var(--testo);overflow-wrap:anywhere}
.cs-estratto{
  margin:0;font-size:12.5px;line-height:1.5;color:var(--tenue);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* la riga grigia: che cos'e', da dove veniva, chi l'ha buttato, da quanto e' li' */
.cs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin-top:2px;font-size:11.5px;color:var(--debole)}
.cs-meta .badge{font-size:10.5px;padding:1px 8px;border-color:var(--fc,var(--bordo));color:var(--fc,var(--tenue))}
a.cs-dove{color:var(--tenue);text-decoration:none;border-bottom:1px dotted var(--bordo-forte)}
a.cs-dove:hover{color:var(--accento-testo);border-bottom-color:var(--accento)}

/* ---------- il pulsante che riprende ---------- */
.cs-azione{flex:none;display:flex;align-items:center;padding-top:2px}
.cs-riprendi{padding:6px 13px;font-size:12.5px;white-space:nowrap}

/* ---------- quello che c'era dentro una nota buttata ---------- */
/* non ha pulsanti suoi apposta: la nota e' l'unita', e questo e' l'elenco di quello che torna con lei */
.cs-dentro{margin:10px 0 0 46px;padding:9px 12px;border:1px dashed var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello2)}
.cs-dentro-titolo{margin:0 0 7px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--debole)}
.cs-dentro ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cs-dentro li{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--testo)}
.cs-segno-mini{flex:none;display:grid;place-items:center;width:20px;height:20px;color:var(--fc,var(--accento))}
.cs-segno-mini svg{width:15px;height:15px}
.cs-dentro-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-dentro .badge{flex:none;font-size:10.5px;padding:1px 8px}

/* ---------- il cestino ancora vuoto ---------- */
.cs-vuoto{padding:40px 20px 34px;gap:12px}
.cs-vuoto-segno{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--accento-velo);color:var(--accento-testo);
}
.cs-vuoto b{font-size:15.5px;font-weight:600;color:var(--testo)}
.cs-vuoto p{margin:0;max-width:46ch;font-size:13px;line-height:1.55}

/* ---------- "spostato nel cestino", dentro il blocco degli oggetti ---------- */
/* .avviso da solo non ha ne' fondo ne' bordo: qui si aggiungono i suoi, tenui, perche' non e' un errore
   e non e' un successo - e' un'indicazione, e non deve gridare */
.odm-buttato{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  border:1px solid var(--bordo);background:var(--pannello2);color:var(--tenue);
}
.odm-buttato a{color:var(--accento-testo);font-weight:600;text-decoration:none}
.odm-buttato a:hover{text-decoration:underline}

/* ---------- telefono: le righe diventano schede, niente scorrimento di lato ---------- */
@media (max-width:719px){
  .cs-strumenti{width:100%}
  .cs-strumenti .barra-cerca{flex:1 1 100%;max-width:none}
  /* la nota in testata andrebbe a capo male accanto al titolo: sullo stretto si toglie */
  .cs-riquadro .riquadro-testata{flex-wrap:wrap}
  .cs-riquadro .riquadro-testata small{display:none}

  .cs-riga{padding:14px 14px 14px 12px}
  /* la riga diventa una scheda: icona e testo in cima, il pulsante largo sotto */
  .cs-corpo{flex-wrap:wrap}
  .cs-azione{width:100%;padding-top:10px}
  .cs-riprendi{flex:1;justify-content:center;padding:10px 14px;font-size:13.5px}
  /* l'estratto puo' respirare un po' di piu': qui lo spazio in larghezza non c'e' */
  .cs-estratto{-webkit-line-clamp:3}
  .cs-dentro{margin-left:0}
}

/* ---------------- ODM tappa 7: i materiali del cliente (21/09/2026) ----------------
   Da aggiungere IN FONDO a css/fpc.css, dopo le sezioni odm-* delle tappe precedenti. Sono solo tre ritocchi:
   il blocco "Materiali e appunti" (classi odm-*, gia' nel foglio) si porta dietro tutto il resto.
   - sulla scheda del cliente il blocco sta nella colonna dei riquadri .az-* e prende la loro distanza (18px, non
     i 20px di .riquadro), e il collegamento #azMateriali della pagina di modifica non finisce sotto la testata;
   - nella pagina di modifica la sezione "Materiali e appunti" e' ormai un rimando: una frase sola, che deve
     leggersi bene (am-aiuto da solo e' pensato per le note piccole sotto i campi). */
.az-scheda > [data-odm]{scroll-margin-top:calc(var(--testata) + 16px)}
.az-scheda > [data-odm] > .odm-blocco{margin-bottom:18px}
.am-pagina .am-materiali-rimando{margin:0;font-size:13px;line-height:1.5;color:var(--tenue)}

/* ======================================================================
   ODM tappa 3, 21/09/2026 - i materiali dell'ARTICOLO dell'opportunita'
   Da aggiungere IN FONDO a css/fpc.css (dopo le sezioni ODM gia' pubblicate).

   Il blocco e' lo stesso dell'opportunita' (js/odm.js), montato dentro il pannello che si apre su una
   riga articolo di Campionature/Nuovo.aspx: qui lo si fa stare in poco spazio, e basta. In
   Campionature/Scheda.aspx lo stesso posto e' disegnato dal server, in sola lettura, con le stesse classi
   (.odm-striscia .odm-mattonella .odm-righe .odm-riga): qui sotto ci sono le poche righe che gli servono.

   Tutte le regole partono da .art-odm (il contenitore nel pannello) o da classi odm-: il blocco
   dell'opportunita', fuori dal pannello, non cambia, tranne UNA riga segnata "correzione" (il foglio del
   documento che nella riga finiva spostato a sinistra: era un difetto anche li').

   PERCHE' LA GRAFFETTA SI APRE "IN RIGA" E NON COME TENDINA. Il pannello dell'articolo sta dentro tre
   cose che tagliano tutto quello che sporge: .scorri (overflow-x:auto e container-type:inline-size, che
   fa da contenitore anche per position:fixed), .art-dettaglio e .art-pannello > div (overflow:hidden, per
   l'animazione che apre e chiude). La tendina del blocco (position:absolute sul computer, foglio che sale
   dal basso con position:fixed sul telefono) li' dentro verrebbe tagliata a meta'. Nel pannello quindi il
   pannello dei tipi si apre SOTTO il pulsante e spinge giu' il resto, su tutte le larghezze: e' anche il
   comportamento giusto in uno spazio stretto.
   ====================================================================== */

/* ---------- il blocco dentro il pannello: niente seconda cornice ---------- */
.art-odm{min-width:0}
.art-odm > .odm-blocco{margin:0;border:none;border-radius:0;background:none;box-shadow:none}
.art-odm .odm-testata{padding:0 0 10px;border-bottom:none;gap:8px 10px}
/* il titolo come gli altri titoli del pannello ("Note sull'articolo"): piccolo e tenue */
.art-odm .odm-titolo{gap:7px;font-size:12px;font-weight:600;color:var(--tenue)}
.art-odm .odm-titolo svg{width:15px;height:15px}
.art-odm .odm-conta{height:20px;line-height:18px;font-size:11px}
.art-odm .odm-bottone-aggiungi{padding:5px 11px;font-size:12px}
.art-odm .odm-bottone-aggiungi svg{width:14px;height:14px}
.art-odm .odm-corpo{padding:0}
/* pochi oggetti, spazio stretto: mattonelle un po' piu' piccole, righe piu' fitte */
.art-odm .odm-striscia{gap:10px;margin-bottom:12px}
.art-odm .odm-striscia > li{flex-basis:140px}
.art-odm .odm-sezione{font-size:10px}
.art-odm .odm-righe{gap:8px}
.art-odm .odm-riga{padding:8px 10px}
.art-odm .odm-riga-testa{gap:10px}
.art-odm .odm-riga-icona{width:32px;height:32px}
.art-odm .odm-riga-foglio{width:32px;height:41px}
.art-odm .odm-riga-foglio .doc-foglio{transform:scale(.43)}
.art-odm .odm-riga-testo > b{font-size:13px}
/* vuoto: una riga tratteggiata, non un riquadro alto che spinge giu' tutto */
.art-odm .odm-vuoto{margin:0;padding:11px 12px;border:1px dashed var(--bordo);border-radius:var(--raggio);font-size:12.5px}

/* ---------- il foglio del documento nella riga: correzione che vale per TUTTI i blocchi ----------
   .odm-riga-icona ha place-items:center e Chrome recente centra anche i figli dei blocchi normali: il foglio,
   largo 74px e rimpicciolito con transform (che non cambia lo spazio occupato), veniva centrato nella casella
   da 37px e poi rimpicciolito dall'angolo, e finiva 18-21px a sinistra, sopra il bordo della riga. Si vede
   anche nel blocco dell'opportunita' (misurato il 21/09/2026: casella a x=231, foglio a x=210). Con start il
   foglio parte dall'angolo della casella, che e' quello da cui lo rimpicciolisce transform-origin.
   Il secondo selettore e' per la sola lettura (Scheda.aspx), dove il foglio sta dentro a.doc-apri. */
.odm-riga-foglio,.odm-riga-foglio > a.doc-apri{place-items:start}

/* ---------- la graffetta: il pannello dei tipi si apre in riga (vedi sopra il perche') ---------- */
.art-odm .odm-graffetta{position:static}
.art-odm .odm-graffetta.aperto{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.art-odm .odm-pannello-tipi{
  position:static;width:100%;max-height:none;overflow:visible;padding:12px;
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);box-shadow:none;
}
.art-odm .odm-tipi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.art-odm .odm-tipi .scheda-pagina{padding:8px 10px 8px 8px}
.art-odm .odm-tipi .scheda-pagina-icona{width:30px;height:30px}

/* ---------- sola lettura (Campionature/Scheda.aspx) ---------- */
/* il server disegna le righe senza script: niente mano sul titolo, che qui non apre niente */
.art-odm-lettura .odm-riga-testo{cursor:auto}
.art-odm-lettura > .art-allegati-titolo{margin-bottom:9px}
.art-odm-lettura .odm-striscia{margin-top:6px}
.art-odm-lettura .odm-righe{margin-top:6px}
/* "Apri": il testo intero, il riassunto, l'audio della nota dettata. Chiuso finche' non lo si chiede,
   cosi' la riga resta piccola come nel blocco vivo */
.odm-art-leggi{margin-top:8px}
.odm-art-leggi > summary{
  display:inline-flex;align-items:center;gap:7px;padding:3px 0;cursor:pointer;list-style:none;
  font-size:12px;font-weight:600;color:var(--ic-blu);
}
.odm-art-leggi > summary::-webkit-details-marker{display:none}
.odm-art-leggi > summary::marker{content:""}
.odm-art-leggi > summary::before{
  content:"";width:6px;height:6px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .15s;
}
.odm-art-leggi[open] > summary::before{margin-top:3px;transform:rotate(-135deg)}
.odm-art-leggi > summary:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:4px}
.odm-art-leggi .odm-pannello{margin-top:8px;padding-top:10px}
.odm-art-leggi .deal-testo{
  max-height:260px;overflow:auto;margin:0 0 10px;padding:10px 12px;
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--blocco-chiaro);font-size:13px;line-height:1.55;
}
.odm-art-leggi .odm-lettore audio{max-width:100%}

/* ---------- le schede degli articoli non si allargano oltre lo schermo (difetto che c'era gia') ----------
   Sotto i 900px ogni articolo e' una scheda in una griglia a una colonna (tbody display:grid). Quella colonna
   non aveva una misura, quindi prendeva la larghezza del figlio piu' largo: la pillola del riepilogo della
   fascia richiusa ("6,80 EUR/Mt, Importo 816,00 EUR, 1 foto, ...") e' su una riga sola e non va a capo, e con
   prezzo, importo e qualche conteggio arrivava a 440px su un telefono da 390. TUTTE le schede diventavano
   larghe cosi' e la tabella scorreva di lato (misurato: 450px di contenuto in 316px di spazio, anche con i
   pannelli chiusi e senza nessun blocco ODM). La colonna adesso e' al massimo larga quanto lo spazio che c'e'. */
@container (max-width:900px){
  table.tabella.t-articoli tbody{grid-template-columns:minmax(0,1fr)}
}
/* e sul telefono la pillola va a capo invece di troncarsi con i puntini: a pannello chiuso e' l'unica cosa che
   dice cosa c'e' dentro l'articolo, e "appunti" e "nota" stanno proprio in fondo */
@container (max-width:600px){
  .art-apri-conta{white-space:normal;overflow:visible;border-radius:12px;line-height:1.4}
}

/* ---------- telefono: niente scorrimento di lato, pulsanti grandi ---------- */
@media (max-width:719px){
  /* il pannello dei tipi resta in riga anche qui (vedi sopra): si annulla il foglio che sale dal basso */
  .art-odm .odm-pannello-tipi{position:static;left:auto;right:auto;bottom:auto;padding:12px;border:1px solid var(--bordo);border-radius:var(--raggio)}
  .art-odm .odm-graffetta.aperto{align-items:stretch}
  .art-odm .odm-bottone-aggiungi{flex:none;min-height:38px;justify-content:center}
  .art-odm .odm-tipi{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* la striscia va a capo due per riga (regola del blocco): qui solo un po' meno spazio fra le mattonelle */
  .art-odm .odm-striscia{gap:8px}
}

/* ======================================================================
   AREA DOCUMENTI - ODM tappa 8, 21/09/2026
   Da APPENDERE in fondo a css/fpc.css (un frammento, non il foglio intero: altri lavori possono aver
   ripubblicato il foglio nel frattempo, e due mani sullo stesso file si pestano i piedi).
   QUESTO FRAMMENTO E' SALVATO SENZA BOM, apposta: un BOM finirebbe in mezzo al foglio. Il foglio intero
   (css/fpc.css) il BOM ce l'ha, come sempre.

   Cosa disegna:
     - Documenti/Default.aspx: a sinistra i clienti con le loro cartelle (l'albero), a destra la cartella
       aperta con il blocco degli oggetti; l'archivio ancora vuoto; i dialoghi della cartella nuova, del
       nome e del posto, della condivisione;
     - nel cestino, la riga di una cartella buttata e le sottocartelle che tornano con lei;
     - e una riga di correzione per la nota aperta (Note/Nota.aspx): la fascia del colore della nota, che
       per via del contenitore del blocco non compariva.

   Quasi tutto e' riuso: .barra-azioni .barra-cerca .pillole .riquadro .riquadro-testata .stato-vuoto .badge
   .bottone .icona-riga .azioni-riga .avviso .campo .scheda-pagina .dialogo-posta* .nt-dialogo .tondo
   .chiamata-icona .odm-punto e i colori delle classi .c-* (--tc). Il colore delle cartelle e' .c-ambra,
   dappertutto (albero, testata, sottocartelle, fascia del blocco, cestino): nessuna tinta nuova, tema
   scuro gia' compreso. Tutte le classi nuove cominciano per dc- (documenti), tranne .cs-cartella che sta
   nel cestino con le altre cs-.

   Sul telefono una cosa alla volta: l'elenco, oppure la cartella aperta. Non si scorre mai di lato.
   ====================================================================== */

/* ---------- la barra in cima ---------- */
.dc-barra p{max-width:62ch}

/* ---------- l'archivio ancora vuoto ---------- */
.dc-vuoto{padding:40px 20px 34px;gap:12px}
.dc-vuoto-segno{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--accento-velo);color:var(--accento-testo);
}
.dc-vuoto-segno.piccolo{width:48px;height:48px}
.dc-vuoto b,.dc-scegli b{font-size:15.5px;font-weight:600;color:var(--testo)}
.dc-vuoto p,.dc-scegli p{margin:0;max-width:46ch;font-size:13px;line-height:1.55}
/* le tre cose da sapere, una per riga, con la loro iconcina: si leggono in due secondi */
.dc-vuoto-punti{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:8px;max-width:430px;text-align:left}
.dc-vuoto-punti li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.dc-vuoto-punti svg{flex:none;margin-top:2px;color:var(--accento-testo)}

/* ---------- le due colonne ---------- */
.dc-area{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:20px;align-items:start}
.dc-area > *{min-width:0}

/* ---------- a sinistra: i clienti e le loro cartelle ---------- */
.dc-albero{margin-bottom:0}
.dc-albero .riquadro-testata b{font-size:13px;font-weight:600;color:var(--testo)}
.dc-strumenti{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bordo)}
.dc-strumenti .barra-cerca{min-width:0;max-width:none}
.dc-filtro label .dc-conta{margin-left:2px;height:17px;line-height:15px;padding:0 6px}
.dc-clienti{list-style:none;margin:0;padding:6px 8px 10px}
.dc-cliente + .dc-cliente{margin-top:4px}
/* il cliente: e' la prima divisione dell'archivio, e si legge come il titolo del suo gruppo */
.dc-cliente-nome{display:flex;align-items:center;gap:8px;margin:0;padding:10px 8px 5px;font-size:12.5px;font-weight:600;color:var(--testo)}
.dc-cliente-nome svg{flex:none;color:var(--tenue)}
.dc-cliente-nome > span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* le cartelle sotto il loro cliente, con il filo a sinistra che dice di chi sono */
.dc-cartelle,.dc-sotto{list-style:none;margin:0;padding:0}
.dc-cartelle{margin-left:15px;padding-left:8px;border-left:1px solid var(--bordo)}
.dc-sotto{margin-left:20px;padding-left:8px;border-left:1px dashed var(--bordo-forte)}
/* la cartella: tutta la riga e' il collegamento */
.dc-voce{
  display:flex;align-items:center;gap:9px;min-width:0;margin:1px 0;padding:6px 8px;
  border-radius:var(--raggio);color:var(--testo);font-size:13px;text-decoration:none;
  transition:background-color .15s,color .15s;
}
.dc-voce:hover{background:var(--pannello2)}
.dc-voce:focus-visible{outline:2px solid var(--accento2);outline-offset:1px}
.dc-voce.attiva{background:var(--accento-velo);color:var(--accento-testo);font-weight:600}
.dc-voce-segno{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;
  background:color-mix(in srgb,var(--tc,var(--accento)) 14%,transparent);color:var(--tc,var(--accento));
}
.dc-voce-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* condivisa da me (viola, come l'icona "condividi") oppure ricevuta (blu) */
.dc-voce-condivisa{flex:none;display:grid;place-items:center;color:var(--ic-viola)}
.dc-voce-condivisa.ricevuta{color:var(--ic-blu)}
.dc-conta{
  flex:none;min-width:22px;height:20px;padding:0 7px;border-radius:999px;border:1px solid var(--bordo);
  background:var(--pannello2);color:var(--tenue);font-size:11px;font-weight:600;line-height:18px;
  text-align:center;font-variant-numeric:tabular-nums;
}
.dc-conta.zero{opacity:.55}
.dc-voce.attiva .dc-conta{background:var(--accento);border-color:var(--accento);color:#fff;opacity:1}
/* in fondo, il cestino: quello che si butta da qui finisce li' */
.dc-cestino{display:flex;align-items:center;gap:9px;padding:11px 16px;border-top:1px solid var(--bordo);color:var(--tenue);font-size:12.5px;text-decoration:none}
.dc-cestino:hover{background:var(--pannello2);color:var(--accento-testo)}

/* ---------- a destra: la cartella aperta ---------- */
.dc-destra{display:flex;flex-direction:column;gap:14px;min-width:0}
.dc-scegli{margin-bottom:0}
.dc-scegli .stato-vuoto{padding:56px 20px;gap:12px}
/* "Tutte le cartelle": serve solo sul telefono, dove l'elenco sparisce mentre la cartella e' aperta */
.dc-torna{display:none;align-self:flex-start}
.dc-testa{display:flex;align-items:flex-start;gap:14px;padding:2px 0 2px}
.dc-testa-segno{
  flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;
  background:color-mix(in srgb,var(--tc,var(--accento)) 14%,transparent);color:var(--tc,var(--accento));
}
.dc-testa-testo{flex:1;min-width:0}
.dc-percorso{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:0 0 2px;font-size:12px;color:var(--tenue)}
.dc-percorso a{color:var(--tenue);text-decoration:none;border-bottom:1px dotted var(--bordo-forte)}
.dc-percorso a:hover{color:var(--accento-testo);border-bottom-color:var(--accento)}
.dc-percorso i{font-style:normal;color:var(--debole)}
.dc-testa h2{margin:0;font-size:21px;font-weight:600;line-height:1.25;color:var(--testo);overflow-wrap:anywhere}
.dc-testa-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:7px 0 0;font-size:12px;color:var(--debole)}
/* lo stato della condivisione: per chi ha creato la cartella e' un pulsante che apre il dialogo */
.dc-stato{display:inline-flex;align-items:center;gap:5px;background:transparent;font:inherit;font-size:11px;font-weight:600}
button.dc-stato{cursor:pointer}
button.dc-stato:hover{border-color:var(--accento);color:var(--accento-testo)}
/* condivisa: il viola dell'icona "condividi" (.ir-speciale), non il rosso di un avviso */
button.dc-stato.on{border-color:color-mix(in srgb,var(--ic-viola) 55%,transparent);color:var(--ic-viola)}
button.dc-stato.on:hover{border-color:var(--ic-viola);background:color-mix(in srgb,var(--ic-viola) 8%,transparent)}
.dc-stato.ricevuta{border-color:color-mix(in srgb,var(--ic-blu) 50%,transparent);color:var(--ic-blu)}
.dc-testa-azioni{flex:none;align-items:center;padding-top:4px}
/* le sottocartelle: le schede del portale, con il colore delle cartelle */
.dc-sottocartelle{display:flex;flex-wrap:wrap;gap:10px}
.dc-sottocartelle .scheda-pagina{text-decoration:none}
.dc-sottocartelle .scheda-pagina-icona{background:color-mix(in srgb,var(--tc,var(--accento)) 14%,transparent);color:var(--tc,var(--accento))}
.dc-sottocartelle .scheda-pagina:hover{border-color:var(--tc,var(--accento))}
/* il blocco degli oggetti prende la fascia sul fianco sinistro con il colore delle cartelle, come la nota
   prende il suo: e' quello che lega il blocco alla cartella scritta sopra. Il blocco non e' figlio diretto:
   js/odm.js lo mette DENTRO il <div data-odm>, quindi il selettore guarda piu' in giu' */
.dc-blocco .odm-blocco{margin-bottom:0;border-left:3px solid var(--tc,var(--accento))}
/* LA STESSA COSA PER LA NOTA APERTA (Note/Nota.aspx), che finora non si vedeva: la regola della tappa 6
   (.nt-nota > .riquadro) cerca il blocco come figlio diretto, ma anche li' sta dentro il <div data-odm>.
   Con questa riga la fascia del colore della nota compare davvero, come nelle sue anteprime */
.nt-nota .odm-blocco{border-left:3px solid var(--tc,var(--accento))}

/* ---------- i dialoghi ---------- */
.dc-dialogo-largo{width:min(640px,94vw)}
.dc-icona-condividi{background:var(--ic-viola)}
.dc-nota-campo{font-size:11.5px;line-height:1.45;color:var(--debole)}
.dc-nota-campo:empty{display:none}
/* "dentro questa cartella": il cliente e' gia' quello della cartella, e il campo non serve piu' */
.dc-nuova:has(input[name="dcDove"][value="cartella"]:checked) .dc-campo-cliente{display:none}
/* la regola della condivisione, detta in cima al dialogo: si condivide solo con chi vede gia' il cliente */
.dc-regola{
  display:flex;align-items:flex-start;gap:9px;margin:0;padding:10px 12px;border-radius:var(--raggio);
  border:1px solid color-mix(in srgb,var(--ic-viola) 26%,transparent);
  background:color-mix(in srgb,var(--ic-viola) 8%,transparent);
  font-size:12.5px;line-height:1.5;color:var(--testo);
}
.dc-regola svg{flex:none;margin-top:1px;color:var(--ic-viola)}
.dc-filtro-persone{min-width:0;max-width:none}
/* una riga per persona: chi e', che cosa fa, e le tre pillole No / Legge / Modifica */
.dc-persone{list-style:none;margin:0;padding:0;border:1px solid var(--bordo);border-radius:var(--raggio)}
.dc-persona{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--bordo)}
.dc-persona:last-child{border-bottom:none}
.dc-persona[hidden]{display:none}
.dc-persona-segno{
  flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb,var(--tc,var(--accento)) 14%,transparent);color:var(--tc,var(--accento));
  font-size:12px;font-weight:700;letter-spacing:.02em;
}
.dc-persona-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dc-persona-nome b{font-size:13.5px;font-weight:600;color:var(--testo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-persona-nome small{font-size:11.5px;color:var(--tenue)}
.dc-livelli{flex:none;flex-wrap:nowrap;gap:4px}
.dc-livelli li label{padding:4px 10px 4px 7px;font-size:12px}
/* "No" scelto non e' una conquista: resta grigio, il verde e' per chi la cartella la riceve */
.dc-livelli li.dc-no input:checked + label{background:var(--pannello2);border-color:var(--bordo-forte);color:var(--tenue)}
.dc-livelli li.dc-no input:checked + label::before{background-color:var(--debole);border-color:var(--debole);background-image:none}

/* ---------- nel cestino: la cartella buttata ---------- */
.cs-riga.cs-cartella{--fc:var(--tc,var(--accento))}
.cs-dentro li.cs-cartella{--fc:var(--tc,var(--accento));font-weight:600}

/* ---------- tablet e telefono: una cosa alla volta ---------- */
@media (max-width:979px){
  .dc-area{grid-template-columns:minmax(0,1fr)}
  .dc-area.dc-aperta .dc-albero{display:none}
  .dc-area:not(.dc-aperta) .dc-destra{display:none}
  .dc-torna{display:inline-flex}
  /* con la cartella aperta la barra della pagina si toglie: l'azione di li' e' la graffetta del blocco, e
     "Nuova cartella" torna appena si torna all'elenco */
  .dc-barra.dc-aperta{display:none}
}

/* ---------- telefono: niente scorrimento di lato, i pulsanti larghi ---------- */
@media (max-width:719px){
  /* l'azione della pagina occupa tutta la riga: sul telefono e' la prima cosa che si tocca */
  .dc-barra > .bottone{flex:1 1 100%;justify-content:center}
  .dc-vuoto{padding:32px 16px 28px}
  .dc-vuoto .bottone{width:100%;justify-content:center}
  /* le righe dell'albero piu' alte: si toccano con il dito */
  .dc-voce{padding:10px 8px}
  .dc-cliente-nome{padding-top:12px}
  /* i pulsanti della cartella vanno in cima, come icone da 38: sul telefono non si cercano a destra */
  .dc-testa{flex-wrap:wrap;gap:10px 12px}
  .dc-testa-azioni{order:-1;width:100%;justify-content:flex-end;padding-top:0}
  .dc-testa-azioni .icona-riga{width:38px;height:38px}
  .dc-testa-segno{width:40px;height:40px;border-radius:10px}
  .dc-testa h2{font-size:18.5px}
  .dc-sottocartelle .scheda-pagina{flex:1 1 100%;max-width:none}
  /* la persona diventa una scheda: nome sopra, le tre pillole larghe sotto */
  .dc-persona{flex-wrap:wrap;gap:8px 12px}
  .dc-livelli{width:100%;padding-left:46px}
  .dc-livelli li{flex:1}
  .dc-livelli li label{width:100%;justify-content:center}
}

/* ======================================================================
   AREA DOCUMENTI - cartelle anche SENZA CLIENTE (documenti generali), 21/09/2026 pomeriggio
   Da APPENDERE in fondo a css/fpc.css, dopo il frammento della tappa 8 (le regole qui sotto lo
   correggono in due punti e devono venire dopo). QUESTO FRAMMENTO E' SALVATO SENZA BOM, apposta: un BOM
   finirebbe in mezzo al foglio. Il foglio intero (css/fpc.css) il BOM ce l'ha, come sempre.

   Cosa disegna, tutto con i mattoni che c'erano gia' (.pillole, .badge, .dc-*, i colori --ic-*):
     - in cima all'elenco il gruppo "Documenti generali", disegnato come un cliente ma con il suo segno;
     - accanto al nome di una cartella il segno di chi la vede: le due persone verdi = per tutti,
       l'occhio grigio = la vedi perche' sei dell'ufficio (gli altri segni c'erano gia');
     - sulla cartella aperta il cartellino verde "Per tutti" e quello grigio "Visibile all'ufficio";
     - nei dialoghi "Chi la vede: Solo io / Tutti", due pillole con la frase che spiega la scelta accesa.
       Nel dialogo della cartella nuova compare solo senza cliente (e non "dentro" un'altra cartella, dove
       decide la madre); in quello della condivisione, con "Tutti", la pillola "Legge" sparisce.
   Tutto senza una riga di JavaScript: lo decide :has() su quello che e' scelto. Se un browser vecchio non
   conoscesse :has(), si vedrebbe qualcosa in piu' (la scelta anche con un cliente, che il server ignora),
   mai qualcosa in meno.
   Sul telefono le pillole si allargano a tutta la riga; non si scorre mai di lato.
   ====================================================================== */

/* ---------- l'elenco: il gruppo dei documenti generali, in cima ---------- */
.dc-generali .dc-cliente-nome svg{color:var(--ic-teal)}
/* un filo fra i documenti generali e i clienti: sono due cose diverse, e si vede a colpo d'occhio */
.dc-generali:not(:last-child){padding-bottom:8px;margin-bottom:6px;border-bottom:1px dashed var(--bordo)}
/* i due segni nuovi accanto al nome: per tutti (verde) e visibile all'ufficio (grigio) */
.dc-voce-condivisa.tutti{color:var(--ic-verde)}
.dc-voce-condivisa.ufficio{color:var(--debole)}

/* ---------- la cartella aperta: chi la vede ---------- */
.badge.dc-stato.dc-tutti{border-color:color-mix(in srgb,var(--ic-verde) 50%,transparent);color:var(--ic-verde)}
button.badge.dc-stato.dc-tutti:hover{border-color:var(--ic-verde);background:color-mix(in srgb,var(--ic-verde) 8%,transparent);color:var(--ic-verde)}
.badge.dc-stato.dc-ufficio{border-color:var(--bordo-forte);color:var(--tenue)}
/* nel percorso "Documenti generali" non e' un collegamento: si legge come il resto della riga */
.dc-percorso > span{color:var(--tenue)}

/* ---------- "Chi la vede": Solo io / Tutti ---------- */
.dc-chi li label{padding:6px 14px 6px 9px;font-size:13px}
.dc-chi li label svg{flex:none;margin-left:1px}
.dc-campo-chi .dc-nota-campo{display:block}
.dc-campo-chi .dc-chi-tutti{display:none}
.dc-campo-chi:has(input[value="tutti"]:checked) .dc-chi-tutti{display:block}
.dc-campo-chi:has(input[value="tutti"]:checked) .dc-chi-io{display:none}
/* la cartella nuova: con un cliente scelto la cartella e' sempre "solo io", e dentro un'altra cartella
   decide la madre, quindi in quei due casi la scelta non si mostra */
.dc-nuova:has(select option:checked:not([value=""])) .dc-campo-chi,
.dc-nuova:has(input[name="dcDove"][value="cartella"]:checked) .dc-campo-chi{display:none}
/* la condivisione: la frase in cima segue la scelta, e con "Tutti" la pillola "Legge" non serve (vederla la
   vedono gia' tutti: si condivide per dare "Modifica"). Una sottocartella di una cartella per tutti ha la
   classe dc-pertutti, perche' li' la scelta non c'e' e decide la madre */
.dc-condividi .dc-campo-chi{padding-bottom:2px}
.dc-regola-tutti{display:none}
.dc-condividi:has(input[name="dcChi"][value="tutti"]:checked) .dc-regola-tutti{display:inline}
.dc-condividi:has(input[name="dcChi"][value="tutti"]:checked) .dc-regola-io{display:none}
.dc-condividi.dc-pertutti .dc-livelli li.dc-legge,
.dc-condividi:has(input[name="dcChi"][value="tutti"]:checked) .dc-livelli li.dc-legge{display:none}

/* ---------- telefono: le due pillole della scelta larghe quanto la riga ---------- */
@media (max-width:719px){
  .dc-chi{flex-wrap:nowrap}
  .dc-chi li{flex:1}
  .dc-chi li label{width:100%;justify-content:center;padding:9px 12px 9px 9px}
}

/* ======================================================================
   IL TESTO LETTO DI UNA SCANSIONE, LA TRASCRIZIONE AUTOMATICA E GLI ERRORI DENTRO GLI EDITORI
   ODM, 21/09/2026. Da APPENDERE in fondo a css/fpc.css (un frammento, non il foglio intero).

   Tre cose, tutte dentro il blocco degli oggetti (js/odm.js):
     - la sezione del TESTO LETTO dentro la scansione aperta: il testo che il portale ha letto dal foglio,
       con la pillola "letto in automatico" (ambra: puo' contenere errori) o "corretto a mano" (verde), la
       casella per correggerlo, e i due stati senza testo (sto leggendo, non letto);
     - la TRASCRIZIONE AUTOMATICA: il pulsante "Trascrivi", la riga che spiega che cosa fa (o perche' adesso
       non si puo'), il collegamento "oppure scrivi o incolla tu il testo";
     - l'ERRORE DENTRO L'EDITORE: il riquadro rosso subito sopra i pulsanti appena premuti.

   Tutte le classi nuove cominciano per odm-, come le altre del blocco: nel foglio i nomi generici sono gia'
   presi. Tutto il resto e' riuso: .odm-etichetta .odm-campo .odm-azioni .odm-in-corso .odm-testo .bottone
   (.in-attesa porta gia' la rotella) e i colori del portale (--ic-verde, --pericolo, --bordo-forte...).
   Sul telefono niente scorre di lato: i testi lunghi (un indirizzo di una pagina web letto dal foglio) vanno
   a capo dove capita, e i pulsanti prendono tutta la riga.
   ====================================================================== */

/* ---------- il testo letto, dentro la scansione aperta ---------- */
.odm-lettura{
  --lt:#6d4fc4;   /* il viola della famiglia delle scansioni (.odm-f-scansione) */
  min-width:0;margin:0 0 14px;padding:12px 14px 14px;
  border:1px solid var(--bordo);border-left:3px solid var(--lt);border-radius:var(--raggio);
  background:var(--pannello2);
}
html[data-tema="scuro"] .odm-lettura{--lt:#b39cff}
/* corretto a mano: il fianco verde, come la pillola */
.odm-lettura.odm-lettura-corretto{--lt:var(--ic-verde)}
/* niente testo: il fianco resta neutro, non c'e' niente da allarmare */
.odm-lettura.odm-lettura-errore,.odm-lettura.odm-lettura-vuoto{--lt:var(--bordo-forte)}
/* le prime righe di un documento vero: il colore della famiglia del file (--fc, scritto sulla riga) */
.odm-lettura.odm-lettura-testo{--lt:var(--fc,#5c6b74)}
/* mentre si corregge: il rosso del portale, come ogni editore aperto */
.odm-lettura.odm-lettura-correzione{--lt:var(--accento);background:var(--pannello)}

.odm-lettura-testa{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;min-width:0}
.odm-lettura-testa .odm-etichetta{margin:0}

/* le due pillole: ambra = letto da una macchina, puo' sbagliare; verde = l'ha controllato una persona */
.odm-lettura-pillola{
  display:inline-flex;align-items:center;max-width:100%;padding:2px 9px;border:1px solid;border-radius:999px;
  font-size:11px;font-weight:600;line-height:17px;overflow-wrap:anywhere;
}
.odm-lettura-auto{color:#8a5a0b;border-color:color-mix(in srgb,#a66e14 45%,transparent);background:color-mix(in srgb,#a66e14 11%,transparent)}
html[data-tema="scuro"] .odm-lettura-auto{color:#f2c14e;border-color:color-mix(in srgb,#f2c14e 45%,transparent);background:color-mix(in srgb,#f2c14e 12%,transparent)}
.odm-lettura-mano{color:var(--ic-verde);border-color:color-mix(in srgb,var(--ic-verde) 45%,transparent);background:color-mix(in srgb,var(--ic-verde) 11%,transparent)}

/* la riga piccola che avverte (letto in automatico, corretto a mano, come si corregge) */
.odm-lettura-nota{display:flex;align-items:flex-start;gap:7px;margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--tenue)}
.odm-lettura-nota svg{flex:none;margin-top:2px;color:var(--lt)}

/* il testo letto: si legge TUTTO, scorrendo dentro il riquadro (in verticale, mai di lato), perche' e'
   quello che si deve controllare. Le parole lunghissime (un indirizzo web) vanno a capo dove capita. */
.odm-lettura-testo{
  max-height:280px;overflow-y:auto;margin:0 0 12px;padding:12px 14px;
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--blocco-chiaro);
  font-size:13.5px;line-height:1.62;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
}
.odm-lettura-testo:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.odm-lettura .odm-in-corso{margin:0}

/* sto leggendo / non letto / niente testo: un riquadro tratteggiato, calmo, con il perche' scritto */
.odm-lettura-avviso{
  display:flex;align-items:flex-start;gap:9px;margin:0 0 12px;padding:10px 12px;
  border:1px dashed var(--bordo-forte);border-radius:var(--raggio);background:var(--blocco-chiaro);
  font-size:13px;line-height:1.5;color:var(--testo);overflow-wrap:anywhere;
}
.odm-lettura-avviso svg{flex:none;margin-top:1px;color:var(--tenue)}

/* la casella della correzione: alta, perche' dentro c'e' un foglio intero */
.odm-lettura-campo{min-height:220px;max-height:60vh;margin:0 0 12px;overflow-wrap:anywhere}

.odm-lettura .odm-azioni{margin-top:0}
.odm-lettura .bottone svg,.odm-tr-editore .bottone svg{flex:none}

/* ---------- i pulsanti spenti del blocco ---------- */
/* il foglio non ha una regola generale per un .bottone spento: nel blocco un pulsante che non si puo'
   premere (Trascrivi con il servizio spento, Salva mentre salva) deve vedersi spento. Quello che lavora
   (la rotella di .in-attesa) resta invece ben visibile: e' la cosa che si sta guardando. */
.odm-blocco .bottone:disabled{opacity:.5;cursor:not-allowed;filter:none}
.odm-blocco .bottone.vuoto:disabled:hover{border-color:var(--bordo);color:var(--testo)}
.odm-blocco .bottone.in-attesa:disabled{opacity:1;cursor:progress}

/* ---------- la trascrizione: Trascrivi, oppure a mano ---------- */
/* che cosa fa il pulsante (grigio), oppure perche' adesso non si puo' (in un riquadro, piu' marcato) */
.odm-tr-spiega{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--tenue);overflow-wrap:anywhere}
.odm-tr-spiega.odm-tr-limite{
  padding:8px 10px;border:1px dashed var(--bordo-forte);border-radius:var(--raggio);
  background:var(--blocco-chiaro);color:var(--testo);
}
/* il passaggio fra le due strade: un collegamento, non un secondo pulsante rosso accanto al primo */
.odm-tr-cambia{
  display:inline-block;margin:8px 0 0;padding:4px 0;border:0;background:none;
  color:var(--accento-testo);font:inherit;font-size:12.5px;font-weight:600;text-align:left;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.odm-tr-cambia:hover{text-decoration-thickness:2px}
.odm-tr-cambia:disabled{opacity:.5;cursor:default}
/* mentre il portale ascolta, le schede restano visibili ma ferme */
.odm-tr-lavora .odm-tr-scelte{opacity:.65}
.odm-tr-lavora .odm-tr-scheda{cursor:default;transform:none}

/* ---------- l'errore dentro l'editore ---------- */
/* rosso vero e ben marcato (il bordo spesso a sinistra e' il rosso del logo), subito sopra i pulsanti */
.odm-errore-editore{
  display:flex;align-items:flex-start;gap:9px;min-width:0;margin:0 0 12px;padding:10px 12px;
  border:1px solid var(--pericolo-bordo);border-left:4px solid #da0219;border-radius:var(--raggio);
  background:var(--pericolo-velo);color:var(--pericolo);
  font-size:13px;font-weight:600;line-height:1.45;overflow-wrap:anywhere;
}
.odm-errore-editore svg{flex:none;margin-top:1px}
html[data-tema="scuro"] .odm-errore-editore{color:#ff8a80;border-left-color:#ff4b5c}

/* ---------- telefono: niente scorrimento di lato, bersagli grandi ---------- */
@media (max-width:719px){
  .odm-lettura{padding:10px 11px 12px}
  .odm-lettura-testo{max-height:340px;padding:10px 12px}
  /* i pulsanti prendono tutta la riga: si premono con il pollice */
  .odm-lettura .odm-azioni .bottone,.odm-tr-editore .odm-azioni .bottone{flex:1 1 auto;justify-content:center}
  .odm-tr-cambia{padding:9px 0}
}

/* ---------------- Cestino: "Svuota il cestino" (21/09/2026 sera) ----------------
   Da aggiungere IN FONDO a css/fpc.css (dopo le sezioni cs- e dc-).
   Il pulsante sta nella testata del riquadro dell'elenco, a destra: grigio a contorno come gli altri "Svuota" del
   portale (.bottone.vuoto.piccolo, che al passaggio del mouse vira al rosso #da0219), perche' eliminare non grida.
   Il rosso vero arriva solo nella finestra di conferma, che e' la .dialogo-conferma del portale con il pulsante
   .bottone.pericolo, come per l'eliminazione di un'opportunita' e per la Manutenzione.
   Nessuna tinta nuova, tema scuro gia' compreso: sono tutte classi e variabili che il foglio ha gia'. */
.cs-riquadro .riquadro-testata small{margin-left:auto}
.cs-svuota{flex:none}
.cs-svuota svg{flex:none}
/* nella finestra le righe sono due o tre paragrafi .manut-avviso, che da soli non hanno margini */
.cs-dialogo .manut-avviso + .manut-avviso{margin-top:10px}
/* il dito sugli schermi touch: almeno 38px, come le icone di riga */
@media (max-width:900px),(pointer:coarse){
  .cs-svuota{min-height:38px;padding:8px 14px}
}
/* telefono: la nota della testata sparisce (regola del cestino), il pulsante resta a destra del titolo e, se non
   ci sta, va a capo da solo (sullo stretto la testata del cestino ha gia' flex-wrap). Niente scorrimento di lato */
@media (max-width:719px){
  .cs-svuota{margin-left:auto}
}
/* Manutenzione (21/09/2026): le tabelle del database in alto, le voci di manutenzione sotto */
.tdb ~ .manut{margin-top:18px}
/* catalogo (21/09/2026): il carrello degli articoli nella riga. Con il "+" se l'articolo non c'e', con la spunta
   se c'e' gia' (quadrato pieno): js/catalogo.js cambia solo la classe attiva */
.cat-cestino .cat-carrello-ok,.cc-vr-cestino .cat-carrello-ok{display:none}
.cat-cestino.attiva .cat-carrello-piu,.cc-vr-cestino.attiva .cat-carrello-piu{display:none}
.cat-cestino.attiva .cat-carrello-ok,.cc-vr-cestino.attiva .cat-carrello-ok{display:inline}
/* chat (21/09/2026, richiesta dell'utente; .chat-emoji e' gia' la finestrella per sceglierle, qui .chat-em): le emoji nel testo un po' piu' grandi; un messaggio di sole emoji
   grande e senza fumetto, come nelle app di messaggi */
.chat-em{font-size:1.3em;line-height:1;vertical-align:-.08em}
.chat-msg.solo-emoji .chat-bolla{background:transparent;box-shadow:none;padding:0 2px 16px;min-width:0}
.chat-msg.solo-emoji .chat-bolla p{padding-right:0;line-height:1.15}
.chat-msg.solo-emoji .chat-em{font-size:1em}
.chat-msg.solo-emoji.emoji-1 .chat-bolla p{font-size:48px}
.chat-msg.solo-emoji.emoji-3 .chat-bolla p{font-size:34px}
.chat-msg.solo-emoji.emoji-6 .chat-bolla p{font-size:26px}
.chat-msg.solo-emoji .chat-ora{right:2px;bottom:0}

/* =====================================================================
   Finestra degli allegati: LA GIOSTRA delle foto e dei video (21/09/2026)
   js/allegati-finestra.js, modo acceso solo dal gruppo che porta data-allegati-giostra (la striscia
   "Foto, video e audio" degli oggetti ODM: js/odm.js, Campionature/Scheda.aspx.vb) e con almeno due foto o
   video. Senza quell'attributo la finestra e' quella di sempre e nessuna di queste regole la tocca.
   Riusa i mattoni della galleria degli articoli, senza copiarli: l'alone (.gal-sfondo), la striscia delle
   miniature (.gal-piede .gal-striscia .gal-mini) e le variabili --gal-*, che dal 21/09 valgono per
   dialog.galleria e per dialog.allw (vedi la galleria dei colori, piu' su). Qui ci sono solo le differenze.
   ===================================================================== */
dialog.allw.allw-giostra[open]{grid-template-rows:auto minmax(0,1fr) auto}
/* la vignettatura della galleria sopra l'alone sfocato */
dialog.allw.allw-giostra::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 35%,rgba(0,0,0,.72) 100%)}
/* palco con la prospettiva (1600px: la stessa che usa js/allegati-finestra.js per mettere a posto i vicini) */
.allw-giostra .allw-palco{z-index:1;perspective:1600px;perspective-origin:50% 45%}
.allw-giostra .gal-piede{grid-row:3}
.allw-piede[hidden],.allw-pista[hidden]{display:none}

/* i vicini: le foto prima e dopo, girate di lato come i campioni del catalogo; si cliccano */
.allw-pista{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;transition:opacity .3s ease}
.allw-vicino{
  position:absolute;left:50%;top:50%;overflow:hidden;border-radius:4px;background:#0d1418;cursor:pointer;pointer-events:auto;
  box-shadow:0 34px 60px -22px rgba(0,0,0,.9);filter:brightness(var(--luce,.55));will-change:transform;
  transition:transform .7s cubic-bezier(.2,.86,.24,1),width .5s ease,height .5s ease,filter .6s ease;
  animation:allw-vicino-entra .45s ease both;
  -webkit-box-reflect:below 6px linear-gradient(transparent 70%,rgba(255,255,255,.1));
}
.allw-vicino:hover{filter:brightness(calc(var(--luce,.55) + .2))}
.allw-vicino img,.allw-vicino video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
@keyframes allw-vicino-entra{from{opacity:0}}
/* il video fra i vicini e nelle miniature: il tasto play sopra il primo fotogramma */
.allw-vicino.video::after,.allw-giostra .gal-mini.video::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2302080e' fill-opacity='.55'/%3E%3Cpath d='M10 8v8l6-4z' fill='%23fff'/%3E%3C/svg%3E") center/64px no-repeat
}
.allw-giostra .gal-mini.video::after{background-size:22px}
/* foto che il browser non sa mostrare (HEIC): il segno della fotocamera, non lo scampolo della galleria */
.allw-vicino.rotta img,.allw-giostra .gal-mini.rotta img{opacity:0}
.allw-vicino.rotta,.allw-giostra .gal-mini.rotta{
  background:#1a2126 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3efe6' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h3l2-3h8l2 3h3v11H3z'/%3E%3Ccircle cx='12' cy='12.5' r='3.5'/%3E%3C/svg%3E") center/40% no-repeat
}

/* la foto (o il video) in primo piano: quella di sempre, piu' stretta per lasciar vedere i vicini. La vista non
   prende i clic (passano ai vicini e al fondo, che chiude), quello che mostra si' */
.allw-giostra .allw-vista{padding:22px 21% 26px;pointer-events:none}
.allw-giostra .allw-vista > *{pointer-events:auto}
.allw-giostra .allw-foto.allw-pronta{-webkit-box-reflect:below 6px linear-gradient(transparent 74%,rgba(255,255,255,.12))}
/* ingrandita: i vicini si fanno da parte, e il riflesso sparisce (seguirebbe lo zoom) */
.allw-giostra.allw-ingrandita .allw-pista{opacity:0;pointer-events:none}
.allw-giostra.allw-ingrandita .allw-foto{-webkit-box-reflect:unset}
/* la foto nuova arriva dal lato da cui la si e' chiamata, girandosi come un campione */
.allw-vista.allw-entra-dx{animation:allw-entra-dx .55s cubic-bezier(.2,.86,.24,1)}
.allw-vista.allw-entra-sx{animation:allw-entra-sx .55s cubic-bezier(.2,.86,.24,1)}
@keyframes allw-entra-dx{from{opacity:.2;transform:translate3d(24%,0,-260px) rotateY(-40deg)}}
@keyframes allw-entra-sx{from{opacity:.2;transform:translate3d(-24%,0,-260px) rotateY(40deg)}}

/* la striscia delle miniature: le foto degli oggetti sono quasi sempre 4:3, non verticali come i campioni */
.allw-giostra .gal-piede{padding:4px 16px max(14px,env(safe-area-inset-bottom))}
.allw-giostra .gal-striscia{justify-content:safe center}
.allw-giostra .gal-mini{width:76px;height:57px}
.allw-giostra .gal-mini video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.gal-mini-durata{position:absolute;right:3px;bottom:2px;z-index:1;padding:0 4px;border-radius:3px;background:rgba(2,8,14,.7);color:#fff;font-size:9.5px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums;pointer-events:none}

@media (max-width:560px){
  /* telefono: la foto quasi a tutta larghezza, i vicini si vedono di taglio ai bordi; miniature 44x38 (il
     bersaglio da dito del portale): ne stanno sette in fila, con di piu' la striscia scorre col dito dentro la
     finestra, come nella galleria degli articoli (la pagina non scorre mai di lato) */
  .allw-giostra .allw-vista{padding:0 40px}
  .allw-giostra .gal-mini{width:44px;height:38px}
  /* sulla miniatura piccola basta il tasto play: la durata ci finirebbe sopra (resta in testata) */
  .allw-giostra .gal-mini-durata{display:none}
  .allw-giostra .gal-piede{padding:2px 8px max(10px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .allw-vicino{transition-duration:.01s;animation:none}
  .allw-vista.allw-entra-dx,.allw-vista.allw-entra-sx{animation:none}
}

/* ---------- la striscia degli oggetti ODM: la mattonella che apre la giostra ---------- */
/* il video: il primo fotogramma, muto, con il tasto play (prima c'era il lettore piccolo dentro la mattonella) */
.odm-video-apri{position:relative;color:#fff;text-decoration:none}
.odm-video-apri video{pointer-events:none}
.odm-play{
  position:absolute;left:50%;top:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(2,8,14,.58);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 22px -8px rgba(0,0,0,.8);
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;pointer-events:none;
}
.odm-play svg{margin-left:3px}
/* la foto: una lente in basso a destra dice che si guarda a tutto schermo (col mouse compare al passaggio) */
.odm-ingrandisci{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(2,8,14,.6);color:#fff;opacity:0;transition:opacity .2s ease;pointer-events:none}
.odm-mattonella .camp-anteprima > a:hover .odm-play,.odm-mattonella .camp-anteprima > a:focus-visible .odm-play{transform:scale(1.1);background:var(--accento);border-color:var(--accento)}
.odm-mattonella .camp-anteprima > a:hover .odm-ingrandisci,.odm-mattonella .camp-anteprima > a:focus-visible .odm-ingrandisci{opacity:1}
.odm-mattonella .camp-anteprima > a:focus-visible{outline:2px solid var(--accento2);outline-offset:-3px}
@media (hover:none){.odm-ingrandisci{opacity:1}}
@media (prefers-reduced-motion:reduce){.odm-play,.odm-ingrandisci{transition:none}}

/* ======================================================================
   TICKET: I MATERIALI SONO OGGETTI ODM E OGNI TICKET HA LA SUA CHAT (22/09/2026)
   Il blocco "Materiali e appunti" (js/odm.js) sta DENTRO il riquadro del modulo (Supporto/Nuovo.aspx) e della
   scheda (Supporto/Scheda.aspx), al posto dei quattro pulsanti e della galleria degli allegati: niente seconda
   cornice, e il titolo come gli altri titoli del ticket ("Note"): piccolo, maiuscolo e tenue. Il riquadro ha
   overflow:hidden, quindi il pannello dei tipi si apre in riga sotto il pulsante e spinge giu' il resto, come nel
   pannello degli articoli dell'opportunita' (.art-odm): una tendina sospesa verrebbe tagliata dal bordo.
   ====================================================================== */
.tk-odm{min-width:0;margin-top:24px}
.tk-odm > .odm-blocco{margin:0;border:none;border-radius:0;background:none;box-shadow:none}
.tk-odm .odm-testata{padding:0 0 10px;border-bottom:none;gap:8px 10px}
.tk-odm .odm-titolo{gap:7px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.tk-odm .odm-titolo svg{width:14px;height:14px}
.tk-odm .odm-corpo{padding:0}
.tk-odm + .setup-aiuto{display:block;margin-top:8px}
.tk-odm .odm-graffetta{position:static}
.tk-odm .odm-graffetta.aperto{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.tk-odm .odm-pannello-tipi{
  position:static;width:100%;max-height:none;overflow:visible;padding:12px;
  border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);box-shadow:none;
}
@media (max-width:719px){
  /* anche sul telefono il pannello resta in riga: si annulla il foglio che sale dal basso */
  .tk-odm .odm-pannello-tipi{position:static;left:auto;right:auto;bottom:auto;padding:12px;border:1px solid var(--bordo);border-radius:var(--raggio)}
  .tk-odm .odm-graffetta.aperto{align-items:stretch}
  .tk-odm .odm-bottone-aggiungi{flex:none;min-height:38px;justify-content:center}
}

/* elenco dei ticket: accanto all'occhio c'e' l'icona della chat del ticket */
table.tabella.t-ticket .c-azioni{width:104px}

/* nella chat, la chat di un ticket: la cuffia del pulsante Ticket del menu, su un tondo blu */
.chat-avatar.ticket{background:linear-gradient(135deg,var(--ic-blu),var(--accento2))}

/* ======================================================================
   TIPO DI CAMPIONE DA SPEDIRE - 22/09/2026 (richiesta dell'utente)
   Nella riga dell'articolo dell'opportunita' si dice quanti metri e che campione si spedisce (Metraggio,
   Tirella, Pocket: Gestione > Tipi di campione). Fino al 22/09 la tendina stava sotto il campo dei metri, con
   bordo, altezza e carattere tutti suoi: sembrava messa li' a caso. Adesso i due controlli stanno DENTRO LA
   STESSA CORNICE, divisi da un filetto, e si leggono come una frase sola: "12,5 Mt di Tirella". Premendo uno
   qualsiasi dei due si accende tutto il campo; quando i metri ci sono e il tipo no, diventa rossa la sua meta'
   (piu' la fascia della riga): e' l'ultima cosa che manca per poter spedire.
   ====================================================================== */
/* meta' sinistra: quanti metri */
/* come per la tendina qui sotto: dentro il campo unito le due meta' non cambiano colore da sole (la regola
   generale input:focus le farebbe diventare bianche), si accende la cornice tutta insieme */
/* meta' destra: che campione. La freccia e' disegnata qui, non quella grigia del sistema */
/* Aprendo la tendina il fuoco va sul select, e la regola generale dei campi (select:focus, piu' su nel foglio) gli
   metterebbe lo sfondo bianco --campo-attivo, il bordo rosso e l'alone: dentro il campo unito si vedeva mezza cella
   diventare bianca di colpo. Qui si annulla tutto: a dire che si sta usando il campo ci pensa .art-qt:focus-within,
   che accende la cornice intera. */
/* niente cambio di colore al passaggio del mouse: con la tendina aperta, spostando il mouse fuori, la meta' del tipo si schiariva di colpo (sembrava diventare bianca). Il campo cambia solo quando lo si usa davvero (focus-within) */
/* manca il tipo ma i metri ci sono: si tinge la meta' che manca, non tutto il campo */
/* il totale in fondo alla tabella: l'avviso di quello che manca per spedire */
/* scheda dell'opportunita' (sola lettura): il tipo sotto i metri */
/* schede (sotto i 900px di spazio): il campo prende tutta la larghezza e le due meta' se la dividono */

/* ======================================================================
   VALIDATO / NON VALIDATO - 22/09/2026 (richiesta dell'utente)
   Ogni cliente nato nel portale e ogni opportunita' porta una pillola: verde VALIDATO quando l'ufficio ha
   lavorato la scheda, rossa NON VALIDATO finche' non l'ha fatto. Per il personale EFFE PI la pillola e' un
   pulsante (chiede conferma prima di cambiare, js/validazione.js); per gli agenti e' solo una scritta.
   I colori sono quelli gia' in casa: il verde degli avvisi riusciti e il rosso del logo, tutti e due velati,
   perche' NON VALIDATO e' lo stato di partenza di tutti e non deve gridare come un errore.
   ====================================================================== */
.vp-stato{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;border:1px solid transparent;
  font-size:10px;font-weight:700;letter-spacing:.09em;line-height:1.6;white-space:nowrap;vertical-align:middle;
}
.vp-stato::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.vp-stato.si{border-color:var(--successo-bordo);background:var(--successo-velo);color:var(--successo)}
.vp-stato.no{border-color:rgba(218,2,25,.35);background:var(--accento-velo);color:var(--accento-testo)}
html[data-tema="scuro"] .vp-stato.si{color:#5ec98c;border-color:rgba(94,201,140,.45)}
html[data-tema="scuro"] .vp-stato.no{border-color:rgba(255,75,92,.45)}
/* pulsante: stessa pillola, ma si vede che si preme */
button.vp-stato{cursor:pointer;font-family:inherit;transition:box-shadow .15s,filter .15s}
button.vp-stato:hover{filter:brightness(1.05);box-shadow:0 0 0 3px var(--accento-velo)}
button.vp-stato.si:hover{box-shadow:0 0 0 3px var(--successo-velo)}
button.vp-stato:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
button.vp-stato[disabled]{opacity:.6;cursor:default}

/* Elenco dei clienti: la validazione ha la sua colonna, dopo Stato (variante B scelta dall'utente il 22/09).
   Prima stava sotto l'etichetta PROSPECT / CLIENTE, nella stessa cella: cosi' invece le pillole sono tutte
   incolonnate e si vede a colpo d'occhio quante aziende sono ancora da validare. Le aziende che arrivano dal
   gestionale lasciano la cella vuota. Pillola un filo piu' piccola e senza pallino: la colonna e' stretta. */
/* scheda del cliente: angolo in alto a destra, di fronte all'etichetta dello stato appoggiata alla fascia */
.az-testa.az-fascia > .vp-stato{position:absolute;right:12px;top:8px;z-index:2}
/* elenco delle opportunita': in riga con il codice OC57 */
.deal-identita .vp-stato{margin:0 0 4px 6px}
/* scheda dell'opportunita': in testa alla riga delle informazioni */
.deal-meta .vp-stato{margin-right:2px}

/* filtro dello stato: pillole, non caselle (elenco dei clienti ed elenco delle opportunita') */
.vp-filtri{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.vp-filtri-titolo{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
a.vp-filtro{
  display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;
  border:1px solid var(--bordo);background:var(--pannello);color:var(--tenue);
  font-size:12.5px;font-weight:600;line-height:1.4;text-decoration:none;
  transition:border-color .15s,color .15s,background .15s;
}
a.vp-filtro:hover{border-color:var(--accento2);color:var(--testo)}
a.vp-filtro.si::before,a.vp-filtro.no::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
a.vp-filtro.si{color:var(--successo)}
a.vp-filtro.no{color:var(--accento-testo)}
html[data-tema="scuro"] a.vp-filtro.si{color:#5ec98c}
a.vp-filtro.attiva{border-color:var(--accento2);background:var(--pannello2);color:var(--testo)}
a.vp-filtro.si.attiva{border-color:var(--successo-bordo);background:var(--successo-velo);color:var(--successo)}
a.vp-filtro.no.attiva{border-color:rgba(218,2,25,.35);background:var(--accento-velo);color:var(--accento-testo)}
html[data-tema="scuro"] a.vp-filtro.si.attiva{color:#5ec98c}
a.vp-filtro:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}

/* la finestra di conferma non e' un'eliminazione: il titolo non e' rosso e il bordo e' quello di sempre */
#dlgValidazione{border-color:var(--bordo)}
#dlgValidazione h3{color:var(--testo)}
#dlgValidazione .manut-avviso{margin:0;color:var(--tenue);font-size:14px;line-height:1.5}

/* telefono: le pillole del filtro vanno a capo e restano comode da premere; nella scheda del cliente lo stato
   torna in riga, perche' nell'angolo si sovrapporrebbe al nome */
@media (max-width:600px){
  .vp-filtri{gap:6px}
  a.vp-filtro{padding:7px 14px}
  .az-testa.az-fascia > .vp-stato{position:static;margin:0 0 8px}
}

/* ======================================================================
   MAPPE: ZOOM DA DITO - 23/09/2026 (richiesta dell'utente)
   Su iPad la rotella non c'e' e il pizzico con due dita sul globo era difficile: in alto a destra del globo ci
   sono tre pulsanti tondi da dito (avvicina, allontana, torna al mondo), gli stessi nella mappa dei clienti e in
   quella del registro attivita'. touch-action:none sul globo: il pizzico e il trascinamento vanno al globo, non
   alla pagina (prima Safari a volte ingrandiva la pagina invece del globo).
   ====================================================================== */
.mappa-globo{touch-action:none}
.mappa-zoom{position:absolute;right:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:8px}
.mappa-zoom button{
  display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid var(--spazio-bordo);background:var(--spazio-carta);color:var(--spazio-testo);cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.5);backdrop-filter:blur(6px);transition:border-color .15s,color .15s,background .15s;
}
.mappa-zoom button:hover{border-color:var(--accento);color:var(--accento-testo)}
.mappa-zoom button:active{background:rgba(218,2,25,.35);color:#fff}
.mappa-zoom button:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
/* il terzo pulsante (mondo) e' staccato dai due dello zoom */
.mappa-zoom button:nth-child(3){margin-top:6px}
@media (max-width:600px){
  .mappa-zoom{right:10px;top:10px;gap:6px}
  .mappa-zoom button{width:40px;height:40px}
}

/* ---------------- il cruscotto del cliente (Clienti/Azienda.aspx, variante C del 23/09/2026) ----------------
   Sei riquadri con i numeri che fanno da schede (.cc-tessera, colore in --c) e sotto il pannello della scheda
   scelta (.cc-pannello, gli altri con hidden). Attivita' e' la cronologia di tutto (.cc-crono), con le pillole
   che filtrano per gruppo. Tutto dentro .az-scheda, che e' il contenitore "az" delle container query:
   i riquadri passano a tre per riga quando lo spazio vero e' poco (telefono, iPad in verticale). */
.cc-tessere{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:0 0 18px}
.cc-tessera{position:relative;display:grid;gap:2px;align-content:start;min-width:0;padding:14px 14px 12px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);text-align:left;font:inherit;color:var(--testo);cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s,background-color .15s}
.cc-tessera::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.cc-tessera:hover{transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(0,0,0,.5)}
.cc-tessera:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.cc-tessera .cc-nome{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-tessera .cc-nome svg{flex:none;color:var(--c)}
.cc-tessera .cc-num{margin-top:6px;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cc-tessera .cc-num.testo{font-size:15px;line-height:1.3;font-weight:600;margin-top:8px;letter-spacing:0}
.cc-tessera small{font-size:11.5px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-tessera .cc-nuovi{position:absolute;right:10px;top:12px}
.cc-tessera.attiva{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,var(--pannello));box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.cc-tessera.attiva .cc-nome{color:var(--testo)}
.cc-nuovi{display:inline-block;padding:1px 8px;border-radius:999px;background:#1e9e57;color:#fff;font-size:10.5px;font-weight:700;line-height:1.5;white-space:nowrap}
.cc-t-attivita{--c:#da0219}
.cc-t-opportunita{--c:#3b7bff}
.cc-t-chat{--c:#1e9e57}
.cc-t-materiali{--c:#c2185b}
.cc-t-documenti{--c:#e0b112}
.cc-t-scheda{--c:#6b7a82}
html[data-tema="scuro"] .cc-t-opportunita{--c:#8ab4ff}
html[data-tema="scuro"] .cc-t-chat{--c:#4fd08a}
html[data-tema="scuro"] .cc-t-materiali{--c:#f06292}
html[data-tema="scuro"] .cc-t-documenti{--c:#f2c14e}
html[data-tema="scuro"] .cc-t-scheda{--c:#9fb0b8}

/* testata dei pannelli: titolo, una riga di spiegazione, a destra pulsanti o pillole */
.cc-testa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 20px;border-bottom:1px solid var(--bordo)}
.riquadro .cc-testa h2{margin:0;padding:0;border:0;font-size:14px;font-weight:600}
.cc-testa small{font-size:12.5px;color:var(--tenue)}
.cc-testa .bottone{margin-left:auto}
.cc-filtri{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.cc-filtro{padding:4px 11px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello);font:inherit;font-size:12px;font-weight:600;color:var(--tenue);cursor:pointer}
.cc-filtro:hover{border-color:var(--accento);color:var(--testo)}
.cc-filtro.attiva{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
.cc-vuoto{padding:26px 20px}
.cc-limite{padding:0 20px 14px;margin:0}

/* la cronologia: una linea verticale, un pallino colorato per evento, i giorni come separatori */
.cc-crono{position:relative;display:grid;gap:2px;margin:0;padding:12px 16px 14px 46px;list-style:none}
.cc-crono::before{content:"";position:absolute;left:31px;top:18px;bottom:18px;width:2px;background:var(--bordo)}
.cc-giorno{position:relative;z-index:1;margin:12px 0 2px -26px;padding:3px 0;background:var(--pannello);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--debole)}
.cc-giorno:first-child{margin-top:2px}
.cc-giorno[hidden],.cc-evento[hidden]{display:none}
.cc-evento{position:relative;--c:#6b7a82}
.cc-evento-corpo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 12px;border-radius:10px;color:var(--testo);text-decoration:none}
a.cc-evento-corpo:hover{background:var(--pannello2)}
.cc-pallino{position:absolute;left:-26px;top:9px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pannello);border:2px solid var(--c);color:var(--c)}
.cc-evento-testo{display:grid;gap:2px;min-width:0}
.cc-evento-testo b{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.cc-evento-testo small{font-size:13px;color:var(--tenue);overflow-wrap:anywhere}
.cc-evento time{font-size:12.5px;color:var(--debole);white-space:nowrap}
.cc-g-opportunita{--c:#3b7bff}
.cc-g-cliente{--c:#da0219}
.cc-g-chat{--c:#1e9e57}
.cc-g-materiali{--c:#c2185b}
.cc-g-documenti{--c:#c99a06}
html[data-tema="scuro"] .cc-g-opportunita{--c:#8ab4ff}
html[data-tema="scuro"] .cc-g-cliente{--c:#ff5c6b}
html[data-tema="scuro"] .cc-g-chat{--c:#4fd08a}
html[data-tema="scuro"] .cc-g-materiali{--c:#f06292}
html[data-tema="scuro"] .cc-g-documenti{--c:#f2c14e}

/* elenchi dei pannelli: opportunita', chat, materiali per opportunita', cartelle */
.cc-elenco{display:grid;gap:10px;padding:14px 20px 18px}
.cc-opp{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:12px 14px 12px 20px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello)}
.cc-opp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:var(--raggio) 0 0 var(--raggio);background:var(--tc,#6b7a82)}
.cc-opp-testo{min-width:0}
.cc-opp-riga1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.cc-opp-riga1 .cat-codice{margin-top:0}
.cc-opp-riga1 .tag-categoria{margin:0}
.cc-opp-titolo{display:block;margin-top:5px;font-size:14.5px;font-weight:600;color:var(--testo);text-decoration:none;overflow-wrap:anywhere}
.cc-opp-titolo:hover{color:var(--accento-testo);text-decoration:underline}
.cc-opp small{display:block;margin-top:3px;font-size:12px;color:var(--tenue)}
.cc-opp .azioni-riga{display:flex;gap:6px}
.cc-chat,.cc-mdeal,.cc-cartella{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 14px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);color:var(--testo);text-decoration:none;transition:border-color .15s,background-color .15s}
.cc-chat:hover,.cc-mdeal:hover,.cc-cartella:hover{border-color:var(--c,var(--accento));background:var(--pannello2)}
.cc-chat{--c:#1e9e57}
.cc-chat.nuovi{border-color:color-mix(in srgb,var(--c) 55%,var(--bordo))}
.cc-mdeal{grid-template-columns:auto minmax(0,1fr) auto auto;--c:#c2185b}
.cc-cartella{--c:#c99a06}
.cc-cartella.sotto{margin-left:22px}
.cc-chat-icona,.cc-cartella-icona{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.cc-chat-testo,.cc-mdeal-testo,.cc-cartella-testo{display:grid;gap:2px;min-width:0}
.cc-chat-testo b,.cc-mdeal-testo b,.cc-cartella-testo b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-chat-testo small,.cc-mdeal-testo small,.cc-cartella-testo small{font-size:12px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-chat-lato{display:grid;justify-items:end;gap:4px}
.cc-chat time,.cc-mdeal time{font-size:11.5px;color:var(--debole);white-space:nowrap}
.cc-mdeal .cat-codice{margin-top:0}
.cc-mdeal > svg,.cc-cartella > svg{color:var(--debole)}
.cc-p-materiali > .riquadro:last-child{margin-bottom:20px}

/* spazio vero poco (iPad in verticale): tre riquadri per riga */
@container az (max-width:940px){
  .cc-tessere{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* telefono: riquadri piccoli, niente riga sotto il numero; righe a schede senza scorrere di lato */
@container az (max-width:620px){
  .cc-tessere{gap:7px;margin-bottom:12px}
  .cc-tessera{padding:10px 9px 8px}
  .cc-tessera .cc-nome{font-size:9.5px;letter-spacing:.05em;gap:4px}
  .cc-tessera .cc-nome svg{width:13px;height:13px}
  .cc-tessera .cc-num{font-size:21px;margin-top:4px}
  .cc-tessera .cc-num.testo{font-size:12px;margin-top:5px}
  .cc-tessera small{display:none}
  .cc-tessera .cc-nuovi{right:6px;top:8px;font-size:9px;padding:0 6px}
  .cc-testa{padding:10px 12px}
  .cc-filtri{margin-left:0;width:100%}
  .cc-crono{padding:10px 8px 12px 38px}
  .cc-crono::before{left:23px}
  .cc-evento-corpo{grid-template-columns:minmax(0,1fr);padding:8px 8px}
  .cc-evento time{justify-self:start;font-size:12.5px}
  .cc-elenco{padding:10px 10px 14px}
  .cc-opp{grid-template-columns:minmax(0,1fr);padding:11px 12px 11px 18px}
  .cc-opp .azioni-riga{order:-1;justify-content:flex-end}
  .cc-chat,.cc-cartella{grid-template-columns:auto minmax(0,1fr);padding:10px 12px}
  .cc-chat-lato{grid-column:2;justify-items:start;grid-auto-flow:column;justify-content:start;align-items:center}
  .cc-cartella > svg{display:none}
  .cc-mdeal{grid-template-columns:auto minmax(0,1fr);padding:10px 12px}
  .cc-mdeal time{grid-column:2}
  .cc-mdeal > svg{display:none}
  .cc-cartella.sotto{margin-left:12px}
}
@media (prefers-reduced-motion:reduce){.cc-tessera{transition:none}.cc-tessera:hover{transform:none}}

/* ---------------- elenco clienti: agenti e clienti diretti (23/09/2026, solo utenti interni) ----------------
   Sotto il nome breve una riga di etichette tutte uguali, cambia solo il colore (--ag): viola DIRETTO per i clienti
   agganciati solo a DIREZIONALI, blu una per ogni agente, grigia "senza agente". Sopra l'elenco le pillole del
   filtro per agente, con la tendina di un agente preciso fatta come una pillola. */
table.tabella td .az-agenti{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;min-width:0;white-space:normal;overflow:visible}
.az-agente{--ag:#2f66d6;display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;padding:1px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ag) 40%,transparent);background:color-mix(in srgb,var(--ag) 10%,transparent);color:var(--ag);font-size:10px;font-weight:700;letter-spacing:.07em;line-height:1.5;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.az-agente svg{flex:none}
.az-agente-nome{min-width:0;overflow:hidden;text-overflow:ellipsis}
.az-agente.diretto{--ag:#6f42c1}
.az-agente.nessuno{--ag:#7b8a92}
html[data-tema="scuro"] .az-agente{--ag:#8ab4ff}
html[data-tema="scuro"] .az-agente.diretto{--ag:#c3a6ff}
html[data-tema="scuro"] .az-agente.nessuno{--ag:#9fb0b8}
a.vp-filtro.ag-diretti.attiva{border-color:color-mix(in srgb,#6f42c1 45%,transparent);background:color-mix(in srgb,#6f42c1 10%,var(--pannello));color:#6f42c1}
html[data-tema="scuro"] a.vp-filtro.ag-diretti.attiva{color:#c3a6ff}
a.vp-filtro.ag-con.attiva{border-color:color-mix(in srgb,#3b7bff 45%,transparent);background:color-mix(in srgb,#3b7bff 10%,var(--pannello));color:#2f66d6}
html[data-tema="scuro"] a.vp-filtro.ag-con.attiva{color:#8ab4ff}
select.ag-scelta{max-width:220px;padding:5px 30px 5px 13px;border-radius:999px;border:1px solid var(--bordo);background-color:var(--pannello);color:var(--tenue);font:inherit;font-size:12.5px;font-weight:600;line-height:1.4;cursor:pointer}
select.ag-scelta.attiva{border-color:color-mix(in srgb,#3b7bff 45%,transparent);background-color:color-mix(in srgb,#3b7bff 10%,var(--pannello));color:var(--testo)}
/* la regola generale dei campi (select:focus) cambierebbe lo sfondo: qui resta quello della pillola */
select.ag-scelta:focus{outline:none;box-shadow:none;border-color:var(--accento2);background-color:var(--pannello)}
select.ag-scelta.attiva:focus{background-color:color-mix(in srgb,#3b7bff 10%,var(--pannello))}
@media (max-width:600px){
  select.ag-scelta{max-width:100%;padding:7px 30px 7px 14px;font-size:16px}
}
/* "Azzera filtri" a destra del numero dei risultati: c'e' solo quando ricerca o filtri sono attivi */
a.azzera-filtri{flex:none;padding:3px 10px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello);color:var(--tenue);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
a.azzera-filtri:hover{border-color:var(--accento);color:var(--accento-testo)}

/* ---------------- torna al cliente (23/09/2026) ----------------
   Nella testata delle pagine aperte dal cruscotto di un cliente (?dacliente=, App_Code/RitornoCliente.vb), tra il
   percorso e il titolo: un pulsante ben visibile che riporta alla scheda del cliente, sulla stessa scheda del
   cruscotto. Nell'app installata su iPad il tasto Indietro del browser non c'e'. */
.ritorno-cliente{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:10px 0 8px;padding:7px 16px 7px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accento) 35%,var(--bordo));background:var(--accento-velo);color:var(--accento-testo);font-size:13px;font-weight:600;line-height:1.3;text-decoration:none;transition:border-color .15s,background-color .15s,box-shadow .15s}
.ritorno-cliente svg{flex:none}
.ritorno-cliente span{white-space:nowrap}
.ritorno-cliente b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--testo);font-weight:700}
.ritorno-cliente:hover{border-color:var(--accento);box-shadow:0 6px 16px -10px rgba(218,2,25,.6)}
.ritorno-cliente:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
@media (max-width:600px){
  .ritorno-cliente{display:flex;width:100%;padding:10px 14px 10px 10px;font-size:14px}
}

/* ---------------- dati in aggiornamento (23/09/2026, App_Code/AggiornamentoDati.vb) ----------------
   Popup quando una lettura trova le righe bloccate da un aggiornamento fatto da fuori, e la pagina di cortesia
   quando il blocco fa fallire la richiesta intera. Non e' un errore: bordo e titolo non rossi, icona ambra. */
.dialogo-aggiornamento{border-color:var(--bordo);text-align:center}
.dialogo-aggiornamento h3{color:var(--testo)}
.agg-icona{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:color-mix(in srgb,#e0b112 18%,transparent);color:#a66e14}
html[data-tema="scuro"] .agg-icona{color:#f2c14e}
.agg-testo{margin:0;font-size:15px;font-weight:600;line-height:1.45;color:var(--testo)}
.agg-nota{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--tenue)}
.dialogo-aggiornamento .azioni-form{justify-content:center}
body.pagina-aggiornamento{display:grid;place-items:center;min-height:100vh;margin:0;padding:24px;background:var(--sfondo);color:var(--testo);font-family:var(--carattere)}
.agg-pagina{width:min(480px,100%);padding:30px 28px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello);text-align:center;box-shadow:var(--ombra)}
.agg-pagina h1{margin:0 0 10px;font-size:20px;font-weight:600}
.agg-pagina .azioni-form{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0}

/* ---------------- il quaderno a schizzi del blocco ODM (24/09/2026, js/odm-quaderno.js) ----------------
   Si apre a tutto schermo dalla graffetta ("Fallo adesso" > Quaderno a schizzi). In alto la barra: Chiudi, il
   titolo, gli strumenti (penna, pennarello, matita, evidenziatore, gomma; colore; spessore; annulla e ripeti) e
   Salva in PDF, rosso perche' salva. Sul computer e sui tablet coricati tutto su una riga, sotto i 940px gli
   strumenti scendono su una seconda riga tutta per loro. Il foglio e' carta bianca in tutti e due i temi (e'
   quello che finira' nel PDF); intorno il tavolo. Pulsanti tondi da 36px, 33 e 30 sui telefoni stretti: con il
   dito si prendono bene e la riga degli strumenti non scorre mai di lato. */
html.qs-aperto,html.qs-aperto body{overflow:hidden;overscroll-behavior:none}
.qs-finestra{
  --qs-tavolo:#e3ded2;
  position:fixed;inset:0;z-index:2147483000;
  width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;
  background:var(--qs-tavolo);color:var(--testo);font-family:var(--carattere);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent
}
@supports (height:100dvh){.qs-finestra{height:100dvh}}
html[data-tema="scuro"] .qs-finestra{--qs-tavolo:#08090b}
dialog.qs-finestra:not([open]){display:none}
.qs-finestra::backdrop{background:rgba(4,20,28,.6)}

.qs-barra{position:relative;z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;min-width:0;
  padding:calc(7px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 7px calc(10px + env(safe-area-inset-left));
  background:var(--pannello);border-bottom:1px solid var(--bordo);box-shadow:0 8px 20px -16px rgba(0,0,0,.5)}
.qs-titolo{flex:1 1 150px;min-width:0;height:38px;padding:0 12px;border:1px solid transparent;border-radius:10px;
  background:var(--pannello2);color:var(--testo);font:inherit;font-size:16px;font-weight:700;
  text-overflow:ellipsis;-webkit-user-select:text;user-select:text}
.qs-titolo:hover{border-color:var(--bordo)}
.qs-titolo:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.qs-strumenti{flex:none;display:flex;align-items:center;gap:6px}
.qs-gruppo{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--bordo);border-radius:999px;background:var(--pannello)}

.qs-b{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:36px;height:36px;padding:0 11px;
  border:1px solid transparent;border-radius:999px;background:transparent;color:var(--testo);font:inherit;font-size:13.5px;font-weight:600;
  white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background-color .15s,color .15s,border-color .15s,filter .15s}
.qs-gruppo .qs-b{width:36px;padding:0}
.qs-b:hover{background:var(--pannello2);color:var(--accento-testo)}
.qs-b:focus-visible{outline:2px solid var(--accento2);outline-offset:1px}
.qs-b:disabled{opacity:.3;cursor:default;background:transparent;color:var(--testo)}
.qs-b svg{flex:none}
.qs-b.acceso{background:var(--accento-velo);border-color:color-mix(in srgb,var(--accento) 50%,transparent);color:var(--accento-testo)}
/* sotto ogni strumento il suo colore: si vede a colpo d'occhio con che cosa si scrivera' */
.qs-attrezzo:not([data-a="gomma"])::after{content:"";position:absolute;left:50%;bottom:3px;width:14px;height:3px;border-radius:2px;background:var(--c,currentColor);transform:translateX(-50%)}
.qs-chiudi{border-color:var(--bordo)}
.qs-salva{padding:0 16px;background:var(--accento);color:#fff}
.qs-salva:hover,.qs-salva:disabled{background:var(--accento);color:#fff}
.qs-salva:hover{filter:brightness(1.08)}
.qs-pallino{display:block;width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 2px var(--pannello),0 0 0 3px var(--bordo-forte)}
.qs-campione{display:block;border-radius:50%;background:var(--c,currentColor)}
.qs-campione.qs-gomma,.qs-spessore i.qs-gomma{background:#fff !important;border:1.5px dashed #8b9aa1}

/* i pannelli dei colori e degli spessori: sotto il pulsante che li apre (la posizione la scrive lo script) */
.qs-pop{position:fixed;z-index:6;padding:10px 12px 12px;border:1px solid var(--bordo);border-radius:14px;background:var(--pannello);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);animation:qs-appare .14s ease-out}
@keyframes qs-appare{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.qs-pop-titolo{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue)}
.qs-colori{display:grid;grid-template-columns:repeat(5,36px);gap:9px}
.qs-colore{position:relative;display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;
  background:var(--c);cursor:pointer;touch-action:manipulation;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.qs-colore.acceso{box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 0 0 2px var(--pannello),0 0 0 4px var(--testo)}
.qs-colore:focus-visible{outline:2px solid var(--accento2);outline-offset:4px}
.qs-altro{background:conic-gradient(#e53935,#fdd835,#43a047,#1e88e5,#8e24aa,#e53935);color:#fff}
.qs-altro.acceso{background:var(--c)}
.qs-altro svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))}
.qs-altro input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.qs-spessori{display:flex;gap:7px}
.qs-spessore{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--bordo);border-radius:12px;background:#fff;cursor:pointer;touch-action:manipulation}
.qs-spessore i{display:block;border-radius:50%;background:#16181d}
.qs-spessore.acceso{border-color:var(--accento);box-shadow:0 0 0 3px var(--accento-velo)}
.qs-spessore:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}

/* il tavolo e il foglio con i suoi tre livelli (carta, tratto vivo, inchiostro) */
.qs-spazio{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;touch-action:none;padding-bottom:env(safe-area-inset-bottom)}
.qs-foglio{position:relative;overflow:hidden;background:#fff;border-radius:3px;touch-action:none;cursor:crosshair;
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 14px 34px -14px rgba(0,0,0,.4)}
.qs-foglio canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.qs-carta{z-index:0}
.qs-vivo{z-index:1}
.qs-inchiostro{z-index:2}
.qs-vivo.qs-sopra{z-index:3}
.qs-foglio.con-gomma{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='9' fill='rgba(255,255,255,.5)' stroke='%2310222b' stroke-width='1.4'/%3E%3C/svg%3E") 12 12,cell}

.qs-errore{position:absolute;top:12px;left:50%;z-index:5;width:max-content;max-width:calc(100% - 24px);margin:0;padding:9px 14px;
  transform:translateX(-50%);border:1px solid var(--pericolo-bordo);border-radius:10px;background:var(--pannello);color:var(--pericolo);
  font-size:13.5px;font-weight:600;line-height:1.4;box-shadow:var(--ombra)}
.qs-avviso-penna{position:absolute;top:12px;left:50%;z-index:5;width:max-content;max-width:calc(100% - 24px);margin:0;padding:8px 16px;
  transform:translateX(-50%);border-radius:999px;background:rgba(16,34,43,.92);color:#fff;font-size:13px;line-height:1.35;text-align:center;
  pointer-events:none;animation:qs-appare .2s ease-out}

/* la pillola delle pagine: galleggia in basso e mentre si scrive si fa da parte */
.qs-pagine{position:absolute;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:4;display:flex;align-items:center;gap:2px;padding:3px;
  transform:translateX(-50%);border:1px solid var(--bordo);border-radius:999px;background:color-mix(in srgb,var(--pannello) 94%,transparent);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.55);transition:opacity .2s}
.qs-pagine .qs-b{height:34px;min-width:34px}
.qs-pagine .qs-b:not(.qs-nuova){width:34px;padding:0}
.qs-numero{min-width:6.6em;padding:0 4px;text-align:center;font-size:12.5px;color:var(--tenue);font-variant-numeric:tabular-nums;white-space:nowrap}
.qs-finestra.qs-scrive .qs-pagine{opacity:.16;pointer-events:none}
.qs-finestra.qs-inizio .qs-barra,.qs-finestra.qs-inizio .qs-spazio{visibility:hidden}

/* l'apertura: titolo, carta, e la bozza non salvata da riprendere */
.qs-avvio{position:absolute;inset:0;z-index:8;display:grid;place-items:center;overflow:auto;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));background:var(--qs-tavolo)}
.qs-avvio-scheda{width:min(460px,100%);padding:22px 22px 18px;border:1px solid var(--bordo);border-radius:16px;background:var(--pannello);box-shadow:var(--ombra)}
.qs-avvio-testa{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.qs-avvio-icona{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:color-mix(in srgb,#8d5b2e 14%,var(--pannello));color:#8d5b2e}
html[data-tema="scuro"] .qs-avvio-icona{color:#d9a46f}
.qs-avvio-testa h3{margin:3px 0 4px;font-size:18px;font-weight:700;line-height:1.25}
.qs-avvio-testa p{margin:0;font-size:13.5px;line-height:1.5;color:var(--tenue)}
.qs-etichetta{display:block;margin:16px 0 7px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue)}
.qs-avvio-titolo{width:100%;height:46px;padding:0 14px;border:1px solid var(--bordo-forte);border-radius:10px;background:var(--campo-attivo);color:var(--testo);
  font:inherit;font-size:16px;font-weight:600;-webkit-user-select:text;user-select:text}
.qs-avvio-titolo:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.qs-carte{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qs-carta-scelta{display:grid;justify-items:center;gap:7px;padding:12px 6px 10px;border:2px solid var(--bordo);border-radius:12px;background:var(--pannello);
  color:var(--tenue);font:inherit;font-size:13px;font-weight:600;cursor:pointer;touch-action:manipulation;transition:border-color .15s,background-color .15s,color .15s}
.qs-carta-scelta:hover{border-color:var(--accento)}
.qs-carta-scelta:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.qs-carta-scelta.acceso{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
.qs-carta-mini{display:grid;place-items:center;width:46px;height:52px;border-radius:6px;background:#fff;color:#8b9aa1;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.qs-carta-scelta.acceso .qs-carta-mini{color:#da0219}
.qs-avvio-azioni{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.qs-avvio-azioni .bottone{min-height:42px;padding-left:20px;padding-right:20px}
.qs-bozza{margin:14px 0 2px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--blu) 30%,var(--bordo));border-left:4px solid var(--blu);border-radius:10px;
  background:color-mix(in srgb,var(--blu) 7%,var(--pannello))}
.qs-bozza-testo b{display:block;margin-bottom:2px;font-size:14px}
.qs-bozza-testo span{display:block;font-size:13px;line-height:1.45;color:var(--tenue);overflow-wrap:anywhere}
.qs-bozza-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* il salvataggio: sopra tutto, con la percentuale dell'invio */
.qs-attesa{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:color-mix(in srgb,var(--pannello) 80%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.qs-attesa p{margin:0;font-size:14.5px;font-weight:600;color:var(--testo);font-variant-numeric:tabular-nums}
.qs-rotella{width:38px;height:38px;border-radius:50%;border:3px solid var(--bordo);border-top-color:var(--accento);animation:gira .8s linear infinite}

/* la voce della graffetta: un documento con il suo colore, quello del cartone dei quaderni */
.odm-t-documento.odm-k-quaderno{--fc:#8d5b2e}
/* sulla riga del blocco il quaderno e' una scansione (per la lettura del testo), ma con il colore e l'icona suoi */
.odm-riga.odm-quaderno{--fc:#8d5b2e}
html[data-tema="scuro"] .odm-riga.odm-quaderno{--fc:#d9a46f}
/* la miniatura del quaderno sulla riga: la prima pagina disegnata, su carta bianca in tutti e due i temi, con la
   matita nell'angolo (si riprende per modificarlo) */
.odm-riga-icona.odm-miniatura{position:relative;width:64px;height:64px;background:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--fc) 55%,transparent)}
.odm-miniatura-img{display:block;width:100%;height:100%;border-radius:10px}
.odm-anteprima-quaderno{width:auto;max-width:100%;max-height:340px;object-fit:contain;background:#fff;box-shadow:0 6px 18px -12px rgba(0,0,0,.45)}
.odm-miniatura-segno{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--fc);color:#fff;box-shadow:0 0 0 2px var(--pannello)}
/* il tipo di oggetto ODM, sempre in vista sulla riga (24/09/2026): la pillola con il colore della famiglia */
.odm-tag{display:inline-flex;align-items:center;min-height:18px;padding:1px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--fc) 32%,transparent);background:color-mix(in srgb,var(--fc) 11%,transparent);color:var(--fc);font-size:10.5px;font-weight:700;letter-spacing:.03em;line-height:1.2;white-space:nowrap}
html[data-tema="scuro"] .odm-tag{color:color-mix(in srgb,var(--fc) 55%,#fff)}

@media (max-width:940px){
  .qs-chiudi{order:1}
  .qs-titolo{order:2;flex:1 1 0;min-width:70px}
  .qs-salva{order:3}
  .qs-strumenti{order:4;flex:1 1 100%;justify-content:center}
}
@media (max-width:420px){
  .qs-barra{gap:6px;padding-left:calc(6px + env(safe-area-inset-left));padding-right:calc(6px + env(safe-area-inset-right))}
  .qs-strumenti{gap:4px}
  .qs-gruppo .qs-b{width:33px;min-width:33px;height:34px}
  .qs-salva{padding:0 12px}
  .qs-nuova span{display:none}
  .qs-pagine .qs-nuova{width:34px;padding:0}
  .qs-avvio-scheda{padding:18px 16px 16px}
}
@media (max-width:379px){
  .qs-chiudi span{display:none}
  .qs-chiudi{width:36px;padding:0}
  .qs-gruppo .qs-b{width:30px;min-width:30px}
}
@media (prefers-reduced-motion:reduce){
  .qs-rotella{animation-duration:2.4s}
  .qs-pop,.qs-avviso-penna{animation:none}
}

/* ---------------- la scheda dell'agente (Clienti/Agente.aspx, 25/09/2026) ----------------
   La stessa scheda del cliente (az-testa, cc-tessere, cc-pannello, cc-crono) vista dal lato dell'agente: otto
   riquadri invece di sei (Clienti e Periodo in piu', teal e viola), l'intestazione con la fascia del ruolo (rossa
   il supervisore, grigia l'agente, come nella pagina Agenti) e l'etichetta del ruolo appoggiata sulla fascia.
   Tutte le regole nuove hanno il prefisso as-; il contenitore az delle container query e' .az-scheda. */
.as-tessere{grid-template-columns:repeat(8,minmax(0,1fr))}
/* otto riquadri stanno stretti: il nome un filo piu' piccolo e meno spaziato, cosi' OPPORTUNITA' non si taglia */
.as-tessere .cc-tessera .cc-nome{font-size:10.5px;letter-spacing:.05em;gap:6px}
.as-tessere .cc-tessera{padding:14px 12px 12px}
.cc-t-clienti{--c:#0f8f8a}
.cc-t-periodo{--c:#6d4fc4}
html[data-tema="scuro"] .cc-t-clienti{--c:#3cc4be}
html[data-tema="scuro"] .cc-t-periodo{--c:#a58cf0}
/* nella cronologia dell'agente gli eventi dei clienti hanno il teal del loro riquadro (nella scheda del cliente restano rossi) */
.as-scheda .cc-g-cliente{--c:#0f8f8a}
html[data-tema="scuro"] .as-scheda .cc-g-cliente{--c:#3cc4be}

/* il ruolo sulla fascia: bianco sul rosso del supervisore, testo sul grigio dell'agente */
.az-testa.az-fascia > .stato-cliente.as-ruolo.sup{color:#fff}
.az-testa.az-fascia > .stato-cliente.as-ruolo.age{color:var(--testo)}
.as-testa .az-luogo + .az-luogo{margin-top:4px}
.as-testa .az-sopra .badge{margin:0}
.badge.as-cessato{border-color:var(--pericolo-bordo);color:var(--pericolo)}


/* i clienti: una scheda per cliente con la fascia dello stato (verde cliente, ambra prospect) */
.as-cliente{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:12px 14px 12px 20px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello)}
.as-cliente::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;border-radius:var(--raggio) 0 0 var(--raggio);background:var(--fascia-sfumata)}
.as-cliente[hidden]{display:none}
.as-cliente-testo{min-width:0}
.as-cliente .stato-cliente{margin-left:0}
.as-cliente small{display:block;margin-top:3px;font-size:12px;color:var(--tenue)}
.as-cliente .azioni-riga{display:flex;gap:6px}

/* il periodo: le pillole dei sei periodi, i numeri delle statistiche, due classifiche affiancate e l'elenco */
.as-periodi{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px 0}
.as-periodi .cc-filtro{text-decoration:none}
.as-numeri{padding:14px 20px 0}
.as-numeri .graf-numeri{margin-bottom:6px}
.as-periodo-vuoto{padding:14px 20px 20px}
.as-classifiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:6px 20px 16px}
.as-classifica{min-width:0;padding:14px 16px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello)}
.as-classifica h3{margin:0 0 10px;font-size:13px;font-weight:600}
.as-classifiche:empty{display:none}
.as-sotto-testa{border-top:1px solid var(--bordo)}

/* spazio vero poco (iPad in verticale): quattro riquadri per riga, classifiche una sotto l'altra */
@container az (max-width:940px){
  .as-classifiche{grid-template-columns:minmax(0,1fr)}
}
/* telefono: riquadri a quattro per riga (piccoli, come quelli del cliente), schede dei clienti senza scorrere di lato */
@container az (max-width:620px){
  .as-tessere .cc-tessera{padding:10px 9px 8px}
  .as-tessere .cc-tessera .cc-nome{font-size:9.5px;letter-spacing:.04em;gap:4px}
  .as-cliente{grid-template-columns:minmax(0,1fr);padding:11px 12px 11px 18px}
  .as-cliente .azioni-riga{order:-1;justify-content:flex-end}
  .as-periodi{padding:10px 12px 0}
  .as-numeri{padding:12px 12px 0}
  .as-classifiche{padding:6px 12px 12px}
}

/* la Scheda dell'agente, variante C (25/09/2026): un riquadro solo a tre colonne con le righe allineate (Rapporto,
   Provvigioni, Portafoglio clienti) e sotto l'organigramma della struttura accanto a contatti e azienda */
.as-dati{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}
.as-col{padding:18px 22px 20px;border-left:1px solid var(--bordo);--c:#3b7bff}
.as-col:first-child{border-left:0}
.as-col-provvigioni{--c:#e0b112}
.as-col-portafoglio{--c:#0f8f8a}
html[data-tema="scuro"] .as-col-rapporto{--c:#8ab4ff}
html[data-tema="scuro"] .as-col-provvigioni{--c:#f2c14e}
html[data-tema="scuro"] .as-col-portafoglio{--c:#3cc4be}
.as-col h3{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.04em}
.as-col h3 span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c)}
.as-col dl{margin:0}
.as-col dl > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--bordo)}
.as-col dl > div:last-child{border-bottom:0}
.as-col dt{font-size:13px;color:var(--tenue)}
.as-col dd{margin:0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.as-col dd .badge{margin:0 0 0 4px}
.as-col .grande dd{font-size:24px;letter-spacing:-.02em}
.as-col .totale{margin-top:4px;border-top:1px solid var(--bordo-forte)}

.as-scheda-sotto{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
.as-voci{display:grid;gap:14px;margin:0;padding:16px 20px 20px}
.as-voci dt{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.as-voci dd{margin:4px 0 0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.as-voci dd small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--tenue)}

/* l'organigramma: il supervisore sopra, l'agente della scheda evidenziato, i subagenti sotto (al massimo 4 per riga,
   --n = quanti nella prima: il filo orizzontale va dal centro del primo al centro dell'ultimo) */
.as-albero{display:grid;justify-items:center;padding:22px 20px 24px}
.as-fila{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.as-nodo{display:flex;align-items:center;gap:11px;min-width:0;max-width:100%;padding:10px 16px 10px 10px;border:1px solid var(--bordo);border-radius:14px;background:var(--pannello);color:var(--testo);text-decoration:none}
a.as-nodo:hover{border-color:var(--accento);background:var(--pannello2)}
.as-nodo .sigla{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--bordo-forte);color:#fff;font-size:12px;font-weight:700}
.as-nodo-testo{min-width:0}
.as-nodo b{display:block;font-size:14px;overflow-wrap:anywhere}
.as-nodo small{display:block;margin-top:1px;font-size:11.5px;color:var(--tenue)}
.as-nodo.sopra .sigla{background:var(--accento)}
.as-nodo.lui{border:2px solid var(--accento);box-shadow:0 0 0 4px color-mix(in srgb,var(--accento) 14%,transparent);padding:12px 18px 12px 12px}
.as-nodo.lui .sigla{width:44px;height:44px;background:var(--accento);font-size:14px}
.as-nodo.lui b{font-size:16px}
.as-filo{display:block;width:2px;height:22px;background:var(--bordo-forte)}
.as-rami{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:22px 12px;width:100%;margin-top:22px;padding-top:22px}
.as-rami::before{content:"";position:absolute;top:0;left:calc(50% / var(--n));right:calc(50% / var(--n));height:2px;background:var(--bordo-forte)}
.as-rami::after{content:"";position:absolute;top:-22px;left:50%;width:2px;height:22px;margin-left:-1px;background:var(--bordo-forte)}
.as-rami > div{position:relative;display:flex;justify-content:center;min-width:0}
.as-rami > div::before{content:"";position:absolute;top:-22px;left:50%;width:2px;height:22px;margin-left:-1px;background:var(--bordo-forte)}
.as-rami > div:nth-child(n+5)::before{display:none}
.as-rami .as-nodo{width:100%}
.as-solo{margin:14px 0 0;font-size:12.5px;color:var(--tenue)}

@container az (max-width:940px){
  .as-scheda-sotto{grid-template-columns:minmax(0,1fr)}
}
@container az (max-width:620px){
  .as-dati{grid-template-columns:minmax(0,1fr)}
  .as-col{border-left:0;border-top:1px solid var(--bordo);padding:14px 16px 16px}
  .as-col:first-child{border-top:0}
  .as-albero{padding:16px 12px 18px}
  .as-rami{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:14px;padding-top:0}
  .as-rami::before,.as-rami::after,.as-rami > div::before{display:none}
  .as-voci{padding:14px 16px 16px}
}

/* ---------------- la ricerca nella scheda del cliente e dell'agente (25/09/2026) ----------------
   Il campo sopra i riquadri: mentre si scrive i pannelli mostrano solo gli oggetti trovati (sc-fuori sugli altri) e
   i riquadri contano solo quelli (sc-trovati con il bordo del loro colore, sc-zero spenti; sc-spenta quelli dove non
   c'e' niente da cercare). I clienti dell'agente oltre i primi (as-oltre) compaiono solo se la ricerca li trova.
   Script: js/cliente-cruscotto.js. */
.sc-barra{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 14px}
.sc-campo{position:relative;display:flex;align-items:center;flex:1 1 360px;max-width:560px;margin:0}
.sc-campo svg{position:absolute;left:14px;color:var(--tenue);pointer-events:none}
.sc-campo input{width:100%;height:42px;padding:0 14px 0 42px;border:1px solid var(--bordo);border-radius:999px;background:var(--pannello);color:var(--testo);font:inherit;font-size:14.5px}
.sc-campo input::placeholder{color:var(--debole)}
.sc-campo input:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.sc-esito{font-size:13px;color:var(--tenue)}
.sc-barra.sc-con-testo .sc-esito{color:var(--testo);font-weight:600}
/* la ricerca profonda in corso (il server cerca dentro gli oggetti): la lente pulsa e la scritta lo dice */
.sc-barra.sc-profonda .sc-campo svg{color:var(--accento);animation:sc-pulsa 1s ease-in-out infinite}
@keyframes sc-pulsa{50%{opacity:.3}}
.sc-fuori{display:none !important}
.cc-tessera.sc-zero,.cc-tessera.sc-spenta{opacity:.45}
.cc-tessera.sc-trovati{border-color:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 24%,transparent)}
.cc-tessera.sc-trovati.attiva{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.sc-nessuno[hidden]{display:none}
.as-cliente.as-oltre{display:none}
.az-scheda.sc-attiva .as-cliente.as-oltre:not(.sc-fuori){display:grid}
.az-scheda.sc-attiva .as-limite-cerca{display:none}
@container az (max-width:620px){
  .sc-barra{margin-bottom:10px}
  .sc-campo{flex-basis:100%;max-width:none}
  /* 16px: sotto, l'iPhone ingrandisce la pagina quando si tocca il campo */
  .sc-campo input{height:44px;font-size:16px}
}

/* ======================================================================================================================
   ELENCHI A SCHEDE STACCATE, ALLEGATI A MATTONELLE, PANNELLO "AGGIUNGI" A TESSERE COLORATE (25/09/2026).
   Richiesta dell'utente: "i bordi non sono ben marcati, si fa fatica a vedere dove finisce una parte"; l'oggetto ODM
   "piu' bello, con i pulsanti in ordine e ben visibili"; il pannello dove si sceglie cosa allegare "con una grafica
   WOW e bordi visibili di altro colore". Scelte fatte sulle anteprime delle pagine vere:
     - elenchi: variante C, ogni riga una scheda staccata (bordo forte, filo d'ombra, spazio fra una e l'altra);
     - blocco allegati: variante C, mattonelle in griglia con la barra dei pulsanti con il nome, nell'ordine
       Apri, Dettagli, Scarica, Modifica (js/odm.js, testaRiga) e il cestino piccolo nell'angolo;
     - pannello Aggiungi: variante A, tessere grandi con il colore del loro tipo e il pannello bordato di blu.
   ====================================================================================================================== */

/* ---------- elenchi: ogni riga una scheda (clienti, opportunita', agenti) ----------
   Sotto i 900px di contenitore queste tabelle erano gia' schede (@container (max-width:900px) piu' su); qui lo
   diventano anche sopra, restando tabelle: le colonne restano allineate. */
@container (min-width:901px){
  table.tabella.t-deal,table.ag-tabella{border-collapse:separate;border-spacing:0 8px}
  table.tabella.t-deal thead th,table.ag-tabella thead th{border-bottom:none}
  table.tabella.t-deal tbody tr,table.ag-tabella tbody tr{
    background-color:var(--pannello2);outline:1px solid var(--bordo-forte);outline-offset:-1px;box-shadow:0 3px 10px -4px rgba(0,0,0,.45)}
  table.tabella.t-deal td,table.ag-tabella td{border-bottom:none}
}
/* le stesse schede nei riquadri della scheda del cliente e di quella dell'agente */
.cc-elenco{gap:12px}
.cc-opp,.cc-chat,.cc-mdeal,.cc-cartella,.as-cliente,.az-persona{border-color:var(--bordo-forte);background:var(--pannello2);box-shadow:0 3px 10px -4px rgba(0,0,0,.45)}

/* ---------- blocco allegati: le mattonelle ----------
   Tutte le righe del blocco, tranne quelle del pannello dell'articolo (.art-odm), che e' stretto e resta a righe. */
.odm-righe:not(.art-odm .odm-righe){display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;align-items:start}
.odm-righe:not(.art-odm .odm-righe) > .odm-riga{position:relative;margin:0;padding:14px 14px 0;border:1px solid var(--bordo-forte);border-top:4px solid var(--fc);
  border-radius:12px;background:var(--pannello2);box-shadow:0 4px 12px -4px rgba(0,0,0,.45)}
.odm-righe:not(.art-odm .odm-righe) > .odm-riga:hover{border-color:var(--bordo-forte);border-top-color:var(--fc)}
/* aperta (i dettagli sotto): prende tutta la larghezza, come una riga */
.odm-righe:not(.art-odm .odm-righe) > .odm-riga.odm-aperto{grid-column:1 / -1;border-color:var(--accento);border-top-color:var(--accento)}
.odm-righe:not(.art-odm .odm-righe) .odm-riga-testa{flex-wrap:wrap;gap:10px 12px;align-items:flex-start}
.odm-righe:not(.art-odm .odm-righe) .odm-riga-testo{flex:1 1 150px;padding-right:34px}
.odm-righe:not(.art-odm .odm-righe) .odm-riga-testo > b{font-size:14.5px;white-space:normal;overflow-wrap:anywhere}
/* la barra dei pulsanti in fondo alla mattonella: larghi uguali, icona e nome */
.odm-righe:not(.art-odm .odm-righe) .odm-riga-azioni{order:5;display:flex;gap:0;width:calc(100% + 28px);margin:12px -14px 0;padding:0;justify-content:stretch;border-top:1px solid var(--bordo)}
.odm-righe:not(.art-odm .odm-righe) .odm-riga-azioni .icona-riga{flex:1;width:auto;height:54px;border:none;border-radius:0;background:transparent;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;color:var(--ic)}
.odm-righe:not(.art-odm .odm-righe) .odm-riga-azioni .icona-riga + .icona-riga{border-left:1px solid var(--bordo)}
.odm-righe:not(.art-odm .odm-righe) .odm-riga-azioni .icona-riga:hover,
.odm-righe:not(.art-odm .odm-righe) .odm-riga-azioni .icona-riga.attiva{background:color-mix(in srgb,var(--ic) 14%,transparent)}
.odm-righe:not(.art-odm .odm-righe) .odm-riga-azioni .icona-riga:first-child{border-bottom-left-radius:11px}
/* il cestino: piccolo, grigio, nell'angolo in alto a destra, lontano dagli altri */
.odm-righe:not(.art-odm .odm-righe) .odm-riga-azioni .elimina{position:absolute;top:10px;right:10px;flex:none;width:30px;height:30px;border:1px solid var(--bordo);border-radius:8px}
/* il nome sotto l'icona: solo nelle mattonelle (nel pannello dell'articolo restano le icone) */
.odm-az-nome{display:none}
.odm-righe:not(.art-odm .odm-righe) .odm-az-nome{display:block;font-size:11.5px;font-weight:600;line-height:1}

/* ---------- pannello "Aggiungi": tessere colorate ----------
   Ogni tipo ha il suo colore (--fc, lo stesso delle righe): bordo pieno, sfumatura, icona su un quadrato colorato. */
.odm-menu-titolo{display:inline-block;margin:0 0 12px;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--accento2) 22%,transparent);color:var(--testo);font-weight:700;letter-spacing:.12em}
.odm-tipi + .odm-menu-titolo{margin-top:18px}
.odm-tipi{gap:12px}
.odm-tipi .scheda-pagina{flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border:2px solid color-mix(in srgb,var(--fc,#5c6b74) 80%,transparent);border-radius:14px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--fc,#5c6b74) 24%,transparent),transparent 65%),var(--pannello)}
.odm-tipi .scheda-pagina-icona{width:46px;height:46px;border-radius:14px;background:var(--fc,#5c6b74);color:#04141c;box-shadow:0 6px 16px color-mix(in srgb,var(--fc,#5c6b74) 45%,transparent)}
.odm-tipi .scheda-pagina-testo b{font-size:15px}
.odm-tipi .scheda-pagina-testo small{font-size:12px;line-height:1.35;color:var(--tenue)}
.odm-tipi .scheda-pagina:hover{transform:translateY(-3px);box-shadow:0 10px 26px color-mix(in srgb,var(--fc,#5c6b74) 40%,transparent);border-color:var(--fc,#5c6b74)}
.odm-tipi .scheda-pagina[disabled]:hover{transform:none;box-shadow:none;border-color:color-mix(in srgb,var(--fc,#5c6b74) 80%,transparent)}
.odm-trascina{justify-content:center;margin-top:16px;padding:14px;border:2px dashed color-mix(in srgb,var(--accento2) 75%,transparent);border-radius:14px;color:var(--testo);
  background:color-mix(in srgb,var(--accento2) 8%,transparent)}
/* sul computer: il pannello piu' largo, bordato di blu con un alone, tre tessere per riga (sul telefono resta il
   foglio che sale dal basso, con due tessere per riga) */
@media (min-width:720px){
  .odm-pannello-tipi:not(.art-odm .odm-pannello-tipi){width:min(700px,92vw);padding:18px 18px 16px;border:2px solid color-mix(in srgb,var(--accento2) 80%,transparent);border-radius:18px;
    background:linear-gradient(180deg,var(--pannello2),var(--pannello));box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 6px color-mix(in srgb,var(--accento2) 14%,transparent)}
  .odm-pannello-tipi:not(.art-odm .odm-pannello-tipi) .odm-tipi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .odm-pannello-tipi:not(.art-odm .odm-pannello-tipi) .odm-tipi .scheda-pagina{min-height:124px}
}
@media (max-width:719px){
  .odm-pannello-tipi:not(.art-odm .odm-pannello-tipi){border-top:2px solid color-mix(in srgb,var(--accento2) 80%,transparent)}
}

/* ======================================================================================================================
   CONTATTI PUBBLICATI (25/09/2026): l'interruttore "Pubblico" accanto a ogni recapito nella modifica del cliente (solo
   personale EFFEPI, js/anagrafica-modifica.js) e i numeri della sezione Setup > Integrazioni GEA.
   ====================================================================================================================== */
.am-pagina .am-rec.con-pubblica{grid-template-columns:148px minmax(0,1fr) 44px 44px}
/* solo il globo, come le altre icone della riga: verde = pubblicato, rosso = non pubblicato (richiesta dell'utente,
   anche sul computer "cosi' tutto e' allineato"). Il nome dello stato resta per chi legge con la voce e nel title */
.am-pagina .am-pubblica{--ic:var(--ic-rosso);display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--ic) 55%,transparent);background:color-mix(in srgb,var(--ic) 14%,var(--pannello));color:var(--ic);
  cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.am-pagina .am-pubblica.on{--ic:var(--ic-verde)}
.am-pagina .am-pubblica:hover{border-color:var(--ic);background:color-mix(in srgb,var(--ic) 24%,var(--pannello))}
.am-pagina .am-pubblica:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.am-pagina .am-pubblica svg{width:19px;height:19px}
.am-pagina .am-pubblica .n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@container am (max-width:700px){
  .am-pagina .am-rec.con-pubblica{grid-template-columns:52px minmax(0,1fr) 44px 44px}
}
/* i numeri di Setup > Integrazioni GEA */
.gea-conti{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.gea-conto{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2)}
.gea-conto small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.gea-conto b{font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--testo)}
.gea-conto span{font-size:12px;color:var(--tenue)}
.gea-conto.gea-si{border-color:color-mix(in srgb,var(--ic-verde) 55%,transparent);background:color-mix(in srgb,var(--ic-verde) 10%,var(--pannello2))}
.gea-conto.gea-si b{color:var(--ic-verde)}
.gea-conto.gea-no{border-color:color-mix(in srgb,var(--ic-grigio) 55%,transparent)}

/* ======================================================================================================================
   PAGINA AGENTI, VARIANTE C "NOME A COLORI" (25/09/2026, richiesta dell'utente: "i caratteri sono troppo piccoli, il
   nome va valorizzato"; scelta fra tre anteprime). Nome grande (18,5px), quello dei supervisori nel rosso del portale,
   degli agenti in bianco; email in azzurro come un collegamento; colonne in grassetto a 15px; titolo del gruppo a 20px
   nel rosso del portale.
   ====================================================================================================================== */
table.ag-tabella{font-size:15px}
table.ag-tabella th{font-size:11.5px}
table.ag-tabella td{padding-top:13px;padding-bottom:13px;font-weight:600}
.ag-nome .sigla{width:40px;height:40px;font-size:13.5px}
.ag-nome b{font-size:18.5px;font-weight:700}
table.ag-tabella tbody tr.s-supervisore .ag-nome > div > b{color:var(--accento-testo)}
.ag-nome small{font-size:13.5px;color:var(--ic-blu);font-weight:500}
table.ag-tabella .badge{font-size:12.5px;padding:3px 10px}
.ag-testa b{font-size:20px;font-weight:700;color:var(--accento-testo)}
.ag-testa small{font-size:13px}

/* ======================================================================================================================
   L'EDITOR DELLE NOTE (25/09/2026, js/editor-note.js): Appunti del blocco allegati, nota dell'opportunita' stampata nel
   PDF, nota dell'articolo. Lo stesso aspetto dell'editor degli avvisi (.editor), piu' compatto; pulsanti da 36px e 40px
   sul telefono (il dito). L'area cresce con il testo fino a un massimo, poi scorre.
   ====================================================================================================================== */
.editor-nota{border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--campo-attivo);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.editor-nota.fuoco,.editor-nota:focus-within{border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.editor-nota-strumenti{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:5px 6px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.editor-nota-strumenti button{display:grid;place-items:center;min-width:36px;height:36px;padding:0 8px;border:1px solid transparent;border-radius:6px;background:transparent;
  color:var(--tenue);font:inherit;font-size:15px;cursor:pointer;touch-action:manipulation}
.editor-nota-strumenti button:hover{background:var(--pannello);color:var(--testo);border-color:var(--bordo)}
.editor-nota-strumenti button.attivo{background:var(--accento-velo);color:var(--accento-testo);border-color:var(--accento)}
.editor-nota-strumenti button:focus-visible{outline:2px solid var(--accento2);outline-offset:1px}
.editor-nota-strumenti .separa{align-self:stretch;width:1px;margin:4px 3px;background:var(--bordo)}
.editor-nota-area{position:relative;min-height:120px;max-height:50vh;overflow-y:auto;padding:12px 14px;outline:none;font-size:15px;line-height:1.5;color:var(--testo);overflow-wrap:anywhere}
.editor-nota-area p{margin:0 0 .5em}
.editor-nota-area p:last-child{margin-bottom:0}
.editor-nota-area ul,.editor-nota-area ol{margin:.2em 0 .6em;padding-left:1.4em}
.editor-nota.vuota .editor-nota-area::before{content:attr(data-segnaposto);position:absolute;color:var(--debole);pointer-events:none}
@media (pointer:coarse){
  .editor-nota-strumenti button{min-width:40px;height:40px}
  /* 16px: sotto, l'iPhone ingrandisce la pagina quando si tocca il campo */
  .editor-nota-area{font-size:16px}
}
/* il testo formattato mostrato (scheda dell'opportunita', lettura degli Appunti): stessi paragrafi ed elenchi */
.nota-formattata p{margin:0 0 .5em}
.nota-formattata p:last-child{margin-bottom:0}
.nota-formattata ul,.nota-formattata ol{margin:.2em 0 .6em;padding-left:1.4em}

/* ======================================================================================================================
   GLI APPUNTI DEL BLOCCO ALLEGATI CON L'EDITOR DELLE NOTE (25/09/2026, js/odm.js: campoNota e riquadroNota).
   Sta DOPO la sezione dell'editor delle note (.editor-nota e .nota-formattata)
   e dopo le regole .odm-testo del blocco.
   - La nota formattata in sola lettura sta nel riquadro dell'anteprima (.odm-testo), che va a capo con gli a capo del
     testo (white-space:pre-wrap): con l'HTML gli a capo li fanno i paragrafi e gli elenchi, non gli spazi del codice.
   - L'etichetta "Testo" sopra l'editor non e' un <label> (il clic andrebbe al pulsante Grassetto): e' uno span che
     porta il cursore nell'editor, e lo dice il puntatore.
   ====================================================================================================================== */
.odm-testo.nota-formattata{white-space:normal}
.odm-campo-nota > .odm-etichetta{cursor:text}

/* ======================================================================================================================
   NOTE DELLE OPPORTUNITA' CON L'EDITOR DELLE NOTE (25/09/2026): sta DOPO la sezione dell'editor
   (.editor-nota e .nota-formattata).
   - Scheda dell'opportunita' (Campionature/Scheda.aspx): la nota della commessa e le note degli articoli stanno in
     .deal-testo, che ha white-space:pre-wrap per il testo semplice di prima. L'HTML dell'editor va letto come nel
     browser (gli a capo sono <p> e <br>, EditorNote.Html li mette anche per il testo semplice), e .deal-testo p{margin:0}
     toglierebbe il distacco fra i paragrafi che l'editor mostra: qui con una specificita' in piu', cosi' non conta
     l'ordine nel foglio.
   - Nota dell'articolo (Campionature/Nuovo.aspx, .art-note): lo stesso corpo 13px della casella di prima, solo con il
     mouse; sul telefono resta il 16px dell'editor (e su iPhone vince comunque la regola dei 16px dei campi).
   ====================================================================================================================== */
.deal-testo .nota-formattata{white-space:normal}
.deal-testo .nota-formattata p{margin:0 0 .5em}
.deal-testo .nota-formattata p:last-child{margin-bottom:0}
.deal-testo .nota-formattata ul,.deal-testo .nota-formattata ol{margin:.2em 0 .6em;padding-left:1.4em}
.deal-testo .nota-formattata li > p{margin:0}
@media (pointer:fine){
  .art-note .editor-nota-area{font-size:13px;line-height:1.5}
}

/* ===================================================================================================================
   DA AGGIUNGERE A css/fpc.css (accesso con Apple, 26/09/2026)
   1) subito dopo le regole di .pagina-login .sso (oggi righe ~869-891, prima di .pagina-login .specs)
   2) la riga .pagina-login .alert.neutro subito dopo .pagina-login .alert.on (oggi riga ~906)
   3) le regole della scheda utente vicino a .app-azione (oggi righe ~185-196)
   4) .esito-apple vicino agli avvisi (.avviso, oggi righe ~699-707)
   =================================================================================================================== */

/* --- 1) pagina di accesso: "Continua con Apple" -------------------------------------------------------------------
   Regole di Apple: fondo bianco o nero, logo e testo dello STESSO colore (tutti e due neri o tutti e due bianchi), la
   mela intera e non ritagliata, pulsante non piu' piccolo degli altri (stessa altezza e larghezza di .sso).
   Il pulsante vero ha class="sso apple scuro" = variante B, scelta dall'utente: fondo nero, mela e testo bianchi.
   Con class="sso apple" soltanto = variante A: bianco pieno, mela e testo neri. Niente tessera dietro il logo e niente
   freccetta a destra (le linee guida di Apple non ne parlano: meglio non aggiungere segni). */
.pagina-login .sso.apple{background:#fff;color:#000}
.pagina-login .sso.apple:hover{background:#fff}
.pagina-login .sso.apple::after{display:none}
.pagina-login .sso.apple .chip{background:transparent;box-shadow:none}
.pagina-login .sso.apple .chip svg{width:19px;height:19px;fill:currentColor;margin-top:-2px}
.pagina-login .sso.apple .spin{border-color:rgba(0,0,0,.22);border-top-color:#000}
/* variante B (quella in uso) */
.pagina-login .sso.apple.scuro{background:#000;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 10px 24px -14px rgba(0,0,0,.9)}
.pagina-login .sso.apple.scuro:hover{background:#111}
.pagina-login .sso.apple.scuro .spin{border-color:rgba(255,255,255,.3);border-top-color:#fff}

/* --- 2) pagina di accesso: accesso annullato su Apple (Login.aspx.vb, motivo "annullato"): tono neutro, non rosso --- */
.pagina-login .alert.neutro{background:rgba(243,238,227,.12);border-left-color:rgba(243,238,227,.55);color:var(--bone)}

/* --- 3) testata, scheda utente: "Collega Apple" e "Apple collegato · Scollega" (FPC.Master) ----------------------
   Il gruppo .azioni-app si nasconde se non ha pulsanti visibili (:has(button...)): "Collega Apple" e' un <a> (LinkButton)
   e deve tenerlo visibile anche quando "Installa app" e "Notifiche" sono nascosti.
   La mela resta nel colore del testo (mai rossa: e' il logo di Apple). "Scollega" e' un comando che toglie: grigio,
   come l'elimina delle righe. */
.azioni-app:has(.app-apple){display:grid}
a.app-azione{text-decoration:none}
.app-azione.app-apple svg{color:currentColor}
.app-azione.app-apple.collegato{cursor:default;border-color:var(--successo-bordo)}
.app-azione.app-apple.collegato:hover{border-color:var(--successo-bordo);color:var(--testo)}
.app-azione.app-apple.collegato > span{flex:1;min-width:0}
.app-apple-scollega{flex:none;font-size:12.5px;color:var(--tenue);text-decoration:none;border-bottom:1px solid currentColor;cursor:pointer}
.app-apple-scollega:hover{color:var(--accento-testo)}

/* --- 4) esito di "Collega Apple" / "Scollega" in cima alla pagina (FPC.Master, una volta sola): e' un .avviso
   ok / info / errore; qui solo lo spazio sotto il titolo della pagina --- */
.esito-apple{margin:0 0 16px}

/* ---------------------------------------------------------------------
   Impostazioni > Setup: PROVIDER DI ACCESSO (26/09/2026, sezione #setupProvider)
   Regole comuni, tre schede <details> una sotto l'altra (Microsoft, Google, Apple) con logo e pillola di stato,
   pillole di scelta con la casella vera nascosta (Spento / In prova / Acceso, dettagli degli errori No / Si'),
   l'origine di ogni valore (Setup / Web.config), indirizzi da copiare, accessi Apple da abbinare e collegati.
   Riusa .pos-* della posta (campi, segreto, scadenza, prova, nota) e .acc-* dell'accesso al sito (elenchi a righe).
   Da mettere in fondo a css/fpc.css, dopo le regole della posta e dell'intelligenza artificiale.
   --------------------------------------------------------------------- */
.prov-etichetta{font-size:12px;color:var(--tenue)}
.prov-riepilogo small + small{margin-top:1px}
.prov-riepilogo small.prov-no{color:var(--pericolo)}
.prov-riepilogo a,.prov-riga-stato a{color:var(--accento-testo)}
.prov-riepilogo code,.prov-riga-stato code{font-size:11.5px}

/* da dove arriva un valore: etichetta (Setup, Web.config, Nessuno) e la frase */
.prov-origine{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;font-size:11.5px;line-height:1.45;color:var(--tenue)}
.prov-fonte{
  --pf:var(--ic-grigio);
  display:inline-block;padding:0 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;
  color:var(--pf);border:1px solid color-mix(in srgb,var(--pf) 40%,transparent);background:color-mix(in srgb,var(--pf) 9%,transparent);
}
.prov-fonte.setup{--pf:var(--ic-verde)}
.prov-fonte.webconfig{--pf:var(--ic-blu)}

/* pillole a scelta singola: la casella vera (radio) resta nascosta dentro l'etichetta */
.prov-stati{display:flex;flex-wrap:wrap;gap:8px}
.prov-stato{
  --ps:var(--ic-grigio);
  position:relative;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:5px 15px 5px 6px;border-radius:999px;
  border:1px solid var(--bordo-forte);background:var(--pannello);color:var(--testo);font-size:13px;font-weight:600;cursor:pointer;user-select:none;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.prov-stato.acceso,.prov-stato.sicuro{--ps:var(--successo)}
.prov-stato.prova,.prov-stato.attenzione{--ps:var(--pos-ambra)}
.prov-stato-icona{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--pannello2);color:var(--tenue);transition:background-color .15s,color .15s}
.prov-stato-icona svg{width:14px;height:14px}
.prov-stato:hover{border-color:var(--ps)}
.prov-stato:has(input:checked){border-color:var(--ps);background:color-mix(in srgb,var(--ps) 10%,var(--pannello));box-shadow:inset 0 0 0 1px var(--ps)}
.prov-stato:has(input:checked) .prov-stato-icona{background:var(--ps);color:#fff}
.prov-stato:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
.prov-stato:has(input:disabled){cursor:default;opacity:.65}
.prov-stato:has(input:disabled):hover{border-color:var(--bordo-forte)}
.prov-riga-stato{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.prov-riga-stato .setup-aiuto{line-height:1.5}

/* le tre schede: bordo sinistro del colore dello stato, testata cliccabile con logo, nome, riassunto, pillola e freccia */
.prov-schede{display:grid;gap:12px;margin-top:22px}
.prov-scheda{--pv:var(--bordo-forte);min-width:0;border:1px solid var(--bordo);border-left:3px solid var(--pv);border-radius:var(--raggio);background:var(--pannello);overflow:hidden}
.prov-scheda.ok{--pv:var(--successo)}
.prov-scheda.prova,.prov-scheda.avvisa{--pv:var(--pos-ambra)}
.prov-scheda.no{--pv:var(--pericolo)}
.prov-testa{display:flex;align-items:center;gap:12px;min-width:0;min-height:64px;padding:11px 14px;cursor:pointer;list-style:none;user-select:none;background:var(--pannello2);transition:background-color .15s}
.prov-testa::-webkit-details-marker{display:none}
.prov-testa:hover{background:color-mix(in srgb,var(--accento) 4%,var(--pannello2))}
.prov-testa:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.prov-scheda[open] > .prov-testa{border-bottom:1px solid var(--bordo)}
.pos-logo.prov-logo{width:40px;height:40px;border-radius:9px;background:#fff}
.pos-logo.prov-logo svg{width:21px;height:21px}
.prov-logo-apple{color:#000}
.prov-nome{flex:1;min-width:0}
.prov-nome b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.prov-nome small{display:block;margin-top:2px;font-size:12px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prov-pillola{
  --pp:var(--ic-grigio);
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;
  color:var(--pp);border:1px solid color-mix(in srgb,var(--pp) 45%,transparent);background:color-mix(in srgb,var(--pp) 10%,transparent);
}
.prov-pillola::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.prov-pillola.ok{--pp:var(--successo)}
.prov-pillola.prova,.prov-pillola.avvisa{--pp:var(--pos-ambra)}
.prov-pillola.no{--pp:var(--pericolo)}
.prov-freccia{flex:none;width:18px;height:18px;color:var(--debole);transition:transform .2s}
.prov-scheda[open] .prov-freccia{transform:rotate(90deg)}
.prov-corpo{padding:2px 16px 18px}
.prov-corpo > .avviso:first-child{margin-top:14px}
.prov-corpo .pos-scadenza{margin-top:14px}
.prov-campi{margin-top:16px}
.prov-campi + .campo{margin-top:14px}
.campo input.prov-maiuscolo{text-transform:uppercase}

/* segreto e chiave: "Togli" grigio, rosso solo passandoci sopra (come il cestino delle righe) */
.bottone.prov-togli{color:var(--tenue)}
.bottone.prov-togli:hover{border-color:var(--pericolo);color:var(--pericolo)}

/* indirizzi da registrare (Google, Apple): in carattere fisso, selezionabili, con il pulsante Copia */
.prov-indirizzi{display:grid;gap:12px}
.prov-indirizzo{display:flex;flex-direction:column;gap:5px;min-width:0;margin-top:16px}
.prov-indirizzi .prov-indirizzo{margin-top:0}
.prov-indirizzo > small:first-child{font-size:12px;color:var(--tenue)}
.prov-copiabile{display:flex;align-items:center;gap:8px;min-width:0}
.prov-copiabile code{
  flex:1;min-width:0;display:block;padding:8px 11px;border-radius:3px;border:1px dashed var(--bordo-forte);background:var(--pannello2);color:var(--testo);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;overflow-wrap:anywhere;user-select:all;
}
.bottone.prov-copia{flex:none;gap:6px}
.bottone.prov-copia svg{flex:none;width:14px;height:14px}
.bottone.prov-copia.copiato{border-color:var(--successo);color:var(--successo)}

/* chiave .p8: file o testo, poi la riga "chiave salvata il ... impronta ..." con Togli */
.prov-chiave-riga{display:grid;gap:14px 16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));align-items:start}
.prov-chiave-riga .campo{margin-top:0}
.prov-chiave-riga input[type=file]{max-width:100%;padding:6px 0;font:inherit;font-size:13px}
.campo textarea.prov-chiave-testo{min-height:84px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.45}
.prov-chiave-stato{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 4px}
.prov-chiave-stato .pos-salvata{margin-top:0;overflow-wrap:anywhere}
.setup-corpo .campo.prov-scambio{margin-top:20px}

/* ultima prova e ultimo errore di Apple */
.prov-righe{display:grid;gap:3px;margin-top:12px}
.prov-righe small{font-size:12px;line-height:1.45;color:var(--tenue);overflow-wrap:anywhere}
.prov-righe small.prov-no{color:var(--pericolo)}
.prov-aiuto-apple{margin-top:18px}

/* accessi con Apple: da abbinare (numero ambra quando ce ne sono) e collegati, righe come l'accesso al sito */
.prov-accessi{display:grid;gap:14px;margin-top:24px}
.prov-accessi > h3{margin-bottom:0}
.prov-accessi > .avviso{margin:0}
.prov-elenco .acc-testa{border-bottom:1px solid var(--bordo)}
.prov-elenco .acc-titolo small b{display:inline;font-size:inherit;color:var(--testo)}
.prov-elenco.accesa{border-color:color-mix(in srgb,var(--pos-ambra) 55%,var(--bordo));box-shadow:none}
.prov-elenco.accesa .acc-numero{background:var(--pos-ambra);color:#fff}
.prov-elenco .acc-reti > li:last-child{border-bottom:0}
.prov-accesso .acc-rete-icona{background:#fff;color:#000;box-shadow:0 0 0 1px var(--bordo)}
.prov-collegato .acc-rete-icona{background:var(--successo-velo);color:var(--successo)}
.acc-cidr.prov-codice{font-weight:700;letter-spacing:.05em;color:var(--accento-testo)}
.prov-abbina{flex-wrap:wrap;align-items:center;justify-content:flex-end}
.prov-abbina select.prov-persona{
  width:250px;max-width:100%;min-width:0;height:34px;padding:0 9px;border-radius:3px;border:1px solid var(--bordo);
  background:var(--sfondo);color:var(--testo);font:inherit;font-size:13px;
}
.prov-abbina select.prov-persona:focus{outline:none;border-color:var(--accento)}

/* sul telefono e con il dito: pulsanti alti almeno 38px; tema scuro: calendario chiaro */
@media (max-width:900px),(pointer:coarse){#setupProvider .bottone{min-height:38px}}
html[data-tema="scuro"] #setupProvider input[type=date]{color-scheme:dark}

/* telefono: niente scorrimento laterale. Pillole a tutta riga, indirizzo sopra il pulsante Copia, nelle righe degli
   accessi i comandi in cima (tendina a tutta larghezza) e i testi sotto */
@media (max-width:560px){
  .prov-testa{gap:10px;padding:10px 12px}
  .pos-logo.prov-logo{width:36px;height:36px}
  .prov-pillola{padding:3px 9px;font-size:11.5px}
  .prov-corpo{padding:2px 12px 16px}
  .prov-stati{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  /* come le schede degli stati del catalogo sul telefono: icona sopra il nome, larghe uguali */
  .prov-stato{flex-direction:column;justify-content:center;gap:3px;min-height:58px;padding:7px 4px 6px;border-radius:12px;font-size:12.5px;white-space:nowrap}
  .prov-copiabile{flex-direction:column;align-items:stretch}
  .bottone.prov-copia{justify-content:center}
  .acc-rete.prov-accesso{grid-template-columns:minmax(0,1fr);grid-template-areas:"azioni" "testo"}
  .prov-abbina{justify-content:flex-start}
  .prov-abbina{flex-wrap:nowrap;width:100%}
  .prov-abbina select.prov-persona{flex:1 1 auto;width:auto;height:40px;font-size:16px}
}

/* ======================================================================================================================
   REVISIONE GRAFICA (26/09/2026): pagine allineate alle regole gia' decise. Solo regole in piu' in fondo al foglio, cosi'
   il blocco si puo' riattaccare a un foglio piu' nuovo senza toccare il resto (resoconto in fpc-lavoro\revisione-grafica).
   ====================================================================================================================== */

/* 1) Clienti > elenco: le righe "Validazione" e "Agente" stanno dentro il riquadro e toccavano il bordo (nell'elenco
      delle opportunita' sono fuori dal riquadro e non serve) */
.riquadro > .vp-filtri{margin:0;padding:12px 16px 2px}
.riquadro > .vp-filtri + .vp-filtri{padding-top:6px}

/* 2) Gestione > avvisi: "Pubblicato nel cruscotto degli agenti" era una casella di spunta del browser. Diventa
      l'interruttore del portale (.interruttore: 38x22, verde acceso), solo con il CSS perche' il testo lo scrive il VB */

/* 3) Impostazioni > Struttura del menu: lo stato "Attiva" era rosso (.badge.on, il rosso dei richiami): acceso = verde,
      come l'interruttore "Attiva" del modulo accanto e i pallini del Setup; "Disattivata" resta grigia */

/* 4) Elenchi a schede staccate (variante C del 25/09/2026) anche per ticket di supporto, elenco avvisi e struttura del
      menu: sotto i 900px erano gia' schede, sopra erano righe attaccate */
@container (min-width:901px){
  table.tabella.t-ticket,table.tabella.t-post{border-collapse:separate;border-spacing:0 8px}
  table.tabella.t-ticket thead th,table.tabella.t-post thead th{border-bottom:none}
  table.tabella.t-ticket tbody tr,table.tabella.t-post tbody tr{
    background-color:var(--pannello2);outline:1px solid var(--bordo-forte);outline-offset:-1px;box-shadow:0 3px 10px -4px rgba(0,0,0,.45)}
  table.tabella.t-ticket td,table.tabella.t-post td{border-bottom:none}
}

/* 5) pallino dei messaggi da leggere dei ticket (piede della barra): il verde acqua della chat con la sua versione
      schiarita nel tema scuro (era #0f8f8a scritto a mano, uguale nei due temi) */
.voce-nuovo{background:var(--ic-teal)}

/* 6) filtri "Diretti" / "Con agente" (elenco clienti e pannello Filtri delle opportunita'): il viola e il blu delle
      icone del portale invece di #6f42c1 / #3b7bff / #2f66d6 / #c3a6ff scritti a mano (a occhio non cambia niente) */
.cat-pillola.ag-diretti:has(input:checked) span,a.vp-filtro.ag-diretti.attiva{
  border-color:color-mix(in srgb,var(--ic-viola) 45%,transparent);background:color-mix(in srgb,var(--ic-viola) 10%,var(--pannello));color:var(--ic-viola)}
.cat-pillola.ag-con:has(input:checked) span,a.vp-filtro.ag-con.attiva{
  border-color:color-mix(in srgb,var(--ic-blu) 45%,transparent);background:color-mix(in srgb,var(--ic-blu) 10%,var(--pannello));color:var(--ic-blu)}
html[data-tema="scuro"] .cat-pillola.ag-diretti:has(input:checked) span,html[data-tema="scuro"] a.vp-filtro.ag-diretti.attiva{color:var(--ic-viola)}
html[data-tema="scuro"] .cat-pillola.ag-con:has(input:checked) span,html[data-tema="scuro"] a.vp-filtro.ag-con.attiva{color:var(--ic-blu)}
.az-agente{--ag:var(--ic-blu)}
.az-agente.diretto{--ag:var(--ic-viola)}
html[data-tema="scuro"] .az-agente{--ag:var(--ic-blu)}
html[data-tema="scuro"] .az-agente.diretto{--ag:var(--ic-viola)}
select.ag-scelta.attiva{border-color:color-mix(in srgb,var(--accento2) 45%,transparent);background-color:color-mix(in srgb,var(--accento2) 10%,var(--pannello))}
select.ag-scelta.attiva:focus{background-color:color-mix(in srgb,var(--accento2) 10%,var(--pannello))}

/* 7) testo in grassetto degli avvisi blu (.avviso.info b): nel tema chiaro il blu chiaro stava a 3,8:1 sul bianco,
      il blu dei pulsanti (--blu) sta a 5,2:1 */
html[data-tema="chiaro"] .avviso.info b{color:var(--blu)}

/* 8) tastiera: anello blu (lo stesso di .bottone e .icona-riga) anche su tondi della testata, lingue, scheda utente,
      voci del menu e frecce delle pagine; prima c'era solo quello del browser o niente */
.tondo:focus-visible,.lingue a:focus-visible,.utente summary:focus-visible,.icona-pager:focus-visible,
.voce:focus-visible,.gruppo > summary:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.voce:focus-visible,.gruppo > summary:focus-visible{outline-offset:-2px}

/* 9) menu del telefono (FPC.Master): la casella che lo apre non e' piu' hidden, cosi' si raggiunge con la tastiera;
      resta invisibile, e sopra i 980px (menu sempre aperto) sparisce del tutto */
#apri{display:block;position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
@media (min-width:981px){#apri{display:none}}
#apri:focus-visible ~ .testata .burger{outline:2px solid var(--accento2);outline-offset:2px}

/* 10) scheda utente: il collegamento alla presentazione aveva lo stile scritto nella pagina (style="...") */
.app-azione.app-presentazione{margin-top:10px}

/* 11) bersagli da 38px (la misura delle icone di riga col dito) anche per i tondi della testata, i pulsanti piccoli,
       le frecce delle pagine e la scelta di quante righe vedere: prima 34-36px e 26-30px */
@media (max-width:900px),(pointer:coarse){
  .testata .tondo{width:38px;height:38px}
  .bottone.piccolo{min-height:38px}
  .icona-pager{width:38px;height:38px}
  .per-pagina select{min-height:38px}
}
@media (max-width:900px){
  .testata .rg-casella{width:38px;height:38px}
}

/* ======================================================================================================================
   PROPOSTE P1-P5 della revisione grafica del 26/09/2026, DECISE dall'utente il 27/09/2026 (tutte e cinque).
   Ogni blocco si puo' attaccare in fondo a css/fpc.css da solo, dopo che l'utente ha visto l'anteprima
   (anteprime\P1-... P5-...). Nessun blocco cambia una scelta gia' decisa: toccano cose che nessuno ha mai deciso.
   ====================================================================================================================== */

/* ---------- P1) pillole dei filtri: un solo aspetto per "scelta" ----------
   Oggi la pillola scelta ha quattro aspetti: bordo rosso con velo rosso (catalogo, filtri delle opportunita',
   traduzioni, agenti, area della modifica cliente, cronologia della scheda cliente: e' il piu' usato), verde pieno con
   la spunta (.pillole: persone in Struttura del menu, filtro delle guide in Gestione Help), anello blu ("Tutti" della
   validazione e dell'agente nell'elenco clienti) e crema/testo pieno (tipi della Ricerca). Proposta: tutte come la
   prima. Restano come sono i colori con un significato (Validati verde, Da validare rosso, Diretti viola, Con agente
   blu) e le pillole dei periodi di Statistiche (variante B scelta dall'utente). */
.pillole li input:checked + label{background:var(--accento-velo);border-color:var(--accento);color:var(--testo);font-weight:600}
.pillole li input:checked + label::before{background-color:var(--accento);border-color:var(--accento);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E")}
a.vp-filtro.attiva{border-color:var(--accento);background:var(--accento-velo);color:var(--testo)}
.rg-pillola.sel{background:var(--accento-velo);border-color:var(--accento);color:var(--testo)}
.rg-pillola.sel svg{color:var(--accento-testo)}
.rg-pillola.sel em,html[data-tema="scuro"] .rg-pillola.sel em{background:color-mix(in srgb,var(--accento) 18%,transparent);border-color:transparent;color:var(--testo)}

/* ---------- P2) testo "debole" leggibile ----------
   --debole (intestazioni delle tabelle, stati vuoti, suggerimenti sotto i campi, segnaposto, piede) sta a 2,7:1 nel
   tema scuro e 2,5-2,9:1 nel chiaro; il minimo per un testo piccolo e' 4,5:1. Proposta: 4,6:1 circa in tutti e due. */
html[data-tema="scuro"]{--debole:rgba(239,232,217,.52)}
html[data-tema="chiaro"]{--debole:#687880}

/* ---------- P3) messaggi di errore e di conferma nel tema scuro ----------
   .avviso.errore / .bottone.pericolo usano --pericolo #c94836 (rosso mattone) e .avviso.ok --successo #2f8a55: nel
   tema scuro stanno a 3,5:1 e 3,8:1. Proposta: nel tema scuro le stesse tinte schiarite delle icone (--ic-rosso,
   --ic-verde), 5:1 e oltre. Nel tema chiaro non cambia niente. */
html[data-tema="scuro"]{--pericolo:#ff6b76;--pericolo-bordo:rgba(255,107,118,.40);--pericolo-velo:rgba(255,107,118,.10);
  --successo:#4fd08a;--successo-bordo:rgba(79,208,138,.40);--successo-velo:rgba(79,208,138,.10)}

/* ---------- P4) pulsante verde leggibile ----------
   Il testo bianco su --verde #1e9e57 sta a 3,4:1 (sotto il 4,5:1 del testo normale). Proposta: solo il fondo dei
   pulsanti verdi (.bottone.verde) un filo piu' scuro, 5,0:1; il verde delle icone, degli interruttori e dei pallini
   resta quello di oggi. */
.bottone.verde{background:#15803d}

/* ---------- P5) Registro attivita': mai scorrere di lato ----------
   La tabella del registro vuole almeno 1190px: su un computer da 1440px con il menu aperto lo spazio e' 1106px e
   l'ultima colonna (dispositivo) resta fuori, si scorre di lato. Proposta: le schede (che oggi partono sotto i
   900px) partono sotto i 1190px, come gli altri elenchi che non scorrono mai. */

/* PAGINA AGENTI SUL TELEFONO (27/09/2026): i 13px sopra e sotto di ogni cella della variante C (sopra, "PAGINA AGENTI,
   VARIANTE C") valgono per la tabella larga. Nella scheda (sotto i 900px) ogni cella e' un blocco della griglia e quei
   13+13px si sommavano fra icone, nome e date: le schede dei subagenti erano molto piu' alte e vuote di quella del
   supervisore, che li azzerava con "tr.capo td" (piu' forte). Nella scheda lo spazio lo da' solo il gap della griglia. */
@container (max-width:900px){
  table.ag-tabella tbody tr td{padding-top:0;padding-bottom:0}
}

/* ---------- DOCUMENTI, CARTELLA NUOVA: IL CLIENTE SI CERCA (29/09/2026) ----------
   Prima era una tendina con i primi 400 clienti. Ora un campo di ricerca (js/documenti.js, Documenti/Clienti.ashx):
   i risultati sono righe da toccare, la scelta diventa una fascia con il nome e "Cambia". Con un cliente scelto
   "Chi la vede" non serve (una cartella di un cliente nasce sempre privata), come prima con la tendina */
.dc-cerca-cliente{display:grid;gap:6px}
.dc-cerca-cliente input[type=search]{width:100%}
.dc-risultati{list-style:none;margin:0;padding:0;max-height:min(260px,40vh);overflow-y:auto;
  border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello2)}
.dc-risultati:empty{display:none}
.dc-risultati li + li{border-top:1px solid var(--bordo)}
.dc-risultato{display:block;width:100%;min-height:40px;padding:9px 12px;border:0;background:none;
  color:var(--testo);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.dc-risultato:hover,.dc-risultato:focus-visible{background:var(--accento-velo);outline:none;box-shadow:inset 3px 0 0 var(--accento)}
.dc-risultati-vuoto{padding:10px 12px;font-size:13px;color:var(--tenue)}
.dc-scelto{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--accento);border-radius:var(--raggio);background:var(--accento-velo)}
.dc-scelto-icona{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--pannello);color:var(--accento-testo)}
.dc-scelto b{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere}
.dc-scelto .bottone{flex:none}
.dc-nuova:has(.dc-scelto:not([hidden])) .dc-campo-chi{display:none}
@media (pointer:coarse){.dc-risultato{min-height:44px}}

/* ---------- DOCUMENTI: "SOLO SUPERVISORI" (29/09/2026, solo l'ufficio la sceglie) ----------
   La terza pillola di "Chi la vede": la cartella la vedono solo gli agenti supervisori (e l'ufficio). Il rosso del
   portale, lo stesso dei supervisori nella pagina Agenti; la spiegazione e la frase della condivisione seguono la scelta */
.dc-campo-chi .dc-chi-supervisor{display:none}
.dc-campo-chi:has(input[value="supervisor"]:checked) .dc-chi-supervisor{display:block}
.dc-campo-chi:has(input[value="supervisor"]:checked) .dc-chi-io{display:none}
.dc-regola-supervisor{display:none}
.dc-condividi:has(input[name="dcChi"][value="supervisor"]:checked) .dc-regola-supervisor{display:inline}
.dc-condividi:has(input[name="dcChi"][value="supervisor"]:checked) .dc-regola-io{display:none}
.dc-voce-condivisa.supervisori{color:var(--accento-testo)}
.badge.dc-stato.dc-supervisori{border-color:color-mix(in srgb,var(--accento) 50%,transparent);color:var(--accento-testo)}
button.badge.dc-stato.dc-supervisori:hover{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
/* tre pillole sul telefono: vanno a capo invece di stringersi */
.dc-chi:has(li:nth-child(3)){flex-wrap:wrap}

/* Documenti, cartella nuova: con il cliente scelto la frase che dice chi vedra' la cartella (29/09/2026); senza cliente,
   o con "dentro questa cartella", non c'e'. Sta subito dopo la fascia del cliente scelto (.dc-scelto) */
.dc-chi-cliente{display:block;margin-top:6px}
.dc-scelto[hidden] + .dc-chi-cliente{display:none}

/* ===================================================================================================================
   DA AGGIUNGERE IN FONDO A css/fpc.css (accesso rapido con Face ID / impronta, passkey WebAuthn, 30/09/2026)
   Solo regole nuove (classi .pk-*, .sso.passkey, .app-passkey, .prov-*-passkey, .acc-pillola.avvisa): si possono
   attaccare in fondo al foglio senza toccare il resto.
   1) pagina di accesso: il pulsante "Entra con Face ID" (sopra gli altri) e il suo avviso
   2) testata, scheda utente: la voce "Accesso con Face ID"
   3) la fascia "Vuoi entrare con Face ID la prossima volta?" in cima alla pagina dopo l'accesso
   4) la finestra della voce del menu (stato di questo dispositivo, Attiva / Togli, i dispositivi della persona)
   5) Impostazioni > Setup > Provider di accesso: la scheda "Accesso rapido (Face ID / impronta)"
   =================================================================================================================== */

/* --- 1) pagina di accesso ------------------------------------------------------------------------------------------
   Stesso pulsante chiaro di Microsoft e Google (.sso: altezza, freccetta, rotella); la tessera del logo e' rossa del
   portale con il volto (o l'impronta su Android) bianco, perche' e' il modo piu' veloce e sta sopra gli altri.
   Il pulsante nasce hidden: lo mostra js/passkey.js ([hidden] vince gia' con !important in cima al foglio). */
.pagina-login .sso.passkey .chip{background:var(--accento);color:#fff;box-shadow:0 0 0 1px rgba(218,2,25,.35),0 6px 14px -8px rgba(218,2,25,.8)}
.pagina-login .sso.passkey .chip svg{width:18px;height:18px}
.pagina-login .sso.passkey .pk-impronta{display:none}
.pagina-login .sso.passkey[data-piattaforma="android"] .pk-volto{display:none}
.pagina-login .sso.passkey[data-piattaforma="android"] .pk-impronta{display:block}
/* l'avviso del pulsante (annullato, 30 giorni passati, tolta...): come .alert, sopra il pulsante */
.pagina-login .alert.pk-avviso{margin-bottom:14px}

/* --- 2) scheda utente: "Accesso con Face ID" -------------------------------------------------------------------------
   Un <button> come "Installa app" e "Notifiche" (.azioni-app si vede appena uno dei pulsanti non e' hidden).
   Attivo su questo dispositivo = .attiva (bordo e icona verdi, gia' nel foglio) e un pallino verde a destra. */
.app-azione.app-passkey > .pk-menu-testo{flex:1;min-width:0}
.app-azione.app-passkey .pk-menu-stato{flex:none;width:8px;height:8px;border-radius:50%;background:transparent}
.app-azione.app-passkey.attiva .pk-menu-stato{background:var(--successo)}

/* --- 3) la fascia dopo l'accesso -------------------------------------------------------------------------------------
   Sotto il titolo della pagina, bordo sinistro verde (e' una proposta, non un errore); sul telefono i pulsanti vanno
   sotto il testo, larghi uguali. */
.pk-fascia{
  display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;
  border:1px solid var(--bordo);border-left:3px solid var(--verde);border-radius:var(--raggio);
  background:var(--pannello);box-shadow:var(--ombra);
}
.pk-fascia-icona{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb,var(--verde) 14%,transparent);color:var(--verde)}
.pk-fascia-icona svg{width:24px;height:24px}
.pk-fascia-testo{flex:1;min-width:0}
.pk-fascia-testo b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.pk-fascia-testo small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.pk-fascia-testo small.pk-fascia-esito.errore{color:var(--pericolo)}
.pk-fascia-testo small.pk-fascia-esito.info{color:var(--testo)}
.pk-fascia-azioni{display:flex;flex:none;align-items:center;gap:8px}
.pk-fascia.fatto{border-left-color:var(--successo)}
.pk-fascia.fatto .pk-fascia-testo b{color:var(--successo)}
@media (max-width:560px){
  .pk-fascia{flex-wrap:wrap;align-items:flex-start}
  .pk-fascia-testo{flex:1 1 calc(100% - 60px)}
  .pk-fascia-azioni{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr}
  .pk-fascia-azioni .bottone{justify-content:center;min-height:42px}
  .pk-fascia.fatto .pk-fascia-azioni{display:flex;justify-content:flex-end}
}

/* --- 4) la finestra del menu utente ----------------------------------------------------------------------------------
   <dialog> al centro (sul telefono quasi a tutta larghezza, scorre dentro se e' lunga). "Questo dispositivo" in un
   riquadro con il pallino (grigio / verde), poi Attiva (verde: crea) o Togli (grigio, rosso passandoci sopra), la nota
   dei giorni e l'elenco dei dispositivi con il cestino (.icona-riga elimina, come nelle righe del portale). */
.pk-finestra{width:min(480px,calc(100vw - 24px));max-height:min(88vh,720px);padding:0;overflow:auto;
  border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);color:var(--testo);box-shadow:var(--ombra)}
@supports (height:100dvh){.pk-finestra{max-height:min(88dvh,720px)}}
.pk-finestra::backdrop{background:rgba(4,20,28,.6)}
.pk-testa{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.pk-testa-icona{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:9px;background:var(--accento);color:#fff}
.pk-testa-icona svg{width:20px;height:20px}
.pk-testa h3{flex:1;min-width:0;margin:0;font-size:16px;font-weight:600}
.pk-testa h3:focus{outline:none}
.pk-corpo{padding:16px 18px 20px}
.pk-questo{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--bordo);border-radius:10px;background:var(--pannello2)}
.pk-punto{flex:none;width:12px;height:12px;margin-top:4px;border-radius:50%;background:var(--debole);box-shadow:0 0 0 4px color-mix(in srgb,var(--debole) 20%,transparent)}
.pk-questo.attivo{border-color:var(--successo-bordo);background:var(--successo-velo)}
.pk-questo.attivo .pk-punto{background:var(--successo);box-shadow:0 0 0 4px color-mix(in srgb,var(--successo) 22%,transparent)}
.pk-questo-testo{min-width:0}
.pk-questo-testo b{display:block;font-size:14px}
.pk-questo-testo small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.pk-finestra .pk-esito{margin:12px 0 0}
.pk-comandi{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pk-comandi:not(:has(.bottone:not([hidden]))){display:none}
.pk-nota{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.pk-elenco-titolo{margin:20px 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.pk-elenco{list-style:none;margin:0;padding:0;border:1px solid var(--bordo);border-radius:10px;overflow:hidden}
.pk-elenco:empty{display:none}
.pk-riga{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--bordo)}
.pk-riga:last-child{border-bottom:0}
.pk-riga-icona{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:9px;background:var(--pannello2);color:var(--tenue)}
.pk-riga-icona svg{width:19px;height:19px}
.pk-riga.qui{box-shadow:inset 3px 0 0 var(--successo)}
.pk-riga.qui .pk-riga-icona{background:var(--successo-velo);color:var(--successo)}
.pk-riga-testo{flex:1;min-width:0}
.pk-riga-testo b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13.5px;overflow-wrap:anywhere}
.pk-riga-testo small{display:block;font-size:12px;color:var(--debole)}
.pk-riga-testo small.pk-vale{color:var(--tenue)}
.pk-riga.scaduta small.pk-vale{color:var(--pos-ambra)}
.pk-qui{padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.7;
  border:1px solid var(--successo-bordo);background:var(--successo-velo);color:var(--successo)}
.pk-carica{padding:14px 12px;font-size:13px;color:var(--debole);text-align:center}
.pk-carica.errore{color:var(--pericolo)}
.pk-vuoto{margin:0;padding:14px 12px;border:1px dashed var(--bordo);border-radius:10px;font-size:13px;color:var(--debole);text-align:center}
@media (max-width:560px){
  .pk-corpo{padding:14px 14px 18px}
  .pk-comandi .bottone{flex:1 1 100%;justify-content:center;min-height:42px}
}

/* --- 5) Impostazioni > Setup > Provider di accesso: "Accesso rapido (Face ID / impronta)" ----------------------------
   Stessa scheda <details> dei provider; il logo e' il volto nel rosso del portale. Il campo dei giorni e' stretto (3
   cifre). Elenco dei dispositivi come gli account collegati (.acc-*); "Da confermare" in ambra. */
.prov-logo-passkey{color:var(--accento)}
.prov-passkey-descrizione{margin:14px 0 0}
.campo.prov-giorni input.prov-numero{max-width:120px;font-variant-numeric:tabular-nums}
.prov-passkey-elenco{margin-top:20px}
.prov-passkey-elenco .acc-rete-icona svg{width:18px;height:18px}
.prov-passkey.scaduta .acc-rete-icona{background:color-mix(in srgb,var(--pos-ambra) 14%,transparent);color:var(--pos-ambra)}
.acc-pillola.avvisa{border:1px solid color-mix(in srgb,var(--pos-ambra) 45%,transparent);background:color-mix(in srgb,var(--pos-ambra) 10%,transparent);color:var(--pos-ambra)}
.prov-passkey .acc-pillole{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}

/* ===================== temi (01/10/2026): i pannelli si staccano dal fondo ===================== */
/* --rilievo e' nei colori dei due temi (in cima): scuro "nero e rosso" (luce in alto e ombra profonda), chiaro "carta
   calda" (ombra leggera). Solo i contenitori principali; .az-persona e .blocco-contatto hanno gia' la loro ombra.
   Il velo di luce in alto dei riquadri del tema scuro sta nel blocco "Tema scuro nero e rosso", in fondo. */
.riquadro,.pannello-form,.carta,.fascia,.cc-tessera,.scheda-pagina{box-shadow:var(--rilievo,none)}

/* ===================== il tasto Indietro (01/10/2026, js/indietro.js) ===================== */
/* la stessa grafica dei "<- Torna all'elenco" (a.bottone.vuoto), di cui prende il posto nella barra-azioni; se la
   pagina non ne ha, sta nella testata sotto il percorso. Dopo "<- Indietro", piu' leggero, il nome della pagina a cui
   si torna, tagliato se e' lungo */
.bottone.indietro{max-width:100%;min-width:0}
.bottone.indietro span{flex:none}
.bottone.indietro b{min-width:0;max-width:34ch;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--tenue)}
.bottone.indietro:hover b{color:inherit}
.pagina-testa > .bottone.indietro{margin:10px 0 8px}

/* =====================================================================================================================
   Gestione > Utenti EFFEPI (01/10/2026, Gestione/UtentiEffepi.aspx, js/utenti-effepi.js): stessa forma di Setup e
   Traduzioni. In cima ricerca e pillole del filtro (.tr-barra, .tr-cerca, .tr-pillola); a sinistra le persone (.setup-nav
   e .setup-voce: la foto al posto dell'icona, il ruolo e le pillole dei permessi accesi, lucchetto sul Supervisore); a
   destra la scheda (.riquadro): testata con foto, nome e campi fissi col lucchetto, i quattro permessi con le pillole
   No / Si' del Setup (.prov-stato, casella vera nascosta), i dati; sotto la legenda di tutti i campi. Sul telefono
   (contenitore sotto i 760px) o l'elenco o la scheda, con "< Utenti EFFEPI" per tornare.
   ===================================================================================================================== */
.ue-pagina{container:uepagina / inline-size}
.ue-guscio{display:grid;grid-template-columns:292px minmax(0,1fr);gap:20px;align-items:start}
.ue-destra{min-width:0;container:uedestra / inline-size}
.ue-destra > .riquadro{margin-bottom:20px}
.ue-destra > .avviso{margin:0 0 16px}
.ue-indietro{display:none}

/* barra: ricerca veloce e filtro (radio nascoste dentro le pillole) */
.ue-barra .tr-cerca{flex:0 1 420px}
.ue-filtro{position:relative}
.ue-filtro:has(input:checked){border-color:var(--accento);background:var(--accento-velo);color:var(--testo)}
.ue-filtro:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}

/* elenco delle persone */
.ue-elenco .setup-voce{gap:11px;padding:8px 10px}
.ue-voce-foto{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--pannello2);border:1.5px solid var(--bordo)}
.ue-voce.attiva .ue-voce-foto{border-color:var(--accento)}
.ue-voce-testo > b{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ue-voce-ruolo{display:block;margin-top:1px;font-size:11.5px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ue-mini-riga{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ue-mini{
  --um:var(--ic-grigio);
  padding:0 6px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;
  color:var(--um);border:1px solid color-mix(in srgb,var(--um) 40%,transparent);background:color-mix(in srgb,var(--um) 10%,transparent);
}
.ue-mini.fpc{--um:var(--ic-verde)}
.ue-mini.admin{--um:var(--ic-rosso)}
.ue-mini.creatore{--um:var(--ic-viola)}
.ue-mini.personale{--um:var(--ic-teal)}
.ue-sigillo{display:inline-grid;place-items:center;flex:none;color:var(--tenue)}
.ue-nessuno{margin:0;padding:14px 10px;font-size:13px;color:var(--debole);text-align:center}

/* nessuna persona scelta */
.ue-vuota .stato-vuoto{padding:34px 20px}
.ue-vuota-icona{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--pannello2);color:var(--tenue)}
.ue-vuota .stato-vuoto b{font-size:15px;font-weight:600;color:var(--testo)}
.ue-vuota .stato-vuoto > span:last-child{max-width:48ch;line-height:1.5}

/* scheda: testata con foto, nome e i campi che vengono dal gestionale */
.ue-testa{display:flex;align-items:flex-start;gap:18px;padding:18px 20px;border-bottom:1px solid var(--bordo);background:var(--pannello2)}
.ue-foto-box{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px}
.ue-foto{display:block;width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--accento);background:var(--pannello)}
.ue-foto.nuova{border-style:dashed}
.ue-cambia{cursor:pointer}
.ue-cambia svg{flex:none}
.ue-file:focus-visible + .ue-cambia{outline:2px solid var(--accento2);outline-offset:2px}
.ue-identita{flex:1;min-width:0}
.riquadro h2.ue-nome{display:flex;align-items:center;gap:8px;margin:2px 0 12px;padding:0;border:0;font-size:20px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.ue-fissi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 16px;margin:0}
.ue-fisso{min-width:0}
.ue-fisso dt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--debole)}
.ue-fisso dd{margin:3px 0 0;font-size:13.5px;color:var(--testo);overflow-wrap:anywhere}
.ue-fisso code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.ue-lucchetto{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:12px;line-height:1.4;color:var(--tenue)}
.ue-lucchetto svg{flex:none}
.ue-vai-legenda{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 0;font-size:12.5px;font-weight:600;color:var(--accento-testo);text-decoration:none}
.ue-vai-legenda:hover{text-decoration:underline}
/* 01/10/2026: il tasto apre e chiude la legenda (prima era un collegamento all'ancora) */
button.ue-vai-legenda{border:0;background:none;font-family:inherit;cursor:pointer}
button.ue-vai-legenda:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:3px}
.ue-vai-legenda[aria-expanded="true"]{text-decoration:underline}
.ue-vuota .ue-vai-legenda{margin-top:10px}

/* corpo: esito, permessi, dati, Salva */
.ue-corpo > .avviso:first-child{margin-top:0}
.ue-esito-elenco{margin:6px 0 0;padding-left:18px}
.ue-blocco{display:flex;align-items:center;gap:9px}
.ue-blocco svg{flex:none;color:var(--accento2)}
.ue-foto-stato{margin:12px 0 0;font-size:12.5px;color:var(--successo)}
.ue-foto-stato.errore{color:var(--pericolo)}
.ue-titoletto{margin:22px 0 10px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.ue-corpo > .ue-titoletto:first-child,.ue-corpo > .ue-foto-stato[hidden]:nth-child(1) + .ue-titoletto{margin-top:4px}

.ue-permessi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ue-permesso{
  --up:var(--ic-grigio);
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icona testo" ". scelta";gap:10px 12px;align-items:start;min-width:0;
  padding:13px 14px;border:1px solid var(--bordo);border-left:3px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--pannello);
  transition:border-color .15s,background-color .15s;
}
.ue-permesso.fpc{--up:var(--ic-verde)}
.ue-permesso.admin{--up:var(--ic-rosso)}
.ue-permesso.creatore{--up:var(--ic-viola)}
.ue-permesso.personale{--up:var(--ic-teal)}
.ue-permesso-icona{grid-area:icona;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pannello2);color:var(--tenue);transition:background-color .15s,color .15s}
.ue-permesso-icona svg{width:19px;height:19px}
.ue-permesso-testo{grid-area:testo;min-width:0}
.ue-permesso-testo b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.ue-permesso-testo small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--tenue)}
.ue-permesso-testo small.ue-permesso-nota{display:flex;align-items:center;gap:5px;margin-top:6px;color:var(--debole)}
.ue-permesso-nota svg{flex:none}
.ue-scelta{grid-area:scelta}
.ue-permesso:has(input[value="1"]:checked){border-left-color:var(--up);background:color-mix(in srgb,var(--up) 5%,var(--pannello))}
.ue-permesso:has(input[value="1"]:checked) .ue-permesso-icona{background:color-mix(in srgb,var(--up) 16%,transparent);color:var(--up)}
.ue-permesso.lampo{animation:ue-lampo .9s ease}
@keyframes ue-lampo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
@media (prefers-reduced-motion:reduce){.ue-permesso.lampo{animation:none}}

.ue-dati{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.setup-corpo .ue-dati .campo{margin-top:0}
.ue-dati input[readonly]{background:var(--pannello2);color:var(--tenue);cursor:default}
.ue-dati input[readonly]:focus{border-color:var(--bordo);box-shadow:none;background:var(--pannello2)}
.ue-avviso-mail{font-size:12px;line-height:1.45;color:var(--pos-ambra)}
.ue-azioni{align-items:center}
.ue-modifiche{font-size:12.5px;font-weight:600;color:var(--pos-ambra)}

/* legenda: tre gruppi di schede con icona, nome, colonna e frase; in fondo le regole generali */
.ue-legenda-corpo{padding:4px 20px 20px}
.ue-legenda-intro{margin:12px 0 0}
.ue-leg-gruppo{margin-top:12px}
.setup-gruppo-titolo.ue-leg-titolo{padding:8px 0 8px}
.ue-leg-voci{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px 12px;margin:0;padding:0;list-style:none}
.ue-leg-voce{--ul:var(--ic-blu);display:flex;align-items:flex-start;gap:11px;min-width:0;padding:11px 12px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2)}
.ue-leg-gruppo.chi .ue-leg-voce{--ul:var(--ic-grigio)}
.ue-leg-voce.fpc{--ul:var(--ic-verde)}
.ue-leg-voce.admin{--ul:var(--ic-rosso)}
.ue-leg-voce.creatore{--ul:var(--ic-viola)}
.ue-leg-voce.personale{--ul:var(--ic-teal)}
.ue-leg-icona{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--ul) 14%,transparent);color:var(--ul)}
.ue-leg-icona svg{width:17px;height:17px}
.ue-leg-testo{min-width:0}
.ue-leg-testo > b{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;font-size:13.5px;font-weight:600;line-height:1.35}
.ue-leg-colonna{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;font-weight:400;color:var(--debole)}
.ue-leg-testo > span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.ue-leg-regole{display:grid;gap:8px;margin:16px 0 0;padding:12px 14px;border:1px dashed var(--bordo-forte);border-radius:var(--raggio);list-style:none}
.ue-leg-regole li{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.ue-leg-regole svg{flex:none;margin-top:2px;color:var(--accento-testo)}

/* destra stretta (tablet, menu esteso): permessi e dati su una colonna; testata a griglia sotto i 520px */
@container uedestra (max-width:700px){
  .ue-permessi,.ue-dati{grid-template-columns:minmax(0,1fr)}
}
@container uedestra (max-width:520px){
  /* foto a sinistra con nome e "Cambia foto" accanto; sotto, a tutta larghezza, i campi fissi, la nota e la legenda */
  .ue-testa{
    display:grid;grid-template-columns:68px minmax(0,1fr);gap:8px 14px;align-items:center;padding:16px 14px;
    grid-template-areas:"foto nome" "foto cambia" "fissi fissi" "nota nota" "legenda legenda";
  }
  .ue-foto-box,.ue-identita{display:contents}
  .ue-foto{grid-area:foto;width:68px;height:68px}
  .ue-cambia{grid-area:cambia;justify-self:start}
  .riquadro h2.ue-nome{grid-area:nome;align-self:end;margin:0;font-size:18px}
  .ue-fissi{grid-area:fissi;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:6px}
  .ue-lucchetto{grid-area:nota;margin:2px 0 0}
  .ue-vai-legenda{grid-area:legenda;justify-self:start;padding:0}
  .ue-legenda-corpo{padding:4px 14px 16px}
  .ue-corpo.setup-corpo{padding:16px 14px 18px}
}

/* telefono: o l'elenco (come le impostazioni del telefono, righe dentro una scheda con la freccia) o la scheda */
@container uepagina (max-width:759px){
  .ue-guscio{grid-template-columns:minmax(0,1fr)}
  .ue-pagina[data-vista="elenco"] .ue-destra{display:none}
  .ue-pagina[data-vista="scheda"] .ue-sinistra,.ue-pagina[data-vista="scheda"] .ue-barra{display:none}
  .ue-pagina[data-vista="scheda"] .ue-indietro{
    display:inline-flex;align-items:center;gap:4px;min-height:40px;margin:0 0 10px;padding:4px 8px 4px 0;
    color:var(--accento-testo);font-size:15px;font-weight:600;text-decoration:none;
  }
  .ue-barra .tr-cerca{flex:1 1 100%}
  .ue-elenco.setup-nav{position:static;max-height:none;overflow:visible;padding:0;border:0;background:none;box-shadow:none}
  .ue-voci{border:1px solid var(--bordo);border-radius:10px;background:var(--pannello);overflow:hidden}
  .ue-voci li + li{border-top:1px solid var(--bordo)}
  .ue-elenco .setup-voce{min-height:64px;padding:11px 12px;border-radius:0}
  .ue-elenco .setup-voce-testo > b{font-size:15px}
  .ue-voce-ruolo{font-size:12.5px}
  .ue-voce-foto{width:44px;height:44px}
  .ue-elenco .setup-voce-freccia{display:block}
  .ue-elenco .setup-voce.attiva{background:none}
  .ue-elenco .setup-voce.attiva::before{display:none}
}
/* telefono: le due pillole No / Si' larghe uguali, icona e nome sulla stessa riga (piu' basse delle schede del Setup) */
@media (max-width:560px){
  .ue-scelta.prov-stati{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .ue-scelta .prov-stato{flex-direction:row;justify-content:center;gap:8px;min-height:44px;padding:5px 12px}
}
/* Report > Personale solo da consultare (01/10/2026): per gli amministratori il collegamento alla persona in Utenti EFFEPI */
.persona-modifica-utenti{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--accento-testo);text-decoration:none}
.persona-modifica-utenti:hover{text-decoration:underline}
.persona-modifica-utenti svg{flex:none}

/* ======================================================================
   FP CONNECT - Eliminare un cliente nato nel portale (01/10/2026)
   Prefisso ce-. Nella scheda del cliente (Clienti/Azienda.aspx) il cestino grigio accanto a Modifica (solo creatori e
   solo prospect) apre la finestra .dialogo-posta: i numeri di quello che sparisce in tessere, l'avvertenza "non si torna
   indietro" e il pulsante pericolo. js/cliente-elimina.js apre e chiude; tutto il resto lo fa App_Code/EliminaCliente.vb.
   ====================================================================== */
/* il cestino e' un'icona alta 32 accanto a pulsanti alti 38: al centro, non incollato in alto */
.az-azioni .ce-cestino{align-self:center}
.ce-dialogo{width:min(580px,94vw)}
.ce-dialogo .dialogo-posta-corpo{gap:14px}
.ce-icona{background:var(--pericolo);color:#fff}
.ce-spiega{margin:0;font-size:13.5px;line-height:1.6}
.ce-spiega b{font-weight:700}
/* le tessere: il numero grande in rosso pericolo e che cosa e', due per riga anche sul telefono */
.ce-voci{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.ce-voci li{
  display:flex;align-items:center;gap:10px;min-width:0;padding:8px 11px;
  border:1px solid var(--bordo);border-left:3px solid var(--pericolo);border-radius:8px;background:var(--pannello2);
}
.ce-voci b{flex:none;min-width:26px;font-size:18px;font-weight:700;line-height:1.1;color:var(--pericolo);font-variant-numeric:tabular-nums;text-align:right}
.ce-voci span{min-width:0;font-size:12.5px;line-height:1.35;color:var(--testo);overflow-wrap:anywhere}
.ce-nota{margin:-4px 0 0;font-size:12px;line-height:1.5;color:var(--tenue)}
.ce-avvertenza{
  display:flex;align-items:flex-start;gap:9px;margin:0;padding:10px 12px;
  border:1px solid var(--pericolo-bordo);border-radius:8px;background:var(--pericolo-velo);color:var(--testo);font-size:13px;line-height:1.55;
}
.ce-avvertenza svg{flex:none;margin-top:2px;color:var(--pericolo)}
/* dopo il primo clic il pulsante non si preme piu' (il postback e' partito) */
.ce-dialogo .bottone.pericolo.ce-in-corso{opacity:.6;pointer-events:none}
/* ripiego dove <dialog> non c'e' */
.ce-dialogo.ce-ripiego{position:fixed;z-index:120;left:50%;top:50%;transform:translate(-50%,-50%);max-height:86vh;overflow:auto;box-shadow:var(--ombra)}

/* telefono: la finestra diventa un foglio che sale dal basso (come le note), pulsanti larghi, niente scorrimento di lato */
@media (max-width:719px){
  .ce-voci{gap:6px}
  .ce-voci li{gap:8px;padding:7px 9px}
  .ce-voci b{min-width:20px;font-size:16px}
  .ce-dialogo{
    width:100%;max-width:none;margin:auto 0 0;
    border-radius:14px 14px 0 0;border-left:none;border-right:none;border-bottom:none;
  }
  .ce-dialogo .dialogo-posta-corpo{max-height:62vh}
  .ce-dialogo .dialogo-posta-piede{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .ce-dialogo .dialogo-posta-piede .bottone{flex:1;justify-content:center}
  .ce-dialogo.ce-ripiego{top:auto;bottom:0;left:0;transform:none}
}

/* Impostazioni > Manutenzione, "Copie dei clienti eliminati" (01/10/2026): il periodo come pillole (la casella vera e'
   nascosta da .pillole), l'avviso dell'archivio che non risponde e la cartella, che puo' essere lunga */
.ce-periodo{display:flex;flex-direction:column;gap:7px;padding:4px 20px 10px}
.ce-periodo > span{font-size:12.5px;color:var(--tenue)}
.ce-manut-avviso{margin:10px 20px 0}
.manut-corpo dl.dati.compatto dd.ce-manut-dove{font-size:12px;color:var(--tenue);overflow-wrap:anywhere}

/* === scegli azienda per la nuova opportunita' (01/10/2026) === */
/* Opportunita' > Nuova opportunita' (Campionature/ScegliAzienda.aspx, proposta C scelta dall'utente il 01/10/2026).
   In cima la fascia con la domanda, la ricerca grande e "+ Nuova azienda" (verde = crea); sotto le mattonelle delle
   ultime aziende dell'utente o, mentre si scrive, quelle trovate (js/scegli-azienda.js). Ogni mattonella e' tutta un
   collegamento al modulo dell'opportunita': marchio con le iniziali (8 colori fissi, sa-c1...sa-c8, dall'id
   dell'azienda), ragione sociale, luogo, PROSPECT giallo per le aziende nate nel portale, fascia sfumata a sinistra
   (verde i clienti, gialla i prospect), opportunita' e in fondo "+ Nuova opportunita'": il "+" e' la stessa icona di
   riga verde (icona-riga ir-crea) dell'elenco dei clienti, per coerenza; nessuna freccia verso destra (richiesta
   dell'utente del 01/10/2026). La prima mattonella, tratteggiata verde, e' "Nuova azienda".
   Le colonne seguono la larghezza della PAGINA (container "sa", non lo schermo: con il menu aperto o ridotto lo spazio
   cambia): 4 da 900px in su (computer), 2 sotto (sotto i 1100px dello schermo con il menu aperto, tablet), sotto i
   684px (telefono, schermo sotto i 720px) le mattonelle diventano righe-scheda: marchio | nome, luogo, numeri | il "+"
   verde da 40px. Mai scorrimento di lato. Colori del tema (chiaro e scuro) dalle variabili. */
.sa-pagina{container-type:inline-size;container-name:sa}

.sa-fascia{position:relative;margin:0 0 26px;padding:26px 28px;border:1px solid var(--bordo);border-radius:16px;box-shadow:var(--rilievo);
  background:linear-gradient(115deg,rgba(218,2,25,.16),rgba(255,122,89,.10) 38%,var(--pannello) 75%)}
.sa-fascia h2{margin:0 0 4px;font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.sa-fascia > p{margin:0 0 18px;color:var(--tenue);font-size:14.5px;line-height:1.45}
.sa-fila{display:flex;align-items:center;gap:14px}
.sa-cerca{position:relative;flex:1 1 auto;min-width:0}
.sa-cerca input[type=search]{display:block;width:100%;height:58px;margin:0;padding:0 18px 0 56px;border:2px solid var(--bordo-forte);border-radius:12px;
  background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:19px;box-shadow:none;-webkit-appearance:none;appearance:none}
.sa-cerca input[type=search]:hover{border-color:var(--bordo-forte)}
.sa-cerca input[type=search]:focus{border-color:var(--accento);box-shadow:0 0 0 4px var(--campo-alone)}
.sa-cerca input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
/* la lente e' il pulsante "Cerca" (senza script manda il modulo): dentro il campo, a sinistra, grande per il dito */
.sa-lente{position:absolute;left:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:10px;background:none;color:var(--tenue);cursor:pointer}
.sa-lente:hover,.sa-cerca:focus-within .sa-lente{color:var(--accento-testo)}
.sa-lente:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
/* mentre il server cerca: al posto della lente gira un anello (il testo del campo non si sposta) */
.sa-cerca.sa-in-corso .sa-lente svg{visibility:hidden}
.sa-cerca.sa-in-corso::after{content:"";position:absolute;left:19px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;
  border:2px solid var(--bordo);border-top-color:var(--accento);animation:sa-gira .8s linear infinite;pointer-events:none}
@keyframes sa-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sa-cerca.sa-in-corso::after{animation-duration:2.4s}}
.sa-nuova.bottone{flex:none;justify-content:center;gap:10px;height:58px;padding:0 22px;border-radius:12px;font-size:16px;font-weight:800;text-decoration:none}
.sa-nuova svg{flex:none}

/* titolo dell'elenco ed esito della ricerca */
.sa-testa{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 12px}
.sa-testa h3{margin:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.sa-esito{font-size:13px;color:var(--debole)}

/* le mattonelle */
.sa-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sa-mat{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:168px;padding:16px 16px 14px 20px;
  border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);box-shadow:var(--rilievo);overflow:hidden;
  color:var(--testo);text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.sa-mat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(180deg,var(--verde),rgba(30,158,87,.25))}
.sa-mat.sa-prospect::before{background:linear-gradient(180deg,#f5c518,rgba(245,197,24,.25))}
.sa-mat:hover{border-color:var(--bordo-forte);transform:translateY(-1px)}
.sa-mat:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.sa-alto{display:flex;align-items:center;gap:12px;min-width:0}
.sa-mono{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em}
.sa-c1{background:#1f6f8b}.sa-c2{background:#8a4fbf}.sa-c3{background:#c2410c}.sa-c4{background:#0f766e}
.sa-c5{background:#b91c1c}.sa-c6{background:#4d7c0f}.sa-c7{background:#1d4ed8}.sa-c8{background:#a16207}
.sa-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.sa-nome{font-weight:800;font-size:14.5px;line-height:1.25;overflow-wrap:anywhere}
.sa-dove{color:var(--tenue);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.sa-pill{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:4px;background:#f5c518;color:#2b2200;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;line-height:1.5;vertical-align:1px;white-space:nowrap}
.sa-numeri{margin-top:auto;color:var(--tenue);font-size:12.5px}
.sa-numeri b{color:var(--testo);font-weight:700}
/* in fondo: il "+" verde dell'elenco dei clienti (icona-riga ir-crea) seguito da "Nuova opportunita'" */
.sa-vai{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--bordo);
  color:var(--ic-verde);font-weight:800;font-size:13.5px}
.sa-alto + .sa-vai{margin-top:auto}
.sa-vai .icona-riga{flex:none}
.sa-mat:hover .sa-vai .icona-riga{background:color-mix(in srgb,var(--ic) 24%,transparent);border-color:var(--ic)}
/* "Nuova azienda": la prima mattonella, tratteggiata verde */
.sa-mat.sa-piu{align-items:center;justify-content:center;gap:8px;text-align:center;border:2px dashed var(--verde);background:rgba(30,158,87,.06);
  box-shadow:none;color:var(--ic-verde)}
.sa-mat.sa-piu::before{display:none}
.sa-mat.sa-piu:hover{border-color:var(--verde);background:rgba(30,158,87,.10)}
.sa-tondo{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--verde);color:#fff}
.sa-piu b{font-size:16px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.sa-piu small{color:var(--tenue);font-size:12.5px}
/* nessuna opportunita' ancora: la frase sta accanto a "Nuova azienda" */
.sa-vuoto{grid-column:2 / -1;align-self:center;margin:0;max-width:62ch;color:var(--tenue);font-size:14px;line-height:1.5}
/* ricerca senza risultati: il messaggio e l'invito a creare l'azienda */
.sa-nessuno{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 24px;border:1px dashed var(--bordo-forte);
  border-radius:12px;background:var(--pannello)}
.sa-nessuno p{margin:0;color:var(--tenue);font-size:14px;line-height:1.5}
.sa-nessuno p b{color:var(--testo);font-size:15px;overflow-wrap:anywhere}
.sa-nessuno .bottone{margin-top:6px;min-height:40px}

/* tablet e computer con poco spazio: due colonne */
@container sa (max-width:899px){
  .sa-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* telefono: fascia con ricerca e "Nuova azienda" a tutta larghezza; mattonelle in colonna come righe-scheda
   (marchio | nome, luogo, numeri | il "+" verde da 40px per il dito); "Nuova azienda" c'e' gia' nella fascia */
@container sa (max-width:683px){
  .sa-fascia{margin-bottom:20px;padding:18px 16px;border-radius:14px}
  .sa-fascia h2{font-size:20px}
  .sa-fascia > p{margin-bottom:14px;font-size:13.5px}
  .sa-fila{flex-direction:column;align-items:stretch;gap:10px}
  .sa-cerca input[type=search]{height:52px;padding:0 12px 0 48px;font-size:16px}
  .sa-lente{left:3px}
  .sa-cerca.sa-in-corso::after{left:16px}
  .sa-nuova.bottone{height:50px}
  .sa-testa{flex-direction:column;align-items:flex-start;gap:2px}
  .sa-griglia{grid-template-columns:minmax(0,1fr);gap:10px}
  .sa-mat{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"alto vai" "num vai";align-items:center;
    column-gap:10px;row-gap:4px;min-height:0;padding:12px 12px 12px 18px}
  .sa-mat:hover{transform:none}
  .sa-alto{grid-area:alto}
  .sa-nome{font-size:14px}
  .sa-numeri{grid-area:num;margin:0;padding-left:54px;font-size:12px}
  .sa-vai,.sa-alto + .sa-vai{grid-area:vai;align-self:center;margin:0;padding:0;border:0}
  .sa-vai .icona-riga{width:40px;height:40px}
  .sa-vai .icona-riga svg{width:19px;height:19px}
  .sa-vai-testo{display:none}
  .sa-mat.sa-piu{display:none}
  .sa-vuoto{grid-column:auto}
  .sa-nessuno{padding:18px 16px}
  .sa-nessuno .bottone{align-self:stretch;justify-content:center}
}
/* === fine scegli azienda === */

/* === filtri del catalogo riordinati (01/10/2026) ===
   L'utente: "il tasto FILTRI non e' ben visibile e quando apro i campi sono tutti disordinati e disallineati".
   1) Il pulsante Filtri (catalogo ed elenco opportunita'): alto come la ricerca, tinta e bordo rossi, testo marcato;
      aperto = rosso pieno. 2) Il pannello del catalogo: tre schede alla stessa altezza (Misure | Filato | Famiglia e
      collezione), ogni misura su una riga "nome | da - a" con le caselle allineate in colonna, niente frecce dei numeri,
      caselle alte 40px. Due colonne sotto 1100px, una sotto 720px (telefono: il nome sopra, da - a sotto). */
.bottone.vuoto.cat-filtri-apri{
  min-height:40px;padding:0 16px;gap:9px;border:1.5px solid color-mix(in srgb,var(--accento) 55%,transparent);
  background:var(--accento-velo);color:var(--testo);font-weight:700;font-size:14px;letter-spacing:.01em;
}
.bottone.vuoto.cat-filtri-apri svg{color:var(--accento-testo)}
.bottone.vuoto.cat-filtri-apri:hover{border-color:var(--accento);color:var(--testo);background:color-mix(in srgb,var(--accento) 16%,transparent)}
.bottone.vuoto.cat-filtri-apri[aria-expanded="true"]{background:var(--accento);border-color:var(--accento);color:#fff}
.bottone.vuoto.cat-filtri-apri[aria-expanded="true"] svg{color:#fff}
.bottone.vuoto.cat-filtri-apri[aria-expanded="true"] .conta{background:#fff;color:var(--accento)}

.cf-griglia{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1.1fr) minmax(0,.95fr);gap:14px;align-items:stretch}
.cf-scheda{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 16px 16px;border:1px solid var(--bordo);border-radius:10px;background:var(--pannello2)}
.cf-titolo{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.cf-titolo svg{flex:none;color:var(--accento-testo)}
.cf-secondo{margin-top:10px}
.cf-riga{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,96px) 12px minmax(0,96px);align-items:center;gap:8px}
.cf-misure .cf-riga + .cf-riga{padding-top:10px;border-top:1px dashed var(--bordo)}
/* il nome scorre come testo (icona, nome e unita' restano insieme anche se va a capo) */
.cf-nome{display:block;min-width:0;font-size:14px;line-height:1.3;color:var(--testo)}
.cf-nome svg{vertical-align:-3px;margin-right:6px;color:var(--accento-testo)}
.cf-nome b{font-weight:600}
.cf-nome small{color:var(--debole);font-size:12px;white-space:nowrap}
.cf-tra{text-align:center;color:var(--debole)}
.cf-scheda input[type=number],.cf-scheda select,.cf-scheda .cat-filato-campo input{
  width:100%;min-width:0;height:40px;padding:0 10px;border:1px solid var(--bordo-forte);border-radius:6px;
  background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:16px;
}
.cf-scheda .cat-filato-campo input{padding-right:46px}
.cf-scheda input[type=number]{-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.cf-scheda input[type=number]::-webkit-inner-spin-button,.cf-scheda input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cf-scheda input::placeholder{color:var(--debole)}
.cf-scheda input:focus,.cf-scheda select:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.cf-scheda .cat-filato-apri{top:1px;bottom:1px;right:1px;border-radius:0 5px 5px 0}
.cf-scheda .cat-filato-combo{font-size:12px}
/* nel filato la percentuale ha il nome sopra, come "Nome del filato" */
.cf-filato .cf-riga{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);row-gap:4px;margin-top:2px}
.cf-filato .cf-nome{grid-column:1/-1;font-size:12px;color:var(--tenue)}
.cf-filato .cf-nome b{font-weight:400}
.cf-nota{font-size:11.5px;line-height:1.4;color:var(--debole)}
.cf-pillole{display:flex;flex-wrap:wrap;gap:6px}
.cf-pillole .cat-pillola span{padding:8px 14px;font-size:13px}
.cat-filtri .cat-filtri-piede{margin-top:14px;padding-top:12px;border-top:1px solid var(--bordo)}
@media (max-width:1100px){
  .cf-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-tipo{grid-column:1/-1}
}
@media (max-width:719px){
  .cf-griglia{grid-template-columns:minmax(0,1fr);gap:12px}
  .cf-scheda{padding:12px 12px 14px}
  .cf-riga{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);row-gap:6px}
  .cf-nome{grid-column:1/-1}
}
/* === fine filtri del catalogo === */

/* === filtri dell'elenco opportunita' come il catalogo (01/10/2026) ===
   Stesse schede .cf-scheda del catalogo; qui le schede sono uguali e si dispongono da sole (2 o 3 secondo chi guarda:
   agente del cliente per gli interni, "Inserite da" per il supervisore). Date "Dal - Al" sulla stessa riga, alte 40px. */
.cf-griglia.cf-uguali{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.cf-griglia.cf-uguali > .cf-scheda{grid-column:auto}
.cf-scheda input[type=date]{
  width:100%;min-width:0;height:40px;padding:0 10px;border:1px solid var(--bordo-forte);border-radius:6px;
  background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:15px;
}
html[data-tema="scuro"] .cf-scheda input[type=date]{color-scheme:dark}
.cf-due{display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);align-items:end;gap:8px}
.cf-due label{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;color:var(--tenue)}
.cf-due .cf-tra{padding-bottom:11px}
.cf-scheda .cat-pillole{display:flex;flex-wrap:wrap;gap:6px}
.cf-scheda .cat-pillola span,.cf-scheda .deal-periodi button{padding:8px 14px;font-size:13px}
.cf-scheda .deal-periodi{margin-top:2px}
.cf-scheda .cat-filato-combo label{font-size:12px;color:var(--tenue)}
/* === fine filtri dell'elenco opportunita' === */

/* === filtri dell'elenco aziende come gli altri elenchi (01/10/2026) ===
   Pulsante Filtri e pannello come nel catalogo e nelle opportunita'; nel pannello per ora una scheda sola (agente del
   cliente): non si allarga su tutta la riga. Le pillole sono i LinkButton di sempre (a.vp-filtro), la tendina
   select.ag-scelta prende l'aspetto delle caselle delle schede. */
.az-filtri .cf-griglia.cf-uguali{grid-template-columns:minmax(0,560px)}
/* su computer Filtri sta accanto a "+ Nuova azienda", a destra (come nell'elenco delle opportunita'); sul telefono
   la barra va a capo e restano Filtri a sinistra e Nuova azienda a destra */
@media (min-width:720px){#azFiltriApri{margin-left:auto}}
/* riga VALIDAZIONE (elenco aziende ed elenco opportunita'): sul telefono la scritta sta sopra e le tre pillole sotto,
   tutte sulla stessa riga ("Da validare" non va piu' a capo da sola; utente, 01/10/2026) */
@media (max-width:719px){
  .vp-filtri{row-gap:8px}
  .vp-filtri-titolo{flex-basis:100%}
}
.cf-scheda a.vp-filtro{padding:8px 14px;font-size:13px}
.cf-scheda select.ag-scelta{
  max-width:100%;height:40px;padding:0 30px 0 12px;border-radius:6px;border-color:var(--bordo-forte);
  background-color:var(--campo-attivo);color:var(--testo);font-size:15px;font-weight:400;
}
.cf-scheda select.ag-scelta.attiva{border-color:color-mix(in srgb,#3b7bff 45%,transparent);background-color:color-mix(in srgb,#3b7bff 10%,var(--campo-attivo))}
/* === fine filtri dell'elenco aziende === */

/* === elenco clienti a schede (01/10/2026, versione B scelta dall'utente) ===
   Una scheda per azienda come le mattonelle di Nuova opportunita' (marchio sa-mono sa-cN, fascia verde clienti /
   gialla prospect), tre per riga, due sotto 1100px, una sul telefono. In fondo "Scheda" blu e "Opportunita'" verde;
   niente matita (la modifica si apre dalla scheda). L'ordine si sceglie con le pillole .ec-ordina. */
.ec-ordina{border-top:1px solid var(--bordo);margin-top:12px;padding-top:12px}
.riquadro > .vp-filtri.ec-ordina{padding:12px 16px 2px}
.ec-ordina a.vp-filtro svg{margin-left:2px;color:var(--accento-testo)}
.ec-corpo{padding:14px 16px 16px}
.ecb-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ecb-mat{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px 18px 16px 22px;border-radius:14px;border:1px solid var(--bordo);background:var(--pannello);box-shadow:var(--rilievo);overflow:hidden}
.ecb-mat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(180deg,var(--verde),rgba(30,158,87,.2))}
.ecb-mat.prospect::before{background:linear-gradient(180deg,#f5c518,rgba(245,197,24,.2))}
.ecb-alto{display:flex;gap:14px;align-items:flex-start;min-width:0}
.ecb-alto .sa-mono{width:54px;height:54px;font-size:18px;border-radius:12px}
.ecb-id{display:flex;flex-direction:column;min-width:0}
a.ecb-nome{font-weight:800;font-size:16px;line-height:1.25;color:var(--testo);text-decoration:none;overflow-wrap:anywhere}
a.ecb-nome:hover{color:var(--blu)}
html[data-tema="scuro"] a.ecb-nome:hover{color:#8ab4ff}
.ecb-codice{font-size:12px;color:var(--debole);margin-top:2px;letter-spacing:.04em}
.ecb-etichette{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ecb-etichette .az-agenti{display:contents}
.ecb-righe{display:grid;gap:6px;font-size:13px;color:var(--tenue)}
.ecb-righe span{display:flex;align-items:center;gap:8px;min-width:0}
.ecb-righe svg{flex:none;color:var(--debole)}
.ecb-numeri{font-size:12.5px;color:var(--tenue)}
.ecb-numeri b{color:var(--testo)}
.ecb-numeri.zero{color:var(--debole)}
.ecb-piede{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.ecb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:700;border:1px solid;text-decoration:none}
.ecb-btn.blu{border-color:color-mix(in srgb,var(--blu) 45%,transparent);background:color-mix(in srgb,var(--blu) 9%,var(--pannello));color:var(--blu)}
.ecb-btn.verde{border-color:color-mix(in srgb,var(--verde) 45%,transparent);background:color-mix(in srgb,var(--verde) 9%,var(--pannello));color:var(--verde)}
.ecb-btn:hover{filter:brightness(.97);border-width:1.5px}
/* tema scuro: piu' luce (l'utente: "il tasto scheda non si vede tanto"): fondo pieno piu' acceso, bordo chiaro,
   scritta quasi bianca */
html[data-tema="scuro"] .ecb-btn.blu{background:color-mix(in srgb,#3b7bff 30%,var(--pannello));border-color:rgba(138,180,255,.85);color:#e3ecff}
html[data-tema="scuro"] .ecb-btn.verde{background:color-mix(in srgb,#1e9e57 28%,var(--pannello));border-color:rgba(94,201,140,.8);color:#ddf7e8}
html[data-tema="scuro"] .ecb-btn:hover{filter:brightness(1.15)}
@media (max-width:1100px){.ecb-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){
  .ecb-griglia{grid-template-columns:minmax(0,1fr);gap:10px}
  .ec-corpo{padding:12px}
  .ecb-mat{padding:14px 14px 14px 18px;gap:10px}
}
/* elenco opportunita': "Scheda cliente" sotto la localita' (versione 2 scelta dall'utente) */
a.deal-scheda-cliente{display:inline-flex;align-items:center;gap:6px;width:max-content;margin-top:6px;padding:4px 10px 4px 8px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--blu) 40%,transparent);background:color-mix(in srgb,var(--blu) 8%,var(--pannello));color:var(--blu);
  font-size:12px;font-weight:700;text-decoration:none}
a.deal-scheda-cliente:hover{border-color:var(--blu)}
html[data-tema="scuro"] a.deal-scheda-cliente{background:color-mix(in srgb,#3b7bff 30%,var(--pannello));border-color:rgba(138,180,255,.85);color:#e3ecff}
/* === fine elenco clienti a schede === */

/* === registro attivita' a linea del tempo (01/10/2026, versione B scelta dall'utente) ===
   Eventi raggruppati per giorno; ora | pallino sulla linea | due righe (chi, IMPERSONATE, azione, cosa / mail,
   indirizzo, provenienza, IP, dispositivo). Pallino rosso pieno e fondo rosato per le righe in impersonate. */
.lgb-giorno{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 18px;background:var(--pannello2);border-bottom:1px solid var(--bordo);font-size:13px}
.lgb-giorno b{font-weight:800}
.lgb-giorno b::first-letter{text-transform:uppercase}
.lgb-giorno span{color:var(--tenue);font-size:12px}
.lgb-ev{display:grid;grid-template-columns:72px 14px minmax(0,1fr);gap:12px;padding:8px 18px;border-bottom:1px solid color-mix(in srgb,var(--bordo) 60%,transparent)}
.lgb-ev:hover{background:color-mix(in srgb,var(--accento2) 6%,var(--pannello))}
.lgb-ev.prova{background:color-mix(in srgb,var(--accento) 6%,var(--pannello))}
.lgb-ora{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;padding-top:2px}
.lgb-punto{position:relative}
.lgb-punto::before{content:"";position:absolute;left:6px;top:-8px;bottom:-8px;width:2px;background:var(--bordo)}
.lgb-punto::after{content:"";position:absolute;left:2px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--pannello);border:2px solid var(--accento2)}
.lgb-ev.prova .lgb-punto::after{border-color:var(--accento);background:var(--accento)}
.lgb-corpo{min-width:0}
.lgb-riga1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13.5px;line-height:1.35}
.lgb-chi{font-weight:700}
.lgb-cosa{min-width:0;overflow-wrap:anywhere}
.lgb .badge{white-space:nowrap}
.lgb .badge.prova{border-color:var(--accento);background:var(--accento);color:#fff;font-size:9.5px;letter-spacing:.06em;padding:1px 7px}
.lgb-riga2{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;margin-top:3px;font-size:11.5px;color:var(--debole)}
.lgb-riga2 .lgb-url{color:var(--tenue);overflow-wrap:anywhere}
.lgb-riga2 .provenienza .testo{font-size:11.5px}
.lgb-ip{font-family:Consolas,"SFMono-Regular",Menlo,monospace}
@media (max-width:719px){
  .lgb-ev{grid-template-columns:58px 12px minmax(0,1fr);gap:8px;padding:8px 12px}
  .lgb-giorno{padding:10px 12px}
  .lgb-ora{font-size:12px}
}
/* === fine registro attivita' a linea del tempo === */

/* === elenco clienti: stato e validazione nel pannello Filtri, ordine solo per ragione sociale (01/10/2026) ===
   Il pannello ora ha piu' schede (stato, validazione e, per gli interni, l'agente): si dispongono da sole. Le pillole
   dello stato hanno il pallino del colore della scheda (verde cliente, giallo prospect). */
.az-filtri .cf-griglia.cf-uguali{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
a.vp-filtro.st-cliente::before,a.vp-filtro.st-prospect::before{content:"";flex:none;width:8px;height:8px;border-radius:50%}
a.vp-filtro.st-cliente::before{background:var(--verde)}
a.vp-filtro.st-prospect::before{background:#f5c518}
a.vp-filtro.st-cliente.attiva{border-color:color-mix(in srgb,var(--verde) 50%,transparent);background:color-mix(in srgb,var(--verde) 12%,var(--pannello))}
a.vp-filtro.st-prospect.attiva{border-color:color-mix(in srgb,#f5c518 60%,transparent);background:color-mix(in srgb,#f5c518 14%,var(--pannello))}
.ec-ordina a.vp-filtro b{font-weight:800;margin-left:2px}
.riquadro > .vp-filtri.ec-ordina{border-top:0;margin-top:0;padding-top:14px}
/* === fine stato e validazione nel pannello Filtri === */

/* ---------- Impostazioni > Struttura del menu a matrice (02/10/2026, versione C scelta dall'utente) ----------
   Ogni voce e' una riga con la banda a sinistra: verde se la voce e' attiva, grigia se e' disattiva. Le frecce
   su / giu' cambiano l'ordine (al posto del numero Ordinamento); una colonna per gruppo con la spunta verde quando
   il gruppo la vede; a destra "Come lo vede", il menu come appare a ogni gruppo (js/menu-anteprima.js).
   Su iPad il riquadro "Come lo vede" va sotto l'elenco; sul telefono ogni voce diventa una scheda, con frecce e
   icone in cima e i gruppi come pillole sotto (mai scorrere di lato). */
.ms-riquadro{overflow:visible}
.msv-legenda{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--bordo);font-size:12px;color:var(--tenue)}
.msv-legenda span{display:inline-flex;align-items:center;gap:6px}
.msv-legenda i{display:inline-block;width:5px;height:16px;border-radius:3px}
.msv-legenda svg{color:var(--testo)}
.msv-on{background:var(--ic-verde)}
.msv-off{background:#8b9aa1}

.msvc{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;padding:14px 16px 16px;align-items:start}
.msvc-elenco{min-width:0;border:1px solid var(--bordo);border-radius:12px;overflow:hidden;background:var(--pannello)}
.msvc-testa,.msvc-riga{display:grid;grid-template-columns:60px minmax(0,1fr) 62px 62px 72px 62px 66px 80px;align-items:center;gap:8px;padding:8px 12px 8px 14px}
.msvc-testa{background:var(--pannello2);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue);border-bottom:1px solid var(--bordo)}
.msvc-testa span{text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msvc-testa span:nth-child(2){text-align:left}
.msvc-riga{position:relative;border-bottom:1px solid var(--bordo)}
.msvc-riga:last-of-type{border-bottom:0}
.msvc-riga::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ic-verde)}
.msvc-riga.spenta::before{background:#8b9aa1}
.msvc-riga.padre{background:color-mix(in srgb,var(--pannello2) 55%,transparent)}
.msvc-riga:hover{background:color-mix(in srgb,var(--accento) 4%,var(--pannello))}
.msvc-voce{display:flex;align-items:center;gap:10px;min-width:0}
.msvc-riga.figlio .msvc-voce{padding-left:26px;position:relative}
.msvc-riga.figlio .msvc-voce::before{content:"";position:absolute;left:8px;top:-8px;height:18px;width:11px;border-left:2px solid var(--bordo-forte);border-bottom:2px solid var(--bordo-forte);border-radius:0 0 0 6px}
.msvc-testi{flex:1 1 auto;min-width:0}
.msv-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--accento) 10%,var(--pannello2));color:var(--accento-testo)}
.msvc-riga.spenta .msv-ico{background:var(--pannello2);color:var(--debole)}
.msv-nome{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-weight:800;font-size:14.5px;line-height:1.25}
.msv-nome span{min-width:0;overflow-wrap:anywhere}
.msvc-riga.figlio .msv-nome{font-weight:700;font-size:13.5px}
.msvc-riga.spenta .msv-nome{color:var(--tenue)}
/* la pagina su una riga sola, con i puntini quando non ci sta (intera nel suggerimento) */
.msv-url{display:flex;align-items:center;gap:8px;min-width:0;margin-top:2px;font-size:11.5px;color:var(--debole)}
.msv-url span{flex:0 1 auto;min-width:0;font-family:Consolas,"SFMono-Regular",Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msv-spenta,.msv-singoli{flex:none;font-size:10px;font-weight:700;letter-spacing:.03em;line-height:1.5;padding:0 8px;border-radius:999px;border:1px solid}
.msv-spenta{text-transform:uppercase;color:#6f7f86;border-color:color-mix(in srgb,#8b9aa1 45%,transparent);background:color-mix(in srgb,#8b9aa1 12%,var(--pannello))}
.msv-singoli{color:var(--ic-blu);border-color:color-mix(in srgb,var(--ic-blu) 40%,transparent);background:color-mix(in srgb,var(--ic-blu) 9%,var(--pannello))}
html[data-tema="scuro"] .msv-spenta{color:#b7c1c6}

/* frecce dell'ordine: la prima voce non sale, l'ultima non scende (freccia sbiadita, resta al suo posto) */
.msv-frecce{display:flex;flex-direction:column;align-items:center;gap:3px}
.msv-freccia{width:30px;height:22px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--bordo-forte);background:var(--pannello);color:var(--testo);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
a.msv-freccia:not(.spento):hover,a.msv-freccia:not(.spento):focus-visible{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
.msv-freccia.spento{opacity:.28;cursor:default;pointer-events:none}
.msv-azioni{display:flex;gap:8px;align-items:center;justify-content:flex-end}

/* i gruppi: spunta verde = la vede, croce grigia = no; il nome (em) si vede solo sul telefono */
.msvc-cella{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.msvc-cella em{display:none;font-style:normal}
.msvc-si,.msvc-no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.msvc-si{background:color-mix(in srgb,var(--ic-verde) 16%,var(--pannello));color:var(--ic-verde)}
.msvc-no{background:var(--pannello2);color:var(--debole)}
.msvc-riga.spenta .msvc-si{filter:grayscale(1);opacity:.55}

/* "Come lo vede" */
.msvc-ante{position:sticky;top:calc(var(--testata) + 14px);border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);overflow:hidden;max-height:calc(100vh - var(--testata) - 28px);overflow-y:auto}
.msvc-ante h4{margin:0;padding:10px 14px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);background:var(--pannello2);border-bottom:1px solid var(--bordo)}
.msvc-ante .scelta{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--bordo)}
.msvc-ante .scelta button{font:inherit;padding:4px 11px;border-radius:999px;border:1px solid var(--bordo);background:var(--pannello);font-size:12px;color:var(--tenue);cursor:pointer}
.msvc-ante .scelta button:hover{border-color:var(--bordo-forte);color:var(--testo)}
.msvc-ante .scelta button.attiva{border-color:var(--accento);background:var(--accento-velo);color:var(--testo);font-weight:700}
.msvc-ante ul{list-style:none;margin:0;padding:8px 6px}
.msvc-ante ul[hidden]{display:none}
.msvc-ante li{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;font-size:13.5px;font-weight:600;min-width:0}
.msvc-ante li span{min-width:0;overflow-wrap:anywhere}
.msvc-ante li.figlio{padding:4px 10px 4px 36px;font-weight:500;font-size:12.5px;color:var(--tenue)}
.msvc-ante li.vuoto{font-weight:500;font-style:italic;color:var(--tenue)}
.msvc-ante li svg{flex:none;color:var(--tenue)}
.msvc-ante .nota{margin:0;padding:10px 14px 12px;border-top:1px solid var(--bordo);font-size:11.5px;line-height:1.45;color:var(--tenue)}

/* dita (iPad, telefono): frecce piu' grandi, una accanto all'altra */
@media (pointer:coarse){
  .msv-frecce{flex-direction:row;gap:4px}
  .msv-freccia{width:34px;height:34px;border-radius:8px}
  .msvc-testa,.msvc-riga{grid-template-columns:76px minmax(0,1fr) 60px 60px 70px 60px 64px 84px}
}
/* iPad e schermi medi: "Come lo vede" sotto l'elenco, i gruppi su due colonne */
@media (max-width:1180px){
  .msvc{grid-template-columns:minmax(0,1fr)}
  .msvc-ante{position:static;max-height:none}
  .msvc-ante ul{columns:2;column-gap:12px}
  .msvc-ante li{break-inside:avoid}
}
@media (max-width:900px){
  .msvc-testa,.msvc-riga{grid-template-columns:76px minmax(0,1fr) 50px 50px 58px 50px 54px 84px;gap:6px}
  .msvc-testa{font-size:9.5px;letter-spacing:.03em}
}
/* telefono: ogni voce e' una scheda; in cima nome, frecce e icone, sotto i quattro gruppi come pillole */
@media (max-width:640px){
  .msvc{padding:10px 10px 12px;gap:12px}
  .msv-legenda{padding:10px 12px;gap:6px 14px}
  .msvc-elenco{border:0;border-radius:0;background:transparent;overflow:visible;display:grid;gap:10px}
  .msvc-testa{display:none}
  .msvc-riga{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 10px 10px 16px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);box-shadow:var(--rilievo);overflow:hidden}
  .msvc-riga:last-of-type{border-bottom:1px solid var(--bordo)}
  .msvc-riga.padre{background:var(--pannello)}
  .msvc-riga.figlio{margin-left:14px}
  .msvc-riga.figlio .msvc-voce{padding-left:0}
  .msvc-riga.figlio .msvc-voce::before{display:none}
  .msvc-voce{order:1;flex:1 1 0;min-width:0}
  .msv-frecce{order:2;flex:none}
  .msv-azioni{order:3;flex:none}
  /* a capo dopo nome, frecce e icone: i gruppi vanno sempre sotto, due per riga */
  .msvc-riga::after{content:"";order:4;flex:0 0 100%;height:0;margin-top:-8px}
  .msvc-cella{order:5;flex:1 1 calc(50% - 4px);justify-content:flex-start;padding:4px 8px 4px 4px;border-radius:999px;border:1px solid var(--bordo);font-size:12px;font-weight:700;color:var(--debole)}
  .msvc-cella em{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .msvc-cella.si{color:var(--testo);border-color:color-mix(in srgb,var(--ic-verde) 40%,transparent);background:color-mix(in srgb,var(--ic-verde) 7%,var(--pannello))}
  .msvc-si,.msvc-no{width:22px;height:22px}
  .msv-ico{width:30px;height:30px}
  .msvc-ante ul{columns:1}
}

/* 02/10/2026, Struttura del menu: la voce appena spostata con le frecce lampeggia un momento (js/menu-anteprima.js
   la rimette alla stessa altezza dello schermo e le da' .appena-spostata per 1,6 secondi) */
.msvc-riga.appena-spostata{animation:msv-lampo 1.5s ease-out}
@keyframes msv-lampo{from,30%{background-color:color-mix(in srgb,var(--ic-verde) 22%,var(--pannello))}}
/* 10/10/2026, Struttura del menu: la colonna "Solo creatori" in piu'; la testata va su due righe (SOLO / ADMIN) */
.msvc-testa{font-size:9.5px;letter-spacing:.03em;line-height:1.2}
.msvc-testa span{white-space:normal;text-overflow:clip}
@media (prefers-reduced-motion:reduce){.msvc-riga.appena-spostata{animation:none;outline:2px solid var(--ic-verde);outline-offset:-2px}}

/* ---------- Avvisi in primo piano (02/10/2026, proposta C "carte in pila") ----------
   Cruscotto: <dialog class="avp"> con una carta per avviso (InfoAgenti.HtmlFinestra, js/avviso-primo-piano.js); la
   banda a sinistra e la pillola hanno il colore del livello come le righe del riquadro avvisi; sotto la carta si
   intravedono le altre da leggere (data-resto 0/1/2). Sul telefono la carta occupa quasi tutto e i tasti vanno uno
   sotto l'altro, "Ok, letto" in alto. Gestione avvisi: "Attivo" e "In primo piano" come schede con l'interruttore. */
html.avp-aperta,html.avp-aperta body{overflow:hidden}
dialog.avp{width:min(560px,calc(100vw - 28px));max-width:none;max-height:none;margin:auto;padding:0 0 28px;border:0;background:transparent;color:var(--testo);overflow:visible}
dialog.avp::backdrop{background:rgba(2,12,18,.64);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
html[data-tema="chiaro"] dialog.avp::backdrop{background:rgba(48,36,24,.42)}
dialog.avp:focus{outline:none}
.avp-pila{position:relative}
.avp-carta{--liv:var(--accento2);--liv-testo:var(--accento2);
  position:relative;display:flex;flex-direction:column;max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);
  border-radius:18px;overflow:hidden;background:var(--pannello);border:1px solid var(--bordo);
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.avp-carta.livello-novita{--liv:var(--successo);--liv-testo:var(--successo)}
.avp-carta.livello-importante{--liv:var(--accento);--liv-testo:var(--accento-testo)}
.avp-carta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--liv);z-index:1}
.avp-carta:focus{outline:none}
/* le carte che restano da leggere, una o due, si intravedono sotto */
.avp-pila[data-resto="1"] .avp-carta{box-shadow:0 13px 0 -6px color-mix(in srgb,var(--pannello) 78%,var(--testo) 22%),0 30px 70px rgba(0,0,0,.45)}
.avp-pila[data-resto="2"] .avp-carta{box-shadow:0 13px 0 -6px color-mix(in srgb,var(--pannello) 78%,var(--testo) 22%),0 26px 0 -12px color-mix(in srgb,var(--pannello) 88%,var(--testo) 12%),0 30px 70px rgba(0,0,0,.45)}
.avp-riga1{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 24px 0 30px}
.avp-riga1 small{font-size:12px;color:var(--tenue)}
.avp-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--liv-testo);border:1px solid color-mix(in srgb,var(--liv) 45%,transparent);background:color-mix(in srgb,var(--liv) 12%,var(--pannello))}
.avp-carta h2{margin:12px 24px 8px 30px;font-size:21px;line-height:1.25;overflow-wrap:anywhere}
.avp-testo{flex:1 1 auto;min-height:0;overflow:auto;padding:0 24px 8px 30px;font-size:14.5px;line-height:1.62;color:var(--testo);overflow-wrap:anywhere}
.avp-testo p{margin:0 0 10px}
.avp-testo ul,.avp-testo ol{margin:0 0 10px;padding-left:20px}
.avp-testo img{max-width:100%;height:auto;border-radius:8px}
.avp-prova{margin:4px 24px 0 30px;padding:8px 12px;border-radius:10px;font-size:12px;line-height:1.45;color:var(--pos-ambra);border:1px dashed color-mix(in srgb,var(--pos-ambra) 55%,transparent);background:color-mix(in srgb,var(--pos-ambra) 8%,var(--pannello))}
.avp-errore{margin:8px 24px 0 30px;font-size:12.5px;font-weight:600;color:var(--pericolo)}
.avp-piede{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px 18px 30px;border-top:1px solid var(--bordo);margin-top:6px}
.avp-piede time{font-size:12px;color:var(--debole)}
.avp-tasti{display:flex;align-items:center;gap:10px}
.avp-ok,.avp-dopo{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;font:inherit;cursor:pointer;transition:filter .15s,background-color .15s,border-color .15s}
.avp-ok{padding:12px 24px;border:0;background:#1e9e57;color:#fff;font-weight:800;font-size:15px;box-shadow:0 6px 18px rgba(30,158,87,.35)}
.avp-ok:hover{filter:brightness(1.08)}
.avp-dopo{padding:11px 18px;border:1px solid var(--bordo-forte);background:var(--pannello);color:var(--testo);font-weight:700;font-size:14px}
.avp-dopo:hover{border-color:var(--accento2)}
.avp-ok:focus-visible,.avp-dopo:focus-visible{outline:2px solid var(--accento2);outline-offset:3px}
.avp-ok:disabled,.avp-dopo:disabled{opacity:.6;cursor:default}
/* entrata della carta e uscita quando si sceglie */
.avp-carta.arriva{animation:avp-arriva .32s ease-out}
.avp-carta.via{animation:avp-via .28s ease-in forwards}
@keyframes avp-arriva{from{transform:translateY(14px) scale(.96);opacity:.4}to{transform:none;opacity:1}}
@keyframes avp-via{to{transform:translateY(-40px) rotate(-3deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.avp-carta.arriva,.avp-carta.via{animation:none}}
@media (max-width:640px){
  dialog.avp{width:calc(100vw - 24px);padding-bottom:22px}
  .avp-riga1{padding:16px 18px 0 24px}
  .avp-carta h2{margin:10px 18px 8px 24px;font-size:19px}
  .avp-testo{padding:0 18px 8px 24px}
  .avp-prova,.avp-errore{margin-left:24px;margin-right:18px}
  .avp-piede{flex-direction:column-reverse;align-items:stretch;padding:14px 18px 18px 24px}
  .avp-piede time{text-align:center}
  .avp-tasti{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .avp-ok{width:100%;padding:14px}
  .avp-dopo{width:100%;padding:12px}
}

/* Gestione avvisi: "Attivo" e "In primo piano" come schede con l'interruttore; la casella vera c'e' ma non si vede */
.gi-scelte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 4px}
.gi-scelta{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);cursor:pointer;transition:border-color .15s,background-color .15s}
.gi-scelta input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.gi-scelta .cursore{position:relative;flex:none;width:38px;height:22px;margin-top:2px;border-radius:999px;background:var(--bordo-forte);transition:background-color .2s}
.gi-scelta .cursore::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.gi-scelta:has(input:checked) .cursore::after{left:19px}
.gi-scelta.attivo:has(input:checked) .cursore{background:var(--verde)}
.gi-scelta.primo:has(input:checked){border-color:color-mix(in srgb,var(--accento) 45%,transparent);background:color-mix(in srgb,var(--accento) 6%,var(--pannello))}
.gi-scelta.primo:has(input:checked) .cursore{background:var(--accento)}
.gi-scelta:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
.gi-scelta-testo{min-width:0}
.gi-scelta-testo b{display:block;font-size:14px;color:var(--testo)}
.gi-scelta-testo small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--tenue)}
.gi-primo{display:inline-flex;align-items:center;gap:5px;margin-top:3px;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accento-testo);border:1px solid color-mix(in srgb,var(--accento) 45%,transparent);background:color-mix(in srgb,var(--accento) 10%,var(--pannello))}
.gi-letture{display:block;margin:-3px 0 6px;font-size:11.5px;color:var(--tenue)}
@media (max-width:640px){.gi-scelte{grid-template-columns:minmax(0,1fr)}}

/* ---------- Campi data su iPhone e iPad (02/10/2026) ----------
   In Safari di iOS il campo data con l'aspetto nativo ha una larghezza minima sua e ignora width:100% / min-width:0:
   in Gestione avvisi "Visibile dal / fino al" uscivano dallo schermo e finivano sopra gli altri campi. Senza l'aspetto
   nativo il campo rispetta la griglia (il calendario si apre lo stesso toccandolo). Solo su iOS (-webkit-touch-callout
   esiste solo li'), come la regola dei 16px piu' sopra: su computer e Android i campi data restano come sono. */
@supports (-webkit-touch-callout:none){
  .campo input[type=date],.cf-scheda input[type=date],.filtri input[type=date]{
    -webkit-appearance:none;appearance:none;min-width:0;max-width:100%;text-align:left;
  }
  .campo input[type=date]{display:block;width:100%;min-height:calc(1.2em + 18px)}
  .campo input[type=date]::-webkit-date-and-time-value,.cf-scheda input[type=date]::-webkit-date-and-time-value,
  .filtri input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
}
/* tema scuro: anche il calendario del campo e l'icona scuri, come nelle schede del Setup */
html[data-tema="scuro"] .campo input[type=date]{color-scheme:dark}

/* ---------- Biglietto della persona e logo dell'azienda (02/10/2026, testata come la proposta A, contatti come la B) ----------
   Il biglietto da visita e' della persona: riga in fondo alla sua scheda (scheda azienda) e pillola sulla sua riga (modulo).
   Il logo dell'azienda sta in una tessera bianca al posto delle iniziali: testata della scheda e del modulo, elenco clienti,
   Nuova opportunita' e ricerca (classe con-logo sui marchi di sempre). */

/* modulo: biglietto a sinistra, logo a destra */
.am-pagina .am-bl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.am-pagina .am-bl-blocco{min-width:0;padding:14px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello2)}
.am-pagina .am-bl .am-biglietto{display:grid;gap:12px;align-content:start}
.am-pagina .am-bl-titolo{margin:0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.am-pagina .am-bl .am-biglietto-foto{width:100%;height:auto;aspect-ratio:1.75;max-height:240px;background:var(--pannello)}
.am-pagina .am-bl .am-biglietto-foto img{object-fit:contain}
.am-pagina .am-bl .am-biglietto-azioni{flex:none}
/* "Di chi e'": una pillola per persona */
.am-pagina .am-dichi{display:grid;gap:8px}
.am-pagina .am-dichi[hidden]{display:none}
.am-pagina .am-dichi-pillole{display:flex;flex-wrap:wrap;gap:8px}
.am-pagina .am-dichi-pillola{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--bordo-forte);
  background:var(--pannello);color:var(--testo);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.am-pagina .am-dichi-pillola:hover{border-color:var(--accento2)}
.am-pagina .am-dichi-pillola.sel{border-color:var(--verde);background:color-mix(in srgb,var(--verde) 12%,var(--pannello));color:var(--verde)}
html[data-tema="scuro"] .am-pagina .am-dichi-pillola.sel{border-color:var(--ic-verde);color:var(--ic-verde)}
.am-pagina .am-dichi .am-aiuto{margin:0}
/* logo */
.am-pagina .am-logo{display:grid;gap:12px;align-content:start}
.am-pagina .am-logo-riga{display:flex;align-items:center;gap:14px}
.am-pagina .am-logo-riga .am-aiuto{margin:0}
.am-pagina .am-logo-quadro{flex:none;display:grid;place-items:center;width:96px;height:96px;padding:8px;overflow:hidden;border-radius:16px;
  background:#fff;border:1px solid var(--bordo);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.am-pagina .am-logo-quadro img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.am-pagina .am-logo-quadro:has(.am-logo-iniziali){padding:0;border:0;background:transparent;box-shadow:none}
.am-pagina .am-logo-iniziali{display:grid;place-items:center;width:100%;height:100%;border-radius:14px;background:var(--accento);background-image:var(--trama);
  color:#fff;font-size:28px;font-weight:800;letter-spacing:-.01em}
.am-pagina .am-logo-azioni{display:flex;flex-wrap:wrap;gap:8px}
.am-pagina .am-logo-azioni .bottone{display:inline-flex;align-items:center;gap:7px}
.am-pagina .am-logo-azioni [hidden]{display:none}
.am-pagina .am-logo-carica{cursor:pointer}
.am-pagina .am-logo-usa{border:1px solid color-mix(in srgb,var(--accento2) 55%,transparent);background:color-mix(in srgb,var(--accento2) 10%,var(--pannello));color:var(--accento2)}
.am-pagina .am-logo-usa.scelto{border-color:var(--verde);background:color-mix(in srgb,var(--verde) 12%,var(--pannello));color:var(--verde)}
html[data-tema="scuro"] .am-pagina .am-logo-usa.scelto{border-color:var(--ic-verde);color:var(--ic-verde)}
/* testata del modulo con il logo */
.am-pagina .a-mono.con-logo{padding:4px;overflow:hidden;background:#fff;background-image:none;border:1px solid var(--bordo)}
.am-pagina .a-mono.con-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
/* pillola del biglietto sulla riga della persona */
.am-pagina .am-bv-pillola{flex:none;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;
  border:1px solid var(--bordo-forte);background:var(--pannello);color:var(--testo);font-size:12px;font-weight:700;text-decoration:none}
.am-pagina .am-bv-pillola:hover{border-color:var(--accento2)}
.am-pagina .am-bv-pillola img{width:36px;height:22px;border-radius:4px;object-fit:cover;border:1px solid var(--bordo);background:#fff}
@media (max-width:900px){.am-pagina .am-bl{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .am-pagina .am-bv-pillola{padding:3px}
  .am-pagina .am-bv-pillola span{display:none}
  .am-pagina .am-logo-quadro{width:80px;height:80px}
}

/* scheda dell'azienda: il logo in una tessera bianca, grande come le iniziali */
.az-logo{display:grid;place-items:center;width:108px;height:108px;padding:10px;overflow:hidden;border-radius:16px;
  background:#fff;border:1px solid var(--bordo);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.az-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
@container az (max-width:620px){.az-logo{width:68px;height:68px;padding:6px;border-radius:12px}}
/* il biglietto della persona: riga in fondo alla sua scheda */
.az-bv-riga{display:flex;align-items:center;gap:10px;margin:2px 14px 14px}
.az-bv-apri{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;border:1px dashed var(--bordo-forte);
  background:color-mix(in srgb,var(--accento2) 6%,var(--pannello));color:var(--testo);text-decoration:none}
.az-bv-apri:hover{border-color:var(--accento2)}
.az-bv-apri:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.az-bv-mini{flex:none;width:54px;height:33px;overflow:hidden;border-radius:6px;border:1px solid var(--bordo-forte);background:#fff}
.az-bv-mini img{display:block;width:100%;height:100%;object-fit:cover}
.az-bv-testo{min-width:0}
.az-bv-testo b{display:block;font-size:13px}
.az-bv-testo small{display:block;font-size:11.5px;color:var(--tenue)}
.az-bv-lente{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border-radius:8px;border:1px solid var(--bordo-forte);color:var(--accento2)}
/* biglietto senza persona: sotto le schede, con i loro margini; sul telefono il pulsante va a capo */
.az-bv-libero{padding:0 20px 20px}
.az-bv-libero .az-bv-riga{flex-wrap:wrap;margin:0}
.az-bv-libero .az-bv-apri{flex:1 1 300px}
.az-bv-assegna{flex:none}
@container az (max-width:620px){
  .az-bv-libero{padding:0 12px 12px}
  .az-bv-libero .az-bv-assegna{flex:1 1 100%;justify-content:center;text-align:center}
}

/* elenchi e ricerca: il logo al posto delle iniziali */
.sa-mono.con-logo,.rg-mono.con-logo,.rg-av.con-logo,.rg-ic.con-logo,.rg-a-mono.con-logo{padding:4px;overflow:hidden;background:#fff;background-image:none;border:1px solid var(--bordo)}
.sa-mono.con-logo img,.rg-mono.con-logo img,.rg-av.con-logo img,.rg-ic.con-logo img,.rg-a-mono.con-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}

/* ==========================================================================
   Opportunita' in sola lettura (Campionature/Scheda.aspx, 02/10/2026): l'ultima colonna degli articoli ha solo
   l'icona blu della scheda tecnica PDF, la stessa della pagina di modifica. Una sola icona: colonna stretta; a schede
   resta in alto a destra accanto al nome anche sul telefono (in modifica le icone sono tre e vanno in una riga loro)
   ========================================================================== */
.t-articoli.art-sola-lettura .c-azioni{width:60px}
@media (pointer:coarse){.t-articoli.art-sola-lettura .c-azioni{width:66px}}
.t-articoli.art-sola-lettura td.c-azioni .azioni-riga{justify-content:flex-end}
@container (max-width:600px){
  table.tabella.t-articoli.art-sola-lettura tbody tr.art-riga{grid-template-areas:"foto articolo azioni" "qta qta qta" "prezzo prezzo importo"}
  table.tabella.t-articoli.art-sola-lettura tbody tr.art-riga td.c-azioni .azioni-riga{justify-content:flex-end}
}

/* ==========================================================================
   Nuova azienda e modifica: tre strade per compilare (02/10/2026, variante B a tessere). Foto del biglietto (blu),
   QR code (verde acqua), sito web (viola): la tessera scelta si accende con la freccia e apre sotto un riquadro del
   suo colore; le altre si attenuano. Il QR ha la fotocamera nel riquadro, con mirino e riga che scorre.
   ========================================================================== */
.am-pagina .am-strade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.am-pagina .am-strada{--t:var(--ic-blu);position:relative;display:grid;justify-items:center;align-content:start;gap:6px;padding:16px 8px 14px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--t) 38%,transparent);background:color-mix(in srgb,var(--t) 10%,var(--pannello));color:var(--testo);
  font:inherit;text-align:center;cursor:pointer;transition:opacity .15s,box-shadow .15s,border-color .15s}
.am-pagina .am-strada.t-qr{--t:var(--ic-teal)}
.am-pagina .am-strada.t-sito{--t:var(--ic-viola)}
.am-pagina .am-strada-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--t);color:#fff}
html[data-tema="scuro"] .am-pagina .am-strada-ico{color:#04141c}
.am-pagina .am-strada b{font-size:13.5px;line-height:1.25}
.am-pagina .am-strada small{font-size:11.5px;color:var(--tenue)}
.am-pagina .am-strada:hover{border-color:var(--t)}
.am-pagina .am-strada:focus-visible{outline:2px solid var(--t);outline-offset:2px}
.am-pagina .am-strada.sel{border-color:var(--t);box-shadow:0 0 0 2px var(--t)}
.am-pagina .am-strada.sel::after{content:"";position:absolute;left:50%;bottom:-12px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);
  background:var(--pannello2);border-left:2px solid var(--t);border-top:2px solid var(--t)}
.am-pagina .am-strade.scelta .am-strada:not(.sel){opacity:.55}
.am-pagina .am-strade-aiuto{margin:0}
.am-pagina .am-strada-pannello{--t:var(--ic-blu);display:grid;gap:10px;margin-top:6px;padding:14px;border-radius:12px;border:2px solid var(--t);background:var(--pannello2)}
.am-pagina .am-strada-pannello[hidden]{display:none}
.am-pagina .am-strada-pannello.t-qr{--t:var(--ic-teal)}
.am-pagina .am-strada-pannello.t-sito{--t:var(--ic-viola)}
.am-pagina .am-strada-pannello .am-aiuto,.am-pagina .am-strada-pannello .am-biglietto-stato{margin:0}
@container am (max-width:520px){
  .am-pagina .am-strada{padding:12px 4px}
  .am-pagina .am-strada-ico{width:40px;height:40px}
  .am-pagina .am-strada small{display:none}
}
.am-pagina .am-qr-camera{position:relative;width:100%;max-width:440px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#0b1114;isolation:isolate}
.am-pagina .am-qr-camera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.am-pagina .am-qr-camera.spenta video{visibility:hidden}
.am-pagina .am-qr-mirino{position:absolute;left:50%;top:50%;width:min(60%,240px);aspect-ratio:1;transform:translate(-50%,-56%);pointer-events:none}
.am-pagina .am-qr-mirino i{position:absolute;width:26px;height:26px;border:3px solid #fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
.am-pagina .am-qr-mirino i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:10px}
.am-pagina .am-qr-mirino i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:10px}
.am-pagina .am-qr-mirino i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:10px}
.am-pagina .am-qr-mirino i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:10px}
.am-pagina .am-qr-camera.spenta .am-qr-mirino i{border-color:rgba(255,255,255,.35)}
.am-pagina .am-qr-riga{position:absolute;left:24%;right:24%;top:28%;height:2px;background:#4fd08a;box-shadow:0 0 12px 2px rgba(79,208,138,.8);
  animation:am-qr-scorri 2.2s ease-in-out infinite alternate;pointer-events:none}
.am-pagina .am-qr-camera.spenta .am-qr-riga{display:none}
@keyframes am-qr-scorri{from{top:24%}to{top:62%}}
@media (prefers-reduced-motion:reduce){.am-pagina .am-qr-riga{animation:none;top:44%}}
.am-pagina .am-qr-testo{position:absolute;left:0;right:0;bottom:0;margin:0;padding:22px 12px 10px;font-size:13px;font-weight:600;line-height:1.35;color:#fff;
  text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.am-pagina .am-qr-testo:empty{display:none}
.am-pagina .am-qr-azioni{display:flex;flex-wrap:wrap;gap:8px}
.am-pagina .am-qr-azioni .bottone{display:inline-flex;align-items:center;gap:7px}
.am-pagina .am-sito{display:flex;align-items:center;gap:8px}
.am-pagina .am-sito-campo{position:relative;flex:1;min-width:0}
.am-pagina .am-sito-campo svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--tenue);pointer-events:none}
.am-pagina .am-sito-campo input{width:100%;padding:11px 12px 11px 38px;border:1px solid var(--bordo-forte);border-radius:var(--raggio);background:var(--sfondo);
  color:var(--testo);font:inherit;font-size:15px}
.am-pagina .am-sito-campo input:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.am-pagina .am-sito .bottone{flex:none;display:inline-flex;align-items:center;gap:7px}
.am-pagina .am-sito .bottone[disabled]{opacity:.6;pointer-events:none}
@media (max-width:560px){.am-pagina .am-sito-campo input{font-size:16px}}

/* ==========================================================================
   Cruscotto, accesso veloce (02/10/2026, proposta C): le carte dei numeri sono i pulsanti grandi per I miei clienti
   (blu), Opportunita' (verde) e Catalogo tessuti (viola), subito sotto il saluto. Tutta la carta apre l'elenco (.cv-vai
   la copre); "+ Nuova azienda" / "+ Nuova" sta sopra il link. Sul telefono una riga compatta per carta.
   ========================================================================== */
.cv-veloci{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cv-v{--t:var(--ic-blu);position:relative;display:grid;gap:6px;min-width:0;padding:18px 18px 16px;border-radius:16px;border:1px solid var(--bordo);background:var(--pannello);
  box-shadow:inset 0 3px 0 var(--t),0 10px 24px -18px rgba(0,0,0,.6);transition:border-color .15s,transform .15s}
.cv-v.cv-verde{--t:var(--ic-verde)}
.cv-v.cv-viola{--t:var(--ic-viola)}
.cv-v:hover{border-color:color-mix(in srgb,var(--t) 55%,transparent);transform:translateY(-1px)}
.cv-vai{position:absolute;inset:0;z-index:1;border-radius:16px}
.cv-vai:focus-visible{outline:2px solid var(--t);outline-offset:2px}
.cv-testa{display:flex;align-items:center;gap:12px;min-width:0;padding-right:120px}
.cv-v.cv-viola .cv-testa{padding-right:0}
.cv-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid color-mix(in srgb,var(--t) 40%,transparent);
  background:color-mix(in srgb,var(--t) 16%,transparent);color:var(--t)}
.cv-testa b{font-size:17px;line-height:1.25}
.cv-num{margin-top:4px;font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.cv-var{font-size:12.5px;color:var(--tenue)}
.cv-var b{color:var(--ic-verde)}
.cv-apri{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--t)}
.cv-piu{position:absolute;right:14px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ic-verde) 45%,transparent);background:color-mix(in srgb,var(--ic-verde) 12%,transparent);color:var(--ic-verde);
  font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.cv-piu:hover{background:var(--ic-verde);color:#fff}
html[data-tema="scuro"] .cv-piu:hover{color:#04141c}
@media (max-width:1100px) and (min-width:701px){.cv-testa{padding-right:0;flex-wrap:wrap}.cv-piu{position:relative;right:auto;top:auto;justify-self:start;order:9}}
@media (max-width:700px){
  .cv-veloci{grid-template-columns:1fr;gap:10px}
  .cv-v{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:14px}
  .cv-testa{display:contents}
  .cv-ico{grid-row:1 / 3}
  .cv-testa b{grid-column:2}
  .cv-num{grid-column:2;margin:0;font-size:24px}
  .cv-var,.cv-apri{display:none}
  .cv-piu{position:relative;right:auto;top:auto;grid-column:3;grid-row:1 / 3}
}

/* ---------- Galleria dei colori su iPhone e iPad (03/10/2026) ----------
   Con iOS 26, nell'app installata sulla schermata Home, una pagina bloccata con overflow:hidden sposta le finestre a
   tutto schermo: aprendo una foto dal catalogo la galleria finiva sopra, fuori vista. Su iOS la pagina non si blocca
   piu' (html.gal-aperta resta scorrevole): la galleria copre comunque tutto lo schermo e trattiene i gesti
   (overscroll-behavior), cosi' la pagina dietro non scorre. Il fuoco senza scorrimento lo mette js/galleria-tessuti.js. */
@supports (-webkit-touch-callout:none){
  html.gal-aperta{overflow:visible}
  dialog.galleria{overscroll-behavior:contain}
}

/* ==========================================================================
   Tema scuro "nero e rosso" (03/10/2026, proposta E scelta dall'utente; prima "vetro petrolio")
   I colori di base sono in cima (html[data-tema="scuro"]): fondo nero carbone, pannelli grafite, bordi neutri. Qui il
   resto: la luce rossa del fondo, i riquadri un filo trasparenti, barra e testata che la lasciano passare, la voce di
   menu attiva tinta di rosso. Il tema chiaro non cambia.
   ========================================================================== */
/* il fondo: la luce rossa scende dall'alto e resta ferma mentre la pagina scorre. E' uno strato fisso dietro a tutto
   (non background-attachment:fixed, che su iPhone non funziona). Non nelle pagine a tutto schermo (accesso, fuori
   linea, aggiornamento), che hanno il loro fondo. */
html[data-tema="scuro"] body:not(.pagina-login):not(.pagina-offline):not(.pagina-aggiornamento)::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 95% 66% at 50% -14%,rgba(218,2,25,.50),transparent 66%),
    radial-gradient(ellipse 55% 45% at 104% 104%,rgba(218,2,25,.16),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 55%,rgba(255,255,255,.035),transparent 60%),
    linear-gradient(180deg,#0e0f13,#040506);
}
/* i riquadri principali: grafite un filo trasparente (la luce del fondo si intravede) e un velo di luce in alto.
   Niente sfocatura: il fondo e' una sfumatura liscia, non servirebbe, e sul telefono peserebbe. */
html[data-tema="scuro"] :is(.riquadro,.pannello-form,.carta,.graf-num,.cc-tessera,.cv-v,.sa-mat,.fascia){
  background-color:var(--pannello-vetro);
  background-image:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,0) 140px);
}
html[data-tema="scuro"] :is(.ecb-mat,.az-persona,.az-testa){background-color:var(--pannello-vetro)}
/* barra del menu e testata lasciano passare la luce del fondo; sul telefono la barra si apre sopra la pagina e
   deve coprirla */
html[data-tema="scuro"] .barra{background-color:rgba(8,9,12,.58)}
html[data-tema="scuro"] .testata{background:rgba(8,9,12,.62)}
@media (max-width:900px){html[data-tema="scuro"] .barra{background-color:rgba(10,11,14,.97)}}
html[data-tema="scuro"] .voce:hover{background:rgba(255,255,255,.07)}
html[data-tema="scuro"] .voce.attiva{background:linear-gradient(90deg,rgba(218,2,25,.40),rgba(218,2,25,.06))}
html[data-tema="scuro"] .voce.attiva .ico{color:#ff6a76}

/* ---------- Cruscotto: saluto e profilo insieme (03/10/2026, con il tema "nero e rosso") ----------
   Una scheda bassa a tutta larghezza al posto dei due riquadri affiancati (fascia del saluto con il tessuto e "Il tuo
   profilo"): foto con l'anello rosso, saluto, email e ruolo; a destra la data e da quando si e' collegati. Filo rosso
   sul bordo sinistro. Vale per tutti e due i temi. Sul telefono l'accesso va sotto, su una riga. */
.cruscotto-griglia .cs-saluto{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;
  padding:20px 26px;margin-bottom:0;box-shadow:inset 4px 0 0 var(--accento),var(--rilievo,none);
}
.cs-avatar{display:block;width:76px;height:76px;border-radius:50%;object-fit:cover;background:var(--accento);
  box-shadow:0 0 0 3px var(--accento),0 0 0 8px rgba(218,2,25,.20),0 16px 34px -12px rgba(218,2,25,.85)}
.cs-testo{min-width:0}
.fascia.cs-saluto h2{margin:0 0 6px;font-size:clamp(24px,2.6vw,32px)}
.cs-dati{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13.5px;color:var(--tenue)}
.cs-email{overflow-wrap:anywhere}
.cs-accesso{display:grid;justify-items:end;gap:2px;text-align:right;font-size:12.5px;color:var(--tenue);line-height:1.4}
.fascia.cs-saluto .cs-accesso .oggi{margin:0 0 8px}
.cs-accesso b{font-size:15px;color:var(--testo);font-variant-numeric:tabular-nums}
.cs-accesso small{font-size:12px}
.cs-accesso small:empty{display:none}
@media (max-width:700px){
  .cruscotto-griglia .cs-saluto{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:16px}
  .cs-avatar{width:58px;height:58px}
  .cs-accesso{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:baseline;gap:4px 8px;padding-top:12px;border-top:1px solid var(--bordo);text-align:left}
  .fascia.cs-saluto .cs-accesso .oggi{grid-column:1 / -1;margin:0 0 4px}
  .cs-accesso small{grid-column:1 / -1}
}

/* ---------- Elenco aziende: la fascia della ricerca (03/10/2026, richiesta dell'utente) ----------
   La stessa fascia di "Nuova opportunita'" (.sa-fascia, .sa-fila, .sa-cerca, .sa-nuova): domanda, casella grande e,
   accanto, Filtri e "+ Nuova azienda" grandi uguali. Qui solo le differenze: la lente non e' un pulsante (la ricerca
   parte mentre si scrive, js/ricerca-live.js), l'attesa gira a destra nella casella, e i due pulsanti stanno insieme
   (.ea-azioni), cosi' sul telefono restano affiancati sotto la casella. */
.ea-fascia{margin-bottom:20px}
.ea-cerca .sa-lente{pointer-events:none;cursor:default}
.ea-cerca input[type=search]{padding-right:50px}
.ea-cerca .cerca-attesa{right:18px;width:18px;height:18px;margin-top:-9px}
.ea-azioni{flex:none;display:flex;align-items:center;gap:14px}
.ea-azioni .bottone.vuoto.cat-filtri-apri{flex:none;gap:10px;height:58px;padding:0 22px;border-radius:12px;font-size:16px;font-weight:800}
.ea-azioni .cat-filtri-apri .conta{min-width:22px;height:22px;font-size:12.5px;line-height:22px}
@container sa (max-width:899px){
  .ea-fascia .sa-fila{flex-wrap:wrap}
  .ea-fascia .sa-cerca{flex:1 1 100%}
  .ea-azioni{flex:1 1 100%}
  .ea-azioni .sa-nuova.bottone{flex:1 1 auto}
}
@container sa (max-width:683px){
  .ea-azioni{gap:10px}
  .ea-azioni .bottone.vuoto.cat-filtri-apri{height:50px;padding:0 16px}
}

/* ---------- Caselle grandi della ricerca: la X che svuota (03/10/2026, richiesta dell'utente) ----------
   "In questi campi input non c'e' icona X per cancellare il testo": la X del browser qui e' spenta (non c'e' su
   Firefox, su iPhone non si vede, sul tema scuro e' nera), quindi ce n'e' una nostra, uguale ovunque: un pulsante
   .cerca-x dopo la casella, dentro .sa-cerca (Nuova opportunita', elenco aziende, elenco opportunita'). Si vede solo
   quando c'e' del testo (:placeholder-shown: la casella deve avere il placeholder); il clic lo prende js/app.js.
   Nelle caselle con la ricerca mentre si scrive (.ea-cerca) l'attesa gira al posto della X, nello stesso punto. */
.cerca-x{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:10px;background:none;color:var(--tenue);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cerca-x svg{display:block;transition:opacity .15s}
.cerca-x:hover{color:var(--accento-testo)}
.cerca-x:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.sa-cerca input:placeholder-shown ~ .cerca-x{display:none}
.sa-cerca input[type=search]{padding-right:56px}
.ea-cerca .cerca-attesa{right:20px}
.in-ricerca .ea-cerca .cerca-x svg{opacity:0}
@container sa (max-width:683px){
  .cerca-x{right:4px}
  .sa-cerca input[type=search]{padding-right:50px}
  .ea-cerca .cerca-attesa{right:17px}
}
/* le caselle piccole (03/10/2026, richiesta dell'utente: "metti la X anche nelle caselle di ricerca piccole"): la X la
   mette js/app.js in ogni input type=search che non ha gia' la sua, e la colloca lui sul bordo destro della casella
   (left/top calcolati: i contenitori sono tutti diversi). Piu' piccola di quella delle caselle grandi, 38px al dito.
   La casella lascia a destra il posto per la X; la X del browser si spegne; mentre l'elenco si aggiorna gira l'attesa. */
html input[type=search].cerca-con-x{padding-right:34px}
input[type=search].cerca-con-x::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.cerca-x.cerca-x-piccola{right:auto;z-index:1;width:30px;height:30px;border-radius:8px}
.cerca-x-piccola svg{width:20px;height:20px}
input.cerca-con-x:placeholder-shown ~ .cerca-x-piccola{display:none}
.in-ricerca .cerca-attesa ~ .cerca-x-piccola svg{opacity:0}
@media (pointer:coarse){.cerca-x.cerca-x-piccola{width:38px;height:38px}}


/* ---------- Elenco opportunita': la fascia della ricerca (03/10/2026, richiesta dell'utente) ----------
   La stessa fascia dell'elenco aziende (.sa-fascia .ea-fascia, .sa-cerca .ea-cerca, .ea-azioni). In piu' qui c'e' la
   tendina della categoria, alta come la casella e i pulsanti: sul computer sta fra la casella e Filtri, sul tablet
   nella riga dei pulsanti, sul telefono su una riga sua con Filtri e "+ Nuova opportunita'" affiancati sotto. */
.eo-azioni .deal-filtro-categoria{flex:0 1 230px;min-width:180px;max-width:260px;margin:0}
.eo-azioni .deal-filtro-categoria svg{left:16px;color:var(--tenue)}
.eo-azioni .deal-filtro-categoria select{height:58px;padding:0 12px 0 44px;border:2px solid var(--bordo-forte);border-radius:12px;
  background-color:var(--campo-attivo);font-size:16px;font-weight:600;text-overflow:ellipsis;cursor:pointer}
.eo-azioni .deal-filtro-categoria select:focus{border-color:var(--accento);box-shadow:0 0 0 4px var(--campo-alone)}
@container sa (max-width:899px){
  .eo-azioni .deal-filtro-categoria{flex:1 1 200px;max-width:none}
}
@container sa (max-width:683px){
  .eo-azioni{flex-wrap:wrap}
  .eo-azioni .deal-filtro-categoria{flex:1 1 100%;min-width:0}
  .eo-azioni .deal-filtro-categoria select{height:50px}
  .eo-azioni .bottone.vuoto.cat-filtri-apri{padding:0 14px}
  .eo-azioni .sa-nuova.bottone{gap:8px;padding:0 12px;font-size:15px}
}

/* ---------- Mappa delle aziende: i pulsanti della scheda in cima (03/10/2026, richiesta dell'utente) ----------
   "Filtra l'elenco" e "Vedi le regioni" stavano sotto i nomi delle aziende della nazione: bisognava arrivare in fondo
   alla scheda, e sul telefono scorrerla. Ora stanno subito sotto il conteggio, prima dei nomi. Lo spazio sotto lo
   portano i pulsanti: quando sono nascosti tutti e due (una regione) non resta un vuoto. */
.mappa-scheda-azioni.in-alto .bottone{margin-bottom:12px}
.mappa-scheda-azioni.in-alto ~ ul{margin-bottom:2px}

/* ---------- Elenco aziende: l'etichetta del filtro per regione (03/10/2026) ----------
   "Filtra l'elenco" su una regione della mappa: accanto al numero delle aziende trovate compare "Regione: Lombardia"
   con la x che toglie il filtro. Il conteggio e l'etichetta stanno insieme a sinistra, "Azzera filtri" resta a destra. */
.ea-trovate{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.ea-regione{display:inline-flex;align-items:center;gap:6px;padding:2px 3px 2px 10px;border-radius:999px;border:1px solid var(--accento);
  background:var(--accento-velo);color:var(--testo);font-size:12px;font-weight:700;white-space:nowrap}
.ea-regione svg{flex:none;color:var(--accento-testo)}
a.ea-regione-togli{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--tenue);font-size:18px;font-weight:400;line-height:1;text-decoration:none}
a.ea-regione-togli:hover{background:var(--accento);color:#fff}
a.ea-regione-togli:focus-visible{outline:2px solid var(--accento2);outline-offset:1px}

/* ---------- Catalogo articoli: la fascia della ricerca (03/10/2026, richiesta dell'utente) ----------
   La stessa fascia dell'elenco aziende e dell'elenco opportunita' (.sa-fascia .ea-fascia, .sa-cerca .ea-cerca,
   .ea-azioni). Qui accanto alla casella c'e' solo Filtri: sul tablet restano sulla stessa riga (le altre due pagine
   mandano i pulsanti a capo perche' sono di piu'), sul telefono Filtri va sotto la casella, largo quanto lei. */
@container sa (max-width:899px){
  .ct-fascia .sa-fila{flex-wrap:nowrap}
  .ct-fascia .sa-cerca{flex:1 1 auto}
  .ct-fascia .ea-azioni{flex:none}
}
@container sa (max-width:683px){
  .ct-fascia .ea-azioni .bottone.vuoto.cat-filtri-apri{flex:1 1 auto;justify-content:center}
}

/* ---------- Elenco agenti e Registro attivita': la fascia della ricerca (03/10/2026, richiesta dell'utente) ----------
   La stessa fascia del catalogo (.sa-fascia .ea-fascia .ct-fascia). Negli agenti accanto alla casella ci sono le due
   scelte Tutti / Solo supervisori in un blocco alto come la casella (.agc-ruoli, radio veri nascosti): quella accesa e'
   velata di rosso; sul telefono il blocco va sotto la casella e le due scelte si dividono la larghezza. Nel registro
   c'e' il pulsante Filtri, con tendine e date nel pannello (.log-filtri). */
.agc-fascia > p .conta{margin-left:8px;color:var(--debole);font-size:13px;white-space:nowrap}
.agc-ruoli{flex:none;flex-wrap:nowrap;gap:4px;height:58px;padding:4px;border:2px solid var(--bordo-forte);border-radius:12px;background:var(--campo-attivo)}
.agc-ruoli li{display:flex}
.agc-ruoli li label{gap:8px;height:100%;padding:0 18px;border:0;border-radius:8px;background:none;font-size:15px;font-weight:700;white-space:nowrap}
.agc-ruoli li label::before{display:none}
.agc-ruoli li label:hover{background:var(--pannello2)}
.agc-ruoli li label svg{flex:none;color:var(--accento-testo)}
.agc-ruoli li input:checked + label{background:var(--accento-velo);color:var(--testo);box-shadow:inset 0 0 0 1.5px var(--accento)}
.agc-ruoli li input:focus-visible + label{outline:2px solid var(--accento2);outline-offset:1px}
.log-filtri .cf-scheda select{width:100%}
/* il periodo ha due date: la sua scheda prende due colonne (riempie la seconda riga accanto a Impersonate, o una riga
   intera con due colonne); con una colonna sola torna normale */
.log-filtri{container-type:inline-size}
.log-filtri .cf-griglia > .cf-scheda.lf-periodo{grid-column:span 2}
@container (max-width:620px){
  .log-filtri .cf-griglia > .cf-scheda.lf-periodo{grid-column:auto}
}
@container sa (max-width:683px){
  .agc-ruoli{flex:1 1 auto;height:50px}
  .agc-ruoli li{flex:1 1 0}
  .agc-ruoli li label{justify-content:center;width:100%;padding:0 10px;font-size:14px}
}

/* ---------- Menu dell'utente: lingua e tema (03/10/2026, richiesta dell'utente) ----------
   I due comandi stavano in testata (le sigle IT / EN, che sul telefono sparivano, e il tondo con il sole o la luna):
   ora sono due righe nella finestra che si apre dal nome dell'utente, ognuna con il nome a sinistra e le pillole a
   destra; quella accesa e' la scelta di adesso. Con tante lingue le pillole vanno a capo. */
.utente > .scheda{width:284px;max-width:calc(100vw - 24px)}
.pref-utente{display:grid;gap:9px;margin-top:14px}
.pref-riga{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pref-nome{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--testo)}
.pref-nome svg{flex:none;color:var(--accento-testo)}
.pref-scelta{flex:none;max-width:100%;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;padding:3px;border:1px solid var(--bordo);border-radius:18px}
.pref-scelta form{display:contents}
.pref-scelta a,.pref-scelta button{border:0;background:none;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.2;
  color:var(--tenue);letter-spacing:.02em;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.pref-scelta a:hover,.pref-scelta button:hover{color:var(--testo)}
.pref-scelta a.sel,.pref-scelta button.sel{background:var(--accento);color:#fff;cursor:default}
.pref-scelta a svg,.pref-scelta button svg{flex:none}
.pref-scelta a:focus-visible,.pref-scelta button:focus-visible{outline:2px solid var(--accento2);outline-offset:1px}

/* ---------- Niente ingrandimento della pagina con le dita (03/10/2026, richiesta dell'utente) ----------
   "Con iPad e smartphone premendo dei tasti tante volte la pagina si zooma e bisogna ridimensionarla": il doppio
   tocco (due tocchi veloci sullo stesso pulsante) e il pizzico ingrandivano tutta la pagina. Con pan-x pan-y la
   pagina si scorre soltanto: niente doppio tocco e niente pizzico, su iPhone / iPad (da iOS 13) e su Android.
   Vale per tutto quello che sta dentro html, finestre comprese; chi ha gia' una regola sua piu' stretta la tiene
   (globi, quaderno a schizzi, foto). PDF, foto, galleria dei tessuti e mappe hanno il LORO ingrandimento (pulsanti e
   dita), che non passa da quello della pagina. Insieme: le voci del viewport in FPC.Master e Login.aspx (Android) e
   gli eventi "gesture" fermati in js/app.js (iPhone e iPad piu' vecchi). */
html,body{touch-action:pan-x pan-y}
/* Scheda tecnica che non c'e' (03/10/2026, richiesta dell'utente: "negli articoli l'icona della scheda ci deve essere
   sempre"). Negli articoli dell'opportunita' (js/opportunita-articoli.js, Campionature/Scheda.aspx.vb) l'icona PDF c'e'
   su ogni riga: senza scheda e' grigia, tratteggiata e un po' spenta; nella pagina di modifica, toccata, dice che manca */
.icona-riga.cat-pdf.senza-scheda{--ic:var(--ic-grigio);border-style:dashed;opacity:.62;cursor:help}
.icona-riga.cat-pdf.senza-scheda:hover,.icona-riga.cat-pdf.senza-scheda:active{opacity:.9;background:color-mix(in srgb,var(--ic) 16%,transparent);border-color:color-mix(in srgb,var(--ic) 60%,transparent)}
span.icona-riga.cat-pdf.senza-scheda{cursor:default}
/* Catalogo articoli (03/10/2026): l'icona grigia della scheda che manca, toccata, mostra la sua frase (data-manca) in
   un fumetto sotto l'icona per un paio di secondi: js/catalogo.js aggiunge e toglie .dice */
.icona-riga.cat-pdf.senza-scheda.dice{opacity:1}
.icona-riga.cat-pdf.senza-scheda.dice::after{
  content:attr(data-manca);position:absolute;top:calc(100% + 6px);right:0;z-index:20;width:max-content;max-width:220px;
  padding:6px 9px;border-radius:7px;border:1px solid var(--bordo-forte);background:var(--pannello);color:var(--testo);
  font-size:12px;font-weight:600;line-height:1.35;white-space:normal;text-align:left;box-shadow:0 12px 26px -12px rgba(0,0,0,.6);pointer-events:none
}
/* ======================================================================
   PIU' TIPI DI CAMPIONE PER ARTICOLO - 03/10/2026 (richiesta dell'utente, proposta B)
   Nella riga dell'articolo dell'opportunita' un riquadro per ogni tipo di campione attivo (Gestione > Tipi di
   campione), uno sotto l'altro: nome del tipo, metri e colore (js/opportunita-articoli.js, htmlCampioni). Un riquadro
   con i metri diventa verde; sotto, il totale dell'articolo. Sostituisce il campo unico metri + tendina (.art-qt, qui
   sopra, che resta per le pagine aperte prima). Nella scheda in sola lettura una riga per tipo (.art-campione-letto).
   ====================================================================== */
.t-articoli.prezzo-nel-pannello .c-qta{width:372px}
.t-articoli .c-qta:has(.art-campione-letto){width:210px}
.art-campioni{display:grid;gap:5px;min-width:0}
/* metri stretti (bastano 4-5 cifre) e il resto al colore (03/10/2026, richiesta dell'utente) */
.art-campioni-testa,.art-campione{display:grid;grid-template-columns:minmax(64px,92px) 74px minmax(0,1fr);align-items:center;gap:6px}
.art-campioni-testa{padding:0 8px 0 10px;font-size:10.5px;font-weight:700;color:var(--tenue)}
.art-campione{
  padding:3px 5px 3px 10px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--sfondo);
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.art-campione:focus-within{border-color:var(--accento);box-shadow:0 0 0 3px var(--accento-velo)}
.art-campione.pieno{border-color:color-mix(in srgb,var(--ic-verde) 55%,transparent);background:color-mix(in srgb,var(--ic-verde) 8%,var(--sfondo))}
.art-campione-nome{min-width:0;overflow:hidden;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue);text-overflow:ellipsis;white-space:nowrap}
.art-campione.pieno .art-campione-nome{color:var(--ic-verde)}
/* come sta l'articolo (07/10/2026, l'utente: "se tutti i tipi campione dell'articolo sono vuoti mettili in rosso, quando
   almeno uno e' completo allora mettilo in verde quello compilato e grigio quello vuoto"): tutti vuoti = rossi; con almeno
   uno con la quantita', quello e' verde (.pieno, qui sopra) e i vuoti diventano grigi. Lo decide js/opportunita-articoli.js
   (aggiornaCampioniVivi) mentre si scrive */
.art-campioni.tutti-vuoti .art-campione{border-color:color-mix(in srgb,var(--accento) 60%,transparent);background:color-mix(in srgb,var(--accento) 7%,var(--sfondo))}
.art-campioni.tutti-vuoti .art-campione-nome{color:var(--accento-testo)}
.art-campioni.con-pieni .art-campione:not(.pieno){border-color:var(--bordo);background:color-mix(in srgb,var(--tenue) 12%,var(--sfondo))}
.art-campioni.con-pieni .art-campione:not(.pieno) .art-campione-nome{color:var(--debole)}
.art-campione-metri{display:flex;align-items:center;gap:4px;min-width:0}
.art-campione input{
  width:100%;min-width:0;padding:6px 8px;border:1px solid var(--bordo-forte);border-radius:7px;background:transparent;
  color:var(--testo);font:inherit;font-size:13.5px;font-weight:600;
}
.art-campione input.art-campione-qta{padding-left:5px;padding-right:6px;text-align:right;font-variant-numeric:tabular-nums}
.art-campione input.art-campione-colore{font-weight:500}
/* come per il campo di prima: dentro il riquadro il campo non diventa bianco da solo, si accende il riquadro */
.art-campione input:focus{outline:none;border-color:var(--accento);box-shadow:none;background-color:transparent}
.art-campione .art-um{font-size:11px;font-weight:600;color:var(--tenue);white-space:nowrap}
.art-campioni-totale{font-size:12px;font-weight:600;color:var(--tenue)}
.art-campioni-totale:empty{display:none}
.art-campioni-vuoto{margin:0;font-size:12px;color:var(--tenue)}
/* scheda in sola lettura: una riga per tipo, "3,00 Mt Metraggio - Blu navy 23" */
.art-campione-letto{display:block;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.art-campione-letto b{color:var(--testo);font-variant-numeric:tabular-nums}
.art-campione-letto i{font-style:normal;color:var(--testo)}
/* schede (sotto i 900px di spazio, telefono e iPad in verticale): ogni tipo su due righe, il nome del tipo in alto e
   sotto, sulla stessa riga, i metri e il colore (03/10/2026, richiesta dell'utente: con il nome accanto ai metri e il
   colore largo sotto, sul telefono i due campi non erano allineati). L'intestazione Tipo/Metri/Colore non serve piu':
   il campo del colore lo dice da se' ("Colore, facoltativo") */
@container (max-width:900px){
  .art-campioni-testa{display:none}
  .art-campione{grid-template-columns:78px minmax(0,1fr);grid-template-areas:"nome nome" "metri colore";row-gap:5px;padding:7px 6px 6px 10px}
  .art-campione-nome{grid-area:nome}
  .art-campione-metri{grid-area:metri}
  .art-campione input.art-campione-colore{grid-area:colore}
}
/* ======================================================================
   NOTE, PREZZO E MATERIALI A TESSERE - 03/10/2026 (richiesta dell'utente, proposta B)
   La parte che si apre con la freccia sotto ogni articolo dell'opportunita' (js/opportunita-articoli.js): tre tessere
   staccate con il filo colorato in alto, come le schede degli elenchi. Prima le note, che vanno nella commessa (blu),
   poi prezzo comunicato e importo, il dato meno importante, sempre sotto le note (verde), poi i materiali (viola).
   ====================================================================== */
.art-pannello-corpo.art-tessere{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px}
.art-tessera{display:grid;gap:10px;min-width:0;padding:12px 14px 14px;border:1px solid var(--bordo-forte);border-top:3px solid var(--fc);border-radius:12px;background:var(--pannello)}
.art-t-note{--fc:var(--ic-blu)}
.art-t-prezzo{--fc:var(--ic-verde)}
.art-t-odm{--fc:var(--ic-viola);padding-top:14px}
.art-tessera-testa{display:flex;align-items:center;gap:9px;min-width:0}
.art-tessera-icona{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;color:var(--fc);
  border:1px solid color-mix(in srgb,var(--fc) 45%,transparent);background:color-mix(in srgb,var(--fc) 13%,transparent);
}
.art-tessera-titolo{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--testo)}
label.art-tessera-titolo{cursor:pointer}
.art-tessera-testa .art-note-conta{margin-left:auto}
.art-tessera-pillola{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:3px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--ic-blu) 30%,transparent);background:color-mix(in srgb,var(--ic-blu) 12%,transparent);
  color:var(--ic-blu);font-size:11px;font-weight:600;
}
.art-note-conta:not([hidden]) + .art-tessera-pillola{margin-left:0}
.art-tessere .art-note-avviso{margin:0}
/* prezzo e importo: due meta' divise da un filetto (sul telefono una sotto l'altra); sotto l'importo il conto */
.art-prezzo-importo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.art-prezzo-importo > .campo{display:grid;gap:6px;align-content:start;margin:0;padding:2px 14px}
.art-prezzo-importo > .art-prezzo-campo{padding-left:0;border-right:1px solid var(--bordo)}
.art-prezzo-importo > .campo > label{margin:0;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue)}
.art-tessere .art-prezzo-campo .art-campo{justify-self:start;width:auto;max-width:100%;padding-right:10px}
.art-tessere .art-prezzo-campo .art-campo input{width:92px;flex:none}
.art-tessere .art-importo{padding:0;font-size:20px;font-weight:800;color:var(--testo)}
.art-tessere .art-importo.vuoto{font-size:16px;font-weight:600;color:var(--debole)}
.art-formula{font-size:11.5px;color:var(--debole);font-variant-numeric:tabular-nums}
.art-formula:empty{display:none}
/* i materiali: il blocco ha gia' il suo titolo, qui solo nello stesso stile dei titoli delle tessere */
.art-t-odm .art-odm .odm-titolo{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--testo)}
@container (max-width:560px){
  .art-pannello-corpo.art-tessere{padding:12px}
  .art-tessera{padding:12px}
  .art-prezzo-importo{grid-template-columns:minmax(0,1fr);gap:12px}
  .art-prezzo-importo > .campo{padding:0}
  .art-prezzo-importo > .art-prezzo-campo{padding-bottom:12px;border-right:none;border-bottom:1px solid var(--bordo)}
  .art-tessera-pillola{display:none}
}
/* ======================================================================
   NOTA DELLA COMMESSA VISIBILE A PANNELLO CHIUSO - 03/10/2026 (richiesta dell'utente)
   Aprendo un'opportunita' con gli articoli, la nota di ogni articolo (quella che va nella commessa) si legge subito,
   sotto la fascia "Note, prezzo e materiali", senza aprirla: riquadro blu come la tessera delle note, al massimo 6
   righe. Toccato apre il pannello sull'editor; a pannello aperto sparisce (c'e' l'editor). js/opportunita-articoli.js
   ====================================================================== */
.art-nota-anteprima{
  display:grid;gap:4px;width:calc(100% - 24px);margin:0 12px 10px;padding:8px 12px 9px;
  border:1px solid color-mix(in srgb,var(--ic-blu) 30%,var(--bordo));border-left:3px solid var(--ic-blu);border-radius:8px;
  background:color-mix(in srgb,var(--ic-blu) 6%,var(--pannello));color:var(--testo);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
.art-nota-anteprima[hidden]{display:none}
.art-nota-anteprima:hover{border-color:var(--ic-blu);background:color-mix(in srgb,var(--ic-blu) 10%,var(--pannello))}
.art-nota-anteprima:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
/* come la pillola della fascia: nel tema chiaro il blu delle icone si scurisce per leggersi bene */
.art-nota-anteprima-titolo{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--ic-blu) 82%,#000)}
html[data-tema="scuro"] .art-nota-anteprima-titolo{color:var(--ic-blu)}
.art-nota-anteprima-testo{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;font-size:13px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.art-dettaglio.aperto .art-nota-anteprima{display:none}
/* ======================================================================
   MANUALE COMPLETO IN PDF - 03/10/2026 (richiesta dell'utente)
   Nella finestra della guida "?", sotto la testata: una riga-pulsante "Manuale completo" che apre il manuale in PDF
   (tutte le guide di chi lo apre) nella finestra dei PDF del portale (js/app.js, Manuale.ashx).
   ====================================================================== */
.help-manuale{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px 10px 16px;border:none;border-bottom:1px solid var(--bordo);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accento) 10%,var(--pannello)),var(--pannello));color:var(--testo);
  font:inherit;text-align:left;cursor:pointer;transition:background-color .15s;
}
.help-manuale[hidden]{display:none}
.help-manuale:hover{background:color-mix(in srgb,var(--accento) 14%,var(--pannello))}
.help-manuale:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.help-manuale-icona{
  flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--accento-testo);
  border:1px solid color-mix(in srgb,var(--accento) 45%,transparent);background:color-mix(in srgb,var(--accento) 13%,transparent);
}
.help-manuale-testo{flex:1;min-width:0}
.help-manuale-testo b{display:block;font-size:13.5px;font-weight:700}
.help-manuale-testo small{display:block;margin-top:1px;font-size:11.5px;color:var(--tenue)}
.help-manuale-freccia{flex:none;color:var(--tenue)}

/* ---------- Barre di scorrimento (03/10/2026, proposta C scelta dall'utente) ----------
   Al posto di quelle di Windows (chiare e con le frecce anche nel tema scuro): un binario arrotondato del colore dei
   pannelli e dentro una pillola rossa sfumata, larghe 12px, senza frecce. Valgono per tutto il portale: pagina, menu
   laterale, elenchi, finestre, caselle di testo. Nessuna barra deve avere scrollbar-width o scrollbar-color: in Chrome
   spengono queste regole. Solo con mouse o trackpad: sul telefono e sul tablet restano le barre del sistema, sottili e
   sopra il contenuto (una barra disegnata qui toglierebbe 12px alla pagina). Firefox non conosce ::-webkit-scrollbar:
   li' i colori, con la barra del sistema. */
@media (hover:hover) and (pointer:fine){
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:var(--pannello2);border-radius:999px}
  ::-webkit-scrollbar-thumb{border:3px solid var(--pannello2);border-radius:999px;background:linear-gradient(180deg,#ff3b4e,var(--accento))}
  ::-webkit-scrollbar-thumb:horizontal{background:linear-gradient(90deg,#ff3b4e,var(--accento))}
  ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff6372,#ff1f35)}
  ::-webkit-scrollbar-thumb:horizontal:hover{background:linear-gradient(90deg,#ff6372,#ff1f35)}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
  ::-webkit-scrollbar-corner{background:transparent}
  @supports (-moz-appearance:none){
    html{scrollbar-color:var(--accento) var(--pannello2)}
  }
}

/* ---------- Modifica dell'azienda: la finestra della lettura (04/10/2026, proposta B scelta dall'utente) ----------
   Biglietto, QR code e sito: durante la lettura una finestra al centro (dialog .am-lettura, js/anagrafica-modifica.js)
   con la foto del biglietto (o l'icona del QR / del sito) attraversata da una luce che scorre, il titolo, la barra e i
   secondi; alla fine il tondo verde (ambra se non c'era niente da compilare, rosso se non e' riuscita), cosa ha
   compilato con i valori e il pulsante. Larga 560px, sul telefono quasi tutto lo schermo; i valori lunghi vanno a capo. */
.am-lettura{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:26px 28px 22px;border:1px solid var(--bordo);border-radius:18px;
  background:var(--pannello);color:var(--testo);box-shadow:0 30px 80px rgba(0,0,0,.55);text-align:center}
.am-lettura::backdrop{background:rgba(0,0,0,.66)}
.am-lettura h3{margin:0 0 6px;font-size:21px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.am-lettura-sotto{margin:0;color:var(--tenue);font-size:14px;line-height:1.45}
.am-lettura-figura{position:relative;display:grid;place-items:center;width:160px;height:104px;margin:2px auto 18px;border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--am-ia) 14%,var(--pannello2));color:var(--am-ia);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.am-lettura-figura img{width:100%;height:100%;object-fit:cover;display:block}
.am-lettura.in-corso .am-lettura-figura::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--am-ia) 60%,transparent),transparent);box-shadow:0 0 18px var(--am-ia);animation:am-lettura-luce 1.6s ease-in-out infinite}
@keyframes am-lettura-luce{0%{top:-30%}100%{top:100%}}
.am-lettura-barra{position:relative;height:6px;margin:18px 0 8px;border-radius:99px;background:color-mix(in srgb,var(--testo) 10%,transparent);overflow:hidden}
.am-lettura-barra i{position:absolute;top:0;left:-40%;width:40%;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--am-ia),#5aa2ff);animation:am-lettura-barra 1.3s ease-in-out infinite}
@keyframes am-lettura-barra{0%{left:-40%}100%{left:100%}}
.am-lettura-tempo{margin:0;color:var(--tenue);font-size:12.5px;font-variant-numeric:tabular-nums}
.am-lettura.fatto .am-lettura-barra,.am-lettura.fatto .am-lettura-tempo{display:none}
.am-lettura.fatto{text-align:left}
.am-lettura.fatto .am-lettura-figura{float:left;width:52px;height:52px;margin:0 14px 10px 0;border-radius:50%;background:none;box-shadow:none;overflow:visible}
.am-lettura-tondo{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ic-verde);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--ic-verde) 40%,transparent)}
.am-lettura.e-avvisa .am-lettura-tondo{background:#e4a11b;box-shadow:0 6px 18px rgba(228,161,27,.35)}
.am-lettura.e-errore .am-lettura-tondo{background:var(--accento);box-shadow:0 6px 18px color-mix(in srgb,var(--accento) 35%,transparent)}
.am-lettura.e-chiedi .am-lettura-tondo{background:var(--blu);box-shadow:0 6px 18px color-mix(in srgb,var(--blu) 35%,transparent)}
.am-lettura.fatto h3{padding-top:4px}
.am-lettura-campi{clear:both;display:grid;gap:6px;margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--pannello2);font-size:13.5px}
.am-lettura-campi > div{display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr);gap:4px 14px}
.am-lettura-campi dt{color:var(--tenue)}
.am-lettura-campi dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.am-lettura-piede{clear:both;position:sticky;bottom:-22px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin:16px -28px -22px;padding:14px 28px 22px;border-top:1px solid var(--bordo);background:var(--pannello)}
.am-lettura-piede .bottone{min-height:42px;padding:0 18px;font-weight:700}
@media (max-width:520px){
  .am-lettura{padding:22px 18px 18px}
  .am-lettura h3{font-size:19px}
  .am-lettura-campi{font-size:13px;padding:10px 12px}
  .am-lettura-campi > div{grid-template-columns:minmax(72px,auto) minmax(0,1fr);gap:2px 10px}
  .am-lettura-piede{bottom:-18px;margin:14px -18px -18px;padding:12px 18px 18px}
  .am-lettura-piede .bottone{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .am-lettura.in-corso .am-lettura-figura::after,.am-lettura-barra i{animation:none}
  .am-lettura-barra i{left:30%}
}
/* COPIA COMMISSIONI - LA LETTURA CHE SI VEDE (10/10/2026, proposta B scelta dall'utente: "durante la scansione vorrei
   vedere una progress bar che avanza"): la finestra delle aziende (.am-lettura) con la barra rossa che avanza, la
   percentuale, i secondi e i tre passi (js/commissioni.js, finestraLettura) */
.cm-lettura .am-lettura-figura::after{animation-duration:1.3s}
.cm-lettura-barra{position:relative;height:10px;margin:18px 0 8px;border-radius:99px;background:color-mix(in srgb,var(--testo) 10%,transparent);overflow:hidden}
.cm-lettura-barra i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accento),#ff5a6a);
  box-shadow:0 0 12px color-mix(in srgb,var(--accento) 60%,transparent);transition:width .25s linear;overflow:hidden}
.cm-lettura-barra i::after{content:"";position:absolute;top:0;bottom:0;left:-60px;width:60px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:cm-lettura-luce 1.4s ease-in-out infinite}
@keyframes cm-lettura-luce{0%{left:-60px}100%{left:100%}}
.cm-lettura-riga{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;color:var(--tenue);font-variant-numeric:tabular-nums}
.cm-lettura-riga b{font-size:22px;font-weight:800;color:var(--testo)}
.cm-lettura-passi{list-style:none;display:grid;gap:8px;margin:16px 0 4px;padding:12px 14px;border-radius:12px;background:var(--pannello2);text-align:left;font-size:14px}
.cm-lettura-passi li{display:flex;align-items:center;gap:10px;color:var(--tenue)}
.cm-lettura-passi li i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,var(--testo) 25%,transparent);
  font-style:normal;font-size:12px;font-weight:800}
.cm-lettura-passi li.fatto{color:var(--testo)}
.cm-lettura-passi li.fatto i{background:var(--ic-verde);border-color:var(--ic-verde);color:#fff}
.cm-lettura-passi li.ora{color:var(--testo);font-weight:700}
.cm-lettura-passi li.ora i{border-color:var(--accento);border-top-color:transparent;animation:cm-lettura-giro .8s linear infinite}
@keyframes cm-lettura-giro{to{transform:rotate(360deg)}}
.cm-lettura-nota{margin:10px 0 0;color:var(--tenue);font-size:13px}
.cm-lettura.riuscita .cm-lettura-barra i{background:var(--ic-verde);box-shadow:0 0 12px color-mix(in srgb,var(--ic-verde) 60%,transparent)}
.cm-lettura.riuscita .cm-lettura-barra i::after,.cm-lettura.riuscita .am-lettura-figura::after{animation:none;display:none}
.cm-lettura.fatto .cm-lettura-barra,.cm-lettura.fatto .cm-lettura-riga,.cm-lettura.fatto .cm-lettura-passi{display:none}
.cm-lettura:focus,.cm-lettura:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  .cm-lettura-barra i{transition:none}
  .cm-lettura-barra i::after,.cm-lettura-passi li.ora i{animation:none}
}
/* IL MENU CHIUSO SU IPAD E TELEFONO (10/10/2026, proposta B scelta dall'utente: "fai lampeggiare di rosso il bottone in alto
   per aprire il menu e metti una piccola pillola con freccia e scrivi Apri menu"): a ogni pagina il pulsante lampeggia
   rosso tre volte, sotto compare per qualche secondo la pillola, poi resta il puntino rosso (js/app.js, solo hover:none) */
.menu-avvisa{position:relative}
.menu-avvisa::after{content:"";position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--accento);
  box-shadow:0 0 0 2px var(--pannello),0 0 10px var(--accento);pointer-events:none}
.menu-lampeggia{animation:menu-lampo .6s ease-in-out 3}
@keyframes menu-lampo{
  0%,100%{}
  50%{background:var(--accento);color:#fff;border-color:var(--accento);box-shadow:0 0 0 5px color-mix(in srgb,var(--accento) 30%,transparent),0 0 20px color-mix(in srgb,var(--accento) 75%,transparent)}
}
.menu-pillola{position:fixed;z-index:70;display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 12px 6px 10px;border:0;border-radius:999px;
  background:var(--accento);color:#fff;font-family:inherit;font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.02em;white-space:nowrap;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.12);opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}
.menu-pillola.vista{opacity:1;transform:none}
.menu-pillola::before{content:"";position:absolute;top:-5px;left:var(--freccia-x,18px);width:11px;height:11px;background:var(--accento);border-radius:2px;transform:rotate(45deg)}
.menu-pillola svg{flex:none}
@media (prefers-reduced-motion:reduce){
  .menu-lampeggia{animation:none}
  .menu-pillola{transition:none;transform:none}
}
/* la rotellina della riga di stato sotto la tessera: c'era nello script ma non nello stile, e non si vedeva */
.am-pagina .am-biglietto-stato .spin{width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,var(--am-ia) 30%,transparent);
  border-top-color:var(--am-ia);animation:gira .8s linear infinite}

/* ---------- Articoli dell'opportunita': la ricerca del catalogo (05/10/2026, richiesta dell'utente) ----------
   "La input box nella sezione articoli dentro opportunita' deve essere uguale a quella presente nel catalogo, anche con
   la possibilita' dei filtri": la stessa fascia (.sa-fascia .ea-fascia .ct-fascia) e lo stesso pannello (.cat-filtri,
   .cf-*), qui dentro la sezione Articoli. Il titolo della fascia e' un h3 (sotto l'h2 della sezione) disegnato come
   l'h2 del catalogo. Mentre si scrive i risultati sono la tendina .art-risultati; a pannello aperto la stessa lista
   scende sotto il pannello (.art-risultati-elenco, nel flusso della pagina) con in cima quanti sono. */
.art-fascia{margin-bottom:14px}
.sa-fascia > h3{margin:0 0 4px;font-size:24px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.ea-cerca.in-ricerca .cerca-x svg{opacity:0}
.riquadro.art-filtri{margin:0 0 4px}
.art-risultati.art-risultati-elenco{position:static;max-height:min(560px,70vh);margin:6px 0 14px}
.art-risultati-conta{padding:6px 10px 8px;margin-bottom:4px;border-bottom:1px solid var(--bordo);font-size:12px;font-weight:700;
  letter-spacing:.02em;color:var(--tenue)}
@container sa (max-width:683px){
  .sa-fascia > h3{font-size:20px}
}

/* ---------- Mappa delle aziende: elenco completo e segnaposto delle citta' (05/10/2026, richiesta dell'utente) ----------
   "Si vedono solo 8 aziende, e' preferibile l'elenco completo scorrevole in verticale" e "un'icona tipo GPS che indichi
   su quale citta' ci sono le aziende e quantita' di aziende per ogni citta'". Nella scheda (solo quella delle aziende,
   #mappaScheda: la mappa degli accessi non cambia) titolo e pulsanti restano fermi e scorre solo l'elenco. Il
   segnaposto e' alto il doppio della goccia (globe.gl centra l'elemento sul punto: la punta cade sulla citta'). */
#mappaScheda:not([hidden]){display:flex;flex-direction:column;overflow:hidden}
#mappaScheda > ul{flex:1 1 auto;min-height:0;overflow-y:auto;margin-right:-6px;padding-right:6px;overscroll-behavior:contain}
/* la misura (--pin, larghezza della goccia) la decide js/mappa-aziende.js in base a quante citta' ha la nazione */
.mappa-pin{position:relative;display:block;width:var(--pin,24px);height:calc(var(--pin,24px) * 2.667);margin:0;padding:0;border:0;
  background:none;cursor:pointer;pointer-events:none;-webkit-tap-highlight-color:transparent}
.mappa-pin-goccia{position:absolute;left:0;top:0;width:var(--pin,24px);height:calc(var(--pin,24px) * 1.333);pointer-events:auto;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));transform-origin:50% 100%;transition:transform .15s}
.mappa-pin svg{display:block;width:100%;height:100%;fill:var(--accento);stroke:#fff;stroke-width:1.6}
.mappa-pin b{position:absolute;left:0;right:0;top:calc(var(--pin,24px) * .2);text-align:center;color:#fff;letter-spacing:-.03em;
  font:800 calc(var(--pin,24px) * .42)/calc(var(--pin,24px) * .58) var(--carattere)}
.mappa-pin.largo b{font-size:calc(var(--pin,24px) * .33)}
.mappa-pin:hover .mappa-pin-goccia,.mappa-pin:focus-visible .mappa-pin-goccia{transform:scale(1.15)}
.mappa-pin:focus-visible{outline:none}
.mappa-pin:focus-visible svg{stroke:var(--accento2);stroke-width:2.4}
/* un gruppo di citta' vicine: la goccia piu' scura con un anello bianco, il numero e' la somma delle aziende */
.mappa-pin.gruppo svg{fill:#8f0010;stroke:#fff;stroke-width:2.4}
.mappa-pin.dietro{visibility:hidden}
.mappa-legenda .mappa-fonte{font-size:10px;opacity:.7}
/* La scheda non copre la mappa sugli schermi stretti (05/10/2026, richiesta dell'utente: "su smartphone la tabella copre
   la mappa"; su iPad in orizzontale, col menu, il globo e' largo ~650 px e la scheda ne copriva meta'): fino a 1180 px il
   globo ha un'altezza sua (--globo-alto) e la scheda va sotto, nella pagina, con l'elenco che scorre dentro. Suggerimento,
   legenda e attesa restano agganciati al globo, non al fondo del riquadro (che ora contiene anche la scheda). */
@media (max-width:1180px){
  #mappaSpazio{--globo-alto:clamp(360px,56vh,520px)}
  #mappaSpazio .mappa-corpo{height:auto}
  #mappaSpazio .mappa-globo{position:relative;inset:auto;height:var(--globo-alto)}
  #mappaSpazio .mappa-stato{bottom:auto;height:var(--globo-alto)}
  #mappaSpazio .mappa-suggerimento,#mappaSpazio .mappa-legenda{bottom:auto;top:calc(var(--globo-alto) - 12px);transform:translateY(-100%)}
  #mappaScheda{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:4;width:auto;max-height:none;margin:0 14px 14px}
  #mappaScheda > ul{max-height:45vh}
}
@media (max-width:640px){
  #mappaSpazio{--globo-alto:400px}
  #mappaScheda{margin:0 10px 10px}
}
@media (prefers-reduced-motion:reduce){.mappa-pin-goccia{transition:none}}

/* ---------------- le vendite del cliente (06/10/2026, FPC_AziendeDDT dal gestionale) ----------------
   Settima scheda del cruscotto (.cc-t-vendite, ciano). Qui il venduto dell'anno (.cc-v-num) e il grafico degli ultimi
   24 mesi (.cc-v-svg: barre del venduto, linea dei metri; lo stesso grafico sta nelle Statistiche). Dal 07/10/2026 le
   bolle per mese hanno lasciato il posto all'elenco riga per riga: le sue regole (.cc-v-sintesi, .cc-v-flusso, .cc-vl)
   sono in fondo al file, in "Vendite riga per riga". Il colore dello stato e' in --st (.st-p .st-r .st-s .st-i, solo dentro .cc-v). */
.cc-t-vendite{--c:#0b8f9c}
[data-tema="scuro"] .cc-t-vendite{--c:#45d0d8}
/* con la settima scheda: sull'iPad e sul telefono la Scheda prende tutta la riga e le altre sei stanno su due file da
   tre (in quattro colonne i nomi si tagliavano) */
@container az (max-width:940px){
  .cc-tessere .cc-t-scheda{grid-column:1 / -1}
}
.cc-p-vendite{padding:22px 24px 26px;font-size:16px}
.cc-v{--v-ciano:#0b8f9c;display:block}
[data-tema="scuro"] .cc-v{--v-ciano:#45d0d8}
.cc-v .st-p{--st:#c98f00}.cc-v .st-r{--st:#2f6fe8}.cc-v .st-s{--st:#0b8f9c}.cc-v .st-i{--st:#1e9e57}
[data-tema="scuro"] .cc-v .st-p{--st:#f2c14e}[data-tema="scuro"] .cc-v .st-r{--st:#8ab4ff}
[data-tema="scuro"] .cc-v .st-s{--st:#45d0d8}[data-tema="scuro"] .cc-v .st-i{--st:#4fd08a}
.cc-v-attesa{display:flex;align-items:center;gap:12px;margin:0;padding:26px 4px;font-size:17px;color:var(--tenue)}
.cc-v-attesa.errore{color:var(--accento-testo)}
.cc-v-ruota{width:22px;height:22px;border-radius:50%;border:3px solid var(--bordo);border-top-color:var(--accento);animation:cc-v-gira .8s linear infinite;flex:none}
@keyframes cc-v-gira{to{transform:rotate(360deg)}}
.cc-v-attesa.errore .cc-v-ruota{display:none}

/* in cima: il venduto dell'anno e il grafico */
.cc-v-eroe{display:grid;grid-template-columns:minmax(260px,.8fr) 1.6fr;gap:18px;margin:0 0 18px}
.cc-v-num{padding:20px 22px;border-radius:var(--raggio);background:linear-gradient(160deg,color-mix(in srgb,var(--accento) 30%,var(--pannello2)),var(--pannello2) 75%);border:1px solid color-mix(in srgb,var(--accento) 45%,var(--bordo))}
.cc-v-et{display:block;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.cc-v-num strong{display:block;margin:8px 0 6px;font-size:46px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.cc-v-num small{display:block;font-size:15.5px;font-weight:700}
.cc-v-num small.su{color:var(--successo)}.cc-v-num small.giu{color:var(--pericolo)}
[data-tema="scuro"] .cc-v-num small.su{color:#4fd08a}[data-tema="scuro"] .cc-v-num small.giu{color:#ff6b6b}
.cc-v-chip{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.cc-v-chip span{padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--testo) 8%,transparent);font-size:15px;color:var(--tenue)}
.cc-v-chip b{color:var(--testo);font-size:17px}
.cc-v-anni{display:flex;flex-wrap:wrap;gap:6px 16px;margin:16px 0 0;font-size:15px;color:var(--tenue)}
.cc-v-anni b{color:var(--testo)}
.cc-v-grafico{margin:0;padding:16px 18px 10px;border-radius:var(--raggio);background:var(--pannello2);border:1px solid var(--bordo);min-width:0}
.cc-v-svg{display:block;width:100%;height:auto;overflow:visible}
.cc-v-griglia{stroke:var(--bordo);stroke-width:1}
.cc-v-barra{fill:color-mix(in srgb,var(--testo) 24%,transparent)}
.cc-v-barra.ora{fill:var(--accento)}
.cc-v-barra:hover{filter:brightness(1.25)}
.cc-v-zona{fill:transparent}
.cc-v-linea{fill:none;stroke:var(--v-ciano,#45d0d8);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.cc-v-ml{fill:var(--debole);font-size:12px;font-weight:700}
.cc-v-al{fill:var(--tenue);font-size:13px;font-weight:800}
.cc-v-legenda-g{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;font-size:14.5px;color:var(--tenue)}
.cc-v-l-barra{width:14px;height:14px;border-radius:3px;background:var(--accento)}
.cc-v-l-linea{width:18px;height:4px;border-radius:2px;background:var(--v-ciano,#45d0d8);margin-left:14px}

/* le causali (vendita, nota di credito, cessione gratuita...): dal 07/10/2026 etichette piccole accanto al DDT nell'elenco */
.cc-v-causale{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.02em;background:var(--pannello);border:1px solid var(--bordo);color:var(--tenue)}
.cc-v-causale.ca-gratuita{color:#9b5de5;border-color:rgba(155,93,229,.45)}
.cc-v-causale.ca-campionatura{color:#c2185b;border-color:rgba(194,24,91,.45)}
.cc-v-causale.ca-reso,.cc-v-causale.ca-credito{color:var(--pericolo);border-color:var(--pericolo-bordo)}
.cc-v-causale.ca-visione{color:var(--accento2);border-color:rgba(59,123,255,.45)}
[data-tema="scuro"] .cc-v-causale.ca-gratuita{color:#b779ff}
[data-tema="scuro"] .cc-v-causale.ca-campionatura{color:#f06292}
[data-tema="scuro"] .cc-v-causale.ca-reso,[data-tema="scuro"] .cc-v-causale.ca-credito{color:#ff6b6b}
[data-tema="scuro"] .cc-v-causale.ca-visione{color:#8ab4ff}
.cc-v-cod{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--accento-testo)}
.cc-v-legenda{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--bordo)}
.cc-v-legenda div{margin:0}
.cc-v-legenda dt{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;color:var(--st)}
.cc-v-legenda dd{margin:4px 0 0 19px;font-size:14.5px;color:var(--tenue);line-height:1.35}
.cc-v-legenda i{width:10px;height:10px;border-radius:50%;background:var(--st);display:inline-block;flex:none}

@container az (max-width:940px){
  .cc-v-eroe{grid-template-columns:1fr}
  .cc-v-legenda{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container az (max-width:620px){
  .cc-p-vendite{padding:16px 14px 20px}
  .cc-v-num strong{font-size:38px}
  .cc-v-legenda{grid-template-columns:1fr}
}
/* il grafico delle vendite anche nelle Statistiche (fuori da .cc-v): il ciano della linea segue il tema */
.cc-v-grafico{--v-ciano:#0b8f9c}
[data-tema="scuro"] .cc-v-grafico{--v-ciano:#45d0d8}
.cc-v-stat{margin-top:14px}
.cc-v-tab-art td{font-size:16px}
.cc-v-tab-art .cc-v-cod{margin-right:4px}

/* ---- chat dei clienti (06/10/2026): riquadro Chat della scheda del cliente e chat ----
   Le chat del cliente in verde (il colore del riquadro Chat), quelle delle opportunita' in blu (il colore delle
   opportunita'). Su ogni riga "Continua" (blu pieno: consulta) o "Entra" (blu vuoto) per chi non ne fa ancora parte. */
.cc-chat:not(.cliente){--c:#3b7bff}
html[data-tema="scuro"] .cc-chat{--c:#4fd08a}
html[data-tema="scuro"] .cc-chat:not(.cliente){--c:#8ab4ff}
.cc-chat-tipo{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-chat-testo b{font-size:15px}
.cc-chat-testo small{font-size:13px}
.cc-chat-icona{width:42px;height:42px;border-radius:12px}
.cc-chat-lato{grid-auto-flow:row;align-content:center}
.cc-chat-azione{display:inline-flex;align-items:center;gap:3px;padding:5px 9px 5px 13px;border-radius:999px;background:var(--blu);color:#fff;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;transition:filter .15s}
.cc-chat-azione svg{flex:none}
.cc-chat:hover .cc-chat-azione{filter:brightness(1.12)}
.cc-chat-azione.entra{background:transparent;color:var(--blu);box-shadow:inset 0 0 0 1.5px currentColor}
html[data-tema="scuro"] .cc-chat-azione.entra{color:#8ab4ff}
.cc-chat-vuoto{display:grid;justify-items:center;gap:8px;padding:34px 20px 32px;text-align:center}
.cc-chat-vuoto-icona{display:grid;place-items:center;width:66px;height:66px;margin-bottom:4px;border-radius:18px;background:color-mix(in srgb,#1e9e57 14%,transparent);color:#1e9e57}
html[data-tema="scuro"] .cc-chat-vuoto-icona{color:#4fd08a;background:color-mix(in srgb,#4fd08a 14%,transparent)}
.cc-chat-vuoto b{font-size:17px;font-weight:600}
.cc-chat-vuoto p{max-width:460px;margin:0;color:var(--tenue);font-size:14px;line-height:1.5}
.cc-chat-vuoto .bottone{margin-top:8px}
/* nella chat: l'avatar e l'etichetta della chat di un cliente (l'etichetta porta il nome del cliente) */
.chat-avatar.cliente{background:linear-gradient(135deg,#1e9e57,var(--accento2))}
.chat-tag.cliente{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:color-mix(in srgb,#1e9e57 16%,transparent);color:#178048}
html[data-tema="scuro"] .chat-tag.cliente{color:#4fd08a}
@container az (max-width:620px){
  .cc-chat-lato{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:100%}
  .cc-chat-azione{margin-left:auto}
  .cc-chat-vuoto{padding:26px 14px 24px}
}

/* ---- le vendite nella scheda dell'agente (06/10/2026) ----
   Nove riquadri (Scheda, Clienti, Opportunita', Attivita', Vendite, Periodo, Chat, Allegati, Documenti): nove colonne
   quando c'e' spazio; sotto i 940 px la Scheda prende tutta la riga (regola delle vendite) e gli altri otto vanno a
   quattro per riga. Nell'elenco delle vendite c'e' in piu' la colonna del cliente (.cc-vl-agente). */
.as-tessere .cc-tessera{padding:13px 8px 11px}
.as-tessere .cc-tessera .cc-nome{font-size:10px;letter-spacing:.02em;gap:4px}
/* nove in fila nello spazio di un computer normale: l'iconcina del nome lascia posto alla parola intera (OPPORTUNITA') */
@container az (min-width:941px) and (max-width:1250px){
  .as-tessere .cc-tessera .cc-nome svg{display:none}
}
@container az (max-width:940px){
  .as-tessere{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- i filtri del riquadro Vendite (06/10/2026; dal 07/10/2026 come nelle altre pagine), scheda del cliente e dell'agente ----
   Il pulsante Filtri del catalogo e dell'elenco opportunita' (.cat-filtri-apri: bordo e tinta rossi, rosso pieno con il
   pannello aperto, il numero dei filtri impostati) e accanto il riepilogo del periodo. Il pannello e' quello delle altre
   pagine (.cat-filtri, .cf-scheda, le pillole .deal-periodi, le date .cf-due, "Azzera filtri" nel piede). La fila degli
   stati e' una fila di pulsanti: lo stato scelto si colora, gli altri si spengono. */
.cc-v-filtri{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 14px}
.cc-v-filtri-tot{margin:0;font-size:15px;color:var(--tenue)}
.cc-v-pannello{margin:0 0 16px}
.cc-v-pannello .cc-v-date{max-width:460px}
.cc-v-carica{opacity:.55;pointer-events:none;transition:opacity .15s}
@container az (max-width:620px){
  .cc-v-filtri-tot{flex-basis:100%}
  /* sul telefono le due date una sotto l'altra: affiancate, nel pannello dentro il riquadro, il giorno si tagliava */
  .cc-v-pannello.cat-filtri{padding:12px}
  .cc-v-pannello .cc-v-date{max-width:none;grid-template-columns:minmax(0,1fr);gap:10px}
  .cc-v-pannello .cc-v-date .cf-tra{display:none}
}

/* ---- la tessera Vendite su due righe (06/10/2026): sotto il numero dei DDT ci sono "3 da fatturare · 4 prelievi" e
   nelle tessere strette della scheda dell'agente una riga sola tagliava i prelievi. Solo questa tessera, al massimo due righe. */
.cc-tessera.cc-t-vendite small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}

/* ---- Il globo degli accessi come quello delle aziende (06/10/2026, l'utente: "il globo del registro attivita' deve avere
   lo stesso modo, grafica del globo aziende") ----
   Nella scheda titolo e pulsante restano fermi e scorrono le sezioni (gli elenchi arrivano fino a 100 nomi o indirizzi);
   fino a 1180 px il globo ha un'altezza sua e la scheda va sotto, nella pagina, come in #mappaSpazio: sopra copriva meta'
   del globo. Suggerimento, legenda e attesa restano agganciati al globo. */
#mappaAccessiScheda:not([hidden]){display:flex;flex-direction:column;overflow:hidden}
#mappaAccessiSezioni{flex:1 1 auto;min-height:0;overflow-y:auto;margin-right:-6px;padding-right:6px;overscroll-behavior:contain}
#mappaAccessiAzioni{flex:none}
@media (max-width:1180px){
  #mappaAccessi{--globo-alto:clamp(360px,56vh,520px)}
  #mappaAccessi .mappa-corpo{height:auto}
  #mappaAccessi .mappa-globo{position:relative;inset:auto;height:var(--globo-alto)}
  #mappaAccessi .mappa-stato{bottom:auto;height:var(--globo-alto)}
  #mappaAccessi .mappa-suggerimento,#mappaAccessi .mappa-legenda{bottom:auto;top:calc(var(--globo-alto) - 12px);transform:translateY(-100%)}
  #mappaAccessiScheda{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:4;width:auto;max-height:none;margin:0 14px 14px}
  #mappaAccessiSezioni{max-height:45vh}
}
@media (max-width:640px){
  #mappaAccessi{--globo-alto:400px}
  #mappaAccessiScheda{margin:0 10px 10px}
}

/* ===== Cruscotto: le vendite (06/10/2026, al posto di "Commesse per categoria" e "Articoli piu' richiesti") =====
   Nelle barre il nome del cliente e' un collegamento (Fetta.Url): sottolineato tenue, rosso al passaggio. Con una
   seconda riga (Fetta.Sotto, l'ultimo acquisto dei clienti da richiamare) nome e riga stanno uno sopra l'altro. */
.graf-barre .et a.nome{color:inherit;text-decoration:underline;text-decoration-color:var(--bordo-forte);text-underline-offset:3px}
.graf-barre .et a.nome:hover,.graf-barre .et a.nome:focus-visible{color:var(--accento-testo);text-decoration-color:currentColor}
.graf-barre .et .nome-due{display:flex;flex-direction:column;gap:1px;min-width:0}
.graf-barre .et .nome-due .sotto{font-size:11.5px;line-height:1.3;color:var(--tenue);font-variant-numeric:tabular-nums}
.graf-due .graf-barre .et .nome-due .nome{white-space:normal;overflow:visible;text-overflow:clip}
.graf-barre li.con-sotto{grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"et val" "pista pista";row-gap:6px;padding:8px 0}
.graf-barre li.con-sotto .et .nome{white-space:normal;overflow:visible;text-overflow:clip}

/* ===== Azzera filtri ben visibile (06/10/2026; l'utente: "il tasto AZZERA FILTRO non si vede, deve vedersi. pensavo
   un'icona rossa X con scritto azzera filtri") =====
   Vale per il pulsante in fondo ai pannelli Filtri (catalogo, opportunita', articoli dell'opportunita', aziende, registro,
   vendite del cliente e dell'agente), per "Azzera filtri" accanto al numero delle aziende e per quello delle statistiche:
   bordo e testo rossi su velo rosso, la X bianca in un quadratino rosso (le icone d'azione sono quadrate). Al passaggio
   del mouse si riempie di rosso e la X diventa rossa su bianco. Spento (niente da azzerare) resta riconoscibile. */
.cat-filtri .cat-filtri-piede .bottone,a.azzera-filtri,.bottone.vuoto.stb-azzera{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--accento);border-radius:9px;background:var(--accento-velo);color:var(--accento-testo);font-size:13px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer}
.cat-filtri .cat-filtri-piede .bottone svg,a.azzera-filtri svg,.bottone.vuoto.stb-azzera svg{flex:none;width:24px;height:24px;padding:5px;border-radius:6px;background:var(--accento);color:#fff;stroke-width:2.6}
.cat-filtri .cat-filtri-piede .bottone:hover,.cat-filtri .cat-filtri-piede .bottone:focus-visible,a.azzera-filtri:hover,a.azzera-filtri:focus-visible,.bottone.vuoto.stb-azzera:hover,.bottone.vuoto.stb-azzera:focus-visible{background:var(--accento);border-color:var(--accento);color:#fff}
.cat-filtri .cat-filtri-piede .bottone:hover svg,.cat-filtri .cat-filtri-piede .bottone:focus-visible svg,a.azzera-filtri:hover svg,a.azzera-filtri:focus-visible svg,.bottone.vuoto.stb-azzera:hover svg,.bottone.vuoto.stb-azzera:focus-visible svg{background:#fff;color:var(--accento)}
.cat-filtri .cat-filtri-piede .bottone:disabled{opacity:.55;cursor:default}
.cat-filtri .cat-filtri-piede .bottone:disabled:hover{background:var(--accento-velo);color:var(--accento-testo)}
.cat-filtri .cat-filtri-piede .bottone:disabled:hover svg{background:var(--accento);color:#fff}
/* Aziende: un "Azzera filtri" solo alla volta (06/10/2026, l'utente: "vedo 2 tasti azzera filtri in filtro aziende"). Con il
   pannello Filtri aperto resta quello in fondo al pannello; chiuso, quello accanto al numero delle aziende (serve quando sono
   attive solo la ricerca o la regione della mappa). L'elenco (UpdElenco) viene subito dopo il pannello #azFiltri. */
#azFiltri:not([hidden]) ~ div a.azzera-filtri{display:none}

/* Gestione > Tipi di campione: il nome in inglese con il pulsante IA (07/10/2026) sotto il nome italiano, con lo stesso
   respiro delle altre voci della scheda (senza, l'etichetta stava attaccata alla frase d'aiuto del nome) */
.categorie-pagina .corpo-form .ms-campo-ia{margin-top:12px}

/* Cruscotto che si apre subito (07/10/2026, l'utente: "fai in modo di aprire subito il cruscotto e i vari panel si
   carichino indipendentemente dalla pagina"). Finche' una parte non arriva da CruscottoParti.ashx
   (js/cruscotto-pannelli.js) al suo posto c'e' uno scheletro con la stessa forma: barrette nel colore del testo, molto
   tenui, che pulsano piano; i riquadri sono quelli veri (.graf-num, .riquadro), quindi i due temi vanno da soli.
   Quando la parte arriva compare con una dissolvenza breve; senza movimento se il sistema lo chiede. */
.cru-num-attesa{display:inline-block;width:2.6ch;height:.72em;border-radius:6px;background:currentColor;vertical-align:middle;opacity:.16;animation:cru-pulsa 1.1s ease-in-out infinite alternate}
.cv-var .cru-num-attesa{width:12ch;height:.8em}
.cru-sch-num i,.cru-sch-num b,.cru-sch-grafico > i,.cru-sch-barre span{display:block;border-radius:5px;background:currentColor;opacity:.14;animation:cru-pulsa 1.1s ease-in-out infinite alternate}
.cru-sch-num{min-height:100px}
.cru-sch-num i{height:10px;width:52%}
.cru-sch-num b{height:24px;width:38%;margin:12px 0}
.cru-sch-num b + i{width:72%}
.cru-sch-grafico{padding:16px 18px 18px}
.cru-sch-grafico > i{height:12px;width:34%;max-width:260px}
.cru-sch-barre{display:flex;align-items:flex-end;gap:7px;height:170px;margin-top:20px}
.cru-sch-barre span{flex:1 1 0;min-width:0;border-radius:4px 4px 0 0}
.cru-attesa{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:2px 0 20px;font-size:13px;color:var(--tenue)}
.cru-attesa .cc-v-ruota{width:16px;height:16px;border-width:2px}
.cru-attesa.errore{gap:12px;padding:16px 18px;border:1px solid var(--bordo);border-left:3px solid var(--accento);border-radius:var(--raggio);background:var(--pannello);color:var(--accento-testo);font-size:14px}
.cru-arrivato .cru-corpo,.cv-veloci.cru-arrivati .cv-num,.cv-veloci.cru-arrivati .cv-var{animation:cru-appare .3s ease-out}
@keyframes cru-pulsa{from{opacity:.08}to{opacity:.2}}
@keyframes cru-appare{from{opacity:0}to{opacity:1}}
@media (max-width:640px){
  .cru-sch-barre{height:120px;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .cru-num-attesa,.cru-sch-num i,.cru-sch-num b,.cru-sch-grafico > i,.cru-sch-barre span,.cru-arrivato .cru-corpo,.cv-veloci.cru-arrivati .cv-num,.cv-veloci.cru-arrivati .cv-var{animation:none}
}

/* ===== Vendite riga per riga (07/10/2026, scheda del cliente e dell'agente) =====
   L'utente: "nessun raggruppamento ... un elenco riga per riga con i dati presenti nella tabella, anche lo Status lo
   scrivi come pillola senza grafico timeline, mettendo come lo stile grafico del sito una barra laterale con il colore
   dello status, non tanto larga ... righe compatte, senza foto articolo". In cima il venduto dell'anno e il grafico chiusi
   in una riga (.cc-v-sintesi, "richiudibile o espandibile a piacimento"); la fila bassa delle pillole degli stati
   (.cc-v-flusso, si toccano per filtrare); l'Excel accanto ai filtri (.cc-v-excel); la tabella .cc-vl: la barretta dello
   stato e' l'ombra interna della prima cella (3 px, colore --st), le teste ordinano (.cc-vl-ord, freccia del verso).
   Le colonne si diradano quando il riquadro e' stretto (container ccv) e sotto i 760 px le righe diventano schede di
   due righe: stato, articolo e icone in cima; data, DDT, metri e totale sotto (mai scorrere di lato). */
.cc-v{container:ccv / inline-size}

/* il venduto dell'anno e il grafico, chiusi in una riga */
.cc-v-sintesi{margin:0 0 14px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2)}
.cc-v-sintesi > summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:46px;padding:8px 14px;cursor:pointer;list-style:none;border-radius:var(--raggio)}
.cc-v-sintesi > summary::-webkit-details-marker{display:none}
.cc-v-sintesi > summary:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.cc-v-sint-dati{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0}
.cc-v-sint-dati .cc-v-et{font-size:12px}
.cc-v-sint-dati b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cc-v-sint-dati small{font-size:13.5px;font-weight:700}
.cc-v-sint-dati small.su{color:var(--successo)}.cc-v-sint-dati small.giu{color:var(--pericolo)}
[data-tema="scuro"] .cc-v-sint-dati small.su{color:#4fd08a}[data-tema="scuro"] .cc-v-sint-dati small.giu{color:#ff6b6b}
.cc-v-sint-apri{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13.5px;font-weight:600;color:var(--accento-testo)}
.cc-v-sint-apri .aperto,.cc-v-sintesi[open] .cc-v-sint-apri .chiuso{display:none}
.cc-v-sintesi[open] .cc-v-sint-apri .aperto{display:inline}
.cc-v-sint-freccia{flex:none;transition:transform .2s}
.cc-v-sintesi[open] .cc-v-sint-freccia{transform:rotate(180deg)}
/* aperta, i numeri della riga sono gia' nel riquadro grande */
.cc-v-sintesi[open] .cc-v-sint-dati{display:none}
.cc-v-sintesi > .cc-v-eroe{margin:0;padding:0 14px 14px}
.cc-v-sintesi > summary:hover .cc-v-sint-apri{text-decoration:underline}

/* i filtri, il riepilogo delle righe e l'Excel */
.cc-v-filtri-tot{flex:1 1 220px}
.cc-v-excel{position:relative;margin-left:auto}
.cc-v-excel-apri{display:inline-flex;align-items:center;gap:8px}
.cc-v-excel-apri.in-corso{cursor:progress;opacity:.75}
.cc-v-excel-apri.in-corso svg{animation:cc-v-pulsa 1s ease-in-out infinite alternate}
@keyframes cc-v-pulsa{from{opacity:.35}to{opacity:1}}
/* il pulsante Excel (07/10/2026, proposta C): l'icona nello stile di Excel, grande, con "EXCEL" scritto sotto in verde;
   nelle vendite accanto ai filtri e nelle anagrafiche accanto al numero delle aziende (EsportaExcel.Icona) */
.cc-v-excel-apri.xl-pulsante{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:2px 4px;border:0;border-radius:8px;background:none;color:#107C41;font:inherit;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.1;cursor:pointer}
[data-tema="scuro"] .cc-v-excel-apri.xl-pulsante{color:#33C481}
.xl-pulsante .xl-icona{display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.22));transition:transform .15s}
.xl-pulsante:hover .xl-icona,.xl-pulsante[aria-expanded="true"] .xl-icona{transform:translateY(-1px) scale(1.05)}
.xl-pulsante:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.cc-v-excel-apri.xl-pulsante.in-corso .xl-icona{animation:cc-v-pulsa .8s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.xl-pulsante .xl-icona{transition:none}.cc-v-excel-apri.xl-pulsante.in-corso .xl-icona{animation:none}}
.cc-v-excel-menu{position:absolute;z-index:30;top:calc(100% + 6px);right:0;min-width:250px;padding:6px;border-radius:var(--raggio);background:var(--pannello);border:1px solid var(--bordo-forte,var(--bordo));box-shadow:0 12px 30px rgba(0,0,0,.22)}
.cc-v-excel-menu button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:10px 12px;border:0;border-radius:calc(var(--raggio) - 1px);background:transparent;font:inherit;font-size:14px;color:var(--testo);text-align:left;cursor:pointer}
.cc-v-excel-menu button:hover,.cc-v-excel-menu button:focus-visible{background:color-mix(in srgb,var(--accento2) 12%,transparent)}
.cc-v-excel-menu b{font-variant-numeric:tabular-nums;color:var(--tenue)}

/* la fila bassa degli stati: pillole che filtrano */
.cc-v-flusso{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.cc-v-flusso .cc-v-f{display:inline-flex;align-items:center;gap:8px;min-height:34px;margin:0;padding:0 14px 0 12px;border:1px solid color-mix(in srgb,var(--st) 40%,var(--bordo));border-radius:999px;background:color-mix(in srgb,var(--st) 8%,transparent);font:inherit;font-size:13.5px;font-weight:600;color:var(--testo);cursor:pointer;transition:background-color .15s,border-color .15s,opacity .15s}
.cc-v-flusso .cc-v-f i{width:9px;height:9px;border-radius:50%;background:var(--st);flex:none}
.cc-v-flusso .cc-v-f b{font-weight:800;font-variant-numeric:tabular-nums;color:var(--st)}
.cc-v-flusso .cc-v-f.zero{opacity:.55}
.cc-v-flusso .cc-v-f:hover{background:color-mix(in srgb,var(--st) 16%,transparent);border-color:var(--st)}
.cc-v-flusso .cc-v-f:focus-visible{outline:2px solid var(--st);outline-offset:2px}
.cc-v-flusso .cc-v-f.scelta{background:var(--st);border-color:var(--st);color:#fff;opacity:1}
.cc-v-flusso .cc-v-f.scelta i{background:#fff}.cc-v-flusso .cc-v-f.scelta b{color:#fff}
[data-tema="scuro"] .cc-v-flusso .cc-v-f.scelta,[data-tema="scuro"] .cc-v-flusso .cc-v-f.scelta b{color:#04141c}
[data-tema="scuro"] .cc-v-flusso .cc-v-f.scelta i{background:#04141c}
.cc-v-flusso.filtrato .cc-v-f:not(.scelta){opacity:.5}
.cc-v-flusso.filtrato .cc-v-f:not(.scelta):hover{opacity:.9}

/* il filtro per articolo acceso: codice, nome e la X (quadrata) per toglierlo */
.cc-vl-scelto{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:0 0 12px;padding:4px 4px 4px 12px;border-radius:999px;background:color-mix(in srgb,var(--accento) 9%,transparent);border:1px solid color-mix(in srgb,var(--accento) 45%,var(--bordo));font-size:13.5px}
.cc-vl-scelto b{color:var(--accento-testo);font-variant-numeric:tabular-nums}
.cc-vl-scelto-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tenue)}
.cc-vl-togli{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:var(--accento);color:#fff;cursor:pointer}
.cc-vl-togli:hover{filter:brightness(1.12)}
/* piu' filtri accesi toccando i valori (07/10/2026: articolo, partita, partita di tessitura) uno accanto all'altro */
.cc-vl-scelti{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.cc-vl-scelti .cc-vl-scelto{margin:0}
/* la partita e la partita di tessitura si toccano per filtrare, come l'articolo */
.cc-vr-valore{max-width:100%;padding:2px 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--bordo-forte,var(--bordo));text-underline-offset:3px}
.cc-vr-valore:hover,.cc-vr-valore:focus-visible{color:var(--accento-testo);text-decoration-color:currentColor}
.cc-vr-valore:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:3px}
.cc-vr-valore.scelto{padding:0 5px;border-radius:4px;background:color-mix(in srgb,var(--accento) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accento) 45%,transparent);text-decoration:none}

/* la tabella */
.cc-vl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
.cc-vl th.cc-vr-stato{width:86px}.cc-vl th.cc-vr-data{width:68px}.cc-vl th.cc-vr-doc{width:98px}.cc-vl th.cc-vr-cliente{width:12%}
.cc-vl th.cc-vr-ico{width:64px}.cc-vl th.cc-vr-col{width:9%}.cc-vl th.cc-vr-par{width:70px}.cc-vl th.cc-vr-pts{width:86px}
.cc-vl th.cc-vr-metri{width:72px}.cc-vl th.cc-vr-peso{width:62px}.cc-vl th.cc-vr-d{width:78px}.cc-vl th.cc-vr-tot{width:94px}
.cc-vl thead th{padding:0 6px 7px;border-bottom:1px solid var(--bordo-forte,var(--bordo));text-align:left;vertical-align:bottom;white-space:normal;line-height:1.2;overflow:hidden;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--tenue)}
.cc-vl th.cc-vr-n{text-align:right}
.cc-vl-ord{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 0;text-align:inherit;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.cc-vl-ord:hover{color:var(--testo)}
.cc-vl-ord:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:3px}
.cc-vl-freccia{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;opacity:0}
.cc-vl-ord:hover .cc-vl-freccia{border-top:5px solid currentColor;opacity:.4}
.cc-vl-ord.su,.cc-vl-ord.giu{color:var(--accento-testo)}
.cc-vl-ord.su .cc-vl-freccia{border-top:0;border-bottom:5px solid currentColor;opacity:1}
.cc-vl-ord.giu .cc-vl-freccia{border-bottom:0;border-top:5px solid currentColor;opacity:1}
.cc-vl td{padding:8px 6px;border-bottom:1px solid var(--bordo);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-vl tbody tr:hover td{background:color-mix(in srgb,var(--testo) 4%,transparent)}
.cc-vl th:first-child,.cc-vl td:first-child{padding-left:11px}
.cc-vl td:first-child{box-shadow:inset 3px 0 0 var(--st)}
.cc-vl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cc-vr-pill{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;white-space:nowrap;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--st);background:color-mix(in srgb,var(--st) 13%,transparent);border:1px solid color-mix(in srgb,var(--st) 38%,transparent)}
.cc-vr-data,.cc-vr-d{color:var(--tenue)}
.cc-vr-num{font-weight:600;white-space:nowrap}
.cc-vl td.cc-vr-doc{white-space:normal;line-height:1.25}
.cc-vl .cc-vr-tag{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:16px;vertical-align:middle;min-height:18px;margin:1px 0 1px 0;white-space:nowrap;padding:0 6px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;vertical-align:middle;background:transparent;border:1px solid var(--bordo)}
/* "DDT" o "Impegno" accanto al numero (07/10/2026): piccolo e tenue il DDT, nel colore dello stato l'impegno */
.cc-vr-tipo{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--debole);white-space:nowrap}
.cc-vr-tipo.impegno{color:var(--st)}
.cc-vl td.cc-vr-art{min-width:0;white-space:normal;overflow:visible;line-height:1.3}
.cc-vr-filtra{display:inline;padding:2px 0;border:0;background:none;font:inherit;line-height:inherit;color:inherit;text-align:left;cursor:pointer}
.cc-vr-filtra b{margin-right:6px;font-weight:700;color:var(--accento-testo);white-space:nowrap}
.cc-vr-filtra span{white-space:normal;overflow-wrap:anywhere}
.cc-vr-filtra:hover span,.cc-vr-filtra:focus-visible span{text-decoration:underline}
.cc-vr-filtra:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:3px}
.cc-vr-filtra.scelto b{padding:0 5px;border-radius:4px;background:color-mix(in srgb,var(--accento) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accento) 45%,transparent)}
.cc-vr-vuoto{color:var(--debole)}
.cc-vl td.cc-vr-ico{padding-left:0}
.cc-vr-ico .icona-riga{width:26px;height:26px;border-radius:5px;vertical-align:middle}
.cc-vr-ico .icona-riga svg{width:14px;height:14px}
.cc-vr-ico .icona-riga + .icona-riga{margin-left:4px}

.cc-vr-cliente a{color:inherit;text-decoration:underline;text-decoration-color:var(--bordo-forte,var(--bordo));text-underline-offset:3px}
.cc-vr-cliente a:hover{color:var(--accento-testo)}
.cc-vr-n{text-align:right}
.cc-vr-um{display:none}
.cc-vr-tot{font-weight:700}
.cc-vr-fuori .cc-vr-tot{font-weight:500;color:var(--debole);text-decoration:line-through;text-decoration-thickness:1px}
.cc-vr-credito .cc-vr-tot{color:var(--pericolo)}
[data-tema="scuro"] .cc-vr-credito .cc-vr-tot{color:#ff6b6b}
.cc-v-altre{display:block;width:100%;margin:12px 0 4px;min-height:42px;border-radius:var(--raggio);border:1px dashed var(--bordo-forte,var(--bordo));background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--tenue);cursor:pointer}
.cc-v-altre:hover{border-color:var(--v-ciano);color:var(--testo)}
.cc-v-altre:disabled{opacity:.6;cursor:progress}
/* sugli schermi touch le icone restano grandi abbastanza per il dito */
@media (pointer:coarse){
  .cc-vl th.cc-vr-ico{width:92px}
  .cc-vr-ico .icona-riga{width:38px;height:38px;border-radius:6px}
  .cc-vr-ico .icona-riga svg{width:18px;height:18px}
}

/* meno colonne quando il riquadro e' stretto: prima le date di pronto e spedito (restano nel title della pillola dello
   stato), poi la partita di tessitura e il peso; nella scheda dell'agente c'e' anche il cliente, quindi prima, e da ultimo
   il colore. Il riquadro di un computer con il menu aperto e' largo circa 1040 px: li' si vedono tutte le altre. */
@container ccv (max-width:1180px){
  .cc-vl .cc-vr-pronto,.cc-vl .cc-vr-spedito{display:none}
}
@container ccv (max-width:1340px){
  .cc-vl-agente .cc-vr-pronto,.cc-vl-agente .cc-vr-spedito{display:none}
}
@container ccv (max-width:980px){
  .cc-vl .cc-vr-pts,.cc-vl .cc-vr-peso{display:none}
}
@container ccv (max-width:1140px){
  .cc-vl-agente .cc-vr-pts,.cc-vl-agente .cc-vr-peso{display:none}
}
@container ccv (max-width:1000px){
  .cc-vl-agente .cc-vr-col{display:none}
}
/* telefono e riquadri stretti (iPad): ogni riga e' una scheda di due righe con meno dati */
@container ccv (max-width:860px){
  .cc-vl,.cc-vl tbody{display:block}
  .cc-vl thead{display:none}
  .cc-vl tr.cc-vr{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;grid-template-areas:"stato art art art ico" "data doc qta . tot" "cli cli cli cli cli";align-items:center;gap:4px 8px;padding:10px 10px 10px 13px;border-bottom:1px solid var(--bordo);box-shadow:inset 3px 0 0 var(--st)}
  .cc-vl tr.cc-vr td{display:none;padding:0;border:0;box-shadow:none;background:none}
  .cc-vl tr.cc-vr td.cc-vr-stato{display:block;grid-area:stato;overflow:visible;min-width:max-content}
  .cc-vl tr.cc-vr td.cc-vr-art{display:block;grid-area:art;width:auto;max-width:none;min-width:0}
  .cc-vl tr.cc-vr td.cc-vr-ico{display:flex;grid-area:ico;justify-self:end;gap:6px;width:auto;overflow:visible}
  .cc-vr-ico .icona-riga + .icona-riga{margin-left:0}
  .cc-vl tr.cc-vr td.cc-vr-data{display:block;grid-area:data;font-size:11.5px;overflow:visible;min-width:max-content}
  .cc-vl tr.cc-vr td.cc-vr-doc{display:block;grid-area:doc;font-size:11.5px;color:var(--tenue);overflow:visible;text-overflow:clip}
  .cc-vl tr.cc-vr td.cc-vr-metri{display:block;grid-area:qta;font-size:12px;text-align:left;overflow:visible;min-width:max-content}
  .cc-vl tr.cc-vr.cc-vr-kg td.cc-vr-metri{display:none}
  .cc-vl tr.cc-vr.cc-vr-kg td.cc-vr-peso{display:block;grid-area:qta;font-size:12px;text-align:left;overflow:visible;min-width:max-content}
  .cc-vl tr.cc-vr td.cc-vr-tot{display:block;grid-area:tot;justify-self:end;font-size:14px;overflow:visible;min-width:max-content}
  .cc-vl tr.cc-vr td.cc-vr-cliente{display:block;grid-area:cli;max-width:none;font-size:12px}
  .cc-vr-um{display:inline}
  .cc-vr-filtra{font-size:14px}
  .cc-vl tr.cc-vr td.cc-vr-stato,.cc-vl tr.cc-vr td.cc-vr-ico{align-self:start}
  .cc-vl .cc-vr-tag{margin-left:4px}
  .cc-vl tbody tr:hover td{background:none}
  .cc-v-excel{margin-left:0}
  /* la scelta dell'Excel si appoggia a tutta la barra dei filtri, sotto di lei (07/10/2026: l'icona grande sta a destra
     e il menu attaccato al suo bordo sinistro usciva dal riquadro sul telefono) */
  .cc-v-filtri{position:relative}
  .cc-v-filtri .cc-v-excel{position:static}
  .cc-v-excel-menu{left:0;right:0;min-width:0}
}
/* le schede larghe (iPad, riquadro fra 540 e 860 px): nella seconda riga anche il colore e la partita */
@container ccv (min-width:540px) and (max-width:860px){
  .cc-vl tr.cc-vr{grid-template-columns:auto auto auto auto auto minmax(0,1fr) auto;grid-template-areas:"stato art art art art art ico" "data doc qta col par . tot" "cli cli cli cli cli cli cli"}
  .cc-vl tr.cc-vr td.cc-vr-col{display:block;grid-area:col;max-width:180px;font-size:12px;color:var(--tenue)}
  .cc-vl tr.cc-vr td.cc-vr-par{display:block;grid-area:par;font-size:12px;color:var(--tenue)}
}

/* il messaggio in basso del carrello ("3 articoli nel carrello") */
.cc-v-avviso{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:1200;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:999px;background:var(--testo);color:var(--sfondo);font-size:14px;font-weight:600;box-shadow:0 10px 26px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .2s,transform .2s}
.cc-v-avviso.visibile{opacity:1;transform:translate(-50%,0)}

/* il file pronto da salvare sul telefono (js/scarica-file.js): il tocco nuovo che il foglio di condivisione vuole */
.scarica-pronto{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:1200;display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto;padding:10px 10px 10px 14px;border-radius:var(--raggio);background:var(--pannello);border:1px solid var(--bordo-forte,var(--bordo));box-shadow:0 14px 34px rgba(0,0,0,.28)}
.scarica-pronto-testo{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.scarica-pronto-chiudi{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:1px solid var(--bordo);border-radius:6px;background:transparent;font:inherit;font-weight:700;color:var(--tenue);cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .cc-v-sint-freccia,.cc-v-avviso{transition:none}
  .cc-v-excel-apri.in-corso svg{animation:none}
}

/* ===== aggiornamenti del gestionale (07/10/2026): FPC_DUA, scritta dai trigger delle tabelle seguite =====
   - la data in fondo alla scritta accanto a BETA (AggiornamentiGestionale.DataBeta): un <time>, non uno <span>, perche'
     sotto i 1280px ".testata .beta-avviso span" e' la fascia gialla; senza puntino davanti (07/10/2026, l'utente: la
     scritta finisce con "allineati al" e prosegue con la data), solo lo spazio
   - il riquadro "Ultimi aggiornamenti dal gestionale" di Setup > Integrazioni GEA (AggiornamentiGestionale.Riquadro):
     una riga per tabella, puntino verde (meno di 24 ore), ambra (meno di 7 giorni), grigio (piu' vecchia), tratteggiato
     (mai), rosso (trigger spento o tabella non piu' seguita); sul telefono la data va sotto il nome */
.beta-data{margin-left:.32em;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.gea-agg-aiuto{margin:-4px 0 12px;font-size:13px;color:var(--tenue)}
.gea-agg-elenco{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gea-agg-riga{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:11px 14px;border:1px solid var(--bordo-forte);border-left:4px solid var(--gea-agg,var(--ic-grigio));border-radius:12px;background:var(--pannello2)}
.gea-agg-punto{width:10px;height:10px;border-radius:50%;background:var(--gea-agg,var(--ic-grigio));box-shadow:0 0 0 3px color-mix(in srgb,var(--gea-agg,var(--ic-grigio)) 22%,transparent)}
.gea-agg-nome{display:flex;flex-direction:column;gap:2px;min-width:0}
.gea-agg-nome b{font-size:14.5px;color:var(--testo)}
.gea-agg-nome small{font-size:11.5px;color:var(--tenue);font-family:ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.gea-agg-quando{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.gea-agg-quando b{font-size:14px;font-variant-numeric:tabular-nums;color:var(--testo);white-space:nowrap}
.gea-agg-quando small{font-size:12px;color:var(--tenue)}
.gea-agg-fresca{--gea-agg:var(--ic-verde)}
.gea-agg-recente{--gea-agg:#e4a11b}
.gea-agg-vecchia{--gea-agg:var(--ic-grigio)}
.gea-agg-ferma{--gea-agg:var(--ic-rosso)}
.gea-agg-mai{--gea-agg:var(--ic-grigio);border-left-style:dashed}
.gea-agg-mai .gea-agg-punto{background:transparent;border:2px dashed var(--ic-grigio);box-shadow:none;width:12px;height:12px;box-sizing:border-box}
.gea-agg-mai .gea-agg-quando b{font-weight:600;color:var(--tenue)}
.gea-agg-ferma .gea-agg-nome small{color:var(--ic-rosso)}
.gea-agg-vuoto{margin:0;padding:14px;border:1px dashed var(--bordo-forte);border-radius:12px;font-size:13.5px;color:var(--tenue)}
.gea-agg-nota{margin:10px 0 0;font-size:12px;color:var(--tenue)}
.gea-agg-nota code{padding:1px 6px;border-radius:6px;background:var(--pannello2);border:1px solid var(--bordo);font-size:11.5px;overflow-wrap:anywhere}
@media (max-width:560px){
  .gea-agg-riga{grid-template-columns:auto minmax(0,1fr)}
  .gea-agg-quando{grid-column:2;align-items:flex-start;text-align:left}
}

/* ===== 08/10/2026: Setup > Archivio dei file, "Cosa c'e' adesso" contato in sottofondo (FPC.ArchivioConti): il riquadro
   d'attesa con la rotella e l'ora del conteggio ===== */
.arc-attesa{display:block}
.arc-contando{display:flex;align-items:center;gap:10px;margin:0;padding:14px 16px;border:1px dashed var(--bordo-forte);border-radius:var(--raggio);font-size:13.5px;color:var(--tenue)}
.arc-rotella{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accento) 25%,transparent);border-top-color:var(--accento);animation:gira .8s linear infinite}
.arc-contati{margin:8px 0 0;font-size:12px;color:var(--tenue)}

/* ===== 08/10/2026: Setup > Loghi automatici, gli ultimi loghi messi di notte (logo su bianco come nel portale, azienda,
   quando, cestino) ===== */
.ln-elenco{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ln-riga{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:9px 12px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2)}
.ln-logo{display:flex;align-items:center;justify-content:center;flex:none;width:92px;height:46px;padding:4px;box-sizing:border-box;border-radius:8px;background:#fff;border:1px solid var(--bordo);overflow:hidden}
.ln-logo img{display:block;max-width:82px;max-height:36px;width:auto;height:auto;object-fit:contain}
.ln-nome{display:flex;flex-direction:column;gap:2px;min-width:0;text-decoration:none;color:var(--testo)}
.ln-nome b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln-nome small{font-size:12px;color:var(--tenue);font-variant-numeric:tabular-nums}
.ln-nome:hover b{color:var(--accento-testo)}
@media (max-width:520px){
  .ln-logo{width:64px;height:38px}
  .ln-logo img{max-width:54px;max-height:28px}
  .ln-nome b{white-space:normal}
}

/* ===== 07/10/2026 sera =====
   - il conteggio o il totale degli elenchi evidenziato, uguale dappertutto (ContoElenco.Html; scelta C dell'utente fra tre
     proposte: "il totale... adesso e' in grigio, va evidenziato... su tutti gli elenchi"): testo pieno, numeri grandi rossi.
     .conto-elenco .conto-num (due classi) vince sulle regole "b" dei contenitori, per esempio .rg-riassunto p b
   - la partita di tessitura sotto la partita (.cc-vr-par-ts) quando la sua colonna non ci sta: con le stesse misure che
     nascondono .cc-vr-pts (980px, 1140px nella scheda dell'agente); nelle schede dell'iPad sta sotto la partita */
.conto-elenco{color:var(--testo);font-size:15px;font-weight:600;line-height:1.35;letter-spacing:0;text-transform:none}
.conto-elenco .conto-num{color:var(--accento-testo);font-size:1.3em;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.cc-vr-par-ts{display:none}
.cc-vl td .cc-vr-par-ts{margin-top:3px;font-size:.94em}
.cc-vl th .cc-vr-par-ts{margin-top:2px;font-size:9.5px;font-weight:600;color:var(--debole)}
@container ccv (max-width:980px){
  .cc-vl .cc-vr-par-ts{display:block}
}
@container ccv (max-width:1140px){
  .cc-vl-agente .cc-vr-par-ts{display:block}
}

/* ===== 08/10/2026: ORDINI APERTI (scheda del cliente e dell'agente; OrdiniApertiHtml, js/ordini-aperti.js). Versione scelta
   dall'utente: in cima Filtri/totali/Excel, pillole degli stati e cinque numeri (dalla proposta D); griglia tutta su una riga
   (proposta C) con i consegnati e la barretta (proposta A); stati in obliquo con il pallino; nota con l'icona gialla che
   lampeggia e si apre sotto la riga; riga verde con FV/DDT, rossa con blocco qualita'. ===== */
.cc-t-ordini{--c:#c96a0b}
html[data-tema="scuro"] .cc-t-ordini{--c:#f0a04b}
/* otto schede nel cliente, dieci nell'agente */
.cc-tessere{grid-template-columns:repeat(8,minmax(0,1fr))}
.as-tessere{grid-template-columns:repeat(10,minmax(0,1fr))}
@container az (max-width:940px){
  .cc-tessere{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cc-tessere .cc-t-scheda{grid-column:auto}
  .cc-tessere .cc-tessera .cc-nome{font-size:10px;letter-spacing:.02em;gap:4px}
  .as-tessere{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* telefono: tre per riga (in quattro i nomi si tagliano); la Scheda larga due nel cliente (2+1, 3, 3) e tutta la riga
   nell'agente (1, 3, 3, 3), cosi' le file restano piene */
@container az (max-width:620px){
  .cc-tessere{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cc-tessere .cc-t-scheda{grid-column:span 2}
  .as-tessere{grid-template-columns:repeat(3,minmax(0,1fr))}
  .as-tessere .cc-t-scheda{grid-column:1 / -1}
  .cc-tessere .cc-tessera .cc-nome{letter-spacing:.02em}
}
.cc-tessera.cc-t-ordini small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.cc-p-ordini{padding:18px 20px 20px}
.oa{container:oa / inline-size;display:block}
.oa-barra{margin-bottom:10px}
.conto-elenco .conto-num.oa-verde{color:var(--ic-verde)}
/* pillole degli stati */
.oa-pil{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--bordo-forte);border-radius:999px;font:inherit;font-size:12px;color:var(--testo);background:var(--pannello2);cursor:pointer}
.oa-pil b{font-variant-numeric:tabular-nums;color:var(--tenue)}
.oa-pil em{font-style:normal;font-size:9.5px;font-weight:800;color:var(--sc);letter-spacing:.02em}
html[data-tema="chiaro"] .oa-pil em{filter:brightness(.7) saturate(1.3)}
.oa-pil i{width:8px;height:8px;border-radius:50%;background:var(--sc,var(--ic-grigio))}
.oa-pil.attiva{border-color:var(--accento);background:color-mix(in srgb,var(--accento) 16%,var(--pannello2))}
.oa-pil:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
.oa-s-NA{--sc:#e4a11b}.oa-s-BP{--sc:#ff6b4a}.oa-s-DT{--sc:#5aa9ff}.oa-s-DE{--sc:#b38cff}.oa-s-ES{--sc:#3fc1c9}
.oa-s-SP{--sc:#7fd36b}.oa-s-FV{--sc:var(--ic-verde)}.oa-s-BQ{--sc:var(--ic-rosso)}
.oa-scelti{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 10px}
.cf-scheda input.oa-cerca{width:100%;min-width:0;height:40px;box-sizing:border-box;padding:0 10px;border:1px solid var(--bordo-forte);border-radius:6px;background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:16px}
/* i cinque numeri */
.oa-kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px}
.oa-kpi-c{padding:10px 12px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2);min-width:0}
.oa-kpi-c small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.oa-kpi-c > b{display:block;font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--testo)}
.oa-kpi-c span{font-size:11.5px;color:var(--tenue)}
.oa-kpi-c span b{font-weight:700;color:var(--testo);font-variant-numeric:tabular-nums}
.oa-kpi-c.rosso{border-color:color-mix(in srgb,var(--ic-rosso) 60%,transparent);background:color-mix(in srgb,var(--ic-rosso) 14%,var(--pannello2))}
.oa-kpi-c.rosso > b{color:var(--ic-rosso)}
.oa-kpi-c.verde > b{color:var(--ic-verde)}
.oa-kpi-c.ambra > b{color:#e4a11b}
/* la griglia */
.oa-griglia{padding:6px 56px 0 0}
.oa-c{width:100%;border-collapse:collapse;font-size:12px}
.oa-c thead tr{background:color-mix(in srgb,var(--pannello2) 80%,transparent)}
.oa-c th{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue);padding:5px 4px;border-bottom:1px solid var(--bordo-forte);white-space:nowrap;text-align:left;height:84px;vertical-align:bottom}
.oa-c th.oa-num,.oa-c td.oa-num{text-align:right}
.oa-c td{padding:5px 4px;border-bottom:1px solid var(--bordo);white-space:nowrap;font-variant-numeric:tabular-nums;vertical-align:middle}
.oa-c td.g,.oa-c th.g{border-left:1px solid var(--bordo-forte)}
.oa-c .oa-tenue{color:var(--tenue)}
.oa-c .oa-mono{font-family:ui-monospace,Consolas,monospace;font-size:11.5px}
.oa-c .oa-d-rif{font-weight:800}
.oa-c .oa-d-col{color:var(--tenue);max-width:132px;overflow:hidden;text-overflow:ellipsis}
.oa-c .oa-d-sal{color:var(--accento-testo);font-weight:800}
.oa-c .oa-ko{color:#e4a11b;font-weight:800}
.oa-c .oa-d-cons{min-width:64px}
.oa-barretta{display:block;height:4px;margin-top:3px;border-radius:2px;background:color-mix(in srgb,var(--testo) 12%,transparent);overflow:hidden}
.oa-barretta i{display:block;height:100%;background:var(--ic-verde)}
.oa-c .oa-d-cli{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.oa-cli{all:unset;cursor:pointer;font-weight:700;color:var(--testo);overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block;vertical-align:bottom}
.oa-cli:hover,.oa-cli:focus-visible{color:var(--accento-testo);text-decoration:underline}
/* gli stati: intestazioni in obliquo con il pallino, una colonna di pallini per stato */
.oa-c th.st{width:24px;min-width:24px;padding:0;position:relative;overflow:visible;background:transparent}
.oa-c th.st i{position:absolute;left:7px;bottom:6px;width:10px;height:10px;border-radius:50%;background:var(--sc);box-shadow:0 0 0 2px color-mix(in srgb,var(--sc) 28%,transparent)}
.oa-c th.st span{position:absolute;left:11px;bottom:22px;z-index:2;transform-origin:0 100%;transform:rotate(-45deg);white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--testo)}
.oa-c td.st{width:24px;text-align:center;padding-left:2px;padding-right:2px}
.oa-c td.st i{display:inline-block;width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--testo) 12%,transparent)}
.oa-c td.st i.on{background:var(--sc);box-shadow:0 0 0 2px color-mix(in srgb,var(--sc) 30%,transparent)}
.oa-st-nome{display:none}
.oa-c td.oa-d-scheda{display:none}
/* righe colorate */
.oa-c tr.oa-fv td{background:color-mix(in srgb,var(--ic-verde) 14%,transparent)}
.oa-c tr.oa-fv td:first-child{box-shadow:inset 3px 0 0 var(--ic-verde)}
.oa-c tr.oa-bq td{background:color-mix(in srgb,var(--ic-rosso) 24%,transparent)}
.oa-c tr.oa-bq td:first-child{box-shadow:inset 3px 0 0 var(--ic-rosso)}
.oa-c tbody tr.oa-r:hover td{background:color-mix(in srgb,var(--accento) 10%,transparent)}
/* la nota: icona gialla che lampeggia; la riga si apre sotto */
.oa-c td.oa-d-nt{width:30px;text-align:center;padding:2px 4px}
.oa-c .oa-nota-ic{--ic:#e9b308;width:24px;height:24px;cursor:pointer;animation:oa-lampeggia 1.4s ease-in-out infinite}
.oa-c .oa-nota-ic svg{width:13px;height:13px}
@keyframes oa-lampeggia{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.oa-c .oa-nota-ic{animation:none}}
.oa-c tr.ha-nota{cursor:pointer}
.oa-c tr.aperta td{border-bottom-color:transparent}
.oa-c tr.aperta .oa-nota-ic{animation:none;background:#e9b308;border-color:#e9b308;color:#1a1300}
.oa-c tr.oa-nota-riga td{padding:0 6px 9px 34px;border-bottom:1px solid var(--bordo);white-space:normal}
.oa-nota-testo{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-radius:8px;border-left:3px solid #e9b308;background:color-mix(in srgb,#e9b308 12%,var(--pannello2));font-size:12.5px;color:var(--testo)}
.oa-nota-testo b{flex:none;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#c99a06;padding-top:1px}
.oa-c tr.oa-fv + tr.oa-nota-riga td{background:color-mix(in srgb,var(--ic-verde) 14%,transparent);box-shadow:inset 3px 0 0 var(--ic-verde)}
.oa-c tr.oa-bq + tr.oa-nota-riga td{background:color-mix(in srgb,var(--ic-rosso) 24%,transparent);box-shadow:inset 3px 0 0 var(--ic-rosso)}
.oa-nessuna{margin:6px 0 0;padding:14px;border:1px dashed var(--bordo-forte);border-radius:12px;font-size:13.5px;color:var(--tenue)}
.oa-legenda{margin:12px 2px 0;font-size:12px;color:var(--tenue);display:flex;gap:16px;flex-wrap:wrap}
.oa-legenda span{display:inline-flex;align-items:center;gap:6px}
.oa-legenda i{width:14px;height:10px;border-radius:3px}
.oa-legenda .oa-l-fv{background:color-mix(in srgb,var(--ic-verde) 30%,transparent);border-left:3px solid var(--ic-verde)}
.oa-legenda .oa-l-bq{background:color-mix(in srgb,var(--ic-rosso) 30%,transparent);border-left:3px solid var(--ic-rosso)}
/* meno spazio: le colonne meno importanti se ne vanno una alla volta */
@container oa (max-width:1180px){ .oa-c .oa-h-ins,.oa-c .oa-d-ins{display:none} }
@container oa (max-width:1100px){ .oa-c .oa-h-supp,.oa-c .oa-d-supp,.oa-c .oa-h-tras,.oa-c .oa-d-tras{display:none} }
@container oa (max-width:1020px){ .oa-c .oa-h-teor,.oa-c .oa-d-teor{display:none} .oa-c .oa-d-col{max-width:100px} }
/* portatili (1280-1440 px): intestazioni su due righe, celle piu' strette, pallini degli stati a 20 px */
.oa-c th:not(.st){white-space:normal;line-height:1.15}
@container oa (max-width:1200px){
  .oa-c th,.oa-c td{padding-left:3px;padding-right:3px}
  .oa-c th.st,.oa-c td.st{width:20px;min-width:20px;padding-left:0;padding-right:0}
  .oa-c th.st i{left:5px}
  .oa-c th.st span{left:9px}
  .oa-c td.oa-d-nt{width:26px;padding:2px}
  .oa-c .oa-d-cons{min-width:56px}
}
@container oa (max-width:960px){ .oa-c .oa-h-ok,.oa-c .oa-d-ok{display:none} }
/* nell'agente c'e' in piu' la colonna del cliente: le altre se ne vanno prima (prove da 1280 a 1920 px) */
@container oa (max-width:1480px){ .oa-agente .oa-c .oa-h-ins,.oa-agente .oa-c .oa-d-ins{display:none} }
@container oa (max-width:1400px){ .oa-agente .oa-c .oa-h-supp,.oa-agente .oa-c .oa-d-supp,.oa-agente .oa-c .oa-h-tras,.oa-agente .oa-c .oa-d-tras{display:none} }
@container oa (max-width:1300px){ .oa-agente .oa-c .oa-h-teor,.oa-agente .oa-c .oa-d-teor{display:none} .oa-agente .oa-c .oa-d-cli{max-width:130px} }
@container oa (max-width:1180px){ .oa-agente .oa-c .oa-h-ok,.oa-agente .oa-c .oa-d-ok{display:none} }
@container oa (max-width:1060px){ .oa-agente .oa-c .oa-h-pronta,.oa-agente .oa-c .oa-d-pronta{display:none} .oa-agente .oa-c .oa-d-cli{max-width:110px} }
@container oa (max-width:960px){ .oa-agente .oa-c .oa-h-prezzo,.oa-agente .oa-c .oa-d-prezzo,.oa-agente .oa-c .oa-h-all,.oa-agente .oa-c .oa-d-all{display:none} }
@container oa (max-width:920px){ .oa-agente .oa-c .oa-h-ord,.oa-agente .oa-c .oa-d-ord{display:none} }
/* telefono e iPad stretto: i numeri due per riga, ogni riga d'ordine diventa una scheda (mai scorrere di lato) */
@container oa (max-width:890px){
  .oa-kpi-c:first-child{grid-column:1 / -1}
  .oa-griglia{padding:0}
  .oa-c,.oa-c tbody{display:block}
  .oa-c thead{display:none}
  .oa-c tr.oa-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;padding:10px 12px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello2)}
  .oa-c tr.oa-r td{display:none;border:0;padding:0;background:transparent!important;box-shadow:none!important}
  .oa-c tr.oa-fv{background:color-mix(in srgb,var(--ic-verde) 14%,var(--pannello2));box-shadow:inset 4px 0 0 var(--ic-verde)}
  .oa-c tr.oa-bq{background:color-mix(in srgb,var(--ic-rosso) 22%,var(--pannello2));box-shadow:inset 4px 0 0 var(--ic-rosso)}
  .oa-c tr.oa-r .oa-d-rif{display:block;flex:none;font-size:15px}
  .oa-c tr.oa-r .oa-d-art{display:block;flex:1 1 auto;min-width:0;border:0;white-space:normal}
  .oa-c tr.oa-r .oa-d-cli{display:block;flex:1 1 100%;order:2;max-width:none}
  .oa-c tr.oa-r .oa-d-nt{display:block;flex:none;width:auto;order:1;margin-left:auto}
  .oa-c tr.oa-r .oa-d-nt:empty{display:none}
  .oa-c tr.oa-r .oa-d-nt .oa-nota-ic{width:38px;height:38px}
  .oa-c tr.oa-r .oa-d-scheda{display:grid;flex:1 1 100%;order:3;gap:4px;white-space:normal}
  .oa-sc-col{font-size:12.5px;color:var(--tenue)}
  .oa-sc-q{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--tenue)}
  .oa-sc-q b{color:var(--testo);font-variant-numeric:tabular-nums}
  .oa-sc-q .oa-sc-sal{color:var(--accento-testo);font-size:14px}
  .oa-sc-q .oa-sc-cons{color:var(--ic-verde)}
  .oa-c tr.oa-r td.st{display:none}
  .oa-c tr.oa-r td.st:has(i.on){display:inline-flex;order:4;align-items:center;gap:5px;width:auto;padding:2px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sc) 55%,transparent);background:color-mix(in srgb,var(--sc) 16%,transparent)!important;font-size:11.5px;font-weight:700}
  .oa-c tr.oa-r td.st:has(i.on) .oa-st-nome{display:inline}
  .oa-c tr.oa-nota-riga{display:block}
  .oa-c tr.oa-nota-riga[hidden]{display:none}
  .oa-c tr.oa-nota-riga td{display:block;padding:0 0 8px}
  .oa-c tr.oa-nota-riga .oa-nota-testo{margin:-12px 10px 0;border-radius:0 0 10px 10px;padding-top:12px}
  .oa-legenda{flex-direction:column;gap:6px}
}
/* ordini aperti, la priorita' (09/10/2026: Priority 1 = urgente, 2 = normale anche se manca, 3 = data di consegna non vincolante):
   davanti al riferimento "!" rosso che lampeggia con un alone (urgente), "circa uguale" grigio con il bordo tratteggiato (data
   non vincolante), niente per le normali (il trattino neutro solo nelle pillole dei filtri); il sesto numero "Urgenti" con il pallino rosso
   che lampeggia quando ce n'e' almeno una */
.oa-prio{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-right:5px;padding:0 3px;border-radius:4px;box-sizing:border-box;font-family:inherit;font-size:11px;font-weight:900;line-height:1;vertical-align:1px;letter-spacing:-.04em}
.oa-prio-1{background:var(--ic-rosso);color:#fff;animation:oa-urgente 1.1s ease-in-out infinite}
.oa-prio-2,.oa-prio-3{font-family:system-ui,"Segoe UI",sans-serif}
.oa-prio-2{background:transparent;color:var(--tenue);border:1px solid var(--bordo-forte)}
.oa-prio-3{background:color-mix(in srgb,#8fa3b8 14%,transparent);color:#9fb2c6;border:1px dashed color-mix(in srgb,#9fb2c6 80%,transparent);font-size:14px;font-weight:800}
html[data-tema="chiaro"] .oa-prio-3{color:#4f6377;border-color:color-mix(in srgb,#4f6377 70%,transparent)}
.oa-c tr.oa-nonvinc td.oa-d-pronta{color:var(--tenue);font-style:italic;text-decoration:underline dotted;text-underline-offset:3px}
@keyframes oa-urgente{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--ic-rosso) 60%,transparent)}50%{opacity:.5;box-shadow:0 0 0 6px color-mix(in srgb,var(--ic-rosso) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.oa-prio-1,.oa-kpi-c.urgente::after{animation:none}}
.oa-c tr.oa-urg td.oa-d-rif{color:var(--ic-rosso)}
.oa-pil-prio .oa-prio{margin-right:0}
.oa-pil.oa-p1{border-color:color-mix(in srgb,var(--ic-rosso) 60%,transparent)}
.oa-pil.oa-p3{border-style:dashed}
.oa-legenda .oa-prio{display:inline-grid;margin-right:0;animation:none}
.oa-kpi{grid-template-columns:repeat(6,minmax(0,1fr))}
.oa-kpi-c{position:relative}
.oa-kpi-c.urgente{border-color:color-mix(in srgb,var(--ic-rosso) 70%,transparent);background:color-mix(in srgb,var(--ic-rosso) 12%,var(--pannello2))}
.oa-kpi-c.urgente > b{color:var(--ic-rosso)}
.oa-kpi-c.urgente::after{content:"";position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:var(--ic-rosso);animation:oa-urgente 1.1s ease-in-out infinite}
.oa-kpi-c .oa-p3-n{color:var(--testo)}
@container oa (max-width:1020px){ .oa-kpi{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container oa (max-width:890px){ .oa-kpi{grid-template-columns:repeat(2,minmax(0,1fr))} .oa-kpi-c:first-child{grid-column:auto} }
/* ordini aperti (08/10/2026 sera, richieste dell'utente): righe piu' alte e pallini degli stati piu' grandi; il numero
   dell'ordine, il codice dell'articolo e il cliente si toccano per vedere solo le loro righe (il valore scelto resta
   evidenziato); la piccola icona blu accanto al numero apre sotto "Rif. Ordine Cliente:" (OrdCliNr, in blu) e la nota (in
   giallo); i titoli delle colonne ordinano, con la freccia del verso (come nelle Vendite); tutti i filtri nel pannello
   Filtri, in riquadri ordinati (quattro colonne sul computer, due sull'iPad, una sul telefono); i filtri accesi sopra i
   numeri, ognuno con la X; sul telefono le righe a blocchi di 30 con "Mostra altre" */
.oa-c td{padding-top:9px;padding-bottom:9px}
.oa-c th.st,.oa-c td.st{width:26px;min-width:26px}
.oa-c th.st i{left:6px;bottom:6px;width:13px;height:13px}
.oa-c th.st span{left:12px;bottom:25px}
.oa-c td.st i{width:13px;height:13px}
.oa-c td.st i.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 30%,transparent)}
/* i titoli che ordinano */
.oa-ordina{position:relative;display:inline-block;max-width:100%;padding:2px 0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;color:inherit;cursor:pointer}
.oa-num .oa-ordina{text-align:right}
.oa-ordina:hover{color:var(--testo)}
.oa-ordina:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:3px}
.oa-freccia{position:absolute;top:50%;right:-9px;margin-top:-3px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;opacity:0}
.oa-num .oa-freccia{right:auto;left:-9px}
.oa-verso .oa-freccia{position:static;margin:0}
.oa-ordina:hover .oa-freccia{border-top:5px solid currentColor;opacity:.4}
.oa-ordina.su,.oa-ordina.giu{color:var(--accento-testo)}
.oa-ordina.su .oa-freccia,.oa-verso.su .oa-freccia{border-top:0;border-bottom:5px solid currentColor;opacity:1}
.oa-ordina.giu .oa-freccia,.oa-verso.giu .oa-freccia{border-bottom:0;border-top:5px solid currentColor;opacity:1}
/* numero dell'ordine, articolo e cliente si toccano per filtrare */
.oa-ord-n,.oa-art{all:unset;box-sizing:border-box;cursor:pointer;font:inherit;font-weight:800;color:inherit;line-height:1.2;border-bottom:1px dotted color-mix(in srgb,currentColor 45%,transparent)}
.oa-art{font-weight:700}
.oa-ord-n:hover,.oa-art:hover,.oa-cli:hover{color:var(--accento-testo);border-bottom-color:currentColor}
.oa-ord-n:focus-visible,.oa-art:focus-visible{outline:2px solid var(--accento);outline-offset:2px;border-radius:3px}
.oa-ord-n.scelto,.oa-art.scelto,.oa-cli.scelto{color:var(--accento-testo);background:color-mix(in srgb,var(--accento) 13%,transparent);border-radius:4px;border-bottom-color:transparent;padding:0 3px;margin:0 -3px}
/* la piccola icona blu del riferimento del cliente (piena quando la riga sotto e' aperta) */
.oa-c .oa-rif-ic{width:22px;height:22px;margin-left:6px;vertical-align:middle;border-radius:5px}
.oa-c .oa-rif-ic svg{width:12px;height:12px}
.oa-c tr.ha-dett{cursor:pointer}
.oa-c tr.oa-nota-riga td > .oa-nota-testo + .oa-nota-testo{margin-top:6px}
.oa-rif-testo{border-left-color:var(--ic-blu);background:color-mix(in srgb,var(--ic-blu) 12%,var(--pannello2))}
.oa-nota-testo.oa-rif-testo b{color:var(--ic-blu)}
.oa-rif-testo span{font-family:ui-monospace,Consolas,monospace;font-weight:700;word-break:break-word}
/* il pannello Filtri: un riquadro per ogni filtro, al loro posto */
.oa-fgriglia{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"cerca cerca ordina solo" "prio stati stati stati"}
.oa-fgriglia.oa-fg-agente{grid-template-areas:"cerca cerca cli cli" "ordina prio solo solo" "stati stati stati stati"}
.oa-f-cerca{grid-area:cerca}.oa-f-cli{grid-area:cli}.oa-f-ordina{grid-area:ordina}.oa-f-prio{grid-area:prio}.oa-f-solo{grid-area:solo}.oa-f-stati{grid-area:stati}
.oa-fpillole{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.oa-fp-stati{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.oa-f-solo .oa-fpillole{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.oa-fgriglia .oa-pil{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:6px 12px;border-radius:10px;font-size:13px;text-align:left;box-sizing:border-box}
.oa-fgriglia .oa-pil .oa-pil-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oa-fgriglia .oa-pil b{flex:none;min-width:20px;text-align:right}
.oa-fgriglia .oa-pil i{flex:none;width:11px;height:11px}
.oa-fgriglia .oa-pil:disabled{opacity:.42;cursor:default}
.oa-fgriglia .oa-pil.attiva b{color:var(--testo)}
.oa-select{width:100%;min-width:0;height:40px;box-sizing:border-box;padding:0 10px;border:1px solid var(--bordo-forte);border-radius:6px;background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:15px}
.oa-select:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.oa-ordina-riga{display:flex;gap:8px;align-items:stretch}
.oa-ordina-riga .oa-select{flex:1}
.oa-verso{display:inline-flex;align-items:center;gap:7px;flex:none;height:40px;box-sizing:border-box;padding:0 12px;border:1px solid var(--bordo-forte);border-radius:6px;background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:13.5px;white-space:nowrap;cursor:pointer}
.oa-verso:hover{border-color:var(--accento)}
/* i filtri accesi sopra i numeri; "Mostra altre" sotto le schede */
.oa-scelti.cc-vl-scelti{margin:0 0 12px}
.oa-scelto .oa-prio{margin-right:0}
.oa-scelto-pal{flex:none;width:10px;height:10px;border-radius:50%;background:var(--sc)}
.oa-altre{display:flex;justify-content:center;margin:10px 0 0}
.oa-altre .bottone{min-height:42px}
@container oa (max-width:1200px){
  .oa-c th.st,.oa-c td.st{width:22px;min-width:22px}
  .oa-c th.st i{left:4px}
  .oa-c th.st span{left:10px}
  .oa-c .oa-rif-ic{margin-left:4px}
}
@container oa (max-width:1100px){
  .oa-fgriglia{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"cerca ordina" "prio solo" "stati stati"}
  .oa-fgriglia.oa-fg-agente{grid-template-areas:"cerca cli" "ordina prio" "solo solo" "stati stati"}
}
@container oa (max-width:1000px){ .oa-agente .oa-c .oa-h-prezzo,.oa-agente .oa-c .oa-d-prezzo,.oa-agente .oa-c .oa-h-all,.oa-agente .oa-c .oa-d-all{display:none} }
@container oa (max-width:960px){
  .oa-c .oa-d-col{max-width:80px}
  .oa-c .oa-d-cons{min-width:50px}
  .oa-c th.st,.oa-c td.st{width:20px;min-width:20px}
  .oa-c th.st i{left:3px}
  .oa-c th.st span{left:9px}
}
@container oa (max-width:890px){
  .oa-c tr.oa-r .oa-d-rif{display:flex;align-items:center;gap:6px}
  .oa-c .oa-rif-ic{width:34px;height:34px;margin-left:2px}
  .oa-c .oa-rif-ic svg{width:15px;height:15px}
  .oa-c tr.oa-nota-riga .oa-nota-testo + .oa-nota-testo{margin:6px 10px 0;padding-top:8px;border-radius:10px}
}
@container oa (max-width:620px){
  .oa-fgriglia,.oa-fgriglia.oa-fg-agente{grid-template-columns:minmax(0,1fr);grid-template-areas:"cerca" "cli" "ordina" "prio" "solo" "stati"}
  .oa-fgriglia:not(.oa-fg-agente){grid-template-areas:"cerca" "ordina" "prio" "solo" "stati"}
  .oa-fpillole,.oa-fp-stati{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oa-fgriglia .oa-pil{gap:5px;padding:6px 8px;font-size:12.5px}
  .oa-fgriglia .oa-pil b{min-width:0}
  .oa-f-solo .oa-fpillole{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oa-f-prio .oa-fpillole{grid-template-columns:minmax(0,1fr)}
  .oa-fgriglia .oa-pil .oa-pil-nome{white-space:normal;line-height:1.2}
  .oa-fgriglia .oa-pil em{display:none}
}
/* ===== 08/10/2026: il gruppo PRODUZIONE nelle tessere (richiesta dell'utente, variante C). Un riquadro largo due con il
   nome del gruppo e una riga per scheda (icona, nome, riga sotto, numero): nell'agente Campionature, Ordini aperti e
   Vendite (e niente piu' Opportunita'), nel cliente Ordini aperti e Vendite. Otto colonne sul computer; sull'iPad e sul
   telefono tre per riga con il gruppo su tutta la riga (righe affiancate sull'iPad, una sotto l'altra sul telefono). ===== */
.cc-tessere,.as-tessere{grid-template-columns:repeat(8,minmax(0,1fr))}
.cc-tessere .cc-gruppo{grid-column:span 2}
.cc-gruppo{--c1:#6d4fc4;--c2:#c96a0b;--c3:#0b8f9c;--c:var(--c2);cursor:default;padding:12px 12px 10px}
html[data-tema="scuro"] .cc-gruppo{--c1:#a58cf0;--c2:#f0a04b;--c3:#45d0d8}
.cc-gruppo::before{background:linear-gradient(90deg,var(--c1) 0 33.3%,var(--c2) 33.3% 66.6%,var(--c3) 66.6% 100%)}
.cc-tessere:not(.as-tessere) .cc-gruppo::before{background:linear-gradient(90deg,var(--c2) 0 50%,var(--c3) 50% 100%)}
.cc-gruppo:hover{transform:none;box-shadow:none}
.cc-gruppo .cc-nome svg{color:var(--testo)}
.cc-gruppo.attiva{border-color:color-mix(in srgb,var(--testo) 40%,var(--bordo));background:var(--pannello);box-shadow:none}
.cc-gruppo.attiva .cc-nome{color:var(--testo)}
.cc-g-righe{display:grid;gap:4px;margin-top:6px}
.cc-g-riga{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:9px;align-items:center;min-width:0;padding:5px 9px;border:1px solid transparent;border-radius:8px;background:color-mix(in srgb,var(--c) 7%,transparent);cursor:pointer;transition:background-color .15s,border-color .15s}
.cc-g-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.cc-g-ic svg{width:13px;height:13px}
.cc-g-t{display:grid;min-width:0;line-height:1.2}
.cc-g-n{font-size:12.5px;font-weight:700;color:var(--testo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-gruppo .cc-g-riga small{display:block;font-size:10.5px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-gruppo .cc-g-riga .cc-num{margin:0;font-size:18px;font-weight:800;line-height:1;letter-spacing:-.01em;color:var(--testo)}
.cc-g-riga:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.cc-g-riga:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.cc-g-riga.attiva{border-color:var(--c);background:color-mix(in srgb,var(--c) 20%,transparent)}
.cc-g-riga.sc-zero,.cc-g-riga.sc-spenta{opacity:.45}
.cc-g-riga.sc-trovati{border-color:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 24%,transparent)}
@container az (max-width:940px){
  .cc-tessere,.as-tessere{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cc-tessere .cc-t-scheda,.as-tessere .cc-t-scheda{grid-column:auto}
  .cc-tessere .cc-gruppo{grid-column:1 / -1}
  .cc-tessere:not(.as-tessere) .cc-g-righe{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@container az (max-width:620px){
  .cc-g-riga{padding:8px 10px}
  .cc-gruppo .cc-g-riga small{display:block;font-size:11.5px}
}
/* ===== 08/10/2026: Campioni e tirelle nel gruppo PRODUZIONE (richiesta dell'utente: "nella scheda produzioni non vedo
   campioni e tirelle"), con il loro riquadro che arriva quando si apre. Agente: Campionature, Campioni e tirelle, Ordini
   aperti, Vendite (quattro righe, un po' piu' strette); cliente: Campioni e tirelle, Ordini aperti, Vendite. ===== */
.cc-t-campioni{--c:#7c4dff}
html[data-tema="scuro"] .cc-t-campioni{--c:#a78bff}
.cc-gruppo{--cp:#7c4dff}
html[data-tema="scuro"] .cc-gruppo{--cp:#a78bff}
.as-tessere .cc-gruppo::before{background:linear-gradient(90deg,var(--c1) 0 25%,var(--cp) 25% 50%,var(--c2) 50% 75%,var(--c3) 75% 100%)}
.cc-tessere:not(.as-tessere) .cc-gruppo::before{background:linear-gradient(90deg,var(--cp) 0 33.3%,var(--c2) 33.3% 66.6%,var(--c3) 66.6% 100%)}
.as-tessere .cc-g-righe{gap:3px}
.as-tessere .cc-g-riga{padding:3px 8px}
.as-tessere .cc-g-ic{width:22px;height:22px}
.as-tessere .cc-gruppo .cc-g-riga .cc-num{font-size:16px}
@container az (max-width:940px){
  .as-tessere .cc-g-righe{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cc-tessere:not(.as-tessere) .cc-g-righe{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
@container az (max-width:620px){
  .as-tessere .cc-g-righe,.cc-tessere:not(.as-tessere) .cc-g-righe{grid-template-columns:minmax(0,1fr);gap:5px}
}
/* ===== 08/10/2026 notte: nella scheda dell'agente le Opportunita' (la scheda del periodo) tornano una tessera loro, fuori
   dal gruppo PRODUZIONE e con il colore delle opportunita'; il gruppo dell'agente ha le stesse tre righe del cliente
   (Campioni e tirelle, Ordini aperti, Vendite). Nove colonne sul computer; sull'iPad e sul telefono la Scheda su tutta la
   riga, poi tre per riga e il gruppo su tutta la riga. ===== */
.as-tessere{grid-template-columns:repeat(9,minmax(0,1fr))}
.cc-tessera.cc-t-periodo{--c:#3b7bff}
html[data-tema="scuro"] .cc-tessera.cc-t-periodo{--c:#8ab4ff}
.as-tessere .cc-gruppo::before{background:linear-gradient(90deg,var(--cp) 0 33.3%,var(--c2) 33.3% 66.6%,var(--c3) 66.6% 100%)}
.as-tessere .cc-g-righe{gap:4px}
.as-tessere .cc-g-riga{padding:5px 9px}
.as-tessere .cc-g-ic{width:24px;height:24px}
.as-tessere .cc-gruppo .cc-g-riga .cc-num{font-size:18px}
@container az (max-width:940px){
  .as-tessere{grid-template-columns:repeat(3,minmax(0,1fr))}
  .as-tessere .cc-t-scheda{grid-column:1 / -1}
  .as-tessere .cc-g-righe{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .as-tessere .cc-g-riga{padding:6px 9px}
}
@container az (max-width:620px){
  .as-tessere .cc-g-righe{grid-template-columns:minmax(0,1fr);gap:5px}
  .as-tessere .cc-g-riga{padding:8px 10px}
}
/* ===== 08/10/2026 notte: la tessera Storia nella scheda del cliente, in fondo dopo Documenti, color inchiostro.
   Nove colonne sul computer (come l'agente); sull'iPad e sul telefono tre per riga, il gruppo PRODUZIONE e la Storia su
   tutta la riga. ===== */
.cc-t-storia{--c:#3f51b5}
html[data-tema="scuro"] .cc-t-storia{--c:#9fa8ff}
.cc-tessere:not(.as-tessere){grid-template-columns:repeat(9,minmax(0,1fr))}
@container az (max-width:940px){
  .cc-tessere:not(.as-tessere){grid-template-columns:repeat(3,minmax(0,1fr))}
  .cc-tessere:not(.as-tessere) .cc-t-storia{grid-column:1 / -1}
}
/* ======================================================================================================================
   STORIA DEL CLIENTE - scheda "Storia" di Clienti/Azienda.aspx (proposta A "Spina centrale", scelta dall'utente l'08/10/2026)
   Tutte le attivita' sul cliente in una linea del tempo decrescente: vendite (DDT), ordini aperti, campioni e tirelle, chat
   con i colleghi, opportunita'. Una cucitura verticale al centro (la spina) con le schede alternate a sinistra e a destra;
   sulla spina un nodo per evento (il giorno, nel colore del tipo); i mesi sono targhe di vetro che restano in vista
   scorrendo (sticky), gli anni numeri giganti in filigrana; le schede importanti (sa-st-imp) sono piu' grandi, con nastro,
   numero grande rosso e nodo pieno con la stellina.
   - Markup: lo scrive il server (App_Code/StoriaCliente.vb); comportamento in js/storia.js (filtri, periodo, conteggi).
   - Tutto sta dentro .sa-st-storia, che e' anche il contenitore delle container query (container-name: storia): sotto
     780px di spazio vero (telefono, iPad in verticale, menu aperto) la spina va a sinistra e le schede tutte a destra.
     Ogni scheda e' a sua volta un piccolo contenitore (sa-st-scheda) per le righe a due colonne.
   - Il riquadro del portale (.riquadro) ha overflow:hidden, che blocca le targhe sticky: qui sotto diventa overflow:clip
     (taglia lo stesso gli angoli ma non crea un contenitore di scorrimento).
   - Colori dei tipi come le tessere della scheda cliente: vendite verde acqua, ordini ambra, campioni e tirelle viola, chat
     verde, opportunita' blu, blocco qualita' rosso. Icone d'azione: le icone quadrate del portale (.icona-riga).
   ====================================================================================================================== */

/* ---------- il riquadro che la contiene: senza questo le targhe dei mesi non restano in vista ---------- */
.riquadro.sa-st-riquadro,.riquadro:has(> .sa-st-storia){overflow:clip}

/* ---------- colori e misure ---------- */
.sa-st-storia{
  container-type:inline-size;container-name:storia;
  --sa-st-ven:#0b8f9c;--sa-st-ord:#c96a0b;--sa-st-cmp:#6d4fc4;--sa-st-chat:#1e9e57;--sa-st-opp:#3b7bff;--sa-st-bq:#da0219;
  --sa-st-ambra:#a66e14;
  --sa-st-carta:#fffdf8;
  --sa-st-carta-bordo:rgba(16,34,43,.15);
  --sa-st-ombra:0 1px 2px rgba(16,34,43,.06),0 14px 30px -20px rgba(16,34,43,.42);
  --sa-st-fondo:#f2ede2;
  --sa-st-fondo-solido:#f2ede2;
  --sa-st-spina:rgba(16,34,43,.22);
  --sa-st-anno:rgba(16,34,43,.20);
  --sa-st-vetro:rgba(255,253,248,.84);
  /* larghezza della colonna della spina e quanto la scheda dopo sale accanto a quella prima */
  --sa-st-col:96px;
  --sa-st-sovrap:72px;
  /* le targhe dei mesi si fermano sotto la testata fissa del portale */
  --sa-st-sticky:calc(var(--testata,64px) + 10px);
  position:relative;color:var(--testo);
}
html[data-tema="scuro"] .sa-st-storia{
  --sa-st-ven:#45d0d8;--sa-st-ord:#f0a04b;--sa-st-cmp:#b39cff;--sa-st-chat:#4fd08a;--sa-st-opp:#8ab4ff;--sa-st-bq:#ff4b5c;
  --sa-st-ambra:#f2c14e;
  --sa-st-carta:#17191e;
  --sa-st-carta-bordo:rgba(255,255,255,.10);
  --sa-st-ombra:inset 0 1px 0 rgba(255,255,255,.05),0 22px 40px -22px #000;
  --sa-st-fondo:rgba(4,5,7,.34);
  --sa-st-fondo-solido:#0d0e11;
  --sa-st-spina:rgba(255,255,255,.17);
  --sa-st-anno:rgba(255,255,255,.16);
  --sa-st-vetro:rgba(22,24,29,.80);
}
/* il colore del tipo (--c): sull'evento, sui quadrati del ritmo, sulle pillole, sui numeri */
.sa-st-t-ven{--c:var(--sa-st-ven)}
.sa-st-t-ord{--c:var(--sa-st-ord)}
.sa-st-t-cmp{--c:var(--sa-st-cmp)}
.sa-st-t-chat{--c:var(--sa-st-chat)}
.sa-st-t-opp{--c:var(--sa-st-opp)}
.sa-st-t-bq{--c:var(--sa-st-bq)}

/* icone a contorno (SVG in linea, viewBox 24): tratto e misura li decide il CSS, il server scrive solo il path */
.sa-st-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =========================== intestazione =========================== */
.sa-st-testa{position:relative;padding:28px 32px 24px;border-bottom:1px solid var(--bordo);overflow:hidden}
html[data-tema="scuro"] .sa-st-testa::before{content:"";position:absolute;inset:-40% 40% auto -10%;height:120%;background:radial-gradient(closest-side,rgba(218,2,25,.20),transparent);pointer-events:none}
.sa-st-capo{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.sa-st-capo > div:first-child{min-width:0}
.sa-st-occhiello{display:flex;align-items:center;gap:8px;margin:0;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
.sa-st-occhiello b{color:var(--accento-testo);font-weight:700}
.sa-st-occhiello .sa-st-i{color:var(--accento-testo)}
/* due classi: batte ".riquadro h2" del portale (14px con il filetto sotto) */
.sa-st-storia .sa-st-titolo{margin:8px 0 6px;padding:0;border:0;font-size:32px;font-weight:700;letter-spacing:-.015em;line-height:1.08;font-stretch:90%;overflow-wrap:anywhere}
.sa-st-riga{margin:0;color:var(--tenue);font-size:14px;line-height:1.45}
.sa-st-periodo{display:inline-flex;gap:2px;padding:4px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello2)}
.sa-st-periodo button{min-height:38px;padding:0 15px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--tenue);cursor:pointer;white-space:nowrap}
.sa-st-periodo button:hover{color:var(--testo)}
.sa-st-periodo button[aria-pressed="true"]{background:var(--accento);color:#fff;box-shadow:0 8px 16px -10px rgba(218,2,25,.9)}

.sa-st-sintesi{position:relative;display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:28px;align-items:stretch;margin-top:24px}
.sa-st-totale{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}
.sa-st-totale b{display:block;font-size:96px;line-height:.82;font-weight:700;color:var(--accento-testo);letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-stretch:78%}
.sa-st-totale span{display:block;margin-top:12px;font-size:16px;font-weight:600}
.sa-st-totale small{display:block;margin-top:5px;color:var(--tenue);font-size:12.5px;line-height:1.4}

/* il ritmo dei rapporti: una colonna per mese (il server), un quadrato per evento (il JS) */
.sa-st-ritmo{margin:0;padding:14px 18px 10px;border:1px solid var(--bordo);border-radius:14px;background:var(--sa-st-fondo)}
.sa-st-ritmo figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-bottom:12px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.sa-st-ritmo figcaption span:last-child{letter-spacing:.02em;text-transform:none;font-weight:600}
.sa-st-ritmo figcaption b{color:var(--accento-testo)}
.sa-st-ritmo figcaption i{font-style:normal}
.sa-st-rg{display:grid;grid-template-columns:repeat(var(--sa-st-mesi,13),minmax(0,1fr));gap:0 4px;align-items:end}
.sa-st-pila{display:flex;flex-direction:column-reverse;align-items:center;gap:4px;height:132px;padding-bottom:6px;border-bottom:1px solid var(--bordo-forte);transition:opacity .2s}
.sa-st-pila i{display:block;flex:none;width:min(16px,72%);aspect-ratio:1;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);transition:opacity .2s}
.sa-st-pila i.sa-st-q-imp{outline:2px solid var(--accento-testo);outline-offset:2px}
.sa-st-pila b{font-size:10.5px;font-weight:700;line-height:1;color:var(--tenue);font-variant-numeric:tabular-nums}
.sa-st-pila.sa-st-fuori{opacity:.22}
.sa-st-pila i.sa-st-spento{opacity:.16;outline-color:transparent}
.sa-st-rg > span{padding-top:6px;font-size:11px;font-weight:600;color:var(--tenue);text-align:center;text-transform:lowercase}
.sa-st-rg > span.sa-st-ora{color:var(--accento-testo);font-weight:700}
.sa-st-rg > em{grid-row:3;margin-top:4px;padding-top:4px;border-top:1px dashed var(--bordo-forte);font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--debole)}

/* i numeri per tipo */
.sa-st-numeri{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:22px 0 0;padding:0;list-style:none;border:1px solid var(--bordo);border-radius:14px;overflow:hidden;background:var(--bordo)}
.sa-st-numeri li{position:relative;min-width:0;padding:16px 16px 14px;background:var(--pannello)}
html[data-tema="scuro"] .sa-st-numeri li{background:#121418}
.sa-st-numeri li::before{content:"";position:absolute;left:16px;width:28px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--c)}
.sa-st-n-nome{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-st-n-nome .sa-st-i{color:var(--c)}
.sa-st-numeri b{display:block;margin-top:10px;font-size:28px;font-weight:700;line-height:1;color:var(--accento-testo);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.sa-st-numeri b small{font-size:14px;font-weight:600;margin-left:3px;letter-spacing:0}
.sa-st-numeri p{margin:7px 0 0;font-size:12px;color:var(--tenue);line-height:1.35}
.sa-st-numeri li.sa-st-zero b{color:var(--debole)}

/* filtri per tipo: pillole con il conteggio (piu' di una insieme), "Importanti" a parte */
.sa-st-filtri{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.sa-st-pill{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 6px 0 13px;border:1px solid var(--bordo);border-radius:999px;background:var(--pannello);font:inherit;font-size:13px;font-weight:600;color:var(--testo);cursor:pointer;transition:border-color .15s,background-color .15s}
html[data-tema="scuro"] .sa-st-pill{background:rgba(255,255,255,.04)}
.sa-st-pill:hover{border-color:var(--c,var(--accento))}
.sa-st-pill > i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.sa-st-pill[data-filtro="imp"]::before{content:"";width:14px;height:14px;background:currentColor;color:var(--accento-testo);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.2 1 6L12 17l-5.35 2.8 1-6L3.3 9.6l6-.9z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%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'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.2 1 6L12 17l-5.35 2.8 1-6L3.3 9.6l6-.9z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sa-st-pill em{display:grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--pannello2);font-style:normal;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
html[data-tema="scuro"] .sa-st-pill em{background:rgba(255,255,255,.08)}
.sa-st-pill[aria-pressed="true"]{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
.sa-st-pill[aria-pressed="true"] em{background:var(--accento);color:#fff}
.sa-st-pill:focus-visible,.sa-st-periodo button:focus-visible,.sa-st-carica:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.sa-st-sep{width:1px;height:24px;margin:0 4px;background:var(--bordo)}

/* =========================== la linea del tempo =========================== */
.sa-st-linea{position:relative;padding:30px 28px 44px;background-color:var(--sa-st-fondo);background-image:var(--trama)}
.sa-st-corpo{position:relative}
/* la spina: filo centrale rosso in alto (oggi) che sfuma nel colore del bordo, con due cuciture tratteggiate */
.sa-st-corpo::before,.sa-st-corpo::after{content:"";position:absolute;left:50%;top:0;bottom:0;pointer-events:none}
.sa-st-corpo::before{width:4px;margin-left:-2px;border-radius:4px;
  background:linear-gradient(180deg,var(--accento) 0,color-mix(in srgb,var(--accento) 45%,var(--sa-st-spina)) 260px,var(--sa-st-spina) 640px,var(--sa-st-spina) calc(100% - 40px),color-mix(in srgb,var(--sa-st-spina) 40%,transparent))}
.sa-st-corpo::after{width:18px;margin-left:-9px;opacity:.9;
  background:
    repeating-linear-gradient(180deg,var(--sa-st-spina) 0 6px,transparent 6px 12px) left top/1.5px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--sa-st-spina) 0 6px,transparent 6px 12px) right 0 top 6px/1.5px 100% no-repeat}

/* oggi: il capo della spina */
.sa-st-oggi{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:18px}
.sa-st-oggi::after{content:"";position:absolute;left:50%;bottom:0;width:4px;height:18px;margin-left:-2px;background:var(--accento)}
.sa-st-oggi-testo{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid rgba(218,2,25,.45);border-radius:999px;background:var(--accento-velo);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accento-testo);white-space:nowrap}
.sa-st-oggi-testo span{font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--testo)}
.sa-st-oggi-nodo{position:relative;width:22px;height:22px;border-radius:7px;background:var(--accento);box-shadow:0 0 0 5px var(--sa-st-fondo-solido),0 0 0 9px rgba(218,2,25,.28),0 0 26px 6px rgba(218,2,25,.45)}
.sa-st-oggi-nodo::after{content:"";position:absolute;inset:-10px;border-radius:12px;border:2px solid rgba(218,2,25,.55);animation:sa-st-pulsa 2.2s ease-out infinite}
@keyframes sa-st-pulsa{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.sa-st-oggi-nodo::after{animation:none;opacity:.5}}

/* gli anni: numeri giganti in filigrana attraversati dalla spina */
.sa-st-anno{position:relative;display:flex;justify-content:center;margin:4px 0 -18px;pointer-events:none;user-select:none}
.sa-st-anno span{font-size:168px;font-weight:700;line-height:.86;letter-spacing:-.01em;font-stretch:75%;font-variant-numeric:tabular-nums;
  color:transparent;-webkit-text-stroke:1.5px var(--sa-st-anno);
  background:linear-gradient(180deg,rgba(218,2,25,.16),rgba(218,2,25,0) 75%);-webkit-background-clip:text;background-clip:text}

/* i mesi: targa di vetro che resta in vista mentre si scorre il mese */
.sa-st-mese-blocco{position:relative}
.sa-st-mese{position:sticky;top:var(--sa-st-sticky);z-index:6;display:flex;justify-content:center;margin:26px 0 20px;pointer-events:none}
.sa-st-targa{pointer-events:auto;display:grid;justify-items:center;gap:4px;min-width:230px;padding:11px 24px 10px;border:1px solid var(--bordo-forte);border-radius:14px;background:var(--sa-st-vetro);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:var(--sa-st-ombra)}
.sa-st-targa h3{display:flex;align-items:baseline;gap:9px;margin:0;font-size:28px;font-weight:700;line-height:1;letter-spacing:.01em;text-transform:uppercase;font-stretch:76%}
.sa-st-targa h3 span{color:var(--accento-testo)}
.sa-st-targa p{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--tenue);white-space:nowrap}
.sa-st-targa p b{color:var(--accento-testo)}
.sa-st-mix{display:flex;gap:2px;width:100%;height:4px;margin-top:4px;border-radius:2px;overflow:hidden}
.sa-st-mix i{flex:var(--n,1) 1 0;background:var(--c)}

/* gli eventi: righe a tre colonne (scheda | spina | scheda). Senza classe la scheda sta a destra, con .sa-st-sx a sinistra;
   la scheda dopo sale accanto a quella prima (sono sempre su lati diversi: il JS rimette i lati dopo ogni filtro).
   .sa-st-primo (il JS) = primo evento visibile del mese: non sale sotto la targa */
.sa-st-eventi{margin:0;padding:0;list-style:none}
.sa-st-ev{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--sa-st-col) minmax(0,1fr);align-items:start;margin-bottom:22px;pointer-events:none}
.sa-st-ev + .sa-st-ev{margin-top:calc(var(--sa-st-sovrap) * -1)}
.sa-st-ev.sa-st-primo{margin-top:0}
.sa-st-ev > *{pointer-events:auto}

/* il nodo: il giorno sulla spina, nel colore del tipo */
.sa-st-nodo{--sa-st-nw:52px;position:relative;z-index:2;grid-column:2;grid-row:1;justify-self:center;display:grid;place-items:center;align-content:center;gap:1px;width:var(--sa-st-nw);height:var(--sa-st-nw);margin-top:12px;border:1.5px solid var(--c);border-radius:12px;background:color-mix(in srgb,var(--c) 16%,var(--sa-st-carta));color:var(--c);box-shadow:0 0 0 5px var(--sa-st-fondo-solido)}
.sa-st-nodo b{font-size:20px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sa-st-nodo small{font-size:9.5px;font-weight:700;line-height:1;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
/* il tratto fra il nodo e la scheda */
.sa-st-nodo::before{content:"";position:absolute;top:50%;left:calc(100% + 1.5px);width:calc((var(--sa-st-col) - var(--sa-st-nw)) / 2 + 2px);height:2px;margin-top:-1px;background:var(--c);opacity:.6}
.sa-st-sx > .sa-st-nodo::before{left:auto;right:calc(100% + 1.5px)}
/* importante: nodo pieno con l'alone e la stellina (disegnata qui, il server mette solo la classe sa-st-imp sull'evento) */
.sa-st-imp > .sa-st-nodo{--sa-st-nw:64px;margin-top:10px;border-radius:15px;border-color:transparent;background:var(--c);color:#fff;
  box-shadow:0 0 0 5px var(--sa-st-fondo-solido),0 0 0 10px color-mix(in srgb,var(--c) 26%,transparent),0 14px 34px -8px color-mix(in srgb,var(--c) 70%,transparent)}
html[data-tema="scuro"] .sa-st-imp > .sa-st-nodo{color:#0b0c0f}
.sa-st-imp > .sa-st-nodo b{font-size:25px}
.sa-st-imp > .sa-st-nodo::before{opacity:.9}
.sa-st-imp > .sa-st-nodo::after{content:"";position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:6px;box-shadow:0 0 0 3px var(--sa-st-fondo-solido);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.2 1 6L12 17l-5.35 2.8 1-6L3.3 9.6l6-.9z' fill='%23fff'/%3E%3C/svg%3E") center/12px no-repeat,var(--accento)}
.sa-st-imp.sa-st-t-bq > .sa-st-nodo::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.2 1 6L12 17l-5.35 2.8 1-6L3.3 9.6l6-.9z' fill='%23da0219'/%3E%3C/svg%3E") center/12px no-repeat,#fff}

/* la scheda (a destra se l'evento non ha .sa-st-sx) */
.sa-st-card{container:sa-st-scheda / inline-size;position:relative;grid-column:3;grid-row:1;justify-self:start;width:100%;max-width:450px;min-width:0;min-height:calc(var(--sa-st-sovrap) + 80px);padding:14px 16px 15px 19px;border:1px solid var(--sa-st-carta-bordo);border-radius:14px;background-color:var(--sa-st-carta);box-shadow:inset 3px 0 0 var(--c),var(--sa-st-ombra);transition:transform .18s,border-color .18s}
html[data-tema="scuro"] .sa-st-card{background-image:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 110px)}
.sa-st-sx > .sa-st-card{grid-column:1;justify-self:end;padding:14px 19px 15px 16px;box-shadow:inset -3px 0 0 var(--c),var(--sa-st-ombra)}
.sa-st-card:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.sa-st-card:hover{transform:none}}

.sa-st-ct{display:flex;align-items:center;gap:9px;min-height:32px}
.sa-st-tipo{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-st-ico{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:7px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.sa-st-ico .sa-st-i{width:15px;height:15px}
.sa-st-quando{margin-left:auto;font-size:12px;color:var(--tenue);white-space:nowrap}
.sa-st-ct .icona-riga{flex:none}
.sa-st-h{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin-top:9px}
.sa-st-card h4{margin:9px 0 0;font-size:16.5px;font-weight:700;line-height:1.25;letter-spacing:-.005em;min-width:0;overflow-wrap:anywhere}
.sa-st-h h4{margin:0;flex:1 1 auto}
.sa-st-card code{display:inline-block;padding:3px 6px;border-radius:5px;background:var(--pannello2);font:600 11px/1 var(--carattere);letter-spacing:.05em;color:var(--tenue);vertical-align:3px}
html[data-tema="scuro"] .sa-st-card code{background:rgba(255,255,255,.08)}
.sa-st-sotto{margin:5px 0 0;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.sa-st-tot{display:inline-flex;align-items:baseline;gap:4px;margin-left:auto;white-space:nowrap;font-size:12px;color:var(--tenue)}
.sa-st-tot b{font-size:22px;font-weight:700;line-height:1;color:var(--accento-testo);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sa-st-tot b small{font-size:13px;font-weight:600;margin-left:2px}
.sa-st-nw{white-space:nowrap}

/* righe d'ordine e articoli del DDT */
.sa-st-righe{display:grid;margin:10px 0 0;padding:0;list-style:none}
.sa-st-righe li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:3px 10px;padding:8px 0;border-top:1px dashed var(--bordo)}
.sa-st-righe li:first-child{border-top:0;padding-top:4px}
.sa-st-art{min-width:0}
.sa-st-art b{display:block;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-st-art small{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--tenue)}
.sa-st-m{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.sa-st-m small{margin-left:2px;font-size:11px;font-weight:600;color:var(--tenue)}
/* avanzamento della riga d'ordine: consegnati su richiesti (--p in percentuale) */
.sa-st-avanz{grid-column:2 / -1;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tenue);white-space:nowrap}
.sa-st-avanz > i{position:relative;flex:1 1 auto;height:4px;border-radius:2px;background:color-mix(in srgb,var(--c) 22%,transparent);overflow:hidden}
.sa-st-avanz > i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:2px;background:var(--sa-st-ven)}
.sa-st-altre{padding:7px 0 0;border-top:1px dashed var(--bordo);font-size:12px;font-weight:600;color:var(--tenue)}
/* articoli su due colonne (vendita importante): una colonna quando la scheda e' stretta */
.sa-st-righe-2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.sa-st-righe-2 li{gap:3px 8px}
.sa-st-righe-2 li:nth-child(2){border-top:0;padding-top:4px}
.sa-st-righe-2 .sa-st-art b{white-space:normal}

/* quadratino del colore del tessuto (--sw); senza --sw resta un grigio neutro tratteggiato */
.sa-st-sw{display:block;width:16px;height:16px;border-radius:5px;background-color:var(--sw,#a7adb2);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.20)}
html[data-tema="scuro"] .sa-st-sw{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}

/* stati, priorita', etichette */
.sa-st-stato{--s:var(--ic-grigio);display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border:1px solid color-mix(in srgb,var(--s) 42%,transparent);border-radius:999px;background:color-mix(in srgb,var(--s) 11%,transparent);font-style:normal;font-size:10.5px;font-weight:700;line-height:1.55;letter-spacing:.03em;color:var(--s);white-space:nowrap}
.sa-st-stato::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.sa-st-s-tint{--s:var(--sa-st-ambra)}
.sa-st-s-verde{--s:var(--ic-verde)}
.sa-st-s-sped{--s:var(--ic-teal)}
.sa-st-s-rosso{--s:var(--accento-testo)}
/* priorita': URGENTE (1) rosso pieno con il fulmine (lo disegna il CSS); data di consegna non vincolante (3) grigia tratteggiata */
.sa-st-urg{display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 5px;border-radius:5px;background:var(--accento);font-style:normal;font-size:10px;font-weight:700;line-height:1.6;letter-spacing:.08em;color:#fff;white-space:nowrap}
.sa-st-urg::before{content:"";width:10px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2 4.5 13.5h6.5L10 22l9-11.5h-6.5z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
.sa-st-libera{display:inline-flex;align-items:center;padding:0 6px;border:1px dashed currentColor;border-radius:5px;font-style:normal;font-size:10px;font-weight:600;line-height:1.5;color:var(--tenue);white-space:nowrap}
.sa-st-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.sa-st-etichette{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
/* categoria dell'opportunita': il colore arriva dalle classi .c-* del portale (DealCategorie.Colori) */
.sa-st-cat{--k:var(--tc,var(--ic-blu));display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 9px;border:1px solid color-mix(in srgb,var(--k) 40%,transparent);border-radius:999px;background:color-mix(in srgb,var(--k) 10%,transparent);font-size:11px;font-weight:600;line-height:1.5;color:var(--k);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-st-cat::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:currentColor}
.sa-st-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sa-st-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 9px 3px 4px;border:1px solid var(--bordo);border-radius:7px;background:var(--pannello2);font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-tema="scuro"] .sa-st-chip{background:rgba(255,255,255,.05)}
.sa-st-chip .sa-st-sw{flex:none;width:14px;height:14px;border-radius:4px}

/* piede della scheda: testo (sa-st-piede) o elementi in fila (sa-st-piede sa-st-fila) */
.sa-st-piede{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--bordo);font-size:12px;line-height:1.4;color:var(--tenue)}
.sa-st-piede b{color:var(--testo);font-weight:600}
.sa-st-piede.sa-st-fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.sa-st-legame{display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:nowrap}
.sa-st-legame .sa-st-i{width:13px;height:13px}

/* persone: avatar quadrati con le iniziali, 8 colori fissi (sa-st-av1 ... sa-st-av8, dall'id dell'utente) */
.sa-st-av{--av:#4b5563;display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--av);font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff}
.sa-st-av1{--av:#9c2a3a}.sa-st-av2{--av:#2f6f8f}.sa-st-av3{--av:#8a6a3a}.sa-st-av4{--av:#2e7d5b}
.sa-st-av5{--av:#4b5563}.sa-st-av6{--av:#6d4fc4}.sa-st-av7{--av:#b4531f}.sa-st-av8{--av:#1f6f78}
.sa-st-msg{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;margin-top:10px}
.sa-st-bolla{margin:0;padding:9px 12px 10px;border:1px solid color-mix(in srgb,var(--c) 26%,transparent);border-radius:4px 12px 12px 12px;background:color-mix(in srgb,var(--c) 9%,var(--sa-st-carta));font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.sa-st-bolla > b{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;color:var(--tenue)}
.sa-st-bolla > b strong{color:var(--testo);font-weight:700}
.sa-st-conto{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.sa-st-conto b{font-size:18px;font-weight:700;line-height:1;color:var(--accento-testo)}
.sa-st-persone{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px}
.sa-st-persona{display:flex;align-items:center;gap:9px;min-width:0;font-size:12.5px}
.sa-st-persona > span:last-child{min-width:0}
.sa-st-persona b{display:block;font-weight:600;color:var(--testo)}
.sa-st-persona small{display:block;font-size:11.5px;color:var(--tenue)}

/* campioni e tirelle: ritagli di tessuto con il bordo a zig-zag delle forbici dentellate, esito approvata/bocciata nell'angolo */
.sa-st-pezzi{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:12px}
.sa-st-pezzo{flex:none;display:grid;justify-items:center;gap:6px;min-width:64px;margin:0;text-align:center}
.sa-st-ritaglio{position:relative;display:block;width:56px;height:60px}
.sa-st-ritaglio::before{content:"";position:absolute;inset:0;border-radius:6px 6px 0 0;background-color:var(--sw,#a7adb2);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.17) 0 1px,transparent 1px 3px),linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.10));
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 8px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 8px 100%;
  filter:drop-shadow(0 0 1px rgba(16,34,43,.6)) drop-shadow(0 5px 6px rgba(16,34,43,.20))}
html[data-tema="scuro"] .sa-st-ritaglio::before{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 6px 8px rgba(0,0,0,.55))}
.sa-st-pezzo figcaption{font-size:11px;line-height:1.35;color:var(--tenue);white-space:nowrap}
.sa-st-pezzo figcaption b{display:block;max-width:110px;font-size:11.5px;color:var(--testo);overflow:hidden;text-overflow:ellipsis}
.sa-st-pezzo figcaption span{display:block}
.sa-st-esito{position:absolute;top:-7px;right:-7px;z-index:1;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;color:#fff;box-shadow:0 0 0 2px var(--sa-st-carta)}
.sa-st-esito::before{content:"";width:12px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sa-st-esito.no::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.sa-st-esito.si{background:var(--ic-verde)}
.sa-st-esito.no{background:var(--ic-rosso)}
html[data-tema="scuro"] .sa-st-esito{color:#04141c}

/* DDT: la barra dei colori spediti, ogni pezzo largo quanto i suoi metri (--m) */
.sa-st-tela{display:flex;gap:2px;height:10px;margin:12px 0 2px;border-radius:4px;overflow:hidden}
.sa-st-tela i{flex:var(--m,1) 1 0;background-color:var(--sw,#a7adb2);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
html[data-tema="scuro"] .sa-st-tela i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

/* ---------- schede importanti (sa-st-imp sull'evento) ---------- */
.sa-st-imp > .sa-st-card{max-width:none;padding:18px 20px 18px 23px;border-color:color-mix(in srgb,var(--c) 42%,var(--sa-st-carta-bordo));background-image:linear-gradient(180deg,color-mix(in srgb,var(--c) 15%,transparent),transparent 170px);
  box-shadow:inset 4px 0 0 var(--c),0 0 0 1px color-mix(in srgb,var(--c) 12%,transparent),var(--sa-st-ombra),0 26px 60px -34px color-mix(in srgb,var(--c) 75%,transparent)}
.sa-st-imp.sa-st-sx > .sa-st-card{padding:18px 23px 18px 20px;box-shadow:inset -4px 0 0 var(--c),0 0 0 1px color-mix(in srgb,var(--c) 12%,transparent),var(--sa-st-ombra),0 26px 60px -34px color-mix(in srgb,var(--c) 75%,transparent)}
.sa-st-imp .sa-st-card h4{margin-top:12px;font-size:23px;letter-spacing:-.015em}
.sa-st-nastro{display:inline-flex;align-items:center;gap:7px;min-width:0;padding:5px 11px 5px 8px;border-radius:7px;background:color-mix(in srgb,var(--c) 88%,#000);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-tema="scuro"] .sa-st-nastro{background:var(--c);color:#0b0c0f}
.sa-st-nastro .sa-st-i{width:14px;height:14px}
.sa-st-grande{display:flex;align-items:flex-end;gap:6px 14px;flex-wrap:wrap;margin-top:12px}
.sa-st-grande > b{font-size:48px;line-height:.9;font-weight:700;color:var(--accento-testo);letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-stretch:84%;white-space:nowrap}
.sa-st-grande > b small{font-size:22px;font-weight:600;margin-left:3px;letter-spacing:0}
.sa-st-grande > span{padding-bottom:3px;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.sa-st-grande > span strong{color:var(--testo);font-weight:600}
.sa-st-imp .sa-st-tela{height:18px;margin-top:14px;border-radius:6px}
.sa-st-nota{margin:14px 0 0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--c) 35%,transparent);border-left:3px solid var(--c);border-radius:10px;background:color-mix(in srgb,var(--c) 7%,transparent)}
.sa-st-nota p{margin:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.sa-st-nota cite{display:flex;align-items:center;gap:8px;margin-top:9px;font-style:normal;font-size:12px;color:var(--tenue)}
.sa-st-nota cite .sa-st-av{width:24px;height:24px;font-size:9.5px;border-radius:7px}

/* nessun evento con i filtri accesi */
.sa-st-vuoto{position:relative;z-index:1;max-width:440px;margin:26px auto;padding:16px 18px;border:1px dashed var(--bordo-forte);border-radius:14px;background:var(--sa-st-carta);font-size:13px;line-height:1.45;text-align:center;color:var(--tenue)}

/* =========================== fondo: inizio del periodo e "cliente dal" =========================== */
.sa-st-fine{position:relative;display:grid;justify-items:center;gap:16px;padding-top:30px;text-align:center}
.sa-st-fine::before{content:"";position:absolute;left:50%;top:0;bottom:46px;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,var(--sa-st-spina) 0 4px,transparent 4px 11px)}
.sa-st-fine > *{position:relative}
.sa-st-fine-testo{padding:4px 12px;border-radius:999px;background:var(--sa-st-fondo-solido);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--debole)}
.sa-st-carica{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 7px;border:1px solid color-mix(in srgb,var(--ic-blu) 40%,var(--bordo));border-radius:12px;background:var(--sa-st-carta);box-shadow:var(--sa-st-ombra);font:inherit;font-size:13.5px;font-weight:600;color:var(--testo);text-align:left;cursor:pointer}
.sa-st-carica .icona-riga{pointer-events:none}
.sa-st-carica small{font-size:12px;font-weight:500;color:var(--tenue)}
.sa-st-salto{padding:2px 10px;background:var(--sa-st-fondo-solido);font-size:11.5px;font-style:italic;color:var(--debole)}
.sa-st-origine{display:flex;align-items:center;gap:14px;max-width:440px;padding:12px 18px 12px 12px;border:1px solid var(--sa-st-carta-bordo);border-radius:14px;background:var(--sa-st-carta);box-shadow:var(--sa-st-ombra);text-align:left}
.sa-st-origine .sa-st-nodo{--sa-st-nw:54px;grid-column:auto;margin:0;flex:none;border-radius:13px;background:var(--c);border-color:transparent;color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
html[data-tema="scuro"] .sa-st-origine .sa-st-nodo{color:#0b0c0f}
.sa-st-origine .sa-st-nodo::before{display:none}
.sa-st-origine .sa-st-nodo b{font-size:16px}
.sa-st-origine p{margin:0;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.sa-st-origine p strong{display:block;margin-bottom:2px;font-size:14px;color:var(--testo)}

/* =========================== spazio medio (iPad, finestre strette) =========================== */
@container storia (max-width:1080px){
  .sa-st-sep{display:none}
  .sa-st-numeri b{font-size:24px}
  .sa-st-totale b{font-size:84px}
  .sa-st-ct .icona-riga{width:38px;height:38px}
  .sa-st-ct .icona-riga svg{width:19px;height:19px}
}
@container sa-st-scheda (max-width:420px){
  .sa-st-righe-2{grid-template-columns:minmax(0,1fr)}
  .sa-st-righe-2 li:nth-child(2){border-top:1px dashed var(--bordo);padding-top:8px}
}
@container sa-st-scheda (max-width:340px){
  .sa-st-grande > b{font-size:40px}
  .sa-st-quando{display:none}
}

/* =========================== spazio stretto: spina a sinistra, schede tutte a destra =========================== */
@container storia (max-width:780px){
  .sa-st-testa{padding:20px 16px 18px}
  .sa-st-capo{display:grid;gap:16px}
  .sa-st-storia .sa-st-titolo{font-size:25px}
  .sa-st-riga{font-size:13px}
  .sa-st-periodo{display:flex;width:100%}
  .sa-st-periodo button{flex:1 1 0;padding:0 6px}
  .sa-st-sintesi{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:18px}
  .sa-st-totale{flex-direction:row;align-items:flex-end;justify-content:flex-start;flex-wrap:wrap;gap:4px 14px}
  .sa-st-totale b{font-size:72px}
  .sa-st-totale span{margin:0 0 6px}
  .sa-st-totale small{flex-basis:100%;margin:0}
  .sa-st-ritmo{padding:12px 12px 8px}
  .sa-st-rg{gap:0 2px}
  .sa-st-pila{height:116px;gap:3px}
  .sa-st-pila i{width:min(14px,80%);border-radius:3px}
  .sa-st-pila i.sa-st-q-imp{outline-offset:1px;outline-width:1.5px}
  .sa-st-rg > span{font-size:10px}
  .sa-st-numeri{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sa-st-numeri li:last-child{grid-column:1 / -1}
  .sa-st-numeri li{padding:14px 14px 12px}
  .sa-st-numeri b{font-size:24px}
  .sa-st-filtri{gap:7px}
  .sa-st-pill{padding-left:11px;font-size:12.5px}
  .sa-st-largo{display:none}

  .sa-st-linea{padding:22px 12px 34px 8px}
  .sa-st-corpo::before,.sa-st-corpo::after{left:26px}
  .sa-st-oggi{flex-direction:row;align-items:center;gap:14px;padding:0 0 18px 15px}
  .sa-st-oggi::after{left:26px}
  .sa-st-oggi-nodo{order:-1}
  .sa-st-oggi-testo{padding:5px 11px;font-size:11px;white-space:normal}
  .sa-st-anno{justify-content:flex-start;margin:6px 0 -10px 40px}
  .sa-st-anno span{font-size:104px}
  .sa-st-mese{justify-content:flex-start;margin:22px 0 16px}
  .sa-st-targa{justify-items:start;min-width:0;max-width:calc(100% - 4px);padding:9px 15px 8px}
  .sa-st-targa h3{font-size:24px}
  .sa-st-ev{grid-template-columns:52px minmax(0,1fr);margin-bottom:14px}
  .sa-st-ev + .sa-st-ev{margin-top:0}
  .sa-st-nodo{grid-column:1;--sa-st-nw:42px;margin-top:10px;border-radius:10px}
  .sa-st-nodo b{font-size:16px}
  .sa-st-nodo small{font-size:8.5px}
  .sa-st-imp > .sa-st-nodo{--sa-st-nw:46px;margin-top:10px;border-radius:12px;box-shadow:0 0 0 4px var(--sa-st-fondo-solido),0 0 0 8px color-mix(in srgb,var(--c) 26%,transparent),0 10px 24px -8px color-mix(in srgb,var(--c) 70%,transparent)}
  .sa-st-imp > .sa-st-nodo b{font-size:18px}
  .sa-st-nodo::before,.sa-st-sx > .sa-st-nodo::before{left:calc(100% + 1.5px);right:auto;width:calc((52px - var(--sa-st-nw)) / 2 + 8px)}
  .sa-st-card,.sa-st-sx > .sa-st-card{grid-column:2;justify-self:stretch;max-width:none;min-height:0;margin-left:6px;padding:13px 13px 14px 16px;box-shadow:inset 3px 0 0 var(--c),var(--sa-st-ombra)}
  .sa-st-imp > .sa-st-card,.sa-st-imp.sa-st-sx > .sa-st-card{padding:16px 14px 16px 18px;box-shadow:inset 4px 0 0 var(--c),0 0 0 1px color-mix(in srgb,var(--c) 12%,transparent),var(--sa-st-ombra)}
  .sa-st-card h4{font-size:15.5px}
  .sa-st-imp .sa-st-card h4{font-size:20px}
  .sa-st-grande > b{font-size:42px}
  .sa-st-pezzi{gap:10px 8px}
  .sa-st-vuoto{margin:18px 0 18px 58px}
  .sa-st-fine::before{left:26px}
  .sa-st-fine{justify-items:start;padding-left:58px}
  .sa-st-fine-testo{margin-left:-8px}
  .sa-st-carica{max-width:100%}
  .sa-st-salto{margin-left:-6px}
  .sa-st-origine{max-width:100%;padding:10px 14px 10px 10px}
  .sa-st-origine .sa-st-nodo{--sa-st-nw:36px;border-radius:10px;margin-left:0}
  .sa-st-origine .sa-st-nodo b{font-size:12px}
  .sa-st-origine .sa-st-nodo small{display:none}
}
@container storia (max-width:420px){
  .sa-st-pill em{min-width:24px;height:24px;padding:0 7px}
  .sa-st-quando{font-size:11px}
}
/* ===== 08/10/2026 notte: ritocchi della Storia: i quadratini del colore del tessuto diventano pallini (un quadratino bianco
   sembrava una casella da spuntare) e i nomi delle tessere del cliente, ora su nove colonne, un po' piu' stretti. ===== */
.sa-st-sw,.sa-st-chip .sa-st-sw{border-radius:50%}
.cc-tessere:not(.as-tessere) .cc-tessera .cc-nome{letter-spacing:.03em;gap:5px}
/* ===== 08/10/2026 notte: Storia sul telefono: i nomi dei numeri per tipo ("Campioni e tirelle") vanno a capo invece di
   tagliarsi. ===== */
@container storia (max-width:520px){
  .sa-st-n-nome{white-space:normal;overflow:visible;letter-spacing:.06em;line-height:1.25}
}

/* ===== CAMPIONI E TIRELLE A GRIGLIA (09/10/2026, variante A scelta dall'utente fra tre anteprime) =====
   Il riquadro della scheda del cliente e dell'agente come gli Ordini aperti: stessa barra (Filtri, riepilogo, Excel),
   stesso pannello Filtri a riquadri, stesse pillole e numeri (classi oa-*, contenitore "oa" sul riquadro); qui la
   griglia (.cg-t), i colori di tipo, invio ed esito e la disposizione del pannello. Un articolo per riga; i valori
   (tipo, codice, colore, esito, numero della richiesta, cliente) filtrano toccandoli (.cg-v); ordinate per richiesta,
   le righe della stessa richiesta dopo la prima hanno giorno e numero tenui (.cg-ripeti). Sotto i 1180px di riquadro
   la nota va sotto l'articolo, sotto i 980px anche partita e lab dip (nell'agente, con la colonna Cliente, 1320 e
   1120); sotto i 760px le righe sono schede, niente scorrimento di lato. */
.cg{--cg-ambra:#8a5d00;--cg-verde:#1e7e45;--cg-rosso:#c4001a;--cg-ambra-velo:rgba(242,193,78,.2)}
html[data-tema="scuro"] .cg{--cg-ambra:#f2c14e;--cg-verde:#4fd08a;--cg-rosso:#ff5c6b}
.cg .conto-elenco .conto-num.cg-ambra{color:var(--cg-ambra)}
.cg-kpi{grid-template-columns:repeat(5,minmax(0,1fr))}
/* i pallini delle pillole e dei filtri accesi: tipo, esito, invio */
.cg-pt-tirelle{--sc:#7c4dff}.cg-pt-campioni{--sc:#3b7bff}.cg-pt-labdip{--sc:#c2185b}.cg-pt-altro{--sc:#8a979e}
html[data-tema="scuro"] .cg-pt-tirelle{--sc:#b39dff}html[data-tema="scuro"] .cg-pt-campioni{--sc:#8ab4ff}html[data-tema="scuro"] .cg-pt-labdip{--sc:#f06292}
.cg-pe-si{--sc:var(--cg-verde)}.cg-pe-no{--sc:var(--cg-rosso)}.cg-pe-via,.cg-pe-altro{--sc:#8a979e}.cg-pe-nessuno{--sc:transparent}
.oa-pil.cg-pe-nessuno i,.oa-scelto-pal.cg-pe-nessuno{box-sizing:border-box;border:1px dashed var(--tenue)}
.cg-pv-si{--sc:var(--cg-verde)}.cg-pv-no{--sc:var(--cg-ambra)}
.cg .oa-pil.cg-pv-no.attiva{border-color:var(--cg-ambra);background:color-mix(in srgb,var(--cg-ambra) 14%,var(--pannello2))}
/* il pannello Filtri: cerca, (cliente,) ordina per, invio, esito, tipo */
.cg-fgriglia{grid-template-areas:"cerca cerca ordina invio" "esito tipo tipo tipo"}
.cg-fgriglia.cg-fg-agente{grid-template-areas:"cerca cerca cli cli" "ordina invio esito esito" "tipo tipo tipo tipo"}
.cg-f-cerca{grid-area:cerca}.cg-f-cli{grid-area:cli}.cg-f-ordina{grid-area:ordina}.cg-f-invio{grid-area:invio}.cg-f-esito{grid-area:esito}.cg-f-tipo{grid-area:tipo}
.cg-fgriglia:not(.cg-fg-agente) .cg-f-esito .oa-fpillole,.cg-f-invio .oa-fpillole{grid-template-columns:minmax(0,1fr)}
/* la griglia */
.cg-griglia{border:1px solid var(--bordo-forte);border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--pannello2) 55%,transparent)}
.cg-griglia[hidden]{display:none}
.cg-t{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;font-variant-numeric:tabular-nums}
.cg-t th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue);background:var(--pannello2);border-bottom:1px solid var(--bordo-forte);padding:0;white-space:nowrap}
.cg-t th.cg-num{text-align:right}
.cg-ordina{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;width:100%;padding:11px 10px;cursor:pointer}
.cg-t th.cg-num .cg-ordina{justify-content:flex-end}
.cg-ordina:hover{color:var(--testo)}
.cg-ordina:focus-visible{outline:2px solid var(--accento);outline-offset:-2px}
.cg-freccia{flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid currentColor;opacity:.3}
.cg-ordina.su .cg-freccia,.cg-ordina.giu .cg-freccia{opacity:1;color:var(--accento-testo)}
.cg-ordina.giu .cg-freccia{border-bottom:0;border-top:5px solid currentColor}
.cg-t td{padding:9px 10px;border-bottom:1px solid var(--bordo);vertical-align:middle}
.cg-t tr.cg-r[hidden]{display:none}
.cg-t tbody tr:last-child td{border-bottom:0}
.cg-t tbody tr:hover td{background:color-mix(in srgb,var(--testo) 4%,transparent)}
.cg-t tr.cg-nuova td{border-top:1px solid var(--bordo-forte)}
.cg-v{all:unset;cursor:pointer;border-radius:6px;max-width:100%}
.cg-v:hover{text-decoration:underline dotted;text-underline-offset:3px}
.cg-v:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
.cg-v.scelto{color:var(--accento-testo);text-decoration:underline;text-underline-offset:3px}
.cg-v.scelto .cg-tipo,.cg-v.scelto .cg-es{text-decoration:none}
.cg-num{text-align:right}
.cg-mono,.cg-cod{font-family:ui-monospace,Consolas,monospace;font-size:.93em}
.cg-d-rich,.cg-d-tipo,.cg-d-qta,.cg-d-inv,.cg-d-par,.cg-d-es{width:1%;white-space:nowrap}
.cg-d-rich b{display:block;font-weight:700}
.cg-d-rich small,.cg-d-es small,.cg-d-par small{display:block;margin-top:1px;font-size:11.5px;color:var(--tenue)}
.cg-ripeti .cg-d-rich b,.cg-ripeti .cg-d-rich small{opacity:.38}
.cg-d-cli{min-width:150px;max-width:240px;font-weight:600}
.cg-tipo{display:inline-block;padding:3px 10px;border:1px solid;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;--t:#6b7a82;color:var(--t);border-color:color-mix(in srgb,var(--t) 45%,transparent);background:color-mix(in srgb,var(--t) 12%,transparent)}
.cg-tipo.t-tirelle{--t:#7c4dff}.cg-tipo.t-campioni{--t:#3b7bff}.cg-tipo.t-labdip{--t:#c2185b}
html[data-tema="scuro"] .cg-tipo.t-tirelle{--t:#b39dff}html[data-tema="scuro"] .cg-tipo.t-campioni{--t:#8ab4ff}html[data-tema="scuro"] .cg-tipo.t-labdip{--t:#f06292}html[data-tema="scuro"] .cg-tipo.t-altro{--t:#a9b4ba}
.cg-d-art{min-width:200px}
.cg-cod{margin-right:8px;font-weight:700;color:var(--tenue)}
.cg-nome{font-weight:600;overflow-wrap:break-word}
.cg-sotto{display:none;margin-top:2px;font-size:11.5px;color:var(--tenue)}
.cg-sotto-nt{font-style:italic}
.cg-d-col{min-width:110px;overflow-wrap:break-word}
.cg-d-qta small{color:var(--tenue)}
.cg-inv{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.cg-inv i{width:8px;height:8px;border-radius:50%;background:var(--cg-verde)}
.cg-inv.no{color:var(--cg-ambra);font-weight:700}
.cg-inv.no i{background:var(--cg-ambra);box-shadow:0 0 0 3px var(--cg-ambra-velo)}
.cg-es{display:inline-block;padding:3px 10px;border:1px solid var(--bordo);border-radius:999px;font-size:12px;font-weight:700;color:var(--tenue)}
.cg-es.e-si{color:var(--cg-verde);border-color:color-mix(in srgb,var(--cg-verde) 45%,transparent);background:color-mix(in srgb,var(--cg-verde) 12%,transparent)}
.cg-es.e-no{color:var(--cg-rosso);border-color:color-mix(in srgb,var(--cg-rosso) 45%,transparent);background:color-mix(in srgb,var(--cg-rosso) 10%,transparent)}
.cg-es.e-via{text-decoration:line-through}
.cg-d-nt{max-width:260px;font-size:12.5px;color:var(--tenue)}
.cg-d-nt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
@container oa (max-width:1100px){
  .cg-fgriglia{grid-template-areas:"cerca ordina" "invio esito" "tipo tipo"}
  .cg-fgriglia.cg-fg-agente{grid-template-areas:"cerca cli" "ordina invio" "esito esito" "tipo tipo"}
}
@container oa (max-width:1020px){ .cg-kpi{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container oa (max-width:890px){ .cg-kpi{grid-template-columns:repeat(2,minmax(0,1fr))} .cg-kpi .oa-kpi-c:first-child{grid-column:span 2} }
@container oa (max-width:620px){
  .cg-fgriglia,.cg-fgriglia.cg-fg-agente{grid-template-areas:"cerca" "cli" "ordina" "invio" "esito" "tipo"}
  .cg-fgriglia:not(.cg-fg-agente){grid-template-areas:"cerca" "ordina" "invio" "esito" "tipo"}
}
/* colonne che non ci stanno: la nota e poi partita / lab dip sotto l'articolo */
@container oa (max-width:1180px){
  .cg:not(.cg-agente) .cg-h-nt,.cg:not(.cg-agente) .cg-d-nt{display:none}
  .cg:not(.cg-agente) .cg-sotto-nt{display:block}
}
@container oa (max-width:980px){
  .cg:not(.cg-agente) .cg-h-par,.cg:not(.cg-agente) .cg-d-par{display:none}
  .cg:not(.cg-agente) .cg-sotto-par{display:block}
}
@container oa (max-width:1320px){
  .cg-agente .cg-h-nt,.cg-agente .cg-d-nt{display:none}
  .cg-agente .cg-sotto-nt{display:block}
}
@container oa (max-width:1120px){
  .cg-agente .cg-h-par,.cg-agente .cg-d-par{display:none}
  .cg-agente .cg-sotto-par{display:block}
}
/* telefono e riquadri stretti: ogni articolo e' una scheda */
@container oa (max-width:760px){
  .cg-griglia{border:0;border-radius:0;background:transparent;overflow:visible}
  .cg-t,.cg-t tbody,.cg-t td{display:block}
  .cg-t thead{display:none}
  .cg-t tr.cg-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;margin-bottom:8px;padding:12px 14px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2)}
  .cg-t tr.cg-r[hidden]{display:none}
  .cg-t td{width:auto;min-width:0;max-width:none;padding:0;border:0;white-space:normal;background:transparent}
  .cg-t tr.cg-nuova td{border-top:0}
  .cg-t tbody tr:hover td{background:transparent}
  .cg-t td:empty{display:none}
  .cg-d-tipo{grid-column:1;grid-row:1}
  .cg-d-inv{grid-column:2;grid-row:1;justify-self:end}
  .cg-d-cli{grid-column:1/-1;font-size:14px}
  .cg-d-art{grid-column:1/-1;font-size:14.5px}
  .cg-d-col{grid-column:1;color:var(--tenue)}
  .cg-d-qta{grid-column:2;justify-self:end;white-space:nowrap}
  .cg-d-es{grid-column:1/-1}
  .cg-d-es small{display:inline;margin-left:6px}
  .cg .cg-h-nt,.cg .cg-d-nt,.cg .cg-h-par,.cg .cg-d-par{display:none}
  .cg .cg-sotto{display:block}
  .cg-d-rich{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--tenue)}
  .cg-d-rich b{display:inline;font-weight:600}
  .cg-d-rich small{display:inline;margin:0}
  .cg-ripeti .cg-d-rich b,.cg-ripeti .cg-d-rich small{opacity:1}
  .cg-t td.cg-d-rich{order:9;display:flex;align-items:baseline;gap:8px;padding-top:7px;border-top:1px dashed var(--bordo)}
}

/* =====================================================================
   COPIA COMMISSIONI - 09/10/2026 (versione A scelta dall'utente)
   La pagina (dal 10/10/2026 elenco, pila e visore: vedi il blocco in fondo "Copia Commissioni: elenco, pila e visore"), il foglio A4 su cui si scrive
   (js/commissione-foglio.js: la barra e i pannelli sono quelli del quaderno a schizzi, .qs-*) e le finestre del
   cliente, degli allegati e di Salva (.dialogo-posta del portale, larghe). Tutto .cc-*.
   ===================================================================== */
.cm-link{padding:0;border:0;background:none;color:var(--accento2);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cm-link:hover{color:var(--accento-testo)}
#ccAvviso{margin:0 0 16px}

.cm-stato{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cm-stato i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.cm-stato.inviata{color:#1e7e45;border-color:rgba(30,158,87,.45);background:rgba(79,208,138,.12)}
.cm-stato.archiviata{color:var(--tenue);border-color:var(--bordo-forte)}
.cm-stato.bozza{color:#8a5d00;border-color:rgba(201,154,6,.55);background:rgba(242,193,78,.16)}
html[data-tema="scuro"] .cm-stato.inviata{color:#4fd08a}
html[data-tema="scuro"] .cm-stato.bozza{color:#f2c14e}
.cm-vuoto{display:grid;justify-items:start;gap:8px;padding:20px}
.cm-vuoto p{margin:0;max-width:640px;color:var(--tenue)}
.cm-vuoto-segno{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:var(--accento-velo);color:var(--accento-testo)}
html.in-attesa-cc,html.in-attesa-cc *{cursor:progress !important}

/* ---------------- il foglio ---------------- */
.cm-f{--qs-tavolo:#d9d4c7}
html[data-tema="scuro"] .cm-f{--qs-tavolo:#08090b}
.cm-f-testa{flex:1 1 220px;min-width:0;display:grid;gap:2px}
.cm-f-riga{display:flex;align-items:center;gap:8px;min-width:0}
.cm-f-numero{flex:none;font-size:16px;font-weight:800;color:var(--testo)}
.cm-f-cliente{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;padding:3px 10px 3px 4px;border:1px solid var(--bordo);border-radius:999px;background:var(--pannello2);color:var(--testo);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;touch-action:manipulation}
.cm-f-cliente:hover{border-color:var(--accento)}
.cm-f-cliente .vp-stato{flex:none}
.cm-f-cliente-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-f-stato{font-size:11.5px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-f-stato-salvando,.cm-f-stato-attesa{color:var(--tenue)}
.cm-f-stato-errore,.cm-f-stato-conflitto{color:var(--pericolo);font-weight:700}
.cm-f-allegati{position:relative}
.cm-f-conto{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accento);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center}
.cm-f-tavolo{position:relative;min-height:0;overflow:hidden;touch-action:none;cursor:crosshair;background:var(--qs-tavolo)}
.cm-f-tavolo.con-mano{cursor:grab}
.cm-f-tavolo.con-gomma{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='9' fill='rgba(255,255,255,.5)' stroke='%2310222b' stroke-width='1.4'/%3E%3C/svg%3E") 12 12,cell}
.cm-f-livelli{position:absolute;inset:0;will-change:transform}
.cm-f-livelli canvas{position:absolute;left:0;top:0;display:block}
.cm-f-zoom .qs-b{height:34px;min-width:34px}
.cm-f-zoom .qs-b:not(.cm-f-z-testo){width:34px;padding:0}
.cm-f-zoom .qs-b.cm-f-z-testo{width:auto;padding:0 12px;font-size:12.5px}
/* il messaggio iniziale del foglio: al centro, una riga per pezzo, poi sparisce (10/10/2026) */
.cm-f-suggerimento{position:absolute;left:50%;top:50%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;max-width:min(420px,calc(100% - 32px));margin:0;padding:14px 22px;border-radius:14px;transform:translate(-50%,-50%);text-align:center;
  background:rgba(24,26,31,.88);color:#f1f2f4;font-size:15.5px;font-weight:600;line-height:1.35;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);pointer-events:none;transition:opacity .6s}
.cm-f-suggerimento.cm-f-via{opacity:0}
.cm-f.qs-scrive .cm-f-suggerimento{opacity:0}
.cm-f-conflitto{position:absolute;top:12px;left:50%;z-index:6;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 24px);padding:10px 12px 10px 16px;
  transform:translateX(-50%);border:1px solid var(--pericolo-bordo);border-radius:12px;background:var(--pannello);box-shadow:var(--ombra)}
.cm-f-conflitto p{margin:0;font-size:13.5px;line-height:1.4;color:var(--pericolo)}
.cm-f-gruppo-allegati{flex:none}
/* ---- righe, striscia e vassoio: PROPOSTA C "iPad prima di tutto, guidata", scelta dall'utente il 09/10/2026 ----
   Sul foglio (carta bianca in tutti e due i temi) il verde e' sempre quello della carta, anche nel tema scuro: il verde
   schiarito del tema scuro sul bianco non si leggerebbe. */
:root{--cmx-ambra:#e4a11b;--cmx-verde-carta:#1e9e57;--cmx-ombra-str:0 26px 50px -20px rgba(16,34,43,.55)}
html[data-tema="scuro"]{--cmx-ombra-str:0 26px 50px -18px rgba(0,0,0,.85)}
.cm-f-sovra{position:absolute;inset:0;pointer-events:none}
.cm-f-sovra[hidden],.cm-f-sovra [hidden]{display:none !important}
.cm-f-sovra > *{pointer-events:auto}
.cm-f-sovra > .cm-f-luce,.cm-f-sovra > .cm-f-luce-passa,.cm-f-sovra > .cm-f-guida{pointer-events:none}
/* il "+" di riga e il "+ fabbrica": crescono con il foglio (--lato lo calcola lo script), l'area di tocco e' tutta la
   fascia del margine */
.icona-riga.cm-f-piu,.icona-riga.cm-f-fabbrica{--ic:var(--cmx-verde-carta);position:absolute;z-index:3;width:var(--lato);height:var(--lato);
  border-radius:calc(var(--lato) * .22);transform:translate(-50%,-50%);background:color-mix(in srgb,var(--ic) 9%,#fff);
  border-color:color-mix(in srgb,var(--ic) 60%,#fff);color:var(--ic);box-shadow:0 1px 2px rgba(16,34,43,.2);touch-action:manipulation}
.icona-riga.cm-f-piu:hover,.icona-riga.cm-f-fabbrica:hover{background:color-mix(in srgb,var(--ic) 22%,#fff);border-color:var(--ic)}
.icona-riga.cm-f-piu svg{width:66%;height:66%;stroke-width:2.7;transition:transform .2s}
.icona-riga.cm-f-fabbrica > svg{width:70%;height:70%;stroke-width:2;margin-top:6%}
.cm-f-piu .cm-f-i-spunta,.cm-f-fabbrica-piu .cm-f-i-spunta{display:none}
.cm-f-piu.fatto .cm-f-i-spunta,.cm-f-fabbrica.attiva .cm-f-fabbrica-piu .cm-f-i-spunta{display:block}
.cm-f-piu.fatto .cm-f-i-piu,.cm-f-fabbrica.attiva .cm-f-fabbrica-piu .cm-f-i-piu{display:none}
.cm-f-fabbrica-piu{position:absolute;top:-6px;left:-6px;display:grid;place-items:center;width:15px;height:15px;border-radius:4px;
  background:#fff;border:1.5px solid var(--cmx-verde-carta);color:var(--cmx-verde-carta);box-shadow:0 1px 2px rgba(16,34,43,.25)}
.cm-f-fabbrica-piu svg{display:block;width:9px;height:9px;stroke-width:3.4}
.icona-riga.cm-f-fabbrica.attiva .cm-f-fabbrica-piu{background:var(--cmx-verde-carta);border-color:#fff;color:#fff}
.icona-riga.cm-f-piu::before,.icona-riga.cm-f-fabbrica::before{content:"";position:absolute;inset:-7px -12px}
.icona-riga.cm-f-piu.attiva,.icona-riga.cm-f-fabbrica.attiva,
html[data-tema="scuro"] .icona-riga.cm-f-piu.attiva,html[data-tema="scuro"] .icona-riga.cm-f-fabbrica.attiva{background:var(--ic);border-color:var(--ic);color:#fff}
.icona-riga.cm-f-piu.spento{opacity:.28;filter:grayscale(1);box-shadow:none;pointer-events:none}
.icona-riga.cm-f-piu.aperto svg{transform:rotate(45deg)}
.icona-riga.cm-f-piu.aperto{box-shadow:0 0 0 4px rgba(30,158,87,.3),0 0 0 9px rgba(30,158,87,.12)}
.cm-f-in-striscia .icona-riga.cm-f-piu:not(.aperto):not(.fatto){opacity:.32}
/* la X rossa delle righe scritte con la striscia (10/10/2026): nel margine destro, quadrata come il "+", rossa del logo
   anche nel tema scuro (sta sulla carta); toglie la riga dopo la conferma */
.icona-riga.cm-f-togli{--ic:#da0219;position:absolute;z-index:3;width:var(--lato);height:var(--lato);border-radius:calc(var(--lato) * .22);
  transform:translate(-50%,-50%);background:color-mix(in srgb,var(--ic) 9%,#fff);border-color:color-mix(in srgb,var(--ic) 55%,#fff);color:var(--ic);
  box-shadow:0 1px 2px rgba(16,34,43,.2);touch-action:manipulation}
.icona-riga.cm-f-togli:hover,.icona-riga.cm-f-togli:focus-visible,
html[data-tema="scuro"] .icona-riga.cm-f-togli:hover{background:var(--ic);border-color:var(--ic);color:#fff}
html[data-tema="scuro"] .icona-riga.cm-f-togli{background:color-mix(in srgb,var(--ic) 9%,#fff);border-color:color-mix(in srgb,var(--ic) 55%,#fff);color:var(--ic)}
.icona-riga.cm-f-togli svg{width:60%;height:60%;stroke-width:2.8}
.icona-riga.cm-f-togli::before{content:"";position:absolute;inset:-7px -8px}
.cm-f-in-striscia .icona-riga.cm-f-togli{opacity:.32}
/* il codice che non c'e' nel catalogo: pallino ambra sul "+" e, per qualche secondo, la pillola accanto alla riga */
.cm-f-segnale{position:absolute;top:-7px;right:-8px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:var(--cmx-ambra);color:#1a1204;font:800 10.5px/1 var(--carattere);box-shadow:0 0 0 2px #fff}
.cm-f-ignoto{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;height:23px;margin:0;padding:0 10px 0 4px;
  border:1px solid rgba(228,161,27,.75);border-radius:999px;background:#fff6df;color:#7a4f00;font:700 11.5px/1 var(--carattere);
  white-space:nowrap;cursor:pointer;transform:translateY(-50%);box-shadow:0 6px 14px -8px rgba(122,79,0,.7);animation:cm-f-appare .35s ease-out both}
.cm-f-ignoto i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--cmx-ambra);color:#1a1204;font:800 10.5px/1 var(--carattere);font-style:normal}
.cm-f-ignoto u{text-decoration:none;color:#9a6400;font-weight:800;margin-left:2px;padding-left:7px;border-left:1px solid rgba(228,161,27,.55)}
@keyframes cm-f-appare{from{opacity:0;transform:translateY(-50%) scale(.85)}to{opacity:1;transform:translateY(-50%)}}
/* la riga scelta: luce verde sulla riga, il resto del foglio velato */
.cm-f-luce{position:absolute;z-index:2;border-radius:4px;background:rgba(79,208,138,.10);
  box-shadow:0 0 0 2px var(--cmx-verde-carta),0 0 0 6px rgba(30,158,87,.22),0 0 0 200vmax rgba(6,7,9,.36)}
html[data-tema="chiaro"] .cm-f-luce{box-shadow:0 0 0 2px var(--cmx-verde-carta),0 0 0 6px rgba(30,158,87,.2),0 0 0 200vmax rgba(16,34,43,.26)}
.cm-f-luce-passa{position:absolute;z-index:2;border-radius:4px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(79,208,138,0) 0%,rgba(79,208,138,.10) 55%,rgba(79,208,138,.45) 100%);box-shadow:0 0 0 2px rgba(30,158,87,.55)}
/* le intestazioni delle colonne, ferme in cima mentre si scrive con la striscia */
.cm-f-colonne{position:absolute;top:0;z-index:4;height:33px;border:1px solid var(--bordo);border-top:0;border-radius:0 0 10px 10px;
  background:var(--pannello);box-shadow:0 8px 18px -12px rgba(0,0,0,.6);pointer-events:none}
.cm-f-colonne span{position:absolute;top:0;height:100%;display:grid;place-items:center;border-left:1px solid var(--bordo);font-size:10.5px;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden}
.cm-f-colonne span:first-child{border-left:0}
/* la STRISCIA: una riga sola, alta 60 pixel, larga quanto la tabella, attaccata sotto la riga scelta; tutto si prende con
   il pollice: campi e pillole alti 46, OK rotondo da 56 a filo destro (l'unico pulsante tondo, chiesto dall'utente) */
.cm-f-str{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;box-sizing:border-box;min-height:60px;padding:7px 7px 7px 8px;
  border:1px solid var(--bordo-forte);border-radius:18px;background:var(--pannello);color:var(--testo);font-family:var(--carattere);
  box-shadow:var(--cmx-ombra-str);transform-origin:var(--becco,30px) 0;animation:cm-f-str-apre .26s cubic-bezier(.2,.9,.25,1.15) both;touch-action:manipulation}
.cm-f-str::before{content:"";position:absolute;top:-7px;left:var(--becco,30px);width:12px;height:12px;background:var(--pannello);
  border-left:1px solid var(--bordo-forte);border-top:1px solid var(--bordo-forte);border-top-left-radius:3px;transform:rotate(45deg)}
@keyframes cm-f-str-apre{from{opacity:0;transform:translateY(-10px) scaleY(.5)}to{opacity:1;transform:none}}
.cm-f-str-linea{display:flex;align-items:center;gap:6px;min-width:0}
.cm-f-str{flex-direction:column;align-items:stretch}
.cm-f-str-principale{gap:8px}
.cm-f-str.media .cm-f-str-principale{gap:6px}
.cm-f-str.stretta{flex-direction:column;align-items:stretch;gap:7px;padding:7px}
/* colore e prezzo (facoltativi): la seconda riga si apre con la freccia blu accanto a OK e comincia sotto il codice */
.cm-f-str-altro svg{transition:transform .2s}
.cm-f-str-altro.attiva svg{transform:rotate(180deg)}
.cm-f-str-principale .cm-f-str-altro{margin-left:auto}
.cm-f-str-altro + .cm-f-ok{margin-left:0}
.cm-f-str-extra{gap:8px;padding-left:98px;animation:cm-f-extra .2s ease-out both}
/* chiusa: nascosta alla vista ma ancora nella pagina, perche' il Tab dell'iPad possa arrivare a colore e prezzo (10/10/2026) */
.cm-f-str .cm-f-str-linea.cm-f-str-extra.chiusa{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none;animation:none}
.cm-f-str.media .cm-f-str-extra{gap:6px;padding-left:52px}
.cm-f-str.stretta .cm-f-str-extra{gap:6px;padding-left:0}
@keyframes cm-f-extra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cm-f-str-colore{flex:0 1 300px}
.cm-f-str-colore input{text-transform:uppercase}
.cm-f-str-prezzo{flex:0 0 150px}
.cm-f-str.stretta .cm-f-str-colore{flex:1 1 0;height:42px}
.cm-f-str.stretta .cm-f-str-prezzo{flex:0 0 118px;height:42px}
.cm-f-str-num{display:grid;justify-items:center;flex:none;width:36px;line-height:1}
.cm-f-str-num small{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--tenue)}
.cm-f-str-num b{margin-top:3px;font-size:21px;font-weight:800;color:var(--testo)}
.cm-f-str .icona-riga{width:46px;height:46px;border-radius:12px}
.cm-f-str .icona-riga svg{width:20px;height:20px}
.cm-f-str-campo{display:grid;align-content:center;gap:1px;box-sizing:border-box;height:46px;min-width:0;margin:0;padding:0 13px;border:1.5px solid var(--bordo-forte);
  border-radius:12px;background:var(--campo-attivo);cursor:text}
.cm-f-str-campo small{font-size:10px;font-weight:800;letter-spacing:.07em;line-height:1.1;text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-f-str-campo input{width:100%;min-width:0;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--testo);font:800 19px/1.15 var(--carattere);letter-spacing:.07em}
.cm-f-str-codice input{text-transform:uppercase}
.cm-f-str-campo:focus-within{border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone)}
.cm-f-str-campo.cm-f-manca{border-color:var(--pericolo);animation:cm-f-scuoti .32s}
@keyframes cm-f-scuoti{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.cm-f-str-codice{flex:0 1 196px;min-width:150px}
.cm-f-str.media .cm-f-str-codice{flex:1 1 140px;min-width:120px}
.cm-f-str.stretta .cm-f-str-codice{flex:1 1 0}
.cm-f-sep{flex:none;align-self:stretch;width:1px;margin:6px 1px;background:var(--bordo)}
.cm-f-tipi{display:flex;gap:6px;min-width:0}
.cm-f-tipo{position:relative;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 14px 0 9px;border:1.5px solid var(--bordo-forte);border-radius:999px;
  color:var(--testo);font-size:14.5px;font-weight:700;white-space:nowrap;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:border-color .15s,background-color .15s}
.cm-f-tipo small{padding:2px 6px;border-radius:6px;background:var(--pannello2);color:var(--tenue);font-size:11.5px;font-weight:800;letter-spacing:.03em}
.cm-f-tipo-segno{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--bordo-forte);color:transparent}
.cm-f-tipo-segno svg{stroke-width:3}
.cm-f-tipo.scelto{border-color:var(--accento);background:var(--accento-velo)}
.cm-f-tipo.scelto .cm-f-tipo-segno{border-color:var(--accento);background:var(--accento);color:#fff}
.cm-f-tipo.scelto small{background:color-mix(in srgb,var(--accento) 18%,transparent);color:var(--accento-testo)}
.cm-f-tipo:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
.cm-f-nascosto{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
/* sotto i 1000 pixel (iPad verticale): niente "RIGA n", pillole senza unita' e senza cerchio (la scelta e' piena) */
.cm-f-str.media{gap:6px}
.cm-f-str.media .cm-f-str-num{display:none}
.cm-f-str-principale .cm-f-tipi{flex:none}
.cm-f-str.media .cm-f-tipo small,.cm-f-str.media .cm-f-tipo-segno{display:none}
.cm-f-str.media .cm-f-tipo{padding:0 13px;gap:0}
.cm-f-str.media .cm-f-tipo.scelto{background:var(--accento);border-color:var(--accento);color:#fff}
.cm-f-str.media .cm-f-tipi{gap:4px}
.cm-f-str.media .cm-f-str-qta{gap:3px}
.cm-f-str.media .cm-f-str-qta .icona-riga{width:40px}
.cm-f-str.media .cm-f-qta-valore{width:76px;padding:0 6px}
.cm-f-str.stretta .cm-f-tipi{gap:4px;flex:1 1 auto}
.cm-f-str.stretta .cm-f-tipo{height:42px;padding:0 10px;gap:0;font-size:13px}
.cm-f-str.stretta .cm-f-tipo small,.cm-f-str.stretta .cm-f-tipo-segno{display:none}
.cm-f-str.stretta .cm-f-tipo.scelto{background:var(--accento);border-color:var(--accento);color:#fff}
.cm-f-str-qta{display:flex;align-items:center;gap:5px;flex:none}
.cm-f-qta-valore{width:92px;justify-items:center;text-align:center;padding:0 8px}
.cm-f-qta-riga{display:flex;align-items:baseline;justify-content:center;gap:4px;min-width:0}
.cm-f-qta-riga input{width:100%;text-align:right}
.cm-f-qta-um{flex:none;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--tenue)}
.cm-f-str.stretta .cm-f-str-qta{gap:3px}
.cm-f-str.stretta .cm-f-str-qta .icona-riga{width:36px;height:42px;border-radius:10px}
.cm-f-str.stretta .cm-f-qta-valore{width:62px;height:42px;padding:0 4px}
.cm-f-str.stretta .cm-f-qta-riga input{font-size:17px}
.cm-f-ok{position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px;margin:0 0 0 auto;padding:0;border:0;border-radius:50%;
  background:var(--verde);color:#fff;font:800 17px/1 var(--carattere);letter-spacing:.04em;cursor:pointer;touch-action:manipulation;
  box-shadow:0 0 0 5px rgba(30,158,87,.22),0 10px 22px -8px rgba(30,158,87,.9);transition:transform .1s,filter .15s}
.cm-f-ok:hover{filter:brightness(1.08)}
.cm-f-ok:active{transform:scale(.92)}
.cm-f-ok.pronto::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(79,208,138,.6);animation:cm-f-ok-onda 1.8s ease-out infinite;pointer-events:none}
@keyframes cm-f-ok-onda{from{transform:scale(1);opacity:.9}to{transform:scale(1.4);opacity:0}}
.cm-f-ok.cm-f-attesa{opacity:.6;cursor:progress}
.cm-f-str.stretta .cm-f-ok{width:50px;height:50px}
.cm-f-str-scrive{opacity:.55;transition:opacity .15s}
/* il VASSOIO sotto la striscia: a sinistra gli articoli del catalogo che cominciano cosi', a destra la quantita' veloce */
.cm-f-vas{position:absolute;z-index:6;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);box-sizing:border-box;border:1px solid var(--bordo-forte);
  border-radius:18px;background:var(--pannello);color:var(--testo);font-family:var(--carattere);box-shadow:var(--cmx-ombra-str);overflow:hidden;
  animation:cm-f-str-apre .24s .06s ease-out both;touch-action:manipulation}
.cm-f-vas.solo{grid-template-columns:minmax(0,1fr)}
.cm-f-vas-cat{min-width:0;padding:10px}
.cm-f-vas-titolo{margin:2px 6px 8px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.cm-f-vas-elenco{display:grid;gap:2px;max-height:min(30vh,250px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.cm-f-vas-vuoto{margin:2px 6px 4px;font-size:13px;color:var(--tenue)}
.cm-f-vas-vuoto[hidden]{display:none}
.cm-f-art{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 10px 0 7px;border:0;border-radius:11px;background:transparent;
  color:var(--testo);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.cm-f-art:hover{background:var(--pannello2)}
.cm-f-art.acceso{background:var(--pannello2);box-shadow:inset 0 0 0 1.5px var(--bordo-forte)}
.cm-f-art-foto{flex:none;display:block;width:34px;height:34px;border-radius:8px;object-fit:cover;box-shadow:0 0 0 1px var(--bordo)}
.cm-f-art b{flex:none;min-width:78px;font-size:15.5px;font-weight:800;letter-spacing:.05em}
.cm-f-art mark{padding:0 1px;border-radius:3px;background:var(--accento-velo);color:var(--accento-testo)}
.cm-f-art span{min-width:0;overflow:hidden;font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--tenue);text-overflow:ellipsis;white-space:nowrap}
.cm-f-art kbd{flex:none;margin-left:auto;padding:3px 8px;border:1px solid var(--bordo-forte);border-radius:6px;font:700 11px var(--carattere);color:var(--tenue)}
.cm-f-vas-nota{display:flex;align-items:center;gap:8px;margin:9px 6px 2px;font-size:12.5px;line-height:1.35;color:var(--tenue)}
.cm-f-vas-nota svg{flex:none;color:var(--accento2)}
.cm-f-veloci{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cm-f-veloci button{height:46px;border:1.5px solid var(--bordo-forte);border-radius:12px;background:var(--pannello);color:var(--testo);
  font:800 18px var(--carattere);cursor:pointer;touch-action:manipulation}
.cm-f-veloci button:hover{border-color:var(--accento)}
.cm-f-veloci button.acceso{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo)}
/* dopo OK: i valori che salgono nella riga */
.cm-f-volante{position:absolute;z-index:7;padding:3px 11px 0;border:1.5px solid var(--cmx-verde-carta);border-radius:999px;background:#fff;color:#1d3fbf;
  font:500 21px/1.1 Caveat,cursive;white-space:nowrap;pointer-events:none;box-shadow:0 10px 20px -8px rgba(0,0,0,.7)}
/* la guida della prima volta, accanto al primo "+" libero */
.cm-f-guida{position:absolute;z-index:5;width:170px;margin:0;padding:10px 12px;border-radius:12px;background:var(--verde);color:#fff;font-size:13px;
  line-height:1.4;box-shadow:0 14px 28px -14px rgba(0,0,0,.85);transform:translateY(-50%)}
.cm-f-guida b{font-weight:800}
.cm-f-guida small{display:block;margin-top:6px;font-size:11px;opacity:.8}
.cm-f-guida::after{content:"";position:absolute;top:50%;left:-6px;width:12px;height:12px;margin-top:-6px;border-radius:2px;background:var(--verde);transform:rotate(45deg)}
.cm-f .qs-avviso-penna.cm-f-rossa{background:#b3121f;border-color:#b3121f;color:#fff}
/* ---- il biglietto sul foglio: PROPOSTA B "carta vera" ---- */
/* il biglietto in volo, mentre la graffetta scatta e mentre si sposta: tele trasparenti sopra il tavolo (l'ombra e' loro) */
.cm-f-volo{position:absolute;z-index:6;pointer-events:none;will-change:transform}
.cm-f-sposta{filter:drop-shadow(0 18px 22px rgba(0,0,0,.35));cursor:grabbing}
/* i segni dello scatto della graffetta */
.cm-f-clic{position:absolute;z-index:7;width:0;height:0;pointer-events:none}
.cm-f-clic i{position:absolute;left:-1px;top:-14px;width:2.5px;height:9px;border-radius:2px;background:rgba(16,34,43,.6);transform-origin:50% 14px;animation:cm-f-clic .5s ease-out both}
.cm-f-clic i:nth-child(1){transform:rotate(-55deg)}
.cm-f-clic i:nth-child(2){transform:rotate(-8deg)}
.cm-f-clic i:nth-child(3){transform:rotate(40deg)}
@keyframes cm-f-clic{from{opacity:0;top:-10px}30%{opacity:1}to{opacity:0;top:-20px}}
/* premuto a lungo sul biglietto: Sposta / Togli */
.cm-f-menu{position:absolute;z-index:8;display:grid;gap:2px;min-width:160px;padding:5px;border:1px solid var(--bordo-forte);border-radius:12px;
  background:var(--pannello);box-shadow:var(--ombra)}
.cm-f-menu-voce{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--testo);
  font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;touch-action:manipulation}
.cm-f-menu-voce:hover,.cm-f-menu-voce:focus-visible{background:var(--pannello2);outline:0}
.cm-f-menu-togli{color:var(--pericolo)}
.cm-f-menu-togli:hover{background:#b3121f;color:#fff}
@media (max-width:600px){
  .cm-f-guida{width:150px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .cm-f-str,.cm-f-vas,.cm-f-ignoto,.cm-f-clic i{animation:none}
  .cm-f-ok.pronto::after{animation:none}
  .icona-riga.cm-f-piu svg{transition:none}
}
@media (max-width:480px){
  .cm-f .qs-chiudi{width:36px;padding:0}
  .cm-f .qs-chiudi span{display:none}
  .cm-f-testa{overflow:hidden}
  .cm-f-cliente{padding:3px}
  .cm-f-cliente-nome{display:none}
}
@media (max-width:940px){
  .cm-f-testa{order:2;flex:1 1 0}
  .cm-f-gruppo-allegati{order:3}
}
@media (max-width:600px){
  .cm-f-zoom .qs-b.cm-f-z-testo{padding:0 8px}
}

/* ---------------- le finestre: categoria, cliente, allegati, salva ---------------- */
.cm-dialogo-largo{width:min(640px,94vw)}
.cm-dialogo-allegati{width:min(820px,96vw)}
.cm-dialogo .dialogo-posta-corpo{max-height:min(74vh,720px)}
/* gli allegati della copia: il pannello "Prendi un file / Adesso" della graffetta sta nella finestra, in riga sotto la
   testata (come nei ticket), e la finestra scorre; aperto sopra la pagina restava tagliato dal bordo (09/10/2026) */
.cm-dialogo-allegati .odm-graffetta{position:static}
.cm-dialogo-allegati .odm-graffetta.aperto{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cm-dialogo-allegati .cm-allegati .odm-pannello-tipi{position:static;left:auto;right:auto;bottom:auto;width:100%;max-height:none;overflow:visible;box-sizing:border-box;scroll-margin:12px}
@media (max-width:719px){
  .cm-dialogo-allegati .cm-allegati .odm-pannello-tipi{padding:12px;border-radius:var(--raggio)}
  .cm-dialogo-allegati .odm-graffetta.aperto{align-items:stretch}
}
.cm-spiega{margin:0;font-size:13.5px;line-height:1.5;color:var(--tenue)}
.cm-etichetta{display:block;margin:4px 0 -4px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
.cm-categorie{display:grid;gap:8px}
.cm-categoria{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2);color:var(--testo);font:inherit;text-align:left;cursor:pointer}
.cm-categoria small{color:var(--tenue);font-size:12px}
.cm-categoria-segno{display:grid;place-items:center;width:24px;height:24px;margin-left:auto;border-radius:50%;border:1.5px solid var(--bordo-forte);color:transparent}
.cm-categoria.scelta{border-color:var(--accento);background:var(--accento-velo)}
.cm-categoria.scelta .cm-categoria-segno{border-color:var(--accento);background:var(--accento);color:#fff}
.cm-strade{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cm-strada{display:grid;justify-items:center;gap:6px;padding:12px 6px 10px;border:2px solid var(--bordo);border-radius:12px;background:var(--pannello);color:var(--testo);font:inherit;cursor:pointer;touch-action:manipulation;transition:border-color .15s,background-color .15s}
.cm-strada:hover{border-color:var(--accento)}
.cm-strada.scelta{border-color:var(--accento);background:var(--accento-velo)}
.cm-strada-icona{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--pannello2);color:var(--accento-testo)}
.cm-strada-testo{display:grid;justify-items:center;gap:1px;text-align:center}
.cm-strada-testo b{font-size:13.5px}
.cm-strada-testo small{font-size:11.5px;color:var(--tenue)}
.cm-strada-pannello{display:grid;gap:10px}
.cm-strada-pannello:empty{display:none}
.cm-cerca{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--bordo-forte);border-radius:10px;background:var(--campo-attivo);color:var(--tenue)}
.cm-cerca input{flex:1;min-width:0;border:0;background:transparent;color:var(--testo);font:inherit;font-size:15px;padding:11px 0;outline:0}
.cm-scegli-foto{justify-self:start;cursor:pointer}
.cm-qr-camera{overflow:hidden;border-radius:12px;background:#000;aspect-ratio:4/3;max-height:300px}
.cm-qr-camera video{display:block;width:100%;height:100%;object-fit:cover}
.cm-sito{display:flex;gap:8px}
.cm-sito input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--bordo-forte);border-radius:10px;background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:15px}
.cm-risultati{display:grid;gap:10px}
.cm-risultati:empty{display:none}
.cm-letto{display:grid;gap:3px;padding:10px 12px;border:1px dashed var(--bordo-forte);border-radius:12px;background:var(--pannello2)}
.cm-letto-testa{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue)}
.cm-letto b{font-size:15px}
.cm-letto small{color:var(--tenue);font-size:12.5px;overflow-wrap:anywhere}
.cm-clienti{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cm-cliente{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello2);color:var(--testo);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.cm-cliente:hover{border-color:var(--accento)}
.cm-cliente-testo{flex:1;min-width:0;display:grid;gap:2px}
.cm-cliente-testo b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-cliente-testo small{color:var(--tenue);font-size:12.5px}
.cm-clienti-vuoto{padding:8px 2px;color:var(--tenue);font-size:13px}
.cm-sigla{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#7c4dff;color:#fff;font-weight:800;font-size:14px}
.cm-sigla.vuota{background:var(--pannello);border:1.5px dashed var(--bordo-forte);color:var(--tenue)}
.cm-motivi{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.cm-motivo{padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--accento2) 12%,transparent);border:1px solid color-mix(in srgb,var(--accento2) 34%,transparent);color:var(--testo);font-size:11px;font-weight:600}
.cm-risultati-azioni{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
/* il biglietto ritagliato nella finestra del cliente, con il segno dei bordi trovati e "Sistema i bordi" */
.cm-ritaglio{display:flex;align-items:center;gap:16px;padding:12px 14px;border:1px solid var(--successo-bordo);border-radius:12px;background:var(--successo-velo)}
.cm-ritaglio[hidden]{display:none}
.cm-ritaglio-vista{flex:none;padding:6px 4px}
.cm-ritaglio-foto{display:block;width:150px;height:auto;border-radius:3px;transform:rotate(-3.5deg);box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 20px -6px rgba(0,0,0,.45)}
.cm-ritaglio-testo{display:grid;justify-items:start;gap:4px;min-width:0}
.cm-ritaglio-testo b{font-size:14.5px}
.cm-ritaglio-testo small{font-size:12.5px;line-height:1.45;color:var(--tenue)}
.cm-ritaglio-testo .bottone{margin-top:4px}
@media (max-width:520px){
  .cm-ritaglio{flex-wrap:wrap}
}
/* i segni sulla foto (proposta B): bordi trovati in verde, da sistemare in ambra */
.cm-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 6px;border-radius:999px;background:rgba(12,13,16,.78);
  color:#f3efe6;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.cm-chip i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;color:#fff;font:800 11px/1 var(--carattere);font-style:normal}
.cm-chip i svg{width:12px;height:12px;stroke-width:3.4}
.cm-chip.ok i{background:#1e9e57}
.cm-chip.att i{background:#e4a11b;color:#1a1204}
.cm-ritaglio .cm-chip{height:24px;font-size:11.5px}

/* ---- il passo "Bordi" a tutto schermo (PROPOSTA B "carta vera", scelta dall'utente il 09/10/2026) ---- */
.cm-bb-titolo{flex:1 1 200px;display:grid;gap:1px;min-width:0}
.cm-bb-titolo b{font-size:16px;font-weight:800}
.cm-bb-titolo span{font-size:11.5px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-bb-passi{display:flex;gap:6px;margin:0 6px 0 0;padding:0;list-style:none;counter-reset:passo}
.cm-bb-passi li{counter-increment:passo;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 5px;border:1px solid var(--bordo);border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--tenue);white-space:nowrap}
.cm-bb-passi li::before{content:counter(passo);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--pannello2);font-size:11px;font-weight:800}
.cm-bb-passi li.fatto{color:var(--testo)}
.cm-bb-passi li.fatto::before{content:"";background:#1e9e57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
.cm-bb-passi li.ora{border-color:var(--accento);background:var(--accento-velo);color:var(--testo)}
.cm-bb-passi li.ora::before{background:var(--accento);color:#fff}
.cm-bb-rifai{cursor:pointer}
.cm-bb-corpo{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;min-height:0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));background:var(--qs-tavolo);overflow:auto}
.cm-bb-foto{position:relative;min-height:300px;border-radius:12px;overflow:hidden;background:#111;box-shadow:0 0 0 1px var(--bordo),0 20px 40px -22px #000;touch-action:none}
.cm-bb-foto canvas{position:absolute;inset:0;display:block}
.cm-bb-chip{position:absolute;left:14px;top:14px;z-index:3}
.cm-bb-aiuto{position:absolute;left:50%;bottom:14px;z-index:3;padding:0 14px;transform:translateX(-50%);pointer-events:none}
.cm-bb-angolo{position:absolute;z-index:2;width:48px;height:48px;margin:-24px 0 0 -24px;padding:0;border:0;border-radius:12px;background:transparent;cursor:grab;touch-action:none}
.cm-bb-angolo:active{cursor:grabbing}
.cm-bb-angolo:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.cm-bb-lato{display:grid;align-content:start;gap:12px;min-height:0;padding:14px 16px 16px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello)}
.cm-bb-lato h3{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
.cm-bb-ritaglio{position:relative;height:250px;border-radius:9px;background:radial-gradient(120% 90% at 30% 20%,#2a2c31,#16171a)}
.cm-bb-ritaglio canvas{position:absolute;inset:0}
.cm-bb-letto{display:grid;gap:5px;margin:0;padding:10px 12px;border:1px dashed var(--bordo-forte);border-radius:9px;font-size:12.5px;line-height:1.35}
.cm-bb-letto b{font-size:14px}
.cm-bb-letto span{color:var(--tenue);overflow-wrap:anywhere}
.cm-bb-nota{display:flex;gap:9px;margin:0;font-size:12px;line-height:1.45;color:var(--tenue)}
.cm-bb-nota i{flex:none;width:18px;height:18px;margin-top:1px;border-radius:5px;background:color-mix(in srgb,var(--accento) 18%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4b5c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E") center/14px no-repeat}
@media (max-width:940px){
  .cm-bb-passi{display:none}
}
@media (max-width:820px){
  .cm-bb-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(56vh,1fr) auto}
  .cm-bb-ritaglio{height:200px}
}
@media (max-width:480px){
  .cm-bb .qs-chiudi{width:36px;padding:0}
  .cm-bb .qs-chiudi span,.cm-bb-rifai span{display:none}
  .cm-bb-titolo span{white-space:normal}
  .cm-bb-corpo{padding:10px 10px calc(12px + env(safe-area-inset-bottom))}
}
.cm-cliente-scelto{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2)}
.cm-cliente-scelto > div{flex:1;min-width:0}
.cm-cliente-scelto b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-cliente-scelto small{display:block;color:var(--tenue);font-size:12.5px}
.cm-scelte{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cm-scelta{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2);color:var(--testo);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.cm-scelta b{display:block;font-size:14px}
.cm-scelta small{display:block;font-size:12px;color:var(--tenue)}
.cm-scelta-icona{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;color:#555}
.cm-scelta.scelta{border-color:var(--accento);background:color-mix(in srgb,var(--accento) 12%,var(--pannello2));box-shadow:inset 0 0 0 1px var(--accento)}
.cm-scelta.scelta .cm-scelta-icona{color:var(--accento)}
.cm-a-chi[hidden]{display:none}
.cm-dialogo .art-posta-esito{display:flex;align-items:center;gap:8px}
.cm-dialogo .art-posta-esito:empty{display:none}
.cm-dialogo .art-posta-esito.avvisa{color:var(--ambra,#a66e14)}
@media (max-width:560px){
  .cm-strade{grid-template-columns:repeat(2,1fr)}
  .cm-scelte{grid-template-columns:1fr}
}

/* il riquadro "Copia commissione" nella scheda dell'opportunita' (Campionature/Scheda.aspx) */
.cm-deal-copia{display:flex;align-items:center;gap:16px;padding:14px 16px}
.cm-deal-copia + .cm-deal-copia{border-top:1px solid var(--bordo)}
.cm-deal-mini{flex:none;display:grid;place-items:center;width:84px;height:119px;border-radius:4px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.22);overflow:hidden}
.cm-deal-mini img{display:block;width:100%;height:100%;object-fit:cover}
.cm-deal-vuota{color:#8b9aa1}
.cm-deal-testo{display:grid;gap:3px;min-width:0}
.cm-deal-testo b{font-size:15px}
.cm-deal-testo small{color:var(--tenue);font-size:12.5px}
.cm-deal-testo .azioni-riga{margin-top:6px}

/* ==== COPIA COMMISSIONI - LA VALIDAZIONE (seconda fase, 09/10/2026: proposta B "tavolo di lavoro" scelta dall'utente) ====
   Il personale Effe Pi valida una copia NON VALIDATA: a tutto schermo il foglio grande a sinistra e tre tessere a destra
   (Cliente blu, Opportunita' viola, Articoli verde), in alto il pulsante verde. Classi cm-v-* (js/commissioni.js, tavolo). */
.cm-v-conti{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.cm-v-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px 0 8px;border:1px solid;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.cm-v-chip.ok{color:var(--successo);background:var(--successo-velo);border-color:var(--successo-bordo)}
.cm-v-chip.att{color:var(--pericolo);border-color:color-mix(in srgb,var(--pericolo) 45%,transparent);background:color-mix(in srgb,var(--pericolo) 9%,transparent)}
.cm-v-chip.giallo{padding:0 11px;color:#b87d06;border-color:rgba(228,161,27,.55);background:rgba(228,161,27,.12)}
.cm-v-chip.neutro{color:var(--tenue);border-color:var(--bordo-forte)}
.cm-v-valida{height:42px;padding:0 18px;font-size:14.5px}
.cm-v-valida:not(.cm-v-pronto){opacity:.72}
.cm-v-valida .spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite}
.cm-v-corpo{grid-template-columns:minmax(0,1fr) 500px}
.cm-v-foglio{position:relative;min-height:0;overflow:hidden;border-radius:12px;background:var(--qs-tavolo,#d9d4c7);box-shadow:0 0 0 1px var(--bordo)}
.cm-v-scorri{position:absolute;inset:0;overflow:auto;padding:20px 20px 72px;text-align:center;overscroll-behavior:contain}
.cm-v-carta{position:relative;display:inline-block;width:640px;max-width:none;vertical-align:top;text-align:left;background:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.08)}
.cm-v-tela{display:block;width:100%;height:auto}
.cm-v-luce{position:absolute;left:4.95%;width:90.48%;border-radius:3px;background:rgba(79,208,138,.2);box-shadow:inset 0 0 0 2px rgba(30,158,87,.85),0 0 18px rgba(79,208,138,.45);pointer-events:none;animation:cm-v-luce .45s ease-out both}
@keyframes cm-v-luce{from{opacity:0;transform:scaleX(.96)}to{opacity:1;transform:none}}
.cm-v-zoom{position:absolute;left:50%;bottom:14px;z-index:2;display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(16,18,22,.86);box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translateX(-50%)}
.cm-v-zoom .qs-b:disabled{opacity:.35;background:transparent;color:#f3efe6}
.cm-v-zoom .qs-b{height:34px;min-width:34px;border:0;border-radius:999px;background:transparent;color:#f3efe6}
.cm-v-zoom .qs-b:hover{background:rgba(255,255,255,.12);color:#fff}
.cm-v-zoom .cm-v-intero{padding:0 12px;font-size:12.5px;font-weight:600}
.cm-v-lato{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;min-height:0;overflow:auto;padding:2px 4px 16px 2px}
.avviso.errore.cm-v-messaggio{position:sticky;top:0;z-index:3;margin:0;border-radius:10px;font-weight:600;background:linear-gradient(color-mix(in srgb,var(--pericolo) 16%,transparent),color-mix(in srgb,var(--pericolo) 16%,transparent)),var(--pannello);box-shadow:0 10px 22px -8px rgba(0,0,0,.5)}
.cm-v-messaggio[hidden]{display:none}
.cm-v-tessera{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0;padding:14px;border:1px solid var(--bordo-forte);border-top:3px solid var(--fc);border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 9%,var(--pannello)) 0,var(--pannello) 90px)}
.cm-v-tessera.blu{--fc:#3b82f6}
.cm-v-tessera.viola{--fc:#8b5cf6}
.cm-v-tessera.verde{--fc:#1e9e57}
.cm-v-tessera h3{display:flex;align-items:center;gap:9px;margin:0;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--testo)}
.cm-v-tessera h3 > span{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;background:var(--fc);color:#fff;font-size:12px;letter-spacing:0}
.cm-v-tessera h3 em{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-style:normal;font-weight:600;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--tenue);text-align:right}
.cm-v-tessera .cm-spiega{font-size:13px}
.cm-v-letto{margin:0;padding:8px 11px;border:1px dashed var(--bordo-forte);border-radius:10px;font-size:13px;line-height:1.5;color:var(--tenue);overflow-wrap:anywhere}
.cm-v-letto b{color:var(--testo)}
.cm-v-letto small{font-size:12px}
.cm-v-tessera .cm-cliente{padding:8px 10px}
.cm-v-tessera .cm-sigla{width:34px;height:34px;font-size:13px}
.cm-v-cand.scelta{border-color:var(--accento);background:var(--accento-velo)}
.cm-v-cand .cm-categoria-segno{flex:none;margin-left:6px}
.cm-v-cand.scelta .cm-categoria-segno{border-color:var(--accento);background:var(--accento);color:#fff}
.cm-v-forza{flex:none;display:inline-flex;align-items:center;gap:2px}
.cm-v-forza i{width:5px;height:14px;border-radius:2px;background:var(--bordo-forte)}
.cm-v-forza.f4 i,.cm-v-forza.f3 i:nth-child(-n+3){background:var(--successo)}
.cm-v-forza.f2 i:nth-child(-n+2){background:#e4a11b}
.cm-v-forza.f1 i:first-child{background:#e4a11b}
.cm-v-nuova{border-style:dashed;border-color:var(--successo-bordo)}
.cm-v-sigla-nuova{background:var(--successo-velo) !important;color:var(--successo)}
.cm-v-altro{display:flex;gap:8px;align-items:center}
.cm-v-altro .cm-cerca{flex:1;min-width:0}
.cm-v-altro .cm-cerca input,.cm-v-correggi .cm-cerca input{padding:8px 0;font-size:16px}
.cm-v-altro .bottone{flex:none}
.cm-v-trovati:empty{display:none}
.cm-v-opp{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.cm-v-opp b{font-size:15.5px}
.cm-v-opp .cm-link{margin-left:auto;font-size:13px}
.cm-v-sotto{font-size:12px;color:var(--tenue)}
.cm-v-categorie[hidden]{display:none}
.cm-v-art{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cm-v-art-riga{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--bordo-forte);border-radius:11px;background:var(--pannello2);cursor:pointer;transition:border-color .15s,box-shadow .15s,opacity .15s}
.cm-v-art-riga.acceso{border-color:rgba(30,158,87,.85);box-shadow:0 0 0 3px rgba(79,208,138,.18)}
.cm-v-art-riga.tolto{opacity:.55}
.cm-v-art-riga.tolto .cm-v-art-testo > b{text-decoration:line-through}
.cm-v-art-riga.fuori{border-color:rgba(228,161,27,.6);background:color-mix(in srgb,#e4a11b 7%,var(--pannello2))}
.cm-v-art-riga.fuori:not(.dadecidere){border-color:var(--bordo-forte);background:var(--pannello2)}
.cm-v-art-riga.cm-v-lampo,.cm-v-tessera.cm-v-lampo{animation:cm-v-lampo .9s ease-out 2}
@keyframes cm-v-lampo{0%{box-shadow:0 0 0 0 rgba(228,161,27,.7)}100%{box-shadow:0 0 0 12px rgba(228,161,27,0)}}
.cm-v-segno{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:8px;padding:0;border:1.5px solid var(--bordo-forte);border-radius:6px;background:transparent;color:#fff;font:800 12px/1 var(--carattere);cursor:pointer}
.cm-v-segno.si{border-color:#1e9e57;background:#1e9e57}
.cm-v-segno.att{border-color:#e4a11b;background:#e4a11b;color:#1a1204;cursor:default}
.cm-v-segno svg{stroke-width:3}
.cm-v-stoffa{flex:none;display:grid;place-items:center;width:38px;height:38px;overflow:hidden;border-radius:9px;background:var(--pannello);color:var(--tenue);box-shadow:inset 0 0 0 1px var(--bordo)}
.cm-v-stoffa img{display:block;width:100%;height:100%;object-fit:cover}
.cm-v-stoffa.vuota{border:1.5px dashed var(--bordo-forte);box-shadow:none}
.cm-v-art-riga.dadecidere > .cm-v-stoffa.vuota{border-color:#e4a11b;color:#e4a11b}
.cm-v-art-testo{flex:1;min-width:0;display:grid;gap:6px}
.cm-v-art-testo > b{font-size:14px;letter-spacing:.02em}
.cm-v-art-testo > b span{margin-left:6px;font-weight:600;color:var(--tenue);letter-spacing:0}
.cm-v-art-testo > b span.cm-v-ignoto{color:#d18f0a;font-weight:700}
.cm-v-art-testo > small{font-size:12px;color:var(--tenue)}
.cm-v-tipi{display:flex;flex-wrap:wrap;gap:5px}
.cm-v-tipo{display:inline-flex;align-items:baseline;gap:6px;padding:3px 10px;border:1px solid var(--bordo-forte);border-radius:999px;background:var(--pannello);font-size:12.5px;color:var(--tenue)}
.cm-v-tipo b{color:var(--testo);font-size:13px}
.cm-v-tipo i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--testo);opacity:.8}
.cm-v-seg{display:inline-flex;justify-self:start;flex-wrap:nowrap;padding:3px;border:1px solid var(--bordo-forte);border-radius:999px;background:var(--pannello)}
.cm-v-seg button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--tenue);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;touch-action:manipulation}
.cm-v-seg button:hover{color:var(--testo)}
.cm-v-seg button.scelta{background:var(--accento);color:#fff}
.cm-v-correggi{display:grid;gap:6px}
.cm-v-correggi[hidden]{display:none}
.cm-v-suggeriti{display:grid;gap:4px}
.cm-v-suggeriti:empty{display:none}
.cm-v-sugg{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--bordo);border-radius:9px;background:var(--pannello);color:var(--tenue);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.cm-v-sugg:hover{border-color:var(--accento)}
.cm-v-sugg b{color:var(--accento-testo)}
.cm-v-sugg .cm-v-stoffa{width:26px;height:26px;border-radius:6px}
.cm-v-corretto{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:3px 10px 3px 7px;border:1px solid var(--successo-bordo);border-radius:999px;background:var(--successo-velo);color:var(--testo);font-size:12.5px}
.cm-v-corretto svg{color:var(--successo);stroke-width:3}
.cm-v-righe{flex:none;min-width:34px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue);line-height:1.25}
.cm-v-righe b{font-size:14px;color:var(--testo);letter-spacing:0}
.cm-v-nota{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.cm-v-nota svg{flex:none;color:#e4a11b;margin-top:1px}
.cm-v.cm-v-occupato .cm-v-lato{pointer-events:none;opacity:.7}
@media (max-width:1100px){
  .cm-v-conti{display:none}
  .cm-v-corpo{grid-template-columns:minmax(0,1fr) 430px}
}
@media (max-width:820px){
  .cm-v-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;overflow:auto}
  .cm-v-foglio{height:40vh}
  .cm-v-scorri{padding:12px 12px 60px}
  .cm-v-lato{overflow:visible;padding-bottom:80px}
  .cm-v-altro{flex-wrap:wrap}
  .cm-v-altro .bottone{flex:1 1 100%;justify-content:center}
  .cm-v-valida{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:5;justify-content:center;height:50px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
  .cm-v-valida:not(.cm-v-pronto){opacity:1}
}
@media (max-width:480px){
  .cm-v .qs-chiudi{width:36px;padding:0}
  .cm-v .qs-chiudi span{display:none}
  .cm-v-tessera{padding:12px}
  .cm-v-forza{display:none}
  .cm-v-art-riga.fuori > .cm-v-stoffa{display:none}
  .cm-v-seg button{padding:0 10px}
  .cm-v-seg button svg{display:none}
}
/* il passo Bordi su tablet e telefono: Indietro resta in testa (il quaderno lo manda in fondo con order:1); sopra Indietro e
   il titolo, sotto "Rifai la foto" e "Usa questi bordi" */
@media (max-width:940px){
  .cm-bb-barra .qs-chiudi{order:0}
  .cm-bb-barra .cm-bb-titolo{flex:1 1 calc(100% - 60px)}
  .cm-bb-barra .cm-bb-usa{flex:1 1 auto;justify-content:center}
}
/* la striscia (10/10/2026): il vassoio del catalogo solo mentre si scrive il codice; la quantita' veloce e' una piccola
   fila di numeri sotto il campo della quantita', solo mentre si scrive la quantita' */
.cm-f-vas[hidden],.cm-f-qpop[hidden]{display:none}
.cm-f-qpop{position:absolute;z-index:7;padding:5px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello);
  box-shadow:var(--cmx-ombra-str);animation:cm-f-str-apre .18s ease-out both;touch-action:manipulation}
.cm-f-qpop::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px;background:var(--pannello);
  border-left:1px solid var(--bordo-forte);border-top:1px solid var(--bordo-forte);transform:rotate(45deg)}
.cm-f-qpop .cm-f-veloci{position:relative;display:flex;gap:4px}
.cm-f-qpop .cm-f-veloci button{width:38px;height:34px;padding:0;border-width:1px;border-radius:9px;font-size:14.5px}
/* la validazione: scelto il cliente, l'elenco si chiude (resta lui con "Cambia cliente") */
.cm-v [hidden]{display:none !important}
.cm-v-cambia{justify-self:start;font-size:13px}

/* 10/10/2026, menu che si allarga al passaggio del mouse (js/app.js): sopra i 980px il menu a sole icone si allarga
   SOPRA il contenuto (che non si sposta), con l'ombra; nel tema scuro il fondo diventa pieno, altrimenti la pagina
   sotto si leggerebbe attraverso. Il pulsante accanto al logo resta solo dove non c'e' il mouse (iPad orizzontale). */
@media (min-width:981px){
  html[data-menu="sopra"] .barra{width:264px;z-index:40;box-shadow:14px 0 34px rgba(0,0,0,.24)}
  html[data-tema="scuro"][data-menu="sopra"] .barra{background-color:rgba(10,11,14,.97);box-shadow:14px 0 38px rgba(0,0,0,.55)}
}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .menu-compatto{display:none}
}
/* 10/10/2026, Copia Commissioni: nella finestra del cliente la ricerca compatta di un'azienda gia' in anagrafica, sopra
   le tre letture (la stessa casella della ricerca aziende, piu' bassa); sotto, "oppure leggi i dati del cliente" */
.cm-cerca-azienda{margin:6px 0 0}
.cm-cerca-azienda input[type=search]{height:46px;padding:0 14px 0 46px;font-size:15.5px;border-radius:11px}
.cm-cerca-azienda .sa-lente{left:5px;width:36px;height:36px;pointer-events:none}
.cm-cerca-azienda.sa-in-corso::after{left:14px}
.cm-cerca-azienda-esiti{margin:8px 0 0;max-height:262px;overflow-y:auto}
.cm-cerca-azienda-esiti:empty{display:none}
.cm-cerca-azienda-esiti .cm-cliente{padding:7px 10px}
.cm-cerca-azienda-esiti .cm-sigla{width:34px;height:34px;font-size:13px}
.cm-oppure{display:flex;align-items:center;gap:10px;margin:16px 0 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--debole)}
.cm-oppure::before,.cm-oppure::after{content:"";flex:1 1 auto;height:1px;background:var(--bordo)}

/* =====================================================================
   Copia Commissioni: elenco, pila e visore (10/10/2026)
   Scelte dell'utente dalle tavole del designer: riga B "cartella con la fascia dell'evento" per l'ELENCO, pila A
   "scrivania" per la seconda vista, il VISORE in sola lettura cosi' com'e'. Commissioni/Default.aspx,
   js/commissioni-elenco.js, js/commissioni-pila.js, js/commissioni-visore.js. Prefissi: cm-e- (elenco), cm-p- (pila),
   cm-vis- (visore); cm-v- resta del tavolo della validazione. Colori solo dai gettoni dei temi; la carta, la linguetta
   rossa, il timbro verde e la graffetta sono uguali nei due temi perche' stanno sulla carta.
   ===================================================================== */
:root{--cm-carta:#fbfaf6;--cm-carta-bordo:rgba(0,0,0,.10);
  --cm-ombra:0 14px 30px rgba(70,45,20,.22),0 2px 5px rgba(70,45,20,.18);
  --cm-ombra-piccola:0 0 0 1px rgba(0,0,0,.10),0 8px 16px -8px rgba(70,45,20,.45),0 1px 2px rgba(70,45,20,.25);
  --cm-bordo-carta-a:#efebe2;--cm-bordo-carta-b:#c9c2b2}
html[data-tema="scuro"]{--cm-ombra:0 18px 40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  --cm-ombra-piccola:0 0 0 1px rgba(0,0,0,.25),0 10px 18px -8px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.6);
  --cm-bordo-carta-a:#e6e1d6;--cm-bordo-carta-b:#a39c8d}

/* ---------- la fascia della ricerca: l'interruttore Elenco | Pila, il verde corto, la riga dell'evento ---------- */
.cm-viste li label svg{color:currentColor}
.cm-viste li input:not(:checked) + label{color:var(--tenue)}
.cm-viste li input:checked + label svg{color:var(--accento-testo)}
.cm-nuova-breve{display:none}
@container sa (max-width:1179px){.cm-nuova-lungo{display:none}.cm-nuova-breve{display:inline}}
@container sa (max-width:683px){
  .cm-azioni{flex-wrap:wrap}
  .cm-azioni .cm-viste{flex:1 1 100%;height:50px}
  .cm-azioni .bottone.vuoto.cat-filtri-apri{flex:1 1 0;justify-content:center}
  .cm-azioni .sa-nuova.bottone{flex:1 1 0;padding:0 14px}
  .cm-evento-riga .cm-evento-periodo,.cm-evento-riga .cm-evento-punto{display:none}
}
.sa-fascia > p.cm-evento-riga{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--bordo-forte);
  color:var(--tenue);font-size:13.5px;line-height:1.4}
.sa-fascia > p.cm-evento-riga[hidden]{display:none}
.cm-evento-riga > svg{flex:none;color:var(--accento-testo)}
.cm-evento-riga .tag-categoria{font-size:12px;padding:3px 10px 3px 8px}
.cm-evento-periodo{font-size:12.5px;color:var(--tenue)}
.cm-evento-punto{color:var(--debole)}
.cm-evento-riga .cm-link{font-weight:700}

/* ---------- il pannello Filtri: le tendine a tutta larghezza ---------- */
.cm-filtri{margin:0 0 18px}
.cm-filtri .cf-scheda select{width:100%;min-width:0}
.cm-filtri .cf-scheda select.attiva{border-color:var(--accento);background-color:color-mix(in srgb,var(--accento) 8%,var(--campo-attivo))}
.cm-f-campo{display:grid;gap:4px;margin-top:4px;font-size:12px;color:var(--tenue)}
.cm-filtri .cat-pillola[hidden]{display:none}

/* ---------- la barra sopra le due viste: validazione e conteggio ---------- */
.cm-barra-elenco{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;margin:0 0 18px}
.cm-barra-elenco[hidden]{display:none}
.cm-barra-elenco .vp-filtri{margin:0}
.cm-conto-box{display:grid;justify-items:end;gap:2px}
.cm-barra-elenco .cm-conto{margin:0}
.cm-limite{margin:0;font-size:12px;color:var(--tenue)}
.cm-limite[hidden]{display:none}
.cm-quali input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.cm-quali label.vp-filtro{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;border:1px solid var(--bordo);
  background:var(--pannello);color:var(--tenue);font-size:13px;font-weight:600;line-height:1.4;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.cm-quali label.vp-filtro:hover{border-color:var(--accento2);color:var(--testo)}
.cm-quali label.vp-filtro.si::before,.cm-quali label.vp-filtro.no::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.cm-quali label.vp-filtro.si{color:var(--successo)}
.cm-quali label.vp-filtro.no{color:var(--accento-testo)}
html[data-tema="scuro"] .cm-quali label.vp-filtro.si{color:#5ec98c}
.cm-quali input:checked + label.vp-filtro{border-color:var(--accento2);background:var(--pannello2);color:var(--testo);box-shadow:inset 0 0 0 1px var(--accento2)}
.cm-quali input:checked + label.vp-filtro.si{border-color:var(--successo-bordo);background:var(--successo-velo)}
.cm-quali input:checked + label.vp-filtro.no{border-color:rgba(218,2,25,.35);background:var(--accento-velo)}
.cm-quali input:focus-visible + label{outline:2px solid var(--accento2);outline-offset:2px}
@container sa (max-width:683px){.cm-conto-box{justify-items:start}}
@media (max-width:683px){.cm-conto-box{justify-items:start}}

/* mentre si cerca, le copie di prima restano (piu' chiare) finche' non arrivano le nuove */
html.cm-cercando .cm-e-elenco,html.cm-cercando .cm-p-tavolo{opacity:.85;transition:opacity .12s}
.cm-nessuna{margin:0 0 18px}
.cm-nessuna[hidden]{display:none}
.cm-nessuna p{margin:0}
.cm-nessuna-azioni{display:flex;flex-wrap:wrap;gap:8px}
.bottone.vuoto.cm-azzera{border-color:var(--accento);background:var(--accento-velo);color:var(--accento-testo);font-weight:700}
.bottone.vuoto.cm-azzera svg{color:var(--accento-testo)}

/* ---------- i gruppi per operatore ---------- */
.cm-e-elenco{container-type:inline-size;container-name:cme}
.cm-e-elenco[hidden]{display:none}
.cm-e-sezione{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:30px 2px 12px;font-size:13px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue)}
.cm-e-sezione .conto-elenco{letter-spacing:0;text-transform:none;font-size:14px}
.cm-e-gruppo{position:relative;margin:0 0 16px;border:1px solid var(--bordo);border-radius:16px;background:var(--pannello);box-shadow:var(--rilievo)}
html[data-tema="scuro"] .cm-e-gruppo{background:var(--pannello-vetro)}
.cm-e-gruppo-testa{position:sticky;top:var(--testata);z-index:3;display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:16px 16px 0 0;background:color-mix(in srgb,var(--pannello) 96%,transparent)}
.cm-e-gruppo.chiuso .cm-e-gruppo-testa{border-radius:16px}
.cm-e-apri{flex:1 1 auto;display:flex;align-items:center;gap:14px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cm-e-apri::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cm-e-apri:focus-visible{outline:none}
.cm-e-apri:focus-visible::after{outline:2px solid var(--accento2);outline-offset:-2px}
.cm-e-sigla{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.cm-e-sigla.piccola{width:28px;height:28px;border-radius:7px;font-size:11px}
.cm-e-chi{display:grid;gap:3px;min-width:0}
.cm-e-chi-riga{display:flex;align-items:center;gap:9px;min-width:0}
.cm-e-nome{font-size:17px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-e-chi > .conto-elenco{font-size:13.5px}
.cm-e-ultima{color:var(--tenue);font-weight:600}
.cm-e-ultima-punto{color:var(--tenue)}
.badge.cm-e-ruolo.agente{border-color:color-mix(in srgb,var(--ic-blu) 45%,transparent);color:var(--ic-blu)}
.badge.cm-e-ruolo.interno{border-color:color-mix(in srgb,var(--accento) 45%,transparent);color:var(--accento-testo)}
.bottone.cm-e-sfoglia{position:relative;z-index:1;flex:none;height:34px;padding:0 14px;border-radius:9px;font-size:13px;font-weight:700}
.cm-e-sfoglia-q{display:none;position:relative;z-index:1}
.cm-e-freccia{flex:none;display:grid;place-items:center;width:30px;height:30px;color:var(--tenue);transform:rotate(180deg);transition:transform .18s ease;pointer-events:none}
.cm-e-gruppo.chiuso .cm-e-freccia{transform:none}
.cm-e-righe{list-style:none;margin:0;padding:4px 14px 14px;display:grid;gap:8px}
.cm-e-righe > li{min-width:0}
.cm-e-altre{display:flex;justify-content:center;padding:0 14px 16px;margin-top:-2px}
.cm-e-altre .bottone{min-height:34px;font-weight:700}
@container cme (max-width:683px){
  .cm-e-gruppo{border-radius:14px}
  .cm-e-gruppo-testa{position:relative;top:auto;gap:10px;padding:12px;border-radius:14px 14px 0 0}
  .cm-e-gruppo.chiuso .cm-e-gruppo-testa{border-radius:14px}
  .cm-e-apri{gap:11px}
  .cm-e-sigla{width:38px;height:38px;font-size:14px}
  .cm-e-nome{font-size:16px}
  .cm-e-chi-riga{flex-wrap:wrap;row-gap:2px}
  .cm-e-chi > .conto-elenco{font-size:12.5px}
  .cm-e-ultima-punto{display:none}
  .cm-e-ultima{display:block;font-size:12.5px}
  .bottone.cm-e-sfoglia{display:none}
  .cm-e-sfoglia-q{display:inline-grid}
  .cm-e-freccia{width:24px}
  .cm-e-righe{padding:2px 8px 10px}
  .cm-e-sezione{margin:24px 2px 10px}
}

/* ---------- la riga (riga B "cartella con la fascia dell'evento") ---------- */
.cm-e-riga.cm-e-b{--fascia:var(--tc);position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:20px;
  padding:16px 16px 16px 26px;border-radius:12px;background-color:var(--pannello2);outline:1px solid var(--bordo-forte);outline-offset:-1px;
  box-shadow:0 3px 10px -4px rgba(0,0,0,.45);
  background-image:radial-gradient(150px 120% at 0 50%,color-mix(in srgb,var(--fascia) 16%,transparent),transparent 70%)}
.cm-e-riga.cm-e-b::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:12px 0 0 12px;
  background:linear-gradient(180deg,var(--fascia),color-mix(in srgb,var(--fascia) 30%,transparent))}
html[data-tema="chiaro"] .cm-e-riga.cm-e-b{box-shadow:0 3px 10px -5px rgba(70,45,20,.35)}
/* la copia appena nata: la luce verde che svanisce in 1,8 s e la pillola "Nuova" */
.cm-e-riga.cm-e-accesa{animation:cm-e-luce 1.8s ease-out both}
@keyframes cm-e-luce{0%{box-shadow:inset 6px 0 0 #1e9e57,0 0 0 3px rgba(30,158,87,.55),0 3px 10px -4px rgba(0,0,0,.45)}100%{box-shadow:inset 0 0 0 transparent,0 0 0 0 rgba(30,158,87,0),0 3px 10px -4px rgba(0,0,0,.45)}}
.cm-e-nuova{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:var(--ic-verde);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}
html[data-tema="scuro"] .cm-e-nuova{color:#04141c}
.cm-e-riga.cm-e-validata .vp-stato{box-shadow:0 0 0 3px var(--successo-velo)}

/* il foglio: A4 intero, inclinato di poco, si raddrizza e sale col mouse e mostra il velo blu "Vedi" */
.cm-e-b .cm-e-foglio{position:relative;display:block;width:92px;height:130px;padding:0;border:0;border-radius:2px;background:var(--cm-carta);
  box-shadow:var(--cm-ombra-piccola);transform:rotate(var(--incl,0deg));transition:transform .16s ease-out,box-shadow .16s ease-out;
  cursor:zoom-in;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cm-e-b .cm-e-foglio img{display:block;width:100%;height:100%;object-fit:contain;border-radius:2px;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.cm-e-foglio img,.cm-p-foglio img,.cm-vis-vicino img{transition:opacity .16s ease-out}
.cm-e-foglio img:not(.pronta),.cm-p-foglio img:not(.pronta),.cm-vis-vicino img:not(.pronta){opacity:0}
.cm-e-allegati{position:absolute;right:-9px;bottom:-7px;z-index:4;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;
  background:rgba(16,18,22,.82);color:#fff;font-size:11px;font-weight:700;line-height:1.3;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.cm-e-velo{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:5px;border-radius:2px;
  background:color-mix(in srgb,var(--ic-blu) 16%,transparent);opacity:0;transition:opacity .16s ease-out;pointer-events:none}
.cm-e-velo .icona-riga{pointer-events:none;background:color-mix(in srgb,var(--ic-blu) 16%,var(--pannello));border-color:var(--ic-blu);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.cm-e-velo b{padding:1px 7px;border-radius:5px;background:var(--pannello);color:var(--ic-blu);font-size:11px;font-weight:800;line-height:16px}
.cm-e-foglio:focus-visible{outline:2px solid var(--accento2);outline-offset:4px}
@media (hover:hover){
  .cm-e-b .cm-e-foglio:hover{transform:translateY(-3px) rotate(0deg);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 18px 28px -12px rgba(0,0,0,.7),0 2px 4px rgba(0,0,0,.35)}
  .cm-e-b .cm-e-foglio:hover .cm-e-velo{opacity:1}
}
.cm-e-b .cm-e-foglio:active{transform:rotate(var(--incl,0deg)) scale(.97)}

/* i dati, in ordine di lettura; le righe vuote non ci sono */
.cm-e-dati{display:grid;gap:6px;min-width:0;align-content:center}
.cm-e-r1{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.cm-e-r1 .cat-codice{margin:0;font-size:13px;font-weight:700}
.cm-e-cliente{margin:0;min-width:0;font-size:17px;font-weight:800;line-height:1.25;color:var(--testo)}
.cm-e-ragsoc{display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;vertical-align:bottom;overflow-wrap:anywhere}
.cm-e-cliente.letto{font-weight:700}
.cm-e-letto-ico{flex:none;margin-right:6px;vertical-align:-2px;color:var(--ic-blu)}
.cm-e-cliente.senza{font-weight:600;color:var(--tenue)}
.cm-e-loc{font-size:13px;font-weight:500;color:var(--tenue);white-space:nowrap}
.cm-e-loc::before{content:"\00b7";margin:0 7px;color:var(--debole)}
.cm-e-evento{display:flex;align-items:center;gap:8px;min-width:0}
.cm-e-evento .tag-categoria{font-size:12px;padding:2px 10px 2px 8px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-e-periodo{flex:none;font-size:12.5px;color:var(--tenue)}
.cm-e-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;font-size:13px;color:var(--tenue);line-height:1.45}
.cm-e-meta > span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;min-width:0}
.cm-e-meta > span + span::before{content:"\00b7";margin:0 8px;color:var(--debole)}
.cm-e-meta .conto-elenco{font-size:inherit;font-weight:inherit;color:inherit}
.cm-e-meta .conto-elenco .conto-num{font-size:1em;color:var(--testo)}
.cm-e-meta svg{flex:none}
.cm-e-meta .m-breve{display:none}
.cm-e-link{display:flex;flex-wrap:wrap;gap:6px 8px}
.cm-e-link a.deal-scheda-cliente{margin:0}
@container cme (max-width:899px){.cm-e-meta > span.m-inviata{flex-basis:100%}.cm-e-meta > span.m-inviata::before{content:none}}

/* i comandi a posti fissi, con il nome sotto */
.cm-e-azioni{display:grid;grid-auto-flow:column;grid-auto-columns:52px;gap:2px;align-items:start;justify-items:center}
.cm-e-az{display:grid;justify-items:center;gap:5px}
.cm-e-az.vuoto{width:38px;height:1px}
.cm-e-az.crea{--ic:var(--ic-verde)}.cm-e-az.consulta{--ic:var(--ic-blu)}.cm-e-az.modifica{--ic:var(--ic-rosso)}.cm-e-az.elimina{--ic:var(--ic-grigio)}
.cm-e-az-nome{font-size:11px;font-weight:700;line-height:1;color:var(--ic);white-space:nowrap}
.cm-e-az .icona-riga.cat-pdf .cat-pdf-sigla{right:-8px}

/* telefono: la riga diventa una scheda, i comandi in fondo a destra senza nome (quadrati da 38 px) */
@container cme (max-width:683px){
  .cm-e-riga.cm-e-b{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"foglio dati" "azioni azioni";align-items:start;gap:10px 14px;
    padding:14px 12px 10px 20px}
  .cm-e-b .cm-e-foglio{grid-area:foglio;width:64px;height:90px;margin-top:2px}
  .cm-e-b .cm-e-dati{grid-area:dati;gap:5px}
  .cm-e-b .cm-e-azioni{grid-area:azioni;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0 -2px 0 -8px;padding-top:10px;border-top:1px solid var(--bordo)}
  .cm-e-b .cm-e-az.vuoto,.cm-e-b .cm-e-az-nome{display:none}
  .cm-e-b .cm-e-cliente{font-size:16px}
  .cm-e-b .cm-e-loc{display:block;margin-top:1px}
  .cm-e-b .cm-e-loc::before{display:none}
  .cm-e-b .m-lungo,.cm-e-b .m-creata,.cm-e-b .m-inviata,.cm-e-b .cm-e-periodo{display:none}
  .cm-e-b .cm-e-meta .m-breve{display:inline}
  .cm-e-b .cm-e-meta{font-size:12.5px}
}

/* ---------- la pila "scrivania" ---------- */
/* isolation: i livelli della pila (Di chi 80-90, frecce 70, fogli in volo 60-70) restano dentro il suo riquadro: sotto il menu
   aperto sull'iPad e sul telefono (10/10/2026, l'utente: "il tasto tutti gli operatori resta visibile anche quando si apre menu") */
.cm-p-tavolo{position:relative;isolation:isolate;margin:0 0 8px;border-radius:22px;overflow:hidden;container-type:inline-size;container-name:cmp;touch-action:pan-y;outline:none}
.cm-p-tavolo[hidden]{display:none}
html[data-tema="chiaro"] .cm-p-tavolo{background:var(--pannello2);box-shadow:inset 0 2px 12px rgba(70,45,20,.12),0 0 0 1px var(--bordo)}
html[data-tema="chiaro"] .cm-p-tavolo::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 42% 42%,rgba(255,255,255,.55),transparent 62%);pointer-events:none}
html[data-tema="scuro"] .cm-p-tavolo{background:radial-gradient(ellipse at 45% 40%,rgba(255,255,255,.06),transparent 60%)}
.cm-p-tavolo:focus-visible{outline:2px solid var(--accento2);outline-offset:-2px}
.cm-p-griglia{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"scena com" "scena cart" "tempo cart";column-gap:26px;row-gap:10px;height:max(520px,calc(100dvh - var(--testata) - 32px));padding:12px 18px 6px 0}
/* "Di chi" sopra il cartellino e la barra del tempo (10/10/2026, l'utente: "quando apro la finestra per filtrare le copie
   commissioni viene nascosta dalla scheda di riepilogo"): avevano tutti z-index 80 e il cartellino, dopo nella pagina, copriva l'elenco */
.cm-p-comandi{grid-area:com;position:relative;z-index:85;display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0;align-self:start;padding-top:2px}
.cm-p-comandi[hidden]{display:none}
.cm-p-comandi .cm-p-dichi{flex:1 1 auto;justify-content:flex-start;min-width:0}
.cm-p-comandi .cm-p-dichi > svg:last-child{margin-left:auto;flex:none;color:var(--tenue)}
.cm-p-dichi-et{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.bottone.vuoto.cm-p-dichi{gap:10px;height:42px;padding:0 12px 0 7px;border:2px solid var(--bordo-forte);border-radius:12px;background:var(--campo-attivo);
  font-size:14.5px;font-weight:700}
.cm-p-dichi-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-p-tutti{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--accento-velo);color:var(--accento-testo)}
.bottone.vuoto.piccolo.cm-p-torna{margin-left:auto;min-height:36px;padding:0 12px;border-color:var(--bordo-forte);font-weight:700}
.cm-p-torna[hidden]{display:none}
.cm-p-torna-breve{display:none}
/* l'elenco "Di chi" */
.cm-p-chi{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:90;display:grid;gap:2px;max-height:min(420px,60vh);overflow:auto;padding:6px;
  border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello);box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
.cm-p-chi-voce{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:0;border-radius:9px;background:none;color:var(--testo);
  font:inherit;text-align:left;cursor:pointer}
.cm-p-chi-voce:hover,.cm-p-chi-voce:focus-visible{background:var(--pannello2);outline:none}
.cm-p-chi-voce.scelta{background:var(--accento-velo);box-shadow:inset 0 0 0 1.5px var(--accento)}
.cm-p-chi-testo{display:grid;gap:1px;min-width:0}
.cm-p-chi-nome{display:flex;align-items:center;gap:8px;min-width:0}
.cm-p-chi-nome b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-p-chi .conto-elenco{font-size:12.5px}
.cm-p-scena{grid-area:scena;position:relative;min-height:0;margin:0 0 -60px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70px);mask-image:linear-gradient(90deg,transparent 0,#000 70px)}
.cm-p-fogli{position:absolute;inset:0;transition:transform .2s ease-out;transform-style:preserve-3d}
.cm-p-tempo-box{grid-area:tempo;position:relative;z-index:80;padding:0 6px 0 20%}
.cm-p-tempo-box[hidden]{display:none}
.cm-p-cart-box{grid-area:cart;align-self:center;position:relative;z-index:80;min-width:0}
.cm-p-luce{position:absolute;width:1000px;height:760px;margin:-380px 0 0 -500px;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 46%,rgba(255,255,255,.075),transparent 70%),radial-gradient(ellipse 26% 9% at 50% 86%,rgba(0,0,0,.55),transparent 70%)}
html[data-tema="chiaro"] .cm-p-luce{background:radial-gradient(ellipse 26% 9% at 50% 86%,rgba(70,45,20,.22),transparent 70%)}

/* i fogli: carta bianca vera, l'ombra e' uno strato di cui si anima solo l'opacita' */
.cm-p-foglio{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:2px;background:var(--cm-carta);transform-origin:50% 0;
  cursor:grab;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit;touch-action:pan-y;user-select:none}
.cm-p-foglio:active{cursor:grabbing}
.cm-p-foglio img,.cm-p-foglio .cm-p-tela{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:2px;pointer-events:none;user-select:none;-webkit-user-drag:none}
.cm-p-ombra{position:absolute;inset:0;z-index:-1;border-radius:2px;box-shadow:var(--cm-ombra);opacity:.75;pointer-events:none}
.cm-p-velo{position:absolute;inset:0;z-index:5;border-radius:2px;background:#000;opacity:var(--velo,0);pointer-events:none}
.cm-p-foglio:focus-visible{outline:3px solid var(--accento2);outline-offset:6px}
.cm-p-linguetta{position:absolute;top:-18px;z-index:4;height:18px;margin:0;padding:0 6px;border:0;border-radius:4px 4px 0 0;background:var(--accento);color:#fff;
  font:inherit;font-size:10px;font-weight:800;line-height:19px;letter-spacing:.02em;white-space:nowrap;
  box-shadow:inset 0 -4px 5px -3px rgba(0,0,0,.35),0 -1px 3px rgba(0,0,0,.25)}
button.cm-p-linguetta{cursor:pointer}
.cm-p-linguetta::before{content:"";position:absolute;left:-6px;right:-6px;top:-10px;bottom:0;min-height:38px}
.cm-p-linguetta::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:var(--velo,0);pointer-events:none}
.cm-p-linguetta:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.cm-p-timbro{position:absolute;left:76.2%;top:94.6%;z-index:3;width:31.4%;height:6.6%;display:grid;place-content:center;justify-items:center;
  border:2px solid #1e9e57;border-radius:5px;color:#1e9e57;transform:translate(-50%,-50%) rotate(-12deg);opacity:.88;mix-blend-mode:multiply;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),inset 0 0 0 3px rgba(30,158,87,.85)}
.cm-p-timbro b{font-size:calc(var(--cm-w,400px) * .05);font-weight:800;letter-spacing:.16em;line-height:1}
.cm-p-timbro small{margin-top:2px;font-size:calc(var(--cm-w,400px) * .017);font-weight:700;letter-spacing:.06em;line-height:1}
.cm-p-foglio.nitido .cm-p-timbro{display:none}
.cm-p-foglio.sinistra{cursor:pointer}
.cm-p-foglio.in-volo{pointer-events:none}
.cm-p-spessore{position:absolute;display:block;border-radius:2px;background:var(--cm-carta);transform-origin:50% 0;pointer-events:none}
.cm-p-freccia.icona-riga{position:absolute;z-index:70;width:48px;height:48px;border-radius:10px;background:color-mix(in srgb,var(--pannello) 82%,transparent);
  border-color:var(--bordo-forte);color:var(--testo)}
.cm-p-freccia.icona-riga svg{width:22px;height:22px}
.cm-p-freccia.icona-riga[hidden]{display:none}
/* agli estremi le frecce sono spente: qui spento vuol dire "fine", non "non hai il permesso" */
.cm-p-freccia.icona-riga:disabled{opacity:.4;pointer-events:none}

/* il cartellino (vetro nel tema scuro) */
.cm-p-cartellino{display:grid;gap:12px;align-content:start;min-width:0;padding:18px 18px 16px;border:1px solid var(--bordo);border-radius:16px;
  background:var(--pannello);box-shadow:var(--rilievo)}
html[data-tema="scuro"] .cm-p-cartellino{background:var(--pannello-vetro);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px #000}
.cm-p-c-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;border-bottom:2px solid var(--accento);margin:-4px 0 2px}
.cm-p-c-numero{display:inline-block;padding:4px 11px 3px;border-radius:6px 6px 0 0;background:var(--accento);color:#fff;font-size:13px;font-weight:800;letter-spacing:.03em}
.cm-p-c-testa .conto-elenco{padding-bottom:5px;font-size:14px}
.cm-p-cartellino .cm-e-cliente{font-size:22px;line-height:1.2}
.cm-p-cartellino .cm-e-loc{display:block;margin-top:3px;font-size:14px}
.cm-p-cartellino .cm-e-loc::before{display:none}
.cm-p-c-pillole{display:flex;flex-wrap:wrap;gap:6px}
.cm-p-c-pillole .vp-stato{font-size:11px;padding:3px 11px}
.cm-p-c-autore{display:flex;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.cm-p-c-autore-dati{display:grid;gap:2px;min-width:0}
.cm-p-c-autore-nome{display:flex;align-items:center;gap:8px;min-width:0}
.cm-p-c-autore-nome b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-p-c-autore small{color:var(--tenue);font-size:12.5px;line-height:1.35}
.cm-p-c-righe{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--tenue)}
.cm-p-c-righe li{display:flex;align-items:center;gap:8px;min-width:0}
.cm-p-c-righe svg{flex:none}
.cm-p-c-righe .conto-elenco{font-size:13.5px}
.cm-p-c-righe .conto-elenco .conto-num{font-size:1.15em}
.cm-p-c-inviata .m-inviata{display:inline-flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-p-c-pulsanti{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cm-p-c-pulsanti .bottone{height:42px;padding:0 16px;border-radius:10px;font-size:14.5px;font-weight:700}
.cm-p-c-pulsanti .icona-riga{width:42px;height:42px;border-radius:8px}
.cm-p-c-pulsanti .icona-riga svg{width:19px;height:19px}
.cm-p-c-nav{display:none;grid-template-columns:1fr 1fr;gap:8px}
.cm-p-c-nav .bottone{justify-content:center;height:44px;border-color:var(--bordo-forte);font-weight:700}
html[data-tema="chiaro"] .cm-p-tavolo .cm-p-cartellino{background:var(--pannello)}

/* la barra del tempo: un canvas con le tacche (rosse le NON VALIDATE), il cursore e l'etichetta mentre si trascina */
.cm-p-tempo{position:relative;height:56px;padding-top:12px;outline:none;cursor:pointer;touch-action:none;
  --cm-tacca:var(--tenue);--cm-tacca-no:var(--accento-testo);--cm-binario:var(--bordo-forte)}
.cm-p-tempo canvas{display:block}
.cm-p-cursore{position:absolute;top:17px;width:14px;height:24px;margin-left:-7px;border-radius:999px;background:var(--accento);pointer-events:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accento) 28%,transparent),0 4px 10px rgba(0,0,0,.45)}
.cm-p-cursore b{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:6px;background:var(--accento);
  color:#fff;font-size:11.5px;font-weight:800;line-height:17px;white-space:nowrap}
.cm-p-tempo:focus-visible .cm-p-cursore{outline:2px solid var(--accento2);outline-offset:3px}
.cm-p-tempo-etichetta{position:absolute;bottom:calc(100% + 8px);z-index:3;display:flex;align-items:center;gap:10px;max-width:280px;padding:7px 12px 7px 7px;
  border-radius:10px;background:rgba(14,15,18,.92);color:#f3efe6;font-size:12.5px;line-height:1.3;transform:translateX(-50%);pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.cm-p-tempo-etichetta[hidden]{display:none}
.cm-p-tempo-etichetta img{flex:none;width:60px;height:85px;object-fit:contain;background:var(--cm-carta);border-radius:2px}
.cm-p-tempo-etichetta span{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* la pila vuota o senza risultati: un foglio tratteggiato e accanto il testo */
.cm-p-vuoto{position:absolute;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;gap:28px;padding:24px}
.cm-p-vuoto[hidden]{display:none}
.cm-p-vuoto-foglio{flex:none;width:200px;aspect-ratio:210/297;border:2px dashed var(--bordo-forte);border-radius:3px;transform:rotate(-2deg);background:color-mix(in srgb,var(--cm-carta) 6%,transparent)}
.cm-p-vuoto-testo{max-width:360px;background:var(--pannello)}
.cm-p-vuoto-testo > b{font-size:16px}

/* il suggerimento della prima volta e l'ombra della mano */
.cm-p-suggerimento{position:absolute;left:50%;bottom:72px;z-index:40;display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border-radius:999px;
  background:rgba(14,15,18,.88);color:#f3efe6;font-size:13.5px;font-weight:600;white-space:nowrap;transform:translateX(-50%);pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.1);animation:cm-p-via .4s ease-in 6.1s forwards}
@keyframes cm-p-via{to{opacity:0}}
.cm-p-suggerimento i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accento);color:#fff}
.cm-p-mano{position:absolute;z-index:41;width:84px;height:84px;color:#fff;fill:rgba(255,255,255,.18);stroke-width:1.4;filter:drop-shadow(0 0 1px #000) drop-shadow(0 8px 14px rgba(0,0,0,.6));pointer-events:none}
html[data-tema="chiaro"] .cm-p-mano{color:#2b2f36;filter:drop-shadow(0 6px 10px rgba(70,45,20,.35))}

/* iPad verticale e iPad con il menu aperto: il cartellino sotto, a tutta larghezza */
@container cmp (max-width:979px){
  .cm-p-griglia{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"com" "scena" "tempo" "cart";height:auto;padding:12px 18px 18px 0}
  .cm-p-comandi{padding:0 0 0 18px}
  .cm-p-comandi .cm-p-dichi{flex:0 1 auto}
  .cm-p-chi{left:18px;right:auto;width:min(420px,calc(100% - 18px))}
  .cm-p-scena{height:min(950px,calc(100dvh - var(--testata) - 60px))}
  .cm-p-tempo-box{padding:0 18px 6px 18%}
  .cm-p-cart-box{padding-left:18px}
}
/* telefono: la pila quasi a tutta larghezza, la striscia delle gia' sfogliate, niente frecce sul tavolo (sono nel
   cartellino), cartellino compatto */
@container cmp (max-width:683px){
  .cm-p-griglia{padding:8px 0 14px}
  .cm-p-comandi{padding:0 12px;flex-wrap:nowrap}
  .cm-p-comandi .cm-p-dichi{flex:1 1 auto;min-width:0}
  .cm-p-chi{left:12px;right:12px;width:auto}
  .cm-p-dichi-et{display:none}
  .bottone.vuoto.cm-p-dichi{height:40px;font-size:14px}
  .bottone.vuoto.piccolo.cm-p-torna{padding:0 10px;font-size:12px}
  .cm-p-torna-lungo{display:none}
  .cm-p-torna-breve{display:inline}
  .cm-p-scena{height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px);mask-image:linear-gradient(90deg,transparent 0,#000 30px)}
  .cm-p-freccia.icona-riga{display:none}
  .cm-p-tempo-box{padding:0 16px 4px}
  .cm-p-cart-box{padding:0 12px}
  .cm-p-cartellino{gap:10px;padding:14px 14px 12px}
  .cm-p-cartellino .cm-e-cliente{font-size:19px}
  .cm-p-c-autore{padding:8px 0}
  .cm-p-c-nav{display:grid}
  .cm-p-linguetta{top:-15px;height:15px;padding:0 4px;font-size:8.5px;line-height:16px;letter-spacing:0}
  .cm-p-vuoto{flex-direction:column;gap:16px}
  .cm-p-vuoto-foglio{width:120px}
}

/* ---------- il visore in sola lettura ---------- */
html.cm-vis-aperta,html.cm-vis-aperta body{overflow:hidden;overscroll-behavior:none}
@supports (-webkit-touch-callout:none){html.cm-vis-aperta{overflow:visible}dialog.cm-vis{overscroll-behavior:contain}}
.qs-finestra.cm-vis{grid-template-rows:auto minmax(0,1fr) auto}
.cm-vis-barra{flex-wrap:nowrap;gap:10px;min-height:66px}
.cm-vis-barra .qs-chiudi{order:0;flex:none;height:40px;padding:0 12px;border:1px solid var(--bordo-forte);border-radius:10px;font-weight:700}
.cm-vis-titolo{flex:1 1 auto;display:grid;gap:5px;min-width:0}
.cm-vis-nome{font-size:16.5px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-vis-num{color:var(--accento-testo)}
.cm-vis-r2{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.cm-vis-r2 > *{flex:none}
.cm-vis-r2 .vp-stato{font-size:10px}
.cm-vis-r2 .cm-stato{font-size:11px;padding:1px 8px}
.cm-vis-sola{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;border:1px solid var(--bordo-forte);background:var(--pannello2);
  color:var(--tenue);font-size:11px;font-weight:700;line-height:1.5}
.cm-vis-r2 a.deal-scheda-cliente{margin:0;padding:2px 9px 2px 7px;font-size:11px}
.cm-vis-r2 > .cm-vis-chi{flex:0 1 auto;min-width:0;margin-left:4px;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--tenue)}
.cm-vis-attesa{flex:none;width:18px;height:18px;border:2px solid color-mix(in srgb,var(--accento) 25%,transparent);border-top-color:var(--accento);border-radius:50%;opacity:0;transition:opacity .15s}
.cm-vis-attesa.gira{opacity:1;animation:gira .7s linear infinite}
.cm-vis-nav{flex:none;display:flex;align-items:center;gap:6px;padding:0 8px;border-left:1px solid var(--bordo);border-right:1px solid var(--bordo)}
.cm-vis-nav .icona-riga{width:38px;height:38px}
.cm-vis-nav .icona-riga:disabled{opacity:.4}
.cm-vis-pos .conto-elenco{display:inline-block;min-width:62px;font-size:14px;text-align:center;white-space:nowrap}
.cm-vis-azioni{flex:none;display:flex;align-items:center;gap:8px}
.cm-vis-azioni .bottone{height:40px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:700}
.cm-vis-azioni .bottone.vuoto{border-color:var(--bordo-forte)}
.cm-vis-azioni .icona-riga{width:40px;height:40px;border-radius:8px}

/* il palco: fondo scuro come il tavolo della validazione, la luce dietro il foglio */
.cm-vis-palco{position:relative;min-height:0;overflow:hidden;touch-action:none;background:radial-gradient(ellipse 55% 70% at 50% 44%,#272b32,#0b0c0e 78%)}
html[data-tema="chiaro"] .cm-vis-palco{background:radial-gradient(ellipse 55% 70% at 50% 44%,#f3eee3,#d4ccbb 85%)}
.cm-vis-carta{position:absolute;transform-origin:0 0;background:var(--cm-carta);outline:none;will-change:transform;
  box-shadow:0 36px 70px -24px rgba(0,0,0,.85),0 6px 14px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.12)}
html[data-tema="chiaro"] .cm-vis-carta{box-shadow:0 30px 60px -26px rgba(70,45,20,.55),0 4px 10px rgba(70,45,20,.2),0 0 0 1px rgba(0,0,0,.08)}
.cm-vis-carta:focus-visible{outline:3px solid var(--accento2);outline-offset:6px}
.cm-vis-carta > img,.cm-vis-carta > canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.cm-vis-carta.nitida > .cm-vis-figurina{opacity:0}
.cm-vis-palco.zoomato .cm-vis-vicino{opacity:0}
.cm-vis-palco.zoomato{cursor:grab}
/* le copie vicine: si intravedono ai lati, piu' piccole e in ombra */
.cm-vis-vicino{position:absolute;background:var(--cm-carta);opacity:.2;pointer-events:none;transition:opacity .2s;box-shadow:0 20px 40px -18px rgba(0,0,0,.9)}
.cm-vis-vicino[hidden]{display:none}
.cm-vis-vicino img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cm-vis-vicino.prima{transform:rotate(-2.5deg)}
.cm-vis-vicino.dopo{transform:rotate(2deg)}
.cm-vis-vicino-n{position:absolute;top:-18px;right:14%;height:18px;padding:0 7px;border-radius:4px 4px 0 0;background:var(--accento);color:#fff;font-size:10.5px;font-weight:800;line-height:19px}
.cm-v-zoom.cm-vis-zoom{bottom:20px}
.cm-v-zoom .qs-b.acceso{background:rgba(255,255,255,.16);color:#fff}
/* il timbro VALIDATO che batte dopo la validazione, finche' il foglio nuovo (col timbro vero) non arriva */
.cm-vis-timbro{position:absolute;left:76.2%;top:94.6%;z-index:3;width:31.4%;height:6.6%;display:grid;place-content:center;justify-items:center;
  border:2px solid #1e9e57;border-radius:5px;color:#1e9e57;transform:translate(-50%,-50%) rotate(-12deg);opacity:.9;mix-blend-mode:multiply;pointer-events:none}
.cm-vis-timbro b{font-size:1.4em;font-weight:800;letter-spacing:.16em;line-height:1}
.cm-vis-timbro small{margin-top:2px;font-size:.55em;font-weight:700;letter-spacing:.06em;line-height:1}
.cm-vis-errore{position:absolute;left:50%;top:50%;z-index:5;display:grid;justify-items:center;gap:12px;max-width:320px;padding:20px 22px;border-radius:14px;
  background:var(--pannello);color:var(--testo);text-align:center;transform:translate(-50%,-50%);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cm-vis-errore[hidden]{display:none}
.cm-vis-errore p{margin:0;font-weight:700}
.cm-vis-errore-azioni{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cm-vis-giu{display:none}
@media (max-width:940px){
  .cm-vis-barra .qs-chiudi{order:0}
  .cm-vis-r2 > .cm-vis-chi{display:none}
}
/* telefono: il titolo su una riga in alto; la navigazione e i quadrati in basso, sopra l'area sicura */
@media (max-width:683px){
  .cm-vis-barra{min-height:56px;gap:8px}
  .cm-vis-barra .qs-chiudi{padding:0 10px}
  .cm-vis-r2,.cm-vis-nav,.cm-vis-azioni{display:none}
  .cm-vis-nome{font-size:15px}
  .cm-vis-zoom{display:none}
  .cm-vis-giu{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:8px calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
    background:var(--pannello);border-top:1px solid var(--bordo)}
  .cm-vis-pnav{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--bordo-forte);border-radius:999px;background:var(--pannello2)}
  .cm-vis-pn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--testo)}
  .cm-vis-pn:disabled{opacity:.35}
  .cm-vis-pnav .conto-elenco{font-size:13px;padding:0 2px;min-width:0}
  .cm-vis-quadrati{display:flex;gap:6px}
  .cm-vis-quadrati .icona-riga{width:38px;height:38px}
}
@media (max-width:359px){.cm-vis-quadrati .cm-vis-invia{display:none}}
@media (prefers-reduced-motion:reduce){
  .cm-e-riga.cm-e-accesa{animation:none;box-shadow:inset 6px 0 0 #1e9e57}
  .cm-p-fogli{transition:none}
  .cm-p-suggerimento{animation:none}
}

/* =====================================================================
   COPIA COMMISSIONI - IL CLIENTE SCRITTO A MANO (10/10/2026, proposta A "righe a strisce" con la fila di pillole dei
   campi della C, scelte dall'utente). js/commissioni.js e js/commissione-foglio.js. Prefisso cdf- ("cliente dal foglio":
   cf- e' gia' dei filtri del catalogo).
   - Dall'agente: la tessera "Dal foglio" (la prima di quattro; sul telefono 2 x 2), il ritaglio del riquadro con il
     pulsante blu, il cartellino letto (la striscia della scrittura solo sui campi da controllare e non letti).
   - In validazione: il blocco "Scritto a mano" (la striscia sopra, la casella sotto, le pillole dei campi in testa), la
     luce BLU sulla riga del foglio grande, i clienti che somigliano con la parola sottolineata e l'agente del cliente, il
     cassetto "Nuova azienda" sopra le tessere (sul telefono a tutto schermo).
   - Sul foglio: la matita VERDE dei campi stampati (rosso solo per eliminare, l'utente il 10/10/2026) e il suo riquadro.
   Ambra = da controllare; blu = corretto da chi valida; l'inchiostro della penna #1d3fbf; la carta resta bianca anche nel
   tema scuro. Colori dai gettoni dei due temi ("nero e rosso" e "carta calda").
   ===================================================================== */
:root{--cdf-ambra:#e4a11b;--cdf-ambra-testo:#a66e14;--cdf-inchiostro:#1d3fbf;
  --cdf-carta-ombra:0 1px 2px rgba(0,0,0,.18),0 10px 24px -14px rgba(0,0,0,.55)}
html[data-tema="scuro"]{--cdf-ambra-testo:#f2c14e;--cdf-inchiostro:#9db4ff}

/* ---------- comuni ---------- */
.cm-strade.quattro{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.cm-strade.quattro{grid-template-columns:repeat(2,1fr)}}
.cm-strada[data-strada="foglio"] .cm-strada-icona{color:var(--cdf-inchiostro)}
.cm-strada[data-strada="foglio"].scelta .cm-strada-icona{background:var(--accento);color:#fff}
.cdf-carta{position:relative;display:block;min-width:0;max-width:100%;margin:0;overflow:hidden;border-radius:6px;background:#fff;box-shadow:var(--cdf-carta-ombra)}
.cdf-carta img{display:block;width:100%;height:auto}
.cdf-titoletto{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.cdf-titoletto::after{content:"";flex:1 1 auto;height:1px;background:var(--bordo)}
.cdf-titoletto svg{color:var(--ic-blu)}
.cdf-pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border:1px solid var(--bordo-forte);border-radius:999px;
  background:var(--pannello);color:var(--tenue);font-size:11.5px;font-weight:700;white-space:nowrap;line-height:1}
.cdf-pill svg{flex:none}
.cdf-pill.dubbio{border-color:color-mix(in srgb,var(--cdf-ambra) 70%,transparent);background:color-mix(in srgb,var(--cdf-ambra) 14%,transparent);color:var(--cdf-ambra-testo)}
.cdf-pill.nonletto{border-style:dashed;color:var(--tenue)}
.cdf-pill.corretto{border-color:color-mix(in srgb,var(--accento2) 55%,transparent);background:color-mix(in srgb,var(--accento2) 14%,transparent);color:var(--ic-blu)}
.cdf-pill.mano{border-color:color-mix(in srgb,var(--cdf-inchiostro) 45%,transparent);background:color-mix(in srgb,var(--cdf-inchiostro) 10%,transparent);color:var(--cdf-inchiostro)}
.cdf-pill.biglietto{color:var(--testo)}
.cdf-oforse{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:12px;color:var(--tenue)}
.cdf-oforse-b{height:30px;padding:0 11px;border:1px solid var(--bordo-forte);border-radius:999px;background:var(--pannello);color:var(--testo);
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;touch-action:manipulation}
.cdf-oforse-b.scelta{border-color:var(--cdf-ambra);background:color-mix(in srgb,var(--cdf-ambra) 18%,transparent)}
/* la parola che combacia, sottolineata; "scritto GONIK"; l'agente del cliente */
.cdf-combacia{padding:0 2px;border-radius:3px;background:color-mix(in srgb,var(--accento2) 20%,transparent);text-decoration:underline;
  text-decoration-color:var(--accento2);text-decoration-thickness:2px;text-underline-offset:3px}
.cdf-scritto{font-size:11.5px;color:var(--cdf-ambra-testo);font-weight:600}
.cdf-agente{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--tenue);font-weight:600}
.cdf-agente svg{flex:none}
.cm-motivo.forte{background:color-mix(in srgb,var(--successo) 16%,transparent);border-color:var(--successo-bordo)}
/* le caselle (la X la gestisce js/app.js) */
.cdf-casella{position:relative;display:flex;align-items:center;min-width:0;border:1px solid var(--bordo-forte);border-radius:10px;background:var(--campo-attivo)}
.cdf-casella input,.cdf-casella select{flex:1;min-width:0;height:42px;padding:0 42px 0 12px;border:0;background:transparent;color:var(--testo);font:inherit;font-size:16px;outline:none}
.cdf-casella select{padding-right:34px;-webkit-appearance:none;appearance:none;cursor:pointer}
.cdf-casella input::placeholder{color:var(--debole);font-style:italic}
.cdf-casella input:disabled{opacity:.45}
.cdf-casella:focus-within{border-color:var(--accento2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accento2) 28%,transparent)}
.cdf-casella.dubbio{border-color:color-mix(in srgb,var(--cdf-ambra) 75%,transparent);box-shadow:inset 3px 0 0 var(--cdf-ambra)}
.cdf-casella.vuota{border-style:dashed;border-color:color-mix(in srgb,var(--cdf-ambra) 75%,transparent)}
.cdf-casella.select::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--tenue);border-bottom:2px solid var(--tenue);transform:rotate(45deg);pointer-events:none}
.cdf-casella .cerca-x{right:3px;width:36px;height:36px}
.cdf-casella input:placeholder-shown ~ .cerca-x,.cdf-casella input:disabled ~ .cerca-x{display:none}

/* ---------- dall'agente: prima di leggere ---------- */
.cdf-prima{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:center;padding:14px;border:1px solid var(--bordo);border-radius:14px;background:var(--pannello2)}
.cdf-prima-testo{display:grid;gap:10px;align-content:center;justify-items:start}
.cdf-prima-testo .bottone{min-height:44px;padding:0 18px;font-size:14.5px;font-weight:700}
.cdf-ritaglio{max-width:420px;min-height:70px}
.cdf-ritaglio figcaption{position:absolute;right:8px;top:6px;padding:2px 8px;border-radius:999px;background:rgba(16,34,43,.78);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.04em}
@media (max-width:560px){
  .cdf-prima{grid-template-columns:minmax(0,1fr);padding:10px}
  .cdf-prima-testo .bottone{width:100%;justify-content:center}
}
/* la lettura: il ritaglio orizzontale come figura, con la luce che scorre */
.cm-lettura.t-foglio .am-lettura-figura{width:260px;height:162px;background:#fff;box-shadow:var(--cdf-carta-ombra)}
.cm-lettura.t-foglio .am-lettura-figura img{object-fit:contain}
.cm-lettura.t-foglio.fatto .am-lettura-figura{width:52px;height:52px;background:none;box-shadow:none}
@media (max-width:520px){.cm-lettura.t-foglio .am-lettura-figura{width:220px;height:137px}}

/* ---------- dall'agente: il risultato ---------- */
.cdf-risultato{display:grid;gap:12px}
.cdf-cambiato{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.cdf-cambiato .bottone{margin-left:auto}
.cdf-letto{display:grid;gap:0;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2);overflow:hidden}
.cdf-letto-testa{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--bordo);font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue)}
.cdf-letto-testa svg{color:var(--cdf-inchiostro)}
.cdf-letto-testa .bottone{margin-left:auto;text-transform:none;letter-spacing:0}
.cdf-voci{display:grid;margin:0}
.cdf-voce{display:grid;grid-template-columns:108px minmax(0,1fr);gap:4px 12px;align-items:center;padding:6px 12px;border-top:1px solid var(--bordo)}
.cdf-voce:first-child{border-top:0}
.cdf-voce dt{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue)}
.cdf-voce dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;min-width:0;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.cdf-voce.dubbio{background:color-mix(in srgb,var(--cdf-ambra) 9%,transparent);box-shadow:inset 3px 0 0 var(--cdf-ambra)}
.cdf-voce.nonletto dd > i{font-style:italic;font-weight:500;color:var(--debole)}
.cdf-voce .cdf-carta{flex:1 1 100%;max-width:330px;border-radius:4px}
.cdf-voce.grande dd{font-size:16.5px;font-weight:800;letter-spacing:.02em}
.cdf-tre{display:block;margin:0;padding:10px 12px;border:1px dashed var(--bordo-forte);border-radius:10px;font-size:12.5px;line-height:1.5;color:var(--tenue)}
.cdf-tre b{color:var(--testo)}
.cdf-simili{display:grid;gap:8px}
.cdf-simili:empty{display:none}
@media (max-width:560px){
  .cdf-voce{grid-template-columns:76px minmax(0,1fr);gap:3px 10px}
  .cdf-voce .cdf-carta{max-width:none}
}

/* ---------- in validazione: il blocco "Scritto a mano sul foglio" ---------- */
.cdf-blocco{display:grid;gap:0;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2);overflow:hidden}
.cdf-blocco-testa{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:9px 10px 9px 12px;border-bottom:1px solid var(--bordo)}
.cdf-blocco-testa > svg{color:var(--cdf-inchiostro)}
.cdf-blocco-testa b{font-size:13px}
.cdf-blocco-testa small{font-size:11.5px;color:var(--tenue)}
.cdf-blocco-testa .bottone{margin-left:auto}
/* la fila delle pillole dei campi (proposta C): un tocco porta al campo */
.cdf-fila{display:flex;flex-wrap:wrap;gap:5px;padding:9px 12px;border-bottom:1px solid var(--bordo)}
.cdf-fila:empty{display:none}
.cdf-chip{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px 0 6px;border:1px solid var(--bordo-forte);border-radius:999px;background:var(--pannello);
  color:var(--testo);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;touch-action:manipulation}
.cdf-chip i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--successo);color:#fff;font-style:normal;font-size:11px;font-weight:800}
.cdf-chip i svg{width:11px;height:11px;stroke-width:2.6}
.cdf-chip.dubbio{border-color:color-mix(in srgb,var(--cdf-ambra) 70%,transparent)}
.cdf-chip.dubbio i{background:var(--cdf-ambra);color:#1a1204}
.cdf-chip.nonletto i{background:transparent;border:1.5px dashed var(--debole);color:var(--debole)}
.cdf-chip.corretto i{background:var(--accento2)}
.cdf-chip.vuoto i{background:transparent;border:1.5px solid var(--debole)}
/* la lettura in corso, dentro la tessera: la barra rossa sottile e i secondi */
.cdf-attesa{display:grid;gap:5px;padding:8px 12px;border-bottom:1px solid var(--bordo)}
.cdf-attesa .cm-lettura-barra{height:4px;margin:0}
.cdf-attesa-riga{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--tenue);font-variant-numeric:tabular-nums}
.cdf-attesa-riga b{color:var(--testo)}
.cdf-avviso{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 12px;font-size:13px}
.cdf-avviso > svg{flex:none}
.cdf-avviso .bottone{margin-left:auto}
.cdf-avviso-scelta{margin:0;font-size:13px}
/* una riga per campo: l'etichetta, la striscia della scrittura, la casella (CAP e PAESE sulla stessa riga) */
.cdf-riga{display:grid;gap:10px;padding:9px 12px 10px;border-top:1px solid var(--bordo)}
.cdf-blocco-testa + .cdf-riga,.cdf-fila + .cdf-riga{border-top:0}
.cdf-riga.due{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}
.cdf-cella{display:grid;gap:5px;min-width:0;margin-left:-12px;padding:4px 0 4px 9px;border-left:3px solid transparent;cursor:pointer}
.cdf-riga.due .cdf-cella + .cdf-cella{margin-left:-6px;padding-left:3px}
.cdf-cella.dubbio,.cdf-cella.vuota{border-left-color:var(--cdf-ambra)}
.cdf-cella.acceso{border-left-color:var(--accento2);background:color-mix(in srgb,var(--accento2) 7%,transparent)}
.cdf-cella.acceso .cdf-carta{box-shadow:0 0 0 2px var(--accento2)}
.cdf-riga-et{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:20px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
.cdf-riga-segni{display:inline-flex;margin-left:auto}
.cdf-riga-segni .cdf-pill{height:20px;font-size:11px;letter-spacing:0;text-transform:none}
.cdf-cella .cdf-carta{min-height:24px;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.cdf-blocco.cdf-legge .cdf-carta{opacity:.85}
.cdf-riga-sotto{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:var(--tenue)}
.cdf-verde{display:inline-flex;align-items:center;gap:5px;color:var(--successo);font-weight:700}
/* scelto il cliente: una riga sola */
.cdf-ridotto{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px dashed var(--bordo-forte);border-radius:10px;font-size:13px;color:var(--tenue)}
.cdf-ridotto > svg{flex:none;color:var(--cdf-inchiostro)}
.cdf-ridotto > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdf-ridotto .cm-link{margin-left:auto;flex:none}
/* la luce BLU sul foglio grande: la riga del campo toccato (quella degli articoli resta verde) */
.cdf-luce{position:absolute;border-radius:3px;background:rgba(59,123,255,.16);box-shadow:inset 0 0 0 2px rgba(37,99,235,.9),0 0 18px rgba(59,123,255,.5);pointer-events:none;animation:cm-v-luce .45s ease-out both}
/* la nuova azienda pronta: la scheda verde in cima, con la matita verde "Modifica i dati" */
.cdf-li-nuova{display:flex;align-items:center;gap:8px}
.cdf-li-nuova > .cm-cliente{flex:1;min-width:0}
.cm-v-nuova.cdf-pronta{border-style:solid;border-color:var(--successo-bordo);background:var(--successo-velo)}
.cdf-modifica-nuova{flex:none}

/* ---------- il cassetto "Nuova azienda": sopra le tre tessere (computer e iPad), a tutto schermo sul telefono ---------- */
.cm-v-corpo > .cm-v-foglio{grid-column:1;grid-row:1}
.cm-v-corpo > .cm-v-lato{grid-column:2;grid-row:1}
.cm-v-corpo > .cdf-cassetto{grid-column:2;grid-row:1;z-index:4}
.cm-v-corpo.cdf-con-cassetto > .cm-v-lato{visibility:hidden}
.cdf-cassetto{display:flex;flex-direction:column;min-height:0;border:1px solid var(--bordo-forte);border-top:3px solid #1e9e57;border-radius:12px;
  background:var(--pannello);box-shadow:-24px 0 48px -24px rgba(0,0,0,.65);overflow:hidden}
.cdf-cassetto-testa{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--bordo)}
.cdf-tondo{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:var(--successo-velo);color:var(--successo);border:1px solid var(--successo-bordo)}
.cdf-cassetto-testa > div{flex:1;min-width:0;display:grid;gap:1px}
.cdf-cassetto-testa b{font-size:16px;font-weight:800}
.cdf-cassetto-testa small{font-size:12px;color:var(--tenue)}
.cdf-cassetto-corpo{flex:1;min-height:0;overflow:auto;padding:14px;display:grid;grid-auto-rows:max-content;align-content:start;gap:14px;overscroll-behavior:contain}
.cdf-fissa{position:sticky;top:-14px;z-index:4;display:grid;gap:4px;margin:-14px -14px 0;padding:10px 14px;border-bottom:1px solid var(--bordo);
  background:color-mix(in srgb,var(--pannello) 96%,transparent);backdrop-filter:blur(8px)}
.cdf-fissa > small{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cdf-inchiostro)}
.cdf-fissa .cdf-carta{border-radius:4px}
.cdf-sez{display:grid;gap:10px;padding:12px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello2)}
.cdf-sez > h4{display:flex;align-items:center;gap:8px;margin:0;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--testo)}
.cdf-sez > h4 svg{color:var(--tenue)}
.cdf-griglia{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.cdf-griglia .s1{grid-column:span 1}
.cdf-griglia .s2{grid-column:span 2}
.cdf-griglia .s3{grid-column:span 3}
.cdf-griglia .s4{grid-column:span 4}
.cdf-griglia .s6{grid-column:1/-1}
.cdf-campo{display:grid;gap:5px;min-width:0;align-content:start}
.cdf-campo-et{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdf-origine{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:var(--tenue)}
.cdf-origine .cm-link{font-size:12px;font-weight:700}
.cdf-sulfoglio{color:var(--cdf-inchiostro);font-weight:600}
.cdf-dopo{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--cdf-ambra-testo)}
.cdf-esiste{display:grid;gap:6px;padding:8px;border:1px solid color-mix(in srgb,var(--cdf-ambra) 55%,transparent);border-radius:12px;background:color-mix(in srgb,var(--cdf-ambra) 8%,var(--pannello2))}
.cdf-esiste > b{font-size:12px;color:var(--cdf-ambra-testo)}
.cdf-doppia{display:grid;gap:8px;padding:10px;border:1px solid var(--pericolo-bordo);border-radius:12px;background:var(--pericolo-velo)}
.cdf-doppia > p{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700;color:var(--accento-testo)}
.cdf-doppia > p svg{flex:none}
.cdf-doppia .cm-scelte{grid-template-columns:1fr 1fr}
.cdf-doppia .cm-scelta{padding:9px 10px}
.cdf-doppia .cm-scelta-icona{background:var(--pannello);color:var(--tenue)}
/* le scelte con icona (l'agente del cliente) e le pillole dell'area, che decide la nazione */
.cdf-scelte{display:flex;flex-wrap:wrap;gap:8px}
.cdf-scelta{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:4px 14px 4px 5px;border:1.5px solid var(--bordo-forte);border-radius:999px;
  background:var(--pannello);color:var(--testo);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;touch-action:manipulation}
.cdf-scelta i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--pannello2);color:var(--tenue);font-style:normal}
.cdf-scelta.scelta{border-color:var(--accento);background:var(--accento-velo)}
.cdf-scelta.scelta i{background:var(--accento);color:#fff}
.cdf-scelta small{font-weight:500;color:var(--tenue);font-size:11.5px}
.cdf-scelta.piccola{min-height:34px;padding:2px 12px 2px 3px;font-size:12.5px;cursor:default;opacity:.6}
.cdf-scelta.piccola i{width:26px;height:26px}
.cdf-scelta.piccola:not(.scelta) i svg{opacity:0}
.cdf-scelta.piccola.scelta{opacity:1}
/* i recapiti: la pillola del tipo e la casella */
.cdf-campo.cdf-recapito{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px}
.cdf-recapito > .cdf-origine,.cdf-recapito > .cdf-dopo{grid-column:1/-1}
.cdf-tipo{display:inline-flex;align-items:center;gap:5px;min-width:118px;height:32px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--accento2) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accento2) 40%,transparent);font-size:12px;font-weight:700;color:var(--testo)}
.cdf-piede{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bordo);background:var(--pannello)}
.cdf-piede .bottone{min-height:42px;padding:0 16px;font-weight:700}
.cdf-piede .bottone.verde.spento{opacity:.55}
.cdf-piede > small{display:flex;align-items:center;gap:6px;flex:1 1 120px;min-width:0;margin-right:auto;font-size:12px;font-weight:600;line-height:1.3;color:var(--cdf-ambra-testo)}
.cdf-piede > small svg{flex:none}
@media (max-width:820px){
  .cm-v-corpo > .cm-v-foglio{grid-column:1;grid-row:1}
  .cm-v-corpo > .cm-v-lato{grid-column:1;grid-row:2}
  .cm-v-corpo.cdf-con-cassetto > .cm-v-lato{visibility:visible}
  .cdf-cassetto{position:fixed;inset:0;z-index:30;border-radius:0;border-left:0;border-right:0;border-bottom:0;box-shadow:none}
}
@media (max-width:560px){
  .cdf-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cdf-griglia .s3,.cdf-griglia .s4,.cdf-griglia .s6{grid-column:1/-1}
  .cdf-griglia .s2,.cdf-griglia .s1{grid-column:span 1}
  .cdf-doppia .cm-scelte{grid-template-columns:1fr}
  .cdf-piede > small{flex:1 1 100%}
  .cdf-piede .bottone.verde{flex:1;justify-content:center}
  .cdf-tipo{min-width:0}
  .cdf-riga.due{grid-template-columns:minmax(0,1fr)}
  .cdf-riga.due .cdf-cella + .cdf-cella{margin-left:-12px;padding-left:9px}
}

/* ---------- sul foglio: la matita VERDE dei campi stampati e il riquadro per riscriverli ---------- */
.icona-riga.cm-f-matita{--ic:var(--cmx-verde-carta);position:absolute;z-index:3;width:var(--lato);height:var(--lato);border-radius:calc(var(--lato) * .24);
  transform:translate(-50%,-50%);background:color-mix(in srgb,var(--ic) 9%,#fff);border-color:color-mix(in srgb,var(--ic) 60%,#fff);color:var(--ic);
  box-shadow:0 1px 2px rgba(16,34,43,.2);touch-action:manipulation}
html[data-tema="scuro"] .icona-riga.cm-f-matita{background:color-mix(in srgb,var(--ic) 9%,#fff);border-color:color-mix(in srgb,var(--ic) 60%,#fff);color:var(--ic)}
.icona-riga.cm-f-matita:hover,.icona-riga.cm-f-matita:focus-visible,
html[data-tema="scuro"] .icona-riga.cm-f-matita:hover{background:var(--ic);border-color:var(--ic);color:#fff}
.icona-riga.cm-f-matita svg{width:62%;height:62%;stroke-width:2.4}
.icona-riga.cm-f-matita::before{content:"";position:absolute;inset:-9px}
.cm-f-in-striscia .icona-riga.cm-f-matita{opacity:.32}
.cm-f-campopop{position:absolute;z-index:8;display:grid;gap:8px;padding:12px;border:1px solid var(--bordo-forte);border-top:3px solid var(--cmx-verde-carta);border-radius:12px;
  background:var(--pannello);box-shadow:var(--cmx-ombra-str);animation:cm-f-str-apre .18s ease-out both}
.cm-f-campopop-et{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
.cm-f-campopop .cdf-casella input{height:46px;font-size:17px;font-weight:600}
.cm-f-campopop-spiega{margin:0;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.cm-f-campopop-azioni{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.cm-f-campopop-azioni .bottone{min-height:40px;padding:0 14px;font-weight:700}
@media (max-width:480px){.cm-f-campopop-azioni .bottone{flex:1 1 auto;justify-content:center}}
/* la striscia degli articoli: il "Chiudi" in fondo, sotto tutto (10/10/2026, l'utente: "non e' chiaro come chiuderla") */
.cm-f-str-fondo{justify-content:flex-end;margin:2px -7px -7px -8px;padding:7px 8px;border-top:1px solid var(--bordo)}
.cm-f-str.stretta .cm-f-str-fondo{margin:0 -7px -7px;padding:7px}
.cm-f-str-chiudi-fondo{min-height:44px;padding:0 18px;font-weight:700}
.cm-f-str.stretta .cm-f-str-chiudi-fondo{flex:1;justify-content:center}

/* ================= LA COPIA SU PIU' PAGINE (10/10/2026, proposta C "nastro di miniature" scelta da Andrea) =================
   Il foglio: in basso il pulsante "Pagina 2 di 3" con la figurina (a sinistra dello zoom) che apre il cassetto delle pagine
   dal basso; sopra e sotto la carta le bande con la figurina della pagina vicina ("Torna a pagina 1", "Continua a pagina 3",
   "+ Aggiungi una pagina"). Il visore: le pagine una sotto l'altra e la colonna delle figurine (sul telefono la pillola).
   L'elenco: i fogli dietro a ventaglio e "3 pag."; il Cestino: la figurina della pagina tolta. Solo token del portale. */
.cm-f-basso{position:absolute;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;gap:10px;transform:translateX(-50%);max-width:calc(100% - 16px)}
.cm-f-basso > .qs-pagine.cm-f-zoom{position:static;left:auto;bottom:auto;transform:none}
.cm-f-pag{display:flex;align-items:center;gap:4px;height:48px;padding:0 3px;border:1px solid var(--bordo);border-radius:14px;
  background:color-mix(in srgb,var(--pannello) 94%,transparent);box-shadow:0 10px 26px -14px rgba(0,0,0,.55);transition:opacity .2s}
.cm-f-pag[hidden]{display:none}
.cm-f-pag.aperto{border-color:var(--accento);box-shadow:0 0 0 3px var(--accento-velo)}
.qs-finestra.qs-scrive .cm-f-pag{opacity:.16;pointer-events:none}
.cm-f-in-striscia .cm-f-pag{visibility:hidden}
.cm-f-pag-b{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 10px 0 5px;border:0;border-radius:11px;background:transparent;
  color:var(--testo);font:600 13.5px var(--carattere);white-space:nowrap;cursor:pointer;touch-action:manipulation}
.cm-f-pag-b:hover{background:var(--pannello2)}
.cm-f-pag-b:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.cm-f-pag-b b{margin-left:2px;font-size:17px;font-weight:800}
.cm-f-pag-mini{position:relative;flex:none;width:26px;height:36px;margin-right:6px;border-radius:2px;background:#fff;overflow:hidden;
  box-shadow:3px 3px 0 -1px #fff,3px 3px 0 0 rgba(0,0,0,.25),6px 6px 0 -1px #fff,6px 6px 0 0 rgba(0,0,0,.25)}
.cm-f-pag.una .cm-f-pag-mini{margin-right:2px;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.cm-f-pag-mini canvas,.cm-f-banda-mini canvas,.cm-f-mc-carta canvas,.cm-togli-mini canvas,.cm-vis-tessera-carta canvas,.cm-vis-pagpill-mini canvas{position:static;display:block;width:100%;height:100%}
.cm-f-pag-freccia{display:inline-flex;color:var(--tenue)}
.cm-f-pag-freccia[hidden]{display:none}
.icona-riga.cm-f-pag-piu{width:38px;height:38px;border-radius:9px}
.icona-riga.cm-f-pag-piu svg{width:20px;height:20px;stroke-width:2.6}
.icona-riga.cm-f-pag-piu[hidden]{display:none}
/* le bande sopra e sotto la carta: seguono la carta (stanno con i livelli) */
.cm-f-bande{position:absolute;inset:0;pointer-events:none}
.cm-f-bande > *{pointer-events:auto}
.cm-f-banda{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:12px;height:48px;max-width:calc(100vw - 24px);padding:0 16px 0 7px;
  border:1px solid color-mix(in srgb,var(--ic-blu) 45%,transparent);border-radius:12px;background:var(--pannello);color:var(--ic-blu);
  font:700 14.5px var(--carattere);white-space:nowrap;transform:translate(-50%,-50%);box-shadow:0 10px 24px -14px rgba(0,0,0,.6);cursor:pointer;touch-action:manipulation}
.cm-f-banda[hidden]{display:none}
.cm-f-banda:hover{background:var(--pannello2)}
.cm-f-banda:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.cm-f-banda svg{flex:none;width:19px;height:19px;stroke-width:2.3}
.cm-f-banda-testo{overflow:hidden;text-overflow:ellipsis}
.cm-f-banda-mini{flex:none;width:26px;height:36px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);overflow:hidden}
.cm-f-banda.aggiungi{border:1.5px dashed color-mix(in srgb,var(--ic-verde) 75%,transparent);color:var(--ic-verde);padding-left:8px}
.cm-f-banda .icona-riga.cm-f-banda-piu{width:30px;height:30px;border-radius:7px;cursor:inherit}
.cm-f-banda .icona-riga.cm-f-banda-piu svg{width:16px;height:16px;stroke-width:2.8}
.qs-finestra.qs-scrive .cm-f-banda{opacity:.35}
.cm-f-bande.cm-f-zitte .cm-f-banda-su,.cm-f-bande .cm-f-banda.cm-f-coperta{opacity:0;pointer-events:none;transition:opacity .15s}
/* il cassetto delle pagine, dal basso: figurine, "SEI QUI", il quadrato rosso che toglie (solo qui), il + verde */
@keyframes cm-f-cassetto{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.cm-f-cassetto{position:absolute;left:0;right:0;bottom:0;z-index:4;max-height:min(64%,600px);overflow-y:auto;padding:10px 16px calc(80px + env(safe-area-inset-bottom));
  border-top:1px solid var(--bordo-forte);border-radius:20px 20px 0 0;background:color-mix(in srgb,var(--pannello) 97%,transparent);
  box-shadow:0 -24px 50px -20px rgba(0,0,0,.75);animation:cm-f-cassetto .2s ease-out both;overscroll-behavior:contain;touch-action:pan-y;cursor:default}
.cm-f-cassetto[hidden]{display:none}
.cm-f-cassetto-testa{position:relative;display:flex;align-items:center;gap:10px;margin:0 2px 14px;padding-top:10px}
.cm-f-cassetto-testa b{font-size:15px;font-weight:800;color:var(--testo)}
.cm-f-cassetto-conto{font-size:12.5px;color:var(--tenue)}
.cm-f-cassetto-maniglia{position:absolute;left:50%;top:-2px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:var(--bordo-forte)}
.icona-riga.cm-f-cassetto-chiudi{margin-left:auto}
.cm-f-nastro{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px 18px;padding:6px 4px 2px}
.cm-f-mc{position:relative;display:grid;justify-items:center;gap:6px;flex:none}
.cm-f-mc b{font-size:13px;font-weight:800;color:var(--testo)}
.cm-f-mc-carta{position:relative;display:block;width:104px;height:147px;padding:0;border:0;border-radius:2px;background:#fff;overflow:hidden;cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.14),0 10px 18px -10px rgba(0,0,0,.8);touch-action:manipulation}
.cm-f-mc-carta:focus-visible{outline:2px solid var(--accento2);outline-offset:3px}
.cm-f-mc.acceso .cm-f-mc-carta{box-shadow:0 0 0 3px var(--accento),0 10px 18px -10px rgba(0,0,0,.8)}
.cm-f-mc-qui{position:absolute;left:50%;top:-9px;z-index:2;transform:translateX(-50%);padding:1px 8px;border-radius:999px;background:var(--accento);color:#fff;
  font:800 10px/16px var(--carattere);letter-spacing:.04em;white-space:nowrap;pointer-events:none}
.icona-riga.cm-f-mc-togli{--ic:var(--ic-rosso);position:absolute;right:-13px;top:-11px;z-index:3;width:38px;height:38px;border-radius:9px;
  background:color-mix(in srgb,var(--ic) 10%,var(--pannello));border-color:color-mix(in srgb,var(--ic) 55%,transparent);box-shadow:0 1px 3px rgba(16,34,43,.3)}
.icona-riga.cm-f-mc-togli svg{width:19px;height:19px;stroke-width:2.2}
.icona-riga.cm-f-mc-togli:hover,.icona-riga.cm-f-mc-togli:focus-visible{background:var(--ic);border-color:var(--ic);color:#fff}
html[data-tema="scuro"] .icona-riga.cm-f-mc-togli:hover,html[data-tema="scuro"] .icona-riga.cm-f-mc-togli:focus-visible{color:#04141c}
.cm-f-mc.nuova .cm-f-mc-carta{display:grid;place-items:center;align-content:center;gap:8px;padding:8px;background:transparent;box-shadow:none;
  border:2px dashed color-mix(in srgb,var(--ic-verde) 70%,transparent);color:var(--ic-verde);font:700 12.5px/1.25 var(--carattere);text-align:center}
.icona-riga.cm-f-mc-piu{width:34px;height:34px;cursor:inherit}
.cm-f-cassetto-nota{margin:14px 4px 0;font-size:12.5px;color:var(--tenue)}
/* la striscia: "PAG. 2" sotto il numero della riga (che continua), e la nota ambra di un articolo che non ci sta */
.cm-f-str-num{width:auto;min-width:36px}
.cm-f-str-pag{margin-top:3px;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--tenue);white-space:nowrap}
.cm-f-str-pag[hidden]{display:none}
.cm-f-str-pag.nuova{color:var(--ic-verde)}
.cm-f-str .cm-f-vas-nota.cm-f-str-nonsta{margin:8px 2px 2px;padding:7px 10px;border:1px solid rgba(228,161,27,.55);border-radius:8px;background:rgba(228,161,27,.12);color:#8a5d00}
html[data-tema="scuro"] .cm-f-str .cm-f-vas-nota.cm-f-str-nonsta{color:#f2c14e}
.cm-f-str .cm-f-vas-nota.cm-f-str-nonsta svg{color:var(--cmx-ambra)}
.cm-f-str .cm-f-str-nonsta[hidden]{display:none}
/* la conferma "Togliere la pagina 2?": la figurina della pagina accanto al testo, la riga ambra della copia validata */
.cm-togli-testa{display:flex;gap:14px;align-items:flex-start}
.cm-togli-mini{flex:none;width:72px;height:102px;border-radius:2px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 8px 16px -8px rgba(0,0,0,.6)}
.cm-togli-pagina .cm-spiega{font-size:14px;color:var(--testo)}
.cm-togli-pagina .chiamata-icona{background:var(--accento)}
.cm-togli-ambra{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;padding:9px 12px;border:1px solid rgba(228,161,27,.55);border-radius:8px;
  background:rgba(228,161,27,.12);color:#8a5d00;font-size:13px;line-height:1.45}
html[data-tema="scuro"] .cm-togli-ambra{color:#f2c14e}
.cm-togli-ambra svg{flex:none;margin-top:1px}
.cm-salva-foglio{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13px;color:var(--tenue)}
.cm-salva-foglio svg{flex:none}
/* l'elenco: i fogli dietro a ventaglio e la pillola "3 pag." in basso a sinistra (in basso a destra c'e' la graffetta) */
.cm-e-b .cm-e-foglio.cm-e-pagine{overflow:visible}
.cm-e-ventaglio{position:absolute;inset:0;z-index:-1;border-radius:2px;background:var(--cm-carta);pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.14),0 6px 12px -6px rgba(0,0,0,.6)}
.cm-e-ventaglio.due{transform:rotate(10deg) translate(9px,2px)}
.cm-e-ventaglio.uno{transform:rotate(5deg) translate(4px,1px)}
.cm-e-pag{position:absolute;left:-9px;bottom:-7px;z-index:5;display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;
  background:var(--accento);color:#fff;font-size:11px;font-weight:800;line-height:1.3;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.cm-e-pag svg{flex:none}
/* il riquadro della copia nell'opportunita': "3 pagine" accanto al numero */
.cm-deal-pagine{margin-left:6px;font-size:12px;font-weight:600;color:var(--tenue)}
/* il visore: le pagine una sotto l'altra, la colonna delle figurine a sinistra del palco */
.cm-vis-carta.cm-vis-multi{background:transparent;box-shadow:none}
.cm-vis-pag{position:absolute;left:0;width:100%;background:var(--cm-carta);
  box-shadow:0 36px 70px -24px rgba(0,0,0,.85),0 6px 14px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.12)}
html[data-tema="chiaro"] .cm-vis-pag{box-shadow:0 30px 60px -26px rgba(70,45,20,.55),0 4px 10px rgba(70,45,20,.2),0 0 0 1px rgba(0,0,0,.08)}
.cm-vis-pag > img,.cm-vis-pag > canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.cm-vis-pag.nitida > .cm-vis-figurina{opacity:0}
.cm-vis-fila{position:absolute;left:14px;top:14px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:12px;width:112px;max-height:calc(100% - 28px);
  padding:12px 10px 14px;overflow-y:auto;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(14,15,18,.72);overscroll-behavior:contain;touch-action:pan-y}
html[data-tema="chiaro"] .cm-vis-fila{background:rgba(255,253,248,.85);border-color:var(--bordo)}
.cm-vis-fila[hidden]{display:none}
.cm-vis-fila-titolo{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,239,230,.6)}
html[data-tema="chiaro"] .cm-vis-fila-titolo{color:var(--tenue)}
.cm-vis-tessera{display:grid;justify-items:center;gap:6px;flex:none;padding:0;border:0;background:transparent;color:#f3efe6;font:800 13px var(--carattere);cursor:pointer}
html[data-tema="chiaro"] .cm-vis-tessera{color:var(--testo)}
.cm-vis-tessera:focus-visible{outline:2px solid var(--accento2);outline-offset:3px}
.cm-vis-tessera-carta{display:block;width:80px;height:113px;border-radius:2px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.14),0 10px 18px -10px rgba(0,0,0,.8)}
.cm-vis-tessera.acceso .cm-vis-tessera-carta{box-shadow:0 0 0 3px var(--accento),0 10px 18px -10px rgba(0,0,0,.8)}
.cm-vis-pagpill{display:none}
.cm-vis-pagine{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--bordo-forte);border-radius:999px;background:var(--pannello2);
  color:var(--testo);font-size:11px;font-weight:700;line-height:1.5}
/* la validazione: le pagine dalla 2 sotto la prima, il cartellino "Pagina 2 di 3", "pag. 2" accanto alle righe */
.cm-v-carta-seguito{display:block;margin:16px auto 0}
.cm-v-cartellino{position:absolute;left:14px;top:12px;z-index:3;padding:5px 11px;border-radius:999px;background:rgba(14,15,18,.86);color:#f3efe6;
  font:700 12.5px var(--carattere);pointer-events:none;box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
.cm-v-cartellino[hidden]{display:none}
.cm-v-righe .cm-v-pag{font-style:normal;font-size:10px;text-transform:none;letter-spacing:0;color:var(--tenue)}
/* il Cestino: la figurina della pagina tolta, con il numero che aveva, e la domanda per una copia validata dopo */
.cs-mini-pagina{position:relative;flex:none;width:48px;height:68px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.14),0 6px 12px -6px rgba(0,0,0,.6)}
.cs-mini-pagina img{display:block;width:100%;height:100%;border-radius:2px;object-fit:cover}
.cs-mini-pagina i{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:4px;
  background:var(--accento);color:#fff;font:800 10.5px/1 var(--carattere);font-style:normal}
.cs-conferma-pagina{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.cs-conferma-azioni{display:inline-flex;flex-wrap:wrap;gap:8px;margin-left:auto}
@media (max-width:600px){
  .cm-f-basso{flex-direction:column;gap:8px}
  .cm-f-pag-et{display:none}
  .cm-f-cassetto{max-height:72%;padding:10px 12px calc(132px + env(safe-area-inset-bottom))}
  .cm-f-nastro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:20px 10px}
  .cm-f-mc-carta{width:92px;height:130px}
  .cm-f-banda{height:44px;font-size:14px}
}
@media (max-width:683px){
  .cm-vis-fila{display:none}
  .cm-vis-fila.aperta:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;top:auto;left:8px;right:8px;bottom:66px;
    width:auto;max-height:62%;gap:14px 10px;padding:14px 12px 16px;border-radius:18px;background:rgba(14,15,18,.94)}
  html[data-tema="chiaro"] .cm-vis-fila.aperta:not([hidden]){background:rgba(255,253,248,.97)}
  .cm-vis-fila.aperta .cm-vis-fila-titolo{grid-column:1 / -1}
  .cm-vis-pagpill:not([hidden]){position:absolute;left:50%;bottom:12px;z-index:6;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 6px;
    border:0;border-radius:999px;transform:translateX(-50%);background:rgba(14,15,18,.88);color:#f3efe6;font:700 13px var(--carattere);white-space:nowrap;
    box-shadow:0 8px 20px -10px rgba(0,0,0,.8);cursor:pointer}
  .cm-vis-pagpill b{font-size:16px;color:#fff}
  .cm-vis-pagpill-mini{flex:none;width:20px;height:28px;border-radius:2px;background:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
}
@media (prefers-reduced-motion:reduce){
  .cm-f-cassetto{animation:none}
}

/* =====================================================================
   Setup > Intelligenza artificiale: CREDITO E CONSUMI di OpenAI (10/10/2026, proposta B "estratto conto" con le
   pillole del periodo della proposta A). Prefisso iac- (comune) e iacb- (estratto conto). L'HTML lo scrive
   App_Code/ConsumiIaBlocco.vb, le pillole le muove js/setup-ia-consumi.js.
   Usa i pezzi dei grafici del portale (graf-capo, graf-colonne, graf-mesi, graf-rete, graf-y, tinte --graf-s1/s3/s7/s5
   validate per i daltonici, --graf-altro per "Altro"), le pillole delle Statistiche (stb-seg) e le schede del Setup
   (pos-campi, pos-password, pos-salvata). Solo token: temi chiaro e scuro; sul telefono le tabelle diventano schede.
   ===================================================================== */
.iac{--gc:var(--graf-uno);container-type:inline-size;min-width:0}
.iac h4{margin:0;font-size:13.5px;font-weight:600;line-height:1.3}
.iac .graf-capo{margin:0 0 12px}
.iac-su{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 14px}
.iac-periodo{flex:none}
.iac-periodo-dati[hidden]{display:none !important}
.iac-sigillo{
  --sg:var(--ic-blu);
  display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 8px;border-radius:999px;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--sg);
  border:1px solid color-mix(in srgb,var(--sg) 42%,transparent);background:color-mix(in srgb,var(--sg) 10%,transparent);
}
.iac-sigillo svg{flex:none;width:14px;height:14px}
.iac-sigillo.ufficiale{--sg:var(--successo)}
.iac-aggiorna{gap:6px}
.iac-aggiorna svg{flex:none}
.iac-riquadro{container-type:inline-size;min-width:0;padding:14px 16px 16px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello)}
.iac-nota{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--tenue)}
.iac-nota svg{flex:none;margin-top:1px;color:var(--accento2)}
.iac-nota b{color:var(--testo);font-weight:600}
.setup-corpo .iac-admin{margin-top:16px}
.iac-aiuto{display:block;margin-top:8px}
.iac-mancante{
  display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;white-space:nowrap;vertical-align:1px;
  font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1.6;color:var(--pos-ambra);
  border:1px solid color-mix(in srgb,var(--pos-ambra) 45%,transparent);background:color-mix(in srgb,var(--pos-ambra) 10%,transparent);
}
.iacb-tab td.n .iac-mancante{margin-left:0}
.iacb-vuoto{margin:6px 0 2px;font-size:12.5px;color:var(--tenue)}

/* ---------- il conto: anello, saldo, calcolo e piede ---------- */
.iacb-conto{
  --st:var(--successo);
  margin:0 0 14px;overflow:hidden;
  border:1px solid var(--bordo);border-left:3px solid var(--st);border-radius:var(--raggio);background:var(--pannello);
}
.iacb-conto.avvisa{--st:var(--pos-ambra)}
.iacb-conto.no{--st:var(--pericolo)}
.iacb-conto.senza{--st:var(--ic-blu)}
.iacb-testa{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,310px);align-items:center;gap:18px 26px;padding:18px 20px}
.iacb-anello{position:relative;flex:none;width:124px;height:124px}
.iacb-anello svg{display:block;width:100%;height:100%}
.iacb-anello .pista{fill:none;stroke:var(--graf-pista);stroke-width:12}
.iacb-anello .pieno{fill:none;stroke:var(--st);stroke-width:12;stroke-linecap:round}
.iacb-anello .soglia{stroke:var(--testo);stroke-width:2.5;stroke-linecap:round}
.iacb-anello-testo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.iacb-anello-testo b{font-size:23px;font-weight:700;letter-spacing:-.02em}
.iacb-anello-testo small{font-size:11px;color:var(--tenue)}
/* senza credito: al posto dell'anello un tondo con lo scontrino */
.iacb-icona-spesa{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;color:var(--st);background:color-mix(in srgb,var(--st) 10%,transparent);border:1px solid color-mix(in srgb,var(--st) 35%,transparent)}
.iacb-icona-spesa svg{width:28px;height:28px}
.iacb-saldo{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.iacb-saldo .eti{font-size:12px;color:var(--tenue)}
.iacb-saldo .val{font-size:48px;font-weight:600;letter-spacing:-.03em;line-height:1}
.iacb-saldo .val small{margin-left:5px;font-size:22px;font-weight:500;letter-spacing:0;color:var(--tenue)}
.iacb-stato{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--st)}
.iacb-stato svg{flex:none}
.iacb-conto.senza .iacb-stato{font-weight:500;color:var(--tenue)}
.iacb-calcolo{margin:0;padding:11px 14px;border-radius:var(--raggio);background:var(--pannello2);font-size:13px;font-variant-numeric:tabular-nums}
.iacb-calcolo div{display:flex;justify-content:space-between;gap:14px;padding:4px 0}
.iacb-calcolo dt{color:var(--tenue)}
.iacb-calcolo dd{margin:0;font-weight:600;white-space:nowrap}
.iacb-calcolo .tot{margin-top:5px;padding-top:8px;border-top:3px double var(--bordo-forte)}
.iacb-calcolo .tot dt{color:var(--testo);font-weight:600}
.iacb-calcolo .tot dd{font-size:15px;font-weight:700}
.iacb-piede{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 20px;border-top:1px solid var(--bordo);background:color-mix(in srgb,var(--st) 6%,transparent)}
.iacb-piede small{font-size:12px;color:var(--tenue)}
.iacb-previsione{flex:1 1 320px;min-width:0;text-align:right;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.iacb-previsione b{color:var(--testo)}
/* gli avvisi piccoli del piede: una riga ciascuno */
.iacb-piede .iacb-avviso{flex:1 1 100%;font-size:12px;line-height:1.45}
.iacb-piede .iacb-avviso.no{color:var(--pos-ambra);font-weight:600}
.iacb-piede .iacb-avviso.ok{color:var(--successo);font-weight:600}
.iacb-piede .iacb-avviso.info{color:var(--tenue)}
@container (max-width:820px){
  .iacb-testa{grid-template-columns:auto minmax(0,1fr)}
  .iacb-calcolo{grid-column:1/-1}
  .iacb-previsione{text-align:left}
}
@container (max-width:440px){
  .iacb-testa{gap:14px 16px;padding:16px 14px}
  .iacb-anello{width:96px;height:96px}
  .iacb-anello-testo b{font-size:18px}
  .iacb-icona-spesa{width:56px;height:56px}
  .iacb-saldo .val{font-size:36px}
  .iacb-saldo .val small{font-size:18px}
  .iacb-stato{font-size:12px}
  .iacb-piede{padding:10px 14px}
}

/* ---------- movimenti: colonne per uso ---------- */
.iacb-totali{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:11.5px;color:var(--tenue);text-align:right}
.iacb-totali b{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--testo);line-height:1.1}
@container (max-width:520px){
  .iacb-totali{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px;text-align:left}
  .iacb-totali b{flex:1 1 100%;margin-bottom:2px}
}
.iacb-colonne{--graf-piano:164px;--graf-colonna:22px}
.iacb .graf-mesi{gap:3px}
.iacb .graf-mesi .q{min-height:0}

/* ---------- tabelle: usi, estratto, modelli, listino ---------- */
.iacb-tab{width:100%;margin-top:12px;border-collapse:collapse;font-size:12.5px}
.iacb-tab th{padding:6px 8px;border-bottom:1px solid var(--bordo);text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
.iacb-tab td{padding:8px;border-bottom:1px solid var(--bordo);vertical-align:middle}
.iacb-tab tbody tr:last-child td{border-bottom:0}
.iacb-tab th.n,.iacb-tab td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.iacb-tab td.forte{font-weight:600}
.iacb-tab small{display:block;margin-top:1px;font-size:11px;color:var(--debole)}
.iacb-tab code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;font-weight:700;overflow-wrap:anywhere}
td.iacb-uso{position:relative;padding-left:28px}
td.iacb-uso .punto{position:absolute;left:8px;top:12px;width:11px;height:11px;border-radius:3px;background:var(--gc)}
td.iacb-uso b{font-weight:600}
.iacb-quota-barra{display:inline-block;width:64px;height:6px;margin-right:8px;border-radius:99px;background:var(--graf-pista);vertical-align:middle;overflow:hidden}
.iacb-quota-barra i{display:block;height:100%;border-radius:99px;background:var(--gc)}
.iacb-due{display:grid;gap:14px;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);margin-top:14px}
@container (max-width:780px){.iacb-due{grid-template-columns:minmax(0,1fr)}}
.iacb-data b{display:block;font-weight:600;font-variant-numeric:tabular-nums}
.iacb-mini{display:flex;gap:2px;width:100%;max-width:150px;height:8px;border-radius:99px;overflow:hidden;background:var(--graf-pista)}
.iacb-mini i{display:block;min-width:3px;background:var(--gc)}
.iacb-mov > span:not(.iacb-mini){font-weight:600}
.iacb-mov small{margin-top:4px}
.iacb-meno{font-weight:600}
.iacb-piu{font-weight:700;color:var(--successo)}
.iacb-saldo-c{color:var(--tenue)}
tr.fine .iacb-data b,tr.fine .iacb-meno{color:var(--tenue);font-weight:500}
.iacb-salto td{background:color-mix(in srgb,var(--testo) 3.5%,transparent);color:var(--tenue)}
.iacb-salto .iacb-mov > span{font-weight:500}
.iacb-carica td{background:var(--successo-velo)}
.iacb-carica .iacb-mov > span{color:var(--successo)}
.iacb-modelli td:first-child small{white-space:normal}

/* telefono: le tabelle diventano schede, mai scorrimento di lato */
@container (max-width:470px){
  .iacb-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .iacb-tab,.iacb-tab tbody{display:block}
  .iacb-tab tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:10px 0;border-bottom:1px solid var(--bordo)}
  .iacb-tab tbody tr:last-child{border-bottom:0}
  .iacb-tab td{padding:0;border:0}
  .iacb-tab td.n::before{content:attr(data-eti) " ";font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--debole)}
  .iacb-usi td.iacb-uso,.iacb-modelli td:first-child{flex:1 1 100%;margin-bottom:2px}
  .iacb-usi td.iacb-uso{padding-left:20px}
  .iacb-usi td.iacb-uso .punto{left:0;top:4px}
  .iacb-usi td.n,.iacb-modelli td.n{color:var(--tenue)}
  .iacb-usi td.forte,.iacb-modelli td.forte{margin-left:auto;color:var(--testo)}
  .iacb-usi td.n.iacb-quota::before{content:none}
  .iacb-quota-barra{width:44px}
  .iacb-estratto tr{display:grid;grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"d m s" "d m b";gap:2px 12px;align-items:center}
  .iacb-estratto td.iacb-data{grid-area:d}
  .iacb-estratto td.iacb-mov{grid-area:m}
  .iacb-estratto td.iacb-meno,.iacb-estratto td.iacb-piu{grid-area:s}
  .iacb-estratto td.iacb-saldo-c{grid-area:b;font-size:11.5px}
  .iacb-estratto.senza-saldo tr{grid-template-areas:"d m s" "d m s"}
  .iacb-estratto td.iacb-meno::before,.iacb-estratto td.iacb-piu::before{content:none}
  .iacb-estratto td.iacb-saldo-c::before{content:attr(data-eti) " ";font-size:10.5px;font-weight:400;text-transform:none;letter-spacing:0}
  .iacb-salto td,.iacb-carica td{background:none}
  .iacb-estratto tr.iacb-salto{padding-left:8px;padding-right:8px;border-radius:var(--raggio);background:color-mix(in srgb,var(--testo) 3.5%,transparent)}
  .iacb-estratto tr.iacb-carica{padding-left:8px;padding-right:8px;border-radius:var(--raggio);background:var(--successo-velo)}
  /* il listino: il modello in alto, i tre prezzi in riga con l'etichetta sopra */
  .iacb-listino tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;align-items:end}
  .iacb-listino td:first-child{grid-column:1/-1}
  .iacb-listino tr > td.n{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:auto;text-align:left}
  .iacb-listino td.n::before{white-space:normal;line-height:1.2}
  .iacb-listino tr .iacb-prezzo{width:100%}
}

/* ---------- ricarica e avviso ---------- */
.iacb-ricarica{margin-top:16px;padding:14px 16px 16px;border:1px dashed var(--bordo-forte);border-radius:var(--raggio)}
.iacb-ricarica-testa{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px}
.iacb-ricarica-icona{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:6px;color:var(--successo);background:var(--successo-velo);border:1px solid var(--successo-bordo)}
.iacb-ricarica-testa b{display:block;font-size:13.5px;font-weight:600}
.iacb-ricarica-testa small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--tenue)}
.iacb-ricarica > .avviso{margin:0 0 14px}
.iacb-listino-box{margin-top:16px}
.iacb-listino-titolo{display:block;font-size:13px;font-weight:600}
.iacb-listino-box > .setup-aiuto{display:block;margin-top:2px}
.iacb-listino td:first-child{white-space:normal}
.iacb-listino td.n{width:1%}
.iacb-prezzo{
  width:96px;min-width:0;padding:6px 9px;border-radius:3px;border:1px solid var(--bordo);
  background:var(--sfondo);color:var(--testo);font:inherit;font-size:13.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;
}
.iacb-prezzo:focus{outline:none;border-color:var(--accento)}
.iacb-prezzo::placeholder{font-weight:400;color:var(--debole)}

/* ===== LA BATTERIA DEL CREDITO IA nel piede della barra (10/10/2026, richiesta dell'utente; FPC.Master LnkBatteria,
   FPC.Master.vb PiedeBatteria). Orizzontale, il polo a destra e "AI" al centro, NIENTE percentuale ("mi basta la scritta
   AI e i colori"): il liquido entra da sinistra fino al credito rimasto (--liv, da 0 a 100), con le righe oblique della
   carica che scorrono, il bordo che ondeggia e un riflesso ogni tanto; verde sopra il 70%, giallo sopra il 30%, rosso
   sotto, e allora lampeggiano il liquido e l'alone. Classi bt-* e .voce-batteria. ===== */
.voce-batteria{--bt:#1e9e57;--bt-chiaro:#5fd08f;position:relative;gap:12px}
/* fra la batteria e il Cestino lo stesso spazio che c'e' fra il Cestino e i Ticket (11/10/2026: "il pulsante AI e' attaccato al cestino") */
.barra-piede .voce-batteria{margin-bottom:6px}
.voce-batteria.bt-giallo{--bt:#d9a400;--bt-chiaro:#ffd84a}
.voce-batteria.bt-rosso{--bt:#da0219;--bt-chiaro:#ff5a6a}
.bt,.bt *{font-style:normal}
.bt{position:relative;flex:none;display:block;width:38px;height:20px;margin-right:4px}
.bt::after{content:"";position:absolute;right:-5px;top:6px;width:4px;height:8px;border-radius:0 2px 2px 0;background:var(--bt)}
.bt-corpo{position:absolute;inset:0;overflow:hidden;border:2px solid var(--bt);border-radius:6px;background:color-mix(in srgb,var(--bt) 10%,var(--pannello));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 25%,transparent)}
.bt-liquido{position:absolute;left:0;top:0;bottom:0;width:calc(var(--liv) * 1%);background:linear-gradient(180deg,var(--bt-chiaro),var(--bt));
  animation:bt-sale 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes bt-sale{from{width:0}}
.bt-liquido::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 4px,transparent 4px 8px);
  background-size:11.3px 11.3px;animation:bt-righe .9s linear infinite}
@keyframes bt-righe{to{background-position:11.3px 0}}
.bt-onda{position:absolute;top:0;right:-4px;width:5px;height:200%;background:var(--bt-chiaro);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 24'%3E%3Cpath d='M3 0 Q0 6 3 12 T3 24 H0 V0Z'/%3E%3C/svg%3E") repeat-y 0 0/5px 10px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 24'%3E%3Cpath d='M3 0 Q0 6 3 12 T3 24 H0 V0Z'/%3E%3C/svg%3E") repeat-y 0 0/5px 10px;
  animation:bt-onda 1.4s linear infinite}
@keyframes bt-onda{to{transform:translateY(-50%)}}
.bt-corpo::after{content:"";position:absolute;top:-6px;bottom:-6px;left:-14px;width:9px;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:bt-riflesso 4.5s ease-in-out 1.8s infinite}
@keyframes bt-riflesso{0%,70%{left:-14px}100%{left:46px}}
.bt-ai{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;font-weight:800;font-size:10px;line-height:1;letter-spacing:.6px;text-align:center;
  color:#fff;text-shadow:0 0 2px rgba(0,0,0,.6),0 1px 1px rgba(0,0,0,.45)}
.voce-batteria.bt-rosso .bt-corpo{animation:bt-lampo 1.1s ease-in-out infinite}
.voce-batteria.bt-rosso .bt-liquido{animation:bt-sale 1.6s cubic-bezier(.2,.8,.2,1) both,bt-lampo-liquido 1.1s ease-in-out 1.6s infinite}
@keyframes bt-lampo{0%,100%{box-shadow:0 0 0 0 rgba(218,2,25,0)}50%{box-shadow:0 0 10px 2px rgba(218,2,25,.65)}}
@keyframes bt-lampo-liquido{0%,100%{opacity:1}50%{opacity:.35}}
@media (min-width:981px){
  html[data-menu="compatto"] .voce-batteria{padding:12px 0}
  html[data-menu="compatto"] .voce-batteria .bt{margin-right:0;left:-2px}
}
@media (prefers-reduced-motion:reduce){
  .bt-onda,.bt-liquido::before,.bt-corpo::after{animation:none}
}
/* =====================================================================
   PORTALE OFFLINE, fase 1 (11/10/2026; grafica: proposta B "fascia di stato", scelta da Andrea dal rapporto pwa-offline).
   js/offline.js (fascia, blocco gentile), js/offline-clienti.js e Offline/Clienti.html (il guscio dei clienti offline),
   offline.html (il riquadro dei clienti offline).
   Colori per stato, uguali ovunque: giallo per la rete debole (lo stesso di BETA), rosso del logo pieno senza rete, verde
   quando la rete torna. Blu per l'invio, verde per "inviato" e rosso a righe per l'errore sono gia' qui per la fase 3.
   Mai arancione; i comandi dentro la fascia sul telefono sono quadrati come le icone delle righe.
   ===================================================================== */
:root{--of-rosso:#da0219;--of-rosso-testo:#b4001a;--of-ambra:#e4a11b;--of-ambra-testo:#7a4f00;--of-blu:#2563eb;--of-blu-testo:#1d4fc4;
  --of-verde:#1e9e57;--of-verde-testo:#157a42;--of-h:0px}
html[data-tema="scuro"]{--of-rosso-testo:#ff6b78;--of-ambra-testo:#f2c35b;--of-blu-testo:#9cc0ff;--of-verde-testo:#5fd69a}
.of-st-online,.of-st-tornata,.of-st-inviato{--of:var(--of-verde);--of-t:var(--of-verde-testo)}
.of-st-debole{--of:var(--of-ambra);--of-t:var(--of-ambra-testo)}
.of-st-offline,.of-st-errore{--of:var(--of-rosso);--of-t:var(--of-rosso-testo)}
.of-st-invio{--of:var(--of-blu);--of-t:var(--of-blu-testo)}
@keyframes of-gira{to{transform:rotate(360deg)}}
@keyframes of-batte{0%,45%{box-shadow:0 0 0 0 rgba(218,2,25,.55)}70%,100%{box-shadow:0 0 0 7px rgba(218,2,25,0)}}

/* ---------- la fascia: sotto la testata sul computer e sull'iPad (la pagina scende di 42px), in basso sul telefono ---------- */
.of-b{position:fixed;left:0;right:0;top:var(--testata);z-index:39;display:flex;align-items:center;gap:12px;min-height:42px;padding:5px 20px;
  background:var(--of);color:#fff;font-size:13.5px;line-height:1.25;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
html.of-con-fascia{--of-h:42px;scroll-padding-top:calc(var(--testata) + 56px)}
html.of-con-fascia .corpo{padding-top:calc(var(--testata) + var(--of-h))}
html.of-con-fascia .barra{top:calc(var(--testata) + var(--of-h))}
html.of-con-fascia .attesa-barra:not(.in-cima){top:calc(var(--testata) + var(--of-h))}
.of-b-ico{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.of-b-ico svg{width:18px;height:18px}
.of-b-testo{flex:1;min-width:0;display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.of-b-testo b{font-size:14px;font-weight:800;letter-spacing:.02em}
.of-b-testo span{opacity:.95}
.of-b-azioni{display:flex;gap:8px;flex:none}
.of-b-azioni:empty{display:none}
.of-b .of-b-bottone{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 12px;border:1px solid #fff;border-radius:7px;
  background:#fff;color:var(--of-rosso);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.of-b.of-st-tornata .of-b-bottone{color:var(--of-verde-testo)}
.of-b .of-b-bottone:hover{background:rgba(255,255,255,.88)}
.of-b .of-b-bottone:focus-visible{outline:2px solid #fff;outline-offset:2px}
.of-b.of-st-offline{background:linear-gradient(90deg,#b10015,#da0219 40%,#da0219)}
.of-b.of-st-offline .of-b-ico{animation:of-batte 1.6s ease-out infinite}
.of-b.of-st-debole{background:color-mix(in srgb,var(--of-ambra) 22%,var(--pannello));color:var(--of-ambra-testo);border-bottom:1px solid var(--of-ambra)}
.of-b.of-st-debole .of-b-ico{background:var(--of-ambra);border-color:var(--of-ambra);color:#1a1204}
.of-b.of-st-errore{background:repeating-linear-gradient(-45deg,#c20016 0 10px,#da0219 10px 20px)}
html[data-tema="scuro"] .of-b.of-st-invio{background:#1f4fd8}
html[data-tema="scuro"] .of-b.of-st-tornata,html[data-tema="scuro"] .of-b.of-st-inviato{background:#178048}
@media (prefers-reduced-motion:reduce){.of-b.of-st-offline .of-b-ico{animation:none}}
@media (max-width:560px){
  html.of-con-fascia{--of-h:0px}
  .of-b{top:auto;left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom));min-height:58px;padding:9px 9px 9px 11px;border-radius:12px;
    box-shadow:0 18px 40px -12px rgba(0,0,0,.65)}
  .of-b-testo{flex-direction:column;align-items:flex-start;gap:2px}
  .of-b-testo span{font-size:12.5px;line-height:1.3}
  .of-b-ico{width:36px;height:36px}
  /* il comando diventa un'icona quadrata, come le icone delle righe */
  .of-b .of-b-bottone{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.16);color:#fff}
  .of-b.of-st-tornata .of-b-bottone{color:#fff}
  .of-b .of-b-bottone span{display:none}
  .of-b .of-b-bottone svg{width:20px;height:20px}
  html.of-con-fascia .centro,html.of-con-fascia .ofg-corpo{padding-bottom:104px}
}

/* ---------- il blocco gentile: senza rete un pulsante del portale non parte, e una scheda dice perche' ---------- */
.of-blocco{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:70;transform:translateX(-50%);
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico testo" "azioni azioni";gap:12px 14px;
  width:min(480px,calc(100vw - 24px));padding:16px 16px 14px;border:1px solid var(--bordo);border-top:3px solid var(--of-rosso);border-radius:12px;
  background:var(--pannello);color:var(--testo);box-shadow:0 28px 60px -22px rgba(0,0,0,.6),var(--rilievo)}
.of-blocco-ico{grid-area:ico;display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:var(--of-rosso);color:#fff}
.of-blocco.verifica .of-blocco-ico{animation:of-batte 1.2s ease-out infinite}
.of-blocco-testo{grid-area:testo;min-width:0;align-self:center}
.of-blocco-testo b{display:block;font-size:15.5px;font-weight:700;line-height:1.3}
.of-blocco-testo p{margin:4px 0 0;color:var(--tenue);font-size:13.5px;line-height:1.45}
.of-blocco-testo p:empty{display:none}
.of-blocco-azioni{grid-area:azioni;display:flex;flex-wrap:wrap;gap:8px}
.of-blocco-azioni:empty{display:none}
.of-blocco-azioni .bottone{flex:1 1 auto;justify-content:center}
@media (max-width:560px){
  .of-blocco{bottom:calc(84px + env(safe-area-inset-bottom))}
  .of-blocco-azioni .bottone{flex:1 1 100%}
}

/* ---------- "salvati sul dispositivo il ..." accanto al numero delle aziende (guscio) ---------- */
.of-dati-offline{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px dashed color-mix(in srgb,var(--of-rosso) 55%,transparent);
  border-radius:6px;color:var(--of-rosso-testo);font-size:12px;font-weight:600;white-space:normal;line-height:1.3}
.of-dati-offline svg{flex:none}

/* ---------- il guscio dei clienti offline (Offline/Clienti.html): la pagina del portale senza menu ---------- */
.ofg-pagina{min-height:100vh}
.ofg-testata .ofg-testata-destra{display:flex;align-items:center;gap:10px;min-width:0}
.ofg-pillola{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;padding:5px 11px;border:1px dashed var(--bordo-forte);border-radius:99px;
  color:var(--tenue);font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofg-pillola svg{flex:none;color:var(--accento-testo)}
.ofg-corpo{padding:calc(var(--testata) + var(--of-h) + 28px) 34px 40px}
.ofg-contenuto{max-width:1320px;margin:0 auto;min-width:0}
.ofg-attesa{display:flex;align-items:center;justify-content:center;gap:12px;min-height:40vh;margin:0;color:var(--tenue);font-weight:600}
.ofg-rotella{width:22px;height:22px;border:3px solid color-mix(in srgb,var(--accento) 25%,transparent);border-top-color:var(--accento);border-radius:50%;animation:of-gira .9s linear infinite}
.ofg-messaggio{max-width:560px;margin:7vh auto 0;padding:30px 28px 26px;text-align:center}
.ofg-messaggio h1{margin:14px 0 8px;font-size:22px;font-weight:700;line-height:1.25}
.ofg-messaggio p{margin:0 0 10px;color:var(--tenue);font-size:14.5px;line-height:1.5}
.ofg-messaggio .en{margin-bottom:20px;color:var(--debole);font-size:12.5px}
.ofg-messaggio-ico{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:12px;background:var(--accento-velo);color:var(--accento-testo);
  border:1px solid color-mix(in srgb,var(--accento) 30%,transparent)}
.ofg-messaggio-ico.avvisa{background:color-mix(in srgb,var(--of-ambra) 16%,transparent);color:var(--of-ambra-testo);border-color:color-mix(in srgb,var(--of-ambra) 45%,transparent)}
.ofg-elenco .riquadro-testata{flex-wrap:wrap}
.ofg-piede{grid-template-columns:1fr}
.ofg-altre{display:flex;justify-content:center;padding:18px 0 4px}
.ofg-scheda .az-luogo{display:flex;align-items:flex-start;gap:7px}
.ofg-scheda .az-luogo svg{flex:none;margin-top:2px}
@media (max-width:980px){.ofg-corpo{padding-left:22px;padding-right:22px}}
@media (max-width:560px){
  .ofg-corpo{padding:calc(var(--testata) + 18px) 14px 32px}
  .ofg-testata .marchio .nome,.ofg-testata .marchio .filetto{display:none}
  .ofg-pillola{padding:5px 9px;font-size:11.5px}
  .ofg-messaggio{margin-top:3vh;padding:24px 18px 20px}
}

/* ---------- offline.html: i clienti salvati sul dispositivo, sotto il messaggio ---------- */
html.con-clienti-offline body.pagina-offline{align-content:center}
.offline-clienti{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center;max-width:440px;width:100%;margin-top:22px;padding:16px 16px 14px;
  border:1px solid color-mix(in srgb,var(--accento) 35%,var(--bordo));border-radius:12px;background:var(--pannello);box-shadow:var(--rilievo);text-align:left}
.offline-clienti-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:var(--accento-velo);color:var(--accento-testo)}
.offline-clienti-testo{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13.5px;line-height:1.4;color:var(--tenue)}
.offline-clienti-testo b{color:var(--testo);font-size:15px}
.offline-clienti-testo .en{font-size:12px;color:var(--debole)}
.offline-clienti .bottone{grid-column:1 / -1;justify-content:center}

/* ---------- Impostazioni > Setup > Portale offline (Admin/Setup.aspx, #setupOffline) ---------- */
.ofs-elenco{margin-top:20px}
.ofs-campi{margin-top:14px}
.ofs-giorni{max-width:340px}
.ofs-aggiungi{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--bordo)}
.ofs-aggiungi select{flex:1 1 260px;min-width:0;max-width:100%;min-height:40px;padding:8px 11px;border-radius:3px;border:1px solid var(--bordo-forte);background:var(--sfondo);color:var(--testo);font:inherit}
.ofs-aggiungi .bottone{flex:none}
.ofs-revocato .acc-rete-icona{background:var(--pericolo-velo);color:var(--pericolo)}
.ofs-emergenza{margin-top:22px;padding:14px 16px 16px;border:1px solid var(--pericolo-bordo);border-radius:12px;background:var(--pericolo-velo)}
.ofs-emergenza h3{margin-top:0;color:var(--pericolo)}
.ofs-emergenza .azioni-form{margin-top:10px}

/* =====================================================================
   PORTALE OFFLINE, fase 2 (11/10/2026): la spia nel piede della barra (la sola spia della proposta C) e il pannello
   "Prepara per l'offline" (js/offline.js), le pagine offline (Offline/Default.html, js/offline-guscio.js: cruscotto,
   clienti con la scheda completa, opportunita', catalogo, copie commissione) e i numeri nuovi del Setup.
   Tutto riuso dove si puo' (cv-v, cc-tessere, cc-v e cc-vl, t-deal, t-articoli, t-catalogo, cm-e-riga...): qui solo
   quello che manca. Stessi colori della fase 1: grigio tratteggiato in linea, blu mentre scarica, rosso pieno senza rete,
   giallo con la rete debole. Mai arancione; comandi quadrati; sul telefono schede, mai scorrere di lato.
   ===================================================================== */

/* ---------- la spia nel piede della barra: una .voce come il Cestino, sopra la batteria IA ---------- */
.barra-piede .voce-offline{gap:12px;margin-bottom:6px}
.voce-offline .of-spia-ico{--of:var(--ic-grigio);--of-t:var(--tenue);position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:7px;
  font-style:normal;border:1px dashed color-mix(in srgb,var(--tenue) 70%,transparent);background:transparent;color:var(--tenue)}
.voce-offline .of-spia-ico svg{width:18px;height:18px;color:inherit}
.voce-offline .of-spia-testo{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.15}
.voce-offline .of-spia-titolo{font-weight:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voce-offline .of-spia-sotto{font-size:11.5px;font-weight:500;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voce-offline .of-spia-sotto:empty{display:none}
.voce-offline.of-spia-scarica .of-spia-ico{border:1px solid var(--of-blu);background:var(--of-blu);color:#fff}
html[data-tema="scuro"] .voce-offline.of-spia-scarica .of-spia-ico{background:#3b6ff0;border-color:#3b6ff0}
.voce-offline.of-spia-scarica .of-spia-ico svg{animation:of-gira 1.4s linear infinite}
.voce-offline.of-spia-offline .of-spia-ico{border:1px solid var(--of-rosso);background:var(--of-rosso);color:#fff;animation:of-batte 1.6s ease-out infinite}
.voce-offline.of-spia-offline .of-spia-titolo{color:var(--of-rosso-testo)}
.voce-offline.of-spia-debole .of-spia-ico{border:1px solid var(--of-ambra);background:color-mix(in srgb,var(--of-ambra) 16%,transparent);color:var(--of-ambra-testo)}
.voce-offline.of-spia-pronto .of-spia-ico{border-color:color-mix(in srgb,var(--of-verde) 60%,transparent);color:var(--of-verde-testo)}
@media (prefers-reduced-motion:reduce){.voce-offline .of-spia-ico,.voce-offline .of-spia-ico svg{animation:none!important}}
@media (min-width:981px){html[data-menu="compatto"] .barra-piede .voce-offline{padding-top:10px;padding-bottom:10px}}

/* ---------- il pannello "Prepara per l'offline": accanto alla barra sul computer e sull'iPad, dal basso sul telefono ---------- */
.of-velo{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.42)}
.of-pannello{position:fixed;z-index:61;display:flex;flex-direction:column;left:calc(var(--barra) + 14px);bottom:16px;width:440px;max-width:calc(100vw - 24px);
  max-height:calc(100vh - var(--testata) - 32px);max-height:calc(100dvh - var(--testata) - 32px);border:1px solid var(--bordo);border-left:3px solid var(--accento);
  border-radius:12px;background:var(--pannello);box-shadow:0 28px 60px -24px rgba(0,0,0,.55),var(--rilievo);color:var(--testo);font-size:13px;overflow:hidden;outline:none}
.of-p-testa{flex:none;display:flex;gap:12px;align-items:flex-start;padding:16px 14px 12px 16px;border-bottom:1px solid var(--bordo);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accento) 9%,transparent),transparent)}
.of-p-spia{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:8px;background:var(--accento);color:#fff}
.of-p-spia svg{width:22px;height:22px}
.of-p-titoli{flex:1;min-width:0}
.of-p-titoli b{display:block;margin:1px 0 3px;font-size:15.5px;font-weight:700}
.of-p-titoli p{margin:0;color:var(--tenue);line-height:1.4}
.of-p-x{flex:none}
.of-p-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.of-p-sez{padding:12px 16px;border-bottom:1px solid var(--bordo)}
.of-p-sez h4{margin:0 0 9px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--debole)}
.of-p-quando,.of-p-spazio p{display:flex;align-items:center;gap:7px;margin:0;color:var(--tenue);line-height:1.4}
.of-p-quando svg,.of-p-spazio svg{flex:none;color:var(--accento-testo)}
.of-p-numeri{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.of-p-numeri li{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border:1px solid var(--bordo);border-radius:8px;background:var(--pannello2);min-width:0}
.of-p-numeri b.conto-num{font-size:19px;line-height:1.15}
.of-p-numeri span{font-size:11.5px;color:var(--tenue);line-height:1.25}
.of-p-righe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.of-p-riga{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 10px}
.of-p-riga .of-p-ico{cursor:default;width:32px;height:32px}
.of-p-cosa{display:flex;flex-direction:column;gap:2px;min-width:0}
.of-p-cosa b{font-size:13px;font-weight:600}
.of-p-cosa small{color:var(--tenue);font-size:11.5px;line-height:1.3}
.of-p-stato{justify-self:end;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--s) 45%,transparent);background:color-mix(in srgb,var(--s) 12%,transparent);color:var(--s-t)}
.of-p-stato.attesa{--s:var(--ic-grigio);--s-t:var(--tenue);border-style:dashed}
.of-p-stato.invio{--s:var(--of-blu);--s-t:var(--of-blu-testo)}
.of-p-stato.fatta{--s:var(--of-verde);--s-t:var(--of-verde-testo)}
.of-p-stato.errore{--s:var(--of-rosso);--s-t:var(--of-rosso-testo)}
.of-p-riga .of-p-pillole{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:6px}
.of-p-pillole .cat-pillola span{padding:6px 12px;font-size:12.5px}
.of-p-pillole .of-p-si:has(input:checked) span{border-color:var(--of-verde);background:color-mix(in srgb,var(--of-verde) 12%,var(--pannello));color:var(--of-verde-testo)}
.of-p-avanza{margin-top:12px}
.of-p-avanza-testo{margin:0 0 6px;color:var(--of-blu-testo);font-weight:600}
.of-p-barra{height:6px;border-radius:99px;background:color-mix(in srgb,var(--of-blu) 18%,transparent);overflow:hidden}
.of-p-barra i{display:block;height:100%;width:0;background:var(--of-blu);border-radius:99px;transition:width .2s}
.of-p-nota{margin:8px 0 0;color:var(--debole);font-size:11.5px;line-height:1.4}
.of-p-avviso{margin:10px 0 0;font-size:12.5px}
.of-p-spazio{border-bottom:0}
.of-p-piede{flex:none;display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px 14px;align-items:center;border-top:1px solid var(--bordo);background:var(--pannello)}
.of-p-piede .bottone{flex:1 1 auto;justify-content:center;display:inline-flex;align-items:center;gap:7px}
.of-p-piede .bottone[disabled]{opacity:.45;filter:grayscale(.6)}
@media (max-width:980px){
  .of-pannello{left:0;right:0;bottom:0;width:auto;max-width:none;max-height:88vh;max-height:88dvh;border-left:1px solid var(--bordo);border-bottom:0;
    border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -24px 60px -18px rgba(0,0,0,.6)}
  .of-pannello::before{content:"";display:block;flex:none;width:44px;height:5px;margin:8px auto 0;border-radius:99px;background:var(--bordo-forte)}
}
@media (pointer:coarse){.of-p-riga .of-p-ico{width:38px;height:38px}}

/* ---------- le pagine offline: le sezioni sotto la testata ---------- */
.ofg-nav{position:fixed;left:0;right:0;top:var(--testata);z-index:38;border-bottom:1px solid var(--bordo);background:var(--pannello);box-shadow:0 8px 20px -18px rgba(0,0,0,.5)}
html[data-tema="scuro"] .ofg-nav{background:var(--pannello-vetro,var(--pannello));-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px)}
.ofg-nav-voci{display:flex;gap:6px;max-width:1320px;margin:0 auto;padding:8px 34px}
.ofg-nav-voce{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid transparent;border-radius:8px;color:var(--tenue);
  font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.ofg-nav-voce svg{flex:none}
.ofg-nav-voce:hover{border-color:var(--bordo-forte);color:var(--testo)}
.ofg-nav-voce.attiva{border-color:color-mix(in srgb,var(--accento) 45%,transparent);background:var(--accento-velo);color:var(--testo);font-weight:700}
.ofg-nav-voce.attiva svg{color:var(--accento-testo)}
.ofg-nav-voce:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
html.ofg-con-nav{--ofg-nav:55px}
html.ofg-con-nav .ofg-corpo{padding-top:calc(var(--testata) + var(--of-h) + var(--ofg-nav) + 22px)}
html.ofg-con-nav.of-con-fascia .ofg-nav{top:calc(var(--testata) + var(--of-h))}
@media (max-width:980px){.ofg-nav-voci{padding:8px 22px}}
@media (max-width:700px){
  html.ofg-con-nav{--ofg-nav:62px}
  .ofg-nav-voci{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 6px}
  .ofg-nav-voce{flex-direction:column;justify-content:center;gap:3px;min-height:48px;padding:4px 2px;font-size:10.5px;letter-spacing:.01em}
  .ofg-nav-voce span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  html.ofg-con-nav .ofg-corpo{padding-top:calc(var(--testata) + var(--ofg-nav) + 16px)}
}

/* ---------- il cruscotto offline ---------- */
.ofg-cruscotto{margin-bottom:18px}
.ofg-avatar{display:grid;place-items:center;color:#fff;font-size:22px;font-weight:800;letter-spacing:.02em}
@media (min-width:1251px){.ofg-cv{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cv-v.ofg-cv-copie{--t:var(--ic-teal)}
.ofg-cv .cv-testa{padding-right:0}
@media (max-width:1250px) and (min-width:701px){.ofg-cv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ofg-dispositivo .riquadro-testata{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ofg-dispositivo .riquadro-testata h2{margin:0}
/* il titolo dentro la testata del riquadro: batte ".riquadro h2" (che e' gia' lui la testata, con il filetto) */
.ofg-contenuto .riquadro-testata h2.con-icona-titolo{padding:0;border:0;color:var(--testo);font-size:14px}
.ofg-colori-corpo{padding:14px 16px 16px}
/* vendite, ordini e campioni offline: la testata del pannello a tutta larghezza come le altre tessere, il contenuto con il suo margine;
   le pillole dello stato piu' larghe ("Inviata il 05/10/26", "Non allocato") */
.ofg-contenuto .cc-p-vendite,.ofg-contenuto .cc-p-ordini,.ofg-contenuto .cc-p-campioni{padding:0}
.ofg-vendite,.ofg-ordini,.ofg-campioni{padding:16px 20px 20px}
.ofg-campioni .cc-vl th.cc-vr-stato{width:136px}
.ofg-ordini .cc-vl th.cc-vr-stato{width:112px}
@media (max-width:560px){.ofg-vendite,.ofg-ordini,.ofg-campioni{padding:12px 12px 16px}}
.ofg-disp-sotto{margin:0 0 12px;color:var(--tenue)}
.ofg-disp-corpo{padding:14px 16px 16px;font-size:13.5px}
.ofg-disp-righe{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px 30px}
.fascia .oggi.ofg-oggi{text-transform:none}
.ofg-disp-spazio{display:flex;align-items:center;gap:7px;margin:14px 0 0;color:var(--tenue)}
.ofg-disp-spazio svg{color:var(--accento-testo)}
.ofg-disp-spazio b{color:var(--testo)}

/* ---------- la scheda del cliente offline: le tessere (Scheda, Opportunita', Copie, PRODUZIONE) ---------- */
a.cc-tessera,a.cc-g-riga{color:inherit;text-decoration:none}
.cc-t-copie{--c:#0f8f8a}
html[data-tema="scuro"] .cc-t-copie{--c:#3fd0c6}
@container az (min-width:941px){.cc-tessere.ofg-tessere:not(.as-tessere){grid-template-columns:repeat(5,minmax(0,1fr))}}
.cc-p-copie .cm-e-righe{padding:4px 0 0}
.cc-pannello .cc-testa .conto-elenco{margin-left:auto}
/* le righe a tabella della scheda vera (cc-v / cc-vl) anche per ordini, campioni e righe delle copie: il colore dello stato */
.cc-v .of-o-attesa{--st:#c98f00}
.cc-v .of-o-pronto{--st:#2f6fe8}
.cc-v .of-o-spedito{--st:#1e9e57}
.cc-v .of-o-blocco{--st:#da0219}
[data-tema="scuro"] .cc-v .of-o-attesa{--st:#f2c14e}
[data-tema="scuro"] .cc-v .of-o-pronto{--st:#8ab4ff}
[data-tema="scuro"] .cc-v .of-o-spedito{--st:#4fd08a}
[data-tema="scuro"] .cc-v .of-o-blocco{--st:#ff6b78}
.ofg-v-filtri{margin-bottom:10px}
.ofg-vl .cc-vr-art .ofg-art{display:flex;flex-direction:column;gap:1px;min-width:0}
.ofg-vl .ofg-art b{font-variant-numeric:tabular-nums}
.ofg-vl .ofg-art span{white-space:normal;overflow-wrap:anywhere}
.ofg-vl .ofg-art small{font-size:11.5px;color:var(--tenue);white-space:normal;overflow-wrap:anywhere}
.ofg-vl th.cc-vr-doc,.ofg-vl td.cc-vr-doc{width:98px}
.ofg-vl .ofg-impegno{font-weight:700;color:var(--st)}
.ofg-barrato{text-decoration:line-through;opacity:.7}
.ofg-vl-copia th.cc-vr-tot{width:130px}
.ofg-vl-copia td.cc-vr-tot{white-space:normal}

/* ---------- l'elenco delle opportunita' offline: chi l'ha inserita "dall'ufficio" ---------- */
.of-ufficio{display:inline-flex;margin-top:4px;padding:1px 8px;border:1px dashed var(--bordo-forte);border-radius:99px;font-size:11px;font-weight:700;color:var(--tenue);white-space:nowrap}
.ofg-articoli .ofg-nota{white-space:pre-line}

/* ---------- il catalogo offline ---------- */
a.ofg-cat-nome{color:inherit;text-decoration:none}
a.ofg-cat-nome:hover b{color:var(--accento-testo)}
a.ofg-cat-nome b{display:block}
.ofg-compcomm{margin:4px 0 0;font-size:12px;color:var(--tenue);line-height:1.35;overflow-wrap:anywhere}
.ofg-cat-filtri .cf-griglia{grid-template-columns:minmax(0,420px)}
.ofg-articolo{padding:18px}
.ofg-art-griglia{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
.ofg-art-foto img,.ofg-art-foto .cat-foto{display:grid;place-items:center;width:200px;height:200px;border-radius:10px;object-fit:cover;image-orientation:none;
  border:1px solid var(--bordo);background:var(--pannello2)}
.ofg-art-dati{display:flex;flex-direction:column;gap:8px;min-width:0}
.ofg-art-dati h2.cat-nome{margin:0;padding:0;border:0;font-size:22px}
.ofg-art-targa .cat-targa{margin:4px 0 0}
.ofg-art-comp{max-width:520px}
.ofg-art-azioni{margin-top:6px;flex-wrap:wrap}
.ofg-pdf-nota,.ofg-colori-nota{margin:0;white-space:normal}
.ofg-colori-nota{margin-bottom:12px}
.ofg-colori-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.ofg-colore{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.ofg-colore img,.ofg-colore .cat-foto{display:grid;place-items:center;width:100%;aspect-ratio:1;height:auto;border-radius:8px;object-fit:cover;image-orientation:none;
  border:1px solid var(--bordo);background:var(--pannello2)}
.ofg-colore .cat-foto svg{width:36px;height:36px;color:var(--debole)}
.ofg-colore figcaption{font-size:12px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
@media (max-width:700px){
  .ofg-articolo{padding:14px}
  .ofg-art-griglia{grid-template-columns:minmax(0,1fr)}
  .ofg-art-foto img,.ofg-art-foto .cat-foto{width:160px;height:160px}
  .ofg-colori-griglia{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}

/* ---------- le copie commissione offline ---------- */
.ofg-copie{list-style:none}
.ofg-copie-elenco .cm-e-righe{padding:8px 0 4px}
.cm-e-b .cm-e-foglio{text-decoration:none}
.ofg-figurina-vuota{display:grid;place-items:center;width:100%;height:100%;color:var(--debole);background:var(--cm-carta)}
.cm-e-meta .m-autore{color:var(--tenue)}
.ofg-cm-azioni{grid-auto-columns:52px}
.ofg-copia{padding:18px}
.ofg-copia-griglia{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:22px;align-items:start}
.ofg-copia-foglio{margin:0}
.ofg-copia-foglio img,.ofg-copia-foglio .cat-foto{display:block;width:100%;aspect-ratio:210 / 297;height:auto;object-fit:contain;border-radius:3px;background:var(--cm-carta);box-shadow:var(--cm-ombra-piccola)}
.ofg-copia-foglio figcaption{margin-top:8px;font-size:12px;color:var(--tenue)}
.ofg-copia-dati{display:flex;flex-direction:column;gap:8px;min-width:0}
.ofg-copia-dati h2.cm-e-cliente{margin:2px 0 0;padding:0;border:0;font-size:20px}
.ofg-copia-dati h2.cm-e-cliente a{color:inherit}
.ofg-copia-fatti{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;color:var(--tenue);font-size:13px}
@media (max-width:700px){
  .ofg-copia{padding:14px}
  .ofg-copia-griglia{grid-template-columns:minmax(0,1fr)}
  .ofg-copia-foglio{max-width:300px}
}

/* ---------- il messaggio breve in basso (scheda tecnica non salvata...) ---------- */
.ofg-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:70;transform:translateX(-50%);max-width:min(440px,calc(100vw - 24px));
  padding:11px 16px;border:1px solid var(--bordo);border-left:3px solid var(--ic-blu);border-radius:10px;background:var(--pannello);color:var(--testo);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55);font-size:13.5px;line-height:1.4}
@media (max-width:560px){.ofg-toast{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------- Impostazioni > Setup > Portale offline: cosa c'e' su ogni dispositivo ---------- */
.ofs-contenuto{display:block;margin-top:2px;color:var(--tenue);font-size:11.5px;line-height:1.35}
.ofs-contenuto.ofs-file{color:var(--of-blu-testo)}

/* ---------- l'avanzamento in sottofondo (richiesta di Andrea): una barra di 3px blu sotto la testata (blu come la spia
   quando scarica) e una piccola linguetta a destra; sul telefono una piccola carta in basso, sopra la fascia e le barre
   fisse della pagina. Mai bloccante: con la pagina scorsa la linguetta si fa trasparente e lascia passare i tocchi.
   Toccata apre "Prepara per l'offline"; alla fine verde "Pronto per l'offline" per 3 secondi (js/offline.js) ---------- */
.of-carico{position:fixed;top:calc(var(--testata) + var(--of-h) + 3px);right:18px;z-index:38;display:inline-flex;align-items:center;gap:7px;
  max-width:min(460px,calc(100vw - 36px));padding:4px 11px 5px 9px;border:1px solid var(--bordo);border-top:0;border-radius:0 0 8px 8px;
  background:var(--pannello);color:var(--testo);font-size:12px;font-weight:600;line-height:1.3;text-decoration:none;
  box-shadow:0 10px 20px -14px rgba(0,0,0,.55);transition:opacity .2s}
.of-carico[hidden]{display:none}
.of-carico:hover{color:var(--testo);border-color:var(--bordo-forte)}
.of-carico:focus-visible{outline:2px solid var(--of-blu);outline-offset:2px}
.of-carico-barra{position:fixed;left:0;right:0;top:calc(var(--testata) + var(--of-h));height:3px;overflow:hidden;pointer-events:none;
  background:color-mix(in srgb,var(--of-blu) 16%,transparent)}
.of-carico-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563eb,#3b82f6);transition:width .35s ease}
.of-carico-continuo .of-carico-barra i{width:38%;animation:of-carico-va 1.3s ease-in-out infinite}
@keyframes of-carico-va{from{transform:translateX(-100%)}to{transform:translateX(270%)}}
.of-carico-ico{display:grid;place-items:center;flex:none;color:var(--of-blu-testo)}
.of-carico-testo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-carico.of-carico-pronto,.of-carico-pronto .of-carico-ico{color:var(--of-verde-testo)}
.of-carico-pronto .of-carico-barra i{width:100%;background:var(--of-verde)}
.of-carico.of-carico-scorre{opacity:.55;pointer-events:none}
html.of-p-aperto .of-carico{display:none}
@media (prefers-reduced-motion:reduce){.of-carico-continuo .of-carico-barra i{animation:none;width:100%;opacity:.55}}
@media (max-width:560px){
  .of-carico{top:auto;left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom) + var(--of-carico-su,0px));z-index:29;max-width:none;
    padding:9px 12px 8px;border:1px solid var(--bordo);border-radius:10px;overflow:hidden;box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
  .of-carico-barra{position:absolute;top:0}
  .of-carico.of-carico-scorre{opacity:1;pointer-events:auto}
  html.of-con-carico .centro{padding-bottom:76px}
}
/* =====================================================================
   PORTALE OFFLINE, "Torna al portale" (11/10/2026; Andrea: aperte le pagine offline con la rete, da "Apri i dati
   offline", non c'era modo di tornare al portale). Nelle pagine offline (Offline/Default.html), quando il portale
   risponde: la fascia calma "Sei in linea" (of-st-inlinea: verde velato sul pannello, come la rete debole e' gialla
   velata; mai piena come "Di nuovo in linea") con "Torna al portale", e lo stesso comando fisso nella testata
   (.ofg-portale: tinta con bordo e raggio 7px come le icone delle righe, verde come la rete che c'e'; sul telefono solo
   l'icona in un quadrato di 40px, il nome in title e aria-label). Senza rete il comando sparisce (js/offline-guscio.js);
   con la rete debole sta anche nella fascia gialla.
   ===================================================================== */
.of-st-inlinea{--of:var(--of-verde);--of-t:var(--of-verde-testo)}
.of-b.of-st-inlinea{background:color-mix(in srgb,var(--of-verde) 13%,var(--pannello));color:var(--testo);
  border-bottom:1px solid color-mix(in srgb,var(--of-verde) 55%,transparent);box-shadow:0 10px 24px -18px rgba(0,0,0,.45)}
.of-b.of-st-inlinea .of-b-ico{background:var(--of-verde);border-color:var(--of-verde);color:#fff}
.of-b.of-st-inlinea .of-b-testo b{color:var(--of-verde-testo)}
.of-b.of-st-inlinea .of-b-testo span{color:var(--tenue);opacity:1}
.of-b.of-st-inlinea .of-b-bottone{border-color:var(--of-verde);background:var(--of-verde);color:#fff}
.of-b.of-st-inlinea .of-b-bottone:hover{background:var(--of-verde);filter:brightness(1.08)}
.of-b.of-st-debole .of-b-bottone{border-color:var(--of-ambra);background:var(--pannello);color:var(--of-ambra-testo)}
.of-b.of-st-debole .of-b-bottone:hover{background:color-mix(in srgb,var(--of-ambra) 14%,var(--pannello))}
.of-b.of-st-inlinea .of-b-bottone:focus-visible,.of-b.of-st-debole .of-b-bottone:focus-visible{outline-color:var(--accento2)}
.ofg-portale{--ic:var(--ic-verde);display:inline-flex;align-items:center;gap:7px;flex:none;height:34px;padding:0 13px 0 10px;
  border:1px solid color-mix(in srgb,var(--ic) 45%,transparent);border-radius:7px;background:color-mix(in srgb,var(--ic) 12%,transparent);
  color:var(--of-verde-testo);font-size:13px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;
  transition:background-color .15s,border-color .15s}
.ofg-portale svg{flex:none;color:var(--ic)}
.ofg-portale:hover{background:color-mix(in srgb,var(--ic) 24%,transparent);border-color:var(--ic);color:var(--of-verde-testo)}
.ofg-portale:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
@media (pointer:coarse){.ofg-portale{height:38px}}
@media (max-width:560px){
  .of-b.of-st-inlinea{border:1px solid color-mix(in srgb,var(--of-verde) 55%,transparent)}
  .of-b.of-st-inlinea .of-b-bottone{width:auto;padding:0 12px;gap:7px}
  .of-b.of-st-inlinea .of-b-bottone span{display:inline}
  .ofg-portale{width:40px;height:40px;padding:0;justify-content:center}
  .ofg-portale span{display:none}
  .ofg-portale svg{width:20px;height:20px}
}
/* ===== Vendite: il riepilogo in cima segue i filtri (11/10/2026, scheda del cliente e dell'agente) =====
   L'utente: "quando filtro qualcosa anche i grafici e conteggi devono adattarsi". Con dei filtri accesi il riepilogo
   (.cc-v-sintesi.filtrato) ha il bordo rosso; chiuso, accanto al venduto c'e' la pillola "Filtrato" (.cc-v-sint-filtro,
   i filtri nel title); aperto, in cima al riquadro del venduto la riga "Secondo i filtri" con i filtri scritti
   (.cc-v-secondo), nei colori delle pillole dei filtri accesi dell'elenco (.cc-vl-scelto). */
.cc-v-sintesi.filtrato{border-color:color-mix(in srgb,var(--accento) 50%,var(--bordo))}
.cc-v-sint-filtro{display:inline-flex;align-items:center;align-self:center;gap:5px;padding:2px 10px 2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accento) 10%,transparent);border:1px solid color-mix(in srgb,var(--accento) 45%,var(--bordo));font-size:12.5px;font-weight:700;letter-spacing:.02em;line-height:1.2;color:var(--accento-testo);white-space:nowrap}
.cc-v-sint-filtro svg{flex:none}
.cc-v-secondo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin:0 0 14px;padding:6px 12px;border-radius:12px;background:var(--pannello);border:1px solid color-mix(in srgb,var(--accento) 45%,var(--bordo));font-size:13.5px;line-height:1.35;color:var(--tenue)}
.cc-v-secondo svg{flex:none;color:var(--accento-testo)}
.cc-v-secondo b{min-width:0;color:var(--accento-testo);font-weight:700;overflow-wrap:anywhere}

/* =====================================================================================================================
   STORIA: IL MOMENTO APERTO E IL RITORNO (11/10/2026, js/storia.js + js/cliente-cruscotto.js + js/indietro.js)
   L'utente: "quando clicco su un elemento della storia, lui mi porta nell'oggetto che e' riferito, ma dovrebbe anche
   filtrarlo; se poi torno indietro dovrei ritrovarmi nella storia ma nella posizione che avevo abbandonato".
   - Le schede dei momenti si toccano tutte (non solo l'icona): portano a quello che c'e' dietro.
   - .sa-st-ritrovato: tornando, il bordo del momento lasciato si accende un attimo (fermo con il movimento ridotto).
   - .sa-st-arrivo: la striscia "Torna alla Storia" sopra la scheda in cui ha portato un momento (Vendite, Ordini aperti,
     Campioni e tirelle), nel colore della Storia (#3f51b5, scuro #9fa8ff, come la sua tessera), con il quadratino del
     tipo del momento e il suo nome. Il filtro acceso li' si vede con la sua X come gli altri.
   ===================================================================================================================== */
.sa-st-ev[data-st-k] > .sa-st-card{cursor:pointer}
.sa-st-ev.sa-st-ritrovato > .sa-st-card{animation:sa-st-ritrovato 2.6s ease-out 1}
@keyframes sa-st-ritrovato{
  0%{outline:3px solid var(--c);outline-offset:8px}
  18%{outline:3px solid var(--c);outline-offset:3px}
  70%{outline:3px solid color-mix(in srgb,var(--c) 55%,transparent);outline-offset:3px}
  100%{outline:3px solid transparent;outline-offset:3px}}
.sa-st-ev.sa-st-ritrovato > .sa-st-nodo{animation:sa-st-ritrovato-nodo 1.1s ease-out 2}
@keyframes sa-st-ritrovato-nodo{0%{transform:scale(1)}30%{transform:scale(1.14)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .sa-st-ev.sa-st-ritrovato > .sa-st-card{animation:none;outline:3px solid var(--c);outline-offset:3px}
  .sa-st-ev.sa-st-ritrovato > .sa-st-nodo{animation:none}
}

.sa-st-arrivo{
  --sa-st-ink:#3f51b5;
  --sa-st-ven:#0b8f9c;--sa-st-ord:#c96a0b;--sa-st-cmp:#6d4fc4;--sa-st-chat:#1e9e57;--sa-st-opp:#3b7bff;--sa-st-bq:#da0219;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;padding:9px 16px 9px 9px;
  border:1px solid color-mix(in srgb,var(--sa-st-ink) 38%,var(--bordo));border-left:4px solid var(--sa-st-ink);border-radius:12px;
  background:color-mix(in srgb,var(--sa-st-ink) 8%,var(--pannello));box-shadow:var(--rilievo,none);
  scroll-margin-top:calc(var(--testata,64px) + 12px)}
html[data-tema="scuro"] .sa-st-arrivo{
  --sa-st-ink:#9fa8ff;
  --sa-st-ven:#45d0d8;--sa-st-ord:#f0a04b;--sa-st-cmp:#b39cff;--sa-st-chat:#4fd08a;--sa-st-opp:#8ab4ff;--sa-st-bq:#ff4b5c;
  background:color-mix(in srgb,var(--sa-st-ink) 11%,var(--pannello))}
.sa-st-arrivo .bottone.sa-st-torna{min-height:40px;padding:8px 16px;border-color:color-mix(in srgb,var(--sa-st-ink) 60%,var(--bordo));background:var(--pannello);color:var(--sa-st-ink);font-weight:700}
.sa-st-arrivo .bottone.sa-st-torna:hover{border-color:var(--sa-st-ink);background:var(--sa-st-ink);color:#fff}
html[data-tema="scuro"] .sa-st-arrivo .bottone.sa-st-torna:hover{color:#0b0c0f}
.sa-st-arrivo-da{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;margin:0;font-size:13px;line-height:1.35;color:var(--tenue)}
.sa-st-arrivo-da i{flex:none;width:12px;height:12px;border-radius:3px;background:var(--c,var(--sa-st-ink))}
.sa-st-arrivo-da b{min-width:0;font-weight:700;color:var(--testo);overflow-wrap:anywhere}
/* telefono: il pulsante largo quanto la striscia, sotto il momento da cui si arriva */
@media (max-width:560px){
  .sa-st-arrivo{padding:9px 10px 10px 9px}
  .sa-st-arrivo .bottone.sa-st-torna{flex:1 1 100%;justify-content:center;min-height:44px}
}

/* GLI ARTICOLI NELLE SCHEDE DELLA STORIA (11/10/2026, l'utente: "quando ci sono articoli la foto deve essere piu'
   piccola, a fianco del nome articolo, e il nome articolo deve essere messo per intero"). Vendite, ordini aperti e
   campioni e tirelle hanno tutti una riga per articolo (.sa-st-righe; campioni .sa-st-righe-cmp al posto dei ritagli
   grandi .sa-st-pezzi con il nome tagliato sotto): a sinistra il colore del tessuto in un quadrato di 30px con gli
   angoli leggeri (per i campioni il ritaglio, con l'esito nell'angolo), accanto nome e codice per intero, che vanno a
   capo e non si tagliano mai con i puntini (anche le etichette degli articoli delle opportunita'), a destra la quantita'. */
.sa-st-righe li{grid-template-columns:30px minmax(0,1fr) auto;gap:3px 11px}
.sa-st-righe .sa-st-sw{width:30px;height:30px;border-radius:7px}
.sa-st-storia .sa-st-art b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.sa-st-storia .sa-st-chip{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
.sa-st-righe-cmp .sa-st-ritaglio{width:30px;height:30px}
.sa-st-righe-cmp .sa-st-ritaglio::before{border-radius:7px;-webkit-mask:none;mask:none}
.sa-st-righe-cmp .sa-st-esito{top:-6px;right:-6px;width:16px;height:16px;border-radius:5px}
.sa-st-righe-cmp .sa-st-esito::before{width:10px;height:10px}

/* =====================================================================
   COPIA COMMISSIONI - IL CASSETTO DEGLI ALLEGATI DEL VISORE (11/10/2026, proposta B "cassetto con linguetta" scelta da
   Andrea). js/commissioni-visore.js, classi cm-vis-cas-*. Il cassetto e' un fratello del palco nella stessa cella della
   griglia della finestra (mai dentro il palco, che ha touch-action:none e i gesti del dito): per questo barra, palco e
   piede hanno la loro riga scritta. Sulla finestra: cm-vis-cas-lato (computer, iPad in orizzontale: a destra, con la
   linguetta rossa sul bordo) o cm-vis-cas-basso (telefono, iPad in verticale: dal basso, con la maniglia),
   cm-vis-con-cas (la copia ha allegati) e cm-vis-cas-aperto. Il palco riceve da misura() lo spazio che il cassetto
   prende: --cm-vis-destra e --cm-vis-sotto (lo zoom e la pillola delle pagine li seguono). Colori solo dai gettoni dei
   temi; icone d'azione quadrate (.icona-riga ir-consulta, blu per consultare); niente caselle.
   ===================================================================== */
.qs-finestra.cm-vis{grid-template-columns:minmax(0,1fr)}
.qs-finestra.cm-vis > .cm-vis-barra{grid-row:1;grid-column:1}
.qs-finestra.cm-vis > .cm-vis-palco{grid-row:2;grid-column:1}
.qs-finestra.cm-vis > .cm-vis-giu{grid-row:3;grid-column:1}
.cm-vis-cas{grid-row:2;grid-column:1;position:relative;z-index:8;min-width:0;min-height:0}
.cm-vis-cas[hidden]{display:none}
.cm-vis-cas-man{display:none}
/* lo zoom e la pillola delle pagine stanno nello spazio libero; il foglio scivola quando il cassetto si apre o si chiude */
.cm-vis-palco .cm-v-zoom.cm-vis-zoom{left:calc(50% - var(--cm-vis-destra,0px) / 2);bottom:calc(20px + var(--cm-vis-sotto,0px))}
.cm-vis.cm-vis-cas-basso.cm-vis-cas-aperto .cm-vis-zoom{display:none}
.cm-vis.cm-vis-cas-lato.cm-vis-cas-aperto .cm-vis-vicino.dopo{display:none}
.cm-vis-palco.cm-vis-scorre .cm-vis-carta,.cm-vis-palco.cm-vis-scorre .cm-vis-vicino,.cm-vis-palco.cm-vis-scorre .cm-vis-pag{
  transition:left .32s cubic-bezier(.2,.8,.2,1),top .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),height .32s cubic-bezier(.2,.8,.2,1)}

/* ---------- di lato: il cassetto a destra, la linguetta rossa sul suo bordo ---------- */
.cm-vis-cas-lato .cm-vis-cas{justify-self:end;align-self:stretch;display:flex;width:clamp(320px,28vw,404px);margin:16px 16px 16px 0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.cm-vis-cas-lato .cm-vis-cas:not(.aperto){transform:translateX(calc(100% + 16px))}
.cm-vis-cas-ling{position:absolute;left:-48px;top:26px;display:flex;flex-direction:column;align-items:center;gap:9px;width:48px;padding:13px 0 12px;
  border:0;border-radius:12px 0 0 12px;background:var(--accento);color:#fff;font:inherit;cursor:pointer;
  box-shadow:-10px 12px 26px -12px rgba(0,0,0,.65);touch-action:manipulation}
.cm-vis-cas-ling:hover{filter:brightness(1.08)}
.cm-vis-cas-ling:focus-visible{outline:3px solid var(--accento2);outline-offset:2px}
.cm-vis-cas-basso .cm-vis-cas-ling{display:none}
.cm-vis-cas-ling-n{font-size:22px;font-weight:800;line-height:1}
.cm-vis-cas-ling-t{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.cm-vis-cas-ling-mic{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,.2)}
.cm-vis-cas-ling-mic[hidden]{display:none}
.cm-vis-cas-ling-f{display:grid;place-items:center}
.cm-vis-cas-pann{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  border:1px solid var(--bordo-forte);border-left:3px solid var(--accento);border-radius:0 16px 16px 16px;background:var(--pannello);
  box-shadow:0 34px 70px -24px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.08)}
html[data-tema="scuro"] .cm-vis-cas-pann{background:rgba(20,22,26,.97)}
html[data-tema="chiaro"] .cm-vis-cas-pann{box-shadow:0 30px 60px -26px rgba(70,45,20,.5),0 0 0 1px rgba(0,0,0,.04)}
.cm-vis-cas-lato .cm-vis-cas:not(.aperto) .cm-vis-cas-pann{visibility:hidden;transition:visibility 0s .32s}
.cm-vis-cas-testa{display:flex;align-items:center;gap:10px;padding:14px 12px 12px 16px;border-bottom:1px solid var(--bordo)}
.cm-vis-cas-tt{flex:1 1 auto;min-width:0}
.cm-vis-cas-tt b{display:block;font-size:17px;font-weight:800;line-height:1.15}
.cm-vis-cas-tt small{display:block;margin-top:2px;font-size:12px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-vis-cas-conto{flex:none}
.cm-vis-cas-conto .conto-elenco{font-size:22px}
.cm-vis-cas-corpo{position:relative;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:2px 14px 26px;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.cm-vis-cas-attesa{margin:18px 2px;color:var(--tenue);font-size:13px}
.cm-vis-cas-errore{display:grid;justify-items:start;gap:10px;margin:18px 2px;font-size:13.5px;font-weight:700}
.cm-vis-cas-errore p{margin:0}

/* ---------- le sezioni ---------- */
.cm-vis-cas-sez-t{display:flex;align-items:center;gap:8px;margin:16px 2px 9px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.cm-vis-cas-sez-n{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 5px;border-radius:999px;
  background:color-mix(in srgb,var(--testo) 10%,transparent);color:var(--testo);font-size:11px;letter-spacing:0}
.cm-vis-cas-indice{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin:0 -14px;padding:10px 14px;
  background:var(--pannello);border-bottom:1px solid var(--bordo)}
html[data-tema="scuro"] .cm-vis-cas-indice{background:rgb(20,22,26)}
.cm-vis-cas-ind{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:1px solid var(--bordo-forte);border-radius:999px;
  background:var(--pannello2);color:var(--testo);font:600 12.5px var(--carattere);cursor:pointer}
.cm-vis-cas-ind svg{flex:none;color:var(--tenue)}
.cm-vis-cas-ind b{font-weight:800;color:var(--accento-testo)}
.cm-vis-cas-ind:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}

/* ---------- da ascoltare: la nota dettata con il lettore e il riassunto ---------- */
.cm-vis-cas-nota{padding:13px 13px 11px;border:1px solid var(--bordo-forte);border-top:3px solid var(--accento);border-radius:12px;background:var(--pannello2)}
.cm-vis-cas-nota.audio{border-top-color:#0f8f8a}
.cm-vis-cas-nota + .cm-vis-cas-nota{margin-top:10px}
.cm-vis-cas-lett{display:flex;align-items:center;gap:12px;min-width:0}
.icona-riga.cm-vis-cas-play{width:46px;height:46px;border-radius:8px}
.icona-riga.cm-vis-cas-play svg{width:20px;height:20px}
.cm-vis-cas-lett-dx{flex:1 1 auto;display:grid;gap:5px;min-width:0}
.cm-vis-cas-lett-t{font-size:14px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.cm-vis-cas-lett-r2{display:flex;align-items:center;gap:10px;min-width:0}
.cm-vis-cas-onda{position:relative;flex:1 1 auto;display:flex;align-items:center;gap:2px;height:30px;min-width:0;overflow:hidden;border-radius:4px;cursor:pointer;touch-action:pan-y}
.cm-vis-cas-onda i{flex:1 1 0;min-width:1px;border-radius:2px;background:color-mix(in srgb,var(--testo) 26%,transparent);pointer-events:none}
.cm-vis-cas-onda i.fatta{background:var(--accento-testo)}
.cm-vis-cas-onda:focus-within{outline:2px solid var(--accento2);outline-offset:2px}
.cm-vis-cas-cursore{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.cm-vis-cas-tempo{flex:none;font-size:12.5px;font-weight:700;color:var(--tenue);font-variant-numeric:tabular-nums}
.cm-vis-cas-et{margin:13px 0 6px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.cm-vis-cas-punti{margin:0;padding:0 0 0 18px}
.cm-vis-cas-punti li{margin:0 0 5px;font-size:13.5px;line-height:1.45}
.cm-vis-cas-punti li::marker{color:var(--accento-testo)}
.cm-vis-cas-stato{margin:10px 0 0;font-size:12.5px;font-weight:700;color:var(--tenue)}
.cm-vis-cas-stato.errore{color:var(--accento-testo)}
.cm-vis-cas-stato[hidden]{display:none}
.cm-vis-cas-piede{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.cm-vis-cas-fondo{display:flex;align-items:center;gap:10px;margin-top:9px}
.cm-vis-cas-fondo .cm-vis-cas-meta{flex:1 1 auto;min-width:0;margin:0}
.cm-vis-cas-fondo .cm-vis-cas-scarica{flex:none}
.cm-vis-cas-link{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border:1px solid color-mix(in srgb,var(--ic-blu) 34%,transparent);
  border-radius:6px;background:color-mix(in srgb,var(--ic-blu) 11%,transparent);color:var(--ic-blu);font:700 12.5px var(--carattere);cursor:pointer;touch-action:manipulation}
.cm-vis-cas-link svg{flex:none}
.cm-vis-cas-link:hover{background:color-mix(in srgb,var(--ic-blu) 22%,transparent);border-color:var(--ic-blu)}
.cm-vis-cas-link[aria-expanded="true"]{background:var(--ic-blu);border-color:var(--ic-blu);color:#fff}
html[data-tema="scuro"] .cm-vis-cas-link[aria-expanded="true"]{color:#04141c}
.cm-vis-cas-link:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.cm-vis-cas-esteso{margin-top:10px;padding:10px 12px;max-height:340px;overflow-y:auto;overscroll-behavior:contain;border-radius:8px;
  background:color-mix(in srgb,var(--testo) 5%,transparent);font-size:13.5px;line-height:1.5}
.cm-vis-cas-esteso[hidden]{display:none}
.cm-vis-cas-esteso h4{margin:12px 0 6px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.cm-vis-cas-esteso h4:first-child{margin-top:2px}
.cm-vis-cas-esteso p{margin:0 0 6px;white-space:pre-line;overflow-wrap:anywhere}
.cm-vis-cas-meta{margin:9px 0 0;font-size:11.5px;color:var(--tenue)}

/* ---------- foto: miniature grandi con il titolo; il tocco apre la giostra della finestra degli allegati ---------- */
.cm-vis-cas-foto{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cm-vis-cas-lato .cm-vis-cas.molti .cm-vis-cas-foto{grid-template-columns:repeat(3,minmax(0,1fr))}
.cm-vis-cas-ft{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4 / 3;padding:0;border:1px solid var(--bordo-forte);border-radius:10px;
  overflow:hidden;background:#0b0c0e;color:#f3efe6;cursor:zoom-in;touch-action:manipulation}
.cm-vis-cas-ft img,.cm-vis-cas-ft video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.cm-vis-cas-ft:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.cm-vis-cas-ft-t{position:absolute;left:0;right:0;bottom:0;padding:24px 9px 7px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;
  font:700 11.5px/1.25 var(--carattere);text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-vis-cas-lato .cm-vis-cas.molti .cm-vis-cas-ft-t{padding:18px 6px 5px;font-size:10.5px}
.cm-vis-cas-ft-play{position:absolute;left:50%;top:44%;display:grid;place-items:center;width:38px;height:38px;border-radius:8px;
  background:rgba(0,0,0,.6);color:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(255,255,255,.3)}

/* ---------- documenti e scansioni: foglio colorato, nome, "PDF - 319 KB - 11/10", Apri e Scarica ---------- */
.cm-vis-cas-docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cm-vis-cas-doc{--fc:var(--ic-grigio);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px 10px;
  border:1px solid var(--bordo-forte);border-left:3px solid var(--fc);border-radius:10px;background:var(--pannello2)}
.cm-vis-cas-doc.scansione{--fc:#a66e14}
.cm-vis-cas-doc.quaderno{--fc:#8d5b2e}
html[data-tema="scuro"] .cm-vis-cas-doc.quaderno{--fc:#d9a46f}
.cm-vis-cas-segno{position:relative;flex:none;display:grid;place-items:center;width:36px;height:44px;color:var(--fc)}
.cm-vis-cas-segno .doc-foglio{position:absolute;left:0;top:0;transform:scale(.47);transform-origin:top left}
.cm-vis-cas-segno.cm-vis-cas-scan{width:40px;height:40px;border-radius:8px;background:color-mix(in srgb,var(--fc) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--fc) 34%,transparent)}
.cm-vis-cas-doc-t{min-width:0}
.cm-vis-cas-doc-t b{display:block;font-size:13.5px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-vis-cas-doc-t small{display:block;margin-top:2px;font-size:11.5px;color:var(--tenue)}
.cm-vis-cas-doc-az{display:flex;gap:6px}

/* ---------- appunti: la nota scritta e la trascrizione ---------- */
.cm-vis-cas-app{--fc:#2563eb;padding:12px 13px;border:1px solid var(--bordo-forte);border-top:3px solid var(--fc);border-radius:12px;background:var(--pannello2)}
.cm-vis-cas-app.trascrizione{--fc:#1e9e57}
.cm-vis-cas-app + .cm-vis-cas-app{margin-top:10px}
.cm-vis-cas-app > b{display:block;font-size:13.5px;font-weight:800;overflow-wrap:anywhere}
.cm-vis-cas-app-di{display:block;margin-top:2px;font-size:11.5px;color:var(--tenue)}
.cm-vis-cas-app-testo{margin:6px 0 0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
p.cm-vis-cas-app-testo{white-space:pre-line}
.cm-vis-cas-app-testo.corto{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- dal basso: telefono e iPad in verticale ---------- */
.cm-vis-cas-basso .cm-vis-cas{align-self:end;justify-self:stretch;display:flex;flex-direction:column;max-height:100%}
.cm-vis-cas-basso .cm-vis-cas.aperto{height:46%}
.cm-vis-cas-basso .cm-vis-cas-man{position:relative;display:grid;justify-items:center;gap:7px;flex:none;width:100%;padding:8px calc(14px + env(safe-area-inset-right)) 11px calc(14px + env(safe-area-inset-left));
  border:0;border-top:1px solid var(--bordo-forte);border-radius:18px 18px 0 0;background:var(--pannello);color:var(--testo);font:inherit;text-align:left;cursor:pointer;
  box-shadow:0 -14px 30px -18px rgba(0,0,0,.75);touch-action:manipulation}
html[data-tema="scuro"] .cm-vis-cas-basso .cm-vis-cas-man{background:#15171b}
.cm-vis-cas-man:focus-visible{outline:3px solid var(--accento2);outline-offset:-3px}
.cm-vis-cas-grab{display:block;width:44px;height:5px;border-radius:99px;background:color-mix(in srgb,var(--testo) 30%,transparent)}
.cm-vis-cas-man-riga{display:flex;align-items:center;gap:9px;width:100%;min-width:0}
.cm-vis-cas-man-g{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accento);color:#fff}
.cm-vis-cas-man-n{flex:none;font-size:15px;font-weight:800;white-space:nowrap}
.cm-vis-cas-chips{display:flex;gap:5px;min-width:0;overflow:hidden}
.cm-vis-cas-chips .odm-tag{gap:4px}
.cm-vis-cas-man-f{flex:none;display:grid;place-items:center;margin-left:auto;color:var(--tenue)}
.cm-vis-cas-basso .cm-vis-cas-testa{display:none}
.cm-vis-cas-basso .cm-vis-cas:not(.aperto) .cm-vis-cas-pann{display:none}
.cm-vis-cas-basso .cm-vis-cas-pann{border:0;border-radius:0;box-shadow:none;background:var(--pannello)}
html[data-tema="scuro"] .cm-vis-cas-basso .cm-vis-cas-pann{background:#15171b}
html[data-tema="scuro"] .cm-vis-cas-basso .cm-vis-cas-indice{background:#15171b}
.cm-vis-cas-basso .cm-vis-cas-corpo{padding:0 calc(14px + env(safe-area-inset-right)) 22px calc(14px + env(safe-area-inset-left))}
.cm-vis-cas-basso .cm-vis-cas-foto{grid-template-columns:repeat(3,minmax(0,1fr))}
.cm-vis-cas-basso .cm-vis-cas.aperto .cm-vis-cas-pann{animation:cmVisCasSu .26s cubic-bezier(.2,.8,.2,1)}
@keyframes cmVisCasSu{from{transform:translateY(26px);opacity:.3}to{transform:none;opacity:1}}
@media (min-width:684px){
  .cm-vis-cas-basso .cm-vis-cas-corpo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-content:start;align-items:start}
  .cm-vis-cas-basso .cm-vis-cas-indice{grid-column:1 / -1}
  .cm-vis-cas-basso .cm-vis-cas-foto{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:683px){
  .cm-vis-cas-basso .cm-vis-cas.aperto{height:78%}
  .cm-vis-palco .cm-vis-pagpill:not([hidden]){bottom:calc(12px + var(--cm-vis-sotto,0px))}
  .cm-vis-palco .cm-vis-fila.aperta:not([hidden]){bottom:calc(66px + var(--cm-vis-sotto,0px))}
  .cm-vis-cas-man-n{font-size:16px}
}
@media (max-width:683px){
  /* l'indice delle sezioni su una riga sola: pillole piu' piccole, senza icone */
  .cm-vis-cas-ind{height:28px;padding:0 9px;font-size:12px}
  .cm-vis-cas-ind svg{display:none}
}
/* le pillole della maniglia: solo quelle che ci stanno intere */
@media (max-width:420px){.cm-vis-cas-chips .odm-tag:nth-child(n+4){display:none}}
@media (max-width:359px){.cm-vis-cas-chips .odm-tag:nth-child(n+3){display:none}}
/* sul tocco i pulsanti blu del cassetto alti come i quadrati (38px) */
@media (pointer:coarse){.cm-vis-cas-link{min-height:38px}}

/* ---------- la testata del visore sull'iPad in verticale (e nelle finestre strette): due righe ----------
   Fino all'11/10/2026 i cinque pulsanti schiacciavano il titolo ("CC...") e la pillola NON VALIDATA. Sulla prima riga
   Chiudi e il titolo con le pillole, intero; sulla seconda < 3 di 20 > a sinistra e le azioni a destra, con il nome. */
@media (min-width:684px) and (max-width:940px){
  .cm-vis-barra{flex-wrap:wrap;row-gap:8px}
  .cm-vis-titolo{flex:1 1 calc(100% - 170px)}
  .cm-vis-nav{order:2;padding:0;border-left:0;border-right:0}
  .cm-vis-azioni{order:3;margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  .cm-vis-cas-lato .cm-vis-cas,.cm-vis-palco.cm-vis-scorre .cm-vis-carta,.cm-vis-palco.cm-vis-scorre .cm-vis-vicino,.cm-vis-palco.cm-vis-scorre .cm-vis-pag{transition:none}
  .cm-vis-cas-basso .cm-vis-cas.aperto .cm-vis-cas-pann{animation:none}
}

/* ===== 11/10/2026: il gruppo COMMERCIALE nelle tessere della scheda del cliente e dell'agente (richiesta di Andrea: "le
   copie commissione raggruppate graficamente con i pannelli Opportunita' e Attivita'"). Lo stesso disegno del gruppo
   PRODUZIONE (cc-gruppo, cc-g-riga): largo due sul computer, su tutta la riga sull'iPad (righe affiancate) e sul telefono
   (righe una sotto l'altra). Righe: Opportunita' (blu), Copie commissione (seppia, il colore della carta: il verde acqua e'
   gia' di Clienti e Vendite), Attivita' (rosso). Nove colonne in tutte e due le schede:
   cliente  Scheda | COMMERCIALE(2) | PRODUZIONE(2) | Chat | Allegati | Documenti | Storia
   agente   Scheda | Clienti | COMMERCIALE(2) | PRODUZIONE(2) | Chat | Allegati | Documenti ===== */
.cc-t-copie{--c:#9a6b43}
html[data-tema="scuro"] .cc-t-copie{--c:#dcae86}
.cc-g-riga.cc-t-periodo{--c:#3b7bff}
html[data-tema="scuro"] .cc-g-riga.cc-t-periodo{--c:#8ab4ff}
.cc-gruppo.cc-t-commerciale{--g1:#3b7bff;--g2:#9a6b43;--g3:#da0219}
html[data-tema="scuro"] .cc-gruppo.cc-t-commerciale{--g1:#8ab4ff;--g2:#dcae86;--g3:#da0219}
.cc-tessere .cc-gruppo.cc-t-commerciale::before{background:linear-gradient(90deg,var(--g1) 0 33.3%,var(--g2) 33.3% 66.6%,var(--g3) 66.6% 100%)}
@container az (max-width:940px){
  /* tre per riga, i gruppi su tutta la riga con le tre righe affiancate; la Scheda su tutta la riga nel cliente, larga
     due nell'agente (accanto ai Clienti): le file restano piene */
  .cc-tessere:not(.as-tessere) .cc-t-scheda{grid-column:1 / -1}
  .as-tessere .cc-t-scheda{grid-column:span 2}
  .cc-tessere .cc-gruppo .cc-g-righe{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cc-tessere .cc-gruppo .cc-g-riga{padding:6px 9px}
}
@container az (max-width:620px){
  .cc-tessere .cc-gruppo .cc-g-righe{grid-template-columns:minmax(0,1fr);gap:5px}
  .cc-tessere .cc-gruppo .cc-g-riga{padding:8px 10px}
}

/* ===== il riquadro Copie commissione (Clienti/Copie.ashx): le due viste VERE della pagina Copia Commissioni (elenco riga
   B e pila "scrivania", classi cm-*), con l'interruttore Elenco | Pila e la barra della validazione. Qui solo la testata
   e gli spazi dentro il riquadro: il resto e' quello della pagina ===== */
.cc-p-copie .cc-v-attesa{margin:0;padding:22px 20px}
.cc-p-copie > .avviso{margin:12px 20px 0}
.cc-p-copie .cc-copie-testa{gap:10px 14px}
.cc-p-copie .cc-copie-testa small{flex:1 1 220px;min-width:0}
.cc-copie-azioni{display:flex;align-items:center;gap:10px;margin-left:auto}
.cc-p-copie .cc-copie-testa .cm-viste{flex:none;height:40px;padding:3px;border-radius:10px}
.cc-p-copie .cc-copie-testa .cm-viste li label{padding:0 14px;font-size:14px;gap:7px}
.cc-p-copie .cc-copie-testa .bottone{margin-left:0}
.cc-p-copie .cc-copie-nuova{height:40px;padding:0 14px;gap:7px;font-size:13.5px;font-weight:700;border-radius:10px}
.cc-p-copie .avviso{margin:12px 20px 0}
.cc-p-copie .cm-barra-elenco{margin:0;padding:14px 20px 2px}
.cc-p-copie .cm-e-elenco{padding:12px 20px 20px}
.cc-p-copie .cm-p-tavolo{margin:12px 20px 20px}
.cc-p-copie .cc-copie-vuota{padding:8px 20px 22px}
.cc-p-copie .cm-nessuna{margin:12px 20px 20px}
@container az (max-width:620px){
  .cc-copie-azioni{flex:1 1 100%;flex-wrap:wrap;margin-left:0}
  .cc-p-copie .cc-copie-testa .cm-viste{flex:1 1 100%}
  .cc-p-copie .cc-copie-testa .cm-viste li{flex:1 1 0}
  .cc-p-copie .cc-copie-testa .cm-viste li label{justify-content:center;width:100%}
  .cc-p-copie .cc-copie-nuova{flex:1 1 100%;justify-content:center}
  .cc-p-copie .avviso{margin:10px 12px 0}
  .cc-p-copie .cm-barra-elenco{padding:12px 12px 2px}
  .cc-p-copie .cm-e-elenco{padding:10px 10px 14px}
  .cc-p-copie .cm-p-tavolo{margin:10px 8px 14px}
  .cc-p-copie .cc-copie-vuota{padding:6px 12px 18px}
}

/* ===================== NOTA DETTATA E TRASCRIZIONE: LE LINGUETTE (11/10/2026) =====================
   Richiesta di Andrea: dentro l'oggetto, al posto di riassunto / traduzione / trascrizione impilati, tre linguette in
   quest'ordine: "Riassunto - <lingua parlata>", "Riassunto - Italiano" (solo se si e' parlato un'altra lingua e la
   traduzione c'e') e "Trascrizione", la prima aperta. Le stesse nel blocco degli oggetti (js/odm.js, linguetteDelTesto)
   e nel cassetto degli allegati del visore della Copia Commissione (js/commissioni-visore.js, schedeTestoCas), li' in
   sola lettura.
   Una fila di schede come un selettore a segmenti, quadrata come le icone del portale: quella aperta ha il fondo chiaro
   (grafite con un velo rosso nel tema scuro), il bordo e il filo rosso del logo, e la sigla della lingua (EN, IT) in un
   quadratino che diventa rosso. Tutte in grassetto, cosi' la fila non cambia larghezza quando si sceglie. Mai caselle da
   spuntare: sono pulsanti con role="tab".
   Stretta (telefono, cassetto del visore, colonna degli articoli) la scritta va su due righe, RIASSUNTO piccolo sopra e
   la lingua sotto, le schede si dividono la riga in parti uguali; con tre linguette sotto i 420 px via anche la sigla. Mai scorrimento di
   lato: la fila non e' mai piu' larga del suo posto (container odmling). */
.odm-ling{--ling-binario:color-mix(in srgb,var(--testo) 6%,transparent);--ling-scelta:var(--pannello);
  container:odmling / inline-size;margin:0 0 12px}
html[data-tema="scuro"] .odm-ling{--ling-binario:rgba(0,0,0,.30);--ling-scelta:color-mix(in srgb,var(--accento) 16%,var(--pannello2))}
.odm-ling-fila{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;box-sizing:border-box;max-width:100%;
  margin:0 0 10px;padding:4px;border:1px solid var(--bordo);border-radius:10px;background:var(--ling-binario)}
.odm-ling-voce{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:34px;margin:0;padding:5px 14px 5px 7px;
  border:1px solid transparent;border-radius:7px;background:transparent;color:var(--tenue);font:700 13px/1.2 var(--carattere);
  text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
@media (hover:hover){.odm-ling-voce:hover{color:var(--testo);background:color-mix(in srgb,var(--testo) 7%,transparent)}}
.odm-ling-voce[aria-selected="true"]{border-color:var(--accento);background:var(--ling-scelta);color:var(--testo);
  box-shadow:inset 0 -2px 0 var(--accento),0 1px 3px rgba(0,0,0,.10)}
.odm-ling-voce:focus-visible{outline:2px solid var(--accento2);outline-offset:2px}
.odm-ling-sigla{flex:none;display:inline-grid;place-items:center;box-sizing:border-box;min-width:26px;height:20px;padding:0 4px;border-radius:4px;
  background:color-mix(in srgb,var(--testo) 11%,transparent);color:var(--tenue);font-size:10.5px;font-weight:800;letter-spacing:.04em;line-height:1}
.odm-ling-sigla svg{display:block}
.odm-ling-voce[aria-selected="true"] .odm-ling-sigla{background:var(--accento);color:#fff}
.odm-ling-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.odm-ling-sep{color:var(--tenue);font-weight:600}
.odm-ling-pann[hidden]{display:none}
/* il testo nella linguetta si legge tutto, scorrendo dentro il riquadro (non piu' l'anteprima tagliata di .odm-testo) */
.odm-testo.odm-ling-testo{max-height:340px;margin:0;overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:none;mask-image:none}
.odm-testo.odm-ling-ricco{white-space:normal}
.odm-ling-ricco h4{margin:12px 0 4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.odm-ling-ricco h4:first-child{margin-top:0}
.odm-ling-ricco ul{margin:0 0 4px;padding:0 0 0 18px}
.odm-ling-ricco li{margin:0 0 3px}
.odm-ling-ricco li::marker{color:var(--accento-testo)}
.odm-ling-ricco p{margin:0 0 6px}
.odm-ling-nota{margin:0 0 8px;font-size:11.5px;font-style:italic;color:var(--tenue)}
.odm-ling-vuoto{margin:0;padding:12px 14px;border:1px dashed var(--bordo-forte);border-radius:var(--raggio);font-size:13px;color:var(--tenue)}
.odm-ling-pann .odm-in-corso{margin:0 0 10px}
.odm-campo.odm-ling-casella{min-height:150px;max-height:420px}
@media (pointer:coarse){.odm-ling-voce{min-height:40px}}
/* stretta: due righe, parti uguali (tre linguette sotto i 600 px, due sotto i 420) */
@container odmling (max-width:600px){
  .odm-ling.tre .odm-ling-fila{display:grid;width:100%}
  .odm-ling.tre .odm-ling-voce{justify-content:flex-start;gap:7px;padding:6px 8px 6px 6px}
  .odm-ling.tre .odm-ling-nome{white-space:normal;line-height:1.18}
  .odm-ling.tre .odm-ling-k{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
  .odm-ling.tre .odm-ling-k:only-child{font-size:12px;letter-spacing:0;text-transform:none;color:inherit;overflow-wrap:break-word;hyphens:auto}
  .odm-ling.tre .odm-ling-sep{display:none}
  .odm-ling.tre .odm-ling-l{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@container odmling (max-width:420px){
  .odm-ling .odm-ling-fila{display:grid;width:100%}
  .odm-ling .odm-ling-voce{justify-content:flex-start;gap:7px;padding:6px 8px 6px 6px}
  .odm-ling .odm-ling-nome{white-space:normal;line-height:1.18}
  .odm-ling .odm-ling-k{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
  .odm-ling .odm-ling-k:only-child{font-size:12px;letter-spacing:0;text-transform:none;color:inherit;overflow-wrap:break-word;hyphens:auto}
  .odm-ling .odm-ling-sep{display:none}
  .odm-ling .odm-ling-l{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@container odmling (max-width:420px){
  .odm-ling.tre .odm-ling-sigla{display:none}
  .odm-ling.tre .odm-ling-voce{justify-content:center;padding:6px 4px;text-align:center}
}
/* nel cassetto degli allegati del visore: la fila sotto il lettore, il testo nel riquadro del cassetto */
.cm-vis-cas-nota .odm-ling{margin:12px 0 0}
.cm-vis-cas-nota .odm-ling-fila{margin-bottom:9px}
.cm-vis-cas-nota .odm-ling-pann .cm-vis-cas-esteso{margin-top:8px}
.cm-vis-cas-nota .odm-ling-pann > .cm-vis-cas-esteso:first-child{margin-top:0}
.cm-vis-cas-nota .odm-ling-pann .cm-vis-cas-piede{margin-top:8px}

/* ===================== NOTA DETTATA: QUATTRO LINGUETTE (11/10/2026, seconda richiesta di Andrea) =====================
   Per il personale interno, quando si e' parlato un'altra lingua, le linguette sono quattro: "Riassunto - <lingua>",
   "Riassunto - Italiano", "Trascrizione - <lingua>", "Trascrizione - Italiano" (js/odm.js e js/commissioni-visore.js
   mettono la classe "quattro"). Larghe stanno su una riga; sotto gli 860 px del loro posto (iPad in verticale, cassetto
   del visore, telefono) vanno su due righe, due per riga: sopra i riassunti, sotto le trascrizioni, la stessa lingua
   nella stessa colonna. Sotto i 420 px valgono anche le due righe di scritta del blocco di prima (RIASSUNTO piccolo sopra,
   la lingua sotto) e la sigla resta. Si aggiunge DOPO il blocco "NOTA DETTATA E TRASCRIZIONE: LE LINGUETTE". */
@container odmling (max-width:860px){
  .odm-ling.quattro .odm-ling-fila{display:grid;width:100%;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container odmling (max-width:420px){
  .odm-ling.quattro .odm-ling-fila{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =====================================================================
   SPILLA DEL MENU (11/10/2026, lavoro menu-spilla). L'utente: "una spilletta per fissarlo, in modo che non si chiuda se
   un utente vuole tenerlo attivo". Sopra i 980px, in cima alla barra: la scritta e la spilla quadrata (.icona-riga,
   FPC.Master #btnMenuSpilla, js/app.js). Spenta e' grigia e inclinata; accesa e' piena del rosso del logo e dritta, e il
   menu resta aperto ACCANTO al contenuto: html[data-menu="fissato"] porta --barra a 264px, quindi il contenuto si sposta
   (e con lui tutto quello che usa --barra). A sole icone resta solo la spilla, centrata, alla stessa altezza: quando il
   menu si allarga al passaggio ne' la spilla ne' le voci si spostano (a sole icone 16-4+32+6, aperto 20-8+32+6: sempre
   50px). La riga sta stretta apposta: a sole icone le voci non scorrono e su uno schermo basso finirebbero sotto il piede
   della barra (succedeva gia' sotto i 767px di altezza). Per questo:
   - senza mouse (iPad orizzontale) a sole icone la spilla non c'e': il menu si apre dal pulsante accanto al logo, e
     aperto la spilla compare (li' nessuno ha il dito su una voce mentre il menu si allarga);
   - sugli schermi bassi (fino a 860px) le voci del menu hanno 3px in meno sopra e sotto, a sole icone e aperte allo
     stesso modo: con 11 voci sono 66px, piu' della riga della spilla.
   Sotto i 981px (cassetto del telefono) non c'e'.
   ===================================================================== */
.barra-spilla{display:none}
@media (min-width:981px){
  html[data-menu="fissato"]{--barra:264px}
  .barra-spilla{display:flex;align-items:center;gap:10px;flex:none;min-height:32px;margin:-8px 0 6px;padding:0 0 0 12px}
  .barra-spilla .spilla-testo{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--debole);cursor:pointer;user-select:none}
  html[data-menu="fissato"] .barra-spilla .spilla-testo{color:var(--accento-testo)}
  html[data-menu="compatto"] .barra-spilla{justify-content:center;margin:-4px 0 6px;padding:0}
  html[data-menu="compatto"] .barra-spilla .spilla-testo{display:none}
  .icona-riga.menu-spilla svg{transform:rotate(45deg);transition:transform .18s ease}
  .icona-riga.menu-spilla.attiva svg{transform:none}
  .icona-riga.menu-spilla.attiva .spilla-testa{fill:currentColor}
  .icona-riga.menu-spilla.attiva,.icona-riga.menu-spilla.attiva:hover{background:var(--accento);border-color:var(--accento);color:#fff}
  html[data-tema="scuro"] .icona-riga.menu-spilla.attiva{color:#fff}
}
@media (min-width:981px) and (hover:none){
  html[data-menu="compatto"] .barra-spilla{display:none}
}
@media (min-width:981px) and (max-height:860px){
  .barra > nav .voce,html[data-menu="compatto"] .barra > nav .voce{padding-top:8px;padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.icona-riga.menu-spilla svg{transition:none}}
/* =====================================================================
   IL LISTINO E LO SCONTO NELLA STRISCIA DELLA COPIA COMMISSIONE (11/10/2026, richiesta di Andrea)
   Nella striscia del "+" della riga: accanto al prezzo un piccolo campo SCONTO % e, con uno sconto, il prezzo del campo
   barrato in rosso e il prezzo scontato in rosso (come si scrivera' sul foglio). Sotto, la riga del LISTINO
   (dbo.FPC_Listino): un chip per famiglia colore con il prezzo "4,42 EUR / Mt", una nota piccola (rotoli minimi; la data
   prezzo solo per il personale interno) e il quadratino verde ir-crea che applica il prezzo. La riga c'e' solo se
   l'articolo ha prezzi validi e la striscia e' allargata. Classi cm-f-lis-*, cm-f-str-sconto, cm-f-str-netto; nel tavolo
   della validazione cm-v-prezzo / cm-v-lordo / cm-v-netto / cm-v-sconto.
   ===================================================================== */
.cm-f-str-sconto{flex:0 0 96px}
.cm-f-sconto-riga{display:flex;align-items:baseline;gap:3px;min-width:0}
.cm-f-sconto-riga input{width:100%;text-align:right}
.cm-f-sconto-pc{flex:none;font-size:14px;font-weight:800;color:var(--tenue)}
.cm-f-str-sconto.pieno{border-color:color-mix(in srgb,var(--ic-rosso) 60%,var(--bordo-forte))}
.cm-f-str-sconto.pieno .cm-f-sconto-pc{color:var(--ic-rosso)}
/* il prezzo del campo barrato in rosso quando c'e' uno sconto, come sul foglio */
.cm-f-str-prezzo.scontato input{text-decoration:line-through;text-decoration-color:var(--ic-rosso);text-decoration-thickness:2px;color:var(--tenue)}
/* il prezzo scontato: rosso, tratteggiato (non si scrive: si calcola) */
.cm-f-str-netto{display:grid;align-content:center;gap:1px;box-sizing:border-box;flex:none;height:46px;padding:0 13px;border-radius:12px;
  border:1.5px dashed color-mix(in srgb,var(--ic-rosso) 55%,transparent);background:color-mix(in srgb,var(--ic-rosso) 9%,transparent)}
.cm-f-str-netto[hidden]{display:none}
.cm-f-str-netto small{font-size:10px;font-weight:800;letter-spacing:.07em;line-height:1.1;text-transform:uppercase;color:var(--ic-rosso);white-space:nowrap}
.cm-f-str-netto b{font:800 19px/1.15 var(--carattere);letter-spacing:.05em;color:var(--ic-rosso)}
/* il prezzo appena preso dal listino: il campo lampeggia verde */
.cm-f-str-campo.cm-f-preso{animation:cm-f-preso .8s ease-out}
@keyframes cm-f-preso{0%{border-color:var(--ic-verde);box-shadow:0 0 0 0 rgba(30,158,87,.55)}100%{box-shadow:0 0 0 12px rgba(30,158,87,0)}}
/* la riga del LISTINO: a sinistra "LISTINO" e il codice (sul computer nello spazio a sinistra di colore e prezzo), poi i chip */
.cm-f-str .cm-f-str-linea.cm-f-str-listino{align-items:stretch;gap:8px;animation:cm-f-extra .2s ease-out both}
.cm-f-str .cm-f-str-listino[hidden]{display:none}
.cm-f-lis-testa{display:grid;align-content:center;justify-items:end;flex:0 0 90px;min-width:0;line-height:1.15;text-align:right}
.cm-f-lis-testa small{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.cm-f-lis-testa b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:800;letter-spacing:.03em;color:var(--testo)}
.cm-f-lis-voci{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.cm-f-lis-voce{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:46px;max-width:100%;padding:4px 4px 4px 12px;border:1.5px solid var(--bordo-forte);
  border-radius:12px;background:var(--pannello2);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:border-color .15s,background-color .15s}
.cm-f-lis-voce:hover{border-color:color-mix(in srgb,var(--ic-verde) 60%,var(--bordo-forte))}
.cm-f-lis-testo{display:grid;gap:1px;min-width:0;line-height:1.12}
.cm-f-lis-fam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tenue)}
.cm-f-lis-valore{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.cm-f-lis-valore b{font-size:17px;font-weight:800;letter-spacing:.01em;color:var(--testo);font-variant-numeric:tabular-nums}
.cm-f-lis-um{font-size:12px;font-weight:700;color:var(--tenue)}
.cm-f-lis-nota{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-style:normal;color:var(--tenue)}
.cm-f-str .icona-riga.cm-f-lis-applica{width:38px;height:38px;border-radius:9px}
.cm-f-str .icona-riga.cm-f-lis-applica svg{width:19px;height:19px}
.cm-f-lis-applica .cm-f-lis-fatto{display:none}
.cm-f-lis-applica.attiva .cm-f-lis-fatto{display:block}
.cm-f-lis-applica.attiva svg:first-child{display:none}
.cm-f-lis-voce.applicato{border-color:var(--ic-verde);background:color-mix(in srgb,var(--ic-verde) 12%,var(--pannello2))}
.cm-f-lis-voce.applicato .cm-f-lis-valore b{color:var(--ic-verde)}
/* striscia media (iPad verticale): niente spazio a sinistra, la testa piu' stretta */
.cm-f-str.media .cm-f-str-sconto{flex:0 0 84px}
.cm-f-str.media .cm-f-lis-testa{flex:0 0 auto;min-width:44px}
/* telefono: colore su una riga, prezzo / sconto / scontato sotto; il listino col titolo sopra e due chip per riga */
.cm-f-str.stretta .cm-f-str-extra{flex-wrap:wrap}
.cm-f-str.stretta .cm-f-str-colore{flex:1 1 100%}
.cm-f-str.stretta .cm-f-str-prezzo{flex:1 1 0;min-width:0;height:42px}
.cm-f-str.stretta .cm-f-str-sconto{flex:0 0 80px;height:42px;padding:0 8px}
.cm-f-str.stretta .cm-f-str-netto{height:42px;padding:0 9px}
.cm-f-str.stretta .cm-f-str-netto b{font-size:17px}
.cm-f-str.stretta .cm-f-str-listino{flex-wrap:wrap;gap:6px}
.cm-f-str.stretta .cm-f-lis-testa{display:flex;align-items:baseline;justify-content:flex-start;gap:6px;flex:1 1 100%;text-align:left}
.cm-f-str.stretta .cm-f-lis-voce{flex:1 1 calc(50% - 3px);min-width:0;gap:6px;padding-left:9px}
.cm-f-str.stretta .cm-f-lis-valore b{font-size:16px}
.cm-f-str.stretta .cm-f-lis-nota{white-space:normal;line-height:1.2}
/* il prezzo scontato che vola sul foglio */
.cm-f-volante.cm-f-volante-rosso{border-color:#da0219;color:#da0219}
/* il tavolo della validazione: il prezzo di partenza barrato, lo scontato in rosso, la pillola dello sconto */
.cm-v-prezzo .cm-v-lordo{color:var(--tenue);text-decoration:line-through;text-decoration-color:#da0219;text-decoration-thickness:2px}
.cm-v-prezzo .cm-v-netto{color:var(--ic-rosso);font-weight:800}
.cm-v-prezzo .cm-v-sconto{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;background:color-mix(in srgb,var(--ic-rosso) 14%,transparent);
  color:var(--ic-rosso);font-weight:800;line-height:1.5}
/* la famiglia SUGGERITA dal colore scritto (BIANCO / B.CO / WHITE = i bianchi, il resto COLORATI): contorno blu e la
   linguetta "per questo colore" sul bordo; non si applica da sola */
.cm-f-lis-voce{position:relative}
.cm-f-lis-sugg{display:none}
.cm-f-lis-voce.suggerito{border-color:var(--ic-blu);box-shadow:0 0 0 3px color-mix(in srgb,var(--ic-blu) 22%,transparent)}
.cm-f-lis-voce.suggerito .cm-f-lis-sugg{display:block;position:absolute;top:-13px;left:9px;padding:0 6px;border-radius:5px;background:var(--ic-blu);
  color:#fff;font-size:9px;font-weight:800;letter-spacing:.06em;line-height:15px;text-transform:uppercase;white-space:nowrap;pointer-events:none}
html[data-tema="scuro"] .cm-f-lis-voce.suggerito .cm-f-lis-sugg{color:#04141c}
.cm-f-lis-voce.suggerito.applicato{border-color:var(--ic-verde)}
.cm-f-str .cm-f-str-linea.cm-f-str-listino{padding-top:9px}

/* =====================================================================
   PLANCIA (proposta B "Plancia di comando", scelta da Andrea l'11/10/2026): prefisso pb-.
   Catalogo (Tessuti/Catalogo.aspx), scheda dell'opportunita' e articoli in modifica: testata di comando, numeri,
   elenco ad alta densita' (una riga per articolo con le cifre in colonna), capsule dei tipi di campione e il
   pannello di dettaglio comune (js/pannello-articolo.js). Solo le variabili dei temi (scuro "nero e rosso" e chiaro
   "carta calda"): stesse classi, cambiano solo le variabili. Niente sfocature sulle liste, animazioni con
   transform/opacity, colonne che spariscono con le container query (nessuno script per l'impaginazione).
   ===================================================================== */
.pb{
  --pb-linea:color-mix(in srgb,var(--testo) 8%,transparent);
  --pb-linea2:color-mix(in srgb,var(--testo) 14%,transparent);
  --pb-hover:color-mix(in srgb,var(--testo) 3.5%,transparent);
  --pb-sel:color-mix(in srgb,var(--accento) 11%,transparent);
  --pb-ok:#45d483;--pb-ok-velo:rgba(69,212,131,.10);--pb-ok-bordo:rgba(69,212,131,.42);
  --pb-ko:#ff5c6b;--pb-ko-velo:rgba(255,75,92,.10);--pb-ko-bordo:rgba(255,92,107,.50);
  --pb-superficie:linear-gradient(180deg,color-mix(in srgb,var(--pannello2) 70%,var(--pannello)),var(--pannello));
  --pb-ombra:0 1px 0 rgba(255,255,255,.05) inset,0 22px 46px -28px rgba(0,0,0,.95);
  --pb-cond:82%;
  --pb-mono:Consolas,"SFMono-Regular",Menlo,monospace;
  color:var(--testo);
}
html[data-tema="chiaro"] .pb{
  --pb-ok:#13804a;--pb-ok-velo:rgba(30,158,87,.09);--pb-ok-bordo:rgba(30,158,87,.42);
  --pb-ko:#c4001a;--pb-ko-velo:rgba(218,2,25,.07);--pb-ko-bordo:rgba(218,2,25,.42);
  --pb-sel:color-mix(in srgb,var(--accento) 7%,transparent);
  --pb-superficie:linear-gradient(180deg,#fffefb,var(--pannello));
  --pb-ombra:0 1px 2px rgba(16,34,43,.06),0 14px 30px -20px rgba(16,34,43,.35);
}
html[data-tema="scuro"] .pb .s-standard{--fascia:var(--ic-blu)}
.pb *{box-sizing:border-box}

/* ---------- testata di comando ---------- */
.pb-testa{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 22px;
  margin:0 0 14px;padding:20px 22px 0;
  border:1px solid var(--bordo);border-radius:14px;
  background:
    radial-gradient(90% 160% at 0% 0%,color-mix(in srgb,var(--tc,var(--accento)) 17%,transparent) 0,transparent 52%),
    radial-gradient(60% 120% at 100% 0%,color-mix(in srgb,var(--accento) 9%,transparent) 0,transparent 60%),
    var(--pb-superficie);
  box-shadow:var(--pb-ombra);
}
.pb-testa::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:-1;
  background:linear-gradient(90deg,var(--tc,var(--accento)) 0,color-mix(in srgb,var(--accento) 80%,transparent) 26%,transparent 72%);
}
.pb-codice{
  display:grid;place-items:center;align-content:center;gap:3px;width:96px;height:80px;
  border:1px solid color-mix(in srgb,var(--tc,var(--accento)) 45%,var(--bordo));border-radius:12px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc,var(--accento)) 20%,transparent),transparent 70%),var(--pannello2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.pb-codice b{font-size:31px;line-height:1;font-weight:800;font-stretch:var(--pb-cond);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pb-codice small{font-size:11px;font-weight:600;color:var(--tenue);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pb-id{min-width:0}
.pb-occhiello{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 6px;font-size:12px;color:var(--tenue)}
.pb-occhiello .tag-categoria{margin:0}
.pb-titolo{margin:0;font-size:25px;line-height:1.15;font-weight:750;letter-spacing:-.01em;overflow-wrap:anywhere}
.pb-cliente{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0;font-size:14px}
.pb-cliente a{font-weight:700;color:var(--testo);border-bottom:1px solid color-mix(in srgb,var(--testo) 30%,transparent)}
.pb-cliente span{color:var(--tenue);font-size:13px}
.pb-azioni{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-self:start}
.pb-azioni .bottone{height:38px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pb-azioni .icona-riga{width:38px;height:38px}
.pb-meta{
  grid-column:1/-1;display:flex;flex-wrap:wrap;margin:16px -22px 0;padding:0;
  border-top:1px solid var(--pb-linea);background:color-mix(in srgb,var(--sfondo) 22%,transparent);
}
.pb-meta > div{display:grid;gap:3px;padding:10px 18px 11px;border-right:1px solid var(--pb-linea);min-width:0}
.pb-meta > div:first-child{padding-left:22px}
.pb-meta > div.pb-meta-lungo{flex:1;border-right:0}
.pb-meta dt{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--debole)}
.pb-meta dd{margin:0;display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;white-space:nowrap}
.pb-meta dd small{font-weight:500;color:var(--tenue);font-size:12px}
.pb-meta .vp-stato{margin:0}
.pb-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--bordo-forte);font-size:11.5px;font-weight:700}
.pb-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.pb-pill.inserita{color:var(--pb-ok);border-color:var(--pb-ok-bordo);background:var(--pb-ok-velo)}
.pb-pill.bozza{color:var(--tenue)}
.pb-avatar{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:color-mix(in srgb,var(--ic-blu) 22%,transparent);color:var(--ic-blu);font-size:10.5px;font-weight:800}
.pb-salvato{display:inline-flex;align-items:center;gap:7px;color:var(--pb-ok);font-size:12.5px;font-weight:600;white-space:nowrap}
.pb-salvato::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px var(--pb-ok-velo)}

/* testata in modifica: titolo e categoria si scrivono qui */
.pb-campo-titolo{display:block;width:100%;max-width:620px;margin:0;padding:5px 10px;border:1px solid var(--bordo);border-radius:8px;background:color-mix(in srgb,var(--sfondo) 30%,transparent);color:var(--testo);font:inherit;font-size:20px;font-weight:700;letter-spacing:-.01em}
.pb-campo-titolo::placeholder{color:var(--tenue);font-weight:600}
.pb-cat-scelta{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 8px 0 9px;border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);border-radius:999px;background:color-mix(in srgb,var(--tc) 13%,transparent);color:var(--tc);font-size:11.5px;font-weight:700}
.pb-cat-scelta::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc)}

/* schede Appunti / Articoli: interruttore a due posizioni */
.pb-schede{display:inline-flex;gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello)}
.pb-schede button{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:var(--tenue);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pb-schede button svg{flex:none}
.pb-schede button.attiva{background:var(--pannello2);color:var(--testo);box-shadow:inset 0 0 0 1px var(--bordo-forte),0 6px 16px -10px rgba(0,0,0,.8)}
.pb-schede button .pb-conta{min-width:24px;height:20px;padding:0 6px;border-radius:6px;background:var(--accento);color:#fff;font-size:12px;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.pb-schede button small{font-size:12px;font-weight:500;color:var(--debole)}

/* ---------- riepilogo numerico ---------- */
.pb-kpi{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 14px;
  border:1px solid var(--bordo);border-radius:12px;overflow:hidden;
  background:var(--pb-superficie);box-shadow:var(--pb-ombra);
}
.pb-k{position:relative;min-width:0;padding:13px 16px 15px;border-left:1px solid var(--pb-linea)}
.pb-k:first-child{border-left:0}
.pb-k-eti{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--tenue);white-space:nowrap}
.pb-k-eti svg{flex:none;opacity:.85}
.pb-k-num{display:flex;align-items:baseline;gap:5px;margin-top:6px;font-size:30px;line-height:1;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap}
.pb-k-num i{font-style:normal;font-size:13px;font-weight:650;color:var(--tenue);letter-spacing:0}
.pb-k-num s{text-decoration:none;font-size:18px;color:var(--debole);font-weight:600}
.pb-k small{display:block;margin-top:5px;font-size:12px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-k.allarme .pb-k-num{color:var(--pb-ko)}
.pb-k.allarme::before,.pb-k.bene::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--pb-ko)}
.pb-k.bene::before{background:var(--pb-ok)}
.pb-k.bene .pb-k-num{color:var(--pb-ok)}
.pb-k-barra{display:flex;gap:2px;height:5px;margin-top:9px;border-radius:3px;overflow:hidden;background:var(--pb-linea)}
.pb-k-barra i{display:block;height:100%}
.pb-k-barra i.ok{background:var(--pb-ok)}
.pb-k-barra i.ko{background:var(--pb-ko)}
.pb-k-barra i.no{background:var(--debole)}
.pb-k-barra i.s-nuova{background:var(--verde)}
.pb-k-barra i.s-standard{background:var(--ic-blu)}
.pb-k-barra i.s-stock{background:var(--ic-teal)}

/* ---------- barra sopra l'elenco: aggiungi, segmenti, densita' ---------- */
.pb-aggiungi{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.pb-aggiungi .sa-cerca{flex:1;margin:0}
.pb-aggiungi .bottone{height:50px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pb-barra{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 10px}
.pb-seg{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--bordo);border-radius:10px;background:var(--pannello)}
.pb-seg button{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--tenue);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.pb-seg button b{min-width:22px;height:20px;padding:0 6px;border-radius:5px;background:var(--pb-linea);color:var(--testo);font-size:12px;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.pb-seg button.attiva{background:var(--pannello2);color:var(--testo);box-shadow:inset 0 0 0 1px var(--bordo-forte)}
.pb-seg button.ko b{background:var(--pb-ko-velo);color:var(--pb-ko);box-shadow:inset 0 0 0 1px var(--pb-ko-bordo)}
.pb-seg button.ok b{background:var(--pb-ok-velo);color:var(--pb-ok);box-shadow:inset 0 0 0 1px var(--pb-ok-bordo)}
.pb-seg button i{display:block;width:8px;height:8px;border-radius:2px;background:var(--fascia,var(--debole))}
.pb-seg button.spento{opacity:.55}
.pb-seg.piccolo button{height:28px;padding:0 10px;font-size:12.5px}
.pb-barra-dx{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--tenue)}

/* ---------- corpo: elenco + pannello (master-detail) ---------- */
.pb-corpo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.pb-corpo.con-pannello{grid-template-columns:minmax(0,1fr) 404px}

/* ---------- l'elenco ad alta densita' ---------- */
.pb-lista{
  container:pbl/inline-size;position:relative;min-width:0;
  border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);box-shadow:var(--pb-ombra);
  overflow:clip;
}
.pb-griglia{display:grid;align-items:center;column-gap:12px}
.pb-v-deal .pb-griglia{grid-template-columns:30px 46px minmax(210px,1fr) 168px 168px 92px 92px 108px}
.pb-v-deal.modifica .pb-griglia{grid-template-columns:30px 46px minmax(200px,1fr) 184px 184px 112px}
.pb-v-cat .pb-griglia{grid-template-columns:46px minmax(210px,1.3fr) 78px 78px 72px 60px minmax(140px,.9fr) 64px 88px 84px}

.pb-th{
  position:sticky;top:var(--testata);z-index:3;min-height:42px;padding:0 14px 0 0;
  background:color-mix(in srgb,var(--pannello2) 97%,transparent);border-bottom:1px solid var(--pb-linea2);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);
}
.pb-th > span{display:flex;flex-direction:column;justify-content:center;min-width:0;white-space:nowrap}
.pb-th > span small{font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--debole);margin-top:2px}
.pb-th > span small b{color:var(--ic-blu);font-weight:700}
.pb-th .dx,.pb-g .dx,.pb-tot .dx{text-align:right;align-items:flex-end;justify-content:flex-end}
.pb-th .ordina::after{content:" \2193";color:var(--accento-testo)}

.pb-g{
  min-height:36px;padding:0 14px 0 0;border-top:1px solid var(--pb-linea2);
  background:linear-gradient(90deg,color-mix(in srgb,var(--testo) 5.5%,transparent),transparent 65%);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);
}
.pb-th + .pb-g{border-top:0}
.pb-g .pb-g-nome{grid-column:1/4;display:flex;align-items:center;gap:9px;padding-left:12px;min-width:0;font-stretch:var(--pb-cond)}
.pb-g .pb-g-nome svg{flex:none;opacity:.7}
.pb-g .pb-g-nome b{color:var(--testo);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-g .pb-g-nome em{font-style:normal;min-width:22px;height:19px;padding:0 6px;border-radius:5px;background:var(--pb-linea);color:var(--testo);font-size:11px;line-height:19px;text-align:center;letter-spacing:0;font-stretch:100%}
.pb-g > span{font-size:12px;letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:2px}
.pb-g > span b{color:var(--testo)}

.pb-r{position:relative;min-height:62px;padding:8px 14px 8px 0;border-top:1px solid var(--pb-linea);transition:background-color .12s}
.pb-r::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--fascia,var(--debole))}
.pb-r:hover{background:var(--pb-hover)}
.pb-r.sel{background:var(--pb-sel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accento) 38%,transparent)}
.pb-r.sel::before{top:0;bottom:0;width:4px;border-radius:0;background:var(--accento);box-shadow:0 0 14px 1px color-mix(in srgb,var(--accento) 70%,transparent)}
.pb-r > *{min-width:0}
.pb-r .c-n{grid-column:1;justify-self:end;font-family:var(--pb-mono);font-size:11.5px;color:var(--debole)}
.pb-r.sel .c-n{color:var(--accento-testo);font-weight:700}
.pb-foto{display:block;width:46px;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--pb-linea2);background:var(--pannello2)}
.pb-foto img{display:block;width:100%;height:100%;object-fit:cover;image-orientation:none}
.pb-foto.vuota{display:grid;place-items:center;color:var(--debole);border-style:dashed}
.pb-nome{display:block;font-size:14.5px;font-weight:750;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.005em}
.pb-sotto{display:flex;align-items:center;gap:6px;margin-top:4px;min-width:0;white-space:nowrap;overflow:hidden}
.pb-sotto .cat-codice{margin:0;padding:0 6px;font-size:11.5px;line-height:18px}
.pb-sotto .cat-stato{font-size:9px;padding:1px 6px}
.pb-sotto .cat-collezione{font-size:9px;padding:0 5px}
.pb-mini{display:block;margin-top:4px;font-size:11.5px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pb-mini b{color:var(--testo);font-weight:600}

/* capsula del tipo di campione: verde compilato, grigio vuoto, rosso se l'articolo li ha tutti vuoti */
.pb-cap{display:flex;align-items:center;gap:8px;min-height:40px;padding:5px 10px;border:1px solid var(--bordo);border-radius:8px;font-variant-numeric:tabular-nums}
.pb-cap .q{font-size:15.5px;font-weight:750;letter-spacing:-.01em;white-space:nowrap}
.pb-cap .um{font-size:11.5px;font-weight:650;color:var(--tenue)}
.pb-cap .col{margin-left:auto;max-width:84px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-cap .tn{display:none;font-size:11px;font-weight:700;color:var(--tenue);letter-spacing:.03em;white-space:nowrap}
.pb-cap.ok{border-color:var(--pb-ok-bordo);background:var(--pb-ok-velo)}
.pb-cap.ok::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--pb-ok);box-shadow:0 0 0 3px var(--pb-ok-velo)}
.pb-cap.vuoto{border-style:dashed;color:var(--debole);background:transparent}
.pb-cap.vuoto .q{font-weight:500;color:var(--debole)}
.pb-cap.ko{border-color:var(--pb-ko-bordo);background:var(--pb-ko-velo);color:var(--pb-ko)}
.pb-cap.ko .q{color:var(--pb-ko);font-size:12.5px;font-weight:700}
/* in modifica: quantita' e colore si scrivono nella capsula */
.pb-cap.in{padding:4px;gap:4px}
.pb-cap.in::before{display:none}
.pb-cap.in label{display:flex;align-items:center;flex:none;width:78px;height:32px;padding:0 7px 0 2px;border-radius:6px;background:color-mix(in srgb,var(--sfondo) 45%,transparent);border:1px solid var(--pb-linea2)}
.pb-cap.in input{min-width:0;width:100%;height:30px;padding:0 4px;border:0;background:transparent;color:var(--testo);font:inherit;font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;outline:0}
.pb-cap.in input::placeholder{color:currentColor;opacity:.6;font-weight:500}
.pb-cap.in label i{font-style:normal;font-size:11px;font-weight:700;color:var(--tenue);margin-left:2px}
.pb-cap.in .pb-in-col{flex:1;min-width:0;height:32px;padding:0 8px;border:1px solid var(--pb-linea2);border-radius:6px;background:color-mix(in srgb,var(--sfondo) 45%,transparent);color:var(--testo);font:inherit;font-size:12.5px;font-weight:600;text-transform:uppercase;outline:0}
.pb-cap.in .pb-in-col::placeholder{text-transform:none;font-weight:500;color:var(--debole)}
.pb-cap.in.ko label,.pb-cap.in.ko .pb-in-col{border-color:var(--pb-ko-bordo)}
.pb-cap.in.ko input::placeholder{color:var(--pb-ko)}

.pb-r .c-prezzo,.pb-r .c-imp{justify-self:end;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pb-r .c-prezzo{color:var(--tenue)}
.pb-r .c-imp{font-weight:700}
.pb-r .c-imp i,.pb-r .c-prezzo i{font-style:normal;font-size:11px;color:var(--debole);margin-left:2px}
.pb-r .c-az{display:flex;justify-content:flex-end;gap:6px}
.pb-r .c-az .icona-riga{width:30px;height:30px}
.pb-r .c-az .icona-riga.cat-pdf{width:34px}
.pb-r.sel .pb-apri{background:var(--accento);border-color:var(--accento);color:#fff}

/* numeri della targa nel catalogo */
.pb-r .c-num{justify-self:end;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pb-r .c-num b{display:block;font-size:15px;font-weight:750;letter-spacing:-.01em}
.pb-r .c-num small{display:block;margin-top:1px;font-size:10.5px;color:var(--debole)}
.pb-r .c-num.vuoto b{color:var(--debole);font-weight:500}
.pb-r .c-num .eti{display:none}
.pb-compbar{display:flex;height:7px;border-radius:4px;overflow:hidden;gap:1px;background:var(--pb-linea)}
.pb-compbar span{display:block;height:100%}
.pb-comptesto{display:block;margin-top:5px;font-size:11.5px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pb-comptesto b{color:var(--testo);font-weight:650}
.pb-colconta{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border:1px solid var(--pb-linea2);border-radius:7px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--testo)}
.pb-colconta svg{color:var(--tenue)}
.pb-colconta.zero{color:var(--debole);border-style:dashed}
.pb-data{font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pb-data small{display:block;font-size:10.5px;color:var(--debole)}
.pb-r .c-pz,.pb-tot .pb-tot-tel,.pb-g .pb-g-tot{display:none}

/* totali in fondo, allineati alle colonne */
.pb-tot{min-height:50px;padding:0 14px 0 0;border-top:1px solid var(--pb-linea2);background:color-mix(in srgb,var(--pannello2) 92%,transparent);font-variant-numeric:tabular-nums}
.pb-tot .pb-tot-eti{grid-column:1/4;padding-left:16px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.pb-tot .pb-tot-eti small{margin-left:8px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--debole)}
.pb-tot b{font-size:15.5px;font-weight:800;white-space:nowrap}
.pb-tot b i{font-style:normal;font-size:11.5px;color:var(--tenue);margin-left:3px}
.pb-tot .rosso{color:var(--accento-testo)}

/* scorciatoie da tastiera: solo dove c'e' un mouse */
.pb-tasti{display:none;align-items:center;flex-wrap:wrap;gap:6px 18px;margin:10px 2px 0;font-size:12px;color:var(--tenue)}
@media (hover:hover) and (pointer:fine){.pb-tasti{display:flex}}
.pb-tasti span{display:inline-flex;align-items:center;gap:6px}
.pb kbd{display:inline-grid;place-items:center;min-width:22px;height:21px;padding:0 6px;border:1px solid var(--bordo-forte);border-bottom-width:2px;border-radius:5px;background:var(--pannello2);color:var(--testo);font:600 11px/1 var(--pb-mono)}

/* ---------- pannello di dettaglio (ispettore) ---------- */
.pb-isp{
  position:sticky;top:calc(var(--testata) + 12px);max-height:calc(100vh - var(--testata) - 24px);overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--bordo-forte);border-radius:14px;background:var(--pannello);
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 34px 70px -30px rgba(0,0,0,.95);
  animation:pb-entra .22s cubic-bezier(.2,.8,.2,1) both;
}
html[data-tema="chiaro"] .pb-isp{box-shadow:0 22px 50px -24px rgba(16,34,43,.45)}
@keyframes pb-entra{from{transform:translateX(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes pb-sale{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pb-isp{animation:none}}
.pb-isp-barra{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;height:48px;padding:0 10px 0 14px;border-bottom:1px solid var(--pb-linea2);background:color-mix(in srgb,var(--pannello2) 97%,transparent)}
.pb-isp-barra .pb-isp-tit{flex:1;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);white-space:nowrap}
.pb-isp-barra .pb-isp-pos{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--testo);white-space:nowrap}
.pb-isp-barra .icona-riga{width:30px;height:30px}
.pb-isp-maniglia{display:none}
.pb-isp-id{display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;padding:14px 16px}
.pb-isp-foto{position:relative;display:block;width:116px;height:116px;border-radius:12px;overflow:hidden;border:1px solid var(--pb-linea2);background:var(--pannello2)}
.pb-isp-foto img{display:block;width:100%;height:100%;object-fit:cover;image-orientation:none}
.pb-isp-foto.vuota{display:grid;place-items:center;color:var(--debole);border-style:dashed}
.pb-isp-foto .pb-badge{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;background:rgba(6,7,9,.78);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.pb-isp-fam{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accento-testo)}
.pb-isp-nome{margin:3px 0 0;font-size:21px;line-height:1.12;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.pb-isp-cod{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:7px}
.pb-isp-cod .cat-codice{margin:0}
.pb-isp-az{display:flex;gap:6px;margin-top:10px}
.pb-isp-az .icona-riga{width:34px;height:34px}
.pb-isp-az .icona-riga.cat-pdf{width:38px}

.pb-b{padding:13px 16px 15px;border-top:1px solid var(--pb-linea)}
.pb-b-tit{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.pb-b-tit > i{display:inline-grid;place-items:center;flex:none;width:19px;height:19px;border-radius:5px;background:var(--pb-linea);color:var(--testo);font:700 10.5px/1 var(--pb-mono);font-style:normal;letter-spacing:0}
.pb-b-tit > span{flex:1}
.pb-b-tit small{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--debole);white-space:nowrap}
.pb-b.evidenza{background:linear-gradient(180deg,color-mix(in srgb,var(--accento) 7%,transparent),transparent 85%)}
.pb-b.evidenza .pb-b-tit > i{background:var(--accento);color:#fff}

/* B: tipi di campione nel pannello */
.pb-camp{display:grid;gap:8px}
.pb-camp-riga{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1.1fr);align-items:center;gap:8px;padding:6px 6px 6px 10px;border:1px solid var(--bordo);border-radius:9px}
.pb-camp-riga .t b{display:block;font-size:13.5px;font-weight:700}
.pb-camp-riga .t small{display:block;margin-top:1px;font-size:11px;color:var(--debole);white-space:nowrap}
.pb-camp-riga .t small b{display:inline;font-size:11px;color:var(--ic-blu);font-weight:700}
.pb-camp-riga label{display:flex;align-items:center;height:36px;padding:0 8px 0 2px;border:1px solid var(--pb-linea2);border-radius:7px;background:color-mix(in srgb,var(--sfondo) 40%,transparent)}
.pb-camp-riga label input{min-width:0;width:100%;height:34px;border:0;background:transparent;color:var(--testo);font:inherit;font-size:16px;font-weight:750;text-align:right;outline:0;font-variant-numeric:tabular-nums}
.pb-camp-riga label i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--tenue);margin-left:3px}
.pb-camp-riga > input{min-width:0;height:36px;padding:0 10px;border:1px solid var(--pb-linea2);border-radius:7px;background:color-mix(in srgb,var(--sfondo) 40%,transparent);color:var(--testo);font:inherit;font-size:13.5px;font-weight:600;outline:0}
.pb-camp-riga > input::placeholder,.pb-camp-riga label input::placeholder{color:var(--debole);font-weight:500}
.pb-camp-riga.ko{border-color:var(--pb-ko-bordo);background:var(--pb-ko-velo)}
.pb-camp-riga.ko .t b{color:var(--pb-ko)}
.pb-camp-riga .fuoco{border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone,rgba(218,2,25,.2))}
.pb-camp-nota{display:flex;align-items:center;gap:7px;margin:9px 2px 0;font-size:11.5px;color:var(--tenue)}
.pb-camp-nota svg{flex:none;color:var(--ic-blu)}
.pb-camp-letto{display:grid;gap:6px}
.pb-camp-letto .pb-cap .t{font-size:12.5px;font-weight:650;color:var(--testo)}

/* C: dati di targa */
.pb-targa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pb-dato{display:grid;align-content:start;gap:3px;padding:8px 9px 9px;border:1px solid var(--pb-linea2);border-radius:9px;background:color-mix(in srgb,var(--sfondo) 22%,transparent)}
.pb-dato .e{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden}
.pb-dato .e svg{flex:none;color:var(--accento-testo)}
.pb-dato .v{display:flex;align-items:baseline;gap:3px;font-size:19px;font-weight:800;letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pb-dato .v i{font-style:normal;font-size:11px;font-weight:650;color:var(--tenue);letter-spacing:0}
.pb-dato .t{justify-self:start;padding:0 5px;border-radius:4px;background:var(--pb-linea);font-size:10.5px;font-weight:700;color:var(--tenue);font-variant-numeric:tabular-nums}
.pb-dato .t.no{background:transparent;color:var(--debole);font-weight:500}

/* D: composizione */
.pb-comp{display:grid;gap:12px}
.pb-comp-r > b{display:block;margin:0 0 6px;font-size:10px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--debole)}
.pb-comp-r .pb-compbar{height:9px;border-radius:5px}
.pb-leg{display:flex;flex-wrap:wrap;gap:4px 12px;margin:7px 0 0;padding:0;list-style:none;font-size:12px;color:var(--tenue)}
.pb-leg li{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pb-leg li i{flex:none;width:9px;height:9px;border-radius:2px}
.pb-leg li b{color:var(--testo);font-variant-numeric:tabular-nums}

/* E: colori (miniature res_ da 200px, solo quando il pannello si apre) */
.pb-colori{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.pb-colori a{position:relative;display:block;aspect-ratio:1;border-radius:7px;overflow:hidden;border:1px solid var(--pb-linea2);background:var(--pannello2)}
.pb-colori a img{display:block;width:100%;height:100%;object-fit:cover;image-orientation:none}
.pb-colori a.piu{display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--testo);background:color-mix(in srgb,var(--testo) 8%,transparent);font-variant-numeric:tabular-nums}
.pb-colori-nomi{margin:7px 0 0;font-size:11.5px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-colori-nomi b{color:var(--testo);font-weight:650}
.pb-colori-vuoto{padding:10px 12px;border:1px dashed var(--bordo-forte);border-radius:9px;font-size:12.5px;color:var(--tenue)}

/* F: storia dell'articolo */
.pb-storia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pb-storia > div{padding:5px 9px;border-left:2px solid var(--pb-linea2)}
.pb-storia small{display:block;font-size:9.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--debole);white-space:nowrap}
.pb-storia b{display:block;margin-top:2px;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.pb-storia > div.recente{border-left-color:var(--pb-ok)}
.pb-storia > div.vuoto b{color:var(--debole);font-weight:500}

/* G: note, prezzo, materiali */
.pb-nota{display:block;width:100%;min-height:70px;padding:9px 11px;border:1px solid var(--pb-linea2);border-radius:9px;background:color-mix(in srgb,var(--sfondo) 30%,transparent);color:var(--debole);font-size:13.5px}
.pb-nota-avviso{display:flex;align-items:center;gap:6px;margin:6px 2px 0;font-size:11.5px;color:var(--tenue)}
.pb-nota-avviso svg{flex:none;color:var(--ic-blu)}
.pb-prezzo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pb-prezzo > div{padding:8px 10px;border:1px solid var(--pb-linea2);border-radius:9px}
.pb-prezzo small{display:block;font-size:9.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--debole)}
.pb-prezzo b{display:block;margin-top:2px;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.pb-prezzo b i{font-style:normal;font-size:11px;color:var(--tenue);margin-left:3px}
.pb-prezzo em{display:block;font-style:normal;font-size:11px;color:var(--debole);font-variant-numeric:tabular-nums}
.pb-odm-vuoto{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 12px;border:1px dashed var(--bordo-forte);border-radius:9px;font-size:13px;color:var(--tenue)}
.pb-usa{display:grid;grid-template-columns:1fr auto;gap:8px}
.pb-usa .bottone{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pb-usa .icona-riga{width:42px;height:42px}
.pb-usa-nota{grid-column:1/-1;margin:2px 2px 0;font-size:11.5px;color:var(--tenue)}

/* ---------- parte bassa della scheda: tre riquadri affiancati ---------- */
.pb-dock{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;margin-top:16px}
.pb-dock > section{min-width:0;padding:14px 16px 16px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);box-shadow:var(--pb-ombra)}
.pb-dock h3{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.pb-dock h3 svg{flex:none;color:var(--accento-testo)}
.pb-dock h3 small{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:600;color:var(--debole)}
.pb-dock .vuoto{display:grid;place-items:center;min-height:102px;border:1px dashed var(--bordo-forte);border-radius:9px;color:var(--tenue);font-size:13px;text-align:center;padding:10px}
.pb-copia{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start}
.pb-copia img{display:block;width:72px;height:102px;border-radius:5px;border:1px solid var(--bordo);background:#fff;object-fit:cover}
.pb-copia b{display:block;font-size:17px;font-weight:800;font-family:var(--pb-mono)}
.pb-copia small{display:block;margin:2px 0 10px;color:var(--tenue);font-size:12.5px}
.pb-copia .azioni-riga{display:flex;gap:6px;flex-wrap:wrap}

.pb-velo{display:none}

/* ================== COLONNE CHE SI ADATTANO (container query sull'elenco) ================== */
/* opportunita': sotto i 1060px spariscono prezzo e importo (restano nel pannello e nei totali) */
@container pbl (max-width:1060px){
  .pb-v-deal .pb-griglia,.pb-v-deal.modifica .pb-griglia{grid-template-columns:30px 46px minmax(180px,1fr) 162px 162px 108px}
  .pb-v-deal .c-prezzo,.pb-v-deal .c-imp{display:none !important}
  .pb-v-deal .pb-cap .col{max-width:62px}
}
/* catalogo: via rotolo e ultimo ordine, poi la composizione */
@container pbl (max-width:1180px){
  .pb-v-cat .pb-griglia{grid-template-columns:46px minmax(170px,1.1fr) 72px 72px 66px minmax(120px,.9fr) 60px 84px}
  .pb-v-cat .c-lrt,.pb-v-cat .c-ord{display:none !important}
}
@container pbl (max-width:820px){
  .pb-v-cat .pb-griglia{grid-template-columns:46px minmax(160px,1fr) 70px 70px 64px 60px 84px}
  .pb-v-cat .c-comp{display:none !important}
}
/* elenco stretto (iPad con il pannello aperto): i tipi di campione in una colonna, uno sotto l'altro */
@container pbl (max-width:760px){
  .pb-v-deal .pb-griglia,.pb-v-deal.modifica .pb-griglia{grid-template-columns:24px 46px minmax(0,1fr) 200px 84px}
  .pb-v-deal .pb-r{row-gap:5px}
  .pb-v-deal .pb-r .c-n{grid-column:1;grid-row:1/3}
  .pb-v-deal .pb-r .c-foto{grid-column:2;grid-row:1/3}
  .pb-v-deal .pb-r .c-art{grid-column:3;grid-row:1/3}
  .pb-v-deal .pb-r .c-t1{grid-column:4;grid-row:1}
  .pb-v-deal .pb-r .c-t2{grid-column:4;grid-row:2}
  .pb-v-deal .pb-r .c-az{grid-column:5;grid-row:1/3;align-self:center}
  .pb-v-deal .pb-th .c-t2,.pb-v-deal .pb-g .c-t2,.pb-v-deal .pb-tot .c-t2{display:none}
  .pb-v-deal .pb-th .c-t1 small{display:none}
  .pb-v-deal .pb-g .c-t1,.pb-v-deal .pb-tot .c-t1{grid-column:4/6}
  .pb-v-deal .pb-cap{min-height:34px;padding-top:3px;padding-bottom:3px}
  .pb-v-deal .pb-cap.in{padding:3px}
  .pb-v-deal .pb-cap .tn{display:inline;margin-right:2px}
  .pb-v-deal .pb-cap.in .tn{display:inline;width:52px;overflow:hidden;text-overflow:ellipsis;padding-left:4px}
  .pb-v-deal .pb-cap.in label{width:70px}
  .pb-v-deal .pb-cap.in .pb-in-col{display:none}
}

/* ================== TELEFONO: righe a schede, niente scorrimento laterale ================== */
@container pbl (max-width:620px){
  .pb-th{display:none}
  .pb-g{grid-template-columns:minmax(0,1fr) auto !important;padding:0 12px 0 0;min-height:38px}
  .pb-g .pb-g-nome{grid-column:1}
  .pb-g > span:not(.pb-g-nome){display:none !important}
  .pb-g > span.pb-g-tot{display:block !important;grid-column:2;font-size:11.5px}
  .pb-r{padding:12px;row-gap:8px;column-gap:10px}
  .pb-r::before{top:0;bottom:0;width:4px;border-radius:0}
  .pb-v-deal .pb-r,.pb-v-deal.modifica .pb-r{grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) !important;grid-template-areas:"foto art art" "az t1 t2" "az pz pz"}
  .pb-v-deal.modifica .pb-r{grid-template-areas:"foto art art" "az t1 t2"}
  .pb-v-deal .pb-r .c-n{display:none}
  .pb-v-deal .pb-r .c-foto{grid-area:foto}
  .pb-v-deal .pb-r .c-art{grid-area:art;align-self:center}
  .pb-v-deal .pb-r .c-t1{grid-area:t1}
  .pb-v-deal .pb-r .c-t2{grid-area:t2}
  .pb-v-deal .pb-r .c-az{grid-area:az;flex-direction:column;justify-content:flex-start;align-items:center;align-self:start;gap:6px}
  .pb-v-deal .pb-r .c-pz{display:flex !important;grid-area:pz;justify-content:flex-end;gap:14px;font-size:12.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
  .pb-v-deal .pb-r .c-pz b{color:var(--testo)}
  .pb-r .pb-foto{width:52px;height:52px}
  .pb-r .c-az .icona-riga,.pb-r .c-az .icona-riga.cat-pdf{width:38px;height:38px}
  .pb-v-deal .pb-cap{flex-wrap:wrap;align-content:center;column-gap:5px;row-gap:1px;min-height:52px;padding:6px 10px}
  .pb-v-deal .pb-cap .tn{display:block !important;width:100%;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;margin:0}
  .pb-v-deal .pb-cap.ok::before{display:none}
  .pb-v-deal .pb-cap .col{margin-left:0;max-width:none;width:100%}
  .pb-v-deal .pb-cap.in{display:grid;grid-template-columns:1fr;gap:4px;padding:5px}
  .pb-v-deal .pb-cap.in .tn{width:auto;padding:1px 3px 0}
  .pb-v-deal .pb-cap.in label{width:100%;height:40px}
  .pb-v-deal .pb-cap.in input{height:38px;font-size:16px}
  .pb-v-deal .pb-cap.in .pb-in-col{display:block;height:38px;font-size:16px}
  .pb-tot{grid-template-columns:minmax(0,1fr) auto !important;padding:10px 12px}
  .pb-tot .pb-tot-eti{grid-column:1;padding-left:4px}
  .pb-tot > :not(.pb-tot-eti):not(.pb-tot-tel){display:none !important}
  .pb-tot .pb-tot-tel{display:block !important;text-align:right}
  /* catalogo a schede: i numeri restano allineati in tre colonne */
  .pb-v-cat .pb-r{grid-template-columns:52px repeat(3,minmax(0,1fr)) !important;grid-template-areas:"foto art art art" "az pmq pml hut" "az comp comp col"}
  .pb-v-cat .pb-r .c-foto{grid-area:foto}
  .pb-v-cat .pb-r .c-art{grid-area:art;align-self:center}
  .pb-v-cat .pb-r .c-pmq{grid-area:pmq}
  .pb-v-cat .pb-r .c-pml{grid-area:pml}
  .pb-v-cat .pb-r .c-hut{grid-area:hut}
  .pb-v-cat .pb-r .c-comp{grid-area:comp;display:block !important}
  .pb-v-cat .pb-r .c-col{grid-area:col;justify-self:end;align-self:center}
  .pb-v-cat .pb-r .c-lrt,.pb-v-cat .pb-r .c-ord{display:none !important}
  .pb-v-cat .pb-r .c-az{grid-area:az;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;align-self:start}
  .pb-v-cat .pb-r .c-num{justify-self:stretch;text-align:left;padding:5px 8px;border:1px solid var(--pb-linea2);border-radius:7px}
  .pb-v-cat .pb-r .c-num .eti{display:block;font-size:9px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--debole)}
  .pb-v-cat .pb-r .c-num b{display:inline}
  .pb-v-cat .pb-r .c-num small{display:inline;margin-left:3px}
}

/* ================== PAGINA STRETTA ================== */
@media (max-width:1240px){
  .pb-corpo.con-pannello{grid-template-columns:minmax(0,1fr) 372px}
  .pb-k{padding:12px 13px 14px}
  .pb-k-num{font-size:26px}
  .pb-k-eti{letter-spacing:.07em}
}
/* iPad verticale: il pannello scorre sopra la pagina, da destra */
@media (max-width:1099px) and (min-width:700px){
  .pb-corpo.con-pannello{grid-template-columns:minmax(0,1fr)}
  .pb-isp{position:fixed;top:calc(var(--testata) + 8px);right:8px;bottom:8px;width:min(420px,calc(100vw - 16px));max-height:none;z-index:60}
  .pb-velo{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.45)}
}
/* telefono: testata a blocchi, numeri 2x2, pannello dal basso */
@media (max-width:699px){
  .pb-testa{grid-template-columns:auto minmax(0,1fr);padding:14px 14px 0;gap:10px 12px}
  .pb-codice{width:70px;height:62px;border-radius:10px}
  .pb-codice b{font-size:23px}
  .pb-titolo{font-size:19px}
  .pb-cliente{font-size:13.5px}
  .pb-azioni{grid-column:1/-1;justify-content:flex-start}
  .pb-azioni .bottone{height:40px;padding:0 13px}
  .pb-azioni .bottone.solo-icona-tel span{display:none}
  .pb-meta{margin:6px -14px 0;display:grid;grid-template-columns:1fr 1fr}
  .pb-meta > div,.pb-meta > div:first-child{padding:9px 14px;border-right:0;border-top:1px solid var(--pb-linea)}
  .pb-meta > div:nth-child(odd){border-right:1px solid var(--pb-linea)}
  .pb-meta > div.pb-meta-lungo{grid-column:1/-1;border-right:0}
  .pb-meta dd{white-space:normal;flex-wrap:wrap}
  .pb-campo-titolo{font-size:17px}
  .pb-kpi{grid-template-columns:1fr 1fr}
  .pb-k{border-left:0;border-top:1px solid var(--pb-linea)}
  .pb-k:nth-child(even){border-left:1px solid var(--pb-linea)}
  .pb-k:nth-child(-n+2){border-top:0}
  .pb-k.largo{grid-column:1/-1;border-left:0}
  .pb-k-num{font-size:25px}
  .pb-barra{gap:8px}
  .pb-seg{max-width:100%;overflow:hidden}
  .pb-seg button{padding:0 9px;font-size:12.5px}
  .pb-barra-dx{display:none}
  .pb-aggiungi{flex-wrap:wrap}
  .pb-aggiungi .sa-cerca{flex-basis:100%}
  .pb-aggiungi .bottone{flex:1;justify-content:center;height:44px}
  .pb-schede{display:flex}
  .pb-schede button{flex:1;justify-content:center;padding:0 10px}
  .pb-schede button small{display:none}
  .pb-dock{grid-template-columns:1fr}
  .pb-corpo.con-pannello{grid-template-columns:minmax(0,1fr)}
  .pb-isp{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:none;height:min(86vh,calc(100vh - 60px));z-index:60;border-radius:18px 18px 0 0;border-bottom:0;animation-name:pb-sale}
  .pb-isp-maniglia{display:block;position:absolute;top:6px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:3px;background:var(--bordo-forte)}
  .pb-isp-barra{height:54px;padding-top:8px}
  .pb-isp-barra .icona-riga{width:38px;height:38px}
  .pb-velo{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.58)}
  .pb-isp-id{grid-template-columns:96px minmax(0,1fr)}
  .pb-isp-foto{width:96px;height:96px}
  .pb-isp-az .icona-riga,.pb-isp-az .icona-riga.cat-pdf{width:38px;height:38px}
  .pb-targa{grid-template-columns:1fr 1fr}
  .pb-colori{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pb-camp-riga{grid-template-columns:minmax(0,1fr) 104px}
  .pb-camp-riga > input{grid-column:1/-1}
  .pb-camp-riga label input,.pb-camp-riga > input{font-size:16px}
}
/* puntatore grosso (iPad): icone da 38px, campi alti */
@media (pointer:coarse){
  .pb-r .c-az .icona-riga,.pb-r .c-az .icona-riga.cat-pdf,.pb-isp-barra .icona-riga,.pb-isp-az .icona-riga,.pb-isp-az .icona-riga.cat-pdf{width:38px;height:38px}
  .pb-cap.in label,.pb-cap.in .pb-in-col{height:38px}
  .pb-cap.in input{height:36px;font-size:16px}
  .pb-seg button{height:36px}
}

/* ---------- colori delle fibre anche fuori da .t-catalogo ---------- */
.pb{--f-pl:#3b7bff;--f-ea:#1e9e57;--f-pa:#d4a017;--f-pp:#8b5cf6;--f-eol:#14b8a6;--f-co:#b0875a;--f-wo:#db2777;--f-vi:#0891b2;--f-li:#7c9a82;--f-cf:#475569;--f-altro:#8b9aa1}
html[data-tema="scuro"] .pb{--f-cf:#94a3b8}
.pb-k-num.pb-k-euro{font-size:24px;color:var(--tenue)}

/* ---------- catalogo: il riepilogo e' anche il filtro degli stati (tessere, niente caselle) ---------- */
.pb-k-filtro{display:block;text-align:left;font:inherit;color:inherit;background:transparent;border:0;border-left:1px solid var(--pb-linea);cursor:pointer;transition:background-color .15s}
.pb-k-filtro:hover{background:var(--pb-hover)}
.pb-k-filtro .pb-k-pallino{display:block;width:10px;height:10px;border-radius:3px;background:var(--fascia);box-shadow:0 0 0 3px color-mix(in srgb,var(--fascia) 22%,transparent)}
.pb-k-filtro .pb-k-spunta{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;border:1px solid var(--bordo-forte);color:#fff}
.pb-k-filtro.acceso .pb-k-spunta{background:var(--fascia);border-color:var(--fascia)}
html[data-tema="scuro"] .pb-k-filtro.acceso .pb-k-spunta{color:#04141c}
.pb-k-filtro.acceso::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--fascia)}
.pb-k-filtro:not(.acceso):not(:has(input:checked)) .pb-k-num{color:var(--debole)}
.pb-kpi-cat .pb-k:first-child .pb-k-num{color:var(--testo)}
.pb-tot-cat{min-height:46px}
.pb-tot-cat .pb-tot-eti{grid-column:1/-1;font-size:11px}
.pb .conto-elenco{font-size:15px}
/* ritocchi dopo la prima anteprima */
.pb-th > span.ordina{flex-direction:row;align-items:center;justify-content:flex-start;gap:4px}
.pb-k-filtro .pb-k-spunta{border-radius:50%}
.pb-corpo.con-pannello .pb-r.sel::after{content:"";position:absolute;right:0;top:50%;width:9px;height:18px;margin-top:-9px;background:var(--accento);clip-path:polygon(0 0,100% 50%,0 100%)}@media (max-width:699px){
  .pb-isp{height:78vh}
  .pb-isp-barra kbd{display:none}
}
@media (pointer:coarse){.pb-isp-barra kbd{display:none}}
/* iPad: in modifica tre icone per riga, la colonna si allarga; nomi dei tipi interi */
@container pbl (max-width:760px){
  .pb-v-deal.modifica .pb-griglia{grid-template-columns:24px 46px minmax(0,1fr) 184px 128px}
  .pb-v-deal .pb-cap.in .tn{width:64px}
  .pb-v-deal .pb-cap.in label{width:76px}
}
@container pbl (max-width:620px){
  .pb-v-deal .pb-cap.in .tn{width:auto}
  .pb-v-deal .pb-cap.in label{width:100%}
}
/* il pannello stretto (iPad) mette i dati di targa due per riga */
.pb-isp{container:pbi/inline-size}
@container pbi (max-width:390px){
  .pb-targa{grid-template-columns:1fr 1fr}
  .pb-storia small{letter-spacing:.04em}
}.pb-lista::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;z-index:4;background:linear-gradient(90deg,var(--accento),color-mix(in srgb,var(--accento) 30%,transparent) 40%,transparent 80%);opacity:.8;pointer-events:none}.pb-k-filtro .pb-k-eti{padding-right:30px;white-space:normal}
@media (max-width:699px){.pb-kpi-cat .pb-k:nth-child(5){grid-column:1/-1;border-left:0}}
@media (max-width:699px){.pb .solo-pc{display:none}}

/* ---------- realizzazione nel catalogo (fase 1, 11/10/2026): i pezzi veri al posto dei disegni dell'anteprima ---------- */
/* le icone delle righe richiamano i disegni scritti una volta nella pagina (CatalogoPlancia.Simboli) */
.pb-simboli{position:absolute;width:0;height:0;overflow:hidden}
svg.pbi{display:block;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.pb-sotto .cat-collezione svg.pbi{display:inline-block}
/* la fascia della ricerca senza il riquadro: la casella grande e Filtri, la domanda sta nella casella */
.pb .pb-fascia.sa-fascia{margin:0 0 14px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.pb .pb-fascia .sa-cerca input[type=search]{height:56px;font-size:18px}
.pb .pb-fascia .ea-azioni .bottone.vuoto.cat-filtri-apri{height:56px}
.pb .cat-filtri{margin-bottom:14px}

/* tessere degli stati: la casella vera nascosta dentro la tessera (raggiungibile con la tastiera), mai una casella */
.pb-kpi-cat{grid-template-columns:repeat(var(--pb-tessere,5),minmax(0,1fr))}
label.pb-k-filtro{display:block;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.pb-k-filtro input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.pb-k-filtro:has(input:focus-visible){outline:2px solid var(--accento2);outline-offset:-3px}
.pb-k-filtro .pb-k-spunta svg{opacity:0}
.pb-k-filtro:has(input:checked) .pb-k-spunta{background:var(--fascia);border-color:var(--fascia)}
.pb-k-filtro:has(input:checked) .pb-k-spunta svg{opacity:1}
html[data-tema="scuro"] .pb-k-filtro:has(input:checked) .pb-k-spunta{color:#04141c}
.pb-k-filtro:has(input:checked)::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--fascia)}
.pb-k-filtro:not(:has(input:checked)) .pb-k-num{color:var(--debole)}
.pb-k-filtro .pb-k-no,.pb-k-filtro:not(:has(input:checked)) .pb-k-si{display:none}
.pb-k-filtro:not(:has(input:checked)) .pb-k-no{display:inline}
.pb-k-filtro.s-fuori{--fascia:var(--ic-grigio)}
.pb-k-filtro.s-standard{--fascia:var(--ic-blu)}
.pb-k-filtro.s-nuova{--fascia:var(--ic-verde)}
.pb-k-filtro.s-stock{--fascia:var(--ic-teal)}
.pb-k-barra i.s-fuori{background:var(--ic-grigio)}
.pb-k-tot .pb-k-barra{min-width:0}

/* Raggruppa e Ordina: pillole del segmento con la casella vera nascosta */
.pb-seg .pb-seg-voce{position:relative;display:inline-flex;margin:0;cursor:pointer}
.pb-seg .pb-seg-voce span{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:7px;color:var(--tenue);font-size:12.5px;font-weight:600;white-space:nowrap;transition:background-color .12s,color .12s}
.pb-seg .pb-seg-voce:hover span{color:var(--testo)}
.pb-seg .pb-seg-voce:has(input:checked) span{background:var(--pannello2);color:var(--testo);box-shadow:inset 0 0 0 1px var(--bordo-forte)}
.pb-seg .pb-seg-voce:has(input:focus-visible) span{outline:2px solid var(--accento2);outline-offset:1px}
.pb-barra .pb-conto .conto-elenco{font-size:15px}
.pb-barra > div:first-child{min-width:0}

/* righe: il nome e' il pulsante che apre il dettaglio; i titoli ordinabili sono pulsanti */
.pb-r{cursor:pointer}
.pb-r .pb-nome{display:block;max-width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:14.5px;font-weight:750;line-height:1.2;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-r .pb-nome:hover{text-decoration:underline;text-underline-offset:3px}
.pb-r .pb-nome:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:3px}
.pb-r .pb-nome.senza{font-style:italic;color:var(--tenue)}
.pb-sotto .cat-collezione{display:inline-flex;align-items:center;height:16px}
.pb-r .c-art{min-width:0}
.pb-foto.vuota svg{display:block}
.pb-th .pb-ord{display:inline-flex;flex-direction:column;align-items:inherit;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;cursor:pointer}
.pb-th .pb-ord:hover{color:var(--testo)}
.pb-th .pb-ord:focus-visible{outline:2px solid var(--accento2);outline-offset:2px;border-radius:3px}
.pb-th .ordina .pb-ord{color:var(--testo)}
.pb-th .ordina .pb-ord-t::after{content:" \2193";color:var(--accento-testo)}
.pb-th .dx .pb-ord{align-items:flex-end}
.pb-th .ordina::after{content:none}
.pb-th > span.ordina{flex-direction:column;align-items:flex-start}
.pb-th > span.ordina.dx{align-items:flex-end}

/* gruppi del catalogo: la testata prende tutta la riga e si chiude con la freccia */
.pb-v-cat .pb-g{cursor:pointer;user-select:none}
.pb-v-cat .pb-g .pb-g-nome{grid-column:1/-1}
.pb-g .pb-g-apri{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;margin:0 -4px 0 -2px;padding:0;border:0;border-radius:5px;background:none;color:var(--tenue);cursor:pointer}
.pb-g .pb-g-apri svg{transition:transform .15s}
.pb-g.chiuso .pb-g-apri svg{transform:rotate(-90deg)}
.pb-g .pb-g-apri:focus-visible{outline:2px solid var(--accento2)}
.pb-g.s-nuova .pb-g-nome b{color:var(--ic-verde)}
.pb-g.s-standard .pb-g-nome b{color:var(--ic-blu)}
.pb-g.s-stock .pb-g-nome b{color:var(--ic-teal)}

/* piede dell'elenco: quanti arrivano ancora scorrendo, il pulsante per chi non scorre, la fine */
.pb-tot.pb-tot-cat{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;min-height:52px;padding:8px 14px 8px 16px}
.pb-tot-cat .pb-tot-eti{padding-left:0}
.pb-tot-cat .pb-tot-az{flex:none}
.pb-tot-cat.in-attesa .pb-altri{pointer-events:none;opacity:.6}
.pb-tot-cat.in-attesa .pb-altri::before{content:"";width:12px;height:12px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gira .8s linear infinite}
.pb-vuoto{margin:0;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello)}

/* pannello: attesa, testo della composizione, file della scheda tecnica */
.pb-isp-attesa{display:grid;justify-items:center;gap:10px;padding:34px 16px;color:var(--tenue);font-size:13.5px;text-align:center}
.pb-isp-attesa p{margin:0}
.pb-rotella{width:22px;height:22px;border:3px solid var(--bordo-forte);border-top-color:var(--accento);border-radius:50%;animation:gira .8s linear infinite}
.pb-isp-testo{min-width:0}
.pb-isp-nome:focus{outline:none}
.pb-isp-barra kbd{flex:none}
.pb-isp-barra .icona-riga[disabled]{opacity:.35}
.pb-comp-testo{margin:0;font-size:12.5px;color:var(--tenue);overflow-wrap:anywhere}
a.pb-colori-vuoto{display:block;color:var(--tenue);text-decoration:underline;text-underline-offset:3px}
.pb-file{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 12px;border:1px solid var(--pb-linea2);border-radius:9px}
.pb-file-nome{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;font-weight:600}
.pb-file-nome svg{flex:none;color:var(--ic-blu)}
.pb-file-nome span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-file-az{display:flex;gap:6px;flex:none}
.pb-file-manca{display:flex;align-items:center;gap:8px}
.pb-file-manca svg{flex:none}
.pb-usa .bottone{border:0}
.pb-usa-nota a{color:var(--testo);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--testo) 30%,transparent);text-underline-offset:3px}
.pb-usa-nota a:hover{color:var(--accento-testo)}
.dialogo-scelta .pb-dialogo-nuova{align-self:flex-start;margin:12px 16px 0}

/* la barra del pannello e l'intestazione delle colonne restano piene mentre il contenuto ci scorre sotto */
.pb-isp-barra,.pb-th{background:var(--pannello2)}
/* nelle schede del telefono la tolleranza va a capo invece di uscire dalla casella */
@container pbl (max-width:620px){
  .pb-v-cat .pb-r .c-num{white-space:normal;line-height:1.15}
  .pb-v-cat .pb-r .c-num b,.pb-v-cat .pb-r .c-num small{white-space:nowrap}
  .pb-v-cat .pb-r .c-num small{display:block;margin:1px 0 0}
}
/* telefono: la barra sopra l'elenco va a capo (Raggruppa e Ordina restano, in due righe) e niente scorrimento laterale */
@media (max-width:699px){
  .pb-colori{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
  .pb-v-cat .pb-barra-dx{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;width:100%}
  .pb-v-cat .pb-seg{max-width:100%;overflow:visible;flex-wrap:wrap}
  .pb-v-cat .pb-seg .pb-seg-voce span{height:34px;padding:0 10px}
  .pb-kpi-cat{grid-template-columns:1fr 1fr}
  .pb-tot.pb-tot-cat{flex-wrap:wrap}
  .pb-tot-cat .pb-tot-az,.pb-tot-cat .pb-altri{width:100%}
  .pb-tot-cat .pb-altri{justify-content:center;height:42px}
  .pb-file{flex-wrap:wrap}
}
@media (pointer:coarse){.pb-seg .pb-seg-voce span{height:36px}}
/* il velo del pannello copre anche la fascia del carrello in basso (iPad verticale e telefono) */
html.pb-aperto .cestino-barra{z-index:50}
/* il LISTINO nel pannello (11/10/2026 sera, richiesta di Andrea): i chip della striscia della copia commissione (cm-f-lis-*,
   frammento del lavoro listino-copia, che si pubblica prima), qui in sola consultazione, piu' d'uno per riga */
.pb-lis-voci{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.pb-lis-voci .cm-f-lis-voce{min-width:0;padding-right:10px;cursor:default}
.pb-lis-voci .cm-f-lis-voce:hover{border-color:var(--bordo-forte)}
.pb-lis-voci .cm-f-lis-voce.applicato,.pb-lis-voci .cm-f-lis-voce.applicato:hover{border-color:var(--ic-verde)}
.pb-lis-voci .cm-f-lis-nota{white-space:normal;line-height:1.2}

/* ---------- PLANCIA, fase 2 (11/10/2026): scheda dell'opportunita' e articoli in modifica ----------
   Le capsule dei tipi di campione stanno in una cella sola (.c-tipi) con una colonna per tipo (--pb-tipi, scritto dalla
   pagina): funziona con due tipi come con tre. Va dopo il blocco della fase 1 e ne corregge le colonne c-t1/c-t2. */
.pb-v-deal{--pb-tipi:2}
.pb-v-deal .pb-griglia{grid-template-columns:30px 46px minmax(210px,1fr) calc(var(--pb-tipi) * 168px + (var(--pb-tipi) - 1) * 12px) 96px 96px 84px}
.pb-v-deal.modifica .pb-griglia{grid-template-columns:30px 46px minmax(200px,1fr) calc(var(--pb-tipi) * 184px + (var(--pb-tipi) - 1) * 12px) 120px}
.pb-v-deal .c-tipi{display:grid;grid-template-columns:repeat(var(--pb-tipi),minmax(0,1fr));gap:12px;align-items:center;min-width:0}
.pb-th .c-tipi > span{display:flex;flex-direction:column;justify-content:center;min-width:0;white-space:nowrap}
.pb-th .c-tipi > span small{font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--debole);margin-top:2px}
.pb-th .c-tipi > span small b{color:var(--ic-blu);font-weight:700}
.pb-v-deal .pb-g .pb-g-nome{grid-column:1/4}
.pb-v-deal .pb-g .c-tipi > span{font-size:12px;letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:2px}
.pb-v-deal .pb-g .c-tipi b,.pb-v-deal .pb-g .c-imp b{color:var(--testo)}
.pb-v-deal .pb-g .c-imp{justify-self:end;font-size:12px;letter-spacing:.02em;text-transform:none}
.pb-v-deal .pb-tot .pb-tot-eti{grid-column:1/4}
.pb-v-deal .pb-tot .c-tipi b{font-size:15.5px;font-weight:800;white-space:nowrap}
.pb-v-deal .pb-tot .c-imp{justify-self:end}
.pb-v-deal .pb-kpi{grid-template-columns:repeat(var(--pb-kpi,5),minmax(0,1fr))}
.pb-v-deal .pb-kpi:empty{min-height:96px}
.pb-v-deal .pb-r .c-imp .vuoto{color:var(--debole);font-weight:500}
.pb-v-deal .pb-r .c-az{gap:6px}
.pb-r .c-az .pb-apri svg{width:15px;height:15px}
.pb-rosso{color:var(--pb-ko)}
.pb-nata{font-size:12px;color:var(--tenue)}
.pb-azioni .bottone svg{flex:none}
.pb-azioni .elimina,.pb-azioni .icona-riga{width:38px;height:38px}
.pb-meta .pb-meta-agenti dd{white-space:normal;flex-wrap:wrap;gap:4px}
.pb-meta dd .az-agente{margin:0}
.pb-cliente a:hover{color:var(--accento-testo)}
.pb-segno{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 6px;border:1px solid var(--pb-linea2);border-radius:5px;font-size:11px;font-weight:700;color:var(--tenue);font-variant-numeric:tabular-nums}
.pb-r .art-stato{display:block;min-height:0;margin-top:2px;font-size:11px;color:var(--tenue)}
.pb-r .art-stato:empty{display:none}
.pb-r .art-stato.errore{color:var(--pb-ko)}
.pb-r .art-stato.fatto{color:var(--pb-ok)}
/* righe comode: piu' aria e la composizione per filato sotto la targa */
.pb-lista.comode .pb-r{min-height:78px;padding-top:12px;padding-bottom:12px}
.pb-lista.comode .pb-r .pb-mini{white-space:normal}
.pb-lista.comode .pb-v-cap,.pb-lista.comode .pb-cap{min-height:46px}
/* capsule nel pannello: il nome del tipo davanti */
.pb-camp-letto .pb-cap{min-height:44px}
.pb-camp-letto .pb-cap .tn{display:inline;min-width:84px;color:var(--testo);font-size:12.5px;font-weight:650;letter-spacing:0;text-transform:none}
.pb-camp-letto .pb-cap.ko .tn{color:var(--pb-ko)}
.pb-camp-riga .t small{display:block}
.pb-nota-letta{font-size:13.5px}
.pb-nota-letta .nota-formattata{padding:9px 11px;border:1px solid var(--pb-linea2);border-radius:9px;background:color-mix(in srgb,var(--sfondo) 30%,transparent)}
.pb-b .art-odm{margin:0}
.pb-b .art-odm-lettura .odm-sezione:first-child{margin-top:0}
.pb-b .pb-odm-vuoto{margin:0}
/* in modifica: nota con l'editor, prezzo con il campo, materiali con il blocco (spostati nel pannello dalla pagina) */
.pb-b .art-note{margin:0}
.pb-b .art-note .nascosto,.pb-b .art-note textarea[hidden]{display:none}
.pb-prezzo .art-campo{display:flex;align-items:center;gap:4px;height:38px;padding:0 8px;border:1px solid var(--pb-linea2);border-radius:7px;background:color-mix(in srgb,var(--sfondo) 40%,transparent)}
.pb-prezzo .art-campo input{min-width:0;width:100%;height:36px;border:0;background:transparent;color:var(--testo);font:inherit;font-size:16px;font-weight:750;text-align:right;outline:0}
.pb-prezzo .art-campo .art-um{font-size:11.5px;font-weight:700;color:var(--tenue)}
.pb-prezzo label{display:block;font-size:9.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--debole);margin-bottom:4px}
.pb-prezzo output{display:block;margin-top:2px;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.pb-prezzo output.vuoto{color:var(--debole)}
/* la parte bassa della scheda: i riquadri del portale dentro i posti della plancia */
.pb-dock > .riquadro{margin:0;min-width:0;padding:14px 16px 16px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello);box-shadow:var(--pb-ombra)}
.pb-dock > .riquadro > h2{display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:0;border:0;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.pb-dock .pb-dock-nota .deal-testo .vuoto{display:grid;place-items:center;min-height:102px;margin:0;border:1px dashed var(--bordo-forte);border-radius:9px;color:var(--tenue);font-size:13px;text-align:center;padding:10px}
.pb-dock > section.pb-dock-odm{padding:0;border:0;background:none;box-shadow:none}
.pb-dock-odm > [data-odm] > *{margin:0}
.pb-dock.pb-dock-due{grid-template-columns:1fr 1fr}
.pb-vuoto{margin:0}

/* ---- articoli in modifica: testata con titolo e categoria da scrivere, schede, aggiungi ---- */
.pb-testa .pb-campo-titolo{max-width:none}
.pb-cat-scelta{position:relative;height:26px;padding:0 6px 0 9px}
.pb-cat-scelta select{appearance:none;-webkit-appearance:none;height:24px;padding:0 18px 0 0;border:0;background:transparent;color:inherit;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;outline:0}
.pb-cat-scelta::after{content:"";position:absolute;right:7px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);pointer-events:none}
.pb-cat-scelta select option{color:#10222b;background:#fff}
.pb-cat-scelta:has(select:focus-visible){outline:2px solid var(--accento2);outline-offset:2px}
.pb-testa .camp-autosalva{margin:0}
.pb-aggiungi .sa-pagina{flex:1;min-width:0}
.pb-aggiungi .sa-fascia{margin:0;padding:0;border:0;background:none;box-shadow:none}
.pb-aggiungi .sa-fascia > h3,.pb-aggiungi .sa-fascia > p{display:none}
.pb-aggiungi .sa-cerca input[type=search]{height:50px;font-size:17px}
.pb-aggiungi .ea-azioni .bottone.vuoto.cat-filtri-apri{height:50px}
.pb-aggiungi .pb-dalcarrello b{min-width:22px;height:20px;padding:0 6px;border-radius:6px;background:var(--verde);color:#fff;font-size:12px;line-height:20px;text-align:center}
.pb-v-deal .art-esito:empty{display:none}
.pb-v-deal .cat-filtri{margin-bottom:12px}
.pb-cat-scelta .camp-categoria-pallino{display:none}
.pb-carrello{display:flex;align-items:center;gap:8px;flex:none}
.pb-aggiungi .pb-carrello .icona-riga{width:50px;height:50px}
.pb-r .icona-riga.pb-posto{visibility:hidden}
.pb-senza-articoli #oppKpi,.pb-senza-articoli #oppBarra,.pb-senza-articoli .pb-tasti{display:none}
.pb-v-deal.modifica .art-commessa{margin-top:16px}
/* il pannello in modifica: campi del blocco 1, nota con l'editor, prezzo e importo, materiali */
.pb-camp-riga label:focus-within,.pb-camp-riga > input:focus{border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone,rgba(218,2,25,.2))}
.pb-b .art-note-avviso{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:11.5px;color:var(--tenue)}
.pb-b .art-note-avviso svg{flex:none;color:var(--ic-blu)}
.pb-b .art-note-conta{margin-left:auto;font-variant-numeric:tabular-nums}
.pb-b .art-note-conta.vicino{color:var(--pb-ko);font-weight:700}
.pb-prezzo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.pb-prezzo .art-formula{display:block;margin-top:2px;font-size:11.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
.pb-b .art-odm .odm-titolo,.pb-b .art-odm .odm-conta{display:none}
.pb-b .art-odm .odm-testata{justify-content:flex-end}

/* ================== colore e prezzo nella riga (11/10/2026 sera, richiesta di Andrea) ==================
   "Mettiamo in evidenza COLORE e PREZZO nella stessa riga dove ci sono il tipo e i metri, e quando clicco sul prezzo mi
   proponi i record del listino": il colore si legge forte nella capsula (e in modifica si scrive li' anche sull'iPad col
   pannello aperto), il PREZZO e' una colonna a ogni larghezza (in lettura "4,42 EUR/Mt", in modifica il campo con la
   freccina del listino e sotto l'importo). L'importo in lettura e' la prima colonna che si toglie quando manca posto. */
.pb-v-deal .pb-cap .col{max-width:118px;font-size:12px;font-weight:750;letter-spacing:.03em;color:var(--testo)}
.pb-v-deal .pb-cap.vuoto .col{color:var(--tenue)}
.pb-v-deal .pb-r .c-prezzo{color:var(--testo);font-size:14px;font-weight:750}
.pb-v-deal .pb-r .c-pz span{color:var(--testo);font-weight:700}
.pb-v-deal.modifica .pb-griglia{grid-template-columns:30px 46px minmax(190px,1fr) calc(var(--pb-tipi) * 200px + (var(--pb-tipi) - 1) * 12px) 128px 112px}
.pb-v-deal.modifica .pb-cap.in .pb-in-col{font-size:13px;font-weight:700;color:var(--testo)}
.pb-v-deal.modifica .pb-th .c-prezzo{display:flex;flex-direction:column;justify-content:center;white-space:nowrap}
.pb-v-deal.modifica .pb-th .c-prezzo small{font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--debole);margin-top:2px}
.pb-v-deal.modifica .pb-r .c-prezzo{display:flex;flex-direction:column;align-items:stretch;justify-self:stretch;gap:2px;min-width:0;font-size:inherit;font-weight:400}
.pb-prezzo-in{display:flex;align-items:stretch;height:40px;border:1px solid var(--pb-linea2);border-radius:8px;background:color-mix(in srgb,var(--sfondo) 45%,transparent);transition:border-color .15s,box-shadow .15s}
.pb-prezzo-in label{display:flex;align-items:center;flex:1;min-width:0;padding:0 6px 0 8px;cursor:text}
.pb-prezzo-in label i{flex:none;font-style:normal;font-size:11.5px;font-weight:700;color:var(--tenue)}
.pb-prezzo-in input{min-width:0;width:100%;height:100%;padding:0 3px;border:0;background:transparent;color:var(--testo);font:inherit;font-size:15px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;outline:0}
.pb-prezzo-in input::placeholder{color:var(--debole);font-weight:500}
.pb-prezzo-in input:focus,.pb-prezzo-in input:hover{border:0;box-shadow:none;background:transparent;outline:0}
.pb-prezzo-in:focus-within{border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone,rgba(218,2,25,.2))}
.pb-prezzo-in.con-listino{border-color:color-mix(in srgb,var(--ic-verde) 50%,var(--pb-linea2))}
.pb-prezzo-in.con-listino:focus-within{border-color:var(--ic-verde);box-shadow:0 0 0 3px color-mix(in srgb,var(--ic-verde) 22%,transparent)}
.pb-prezzo-in.preso{animation:cm-f-preso .8s ease-out}
.pb-lis-apri{flex:none;display:grid;place-items:center;width:26px;padding:0;border:0;border-left:1px solid color-mix(in srgb,var(--ic-verde) 40%,var(--pb-linea2));border-radius:0 7px 7px 0;background:color-mix(in srgb,var(--ic-verde) 12%,transparent);color:var(--ic-verde);cursor:pointer}
.pb-prezzo-imp{font-size:11px;font-weight:700;color:var(--tenue);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pb-prezzo-imp:empty{display:none}
/* il menu del listino, ancorato al prezzo: i chip della striscia della copia commissione (cm-f-lis-*, gia' sul sito) */
.pb-lis-menu{position:fixed;z-index:70;display:grid;gap:8px;max-height:min(70vh,470px);overflow:auto;padding:10px 10px 9px;border:1px solid var(--bordo-forte);border-radius:14px;background:var(--pannello);box-shadow:0 22px 48px -14px rgba(0,0,0,.6)}
.pb-lis-menu-testa{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.pb-lis-menu-voci{display:grid;gap:8px;padding-top:8px}
.pb-lis-menu .cm-f-lis-voce{width:100%;padding:5px 5px 5px 12px;font:inherit;color:inherit;text-align:left}
.pb-lis-menu .cm-f-lis-voce.attivo{border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone,rgba(218,2,25,.2))}
.pb-lis-menu .icona-riga.cm-f-lis-applica{flex:none;margin-left:auto;width:36px;height:36px;border-radius:9px}
.pb-lis-menu .cm-f-lis-applica svg{width:18px;height:18px}
.pb-lis-menu-piede{margin:0;font-size:11px;color:var(--tenue)}

/* ================== colonne che si adattano (opportunita') ================== */
@container pbl (max-width:1060px){
  .pb-v-deal .pb-griglia{grid-template-columns:30px 46px minmax(130px,1fr) calc(var(--pb-tipi) * 150px + (var(--pb-tipi) - 1) * 12px) 96px 84px}
  .pb-v-deal.modifica .pb-griglia{grid-template-columns:30px 46px minmax(140px,1fr) calc(var(--pb-tipi) * 178px + (var(--pb-tipi) - 1) * 12px) 120px 106px}
  .pb-v-deal .pb-griglia > .c-imp{display:none !important}
  .pb-v-deal .pb-griglia > .c-prezzo{display:block !important}
  .pb-v-deal.modifica .pb-griglia > .c-prezzo{display:flex !important}
  .pb-v-deal .pb-cap .col{max-width:84px}
}
/* le icone della riga quando le colonne si stringono: due per fila (sul tocco sono da 38 px) */
.pb-v-deal{--pb-az1:30px;--pb-az2:70px}
@media (pointer:coarse){.pb-v-deal{--pb-az1:38px;--pb-az2:82px}}
/* in modifica sotto i 900 px (iPad verticale): i tipi uno sotto l'altro, ognuno con quantita' e colore, il prezzo accanto */
@container pbl (max-width:900px){
  .pb-v-deal.modifica .pb-griglia{column-gap:10px;grid-template-columns:24px 46px minmax(0,1fr) 236px 112px var(--pb-az2)}
  .pb-v-deal.modifica .c-tipi{grid-template-columns:1fr;gap:5px}
  .pb-v-deal.modifica .pb-th .c-tipi{display:flex;gap:14px}
  .pb-v-deal.modifica .pb-th .c-tipi > span small{display:none}
  .pb-v-deal.modifica .pb-cap.in{min-height:34px;padding:3px}
  .pb-v-deal.modifica .pb-cap.in .tn{display:inline;width:62px;overflow:hidden;text-overflow:ellipsis;padding-left:4px}
  .pb-v-deal.modifica .pb-cap.in label{width:70px}
  .pb-v-deal.modifica .pb-cap.in .pb-in-col{display:block}
  .pb-v-deal.modifica .pb-r .c-az{display:grid;grid-template-columns:repeat(2,var(--pb-az1));gap:6px;justify-content:end}
}
/* elenco stretto (iPad orizzontale col pannello aperto): anche in lettura i tipi uno sotto l'altro, col colore */
@container pbl (max-width:760px){
  .pb-v-deal .pb-griglia{grid-template-columns:24px 46px minmax(0,1fr) 210px 92px var(--pb-az2)}
  .pb-v-deal.modifica .pb-griglia{column-gap:10px;grid-template-columns:24px 46px minmax(0,1fr) 232px 108px var(--pb-az2)}
  .pb-v-deal .c-tipi{grid-template-columns:1fr;gap:5px}
  .pb-v-deal .pb-th .c-tipi{display:flex;gap:14px}
  .pb-v-deal .pb-th .c-tipi > span:not(:first-child),.pb-v-deal .pb-g .c-tipi > span:not(:first-child),.pb-v-deal .pb-tot .c-tipi > b:not(:first-child){display:revert}
  .pb-v-deal .pb-th .c-tipi > span small{display:none}
  .pb-v-deal .pb-r .c-n,.pb-v-deal .pb-r .c-foto,.pb-v-deal .pb-r .c-art,.pb-v-deal .pb-r .c-tipi,.pb-v-deal .pb-r .c-az{grid-row:auto}
  .pb-v-deal .pb-cap .tn{display:inline;margin-right:2px}
  .pb-v-deal .pb-cap .col{max-width:96px}
  .pb-v-deal.modifica .pb-cap.in .tn{width:62px}
  .pb-v-deal.modifica .pb-cap.in label{width:70px}
  .pb-v-deal.modifica .pb-cap.in .pb-in-col{display:block}
  .pb-v-deal .pb-r .c-az{display:grid;grid-template-columns:repeat(2,var(--pb-az1));gap:6px;justify-content:end}
}

/* ================== telefono: righe a schede, niente scorrimento laterale ================== */
@container pbl (max-width:620px){
  .pb-v-deal .pb-r,.pb-v-deal.modifica .pb-r{grid-template-columns:52px minmax(0,1fr) !important;grid-template-areas:"foto art" "az tipi" "az pz"}
  .pb-v-deal.modifica .pb-r{grid-template-areas:"foto art" "az tipi" "az prezzo"}
  .pb-v-deal .pb-r .c-tipi{grid-area:tipi;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px}
  .pb-v-deal .pb-r .c-prezzo,.pb-v-deal .pb-r .c-imp{display:none !important}
  .pb-v-deal.modifica .pb-r .c-prezzo{display:flex !important;grid-area:prezzo;flex-direction:row;align-items:center;gap:10px}
  .pb-v-deal.modifica .pb-r .pb-prezzo-in{flex:1;height:44px}
  .pb-v-deal.modifica .pb-r .pb-prezzo-in input{font-size:16px}
  .pb-v-deal .pb-r .c-az,.pb-v-deal.modifica .pb-r .c-az{display:flex;grid-template-columns:none}
  .pb-v-deal .pb-r .c-pz{display:flex !important;grid-area:pz;justify-content:flex-end;gap:14px;font-size:13px;color:var(--tenue);font-variant-numeric:tabular-nums}
  .pb-v-deal .pb-r .c-pz:empty{display:none !important}
  .pb-v-deal .pb-r .c-pz b{color:var(--testo)}
  .pb-v-deal .pb-cap .tn{display:block !important;width:100%;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;margin:0}
  .pb-v-deal .pb-cap .col{max-width:none}
  .pb-v-deal .pb-cap.in{display:grid;grid-template-columns:1fr;gap:4px;padding:5px}
  .pb-v-deal.modifica .pb-cap.in .tn{width:auto;padding:1px 3px 0}
  .pb-v-deal.modifica .pb-cap.in label{width:100%;height:40px}
  .pb-v-deal .pb-cap.in input{height:38px;font-size:16px}
  .pb-v-deal.modifica .pb-cap.in .pb-in-col{display:block;height:38px;font-size:16px}
  .pb-v-deal .pb-tot .c-tipi,.pb-v-deal .pb-tot .c-prezzo,.pb-v-deal .pb-tot .c-imp{display:none !important}
  .pb-v-deal .pb-g .c-tipi,.pb-v-deal .pb-g .c-prezzo,.pb-v-deal .pb-g .c-imp{display:none !important}
}
@media (max-width:1240px){.pb-v-deal .pb-kpi .pb-k-eti{letter-spacing:.06em}}
@media (max-width:699px){
  .pb-v-deal .pb-kpi{grid-template-columns:1fr 1fr}
  .pb-v-deal .pb-kpi .pb-k:last-child:nth-child(odd){grid-column:1/-1;border-left:0}
  .pb-dock.pb-dock-due{grid-template-columns:1fr}
  .pb-aggiungi{flex-wrap:wrap}
  .pb-aggiungi .sa-pagina{flex-basis:100%}
  .pb-carrello{flex:1}
  .pb-aggiungi .pb-carrello .icona-riga{width:44px;height:44px}
  .pb-azioni .bottone.solo-icona-tel span{display:none}
}

/* ---------- PLANCIA, fase 3 (11/10/2026 sera): IL CASSETTO DEGLI ALLEGATI fuori dal visore ----------
   Il contenuto e' quello del visore della copia (classi cm-vis-cas-*, js/cassetto-allegati.js): qui solo il posto.
   Opportunita': la scheda "Allegati" del pannello laterale (.pb-isp.pb-cas), le schede Allegati / Articolo, la linguetta
   rossa sul bordo (ferma a destra quando e' chiuso), sul telefono la maniglia in basso. Cliente: il riquadro del cassetto
   nella scheda Materiali, con la barra Sfoglia / Gestisci. Va dopo i frammenti delle fasi 1 e 2. */
.pb-isp.pb-cas{display:flex;flex-direction:column;overflow:visible;border-left:3px solid var(--accento)}
.pb-cas-dentro{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;border-radius:0 13px 13px 0}
.pb-cas .cm-vis-cas-corpo{flex:1 1 auto;min-height:0}
.pb-cas .cm-vis-cas-testa{border-bottom-color:var(--bordo)}
.pb-cas .cm-vis-cas-x{flex:none}
.pb-isp-schede{display:flex;margin:10px 12px 2px}
.pb-isp-schede button{flex:1 1 0;justify-content:center;height:38px;padding:0 10px;font-size:13.5px}
.pb-isp-schede button svg{flex:none}
.pb-isp-schede button .pb-conta{margin-left:2px}
.pb-isp > .pb-isp-schede{margin-bottom:8px}
/* chiuso: la linguetta ferma sul bordo destro della finestra (computer e iPad) */
.cm-vis-cas-ling.pb-cas-ling-fissa{position:fixed;left:auto;right:0;top:calc(var(--testata,64px) + 150px);z-index:40}
.cm-vis-cas-ling.pb-cas-ling-fissa[hidden]{display:none}
.pb-cas-man{display:none}
/* sul computer il cassetto aperto e' la colonna destra di tutta la plancia, accanto alla testata (come B-14), ferma
   mentre si scorre; a sinistra resta lo spazio per la linguetta, che sporge */
@media (min-width:1100px){
  .pb-v-deal.pb-cas-aperto{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,28vw,404px);column-gap:62px;align-items:start}
  /* poco posto (iPad orizzontale, menu fissato): testata, numeri e barra larghi, il cassetto accanto all'elenco */
  .pb-v-deal.pb-cas-aperto > *{grid-column:1 / -1;min-width:0}
  .pb-v-deal.pb-cas-aperto > .pb-testa{grid-row:1}
  .pb-v-deal.pb-cas-aperto > .pb-kpi{grid-row:2}
  .pb-v-deal.pb-cas-aperto > .pb-barra{grid-row:3}
  .pb-v-deal.pb-cas-aperto > .pb-corpo{grid-row:4;grid-column:1}
  .pb-v-deal.pb-cas-aperto > .pb-tasti{grid-row:5;grid-column:1}
  .pb-v-deal.pb-cas-aperto > .pb-dock{grid-row:6;grid-column:1}
  .pb-v-deal.pb-cas-aperto > .pb-cas{grid-column:2;grid-row:4 / span 3;align-self:start}
  /* tanto posto (computer): la colonna destra dall'alto, accanto alla testata */
  .pb-v-deal.pb-cas-alto > .pb-testa,.pb-v-deal.pb-cas-alto > .pb-kpi,.pb-v-deal.pb-cas-alto > .pb-barra{grid-column:1}
  .pb-v-deal.pb-cas-alto > .pb-cas{grid-row:1 / span 6}
  .pb-v-deal.pb-cas-aperto .pb-meta > div.pb-meta-lungo{flex:1 0 auto}
}
html[data-tema="scuro"] .pb-cas .cm-vis-cas-indice{background:var(--pannello)}
/* iPad verticale: sopra la pagina da destra, con il velo; la linguetta resta sul bordo del cassetto */
@media (max-width:1099px) and (min-width:700px){
  .pb-isp.pb-cas{right:8px}
}
/* telefono: dal basso, chiuso con la sola maniglia "6 allegati - 0:14 - 2 foto - 2 doc." */
@media (max-width:699px){
  .pb-cas .cm-vis-cas-ling{display:none}
  .pb-isp.pb-cas{border-left:0;border-top:3px solid var(--accento)}
  .pb-cas-dentro{border-radius:15px 15px 0 0}
  .cm-vis-cas-man.pb-cas-man:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;justify-items:center;gap:7px;
    padding:8px calc(14px + env(safe-area-inset-right)) calc(11px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    border:0;border-top:1px solid var(--bordo-forte);border-radius:18px 18px 0 0;background:var(--pannello);color:var(--testo);font:inherit;text-align:left;
    cursor:pointer;box-shadow:0 -14px 30px -18px rgba(0,0,0,.75);touch-action:manipulation}
  html[data-tema="scuro"] .cm-vis-cas-man.pb-cas-man{background:#15171b}
  .pb-cas-man .cm-vis-cas-man-n{font-size:16px}
  .pb-v-deal.pb-con-cas{padding-bottom:84px}
  .pb-isp-schede button small{display:none}
}

/* ---- la scheda del cliente: il riquadro del cassetto nella scheda Materiali ---- */
.az-cassetto{margin:0 0 14px}
.az-cas-barra{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.az-cas-barra .pb-seg button[disabled]{opacity:.45;cursor:default}
.az-cas-aggiungi{display:inline-flex;align-items:center;gap:7px;margin-left:auto}
.az-cas-dove[hidden]{display:none}
.cm-vis-cas-riq{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--bordo-forte);border-left:3px solid var(--accento);
  border-radius:0 14px 14px 0;background:var(--pannello)}
.cm-vis-cas-riq .cm-vis-cas-testa{flex-wrap:wrap}
.cm-vis-cas-riq .cm-vis-cas-man-g{flex:none}
.cm-vis-cas-riq .cm-vis-cas-chips{flex-wrap:wrap}
.cm-vis-cas-riq .cm-vis-cas-corpo{overflow:visible;-webkit-mask-image:none;mask-image:none;padding:2px 16px 18px}
.cm-vis-cas-riq .cm-vis-cas-indice{top:var(--testata,64px)}
.cm-vis-cas-riq .cm-vis-cas-sez-extra .cm-vis-cas-foto{margin-top:8px}
@media (min-width:900px){
  .cm-vis-cas-riq .cm-vis-cas-corpo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;align-content:start;align-items:start}
  .cm-vis-cas-riq .cm-vis-cas-indice{grid-column:1 / -1}
}
@media (min-width:1300px){
  .cm-vis-cas-riq.molti .cm-vis-cas-foto{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:699px){
  .cm-vis-cas-riq{border-radius:0 12px 12px 0}
  .cm-vis-cas-riq .cm-vis-cas-chips{display:none}
  .az-cas-barra .pb-seg{flex:1}
  .az-cas-barra .pb-seg button{flex:1}
}
/* la sezione in fondo "Dalla copia CC-1047": stessa grafica, il titolo con il numero */
.cm-vis-cas-sez-extra .cm-vis-cas-sez-t{color:var(--accento-testo)}
.cm-vis-cas-sez-extra > .cm-vis-cas-foto,.cm-vis-cas-sez-extra > .cm-vis-cas-docs{margin-top:8px}

/* ---- COPIA COMMISSIONE: LA RIVALIDAZIONE SULLA STESSA OPPORTUNITA' e LA RIGA DI INSERIMENTO DEL TAVOLO (11/10/2026) ----
   Regola di Andrea: una copia validata e poi modificata torna DA RIVALIDARE (pillola ambra .vp-stato.riv) e resta della
   STESSA opportunita'. Nel tavolo (cm-v-riv): il cliente fermo (cm-v-fisso), il codice dell'opportunita' (cm-v-oc), la frase
   "Opportunita' OC26: verranno aggiunti 3 articoli nuovi" (cm-v-riv-conto), lo stato di ogni articolo (cm-v-badge).
   La riga di inserimento (cm-v-ins-*) per gli articoli scritti a mano sul foglio: codice, tipo, quantita', colore, prezzo e
   il "+" verde quadrato; i prezzi del listino con i chip della striscia (cm-f-lis-*, gia' sul sito). Campi a 16px (iOS non
   ingrandisce), bersagli da 38px, niente scorrimento di lato: la tessera e' stretta, i campi vanno a capo. */
.vp-stato.riv{border-color:rgba(228,161,27,.6);background:rgba(228,161,27,.13);color:#a86d00}
html[data-tema="scuro"] .vp-stato.riv{color:#f0b743;border-color:rgba(240,183,67,.5)}
button.vp-stato.riv:hover{box-shadow:0 0 0 3px rgba(228,161,27,.22)}
.cm-v-fisso{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--successo-bordo);border-radius:12px;background:var(--successo-velo)}
.cm-v-oc{flex:none;padding:2px 9px;border-radius:7px;background:#8b5cf6;color:#fff;font-size:13px;font-weight:800;letter-spacing:.03em}
.cm-v-riv-conto{margin:0;padding:9px 12px;border-left:3px solid #1e9e57;border-radius:8px;background:color-mix(in srgb,#1e9e57 9%,var(--pannello2));font-size:14px;font-weight:700;line-height:1.4;color:var(--testo)}
.cm-v-riv-conto[hidden]{display:none}
.cm-v-riv-morta{margin:0}
.cm-v-riv-nuova{display:inline-flex;align-items:center;gap:7px;justify-self:start;min-height:38px;padding:0 14px;border:1.5px solid var(--bordo-forte);border-radius:999px;background:var(--pannello);color:var(--testo);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;touch-action:manipulation}
.cm-v-riv-nuova svg{color:#1e9e57}
.cm-v-riv-nuova.scelta{border-color:#1e9e57;background:#1e9e57;color:#fff}
.cm-v-riv-nuova.scelta svg{color:#fff}
.cm-v-riv-restano{margin:0;font-size:12.5px;line-height:1.45;color:var(--tenue)}
.cm-v-riv-restano b{color:var(--testo);font-weight:700}
.cm-v-badge{display:inline-flex;align-items:center;justify-self:start;height:22px;padding:0 9px;border:1px solid var(--bordo-forte);border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue)}
.cm-v-badge.nuovo{border-color:#1e9e57;background:#1e9e57;color:#fff}
.cm-v-badge.aggiorna{border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.12);color:#2563eb}
html[data-tema="scuro"] .cm-v-badge.aggiorna{color:#7fb0ff}
.cm-v-badge.fuori,.cm-v-badge.salta{border-style:dashed}
/* la riga di inserimento */
.cm-v-ins{display:grid;gap:9px;padding:12px;border:1.5px dashed color-mix(in srgb,#1e9e57 55%,var(--bordo-forte));border-radius:12px;background:color-mix(in srgb,#1e9e57 4%,var(--pannello))}
.cm-v-ins-testa{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--testo)}
.cm-v-ins-testa svg{color:#1e9e57}
.cm-v-aggiunte[hidden]{display:none}
.cm-v-aggiunta{cursor:default;border-color:color-mix(in srgb,#1e9e57 45%,var(--bordo-forte))}
.cm-v-agg-comandi{display:grid;justify-items:center;gap:6px;flex:none}
.cm-v-agg-comandi .icona-riga{width:38px;height:38px;border-radius:9px}
.icona-riga.cm-v-agg-togli{--ic:#da0219}
.cm-v-ins-linea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) 38px;grid-template-areas:"cod cod cod cod" "tipi tipi tipi tipi" "q colore prezzo piu";gap:8px 8px;align-items:end}
.cm-v-ins-campo{position:relative;display:grid;gap:3px;min-width:0}
.cm-v-ins-campo.cod{grid-area:cod}
.cm-v-ins-campo.tipi{grid-area:tipi}
.cm-v-ins-campo.q{grid-area:q}
.cm-v-ins-campo.colore{grid-area:colore}
.cm-v-ins-campo.prezzo{grid-area:prezzo}
.cm-v-ins-piu{grid-area:piu}
.cm-v-ins-campo > small{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue)}
.cm-v-ins-campo input[type="text"]{box-sizing:border-box;width:100%;min-width:0;height:40px;padding:0 10px;border:1.5px solid var(--bordo-forte);border-radius:9px;background:var(--campo-attivo);color:var(--testo);font:inherit;font-size:16px;outline:0}
.cm-v-ins-campo input[type="text"]:focus{border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone,rgba(218,2,25,.2))}
.cm-v-ins-campo.cod input{text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.cm-v-ins-campo.q input{padding-right:34px}
.cm-v-ins-um{position:absolute;right:10px;bottom:11px;font-style:normal;font-size:12px;font-weight:700;color:var(--tenue);pointer-events:none}
.cm-v-ins-nome{min-height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--tenue)}
.cm-v-ins-nome:empty{display:none}
.cm-v-ins-sugg{position:absolute;left:0;right:0;top:100%;z-index:6;margin-top:4px;padding:5px;border:1px solid var(--bordo-forte);border-radius:10px;background:var(--pannello);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.cm-v-ins-sugg .cm-v-sugg{min-height:38px}
.cm-v-ins-campo.spento input{opacity:.55}
.cm-v-ins-campo.spento > small{opacity:.7}
.cm-v-ins-tipi{display:flex;flex-wrap:wrap;gap:6px}
.cm-v-ins-tipo{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border:1.5px solid var(--bordo-forte);border-radius:999px;background:var(--pannello);color:var(--testo);font-size:13.5px;font-weight:700;cursor:pointer;touch-action:manipulation}
/* la casella vera resta nella pagina (Tab, frecce, Safari sull'iPad) ma non si vede: la scelta e' la pillola */
.cm-v-ins-tipo input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cm-v-ins-tipo i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--tenue)}
.cm-v-ins-tipo:has(input:checked){border-color:#1e9e57;background:#1e9e57;color:#fff}
.cm-v-ins-tipo:has(input:checked) i{color:rgba(255,255,255,.85)}
.cm-v-ins-tipo:has(input:focus-visible){box-shadow:0 0 0 3px var(--campo-alone,rgba(218,2,25,.25))}
.cm-v-ins-linea .icona-riga.cm-v-ins-piu{width:38px;height:40px;border-radius:9px}
.cm-v-ins-linea .icona-riga.cm-v-ins-piu svg{width:20px;height:20px}
.cm-v-ins-campo.cm-v-ins-manca input,.cm-v-ins-campo.cm-v-ins-manca .cm-v-ins-tipo{border-color:#da0219;animation:cm-v-trema .35s ease-out}
.cm-v-ins-campo.cm-v-ins-preso input{animation:cm-v-preso .7s ease-out}
@keyframes cm-v-trema{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes cm-v-preso{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ic-verde) 45%,transparent)}100%{box-shadow:none}}
.cm-v-ins-listino{display:grid;gap:6px}
.cm-v-ins-listino[hidden]{display:none}
.cm-v-ins-listino .cm-f-lis-testa{display:flex;align-items:baseline;justify-content:flex-start;gap:6px;text-align:left}
.cm-v-ins-listino .cm-f-lis-voce{flex:1 1 calc(50% - 3px);min-width:0;cursor:pointer;padding-top:6px}
.cm-v-ins-listino .cm-f-lis-voci{padding-top:8px}
.cm-v-ins-listino .icona-riga.cm-f-lis-applica{flex:none;margin-left:auto;width:38px;height:38px;border-radius:9px}
@media (max-width:480px){
  .cm-v-ins{padding:10px}
  .cm-v-ins-linea{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px;grid-template-areas:"cod cod cod" "tipi tipi tipi" "q colore colore" "prezzo prezzo piu"}
  .cm-v-ins-listino .cm-f-lis-voce{flex-basis:100%}
  .cm-v-agg-comandi .cm-v-righe{display:none}
}

/* ---------- PLANCIA, correzione 11/10/2026 sera: il PREZZO non va piu' sotto il "+" ----------
   Articoli dell'opportunita' in modifica, dal tocco (iPad, schermi col dito) con l'elenco largo fra 900 e 1230 px: le tre
   icone della riga ("+" duplica, PDF, cestino) col dito sono quadrati da 38 px (3 x 38 + 2 x 6 = 126 px), ma la colonna
   ne teneva 106-112 (le misure delle icone da 30 px del mouse): il "+" usciva a sinistra sopra il campo del prezzo e sopra
   l'importo. Adesso la colonna delle azioni e' larga quanto le sue icone: 112 px col mouse, 126 px col dito; il nome
   dell'articolo cede lo spazio che manca. Sotto i 900 px restano le icone due per fila (gia' giuste), sul telefono le
   schede. Solo larghezze delle colonne: niente cambia nei campi, nel menu del listino e nel salvataggio. */
.pb-v-deal{--pb-az3:112px}
@media (pointer:coarse){.pb-v-deal{--pb-az3:126px}}
.pb-v-deal.modifica .pb-griglia{grid-template-columns:30px 46px minmax(190px,1fr) calc(var(--pb-tipi) * 200px + (var(--pb-tipi) - 1) * 12px) 128px var(--pb-az3)}
.pb-v-deal.modifica .pb-r .c-az{min-width:0}
@container pbl (max-width:1060px){
  .pb-v-deal.modifica .pb-griglia{grid-template-columns:30px 46px minmax(140px,1fr) calc(var(--pb-tipi) * 178px + (var(--pb-tipi) - 1) * 12px) 120px var(--pb-az3)}
}
@container pbl (max-width:900px){
  .pb-v-deal.modifica .pb-griglia{grid-template-columns:24px 46px minmax(0,1fr) 236px 112px var(--pb-az2)}
}
@container pbl (max-width:760px){
  .pb-v-deal.modifica .pb-griglia{grid-template-columns:24px 46px minmax(0,1fr) 232px 108px var(--pb-az2)}
}

/* ---- COPIA COMMISSIONE, RITOCCHI DELLA RIVALIDAZIONE (11/10/2026 sera) ----
   La pillola "Nuovo, anche se c'e' gia'": l'articolo entra come riga nuova anche se l'opportunita' ha gia' lo stesso
   codice con lo stesso tipo di campione (regola di Andrea: niente si sovrascrive). Verde come Nuovo, ma a contorno. */
.cm-v-badge.doppio{border-color:#1e9e57;background:color-mix(in srgb,#1e9e57 14%,transparent);color:#17804a}
html[data-tema="scuro"] .cm-v-badge.doppio{color:#5ec98c;border-color:rgba(94,201,140,.6)}

/* ---- TAVOLO DELLA VALIDAZIONE: CORREGGERE UN ARTICOLO AGGIUNTO E LISTINO SEMPRE IN VISTA (11/10/2026 sera, iPad) ----
   Toccando un articolo aggiunto (o la sua matita) tutti i suoi campi tornano nella riga di inserimento: l'articolo resta
   nell'elenco, acceso di rosso ("in correzione"), e il "+" diventa la spunta "Salva la correzione". Sotto i riquadri c'e'
   sempre spazio per la tastiera di iPad/iPhone (--cm-v-tastiera, da visualViewport) e per il fondo di Safari. */
.cm-v-aggiunta{cursor:pointer}
.cm-v-aggiunta.in-modifica{border-color:#da0219;box-shadow:0 0 0 3px rgba(218,2,25,.16)}
.cm-v-agg-incorso{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#da0219}
html[data-tema="scuro"] .cm-v-agg-incorso{color:#ff5c6c}
.cm-v-ins.in-modifica{border-style:solid;border-color:rgba(218,2,25,.55)}
.cm-v-ins-annulla{justify-self:start;font-size:13px}
.cm-v-ins-annulla[hidden]{display:none}
/* lo spazio in fondo e' un pezzo di contenuto (::after), non un padding: sul telefono e sull'iPad verticale la colonna sta
   in una riga della griglia piu' bassa di lei e il padding non allungava lo scorrimento */
.cm-v-lato::after{content:"";display:block;height:calc(12px + env(safe-area-inset-bottom) + var(--cm-v-tastiera, 0px))}
@media (max-width:820px){
  .cm-v-lato::after{height:calc(76px + env(safe-area-inset-bottom) + var(--cm-v-tastiera, 0px))}
}

/* ---- FINESTRE DELLA COPIA COMMISSIONE SEMPRE DENTRO LO SCHERMO (11/10/2026 sera, iPad verticale, interfaccia inglese) ----
   La finestra "Dati cliente" usciva a destra: X tagliata, riquadri tagliati, il pulsante rosso fuori. Ora la finestra e'
   una colonna (testata, corpo che scorre, piede) mai piu' larga o alta di quello che si vede (lo script la tiene dentro la
   visualViewport); i testi lunghi (e-mail, telefoni, P.IVA, nomi inglesi) vanno a capo; il piede va a capo e sul telefono
   mette la conferma rossa in alto, a tutta larghezza. Vale per tutte le finestre cm-dialogo (cliente, QR, sito, categoria,
   invio, salva, allegati). */
.cm-dialogo{box-sizing:border-box;max-width:calc(100vw - 24px)}
.cm-dialogo[open]{display:flex;flex-direction:column}
.cm-dialogo > .dialogo-posta-testa,.cm-dialogo > .dialogo-posta-piede{flex:none}
.cm-dialogo > .dialogo-posta-corpo{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,1fr);overscroll-behavior:contain}
.cm-dialogo .dialogo-posta-corpo > *{min-width:0;max-width:100%}
.cm-dialogo .dialogo-posta-corpo img{max-width:100%;height:auto}
.cm-dialogo .dialogo-posta-corpo video,.cm-dialogo .dialogo-posta-corpo canvas{max-width:100%}
.cm-dialogo .dialogo-posta-testa b,.cm-dialogo .cm-letto b,.cm-dialogo .cm-letto small,.cm-dialogo .avviso,.cm-dialogo .cm-spiega,
.cm-dialogo .art-posta-esito,.cm-dialogo .cm-cliente-testo b,.cm-dialogo .cm-strada-testo b,.cm-dialogo .cm-strada-testo small{overflow-wrap:anywhere}
.cm-dialogo .dialogo-posta-piede .bottone{max-width:100%;white-space:normal;text-align:center}
@media (max-width:560px){
  .cm-dialogo .dialogo-posta-piede{flex-direction:column-reverse;align-items:stretch;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .cm-dialogo .dialogo-posta-piede .bottone{justify-content:center}
}

/* ---------- PLANCIA, ritocchi dell'11/10/2026 sera (catalogo e opportunita') ----------
   Va dopo tutti i frammenti delle fasi 1-3 e della correzione del prezzo. */

/* 1. LA COLONNA DEL PANNELLO (js/pannello-articolo.js, .pb-lato)
   Sul computer e sull'iPad in orizzontale il pannello dell'articolo e il cassetto degli allegati stanno in una colonna a
   destra FUORI dalla griglia: parte dalla cima dell'elenco (col cassetto largo dalla cima della plancia) e arriva in fondo
   alla plancia; la pagina le lascia il posto con un margine a destra. Il pannello non allunga piu' la riga dell'elenco: i
   riquadri in fondo (nota nel PDF, copia commissione, commessa) restano subito sotto gli articoli. Il pannello e' fermo
   sotto la testata e alto al massimo quanto lo schermo (l'altezza la scrive lo script): si scorre da solo, subito. */
.pb-lato{display:contents}
@media (min-width:1100px){
  .pb.pb-con-lato{position:relative;--pb-lato-w:404px;--pb-lato-gap:16px}
  .pb.pb-con-lato .pb-lato{display:block;position:absolute;right:0;bottom:0;width:var(--pb-lato-w);z-index:3}
  .pb.pb-con-lato .pb-corpo{position:static}
  .pb.pb-con-lato .pb-corpo.con-pannello{grid-template-columns:minmax(0,1fr)}
  /* il posto a destra: l'elenco e tutto quello che viene dopo (in modifica l'elenco sta dentro la scheda Articoli, e dopo
     la scheda c'e' la Commessa) */
  .pb.pb-con-lato .pb-corpo,.pb.pb-con-lato .pb-corpo ~ *,.pb.pb-con-lato > :has(.pb-corpo) ~ *{margin-right:calc(var(--pb-lato-w) + var(--pb-lato-gap))}
  .pb.pb-con-lato .pb-lato > .pb-isp{position:sticky;top:calc(var(--testata) + 12px);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;touch-action:pan-y}
  /* il cassetto degli allegati: al posto della griglia della fase 3, la stessa colonna; la linguetta sporge a sinistra */
  .pb-v-deal.pb-cas-aperto{display:block}
  .pb.pb-con-lato.pb-cas-aperto{--pb-lato-w:clamp(340px,28vw,404px);--pb-lato-gap:62px}
  .pb.pb-con-lato.pb-cas-alto > *{margin-right:calc(var(--pb-lato-w) + var(--pb-lato-gap))}
  .pb.pb-con-lato .pb-lato > .pb-isp.pb-cas{overflow:visible;touch-action:auto}
}
@media (min-width:1100px) and (max-width:1240px){
  .pb.pb-con-lato:not(.pb-cas-aperto){--pb-lato-w:372px}
}
/* iPad verticale e telefono: il pannello sopra la pagina scorre da solo, senza passare il gesto alla pagina */
@media (max-width:1099px){
  .pb-isp{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* 2. CATALOGO, righe: carrello e SCHEDA TECNICA vicini, interi e quadrati a ogni larghezza. La colonna delle azioni e'
   larga quanto le sue due icone (30+34 col mouse, 38+38 col dito) piu' lo spazio per la sigla "PDF" che sporge a destra; il
   nome cede quello che serve, e le colonne non superano mai l'elenco (sotto i 620 px le righe diventano schede). */
.pb-v-cat{--cat-az:80px}
@media (pointer:coarse){.pb-v-cat{--cat-az:94px}}
.pb-v-cat .pb-griglia{grid-template-columns:46px minmax(210px,1.3fr) 78px 78px 72px 60px minmax(140px,.9fr) 64px 88px var(--cat-az)}
.pb-v-cat .pb-r .c-az{justify-content:flex-end;align-items:center;gap:4px;padding-right:8px}
@container pbl (max-width:1180px){
  .pb-v-cat .pb-griglia{grid-template-columns:46px minmax(150px,1.1fr) 72px 72px 66px minmax(120px,.9fr) 60px var(--cat-az)}
}
@container pbl (max-width:820px){
  .pb-v-cat .pb-griglia{grid-template-columns:46px minmax(110px,1fr) 66px 66px 60px 56px var(--cat-az)}
}
@container pbl (max-width:620px){
  .pb-v-cat .pb-r .c-az{padding-right:0;gap:6px}
}

/* 3. CATALOGO, pannello, blocco 1 "Usa l'articolo": il verde piu' piccolo, accanto carrello e scheda tecnica quadrati */
.pb-usa{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pb-usa .bottone.pb-usa-agg{flex:0 1 auto;height:38px;padding:0 14px;font-size:13.5px}
.pb-usa-icone{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.pb-usa .pb-usa-icone .icona-riga,.pb-usa .pb-usa-icone .icona-riga.cat-pdf{width:38px;height:38px}
.pb-usa .pb-usa-nota{flex-basis:100%}

/* 4. OPPORTUNITA' IN MODIFICA, la riga: capsule dei tipi, campo del prezzo e i tre pulsanti quadrati ("+", PDF, cestino)
   tutti della stessa altezza e sulla stessa linea di mezzo; l'importo "= EUR x" e' una riga piccola SOTTO il campo, che non
   lo sposta. 34 px col mouse, 40 px col dito. */
.pb-v-deal.modifica{--pb-h:34px;--pb-az1:34px;--pb-az2:74px;--pb-az3:114px}
@media (pointer:coarse){.pb-v-deal.modifica{--pb-h:40px;--pb-az1:40px;--pb-az2:86px;--pb-az3:132px}}
.pb-v-deal.modifica .pb-r .pb-cap.in{min-height:var(--pb-h);height:var(--pb-h);padding:3px;align-items:center}
.pb-v-deal.modifica .pb-r .pb-cap.in label,.pb-v-deal.modifica .pb-r .pb-cap.in .pb-in-col{height:calc(var(--pb-h) - 8px)}
.pb-v-deal.modifica .pb-r .pb-cap.in input{height:calc(var(--pb-h) - 10px)}
.pb-v-deal.modifica .pb-r .c-prezzo{position:relative;justify-content:center}
.pb-v-deal.modifica .pb-r .pb-prezzo-in{height:var(--pb-h)}
.pb-v-deal.modifica .pb-r .pb-prezzo-imp{position:absolute;right:2px;top:100%;margin-top:1px;font-size:10.5px;line-height:12px}
.pb-v-deal.modifica .pb-r .c-az{align-items:center;align-self:center}
.pb-v-deal.modifica .pb-r .c-az .icona-riga,.pb-v-deal.modifica .pb-r .c-az .icona-riga.cat-pdf{width:var(--pb-h);height:var(--pb-h);margin:0;flex:none}
.pb-v-deal.modifica .pb-r .c-az .icona-riga.cat-pdf.senza-scheda{border-width:1px}
/* in lettura (Scheda.aspx): le icone della riga in mezzo alla riga come le capsule */
.pb-v-deal .pb-r .c-az{align-items:center}
/* tipi uno sotto l'altro (iPad verticale, elenco stretto): due capsule impilate, il prezzo e le icone in mezzo */
@container pbl (max-width:900px){
  .pb-v-deal.modifica .pb-r .c-az{display:grid;grid-template-columns:repeat(2,var(--pb-az1));gap:6px;justify-content:end;align-content:center}
}
/* elenco stretto (621-760 px: iPad orizzontale col pannello aperto): le icone stavano nella colonna del PREZZO, sotto di
   lui (regola vecchia "grid-column:5" di quando il prezzo non c'era); adesso nella loro colonna, accanto, in mezzo alla riga */
@container pbl (min-width:621px) and (max-width:760px){
  .pb-v-deal .pb-r .c-az,.pb-v-deal.modifica .pb-r .c-az{grid-column:auto;grid-row:auto;align-self:center}
}
/* telefono (schede): campi alti come prima, il prezzo con l'importo accanto */
@container pbl (max-width:620px){
  .pb-v-deal.modifica .pb-r .pb-cap.in{height:auto;min-height:0;padding:5px}
  .pb-v-deal.modifica .pb-r .pb-cap.in label{height:40px}
  .pb-v-deal.modifica .pb-r .pb-cap.in input{height:38px}
  .pb-v-deal.modifica .pb-r .pb-cap.in .pb-in-col{height:38px}
  .pb-v-deal.modifica .pb-r .pb-prezzo-in{height:44px}
  .pb-v-deal.modifica .pb-r .pb-prezzo-imp{position:static;margin:0;font-size:11px}
  .pb-v-deal.modifica .pb-r .c-az{display:flex;align-self:start}
  .pb-v-deal.modifica .pb-r .c-az .icona-riga,.pb-v-deal.modifica .pb-r .c-az .icona-riga.cat-pdf{width:38px;height:38px}
}

/* 5. TESTATA di comando (scheda e modifica): Chat, Commessa PDF, Vedi la scheda / Modifica e il cestino quadrato tutti alti
   uguali, sulla stessa linea, con gli stessi margini (in modifica la Chat portava ancora il margine di .camp-chat) */
.pb-testa .pb-azioni{align-items:center;gap:8px}
.pb-testa .pb-azioni > *{margin:0;flex:none;box-sizing:border-box;vertical-align:middle}
.pb-testa .pb-azioni .bottone{height:38px;min-height:0;padding-top:0;padding-bottom:0;line-height:1}
.pb-testa .pb-azioni .icona-riga,.pb-testa .pb-azioni .icona-riga.elimina{display:inline-grid;place-items:center;width:38px;height:38px;min-height:0;padding:0;overflow:visible}
.pb-testa .pb-azioni .icona-riga svg{width:16px;height:16px;overflow:visible}
@media (max-width:699px){
  .pb-testa .pb-azioni .bottone,.pb-testa .pb-azioni .icona-riga,.pb-testa .pb-azioni .icona-riga.elimina{height:40px}
  .pb-testa .pb-azioni .icona-riga,.pb-testa .pb-azioni .icona-riga.elimina{width:40px}
}

/* 6. OPPORTUNITA' IN MODIFICA, "Aggiungi un tessuto": la fascia di ricerca del catalogo (pb-fascia: casella da 56 px, testo
   e segnaposto da 18 px, Filtri alto uguale), e accanto "Dal carrello" e il suo cestino alti come la casella */
.pb-aggiungi .pb-fascia.sa-fascia{margin:0}
.pb-v-deal .pb-aggiungi .pb-carrello .bottone{height:56px}
.pb-v-deal .pb-aggiungi .pb-carrello .icona-riga{width:56px;height:56px}
@media (max-width:699px){
  .pb-v-deal .pb-aggiungi .pb-carrello .bottone{height:44px}
  .pb-v-deal .pb-aggiungi .pb-carrello .icona-riga{width:44px;height:44px}
}
/* l'interruttore Appunti / Articoli: il conto come gli altri conteggi del portale (ContoElenco: il numero grande rosso) */
.pb-schede button .pb-conta.conto-elenco{min-width:0;height:auto;padding:0;border-radius:0;background:none;color:var(--testo);font-size:15px;line-height:1}
.pb-schede button .pb-conta.conto-elenco .conto-num{font-size:1.3em}

/* ---------- PLANCIA SUL TELEFONO: ogni articolo una SCHEDA staccata (11/10/2026 sera) ----------
   Catalogo e opportunita' (lettura e modifica). Sul telefono le righe erano gia' schede, ma tutte dentro un unico
   riquadro bianco, separate da un filo quasi invisibile: sembravano un blocco solo. Adesso il riquadro dell'elenco
   sparisce e ogni articolo e' una scheda come quelle dell'elenco clienti (B): bordo, angoli tondi, ombra leggera e
   10 px di spazio fra una e l'altra, con la barra colorata a sinistra. I titoli dei gruppi restano etichette fra le
   schede; il totale e "Mostra altri" sono una scheda anche loro. Dall'iPad in su l'elenco resta a righe. */
@media (max-width:699px){
  .pb-lista{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .pb-lista::before{display:none}
  .pb-lista .pb-r{margin:0 0 10px;border:1px solid var(--bordo);border-radius:14px;background:var(--pannello);box-shadow:var(--rilievo);overflow:hidden}
  .pb-lista .pb-r:hover{background:color-mix(in srgb,var(--testo) 3%,var(--pannello))}
  .pb-lista .pb-r.sel{border-color:color-mix(in srgb,var(--accento) 55%,var(--bordo));background:color-mix(in srgb,var(--accento) 8%,var(--pannello));box-shadow:var(--rilievo)}
  .pb-lista .pb-g{margin:14px 0 8px;border:0;background:none;min-height:0;padding:0 4px}
  .pb-lista .pb-g:first-child,.pb-lista .pb-th + .pb-g{margin-top:0}
  .pb-lista .pb-tot{margin:0 0 10px;border:1px solid var(--bordo);border-radius:14px;background:var(--pannello2);box-shadow:var(--rilievo)}
  /* tema scuro: il bordo un po' piu' deciso, le schede si staccano dal fondo nero */
  html[data-tema="scuro"] .pb-lista .pb-r,html[data-tema="scuro"] .pb-lista .pb-tot{border-color:var(--bordo-forte);background:var(--pannello2)}
  html[data-tema="scuro"] .pb-lista .pb-r.sel{border-color:color-mix(in srgb,var(--accento) 60%,var(--bordo-forte));background:color-mix(in srgb,var(--accento) 10%,var(--pannello2))}
}

/* =====================================================================
   MENU A ICONE CHE SCORRE (11/10/2026 sera, lavoro menu-icone-scorre; l'utente: "sistema anche il menu a icone").
   Sugli schermi bassi (sotto ~767px di altezza: 1366x657, 1280x700, iPad mini) a sole icone le ultime voci finivano sotto
   il piede della barra (offline, credito IA, cestino, ticket): a icone la parte delle voci non scorreva, perche' i riquadri
   dei gruppi che escono dalla barra sarebbero stati tagliati. Adesso:
   - a icone, come da aperta e fissata, la parte delle voci (.barra > nav) scorre da sola quando non ci sta (rotella,
     dito, trackpad), senza trascinare la pagina (overscroll-behavior); il piede resta fermo e sempre visibile; le barre
     di scorrimento sono quelle di tutto il portale;
   - il riquadro di un gruppo non e' piu' agganciato al gruppo (che scorre) ma alla barra: a destra delle icone,
     all'altezza della voce, che js/app.js scrive in --sotto-y quando lo si apre e mentre le voci scorrono;
   - via i -3px provvisori delle voci sugli schermi bassi (blocco della spilla): con lo scorrimento non servono piu'.
   ===================================================================== */
@media (min-width:981px){
  /* allargandosi il menu apre il gruppo della pagina: la voce sotto il mouse la tiene ferma js/app.js (tieniFermo), non
     il browser, che altrimenti la sposterebbe a modo suo */
  .barra > nav{overflow-anchor:none}
  html[data-menu="compatto"] .barra > nav{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  html[data-menu="compatto"] .barra .gruppo{position:static}
  html[data-menu="compatto"] .barra .gruppo .sotto{left:calc(100% + 2px);top:var(--sotto-y,8px);max-height:calc(100% - 16px);overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:981px) and (max-height:860px){
  .barra > nav .voce,html[data-menu="compatto"] .barra > nav .voce{padding-top:11px;padding-bottom:11px}
}

/* =====================================================================
   PORTALE OFFLINE, fase 3 (11/10/2026): la CODA delle cose fatte senza rete (js/offline-coda.js: il pannello "Da inviare",
   gli stati della fascia, l'uscita con cose non inviate), lo SCRIVERE senza rete nelle pagine offline (js/offline-scrivi.js:
   la copia commissione nuova "CC in attesa", note, foto e note dettate) e le righe "In attesa di rete" del blocco ODM
   (js/odm.js). Colori della fascia: blu l'invio, verde l'arrivo, rosso a righe l'errore; mai arancione; icone quadrate.
   ===================================================================== */

/* ---------- la fascia: i comandi su blu e su verde, le frecce che girano, il blu calmo di chi aspetta ---------- */
.of-b.of-st-invio .of-b-bottone{color:var(--of-blu-testo)}
.of-b.of-st-inviato .of-b-bottone{color:var(--of-verde-testo)}
.of-b.of-st-invio .of-b-ico svg{animation:of-gira 1.6s linear infinite}
.of-b.of-st-calma{background:color-mix(in srgb,var(--of-blu) 14%,var(--pannello));color:var(--of-blu-testo);border-bottom:1px solid var(--of-blu)}
.of-b.of-st-calma .of-b-ico{background:var(--of-blu);border-color:var(--of-blu);color:#fff}
.of-b.of-st-calma .of-b-ico svg{animation:none}
.of-b.of-st-calma .of-b-bottone{border-color:var(--of-blu);background:var(--of-blu);color:#fff}
.of-b .of-b-coda span{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.of-b.of-st-invio .of-b-ico svg{animation:none}}
@media (max-width:560px){
  .of-b.of-st-invio .of-b-bottone,.of-b.of-st-inviato .of-b-bottone{color:#fff}
  .of-b.of-st-calma .of-b-bottone{border-color:var(--of-blu);background:var(--of-blu);color:#fff}
}

/* ---------- il pannello "Da inviare" (lo stesso del "Prepara per l'offline", in blu) ---------- */
.ofc-pannello{border-left-color:var(--of-blu)}
.ofc-pannello .of-p-testa{background:linear-gradient(180deg,color-mix(in srgb,var(--of-blu) 10%,transparent),transparent)}
.ofc-spia{background:var(--of-blu)}
@media (min-width:981px){.ofg-pagina .ofc-pannello{left:auto;right:18px}}
.ofc-riga{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:start}
.ofc-riga .of-p-ico{align-self:start}
.ofc-riga .of-p-stato{align-self:center}
.ofc-azioni{display:flex;gap:6px;align-self:center}
.ofc-motivo{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--of-blu-testo)}
.ofc-motivo.errore{color:var(--of-rosso-testo);font-weight:600}
.of-p-stato.bozza{--s:var(--of-ambra);--s-t:var(--of-ambra-testo)}
.ofc-riga .icona-riga.ofc-ico-errore{border:1px solid color-mix(in srgb,var(--of-rosso) 50%,transparent);background:color-mix(in srgb,var(--of-rosso) 12%,transparent);color:var(--of-rosso-testo)}
.ofc-errore{padding:8px;border-radius:8px;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--of-rosso) 7%,transparent) 0 8px,transparent 8px 16px)}
.ofc-vuota{display:flex;align-items:center;gap:8px;margin:16px;color:var(--of-verde-testo);font-size:13px;font-weight:600}
.ofc-vuota svg{flex:none}
.ofc-conferma{z-index:75}
.ofc-uscita{z-index:75;border-top-color:var(--of-blu)}
.ofc-uscita .of-blocco-ico{background:var(--of-blu)}
.ofc-uscita.verifica .of-blocco-ico{animation:none}
.ofc-uscita.verifica .of-blocco-ico svg{animation:of-gira 1.6s linear infinite}
@media (max-width:560px){
  .ofc-riga{grid-template-columns:auto minmax(0,1fr) auto}
  .ofc-azioni{grid-column:2 / -1;justify-content:flex-start}
}

/* ---------- scrivere senza rete: il riquadro del cruscotto, gli allegati in attesa, le copie "CC in attesa" ---------- */
.ofw-scrivi .riquadro-testata,.ofw-riquadro .riquadro-testata,.ofw-copie .riquadro-testata{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ofw-scrivi .riquadro-testata h2,.ofw-riquadro .riquadro-testata h2,.ofw-copie .riquadro-testata h2{margin:0}
.ofw-scrivi,.ofw-riquadro,.ofw-copie{margin-top:18px}
.ofw-corpo{padding:14px 16px 16px}
.ofw-spiega{margin:0 0 12px;color:var(--tenue);font-size:13.5px;line-height:1.45}
.ofw-azioni{display:flex;flex-wrap:wrap;gap:8px}
.ofw-azioni .bottone{display:inline-flex;align-items:center;gap:7px}
.ofw-conta{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:2px;border-radius:6px;background:#fff;color:var(--of-blu-testo);font-size:12px;font-weight:800}
.ofw-conta[hidden]{display:none}
.ofw-dainviare.con-errori .ofw-conta{background:var(--of-rosso);color:#fff}
.ofw-righe{margin-top:12px}
.ofw-riga .of-p-ico{width:32px;height:32px}
.cat-codice.ofw-attesa{border:1px dashed var(--of-blu);background:color-mix(in srgb,var(--of-blu) 10%,transparent);color:var(--of-blu-testo)}
.cat-codice.ofw-attesa.arrivata{border-style:solid;border-color:var(--of-verde);background:color-mix(in srgb,var(--of-verde) 12%,transparent);color:var(--of-verde-testo)}
.ofw-sigla{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--debole)}
.ofw-copia-riga .cm-e-r1,.ofw-copia .cm-e-r1{flex-wrap:wrap;gap:6px}
.ofw-copia-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ofw-copia-azioni .bottone{display:inline-flex;align-items:center;gap:7px}
.ofw-errore-riga{color:var(--of-rosso-testo);font-weight:600}
@media (pointer:coarse){.ofw-riga .of-p-ico{width:38px;height:38px}}

/* ---------- le finestre: nota, foto, nota dettata, il cliente e il biglietto, Salva ---------- */
.ofw-campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.ofw-campo > span{font-size:12.5px;font-weight:600;color:var(--tenue)}
.ofw-campo input,.ofw-campo textarea,.ofw-campo select{width:100%;min-width:0;box-sizing:border-box;padding:9px 11px;border:1px solid var(--bordo-forte);border-radius:6px;
  background:var(--sfondo);color:var(--testo);font:inherit;font-size:16px}
.ofw-campo textarea{resize:vertical;min-height:120px;line-height:1.45}
.ofw-nota-coda{margin:0}
.ofw-anteprima{margin:0;text-align:center}
.ofw-anteprima img{max-width:100%;max-height:44vh;border-radius:8px;border:1px solid var(--bordo)}
.ofw-onda-riga{display:flex;align-items:center;gap:14px;padding:10px 12px;border:1px solid var(--bordo);border-radius:10px;background:var(--pannello2)}
.ofw-onda{flex:1;min-width:0;justify-content:center;height:32px}
.ofw-tempo{font-variant-numeric:tabular-nums;font-size:18px}
.ofw-stato{margin:0;color:var(--tenue);font-size:13px}
.ofw-registra.in-registrazione .ofw-onda-riga{border-color:var(--accento)}
.ofw-registra.in-registrazione .ofw-rec{animation:of-batte 1.6s ease-out infinite}
.ofw-dialogo .dialogo-posta-piede .bottone{display:inline-flex;align-items:center;gap:7px}
.ofw-dialogo .dialogo-posta-piede .bottone[hidden]{display:none}
.ofw-cerca{margin:0}
.ofw-clienti{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:34vh;overflow-y:auto;overscroll-behavior:contain}
.ofw-clienti:empty{display:none}
.ofw-cliente{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid var(--bordo);border-radius:8px;background:var(--pannello);
  color:var(--testo);text-align:left;font:inherit;cursor:pointer}
.ofw-cliente:hover,.ofw-cliente:focus-visible{border-color:var(--of-blu);outline:none}
.ofw-cliente > span:last-child{display:flex;flex-direction:column;min-width:0}
.ofw-cliente b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ofw-cliente small{color:var(--tenue);font-size:12px}
.ofw-cliente .sa-mono{flex:none}
.ofw-cliente-scelto{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--of-verde);border-radius:8px;color:var(--of-verde-testo);
  font-weight:600;background:color-mix(in srgb,var(--of-verde) 10%,transparent)}
.ofw-nessuno{color:var(--tenue);font-size:13px;padding:6px 2px}
.ofw-oppure{display:flex;align-items:center;gap:10px;color:var(--debole);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ofw-oppure::before,.ofw-oppure::after{content:"";flex:1;height:1px;background:var(--bordo)}
.ofw-biglietto{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ofw-biglietto-foto{margin:0;display:flex;align-items:center;gap:12px}
.ofw-biglietto-foto img{width:120px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--bordo)}
.ofw-biglietto-foto figcaption{color:var(--of-blu-testo);font-size:12.5px;font-weight:600;line-height:1.35}
.ofw-scegli-foto{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.ofw-passi{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--testo);font-size:13.5px;line-height:1.45}
.ofw-toast{z-index:80}
.ofw-toast.rosso{background:var(--of-rosso);border-color:var(--of-rosso);color:#fff}

/* ---------- il blocco ODM nelle pagine del portale: le cose fatte senza rete, "In attesa di rete" ---------- */
.odm-coda-righe{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.odm-riga.odm-in-coda{border-style:dashed;border-color:color-mix(in srgb,var(--of-blu) 55%,var(--bordo))}
.odm-in-coda .odm-riga-meta{color:var(--of-blu-testo);font-weight:600}
.odm-in-coda .odm-riga-icona{color:var(--of-blu-testo)}
.odm-riga.odm-in-coda-errore{border-color:color-mix(in srgb,var(--of-rosso) 55%,var(--bordo))}
.odm-in-coda-errore .odm-riga-meta{color:var(--of-rosso-testo)}
/* nelle mattonelle del blocco (11/10/2026): niente barra dei pulsanti sotto, quindi il loro spazio in fondo; tratteggio blu */
.odm-righe:not(.art-odm .odm-righe) > .odm-riga.odm-in-coda{--fc:var(--of-blu);padding-bottom:14px;border-style:dashed;border-top-style:solid;
  border-color:color-mix(in srgb,var(--of-blu) 55%,var(--bordo));border-top-color:var(--of-blu);background:color-mix(in srgb,var(--of-blu) 6%,var(--pannello2))}
.odm-righe:not(.art-odm .odm-righe) > .odm-riga.odm-in-coda-errore{--fc:var(--of-rosso);border-color:color-mix(in srgb,var(--of-rosso) 55%,var(--bordo));border-top-color:var(--of-rosso)}
.odm-righe.odm-coda-righe:not(.art-odm .odm-righe){margin-bottom:14px}
.odm-in-coda .odm-riga-testo{cursor:default;padding-right:0}

/* ---------- Setup > Portale offline: la riga di ogni dispositivo con le voci arrivate dalla coda ---------- */
.ofs-contenuto.ofs-coda{color:var(--of-blu-testo)}
.ofs-coda-rifiutate{color:var(--of-rosso-testo);font-weight:700}

/* 11/10/2026: sul telefono il numero (IN ATTESA, ma anche CC-xxxx) e la pillola NON VALIDATA non stanno su una riga: la pillola va sotto, intera */
@media (max-width:480px){.cm-f-riga{flex-wrap:wrap;row-gap:3px}}

/* ======================================================================================================================
   PLANCIA, CORREZIONI DELLA REVISIONE DEGLI ALLINEAMENTI (11/10/2026 notte)
   Revisione indipendente (revisione-allineamenti\REVISIONE.md, tabelle A, B e C) misurata con controlli.js su 8 pagine
   x 15 configurazioni. Regole tenute qui:
   - icone d'azione SEMPRE quadrate e di UNA misura: 38 px, col mouse e col dito (testata, righe, pannello, cassetto);
   - campi della plancia nello stile degli input del portale (bordo --bordo-forte, fondo pieno --campo-attivo, raggio 8,
     testo 15 px), compatti col mouse (32 px) e mai sotto i 38 px col dito;
   - la fascia di ricerca della plancia identica a quella degli elenchi (58 px, testo 19 px, Filtri alto uguale);
   - nelle file: stessa altezza e stesso centro; niente testi tagliati (vanno a capo).
   Va in fondo a fpc.css, dopo tutti i frammenti della plancia.
   ====================================================================================================================== */

/* ---------- 1. TESTATA ---------- */
.pb-testa{container:pbt/inline-size}
.pb-codice{align-self:start}
.pb-meta dd{min-height:22px;align-items:center}
.pb-azioni .bottone{border-radius:8px}
/* testata stretta (cassetto aperto accanto, iPad, menu fissato): i pulsanti vanno sotto, a tutta larghezza; il titolo
   e il cliente hanno tutto lo spazio; nella fila degli strumenti resta solo la data (chi l'ha fatto e' nel titolo) */
@container pbt (max-width:900px){
  .pb-testa{grid-template-columns:auto minmax(0,1fr)}
  .pb-azioni{grid-column:1/-1;justify-content:flex-start;margin-top:10px}
}
@container pbt (max-width:1120px){
  .pb-meta dd small{display:none}
}

/* ---------- 2. NUMERI ---------- */
/* etichette tutte alte due righe (anche quelle con l'icona), cifre tutte alte uguali: le cifre e le righe sotto stanno
   sulla stessa linea in ogni riquadro; le etichette lunghe vanno a capo invece di uscire */
.pb-k-eti{align-items:flex-start;min-height:28px;line-height:14px;white-space:normal}
.pb-k-eti svg{margin-top:0}
.pb-k-num{height:30px;align-items:flex-end}
.pb-k small{white-space:normal;overflow:visible;text-overflow:clip}
.pb-k-filtro .pb-k-eti{min-height:28px}
.pb-k-filtro .pb-k-spunta{top:16px}

/* ---------- 3. BARRA: interruttori tutti alti uguali ---------- */
.pb-seg.piccolo button{height:32px}
@media (pointer:coarse){.pb-seg.piccolo button{height:36px}}

/* ---------- 4. FASCIA DI RICERCA: come gli elenchi ---------- */
.pb .pb-fascia .sa-cerca input[type=search]{height:58px;font-size:19px}
.pb .pb-fascia .ea-azioni .bottone.vuoto.cat-filtri-apri{height:58px}
.pb-v-deal .pb-aggiungi .pb-carrello .bottone{height:58px}
.pb-v-deal .pb-aggiungi .pb-carrello .icona-riga{width:58px;height:58px}
@media (max-width:699px){
  .pb .pb-fascia .sa-cerca input[type=search]{height:52px;font-size:16px}
  .pb .pb-fascia .ea-azioni .bottone.vuoto.cat-filtri-apri{height:52px}
  /* i quattro comandi della testata stanno su una riga anche sul telefono */
  .pb-testa .pb-azioni{gap:5px}
  .pb-testa .pb-azioni .bottone{padding:0 8px;gap:5px;font-size:13px}
}

/* ---------- 5. ICONE: quadrate, 38 px ovunque nella plancia ---------- */
.pb-r .c-az .icona-riga,.pb-r .c-az .icona-riga.cat-pdf,
.pb-isp-az .icona-riga,.pb-isp-az .icona-riga.cat-pdf,
.pb-isp-barra .icona-riga,.pb-usa .icona-riga,.pb-usa .icona-riga.cat-pdf,
.pb-testa .pb-azioni .icona-riga{width:38px;height:38px;flex:none}
.pb .cat-pdf .cat-pdf-sigla,.pb-isp .cat-pdf .cat-pdf-sigla{right:-4px}
.pb-v-deal,.pb-v-deal.modifica{--pb-az1:38px;--pb-az2:82px;--pb-az3:126px}
.pb-v-cat{--cat-az:92px}
.pb-r .c-az{align-items:center;gap:6px}
.pb-v-cat .pb-r .c-az{gap:6px}

/* ---------- 6. RIGHE: separazione, nomi e codici ---------- */
/* il filo fra una riga e l'altra si vede (--bordo, contrasto 1,4:1 al posto dell'8%), sotto ogni riga */
.pb-r{border-top:0;border-bottom:1px solid var(--bordo)}
.pb-th + .pb-r,.pb-g + .pb-r{border-top:0}
.pb-nome{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.pb-sotto{flex-wrap:wrap;row-gap:4px;white-space:normal;overflow:visible}
.pb-mini{white-space:normal;overflow:visible;text-overflow:clip}
.pb-comptesto{white-space:normal;overflow:visible;text-overflow:clip}
.pb-data{display:block}
.pb-r .c-col{display:flex;align-items:center;justify-content:flex-end}

/* ---------- 7. RIGHE DELL'OPPORTUNITA' IN MODIFICA: campi ---------- */
/* i campi come gli input del portale; quantita' e prezzo alti uguali (--pb-campo); l'importo accanto al prezzo */
.pb-v-deal.modifica{--pb-campo:32px}
@media (pointer:coarse){.pb-v-deal.modifica{--pb-campo:38px}}
.pb-v-deal.modifica .pb-r .pb-cap.in{height:auto;min-height:0;padding:3px;gap:4px;align-items:center}
.pb-v-deal.modifica .pb-r .pb-cap.in label,.pb-v-deal.modifica .pb-r .pb-cap.in .pb-in-col{height:var(--pb-campo);border:1px solid var(--bordo-forte);border-radius:8px;background:var(--campo-attivo)}
.pb-v-deal.modifica .pb-r .pb-cap.in input{height:calc(var(--pb-campo) - 2px);font-size:15px}
.pb-v-deal.modifica .pb-r .pb-cap.in .pb-in-col{font-size:13px}
.pb-v-deal.modifica .pb-r .pb-prezzo-in{height:calc(var(--pb-campo) + 2px);border-color:var(--bordo-forte);border-radius:8px;background:var(--campo-attivo)}
.pb-v-deal.modifica .pb-r .pb-prezzo-in.con-listino{border-color:color-mix(in srgb,var(--ic-verde) 60%,var(--bordo-forte))}
.pb-v-deal.modifica .pb-r .c-prezzo{display:flex !important;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;position:static}
.pb-v-deal.modifica .pb-r .pb-prezzo-in{flex:1 1 auto;min-width:0}
.pb-v-deal.modifica .pb-r .pb-prezzo-imp{position:static;flex:none;margin:0;font-size:11px;line-height:1.2}
.pb-v-deal.modifica .pb-r .c-az .icona-riga.cat-pdf.senza-scheda{border-width:1px}
/* i campi del pannello come quelli della riga */
.pb-camp-riga label,.pb-camp-riga > input{height:38px;border:1px solid var(--bordo-forte);border-radius:8px;background:var(--campo-attivo)}
.pb-camp-riga label input{height:36px}
.pb-camp-riga > input{font-size:15px}

/* colonne larghe (sopra i 1060 px di elenco): una riga sola, il prezzo con l'importo accanto */
.pb-v-deal.modifica .pb-griglia{grid-template-columns:30px 46px minmax(190px,1fr) calc(var(--pb-tipi) * 200px + (var(--pb-tipi) - 1) * 12px) 190px var(--pb-az3)}
.pb-v-deal .c-tipi{align-items:stretch}
.pb-v-deal .pb-r .c-tipi > .pb-cap{align-self:stretch}

/* ---------- 8. RIGHE DELL'OPPORTUNITA' FRA 621 E 1060 PX: DUE LINEE ORDINATE ----------
   Prima i tipi di campione andavano uno sotto l'altro e i pulsanti su due righe, sfalsati. Adesso: sopra numero, foto,
   nome, prezzo e i pulsanti in fila; sotto le capsule dei tipi affiancate, sotto la loro intestazione. */
@container pbl (min-width:621px) and (max-width:1060px){
  .pb-v-deal .pb-griglia,.pb-v-deal.modifica .pb-griglia{
    grid-template-columns:24px 46px minmax(0,1fr) 96px var(--pb-az2) !important;
    grid-template-areas:"n foto art prezzo az" ". . tipi tipi tipi" !important;row-gap:8px;column-gap:12px}
  .pb-v-deal.modifica .pb-griglia{grid-template-columns:24px 46px minmax(0,1fr) 190px var(--pb-az3) !important}
  .pb-v-deal .pb-griglia > .c-n{grid-area:n !important}
  .pb-v-deal .pb-griglia > .c-foto{grid-area:foto !important}
  .pb-v-deal .pb-griglia > .c-art{grid-area:art !important;align-self:center}
  .pb-v-deal .pb-griglia > .c-tipi{grid-area:tipi !important;display:grid !important;grid-template-columns:repeat(var(--pb-tipi),minmax(0,1fr)) !important;gap:8px !important;align-items:stretch}
  .pb-v-deal .pb-griglia > .c-prezzo{grid-area:prezzo !important}
  .pb-v-deal .pb-griglia > .c-az{grid-area:az !important;display:flex !important;grid-template-columns:none !important;flex-direction:row;justify-content:flex-end;align-items:center;align-self:center;gap:6px}
  .pb-v-deal .pb-griglia > .c-imp,.pb-v-deal .pb-griglia > .c-pz{display:none !important}
  .pb-v-deal .pb-g > .pb-g-nome,.pb-v-deal .pb-tot > .pb-tot-eti{grid-area:1 / 1 / 2 / 4 !important}
  .pb-v-deal .pb-th .c-tipi > span,.pb-v-deal .pb-th .c-tipi > span:not(:first-child){display:block !important}
  .pb-v-deal .pb-th .c-tipi > span small{display:block !important}
  .pb-v-deal .pb-g .c-tipi > span,.pb-v-deal .pb-tot .c-tipi > b{display:block !important}
  .pb-v-deal .pb-cap .tn,.pb-v-deal.modifica .pb-cap.in .tn{display:none !important}
  .pb-v-deal .pb-cap .col{max-width:none}
  .pb-v-deal .pb-th{padding-top:8px;padding-bottom:8px}
  .pb-v-deal.modifica .pb-cap.in label{width:84px}
  .pb-v-deal.modifica .pb-cap.in .pb-in-col{display:block}
}

/* ---------- 9. SCHEDE SUL TELEFONO (fino a 620 px di elenco) ---------- */
@container pbl (max-width:620px){
  /* opportunita' in lettura: foto e nome, le capsule, il prezzo e i pulsanti in fila in fondo */
  .pb-v-deal .pb-r,.pb-v-deal.modifica .pb-r{grid-template-columns:52px minmax(0,1fr) auto !important;grid-template-areas:"foto art art" "tipi tipi tipi" "pz pz az" !important}
  .pb-v-deal.modifica .pb-r{grid-template-areas:"foto art art" "prezzo prezzo az" "tipi tipi tipi" !important}
  .pb-v-deal .pb-r .c-tipi{grid-area:tipi}
  .pb-v-deal .pb-r .c-pz{grid-area:pz;align-self:center}
  .pb-v-deal .pb-r .c-az,.pb-v-deal.modifica .pb-r .c-az{grid-area:az;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;align-self:center;gap:6px}
  .pb-v-deal.modifica .pb-r .c-prezzo{grid-area:prezzo;align-self:center}
  /* in modifica: un tipo per riga, nome, quantita' e colore sulla stessa linea */
  .pb-v-deal.modifica .pb-r .c-tipi{grid-template-columns:minmax(0,1fr) !important;gap:6px}
  .pb-v-deal.modifica .pb-r .pb-cap.in{display:flex !important;flex-wrap:nowrap;align-items:center;gap:6px;padding:4px}
  .pb-v-deal.modifica .pb-r .pb-cap.in .tn{display:block !important;flex:none;width:auto;min-width:64px;padding:0 0 0 4px;font-size:10px;overflow:visible;text-overflow:clip}
  .pb-v-deal.modifica .pb-r .pb-cap.in label{flex:none;width:88px;height:var(--pb-campo)}
  .pb-v-deal.modifica .pb-r .pb-cap.in .pb-in-col{display:block;flex:1 1 auto;height:var(--pb-campo)}
  .pb-v-deal.modifica .pb-r .pb-prezzo-in{height:calc(var(--pb-campo) + 2px)}
  /* catalogo: i due pulsanti accanto al nome, i numeri sotto */
  .pb-v-cat .pb-r{grid-template-columns:52px repeat(3,minmax(0,1fr)) !important;grid-template-areas:"foto art art az" ". pmq pml hut" ". comp comp col" !important}
  .pb-v-cat .pb-r .c-az{grid-area:az;flex-direction:row;justify-content:flex-end;align-items:center;align-self:center;gap:4px;padding:0}
}

/* ---------- 10. FONDO DELLA SCHEDA: i riquadri subito sotto (la riga dei tasti non li allontana) ---------- */
.pb-tasti{margin-top:8px}
/* col pannello o il cassetto aperto l'elenco e' stretto: la riga dei tasti andrebbe su piu' righe e allontanerebbe i riquadri */
.pb.pb-con-lato .pb-tasti{display:none}
@media (max-width:1300px){.pb.pb-con-lato .pb-dock{grid-template-columns:minmax(0,1fr)}}
.pb-dock{margin-top:10px}

/* ---------- 11. PANNELLO ---------- */
.pb-targa{grid-template-columns:repeat(2,minmax(0,1fr))}
.pb-dato .e{overflow:visible}
.pb-storia small{white-space:normal}
.pb-prezzo{align-items:stretch}
.pb-isp .cm-f-lis-voci{align-items:stretch}
.pb-isp .cm-f-lis-voce{align-items:flex-start}

/* ---------- 12. ALLEGATI DEL CLIENTE: Sfoglia/Gestisci e Aggiungi alti uguali ---------- */
.az-cas-barra .az-cas-aggiungi{height:40px}
@media (pointer:coarse){.az-cas-barra .az-cas-aggiungi{height:44px}}

/* ---------- 13. VISORE E CASSETTO: frecce alte come gli altri pulsanti, icone del cassetto di una misura ---------- */
.cm-vis-nav .icona-riga{width:40px;height:40px}
.cm-vis-cas .icona-riga,.pb-cas .icona-riga,#azCassetto .icona-riga,.icona-riga.cm-vis-cas-play{width:38px;height:38px;flex:none}
.cm-vis-r2{flex-wrap:wrap;white-space:normal;overflow:visible;row-gap:4px}
.cm-vis-cas-ft-t,.cm-vis-cas-sez-t span{white-space:normal;overflow:visible;text-overflow:clip}

/* ======================================================================================================================
   PLANCIA, SECONDO GIRO DELLA REVISIONE DEGLI ALLINEAMENTI (11/10/2026 notte)
   Dopo il frammento della revisione (pubblicato alle 22:12). Cassetto del visore, testata sul telefono, elenco delle
   copie e le larghezze non misurate nel primo giro (1280 e 1100 col menu a icone, 1440 col menu fissato, iPad 1366 e 1024).
   ====================================================================================================================== */

/* ---------- 1. CASSETTO DEL VISORE ---------- */
/* i punti del riassunto: un filo fra uno e l'altro, non piu' attaccati */
.cm-vis-cas-punti li{margin:0;padding:6px 0;border-bottom:1px solid var(--bordo)}
.cm-vis-cas-punti li:last-child{border-bottom:0}
/* le linguette della nota dettata (Riassunto / Trascrizione): quando sono strette la scritta non si taglia piu' */
@container odmling (max-width:860px){
  .odm-ling .odm-ling-voce{gap:4px;padding-left:5px;padding-right:5px}
  .odm-ling .odm-ling-k{letter-spacing:0}
}

/* ---------- 2. ELENCO DELLE COPIE: il titolo di sezione si stacca dal gruppo che segue ---------- */
.cm-e-sezione{padding-bottom:6px;border-bottom:1px solid var(--bordo-forte)}

/* ---------- 3. TESTATA SUL TELEFONO ---------- */
@media (max-width:699px){
  /* fila delle informazioni in due colonne ordinate: validazione e stato, l'agente a tutta riga, le due date affiancate */
  .pb-meta > div.pb-meta-agenti{grid-column:1/-1;border-right:0}
  .pb-meta > div.pb-meta-lungo{grid-column:auto;border-right:0}
  .pb-meta > div:nth-child(4){border-right:1px solid var(--pb-linea)}
  .pb-meta dd{font-size:13px}
  /* la Chat sul telefono e' solo l'icona: quadrata come il cestino */
  .pb-testa .pb-azioni .bottone.solo-icona-tel{width:40px;padding:0;justify-content:center}
}

/* ---------- 4. NUMERI STRETTI (1440 col menu fissato e il cassetto aperto: cinque riquadri in ~640 px) ----------
   le etichette lunghe (IMPORTO COMUNICATO) non escono piu': meno spazio intorno, niente icona, lettere meno larghe */
.pb-kpi{container:pbk/inline-size}
@container pbk (min-width:500px) and (max-width:700px){
  .pb-kpi .pb-k{padding-left:10px;padding-right:10px}
  .pb-kpi .pb-k-eti{letter-spacing:.04em}
  .pb-kpi .pb-k-eti svg{display:none}
}

/* ---------- 5. FILA DEGLI STRUMENTI IN UNA TESTATA STRETTA (1440 col menu fissato e il cassetto aperto) ---------- */
@container pbt (min-width:500px) and (max-width:800px){
  .pb-meta > div{padding-left:10px;padding-right:10px}
  .pb-meta > div:first-child{padding-left:22px}
  .pb-meta dt{letter-spacing:.06em}
}

/* ---------- PANNELLO DI DETTAGLIO: UNA SOLA SCHEDA TECNICA (12/10/2026) ----------
   L'utente: "troppi tasti scheda tecnica". Il PDF resta solo nella fila delle icone sotto il codice; nel blocco 6 il nome
   del file e "Invia" per e-mail (con la busta); il nome del file va a capo invece di essere tagliato. */
.pb-file-az .bottone{display:inline-flex;align-items:center;gap:6px}
.pb-file-az .bottone svg{flex:none}
.pb-file-nome span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* il quadrato verde "Aggiungi a un'opportunita'" nella fila delle icone: il + quando non e' nel carrello, la spunta quando c'e' */
.pb-isp-aggiungi .cat-carrello-ok{display:none}
.pb-isp-aggiungi.attiva .cat-carrello-piu{display:none}
.pb-isp-aggiungi.attiva .cat-carrello-ok{display:inline}

/* ---- LA STRISCIA DEGLI ARTICOLI SUL TELEFONO CON LA TASTIERA APERTA (12/10/2026, proposta B scelta da Andrea) ----
   Mentre si scrive il codice la striscia sale in cima alla parte visibile (cm-f-str-su) e gli articoli trovati stanno
   subito sotto il codice, compatti e scorrevoli fino alla tastiera (cm-f-vas-compatto), sopra gli altri campi della
   striscia. Solo striscia stretta (telefono): iPad e PC non cambiano. */
.cm-f-str.cm-f-str-su{z-index:8;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.cm-f-str.cm-f-str-su::before{display:none}
.cm-f-vas.cm-f-vas-compatto{z-index:9;display:block;overflow:auto;overscroll-behavior:contain;border-color:var(--accento);box-shadow:0 16px 34px rgba(0,0,0,.4)}
.cm-f-vas-compatto .cm-f-vas-cat{padding:4px 4px 6px}
.cm-f-vas-compatto .cm-f-vas-titolo{margin:4px 8px 4px}
.cm-f-vas-compatto .cm-f-vas-elenco{max-height:none;overflow:visible;gap:1px}
.cm-f-vas-compatto .cm-f-vas-nota{display:none}
.cm-f-vas-compatto .cm-f-art{min-height:44px;gap:9px;padding:0 8px 0 5px;border-radius:9px}
.cm-f-vas-compatto .cm-f-art + .cm-f-art{box-shadow:inset 0 1px 0 var(--bordo)}
.cm-f-vas-compatto .cm-f-art.acceso{box-shadow:inset 0 0 0 1.5px var(--bordo-forte)}
.cm-f-vas-compatto .cm-f-art-foto{width:28px;height:28px;border-radius:7px}
.cm-f-vas-compatto .cm-f-art b{min-width:70px;font-size:15px}
.cm-f-vas-compatto .cm-f-art span{font-size:13px}

/* =====================================================================
   SPILLA PER DISPOSITIVO (12/10/2026, lavoro spilla-dispositivo). Lo script in testa a FPC.Master puo' cambiare
   data-menu con la scelta di questo browser e segna html[data-menu-dispositivo]; lo script subito dopo il menu mette a
   posto il gruppo della pagina e toglie il segno. In quell'attimo il riquadro del gruppo (aperto dal server per il menu
   fissato) non deve comparire accanto alle icone.
   ===================================================================== */
html[data-menu-dispositivo] .barra details.gruppo[data-attivo] > .sotto{display:none}

/* BIGLIETTO VELOCE (12/10/2026, Andrea: "con scarsa connettivita' il processo puo' durare anche 20 secondi"): nelle finestre
   della lettura (.am-lettura di Nuova azienda / Modifica, .cm-lettura della Copia commissione) la fase con i KB davvero
   inviati, quanto e' stata rimpicciolita la foto, "Continua a lavorare" (la lettura va avanti a finestra chiusa) e, con la
   finestra chiusa, la striscia in basso che dice "biglietto letto" (js/app.js, FPCFoto), sopra le barre fisse in fondo alle pagine */
.am-lettura-fase{margin:2px 0 6px;font-size:13.5px;font-weight:700;color:var(--testo);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.am-lettura-leggera{display:flex;align-items:center;justify-content:center;gap:7px;margin:8px 0 0;font-size:12.5px;color:var(--tenue);font-variant-numeric:tabular-nums}
.am-lettura-leggera::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ic-verde);box-shadow:0 0 0 3px color-mix(in srgb,var(--ic-verde) 22%,transparent)}
.am-lettura-continua{display:grid;justify-items:center;gap:6px;margin:16px -28px -22px;padding:14px 28px 20px;border-top:1px solid var(--bordo)}
.am-lettura-continua .bottone{min-height:42px;padding:0 20px;font-weight:700}
.am-lettura-continua small{max-width:40ch;color:var(--tenue);font-size:12.5px;line-height:1.4}
.am-lettura-barra.misurata i{left:0;width:3%;animation:none;transition:width .25s linear}
.am-lettura.fatto .am-lettura-fase,.am-lettura.fatto .am-lettura-continua{display:none}
.cm-lettura .am-lettura-fase{margin:8px 0 0}
.cm-lettura .am-lettura-continua{margin-top:14px}
.fpc-foto-avviso{position:fixed;left:50%;bottom:calc(116px + env(safe-area-inset-bottom,0px));z-index:10050;width:max-content;max-width:min(560px,calc(100vw - 32px));
  padding:12px 16px 12px 14px;border:1px solid var(--bordo);border-left:5px solid var(--ic-verde);border-radius:12px;background:var(--pannello);color:var(--testo);
  box-shadow:0 14px 40px rgba(0,0,0,.4);font-size:14px;font-weight:600;line-height:1.4;opacity:0;transform:translate(-50%,16px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.fpc-foto-avviso.visibile{opacity:1;transform:translate(-50%,0)}
.fpc-foto-avviso.avvisa{border-left-color:#e4a11b}
.fpc-foto-avviso.errore{border-left-color:var(--accento)}
@media (max-width:520px){
  .am-lettura-continua{margin:14px -18px -18px;padding:12px 18px 16px}
  .am-lettura-continua .bottone{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .am-lettura-barra.misurata i,.fpc-foto-avviso{transition:none}
}

/* =====================================================================
   RETE DEI DISPOSITIVI (12/10/2026), prefisso rd-: Setup "Rete dei dispositivi" (disegno B "mappa del tempo",
   js/rete-setup.js) e schedina "La tua rete adesso" (la lancetta della A con "La tua settimana" della B,
   js/rete-misura.js). Disegno del designer (proposta-rd.css: COMUNE + B + lancetta della A), scelto da Andrea.
   Animazioni solo transform/opacity e solo mentre si misura (.rd-misura); con prefers-reduced-motion nessuna.
   ===================================================================== */

/* i quattro giudizi: verde, verde acqua, ambra, rosso (mai arancione); testi >= 4,5:1 sul pannello in tutti e due i
   temi. Il giudizio non e' mai affidato solo al colore: c'e' sempre la parola e le tacche (4 ottima .. 1 pessima). */
:root{
  --rd-ottima:#1a8448;--rd-buona:#0e6b8c;--rd-debole:#8c6800;--rd-pessima:#c8102e;--rd-niente:#8b9aa1;
  --rd-pista:rgba(16,34,43,.10);--rd-vuoto:rgba(16,34,43,.045);--rd-ago:#10222b;--rd-reticolo:rgba(16,34,43,.05);
}
html[data-tema="scuro"]{
  --rd-ottima:#4fd08a;--rd-buona:#3ccbc4;--rd-debole:#f2c14e;--rd-pessima:#ff5c6b;--rd-niente:rgba(239,232,217,.40);
  --rd-pista:rgba(239,232,217,.11);--rd-vuoto:rgba(239,232,217,.045);--rd-ago:#efe8d9;--rd-reticolo:rgba(239,232,217,.045);
}
.rd{container-type:inline-size;container-name:rd}
.rd-g-ottima{--rd-c:var(--rd-ottima)}
.rd-g-buona{--rd-c:var(--rd-buona)}
.rd-g-debole{--rd-c:var(--rd-debole)}
.rd-g-pessima{--rd-c:var(--rd-pessima)}
.rd-g-niente{--rd-c:var(--rd-niente)}

/* le tacche: 4 barrette, accese quante dice il giudizio */
.rd-tacche{display:inline-flex;align-items:flex-end;gap:2px;flex:none;width:17px;height:13px}
.rd-tacche i{flex:1;min-width:0;border-radius:1.5px;background:var(--rd-pista)}
.rd-tacche i:nth-child(1){height:34%}
.rd-tacche i:nth-child(2){height:56%}
.rd-tacche i:nth-child(3){height:78%}
.rd-tacche i:nth-child(4){height:100%}
.rd-tacche.l1 i:nth-child(-n+1),.rd-tacche.l2 i:nth-child(-n+2),.rd-tacche.l3 i:nth-child(-n+3),.rd-tacche.l4 i{background:var(--rd-c)}
.rd-tacche.l0 i{background:none;box-shadow:inset 0 0 0 1px var(--rd-niente)}
.rd-tacche.grande{width:30px;height:24px;gap:3px}
.rd-tacche.grande i{border-radius:2.5px}

/* la pillola del giudizio: tacche + parola (testo nel colore del testo, il colore sta nel bordo e nelle tacche) */
.rd-giudizio{display:inline-flex;align-items:center;gap:7px;flex:none;padding:4px 11px 4px 8px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--rd-c) 50%,transparent);background:color-mix(in srgb,var(--rd-c) 12%,transparent);
  color:var(--testo);font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}
.rd-legenda{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0;list-style:none}

/* icona del dispositivo (non e' un'azione: quadrato tenue, non cliccabile) */
.rd-disp{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:var(--pannello2);color:var(--tenue);border:1px solid var(--bordo)}
.rd-disp svg{width:20px;height:20px}

/* righello piccolo di una lettura: le 4 zone tenui e la tacca del valore */
.rd-scala{position:relative;display:block;height:5px;margin-top:7px}
.rd-scala::before{content:"";position:absolute;inset:0;border-radius:3px;opacity:.32;
  background:linear-gradient(90deg,var(--rd-pessima) 0 24%,transparent 0 26%,var(--rd-debole) 0 49%,transparent 0 51%,var(--rd-buona) 0 74%,transparent 0 76%,var(--rd-ottima) 0)}
.rd-scala > i{position:absolute;top:-3px;left:calc(var(--f) * 100%);width:4px;height:11px;margin-left:-2px;border-radius:2px;background:var(--rd-c);box-shadow:0 0 0 2px var(--pannello)}

/* riempimenti degli SVG */
.rd-pieno{fill:var(--rd-c)}
.rd-vuoto{fill:var(--rd-vuoto)}
.rd-fascia{fill:var(--rd-c);opacity:.09}
html[data-tema="scuro"] .rd-fascia{opacity:.11}

/* filtri: le pillole del portale, col numero */
.rd-pillole .rd-pn{margin-left:2px;font-weight:700;color:var(--tenue);font-variant-numeric:tabular-nums}
.rd-etichetta{flex:none;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--debole)}
@media (pointer:coarse){.rd-pillole li label{min-height:38px;padding-top:7px;padding-bottom:7px}}

/* come si da' il giudizio (chiuso in fondo alla sezione) */
.rd-soglie{margin-top:18px;border:1px solid var(--bordo);border-radius:10px;background:var(--pannello)}
.rd-soglie summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--tenue)}
.rd-soglie summary::-webkit-details-marker{display:none}
.rd-soglie summary svg{color:var(--accento2)}
.rd-soglie[open] summary{border-bottom:1px solid var(--bordo)}
.rd-soglie-corpo{padding:12px 14px 14px;overflow-x:auto}
.rd-soglie table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.rd-soglie th,.rd-soglie td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--bordo)}
.rd-soglie tbody th{font-weight:600}
.rd-soglie p{margin:10px 0 0;font-size:12px;color:var(--tenue)}

/* "La tua rete adesso": finestra al centro (PC e iPad), foglio dal basso (telefono). Si apre dal menu del nome o
   dalla pagina offline; misura solo quando si apre o si tocca "Prova ora". */
.rd-velo{position:fixed;inset:0;z-index:90;background:rgba(6,7,9,.56)}
.rd-rete{position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  width:min(452px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--bordo);border-radius:16px;background:var(--pannello);color:var(--testo);
  box-shadow:0 34px 90px -30px rgba(0,0,0,.65),var(--rilievo)}
.rd-rete::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:16px 16px 0 0;background:var(--rd-c);opacity:.9}
.rd-rete-testa{display:flex;align-items:center;gap:12px;padding:18px 18px 8px 20px}
.rd-rete-testa > div{flex:1;min-width:0}
.rd-rete-testa h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em}
.rd-rete-testa small{display:block;margin-top:2px;font-size:12px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-rete-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:#fff;background:var(--accento)}
.rd-rete-corpo{display:flex;flex-direction:column;gap:14px;padding:6px 20px 16px}
.rd-rete-frase{margin:0;font-size:14px;line-height:1.5;text-align:center;color:var(--tenue)}
.rd-rete-frase b{display:block;margin-bottom:2px;font-size:17px;color:var(--testo)}
.rd-rete-nota{display:flex;gap:8px;margin:0;padding:10px 12px;border-radius:10px;background:var(--pannello2);font-size:12px;line-height:1.5;color:var(--tenue)}
.rd-rete-nota svg{flex:none;margin-top:1px;color:var(--accento2)}
.rd-rete-piede{display:flex;flex-direction:column;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--bordo)}
.rd-rete-piede .bottone{justify-content:center;min-height:46px;font-size:15px}
.rd-rete-piede small{font-size:11.5px;line-height:1.45;color:var(--debole);text-align:center}
@media (max-width:640px){
  .rd-rete{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:94vh;border-radius:20px 20px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .rd-rete::after{border-radius:20px 20px 0 0}
  .rd-rete::before{content:"";display:block;width:42px;height:5px;margin:9px auto -6px;border-radius:3px;background:var(--bordo-forte)}
}
/* i passi della misura */
.rd-passi{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.rd-passi li{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 12px;border-radius:10px;border:1px solid var(--bordo);font-size:13.5px}
.rd-passi li > svg{flex:none;color:var(--rd-c,var(--debole))}
.rd-passi li.fatto > svg{color:var(--rd-c)}
.rd-passi li span{flex:1}
.rd-passi li b{font-variant-numeric:tabular-nums;font-size:14px}
.rd-passi li b small{font-weight:500;color:var(--tenue)}
.rd-passi li.ora{border-color:var(--accento2);background:color-mix(in srgb,var(--accento2) 9%,transparent)}
.rd-passi li.ora b{color:var(--accento2);font-weight:600}
.rd-passi li.poi{color:var(--debole)}
.rd-passi li.poi b{font-weight:500}
.rd-passi li .attesa-rotella{flex:none;width:14px;height:14px}
/* mentre si misura il filo in cima alla finestra diventa blu e avanza con i passi (solo transform) */
.rd-rete.rd-misura::after{background:var(--accento2);transform-origin:left center;transform:scaleX(var(--rd-avanza,.2));transition:transform .4s ease}

/* la voce nel menu del nome: l'ultimo giudizio gia' salvato, nessuna misura per disegnarla */
.rd-voce .rd-voce-testo{flex:1;min-width:0;line-height:1.25}
.rd-voce .rd-voce-testo small{display:block;font-size:11px;color:var(--tenue)}
.rd-voce .rd-tacche{margin-left:auto}

@media (prefers-reduced-motion:reduce){.rd-rete *,.rd-rete{animation:none !important;transition:none !important}}

/* ===================== lancetta della A (schedina) ===================== */

.rd-a-quadrante{display:block;width:100%;max-width:230px;height:auto;overflow:visible}
.rd-a-z{fill:none;stroke:var(--rd-c);stroke-width:12;opacity:.2}
.rd-a-z.su{opacity:1}
.rd-a-alone{fill:none;stroke:var(--rd-c);stroke-width:28;opacity:.12}
.rd-a-righe{fill:none;stroke:var(--debole);stroke-width:1.2}
.rd-a-num{font-family:var(--carattere);font-size:10.5px;font-weight:600;fill:var(--tenue);font-variant-numeric:tabular-nums}
.rd-a-nome{font-size:9.5px;letter-spacing:.02em}
.rd-a-ago{fill:var(--rd-ago);transform-box:view-box;transform-origin:110px 112px;transition:transform .9s cubic-bezier(.2,.9,.25,1.12)}
.rd-a-perno{fill:var(--pannello);stroke:var(--rd-ago);stroke-width:3}

.rd-a-letture{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.rd-a-letture > div{min-width:0}
.rd-a-letture dt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--debole)}
.rd-a-letture dd{margin:2px 0 0;white-space:nowrap;font-variant-numeric:tabular-nums}
.rd-a-letture dd b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.rd-a-letture dd small{font-size:11px;color:var(--tenue)}
.rd-a-letture dd.rd-nd{font-size:12px;color:var(--debole)}
.rd-a-letture .spento{opacity:.5}

.rd-consiglio{display:flex;gap:9px;margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;
  background:color-mix(in srgb,var(--accento2) 9%,transparent);border:1px solid color-mix(in srgb,var(--accento2) 35%,transparent)}
.rd-consiglio svg{flex:none;margin-top:1px;color:var(--accento2)}

/* "La tua rete adesso" - A: il quadrante grande con la lancetta che misura */
.rd-a-grande{display:flex;flex-direction:column;align-items:center;margin:2px auto 0;width:100%;max-width:310px}
.rd-a-grande .rd-a-quadrante{max-width:310px}
.rd-a-grande .rd-a-num{font-size:9.5px}
.rd-a-grande-valore{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px;line-height:1}
.rd-a-grande-valore small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.rd-a-grande-valore b{font-size:44px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rd-a-grande-valore span{font-size:13px;color:var(--tenue)}
.rd-a-grande-valore b.parola{margin-top:8px;font-size:29px;letter-spacing:-.02em;color:var(--rd-c);text-align:center;line-height:1.1}
/* il quadrante del giudizio: fascia piu' larga con le parole scritte sopra, lungo l'arco */
.rd-a-nomi .rd-a-z{stroke-width:19}
.rd-a-nomi .rd-a-z:not(.su){opacity:.16}
.rd-a-nomi .rd-a-alone{stroke-width:34}
.rd-a-sulla{font-family:var(--carattere);font-size:8.6px;font-weight:800;letter-spacing:.14em;fill:var(--tenue)}
.rd-a-sulla.su{fill:#fff}
html[data-tema="scuro"] .rd-a-sulla.su{fill:#0b0c0f}
.rd-rete-letture{padding:12px 14px;border-radius:12px;border:1px solid var(--bordo);background:var(--pannello2)}
.rd-rete-frase.rd-attesa-frase{font-size:13px}
/* mentre si misura la lancetta oscilla un poco intorno al valore (solo transform, solo con .rd-misura) */
.rd-misura .rd-a-vivo .rd-a-ago{animation:rd-a-trema 1.1s ease-in-out infinite alternate}
@keyframes rd-a-trema{from{rotate:-3deg}to{rotate:3deg}}

/* ===================== VARIANTE B - mappa del tempo ===================== */
/* la testata: la frase, i conteggi e la quota delle ore per giudizio */
.rd-b-testa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;margin:18px 0 0;padding:20px 22px 18px;
  border:1px solid var(--bordo);border-radius:16px;box-shadow:var(--rilievo);
  background:radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--accento) 9%,transparent),transparent 60%),var(--trama),var(--pannello)}
.rd-b-sopra{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tenue)}
.rd-b-titolo{margin:6px 0 6px;font-size:25px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.rd-b-titolo em{font-style:normal;color:var(--rd-ottima)}
.rd-b-sotto{margin:0;max-width:62ch;font-size:14px;line-height:1.5;color:var(--tenue)}
.rd-b-sotto b{color:var(--testo)}
.rd-b-numeri{display:grid;grid-template-columns:repeat(2,minmax(96px,auto));gap:10px 22px;align-content:center}
.rd-b-numeri div{display:flex;flex-direction:column;line-height:1.1}
.rd-b-numeri .conto-num{font-size:28px}
.rd-b-numeri small{font-size:12px;color:var(--tenue)}
.rd-b-quota-blocco{grid-column:1 / -1}
.rd-b-quota-et{display:flex;gap:2px;margin:0 0 6px;padding:0;list-style:none}
.rd-b-quota-et li{display:flex;align-items:center;gap:6px;flex-basis:0;min-width:0;font-size:12px;color:var(--tenue);white-space:nowrap}
.rd-b-quota-et li b{font-size:14px;color:var(--testo);font-variant-numeric:tabular-nums}
.rd-b-quota{display:flex;gap:2px;height:14px}
.rd-b-quota i{flex-basis:0;min-width:3px;background:var(--rd-c)}
.rd-b-quota i:first-child{border-radius:5px 0 0 5px}
.rd-b-quota i:last-child{border-radius:0 5px 5px 0}

.rd-b-blocco{margin-top:20px;padding:16px 18px 18px;border:1px solid var(--bordo);border-radius:14px;background:var(--pannello)}
.rd-b-blocco-testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin-bottom:14px}
.rd-b-blocco-testa h3{margin:0;font-size:17px;font-weight:800}
.rd-b-blocco-testa p{margin:3px 0 0;font-size:12.5px;color:var(--tenue)}

/* quando va peggio: giorni x ore, rosso tanto piu' pieno quante piu' misure deboli o pessime (una tinta sola) */
.rd-b-mappa-corpo{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start}
.rd-b-mappa{display:grid;grid-template-columns:58px repeat(15,minmax(0,1fr));gap:3px;align-items:center}
.rd-b-ora{font-size:10.5px;color:var(--debole);text-align:center;font-variant-numeric:tabular-nums}
.rd-b-giorno{font-size:12px;color:var(--tenue);white-space:nowrap}
.rd-b-giorno b{color:var(--testo);font-weight:700}
.rd-b-c{position:relative;display:grid;place-items:center;height:30px;border-radius:5px;background:var(--rd-vuoto)}
.rd-b-c.vuota{background:none;box-shadow:inset 0 0 0 1px var(--rd-vuoto)}
.rd-b-c.dopo{background:none}
.rd-b-c.q0,.rd-b-scala .q0{background:var(--rd-pista)}
.rd-b-c.q1,.rd-b-scala .q1{background:color-mix(in srgb,var(--rd-pessima) 20%,transparent)}
.rd-b-c.q2,.rd-b-scala .q2{background:color-mix(in srgb,var(--rd-pessima) 42%,transparent)}
.rd-b-c.q3,.rd-b-scala .q3{background:color-mix(in srgb,var(--rd-pessima) 68%,transparent)}
.rd-b-c.q4,.rd-b-scala .q4{background:var(--rd-pessima)}
.rd-b-segno{display:grid;place-items:center;flex:none;width:21px;height:21px;border-radius:50%;background:var(--testo);color:var(--pannello);font-size:11.5px;font-weight:800;font-style:normal;box-shadow:0 0 0 2px var(--pannello)}
.rd-b-scala{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--tenue)}
.rd-b-scala i{width:18px;height:12px;border-radius:3px}
.rd-b-scala span:first-child{margin-right:4px}
.rd-b-scala span:last-child{margin-left:4px}
.rd-b-peggiori{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.rd-b-peggiori li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--bordo);border-radius:10px;background:var(--pannello2)}
.rd-b-peggiori div > b{display:block;font-size:13px}
.rd-b-peggiori small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--tenue)}
.rd-b-peggiori em{font-style:normal;font-weight:800;color:var(--rd-pessima)}

/* i dispositivi, dal piu' in difficolta': ogni riga e' una "trama" di 7 giorni x 15 ore */
.rd-b-cerca{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 6px}
.rd-b-cerca .conto-elenco{margin-left:auto}
.rd-b-casella{position:relative;display:flex;align-items:center;flex:0 1 300px;min-width:0}
.rd-b-casella svg{position:absolute;left:12px;color:var(--tenue);pointer-events:none}
.rd-b-casella input{width:100%;height:40px;padding:0 12px 0 40px;border:1px solid var(--bordo-forte);border-radius:10px;background:var(--campo-attivo,var(--pannello));color:var(--testo);font:inherit;font-size:14px}
.rd-b-trame{--rd-b-col:22px 38px minmax(150px,196px) minmax(0,1fr) 86px 118px 32px;margin:0;padding:0;list-style:none}
.rd-b-asse,.rd-b-riga{display:grid;grid-template-columns:var(--rd-b-col);align-items:center;gap:12px}
.rd-b-asse{padding:10px 6px 6px;font-size:11px;color:var(--debole)}
.rd-b-asse > span:first-child{grid-column:1 / 4}
.rd-b-asse-giorni{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:1.04%;text-align:center;white-space:nowrap}
.rd-b-asse-giorni b{color:var(--tenue)}
.rd-b-asse-ore{grid-column:5 / -1}
.rd-b-riga{padding:9px 6px;border-top:1px solid var(--bordo)}
.rd-b-riga.rd-g-pessima{background:linear-gradient(90deg,color-mix(in srgb,var(--rd-c) 9%,transparent),transparent 70%)}
.rd-b-riga.rd-g-niente{opacity:.72}
.rd-b-pos{font-size:12px;font-weight:700;color:var(--debole);text-align:right;font-variant-numeric:tabular-nums}
.rd-b-chi{min-width:0}
.rd-b-chi b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-b-chi small{display:block;font-size:11.5px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-b-trama-box{min-width:0}
.rd-b-trama{display:block;width:100%;height:20px}
.rd-b-ore{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:3px 5px;min-width:0}
.rd-b-ore b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.rd-b-ore small{font-size:11px;color:var(--tenue);white-space:nowrap}
.rd-b-ore i{grid-column:1 / -1;display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--rd-c) calc(var(--q) * 100%),var(--rd-pista) 0)}
.rd-b-riga .rd-giudizio{justify-self:start}
.rd-b-leg{gap:6px 14px;font-size:12px;color:var(--tenue)}
.rd-b-leg li{display:flex;align-items:center;gap:6px}
.rd-quadratino{display:inline-block;width:10px;height:16px;border-radius:2px;background:var(--rd-c)}
.rd-quadratino.vuoto{background:var(--rd-vuoto);box-shadow:inset 0 0 0 1px var(--bordo)}

@container rd (max-width:900px){
  .rd-b-mappa-corpo{grid-template-columns:minmax(0,1fr)}
  .rd-b-peggiori{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .rd-b-trame{--rd-b-col:34px minmax(120px,160px) minmax(0,1fr) 98px 38px}
  .rd-b-quota-et li span{display:none}
  .rd-b-pos{display:none}
  .rd-b-asse > span:first-child{grid-column:1 / 3}
  .rd-b-asse-ore{display:none}
  .rd-b-riga .rd-giudizio{display:none}
}
@container rd (max-width:600px){
  .rd-b-testa{grid-template-columns:minmax(0,1fr);padding:16px}
  .rd-b-titolo{font-size:21px}
  .rd-b-numeri{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .rd-b-numeri .conto-num{font-size:22px}
  .rd-b-numeri small{font-size:11px}
  .rd-b-quota-et li span{display:none}
  .rd-b-blocco{padding:14px 12px}
  .rd-b-mappa{grid-template-columns:30px repeat(15,minmax(0,1fr));gap:2px}
  .rd-b-giorno{font-size:10.5px}
  .rd-b-giorno b{display:block;font-weight:600}
  .rd-b-giorno{line-height:1.05;text-align:right;padding-right:2px}
  .rd-b-c{height:24px;border-radius:3px}
  .rd-b-ora{font-size:9px}
  .rd-b-mappa .rd-b-segno{width:17px;height:17px;font-size:10px}
  .rd-b-cerca .rd-b-casella{flex:1 1 100%}
  .rd-b-cerca .conto-elenco{margin-left:0}
  .rd-b-trame{--rd-b-col:38px auto minmax(0,1fr) 38px}
  .rd-b-asse{grid-template-columns:minmax(0,1fr);padding:8px 0 4px}
  .rd-b-asse > span:first-child{display:none}
  .rd-b-riga{grid-template-areas:"d c c a" "t t t t" "g g o o";row-gap:8px;padding:12px 0}
  .rd-b-riga .rd-disp{grid-area:d}
  .rd-b-chi{grid-area:c}
  .rd-b-riga .rd-giudizio{display:inline-flex;grid-area:g}
  .rd-b-riga .icona-riga{grid-area:a}
  .rd-b-trama-box{grid-area:t}
  .rd-b-ore{grid-area:o;grid-template-columns:auto auto 1fr;align-items:center}
  .rd-b-ore i{grid-column:auto}
}

/* "La tua rete adesso" - B: le onde del segnale, i tre righelli e la tua settimana */
.rd-b-testa-rete{display:grid;grid-template-columns:136px minmax(0,1fr);align-items:center;gap:14px;padding:6px 0 2px}
.rd-b-onde{display:block;width:100%;height:auto}
.rd-b-onde .onda{fill:none;stroke:var(--rd-pista);stroke-width:12;stroke-linecap:round}
.rd-b-onde .onda.su{stroke:var(--rd-c)}
.rd-b-onde .punto{fill:var(--rd-pista)}
.rd-b-onde .punto.su{fill:var(--rd-c)}
.rd-b-esito{display:flex;flex-direction:column;gap:3px;min-width:0}
.rd-b-esito small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.rd-b-esito .parola{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--rd-c)}
.rd-b-testa-rete.rd-g-niente .parola{color:var(--testo)}
.rd-b-esito span{font-size:13.5px;line-height:1.45;color:var(--tenue)}
.rd-b-righelli{display:grid;gap:12px;margin:0;padding:12px 14px;list-style:none;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello2)}
.rd-b-righelli li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:baseline}
.rd-b-r-nome{font-size:12.5px;font-weight:600}
.rd-b-righelli b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.rd-b-righelli b small{font-size:11px;font-weight:500;color:var(--tenue)}
.rd-b-righelli li.ora b{font-size:13px;font-weight:600;color:var(--accento2)}
.rd-b-righelli li.poi{color:var(--debole)}
.rd-b-righelli li.poi b{font-size:13px;font-weight:500}
.rd-b-r-scala{grid-column:1 / -1;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;height:8px;overflow:hidden;border-radius:4px}
.rd-b-r-scala i:nth-child(1){background:var(--rd-pessima)}
.rd-b-r-scala i:nth-child(2){background:var(--rd-debole)}
.rd-b-r-scala i:nth-child(3){background:var(--rd-buona)}
.rd-b-r-scala i:nth-child(4){background:var(--rd-ottima)}
.rd-b-r-scala i{opacity:.28}
.rd-b-righelli li.ora .rd-b-r-scala i,.rd-b-righelli li.poi .rd-b-r-scala i{background:var(--rd-pista);opacity:1}
.rd-b-r-segno{position:absolute;top:0;bottom:0;left:0;width:calc(var(--f) * 100%);border-radius:4px;background:var(--rd-c);box-shadow:2px 0 0 var(--pannello2)}
.rd-b-r-onda{position:absolute;top:0;bottom:0;left:0;width:34%;border-radius:4px;background:linear-gradient(90deg,transparent,var(--accento2),transparent)}
.rd-b-tua{padding:12px 14px;border:1px solid var(--bordo);border-radius:12px}
.rd-b-tua header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin-bottom:8px}
.rd-b-tua header b{font-size:13px}
.rd-b-tua header small{font-size:12px;color:var(--tenue)}
.rd-b-tua header em{font-style:normal;font-weight:700;color:var(--testo)}
.rd-b-mini{display:grid;grid-template-columns:28px repeat(15,minmax(0,1fr));gap:2px;align-items:center}
.rd-b-mini .rd-b-ora{font-size:9px}
.rd-b-mini .rd-b-giorno{font-size:10.5px}
.rd-b-mini i{height:11px;border-radius:2px;background:var(--rd-c)}
.rd-b-mini i.vuota{background:var(--rd-vuoto)}
.rd-b-mini i.dopo{background:none}
/* mentre si misura: le onde si accendono a turno e l'onda blu scorre sul righello (solo opacity/transform) */
.rd-misura .rd-b-onde-vive .onda{stroke:var(--accento2);animation:rd-b-onda 1.4s ease-in-out infinite}
.rd-misura .rd-b-onde-vive .o2{animation-delay:.18s}
.rd-misura .rd-b-onde-vive .o3{animation-delay:.36s}
.rd-misura .rd-b-onde-vive .o4{animation-delay:.54s}
.rd-misura .rd-b-onde-vive .onda{opacity:.25}
.rd-misura .rd-b-onde-vive .o1{opacity:.9}
.rd-misura .rd-b-onde-vive .o2{opacity:.6}
@keyframes rd-b-onda{0%,100%{opacity:.18}40%{opacity:1}}
.rd-misura .rd-b-r-onda{animation:rd-b-scorre 1.2s ease-in-out infinite}
@keyframes rd-b-scorre{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.rd-b-r-onda{transform:translateX(60%)}

/* ===================== MONTAGGIO NEL PORTALE (12/10/2026) ===================== */
/* la schedina e' un <dialog> (showModal: Esc, fuoco dentro): via i margini e i lati del browser, lo sfondo e' il ::backdrop */
dialog.rd-rete{margin:0;padding:0;max-width:none;right:auto;bottom:auto;height:auto}
/* chiusa (X, Esc, tocco fuori): .rd-rete{display:flex} non deve vincere sul display:none del dialog chiuso */
dialog.rd-rete:not([open]){display:none}
dialog.rd-rete::backdrop{background:rgba(6,7,9,.56)}
dialog.rd-rete:focus{outline:none}
@media (max-width:640px){dialog.rd-rete{left:0;right:0;top:auto;bottom:0}}
.rd-rete .avviso{margin:0}
.rd-rete-piede .bottone svg{flex:none}
.rd-a-grande-vuoto .rd-a-ago{opacity:.35}
/* la voce del menu del nome */
.rd-voce > svg{flex:none}
/* Setup: in attesa dei dati, periodo, righe nascoste dai filtri, il dettaglio aperto con l'occhio */
.rd-carica{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:13px;color:var(--tenue)}
.rd-carica .attesa-rotella{flex:none;width:16px;height:16px}
.rd-errore{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
#rdStato:empty{display:none}
#rdStato .setup-stato{margin-bottom:14px}
.rd-b-sopra-riga{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.rd-b-riga[hidden],.rd-b-det[hidden]{display:none}
.rd-b-riga .icona-riga[aria-expanded="true"]{box-shadow:0 0 0 2px var(--accento2)}
.rd-b-vuoto{margin:0;padding:16px 6px;border-top:1px solid var(--bordo);font-size:13px;color:var(--tenue)}
.rd-b-det{margin:0 0 10px;padding:14px 16px 16px;border:2px solid var(--rd-c);border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rd-c) 6%,var(--pannello2)),var(--pannello2))}
.rd-b-det-corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 22px;align-items:start}
.rd-b-det-info{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--tenue)}
.rd-b-det-tit{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.rd-b-det .rd-b-peggiori li{background:var(--pannello)}
.rd-b-det .rd-b-peggiori .rd-tacche{margin-top:2px}
@container rd (max-width:600px){.rd-b-det-corpo{grid-template-columns:minmax(0,1fr)}.rd-b-det{padding:12px}}

/* LE LETTURE VELOCI (12/10/2026, Setup > Intelligenza artificiale > Lettura dei biglietti): le due scelte "Ragionamento" e
   "Priorita'" a schede (.pos-metodi dei Loghi automatici), sotto il modello dei biglietti */
.ia-velocita{margin:16px 0 4px}
.ia-velocita h4{margin:16px 0 8px;font-size:14px;font-weight:700;color:var(--testo)}
.ia-velocita h4:first-child{margin-top:4px}
.ia-velocita .setup-aiuto{display:block;margin-top:10px}

/* REGISTRO ATTIVITA' ANCHE DEL PERSONALE INTERNO (12/10/2026, lavoro registro-interni).
   Setup > Registro attivita': l'avviso sulla privacy con lo scudo, l'aiuto dei creatori e le loro schede attenuate quando
   il registro del personale e' spento. Registro attivita': le pillole Chi sopra la tendina della persona, la nota sotto,
   l'etichetta INTERNO (blu) accanto al nome; il globo con il personale interno in blu (legenda, etichetta, scheda). */
#setupRegistro .ri-privacy{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;line-height:1.5}
#setupRegistro .ri-privacy svg{flex:none;margin-top:1px;color:var(--accento2)}
#setupRegistro .ri-privacy p{margin:0}
#setupRegistro .ri-creatori .setup-aiuto{display:block;margin:-4px 0 10px}
#setupRegistro .ri-creatori .pos-metodi{transition:opacity .15s}
#setupRegistro:has(input[name="registroInterni"][value="0"]:checked) .ri-creatori .pos-metodi{opacity:.55}
#setupRegistro .azioni-form a.bottone{text-decoration:none}
.log-filtri .lf-chi .cf-pillole{margin-bottom:10px}
.log-filtri .lf-chi .lf-nota{display:block;margin-top:8px;font-size:12px;line-height:1.45;color:var(--tenue)}
.log-filtri .lf-chi .lf-nota a{color:var(--accento-testo);font-weight:600}
.lgb .badge.interno{border-color:color-mix(in srgb,var(--ic-blu) 50%,transparent);background:color-mix(in srgb,var(--ic-blu) 10%,var(--pannello));color:var(--ic-blu);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px}
.mappa-voci .blu i{background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,.8)}
.mappa-etichetta small.blu{color:var(--ic-blu)}
.mappa-sezione.blu h4{color:var(--ic-blu)}
.mappa-sezione.blu li::before{background:#3b82f6}

/* REGISTRO ATTIVITA': PER QUANTO TEMPO SI CONSERVA (12/10/2026, sera, lavoro registro-conservazione).
   Setup > Registro attivita': il campo dei giorni e, accanto, quante righe ci sono, la piu' vecchia, l'anteprima di quante
   se ne andrebbero (rossa quando toglie righe o il numero e' fuori dai limiti) e l'ultima pulizia; sotto i 720px uno
   sotto l'altro. La conferma senza script (.ri-conferma) e' un avviso rosso con il pulsante. */
#setupRegistro .ri-conserva-riga{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:12px 22px;align-items:start}
#setupRegistro .ri-giorni input{max-width:170px;font-variant-numeric:tabular-nums}
#setupRegistro .ri-conserva-info{padding:12px 14px;border:1px solid var(--bordo-forte);border-radius:12px;background:var(--pannello2);font-size:13px;line-height:1.5}
#setupRegistro .ri-conserva-info p{margin:0}
#setupRegistro .ri-conserva-info p + p{margin-top:6px}
#setupRegistro .ri-anteprima{font-weight:600}
#setupRegistro .ri-anteprima.togli,#setupRegistro .ri-anteprima.fuori{color:var(--pericolo)}
#setupRegistro .ri-ultima{color:var(--tenue);font-size:12px}
#setupRegistro .ri-conferma{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 0}
#setupRegistro .ri-conferma p{margin:0;flex:1 1 260px}
@media (max-width:719px){
  #setupRegistro .ri-conserva-riga{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================================================================
   RICERCA DELLA SCHEDA DENTRO LA STORIA (13/10/2026, js/storia.js + js/cliente-cruscotto.js)
   L'utente: "il campo ricerca dentro scheda cliente non trova dentro STORIA". Durante la ricerca la Storia guarda tutti i
   momenti: il periodo resta su Tutto (acceso) e gli altri pulsanti del periodo sono spenti finche' la ricerca non si
   toglie; il pulsante in fondo, mentre arriva il resto della storia ("Cerco in tutta la storia..."), e' fermo.
   ===================================================================================================================== */
.sa-st-periodo button:disabled{cursor:default}
.sa-st-periodo button:disabled:not([aria-pressed="true"]){opacity:.45}
.sa-st-periodo button:disabled:not([aria-pressed="true"]):hover{color:var(--tenue)}
.sa-st-carica:disabled{cursor:progress}

/* ricerca generale (13/10/2026): ordini aperti, vendite e copie commissione, i gruppi nuovi della Storia del cliente.
   I colori sono quelli delle loro righe nella scheda del cliente e nella Storia: Ordini aperti (.cc-t-ordini, --sa-st-ord),
   Vendite ciano (.cc-t-vendite, --sa-st-ven), Copie commissione seppia, il colore della carta (.cc-t-copie del gruppo
   COMMERCIALE). Da APPENDERE in fondo a css/fpc.css, dopo .k-campione e .k-cartella. */
.k-ordine{--k:#c96a0b}
html[data-tema="scuro"] .k-ordine{--k:#f0a04b}
.k-vendita{--k:#0b8f9c}
html[data-tema="scuro"] .k-vendita{--k:#45d0d8}
.k-copia{--k:#9a6b43}
html[data-tema="scuro"] .k-copia{--k:#dcae86}

/* il "+" SPENTO delle righe che non si scrivono (13/10/2026, righe su Android): la riga che porta il seguito della
   descrizione dell'articolo sopra (la freccia) o gia' scritta a mano (la matita). Grigio su un quadrato tratteggiato,
   senza il verde del "+" libero, quadrato come tutte le icone: si vede spento anche mentre la striscia vela gli altri
   "+". Si puo' toccare: il foglio dice perche' li' non si scrive (js/commissione-foglio.js, posizionaSovra) */
.icona-riga.cm-f-piu.spento,
html[data-tema="scuro"] .icona-riga.cm-f-piu.spento{--ic:#8a8f94;opacity:1;filter:none;pointer-events:auto;background:transparent;
  border:1.5px dashed #b4b8bc;color:#8a8f94;box-shadow:none}
.icona-riga.cm-f-piu.spento:hover,.icona-riga.cm-f-piu.spento:active{background:rgba(138,143,148,.1);border-color:#8a8f94}
.icona-riga.cm-f-piu.spento svg{width:62%;height:62%;stroke-width:2.3}
.cm-f-in-striscia .icona-riga.cm-f-piu.spento{opacity:.45}

/* =====================================================================================================================
   LA RICERCA DELLA SCHEDA CERCA DAPPERTUTTO (13/10/2026, l'utente: "il campo ricerca dentro la scheda cliente ... deve
   cercare dappertutto"). Scheda dell'agente, riquadro Opportunita': le sue opportunita' fuori dal periodo scelto
   (CruscottoAgenteHtml.HtmlFuoriPeriodo) restano nascoste finche' non si cerca; cercando compaiono, sotto il loro titolo,
   solo se dentro c'e' qualcosa di trovato (js/cliente-cruscotto.js mette sc-fuori sul contenitore vuoto).
   ===================================================================================================================== */
.as-fuori-periodo{display:none}
.az-scheda.sc-attiva .as-fuori-periodo:not(.sc-fuori){display:block}

/* ricerca generale "dappertutto" (13/10/2026, pomeriggio): i gruppi nuovi Categorie ed eventi, Avvisi e Guide, e la
   sezione di una guida aperta dalla ricerca nel pannello del "?". Da APPENDERE in fondo a css/fpc.css, dopo le righe
   .k-ordine / .k-vendita / .k-copia del mattino. Tinte nuove, diverse da quelle degli altri gruppi (fucsia, oliva, ardesia):
   l'accento resta il rosso #da0219, niente arancione. Le iconcine restano quadrate (.rg-ic). */
.k-evento{--k:#a21caf}
html[data-tema="scuro"] .k-evento{--k:#e879f9}
.k-avviso{--k:#4d7c0f}
html[data-tema="scuro"] .k-avviso{--k:#a3e635}
.k-guida{--k:#33658a}
html[data-tema="scuro"] .k-guida{--k:#8fb8de}
/* la tinta della singola categoria (.rg-tinta + .c-ambra...) vince sul fucsia del gruppo anche nell'anteprima della
   finestra veloce, che porta k-evento e rg-tinta sullo STESSO elemento: .rg-tinta sta piu' in alto nel foglio, qui il peso
   e' maggiore (come per le note, vedi il commento di .rg-tinta) */
.k-evento.rg-tinta,html[data-tema="scuro"] .k-evento.rg-tinta{--k:var(--tc,var(--accento))}

/* la sezione della guida aperta dalla ricerca (js/ricerca.js): il titolo si accende per un momento con una fascia rossa
   a sinistra, le parole cercate sono evidenziate come nei risultati */
.help-corpo .rg-guida-qui{scroll-margin-top:12px;border-radius:6px;box-shadow:inset 3px 0 0 #da0219;padding-left:10px;
  background:rgba(218,2,25,.10);transition:background-color .9s ease,box-shadow .9s ease,padding .2s ease}
.help-corpo mark.rg-guida-segno{background:rgba(218,2,25,.16);color:inherit;border-radius:3px;padding:0 1px}
html[data-tema="scuro"] .help-corpo .rg-guida-qui{background:rgba(255,92,107,.16);box-shadow:inset 3px 0 0 #ff5c6b}
html[data-tema="scuro"] .help-corpo mark.rg-guida-segno{background:rgba(255,92,107,.26)}
@media (prefers-reduced-motion:reduce){.help-corpo .rg-guida-qui{transition:none}}

/* =====================================================================
   LA NOTA DELLA RIGA NELLA COPIA COMMISSIONE (13/10/2026, richiesta di Andrea)
   Nella striscia del "+" della riga, sotto colore, prezzo e sconto, un campo NOTA (testo libero) su una fila sua, larga
   quanto la striscia, su ogni schermo (anche sul computer: ritocco di Andrea dello stesso giorno). Sul foglio la nota si
   scrive in nero, grande come le altre scritte, sotto l'articolo, dal bordo sinistro del CODICE al bordo destro del
   PREZZO, e va a capo sulle righe sotto. Il "+" delle righe occupate dalla nota e' spento come quello del seguito (righe di
   testo grigie, js/commissione-foglio.js). Nel tavolo della validazione la nota della riga sta sotto i tipi.
   Classi cm-f-str-nota, cm-f-volante-nota, cm-v-art-nota.
   ===================================================================== */
.cm-f-str .cm-f-str-linea.cm-f-str-extra{flex-wrap:wrap;row-gap:8px}
.cm-f-str-nota{flex:1 1 100%;min-width:0}
.cm-f-str-nota input{font:600 17px/1.2 var(--carattere);letter-spacing:.01em}
.cm-f-str-nota input::placeholder{font-weight:500;letter-spacing:0;color:var(--tenue);opacity:.85}
.cm-f-str.stretta .cm-f-str-nota{height:42px}
.cm-f-str.stretta .cm-f-str-nota input{font-size:16px}
/* la nota che vola sul foglio dopo OK: in nero, con le lettere come sono scritte */
.cm-f-volante.cm-f-volante-nota{color:#16181d;text-transform:none;max-width:70vw;overflow:hidden;text-overflow:ellipsis}
/* il tavolo della validazione: la nota della riga sotto i tipi di campione */
.cm-v-art-nota{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:12.5px;line-height:1.35;color:var(--testo);overflow-wrap:anywhere}
.cm-v-art-nota svg{flex:none;margin-top:1px;color:var(--tenue)}
.cm-v-art-nota b{font-weight:700}

/* ---------- COPIA COMMISSIONI: l'elenco delle aziende trovate sempre in vista (13/10/2026) ----------
   iPhone di Cristiano, finestra "Dati del cliente", "Eko": con la tastiera aperta il corpo della finestra (una griglia gia'
   piu' lunga dello spazio) schiacciava a 0 px l'unico figlio con overflow:auto, l'elenco: le aziende c'erano ma non si
   vedevano. Ora le righe del corpo sono alte quanto il loro contenuto e scorre il corpo: nessun figlio si schiaccia. Vale
   per tutte le finestre cm-dialogo, anche quella della copia scritta senza rete (.ofw-clienti). js/commissioni.js da' in
   piu' all'elenco un'altezza vera e lo tiene sopra la tastiera; qui sotto l'attesa e l'errore con "Riprova". */
.cm-dialogo > .dialogo-posta-corpo{grid-auto-rows:max-content}
.cm-cerca-azienda-esiti{overscroll-behavior:contain}
.cm-clienti-vuoto.cm-cerca-attesa,.cm-clienti-vuoto.cm-cerca-errore{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.cm-cerca-gira{flex:none;width:16px;height:16px;border:2px solid var(--bordo-forte);border-top-color:var(--accento);border-radius:50%;animation:gira .7s linear infinite}
.cm-clienti-vuoto.cm-cerca-errore{color:var(--pericolo)}
.cm-cerca-errore .cm-link{font-size:13.5px}
@media (prefers-reduced-motion:reduce){.cm-cerca-gira{animation-duration:2.4s}}

/* 15/10/2026 - IL PREZZO AL METRO NELLA COPIA COMMISSIONE (Andrea: il prezzo anche sulla Tirella, scritto con "/m").
   Striscia: l'etichetta "PREZZO €/m" con "€/m" in minuscolo (il resto dell'etichetta e' in maiuscolo); con un tipo che non
   e' a metri (la Tirella, Nr) "€/m" si accende in una pillola blu, come la linguetta "PER QUESTO COLORE" del listino.
   Tavolo della validazione: "/m" accanto al prezzo di ogni riga (Andrea: "nel prezzo stampato mettilo SEMPRE '/m'"), in
   blu su una riga Tirella; nella riga di inserimento l'etichetta del prezzo si accende allo stesso modo. */
.cm-f-str-prezzo-um{text-transform:none;letter-spacing:.02em}
.cm-f-str-prezzo.al-metro .cm-f-str-prezzo-um{display:inline-block;margin-left:1px;padding:0 5px;border-radius:5px;background:var(--ic-blu);color:#fff}
html[data-tema="scuro"] .cm-f-str-prezzo.al-metro .cm-f-str-prezzo-um{color:#04141c}
.cm-v-prezzo .cm-v-al-metro{font-weight:800}
.cm-v-prezzo.al-metro .cm-v-al-metro{color:var(--ic-blu)}
.cm-v-ins-campo.prezzo.al-metro > small{color:var(--ic-blu)}
/* striscia stretta (telefono): la linguetta "PER QUESTO COLORE" del chip copriva la scritta "LISTINO 3JE226" sopra i chip
   (succedeva gia' col Metraggio; ora il listino c'e' anche sulla Tirella): un po' di spazio sopra i chip */
.cm-f-str.stretta .cm-f-lis-voci{padding-top:9px}

/* ---------- OPPORTUNITA': OGNI NOME ATTACCATO AL SUO CAMPO, LA NOTA NELLA RIGA, IL PANNELLO IN ORDINE (15/10/2026) ----------
   Lavoro opportunita-riga-articolo. Andrea: "non e' chiaro quale sia il campo metraggio e quale tirella, se li vedi sono
   distanti le label; in questa fase di inserimento articolo va visualizzato il campo NOTE; se scrivo una riga lunga deve
   andare a capo e allargare il campo"; poi: "le label sono distanti dal campo interessato" (PREZZO e SCHEDA) e, del
   pannello, "il prezzo sotto i prezzi di listino, il campo note sotto il metraggio o la tirella".
   - L'intestazione delle colonne in cima all'elenco non c'e' piu' (OpportunitaPlancia.HtmlTesta e' vuota): ogni campo ha il
     suo nome piccolo, maiuscolo, ATTACCATO sopra (.pb-eti e .tn nelle capsule): "Metraggio Mt", "Tirella Nr", "Prezzo /Mt
     - listino" con l'importo accanto, "Duplica / Scheda / Togli" sopra i pulsanti; in lettura "Prezzo", "Importo",
     "Scheda", "Apri". Sul telefono il nome del tipo sta a sinistra dei suoi campi, sulla stessa linea.
   - La nota per la commessa e' una riga in piu' della griglia, sotto i riquadri, a tutta larghezza (dal nome dell'articolo
     alla fine; sul telefono tutta la scheda): una casella che va a capo e si allunga (l'altezza la scrive lo script).
   - Subtotali e totali col nome del tipo accanto al numero (con l'intestazione via, "Mt" da solo non bastava: Pocket e
     Metraggio sono tutti e due in metri).
   - Pannello: 1 campioni, 2 nota (l'editor si allunga, niente barra dentro), 3 listino e sotto il prezzo comunicato.
   Va in fondo a fpc.css, dopo tutti i frammenti della plancia. Solo variabili: chiaro e scuro. */

/* 0. niente intestazione delle colonne (se una pagina vecchia la scrivesse ancora) */
.pb-v-deal .pb-lista > .pb-th{display:none}

/* 1. IL NOME ATTACCATO A UN CAMPO */
.pb-eti{display:flex;align-items:baseline;gap:6px;min-width:0;margin:0 0 3px;padding:0 2px;font-size:10px;font-weight:750;line-height:13px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tenue);white-space:nowrap}
.pb-eti label,label.pb-eti{cursor:pointer}
.pb-eti label{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.pb-eti b{font-weight:750;color:inherit}
.pb-eti i{font-style:normal;font-weight:650;letter-spacing:.02em;text-transform:none;color:var(--debole)}
.pb-eti em{font-style:normal;font-weight:750;letter-spacing:.02em;text-transform:none;color:var(--ic-verde)}
.pb-eti em::before{content:"\00B7\00A0";color:var(--debole)}
.pb-eti small{font-size:inherit}

/* 2. CAPSULE DEI TIPI: il nome del tipo con l'unita' sopra quantita' e colore (in modifica e in lettura) */
.pb-v-deal .pb-lista .pb-r .pb-cap{flex-wrap:wrap;align-content:center;row-gap:3px}
.pb-v-deal .pb-lista .pb-r .pb-cap.ok::before{display:none}
.pb-v-deal .pb-lista .pb-r .pb-cap .tn,
.pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in .tn{display:flex !important;align-items:baseline;gap:5px;flex:0 0 100%;width:100%;min-width:0;margin:0;padding:0 2px;
  font-size:10px;font-weight:750;line-height:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--tenue);white-space:normal;overflow:visible;text-overflow:clip;cursor:pointer}
.pb-v-deal .pb-lista .pb-r .pb-cap .tn b{font-weight:750;color:inherit;overflow-wrap:anywhere}
.pb-v-deal .pb-lista .pb-r .pb-cap .tn i{font-style:normal;font-weight:650;letter-spacing:.02em;text-transform:none;color:var(--debole)}
/* il nome prende il colore della capsula: verde compilato, rosso tutti vuoti, grigio vuoto */
.pb-v-deal .pb-lista .pb-r .pb-cap.ok .tn,.pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in.ok .tn{color:var(--pb-ok)}
.pb-v-deal .pb-lista .pb-r .pb-cap.ko .tn,.pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in.ko .tn,
.pb-v-deal .pb-lista .pb-r .pb-cap.ko .tn i,.pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in.ko .tn i{color:var(--pb-ko)}
.pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in{padding:4px 5px 5px;row-gap:3px;column-gap:4px}
.pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in > label:not(.tn){flex:none}
/* il nome e' un label: niente bordo, fondo e altezza dei campi (quelli valgono per il label della quantita') */
.pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in > label.tn{width:100%;height:auto;min-height:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
/* in lettura: la quantita' grande sotto il nome, il colore a destra */
.pb-v-deal:not(.modifica) .pb-lista .pb-r .pb-cap{padding:5px 10px 6px;column-gap:6px}

/* 3. PREZZO NELLA RIGA IN MODIFICA: "Prezzo /Mt - listino" sopra il campo, l'importo accanto al nome */
.pb-v-deal.modifica .pb-lista .pb-r .c-prezzo{flex-direction:column;align-items:stretch;justify-content:center;gap:0}
.pb-v-deal.modifica .pb-lista .pb-r .pb-eti-prezzo{justify-content:space-between}
.pb-v-deal.modifica .pb-lista .pb-r .pb-eti .pb-prezzo-imp{position:static;flex:none;margin:0 0 0 auto;font-size:11px;font-weight:750;line-height:13px;
  letter-spacing:0;text-transform:none;color:var(--testo);font-variant-numeric:tabular-nums}
.pb-v-deal.modifica .pb-lista .pb-r .pb-prezzo-in{flex:none;width:100%}

/* 4. I PULSANTI COL LORO NOME SOPRA: Duplica, Scheda, Togli (in lettura Scheda, Apri) */
.pb-v-deal .pb-lista .pb-r .c-az{display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end;gap:6px}
.pb-azione{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:38px}
.pb-azione > .pb-eti{justify-content:center;margin:0;padding:0;font-size:9.5px;letter-spacing:.04em;min-height:13px}
.pb-azione > .pb-eti b{font-weight:750}
/* le colonne dei pulsanti larghe quanto i pulsanti con il nome */
.pb-v-deal.modifica{--pb-az3:152px}
.pb-v-deal:not(.modifica){--pb-az2:96px}
.pb-v-deal.modifica .pb-griglia{grid-template-columns:30px 46px minmax(176px,1fr) minmax(calc(var(--pb-tipi) * 130px + (var(--pb-tipi) - 1) * 12px),calc(var(--pb-tipi) * 196px + (var(--pb-tipi) - 1) * 12px)) 176px var(--pb-az3)}
.pb-v-deal:not(.modifica) .pb-griglia{grid-template-columns:30px 46px minmax(190px,1fr) calc(var(--pb-tipi) * 168px + (var(--pb-tipi) - 1) * 12px) 96px 96px var(--pb-az2)}
/* (sotto i 1060 px di elenco le colonne le decidono le regole con !important delle due linee e delle schede) */

/* 5. PREZZO E IMPORTO IN LETTURA: il nome sopra il valore, allineati a destra */
.pb-v-deal:not(.modifica) .pb-lista .pb-r .c-prezzo .pb-eti,.pb-v-deal:not(.modifica) .pb-lista .pb-r .c-imp .pb-eti{justify-content:flex-end}
.pb-v-deal:not(.modifica) .pb-lista .pb-r .pb-val{display:block;text-align:right}
.pb-v-deal .pb-r .c-pz > span{display:inline-flex;align-items:baseline;gap:5px}
.pb-v-deal .pb-r .c-pz small{font-size:9.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--debole)}

/* 6. LA NOTA PER LA COMMESSA NELLA RIGA: sotto i riquadri, a tutta larghezza, che va a capo e si allunga */
.pb-v-deal .pb-lista .pb-r > .c-nota{display:flex;flex-direction:column;min-width:0;grid-column:3 / -1;grid-row:2;align-self:stretch}
.pb-v-deal .pb-lista .pb-r{row-gap:8px}
.pb-eti-nota{justify-content:flex-start}
.pb-eti-nota .art-nota-conta{margin-left:auto;font-weight:650;letter-spacing:0;text-transform:none;color:var(--tenue);font-variant-numeric:tabular-nums}
.pb-eti-nota .art-nota-conta.vicino{color:var(--pb-ko)}
textarea.art-nota-riga{display:block;width:100%;min-width:0;min-height:var(--pb-campo,34px);margin:0;padding:6px 10px;
  border:1px solid var(--bordo-forte);border-radius:8px;background:var(--campo-attivo);color:var(--testo);
  font:inherit;font-size:14px;font-weight:500;line-height:20px;resize:none;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap;
  transition:border-color .15s,box-shadow .15s}
textarea.art-nota-riga::placeholder{color:var(--debole);font-weight:500;opacity:1}
textarea.art-nota-riga:focus{border-color:var(--accento);box-shadow:0 0 0 3px var(--campo-alone,rgba(218,2,25,.2));outline:0}
@media (pointer:coarse){textarea.art-nota-riga{padding:8px 11px;font-size:16px;line-height:21px}}
/* in lettura la nota c'e' solo se e' scritta: il testo con i suoi a capo */
.pb-nota-riga-letta{display:block;padding:6px 10px;border:1px solid var(--pb-linea2);border-radius:8px;background:color-mix(in srgb,var(--sfondo) 30%,transparent);
  font-size:13.5px;line-height:1.45;color:var(--testo);white-space:pre-line;overflow-wrap:anywhere}

/* 7. SUBTOTALI E TOTALI col nome del tipo */
.pb-tot-tn{font-size:9.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--debole)}
.pb-v-deal .pb-tot .c-tipi b .pb-tot-tn{display:block;margin-bottom:1px;line-height:12px}
.pb-v-deal .pb-g .c-tipi .pb-tot-tn{margin-right:2px}

/* 8. RIGHE FRA 621 E 1060 PX (iPad verticale, PC col pannello aperto): sopra nome, prezzo e pulsanti, poi i tipi, poi la nota */
@container pbl (min-width:621px) and (max-width:1060px){
  .pb-v-deal.modifica .pb-lista .pb-r.pb-griglia{grid-template-columns:24px 46px minmax(0,1fr) 176px var(--pb-az3) !important;
    grid-template-areas:"n foto art prezzo az" ". . tipi tipi tipi" ". . nota nota nota" !important}
  .pb-v-deal:not(.modifica) .pb-lista .pb-r.pb-griglia:has(> .c-nota){grid-template-areas:"n foto art prezzo az" ". . tipi tipi tipi" ". . nota nota nota" !important}
  .pb-v-deal .pb-lista .pb-r > .c-nota{grid-area:nota !important}
  .pb-v-deal .pb-lista .pb-r .pb-cap .tn,.pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in .tn{display:flex !important}
}

/* 9. TELEFONO (schede): il nome del tipo a sinistra dei suoi campi, la nota in fondo a tutta la scheda */
@container pbl (max-width:620px){
  .pb-v-deal.modifica .pb-lista .pb-r.pb-griglia{grid-template-areas:"foto art art" "prezzo prezzo az" "tipi tipi tipi" "nota nota nota" !important}
  .pb-v-deal:not(.modifica) .pb-lista .pb-r.pb-griglia:has(> .c-nota){grid-template-areas:"foto art art" "tipi tipi tipi" "nota nota nota" "pz pz az" !important}
  .pb-v-deal .pb-lista .pb-r > .c-nota{grid-area:nota !important}
  .pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in{flex-wrap:nowrap !important;align-items:center;padding:4px}
  .pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in .tn{flex:0 0 82px !important;width:82px !important;flex-direction:column;align-items:flex-start;gap:1px;padding:0 0 0 4px;
    font-size:11px;line-height:13px;letter-spacing:.05em}
  .pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in .tn i{font-size:11px}
  .pb-v-deal.modifica .pb-lista .pb-r .pb-cap.in > label:not(.tn){flex:none;width:92px}
  .pb-v-deal .pb-lista .pb-r .c-az{align-self:end}
  .pb-v-deal.modifica .pb-lista .pb-r .c-prezzo{align-self:end}
}

/* 10. PANNELLO: nome del tipo con l'unita', la nota che si allunga, il listino con sotto il prezzo comunicato */
.pb-camp-riga > label.t{display:block;height:auto;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer}
.pb-camp-riga > label.t:focus-within{border:0;box-shadow:none}
.pb-camp-riga .t b i{font-style:normal;font-size:11.5px;font-weight:650;color:var(--tenue);margin-left:5px}
.pb-camp-riga .t b i::before{content:"\00B7\00A0"}
.pb-b-nota .art-note .editor-nota-area{max-height:none;overflow:visible;min-height:70px}
.pb-b-nota .art-note textarea:not([hidden]){min-height:90px}
.pb-b-prezzo .pb-lis-voci{margin:0}
.pb-lis-nota{margin:7px 2px 12px;font-size:11.5px;line-height:1.35;color:var(--tenue)}
.pb-lis-nessuno{margin-top:0;padding:8px 10px;border:1px dashed var(--bordo-forte);border-radius:9px}
.pb-b-prezzo .pb-prezzo{padding-top:12px;border-top:1px dashed var(--pb-linea2)}
.pb-b-prezzo .pb-lis-nessuno + [data-pb-posto] .pb-prezzo,.pb-b-prezzo .pb-lis-nessuno + .pb-prezzo{padding-top:0;border-top:0}
.pb-lis-usabili .cm-f-lis-voce{width:100%;padding:5px 5px 5px 12px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pb-lis-usabili .cm-f-lis-voce:hover{border-color:color-mix(in srgb,var(--ic-verde) 60%,var(--bordo-forte))}
.pb-lis-usabili .cm-f-lis-voce:focus-visible{outline:2px solid var(--accento2,var(--accento));outline-offset:2px}
.pb-lis-usabili .icona-riga.cm-f-lis-applica{flex:none;margin-left:auto;width:36px;height:36px;border-radius:9px}
.pb-lis-usabili .cm-f-lis-applica svg{width:18px;height:18px}
.pb-lis-usabili .cm-f-lis-voce.applicato .cm-f-lis-applica{background:var(--ic-verde);border-color:var(--ic-verde);color:#fff}
.pb-lis-usabili .cm-f-lis-voce.suggerito{border-color:color-mix(in srgb,var(--ic-verde) 55%,var(--bordo-forte))}
.pb-prezzo .art-campo.preso{animation:cm-f-preso .8s ease-out}

/* 11. LE DUE PARTI COME UN RACCOGLITORE (proposta C "Raccoglitore 1 · 2" scelta da Andrea, 15/10/2026)
   Due linguette numerate (1 Appunti della visita, 2 Articoli da proporre) attaccate alla CARTELLA della parte aperta
   (.opp-cartella su #pannelloAppunti e #pannelloArticoli); la Commessa resta fuori. La linguetta aperta e' piu' alta, col
   filo rosso in cima e lo stesso fondo della cartella; l'altra e' un TASTO vero: fondo pieno, bordo deciso, testo pieno,
   numero ben visibile (anche nel tema scuro: richiesta di Andrea, "piu' marcata la linguetta non selezionata"). Spunta
   verde = la parte ha qualcosa; 0 articoli = "Da fare: aggiungi i tessuti" e il "+" verde quadrato.
   La cartella non e' posizionata (niente position): la colonna del pannello dell'articolo (.pb-lato, assoluta nella
   plancia) resta misurata sulla plancia; col pannello aperto cartella e linguette lasciano il posto alla colonna. */
.opp-racc{--racc-fondo:color-mix(in srgb,var(--accento) 4%,var(--pannello2));--racc-tasto:var(--pannello);--racc-tasto-su:var(--pannello2);
  --racc-bordo:var(--bordo-forte);--racc-passo:color-mix(in srgb,var(--testo) 10%,transparent);
  display:flex;align-items:flex-end;gap:8px;margin:0;padding:0 14px}
.opp-racc > button{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;align-items:center;gap:12px;height:62px;margin:0 0 -1px;padding:0 14px 0 12px;
  border:1px solid var(--racc-bordo);border-bottom-color:var(--racc-bordo);border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,var(--racc-tasto-su),var(--racc-tasto));color:var(--testo);
  box-shadow:0 -6px 14px -12px rgba(16,34,43,.5);font:inherit;text-align:left;cursor:pointer;transition:height .15s,background-color .15s,border-color .15s}
.opp-racc > button:hover{border-color:color-mix(in srgb,var(--accento) 45%,var(--racc-bordo))}
.opp-racc > button:focus-visible{outline:2px solid var(--accento2,var(--accento));outline-offset:2px}
.opp-racc > button.attiva{z-index:3;height:74px;border-top-color:var(--accento);border-bottom-color:transparent;background:var(--racc-fondo);
  box-shadow:inset 0 4px 0 var(--accento),0 -8px 18px -14px rgba(16,34,43,.45)}
.racc-passo{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:9px;background:var(--racc-passo);color:var(--testo)}
.racc-passo b{font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.racc-fatto{position:absolute;top:-6px;right:-6px;display:none;place-items:center;width:19px;height:19px;border-radius:5px;background:var(--ic-verde);color:#fff;box-shadow:0 0 0 2px var(--pannello)}
.opp-racc > button.fatto .racc-fatto{display:grid}
.opp-racc > button.attiva .racc-passo{background:var(--accento);color:#fff}
.racc-testi{display:grid;gap:2px;flex:1;min-width:0}
.racc-testi > b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:17.5px;line-height:1.15;font-weight:760;letter-spacing:-.01em}
.racc-testi > b .racc-corto{display:none}
.racc-testi small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;font-weight:550;color:var(--tenue)}
.racc-num{flex:none;min-width:34px;height:28px;padding:0 9px;border-radius:7px;background:var(--accento);color:#fff;font-size:15px;font-weight:800;line-height:28px;text-align:center;font-variant-numeric:tabular-nums}
.racc-num .conto-num{font-size:inherit;color:inherit}
.opp-racc > button:not(.attiva) .racc-num{background:color-mix(in srgb,var(--accento) 12%,transparent);color:var(--accento-testo);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accento) 45%,transparent)}
.racc-piu{display:none;place-items:center;flex:none;width:34px;height:34px;border:1px solid color-mix(in srgb,var(--ic-verde) 45%,transparent);border-radius:7px;background:color-mix(in srgb,var(--ic-verde) 14%,transparent);color:var(--ic-verde)}
.opp-racc > button.vuoto .racc-piu{display:grid}
.opp-racc > button.vuoto .racc-num{display:none}
.opp-racc > button.vuoto .racc-testi small{color:var(--ic-verde);font-weight:700}
.opp-racc > button.vuoto:not(.attiva){border-color:color-mix(in srgb,var(--ic-verde) 70%,var(--racc-bordo));border-bottom-color:var(--racc-bordo);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ic-verde) 9%,var(--racc-tasto-su)),color-mix(in srgb,var(--ic-verde) 5%,var(--racc-tasto)))}
/* la cartella: la parte aperta, sotto le linguette */
.opp-cartella{margin:0 0 18px;padding:16px;border:1px solid var(--bordo-forte);border-radius:16px;background:color-mix(in srgb,var(--accento) 5%,var(--pannello2));box-shadow:var(--rilievo)}
.opp-cartella > :last-child{margin-bottom:0}
.opp-cartella > .riquadro:first-child,.opp-cartella > .pb-aggiungi:first-child{margin-top:0}
/* tema scuro: la cartella e la linguetta aperta un poco sopra il fondo; la linguetta chiusa un TASTO chiaro e netto */
html[data-tema="scuro"] .opp-racc{--racc-fondo:#1a1c21;--racc-tasto:#262a31;--racc-tasto-su:#30353d;--racc-bordo:rgba(255,255,255,.34);--racc-passo:rgba(255,255,255,.16)}
html[data-tema="scuro"] .opp-racc > button:not(.attiva){color:#fff;box-shadow:0 -8px 18px -12px #000,inset 0 1px 0 rgba(255,255,255,.10)}
html[data-tema="scuro"] .opp-racc > button:not(.attiva) .racc-testi small{color:rgba(255,255,255,.78)}
html[data-tema="scuro"] .opp-racc > button:not(.attiva):hover{--racc-tasto:#2d3139;--racc-tasto-su:#383d46;border-color:rgba(255,255,255,.5)}
html[data-tema="scuro"] .opp-racc > button:not(.attiva) .racc-num{background:color-mix(in srgb,var(--accento) 26%,#262a31);color:#fff;box-shadow:inset 0 0 0 1px #ff5c6b}
html[data-tema="scuro"] .opp-racc > button.vuoto:not(.attiva) .racc-testi small{color:var(--ic-verde)}
html[data-tema="scuro"] .opp-racc > button.attiva{box-shadow:inset 0 4px 0 var(--accento),0 -10px 22px -14px #000}
html[data-tema="scuro"] .opp-cartella{background:#1a1c21}
html[data-tema="scuro"] .racc-fatto{color:#04140b;box-shadow:0 0 0 2px #1a1c21}
@media (max-width:1100px){
  .opp-racc{padding:0 10px;gap:6px}
  .racc-testi > b{font-size:16.5px}
}
/* col pannello dell'articolo aperto a lato (dal PC all'iPad orizzontale): cartella e linguette lasciano il posto alla colonna */
@media (min-width:1100px){
  .pb.pb-con-lato > .opp-racc,.pb.pb-con-lato > .opp-cartella{margin-right:calc(var(--pb-lato-w) + var(--pb-lato-gap))}
  .pb.pb-con-lato > .opp-cartella .pb-corpo,.pb.pb-con-lato > .opp-cartella .pb-corpo ~ *{margin-right:0}
}
/* telefono: due linguette affiancate col nome corto, la riga sotto su due righe, cartella con meno margine */
@media (max-width:699px){
  .opp-racc{padding:0 6px;gap:5px}
  .opp-racc > button{height:64px;gap:8px;padding:0 8px;border-radius:12px 12px 0 0}
  .opp-racc > button.attiva{height:74px}
  .racc-passo{width:30px;height:30px;border-radius:7px}
  .racc-passo b{font-size:16px}
  .racc-fatto{top:-5px;right:-7px;width:15px;height:15px;border-radius:4px}
  .racc-fatto svg{width:9px;height:9px}
  .racc-testi{padding-left:3px}
  .racc-testi > b{font-size:15px}
  .racc-testi > b .racc-corto{display:inline}
  .racc-testi > b .racc-lungo{display:none}
  .racc-testi small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;line-height:1.25}
  .racc-num{min-width:28px;height:24px;line-height:24px;font-size:13px;padding:0 6px}
  .racc-piu{width:28px;height:28px}
  .opp-cartella{padding:8px;border-radius:14px}
}

/* OPPORTUNITA' - LE SOLE TIRELLE COME LE ALTRE (15/10/2026 sera, lavoro opportunita-tirelle-metro). Da aggiungere IN FONDO a
   css/fpc.css. Il prezzo e' sempre al metro e il listino vale anche per gli articoli di sole tirelle: piu' righe hanno
   "Prezzo /Mt - listino" e l'importo sulla stessa riga dell'etichetta. Sul telefono stretto (390 px) con un importo di
   due cifre ("= EUR 16,60") la parola "listino" toccava l'importo (2 px sovrapposti, misurati nel banco): sotto i 420 px,
   se l'importo c'e', la parola lascia il posto all'importo (il bordo verde e la freccina del campo dicono gia' che c'e'
   il listino); senza importo resta. Sopra i 420 px non cambia niente (a 500 px restano 108 px liberi). */
@media (max-width:420px){
  .pb-v-deal.modifica .pb-lista .pb-r .pb-eti-prezzo:has(.pb-prezzo-imp:not(:empty)) .pb-lis-eti{display:none}
}

/* =====================================================================
   Impostazioni > Setup > Identita' del sito completa (15/10/2026, lavoro identita-completa): indice a pillole,
   ANTEPRIMA dal vivo (testata chiara e scura, pagina di accesso, PDF), carte delle immagini con la scelta del file,
   icone fatte dal portale, colori con i campioni ricavati e le prove di leggibilita', segnaposto dei testi, parti
   fatte apposta per Effe Pi. I colori dell'anteprima sono variabili (--idn-*) che mette js/identita-setup.js mentre
   si scrive; senza script valgono quelli di sempre. I colori del portale veri NON stanno qui: li scrive il foglio
   dell'identita' (images/identita.ashx?f=css), solo quando sono cambiati.
   ===================================================================== */
.idn{--idn-acc:#da0219;--idn-acc-chiaro:#da0219;--idn-acc-scuro:#ff4b5c;--idn-acc2:#3b7bff;--idn-pdf:#da0219;--idn-pdf-chiaro:#ebadb5;
     --idn-velo:rgba(218,2,25,.10);--idn-luce:rgba(218,2,25,.42);--idn-luce2:rgba(59,123,255,.26)}
.idn-indice{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 2px}
.idn-indice a{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border:1px solid var(--bordo);border-radius:99px;background:var(--pannello2);color:var(--tenue);font-size:12.5px;font-weight:600;line-height:1.2}
.idn-indice a:hover,.idn-indice a:focus-visible{color:var(--accento-testo);border-color:currentColor}
.idn-gruppo,.idn-anteprima{scroll-margin-top:calc(var(--testata) + 16px)}
.idn-gruppo + .idn-gruppo{padding-top:18px;border-top:1px dashed var(--bordo)}
.idn-aiuto-gruppo{display:block;margin:-2px 0 12px;max-width:760px}

/* --- anteprima --- */
.idn-anteprima{margin-top:14px;padding:14px;border:1px solid var(--bordo);border-radius:12px;background:var(--pannello2)}
.idn-ant-testa{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px}
.idn-ant-testa > small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--debole)}
.idn-ant-stato{padding:3px 10px;border-radius:99px;background:rgba(228,161,27,.14);border:1px solid rgba(228,161,27,.5);color:#8a5a00;font-size:11.5px;font-weight:700}
html[data-tema="scuro"] .idn-ant-stato{color:#f2c35b}
.idn-ant-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.idn-ant{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.idn-ant > figcaption{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--debole)}
.idn-ant img{display:block;width:auto;max-width:42%;object-fit:contain}
.idn-ant-testata{position:relative;display:flex;align-items:center;gap:11px;min-width:0;height:52px;padding:0 14px;border:1px solid;border-radius:9px;overflow:hidden}
.idn-ant-testata.chiaro{background:#fffdf8;color:#10222b;border-color:rgba(16,34,43,.18)}
.idn-ant-testata.scuro{background:#14161a;color:#efe8d9;border-color:rgba(255,255,255,.11)}
.idn-ant-testata::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--idn-acc),var(--idn-acc2),transparent 75%);opacity:.75}
.idn-ant-testata img{height:20px}
.idn-filetto{flex:none;width:1px;height:20px;background:currentColor;opacity:.2}
.idn-ant-nome{min-width:0;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idn-ant-testata.chiaro .idn-ant-nome b{color:var(--idn-acc-chiaro)}
.idn-ant-testata.scuro .idn-ant-nome b,.idn-ant-login .idn-ant-nome b{color:var(--idn-acc-scuro)}
.idn-ant-bottone{flex:none;margin-left:auto;padding:5px 11px;border-radius:5px;background:var(--idn-acc);color:#fff;font-size:11.5px;font-weight:700}
.idn-ant-login{position:relative;display:flex;flex-direction:column;gap:10px;min-height:200px;padding:14px;border-radius:9px;overflow:hidden;color:#efe8d9;
  background:radial-gradient(ellipse at 18% 22%,var(--idn-luce),transparent 58%),radial-gradient(ellipse at 84% 72%,var(--idn-luce2),transparent 55%),linear-gradient(160deg,#0a3e5c 0%,#02111b 55%,#000306 100%);
  background-size:cover;background-position:center}
.idn-ant-login.con-sfondo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.55))}
.idn-ant-login > *{position:relative;z-index:1}
.idn-ant-login-testa{display:flex;align-items:center;gap:9px;min-width:0}
.idn-ant-login-testa img{height:18px}
.idn-ant-login .idn-ant-nome{font-size:13.5px}
.idn-ant-login .idn-filetto{height:18px}
.idn-ant-motto{margin-left:auto;max-width:38%;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,232,217,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idn-ant-claim{font-size:23px;font-weight:800;line-height:1.02;letter-spacing:-.01em;overflow-wrap:anywhere}
.idn-ant-claim em{display:block;font-style:italic;font-weight:500;color:var(--idn-acc-scuro)}
.idn-ant-vetro{margin-top:auto;display:grid;gap:6px;padding:10px 12px;border:1px solid rgba(243,238,227,.26);border-radius:8px;background:linear-gradient(rgba(24,50,64,.22),rgba(6,18,26,.18))}
.idn-ant-vetro b{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}
.idn-ant-sso{display:block;height:9px;border-radius:4px;background:rgba(243,238,227,.85)}
.idn-ant-sso + .idn-ant-sso{width:70%;opacity:.55}
.idn-ant-pdf{position:relative;display:flex;flex-direction:column;gap:9px;min-height:200px;padding:16px 16px 10px;border:1px solid rgba(16,34,43,.18);border-radius:6px;background:#fff;color:#10222b;box-shadow:0 8px 20px -14px rgba(16,34,43,.45);overflow:hidden}
.idn-pdf-fascia{position:absolute;left:0;right:0;top:0;height:5px;background:var(--idn-pdf)}
.idn-pdf-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.idn-pdf-testa img{height:26px;max-width:50%}
.idn-pdf-testa b{color:var(--idn-pdf);font-size:16px;font-weight:800;letter-spacing:.02em}
.idn-pdf-cliente{position:relative;display:grid;gap:4px;padding:7px 10px 7px 14px;border-radius:4px;background:#f8f6f0}
.idn-pdf-cliente i{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--idn-pdf)}
.idn-pdf-cliente small{font-size:8.5px;font-weight:800;letter-spacing:.08em;color:var(--idn-pdf)}
.idn-pdf-cliente span{display:block;width:60%;height:6px;border-radius:3px;background:#dedbd3}
.idn-pdf-cliente span + span{width:40%}
.idn-pdf-righe{display:grid;gap:5px}
.idn-pdf-righe span{display:block;height:7px;border-left:3px solid var(--idn-pdf-chiaro);border-radius:0 3px 3px 0;background:#ece9e2}
.idn-pdf-piede{margin:auto 0 0;padding-top:6px;border-top:1px solid #dedbd3;font-size:8.5px;color:#8b9aa1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- chi ha realizzato il portale --- */
.idn-realizzato{margin-top:16px;padding:12px 14px;border:1px solid var(--bordo);border-radius:10px;background:var(--pannello2)}
.idn-realizzato > b{display:block;font-size:13px;font-weight:600}
.idn-realizzato .setup-interruttore{margin-top:12px}
.idn-realizzato-vista{margin-top:10px;padding:8px 12px;border:1px dashed var(--bordo);border-radius:8px;font-size:12.5px}
.idn-realizzato-vista .piede-logika{margin:0;color:var(--tenue)}
.idn-realizzato-vista.nascosta,.idn-realizzato-vista:empty{display:none}

/* --- immagini: anteprima, scelta del file (la casella vera e' nascosta, si apre dal pulsante), Togli --- */
.idn-immagini{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:12px;margin-top:12px}
.idn-immagine{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:12px;border:1px solid var(--bordo);border-radius:10px;background:var(--pannello)}
.idn-immagine-vista{flex:none;display:grid;place-items:center;width:96px;height:72px;padding:8px;border:1px solid var(--bordo);border-radius:8px;overflow:hidden}
.idn-immagine-vista.chiaro{background:#fffdf8}
.idn-immagine-vista.scuro{background:#14161a}
.idn-immagine-vista.quadra{width:72px;background:repeating-conic-gradient(#e7e3da 0 25%,#fff 0 50%) 0 0/12px 12px}
.idn-immagine-vista.sfondo{padding:0;background:#05070a}
.idn-immagine-vista.sfondo.tessuto{background:radial-gradient(ellipse at 20% 25%,var(--idn-luce),transparent 60%),linear-gradient(160deg,#0a3e5c,#02111b 60%,#000306)}
.idn-immagine-vista img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.idn-immagine-vista.sfondo img{width:100%;height:100%;max-height:none;object-fit:cover}
.idn-immagine-testo{display:grid;gap:5px;min-width:0}
.idn-immagine-testo b{font-size:13.5px;font-weight:600;line-height:1.35}
.idn-immagine-testo small{font-size:12px;line-height:1.4;color:var(--tenue)}
.idn-immagine-azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.idn-immagine-azioni .bottone{min-height:34px;padding:6px 12px;font-size:12.5px}
.idn-scegli{position:relative;overflow:hidden;cursor:pointer}
.idn-scegli:focus-within{outline:2px solid var(--accento2);outline-offset:2px}
.idn-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.idn-pillola{display:inline-flex;align-items:center;padding:1px 8px;border:1px solid var(--bordo);border-radius:99px;background:var(--pannello2);color:var(--tenue);font-size:10.5px;font-weight:700;letter-spacing:.03em;vertical-align:1px}
.idn-pillola.tua{background:var(--successo-velo);border-color:var(--successo-bordo);color:var(--successo)}
.idn-pillola.nuova{background:rgba(228,161,27,.14);border-color:rgba(228,161,27,.5);color:#8a5a00}
html[data-tema="scuro"] .idn-pillola.nuova{color:#f2c35b}
.idn-fatte{margin-top:14px;padding:12px 14px;border:1px dashed var(--bordo);border-radius:10px}
.idn-fatte > b{display:block;margin-bottom:10px;font-size:13px;font-weight:600}
.idn-fatte-elenco{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px}
.idn-fatte-elenco figure{margin:0;display:grid;justify-items:center;gap:6px}
.idn-fatte-elenco figcaption{font-size:11px;color:var(--tenue)}
.idn-f32{width:32px;height:32px}
.idn-f64{width:64px;height:64px;border-radius:14px}
.idn-f64.tonda{border-radius:50%}
.idn-favvio{width:56px;height:121px;border:1px solid var(--bordo);border-radius:9px;object-fit:cover}
.idn-fatte .setup-aiuto{display:block;margin-top:10px}

/* --- colori: tavolozza + casella #rrggbb, campioni ricavati, prove di leggibilita' --- */
.idn-colore-riga{display:flex;align-items:center;gap:8px}
.idn-colore-riga input[type="text"]{flex:1;min-width:0}
.idn-colore-riga input[type="text"]:not(:placeholder-shown){font-family:ui-monospace,Consolas,monospace}
.idn-tavolozza{flex:none;width:44px;height:40px;padding:3px;border:1px solid var(--bordo-forte);border-radius:8px;background:var(--pannello);cursor:pointer}
.idn-derivati{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font-size:12px;color:var(--tenue)}
.idn-derivati > small{flex-basis:100%;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--debole)}
.idn-campione{display:inline-flex;align-items:center;gap:7px}
.idn-campione i{display:grid;place-items:center;width:26px;height:22px;border:1px solid var(--bordo);border-radius:6px;font-style:normal;font-size:10.5px;font-weight:800}
.idn-campione[data-campione="accento"] i{background:var(--idn-acc)}
.idn-campione[data-campione="testochiaro"] i{background:#f6f2ea}
.idn-campione[data-campione="testochiaro"] i::after{content:"Aa";color:var(--idn-acc-chiaro)}
.idn-campione[data-campione="testoscuro"] i{background:#14161a}
.idn-campione[data-campione="testoscuro"] i::after{content:"Aa";color:var(--idn-acc-scuro)}
.idn-campione[data-campione="velo"] i{background:var(--idn-velo)}
.idn-campione[data-campione="secondo"] i{background:var(--idn-acc2)}
.idn-contrasto{margin-top:14px}
.idn-contrasto > b{display:block;margin-bottom:8px;font-size:13px;font-weight:600}
.idn-prove{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.idn-prove li{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 10px;border:1px solid var(--bordo);border-radius:8px;background:var(--pannello);font-size:12.5px}
.idn-prova-campione{flex:none;display:flex}
.idn-prova-campione i{width:18px;height:18px;border:1px solid var(--bordo);border-radius:50%}
.idn-prova-campione i + i{margin-left:-6px}
.idn-prova-nome{flex:1;min-width:0}
.idn-prova-valore{font-variant-numeric:tabular-nums}
.idn-prova-esito{flex:none;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:700}
.idn-prove li.ok .idn-prova-esito{background:var(--successo-velo);color:var(--successo)}
.idn-prove li.poco{border-color:rgba(228,161,27,.5)}
.idn-prove li.poco .idn-prova-esito{background:rgba(228,161,27,.16);color:#8a5a00}
html[data-tema="scuro"] .idn-prove li.poco .idn-prova-esito{color:#f2c35b}
.idn-avviso{margin-top:10px;border:1px solid rgba(228,161,27,.45);background:rgba(228,161,27,.12);color:var(--testo)}

/* --- il nome nei testi, parti fatte apposta, pulsanti --- */
table.tabella.idn-segnaposti{max-width:560px;margin-top:4px}
.idn-segnaposti code{font-size:12px;color:var(--accento-testo)}
.idn-segnaposti td{overflow-wrap:anywhere}
.idn-segnalazioni{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:12.5px}
.idn-segnalazioni li{padding:8px 12px;border:1px solid var(--bordo);border-radius:8px;background:var(--pannello2);overflow-wrap:anywhere}
.idn-segnalazioni li.avvisa{border-color:rgba(228,161,27,.5);background:rgba(228,161,27,.08)}
.idn-segnalazioni li.ok{border-color:var(--successo-bordo);background:var(--successo-velo)}
.idn-segnalazioni a{color:var(--accento-testo);text-decoration:underline}
.idn-segnalazioni small{display:block;margin-top:4px;color:var(--tenue)}
.idn-moduli{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.idn-moduli li{display:grid;gap:3px;padding:9px 12px;border-left:3px solid var(--bordo-forte);border-radius:0 8px 8px 0;background:var(--pannello2)}
.idn-moduli b{font-size:13px;font-weight:600}
.idn-moduli small{font-size:12px;line-height:1.45;color:var(--tenue)}
.idn-azioni{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
@container (max-width:760px){
  .idn-ant-griglia{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:460px){
  .idn-immagine{flex-direction:column}
  .idn-immagine-vista{width:100%;height:84px}
  .idn-immagine-vista.quadra{width:84px}
  .idn-prove li{flex-wrap:wrap}
  .idn-prova-nome{flex-basis:calc(100% - 44px)}
  .idn-azioni .bottone{flex:1 1 100%}
}

/* ---------- Progetto Base: Setup (elenchi a schede) e accesso, 17/10/2026 ----------
   Gli elenchi del Setup (richieste da abbinare, account collegati, passkey) sono schede anche sul PC: il telefono
   non scorre mai di lato. Il codice per l'assistenza (MSF-XXXX) in carattere a spaziatura fissa. */
.setup-corpo h3{margin:24px 0 4px;font-size:15px;font-weight:600}
.prov-elenco-titolo{margin:22px 0 8px;font-size:13.5px;font-weight:600}
.setup-schede{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.setup-scheda{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 14px;border:1px solid var(--bordo);border-radius:var(--raggio);background:var(--pannello2)}
.setup-scheda-testo{flex:1 1 240px;min-width:0}
.setup-scheda-testo b{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.setup-scheda-testo small{display:block;margin-top:3px;font-size:12px;color:var(--tenue);overflow-wrap:anywhere}
.setup-scheda-azioni{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.setup-abbina{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.setup-abbina .campo{margin:0;min-width:min(260px,100%)}
.setup-scheda form{margin:0}
.codice-assistenza{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;letter-spacing:.06em}
.pagina-login .alert .codice-assistenza{padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.14);color:#fff}
.prov-togli-modulo{margin-top:12px}
.setup-corpo input[readonly]{opacity:.8}
.pagina-login .since form{display:contents}