/*
 * Sesamoh by STBLE — foglio di stile unico.
 *
 * Dal 24-09-2026 al 02-11-2026 la dashboard ha vestito come Duebeam (lavanda e
 * indaco); dal 02-11-2026 veste col sistema STBLE di Tracka, in stble.css.
 * Molti commenti qui sotto parlano ancora di lavanda e indaco: valgono per la
 * disposizione, i colori li decide stble.css.
 *
 * Niente framework: sono settecento righe che si leggono, contro un CSS
 * generato che non si legge e che, quando cambia, va rinominato per via della
 * cache. Qui il file è uno e si chiama sempre così.
 */

/*
 * Dal 02-11-2026 i colori, i caratteri e la forma dei componenti vengono dal
 * sistema STBLE (quello di Tracka): stble.css, caricato dopo questo file. Qui
 * restano i nomi di prima (--canvas, --paper, --azione…), che stble.css punta
 * sui token STBLE; la tavolozza indaco di Duebeam e le sue eccezioni per il
 * tema scuro non ci sono più.
 */

/* Le immagini chiare (documenti, foto) restano come sono: si abbassa solo un
   poco la luce, perché una carta d'identità bianca a mezzanotte acceca. */
:root[data-tema="scuro"] img { filter: brightness(.92); }
/* Il passaggio fra chiaro e scuro non scatta: sfuma in un attimo. */
body, .sidebar, .scheda, .numero { transition: background-color .25s, border-color .25s, color .25s; }
@media (prefers-reduced-motion: reduce) { body, .sidebar, .scheda, .numero { transition: none; } }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

a { color: var(--azione); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(79, 70, 229, .18); }

/* ─────────────────────────────────────────────────────────── impianto */

#app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

/* La barra laterale è carta bianca contro il fondo lavanda, divisa da un filo:
   niente blocco nero, il peso lo porta il contenuto. */
.sidebar {
  background: var(--sidebar);
  color: var(--ink);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .marchio { padding: 20px 18px 16px; }

/* Il marchio: la tessera a sinistra, il nome a destra, centrati. */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo svg { flex: 0 0 auto; display: block; }
/* «sesamoh.»: minuscolo, pesantissimo, lettere strette, punto rosso. */
.logo-testo b {
  display: block; font-size: 21px; font-weight: 800;
  letter-spacing: -.045em; line-height: 1;
}
.logo-testo b i { font-style: normal; color: var(--stble-rosso); }

/* Il resto del nome, piccolo e spaziato in maiuscolo, col punto di STBLE. */
.logo-firma {
  display: block; margin-top: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.2;
  color: var(--muted); white-space: nowrap;
}
/* «STBLE.» in neretto e d'inchiostro pieno (12-10-2026): sul grigio del resto
   si deve notare; il punto rosso pesa come la scritta e cresce un poco. */
.logo-firma strong { font-weight: 800; color: var(--ink); }
.logo-firma i { font-style: normal; font-weight: 900; font-size: 1.35em; line-height: 0; color: var(--stble-rosso); }

/* Nella schermata d'ingresso il marchio è più grande. */
.riquadro-marchio { margin-bottom: 16px; }
.riquadro-marchio .logo-testo b { font-size: 30px; }
.riquadro-marchio .logo-firma { font-size: 11px; margin-top: 5px; }

/* Il marchio che si vede mentre la dashboard si carica: respira piano, così
   si capisce che sta lavorando invece di essersi bloccata. */
.avvio {
  display: grid; place-items: center; min-height: 100vh; color: var(--ink);
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(235, 255, 56, .22), transparent 70%),
    var(--canvas);
}
/* Prima la caduta del seme (stble.css), poi il respiro finché si carica. */
.avvio .logo { animation: respiro 1.6s ease-in-out 1s infinite; }
.avvio .logo-testo b { font-size: 30px; }
.avvio .logo-firma { font-size: 11px; margin-top: 5px; }
@keyframes respiro { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .avvio .logo { animation: none } }

.sceltaStruttura { padding: 0 14px 14px; }
.sceltaStruttura select {
  width: 100%;
  background: var(--canvas);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-controllo);
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 600;
}

.sidebar nav { flex: 1; padding: 2px 10px 16px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; margin: 2px 0;
  border-radius: var(--radius-controllo);
  color: var(--sidebar-muted);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background-color .12s, color .12s;
}
.sidebar nav a .glifo { flex: 0 0 18px; width: 18px; height: 18px; opacity: .85; }
.sidebar nav a .glifo svg { width: 18px; height: 18px; display: block; }
/* Il nome corto serve solo al telefono, dove il disegno è da solo. */
.sidebar nav a .breve { display: none; }
.sidebar nav a:hover { background: var(--canvas); color: var(--ink); text-decoration: none; }
/* La voce attiva: indaco tenue e scritta indaco, come la linguetta scelta. */
.sidebar nav a.attiva { background: var(--azione-soft); color: var(--azione); font-weight: 650; }
.sidebar nav a.attiva .glifo { opacity: 1; }
.sidebar nav a .pallino {
  margin-left: auto; background: var(--azione); color: var(--on-azione);
  font-size: 11px; font-weight: 700; border-radius: var(--pillola); padding: 1px 7px;
}

/* Le sottosezioni: rientrate, più piccole, e senza disegno — il disegno è
   quello della sezione che le contiene, e ripeterlo direbbe che sono voci
   sorelle di quelle sopra invece che figlie. Il filo a sinistra le lega. */
.sidebar nav a.sotto-voce {
  padding: 6px 10px 6px 16px;
  margin: 0 0 0 20px;
  font-size: 13px;
  border-radius: 0 var(--radius-controllo) var(--radius-controllo) 0;
  border-left: 1.5px solid var(--line);
}
.sidebar nav a.sotto-voce.attiva { background: none; border-left-color: var(--azione); color: var(--azione); font-weight: 650; }

/* Le stesse voci, in cima al contenuto: le pillole di Duebeam, dove quella
   scelta è piena d'indaco e le altre sono carta col filo. */
.linguette { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 20px; }
.linguette a {
  padding: 7px 16px; border-radius: var(--pillola); font-size: 14px; font-weight: 650;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line-forte);
  text-decoration: none; transition: border-color .12s, color .12s;
}
.linguette a:hover { color: var(--azione); border-color: rgba(79, 70, 229, .45); text-decoration: none; }
.linguette a.attiva { background: var(--azione); border-color: var(--azione); color: var(--on-azione); }
.linguette a .breve { display: none; }

