/* ============================================================================
   ENTRY MIND — variabili del linguaggio visivo
   file: public/app/css/variabili.css

   COME SI INNESTA
   Va caricato DOPO style.css, in public/app/index.html:

       <link rel="stylesheet" href="css/style.css">
       <link rel="stylesheet" href="css/variabili.css">   <-- questa riga

   Sta dopo di proposito: le variabili qui sotto RISCRIVONO quelle di
   style.css senza che style.css venga toccato. Le 811 righe esistenti
   restano dove sono; cambiano solo i valori che leggono.

   PER TORNARE INDIETRO
   Togli quella riga da index.html. L'app torna esattamente com'era.
   Nessun altro file e' stato modificato.

   COSA CONTIENE
     1. i colori dell'app (stessi nomi di prima, valori nuovi)
     2. le venti tinte dei servizi
     3. misure, ombre, caratteri

   Le venti tinte sono state generate e verificate una per una: ognuna ha
   contrasto almeno 4.5:1 sul proprio velo E sul bianco. E' la soglia sotto
   la quale un testo diventa faticoso da leggere. Nessuna combinazione
   illeggibile e' possibile, perche' non si sceglie il colore: si sceglie
   fra questi.
   ============================================================================ */

:root {

    /* ------------------------------------------------------------------
       1. COLORI DELL'APP
       I nomi sono quelli che style.css usa gia' oltre centocinquanta volte:
       cambiando qui il valore, cambia tutta l'app senza toccare una regola.
       ------------------------------------------------------------------ */

    --accent:      #2F64DD;   /* era #4f46e5 — ora il blu di Entry Mind */
    --accent-soft: #E9F0FE;   /* era #eef2ff */
    --accent-cupo: #1E4FBF;   /* nuovo: per il bottone premuto */

    --bg:          #EDF0F5;   /* era #f6f7f9 — un filo piu' saturo */
    --surface:     #FFFFFF;
    --surface-2:   #F3F5F9;   /* nuovo: fondo delle colonne del calendario */

    --text:        #16233A;   /* era #1f2430 */
    --muted:       #64748B;   /* era #6b7280 */
    --faint:       #94A3B8;   /* nuovo: terzo livello, per le note */

    --border:      #E4E9F1;   /* era #e6e8ec */
    --border-f:    #D2DAE7;   /* nuovo: bordo in evidenza */
    --table-head:  #E4E9F1;   /* era #c3c3c3 — il grigio pieno era pesante */

    --danger:      #C0392B;   /* era #dc2626 */
    --ok:          #12876F;
    --ok-soft:     #E4F4F0;   /* nuovo: fondo tenue del verde, per le pastiglie */   /* era #16a34a */
    --warn:        #B06D00;   /* nuovo */

    /* ------------------------------------------------------------------
       I TRE SEGNALI
       Nel calendario il colore non serve a etichettare: serve a segnalare.
       Le schede sono neutre e il colore resta in riserva per queste tre
       cose soltanto. Se tutto e' colorato niente spicca, e chi apre il
       calendario quaranta volte al giorno smette di vederlo.
       ------------------------------------------------------------------ */

    --segnale-oggi:        #2F64DD;   /* la colonna di oggi */
    --segnale-oggi-velo:   #E9F0FE;

    --segnale-attesa:      #91691A;   /* non ancora confermato: l'unica cosa
                                         che deve saltare agli occhi in una
                                         settimana bianca */
    --segnale-attesa-velo: #FCF4E6;
    --segnale-attesa-filo: #F0E0BE;

    --segnale-pieno:       #3C4A5F;   /* corso esaurito: pieno e scuro,
                                         non una tinta in piu' */

    /* Fascia dell'orario nelle schede. E' un neutro caldo, non un colore che
       segnala: serve a separare la riga dal contenuto. Il testo dell'orario e'
       leggermente piu' scuro del grigio normale perche' su beige il tono
       standard scendeva sotto la soglia di leggibilita' (4,36); cosi' sta a 4,96. */
    --fascia:              #FCF4E6;
    --fascia-filo:         #F0E4CC;
    --fascia-testo:        #5A6B85;

    /* Da confermare: la stessa fascia, piu' carica. Lo stato dura al massimo
       30 minuti (poi la prenotazione scade da sola), quindi non serve che urli:
       basta che si distingua guardando la colonna. */
    --fascia-attesa:       #F2DCAE;
    --fascia-attesa-filo:  #E3C489;
    --fascia-attesa-testo: #7E5A14;

    /* ------------------------------------------------------------------
       2. MISURE, OMBRE, CARATTERI
       ------------------------------------------------------------------ */

    --radius:      10px;      /* invariato: gia' giusto */
    --radius-s:     8px;
    --radius-l:    14px;

    --shadow:      0 1px 2px rgba(22,35,58,.06), 0 3px 10px -6px rgba(22,35,58,.18);
    --shadow-l:    0 1px 3px rgba(22,35,58,.07), 0 10px 28px -18px rgba(22,35,58,.30);
    --shadow-alta: 0 20px 50px -20px rgba(22,35,58,.35);

    --sidebar-w:   220px;

    /* passo di quattro: ogni spazio e' un multiplo di questo */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

    /* ------------------------------------------------------------------
       SCALA DEI CARATTERI — sei gradini, nessun valore fuori da questi.
       Nasceva con dodici misure diverse (10, 11, 12, 12.5, 13, 13.5, 14,
       15, 16, 18, 20, 22), poi ricondotte a sei e alzate di un gradino perche'
       il corpo del testo risultava piccolo: schermate diverse finivano per avere testi di
       misura diversa senza un motivo, e si notava passando dall'una
       all'altra. Ricondotte tutte a questi sei gradini.

         micro    etichette, pastiglie, orari minuti
         piccolo  note, sotto-righe, testo secondario
         corpo    misura normale: tabelle, bottoni, schede, moduli
         medio    titoli di scheda, marchio, titolo del calendario
         grande   titoli di finestra e di pagina
         enorme   titolo dell'accesso

       Aggiungendo una regola nuova si usa uno di questi, non un valore
       intermedio: e' il modo in cui la disomogeneita' e' rientrata. */
    --t-micro:   12px;
    --t-piccolo: 13px;
    --t-corpo:   15px;
    --t-medio:   17px;
    --t-grande:  22px;
    --t-enorme:  24px;

    /* Inter per tutta l'app. Se il carattere non arriva, si scende su
       quello di sistema senza che nulla si sposti. */
    --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* zona toccabile minima sul telefono: sotto, il dito sbaglia */
    --tocco: 44px;
}

