/* ============================================================
   ENTRY MIND — app/css/style.css
   Stile condiviso. I colori sono variabili: per "brandare" uno
   studio basta cambiare --accent (e il logo nell'header).
   ============================================================ */

:root {
    --accent: #4f46e5;          /* colore brand (personalizzabile per studio) */
    --accent-soft: #eef2ff;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --text: #1f2430;
    --muted: #6b7280;
    --border: #e6e8ec;
    --table-head: #c3c3c3;      /* grigio dell'intestazione tabelle (tutte le tabelle) */
    --danger: #dc2626;
    --ok: #16a34a;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --sidebar-w: 220px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
/* La misura di riferimento sta qui. Senza, il documento ereditava i 16px
   predefiniti del browser: i campi (che usano font: inherit) uscivano a 16
   mentre tutto cio' che aveva una classe stava a 13, e la differenza si vedeva
   soprattutto negli orari di apertura. */
body {
    margin: 0; background: var(--bg); color: var(--text); min-height: 100vh;
    font-size: 15px; line-height: 1.5;
}
button { font: inherit; cursor: pointer; }
/* Tutti i campi hanno lo stesso aspetto: bordo sottile, sfondo bianco, stesso respiro.
   Senza questa regola i campi FUORI dai form (le barre di ricerca, i filtri) restavano con
   lo stile predefinito del browser: bordo spesso e scavato, altezza diversa dagli altri. */
input, select, textarea {
    font: inherit; box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* Niente frecce su/giu (spinner) sui campi numerici: non aggiungono valore. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hidden { display: none !important; }

/* ---------- LOGIN ---------- */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent-soft), var(--bg));
}
.login-card {
    background: var(--surface); padding: 32px; width: 340px; border-radius: 14px;
    box-shadow: var(--shadow); border: 1px solid var(--border);
}
.login-card h1 { margin: 0 0 4px; font-size: 24px; }
/* Banner logo su login/setup: il logo ha gia' il fondo navy, angoli arrotondati per un blocco pulito. */
.login-brand { margin: -8px -8px 18px; }
.login-brand img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* Avviso limite operatori (al posto del bottone Nuovo). Neutro, non allarmante. */
.op-limite { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 600; }
/* Logo unico nel footer (fondo gia' #031433, si fonde con la barra). */
.appfooter .foot-logo { height: 28px; width: auto; display: block; }
.login-logo { display: block; width: 100%; max-width: 240px; height: auto; margin: 4px auto 0; }

/* Targhetta del marchio: il logo nasce su fondo scuro (la parola ENTRY e'
   bianca), quindi su una scheda chiara ha bisogno del suo fondo. */