.sidebar .piede { padding: 14px 18px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.sidebar .piede button {
  background: none; border: 1px solid var(--line-forte); color: var(--ink); cursor: pointer;
  padding: 3px 12px; border-radius: var(--pillola); font-size: 12.5px; font-weight: 600;
}
.sidebar .piede button:hover { border-color: rgba(79, 70, 229, .5); color: var(--azione); }

main { padding: 30px 36px 64px; max-width: 1220px; width: 100%; }

/* ──────────────────────────────────────────────────────── testate e blocchi */

/* Il tasto «Indietro» in cima a ogni sezione (06-10-2026): piccolo, prima del titolo. */
.indietro { margin: -6px 0 14px; }
.indietro .bottone { padding-left: 9px; }
.indietro .bottone small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.indietro .bottone small::before { content: "·"; margin-right: 6px; }

.testata { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
/* Il titolo è grosso e stretto, come i titoli di Duebeam: si riconosce la
   sezione da lontano senza leggere. */
.testata h1 { font-size: 30px; font-weight: 800; letter-spacing: -1.1px; line-height: 1.1; }
.testata p { color: var(--muted); font-size: 14.5px; margin-top: 6px; max-width: 70ch; }
.testata .azioni { display: flex; gap: 8px; flex-wrap: wrap; }

.scheda {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.scheda > h2 { font-size: 16px; font-weight: 750; letter-spacing: -.25px; margin-bottom: 4px; }
.scheda > h2 + .sotto { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.scheda .sotto a { text-decoration: underline; text-underline-offset: 2px; }

.griglia { display: grid; gap: 16px; }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.griglia.tre { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.griglia.quattro { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* Una colonna della griglia non si allarga per il suo contenuto: una tabella o
   un messaggio d'errore lungo scorrono o vanno a capo dentro la scheda. */
.griglia > * { min-width: 0; }
/* Casa smart e accessi (07-10-2026): in cima alle serrature una riga di
   tessere piccole, una per ogni altra linguetta, che si aprono con un clic. */
.griglia.riepilogo-casa { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.riepilogo-casa .numero { display: block; padding: 11px 14px; color: inherit; text-decoration: none; }
.riepilogo-casa .numero:hover { border-color: rgba(79, 70, 229, .45); text-decoration: none; }
.riepilogo-casa .numero .etichetta { font-size: 12.5px; }
.riepilogo-casa .numero .valore { font-size: 21px; letter-spacing: -.5px; margin-top: 2px; }
.riepilogo-casa .numero .nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riepilogo-casa .numero.allarme .valore { color: var(--orange); }
/* Sul telefono cinque tessere a due a due erano tre righe prima della prima
   serratura: lì diventano una fila sola che scorre di lato. */
@media (max-width: 720px) {
  .griglia.riepilogo-casa { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 14px; margin: 0 -14px 14px; padding: 2px 14px 8px; scrollbar-width: none; }
  .griglia.riepilogo-casa::-webkit-scrollbar { display: none; }
  .riepilogo-casa .numero { flex: 0 0 146px; scroll-snap-align: start; padding: 10px 12px; }
}

/* L'istogramma delle visite al sito: un giorno per colonna, niente libreria.
   L'altezza dice le persone; il titolo del browser dice tutto il resto, perché
   dodici barre non devono portarsi dietro dodici etichette. */
.istogramma { display: flex; align-items: flex-end; gap: 3px; height: 92px; margin-top: 14px; }
.istogramma .colonna { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.istogramma .barra { width: 100%; background: var(--azione); border-radius: 4px 4px 0 0; min-height: 3px; opacity: .85; }
.istogramma .colonna:hover .barra { opacity: 1; background: var(--azione-scura); }
.istogramma .giorno { font-size: 10px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }

.numero {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px 19px; box-shadow: var(--shadow);
}
.numero .etichetta { font-size: 13px; color: var(--muted); font-weight: 550; }
.numero .valore { font-size: 30px; font-weight: 800; letter-spacing: -1.1px; margin-top: 4px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.numero .nota { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ────────────────────────────────────────────────────────────── controlli */

/* Il pulsante è una pillola indaco, scritta normale e peso pieno: il
   maiuscoletto largo di prima gridava, questo si legge. */
.bottone {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--azione); color: var(--on-azione); border: 1px solid transparent;
  border-radius: var(--pillola); padding: 9px 20px; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .7);
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
.bottone:hover { background: var(--azione-scura); text-decoration: none; }
.bottone:focus-visible { outline: none; box-shadow: var(--anello); }
.bottone:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.bottone.spento:disabled { opacity: 1; background: var(--canvas); color: var(--muted); border-color: var(--line); }
.bottone.chiaro { background: var(--paper); color: var(--ink); border-color: var(--line-forte); box-shadow: none; }
.bottone.chiaro:hover { background: var(--paper); color: var(--azione); border-color: rgba(79, 70, 229, .5); }
.bottone.pericolo { background: var(--red); box-shadow: 0 8px 18px -10px rgba(217, 58, 52, .7); }
.bottone.pericolo:hover { background: #bf2f2a; }
.bottone.piccolo { padding: 5px 13px; font-size: 13px; font-weight: 600; box-shadow: none; }
/* Mai più largo del suo riquadro (26-10-2026): un pulsante o un campo lungo si
   ferma al bordo; sul telefono il testo del pulsante va a capo (sotto). */
.bottone { max-width: 100%; }
input[type="file"] { max-width: 100%; }

.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; font-size: 13px; font-weight: 550; color: var(--muted); margin-bottom: 5px; }
.campo > span .aiuto { color: var(--muted); opacity: .8; font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=time], input[type=url], input[type=search], select, textarea {
  width: 100%; background: var(--paper); border: 1px solid var(--line-forte);
  border-radius: var(--radius-controllo); padding: 9px 12px; font-size: 14px;
  transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: #c4c4d6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azione); box-shadow: var(--anello); }
input[type=checkbox], input[type=radio] { accent-color: var(--azione); }
textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55; }
.riga { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.riga > .campo { flex: 1 1 150px; margin-bottom: 0; }
label.interruttore { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

/* I comuni suggeriti sotto al campo. Un elenco nostro e non un <datalist>:
   quello nativo legge le opzioni mentre si scrive, e le nostre arrivano da una
   chiamata che finisce dopo — così non compariva mai niente. */
.cerca-comune { position: relative; }
.suggerimenti {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  margin-top: 6px; overflow: hidden; box-shadow: var(--shadow-alta);
  max-height: 260px; overflow-y: auto;
}
.suggerimenti[hidden] { display: none; }
.suggerimento {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 9px 12px; text-align: left; cursor: pointer; font-size: 14px;
}
.suggerimento:last-child { border-bottom: 0; }
.suggerimento:hover, .suggerimento:focus { background: var(--azione-soft); outline: none; }
.suggerimento b { font-weight: 600; }
.suggerimento span { font-size: 12px; color: var(--muted); }
.vuoto-suggerimenti { padding: 10px 12px; font-size: 13px; color: var(--muted); }
label.interruttore input { width: auto; }

/* ──────────────────────────────────────────────────────────────── tabelle */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .1s; }
tbody tr:hover td { background: #fafaff; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scorre { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }

/* ───────────────────────────────────────────────────────────── etichette */

/* Le etichette di Duebeam: un rettangolo tenue con l'angolo morbido, il
   colore nel testo. Una pillola piena sembrerebbe un pulsante. */
.tag { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 8px; white-space: nowrap; line-height: 1.5; max-width: 100%; }
.tag.blu { background: var(--blue-soft); color: var(--azione-scura); }
.tag.verde { background: var(--green-soft); color: var(--green); }
.tag.arancio { background: var(--orange-soft); color: var(--orange); }
.tag.rosso { background: var(--red-soft); color: #b42a25; }
.tag.viola { background: var(--purple-soft); color: var(--purple-dark); }
.tag.grigio { background: var(--canvas); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* L'asterisco dei valori scritti dall'host: si vede, si può interrogare
   (title), e non urla come un avviso — il dato è valido, solo non è nostro. */
abbr.manuale {
  color: var(--orange); font-weight: 700; text-decoration: none; cursor: help;
  border-bottom: 1px dotted #e0a969; padding: 0 1px;
}
.manuale-legenda { color: var(--muted); font-size: 12px; margin-top: 10px; }
.manuale-legenda b { color: var(--orange); }

.avviso { border-radius: 14px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px; border: 1px solid transparent; }
.avviso.info { background: var(--azione-soft); border-color: #dcdffd; color: #3730a3; }
.avviso.attenzione { background: var(--orange-soft); border-color: #f6dfbd; color: #8a4510; }
/* L'errore si distingue perché è l'unico posto rosso dell'applicazione: il
   filo a sinistra, più spesso, lo fa vedere anche con la coda dell'occhio. */
.avviso.errore { background: var(--red-soft); border-color: #f5cbc9; border-left: 4px solid var(--red); color: #8f1f1b; }
.avviso.errore a { color: #8f1f1b; text-decoration: underline; }
.avviso.errore a.bottone.chiaro { color: var(--ink); text-decoration: none; }
.avviso.ok { background: var(--green-soft); border-color: #c9ead4; color: #115c2c; }
.avviso b { display: block; margin-bottom: 2px; }

.banner-prova {
  background: linear-gradient(90deg, var(--azione), #6d5dfc); color: #fff; font-size: 13px;
  padding: 9px 36px; display: flex; gap: 10px; align-items: center; justify-content: space-between;
}
.banner-prova b { font-weight: 650; }

/* ────────────────────────────────────────────────────────────── planning */

/* Il Planning (01-11-2026): due colonne di griglia per giorno, così un soggiorno
   comincia a metà del giorno d'arrivo e finisce a metà di quello di partenza. */
.pl-comandi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pl-vai { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pl-vai input, .pl-vai select { width: auto; padding: 6px 8px; font-size: 13px; }
.pl-stato { margin: -4px 0 10px; }
.planning { --cella: 36px; --nome: 150px; --riga: 38px; overflow-x: auto; padding: 0; }
.pl-griglia { width: max-content; min-width: 100%; }
.pl-testa, .pl-riga { display: flex; }
.pl-angolo, .pl-nome {
  flex: 0 0 var(--nome); width: var(--nome); position: sticky; left: 0; z-index: 4; background: var(--paper);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 12px;
  font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-angolo { display: flex; align-items: flex-end; color: var(--muted); font-size: 12px; }
.pl-nome { display: flex; align-items: center; }
.pl-mesi, .pl-giorni { display: grid; grid-template-columns: repeat(var(--giorni), var(--cella)); }
.pl-mese { border-bottom: 1px solid var(--line); padding: 6px 0 4px; font-size: 12px; font-weight: 700; text-transform: capitalize; overflow: clip; }
.pl-mese span { position: sticky; left: calc(var(--nome) + 8px); padding-left: 8px; white-space: nowrap; }
.pl-giorno { padding: 3px 0 5px; text-align: center; font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--line); }
.pl-giorno b { display: block; font-size: 12px; color: var(--ink, inherit); font-weight: 650; }
.pl-giorno.weekend { background: var(--canvas); }
.pl-giorno.oggi b { width: 22px; line-height: 22px; margin: 0 auto; border-radius: 11px; background: var(--azione); color: var(--on-azione); }
.pl-corsie {
  position: relative; display: grid; border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(calc(var(--giorni) * 2), calc(var(--cella) / 2));
  grid-template-rows: repeat(var(--corsie), minmax(var(--riga), 1fr));
}
.pl-cella {
  position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  border-right: 1px solid var(--line); min-width: 0; color: inherit; font: inherit;
}
.pl-cella.weekend { background: var(--canvas); }
.pl-cella.oggi { background: color-mix(in srgb, var(--azione) 8%, transparent); }
.pl-cella.libera { cursor: pointer; }
.pl-cella.libera:hover { background: color-mix(in srgb, var(--azione) 14%, transparent); transform: none; }
.pl-cella.scelta { background: color-mix(in srgb, var(--azione) 30%, transparent); }
.pl-cella.chiusa, .pl-cella.fermo { background: repeating-linear-gradient(45deg, transparent, transparent 4px, color-mix(in srgb, var(--muted) 18%, transparent) 4px, color-mix(in srgb, var(--muted) 18%, transparent) 6px); }
.pl-cella .prezzo { position: absolute; bottom: 2px; right: 3px; font-size: 9.5px; color: var(--muted); }
.pl-barra {
  position: relative; z-index: 2; margin: 4px 1px; padding: 0 6px; border: 0; border-radius: 8px; box-shadow: none; min-width: 0;
  display: flex; align-items: center; overflow: clip; white-space: nowrap; color: #fff; cursor: pointer;
  font-size: 11.5px; font-weight: 650; line-height: 1; text-align: left; background: var(--purple);
}
.pl-barra:hover { filter: brightness(1.08); transform: none; }
.pl-etichetta { position: sticky; left: calc(var(--nome) + 6px); }
.pl-etichetta small { font-size: 10px; font-weight: 500; opacity: .85; }
.pl-barra.taglia-prima { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.pl-barra.taglia-dopo { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.pl-barra.airbnb { background: #e8515f; }
.pl-barra.booking { background: #1c4694; }
.pl-barra.diretta { background: var(--green); }
.pl-barra.vrbo { background: #2f6fa8; }
.pl-barra.expedia { background: #b8860b; }
.pl-barra.blocco { background: repeating-linear-gradient(45deg, #8e91aa, #8e91aa 5px, #7f829c 5px, #7f829c 10px); }
.pl-barra.da-confermare { opacity: .65; outline: 1px dashed currentColor; outline-offset: -3px; }
.pl-barra.doppia { outline: 2px solid var(--red, #d33); outline-offset: 1px; }
.pl-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12.5px; }
.pl-voce { display: inline-flex; align-items: center; gap: 6px; }
.pl-voce .pl-barra { display: inline-block; width: 22px; height: 12px; margin: 0; padding: 0; border-radius: 4px; cursor: default; }
/* Le schede che si impostano una volta: chiuse, per lasciare in cima il lavoro di tutti i giorni. */
details.messaggio-ospite > summary { cursor: pointer; list-style: none; }
details.messaggio-ospite > summary::-webkit-details-marker, .riquadro-chiuso > summary::-webkit-details-marker { display: none; }
details.messaggio-ospite:not([open]) > summary { margin-bottom: 0; }
.riquadro-chiuso > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.riquadro-chiuso > summary h2 { margin: 0; }
.riquadro-chiuso > summary::before { content: "▸"; color: var(--muted); }
.riquadro-chiuso[open] > summary::before { content: "▾"; }
.riquadro-chiuso[open] > summary { margin-bottom: 10px; }
.riquadro-chiuso .scheda { box-shadow: none; }
.indice-pagina { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin-bottom: 8px; background: var(--canvas); scrollbar-width: none; }
.indice-pagina .bottone { flex: none; }
.impegni-piano { margin: 14px 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); font-size: 13.5px; color: var(--muted); }
.impegni-piano b { color: var(--ink); }
.modifica-soggiorno { margin: 8px 0 12px; }
.modifica-soggiorno > summary { cursor: pointer; }
@media (max-width: 860px) {
  .planning { --nome: 92px; --cella: 38px; }
  .pl-angolo, .pl-nome { padding: 8px; font-size: 12px; white-space: normal; line-height: 1.15; }
}

/* ───────────────────────────────────────────────────── calendario tariffe */

.mesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.mese h3 { font-size: 14px; font-weight: 750; letter-spacing: -.2px; margin-bottom: 8px; text-transform: capitalize; }
.mese .settimana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mese .intestazioni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 4px; }
.mese .intestazioni span { font-size: 10px; font-weight: 600; color: var(--muted); text-align: center; }
.giorno-tariffa {
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  min-height: 44px; padding: 3px 4px; font-size: 10px; text-align: center; cursor: pointer;
  transition: border-color .1s, box-shadow .1s;
}
.giorno-tariffa:hover { border-color: var(--azione); }
.giorno-tariffa .n { font-size: 11px; color: var(--muted); }
.giorno-tariffa .p { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.giorno-tariffa.occupato { background: var(--canvas); color: var(--muted); }
.giorno-tariffa.chiuso { background: var(--red-soft); border-color: #f5d3d1; }
.giorno-tariffa.scelto { border-color: var(--azione); box-shadow: 0 0 0 2px var(--azione); }
.giorno-tariffa.vuoto { border: 0; background: none; cursor: default; }

/* ──────────────────────────────────────────────────────── accesso e modali */

/* Lavanda con due aloni, uno indaco in alto e uno verde acqua in basso: è la
   luce della pagina di Duebeam, e basta a non far sembrare vuoto il fondo. */
.accesso {
  display: grid; place-items: center; min-height: 100vh; padding: 32px 24px;
  background:
    radial-gradient(55% 45% at 85% 8%, rgba(79, 70, 229, .13), transparent 70%),
    radial-gradient(45% 40% at 8% 95%, rgba(20, 184, 166, .09), transparent 70%),
    var(--canvas);
  position: relative; overflow: hidden;
}
/* La trama del mestiere — casa, chiave, calendario, tastierino — a filo
   d'inchiostro quasi trasparente. La maschera sta sulla cornice, che è ferma;
   è l'svg dentro che deriva. Se la maschera derivasse con lui, la schiarita al
   centro scivolerebbe via dalla scheda. */
.trama-cornice {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(115% 85% at 50% 46%, transparent 30%, #000 80%);
  mask-image: radial-gradient(115% 85% at 50% 46%, transparent 30%, #000 80%);
}
/* Una deriva lentissima in diagonale: un giro dura un minuto e sposta esatti
   200 pixel, che è il passo della trama — così il ciclo si richiude senza
   scatti. Serve a far respirare il fondo, non a farsi notare. */
.trama {
  position: absolute; top: -200px; left: -200px;
  width: calc(100% + 200px); height: calc(100% + 200px);
  animation: deriva 60s linear infinite;
}
@keyframes deriva {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(200px, 200px, 0); }
}
@media (prefers-reduced-motion: reduce) { .trama { animation: none; } }

/* La firma di Stble, in basso a destra: su fondo chiaro basta piccola. Dal
   12-10-2026 ha il taglio di «sesamoh.» — minuscolo, pesante, lettere strette,
   punto rosso — così la firma e il nome del prodotto sono la stessa famiglia. */
.firma-grande {
  position: absolute; z-index: 1; pointer-events: none; user-select: none;
  right: clamp(16px, 3vw, 40px); bottom: clamp(14px, 2.4vw, 32px);
  color: var(--ink); font-weight: 800; letter-spacing: -.045em; line-height: 1;
  font-size: clamp(24px, 2.8vw, 34px); opacity: .9;
}
.firma-grande i {
  font-style: normal; font-weight: 600; color: var(--muted);
  font-size: .42em; letter-spacing: 0; margin-right: .35em;
}
.firma-grande em { font-style: normal; color: var(--stble-rosso); }
@media (max-width: 620px) { .firma-grande { display: none; } }
.accesso .riquadro, .accesso .caricamento, .accesso .vetrina { position: relative; z-index: 1; }

.accesso .riquadro {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 30px;
  width: 100%; max-width: 440px; box-shadow: var(--shadow-alta);
}
.accesso .riquadro.largo { max-width: 720px; }
.accesso h1, .accesso .titolo-accesso { font-size: 22px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.6px; }
.accesso p.intro { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

/* La schermata d'ingresso con la vetrina: il titolo grande a sinistra, il
   modulo a destra — la pagina di Duebeam, ridotta a quello che serve qui. */
.accesso.con-vetrina {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 440px);
  gap: clamp(32px, 6vw, 96px); align-items: center; justify-content: center;
  padding: 48px clamp(20px, 6vw, 96px);
}
.accesso.con-vetrina .riquadro.largo { max-width: 720px; }
.accesso.con-vetrina:has(.riquadro.largo) { grid-template-columns: minmax(0, 1fr) minmax(0, 720px); }
.vetrina { max-width: 620px; }
.vetrina .riquadro-marchio { margin-bottom: 36px; }
.vetrina h1 {
  font-size: clamp(40px, 5.6vw, 76px); font-weight: 800; line-height: 1.02;
  letter-spacing: -.045em; margin-bottom: 22px; color: var(--ink);
}
.vetrina h1 span { color: var(--azione); white-space: nowrap; }
/* Accanto al modulo lungo della registrazione il titolo si fa più piccolo:
   la colonna è stretta, e a quattro righe smette di essere un titolo. */
.accesso.con-vetrina:has(.riquadro.largo) .vetrina h1 { font-size: clamp(36px, 4vw, 54px); }
.accesso .riquadro > h1 + .schede { margin-top: 16px; }
.vetrina .lede { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.vetrina .punti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; list-style: none; }
.vetrina .punti li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--pillola);
  padding: 6px 14px 6px 10px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  box-shadow: 0 1px 2px rgba(22, 23, 43, .04);
}
.vetrina .punti li i { width: 8px; height: 8px; border-radius: 50%; background: var(--azione); }
.vetrina .punti li:nth-child(2) i { background: var(--green); }
.vetrina .punti li:nth-child(3) i { background: var(--red); }
.vetrina .punti li:nth-child(4) i { background: var(--orange); }
.vetrina .punti li:nth-child(5) i { background: var(--teal); }
.vetrina .punti li:nth-child(6) i { background: var(--purple); }
.vetrina .punti li:nth-child(7) i { background: linear-gradient(135deg, var(--azione), var(--teal)); }
@media (max-width: 980px) {
  .accesso.con-vetrina, .accesso.con-vetrina:has(.riquadro.largo) { grid-template-columns: 1fr; justify-items: center; gap: 28px; padding: 32px 18px; }
  .vetrina { text-align: center; }
  .vetrina .riquadro-marchio { margin-bottom: 20px; }
  .vetrina .lede { margin: 0 auto; font-size: 16px; }
  .vetrina .punti { justify-content: center; }
}
/* Sul telefono si viene per entrare: le etichette sono vetrina, il modulo no. */
@media (max-width: 620px) {
  .vetrina .punti { display: none; }
  .vetrina h1 { font-size: 36px; margin-bottom: 12px; }
  .vetrina .lede { font-size: 15px; }
}

/* Il selettore Entra/Registrati: due pillole in un binario, come le viste di
   Duebeam. */
.accesso .schede { display: flex; gap: 4px; margin-bottom: 20px; background: var(--canvas); border: 1px solid var(--line); padding: 4px; border-radius: var(--pillola); }
.accesso .schede button {
  flex: 1; background: none; border: 0; padding: 8px; border-radius: var(--pillola); cursor: pointer;
  font-size: 14px; color: var(--muted); font-weight: 650; transition: background-color .12s, color .12s;
}
.accesso .schede button:hover { color: var(--ink); }
.accesso .schede button.attiva { background: var(--azione); color: var(--on-azione); box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .8); }

.accesso .bottone { padding: 12px 20px; font-size: 15px; }
.accesso .campo > span { font-size: 13px; }
.accesso .sotto-modulo { margin-top: 14px; text-align: center; font-size: 13.5px; color: var(--muted); }
.accesso .sotto-modulo button { font: inherit; color: var(--azione); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.accesso .sotto-modulo button:hover { text-decoration: underline; text-underline-offset: 2px; }
.accesso input, .accesso select, .accesso textarea { padding: 11px 13px; }

.velo {
  position: fixed; inset: 0; background: rgba(22, 23, 43, .32);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px; z-index: 50;
}
.modale {
  background: var(--paper); border-radius: 22px; padding: 24px 26px; width: 100%; max-width: 640px;
  max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow-alta); border: 1px solid var(--line);
}
.modale.larga { max-width: 900px; }
.modale h2 { font-size: 20px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 14px; }
/* La finestra prende il fuoco su di sé per il lettore di schermo: l'anello lo hanno i suoi controlli, non lei. */
.modale:focus { outline: none; }
.modale .piede { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
/* Dentro una finestra il testo «sotto» è sempre un aiuto: piccolo e grigio. */
.modale .sotto { color: var(--muted); font-size: 13px; }

.vuoto { text-align: center; color: var(--muted); padding: 30px 12px; font-size: 14px; }
.caricamento { color: var(--muted); font-size: 14px; padding: 12px 0; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.copiabile { display: flex; gap: 6px; align-items: center; }
.copiabile input { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

.elenco-piatto { list-style: none; }
.elenco-piatto li { padding: 11px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.elenco-piatto li:last-child { border-bottom: 0; }
.elenco-piatto .principale { font-size: 14px; font-weight: 550; }
.elenco-piatto .secondario { font-size: 12.5px; color: var(--muted); }
/* Un indirizzo lungo (host, email, link) va a capo dentro la riga: non allarga la pagina. */
.elenco-piatto li > b, .elenco-piatto li > span, .testata .sotto b { min-width: 0; overflow-wrap: anywhere; }
/* Il testo della riga si stringe e va a capo; i pulsanti accanto restano interi e,
   se non c'è posto, scendono sotto (26-10-2026: «apri» usciva dal riquadro di
   «Arrivano oggi» a 1000 px, spinto dall'etichetta «entrato verso le 15:28»). */
.elenco-piatto li { flex-wrap: wrap; }
.elenco-piatto li > div, .elenco-piatto li > form { min-width: 0; }
.elenco-piatto li > div:first-child { flex: 1 1 150px; }
.elenco-piatto li > .bottone, .elenco-piatto li > button, .elenco-piatto li > a.bottone { flex: 0 0 auto; margin-left: auto; }
.elenco-piatto .tag { white-space: normal; overflow-wrap: anywhere; }

/* ──────────────────────────────────────────────────────────────── telefono */

/* La riga in cima al contenuto, solo sul telefono: marchio, struttura, esci. */
.barra-mobile, .scelta-mobile { display: none; }

@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  /* In fondo allo schermo la barra è vetro smerigliato: il contenuto passa
     sotto e si intravede, come l'intestazione di Duebeam. */
  .sidebar {
    position: fixed; bottom: 0; top: auto; left: 0; right: 0;
    height: auto; min-height: 0; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    z-index: 40; border-right: 0; border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    padding-bottom: env(safe-area-inset-bottom);
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  :root[data-tema="scuro"] .sidebar { background: rgba(19, 21, 42, .88); }
  :root[data-tema="scuro"] .barra-mobile { background: rgba(15, 16, 32, .84); }
  .sidebar .marchio, .sidebar .piede, .sidebar nav a span.testo { display: none; }
  .sceltaStruttura { display: none; }
  .sidebar nav { display: flex; padding: 6px 4px; gap: 0; }
  /* Disegno sopra, parola sotto: l'icona da sola non basta a distinguere
     quindici voci, e sul telefono il nome per esteso non ci sta. */
  .sidebar nav a {
    flex: 0 0 auto; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 8px 5px; margin: 0; min-width: 58px; font-size: 10px; font-weight: 600; letter-spacing: .1px;
  }
  .sidebar nav a .breve { display: block; white-space: nowrap; }
  .sidebar nav a .glifo, .sidebar nav a .glifo svg { width: 21px; height: 21px; flex: none; }
  .sidebar nav a.attiva { background: var(--azione-soft); }
  .sidebar nav a .pallino { margin-left: 0; position: absolute; }
  .sidebar nav a { position: relative; }
  .sidebar nav a .pallino { top: 2px; right: 4px; }
  /* In fondo allo schermo le voci sono in fila e larghe un pollice: una
     sottosezione rientrata non esiste, diventerebbe una voce come le altre.
     Al loro posto ci sono le linguette in cima al contenuto, con il nome
     corto. */
  .sidebar nav a.sotto-voce { display: none; }
  .linguette a .testo { display: none; }
  .linguette a .breve { display: inline; }
  .linguette a { padding: 6px 13px; font-size: 13px; }

  .barra-mobile {
    display: flex; align-items: center; gap: 10px;
    margin: -16px -14px 16px; padding: 9px 14px;
    background: rgba(247, 247, 251, .82); color: var(--ink);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 30;
  }
  .barra-mobile .logo-testo { display: none; }
  .scelta-mobile { display: block; margin: 0 0 14px; }
  .scelta-mobile select {
    width: 100%;
    background: var(--paper); border: 1px solid var(--line-forte); color: var(--ink);
    border-radius: var(--pillola); padding: 7px 12px; font-size: 14px; font-weight: 600;
  }

  main { padding: 16px 14px calc(96px + env(safe-area-inset-bottom)); max-width: 100vw; overflow-x: hidden; }
  /* Sotto la barra in alto il tasto «Indietro» non deve attaccarsi al bordo. */
  .indietro { margin: 4px 0 12px; }
  .scheda { padding: 16px; border-radius: 16px; }
  .scorre { margin: 0 -16px; padding: 0 16px; }
  /* Le tabelle scorrono di lato: una data spezzata su tre righe non serve a
     niente, meglio una colonna in più da raggiungere col pollice. */
  .scorre td, .scorre th { white-space: nowrap; }
  .scorre td.testo { white-space: normal; min-width: 220px; }
  .barra-mobile + .banner-prova, .barra-mobile + .avviso { margin-top: 0; }
  .testata { margin-top: 4px; }
  .testata h1 { font-size: 25px; letter-spacing: -.8px; }
  .testata .azioni { width: 100%; }
  .testata .azioni .bottone { flex: 1 1 auto; justify-content: center; }
  .griglia.due, .griglia.tre { grid-template-columns: 1fr; }
  .griglia.quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .numero { padding: 13px 14px; border-radius: 16px; }
  .numero .valore { font-size: 23px; letter-spacing: -.7px; }
  .banner-prova { padding: 8px 14px; margin: 0 -14px 12px; }
  .avviso { font-size: 13.5px; }
  .avviso .bottone.piccolo, .avviso a.bottone.piccolo { margin-top: 4px; }
  .elenco-piatto li { flex-wrap: wrap; }
  .bottone { white-space: normal; text-align: center; }
  /* Sul telefono un'etichetta lunga — un errore del fornitore, per esempio —
     va a capo invece di spingere la scheda fuori dallo schermo. */
  .tag { white-space: normal; overflow-wrap: anywhere; }
  .pin { grid-template-columns: 1fr; }
  .velo { padding: 10px; align-items: end; }
  .modale { padding: 18px 16px; max-height: calc(100vh - 20px); border-radius: 20px; }
  .modale .piede { flex-wrap: wrap; }
  .modale .piede .bottone { flex: 1 1 auto; justify-content: center; }
  .riga > .campo { flex-basis: 100%; }
  .riga > .campo[style*="flex:0"] { flex-basis: 100% !important; }
  /* Sotto i 16 pixel iOS ingrandisce la pagina a ogni campo che prende il fuoco. */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
  input[type=date], input[type=time], input[type=url], input[type=search], select, textarea { font-size: 16px; }
  .accesso { padding: 16px; }
  .accesso .riquadro { padding: 24px 20px; }
  .mesi { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .testata .azioni, .banner-prova { display: none; }
  #app { display: block; }
  .scheda, .numero { break-inside: avoid; box-shadow: none; }
}

/* ─────────────────────────────── Via Roselle dentro Sesamoh (07-09-2026) */

/* I codici sul Keypad: una scheda per PIN, come nella vecchia pagina Nuki. */
.pin-list { display: flex; flex-direction: column; gap: 10px; }
.pin {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--paper);
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start;
}
.pin.spento { opacity: .55; }
.pin .tag { margin-left: 6px; }
.pin .codice { font-size: 22px; font-weight: 800; letter-spacing: .14em; color: var(--ink); }

/* Un prezzo diretto scritto a mano si distingue: sul sito vince lui. */
.giorno-tariffa.manuale .p { color: var(--blue); font-weight: 700; }
.giorno-tariffa .p small { font-size: 10px; color: var(--muted); font-weight: 500; }

/* I giorni speciali che si ripetono: la stellina e un bordo caldo. */
.giorno-tariffa.speciale { border-color: rgba(180, 83, 9, .45); background: var(--orange-soft); }
.giorno-tariffa .stella { color: var(--orange); font-size: 9px; margin-left: 2px; }
:root[data-tema="scuro"] .giorno-tariffa.speciale { background: rgba(180, 83, 9, .16); }

/* La barra dei giorni scelti: resta in fondo allo schermo finché ci sono giorni. */
.barra-giorni {
  position: sticky; bottom: 12px; z-index: 20; margin-top: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: var(--paper); border: 1px solid var(--line-forte); border-radius: var(--radius);
  box-shadow: var(--shadow-alta); padding: 12px 16px;
}
.barra-giorni .quali { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; min-width: 0; }
.barra-giorni .quali .sotto { margin: 0; }
.barra-giorni .prezzo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.barra-giorni .prezzo select, .barra-giorni .prezzo input { width: auto; min-width: 0; margin: 0; }
.barra-giorni .prezzo input { width: 110px; }
.barra-giorni .rapidi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
.barra-giorni .separa { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
button.link { background: none; border: 0; padding: 0; color: var(--azione); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }

/* La scheda dei giorni speciali. */
.speciale-riga { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.speciale-riga:first-of-type { border-top: 0; }
.speciale-riga.spento { opacity: .6; }
.speciale-riga .sotto { margin: 2px 0 0; }
.speciale-riga .azioni-riga { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex-shrink: 0; }
.vuoto-piccolo { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* La modale del giorno speciale: l'effetto si sceglie da quattro schede. */
.modulo-speciale .effetti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scelta-effetto { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-controllo); padding: 10px; cursor: pointer; }
.scelta-effetto:has(input:checked) { border-color: var(--azione); box-shadow: var(--anello); }
.scelta-effetto input { width: auto; margin-top: 3px; }
.scelta-effetto span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.scelta-effetto small { color: var(--muted); font-size: 12px; }
.modulo-speciale:has(input[name="effect"][value="chiuso"]:checked) .solo-prezzo { display: none; }
.modulo-speciale .durata { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; }
.modulo-speciale .durata input.anni { width: 72px; margin: 0; }
.modulo-speciale .durata input[type="radio"] { width: auto; }

.spazio-barra { height: 0; }
@media (max-width: 720px) {
  /* Sul telefono la barra sta ferma sopra la navigazione in basso, e le scorciatoie scorrono di lato. */
  .barra-giorni {
    position: fixed; left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    margin: 0; padding: 10px 12px; gap: 8px;
  }
  .spazio-barra { height: 170px; }
  .barra-giorni .quali { font-size: 13px; }
  .barra-giorni .prezzo { width: 100%; flex-wrap: nowrap; }
  .barra-giorni .prezzo select { flex: 1 1 auto; }
  .barra-giorni .prezzo input { flex: 0 0 88px; width: 88px; }
  .barra-giorni .rapidi { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .barra-giorni .rapidi .bottone { flex-shrink: 0; }
  .barra-giorni .separa { display: none; }
  .speciale-riga { flex-direction: column; }
  .speciale-riga .azioni-riga { justify-content: flex-start; }
  .modulo-speciale .effetti { grid-template-columns: 1fr; }
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--stble-carta); color: var(--azione-scura); padding: 1px 6px; border-radius: 6px; }

/* I passi della configurazione di una struttura nuova: dove sono e quanti ne
   mancano. Una riga sola, che va a capo sul telefono invece di stringersi. */
.passi-configura { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.passi-configura span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; }
.passi-configura span i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--line); color: var(--muted); font-style: normal; font-size: 11px; font-weight: 600; }
.passi-configura span.fatto i { background: var(--green); color: var(--paper); }
.passi-configura span.ora { color: var(--ink); font-weight: 600; }
.passi-configura span.ora { border-color: rgba(79, 70, 229, .4); }
.passi-configura span.ora i { background: var(--azione); color: var(--paper); }

/* ── I documenti degli ospiti ──
   Le anteprime stanno in fila e si aprono a grandezza vera con un clic. Il
   filo scuro serve perché quasi tutti i documenti sono chiari sul bordo, e
   senza cornice si confondono con lo sfondo della scheda. */
.documenti-foto { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.documento-foto {
  display: block;
  max-width: 260px;
  max-height: 170px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
  object-fit: contain;
}
@media (max-width: 640px) {
  .documento-foto { max-width: 100%; }
}

/* ───────────────────────────────────────────────── confronto prezzi */

/* Due barre per mese: la tua (indaco) e la mediana della zona (verde acqua), con la
   fascia fra il 25° e il 75° percentile sopra la barra della zona. */
.confronto-barre { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 14px; }
.confronto-barre .mese { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.confronto-barre .barre { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: calc(100% - 16px); }
.confronto-barre .barra { flex: 1 1 0; border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.confronto-barre .barra.mia { background: var(--azione); }
.confronto-barre .barra.zona { background: var(--teal); }
.confronto-barre .barra.zona .fascia { position: absolute; left: -1px; right: -1px; background: rgba(20, 184, 166, .18); border-top: 1px dashed var(--teal); border-bottom: 1px dashed var(--teal); pointer-events: none; }
.confronto-barre .etichetta { font-size: 10px; color: var(--muted); margin-top: 3px; text-transform: capitalize; }
.confronto-barre .mese:hover .barra.mia { background: var(--azione-scura); }
.legenda { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.legenda.mia { background: var(--azione); }
.legenda.zona { background: var(--teal); }
.secondario td, tr.secondario td { color: var(--muted); }
@media (max-width: 720px) { .confronto-barre { height: 90px; gap: 3px; } .confronto-barre .etichetta { font-size: 8px; } }

/* Le batterie: una pila orizzontale con la tacca della soglia di avviso. La
   stima è a righe, perché non è una misura e non deve sembrarlo. */
.pila { position: relative; height: 10px; border-radius: 999px; background: #efeff6; border: 1px solid var(--line); overflow: hidden; margin-top: 6px; }
.pila .carica { height: 100%; border-radius: 999px; background: var(--green); transition: width .3s; }
.pila.bassa .carica { background: var(--orange); }
.pila.critica .carica { background: var(--red); }
.pila.ignota .carica { background: var(--muted); }
.pila.stimata .carica { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); }
.pila.senza-numero .carica { opacity: .35; }
.pila .tacca { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--ink); opacity: .45; }
.numero-pila { font-size: 20px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.soglia-batteria { margin: 10px 0 4px; }
.soglia-batteria .campo { max-width: 220px; }

/* ── social: le bozze con la loro foto, l'archivio a griglia */
.titoletto { font-size: 13px; font-weight: 700; color: var(--muted); margin: 20px 0 10px; }
.social-titolo { font-size: 15px; font-weight: 750; margin: 0; }
.social-bozza { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }
.social-foto { width: 180px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: var(--canvas); }
.social-foto.vuota { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12.5px; }
.social-archivio { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.social-scatto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); display: block; }
@media (max-width: 640px) {
  .social-bozza { grid-template-columns: 1fr; }
  .social-foto { width: 100%; max-width: 170px; }
}

/* ── robot di pulizia: la scheda del robot, i programmi, i passi */
.robot-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.robot-stato { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-weight: 600; }
.robot-batteria { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.robot-batteria .pila { width: 70px; margin-top: 0; }
.robot-batteria .carica { display: block; }
.programma { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 12px; background: var(--paper); }
.programma.spento { opacity: .6; }
.passi-programma { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.passi-programma li {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  background: var(--azione-soft); color: var(--azione-scura); border-radius: var(--pillola); padding: 4px 12px 4px 4px;
}
.passi-programma li i {
  font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--azione); color: var(--on-azione); font-size: 11px;
}
.passi-programma li + li::before { content: "→"; color: var(--muted); margin: 0 4px 0 -2px; order: -1; }
.passo-modulo {
  display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--canvas);
}
.passo-numero {
  flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin-top: 22px;
  background: var(--azione); color: var(--on-azione); font-weight: 700; font-size: 13px;
}
.passo-modulo > .bottone { margin-top: 22px; }
.marca-robot { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--paper); }
.robot-scheda .secondario, .programma .secondario, .marca-robot .secondario, td .secondario { font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) {
  .passo-modulo { flex-wrap: wrap; }
  .passo-numero { margin-top: 0; }
  .passo-modulo > .bottone { margin-top: 0; }
}

/* ── collegamenti: una scheda per fornitore */
.fornitore { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--paper); }
.fornitore.spento { background: var(--canvas); }
.fornitore .secondario { font-size: 13px; color: var(--muted); margin-top: 4px; }
.fornitore .riga > .campo { margin-bottom: 0; }

/* ── menu a gruppi e scelta del tema (26-09-2026) */
.gruppo-menu {
  display: flex; align-items: center; justify-content: space-between; width: calc(100% - 12px);
  margin: 12px 6px 2px; padding: 4px 5px; border: 0; border-radius: var(--radius-controllo); background: none;
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-align: left;
  /* Più scuri e pesanti delle voci (08-10-2026): si leggono come titoli, non come voci spente. */
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 78%, var(--muted)); cursor: pointer;
}
.gruppo-menu:hover { background: var(--canvas); color: var(--ink); }
.gruppo-menu .freccia-gruppo { font-size: 12px; transition: transform .15s; }
.gruppo-menu.chiuso .freccia-gruppo { transform: rotate(-90deg); }
/* Le voci di un gruppo chiuso: non ci sono, finché non si riapre. Sul
   telefono i gruppi non esistono (c'è il menu a tutto schermo). */
@media (min-width: 861px) { .sidebar nav a.nel-gruppo-chiuso { display: none; } }
.scelta-tema { display: flex; gap: 2px; padding: 3px; margin-bottom: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--pillola); }
.sidebar .piede .scelta-tema button {
  flex: 1; border: 0; padding: 4px 6px; font-size: 12px; font-weight: 600; color: var(--muted); background: none;
}
.sidebar .piede .scelta-tema button:hover { color: var(--ink); }
.sidebar .piede .scelta-tema button.attiva { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.bottone-tema { padding: 5px 9px; gap: 2px; }
.bottone-tema svg { width: 17px; height: 17px; }
.bottone-tema i { display: inline-flex; }
.bottone-tema .luna, :root[data-tema="scuro"] .bottone-tema .sole { display: none; }
:root[data-tema="scuro"] .bottone-tema .luna { display: inline-flex; }
.bottone-tema span { font-size: 10px; font-weight: 800; }
@media (max-width: 860px) { .gruppo-menu { display: none; } }

/* ── Panoramica: la scheda di oggi, i numeri, la settimana, i canali */
.come-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--azione); cursor: pointer; }
.come-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.scheda.oggi { padding-bottom: 12px; }
.testa-oggi { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.testa-oggi h2 { font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.testa-oggi .secondario { font-size: 13px; color: var(--muted); }
.colonne-oggi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.colonna-oggi { background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 4px; min-width: 0; }
.testa-colonna { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 650; color: var(--muted); }
.testa-colonna b { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--ink); font-variant-numeric: tabular-nums; }
.colonna-oggi .nessuno { font-size: 13.5px; color: var(--muted); padding: 10px 0 12px; line-height: 1.55; }
.colonna-oggi .elenco-piatto li { padding: 10px 0; }
.elenco-piatto .orario { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; align-items: center; }
.elenco-piatto .orario .secondario { font-size: 12px; }
.barretta { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; }
.barretta i { display: block; height: 100%; border-radius: 999px; background: var(--azione); }
.da-fare li { align-items: center; }
.da-fare .principale { font-weight: 450; font-size: 13.5px; }
.da-fare .principale b { font-weight: 650; }
.punto { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; margin-top: 1px; background: var(--muted); }
.punto.rosso { background: var(--red); }
.punto.arancio { background: var(--orange); }
.punto.blu { background: var(--azione); }
.punto.verde { background: var(--green); }
.punto.viola { background: var(--purple); }
.agenda li { justify-content: flex-start; gap: 14px; align-items: center; }
/* «Ha bisogno di te» (04-10-2026): sotto «Chi va e chi viene», le notifiche
   e quello che aspetta il gestore, poi le scadenze dalla più vicina. */
.scheda-bisogno .testa-oggi { margin-bottom: 2px; }
.scheda-bisogno > .sotto { color: var(--muted); font-size: 13.5px; margin-bottom: 12px; }
.blocco-bisogno + .blocco-bisogno { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.testa-blocco { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.bisogno li { align-items: flex-start; }
.bisogno .punto { margin-top: 6px; }
.bisogno li.da-leggere .principale b { color: var(--ink); }
.corpo-bisogno { flex: 1; min-width: 0; }
.corpo-bisogno .secondario { margin-top: 2px; }
.fatta-bisogno { margin: 8px 0 2px; }
.gesti-bisogno { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; max-width: 46%; }
@media (max-width: 640px) {
  .bisogno li { flex-wrap: wrap; }
  .gesti-bisogno { max-width: none; flex-basis: 100%; justify-content: flex-start; padding-left: 19px; }
}
.richieste-aperte { list-style: none; margin: 10px 0 0; padding: 0; }
.richiesta-aperta { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.richiesta-aperta:first-child { border-top: 0; padding-top: 0; }
.richiesta-aperta:last-child { padding-bottom: 0; }
.testa-richiesta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.messaggio-ospite { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--muted); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.gesti-richiesta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.giorno-agenda { flex: 0 0 52px; text-align: center; line-height: 1.15; }
/* La colonna della data resta stretta e i movimenti partono subito accanto
   (27-10-2026: la regola «.elenco-piatto li > div:first-child» del 26-10 la
   allargava, la data finiva al centro e i nomi in fondo a destra). */
.elenco-piatto li > div.giorno-agenda { flex: 0 0 52px; }
.agenda li > .movimenti { flex: 1 1 0; }
.giorno-agenda b { display: block; font-size: 14px; font-weight: 750; text-transform: capitalize; }
.giorno-agenda span { font-size: 11.5px; color: var(--muted); }
.movimenti { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.movimento {
  border: 1px solid var(--line-forte); background: var(--paper); color: var(--ink); cursor: pointer;
  border-radius: var(--pillola); padding: 3px 11px; font-size: 13px; font-weight: 600; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.movimento span { font-weight: 450; color: var(--muted); font-size: 12px; }
.movimento.entra { border-color: rgba(22, 128, 60, .35); }
.movimento.esce { border-color: rgba(180, 83, 9, .35); }
.movimento:hover { border-color: var(--azione); }
.freccia.entra { color: var(--green); font-weight: 800; }
.freccia.esce { color: var(--orange); font-weight: 800; }
/* «Chi va e chi viene» (02-10-2026): in cima alla Panoramica, le frecce grandi
   e colorate — arancio chi parte, verde chi arriva — prima di tutto il resto. */
.movimenti-oggi .colonna-oggi { border-width: 1.5px; }
.movimenti-oggi .mov-esce { border-color: rgba(180, 83, 9, .45); background: var(--orange-soft); }
.movimenti-oggi .mov-entra { border-color: rgba(22, 128, 60, .45); background: var(--green-soft); }
.movimenti-oggi .testa-colonna { align-items: center; gap: 10px; justify-content: flex-start; font-size: 14.5px; color: var(--ink); }
.movimenti-oggi .testa-colonna b { margin-left: auto; }
.freccia-grande {
  display: inline-grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px;
  font-size: 24px; font-weight: 800; line-height: 1; color: #fff; background: var(--muted);
}
.freccia-grande.esce { background: var(--orange); }
.freccia-grande.entra { background: var(--green); }
.freccia-grande.casa { background: var(--azione); font-size: 20px; }
:root[data-tema="scuro"] .freccia-grande.entra { color: #06210f; }
.movimenti-oggi .colonna-oggi .principale { font-size: 15px; font-weight: 700; }
.mov-prossimi { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mov-prossimi-testa { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 4px; }
.mov-prossimi-testa .secondario { font-size: 12.5px; color: var(--muted); }
.movimento i { font-style: normal; font-weight: 800; margin-right: 2px; }
.movimento.entra { background: var(--green-soft); }
.movimento.esce { background: var(--orange-soft); }
.movimento.entra i { color: var(--green); }
.movimento.esce i { color: var(--orange); }
.mov-giorno .movimento { font-size: 13.5px; padding: 4px 12px; }
.movimento.casa { border-color: color-mix(in srgb, var(--azione) 35%, transparent); background: color-mix(in srgb, var(--azione) 8%, var(--paper)); }
.movimento.casa i { color: var(--azione); }
.mov-fermi { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.mov-fermi .movimento { font-size: 13.5px; padding: 4px 12px; }
.canali-mese { display: flex; flex-direction: column; gap: 10px; }
.canale-riga { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.canale-barra { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.canale-barra i { display: block; height: 100%; border-radius: 999px; background: var(--muted); }
.canale-barra i.rosso { background: #e8515f; }
.canale-barra i.blu { background: #1c4694; }
.canale-barra i.verde { background: var(--green); }
.canale-barra i.viola { background: var(--purple); }
:root[data-tema="scuro"] .canale-barra i.blu { background: #5b7fd1; }
.canale-num { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Statistiche: l'istogramma dei mesi, più alto, col numero sopra la barra. */
.istogramma.stat { height: 170px; gap: 8px; }
.istogramma.stat .giorno { font-size: 11px; }
.istogramma.stat .colonna .giorno:first-child { margin: 0 0 3px; font-weight: 650; color: var(--ink); }
.istogramma.stat .barra.futuro { opacity: .35; }

@media (max-width: 980px) {
  .colonne-oggi { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 860px) {
  .canale-riga { grid-template-columns: 90px minmax(0, 1fr); }
  .canale-num { grid-column: 2; }
  .istogramma.stat { gap: 3px; }
  .istogramma.stat .colonna .giorno:first-child { font-size: 9px; }
}

/* ── collega un dispositivo, guidato (26-09-2026) */
.marche-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.marca-scheda {
  display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line-forte); border-radius: 14px; padding: 14px 16px;
  color: var(--ink); font: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s;
}
.marca-scheda[hidden] { display: none; }
.marche-cerca { width: 100%; max-width: 420px; margin-top: 12px; }
.marca-scheda:hover { border-color: var(--azione); box-shadow: var(--anello); text-decoration: none; }
.marca-scheda b { font-size: 15px; font-weight: 750; letter-spacing: -.2px; }
.marca-scheda span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.marca-scheda i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--azione); margin-top: 2px; }
.passi-guida { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.passi-guida li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.passi-guida li i {
  flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
  background: var(--azione); color: var(--on-azione); font-style: normal; font-weight: 700; font-size: 12px;
}
.passi-guida a { text-decoration: underline; text-underline-offset: 2px; }
.altre-marche > summary { cursor: pointer; font-size: 14px; font-weight: 650; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.altre-marche > summary::-webkit-details-marker { display: none; }
.altre-marche > summary::before { content: "▸"; color: var(--muted); font-size: 12px; }
.altre-marche[open] > summary::before { content: "▾"; }
.altre-marche > summary h2 { font-size: 16px; font-weight: 750; letter-spacing: -.25px; }
.modale .altre-marche { margin-top: 14px; }

/* I primi passi in Panoramica: la lista di partenza. */
.passi-lista li { align-items: center; }
.passi-lista .spunta {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-forte);
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff;
}
.passi-lista li.fatto .spunta { background: var(--green); border-color: var(--green); }
.passi-lista li.fatto .principale { color: var(--muted); text-decoration: line-through; }
.primi-passi { border-color: rgba(79, 70, 229, .35); }

/* ──────────────────────────────────────────────────────── la campanella */

/* In alto a destra, sempre nello stesso posto: è la prima cosa che si guarda
   entrando, «c'è qualcosa che mi aspetta?». Sul computer galleggia fissa
   sopra il contenuto, sul telefono sta nella barra in cima; il numero rosso
   sopra è quello delle non lette. */
.campanella {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-forte);
  box-shadow: var(--shadow); transition: color .12s, border-color .12s, box-shadow .12s;
}
.campanella svg { width: 21px; height: 21px; display: block; }
.campanella:hover { color: var(--azione); border-color: rgba(79, 70, 229, .5); }
.campanella:focus-visible { outline: none; box-shadow: var(--anello); }
.campanella.con-novita { color: var(--azione); border-color: rgba(79, 70, 229, .45); }
.campanella .pallino {
  position: absolute; top: -6px; right: -7px; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: var(--pillola); background: var(--red); color: #fff;
  font-size: 11.5px; font-weight: 800; line-height: 21px; text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
/* Il piano e la campanella insieme, nell'angolo in alto a destra (08-10-2026). */
.angolo-alto { position: fixed; top: 22px; right: 26px; z-index: 36; display: flex; align-items: center; gap: 10px; }
.angolo-alto .pillola-piano {
  height: 36px; padding: 0 15px; font-size: 13px; font-weight: 750; white-space: nowrap;
  box-shadow: var(--shadow); border-color: color-mix(in srgb, currentColor 22%, transparent);
}
/* La testata della sezione lascia libera la colonna della campanella, così
   «Nuova prenotazione» non ci finisce sotto. Solo quella in cima: le testate
   dentro le schede non hanno niente sopra. */
main > .testata { padding-right: var(--spazio-angolo, 64px); }
.barra-mobile .campanella { display: none; }

/* Il pannello: una scheda che scende dalla campanella. */
.pannello-notifiche {
  position: fixed; top: 74px; right: 26px; z-index: 46;
  width: min(470px, calc(100vw - 32px)); max-height: min(74vh, 720px); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-alta); padding: 14px 18px 8px;
}
.pannello-notifiche .testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pannello-notifiche h2 { font-size: 17px; font-weight: 800; letter-spacing: -.4px; display: flex; align-items: center; gap: 8px; }
.pannello-notifiche .conteggio { background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; border-radius: var(--pillola); padding: 1px 8px; line-height: 1.6; }
.pannello-notifiche .testa .gesti { display: flex; align-items: center; gap: 6px; }
.pannello-notifiche .chiudi { border: 0; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.pannello-notifiche .chiudi:hover { color: var(--ink); background: var(--canvas); }
.pannello-notifiche .sotto { color: var(--muted); font-size: 12.5px; margin: 4px 0 6px; min-height: 0; }
.pannello-notifiche .sotto:empty { display: none; }
.pannello-notifiche .nessuno { color: var(--muted); font-size: 14px; padding: 22px 0 18px; text-align: center; }
.pannello-notifiche .avviso { margin: 8px 0; }
.elenco-notifiche { list-style: none; margin-top: 4px; }
.elenco-notifiche li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 10px; margin: 0 -10px; border-bottom: 1px solid var(--line); }
.elenco-notifiche li:last-child { border-bottom: 0; }
/* Le non lette hanno il fondo tinto di indaco e il titolo pieno; le lette si
   spengono in grigio, ma restano: si può sempre rimetterle da leggere. */
.elenco-notifiche li.da-leggere { background: color-mix(in srgb, var(--azione) 7%, transparent); border-radius: 12px; border-bottom-color: transparent; margin-bottom: 2px; }
.elenco-notifiche li.letta .titolo { font-weight: 500; color: var(--muted); }
/* Le notifiche da non perdere (27-10-2026: la ricevuta della Questura). */
.elenco-notifiche li.importante.da-leggere { background: color-mix(in srgb, var(--red) 9%, transparent); }
.elenco-notifiche .gesti a.bottone { white-space: nowrap; }
.elenco-notifiche .pallino-notifica { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.elenco-notifiche .pallino-notifica.rosso { background: var(--red); }
.elenco-notifiche .pallino-notifica.arancio { background: #e08a1e; }
.elenco-notifiche .pallino-notifica.blu { background: var(--blue); }
.elenco-notifiche .pallino-notifica.verde { background: var(--green); }
.elenco-notifiche .pallino-notifica.viola { background: var(--purple); }
.elenco-notifiche .corpo { flex: 1; min-width: 0; }
.elenco-notifiche .titolo { font-size: 14px; font-weight: 650; line-height: 1.35; }
.elenco-notifiche .testo { font-size: 13px; margin-top: 2px; line-height: 1.4; }
.elenco-notifiche li.letta .testo { color: var(--muted); }
.elenco-notifiche .meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.elenco-notifiche .gesti { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.elenco-notifiche .gesti .come-link { font-size: 12px; white-space: nowrap; }
/* Più notifiche dello stesso genere: un rigo che si apre a tendina (03-11-2026). */
.elenco-notifiche li.gruppo-notifiche { display: block; }
.gruppo-notifiche details { width: 100%; }
.gruppo-notifiche summary { list-style: none; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.gruppo-notifiche summary::-webkit-details-marker { display: none; }
.gruppo-notifiche summary:hover .titolo { color: var(--azione); }
.gruppo-notifiche .conta { display: inline-block; font-size: 12px; font-weight: 700; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: var(--pillola); background: var(--canvas); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; vertical-align: 1px; margin-left: 2px; }
.gruppo-notifiche .freccia-gruppo { flex: 0 0 auto; font-size: 13px; color: var(--muted); margin-top: 2px; transition: transform .15s; }
.gruppo-notifiche details:not([open]) .freccia-gruppo { transform: rotate(-90deg); }
.gruppo-notifiche .gesti-gruppo { display: flex; justify-content: flex-end; margin: 6px 0 2px; }
.gruppo-notifiche .gesti-gruppo .come-link { font-size: 12.5px; font-weight: 700; }
.elenco-notifiche.sotto-gruppo { margin: 4px 0 0 19px; }
.elenco-notifiche.sotto-gruppo li { margin: 0; padding: 9px 8px; }
.elenco-notifiche.sotto-gruppo li.da-leggere { background: color-mix(in srgb, var(--azione) 5%, transparent); }

@media (max-width: 860px) {
  .angolo-alto { display: none; }
  /* Sul telefono il piano sta nella barra in cima, piccolo; sotto i 430 px non
     c'è posto, e resta nel «Menu». */
  .barra-mobile .pillola-piano { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; padding: 3px 8px; }
  .barra-mobile .campanella { display: inline-flex; width: 38px; height: 38px; box-shadow: none; flex: 0 0 auto; }
  .barra-mobile .campanella svg { width: 19px; height: 19px; }
  main > .testata { padding-right: 0; }
  .pannello-notifiche { top: 62px; left: 10px; right: 10px; width: auto; max-height: 76vh; padding: 12px 14px 6px; }
  .elenco-notifiche li { flex-wrap: wrap; }
  .elenco-notifiche .gesti { flex-direction: row; width: 100%; justify-content: flex-end; padding-left: 19px; }
}

/* La scheda della prenotazione (28-09-2026): documenti → codice → messaggi,
   tre passi in fila, ognuno con la sua riga di stato e l'azione accanto. */
.percorso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.percorso .passo { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 13.5px; }
.percorso .passo b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.percorso .passo.fatto { border-color: #bfe3cf; background: #f1faf5; }
.percorso .passo.attesa { border-color: #f3d19b; background: #fff8ec; }
.percorso .passo .bottone { margin-top: 4px; }
:root[data-tema="scuro"] .percorso .passo.fatto { border-color: rgba(52, 168, 110, .4); background: rgba(52, 168, 110, .1); }
:root[data-tema="scuro"] .percorso .passo.attesa { border-color: rgba(230, 160, 60, .4); background: rgba(230, 160, 60, .1); }
@media (max-width: 720px) { .percorso { grid-template-columns: 1fr; } }

/* ── Panoramica: pulizie e robot (28-09-2026) ──
 *
 * Un widget per robot e uno per le pulizie a mano, sul fondo della scheda
 * come le colonne di «Oggi». Le quattro tessere sono pulsanti: dicono il
 * numero, e premute aprono il dettaglio sotto. Il puntino dello stato pulsa
 * solo quando il robot lavora: un'interfaccia che si muove sempre non dice più
 * niente quando si muove per davvero.
 */
.riassunto-widget { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.riassunto-widget a { color: var(--muted); text-decoration: none; }
.riassunto-widget a:hover { color: var(--azione); text-decoration: underline; }
.griglia-widget { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; align-items: start; }
.widget {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.widget.al-lavoro { border-color: color-mix(in srgb, var(--azione) 40%, var(--line)); }
.widget.vuoto-widget { border-style: dashed; }
.widget-testa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.widget-icona {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); color: var(--muted);
}
.widget-icona svg { width: 21px; height: 21px; }
.widget-icona.blu { color: var(--azione); background: var(--azione-soft); border-color: transparent; }
.widget-icona.verde { color: var(--green); background: var(--green-soft); border-color: transparent; }
.widget-icona.arancio { color: var(--orange); background: var(--orange-soft); border-color: transparent; }
.widget-icona.rosso { color: var(--red); background: var(--red-soft); border-color: transparent; }
.widget-titolo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.widget-titolo b { font-size: 15px; font-weight: 750; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-titolo span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stato-vivo {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650;
  padding: 3px 9px; border-radius: var(--pillola); background: var(--paper); border: 1px solid var(--line); color: var(--muted);
}
.stato-vivo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stato-vivo.blu { color: var(--azione-scura); }
.stato-vivo.verde { color: var(--green); }
.stato-vivo.arancio { color: var(--orange); }
.stato-vivo.rosso { color: var(--red); }
.widget.al-lavoro .stato-vivo i { animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .widget.al-lavoro .stato-vivo i { animation: none; } }
.widget-ora { font-size: 13.5px; line-height: 1.45; min-width: 0; }
.widget-ora .secondario { font-size: 12.5px; color: var(--muted); }
.widget-ora .barretta { margin: 6px 0 5px; }
.barretta i { transition: width .6s ease; }
/* Il robot non dice la percentuale: la parte fatta resta ferma, il resto scorre. */
.barretta.in-attesa {
  background: linear-gradient(90deg, var(--line) 0%, color-mix(in srgb, var(--azione) 22%, var(--line)) 50%, var(--line) 100%);
  background-size: 200% 100%; animation: barretta-attesa 1.6s linear infinite;
}
@keyframes barretta-attesa { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .barretta.in-attesa { animation: none; } .barretta i { transition: none; } }
.riga-avanzamento { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.riga-avanzamento > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-avanzamento .pct { font-variant-numeric: tabular-nums; color: var(--azione); }
.avanzamento-giro { margin-top: 6px; display: grid; gap: 4px; }
.avanzamento-giro .barretta { margin-top: 0; }
.widget-tessere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tessera {
  appearance: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px;
  display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tessera:hover { border-color: var(--line-forte); transform: translateY(-1px); }
.tessera:focus-visible { outline: none; box-shadow: var(--anello); }
.tessera.aperta { border-color: var(--azione); box-shadow: var(--anello); }
.tessera.allarme .t-valore { color: var(--orange); }
.t-etichetta { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-valore {
  font-size: 14px; font-weight: 750; letter-spacing: -.2px; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.anello-batteria { width: 18px; height: 18px; flex: 0 0 18px; transform: rotate(-90deg); }
.anello-batteria.grande { width: 58px; height: 58px; flex-basis: 58px; }
.anello-batteria circle { fill: none; stroke-width: 4; }
.anello-batteria .fondo { stroke: var(--line); }
.anello-batteria .arco { stroke-linecap: round; stroke: var(--green); }
.anello-batteria.bassa .arco { stroke: var(--orange); }
.anello-batteria.critica .arco { stroke: var(--red); }
.anello-batteria.ignoto .arco { stroke: transparent; }
.widget-dettaglio {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 13px;
}
.widget-dettaglio .secondario { color: var(--muted); font-size: 12.5px; }
.widget-dettaglio .avviso { margin: 4px 0 0; }
.widget-dettaglio .elenco-piatto li { padding: 8px 0; gap: 8px; }
.riga-dettaglio { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.riga-dettaglio span { color: var(--muted); flex: 0 0 auto; }
.riga-dettaglio b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.riga-tag { display: flex; gap: 6px; flex-wrap: wrap; }
.batteria-grande { display: flex; align-items: center; gap: 14px; }
.widget-azioni { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
:root[data-tema="scuro"] .stato-vivo.blu { color: #c7c4ff; }
@media (max-width: 520px) {
  .griglia-widget { grid-template-columns: 1fr; }
}

/* ── Utenti e permessi (28-09-2026): titolare, gestore, pulizie.
   Una sezione non abilitata resta nel menu in grigio scuro con il lucchetto:
   si vede che esiste, e che non si apre. */
.sidebar nav a.bloccata {
  background: #34364a; color: #a3a5b8; cursor: not-allowed; opacity: .9;
}
.sidebar nav a.bloccata:hover { background: #34364a; color: #a3a5b8; }
.sidebar nav a.bloccata .glifo { opacity: .6; }
.sidebar nav a .lucchetto { margin-left: auto; width: 14px; height: 14px; flex: none; }
.sidebar nav a .lucchetto svg { width: 14px; height: 14px; display: block; }
.sidebar nav a .solo-vista {
  margin-left: auto; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--line-forte); border-radius: var(--pillola); padding: 0 6px;
}
:root[data-tema="scuro"] .sidebar nav a.bloccata,
:root[data-tema="scuro"] .sidebar nav a.bloccata:hover { background: #1c1d2b; color: #6f7290; }
@media (max-width: 860px) {
  .sidebar nav a .lucchetto { position: absolute; top: 3px; right: 5px; width: 11px; height: 11px; }
  .sidebar nav a .lucchetto svg { width: 11px; height: 11px; }
  .sidebar nav a .solo-vista { display: none; }
}

.sezione-bloccata { max-width: 520px; margin: 60px auto; text-align: center; }
.sezione-bloccata .lucchetto-grande {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px;
  background: #34364a; color: #d6d7e3; display: grid; place-items: center;
}
.sezione-bloccata .lucchetto-grande svg { width: 30px; height: 30px; }
.sezione-bloccata p { color: var(--muted); margin: 8px 0 20px; }
.avviso.sola-lettura b { display: flex; align-items: center; gap: 6px; }
.avviso.sola-lettura b svg { width: 15px; height: 15px; }

/* La sezione Utenti e permessi. */
.testa-membro { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.testa-membro h2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.testa-membro .azioni { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Il ruolo di un invito in sospeso, cambiabile al volo. */
.ruolo-al-volo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ruolo-al-volo select { width: auto; padding: 4px 8px; font-size: 13px; }
.membro details { margin-top: 12px; }
.membro summary { cursor: pointer; font-weight: 650; color: var(--azione); margin-bottom: 10px; }
.scelta-strutture { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0; }
.griglia-permessi td:first-child { font-weight: 550; }
.griglia-permessi input[type="radio"] { width: 18px; height: 18px; accent-color: var(--azione); }
.griglia-permessi input[type="radio"]:disabled { opacity: .25; }
.azioni-riga { display: flex; gap: 6px; }

/* Il metodo di prezzo (Tariffe): tre carte da scegliere, spente senza l'API. */
.metodi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.metodo-prezzo { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-controllo); padding: 12px; cursor: pointer; }
.metodo-prezzo:has(input:checked) { border-color: var(--azione); box-shadow: var(--anello); }
.metodo-prezzo.spento { cursor: default; background: var(--canvas); }
.metodo-prezzo .testa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.metodo-prezzo .testa input { width: auto; margin: 0; }
.metodo-prezzo .quale { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.metodo-prezzo .domanda { font-size: 13px; color: var(--muted); font-style: italic; }
.metodo-prezzo b { font-size: 15px; }
.metodo-prezzo small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.metodo-prezzo .effetto { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 600; color: var(--azione-scura); }
.metodo-piede { align-items: flex-end; }
.metodo-anteprima { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0 4px; font-size: 15px; }
@media (max-width: 860px) { .metodi { grid-template-columns: 1fr; } }

/* ───────── La vista mappa di un robot (28-09-2026): a tutto schermo, fuori da #app. */
body.con-vista-mappa { overflow: hidden; }
.vista-mappa {
  position: fixed; inset: 0; z-index: 90; background: var(--canvas); color: var(--ink);
  display: flex; flex-direction: column; animation: vm-entra .18s ease-out;
}
@keyframes vm-entra { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vista-mappa { animation: none; } }
.vm-testa {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.vm-titolo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vm-titolo b { font-size: 16px; font-weight: 750; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-titolo span { font-size: 12.5px; color: var(--muted); }
.vm-stato.blu i { animation: pulsa 1.6s ease-in-out infinite; }
.vm-corpo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.vm-palco { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.vm-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vm-immagine { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; image-rendering: pixelated; }
.vm-attesa { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.vm-attesa[hidden] { display: none; }
.vm-legenda { background: var(--paper); border-left: 1px solid var(--line); overflow-y: auto; padding: 18px 18px 28px; display: grid; gap: 18px; align-content: start; }
.vm-sezione h3 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.vm-frase { margin: 0 0 8px; font-size: 15px; line-height: 1.45; font-weight: 600; }
.vm-punto .barretta { margin: 0 0 12px; }
.vm-numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vm-numeri div { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.vm-numeri span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.vm-numeri b { font-size: 15px; font-variant-numeric: tabular-nums; }
.vm-aggiornata { font-size: 12px; margin-top: 10px; }
.vm-azioni { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.vm-punto .avviso { margin: 10px 0 0; }
.vm-stanze, .vm-simboli { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vm-stanze li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vm-campione { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.vm-nome { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.vm-nome small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.vm-simboli li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.vm-s { width: 18px; height: 14px; flex: 0 0 18px; display: inline-block; position: relative; }
.vm-s.robot { width: 14px; height: 14px; flex-basis: 14px; margin: 0 2px; border-radius: 50%; background: var(--azione); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--azione); }
.vm-s.base { width: 14px; height: 14px; flex-basis: 14px; margin: 0 2px; border-radius: 4px; background: #16803c; }
.vm-s.percorso::after, .vm-s.lavaggio::after, .vm-s.previsto::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: rgba(22, 23, 43, .45); }
:root[data-tema="scuro"] .vm-s.percorso::after { background: rgba(255, 255, 255, .6); }
.vm-s.lavaggio::after { height: 4px; top: 5px; background: rgba(59, 130, 246, .6); }
.vm-s.previsto::after { background: repeating-linear-gradient(90deg, rgba(79, 70, 229, .9) 0 4px, transparent 4px 7px); }
.vm-s.qui { border-radius: 4px; background: hsl(250 75% 70%); }
.vm-s.attesa { border-radius: 4px; background: hsl(250 35% 93%); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-tema="scuro"] .vm-s.qui { background: hsl(250 55% 48%); }
:root[data-tema="scuro"] .vm-s.attesa { background: hsl(250 18% 26%); }
.vm-s.vietata { border-radius: 3px; background: rgba(217, 58, 52, .18); box-shadow: inset 0 0 0 1.5px rgba(217, 58, 52, .8); }
.vm-s.nolavaggio { border-radius: 3px; background: rgba(124, 116, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(124, 116, 255, .8); }
.vm-s.ostacolo { width: 9px; height: 9px; flex-basis: 9px; margin: 0 4.5px; border-radius: 50%; background: #f59e0b; }
@media (max-width: 820px) {
  .vm-testa { padding: 10px 16px; }
  .vm-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 55%) minmax(0, 1fr); }
  .vm-legenda { border-left: 0; border-top: 1px solid var(--line); padding: 14px 16px 24px; }
}
/* I comandi dalla mappa: strumenti in alto, conferma in basso. */
.vm-strumenti {
  position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 2px; padding: 3px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--pillola); box-shadow: var(--shadow);
}
.vm-strumenti[hidden], .vm-comando[hidden] { display: none; }
.vm-strumenti button {
  appearance: none; font: inherit; font-size: 12.5px; font-weight: 650; color: var(--muted); background: transparent;
  border: 0; border-radius: var(--pillola); padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
.vm-strumenti button:hover { color: var(--ink); }
.vm-strumenti button[aria-pressed="true"] { background: var(--azione); color: var(--on-azione); }
.vm-strumenti button:focus-visible, .vm-passate button:focus-visible { outline: none; box-shadow: var(--anello); }
.vm-tela.in-comando { cursor: crosshair; touch-action: none; }
.vm-comando {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-alta);
}
.vm-comando-testo { flex: 1 1 200px; min-width: 0; font-size: 13.5px; font-weight: 600; }
.vm-passate { display: inline-flex; border: 1px solid var(--line); border-radius: var(--pillola); padding: 2px; }
.vm-passate button {
  appearance: none; font: inherit; font-size: 12px; font-weight: 650; color: var(--muted); background: transparent;
  border: 0; border-radius: var(--pillola); padding: 3px 9px; cursor: pointer;
}
.vm-passate button[aria-pressed="true"] { background: var(--azione-soft); color: var(--azione-scura); }
.vm-stanze li.scegli { cursor: pointer; border-radius: 10px; padding: 4px 6px; margin: 0 -6px; }
.vm-stanze li.scegli:hover { background: var(--canvas); }
.vm-stanze li.scelta { background: var(--azione-soft); }
.vm-stanze li.scegli:focus-visible { outline: none; box-shadow: var(--anello); }
@media (max-width: 820px) {
  .vm-strumenti { left: 8px; right: 8px; top: 8px; overflow-x: auto; }
  .vm-strumenti button { padding: 6px 9px; }
}

/*
 * Tecnologia: la casa smart (28-09-2026). Le schede sono quelle dei robot
 * (`.widget`); qui solo il valore grande, il termostato e l'elenco da spuntare.
 */
.casa-valore { font-size: 17px; font-weight: 750; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.widget.casa-allarme { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: color-mix(in srgb, var(--red-soft) 55%, var(--canvas)); }
.widget.casa-allarme .stato-vivo i { animation: pulsa 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .widget.casa-allarme .stato-vivo i { animation: none; } }
.casa-termostato { display: inline-flex; align-items: center; gap: 6px; }
.casa-termostato b { font-size: 13.5px; min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.casa-termostato .bottone { min-width: 32px; padding-left: 0; padding-right: 0; justify-content: center; }
.casa-modalita { width: auto; min-width: 0; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.casa-altro { margin-left: auto; }
.casa-cerca { margin: 10px 0 4px; }
.casa-gruppo { margin-top: 14px; }
.casa-gruppo-testa { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.casa-gruppo-testa .bottone { margin-left: auto; }
.casa-scelta {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 6px; cursor: pointer; font-size: 14px; line-height: 1.4; background: var(--paper);
}
.casa-scelta:hover { border-color: var(--line-forte); }
.casa-scelta input { margin-top: 3px; flex: 0 0 auto; width: auto; }
.casa-scelta > span { min-width: 0; overflow-wrap: anywhere; }
.casa-scelta.gia { opacity: .7; cursor: default; }
.marca-scheda .riga-tag { align-items: center; margin-top: 2px; }
.marca-scheda .riga-tag i { margin-top: 0; }

/* La data di nascita della schedina in tre pezzi (12-10-2026): giorno, mese, anno scritto. */
.data-a-pezzi { display: flex; gap: 8px; }
.riga > .campo.data-nascita { flex: 2 1 320px; }
.data-a-pezzi [data-pezzo="g"] { flex: 0 0 96px; }
.data-a-pezzi [data-pezzo="m"] { flex: 1 1 130px; min-width: 0; }
.data-a-pezzi [data-pezzo="a"] { flex: 0 0 140px; }
.data-nascita [data-eta] { margin-top: 4px; min-height: 1.2em; font-size: 12.5px; color: var(--muted); }
.data-nascita .errore-testo { color: var(--red, #c53030); }
/* Un campo riempito dalla lettura del documento: resta segnato finché non si salva. */
.campo input.letto-dal-documento, .campo select.letto-dal-documento { background: var(--orange-soft); border-color: #f6ad55; }
.passi-guida code { overflow-wrap: anywhere; user-select: all; font-size: 12.5px; }

/* ── Adempimenti (02-10-2026): tre schede numerate nell'ordine di urgenza —
   Questura, ISTAT, Comune — e il resto chiuso in fondo. */
.scheda.adempimento { margin-bottom: 16px; }
.testa-adempimento { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.testa-adempimento h2 { font-size: 17px; font-weight: 800; letter-spacing: -.3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.numero-adempimento {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: var(--azione); color: var(--on-azione); font-weight: 800; font-size: 15px;
}
/* L'interruttore on/off in testa a una scheda (12-10-2026, ROSS1000). */
.levetta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-left: auto; padding-top: 2px; user-select: none; }
.levetta input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.levetta-binario { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #c4c4d6; transition: background .15s; }
.levetta-binario::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.levetta input:checked + .levetta-binario { background: var(--green, #2f9e44); }
.levetta input:checked + .levetta-binario::after { transform: translateX(18px); }
.levetta input:focus-visible + .levetta-binario { box-shadow: var(--anello); }
.levetta input:disabled + .levetta-binario { opacity: .5; }
.levetta-testo { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--muted); min-width: 2.2em; }
.azioni-adempimento { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.altre-azioni { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.altre-azioni > summary, .altre-azioni-scheda > summary { cursor: pointer; font-size: 13.5px; font-weight: 650; color: var(--muted); list-style: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.altre-azioni > summary::-webkit-details-marker, .altre-azioni-scheda > summary::-webkit-details-marker { display: none; }
.altre-azioni > summary::before, .altre-azioni-scheda > summary::before { content: "▸"; transition: transform .15s; }
.altre-azioni[open] > summary::before, .altre-azioni-scheda[open] > summary::before { transform: rotate(90deg); }
.altre-azioni-scheda > summary b { color: var(--ink); }
.scheda.altre-azioni-scheda { margin-bottom: 12px; }
.tabella-schedine tr.spenta td { opacity: .6; }
.tabella-schedine td { vertical-align: middle; }
/* La schedina accanto alla foto: due colonne sul computer, una sul telefono. */
.schedina-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; margin-top: 10px; align-items: start; }
.schedina-foto { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.foto-documento { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--canvas); text-decoration: none; color: var(--muted); }
.foto-documento img { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #000; }
.foto-documento span { display: block; padding: 6px 10px; font-size: 12px; }
.vuoto-foto { border: 1px dashed var(--line-forte); border-radius: 12px; padding: 18px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.schedina-modulo .riga[hidden] { display: none; }
@media (max-width: 860px) {
  .schedina-griglia { grid-template-columns: 1fr; }
  .schedina-foto { position: static; }
}

.azioni-riga { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ── La registrazione guidata (04-10-2026): sette passi, a prova di chiunque.
   Bottoni grandi per le scelte, una cosa per riga, l'aiuto sempre accanto. */
.procedura .intro { margin-bottom: 14px; }
.passi-reg { display: flex; gap: 4px; margin: 4px 0 14px; overflow-x: auto; padding-bottom: 2px; }
.passi-reg span { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); min-width: 56px; }
.passi-reg i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--canvas); border: 1px solid var(--line-forte); }
.passi-reg em { font-style: normal; white-space: nowrap; }
.passi-reg span.ora { color: var(--ink); font-weight: 650; }
.passi-reg span.ora i { background: var(--azione); border-color: var(--azione); color: var(--on-azione); }
.passi-reg span.fatto i { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.titolo-passo { font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 8px; }
.scelte-grandi { display: grid; gap: 8px; margin-bottom: 14px; }
.scelta-grande { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-forte); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.scelta-grande b { font-size: 15px; }
.scelta-grande span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.scelta-grande:hover { border-color: var(--azione); }
.scelta-grande.attiva { border-color: var(--azione); background: var(--azione-soft); box-shadow: 0 0 0 1px var(--azione) inset; }
.linguette-reg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.linguette-reg button { font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-forte); background: var(--paper); color: var(--ink); cursor: pointer; }
.linguette-reg button.attiva { background: var(--azione); border-color: var(--azione); color: var(--on-azione); font-weight: 650; }
.linguette-reg button.aggiungi { border-style: dashed; color: var(--azione); }
.scheda-reg { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--canvas); margin-bottom: 12px; }
.azioni-riga { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.gettoni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gettone { font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-forte); background: var(--paper); color: var(--ink); cursor: pointer; }
.gettone.attivo, .gettone:has(input:checked) { background: var(--azione-soft); border-color: var(--azione); color: var(--azione); font-weight: 650; }
.foto-reg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.foto-reg .miniatura { position: relative; width: 92px; height: 70px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.foto-reg .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-reg .miniatura button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; }
.foto-reg .aggiungi-foto { width: 92px; height: 70px; border-radius: 10px; border: 1px dashed var(--line-forte); display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--azione); cursor: pointer; padding: 4px; }
.tre-scelte { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tre-scelte button { font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-forte); background: var(--paper); color: var(--ink); cursor: pointer; }
.tre-scelte button.attiva { background: var(--azione); border-color: var(--azione); color: var(--on-azione); font-weight: 650; }
.servizio-reg { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; background: var(--paper); }
.servizio-reg.spento { opacity: .6; }
.testa-servizio { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.testa-servizio > div:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; }
.testa-servizio b { font-size: 14px; }
.testa-servizio span { font-size: 12.5px; color: var(--muted); }
.dettaglio-servizio { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.piano-reg { border: 1px solid var(--line); border-left-width: 4px; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 3px; }
.piano-reg.gratis { border-left-color: var(--green); }
.piano-reg.pagamento { border-left-color: var(--orange); background: var(--orange-soft); }
.piano-reg .verdetto { font-size: 13px; font-weight: 600; }
.piano-reg.gratis .verdetto { color: var(--green); }
.piano-reg.pagamento .verdetto { color: var(--orange); }
.riepilogo-reg { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; font-size: 13.5px; }
.riepilogo-reg dt { color: var(--muted); font-weight: 600; }
.piede-reg { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.aiuto-apribile { margin: 4px 0 10px; font-size: 13px; }
.aiuto-apribile summary { cursor: pointer; color: var(--muted); }
.aiuto-fisco { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; display: grid; gap: 10px; background: var(--canvas); }
.domanda-aiuto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; }
.fine-reg { text-align: center; display: grid; gap: 12px; }
.fine-reg .avviso { text-align: left; }
.spunta-grande { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 32px; color: #fff; background: var(--green); }
.prossimi-reg { text-align: left; margin: 0 auto; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.contatti-piede { margin-top: 8px; background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--azione); cursor: pointer; text-align: left; }
.gesti-passo { display: inline-flex; align-items: center; gap: 10px; }
.come-link.pericolo { color: var(--red); font-size: 13px; }
@media (max-width: 640px) {
  .riepilogo-reg { grid-template-columns: 1fr; }
  .riepilogo-reg dd { margin-bottom: 6px; }
  .gesti-passo { flex-direction: column; align-items: flex-end; gap: 4px; }
}
.servizi-struttura .etichetta-servizi { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.servizi-struttura li { align-items: center; }
.servizi-struttura select.scelta-servizio { width: auto; flex: 0 0 150px; }
/* I generi di «Ha bisogno di te» (09-10-2026): un rigo per genere — titolo,
   quante voci, in breve cosa aspetta, la scadenza più vicina a destra — e la
   freccia apre le voci una per una, con i gesti. */
.gruppo-bisogno { display: block !important; }
.gruppo-bisogno summary { list-style: none; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.gruppo-bisogno summary::-webkit-details-marker { display: none; }
.gruppo-bisogno summary .punto { margin-top: 6px; }
.gruppo-bisogno summary:hover .principale b { color: var(--azione); }
.gruppo-bisogno .conta { display: inline-block; font-size: 12px; font-weight: 700; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: var(--pillola); background: var(--canvas); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; vertical-align: 1px; margin-left: 2px; }
.gruppo-bisogno .scadenza-gruppo { flex: 0 0 auto; margin-top: 3px; max-width: 46%; }
.gruppo-bisogno .scadenza-gruppo .tag { white-space: normal; }
@media (max-width: 640px) {
  .gruppo-bisogno summary { flex-wrap: wrap; }
  .gruppo-bisogno .scadenza-gruppo { order: 3; flex-basis: 100%; max-width: none; padding-left: 19px; margin-top: 0; }
  .gruppo-bisogno .freccia-gruppo { order: 2; }
}
.gruppo-bisogno .freccia-gruppo { margin-left: auto; color: var(--azione); font-size: 18px; line-height: 1; border: 1px solid var(--line-forte); border-radius: 999px; width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; transition: transform .15s ease; padding: 2px 6px; }
.gruppo-bisogno details[open] .freccia-gruppo { transform: rotate(180deg); }
.gruppo-bisogno .gesti-gruppo { margin: 6px 0 0 19px; }
.sotto-bisogno { margin: 6px 0 0 19px; padding-left: 10px; border-left: 2px solid var(--line); }
.sotto-bisogno li:last-child { padding-bottom: 0; }

/* ── lingua e Impostazioni (04-10-2026) */
/* Le pillole della lingua come quelle del tema, anche fuori dalla barra laterale. */
.scelta-lingua button, .scheda .scelta-tema button, .accesso .scelta-tema button {
  flex: 1; border: 0; padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--muted); background: none;
  border-radius: var(--pillola); cursor: pointer; font-family: inherit;
}
.scelta-lingua button:hover, .scheda .scelta-tema button:hover, .accesso .scelta-tema button:hover { color: var(--ink); }
.scelta-lingua button.attiva, .scheda .scelta-tema button.attiva, .accesso .scelta-tema button.attiva {
  background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
/* Sulla schermata d'accesso sta in alto a destra del riquadro, piccola. */
.accesso .riquadro > .scelta-lingua { width: max-content; margin: 0 0 12px auto; }
.scelte-lingua { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.conteggi-strutture { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 16px; }
.conteggi-strutture .scheda { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.conteggi-strutture b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.conteggi-strutture span { color: var(--muted); font-size: 13px; }

/* ─────────────────────────────────────────────────────────── prenotazioni */

/* In cima: i tre gruppi in un binario, a destra la ricerca e l'ordine. */
.barra-prenotazioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.segmenti { display: inline-flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); padding: 4px; border-radius: var(--pillola); }
.segmenti button {
  background: none; border: 0; padding: 7px 14px; border-radius: var(--pillola); cursor: pointer;
  font-size: 14px; color: var(--muted); font-weight: 650; transition: background-color .12s, color .12s;
  display: inline-flex; align-items: center; gap: 7px;
}
.segmenti button:hover { color: var(--ink); }
.segmenti button.attiva { background: var(--azione); color: var(--on-azione); box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .8); }
.segmenti .conta { font-size: 12px; font-weight: 700; min-width: 22px; padding: 1px 7px; border-radius: var(--pillola); background: var(--canvas); color: var(--muted); font-variant-numeric: tabular-nums; }
.segmenti button.attiva .conta { background: rgba(255, 255, 255, .22); color: #fff; }
.barra-prenotazioni .strumenti { display: flex; gap: 8px; flex: 1 1 340px; max-width: 480px; }
.barra-prenotazioni .strumenti input { flex: 1 1 auto; min-width: 0; }
.barra-prenotazioni .strumenti select { width: auto; flex: 0 0 auto; }

/* I totali del gruppo scelto, in una striscia sola. */
.riepilogo-prenotazioni {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.riepilogo-prenotazioni > div { padding: 12px 18px; border-left: 1px solid var(--line); min-width: 0; }
.riepilogo-prenotazioni > div:first-child { border-left: 0; }
.riepilogo-prenotazioni span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.riepilogo-prenotazioni b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.riepilogo-prenotazioni small { display: block; font-size: 12px; color: var(--muted); }

/* L'elenco: una riga per soggiorno, tutta cliccabile, divisa per mese di arrivo. */
.elenco-prenotazioni { padding-top: 6px; padding-bottom: 6px; }
.elenco-prenotazioni th { white-space: nowrap; }
.elenco-prenotazioni td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
.riga-prenotazione { cursor: pointer; }
.riga-prenotazione:focus-visible { outline: 2px solid var(--azione); outline-offset: -2px; }
.riga-prenotazione.annullata .nome b, .riga-prenotazione.annullata .date { text-decoration: line-through; color: var(--muted); }
.riga-prenotazione .ospite { min-width: 220px; max-width: 320px; }
.riga-prenotazione .nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.riga-prenotazione .contatto { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.riga-prenotazione .date { white-space: nowrap; font-weight: 600; }
.riga-prenotazione .secondario { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.riga-prenotazione .importo { white-space: nowrap; }
.riga-prenotazione .freccia { width: 24px; text-align: right; color: var(--muted); font-size: 20px; line-height: 1; padding-left: 0; }
.riga-prenotazione:hover .freccia { color: var(--azione); }
.mese-gruppo td { background: var(--canvas); padding: 8px 10px; border-bottom: 1px solid var(--line); }
tbody tr.mese-gruppo:hover td { background: var(--canvas); }
.mese-gruppo .nome-mese { font-weight: 750; text-transform: capitalize; margin-right: 8px; }
.mese-gruppo .secondario { font-size: 12.5px; color: var(--muted); }

@media (max-width: 720px) {
  .barra-prenotazioni .strumenti { max-width: none; flex-basis: 100%; }
  .segmenti { width: 100%; }
  .segmenti button { flex: 1; justify-content: center; padding: 7px 8px; }
  .riepilogo-prenotazioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .riepilogo-prenotazioni > div:nth-child(3) { border-left: 0; }
  .riepilogo-prenotazioni > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ────────────────────────────────────────────────────── messaggi ospiti */

/* La lingua: una riga che spiega, e a destra quale testo si sta modificando. */
.lingua-messaggi { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lingua-messaggi > div:first-child { flex: 1 1 360px; }
.lingua-messaggi .sotto { margin-bottom: 0; }

/* Le variabili, chiuse: si aprono solo a chi le cerca. */
.variabili-disponibili > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.variabili-disponibili > summary::-webkit-details-marker { display: none; }
.variabili-disponibili > summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s; }
.variabili-disponibili[open] > summary::before { transform: rotate(90deg); }
.variabili-disponibili > summary h2 { font-size: 16px; font-weight: 750; letter-spacing: -.25px; }
.variabili-disponibili > summary .aiuto { font-size: 13px; color: var(--muted); }
.variabili-disponibili[open] > summary { margin-bottom: 10px; }
.variabili-disponibili[open] > summary .aiuto { display: none; }
.elenco-variabili { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 18px; margin-top: 10px; }
.elenco-variabili li { display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--muted); padding: 6px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.elenco-variabili code { color: var(--azione-scura); align-self: flex-start; }

/* Un momento: titolo e interruttore, quando parte in una frase, testo e anteprima affiancati. */
.messaggio-ospite .testa-messaggio { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.messaggio-ospite .testa-messaggio h2 { font-size: 16px; font-weight: 750; letter-spacing: -.25px; margin-bottom: 2px; }
.messaggio-ospite .testa-messaggio .sotto { color: var(--muted); font-size: 13.5px; }
.messaggio-ospite .testa-messaggio .interruttore { flex: 0 0 auto; margin: 0; }
.quando-parte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 10px 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-controllo); font-size: 14px;
}
.quando-parte .etichetta { font-weight: 650; }
.quando-parte input[type=number] { width: 72px; }
.quando-parte input[type=time] { width: 110px; }
.quando-parte select { width: auto; }
.quando-parte .aiuto { font-size: 12.5px; color: var(--muted); }
.testo-e-anteprima { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 12px; }
.testo-e-anteprima .campo { margin-bottom: 0; }
.testo-e-anteprima textarea { min-height: 260px; }
.testo-e-anteprima .inserisci-dato { margin-top: 8px; font-size: 13.5px; color: var(--azione-scura); }
.anteprima-ospite .etichetta { display: block; font-size: 13px; font-weight: 550; color: var(--muted); margin-bottom: 5px; }
.anteprima-ospite .foglio {
  background: var(--paper); border: 1px dashed var(--line-forte); border-radius: var(--radius-controllo);
  padding: 12px 14px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto;
}
.anteprima-ospite .oggetto { font-weight: 700; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.anteprima-ospite mark { background: var(--azione-soft); color: var(--azione-scura); border-radius: 4px; padding: 0 3px; cursor: help; }
.anteprima-ospite mark.sconosciuta { background: var(--red-soft); color: var(--red); }
@media (max-width: 900px) { .testo-e-anteprima { grid-template-columns: 1fr; } }

/* L'imposta in tre passi: i numeri da copiare nel portale del Comune. */
.passi-imposta { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 12px; font-size: 14px; }
.passi-imposta li::marker { font-weight: 750; color: var(--azione); }
.griglia-copia { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 8px; }
.numero-copia { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-controllo); background: var(--canvas); }
.numero-copia .etichetta { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.numero-copia b { font-size: 20px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.numero-copia .aiuto { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

/* ── Il menu del telefono (06-10-2026): in fondo le quattro voci di tutti i
   giorni, la sezione aperta e «Menu»; il resto a tutto schermo, a gruppi. */
.sidebar nav .voce-menu, .menu-mobile { display: none; }
@media (max-width: 860px) {
  .sidebar nav { justify-content: space-around; }
  .sidebar nav a:not(.principale):not(.attiva) { display: none; }
  .sidebar nav .voce-menu {
    display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 8px 5px; margin: 0; min-width: 58px; border: 0; background: none;
    border-radius: var(--radius-controllo); color: var(--sidebar-muted);
    font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .1px; cursor: pointer;
  }
  .sidebar nav .voce-menu .glifo, .sidebar nav .voce-menu .glifo svg { width: 21px; height: 21px; display: block; }
  .sidebar nav .voce-menu.attiva { background: var(--azione-soft); color: var(--azione); }
  body.menu-aperto { overflow: hidden; }
  .menu-mobile {
    display: block; position: fixed; inset: 0; z-index: 45; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--canvas); color: var(--ink);
    padding: 14px 16px calc(84px + env(safe-area-inset-bottom));
  }
  .menu-mobile .testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .menu-mobile .testa .chiudi {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
    color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
  }
  .menu-mobile .gruppo { margin-top: 16px; }
  .menu-mobile .gruppo h3 {
    margin: 0 0 6px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px;
    text-transform: uppercase; color: var(--muted);
  }
  .menu-mobile .voce {
    display: flex; align-items: center; gap: 12px; padding: 12px 12px; margin-bottom: 6px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
    color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
  }
  .menu-mobile .voce .glifo, .menu-mobile .voce .glifo svg { width: 22px; height: 22px; flex: none; display: block; }
  .menu-mobile .voce .glifo { color: var(--azione); }
  .menu-mobile .voce .testo { flex: 1; }
  .menu-mobile .voce.attiva { border-color: var(--azione); background: var(--azione-soft); color: var(--azione); }
  .menu-mobile .voce.bloccata { color: var(--muted); background: var(--canvas); }
  .menu-mobile .voce.bloccata .glifo { color: var(--muted); }
  .menu-mobile .voce .lucchetto svg { width: 16px; height: 16px; display: block; }
  .menu-mobile .voce .pallino {
    background: var(--azione); color: var(--on-azione); font-size: 11px; font-weight: 700;
    border-radius: var(--pillola); padding: 1px 7px;
  }
  .menu-mobile .voce .solo-vista { font-size: 11px; color: var(--muted); font-weight: 600; }
  .menu-mobile .piede { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
  .menu-mobile .piede .chi { display: grid; gap: 2px; margin: 10px 0 12px; }
  .menu-mobile .piede .gesti { display: flex; gap: 8px; flex-wrap: wrap; }
}

/* ── L'abbonamento a Sesamoh (07-10-2026): l'elenco con le spunte verdi,
 *    usato dal riquadro del piano in testa alle Impostazioni. */
.include-piano { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 7px; font-size: 13.5px; }
.include-piano li { padding-left: 22px; position: relative; }
.include-piano li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }

/* Il riquadro del piano in testa alle Impostazioni e la tabella di confronto (07-10-2026). */
.riquadro-piano { border-color: var(--azione); }
.riquadro-piano-testa { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.riquadro-piano-testa h2 { margin: 2px 0; }
.riquadro-piano-prossimo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.riquadro-piano-prossimo .include-piano { margin: 8px 0 0; }
/* Il lucchetto dentro una riga di testo (funzioni del piano, 08-10-2026). */
.lucchetto-in-riga { display: inline-flex; vertical-align: -2px; }
.lucchetto-in-riga svg { width: 15px; height: 15px; }

/* ── La tabella per scegliere il piano (08-10-2026): stessa carta, stesso
 *    indaco, stesse pillole del resto. La colonna consigliata ha il filo
 *    indaco e il fondo appena tinto, la propria quello verde; le righe sono a
 *    gruppi, come i gruppi del menu. Sul telefono scorre di lato e la prima
 *    colonna resta ferma. */
.tabella-piani-contenitore { margin: 4px -4px 0; padding: 0 4px 4px; }
.tabella-piani { border-collapse: separate; border-spacing: 0; min-width: 640px; font-size: 14px; }
.tabella-piani th, .tabella-piani td { border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: middle; }
.tabella-piani thead th { border-bottom: none; vertical-align: top; text-align: left; padding: 16px 14px 14px; }
.tabella-piani th[scope="row"] { font-weight: 550; color: var(--ink); text-align: left; min-width: 210px; position: sticky; left: 0; background: var(--paper); z-index: 1; }
.tabella-piani .angolo { position: sticky; left: 0; background: var(--paper); z-index: 1; }
.tabella-piani td { text-align: center; }
.tabella-piani .piano { width: 21%; }
.tabella-piani .nome-piano { font-size: 18px; font-weight: 800; letter-spacing: -.4px; margin-top: 8px; }
.tabella-piani .prezzo-colonna { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; margin-top: 4px; }
.tabella-piani .prezzo-colonna b { font-size: 26px; font-weight: 800; letter-spacing: -1px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella-piani .prezzo-colonna span { color: var(--muted); font-size: 12.5px; }
.tabella-piani .per-chi { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.4; margin-top: 6px; }
.tabella-piani .riga-tag { min-height: 22px; }
.tabella-piani .riga-tag .tag { white-space: nowrap; }
/* La colonna consigliata: il filo indaco tutto intorno, il fondo appena tinto. */
.tabella-piani .consigliato { background: var(--azione-soft); border-left: 2px solid var(--azione); border-right: 2px solid var(--azione); }
.tabella-piani thead .consigliato { border-top: 2px solid var(--azione); border-radius: var(--radius-controllo) var(--radius-controllo) 0 0; }
.tabella-piani .piede-piani .consigliato { border-bottom: 2px solid var(--azione); border-radius: 0 0 var(--radius-controllo) var(--radius-controllo); }
.tabella-piani .mio:not(.consigliato) { background: var(--green-soft); }
.tabella-piani .gruppo-righe td { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding: 18px 12px 6px; border-bottom: 1px solid var(--line-forte); background: transparent; position: sticky; left: 0; }
.tabella-piani .spunta { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 800; font-size: 13px; }
.tabella-piani .assente { color: var(--line-forte); font-weight: 700; }
.tabella-piani .piede-piani td, .tabella-piani .piede-piani th { border-bottom: none; padding-top: 14px; padding-bottom: 16px; }
.tabella-piani .piede-piani .bottone { width: 100%; justify-content: center; }
.scorri-di-lato { display: none; color: var(--muted); font-size: 12.5px; margin: 6px 0 2px; }
@media (max-width: 720px) {
  /* Sul telefono: nomi stretti e prezzi più piccoli, così accanto alle
     funzioni si vedono almeno due piani; gli altri si raggiungono di lato. */
  .tabella-piani { min-width: 520px; font-size: 13px; }
  .tabella-piani th[scope="row"] { min-width: 118px; max-width: 128px; padding: 9px 8px; }
  .tabella-piani th, .tabella-piani td { padding: 9px 8px; }
  .tabella-piani thead th { padding: 12px 8px 10px; }
  .tabella-piani .per-chi { display: none; }
  .tabella-piani .nome-piano { font-size: 15px; }
  .tabella-piani .prezzo-colonna b { font-size: 19px; }
  .tabella-piani .prezzo-colonna span { font-size: 11px; }
  .tabella-piani .riga-tag .tag { font-size: 10.5px; padding: 1px 6px; }
  .scorri-di-lato { display: block; }
}

/* L'etichetta del piano nel piede della barra e nel menu del telefono (08-10-2026). */
.pillola-piano { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--pillola); font-size: 12px; font-weight: 650; text-decoration: none; background: var(--azione-soft); color: var(--azione); border: 1px solid transparent; }
.pillola-piano:hover { border-color: var(--azione); text-decoration: none; }
.pillola-piano.base { background: var(--purple-soft); color: var(--purple-dark); }
.pillola-piano.premium, .pillola-piano.ultra { background: var(--ink); color: var(--paper); }
.pillola-piano.gestore { background: var(--green-soft); color: var(--green); }
.pillola-piano.lancio { background: var(--green-soft); color: var(--green); }
.pillola-piano.nessuno { background: var(--red-soft); color: var(--red); }
.menu-mobile .chi .pillola-piano { margin-top: 6px; align-self: flex-start; }

/* ── Le funzioni di un piano più grande (08-10-2026) ──
 *
 * Una voce che il piano non apre resta al suo posto, un filo più spenta, con
 * la bacchetta magica e l'asterisco: si sa che c'è e che si accende col piano
 * dopo. Passandoci sopra, il fumetto dice quale. Il dorato vale solo per
 * questo: «c'è di più».
 */
:root { --magia: #b7791f; --magia-soft: #fdf5e3; }
:root[data-tema="scuro"] { --magia: #f2c46d; --magia-soft: rgba(242, 196, 109, .12); }

.segno-piano { display: inline-flex; align-items: flex-start; margin-left: auto; color: var(--magia); flex: none; }
.segno-piano .bacchetta svg { width: 15px; height: 15px; display: block; }
.segno-piano sup { font-size: 12px; font-weight: 800; line-height: 1; margin-left: 1px; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Un campo nascosto dentro un'etichetta (foto, file, gettoni): il fuoco da tastiera si vede sull'etichetta. */
label:has(> .solo-lettori:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.sidebar nav a.da-piano { color: color-mix(in srgb, var(--sidebar-muted) 70%, transparent); }
.sidebar nav a.da-piano .glifo { opacity: .55; }
.sidebar nav a.da-piano:hover { background: var(--magia-soft); color: var(--ink); }
.sidebar nav a.da-piano.attiva { background: var(--magia-soft); color: var(--magia); }
.linguette a.da-piano { display: inline-flex; align-items: center; gap: 6px; border-style: dashed; }
.linguette a.da-piano .segno-piano { margin-left: 0; }
.menu-mobile .voce.da-piano { background: var(--magia-soft); }
.menu-mobile .voce .nota-piano { display: block; font-size: 11.5px; font-weight: 500; color: var(--magia); }
@media (max-width: 860px) {
  .sidebar nav a .segno-piano { position: absolute; top: 3px; left: 6px; }
  .sidebar nav a .segno-piano svg { width: 12px; height: 12px; }
}

.fumetto-piano {
  position: fixed; z-index: 1000; pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  max-width: 260px; padding: 7px 11px; border-radius: 10px;
  background: var(--ink); color: var(--paper);
  font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-alta);
}
.fumetto-piano svg { width: 14px; height: 14px; flex: none; color: var(--magia); }

.sezione-piano .bacchetta-grande { background: var(--magia-soft); color: var(--magia); }
.sezione-piano h1 sup, .sezione-piano .aiuto sup { color: var(--magia); font-weight: 800; }
.sezione-piano h1 sup { font-size: .6em; margin-left: 2px; }
.sezione-piano .disponibile-piano { color: var(--magia); font-weight: 650; margin: 4px 0 0; }

.banner-piano { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.banner-piano b { margin: 0; }
.banner-piano span { flex: 1; min-width: 220px; }

/* ── La Panoramica a modo proprio (08-10-2026) ──
 * I riquadri stanno in una griglia a due colonne: quasi tutti la occupano
 * intera, «Ultime prenotazioni» e «Da dove arrivano» stanno a metà. In
 * modifica ognuno ha la sua maniglia, e si trascina.
 */
.blocchi-home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.blocco-home { grid-column: 1 / -1; min-width: 0; }
.blocco-home.mezzo { grid-column: auto; }
.blocco-home > .kpi { margin-bottom: 16px; }
.blocchi-home.in-modifica .blocco-home {
  border: 1.5px dashed var(--line-forte); border-radius: calc(var(--radius) + 6px);
  padding: 8px; margin-bottom: 14px; background: color-mix(in srgb, var(--paper) 40%, transparent);
  cursor: grab; transition: border-color .12s, opacity .12s;
}
.blocchi-home.in-modifica .blocco-home > :not(.maniglia-blocco) { pointer-events: none; }
.blocchi-home.in-modifica .blocco-home.nascosto { opacity: .55; }
.blocchi-home.in-modifica .blocco-home.trascinato { opacity: .35; }
.blocchi-home.in-modifica .blocco-home.bersaglio { border-color: var(--azione); background: var(--azione-soft); }
.maniglia-blocco { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; }
.maniglia-blocco .presa { font-size: 18px; color: var(--muted); line-height: 1; }
.maniglia-blocco b { flex: 1; font-size: 14px; }
.maniglia-blocco .gesti-blocco { display: flex; gap: 6px; }
@media (max-width: 860px) {
  .blocchi-home { grid-template-columns: 1fr; }
  .blocco-home.mezzo { grid-column: 1 / -1; }
}

/* Un pulsante che sta lavorando (il modulo è partito): si capisce che aspetta. */
button[aria-busy="true"] { cursor: progress; opacity: .7; }
@media (max-width: 430px) { .barra-mobile .pillola-piano { display: none; } }

/* ── L'assistente (08-10-2026) ──
 *
 * Il fondo che respira — un'aurora di indaco, rosa e ciano, sfocata e in
 * rotazione lenta — è il segno con cui gli assistenti vocali dicono «sto
 * ascoltando». Sta sul tastone in Panoramica e dietro il pannello; il resto
 * della dashboard resta piatto e tranquillo come prima.
 */
@keyframes aurora-ia { to { transform: rotate(360deg); } }
@keyframes pensa-ia { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.scheda-ia { position: relative; overflow: hidden; border: 0; color: #fff; background: #14143a; margin-bottom: 16px; }
.scheda-ia::before {
  content: ""; position: absolute; inset: -60%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, #4f46e5, #c026d3, #06b6d4, #7c3aed, #ec4899, #4f46e5);
  filter: blur(46px); opacity: .9; animation: aurora-ia 14s linear infinite;
}
.scheda-ia::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10, 10, 40, .25), rgba(10, 10, 40, .55)); pointer-events: none; }
.scheda-ia > * { position: relative; z-index: 1; }
.scheda-ia.chiusa::before { opacity: .45; animation-duration: 30s; }
.scheda-ia-testa { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.scheda-ia-testa h2 { color: #fff; font-size: 24px; letter-spacing: -.5px; margin: 2px 0 4px; }
.scheda-ia-testa p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 14px; max-width: 560px; }
.scheda-ia-sopra { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.scheda-ia-sopra svg { width: 15px; height: 15px; }
.tag-piano-ia { text-transform: none; letter-spacing: 0; font-weight: 700; background: rgba(255, 255, 255, .18); border-radius: var(--pillola); padding: 1px 8px; }
.tastone-ia {
  display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer;
  background: #fff; color: #2a2680; font-weight: 800; font-size: 16px; letter-spacing: -.2px;
  padding: 14px 24px; border-radius: 999px; box-shadow: 0 10px 30px rgba(10, 10, 40, .35), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: transform .12s, box-shadow .12s;
}
.tastone-ia svg { width: 22px; height: 22px; }
.tastone-ia:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(10, 10, 40, .4); }
.tastone-ia:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.scheda-ia-esempi, .esempi-ia { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip-ia {
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px);
}
.chip-ia:hover { background: rgba(255, 255, 255, .26); }

/* Il tasto rotondo in alto, accanto alla campanella: un anello d'aurora. */
.bottone-ia {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0; border: 0;
  background: conic-gradient(from 180deg, #4f46e5, #c026d3, #06b6d4, #4f46e5); color: #fff;
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s;
}
.bottone-ia::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--paper); }
.bottone-ia svg { position: relative; width: 21px; height: 21px; color: var(--azione); }
.bottone-ia:hover { transform: translateY(-1px); }
.bottone-ia:focus-visible { outline: none; box-shadow: var(--anello); }
.bottone-ia.da-piano svg { color: var(--magia); }
.barra-mobile .bottone-ia { display: none; }

/* Il pannello: scende dall'alto come le notifiche, ma più largo, con l'aurora dietro la testa. */
.pannello-ia {
  position: fixed; top: 74px; right: 26px; z-index: 46; overflow: hidden;
  width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 920px); display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-alta);
}
.pannello-ia .aurora { position: absolute; top: -220px; left: -120px; right: -120px; height: 300px; pointer-events: none; background: conic-gradient(from 0deg, #4f46e5, #c026d3, #06b6d4, #7c3aed, #4f46e5); filter: blur(60px); opacity: .32; animation: aurora-ia 18s linear infinite; }
.pannello-ia .testa { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 8px; }
.pannello-ia h2 { font-size: 19px; font-weight: 800; letter-spacing: -.4px; display: flex; align-items: center; gap: 8px; }
.pannello-ia h2 svg { width: 18px; height: 18px; color: var(--azione); }
.pannello-ia .titolo-ia { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pannello-ia .powered-ia { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); padding-left: 26px; }
.pannello-ia .powered-ia b { font-weight: 800; background: linear-gradient(90deg, #4f46e5, #c026d3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pannello-ia .testa .gesti { display: flex; align-items: center; gap: 8px; }
.pannello-ia .chiudi { border: 0; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.pannello-ia .chiudi:hover { color: var(--ink); background: var(--canvas); }
.conversazione-ia { position: relative; flex: 1 1 auto; overflow-y: auto; padding: 6px 20px 12px; display: flex; flex-direction: column; gap: 12px; min-height: 180px; }
.vuoto-ia { color: var(--muted); font-size: 15px; line-height: 1.5; padding: 10px 0 4px; }
.msg-ia { max-width: 94%; border-radius: 16px; padding: 12px 16px; font-size: 16px; line-height: 1.55; }
.msg-ia.domanda { align-self: flex-end; background: var(--azione); color: var(--on-azione); border-bottom-right-radius: 6px; }
.msg-ia.risposta { align-self: flex-start; background: var(--canvas); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg-ia.errore { align-self: flex-start; background: var(--red-soft); color: var(--red); }
.msg-ia .testo-ia { white-space: pre-wrap; }
.msg-ia .meta-ia { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.msg-ia.pensa { display: flex; gap: 5px; padding: 12px 16px; }
.msg-ia.pensa span { width: 7px; height: 7px; border-radius: 50%; background: var(--azione); animation: pensa-ia 1.2s infinite; }
.msg-ia.pensa span:nth-child(2) { animation-delay: .2s; }
.msg-ia.pensa span:nth-child(3) { animation-delay: .4s; }
.righe-ia { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.riga-ia { text-align: left; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-size: 14.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.riga-ia:hover { border-color: var(--azione); }
.pannello-ia .esempi-ia { padding: 0 20px; margin-top: 4px; }
.pannello-ia .chip-ia { font-size: 14px; }
.esempi-ia-tasto { padding: 2px 20px 0; font-size: 14px; }
.pannello-ia .chip-ia { background: var(--azione-soft); color: var(--azione); border-color: transparent; }
.pannello-ia .chip-ia:hover { background: var(--blue-soft); border-color: var(--azione); }
.modulo-ia { display: flex; gap: 8px; padding: 12px 18px 16px; }
.modulo-ia input { flex: 1; min-width: 0; font-size: 16px; padding: 11px 14px; border-radius: 999px; }
.modulo-ia .bottone { border-radius: 999px; }
.pannello-ia .scheda { margin: 6px 0 12px; }
@media (max-width: 860px) {
  .barra-mobile .bottone-ia { display: inline-flex; width: 38px; height: 38px; box-shadow: none; flex: 0 0 auto; }
  .barra-mobile .bottone-ia svg { width: 19px; height: 19px; }
  .pannello-ia { top: 64px; right: 16px; left: 16px; width: auto; max-height: calc(100vh - 140px); }
  .scheda-ia-testa h2 { font-size: 21px; }
  .tastone-ia { width: 100%; justify-content: center; }
}

/* ── La guida della casa (08-10-2026) ── */
.riga-guida-testa { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.gesti-guida { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.link-guida { font-size: 12px; background: var(--canvas); padding: 4px 8px; border-radius: 8px; max-width: 100%; overflow-wrap: anywhere; }
.linguette-guida { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.linguette-guida button { border: 1px solid var(--line-forte); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-weight: 650; cursor: pointer; }
.linguette-guida button.attiva { background: var(--azione); border-color: var(--azione); color: var(--on-azione); }
.linguette-guida .secondario { margin-left: 6px; font-size: 12.5px; }
.campo-guida { display: block; margin-bottom: 14px; }
.campo-guida .etichetta-guida { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.campo-guida .etichetta-guida .secondario { font-size: 12.5px; }
.campo-guida textarea { width: 100%; font: inherit; font-size: 14px; }
.campo-guida .aiuto { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.piede-guida { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* Le risposte IA (09-10-2026): i canali da cui arrivano i messaggi. */
.elenco-canali { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 8px; }
.elenco-canali > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.elenco-canali .sotto { margin-top: 4px; }
.messaggio-ospite.chiuso { opacity: .85; }

/* Il foglio condiviso delle prenotazioni (12-10-2026). */
.gruppo-scelte { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.gruppo-scelte legend { font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.scelta-foglio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--paper); }
.scelta-foglio:has(input:checked) { border-color: var(--azione); box-shadow: inset 0 0 0 1px var(--azione); }
.scelta-foglio input { margin-top: 3px; flex: 0 0 auto; }
.scelta-foglio > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scelta-foglio .aiuto { font-size: 12.5px; color: var(--muted); }
.righe-stato { display: grid; gap: 6px; margin: 4px 0 10px; font-size: 14px; }
.righe-stato .etichetta { display: inline-block; min-width: 130px; color: var(--muted); font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.istruzioni-script { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.istruzioni-script summary { cursor: pointer; }
.passi-script { margin: 10px 0 10px 18px; display: grid; gap: 4px; font-size: 14px; }
.codice-script { width: 100%; font-size: 12px; white-space: pre; overflow: auto; }
.conti-foglio { margin: 10px 0 14px; }
.piede.sinistra { justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.filtri-foglio { margin: 12px 0; flex-wrap: wrap; }
.tabella-foglio td { vertical-align: top; }
.tabella-foglio { min-width: 680px; }
.tabella-foglio td.azioni-foglio { white-space: nowrap; text-align: right; }
.scartate-foglio { margin-top: 10px; font-size: 13.5px; }
.scartate-foglio summary { cursor: pointer; color: var(--muted); }
details.scheda > summary { cursor: pointer; list-style-position: inside; }
details.scheda > summary h2 { margin: 0; }
label.bottone input[type="file"] { display: none; }
@media (max-width: 640px) {
  .righe-stato .etichetta { display: block; min-width: 0; }
  .tabella-foglio td.azioni-foglio { white-space: normal; text-align: left; }
}
.filtri-foglio { display: flex; border-radius: 18px; }
.filtri-foglio button { white-space: nowrap; flex: 0 0 auto; }

/* ─────────────────────────── l'app installabile (16-10-2026, app.js) */

/* «È arrivata una nuova versione»: in alto, sopra a tutto, finché non si aggiorna. */
.pwa-versione {
  position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 1100;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--paper); border-radius: var(--pillola); padding: 8px 8px 8px 18px;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-alta);
}
.pwa-versione span { min-width: 0; }

/* «Installa Sesamoh»: una scheda in basso a destra; sul telefono sopra la barra delle voci. */
.pwa-installa {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1050;
  width: min(360px, calc(100vw - 32px)); background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-alta); padding: 16px 18px;
  font-size: 14px;
}
.pwa-testa { display: flex; align-items: center; gap: 12px; }
.pwa-testa img { border-radius: 10px; flex: none; }
.pwa-testa b { flex: 1; font-size: 15px; }
.pwa-chiudi { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 8px; }
.pwa-chiudi:hover { background: var(--line); }
.pwa-installa p { margin: 10px 0 0; color: var(--muted); }
.pwa-passi { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.pwa-icona-condividi { display: inline-flex; width: 18px; height: 18px; vertical-align: -3px; color: var(--azione); }
.pwa-icona-condividi svg { width: 18px; height: 18px; }
.pwa-azioni { display: flex; gap: 8px; margin-top: 14px; }
@media (max-width: 860px) {
  .pwa-installa { left: 16px; right: 16px; width: auto; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* Notifiche sul telefono (Impostazioni, 16-10-2026) */
.riga-push { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.generi-push { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.generi-push legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.generi-push label.interruttore { align-items: flex-start; }
.generi-push label.interruttore input { margin-top: 3px; }
.dispositivi-push { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; font-size: 14px; }
.dispositivi-push li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

/* «Condividi → Sesamoh» (16-10-2026, app.js): i file arrivati dalla galleria. */
.condividi label { display: grid; gap: 6px; margin-bottom: 12px; }
.condivisi-file { display: grid; gap: 10px; margin: 6px 0 16px; }
.condiviso { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.condiviso img, .condiviso-pdf { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--azione-soft); }
.condiviso-pdf { display: grid; place-items: center; font-weight: 700; color: var(--azione); font-size: 13px; }
.condiviso-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.carica-documento { cursor: pointer; margin-left: 6px; }

/* «Novità di Sesamoh» (16-10-2026, app.js): le note di ogni versione. */
.novita h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 8px; }
.novita-elenco { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 12px; }
.novita-elenco li { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.novita-elenco li span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.novita-elenco li a { justify-self: start; font-size: 13px; font-weight: 600; margin-top: 4px; }

/* ── Il simulatore dei portali (ambiente demo, 16-10-2026) */
.calendario-portale { overflow-x: auto; margin: 12px 0; }
.calendario-portale table { border-collapse: collapse; min-width: 100%; font-size: 12px; }
.calendario-portale th, .calendario-portale td { border: 1px solid var(--line); padding: 4px 6px; text-align: center; white-space: nowrap; }
.calendario-portale thead th small, .calendario-portale td small, .calendario-portale tbody th small { display: block; color: var(--muted); font-weight: 400; font-size: 10px; }
.calendario-portale tbody th { text-align: left; background: var(--canvas); }
.calendario-portale td.chiusa { background: var(--red-soft); color: var(--red); }
.calendario-portale td.vuota { color: var(--muted); }
.azioni-simulatore { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.azioni-simulatore label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Beds24 (03-11-2026): un portale per riga, camera e prezzo accanto. */
.abbina-beds24 { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 12px 0; border-top: 1px solid var(--line); }
.abbina-beds24 .portale-beds24 { flex: 0 0 160px; align-self: center; }
.abbina-beds24 .campo { flex: 1 1 220px; margin: 0; }
.abbina-beds24 .campo input, .abbina-beds24 .campo select { width: 100%; }
.scambio { border-top: 1px solid var(--line); padding: 10px 0; }
.scambio summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; }
.scambio summary::-webkit-details-marker { display: none; }
.scambio summary .sotto { flex-basis: 100%; margin: 0; }
.scambio-corpo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.scambio-corpo pre { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-controllo); padding: 10px; font-size: 11px; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* ── il trasloco da un altro channel manager (19-10-2026) ── */
.passi-trasloco { margin-bottom: 18px; }
.fornitori-trasloco { gap: 10px; }
.fornitore-trasloco {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  color: var(--ink); font: inherit; cursor: pointer; min-height: 64px;
}
.fornitore-trasloco b { font-size: 15px; }
.fornitore-trasloco:hover { border-color: var(--azione); }
.fornitore-trasloco.attivo { border-color: var(--azione); box-shadow: inset 0 0 0 1px var(--azione); background: var(--azione-soft); }
.metodo-trasloco { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.metodo-trasloco button {
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.metodo-trasloco button.attiva { background: var(--azione); border-color: var(--azione); color: var(--on-azione); }
.cifra-trasloco { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cifra-trasloco b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cifra-trasloco span { font-size: 12.5px; color: var(--muted); }
.modello-trasloco { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.spunta-trasloco input { width: 18px; height: 18px; accent-color: var(--green); margin: 2px 4px 0 0; }

/* I calendari dei portali in Panoramica (23-10-2026): una tabella sola,
   portale · letto da noi · legge il nostro, e il confronto in fondo. */
.calendari-home table { margin-top: 8px; font-size: 14px; }
.calendari-home th, .calendari-home td { padding: 8px 8px; }
.calendari-home th:first-child, .calendari-home td:first-child { padding-left: 0; }
.calendari-home td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.calendari-home tbody tr:hover td { background: none; }
.calendari-home .pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.calendari-home .secondario { font-size: 12.5px; color: var(--muted); }
.calendari-home .arancio { color: var(--orange); font-weight: 600; }
.calendari-home tr:has(+ tr .errore-calendario) td { border-bottom: 0; }
.calendari-home .errore-calendario { padding-top: 0; padding-left: 17px; white-space: normal; overflow-wrap: anywhere; }
.calendari-home .piede-calendari { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 480px) {
  .calendari-home th, .calendari-home td { padding: 8px 4px; font-size: 13px; }
  .calendari-home td:not(:first-child) { white-space: normal; }
}

/* ─────────────────────────── la nuvola dell'esito (26-10-2026, app.js nuvola) */

/* In basso al centro, sopra a tutto; a otto secondi svanisce in due, salendo e sfumando.
   Si animano solo opacità e spostamento, su un livello suo: il blur animato e
   il centraggio con translate(-50%) la facevano andare a scatti (26-10-2026). */
.nuvola {
  position: fixed; left: 16px; right: 16px; margin: 0 auto; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 1060;
  width: max-content; max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 14px 20px; border-radius: 18px; font-size: 14.5px; line-height: 1.45;
  box-shadow: var(--shadow-alta);
  opacity: 0; transform: translate3d(0, 14px, 0);
  will-change: opacity, transform; backface-visibility: hidden;
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
}
.nuvola.visibile { opacity: 1; transform: translate3d(0, 0, 0); }
.nuvola.visibile.svanisce {
  opacity: 0; transform: translate3d(0, -26px, 0);
  transition: opacity 2s cubic-bezier(.4, 0, .6, 1), transform 2s cubic-bezier(.25, .1, .25, 1);
}
@media (max-width: 860px) { .nuvola { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) {
  .nuvola, .nuvola.visibile, .nuvola.visibile.svanisce { transform: none; }
}

/* L'archivio nel cloud (28-10-2026): la riga sopra le ricevute e le scelte della guida. */
.riga-archivio { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 10px 0 12px; }
.riga-archivio > div:first-child { flex: 1 1 320px; min-width: 0; }
.riga-archivio .gesti { display: flex; gap: 6px; flex-wrap: wrap; }
.scelte-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.scelte-cloud .bottone { max-width: 100%; }
a.tag { text-decoration: none; }

/* Il Community Center (03-11-2026), come quello di Airbnb: il menu della
   community a sinistra, la pagina a destra; i post a tutta larghezza con chi ›
   dove, il titolo grande e l'argomento; i messaggi a bolle; le notifiche con il
   pallino rosso. Colori e forme sono quelli di STBLE. */
/* Sul computer il menu della community sta nella barra laterale (barraCommunity):
   la pagina è una colonna sola. Il menu qui dentro resta per il telefono. */
.griglia-community { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; max-width: 980px; }
@media (min-width: 861px) { .menu-community { display: none !important; } }
.menu-community { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--radius-lg, 22px); background: var(--paper); max-height: calc(100vh - 32px); overflow-y: auto; }
.voce-cc, .club-cc, .forum-cc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; min-height: 44px; }
.voce-cc:hover, .club-cc:hover, .forum-cc:hover { background: var(--surface-2); }
.voce-cc.attiva, .club-cc.attiva, .forum-cc.attiva { background: var(--surface-2); font-weight: 800; }
.glifo-cc { flex: 0 0 22px; width: 22px; height: 22px; display: inline-grid; place-items: center; color: var(--ink); }
.glifo-cc svg { width: 22px; height: 22px; }
.testo-cc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.testo-cc small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.sep-cc { height: 1px; background: var(--line); margin: 8px 6px; }
.titolo-gruppo-cc { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px 4px; }
.titolo-gruppo-cc b { font-size: 15px; }
.club-cc { padding-left: 14px; }
.emblema-club { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.emblema-club svg { width: 22px; height: 22px; }
.club-cc b { font-size: 14.5px; }
.forum-cc { padding-left: 46px; font-weight: 500; font-size: 14.5px; }
.freccia-cc { color: var(--muted); font-size: 20px; line-height: 1; margin: 0 2px; }
.vuoto-club { padding: 4px 12px 8px 46px; font-size: 13px; }
.conta-community { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: var(--pillola); background: var(--red); color: #fff; font-size: 12px; font-weight: 800; text-align: center; line-height: 22px; }
.contenuto-community { min-width: 0; }

/* La pagina iniziale */
.benvenuto-cc { text-align: center; padding: 18px 0 8px; }
.benvenuto-cc h2 { font-family: var(--font-display, inherit); font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.5px; margin-bottom: 22px; overflow-wrap: anywhere; }
.cerca-cc { display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 0 auto 18px; padding: 6px 6px 6px 22px; border-radius: var(--pillola); background: var(--paper); box-shadow: 0 2px 14px rgba(0, 0, 0, .07); }
.cerca-cc input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; outline: none !important; min-height: 40px; padding: 0; font-size: 16px; box-shadow: none !important; }
.cerca-cc button { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent, var(--azione)); color: var(--on-accent, #fff); display: grid; place-items: center; cursor: pointer; }
.chips-cc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip-cc { border: 0; background: var(--surface-2); color: var(--ink); border-radius: var(--pillola); padding: 10px 18px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; text-align: left; }
.chip-cc:hover { background: color-mix(in srgb, var(--azione-soft) 60%, var(--surface-2)); }
.chip-cc.attivo { background: var(--ink); color: var(--paper); }
.categorie-cc, .spunti-cc .chips-cc { justify-content: flex-start; }
.titolo-sezione-cc { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin: 26px 0 14px; }
.inizia-cc { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: none; padding: 0 0 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; text-align: left; }
.finta-casella-cc { flex: 1; min-height: 52px; display: flex; align-items: center; padding: 0 22px; border-radius: var(--pillola); background: var(--paper); color: var(--muted); font-size: 15.5px; box-shadow: inset 0 0 0 1px var(--line); }
.inizia-cc:hover .finta-casella-cc { box-shadow: inset 0 0 0 1px var(--line-forte); }

/* I post */
.elenco-post-cc { display: flex; flex-direction: column; }
.post-cc { padding: 22px 4px; border-bottom: 1px solid var(--line); }
.post-cc.in-evidenza { padding: 22px 16px; margin: 10px 0; border: 0; border-radius: var(--radius-lg, 22px); background: var(--paper); }
.testa-post-cc { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.chi-post-cc { min-width: 0; }
.riga-chi-cc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 15px; }
.riga-chi-cc a { color: var(--ink); font-weight: 600; }
.titolo-post-cc { display: block; color: var(--ink); text-decoration: none; font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; letter-spacing: -.4px; line-height: 1.25; overflow-wrap: anywhere; }
.titolo-post-cc:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-cc .segni-community { margin: 10px 0 0; }
.argomento-cc { display: inline-block; padding: 5px 14px; border-radius: var(--pillola); box-shadow: inset 0 0 0 1px var(--line-forte); font-size: 13.5px; font-weight: 600; }
.estratto-cc { color: var(--ink); font-size: 15px; line-height: 1.5; margin-top: 10px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.piede-post-cc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.piede-post-cc a { color: var(--ink); font-weight: 700; }
.vuoto-cc { padding: 34px 6px; color: var(--muted); font-size: 15px; }
.pagine-community { display: flex; justify-content: space-between; gap: 10px; margin: 14px 0; }
.testa-spazio-cc { display: flex; gap: 16px; align-items: flex-start; margin: 4px 0 18px; }
.testa-spazio-cc h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.6px; line-height: 1.15; }
.testa-spazio-cc .sotto { margin-top: 4px; }
.emblema-spazio { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); }
.emblema-spazio.club { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.emblema-spazio svg { width: 28px; height: 28px; }
.spunti-cc { margin: 6px 0 14px; display: grid; gap: 8px; }
.spunti-cc .chip-cc { font-weight: 500; font-size: 14px; padding: 9px 16px; }
.filtri-post-cc { margin: 10px 0 0; }
.contenuto-community .chips-cc.categorie-cc { margin: 0 0 12px; }

/* La discussione aperta */
.torna-community { margin: 0 0 12px; }
.discussione-aperta .titolo-discussione { font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; letter-spacing: -.5px; line-height: 1.22; margin: 8px 0 12px; overflow-wrap: anywhere; }
.segni-community { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.testa-risposta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.autore-community { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; min-width: 0; }
.iniziale-community { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--orange) 22%, var(--paper)); color: var(--orange); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.iniziale-community.team { background: var(--ink); color: var(--accent, #ebff38); font-family: var(--font-display, inherit); }
.testa-risposta .iniziale-community, .testa-conv-cc .iniziale-community { flex-basis: 36px; width: 36px; height: 36px; font-size: 15px; }
.scrivi-privato { font-size: 13px; }
.testo-community { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.6; margin: 12px 0; }
.gesti-community { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.gesti-community .come-link { font-size: 13px; }
.gesti-community .bottone.acceso { background: var(--azione-soft); }
.risposte-community { list-style: none; display: grid; gap: 4px; margin-top: 8px; }
.risposta-community { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.risposta-community:last-child { border-bottom: 0; }
.risposta-community.nuova { background: color-mix(in srgb, var(--green) 7%, transparent); border-radius: 14px; padding: 14px 12px; }
.risposta-community.soluzione { background: color-mix(in srgb, var(--green) 11%, transparent); border-radius: 14px; padding: 14px 12px; border-bottom-color: transparent; }
.risposta-community.nascosta { opacity: .6; }
.soluzione-community { box-shadow: inset 4px 0 0 var(--green); }
.soluzione-community .testo-community { margin: 6px 0; }
.rispondi-community { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.modulo-community .piede-guida { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; }
.rispondi-community .piede-guida .secondario { margin-right: auto; font-size: 13px; flex: 1 1 240px; }
.modulo-community textarea { width: 100%; }
.modulo-community .sotto { margin: 4px 0 12px; }
.segnala-community { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.elenco-segnalazioni { list-style: none; display: grid; gap: 10px; }

/* I messaggi */
.messaggi-cc { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); min-height: 520px; border-radius: var(--radius-lg, 22px); background: var(--paper); overflow: hidden; }
.colonna-lista-cc { padding: 22px 18px; border-right: 1px solid var(--line); min-width: 0; }
.colonna-lista-cc h2 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.colonna-lista-cc .sotto { margin: 8px 0 14px; font-size: 13px; }
.colonna-lista-cc .chips-cc { justify-content: flex-start; margin-bottom: 10px; }
.conversazioni-cc { list-style: none; margin: 0 -8px; }
.conversazione-cc { display: flex; align-items: flex-start; gap: 12px; padding: 12px 8px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.conversazione-cc:hover, .conversazione-cc.attiva { background: var(--surface-2); }
.conversazione-cc .riga-chi-cc { justify-content: space-between; font-size: 14.5px; }
.conversazione-cc.non-letta .ultimo-cc { font-weight: 700; color: var(--ink); }
.ultimo-cc { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pallino-cc { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); margin-top: 8px; }
.vuoto-messaggi-cc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 16px; color: var(--muted); }
.vuoto-messaggi-cc svg { width: 40px; height: 40px; color: var(--ink); margin-bottom: 6px; }
.vuoto-messaggi-cc b { color: var(--ink); font-size: 17px; }
.vuoto-messaggi-cc.destra { height: 100%; justify-content: center; }
.colonna-conv-cc { display: flex; flex-direction: column; min-width: 0; padding: 18px 22px; }
.torna-lista-cc { display: none; margin-bottom: 10px; }
.testa-conv-cc { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fila-messaggi-cc { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 0; overflow-y: auto; max-height: 56vh; }
.messaggio-cc { max-width: min(78%, 560px); align-self: flex-start; display: flex; flex-direction: column; gap: 4px; }
.messaggio-cc.mio { align-self: flex-end; align-items: flex-end; }
.bolla-cc { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; }
.messaggio-cc.mio .bolla-cc { border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--paper); }
.contesto-cc { font-size: 12.5px; color: var(--muted); }
.quando-cc { font-size: 12px; }
.scrivi-cc { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
.scrivi-cc textarea { flex: 1; min-height: 48px; resize: vertical; font-family: inherit; }

/* Le notifiche */
.testa-notifiche-cc { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 18px; }
.testa-notifiche-cc h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -1px; }
.gesti-notifiche-cc { display: flex; align-items: center; gap: 10px; }
.ingranaggio-cc { width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.ingranaggio-cc svg { width: 22px; height: 22px; }
.ingranaggio-cc.acceso { background: var(--ink); color: var(--paper); }
.impostazioni-cc h3 { font-size: 17px; font-weight: 800; }
.impostazioni-cc .sotto { margin: 4px 0 12px; }
.riga-impostazione-cc { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.riga-impostazione-cc > span { margin: 0 !important; color: var(--ink) !important; font-size: 14.5px !important; }
.riga-impostazione-cc select { flex: 0 1 300px; }
.notifiche-cc { list-style: none; }
.notifica-cc { display: flex; align-items: center; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.apri-notifica-cc { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 14px; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.apri-notifica-cc .iniziale-community { flex-basis: 52px; width: 52px; height: 52px; }
.frase-cc { font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
.notifica-cc.letta .frase-cc { color: var(--muted); }
.notifica-cc.letta .frase-cc b { color: var(--ink); }
.menu-voce-cc { position: relative; flex: 0 0 auto; }
.menu-voce-cc summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 50%; font-weight: 800; letter-spacing: 1px; color: var(--ink); }
.menu-voce-cc summary::-webkit-details-marker { display: none; }
.menu-voce-cc summary:hover { background: var(--surface-2); }
.tendina-cc { position: absolute; right: 0; top: 36px; z-index: 20; min-width: 260px; display: flex; flex-direction: column; padding: 6px; border-radius: 16px; background: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .16); }
.tendina-cc button { border: 0; background: none; text-align: left; font: inherit; font-size: 14.5px; color: var(--ink); padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.tendina-cc button:hover { background: var(--surface-2); }

@media (max-width: 860px) {
  /* Sul telefono il menu della community è una fila di capsule che scorre di lato. */
  .griglia-community { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .menu-community { position: static; flex-direction: row; overflow-x: auto; max-height: none; padding: 0; gap: 8px; background: none; scrollbar-width: none; }
  .menu-community::-webkit-scrollbar { display: none; }
  .menu-community .sep-cc, .titolo-gruppo-cc, .vuoto-club { display: none; }
  .gruppo-cc { display: contents; }
  .voce-cc, .club-cc, .forum-cc { flex: 0 0 auto; padding: 8px 14px; min-height: 40px; border-radius: var(--pillola); background: var(--paper); white-space: nowrap; font-size: 14px; }
  .club-cc .emblema-club { flex-basis: 26px; width: 26px; height: 26px; border-radius: 8px; }
  .club-cc .emblema-club svg { width: 16px; height: 16px; }
  .club-cc small, .freccia-cc { display: none; }
  .forum-cc { padding-left: 14px; }
  .voce-cc.attiva, .club-cc.attiva, .forum-cc.attiva { background: var(--ink); color: var(--paper); }
  .voce-cc.attiva .glifo-cc { color: var(--paper); }
  .benvenuto-cc { padding-top: 6px; }
  .messaggi-cc { grid-template-columns: minmax(0, 1fr); }
  .colonna-lista-cc { border-right: 0; }
  .messaggi-cc.con-conversazione .colonna-lista-cc { display: none; }
  .messaggi-cc:not(.con-conversazione) .colonna-conv-cc { display: none; }
  .torna-lista-cc { display: inline-block; }
  .colonna-conv-cc { padding: 16px; }
  .apri-notifica-cc .iniziale-community { flex-basis: 40px; width: 40px; height: 40px; }
}

/* Chi ha chiesto meno movimento al sistema (03-11-2026): nessuna animazione
   che si ripete né transizione lunga, ovunque, anche in quelle nate dopo le
   regole puntuali qui sopra. Restano gli stati finali. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}