/* ============================================================================
   SISTEMA — le regole visive dell'app, in un posto solo
   ============================================================================
   Caricato per ULTIMO apposta: le variabili qui sotto vincono su quelle
   dichiarate in app-shell.css, e ogni foglio che usa var(--t1), var(--bordo),
   var(--verde) eccetera cambia pelle senza essere toccato. E' la leva: l'app
   usa queste variabili centinaia di volte.

   Direzione approvata sul mockup del mese (Google / Notion Calendar):
   superfici bianche vere, fondo avorio caldo, inchiostro a tinta verde,
   righe sottili invece di scatole, un colore per operatrice, oggi cerchiato.
   Barra laterale scura e logo restano.

   Regola d'uso: da qui in avanti nessun colore, raggio, ombra o grandezza di
   testo si scrive a mano nei fogli o nei template. Si usa un token. Se manca,
   si aggiunge QUI, con un nome che dice il ruolo (non il valore).           */

:root {
  /* ── Colore: superfici ── */
  --sfondo:        #F6F4EF;   /* fondo dell'app, avorio caldo */
  --card:          #FFFFFF;   /* superficie: bianco vero, non avorio */
  --card-2:        #FBFAF7;   /* superficie secondaria (riquadri dentro le card) */
  --card-hover:    #FBFAF7;
  --topbar-bg:     #FFFFFF;
  --bordo:         #E6E2DA;   /* riga di separazione */
  --bordo-soft:    #EFECE5;   /* riga interna, piu' leggera */
  --weekend:       #F8F6F1;

  /* ── Colore: testo ── */
  --t1:            #14201A;   /* inchiostro, a tinta verde */
  --t2:            #5C6B63;
  --t3:            #8C978F;

  /* ── Colore: marchio ── */
  --verde:         #2ECC8F;   /* il verde del logo: chip, riempimenti */
  --verde-vivo:    #1FB57A;   /* primario: bottoni, oggi, selezione */
  --verde-ink:     #0E7D52;   /* verde per il TESTO su fondo chiaro (contrasto) */
  --verde-soft:    #E3F6EC;   /* fondo tenue: giorno selezionato, evidenziazioni */
  --verde-glow:    rgba(31,181,122,.18);

  /* ── Colore: operatrici (l'evento porta il colore di chi lo fa) ── */
  --op1:           #1FB57A;  --op1-soft: #DDF5E9;  --op1-ink: #0B6B45;
  --op2:           #EE8F3C;  --op2-soft: #FCEBDB;  --op2-ink: #9A4F0C;
  --op3:           #5B8DEF;  --op3-soft: #E1EAFD;  --op3-ink: #1E4FB8;
  --op4:           #B85CC9;  --op4-soft: #F2E3F6;  --op4-ink: #6E2E7C;
  --op5:           #E0555B;  --op5-soft: #FBE3E4;  --op5-ink: #9B2226;
  --op6:           #C9A227;  --op6-soft: #F7EFD0;  --op6-ink: #6F5A0E;

  /* ── Colore: barra laterale ── */
  --sidebar-bg:     #0F221A;
  --sidebar-bordo:  rgba(255,255,255,.06);
  --sidebar-hover:  rgba(255,255,255,.06);
  --sidebar-attivo: #173226;
  --sidebar-testo:  #7E958A;
  --sidebar-titolo: #DDE7E1;
  --dark:           #0F221A;

  /* ── Colore: semantici (stato, NON accento) ── */
  --confermato:    #1FB57A;  --confermato-bg: #E3F6EC;  --confermato-t: #0E7D52;
  --attesa:        #EE8F3C;  --attesa-bg:     #FCEBDB;  --attesa-t:     #9A4F0C;
  --completato:    #5B8DEF;  --completato-bg: #E1EAFD;  --completato-t: #1E4FB8;
  --cancellato:    #E0555B;  --cancellato-bg: #FBE3E4;  --cancellato-t: #9B2226;

  /* ── Tipografia: due famiglie, sei grandezze ── */
  --font:          'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --fs-xs:   11px;    /* etichette, maiuscoletto con letter-spacing */
  --fs-sm:   12.5px;  /* testo secondario, chip */
  --fs-md:   14px;    /* testo */
  --fs-lg:   16px;    /* titoli di card */
  --fs-xl:   22px;    /* titolo di pagina sul telefono */
  --fs-2xl:  26px;    /* titolo di pagina, numeri grandi (display) */
  --lh:      1.45;
  --tracking-label: 1px;

  /* ── Forma: tre raggi, due ombre ── */
  --r-xs:    6px;     /* chip, tag */
  --r-sm:    10px;    /* bottoni, campi, righe */
  --r:       16px;    /* card, pannelli, modali */
  --shadow-xs: 0 1px 2px rgba(20,32,26,.06);
  --shadow-sm: 0 1px 2px rgba(20,32,26,.06), 0 8px 24px -12px rgba(20,32,26,.18);
  --shadow-md: 0 1px 2px rgba(20,32,26,.06), 0 8px 24px -12px rgba(20,32,26,.18);
  --shadow-lg: 0 24px 48px -16px rgba(20,32,26,.28);
  --shadow-modal: 0 32px 80px rgba(20,32,26,.22), 0 8px 24px rgba(20,32,26,.10);
  --shadow-verde: 0 6px 18px -6px rgba(31,181,122,.55);

  /* ── Spazio: una scala ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;

  /* ── Bersagli e movimento ── */
  --tocco:   44px;    /* misura minima di un bersaglio da toccare */
  --ease:    cubic-bezier(.4,0,.2,1);
  --t-fast:  .12s;
  --t-med:   .2s;
  --t-slow:  .3s;

  /* ── Alias per i fogli della contabilita' (usano nomi propri) ── */
  --border:      var(--bordo);
  --ink:         var(--t1);
  --ink-mid:     var(--t2);
  --ink-light:   var(--t3);
  --success:     var(--verde-vivo);
  --surface:     var(--card);
  --surface-alt: var(--card-2);
  --radius:      var(--r);
  --radius-sm:   var(--r-sm);
  --gold:        var(--attesa);
  --rose:        var(--cancellato);
  --rose-pale:   var(--cancellato-bg);

  /* I bottoni "scuri" (Scarica CSV, PIN, backup, Trova posto...): erano
     scritti con background:var(--t1) e testo bianco. In tema scuro --t1
     diventa quasi bianco e la scritta spariva. Adesso hanno un colore loro:
     in chiaro e' lo stesso inchiostro di prima, in scuro un verde-grigio
     che si stacca dalla scheda e tiene la scritta bianca leggibile. */
  --bottone-scuro: var(--t1);
}

/* ============================================================================
   TEMA SCURO — stessi token, altri valori
   ============================================================================
   Si accende con data-theme="dark" sull'elemento <html>: lo mette il JS in
   base alla scelta in Impostazioni (Chiaro / Scuro / Come il sistema), e lo
   mette PRIMA che la pagina si disegni (versione.js) per non vedere il
   lampo bianco. Tutto quello che usa i token cambia da solo. Quello che ha
   ancora colori scritti a mano (la Contabilita', soprattutto) e' coperto in
   parte dal blocco di rattoppi qui sotto, finche' non passa sul sistema.  */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sfondo:        #0E1613;
  --card:          #15201B;
  --card-2:        #182520;
  --card-hover:    #1B2A23;
  --topbar-bg:     #15201B;
  --bordo:         #26352E;
  --bordo-soft:    #1F2C26;
  --weekend:       #121B17;
  --t1:            #E8EFEA;
  --t2:            #A8B6AE;
  --t3:            #6F7F76;
  --verde:         #2ECC8F;
  --verde-vivo:    #2ECC8F;
  --verde-ink:     #7FE3B8;
  --verde-soft:    #173B2C;
  --verde-glow:    rgba(46,204,143,.22);
  --op1: #2ECC8F;  --op1-soft: #173B2C;  --op1-ink: #8FE9C2;
  --op2: #F0A24B;  --op2-soft: #3E2A14;  --op2-ink: #F6C58A;
  --op3: #6FA0F5;  --op3-soft: #16243E;  --op3-ink: #A9C4FA;
  --op4: #C97AD8;  --op4-soft: #33193A;  --op4-ink: #E2B3EC;
  --op5: #F06B70;  --op5-soft: #3C1A1C;  --op5-ink: #F7A9AC;
  --op6: #D9B44A;  --op6-soft: #33290F;  --op6-ink: #EBD08A;
  --sidebar-bg:     #0A1410;
  --sidebar-bordo:  rgba(255,255,255,.06);
  --sidebar-hover:  rgba(255,255,255,.05);
  --sidebar-attivo: #132019;
  --sidebar-testo:  #6F8479;
  --sidebar-titolo: #DDE7E1;
  --dark:           #0A1410;
  --confermato-bg: #173B2C;  --confermato-t: #8FE9C2;
  --attesa-bg:     #3E2A14;  --attesa-t:     #F6C58A;
  --completato-bg: #16243E;  --completato-t: #A9C4FA;
  --cancellato-bg: #3C1A1C;  --cancellato-t: #F7A9AC;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.7);
  --shadow-modal: 0 32px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);
  --avorio:  #15201B;  --avorio2: #182520;
  --bottone-scuro: #2B3D35;   /* vedi il chiaro: qui non puo' seguire --t1 */
}
/* Rattoppi per i colori ancora scritti a mano nei fogli vecchi: sfondi
   bianchi fissi che in scuro resterebbero bianchi. Elenco ricavato con una
   scansione dei fogli, non a memoria. Sparira' man mano che le pagine
   passano sul sistema. */
:root[data-theme="dark"] .bottom-nav,
:root[data-theme="dark"] .mobile-operatori-bar,
:root[data-theme="dark"] .card-orario,
:root[data-theme="dark"] .card-appuntamento,
:root[data-theme="dark"] .input-form:focus,
:root[data-theme="dark"] .input-ricerca-clienti,
:root[data-theme="dark"] .stat-periodo-btn,
:root[data-theme="dark"] .stat-kpi-card,
:root[data-theme="dark"] .bollino-picker,
:root[data-theme="dark"] .pin-key-btn,
:root[data-theme="dark"] .modal-audit-header,
:root[data-theme="dark"] .audit-pill,
:root[data-theme="dark"] .audit-search-input,
:root[data-theme="dark"] .audit-select-op,
:root[data-theme="dark"] .audit-card,
:root[data-theme="dark"] .tasse-lock,
:root[data-theme="dark"] .zappy-wrap .pill,
:root[data-theme="dark"] .zappy-wrap .anni,
:root[data-theme="dark"] .zappy-wrap .drop,
:root[data-theme="dark"] .zappy-wrap .card,
:root[data-theme="dark"] .zappy-wrap .chip,
:root[data-theme="dark"] .zappy-wrap .esempio,
:root[data-theme="dark"] .zappy-wrap .roll,
:root[data-theme="dark"] .zappy-wrap .zappy-cat-chip,
:root[data-theme="dark"] .zappy-wrap .qualita .ign,
:root[data-theme="dark"] .zappy-wrap .qualita .az,
:root[data-theme="dark"] .zappy-wrap .qualita .az-in,
:root[data-theme="dark"] .zappy-wrap .setup select,
:root[data-theme="dark"] .zappy-wrap .compose select,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .bottom-sheet,
:root[data-theme="dark"] .edit-modal,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .input-form,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--card); color: var(--t1); border-color: var(--bordo);
}
/* Le schede delle Impostazioni erano alte 30px: sono il menu di quella
   pagina, si toccano di continuo, e 30px su un telefono si sbagliano. */
@media (hover: none) {
  .impo-tab { min-height: 44px; }
}

/* ---- MENU "ALTRO" (telefono) ----
   Il pannello che apre le sezioni senza posto nella barra in basso. */
.altro-titolo {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--t1); margin: 0 0 12px;
}
.altro-lista { display: flex; flex-direction: column; gap: 2px; }
.altro-voce {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 56px; padding: 10px 12px;
  background: none; border: 0; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 15.5px; font-weight: 600;
  color: var(--t1); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.altro-voce:active { background: var(--card-2); }
.altro-voce .altro-ico { display: flex; color: var(--t2); flex: none; }
.altro-voce .altro-testo { flex: 1; min-width: 0; }
.altro-voce > svg:last-child { color: var(--t3); flex: none; }

/* ---- ZAPPY IN ORO (1.70) ----
   Michele: toccando Assistente Zappy, al posto di sfondo e scritta verdi
   "qualcosa legato all'oro". Solo Zappy: le altre voci restano del verde del
   marchio. E' un oro caldo da riconoscimento, non il giallo-arancio degli
   avvisi (--attesa), che nell'app vuol dire "attenzione".
   Sul telefono Zappy si apre da "Altro": mentre e' aperto, anche "Altro" in
   basso si accende d'oro (agenda.js scrive la vista in body[data-vista]). */
:root { --oro: #D4AF37; --oro-chiaro: #EBCB6B; --oro-bordo: rgba(212,175,55,.42); --oro-ink: #8A6A12; }
#nav-zappy.nav-item.attivo {
  background: linear-gradient(135deg, rgba(212,175,55,.26), rgba(212,175,55,.08));
  color: var(--oro-chiaro);
  border-color: var(--oro-bordo);
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.12);
}
#nav-zappy.nav-item.attivo svg { color: var(--oro); }
#nav-zappy.nav-item:hover:not(.attivo) { color: var(--oro-chiaro); }
body[data-vista="zappy"] #bottom-nav-altro.attivo { color: var(--oro-ink); }
:root[data-theme="dark"] body[data-vista="zappy"] #bottom-nav-altro.attivo { color: var(--oro-chiaro); }

/* ---- "VUOI USCIRE?" (1.70, app/js/indietro.js) ----
   La domanda che arriva col tasto Indietro quando non c'e' nessuna finestra
   da chiudere. Sopra a tutto, anche alla chiusura di cassa (10040).
   "Resta" e' il bottone pieno: il tocco per sbaglio e' il caso normale. */
.zap-esci {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(11,26,20,.45);
  animation: zapEsciVelo .16s var(--ease);
}
.zap-esci-box {
  width: 100%; max-width: 360px; padding: 22px 22px 18px;
  background: var(--card); color: var(--t1);
  border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--shadow-modal);
  font-family: var(--font);
  animation: zapEsciBox .18s var(--ease);
}
.zap-esci-titolo { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.zap-esci-testo { font-size: var(--fs-md); color: var(--t2); margin-top: 6px; }
.zap-esci-tasti { display: flex; gap: 10px; margin-top: 20px; }
.zap-esci-tasti button {
  flex: 1; min-height: var(--tocco); border-radius: 100px; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.zap-esci-esci { background: var(--card); border: 1px solid var(--bordo); color: var(--t2); }
.zap-esci-esci:hover { border-color: var(--t3); color: var(--t1); }
.zap-esci-resta { background: var(--verde-vivo); border: 1px solid var(--verde-vivo); color: #06201A; }
.zap-esci-resta:hover { filter: brightness(1.05); }
/* "Resta" prende il fuoco (Invio = resta): il bordo di serie del browser
   era arancione, fuori tono. */
.zap-esci-tasti button:focus { outline: none; }
.zap-esci-tasti button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--verde-glow); }
@keyframes zapEsciVelo { from { opacity: 0; } to { opacity: 1; } }
@keyframes zapEsciBox { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- CLASSIFICHE: il numero al posto della medaglia ----
   Le tre medaglie si disegnano in modi diversi su sistemi diversi, e il
   terzo posto non si distingueva dal secondo. Un numero si legge sempre. */
.pos-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 100px; background: var(--card-2, #EFECE5);
  color: var(--t2); font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; margin-right: 6px; vertical-align: 1px;
}
.pos-num.primo { background: var(--verde); color: #fff; }

/* ---- TRATTAMENTI: il pallino al posto dell'emoji ----
   In agenda un trattamento si riconosce dal suo colore, come in un
   calendario serio. Il pallino è il colore del trattamento e sta davanti
   al nome ovunque il nome compaia in un elenco o su un bottone. */
.trat-punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--verde));
  display: inline-block; flex: none;
  margin-right: 7px; vertical-align: 1px;
}
.mt-colore {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: var(--c); border: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--card);
  padding: 0; transition: transform .15s, border-color .15s;
}
.mt-colore:hover { transform: scale(1.08); }
.mt-colore.scelto { border-color: var(--t1); }
@media (hover: none) { .mt-colore { width: 40px; height: 40px; } }

