/* pal. · componenti base · solo variabili di tokens.css.
   Regole: colore solo sui segni dei dati (pill, ring, bar); fondi, titoli e pulsanti restano neutri.
   Ogni stato porta anche una parola o un segno. Aree tattili minime 44 px. */

.pal-root { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: 1.5; }

/* Focus visibile per ogni elemento interattivo */
.pal-btn:focus-visible, .pal-field:focus-visible, .pal-field__input:focus-visible, .pal-field__input:focus-within {
  outline: 2px solid var(--text); outline-offset: 2px;
}

/* Etichetta */
.pal-label { font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }

/* Numero protagonista: peso 300, cifre tabulari */
.pal-number { font-size: var(--fs-number-xl); font-weight: var(--fw-light); letter-spacing: var(--ls-number); line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.pal-number--sm { font-size: var(--fs-title-app); letter-spacing: var(--ls-tight); }
.pal-number__unit { font-size: var(--fs-subtitle); font-weight: var(--fw-light); color: var(--text-2); letter-spacing: 0; margin-left: var(--s-1); }

/* Pulsante: neutro, area minima 44 px */
.pal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; min-width: 44px; padding: 0 var(--s-5);
  font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--bg); background: var(--text); border: 1px solid var(--text); border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-std), background var(--t-fast) var(--ease-std);
}
.pal-btn:hover { opacity: .88; }
.pal-btn:active { opacity: .76; }
.pal-btn--secondary { color: var(--text); background: transparent; border-color: var(--text-2); }
.pal-btn--secondary:hover { background: var(--surface); opacity: 1; }
.pal-btn[disabled], .pal-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; border-style: dashed; }
.pal-btn[disabled]::after, .pal-btn[aria-disabled="true"]::after { content: "(non disponibile)"; font-size: var(--fs-small); font-weight: var(--fw-regular); }

/* Campo: bordo con contrasto 3:1 (var(--text-2)), area minima 44 px */
.pal-field { display: flex; flex-direction: column; gap: var(--s-2); }
.pal-field__input {
  box-sizing: border-box; min-height: 44px; width: 100%; padding: var(--s-2) var(--s-4);
  font: inherit; font-size: var(--fs-body); color: var(--text); background: var(--surface);
  border: 1px solid var(--text-2); border-radius: var(--r-field);
  transition: border-color var(--t-fast) var(--ease-std);
}
.pal-field__input::placeholder { color: var(--text-3); }
.pal-field__input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-color: var(--text); }
.pal-field__hint { font-size: var(--fs-small); color: var(--text-2); }
.pal-field--error .pal-field__input { border-width: 2px; border-style: solid; }
.pal-field--error .pal-field__hint::before { content: "Errore: "; font-weight: var(--fw-medium); color: var(--text); }
.pal-field--error .pal-field__hint { color: var(--text); }

/* Scheda */
.pal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-5); color: var(--text); }
.pal-card__title { font-size: var(--fs-subtitle); font-weight: var(--fw-regular); letter-spacing: var(--ls-tight); margin: 0 0 var(--s-3); }

/* Pill di stato: testo neutro; il segno (forma + colore) sta nel simbolo, la parola nel contenuto */
.pal-pill {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: 0 var(--s-3);
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text);
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill);
}
.pal-pill::before { content: "\25CF"; color: var(--pill-color, var(--text-2)); font-size: var(--fs-small); line-height: 1; }
.pal-pill--ok   { --pill-color: var(--data-ok-text); }
.pal-pill--warn { --pill-color: var(--data-warn-text); }
.pal-pill--bad  { --pill-color: var(--data-bad-text); }
.pal-pill--info { --pill-color: var(--data-info-text); }
.pal-pill--ok::before   { content: "\2713"; }   /* segno di spunta */
.pal-pill--warn::before { content: "\25B2"; }   /* triangolo */
.pal-pill--bad::before  { content: "\2715"; }   /* croce */
.pal-pill--info::before { content: "\25CF"; }   /* pallino */
/* Usa .pal-pill--ok con una parola dentro: es. "In soglia", "Attenzione", "Fuori soglia", "In corso" */