.marchio-targa {
    background: linear-gradient(135deg, #182142 0%, #0C1122 100%);
    border-radius: 12px; padding: 20px 18px 22px; margin: -6px -6px 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* Icona sopra, marchio sotto: due immagini, due misure. Il simbolo regge
   anche piccolo, la scritta no, quindi non scalano insieme. */
.marchio-icona { display: block; width: 52px; height: auto; margin: 0 auto 12px; }
.marchio-testo { display: block; width: 100%; max-width: 174px; height: auto; margin: 0 auto; }

/* Campo password con l'occhio per rileggere quello che si e' scritto:
   con soli asterischi si sbaglia e non si capisce perche' non si entra. */
.campo-pw { position: relative; display: block; }
.campo-pw input { padding-right: 42px; }
.pw-occhio {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer;
    color: var(--muted); border-radius: 8px; display: grid; place-items: center;
    font-size: 15px; padding: 0;
}
.pw-occhio:hover { color: var(--text); background: var(--bg); }
.login-card p.sub.sub-strong { font-weight: 700; color: var(--text); margin: 28px 0; text-align: center; }
.login-card p.sub { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.login-card label { display: block; font-size: 15px; color: var(--muted); margin: 12px 0 4px; }
.login-card input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--radius); outline: none;
}
.login-card input:focus { border-color: var(--accent); }
/* Gli errori di login/attivazione usano lo stile standard .form-err (banner rosso, icona, centrato). */
/* Barra di robustezza password (schermata di attivazione) */
.pw-strength { height: 6px; background: #eceef1; border-radius: 4px; margin-top: 8px; overflow: hidden; }
.pw-strength > div { height: 100%; width: 0; background: var(--danger); border-radius: 4px; transition: width .2s, background .2s; }
.link-tips { color: var(--accent); font-size: 15px; text-decoration: none; }
.link-tips:hover { text-decoration: underline; }
/* Disclaimer di responsabilità sulla password (schermata di creazione) */
.pw-disclaimer {
    margin: 12px 0 4px; padding: 12px 14px; border: 1px solid #f0c36d;
    background: #fff8e6; border-radius: 8px; font-size: 13px; line-height: 1.5; color: #5a4b1f;
}
.pw-disclaimer:empty { display: none; }
/* Regole di sicurezza consigliate (schermata di login) */
.pw-regole { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.pw-regole:empty { display: none; }
/* input disabilitato nella login card (campo Admin) */
.login-card input:disabled { background: #f4f5f7; color: var(--muted); }

/* ---------- LAYOUT APP (barra in alto, come Flow Motion) ---------- */
.app { display: flex; flex-direction: column; }

.topbar {
    background: #0f172a; color: #fff; display: flex; align-items: center; gap: 18px;
    padding: 0 18px; height: 54px; position: sticky; top: 0; z-index: 40;
}
.brand { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

.tabs { flex: 1; display: flex; gap: 4px; align-items: center; }
.tab-wrap { position: relative; }
.mod-tab {
    cursor: pointer; padding: 8px 14px; border-radius: 6px; font-size: 15px; font-weight: 600;
    color: #fff; background: transparent; border: none; white-space: nowrap;
    display: flex; align-items: center; gap: 6px; transition: background .15s;
}
.mod-tab:hover { background: rgba(255,255,255,.14); }
.mod-tab.active { background: var(--accent); }
.mod-code { font-family: ui-monospace, monospace; font-size: 12px; opacity: .6; }
.mod-tab .chev { font-size: 12px; opacity: .6; }

.dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 210px;
    background: #1e293b; border: 1px solid #334155; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4); padding: 6px; z-index: 9999;
}
.tab-wrap.open .dropdown { display: block; }
.mod-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 12px; border-radius: 6px; color: #fff; font-size: 15px;
    background: none; border: none; cursor: pointer; transition: background .15s;
}
.mod-item:hover { background: rgba(255,255,255,.14); }
.mod-item.active-item { background: var(--accent); }
/* Riga di separazione tra gruppi di voci nel menu */
/* Guida (v1.0.13): pulsante "Aiuto ?" nella barra e pagina con indice a sinistra, testo a destra */
.btn-aiuto { margin-left: 4px; }
.aiuto { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.aiuto-indice { padding: 12px; position: sticky; top: 12px; max-height: calc(100vh - 120px); overflow: auto; }
.aiuto-indice input { width: 100%; margin-bottom: 10px; }
.aiuto-cap { margin-bottom: 10px; }
.aiuto-indice a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 14px; }
.aiuto-indice a.aiuto-cap-titolo { font-weight: 700; }
.aiuto-indice a.aiuto-sez { padding-left: 18px; }
.aiuto-indice a:hover, .aiuto-indice a.attivo { background: var(--accent-soft, rgba(0,0,0,.06)); }
.aiuto-testo { padding: 18px 24px; line-height: 1.55; }
.aiuto-cap-h { margin-top: 0; }
.aiuto-sezione { margin-bottom: 22px; scroll-margin-top: 12px; }
.aiuto-sezione h3 { margin-bottom: 6px; }
.aiuto-sezione li { margin-bottom: 4px; }
.aiuto-tab { width: auto; box-shadow: none; margin: 8px 0 12px; }
.aiuto-tab th, .aiuto-tab td { font-size: 14px; padding: 6px 10px; vertical-align: top; }
.aiuto-dove { margin-top: 14px; text-transform: uppercase; }
.aiuto-avviso { padding: 10px 14px; margin-bottom: 12px; border-left: 4px solid var(--accent); }
@media (max-width: 900px) { .aiuto { grid-template-columns: 1fr; } .aiuto-indice { position: static; max-height: none; } }
.mod-sep {
    height: 1px; background: rgba(255,255,255,.16);
    margin: 6px 8px;
}
/* ---------- Iscritti fissi (e box informativi simili) ---------- */
.info-box {
    display: flex; gap: 8px; align-items: flex-start;
    background: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca;
    border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.5;
}
.info-box .info-ic { flex: none; margin-top: 1px; }
.persona-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px;
}
.persona-left { display: flex; align-items: center; gap: 12px; }
.avatar-circ {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    background: #e0e7ff; color: #4338ca; font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}

.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.topbar-right .user { color: #cbd5e1; }
.btn-logout { color: #fca5a5; background: none; border: none; padding: 0; font-size: 15px; cursor: pointer; }
.btn-logout:hover { color: #fff; }

/* Menu impostazioni nella barra in alto. */
.menu-imp { position: relative; }
.btn-imp {
    background: none; border: 0; color: #cbd5e1; cursor: pointer;
    width: 28px; height: 28px; border-radius: 8px; font-size: 17px;
    display: grid; place-items: center; padding: 0;
}
.btn-imp:hover, .btn-imp[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.12); }
.menu-imp-voci {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16,24,40,.18); min-width: 230px; padding: 6px;
}
.voce-imp {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: 0; cursor: pointer; text-align: left;
    padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 15px; color: var(--text);
}
.voce-imp:hover { background: var(--bg); }
.voce-imp i { width: 16px; text-align: center; color: var(--muted); }
.voce-imp:hover i { color: var(--accent); }
/* Riga di separazione fra i gruppi di voci nel menu Impostazioni. */
.menu-imp-sep { height: 1px; background: var(--border); margin: 6px 6px; }

/* Il gestionale si usa da laptop o da tablet in orizzontale, non da telefono:
   1100px lasciavano centinaia di pixel vuoti ai lati su uno schermo comune, e
   nel calendario schiacciavano le sette colonne. 1600 sfrutta lo schermo senza
   arrivare da bordo a bordo; sotto quella soglia (tablet compresi) la pagina
   usa comunque tutta la larghezza disponibile. */
.content { padding: 28px 32px; max-width: 1600px; margin: 0 auto; width: 100%; }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-head h2 { margin: 0; font-size: 22px; }

/* ---------- COMPONENTI ---------- */
.btn {
    background: var(--accent); color: #fff; border: 1px solid transparent; padding: 11px 22px;
    border-radius: 12px; font-size: 15px; font-weight: 500; line-height: 1.2;
    transition: background .18s, border-color .18s, filter .18s;
}
.btn:hover { filter: brightness(.90); }
/* Secondario (bianco/neutro), stile "premium" tipo Stripe/Notion: bordo definito, niente ombra. */
.btn.secondary {
    background: var(--surface); color: var(--text); border: 1px solid #c9c9c9; filter: none;
}
.btn.secondary:hover { background: #ebecee; border-color: #b3b3b3; filter: none; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { filter: brightness(.90); }
.btn.small { padding: 6px 14px; font-size: 15px; border-radius: 9px; }

/* Bottoni affiancati dentro una cella di tabella: senza questo si toccano,
   perche' fra due elementi in linea resta solo lo spazio del sorgente HTML.
   Nelle schede dei Corsi la distanza c'e' gia' (contenitore flex con gap: 6px):
   qui si porta la stessa misura anche nelle tabelle, cosi' Abbonamenti,
   Clienti e Chiusure si comportano come i Corsi. */
td .btn + .btn { margin-left: 6px; }
/* Bottoni azione card — copiati ESATTAMENTE dal vecchio Flow Motion (Tailwind bg-x-50/text-x-700).
   Ogni azione ha il suo colore tenue. Compatti, icona + testo, una riga. */
.btn.act {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: 9px;
    border: 1px solid transparent; line-height: 1.2; filter: none;
}
.btn.act .ic { font-size: 13px; line-height: 1; }
.btn.act:hover { filter: none; }
.act-grigio  { background: #f3f4f6; color: #374151; }  /* Modifica */
.act-grigio:hover  { background: #e5e7eb; }
.act-ambra   { background: #fffbeb; color: #b45309; }  /* Ricalcola */
.act-ambra:hover   { background: #fef3c7; }
.act-verde   { background: #f0fdf4; color: #15803d; }  /* Riepilogo WA */
.act-verde:hover   { background: #dcfce7; }
.act-arancio { background: #fff7ed; color: #c2410c; }  /* Pausa */
.act-arancio:hover { background: #ffedd5; }
.act-smeraldo{ background: #ecfdf5; color: #047857; }  /* Riprendi */
.act-smeraldo:hover{ background: #d1fae5; }
.act-rosso   { background: #fef2f2; color: #dc2626; }  /* Elimina */
.act-rosso:hover   { background: #fee2e2; }
.act-indaco  { background: #eef2ff; color: #4f46e5; }  /* Storico */
.act-indaco:hover  { background: #e0e7ff; }
/* Elementi disabilitati: aspetto inattivo E completamente inerti (nessun effetto al passaggio/pressione) */
.btn:disabled, .btn[disabled] {
    opacity: .5; box-shadow: none; cursor: not-allowed; filter: none;
    pointer-events: none;   /* nessun hover/active/click: elemento morto come un campo disabilitato */
}
.btn:disabled:hover, .btn[disabled]:hover,
.btn:disabled:active, .btn[disabled]:active {
    filter: none; box-shadow: none; transform: none;
}
input:disabled, select:disabled, textarea:disabled {
    background: #f4f5f7; color: var(--muted); cursor: not-allowed; opacity: .7;
}

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/* Primo avvio Profilo: nessuna via di fuga (menu + Esci nascosti finche non salva) */
body.blocco-profilo .topbar .tabs,
body.blocco-profilo .topbar .menu-imp,
body.blocco-profilo .topbar .btn-aiuto,
body.blocco-profilo .topbar .btn-logout,
body.blocco-profilo .topbar .topbar-sep { display: none !important; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 15px; }
/* Il nome nella prima colonna e' scritto con <strong>, che il browser rende a
   peso 700: piu' marcato del semi-grassetto usato nelle schede per la stessa
   cosa. Qui si allinea, cosi' il nome di un cliente si legge uguale in tabella
   e in scheda. */
td strong { font-weight: 600; }

/* ---------- Tendina di ricerca cliente ----------
   Lo stesso elemento era scritto a mano in cinque punti, e due dei cinque
   avevano dimenticato il colore di fondo: la tendina restava trasparente e i
   nomi si sovrapponevano ai campi sottostanti. Qui una volta sola.
   Posizione e z-index li mette EM.dropdownFluttuante, che la fa galleggiare
   sopra la finestra: qui c'e' solo l'aspetto. */
.cli-drop {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-s, 8px);
    box-shadow: 0 8px 24px rgba(16,24,40,.14);
    max-height: 220px; overflow: auto;
}
.cli-opt { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.cli-drop .cli-opt:last-child { border-bottom: 0; }
.cli-drop .cli-opt:hover { background: var(--bg); }

/* ---------- Scheda cliente (storico) ----------
   La finestra e' larga 980px: a 680 l'orario e il nome del servizio andavano
   a capo su due righe e la tabella diventava faticosa da scorrere. */
.sc-ora { white-space: nowrap; }
th { background: var(--table-head); color: var(--text); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
.tag { display: inline-block; white-space: nowrap; font-size: 13px; padding: 2px 8px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); }
.tag.grey { background: #f1f2f4; color: var(--muted); }
.tag.warn { background: #fdecc8; color: #92600a; }
/* Badge di allarme (es. operatore bloccato per troppi tentativi di password) */
.tag.danger { background: rgba(220, 38, 38, .12); color: var(--danger); font-weight: 600; }

/* ---------- TESTO SECONDARIO ----------
   Le note sotto un titolo, le spiegazioni accanto a un dato. Misura e margini
   stanno qui: erano scritti nella marcatura pagina per pagina, in diciotto
   combinazioni diverse, ed e' il motivo principale per cui le schermate non
   sembravano parenti. */
.muted { color: var(--muted); }
p.muted { font-size: 15px; line-height: 1.5; margin: 4px 0 14px; }
p.muted.piccolo   { font-size: 13px; }
p.muted.attaccato { margin-top: -6px; }   /* nota appiccicata al titolo sopra */
p.muted.avviso-pag { color: var(--warn); font-weight: 600; }   /* tessera di un altro servizio scelta */
p.muted.centrato  { text-align: center; }
.empty { color: var(--muted); padding: 32px 28px; text-align: center; font-size: 15px; }

/* ---------- MODALE ---------- */
.modal-bg {
    position: fixed; inset: 0; background: rgba(16, 24, 40, .45);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal {
    background: var(--surface); border-radius: 14px; width: 420px; max-width: 100%;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .2);
    /* Colonna: header fisso in alto, corpo scrollabile sotto. Il modal stesso NON scrolla
       (overflow hidden), così la scrollbar resta confinata al corpo e non attraversa mai
       l'header (che prima veniva "tagliato" dalla barra). Una sola scrollbar. */
    max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
}
/* Corpo scrollabile: qui vive il padding e qui (solo qui) compare l'eventuale scrollbar. */
.modal-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: auto;   /* contenuto largo: scrollabile, non tagliato */
    padding: 24px;
}
/* Angoli arrotondati anche con scrollbar attiva (WebKit) */
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-thumb { background: #d0d3d9; border-radius: 8px; border: 3px solid var(--surface); }
.modal-body::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
/* INTESTAZIONE DEL MODALE — barra grigia a tutta larghezza (stesso grigio delle tabelle),
   titolo CENTRATO, X allineata verticalmente. Nei form l'h3 è tirato FUORI dal corpo ed è
   header FISSO (.modal > h3); nei modal a caricamento asincrono l'h3 arriva dopo e resta
   DENTRO il corpo (.modal-body … h3:first-child), scorrendo col contenuto ma con lo stesso
   aspetto. Il padding laterale di 44px lascia spazio alla X e centra davvero il titolo. */
.modal > h3,
.modal-body > h3:first-child,
.modal-body > div > h3:first-child {
    padding: 12px 44px;
    min-height: 48px;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    background: var(--table-head);
    color: var(--text);
    border-radius: 14px 14px 0 0;
    font-size: 22px; line-height: 24px;
}
/* Header FISSO (form): sta in cima alla colonna, non scrolla, niente margini negativi. */
.modal > h3 { margin: 0; flex: none; }
/* Header DENTRO il corpo (modal async): margini negativi per toccare i bordi del corpo. */
.modal-body > h3:first-child,
.modal-body > div > h3:first-child { margin: -24px -24px 18px; }
/* X di chiusura: centrata sulla barra (48px di barra, 30px di pulsante → (48-30)/2 = 9px) */
.modal-x {
    position: absolute; top: 9px; right: 12px; z-index: 2;
    width: 30px; height: 30px; border: none; border-radius: 8px;
    background: transparent; color: var(--text); font-size: 24px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.modal-x:hover { background: rgba(0, 0, 0, .08); color: var(--text); }
.field { margin-bottom: 14px; }
/* v1.0.9: piu' campi sulla stessa riga (Estratto conto, Piano dei conti); a capo se lo spazio non basta */
.campi-riga { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: flex-end; }
.campi-riga > .field { flex: 1 1 220px; }
/* L'etichetta dice cosa contiene il campo: deve leggersi. Semi-grassetto e
   colore del testo, non grigio: il grassetto pieno su grigio si contraddice,
   perche' il peso dice "importante" e il grigio dice "secondario". */
.field label { display: block; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
/* I campi dentro i form ereditano l'aspetto dalla regola globale: qui serve solo la larghezza. */
.field input, .field select, .field textarea { width: 100%; }
/* ...ma radio e checkbox NO: dentro un <label> in flex il "width:100%" li allargherebbe
   a tutta la riga spingendo il testo all'estrema destra (schermata distorta). Restano
   della loro dimensione naturale. */
.field input[type="checkbox"], .field input[type="radio"] { width: auto; }

/* ---------- CAMPI OBBLIGATORI / ERRORI (regola globale) ---------- */
/* Asterisco rosso sui label dei campi obbligatori: <label class="obbl"> */
.field label.obbl::after { content: ' *'; color: var(--danger); font-weight: 700; }
/* Campo evidenziato quando obbligatorio e vuoto al salvataggio */
.campo-errore,
.field input.campo-errore,
.field select.campo-errore,
.field textarea.campo-errore {
    border-color: var(--danger) !important;
    background: rgba(220, 38, 38, .05);
}
/* Messaggio d'errore: banner rosso a tutta larghezza, testo bianco, icona di avviso
   davanti (segnale non solo cromatico → leggibile anche dai daltonici). Centrato. */
.form-err {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--danger); color: #fff;
    font-size: 15px; font-weight: 600;
    padding: 10px 14px; border-radius: var(--radius); margin-top: 12px;
    text-align: center;
}
.form-err::before {
    content: '⚠'; font-size: 17px; line-height: 1;
}
.form-err.hidden { display: none; }
/* P6: form con una data alla quale lo studio non e' assoggettato all'IVA (EM.collegaIvaData): niente campi IVA, avviso. */
[data-iva="0"] .iva-campo { display: none !important; }
.riga-esente .iva-campo { display: none !important; }   /* fase 3: riga esente (art. 21 LIVA), niente aliquota */
.iva-avviso { color: var(--danger); font-size: 13px; margin-top: 4px; }
.iva-avviso.hidden { display: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
/* ===== Incassa vendita: righe del carrello (una per articolo/descrizione) ===== */
.ca-riga { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg, #f7f8fa); }
.ca-riga-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ca-riga-top .ca-tipo { width: auto; }
.ca-riga-top .ca-del { margin-left: auto; }
.ca-campi { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ca-f { margin: 0; }
.ca-f > label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.ca-f input, .ca-f select { width: 100%; }
.ca-riga-imp { align-self: center; margin-left: auto; font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ca-totale { text-align: right; font-weight: 700; font-size: 16px; margin: 2px 0 6px; }
/* Tag sulle righe della lista incassi pagate con metodo fuori cassa (in_cassa = 0):
   compaiono nel registro "Incassi" ma NON nella chiusura Z (che è solo contante). */
.cc-fuori { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--muted); background: #eef0f3; border-radius: 6px; padding: 1px 6px; vertical-align: middle; }

/* ---------- TOAST ---------- */
.toast {
    position: fixed; bottom: 24px; right: 24px; background: var(--text); color: #fff;
    padding: 12px 18px; border-radius: var(--radius); font-size: 15px; box-shadow: var(--shadow); z-index: 60;
}
.toast.err { background: var(--danger); }
.toast.ok { background: var(--ok); }

/* ---------- Filtri a segmenti (Tessere) ---------- */
/* Gruppo di filtri "a segmenti". Se la riga che lo contiene usa align-items:stretch, il
   gruppo si adegua all'altezza del campo di ricerca accanto: i pulsanti interni riempiono
   l'altezza e centrano il testo, così non restano più bassi degli altri controlli. */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-btn {
    background: var(--surface); border: none; padding: 7px 14px; font-size: 15px; cursor: pointer;
    color: var(--text); border-right: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
.seg-btn:last-child { border-right: none; }
.seg-btn.active { background: var(--accent); color: #fff; }

/* ---------- Card tessere (stile Flow Motion) ---------- */
.card-list { display: flex; flex-direction: column; gap: 12px; }
/* Bianca come le schede dei corsi e come ogni altra scheda dell'app: il grigio
   scritto a mano era l'ultimo rimasto. Il fondo rosato resta alle tessere
   scadute, dove e' un segnale e non decorazione. */
.tcard {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
}
/* Tessera SCADUTA: sfondo rosato per distinguerla a colpo d'occhio dalle attive. */
.tcard.scaduta {
    background: #fef2f2; border-color: #fecaca;
}
/* Badge "SCADUTA" rosso uppercase, al posto di "Scade ...". */
.badge-scaduta {
    background: #fee2e2; color: #dc2626; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; font-size: 12px; padding: 2px 9px; border-radius: 99px;
}
/* Cliente disattivato: la tessera resta visibile (il credito residuo e'
   un'informazione che serve), ma dev'essere chiaro perche' non si riesce a
   prenotarlo. */
.badge-disattivo {
    background: var(--surface-2, #EEF1F6); color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 1px 8px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tcard-main { flex: 1; min-width: 0; }
.tcard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
/* Intestazione della card: "Cliente · Servizio · Tessera N" — stessa famiglia, stessa
   dimensione e stesso peso per i tre elementi; cambia solo il colore.
   Il servizio è in rosso perché è ciò che distingue due tessere dello stesso cliente. */
/* Voci di elenco, non titoli: stessa misura del nome cliente nella tabella
   Clienti e del giorno negli Orari. Il 15px resta a cio' che intitola
   qualcosa (il marchio, il periodo mostrato nel calendario). */
.tcard-nome,
.tcard-servizio,
.tcard-tessera { font-weight: 600; font-size: 15px; }
.tcard-servizio { color: var(--danger); }
.tcard-tessera  { color: var(--accent); }
.tcard-sep { color: var(--muted); font-size: 15px; }
.badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
.badge-indigo { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.badge-grey { background: #f1f5f9; color: #64748b; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-amber { background: #fef3c7; color: #b45309; }
.tcard-bar-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.tcard-bar { width: 100%; height: 8px; background: #eef2f7; border-radius: 99px; overflow: hidden; }
.tcard-bar > div { height: 100%; border-radius: 99px; transition: width .2s; }
.tcard-foot { font-size: 13px; color: var(--muted); margin-top: 8px; }
.tcard-actions { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }

/* ---------- Calendario ---------- */
/* Non piu' usata: la barra del calendario e' diventata la scheda filtri
   comune a tutte le schermate. Tenuta un giro per sicurezza, poi si toglie. */
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
/* Il periodo mostrato: sta nel piede della scheda filtri, dove le altre
   schermate scrivono "124 risultati". Dice la stessa cosa: cosa stai guardando. */
.cal-title { font-weight: 700; font-size: 17px; text-transform: capitalize; }

.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: start; }
.cal-col { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-height: 120px; }
.cal-col.oggi { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cal-col-head { background: #0f172a; color: #fff; font-size: 13px; font-weight: 600; text-align: center; padding: 7px 4px; text-transform: capitalize; }
.cal-col.oggi .cal-col-head { background: var(--accent); }
/* Giorni passati della settimana: contorno rosso SOTTILE + rosso pallidissimo. Volutamente discreto:
   il focus visivo deve restare su 'oggi' (blu, col doppio bordo). */
.cal-col.passato { border-color: rgba(220, 38, 38, .45); background: rgba(220, 38, 38, .05); }
.cal-col.passato .cal-col-head { background: rgba(220, 38, 38, .12); color: var(--text); }
.cal-col.passato .cal-col-body { background: transparent; }
.cal-col-body { padding: 6px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.cal-empty { color: var(--muted); text-align: center; font-size: 13px; padding: 10px 0; }

.cal-card { border-radius: 8px; padding: 7px 9px; cursor: pointer; border-left: 3px solid; background: var(--bg); transition: filter .15s; flex: 0 0 auto; }
.cal-card:hover { filter: brightness(0.96); }
.cal-card.corso { border-color: var(--accent); background: var(--accent-soft); }
.cal-card.app   { border-color: #d97706; background: #fff7ed; }
/* Prima riga della scheda: orario e operatore affiancati. L'operatore sta qui
   e non su una riga sua perche' nella vista settimana ogni riga in piu' per
   scheda allunga molto la colonna. Con un nome lungo si tronca invece di
   mandare a capo: il min-width:0 e' quello che permette il troncamento dentro
   un contenitore flex. */
.cal-card-ora {
    font-size: 15px; font-weight: 700; color: var(--muted);
    display: flex; align-items: baseline; gap: 5px;
}
.cal-card-ora time { flex: none; }
.cal-card-op {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500; opacity: .85;
}
.cal-card-op::before { content: "· "; opacity: .7; }
.cal-card-tit { font-size: 15px; font-weight: 600; }
.cal-card-sub { font-size: 13px; color: var(--muted); }

.cal-day { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.cal-day .cal-card { border: 1px solid var(--border); border-left-width: 3px; }

.cal-mhead { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-mhead > div { background: #0f172a; color: #fff; font-size: 12px; font-weight: 600; text-align: center; padding: 6px 0; border-radius: 6px; }
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-mcell { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; min-height: 76px; padding: 5px 6px; cursor: pointer; }
.cal-mcell.vuota { background: transparent; border: none; cursor: default; }
.cal-mcell.oggi { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Mese: giorni passati = SOLO contorno rosso sottile (niente sfondo rosso, a differenza della settimana). */
.cal-mcell.passato { border-color: rgba(220, 38, 38, .45); }
.cal-mcell:not(.vuota):hover { background: var(--bg); }
.cal-mnum { font-size: 13px; font-weight: 600; color: var(--muted); }
.cal-mdots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; align-items: center; }
.cal-mdot { width: 8px; height: 8px; border-radius: 99px; }
.cal-mdot.corso { background: var(--accent); }
.cal-mdot.app { background: #d97706; }
.cal-more { font-size: 12px; color: var(--muted); }

@media (max-width: 720px) {
    .cal-week { grid-template-columns: 1fr; }
}

/* selettore data nel calendario */
.cal-pick { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; color: var(--text); background: var(--surface); cursor: pointer; }

/* Situazione economica: lista leggibile (padding + zebra + numeri allineati) */
.se-tab { width: 100%; border-collapse: collapse; }
.se-tab td { padding: 11px 16px; }
.se-tab td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.se-tab tbody tr:nth-child(even) { background: #f6f7f9; }
.se-tab .se-gruppo td { font-weight: 600; padding-top: 14px; }
.se-tab .se-tot td { border-top: 1px solid var(--border); }
/* Andamento e patrimonio, colonne N° | Descrizione | Attivo/Costi | Passivo/Ricavi | Saldo precedente (v1.0.3) */
.se-tab-conti th { padding: 8px 16px; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--border); }
.se-tab-conti th.num { text-align: right; white-space: nowrap; }
.se-tab .se-n { width: 1%; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.se-tab .se-sotto td { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-top: 10px; padding-bottom: 4px; }
.se-tab .se-prec { color: var(--muted); }
.se-tab .se-tot-forte td { font-weight: 700; }
.se-tab .neg { color: var(--danger); }
.se-tab a.se-mov { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.se-tab a.se-mov:hover { color: var(--primary, inherit); border-bottom-style: solid; }
.se-nota { margin-top: 14px; }
/* Pagine di contabilità (v1.0.4): card con margini interni e menu Formato a destra, come Andamento e patrimonio */
.card.corpo { padding: 14px 16px; margin-bottom: 16px; }
.m1-formato { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.se-tab-conti tbody tr.cliccabile { cursor: pointer; }
/* Registro dei movimenti (v1.0.8): righe a fasce per scrittura, non alternate riga per riga */
.lg-tab tbody tr:nth-child(even) { background: none; }
.lg-tab tr.lg-reg td { font-weight: 600; border-top: 1px solid var(--border); padding-top: 10px; padding-bottom: 4px; }
.lg-tab tr.lg-conto td { padding-top: 3px; padding-bottom: 3px; }
.lg-tab tr.lg-conto td:nth-child(3) { padding-left: 32px; }
/* v1.0.9: icone Modifica / Elimina / Storna / Origine sulla riga della registrazione (solo Admin) */
.lg-azioni { float: right; white-space: nowrap; font-weight: normal; }
.lg-az { background: none; border: none; cursor: pointer; color: var(--muted, #888); padding: 0 6px; font-size: 14px; }
.lg-az:hover { color: var(--text, #222); }
.lg-az[data-az="elimina"]:hover { color: var(--danger, #c0392b); }
.lg-cerca { max-width: 220px; }
/* B6 (v1.0.19): registrazioni annullate nel Registro (casella "Mostra anche le annullate") */
.lg-annullate { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.lg-annullate input { width: auto; margin: 0; }
.lg-tab tr.lg-annullata td { text-decoration: line-through; color: var(--muted, #888); }
.lg-annullata-tag { display: inline-block; text-decoration: none; color: var(--danger, #c0392b); font-size: 12px; font-weight: 600; margin-left: 6px; }
/* v1.0.15: righe di una registrazione su due livelli (conto/Dare/Avere sopra, testo della riga sotto) */
.righe-doppie tbody.riga-doppia tr { background: transparent; }
.righe-doppie tbody.riga-doppia td { border-bottom: none; padding-bottom: 4px; }
.righe-doppie tbody.riga-doppia tr.riga-testo td { padding-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.righe-doppie select { width: 100%; min-width: 220px; }
.righe-doppie input.lm-dare, .righe-doppie input.lm-avere, .righe-doppie input.sm-dare, .righe-doppie input.sm-avere { width: 120px; }
.riga-testo-cella { display: flex; align-items: center; gap: 10px; }
.riga-testo-cella label { font-size: 13px; color: var(--muted, #666); white-space: nowrap; }
.riga-testo-cella input { flex: 1; }
/* Estratto conto (v1.0.13): riga del saldo riportato */
.ma-riporto td { font-style: italic; color: var(--muted, #666); }
.se-head { text-align: center; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 14px; background: #5b6570; color: #fff; padding: 9px 12px; border-radius: 8px; margin: 0 0 12px; }
/* Drill-in: espansione partita doppia (supporto) */
.se-exp-cell { width: 34px; text-align: center; }
.se-exp { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 2px 6px; transition: transform .15s; }
.se-exp.aperto { transform: rotate(180deg); }
.se-exp.caricando { opacity: .4; }
.se-scrittura-box { padding: 8px 12px 10px; background: #f6f7f9; border-radius: 8px; margin: 2px 0; }
.se-dd { width: 100%; border-collapse: collapse; }
.se-dd th, .se-dd td { padding: 4px 10px; font-size: 13px; }
.se-dd th { color: var(--muted); font-weight: 600; text-align: left; border-bottom: 1px solid var(--border); }
.se-dd td.num, .se-dd th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Drill-in: modale più largo + colonna descrizione che prende lo spazio */
.modal-bg.modal-largo .modal { width: min(720px, calc(100vw - 32px)); }
/* v1.0.16: finestra di modifica/storno di una registrazione: conto, Dare, Avere e × senza scrollbar orizzontale */
.modal-bg.modal-registrazione .modal { width: min(860px, calc(100vw - 32px)); }
.se-dett-tab td:nth-child(2), .se-dett-tab th:nth-child(2) { white-space: nowrap; width: 1%; }
.se-dett-tab td:nth-child(3), .se-dett-tab th:nth-child(3) { width: 100%; }
.se-dd th:first-child, .se-dd td:first-child { width: 100%; }
/* Storico modifiche IVA: colonna Cambio larga, Data/Confermato compatte */
.pf-storico-tab td:nth-child(1), .pf-storico-tab th:nth-child(1),
.pf-storico-tab td:nth-child(3), .pf-storico-tab th:nth-child(3) { white-space: nowrap; width: 1%; }
.pf-storico-tab td:nth-child(2), .pf-storico-tab th:nth-child(2) { width: 100%; }
/* Nazione: autocomplete custom (voci blu + icona ricerca) */
.naz-ac { position: relative; }
.naz-ac > input { width: 100%; padding-right: 40px; }
.naz-ac__ico { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #9aa4b2; display: flex; pointer-events: none; }
.naz-ac__drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(16,24,40,.14); max-height: 260px; overflow: auto; }
.naz-ac__opt { padding: 10px 14px; cursor: pointer; color: #1f6fff; font-size: 15px; }
.naz-ac__opt:hover, .naz-ac__opt.is-attivo { background: #f2f5f9; }
.se-dd .num { white-space: nowrap; width: 1%; }
.se-tab td.se-azione { text-align: right; white-space: nowrap; width: 1%; }
.se-tab th { padding: 8px 16px; text-align: left; color: var(--muted); font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--border); }
.se-tab th.num { text-align: right; }

/* ---------- CALENDARIO · VISTA GIORNO (una colonna per operatrice) ---------- */
/* Il tempo e' la POSIZIONE: un blocco piu' in basso inizia piu' tardi, e la sua altezza
   e' la durata. Cosi' i buchi nell'agenda si vedono, invece di doverli dedurre. */
.cal-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
/* Etichetta sopra le pastiglie: senza, quei nomi sembrano decorazione e
   nessuno capisce che sono un filtro da toccare. */
.cal-chips-eti {
    margin: 0 0 6px; font-size: 13px; color: var(--muted); line-height: 1.4;
}
.cal-chip {
    font-size: 15px; padding: 6px 12px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    cursor: pointer; transition: background .15s, border-color .15s;
}
.cal-chip:hover { background: #f1f2f4; }
.cal-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cal-chip.libera { color: var(--muted); }
.cal-chip.on .cal-chip-nota { color: #fff; opacity: .8; }
.cal-chip-nota { font-size: 12px; color: var(--muted); }

/* La griglia e' alta (17 ore): scorre dentro un'area, e all'apertura si posiziona da sola. */
.cal-griglia-wrap {
    max-height: 560px; overflow-y: auto; overflow-x: auto;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.cal-griglia { display: grid; position: relative; min-width: 100%; }
.cal-griglia-head {
    position: sticky; top: 0; z-index: 3;
    background: var(--table-head); color: var(--text);
    font-size: 13px; font-weight: 600; text-align: center; padding: 8px 6px;
    border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-gutter-head { border-right: 1px solid var(--border); }
.cal-gutter { position: relative; border-right: 1px solid var(--border); }
.cal-ora {
    position: absolute; right: 6px; transform: translateY(-50%);
    font-size: 12px; color: var(--muted);
}
.cal-colonna { position: relative; border-right: 1px solid var(--border); }
/* riga d'ora: una linea leggera ogni ora, per leggere il tempo senza contare */
.cal-colonna { background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 60px); }

.cal-blocco {
    position: absolute; left: 4px; right: 4px;
    padding: 5px 8px; box-sizing: border-box; cursor: pointer;
    border-left: 3px solid var(--accent); background: var(--accent-soft);
    overflow: hidden;
}
.cal-blocco.app { background: var(--surface); border-left-color: var(--ok); border: 1px solid var(--border); border-left-width: 3px; }
.cal-blocco:hover { filter: brightness(.97); }
.cal-blocco-tit { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-blocco-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ora attuale: si apre il calendario e si vede subito DOVE si e'. */
.cal-adesso {
    position: absolute; left: 52px; right: 0; height: 0;
    border-top: 2px solid var(--danger); z-index: 2; pointer-events: none;
}
.cal-adesso span {
    position: absolute; left: 2px; top: -9px;
    background: var(--danger); color: #fff; font-size: 12px;
    padding: 1px 5px; border-radius: 6px;
}

/* ===== Schermata Corsi: raggruppamento per giorno, espandibile ===== */
.cor-giorno { margin-bottom: 16px; }
/* La riga del giorno: un elemento a se', staccato dalla scheda dei corsi che
   sta sotto. Prima aveva un grigio quasi identico a quello delle schede
   (si distinguevano per 1,06 su una scala dove 1,00 vuol dire uguali) e non
   c'era rientro: non si capiva cosa apparteneva a cosa. */
.cor-g-head {
    width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: var(--table-head); border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px; font-size: 15px; color: var(--text); text-align: left;
}
.cor-g-head:hover { background: var(--border); }
.cor-g-freccia { font-size: 13px; color: var(--muted); width: 14px; }
.cor-g-nome { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.cor-g-cont { color: var(--muted); font-size: 13px; font-weight: 600; }
/* Il rientro a sinistra e' quello che rende visibile l'appartenenza: i corsi
   stanno dentro il giorno, non accanto. */
.cor-g-body {
    display: flex; flex-direction: column; gap: 8px;
    /* Staccata sotto la riga del giorno e rientrata a sinistra: e' la scheda
       stessa a stare "dentro" il giorno, non solo il suo contenuto. Il bordo
       destro resta allineato, cosi' il rientro si legge senza sprecare
       larghezza su schermi stretti. */
    margin: 8px 0 0 26px;
    padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
/* La classe .chiuso resta sul contenitore del giorno: non serve piu' agli
   angoli (la testata e' sempre chiusa su tutti i lati) ma e' un aggancio utile
   se un domani si vuole trattare il giorno chiuso in modo diverso. */
.cor-g-vuoto { color: var(--muted); font-size: 15px; font-style: italic; padding: 4px 2px; }

/* Bianche come ovunque nell'app, non un grigio inventato qui. Niente ombra:
   stanno dentro una scheda bianca che ce l'ha gia', e due ombre sovrapposte
   sporcano invece di staccare. Sul bianco basta il bordo. */
.cor-card {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px;
}
.cor-card-off { opacity: .55; }
.cor-card-info { flex: 1; min-width: 0; }
.cor-card-riga1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cor-card-ora { font-weight: 700; font-size: 15px; color: var(--muted); }
.cor-card-servizio { color: var(--danger); font-weight: 600; }
.cor-card-op { color: var(--muted); font-size: 15px; }
.cor-card-max { color: var(--muted); font-size: 13px; }
.cor-card-fissi { margin-top: 4px; font-size: 15px; color: var(--text); }
.cor-card-azioni { display: flex; gap: 6px; flex-shrink: 0; }

/* ===== Orari di apertura: 7 giorni, orario di apertura + pausa opzionale ===== */
/* L'impaginazione a sette righe resta propria di questa schermata; il
   contenitore no: e' la scheda standard, come ovunque nell'app. */
.or-riga {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 14px; margin-bottom: 8px;
}
/* Giorno chiuso: sbiadito, per riconoscerlo a colpo d'occhio nella lista. */
.or-riga.or-chiuso { background: var(--bg); opacity: .8; }
.or-giorno { display: flex; align-items: center; gap: 8px; min-width: 190px; }
.or-nome { font-weight: 600; font-size: 15px; }
/* Stessa forma delle altre pastiglie dell'app: niente maiuscolo forzato,
   niente verde inventato qui. */
.or-badge {
    font-size: 12px; font-weight: 600;
    padding: 2px 9px; border-radius: 99px;
    background: var(--ok-soft, #E4F4F0); color: var(--ok);
}
.or-chiuso .or-badge { background: #e5e7eb; color: #6b7280; }
.or-campi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.or-gruppo { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.or-lab { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 6px; }
/* Casella "Pausa": la spunta abilita i due campi della pausa intermedia. */
.or-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; margin-left: 6px; }
.or-check input { width: auto; margin: 0; }
/* Non un campo diverso: il campo standard in versione compatta, per stare
   in una riga fitta. Bordo, raggio e colori restano quelli di tutti. */
.or-in { padding: 6px 9px; border-radius: var(--radius-s, 8px); }
.or-in[type="time"] { min-width: 92px; }
.or-in:disabled { background: var(--bg, #f4f5f7); color: var(--muted); opacity: .65; cursor: not-allowed; }
.or-in.or-invalid { border: 1px solid #c0392b; background: #fdecea; }
.or-sep { color: var(--muted); }

/* Caselle "servizi che sa fare" nella scheda operatore */
.op-servizi { display: flex; flex-direction: column; gap: 6px; }
.op-srv { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.op-srv input { width: 16px; height: 16px; cursor: pointer; }

/* ===== Prenotazione cliente non ancora confermata ===== */
/* Bordo tratteggiato e colore smorzato: si vede a colpo d'occhio che
   l'appuntamento c'è ma non è ancora certo. */
.cal-card.in-attesa {
    border: 1px dashed #d97706;
    background: #fffbeb;
}
.tag-attesa {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 99px;
    background: #fde68a;
    color: #92400e;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

/* Numero condiviso da più schede clienti: da scegliere a mano */
.tag-scegli {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 99px;
    background: #dbeafe;
    color: #1e40af;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    cursor: help;
}

/* Note dell'appuntamento nel pannello di dettaglio */
.campo-note {
    margin-top: 14px;
    padding: 10px 12px;
    background: #fffbea;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 15px;
    white-space: pre-wrap;
}
.campo-note-tit {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #92400e;
    margin-bottom: 4px;
}

/* ===================== Risposte WhatsApp (inbox) ===================== */
/* Due colonne affiancate e alte uguali, come nel vecchio Flow Motion:
   l'elenco a sinistra resta sempre visibile mentre si legge a destra. */
.wi-wrap {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .wi-wrap { grid-template-columns: 1fr; }
    /* Mobile: una schermata alla volta (lista OPPURE chat). */
    .wi-col-lista { max-height: none; }
    .wi-col-chat  { display: none; min-height: 70vh; max-height: none; }
    .wi-wrap.wi-mobile-chat .wi-col-lista { display: none; }
    .wi-wrap.wi-mobile-chat .wi-col-chat  { display: flex; }
    .wi-back { display: inline-flex !important; }
    /* Voci di menu "da scrivania": nascoste su smartphone per non intasare il menu. */
    .em-solo-desktop { display: none !important; }
}
.wi-col-lista {
    padding: 0;
    overflow: hidden;
    max-height: 75vh;
    overflow-y: auto;
}
.wi-col-chat {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 75vh;
    max-height: 75vh;
}

/* --- elenco conversazioni --- */
.wi-conv {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.wi-conv:hover      { background: var(--bg); }
.wi-conv.selezionata { background: #ecfdf5; }
.wi-conv-riga1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.wi-conv-nome { font-weight: 600; font-size: 15px; }
.wi-conv-data { font-size: 12px; color: var(--muted); white-space: nowrap; }
.wi-conv-tel  { font-size: 13px; color: var(--muted); margin-top: 1px; }
.wi-conv-prev {
    font-size: 13px;
    color: var(--text);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wi-badge {
    display: inline-block;
    margin-left: 6px;
    background: #ef4444;
    color: #fff;
    border-radius: 99px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 700;
}

/* --- intestazione e thread --- */
.wi-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.wi-head-info { flex: 1; min-width: 0; }
.wi-back {
    display: none;            /* visibile solo su mobile (vedi @media) */
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
    padding: 0 2px;
    flex: none;
}
.wi-head-nome { font-weight: 600; }
.wi-head-tel  { font-size: 13px; color: var(--muted); margin-top: 2px; }
.wi-thread {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg);
}
.wi-riga { display: flex; margin-bottom: 8px; }
.wi-riga.sx { justify-content: flex-start; }
.wi-riga.dx { justify-content: flex-end; }
.wi-bolla {
    /* Il 75% da solo, su schermo largo, produceva righe di chat lunghissime.
       Il tetto in pixel tiene la riga leggibile; sotto quella soglia resta
       proporzionale come prima. */
    max-width: min(75%, 620px);
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
/* L'angolo squadrato indica da che parte arriva il messaggio. */
.wi-bolla.in  { background: #fff;     border-color: var(--border); border-top-left-radius: 4px; }
.wi-bolla.out { background: #dcfce7;  border-color: #bbf7d0;       border-top-right-radius: 4px; }
.wi-bolla.out.errore { background: #fee2e2; border-color: #fecaca; }
.wi-testo { font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.wi-ora   { font-size: 12px; color: var(--muted); margin-top: 4px; text-align: right; }
.wi-errore { font-size: 12px; color: #b91c1c; margin-top: 4px; }

/* --- riquadro di risposta --- */
.wi-reply { padding: 12px 14px; border-top: 1px solid var(--border); }
.wi-finestra { font-size: 13px; margin-bottom: 8px; }
.wi-finestra.ok { color: #15803d; }
.wi-finestra.ko { color: #b45309; }
.wi-invio { display: flex; gap: 8px; align-items: stretch; }
.wi-invio textarea {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    resize: none;
    font-family: inherit;
    font-size: 15px;
}

/* ============ Notifiche WhatsApp inviate (log) ============ */
/* ---------- BARRA DEI FILTRI (tutte le schermate) ----------
   Una sola forma: una scheda, una griglia che si adatta al numero di filtri,
   un'etichetta sopra ogni campo. Le schermate con un filtro solo occupano una
   colonna, quelle con cinque ne occupano cinque, senza regole diverse.
   Nasceva come .wl-filtri, propria del registro WhatsApp: i vecchi nomi restano
   validi finche' tutte le pagine non usano i nuovi. */
.filtri, .wl-filtri { padding: 14px 16px; margin-bottom: 16px; }
.filtri-griglia, .wl-filtri-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}
/* L'ultimo campo di una barra e' spesso un gruppo di bottoni (Settimana/Giorno/
   Mese, Attivi/Tutti): non deve stirarsi come un campo di testo. */
.filtri-griglia .seg, .wl-filtri-griglia .seg { align-self: end; }
/* Campo spinto al bordo destro della barra: serve per le azioni che agiscono
   sull'elenco (comprimi tutto) e non sul filtraggio. */
.field--destra { justify-self: end; text-align: right; }
.wl-filtri-griglia .field { margin: 0; }
.filtri-piede, .wl-filtri-piede {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    font-size: 13px;
}
.btn-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

/* Una scheda per messaggio: l'esito si vede a sinistra, prima del nome. */
.wl-lista { display: flex; flex-direction: column; gap: 8px; }
.wl-riga {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.wl-riga:hover { border-color: #86efac; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.wl-riga.errore:hover { border-color: #fca5a5; }
.wl-icona {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #16a34a;
}
.wl-riga.errore .wl-icona { color: #dc2626; }
.wl-corpo { flex: 1; min-width: 0; }
.wl-riga1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.wl-nome { font-weight: 600; font-size: 15px; }
.wl-data { font-size: 13px; color: var(--muted); white-space: nowrap; }
.wl-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.wl-tpl  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wl-err  {
    font-size: 13px;
    color: #b91c1c;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wl-testo-reso {
    white-space: pre-wrap;
    background: var(--bg);
    padding: 10px;
    border-radius: 8px;
    font-size: 15px;
}
.wl-pag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

/* Stato reale di consegna: il colore del segno dice tutto senza aprire nulla */
.wl-riga.ok      .wl-icona { color: #16a34a; }
.wl-riga.letto   .wl-icona { color: #2563eb; }
.wl-riga.attesa  .wl-icona { color: #9ca3af; }
.wl-riga.errore  .wl-icona { color: #dc2626; }
.wl-riga.errore:hover { border-color: #fca5a5; }
.wl-stato-txt { font-weight: 600; }
.wl-percorso {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 15px;
    color: var(--muted);
}
.wl-percorso li { margin-bottom: 2px; }

/* Storico dei messaggi a una persona (finestra) */
.wl-storico {
    max-height: 55vh;
    overflow-y: auto;
    padding: 12px;
    margin-top: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.wl-segno { font-weight: 700; margin-right: 4px; }
.wl-segno.ok     { color: #16a34a; }
.wl-segno.letto  { color: #2563eb; }
.wl-segno.attesa { color: #9ca3af; }
.wl-segno.errore { color: #dc2626; }

/* Scelta dell'ambito di un'azione (solo questa / anche le future) */
.scelta-ambito { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.scelta-ambito .scelta {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
}
.scelta-ambito .scelta:hover          { border-color: #f59e0b; background: #fffbeb; }
.scelta-ambito .scelta.pericolo:hover { border-color: #ef4444; background: #fef2f2; }
.scelta-tit { display: block; font-weight: 700; font-size: 15px; }
.scelta-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Appuntamento che fa parte di una serie settimanale */
.tag-ric {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: var(--muted);
    cursor: help;
}
.riga-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.riga-check input { width: auto; margin: 0; }

/* Appuntamento che fa parte di una serie settimanale */
.tag-ric {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: var(--muted);
    cursor: help;
}
.riga-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.riga-check input { width: auto; margin: 0; }

.cc-sep { font-size: 1.2em; opacity: .7; margin: 0 2px; }
.cc-chiusa-txt { color: var(--danger); font-weight: 600; }

/* ===== Wizard di primo avvio (overlay a schermo intero) ===== */
.wiz-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 32px; z-index: 45; background: var(--bg); display: flex; }
.wiz-box { margin: auto; width: 100%; max-width: 900px; height: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: 0 0 40px rgba(0,0,0,.12); }
.wiz-head { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.wiz-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; text-align: center; }
.wiz-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-step { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 3px 11px; white-space: nowrap; }
.wiz-step b { margin-right: 5px; opacity: .7; }
.wiz-step.is-attivo { background: var(--accent); border-color: var(--accent); color: #fff; }
.wiz-step.is-attivo b { opacity: 1; }
.wiz-step.is-fatto { background: var(--ok-soft); border-color: var(--ok-soft); color: var(--ok); }
.wiz-content { flex: 1; overflow-y: auto; padding: 22px 24px; }
.wiz-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border); background: #fff; }
.wiz-foot-sp { flex: 1; }
.wiz-content #pf-salva, .wiz-content #btnSalvaOrari { display: none; }  /* nel wizard salva l'"Avanti" */
.wiz-err { flex: none; margin: 10px 24px 0; padding: 10px 14px; border-radius: 8px; text-align: center;
    background: #FDECEA; border: 1px solid #F3B7B2; color: #B71C1C; font-size: 14px; font-weight: 600; }
/* Nel wizard l'errore inline del form (spesso in fondo) è sostituito dalla barra fissa .wiz-err. */
.wiz-content .form-err { display: none !important; }
/* Nel wizard nascondo titolo e descrizione del form (le chip degli step indicano già il passo).
   Sulle pagine-lista .ph-title contiene titolo+sottotitolo; il bottone "Nuovo" ne è fuori e resta. */
.wiz-content .ph-title, .wiz-content .pf-head { display: none !important; }
@media (max-width: 640px) { .wiz-content { padding: 16px 14px; } .wiz-head { padding: 14px 16px; } .wiz-foot { padding: 12px 16px; } }

/* Mappatura ruoli->conti (M1) */
.map-warning{background:#FFF3D6;border:1px solid #E7C67A;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:.95rem;color:#6b5a1e}
.map-lista{display:flex;flex-direction:column;gap:10px}
.map-riga{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.map-ruolo{min-width:220px;font-weight:600}
.map-sel{flex:1;min-width:220px;max-width:420px}

/* Wizard: passo lingua */
.wiz-lingua{max-width:520px}
.wiz-lingua-tit{margin:.2rem 0 .4rem}
.wiz-lingua-spiega{color:#5A6B85;font-size:.95rem;margin:0 0 16px}
.wiz-lingua-opts{display:flex;flex-direction:column;gap:10px}
.wiz-lingua-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #D9E1EA;border-radius:10px;cursor:pointer}
.wiz-lingua-opt:hover{border-color:#1F7A8C;background:#F2F5F9}
.wiz-lingua-opt input{margin:0}