:root[data-theme="dark"] .giorno-ferie-box { background: var(--attesa-bg); }
:root[data-theme="dark"] .btn-top.primario, :root[data-theme="dark"] .cal-toggle-btn.attivo, :root[data-theme="dark"] .seg button.on { background: var(--t1); color: var(--sfondo); }
:root[data-theme="dark"] .btn-top.primario:hover { background: #FFFFFF; }
:root[data-theme="dark"] .timeline-apt-wa { background: var(--card-2); }
:root[data-theme="dark"] .cal-cella.oggi .cal-numero, :root[data-theme="dark"] .mini-cal-griglia > button.sel.oggi { color: #06201A; }
:root[data-theme="dark"] .timeline-pausa { background: var(--card-2); }
:root[data-theme="dark"] img.zc { filter: none; }

/* ============================================================================
   CONTABILITA' — sul sistema
   ============================================================================
   I 294 colori scritti a mano nei template (prugna, rosa, grigio-malva,
   bianco fisso) sono stati sostituiti con i token da uno script a mappa
   (colore -> ruolo -> token), verificabile in _backup. Qui sotto i componenti
   prendono la stessa forma dell'Agenda: superficie bianca, righe sottili,
   raggio 16, ombra leggera, un solo accento. Via le macchie decorative
   (l'emoji gigante nelle schede dei numeri, la barra colorata in cima).
   Il font: usava 'Segoe UI', cioe' un altro carattere rispetto al resto. */
#est-app { font-family: var(--font); background: var(--sfondo); color: var(--t1); }
#est-app .card, #est-app .entrate-section, #est-app .spese-section, #est-app .stat-card {
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
#est-app .card-title { font-size: var(--fs-lg); font-weight: 600; color: var(--t1); letter-spacing: -.2px; }
#est-app .card-title .accent { color: var(--t1); }
#est-app .section-header { border-bottom: 1px solid var(--bordo); }
#est-app .section-header h3 { font-size: var(--fs-lg); font-weight: 600; }
#est-app .section-header > span:first-child { display: none; }      /* l'emoji davanti al titolo */
#est-app .stat-card::before { display: none; }                        /* la barra colorata in cima */
#est-app .stat-card:hover { transform: none; }
#est-app .stat-icon { display: none; }                                /* l'emoji gigante in trasparenza */
#est-app .stat-label { font-size: var(--fs-xs); letter-spacing: var(--tracking-label); color: var(--t3); }
#est-app .stat-value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.5px; color: var(--t1); font-variant-numeric: tabular-nums; }
#est-app .stat-value.pos { color: var(--verde-ink); }
#est-app .stat-value.neg { color: var(--cancellato-t); }
#est-app .stat-sub { color: var(--t3); }
#est-app .helper-text { color: var(--t3); }
#est-app .empty-state { color: var(--t3); }

/* barra laterale e barra in alto della contabilita' */
#est-app #sidebar { background: var(--sidebar-bg); }
#est-app .nav-item { color: var(--sidebar-testo); font-family: var(--font); }
#est-app .nav-item:hover { color: var(--sidebar-titolo); background: var(--sidebar-hover); }
#est-app .nav-item.active { color: #fff; background: var(--sidebar-attivo); }
#est-app .nav-item.active::before { background: var(--verde); }
#est-app .nav-month { color: var(--sidebar-testo); }
#est-app .nav-month:hover { color: var(--sidebar-titolo); background: var(--sidebar-hover); }
#est-app .nav-month.active { background: var(--verde-vivo); color: #06201A; }
#est-app #topbar { background: var(--card); border-bottom: 1px solid var(--bordo); box-shadow: none; }
#est-app #topbar-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.4px; color: var(--t1); }
#est-app .topbar-year-badge { background: var(--verde-soft); color: var(--verde-ink); }

/* bottoni, campi, tabelle, badge */
#est-app .btn { border-radius: var(--r-sm); font-weight: 600; }
/* --bottone-scuro: in chiaro e' --t1 come prima; in scuro un verde scuro,
   invece del bottone quasi bianco che faceva da faro in mezzo alla pagina. */
#est-app .btn-primary { background: var(--bottone-scuro, var(--t1)); color: #fff; }
#est-app .btn-primary:hover { background: var(--bottone-scuro, var(--t1)); transform: none; box-shadow: var(--shadow-sm); }
#est-app .btn-success { background: var(--verde-soft); color: var(--verde-ink); }
#est-app .btn-success:hover { background: var(--verde-vivo); color: #06201A; }
#est-app .btn-danger { background: var(--cancellato-bg); color: var(--cancellato-t); }
#est-app .btn-ghost { border: 1px solid var(--bordo); color: var(--t2); }
#est-app .btn-ghost:hover { border-color: var(--t3); color: var(--t1); }
#est-app .btn-info { background: var(--completato-bg); color: var(--completato-t); }
#est-app .form-control { border: 1px solid var(--bordo); border-radius: var(--r-sm); background: var(--card); color: var(--t1); font-family: var(--font); }
#est-app .form-control:focus { border-color: var(--verde-vivo); box-shadow: 0 0 0 3px var(--verde-glow); }
#est-app .form-label { color: var(--t3); font-size: var(--fs-xs); letter-spacing: var(--tracking-label); }
#est-app .table-wrap { border: 1px solid var(--bordo); border-radius: var(--r-sm); }
#est-app thead th, #est-app .entrate-table-wrap thead th { background: var(--card-2); color: var(--t3); border-bottom: 1px solid var(--bordo); }
#est-app tbody td, #est-app .entrate-table-wrap tbody td { border-bottom: 1px solid var(--bordo-soft); color: var(--t1); }
#est-app tbody tr:hover td, #est-app .entrate-table-wrap tbody tr:hover td { background: var(--card-2); }
#est-app tfoot td { border-top: 1px solid var(--bordo); }
#est-app tfoot tr.foot-ent td { background: var(--confermato-bg); color: var(--verde-ink); }
#est-app tfoot tr.foot-usc td { background: var(--cancellato-bg); color: var(--cancellato-t); }
#est-app tfoot tr.foot-utile td { background: var(--completato-bg); color: var(--completato-t); }
#est-app tfoot tr.foot-cassa td { background: var(--card-2); color: var(--t1); }
#est-app .badge-green, #est-app .badge-contanti { background: var(--confermato-bg); color: var(--verde-ink); }
#est-app .badge-gold, #est-app .badge-mance { background: var(--attesa-bg); color: var(--attesa-t); }
#est-app .badge-pos { background: var(--completato-bg); color: var(--completato-t); }
#est-app .riga-impo, #est-app .card-impostazioni { background: var(--card); border-color: var(--bordo); }

/* SETTIMANA: le ore come nel Giorno (1.56.1). Nel Giorno l'ora e' centrata
   sulla sua linea; nella Settimana stava sotto la linea, dentro la fascia,
   in un altro carattere (monospazio) e con una sua linea in piu' nella
   colonna delle ore: le due viste sembravano di due app diverse, e l'ora
   sembrava riferita alla fascia sbagliata. */
.ora-label { border-top: 0; padding: 0 8px 0 0; align-items: flex-start; overflow: visible;
  font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: -.3px; color: var(--t3); }
.ora-label span { display: block; line-height: 1; transform: translateY(-50%); }

/* GIORNO: sotto l'ultima ora la griglia finiva (960px) mentre la colonna
   delle ore continuava bianca per altri 72px, e sotto tutte e due si vedeva
   il grigio del fondo: tre bordi inferiori diversi. Il contenitore della
   giornata e' bianco fino in fondo. */
.agenda-timeline-wrap { background: var(--card); }

/* "Esci" era alto 28px accanto ai tondi da 36: nella stessa riga, due
   altezze. */
.topbar-destra #btn-logout { height: 36px; }

/* Il pannello che sale dal basso (dettagli dell'appuntamento), su tablet:
   largo quanto lo schermo sembrava una tenda. Centrato e largo al massimo
   560px, come una scheda. Qui e non in app-shell.css perche' agenda.css,
   che si carica dopo, fissa left/right a 0. */
@media (min-width: 769px) {
  .bottom-sheet { left: 50%; right: auto; width: min(560px, 100%); margin-left: calc(min(560px, 100%) / -2); }
}

/* Colori che finanze.js scriveva a mano dentro i riquadri (chiusura di
   cassa, righe di "Completa e incassa"): in chiaro restano identici, in
   scuro prendono le tinte del tema invece di restare riquadri bianchi. */
:root {
  --info-bg: #F4F7FF; --info-bordo: #D8E3FA; --info-titolo: #2C4B8F; --info-testo: #4A5B7A;
  --riga-trat: #F9F9FC; --riga-prod: #FFF5F7;
}
:root[data-theme="dark"] {
  --info-bg: var(--completato-bg); --info-bordo: #24375A; --info-titolo: var(--completato-t); --info-testo: var(--t2);
  --riga-trat: var(--card-2); --riga-prod: rgba(232,84,122,.10);
}

/* Il metodo di pagamento scelto: i colori chiari scritti in finanze.css
   (verde, azzurro, oro pallidi) in scuro diventano le stesse tinte di stato
   dell'agenda. Non scelto, il bottone prende la superficie del tema. */
:root[data-theme="dark"] #est-app .pag-pill { color: var(--t2); }
:root[data-theme="dark"] #est-app .pag-pill.sel-contanti { background: var(--confermato-bg); border-color: var(--verde-vivo); color: var(--confermato-t); }
:root[data-theme="dark"] #est-app .pag-pill.sel-pos { background: var(--completato-bg); border-color: var(--op3); color: var(--completato-t); }
:root[data-theme="dark"] #est-app .pag-pill.sel-mance,
:root[data-theme="dark"] #est-app .pag-pill.sel-buono { background: var(--attesa-bg); border-color: var(--op6); color: var(--attesa-t); }
:root[data-theme="dark"] #est-app .pag-pill.sel-custom { color: var(--verde-ink); }

/* DATA E IMPORTO ALTI UGUALI. Il campo data del browser e' piu' alto di
   un paio di pixel di quello del numero, e sul telefono Android scrive la
   data CENTRATA mentre l'importo sta a sinistra: uno sotto l'altro nella
   scheda Entrate sembravano due campi di due app diverse. Stessa altezza per
   tutti i campi di una riga, e la data allineata a sinistra come gli altri. */
#est-app input.form-control:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#est-app select.form-control {
  height: 36px; line-height: 1.2;
}
#est-app input.form-control[type="date"],
#est-app input.form-control[type="time"],
#est-app input.form-control[type="month"] { text-align: left; }
#est-app input.form-control::-webkit-date-and-time-value { text-align: left; }

/* Il lucchetto della barra delle tasse: il reset "#est-app *" azzera
   margini e spaziature di qualunque regola di sola classe. */
#est-app .tasse-lock { padding: 3px 9px; margin-left: 8px; }
#est-app .tasse-lock.sbloccato { color: var(--verde-ink); }
:root[data-theme="dark"] #est-app .tasse-lock.sbloccato { background: var(--verde-soft); border-color: var(--verde-vivo); }
/* L'ocra scuro della scheda tasse (#7a6010) sul verde scuro non si leggeva. */
:root[data-theme="dark"] #est-app .tasse-label,
:root[data-theme="dark"] #est-app .tasse-info { color: var(--attesa-t); }
#est-app .tasse-header { flex-wrap: wrap; gap: 6px; }

/* ============================================================================
   BUONI & PACCHETTI (1.70) — la stessa mano del Magazzino
   ============================================================================
   Stessi valori di magazzino.css (numeri in alto, pillole, schede, bottoni),
   ma con #est-app davanti: dentro la contabilita' il reset "#est-app *" pesa
   un id e azzera padding e margini di qualunque regola di sola classe (era
   il motivo dei bottoni del filtro schiacciati). Un colore per tipo, preso
   dai token: buono = ambra, tessera = azzurro, pacchetto = viola.        */
#est-app .bp-pagina { display: flex; flex-direction: column; gap: 18px; }
#est-app .bp-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
#est-app .bp-kpi-card { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
#est-app .bp-kpi-card.attenzione { border-color: var(--attesa); background: var(--attesa-bg); }
#est-app .bp-kpi-lab { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); }
#est-app .bp-kpi-val { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: -.6px; margin-top: 5px; color: var(--t1); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#est-app .bp-kpi-val.attenzione { color: var(--attesa-t); }
#est-app .bp-kpi-nota { font-size: 12px; color: var(--t3); margin-top: 3px; line-height: 1.45; }

#est-app .bp-barra-azioni { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#est-app .bp-seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; min-width: 0; flex: 1 1 auto; }
#est-app .bp-seg::-webkit-scrollbar { display: none; }
#est-app .bp-seg-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-height: 40px; padding: 8px 14px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: 100px;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--t2);
  cursor: pointer; white-space: nowrap; transition: border-color .18s, color .18s, background .18s;
}
#est-app .bp-seg-btn:hover { border-color: var(--verde); color: var(--t1); }
#est-app .bp-seg-btn.on { background: var(--verde); border-color: var(--verde); color: #fff; }
#est-app .bp-seg-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; background: var(--card-2); color: var(--t2); font-size: 11.5px; font-weight: 700; }
#est-app .bp-seg-btn.on .bp-seg-n { background: rgba(255,255,255,.25); color: #fff; }

#est-app .bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 7px 14px;
  background: var(--card); border: 1px solid var(--bordo); border-radius: 100px;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--t1);
  cursor: pointer; white-space: nowrap; transition: border-color .18s, color .18s, background .18s;
}
#est-app .bp-btn:hover { border-color: var(--verde); color: var(--verde-ink); }
#est-app .bp-btn.primario { background: var(--verde); border-color: var(--verde); color: #fff; }
#est-app .bp-btn.primario:hover { background: var(--verde-vivo); color: #fff; }
#est-app .bp-btn.rosso { color: var(--cancellato-t); border-color: var(--cancellato-bg); }
#est-app .bp-btn.rosso:hover { border-color: var(--cancellato); color: var(--cancellato); }
#est-app .bp-btn.piccolo { min-height: 32px; padding: 4px 11px; font-size: 12.5px; }
@media (hover: none) {
  #est-app .bp-btn, #est-app .bp-seg-btn { min-height: 44px; }
  #est-app .bp-btn.piccolo { min-height: 40px; }
}

