/* Gelaterie Duomo · componenti dei gestionali (Faro, Eco).
   Fonte: le copie faro*.css dei 4 Design della revisione grafica di Faro (05/10/2026), riunite.
   Ogni regola sta sotto la radice .gest: la pagina mette class="gest" (e "tel" sotto i 640 px).
   Registro GESTIONALI del design system definitivo (07/10/2026). I colori vengono da tokens/colors.css,
   font e misure da tokens/typography.css e shape.css: caricarli prima di questo file. */
.gest{--focus-ring:var(--celeste-scuro);font-family:var(--font-corpo);font-size:14px;line-height:1.5;color:var(--ink);background:var(--bianco);box-sizing:border-box;position:relative}
.gest *,.gest *::before,.gest *::after{box-sizing:border-box}
.gest h1,.gest h2,.gest h3,.gest p{margin:0}
/* niente zoom col doppio tocco su bottoni e campi (si toccano a raffica, es. i contatori − N +);
   lo zoom con due dita resta. :where tiene la regola leggera: un componente può cambiarla */
.gest :where(a,button,input,select,textarea,summary,label,[role=button]){touch-action:manipulation}
/* l'attributo hidden vince sui display dei componenti (.btn, .li, .field… hanno un display proprio) */
.gest [hidden]{display:none !important}

/* tipografia */

.gest .bebas{font-family:var(--font-titolo);font-weight:400;letter-spacing:.02em;line-height:.95;text-transform:uppercase}
.gest .h1{font-size:44px}
.gest .h1t{font-size:36px}
.gest .h2{font-size:28px}
.gest .h3{font-size:22px}
.gest .lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.gest .eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--celeste-scuro)}
.gest .muted{color:var(--ink-3)}
.gest .small{font-size:13px}
.gest .strong{font-weight:600}
.gest .num{font-variant-numeric:tabular-nums}
.gest .r{text-align:right}

/* Button */

.gest .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--linea);background:var(--bianco);color:var(--ink);font:600 14px/1.2 var(--font-corpo);text-decoration:none;cursor:pointer;white-space:nowrap}
.gest .btn:hover{background:var(--celeste-15);border-color:var(--celeste-50)}
.gest .btn-celeste{background:var(--celeste);border-color:var(--celeste);color:var(--su-celeste)}
.gest .btn-celeste:hover{background:var(--celeste-hover);border-color:var(--celeste-hover)}
.gest .btn-danger{color:var(--bad-fg);border-color:var(--bad-bordo)}
.gest .btn-danger:hover{background:var(--bad-bg);border-color:var(--bad-bordo)}
.gest .btn-full{width:100%}
.gest .btn-row{display:flex;flex-wrap:wrap;gap:8px}
.gest .link{color:var(--celeste-scuro);font-weight:600;text-decoration:var(--link-riga);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.gest .link:hover{color:var(--celeste-scuro)}
/* link d'azione scritto come bottone ("← Turni", "Crea", "Apri"): stesso aspetto di a.link */
.gest button.link{background:none;border:0;padding:0;font:600 14px var(--font-corpo);cursor:pointer;align-self:flex-start}
/* testo solo per i lettori di schermo (es. intestazione di una colonna senza titolo visibile) */
.gest .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Badge */

.gest .badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* stati (§7.3): errore, avviso e conferma hanno SEMPRE icona + parola. L'icona la disegna il CSS
   (::before, colore del testo); la parola la scrive la pagina. Non togliere l'icona per far spazio. */
.gest :is(.b-ok,.b-warn,.b-bad,.err,.okmsg)::before{content:"";flex:none;width:1.15em;height:1.15em;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.gest :is(.b-ok,.okmsg){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.gest .b-warn{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E")}
.gest :is(.b-bad,.err){--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E")}
.gest .badge:is(.b-ok,.b-warn,.b-bad){gap:4px;padding-left:7px}
.gest .err::before{margin-top:1px}
.gest .b-ok{background:var(--ok-bg);color:var(--ok-fg)}
.gest .b-warn{background:var(--warn-bg);color:var(--warn-fg)}
.gest .b-bad{background:var(--bad-bg);color:var(--bad-fg)}
.gest .b-neutral{background:var(--linea-tenue);color:var(--ink-3)}
.gest .b-brand{background:var(--celeste-30);color:var(--celeste-scuro)}

/* Card, KpiCard */

.gest .card{background:var(--bianco);border:1px solid var(--linea);border-radius:12px}
.gest .pad{padding:18px 18px}
.gest .padl{padding:22px 24px}
.gest .kpi{border:1px solid var(--linea);border-radius:10px;padding:14px 18px;background:var(--bianco);min-width:0}
.gest .kpi .v{font-family:var(--font-titolo);font-size:38px;line-height:1;letter-spacing:.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.gest .kpi.warn{background:var(--warn-bg);border-color:var(--warn-bordo)}
.gest .kpi.warn .v{color:var(--warn-fg)}
.gest .kpi.warn .lbl{color:var(--warn-fg)}
.gest .kpis{display:grid;gap:12px}

/* TabGroup */

.gest .tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--linea-tenue)}
.gest .tab{min-height:36px;padding:0 14px;border-radius:999px;border:0;background:transparent;font:500 13px/1 var(--font-corpo);color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.gest .tabs.l .tab{min-height:44px;padding:0 15px;font-size:14px}
/* telefono: anche le pillole piccole sono alte 44 px (ogni area toccabile, senza eccezioni) */
.gest.tel .tabs .tab{min-height:44px}
.gest .tab.on{background:var(--bianco);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(28,36,43,.10)}

/* schede interne (sottolineate) */

.gest .itabs{display:flex;gap:4px;border-bottom:1px solid var(--linea)}
.gest .itab{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;font:600 14px var(--font-corpo);color:var(--ink-3);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;text-decoration:none;white-space:nowrap}
.gest .itab.on{color:var(--ink);border-bottom-color:var(--celeste-scuro)}

/* Input, Select */

.gest .input{height:44px;border:1px solid var(--linea);border-radius:8px;padding:0 14px;font:400 14px var(--font-corpo);color:var(--ink);background:var(--bianco);width:100%}
.gest .input.pill{border-radius:999px}
.gest.tel .input{font-size:16px}
.gest textarea.input{height:86px;padding:12px 14px;resize:vertical}
.gest .field{display:flex;flex-direction:column;gap:6px}

/* liste compatte */

.gest .list{border:1px solid var(--linea);border-radius:12px;background:var(--bianco);overflow:hidden}
.gest .li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-top:1px solid var(--linea-tenue);text-decoration:none;color:inherit}
.gest .li:first-child{border-top:0}
.gest .li:hover{background:var(--celeste-15)}
.gest .li.sel{background:var(--celeste-30)}
.gest .li .grow{flex:1;min-width:0}
.gest .li .t{font-weight:600;color:var(--ink)}
.gest .li .d{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gest .li.dense{min-height:48px;padding:6px 14px}
.gest .li.airy{min-height:72px;padding:12px 16px}
/* riga che fa qualcosa nella pagina (sceglie, apre un foglio): <button class="li">, senza i bordi
   e lo sfondo del bottone; passaggio e selezione restano quelli della riga */
.gest button.li{width:100%;border-left:0;border-right:0;border-bottom:0;background:transparent;font:inherit;text-align:left;cursor:pointer}
.gest .grp{display:flex;justify-content:space-between;align-items:baseline;padding:18px 4px 8px}
.gest .chev{color:var(--ink-3)}

/* DataTable */

.gest .dt{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--linea);border-radius:12px;overflow:hidden;box-shadow:var(--ombra);background:var(--bianco)}
.gest .dt th{background:var(--panna);text-align:left;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:11px 14px;border-bottom:1px solid var(--linea);white-space:nowrap}
.gest .dt td{padding:10px 14px;border-bottom:1px solid var(--linea-tenue);vertical-align:middle}
.gest .dt tr:last-child td{border-bottom:0}
.gest .dt tbody tr:nth-child(even) td{background:var(--zebra)}
.gest .dt tbody tr.sel td{background:var(--celeste-30)}
.gest .dt td.n{font-weight:600}
.gest .dt .r{text-align:right}
.gest .dt.dense td{padding:7px 14px}
/* tabella più larga del suo spazio: scorre di lato dentro .dt-scorre (la pagina no) e la prima
   colonna (.ferma su th e td) resta ferma a sinistra col suo fondo */
.gest .dt-scorre{overflow-x:auto;max-width:100%}
/* overflow:hidden della tabella la renderebbe lei il riquadro che scorre e la colonna non si fermerebbe:
   clip taglia gli angoli tondi allo stesso modo senza farlo */
.gest .dt-scorre .dt{overflow:clip}
.gest .dt .ferma{position:sticky;left:0;z-index:1;background:var(--bianco)}
.gest .dt th.ferma{background:var(--panna)}

/* definizioni in sola lettura */

.gest .dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 24px}
.gest .dl .lbl{display:block;margin-bottom:3px}
.gest .sec{margin-top:26px}
.gest .sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--linea-tenue);margin-bottom:14px}

/* InfoBox / avviso inline */

.gest .info{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--warn-bg);color:var(--ink);font-size:13px}
.gest .info .ico{color:var(--warn-fg);margin-top:1px}
.gest .okline{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ok-fg);padding:10px 4px}

