/* ════════════════════════════════════════════════════════════════════
   TITTY — tema «consulente alimentare», direzione A: fresco e pulito
   Scelto da Manu il 22/08/2026 (bianco + salvia).

   RESTYLE VIA TOKEN, non riscrittura: qui si ridefiniscono solo le
   variabili del design system comune (06-STILE-COMUNE) e lo stile dei
   componenti. Struttura, misure e sidebar restano quelli dell'ecosistema,
   così i blocchi si copiano ancora 1:1 fra portali.

   Sopra a tutto resta la tematizzazione per studio: --accento e logo
   arrivano dal record Tenant e vincono su questi valori.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* Accento: verde salvia. Legato al tema alimentare, calmo e pulito. */
    --accento:        #1D9E75;
    --accento-scuro:  #0F6E56;
    --accento-tenue:  #E1F5EE;
    --accento-testo:  #04342C;   /* testo sopra i fondi tenui */

    /* Neutri chiari, appena verdini: arioso, non clinico-freddo */
    --ink:         #1B2620;
    --grafite:     #20302A;      /* sidebar: verde scurissimo, non nero */
    --mist:        #F6FAF8;
    --grigio:      #5F6B64;
    --bianco:      #FFFFFF;
    --bordo:       #DDE7E1;
    --bordo-input: #C6D2CB;

    /* "In regola": lo stesso verde, ma i gettoni usano la pastiglia tenue,
       distinta dai bottoni pieni. */
    --conferma:      #1D9E75;
    --conferma-bg:   #E1F5EE;
    --conferma-testo:#04342C;

    /* Semantici: i ruoli del sistema comune */
    --ok-bg: #E1F5EE;   --ok-testo: #0F6E56;   --ok-bordo: #5DCAA5;
    --no-bg: #FCEBEB;   --no-testo: #A32D2D;   --no-bordo: #F09595;
    --attesa-bg: #FAEEDA; --attesa-testo: #854F0B; --attesa-bordo: #EF9F27;
    --info-bg: #E6F1FB; --info-testo: #185FA5; --info-bordo: #85B7EB;
}

/* ── Header di contesto (le tre zone del brief) ──────────────────────
   Sottile, chiaro: in alto è sempre chiaro in quale studio si sta. */
.header-contesto {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bianco); border-bottom: 1px solid var(--bordo);
    padding: 10px 20px; position: sticky; top: 0; z-index: 5;
}
.header-contesto .dove { display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--grigio); }
.header-contesto .dove b { color: var(--ink); }
.header-contesto .chi {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accento-tenue); color: var(--accento-testo);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; }

/* ── Gettone: quante volte una categoria resta spendibile ────────────
   Mai in negativo: "restano", non "hai finito". Pastiglia tenue, così
   non si confonde coi bottoni pieni dello stesso verde. */
