/* Prodotti – Farmacia Ciacco.
   Design system Farmacia Ciacco (refresh 2026, token --fc-*): verde pieno solo
   come superficie con testo bianco, carta per i fondi morbidi (mai verde tenue
   sulla carta), sole solo per evidenziare (le parti del foglietto), corallo
   solo per errori ed esclusioni. Nunito per titoli e numeri, Nunito Sans per i
   testi. Tema scuro con i valori --fc-scuro-*: segue il dispositivo, oppure la
   scelta fatta nell'app (data-theme su <html>).
   Disposizione: una ricerca sola in alto, filtri a chip sotto, risultati a
   riga; da 900px i filtri diventano una colonna a sinistra. */

@font-face { font-family: "Nunito"; src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("fonts/nunito-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --fc-verde-500: #23b59f; --fc-verde-600: #128f80; --fc-verde-700: #0d746b; --fc-verde-800: #005b56; --fc-verde-900: #074544;
  --fc-carta-50: #fcfaf4; --fc-carta-100: #f7f2e7; --fc-carta-200: #ede6d6; --fc-carta-300: #dfd5c0;
  --fc-inchiostro-900: #1d2927; --fc-inchiostro-800: #2f3e3b; --fc-inchiostro-600: #5b6d6a; --fc-inchiostro-400: #a0aeac;
  --fc-sole-100: #fff4c7; --fc-sole-200: #fdea9c; --fc-sole-700: #b7810f; --fc-sole-800: #8c5e1a;
  --fc-corallo-50: #fff4f0; --fc-corallo-100: #ffe7de; --fc-corallo-700: #b43220;

  --pagina: var(--fc-carta-50); --superficie: #ffffff; --riquadro: var(--fc-carta-100); --hover: var(--fc-carta-200);
  --bordo: var(--fc-carta-200); --bordo-forte: var(--fc-carta-300);
  --testo: var(--fc-inchiostro-900); --testo-2: var(--fc-inchiostro-800); --muto: var(--fc-inchiostro-600);
  --verde-testo: var(--fc-verde-700); --verde-forte: var(--fc-verde-800); --verde-pieno: var(--fc-verde-700);
  --barra: var(--fc-verde-800); --su-verde: #ffffff; --su-verde-muto: #d8f1ec;
  --evidenza: var(--fc-sole-200); --evidenza-testo: var(--fc-inchiostro-900);
  --importante-fondo: var(--fc-sole-100); --importante-testo: var(--fc-sole-800);
  --pallino-v: var(--fc-verde-600); --pallino-g: var(--fc-sole-700); --pallino-r: var(--fc-inchiostro-400);
  --errore: var(--fc-corallo-700); --errore-fondo: var(--fc-corallo-50); --errore-bordo: var(--fc-corallo-100);
  --ombra: 0 1px 2px rgba(14, 24, 23, .06), 0 8px 24px rgba(14, 24, 23, .08);
  --anello: 0 0 0 2px var(--pagina), 0 0 0 5px var(--fc-verde-700);
  --font-titoli: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-testo: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pagina: #0e1817; --superficie: #1d2927; --riquadro: #2a3835; --hover: rgba(235, 242, 240, .08);
    --bordo: rgba(235, 242, 240, .09); --bordo-forte: rgba(235, 242, 240, .16);
    --testo: #ebf2f0; --testo-2: #d9e2e0; --muto: #a0aeac;
    --verde-testo: #7fdec9; --verde-forte: #b0eadd;
    --evidenza: rgba(251, 211, 44, .26); --evidenza-testo: #ebf2f0;
    --importante-fondo: rgba(248, 202, 16, .13); --importante-testo: #fddf69;
    --pallino-v: #48cbb5; --pallino-g: #fbd32c; --pallino-r: #7a8a87;
    --errore: #f98c6c; --errore-fondo: rgba(239, 95, 59, .12); --errore-bordo: rgba(239, 95, 59, .3);
    --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
    --anello: 0 0 0 2px var(--pagina), 0 0 0 5px #48cbb5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pagina: #0e1817; --superficie: #1d2927; --riquadro: #2a3835; --hover: rgba(235, 242, 240, .08);
  --bordo: rgba(235, 242, 240, .09); --bordo-forte: rgba(235, 242, 240, .16);
  --testo: #ebf2f0; --testo-2: #d9e2e0; --muto: #a0aeac;
  --verde-testo: #7fdec9; --verde-forte: #b0eadd;
  --evidenza: rgba(251, 211, 44, .26); --evidenza-testo: #ebf2f0;
  --importante-fondo: rgba(248, 202, 16, .13); --importante-testo: #fddf69;
  --pallino-v: #48cbb5; --pallino-g: #fbd32c; --pallino-r: #7a8a87;
  --errore: #f98c6c; --errore-fondo: rgba(239, 95, 59, .12); --errore-bordo: rgba(239, 95, 59, .3);
  --ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  --anello: 0 0 0 2px var(--pagina), 0 0 0 5px #48cbb5;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pagina); color: var(--testo); font: 400 1rem/1.5 var(--font-testo); min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3 { font-family: var(--font-titoli); font-weight: 850; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.12rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .6em; }
a { color: var(--verde-testo); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--anello); border-radius: 6px; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.piccola { width: 1rem; height: 1rem; }
.nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muto { color: var(--muto); }
.piccolo { font-size: .86rem; }
.salta { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--superficie); color: var(--testo); padding: 10px 14px; border-radius: 10px; }
.salta:focus { top: 8px; }

/* --- barra e schede --- */
.barra { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  background: var(--barra); color: var(--su-verde); }
.marchio { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-height: 44px; }
.marchio svg { width: 26px; height: 26px; color: var(--fc-carta-50); flex: none; }
.marchio strong { display: block; font-family: var(--font-titoli); font-weight: 900; font-size: 1.08rem; line-height: 1.1; }
.marchio span { display: block; font-size: .76rem; color: var(--su-verde-muto); }
.voci { display: none; gap: 4px; }
.voci a, .tasto-barra { color: var(--su-verde); text-decoration: none; font-weight: 800; font-size: .92rem; padding: 8px 12px; border-radius: 999px;
  display: inline-flex; gap: 6px; align-items: center; min-height: 44px; background: none; border: 0; cursor: pointer; }
.voci a[aria-current="page"] { background: rgba(255, 255, 255, .16); }
.voci a:hover, .tasto-barra:hover { background: rgba(255, 255, 255, .1); }
.azioni-barra { display: flex; gap: 2px; align-items: center; }
.conta { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--fc-carta-50); color: var(--fc-verde-900); font-size: .72rem; line-height: 20px; text-align: center; font-weight: 900; }
.schede { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: var(--superficie); border-top: 1px solid var(--bordo);
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.schede a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; min-height: 58px; font-size: .76rem; font-weight: 800; color: var(--muto); text-decoration: none; position: relative; }
.schede a[aria-current="page"] { color: var(--verde-testo); box-shadow: inset 0 3px 0 var(--fc-verde-600); }
.schede .conta { position: absolute; top: 4px; left: calc(50% + 6px); background: var(--verde-pieno); color: var(--su-verde); }
main { width: 100%; max-width: 1180px; margin: 0 auto; flex: 1; outline: none;
  padding-block: 16px calc(84px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.menu-tema { position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--superficie); color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: var(--r-md); box-shadow: var(--ombra); padding: 8px; min-width: 220px; }
.menu-tema p { margin: 4px 8px 8px; font-weight: 800; font-size: .86rem; color: var(--muto); }
.menu-tema button { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; padding: 10px; border-radius: 10px; cursor: pointer; min-height: 44px; text-align: left; }
.menu-tema button:hover { background: var(--hover); }
.menu-tema button[aria-checked="true"] { font-weight: 800; color: var(--verde-testo); }
.menu-tema hr { border: 0; border-top: 1px solid var(--bordo); margin: 6px 4px; }

/* --- elementi comuni --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--bordo-forte);
  background: var(--superficie); font-family: var(--font-titoli); font-weight: 800; cursor: pointer; text-decoration: none; color: var(--testo); }
.btn:hover { background: var(--hover); }
.btn.primario { background: var(--verde-pieno); border-color: var(--verde-pieno); color: var(--su-verde); }
.btn.primario:hover { background: var(--fc-verde-800); }
.btn.carta { background: var(--fc-carta-50); border-color: var(--fc-carta-50); color: var(--fc-verde-900); }
.btn.pieno { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn.link { border: 0; background: none; color: var(--verde-testo); text-decoration: underline; padding: 6px 4px; min-height: 40px; font-family: var(--font-testo); }
.avviso { border-radius: 12px; padding: 12px 14px; margin: 10px 0; font-size: .95rem; border: 1px solid var(--bordo-forte); background: var(--riquadro); }
.avviso.errore { background: var(--errore-fondo); border-color: var(--errore-bordo); color: var(--errore); font-weight: 600; }
.avviso.attenzione { background: var(--importante-fondo); border-color: transparent; color: var(--importante-testo); font-weight: 600; }
.caricamento { padding: 40px 0; text-align: center; color: var(--muto); }
.blocco { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-md); padding: 16px; margin-bottom: 14px; min-width: 0; }
.blocco > h2 { margin-bottom: 10px; }
.etichetta { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--riquadro); color: var(--testo-2); border: 1px solid var(--bordo); }
.etichetta.dose { background: var(--superficie); border-color: var(--bordo-forte); }
.etichetta.dose b { color: var(--verde-testo); }
.etichetta.contorno { background: transparent; }
.etichetta.errore { background: var(--errore-fondo); color: var(--errore); border-color: var(--errore-bordo); }
.dispo { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--testo-2); }
.dispo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pallino-r); flex: none; }
.dispo.v::before { background: var(--pallino-v); }
.dispo.g::before { background: var(--pallino-g); }
mark { background: var(--evidenza); color: var(--evidenza-testo); border-radius: 3px; padding: 0 2px; }
.fonte { font-size: .84rem; color: var(--muto); margin-top: 10px; overflow-wrap: anywhere; }

/* --- ricerca --- */
.cerca { position: relative; }
.cerca > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muto); pointer-events: none; }
.cerca input { width: 100%; min-height: 52px; padding: 12px 48px 12px 44px; border-radius: var(--r-md); border: 1px solid var(--bordo-forte); background: var(--superficie); font-size: 1.05rem; }
.cerca input::placeholder { color: var(--muto); }
.cerca input::-webkit-search-cancel-button { display: none; }
.cerca .svuota { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--muto); display: grid; place-items: center; }
.suggerimento { margin: 8px 2px 0; font-size: .92rem; color: var(--muto); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bordo-forte); background: var(--superficie);
  font-weight: 750; font-size: .9rem; cursor: pointer; color: var(--testo-2); }