/* zona delle azioni distruttive */

.gest .zona{margin-top:34px;padding-top:18px;border-top:1px solid var(--linea)}

/* icone Lucide inline (decorative) */

.gest .ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gest .i16{width:16px;height:16px}
.gest .i20{width:20px;height:20px}

/* guscio */

.gest .wm{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-titolo);font-size:27px;letter-spacing:.02em;line-height:1;color:var(--ink);text-decoration:none}
.gest .wm::before{content:"";width:4px;height:26px;background:var(--celeste);border-radius:2px}
.gest .topbar{position:sticky;top:0;z-index:5;background:var(--bianco);border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:10px;padding:0 16px;height:60px}
.gest .count{margin-left:auto;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--warn-bg);color:var(--warn-fg);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.gest .count.inl{margin-left:6px}

/* A · barra laterale */

.gest .side{width:248px;flex:none;border-right:1px solid var(--linea);background:var(--bianco);display:flex;flex-direction:column;padding:22px 14px 18px;gap:2px}
.gest .nav-i{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:999px;color:var(--ink-2);font-weight:500;text-decoration:none}
.gest .nav-i:hover{background:var(--celeste-15)}
.gest .nav-i.on{background:var(--celeste-30);color:var(--celeste-scuro);font-weight:700}
.gest .nav-g{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:16px 12px 4px}
.gest .acct{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:56px;padding:8px 12px;border-radius:12px;border:1px solid var(--linea);background:var(--bianco);text-decoration:none;color:var(--ink);cursor:pointer;font-family:inherit;text-align:left}
.gest .acct:hover{background:var(--celeste-15);border-color:var(--celeste-50)}

/* A · barra in basso */

.gest .bbar{position:sticky;bottom:0;z-index:6;display:grid;background:var(--bianco);border-top:1px solid var(--linea);padding:6px 6px 22px}
.gest .bb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;font-size:12px;font-weight:500;color:var(--ink-3);text-decoration:none;position:relative}
.gest .bb .p{padding:4px 18px;border-radius:999px;display:flex}
.gest .bb.on{color:var(--celeste-scuro);font-weight:700}
.gest .bb.on .p{background:var(--celeste-30)}
.gest .bb .dot{position:absolute;top:2px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--warn-bg);color:var(--warn-fg);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1px solid var(--warn-bordo)}

/* fogli e finestre */

.gest .veil{position:absolute;inset:0;background:rgba(28,36,43,.45);z-index:20}
.gest .sheet{box-shadow:var(--ombra-alta);position:absolute;left:0;right:0;bottom:0;background:var(--bianco);border-radius:16px 16px 0 0;z-index:21;padding:8px 16px 26px}
.gest .handle{width:40px;height:5px;border-radius:3px;background:var(--linea);margin:4px auto 14px}
.gest .drawer{position:absolute;top:0;right:0;bottom:0;width:480px;background:var(--bianco);border-left:1px solid var(--linea);box-shadow:var(--ombra-alta);z-index:21;display:flex;flex-direction:column}
.gest .drawer-h{background:var(--panna);padding:20px 24px 18px;border-bottom:1px solid var(--linea)}
.gest .drawer-b{padding:20px 24px;flex:1;overflow:hidden}
.gest .drawer-f{padding:14px 24px;border-top:1px solid var(--linea-tenue);background:var(--zebra);display:flex;gap:8px}
/* nella pagina vera: lo strato delle finestre (class="gest fisso") copre lo schermo e ci resta
   mentre la pagina scorre; nelle tavole velo e finestre restano "absolute" dentro la cornice */
.gest.fisso{position:fixed;inset:0;z-index:1000;background:transparent}
.gest.fisso :is(.veil,.sheet,.modal-wrap,.drawer){position:fixed}

/* Timbrature */

.gest .anom{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-top:1px solid var(--linea-tenue)}
.gest .anom:first-of-type{border-top:0}
.gest .day{font-size:13px;font-weight:700;color:var(--ink-2);padding:16px 2px 8px}
.gest .chk{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.gest .chk input{width:20px;height:20px;accent-color:var(--celeste-scuro);margin:0}
.gest .strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px;border:1px solid var(--linea);border-radius:12px;background:var(--bianco)}
.gest .month{display:inline-flex;align-items:center;gap:8px}
.gest .rnd{width:44px;height:44px;border-radius:999px;border:1px solid var(--linea);background:var(--bianco);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);font-size:20px;cursor:pointer}
.gest .closed{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 16px;border:1px solid var(--linea);border-radius:12px;background:var(--bianco)}

/* ---- giro 2 ---- */

.gest .modal-wrap{position:absolute;inset:0;z-index:30;display:flex;justify-content:center;align-items:flex-start;padding-top:72px}
.gest .modal{width:480px;background:var(--bianco);border-radius:16px;overflow:hidden;box-shadow:var(--ombra-alta);position:relative;z-index:31}
.gest .modal-h{background:var(--panna);padding:22px 26px 18px;border-bottom:1px solid var(--linea)}
.gest .modal-b{padding:22px 26px;display:flex;flex-direction:column;gap:14px}
.gest .modal-f{padding:14px 26px;background:var(--zebra);border-top:1px solid var(--linea-tenue);display:flex;gap:8px;justify-content:flex-end;align-items:center}
/* bottoni del foglio: "Annulla" stretto, l'ultimo (la primaria) prende il resto */
.gest .sheet .azioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.gest .sheet .azioni .btn:last-child{flex:1}
/* la distruttiva va scritta per prima nel piede: all'estremità sinistra su computer (Modal,
   PannelloLaterale), sotto gli altri e a tutta larghezza nel foglio del telefono */