/* Anello di progresso: --value da 0 a 100, il numero e la parola stanno al centro */
.pal-ring {
  --value: 0; --ring-color: var(--data-ok); --ring-size: 96px; --ring-w: 8px;
  position: relative; display: inline-grid; place-items: center; box-sizing: border-box;
  width: var(--ring-size); height: var(--ring-size); border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--value) * 1%), var(--line) 0);
  font-variant-numeric: tabular-nums; color: var(--text); font-size: var(--fs-small); font-weight: var(--fw-medium); text-align: center;
  transition: background var(--t-base) var(--ease-std);
}
.pal-ring::before { content: ""; position: absolute; inset: var(--ring-w); border-radius: 50%; background: var(--surface); }
.pal-ring > * { position: relative; }
.pal-ring--ok   { --ring-color: var(--data-ok); }
.pal-ring--warn { --ring-color: var(--data-warn); }
.pal-ring--bad  { --ring-color: var(--data-bad); }
.pal-ring--info { --ring-color: var(--data-info); }

/* Barra: colore solo sul riempimento; etichetta con parola e valore a lato */
.pal-bar { --value: 0; --bar-color: var(--data-ok); display: grid; gap: var(--s-2); }
.pal-bar__head { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pal-bar__track { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.pal-bar__fill { height: 100%; width: calc(var(--value) * 1%); background: var(--bar-color); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease-std); }
.pal-bar--ok   { --bar-color: var(--data-ok); }
.pal-bar--warn { --bar-color: var(--data-warn); }
.pal-bar--bad  { --bar-color: var(--data-bad); }
.pal-bar--info { --bar-color: var(--data-info); }

/* ============================================================================
   D2-I03 · componenti condivisi da console, app e sito.
   Ogni valore viene dai sorgenti docs/design/sorgenti/*.dc.html (vedi design-system/pal/LEGGIMI.md,
   colonna "Sorgente"). Misure fuori scala: token --sp-*, --r-*, --fs-* in tokens.css.
   Tono dei dati: --tone è il segno (pallino, filetto), --tone-text il testo. Nel tema chiaro il giallo
   (--data-warn) sul fondo non arriva a 4,5 come testo: il testo "warn" resta neutro, il segno è giallo.
   ============================================================================ */

/* Solo per lettori di schermo */
.pal-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Focus visibile: tutto ciò che si può attivare */
.pal-filter:focus-visible, .pal-link:focus-visible, .pal-tabs__item:focus-visible, .pal-tabbar__item:focus-visible,
.pal-sidebar__item:focus-visible, .pal-toggle:focus-visible, .pal-choice:focus-visible, .pal-search:focus-visible,
.pal-sheet__item:focus-visible, .pal-row--action:focus-visible, .pal-navlink:focus-visible, .pal-measure__input:focus-visible {
  outline: 2px solid var(--text); outline-offset: 2px;
}

/* ---- Pulsanti: varianti dai sorgenti (Design-System, Console-*, App-*, Sito-*) ---------------------------------------
   .pal-btn resta com'è (testo normale). --caps = pulsante delle tavole: 13px, maiuscolo, .05em, 16px 24px.  */
.pal-btn--caps { font-size: var(--fs-small); font-weight: var(--fw-regular); letter-spacing: var(--ls-label); text-transform: uppercase; padding: var(--s-4) var(--s-5); }
.pal-btn--console { font-size: var(--fs-caption); font-weight: var(--fw-regular); letter-spacing: var(--ls-label); text-transform: uppercase; padding: var(--sp-13) var(--sp-20); }
.pal-btn--app { padding-top: var(--sp-18); padding-bottom: var(--sp-18); }
.pal-btn--block { display: flex; width: 100%; flex: 1; box-sizing: border-box; }
.pal-btn--outline { color: var(--text); background: transparent; border-color: var(--text); }
.pal-btn--outline:hover { background: var(--surface); opacity: 1; }
.pal-btn--xs { position: relative; min-height: 0; min-width: 0; padding: var(--sp-6) var(--sp-10); font-size: var(--fs-label); font-weight: var(--fw-regular); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text); background: transparent; border-color: var(--line-strong); }
.pal-btn--xs::before { content: ""; position: absolute; inset: -9px -4px; }  /* area tattile 44 px senza ingrandire il segno */
.pal-btn--xs:hover { background: var(--surface); opacity: 1; }
.pal-btn { box-sizing: border-box; }
.pal-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Link con filetto (Design-System: "Link") e voce di menu del sito (Sito-*) */
.pal-link { display: inline-flex; align-items: center; min-height: var(--hit); font-size: var(--fs-small); color: var(--text); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.pal-link--rule { position: relative; border-bottom: 1px solid var(--text); padding-bottom: 3px; min-height: 0; }
.pal-link--rule::before { content: ""; position: absolute; inset: -14px -4px -11px; }
.pal-navlink { display: inline-flex; align-items: center; min-height: var(--hit); text-decoration: none; font-size: var(--fs-data); font-weight: var(--fw-light); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); margin: 0; }
.pal-navlink:hover, .pal-navlink[aria-current="page"] { color: var(--text); }