body, input, select, textarea, button { font-family: var(--font); }

/* Le cifre di orari, conteggi e importi a larghezza fissa: le colonne di
   numeri restano allineate invece di ballare da una riga all'altra. */
.ora, .conteggio, .importo, time, [data-num] { font-variant-numeric: tabular-nums; }


/* ============================================================================
   3. LE VENTI TINTE DEI SERVIZI — RISERVA, NON ATTIVE

   Nel calendario NON si usano. Le schede sono neutre e il colore e'
   riservato ai tre segnali qui sopra. Questo blocco resta perche' un giorno
   uno studio potrebbe averne bisogno davvero: per esempio se avesse locali
   diversi per tipo di servizio e leggesse il calendario come una pianta.
   In quel caso si riaccendono — sono gia' verificate, non c'e' niente da
   riprogettare.

   Ogni tinta ha tre valori:
       --tinta   il colore pieno: testo dell'orario, barre, pallini
       --velo    il fondo chiarissimo della fascia dell'orario
       --filo    il bordo, a meta' strada

   USO
       <div class="scheda" data-tinta="verde"> ... </div>
   e dentro la scheda si usa var(--tinta), var(--velo), var(--filo).

   Il colore NON e' mai l'unica informazione: il nome del servizio resta
   sempre scritto. Un uomo su dodici non distingue certe tinte, e per lui
   un calendario a soli colori e' un muro grigio.
   ============================================================================ */

