/* Ricette & Costi Plasir.
   Convenzione del foglio Excel: azzurro = si inserisce, giallo = calcolato. */
:root {
  /* schema «Tenue», quello di partenza: tinte leggere, azzurro = si inserisce, giallo = calcolato */
  --sfondo: #f3f4f7;
  --lampo: #ffd45c;                /* il colore del lampo di annulla / ripeti */
  --carta: #fff;
  --bordo: #e6e9ef;
  --testo: #1d2330;
  --tenue: #5b6474;
  --in: #edf3fc;
  --in-bordo: #c3d3ee;
  --calc: #fffbe8;
  --calc-bordo: #f0e7c4;
  --ing: #e9eff8;
  --mo: #fcefe3;
  --conf: #edf5e7;
  --parz: #fff6d9;
  --titolo: #fffae9;
  --titolo-bordo: #f3ead0;
  --ombra: 0 1px 2px rgba(20, 24, 35, .05), 0 1px 1px rgba(20, 24, 35, .03);
  --accento: #2b5fb8;
  --ok-s: #e2f4e6; --ok-t: #1b6a30;
  --div-s: #fde4df; --div-t: #a22a1b;
  --err-s: #fff0cc; --err-t: #7a5300;
  --riga: #f3f4f7;            /* separatori di riga nelle tabelle */
  --riga-nuova: #f8f9fc;
  --riga-hover: #fafbfd;
  --neutro-s: #e8ebf1; --neutro-t: #3c4658;    /* etichette neutre (tipo, stato nuova) */
  --pastello: #eef1f6;        /* intestazioni dei blocchi neutri */
  --spento: #9aa3b5;          /* testi di contorno */
  --titolo-testo: #6a5a30;    /* testo sulla barra gialla del titolo */
  --campo-focus: #fff;
  --barra: #1d2330; --barra-testo: #cfd5e2; --barra-attiva: #3a4560; --barra-hover: #2c3446; --barra-bordo: transparent;
}
/* ------------------------------------------------------------------ schemi di colore (Preferenze)
   In ogni schema l'azzurro resta "si inserisce" e il giallo "calcolato". */