/* ---- Filtro (01/01): attivo = bordo --text, non attivo = bordo --line ------------------------------------------------- */
.pal-filters { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.pal-filter {
  position: relative; display: inline-flex; align-items: center; box-sizing: border-box;
  font: inherit; font-size: var(--fs-caption); line-height: 1.4; color: var(--text); background: transparent;
  padding: var(--s-2) var(--sp-13); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease-std);
}
.pal-filter::after { content: ""; position: absolute; inset: -6px 0; }       /* area tattile 44 px: 35 + 2 x 6 */
.pal-filter:hover { border-color: var(--text-2); }
.pal-filter[aria-pressed="true"], .pal-filter[aria-current="true"], .pal-filter.is-active { border-color: var(--text); font-weight: var(--fw-medium); }  /* oltre al bordo: peso del testo, per non affidare lo stato al solo colore */
.pal-filter--lg { font-size: var(--fs-small); padding: var(--s-2) var(--sp-14); }            /* console: 13 px, 8 x 14 */
.pal-filter__count { font-variant-numeric: tabular-nums; color: var(--text-2); margin-left: var(--s-1); }

/* Etichetta a pillola (DS-Food: "Veloce", "Meal prep", "Senza lattosio") */
.pal-tag {
  --tone: var(--line); --tone-text: var(--text-2);
  display: inline-flex; align-items: center; font-size: var(--fs-label); letter-spacing: var(--ls-tag); text-transform: uppercase; line-height: 1.4;
  padding: var(--sp-6) var(--sp-10); border: 1px solid var(--tone); border-radius: var(--r-pill); color: var(--tone-text); background: transparent;
}
.pal-tags { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
/* Con un tono il bordo prende il colore, il testo resta neutro: la parola dice lo stato */
.pal-tag.pal-tone--ok, .pal-tag.pal-tone--warn, .pal-tag.pal-tone--bad, .pal-tag.pal-tone--info { color: var(--text-2); }

/* ---- Stato (pallino più parola): Console-Clienti "Attivo", "Attenzione", "A rischio" ----------------------------- */
.pal-status { --tone: var(--text-2); --tone-text: var(--text); display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--tone-text); }
.pal-status::before { content: ""; display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.pal-dot { --tone: var(--text-2); display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.pal-dot--sm { width: 6px; height: 6px; }
.pal-dot--lg { width: 10px; height: 10px; }
.pal-dot--off { background: var(--line); }

/* ---- Riga dati (01/01 "Riga dati", DS-Food "Ingredienti"), App-Oggi, Console-Impostazioni --------------------------- */
.pal-row {
  --row-py: var(--s-3); --row-fs: var(--fs-body-s);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); box-sizing: border-box;
  padding: var(--row-py) 0; border-bottom: 1px solid var(--line); font-size: var(--row-fs); color: var(--text); font-variant-numeric: tabular-nums;
}
.pal-row__label { display: flex; align-items: center; gap: var(--sp-10); min-width: 0; color: var(--text-2); }
.pal-row--strong .pal-row__label, .pal-row__label--strong { color: var(--text); }
.pal-row__sub { display: block; font-size: var(--fs-caption); color: var(--text-3); }
.pal-row__value { color: var(--text-2); text-align: right; }
.pal-row__value.pal-tone--ok, .pal-row__value.pal-tone--warn, .pal-row__value.pal-tone--bad, .pal-row__value.pal-tone--info { color: var(--tone-text); }
.pal-row__value.pal-tone--warn::before { content: "\25B2\00a0"; color: var(--tone); font-size: .8em; }
.pal-row--compact { --row-py: var(--sp-10); --row-fs: var(--fs-data); }
.pal-row--table { --row-py: var(--sp-11); --row-fs: var(--fs-data); }
.pal-row--app { --row-py: var(--s-4); --row-fs: var(--fs-body); }
.pal-row--setting { --row-py: var(--sp-15); --row-fs: var(--fs-body-s); }
.pal-row--action { min-height: var(--hit); text-decoration: none; cursor: pointer; background: none; border-width: 0 0 1px; width: 100%; font-family: inherit; text-align: left; }
.pal-row--action:hover .pal-row__label { color: var(--text); }
.pal-rows { border-top: 1px solid var(--line); }
.pal-rows--open { border-top: 0; }

/* ---- Scheda KPI (Console-Incassi): etichetta, numero 40 px peso 300, sottotesto colorato solo sul dato ------------- */
.pal-panel {
  box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-14);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-20); color: var(--text);
}
.pal-panel--outline { background: transparent; }
.pal-kpi { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-14); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-20); color: var(--text); }
.pal-kpi__label { margin: 0; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.pal-kpi__value { font-size: var(--fs-kpi); font-weight: var(--fw-light); letter-spacing: var(--ls-kpi); line-height: 1; font-variant-numeric: tabular-nums; }
.pal-kpi__unit { font-size: var(--fs-subtitle); color: var(--text-2); margin-left: var(--s-1); letter-spacing: 0; }
.pal-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-14); }
.pal-delta { --tone: var(--text-2); --tone-text: var(--text-2); font-size: var(--fs-small); color: var(--tone-text); font-variant-numeric: tabular-nums; }
.pal-delta.pal-tone--warn::before { content: "\25B2\00a0"; color: var(--tone); font-size: .8em; }
.pal-delta.pal-tone--bad::before { content: "\2715\00a0"; font-size: .8em; }
.pal-delta.pal-tone--ok::before { content: "\2713\00a0"; font-size: .8em; }