#est-app .bp-gruppo { display: flex; flex-direction: column; gap: 10px; }
#est-app .bp-gruppo-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#est-app .bp-gruppo-tit { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); }
#est-app .bp-conta { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 7px; border-radius: 100px; background: var(--card); border: 1px solid var(--bordo); color: var(--t2); font-size: 11.5px; font-weight: 700; letter-spacing: 0; }
#est-app .bp-lista { display: flex; flex-direction: column; gap: 10px; }
#est-app .bp-card { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#est-app .bp-card.scaduto { border-style: dashed; }
#est-app .bp-card.esaurito { background: var(--card-2); }
#est-app .bp-card.esaurito .bp-nome { color: var(--t2); }
#est-app .bp-card-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#est-app .bp-card-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
#est-app .bp-nome { font-size: 15.5px; font-weight: 700; color: var(--t1); overflow-wrap: anywhere; }
#est-app .bp-tipo { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 100px; white-space: nowrap; }
#est-app .bp-tipo.buono { background: var(--attesa-bg); color: var(--attesa-t); }
#est-app .bp-tipo.card { background: var(--completato-bg); color: var(--completato-t); }
#est-app .bp-tipo.pacchetto { background: var(--op4-soft); color: var(--op4-ink); }
#est-app .bp-numero { flex: none; font-size: 12.5px; font-weight: 700; color: var(--t3); font-variant-numeric: tabular-nums; }
#est-app .bp-dati { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--t3); font-variant-numeric: tabular-nums; }
#est-app .bp-grigio { color: var(--t3); font-weight: 400; }
#est-app .bp-credito-testa { display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; font-size: 13px; color: var(--t2); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
#est-app .bp-credito-testa b { color: var(--t1); }
#est-app .bp-bonus { color: var(--verde-ink); font-weight: 700; }
#est-app .bp-barra { height: 6px; border-radius: 100px; background: var(--bordo-soft); overflow: hidden; }
#est-app .bp-barra-piena { height: 100%; border-radius: 100px; background: var(--verde); transition: width .5s var(--ease); }
#est-app .bp-barra-piena.bassa { background: var(--attesa); }
#est-app .bp-vincoli { font-size: 12px; color: var(--t3); margin-top: 6px; }
#est-app .bp-sedute { display: flex; flex-wrap: wrap; gap: 6px; }
#est-app .bp-seduta {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%;
  padding: 5px 6px 5px 10px; border-radius: var(--r-sm);
  background: var(--op4-soft); color: var(--op4-ink); font-size: 12.5px; font-weight: 600;
}
#est-app .bp-seduta.finita { background: var(--bordo-soft); color: var(--t3); padding-right: 10px; }
#est-app .bp-seduta-nome { overflow-wrap: anywhere; }
#est-app .bp-seduta-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
#est-app .bp-scala {
  min-height: 28px; padding: 2px 10px; border-radius: 100px; cursor: pointer;
  border: 1px solid currentColor; background: var(--card); color: var(--op4-ink);
  font-family: var(--font); font-size: 12px; font-weight: 700;
}
@media (hover: none) { #est-app .bp-scala { min-height: 36px; } }
#est-app .bp-saldo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap;
  padding: 8px 10px 8px 12px; border-radius: var(--r-sm);
  background: var(--attesa-bg); color: var(--attesa-t); font-size: 13px;
}
#est-app .bp-saldo .bp-grigio { color: var(--t2); }
#est-app .bp-saldato { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--verde-ink); }
#est-app .bp-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
#est-app .bp-vuoto { background: var(--card); border: 1px dashed var(--bordo); border-radius: var(--r); padding: 28px 16px; text-align: center; font-size: 14px; color: var(--t3); }
#est-app .bp-apri-archivio {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 40px; padding: 8px 14px; border-radius: 100px; cursor: pointer;
  border: 1px dashed var(--bordo); background: transparent;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--t2);
}
#est-app .bp-apri-archivio:hover { border-color: var(--t3); color: var(--t1); }
@media (hover: none) { #est-app .bp-apri-archivio { min-height: 44px; } }
#est-app .bp-nota { font-size: 12.5px; color: var(--t3); line-height: 1.5; }
@media (max-width: 560px) {
  #est-app .bp-barra-azioni > .bp-btn.primario { width: 100%; }
}

/* ============================================================================
   COMPONENTI COMUNI (ridefiniti sui token)
   ============================================================================ */
.topbar { background: var(--card); border-bottom: 1px solid var(--bordo); }
.btn-top.secondario, .nav-data-agenda {
  background: var(--card); border: 1px solid var(--bordo); color: var(--t1);
  box-shadow: none;
}
.btn-top.secondario:hover { border-color: var(--t3); background: var(--card); transform: none; }
.btn-top.primario { background: var(--t1); box-shadow: none; }
.btn-top.primario:hover { background: #1D3328; transform: none; box-shadow: var(--shadow-sm); }
.fab, .btn-nuovo-apt { box-shadow: var(--shadow-verde); }
/* selettore a segmenti (Impostazioni → Tema) */
.tema-seg { display: inline-flex; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 100px; padding: 3px; gap: 2px; flex-shrink: 0; }
.tema-seg button {
  height: 30px; padding: 0 14px; border: 0; border-radius: 100px; background: transparent;
  color: var(--t2); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.tema-seg button.on { background: var(--t1); color: var(--card); }

/* ============================================================================
   GIORNO — la timeline
   ============================================================================
   Stessa mano del mese: superficie bianca, righe sottili, l'evento porta il
   colore di chi lo fa come tinta leggera + barra a sinistra, testo in
   inchiostro (non nel colore dell'operatrice: si legge meglio).
   Il colore arriva dal JS come variabile --apt-col; la tinta la calcola il CSS
   con color-mix, cosi' e' identica per ogni colore che l'utente sceglie.     */
.timeline-corpo { background: var(--card); }
.timeline-ore-col { background: var(--card); }
.timeline-ora-label {
  font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; color: var(--t3);
  letter-spacing: 0; padding: 0 10px 0 0; transform: translateY(-7px);
}
.timeline-riga-ora { border-top: 1px solid var(--bordo-soft); }
.timeline-riga-ora::after { border-top: 1px dashed var(--bordo-soft); opacity: .7; }
.timeline-pausa {
  background: var(--weekend);
  border-top: 1px dashed var(--bordo); border-bottom: 1px dashed var(--bordo);
  color: var(--t3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
/* (1.74) Prenota di nuovo: settimane a pillole, tre posti proposti. */
.ritorno-chi { font-size: var(--fs-sm); color: var(--t2); margin: -4px 0 14px; line-height: 1.45; }
.ritorno-settimane { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ritorno-sett {
  padding: 7px 12px; border-radius: 100px; border: 1.5px solid var(--bordo); background: var(--card);
  color: var(--t2); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.ritorno-sett.on { border-color: var(--verde-vivo); background: color-mix(in srgb, var(--verde-vivo) 12%, var(--card)); color: var(--verde-ink); }
.ritorno-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ritorno-posto {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 12px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--bordo); background: var(--card);
  color: var(--t1); font: inherit; text-align: left; cursor: pointer;
}
.ritorno-posto:hover { border-color: var(--verde-vivo); }
.ritorno-quando { font-size: 14.5px; }
.ritorno-nota { font-size: var(--fs-xs); color: var(--t3); }
.ritorno-vuoto { font-size: var(--fs-sm); color: var(--t2); padding: 12px 14px; border-radius: var(--r-sm); background: var(--sfondo); line-height: 1.5; }
.ritorno-altro {
  background: none; border: 0; padding: 6px 0; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--verde-ink); text-decoration: underline; cursor: pointer;
}

/* (1.81) Sposta: dal giorno + anche con le altre operatrici */
.sposta-filtri { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-bottom: 14px; }
.sposta-dal { display: flex; flex-direction: column; gap: 4px; flex: 1 1 170px; min-width: 0; }
.sposta-dal .input-form { margin-bottom: 0; }
.sposta-tutte { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--t2); font-weight: 600; cursor: pointer; padding-bottom: 10px; }
.sposta-tutte input { width: 18px; height: 18px; accent-color: var(--verde-vivo); }

/* (1.82) Notifiche sul telefono (Impostazioni, Preferenze) */
.notif-intro { color: var(--t2); font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
.notif-stato { font-size: 13.5px; font-weight: 700; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sfondo); color: var(--t2); margin-bottom: 12px; line-height: 1.5; }
.notif-stato.accese { background: color-mix(in srgb, var(--verde-vivo) 12%, var(--card)); color: var(--verde-ink); }
.notif-stato.bloccate { background: color-mix(in srgb, #E0555B 10%, var(--card)); color: #9B2226; font-weight: 600; }
.notif-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.notif-azioni .btn-top { padding: 9px 16px; }
.notif-accendi { background: var(--verde-vivo, #2ecc8f) !important; color: #fff !important; border-color: transparent !important; font-weight: 800; }
.notif-opz { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--t1); padding: 7px 0; cursor: pointer; line-height: 1.45; }
.notif-opz input { width: 18px; height: 18px; flex: none; accent-color: var(--verde-vivo); margin-top: 1px; }
.notif-opz span { flex: 1 1 auto; min-width: 0; }
.notif-opz small { color: var(--t3); font-size: 12px; }
/* (1.88, 1.89) gli avvisi a orario: la spunta a sinistra, l'ora a destra */
.notif-gruppo { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--t2); margin: 14px 0 2px; line-height: 1.5; }
.notif-gruppo small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--t3); font-size: 12px; }
.notif-avviso { display: flex; align-items: flex-start; gap: 10px; }
.notif-avviso .notif-opz { flex: 1 1 auto; min-width: 0; }
.notif-avviso select { flex: none; min-width: 5.8em; margin-top: 4px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--t1); padding: 5px 8px; border: 1px solid var(--bordo); border-radius: var(--r-sm); background: var(--card); }
.notif-avviso.spenta select { opacity: .5; }
.notif-riservato { margin-top: 8px; border-top: 1px solid var(--bordo); padding-top: 12px; }
.notif-installa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bordo-soft); font-size: 13px; color: var(--t2); }
.notif-installa span { flex: 1 1 220px; }

/* (1.81) Sicurezza: quanto resta sbloccato il PIN su questo dispositivo */
.pin-durata { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; max-width: 460px; }
.pin-durata .input-form { margin-bottom: 0; }
.pin-durata-nota { font-size: 12px; color: var(--t3); line-height: 1.5; }

/* (1.81) Dal + dell'agenda: vendita al banco */
.link-vendita-banco {
  display: block; margin: 0 0 12px auto; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px;
  font-weight: 700; color: var(--verde-ink); text-decoration: underline; cursor: pointer;
}

/* (1.81) Promemoria: manda in fila. (R1) Il tasto e' il tasto WhatsApp unico
   (.wa-tasto): di questa classe resta solo lo spazio sopra. */
.fila-avvia { margin-top: 12px; }
.fila-prossima {
  margin: 12px 0 4px; padding: 16px 18px; border-radius: var(--r); background: color-mix(in srgb, var(--verde-vivo) 10%, var(--card));
  border: 1.5px solid var(--verde-vivo); display: flex; flex-direction: column; gap: 8px;
}
.fila-testa { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--verde-ink); }
.fila-chi { font-size: 14.5px; color: var(--t1); line-height: 1.45; overflow-wrap: anywhere; }
/* (1.90) la nota della cliente: il segno sull'appuntamento (senza testo),
   il riquadro nel dettaglio e nella finestra del nuovo appuntamento, la riga
   nella fila dei promemoria. Con "Nascondi nomi" il segno sparisce. */
.apt-nota-segno { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--attesa); color: #fff; margin-right: 5px; vertical-align: -2px; flex-shrink: 0; }
.apt-nota-segno svg { width: 10px; height: 10px; stroke-width: 2.6; }
body.privacy-mode .apt-nota-segno { display: none; }
.nota-cliente-box { background: var(--attesa-bg); border: 1.5px solid color-mix(in srgb, var(--attesa) 45%, transparent); border-radius: 12px; padding: 11px 13px; margin: 0 0 14px; }
.nota-cliente-tit { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--attesa-t); margin-bottom: 3px; }
.nota-cliente-testo { font-size: 14px; color: var(--t1); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-cliente-dove { font-size: 11.5px; color: var(--t3); margin-top: 4px; }
#nota-cliente-modal .nota-cliente-box { margin: 8px 0 14px; }
.fila-nota { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--attesa-t); background: var(--attesa-bg); border-radius: 10px; padding: 7px 10px; line-height: 1.45; overflow-wrap: anywhere; }
.fila-nota svg { margin-top: 2px; }
/* (1.91) le prossime date in un WhatsApp, dalla scheda della cliente.
   (R1) via .btn-prossimi-scheda e il suo :hover (un color-mix senza ripiego): il
   tasto e' il tasto WhatsApp unico; lo spazio sotto lo da' il blocco R1. */