.gest :is(.modal-f,.drawer-f) .btn-danger:first-child{margin-right:auto}
.gest .sheet .azioni .btn-danger:first-child{order:3;flex:1 1 100%}
.gest .pillc{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linea);background:var(--bianco);font:500 14px var(--font-corpo);color:var(--ink);cursor:pointer;white-space:nowrap}
.gest .pillc.on{background:var(--celeste-30);border-color:var(--celeste-50);color:var(--celeste-scuro);font-weight:600}
.gest .pillc input{accent-color:var(--celeste-scuro);margin:0;width:16px;height:16px}
.gest .scale{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.gest.tel .scale{grid-template-columns:repeat(5,minmax(0,1fr))}
.gest .sc{min-height:44px;border:1px solid var(--linea);border-radius:10px;background:var(--bianco);font:600 15px var(--font-corpo);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.gest .sc.on{background:var(--celeste);border-color:var(--celeste);color:var(--su-celeste)}
.gest .q{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-top:1px solid var(--linea-tenue)}
.gest .q:first-child{border-top:0;padding-top:0}
.gest .err{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:var(--bad-bg);color:var(--bad-fg);font-size:13px;font-weight:600}
.gest .okmsg{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:8px;background:var(--ok-bg);color:var(--ok-fg);font-size:13px;font-weight:600}
.gest .input.bad{border-color:var(--bad-fg)}
.gest .empty{background:var(--panna);border:1px solid var(--linea);border-radius:12px;padding:30px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.gest .infobox{background:var(--panna);border:1px solid var(--linea);border-left:4px solid var(--warn-fg);border-radius:10px;padding:12px 16px}
.gest .infobox ul{margin:6px 0 0;padding-left:18px}
.gest .infobox li{margin:2px 0}
.gest .hint{font-size:13px;color:var(--ink-3)}
.gest .file{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:4px 4px 4px 14px;border:1px solid var(--linea);border-radius:10px;background:var(--bianco)}
.gest .page-h{display:flex;flex-direction:column;gap:6px}

/* ---- giro 7: stati ---- */

.gest .skel{background:var(--linea-tenue);border-radius:8px}
.gest .skel-t{height:14px;width:60%}
.gest .skel-s{height:12px;width:40%;margin-top:8px}
.gest .skel-row{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:8px 14px;border-top:1px solid var(--linea-tenue)}
.gest .skel-row:first-child{border-top:0}
.gest .loading{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);padding:4px 2px}
/* T6 (Design 5 di Faro, 07/10/2026): spento leggibile. L'opacità .6 sul celeste dava 2,75:1
   (Caffè 2,28:1), sotto 4,5. Fondo linea-tenue e testo ink-2: 8,57:1 nei due temi. */
.gest .btn[disabled],.gest .btn[disabled]:hover{opacity:1;cursor:not-allowed;background:var(--linea-tenue);border-color:var(--linea);color:var(--ink-2)}

/* Faro · progetto 2 (Colloqui, Accesso, Utenti, Guida) — SOLO le forme nuove.
   faro.css è copiato dal progetto 1 così com'è e si carica prima di questo file:
   qui non si ridefinisce nessuna sua classe. Valori solo dai token del design system. */

/* --- scena celeste (login, invito, candidatura pubblica) --- */

.gest .scena{background:var(--celeste);display:flex;flex-direction:column;min-height:100%}
/* nella pagina vera la scena riempie lo schermo (nelle tavole riempie la cornice) */
.gest .scena.schermo{min-height:100vh;min-height:100dvh}
.gest .scena-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px 16px;gap:12px}
.gest .scena-logo{width:140px;height:auto;display:block}
.gest .scena-card{width:100%;max-width:380px;background:var(--bianco);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--ombra);padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px}
.gest .scena-card.larga{max-width:520px}
.gest .scena-nota{font-size:13px;color:var(--su-celeste);text-align:center;max-width:340px;line-height:1.5}
/* nuvola Coppetta del grafico (svg inline, viewBox 0 0 2834.7 119.8, preserveAspectRatio xMidYMax slice):
   altezza minima --nuvola-h, sugli schermi stretti si ritaglia ai lati. Nei gestionali solo nella
   scena di accesso e nella pagina personale. */
.gest .nuvola{display:block;width:100%;height:auto;min-height:var(--nuvola-h);margin-bottom:-1px}
.gest .nuvola path{fill:var(--panna)}
.gest .fascia-panna{height:32px;background:var(--panna)}

/* --- consenso a misura di dito --- */

.gest .consenso{display:flex;gap:12px;align-items:flex-start;min-height:56px;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;background:var(--bianco);cursor:pointer;font-size:14px}
.gest .consenso.on{background:var(--celeste-15);border-color:var(--celeste-50)}
.gest .consenso input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--celeste-scuro)}

/* --- risposte del questionario, una per riga --- */

.gest .opts{display:flex;flex-direction:column;gap:8px}
.gest .opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border:1px solid var(--linea);border-radius:10px;background:var(--bianco);font:500 15px var(--font-corpo);color:var(--ink);cursor:pointer;text-align:left;width:100%}
.gest .opt .tondo{width:20px;height:20px;border-radius:50%;border:2px solid var(--linea);flex:none}
.gest .opt.on{background:var(--celeste-30);border-color:var(--celeste-50);color:var(--celeste-scuro);font-weight:700}
.gest .opt.on .tondo{border:6px solid var(--celeste-scuro)}
.gest .avanz{height:8px;border-radius:999px;background:var(--linea-tenue);overflow:hidden}
.gest .avanz div{height:8px;background:var(--celeste-scuro);border-radius:999px}

/* --- scelte a pillola in griglia (Sì/No, giorni) --- */

.gest .scelte{display:grid;gap:8px}
.gest .scelte .pillc{justify-content:center}

/* --- punteggio --- */

.gest .punti{font-family:var(--font-titolo);letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums}
.gest .punti small{font-family:var(--font-corpo);font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-left:2px}

/* --- colpo d'occhio delle 9 dimensioni e scala bipolare --- */

.gest .b9{display:grid;grid-template-columns:minmax(0,1fr) 120px 34px;align-items:center;gap:6px 12px;min-height:32px}
.gest .b9 .n{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gest .trk{position:relative;height:6px;border-radius:999px;background:var(--linea-tenue)}
.gest .trk .mid{position:absolute;left:50%;top:-3px;width:1px;height:12px;background:var(--linea)}
.gest .trk .dot{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--celeste-scuro);border:2px solid var(--bianco);box-shadow:0 0 0 1px var(--celeste-scuro)}
.gest .bip{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid var(--linea-tenue)}
.gest .bip:first-child{border-top:0}
.gest .bip .poli{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:600;color:var(--celeste-scuro)}
.gest .bip .poli span:last-child{text-align:right;color:var(--ink-3)}
.gest .bip .trk{height:8px}

/* --- storia (stessa forma di "Prima dell'assunzione" del progetto 1) --- */

.gest .tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gest .tl-i{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--linea-tenue)}
.gest .tl-i:first-child{border-top:0}
.gest .tl-dot{width:10px;height:10px;border-radius:50%;background:var(--linea);margin-top:6px;flex:none}
.gest .tl-dot.ok{background:var(--ok-fg)}
.gest .tl-dot.bad{background:var(--bad-fg)}
.gest .tl-az{display:flex;gap:16px;margin-top:2px}
.gest .tl-az button{min-height:44px;padding:0;border:0;background:none;font:600 13px var(--font-corpo);color:var(--celeste-scuro);cursor:pointer}
.gest .tl-az button.rosso{color:var(--bad-fg)}

/* --- area "Prossimo passo" --- */

.gest .passo{border:1px solid var(--celeste-50);background:var(--celeste-15);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.gest .passo-dec{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--celeste-50)}

/* --- intestazioni di tabella ordinabili --- */

.gest .dt th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:44px}
.gest .dt.alta th{padding-top:0;padding-bottom:0;height:44px}
.gest .dt th button.on{color:var(--ink)}
.gest .dt tbody tr{cursor:pointer}

/* --- etichetta CV accanto al nome --- */

.gest .cv{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;background:var(--celeste-30);color:var(--celeste-scuro);font-size:11px;font-weight:700;letter-spacing:.04em;margin-left:6px;vertical-align:middle}

/* --- punto vendita assegnato a un responsabile, con "Togli" a misura di dito --- */

.gest .chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 0 0 14px;border-radius:999px;background:var(--celeste-30);color:var(--celeste-scuro);font-size:13px;font-weight:600}
.gest .chip button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--celeste-50);background:var(--bianco);font:600 12px var(--font-corpo);color:var(--ink-2);cursor:pointer}

/* --- campo file --- */

.gest .filebox{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 6px 6px 14px;border:1px dashed var(--celeste-50);border-radius:10px;background:var(--bianco)}
.gest .dt.alta td{height:48px}
.gest details>summary.link{display:flex;align-items:center}

/* Faro · progetto 3 (Turni) — SOLO le forme nuove.
   Si carica dopo faro.css (progetto 1) e faro2.css (progetto 2): qui non si ridefinisce nessuna
   loro classe. Valori solo dai token del design system; i colori dei turni sono i dati del
   modulo (PALETTE_TURNI e colori di Apertura/Intermedio/Chiusura), non token del brand. */