.chip:hover { background: var(--hover); }
a.chip { text-decoration: none; }
.chip[aria-pressed="true"] { background: var(--verde-pieno); border-color: var(--verde-pieno); color: var(--su-verde); }
.chip .conta { background: var(--riquadro); color: var(--testo-2); }
.attivi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.filtro { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 2px 2px 2px 12px; border-radius: 999px; background: var(--riquadro); border: 1px solid var(--bordo); font-size: .88rem; font-weight: 700; }
.filtro em { font-style: normal; color: var(--muto); font-weight: 600; margin-right: 4px; }
.filtro.senza { background: var(--errore-fondo); border-color: var(--errore-bordo); }
.filtro.senza em { color: var(--errore); }
.filtro button { border: 0; background: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--muto); }
.filtro button:hover { background: var(--hover); }
.disposizione { display: grid; gap: 16px; margin-top: 16px; }
.lato { display: none; }
.riepilogo { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: .92rem; color: var(--muto); margin-bottom: 8px; }
.riepilogo b { color: var(--testo); }
.elenco { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-md); }
.riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 14px 12px; border-top: 1px solid var(--bordo); }
.riga:first-child { border-top: 0; }
.riga.fuori { opacity: .72; }
.riga-titolo a { color: var(--testo); text-decoration: none; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.riga-titolo a:hover { text-decoration: underline; }
.riga-sotto { font-size: .86rem; color: var(--muto); margin-top: 2px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.riga-prezzo { text-align: right; font-family: var(--font-titoli); font-weight: 900; font-size: 1.05rem; white-space: nowrap; }
.riga-dati { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.riga-azioni { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.confronta { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bordo-forte); background: none;
  font-weight: 800; font-size: .86rem; cursor: pointer; color: var(--verde-testo); }
.confronta[aria-pressed="true"] { background: var(--verde-pieno); color: var(--su-verde); border-color: var(--verde-pieno); }
.pagine { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.vassoio { position: sticky; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 4; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: var(--r-md); background: var(--fc-verde-900); color: #fff; box-shadow: var(--ombra); }
.vassoio span { font-weight: 700; font-size: .92rem; }
.vuoto { padding: 22px 16px; }
.vuoto b { display: block; margin-bottom: 4px; }
.faccetta { padding: 14px 0; border-top: 1px solid var(--bordo); }
.faccetta:first-child { border-top: 0; padding-top: 0; }
.faccetta h3, .titoletto { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muto); font-family: var(--font-testo); font-weight: 800; margin-bottom: 6px; }
.faccetta label { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: .92rem; min-height: 40px; }
.faccetta label:hover { background: var(--hover); }
.faccetta label span:nth-child(2) { flex: 1; overflow-wrap: anywhere; }
.faccetta label .num { color: var(--muto); font-size: .82rem; }
.faccetta input { width: 18px; height: 18px; accent-color: var(--fc-verde-700); flex: none; }
.faccetta .altri { border: 0; background: none; color: var(--verde-testo); font-weight: 800; padding: 6px 4px; cursor: pointer; text-decoration: underline; }

/* --- scheda prodotto --- */
.indietro { display: inline-flex; align-items: center; gap: 4px; color: var(--verde-testo); font-weight: 800; text-decoration: none; min-height: 44px; }
.testa { display: grid; gap: 12px; margin: 4px 0 16px; }
.testa h1 { overflow-wrap: anywhere; }
.testa .sotto { color: var(--muto); margin-top: 4px; }
.fatti { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.prezzo-grande { font-family: var(--font-titoli); font-weight: 900; font-size: 1.75rem; line-height: 1; }
.griglia-scheda { display: grid; gap: 0 16px; }
/* su telefono prima giacenza e numeri per la vendita, poi le schede */
.griglia-scheda > .scheda-principale { order: 2; min-width: 0; }
.griglia-scheda > .scheda-lato { order: 1; min-width: 0; }
.giacenze { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 4px 0 6px; }
.giacenza { background: var(--riquadro); border-radius: 12px; padding: 10px 12px; }
.giacenza b { display: block; font-family: var(--font-titoli); font-weight: 900; font-size: 1.4rem; line-height: 1.1; }
.giacenza span { font-size: .82rem; color: var(--muto); }
.schede-scheda { display: flex; gap: 2px; border-bottom: 1px solid var(--bordo); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.schede-scheda button { border: 0; background: none; padding: 10px 14px; min-height: 46px; font-weight: 800; color: var(--muto); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.schede-scheda button[aria-selected="true"] { color: var(--verde-testo); border-bottom-color: var(--fc-verde-600); }
.tabella-scorre { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--bordo); vertical-align: top; }
thead th { border-top: 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muto); }
td.num, th.num { text-align: right; white-space: nowrap; }
.voci-lista { display: flex; flex-wrap: wrap; gap: 6px; }
dl.attr { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: .95rem; }
dl.attr dt { color: var(--muto); font-weight: 700; }
dl.attr dd { margin: 0; overflow-wrap: anywhere; }
.ingredienti { white-space: pre-wrap; overflow-wrap: anywhere; }
details.vendita { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-md); margin-bottom: 14px; }
details.vendita > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px; }
details.vendita > summary .titoli { flex: 1; min-width: 0; }
details.vendita > summary .titoli b { display: block; font-family: var(--font-titoli); font-weight: 850; font-size: 1.05rem; }
details.vendita > summary .titoli span { display: block; font-size: .86rem; color: var(--muto); }
details.vendita > summary::-webkit-details-marker { display: none; }
details.vendita > summary .freccia { margin-left: auto; color: var(--muto); transition: transform .15s; }
details.vendita[open] > summary .freccia { transform: rotate(90deg); }
.vendita-corpo { padding: 0 16px 16px; }
.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.cifra { background: var(--riquadro); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.cifra span { display: block; font-size: .8rem; color: var(--muto); font-weight: 700; }
.cifra b { display: block; font-family: var(--font-titoli); font-weight: 900; font-size: 1.25rem; line-height: 1.2; margin-top: 2px; }
.cifra small { display: block; color: var(--muto); font-size: .8rem; margin-top: 2px; }
.giudizio, .cifra b.giudizio { display: flex; align-items: center; gap: 8px; font-weight: 900; }
.giudizio::before { flex: none; }
.giudizio::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pallino-r); }
.giudizio.bene::before { background: var(--pallino-v); }
.giudizio.piano::before { background: var(--pallino-g); }
.giudizio.male::before { background: var(--errore); }

/* --- foglietto --- */
.foglietto-griglia { display: grid; gap: 16px; }
.indice { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-md); padding: 12px; min-width: 0; }
.indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.indice a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--bordo-forte); text-decoration: none; color: var(--testo-2); font-weight: 750; font-size: .88rem; }
.indice a.importante { background: var(--importante-fondo); border-color: transparent; color: var(--importante-testo); }
.interruttore { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; margin: 12px 4px 0; cursor: pointer; min-height: 40px; }
.interruttore input { width: 20px; height: 20px; accent-color: var(--fc-verde-700); flex: none; }
.sezione { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-md); margin-bottom: 10px; scroll-margin-top: 76px; }
.sezione > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; min-height: 54px; }
.sezione > summary::-webkit-details-marker { display: none; }
.sezione > summary .titoli { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sezione > summary h2 { font-size: 1.02rem; min-width: 0; }
.sezione > summary .freccia { color: var(--muto); transition: transform .15s; }
.sezione[open] > summary .freccia { transform: rotate(90deg); }
.sezione.importante > summary .tipo { color: var(--importante-testo); }
.sezione .corpo { padding: 0 16px 14px; max-width: 75ch; }
.sezione .corpo p { margin: 0 0 .7em; overflow-wrap: anywhere; }
.sezione .corpo p.elenco { padding-left: 1em; text-indent: -1em; }
.sezione .corpo h3 { font-size: .95rem; margin: .8em 0 .3em; }
.bollino { font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--importante-fondo); color: var(--importante-testo); white-space: nowrap; }
.senza-evidenze mark { background: none; color: inherit; padding: 0; }

