/* ---------- Scala tipografica ----------
   Prima c'erano 31 dimensioni diverse, otto sotto gli 11px: illeggibili su un
   telefono dietro il banco. Sette valori, minimo 0.78rem (12.5px). */
:root {
  /* La spunta disegnata (non il carattere ✓, che ogni sistema disegna a modo suo). */
  --tm-spunta-bianca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --tm-spunta-maschera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --tm-t-xs:   .78rem;
  --tm-t-sm:   .88rem;
  --tm-t-base: 1rem;
  --tm-t-md:   1.15rem;
  --tm-t-lg:   1.4rem;
  --tm-t-xl:   1.9rem;
  --tm-t-xxl:  2.6rem;
}

/* Taglio Maestro — App «Banco»: stile telefono-first, coerente col brand. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.tm-app {
	font-family: var(--tm-font-testo, system-ui, sans-serif);
	background: var(--tm-avorio, #f6f1e7);
	color: var(--tm-inchiostro, #211e19);
	-webkit-text-size-adjust: 100%;
	overscroll-behavior-y: none;
}
button { font: inherit; cursor: pointer; }
input { font: inherit; }

.tm-app-caricamento { text-align: center; padding: 4rem 1rem; color: var(--tm-bruno); font-family: var(--tm-font-display); font-size: var(--tm-t-lg); }

/* ---- intestazione ---- */
.tm-top {
	position: sticky; top: 0; z-index: 20;
	background: var(--tm-inchiostro); color: var(--tm-marmo);
	padding: calc(env(safe-area-inset-top) + .7rem) 1rem .7rem;
	display: flex; align-items: center; gap: .8rem;
}
.tm-top-bottega { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.tm-top-bottega b { font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-t-md); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-top-bottega small { font-size: var(--tm-t-xs); letter-spacing: .14em; text-transform: uppercase; color: rgba(247,243,234,.55); }
.tm-piano { margin-left: auto; font-size: var(--tm-t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tm-inchiostro); background: var(--tm-oro); padding: .35em .7em; border-radius: 99px; white-space: nowrap; }
.tm-nav { flex: 0 0 auto; }
@media (max-width: 400px) { .tm-piano { display: none; } .tm-nav { padding: .4em .45em; } }
.tm-logout { background: none; border: 0; color: rgba(247,243,234,.7); font-size: var(--tm-t-xs); text-decoration: underline; padding: .3em; }

/* ---- ricerca + reparti ---- */
.tm-barra { position: sticky; top: 0; z-index: 10; background: var(--tm-avorio); padding: .8rem 1rem .4rem; }
.tm-cerca { width: 100%; padding: .85em 1em; border: var(--tm-bordo); border-radius: 99px; background: #fff; color: var(--tm-inchiostro); }
.tm-cerca::placeholder { color: var(--tm-bruno); }
.tm-reparti { display: flex; gap: .4rem; overflow-x: auto; padding: .7rem 0 .3rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tm-reparti::-webkit-scrollbar { display: none; }
.tm-chip { white-space: nowrap; border: 1px solid var(--tm-filo); background: #fff; color: var(--tm-bruno); padding: .45em 1em; border-radius: 99px; font-size: var(--tm-t-xs); font-weight: 600; }
.tm-chip.attivo { background: var(--tm-salvia); border-color: var(--tm-salvia); color: var(--tm-panna); }

/* ---- lista prodotti ---- */
.tm-lista { padding: .3rem .8rem 6rem; display: flex; flex-direction: column; gap: .5rem; }
.tm-riga {
	display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
	background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .6rem .7rem;
}
.tm-riga:active { transform: scale(.99); }
.tm-riga-foto { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--tm-marmo); flex: 0 0 52px; }
.tm-riga-c { flex: 1; min-width: 0; }
.tm-riga-nome { font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-t-base); line-height: 1.2; }
.tm-riga-rep { font-size: var(--tm-t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tm-bruno); }
.tm-riga-d { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.tm-riga-prezzo { font-family: var(--tm-font-display); font-size: var(--tm-t-base); color: var(--tm-inchiostro); white-space: nowrap; }
.tm-stato { font-size: var(--tm-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .2em .6em; border-radius: 99px; }
.tm-stato.ok { background: var(--tm-salvia); color: var(--tm-panna); }
.tm-stato.no { background: var(--tm-rosso, #8a2b1c); color: #fff; }
.tm-stato.off { background: var(--tm-oro); color: var(--tm-inchiostro); }

/* ---- editor ---- */
.tm-ed { padding: 0 0 7rem; }
.tm-ed-top { position: sticky; top: 0; z-index: 10; background: var(--tm-avorio); display: flex; align-items: center; gap: .6rem; padding: calc(env(safe-area-inset-top) + .6rem) 1rem .6rem; }
.tm-back { background: none; border: 0; font-size: var(--tm-t-lg); line-height: 1; color: var(--tm-inchiostro); padding: .1em .3em; }
.tm-ed-nome { font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-t-md); }
.tm-ed-corpo { padding: .4rem 1rem; display: flex; flex-direction: column; gap: 1.3rem; }

.tm-sezione-tit { font-size: var(--tm-t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tm-oro-testo, #7a5f27); margin: 0 0 .6rem; }

/* switch esaurito */
.tm-switch { display: flex; align-items: center; gap: .9rem; background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .9rem 1rem; }
.tm-switch-t { flex: 1; }
.tm-switch-t b { font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-t-md); display: block; }
.tm-switch-t span { font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-toggle { position: relative; width: 58px; height: 34px; border-radius: 99px; border: 0; background: #c9bfa9; transition: background .2s; flex: 0 0 58px; }
.tm-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.tm-toggle.on { background: var(--tm-salvia); }
.tm-toggle.on::after { transform: translateX(24px); }

/* modi di vendita */
.tm-modi { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tm-modo { position: relative; border: 2px solid var(--tm-filo); background: #fff; border-radius: var(--tm-raggio); padding: .85em .7em .85em 1em; text-align: left; color: var(--tm-bruno); transition: border-color .15s, background .15s, box-shadow .15s; }
.tm-modo b { display: block; font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-t-base); color: var(--tm-inchiostro); }
.tm-modo small { font-size: var(--tm-t-xs); }
.tm-modo:hover { opacity: 1; border-color: var(--tm-avorio-scuro); }
.tm-modo.attiva, .tm-modo.attivo {
	opacity: 1;
	border-color: var(--tm-ceralacca);
	background: rgba(110,30,18,.06);
	box-shadow: 0 0 0 3px rgba(110,30,18,.14);
}
.tm-modo.attiva b, .tm-modo.attivo b { color: var(--tm-ceralacca); }
.tm-modo.attiva::after, .tm-modo.attivo::after {
	content: ''; position: absolute; top: .5rem; right: .55rem;
	width: 1.15rem; height: 1.15rem; border-radius: 50%;
	background: var(--tm-ceralacca) var(--tm-spunta-bianca) center / 68% no-repeat;
}

/* campi numerici */
.tm-campi { display: flex; flex-direction: column; gap: .8rem; }
.tm-campo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .7rem 1rem; }
.tm-campo label { font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-campo .tm-ing { display: flex; align-items: baseline; gap: .25rem; }
.tm-campo input { width: 5.5rem; text-align: right; border: 0; border-bottom: 2px solid var(--tm-filo); background: transparent; font-family: var(--tm-font-display); font-size: var(--tm-t-lg); color: var(--tm-inchiostro); padding: .1em 0; }
.tm-campo input:focus { border-color: var(--tm-ceralacca); }
.tm-campo .tm-unita { font-size: var(--tm-t-sm); color: var(--tm-bruno); }

/* anteprima vetrina */
.tm-vetrina { background: var(--tm-inchiostro); color: var(--tm-marmo); border-radius: var(--tm-raggio-img); padding: 1.1rem 1.2rem; text-align: center; }
.tm-vetrina small { font-size: var(--tm-t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tm-oro-testo); }
.tm-vetrina-p { font-family: var(--tm-font-display); font-size: var(--tm-t-xl); color: #fff; margin: .3rem 0 .1rem; }
.tm-vetrina-n { font-size: var(--tm-t-sm); color: rgba(247,243,234,.7); }

/* offerta + blocco piano */
.tm-blocco { background: var(--tm-panna); border: 1px dashed var(--tm-oro); border-radius: var(--tm-raggio); padding: 1rem; text-align: center; color: var(--tm-bruno); font-size: var(--tm-t-sm); }
.tm-blocco b { color: var(--tm-inchiostro); font-family: var(--tm-font-display); font-weight: 500; }

/* barra salva */
.tm-salvabar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .7rem 1rem calc(env(safe-area-inset-bottom) + .7rem); background: linear-gradient(transparent, var(--tm-avorio) 24%); }
.tm-salva { width: 100%; border: 0; border-radius: 99px; background: var(--tm-ceralacca); color: var(--tm-panna); font-weight: 700; font-size: var(--tm-t-base); padding: .95em 1em; }
.tm-salva:disabled { opacity: .5; }
.tm-salva:active { transform: translateY(1px); }

/* toast */
.tm-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 5rem); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2rem); background: var(--tm-inchiostro); color: #fff; padding: .7em 1.2em; border-radius: 99px; font-size: var(--tm-t-sm); z-index: 50; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.tm-toast.vedi { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.tm-toast.err { background: var(--tm-rosso, #8a2b1c); }

/* stato offline */
.tm-offline { background: var(--tm-oro); color: var(--tm-inchiostro); text-align: center; font-size: var(--tm-t-xs); font-weight: 700; padding: .4em; }

.tm-vuoto { text-align: center; color: var(--tm-bruno); padding: 3rem 1rem; }

/* ---- icone header / azioni ---- */
.tm-icona { background: none; border: 0; font-size: var(--tm-t-lg); line-height: 1; padding: .2em .4em; }
.tm-top .tm-icona { color: rgba(247,243,234,.85); margin-left: .3rem; }
.tm-ed-top .tm-icona { color: var(--tm-inchiostro); margin-left: auto; }
.tm-azioni-veloci { display: flex; gap: .5rem; padding-top: .6rem; }
.tm-azione { flex: 1; background: var(--tm-panna); border: var(--tm-bordo); border-radius: 99px; padding: .65em .5em; font-size: var(--tm-t-xs); font-weight: 600; color: var(--tm-inchiostro); }
.tm-azione:active { background: var(--tm-marmo); }

/* ---- riga con modifica rapida ---- */
.tm-riga { padding: 0; gap: 0; overflow: hidden; }
.tm-riga-apri { flex: 1; min-width: 0; display: flex; align-items: center; gap: .8rem; background: none; border: 0; text-align: left; color: inherit; padding: .6rem .4rem .6rem .7rem; }
.tm-riga-rapido { flex: 0 0 auto; align-self: stretch; width: 56px; border: 0; border-left: var(--tm-bordo); background: var(--tm-marmo); font-size: var(--tm-t-md); color: var(--tm-ceralacca); }
.tm-riga-rapido:active { background: #efe7d6; }
.tm-stato.nuovo { background: var(--tm-marmo); color: var(--tm-bruno); border: 1px solid var(--tm-filo); }

@keyframes tm-pulse-ok { 0% { box-shadow: 0 0 0 0 rgba(122,142,91,.55); } 100% { box-shadow: 0 0 0 14px rgba(122,142,91,0); } }
.tm-pulse-ok { animation: tm-pulse-ok .6s ease-out; border-color: var(--tm-salvia) !important; }

/* ---- input numerici (apre tastierino) ---- */
.tm-campo input.tm-num { cursor: pointer; }
.tm-campo input.tm-attivo-kp { border-color: var(--tm-ceralacca); }

/* ---- tastierino ----
   Una dialog vera: velo dietro (il tocco fuori annulla), Annulla in testa, e
   Salva in fondo a tutta larghezza, dove arriva il pollice della mano che regge
   il telefono. Sopra le cifre, sempre, il prezzo di prima: senza, dopo il primo
   tasto non si sapeva più da dove si era partiti. */
.tm-kp-velo { position: fixed; inset: 0; z-index: 60; background: rgba(33,30,25,.38); display: flex; align-items: flex-end; justify-content: center; animation: tm-velo .18s ease-out; }
@keyframes tm-velo { from { background: rgba(33,30,25,0); } }
.tm-kp { width: 100%; max-width: 480px; background: var(--tm-panna); border-radius: 20px 20px 0 0; padding: .5rem .8rem calc(env(safe-area-inset-bottom) + .8rem); box-shadow: 0 -12px 30px -14px rgba(33,30,25,.45); animation: tm-su .22s cubic-bezier(.2,.8,.2,1); }
.tm-kp:focus { outline: none; }
.tm-kp-testa { display: flex; align-items: center; gap: .5rem; }
.tm-kp-titolo { flex: 1; min-width: 0; font-size: var(--tm-t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tm-bruno); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-kp-annulla { background: none; border: 0; min-height: 44px; padding: 0 .4rem 0 .8rem; color: var(--tm-ceralacca); font-weight: 600; }
.tm-kp-val { font-family: var(--tm-font-display); font-size: var(--tm-t-xxl); line-height: 1.1; text-align: center; color: var(--tm-inchiostro); font-variant-numeric: lining-nums tabular-nums; padding-top: .1rem; }
.tm-kp-nota { min-height: 1.5em; margin: .15rem 0 .6rem; text-align: center; font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-kp-nota.tm-kp-avviso { color: var(--tm-ceralacca); font-weight: 600; }
.tm-kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tm-kp-key { min-height: 56px; background: #fff; border: var(--tm-bordo); border-radius: 14px; padding: .4em; font-family: var(--tm-font-display); font-size: var(--tm-t-xl); color: var(--tm-inchiostro); display: flex; align-items: center; justify-content: center; }
.tm-kp-key:active { background: var(--tm-marmo); }
.tm-kp-key svg { display: block; }
.tm-kp-canc { color: var(--tm-ceralacca); }
.tm-kp-spazio { visibility: hidden; }
.tm-kp-fatto { width: 100%; margin-top: .6rem; min-height: 52px; background: var(--tm-ceralacca); color: var(--tm-panna); border: 0; border-radius: 99px; font-weight: 700; font-size: var(--tm-t-base); }
.tm-kp-fatto:disabled { opacity: .45; cursor: not-allowed; }
@media (min-width: 980px) {
	.tm-kp-velo { align-items: center; }
	.tm-kp { border-radius: 20px; max-width: 400px; }
}

/* ---- sheet ---- */
.tm-sheet { position: fixed; inset: 0; z-index: 55; background: rgba(33,30,25,.45); display: flex; align-items: flex-end; }
.tm-sheet-p { background: var(--tm-avorio); width: 100%; border-radius: 20px 20px 0 0; padding: 1rem 1.1rem calc(env(safe-area-inset-bottom) + 1.2rem); max-height: 88vh; overflow: auto; animation: tm-su .25s ease; }
@keyframes tm-su { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.tm-sheet-tit { display: flex; align-items: center; justify-content: space-between; font-family: var(--tm-font-display); font-size: var(--tm-t-lg); margin-bottom: .6rem; }
.tm-sheet-sub { color: var(--tm-bruno); font-size: var(--tm-t-sm); margin: 0 0 1rem; }

/* ---- ritocco ---- */
.tm-ritocco-ctrl { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 1.2rem 0 .4rem; }
.tm-pm { width: 3rem; height: 3rem; border-radius: 50%; border: var(--tm-bordo); background: #fff; font-size: var(--tm-t-xl); color: var(--tm-inchiostro); }
.tm-ritocco-perc { font-family: var(--tm-font-display); font-size: var(--tm-t-xxl); min-width: 5rem; text-align: center; color: var(--tm-ceralacca); }
.tm-ritocco-conta { text-align: center; color: var(--tm-bruno); margin-bottom: 1rem; }
.tm-ritocco-conta b { color: var(--tm-inchiostro); }

/* ---- storico ---- */
.tm-storico { background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .3rem .9rem; }
.tm-storico-r { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: var(--tm-bordo); font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-storico-r:last-child { border-bottom: 0; }
.tm-storico-r b { font-family: var(--tm-font-display); color: var(--tm-inchiostro); }
.tm-storico-vuoto { color: var(--tm-bruno); font-size: var(--tm-t-sm); padding: .5rem 0; }
.tm-salva-sec { background: transparent !important; color: var(--tm-ceralacca) !important; border: 1.5px solid var(--tm-ceralacca) !important; margin-top: .7rem; }

/* ---- impostazioni / voci ---- */
.tm-voce { display: block; width: 100%; text-align: left; background: #fff; border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .9em 1em; margin-bottom: .5rem; font-size: var(--tm-t-base); color: var(--tm-inchiostro); }
.tm-voce-esci { color: var(--tm-ceralacca); }

/* ---- schermo di blocco PIN ---- */
.tm-lock { position: fixed; inset: 0; z-index: 70; background: var(--tm-inchiostro); color: var(--tm-marmo); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.tm-lock-logo { font-family: var(--tm-font-display); font-style: italic; font-size: var(--tm-t-xxl); color: #fff; margin-bottom: .4rem; }
.tm-lock-in p { color: rgba(247,243,234,.7); margin: 0 0 1.6rem; }
.tm-lock .tm-salva { max-width: 260px; margin: 0 auto; }

/* ---- azioni: 2 per riga ---- */
.tm-azioni-veloci { flex-wrap: wrap; }
.tm-azione { flex: 1 1 44%; }
.tm-azione-nuovo { background: var(--tm-ceralacca); color: var(--tm-panna); border-color: var(--tm-ceralacca); }

/* ---- costo & margine ---- */
.tm-margine { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .2rem .2rem .1rem; font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-margine-v b { font-family: var(--tm-font-display); color: var(--tm-salvia); font-size: var(--tm-t-base); }
.tm-margine-basso .tm-margine-v b { color: var(--tm-ceralacca); }
.tm-margine-avviso { font-size: var(--tm-t-xs); font-weight: 700; color: var(--tm-ceralacca); }
.tm-margine-vuoto { font-style: italic; }
.tm-suggerisci { display: flex; align-items: center; gap: .7rem; background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .6rem 1rem; }
.tm-suggerisci-l { flex: 1; font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-suggerisci input { width: 3.4rem; text-align: right; border: 0; border-bottom: 2px solid var(--tm-filo); background: transparent; font-family: var(--tm-font-display); font-size: var(--tm-t-lg); color: var(--tm-inchiostro); }
.tm-mini { background: var(--tm-inchiostro); color: var(--tm-panna); border: 0; border-radius: 99px; padding: .55em 1em; font-size: var(--tm-t-xs); font-weight: 700; }

/* ---- nuovo prodotto ---- */
.tm-nuovo-foto { margin-top: .4rem; border: 1.5px dashed var(--tm-oro); border-radius: var(--tm-raggio); padding: 1.4rem; text-align: center; color: var(--tm-bruno); overflow: hidden; }
.tm-nuovo-foto img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; }

/* ---- ritaglio foto ---- */
.tm-crop { position: fixed; inset: 0; z-index: 65; background: rgba(33,30,25,.92); display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.tm-crop-in { width: 100%; max-width: 420px; text-align: center; }
.tm-crop-tit { color: var(--tm-marmo); font-family: var(--tm-font-display); font-size: var(--tm-t-lg); margin: 0 0 1rem; }
.tm-crop-frame { display: inline-block; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px rgba(201,162,39,.6), 0 0 0 2000px rgba(33,30,25,.35); }
.tm-crop-cv { display: block; touch-action: none; background: #000; cursor: grab; }
.tm-crop-zoom { width: 100%; margin: 1.2rem 0; accent-color: var(--tm-oro); }

/* ---- statistiche ---- */
.tm-stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.tm-stat-c { background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: 1rem .6rem; text-align: center; }
.tm-stat-c b { display: block; font-family: var(--tm-font-display); font-size: var(--tm-t-lg); color: var(--tm-ceralacca); line-height: 1; }
.tm-stat-c span { font-size: var(--tm-t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-bruno); }

/* ============================================================
   DESKTOP — layout master-detail (≥980px)
   ============================================================ */
@media (min-width: 980px) {
	.tm-work { display: grid; grid-template-columns: minmax(330px, 410px) 1fr; max-width: 1440px; margin: 0 auto; align-items: start; }
	.tm-work-list { border-right: var(--tm-bordo); min-height: calc(100vh - 60px); }
	.tm-work-list .tm-barra { position: static; }
	.tm-work-list .tm-lista { padding-bottom: 2rem; }
	.tm-work-detail .tm-ed { padding: 0 0 1rem; }
	.tm-work-detail .tm-ed-top { position: static; }
	.tm-ed-salva-desk { padding: .4rem 1rem 1.4rem; }
	.tm-ed-salva-desk .tm-salva { max-width: 440px; }
	.tm-azioni-veloci .tm-azione { flex: 1 1 30%; }
	.tm-riga-sel { border-color: var(--tm-ceralacca); box-shadow: 0 0 0 2px rgba(110,30,18,.14); }
}
@media (min-width: 1200px) {
	.tm-work-detail .tm-ed-corpo, .tm-work-detail .tm-ed-top { max-width: 780px; margin-left: auto; margin-right: auto; }
}

/* placeholder dettaglio */
.tm-detail-vuoto { display: flex; align-items: center; justify-content: center; min-height: 56vh; color: var(--tm-bruno); text-align: center; padding: 2rem; }
.tm-detail-vuoto-i { font-size: var(--tm-t-xxl); color: var(--tm-oro-testo); margin-bottom: .6rem; }
.tm-detail-vuoto p { margin: .1rem 0; }

/* ---- selezione multipla ---- */
.tm-azione-on { background: var(--tm-salvia) !important; color: var(--tm-panna) !important; border-color: var(--tm-salvia) !important; }
.tm-riga-check { cursor: pointer; gap: .8rem; padding: .6rem .7rem; align-items: center; }
.tm-riga-on { border-color: var(--tm-salvia); box-shadow: 0 0 0 2px rgba(122,142,91,.2); }
.tm-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--tm-filo); position: relative; }
.tm-check.on { background: var(--tm-salvia); border-color: var(--tm-salvia); }
.tm-check.on::after { content: ''; position: absolute; inset: 0; background: var(--tm-spunta-bianca) center / 78% no-repeat; }
.tm-selbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--tm-inchiostro); color: var(--tm-marmo); border-radius: var(--tm-raggio); margin: .5rem .2rem; padding: .7rem .9rem; box-shadow: var(--tm-ombra-alta); }
.tm-selbar-n { font-weight: 700; font-size: var(--tm-t-sm); }
.tm-selbar-az { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.tm-selbar .tm-mini { background: var(--tm-panna); color: var(--tm-inchiostro); }
.tm-selbar .tm-mini-ghost { background: transparent; color: rgba(247,243,234,.85); border: 1px solid rgba(247,243,234,.3); }

/* ---- modale storico/ricarico ---- */
.tm-stmod-ric { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .9rem 1.1rem; margin-bottom: .4rem; color: var(--tm-bruno); }
.tm-stmod-ric-v { font-size: var(--tm-t-base); }
.tm-stmod-ric-v b { font-family: var(--tm-font-display); font-size: var(--tm-t-lg); color: var(--tm-salvia); }
.tm-stmod-ric.tm-margine-basso .tm-stmod-ric-v b { color: var(--tm-ceralacca); }

/* ---- badge ordini in testata ---- */
.tm-icona-rel { position: relative; }
.tm-badge-n { position: absolute; top: -.1rem; right: -.1rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .2rem; display: flex; align-items: center; justify-content: center; background: var(--tm-ceralacca); color: #fff; font-size: var(--tm-t-xs); font-weight: 700; border-radius: 99px; line-height: 1; }

/* ---- lista ordini ---- */
.tm-ordini { display: flex; flex-direction: column; gap: .5rem; }
.tm-ordine { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .7rem .9rem; }
.tm-ordine:active { transform: scale(.99); }
.tm-ordine-c { flex: 1; min-width: 0; }
.tm-ordine-t { display: flex; align-items: center; gap: .5rem; }
.tm-ordine-t b { font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-t-md); color: var(--tm-inchiostro); }
.tm-ordine-m { font-size: var(--tm-t-sm); color: var(--tm-bruno); margin-top: .1rem; }
.tm-ordine-cons { font-size: var(--tm-t-xs); color: var(--tm-oro-testo, #7a5f27); margin-top: .15rem; }
.tm-ordine-tot { font-family: var(--tm-font-display); font-size: var(--tm-t-md); color: var(--tm-ceralacca); white-space: nowrap; }

/* pill stato ordine */
.tm-ost { font-size: var(--tm-t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35em .65em; border-radius: 99px; line-height: 1.2; white-space: nowrap; }
.tm-ordine-t { flex-wrap: wrap; row-gap: .25rem; }
.tm-ost-nuovo { background: var(--tm-oro); color: var(--tm-inchiostro); }
.tm-ost-prep { background: var(--tm-salvia); color: var(--tm-panna); }
.tm-ost-spe { background: var(--tm-ceralacca); color: #fff; }
.tm-ost-fatto { background: #4f5a3a; color: #fff; }
.tm-ost-ann { background: transparent; color: var(--tm-bruno); box-shadow: inset 0 0 0 1px var(--tm-filo); } /* era bianco su #b3a89a: 2,34:1 */

/* dettaglio ordine */
.tm-ordine-tot-r { border-top: 2px solid var(--tm-inchiostro) !important; }
.tm-ordine-tot-r b { color: var(--tm-ceralacca); font-size: var(--tm-t-md); }
.tm-ordine-info { color: var(--tm-bruno); margin: .5rem 0 0; line-height: 1.5; }
.tm-ordine-info b { color: var(--tm-inchiostro); }
.tm-ordine-note { font-style: italic; }
.tm-ordine-azioni { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }

/* ---- testata: nav pulito (no emoji) ---- */
.tm-nav { background: none; border: 0; color: rgba(247,243,234,.9); font-family: var(--tm-font-testo); font-size: var(--tm-t-sm); font-weight: 600; padding: .4em .6em; border-radius: 99px; display: inline-flex; align-items: center; gap: .3rem; }
.tm-nav:hover { color: #fff; background: rgba(247,243,234,.08); }
.tm-nav-rel { position: relative; }
.tm-nav-ic { color: rgba(247,243,234,.8); padding: .35em; }
.tm-nav-ic svg { display: block; }
.tm-ed-top .tm-nav-ic { color: var(--tm-bruno); }
.tm-ed-top .tm-nav-ic:hover { color: var(--tm-inchiostro); background: rgba(33,30,25,.06); }
.tm-nav-rel .tm-badge-n { position: static; margin-left: .15rem; }

/* ---- campi testo (descrizione/scheda) ---- */
.tm-campo-testo { display: flex; flex-direction: column; gap: .35rem; }
.tm-campo-testo label { font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-testo { width: 100%; border: var(--tm-bordo); border-radius: var(--tm-raggio); background: #fff; padding: .7em .8em; font-family: var(--tm-font-testo); font-size: var(--tm-t-sm); color: var(--tm-inchiostro); resize: vertical; }
.tm-testo:focus { border-color: var(--tm-ceralacca); }

/* ---- Box pronti (gestione dall'app) ---- */
.tm-box-mini { display: flex; gap: .25rem; margin-top: .35rem; flex-wrap: wrap; }
.tm-box-mini img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; background: var(--tm-marmo); }

.tm-box-comp { display: flex; flex-direction: column; gap: .5rem; }
.tm-comp-r { display: flex; align-items: center; gap: .7rem; background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .5rem .6rem; }
.tm-comp-foto { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; object-fit: cover; background: var(--tm-marmo); }
.tm-comp-nome { flex: 1; min-width: 0; font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-t-base); color: var(--tm-inchiostro); }
.tm-comp-q { display: flex; align-items: center; gap: .5rem; }
.tm-comp-q .tm-pm { width: 2.1rem; height: 2.1rem; font-size: var(--tm-t-lg); }
.tm-comp-qn { font-family: var(--tm-font-display); font-size: var(--tm-t-md); min-width: 1.4em; text-align: center; }
.tm-comp-rim { background: none; border: 0; color: var(--tm-bruno); font-size: var(--tm-t-lg); line-height: 1; padding: .2em .35em; }
.tm-comp-rim:hover { color: var(--tm-ceralacca); }

.tm-box-indic { background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .3rem .9rem; }
.tm-box-ind-r { display: flex; align-items: baseline; justify-content: space-between; padding: .5rem 0; border-bottom: var(--tm-bordo); font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-box-ind-r:last-child { border-bottom: 0; }
.tm-box-ind-r b { font-family: var(--tm-font-display); color: var(--tm-inchiostro); }
.tm-box-ind-evid b { color: var(--tm-ceralacca); font-size: var(--tm-t-md); }
.tm-box-ric b { color: var(--tm-salvia); }
.tm-box-ric.tm-margine-basso b { color: var(--tm-ceralacca); }

/* picker componenti */
.tm-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .6rem; }
.tm-picker-c { background: var(--tm-panna); border: var(--tm-bordo); border-radius: var(--tm-raggio); padding: .4rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--tm-inchiostro); }
.tm-picker-c:active { transform: scale(.97); }
.tm-picker-c img, .tm-picker-foto { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; background: var(--tm-marmo); }
.tm-picker-n { font-size: var(--tm-t-xs); line-height: 1.2; text-align: center; }
@media (min-width: 980px) { .tm-picker-grid { grid-template-columns: repeat(4, 1fr); } }

/* ritiro: giorno/ora ben visibili nella sezione Ordini */
.tm-ordine-cons-ritiro { color: var(--tm-salvia, #45523f); font-weight: 600; }
.tm-ordine-ritiro {
	margin: 8px 0 0; padding: 8px 12px;
	background: rgba(69,82,63,.08); border-left: 3px solid var(--tm-salvia, #45523f);
	border-radius: 8px; color: var(--tm-inchiostro, #211e19);
}
.tm-ordine-ritiro b { color: var(--tm-salvia, #45523f); }

/* editor orari di ritiro */
.tm-orari { display: flex; flex-direction: column; gap: 10px; }
.tm-orari-g { border: 1px solid var(--tm-avorio-scuro, #e8e2d4); border-radius: 10px; padding: 10px 12px; }
.tm-orari-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tm-orari-cap b { font-size: var(--tm-t-base); }
.tm-orari-sw { border: 1px solid var(--tm-avorio-scuro, #e8e2d4); background: #f3efe6; color: var(--tm-bruno, #6f685c); border-radius: 99px; padding: 5px 14px; font-weight: 600; cursor: pointer; }
.tm-orari-sw.on { background: var(--tm-salvia, #45523f); color: #fff; border-color: var(--tm-salvia, #45523f); }
.tm-orari-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; }
.tm-orari-t { display: flex; flex-direction: column; gap: 3px; font-size: var(--tm-t-xs); color: var(--tm-bruno, #6f685c); }
.tm-orari-time, .tm-orari-num, .tm-orari-sel { border: 1px solid var(--tm-avorio-scuro, #e8e2d4); border-radius: 8px; padding: 9px 10px; font-size: var(--tm-t-base); background: #fff; color: var(--tm-inchiostro, #211e19); }
.tm-orari-globali { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 4px; }

/* regalo nel dettaglio ordine */
.tm-ordine-regalo { margin: 8px 0 0; padding: 8px 12px; background: rgba(142,42,29,.07); border-left: 3px solid var(--tm-ceralacca, #8e2a1d); border-radius: 8px; color: var(--tm-inchiostro, #211e19); line-height: 1.5; }
.tm-ordine-regalo b { color: var(--tm-ceralacca, #8e2a1d); }

/* riga checkbox nell'editor (es. taglio della settimana) */
.tm-campo-check { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; cursor: pointer; color: var(--tm-inchiostro, #211e19); font-size: var(--tm-t-sm); }
.tm-campo-check input { width: 18px; height: 18px; accent-color: var(--tm-ceralacca, #8e2a1d); }

/* Toast con azione (annulla): deve essere cliccabile, quindi riattivo i puntatori. */
.tm-toast.con-az { pointer-events: auto; display: flex; align-items: center; gap: .9em; padding-right: .5em; }
.tm-toast-az { background: none; border: 0; color: var(--tm-oro, #a3823c); font: inherit; font-weight: 600; padding: .3em .7em; border-radius: 99px; cursor: pointer; }
.tm-toast-az:hover, .tm-toast-az:focus-visible { background: rgba(255, 255, 255, .12); outline: 0; }
/* Il cestino resta discreto: si accende solo al passaggio, per non invitare al tocco. */
.tm-nav-el { color: var(--tm-bruno, #6f685c); }
.tm-nav-el:hover, .tm-nav-el:focus-visible { color: var(--tm-ceralacca, #8e2a1d); }
/* Pulsante di conferma per un'azione che togliesse qualcosa dal banco. */
.tm-salva-del { background: var(--tm-ceralacca, #8e2a1d); color: var(--tm-crema-su-scuro, #f1ecdf); }
.tm-salva-del:hover, .tm-salva-del:focus-visible { background: var(--tm-ceralacca-fonda, #6c1d12); }

/* ---------- Bersagli da toccare ----------
   Dietro un banco si tocca con le dita fredde e le mani non sempre asciutte:
   44px è il minimo perché il colpo vada a segno.

   ATTENZIONE: min-width va SOLO ai pulsanti con la sola icona. Su un pulsante
   con testo sostituisce il min-width:auto implicito, che è ciò che impedisce a
   un flex item di comprimersi sotto il proprio contenuto: i chip dei reparti si
   schiacciavano a 44px col testo che usciva fuori. Stesso motivo per cui non
   tocco il display: .tm-modo ha due righe impilate dentro e inline-flex le
   affiancherebbe. */
.tm-nav, .tm-icona, .tm-riga-rapido, .tm-pm, .tm-comp-rim {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Con testo: solo l'altezza, il layout interno resta quello che era. */
.tm-chip, .tm-azione, .tm-voce, .tm-logout, .tm-toast-az, .tm-orari-sel { min-height: 44px; }
.tm-modo { min-height: 56px; }
/* Nella barra scorrevole dei reparti i chip non si comprimono mai. */
.tm-chip { flex: 0 0 auto; }
/* La riga del prodotto è il bersaglio più usato di tutti. */
.tm-riga-apri { min-height: 56px; }

/* ---------- Chi preferisce meno movimento ----------
   Il tema pubblico lo rispetta già, l'app no: allineo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Focus visibile ----------
   Serve a chi naviga da tastiera e, sul telefono, a capire dove si è. */
:focus-visible {
  outline: 2px solid var(--tm-oro, #a3823c);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- Ordina e filtra / cestino ---------- */
.tm-voce-on { background: var(--tm-marmo); font-weight: 700; }
.tm-voce-on { display: flex; align-items: center; }
.tm-voce-on::after {
  content: ''; flex: none; width: 1.1em; height: 1.1em; margin-left: auto; padding-left: .6em;
  background-color: var(--tm-ceralacca);
  -webkit-mask: var(--tm-spunta-maschera) right center / 1.1em no-repeat; mask: var(--tm-spunta-maschera) right center / 1.1em no-repeat;
}
.tm-cest-r { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--tm-filo); }
.tm-cest-r .tm-azione { flex: 0 0 auto; min-width: 6rem; }

/* ---------- Box su misura e ricetta nell'editor ---------- */
.tm-box-sez { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.tm-box-sez .tm-orari-sel { width: 100%; }
.tm-box-sez .tm-orari-sel:disabled { opacity: .5; }
.tm-campo-r { display: flex; align-items: center; gap: .5rem; }
.tm-campo-num { flex: 1; min-height: 44px; padding: .5em .7em; border: 1px solid var(--tm-filo); border-radius: 6px; background: #fff; font-size: var(--tm-t-md); }

/* ---------- Vista compatta ----------
   Per il giro dei prezzi: più righe a schermo, prezzo in evidenza, un tocco
   per aprire il tastierino invece di passare dalla scheda. */
.tm-lista-densa .tm-riga { padding: 0; }
.tm-lista-densa .tm-riga-apri { min-height: 52px; padding: .5rem .2rem .5rem .8rem; }
.tm-lista-densa .tm-riga-nome { font-size: var(--tm-t-base); }
.tm-lista-densa .tm-riga-prezzo { font-size: var(--tm-t-md); font-weight: 700; }
.tm-lista-densa .tm-riga-foto { display: none; }

/* ---------- Statistiche ----------
   Grafici in CSS puro: nessuna libreria (su 4G da bancone ogni kB conta).
   Regola di colore: il ceralacca è il colore firma, non un riempimento. Nei
   grafici va SOLO sul dato che conta (il picco, il primo della classifica);
   tutto il resto in toni caldi e neutri, altrimenti non si legge più niente. */
.tm-stat-periodi { padding: .2rem 0 .6rem; }
.tm-stat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1.4rem; }
@media (min-width: 700px) { .tm-stat-cards { grid-template-columns: repeat(4, 1fr); } }
.tm-stat-c { position: relative; }
.tm-stat-delta { display: block; margin-top: .2rem; font-size: var(--tm-t-xs); font-weight: 600; letter-spacing: .03em; }
.tm-stat-delta.su { color: var(--tm-salvia, #45523f); }
.tm-stat-delta.giu { color: var(--tm-bruno, #6f685c); }

/* Testo secondario: piccolo e bruno. NON usare .tm-mini, che è una pillola scura
   pensata per i pulsanti (usarla qui produceva barre nere a tutta larghezza). */
.tm-nota { font-size: var(--tm-t-xs); color: var(--tm-bruno); line-height: 1.5; margin: .2rem 0 .8rem; display: block; }

/* Andamento giornaliero: barre sottili, tono neutro, picco in evidenza. */
.tm-graf { display: flex; align-items: flex-end; gap: 3px; height: 76px; padding: .3rem 0; border-bottom: 1px solid var(--tm-filo); }
.tm-graf-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 2px; }
.tm-graf-b { width: 62%; max-width: 14px; background: var(--tm-avorio-scuro, #e8e2d4); border-radius: 2px 2px 0 0; }
.tm-graf-b.picco { background: var(--tm-ceralacca, #8e2a1d); }
.tm-graf-b.vuota { background: transparent; border-bottom: 2px solid var(--tm-filo, #e4ddcd); }
.tm-graf-x { display: flex; justify-content: space-between; font-size: var(--tm-t-xs); color: var(--tm-bruno); margin: .4rem 0 1.4rem; }
.tm-graf-sett { height: 96px; gap: .5rem; }
.tm-graf-sett .tm-graf-b { width: 100%; max-width: none; border-radius: 3px; background: var(--tm-salvia, #45523f); opacity: .28; }
.tm-graf-sett .tm-graf-b.picco { opacity: 1; }
.tm-graf-sett .tm-graf-col small { margin-top: .35rem; font-size: var(--tm-t-xs); color: var(--tm-bruno); }

/* Classifica: la barra serve a confrontare, non a decorare. */
.tm-stat-top { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.tm-stat-top-r { display: flex; flex-direction: column; gap: .3rem; }
.tm-stat-top-t { display: flex; align-items: baseline; gap: .6rem; }
.tm-stat-top-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-stat-top-t b { font-family: var(--tm-font-display); white-space: nowrap; }
.tm-stat-bar { height: 3px; background: var(--tm-filo, #e4ddcd); border-radius: 99px; overflow: hidden; }
.tm-stat-bar-f { height: 100%; background: var(--tm-avorio-scuro, #d8d0bd); border-radius: 99px; }
.tm-stat-bar-f.primo { background: var(--tm-oro, #a3823c); }
.tm-stat-bar-f.verde { background: var(--tm-salvia, #45523f); opacity: .45; }
.tm-stat-bar-f.verde.primo { opacity: 1; }
.tm-stat-sotto { display: flex; justify-content: space-between; gap: .6rem; font-size: var(--tm-t-xs); color: var(--tm-bruno); }
.tm-stat-top-m.magro { color: var(--tm-ceralacca, #8e2a1d); font-weight: 700; }

/* Ritiro / spedizione */
.tm-stat-due { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0 1.4rem; }
.tm-stat-due > div { background: var(--tm-panna); border: 1px solid var(--tm-filo); border-radius: 8px; padding: .9rem; text-align: center; }
.tm-stat-due b { display: block; font-family: var(--tm-font-display); font-size: var(--tm-t-lg); }
.tm-stat-due span { font-size: var(--tm-t-xs); color: var(--tm-bruno); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Statistiche: misura di lettura ----------
   La schermata nasce per il telefono. Su desktop, senza un limite, le card e le
   barre si stirano per tutta la finestra e diventano illeggibili. */
.tm-stat-pagina { max-width: 46rem; margin-inline: auto; }
.tm-graf-sett .tm-graf-b { max-width: 56px; margin-inline: auto; }

/* Un taglio fermo: tutta la riga è il bersaglio, con la freccia a destra.
   NON usare .tm-azione qui: ha flex:1 e si mangia il nome del prodotto. */
.tm-fermo {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; min-height: 48px; padding: .6rem .2rem;
  background: none; border: 0; border-bottom: var(--tm-bordo);
  font: inherit; color: var(--tm-inchiostro); text-align: left; cursor: pointer;
}
.tm-fermo:last-child { border-bottom: 0; }
.tm-fermo:hover, .tm-fermo:focus-visible { color: var(--tm-ceralacca, #8e2a1d); }
.tm-fermo-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tm-t-sm); }
.tm-fermo-v { flex: 0 0 auto; font-size: var(--tm-t-md); color: var(--tm-bruno); }

/* ---------- Barra in alto su schermi stretti ----------
   La media query a 400px era tarata su due voci (Box, Ordini). Aggiungendo
   «Banco» e «Conti» la barra traboccava di una sessantina di px su un telefono
   da 375. Sotto i 520px «Banco» sparisce: il ritorno al listino resta comunque
   a portata, la freccia indietro c'è in ogni schermata. */
/* 3.18.3: su un telefono la barra diventa una fila di schede, con «Banco»
   sempre presente e la voce attiva segnata. Prima «Banco» spariva sotto i 520px
   e nessuna voce risultava mai attiva; il nome della bottega, troncato a
   «Macell…», non diceva niente a chi quella bottega la manda avanti. */
@media (max-width: 520px) {
  .tm-top { gap: .15rem; padding-left: .5rem; padding-right: .5rem; justify-content: space-between; }
  .tm-top-bottega, .tm-piano { display: none; }
  .tm-nav { padding: .4em .5em; }
}
@media (max-width: 400px) {
  .tm-top-bottega small { display: none; }
}

/* ---------- Azioni che tolgono qualcosa (3.18.3) ----------
   Annullare un ordine o eliminare un box non ha il peso di un pulsante accanto a
   «completato»: è un link, staccato, e chiede sempre conferma. */
.tm-ordine-annulla {
  align-self: center; min-height: 44px; margin-top: .9rem; padding: 0 .8rem;
  background: none; border: 0; color: var(--tm-ceralacca); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tm-ed-corpo > .tm-ordine-annulla { align-self: flex-start; margin-top: 0; padding-left: 0; }
.tm-ordine-tel { display: flex; flex-wrap: wrap; gap: .5rem; }
.tm-ordine-tel a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 1.5px solid var(--tm-salvia); border-radius: 99px;
  color: var(--tm-salvia); font-weight: 600; text-decoration: none;
}
.tm-ordine-tel a:first-child { background: var(--tm-salvia); color: var(--tm-panna); }

/* Anteprima del ritocco: tre prezzi prima e dopo, così si vede cosa succede. */
.tm-ritocco-anteprima { margin-bottom: 1rem; }
.tm-ritocco-anteprima .tm-storico-r b { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.tm-ritocco-anteprima .tm-storico-r span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: .6rem; }

/* ---------- Icone disegnate (3.18.3) ---------- */
.tm-back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -.5rem; padding: 0; }
.tm-azione, .tm-mini, .tm-margine-avviso, .tm-con-ico, .tm-ed-azione { display: inline-flex; align-items: center; justify-content: center; gap: .45em; }
.tm-azione svg, .tm-mini svg, .tm-margine-avviso svg, .tm-con-ico svg, .tm-ed-azione svg { flex: none; }
.tm-salva svg { vertical-align: -.22em; margin-right: .45em; }
.tm-ordine-ritiro, .tm-ordine-regalo { display: flex; gap: .55em; align-items: flex-start; }
.tm-ordine-ritiro svg, .tm-ordine-regalo svg { flex: none; margin-top: .15em; }
.tm-ordine-ritiro svg { color: var(--tm-salvia); }
.tm-ordine-regalo svg { color: var(--tm-ceralacca); }
.tm-stat-delta { display: flex; align-items: center; justify-content: center; gap: .2em; }
.tm-detail-vuoto-i svg { display: inline-block; }
.tm-nuovo-foto { cursor: pointer; }
.tm-nuovo-foto .tm-con-ico svg { color: var(--tm-oro-testo, #7a5f27); }

/* La barra della lista: ricerca con due interruttori, poi reparti, poi due azioni. */
.tm-azione { font-size: var(--tm-t-sm); }
.tm-cerca-riga { display: flex; align-items: center; gap: .4rem; }
.tm-cerca-riga .tm-cerca { flex: 1; min-width: 0; }
.tm-icobtn {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--tm-bordo); border-radius: 50%; background: #fff; color: var(--tm-inchiostro);
}
.tm-icobtn:active { background: var(--tm-marmo); }
.tm-icobtn-on { background: var(--tm-salvia); border-color: var(--tm-salvia); color: var(--tm-panna); }
.tm-icobtn-punto { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--tm-ceralacca); box-shadow: 0 0 0 2px var(--tm-panna); }

/* Voci con icona e riga di spiegazione: gli Strumenti del banco. */
.tm-voce-ic { display: flex; align-items: center; gap: .85rem; }
.tm-voce-i { flex: none; display: inline-flex; color: var(--tm-ceralacca); }
.tm-voce-t { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tm-voce-t b { font-weight: 600; }
.tm-voce-t small { font-size: var(--tm-t-sm); color: var(--tm-bruno); }

/* Azione testuale nella testata di una pagina (es. «Da preparare oggi»). */
.tm-ed-azione {
  margin-left: auto; min-height: 44px; padding: 0 .9rem;
  background: var(--tm-panna); border: var(--tm-bordo); border-radius: 99px;
  color: var(--tm-inchiostro); font-size: var(--tm-t-sm); font-weight: 600;
}

/* La voce attiva della barra in alto: si vede dove si è. */
.tm-nav-on { color: #fff; background: rgba(247,243,234,.14); box-shadow: inset 0 -2px 0 var(--tm-oro); }

/* ---------- I reparti ----------
   Col mouse non c'è un dito per scorrere di lato: le etichette vanno a capo.
   Col dito la fila scorre, e sfuma dal lato dove ce ne sono altre. */
.tm-reparti { scroll-snap-type: x proximity; }
.tm-reparti .tm-chip { scroll-snap-align: start; }
.tm-reparti.tm-scorre-fine { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
.tm-reparti.tm-scorre-inizio { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem); mask-image: linear-gradient(90deg, transparent, #000 2.5rem); }
.tm-reparti.tm-scorre-inizio.tm-scorre-fine { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
@media (hover: hover) and (pointer: fine) {
  .tm-reparti { flex-wrap: wrap; overflow-x: visible; }
}

/* ---------- Tre azioni in fila (3.18.4) ---------- */
.tm-azioni-veloci { flex-wrap: nowrap; }
.tm-azioni-veloci .tm-azione { flex: 1 1 0; min-width: 0; padding-left: .35em; padding-right: .35em; white-space: nowrap; }
.tm-azioni-veloci .tm-azione-nuovo { flex-grow: 1.4; }

/* Voce con freccia a destra (scelta del reparto per il giro, cartellini). */
.tm-voce-freccia { margin-left: auto; flex: none; display: inline-flex; color: var(--tm-bruno); }
.tm-voce:disabled { opacity: .45; cursor: not-allowed; }
.tm-scorciatoie { margin: .4rem 0 0; text-align: center; }
.tm-link {
  align-self: center; min-height: 44px; padding: 0 .8rem; background: none; border: 0;
  color: var(--tm-inchiostro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* Prezzi di vendita o costi d'acquisto, nel ritocco. */
.tm-segmenti { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: .6rem; background: var(--tm-avorio-scuro); border-radius: 99px; }
.tm-segmenti button { min-height: 40px; border: 0; border-radius: 99px; background: transparent; color: var(--tm-bruno); font-weight: 600; font-size: var(--tm-t-sm); }
.tm-segmenti button[aria-pressed="true"] { background: #fff; color: var(--tm-inchiostro); box-shadow: 0 1px 2px rgba(33,30,25,.08), 0 2px 8px -2px rgba(33,30,25,.18); }

/* ---------- Giro dei prezzi ----------
   Il taglio in testa, il prezzo grande, il tastierino sempre aperto e l'azione
   principale in fondo, dove arriva il pollice. Su desktop una colonna stretta. */
.tm-giro { max-width: 520px; margin: 0 auto; padding: 0 1rem calc(env(safe-area-inset-bottom) + 1rem); display: flex; flex-direction: column; gap: .6rem; }
.tm-giro-conta { margin-left: auto; font-size: var(--tm-t-sm); color: var(--tm-bruno); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-giro-avanz { height: 3px; background: var(--tm-filo); border-radius: 99px; overflow: hidden; }
.tm-giro-avanz i { display: block; width: 100%; height: 100%; background: var(--tm-ceralacca); transform-origin: left center; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.tm-giro-taglio { display: flex; align-items: center; gap: .9rem; padding-top: .3rem; }
.tm-giro-foto { flex: none; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--tm-marmo); }
.tm-giro-testa { min-width: 0; }
.tm-giro-nome { font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-t-lg); line-height: 1.15; }
.tm-giro-rep { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .25rem; font-size: var(--tm-t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tm-bruno); }
.tm-giro-val { margin-top: .2rem; font-family: var(--tm-font-display); font-size: var(--tm-t-xxl); line-height: 1.1; text-align: center; color: var(--tm-inchiostro); font-variant-numeric: lining-nums tabular-nums; }
.tm-giro-val.tm-giro-uguale { color: var(--tm-bruno); }
.tm-giro .tm-kp-nota { margin: 0 0 .2rem; }
.tm-giro-sec { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tm-giro-sec button {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: var(--tm-bordo); border-radius: 99px; background: var(--tm-panna); color: var(--tm-inchiostro); font-weight: 600; font-size: var(--tm-t-sm);
}
.tm-giro-sec button:disabled { opacity: .4; cursor: not-allowed; }
.tm-giro .tm-salva { min-height: 52px; }
.tm-giro-fine { padding-top: 1rem; gap: .8rem; }
.tm-giro-sintesi { margin: 0; font-family: var(--tm-font-display); font-size: var(--tm-t-lg); line-height: 1.25; }
.tm-giro-fine .tm-salva-sec { margin-top: 0; }

/* Il prezzo di un box pronto, nella scheda: una spiegazione e la strada giusta. */
.tm-blocco-box { text-align: left; }
.tm-blocco-box p { margin: 0; line-height: 1.5; }
.tm-blocco-box .tm-salva-sec { margin-top: .8rem; }

/* ---------- Rifiniture 3.18.7 ---------- */
/* L'euro del Bodoni si legge «C»: nei prezzi a schermo va nel carattere del testo. */
.tm-riga-prezzo .e, .tm-giro-val .e, .tm-vetrina-p .e, .tm-kp-val .e { font-family: var(--tm-font-testo); font-weight: 500; font-size: .74em; margin-left: .04em; }
/* Bersagli da 44px anche dentro la scheda e nei Conti. */
.tm-mini { min-height: 44px; }
.tm-selbar .tm-mini { min-height: 40px; }
.tm-toggle::before { content: ''; position: absolute; inset: -5px -3px; }
.tm-campo input, .tm-suggerisci input { min-height: 44px; }
.tm-campo-check { min-height: 44px; }
/* Il sottotitolo del modo scelto, sul fondo rosato, scendeva a 4,4:1. */
.tm-modo.attiva small, .tm-modo.attivo small { color: var(--tm-inchiostro); }
/* La conferma del prezzo appena salvato, nel giro. */
.tm-kp-nota.tm-kp-fatto-ok { color: var(--tm-salvia); font-weight: 600; }
.tm-riga-check:focus-visible { outline: 2px solid var(--tm-oro); outline-offset: 2px; }

/* ---------- 3.18.8 ---------- */
/* Sotto la barra delle schede il titolo della sezione non è più appiccicoso:
   due barre sticky a top 0 si sovrapponevano. */
.tm-top + .tm-ed-top { position: static; }
.tm-ed-top-sezione { padding-top: .9rem; padding-bottom: .3rem; }
.tm-ed-top-sezione .tm-ed-nome { font-size: var(--tm-t-lg); }

/* Sezioni apribili della scheda, su telefono. */
.tm-apribile { border-top: var(--tm-bordo); border-bottom: var(--tm-bordo); }
.tm-apribile + .tm-apribile { border-top: 0; }
.tm-apribile > summary {
  display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .2rem 0;
  list-style: none; cursor: pointer;
}
.tm-apribile > summary::-webkit-details-marker { display: none; }
.tm-apribile-tit { font-size: var(--tm-t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tm-oro-testo, #7a5f27); }
.tm-apribile-sotto { margin-left: auto; font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-apribile-freccia { display: inline-flex; color: var(--tm-bruno); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.tm-apribile[open] > summary .tm-apribile-freccia { transform: rotate(90deg); }
.tm-apribile > div { padding-bottom: 1rem; }
.tm-apribile > div > .tm-sezione-tit:first-child { display: none; } /* il titolo sta già nel sommario */

/* La cassa nella chiusura, e la ripresa del giro. */
.tm-cassa { margin: .2rem 0 .4rem; }
/* Un campo con la sua nota (lo scarto sul peso): la nota va a capo sotto, a tutta
   larghezza. Stava sulla stessa riga e a 375px schiacciava etichetta e numero. */
.tm-campo { flex-wrap: wrap; }
.tm-campo > .tm-nota { order: 3; flex: 1 1 100%; margin: .1rem 0 0; }
.tm-voce-ripresa { border-color: var(--tm-ceralacca); box-shadow: inset 0 0 0 1px var(--tm-ceralacca); }

/* ---------- 3.18.9: peso reale negli ordini ---------- */
.tm-pesata { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .45rem 0 .6rem; border-bottom: var(--tm-bordo); font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-pesata-t { flex: 1 1 12rem; min-width: 0; }
.tm-pesata-t b { color: var(--tm-inchiostro); font-variant-numeric: tabular-nums; }
.tm-pesata-az { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.tm-pesata-oltre .tm-pesata-t { color: var(--tm-ceralacca); font-weight: 600; }
.tm-mini-wa { text-decoration: none; background: var(--tm-salvia); color: var(--tm-panna); }

/* ---------- Ordini: cerca e filtra (3.18.6) ---------- */
.tm-ordini-barra { display: flex; flex-direction: column; }

/* ---------- Offerta con le date ---------- */
.tm-offerta-date { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .7rem; }
.tm-offerta-date label { display: flex; flex-direction: column; gap: .3rem; min-width: 0; font-size: var(--tm-t-sm); color: var(--tm-bruno); }
.tm-offerta-date input { min-height: 44px; width: 100%; min-width: 0; }
.tm-stato.prog { background: transparent; color: var(--tm-oro-testo, #7a5f27); border: 1px dashed var(--tm-oro-testo, #7a5f27); }

/* ---------- Chiusura del banco ----------
   Una pagina da leggere a serranda abbassata: la data come titolo, una frase,
   poi solo le liste che hanno qualcosa dentro. Niente riquadri di numeri. */
.tm-chiusura { display: flex; flex-direction: column; gap: .55rem; }
.tm-chiusura-tit { margin: .2rem 0 0; font-family: var(--tm-font-display); font-weight: 500; font-size: var(--tm-t-xl); line-height: 1.1; color: var(--tm-inchiostro); text-wrap: balance; }
.tm-chiusura-frase { margin: 0 0 .4rem; font-size: var(--tm-t-md); color: var(--tm-bruno); }
.tm-chiusura .tm-sezione-tit { margin: .9rem 0 0; }
.tm-chiusura .tm-salva-sec { margin-top: .1rem; }
.tm-chiusura .tm-storico-r { gap: .8rem; }
.tm-chiusura .tm-storico-r span { min-width: 0; }
.tm-chiusura .tm-storico-r .tm-mini { flex: none; }
.tm-chiusura .tm-nota { margin: .4rem 0; font-size: var(--tm-t-sm); }
.tm-chiusura-push { margin-top: 1rem; }
.tm-periodo { margin-top: 1.6rem; }
.tm-periodo-tit { margin-bottom: .8rem; padding-top: 1.4rem; border-top: var(--tm-bordo); }