/* --- testata del flusso: barra di avanzamento e posizione --- */

.gest .passo-bar{height:6px;border-radius:999px;background:var(--linea-tenue);overflow:hidden}
.gest .passo-bar div{height:6px;border-radius:999px;background:var(--celeste-scuro)}
.gest .passo-n{font-size:13px;font-weight:600;color:var(--ink-3)}

/* --- elenco dei passi a sinistra (computer) --- */

.gest .passi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:p}
.gest .passi li{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:10px;font-size:14px;color:var(--ink-3)}
.gest .passi li .nr{width:24px;height:24px;border-radius:999px;border:1px solid var(--linea);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;background:var(--bianco);color:var(--ink-3)}
.gest .passi li.fatto{color:var(--ink-2)}
.gest .passi li.fatto .nr{background:var(--ok-bg);border-color:var(--ok-bg);color:var(--ok-fg)}
.gest .passi li.on{background:var(--celeste-30);color:var(--celeste-scuro);font-weight:700}
.gest .passi li.on .nr{background:var(--celeste-scuro);border-color:var(--celeste-scuro);color:var(--bianco)}
.gest .passi li.salta{color:var(--ink-3);text-decoration:line-through}

/* --- piede del flusso: Indietro / Avanti --- */

.gest .piede{display:flex;align-items:center;gap:10px;border-top:1px solid var(--linea);background:var(--bianco)}
.gest.tel .piede{position:sticky;bottom:0;z-index:6;padding:12px 16px 26px}
.gest.tel .piede .btn-celeste{flex:1}

/* --- contatore − N + (giorni, ore di riposo, persone) --- */

.gest .cont{display:inline-flex;align-items:center;gap:4px;flex:none}
.gest .cont button{width:44px;height:44px;border-radius:999px;border:1px solid var(--linea);background:var(--bianco);font:600 20px/1 var(--font-corpo);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.gest .cont button:hover{background:var(--celeste-15);border-color:var(--celeste-50)}
.gest .cont .v{min-width:40px;text-align:center;font-family:var(--font-titolo);font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.gest .cont .v.zero{color:var(--ink-3)}
.gest .avviso-altrove{font-size:13px;color:var(--ink-3);margin-top:2px}
.gest .avviso-altrove.grave{color:var(--bad-fg);font-weight:600}

/* --- sette giorni a tasti (prestito, richieste, giorni della settimana) --- */

.gest .g7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.gest .g7 button{min-height:52px;border:1px solid var(--linea);border-radius:10px;background:var(--bianco);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;font:600 12px/1.15 var(--font-corpo);color:var(--ink-2);cursor:pointer;text-align:center}
.gest .g7 button .gd{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.gest .g7 button .gn{font-family:var(--font-titolo);font-size:20px;line-height:1;color:var(--ink)}
.gest .g7 button.on{background:var(--celeste-30);border-color:var(--celeste-50);color:var(--celeste-scuro)}
.gest .g7 button.tolto{background:var(--bad-bg);border-color:var(--bad-bordo);color:var(--bad-fg);text-decoration:line-through}
.gest .g7 button[disabled]{opacity:.45;cursor:default}
.gest .g7.alta button{min-height:64px}

/* --- sezione con titolo dentro un passo --- */

.gest .sez{display:flex;flex-direction:column;gap:10px}
.gest .sez + .sez{margin-top:26px}
.gest .sez-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--linea-tenue)}

/* --- settimane raggruppate (ingresso) --- */

.gest .sett-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 4px 8px}
.gest .sett-h .quando{font-weight:700;color:var(--ink)}
.gest .pv-dot{background:var(--c);display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle;flex:none}

/* --- colori dei turni: tinta chiara con filetto pieno a sinistra (colore = --c) --- */

.gest .turno{position:relative;background:color-mix(in srgb,var(--c) 22%,var(--bianco));border-radius:8px;box-shadow:inset 3px 0 0 var(--c);color:var(--ink)}
.gest .turno-dot{display:inline-block;width:12px;height:12px;border-radius:4px;background:color-mix(in srgb,var(--c) 22%,var(--bianco));box-shadow:inset 3px 0 0 var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,var(--bianco));vertical-align:middle;flex:none}
.gest .legenda-t{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2)}
.gest .legenda-t span{display:inline-flex;align-items:center;gap:6px}

/* --- anteprima della settimana, computer: tabella persone × giorni --- */