/* ---- Tabella console (Console-Clienti): intestazioni maiuscole 11 px, righe 14 px, filetto --line -------------------- */
.pal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-data); font-variant-numeric: tabular-nums; color: var(--text); }
.pal-table th { text-align: left; padding: var(--sp-11) var(--s-3) var(--sp-11) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-label); font-weight: var(--fw-regular); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.pal-table td { padding: var(--sp-11) var(--s-3) var(--sp-11) 0; border-bottom: 1px solid var(--line); vertical-align: middle; min-height: var(--hit); }
.pal-table th:last-child, .pal-table td:last-child { padding-right: 0; }
.pal-table .is-num { text-align: right; }
.pal-table td .pal-muted, .pal-muted { color: var(--text-2); }
.pal-table tbody tr:hover td { background: transparent; }
/* variante a griglia (div con role): --cols = colonne, es. style="--cols: 1.4fr .7fr .8fr" */
.pal-grid-table { display: flex; flex-direction: column; font-size: var(--fs-data); font-variant-numeric: tabular-nums; }
.pal-grid-table__row { display: grid; grid-template-columns: var(--cols, repeat(auto-fit, minmax(0, 1fr))); gap: var(--s-3); align-items: center; padding: var(--sp-11) 0; border-bottom: 1px solid var(--line); }
.pal-grid-table__row > * { min-width: 0; }
.pal-grid-table__head { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }

/* ---- Schede con filetto (Console-Impostazioni, App-Progressi) ------------------------------------------------------ */
.pal-tabs { display: flex; flex-wrap: wrap; gap: var(--s-5); border-bottom: 1px solid var(--line); }
.pal-tabs__item {
  display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--hit); padding: var(--s-2) 0; font: inherit; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-2); text-decoration: none; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  transition: color var(--t-fast) var(--ease-std), border-color var(--t-fast) var(--ease-std);
}
.pal-tabs__item:hover { color: var(--text); }
.pal-tabs__item[aria-selected="true"], .pal-tabs__item[aria-current="page"], .pal-tabs__item.is-active { color: var(--text); border-bottom-color: var(--text); }
.pal-tabs--fill { gap: 0; border-bottom: 0; }                    /* app: tre schede a larghezza uguale, ognuna con il suo filetto */
.pal-tabs--fill .pal-tabs__item { flex: 1; justify-content: center; font-size: var(--fs-caption); letter-spacing: var(--ls-tag); color: var(--text-3); border-bottom-color: var(--line); }
.pal-tabs--fill .pal-tabs__item[aria-selected="true"], .pal-tabs--fill .pal-tabs__item[aria-current="page"], .pal-tabs--fill .pal-tabs__item.is-active { color: var(--text); border-bottom-color: var(--text); }

/* ---- Pannello dal basso (03/38 "Foto profilo, scelta"; Motion-Sistema "Cambio scheda / pannello") ----------------------- */
.pal-scrim { position: fixed; inset: 0; background: var(--scrim); }
.pal-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto; background: var(--surface); color: var(--text);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: var(--s-3) var(--s-5) var(--sp-30);
  transform: translateY(100%); transition: transform var(--t-slow) var(--ease-in);
}
.pal-sheet.is-open { transform: none; }
.pal-sheet--inline { position: relative; transform: none; max-width: none; margin: 0; }
.pal-sheet__handle { width: 40px; height: 4px; border-radius: var(--r-bar); background: var(--line-strong); margin: 0 auto var(--sp-18); }
.pal-sheet__title { margin: 0; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.pal-sheet__text { margin: var(--s-2) 0 var(--sp-6); font-size: var(--fs-data); line-height: 1.45; color: var(--text-2); }
.pal-sheet__item {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: var(--hit); box-sizing: border-box; padding: var(--s-4) 0; width: 100%;
  font: inherit; font-size: var(--fs-body); text-align: left; color: var(--text); text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.pal-sheet__item small { font-size: var(--fs-caption); color: var(--text-3); }
.pal-sheet__item--danger { color: var(--data-bad-text); }
.pal-sheet__cancel { margin-top: var(--sp-18); text-align: center; }

/* ---- Barra sottile (App-Programma, Console-Clienti "Aderenza"): .pal-bar resta quella da 8 px ---------------------- */
.pal-progress { --value: 0; --tone: var(--data-ok); display: flex; align-items: center; gap: var(--s-2); }
.pal-progress__track { position: relative; flex: 1; height: var(--h-progress); background: var(--line); border-radius: var(--r-bar); overflow: hidden; }
.pal-progress--max { max-width: 80px; }
.pal-progress__fill { display: block; height: 100%; width: calc(var(--value) * 1%); background: var(--tone); border-radius: var(--r-bar); transition: width var(--t-base) var(--ease-std); }
.pal-progress__text { font-variant-numeric: tabular-nums; font-size: var(--fs-data); color: var(--text); }
.pal-progress.pal-tone--warn .pal-progress__text::before { content: "\25B2\00a0"; color: var(--tone); font-size: .8em; }
.pal-progress.pal-tone--bad .pal-progress__text::before { content: "\2715\00a0"; color: var(--tone); font-size: .8em; }

/* ---- Interruttore (App-Impostazioni): 40 x 24, pallino 18, acceso = pieno --text -------------------------------------- */
.pal-toggle {
  position: relative; flex: none; box-sizing: border-box; width: 40px; height: 24px; padding: 2px; display: inline-flex; align-items: center;
  background: transparent; border: 1px solid var(--text-3); border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--t-fast) var(--ease-std), border-color var(--t-fast) var(--ease-std);
}
.pal-toggle::before { content: ""; position: absolute; inset: -10px -4px; }                   /* area tattile 48 x 44 */
.pal-toggle::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--text-3); transition: transform var(--t-fast) var(--ease-std), background var(--t-fast) var(--ease-std); }
.pal-toggle[aria-checked="true"] { background: var(--text); border-color: var(--text); }
.pal-toggle[aria-checked="true"]::after { background: var(--bg); transform: translateX(16px); }
.pal-toggle[disabled] { opacity: .45; cursor: not-allowed; border-style: dashed; }

