/* HACCP Mobile 2.0 — stile dell'app.
   Grafica della 1.3.4 (verde, Manrope, schede bianche, menu laterale su computer) con misure da telefono:
   testi da 16 px, pulsanti grandi (anche con i guanti), contrasto AA. Nessuna risorsa esterna (CSP).
   Carattere Manrope (manrope.woff2): Copyright 2018 The Manrope Project Authors (github.com/sharanda/manrope),
   licenza SIL Open Font License 1.1 (openfontlicense.org). */
@font-face { font-family: Manrope; src: url('manrope.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root {
  --verde: #164b3f; --verde-2: #286b58; --verde-scuro: #0f3c30; --verde-tenue: #eaf3ed; --verde-chiaro: #b7d8c1; --verde-punto: #82a68b;
  --testo: #202e27; --grigio: #66726a; --grigio-chiaro: #97a099; --sfondo: #f6f8f6; --carta: #fff; --bordo: #e5eae5; --bordo-campo: #d3ddd1; --tenue: #f3f6f2;
  --ambra: #8f5c12; --ambra-tenue: #fff6e7; --ambra-bordo: #f0e1c6; --rosso: #b03f3f; --rosso-tenue: #fcf0ee; --rosso-bordo: #f1dbd4;
  --blu: #4a7090; --blu-tenue: #edf4f8; --giallo: #fdf096; --giallo-bordo: #ecd34a; --giallo-testo: #3a3416; --ombra: 0 8px 28px rgba(33, 55, 43, .05);
  --raggio: 14px; --tocco: 52px; --laterale: 248px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --verde: #5fb08c; --verde-2: #7cc3a2; --verde-scuro: #4c9a78; --verde-tenue: #1b2e27; --verde-chiaro: #2f5545; --verde-punto: #7cc3a2;
    --testo: #e3ebe6; --grigio: #a3b0a8; --grigio-chiaro: #7d8a82; --sfondo: #0e1512; --carta: #16201c; --bordo: #26332d; --bordo-campo: #34443c; --tenue: #1c2722;
    --ambra: #e0b062; --ambra-tenue: #2a2214; --ambra-bordo: #4a3b1f; --rosso: #f08a80; --rosso-tenue: #2c1a19; --rosso-bordo: #4d2a27;
    --blu: #8fb3d0; --blu-tenue: #17232d; --giallo: #2d2810; --giallo-bordo: #5c5119; --giallo-testo: #f1e4a6; --ombra: none; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--testo); background: var(--sfondo);
  -webkit-tap-highlight-color: transparent; font-synthesis: none; }
[hidden] { display: none !important; }
a { color: var(--verde-2); }
h1 { font-size: 1.85rem; font-weight: 800; letter-spacing: -.035em; margin: 0; line-height: 1.2; }
h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; margin: 1.4em 0 .5em; line-height: 1.3; }
h3 { font-size: 1rem; font-weight: 800; margin: 1.2em 0 .4em; }
small { display: block; color: var(--grigio); font-size: .85rem; }
small.in-linea { display: inline; }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; background: var(--tenue); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.caricamento { color: var(--grigio); text-align: center; padding: 32px 0; }
.nota { color: var(--grigio); font-size: .92rem; }
.occhiello { margin: 0 0 6px; font-size: .74rem; letter-spacing: .12em; font-weight: 800; color: var(--verde-2); text-transform: uppercase; }

