/* ==========================================================================
   PORTALI ESTERNI — il template, non una riverniciatura
   assets/css/livrea_portali.css        fornitori · agenti · assistenza IT

   Vale solo dove `isAnyPortalHost()` e' vero. La dashboard interna non lo
   carica nemmeno: chi ci lavora dentro la usa scura tutto il giorno.

   Il chrome (testata, menu, briciole, colonna) lo stampa
   `templates/portal_chrome.php`: markup PROPRIO, classi `zpt-*`, ricalcato sul
   portale ordini B2B. Qui lo si veste, e si adatta quel poco che resta della
   dashboard: le superfici del contenuto e le voci della colonna, che tengono
   le classi `.dr-*` perche' il loro onclick pilota le viste della pagina.

   ⚠️ TUTTE LE MISURE VENGONO DAL B2B, prese col righello sul sito:
       testata arancione  88px   logo 68px   primo elemento a 44px dal bordo
       fascia menu navy   52px   voci Raleway 900 14px, spaziate 0.56px
       briciole           42px   bianche, rientrate quanto la colonna
       colonna           252px   #0C2438
       footer            titoli Nunito 16px/800 sp.1.28px · link 14px/600
                         logo 52px · fasce 48/24/32 · chiusura 63px
   (88 + 52 = 140: sul B2B la fascia sta DENTRO l'altezza della testata.
   Averle sommate teneva tutto il chrome 52px piu' in basso.)

   ⚠️ Ogni selettore parte da `:root[data-portale]`: le pagine della dashboard
   hanno centinaia di regole nel loro <style> inline, che arriva dopo questo
   foglio. L'attributo in piu' chiude la partita senza un solo !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE E MISURE
   -------------------------------------------------------------------------- */
:root[data-portale]{
  --ztc-orange:   #F07D00;
  --ztc-orangeDk: #D96F00;
  --ztc-navy:     #001527;
  --ztc-barra:    #0C2438;
  --ztc-fondo:    #F4F6F8;
  --ztc-carta:    #FFFFFF;
  --ztc-filo:     #E3E9EF;
  --ztc-filo2:    #EEF2F6;
  --ztc-ink:      #1B2A38;
  --ztc-muted:    #6C8095;
  --ztc-tenue:    #8296A8;
  --ztc-titoli:   "Raleway", "Nunito", system-ui, sans-serif;
  --ztc-testo:    "Nunito", system-ui, sans-serif;

  --zpt-hd:  88px;    /* testata arancione */
  --zpt-nav: 52px;    /* fascia menu navy  */
  --zpt-bc:  42px;    /* briciole          */
  --zpt-col: 252px;   /* colonna           */
  --zpt-gut: 44px;    /* rientro di pagina */
}

/* I token della dashboard parlano Zootecnica: cosi' le regole gia' scritte
   nelle pagine seguono da sole, senza toccarne una. */