[data-tinta="blu"]          { --tinta: #2A61C0; --velo: #EDF2FA; --filo: #CBD8EE; }
[data-tinta="indaco"]       { --tinta: #3539B6; --velo: #EEEFF9; --filo: #CDCEEC; }
[data-tinta="viola"]        { --tinta: #663BB0; --velo: #F2EFF8; --filo: #D9CFEA; }
[data-tinta="ametista"]     { --tinta: #8A41AA; --velo: #F5EFF8; --filo: #E2D0E9; }
[data-tinta="magenta"]      { --tinta: #AA41A3; --velo: #F8EFF7; --filo: #E9D0E7; }
[data-tinta="rosa"]         { --tinta: #AE3D79; --velo: #F8EFF4; --filo: #EACFDD; }
[data-tinta="rubino"]       { --tinta: #B23859; --velo: #F9EEF1; --filo: #EBCED6; }
[data-tinta="corallo"]      { --tinta: #B2383C; --velo: #F9EEEF; --filo: #EBCECF; }
[data-tinta="terracotta"]   { --tinta: #B1522F; --velo: #F9F1EE; --filo: #EDD5CD; }
[data-tinta="arancio"]      { --tinta: #A3601D; --velo: #FAF4ED; --filo: #F0DDC9; }
[data-tinta="ambra"]        { --tinta: #926A0C; --velo: #FCF7EB; --filo: #F4E6C5; }
[data-tinta="senape"]       { --tinta: #85710F; --velo: #FBF9EC; --filo: #F3EBC7; }
[data-tinta="oliva"]        { --tinta: #66781E; --velo: #F7F9EE; --filo: #E6EDCC; }
[data-tinta="felce"]        { --tinta: #467E2A; --velo: #F2F8EF; --filo: #D8EACF; }
[data-tinta="verde"]        { --tinta: #258044; --velo: #EEF9F2; --filo: #CDECD8; }
[data-tinta="smeraldo"]     { --tinta: #178060; --velo: #EDFAF6; --filo: #C9F0E4; }
[data-tinta="acqua"]        { --tinta: #127F7C; --velo: #ECFBFA; --filo: #C8F1F0; }
[data-tinta="turchese"]     { --tinta: #197B8F; --velo: #EDF8FA; --filo: #C9E9F0; }
[data-tinta="oceano"]       { --tinta: #2376A6; --velo: #EDF5FA; --filo: #CBE1EE; }
[data-tinta="ardesia"]      { --tinta: #5C6E85; --velo: #F2F3F5; --filo: #D8DCE2; }

/* Servizio senza colore assegnato: non resta invisibile, prende l'ardesia. */
[data-tinta=""], [data-tinta="nessuna"] { --tinta: #5C6E85; --velo: #F2F3F5; --filo: #D8DCE2; }


/* ============================================================================
   4. RITOCCHI — i punti in cui style.css scrive il colore a mano

   In style.css ci sono una dozzina di regole che non passano dalle variabili:
   hanno il colore scritto dentro. Senza questi ritocchi resterebbero due rossi
   diversi e due verdi diversi nella stessa app.

   Sono ripetute qui, con gli stessi selettori, per non dover toccare
   style.css: questo file viene caricato dopo e ha l'ultima parola.
   Cosi' la regola di prima resta valida — per annullare tutto basta togliere
   una riga da index.html.
   ============================================================================ */

/* riquadro informativo: era indaco, ora segue il blu dell'app */
.info-box {
    background: var(--accent-soft);
    border-color: #C6D6F7;
    color: #1B4AA8;
}

/* bottoni azione delle tabelle */
.act-rosso        { background: #FBEDEB; color: var(--danger); }
.act-rosso:hover  { background: #F7DEDA; }
.act-indaco       { background: var(--accent-soft); color: var(--accent); }
.act-smeraldo     { background: #E4F4F0; color: var(--ok); }
.act-smeraldo:hover { background: #D3EDE6; }

/* badge di tessera scaduta */
.badge-scaduta { background: #FBEDEB; color: var(--danger); }

/* segni di consegna nel registro WhatsApp */
.wl-riga.ok      .wl-icona { color: var(--ok); }
.wl-riga.errore  .wl-icona { color: var(--danger); }
.wl-riga.attesa  .wl-icona { color: var(--faint); }
.wl-segno.ok     { color: var(--ok); }
.wl-segno.errore { color: var(--danger); }
.wl-segno.attesa { color: var(--faint); }

/* badge di giorno chiuso */
.or-chiuso .or-badge { background: var(--surface-2); color: var(--muted); }


/* ============================================================================
   5. CALENDARIO — schede neutre, colore solo per i tre segnali

   Il calendario di style.css usa l'ambra per DUE cose insieme:
   "e' un appuntamento singolo" (sempre) e "in attesa" (a volte). Cosi' il
   secondo affoga nel primo. Qui l'ambra torna a dire una cosa sola:
   DA CONFERMARE. La differenza corso/appuntamento resta, ma la porta il
   testo ("9/12 iscritti" contro il nome del cliente), non il colore.

   Tre segnali, gli stessi del mockup:
       oggi           blu, sulla colonna e sulla cella del mese
       da confermare  ambra, sulla singola scheda
       corso pieno    lo gestira' il JS piu' avanti; per ora resta il testo

   Tutto in override: style.css e calendario.js non si toccano.
   ============================================================================ */

/* --- testate delle colonne: da blu notte a grigio chiaro --- */
.cal-col-head        { background: var(--table-head); color: var(--text); }
.cal-mhead > div     { background: var(--table-head); color: var(--text); }
.cal-griglia-head    { background: var(--table-head); color: var(--text); }
/* oggi resta blu pieno */
.cal-col.oggi .cal-col-head { background: var(--accent); color: #fff; }

/* --- schede della settimana: tutte neutre, bianche --- */
.cal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 1px solid var(--border);   /* via la barra colorata a sinistra */
    box-shadow: var(--shadow);
    overflow: hidden;                       /* la fascia deve fermarsi agli angoli */
    padding: 0 0 8px;                       /* il rientro ora lo danno le righe */
}

/* La fascia dell'orario: separa la prima riga dal contenuto senza spendere
   colore. Su una scheda da confermare diventa ambra da sola (piu' sotto),
   cosi' e' la fascia stessa a portare il segnale. */
.cal-card-ora {
    background: var(--fascia);
    border-bottom: 1px solid var(--fascia-filo);
    color: var(--fascia-testo);
    padding: 5px 9px;
    margin-bottom: 7px;
}
.cal-card-tit,
.cal-card-sub { padding-left: 9px; padding-right: 9px; }
.cal-card.corso,
.cal-card.app {
    background: var(--surface);
    border-color: #333;            /* bordo scuro: distingue meglio gli appuntamenti */
}
.cal-card:hover { filter: none; border-color: var(--border-f); }

/* SEGNALE — da confermare: l'unica scheda colorata di una settimana bianca.
   La fascia dell'orario si tinge di ambra: e' la parte piu' in alto della
   scheda, quindi il segnale si vede scorrendo la colonna con l'occhio. */
.cal-card.in-attesa {
    border: 1px solid var(--fascia-attesa-filo);
    background: var(--surface);       /* il corpo resta bianco: e' la fascia a segnalare */
}
.cal-card.in-attesa .cal-card-ora {
    background: var(--fascia-attesa);
    border-bottom-color: var(--fascia-attesa-filo);
    color: var(--fascia-attesa-testo);
}
.tag-attesa { background: var(--segnale-attesa-velo); color: var(--segnale-attesa); }

/* Appuntamento PASSATO (< adesso): recede. Sfondo rosa come il giorno vuoto,
   fascia dell'orario grigia invece dell'ambra. */
.cal-card.passato { background: rgba(220, 38, 38, .05); }
.cal-card.passato .cal-card-ora { background: #E6E6E6; border-bottom-color: #d9d9d9; color: var(--muted); }
.cal-blocco.passato { background: rgba(220, 38, 38, .05); }
.cal-blocco.passato .cal-blocco-ora { background: #E6E6E6; border-bottom-color: #d9d9d9; color: var(--muted); }

/* --- vista giorno: stesso linguaggio della settimana --- */
/* La fascia c'e' anche qui, ma compatta: il blocco e' alto quanto dura
   l'appuntamento, non quanto vorrebbe il contenuto. Il padding sta sulle
   righe, non sul blocco, cosi' la fascia arriva ai bordi. */
.cal-blocco { padding: 0; }
.cal-blocco-ora {
    background: var(--fascia);
    border-bottom: 1px solid var(--fascia-filo);
    color: var(--fascia-testo);
    font-size: 13px; font-weight: 700;      /* stessa misura della settimana */
    padding: 2px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Interlinea stretta: qui l'altezza e' la durata dell'appuntamento, non lo
   spazio che vorrebbe il testo. Con l'interlinea normale un appuntamento da
   un'ora non conteneva piu' la terza riga. */
.cal-blocco-ora,
.cal-blocco-tit,
.cal-blocco-sub { line-height: 1.25; }
.cal-blocco-tit { font-size: 15px; padding: 1px 8px 0; }
.cal-blocco-sub { font-size: 13px; padding: 0 8px; }

/* Blocco cortissimo (mezz'ora o meno): la fascia diventa tutto il blocco e
   porta orario e servizio su una riga sola. Meglio togliere contenuto che
   rimpicciolire il carattere: cosi' la misura resta la stessa ovunque. */
.cal-blocco.compatto .cal-blocco-ora {
    height: 100%; border-bottom: 0;
    display: flex; align-items: center; gap: 6px;
}
.cal-blocco.compatto .cal-blocco-ora time { flex: none; }
.cal-blocco.compatto .cal-blocco-ora span {
    font-weight: 600; color: var(--text); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-blocco.in-attesa .cal-blocco-ora {
    background: var(--fascia-attesa);
    border-bottom-color: var(--fascia-attesa-filo);
    color: var(--fascia-attesa-testo);
}

.cal-blocco {
    border-left: 1px solid var(--border);
    background: var(--surface);
    border: 1px solid var(--border-f);
    box-shadow: var(--shadow);
}
.cal-blocco.corso,
.cal-blocco.app {
    background: var(--surface);
    border-color: #333;            /* bordo scuro come nella settimana */
}
.cal-blocco.in-attesa {
    border-color: var(--fascia-attesa-filo);
    background: var(--surface);   /* come nella settimana: e' la fascia a segnalare */
}
.cal-blocco:hover { filter: none; border-color: var(--muted); }

/* --- vista mese: pallini grigi, ambra solo per il da confermare --- */
.cal-mdot.corso { background: var(--faint); }
.cal-mdot.app   { background: var(--faint); }
.cal-mdot.in-attesa { background: var(--segnale-attesa); }

/* --- pastiglia operatore accesa: gia' usa --accent, la rendo coerente --- */
.cal-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   Restyling header + footer (31.07, rev.2) - tutto uniformato
   ============================================================ */

/* Barra: sfondo #031433, elementi ben staccati dai bordi */
.topbar { background: #031433; padding-left: 44px; padding-right: 44px; }

/* Moduli raggruppati a sinistra; Operatore/Esci a destra */
.tabs { flex: 0 0 auto; }
.topbar-right { margin-left: auto; }

/* Modulo attivo: indicatore sobrio e uniforme (non piu il blu acceso) */
.mod-tab.active { background: rgba(255,255,255,.12); }

/* "Impostazioni" IDENTICO a un tab modulo */
.menu-imp { margin-left: -14px; }        /* stessa distanza che c'e tra i moduli */
.btn-imp {
    cursor: pointer; padding: 8px 14px; border-radius: 6px; font-size: 15px; font-weight: 600;
    color: #fff; background: transparent; border: none; white-space: nowrap;
    display: flex; align-items: center; gap: 6px; height: auto; width: auto;
}
.btn-imp:hover, .btn-imp[aria-expanded="true"] { background: rgba(255,255,255,.14); color: #fff; }
.btn-imp .chev { font-size: 12px; opacity: .6; }

/* Tendina Impostazioni: IDENTICA a quella dei moduli (sfondo scuro, voci uguali) */
.menu-imp-voci {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px;
    background: #1e293b; border: 1px solid #334155; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4); padding: 6px; z-index: 9999;
}
.voce-imp {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 12px; border-radius: 6px; color: #fff; font-size: 15px; font-weight: 400;
    background: none; border: none; cursor: pointer;
}
.voce-imp:hover { background: rgba(255,255,255,.14); }
.voce-imp .fa-download { color: #60a5fa; }   /* icone colorate, come i moduli */
.voce-imp .fa-star { color: #fbbf24; }

/* Elementi di destra: stesso font dei moduli (peso e misura) */
.topbar-right .user, .topbar-right .btn-logout, .topbar-sep {
    font-size: 15px; font-weight: 600;
}
.topbar-sep { color: #cbd5e1; }

/* Footer sempre visibile, col logo grande e prominente */
.appfooter {
    position: fixed; left: 0; right: 0; bottom: 0; height: 58px;
    background: #031433; display: flex; align-items: center; justify-content: center;
    z-index: 60; box-shadow: 0 -2px 8px rgba(0,0,0,.28);
}
.appfooter img { height: 46px; width: auto; max-width: 96%; display: block; }

/* Spazio in fondo al contenuto per non finire sotto il footer fisso */
.content { padding-bottom: 78px; }

/* ============================================================
   Form a due colonne (usa meglio l'orizzontale nei modali)
   ============================================================ */
.field-row { display: flex; gap: 20px; align-items: stretch; }
.field-row > .field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
/* i controlli si allineano in basso: se un'etichetta va a capo, gli input restano in riga */
.field-row > .field > input,
.field-row > .field > select,
.field-row > .field > textarea { margin-top: auto; }
/* Su schermo stretto tornano uno sotto l'altro */
@media (max-width: 480px) {
    .field-row { flex-direction: column; gap: 0; }
}

/* Modale piu' largo: i form respirano, niente campi strozzati */
.modal { width: min(560px, calc(100vw - 32px)); }   /* mai piu' largo dello schermo */

/* Bottone "Riattiva" verde (coerente in tutte le schermate) */
.btn.success { background: var(--ok); color: #fff; border-color: transparent; }
.btn.success:hover { filter: brightness(.92); }

/* ============================================================
   Header con icona + riepilogo  ·  Toolbar (ricerca + filtri + azione)
   Prototipo su Tessere; poi si estende alle altre schermate.
   ============================================================ */
.ph-title { display: flex; align-items: flex-start; gap: 16px; }
.ph-icon {
    width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
    background: #e8eefc; color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.ph-sub { font-size: 15px; color: var(--muted); margin-top: 3px; }
.ph-sub .att { color: var(--ok); font-weight: 600; }
.ph-sub .sca { color: var(--danger); font-weight: 600; }

.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar-search {
    flex: 0 1 460px; min-width: 220px;
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 14px;
}
.toolbar-search i { color: var(--muted); font-size: 14px; }
.toolbar-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: none;
    padding: 12px 0; font-size: 15px; color: var(--text);
}
.toolbar > .btn { margin-left: auto; }

/* ============================================================
   Tessere toolbar rev.2: filtri separati/arrotondati, stessa
   altezza di ricerca e "+ Nuova", fondo grigio non invasivo.
   ============================================================ */
/* Stessa ALTEZZA per ricerca, filtri e bottone azione */
.toolbar-search,
.toolbar .seg-btn,
.toolbar > .btn { height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.toolbar-search { padding: 0 14px; }
.toolbar-search input { padding: 0; }
.toolbar > .btn { padding: 0 22px; }

/* Filtri: separati, arrotondati, fondo grigio (non piu' un blocco unico) */
.toolbar .seg { border: none; overflow: visible; background: none; gap: 4px; }
.toolbar .seg-btn {
    border: 1px solid transparent; border-radius: 10px; padding: 0 16px;
    background: #e0e4ea; color: var(--text);
}
.toolbar .seg-btn:hover { background: #d6dbe3; }
.toolbar .seg-btn.active { background: #74777C; color: #fff; }

/* ============================================================
   Azioni riga tessera: 2 icone visibili (Modifica, Storico) + menu "..."
   ============================================================ */
/* Bottoni azione al livello della barra verde, con piu' spazio dalla barra */
.tcard { align-items: center; gap: 28px; }            /* piu' spazio tra barra e primo bottone */
.tcard-actions { align-items: center; position: relative; top: 13px; }  /* scende al centro della barra */
/* Modifica/Storico: stile .btn small di Servizi, sfondo bianco, ICONA grigio scuro */
.tcard-azione { display: inline-flex; align-items: center; }   /* icona+testo centrati verticalmente */
.tcard-azione i { color: var(--muted); }
/* "..." compatto (solo icona), centrato */
.tcard-piu { display: inline-flex; align-items: center; justify-content: center; padding-left: 11px; padding-right: 11px; }
.tcard-piu i { color: var(--muted); }
.act-menu { position: relative; display: inline-flex; }
.act-menu-voci {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; z-index: 70;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 6px;
}
/* Kebab: apre verso l'ALTO quando è vicino al fondo (non finisce sotto il footer) */
.act-menu-voci.su { top: auto; bottom: calc(100% + 6px); }
.act-voce {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 12px; border-radius: 7px; border: none; background: none; cursor: pointer;
    font-size: 15px; color: var(--text); white-space: nowrap;
}
.act-voce:hover { background: var(--surface-2); }
.act-voce i { width: 16px; text-align: center; color: var(--muted); }
.act-voce.act-voce-rosso, .act-voce.act-voce-rosso i { color: var(--danger); }

/* ============================================================
   Footer diagnostico: logo + versione + ambiente | supporto
   ============================================================ */
.appfooter { justify-content: space-between; padding-left: 28px; padding-right: 28px; }
.foot-sx, .foot-dx { display: flex; align-items: center; gap: 12px; }
.foot-ver, .foot-valuta, .foot-fascia { font-size: 13px; color: var(--muted); font-weight: 500; }
.foot-dx { gap: 0; }
.foot-fascia::after, .foot-valuta::after { content: '—'; margin: 0 10px; color: var(--muted); opacity: .5; }
.foot-amb {
    font-size: 12px; font-weight: 700; letter-spacing: .5px;
    color: #92400e; background: #fde68a; padding: 2px 9px; border-radius: 6px;
}
.foot-supporto {
    font-size: 13px; color: var(--muted); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.foot-supporto:hover { color: var(--accent); }

/* ============================================================
   Footer rev.2: sfondo come la UI + riga di separazione grigia,
   logo piccolo. Visibile ma non invasivo (via il navy).
   ============================================================ */
.appfooter {
    background: #D9DEE6;
    border-top: 1px solid #7c7d7e;
    box-shadow: none;
    height: 32px;
    display: flex;
    align-items: center;   /* centra verticalmente TUTTI i contenuti del footer */
}
.appfooter img { height: auto; }                 /* annulla la vecchia altezza 46px */
.appfooter .foot-logo-ic  { height: 22px; }      /* calendario piccolo */
.appfooter .foot-logo-txt { height: 15px; }      /* scritta piccola */
.foot-sx { gap: 9px; }
.content { padding-bottom: 62px; }               /* spazio per il footer (46px) */

/* Bottoni piccoli con icona: icona+testo centrati, spaziatura uniforme (tutte le schermate) */
.btn.small { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ============================================================
   Orari: riga come Servizi/Team — gruppi distribuiti, "Azzera orari" a destra
   ============================================================ */
.or-campi { flex: 1; gap: 36px; justify-content: center; }   /* Mattina/Pomeriggio distribuiti al centro */
.or-gruppo { display: flex; align-items: center; gap: 8px; }
.or-svuota { margin-left: auto; }                            /* bottone tutto a destra */

/* Riga Orari sempre BIANCA (anche i giorni chiusi), come Servizi/Team; niente sbiadito */
.or-riga, .or-riga.or-chiuso { background: var(--surface); opacity: 1; }
/* Il giorno chiuso resta riconoscibile dal badge "Chiuso" (grigio), non dallo sfondo */

/* "Chiuso" in ROSSO (come "Aperto" in verde) */
.or-chiuso .or-badge { background: #FBEDEB; color: var(--danger); }
/* Mattina/Pomeriggio come i label dei form: 15px, testo scuro */
.or-lab { font-size: 15px; color: var(--text); }

/* ============================================================
   Orari: badge allineati + niente spostamento riga mentre si digita
   ============================================================ */
/* Nome giorno a larghezza fissa -> i badge partono tutti dalla stessa x */
.or-nome { display: inline-block; min-width: 92px; }
/* Blocco "giorno + badge" a larghezza FISSA -> il cambio Aperto/Chiuso non sposta gli orari */
.or-giorno { flex: 0 0 200px; min-width: 200px; }
/* Aperto: verde PIENO (come da mockup). Chiuso resta rosso tenue (regola sopra). */
.or-badge { background: var(--ok); color: #fff; }

/* Campi orario a larghezza FISSA: vuoto (--:--) e pieno (08:00) uguali, la riga non si muove piu' */
.or-in { width: 70px; box-sizing: border-box; text-align: center; }

/* Login/setup: logo ORIZZONTALE su fondo chiaro, come il footer (via la scatola navy) */
.marchio-targa {
    background: linear-gradient(135deg, #182142 0%, #0C1122 100%); box-shadow: none;
    border-radius: 14px; padding: 16px 20px; margin: 0 0 10px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
.marchio-icona { width: 44px; margin: 0; }
.marchio-testo { width: auto; max-width: none; height: 30px; margin: 0; }
/* Card ancorata in ALTO: l'errore cresce verso il basso, la parte alta non si muove (niente "ballo") */
.login-wrap { align-items: flex-start; padding-top: 7vh; }
/* Spazio dell'errore login RISERVATO: la UI non "balla" quando appare/sparisce il messaggio */
.login-err-slot { min-height: 0; }

/* "Accedi al gestionale": tolto il margin 28px 0 (ricade su 0 0 20px, meglio impaginato) */
.login-card p.sub.sub-strong { margin: 0 0 30px; }

/* ============================================================
   Filtri UGUALI in tutte le schermate (come Tessere):
   separati, arrotondati, grigi; attivo #74777C.
   ============================================================ */
.seg { border: none; overflow: visible; background: none; gap: 4px; }
.seg-btn {
    height: 44px; box-sizing: border-box; display: inline-flex; align-items: center;
    border: 1px solid transparent; border-radius: 10px; padding: 0 16px;
    background: #e0e4ea; color: var(--text);
}
.seg-btn:hover { background: #d6dbe3; }
.seg-btn.active { background: #74777C; color: #fff; }

/* ============================================================
   Modal ancorati in ALTO (come la login card): quando appare
   l'errore (sotto i bottoni) il modal cresce verso il basso e
   NON si ri-centra -> niente "ballo". 5vh + max-height 90vh
   restano simmetrici per i form alti.
   ============================================================ */
.modal-bg { align-items: flex-start; padding-top: 5vh; }

/* La finestra di conferma (EM.conferma) resta CENTRATA, non ancorata in alto come i form */
.modal-bg.modal-centrato { align-items: center; padding-top: 20px; }

/* Tessera IN PAUSA: sfondo giallo (la scaduta resta ROSSA, invariata) */
.tcard.in-pausa { background: #fefae6; border-color: #fbecb5; }
/* Stato nel piede come TESTO (niente pillola): IN PAUSA scuro, SCADUTA/ESAURITA rosso */
.tcard-stato { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--text); }
.tcard-stato.rosso { color: #dc2626; }

/* Tessera scaduta: rosso un po' piu' marcato */
.tcard.scaduta { background: #fbd5d5; border-color: #f0aeae; }
/* X per azzerare il campo di ricerca */
.toolbar-search-x {
    border: none; background: none; color: var(--muted); cursor: pointer;
    font-size: 20px; line-height: 1; padding: 0 2px; margin-left: 4px;
}
.toolbar-search-x:hover { color: var(--text); }

/* ============================================================
   Calendario: titolo periodo in verde (come il count tessere attive),
   e vista giorno/settimana con altezza responsiva -> un solo scrollbar.
   ============================================================ */
.cal-title { color: var(--ok); font-weight: 700; }
/* Il grid riempie lo spazio disponibile: niente scroll della pagina, solo quello interno */
.cal-griglia-wrap { max-height: calc(100vh - 320px); min-height: 300px; }

/* Calendario: gruppo destro dell'header (bottoni vista + Nuovo appuntamento) */
.cal-head-dx { display: flex; align-items: center; gap: 12px; }
.page-head { flex-wrap: wrap; gap: 12px; }


/* Calendario: barra filtri con Oggi + data a sinistra e le viste a DESTRA */
.cal-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-barra #calViews { margin-left: auto; }

/* Chip operatori dentro la barra: in linea, niente margine sotto */
.cal-barra #calOperatori { margin-bottom: 0; }

/* Nota dentro un label (es. spiegazione sotto "Cliente"): leggera, non in grassetto */
.lbl-nota { font-weight: normal; color: var(--muted); font-size: 13px; }
.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .griglia-2 { grid-template-columns: 1fr; } }

/* Metodi di pagamento: evidenzia "conto mancante" (solo con M1 attivo) */
.mp-mancante { color: #dc2626; font-weight: 600; }

/* Menu: voci sempre su una riga; il dropdown si allarga quel tanto che basta */
.voce-imp { white-space: nowrap; }
.dropdown { min-width: 240px; }

/* ============================================================
   Chiusura di cassa
   ============================================================ */
.cc-totale { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cc-imp-grande { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ok); }
.cc-riga { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.cc-imp { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-warn { border-color: #f0aeae; background: #fef6f6; margin-top: 16px; }

/* Incasso: slot a spazio riservato per l'errore (stile .form-err), così il modal non "balla" */
.cr-esito-slot { min-height: 44px; margin-top: 8px; }
.cr-esito-slot .form-err { margin-top: 0; }

/* Appuntamento già pagato: conferma verde al posto del form incasso */
.pagato-ok { display: flex; align-items: center; gap: 8px; color: #16a34a; font-weight: 700; font-size: 15px; }

/* Cassa: totale + dettaglio per metodo su una riga */
.cc-header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cc-tot-inline { display: flex; align-items: baseline; gap: 12px; }
.cc-metodi-inline { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; }
.cc-metodo-chip { white-space: nowrap; }

/* Cassa: totale in verde, stile heading (accanto al selettore giorno + filtro metodo) */
.ca-tot { color: var(--ok); font-size: 18px; font-weight: 700; white-space: nowrap; }

/* Riepilogo WhatsApp: tab lingua studio / lingua cliente */
.wa-tabs { display: flex; gap: 6px; margin: 6px 0 10px; }
.wa-tab { padding: 6px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.wa-tab.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Modal: non deve finire sotto il footer (fisso, 58px). Si centra e scrolla
   nello spazio SOPRA il footer. */
.modal-bg { inset: 0 0 58px 0; }
.modal { max-height: calc(100vh - 98px); }

/* Chiusura formale di cassa */
.cc-chiusa { border-color: #f0c000; background: #fffbe6; }
.cg-diff { font-weight: 700; margin: 4px 0 12px; }
.cc-ammanco { color: #dc2626; }
.cc-eccedenza, .cc-ok { color: var(--ok); }

/* Chiusura cassa: pulsanti page-head + ricapitolo */
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-recap { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 8px 0 14px; }
.cc-recap-head { display: flex; justify-content: space-between; font-weight: 700; padding: 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.cc-riga { display: flex; justify-content: space-between; padding: 3px 0; }
.cc-imp { font-variant-numeric: tabular-nums; }

/* Azioni riga incasso (modifica/elimina) */
.ca-azioni { white-space: nowrap; text-align: right; }
.btn-ico { background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--muted); border-radius: 6px; }
.btn-ico:hover { background: var(--sfondo-hover, #f1f1f4); color: var(--text); }
.btn-ico.ca-del:hover { color: #dc2626; }

/* Incasso che salda una fattura emessa: non modificabile */
.ca-lock { color: var(--muted); cursor: help; }