/* ——— Struttura: testata e barra in basso (telefono), menu laterale (computer) ——— */
.marchio-app { display: flex; align-items: center; gap: 10px; color: var(--testo); min-width: 0; }
.marchio-segno { flex-shrink: 0; width: 36px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #164b3f; }
.marchio-segno svg { width: 24px; height: 24px; }
.marchio-segno.con-logo { background: var(--carta); border: 1px solid var(--bordo); overflow: hidden; }
.marchio-segno.con-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.marchio-testi { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; }
.marchio-nome { font-size: 1.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: var(--testo); text-decoration: none; }
.marchio-nome .punto { color: var(--verde-punto); }
.marchio-sotto { font-size: .72rem; color: var(--grigio); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.testata { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--carta) 85%, transparent); border-bottom: 1px solid var(--bordo);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.testata .marchio-app { flex: 1; }
.testata .marchio-sotto { font-size: .8rem; }
.testata .marchio-segno { width: 32px; height: 34px; border-radius: 9px; }
.testata .marchio-segno svg { width: 21px; height: 21px; }
/* Scelta della sede sotto «HACCP.»: nome intero fino a due righe, poi i puntini */
button.scelta-sede { display: flex; align-items: center; gap: 4px; max-width: 100%; min-height: 0; margin: 1px 0 0; padding: 2px 0; border: 0; border-radius: 6px;
  background: none; box-shadow: none; color: var(--grigio); font-size: .8rem; font-weight: 700; line-height: 1.3; text-align: left; }
button.scelta-sede span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
button.scelta-sede .icona { flex-shrink: 0; width: 16px; height: 16px; stroke-width: 2.2; color: var(--verde-2); }
button.scelta-sede:hover { background: none; color: var(--verde); }
.elenco-sedi { box-shadow: none; }
.elenco-sedi a { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.elenco-sedi a.attiva { color: var(--verde); background: var(--verde-tenue); }
.elenco-sedi .icona { flex-shrink: 0; width: 22px; height: 22px; stroke-width: 2.2; }
.azioni-testata { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.persona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #eef0e9; color: #5d6f5a; text-decoration: none;
  font-size: .82rem; font-weight: 800; letter-spacing: .02em; }
.testata button.esci { width: 48px; height: 48px; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #566359; border-radius: 12px; }
.testata button.esci:hover { background: var(--tenue); color: var(--verde); }
.testata button.esci .icona { width: 25px; height: 25px; }
.persona:hover { background: var(--verde-tenue); color: var(--verde); }
/* dev.42: pulsante QR in testata (inquadra dentro l'app, su ogni sistema) */
.qr-rapido { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--verde); text-decoration: none; }
.qr-rapido:hover, .qr-rapido:focus-visible { background: var(--verde-tenue); }
.qr-rapido .icona { width: 26px; height: 26px; }
main { max-width: 820px; margin: 0 auto; padding: 22px 16px calc(100px + env(safe-area-inset-bottom)); outline: none; }
.barra { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; background: color-mix(in srgb, var(--carta) 93%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--bordo); padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); }
.barra a, .barra button { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border-radius: 10px;
  color: #8a968d; text-decoration: none; font-size: .78rem; font-weight: 600; }
.barra a.attiva, .barra button.attiva { color: var(--verde); font-weight: 800; }
.barra .attiva .icona { stroke-width: 2.2; }
.barra span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra button:hover { background: none; color: var(--verde); }
.icona { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.laterale { display: none; }
.avviso-licenza { display: flex; gap: 14px; align-items: flex-start; max-width: 820px; margin: 18px auto -4px; padding: 18px; border: 1px solid; border-radius: var(--raggio);
  font-size: 1.02rem; line-height: 1.55; width: calc(100% - 32px); }
.avviso-licenza > .icona { flex-shrink: 0; width: 28px; height: 28px; margin-top: 1px; }
.avviso-licenza p { margin: 0; }
.avviso-licenza .pulsante { margin-top: 14px; background: #fff; color: var(--testo); border-color: #fff; box-shadow: 0 2px 8px rgba(70, 60, 10, .1); }
.avviso-licenza .pulsante .icona { width: 20px; height: 20px; }
.banner.attenzione { background: var(--giallo); border-color: var(--giallo-bordo); color: var(--giallo-testo); }
.banner.attenzione > .icona { color: #7a5a14; }
.banner.pericolo { background: var(--rosso-tenue); border-color: var(--rosso-bordo); color: var(--rosso); }

/* ——— Intestazioni e schede ——— */
.intestazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 2px 0 20px; }
.intestazione .occhiello, .intestazione .sottotitolo { flex-basis: 100%; }
.intestazione .sottotitolo { margin: 0; color: var(--grigio); font-size: .95rem; }
.intestazione .pulsante { margin: 0; }
.scheda > .intestazione { margin: 0 0 12px; }
.scheda > .intestazione h2 { margin: 0; }
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 18px 18px; margin: 14px 0; }
.scheda > h2:first-child, .scheda > summary + h2 { margin-top: 0; }
details.scheda > summary { cursor: pointer; min-height: 32px; display: list-item; font-weight: 700; }
.schede { display: grid; gap: 14px; }
.schede > .scheda { margin: 0; }
.griglia { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.griglia .scheda { margin: 0; }

/* ——— Pulsanti ——— */
button, .pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 18px; font: inherit; font-size: .95rem;
  font-weight: 700; border: 1px solid var(--verde); border-radius: 10px; background: var(--verde); color: #fff; cursor: pointer; text-decoration: none;
  touch-action: manipulation; transition: background .15s, box-shadow .15s; box-shadow: 0 3px 6px rgba(22, 75, 63, .08); }
@media (prefers-color-scheme: dark) { button, .pulsante { color: #0e1512; } }
button:hover, .pulsante:hover { background: var(--verde-scuro); border-color: var(--verde-scuro); }
button:active, .pulsante:active, .riquadro:active, .barra a:active { transform: scale(.98); opacity: .9; }
button.grande, .pulsante.grande { min-height: var(--tocco); padding: 12px 22px; font-size: 1.02rem; }
button.secondario, .pulsante.secondario { background: var(--carta); color: var(--testo); border-color: var(--bordo); box-shadow: none; }
button.secondario:hover, .pulsante.secondario:hover { background: var(--tenue); border-color: var(--bordo-campo); }
button.pericolo { background: var(--rosso); border-color: var(--rosso); color: #fff; }
button.collegamento { background: none; border: 0; box-shadow: none; color: var(--verde-2); padding: 8px 0; text-decoration: underline; min-height: 0; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #e0a100; outline-offset: 2px; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ——— Campi ——— */
.campo { margin: 16px 0; }
.campo label, fieldset legend { display: block; font-size: .9rem; font-weight: 800; color: #50644f; margin-bottom: 6px; }
@media (prefers-color-scheme: dark) { .campo label, fieldset legend { color: var(--grigio); } }
input, select, textarea { display: block; width: 100%; min-height: 50px; padding: 11px 12px; font: inherit; font-size: 16px; color: var(--testo); background: var(--carta);
  border: 1px solid var(--bordo-campo); border-radius: 10px; }
input::placeholder, textarea::placeholder { color: #a6b0a2; }
input:focus, select:focus, textarea:focus { outline: 2px solid #80ab8e; outline-offset: 1px; }
input:disabled { background: var(--tenue); color: var(--grigio); }
input[type=date], input[type=time] { appearance: none; -webkit-appearance: none; min-width: 0; }
textarea { min-height: 0; resize: vertical; }
textarea.codice { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; }
input[type=checkbox], input[type=radio] { display: inline-block; width: 22px; height: 22px; min-height: 0; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--verde); }
.campo small { margin-top: 4px; }
.campo.sbagliato input, .campo.sbagliato select, .campo.sbagliato textarea { border: 2px solid var(--rosso); }
fieldset.sbagliato { border: 2px solid var(--rosso); }
fieldset:disabled { opacity: .75; }
fieldset.riga-consegna legend { font-size: 1rem; color: var(--testo); }
fieldset { border: 1px solid var(--bordo); border-radius: 12px; padding: 8px 14px 10px; margin: 16px 0; }
label.scelta { display: flex; align-items: center; min-height: 46px; font-weight: 600; cursor: pointer; }
.riga-due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.riga-due .campo { margin: 4px 0; }

/* ——— Messaggi (come gli avvisi della 1.3.4) ——— */
.messaggio { display: block; padding: 12px 14px; border-radius: 10px; border: 1px solid; margin: 12px 0; font-size: .95rem; line-height: 1.6; }
.messaggio.errore { background: var(--rosso-tenue); border-color: var(--rosso-bordo); color: var(--rosso); }
.messaggio.successo { background: #f3f7f0; border-color: #e1e9df; color: #2f5d3a; }
.messaggio.info { background: #f0f6f2; border-color: #dfeae3; color: #3f5f55; }
@media (prefers-color-scheme: dark) { .messaggio.successo, .messaggio.info { background: var(--verde-tenue); border-color: var(--verde-chiaro); color: var(--testo); } }
.messaggio a { font-weight: 800; color: inherit; }
.avvisi { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 40; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.avviso-breve { max-width: 560px; width: 100%; padding: 13px 16px 13px 44px; border-radius: 12px; background: var(--carta); border: 1px solid #ccdcca; color: var(--verde);
  font-weight: 700; font-size: .95rem; box-shadow: 0 8px 35px rgba(36, 54, 34, .14); position: relative; pointer-events: auto; }
.avviso-breve::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .75rem; background: var(--verde-tenue); }
.avviso-breve.errore { border-color: var(--rosso-bordo); color: var(--rosso); } .avviso-breve.errore::before { content: "!"; background: var(--rosso-tenue); }
.avviso-breve.attenzione { border-color: var(--ambra-bordo); color: var(--ambra); } .avviso-breve.attenzione::before { content: "!"; background: var(--ambra-tenue); }
.avviso-breve.info { border-color: #dfeae3; color: var(--blu); } .avviso-breve.info::before { content: "i"; background: var(--blu-tenue); }

/* ——— Pastiglie di stato (i «badge» della 1.3.4) ——— */
.pastiglie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pastiglie.grandi { margin: 0 0 12px; } .pastiglie.grandi .pastiglia { font-size: .9rem; padding: 4px 12px; }
.pastiglia { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: .78rem; font-weight: 700; line-height: 1.5;
  white-space: nowrap; background: #f1f4f0; color: #6b776e; }
.pastiglia.ok { background: #ebf4ed; color: #2f7a4b; } .pastiglia.ko { background: var(--rosso-tenue); color: var(--rosso); }
.pastiglia.attenzione { background: var(--ambra-tenue); color: var(--ambra); } .pastiglia.info { background: var(--blu-tenue); color: var(--blu); }
@media (prefers-color-scheme: dark) { .pastiglia { background: var(--tenue); color: var(--grigio); } .pastiglia.ok { background: var(--verde-tenue); color: var(--verde-2); } }

/* ——— Elenchi (righe con separatori, come gli elenchi della 1.3.4) ——— */
.lista { list-style: none; padding: 0; margin: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; }
.lista > li { border-bottom: 1px solid #edf0eb; }
@media (prefers-color-scheme: dark) { .lista > li { border-color: var(--bordo); } }
.lista > li:last-child { border-bottom: 0; }
.lista > li > a { display: block; padding: 14px 18px; color: inherit; text-decoration: none; min-height: var(--tocco); }
.lista > li > a:hover { background: var(--tenue); }
.lista > li:not(:has(> a)) { padding: 12px 18px; }
.lista strong { font-weight: 800; }
.lista .riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.registrazioni li > a { display: flex; gap: 14px; align-items: flex-start; }
.registrazioni .ora { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 54px; letter-spacing: -.02em; }
.registrazioni .testo { flex: 1; min-width: 0; }
.registrazioni li.non-conforme { box-shadow: inset 4px 0 0 var(--rosso); }
.registrazioni li.annullata .testo strong { text-decoration: line-through; color: var(--grigio); }
.filtri { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.filtri select { width: auto; flex: 1; min-width: 180px; }

/* ——— Dettaglio ——— */
.dettagli { display: grid; gap: 0; margin: 0; }
.dettagli .voce { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid #edf0eb; }
@media (prefers-color-scheme: dark) { .dettagli .voce { border-color: var(--bordo); } }
.dettagli .voce:last-child { border-bottom: 0; }
.dettagli dt { color: var(--grigio); font-size: .92rem; } .dettagli dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.dettagli dd small { font-weight: 500; }

/* ——— Accesso ——— */
.accesso { max-width: 440px; margin: 0 auto; padding: 40px 18px; }
.accesso > .scheda, .accesso form { background: var(--carta); }
.marchio { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 18px; }
.marchio img { border-radius: 14px; }
.marchio h1 { color: var(--testo); }
.segreto { display: block; text-align: center; font-size: 1.25rem; letter-spacing: .08em; padding: 12px; margin: 8px 0; }
.qr-2fa-cornice { display: flex; justify-content: center; margin: 12px 0; }
.qr-2fa { width: min(240px, 70vw); height: auto; border: 1px solid var(--bordo); border-radius: 12px; background: #fff; }
.chiave-manuale { margin: 10px 0; }
.chiave-manuale summary { cursor: pointer; font-weight: 600; color: var(--verde-2); }
.collegamento-app { font-weight: 600; }
.codici { columns: 2; font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; margin: 12px 0; }

/* ——— Dialoghi ——— */
.dialogo { border: 1px solid var(--bordo); border-radius: 18px; padding: 22px; width: min(92vw, 480px); color: var(--testo); background: var(--carta); box-shadow: 0 20px 60px rgba(20, 40, 30, .2); }
.dialogo::backdrop { background: rgba(16, 32, 26, .45); }
.dialogo h2 { margin-top: 0; }

/* ——— Riquadri (scelta dell'apparecchio, stato in Panoramica) ——— */
.riquadri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
.riquadro { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 80px; padding: 12px 14px; border-radius: 13px;
  background: var(--carta); color: var(--testo); border: 1px solid var(--bordo); box-shadow: var(--ombra); font-weight: 800; letter-spacing: -.01em; }
a.riquadro { text-decoration: none; }
.riquadro:hover { background: var(--tenue); border-color: var(--bordo-campo); }
.riquadro small { font-weight: 500; letter-spacing: 0; }
.riquadro[aria-pressed=true] { border: 2px solid var(--verde); padding: 11px 13px; background: var(--verde-tenue); color: var(--verde); }
.riquadro.fatto { border-color: var(--verde-chiaro); box-shadow: inset 4px 0 0 #44885d, var(--ombra); }
.riquadro.ko { border-color: var(--rosso-bordo); background: var(--rosso-tenue); box-shadow: inset 4px 0 0 var(--rosso); }
.riquadro .stato-turno { display: block; font-variant-numeric: tabular-nums; }
.riquadro .stato-turno.ko { color: var(--rosso); font-weight: 700; }
/* Registro mensile (dev.32, come la 1.3.4): anno, mesi con controlli, dodici mesi con il cerchio dello stato */
.filtri-anno .scelta-anno { display: flex; align-items: center; gap: 10px; color: var(--grigio); font-weight: 600; }
.filtri-anno select { flex: 0 0 auto; min-width: 110px; width: auto; }
.riepilogo-anno { margin-left: auto; padding: 9px 14px; border: 1px solid var(--bordo); border-radius: 11px; background: var(--carta); color: var(--grigio); font-size: .92rem; }
.riepilogo-anno strong { color: var(--testo); }
.riquadri-anno { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.riquadri-anno .riquadro { position: relative; justify-content: center; min-height: 84px; padding: 14px 46px 14px 16px; }
.riquadri-anno .riquadro strong { font-size: 1rem; }
.riquadri-anno .riquadro small { color: var(--grigio); font-size: .82rem; margin-top: 4px; }
.riquadri-anno .riquadro::after { content: ''; position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; box-sizing: border-box;
  border: 1.5px solid var(--grigio-chiaro); border-radius: 50%; font-size: 12px; line-height: 17px; text-align: center; font-weight: 800; }
.riquadri-anno .riquadro.fatto { background: var(--verde-tenue); border-color: var(--verde-chiaro); box-shadow: var(--ombra); }
.riquadri-anno .riquadro.fatto::after { content: '✓'; border-color: var(--verde-2); color: var(--verde-2); }
.riquadri-anno .riquadro.ko { box-shadow: var(--ombra); }
.riquadri-anno .riquadro.ko small { color: var(--rosso); font-weight: 700; }
.riquadri-anno .riquadro.ko::after { content: '!'; border-color: var(--rosso); color: var(--rosso); }
.riquadri-anno .riquadro.adesso { border-color: var(--ambra-bordo); background: var(--ambra-tenue); }
.riquadri-anno .riquadro.adesso small { color: var(--ambra); font-weight: 700; }
.riquadri-anno .riquadro.adesso::after { border-color: var(--ambra); }
.riquadri-anno .riquadro.spento { opacity: .5; box-shadow: none; }
@media (min-width: 900px) { .riquadri-anno { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
/* Scelta tra poche opzioni brevi (es. turni 07:30 · 19:30) */
.scelte { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.scelte button { min-height: var(--tocco); min-width: 88px; padding: 8px 16px; border-radius: 999px; background: var(--carta); color: var(--testo);
  border: 1px solid var(--bordo-campo); box-shadow: none; font-variant-numeric: tabular-nums; }
.scelte button:hover { background: var(--tenue); }
.scelte button[aria-pressed=true] { border: 2px solid var(--verde); padding: 7px 15px; background: var(--verde-tenue); color: var(--verde); }
/* Promemoria (dev.27): giorni a pastiglie; i 31 giorni del mese in griglia da 7 */
.giorni-promemoria button { min-width: 58px; padding: 8px 12px; }
.giorni-promemoria button[aria-pressed=true] { padding: 7px 11px; }
.giorni-promemoria.mese { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 460px; }
.giorni-promemoria.mese button { min-width: 0; padding: 8px 0; border-radius: 12px; }
.giorni-promemoria.mese button[aria-pressed=true] { padding: 7px 0; }
.ruolo-persona { color: var(--grigio); font-weight: 400; }
.attese-oggi { margin: 2px 0 12px; }
.attese-oggi .nota { margin: 0 0 6px; }
/* Elenco di orari modificabili */
.riga-orario { display: flex; align-items: flex-end; gap: 10px; }
.riga-orario .campo { flex: 1; margin: 0 0 10px; }
.riga-orario button { margin-bottom: 10px; }
.valore-grande input { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; text-align: center; font-variant-numeric: tabular-nums; min-height: 64px; }
.valore-grande button { min-height: 64px; }
.anteprima { font-weight: 800; margin: 8px 0; }
.anteprima.ok { color: #2f7a4b; } .anteprima.ko { color: var(--rosso); }
@media (prefers-color-scheme: dark) { .anteprima.ok { color: var(--verde-2); } }

/* ——— Panoramica come la 1.3.4: titolo grande, «+», schede numeriche ——— */
.eroe { display: block; margin-bottom: 22px; }
.eroe .occhiello { margin-bottom: 12px; }
.eroe-riga { display: flex; align-items: flex-end; gap: 16px; }
.eroe-riga > div { flex: 1; min-width: 0; }
.eroe h1 { font-size: 2.35rem; line-height: 1.12; letter-spacing: -.045em; }
.eroe .sottotitolo { margin: 10px 0 0; color: var(--grigio); font-size: 1rem; }
.fab { flex-shrink: 0; display: grid; place-items: center; width: 60px; height: 60px; min-height: 0; padding: 0; border-radius: 14px; background: var(--verde); color: #fff;
  border: 0; box-shadow: 0 8px 20px rgba(22, 75, 63, .25); margin-bottom: 4px; }
.fab .icona { width: 28px; height: 28px; stroke-width: 2; }
.fab:hover { background: var(--verde-scuro); }
@media (prefers-color-scheme: dark) { .fab { color: #0e1512; } }
.invito { display: flex; gap: 14px; align-items: flex-start; padding: 18px; margin: 0 0 16px; border-radius: var(--raggio); background: #eef5ec; border: 1px solid #d9e7d6; }
@media (prefers-color-scheme: dark) { .invito { background: var(--verde-tenue); border-color: var(--verde-chiaro); } }
.invito > .icona { flex-shrink: 0; color: var(--verde-2); width: 26px; height: 26px; }
.invito > div { flex: 1; min-width: 0; }
.invito strong { display: block; font-size: 1rem; }
.invito p { margin: 4px 0 0; color: var(--grigio); font-size: .92rem; }
.invito a { font-weight: 800; color: var(--verde); text-decoration: none; white-space: nowrap; font-size: .95rem; }
.indicatori { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.indicatori:empty { display: none; }
.indicatore { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 14px 16px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--bordo);
  box-shadow: var(--ombra); color: var(--testo); text-decoration: none; }
a.indicatore:hover { border-color: var(--bordo-campo); }
.indicatore-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: .95rem; font-weight: 600; color: #4a5a50; }
@media (prefers-color-scheme: dark) { .indicatore-testa { color: var(--grigio); } }
.indicatore-testa > span:first-child { padding-top: 8px; min-width: 0; }
.indicatore-icona { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; }
.indicatore-icona .icona { width: 24px; height: 24px; }
.indicatore-icona.verde { background: var(--verde-tenue); color: var(--verde-2); }
.indicatore-icona.blu { background: var(--blu-tenue); color: var(--blu); }
.indicatore-icona.ambra { background: var(--ambra-tenue); color: #b0741c; }
.indicatore-icona.rosso { background: var(--rosso-tenue); color: var(--rosso); }
.indicatore-valore { font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.indicatore-valore small { display: inline; font-size: 1.35rem; font-weight: 600; color: var(--grigio); letter-spacing: 0; }
.indicatore-nota { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--grigio); line-height: 1.35; }
.indicatore-nota .icona { width: 16px; height: 16px; flex-shrink: 0; }
.indicatore-nota .pallino { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #a7b0a9; margin: 0 2px 0 2px; }
.indicatore-nota.ko { color: var(--rosso); font-weight: 700; } .indicatore-nota.ko .pallino { background: var(--rosso); }
@media (max-width: 360px) { .indicatori { grid-template-columns: 1fr; } }

/* ——— Pannello che sale dal basso («Altro», scelta del registro) ——— */
dialog.foglio { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 88vh; padding: 0; border: 0; border-radius: 24px 24px 0 0;
  background: var(--carta); color: var(--testo); box-shadow: 0 -10px 40px rgba(20, 40, 30, .18); overflow-y: auto; }
dialog.foglio[open] { animation: sale .22s ease-out; }
@keyframes sale { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.foglio[open] { animation: none; } }
dialog.foglio::backdrop { background: rgba(16, 32, 26, .35); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.foglio-testa { display: flex; align-items: flex-start; gap: 12px; padding: 24px 18px 18px; border-bottom: 1px solid var(--bordo); }
.foglio-testa > div { flex: 1; min-width: 0; }
.foglio-testa .occhiello { margin-bottom: 10px; }
.foglio-testa h2 { margin: 0; font-size: 1.75rem; letter-spacing: -.04em; line-height: 1.15; }
.foglio-testa .sottotitolo { margin: 8px 0 0; color: var(--grigio); font-size: .95rem; }
.chiudi-foglio { flex-shrink: 0; width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 12px; background: var(--carta); color: var(--grigio); border: 1px solid var(--bordo); box-shadow: none; }
.chiudi-foglio:hover { background: var(--tenue); color: var(--testo); border-color: var(--bordo-campo); }
.foglio-corpo { padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); }
.tessere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tessera { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 104px; padding: 14px 6px; border-radius: 14px;
  border: 1px solid var(--bordo); background: var(--carta); color: var(--testo); text-decoration: none; text-align: center; font-weight: 700; font-size: .92rem; line-height: 1.25; }
.tessera .icona { width: 28px; height: 28px; color: var(--verde-2); stroke-width: 1.7; }
.tessera:hover { background: var(--tenue); border-color: var(--bordo-campo); }
.tessera:active { transform: scale(.97); }
button.installa { width: 100%; margin-top: 18px; min-height: 54px; background: #eaf3ed; color: var(--testo); border: 1px solid #d6e6db; box-shadow: none; font-size: 1rem; }
button.installa:hover { background: #dfeee4; border-color: #c8dece; }
@media (prefers-color-scheme: dark) { button.installa { background: var(--verde-tenue); border-color: var(--verde-chiaro); color: var(--testo); } }
@media (min-width: 900px) {
  dialog.foglio { inset: 0; margin: auto; width: min(640px, 92vw); max-height: 86vh; border-radius: 22px; }
  .tessere { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ——— Computer: menu laterale fisso, testata come barra della pagina ——— */
@media (min-width: 900px) {
  #app:has(> .laterale) { padding-left: var(--laterale); }
  .laterale { display: flex; flex-direction: column; position: fixed; z-index: 30; top: 0; left: 0; bottom: 0; width: var(--laterale); padding: 24px 16px 18px;
    background: var(--carta); border-right: 1px solid var(--bordo); overflow-y: auto; }
  .laterale .marchio-app { padding: 0 8px 22px; }
  .laterale .marchio-segno { width: 40px; height: 43px; border-radius: 11px; }
  .laterale .marchio-nome { font-size: 1.45rem; }
  .laterale .marchio-sotto { font-size: .62rem; letter-spacing: .14em; font-weight: 700; }
  .menu-laterale { display: flex; flex-direction: column; gap: 3px; }
  .menu-laterale a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 12px; border-radius: 9px; color: #66726a;
    text-decoration: none; font-size: .95rem; font-weight: 600; }
  .menu-laterale a:hover { background: var(--tenue); color: var(--verde); }
  .menu-laterale a.attiva { background: var(--verde-tenue); color: var(--verde); font-weight: 800; }
  .menu-laterale a.attiva::before { content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--verde); }
  .menu-laterale .icona { width: 21px; height: 21px; }
  .profilo { margin-top: auto; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--bordo); padding-top: 14px; }
  .profilo .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #eef0e9; color: #5d6f5a; font-size: .78rem; font-weight: 800; flex-shrink: 0; }
  .profilo div { flex: 1; min-width: 0; }
  .profilo strong { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profilo small { font-size: .78rem; }
  .testata { min-height: 72px; padding: 0 32px; }
  .barra { display: none; }
  main { padding: 32px 32px 48px; max-width: 980px; }
  h1 { font-size: 2.1rem; }
  .avvisi { left: calc(var(--laterale) + 24px); right: 24px; bottom: 22px; }
  .avviso-licenza { max-width: 916px; width: calc(100% - 64px); margin-top: 28px; }
  .indicatori { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .eroe h1 { font-size: 2.6rem; }
}
@media print { .testata, .barra, .laterale, .azioni, .avvisi, .fab, .avviso-licenza { display: none !important; } #app { padding: 0 !important; } body { background: #fff; } .scheda, .lista { box-shadow: none; } }
.marchio h1 .punto { color: var(--verde-punto); }
.marchio .occhiello { margin: 2px 0 0; color: var(--grigio); font-size: .66rem; }
.marchio { justify-content: flex-start; }
@media (prefers-color-scheme: dark) { .persona, .profilo .avatar { background: var(--tenue); color: var(--grigio); } .testata button.esci { color: var(--grigio); } }

/* ——— dev.13: Tutte le sedi, menu laterale e barra in alto della 1.3.4, tabelle su computer ——— */
.percorso, .stato-rete, .nuovo-controllo, .piede, .testa-tabella { display: none; }
.fab .testo-pulsante { display: none; }
.elenco-sedi a > span { flex: 1; min-width: 0; }
.elenco-sedi a small { font-weight: 500; }
.elenco-sedi a > .icona:first-child { color: var(--verde-2); }

/* Righe delle registrazioni (telefono: elenco; computer: tabella) */
.registrazioni li > a { display: grid; grid-template-columns: 62px minmax(0, 1fr) 18px; grid-template-areas: "ora testo freccia" "ora esito freccia"; gap: 2px 12px; align-items: start; }
.registrazioni .ora { grid-area: ora; }
.registrazioni .ora small { font-weight: 600; font-size: .78rem; }
.registrazioni .testo { grid-area: testo; }
.registrazioni .testo small span + span::before { content: " · "; }
.registrazioni .operatore { display: none; }
.registrazioni .pastiglie { grid-area: esito; }
.registrazioni .pastiglie:empty { display: none; }
.registrazioni .freccia { grid-area: freccia; align-self: center; width: 18px; height: 18px; color: var(--grigio-chiaro); }

/* Panoramica di una sede: colonna principale e colonna laterale (giornata, attività di oggi) */
/* «Da non dimenticare» (dev.26): controlli del mese e promemoria, una riga per voce con icona, testo e stato */
.da-non-dimenticare > .nota { margin: -4px 0 6px; }
.da-non-dimenticare .lista { box-shadow: none; border: 0; border-radius: 0; margin: 0 -18px -18px; border-top: 1px solid var(--bordo); }
.da-non-dimenticare .lista > li > a, .da-non-dimenticare .lista > li > div { display: flex; align-items: center; gap: 12px; }
.da-non-dimenticare .lista > li:not(:has(> a)) { padding: 0; }
.da-non-dimenticare .lista > li > div { padding: 14px 18px; }
.da-non-dimenticare .lista .icona { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--tenue); color: #1f5c4b; }
.da-non-dimenticare .lista .testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.da-non-dimenticare .lista .testo small { color: var(--grigio); }
.da-non-dimenticare .lista > li[data-stato="ko"] .icona, .da-non-dimenticare .lista > li[data-stato="errore"] .icona { color: #b3261e; }
.colonna-laterale > :first-child { margin-top: 14px; }
.fab, .fab:hover, .pulsante-eroe { text-decoration: none; }
/* telefono: il pulsante principale dell'intestazione va sotto il testo, largo quanto la pagina */
.eroe-riga:has(> .pulsante-eroe) { flex-wrap: wrap; }
.pulsante-eroe { width: 100%; gap: 10px; }
.pulsante-eroe .icona { width: 20px; height: 20px; stroke-width: 2.2; }
.registrazioni .ora .anno { display: none; }
.attivita-recenti .lista { box-shadow: none; border: 0; border-radius: 0; margin: 0 -18px -18px; border-top: 1px solid var(--bordo); }
.attivita-recenti .nota { margin: 0; }
.giornata { position: relative; overflow: hidden; margin: 14px 0; padding: 20px 22px; border-radius: 18px; background: #164b3f; color: #f2f8f4;
  box-shadow: 0 14px 34px rgba(22, 75, 63, .22); }
.giornata::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); }
.giornata-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .92rem; font-weight: 600; }
.giornata-testa > span:first-child { display: flex; align-items: center; gap: 8px; text-transform: none; }
.giornata-testa .icona { width: 18px; height: 18px; }
.giornata .pastiglia { background: rgba(255, 255, 255, .12); color: #e3f1e8; }
.giornata-corpo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 16px; }
.giornata-corpo strong { display: block; font-size: 2.1rem; letter-spacing: -.04em; line-height: 1.1; }
.giornata-corpo p { margin: 6px 0 0; color: #bcd6c6; font-size: .9rem; }
.giornata-anello { position: relative; flex-shrink: 0; width: 78px; height: 78px; }
.giornata-anello .anello { width: 78px; height: 78px; }
.giornata-anello circle { fill: none; stroke-width: 5; }
.giornata-anello .fondo { stroke: rgba(255, 255, 255, .14); }
.giornata-anello .valore { stroke: #b6dbc0; stroke-linecap: round; }
.giornata-anello > span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; }
.giornata-piede { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); color: #bcd6c6; font-size: .82rem; }
.giornata-piede .icona { width: 16px; height: 16px; }

/* Tutte le sedi */
.titolo-sezione { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.titolo-sezione h2 { margin: 0; font-size: 1.25rem; }
.conteggio { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--tenue); border: 1px solid var(--bordo);
  font-size: .8rem; font-weight: 800; color: var(--grigio); }
.griglia-sedi { display: grid; grid-template-columns: 1fr; gap: 12px; }
.scheda-sede { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--bordo);
  box-shadow: var(--ombra); color: var(--testo); text-decoration: none; }
.scheda-sede:hover { border-color: var(--bordo-campo); }
.scheda-sede.ko { box-shadow: inset 4px 0 0 var(--rosso), var(--ombra); }
.scheda-sede.attenzione { box-shadow: inset 4px 0 0 #d79a35, var(--ombra); }
.scheda-sede-testa { display: flex; align-items: flex-start; gap: 12px; }
.scheda-sede-testa strong { flex: 1; min-width: 0; font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.scheda-sede-testa .pastiglia { flex-shrink: 0; }
.scheda-sede-icona, .riga-sede-icona { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tenue); color: var(--verde-2); }
.scheda-sede.ko .scheda-sede-icona { background: var(--rosso-tenue); color: var(--rosso); }
.scheda-sede.attenzione .scheda-sede-icona { background: var(--ambra-tenue); color: #b0741c; }
.scheda-sede-icona .icona, .riga-sede-icona .icona { width: 21px; height: 21px; }
.scheda-sede-righe { display: flex; flex-direction: column; border-top: 1px solid var(--bordo); }
.riga-indicatore { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "icona titolo valore" "icona nota nota"; gap: 0 10px;
  align-items: center; padding: 10px 0; border-bottom: 1px solid #edf0eb; }
@media (prefers-color-scheme: dark) { .riga-indicatore { border-color: var(--bordo); } }
.riga-indicatore .icona { grid-area: icona; width: 20px; height: 20px; color: var(--verde-2); }
.riga-titolo { grid-area: titolo; font-weight: 700; }
.riga-valore { grid-area: valore; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.riga-valore small { display: inline; font-size: .85rem; font-weight: 600; }
.riga-nota { grid-area: nota; font-size: .82rem; color: var(--grigio); }
.riga-indicatore.ko .icona, .riga-indicatore.ko .riga-nota, .riga-indicatore.ko .riga-valore { color: var(--rosso); }
.riga-indicatore.attenzione .riga-nota { color: var(--ambra); }
.scheda-sede-piede { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--grigio); }
.scheda-sede-piede .apri { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--verde); white-space: nowrap; font-size: .9rem; }
.scheda-sede-piede .apri .icona { width: 18px; height: 18px; }
.tutto-ok { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--raggio); background: #eef5ec; border: 1px solid #d9e7d6; }
@media (prefers-color-scheme: dark) { .tutto-ok { background: var(--verde-tenue); border-color: var(--verde-chiaro); } }
.tutto-ok > .icona { flex-shrink: 0; width: 26px; height: 26px; color: var(--verde-2); }
.tutto-ok p { margin: 4px 0 0; color: var(--grigio); font-size: .92rem; }
.elenco-sedi-ok li > a { display: flex; align-items: center; gap: 12px; }
.elenco-sedi-ok .riga-sede-icona { width: 34px; height: 34px; background: var(--verde-tenue); }
.elenco-sedi-ok .riga-sede-icona .icona { width: 18px; height: 18px; }
.elenco-sedi-ok .testo { flex: 1; min-width: 0; }
.elenco-sedi-ok .ora { font-weight: 700; color: var(--grigio); font-variant-numeric: tabular-nums; font-size: .9rem; }
.elenco-sedi-ok li > a > .icona:last-child { width: 18px; height: 18px; color: var(--grigio-chiaro); flex-shrink: 0; }

/* Impostazioni: indice a schede con icona, barra delle sezioni */
.griglia-impostazioni { display: grid; grid-template-columns: 1fr; gap: 10px; }
.titolo-gruppo { margin: 26px 0 12px; }
.voce-impostazioni { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: var(--raggio); background: var(--carta);
  border: 1px solid var(--bordo); box-shadow: var(--ombra); color: var(--testo); text-decoration: none; }
.voce-impostazioni:hover { border-color: var(--bordo-campo); background: var(--tenue); }
.voce-icona { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--verde-tenue); color: var(--verde-2); }
.voce-icona .icona { width: 22px; height: 22px; }
.voce-testo { flex: 1; min-width: 0; }
.voce-testo strong { display: block; font-weight: 800; }
.voce-testo small { font-size: .85rem; line-height: 1.4; }
.voce-impostazioni .freccia { width: 18px; height: 18px; color: var(--grigio-chiaro); flex-shrink: 0; }
.schede-impostazioni { display: flex; gap: 4px; overflow-x: auto; margin: -6px -16px 18px; padding: 0 16px; border-bottom: 1px solid var(--bordo); scrollbar-width: none; }
.schede-impostazioni::-webkit-scrollbar { display: none; }
.schede-impostazioni a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; color: var(--grigio); text-decoration: none;
  font-weight: 600; font-size: .95rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.schede-impostazioni a:hover { color: var(--verde); }
.schede-impostazioni a.attiva { color: var(--verde); font-weight: 800; border-bottom-color: var(--verde); }
.schede-impostazioni .icona { width: 18px; height: 18px; }

/* ——— dev.15: Calendario della sede (come la 1.3.4) ——— */
.calendario-griglia { display: grid; gap: 14px; }
.calendario-griglia > .scheda, .calendario-griglia .colonna > .scheda { margin: 0; }
.calendario-griglia .colonna { display: grid; gap: 14px; align-content: start; }
.scheda-mese { padding: 0; overflow: hidden; }
.mese-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--bordo); }
.mese-testa h2 { margin: 0; font-size: 1.1rem; }
.mese-navigazione { display: flex; gap: 6px; }
.mese-navigazione button { min-height: 44px; padding: 8px 14px; }
.mese-navigazione .icona-sola { width: 44px; padding: 0; }
.mese-navigazione .icona { width: 20px; height: 20px; }
.mese-giorni-settimana, .mese-settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 8px; }
.mese-giorni-settimana { padding-top: 12px; padding-bottom: 6px; font-size: .74rem; font-weight: 700; color: var(--grigio); text-align: center; }
.mese-griglia { padding: 0 0 8px; }
.mese-griglia > .caricamento { padding: 30px 16px; text-align: center; }
.giorno { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 54px; padding: 6px 0; margin: 2px 0; border: 0; border-radius: 12px;
  background: none; color: var(--testo); font: inherit; font-size: .95rem; font-weight: 600; box-shadow: none; }
button.giorno:hover { background: var(--tenue); color: var(--testo); }
.giorno.oggi > span { font-weight: 800; color: var(--verde-2); }
.giorno.chiuso > span { color: var(--grigio-chiaro); }
.giorno.fuori-mese { color: #c3cac4; font-weight: 500; }
@media (prefers-color-scheme: dark) { .giorno.fuori-mese { color: #46524c; } }
.giorno[aria-selected=true], button.giorno[aria-selected=true]:hover { background: var(--verde); color: #fff; box-shadow: 0 8px 18px rgba(22, 75, 63, .22); }
.giorno[aria-selected=true] > span { color: #fff; }
.segno-giorno { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #d3d9d4; flex-shrink: 0; }
.segno-giorno.completato { background: #3f8a5f; } .segno-giorno.da-registrare { background: #d9a441; } .segno-giorno.fuori { background: var(--rosso); }
.giorno.fuori-mese .segno-giorno { opacity: .45; }
@media (prefers-color-scheme: dark) { .segno-giorno { background: #4a5a52; } }
.giorno[aria-selected=true] .segno-giorno { background: #fff; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; border-top: 1px solid var(--bordo); font-size: .8rem; color: var(--grigio); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.giorno-scelto-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.giorno-scelto-testa h2 { margin: 0; }
.giorno-scelto-testa .icona { width: 20px; height: 20px; color: var(--grigio); }
.giorno-scelto-data { margin: 14px 0 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.giorno-scelto .pastiglie { margin: 10px 0 4px; }
.righe-giorno { list-style: none; margin: 12px 0 0; padding: 4px 0 0; border-top: 1px solid var(--bordo); }
.righe-giorno a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--bordo); }
.righe-giorno li:last-child a { border-bottom: 0; }
.righe-giorno a:hover .riga-titolo { color: var(--verde); }
.righe-giorno .icona { width: 20px; height: 20px; color: var(--verde-2); flex-shrink: 0; }
.righe-giorno .riga-titolo { flex: 1; min-width: 0; font-weight: 600; }
.righe-giorno strong { font-weight: 800; white-space: nowrap; }
.valore-tenue { color: var(--grigio); font-size: .88rem; }
.azioni-giorno { display: grid; gap: 8px; margin-top: 14px; }
.pulsante.largo { width: 100%; }
.pulsante.largo .icona { width: 18px; height: 18px; }
.banner.info { background: var(--verde-tenue); border-color: #d6e6db; color: var(--testo); }
.nota-calendario { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 14px 16px; border: 1px solid; border-radius: var(--raggio); font-size: .9rem; }
.nota-calendario p { margin: 0; color: var(--grigio); }
.nota-calendario .icona { flex-shrink: 0; width: 20px; height: 20px; color: var(--verde-2); }
@media (prefers-color-scheme: dark) { .banner.info { border-color: var(--verde-chiaro); } }
/* Aperture e chiusure */
.scorri { overflow-x: auto; margin: 0 -4px; }
.tabella-aperture { width: 100%; border-collapse: collapse; }
.tabella-aperture th, .tabella-aperture td { padding: 6px 4px; border-bottom: 1px solid var(--bordo); text-align: center; }
.tabella-aperture thead th { font-size: .74rem; font-weight: 700; color: var(--grigio); }
.tabella-aperture th[scope=row], .tabella-aperture thead th:first-child { text-align: left; font-weight: 600; padding-left: 4px; }
.tabella-aperture thead th:first-child { font-weight: 700; }
.tabella-aperture tbody tr:last-child > * { border-bottom: 0; }
.casella { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; cursor: pointer; }
.casella input { margin: 0; }
.casella.con-testo { gap: 8px; min-width: 0; font-size: .85rem; color: var(--grigio); }
.intestazione-scheda { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.intestazione-scheda h2 { margin: 0 0 2px; }
.intestazione-scheda .nota { margin: 0; }
.intestazione-scheda select { width: auto; min-height: 44px; flex-shrink: 0; }
button.piccolo, .pulsante.piccolo { min-height: 44px; padding: 8px 14px; font-size: .9rem; flex-shrink: 0; }
button.piccolo .icona { width: 18px; height: 18px; }
.elenco-festivita { list-style: none; margin: 4px 0 12px; padding: 0; }
.elenco-festivita li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--bordo); }
.nome-festa strong { display: block; font-size: .95rem; }
.nome-festa small { font-size: .8rem; }
.stato-festa { min-width: 48px; }
.elenco-chiusure { box-shadow: none; margin-top: 10px; }
.elenco-chiusure > li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chiusura-testo { flex: 1; min-width: 160px; }

/* ——— dev.16: Motivi di ritardo (formule proposte) ——— */
.formula-motivo { margin: 4px 0 8px; }
.formula-motivo select { width: 100%; }
.elenco-formule { box-shadow: none; margin-top: 10px; }
.elenco-formule > li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.formula-testo { flex: 1; min-width: 180px; }
.formula-testo.nascosta { color: var(--grigio); }
.formule-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* ——— dev.17: Non conformità ——— */
.elenco-nc .nc-descrizione { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--testo); }
.testo-lungo { white-space: pre-wrap; overflow-wrap: anywhere; }
.nc-collegate.aperte { border-left: 4px solid var(--rosso); }
.nc-collegate h2 { margin-top: 0; }

/* ——— dev.18: Codici QR (gestione, etichette in millimetri veri, lettore) ——— */
.scelte-qr { display: grid; gap: 10px; }
.scelta-qr { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bordo); border-radius: 14px; cursor: pointer; }
.scelta-qr:has(input:checked) { border: 2px solid var(--verde); padding: 11px 13px; background: var(--verde-tenue); }
.scelta-qr input { margin-top: 4px; width: 22px; height: 22px; accent-color: var(--verde); flex-shrink: 0; }
.scelta-qr span { display: grid; gap: 2px; }
.scelta-qr small { color: var(--grigio); line-height: 1.4; }
.elenco-qr > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.voce-qr { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 240px; }
.voce-qr > span { display: grid; gap: 2px; min-width: 0; }
.voce-qr small { color: var(--grigio); }
svg.qr.miniatura { width: 56px; height: 56px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--bordo); }
.qr-vuoto { width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; border: 1px dashed var(--bordo); border-radius: 6px; color: var(--grigio); }
.azioni-qr { display: flex; flex-wrap: wrap; gap: 8px; }
.formati-etichette button { display: grid; gap: 2px; text-align: left; border-radius: 14px; }
.formati-etichette small { font-weight: 500; color: var(--grigio); }
.scelta-etichette label { display: flex; align-items: center; gap: 12px; min-height: var(--tocco); cursor: pointer; }
.scelta-etichette input { width: 22px; height: 22px; accent-color: var(--verde); }
.barra-stampa { position: sticky; bottom: calc(var(--barra, 72px) + 8px); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0; padding: 10px 12px 10px 16px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 16px; box-shadow: var(--ombra); font-weight: 600; }
.anteprima-etichette { display: grid; gap: 14px; margin: 8px 0 18px; overflow: hidden; }
.pagina-etichette { width: 210mm; height: 297mm; box-sizing: border-box; background: #fff; color: #111; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); overflow: hidden; font-family: inherit; }
.pagina-etichette .etichetta { box-sizing: border-box; display: flex; align-items: center; overflow: hidden; color: #111; }
.pagina-etichette svg { flex: none; display: block; }
.testo-etichetta { display: grid; gap: 1.2mm; min-width: 0; }
.testo-etichetta strong { font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.testo-etichetta .azione-etichetta { font-weight: 600; color: #164b3f; line-height: 1.2; }
.testo-etichetta small { color: #555; line-height: 1.2; overflow-wrap: anywhere; }
/* 8 per foglio: etichette 99,1 × 67,7 mm (2 × 4), margini del foglio 13,1 mm sopra e 4,65 mm ai lati */
.formato-8 { padding: 13.1mm 4.65mm; display: grid; grid-template-columns: repeat(2, 99.1mm); grid-auto-rows: 67.7mm; column-gap: 2.5mm; align-content: start; }
.formato-8 .etichetta { gap: 4mm; padding: 4mm 5mm; }
.formato-8 svg { width: 50mm; height: 50mm; }
.formato-8 strong { font-size: 15pt; }
.formato-8 .azione-etichetta { font-size: 9.5pt; }
.formato-8 small { font-size: 7.5pt; }
/* 21 per foglio: etichette 70 × 42,3 mm (3 × 7), senza margini */
.formato-21 { padding: 0.45mm 0; display: grid; grid-template-columns: repeat(3, 70mm); grid-auto-rows: 42.3mm; align-content: start; }
.formato-21 .etichetta { gap: 2.5mm; padding: 2.5mm 3mm; }
.formato-21 svg { width: 36mm; height: 36mm; }
.formato-21 strong { font-size: 10.5pt; }
.formato-21 .azione-etichetta { font-size: 7pt; }
.formato-21 small { font-size: 6pt; }
/* 1 per foglio: A4 intero, da plastificare */
.formato-1 { display: flex; align-items: center; justify-content: center; padding: 15mm; }
.formato-1 .etichetta { flex-direction: column; text-align: center; gap: 8mm; }
.formato-1 .testo-etichetta { gap: 4mm; justify-items: center; }
.formato-1 svg { width: 140mm; height: 140mm; }
.formato-1 strong { font-size: 32pt; }
.formato-1 .azione-etichetta { font-size: 17pt; }
.formato-1 small { font-size: 12pt; }
.riquadro-lettore { position: relative; overflow: hidden; border-radius: 20px; background: #000; aspect-ratio: 3 / 4; max-height: 62vh; margin: 8px auto 12px; max-width: 480px; }
.lettore-qr { width: 100%; height: 100%; object-fit: cover; display: block; }
.mirino { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
.apertura-qr h1 { margin-top: 0; }
#stampa-etichette { display: none; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  body.stampa-in-corso > :not(#stampa-etichette) { display: none !important; }
  body.stampa-in-corso { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  #stampa-etichette { display: block; }
  #stampa-etichette .pagina-etichette { zoom: 1 !important; box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  #stampa-etichette .pagina-etichette:last-child { break-after: auto; page-break-after: auto; }
  .pagina-etichette, .pagina-etichette * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ——— Report e Storico (§13) ——— */
.griglia-report { display: grid; gap: 0; }
.passo-report h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.numero-passo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--verde-tenue); color: var(--verde); font-size: .9rem; font-weight: 800; flex: none; }
.tipi-report { display: grid; gap: 10px; }
.tipo-report { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--bordo-campo); border-radius: 12px; background: var(--carta); cursor: pointer; }
.tipo-report:has(input:checked) { border: 2px solid var(--verde); padding: 13px 15px; background: var(--verde-tenue); }
.tipo-report input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--verde); flex: none; }
.tipo-report span, .casella-report span { display: grid; gap: 2px; }
.tipo-report small, .casella-report small { color: var(--grigio); font-weight: 500; }
.periodi-rapidi { margin-bottom: 10px; }
.date-report { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.date-report .campo { margin: 0; }
.caselle-report { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.casella-report { display: flex; gap: 12px; align-items: center; min-height: var(--tocco); padding: 8px 14px; border: 1px solid var(--bordo-campo); border-radius: 12px; cursor: pointer; font-weight: 700; }
.casella-report:has(input:checked) { border-color: var(--verde); background: var(--verde-tenue); }
.casella-report input { width: 22px; height: 22px; margin: 0; accent-color: var(--verde); flex: none; }
.tutte-nessuna { margin-left: 8px; white-space: nowrap; }
.tutte-nessuna button.collegamento { margin-left: 8px; padding: 4px 0; }
.formati-report { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.formato-report { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; text-align: left; border-radius: 12px; background: var(--carta); color: var(--testo); border: 1px solid var(--bordo-campo); box-shadow: none; }
.formato-report:hover { background: var(--verde-tenue); border-color: var(--verde); color: var(--testo); }
.formato-report .icona { width: 28px; height: 28px; color: var(--verde); flex: none; }
.formato-report span { display: grid; gap: 2px; }
.formato-report strong { font-size: 1.05rem; }
.formato-report small { color: var(--grigio); font-weight: 500; font-size: .85rem; }
.formato-report:disabled { opacity: .55; }
.esito-report:not(:empty) { margin-top: 12px; }
.vuoto-report-pagina { text-align: center; padding: 28px 18px; }
.vuoto-report-pagina > .icona { width: 40px; height: 40px; color: var(--grigio); }
.filtri-storico .riga-filtri { display: grid; gap: 12px; margin-top: 12px; }
.filtri-storico .riga-filtri .campo { margin: 0; }
.riepilogo-storico { color: var(--grigio); font-weight: 600; margin: 6px 2px 10px; }
.avviso-troncato { color: var(--ambra); }
.lista-storico > li > a { display: flex; gap: 12px; align-items: flex-start; }
.lista-storico .icona-registro { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--verde-tenue); color: var(--verde); flex: none; }
.lista-storico .testo-storico { display: grid; gap: 3px; flex: 1; min-width: 0; }
.lista-storico .testo-storico small { color: var(--grigio); overflow-wrap: anywhere; }
.lista-storico .quando { font-weight: 700; color: var(--verde-2) !important; }
.lista-storico .motivo { color: var(--testo) !important; }
.lista-storico .segni { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.lista-storico li.annullata strong { text-decoration: line-through; text-decoration-color: var(--grigio-chiaro); color: var(--grigio); }
.lista > li.vuoto { color: var(--grigio); text-align: center; padding: 22px 18px; }
.pagine-storico:not(:empty) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
.pagine-storico span { color: var(--grigio); font-weight: 700; text-align: center; }
.pagine-storico button { display: inline-flex; align-items: center; gap: 6px; }
.pagine-storico button:disabled { visibility: hidden; }
.lista.eventi .dettagli-evento { display: block; margin: 2px 0; }
.lista.eventi small { display: block; color: var(--grigio); }
.esporta-storico { margin-top: 22px; }
.permesso-ruoli .caselle-report { margin: 10px 0; }

/* Stampa del report: solo il documento, una sezione per pagina, intestazione della tabella ripetuta */
#stampa-report { display: none; }
@media print {
  body.stampa-report-in-corso > :not(#stampa-report) { display: none !important; }
  body.stampa-report-in-corso { background: #fff !important; padding: 0 !important; margin: 0 !important; color: #202e27; }
  body.stampa-report-in-corso #stampa-report { display: block; font: 8pt/1.3 Manrope, system-ui, sans-serif; }
  .foglio-report { break-after: page; page-break-after: always; }
  .foglio-report:last-child { break-after: auto; page-break-after: auto; }
  .intestazione-report { display: flex; align-items: center; gap: 12pt; padding-bottom: 6pt; margin-bottom: 6pt; border-bottom: 0.6pt solid #b9c9c1; }
  .intestazione-report.pos-center { justify-content: center; }
  .intestazione-report.pos-right { flex-direction: row-reverse; justify-content: space-between; }
  .intestazione-report.disp-stacked { flex-direction: column; gap: 4pt; align-items: flex-start; }
  .intestazione-report.disp-stacked.pos-center { align-items: center; text-align: center; }
  .intestazione-report.disp-stacked.pos-right { align-items: flex-end; text-align: right; }
  .intestazione-report .logo-report { object-fit: contain; flex-shrink: 0; }
  .foglio-report header .intestazione-report p { margin: 0 0 1pt; font-size: 8.5pt; color: #555; }
  .foglio-report header .intestazione-report p.prima { font-size: 11pt; font-weight: 700; color: #202e27; }
  .foglio-report header h2 { font-size: 14pt; color: #164b3f; margin: 0 0 2pt; }
  .foglio-report header p { margin: 0 0 2pt; color: #555; font-size: 8.5pt; }
  .foglio-report header .nota-report { font-style: italic; }
  .foglio-report table { width: 100%; border-collapse: collapse; margin-top: 6pt; }
  .foglio-report thead { display: table-header-group; }
  .foglio-report tr { break-inside: avoid; page-break-inside: avoid; }
  .foglio-report th { text-align: left; background: #e7efe9; color: #164b3f; font-weight: 800; border-bottom: 1.2pt solid #164b3f; padding: 3pt; vertical-align: bottom; }
  .foglio-report td { padding: 3pt; border-bottom: .5pt solid #d6ddd8; vertical-align: top; overflow-wrap: anywhere; }
  .foglio-report tbody tr:nth-child(even) td { background: #f6f8f6; }
  .foglio-report .numero { text-align: right; white-space: nowrap; }
  .foglio-report .non-conforme { color: #b03f3f; font-weight: 800; }
  .foglio-report .chiuso { color: #777; }
  .foglio-report .vuoto-report { font-style: italic; color: #555; margin-top: 10pt; }
  .foglio-report header .piede-report { color: #777; font-size: 7pt; }
  .foglio-report table.da-compilare td { height: 7mm; vertical-align: middle; }
  .sigillo-report { display: flex; gap: 14pt; align-items: flex-start; padding: 8pt 0; border-bottom: .5pt solid #d6ddd8; break-inside: avoid; page-break-inside: avoid; }
  .sigillo-report .qr-sigillo { width: 34mm; height: 34mm; flex: none; }
  .sigillo-report strong { font-size: 11pt; color: #202e27; }
  .sigillo-report p { margin: 2pt 0; font-size: 9pt; }
  .sigillo-report .impronta-report { font-family: ui-monospace, Consolas, monospace; font-weight: 700; overflow-wrap: anywhere; }
  .sigillo-report .url-report { color: #164b3f; font-size: 8pt; overflow-wrap: anywhere; }
  #stampa-report, #stampa-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ——— Computer ——— */
@media (min-width: 900px) {
  /* Report e Storico */
  .griglia-report { grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: start; }
  .griglia-report .passo-report:last-child { grid-column: 1 / -1; }
  .formati-report { grid-template-columns: repeat(4, 1fr); }
  .filtri-storico .riga-filtri { grid-template-columns: 1fr 1fr 2fr; }
  .lista-storico .segni { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 280px; }
  /* menu laterale */
  .laterale .marchio-app { padding: 0 6px 18px; }
  .laterale .marchio-sotto { text-transform: uppercase; white-space: normal; line-height: 1.5; max-width: 130px; }
  .sede-laterale { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; margin: 0 0 18px; padding: 12px; border-radius: 12px; border: 1px solid var(--bordo);
    background: var(--carta); box-shadow: var(--ombra); color: var(--testo); text-align: left; font: inherit; }
  button.sede-laterale:hover { background: var(--tenue); border-color: var(--bordo-campo); color: var(--testo); }
  .sede-laterale-icona { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--verde-tenue); color: var(--verde-2); }
  .sede-laterale-icona .icona { width: 18px; height: 18px; }
  .sede-laterale-testo { flex: 1; min-width: 0; }
  .sede-laterale-testo strong { display: block; font-size: .9rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
  .sede-laterale-testo small { font-size: .74rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sede-laterale > .icona { flex-shrink: 0; width: 16px; height: 16px; color: var(--grigio); }
  .etichetta-menu { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio-chiaro); padding: 0 12px; margin: 10px 0 8px; }
  .menu-laterale + .etichetta-menu { margin-top: 18px; }
  .menu-nota { margin: 4px 12px 0; font-size: .8rem; color: var(--grigio); line-height: 1.45; }
  .piede-laterale { margin-top: auto; padding-top: 18px; }
  /* schermi bassi o tante voci: il menu scorre, niente si schiaccia */
  .laterale { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .laterale > * { flex-shrink: 0; }
  .invito-app { padding: 14px; border-radius: 12px; background: var(--verde-tenue); border: 1px solid #d6e6db; }
  @media (prefers-color-scheme: dark) { .invito-app { border-color: var(--verde-chiaro); } }
  .invito-app strong { display: block; font-size: .88rem; margin-bottom: 10px; }
  .invito-app button { width: 100%; min-height: 40px; font-size: .88rem; background: var(--carta); }
  .sessione-protetta { display: flex; align-items: center; gap: 6px; margin: 14px 4px; font-size: .74rem; color: var(--grigio); }
  .sessione-protetta .icona { width: 14px; height: 14px; }
  .profilo { margin-top: 0; }
  .profilo .email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
  .profilo-impostazioni { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--grigio); }
  .profilo-impostazioni:hover { background: var(--tenue); color: var(--verde); }
  .profilo-impostazioni .icona { width: 18px; height: 18px; }

  /* barra in alto: percorso a sinistra; a destra connessione, iniziali, lucchetto, «Nuovo controllo» */
  .testata { min-height: 76px; padding: 0 32px; gap: 18px; }
  .testata .marchio-app { display: none; }
  .percorso { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: .9rem; color: var(--grigio); }
  .percorso a { color: var(--grigio); text-decoration: none; white-space: nowrap; }
  .percorso a:hover { color: var(--verde); }
  .percorso > span:not(.separatore) { color: var(--testo); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .percorso .separatore .icona { width: 14px; height: 14px; color: var(--grigio-chiaro); display: block; }
  .azioni-testata { gap: 10px; }
  .stato-rete { display: inline-flex; align-items: center; gap: 6px; padding-right: 16px; margin-right: 4px; border-right: 1px solid var(--bordo); font-size: .82rem; color: var(--grigio); }
  .stato-rete .icona { width: 17px; height: 17px; color: #3f8a5f; }
  .stato-rete.assente, .stato-rete.assente .icona { color: var(--rosso); font-weight: 700; }
  .persona { width: 40px; height: 40px; border: 1px solid var(--bordo-campo); }
  .testata button.esci { width: 42px; height: 42px; }
  .qr-rapido { width: 42px; height: 42px; }
  .nuovo-controllo { display: inline-flex; min-height: 46px; padding: 0 18px; margin: 0 0 0 6px; gap: 8px; font-size: .95rem; box-shadow: 0 6px 16px rgba(22, 75, 63, .2); }
  .nuovo-controllo .icona { width: 19px; height: 19px; stroke-width: 2.2; }

  /* contenuto più largo, come la 1.3.4 */
  main { max-width: 1240px; padding: 28px 40px 32px; }
  .avviso-licenza { max-width: 1160px; width: calc(100% - 80px); margin-top: 28px; padding: 14px 18px; align-items: center; font-size: .98rem; }
  .avviso-licenza > div { display: flex; align-items: center; gap: 16px; flex: 1; }
  .avviso-licenza > div > p { flex: 1; }
  .avviso-licenza .pulsante { margin-top: 0; min-height: 42px; flex-shrink: 0; }
  .piede { display: flex; justify-content: space-between; gap: 16px; max-width: 1240px; margin: 0 auto; padding: 0 40px 28px; font-size: .76rem; color: var(--grigio-chiaro); }
  .piede > span { display: inline-flex; align-items: center; gap: 6px; }
  .piede .icona { width: 14px; height: 14px; }

  .eroe h1 { font-size: 2.75rem; }
  .eroe-riga { align-items: center; }
  .fab { width: auto; height: 54px; padding: 0 22px; gap: 10px; display: inline-flex; align-items: center; border-radius: 12px; font-size: 1rem; font-weight: 800; }
  .fab .icona { width: 22px; height: 22px; }
  .fab .testo-pulsante { display: inline; }
  .eroe-riga:has(> .pulsante-eroe) { flex-wrap: nowrap; }
  .pulsante-eroe { width: auto; min-height: 54px; padding: 0 22px; margin: 0; box-shadow: 0 8px 20px rgba(22, 75, 63, .2); }
  .registrazioni.tabella .ora .anno { display: inline; }
  .riga-due:has(> input + button) { grid-template-columns: minmax(0, 1fr) 150px; }
  .indicatori { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
  .indicatore { padding: 20px 22px; }

  .panoramica-griglia { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
  .panoramica-griglia .schede > .scheda:first-child, .panoramica-griglia .colonna-laterale > :first-child { margin-top: 0; }
  .zona-impostazioni > *, main > form, main > .scheda:has(> form) { max-width: 920px; }
  .panoramica-griglia .scheda { padding: 22px 24px; }
  .attivita-recenti .lista { margin: 0 -24px -22px; }

  /* registrazioni in tabella */
  .registrazioni.tabella li > a, .registrazioni.tabella .testa-tabella { display: grid; grid-template-columns: 130px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) 18px;
    grid-template-areas: none; gap: 16px; align-items: center; padding: 14px 22px; }
  .registrazioni.tabella .testa-tabella { display: grid; padding-top: 12px; padding-bottom: 12px; background: var(--tenue); font-size: .7rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--grigio); }
  .registrazioni.tabella > li > a > * { grid-area: auto; }
  .registrazioni.tabella .operatore { display: block; color: var(--grigio); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .registrazioni.tabella .testo small .operatore-nome { display: none; }
  .registrazioni.tabella .pastiglie:empty { display: block; }
  .filtri { padding: 12px 14px; border-radius: var(--raggio); background: var(--carta); border: 1px solid var(--bordo); }
  .filtri select { flex: 0 1 260px; }

  .griglia-sedi { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
  .scheda-sede { padding: 20px 22px; }
  .griglia-impostazioni { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
  .schede-impostazioni { margin: -6px 0 24px; padding: 0; }
  .zona-impostazioni > p:last-child:has(> a[href="#/impostazioni"]) { display: none; }
}
@media (min-width: 900px) {
  .linguette-calendario { margin: -6px 0 24px; padding: 0; }
  .calendario-griglia { grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
  .calendario-griglia.aperture { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); }
  .calendario-griglia .scheda:not(.scheda-mese) { padding: 22px 24px; }
  .mese-testa { padding: 18px 22px; }
  .mese-giorni-settimana, .mese-settimana { padding: 0 16px; gap: 8px; }
  .giorno { min-height: 64px; }
  .legenda { padding: 14px 22px; }
  .eroe-riga:has(> .pulsante-eroe.secondario) .pulsante-eroe { box-shadow: none; }
}
@media print { .percorso, .stato-rete, .nuovo-controllo, .piede, .sede-laterale, .schede-impostazioni, .mese-navigazione, .azioni-giorno { display: none !important; } }

/* Impostazioni › Persone: riepilogo «cosa vede e cosa può fare», scelta dei registri, tabella dei ruoli */
.riepilogo-persona { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--verde-tenue); }
.riepilogo-persona h3 { margin: 0 0 8px; font-size: 1rem; }
.riepilogo-persona dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.riepilogo-persona dt { font-weight: 800; color: #50644f; }
.riepilogo-persona dd { margin: 0; }
@media (prefers-color-scheme: dark) { .riepilogo-persona dt { color: var(--grigio); } }
@media (max-width: 480px) { .riepilogo-persona dl { grid-template-columns: 1fr; } .riepilogo-persona dd { margin-bottom: 6px; } }
.elenco-permessi { margin: 10px 0 0; padding-left: 20px; }
.elenco-permessi li { margin: 3px 0; }
.caselle-moduli { padding-left: 28px; }
.scelta-moduli:has(input[value=tutti]:checked) .caselle-moduli { display: none; }
.tabella-scorre { overflow-x: auto; }
.tabella-ruoli { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabella-ruoli th, .tabella-ruoli td { padding: 8px 6px; border-bottom: 1px solid var(--bordo); text-align: center; }
.tabella-ruoli th[scope=row] { text-align: left; font-weight: 600; }
.tabella-ruoli thead th { font-size: .78rem; color: var(--grigio); }
.tabella-ruoli thead th:first-child { text-align: left; }
.tabella-ruoli .si { color: var(--verde); font-weight: 800; }
.tabella-ruoli .no { color: var(--grigio); }

/* Impostazioni › Ruoli e permessi */
.tabella-ruoli td.modificabile label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.tabella-ruoli td.modificabile input { width: 22px; height: 22px; accent-color: var(--verde); }
.tabella-ruoli td.bloccata { color: var(--grigio); }
.tabella-ruoli td .lucchetto .icona { width: 13px; height: 13px; margin-left: 3px; vertical-align: -1px; }
.tabella-ruoli .cambiata, .legenda-ruoli .cambiata { color: #b26b00; font-weight: 800; margin-left: 3px; }
.legenda-ruoli { list-style: none; margin: 12px 0 0; padding: 0; font-size: .85rem; color: var(--grigio); display: grid; gap: 4px; }
.legenda-ruoli .icona { width: 14px; height: 14px; vertical-align: -2px; }
.tabella-ruoli td { white-space: nowrap; }

/* Stato del cron in Impostazioni (dev.27) */
.messaggio.attenzione { background: var(--ambra-tenue); border-color: var(--ambra-bordo); color: var(--ambra); }
.zona-cron:empty { display: none; }
.zona-cron { margin: 0 0 1rem; }
.riga-cron[data-stato="ok"] { margin-top: 1.25rem; color: var(--grigio); }
.riga-cron[data-stato="ok"] > p:first-child { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.riga-cron[data-stato="ok"] .icona { width: 1.15rem; height: 1.15rem; }
.riga-cron p { margin: 0 0 .4rem; }
.comando-cron { display: block; margin: .25rem 0 .5rem; padding: .5rem .65rem; border-radius: 10px; background: var(--tenue); border: 1px solid var(--bordo);
  font-size: .85rem; overflow-wrap: anywhere; user-select: all; color: var(--testo); }

/* ——— Loghi e stampe (modulo, dev.28) ——— */
.file-nascosto { display: none; }
.griglia-loghi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.griglia-loghi .scheda { margin: 0; }
.riga-logo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.azioni-logo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.azioni-logo small { color: var(--testo-tenue, #5f6f67); }
.anteprima-logo { display: block; max-width: 220px; max-height: 110px; object-fit: contain; border: 1px dashed var(--bordo); border-radius: 10px; padding: 8px; background: #fff; }
.anteprima-logo.app { width: 96px; height: 96px; border-radius: 22px; padding: 6px; }
.anteprima-logo.vuota { display: grid; place-items: center; width: 180px; height: 80px; color: var(--testo-tenue, #5f6f67); font-size: .9rem; }
.anteprima-logo.vuota.app { width: 96px; height: 96px; text-align: center; }
.anteprima-logo.ereditato { opacity: .55; }
.misure-loghi { display: grid; gap: 14px; }
.gruppo-misure { border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 14px 14px; margin: 0; }
.gruppo-misure legend { font-weight: 700; padding: 0 6px; }
.controlli-misure { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cursore-logo, .scelta-logo { display: grid; grid-template-columns: 1fr; gap: 2px; font-size: .92rem; }
.cursore-logo { grid-template-columns: 1fr auto; }
.cursore-logo span { grid-column: 1 / -1; }
.cursore-logo output { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.anteprima-documento { margin-top: 12px; width: 100%; max-width: 640px; }
.pagina-finta { background: #fff; border: 1px solid var(--bordo); border-radius: 4px; aspect-ratio: 297 / 210; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.banda-finta { display: flex; align-items: center; gap: 4%; padding-bottom: 2%; border-bottom: 1px solid #b9c9c1; }
.banda-finta.pos-center { justify-content: center; }
.banda-finta.pos-right { flex-direction: row-reverse; justify-content: space-between; }
.banda-finta.sotto { flex-direction: column; align-items: flex-start; gap: 2px; }
.banda-finta.sotto.pos-center { align-items: center; text-align: center; }
.banda-finta.sotto.pos-right { align-items: flex-end; text-align: right; }
.banda-finta img, .logo-finto { object-fit: contain; flex-shrink: 0; }
.logo-finto { display: grid; place-items: center; background: #e7efe9; color: #5f6f67; font-size: 9px; border-radius: 2px; }
.righe-finte { color: #5f6f67; line-height: 1.25; min-width: 0; }
.righe-finte .prima { font-weight: 700; color: #202e27; font-size: 1.25em; }
.titolo-finto { margin-top: 2%; font-weight: 700; color: #164b3f; font-size: 9px; }
.tabella-finta { margin-top: 1.5%; height: 40%; background: repeating-linear-gradient(#fff 0 9px, #eef3ef 9px 10px); border-top: 6px solid #e7efe9; }
.excel-finto { position: relative; height: 140px; border: 1px solid var(--bordo); background-color: #fff;
  background-image: linear-gradient(#e3e8e5 1px, transparent 1px), linear-gradient(90deg, #e3e8e5 1px, transparent 1px);
  background-size: calc(96px * var(--k, 1)) calc(20px * var(--k, 1)); overflow: hidden; }
.excel-finto .logo-excel, .excel-finto .logo-finto { position: absolute; }
.zona-sede-loghi { margin-top: 8px; }

/* Chiusura mensile sigillata (dev.30) */
.lista-mesi > li small, .storia-mese > li small { display: block; color: var(--grigio); margin-top: 2px; }
.lista-mesi > li[data-stato="in_corso"] strong { color: var(--grigio); }
.azioni-mese { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.azioni-mese button { margin: 0; }
.dialogo.dialogo-largo { width: min(94vw, 640px); }
.tabella-mese { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabella-mese th, .tabella-mese td { padding: 6px 8px; border-bottom: 1px solid var(--bordo); text-align: right; }
.tabella-mese th:first-child, .tabella-mese td:first-child { text-align: left; }
.storia-mese { margin: 12px 0; box-shadow: none; }
.storia-mese a { display: inline-block; margin-top: 6px; }
.codice-sigillo { font-family: ui-monospace, "SF Mono", Consolas, monospace; word-break: break-all; font-size: .8rem; }
.nota-mese-chiuso { display: flex; gap: 10px; align-items: flex-start; }
.tabella-scorrevole { overflow-x: auto; margin: 12px 0; }

/* Marca temporale (modulo marca_temporale, dev.31) */
.marca-temporale h3 { margin: 22px 0 8px; font-size: 1rem; }
.marca-temporale .griglia-campi { display: grid; grid-template-columns: 1fr; gap: 0 16px; align-items: start; padding: 10px 0; border-top: 1px solid var(--bordo); }
@media (min-width: 720px) { .marca-temporale .griglia-campi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.marca-temporale .campo-casella label { display: flex; align-items: center; font-weight: 700; min-height: 48px; cursor: pointer; }
.marca-temporale .elenco-semplice { margin: 8px 0; padding-left: 20px; }
.marca-temporale .elenco-fascicoli { list-style: none; margin: 0; padding: 0; }
.marca-temporale .scheda-fascicolo { padding: 14px 0; border-top: 1px solid var(--bordo); }
.marca-temporale .scheda-fascicolo p { margin: 6px 0; }
.marca-temporale .testa-fascicolo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.marca-temporale .azioni-file, .marca-temporale .azioni-secondarie { display: flex; flex-wrap: wrap; gap: 8px; }
.marca-temporale .azioni-file .pulsante { min-height: 40px; padding: 7px 12px; font-size: .88rem; text-decoration: none; }
.marca-temporale .impronta { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem; overflow-wrap: anywhere; }

/* Impostazioni › Moduli (dev.33): stato, chi lo usa, sede per sede, disattiva / riattiva / disinstalla */
.elenco-moduli > li.voce-modulo { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.voce-modulo .testa-modulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.voce-modulo .azioni { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.voce-modulo .azioni button { width: auto; min-height: 42px; padding: 0 16px; }
.sedi-modulo summary { cursor: pointer; color: var(--verde-2); font-weight: 700; padding: 4px 0; }
.sedi-modulo .caselle-moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin: 8px 0; }

/* Copia dei dati (dev.34) */
.copia-dati dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 16px; }
.copia-dati dt { color: var(--testo-tenue, #5b6b62); }
.copia-dati dd { margin: 0; font-weight: 600; }
@media (max-width: 480px) { .copia-dati dl { grid-template-columns: 1fr; gap: 2px; } .copia-dati dd { margin-bottom: 8px; } }
.zona-impostazioni .elenco-semplice { margin: 8px 0; padding-left: 20px; }

/* Sensori (modulo «sensori», dev.43): grafico delle letture */
.grafico-sensore svg.grafico { display: block; width: 100%; height: auto; margin: 10px 0 4px; }
.sensori-elenco li strong .pastiglia { margin-left: 4px; }

/* Abbattimento (modulo «abbattimento», dev.48): tempo che scorre ed etichetta con «consumare entro» */
[data-ciclo-tempo] { font-variant-numeric: tabular-nums; }
[data-ciclo-tempo][data-tono=quasi] { color: var(--ambra, #9a6700); font-weight: 700; }
[data-ciclo-tempo][data-tono=scaduto] { color: var(--rosso); font-weight: 700; }
[data-ciclo-tempo][data-tono=pronto] { color: var(--verde); font-weight: 700; }
.riepilogo-ciclo { margin: 4px 0 12px; }
.etichetta-abbattimento .azione-etichetta { font-weight: 800; }
.formato-21 .etichetta-abbattimento svg { width: 30mm; height: 30mm; }
.formato-21 .etichetta-abbattimento .testo-etichetta { gap: .6mm; }
.formato-21 .etichetta-abbattimento strong { font-size: 9pt; -webkit-line-clamp: 2; }
.formato-21 .etichetta-abbattimento small { font-size: 5.5pt; }
.formato-8 .etichetta-abbattimento svg { width: 44mm; height: 44mm; }
.formato-8 .etichetta-abbattimento .azione-etichetta { font-size: 11pt; }
.abbattimento [data-campo=tipo] { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.abbattimento [data-campo=tipo] button { justify-content: start; justify-items: start; text-align: left; }

/* dev.50: Olio esausto (CONOE), foto del formulario nel dettaglio del ritiro */
.foto-formulario .miniatura-formulario { display: inline-block; }
.foto-formulario .miniatura-formulario img { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; border: 1px solid var(--bordo); }
.foto-formulario .azioni-copia { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }

/* dev.51: Tracciabilità (modulo «tracciabilita»): ingredienti con i lotti, ricerca, traccia a monte e a valle, richiamo */
.pulsante.pericolo { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.tracciabilita fieldset.ingredienti { border: 1px solid var(--bordo-campo); border-radius: 13px; padding: 12px 14px; margin: 12px 0; min-width: 0; }
.tracciabilita fieldset.ingredienti legend { font-weight: 800; padding: 0 6px; }
.ingredienti-scelti { margin: 4px 0 10px; }
.ingredienti-scelti li { display: flex; align-items: center; gap: 10px; }
.ingredienti-scelti li.ko strong, .coinvolti li.ko { color: var(--rosso); }
.ingredienti-scelti .testo-ingrediente { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ingredienti-scelti .testo-ingrediente small { color: var(--grigio); overflow-wrap: anywhere; }
.ingredienti-scelti button.piccolo { min-height: 40px; min-width: 40px; padding: 6px 10px; flex: none; }
.lotti-proposti .riquadro { min-height: 64px; }
.lotti-proposti .riquadro small { color: var(--grigio); overflow-wrap: anywhere; }
.ultima-volta:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.ultima-volta button.pastiglia { min-height: 32px; padding: 4px 10px; border-radius: 999px; font-size: .82rem; }
.ingrediente-manuale { margin-top: 10px; }
.ingrediente-manuale summary { cursor: pointer; font-weight: 700; color: var(--verde); min-height: 40px; display: flex; align-items: center; }
.errore-manuale:empty { display: none; }
.anteprima-entro { display: block; color: var(--verde-2); font-weight: 700; margin-top: 4px; }
.lista-lotti li > a { display: grid; gap: 2px; }
.lista-lotti small { color: var(--grigio); overflow-wrap: anywhere; }
.albero-traccia { list-style: none; margin: 4px 0; padding-left: 0; }
.albero-traccia .albero-traccia { padding-left: 18px; border-left: 2px solid var(--verde-tenue); margin-left: 6px; }
.albero-traccia li { padding: 6px 0; }
.albero-traccia li > small { display: block; color: var(--grigio); }
.albero-traccia li > a, .albero-traccia li > span { font-weight: 700; overflow-wrap: anywhere; }
.coinvolti { margin: 0; padding-left: 18px; }
.coinvolti li { margin: 2px 0; overflow-wrap: anywhere; }
.etichetta-preparazione .azione-etichetta { font-weight: 800; }
@media print { body.stampa-report-in-corso #stampa-report.stampa-traccia { padding: 12mm; } }

/* dev.53: Allergeni (modulo «allergeni»): pulsanti degli allergeni, schede, Tabella allergeni, cambi di produzione */
.chip-allergeni button { min-width: 0; min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.chip-allergeni button[aria-pressed=true] { padding: 5px 11px; border-color: var(--ambra); background: var(--ambra-tenue); color: var(--ambra); }
.chip-allergeni button[data-allergene=nessuno][aria-pressed=true] { border-color: var(--verde); background: var(--verde-tenue); color: var(--verde); }
.chip-allergeni button:disabled { cursor: default; opacity: .85; }
.allergeni-elenco { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lista-prodotti-allergeni li > a, .lista-schede-allergeni li > a { display: grid; gap: 2px; }
.lista-schede-allergeni small.ko { color: var(--rosso); font-weight: 700; }
.anteprima.attenzione { color: var(--ambra); }
.ingredienti-scelti li.attenzione small { color: var(--ambra); }
.proposta-allergeni:not(:empty) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.allergeni-calcolati:not(:empty) { margin: 6px 0; }
.allergeni-calcolati p { margin: 4px 0; }
.prodotto-a-mano { border-left: 3px solid var(--verde-tenue); padding-left: 12px; margin-top: 8px; }
.tabella-scorrevole { overflow-x: auto; margin: 12px 0; }
.tabella-allergeni { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabella-allergeni th, .tabella-allergeni td { border-bottom: 1px solid var(--bordo-campo); padding: 6px; text-align: left; }
.tabella-allergeni th.allergene { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .78rem; white-space: nowrap; vertical-align: bottom; text-align: left; }
.tabella-allergeni td.segno { text-align: center; font-size: 1.1rem; min-width: 28px; }
.tabella-allergeni td.contiene { color: var(--ambra); background: var(--ambra-tenue); font-weight: 800; }
.tabella-allergeni td.tracce { color: var(--grigio); }
.allergeni-etichetta { font-weight: 700; }
@media print {
  body.stampa-report-in-corso #stampa-report.stampa-allergeni { padding: 10mm; font-size: 10pt; }
  .stampa-allergeni .tabella-allergeni th.allergene { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 8pt; }
  .stampa-allergeni .tabella-allergeni td.segno { text-align: center; font-size: 12pt; }
}

/* F5.4: Guida (pagina «Guida», stessi testi del PDF) */
.guida-strumenti { display: grid; gap: 10px; }
.guida-strumenti input[type=search] { width: 100%; }
.guida-azioni { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.guida-indice h2 { margin-top: 0; }
.guida-indice-gruppo { margin: 6px 0 10px; }
.guida-indice-gruppo ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.guida-indice-gruppo button.collegamento { padding: 4px 0; text-align: left; }
.guida-sezione { scroll-margin-top: 80px; }
.guida-sezione h2 { margin-top: 0; }
.guida-sezione h3 { margin: 14px 0 4px; font-size: 1.02em; }
.guida-sezione p, .guida-sezione li { line-height: 1.55; }
.guida-elenco, .guida-passi { margin: 6px 0 8px; padding-left: 1.4em; }
.guida-elenco li, .guida-passi li { margin: 4px 0; }
.guida-passi li::marker { color: var(--verde-2); font-weight: 700; }
.guida-per { display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; background: var(--blu-tenue); color: var(--blu); font-size: .85em; }
.guida-piede { margin: 18px 0 8px; }