/* --- confronto --- */
.modi { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.confronto-scorre { overflow: auto; border: 1px solid var(--bordo); border-radius: var(--r-md); background: var(--superficie);
  max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); min-height: 280px; overscroll-behavior: contain; }
.confronto { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .9rem; }
.confronto th, .confronto td { border-top: 1px solid var(--bordo); padding: 10px 10px; min-width: 116px; max-width: 160px; vertical-align: top; }
.confronto thead th { border-top: 0; text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--testo); background: var(--superficie); position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--bordo); }
.confronto .fisso { position: sticky; left: 0; z-index: 1; background: var(--superficie); min-width: 100px; max-width: 120px; font-weight: 800; color: var(--testo-2); box-shadow: 1px 0 0 var(--bordo); overflow-wrap: anywhere; }
.confronto thead .fisso { z-index: 3; }
.confronto .gruppo th, .confronto .gruppo td { background: var(--riquadro); font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: var(--muto); padding: 6px 12px; }
.valore { font-variant-numeric: tabular-nums; font-weight: 700; }
.valore small { display: block; font-weight: 600; color: var(--muto); font-size: .76rem; }
.valore.max { color: var(--verde-testo); font-weight: 900; }
.segno { display: inline-flex; align-items: center; gap: 2px; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.nd { color: var(--muto); font-style: italic; font-weight: 400; font-size: .84rem; }
.testa-prodotto a { color: var(--testo); text-decoration: none; font-weight: 800; overflow-wrap: anywhere; }
.testa-prodotto .p { font-family: var(--font-titoli); font-weight: 900; margin-top: 4px; }
.togli { border: 0; background: none; color: var(--muto); font-size: .8rem; font-weight: 700; padding: 6px 0; cursor: pointer; text-decoration: underline; min-height: 32px; }
.legenda { font-size: .86rem; color: var(--muto); margin-top: 10px; max-width: 75ch; }

/* --- categorie --- */
.famiglie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.famiglia { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--r-md); background: var(--superficie); border: 1px solid var(--bordo); text-decoration: none; color: var(--testo); min-height: 84px; }
.famiglia:hover { background: var(--hover); }
.famiglia b { font-family: var(--font-titoli); font-weight: 850; line-height: 1.2; }
.famiglia span { color: var(--muto); font-size: .84rem; margin-top: auto; }
.famiglia.vuota { opacity: .6; }