html.schema-neutro {
  /* monocromo nei blocchi; le celle si riconoscono dal colore: bianche con bordo blu da inserire,
     giallo appena accennato e senza bordo quelle calcolate */
  --sfondo: #fafbfc; --carta: #fff; --bordo: #e2e5ea; --riga: #eceff3; --ombra: none;
  --in: #fff; --in-bordo: #7f9fd6; --calc: #fffbe6; --calc-bordo: transparent;
  --ing: #f0f2f5; --mo: #f0f2f5; --conf: #f0f2f5; --parz: #f0f2f5; --titolo: #fff; --titolo-bordo: #e2e5ea;
  --titolo-testo: #5b6474; --pastello: #f0f2f5; --neutro-s: #eceef2; --riga-nuova: #fafbfc; --riga-hover: #f6f8fa;
  --barra: #111419; --barra-bordo: #2a313c;
}
html.schema-neutro .legenda .q.calc { border-color: #e2e5ea; }
html.schema-neutro .blocco h2, html.schema-neutro .intestazione { border-bottom-color: var(--bordo); }
html.schema-carta {
  /* toni caldi, come un foglio di carta */
  --sfondo: #f3eee4; --carta: #fffdf8; --bordo: #e3dbcb; --testo: #2b2418; --tenue: #6f6453; --spento: #a39a88;
  --in: #e9eef6; --in-bordo: #aebfd8; --calc: #fff3cf; --calc-bordo: #e3d29b;
  --ing: #e4e9f0; --mo: #f5e4d3; --conf: #e7ecd9; --parz: #f7ebc6; --titolo: #f8eed3; --titolo-bordo: #e1cf9f;
  --titolo-testo: #6b5420; --accento: #2b5fb8;
  --riga: #ede7da; --riga-nuova: #faf6ee; --riga-hover: #fbf8f1; --neutro-s: #ebe4d6; --neutro-t: #4d4232; --pastello: #efe9dc;
  --campo-focus: #fffdf8; --barra: #2b2418; --barra-testo: #d9d0bf; --barra-attiva: #4d4232; --barra-hover: #3a3224;
}
html.schema-scuro {
  --sfondo: #0f1318; --lampo: #b8860b; --carta: #171c24; --bordo: #2a313c; --testo: #e4e8ee; --tenue: #98a2b3; --spento: #6c7686;
  --in: #1e3250; --in-bordo: #3f5f96; --calc: #3b3310; --calc-bordo: #6b5a1f;
  --ing: #1f2a3a; --mo: #3a2b23; --conf: #22301f; --parz: #3a3314; --titolo: #2a2614; --titolo-bordo: #4a4220;
  --titolo-testo: #d9c67a; --accento: #8ab4f8; --ombra: none;
  --ok-s: #1d3b26; --ok-t: #9fe0b0; --div-s: #4a2320; --div-t: #ff9d8f; --err-s: #4a3a10; --err-t: #ffd77a;
  --riga: #262d38; --riga-nuova: #1c222c; --riga-hover: #1d2430;
  --neutro-s: #28303d; --neutro-t: #c9d1dd; --pastello: #202733; --campo-focus: #243b5f;
  --barra: #0b0e13; --barra-testo: #aab3c2; --barra-attiva: #28303d; --barra-hover: #1c222c; --barra-bordo: #2a313c;
}
html.schema-scuro .btn { background: #222a35; color: var(--testo); border-color: #3a4352; }
html.schema-scuro .btn.primario { background: var(--accento); border-color: var(--accento); color: #0f1522; }
html.schema-scuro .btn.pericolo { color: var(--div-t); }
html.schema-scuro .filtri input, html.schema-scuro .filtri select, html.schema-scuro .in-linea input, html.schema-scuro .in-linea select,
html.schema-scuro .segnala textarea, html.schema-scuro .preferenze select, html.schema-scuro .b-note textarea {
  background: #11161d; color: var(--testo); border-color: #3a4352;
}
html.schema-scuro .tipo.semilavorato { background: #3b3160; color: #d6c8ff; }
html.schema-scuro .tipo.prova { background: #3e3826; color: #e6d6a8; }
html.schema-scuro .barra-valore { background: linear-gradient(90deg, #c2574b, #7a3b34); }
html.schema-scuro .t.confronto tr.diverso td, html.schema-scuro .t.confronto tr.diverso th { background: #3a2622; }
html.schema-scuro .tessera-ris.forte strong, html.schema-scuro .tessera-ris.forte .etic { color: #f0d98a; }
html.schema-scuro .anomalie { color: #e6c98a; }
html.schema-scuro .campo-data, html.schema-scuro .meta { color: var(--titolo-testo); }
html.schema-scuro .google { background: #222a35; color: var(--testo); border-color: #3a4352; }
html.schema-scuro .segnala, html.schema-scuro .nota { background: var(--carta); }
html.schema-scuro .segnala::backdrop { background: rgba(0, 0, 0, .65); }
html.schema-scuro .vuoto { border-color: #3a4352; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--sfondo); color: var(--testo);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accento); }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin: 0; }
small { color: var(--tenue); }
main { padding: 16px 20px 48px; max-width: 1640px; margin: 0 auto; }

.barra { background: var(--barra); color: #fff; padding: 0 20px; border-bottom: 1px solid var(--barra-bordo); }
.riga-alta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 4px; }
.riga-bassa { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px; }
.marchio { color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; }
.marchio span { color: #ffd76a; }
.barra nav { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.barra nav a { color: var(--barra-testo); text-decoration: none; padding: 5px 10px; border-radius: 6px; white-space: nowrap; }
.barra nav a:hover { background: var(--barra-hover); color: #fff; }
.barra nav a.attiva { background: var(--barra-attiva); color: #fff; }
.utente { display: flex; align-items: center; gap: 8px; color: var(--barra-testo); font-size: 13px; }
/* le azioni: a destra, separate dal menu da una riga sottile */
.azioni-barra { margin-left: auto; display: flex; align-items: center; gap: 2px; padding-left: 12px; border-left: 1px solid var(--barra-attiva); }
.icona {
  position: relative; border: 0; background: none; color: var(--barra-testo); cursor: pointer; padding: 5px; border-radius: 6px;
  display: inline-flex; align-items: center; line-height: 1; text-decoration: none;
}
.icona:hover, .icona.attiva { background: var(--barra-hover); color: #fff; }
.campanella.gialla { color: #ffd76a; }
.campanella.rossa { color: #ff7b6b; }
.campanella .conta { position: absolute; top: 0; right: 0; }
.conta { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #ff7b6b; color: #1d2330; font-size: 10.5px; font-weight: 700; text-align: center; line-height: 16px; }

.piede { max-width: 1640px; margin: 0 auto; padding: 0 20px 20px; color: var(--spento); font-size: 12px; text-align: right; }
.segnala { border: 1px solid var(--bordo); border-radius: 10px; padding: 0; width: min(560px, 92vw); color: var(--testo); }
.segnala::backdrop { background: rgba(20, 24, 35, .45); }
.segnala form { padding: 18px 20px; display: grid; gap: 12px; }
.segnala h2 { font-size: 17px; text-transform: none; letter-spacing: 0; }
.segnala p { margin: 0; color: var(--tenue); font-size: 13.5px; }
.segnala textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: 6px; resize: vertical; }
.segnala .registra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.segnala .registra audio { max-width: 100%; height: 36px; }
.segnala .rec-attiva { background: var(--div-s); border-color: var(--div-t); color: var(--div-t); }
.segnala .tempo { font-variant-numeric: tabular-nums; color: var(--tenue); }
.segnala .esito { font-size: 14px; }
.segnala .esito.ok { color: var(--ok-t); }
.segnala .esito.errore { color: var(--div-t); }
.segnala .azioni { display: flex; justify-content: flex-end; gap: 8px; }
.voci { display: grid; gap: 6px; }                                   /* note vocali, nel modulo e nella pagina delle segnalazioni */
.voce { display: flex; align-items: center; gap: 8px; }
.voce .numero { min-width: 3.2em; font-size: 12.5px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.voce audio { flex: 1; min-width: 0; max-width: 100%; height: 36px; }
.voce .togli-foto { position: static; flex: none; }
.onda { display: block; flex: none; width: 120px; height: 36px; border-radius: 4px; background: var(--sfondo); color: var(--accento); }  /* forma d'onda: il colore delle barre è «color» */
.onda.muta { color: var(--spento); }
.onda[hidden] { display: none; }
#segnala-onda { width: 240px; max-width: 100%; }
.foto { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }   /* allegati: miniature per le immagini, etichette per gli altri file */
.foto a, .foto figure { position: relative; margin: 0; display: block; }
.foto img { display: block; width: 110px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bordo); background: var(--sfondo); }
.foto .file { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--bordo); border-radius: 6px; background: var(--sfondo); text-decoration: none; color: var(--testo); font-size: 13.5px; max-width: 100%; }
.foto .file small { color: var(--tenue); }
.foto .file:hover { border-color: var(--accento); }
.foto .togli-foto { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; line-height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--bordo); background: var(--carta); color: var(--div-t); font-size: 14px; cursor: pointer; }
.foto .togli-foto:hover { background: var(--div-s); }
.nota { background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; padding: 12px 14px; margin: 10px 0; display: grid; gap: 8px; }
.nota header { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 13px; color: var(--tenue); }
.nota header strong { color: var(--testo); font-size: 14px; }
.nota .testo { white-space: pre-wrap; }
.nota audio { max-width: 100%; height: 36px; }
.nota .voce { max-width: 520px; }
.nota footer { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; }
.nota footer form { margin-left: auto; }
.pagina-accesso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.accesso { width: 100%; max-width: 360px; margin: 0; padding: 32px 28px; text-align: center; }
.accesso .marchio { display: block; color: var(--testo); font-size: 20px; margin-bottom: 24px; }
.accesso .marchio span { color: #b8860b; }
.google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  padding: 11px 16px; border: 1px solid #c6cad3; border-radius: 6px; background: #fff;
  color: #1f1f1f; font-size: 15px; font-weight: 500; text-decoration: none;
}
.google:hover { background: #f6f8fb; border-color: #aab2c2; }
.google:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.google svg { width: 18px; height: 18px; flex: none; }
.accesso .esito { margin: 16px 0 0; font-size: 13.5px; color: var(--div-t); }
.preferenze .scelta { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--testo); }
.preferenze .scelta input { margin-top: 3px; }
.preferenze .scelta.colore { padding-left: 26px; }
.preferenze .scelta.colore input { margin: 0 0 0 auto; width: 48px; height: 28px; padding: 0 2px; border: 1px solid var(--bordo); border-radius: 6px; background: none; }
.preferenze .scelta select { font: inherit; padding: 4px 8px; border: 1px solid var(--bordo); border-radius: 6px; margin-left: auto; }
/* dimensione del testo scelta nelle preferenze: ingrandisce tutta la pagina, come lo zoom del browser */
html.testo-piccolo { zoom: .9; }
html.testo-grande { zoom: 1.15; }
html.testo-molto-grande { zoom: 1.3; }

.testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.azioni a.btn { text-decoration: none; }
.indietro { text-decoration: none; }
.storia { display: flex; gap: 4px; margin: 0 0 8px; }           /* i comandi della parte modificabile, sopra la griglia */
.storia .btn:disabled, .storia .btn:disabled:hover { color: var(--spento); background: var(--sfondo); border-color: var(--riga); box-shadow: none; cursor: default; }
/* lampo sulle celle toccate da annulla / ripeti / com'era: si vede cosa è cambiato */
@keyframes lampo { 0% { background: var(--lampo); box-shadow: 0 0 0 3px var(--lampo); } 100% { background: inherit; box-shadow: none; } }
.lampo { animation: lampo 1.2s ease-out; }
.legenda { color: var(--tenue); font-size: 12.5px; margin-right: 8px; }
.legenda .q { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-left: 8px; border: 1px solid var(--in-bordo); }
.legenda .q.in { background: var(--in); }
.legenda .q.calc { background: var(--calc); border-color: var(--calc-bordo); }

.btn {
  font: inherit; cursor: pointer; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--bordo); background: var(--carta); color: var(--testo);
}
.btn:hover { border-color: #aab2c2; }
.btn.primario { background: var(--accento); border-color: var(--accento); color: #fff; }
.btn.pericolo { color: var(--div-t); }
.btn.piccolo { padding: 2px 8px; font-size: 12px; }

.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.filtri input[type=search] { flex: 1 1 320px; }
.filtri.compatti { margin: 0; align-items: center; }
.filtri.compatti input[type=search] { flex: 0 1 240px; }
.filtri input, .filtri select, .in-linea input, .in-linea select {
  font: inherit; padding: 7px 10px; border: 1px solid var(--bordo); border-radius: 6px; background: var(--carta);
}
.conteggio, .guida, .promemoria { color: var(--tenue); margin: 6px 0 10px; }
.promemoria { font-size: 12.5px; margin: 6px 2px 0; }
.vuoto { padding: 32px; text-align: center; color: var(--tenue); background: var(--carta); border: 1px dashed var(--bordo); border-radius: 8px; }
.scorri { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.d { text-align: right; font-variant-numeric: tabular-nums; }
.c { text-align: center; }
.forte { font-weight: 700; }

/* elenchi */
table { border-collapse: collapse; width: 100%; }
.elenco { background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; box-shadow: var(--ombra); }
.elenco th { text-align: left; font-size: 12.5px; color: var(--tenue); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--bordo); vertical-align: bottom; }
.elenco th.d { text-align: right; }
.elenco th a.ordina { color: inherit; text-decoration: none; font-weight: 600; white-space: nowrap; cursor: pointer; }
.elenco th a.ordina:hover { color: var(--accento); text-decoration: underline; text-underline-offset: 3px; }
.elenco th.ordinata a.ordina { color: var(--testo); }
.elenco .freccia { font-size: 10px; margin-left: 4px; vertical-align: 0; color: var(--spento); }      /* ⇅: si può ordinare */
.elenco th.ordinata .freccia { color: var(--accento); font-size: 9px; vertical-align: 1px; }
.elenco th a.ordina:hover .freccia { color: var(--accento); }
.conteggio.ordine { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; }
.conteggio.ordine .btn { margin-left: 8px; }
.suggerimento-ordine { color: var(--spento); }
.elenco td { padding: 7px 10px; border-bottom: 1px solid var(--riga); vertical-align: top; }
.elenco tr:last-child td { border-bottom: 0; }
.elenco tbody tr:hover { background: var(--riga-hover); }
.elenco td small { display: block; font-size: 12px; }
.elenco td a { font-weight: 600; text-decoration: none; }
.elenco td a:hover { text-decoration: underline; }
.elenco td.segnala { background: var(--div-s); }
.anagrafica td { vertical-align: middle; padding: 4px 10px; }
.anagrafica td a { font-weight: 400; }

.tipo { font-size: 11.5px; padding: 2px 8px; border-radius: 10px; background: var(--neutro-s); color: var(--neutro-t); white-space: nowrap; }
.tipo.semilavorato { background: #e6e0f7; color: #4b3592; }
.tipo.prova { background: #f1ede2; color: #6b5a2a; }
.stato { font-size: 11.5px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.stato.ok { background: var(--ok-s); color: var(--ok-t); }
.stato.diverso { background: var(--div-s); color: var(--div-t); }
.stato.errore { background: var(--err-s); color: var(--err-t); }
.stato.nuovo { background: var(--neutro-s); color: var(--neutro-t); }

/* riquadri */
.riquadro { background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; padding: 14px 16px; margin: 14px 0; box-shadow: var(--ombra); }
.riquadro.stretto { max-width: 760px; }
.riquadro h2 { margin-bottom: 8px; }
.riquadro p { margin: 6px 0; }
.in-linea { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.in-linea label { display: grid; gap: 3px; font-size: 12.5px; color: var(--tenue); }
.in-linea strong { align-self: center; margin-right: 6px; }
.collegate { list-style: none; padding: 0; margin: 6px 0 12px; }
.collegate li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 0; }
.avvisi { list-style: none; margin: 0 0 12px; padding: 8px 12px; background: var(--err-s); color: var(--err-t); border-radius: 8px; }
.avvisi .errore { color: var(--div-t); font-weight: 600; }
.avvisi.conferma { background: var(--ok-s); color: var(--ok-t); }
.azioni-riga { text-align: right; }
.azioni-riga form { display: inline; }
.azioni-riga .btn { text-decoration: none; display: inline-block; font-weight: 400; }
.anomalie { margin: 0; padding-left: 18px; color: #5a3d00; }
.anomalie li { margin: 2px 0; }
.spiegazione { font-size: 12.5px; min-width: 280px; }
.voci-diverse { color: var(--div-t); margin-bottom: 3px; }
.conteggi { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.tessera { background: var(--ok-s); color: var(--ok-t); border-radius: 8px; padding: 10px 16px; }
.tessera b { font-size: 22px; margin-right: 4px; }
.tessera.diverso { background: var(--div-s); color: var(--div-t); }
.tessera.errore { background: var(--err-s); color: var(--err-t); }

/* scheda ricetta */
/* una riga sola, discreta: quattro numeri con la loro etichetta */
.risultati {
  display: flex; flex-wrap: wrap; align-items: stretch; margin-bottom: 12px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; box-shadow: var(--ombra);
}
.tessera-ris { flex: 1 1 180px; min-width: 0; padding: 7px 14px 6px; display: grid; gap: 0; border-left: 1px solid var(--bordo); }
.tessera-ris:first-child { border-left: 0; }
.tessera-ris .etic { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; }
.tessera-ris strong { font-size: 17px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tessera-ris strong::after { content: " €"; font-size: 12px; font-weight: 500; color: var(--tenue); }
.tessera-ris small { color: var(--tenue); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tessera-ris.forte strong { color: #4d3e12; }
.tessera-ris.forte .etic { color: #7a6224; }
.in {
  font: inherit; color: var(--testo-campo, inherit); background: var(--in); border: 1px solid var(--in-bordo);
  border-radius: 5px; padding: 3px 6px; width: 100%; min-width: 0;
}
.in:focus { outline: 2px solid var(--accento); outline-offset: 0; background: var(--campo-focus); }
.in.num { text-align: right; width: 5.4em; font-variant-numeric: tabular-nums; }
.in.cod { width: 5.4em; }
.in.um { width: 4em; }
select.in { width: auto; max-width: 100%; }
textarea.in { resize: vertical; }
.calc { background: var(--calc); color: var(--testo-campo, inherit); }
.cella { display: inline-block; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--calc-bordo); font-variant-numeric: tabular-nums; }

.intestazione {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center;
  background: var(--titolo); border: 1px solid var(--titolo-bordo); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
  box-shadow: var(--ombra);
}
.in.titolo { font-size: 23px; font-weight: 700; padding: 7px 11px; }
.campo-data { display: grid; gap: 2px; font-size: 12.5px; color: var(--titolo-testo); }
.campo-data .in { width: auto; }
.meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; color: var(--titolo-testo); }
.spunta { display: inline-flex; align-items: center; gap: 5px; }

.griglia { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.colonna { display: grid; gap: 12px; min-width: 0; }
.blocco { background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; min-width: 0; box-shadow: var(--ombra); }
.blocco h2 { padding: 8px 12px; border-bottom: 1px solid var(--bordo); }
.b-ing h2, th.b-ing { background: var(--ing); }
.b-mo h2, th.b-mo { background: var(--mo); }
.b-conf h2, th.b-conf { background: var(--conf); }
.b-parz h2 { background: var(--parz); }
.b-vivi h2, .b-guad h2, .b-note h2 { background: var(--pastello); }
.b-note textarea { border: 0; border-radius: 0; display: block; padding: 10px; background: var(--in); color: var(--testo); }

.t { font-size: 13px; }
.t th, .t td { padding: 4px 5px; border-bottom: 1px solid var(--riga); }
.t input[type=checkbox] { margin: 0; vertical-align: middle; }
.t thead th { font-size: 12px; font-weight: 600; color: var(--tenue); text-align: left; white-space: nowrap; letter-spacing: .01em; }
.t thead th.d { text-align: right; }
.t tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.t tfoot td { border-bottom: 0; padding-top: 5px; padding-bottom: 6px; color: var(--tenue); }
.t tfoot td.calc { color: var(--testo); }
.t td.n { color: var(--tenue); text-align: right; width: 1.8em; }
.t td.nome { min-width: 104px; }
.t tr.nuova td { background: var(--riga-nuova); }
.suggerimento { color: var(--spento); font-style: italic; }
.manca { color: var(--div-t); font-weight: 600; }
.etichetta { font-size: 10.5px; background: var(--err-s); color: var(--err-t); border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.formula { color: var(--spento); font-style: italic; cursor: help; margin-left: 2px; }
/* riga spenta: resta leggibile ma non conta; la spunta «on» resta ben visibile per riaccenderla */
.t tr.spenta td { color: var(--spento); }
.t tr.spenta td .in, .t tr.spenta td.calc { opacity: .55; text-decoration: line-through; }
.t tr.spenta td.c, .t tr.spenta td:last-child { opacity: 1; text-decoration: none; }
/* «nel peso»: opzione rara accanto al nome. Si vede quando è tolta («fuori peso»), oppure passando sulla riga */
.peso-opz { margin-left: 6px; font-size: 10.5px; white-space: nowrap; cursor: pointer; user-select: none; }
.peso-opz input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.peso-opz span { color: var(--spento); border: 1px dashed var(--bordo); border-radius: 8px; padding: 1px 6px; opacity: 0; transition: opacity .15s; }
.peso-opz span::before { content: "nel peso"; }
.peso-opz input:not(:checked) + span { opacity: 1; background: var(--div-s); color: var(--div-t); border: 1px solid transparent; }
.peso-opz input:not(:checked) + span::before { content: "fuori peso"; }
.t tr:hover .peso-opz span, .peso-opz input:focus-visible + span { opacity: 1; }
.togli { border: 0; background: none; color: var(--spento); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 4px; }
.togli:hover { background: var(--div-s); color: var(--div-t); }

.lotto { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; padding: 10px; border-top: 1px solid var(--bordo); align-items: center; font-size: 13px; }
.lotto dt { color: var(--tenue); text-align: right; }
.lotto dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.accanto { display: inline-flex; align-items: center; gap: 5px; color: var(--tenue); }
.b-mo .promemoria { padding: 0 10px 8px; }

.parziali th { width: 1%; font-weight: 600; }
.parziali th small { display: block; font-weight: 400; white-space: normal; }
.barra-cella { width: 40%; }
.barra-valore { display: block; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #ef7f72, #f8c9c3); min-width: 2px; }
.incidenza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; font-size: 13px; border-bottom: 1px solid #edeff3; }

.confronto-scheda { margin-top: 16px; }
.confronto-scheda .anomalie { margin-bottom: 10px; }
.t.confronto { max-width: 760px; }
.t.confronto tr.diverso td, .t.confronto tr.diverso th { background: #fff6f4; }
.htmx-request.scheda { cursor: progress; }

/* le colonne della scheda dipendono dallo spazio che hanno davvero, non dalla finestra:
   con il testo ingrandito dalle preferenze lo spazio in px si riduce e le colonne scendono prima */
main { container-type: inline-size; }
@container (max-width: 1360px) {
  .griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .griglia > .colonna:first-child { grid-column: 1 / -1; }
  /* a tutta larghezza la tabella degli ingredienti non si allarga: le colonne restano vicine */
  .griglia > .colonna:first-child .t { width: auto; min-width: 62%; }
}
@container (max-width: 720px) {
  .intestazione { grid-template-columns: 1fr; }
  .griglia { grid-template-columns: minmax(0, 1fr); }
}
/* ------------------------------------------------------------------ telefono e tablet */
@media (max-width: 760px) {
  main { padding: 12px 10px 40px; }
  /* testata: il menu scorre in orizzontale su una riga sola, le icone restano a destra */
  .barra { padding: 0 10px; }
  .riga-alta { padding: 8px 0 2px; }
  .utente span { display: none; }                      /* l'account non ci sta: resta «Esci» */
  .riga-bassa { gap: 4px; }
  .barra nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a { padding: 6px 8px; font-size: 13.5px; }
  .azioni-barra { flex: none; padding-left: 6px; }
  /* elenchi: sul telefono restano nome e prezzo; il resto si vede aprendo la ricetta */
  .solo-largo { display: none; }
  .elenco td, .elenco th { padding: 7px 8px; }
  .testata h1 { font-size: 20px; }
  .legenda, .suggerimento-ordine { display: none; }
  .conteggio.ordine { font-size: 13px; }
  /* anagrafiche: il codice stretto, il nome largo; la tabella scorre dentro .scorri se non ci sta */
  .elenco td:has(> strong) { width: 1%; white-space: nowrap; }   /* la colonna del codice stretta quanto basta */
  .in.testo { width: 11em; min-width: 0; }
  .in.um { width: 3.4em; }
  /* scheda ricetta: una colonna, con i risultati (parziali, costi vivi, guadagni) prima degli ingredienti */
  .griglia > .colonna:nth-child(3) { order: -1; }
  .risultati { grid-template-columns: 1fr 1fr; }
  .intestazione { padding: 10px; }
  .in.titolo { font-size: 18px; }
  .lotto { grid-template-columns: 1fr; gap: 4px; }
  .lotto dt { text-align: left; margin-top: 4px; }
  /* moduli in linea (aggiungi voce, salva versione): un campo per riga, larghi quanto lo schermo */
  .in-linea { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 8px; }
  .in-linea strong, .in-linea .btn { grid-column: 1 / -1; }
  .in-linea strong { margin: 0; }
  .in-linea input { width: 100%; min-width: 0; }
  .in-linea .btn { justify-self: start; }
  /* finestre a tutta larghezza */
  .segnala { width: 96vw; }
  .riquadro { padding: 12px; }
}
@container (max-width: 900px) {
  .griglia > .colonna:first-child .t { width: 100%; min-width: 0; }   /* su tablet e telefono la tabella prende tutta la larghezza */
}
/* schermi a tocco: campi più alti e testo da 16px, così iOS non ingrandisce la pagina al tocco */
@media (pointer: coarse) {
  .in, .filtri input, .filtri select, .in-linea input, .in-linea select, .segnala textarea, .preferenze select {
    font-size: 16px; padding-top: 6px; padding-bottom: 6px;
  }
  .in.num { width: 6.2em; }
  .in.cod { width: 6em; }
  .btn { padding: 8px 14px; }
  .btn.piccolo { padding: 5px 10px; }
  .togli { padding: 6px 8px; font-size: 18px; }
  .t input[type=checkbox] { width: 20px; height: 20px; }
  .icona { padding: 8px; }
}