:root[data-portale][data-theme]{
  --bg: var(--ztc-fondo);      --card: var(--ztc-carta);
  --hover: #F3F6F9;            --border: var(--ztc-filo);
  --border2: #D9E2EA;          --text: var(--ztc-ink);
  --muted: var(--ztc-muted);   --dim: var(--ztc-tenue);
  --accent: var(--ztc-orange); --accentDk: var(--ztc-orangeDk);
  --bg-elevated: var(--ztc-carta);
  --green: #2F8F5B; --red: #B4463C; --blue: #2C6FA8; --orange: #D08A22;
  /* ⚠️ Questi tre erano rimasti quelli della dashboard e si vedevano: il ciano
     tingeva i codici prodotto di 700 righe fra Vendite e Scorte (`--sec`,
     il colore della sezione), il viola i pochi contrassegni delle promozioni.
     Qui il colore d'accento e' uno solo, ed e' l'arancione di casa. */
  --purple: #7A5CA8; --cyan: var(--ztc-orange); --teal: #2F8F5B; --tealDk: #26794C;
  --sec: var(--ztc-orange);
  --pink: #be185d; --indigo: #4338ca;
  --th-bg: #F7F9FB; --row-stripe: rgba(27,42,56,.02); --row-highlight: #FFF7EC;
  --shadow-sm: rgba(16,32,48,.05); --shadow-md: rgba(16,32,48,.07);
  --shadow-lg: rgba(16,32,48,.10); --shadow-xl: rgba(16,32,48,.14);
  --logo-invert: 0;
  /* ⚠️ senza, il browser dipinge i campi come se fossimo ancora al buio */
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. LA PAGINA
      Il chrome del gestionale su questi host non si stampa piu': qui si spegne
      quel che ne resta e si tara il corpo sulle misure del portale.
   -------------------------------------------------------------------------- */
:root[data-portale][data-theme] .header,
:root[data-portale][data-theme] .dts-bar,
:root[data-portale][data-theme] .dr-rail,
:root[data-portale][data-theme] .dash-topline{ display: none !important; }

:root[data-portale][data-theme] body{
  font-family: var(--ztc-testo);
  background: var(--ztc-fondo);
  color: var(--ztc-ink);
  padding-top: calc(var(--zpt-hd) + var(--zpt-nav) + var(--zpt-bc)) !important;
  padding-left: var(--zpt-col) !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
:root[data-portale][data-theme] h1,
:root[data-portale][data-theme] h2,
:root[data-portale][data-theme] h3,
:root[data-portale][data-theme] h4{ font-family: var(--ztc-titoli); letter-spacing: -.01em; }
:root[data-portale][data-theme] table,
:root[data-portale][data-theme] .dkpi-v,
:root[data-portale][data-theme] .text-right{ font-variant-numeric: lining-nums tabular-nums; }

/* --------------------------------------------------------------------------
   3. TESTATA ARANCIONE — 88px, logo 68
   -------------------------------------------------------------------------- */
:root[data-portale][data-theme] .zpt-hd{
  position: fixed;
  top: 0; left: 0; right: 0;
  /* ⚠️ sopra il contenuto: le pagine dei portali arrivano a z-index 545
     (l'interstitial dei fornitori) e scorrendo passavano davanti alla testata.
     Restano piu' in alto solo gli strumenti admin (1200) e i modali (99999). */
  z-index: 900;
  height: var(--zpt-hd);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 var(--zpt-gut);
  background: var(--ztc-orange);
}
:root[data-portale][data-theme] .zpt-logo{ display: flex; align-items: center; flex: none; }
:root[data-portale][data-theme] .zpt-logo img{ height: 68px; width: auto; display: block; }
:root[data-portale][data-theme] .zpt-tit{ display: flex; flex-direction: column; min-width: 0; }
:root[data-portale][data-theme] .zpt-tit .a{
  font-family: var(--ztc-titoli);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.15;
  color: #FFF;
  letter-spacing: -.01em;
}
:root[data-portale][data-theme] .zpt-tit .b{
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-portale][data-theme] .zpt-az{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* I bottoni che la pagina passa al chrome (Export Excel, Cambia area, Admin…)
   e il menu utente: pillole BIANCHE con testo scuro. Prima erano trasparenti
   con un filo bianco, e sull'arancione si leggevano poco: il bianco pieno le
   stacca dalla testata senza aggiungere un altro colore.
   ⚠️ Il `color` va anche sui figli (`strong`, `.btn-label`, le emoji-icona):
   il bottone utente scrive il nome dentro uno <strong>, che senza la sua riga
   resterebbe bianco su bianco. */
:root[data-portale][data-theme] .zpt-az .btn,
:root[data-portale][data-theme] .zpt-az .user-btn{
  background: #FFF;
  border: 1px solid #FFF;
  border-radius: 999px;
  color: var(--ztc-navy);
  font-family: var(--ztc-titoli);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 16px;
  height: auto;
  box-shadow: none;
}
:root[data-portale][data-theme] .zpt-az .btn *,
:root[data-portale][data-theme] .zpt-az .user-btn *{ color: var(--ztc-navy); }
:root[data-portale][data-theme] .zpt-az .btn:hover,
:root[data-portale][data-theme] .zpt-az .user-btn:hover{
  background: #F1F3F5;
  border-color: #F1F3F5;
  color: var(--ztc-navy);
}
:root[data-portale][data-theme] .zpt-az .user-btn strong{ color: var(--ztc-navy); font-weight: 800; }
/* Il pannello degli strumenti e' `fixed` a 66px dall'alto: misura della vecchia
   topbar. Con la testata del portale (88px) partiva da dentro l'arancione. */
:root[data-portale][data-theme] .admin-tools{ top: calc(var(--zpt-hd) + 8px); }
:root[data-portale][data-theme] .zpt-az .ud-role,
:root[data-portale][data-theme] .zpt-az .theme-toggle{ display: none !important; }

/* --------------------------------------------------------------------------
   4. FASCIA MENU NAVY — 52px, voci come le categorie del B2B
   -------------------------------------------------------------------------- */
:root[data-portale][data-theme] .zpt-nav{
  position: fixed;
  top: var(--zpt-hd); left: 0; right: 0;
  z-index: 899;
  height: var(--zpt-nav);
  background: var(--ztc-navy);
}
:root[data-portale][data-theme] .zpt-nav-in{
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 30px;
  padding: 0 var(--zpt-gut);
}
:root[data-portale][data-theme] .zpt-nav-link{
  display: inline-flex;
  align-items: center;
  font-family: var(--ztc-titoli);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .56px;
  text-transform: uppercase;
  color: #FFF;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color .15s, color .15s;
}
:root[data-portale][data-theme] .zpt-nav-link:hover{ color: var(--ztc-orange); }
:root[data-portale][data-theme] .zpt-nav-link.on{ border-bottom-color: var(--ztc-orange); }
/* Sui Fornitori l'area aperta non e' una pagina diversa: e' uno stato della
   stessa (`data-fdomain`). La voce accesa la decide quello, non il titolo. */
:root[data-portale][data-fdomain="negozi"][data-theme] .zpt-nav-link[data-dominio="negozi"],
:root[data-portale][data-fdomain="ecommerce"][data-theme] .zpt-nav-link[data-dominio="ecommerce"]{
  border-bottom-color: var(--ztc-orange);
  color: var(--ztc-orange);
}

/* --------------------------------------------------------------------------
   5. BRICIOLE — riga bianca 42px, rientrate quanto la colonna
   -------------------------------------------------------------------------- */
:root[data-portale][data-theme] .zpt-bc{
  position: fixed;
  top: calc(var(--zpt-hd) + var(--zpt-nav));
  left: 0; right: 0;
  z-index: 890;              /* sotto la colonna: e' lei a passarci sopra */
  height: var(--zpt-bc);
  background: var(--ztc-carta);
  border-bottom: 1px solid var(--ztc-filo);
}
:root[data-portale][data-theme] .zpt-bc-in{
  height: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 var(--zpt-gut) 0 calc(var(--zpt-col) + 26px);
  font-size: 13px;
  color: var(--ztc-tenue);
}
:root[data-portale][data-theme] .zpt-bc a{ color: var(--ztc-tenue); text-decoration: none; }
:root[data-portale][data-theme] .zpt-bc a:hover{ color: var(--ztc-orange); }
:root[data-portale][data-theme] .zpt-bc b{ color: var(--ztc-navy); font-weight: 700; }
:root[data-portale][data-theme] .zpt-bc span{ opacity: .45; }

/* --------------------------------------------------------------------------
   6. COLONNA — 252px, la stessa dei filtri di categoria
   -------------------------------------------------------------------------- */
/* ⚠️ ASSOLUTA, non fissa. Fissa arrivava in fondo alla FINESTRA e passava
   davanti al pie' di pagina, che sembrava partire dalla sua destra (in realta'
   era gia' largo quanto lo schermo, ma coperto). Assoluta rispetto al corpo
   pagina, scorre col contenuto — come la barra dei filtri sul portale ordini —
   e si ferma esattamente dove comincia il footer, la cui altezza la misura il
   footer stesso in `--zpf-h`. */
:root[data-portale][data-theme] body{ position: relative; }
:root[data-portale][data-theme] .zpt-col{
  position: absolute;
  top: calc(var(--zpt-hd) + var(--zpt-nav));
  left: 0;
  bottom: var(--zpf-h, 0px);
  z-index: 895;
  width: var(--zpt-col);
  background: var(--ztc-barra);
  /* la colonna resta ferma mentre il contenuto scorre, ma senza barra propria:
     se le voci non ci stanno, scorre insieme alla pagina */
  overflow: visible;
  padding-bottom: 20px;
}
:root[data-portale][data-theme] .zpt-col-tit{
  padding: 15px 18px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--ztc-titoli);
  font-weight: 900;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
/* Il menu resta in vista mentre la pagina scorre: la colonna continua a
   finire sul footer (e' `absolute`), ma il blocco dentro si appiccica sotto il
   chrome. Cosi' non si perde la navigazione in una tabella lunga.
   ⚠️ Sticky sta sull'INVOLUCRO, non sulle voci: titolo e voci sono un pezzo
   solo. Quando lo sticky era sulle sole voci, il titolo della colonna (il nome
   del brand) scorreva via da solo e il menu restava senza intestazione. */
:root[data-portale][data-theme] .zpt-col-fix{
  position: sticky;
  /* si ferma dove la colonna comincia (testata + fascia menu), NON piu' in
     basso: sommandoci anche le briciole il menu scendeva di 42px appena si
     scrollava, lasciando un vuoto blu sopra. Le briciole corrono a destra
     della colonna, quindi qui non tolgono spazio. */
  top: calc(var(--zpt-hd) + var(--zpt-nav));
  background: var(--ztc-barra);
}
:root[data-portale][data-theme] .zpt-col-nav{
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
}

/* le voci restano `.dr-item` (il loro onclick pilota le viste): qui cambia
   solo l'abito — squadrate, riga arancione su quella scelta */
/* ⚠️ `display` STA FUORI dalla regola qui sotto, e con poco peso apposta.
   Il portale fornitori nasconde le voci che non appartengono all'area scelta
   con `:root:not([data-fdomain="x"]) .dr-nav [data-tab="y"]{display:none}`
   (peso 0,4,0). La regola grande pesa 0,5,0: dichiarandoci dentro anche il
   display, le rimetteva tutte in vista e il menu elencava Negozi ed Ecommerce
   insieme. Qui il display pesa 0,3,0 e lascia vincere il filtro. */
:root[data-portale] .zpt-col .dr-item{ display: flex; }

:root[data-portale][data-theme] .zpt-col .dr-item{
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 9px 18px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: rgba(255, 255, 255, .8);
  font-family: var(--ztc-testo);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
:root[data-portale][data-theme] .zpt-col .dr-item:hover{ background: rgba(255, 255, 255, .07); color: #FFF; }
:root[data-portale][data-theme] .zpt-col .dr-item.active{
  background: rgba(240, 125, 0, .18);
  border-left-color: var(--ztc-orange);
  color: #FFF;
  font-weight: 800;
}
:root[data-portale][data-theme] .zpt-col .dr-item .gi{ width: 20px; flex: none; opacity: .72; filter: grayscale(1); }
:root[data-portale][data-theme] .zpt-col .dr-item.active .gi{ opacity: 1; filter: none; }
:root[data-portale][data-theme] .zpt-col .dr-item .cnt{
  margin-left: auto;
  background: var(--ztc-orange);
  color: #FFF;
  border-radius: 0;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
}
:root[data-portale][data-theme] .zpt-col .dr-sub .dr-item{ padding-left: 40px; font-size: 12.5px; }
:root[data-portale][data-theme] .zpt-col .dr-chev{ margin-left: auto; opacity: .5; }

/* Portale Agenti — menu piatto con etichette (variante A, 7/9/2026):
   gruppi `dr-static` = titoletto + voci a filo (niente rientro, niente
   fisarmonica); badge `.cnt.soft` grigio informativo; `.zpt-ident` = tessera
   dell'agente in cima alla colonna al posto del titolo. */
:root[data-portale][data-theme] .zpt-col .dr-static{ display: block; }
:root[data-portale][data-theme] .zpt-col .dr-static .dr-grp-l{
  padding: 16px 18px 5px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--ztc-titoli);
  font-weight: 900;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
:root[data-portale][data-theme] .zpt-col .dr-static > .dr-sub{ display: flex; flex-direction: column; }
:root[data-portale][data-theme] .zpt-col .dr-static > .dr-sub .dr-item{ padding-left: 18px; font-size: 13px; }
:root[data-portale][data-theme] .zpt-col .dr-item .cnt.soft{
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
}
:root[data-portale][data-theme] .zpt-col .dr-item.active .cnt.soft{ background: rgba(255, 255, 255, .22); color: #FFF; }
:root[data-portale][data-theme] .zpt-ident{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
:root[data-portale][data-theme] .zpt-ident .av{
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--ztc-orange); color: #FFF;
  font-family: var(--ztc-titoli); font-weight: 900; font-size: 13px;
}
:root[data-portale][data-theme] .zpt-ident .ix{ display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
:root[data-portale][data-theme] .zpt-ident .n{ font-family: var(--ztc-titoli); font-weight: 900; font-size: 13.5px; color: #FFF; overflow-wrap: anywhere; }
:root[data-portale][data-theme] .zpt-ident .c{ font-size: 11px; color: rgba(255, 255, 255, .55); margin-top: 2px; }
:root[data-portale][data-theme] .zpt-ident .sim{ font-size: 10.5px; font-weight: 700; color: var(--ztc-orange); margin-top: 3px; }

/* --------------------------------------------------------------------------
   7. IL CONTENUTO — quello che le pagine disegnano gia', in livrea chiara
   -------------------------------------------------------------------------- */
:root[data-portale][data-theme] .main{ padding: 26px var(--zpt-gut) 34px; overflow: visible; }
/* LE TABELLE SI VEDONO PER INTERO.
   Le pagine dei portali chiudono le tabelle in riquadri con un'altezza massima
   e la barra dentro: nate per il gestionale, dove la pagina non scorre. Qui la
   pagina scorre, quindi la tabella si mostra tutta — la paginazione resta, e
   fa lei il suo mestiere. Resta lo scorrimento ORIZZONTALE dove le colonne
   sono davvero piu' larghe dello schermo (giacenze per punto vendita). */
:root[data-portale][data-theme] .tbl-wrap,
:root[data-portale][data-theme] .table-wrap,
:root[data-portale][data-theme] .table-responsive,
:root[data-portale][data-theme] .table-scroll,
:root[data-portale][data-theme] #nzListWrap,
:root[data-portale][data-theme] .geo-table-wrap,
:root[data-portale][data-theme] .card > div[style*="overflow"],
/* Il riquadro vero delle giacenze non ha ne' classe ne' id: e' un <div>
   con lo stile scritto a mano (`overflow:auto; max-height:64vh`), creato
   dal JS della sezione. Lo stile in riga batte il foglio, percio' serve
   `!important` e serve puntarlo per l'attributo: senza questa riga la
   tabella continuava a scorrere dentro il suo riquadro. */
:root[data-portale][data-theme] div[style*="overflow"][style*="max-height"]{
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: auto;
}

/* Nessun riquadro con la barra dentro: scorre la pagina, non i pezzi. */
:root[data-portale][data-theme] .main,
:root[data-portale][data-theme] #appContent,
:root[data-portale][data-theme] .content,
:root[data-portale][data-theme] [id^="tab-"]{
  max-height: none !important;
  overflow-y: visible !important;
}
:root[data-portale][data-theme] .card,
:root[data-portale][data-theme] .dkpi,
:root[data-portale][data-theme] .tbl-wrap,
:root[data-portale][data-theme] .region,
:root[data-portale][data-theme] .box,
:root[data-portale][data-theme] .panel,
:root[data-portale][data-theme] .modal,
:root[data-portale][data-theme] .dc-card{
  border-radius: 0;
  border: 1px solid var(--ztc-filo);
  box-shadow: none;
  background: var(--ztc-carta);
}
:root[data-portale][data-theme] .dc-card:hover{ border-color: var(--ztc-orange); transform: none; }
:root[data-portale][data-theme] .dkpi-l{
  font-family: var(--ztc-titoli);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ztc-tenue);
}
:root[data-portale][data-theme] .dkpi-v{ font-family: var(--ztc-titoli); font-weight: 900; color: var(--ztc-navy); }
:root[data-portale][data-theme] .dkpi-ic{ border-radius: 0; filter: grayscale(1); opacity: .7; }

:root[data-portale][data-theme] .btn,
:root[data-portale][data-theme] .btn-sm,
:root[data-portale][data-theme] .preset-btn,
:root[data-portale][data-theme] .dt-chip{
  border-radius: 0;
  font-family: var(--ztc-titoli);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
:root[data-portale][data-theme] .btn-primary{ background: var(--ztc-orange); border-color: var(--ztc-orange); color: #FFF; }
/* ⚠️ L'Assistenza IT dichiara `.btn-primary{background:var(--btn)!important}`
   nel proprio foglio: il bottone «Apri ticket» restava azzurro-verde in mezzo
   alla livrea arancione. Un `!important` si batte solo con un `!important`.
   `.welcome-big-btn` viaggia nella stessa dichiarazione, quindi va con lui. */
:root[data-portale][data-theme] .btn-primary,
:root[data-portale][data-theme] .welcome-big-btn{
  background: var(--ztc-orange) !important;
  border-color: var(--ztc-orange) !important;
  color: #FFF !important;
}
:root[data-portale][data-theme] .btn-primary:hover,
:root[data-portale][data-theme] .welcome-big-btn:hover{
  background: var(--ztc-orangeDk) !important;
  border-color: var(--ztc-orangeDk) !important;
}
/* i bottoni scrivevano in Inter o, quando nessuno lo diceva, in Arial */
:root[data-portale][data-theme] .btn,
:root[data-portale][data-theme] button,
:root[data-portale][data-theme] .inc-btn{ font-family: var(--ztc-testo); }
/* I bottoni-icona nelle righe (occhio, copia, elimina) non dichiarano un colore:
   il browser li fa NERI, l'unico nero puro in mezzo a un testo blu notte. */
:root[data-portale][data-theme] button:not([class]){ color: var(--ztc-navy); }

/* IL CONTENUTO RESPIRA. L'Assistenza IT incolonna tutto in `.wrap` a 1100px,
   misura nata per una pagina larga quanto lo schermo; qui la colonna se ne
   prende gia' 252 e restava una striscia stretta in mezzo a due vuoti. */
/* Due macchie del gestionale rimaste in mezzo alla livrea dell'Assistenza:
   la scorciatoia al pannello admin era viola elettrico e i riquadri di aiuto
   azzurrini. Il viola non e' un colore di questa casa; la scorciatoia pero'
   non e' nemmeno l'azione principale della pagina, percio' va sul navy e
   l'arancione resta al bottone che apre il ticket. */
:root[data-portale][data-theme] .admin-shortcut-cta{
  background: var(--ztc-navy) !important;
  border-color: var(--ztc-navy) !important;
  color: #FFF !important;
}
:root[data-portale][data-theme] .hint-box{
  background: rgba(240, 125, 0, .07);
  border-color: rgba(240, 125, 0, .22);
}

/* Le targhette dei ticket portavano ancora due colori della dashboard: l'ambra
   #f59e0b di «in lavorazione» e lo slate #64748b della priorita' bassa. Stesso
   ruolo, tinte di casa. */
:root[data-portale][data-theme] .badge[style*="245, 158, 11"],
:root[data-portale][data-theme] .badge[style*="#f59e0b"]{
  background: rgba(240, 125, 0, .15) !important;
  color: var(--ztc-orange) !important;
}
:root[data-portale][data-theme] .p-bassa,
:root[data-portale][data-theme] .badge.p-bassa{
  background: rgba(130, 150, 168, .18) !important;
  color: var(--ztc-tenue) !important;
}
:root[data-portale][data-theme] .pbar.p-bassa{ background: var(--ztc-tenue) !important; }

:root[data-portale][data-theme] .wrap{
  /* ⚠️ Serve `width:100%`. La pagina dichiara `margin: 0 auto`, e in un corpo a
     colonna (flex) i margini automatici NON stirano l'elemento: se lo lasci
     senza larghezza si stringe sul contenuto — 809px invece di 1440, un
     francobollo in mezzo a due vuoti da 425. */
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--zpt-gut);
  padding-right: var(--zpt-gut);
}
:root[data-portale][data-theme] .btn-primary:hover{ background: var(--ztc-orangeDk); border-color: var(--ztc-orangeDk); }
:root[data-portale][data-theme] .btn-green{ background: var(--ztc-navy); border-color: var(--ztc-navy); color: #FFF; }
:root[data-portale][data-theme] .btn-ghost{ background: var(--ztc-carta); color: var(--ztc-navy); border-color: #D9E2EA; }
:root[data-portale][data-theme] input,
:root[data-portale][data-theme] select,
:root[data-portale][data-theme] textarea{ border-radius: 0; }
:root[data-portale][data-theme] input:focus,
:root[data-portale][data-theme] select:focus{ border-color: var(--ztc-orange); outline: none; }

/* ── TABELLE ────────────────────────────────────────────────────────────
   Modello: `.zacb-tab` dell'area clienti B2B. Intestazioni piccole e spaziate
   su fondo trasparente, filo tenue fra le righe, numeri incolonnati.
   ⚠️ `!important` sulla sola TIPOGRAFIA: le sezioni stilano le tabelle con
   selettori che contengono un id (`#negoziView th`), e un id batte qualsiasi
   attributo. Le misure (padding, colonne sticky, celle colorate delle
   giacenze) restano loro: quelle non sono stile, sono lettura del dato. */
:root[data-portale][data-theme] table th{
  font-family: var(--ztc-titoli) !important;
  font-weight: 800 !important;
  font-size: 9.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ztc-tenue) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(27, 42, 56, .12);
}
:root[data-portale][data-theme] table td{
  border-bottom: 1px solid var(--ztc-filo2);
  font-family: var(--ztc-testo);
  /* cifre della stessa larghezza: Nunito di suo le fa proporzionali, e le
     colonne di numeri risultavano scalettate */
  font-variant-numeric: lining-nums tabular-nums;
}
/* i codici articolo: sul B2B non sono monospace, sono Raleway scuro */
:root[data-portale][data-theme] table td.mono,
:root[data-portale][data-theme] table td .mono,
:root[data-portale][data-theme] #nzTableWrap tbody td:first-child{
  font-family: var(--ztc-titoli) !important;
  font-weight: 800;
  color: var(--ztc-navy);
  letter-spacing: 0;
}
:root[data-portale][data-theme] table tbody tr:hover td{ background: rgba(240, 125, 0, .045); }

/* ── PILLOLE E TARGHETTE ────────────────────────────────────────────────*/
:root[data-portale][data-theme] .dt-pill,
:root[data-portale][data-theme] .badge,
:root[data-portale][data-theme] .chip,
:root[data-portale][data-theme] .tag{
  border-radius: 0;
  font-family: var(--ztc-titoli);
  font-weight: 800;
  letter-spacing: .04em;
}

/* ── RIQUADRI ───────────────────────────────────────────────────────────
   Ogni sezione ha battezzato i suoi a modo proprio; qui valgono tutti la
   stessa cosa: fondo bianco, un filo, nessun angolo tondo, nessuna ombra. */
:root[data-portale][data-theme] .kpi-card,
:root[data-portale][data-theme] .kpi-box,
:root[data-portale][data-theme] .nz-flt,
:root[data-portale][data-theme] .filters,
:root[data-portale][data-theme] .filter-bar,
:root[data-portale][data-theme] .filters-bar,
:root[data-portale][data-theme] .search-bar,
:root[data-portale][data-theme] .toolbar,
:root[data-portale][data-theme] .dash-filters,
:root[data-portale][data-theme] .tlist,
:root[data-portale][data-theme] .det2-col,
:root[data-portale][data-theme] .product-detail-card{
  border-radius: 0 !important;
  border-color: var(--ztc-filo);
  box-shadow: none !important;
}
/* i numeri grossi dei riquadri: stessa mano dei KPI gia' in livrea */
:root[data-portale][data-theme] .kpi-box .kpi-val,
:root[data-portale][data-theme] .kpi-card .kv,
:root[data-portale][data-theme] .kpi-card b{
  font-family: var(--ztc-titoli);
  font-weight: 900;
  color: var(--ztc-navy);
  font-variant-numeric: lining-nums tabular-nums;
}
:root[data-portale][data-theme] .kpi-box .kpi-label,
:root[data-portale][data-theme] .kpi-card .kl{
  font-family: var(--ztc-titoli);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ztc-tenue);
}

/* ── CONTROLLI ──────────────────────────────────────────────────────────
   Erano in Inter, il carattere della dashboard: in mezzo a Nunito e Raleway
   si vedeva. */
:root[data-portale][data-theme] input,
:root[data-portale][data-theme] select,
:root[data-portale][data-theme] textarea{ font-family: var(--ztc-testo); }
:root[data-portale][data-theme] .filter-btn,
:root[data-portale][data-theme] .preset-btn,
:root[data-portale][data-theme] .tab-btn,
:root[data-portale][data-theme] .seg-btn{
  border-radius: 0;
  font-family: var(--ztc-titoli);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
:root[data-portale][data-theme] .filter-btn.active,
:root[data-portale][data-theme] .preset-btn.active,
:root[data-portale][data-theme] .tab-btn.active{
  background: var(--ztc-navy);
  border-color: var(--ztc-navy);
  color: #FFF;
}

/* ── DOVE LE SEZIONI VINCONO PER ID ─────────────────────────────────────
   Le regole qui sopra bastano dove la pagina stila per classe. Il portale
   Fornitori invece usa selettori come `#negoziView .filter-btn` o
   `#page-vendite td`: un id batte tutto, e quei pezzi restavano col carattere
   e con gli angoli del gestionale. Si insiste solo su quelli, uno per uno,
   invece di alzare l'artiglieria su tutto il foglio. */
:root[data-portale][data-theme] table td{ font-family: var(--ztc-testo) !important; }
:root[data-portale][data-theme] table td.mono,
:root[data-portale][data-theme] table td .mono,
:root[data-portale][data-theme] #nzTableWrap tbody td:first-child{ font-family: var(--ztc-titoli) !important; }
:root[data-portale][data-theme] .filter-btn,
:root[data-portale][data-theme] .preset-btn{
  font-size: 11px !important;
  border-radius: 0 !important;
  font-family: var(--ztc-titoli) !important;
  font-weight: 800 !important;
}
/* «Esporta Excel» era verde semaforo: un colore che in questa casa non esiste.
   Va sul navy come le altre azioni secondarie, e l'arancione resta all'azione
   principale della pagina. */
:root[data-portale][data-theme] .btn-green{
  background: var(--ztc-navy) !important;
  border-color: var(--ztc-navy) !important;
  color: #FFF !important;
}
/* ⚠️ In TESTATA i bottoni sono bianchi con testo scuro, e la regola che dipinge
   di scuro anche i figli (`strong`, `.btn-label`) valeva pure per l'Export:
   navy su navy, cioe' un rettangolo nero e muto. In testata «Export Excel»
   resta bianco come gli altri. */
:root[data-portale][data-theme] .zpt-az .btn-green,
:root[data-portale][data-theme] .zpt-az .btn-green *{
  background: #FFF !important;
  border-color: #FFF !important;
  color: var(--ztc-navy) !important;
}

/* i titoli dentro le tessere: sull'IT erano gia' cosi', qui erano piu' chiari */
:root[data-portale][data-theme] .card > h3:first-child,
:root[data-portale][data-theme] .ov-card > h3:first-child,
:root[data-portale][data-theme] .nz-sec > h3:first-child{
  font-family: var(--ztc-titoli);
  font-weight: 900;
  color: var(--ztc-navy);
}

/* ── TITOLI DENTRO IL CONTENUTO ─────────────────────────────────────────
   Sull'Assistenza IT erano gia' Raleway 900 col filo arancione; sui Fornitori
   restavano 700 e senza filo. Stessa mano ovunque. */
:root[data-portale][data-theme] .main h2,
:root[data-portale][data-theme] .wrap h2,
:root[data-portale][data-theme] #negoziView h2{
  font-family: var(--ztc-titoli);
  font-weight: 900;
  color: var(--ztc-navy);
}
:root[data-portale][data-theme] #nzScrTrend > div > h2,
:root[data-portale][data-theme] #nzScrStock > div > h2{
  display: inline-block;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ztc-orange);
  margin-bottom: 4px;
}

/* titoli di pagina: nome, poi la riga arancione */
:root[data-portale][data-theme] .page-title,
:root[data-portale][data-theme] .card > h2:first-child,
:root[data-portale][data-theme] .region > h2:first-child{
  display: inline-block;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ztc-orange);
  color: var(--ztc-navy);
  font-weight: 900;
}

/* LE VISTE DEL PORTALE STANNO NEL FLUSSO.
   Erano riquadri `fixed` a tutto schermo con la loro barra di scorrimento —
   una scelta del vecchio layout a rail. Sopra il template nuovo davano due
   effetti sgradevoli: il contenuto scorreva dentro se stesso, e la vista fissa
   si sovrapponeva al chrome facendo sembrare che ci fosse «una colonna sopra
   l'altra». Qui tornano elementi normali: scorre la pagina, e basta. */
:root[data-portale][data-theme] #domainChooser,
:root[data-portale][data-theme] #negoziView,
:root[data-portale][data-theme] #ecommerceView{
  position: static !important;
  inset: auto !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* La schermata di scelta era generosa: 48px sopra e sotto piu' schede da 214.
   Con il chrome (182) e il pie' di pagina (340) su una finestra da 861 la somma
   sforava di una ottantina di pixel, e compariva una barra di scorrimento su
   una pagina che sembrava starci. Qui si stringe il vuoto, non i contenuti. */
/* IL CONTENUTO DELL'E-COMMERCE STA NELLA SUA AREA, E BASTA.
   Nel vecchio layout la vista Negozi era un riquadro `fixed` a tutto schermo:
   copriva il contenuto dell'e-commerce, e nessuno lo nascondeva davvero.
   Tolto il `fixed` (vedi sopra), quel contenuto e' riaffiorato sotto le
   giacenze — la barra dei periodi e il «Caricamento panoramica...» che
   comparivano anche nella scelta area. Qui si nasconde per davvero, e si
   mostra solo quando si e' nell'e-commerce. */
:root[data-portale] #premiumZone{ display: none !important; }
:root[data-portale][data-fdomain="ecommerce"] #premiumZone{ display: block !important; }
:root[data-portale]:not([data-fdomain="ecommerce"]) .main{ padding: 0 !important; }

/* LA SCHERMATA DI SCELTA RESPIRA, E IL TITOLO E' QUELLO DEL SITO.
   Modello: «I NOSTRI PUNTI DI FORZA» su lazootecnica.com/la-qualita — Raleway
   700 centrato, e sotto una barra arancione STACCATA di 150x10, non il filo
   attaccato che usano i titoli delle altre pagine. */
:root[data-portale][data-theme] .dc-h{
  display: block;
  text-align: center;
  font-family: var(--ztc-titoli);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ztc-navy);
  margin: 0 0 19px;
  padding: 0;
  border: 0;
}
:root[data-portale][data-theme] .dc-h::after{
  content: "";
  display: block;
  width: 150px;
  height: 10px;
  background: var(--ztc-orange);
  margin: 19px auto 0;
}
:root[data-portale][data-theme] .dc-sub{ text-align: center; margin-bottom: 44px; }
/* Aria sopra e sotto: la schermata aveva il respiro di un modulo, non di una
   pagina d'ingresso. Il footer resta comunque in fondo (il corpo e' a colonna),
   quindi qui si puo' allargare senza che nulla salti. */
/* L'aria e' quella di una pagina d'ingresso, non di un modulo: il blocco si
   prende almeno due terzi dello schermo e ci sta in mezzo, cosi' su un monitor
   alto le schede restano al centro invece di appoggiarsi in cima. */
:root[data-portale][data-theme] .dc-wrap{ padding: 130px 24px 150px; }
:root[data-portale][data-theme] .dc-card{ padding: 40px 30px; }

/* FINCHE' NON SI SCEGLIE L'AREA, IL CONTENUTO NON SI VEDE.
   Il portale segna l'area scelta con `data-fdomain` sull'<html>; senza quello
   siamo sulla schermata di scelta, e dietro le due schede non devono comparire
   ne' la barra dei filtri ne' il «Caricamento panoramica…» della vista che sta
   gia' caricando. Prima lo nascondeva l'interstitial, che copriva tutto perche'
   era fisso a tutto schermo: ora che sta nel flusso lo si dice qui, ed e' anche
   piu' onesto — quella roba non e' coperta, semplicemente non c'e'. */
/* ⚠️ QUI NON CI VA `.main`. Ci stava, e nascondeva anche il pannello degli
   strumenti amministratore, che vive dentro `.main`: il bottone «Admin» si
   premeva e non si apriva niente. A dover sparire e' solo il contenuto
   dell'e-commerce, ed e' `#premiumZone` — gia' nascosto poco sopra. */
:root[data-portale][data-theme]:not([data-fdomain="negozi"]):not([data-fdomain="ecommerce"]) #negoziView{
  display: none !important;
}

/* Il contenuto si prende lo spazio che avanza: cosi' il pie' di pagina resta in
   fondo anche con una pagina corta, e la colonna — che finisce dove comincia il
   footer — arriva in fondo invece di fermarsi a meta' schermo. */
/* `1 1 auto`, non `1 0 auto`: con flex-shrink a zero il contenuto non poteva
   rientrare e la pagina sforava di una ottantina di pixel — da cui una barra di
   scorrimento su una pagina che ci stava tutta. */
/* ⚠️ `min-height` legata al MENU, non a zero. La colonna finisce dove comincia
   il footer: se le sue voci sono piu' alte del contenuto (nove voci
   sull'e-commerce e una pagina corta), escono dal fondo e si vedono sopra il
   footer, sul logo. Tenendo il contenuto alto almeno quanto il menu, il
   footer scende sotto di lui e la colonna lo contiene. `--zpt-menu-h` la
   misura lo stesso script che misura il footer (templates/footer.php). */
:root[data-portale][data-theme] .main,
:root[data-portale][data-theme] .content,   /* Portale Agenti (28/10/2026): senza, su una pagina corta il menu copriva il footer */
:root[data-portale][data-theme] #negoziView{ flex: 1 1 auto; min-height: var(--zpt-menu-h, 0px); }
:root[data-portale][data-theme] #domainChooser{ flex: 1 1 auto; min-height: max(68vh, var(--zpt-menu-h, 0px)); }

/* --------------------------------------------------------------------------
   8. PIE' DI PAGINA — LO STESSO del portale ordini
      Le regole sono ricopiate da ZHF (modules/zootecheaderfooter/views/css/
      header-footer.css, blocco FOOTER) e il markup che vestono e' lo stesso:
      classi `zhf-*` emesse da _renderPortaleFooter(). Due differenze, entrambe
      volute:
        - qui i selettori sono prefissati, perche' questo foglio lo legge anche
          la dashboard interna e non deve cambiarle il pie' di pagina;
        - i colori sono quelli EFFETTIVI del negozio 2 (navy #001527, barra
          bassa navy), non i default del modulo, che sono azzurri.
      Se cambia il footer del B2B, si guarda quel file e si riporta qui: sono
      due sorgenti uguali, non piu' due disegni simili.
   -------------------------------------------------------------------------- */
:root[data-portale][data-theme] .zhf-footer,
:root[data-portale][data-theme] .zhf-footer *{ box-sizing: border-box; }
:root[data-portale][data-theme] .zhf-footer{
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  color: #1B2A38;
  /* ⚠️ Sul B2B queste due non sono del footer: le eredita dal `body` del tema
     PrestaShop (`letter-spacing:.5px`, interlinea 24px). Senza, le stesse
     parole occupano meno spazio e le righe sono piu' fitte: il footer sembra
     lo stesso ma non lo e'. Qui si dichiarano sul footer, che e' l'unico
     pezzo di portale che deve somigliare al negozio. */
  letter-spacing: .5px;
  line-height: 24px;
  /* le due righe che il modulo non ha: nella dashboard il footer sta in fondo
     alla PAGINA (mai `fixed`) e deve coprire anche la colonna di sinistra.
     ⚠️ NON `100vw`: quella misura comprende la barra di scorrimento verticale,
     e il footer sforava di una decina di pixel facendo comparire una barra
     ORIZZONTALE su tutta la pagina. */
  margin-top: auto;
  position: relative;
  z-index: 1;
  width: calc(100% + var(--zpt-col));
  margin-left: calc(-1 * var(--zpt-col));
}
:root[data-portale][data-theme] .zhf-container{ max-width: 1600px; margin: 0 auto; padding: 0 24px; }

/* ── fascia newsletter (solo se accesa da Marketing) ────────────────────── */
:root[data-portale][data-theme] .zhf-newsletter{
  background: var(--ztc-navy);
  padding: 50px 24px 0;
  position: relative;
  z-index: 2;
  color: #FFFFFF;
}
:root[data-portale][data-theme] .zhf-newsletter-inner{ padding-bottom: 28px; border-bottom: 2px solid #FFFFFF; }
:root[data-portale][data-theme] .zhf-nl-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
:root[data-portale][data-theme] .zhf-nl-left{ display: flex; align-items: center; gap: 24px; justify-content: flex-start; margin-left: 80px; }
:root[data-portale][data-theme] .zhf-nl-icon svg{ display: block; width: 80px; height: 80px; color: #FFFFFF; fill: #FFFFFF; }
:root[data-portale][data-theme] .zhf-newsletter .zhf-newsletter-title{
  margin: 0; color: #FFFFFF; font-weight: 700; font-size: 31px; line-height: 1.2;
  letter-spacing: 0; font-family: 'Nunito', system-ui, sans-serif; display: block;
}
:root[data-portale][data-theme] .zhf-nl-right{ display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
:root[data-portale][data-theme] .zhf-newsletter-form{ display: flex; width: 100%; flex-wrap: nowrap; }
:root[data-portale][data-theme] .zhf-newsletter-form input[type="email"]{
  flex: 1; height: 60px; padding: 0 20px; border: none; border-radius: 30px 0 0 30px;
  font-size: 16px; font-family: 'Nunito', inherit; outline: none; color: #1B2A38; text-align: left;
}
:root[data-portale][data-theme] .zhf-newsletter-form input::placeholder{ color: #8898A8; }
:root[data-portale][data-theme] .zhf-newsletter .zhf-newsletter-form button{
  background: var(--ztc-orange); color: #FFFFFF; border: none; height: 60px; padding: 5px 28px;
  border-radius: 0 30px 30px 0; font-weight: 700; font-size: 20px; font-family: 'Nunito', inherit;
  cursor: pointer; white-space: nowrap; transition: background-color .2s; box-shadow: none; text-transform: none;
}
:root[data-portale][data-theme] .zhf-newsletter .zhf-newsletter-form button:hover{ background: #FFB400; }
:root[data-portale][data-theme] .zhf-nl-gdpr-wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 12px; }
:root[data-portale][data-theme] .zhf-nl-gdpr-wrap .zhf-nl-gdpr{ grid-column: 2; }
:root[data-portale][data-theme] .zhf-nl-gdpr{ display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #FFFFFF; line-height: 1.4; }

/* ── corpo navy ─────────────────────────────────────────────────────────── */
:root[data-portale][data-theme] .zhf-footer-main{
  background: var(--ztc-navy);
  padding: 48px 24px 32px;
  color: #FFFFFF;
  position: relative;
}
:root[data-portale][data-theme] .zhf-footer-main,
:root[data-portale][data-theme] .zhf-footer-main *{ color: #FFFFFF; }
/* ⚠️ La griglia a 5 colonne del modulo QUI NON VALE: sul B2B il tema figlio la
   porta a flex, perche' la seconda colonna (banner delle certificazioni) e'
   spenta e senza di lei gli elenchi si schiacciavano a sinistra lasciando 350px
   di vuoto a destra. Queste sono le stesse identiche regole di
   themes/zootecnica_b2b/assets/css/zootecnica.css: il riquadro aziendale resta
   ancorato a sinistra, il gruppo degli elenchi si centra nello spazio che
   avanza (margini automatici sul primo e sull'ultimo). */
:root[data-portale][data-theme] .zhf-footer-grid{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* column-gap a zero: la spaziatura vale SOLO fra colonne di link (vedi sotto).
     Con un gap sul contenitore anche lo stacco azienda -> gruppo lo erediterebbe,
     e il gruppo finirebbe spostato a destra invece che centrato. */
  column-gap: 0;
  row-gap: 36px;
}
:root[data-portale][data-theme] .zhf-footer-grid > .zhf-foot-brand{ flex: 0 0 296px; }
:root[data-portale][data-theme] .zhf-footer-grid > .zhf-foot-col-acc{ flex: 0 1 auto; min-width: 190px; }
:root[data-portale][data-theme] .zhf-footer-grid > .zhf-foot-col-acc + .zhf-foot-col-acc{ margin-left: clamp(48px, 7vw, 130px); }
:root[data-portale][data-theme] .zhf-footer-grid > .zhf-foot-brand + .zhf-foot-col-acc{ margin-left: auto; }
:root[data-portale][data-theme] .zhf-footer-grid > .zhf-foot-col-acc:last-child{ margin-right: auto; }
:root[data-portale][data-theme] .zhf-foot-col{ color: rgba(255, 255, 255, .85); }
:root[data-portale][data-theme] .zhf-foot-logo{ display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
:root[data-portale][data-theme] .zhf-foot-logo img{ display: block; width: auto; height: 52px; }
:root[data-portale][data-theme] .zhf-foot-company-name{
  color: #FFFFFF; font-weight: 800; font-size: 17px; margin-top: 6px; margin-bottom: 4px; line-height: 1.2;
}
:root[data-portale][data-theme] .zhf-foot-address{ font-size: 14px; font-weight: 500; line-height: 1.7; color: #FFFFFF; margin-top: 6px; }
:root[data-portale][data-theme] .zhf-foot-address div{ color: #FFFFFF; font-weight: 500; }
:root[data-portale][data-theme] .zhf-foot-email{ margin-top: 4px; }
:root[data-portale][data-theme] .zhf-foot-email a{ color: #FFFFFF; font-weight: 600; text-decoration: none; }
:root[data-portale][data-theme] .zhf-foot-email a:hover{ color: #FFFFFF; text-decoration: underline; }
:root[data-portale][data-theme] .zhf-foot-vat{ color: #FFFFFF; font-weight: 600; }
:root[data-portale][data-theme] .zhf-footer-main a,
:root[data-portale][data-theme] .zhf-footer-main a:hover,
:root[data-portale][data-theme] .zhf-footer-main a:visited{ color: #FFFFFF; }

/* Gli elenchi sono <details>: su desktop il CSS li tiene aperti e spegne il
   clic sul titolo; sotto i 1024px diventano una fisarmonica, come sul B2B. */
:root[data-portale][data-theme] details.zhf-foot-col-acc{ display: block; margin: 0; padding: 0; }
:root[data-portale][data-theme] details.zhf-foot-col-acc > .zhf-foot-col-links{ display: block; }
:root[data-portale][data-theme] .zhf-foot-col-title{
  font-weight: 800; font-size: 16px; color: #FFFFFF;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px;
}
:root[data-portale][data-theme] summary.zhf-foot-col-title{ list-style: none; cursor: default; }
:root[data-portale][data-theme] summary.zhf-foot-col-title::-webkit-details-marker{ display: none; }
:root[data-portale][data-theme] summary.zhf-foot-col-title::marker{ display: none; }
:root[data-portale][data-theme] .zhf-foot-col-rule{
  display: block; width: 170px; max-width: 100%; height: 3px;
  margin: -6px 0 18px;   /* il titolo ha gia' 18px sotto: lo si recupera */
  border-radius: 2px;
}
:root[data-portale][data-theme] .zhf-foot-link{
  display: block; font-size: 14px; font-weight: 600; color: #FFFFFF;
  text-decoration: none; padding: 5px 0; transition: opacity .15s;
}
:root[data-portale][data-theme] .zhf-foot-link:hover{ color: #FFFFFF; opacity: .8; }

/* ── barra bassa ────────────────────────────────────────────────────────── */
:root[data-portale][data-theme] .zhf-bottom{
  background: var(--ztc-navy);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 12px 24px;
  color: rgba(255, 255, 255, .55);
}
:root[data-portale][data-theme] .zhf-bottom-inner{
  display: grid; grid-template-columns: 1fr 200px; align-items: center; gap: 24px;
}
:root[data-portale][data-theme] .zhf-bottom-left{
  font-family: 'Nunito', system-ui, sans-serif; font-size: 12px; font-weight: 700;
  line-height: 1.25; color: rgba(255, 255, 255, .62);
}
:root[data-portale][data-theme] .zhf-bottom-left p{ margin: 0; padding: 0; line-height: 1.25; }
/* i link della barra (la versione) erano viola: il colore di default del
   browser per i visitati. Nel modulo sono grigio chiaro, e schiariscono. */
:root[data-portale][data-theme] .zhf-bottom-left a{ color: #DCDCE0; text-decoration: none; font-weight: 700; }
:root[data-portale][data-theme] .zhf-bottom-left a:hover{ color: #FFFFFF; }
:root[data-portale][data-theme] .zhf-bottom-right{
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 200px;
}
:root[data-portale][data-theme] .zhf-bottom-text{ font-size: 10px; color: rgba(255, 255, 255, .45); }
:root[data-portale][data-theme] .zhf-bottom-text a{ color: rgba(255, 255, 255, .45); text-decoration: none; }
:root[data-portale][data-theme] .zhf-bottom-text a:hover{ color: #FFFFFF; }
:root[data-portale][data-theme] .zhf-bottom-logo{ background: transparent; padding: 0; display: flex; align-items: center; gap: 6px; }
:root[data-portale][data-theme] .zhf-bottom-logo img{ display: block; width: auto; height: 34px; }

/* ── responsive, come sul portale ordini ────────────────────────────────── */
@media (max-width: 1024px) {
  /* sotto i 1024px il footer va a capo: i margini automatici creerebbero
     scalini, quindi si tolgono e le colonne tornano a scorrere (come sul B2B) */
  :root[data-portale][data-theme] .zhf-footer-grid > .zhf-foot-brand{ flex: 1 1 100%; text-align: center; padding-bottom: 24px; }
  :root[data-portale][data-theme] .zhf-footer-grid > .zhf-foot-brand + .zhf-foot-col-acc,
  :root[data-portale][data-theme] .zhf-footer-grid > .zhf-foot-col-acc:last-child{ margin-left: 0; margin-right: 0; }
  :root[data-portale][data-theme] .zhf-footer-grid > .zhf-foot-col-acc + .zhf-foot-col-acc{ margin-left: 36px; }
  :root[data-portale][data-theme] .zhf-foot-logo{ justify-content: center; }
  :root[data-portale][data-theme] .zhf-foot-company-name,
  :root[data-portale][data-theme] .zhf-foot-address{ text-align: center; }
  /* ⚠️ `width:100%` e `margin:0` con !important come nel modulo: senza, il
     margine di 36px fra colonne (che qui non serve piu', sono righe intere)
     rientrava la seconda colonna di 36px e le due liste non erano allineate. */
  :root[data-portale][data-theme] details.zhf-foot-col-acc{
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    margin: 0 !important;
  }
  :root[data-portale][data-theme] details.zhf-foot-col-acc > .zhf-foot-col-links{ display: none; padding-bottom: 14px; }
  :root[data-portale][data-theme] details.zhf-foot-col-acc[open] > .zhf-foot-col-links{ display: block; }
  :root[data-portale][data-theme] .zhf-foot-col-rule{ display: none; }
  :root[data-portale][data-theme] summary.zhf-foot-col-title{
    cursor: pointer; pointer-events: auto; padding: 16px 4px; margin-bottom: 0; font-size: 14px;
    display: flex; justify-content: space-between; align-items: center; user-select: none;
  }
  :root[data-portale][data-theme] summary.zhf-foot-col-title::after{
    content: ''; width: 9px; height: 9px;
    border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF;
    transform: rotate(45deg); transition: transform .2s ease; margin-right: 6px;
  }
  :root[data-portale][data-theme] details.zhf-foot-col-acc[open] summary.zhf-foot-col-title::after{
    transform: rotate(-135deg); margin-bottom: -4px;
  }
  :root[data-portale][data-theme] .zhf-foot-link{ padding: 8px 4px; font-size: 14px; }
  :root[data-portale][data-theme] .zhf-nl-grid,
  :root[data-portale][data-theme] .zhf-nl-gdpr-wrap{ grid-template-columns: 1fr; }
  :root[data-portale][data-theme] .zhf-nl-left{ margin-left: 0; justify-content: center; }
  :root[data-portale][data-theme] .zhf-nl-gdpr-wrap .zhf-nl-gdpr{ grid-column: 1; }
}
@media (min-width: 1025px) {
  /* su desktop niente fisarmonica: aperti e titolo non cliccabile */
  :root[data-portale][data-theme] details.zhf-foot-col-acc > .zhf-foot-col-links{ display: block; }
  :root[data-portale][data-theme] summary.zhf-foot-col-title{ cursor: default; pointer-events: none; }
}

/* --------------------------------------------------------------------------
   9. PAGINA DI ACCESSO
      Il login dell'hub disegna il bottone con un gradiente ambra scritto a
      mano: il colore piatto non basta, va azzerato anche background-image.
   -------------------------------------------------------------------------- */
:root[data-portale][data-theme] .login-card{
  border-radius: 0;
  border: 1px solid var(--ztc-filo);
  box-shadow: 0 1px 2px rgba(16,32,48,.05), 0 10px 34px rgba(16,32,48,.07);
}
:root[data-portale][data-theme] .login-card .title{
  font-family: var(--ztc-titoli);
  font-weight: 900;
  /* ⚠️ Il nome del portale era dipinto con un GRADIENTE indaco ritagliato sul
     testo (`background-clip: text`): per questo usciva viola e il `color` non
     lo cambiava — il colore del testo e' trasparente, comanda il riempimento.
     Servono tutte e tre le righe. */
  background-image: none !important;
  color: var(--ztc-navy) !important;
  -webkit-text-fill-color: var(--ztc-navy) !important;
}
/* Le tre macchie sfocate dietro la scheda erano ambra, viola e ciano: i colori
   della dashboard. Restano tre macchie, ma di casa. */
:root[data-portale][data-theme] .login-orb--1{ background: rgba(240, 125, 0, .55) !important; }
:root[data-portale][data-theme] .login-orb--2{ background: rgba(0, 21, 39, .38) !important; }
:root[data-portale][data-theme] .login-orb--3{ background: rgba(240, 125, 0, .30) !important; }
/* i campi avevano il filo grigio della dashboard */
:root[data-portale][data-theme] .login-field input{ border-color: var(--ztc-filo); }
:root[data-portale][data-theme] .login-card .sub{ color: var(--ztc-tenue); }
:root[data-portale][data-theme] .login-submit{
  background-image: none;
  background: var(--ztc-orange);
  border: 1px solid var(--ztc-orange);
  border-radius: 0;
  font-family: var(--ztc-titoli);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
:root[data-portale][data-theme] .login-submit:hover{ background: var(--ztc-orangeDk); border-color: var(--ztc-orangeDk); }
:root[data-portale][data-theme] .login-field input,
:root[data-portale][data-theme] .login-sso{ border-radius: 0; }
:root[data-portale][data-theme] .login-sep{ font-family: var(--ztc-titoli); letter-spacing: .12em; }
:root[data-portale][data-theme] .login-theme-toggle{ display: none !important; }

/* --------------------------------------------------------------------------
   10. SCHERMI STRETTI (tablet e telefono, 12/9/2026)
      Testata compatta, fascia menu che scorre, la COLONNA diventa un cassetto
      che si apre dall'hamburger (stessa markup: niente doppioni di menu).
   -------------------------------------------------------------------------- */
:root[data-portale][data-theme] .zpt-burger,
:root[data-portale][data-theme] .zpt-col-head,
:root[data-portale][data-theme] .zpt-scrim{ display: none; }
/* CASSETTO ANCHE SU TABLET IN ORIZZONTALE (14/9/2026): su qualsiasi schermo touch fino a 1400px
   (iPad in landscape = 1024-1366px) la colonna sta dietro l'hamburger, come in verticale.
   Su PC con finestra stretta vale comunque il limite dei 900px. */
@media (max-width: 900px), ((hover: none) and (pointer: coarse) and (max-width: 1400px)){
  :root[data-portale][data-theme]{ --zpt-col: 0px; }
  :root[data-portale][data-theme] .zpt-hd{ gap: 10px; }
  :root[data-portale][data-theme] .zpt-burger{
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; border: 0; border-radius: 10px; background: rgba(255,255,255,.16);
    color: #FFF; font-size: 22px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* colonna → cassetto */
  :root[data-portale][data-theme] .zpt-col{
    display: block; position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw);
    transform: translateX(-104%); transition: transform .22s ease; z-index: 960;
    overflow-y: auto; padding-bottom: 24px; box-shadow: 0 0 40px rgba(0,0,0,.35);
  }
  :root[data-zdrawer="1"][data-portale][data-theme] .zpt-col{ transform: none; }
  :root[data-portale][data-theme] .zpt-col-fix{ position: static; }
  :root[data-portale][data-theme] .zpt-col-head{
    display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.12); font-family: var(--ztc-titoli); font-weight: 900;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6);
  }
  :root[data-portale][data-theme] .zpt-col-head button{ border: 0; background: rgba(255,255,255,.12); color: #FFF; width: 34px; height: 34px; border-radius: 8px; font-size: 14px; cursor: pointer; }
  :root[data-portale][data-theme] .zpt-col .dr-item{ min-height: 46px; font-size: 14px; }
  :root[data-portale][data-theme] .zpt-scrim{ position: fixed; inset: 0; background: rgba(12,36,56,.55); z-index: 950; }
  :root[data-zdrawer="1"][data-portale][data-theme] .zpt-scrim{ display: block; }
  :root[data-zdrawer="1"] body{ overflow: hidden; }
}
@media (max-width: 900px){
  :root[data-portale][data-theme]{ --zpt-gut: 14px; --zpt-hd: 60px; --zpt-nav: 44px; --zpt-bc: 36px; }
  /* testata */
  :root[data-portale][data-theme] .zpt-hd{ gap: 10px; padding: 0 10px 0 6px; }
  :root[data-portale][data-theme] .zpt-logo img{ height: 34px; }
  :root[data-portale][data-theme] .zpt-tit .a{ font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root[data-portale][data-theme] .zpt-tit .b{ display: none; }
  :root[data-portale][data-theme] .zpt-az{ gap: 6px; }
  :root[data-portale][data-theme] .zpt-az .btn,
  :root[data-portale][data-theme] .zpt-az .user-btn{ padding: 8px 10px; font-size: 10px; letter-spacing: .02em; min-height: 36px; }   /* 36px: area di tocco */
  /* nome utente e etichette lunghe: solo l'icona */
  :root[data-portale][data-theme] .zpt-az .user-btn strong,
  :root[data-portale][data-theme] .zpt-az .agsim-btn strong,
  :root[data-portale][data-theme] .zpt-az .btn .btn-label{ display: none; }
  :root[data-portale][data-theme] .user-dropdown{ right: 6px; min-width: 260px; max-width: calc(100vw - 12px); }
  /* fascia menu: scorre in orizzontale, niente a capo */
  :root[data-portale][data-theme] .zpt-nav-in{ gap: 18px; padding: 0 var(--zpt-gut); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  :root[data-portale][data-theme] .zpt-nav-in::-webkit-scrollbar{ display: none; }
  :root[data-portale][data-theme] .zpt-nav-link{ font-size: 12px; white-space: nowrap; flex: none; }
  /* briciole */
  :root[data-portale][data-theme] .zpt-bc-in{ padding-left: var(--zpt-gut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* contenuto: niente scorrimento orizzontale della pagina, le tabelle scorrono da sole */
  :root[data-portale][data-theme] body{ overflow-x: hidden; }
  :root[data-portale][data-theme] .content{ padding-left: var(--zpt-gut); padding-right: var(--zpt-gut); }
  /* pannello strumenti admin (fornitori) e simulazione (agenti): a tutta larghezza */
  :root[data-portale][data-theme] .admin-tools,
  :root[data-portale][data-theme] .agsim-panel{ top: calc(var(--zpt-hd) + 6px); right: 6px; left: 6px; width: auto; max-width: none; }
}
@media (max-width: 480px){
  :root[data-portale][data-theme] .zpt-tit{ display: none; }   /* sul telefono resta il logo: il nome del portale sta nella briciola */
}

/* --------------------------------------------------------------------------
   11. PAGINE DEL PORTALE AGENTI SU TELEFONO E TABLET (12/9/2026)
      Le classi qui sotto (.tile .door .hero .mini .tabs .fl .tw .pan …) esistono
      solo nelle pagine di /agenti/ e nel foglio preventivi: nessun conflitto con
      Fornitori e Assistenza IT (verificato con grep sui sorgenti resi).
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  :root[data-portale][data-theme] .content{ padding-top: 16px; }
  :root[data-portale][data-theme] .tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root[data-portale][data-theme] .tile{ padding: 28px 12px 12px; min-height: 0; }
  :root[data-portale][data-theme] .tile .v{ font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root[data-portale][data-theme] .grid2, :root[data-portale][data-theme] .grid3, :root[data-portale][data-theme] .below{ grid-template-columns: 1fr; }
  /* home */
  :root[data-portale][data-theme] .wp{ grid-template-columns: 1fr; border-radius: 16px; }
  :root[data-portale][data-theme] .wl{ padding: 20px 16px 18px; }
  :root[data-portale][data-theme] .wl h1{ font-size: 22px; }
  :root[data-portale][data-theme] .kstrip{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :root[data-portale][data-theme] .k{ padding: 9px 10px; min-width: 0; }
  :root[data-portale][data-theme] .k .v{ font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root[data-portale][data-theme] .wl .door{ gap: 12px; padding: 14px 10px; margin: 0 -10px; }
  :root[data-portale][data-theme] .dic{ width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
  :root[data-portale][data-theme] .dt{ font-size: 16px; }
  :root[data-portale][data-theme] .dd{ font-size: 12.5px; }
  :root[data-portale][data-theme] .dgo{ width: 36px; height: 36px; font-size: 16px; }
  :root[data-portale][data-theme] .wr{ padding: 20px 16px 16px; max-height: none; }
  /* scheda cliente */
  :root[data-portale][data-theme] .hero{ grid-template-columns: 1fr; padding: 16px 14px; border-radius: 14px; }
  :root[data-portale][data-theme] .hero h2{ font-size: 18px; }
  :root[data-portale][data-theme] .hero .acts{ justify-content: flex-start; }
  :root[data-portale][data-theme] .mini{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :root[data-portale][data-theme] .mini .k{ min-width: 0; }
  :root[data-portale][data-theme] .tabs{ margin: 14px 0 12px; gap: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  :root[data-portale][data-theme] .tabs::-webkit-scrollbar{ display: none; }
  :root[data-portale][data-theme] .tab{ padding: 9px 11px; font-size: 12.5px; }
  :root[data-portale][data-theme] .dl{ grid-template-columns: 1fr; }
  :root[data-portale][data-theme] .dl div span:first-child{ min-width: 120px; }
  :root[data-portale][data-theme] .sedi{ grid-template-columns: 1fr; }
  /* filtri e ricerca */
  :root[data-portale][data-theme] .fl input, :root[data-portale][data-theme] .fl select{ min-width: 0 !important; width: 100%; font-size: 16px; }   /* 16px: iOS non zooma i campi */
  :root[data-portale][data-theme] .fl{ gap: 8px; }
  :root[data-portale][data-theme] .fl input[id="fQ"], :root[data-portale][data-theme] .fl input[id="fItem"], :root[data-portale][data-theme] .fl input[id="fItemC"]{ flex: 1 1 100%; }
  :root[data-portale][data-theme] .fl select{ flex: 1 1 45%; }
  :root[data-portale][data-theme] .chips{ width: 100%; }
  :root[data-portale][data-theme] #acItem, :root[data-portale][data-theme] #acItemC, :root[data-portale][data-theme] #acCli{ width: calc(100vw - 28px) !important; left: 0; }
  /* modali a tutto schermo */
  :root[data-portale][data-theme] .ov{ padding: 0; align-items: stretch; }
  :root[data-portale][data-theme] .mb{ max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; }
  :root[data-portale][data-theme] .mbody{ padding: 12px 14px; }
  :root[data-portale][data-theme] .mf{ padding: 10px 14px; flex-wrap: wrap; }
  /* pulsanti e tocco */
  :root[data-portale][data-theme] .btn{ min-height: 40px; }
  :root[data-portale][data-theme] .btn.btn-sm{ min-height: 34px; }
  /* foglio preventivi: toolbar compatta */
  :root[data-portale][data-theme] .pvt{ padding: 10px; }
  :root[data-portale][data-theme] .pvs-bar input, :root[data-portale][data-theme] .pvs-bar select{ font-size: 16px; }
  :root[data-portale][data-theme] .pvt-inp{ font-size: 16px !important; }
  :root[data-portale][data-theme] .pvs-eb{ min-height: 30px; padding: 5px 12px; }
}
@media (max-width: 700px){
  /* TABELLE → SCHEDE: una riga = una scheda, ogni cella con l'etichetta della colonna */
  :root[data-portale][data-theme] .tw table[data-zcards], :root[data-portale][data-theme] .pvs-tblwrap table[data-zcards], :root[data-portale][data-theme] .table-wrap table[data-zcards]{ display: block; width: 100%; }
  :root[data-portale][data-theme] table[data-zcards] thead{ display: none; }
  :root[data-portale][data-theme] table[data-zcards] tbody{ display: block; }
  :root[data-portale][data-theme] table[data-zcards] tr{ display: block; padding: 10px 12px; border-bottom: 1px solid var(--border); background: none !important; }
  :root[data-portale][data-theme] table[data-zcards] tr:last-child{ border-bottom: 0; }
  :root[data-portale][data-theme] table[data-zcards] td{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 6px; padding: 3px 0; border: 0; text-align: right; font-size: 13px; white-space: normal; max-width: none; }
  :root[data-portale][data-theme] table[data-zcards] td::before{ content: attr(data-l); flex: none; margin-right: auto; min-width: 78px; max-width: 45%; text-align: left; color: var(--dim); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; padding-top: 2px; }
  :root[data-portale][data-theme] table[data-zcards] td > div{ flex: 1 1 100%; text-align: right; }
  /* tabelle senza intestazione (Da fare, Ultimi ordini, Cosa serve attenzione): le celle scorrono come testo */
  :root[data-portale][data-theme] table[data-zcards="flow"] tr{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  :root[data-portale][data-theme] table[data-zcards="flow"] td{ display: block; padding: 0; text-align: left; flex: 0 1 auto; }
  :root[data-portale][data-theme] table[data-zcards="flow"] td::before{ display: none; }
  :root[data-portale][data-theme] table[data-zcards="flow"] td:nth-child(2){ flex: 1 1 60%; }
  :root[data-portale][data-theme] table[data-zcards="flow"] td.r, :root[data-portale][data-theme] table[data-zcards="flow"] td:last-child{ margin-left: auto; text-align: right; }
  :root[data-portale][data-theme] table[data-zcards="flow"] td > div{ display: inline; }
  :root[data-portale][data-theme] table[data-zcards] td[data-l=""]::before{ display: none; }
  :root[data-portale][data-theme] table[data-zcards] td[data-l=""]{ justify-content: flex-end; gap: 6px; padding-top: 6px; }
  :root[data-portale][data-theme] table[data-zcards] td[data-l=""] button, :root[data-portale][data-theme] table[data-zcards] td[data-l=""] .btn{ min-height: 34px; padding: 6px 12px; }   /* area di tocco */
  :root[data-portale][data-theme] table[data-zcards] td.empty, :root[data-portale][data-theme] table[data-zcards] td .empty{ justify-content: center; text-align: center; }
  :root[data-portale][data-theme] table[data-zcards] td .code{ font-size: 12px; }
  :root[data-portale][data-theme] table[data-zcards] td > div.dim{ display: inline; }
  /* la prima cella e' il titolo della scheda quando contiene il cliente o il numero */
  :root[data-portale][data-theme] table[data-zcards] td:first-child{ font-weight: 600; }
  /* lo scroll orizzontale del wrapper non serve piu' */
  :root[data-portale][data-theme] .tw, :root[data-portale][data-theme] .pvs-tblwrap{ overflow-x: visible; }
  :root[data-portale][data-theme] .tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tablet: nelle liste larghe si nascondono le colonne meno utili (restano nella scheda) */
@media (min-width: 701px) and (max-width: 1024px){
  :root[data-portale][data-theme] .tw [data-l="Pagamento"], :root[data-portale][data-theme] .tw [data-l="Punto vendita"], :root[data-portale][data-theme] .tw [data-l="Canale"],
  :root[data-portale][data-theme] .tw [data-l="Mag."], :root[data-portale][data-theme] .tw [data-l="Origine"], :root[data-portale][data-theme] .tw [data-l="Riferimento"],
  :root[data-portale][data-theme] .pvs-tblwrap [data-l="Agente"], :root[data-portale][data-theme] .pvs-tblwrap [data-l="Offerta EIDOS"], :root[data-portale][data-theme] .pvs-tblwrap [data-l="Intestazione"]{ display: none; }
  /* numeri documento e importi non vanno a capo */
  :root[data-portale][data-theme] .tw [data-l="Numero"], :root[data-portale][data-theme] .tw [data-l="Data"], :root[data-portale][data-theme] .tw [data-l="Totale"], :root[data-portale][data-theme] .tw [data-l="Imponibile"], :root[data-portale][data-theme] .tw [data-l="Importo"], :root[data-portale][data-theme] .tw [data-l="Residuo"], :root[data-portale][data-theme] .tw [data-l="Scadenza"]{ white-space: nowrap; }
}
@media (max-width: 420px){
  :root[data-portale][data-theme] .tiles{ grid-template-columns: 1fr 1fr; }
  :root[data-portale][data-theme] .tile .v{ font-size: 17px; }
}

/* Home agenti con colonna laterale e finestra media (PC 1000-1280px): le 4 tessere del portafoglio
   si dispongono da sole in base allo spazio, invece di sbordare */
@media (min-width: 901px) and (max-width: 1280px){
  :root[data-portale][data-theme] .kstrip{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* --------------------------------------------------------------------------
   12. FORNITORI E ASSISTENZA IT SU TELEFONO E TABLET (12/9/2026)
      Le pagine hanno gia' le loro media query; qui solo cio' che mancava:
      tessere a due colonne, prima colonna delle tabelle larghe che resta ferma
      nello scorrimento, gruppi di pulsanti che vanno a capo, campi a 16px.
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  :root[data-portale][data-theme] .dkpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  :root[data-portale][data-theme] .dkpi{ padding: 12px 12px !important; min-width: 0; }
  :root[data-portale][data-theme] .dkpi-v{ font-size: 20px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root[data-portale][data-theme] .dkpi-ic{ display: none !important; }
  :root[data-portale][data-theme] .cc-period, :root[data-portale][data-theme] .preset-btn{ flex-wrap: wrap; }
  :root[data-portale][data-theme] .tbl-wrap, :root[data-portale][data-theme] .geo-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  :root[data-portale][data-theme] .tbl-wrap table th:first-child, :root[data-portale][data-theme] .tbl-wrap table td:first-child{
    position: sticky; left: 0; z-index: 2; background: var(--card); box-shadow: 2px 0 0 var(--border);
  }
  :root[data-portale][data-theme] .tbl-wrap table thead th{ position: sticky; top: 0; }
  :root[data-portale][data-theme] .tbl-wrap table thead th:first-child{ z-index: 3; }
  :root[data-portale][data-theme] input[type="text"], :root[data-portale][data-theme] input[type="search"], :root[data-portale][data-theme] select, :root[data-portale][data-theme] textarea{ font-size: 16px; }
  /* Assistenza IT: finestre a tutto schermo e pulsanti pieni */
  :root[data-portale][data-theme] .modal-box{ width: 100% !important; max-width: none !important; max-height: 100vh !important; height: 100%; border-radius: 0 !important; }
  :root[data-portale][data-theme] .modal-overlay{ padding: 0 !important; align-items: stretch !important; }
  :root[data-portale][data-theme] .modal-actions{ flex-wrap: wrap; }
  :root[data-portale][data-theme] .modal-actions .btn, :root[data-portale][data-theme] .modal-actions button{ flex: 1 1 45%; }
  /* filtri Fornitori con stile inline o id: 16px cosi' iOS non zooma */
  :root[data-portale][data-theme] #nzWh, :root[data-portale][data-theme] #nzQ, :root[data-portale][data-theme] #nzsQ, :root[data-portale][data-theme] #categoryFilter,
  :root[data-portale][data-theme] .nz-f select, :root[data-portale][data-theme] .nz-f input{ font-size: 16px !important; }
}
/* Panoramica e-commerce «Come si muovono i tuoi prodotti»: il nome non si restringeva e la colonna sbordava */
:root[data-portale][data-theme] .ov-mrow .ov-mname{ min-width: 0; flex: 1 1 auto; }
:root[data-portale][data-theme] .ov-movers > div{ min-width: 0; }   /* la colonna della griglia non deve allargarsi al testo */
@media (max-width: 480px){
  :root[data-portale][data-theme] .stats-kpi{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* --------------------------------------------------------------------------
   13. IMPORTI SU UNA RIGA (14/9/2026)
      «100» e «€» non vanno mai su due righe: i valori delle tessere stanno su una riga e la
      dimensione segue la larghezza della tessera (container query: piu' stretta la tessera,
      piu' piccolo il numero); le celle numeriche delle tabelle non vanno a capo. Nel JS il
      simbolo e' legato al numero con lo spazio unificatore (fmtE, fmtEur).
   -------------------------------------------------------------------------- */
:root[data-portale][data-theme] .tile, :root[data-portale][data-theme] .k, :root[data-portale][data-theme] .mini .k, :root[data-portale][data-theme] .dkpi{ container-type: inline-size; }   /* niente min-width qui: .mini .k tiene i suoi 130px */
:root[data-portale][data-theme] .tile .v, :root[data-portale][data-theme] .k .v, :root[data-portale][data-theme] .mini .k .v, :root[data-portale][data-theme] .dkpi-v{ white-space: nowrap; overflow: hidden; text-overflow: clip; }
@supports (font-size: 1cqi){
  :root[data-portale][data-theme] .tile .v{ font-size: clamp(13px, 9.5cqi, 23px); }
  :root[data-portale][data-theme] .k .v, :root[data-portale][data-theme] .mini .k .v{ font-size: clamp(12px, 9.5cqi, 18px); }
  :root[data-portale][data-theme] .dkpi-v{ font-size: clamp(14px, 9.5cqi, 24px) !important; }
}
:root[data-portale][data-theme] .tw td.r, :root[data-portale][data-theme] .tw td.mono, :root[data-portale][data-theme] .pvs-tblwrap td.r{ white-space: nowrap; }