.gest .tt{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--bianco);table-layout:fixed}
.gest .tt th{background:var(--panna);font-size:12px;font-weight:600;color:var(--ink-2);padding:8px 6px;border-bottom:1px solid var(--linea);text-align:center;white-space:nowrap}
.gest .tt th.p{text-align:left;padding-left:14px}
.gest .tt th .gn{display:block;font-family:var(--font-titolo);font-size:20px;line-height:1;color:var(--ink);margin-top:2px;font-weight:400}
.gest .tt th.buco{background:var(--bad-bg);border-bottom-color:var(--bad-bordo)}
.gest .tt th.buco,.gest .tt th.buco .gn{color:var(--bad-fg)}
.gest .tt td{padding:4px;border-bottom:1px solid var(--linea-tenue);vertical-align:middle;height:56px}
.gest .tt td.p{padding:6px 10px 6px 14px}
.gest .tt td.ore{text-align:right;padding-right:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.gest .tt tr:last-child td{border-bottom:0}
.gest .tt tfoot td{background:var(--zebra);border-top:1px solid var(--linea);height:44px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.gest .tt tfoot td.p{text-align:left;font-weight:600;color:var(--ink-2)}
.gest .tt tfoot td.buco{color:var(--bad-fg);background:var(--bad-bg)}

/* cella toccabile */

.gest .cella{width:100%;min-height:48px;border:0;border-radius:8px;padding:4px 4px 4px 9px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;font:600 13px/1.2 var(--font-corpo);color:var(--ink);cursor:pointer;text-align:left;font-variant-numeric:tabular-nums;background:transparent}
.gest .cella .fine{font-weight:500;color:var(--ink-2)}
.gest .cella .nome{font-weight:700}
.gest .cella.turno{background:color-mix(in srgb,var(--c) 22%,var(--bianco))}
.gest .cella.riposo{background:var(--bianco);border:1px solid var(--linea-tenue);color:var(--ink-3);font-weight:500;align-items:center;padding-left:4px}
.gest .cella.altrove{background:var(--bianco);border:1px dashed var(--bad-fg);color:var(--bad-fg);font-weight:700;font-size:12px;align-items:center;padding-left:4px;text-align:center;cursor:default}
.gest .cella.toccata{outline:2px solid var(--celeste-scuro);outline-offset:1px}

/* --- anteprima della settimana, telefono: una striscia per persona --- */

.gest .str{border:1px solid var(--linea);border-radius:12px;background:var(--bianco);padding:10px 10px 12px}
.gest .str-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 2px 8px}
.gest .str-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.gest .str-g .gg{font-size:12px;font-weight:700;text-align:center;color:var(--ink-3);padding-bottom:2px}
.gest .str-g .gg.buco{color:var(--bad-fg)}
.gest .str-g .cella{min-height:52px;padding:4px 2px 4px 6px;font-size:12px}
.gest .str-g .cella.riposo,.gest .str-g .cella.altrove{padding-left:2px}
.gest .str-g .cella.altrove{font-size:11px;line-height:1.15}

/* --- riquadro "in servizio" per giorno, telefono --- */

.gest .serv{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.gest .serv div{min-height:44px;border-radius:8px;background:var(--zebra);border:1px solid var(--linea-tenue);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--ink-3)}
.gest .serv div b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.gest .serv div.buco{background:var(--bad-bg);border-color:var(--bad-bordo);color:var(--bad-fg)}
.gest .serv div.buco b{color:var(--bad-fg)}

/* --- conto della serva in cima all'anteprima --- */

.gest .conto{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.gest .conto .n{font-family:var(--font-titolo);font-size:32px;line-height:1;font-variant-numeric:tabular-nums}

/* --- righe di avviso e di archivio dentro l'anteprima --- */

.gest .avv{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--linea-tenue);font-size:13px}
.gest .avv:first-child{border-top:0}
.gest .avv .g{flex:none;width:92px;font-weight:700;color:var(--ink)}
.gest .avv ul{margin:4px 0 0;padding-left:18px;color:var(--ink-2)}

/* --- orari dell'avviso copertura, uno per giorno --- */

.gest .orari{display:flex;flex-direction:column;gap:6px}
.gest .orari .riga{display:grid;grid-template-columns:110px minmax(0,1fr) 14px minmax(0,1fr);align-items:center;gap:8px}
.gest .orari .riga span.tr{text-align:center;color:var(--ink-3)}

/* --- griglia delle richieste personali, computer --- */

.gest .rq{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.gest .rq th{font-size:12px;font-weight:600;color:var(--ink-3);text-align:center;padding:2px}
.gest .rq th.p{text-align:left;padding-left:4px}
.gest .rq td.p{font-weight:600;padding-left:4px}
.gest .rq button{width:100%;min-height:48px;border:1px solid var(--linea);border-radius:10px;background:var(--bianco);font:600 13px/1.2 var(--font-corpo);color:var(--ink-3);cursor:pointer}
.gest .rq button.on{background:var(--celeste-30);border-color:var(--celeste-50);color:var(--celeste-scuro)}
.gest .rq button.attesa{background:var(--warn-bg);border-color:var(--warn-bordo);color:var(--warn-fg)}

/* --- menu delle impostazioni su computer --- */

.gest .menu-imp{display:flex;flex-direction:column;gap:2px}
.gest .menu-imp .nav-i{border-radius:10px;min-height:48px;justify-content:space-between}
.gest .menu-imp .nav-g{padding-left:12px}

/* =================== pagina personale del collaboratore (io.html) =================== */

.gest .io{background:var(--panna);min-height:100%}
.gest .io-hero{background:var(--celeste);padding:26px 20px 6px}
.gest .io-hero .sopra{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--su-celeste)}
.gest .io-hero h1{font-family:var(--font-titolo);font-weight:400;font-size:44px;line-height:.95;letter-spacing:.01em;margin:6px 0 0;color:var(--su-celeste)}
.gest .io .nuvola{background:var(--celeste);margin-top:-1px}
.gest .io-wrap{padding:0 16px 40px}
.gest .io h2{font-family:var(--font-titolo);font-weight:400;font-size:28px;letter-spacing:.01em;margin:30px 0 10px}
.gest .prox{margin-top:6px;background:var(--bianco);border-radius:14px;box-shadow:var(--ombra);padding:18px 18px 16px;display:flex;gap:14px;align-items:center}
.gest .prox .tondo{width:54px;height:54px;border-radius:999px;display:grid;place-items:center;background:var(--celeste-30);color:var(--celeste-scuro);flex:none}
.gest .prox .tondo.sera{background:var(--ink);color:var(--panna)}
.gest .prox .quando{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--celeste-scuro)}
.gest .prox .orario{font-family:var(--font-titolo);font-size:36px;line-height:1;margin:3px 0 2px}
.gest .prox .dove{font-size:13px;color:var(--ink-3)}
.gest .io-tabs{display:flex;gap:6px;padding:4px;background:var(--bianco);border:1px solid var(--linea);border-radius:999px;margin-bottom:10px}
.gest .io-tabs button{flex:1;min-height:44px;border-radius:999px;border:0;background:none;font:600 14px var(--font-corpo);color:var(--ink-3);cursor:pointer}
.gest .io-tabs button.on{background:var(--celeste);color:var(--su-celeste)}
.gest .gr{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--linea-tenue)}
.gest .gr:first-child{border-top:0}
.gest .gr .data{width:44px;text-align:center;flex:none}
.gest .gr .dow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.gest .gr .num{font-family:var(--font-titolo);font-size:28px;line-height:1}
.gest .gr .cosa{flex:1;min-width:0}
.gest .gr .ore{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.gest .gr.riposo .ore{font-weight:500;color:var(--ink-3)}
.gest .gr.passato{opacity:.5}
.gest .gr.oggi{background:var(--celeste-30)}
.gest .tp{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.gest .tp.mattina{background:var(--celeste-30);color:var(--celeste-scuro)}
.gest .tp.sera{background:var(--ink);color:var(--panna)}
.gest .tp.oggi{background:var(--celeste-scuro);color:var(--bianco);font-size:12px;letter-spacing:.08em;padding:3px 8px;margin-left:6px;vertical-align:middle}
.gest .gr.oggi .tp.mattina{background:var(--bianco)}
.gest .io-rq{padding:16px 12px}
.gest .io-sett{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gest .io-sett b{font-size:16px}
.gest .io-chip{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;border-radius:10px;padding:10px 12px;margin-top:12px}
.gest .io-chip.ok{background:var(--ok-bg);color:var(--ok-fg)}
.gest .io-chip.vicina{background:var(--warn-bg);color:var(--warn-fg)}
.gest .io-chip.chiusa{background:var(--bad-bg);color:var(--bad-fg)}
.gest .tacche{display:flex;align-items:center;gap:10px;margin:14px 0 12px;font-size:13px;font-weight:600;color:var(--ink-2)}
.gest .tacche .barre{display:flex;gap:4px}
.gest .tacche .barre i{width:26px;height:8px;border-radius:999px;background:var(--linea)}
.gest .tacche .barre i.piena{background:var(--celeste-scuro)}
.gest .io-giorni{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.gest .io-g{min-height:80px;border:1px solid var(--linea);border-radius:10px;background:var(--bianco);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:7px 1px 6px;gap:2px;cursor:pointer;font-family:inherit}
.gest .io-g .dow{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.gest .io-g .num{font-family:var(--font-titolo);font-size:24px;line-height:1;color:var(--ink)}
.gest .io-g .st{display:block;font-size:12px;font-weight:600;line-height:1.15;text-align:center;letter-spacing:-.01em}
.gest .io-g.ap{background:var(--ok-bg);border-color:var(--ok-bg)}
.gest .io-g.ap .st{color:var(--ok-fg)}
.gest .io-g.at{background:var(--warn-bg);border-color:var(--warn-bordo)}
.gest .io-g.at .st{color:var(--warn-fg)}
.gest .io-g.ri{background:var(--bad-bg);border-color:var(--bad-bordo)}
.gest .io-g.ri .st{color:var(--bad-fg);text-decoration:line-through}
.gest .io-g[disabled]{opacity:.4;cursor:default}
.gest .io-leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:13px;color:var(--ink-3)}
.gest .io-leg span{display:inline-flex;align-items:center;gap:6px}
.gest .io-leg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.gest .io-sugg{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:12px 6px 12px 14px;border-radius:12px;background:var(--bianco);border:1px dashed var(--celeste-50);font-size:13px;color:var(--ink-2)}
.gest .io-opz{display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:60px;padding:11px 14px;border-radius:12px;border:1px solid var(--linea);background:var(--bianco);font-family:inherit;color:var(--ink);cursor:pointer}
.gest .io-opz .ib{width:38px;height:38px;border-radius:999px;background:var(--celeste-15);color:var(--celeste-scuro);display:grid;place-items:center;flex:none}
.gest .io-opz b{display:block;font-size:15px}
.gest .io-opz small{display:block;font-size:13px;color:var(--ink-3);margin-top:1px}
.gest .io-opz.on{border-color:var(--celeste-50);background:var(--celeste-30)}
.gest .io-opz.on b{color:var(--celeste-scuro)}
.gest .io-gia{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--linea)}
.gest .io-gia .cosa{flex:1;font-weight:600}
.gest .io-ant{display:flex;gap:10px;border-radius:10px;padding:11px 12px;font-size:13px;font-weight:600}
.gest .io-ant.ap{background:var(--ok-bg);color:var(--ok-fg)}
.gest .io-ant.at{background:var(--warn-bg);color:var(--warn-fg)}
.gest .io-invia{width:100%;min-height:52px;border-radius:999px;border:0;background:var(--celeste);color:var(--su-celeste);font:700 16px var(--font-corpo);cursor:pointer}
.gest .io-x{width:44px;height:44px;border-radius:999px;border:0;background:var(--celeste-15);display:grid;place-items:center;color:var(--ink);cursor:pointer;flex:none}

/* bottone non attivo dove l’elemento è un link */

.gest .btn.off{opacity:.6;pointer-events:none}

/* riassunto sotto il nome di un passo già fatto */

.gest .passi li .s{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-top:1px}
.gest .passi li.alto{min-height:52px;padding-top:6px;padding-bottom:6px}
/* testata del flusso sul telefono */

.gest .flusso-h{display:flex;flex-direction:column;gap:8px}
.gest .flusso-h .riga{display:flex;align-items:center;gap:12px}
.gest .flusso-h .riga .passo-bar{flex:1}
.gest .g7 button .et{font-size:11px;font-weight:700;letter-spacing:-.01em;line-height:1.1}

/* ---- giro 4, correzioni ---- */
/* dettagli di una riga di lista che vanno a capo (i puntini restano solo sui nomi) */

.gest .li .d.acapo{white-space:normal;overflow:visible}
/* richiesta in attesa dentro la griglia della settimana: si decide dal riquadro "Da decidere" */

.gest .g7 button.attesa,.gest .rq button.attesa{background:var(--warn-bg);border-color:var(--warn-bordo);color:var(--warn-fg);cursor:default}
.gest .g7 button.attesa .gd,.gest .g7 button.attesa .gn{color:var(--warn-fg)}
/* celle della tabella dei turni standard: niente a capo */

.gest .dt td.nw{white-space:nowrap}

/* Faro · progetto 4 (Timbrature e Costi) — forme nuove. Non ridefinisce nessuna classe di
   faro.css, faro2.css, faro3.css: solo classi con nomi propri. */

/* anomalia da sistemare: fondo panna (serve un'azione), testi sempre ink / ink-2 */

.gest .an{display:flex;align-items:center;gap:16px;padding:14px 16px;background:var(--panna);border:1px solid var(--linea);border-radius:12px}
.gest .an + .an{margin-top:8px}
.gest .an .grow{flex:1;min-width:0}
.gest .an .tipo{font-weight:700;color:var(--ink)}
.gest .an .chi{color:var(--ink);margin-top:1px}
.gest .an .det{font-size:13px;color:var(--ink-2);margin-top:2px}
.gest .an-az{display:flex;align-items:center;gap:8px;flex:none}
.gest .an-az .via{margin-right:16px}
.gest.tel .an{flex-direction:column;align-items:stretch;gap:12px}
.gest.tel .an-az{flex-direction:column;align-items:stretch}
.gest.tel .an-az .due{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gest.tel .an-az .via{margin:4px 0 0;padding-top:12px;border-top:1px solid var(--linea)}

/* striscia della chiusura del mese (computer, una riga) */

.gest .chiu{display:flex;align-items:center;gap:16px;padding:6px 14px;border:1px solid var(--linea);border-radius:12px;background:var(--bianco);white-space:nowrap}
.gest .chiu .chk{gap:8px;font-weight:600}
.gest .chiu .vuoto{display:inline-block;width:20px;flex:none}
.gest .chiu .fine{margin-left:auto;display:flex;align-items:center;gap:12px}
.gest .chiu .riapri{padding:0 14px}

/* chiusura sul telefono: riga compatta che apre il foglio */

.gest .chiu-t{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border:1px solid var(--linea);border-radius:12px;background:var(--bianco)}
.gest .chiu-t .grow{flex:1;min-width:0}

/* righe del foglio di chiusura */

.gest .chk-r{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-top:1px solid var(--linea-tenue)}
.gest .chk-r:first-child{border-top:0}
.gest .chk-r input{width:22px;height:22px;accent-color:var(--celeste-scuro);margin:0;flex:none}
.gest .chk-r .vuoto{display:inline-block;width:22px;flex:none}
.gest .chk-r .badge{margin-top:4px}
.gest .chk-r .grow{flex:1;min-width:0}
.gest .chk-r .d{font-size:13px;color:var(--ink-2)}

/* mese di una persona: tabella a settimane */

.gest .dt tbody tr.da-sist td{background:var(--panna)}
.gest .dt tbody tr.riposo td{color:var(--ink-3)}
.gest .dt tr.tot td{background:var(--linea-tenue);font-weight:700;color:var(--ink)}
.gest .dt td.az{text-align:right;white-space:nowrap}
.gest .dt td.az .btn-row{justify-content:flex-end;flex-wrap:nowrap}
.gest .sett{font-size:13px;font-weight:700;color:var(--ink-2);padding:6px 2px 8px}
.gest .gm{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-top:1px solid var(--linea-tenue)}
.gest .gm:first-child{border-top:0}
.gest .gm .gq{flex:none;width:52px;font-weight:700}
.gest .gm .grow{flex:1;min-width:0}
.gest .gm.da-sist{background:var(--panna);flex-wrap:wrap}
.gest .gm.da-sist .an-az{flex-basis:100%;flex-direction:column;align-items:stretch}
.gest .gm.tot{min-height:44px;background:var(--linea-tenue);font-weight:700}

/* caricamento a passi */

.gest .ps{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 14px;padding:18px 0;border-top:1px solid var(--linea-tenue)}
.gest .ps:first-child{border-top:0;padding-top:4px}
.gest .ps-nr{width:28px;height:28px;border-radius:999px;border:1px solid var(--linea);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--bianco);color:var(--ink-3)}
.gest .ps.fatto .ps-nr{background:var(--ok-bg);border-color:var(--ok-bg);color:var(--ok-fg)}
.gest .ps.on .ps-nr{background:var(--celeste-scuro);border-color:var(--celeste-scuro);color:var(--bianco)}
.gest .ps-t{font-weight:700;color:var(--ink);min-height:28px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.gest .ps.dopo .ps-t{color:var(--ink-3);font-weight:600}
.gest .ps-b{grid-column:2;display:flex;flex-direction:column;gap:12px}
.gest .cod{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--linea);border-radius:12px;background:var(--bianco)}
.gest .cod-n{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink)}
.gest .prop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:10px;background:var(--celeste-15);border:1px solid var(--celeste-50);color:var(--ink);font-size:13px}
.gest .prop .grow{flex:1 1 220px;min-width:0}
.gest.tel .prop .btn{width:100%}
.gest .file.bad{border-color:var(--bad-fg)}

/* ---- giro 6 · Costi ---- */
/* DataTable del mese: riga di gruppo, nome che apre il pannello, cifre con lo spazio fisso per "≈" */

.gest .dt tr.gruppo td{background:var(--bianco);border-bottom:1px solid var(--linea);padding-top:18px;font-weight:700;color:var(--ink)}
.gest .dt tbody tr.gruppo:nth-child(even) td{background:var(--bianco)}
.gest .dt td.nd{color:var(--ink-3)}
.gest .dt tr.altre td{background:var(--bianco)}
.gest .nome-b{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:44px;padding:0;border:0;background:none;font:600 14px var(--font-corpo);color:var(--ink);text-align:left;cursor:pointer}
.gest .nome-b:hover .nm{text-decoration:underline;text-decoration-color:var(--celeste-scuro);text-underline-offset:3px}
.gest .nome-b .sub{font-size:12px;font-weight:500;color:var(--ink-3)}
.gest .cifra{display:inline-flex;justify-content:flex-end;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gest .cifra .st{display:inline-block;width:12px;text-align:center;color:var(--warn-fg);font-weight:700}
.gest .dl.due{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.gest .dl .v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.gest .dl .aiuto{font-size:12px;color:var(--ink-2);margin-top:1px}

/* una cifra con il suo "€" o "h" non si spezza mai: va a capo intera */

.gest .nwc{white-space:nowrap;font-variant-numeric:tabular-nums}
/* nome di busta da riconoscere (Abbina i nomi): come sta sulla busta */

.gest .busta{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.02em}

/* cella della tabella delle Statistiche: tutta la cella apre il dettaglio */

.gest .cel-b{display:flex;justify-content:flex-end;align-items:center;width:100%;min-height:44px;padding:0 4px;border:0;border-radius:6px;background:none;font:400 14px var(--font-corpo);color:var(--ink);cursor:pointer}
.gest .cel-b:hover{background:var(--celeste-30)}
.gest .dt.stat td{padding:4px 2px}
.gest .dt.stat th{padding:0 6px}
.gest .dt.stat td.vuota{color:var(--ink-3);text-align:right;padding-right:4px}
.gest .dt.stat .cel-b{padding:0 2px}
/* colonna di mesi senza nessun "≈": niente spazio per il segno, la tabella resta nella pagina */

.gest .cifra.senza-st .st{display:none}

/* grafici (specifica del 07/10/2026, §7.1): serie 1 --celeste, serie 2 --celeste-scuro (.s2), serie 3 --ink (.s3),
   al massimo tre serie piene per grafico. Anno precedente o stimato = barra vuota bordata dello stesso colore
   (.stimato). Aumenti e cali: .su / .giu, sempre con ▲ ▼ e il segno scritto nel numero (+ / −). */
.gest .s2{--serie:var(--celeste-scuro)}
.gest .s3{--serie:var(--ink)}
.gest .su,.gest .giu{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.gest .su{color:var(--ok-fg)}
.gest .giu{color:var(--bad-fg)}
.gest .su::before{content:"▲\00a0"}
.gest .giu::before{content:"▼\00a0"}
/* grafico "Costo per mese": barre piene = mesi reali, barre vuote bordate = mesi con ratei stimati */

.gest .graf{display:grid;gap:14px;align-items:end;height:178px;padding:0 6px;border-bottom:1px solid var(--linea)}
.gest .graf .col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.gest .graf .bar{width:58%;max-width:64px;background:var(--serie,var(--celeste));border:2px solid var(--serie,var(--celeste));border-bottom:0;border-radius:6px 6px 0 0}
.gest .graf .bar:is(.stimato,.precedente){background:var(--bianco)}
/* confronto (es. con l'anno prima): due barre affiancate per colonna, la variazione sotto il valore */
.gest .graf .coppia{display:flex;gap:4px;align-items:flex-end;justify-content:center;width:100%}
.gest .graf .coppia .bar{width:40%;max-width:34px}
.gest .graf .var{font-size:12px}
.gest .graf .val{font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gest .graf-x{display:grid;gap:14px;padding:6px 6px 0}
.gest .graf-x span{text-align:center;font-size:12px;color:var(--ink-2)}
.gest .legenda-g{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.gest .legenda-g i{display:inline-block;width:12px;height:12px;border:2px solid var(--serie,var(--celeste));background:var(--serie,var(--celeste));vertical-align:-2px;margin-right:6px;border-radius:2px}
.gest .legenda-g i:is(.stimato,.precedente){background:var(--bianco)}
/* telefono: barre orizzontali, un mese per riga */

.gest .grafo{display:flex;flex-direction:column;gap:8px}
.gest .grafo .r{display:grid;grid-template-columns:34px minmax(0,1fr) 96px;align-items:center;gap:8px;font-size:13px}
.gest .grafo .m{color:var(--ink-2)}
.gest .grafo .b{height:16px;background:var(--serie,var(--celeste));border:2px solid var(--serie,var(--celeste));border-left:0;border-radius:0 4px 4px 0}
.gest .grafo .b:is(.stimato,.precedente){background:var(--bianco)}
.gest .grafo .val{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
/* telefono: totale per persona con i mesi che si aprono */

.gest .mesi-p{background:var(--zebra);border-top:1px solid var(--linea-tenue);padding:4px 14px 8px}
.gest .mesi-p .mr{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;width:100%;border:0;border-bottom:1px solid var(--linea-tenue);background:none;font:400 14px var(--font-corpo);color:var(--ink);cursor:pointer;padding:0}
.gest .mesi-p .mr:last-child{border-bottom:0}

/* =================== Tour guidato (T5, dal tour di Faro 10/2026) ===================
   Componente Tour (gestionale/componenti/Tour): pannello fisso sotto la pagina (telefono) o a destra
   (computer), contorno sull'elemento del passo, niente velo sul passo (direzione B del Design 5 di Faro).
   Qui solo le forme: come il pannello si aggancia alla pagina vera (position:fixed, la pagina che si
   stringe di 380 px, le finestre accanto) lo decide il gestionale. Colori solo dai token: col tema
   Caffè la rampa celeste diventa marrone da sola.
   z-index dal basso: velo 20, foglio 21, riga ridotta 22, Modal 30/31, contorno 40, «Tocca qui» 43. */
/* testa: contatore «Turni · 5 di 13» a sinistra, «Esci dal tour» (a.link o button.link) a destra.
   Coi titoli lunghi va a capo il contatore (prima del numero, .tour-unito), mai «Esci dal tour» */
.gest .tour-testa{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.gest .tour-dove{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.gest .tour-testa .tour-dove{white-space:normal;min-width:0;line-height:1.4}
.gest .tour-testa > .link{white-space:nowrap;flex:none}
.gest .tour-testa .tour-unito{white-space:nowrap}
/* contenuto del passo */
.gest .tour-titolo{font-family:var(--font-titolo);font-size:22px;line-height:.95;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.gest .tour-testo{font-size:14px;line-height:1.5;color:var(--ink)}
.gest .tour-auto{font-size:13px;line-height:1.45;color:var(--ink-2)}
.gest .tour-azioni{display:flex;align-items:center;gap:8px}
.gest .tour-azioni .tour-spazio{flex:1}
.gest .tour-fondo{margin-top:auto}
.gest .tour-taglia{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* segnale della simulazione: panna, testo ink-2, mai un riquadro d'allarme */
.gest .tour-sim{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;color:var(--ink-2);background:var(--panna);border:1px solid var(--linea);border-radius:8px;padding:6px 10px}
.gest .tour-sim b{color:var(--ink);font-weight:700}
/* pannello: .basso sul telefono (al massimo 338 px con .tour-limite, scorre dentro), .lato sul computer (380 px) */
.gest .tour-pannello{background:var(--bianco);display:flex;flex-direction:column}
.gest .tour-pannello.basso{flex:none;border-top:1px solid var(--linea);padding:0 16px 12px;gap:8px}
.gest .tour-pannello.lato{flex:none;width:380px;border-left:1px solid var(--linea);padding:22px 24px 24px;gap:12px}
.gest .tour-pannello.tour-limite{max-height:338px;overflow-y:auto}
.gest .tour-pannello .tour-sim{margin:0 -16px;border-radius:0;border-width:0 0 1px;padding:7px 16px}
.gest .tour-pannello.lato .tour-sim{margin:0;border-width:1px;border-radius:8px;padding:8px 12px}
.gest .tour-pannello.lato .tour-titolo{font-size:28px;margin-top:6px}
.gest .tour-pannello.lato .tour-azioni{margin-top:4px}
.gest .tour-pannello.basso > .tour-avanzamento:first-child,
.gest .tour-pannello.basso > .tour-sim + .tour-avanzamento{margin-top:8px}
.gest .tour-avanzamento{height:4px;border-radius:999px;background:var(--linea-tenue);overflow:hidden}
.gest .tour-avanzamento i{display:block;height:100%;background:var(--celeste-scuro);border-radius:999px}
/* stato di caricamento o d'errore dentro il pannello, al posto di titolo e testo */
.gest .tour-stato{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px}
/* contorno dell'elemento: figlio di un contenitore relativo (.tour-bersaglio o .tour-posiziona), 6 px fuori
   da ogni lato, così segue l'elemento quando la pagina scorre; .tour-dentro lo tiene 4 px dentro (barre
   fisse, dove fuori verrebbe tagliato). Bordo da 3 px e un'onda che si allarga e svanisce */
.gest .tour-bersaglio,.gest .tour-posiziona{position:relative}
.gest .tour-contorno{position:absolute;z-index:40;border-radius:14px;pointer-events:none;border:3px solid var(--celeste-scuro);box-shadow:0 0 0 4px var(--celeste)}
.gest .tour-contorno.tocca{border-width:3px;box-shadow:0 0 0 5px var(--celeste)}
.gest .tour-bersaglio > .tour-contorno{inset:-6px}
.gest .tour-dentro > .tour-contorno{inset:4px}
.gest .tour-contorno::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:3px solid var(--celeste-scuro);opacity:0;animation:tour-onda 1.8s ease-out infinite}
/* l'onda resta nei 16 px di margine della pagina sul telefono: oltre, lo schermo la taglierebbe */
@keyframes tour-onda{0%{inset:-3px;opacity:.8}100%{inset:-9px;opacity:0}}
/* .tour-anello: lo stesso contorno disegnato con le ombre dall'elemento stesso, quando l'elemento taglia
   ciò che sporge (.card, overflow hidden); il contorno figlio resta, invisibile */
.gest .tour-anello > .tour-contorno{visibility:hidden}
.gest .tour-anello{box-shadow:0 0 0 3px var(--bianco),0 0 0 6px var(--celeste-scuro),0 0 0 10px var(--celeste) !important;animation:tour-anello 1.8s ease-out infinite}
@keyframes tour-anello{
  0%{box-shadow:0 0 0 3px var(--bianco),0 0 0 6px var(--celeste-scuro),0 0 0 10px var(--celeste),0 0 0 10px color-mix(in srgb, var(--celeste-scuro) 70%, transparent)}
  100%{box-shadow:0 0 0 3px var(--bianco),0 0 0 6px var(--celeste-scuro),0 0 0 10px var(--celeste),0 0 0 16px transparent}
}
/* «Tocca qui» (telefono) / «Clicca qui» (computer) nei passi «Fallo tu»: accanto all'elemento, mai sopra
   di lui. .sopra / .sotto: la freccia punta all'elemento e l'etichetta saltella verso di lui; .dentro:
   nel suo bordo alto, quando fuori non c'è posto */
.gest .tour-tocca{position:absolute;z-index:43;display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--celeste-scuro);color:var(--bianco);font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none;box-shadow:var(--ombra)}
.gest .tour-tocca::after{content:"";position:absolute;right:16px;border:6px solid transparent}
.gest .tour-tocca.sopra::after{top:100%;border-top-color:var(--celeste-scuro);border-bottom-width:0}
.gest .tour-tocca.sotto::after{bottom:100%;border-bottom-color:var(--celeste-scuro);border-top-width:0}
.gest .tour-tocca.sopra,.gest .tour-tocca.dentro{animation:tour-tocca-giu 1s ease-in-out infinite}
.gest .tour-tocca.sotto{animation:tour-tocca-su 1s ease-in-out infinite}
@keyframes tour-tocca-giu{0%,100%{translate:0 0}50%{translate:0 5px}}
@keyframes tour-tocca-su{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (prefers-reduced-motion:reduce){
  .gest .tour-contorno::after{animation:none}
  .gest :is(.tour-anello,.tour-tocca){animation:none}
}
/* riga ridotta del telefono quando la pagina apre un foglio: sopra il foglio e sopra il velo, al massimo
   64 px, 8 px dai bordi; «Mostra il passo» riapre il pannello */
.gest .tour-ridotta{position:absolute;left:8px;right:8px;z-index:22;display:flex;align-items:center;gap:8px;max-height:64px;padding:4px 4px 4px 14px;background:var(--bianco);border-radius:12px;box-shadow:var(--ombra-alta)}
.gest .tour-ridotta .tour-grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gest .tour-ridotta .tour-titolo{font-size:20px}
.gest .tour-ridotta .link{padding:0 10px;flex:none}
/* passo «Solo da vedere»: la riga con l'occhio; i bottoni veri si spengono con disabled (T6), link ed
   etichette a forma di bottone con .tour-blocca (il gestionale toglie loro il tocco) */
.gest .tour-vedi{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink-2)}
.gest .tour-vedi .ico{margin-top:1px;color:var(--ink-3)}
.gest .btn.tour-blocca{background:var(--linea-tenue);border-color:var(--linea);color:var(--ink-2)}
/* fine capitolo: le due azioni una sotto l'altra, la prima celeste; un nome lungo va a capo dentro il bottone */
.gest .tour-fine-azioni{display:flex;flex-direction:column;gap:8px}
.gest .tour-fine-azioni .btn{white-space:normal;height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;line-height:1.3;text-align:center}
/* Guida: elenco dei capitoli (una colonna sul telefono, una riga sul computer) */
.gest .tour-capitolo{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-top:1px solid var(--linea-tenue)}
.gest .tour-capitolo:first-child{border-top:0}
.gest:not(.tel) .tour-capitolo{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:10px 16px 10px 20px}
.gest .tour-capitolo-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.gest .tour-capitolo-nome{font-size:16px;font-weight:600;color:var(--ink)}
.gest .tour-capitolo-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;flex:none}
/* Leggi il capitolo: passi in ordine, numero · titolo · testo */
.gest .tour-letti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gest .tour-letto{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--linea-tenue)}
.gest .tour-letto:last-child{border-bottom:1px solid var(--linea-tenue)}
.gest .tour-nr{width:28px;height:28px;border-radius:999px;border:1px solid var(--linea);display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--bianco)}
.gest .tour-letto-c{display:flex;flex-direction:column;gap:4px;min-width:0}
.gest .tour-letto-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:28px}
.gest .tour-letto-titolo{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
/* Home: invito al tour, sfondo e bordo della rampa celeste (nessun colore nuovo); va su una .card */
.gest .tour-invito{background:var(--celeste-15);border-color:var(--celeste-50)}

/* regole scritte dentro le singole tavole dei Design (intestazione <style>), non in faro*.css */
.gest a{color:var(--celeste-scuro)}
.gest a:hover{color:var(--celeste-scuro)}
.gest .lnk{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:600 14px var(--font-corpo);color:var(--celeste-scuro);text-decoration:underline;cursor:pointer;align-self:center}
.gest .li .d.lunga{white-space:normal}
.gest details summary{cursor:pointer}
.gest input[type=color]{padding:4px;height:44px;width:88px}
/* teste panna di finestre e pannelli: l'etichetta va in ink-3 (celeste-scuro su panna fa 4,35:1, proposta 3) */
.gest .modal-h .eyebrow,.gest .drawer-h .eyebrow{color:var(--ink-3)}
/* anello di focus (decisione di Luca sul giro 7) */
.gest :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* righe e voci a tutta larghezza (dentro .list o barre con overflow nascosto): l'anello sta dentro */
.gest :is(.nav-i,.bb,.li,.itab):focus-visible{outline-offset:-2px}

/* =================== stampe e PDF interni (§7.4) ===================
   Regole dei Gestionali: antracite ammessa, leggibile anche in bianco e nero. In testa logo + fascia
   celeste sottile (.stampa-testa, vedi templates/stampa-interna/). Niente navigazione, niente ombre. */
.gest .stampa-testa{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:4px solid var(--celeste);margin-bottom:18px}
.gest .stampa-testa img{height:44px;width:auto;display:block}
.gest .stampa-testa .titolo{font-family:var(--font-titolo);font-size:28px;line-height:1;letter-spacing:.01em;color:var(--ink)}
.gest .stampa-testa .data{font-size:11px;color:var(--ink-3);text-align:right}
@media print{
  @page{size:A4;margin:14mm 12mm}
  .gest{background:var(--bianco);color:var(--ink);font-size:11pt}
  .gest :is(.side,.bbar,.veil,.sheet,.drawer,.modal-wrap,.btn,.lnk,.no-stampa){display:none !important}
  .gest *{box-shadow:none !important}
  .gest :is(tr,.li,.kpi,.card,.stampa-blocco){break-inside:avoid}
  .gest :is(h1,h2,h3,.sez-h){break-after:avoid}
  .gest .stampa-testa{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}