/* ---- Campi: ricerca a pillola (Console-Clienti), valore con unità (App-Check), scelta 1..5 (App-Check) --------------- */
.pal-search { box-sizing: border-box; min-height: var(--hit); min-width: 240px; padding: var(--sp-10) var(--s-4); font: inherit; font-size: var(--fs-data); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); }
.pal-search::placeholder { color: var(--text-3); }
.pal-search:hover { border-color: var(--text-2); }
.pal-measure { display: flex; flex-direction: column; gap: var(--s-2); }
.pal-measure__box { display: flex; align-items: baseline; justify-content: space-between; box-sizing: border-box; min-height: var(--hit); background: var(--surface); border-radius: var(--r-photo); padding: var(--sp-14) var(--s-4); color: var(--text-2); }
.pal-measure__input { width: 100px; min-width: 0; font: inherit; font-size: var(--fs-input-num); font-variant-numeric: tabular-nums; color: var(--text); background: transparent; border: 0; padding: 0; }
.pal-measure__box:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }
.pal-measure__input:focus-visible { outline: 0; }
.pal-choices { display: flex; gap: var(--s-2); }
.pal-choice { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit); box-sizing: border-box; padding: var(--sp-14) 0; font: inherit; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; text-decoration: none; transition: border-color var(--t-fast) var(--ease-std); }
.pal-choice:hover { border-color: var(--text-2); }
.pal-choice[aria-checked="true"], .pal-choice[aria-pressed="true"], .pal-choice.is-active { border-color: var(--text); }

/* ---- Barra laterale della console (Console-*), intestazione pagina, schermo ------------------------------------------- */
.pal-shell { display: flex; flex-wrap: wrap; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
.pal-sidebar { flex: 1 1 200px; max-width: var(--w-sidebar); box-sizing: border-box; padding: var(--sp-28); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-6); }
.pal-sidebar__nav { display: flex; flex-direction: column; }
.pal-sidebar__item { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; min-height: var(--hit); padding: var(--sp-10) 0; text-decoration: none; font-size: var(--fs-body-s); color: var(--text-2); border-bottom: 1px solid transparent; }
.pal-sidebar__item:hover { color: var(--text); }
.pal-sidebar__item[aria-current="page"] { color: var(--text); border-bottom-color: var(--line); }
.pal-sidebar__count { font-size: var(--fs-caption); color: var(--data-bad-text); font-variant-numeric: tabular-nums; }
.pal-sidebar__user { margin-top: auto; display: flex; align-items: center; gap: var(--sp-10); }
.pal-sidebar__name { font-size: var(--fs-data); }
.pal-main { flex: 999 1 640px; min-width: 0; box-sizing: border-box; padding: var(--sp-28) var(--sp-36); display: flex; flex-direction: column; gap: var(--s-5); }
.pal-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); }
.pal-page-head__text { display: flex; flex-direction: column; gap: var(--sp-6); }
.pal-page-head__eyebrow { margin: 0; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.pal-page-head__title { margin: 0; font-weight: var(--fw-regular); font-size: var(--fs-title-app); letter-spacing: var(--ls-tight); }
.pal-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pal-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--line); color: var(--text); font-size: var(--fs-caption); object-fit: cover; }
.pal-avatar--lg { width: 32px; height: 32px; }

/* ---- Barra inferiore dell'app (App-Oggi): cinque voci, la corrente in --text, le altre in --text-3 -------------------- */
.pal-tabbar { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: var(--sp-6) var(--s-5) 22px; background: var(--bg); }
.pal-tabbar__item { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit); min-width: var(--hit); box-sizing: border-box; padding: var(--sp-14) 0; font-size: var(--fs-caption); letter-spacing: var(--ls-nav); text-transform: uppercase; text-decoration: none; color: var(--text-3); background: none; border: 0; font-family: inherit; cursor: pointer; }
.pal-tabbar__item:hover { color: var(--text); }
.pal-tabbar__item[aria-current="page"] { color: var(--text); }
.pal-tabbar__badge { position: absolute; right: -9px; top: var(--s-3); width: 6px; height: 6px; border-radius: 50%; background: var(--data-bad); }