/* --- foglio (filtri su telefono) --- */
.foglio-sfondo { position: fixed; inset: 0; z-index: 30; background: rgba(14, 24, 23, .45); display: flex; align-items: flex-end; justify-content: center; }
.foglio { background: var(--superficie); color: var(--testo); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; border-radius: 20px 20px 0 0;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.foglio .campo-testo { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bordo-forte); background: var(--superficie); margin: 12px 0 10px; font-size: 1rem; }
.foglio .aiuto { font-size: .86rem; color: var(--muto); margin: 8px 0 0; }
.foglio-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* foglio delle sostanze: la sostanza intera, poi le sue forme rientrate */
.foglio-campo { position: sticky; top: -18px; z-index: 1; margin: 0 -4px; padding: 0 4px 8px; background: var(--superficie); }
.foglio .scelte { margin-top: 0; }
.foglio .scelte:empty { display: none; }
.proposte { display: grid; gap: 10px; margin-top: 14px; }
.proposte:empty { display: none; }
.proposte h3 { margin: 0; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muto); }
.proposte .chips { margin-top: 0; }
.vuoto-breve { margin: 4px 2px; color: var(--muto); }
.sost-gruppo { border: 1px solid var(--bordo-forte); border-radius: 12px; overflow: hidden; background: var(--superficie); }
.sost-gruppo ul { list-style: none; margin: 0; padding: 0; }
.sost { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-top: 1px solid var(--bordo);
  background: none; color: var(--testo); font: inherit; text-align: left; cursor: pointer; }
