/* ─────────────────────────────────────────────────────────────────────────
   Pryce — foglio di stile del pannello.

   Nessun framework: CSS scritto a mano. I font hanno un fallback di sistema,
   quindi il pannello resta leggibile anche senza rete.

   Regola di casa: niente attributi style="..." nel markup né stili scritti
   da JavaScript. Se un elemento cambia aspetto, cambia classe.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* ── Cronografo ───────────────────────────────────────────────────────
     Il sistema Modernist applicato a Pryce: fondo neutro, un rosso solo,
     raggio zero, righe da 2px, Archivo. I nomi sono rimasti quelli di
     prima — `--terracotta` continua a chiamarsi cosi' anche adesso che e'
     un rosso segnale — perche' il foglio li usa in ottocento punti e
     rinominarli avrebbe fatto un diff illeggibile sopra un cambio di
     marchio. Il nome dice il ruolo, non piu' la tinta.
     ─────────────────────────────────────────────────────────────────── */

  /* Il marchio e l'azione. Il rosso del design e' #EC3013, e con
     un'etichetta bianca sopra si ferma a 4,20:1 — sotto la soglia AA, e
     proprio sui bottoni, che sono testo piccolo. Scurito quel tanto che
     basta a passarla (4,58:1), come si era gia' fatto per --ink-3.
     Il rosso **non si scrive**: a corpo di testo sul fondo da' 4,10:1,
     quindi per le scritte e i link c'e' --terracotta-scuro, 6,41:1.
     E' la stessa regola del sistema Modernist, che tiene l'accento per
     icone, pieni e cromature e manda il testo su un gradino profondo. */
  --terracotta:#E22B0E;   --terracotta-scuro:#AE1800;  --terracotta-tenue:#FFE0D9;
  /* L'ambra resta. Il prototipo la faceva diventare rossa, e il documento
     delle tre identita' lo segnalava come il costo da risolvere prima di
     adottare Cronografo: il rosso finiva a portare sia «attenzione» sia
     «azione». Qui il rosso fa solo l'azione e l'ambra tiene il suo
     mestiere, che e' il fondino di «guarda qui» — mai un testo.
     Il prototipo del resto se lo ricorda ancora: la sua nota dice
     «ora e' una tessera ambra», mentre i pixel la disegnavano rossa. */
  --amber:#EBB13D;        --amber-tenue:#FEC24D;       --amber-scuro:#8A6400;
  /* i testi: tre grigi di inchiostro, tutti sopra il 4,5:1 sul fondo */
  --ink:#201E1D;          --ink-2:#444141;             --ink-3:#605D5D;
  /* Le superfici: sei gradini neutri. Il panna era una terra, qui e' un
     grigio — ma resta la stessa scala, perche' le regole che la usano
     contano sui gradini, non sul colore. */
  --panna:#EAE9E9;        --surface:#F3F2F2;           --surface-1:#EEEDED;
  --surface-2:#E5E3E3;    --surface-3:#DEDCDC;         --surface-4:#D7D3D3;
  --bianco:#FFFFFF;       --linea:#BAB6B6;             --notte:#161514;
  /* I due stati che il mono avrebbe mangiato. Verde e rosso-cupo restano
     distinti dal rosso dell'azione: «e' andato bene» e «si e' rotto» non
     possono essere lo stesso segno del bottone che li ha causati. */
  --ok:#006254;           --ok-tenue:#D3F5EB;
  --err:#BA1A1A;          --err-tenue:#FFDAD6;

  /* ── i colori derivati ────────────────────────────────────────────────
     Da qui in giu' nel foglio non compaiono colori letterali: solo questi
     nomi. E' la condizione che ha reso possibile riscrivere il marchio
     cambiando questo blocco invece di novecento righe.
     ─────────────────────────────────────────────────────────────────── */
  /* I bordi: non piu' una terra tenue, ma l'inchiostro. Nel sistema
     Modernist il bordo e' struttura, non contorno — e infatti le regole
     sotto sono da 2px, non da 1. */
  --bordo-tenue:rgba(32,30,29,.10);     --bordo:rgba(32,30,29,.14);
  --bordo-medio:rgba(32,30,29,.18);     --bordo-forte:rgba(32,30,29,.28);
  --bordo-pieno:rgba(32,30,29,.50);
  /* testo e disegni sopra un fondo pieno */
  --su-pieno:#FFFFFF;     --su-ambra:#5E4200;      --testo-ambra:#5E4200;
  --testo-err:#93000A;
  --pomello:#FFFFFF;
  /* superfici speciali: il velo delle modali, il vetro della barra in basso,
     il lampo che attraversa lo scheletro di caricamento */
  --velo:rgba(32,30,29,.45);            --vetro:rgba(243,242,242,.94);
  --lucido:rgba(255,255,255,.55);       --velo-chiaro:rgba(255,255,255,.6);
  /* la card scura e il toast: gli unici due posti dove il chiaro sta sul buio */
  --scuro:var(--ink);                   --su-scuro:var(--panna);
  --su-scuro-tenue:rgba(234,233,233,.7);--riga-su-scuro:rgba(255,255,255,.12);
  /* il fuoco da tastiera e gli orli di rosso */
  --fuoco:rgba(226,43,14,.22);          --fuoco-tenue:rgba(226,43,14,.14);
  --fuoco-scelta:rgba(226,43,14,.20);   --terracotta-orlo:rgba(226,43,14,.2);
  --terracotta-orlo-forte:rgba(226,43,14,.4);
  --terracotta-sfumo:rgba(226,43,14,.10);
  --terracotta-velo:rgba(255,224,217,.55);
  /* La riga del mese in corso. **Opaca**, non un velo: la prima colonna
     della tabella e' appiccicata a sinistra e deve restare coprente.
     Questo e' il risultato di #FFE0D9 al 55% sopra il fondo della scheda. */
  --riga-ora:#F6E4E0;
  --alone:rgba(226,43,14,.30);
  /* ── la scala del pieno ───────────────────────────────────────────────
     Undici gradini dal rosso al verde, per la griglia «quanto e' pieno
     davanti». E' l'unica scala continua del pannello, e ha una tinta sua
     apposta: il rosso dell'azione (--terracotta) e quello dell'errore
     (--err) restano dove stanno, qui c'e' un terzo rosso che non e' ne'
     un bottone ne' un guasto — e' il fondo di un numero basso.
     Ogni gradino e' verificato col testo che ci va sopra: da d2 a d9
     l'inchiostro (da 4,9:1 in su), su d0, d1 e d10 il testo si ribalta.
     Il numero resta scritto dentro la cella: il colore da' il colpo
     d'occhio, la cifra il dato. */
  --occ-0:#B3261E;  --occ-1:#C94A33;  --occ-2:#DE7B60;  --occ-3:#EDA88A;
  --occ-4:#F5CDA0;  --occ-5:#F7E3AC;  --occ-6:#E3E6A4;  --occ-7:#C2DB9D;
  --occ-8:#99CB9A;  --occ-9:#3E9C7B;  --occ-10:#0F6F55;
  --occ-su-carico:#FFFFFF;
  /* l'ambra: quasi sempre un fondino, mai un testo */
  --ambra-sfumo:rgba(235,177,61,.10);   --ambra-velo:rgba(235,177,61,.14);
  --ambra-chip:rgba(235,177,61,.22);    --ambra-orlo:rgba(235,177,61,.28);
  --ambra-bordo:rgba(235,177,61,.45);
  /* i due stati */
  --ok-bordo:rgba(0,98,84,.30);         --err-bordo:rgba(186,26,26,.3);
  --ink-orlo:rgba(96,93,93,.55);        --ink-orlo-tenue:rgba(96,93,93,.25);

  /* Raggio zero, ovunque. I nomi restano quattro perche' il foglio li usa
     per dire «quanto e' morbido questo» in cinquantuno punti: azzerarli
     qui e' una riga, ricalcolarli domani pure. */
  --r:0;  --r-lg:0;  --r-xl:0;  --r-full:0;
  --sp-sm:10px; --sp-md:16px; --sp-lg:28px; --gutter:24px; --max:1180px;
  /* Nel sistema Modernist niente galleggia: la struttura la fanno le righe.
     Ma tre di queste ombre non erano decorazione, erano segnali — la
     colonna appiccicata dice «a sinistra c'e' altro», la barra in basso
     dice «sto sopra al contenuto», il pomello dice «questo si prende».
     Non si buttano: diventano righe dure, che e' come il sistema disegna
     un bordo. Solo la modale tiene l'ombra vera, come nel prototipo. */
  --ombra:none;
  --ombra-alta:0 12px 40px rgba(32,30,29,.22);
  --ombra-barra:0 -2px 0 0 var(--bordo-pieno);
  --ombra-colonna:2px 0 0 0 var(--bordo-forte);
  --ombra-pomello:0 0 0 2px var(--ink);
  --nav-h:64px;
  /* Dice al browser in che tema disegnare i suoi pezzi — barre di
     scorrimento, tendine, calendari nativi. Chiaro qui, scuro nel blocco
     `data-tema="scuro"` qui sotto: con «light dark» seguirebbero il sistema
     anche quando il pannello e' chiaro. */
  color-scheme:light;
}
/* ── il tema scuro ────────────────────────────────────────────────────
   **Il chiaro e' il predefinito**, e lo scuro si sceglie dal profilo: chiaro,
   scuro o automatico (segue il telefono). Fino al 23 settembre 2026 seguiva
   il sistema senza interruttore; ma il pannello si guarda anche di giorno,
   su un portatile che di sera va al buio da solo, e la scelta deve restare
   di chi guarda. La preferenza vive su questo dispositivo (localStorage):
   il telefono all'alba e il portatile in ufficio non vogliono la stessa.

   Il foglio quindi non ascolta piu' `prefers-color-scheme`: guarda solo
   `data-tema="scuro"` sulla radice. A metterlo e' `tema.js`, caricato in
   testa a ogni pagina prima che si disegni — cosi' non c'e' il lampo
   chiaro — e in automatico lo toglie e lo rimette quando il sistema cambia.
   Le regole scure che non sono variabili passano da `:where()`, che non
   aggiunge specificita': restano nella stessa gara di prima con le righe
   scritte sotto.

   Cronografo non ne aveva uno: nel prototipo non c'e' una sola
   `prefers-color-scheme`. Ma il pannello si apre alle sei, e il documento
   delle tre identita' chiama il tema scuro «la parte meglio scritta del
   foglio». Quindi e' derivato qui, nella grammatica del sistema nuovo.

   Non e' il tema chiaro invertito, e non e' piu' nemmeno una terra: dove
   prima c'era un bruno adesso c'e' un neutro scurissimo, perche' Cronografo
   e' un sistema di grigi e inchiostro. Il rosso segnale invece **sale di
   tono** invece di cambiare: #E22B0E diventa #FF8264, che su questo fondo
   da' 7,2:1 dove l'originale si fermava sotto il 3.

   Con i colori chiari il rapporto si rovescia anche **sopra** i pieni: il
   testo dentro un bottone rosso non e' piu' bianco ma quasi nero, ed e'
   il motivo per cui `--su-pieno` e' una variabile e non un `#fff` scritto
   a mano quarantadue volte.
   ─────────────────────────────────────────────────────────────────── */
:root[data-tema="scuro"]{
  color-scheme:dark;
  /* il marchio, due toni piu' su */
  --terracotta:#FF8264;   --terracotta-scuro:#FFB3A0;  --terracotta-tenue:#5E1A0C;
  --amber:#F0C060;        --amber-tenue:#FFD98A;       --amber-scuro:#F0C060;
  /* i testi */
  --ink:#EDECEC;          --ink-2:#C9C7C7;             --ink-3:#9C9999;
  /* le superfici: sei gradini di neutro, non di bruno */
  --panna:#201F1E;        --surface:#1A1918;           --surface-1:#232221;
  --surface-2:#2B2A29;    --surface-3:#333231;         --surface-4:#3B3A39;
  --bianco:#242322;       --linea:#4A4948;             --notte:#0E0D0D;
  --ok:#6FDBC0;           --ok-tenue:#00382F;
  --err:#FFB4AB;          --err-tenue:#5A1512;
  /* sopra un pieno chiaro il testo diventa scuro: e' il ribaltamento */
  --su-pieno:#4D170E;     --su-ambra:#4A3400;          --testo-ambra:#F2C368;
  --testo-err:#FFB4AB;    --pomello:#E5E3E3;
  /* bordi: lo stesso inchiostro, ma visto dall'altra parte */
  --bordo-tenue:rgba(237,236,236,.10); --bordo:rgba(237,236,236,.14);
  --bordo-medio:rgba(237,236,236,.20); --bordo-forte:rgba(237,236,236,.30);
  --bordo-pieno:rgba(237,236,236,.44);
  /* veli e vetri */
  --velo:rgba(0,0,0,.62);              --vetro:rgba(32,31,30,.92);
  --lucido:rgba(255,255,255,.06);      --velo-chiaro:rgba(255,255,255,.04);
  /* La card «dettaglio» e il toast erano scuri su chiaro. Qui non possono
     scurirsi ancora: si staccano salendo, di un gradino sopra il fondo. */
  --scuro:#2E2D2C;                     --su-scuro:#EDECEC;
  --su-scuro-tenue:rgba(237,236,236,.72);
  --riga-su-scuro:rgba(255,255,255,.14);
  /* fuoco e orli */
  --fuoco:rgba(255,130,100,.32);       --fuoco-tenue:rgba(255,130,100,.20);
  --fuoco-scelta:rgba(255,130,100,.38);--terracotta-orlo:rgba(255,130,100,.26);
  --terracotta-orlo-forte:rgba(255,130,100,.45);
  --terracotta-sfumo:rgba(255,130,100,.10);
  --terracotta-velo:rgba(255,130,100,.16);
  /* #5E1A0C al 55% sopra il fondo della scheda, come nel chiaro */
  --riga-ora:#421C14;
  --alone:rgba(255,130,100,.22);
  /* La scala del pieno, al buio. Non e' la chiara scurita: i dieci
     gradini bassi stanno tutti sotto la soglia che regge il testo
     chiaro, e solo il 100% sale — cosi' l'unica cella che salta agli
     occhi in una griglia buia e' quella piena, che e' il punto. */
  --occ-0:#6E1A13;  --occ-1:#7F2B1B;  --occ-2:#8E3F24;  --occ-3:#8C5323;
  --occ-4:#7B601F;  --occ-5:#65651C;  --occ-6:#4C6828;  --occ-7:#336938;
  --occ-8:#1D6A47;  --occ-9:#0A6A55;  --occ-10:#3FB894;
  --occ-su-carico:#12110F;
  --ambra-sfumo:rgba(240,192,96,.10);  --ambra-velo:rgba(240,192,96,.13);
  --ambra-chip:rgba(240,192,96,.20);   --ambra-orlo:rgba(240,192,96,.30);
  --ambra-bordo:rgba(240,192,96,.38);
  --ok-bordo:rgba(111,219,192,.30);    --err-bordo:rgba(255,180,171,.30);
  --ink-orlo:rgba(201,199,199,.42);    --ink-orlo-tenue:rgba(201,199,199,.22);
  /* Le righe dure restano righe anche al buio: cambiano solo di tinta,
     perche' puntano ai bordi. L'unica ombra vera resta quella della
     modale, che al buio deve essere piu' profonda per staccare. */
  --ombra:none;
  --ombra-alta:0 12px 40px rgba(0,0,0,.62);
  --ombra-pomello:0 0 0 2px var(--ink);
}
/* La selezione del testo: il rosso ora e' chiaro, quindi sopra ci va
   scritto scuro — la regola in cima al foglio dice il contrario. */
:where([data-tema="scuro"]) body::selection,
:where([data-tema="scuro"]) ::selection{background:var(--terracotta);color:var(--su-pieno)}
/* Il tratteggio delle notti vendute era due panne quasi uguali: al buio i
   due grigi si chiudevano e la cella tornava piatta. Piu' distanti. */
:where([data-tema="scuro"]) .cal .cell.venduta{background:repeating-linear-gradient(-45deg,
  var(--surface-4) 0 5px, var(--surface-2) 5px 10px)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:24px; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  -webkit-tap-highlight-color:transparent;
}
body::selection,::selection{background:var(--terracotta);color:var(--su-pieno)}

/* Sprite delle icone: fuori dal flusso, non deve occupare spazio. */
.sprite{position:absolute;width:0;height:0}

/* ── tipografia ───────────────────────────────────────────────────────
   La scala dei corpi, dal piu' piccolo:

     11  numeri dentro una cella fitta — calendario e griglia, dove trenta
         colonne non stanno a dodici e non si legge: si scorre cercando uno
         scarto. Sotto gli 11 non si scende, e infatti il prezzo di Lodgify
         e' salito da 9;
     12  etichette, note, intestazioni di tabella. **Il minimo per il testo**;
     13  didascalie e comandi minori;
     14  testo corrente delle tabelle e degli avvisi;
     15  corpo del pannello;
     16  titolo di scheda;
     18-20  titoli;
     22-24  il numero grande e il titolo di sezione da tablet in su;
     28-34  il titolo della pagina (dal 28 settembre 2026, redesign Capryce:
            il disegno «Capryce Messaggi» lo porta a peso 800, come il
            marchio, e il titolo torna a essere la cosa piu' grande della
            pagina).

   Fuori da questi valori non si va: prima del riordino c'erano anche 9,5 —
   10 — 11,5 — 12,5 — 19, nati uno alla volta per far entrare qualcosa. */