/* ---- Settimana a pallini (App-Oggi): lettera del giorno più pallino; lo stato anche a parole per i lettori di schermo -- */
.pal-week { display: flex; }
.pal-week__day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); font-size: var(--fs-label); color: var(--text-3); }
.pal-week__day .pal-dot { width: 10px; height: 10px; }
.pal-week__day--today { color: var(--text); }

/* ---- Pannello con nota, consiglio, sostituzione (App-Oggi, DS-Food) ------------------------------------------------------- */
.pal-note { display: flex; flex-direction: column; gap: var(--sp-10); }
.pal-note__text { margin: 0; font-size: 17px; line-height: 1.4; }
.pal-tip { display: flex; flex-direction: column; gap: var(--sp-10); background: var(--surface); border-radius: var(--r-card); padding: var(--sp-20); }
.pal-tip__title { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.pal-tip__text { font-size: var(--fs-data); line-height: 1.5; color: var(--text-2); }
.pal-swap { display: flex; flex-direction: column; gap: var(--sp-10); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-18); }
.pal-swap__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-3); align-items: center; font-size: var(--fs-body-s); }
.pal-swap__arrow { color: var(--text-3); }
.pal-swap__why { font-size: var(--fs-small); color: var(--text-2); }

/* ---- Cibo (DS-Food): scheda ricetta, procedimento, valori nutrizionali, macro ---------------------------------------- */
.pal-recipe { display: flex; flex-direction: column; gap: var(--sp-10); }
.pal-recipe__photo { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: var(--r-photo); background: var(--surface); }
.pal-recipe__title { font-size: 18px; letter-spacing: -.01em; }
.pal-recipe__meta { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.pal-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body-s); line-height: 1.45; }
.pal-step__n { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.pal-nutrition { display: flex; flex-direction: column; gap: var(--sp-6); box-sizing: border-box; border: 1px solid var(--text); border-radius: var(--r-xs); padding: var(--sp-14) var(--s-4); font-variant-numeric: tabular-nums; }
.pal-nutrition__title { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text); }
.pal-nutrition__row { display: flex; justify-content: space-between; font-size: var(--fs-data); padding: var(--s-1) 0; border-top: 1px solid var(--line); }
.pal-nutrition__row > :first-child { color: var(--text-2); }
.pal-macros { display: flex; gap: var(--sp-14); font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pal-macros b { font-weight: var(--fw-regular); color: var(--text); }

/* ---- Barre del grafico a colonne (Console-Incassi): la colonna del mese corrente in --text, le altre in --line --------- */
.pal-chart { display: flex; gap: var(--sp-6); align-items: flex-end; }
.pal-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-6); height: 150px; }
.pal-chart__bar { width: 60%; height: calc(var(--h, 50) * 1%); background: var(--line); border-radius: 3px; }
.pal-chart__col--now .pal-chart__bar { background: var(--text); }
.pal-chart__label { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }

/* Sito (Sito-*): riquadro con bordo e campo del sito */
.pal-box { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-15); color: var(--text); font-size: var(--fs-body-s); }

/* Tono dei dati (in fondo al file per vincere sui valori predefiniti dei componenti): si applica a .pal-status, .pal-tag, .pal-value, .pal-delta, .pal-progress, .pal-dot, .pal-chart__bar */
.pal-tone--ok   { --tone: var(--data-ok);   --tone-text: var(--data-ok-text); }
.pal-tone--warn { --tone: var(--data-warn); --tone-text: var(--text); }
.pal-tone--bad  { --tone: var(--data-bad);  --tone-text: var(--data-bad-text); }
.pal-tone--info { --tone: var(--data-info); --tone-text: var(--data-info-text); }

@media (prefers-reduced-motion: reduce) {
  .pal-btn, .pal-field__input, .pal-ring, .pal-bar__fill, .pal-filter, .pal-tabs__item, .pal-sheet, .pal-progress__fill, .pal-toggle, .pal-toggle::after, .pal-choice {
    transition: none !important; animation: none !important;
  }
}