/* (1.92) la lista d'attesa nelle Richieste */
.att-sezione { margin-top: 26px; }
.att-sez-tit { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.att-sez-tit span { background: var(--attesa-bg); color: var(--attesa-t); border-radius: 100px; padding: 1px 8px; letter-spacing: 0; font-size: 11.5px; }
.att-vuota { font-size: 13px; color: var(--t3); line-height: 1.55; padding: 10px 2px; }
.att-voce { background: var(--card); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-xs); }
.att-voce.mano { border-color: color-mix(in srgb, var(--attesa) 55%, var(--bordo)); }
.att-voce.ok { border-color: color-mix(in srgb, var(--verde-vivo) 45%, var(--bordo)); }
.att-voce-chi { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 14.5px; color: var(--t1); }
.att-voce-chi span { font-size: 12.5px; color: var(--t2); overflow-wrap: anywhere; }
.att-voce-stato { font-size: 13px; color: var(--t2); margin-top: 6px; line-height: 1.45; }
.att-voce.mano .att-voce-stato { color: var(--attesa-t); font-weight: 700; }
.att-voce.ok .att-voce-stato { color: var(--verde-ink); font-weight: 600; }
.att-voce-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* (R1) via la regola .att-wa: «Avvisala» e' il tasto WhatsApp unico (la classe resta per le prove) */
.att-togli { padding: 8px 14px; border-radius: 100px; border: 1px solid var(--bordo); background: var(--card); color: var(--t2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
/* (1.93) La disdetta dal link nelle richieste gia' gestite, e nella vetrina
   il prodotto proposto dopo la prenotazione. */
.rich-dis { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 100px; vertical-align: 2px;
  font-size: 10.5px; font-weight: 700; background: var(--cancellato-bg, rgba(232,84,84,.1)); color: var(--cancellato-t); }
.vt-dopo-riga { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.vt-dopo-riga > div { min-width: 0; }
#vt-dopo .input-form { margin: 0; width: 100%; }

/* (1.94) SCHEDA CLIENTE E CONSENSI — consensi.js
   Sull'appuntamento e nella rubrica: da firmare (giallo) o da leggere.
   La scheda da firmare sta sopra a tutto (anche sopra la finestra della
   cliente), a tutto schermo sul telefono, come un foglio sul tablet: testo
   grande, tasti grandi, perche' la tiene in mano la cliente. */
.cns-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 0 0 14px; padding: 11px 13px;
  border-radius: 12px; border: 1.5px solid rgba(201,168,76,.45); background: rgba(201,168,76,.1); }
.cns-box > div:first-child { min-width: 0; flex: 1 1 200px; }
.cns-box b { display: block; font-size: 13px; font-weight: 800; color: var(--attesa-t); }
.cns-box span { display: block; font-size: 12.5px; color: var(--t2); line-height: 1.45; margin-top: 2px; }
.cns-box.leggi { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.07); }
.cns-box.leggi b { color: var(--t1); }
.cns-box-tasti { display: flex; flex-wrap: wrap; gap: 8px; }
.cns-btn { min-height: 38px; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--bordo); background: var(--card); color: var(--t1);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cns-btn.pieno { background: var(--verde-vivo, #2ECC8F); border-color: var(--verde-vivo, #2ECC8F); color: #0d1a14; }
.cns-link { padding: 0; border: 0; background: none; color: var(--verde-vivo); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: left; }
.cns-scheda { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--sfondo); }
.cns-scheda-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; font-size: 13.5px; color: var(--t1); }
.cns-stato { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 100px; background: rgba(46,204,143,.12); color: var(--verde-vivo); }
.cns-stato.mai, .cns-stato.scaduta { background: rgba(201,168,76,.15); color: var(--attesa-t); }
.cns-scelte { font-size: 12.5px; color: var(--t2); margin-bottom: 8px; }
.cns-scelte.attenzione { color: var(--attesa-t); font-weight: 700; }
.cns-elenco { margin-top: 10px; border-top: 1px solid var(--bordo); }
.cns-riga { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bordo); font-size: 12.5px; color: var(--t2); }
.rich-firma { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 100px; vertical-align: 2px; font-size: 10.5px; font-weight: 700;
  background: rgba(59,130,246,.12); color: #2563eb; }

.modal-overlay.cns-overlay { z-index: 900; padding: 16px; }
.cns-foglio { width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; background: #fff; color: #1a1a1a; border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.cns-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid #ece7df; flex: none; }
.cns-centro { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b6560; }
.cns-titolo { font-size: 21px; font-weight: 800; line-height: 1.2; margin-top: 2px; }
.cns-chi { font-size: 14px; color: #4a4540; margin-top: 3px; }
.cns-corpo { flex: 1 1 auto; overflow-y: auto; padding: 6px 20px 24px; -webkit-overflow-scrolling: touch; }
.cns-anteprima { margin: 12px 0 4px; padding: 9px 12px; border-radius: 10px; background: #fff7e0; color: #7a5a0c; font-size: 13px; font-weight: 600; }
.cns-sez { padding: 16px 0; border-bottom: 1px solid #ece7df; }
.cns-sez h3 { font-size: 16.5px; font-weight: 800; margin: 0 0 6px; color: #1a1a1a; }
.cns-testo { font-size: 15px; line-height: 1.6; color: #333; white-space: pre-line; margin: 0 0 10px; overflow-wrap: anywhere; }
.cns-casella { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid #d9d2c7; border-radius: 12px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: #1a1a1a; background: #faf8f4; }
.cns-casella input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: #1f9d6a; }
.cns-sino { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cns-sino button { min-height: 48px; border: 1.5px solid #d9d2c7; border-radius: 12px; background: #faf8f4; color: #1a1a1a; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.cns-sino button.on { background: #1f9d6a; border-color: #1f9d6a; color: #fff; }
.cns-sino.piccolo { grid-template-columns: 76px 76px; }
.cns-sino.piccolo button { min-height: 42px; }
.cns-domande { display: flex; flex-direction: column; }
.cns-dom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 11px 0; border-top: 1px solid #f0ece5; }
.cns-dom:first-child { border-top: 0; }
.cns-dom-testo { font-size: 15px; line-height: 1.45; color: #1a1a1a; min-width: 0; }
.cns-dom .cns-nota { grid-column: 1 / -1; }
.cns-nota { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 11px 12px; border: 1.5px solid #d9d2c7; border-radius: 10px; font: inherit; font-size: 15px; color: #1a1a1a; background: #fff; }
.cns-nota.nascosta, .cns-errore.nascosta { display: none; }
.cns-sez.manca, .cns-dom.manca, .cns-nota.manca, .cns-pad.manca { outline: 2px solid #e85454; outline-offset: 4px; border-radius: 8px; }
.cns-risposta { font-size: 14.5px; font-weight: 700; padding: 8px 12px; border-radius: 10px; background: #f3f1ec; color: #1a1a1a; }
.cns-risposta.si { background: #e7f7ef; color: #146c48; }
.cns-risposta.no { background: #f6ecec; color: #8a2a2a; }
.cns-risposta.attenzione { background: #fff3d6; color: #7a5a0c; }
.cns-pad { position: relative; height: 190px; border: 2px dashed #bdb5a8; border-radius: 14px; background: #fff; margin: 4px 0 10px; }
.cns-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.cns-pad-eti { position: absolute; left: 14px; bottom: 10px; font-size: 12.5px; color: #a09890; pointer-events: none; }
.cns-errore { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #a32020; font-size: 14px; font-weight: 700; }
.cns-manda { display: block; width: 100%; min-height: 54px; margin-top: 16px; border: 0; border-radius: 14px; background: #1f9d6a; color: #fff; font: inherit;
  font-size: 17px; font-weight: 800; cursor: pointer; }
.cns-manda:disabled { opacity: .6; }
.cns-fatto { text-align: center; padding: 40px 10px 10px; }
.cns-fatto-segno { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #1f9d6a; color: #fff; font-size: 34px; line-height: 64px; font-weight: 800; }
.cns-fatto-tit { font-size: 22px; font-weight: 800; color: #1a1a1a; }
.cns-fatto p { color: #4a4540; font-size: 15px; margin: 6px 0 0; }
.cns-firma-img { display: block; max-width: 100%; max-height: 200px; border: 1px solid #ece7df; border-radius: 10px; background: #fff; }
.cns-intest { font-size: 12.5px; color: #4a4540; line-height: 1.5; margin: 12px 0 0; }
.card-impostazioni .cns-intest { color: var(--t2); padding: 10px 12px; border-radius: 10px; background: var(--sfondo); border: 1px solid var(--bordo); }
@media (max-width: 600px) {
  .modal-overlay.cns-overlay { padding: 0; }
  .cns-foglio { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .cns-testa, .cns-corpo { padding-left: 16px; padding-right: 16px; }
}
/* Stampa della scheda firmata: solo il foglio, tutto il testo. */
@media print {
  body.cns-stampa > *:not(#modal-consensi-vedi) { display: none !important; }
  body.cns-stampa #modal-consensi-vedi { position: static !important; inset: auto; background: none !important; backdrop-filter: none !important; padding: 0 !important; display: block !important; opacity: 1 !important; }
  body.cns-stampa .cns-foglio { box-shadow: none; border-radius: 0; max-height: none; width: 100%; }
  body.cns-stampa .cns-corpo { overflow: visible; }
  body.cns-stampa .modal-chiudi, body.cns-stampa .solo-schermo { display: none !important; }
  /* (1.98) html e body sono alti quanto lo schermo e senza scorrimento (app-shell.css): la stampa usciva di UNA
     pagina, senza le risposte, i consensi e la firma. Qui si liberano (la classe su html la mette Consensi._stampa,
     come html.printing-prev dei preventivi) e il foglio si allunga quanto serve; fondo bianco anche col tema scuro. */
  html.cns-stampa, html.cns-stampa body { height: auto !important; overflow: visible !important; background: #fff !important; }
  body.cns-stampa .cns-foglio { height: auto !important; max-height: none !important; overflow: visible !important; display: block !important; }
  body.cns-stampa .cns-corpo { height: auto !important; overflow: visible !important; }
  body.cns-stampa .cns-sez h3, body.cns-stampa .cns-firma-img { break-after: avoid; page-break-after: avoid; }
  body.cns-stampa .cns-dom, body.cns-stampa .cns-firma-img { break-inside: avoid; page-break-inside: avoid; }
  body.cns-stampa .cns-risposta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Le impostazioni della scheda */
.cns-avviso { padding: 10px 12px; border-radius: 10px; background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.3); color: var(--attesa-t); font-size: 12.5px; line-height: 1.5; }
.cns-gruppo { margin-top: 14px; }
.cns-gruppo:first-of-type { margin-top: 4px; }
.cns-gruppo-tit { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
.cns-gruppo-sotto { font-size: 12px; color: var(--t2); margin: -4px 0 8px; }
.cns-mod { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--card); min-width: 0; }
.cns-mod.on { border-color: rgba(46,204,143,.4); background: rgba(46,204,143,.05); }
.cns-mod-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.cns-mod-testa label { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; flex: 1 1 200px; }
.cns-mod-testa input { width: 18px; height: 18px; flex: none; accent-color: var(--verde-vivo); margin: 0; }
.cns-mod-nome { font-weight: 700; font-size: 14px; color: var(--t1); overflow-wrap: anywhere; }
.cns-tipo { font-size: 11px; font-weight: 700; color: var(--t3); }
.cns-mod .input-form { margin: 0; width: 100%; }
.cns-editor { font-size: 13px; line-height: 1.55; resize: vertical; min-height: 120px; }
.cns-editor-piede { font-size: 11.5px; color: var(--t3); }
.cns-dom-lista { display: flex; flex-direction: column; gap: 4px; padding-left: 4px; }
.cns-dom-voce { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--t1); line-height: 1.4; cursor: pointer; padding: 4px 0; }
.cns-dom-voce input { width: 16px; height: 16px; flex: none; margin: 2px 0 0; accent-color: var(--verde-vivo); }
.cns-dom-voce span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.cns-dom-voce em { color: var(--t3); font-style: normal; }
.cns-togli { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--bordo); background: var(--card); color: var(--t2); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.cns-aggiungi { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--bordo); }
.cns-aggiungi .input-form { margin: 0; }

/* (1.94) LE NOVITA' — novita.js */
.modal-overlay.nov-overlay { z-index: 850; }
.nov-modal { width: min(620px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.nov-corpo { overflow-y: auto; }
.nov-intro { font-size: 13px; color: var(--t2); line-height: 1.55; margin: 0 0 12px; }
.nov-voce { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--card); }
.nov-tit { font-size: 14.5px; font-weight: 800; color: var(--t1); margin-bottom: 4px; }
.nov-voce p { font-size: 12.5px; color: var(--t2); line-height: 1.55; margin: 0 0 10px; }
.nov-piede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nov-tasto { min-height: 38px; padding: 7px 14px; border: 0; border-radius: 10px; background: var(--verde-vivo, #2ECC8F); color: #0d1a14; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.nov-vai { min-height: 32px; padding: 5px 12px; border-radius: 9px; border: 1px solid var(--bordo); background: var(--card); color: var(--t1); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.nov-acceso { font-size: 12.5px; font-weight: 800; color: var(--verde-vivo); }
.nov-serve { font-size: 12px; color: var(--t3); }
.nov-fine { width: 100%; margin: 4px 0 0; }
.nov-riapri { display: block; margin: -6px 0 16px; padding: 0; border: 0; background: none; color: var(--verde-vivo); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; }
/* (R1) via la regola .fila-manda (bianco su verde, 2,0:1): «Manda a ...» e' il tasto
   WhatsApp unico; l'altezza di 50 la da' .wa-tasto.fila-manda nel blocco R1. */
.fila-basta { align-self: center; background: none; border: 0; padding: 4px 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--t2); text-decoration: underline; cursor: pointer; }

/* (1.78) Trova posto: "+12 altri orari" apre l'elenco completo. */
.orari-altri {
  align-self: center; padding: 5px 11px; border-radius: 100px; border: 1.5px dashed var(--bordo);
  background: var(--card); color: var(--t2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.orari-altri:hover { border-color: var(--verde-vivo); color: var(--verde-ink); }
#trova-settimane { margin-bottom: 8px; }

/* (1.77) Giornata senza appuntamenti: la griglia c'e' lo stesso, con questa riga sopra. */
.agenda-vuota-nota {
  display: flex; align-items: center; gap: 7px; margin: 8px 6px 4px; padding: 8px 14px;
  border-radius: 8px; background: var(--sfondo); border: 1px dashed var(--bordo);
  font-size: var(--fs-sm); color: var(--t2);
}
.agenda-vuota-nota svg { flex: none; opacity: .7; }

/* (1.72) Spazio vuoto della giornata = nuovo appuntamento a quell'ora.
   Il segnaposto "+ 10:30" lo mette il JS solo dove c'e' il mouse. */
@media (hover: hover) { .timeline-corpo, .settimana-colonna-giorno { cursor: pointer; } }
.timeline-fantasma {
  position: absolute; left: 6px; right: 6px; z-index: 1; pointer-events: none;
  overflow: hidden; white-space: nowrap;   /* nelle colonne strette della settimana */
  display: flex; align-items: center; padding: 0 10px; box-sizing: border-box;
  border: 1.5px dashed var(--verde-vivo); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--verde-vivo) 8%, var(--card));
  color: var(--verde-ink); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.timeline-apt {
  background: color-mix(in srgb, var(--apt-col, var(--op1)) 14%, var(--card));
  border-left: 3px solid var(--apt-col, var(--op1));
  border-radius: var(--r-sm); box-shadow: none; color: var(--t1);
  padding: 6px 10px 6px 10px;
  transition: box-shadow var(--t-fast) var(--ease);
}
.timeline-apt:hover { filter: none; transform: none; box-shadow: var(--shadow-sm); }
.timeline-apt.selezionata, .timeline-apt.selezionato {
  outline: 2px solid var(--verde-vivo); outline-offset: 1px; box-shadow: var(--shadow-sm);
}
.timeline-apt-ora { font-size: var(--fs-xs); font-weight: 600; opacity: 1; color: var(--t2); }
/* Gli appuntamenti arrivati dal portale (1.56): un segno piccolo, per
   sapere a colpo d'occhio che non li hai scritti tu. */
.apt-online { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; line-height: 15px; vertical-align: 1px;
  background: var(--verde-soft); color: var(--verde-ink); }
.timeline-apt-nome { font-size: 13.5px; font-weight: 600; letter-spacing: -.1px; color: var(--t1); }
.timeline-apt-trat { font-size: var(--fs-sm); opacity: 1; color: var(--t2); }
.timeline-apt-wa { background: var(--card); color: var(--t2); box-shadow: var(--shadow-xs); }
.timeline-apt-wa:hover { background: var(--verde-vivo) !important; color: #fff !important; transform: none; }
.timeline-ora-corrente { background: var(--cancellato); box-shadow: none; }
.timeline-slot-vuoto:hover { border-color: var(--verde-vivo); background: var(--verde-soft); }
.agenda-vuota, .giorno-riposo-box, .giorno-ferie-box { color: var(--t2); }

/* ============================================================================
   MINI-CALENDARIO nella barra laterale (scura)
   ============================================================================ */
.mini-cal { padding: 14px 10px 4px; }
.mini-cal-testa {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-sm); font-weight: 600; color: var(--sidebar-titolo); padding: 0 4px; margin-bottom: 6px;
}
.mini-cal-testa button {
  width: 26px; height: 26px; border: 0; border-radius: var(--r-xs); background: transparent;
  color: var(--sidebar-testo); font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.mini-cal-testa button:hover { background: var(--sidebar-attivo); color: var(--sidebar-titolo); }
.mini-cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-variant-numeric: tabular-nums; }
.mini-cal-griglia > span { text-align: center; font-size: 10px; font-weight: 600; color: var(--sidebar-testo); padding: 2px 0; }
.mini-cal-griglia > button {
  height: 26px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--sidebar-titolo); position: relative; padding: 0;
}
.mini-cal-griglia > button:hover { background: var(--sidebar-attivo); }
.mini-cal-griglia > button.fuori { color: var(--sidebar-testo); opacity: .55; }
.mini-cal-griglia > button.punto::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 3px; height: 3px;
  border-radius: 50%; background: var(--verde); transform: translateX(-50%);
}
.mini-cal-griglia > button.sel { background: var(--sidebar-attivo); font-weight: 700; }
.mini-cal-griglia > button.oggi { box-shadow: inset 0 0 0 1.5px var(--verde); }
.mini-cal-griglia > button.sel.oggi, .mini-cal-griglia > button.oggi.sel { background: var(--verde-vivo); color: #06201A; box-shadow: none; }
.mini-cal-griglia > button.sel.oggi::after { background: #06201A; }

/* ============================================================================
   MESE — la griglia
   ============================================================================
   Come nel mockup approvato: griglia continua a righe sottili invece di
   trenta scatole, gli appuntamenti DENTRO le celle come chip col colore
   dell'operatrice, oggi come cerchio pieno sul numero, weekend appena piu'
   caldo. Un mese alla volta. I fondi colorati per "quanto e' libero il
   giorno" (verde/ambra/rosso) se ne vanno: la densita' la dicono i chip.  */
.vista-calendario-corpo { padding: 16px 20px 120px; align-items: stretch; }
.calendario-mese { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.5px; color: var(--t1); }
.cal-doppio { grid-template-columns: 1fr; gap: 0; }
.cal-mese-singolo:last-child { display: none; }
.cal-mese-singolo > div:first-child { display: none; }   /* il titolo centrato: ora sta nell'intestazione */
.calendario-nav-btn { border: 1px solid var(--bordo); background: var(--card); color: var(--t1); box-shadow: none; }
.calendario-nav-btn:hover { background: var(--card); border-color: var(--t3); }
#btn-privacy-toggle, #btn-screenshot-cal {
  border: 1px solid var(--bordo) !important; box-shadow: none !important; font-weight: 600 !important;
}
#btn-privacy-toggle:hover, #btn-screenshot-cal:hover { border-color: var(--t3) !important; }
.cal-toggle { background: var(--card); }
.cal-toggle-btn.attivo { background: var(--t1); color: var(--card); box-shadow: none; }

.calendario-grid {
  gap: 0; background: var(--card); border: 1px solid var(--bordo);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
}
.cal-giorno-header {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordo);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label); color: var(--t3);
}
.cal-cella, .cal-cella.disp-alta, .cal-cella.disp-media, .cal-cella.disp-piena, .cal-cella.disp-riposo, .cal-cella.ferie {
  aspect-ratio: auto; min-height: 112px;
  background: var(--card); border: 0; border-right: 1px solid var(--bordo-soft); border-bottom: 1px solid var(--bordo-soft);
  border-radius: 0; padding: 8px 8px 6px; gap: 3px; opacity: 1;
  transition: background var(--t-fast) var(--ease);
}
.cal-cella:nth-child(7n) { border-right: 0; }
.cal-cella.we { background: var(--weekend); }
.cal-cella.disp-riposo { background: var(--weekend); }
.cal-cella.ferie { background: var(--attesa-bg); }
.cal-cella:hover, .cal-cella.disp-alta:hover, .cal-cella.disp-media:hover, .cal-cella.disp-piena:hover, .cal-cella.disp-riposo:hover {
  transform: none; box-shadow: none; background: var(--card-2); border-color: var(--bordo-soft);
}
.cal-cella.fuori-mese { opacity: 1; background: var(--card); pointer-events: none; }
.cal-cella.fuori-mese .cal-numero { color: var(--t3); opacity: .5; }
.cal-numero, .cal-cella.disp-media .cal-numero, .cal-cella.disp-piena .cal-numero, .cal-cella.disp-riposo .cal-numero, .cal-cella.ferie .cal-numero {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--t2); line-height: 1;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; margin: -2px 0 2px -4px;
}
.cal-cella.oggi { outline: none; }
.cal-cella.oggi .cal-numero { background: var(--verde-vivo); color: #06201A; font-weight: 700; }
.cal-badge { display: none; }
.cal-chip {
  display: flex; align-items: center; gap: 5px; width: 100%;
  font-size: 11.5px; line-height: 1.2; font-weight: 500; color: var(--t1);
  padding: 3px 7px; border-radius: var(--r-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--apt-col, var(--op1)) 16%, var(--card));
}
.cal-chip::before { content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--apt-col, var(--op1)); flex-shrink: 0; }
.cal-chip b { font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums; }
.cal-more { font-size: var(--fs-xs); color: var(--t3); font-weight: 600; padding: 2px 7px; }
/* I PALLINI (1.56.1): uno per appuntamento, del colore del bollino della
   cliente; senza bollino bianco col contorno nero sottile, stessa misura.
   Su ogni schermo: niente piu' orario e nome dentro la cella. */
.cal-dots { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.cal-dots .cal-dot, .cal-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; box-sizing: border-box; }
.cal-dot.b-verde  { background: #2ECC8F; }
.cal-dot.b-giallo { background: #f59e0b; }
.cal-dot.b-rosso  { background: #ef4444; }
.cal-dot.b-nero   { background: #1a1a1a; }
.cal-dot.b-nessuno { background: #fff; border: 1px solid #1a1a1a; }
/* In scuro il nero sul fondo scuro spariva: un filo chiaro intorno. */
:root[data-theme="dark"] .cal-dot.b-nero { box-shadow: 0 0 0 1px rgba(255,255,255,.55); }

/* QUANTO E' PIENA LA GIORNATA: il colore della cella. C'era dalla prima
   versione (disp-alta/media/piena, calcolato in renderMeseInGriglia sugli
   orari dell'operatrice), ma col restyling tutte le celle erano diventate
   bianche e non si vedeva piu'. Tinte leggere, che non coprono i pallini;
   il giorno senza appuntamenti resta bianco (tutto libero). */
.calendario-grid .cal-cella.disp-alta,  .cal-leg-cella.disp-alta  { background: color-mix(in srgb, #2ECC8F 17%, var(--card)); }
.calendario-grid .cal-cella.disp-media, .cal-leg-cella.disp-media { background: color-mix(in srgb, #F0A24B 24%, var(--card)); }
.calendario-grid .cal-cella.disp-piena, .cal-leg-cella.disp-piena { background: color-mix(in srgb, #F06B70 24%, var(--card)); }
.calendario-grid .cal-cella.disp-alta:hover  { background: color-mix(in srgb, #2ECC8F 25%, var(--card)); }
.calendario-grid .cal-cella.disp-media:hover { background: color-mix(in srgb, #F0A24B 32%, var(--card)); }
.calendario-grid .cal-cella.disp-piena:hover { background: color-mix(in srgb, #F06B70 32%, var(--card)); }
.cal-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 12px; color: var(--t3); }
.cal-leg-voce { display: inline-flex; align-items: center; gap: 6px; }
.cal-leg-voce .cal-dot { margin-right: -2px; }
.cal-leg-voce .cal-dot:last-of-type { margin-right: 4px; }
.cal-leg-cella { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--bordo); display: inline-block; flex: none; }
.cal-leg-sep { width: 1px; height: 14px; background: var(--bordo); }
.cal-festivo-nome { color: var(--cancellato-t); }
@media (max-width: 768px) {
  .vista-calendario-corpo { padding: 12px 12px 130px; }
  .calendario-mese { font-size: var(--fs-xl); }
  .calendario-grid { border-radius: 12px; }
  .cal-giorno-header { padding: 8px 6px; text-align: center; }
  .cal-cella, .cal-cella.disp-alta, .cal-cella.disp-media, .cal-cella.disp-piena, .cal-cella.disp-riposo, .cal-cella.ferie { min-height: 64px; padding: 6px 5px 5px; }
  .cal-chip, .cal-more { display: none; }
  .cal-dots { gap: 3px; }
  .cal-dots .cal-dot { width: 7px; height: 7px; }
}

/* ============================================================================
   RUBRICA CLIENTI
   ============================================================================
   Un'unica card con le righe a filo, come i contatti di un telefono, invece
   di tante card staccate con lo spazio in mezzo. Lettere di separazione per
   cognome, conteggio in testa, avatar neutro con il bollino, WhatsApp a
   destra. Niente scivolamento laterale al passaggio del mouse.             */
.clienti-toolbar { background: var(--sfondo); padding-bottom: 12px; gap: 10px; }
.input-ricerca-clienti {
  border: 1px solid var(--bordo); background: var(--card); color: var(--t1);
  box-shadow: none; height: 40px; padding: 0 16px; font-size: var(--fs-md);
}
.input-ricerca-clienti::placeholder { color: var(--t3); }
.input-ricerca-clienti:focus { border-color: var(--verde-vivo); box-shadow: 0 0 0 3px var(--verde-glow); }
.btn-nuovo-cliente { height: 40px; border-radius: 100px; padding: 0 16px 0 12px; gap: 6px; }
.lista-clienti {
  gap: 0; background: var(--card); border: 1px solid var(--bordo);
  border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden;
}
.rubrica-conteggio {
  padding: 10px 16px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--t3); border-bottom: 1px solid var(--bordo);
}
.rubrica-lettera {
  padding: 8px 16px 4px; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  color: var(--verde-ink); background: var(--card-2); border-bottom: 1px solid var(--bordo-soft);
  position: sticky; top: 0; z-index: 1;
}
.riga-cliente {
  border: 0; border-bottom: 1px solid var(--bordo-soft); border-radius: 0; padding: 11px 16px;
  transition: background var(--t-fast) var(--ease);
}
.riga-cliente:last-child { border-bottom: 0; }
.riga-cliente:hover { transform: none; box-shadow: none; border-color: var(--bordo-soft); background: var(--card-2); }
.riga-cliente.selezionata { background: var(--verde-soft); border-color: var(--bordo-soft); }
.riga-cliente-avatar {
  width: 36px; height: 36px; background: var(--card-2); border: 1px solid var(--bordo); color: var(--t2);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.riga-cliente.selezionata .riga-cliente-avatar { background: var(--verde-vivo); color: #06201A; border-color: transparent; }
.riga-cliente-nome { font-size: var(--fs-md); font-weight: 600; }
.riga-cliente-tel { font-size: var(--fs-sm); color: var(--t3); font-variant-numeric: tabular-nums; }
.riga-cliente-azioni .btn-icona { background: var(--card); border: 1px solid var(--bordo); color: var(--t2); }
.riga-cliente-azioni .btn-icona.wa:hover { background: var(--verde-soft); border-color: var(--verde-vivo); color: var(--verde-ink); }
.bollino-picker { background: var(--card); border: 1px solid var(--bordo); box-shadow: var(--shadow-lg); }
@media (max-width: 768px) {
  .lista-clienti { border-radius: 12px; }
  .riga-cliente { padding: 10px 12px; }
  .rubrica-lettera, .rubrica-conteggio { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================================
   TABELLE CHE DIVENTANO SCHEDE SUL TELEFONO
   ============================================================================
   Una tabella a sei o sette colonne su uno schermo da 390 punti non si legge:
   o si scorre di lato (e la colonna dell'importo resta sempre nascosta), o si
   schiaccia fino a spezzare ogni parola. Sotto i 768px le righe marcate
   .tab-schede diventano schede, come le righe dell'agenda.

   Il markup resta una tabella vera — conta per chi usa un lettore di schermo,
   e su PC non cambia niente. Ogni cella porta il suo ruolo:
     data-ruolo="titolo"   la cosa principale (descrizione, trattamento)
     data-ruolo="importo"  la cifra, in alto a destra accanto al titolo
     data-ruolo="azioni"   matita e cestino, in fondo
     data-label="…"        tutte le altre: l'etichetta la mette il CSS
   L'ordine nella scheda lo decide "order", non l'ordine delle colonne.      */
@media (max-width: 768px) {
  .tab-schede thead { display: none; }
  .tab-schede, .tab-schede tbody { display: block; width: 100%; }
  .tab-schede tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--bordo-soft);
  }
  .tab-schede tr:last-child { border-bottom: 0; }
  .tab-schede tr:hover td { background: transparent; }
  .tab-schede td {
    display: block; border: 0 !important; padding: 0 !important;
    background: transparent !important; vertical-align: baseline;
  }
  .tab-schede td[data-ruolo="titolo"]  { order: 1; flex: 1 1 55%; font-size: var(--fs-md) !important; font-weight: 600 !important; color: var(--t1) !important; min-width: 0; }
  .tab-schede td[data-ruolo="importo"] { order: 2; margin-left: auto; font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tab-schede td[data-label] {
    order: 3; flex: 1 1 100%;
    display: flex; align-items: baseline; gap: 8px;
    font-size: var(--fs-sm) !important; color: var(--t2) !important;
    margin-top: 2px;
  }
  .tab-schede td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 82px;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label);
    text-transform: uppercase; color: var(--t3);
  }
  /* Una cella vuota non merita la sua riga: su un elenco lungo, cinque
     "Cliente —" di fila sono cinque righe di niente. Su PC la colonna resta,
     perche' li' la griglia deve rimanere allineata.                         */
  .tab-schede td[data-label]:empty { display: none; }
  .tab-schede td[data-ruolo="azioni"] {
    order: 4; flex: 1 1 100%; display: flex !important; gap: 8px;
    justify-content: flex-end; margin-top: 8px;
  }
  .tab-schede td[data-ruolo="azioni"] .btn { min-width: 42px; min-height: 38px; justify-content: center; }
  /* Il contenitore non deve piu' scorrere di lato: non c'e' piu' niente di
     largo. Serve il selettore con #est-app davanti, altrimenti la regola del
     foglio della contabilita' (che ha un id, quindi pesa di piu') vince.    */
  #est-app .table-wrap:has(.tab-schede),
  #est-app .entrate-table-wrap:has(.tab-schede),
  .table-wrap:has(.tab-schede),
  .entrate-table-wrap:has(.tab-schede) { overflow-x: visible; }
  .tab-schede tr > td { max-width: 100%; }
}

/* ============================================================================
   COMPLEANNI
   ============================================================================
   Tre gruppi (oggi / questa settimana / questo mese), ognuno una card con le
   righe a filo. La riga di oggi ha le azioni: WhatsApp e "fatti di persona".
   Le future hanno la data grande a sinistra, come un'agenda cartacea.       */
.cpl-corpo { flex: 1; overflow-y: auto; padding: 20px 20px 120px; }
.cpl-pagina { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
/* I tre riquadri (oggi, settimana, mese) stanno dentro #cpl-body e non
   ricevevano lo spazio della colonna: erano attaccati uno all'altro. */
#cpl-body { display: flex; flex-direction: column; gap: 12px; }
/* PROMEMORIA SU UNA COLONNA SOLA (1.56.1): i compleanni erano centrati e
   larghi 640px, gli appuntamenti da avvisare e le clienti da richiamare
   occupavano tutta la larghezza — su tablet e PC tre sezioni con i bordi in
   tre posti diversi. Ora tutte le sezioni stanno nella stessa colonna. */
#vista-promemoria-corpo > * { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
#vista-promemoria-corpo > .cpl-pagina { max-width: 720px; }
.cpl-testa { margin-bottom: 2px; }
.cpl-h1 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.5px; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--t1); }
.cpl-h1 .ic { width: 22px; height: 22px; }
.cpl-sotto { font-size: var(--fs-sm); color: var(--t3); margin-top: 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cpl-sotto .ic { width: 14px; height: 14px; }
.cpl-gruppo { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.cpl-titolo { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--t3); border-bottom: 1px solid var(--bordo); }
.cpl-conta { background: var(--verde-soft); color: var(--verde-ink); border-radius: 100px; padding: 1px 8px; font-size: var(--fs-xs); letter-spacing: 0; }
.cpl-vuoto { padding: 16px; font-size: var(--fs-sm); color: var(--t3); }
.cpl-riga { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--bordo-soft); }
.cpl-riga:last-child { border-bottom: 0; }
.cpl-oggi { background: var(--verde-soft); }
.cpl-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--verde-vivo); color: #06201A; font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.cpl-data { width: 44px; text-align: center; flex-shrink: 0; line-height: 1; }
.cpl-data b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }
.cpl-data span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); margin-top: 2px; }
.cpl-info { flex: 1; min-width: 0; }
.cpl-nome { font-weight: 600; font-size: var(--fs-md); color: var(--t1); display: flex; align-items: center; gap: 6px; }
.cpl-sub { font-size: var(--fs-sm); color: var(--t3); margin-top: 1px; }
.cpl-quando { font-size: var(--fs-sm); color: var(--t3); white-space: nowrap; }
.cpl-azioni { display: flex; gap: 6px; flex-shrink: 0; }
.cpl-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 100px; border: 1px solid transparent; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.cpl-btn svg { flex-shrink: 0; }
/* (R1) via .cpl-btn-wa e il suo :hover: «Manda gli auguri» e' il tasto WhatsApp unico */
.cpl-btn-ghost { background: var(--card); color: var(--t2); border-color: var(--bordo); }
.cpl-btn-ghost:hover { border-color: var(--t3); color: var(--t1); }
.cpl-fatto { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; color: var(--verde-ink); background: var(--card); border: 1px solid var(--bordo); border-radius: 100px; padding: 5px 10px; white-space: nowrap; }
.cpl-nota { font-size: var(--fs-sm); color: var(--t3); line-height: 1.55; padding: 4px 6px; }
.cpl-nota b { color: var(--t2); font-weight: 600; }
@media (max-width: 768px) {
  .cpl-corpo { padding: 12px 12px 130px; }
  .cpl-riga { flex-wrap: wrap; padding: 10px 12px; }
  .cpl-azioni { width: 100%; justify-content: flex-end; }
}

/* ============================================================================
   STATISTICHE e IMPOSTAZIONI — ritocchi sui token
   ============================================================================ */
.stat-periodo-btn { background: var(--card); border: 1px solid var(--bordo); color: var(--t2); font-family: var(--font); }
.stat-periodo-btn.attivo { background: var(--t1); color: var(--card); border-color: var(--t1); }
.stat-kpi-card { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.stat-kpi-label { font-size: var(--fs-xs); letter-spacing: var(--tracking-label); color: var(--t3); }
.stat-kpi-value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.stat-kpi-sub { color: var(--t3); font-size: var(--fs-sm); }
.stat-bar-track { background: var(--card-2); border: 1px solid var(--bordo-soft); }
.stat-bar-val { color: var(--t2); font-variant-numeric: tabular-nums; }
#stat-filtro-operatore { background: var(--card) !important; border: 1px solid var(--bordo) !important; color: var(--t1) !important; font-family: var(--font) !important; }
.card-impostazioni { border: 1px solid var(--bordo); box-shadow: var(--shadow-sm); }
.card-impostazioni:hover { box-shadow: var(--shadow-sm); }
.impostazioni-titolo { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.2px; }
.impo-tabs { box-shadow: none; }
.impo-tab.attivo { box-shadow: none; }
.riga-impo:hover { border-color: var(--t3); }

/* ── il pannello dei dettagli a destra ── */
.colonna-dettagli { background: var(--card); border-left: 1px solid var(--bordo); }
.dettagli-header { padding: 22px 22px 14px; border-bottom: 1px solid var(--bordo-soft); }
.dettagli-cliente-nome { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.6px; color: var(--t1); }
.dettagli-sezione { padding: 16px 22px; border-bottom: 1px solid var(--bordo-soft); }
.det-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--t3); }
.det-riga { font-size: var(--fs-md); color: var(--t1); display: flex; align-items: center; gap: var(--s-2); }
.det-riga > span:first-child { display: inline-flex; color: var(--t3); flex-shrink: 0; }
.det-riga > span:first-child svg { display: block; }
.dettagli-header > span, .dettagli-header .tel { display: inline-flex; align-items: center; gap: 6px; }
.btn-dettaglio svg { flex-shrink: 0; }
.dettagli-vuoti { color: var(--t3); font-size: var(--fs-md); }
.dettagli-azioni { padding: 16px 22px; gap: var(--s-2); }

/* ── LE PILLOLE SCRITTE A MANO DENTRO IL JAVASCRIPT ──────────────────
   In giro per l'app ci sono etichette a pillola — "Buono Regalo",
   "durata reale", "Titolare", "12% No-Show" — costruite nel JavaScript con
   lo stile scritto dentro il tag: fondo colorato, padding e angoli tondi,
   ma nessun `display`. Uno span normale va a capo dove capita, quindi su
   uno schermo stretto la pillola si spezza a meta': meta' in fondo a una
   riga, meta' all'inizio di quella dopo, con gli angoli tondi nel mezzo.
   Si vedeva in Redditivita' sul telefono, ed e' il difetto grafico che il
   committente aveva notato.

   `inline-block` le tiene intere. Non ci metto `nowrap`: una di queste
   pillole contiene le note del cliente, che sono lunghe e devono poter
   andare a capo — dentro la pillola, pero', non spaccandola.

   DEBITO DICHIARATO: il selettore guarda l'attributo `style`, che e' un
   ripiego. La cura vera e' togliere quegli stili dal JavaScript e dargli
   una classe (`.pillola`); sono 18 punti fra finanze.js e agenda.js e si
   fanno quando si passa di li'. Questa riga intanto li copre tutti.     */
.app-shell span[style*="border-radius"][style*="padding"] { display: inline-block; }

/* (1.80) Categorie di spesa suggerite dai servizi (Impostazioni → Contabilità) */
.cat-sug { border: 1px dashed rgba(46,204,143,.55); background: rgba(46,204,143,.06); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 16px; }
.cat-sug-tit { font-weight: 800; font-size: 13.5px; color: var(--t1); margin-bottom: 4px; }
.cat-sug-intro { font-size: 12px; color: var(--t2); line-height: 1.5; margin: 0 0 10px; }
.cat-sug-voce { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid rgba(0,0,0,.06); }
.cat-sug-testo { flex: 1 1 220px; min-width: 0; }
.cat-sug-nome { font-weight: 700; font-size: 13.5px; color: var(--t1); }
.cat-sug-c { font-size: 11px; font-weight: 600; color: var(--t3); }
.cat-sug-dett { font-size: 12px; color: var(--t2); line-height: 1.45; overflow-wrap: anywhere; margin-top: 2px; }
.cat-sug-az { display: flex; gap: 6px; flex: 0 0 auto; }
.cat-sug-az .btn-top { padding: 5px 11px; font-size: 12px; }
.cat-sug-az .btn-top.cat-sug-si { background: var(--verde-vivo, #2ecc8f); border-color: transparent; color: #fff; font-weight: 700; }

/* ── (1.85) Categorie di spesa e linee di costo ───────────────────────────
   I tre modi spiegati, le linee separate dalle spese comuni, i servizi per
   gruppo, la creazione di una linea. Solo aspetto: i dati sono quelli di
   sempre (categoria + servizi collegati). */
.modi-spesa { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 16px; }
.modi-spesa > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sfondo); border: 1px solid var(--bordo); }
.modi-spesa b { font-size: 13px; color: var(--t1); }
.modi-spesa span { font-size: 12px; line-height: 1.45; color: var(--t2); }
.impo-gruppo-tit { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.impo-gruppo-tit small { font-size: 11px; font-weight: 700; color: var(--t3); letter-spacing: 0; }
.impo-vuoto { padding: 10px 12px; border: 1px dashed var(--bordo); border-radius: var(--r-sm); font-size: 12.5px; color: var(--t2); }
.linea-tipo { display: inline-block; padding: 1px 8px; border-radius: 100px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.linea-tipo.materiale { background: rgba(201,168,76,.16); color: var(--attesa-t, #8a6510); }
.linea-tipo.macchinario { background: rgba(91,140,245,.14); color: #3559b8; }
[data-theme="dark"] .linea-tipo.macchinario { color: #9db8ff; }
.cat-impo { border: 1px solid var(--bordo); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.cat-impo.linea { border-color: rgba(37,99,235,.3); }
.cat-impo-tasse { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--t2); cursor: pointer; }
.cat-impo-tasse input { accent-color: var(--verde-vivo); }
.cat-impo-nome { font-weight: 700; font-size: 14.5px; color: var(--t1); overflow-wrap: anywhere; }
.cat-impo-conto { font-size: 11px; font-weight: 700; background: var(--completato-bg); color: var(--completato-t); padding: 2px 7px; border-radius: 12px; }
.cat-impo-box { background: var(--sfondo); border-radius: var(--r-sm); padding: 10px 12px; }
.cat-impo-spiega { font-size: 12px; color: var(--t2); line-height: 1.45; }
.cat-impo-spiega b { color: var(--verde-ink); }
.cat-impo-azione, .cat-impo-mini { padding: 3px 9px !important; font-size: 11px !important; font-weight: 700; }
.cat-impo-eti { font-size: 11px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .5px; }
.cat-impo-avviso { background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.32); border-radius: var(--r-sm); padding: 9px 11px; margin-bottom: 9px; font-size: 11.5px; line-height: 1.55; color: var(--attesa-t); }
.dist-fam + .dist-fam { margin-top: 8px; }
.dist-fam-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: 11.5px; font-weight: 800; color: var(--t2); }
.dist-fam-testa button { padding: 2px 9px; border: 1px solid var(--bordo); border-radius: 100px; background: var(--card); color: var(--verde-ink); font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.dist-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dist-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 9px; border: 1px solid var(--bordo); border-radius: 7px; background: var(--card); font-size: 12px; font-weight: 600; color: var(--t2); cursor: pointer; overflow-wrap: anywhere; }
.dist-chip input { accent-color: var(--verde-vivo); flex-shrink: 0; }
.dist-chip.on { background: rgba(46,204,143,.12); border-color: var(--verde-vivo); color: var(--verde-ink); }
.linea-crea { border: 1px solid var(--bordo); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 6px; background: var(--card); }
.linea-crea-tit { font-weight: 800; font-size: 13.5px; color: var(--t1); margin-bottom: 8px; }
.linea-crea-riga { display: flex; gap: 8px; }
.linea-crea-riga .input-form { margin: 0; flex: 1 1 auto; min-width: 0; }
.linea-crea-riga .btn-salva { width: auto; padding: 0 18px; margin: 0; white-space: nowrap; }
.linea-crea-aiuto { font-size: 12px; color: var(--t3); margin-top: 8px; }
.linea-crea-conto { font-size: 12.5px; font-weight: 700; color: var(--verde-ink); margin: 10px 0 8px; }
/* (1.86) Il controllo delle linee: servizi simili trattati in modo diverso */
.linee-ok { font-size: 12.5px; font-weight: 700; color: var(--verde-ink); background: rgba(46,204,143,.08); border: 1px solid rgba(46,204,143,.35); border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 16px; }
.linee-ctrl { border: 1px solid rgba(238,143,60,.55); background: rgba(238,143,60,.07); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 16px; }
.linee-ctrl-tit { font-weight: 800; font-size: 13.5px; color: var(--t1); margin-bottom: 4px; }
.linee-ctrl-tit small { font-weight: 700; color: var(--t3); margin-left: 4px; }
.linee-ctrl-intro { font-size: 12px; color: var(--t2); line-height: 1.5; margin: 0 0 6px; }
.linee-ctrl-voce { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid rgba(0,0,0,.06); }
.linee-ctrl-testo { flex: 1 1 240px; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--t2); overflow-wrap: anywhere; }
.linee-ctrl-testo b { color: var(--t1); }
.linee-ctrl-az { display: flex; gap: 6px; flex-wrap: wrap; }
.linee-ctrl-az .btn-top { padding: 5px 11px; font-size: 12px; }
.linee-ctrl-az .btn-top.cat-sug-si { background: var(--verde-vivo, #2ecc8f); border-color: transparent; color: #fff; font-weight: 700; }
/* (1.87) le aree vecchie, divise nelle linee: tengono solo le spese di prima */
.linea-tipo.vecchia { background: rgba(0,0,0,.06); color: var(--t3); }
[data-theme="dark"] .linea-tipo.vecchia { background: rgba(255,255,255,.08); }
.cat-impo.vecchia { opacity: .85; }
.cat-vecchia-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cat-vecchia-spiega { font-size: 12px; line-height: 1.5; color: var(--t2); overflow-wrap: anywhere; }
/* (1.86.2) le spese vecchie della merce da rivendere */
.riv-vecchie .linee-ctrl-az { margin-top: 4px; }
.riv-spostate { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: 12px; line-height: 1.45; color: var(--t2); padding: 8px 12px; border: 1px solid var(--bordo); border-radius: var(--r-sm); margin-bottom: 16px; }
.riv-spostate .btn-top { padding: 4px 10px; font-size: 11.5px; }

/* ============================================================================
   (1.95) TUTTE LE AGENDE INSIEME — la panoramica (renderPanoramica in agenda.js)
   ============================================================================
   Una griglia: la prima colonna le ore, poi una colonna per operatrice, con la
   stessa scala della giornata (80 px l'ora). Il riquadro scorre in tutte e due
   le direzioni; i nomi restano in cima e le ore a sinistra (sticky). Sul
   telefono due colonne per schermata, le altre scorrendo di lato.
   Chi riposa senza appuntamenti ha una colonna stretta a righe.            */
#vista-oggi.in-panoramica .colonna-dettagli { display: none !important; }
.pano-wrap {
  --pano-ore: 46px; --pano-min: 124px; --pano-stretta: 46px;
  flex: 1; min-height: 0; overflow: auto; position: relative;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--card);
  scrollbar-width: thin; scrollbar-color: var(--bordo) transparent;
}
@media (max-width: 699px) {
  .pano-wrap {
    --pano-ore: 40px;
    --pano-min: calc((100vw - var(--pano-ore)) / 2);
    scroll-snap-type: x proximity; scroll-padding-left: var(--pano-ore);
  }
  @supports (width: 1cqw) {
    .pano-wrap { container-type: inline-size; --pano-min: calc((100cqw - var(--pano-ore)) / 2); }
  }
  .pano-testa, .pano-col { scroll-snap-align: start; }
  .pano-orario { display: none; }
}
.pano-griglia { display: grid; grid-template-rows: auto auto; padding-bottom: 110px; }
.pano-griglia > * { min-width: 0; }
.pano-angolo {
  position: sticky; top: 0; left: 0; z-index: 6;
  background: var(--card); border-bottom: 1px solid var(--bordo);
}
.pano-testa {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 8px 8px 10px; margin: 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--t1);
  background: var(--card); border: 0; border-left: 1px solid var(--bordo-soft); border-bottom: 1px solid var(--bordo);
  border-radius: 0; box-shadow: none;
}
.pano-testa:hover { background: var(--card-2); }
.pano-testa.stretta { justify-content: center; padding: 8px 0; }
.pano-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12.5px; text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pano-testa.stretta .pano-avatar { opacity: .55; }
.pano-testa-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pano-nome { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pano-stato { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pano-ore { position: sticky; left: 0; z-index: 4; background: var(--card); border-right: 1px solid var(--bordo-soft); }
.pano-ora {
  height: 80px; box-sizing: border-box; padding: 3px 6px 0 0; text-align: right;
  font-size: var(--fs-xs); font-weight: 600; color: var(--t3); font-variant-numeric: tabular-nums;
}
.pano-col {
  position: relative; min-width: 0;
  border-left: 1px solid var(--bordo-soft);
  background-image:
    linear-gradient(to bottom, var(--bordo-soft) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--bordo-soft) 45%, transparent) 1px, transparent 1px);
  background-size: 100% 80px, 100% 40px;
}
@media (hover: hover) { .pano-col:not(.chiusa) { cursor: pointer; } }
.pano-col.stretta, .pano-col.chiusa, .pano-fuori {
  background-color: transparent;
}
.pano-col.stretta {
  background-image: repeating-linear-gradient(-45deg, var(--weekend) 0 6px, transparent 6px 12px);
  background-size: auto;
}
.pano-fuori {
  position: absolute; left: 0; right: 0; z-index: 1;
  background-image: repeating-linear-gradient(-45deg, var(--weekend) 0 6px, transparent 6px 12px);
}
.pano-pausa {
  position: absolute; left: 0; right: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--weekend);
  border-top: 1px dashed var(--bordo); border-bottom: 1px dashed var(--bordo);
  color: var(--t3); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.pano-apt {
  position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden; cursor: pointer;
  padding: 3px 6px 3px 7px;
  background: color-mix(in srgb, var(--apt-col, var(--op1)) 14%, var(--card));
  border-left: 3px solid var(--apt-col, var(--op1)); border-radius: var(--r-sm);
  color: var(--t1); font-size: 12px; line-height: 1.3;
  transition: box-shadow var(--t-fast) var(--ease);
}
.pano-apt:hover { box-shadow: var(--shadow-sm); z-index: 3; }
.pano-apt.selezionata { outline: 2px solid var(--verde-vivo); outline-offset: 1px; z-index: 3; }
.pano-apt.fatto { opacity: .55; }
.pano-apt-riga { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pano-apt-riga b { font-weight: 700; color: var(--t2); font-variant-numeric: tabular-nums; margin-right: 2px; }
.pano-apt-trat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--t2); }
.pano-adesso { position: absolute; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none; background: var(--cancellato); }
/* La voce nella lista delle agende, nello screensaver e in alto */
.op-avatar-tutte { background: transparent !important; border: 1.5px dashed currentColor; color: inherit; text-shadow: none; box-sizing: border-box; }
.op-sidebar-item.op-tutte .op-avatar-tutte { color: var(--sidebar-titolo); }
.topbar-op-avatar.tutte { background: var(--card-2); color: var(--t1); border: 1.5px dashed var(--bordo); text-shadow: none; box-sizing: border-box; }
.ss-card.ss-tutte { background: #243029; min-height: 64px; }
.ss-card.ss-tutte .ss-nome { display: flex; align-items: center; gap: 12px; font-size: clamp(18px, 3vw, 28px); letter-spacing: -.3px; padding: 14px; }
/* Il + dalla panoramica: prima l'operatrice, poi i suoi trattamenti */
.trat-scegli-prima { padding: 14px; border: 1.5px dashed var(--bordo); border-radius: 12px; color: var(--t2); font-size: 13px; line-height: 1.45; text-align: center; }
/* (1.98.1) Avviso: in un'altra scheda e' entrato un altro account (index.html, onAuthStateChanged; agenda.js avvisoCambioAccount) */
#modal-cambio-account { z-index: 1100; }               /* sopra la schermata operatrici (1000), sotto il PIN (9500) */
.cambio-account-box { max-width: 420px; }
.cambio-account-corpo { padding: 20px 24px 24px; }
.cambio-account-testo { font-size: 13.5px; line-height: 1.6; color: var(--t2); margin: 0 0 12px; }
.cambio-account-testo b { color: var(--t1); overflow-wrap: anywhere; }
.cambio-account-corpo .btn-salva { width: 100%; margin-top: 4px; }

/* ============================================================================
   (giro grafica R0) GIRO GRAFICA — R0
   ============================================================================ */
/* «giorno passato» nella scheda di una richiesta (portale.js, §4.5) */
.rich-passato { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--t2); }
/* Il toast arancione col tema scuro: il fondo e' --attesa-t (arancione chiaro) e il testo bianco non si leggeva
   (1,58:1). Era corretto solo per i toast delle cabine (cabine.css). Vale per tutti, anche quelli di prima. */
:root[data-theme="dark"] #toast-container .toast.arancio { color: var(--sfondo); }

/* ============================================================================
   (1.101.0) GIRO PIGNOLO — R0b (le cure di _prove_banco/giro_pignolo_soluzioni.md)
   ============================================================================ */
/* AG01 — la riga sotto Data e Ora del Nuovo appuntamento (agenda.js notaOrarioAuto): «Il primo posto libero da 70
   minuti», oppure (.piena) perche' il posto non c'e'. Si vede solo mentre l'ora la propone l'app
   (data-ora-auto="1" sul modulo): appena lei sceglie l'ora sparisce da sola. */
.nota-orario-auto { margin: -10px 0 16px; font-size: 12.5px; line-height: 1.45; color: var(--t2); }
.nota-orario-auto.piena { color: var(--attesa-t); font-weight: 600; }
.nota-orario-auto:empty, #modal-nuovo:not([data-ora-auto="1"]) .nota-orario-auto { display: none; }
/* K6 / CL01 — sotto gli 8 suggerimenti del Nuovo appuntamento: quante altre clienti corrispondono */
.suggerito-altre { padding: 10px 16px; font-size: 12px; line-height: 1.4; color: var(--t2); cursor: default; }
/* CL02 — la pagina Promemoria: il giorno (prima scritto nel tag), e con tutte le agende l'operatrice dentro il
   giorno (pallino del suo colore, nome, quante); il titolo di «Già inviati» col numero */
.prm-giorno { font-size: 12px; font-weight: 800; color: var(--t2); text-transform: uppercase; letter-spacing: .5px; padding: 14px 2px 6px; }
.prm-giorno.oggi { color: var(--cancellato-t); }   /* prima #dc2626 nel tag: 4,39:1 in chiaro e 3,8:1 in scuro; il token ha il tema scuro */
.prm-op { font-size: 13px; font-weight: 700; color: var(--t1); padding: 6px 2px 2px; overflow-wrap: anywhere; }
.prm-op-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--verde)); margin-right: 7px; vertical-align: 0; }
/* (collaudo R0b) il grigio dei testi secondari e non quello chiaro (2,75:1; la regola di R0: niente grigio chiaro nelle righe nuove). Prima era scritto nel tag */
.prm-inviati-titolo { font-size: 11px; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: .6px; padding: 16px 2px 4px; }
/* RI01 — la scheda di una richiesta del portale (portale.js schedaRichiesta). Gli orari: tasti da dito (prima 32 px
   scritti nel tag, a 6 px l'uno dall'altro), 8 px fra l'uno e l'altro coi margini e non col gap (che i flex non hanno
   su Safari prima della 14.1). Il tocco SCEGLIE: l'orario scelto e' pieno (.on) e sotto c'e' il riepilogo. */
.rich-ore { display: flex; flex-wrap: wrap; }
.rich-ora { min-height: var(--tocco); min-width: 64px; margin: 0 8px 8px 0; padding: 0 12px; border: 1px solid rgba(46,204,143,.35);
  border-radius: 10px; background: rgba(46,204,143,.08); color: var(--verde-ink); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.rich-ora.on { border-color: var(--verde-vivo); background: var(--verde-vivo); color: #0B1A12; }
.rich-ora.altri { border-style: dashed; border-color: var(--bordo); background: transparent; color: var(--t2); font-size: 13px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .rich-ora:hover { border-color: var(--verde-vivo); } }
/* il riepilogo dell'orario scelto, in fondo alla scheda: «Conferma e scrivile» / «Cambia». scroll-margin: portato in
   vista dopo il tocco, resta sopra la barra in basso del telefono. .persa = nel frattempo non e' piu' libero */
.rich-riep { margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--verde-vivo); border-radius: 12px; background: var(--verde-soft);
  scroll-margin-top: 16px; scroll-margin-bottom: 96px; }
.rich-riep.persa { border-color: var(--attesa); background: var(--attesa-bg); }
.rich-riep .rich-scelta-eti { color: var(--t2); }   /* --t3 sul verde tenue: 2,69:1; --t2: 5:1 */
.rich-riep-testo { font-size: 14px; line-height: 1.45; color: var(--t1); overflow-wrap: anywhere; }
.rich-riep-testo b { font-weight: 700; }
.rich-riep.persa .rich-riep-testo { color: var(--attesa-t); font-weight: 600; }
/* i tasti in fondo alla scheda (prima scritti nel tag, alti 36 px) e quelli del riepilogo e della domanda */
.rich-azioni { display: flex; flex-wrap: wrap; margin: 12px 0 -8px; }
.rich-tasti { display: flex; flex-wrap: wrap; margin: 10px 0 -8px; }
.rich-azioni > button, .rich-tasti > button { margin: 0 8px 8px 0; }
.rich-ok { min-height: var(--tocco); padding: 0 18px; border: 0; border-radius: 10px; background: var(--verde-vivo); color: #0B1A12;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rich-ok.scuro { background: var(--bottone-scuro); color: #fff; }
:root[data-theme="dark"] .rich-ok.scuro { background: var(--t1); color: var(--sfondo); }   /* sul fondo marrone il verde scuro spariva */
.rich-no { min-height: var(--tocco); padding: 0 16px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--card); color: var(--t2);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
/* RI02 — la domanda del rifiuto, dentro la scheda al posto dei due tasti (niente finestra, niente confirm()) */
.rich-rif { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--attesa); border-radius: 12px; background: var(--attesa-bg); scroll-margin-bottom: 96px; }
.rich-rif-tit { font-size: 14.5px; font-weight: 700; color: var(--t1); overflow-wrap: anywhere; }
.rich-rif-nota { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--t2); }

/* K2 / TU01 — I TOAST LEGGIBILI IN TUTTI E DUE I TEMI. Prima (agenda.css) il toast senza tipo era var(--t1) con la
   scritta bianca: col tema scuro --t1 e' quasi bianco (1,17:1, «un riquadro bianco vuoto»); 'giallo' non esisteva
   (portale.js, consensi.js, vetrina.js lo usano: cadeva sul senza tipo); verde 2,64, blu 3,23, rosso 3,74 anche col
   chiaro. Un colore per tipo, da token che hanno gia' il tema scuro: scritta bianca sui fondi scuri (chiaro), scura
   sui fondi chiari (scuro). Contrasti: chiaro verde 5,15 · rosso 7,92 · blu 7,33 · arancio/giallo 6,0 · senza tipo
   16,8; scuro fra 9,8 e 12,8 (giro_pignolo_soluzioni.md §11.2). Vince su agenda.css (stesso peso, dopo); le regole
   di cabine.css (.toast.cab-grigio, #toast-container ...) vengono dopo e pesano di piu': restano come sono. */
.toast { background: var(--bottone-scuro); color: #fff; }
.toast.verde { background: var(--confermato-t); }
.toast.rosso { background: var(--cancellato-t); }
.toast.blu { background: var(--completato-t); }
.toast.arancio, .toast.giallo { background: var(--attesa-t); }
:root[data-theme="dark"] .toast.verde, :root[data-theme="dark"] .toast.rosso, :root[data-theme="dark"] .toast.blu,
:root[data-theme="dark"] .toast.arancio, :root[data-theme="dark"] .toast.giallo { color: var(--sfondo); }
/* il tasto «Annulla» del toast (finanze.js showUndoToast): prima bianco con bordo bianco scritto nel tag (2,34:1 e
   26 px: sui fondi chiari del tema scuro spariva). Prende il colore della scritta del suo toast; 44 px. */
.toast .toast-annulla { flex-shrink: 0; margin-left: auto; min-height: var(--tocco); padding: 0 12px; border-radius: 8px; border: 1px solid currentColor;
  background: transparent; color: inherit; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* K5 — la finestra di conferma dell'app (agenda.js chiedi): sopra le altre finestre, sotto quella del PIN (9500).
   Tasto principale a destra (rosso con «pericolo»), secondario a sinistra; 44 px; niente gap nel flex (Safari < 14.1) */
.modal-overlay.chiedi-overlay { z-index: 9000; }
.chiedi-box { max-width: 420px; padding: 24px 22px 18px; }
.chiedi-titolo { font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--t1); margin-bottom: 8px; overflow-wrap: anywhere; }
.chiedi-testo { font-size: 14px; line-height: 1.55; color: var(--t2); margin: 0 0 16px; overflow-wrap: anywhere; }
.chiedi-tasti { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0 0 0 -8px; }
.chiedi-tasti > button { flex: 1 1 auto; margin: 0 0 8px 8px; min-height: var(--tocco); padding: 0 16px; border-radius: 10px;
  font-family: inherit; font-size: 14px; cursor: pointer; }
.chiedi-no { border: 1px solid var(--bordo); background: var(--card); color: var(--t1); font-weight: 600; }
.chiedi-si { border: 0; background: var(--bottone-scuro); color: #fff; font-weight: 700; }
.chiedi-si.pericolo { background: var(--cancellato-t); }
:root[data-theme="dark"] .chiedi-si.pericolo { color: var(--sfondo); }

/* IM18 — nella scheda Account, sopra «Elimina il mio account»: eliminare l'account non disdice l'abbonamento */
.account-avviso-abb { font-size: 12.5px; line-height: 1.5; color: var(--cancellato-t); margin: 0 0 12px; }

/* ── (1.101.0) REVISIONE R0b ── */
/* K5 nel tema scuro: il tasto principale era --bottone-scuro sul riquadro scuro (1,45:1) e quasi uguale al
   secondario; chiaro con la scritta scura, come .rich-ok.scuro. Il rosso del pericolo resta rosso. */
:root[data-theme="dark"] .chiedi-si { background: var(--t1); color: var(--sfondo); }
:root[data-theme="dark"] .chiedi-si.pericolo { background: var(--cancellato-t); color: var(--sfondo); }
/* AG01 — la finestra prima di salvare (#modal-forza-apt): gli stili dei due tasti, prima scritti nel tag. Con «Orario
   già occupato» (.solo-accavallato, agenda.js salvaAppuntamento) il tasto principale, scuro e a destra, e' «Cambia
   orario»; «Salva lo stesso» e' il secondario, col bordo arancione degli avvisi. Ferie, riposo, fuori orario e serie
   come prima (il verde salva comunque). Margini e non gap nel flex (Safari prima della 14.1). */
.forza-apt-tasti { display: flex; margin: 0 -5px; }
.forza-apt-tasti > .btn-salva { flex: 1; margin: 8px 5px 0; }
.btn-salva.forza-apt-no, .btn-salva.forza-apt-no:hover { background: var(--sfondo); color: var(--t2); box-shadow: none; border: 1px solid var(--bordo); }
#modal-forza-apt.solo-accavallato .forza-apt-tasti { flex-direction: row-reverse; }
#modal-forza-apt.solo-accavallato .btn-salva.forza-apt-no,
#modal-forza-apt.solo-accavallato .btn-salva.forza-apt-no:hover { background: var(--bottone-scuro); color: #fff; border: 0; box-shadow: var(--shadow-md); }
:root[data-theme="dark"] #modal-forza-apt.solo-accavallato .btn-salva.forza-apt-no,
:root[data-theme="dark"] #modal-forza-apt.solo-accavallato .btn-salva.forza-apt-no:hover { background: var(--t1); color: var(--sfondo); }
#modal-forza-apt.solo-accavallato .btn-salva.forza-apt-si,
#modal-forza-apt.solo-accavallato .btn-salva.forza-apt-si:hover { background: var(--card); color: var(--attesa-t); border: 1.5px solid var(--attesa); box-shadow: none; }
/* RI02 — la domanda del rifiuto: «Rifiuta senza scriverle» col bordo rosso del pericolo; «Annulla» su una riga sua, a
   sinistra, come link, alto 44 px per il dito (prima uguale e attaccato a «Rifiuta senza scriverle») */
.rich-no.pericolo { border-color: var(--cancellato-t); color: var(--cancellato-t); }
.rich-rif-annulla { margin-top: 8px; }
.rich-link { min-height: var(--tocco); padding: 0 4px; border: 0; background: none; color: var(--t2); font-family: inherit;
  font-size: 13.5px; font-weight: 600; text-decoration: underline; cursor: pointer; }
/* «Già gestite»: la rifiutata col numero e «Scrivile su WhatsApp» */
.rich-fatta-tel { color: var(--t2); white-space: nowrap; }

/* ============================================================================
   (R1) GIRO GRAFICA R1 — IL TASTO WHATSAPP
   ============================================================================
   tastoWA() in agenda.js: uno solo per tutta l'app, sempre col logo vero. Forme:
   pieno / leggero / tondo; con WA_UNA_TINTA (Q1 di Michele: «A: una tinta sola»)
   ogni pieno si disegna leggero. Colori scritti per intero (niente color-mix:
   telefoni vecchi) e niente gap (Chrome prima dell'84): il margine. Contrasti:
   leggero testo 4,7:1, logo 3,9:1; scuro 8,2:1 e 6,4:1; pieno 8,6:1.
   Il passaggio del mouse: #D3F5E0 del contratto dava 4,40:1 al testo (sotto 4,5):
   #DCF8E6 da' 4,57:1 (logo 3,8:1); il bordo piu' scuro lo fa vedere. */
.wa-tasto { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: var(--tocco); padding: 0 16px; border-radius: 100px; border: 1.5px solid transparent;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color var(--t-fast) var(--ease); }
.wa-tasto .wa-logo { flex-shrink: 0; }
.wa-tasto .wa-logo + .wa-testo { margin-left: 8px; }
.wa-pieno   { background: #25D366; color: #06201A; }
.wa-leggero { background: #E5FAED; border-color: #8FDDB0; color: #0E7D52; }
.wa-leggero .wa-logo, .wa-tondo { color: #128C4A; }
.wa-tondo   { width: var(--tocco); padding: 0; background: #E5FAED; border-color: #8FDDB0; flex-shrink: 0; }
.wa-fatto, .wa-fatto.wa-tondo { background: var(--card); border-color: var(--bordo); color: var(--t2); }
.wa-fatto .wa-logo { color: var(--t2); }
.wa-tasto[disabled] { cursor: default; }
.wa-tasto:focus-visible { outline: 2px solid var(--verde-ink); outline-offset: 2px; }
.wa-manca { font-size: var(--fs-sm); color: var(--t2); white-space: nowrap; }
/* largo tutto (dettaglio, scheda, fila, last minute): il testo lungo si accorcia coi puntini, il tasto non sborda */
.wa-largo { display: flex; width: 100%; max-width: 100%; }
.wa-largo .wa-testo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .wa-pieno:hover { background: #3BDD78; } .wa-leggero:hover, .wa-tondo:not([disabled]):hover { background: #DCF8E6; border-color: #5BC48A; } }
:root[data-theme="dark"] .wa-leggero, :root[data-theme="dark"] .wa-tondo { background: #173926; border-color: #2B6B47; color: #7FE3B8; }
:root[data-theme="dark"] .wa-leggero .wa-logo, :root[data-theme="dark"] .wa-tondo .wa-logo { color: #25D366; }
:root[data-theme="dark"] .wa-fatto, :root[data-theme="dark"] .wa-fatto.wa-tondo { background: var(--card); border-color: var(--bordo); color: var(--t2); }
/* senza questa il logo di «Promemoria mandato · manda di nuovo» restava verde nel tema scuro (0-4-0 batteva .wa-fatto .wa-logo) */
:root[data-theme="dark"] .wa-fatto .wa-logo { color: var(--t2); }
@media (prefers-reduced-motion: reduce) { .wa-tasto { transition: none; } }
/* le classi vecchie che restano «in piu'»: .fila-manda stava PRIMA di questo blocco e il suo min-height perdeva
   contro quello di .wa-tasto (stesso peso): l'altezza della fila si dice qui, a peso 0-2-0 */
.wa-tasto.fila-manda { min-height: 50px; }
/* nella scheda della cliente il vecchio .btn-prossimi-scheda dava 18 px sotto: senza, «Compleanno» si attacca */
#modifica-cliente-prossimi .wa-tasto { margin: 0 0 18px; }
/* W19/W20: il logo dentro i tasti che confermano/rifiutano e aprono WhatsApp (Richieste) */
.rich-ok .wa-logo, .rich-scelta-ok .wa-logo { margin-right: 8px; vertical-align: -4px; }
/* W13: la riga sotto il telefono della richiesta */
.rich-nota-wa { font-size: var(--fs-sm); color: var(--t2); margin-top: 4px; }
/* CL05: sotto «Manda in fila» */
.fila-spiega { margin-top: 6px; font-size: var(--fs-sm); color: var(--t2); line-height: 1.4; }
/* W14: «Manda i last minute» (Impostazioni > Portale), prima margin-top scritto nel tag */
.lm-condividi { margin-top: 12px; }

/* ============================================================================
   (R1) GIRO GRAFICA R1 — LA TENDINA
   ============================================================================
   tendina() in agenda.js: un <details> vero. L'aspetto e' quello di .cpl-gruppo +
   .cpl-titolo. Nel <summary> niente flex (Safari vecchi): il flex sta sullo span. */
.tendina { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.tendina-testa { display: block; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tendina-testa::-webkit-details-marker { display: none; }
.tendina-riga { display: flex; align-items: center; min-height: var(--tocco); padding: 0 16px; box-sizing: border-box; }
.tendina-titolo { flex: none; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--t2); }
.tendina-conta { flex: none; margin-left: 8px; background: var(--verde-soft); color: var(--verde-ink); border-radius: 100px; padding: 1px 8px; font-size: var(--fs-xs); font-weight: 700; }
.tendina-anteprima { flex: 1 1 auto; min-width: 0; margin-left: 12px; text-align: right; font-size: var(--fs-sm); font-weight: 500; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tendina-freccia { flex: none; margin-left: auto; padding-left: 8px; display: flex; color: var(--t2); }
.tendina-anteprima + .tendina-freccia { margin-left: 0; }
.tendina-freccia svg { transition: transform var(--t-fast) var(--ease); }
.tendina[open] > .tendina-testa { border-bottom: 1px solid var(--bordo); }
.tendina[open] > .tendina-testa .tendina-anteprima { visibility: hidden; }
.tendina[open] > .tendina-testa .tendina-freccia svg { transform: rotate(90deg); }
.tendina-testa:focus-visible { outline: 2px solid var(--verde-ink); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .tendina-freccia svg { transition: none; } }

/* ============================================================================
   (R1) GIRO GRAFICA R1 — COMPLEANNI
   ============================================================================ */
/* CL17: «compie 56 anni» non va a capo lasciando «anni» da solo */
.cpl-eta { white-space: nowrap; }
/* i due tasti di «Oggi» vanno a capo coi margini (il gap dei flex non c'e' sui telefoni vecchi) */
.cpl-azioni { flex-wrap: wrap; gap: 0; }
.cpl-azioni > * { margin-top: 6px; }
.cpl-azioni > * + * { margin-left: 6px; }
@media (max-width: 768px) { .cpl-btn { height: auto; min-height: var(--tocco); } }

/* ============================================================================
   (R1) GIRO GRAFICA R1 — IL + SOLO DOVE SI PRENOTA
   ============================================================================
   Il «+» apre «Nuovo appuntamento»: c'e' solo dove si prenota (Agenda e Mese). Fuori copriva la ✕ delle clienti da
   richiamare, gli avvisi e «Aggiungi operatore», e in Rubrica/Magazzino faceva un'altra cosa del «+» della pagina.
   Niente :has() (telefoni vecchi): body[data-vista] lo scrive _eseguiCambiaVista; senza attributo = l'avvio, cioe'
   l'Agenda (index.html non si tocca). */
.fab { display: none; }
body:not([data-vista]) .fab, body[data-vista="oggi"] .fab, body[data-vista="calendario"] .fab { display: flex; }
/* gli avvisi stanno sopra il «+» quando il «+» c'e' (telefono): 62 barra + 14 + 46 «+» + 10 */
@media (max-width: 768px) {
  body:not([data-vista]) .toast-container, body[data-vista="oggi"] .toast-container, body[data-vista="calendario"] .toast-container {
    bottom: calc(62px + 14px + 46px + 10px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================================
   (R1) GIRO GRAFICA R1 — PROMEMORIA
   ============================================================================ */
/* CL04: il giorno accanto al nome in «Già inviati» (prima scritto nel tag, col grigio chiaro) */
.prm-inviato-quando { font-size: 11px; font-weight: 600; color: var(--t2); }
/* CL07: «Segna come non mandato» nel dettaglio (prima scritto nel tag, grigio chiaro, 12 px di testo e basta).
   gap 0 + margine: lo stesso spazio di 6 px di prima fra la ✕ e le parole (.btn-dettaglio ha gap 8) */
.btn-dettaglio.det-segna-non { display: flex; align-items: center; justify-content: center; min-height: var(--tocco); font-size: 12px; color: var(--t2); gap: 0; }
.det-segna-non svg { margin-right: 6px; }
/* CL08: gli orari delle card in colonna (centrati non stavano in fila: le cifre non sono tutte larghe uguali) */
.card-promemoria-orario { text-align: left; }
/* (R1, collaudo 08/10) Nel dettaglio «Promemoria mandato · manda di nuovo» si leggeva tagliato («… manda di …»: il
   tasto e' largo 302 px a 390 e 293 nella colonna a 1440). Li' il testo va su due righe e «manda di nuovo» (.wa-intero)
   resta intero sulla seconda; su una riga sola il tasto resta alto 44 come prima. */
.dettagli-azioni .wa-largo { padding-top: 6px; padding-bottom: 6px; }
.dettagli-azioni .wa-largo .wa-testo { white-space: normal; text-align: center; }
.wa-testo .wa-intero { white-space: nowrap; }
/* (R1, collaudo 08/10) L'avviso «Promemoria a … segnato come mandato · Annulla» (10 s) sta sopra le card. Sul telefono
   il contenitore degli avvisi e' largo tutto lo schermo (app-shell.css) e prendeva i tocchi anche dove l'avviso non
   c'e': il tondo WhatsApp che spuntava accanto non rispondeva. Il contenitore lascia passare i tocchi, l'avviso no
   (vale per tutti gli avvisi: fuori dall'avviso il tocco arriva a quello che c'e' sotto). */
.toast-container { pointer-events: none; }
.toast-container .toast { pointer-events: auto; }
/* e nel Promemoria (telefono) l'avviso sta a sinistra e lascia libera la colonna dei tondi (a destra, 44 px + 43 px
   dal bordo): prima «Annulla» copriva un pezzo del tondo della card sotto e un tocco un po' storto annullava il
   promemoria appena segnato */
@media (max-width: 768px) { body[data-vista="promemoria"] .toast-container { right: 92px; align-items: flex-start; } }

/* ============================================================================
   (R1) GIRO GRAFICA R1 — RUBRICA
   ============================================================================ */
/* CL12: il numero su una riga anche con la nota accanto (a 360/390 andava a capo) */
.riga-cliente-tel { display: flex; align-items: center; min-width: 0; }
.riga-cliente-tel .tel { flex: none; white-space: nowrap; }
/* la nota si accorcia coi puntini (voluto: la nota intera e' nella scheda) */
.riga-cliente-nota { flex: 0 1 auto; min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; background: var(--sfondo); border-radius: 4px; padding: 1px 6px; color: var(--t2); }

/* ============================================================================
   (R1) GIRO GRAFICA R1 — NON INCASSARE
   ============================================================================
   I due «Non incassare» (Contabilita' > mese e Chiusura cassa) erano pillole vuote: l'icona e grandi quanto un dito.
   #est-app .btn-non-incassare batte #est-app .btn-sm (finanze.css) e #est-app .btn-ghost (qui sopra): stesso peso,
   viene dopo. La Chiusura sta in #chiusura-overlay, fuori da #est-app: per lei la classe semplice. */
.btn-non-incassare, #est-app .btn-non-incassare { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 36px; min-height: 32px; padding: 0 8px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--card); color: var(--t2); cursor: pointer; }
@media (pointer: coarse) { .btn-non-incassare, #est-app .btn-non-incassare { min-width: var(--tocco); min-height: var(--tocco); } }

/* ============================================================================
   (R1) GIRO GRAFICA R1 — IL LOGO IN ALTRO
   ============================================================================
   Solo se LOGO_IN_ALTRO (agenda.js) e' true: oggi e' false (Michele, 05/10: il logo resti fermo nella barra
   laterale). Innocuo finche' non c'e' .altro-logo. */
.altro-logo { margin: 0 0 10px; }
.altro-logo .zc { width: 120px; height: auto; }
.altro-logo .altro-zc-scuro { display: none; }
:root[data-theme="dark"] .altro-logo .altro-zc-chiaro { display: none; }
:root[data-theme="dark"] .altro-logo .altro-zc-scuro { display: block; }

/* ============================================================================
   (agende ferme 09/10) AGENDE FERME
   ============================================================================
   Il piano comprende meno agende di quelle del centro: quelle in piu' sono «ferme» (agenda.js). Solo classi nuove:
   senza agende ferme niente di questo compare. Colori dai token (chiaro e scuro), tasti da dito (--tocco). */
.agenda-ferma-banner {
  margin: 8px 6px 4px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--attesa-bg); border: 1px dashed var(--attesa); color: var(--attesa-t);
  font-size: var(--fs-sm); line-height: 1.5; min-width: 0; overflow-wrap: anywhere;
}
.agenda-ferma-banner .afb-titolo { font-size: var(--fs-md); font-weight: 800; margin-bottom: 2px; }
.agenda-ferma-banner .afb-strada { margin-top: 6px; }
.agenda-ferma-banner a, #agende-attive-box a { color: inherit; font-weight: 700; text-decoration: underline; }
.afb-scegli, .aab-scegli {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: var(--tocco); max-width: 100%; margin-top: 10px; padding: 6px 18px; border-radius: 100px;
  background: var(--card); border: 1px solid var(--attesa); color: var(--attesa-t);
  font-family: var(--font); font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; white-space: normal; cursor: pointer;
}
.afb-scegli:hover, .aab-scegli:hover { background: var(--card-2); }
.afb-scegli:focus-visible, .aab-scegli:focus-visible, .aa-tasti button:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 2px; }

/* la voce dell'agenda ferma: barra laterale, barra del telefono, panoramica, settimana */
.op-sidebar-item.ferma .op-ruolo { color: var(--attesa); font-weight: 700; }
.op-sidebar-item.ferma .op-avatar { opacity: .55; }
.op-mobile-item.ferma .op-mobile-avatar { border-style: dashed; border-color: var(--attesa); }
.pano-testa.ferma .pano-avatar { opacity: .55; }
.pano-testa.ferma .pano-stato { color: var(--attesa-t); font-weight: 700; }
.pano-col.ferma { cursor: default; background-color: var(--sfondo); }
.settimana-colonna-giorno.ferma { cursor: default; background-color: var(--sfondo); }

/* Impostazioni › Staff: l'etichetta sulla riga e il riquadro sopra l'elenco */
.op-ferma-tag {
  flex: none; margin-left: 6px; padding: 2px 8px; border-radius: 100px;
  background: var(--attesa-bg); color: var(--attesa-t); font-size: 10px; font-weight: 700; white-space: nowrap;
}
#agende-attive-box {
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--attesa-bg); border: 1px dashed var(--attesa); color: var(--attesa-t);
  font-size: var(--fs-sm); line-height: 1.5; min-width: 0; overflow-wrap: anywhere;
}
#agende-attive-box .aab-titolo { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
#agende-attive-box .aab-strada { margin-top: 6px; }

/* la finestra della scelta */
#modal-agende-attive .aa-testo { margin: 0 0 12px; font-size: var(--fs-md); color: var(--t2); line-height: 1.5; }
#modal-agende-attive .aa-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
#modal-agende-attive .aa-riga {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: var(--tocco); min-width: 0;
  padding: 6px 12px; border: 1px solid var(--bordo); border-radius: var(--r-sm); background: var(--card); cursor: pointer;
}
#modal-agende-attive .aa-riga input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--verde-vivo); cursor: pointer; }
#modal-agende-attive .aa-riga.spenta { opacity: .55; cursor: default; }
#modal-agende-attive .aa-riga.spenta input { cursor: default; }
#modal-agende-attive .aa-pallino { flex: none; width: 14px; height: 14px; border-radius: 50%; }
#modal-agende-attive .aa-nome { min-width: 0; font-size: var(--fs-md); font-weight: 600; color: var(--t1); overflow-wrap: anywhere; }
#modal-agende-attive .aa-conta { margin: 4px 0 12px; font-size: var(--fs-sm); font-weight: 700; color: var(--t2); font-variant-numeric: tabular-nums; }
#modal-agende-attive .aa-tasti { display: flex; flex-wrap: wrap; gap: 10px; }
#modal-agende-attive .aa-tasti button {
  flex: 1 1 140px; min-height: var(--tocco); border-radius: 100px; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 700;
}
#modal-agende-attive .aa-annulla { background: var(--card); border: 1px solid var(--bordo); color: var(--t2); }
#modal-agende-attive .aa-salva { background: var(--verde-vivo); border: 1px solid var(--verde-vivo); color: var(--dark); }
#modal-agende-attive .aa-salva:disabled { opacity: .45; cursor: default; }

/* le note: scheda dell'appuntamento, Sposta, Prenota di nuovo, Richieste */
.det-ferma {
  padding: 8px 10px; border-radius: var(--r-sm); background: var(--attesa-bg); color: var(--attesa-t);
  font-size: 13px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere;
}
.sposta-ferma-nota, .ritorno-ferma-nota, .rich-ferma-nota {
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--attesa-bg); color: var(--attesa-t);
  font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere;
}
/* la riga di un'agenda ferma in Staff: nome, «Agenda ferma» e «Titolare» vanno a capo invece di sbordare (360 px) */
.riga-impo.ferma .riga-impo-top .info { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
/* (agende ferme 09/10, collaudo 10/10) la schermata «Chi sei?» / «Cambia operatrice»: l'agenda ferma lo dice (sul
   telefono e' l'unica strada per cambiare agenda). In alto a sinistra: la campanella sta a destra, il nome al centro. */
.ss-card .ss-ferma {
  position: absolute; top: 12px; left: 12px; z-index: 2; max-width: calc(100% - 76px);
  padding: 3px 10px; border-radius: 100px; background: rgba(0,0,0,.45); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* (agende ferme 09/10, collaudo 10/10) la finestra della scelta: cosa fare sotto il contatore */
#modal-agende-attive .aa-aiuto { margin: -6px 0 12px; font-size: var(--fs-sm); color: var(--t2); line-height: 1.45; }
#modal-agende-attive .aa-aiuto:empty { display: none; }
/* (agende ferme 09/10, collaudo 10/10) toccando una riga spenta la riga d'aiuto si accende (niente avviso in basso:
   sul telefono copriva «Salva la scelta») */
#modal-agende-attive .aa-aiuto.evidente { color: var(--attesa-t); font-weight: 700; animation: aaAiutoScatto .32s ease; }
@keyframes aaAiutoScatto { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { #modal-agende-attive .aa-aiuto.evidente { animation: none; } }