h1,h2,h3,h4{margin:0;font-weight:500}
.t-hero{font-size:28px;line-height:34px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.t-sez{font-size:13px;line-height:16px;letter-spacing:.08em;font-weight:600;
  text-transform:uppercase;color:var(--ink-3)}
h4.t-sez{margin-bottom:14px}
/* «V lift»: il pedice del browser scende a 10,8px, sotto la scala. */
.t-sez sub{font-size:11px;vertical-align:baseline;position:relative;top:.2em}
.t-meta{font-size:12px;line-height:16px;font-weight:500}
.t-prezzo{font-size:24px;line-height:24px;font-weight:700;font-variant-numeric:tabular-nums}
.sub{color:var(--ink-2);font-size:13px;line-height:20px;margin:2px 0 0}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
@media(min-width:768px){ .t-hero{font-size:34px;line-height:40px} }

/* ── icone (sprite SVG inline: nessuna dipendenza di rete) ──────────── */
.ic{width:20px;height:20px;fill:currentColor;flex:none;vertical-align:-4px}
.ic-sm{width:16px;height:16px}
.ic-lg{width:24px;height:24px}
.ic.ambra{color:var(--amber)}

/* ── barra superiore ────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;height:var(--nav-h);
  background:var(--surface);border-bottom:2px solid var(--bordo);
  display:flex;align-items:center;gap:12px;padding:0 16px}
/* Il marchio vero, non piu' un'icona generica col nome scritto in corsivo:
   simbolo e wordmark sono i due file del brand kit, e i colori li portano
   dentro loro (terracotta #B85943 e oro #D09A61), quindi qui non si tinge
   niente. `aspect-ratio` accanto all'altezza tiene il posto prima che le
   immagini arrivino: senza, la barra sobbalza a ogni caricamento. */
/* Il marchio. Cronografo lascia fuori il simbolo e la scritta del brand kit
   e mette al loro posto un quadrato rosso con dentro una P disegnata, e il
   nome composto in Archivo 800. Il documento delle tre identita' lo diceva
   in chiaro fra i costi della direzione: «perde il calore del marchio
   attuale». I due SVG restano in `static/img/` e non sono stati toccati:
   per tornare indietro si rimettono le due `<img class="marchio">` /
   `class="wordmark">` nei tre template e si ripristinano queste tre righe.
   Il simbolo eredita `currentColor`, quindi al buio segue --su-pieno
   invece di restare bianco su un rosso schiarito. */
.logo{display:flex;align-items:center;gap:10px}
/* La scelta 3 · 6 · 12 mesi del grafico di Andamento, in alto a destra. */
.and-mesi{order:-1;margin-left:auto;align-self:flex-start;flex:none}
.and-mesi button[aria-pressed="true"]{background:var(--terracotta);color:var(--su-pieno)}
.and-mesi button{padding:6px 10px;font-size:12px}
.and-cifra{font-weight:700;fill:var(--ink)}
/* Il logo e' un link a Oggi, e accanto all'avatar c'e' «ricarica»: aperto
   come app dalla schermata Home il telefono non ha il tasto del browser
   (28 settembre 2026). */
a.logo{color:inherit;text-decoration:none}
.ricarica{width:36px;height:36px;flex:none;display:grid;place-items:center;padding:0;
  background:transparent;border:0;color:var(--ink-2);cursor:pointer}
.ricarica svg{width:22px;height:22px}
.ricarica:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
@media(hover:hover){.ricarica:hover{color:var(--terracotta)}}
.logo .marchio{width:28px;height:28px;flex:none;display:flex;
  align-items:center;justify-content:center;
  background:var(--terracotta);color:var(--su-pieno)}
/* Il simbolo Capryce riempie il riquadro: e' disegnato su 64 con il suo margine. */
.logo .marchio svg{width:100%;height:100%;display:block}
.logo .wordmark{font-size:22px;font-weight:800;letter-spacing:-.02em;
  line-height:1;color:var(--ink)}
.sp{flex:1}
/* 40px e non 36: e' un bersaglio da toccare col pollice, e sotto i 40 si
   sbaglia. Resta comunque piu' piccolo del logo, quindi non compete con lui. */
.avatar{width:40px;height:40px;border-radius:var(--r-full);border:none;cursor:pointer;
  background:var(--terracotta);color:var(--su-pieno);font:600 13px/1 'Archivo',sans-serif;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
/* `fixed` e non `absolute` (28 settembre 2026): la testata resta in alto
   mentre scorri, e il menu che ci si apre sotto deve restarle attaccato.
   Prima si apriva in cima alla pagina, fuori dallo schermo. */
.menu{position:fixed;right:12px;top:calc(var(--nav-h) - 6px);z-index:60;min-width:230px;
  max-height:calc(100dvh - 2 * var(--nav-h) - 16px);overflow-y:auto;
  background:var(--bianco);border:2px solid var(--bordo-forte);border-radius:var(--r-lg);
  box-shadow:var(--ombra-alta);padding:6px;display:none}
.menu.on{display:block}
.menu .who{padding:10px 12px 12px;border-bottom:2px solid var(--bordo);margin-bottom:6px}
.menu .who b{display:block;font-weight:600}
.menu .who .sub{margin:0}
.menu .who .ruolo{margin-top:8px}
.menu button{width:100%;justify-content:flex-start;background:none;border:none;
  padding:9px 12px;border-radius:var(--r);color:var(--ink);font-size:14px;
  display:flex;align-items:center;gap:10px;cursor:pointer}
/* La sezione in cui ci si trova, quando la sua voce sta qui dentro invece che
   nella barra: stesso segno della barra, terracotta e grassetto. */
.menu button[data-p].on{color:var(--terracotta-scuro);font-weight:700;
  background:var(--terracotta-velo)}
.menu button[data-p].on .ic{fill:var(--terracotta-scuro)}
/* Scelta del cliente attivo: visibile solo a chi amministra più clienti. */
.menu .clienti{padding:4px 12px 6px;margin-bottom:6px;
  border-bottom:2px solid var(--bordo)}
.menu .clienti > .t-meta{display:block;margin-bottom:4px}
.menu .clienti button{padding-left:0}
/* La spunta occupa lo spazio anche quando non si vede: senza, i nomi dei
   clienti non selezionati scivolerebbero a sinistra e la colonna ballerebbe. */
.menu .cliente .ic{opacity:0;color:var(--terracotta-scuro)}
.menu .cliente.on .ic{opacity:1}
.menu .cliente.on{font-weight:600}
/* Le voci di sezione. Sul telefono sono l'unico modo per arrivare a Strutture,
   Regole e Conti; da 1024px in su le stesse cinque stanno nella colonna, e qui
   sarebbero un secondo elenco identico. Si spengono, non si spostano. */
.menu-sezioni{padding-bottom:6px;margin-bottom:6px;
  border-bottom:2px solid var(--bordo)}

/* ── impaginato ─────────────────────────────────────────────────────── */
main{max-width:var(--max);margin:0 auto;padding:24px 16px 8px}
/* ── la colonna ───────────────────────────────────────────────────────
   Nasce spenta e si accende a 1024px. Sotto quella soglia non c'e': 254px di
   colonna su 375 di schermo sono due terzi della pagina, e la barra in basso
   fa gia' quel lavoro con un pollice solo. Le voci non sono nuove — sono le
   cinque della barra piu' le cinque del menu utente, messe insieme e
   raggruppate per **quando** si aprono.
   ─────────────────────────────────────────────────────────────────────── */
.colonna{display:none}
@media(min-width:1024px){
  .colonna{position:fixed;left:0;top:0;bottom:0;width:254px;z-index:45;
    display:flex;flex-direction:column;background:var(--surface-2);
    border-right:2px solid var(--bordo-forte)}
  .col-marchio{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;
    border-bottom:2px solid var(--ink)}
  /* Il marchio e il cliente attivo erano appiccicati: la riga nera del logo
     faceva da coperchio al riquadro del cliente e i due blocchi si leggevano
     come uno solo. Sotto la riga ci vuole aria, non un'altra cornice. */
  .col-cliente,.col-io{display:flex;align-items:center;gap:10px;
    background:none;border:none;font-family:inherit;text-align:left;
    cursor:pointer;color:var(--ink)}
  .col-cliente{margin:18px 12px 16px;padding:9px 11px;width:calc(100% - 24px);
    background:var(--surface);border:2px solid var(--bordo-pieno)}
  .col-cliente .sigla,.col-io .sigla{flex:none;display:flex;align-items:center;
    justify-content:center;background:var(--terracotta-scuro);color:var(--bianco);
    font-size:11px;font-weight:600}
  .col-cliente .sigla{width:26px;height:26px}
  .col-io .sigla{width:30px;height:30px}
  .col-cliente .txt,.col-io .txt{min-width:0;flex:1}
  .col-cliente .nome,.col-io .nome{display:block;font-size:13px;font-weight:500;
    line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .col-cliente .t-sez{display:block;line-height:14px}
  .col-io .ruolo{display:block;font-size:11px;color:var(--ink-3);line-height:15px}
  .col-io{border-top:2px solid var(--bordo-forte);padding:12px;width:100%}
  .col-voci{flex:1;overflow-y:auto;padding:0 12px 12px}
  .col-voci .t-sez{margin:16px 0 6px 11px}
  .col-voci .t-sez:first-child{margin-top:6px}
  /* Con un cliente solo il riquadro sopra non c'e' e le voci partirebbero
     appiccicate alla riga del marchio: la stessa aria, presa dall'altra parte. */
  .col-marchio + .col-voci{padding-top:12px}
  .col-voci button{width:100%;display:flex;align-items:center;gap:10px;
    padding:9px 11px;margin-bottom:2px;border:0;background:none;
    font-family:inherit;font-size:14px;font-weight:500;text-align:left;
    cursor:pointer;color:var(--ink)}
  .col-voci .ic{width:17px;height:17px;flex:none;fill:currentColor}
  /* Pieno = azione: la voce dove sei e' l'unica campitura rossa della colonna. */
  .col-voci button.on{background:var(--terracotta);color:var(--su-pieno)}
  .col-voci .pallino{margin-left:auto;font-size:11px;font-weight:600;
    padding:1px 6px;background:var(--terracotta-tenue);color:var(--terracotta-scuro)}
  .col-voci button.on .pallino{background:var(--su-pieno);color:var(--terracotta-scuro)}

}
@media(min-width:1024px) and (hover:hover){
  .col-voci button:hover{background:var(--surface-4)}
  .col-voci button.on:hover{background:var(--terracotta-scuro)}
  .col-cliente:hover,.col-io:hover{border-color:var(--terracotta)}
}
.intro{margin-bottom:var(--sp-lg)}
.intro .t-hero{margin-top:4px}
/* intestazione di sezione con un pulsante a destra */
.intro.con-azione{display:flex;flex-wrap:wrap;gap:16px;
  align-items:flex-end;justify-content:space-between}
.pane{display:none;animation:sali .28s ease-out}
.pane.on{display:block}
@keyframes sali{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pane{animation:none}}

.card{background:var(--surface-1);border:2px solid var(--bordo);
  border-radius:var(--r-lg);padding:20px;margin-bottom:var(--sp-md)}
.card h3{font-size:16px;font-weight:700}
/* titolo di card seguito dalla sua spiegazione, oppure da una tabella */
.card > h3 + .sub{margin-top:6px;margin-bottom:14px}
.card > h3 + .tscroll{margin-top:14px}
/* card che contiene solo una tabella a tutta larghezza */
.card.tabella{background:var(--bianco);padding:0;overflow:hidden}
/* Va a capo: con due bottoni accanto, sul telefono il titolo restava largo
   zero e i bottoni ci passavano sopra (Prezzi, «Curva stagionale»). Sotto i
   220px di testo i comandi scendono sotto, non schiacciano il titolo. */
.card-hd{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:18px}
.card-hd .txt{flex:1 1 220px;min-width:0}
/* Due comandi insieme vanno a capo insieme, non uno accanto al titolo e
   l'altro da solo sotto. */
.card-hd-comandi{display:flex;flex-wrap:wrap;gap:8px}
/* pastiglia con l'icona accanto al titolo di una card */
.badge{background:var(--terracotta-velo);color:var(--terracotta-scuro);
  padding:7px;border-radius:var(--r);display:flex;flex:none}
.badge .ic{width:20px;height:20px;vertical-align:0}
.bento{display:grid;gap:var(--gutter);grid-template-columns:1fr}
@media(min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.bento{grid-template-columns:repeat(3,1fr)}}
.g2{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:560px){.g2{grid-template-columns:repeat(2,1fr)}}
.g3{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:560px){.g3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.due-col{display:grid;gap:var(--gutter);grid-template-columns:1fr}
@media(min-width:900px){.due-col{grid-template-columns:7fr 5fr;align-items:start}}
/* Una cella di griglia larga per default quanto il suo contenuto piu' largo:
   basta una tabella o due campi data affiancati e la colonna spinge fuori la
   pagina invece di stringersi. Le colonne di questi impaginati sono contenitori,
   e devono poter scendere sotto la misura di cio' che contengono. */
.due-col > *,.bento > *,.g2 > *,.g3 > *{min-width:0}
/* Un impaginato a due colonne con un figlio solo lascerebbe mezza pagina
   bianca a destra. `.una` lo riporta a colonna piena: serve in «Oggi», dove la
   scheda di destra c'e' solo dopo che il giro ha scritto le bande. */
@media(min-width:900px){.due-col.una{grid-template-columns:1fr}}

/* ── controlli ──────────────────────────────────────────────────────── */
button{font-family:inherit}
.btn{font:500 14px/1 'Archivo',sans-serif;padding:12px 18px;border-radius:var(--r-lg);
  cursor:pointer;border:2px solid var(--linea);background:var(--bianco);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primario{background:var(--terracotta);border-color:var(--terracotta);color:var(--su-pieno);font-weight:700}
.btn.pericolo{background:var(--err);border-color:var(--err);color:var(--su-pieno);font-weight:700}
.btn.piccolo{padding:7px 12px;font-size:13px;border-radius:var(--r)}
.btn.piena{width:100%}
.btn.icona{padding:8px;border:none;background:none;color:var(--ink-3);border-radius:var(--r-full)}

label{font-size:13px;color:var(--ink-2);display:block;margin-bottom:5px;font-weight:500}
input,select{font-family:inherit;font-size:15px;padding:10px 12px;width:100%;
  border:2px solid var(--linea);border-radius:var(--r-lg);background:var(--bianco);
  color:var(--ink);transition:border-color .15s,box-shadow .15s,background-color .15s}
input:focus,select:focus{outline:none;border-color:var(--terracotta);
  box-shadow:0 0 0 3px var(--fuoco-tenue)}
input:disabled,select:disabled{background:var(--surface-3);color:var(--ink-3);cursor:not-allowed}
input[type=number]{font-variant-numeric:tabular-nums}
/* campo data breve, formato giorno/mese */
input.data-breve{width:78px}
/* gruppo di campi impilati dentro una modale */
.campi{display:grid;gap:12px}
/* due campi affiancati: coppie che si leggono insieme (property_id e
   room_type_id, base e minimo). Su schermo stretto tornano incolonnati. */
.campi .due{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:520px){.campi .due{grid-template-columns:1fr 1fr}}

/* slider come da mockup: traccia sottile, pomello terracotta */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;
  padding:0;border:none;box-shadow:none;height:20px;cursor:pointer}
input[type=range]:focus{outline:none;box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:0;background:var(--linea)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;
  border-radius:0;background:var(--terracotta);margin-top:-8px;
  box-shadow:var(--ombra-pomello);transition:transform .12s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--fuoco)}
input[type=range]::-moz-range-track{height:4px;border-radius:0;background:var(--linea)}
input[type=range]::-moz-range-thumb{height:20px;width:20px;border:none;border-radius:0;
  background:var(--terracotta);box-shadow:var(--ombra-pomello)}
input[type=range]:disabled::-webkit-slider-thumb{background:var(--ink-3)}

/* Va a capo da sola: sopra i 900px la colonna destra di «due-col» e' larga
   ~380px e la riga ne chiede 416. Il limite lo decide il contenitore, non la
   finestra (MASTER §5): la nota scende sotto, allineata a destra. */
.riga{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:9px 0}
.riga .lbl{width:110px;flex:none;font-size:13px;color:var(--ink-2);font-weight:500}
.riga input[type=range]{flex:1;min-width:80px}
.riga .val{width:52px;flex:none;text-align:right;font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--terracotta-scuro)}
.riga .hint{width:128px;flex:none;margin-left:auto;text-align:right;font-size:12px;color:var(--ink-3)}
@media(max-width:640px){
  .riga{flex-wrap:wrap;gap:8px 12px;padding:12px 0;
    border-bottom:2px solid var(--bordo-tenue)}
  .riga:last-child{border-bottom:none}
  .riga .lbl{width:auto;flex:1;font-size:14px;color:var(--ink)}
  .riga .val{order:2}
  .riga .hint{order:3;width:auto;flex:none}
  .riga input[type=range]{order:4;flex-basis:100%;min-width:0}
}

/* interruttore */
.sw{position:relative;width:44px;height:24px;flex:none;cursor:pointer;display:inline-block}
/* L'area da toccare va oltre il disegno: l'interruttore resta alto 24px
   ma si prende 40px di bersaglio, che e' quello che serve al pollice. */
.sw input{position:absolute;opacity:0;margin:0;cursor:pointer;z-index:2;
  top:-8px;left:-4px;width:calc(100% + 8px);height:calc(100% + 16px)}
.sw .track{position:absolute;inset:0;border-radius:var(--r-full);
  background:var(--bordo-pieno);transition:background .2s}
.sw .dot{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:0;
  background:var(--pomello);box-shadow:var(--ombra-pomello);transition:transform .2s}
.sw input:checked ~ .track{background:var(--terracotta)}
.sw input:checked ~ .dot{transform:translateX(20px)}
.sw input:focus-visible ~ .track{box-shadow:0 0 0 3px var(--fuoco)}
.sw input:disabled{cursor:not-allowed}
.sw-riga{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:16px;border-top:2px solid var(--bordo);margin-top:4px}
.sw-riga .txt{flex:1;min-width:0}
.sw-riga .txt b{font-weight:600;font-size:14px}
/* La riga del tema porta tre bottoni, non un interruttore: a 375px non
   stanno accanto al testo senza ridurlo a una parola per riga. Li' vanno a
   capo sotto la spiegazione. */
.sw-riga.tema{flex-wrap:wrap}
.sw-riga.tema .txt{min-width:180px}

/* pillole */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;
  border-radius:var(--r-full);font-size:12px;font-weight:500;white-space:nowrap}
.chip.ok{background:var(--ok-tenue);color:var(--ok)}
.chip.attesa{background:var(--ambra-chip);color:var(--testo-ambra)}
.chip.info{background:var(--terracotta-velo);color:var(--terracotta-scuro)}
.chip.neutro{background:var(--surface-4);color:var(--ink-2)}
.chip.err{background:var(--err-tenue);color:var(--testo-err)}
.chip.grande{padding:5px 13px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;font-weight:600}
/* pillola del ruolo sulla scheda di un collaboratore */
.chip.r-admin{background:var(--terracotta);color:var(--su-pieno)}
.chip.r-editor{background:var(--amber);color:var(--su-ambra)}

/* Le pastiglie dei mesi erano alte 32px: si sbagliano col pollice, e sono
   dodici una accanto all'altra. Portate a 40, che e' la misura sotto la quale
   un bersaglio comincia a costare errori. Restano su due righe anche a 320px. */
.mesi{display:flex;flex-wrap:wrap;gap:7px}
.mesi button{min-height:40px;padding:7px 13px;font-size:13px;font-weight:500;border-radius:var(--r-full);
  border:2px solid var(--linea);background:var(--bianco);color:var(--ink-2);cursor:pointer;transition:.15s}
.mesi button.on{background:var(--terracotta);border-color:var(--terracotta);color:var(--su-pieno)}

/* tabelle: su schermo stretto scorrono in orizzontale */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:440px}
th{text-align:left;font-size:12px;font-weight:600;color:var(--ink-2);
  padding:10px 10px;border-bottom:2px solid var(--bordo-forte);white-space:nowrap}
td{padding:11px 10px;border-bottom:2px solid var(--bordo-tenue);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
td input{padding:8px 10px;font-size:14px}
/* Il riepilogo della simulazione sta in una scheda larga un terzo: tre colonne
   corte, senza il minimo di 440px, o la variazione finisce fuori vista. */
.riepilogo-cambi table{min-width:0}
.riepilogo-cambi td,.riepilogo-cambi th{padding:7px 6px;white-space:nowrap}
td.azioni{text-align:right}
.vuoto{color:var(--ink-3);font-style:italic}

/* metriche */
.metrica{background:var(--bianco);border:2px solid var(--bordo-tenue);
  border-radius:var(--r-lg);padding:16px}
.metrica .k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.metrica .v{font-size:24px;line-height:30px;font-weight:700;color:var(--terracotta-scuro);
  font-variant-numeric:tabular-nums;margin-top:4px}
.metrica .d{font-size:12px;color:var(--ink-2);margin-top:3px}

/* avvisi */
.avviso{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-lg);
  padding:14px 16px;font-size:14px;line-height:21px;margin-bottom:var(--sp-md)}
.avviso .ic{margin-top:2px}
.avviso.attesa{background:var(--ambra-velo);color:var(--testo-ambra);border:2px solid var(--ambra-bordo)}
.avviso.info{background:var(--surface-1);color:var(--ink-2);border:2px solid var(--bordo)}
.avviso.ok{background:var(--ok-tenue);color:var(--ok);border:2px solid var(--ok-bordo)}
.avviso.err{background:var(--err-tenue);color:var(--testo-err);border:2px solid var(--err-bordo)}
/* avviso che occupa tutta la griglia in cui si trova */
.avviso.piena-riga{grid-column:1/-1}

/* schede struttura */
.prop{background:var(--surface-1);border:2px solid var(--bordo);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s}
.prop.attiva{border-color:var(--terracotta-orlo-forte)}
.prop .testa{padding:20px;background:
  linear-gradient(135deg,var(--terracotta-sfumo),var(--ambra-sfumo));
  border-bottom:2px solid var(--bordo)}
