/* THE Menu 2026 — foglio di stile dell'admin.
   Identità: petrolio #1B3A4B, corallo #E8623D.
   Disegnato prima per il telefono: chi lo usa è in piedi in cucina. */

:root{
  --petrolio:#1B3A4B;
  --petrolio-scuro:#12262F;
  --corallo:#E8623D;
  --corallo-scuro:#C94A28;
  --fondo:#F3F5F5;
  --carta:#FFFFFF;
  --inchiostro:#12262F;
  --inchiostro-2:#415A63;
  --tenue:#6E858C;
  --linea:#DCE4E4;
  --linea-lieve:#EAEFEF;
  --verde:#2F7A5F;
  --ambra:#A9781A;
  --rosso:#C0453B;
  --ombra:0 1px 2px rgba(18,38,47,.06), 0 10px 26px -20px rgba(18,38,47,.4);
  --r:4px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--inchiostro);
  font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--petrolio)}
h1,h2,h3{margin:0;line-height:1.2;font-weight:600}
p{margin:0}
.dati{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---- intestazione ---- */
.testata{background:var(--petrolio);color:#EAF1F3;position:sticky;top:0;z-index:20}
.testata-int{max-width:1180px;margin:0 auto;padding:.7rem 1rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.marchio{display:flex;align-items:baseline;gap:.5rem;font-weight:600;letter-spacing:.01em;text-decoration:none;color:inherit}
.marchio b{color:#fff}
.marchio span{color:var(--corallo);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.testata nav{margin-left:auto;display:flex;gap:.9rem;align-items:center;font-size:.85rem}
.testata nav a{color:#C3D6DC;text-decoration:none}
.testata nav a:hover{color:#fff}
.chi{color:#9FBAC2;font-size:.8rem}
.esci{background:none;border:1px solid #35586A;color:#C3D6DC;padding:.28rem .7rem;border-radius:var(--r);font:inherit;font-size:.8rem;cursor:pointer}
.esci:hover{border-color:var(--corallo);color:#fff}

/* ---- struttura ---- */
.foglio{max-width:1180px;margin:0 auto;padding:1.3rem 1rem 4rem}
.intestazione-pagina{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline;margin-bottom:1.2rem}
.intestazione-pagina h1{font-size:1.45rem;letter-spacing:-.01em}
.briciola{font-size:.82rem;color:var(--tenue)}
.briciola a{color:var(--tenue)}
.sezione{margin-top:1.9rem}
.sezione > h2{font-size:1.02rem;margin-bottom:.15rem}
.sezione > .sottotitolo{font-size:.85rem;color:var(--tenue);margin-bottom:.85rem;max-width:62ch}

/* ---- fascia numeri ---- */
.numeri{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
        grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.numero{background:var(--carta);padding:.75rem .85rem}
.numero b{display:block;font-size:1.4rem;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.numero span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tenue);margin-top:.1rem}
.numero.allerta b{color:var(--corallo)}

/* ---- filtri ---- */
.filtri{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 .9rem}
.filtro{display:inline-block;padding:.3rem .75rem;border:1px solid var(--linea);background:var(--carta);
        border-radius:100px;font-size:.82rem;text-decoration:none;color:var(--inchiostro-2)}
.filtro:hover{border-color:var(--petrolio)}
.filtro[aria-current="true"]{background:var(--petrolio);border-color:var(--petrolio);color:#fff}

/* ---- tabella ---- */
.tabella-scorre{overflow-x:auto;background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--ombra)}
table{border-collapse:collapse;width:100%;min-width:48rem;font-size:.875rem}
th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linea-lieve);vertical-align:middle}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);font-weight:600;
   background:var(--fondo);border-bottom:1px solid var(--linea);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#F7FAFA}
td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
th.n{text-align:right}
.locale-nome{font-weight:600;color:var(--inchiostro);text-decoration:none}
.locale-nome:hover{color:var(--corallo)}
.sottonome{display:block;font-size:.76rem;color:var(--tenue);font-weight:400}

/* ---- pastiglie di stato ---- */
.stato{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:600;
       letter-spacing:.03em;padding:.16rem .55rem;border-radius:100px;white-space:nowrap;border:1px solid currentColor}
.stato::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.stato-abbonato{color:var(--verde)}
.stato-scaduto{color:var(--ambra)}
.stato-mai_pagato{color:var(--tenue)}
.segno{display:inline-block;font-size:.7rem;padding:.1rem .4rem;border-radius:var(--r);
       background:#FBE7E0;color:var(--corallo-scuro);margin-left:.35rem;white-space:nowrap}
.spento{color:var(--tenue)}

/* ---- barre di copertura ---- */
.copertura{display:grid;gap:.85rem;background:var(--carta);border:1px solid var(--linea);
           border-radius:var(--r);padding:1rem 1.1rem;box-shadow:var(--ombra)}
.cop{display:grid;grid-template-columns:1fr 4.5rem;gap:.2rem .8rem;align-items:center}
.cop-testa{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;font-size:.85rem}
.cop-testa em{font-style:normal;color:var(--tenue);font-size:.78rem}
.cop-barra{height:.5rem;background:var(--linea-lieve);border-radius:2px;overflow:hidden}
.cop-barra i{display:block;height:100%;border-radius:2px;background:var(--verde)}
.cop-barra.media i{background:var(--ambra)}
.cop-barra.bassa i{background:var(--corallo)}
.cop-val{text-align:right;font-size:.85rem;font-variant-numeric:tabular-nums;font-weight:600}

/* ---- riquadri ---- */
.griglia{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));align-items:start}
.riquadro{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);
          box-shadow:var(--ombra);padding:1rem 1.1rem}
.riquadro h3{font-size:.95rem;margin-bottom:.15rem}
.riquadro .nota{font-size:.78rem;color:var(--tenue);margin-bottom:.7rem}
.elenco-semplice{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.elenco-semplice li{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;
                    padding-bottom:.45rem;border-bottom:1px solid var(--linea-lieve)}
.elenco-semplice li:last-child{border-bottom:none;padding-bottom:0}
.elenco-semplice .val{font-variant-numeric:tabular-nums;color:var(--inchiostro-2);white-space:nowrap}
.zero{color:var(--corallo);font-weight:600}
.vuoto{font-size:.85rem;color:var(--tenue);padding:.4rem 0}

/* ---- provenienza del dato ---- */
.origine{display:inline-block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
         padding:.08rem .4rem;border-radius:2px;margin-left:.4rem;vertical-align:.05em}
.origine-reale{background:#E2F0EA;color:var(--verde)}
.origine-standard{background:#F6EBD6;color:var(--ambra)}
.origine-stimato{background:#FBE7E0;color:var(--corallo-scuro)}
.origine-assente{background:var(--linea-lieve);color:var(--tenue)}

/* ---- utilità di spaziatura (niente style inline nelle viste) ---- */
.sp-t{margin-top:1rem}
.sp-t-s{margin-top:.7rem}
.senza-margine{margin:0}
.a-destra{margin-left:auto}

/* ---- avvisi ---- */
.avviso{border-left:3px solid var(--corallo);background:#FDF2EE;padding:.7rem .9rem;
        border-radius:0 var(--r) var(--r) 0;font-size:.85rem;color:#7C3A22}
.avviso.calmo{border-left-color:var(--petrolio);background:#EDF3F5;color:var(--inchiostro-2)}

/* ---- editor del menu ---- */
.titolo-categoria{color:inherit;text-decoration:none;border-bottom:1px solid var(--linea);padding-bottom:1px}
.titolo-categoria:hover{color:var(--corallo);border-bottom-color:var(--corallo)}
.righe-prodotto{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--ombra);overflow:hidden}
.riga-prodotto{
  display:grid;gap:.35rem .9rem;align-items:center;padding:.7rem .9rem;
  border-bottom:1px solid var(--linea-lieve);
  border-left:3px solid transparent;
  /* Larghezze fisse, non automatiche: ogni riga è una griglia a sé, e con le
     colonne auto prezzi, segni e pulsanti risultano sfalsati da riga a riga. */
  grid-template-columns:minmax(0,1fr) 7.5rem 9rem 5.5rem;
  grid-template-areas:"nome prezzo segni azione";
}
.riga-prodotto:last-child{border-bottom:none}
.riga-prodotto:hover{background:#F7FAFA}
.riga-prodotto.fuori{background:#FAFBFB;border-left-color:var(--linea)}
.riga-prodotto.fuori .rp-nome a{color:var(--tenue);font-weight:500}
.rp-nome{grid-area:nome;min-width:0;line-height:1.35}
.rp-nome a{color:var(--inchiostro);text-decoration:none;font-weight:600}
.rp-nome a:hover{color:var(--corallo)}
.rp-prezzo{grid-area:prezzo;display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;font-size:.88rem}
.rp-prezzo .prezzo{white-space:nowrap;font-weight:600}
.rp-prezzo em{font-style:normal;font-weight:400;color:var(--tenue);font-size:.82em}
.rp-segni{grid-area:segni;text-align:right}
.rp-azione{grid-area:azione;margin:0}
.rp-azione .mini{width:100%}
.tag{display:inline-block;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
     padding:.06rem .35rem;border-radius:2px;background:var(--linea-lieve);color:var(--inchiostro-2);margin-left:.3rem}
.segno.buono{background:#E2F0EA;color:var(--verde)}
.segno.parziale{background:#F6EBD6;color:var(--ambra)}
.segno.neutro{background:var(--linea-lieve);color:var(--tenue)}
.mini{font:inherit;font-size:.78rem;padding:.22rem .6rem;border:1px solid var(--linea);
      background:var(--carta);color:var(--inchiostro-2);border-radius:var(--r);cursor:pointer;white-space:nowrap}
.mini:hover{border-color:var(--corallo);color:var(--corallo-scuro)}
.mini.acceso{border-color:var(--verde);color:var(--verde)}
@media (max-width:760px){
  .riga-prodotto{grid-template-columns:minmax(0,1fr) 7rem;
    grid-template-areas:"nome prezzo" "segni azione";row-gap:.5rem}
  .rp-segni{text-align:left}
  .rp-azione{justify-self:end;width:5.5rem}
}

/* ---- moduli dentro i riquadri ---- */
.riquadro .campo{margin-bottom:.8rem}
.riquadro select,.riquadro textarea,.riquadro input[type=text],.riquadro input[type=number],.riquadro input[type=date]{
  font:inherit;padding:.5rem .6rem;border:1px solid var(--linea);border-radius:var(--r);
  background:#fff;color:inherit;width:100%;max-width:100%}
.riquadro textarea{resize:vertical;min-height:4.5rem}
.riquadro select:focus,.riquadro textarea:focus,.riquadro input:focus{outline:2px solid var(--corallo);outline-offset:1px;border-color:var(--corallo)}
.scelte{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:.2rem 0 1rem;font-size:.87rem}
.scelte label{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer}
.bottone.secondario{background:var(--petrolio)}
.bottone.secondario:hover{background:var(--petrolio-scuro)}
.vuoto.zero{color:var(--corallo);font-weight:600}

/* ---- accesso ---- */
.accesso{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.scheda-accesso{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);
                box-shadow:var(--ombra);padding:1.8rem;width:100%;max-width:23rem}
.scheda-accesso h1{font-size:1.2rem;margin-bottom:.2rem}
.scheda-accesso .nota{font-size:.83rem;color:var(--tenue);margin-bottom:1.2rem}
.campo{display:grid;gap:.3rem;margin-bottom:.9rem}
.campo label{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tenue)}
.campo input{font:inherit;padding:.55rem .7rem;border:1px solid var(--linea);border-radius:var(--r);background:#fff;color:inherit}
.campo input:focus{outline:2px solid var(--corallo);outline-offset:1px;border-color:var(--corallo)}
.bottone{width:100%;font:inherit;font-weight:600;padding:.6rem 1rem;border:none;border-radius:var(--r);
         background:var(--corallo);color:#fff;cursor:pointer}
.bottone:hover{background:var(--corallo-scuro)}
.errore-accesso{background:#FBE7E0;color:#8C2F1D;padding:.55rem .75rem;border-radius:var(--r);font-size:.85rem;margin-bottom:1rem}

/* ---- pagina di errore ---- */
.pagina-errore{max-width:34rem;margin:5rem auto;text-align:center;padding:0 1rem}
.pagina-errore .codice{font-size:3rem;font-weight:600;color:var(--corallo);line-height:1}
.pagina-errore h1{font-size:1.2rem;margin:.4rem 0 .5rem}
.pagina-errore p{color:var(--inchiostro-2);font-size:.9rem}

/* ---- piede ---- */
.piede{max-width:1180px;margin:0 auto;padding:1.4rem 1rem 2.4rem;font-size:.75rem;color:var(--tenue);
       display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;border-top:1px solid var(--linea);margin-top:2.5rem}

:focus-visible{outline:2px solid var(--corallo);outline-offset:2px}

@media (max-width:640px){
  .foglio{padding:1rem .8rem 3rem}
  .intestazione-pagina h1{font-size:1.25rem}
  .testata-int{padding:.6rem .8rem}
  /* Sul telefono la fascia sta su due colonne: tre non ci stanno e
     spingono la pagina fuori dallo schermo. */
  .numeri{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numero b{font-size:1.2rem}
  .numero span{font-size:.68rem}
  .cop{grid-template-columns:minmax(0,1fr) 3.9rem}
  .cop-testa{flex-direction:column;gap:.05rem}
  .copertura{padding:.9rem .8rem}
  .riquadro{padding:.9rem .85rem}
}

/* ================================================================
   Scheda prodotto
   ================================================================ */

/* ---- una parte alla volta ----
   I pannelli si nascondono SOLO se il JavaScript ha acceso la classe sul
   body: senza, la pagina resta lunga ma intera. */
.a-schede .pannello{display:none}
.a-schede .pannello.aperto{display:block}

.schede{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1rem;
        border-bottom:1px solid var(--linea);padding-bottom:.55rem}
.schede a{display:inline-flex;align-items:baseline;gap:.35rem;
          padding:.35rem .8rem;border:1px solid transparent;border-radius:20px;
          color:var(--inchiostro-2);text-decoration:none;font-size:.85rem;white-space:nowrap}
.schede a:hover{background:var(--carta);border-color:var(--linea);color:var(--corallo-scuro)}
.schede a em{font-style:normal;font-size:.72rem;color:var(--tenue);
             background:var(--linea-lieve);border-radius:10px;padding:.02rem .35rem}
.schede a[aria-current="true"]{background:var(--petrolio);border-color:var(--petrolio);color:#fff}
.schede a[aria-current="true"] em{background:#2C4E5F;color:#C3D6DC}

.riquadro.largo{margin-bottom:1.1rem}
.pannelli{display:block}
.pannello{margin-bottom:1.1rem}

/* ---- i conti ----
   In riga, come una frase che si legge da sinistra. */
.conti{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);
       border-radius:var(--r);overflow:hidden;
       grid-template-columns:repeat(auto-fit,minmax(min(9.5rem,100%),1fr))}
.conto{background:var(--carta);padding:.7rem .8rem;display:grid;gap:.15rem;align-content:start}
.conto .etichetta{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tenue)}
.conto strong{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.conto.allarme{background:#FDF6F3}

/* ---- una cifra col suo colore: il colore E' la provenienza ---- */
.cifra{font-variant-numeric:tabular-nums;border-bottom:1px dotted transparent;cursor:help}
.cifra.reale{color:var(--verde)}
.cifra.standard{color:var(--ambra)}
.cifra.stimato{color:var(--corallo-scuro)}
.cifra.assente{color:var(--tenue)}
.cifra:hover{border-bottom-color:currentColor}
.nota .cifra{font-weight:600}

/* ---- ricetta ----
   Non una tabella: una griglia. Ogni riga ha le stesse colonne, il nome si
   prende quello che avanza, e sotto i 780px la riga si piega in tre piani
   invece di scorrere in orizzontale. */
.ricetta{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:var(--carta)}
.ric-testa,.ric-riga{
  display:grid;align-items:center;gap:.3rem .9rem;padding:.55rem .85rem;
  grid-template-columns:minmax(0,1fr) 8.6rem 6.5rem 7rem 10.5rem;
  grid-template-areas:"nome dose prezzo costo azioni";
}
.ric-testa{background:#F7FAFA;border-bottom:1px solid var(--linea);
           font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tenue)}
.ric-testa .ric-dose{text-align:center}
.ric-testa .ric-prezzo,.ric-testa .ric-costo{text-align:right}
.ric-riga{border-bottom:1px solid var(--linea-lieve)}
.ric-riga:last-child{border-bottom:none}
.ric-riga:hover{background:#F7FAFA}
.ric-riga.spenta{background:#FAFBFB}
.ric-riga.spenta .ric-nome b{color:var(--tenue);font-weight:500}
.ric-riga.spenta .cifra{color:var(--tenue)}

.ric-nome{grid-area:nome;min-width:0;line-height:1.35;font-size:.9rem}
.ric-nome b{font-weight:600}
.ric-dose{grid-area:dose;justify-self:end}
.ric-prezzo{grid-area:prezzo;text-align:right;font-size:.85rem;white-space:nowrap}
.ric-costo{grid-area:costo;text-align:right;font-size:.85rem;white-space:nowrap}
.ric-azioni{grid-area:azioni;text-align:right;white-space:nowrap}
.ric-azioni form{display:inline-block;margin:0 0 0 .25rem}

.segni-riga{display:block;margin-top:.15rem;line-height:1.9}
.segni-riga .segno{margin-right:.25rem}
.sottotesto{font-size:.76rem;color:var(--tenue);margin-right:.3rem}
.segno.corallo{background:#FBE7E0;color:var(--corallo-scuro)}

/* Un campo, la sua unità e il bottone su una riga sola: la dose si corregge
   senza aprire niente. */
.dose{display:flex;align-items:center;gap:.3rem;justify-content:flex-end;margin:0}
.dose input[type=text]{width:4.4rem;text-align:right;font:inherit;font-size:.85rem;
  padding:.24rem .4rem;border:1px solid var(--linea);border-radius:var(--r);background:#fff;color:inherit}
.dose input[type=text]:focus{outline:2px solid var(--corallo);outline-offset:1px;border-color:var(--corallo)}
.dose .unita{font-size:.78rem;color:var(--tenue);min-width:1.3rem}

/* ---- aggiungere un ingrediente ---- */
.aggiungi{border-top:1px solid var(--linea-lieve);padding-top:.9rem}
.aggiungi h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tenue);margin-bottom:.35rem}
.scorciatoie{display:flex;flex-wrap:wrap;gap:.35rem}
.scorciatoie form{margin:0}
.scorciatoie .mini em{font-style:normal;color:var(--tenue);font-size:.9em;margin-left:.15rem}
.cerca{display:flex;gap:.4rem;align-items:center;max-width:34rem}
.cerca input[type=search]{flex:1 1 auto;min-width:0;font:inherit;font-size:.85rem;padding:.35rem .55rem;
  border:1px solid var(--linea);border-radius:var(--r);background:#fff;color:inherit}
.cerca input[type=search]:focus{outline:2px solid var(--corallo);outline-offset:1px;border-color:var(--corallo)}
.risultati{margin-top:.6rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--carta)}
.ris-riga{display:grid;gap:.3rem .9rem;align-items:center;padding:.5rem .85rem;
          grid-template-columns:minmax(0,1fr) 11rem;border-bottom:1px solid var(--linea-lieve)}
.ris-riga:last-child{border-bottom:none}
.ris-nome{min-width:0;font-size:.9rem;line-height:1.35}
.ris-nome b{font-weight:600}
.ris-nome .sottotesto{display:block}

/* ---- allergeni: quattordici pastiglie, accese o spente ---- */
.pastiglie{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pastiglia{font-size:.8rem;padding:.28rem .7rem;border-radius:20px;border:1px solid var(--linea);
           background:var(--carta);color:var(--tenue)}
.pastiglia b{font-weight:600;margin-right:.3rem}
.pastiglia.acceso{background:#FBE7E0;border-color:#F0C6B7;color:var(--corallo-scuro)}
.pastiglia.discorde{background:#F6EBD6;border-color:#E4CFA6;color:var(--ambra)}
.pastiglia.spento{opacity:.6}

/* ---- varie della scheda ---- */
.foto-prodotto{width:100%;max-width:22rem;border-radius:var(--r);border:1px solid var(--linea);display:block}
.elenco-semplice.compatto li{font-size:.8rem;padding-bottom:.3rem}
.due-colonne{display:grid;gap:0 1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.sr-solo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- scheda locale: la configurazione ---- */
.conto .sotto{font-size:.72rem;color:var(--tenue);line-height:1.3}
.doppio{display:grid;gap:0 .7rem;grid-template-columns:1fr 5.5rem}
.doppio.pari{grid-template-columns:1fr 1fr}
.campo label em.tenue{font-style:normal;text-transform:none;letter-spacing:0;font-size:.9em}
.campo .nota{font-size:.75rem;color:var(--tenue);line-height:1.4}
.campo select + input[type=text]{margin-top:.3rem;font-size:.85rem}

/* Il selettore di colore accanto al colore scritto: chi ce l'ha in esadecimale
   lo incolla, chi non ce l'ha lo pesca. Vince quello scritto, se e' valido. */
.colore-riga{display:flex;gap:.45rem;align-items:center}
.colore-riga input[type=color]{width:2.6rem;height:2.2rem;padding:0;border:1px solid var(--linea);
  border-radius:var(--r);background:#fff;cursor:pointer;flex:0 0 auto}
.colore-riga input[type=text]{flex:1 1 auto;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}

/* Anteprima dei colori. I caratteri no: questa pagina non carica font da fuori
   (script-src e default-src sono 'self'), quindi il nome del font si legge
   scritto sotto invece di essere mostrato per finta con un altro carattere. */
.anteprima{margin:1rem 0 .2rem;border:1px solid var(--linea);border-radius:var(--r);padding:1rem;overflow:hidden}
.anteprima-menu{border-radius:var(--r);padding:1rem 1.1rem;max-width:26rem}
.ap-titolo{font-size:1.25rem;font-weight:600;margin:0 0 .35rem;line-height:1.2}
.ap-testo{font-size:.95rem;margin:0 0 .25rem}
.ap-desc{font-size:.85rem;margin:0 0 .6rem;line-height:1.45}
.ap-chiama{display:inline-block;font-size:.82rem;font-weight:600;padding:.3rem .8rem;
  border-radius:20px;background:rgba(0,0,0,.35)}
.ap-nota{font-size:.75rem;color:var(--tenue);margin:.7rem 0 0}

/* ---- orari: un giorno per riga, le fasce dentro ---- */
.giorno{border-bottom:1px solid var(--linea-lieve);padding:.6rem 0}
.giorno:last-of-type{border-bottom:none}
.giorno-testa{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.35rem}
.giorno-testa strong{font-size:.92rem;font-weight:600;min-width:6rem}
.giorno-testa .tenue{font-size:.78rem;color:var(--tenue)}
.fascia{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.25rem 0}
.fascia form{margin:0}
.fascia-ore{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.fascia input[type=time]{font:inherit;font-size:.85rem;padding:.28rem .45rem;border:1px solid var(--linea);
  border-radius:var(--r);background:#fff;color:inherit;width:6.6rem}
.fascia input[type=text]{width:11rem;font-size:.85rem;padding:.28rem .5rem}
.fascia input:focus{outline:2px solid var(--corallo);outline-offset:1px;border-color:var(--corallo)}
.fascia .freccia{color:var(--tenue);font-size:.85rem}
.fascia.spenta input{background:#FAFBFB;color:var(--tenue)}
.fascia.nuova{opacity:.75}
.fascia.nuova:focus-within{opacity:1}
.mini.pallido{color:var(--tenue)}
.mini.pallido:hover{color:var(--corallo-scuro)}

/* La riga che registra una chiusura straordinaria. Classe sua e non `.aggiungi`,
   che nella scheda prodotto tiene tutt'altro (ricerca ingredienti e scorciatoie). */
.chiusura{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  border-top:1px solid var(--linea-lieve);padding-top:.9rem}
.chiusura input[type=date]{width:auto}
.chiusura input[type=text]{flex:1 1 12rem;min-width:0}
.chiusura .bottone{width:auto;padding:.4rem .9rem;font-size:.85rem}
.chiusura .freccia{color:var(--tenue)}

/* ---- media del locale: otto ruoli, un riquadro per ciascuno ---- */
.media-griglia{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr))}
.slot{border:1px solid var(--linea);border-radius:var(--r);background:var(--carta);
  padding:.75rem .8rem;display:flex;flex-direction:column;gap:.4rem}
.slot.vuoto-slot{background:#FBFCFC;border-style:dashed}
.slot-vista{border-radius:var(--r);overflow:hidden;background:#EDEFF0;
  display:flex;align-items:center;justify-content:center;min-height:7.5rem}
.slot-vista img,.slot-vista video{display:block;width:100%;height:7.5rem;object-fit:cover}
.slot-vista audio{width:100%;padding:.6rem}
.slot-niente{font-size:.78rem;color:var(--tenue);padding:1.6rem 0}
.slot-testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem}
.slot-testa strong{font-size:.9rem;font-weight:600}
.slot-testa code{font-size:.72rem;color:var(--tenue)}
.slot-nota{font-size:.76rem;color:var(--tenue);line-height:1.45;margin:0}
.slot-nota.avvertimento{color:var(--corallo-scuro)}
.slot-peso{font-size:.76rem;color:var(--tenue);margin:0;font-variant-numeric:tabular-nums}
.slot-peso em{font-style:normal;color:var(--corallo-scuro)}
.slot-carica{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.15rem 0 0}
.slot-carica input[type=file]{flex:1 1 9rem;min-width:0;font:inherit;font-size:.76rem;color:var(--tenue)}
.slot-carica input[type=file]::file-selector-button{font:inherit;font-size:.76rem;padding:.2rem .55rem;
  margin-right:.5rem;border:1px solid var(--linea);border-radius:var(--r);background:#fff;
  color:inherit;cursor:pointer}
.slot-carica input[type=file]::file-selector-button:hover{border-color:var(--corallo);color:var(--corallo-scuro)}
.slot-tetto{font-size:.72rem;color:var(--tenue)}
.slot-storico{font-size:.78rem}
.slot-storico summary{cursor:pointer;color:var(--tenue)}
.slot-storico summary:hover{color:var(--corallo-scuro)}
.slot-storico ul{margin-top:.4rem}

@media (max-width:780px){
  .doppio{grid-template-columns:1fr}
  .fascia input[type=text]{width:100%;flex:1 1 8rem}
  .giorno-testa strong{min-width:0}
  .ric-testa{display:none}
  .ric-riga{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nome nome" "dose azioni" "prezzo costo";
    row-gap:.45rem;padding:.7rem .85rem}
  .ric-dose{justify-self:start}
  .ric-prezzo{text-align:left}
  .ris-riga{grid-template-columns:minmax(0,1fr)}
  .ris-riga .dose{justify-content:flex-start}
}

/* Traduzioni prodotto e selezione delle lingue del locale. */
.lingue-profilo{border-top:1px solid var(--linea);padding-top:1.2rem}
.lingue-selettori{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.traduzioni-intro{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;flex-wrap:wrap}
.traduzioni-intro .nota{margin:0}
.traduzioni-intro a{font-size:.8rem}
.traduzione-scheda{border:1px solid var(--linea);border-radius:var(--r);background:var(--carta);overflow:hidden}
.traduzione-testata{padding:.85rem 1rem;cursor:pointer;font-weight:600}
.traduzione-testata .pastiglia{float:right;margin-left:.5rem;font-weight:400}
.traduzione-sigla{font-size:.72rem;font-weight:400;margin-left:.35rem}
.traduzione-modulo{padding:1rem;border-top:1px solid var(--linea)}
.traduzione-originale{padding-right:1rem;overflow-wrap:anywhere}
.traduzione-originale h4{margin-bottom:1rem}
.traduzione-originale p{margin:.3rem 0 1rem}
.traduzione-note{white-space:pre-wrap;font-size:.85rem}
.traduzione-modulo .campo input,.traduzione-modulo .campo textarea{width:100%;min-width:0;box-sizing:border-box}
.traduzione-rimuovi{border-top:1px solid var(--linea);margin-top:1rem;padding-top:.8rem;font-size:.8rem}
.traduzione-rimuovi summary,.traduzioni-altre>summary{cursor:pointer;color:var(--tenue)}
.traduzione-rimuovi .bottone{width:auto;font-size:.8rem}
.traduzione-scheda summary:focus-visible,.traduzioni-altre>summary:focus-visible{outline:2px solid var(--corallo);outline-offset:2px}
@media(max-width:600px){
  .lingue-selettori{grid-template-columns:1fr;gap:0}
  .traduzione-originale{padding-right:0;border-bottom:1px solid var(--linea);margin-bottom:1rem}
  .traduzione-testata{padding:.8rem}
  .traduzione-modulo{padding:.8rem}
}
.traduzione-originale .etichetta{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tenue)}

/* Menu: prima le categorie, poi i prodotti della categoria scelta. */
.menu-categorie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:.8rem;margin-top:1rem}
.menu-categoria{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.1rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--carta);color:inherit;text-decoration:none}
.menu-categoria:hover{border-color:var(--corallo)}
.menu-categoria:focus-visible{outline:2px solid var(--corallo);outline-offset:2px}
.menu-categoria-testa{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.menu-categoria-testa strong{overflow-wrap:anywhere}
.menu-categoria-testa>span{color:var(--corallo)}
.menu-categoria .sottotitolo{margin:0}
.menu-categoria .segno{align-self:flex-start}