.sost.base { border-top: 0; font-weight: 800; }
.sost:hover { background: var(--hover); }
.sost:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--verde-testo); }
.sost .segno { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--bordo-forte); color: transparent; }
.sost[aria-pressed="true"] .segno { background: var(--verde-pieno); border-color: var(--verde-pieno); color: var(--su-verde); }
.sost .nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sost .nome small { display: block; font-size: .8rem; font-weight: 600; color: var(--muto); }
.sost .n { flex: none; font-size: .86rem; font-weight: 600; color: var(--muto); font-variant-numeric: tabular-nums; }
.sost.forma { padding-left: 44px; font-weight: 500; }
.sost.altre { padding-left: 44px; color: var(--verde-testo); font-weight: 700; }
.foglio-fondo { position: sticky; bottom: -1px; margin-top: 16px; padding-top: 12px; background: var(--superficie); }
.filtro small { font-size: .76rem; font-weight: 600; color: var(--muto); margin-left: 4px; }
.filtro.ignorata { border-style: dashed; border-color: var(--bordo-forte); background: none; color: var(--muto); }
.chiudi { border: 0; background: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muto); }

/* --- accesso --- */
.accesso { max-width: 400px; margin: 6vh auto 0; display: grid; gap: 14px; }
.accesso .logo-acc { display: flex; align-items: center; gap: 12px; }
.accesso .logo-acc svg { width: 44px; height: 44px; color: var(--fc-verde-600); }
.accesso form { display: grid; gap: 12px; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-md); padding: 16px; }
.accesso label { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; }
.accesso input { min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bordo-forte); background: var(--superficie); font-size: 1rem; }
.accesso .codice { letter-spacing: .35em; text-align: center; font-weight: 800; font-size: 1.25rem; }

@media (min-width: 900px) {
  .voci { display: flex; }
  .schede { display: none; }
  main { padding-block: 24px 32px; }
  .vassoio { bottom: 16px; }
  .disposizione { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
  .lato { display: block; position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 4px; }
  .solo-telefono { display: none !important; }
  .riga { grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; }
  .riga-azioni { grid-column: 3; grid-row: 1; }
  .riga-dati { grid-column: 1 / 3; }
  .testa { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .griglia-scheda { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .griglia-scheda > .scheda-principale, .griglia-scheda > .scheda-lato { order: 0; }
  .foglietto-griglia { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .indice { position: sticky; top: 84px; }
  .indice ol { flex-direction: column; flex-wrap: nowrap; }
  .indice a { border-radius: 10px; width: 100%; }
  .confronto th, .confronto td { min-width: 170px; max-width: 220px; }
  .confronto .fisso { min-width: 150px; max-width: 190px; }
  .foglio-sfondo { align-items: center; }
  .foglio { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .barra, .schede, .vassoio, .riga-azioni { display: none !important; } main { padding: 0; } }