.prop .testa .alto{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.prop .testa h3{font-size:20px;line-height:28px;font-weight:500}
.prop .testa .chip{margin-top:6px}
.prop .testa .sub{margin-top:10px}
.prop .corpo{padding:20px;display:flex;flex-direction:column;gap:16px;flex:1}
.prop .prezzone{background:var(--velo-chiaro);border:2px solid var(--bordo-tenue);
  border-radius:var(--r);padding:14px 16px;display:flex;align-items:baseline;
  justify-content:space-between;gap:10px}
.prop .prezzone .k{font-size:13px;color:var(--ink-2);font-weight:500}
.prop .prezzone .t-prezzo{color:var(--terracotta-scuro)}
.prop .prezzone .u{font-size:13px;font-weight:400;color:var(--ink-2)}
.prop .piede{margin-top:auto;padding-top:16px;border-top:2px solid var(--bordo);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
/* «prezzo dinamico attivo» / «esclusa dai calcoli» */
.prop .piede .stato{display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:500;color:var(--terracotta-scuro)}
.prop .piede .stato.spenta{color:var(--ink-3)}
/* Interruttore di pubblicazione. Chiuso è lo stato normale, non un errore:
   colore neutro, non rosso. Aperto è la condizione da notare, perché da lì
   il motore scrive davvero sul calendario del PMS. */
.prop .pubblicazione{display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r);background:var(--surface-2);
  color:var(--ink-3);font-size:12px}
.prop .pubblicazione span{flex:1}
.prop .pubblicazione.aperta{background:var(--ok-tenue);color:var(--ok)}

/* calendario */
.mese{margin-bottom:22px}
.mese > .tit{font-weight:600;margin-bottom:8px;display:flex;align-items:baseline;gap:8px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dh{font-size:12px;font-weight:600;color:var(--ink-3);text-align:center;padding-bottom:4px}
.cal .cell{border-radius:var(--r);padding:5px 2px;text-align:center;min-height:52px;
  background:var(--bianco);border:2px solid var(--bordo-tenue);position:relative}
.cal .cell.orfana{border-color:var(--amber);background:var(--ambra-sfumo)}
.cal .cell .n{font-size:11px;color:var(--ink-3);font-weight:600}
.cal .cell .p{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cal .cell .m{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cal .cell .su{color:var(--ok);font-weight:600}
.cal .cell .giu{color:var(--terracotta-scuro);font-weight:600}
/* Prezzo che c'è ora su Lodgify: si aggiunge sotto, in tono minore, perché il
   protagonista della cella resta il prezzo che pubblicheresti. Solo quando i
   due divergono il numero si accende, ed è quello che si va a cercare. */
.cal .cell .l{font-size:11px;color:var(--ink-3);margin-top:1px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.cal .cell .l.scarto{color:var(--terracotta-scuro);font-weight:600}
.cal .cell .l.assente{opacity:.45}
.cal .cell.diverso{border-color:var(--terracotta);
  box-shadow:inset 0 0 0 1px var(--terracotta-orlo)}
/* Notte già venduta. Sta dopo .orfana e .diverso apposta: se una notte è
   insieme orfana e venduta, vince venduta, perché «non è più in vendita» è
   l'informazione che rende irrilevanti le altre.
   Il tratteggio spegne la cella invece di accenderla, ed è voluto: qui il
   prezzo su Lodgify è quello incassato, non il listino, quindi non c'è niente
   da andare a guardare. Un colore forte direbbe l'opposto. */
.cal .cell.venduta{border-color:var(--ink-orlo);
  background:repeating-linear-gradient(-45deg,
    var(--surface-3) 0 5px, var(--surface-2) 5px 10px);box-shadow:none}
.cal .cell.venduta .p{color:var(--ink-3)}
.cal .cell.venduta .l.venduta{color:var(--ink-3);font-weight:600}
.legenda{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:4px;font-size:12px;color:var(--ink-2)}
.legenda i{width:9px;height:9px;border-radius:0;display:inline-block;margin-right:6px}
.legenda i.orfana{background:var(--amber)}
.legenda i.venduta{background:var(--ink-3)}
.legenda i.su{background:var(--ok)}
.legenda i.giu{background:var(--terracotta)}
.legenda i.live{background:var(--terracotta)}
.legenda i.forzata{background:var(--terracotta)}
.legenda i.occupata{background:var(--surface-4);border:2px solid var(--linea)}
.legenda i.alminimo{background:var(--amber)}

/* ── griglia dei prezzi: unità in riga, giorni in colonna ──────────────
   La tabella scorre dentro il suo contenitore e non fa scorrere la pagina.
   La colonna dei nomi resta ferma: con trenta colonne, scorrendo verso destra
   si perde subito di vista su quale appartamento si sta guardando, e un prezzo
   attribuito all'unità sbagliata è l'errore che questa pagina deve impedire. */
/* Sul telefono i comandi vanno sotto il titolo. Affiancati com'e' il resto
   delle intestazioni, a 375px stringevano il titolo a una parola per riga e ci
   finivano sopra: la data del periodo e la tendina insieme sono larghe quanto
   mezza schermata. */
#cardGriglia .card-hd{flex-direction:column;gap:10px}
.griglia-cmd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
.griglia-cmd .t-meta{flex:1;min-width:120px;text-align:center}
.griglia-cmd select{width:auto;min-width:110px}
@media(min-width:720px){
  #cardGriglia .card-hd{flex-direction:row;align-items:flex-start}
  .griglia-cmd{width:auto}
  .griglia-cmd .t-meta{flex:none;min-width:150px}
}

/* `.tscroll` sborda di 4px per non tagliare le ombre delle tabelle normali.
   Qui quei 4px diventano una fessura a sinistra della colonna ferma, da cui si
   vedono passare le celle che scorrono sotto: su questa tabella si annullano. */
.griglia{margin-top:var(--sp-sm);margin-left:0;margin-right:0;
  padding-left:0;padding-right:0}
.griglia table{border-collapse:separate;border-spacing:3px}
.griglia th{font-weight:600;font-size:12px;color:var(--ink-3);text-align:center;
  padding:0 2px}
.griglia thead th b{display:block;font-size:15px;color:var(--ink);line-height:18px}
.griglia thead th .sub{font-size:11px}
.griglia thead th.fine b{color:var(--terracotta-scuro)}
/* Le righe separatrici delle tabelle qui non servono: ogni notte e' gia' un
   riquadro, e le linee passavano sotto la colonna ferma a spezzarla. */
.griglia th,.griglia td{border-bottom:none}
/* La colonna ferma ha il colore della scheda, non il bianco: col tema chiaro
   i nomi stavano in blocchi bianchi su fondo grigio. Le ombre piene sopra,
   sotto e a sinistra chiudono i 3px di `border-spacing`, da cui si vedevano
   passare le notti che scorrono sotto. */
.griglia th.unita{position:sticky;left:0;z-index:2;background:var(--surface-1);
  text-align:left;width:132px;min-width:132px;max-width:132px;font-size:13px;
  color:var(--ink);padding-right:10px;overflow:hidden;
  box-shadow:var(--ombra-colonna),0 -3px 0 0 var(--surface-1),
    0 3px 0 0 var(--surface-1),-3px 0 0 0 var(--surface-1)}
/* I nomi veri sono lunghi — «3 Rooms - Perla elegante loft centro» — e senza
   un limite scavalcano la colonna e finiscono sopra la prima notte. Due righe
   e poi i puntini: il nome intero resta nel `title`. */
/* La larghezza va detta qui e non solo sulla colonna: dentro una cella di
   tabella un box senza larghezza propria si allarga quanto il testo, e a
   tagliarlo resta l'`overflow` della colonna — cioe' una riga sola, mozzata. */
.griglia th.unita .nome{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:17px;
  overflow-wrap:anywhere;width:122px;white-space:normal}
.griglia th.unita .sub{display:block;font-size:12px;font-weight:500;
  line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* La cella è un pulsante: deve essere raggiungibile da tastiera e grande
   abbastanza da colpirla col pollice. */
.griglia .cella{width:100%;min-width:52px;min-height:52px;cursor:pointer;
  border:2px solid var(--linea);border-radius:var(--r);background:var(--surface-1);
  padding:4px 2px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;font:inherit;color:var(--ink);transition:none}
.griglia .cella .p{font-size:15px;font-weight:700;line-height:18px;
  font-variant-numeric:tabular-nums}
.griglia .cella .ms,.griglia .cella .chi{font-size:11px;line-height:13px;
  color:var(--ink-3);max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Il prezzo che il motore darebbe da solo, sulle notti decise a mano. Sta
   sotto il tuo e in tono minore: e' il termine di paragone, non la decisione.
   Nessun verde e nessun rosso — sopra o sotto non vuol dire giusto o
   sbagliato, e colorarlo darebbe un giudizio che qui non abbiamo. */
.griglia .cella .calc{font-size:11px;line-height:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.griglia .cella.forzata .calc{color:var(--terracotta-scuro);opacity:.75}
.griglia .cella.alminimo{background:var(--ambra-velo);
  border-color:var(--ambra-bordo)}
.griglia .cella.forzata{background:var(--terracotta-tenue);
  border-color:var(--terracotta)}
.griglia .cella.forzata .p{color:var(--terracotta-scuro)}
.griglia .cella.occupata{background:var(--surface-3);color:var(--ink-3)}
.griglia .cella.occupata .p{font-weight:600}
.griglia .cella.bloccata{cursor:default}
.griglia .cella.scelta{border-color:var(--terracotta);border-width:2px;
  box-shadow:0 0 0 2px var(--fuoco-scelta);padding:3px 1px}

/* barra della selezione: sopra la barra del salvataggio, stesso linguaggio */
.selbar{position:fixed;left:0;right:0;z-index:46;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:var(--bianco);border-top:2px solid var(--bordo-forte);
  box-shadow:var(--ombra-barra);
  padding:12px 16px;display:none;align-items:center;gap:8px;flex-wrap:wrap}
.selbar.on{display:flex}
.selbar .txt{flex:1;min-width:120px;font-size:13px;color:var(--ink-2)}
.selbar .txt b{display:block;color:var(--ink);font-weight:600;font-size:14px}

/* riquadri dell'anteprima, sopra al calendario */
/* esito dell'ultima simulazione, sotto al pulsante che la lancia */
#runOut{margin-top:18px}

/* verifica prezzi — confronto a tre colonne */
.riga-campi{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.riga-campi > .campo{flex:1;min-width:130px}
.riga-campi > .campo.largo{flex:2;min-width:220px}
.vf-modo{display:flex;gap:8px;margin-bottom:16px}
.vf-modo button{flex:1}
.vf-modo button.on{background:var(--terracotta);border-color:var(--terracotta);
  color:var(--su-pieno);font-weight:700}
.vf-sintesi{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.delta{font-weight:600;font-variant-numeric:tabular-nums}
.delta.su{color:var(--ok)}
.delta.giu{color:var(--terracotta-scuro)}
.delta.pari{color:var(--ink-3);font-weight:400}
/* Oltre il 10% lo scostamento prende il fondino: sotto quella soglia sono
   differenze da leggere, sopra sono differenze da spiegare, e devono trovarsi
   scorrendo la colonna senza rileggere i numeri. */
.delta.forte{padding:2px 6px;border-radius:var(--r-full);font-weight:700}
.delta.su.forte{background:var(--ok-tenue)}
.delta.giu.forte{background:var(--terracotta-tenue)}
/* Tabella della verifica: più righe nello stesso schermo. I prezzi sono numeri
   corti, e le colonne larghe li allontanavano dal loro confronto. */
table.vf{font-size:14px}
table.vf th,table.vf td{padding:7px 10px}
table.vf td.mono{white-space:nowrap}
td.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
.vf-diag{margin-top:14px;font-size:12px}
.vf-diag summary{cursor:pointer;color:var(--ink-3)}
.vf-diag pre{margin-top:8px;padding:12px;border-radius:var(--r);overflow-x:auto;
  background:var(--surface-2);color:var(--ink-2);font-size:12px;line-height:1.5}

/* canali */
.canale{border:2px solid var(--bordo-medio);border-radius:var(--r-lg);
  padding:16px;margin-bottom:12px;background:var(--bianco)}
.canale .testa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
/* Base 120px che cresce fino a 170: l'a capo si decide sulla base, e a 170
   fissi nella colonna di Regole la «×» di eliminazione finiva da sola sotto. */
.canale .testa input[name=nome]{flex:1 1 120px;width:120px;max-width:170px;font-weight:600}
.canale .g3{margin-bottom:14px}
.canale th.quota{width:96px}
.canale th.entro{width:136px}
/* Casa per casa: una colonna per il rincaro e una per ogni sconto. Con tre o
   quattro colonne la tabella non entra in una scheda stretta, e senza un
   minimo i campi si schiacciano fino a nascondere il segnaposto — che e'
   proprio il numero che dice cosa vale quando il campo e' vuoto. Meglio che
   la tabella scorra, come fanno le altre dentro `.tscroll`. */
.canale table.casa-canale .con-pct input{min-width:72px}
/* ── editor dei periodi speciali ────────────────────────────────────── */
/* Sono dodici, e prima erano dodici schede alte in colonna: la pagina
   scorreva senza fine e per confrontare Natale con Capodanno bisognava
   ricordarseli. Due (o tre) per riga li rende una tabella da leggere. */
/* Quante schede per riga lo decide lo spazio che c'e', non la larghezza della
   finestra: le media query guardavano la finestra mentre le schede stavano in
   una colonna larga meno della meta', e a 1320px ne accostavano tre in 435px
   di posto. 300px e' la misura sotto cui i due campi data non stanno piu'
   affiancati. */
#events{display:grid;gap:10px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.periodo{border:2px solid var(--bordo-medio);border-radius:var(--r-lg);
  padding:12px;background:var(--bianco)}
/* Griglia e non flex-wrap: con flex il pulsante «elimina» finiva su una riga
   sua appena nome e tipo crescevano, e ogni scheda si portava dietro una riga
   vuota. Qui le quattro colonne sono fisse e la testata sta sempre su una riga. */
.periodo .testa{display:grid;gap:8px;align-items:center;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 74px 32px}
.periodo .testa input,.periodo .testa select{padding:7px 9px;font-size:14px}
/* I campi data del browser hanno una misura naturale generosa: senza questo
   sono loro a decidere la larghezza della scheda, e la scheda quella della
   colonna. */
.periodo input,.periodo select{min-width:0}
.periodo .etichetta{font-weight:600;min-width:0}
.periodo .tipo{min-width:0}
.periodo .fattore{font-variant-numeric:tabular-nums;
  font-weight:700;color:var(--terracotta-scuro);text-align:center;padding-left:4px;
  padding-right:4px}
.periodo .testa .btn.icona{padding:5px}
/* L'aiuto è la stessa frase su ogni scheda dello stesso tipo: in dodici copie
   era metà dell'altezza della pagina. Resta, piccolo, su una riga sola. */
.periodo .aiuto{font-size:12px;line-height:1.35;color:var(--ink-3);
  margin:7px 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.periodo:hover .aiuto,.periodo:focus-within .aiuto{white-space:normal}
/* minmax(0,1fr) e non 1fr: la colonna «auto» si dimensionava sul contenuto
   piu' largo (la riga di un'edizione, due campi data e un pulsante) e usciva
   dalla scheda invece di stringere cio' che ha dentro. */
.periodo .campi-tipo{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.periodo .campi-tipo label{font-size:12px;margin-bottom:3px}
.periodo .campi-tipo input,.periodo .campi-tipo select{padding:7px 9px;font-size:14px}
.periodo .campi-tipo .g2{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* quando cade davvero: lo calcola il server, non si scrive a mano */
.periodo .quando{margin-top:8px;padding-top:7px;font-size:12px;line-height:1.4;
  border-top:2px solid var(--bordo)}
.periodo .quando .poi{color:var(--ink-3)}
.periodo .quando.attesa{color:var(--ink-3);font-style:italic}
.periodo .quando.incompleto{color:var(--err)}
.edizione{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.edizione .tratto{color:var(--ink-3);flex:none}
/* I due campi data si dividono in parti uguali lo spazio che resta dopo la
   freccia e il pulsante: da soli chiederebbero ~140px l'uno e non scenderebbero
   sotto. */
.edizione input{padding:6px 8px;font-size:13px;flex:1 1 0;min-width:0}
.barra-periodi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}

/* ── i conti ─────────────────────────────────────────────────────────
   Il risultato sta sopra il modulo e in grande: chi torna su questa pagina
   viene per i due numeri, non per ricompilare i campi. */
.conti-esito{display:grid;gap:12px;grid-template-columns:1fr;margin:4px 0 12px}
@media(min-width:640px){.conti-esito{grid-template-columns:repeat(3,minmax(0,1fr))}}
.conti-num{border:2px solid var(--bordo);border-radius:var(--r-lg);
  padding:12px 14px;background:var(--bianco);min-width:0}
.conti-num .et{display:block;font-size:12px;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.04em}
.conti-num .grande{display:block;font-size:28px;line-height:1.15;margin:2px 0 4px}
.conti-num .grande.bene{color:var(--ok)}
.conti-num .grande.male{color:var(--terracotta-scuro)}
.conti-num .sub{font-size:12px}
.conti-campi{grid-template-columns:1fr}
@media(min-width:760px){.conti-campi{grid-template-columns:1fr 1fr}}
.conti-campi .sub{margin-top:4px}
.conti-card .avviso.piccolo{margin-top:8px}

/* ── la zona ─────────────────────────────────────────────────────────
   Sta fra l'elenco dei periodi e i bottoni: e' la riga che spiega
   perche' il bottone della proposta ha qualcosa da proporre. Il filetto
   sopra la separa dai periodi senza farne una card dentro una card. */
.zona-box{margin-top:16px;padding-top:14px;border-top:2px solid var(--linea)}
.zona-box .campi{gap:8px}
.zona-campi{grid-template-columns:1fr;align-items:end}
@media(min-width:520px){.zona-campi{grid-template-columns:minmax(0,1fr) auto}}
.zona-box p.sub{margin-top:8px}

/* ── anteprima del diff ─────────────────────────────────────────────── */
.modal .box.largo{max-width:760px}
.diff-prop{border:2px solid var(--bordo);border-radius:var(--r-lg);
  padding:12px 14px;margin-bottom:10px;background:var(--bianco)}
.diff-prop summary{cursor:pointer;font-size:14px;color:var(--ink-2)}
.diff-prop summary b{color:var(--ink)}
.diff-prop table{margin-top:10px;min-width:400px}
/* effetto della protezione del minimo, riga per riga */
#nonrefEffect{margin-top:16px}
#dblWarn .avviso{margin-top:14px}
.protetto{color:var(--ok);font-weight:600}
.scoperto{color:var(--terracotta-scuro);font-weight:600}

/* utenti */
.utente{background:var(--surface-1);border:2px solid var(--bordo);
  border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column}
.utente .alto{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:18px}
.utente h3{font-size:20px;line-height:28px}
.utente > .sub{margin-bottom:12px}
.utente .mail{display:flex;align-items:center;gap:8px;color:var(--ink-3);
  font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tondo{width:56px;height:56px;border-radius:var(--r-full);display:flex;flex:none;
  align-items:center;justify-content:center;font-size:18px;font-weight:600;color:var(--su-pieno);
  background:var(--terracotta);border:2px solid var(--terracotta-orlo)}
.tondo.editor{background:var(--amber);color:var(--su-ambra);border-color:var(--ambra-orlo)}
.tondo.viewer{background:var(--surface-4);color:var(--ink-2);border-color:var(--ink-orlo-tenue)}
/* Margini e padding scritti per intero: la `.piede` del piè di pagina, piu'
   in basso nel foglio, portava qui «margin:56px auto 0» e la riga del fondo
   scheda restava corta e centrata invece che larga quanto la scheda. */
.utente .piede{margin:auto 0 0;padding:16px 0 0;font-size:inherit;border-top:2px solid var(--bordo-tenue);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.utente .piede .sub{font-style:italic}
.azioni-riga{display:flex;gap:2px}
.aggiungi{background:var(--surface-2);border:2px dashed var(--bordo-forte);
  border-radius:var(--r-lg);padding:28px 20px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:6px;cursor:pointer;
  color:var(--ink-3);transition:.2s;min-height:200px}
.aggiungi .bolla{width:48px;height:48px;border-radius:0;background:var(--surface-4);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;transition:transform .2s}
/* `--linea` e' il colore di un bordo, non di un testo: qui dava 1,6:1 e la
   riga era quasi invisibile — difetto che veniva da prima del cambio di
   marchio, ed e' lo stesso che il prototipo segnala per questa scheda. */
.aggiungi .nota{font-size:12px;color:var(--ink-3)}

/* tabella dei permessi per ruolo */
#roleTable thead tr{background:var(--surface-1)}
#roleTable th.admin{color:var(--terracotta-scuro)}
#roleTable th.editor{color:var(--amber-scuro)}
#roleTable th.viewer{color:var(--ink-3)}
.si.admin{color:var(--terracotta-scuro)}
.si.editor{color:var(--amber)}
.si.viewer{color:var(--ink-2)}
.no{color:var(--linea)}

/* barra di salvataggio */
.savebar{position:fixed;left:0;right:0;z-index:45;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:var(--bianco);border-top:2px solid var(--bordo-forte);
  box-shadow:var(--ombra-barra);
  padding:12px 16px;display:none;align-items:center;gap:12px}
.savebar.on{display:flex}
.savebar .txt{flex:1;min-width:0;font-size:13px;color:var(--ink-2)}
.savebar .txt b{display:block;color:var(--ink);font-weight:600;font-size:14px}

/* navigazione inferiore */
/* La barra in basso e' l'unico elemento sempre presente: con sei voci su uno
   schermo da 360px ogni voce ha 58 pixel. Lo stato attivo era una pastiglia
   larga quanto tutta la voce, che a quella misura legge come una macchia e
   toglie spazio all'etichetta: «Calendario» entrava per un pelo e sotto i
   375px andava a capo. Adesso la pastiglia sta **solo dietro l'icona**, e
   l'etichetta ha tutta la larghezza per se'. */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:7px 2px calc(env(safe-area-inset-bottom) + 7px);
  background:var(--vetro);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:2px solid var(--bordo-forte);border-radius:var(--r-xl) var(--r-xl) 0 0;
  display:flex;align-items:stretch}
.bottomnav .voce{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  background:none;border:none;font-family:inherit;-webkit-appearance:none;appearance:none;
  align-items:center;justify-content:flex-start;gap:3px;padding:0;
  color:var(--ink-2);text-decoration:none;cursor:pointer;font-size:12px;
  line-height:15px;font-weight:500;letter-spacing:-.005em;
  transition:color .18s ease}
.bottomnav .pastiglia{display:flex;align-items:center;justify-content:center;
  width:100%;max-width:56px;height:28px;border-radius:var(--r-full);
  transition:background-color .18s ease,transform .18s ease}
.bottomnav .etichetta{max-width:100%;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:center}
.bottomnav .voce:active .pastiglia{transform:scale(.9)}
/* Il numero accanto a Check-in: quanti soggiorni hanno qualcosa da sistemare. */
.bottomnav .pastiglia{position:relative}
.bottomnav .pallino{position:absolute;top:-4px;right:calc(50% - 22px);min-width:18px;height:18px;
  padding:0 5px;border-radius:var(--r-full);background:var(--terracotta);color:var(--su-pieno);
  font-size:11px;font-weight:700;line-height:18px;text-align:center}
/* Attivo in terracotta, non in ambra: e' il colore primario del pannello, e
   quello che l'ambra segnalava (un'azione in attesa) e' un'altra cosa. */
.bottomnav .voce.on{color:var(--terracotta-scuro);font-weight:700}
.bottomnav .voce.on .pastiglia{background:var(--terracotta-tenue)}
.bottomnav .voce.on .ic{fill:var(--terracotta-scuro)}
/* Le voci erano sette e a 375px ne restavano 53 pixel l'una: «Andamento»
   ci entrava solo a 9,5px, cioe' a un corpo che non si legge — e la misura
   veniva dalla barra, non dalla lettura. Da cinque voci in poi ognuna ha 75
   pixel e il testo torna a 12px, che e' il minimo sotto cui non si scende.
   La parola piu' lunga, «Calendario», ne misura 62: sta intera anche su uno
   schermo da 320. */
@media(min-width:520px){
  .bottomnav .voce{font-size:13px}
  .bottomnav .pastiglia{height:30px}
}

/* modali: chiuse per definizione, si aprono aggiungendo .aperta */
.modal{position:fixed;inset:0;background:var(--velo);z-index:80;
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(3px)}
.modal.aperta{display:flex}
.modal .box{background:var(--surface);border-radius:var(--r-xl);padding:26px;
  max-width:460px;width:100%;box-shadow:var(--ombra-alta);max-height:90vh;overflow-y:auto}
.modal .box h3{font-size:20px;font-weight:600;margin-bottom:4px}
.modal .box > .sub{margin-bottom:18px}
/* Sulla schermata d'accesso il marchio e' l'unica cosa che si vede prima di
   entrare: sta piu' largo che nella barra. */
.modal .logo{margin-bottom:18px}
.modal .logo .marchio{width:38px;height:38px}
.modal .logo .wordmark{font-size:28px}
.modal .azioni{margin-top:22px;display:flex;gap:10px;justify-content:flex-end}
.modal .azioni ~ .sub{margin:14px 0 0;text-align:center}
/* Le caselle del consenso. Il bersaglio e' tutta la riga, non il quadratino:
   dodici pixel di lato sono un bersaglio da mouse, e questa pagina si apre
   dal telefono almeno quanto dal computer. `align-items:start` perche' il
   testo va a capo e la casella deve restare in cima, non centrarsi su tre
   righe. */
.consenso{display:flex;gap:10px;align-items:start;cursor:pointer;
  padding:10px 0;line-height:20px;font-size:13px;color:var(--ink-2)}
.consenso input{flex:none;margin-top:2px;width:17px;height:17px;
  accent-color:var(--terracotta);cursor:pointer}
.consenso a{color:var(--terracotta-scuro);font-weight:500;text-underline-offset:2px}
.consenso b{color:var(--ink);font-weight:600}

/* Le pagine di solo testo — privacy e condizioni. Non hanno lo scheletro del
   pannello e non devono prendersene le misure: 64ch e' la larghezza di
   lettura, la stessa che `style.css` da' ai paragrafi ovunque. Stavano dentro
   un `<style>` nel template finche' la pagina era una sola; da due in poi
   sarebbero due copie che divergono al primo ritocco. */
.foglio{max-width:64ch;margin:0 auto;padding:40px 20px 60px}
.foglio .logo{margin-bottom:28px}
.foglio h1{font-size:26px;font-weight:600;margin-bottom:6px}
.foglio h2{font-size:18px;font-weight:600;margin:34px 0 10px}
.foglio p{margin:0 0 14px;line-height:24px}
.foglio .meta{color:var(--ink-2);font-size:13px;margin-bottom:26px}
.foglio a{color:var(--terracotta-scuro);font-weight:500;text-underline-offset:2px}
.foglio-piede{margin-top:40px;padding-top:18px;border-top:2px solid var(--bordo);
  display:flex;flex-wrap:wrap;gap:18px;font-size:13px}

/* Il piede del pannello. Discreto ma non nascosto: e' il posto in cui si
   cercano queste due pagine quando si e' gia' dentro, e un collegamento che
   c'e' solo nella schermata d'accesso e' un collegamento che non trova piu'
   nessuno. */
.piede{margin:56px auto 0;padding:20px 0 28px;border-top:2px solid var(--bordo);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  font-size:12px;color:var(--ink-2)}
.piede a{color:var(--ink-2);text-underline-offset:2px}
.piede a:hover{color:var(--terracotta-scuro)}
.piede .sp{flex:1;min-width:12px}
/* Lo stesso piede dentro una modale: piu' piccolo e senza riga sopra, che li'
   la scatola ha gia' un bordo suo. */
.modal .box > .piede-modale{margin-top:8px;font-size:12px;text-align:center}
.modal .box > .piede-modale a{color:var(--ink-2);font-weight:400}
/* Il rimando fra la schermata d'accesso e la pagina d'invito: sono le due
   facce della stessa porta, e sono gli unici collegamenti testuali di tutto
   il pannello — per questo la regola sta qui, addosso a loro, e non fra gli
   stili di base dove non servirebbe a nient'altro. */
.modal .box a{color:var(--terracotta-scuro);font-weight:500;text-underline-offset:2px}

/* toast */
.toast{position:fixed;left:16px;right:16px;z-index:90;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  padding:14px 16px;border-radius:var(--r-lg);font-size:14px;line-height:20px;
  box-shadow:var(--ombra-alta);background:var(--scuro);color:var(--su-scuro);
  animation:sali .25s ease-out}
.toast.err{background:var(--err);color:var(--su-pieno)}
.toast.ok{background:var(--ok);color:var(--su-pieno)}
@media(min-width:640px){.toast{left:auto;right:20px;max-width:420px}}

/* dettaglio scuro, come la card «Dettaglio giorno» dei mockup */
.scuro{background:var(--scuro);color:var(--su-scuro);border-radius:var(--r-xl);padding:22px;
  position:relative;overflow:hidden}
.scuro h3{color:var(--su-scuro);font-size:20px;font-weight:600}
.scuro .sub{color:var(--su-scuro-tenue)}
/* il contenuto sta sopra l'alone sfocato */
.scuro .contenuto{position:relative;z-index:1}
.scuro .griglia{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:16px 0;margin:16px 0;border-top:2px solid var(--riga-su-scuro);
  border-bottom:2px solid var(--riga-su-scuro)}
.scuro .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  opacity:.6;font-weight:700}
.scuro .v{font-size:20px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.scuro .d{font-size:14px;margin-top:4px}
.scuro .alone{position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;
  border-radius:0;background:var(--alone);filter:blur(44px);pointer-events:none}

/* Visibile solo ai lettori di schermo: fuori dallo schermo ma dentro il
   documento. `display:none` lo toglierebbe anche a loro. */
.solo-voce{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── utilità ────────────────────────────────────────────────────────────
   Poche e con un nome che dice cosa fanno. Le distanze qui sotto servono
   dove il margine dipende da come il blocco è accostato agli altri, non da
   cosa contiene: un pulsante «aggiungi» sotto una tabella, per esempio.
   ─────────────────────────────────────────────────────────────────────── */
.nascosto{display:none!important}
.stacca-sm{margin-top:10px}
.stacca{margin-top:14px}
.stacca-lg{margin-top:16px}
.stacca-xl{margin-top:var(--sp-lg)}

.solo-desktop{display:none}
@media(min-width:900px){.solo-desktop{display:inline-flex}}

/* ── Oggi ───────────────────────────────────────────────────────────
   La pagina d'ingresso: cosa fa la casa oggi, cosa e' arrivato, cosa ha
   mosso il motore, quanto e' pieno davanti. Le stesse card del resto del
   pannello, con tre schemi nuovi: la coppia partenza/arrivo, la lista dei
   movimenti di prezzo e la tabella dell'occupazione. */
.oggi-azioni{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:var(--sp-md);flex-wrap:wrap}
.oggi-azioni .t-meta{color:var(--ink-3)}
.btn.caricando{opacity:.6}
.avviso.piccolo{padding:9px 12px;font-size:13px;line-height:19px;margin:10px 0 0}

/* «In casa oggi»: una riga per casa (25 settembre 2026). */
.oggi-righe{list-style:none;margin:6px 0 0;padding:0}
.oggi-riga{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  padding:10px 0;border-bottom:2px solid var(--bordo-tenue);font-size:14px}
.oggi-riga:last-child{border-bottom:none}
.oggi-riga .ic{vertical-align:-2px;margin-right:4px}
.oggi-riga .sub{margin:0}
.oggi-nome{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--terracotta-scuro);min-width:84px}
.link-checkin{margin:8px 0 0}

/* Sconto last minute: le notti a ridosso, in home.
   Le tessere sono grandi apposta — si tocca con il pollice, in piedi, con il
   telefono in mano. Il prezzo di adesso e' il numero grande, le percentuali
   stanno sotto e portano gia' scritto quanto verrebbe: chi preme sa cosa
   pubblica prima di premere. */
.lm-str{padding:14px 0;border-bottom:2px solid var(--bordo-tenue)}
.lm-str:last-child{border-bottom:none;padding-bottom:0}
.lm-str:first-child{padding-top:0}
.lm-nome{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--terracotta-scuro);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lm-notti{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:640px){.lm-notti{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
/* La riga di una struttura piena. Volutamente piatta: niente riquadro, niente
   colore: e' una notizia da leggere di sfuggita, e se pesasse come una tessera
   con gli sconti l'occhio ci si fermerebbe sopra ogni volta per niente. */
.lm-piena{margin:0;color:var(--ink-3)}
.lm-piena b{color:var(--ink-2);font-weight:600}
.lm-notte{background:var(--surface-2);border-radius:var(--r-lg);padding:12px 14px;
  display:flex;flex-direction:column;gap:2px}
.lm-notte .sub{margin:0}
.lm-notte.scontata{background:var(--terracotta-velo);
  border:2px solid var(--terracotta-orlo)}
.lm-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.lm-quando{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);line-height:17px}
.lm-quando .t-meta{display:block;letter-spacing:0;text-transform:none;
  font-weight:500;color:var(--ink-3)}
.lm-ora{text-align:right;line-height:1}
.lm-ora .t-meta{display:block;margin-top:4px;color:var(--ink-3)}
.lm-piede{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-top:10px}
.lm-piede .sub{flex:1;min-width:130px}
.lm-sconti{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.lm-sconto{flex:1 1 auto;min-width:74px;cursor:pointer;
  font:700 14px/1 'Archivo',sans-serif;color:var(--terracotta-scuro);
  background:var(--bianco);border:2px solid var(--terracotta-orlo);
  border-radius:var(--r);padding:8px 6px;display:flex;flex-direction:column;
  align-items:center;gap:3px;transition:background .15s,border-color .15s}
.lm-sconto span{font-weight:500;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.lm-sconto:hover:not(:disabled){background:var(--terracotta-sfumo);
  border-color:var(--terracotta)}
.lm-sconto:active{transform:scale(.97)}
.lm-sconto:disabled{opacity:.45;cursor:not-allowed}

/* Il conto della conferma: da quanto, a quanto, quanto sconto resta davvero.
   Il terzo numero e' li' perche' il minimo della struttura puo' mangiarsi meta'
   dello sconto chiesto, e chi preme deve vederlo prima, non dopo. */
.lm-conto{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface-2);border-radius:var(--r-lg);padding:12px 14px;
  margin:12px 0}
.lm-conto > div{display:flex;flex-direction:column;gap:2px}
.lm-conto b{font-size:19px;font-variant-numeric:tabular-nums}
.lm-conto b.nuovo{color:var(--terracotta-scuro)}
.lm-conto .t-meta{color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.lm-conto .freccia{color:var(--ink-3);font-size:18px}

.pren-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;
  flex-direction:column;gap:2px}
.pren{padding:10px 0;border-bottom:2px solid var(--bordo-tenue);
  display:flex;flex-direction:column;gap:1px}
.pren:last-child{border-bottom:none}
.pren b{font-size:15px}
.pren .sub{margin:0}
.pren-str{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
.pren.cancellata b{text-decoration:line-through;color:var(--ink-3)}
.pren.cancellata .pren-str{color:var(--testo-err)}

/* Una casa sotto l'altra, sempre. Tre colonne affiancate davano a ogni casa
   un terzo di riga: dentro ci stanno un nome, due chip, una frase e una lista
   di movimenti «12 lug 78 → 84 € +8%», e a 360px di colonna ognuna di quelle
   righe andava a capo due volte. Incolonnate si leggono, e il confronto fra
   le case si fa scorrendo — che e' come si legge un elenco. */
.camb-griglia{display:grid;gap:var(--sp-md);grid-template-columns:1fr}
.camb{background:var(--surface-2);border-radius:var(--r-lg);padding:14px}
/* A tutta larghezza la lista dei movimenti diventa una riga lunghissima con
   tre parole in fondo a sinistra. Le colonne fisse la tengono incolonnata:
   data, prezzi, scarto — sempre negli stessi tre posti, riga dopo riga. */
@media(min-width:700px){
  .camb .movimenti li{display:grid;gap:12px;justify-content:start;
    grid-template-columns:118px 132px auto}
  .camb .movimenti li .delta{justify-self:start}
}
.camb .sub{margin:6px 0 0}
.camb-num{display:flex;flex-wrap:wrap;gap:6px}
.movimenti{list-style:none;margin:10px 0 0;padding:0;font-size:13px}
.movimenti li{display:flex;gap:8px;align-items:baseline;padding:3px 0;
  justify-content:space-between}
.movimenti .sub{margin:0}
/* `.delta` (su / giu / pari / forte) esiste gia' piu' sopra, definita per la
   tabella della verifica prezzi: stessa semantica, stessi colori. Qui si
   riusa e basta. Ridefinirla voleva dire due verita' sullo stesso nome, e
   quella che vince dipende dall'ordine del file. */

table.occ{min-width:380px}
table.occ td.tot{white-space:nowrap;font-weight:700}
/* La prima colonna porta un intervallo di date — «ven 31 lug – gio 6 ago» —
   e su un telefono, con tre strutture piu' il totale, veniva schiacciata fino
   ad andare a capo **a ogni spazio**: sette righe di testo per dire una data.
   Il `nowrap` la tiene su una riga sola e lascia il lavoro allo scorrimento
   orizzontale di `.tscroll`, che e' li' per questo.
   E' ferma mentre si scorre per lo stesso motivo della griglia dei prezzi:
   scorrendo verso destra la data esce di scena, e una percentuale attribuita
   alla settimana sbagliata e' peggio di una percentuale non vista. */
table.occ td:first-child,
table.occ th:first-child{white-space:nowrap;position:sticky;left:0;
  background:var(--surface-1);z-index:1}
table.occ th:first-child{background:var(--surface-1)}
/* La tabella dell'andamento ha sei colonne contro le quattro dell'occupazione:
   con `min-width:380px` le due centrali si schiacciavano e il ritmo — che e' un
   numero di due caratteri — andava a capo. Lo scorrimento di `.tscroll` fa il
   resto, come sopra. */
table.occ.andamento{min-width:520px}
/* Gli elenchi dentro una scheda: i «perche'» di una proposta. Il pallino sta
   fuori dal testo perche' le voci vanno a capo spesso, e con `inside` la
   seconda riga finirebbe sotto il pallino invece che allineata alla prima. */
.elenco{margin:8px 0 0;padding-left:18px;list-style:disc outside}
.elenco li{margin-bottom:3px}
.elenco li:last-child{margin-bottom:0}
.occ-barra{display:inline-block;width:54px;height:6px;border-radius:var(--r-full);
  background:var(--surface-4);margin-right:8px;vertical-align:middle;overflow:hidden}
.occ-barra i{display:block;height:100%;border-radius:var(--r-full)}
.occ-barra i.alta{background:var(--ok)}
.occ-barra i.media{background:var(--amber)}
.occ-barra i.bassa{background:var(--terracotta-scuro)}
.occ-barra i.w0{width:0%}
.occ-barra i.w5{width:5%}
.occ-barra i.w10{width:10%}
.occ-barra i.w15{width:15%}
.occ-barra i.w20{width:20%}
.occ-barra i.w25{width:25%}
.occ-barra i.w30{width:30%}
.occ-barra i.w35{width:35%}
.occ-barra i.w40{width:40%}
.occ-barra i.w45{width:45%}
.occ-barra i.w50{width:50%}
.occ-barra i.w55{width:55%}
.occ-barra i.w60{width:60%}
.occ-barra i.w65{width:65%}
.occ-barra i.w70{width:70%}
.occ-barra i.w75{width:75%}
.occ-barra i.w80{width:80%}
.occ-barra i.w85{width:85%}
.occ-barra i.w90{width:90%}
.occ-barra i.w95{width:95%}
.occ-barra i.w100{width:100%}

/* ── accessibilita' e movimento ──────────────────────────────────────
   Due cose che mancavano e che non si vedono finche' non servono. */

/* Il contorno di messa a fuoco da tastiera. `:focus-visible` e non `:focus`:
   cosi' non compare a ogni clic col mouse, ma c'e' per chi naviga in Tab. */
.btn:focus-visible,.bottomnav .voce:focus-visible,.avatar:focus-visible,
.menu button:focus-visible,.prop-hd:focus-visible,a:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:2px;border-radius:var(--r)}
.bottomnav .voce:focus-visible{outline-offset:-2px}

/* Chi ha chiesto meno animazioni al sistema operativo lo ha fatto per un
   motivo: nausea da movimento, attenzione, batteria. Qui si spegne tutto,
   non si rallenta soltanto. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ── aree di tocco ───────────────────────────────────────────────────
   Alcuni comandi sono piccoli per ragioni di composizione: i bottoni-icona
   dell'editor dei periodi stanno in righe dense, e ingrandirli davvero
   spezzerebbe l'allineamento. Si allarga allora **l'area sensibile**, non il
   disegno: un rettangolo invisibile intorno al bottone. Il pollice trova 38-40
   pixel, l'occhio continua a vedere l'icona di prima. */
.btn.icona{position:relative}
.btn.icona::after{content:"";position:absolute;inset:-6px;border-radius:0}
.btn.piccolo{position:relative;min-height:34px}
.btn.piccolo::after{content:"";position:absolute;inset:-4px;border-radius:0}
/* I menu a tendina invece si possono alzare senza danno. */
select,.tipo{min-height:40px}

/* ── leggibilita' su schermo largo ───────────────────────────────────
   A 1280px il testo esplicativo correva per 158 caratteri a riga: l'occhio,
   arrivato in fondo, non ritrova l'inizio di quella dopo. Sopra i 75-80 si
   legge peggio, e questo pannello e' fatto di spiegazioni brevi che vanno
   lette davvero. Il limite e' in `ch`, cioe' in caratteri: cambia con il corpo
   del testo invece di essere un numero di pixel scelto una volta. */
/* 62ch e non 72: l'unita' `ch` misura la larghezza dello zero, che in
   Space Grotesk e' generosa, e 72ch davano ancora 92 caratteri per riga.
   Misurato sul risultato, non sul numero che suonava giusto. */
.sub,.card > p,.intro .sub{max-width:62ch}

/* La barra in basso a schermo largo non deve diventare un nastro: le voci si
   raccolgono al centro invece di allargarsi a 210px l'una. */
@media(min-width:560px){
  .bottomnav{justify-content:center;gap:4px}
  .bottomnav .voce{flex:0 1 104px}
}


/* ── il passaggio del mouse ──────────────────────────────────────────
   Erano regole sparse per tutto il foglio. Su un telefono il passaggio del
   mouse non esiste, ma il browser lo simula al tocco: si tocca «Salva», il
   bottone resta acceso, e ci si chiede se abbia funzionato. `hover:hover`
   chiede al dispositivo se un puntatore c'e' davvero — se non c'e', queste
   regole non esistono e lo stato non si incolla.
   ─────────────────────────────────────────────────────────────────────── */
@media(hover:hover){
  .avatar:hover{filter:brightness(1.08)}
  .menu button:hover{background:var(--surface-2)}
  .btn:hover:not(:disabled){background:var(--surface-2)}
  .btn.primario:hover:not(:disabled){background:var(--terracotta-scuro);border-color:var(--terracotta-scuro)}
  .btn.pericolo:hover:not(:disabled){filter:brightness(1.08);background:var(--err)}
  .btn.icona:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}
  .mesi button:hover{border-color:var(--terracotta)}
  .griglia .cella:hover:not(:disabled){border-color:var(--terracotta);background:var(--bianco)}
  .griglia .cella.bloccata:hover{border-color:var(--linea)}
  .aggiungi:hover{border-color:var(--terracotta-orlo-forte);background:var(--panna)}
  .aggiungi:hover .bolla{transform:scale(1.1)}
  .import-diag summary:hover{color:var(--ink)}
}

/* L'aiuto delle schede periodo si apriva **solo** passandoci sopra col mouse:
   su un telefono quella riga restava tagliata per sempre, e lo `:focus-within`
   che l'accompagnava vale solo dopo aver toccato un campo. Dove il puntatore
   non c'e', il testo si mostra e basta: sono due righe. */
@media(hover:none){
  .periodo .aiuto{white-space:normal}
}

/* ── i soldi ─────────────────────────────────────────────────────────
   La discesa dal lordo al netto si legge come una ricevuta: una riga per
   sottrazione, i numeri incolonnati a destra con cifre a larghezza fissa.
   Il lordo e il netto sono gli unici due valori in grande, perche' sono gli
   unici due che si tengono a mente. */
.scala{list-style:none;margin:14px 0 4px;padding:0}
.scala li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:2px solid var(--bordo-tenue);font-size:14px}
.scala li:last-child{border-bottom:none}
.scala b{font-weight:600;white-space:nowrap}
.scala li.lordo{font-weight:500}
.scala li.lordo b,.scala li.netto b{font-size:20px;font-weight:700}
.scala li.netto{border-top:2px solid var(--bordo-forte);margin-top:4px;
  padding-top:12px;color:var(--ok)}
.scala li.netto b{color:var(--ok)}

table.soldi{min-width:420px}
table.soldi td.mono,table.soldi th{text-align:right;white-space:nowrap}
table.soldi td:first-child,table.soldi th:first-child{text-align:left}
table.soldi td.meno{color:var(--ink-3)}
table.soldi td.netto{font-weight:700;color:var(--ok)}
table.soldi .sub{display:inline;margin:0;font-size:12px}

/* ── rifiniture dall'audit di redesign ───────────────────────────────
   Quattro cose trovate applicando la lista di controllo al pannello vero.
   Le altre voci della lista riguardano siti vetrina e qui non si applicano. */

/* «Salta al contenuto»: fuori dallo schermo finche' non lo si mette a fuoco
   con il Tab. Senza, chi naviga da tastiera deve passare ogni volta per la
   barra in alto e il menu dell'account prima di arrivare ai dati. */
.salta{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--terracotta);color:var(--su-pieno);padding:10px 16px;
  border-radius:0;font-size:14px;font-weight:600;text-decoration:none}
.salta:focus{left:0}
main:focus{outline:none}

/* Parole orfane: una parola sola sull'ultima riga di un titolo si nota, e su
   uno schermo stretto capita spesso. `balance` distribuisce le righe dei
   titoli, `pretty` evita l'orfana nei paragrafi. */
.t-hero,h3,.card h3{text-wrap:balance}
.sub{text-wrap:pretty}

/* Scheletro di caricamento: la pagina Oggi arriva da una chiamata di rete, e
   senza questo mostra un vuoto che sembra un errore. Ha la forma di cio' che
   sta per apparire, non un cerchietto che gira. */
.scheletro{display:flex;flex-direction:column;gap:var(--sp-md)}
.scheletro .osso{background:var(--surface-2);border-radius:var(--r-lg);
  border:2px solid var(--bordo);position:relative;overflow:hidden}
.scheletro .osso.alto{height:184px}
.scheletro .osso.medio{height:132px}
@media(prefers-reduced-motion:no-preference){
  .scheletro .osso::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,var(--lucido),transparent);
    animation:luccica 1.4s ease-in-out infinite}
  @keyframes luccica{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
}

/* ── import degli incassi ────────────────────────────────────────────
   Il file input di serie e' inguardabile e non si puo' stilare: si nasconde e
   si usa la sua `<label>` come pulsante. Nascosto ma **non** `display:none`,
   che lo toglierebbe anche alla navigazione da tastiera. */
.import-riga{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.import-riga input[type=file]{position:absolute;width:1px;height:1px;
  opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.import-riga label.btn{cursor:pointer}
.import-riga input[type=file]:focus-visible + label.btn,
.import-riga label.btn:focus-within{outline:2px solid var(--terracotta);outline-offset:2px}
.import-come{background:var(--surface-2);border-radius:var(--r-lg);padding:12px 14px;
  margin-top:14px}
.import-come .sub{margin-top:4px}
.import-ok{margin-top:14px}
.import-diag{margin-top:12px;font-size:13px}
.import-diag summary{cursor:pointer;color:var(--ink-2);font-weight:500;
  padding:6px 0;min-height:34px;display:flex;align-items:center;position:relative}
/* Stessa cura dei bottoni piccoli qui sopra: con box-sizing:border-box il
   padding sta dentro i 34px, quindi il dito trova 34 e non 38. Si allarga
   l'area sensibile, non il disegno: 34 + 4 + 4 = 42. */
.import-diag summary::after{content:"";position:absolute;inset:-4px}
.import-diag .sub{margin-top:4px}
/* ── la tabella dell'anno ─────────────────────────────────────────────
   Il mese in corso e' il punto da cui si legge tutto il resto: quello che sta
   sopra e' storia, quello che sta sotto e' da riempire. Si segna con un filo
   di fondo e una barra a sinistra, non col grassetto — la riga e' gia' piena
   di numeri, e appesantirli li rende meno leggibili invece che piu' evidenti.

   I mesi chiusi si spengono: restano leggibili, ma non chiedono attenzione. */
table.occ tr.mese-ora > td,
table.occ tr.mese-ora > td:first-child{background:var(--riga-ora);
  font-weight:600}
table.occ tr.mese-ora > td:first-child{box-shadow:inset 3px 0 0 var(--terracotta)}
/* I mesi chiusi hanno una tabella tutta loro, con le sue colonne. La riga in
   fondo e' il totale del periodo scelto col filtro degli anni. */
table.occ.andamento tr.tot > td{border-top:2px solid var(--bordo-forte);
  background:var(--surface-1)}
/* Il residuo del mese in corso, sotto la cifra del mese intero: una riga sua,
   piccola, perche' e' la risposta a un'altra domanda — «quanto resta da
   vendere» — e non un secondo modo di dire lo stesso numero. */
.sub.sotto{display:block;margin:2px 0 0;font-size:11px;line-height:14px;
  white-space:nowrap}

/* ── con quanto anticipo si prenota ───────────────────────────────────
   Due barre in scala sul piu' lungo dei due: la domanda e' quale raggio e'
   piu' corto, non quanti giorni sono in assoluto. Il numero resta scritto
   accanto, perche' una barra sola non si legge e due barre senza numeri
   raccontano una proporzione ma non un fatto. */
.lead-grafico{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.lead-riga{display:flex;align-items:center;gap:10px}
.lead-eti{font-size:12.5px;color:var(--ink-2);width:62px;flex:none}
.lead-barra{flex:1;height:10px;background:var(--surface-3);border-radius:0;
  overflow:hidden}
.lead-barra i{display:block;height:100%;border-radius:0}
.lead-barra i.noi{background:var(--terracotta)}
.lead-barra i.loro{background:var(--amber)}
.lead-num{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;
  width:56px;text-align:right;flex:none}

/* ── scarto contro i paragonabili ─────────────────────────────────────
   Una riga per struttura, non un numero solo: Vulcano e' un monolocale e gli
   altri due sono loft con la camera separata, quindi competono con annunci
   diversi e possono stare da parti opposte. Una media fra i tre nasconderebbe
   proprio questo.

   Il colore segue il verso — terracotta sotto, ambra sopra, inchiostro quando
   si e' allineati — perche' «sotto» e «sopra» vogliono due decisioni opposte e
   il colore lo dice prima della lettura. L'ambra qui era #8F6800 scritto a
   mano, perche' `--amber-scuro` sul fondo della scheda dava 4,05:1 e la regola
   di casa e' «zero voci sotto 4,5». Col marchio nuovo il token e' sceso a
   #8A6400 e passa dappertutto, quindi la deroga non serve piu': si torna al
   nome. Sotto i 520px il conteggio delle notti sparisce: e' il dettaglio, lo
   scarto e' la cosa. */
.conc-righe{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.conc-riga{display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:2px dashed var(--linea)}
.conc-riga:last-child{border-bottom:none}
.conc-nome{flex:1;min-width:0;font-weight:600;font-size:14px;
  display:flex;flex-direction:column;gap:1px}
.conc-taglia{font-weight:400;font-size:11.5px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.06em}
.conc-notti{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.conc-scarto{font-size:22px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;width:76px;text-align:right;flex:none}
.conc-scarto.giu{color:var(--terracotta-scuro)}
.conc-scarto.su{color:var(--amber-scuro)}
.conc-scarto.pari{color:var(--ink-2)}
:where([data-tema="scuro"]) .conc-scarto.su{color:var(--amber)}
@media(max-width:520px){
  .conc-notti{display:none}
}

/* ── collegamenti verso fuori ─────────────────────────────────────────
   Il pannello non ne aveva nessuno, e senza una regola il browser mette il
   suo blu sottolineato, che qui stona. Terracotta come il resto dei comandi,
   sottolineatura staccata dal testo, e la freccia dice che si esce. */
.link-est{color:var(--terracotta-scuro);text-decoration:underline;
  text-underline-offset:2px;font-weight:500;display:inline-flex;
  align-items:center;gap:3px}
.link-est:hover{color:var(--terracotta-scuro)}
.link-est:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;
  border-radius:0}
.link-est .ic{width:12px;height:12px;opacity:.7}

code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--surface-3);padding:1px 5px;border-radius:0}


/* ── prezzi da ricopiare ──────────────────────────────────────────────
   La settimana e' l'unita' di questo lavoro: si apre l'extranet, si sceglie un
   periodo e si battono i numeri. Ogni blocco sta in piedi da solo — titolo,
   bottoni, tabella — perche' chi ricopia guarda una settimana per volta e
   perde il segno se le vede tutte insieme. */
.settimana{border:2px solid var(--bordo);border-radius:var(--r-lg);
  padding:12px 14px;margin-top:12px}
.settimana-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:8px}
.settimana-hd .spinta{flex:1}
/* Il numero da ricopiare e' l'unica cosa che si deve leggere da lontano: e'
   quello che l'occhio cerca mentre le mani stanno sull'altra finestra. */
.settimana .prezzo-nuovo{font-size:18px;font-weight:650;color:var(--ink)}
/* Un annuncio senza casa non e' un errore, e' una domanda ancora aperta:
   ambra come tutte le altre attese del pannello, non rosso. */
#impAnnunci tr.da-fare td{background:var(--ambra-velo)}
#impAnnunci select{max-width:100%}

@media(max-width:520px){
  .settimana{padding:10px}
  .settimana-hd{gap:6px}
}

/* ── le case dichiarate registrandosi ─────────────────────────────────
   Ogni casa e' un blocco a se': nome sopra, i due prezzi affiancati sotto.
   Affiancarli conta — sono la stessa domanda posta due volte, «quanto vale» e
   «sotto quanto non scendo», e messi in colonna sembrerebbero due cose
   diverse. */
.casa-riga{border:2px solid var(--bordo);border-radius:var(--r-lg);
  padding:12px;margin-bottom:10px}
.due-campi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.casa-riga .c-togli{margin-top:2px;align-self:start}
/* Con una casa sola non c'e' niente da togliere, e il bottone sarebbe un
   invito a svuotare l'unico campo obbligatorio. */
.casa-riga:only-child .c-togli{display:none}

/* Una finestra con dentro una tabella di dodici righe per cinque colonne: a
   460px le colonne si spezzano tutte, e una tabella che si legge a fatica non
   aiuta a decidere — che e' l'unica cosa per cui quella finestra esiste. */
.modal.larga .box{max-width:680px}


/* ══════════════════════════════════════════════ la pagina «Oggi» ══════
   Il ridisegno Cronografo. Le parti nuove sono quattro: il verdetto, le
   tessere, le bande e la vista a densita' dell'occupazione.
   ═══════════════════════════════════════════════════════════════════════ */

/* La testata: titolo e comando sulla stessa riga. */
.intro-riga{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}

/* ── il verdetto ──────────────────────────────────────────────────────
   Una riga sola in cima. Nello stato normale e' inchiostro su fondo di
   scheda, con la riga forte intorno: non festeggia, constata. Se il giro non
   e' passato diventa rossa — **tinta** e cerchiata d'inchiostro, non piena,
   perche' qui il rosso dice «guarda» e non «premi». */
.verdetto{display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:var(--panna);border:2px solid var(--ink);margin-bottom:10px}
.verdetto .ic{width:20px;height:20px;flex:none;fill:var(--ink)}
.verdetto p{margin:0;font-size:15px;font-weight:500;color:var(--ink)}
.verdetto p .sub{display:inline;margin:0;font-weight:400;color:var(--ink-2)}
.verdetto a{margin-left:auto;flex:none;font-size:13px;font-weight:500;
  color:var(--ink);white-space:nowrap}
.verdetto .chip{flex:none}
.verdetto .btn{margin-left:auto;flex:none}
.verdetto p a{margin-left:6px}
.verdetto.rotto{background:var(--terracotta-velo);border-color:var(--ink)}
.verdetto.rotto .ic{fill:var(--terracotta-scuro)}
.verdetto.rotto p,.verdetto.rotto a{color:var(--terracotta-scuro)}
/* Sul telefono il verdetto va in colonna: in riga il collegamento si
   incastrava accanto al testo mandato a capo, e le due cose si leggevano come
   una sola frase spezzata. */
@media(max-width:640px){
  .verdetto{flex-wrap:wrap;align-items:flex-start}
  .verdetto p{flex:1 1 0;min-width:0}
  .verdetto a{margin-left:0}
  .verdetto .btn{margin-left:0;flex:1 1 100%;justify-content:center}
}

/* ── i blocchi del ridisegno (28 settembre 2026) ─────────────────────
   Ogni blocco ha la sua etichetta sopra, piccola e maiuscola, e sotto una
   scheda con le righe. L'ordine della pagina e' quello delle tre domande:
   va tutto bene, cosa devo fare, com'e' la situazione. */
.oggi-blocco{margin-top:var(--sp-lg);scroll-margin-top:84px}
.oggi-etichetta{margin:0 0 8px}
.oggi-etichetta-riga{display:flex;align-items:center;justify-content:space-between;
  gap:8px 16px;flex-wrap:wrap;margin-bottom:8px}
.oggi-etichetta-riga .oggi-etichetta{margin:0}
.oggi-etichetta-riga .t-meta{color:var(--ink-3)}
.oggi-card{padding:0 16px;margin-bottom:0}
.oggi-card .oggi-righe{margin:0}
.oggi-blocco .link-checkin{margin-top:8px}

/* Da fare: righe che portano da qualche parte, tutte con la freccia. */
.dafare{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:1100px){.dafare{grid-auto-flow:column;grid-auto-columns:1fr}}
.dafare-voce{display:flex;align-items:center;gap:10px;padding:13px 16px;
  background:var(--surface-1);border:2px solid var(--bordo);color:var(--ink);
  text-decoration:none;font-size:14px;min-height:48px}
.dafare-voce:hover{border-color:var(--bordo-pieno)}
.dafare-voce .t{flex:1;min-width:0}
.dafare-voce .ic{flex:none;fill:var(--ink-2)}
.dafare-niente{margin:0;padding:14px 0;font-size:14px;color:var(--ink-2)}
.dafare > .dafare-niente{padding:14px 16px;background:var(--surface-1);
  border:2px solid var(--bordo)}

/* Le novita' dall'ultimo giro, sotto la casa a cui appartengono. */
.oggi-novita{flex-basis:100%;font-size:13px;color:var(--ink-2)}
@media(min-width:640px){.oggi-novita{padding-left:98px}}
.oggi-novita b{color:var(--ink);font-weight:600}
.oggi-novita.cancellata b{color:var(--testo-err)}

/* Strutture e Casa (28 settembre 2026). */
table.confronto{width:100%;border-collapse:collapse;font-size:14px}
table.confronto th,table.confronto td{padding:10px 8px;border-bottom:2px solid var(--bordo-tenue);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.confronto thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--ink)}
table.confronto th[scope="row"],table.confronto thead th:first-child{text-align:left;
  font-weight:500;color:var(--ink-2);letter-spacing:0;text-transform:none;font-size:14px}
table.confronto tr.apri td,table.confronto tr.apri th{border-bottom:none}
table.confronto tr.apri a{font-size:13px;font-weight:600;color:var(--terracotta-scuro);text-decoration:none}
#collegamenti .card.coll{padding:0;margin-bottom:0;border-bottom-width:0}
#collegamenti .card.coll:last-of-type{border-bottom-width:2px}
#collegamenti .card.coll.nascosto + .card.coll{border-top-width:2px}
.coll-riga{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;
  background:none;border:0;cursor:pointer;font:inherit;color:var(--ink);text-align:left;min-height:48px}
.coll-riga .n{flex:1;font-size:15px;font-weight:600}
.coll-riga .s{font-size:13px;color:var(--ink-3)}
.coll-riga .s.manca{color:var(--terracotta-scuro);font-weight:600}
.coll-riga .ic{flex:none;fill:var(--ink-2);transition:transform .15s}
.coll-riga[aria-expanded="true"] .ic{transform:rotate(180deg)}
.coll-corpo{padding:0 16px 16px}
.coll-corpo > .card-hd .badge{display:none}
.coll-corpo > .card-hd h3{display:none}
.intro .indietro{display:inline-block;font-size:13px;font-weight:600;
  color:var(--terracotta-scuro);text-decoration:none;margin-bottom:6px}
.casa-schede{display:inline-flex;margin:0 0 var(--sp-md)}
.casa-schede button{min-height:40px}
.segmentato.casa-schede button.on{background:var(--ink);color:var(--surface)}
.bento.casa-una{grid-template-columns:1fr;max-width:760px}
/* Il nome della casa e' gia' il titolo della pagina. */
.casa-una .prop .testa h3{display:none}
.cg-servizi{display:grid;gap:10px;margin:10px 0 14px}
@media(min-width:720px){.cg-servizi{grid-template-columns:repeat(3,1fr)}}
.cg-servizio{border:2px solid var(--bordo);padding:10px 12px;display:flex;flex-direction:column;gap:8px}

/* Prezzi (28 settembre 2026): la cifra sotto la barra del pieno, le notti
   proposte da Oggi, le bande che si toccano, i periodi a righe chiuse. */
.cal-pieno td small{display:block;font-size:10px;color:var(--ink-3);text-align:center;
  margin-top:2px;font-variant-numeric:tabular-nums}
.cella.proposta .d{color:var(--terracotta-scuro);font-weight:700}
.proposta-segno{color:var(--terracotta-scuro);margin-right:4px}
svg.banda-tocca{cursor:pointer}
details.periodo > summary.periodo-riga{display:flex;align-items:center;gap:12px;cursor:pointer;
  list-style:none;padding:10px 0;min-height:44px}
details.periodo > summary::-webkit-details-marker{display:none}
.periodo-riga b{flex:0 1 auto;font-size:15px}
.periodo-riga .quando-breve{flex:1;margin:0;font-size:13px}
.periodo-riga .fatt{font-weight:700;font-variant-numeric:tabular-nums}
.periodo-riga .ic{flex:none;transition:transform .15s}
details.periodo[open] > .periodo-riga .ic{transform:rotate(180deg)}

/* Amministrazione (28 settembre 2026): schede comuni e i due comandi di
   Pubblica con lo stesso disegno e pesi diversi. */
.schede-admin{display:inline-flex;margin:0 0 var(--sp-md)}
.schede-admin button{min-height:40px}
.guida-ruoli > summary{cursor:pointer;padding:10px 0;list-style:none}
.guida-ruoli > summary::-webkit-details-marker{display:none}
.guida-ruoli > summary::before{content:"›";display:inline-block;margin-right:8px;transition:transform .15s}
.guida-ruoli[open] > summary::before{transform:rotate(90deg)}
.pub-comandi{margin-bottom:var(--sp-md)}
.pub-riga{display:flex;align-items:center;gap:14px;padding:14px 0;flex-wrap:wrap;
  border-bottom:2px solid var(--bordo-tenue)}
.pub-riga:last-child{border-bottom:none}
.pub-riga .t{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px}
.pub-riga .t b{font-size:15px}
.pub-riga .t .sub{margin:0;font-size:13px}
#runOut:empty{display:none}

/* Prenotazioni dirette: la foto di ogni casa per il widget. */
.pren-casa{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:2px solid var(--bordo-tenue)}
.pren-foto{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pren-foto img{width:96px;height:72px;object-fit:cover;display:block;border:2px solid var(--bordo)}

/* Messaggi, In partenza (28 settembre 2026): un ospite per riga, i suoi
   messaggi su una linea orizzontale. Pallino vuoto = in coda, pieno =
   partito, rosso = non partito o fermo, tratteggiato = saltato o fermato. */
.sog-linea{padding:14px 16px}
.sl-testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:10px}
.sl-testa b{font-size:15px}
.sl-pista{display:flex;overflow-x:auto;padding-top:8px;scrollbar-width:thin}
.sl-punto{flex:1 0 118px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:0 10px 8px 0;background:none;border:0;border-top:2px solid var(--ink);border-radius:0;
  text-align:left;font:inherit;color:inherit}
button.sl-punto{cursor:pointer}
.sl-punto i{width:12px;height:12px;border:2px solid var(--ink);background:var(--surface-1,#fff);
  border-radius:50%;margin:-7px 0 6px}
.sl-punto .q{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sl-punto .c{font-size:13px;font-weight:600;line-height:1.25}
.sl-punto .s{font-size:12px;color:var(--ink-3)}
.sl-punto.st-inviato i{background:var(--ink)}
.sl-punto.st-fallito i,.sl-punto.st-bloccato i{background:var(--err);border-color:var(--err)}
.sl-punto.st-fallito .s,.sl-punto.st-bloccato .s{color:var(--err)}
.sl-punto.st-saltato i,.sl-punto.st-annullato i{border-style:dashed;border-color:var(--ink-3)}
.sl-punto.st-saltato .c,.sl-punto.st-annullato .c{color:var(--ink-3);text-decoration:line-through}
.sl-punto.sl-tappa i{border-radius:0;width:10px;height:10px;background:var(--terracotta);border-color:var(--terracotta)}
.sl-punto.sl-tappa .c{color:var(--terracotta-scuro)}
button.sl-punto:hover .c,button.sl-punto.on .c{text-decoration:underline;text-underline-offset:3px}
button.sl-punto.on i{box-shadow:0 0 0 3px var(--terracotta-tenue)}
.sl-dettaglio:empty{display:none}
.sl-dettaglio{margin-top:8px;border-top:2px solid var(--bordo-tenue);padding-top:8px}
.sl-dettaglio .msg-coda > summary{pointer-events:none}
.sl-dettaglio .msg-leggi{display:none}

/* I testi accesi e spenti si distinguono da chiusi. */
details.msg-testo > summary{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;column-gap:8px}
details.msg-testo > summary .sub{flex-basis:100%}
details.msg-testo > summary .chip{flex:none}
.msg-testo.msg-spento > summary b,.msg-testo.msg-spento > summary .sub{opacity:.55}
.msg-sintesi{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.spunta-riga.grossa{font-weight:600}

/* Le variabili: da inserire nei testi, e i loro valori casa per casa. */
.var-chips{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 8px}
.var-gruppo{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.var-gruppo > .sub{margin-right:2px;font-size:12px}
.var-chip{font:12px/1.2 var(--mono,ui-monospace,monospace);padding:3px 7px;border:1px solid var(--bordo);
  background:var(--surface-2,transparent);color:var(--ink-2);cursor:pointer}
.var-chip:hover{border-color:var(--ink)}
.var-casa{padding:12px 0;border-top:2px solid var(--bordo-tenue)}
.var-casa:first-child{border-top:0}
.var-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 14px;margin:8px 0}
.var-griglia .campo.largo{grid-column:1/-1}
.var-griglia label code{font-size:11px;color:var(--ink-3)}
.var-griglia textarea,.var-griglia input{width:100%}

/* Andamento: Davanti e Dietro (28 settembre 2026). */
.and-schede{display:inline-flex;margin:4px 0 var(--sp-md)}
.and-schede button{min-height:40px}
#andSintesi{margin-bottom:var(--sp-md)}

/* Messaggi: i testi sulla linea del soggiorno (28 settembre 2026). */
.msg-punto{position:relative;padding:0 0 14px 18px;border-left:2px solid var(--bordo-medio);margin-left:6px}
.msg-punto::before{content:"";position:absolute;left:-7px;top:1px;width:12px;height:12px;background:var(--ink)}
.msg-punto:last-child{border-left-color:transparent}
.msg-punto h4.t-sez{margin:0 0 8px}

/* Pulizie (28 settembre 2026): righe con giorno, casa, compenso, comando. */
.pul-riga{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:2px solid var(--bordo-tenue);font-size:14px;flex-wrap:wrap}
.pul-riga:last-child{border-bottom:none}
.pul-riga .g{flex:none;min-width:86px;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em}
.pul-riga .t{flex:1;min-width:160px}
.pul-riga .t .sub{display:block;margin:2px 0 0;font-size:13px}
.pul-riga .c{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pul-riga > .ic{flex:none;fill:var(--terracotta-scuro)}
/* Da pagare per settimana, e i cambi per giornata (28 settembre 2026). */
.pul-sett{padding:4px 0 10px}
.pul-sett + .pul-sett{border-top:2px solid var(--bordo)}
.pul-sett-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 0 4px}
.pul-sett-testa .sub{margin-left:8px}
.pul-extra{padding:4px 0 12px;border-bottom:2px solid var(--bordo-tenue)}
.pul-giorno{display:flex;align-items:center;gap:12px;padding:10px 0;flex-wrap:wrap;
  border-bottom:2px solid var(--bordo-tenue)}
.pul-giorno:last-child{border-bottom:none}
.pul-giorno .g{min-width:84px;font-weight:600;font-size:14px}
.pul-giorno .case{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.pul-casa{padding:4px 10px;border:2px solid var(--ink);font-size:13px;font-weight:600}
.pul-totale{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:12px 0;border-top:2px solid var(--bordo)}
.pul-link{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.pul-link code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px;padding:8px 10px;
  background:var(--surface-2)}
.pul-anteprima{white-space:pre-wrap;font-family:inherit;margin-top:12px}

/* Notti da decidere: una scheda per notte, con la barra dal minimo al
   prezzo sul sito (forma «Barra prezzo», 28 settembre 2026). */
.lm-griglia{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:900px){.lm-griglia{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
.lm-scheda{background:var(--surface-1);border:2px solid var(--bordo)}
.lm-scheda-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:2px solid var(--bordo-tenue)}
.lm-dove{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.lm-dove b{color:var(--ink);font-weight:700}
.lm-dove .chip{text-transform:none;letter-spacing:0}
.lm-apri{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:none;border:2px solid var(--bordo-medio);cursor:pointer;color:var(--ink)}
.lm-apri .ic{fill:var(--ink);transition:transform .15s}
.lm-apri[aria-expanded="true"] .ic{transform:rotate(180deg)}
.lm-scheda-corpo{padding:14px}
.lm-barra{position:relative;margin:18px 6px 26px;height:8px}
.lm-barra .pista{height:8px;background:var(--surface-4);position:relative}
.lm-barra .pista i{position:absolute;left:0;top:0;bottom:0;background:var(--terracotta)}
.lm-barra .estremo{position:absolute;top:-17px;font-size:11px;color:var(--ink-3);white-space:nowrap}
.lm-barra .estremo.sx{left:0}
.lm-barra .estremo.dx{right:0}
.lm-barra .segno{position:absolute;top:11px;transform:translateX(-50%);font-size:12px;
  font-weight:800;color:var(--ink);white-space:nowrap}
.lm-barra .pista i.q0{width:0%}
.lm-barra .segno.q0{left:0%}
.lm-barra .pista i.q5{width:5%}
.lm-barra .segno.q5{left:5%}
.lm-barra .pista i.q10{width:10%}
.lm-barra .segno.q10{left:10%}
.lm-barra .pista i.q15{width:15%}
.lm-barra .segno.q15{left:15%}
.lm-barra .pista i.q20{width:20%}
.lm-barra .segno.q20{left:20%}
.lm-barra .pista i.q25{width:25%}
.lm-barra .segno.q25{left:25%}
.lm-barra .pista i.q30{width:30%}
.lm-barra .segno.q30{left:30%}
.lm-barra .pista i.q35{width:35%}
.lm-barra .segno.q35{left:35%}
.lm-barra .pista i.q40{width:40%}
.lm-barra .segno.q40{left:40%}
.lm-barra .pista i.q45{width:45%}
.lm-barra .segno.q45{left:45%}
.lm-barra .pista i.q50{width:50%}
.lm-barra .segno.q50{left:50%}
.lm-barra .pista i.q55{width:55%}
.lm-barra .segno.q55{left:55%}
.lm-barra .pista i.q60{width:60%}
.lm-barra .segno.q60{left:60%}
.lm-barra .pista i.q65{width:65%}
.lm-barra .segno.q65{left:65%}
.lm-barra .pista i.q70{width:70%}
.lm-barra .segno.q70{left:70%}
.lm-barra .pista i.q75{width:75%}
.lm-barra .segno.q75{left:75%}
.lm-barra .pista i.q80{width:80%}
.lm-barra .segno.q80{left:80%}
.lm-barra .pista i.q85{width:85%}
.lm-barra .segno.q85{left:85%}
.lm-barra .pista i.q90{width:90%}
.lm-barra .segno.q90{left:90%}
.lm-barra .pista i.q95{width:95%}
.lm-barra .segno.q95{left:95%}
.lm-barra .pista i.q100{width:100%}
.lm-barra .segno.q100{left:100%}
/* Agli estremi il segno non si centra: uscirebbe dalla scheda. */
.lm-barra .segno.q0,.lm-barra .segno.q5{transform:none}
.lm-barra .segno.q95,.lm-barra .segno.q100{transform:translateX(-100%)}
.lm-sito{margin:0;font-size:13px}
/* Il prezzo di adesso, in grande: e' il punto di partenza della decisione. */
.lm-ora{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;color:var(--ink-3);font-size:13px}
.lm-ora b{font-size:26px;line-height:1;font-weight:800;color:var(--ink)}
.lm-dettaglio{margin-top:12px;padding-top:10px;border-top:2px solid var(--bordo-tenue)}
.lm-dettaglio > .sub{margin:0 0 8px;font-size:13px}
.lm-dettaglio .lm-scelte{margin-bottom:4px}
.lm-piene{margin:10px 0 0;font-size:13px}
.lm-piene b{color:var(--ink-2);font-weight:600}
.lm-decise{margin-top:10px}
.lm-decise summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:14px;font-weight:600;padding:9px 14px;border:2px solid var(--bordo-pieno);
  background:var(--surface);list-style:none;min-height:40px}
.lm-decise summary::-webkit-details-marker{display:none}
.lm-decise summary .ic{transition:transform .15s}
.lm-decise[open] summary .ic{transform:rotate(90deg)}
.lm-decise .oggi-card{margin-top:8px}
.lm-decisa{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;border-bottom:2px solid var(--bordo-tenue);font-size:14px;flex-wrap:wrap}
.lm-decisa:last-child{border-bottom:none}
.lm-decisa .sub{display:inline;margin:0;font-size:13px}

/* I tre numeri sopra la griglia dell'occupazione. */
.oggi-cifre{display:grid;gap:10px;margin-bottom:12px;grid-template-columns:1fr}
@media(min-width:640px){.oggi-cifre{grid-template-columns:repeat(3,1fr)}}
.oggi-cifra{background:var(--surface-1);border:2px solid var(--bordo);padding:10px 16px;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.oggi-cifra .t{font-size:13px;color:var(--ink-2)}
.oggi-cifra b{font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
@media(min-width:640px){
  .oggi-cifra{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .oggi-cifra b{font-size:22px}
}
.oggi-blocco .oggi-card:has(#occCorpo){padding:14px 16px}
.oggi-blocco .occ-legenda{flex-wrap:wrap}
.occ-nota{margin-left:auto;color:var(--ink-3)}
@media(max-width:640px){.occ-nota{flex-basis:100%;margin-left:0}}
/* L'interruttore settimane/mesi non e' un'azione: pieno d'inchiostro, non
   di rosso. Il rosso pieno resta ai bottoni che fanno qualcosa. */
.segmentato.occ-interruttore button.on{background:var(--ink);color:var(--surface)}

/* ── le bande dei sei mesi ────────────────────────────────────────── */
.banda{margin-bottom:12px}
.banda-hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:4px}
.banda-hd .sub{margin:0;font-size:12px}
.banda svg{display:block;width:100%;height:34px}
.bc-fondo{fill:var(--surface-4)}
.bc-su{fill:var(--ink)}
.bc-giu{fill:var(--ink-3)}
.bc-minimo{fill:var(--amber)}
.bc-venduta{fill:var(--linea)}
.bc-ferma{fill:var(--bordo-pieno)}
.banda-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;
  color:var(--ink-2);border-top:2px solid var(--bordo);padding-top:10px}
.banda-legenda span{display:flex;align-items:center;gap:5px}
.banda-legenda i{width:9px;height:9px;display:block}
.banda-legenda i.su{background:var(--ink)}
.banda-legenda i.giu{background:var(--ink-3)}
.banda-legenda i.minimo{background:var(--amber)}
.banda-legenda i.venduta{background:var(--linea)}
.banda-legenda i.ferma{height:4px;background:var(--bordo-pieno)}
.banda-mesi{display:flex;justify-content:space-between;font-size:11px;
  color:var(--ink-3);margin-top:2px}

/* ── occupazione a densita' ───────────────────────────────────────────
   Le due tabelle diventano una griglia sola. Il numero resta scritto dentro
   la tessera: il colore da' il colpo d'occhio, la cifra il dato — il colore
   da solo non porta mai un'informazione. */
.segmentato{display:flex;border:2px solid var(--bordo-pieno);flex:none}
.segmentato button{padding:7px 14px;border:0;cursor:pointer;font-size:13px;
  font-weight:500;font-family:inherit;background:var(--surface);color:var(--ink)}
.segmentato button + button{border-left:2px solid var(--bordo-pieno)}
.segmentato button.on{background:var(--terracotta);color:var(--su-pieno)}
/* Le due schede di Prezzi: calendario e come nasce il prezzo. */
.schede-prezzi{display:inline-flex;margin-bottom:var(--sp-md)}
.schede-prezzi button{min-height:40px;font-weight:600}
.occ-scroll{overflow-x:auto}
.occ-griglia{min-width:640px}
.occ-riga{display:grid;gap:4px;align-items:center;margin-top:4px;
  grid-template-columns:150px repeat(var(--occ-col,8),minmax(0,1fr))}
.occ-testa{margin-top:0}
.occ-col{font-size:11px;color:var(--ink-3);text-align:center;line-height:14px}
.occ-nome{font-size:13px;color:var(--ink)}
.occ-riga.tot .occ-nome,.occ-riga.tot .occ-cella{font-weight:700}
.occ-cella{height:30px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--surface-3);color:var(--ink)}
/* Undici gradini dal rosso al verde. Erano undici veli d'ambra, e la
   differenza fra un mese al 20% e uno all'80% era la stessa tinta un po' piu'
   carica: si leggeva solo la cifra, cioe' il colore non serviva a niente.
   Rosso e verde la portano da soli — il numero resta dentro la cella, perche'
   il colore da solo non e' mai l'unico portatore del dato.
   Le tinte e i loro ribaltamenti stanno in cima al foglio, gradino per
   gradino: qui si applicano e basta. */
.occ-cella.d0{background:var(--occ-0)}
.occ-cella.d1{background:var(--occ-1)}
.occ-cella.d2{background:var(--occ-2)}
.occ-cella.d3{background:var(--occ-3)}
.occ-cella.d4{background:var(--occ-4)}
.occ-cella.d5{background:var(--occ-5)}
.occ-cella.d6{background:var(--occ-6)}
.occ-cella.d7{background:var(--occ-7)}
.occ-cella.d8{background:var(--occ-8)}
.occ-cella.d9{background:var(--occ-9)}
.occ-cella.d10{background:var(--occ-10)}
/* I tre gradini dove il fondo e' troppo carico per l'inchiostro. Al buio sono
   **un altro insieme**: la scala scura tiene dieci gradini profondi e uno solo
   chiaro, quindi si ribalta il 100% e non gli altri due.

   L'eccezione sta qui e non nel blocco del tema scuro in cima al foglio, ed e'
   la stessa trappola gia' documentata in fondo per la colonna: a parita' di
   specificita' vince l'ultima riga scritta, e da lassu' questa non arrivava —
   lo zero restava nero su rosso cupo, 1,6:1. */
.occ-cella.d0,.occ-cella.d1,.occ-cella.d10{color:var(--occ-su-carico)}
:where([data-tema="scuro"]) .occ-cella.d0,
:where([data-tema="scuro"]) .occ-cella.d1{color:var(--ink)}
:where([data-tema="scuro"]) .occ-cella.d10{color:var(--occ-su-carico)}
/* La legenda della scala: due parole e undici quadretti, cosi' «rosso» e
   «verde» hanno un significato dichiarato invece che indovinato. */
.occ-legenda{display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:11px;color:var(--ink-3)}
.occ-legenda .scala{display:flex;flex:none}
.occ-legenda .scala i{width:14px;height:10px;display:block}
.occ-legenda .scala i.d0{background:var(--occ-0)}
.occ-legenda .scala i.d1{background:var(--occ-1)}
.occ-legenda .scala i.d2{background:var(--occ-2)}
.occ-legenda .scala i.d3{background:var(--occ-3)}
.occ-legenda .scala i.d4{background:var(--occ-4)}
.occ-legenda .scala i.d5{background:var(--occ-5)}
.occ-legenda .scala i.d6{background:var(--occ-6)}
.occ-legenda .scala i.d7{background:var(--occ-7)}
.occ-legenda .scala i.d8{background:var(--occ-8)}
.occ-legenda .scala i.d9{background:var(--occ-9)}
.occ-legenda .scala i.d10{background:var(--occ-10)}

/* ── sconto last minute: due prezzi e il pavimento ────────────────────
   Erano cinque bottoni per notte, cioe' trenta su tre case. Adesso sono due
   piu' «Altro», e sotto ognuno c'e' il netto — il numero che decide. */
.lm-scelte{display:flex;gap:8px;flex-wrap:wrap}
.lm-scelta{flex:1;min-width:96px;padding:8px 10px;border:2px solid var(--terracotta);
  background:var(--surface);cursor:pointer;text-align:left;font-family:inherit}
.lm-scelta b{display:block;font-size:12px;font-weight:600;color:var(--terracotta-scuro)}
.lm-scelta .p{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.lm-scelta .n{display:block;font-size:11px;color:var(--ink-3)}
/* Il consigliato e' l'unico pieno: e' l'azione che il pannello propone. */
.lm-scelta.top{background:var(--terracotta-scuro);border-color:var(--terracotta-scuro)}
.lm-scelta.top b,.lm-scelta.top .p,.lm-scelta.top .n{color:var(--bianco)}
.lm-altro{flex:none;padding:8px 12px;border:2px dashed var(--bordo-forte);
  background:none;cursor:pointer;font-family:inherit;font-size:12px;
  font-weight:500;color:var(--ink-2)}
.lm-scala{margin-top:8px}
.lm-pista{position:relative;height:9px;background:var(--surface-4)}
.lm-pista i{position:absolute;left:0;top:0;bottom:0;display:block}
.lm-pista i.sotto{background:var(--terracotta-sfumo)}
.lm-pista i.min{background:var(--ambra-chip)}
.lm-pista i.ora{border-right:2px solid var(--terracotta);background:none}
.lm-scala .sub{margin:5px 0 0;font-size:11px}

/* Le larghezze e i pesi, quantizzati: nel markup non si scrive uno stile.
   Cinque punti percentuali di passo sono sotto la soglia di quello che si
   distingue a occhio su una barra da 210 pixel. */
.lm-pista i.q0{width:0%}
.lm-pista i.q5{width:5%}
.lm-pista i.q10{width:10%}
.lm-pista i.q15{width:15%}
.lm-pista i.q20{width:20%}
.lm-pista i.q25{width:25%}
.lm-pista i.q30{width:30%}
.lm-pista i.q35{width:35%}
.lm-pista i.q40{width:40%}
.lm-pista i.q45{width:45%}
.lm-pista i.q50{width:50%}
.lm-pista i.q55{width:55%}
.lm-pista i.q60{width:60%}
.lm-pista i.q65{width:65%}
.lm-pista i.q70{width:70%}
.lm-pista i.q75{width:75%}
.lm-pista i.q80{width:80%}
.lm-pista i.q85{width:85%}
.lm-pista i.q90{width:90%}
.lm-pista i.q95{width:95%}
.lm-pista i.q100{width:100%}
.tessera-barre i.f1{flex:1}
.tessera-barre i.f2{flex:2}
.tessera-barre i.f3{flex:3}
.tessera-barre i.f4{flex:4}
.tessera-barre i.f5{flex:5}
.tessera-barre i.f6{flex:6}
.tessera-barre i.f7{flex:7}
.tessera-barre i.f8{flex:8}
.tessera-barre i.f9{flex:9}
.tessera-barre i.f10{flex:10}
.tessera-barre i.f11{flex:11}
.tessera-barre i.f12{flex:12}
.tessera-barre i.f13{flex:13}
.tessera-barre i.f14{flex:14}
.tessera-barre i.f15{flex:15}
.tessera-barre i.f16{flex:16}
.tessera-barre i.f17{flex:17}
.tessera-barre i.f18{flex:18}
.tessera-barre i.f19{flex:19}
.tessera-barre i.f20{flex:20}
.occ-griglia.c1{--occ-col:1}
.occ-griglia.c2{--occ-col:2}
.occ-griglia.c3{--occ-col:3}
.occ-griglia.c4{--occ-col:4}
.occ-griglia.c5{--occ-col:5}
.occ-griglia.c6{--occ-col:6}
.occ-griglia.c7{--occ-col:7}
.occ-griglia.c8{--occ-col:8}
.occ-griglia.c9{--occ-col:9}
.occ-griglia.c10{--occ-col:10}
.occ-griglia.c11{--occ-col:11}
.occ-griglia.c12{--occ-col:12}

/* ══════════════════════════════════════════ la pagina «Andamento» ══════ */

/* Le due curve. Quest'anno e' la linea piena e rossa — e' il soggetto; l'anno
   scorso e' tratteggiata e d'inchiostro tenue, perche' e' il metro e non il
   dato. Il ritmo e' una fascia sotto, separata: parla di velocita', non di
   livello, e mescolarlo alle curve confonderebbe le due domande. */
.and-grafico{display:block;width:100%;height:auto;margin-top:6px}
.and-qua{fill:none;stroke:var(--terracotta);stroke-width:3;stroke-linejoin:round}
.and-p{fill:var(--terracotta)}
.and-scorso{fill:none;stroke:var(--ink-3);stroke-width:2.5;stroke-dasharray:6 5}
.and-asse{stroke:var(--bordo-pieno);stroke-width:1}
.and-guida{stroke:var(--bordo-pieno);stroke-width:1;stroke-dasharray:3 5}
.and-tacca{font-size:11px;fill:var(--ink-3)}
.and-mese{font-size:12px;fill:var(--ink-2)}
.and-mese.ora{font-weight:600;fill:var(--terracotta-scuro)}
.and-ritmo{fill:var(--ink)}
.and-fondo-ritmo{fill:var(--surface-3)}
/* La fascia dei mesi senza confronto: **dichiarata**, non lasciata vuota. Una
   colonna di trattini si legge come «zero» prima di leggersi come «non lo so». */
.and-senza{fill:var(--surface-3)}
.and-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;
  color:var(--ink-2);align-items:center}
.and-legenda span{display:flex;align-items:center;gap:6px}
.lg-qua{stroke:var(--terracotta);stroke-width:2.5}
.lg-scorso{stroke:var(--ink-3);stroke-width:2.5;stroke-dasharray:5 4}
.lg-ritmo{fill:var(--ink)}

/* I concorrenti non sono piu' una scheda: sono il dettaglio di «Confronto col
   mercato», sotto lo stesso titolo. */
.conc-dentro{margin-top:16px;border-top:2px solid var(--bordo);padding-top:14px}
.conc-dentro .t-sez{display:block;margin-bottom:4px}

/* Il piede della proposta: il ponte al calendario accanto alla ragione per cui
   il ponte non pubblica. */
.prop-piede{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  margin-top:14px;border-top:2px solid var(--bordo);padding-top:12px}
.prop-piede .sub{margin:0;flex:1;min-width:240px}

/* Il filtro «solo al minimo»: le altre notti restano visibili ma si spengono.
   Nasconderle farebbe sparire il contesto — quante sono su quante. */
.spunta-riga{display:flex;align-items:center;gap:6px;font-size:13px;
  color:var(--ink-2);white-space:nowrap}
.spunta-riga input{width:auto}
#grCorpo.solo-minimo .cella:not(.alminimo){opacity:.28}
.lead-barra i.q0{width:0%}
.lead-barra i.q5{width:5%}
.lead-barra i.q10{width:10%}
.lead-barra i.q15{width:15%}
.lead-barra i.q20{width:20%}
.lead-barra i.q25{width:25%}
.lead-barra i.q30{width:30%}
.lead-barra i.q35{width:35%}
.lead-barra i.q40{width:40%}
.lead-barra i.q45{width:45%}
.lead-barra i.q50{width:50%}
.lead-barra i.q55{width:55%}
.lead-barra i.q60{width:60%}
.lead-barra i.q65{width:65%}
.lead-barra i.q70{width:70%}
.lead-barra i.q75{width:75%}
.lead-barra i.q80{width:80%}
.lead-barra i.q85{width:85%}
.lead-barra i.q90{width:90%}
.lead-barra i.q95{width:95%}
.lead-barra i.q100{width:100%}

/* ── quello che la colonna spegne ─────────────────────────────────────
   Sta in fondo al foglio e non accanto alle altre regole della colonna
   perche' `.topbar`, `.bottomnav`, `.savebar` e `.menu` sono definite piu'
   sotto: a parita' di specificita' vince l'ultima scritta, e da lassu' questi
   spegnimenti non arrivavano.
   ─────────────────────────────────────────────────────────────────────── */
@media(min-width:1024px){
  .topbar,.bottomnav{display:none}
  body{padding-bottom:0}
  main{margin-left:254px;padding:30px 36px 56px}
  /* Senza la barra in basso, le due barre scendono fino al bordo: prima
     restavano sollevate di --nav-h e coprivano un pezzo di pagina. */
  .savebar,.selbar{left:254px;bottom:0}
  .toast{left:auto}
  /* Il menu utente si apriva sotto l'avatar in alto a destra. Adesso l'avatar
     e' in fondo alla colonna, e il menu va dove sta il bersaglio. */
  .menu{right:auto;left:12px;top:auto;bottom:64px;min-width:230px}
  /* Le cinque voci di sezione: qui le porta gia' la colonna. */
  .menu-sezioni{display:none}
}

/* ══════════════════════════════════════════════ la pagina «Prezzi» ══════ */

/* La curva dell'anno. E' insieme il disegno e il comando: le maniglie si
   trascinano, e i dodici cursori sotto restano la strada da tastiera. */
.st-grafico{display:block;width:100%;height:auto}
.st-grafico.si-trascina .st-punto{cursor:ns-resize}
.st-linea{fill:none;stroke:var(--terracotta);stroke-width:3;stroke-linejoin:round}
.st-punto{fill:var(--terracotta);stroke:var(--surface);stroke-width:2}
.st-uno{stroke:var(--bordo-pieno);stroke-width:1;stroke-dasharray:4 4}
.st-tacca{font-size:11px;fill:var(--ink-3)}
.st-mese{font-size:12px;fill:var(--ink-2)}
.st-mese.bassa{fill:var(--ink-3)}
.st-num{font-size:11px;font-weight:600;fill:var(--ink)}
/* La bassa stagione: una fascia dentro la curva, non una scheda accanto. */
.st-bassa{fill:var(--surface-3)}
.st-nota{margin:6px 0 0}
.bassa-scelta{margin-top:16px;border-top:2px solid var(--bordo);padding-top:14px}
.bassa-scelta .t-sez{display:block;margin-bottom:4px}
/* I dodici numeri: chiusi, perche' la curva li dice gia' tutti. */
.cursori{margin-top:14px;border-top:2px solid var(--bordo);padding-top:10px}
.cursori summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-2)}
.cursori summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.cursori #season{margin-top:10px}

/* ── la fascia temporale dei periodi ──────────────────────────────────
   Il nome del periodo e i mesi sono **testo HTML** in una colonna a sinistra;
   nel disegno restano solo rettangoli. E' tutta qui la differenza con prima:
   un SVG largo 1000 unita' che si stira alla larghezza della scheda stira
   anche le lettere, e sul telefono le portava sotto i quattro pixel.
   ─────────────────────────────────────────────────────────────────────── */
.fs-fascia{margin-bottom:10px}
.fs-riga{display:grid;grid-template-columns:minmax(96px,168px) minmax(0,1fr);
  gap:10px;align-items:center;padding:2px 0}
/* Va a capo invece di finire in «…»: sul telefono la colonna e' larga 96px e
   i puntini si mangiavano proprio il fattore, cioe' il numero. */
.fs-eti{font-size:12px;line-height:16px;color:var(--ink-2);min-width:0;
  overflow-wrap:break-word}
.fs-eti b{font-weight:700;color:var(--terracotta-scuro);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* La pista: dodici mesi larghi uguali, separati da una riga chiara. Il
   gradiente ripetuto e' la griglia — dodicesimi esatti, senza dodici nodi. */
.fs-pista{display:block;height:12px;background:var(--surface-2);
  background-image:repeating-linear-gradient(90deg,
    var(--bordo-medio) 0 1px, transparent 1px 8.3333%)}
.fs-pista svg{display:block;width:100%;height:12px}
.fs-barra{fill:var(--terracotta)}
/* La sovrapposizione: l'unico posto della fascia dove serve una decisione. */
.fs-urto{fill:var(--amber)}
.fs-riga.urti .fs-eti{color:var(--ink-3);font-style:italic}
/* I dodici mesi in cima, incolonnati con le piste: stessa dodicesima parte. */
.fs-mesi{display:grid;grid-template-columns:repeat(12,1fr);font-size:11px;
  line-height:16px;color:var(--ink-3);text-align:center}
.fs-mesi .ora{color:var(--terracotta-scuro);font-weight:700}
.fs-testa{padding-bottom:2px}
/* Sotto i 560px dodici sigle da tre lettere non ci stanno: si tengono le
   alternate, che bastano a orientarsi. */
@media(max-width:560px){
  .fs-riga{grid-template-columns:minmax(72px,104px) minmax(0,1fr);gap:8px}
  .fs-mesi span:nth-child(even){visibility:hidden}
}

/* ═══════════════════════════════════════════ la pagina «Strutture» ══════ */

/* L'interruttore ha un'etichetta scritta. Ce ne sono due per scheda — «nei
   calcoli» e «pubblica sul PMS» — e sono due significati diversi: senza
   etichetta si distinguevano solo dalla posizione. */
.sw-riga{display:flex;align-items:center;gap:10px}
.sw-eti{font-size:12px;font-weight:500;color:var(--ink-2);white-space:nowrap}

/* Un estratto per canale, dentro la stessa scheda. Il filo che li separa
   serve a non far leggere i numeri del secondo come la continuazione del
   primo: sono due canali, non due periodi dello stesso. */
.estratto + .estratto{margin-top:var(--sp-lg);padding-top:var(--sp-md);
  border-top:2px solid var(--bordo)}
.estratto > .t-sez{display:block;margin-bottom:8px}

/* La riga del canale che detta il pavimento: e' quella su cui sono fatti i due
   numeri di ogni casa, e va riconosciuta fra le altre senza leggere il chip.
   Un filo di fondo e una barra a sinistra, come il mese in corso della tabella
   dell'anno: stesso significato — «e' da qui che si legge il resto». */
table.conti-canali tr.canale-vincola > td{background:var(--riga-ora)}
table.conti-canali tr.canale-vincola > td:first-child{
  box-shadow:inset 3px 0 0 var(--terracotta)}
table.conti-canali .chip{vertical-align:middle}

/* La scala su cui il minimo smette di essere inventato. */
.scala-costi{margin-top:12px;border-top:2px solid var(--bordo);padding-top:10px}
.scala-pista{position:relative;height:9px;background:var(--surface-4);margin-bottom:5px}
.scala-pista i{position:absolute;left:0;top:0;bottom:0;display:block}
.scala-pista i.sotto{background:var(--terracotta-sfumo)}
.scala-pista i.pari{background:var(--ambra-chip)}
.scala-pista i.min{border-right:2px solid var(--ink);background:none}
.sotto-pareggio{color:var(--testo-err);font-weight:600}

/* V lift: sperimentale, si apre apposta e non sta al livello di lead time e
   canali, che si toccano ogni settimana. */
.sperimentazioni summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--ink)}
.sperimentazioni summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.sperimentazioni[open] summary{margin-bottom:12px}
.sperimentazioni .t-sez{margin-top:0}

/* Chiudere l'account: si apre apposta, non ci si passa davanti. */
.pericolo-box{margin-top:16px;border-top:2px solid var(--bordo);padding-top:12px}
.pericolo-box summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-3)}
.pericolo-box summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.pericolo-box .sub{margin:8px 0 10px}
.scala-pista i.q0{width:0%}
.scala-pista i.q5{width:5%}
.scala-pista i.q10{width:10%}
.scala-pista i.q15{width:15%}
.scala-pista i.q20{width:20%}
.scala-pista i.q25{width:25%}
.scala-pista i.q30{width:30%}
.scala-pista i.q35{width:35%}
.scala-pista i.q40{width:40%}
.scala-pista i.q45{width:45%}
.scala-pista i.q50{width:50%}
.scala-pista i.q55{width:55%}
.scala-pista i.q60{width:60%}
.scala-pista i.q65{width:65%}
.scala-pista i.q70{width:70%}
.scala-pista i.q75{width:75%}
.scala-pista i.q80{width:80%}
.scala-pista i.q85{width:85%}
.scala-pista i.q90{width:90%}
.scala-pista i.q95{width:95%}
.scala-pista i.q100{width:100%}

/* ════════════════════════════════════════════════ la pagina «Conti» ══════ */

/* La pagina apre con i numeri e non col modulo. */
.conti-riassunto{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.conti-riga{min-width:0;background:var(--panna);border:2px solid var(--bordo);
  padding:14px 16px}
.conti-casa{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--terracotta-scuro);margin-bottom:6px}
.conti-coppia{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.conti-coppia .et{display:block;font-size:11px;color:var(--ink-3)}
.conti-coppia b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.conti-coppia b.male{color:var(--testo-err)}
.conti-riga .sub{margin:6px 0 0;font-size:12px}
/* Le eccezioni: chiuse, perche' quasi sempre non ce ne sono. */
.conti-eccezioni,.conti-una{margin-top:14px;border-top:2px solid var(--bordo);
  padding-top:10px}
.conti-eccezioni > summary,.conti-una > summary{cursor:pointer;font-size:13px;
  font-weight:500;color:var(--ink-2)}
.conti-eccezioni > summary:focus-visible,.conti-una > summary:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:2px}

/* ═══════════════════════════════════════════════ la pagina «Regole» ══════ */

/* Le quote si scrivono in percentuale: il segno sta accanto al campo, cosi'
   non c'e' modo di leggere 18 come 0,18. */
.con-pct{display:flex;align-items:center;gap:6px}
.con-pct input{flex:1;min-width:0}
.con-pct span{font-size:13px;color:var(--ink-3);flex:none}

/* La cascata dei 100 €. Ogni gradino toglie quello che toglie. */
.cascata{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px}
.casc-riga{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr) 82px;
  gap:12px;align-items:center}
.casc-eti{font-size:13px;color:var(--ink-2)}
.casc-pista{position:relative;height:14px;background:var(--surface-3);display:block}
.casc-pista i{position:absolute;left:0;top:0;bottom:0;display:block;
  background:var(--ink-3)}
.casc-num{font-size:13px;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums}
.casc-riga.base .casc-pista i{background:var(--ink)}
.casc-riga.giu .casc-pista i{background:var(--terracotta)}
.casc-riga.giu .casc-num{color:var(--terracotta-scuro)}
.casc-riga.fine .casc-pista i{background:var(--ok)}
.casc-riga.fine .casc-eti,.casc-riga.fine .casc-num{font-weight:700;color:var(--ink)}

/* «Proteggi il minimo»: il numero che scrivi e quello che ti resta, accanto. */
td.coppia-a{border-left:2px solid var(--bordo)}
td.coppia-b{font-weight:600}
.casc-pista i.q0{width:0%}
.casc-pista i.q5{width:5%}
.casc-pista i.q10{width:10%}
.casc-pista i.q15{width:15%}
.casc-pista i.q20{width:20%}
.casc-pista i.q25{width:25%}
.casc-pista i.q30{width:30%}
.casc-pista i.q35{width:35%}
.casc-pista i.q40{width:40%}
.casc-pista i.q45{width:45%}
.casc-pista i.q50{width:50%}
.casc-pista i.q55{width:55%}
.casc-pista i.q60{width:60%}
.casc-pista i.q65{width:65%}
.casc-pista i.q70{width:70%}
.casc-pista i.q75{width:75%}
.casc-pista i.q80{width:80%}
.casc-pista i.q85{width:85%}
.casc-pista i.q90{width:90%}
.casc-pista i.q95{width:95%}
.casc-pista i.q100{width:100%}

/* ══════════════════════════════════════════ la pagina «Calendario» ══════ */

/* Le celle: a densita' variabile. Erano bottoni da 60px con dentro un numero
   da 22, e su trenta giorni ci stavano solo trenta giorni. Il numero resta il
   piu' grande della cella — e' il dato — ma smette di essere un titolo. */
.griglia .cella{min-height:46px;padding:5px 4px}
.griglia .cella .p{font-size:16px;line-height:19px}
.griglia .cella .ms,.griglia .cella .chi,.griglia .cella .calc{font-size:10px;
  line-height:13px}

/* Da cosa e' fatto questo prezzo. */
.scomp{margin-top:14px;border-top:2px solid var(--ink);padding-top:12px}
.scomp .t-sez{display:block;margin-bottom:8px}
.scomp-righe{display:flex;flex-direction:column}
.scomp-riga{display:grid;grid-template-columns:minmax(120px,1fr) 62px 72px 68px;
  gap:10px;align-items:baseline;padding:5px 0;
  border-bottom:2px solid var(--bordo-tenue);font-variant-numeric:tabular-nums}
.scomp-riga .e{font-size:13px;color:var(--ink-2)}
.scomp-riga .f{font-size:12px;color:var(--ink-3);text-align:right}
.scomp-riga .d{font-size:12px;text-align:right;color:var(--ink-3)}
.scomp-riga .d.su{color:var(--ink)}
.scomp-riga .d.giu{color:var(--terracotta-scuro)}
.scomp-riga .v{font-size:14px;font-weight:600;text-align:right}
.scomp-riga.taglio{background:var(--ambra-velo);border-bottom:0}
.scomp-riga.taglio .e{font-weight:600;color:var(--su-ambra)}

/* L'anteprima sovrapposta alla griglia vera. */
.spunta-riga.grossa{font-size:14px;color:var(--ink);margin:4px 0 10px}
.griglia .cella .pv{display:block;font-size:10px;line-height:13px;font-weight:600}
/* Il netto in tasca al posto del prezzo: corsivo, perche' non e' il numero
   pubblicato e non deve sembrarlo. Negativo vuol dire sotto il pavimento. */
.griglia .cella .p.netto{font-style:italic;color:var(--ink-2)}
.griglia .cella .p.netto.sotto{color:var(--terracotta-scuro)}
.griglia .cella .pv.su{color:var(--ink)}
.griglia .cella .pv.giu{color:var(--terracotta-scuro)}
.griglia .cella.con-pv{border-color:var(--ink-orlo)}

/* ═════════════════════════════ «Pubblica» e «Clienti»: i giri ══════════ */

/* Quattordici caselle, una per giorno. Il buco si vede perche' e' disegnato:
   un'assenza dentro un elenco non si vede, si conta. */
.giri{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.giro{display:flex;flex-direction:column;align-items:center;gap:3px}
.giro i{display:block;width:18px;height:18px;background:var(--ink)}
.giro.manca i{background:none;border:2px solid var(--terracotta);
  box-shadow:inset 0 0 0 2px var(--surface)}
.giro .gg{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.giri.piccoli{gap:3px;margin-top:6px}
.giri.piccoli .giro i{width:10px;height:10px}
.giri.piccoli .giro i{border-width:2px}

/* I segnali di salute nella scheda di un cliente. */
.salute{margin-top:10px;border-top:2px solid var(--bordo);padding-top:8px}
.salute-alto{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.salute .sub{margin:4px 0 0;font-size:12px}

/* Il quarto livello dei permessi: non e' un ruolo, e' un limite sopra un
   ruolo. Sta sotto la tabella e non dentro, con un esempio vero. */
.quarto-livello{border-top:2px solid var(--bordo);padding:14px 16px 4px}
.quarto-livello .t-sez{display:block;margin-bottom:6px}

/* ── primi passi e case da Lodgify (23 settembre 2026) ─────────────
   Una lista numerata con lo stato scritto accanto a ogni tappa: il chip dice
   «Fatto» o «In attesa» a parole, il colore lo accompagna e basta. */
.passi{list-style:none;margin:0;padding:0;border-top:2px solid var(--bordo)}
.passo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0;border-bottom:2px solid var(--bordo)}
.passo .txt{flex:1 1 240px;min-width:0}
.passo .txt b{display:block;font-size:15px}
.passo.fatto .txt b{color:var(--ink-2)}
.case-pms{margin-top:16px;display:grid;gap:12px}
.casa-pms{display:grid;gap:10px;padding:12px 0;border-top:2px solid var(--bordo)}
.casa-pms .testa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.casa-pms .testa label{display:flex;align-items:center;gap:10px;min-height:40px;font-weight:600}
.casa-pms .testa input[type=checkbox]{width:20px;height:20px}

/* ── impostazioni avanzate ───────────────────────────────────────────
   Quello che serve a pochi, chiuso in un <details>. Dentro una scheda
   (canali, casa) e' una riga discreta; come scheda intera (promozioni per
   durata, strumenti tecnici) il sommario e' la testata della scheda. */
details.avanzate > summary{cursor:pointer;font-size:13px;font-weight:500;
  color:var(--ink-2);margin-top:var(--sp-sm)}
details.avanzate > summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
details.avanzate[open] > summary{margin-bottom:10px}
details.card.avanzate > summary{margin-top:0;list-style:none}
details.card.avanzate > summary::-webkit-details-marker{display:none}
details.card.avanzate > summary h3{display:inline}
details.card.avanzate > summary h3::after{content:" ▸";color:var(--ink-3);font-weight:400}
details.card.avanzate[open] > summary h3::after{content:" ▾"}
details.card.avanzate > summary .card-hd{margin-bottom:0}
#cardStrumentiPub{margin-top:16px}

/* I calendari iCal, casa per casa (Strutture, senza gestionale). */
.ical-casa{padding:12px 0;border-top:1px solid var(--linea)}
.ical-casa:first-child{border-top:0}
.ical-salvati{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ical-salvati li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── il calendario del 24 settembre 2026 ─────────────────────────────────
   Dal disegno «Pryce Calendario v2»: i soggiorni sono blocchi che
   attraversano le notti, sotto c'e' la riga di quanto e' pieno ogni giorno,
   i filtri sono chip e il prezzo si decide nella barra in basso. Tutto sui
   token del pannello: il rosso e' --terracotta, i grigi sono le superfici. */
.cal-testa{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px 20px;flex-wrap:wrap;margin-bottom:16px}
.cal-testa .t-hero{margin:0}
.cal-comandi{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-periodo{display:flex;align-items:stretch;border:2px solid var(--ink)}
.cal-periodo button{width:36px;height:36px;border:0;background:var(--bianco);
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cal-periodo button:hover:not(:disabled){background:var(--terracotta-tenue)}
.cal-periodo button:disabled{opacity:.35;cursor:default}
.cal-periodo span{display:flex;align-items:center;padding:0 12px;min-width:196px;
  border-left:2px solid var(--ink);border-right:2px solid var(--ink);
  font-size:13px;font-weight:600;white-space:nowrap}
.cal-oggi{height:40px;padding:0 14px;border:2px solid var(--ink);background:var(--bianco);
  font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.cal-oggi:hover{background:var(--terracotta-tenue)}
.cal-segmenti{display:flex;border:2px solid var(--ink)}
.cal-segmenti button{height:36px;padding:0 14px;border:0;background:var(--bianco);
  color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cal-segmenti button+button{border-left:2px solid var(--ink)}
.cal-segmenti button.on{background:var(--ink);color:var(--surface)}

.cal-filtri{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cal-chip{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  border:2px solid var(--linea);background:var(--bianco);color:var(--ink);
  font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.cal-chip:hover{border-color:var(--ink)}
.cal-chip:disabled{opacity:.6;cursor:progress}
.cal-chip .segno-min{display:block;width:12px;height:3px;background:var(--terracotta)}
#grChipMinimo{color:var(--terracotta-scuro)}
#grChipMinimo.on{background:var(--terracotta-tenue);border-color:var(--terracotta-scuro)}
#grChipAnteprima.on,#grChipNetto.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.cal-spazio{flex:1}
.cal-legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.cal-legenda span{display:flex;align-items:center;gap:6px}
.cal-legenda i{display:block;width:14px;height:12px}
.cal-legenda i.soggiorno{background:var(--surface-3);border-left:3px solid var(--ink-2)}
.cal-legenda i.deciso{background:var(--terracotta-scuro)}
.cal-legenda i.minimo{height:3px;background:var(--terracotta)}
.cal-nota{margin:10px 0 0;font-size:12px}

.cal-scorri{border:2px solid var(--ink);background:var(--bianco);overflow-x:auto}
.cal-tab{border-collapse:collapse;table-layout:fixed;width:100%}
/* 42px per notte al minimo, piu' la colonna dei nomi. */
.cal-tab.g14{min-width:778px}
.cal-tab.g30{min-width:1450px}
.cal-tab th,.cal-tab td{padding:0;border-bottom:0}
.cal-tab .unita{position:sticky;left:0;z-index:2;width:190px;text-align:left;
  background:var(--bianco);border-right:2px solid var(--ink)}
.cal-tab.stretta .unita{width:150px}
.cal-mesi th{padding:6px 8px;background:var(--surface-1);border-bottom:1px solid var(--surface-3);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;white-space:nowrap;overflow:hidden;color:var(--ink)}
.cal-mesi th+th{border-left:2px solid var(--ink)}
.cal-mesi th.unita{padding:6px 14px;font-weight:600;color:var(--ink-3)}
.cal-giorni th{position:relative;padding:8px 0 7px 6px;text-align:left;
  border-right:1px solid var(--surface-3);border-bottom:2px solid var(--ink);overflow:hidden}
.cal-giorni th.unita{padding:8px 14px;font-size:12px;font-weight:400;color:var(--ink-3);
  vertical-align:bottom;border-right:2px solid var(--ink)}
.cal-giorni th.fine{background:var(--surface-1)}
.cal-giorni .gs{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);line-height:12px}
.cal-giorni b{display:block;font-size:13px;font-weight:700;line-height:20px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.cal-tab.larga .cal-giorni b{font-size:17px}
.cal-giorni th.oggi::before{content:"";position:absolute;left:0;right:0;top:0;
  height:3px;background:var(--terracotta)}
.cal-giorni th.oggi .gs,.cal-giorni th.oggi b{color:var(--terracotta-scuro)}

.cal-tab tbody tr{border-bottom:1px solid var(--surface-3)}
.cal-tab tbody th.unita{padding:10px 12px;vertical-align:middle}
.cal-tab tbody th .nome{display:block;font-size:14px;font-weight:600;line-height:18px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-tab tbody th .sub{display:block;margin:3px 0;font-size:11px;font-weight:400;line-height:14px}
.cal-tab .occ{display:block;height:3px;background:var(--surface-3)}
.cal-tab .occ i{display:block;height:3px;background:var(--ink-2)}
.cal-tab tbody td{border-right:1px solid var(--surface-3);vertical-align:top}

.cal-tab .cella{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:1px;width:100%;height:64px;padding:0 0 0 6px;border:0;
  background:var(--bianco);color:var(--ink);text-align:left;cursor:pointer;
  font:inherit;min-width:0;overflow:hidden}
.cal-tab .cella.fine{background:var(--surface-1)}
.cal-tab .cella:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--ink)}
.cal-tab .cella:disabled{cursor:default}
.cal-tab .cella .p{font-size:13px;font-weight:700;line-height:20px;font-variant-numeric:tabular-nums}
.cal-tab.larga .cella .p{font-size:17px}
.cal-tab .cella .d{font-size:10px;font-weight:700;line-height:12px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-tab .cella .barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.cal-tab .cella.alminimo .barra{background:var(--terracotta)}
.cal-tab .cella.con-pv .barra{background:var(--ink-2)}
.cal-tab .cella.forzata{background:var(--terracotta-scuro);color:var(--su-pieno)}
.cal-tab .cella.forzata .d{color:var(--su-pieno)}
.cal-tab .cella.scelta{background:var(--terracotta-tenue);color:var(--terracotta-scuro);
  box-shadow:inset 0 0 0 2px var(--ink)}
.cal-tab .cella.scelta .d{color:var(--ink-2)}
.cal-tab .cella .p.netto{font-style:italic}
.cal-tab .cella:not(.forzata) .p.netto{color:var(--ink-2)}
.cal-tab .cella:not(.forzata) .p.netto.sotto{color:var(--terracotta-scuro)}
#grCorpo.solo-minimo .cal-tab .cella:not(.alminimo){opacity:.28}

.cal-sogg>div{height:50px;margin:7px 3px;padding:0 8px;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;background:var(--surface-3);
  border-left:3px solid var(--ink-2)}
.cal-sogg>div.prima{border-left-style:dashed}
.cal-sogg b{font-size:12px;font-weight:600;line-height:16px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.cal-sogg span{font-size:10px;line-height:13px;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.cal-pieno th.unita,.cal-pieno td{background:var(--surface-1)}
.cal-pieno th.unita{padding:8px 14px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.cal-pieno td{border-right:1px solid var(--surface-3)}
.cal-pieno td span{display:flex;align-items:flex-end;height:34px;padding:0 5px 6px}
.cal-pieno td i{display:block;width:100%;background:var(--ink-3)}
.cal-pieno td i.tutto{background:var(--ink)}
.cal-pieno td i.vuoto{background:var(--terracotta)}

/* La barra della scelta, scura come nel disegno: sta sopra la pagina e deve
   staccarsene. Sostituisce la finestra «Decidi tu prezzo e min stay». */
.selbar{background:var(--scuro);color:var(--su-scuro);border-top:0;gap:12px 18px;
  padding:14px 18px}
.selbar .sel-txt{min-width:180px}
.selbar .sel-txt b{display:block;font-size:15px;font-weight:700;line-height:20px}
.selbar .sel-txt span{display:block;font-size:12px;line-height:17px;color:var(--su-scuro-tenue)}
.sel-campo{display:flex;align-items:center;gap:8px}
.sel-eti{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--su-scuro-tenue)}
.sel-passo,.sel-ms{display:flex;align-items:stretch;border:2px solid var(--su-scuro-tenue)}
.sel-passo button{width:34px;border:0;background:transparent;color:var(--su-scuro);
  font:inherit;font-size:18px;cursor:pointer}
.sel-passo button:hover{background:var(--riga-su-scuro)}
.sel-passo input{width:62px;height:36px;border:0;border-radius:0;
  border-left:2px solid var(--su-scuro-tenue);border-right:2px solid var(--su-scuro-tenue);
  background:transparent;color:var(--su-scuro);font:inherit;font-size:17px;font-weight:700;
  padding:0 8px;-moz-appearance:textfield;box-shadow:none}
.sel-passo input::-webkit-outer-spin-button,
.sel-passo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sel-ms button{width:34px;height:36px;border:0;background:transparent;color:var(--su-scuro);
  font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.sel-ms button+button{border-left:2px solid var(--su-scuro-tenue)}
.sel-ms button.on{background:var(--su-scuro);color:var(--scuro)}
.sel-spazio{flex:1}
.sel-secondario{height:40px;padding:0 14px;border:2px solid var(--su-scuro-tenue);
  background:transparent;color:var(--su-scuro);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap}
.sel-secondario:hover{border-color:var(--su-scuro)}
.sel-annulla{height:40px;padding:0 10px;border:0;background:transparent;
  color:var(--su-scuro-tenue);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sel-annulla:hover{color:var(--su-scuro)}
.sel-applica{height:40px;min-width:150px;padding:0 16px;border:0;background:var(--terracotta);
  color:var(--su-pieno);font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap}
.sel-applica:hover{background:var(--terracotta-scuro)}
.cal-pieno td i.q0{height:0.0px}
.cal-tab .occ i.q0{width:0%}
.cal-pieno td i.q5{height:1.1px}
.cal-tab .occ i.q5{width:5%}
.cal-pieno td i.q10{height:2.2px}
.cal-tab .occ i.q10{width:10%}
.cal-pieno td i.q15{height:3.3px}
.cal-tab .occ i.q15{width:15%}
.cal-pieno td i.q20{height:4.4px}
.cal-tab .occ i.q20{width:20%}
.cal-pieno td i.q25{height:5.5px}
.cal-tab .occ i.q25{width:25%}
.cal-pieno td i.q30{height:6.6px}
.cal-tab .occ i.q30{width:30%}
.cal-pieno td i.q35{height:7.7px}
.cal-tab .occ i.q35{width:35%}
.cal-pieno td i.q40{height:8.8px}
.cal-tab .occ i.q40{width:40%}
.cal-pieno td i.q45{height:9.9px}
.cal-tab .occ i.q45{width:45%}
.cal-pieno td i.q50{height:11.0px}
.cal-tab .occ i.q50{width:50%}
.cal-pieno td i.q55{height:12.1px}
.cal-tab .occ i.q55{width:55%}
.cal-pieno td i.q60{height:13.2px}
.cal-tab .occ i.q60{width:60%}
.cal-pieno td i.q65{height:14.3px}
.cal-tab .occ i.q65{width:65%}
.cal-pieno td i.q70{height:15.4px}
.cal-tab .occ i.q70{width:70%}
.cal-pieno td i.q75{height:16.5px}
.cal-tab .occ i.q75{width:75%}
.cal-pieno td i.q80{height:17.6px}
.cal-tab .occ i.q80{width:80%}
.cal-pieno td i.q85{height:18.7px}
.cal-tab .occ i.q85{width:85%}
.cal-pieno td i.q90{height:19.8px}
.cal-tab .occ i.q90{width:90%}
.cal-pieno td i.q95{height:20.9px}
.cal-tab .occ i.q95{width:95%}
.cal-pieno td i.q100{height:22.0px}
.cal-tab .occ i.q100{width:100%}
/* Sul telefono: il periodo si stringe invece di spingere fuori i bottoni, i
   chip lunghi si tagliano, e la colonna dei nomi lascia spazio alle notti. */
@media(max-width:600px){
  .cal-comandi{width:100%}
  .cal-periodo{flex:1 1 100%;min-width:0}
  .cal-periodo span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}
  .cal-chip{max-width:100%;min-width:0}
  .cal-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cal-tab.stretta .unita{width:112px}
  .cal-tab tbody th.unita{padding:8px}
  .cal-tab tbody th .sub{white-space:normal}
  .cal-tab.g14{min-width:700px}
  .cal-tab.g30{min-width:1372px}
}

/* Le due strade di «Suggerisci i periodi» (25 settembre 2026). */
.scelte-periodi{display:grid;gap:var(--sp-sm)}
.scelte-periodi .btn{justify-content:flex-start;text-align:left}
.scelte-periodi p.sub{margin:0 0 var(--sp-md)}


/* Conformita' e guida della casa, in Strutture (25 settembre 2026). Stavano
   nel Check-in, scheda Case: le regole vengono da li', col loro prefisso. */
.ci-tab{border:2px solid var(--ink);overflow-x:auto;margin-bottom:10px}
.ci-tab-in{min-width:780px}
.ci-tab-riga{display:grid;grid-template-columns:150px repeat(6,minmax(0,1fr))}
.ci-tab-riga + .ci-tab-riga{border-top:1px solid var(--surface-4)}
.ci-tab-riga.testa{background:var(--surface-2);border-bottom:2px solid var(--ink)}
.ci-tab-riga.testa span{padding:9px 12px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ci-tab-riga.testa span + span{border-left:1px solid var(--surface-4)}
.ci-tab-riga .casa{padding:12px;font-size:15px;font-weight:800;border:0;background:none;text-align:left;
  font-family:inherit;color:var(--ink);cursor:pointer}
.ci-tab-riga.on .casa{box-shadow:inset 4px 0 0 var(--terracotta)}
.ci-tab-riga.on{background:var(--surface-1)}
.ci-cella{padding:12px;border:0;border-left:1px solid var(--surface-4);background:transparent;text-align:left;
  cursor:pointer;min-width:0;font-family:inherit;color:var(--ink)}
@media(hover:hover){.ci-cella:hover,.ci-tab-riga .casa:hover{background:var(--terracotta-velo)}}
.ci-cella .v{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-cella .s{display:block;font-size:11px;color:var(--ink-3)}
.ci-cella.ko{background:var(--terracotta-velo)}
.ci-cella.ko .v,.ci-cella.ko .s{color:var(--terracotta-scuro)}
.ci-cella.presto{background:var(--ambra-velo)}
.ci-cella.presto .s{color:var(--testo-ambra)}
.ci-cella.vuota .v{color:var(--ink-3);font-weight:600}
.ci-casa-ed{margin-bottom:22px}
.ci-casa-ed[hidden]{display:none}
.ci-casa-ed [data-casa][hidden]{display:none}
.ci-gfoto{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.ci-gfoto-voce{min-width:0;border:2px solid var(--bordo);padding:10px}
.ci-gfoto-voce img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:10px;background:var(--surface-3)}
.ci-gfoto-voce label + input,.ci-gfoto-voce label + select{margin-bottom:8px}
.ci-griglia{display:grid;gap:10px 12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ci-griglia label{font-size:11px;font-weight:600;color:var(--ink-3);margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-griglia input,.ci-griglia select{padding:7px 10px;font-size:14px}
.ci-spunta{display:flex;gap:10px;align-items:flex-start;margin-top:12px;min-height:32px;font-size:14px;color:var(--ink)}
.ci-spunta input{width:20px;height:20px;flex:none;margin-top:1px;padding:0}
.ci-sotto{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:22px 0 10px}
.ci-azioni{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ci-azioni .btn{text-decoration:none}
.ci-problema{font-size:13px;color:var(--terracotta-scuro);font-weight:600;margin:0 0 12px}
.ci-testo{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:2px solid var(--bordo);
  background:var(--surface-1);color:var(--ink);margin-top:4px}
.ci-nota{margin:0 0 22px;font-size:12px;color:var(--ink-3)}

/* «Da dove vengono», in Andamento (dalla pagina /ospiti, 25 settembre 2026). */
.prov-paesi{display:grid;gap:6px;margin-top:8px}
.prov-paese{display:grid;grid-template-columns:minmax(110px,1.2fr) 3fr auto;gap:10px;align-items:center;font-size:14px}
.prov-barra{height:10px;background:var(--bordo-tenue);position:relative}
.prov-barra i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
@media(max-width:520px){ .prov-paese{grid-template-columns:1fr auto} .prov-barra{grid-column:1/-1;order:3} }
.cg-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.cg-testa .t-sez{margin:0}

/* I canali di una casa, nella sua scheda (25 settembre 2026). */
.casa-canali .casa-canale-riga{margin-top:10px}
.casa-canali .casa-canale-riga .t-sez{display:block;margin-bottom:4px}
.cc-campi{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:6px 10px;align-items:center;font-size:13px}
.cc-campi .con-pct input{padding:5px 8px}

/* Incassi degli ultimi dodici mesi, un canale per scheda (26 settembre 2026). */
.inc-schede{display:flex;gap:0;border-bottom:2px solid var(--ink);margin:var(--sp-md) 0 var(--sp-md);overflow-x:auto}
.inc-schede button{flex:1 0 auto;border:0;background:none;padding:10px 16px;font:inherit;font-weight:700;font-size:14px;
  color:var(--ink-2);cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px;white-space:nowrap}
.inc-schede button.on{color:var(--ink);border-bottom-color:var(--terracotta)}
.inc-testa{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.inc-testa .sub{margin:0}
.inc-vuoto{padding:18px;border:2px dashed var(--linea)}
.inc-vuoto .btn{margin-top:8px}
table.inc-mesi td,table.inc-mesi th{white-space:nowrap}

/* Il testo della campagna di ritorno (T2, 26 settembre 2026). */
.cmp-testo{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:2px solid var(--bordo);
  background:var(--surface-1);color:var(--ink);margin:4px 0 12px;resize:vertical}

/* Cosa manca per le dirette (T4, 26 settembre 2026). */
.dire-lista{margin:var(--sp-md) 0}
.dire-lista ul{list-style:none;margin:6px 0 0;padding:0}
.dire-lista li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--bordo-tenue)}
.dire-lista li:first-child{border-top:0}
.dire-lista .segno{width:20px;flex:none;font-weight:800;color:var(--ink-3);text-align:center}
.dire-lista li.fatta .segno{color:var(--ok)}
.dire-lista input{width:20px;height:20px;flex:none;margin-top:2px}
.dire-lista .sub{margin:2px 0 0}

/* Prezzi: le tre parti della pagina unita (26 settembre 2026). Le parti si
   leggono dal numero e dal filo sopra, non da un colore: la pagina era gia'
   piena di schede, e una quarta campitura l'avrebbe resa piu' rumorosa. */
/* Dal redesign Capryce (28 settembre 2026) i salti sono un controllo
   segmentato, come nel disegno: un blocco solo a spigoli vivi, le voci
   separate da una riga, quella scelta piena di rosso. Le pillole tonde
   erano l'unico raggio rimasto nel pannello. Valgono sia per i salti dentro
   la pagina (Prezzi) sia per le schede (Messaggi). */
.salti{display:inline-flex;flex-wrap:wrap;margin:var(--sp-lg) 0 0;
  border:2px solid var(--bordo-pieno);max-width:100%}
.salti a,.salti button{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
  border:0;border-radius:0;background:none;color:var(--ink);font:inherit;
  font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.salti > * + *{border-left:2px solid var(--bordo-pieno)}
/* Le schede non sono azioni: pieno d'inchiostro, non di rosso (ridisegno). */
.salti [aria-selected="true"]{background:var(--ink);color:var(--surface)}
@media(hover:hover){.salti a:hover,.salti button[aria-selected="false"]:hover{background:var(--terracotta-velo)}}
.salti :focus-visible{outline:2px solid var(--terracotta);outline-offset:-4px}
/* Sul telefono le tre voci stanno in una riga: il blocco scorre di lato
   invece di andare a capo con le righe spezzate. */
@media(max-width:560px){.salti{flex-wrap:nowrap;overflow-x:auto}}
/* Le schede di Messaggi: se ne vede una alla volta. */
.scheda-msg[hidden]{display:none}
.parte{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  margin:48px 0 var(--sp-md);padding-top:var(--sp-md);border-top:2px solid var(--ink);
  font-size:22px;line-height:28px;font-weight:800;letter-spacing:-.01em;scroll-margin-top:80px}
@media(min-width:768px){.parte{font-size:24px;line-height:30px}}
.scheda-msg > .parte:first-child{margin-top:var(--sp-lg)}
.parte .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--ink);color:var(--surface-1);font-size:14px;line-height:1}
.parte .sub{flex-basis:100%;font-size:14px;font-weight:400;letter-spacing:0}
.parte .n{font-weight:800}
#pz-anno{margin-top:var(--sp-lg)}
.prova-finale{margin:12px 0 4px;font-size:16px}
.prova-finale b{font-size:20px}
/* Nella notte di prova la scheda puo' essere larga 300px: le colonne
   numeriche prendono quanto serve e il nome va a capo. */
#pnConto .scomp-riga{grid-template-columns:minmax(0,1fr) auto auto 56px;gap:8px}

/* Messaggi (27 settembre 2026): righe calme, un'ora, un nome, cosa. */
.msg-giorno{display:block;margin:16px 0 4px}
.msg-giorno:first-child{margin-top:0}
.msg-riga{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;
  border-bottom:2px solid var(--bordo-tenue)}
.msg-riga:last-child{border-bottom:0}
.msg-riga .quando{font-variant-numeric:tabular-nums;font-weight:600;min-width:48px}
.msg-riga .chi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.msg-riga .chi .sub{font-size:13px}
.msg-testo{border-bottom:2px solid var(--bordo-tenue);padding:12px 0}
.msg-testo:last-child{border-bottom:0}
.msg-testo summary{cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:40px;justify-content:center}
.msg-testo summary .sub{font-size:13px}
.msg-testo textarea{width:100%;font:inherit;font-size:14px;line-height:1.45}
.msg-testo .campo{margin-top:12px}
.msg-regola{margin-top:10px}
/* Un messaggio in partenza si apre per leggerlo e correggerlo. */
.msg-coda{border-bottom:2px solid var(--bordo-tenue)}
.msg-coda:last-child{border-bottom:0}
.msg-coda > summary{list-style:none;cursor:pointer}
.msg-coda > summary::-webkit-details-marker{display:none}
.msg-coda > summary .msg-riga{border-bottom:0}
.wa-qr{display:block;width:240px;height:240px;margin:8px 0 12px;
  border:2px solid var(--bordo-pieno);image-rendering:pixelated}
#waBox{margin-bottom:var(--sp-md)}
.msg-leggi{font-size:13px;font-weight:600;color:var(--terracotta-scuro)}
.msg-coda[open] .msg-leggi{color:var(--ink-3)}
.msg-coda .corpo{padding:0 0 14px}
.msg-coda textarea{width:100%;font:inherit;font-size:14px;line-height:1.45}
.msg-coda .avviso-stop{font-size:13px;margin:6px 0 10px}
.msg-coda .azioni{display:flex;gap:8px;flex-wrap:wrap}
.msg-foto{margin-top:14px}
.msg-foto-tit{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.msg-foto-elenco{display:flex;gap:10px;flex-wrap:wrap}
.msg-foto figure{margin:0;display:flex;flex-direction:column;gap:6px;width:120px}
.msg-foto img{width:120px;height:120px;object-fit:cover;border:2px solid var(--bordo)}
.msg-foto .avviso-testo{color:var(--terracotta-scuro);font-weight:600;font-size:13px;margin:0 0 8px}
.msg-foto label.btn{cursor:pointer;margin-top:4px}
.msg-quando{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.msg-quando .campo{flex:0 1 auto;min-width:0}
.msg-quando input[type=number]{width:72px}
.msg-regola .spunta-riga{flex-basis:100%;white-space:normal;align-items:flex-start;margin-top:8px}

/* Rendiconti ai proprietari (27 settembre 2026). */
.conto-prop{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:8px}
.conto-prop td{padding:7px 0;border-bottom:2px solid var(--bordo-tenue)}
.conto-prop td.n{text-align:right;white-space:nowrap}
.conto-prop tr.finale td{font-weight:700;font-size:16px;border-top:2px solid var(--ink);border-bottom:0}
#propElenco input[type=month]{min-height:40px}
.canale-ic{display:inline-flex;align-items:center;vertical-align:middle;line-height:1}

/* Recupero: i campi del periodo e le tessere dei numeri da ricopiare. */
.campi-riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:12px}
.rc-blocco{margin-top:14px}
.rc-blocco h4{margin:0 0 6px;font-size:14px}
.rc-numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.rc-numeri div{border:2px solid var(--bordo-tenue);padding:10px 12px}
.rc-numeri b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.rc-numeri span{font-size:12px;color:var(--ink-3)}

/* Conversazioni: elenco e fumetti (30 settembre 2026). */
.conv-elenco{padding:0}
.conv-riga{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;font:inherit;background:none;
  border:0;border-bottom:2px solid var(--bordo-tenue);padding:12px 14px;cursor:pointer;color:var(--ink)}
.conv-riga:last-child{border-bottom:0}
.conv-riga.nuova{background:var(--surface-2)}
.conv-testa{display:flex;align-items:center;gap:8px}
.conv-ultimo{font-size:14px;color:var(--ink-2)}
.conv-fumetti{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;margin:10px 0}
.conv-msg{max-width:86%;padding:8px 12px;border:2px solid var(--bordo-tenue)}
.conv-msg.ospite{align-self:flex-start}
.conv-msg.tu{align-self:flex-end;background:var(--surface-2)}
.conv-meta{font-size:11px;color:var(--ink-3)}
.conv-testo{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}