.gettone {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 20px; padding: 4px 12px; font-size: 13px; line-height: 1;
    background: var(--conferma-bg); color: var(--conferma-testo);
    border: 1px solid #BFE6D6;
}
.gettone .quanti { font-weight: 700; }
.gettone.esaurito { background: #EEF1EF; color: var(--grigio); border-color: var(--bordo); }
/* "libero" (verdure, condimenti): neutro caldo, distinto dal verde a conteggio */
.gettone.libero { background: #F3F1EA; color: #5A5348; border-color: #E4DFD2; }

/* ── Scheda del momento / card pasto ─────────────────────────────────
   Il pasto si apre con le verdure: il filetto in alto lo ricorda. */
.momento {
    background: var(--bianco); border: 1px solid var(--bordo);
    border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
}
.momento > .ora { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--grigio); margin-bottom: 2px; }
.momento > .titolo { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.momento.apre-con-verdure { border-top: 3px solid var(--conferma); }
.momento .nota { font-size: 13px; color: var(--grigio); margin-top: 8px; }

/* ── Pelle del cliente: più aria, tocchi più grandi ──────────────────── */
.pelle-cliente { background: var(--mist); }
.pelle-cliente .momento { padding: 18px 20px; }
.pelle-cliente .btn { padding: 12px 18px; font-size: 15px; border-radius: 12px; }

/* ── Contenitore dell'acqua: si riempie, mai si svuota (metafora positiva).
   Resta BLU: l'acqua non è "verde in regola", è un'altra cosa. ──────── */
.acqua { display: flex; align-items: flex-end; gap: 14px; }
.acqua .vaso {
    width: 74px; height: 132px; border: 2px solid var(--bordo-input);
    border-radius: 10px 10px 16px 16px; position: relative; overflow: hidden;
    background: var(--bianco); flex-shrink: 0;
}
.acqua .vaso .livello { position: absolute; left: 0; right: 0; bottom: 0;
    background: #85B7EB; transition: height .6s ease; }
.acqua .vaso .tacca { position: absolute; left: 0; right: 0; height: 1px; background: var(--bordo); }
.acqua .conto { font-size: 22px; font-weight: 800; line-height: 1.1; }
.acqua .conto small { display: block; font-size: 12px; font-weight: 400; color: var(--grigio); }

/* ── Peso: nessun traguardo, nessuna barra (deliberato 02/08) ────────── */
.peso { display: flex; gap: 28px; align-items: baseline; }
.peso .voce .etichetta { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--grigio); }
.peso .voce .valore { font-size: 26px; font-weight: 800; }

.pill-ok { background: var(--ok-bg); color: var(--ok-testo); border: 1px solid var(--ok-bordo); }
.pill-no { background: var(--no-bg); color: var(--no-testo); border: 1px solid var(--no-bordo); }
.pill-attesa { background: var(--attesa-bg); color: var(--attesa-testo); border: 1px solid var(--attesa-bordo); }

/* ── Guscio dell'app installata (PWA) ────────────────────────────────
   Testata scura sticky + barra di navigazione fissa in basso (06 §6). */
.app-shell { max-width: 520px; margin: 0 auto; min-height: 100vh;
    background: var(--mist); display: flex; flex-direction: column; }
.app-testa { position: sticky; top: 0; z-index: 10;
    background: var(--grafite); color: #fff; padding: 14px 18px;
    border-bottom: 3px solid var(--accento);
    display: flex; align-items: center; justify-content: space-between; }
.app-testa .nome { font-weight: 800; font-size: 16px; }
.app-testa .chi { font-size: 12px; color: #c6d2cb; }
.app-corpo { flex: 1; padding: 16px 16px 96px; }
.app-nav { position: sticky; bottom: 0; z-index: 10; background: var(--grafite); display: flex;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #16211C; }
.app-nav a { flex: 1; text-align: center; color: #a9b7af; text-decoration: none;
    font-size: 11px; padding: 4px 0; line-height: 1.5; }
.app-nav a .ico { display: block; font-size: 20px; }
.app-nav a.on { color: #7FE0BE; }
.app-h { font-size: 20px; font-weight: 800; margin: 4px 0 12px; }
.app-btn-grande { display: block; width: 100%; text-align: center;
    background: var(--accento); color: #fff; border: none; border-radius: 12px;
    padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; }
.app-btn-grande.chiaro { background: #fff; color: var(--ink); border: 1px solid var(--bordo); }
.riga-momento { display: flex; gap: 12px; align-items: baseline;
    padding: 10px 0; border-bottom: 1px solid var(--bordo); }
.riga-momento .quando { width: 52px; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.riga-momento .cosa { flex: 1; }
.riga-momento .cosa .n { font-size: 15px; }
.riga-momento .cosa .d { font-size: 12px; color: var(--grigio); }
.riga-momento .bollo { font-size: 11px; color: var(--grigio); }
.riga-momento.obbl .quando { color: var(--accento-scuro); }

/* ── Stati vuoti e toast (componenti del brief §4) ───────────────────── */
.vuoto { text-align: center; padding: 32px 16px; color: var(--grigio); }
.vuoto .icona { font-size: 34px; }
.vuoto .titolo { font-size: 16px; font-weight: 700; color: var(--ink); margin: 8px 0 4px; }
.toast { position: relative; background: var(--grafite); color: #fff; border-radius: 10px;
    padding: 10px 14px; font-size: 14px; max-width: 340px; }