/* ============================================================================
   yourWay (prodotto di Weeko) - sistema visivo
   Brand: viola Weeko (#7c3aed chiaro / #8b5cf6 marchi su scuro) su neutri CALDI, con
   l'arancione come accento costante (token --arancio*, regole d'uso in tokens.css).
   Tipografia: stack di sistema (niente Google Fonts: rete in meno, PWA offline ok).
   Ogni colore di testo su fondo e' verificato >= 4.5:1 (AA). I numeri di contrasto
   sono annotati dove la scelta non e' ovvia.
   NON TOCCARE alla leggera l'impianto tastiera/viewport iOS (html+body fixed, --app-height,
   .overlay, .kb-spazio) e i font >= 16px sui campi: i commenti qui e in app.js (Tastiera
   iPhone) spiegano perche' ogni pezzo sta dov'e'.
   ============================================================================ */

/* I token (colori, raggi, spaziature, motion, icone, focus) stanno in tokens.css,
   caricato PRIMA di questo file e condiviso con guida.html. */

/* ---------- 1. BASE ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
/* html inchiodato come il body: senza questo iOS scrolla il DOCUMENTO quando apre la tastiera
   (scrollY negativo) e nessuno scroll interno funziona davvero. Si scrolla solo dentro i
   contenitori (.settings-scroll, #messages, ...). */
html { background: var(--bg); position: fixed; overflow: hidden; top: 0; left: 0; right: 0; }
body {
  touch-action: manipulation; /* niente zoom da doppio tap: il layout resta inchiodato */
  /* Stack di sistema: SF su iPhone/Mac, Segoe su Windows, Roboto su Android.
     Zero richieste di rete, zero FOUT, e la PWA offline non perde il carattere. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  /* --app-height = altezza REALE visibile, aggiornata da JS su visualViewport (segue la tastiera);
     default 100dvh quando il JS non gira o la tastiera è chiusa. */
  height: var(--app-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none; /* niente rimbalzo/pull della finestra: a chat vuota darebbe il drag invertito */
  /* Inchiodata in alto: su iOS la pagina non deve MAI scrollare come finestra (tastiera inclusa).
     Ancorata a top/left/right (niente bottom): quando l'altezza cala per la tastiera, il composer
     sale sopra di essa da solo, senza alcun transform sul body. */
  position: fixed;
  top: 0; left: 0; right: 0;
}

/* Titoli: stessa famiglia del testo, gerarchia per peso e crenatura */
h1, h2, h3, .header-title strong {
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.hidden { display: none !important; }
/* Nascosto alla vista ma letto dai lettori di schermo (es. il titolo della schermata di accesso). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 2. HEADER ---------- */
header {
  display: flex; align-items: center; gap: var(--s3);
  padding: calc(env(safe-area-inset-top) + 12px) var(--s4) 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
/* Testata: il marchio yourWay al posto del nome scritto, e sotto il claim. Il marchio ha due file a colori fissi scambiati da data-theme:
   un SVG con media query interna, via <img>, seguirebbe il tema di SISTEMA. */
.header-title { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; gap: 2px; }
.header-title strong { font-size: 18px; }
/* 30px di altezza = ~17px di testo, sopra il minimo di 16 fissato dal brand */
.header-mark { height: 30px; width: auto; display: block; }
/* Claim (e stato dell'assistente) in arancione: 5.18:1 su --panel chiaro, 7.37:1 su scuro. */
#status-line { font-size: 12px; color: var(--arancio); }
/* Badge "IA" della testata: dichiarazione di natura artificiale sempre visibile, richiesta al
   fornitore dall'art. 50 par. 1 e 5 del Reg. UE 2024/1689. Stessa coppia colore/fondo del .badge
   delle approvazioni, in arancione: --on-arancio su --arancio-fill = 5.18:1 in chiaro, 8.11:1 in
   scuro (AA). Non nasconderlo e non renderlo piu' tenue. */
.header-brand { display: flex; align-items: center; gap: 6px; }
.ia-badge {
  background: var(--arancio-fill); color: var(--on-arancio); border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px;
  line-height: 1.4; text-transform: uppercase; cursor: default; user-select: none;
}
/* Schede a destra del titolo, poi Guida/Impostazioni/voce. Se le schede del ruolo non ci stanno,
   la fila scorre di lato (mai tagliata, mai su due righe). */
nav {
  margin-left: auto; display: flex; align-items: center; gap: var(--s1); order: 2;
  min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
nav::-webkit-scrollbar { display: none; }
nav .tab { flex: none; }
.header-azioni { display: flex; align-items: center; gap: var(--s1); order: 3; flex: none; }

/* Schede testuali (Chat / Approvazioni) */
.tab {
  position: relative;
  background: transparent; color: var(--muted); border: 1px solid transparent;
  padding: 8px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tab:active { background: var(--panel-2); }
.tab.active { background: var(--accent-soft); color: var(--accent-ink); }
/* Contatore delle approvazioni in coda: arancione, l'accento costante (stessa coppia del badge IA). */
.badge {
  background: var(--arancio-fill); color: var(--on-arancio); border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; padding: 2px 7px; min-width: 20px; text-align: center;
}
/* Bottoni-icona della testata (guida, impostazioni, voce): quadrati, 44px reali */
.tab.help {
  text-decoration: none; color: var(--muted);
  border: 1px solid var(--line); background: var(--panel);
  width: 44px; min-width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.tab.help:active { background: var(--panel-2); color: var(--accent-ink); }
.tab.help.on { color: var(--accent-ink); border-color: var(--accent-ink); background: var(--accent-soft); }

/* Fino a 1000px le schede del gestionale non stanno accanto al titolo: la testata va su due righe
   (marchio e Guida/Impostazioni/voce sopra, schede sotto, che scorrono di lato se serve). */
@media (max-width: 1000px) {
  header { flex-wrap: wrap; row-gap: var(--s2); }
  .header-title { order: 1; flex: 1; min-width: 0; }
  .header-azioni { order: 2; }
  nav { order: 3; flex-basis: 100%; margin-left: 0; }
}
/* Schermi stretti (iPhone): header su due righe, mai tagliato.
   Riga 1: nome. Riga 2: schede allineate a destra. */
@media (max-width: 600px) {
  header { flex-wrap: wrap; row-gap: var(--s2); padding-bottom: 10px; }
  #status-line { display: none; }
  .header-title strong { font-size: 17px; }
  /* riga 1: marchio + Guida/Impostazioni/voce; riga 2: le schede, che scorrono di lato */
  .header-title { order: 1; flex: 1; min-width: 0; }
  .header-azioni { order: 2; }
  nav { order: 3; flex-basis: 100%; margin-left: 0; }
  .tab { padding: 8px 12px; font-size: 13.5px; }
}
header, main, #composer { max-width: 100%; }

/* ---------- 3. CHAT ---------- */
main { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
#messages {
  /* padding-top 64px: i tre bottoni flottanti (aggiorna/stella/lente) stanno a top:10px e sono
     alti 44px; con meno spazio le prime bolle ci finivano sotto. */
  flex: 1; overflow-y: auto; padding: 64px var(--s3) var(--s3);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
/* Con la ricerca aperta i tre bottoni flottanti sono nascosti: lo spazio in cima non serve più */
main:has(#search-bar:not(.hidden)) #messages { padding-top: var(--s3); }
/* Spaziatura via margini (non gap): le bolle "attaccate" dello stesso mittente stanno più vicine */
#messages > * { margin-top: 7px; }
#messages > .msg.followup { margin-top: 2px; }
#messages > .day-sep { margin-top: var(--s4); }
.msg {
  max-width: 86%; padding: 9px 13px; border-radius: var(--r-md);
  font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
  position: relative; touch-action: pan-y; /* lo slide orizzontale resta a noi, lo scroll al browser */
}
.msg.user {
  align-self: flex-end; background: var(--accent); color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: var(--sh-1);
}
.msg.weeko {
  align-self: flex-start; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-bottom-left-radius: 5px;
  box-shadow: var(--sh-1);
}
.msg.error {
  align-self: center; background: var(--no-soft); border: 1px solid var(--no);
  color: var(--no); font-size: 13.5px; font-weight: 600; box-shadow: none;
}

/* menu contestuale del messaggio (long-press / click destro) */
#msg-menu {
  position: fixed; z-index: 80; min-width: 168px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: var(--s1); display: flex; flex-direction: column;
}
#msg-menu button {
  background: transparent; border: none; text-align: left; cursor: pointer;
  padding: 11px 14px; border-radius: var(--r-xs); font-size: 15px; color: var(--text);
  font-family: inherit; min-height: 44px;
}
#msg-menu button:active, #msg-menu button:hover { background: var(--panel-2); }
#msg-menu button.danger { color: var(--no); }
/* "Copia messaggio" in evidenza: prima voce, accento e leggermente più marcata */
#msg-menu button.primary { color: var(--accent-ink); font-weight: 700; }
#msg-menu button.primary:active, #msg-menu button.primary:hover { background: var(--accent-soft); }

/* toast breve in basso.
   Ancorato a --app-height (altezza REALE visibile) e non a bottom: un position:fixed guarda la
   viewport di LAYOUT, che con la tastiera aperta non si accorcia - il toast finiva dietro la
   tastiera. Il bordo inferiore si posa via translateY(-100%). */
#toast {
  position: fixed; left: 50%;
  top: calc(var(--app-height, 100dvh) - 22px - env(safe-area-inset-bottom));
  transform: translate(-50%, calc(-100% + 12px)); z-index: 200;
  background: var(--text); color: var(--bg);
  padding: 10px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
  box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none; transition: opacity var(--t-slow), transform var(--t-slow) var(--ease);
}
#toast.show { opacity: 1; transform: translate(-50%, -100%); }

/* riga di reazioni emoji in cima al menu contestuale (qui l'emoji e' contenuto, resta) */
.reactions-row {
  display: flex; gap: 2px; padding: 3px 2px 6px; margin-bottom: var(--s1);
  border-bottom: 1px solid var(--line); justify-content: space-between;
}
.reactions-row button {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 6px; border-radius: var(--r-sm);
  font-family: inherit; min-width: 44px; min-height: 44px;
}
.reactions-row button:active, .reactions-row button:hover { background: var(--panel-2); }
.reactions-row button.attiva { background: var(--accent-soft); }

/* slide-per-rispondere: la bolla segue il dito, la freccia si accende alla soglia */
.msg:not(.sliding) { transition: transform .18s var(--ease); }
.msg.sliding::before {
  content: "↩"; position: absolute; left: -26px; top: 50%;
  transform: translateY(-50%); color: var(--muted); opacity: .45; font-size: 17px;
}
.msg.slide-ok::before { color: var(--accent-ink); opacity: 1; }
.msg .txt { display: block; }
.msg .txt strong { font-weight: 700; }
.msg .txt em { font-style: italic; }
.msg .txt del { opacity: .7; }
.msg .txt code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em;
  background: var(--overlay-soft); border-radius: 4px; padding: 0 4px;
}
.msg.user .txt code { background: rgba(255, 255, 255, .22); }
.msg .meta {
  display: block; text-align: right; font-size: 11px; line-height: 1;
  color: var(--muted); margin-top: 5px; user-select: none;
}
/* .92 = 5,1:1 sull'accento (con .82 sarebbe 4,34:1, sotto AA per un testo di 11px) */
.msg.user .meta { color: rgba(255, 255, 255, .92); }
.msg.failed { opacity: .9; }

/* pallina reazione emoji, agganciata in basso alla bolla (stile WhatsApp) */
.reaction-badge {
  position: absolute; bottom: -9px; left: var(--s2);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill);
  min-width: 21px; height: 21px; padding: 0 3px;
  font-size: 12.5px; line-height: 19px; text-align: center;
  box-shadow: var(--sh-1); user-select: none;
}
/* spazio extra sotto le bolle con reazione, così la pallina non tocca il messaggio dopo */
#messages > .msg[data-reaction] { margin-bottom: var(--s3); }

/* link cliccabili dentro le bolle */
.msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.msg.user a { color: #fff; }
.msg.weeko a { color: var(--accent-ink); }

/* card di anteprima del link (stile WhatsApp, sotto il testo) */
.link-card {
  display: flex; margin-top: var(--s2); border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--panel-2);
  text-decoration: none; color: var(--text); max-width: 320px;
}
.msg.user .link-card { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); color: #fff; }
.link-card .lc-img { width: 84px; min-width: 84px; height: 84px; object-fit: cover; background: var(--line); }
.link-card .lc-body { padding: var(--s2) 10px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.link-card .lc-site { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.msg.user .link-card .lc-site { color: rgba(255, 255, 255, .85); }
.link-card .lc-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.link-card .lc-desc {
  font-size: 12px; color: var(--muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.msg.user .link-card .lc-desc { color: rgba(255, 255, 255, .8); }

/* allegati visibili in chat: immagine e card file */
.msg .att-img {
  display: block; max-width: 100%; max-height: 320px; width: auto;
  border-radius: var(--r-sm); margin-bottom: var(--s1); background: var(--overlay-soft);
}
.msg .att-file, .registro-voce .att-file {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--overlay-soft); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; margin-bottom: var(--s1); cursor: pointer; color: inherit; font-family: inherit;
  min-height: 44px;
}
.msg.user .att-file { border-color: rgba(255, 255, 255, .32); }
.msg .att-file:active, .registro-voce .att-file:active { filter: brightness(.95); }
.att-file svg { flex-shrink: 0; opacity: .9; }
.att-file .af-info { min-width: 0; flex: 1; }
.att-file .af-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file .af-size { font-size: 11.5px; opacity: .75; margin-top: 1px; }

/* "Riprova" è l'UNICA via per rimandare un messaggio fallito: area di tocco piena (>=44px). */
.retry {
  align-self: flex-end; background: transparent; border: none; cursor: pointer;
  color: var(--no); font-size: 13px; font-weight: 700; text-decoration: underline;
  min-height: 44px; padding: var(--s1) 10px; font-family: inherit;
  display: inline-flex; align-items: center;
}
#messages > .retry { margin-top: 0; }

/* separatore per giorno, stile WhatsApp */
.day-sep {
  align-self: center; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; font-weight: 700;
  padding: 5px 14px; border-radius: var(--r-pill); box-shadow: var(--sh-1);
}
/* divisore "messaggi non letti": a tutta larghezza, colore accento */
.unread-sep {
  align-self: stretch; text-align: center; background: transparent;
  border: none; border-top: 1px solid var(--accent-ink); border-radius: 0;
  color: var(--accent-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 0 2px; margin-top: 6px;
}

/* citazione dentro la bolla ("rispondi a") */
.msg .quote {
  border-left: 3px solid var(--accent-ink); background: var(--overlay-soft);
  border-radius: 6px; padding: 6px 9px; font-size: 13px; margin-bottom: 6px;
  opacity: .92; max-height: 64px; overflow: hidden; cursor: pointer;
}
.msg.user .quote { border-left-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .16); }
/* lampo di evidenziazione quando salti a un messaggio dalla citazione */
.msg.flash { animation: flashRing 1.6s var(--ease); }
@keyframes flashRing {
  0%, 60% { box-shadow: 0 0 0 3px var(--accent-ring); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* indicatore "sta scrivendo…": tre puntini che respirano */
.msg.typing { padding: 14px; }
.dots { display: inline-flex; gap: 4px; }
.dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: dotpulse 1.2s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dotpulse {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* evidenziazione della ricerca */
.msg mark { background: var(--warn-soft); color: var(--text); border-radius: 3px; padding: 0 2px; }
.msg mark.current { background: var(--accent); color: #fff; }
/* Scuro, bolla dell'utente: --warn-soft e' trasparente e si fonde col viola, --text sopra sta a
   4,1:1 (sotto AA). Il bianco regge 5,0:1. In chiaro --warn-soft e' pieno e resta --text. */
:root[data-theme="dark"] .msg.user mark { color: #fff; }

/* badge "nuovi messaggi" quando stai rileggendo più su */
#new-msgs {
  position: absolute; right: var(--s4); bottom: calc(env(safe-area-inset-bottom) + 82px);
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  border-radius: var(--r-pill); padding: 10px 16px; font-size: 13.5px; font-weight: 700;
  box-shadow: var(--sh-2); z-index: 5; font-family: inherit; min-height: 44px;
}
/* con la barra della citazione aperta il badge sale, senza coprirla */
main:has(#quote-bar:not(.hidden)) #new-msgs { bottom: calc(env(safe-area-inset-bottom) + 128px); }

/* ricerca / preferiti / aggiorna: tre gemelli flottanti in cima alla chat */
#search-btn, #starred-btn, #refresh-btn {
  position: absolute; top: 10px; width: 44px; height: 44px;
  border-radius: 50%; background: var(--panel); border: 1px solid var(--line);
  color: var(--accent-ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; box-shadow: var(--sh-1);
  transition: background var(--t-fast) var(--ease);
}
#search-btn:active, #starred-btn:active, #refresh-btn:active { background: var(--accent-soft); }
#search-btn { right: var(--s3); }
#starred-btn { right: 64px; }
#refresh-btn { right: 116px; }
#refresh-btn svg { transition: transform var(--t-slow); }
/* Chat per utente: "La tua chat con l'assistente" in alto a sinistra, accanto ai tre bottoni
   flottanti (che occupano i 160px a destra) e come loro sopra le bolle che scorrono: un'etichetta
   col fondo del pannello, non un bottone (niente tocco). Sparisce con la ricerca aperta, come loro. */
.chat-etichetta {
  position: absolute; top: 16px; left: var(--s3); max-width: calc(100% - 184px); height: 32px; margin: 0;
  display: flex; align-items: center; z-index: 4; pointer-events: none;
  padding: 0 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh-1);
  font-size: 13px; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
main:has(#search-bar:not(.hidden)) .chat-etichetta { display: none; }
#refresh-btn.spin svg { animation: refresh-spin .7s var(--ease); }
@keyframes refresh-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

#search-bar {
  display: flex; align-items: center; gap: var(--s1); padding: var(--s2) var(--s3);
  background: var(--panel); border-bottom: 1px solid var(--line);
}
/* 16px: sotto questa soglia iOS zooma al focus quando l'app gira in Safari (fuori dalla PWA
   installata) e il layout si sposta. Vale per TUTTI i campi dell'app. */
#search-bar input {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); border-radius: var(--r-pill); padding: 11px 14px; font-size: 16px;
  outline: none; font-family: inherit; min-height: 44px;
}
#search-bar input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-ring); }
#search-count { font-size: 12.5px; color: var(--muted); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
#search-bar button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 50%; width: 44px; height: 44px; cursor: pointer; flex-shrink: 0;
  font-family: inherit; display: flex; align-items: center; justify-content: center;
}
#search-bar button:active { background: var(--accent-soft); color: var(--accent-ink); }

/* carica la pagina precedente della cronologia */
#load-older {
  align-self: center; background: var(--panel); border: 1px solid var(--line);
  color: var(--accent-ink); border-radius: var(--r-pill); padding: 9px 18px;
  font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 44px;
}

/* barra della citazione sopra il composer */
#quote-bar {
  display: flex; align-items: center; gap: 10px; padding: var(--s2) var(--s3);
  background: var(--panel); border-top: 1px solid var(--line);
}
.quote-info {
  flex: 1; min-width: 0; border-left: 3px solid var(--accent-ink);
  padding-left: var(--s2); display: flex; flex-direction: column; gap: 1px;
}
.quote-label { font-size: 11px; color: var(--accent-ink); font-weight: 700; }
#quote-text {
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#quote-bar button {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; padding: var(--s1) var(--s2);
  min-width: 44px; min-height: 44px; flex-shrink: 0; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}

/* tabelle markdown (report ADV & co.).
   La STRUTTURA sta su .md-table SENZA ".msg" davanti: la stessa applicaFormato costruisce le
   tabelle anche nel pannello Preferiti (.star-item .si-text), che non è dentro una bolla. Scritte
   ".msg .md-table" quelle regole lì non arrivavano: tabella senza bordi, senza a-capo e con
   l'allineamento della riga |---:| ignorato (una cella md-al-right finiva centrata).
   Sotto .msg resta solo il COLORE, che è l'unica cosa a dipendere dal fondo della bolla. */
.md-table { overflow-x: auto; margin: 6px 0; border-radius: var(--r-xs); }
/* auto + max-width, non width:100%: la tabella è larga quanto le serve e non un pixel di più.
   Con width:100% ogni bolla che conteneva una tabella veniva stirata al massimo consentito
   (86%): su desktop una tabella di due righe faceva una bolla da 1080px invece di 121px. */
.md-table table {
  border-collapse: collapse; font-size: 13px; line-height: 1.35;
  width: auto; max-width: 100%; table-layout: auto;
}
.md-table th, .md-table td {
  border: 1px solid var(--line); padding: 6px 9px; text-align: left;
  /* break-word e NON anywhere: mandano a capo entrambi, ma solo "anywhere" abbassa la larghezza
     MINIMA della colonna a un carattere - ed è così che "128.450" veniva reso "128" / ".45" / "0"
     e una tabella a 12 colonne diventava verticale. Con break-word la colonna non scende sotto il
     numero (o la parola) più lungo: quando non ci sta, la tabella scorre nel contenitore invece di
     sbriciolare il contenuto. Meglio 126px di scorrimento che un numero illeggibile. */
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
/* Il link è l'unica cosa che conviene spezzare in mezzo: un URL incollato è una "parola" da 200
   caratteri e da solo allargherebbe la tabella oltre qualsiasi misura utile. Detto qui e non
   lasciato a ".msg a", che nei Preferiti non si applica. */
.md-table a { overflow-wrap: anywhere; }
.md-table th { background: var(--panel-2); font-weight: 700; }
/* Allineamento chiesto nella riga |:---|---:|, messo dal formatter: vince sul default a sinistra.
   Prima qui c'era un "tutte le colonne tranne la prima a destra" che lo ignorava del tutto. */
.md-table .md-al-left { text-align: left; }
.md-table .md-al-center { text-align: center; }
.md-table .md-al-right { text-align: right; }
.msg.user .md-table th, .msg.user .md-table td { border-color: rgba(255, 255, 255, .3); }
.msg.user .md-table th { background: rgba(255, 255, 255, .14); }
.msg hr { border: none; border-top: 1px solid var(--line); margin: var(--s2) 0; }

/* ---------- 4. COMPOSER ---------- */
#composer {
  display: flex; gap: var(--s2); align-items: center; position: relative;
  padding: 10px var(--s3) calc(env(safe-area-inset-bottom) + 12px);
  background: var(--panel); border-top: 1px solid var(--line);
}
#text-input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); border-radius: var(--r-pill); padding: 12px 16px; font-size: 16px; outline: none;
  font-family: inherit; min-height: 44px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#text-input::placeholder { color: var(--muted); }
#text-input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-ring); }
#composer button {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
#composer button:active { transform: scale(.94); }
#attach-btn, #mic-btn { background: var(--panel-2); color: var(--accent-ink); border: 1px solid var(--line); }
#attach-btn:active, #mic-btn:active { background: var(--accent-soft); }
#send-btn { background: var(--accent); color: #fff; box-shadow: var(--sh-1); }
#send-btn:active { background: var(--accent-strong); }

/* Registrazione a TAP: la barra sostituisce l'INTERA riga (attach/mic/campo/invia nascosti),
   così il microfono non è visibile mentre registri e non può spostarsi né generare mouseleave. */
#composer.rec-mode #attach-btn,
#composer.rec-mode #mic-btn,
#composer.rec-mode #text-input,
#composer.rec-mode #send-btn { display: none; }
#composer.rec-mode #rec-bar { display: flex; }
#rec-bar {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 5px 6px; background: var(--panel-2);
  border: 1px solid var(--no); border-radius: var(--r-pill);
}
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--no); flex-shrink: 0;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
#rec-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--no); font-size: 15px; flex-shrink: 0; }
.rec-hint { flex: 1; color: var(--muted); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Annulla (sinistra) e Invia (destra): sempre visibili durante la registrazione */
#rec-cancel, #rec-send {
  border: none; cursor: pointer; flex-shrink: 0; font-family: inherit;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
#rec-cancel { background: transparent; color: var(--no); }
#rec-send { background: var(--accent); color: #fff; }
#rec-send:active { background: var(--accent-strong); }

/* ---------- 5. RISPOSTE RAPIDE E PROPOSTE ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-self: flex-start; max-width: 88%; }
.chip {
  background: var(--panel); color: var(--accent-ink);
  border: 1px solid var(--accent-ink); border-radius: var(--r-pill);
  padding: 9px 15px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; min-height: 44px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:active { background: var(--accent); color: #fff; border-color: var(--accent); }

.proposal-actions { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
.prop-btn {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px 17px; border-radius: var(--r-pill); border: 1px solid var(--line);
  min-height: 44px; transition: filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.prop-btn.si { background: var(--accent); color: #fff; border-color: transparent; }
.prop-btn.no { background: var(--panel-2); color: var(--text); }
.prop-btn:active { filter: brightness(.93); }
.prop-btn:disabled { opacity: .45; cursor: default; }

/* ---------- 6. APPROVAZIONI ---------- */
/* safe-area in fondo: senza, gli ultimi bottoni "Approva/Rifiuta" finiscono sotto l'home
   indicator dell'iPhone e non si toccano. */
#approvals-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4) var(--s4) calc(env(safe-area-inset-bottom) + 16px);
}
.empty { color: var(--muted); text-align: center; margin-top: 40px; }
.approval {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s4);
  box-shadow: var(--sh-1);
}
.approval .kind {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent-ink); font-weight: 700;
}
.approval h3 { font-size: 17px; margin: 6px 0 2px; }
.approval .to { font-size: 13px; color: var(--muted); margin-bottom: var(--s2); }
.approval .body {
  font-size: 14px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 12px; white-space: pre-wrap; margin-bottom: var(--s3);
  max-height: 180px; overflow-y: auto;
}
.approval .actions { display: flex; gap: 10px; }
.approval button {
  flex: 1; padding: 12px; border-radius: var(--r-sm); border: none;
  font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 44px;
}
.btn-approve { background: var(--accent); color: #fff; }
.btn-approve:active { background: var(--accent-strong); }
.btn-reject { background: transparent; color: var(--muted); border: 1px solid var(--line) !important; }
/* Rifiuto in corso: si accende solo il bordo. Il rosso pieno resta al bottone che
   CONFERMA il rifiuto, altrimenti nel pannellino ci sono tre rossi che gridano insieme. */
.btn-reject.attivo { color: var(--text); border-color: var(--no) !important; }

/* card di approvazione dentro la chat */
.approval.inline { align-self: flex-start; max-width: 88%; border-left: 3px solid var(--accent); }
.appr-atts { font-size: 12.5px; color: var(--muted); margin: -4px 0 10px; word-break: break-word; }
.decision-note { font-size: 13px; font-weight: 600; color: var(--muted); }
.decision-note.ok { color: var(--ok); }
.decision-note.no { color: var(--no); }
/* "da verificare" (pratica interrotta da un riavvio, esito non confermato): avviso, non errore */
.decision-note.warn { color: var(--warn); }
.approval .report-pdf-btn { margin: var(--s2) 0 2px; align-self: flex-start; }
/* Pratica proposta dall'assistente sul gestionale (tariffe, chiusure, prenotazioni): una riga per
   voce con il prima e il dopo, cosi' chi approva vede cosa cambia prima di decidere. */
.modifiche { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 var(--s3); }
.modifica { font-size: 13.5px; line-height: 1.45; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; word-break: break-word; }
.modifica-voce { display: block; font-weight: 700; color: var(--text); }
.modifica-prima { color: var(--muted); }
.modifica-freccia { color: var(--muted); padding: 0 4px; }
.modifica-dopo { color: var(--text); font-weight: 600; }
/* Pratica sospesa o con un avviso dell'assistenza (una persona di Weeko): colore di avviso, a capo
   fra il motivo e la spiegazione. */
.nota-assistenza { font-size: 13px; line-height: 1.45; color: var(--text); background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 6px; padding: var(--s2) 10px; margin: 2px 0 10px; white-space: pre-line; word-break: break-word; }
/* Conseguenze di una funzione riservata al titolare (copertura totale, C13): stesso riquadro dell'avviso. */
.conseguenze { font-size: 13px; line-height: 1.45; color: var(--text); background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 6px; padding: var(--s2) 10px; margin: 6px 0 8px; word-break: break-word; }
/* Consegna una tantum a chi approva (link d'invito, indirizzo del feed): testo, campo da copiare, bottone. */
.consegna { display: flex; flex-direction: column; gap: var(--s2); }
.consegna p { margin: 0; line-height: 1.45; color: var(--text); }
.consegna input { min-height: 44px; font: inherit; font-size: 14px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--panel); color: var(--text); }
.consegna .btn-approve { align-self: flex-start; min-height: 44px; }

/* storico approvazioni */
.section-title { font-size: 15px; font-weight: 700; color: var(--muted); margin: 6px 2px 0; }
.approval.history { opacity: .85; }
.approval.history .body { max-height: 90px; }

/* Pannellino "motivo del rifiuto": chip rapide sotto i bottoni della card. Target tap >=44px. */
.motivo-rifiuto { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.motivo-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.motivo-chip {
  min-height: 44px; padding: 9px 15px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; font-family: inherit;
}
.motivo-chip:active { background: var(--accent-soft); border-color: var(--accent-ink); }
.motivo-altro { display: flex; gap: var(--s2); }
/* min-width: 0 (riga 59 del tabellone): un campo di testo in una riga flex ha di suo la larghezza minima di circa 20
   caratteri; a 320 px, nella card stretta della chat, spingeva "Rifiuta" di circa 10 px oltre il bordo della card */
.motivo-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 16px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-family: inherit;
}
.motivo-input:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-ring); }
.motivo-conferma {
  min-height: 44px; padding: 10px 18px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--no-fill); color: var(--on-no); border: none; font-size: 13.5px; font-weight: 700; font-family: inherit;
}
.motivo-conferma:active { filter: brightness(.92); }
.motivo-fondo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.motivo-link {
  min-height: 44px; padding: var(--s2) 2px; background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--no); text-decoration: underline;
}
.motivo-link.muted { color: var(--muted); text-decoration: none; }

/* ---------- 7. OVERLAY E ACCESSO ---------- */
.overlay {
  /* Alti quanto la viewport VISIBILE (tastiera esclusa), come il body: con inset:0 l'overlay
     restava alto quanto la viewport intera e lo scroll interno "non sapeva" della tastiera
     (campi coperti + effetto elastico). --app-height la tiene aggiornata seguiViewport. */
  position: fixed; top: 0; left: 0; right: 0; height: var(--app-height, 100dvh); background: var(--bg);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.pin-card { display: flex; flex-direction: column; align-items: center; gap: var(--s3); width: 292px; text-align: center; }
/* il form non deve alterare il layout della card: i suoi campi restano flex-item della pin-card */
#login-form { display: contents; }
/* Marchio yourWay al posto del titolo testuale */
.pin-card .brand-mark { height: 34px; width: auto; margin-bottom: -2px; }
.pin-card h1 { font-size: 26px; }
.pin-card p { color: var(--muted); font-size: 14px; }
/* Una riga sotto il marchio: chi apre l'app la prima volta deve sapere cos'e', non solo come
   si chiama. Stesse parole della testata (#status-line): CLAIM_PRODOTTO in app.js. */
/* In arancione: #c2410c su --bg chiaro = 4.64:1, #fb923c su --bg scuro = 8.11:1. */
.pin-card .claim { font-size: 15px; margin-top: -6px; color: var(--arancio); }
/* Dichiarazione art. 50 Reg. UE 2024/1689 sulla schermata di accesso: arriva prima del login e
   deve restare leggibile, non e' una nota a pie' di pagina. --muted su --bg e' gia' verificato AA. */
.pin-card .claim-ia { font-size: 12px; margin-top: 2px; }
.pin-card input {
  width: 100%; text-align: center; letter-spacing: 8px; font-size: 22px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-md); padding: 13px; outline: none; font-family: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pin-card input:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-ring); }
.pin-card input.cred { letter-spacing: normal; font-size: 16px; text-align: left; }
.pin-card button {
  width: 100%; padding: 13px; border-radius: var(--r-md); border: none;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  font-family: inherit; min-height: 48px;
  transition: background var(--t-fast) var(--ease);
}
.pin-card button:active { background: var(--accent-strong); }
.pin-card button.linklike {
  background: none; border: none; color: var(--accent-ink);
  font-size: 14px; text-decoration: underline; cursor: pointer; padding: 0;
}
/* Hover dei link secondari in arancione (solo dove esiste un puntatore: al tocco l'hover resta
   "appiccicato"). Il colore di riposo resta il viola del sistema. */
@media (hover: hover) {
  .pin-card button.linklike:hover { color: var(--arancio); }
}
.pin-card .info-msg { color: var(--muted) !important; }
.pin-card .ok-msg { color: var(--ok) !important; }
.pin-error { color: var(--no) !important; font-weight: 600; }

/* Il marchio segue il tema DELL'APP: un SVG con media query interna, caricato via <img>, vede
   solo il tema di SISTEMA e su un dispositivo con tema discorde diventa illeggibile. Per questo
   ci sono due file (chiaro e scuro) e si mostra quello giusto. */
.brand-scuro { display: none; }
:root[data-theme="dark"] .brand-chiaro { display: none; }
:root[data-theme="dark"] .brand-scuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-chiaro { display: none; }
  :root:not([data-theme="light"]) .brand-scuro { display: block; }
}

/* accesso in due passi: email → codice.
   I due passi sono contenitori "trasparenti" (display: contents) come già #login-form: i loro
   figli restano flex-item della .pin-card, così passare dall'uno all'altro non cambia di una
   virgola il layout della card. .hidden ha !important e vince su display: contents. */
#passo-email, #passo-codice, #codice-form { display: contents; }
.pin-card .campo-label { color: var(--muted); font-size: 14px; align-self: flex-start; }
.codice-dest { line-height: 1.45; }
.codice-caselle { display: flex; gap: 5px; width: 100%; }
/* Le caselle si spartiscono la larghezza della card: il numero lo decide l'HTML (oggi 8, quante
   ne manda il sistema) e il layout si adatta da solo. font-size 20px: sopra i 16px sotto i quali
   iOS zooma al focus, e abbastanza stretto da far stare 8 cifre su un telefono da 375px. */
.pin-card .cifra {
  flex: 1 1 0; min-width: 0; width: auto;
  letter-spacing: normal; font-size: 20px; font-weight: 700;
  padding: 12px 0; font-family: inherit; border-radius: var(--r-sm);
}
.pin-card .cifra.piena { border-color: var(--accent-ink); background: var(--accent-soft); }
.rinvio { font-size: 13px; }
/* I due link sotto le caselle: area di tocco piena (44px, regola iOS) senza che l'ingombro
   visivo cresca - i margini negativi riassorbono lo spazio in più. */
.pin-card button.linklike { min-height: 44px; margin: -9px 0; }

/* Login su iOS: la card è ancorata in alto (non centrata) così i campi restano SEMPRE sopra la
   tastiera; l'overlay può comunque scorrere se lo schermo è molto basso o il testo è ingrandito. */
#login-overlay {
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 11vh 16px calc(env(safe-area-inset-bottom) + 24px);
}

/* ---------- 8. IMPOSTAZIONI ---------- */
/* L'overlay resta a tutto schermo; il contenuto è una colonna ancorata in alto e scrollabile,
   niente centratura verticale (una lista lunga centrata sta male). */
#account-overlay, #admin-overlay, #gest-overlay { align-items: flex-start; justify-content: center; }
.settings {
  width: min(460px, 100%); height: 100%; display: flex; flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) var(--s4) var(--s4);
}
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding-bottom: var(--s3); margin-bottom: 2px;
}
.settings-head-l { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.settings-head h1 { font-size: 26px; }
.settings-x {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.settings-x:active { background: var(--panel-2); color: var(--text); }
.settings-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s5); overscroll-behavior: contain; }
/* Respiro-tastiera: spazio REALE in fondo al contenitore mentre un campo ha il focus, così si
   scorre sopra la tastiera anche quando iOS non aggiorna la viewport (PWA installata). */
.kb-spazio { padding-bottom: 48vh !important; }

.settings-sec { margin-top: var(--s5); }
.settings-sec:first-child { margin-top: var(--s2); }
.settings-label {
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  margin: 0 var(--s1) var(--s2);
}
/* Gruppo = lista raggruppata con divisori interni (affordance nativa delle impostazioni,
   non una card decorativa): una sola cornice per sezione, righe separate da hairline. */
.settings-group {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--sh-1);
}
.srow {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 54px; padding: var(--s3) var(--s4); background: transparent; border: none;
  border-bottom: 1px solid var(--line-soft); color: var(--text);
  font-family: inherit; font-size: 15.5px; text-align: left; cursor: pointer;
}
.settings-group > .srow:last-child, .settings-group > *:last-child .srow { border-bottom: none; }
.settings-group > *:last-child { border-bottom: none; }
/* Gruppo dentro un gruppo (la lista credenziali sta dentro la sezione): niente cornice
   doppia con angoli tondi annidati, e' solo la continuazione della lista. */
.settings-group .settings-group {
  border: none; border-radius: 0; box-shadow: none; background: transparent;
  border-bottom: 1px solid var(--line-soft);
}
.settings-group .settings-group:empty { border-bottom: none; }
.srow:active { background: var(--panel-2); }
a.srow { text-decoration: none; } /* riga-collegamento (es. al libretto): stesso aspetto delle righe-bottone */
.srow-static { cursor: default; }
.srow-static:active { background: transparent; }
.srow-l { font-weight: 500; display: flex; align-items: center; gap: 10px; min-width: 0; }
.srow-l .ico { color: var(--muted); }
.srow-feat .srow-l { font-weight: 700; }
.srow-feat .srow-l .ico { color: var(--accent-ink); }
.srow-chev { color: var(--muted); flex: none; display: flex; }
.srow-feat .srow-chev { color: var(--accent-ink); }
.srow-chip {
  font-size: 13.5px; font-weight: 700; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-ink);
  white-space: nowrap;
}
.srow-chip.ghost-chip { background: var(--panel-2); color: var(--muted); font-weight: 600; }
.srow-chip.chip-ok { background: var(--ok-soft); color: var(--ok); }
/* chip che fa da bottone (es. "Rimuovi"): area di tocco da 44px, regola di casa */
.srow-chip.chip-bottone { min-height: 44px; display: inline-flex; align-items: center; border: none; cursor: pointer; font-family: inherit; }
.srow-danger .srow-l { color: var(--no); font-weight: 600; }
.srow-danger .srow-l .ico, .srow-danger .srow-chev { color: var(--no); }

/* pannello che si apre sotto una riga (credenziali) */
.pass-panel { padding: var(--s1) var(--s4) var(--s4); display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.pass-hint { color: var(--muted); font-size: 13px; padding: var(--s3) var(--s4) 2px; line-height: 1.5; }
.pass-panel .cred {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-md); padding: 12px 14px; font-size: 16px; outline: none; font-family: inherit;
}
.pass-panel .cred:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-ring); }
.btn-primary {
  width: 100%; padding: 13px; border-radius: var(--r-md); border: none;
  background: var(--accent); color: #fff; font-size: 15.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; min-height: 48px;
}
.btn-primary:active { background: var(--accent-strong); }
.srow-note { color: var(--muted); font-size: 13px; padding: 2px var(--s4) var(--s3); line-height: 1.5; }
.srow-note.ok-msg { color: var(--ok); font-weight: 600; }
/* esito negativo di un salvataggio: rosso, mai lo stesso grigio della conferma */
.srow-note.err-msg { color: var(--no); font-weight: 600; }

/* Stato delle caselle collegate (Impostazioni → Account e pannello admin): una sola palette per i
   due posti. I token semantici di tokens.css sono già tarati AA nei due temi: qui non si inventa
   nessun colore nuovo. */
.coll-ok { color: var(--ok); }
.coll-off { color: var(--muted); }
.srow-note.coll-ok { font-weight: 600; }
/* La riga di stato appartiene al bottone che ha sopra: si stringe a lui e non al divisore. */
.coll-stato { padding-top: 0; margin-top: -4px; }
/* :not(.hidden): quando la riga di stato non c'è (chiamata fallita) il divisore resta al suo
   posto. Dove :has() non esiste la regola cade da sola e si torna al divisore sempre presente. */
.srow:has(+ .coll-stato:not(.hidden)) { border-bottom: none; }

/* ---------- 9. PREFERITI ---------- */
/* stellina nella riga meta della bolla quando è tra i preferiti */
.msg .meta .star { color: var(--warn); margin-right: 4px; }
.msg.user .meta .star { color: #ffe08a; }

/* pannello dei preferiti (sopra l'overlay a tutto schermo) */
#starred-overlay { background: var(--scrim); }
.sheet {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  /* --app-height, non dvh: con la tastiera aperta dvh resta l'altezza piena e il pannello
     sborderebbe sotto di essa (l'overlay che lo contiene è già alto --app-height). */
  width: min(560px, 92vw); max-height: calc(var(--app-height, 100dvh) * .82);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--sh-3);
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.sheet-head h3 { font-size: 17px; display: flex; align-items: center; gap: var(--s2); }
.sheet-head h3 .ico { color: var(--accent-ink); }
.sheet-head button {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; padding: var(--s1) var(--s2); font-family: inherit;
  min-width: 44px; min-height: 44px; margin: -6px -8px -6px 0; /* margini negativi: bersaglio grande, testata invariata */
  display: flex; align-items: center; justify-content: center;
}
#starred-list {
  overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 7px;
  overscroll-behavior: contain;
}
.star-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel-2); cursor: pointer;
}
.star-item:active { background: var(--bg); }
.star-item .si-body { flex: 1; min-width: 0; }
.star-item .si-who { font-size: 11px; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .06em; }
.star-item .si-text {
  font-size: 14px; color: var(--text); margin-top: 2px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.star-item .si-date { font-size: 11px; color: var(--muted); margin-top: 4px; }
.star-item .si-unstar {
  background: transparent; border: none; color: var(--warn);
  cursor: pointer; padding: 2px 4px; flex-shrink: 0; line-height: 1; font-family: inherit;
  min-width: 44px; min-height: 44px; margin: -8px -6px -8px 0; /* area di tocco piena, ingombro invariato */
  display: flex; align-items: center; justify-content: center;
}

/* ---------- 10. AGGIORNAMENTI ---------- */
/* Stesso trattamento del toast: ancorato all'altezza visibile, non al fondo della viewport di
   layout (con la tastiera aperta il banner "Aggiorna" spariva dietro di essa). */
#update-banner {
  position: fixed; left: 50%;
  top: calc(var(--app-height, 100dvh) - 86px - env(safe-area-inset-bottom));
  transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: var(--s3);
  background: var(--accent); color: #fff;
  padding: 10px 10px 10px 18px; border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  font-size: 14px; font-weight: 600; z-index: 60; max-width: 92%;
}
#update-banner.hidden { display: none; }
#update-banner button {
  background: #fff; color: var(--accent-su-bianco); border: none; cursor: pointer;
  border-radius: var(--r-pill); padding: 9px 16px; font-weight: 700; font-size: 14px;
  flex-shrink: 0; font-family: inherit; min-height: 44px;
}

/* ---------- 11. PANNELLO AMMINISTRAZIONE ---------- */
.adm-toolbar { display: flex; gap: var(--s2); margin: var(--s1) 0 var(--s4); }
/* --text, non --fg: quella variabile non è mai stata definita e il testo usciva nel grigio di
   sistema (sembrava disabilitato). Vale per tutti i campi del pannello admin qui sotto. */
.adm-select {
  flex: 1; min-width: 0; padding: 11px 10px; border-radius: var(--r-sm); font-size: 16px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); font-family: inherit;
  min-height: 44px;
}
.adm-btn-ghost {
  padding: 11px 15px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: var(--panel); color: var(--accent-ink); border: 1px solid var(--line); font-family: inherit;
  min-height: 44px;
}
.adm-btn-ghost:active { background: var(--accent-soft); }
.adm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--s4); }
.adm-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s3); box-shadow: var(--sh-1);
}
.adm-card-t { font-size: 12px; color: var(--muted); }
.adm-card-v { font-size: 21px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.adm-card-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.adm-bar { height: 6px; border-radius: 3px; background: var(--line); margin-top: var(--s2); overflow: hidden; }
.adm-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width var(--t-slow) var(--ease); }
.adm-bar-fill.warn { background: var(--no); }
.adm-pad { padding: var(--s3); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th { text-align: left; color: var(--muted); font-weight: 700; padding: 6px; border-bottom: 1px solid var(--line); }
.adm-table td { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table th:not(:first-child), .adm-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
/* tabella dei collegamenti: nome del cliente sopra il suo blocco, stato colorato nella colonna */
.adm-coll-t { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: var(--s4) 0 var(--s1); }
.adm-coll-t:first-child { margin-top: 0; }
.adm-table td.coll-ok { font-weight: 700; }
.adm-evento { padding: var(--s2) 0; font-size: 13px; border-bottom: 1px solid var(--line-soft); color: var(--text); line-height: 1.45; }
.adm-evento:last-child { border-bottom: none; }
/* Pratiche in attesa di un cliente (solo metadati): sospendi o avvisa, mai approva. */
.adm-pratica { padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.45; }
.adm-pratica:last-child { border-bottom: none; }
.adm-pratica-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.adm-pratica-azioni input { flex: 1 1 180px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; }
.adm-minrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: var(--s1) 0; min-height: 44px; }
.adm-minrow span { font-size: 13.5px; }
.adm-minrow input {
  width: 86px; min-height: 44px; padding: 10px 8px; border-radius: var(--r-xs); text-align: right; font-size: 16px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-family: inherit;
}
.adm-minrow input:focus, .adm-field input:focus, .adm-field select:focus, .adm-select:focus {
  outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-ring);
}
.adm-field { display: block; margin: var(--s2) 0; font-size: 13px; color: var(--muted); }
/* Campi del pannello amministrazione (soglie, modello, selettori): altezza minima di tocco ESPLICITA.
   Su Linux (CI, Chrome headless) i caratteri sono piu' bassi che su macOS e un campo scendeva a 40 px
   (collaudo della CI del 18/10/2026): i 44 px vanno scritti, non dedotti dal carattere. */
.adm-field input, .adm-field select, .adm-select { min-height: 44px; box-sizing: border-box; }
.adm-field input, .adm-field select {
  width: 100%; margin-top: var(--s1); padding: 11px 10px; border-radius: var(--r-sm); font-size: 16px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-family: inherit;
  min-height: 44px;
}
.adm-salva { margin-top: var(--s3); }

/* interruttori funzioni del piano: riga etichetta + toggle */
.adm-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.adm-toggle-row:last-child { border-bottom: none; }
.adm-toggle-row > span:first-child { font-size: 14px; color: var(--text); }
.adm-switch { position: relative; width: 48px; height: 28px; flex: none; }
.adm-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.adm-switch-knob {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--line); border: 1px solid var(--line); transition: background var(--t-fast) var(--ease);
}
.adm-switch-knob::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease);
}
.adm-switch input:checked + .adm-switch-knob { background: var(--accent); border-color: var(--accent); }
.adm-switch input:checked + .adm-switch-knob::after { transform: translateX(20px); }
.adm-switch input:focus-visible + .adm-switch-knob { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ---------- 12. BOLLA PDF STILE WHATSAPP ---------- */
/* .att-file.att-pdf, non solo .att-pdf: ".msg .att-file" (e ".registro-voce .att-file") ha la
   stessa forza e imponeva align-items: center e il suo padding, cosi' con un nome lungo la riga
   del PDF usciva dalla card da entrambi i lati (visto il 14/10/2026 nella vista Registri). */
.att-file.att-pdf { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
.att-pdf .pdf-thumb { display: none; background: #fff; }
.att-pdf.con-thumb .pdf-thumb { display: block; max-height: 220px; overflow: hidden; border-bottom: 1px solid var(--line); }
.att-pdf .pdf-thumb canvas { width: 100%; height: auto; display: block; }
.att-pdf .pdf-riga { display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-width: 0; }

/* ---------- 13. UTENTI, STRUTTURE E RUOLI (login multi-utente, 14/10/2026) ---------- */
/* Nome della struttura in testata: prende il posto del claim quando la sessione ha una struttura.
   --text su --panel: AA nei due temi (token gia' verificati). */
.header-struttura {
  font-size: 13px; font-weight: 700; color: var(--text);
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-title.con-struttura #status-line { display: none; }
/* C44 del vaglio 3.8 (fase F9): la scritta della struttura dimostrativa sotto il nome, colore d'avviso, mai tagliata */
.demo-scritta {
  font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--text); background: var(--warn-soft);
  border-left: 3px solid var(--warn); border-radius: 4px; padding: 1px 6px; max-width: 100%; white-space: normal;
}
@media (max-width: 600px) {
  /* qui la testata va su due righe: il titolo ha tutta la prima */
  .header-struttura { max-width: calc(100vw - 2 * var(--s4)); }
}

/* Schermata d'accesso: scelta della struttura e "nessuna struttura". Stessa logica dei due passi
   dell'accesso (display: contents, i figli restano flex-item della card). */
#passo-strutture, #passo-nessuna, #passo-invito { display: contents; }
.strutture-lista { display: flex; flex-direction: column; gap: var(--s2); width: 100%; }
.pin-card .strutture-lista button.struttura-scelta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  text-align: left; font-weight: 600; font-size: 15.5px; min-height: 54px; padding: 12px 14px;
}
.pin-card .strutture-lista button.struttura-scelta:active { background: var(--panel-2); }
.pin-card .strutture-lista button.struttura-scelta[aria-current="true"] { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink) inset; }
.struttura-scelta .scelta-nome { min-width: 0; overflow-wrap: break-word; }
.struttura-scelta .srow-chip { flex: none; }
.pin-card .nessuna-titolo { color: var(--text); font-weight: 700; font-size: 16px; }
/* Invito in arrivo: chi invita e con che ruolo, in evidenza sopra il campo dell'email. */
.pin-card .invito-nota {
  color: var(--text); background: var(--accent-soft); border-radius: var(--r-md);
  padding: 10px 12px; text-align: left; width: 100%;
}

/* Impostazioni: struttura, utenti e ruoli */
.testo-lungo { min-width: 0; overflow-wrap: break-word; }
.campo-nota { color: var(--muted); font-size: 13px; line-height: 1.45; }
.campo-nota.ok-msg { color: var(--ok); font-weight: 600; }
.campo-nota.err-msg { color: var(--no); font-weight: 600; }
.pass-panel select.cred { min-height: 48px; }
.invito-link { display: flex; flex-direction: column; gap: 10px; }
.utente { border-bottom: 1px solid var(--line-soft); }
.utente > .srow { border-bottom: none; }
.utente-testo { display: flex; flex-direction: column; min-width: 0; }
.utente-email { overflow-wrap: anywhere; }
.utente-sub { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.utente-deleghe { padding: 0 var(--s4) var(--s2); }
.utente-deleghe .campo-nota { margin-bottom: 2px; }
.inviti-titolo { padding-top: var(--s3); }
/* Caselle della struttura (review 13a #1): una riga per casella col suo interruttore. */
.caselle-struttura { padding: 0 var(--s4) var(--s2); }
.caselle-struttura > .srow-note { padding-left: 0; padding-right: 0; }

/* Registri (contabile, amministrazione): documenti in sola lettura al posto della chat. */
.registri {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3);
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: var(--s4) var(--s4) calc(env(safe-area-inset-bottom) + 16px);
}
.registri > section { display: flex; flex-direction: column; gap: var(--s3); }
.registri-lista { display: flex; flex-direction: column; gap: var(--s3); }
.registro-voce {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3); box-shadow: var(--sh-1);
}
.registro-data { font-size: 13px; color: var(--muted); margin-bottom: var(--s2); }
.registri-nota { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ---------- 14. GESTIONALE (S4, 15/10/2026): Oggi, Planning, Prenotazione, Ospiti, Tariffe, Struttura ---------- */
/* Stessi mattoni delle Impostazioni (settings-group, srow-note, adm-card, adm-table): nessun colore
   nuovo, solo i token di tokens.css, gia' tarati AA nei due temi. Le scritte stanno sempre su fondi
   pieni (mai sfumature: il contrasto si misura sul fondo vero). Aree di tocco da 44px. */
.gest-vista { overflow: hidden; }
.gest-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.gest-vista-corpo {
  width: 100%; max-width: 860px; margin: 0 auto;
  padding: var(--s4) var(--s4) calc(env(safe-area-inset-bottom) + 24px);
  display: flex; flex-direction: column; gap: var(--s2);
}
.gest-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.gest-testa-t { min-width: 0; }
.gest-titolo { font-size: 24px; }
.gest-sotto { color: var(--muted); font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }
.gest-testa-az { display: flex; gap: var(--s2); }
.btn-primary.gest-btn-testa { width: auto; padding: 11px 18px; }
.gest-sec { margin-top: var(--s3); }
.gest-sec .settings-label { margin-top: 0; }
.gest-pad { padding: var(--s3) var(--s4); }
/* campi uno sotto l'altro dentro un gruppo: stesso respiro dei moduli (le righe etichetta-valore no) */
.settings-group.gest-pad > * + * { margin-top: var(--s3); }
.settings-group.gest-pad > .gest-riga + .gest-riga, .settings-group.gest-pad > .gest-esito.hidden { margin-top: 0; }
.gest-pad-x { padding: 0 var(--s4) var(--s3); }
.gest-modulo { display: flex; flex-direction: column; gap: var(--s3); }
.gest-cards { margin: var(--s2) 0 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.gest-carico { color: var(--muted); padding: var(--s5) var(--s4); text-align: center; }

/* elenchi (arrivi, ospiti, soggiorni, piani...) */
.gest-voci { list-style: none; margin: 0; padding: 0; }
/* flex-wrap e il minimo di 8rem del testo (fase F9, collaudo di Oggi a 320 px): quando stato e bottoni non ci stanno
   accanto al nome, vanno a capo sotto, a destra, invece di stringere il nome a una lettera per riga */
.gest-voce {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--line-soft);
  padding-right: var(--s3); min-height: 54px;
}
.gest-voce:last-child { border-bottom: none; }
.gest-voce-statica { padding: var(--s2) var(--s4); }
.gest-voce.scelta { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-ink); }
.gest-voce-apri {
  flex: 1; min-width: min(8rem, 100%); min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: var(--s2) var(--s4); background: transparent; border: none; text-align: left; cursor: pointer;
  color: var(--text); font-family: inherit; font-size: 15px;
}
.gest-voce-apri:active { background: var(--panel-2); }
.gest-voce-apri:disabled { opacity: 1; cursor: default; }
/* review 38a B8: lo stesso minimo di .gest-voce-apri anche per le righe statiche (le richieste via email in Oggi a 320 px
   stringevano il nome a 84 px accanto allo stato) */
.gest-voce-testo { flex: 1; min-width: min(8rem, 100%); display: flex; flex-direction: column; gap: 2px; }
.gest-voce-t { font-weight: 600; overflow-wrap: anywhere; }
.gest-voce-s { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.gest-voce-az { display: flex; align-items: center; gap: var(--s2); flex: none; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* email agli ospiti da guardare in Oggi (piano 29, F4): il testo sopra, lo stato e i bottoni sotto, anche a 320px */
.gest-email-oggi { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s2); }
.gest-email-oggi .gest-voce-az { justify-content: flex-start; padding: 0 var(--s4); margin-left: 0; }
/* richieste WhatsApp in Oggi (piano 29, F7; correzioni 37b, B4): il testo a tutta larghezza, lo stato sotto, e un invito
   visibile ad aprire la scheda dell'ospite (la riga e' un bottone) */
.gest-richiesta-wa { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s2); }
.gest-richiesta-wa .gest-voce-az { justify-content: flex-start; padding: 0 var(--s4); margin-left: 0; }
.gest-voce-vai { font-size: 13px; font-weight: 600; color: var(--accent-ink); margin-top: 2px; }
.gest-messaggio { flex-direction: column; align-items: stretch; gap: 2px; }
.gest-testo { font-weight: 400; white-space: pre-wrap; }
.gest-scadenza .gest-voce-apri { padding-left: 0; }
.gest-prezzo { font-variant-numeric: tabular-nums; }

/* chip di stato: testo --text su fondo tenue + bordo del colore (contrasto sicuro nei due temi) */
.gest-chip {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--panel-2); color: var(--text); border: 1px solid var(--line); white-space: nowrap;
}
.gest-chip.ok, .gest-chip.st-arrivata, .gest-chip.pag-saldato, .gest-chip.pag-caparra_incassata { background: var(--ok-soft); border-color: var(--ok); }
.gest-chip.st-confermata, .gest-chip.pag-garanzia { background: var(--accent-soft); border-color: var(--accent-ink); }
.gest-chip.st-richiesta, .gest-chip.st-in_attesa_pagamento, .gest-chip.pag-in_attesa { background: var(--warn-soft); border-color: var(--warn); }
.gest-chip.st-fuori, .gest-chip.st-cancellata_ospite, .gest-chip.st-cancellata_struttura, .gest-chip.st-no_show { background: var(--no-soft); border-color: var(--no); }
.gest-chip.ghost { color: var(--muted); font-weight: 600; }

/* stati vuoti */
.gest-vuoto {
  background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: var(--s5) var(--s4); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  margin-top: var(--s3);
}
.gest-vuoto p { color: var(--text); font-size: 15px; max-width: 420px; }
.gest-vuoto .btn-primary { width: auto; padding: 12px 22px; }
.gest-vuoto-breve { color: var(--muted); font-size: 14px; padding: var(--s3) var(--s4); }
.gest-avviso { color: var(--text); background: var(--warn-soft); border-left: 3px solid var(--warn); margin: var(--s3) var(--s4) 0; border-radius: 6px; }

/* moduli */
.gest-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gest-campo .campo-nota { color: var(--muted); }
.gest-input {
  width: 100%; min-height: 44px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 16px; font-family: inherit;
}
textarea.gest-input { resize: vertical; line-height: 1.4; }
.gest-input:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-ring); }
.gest-input:disabled { opacity: 1; background: var(--panel); color: var(--text); }
.gest-nota { font-size: 12.5px; }
.gest-griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.gest-filtri { margin-top: var(--s2); }
.gest-riga-bottoni { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gest-elenco-tolti { margin: 0; padding-left: 20px; color: var(--text); font-size: 14px; line-height: 1.5; }
.gest-dettaglio > .gest-avviso { margin: var(--s2) var(--s1) 0; padding: var(--s2) var(--s3); }
.gest-riga-bottoni .btn-primary { width: auto; }
.gest-esito { padding: 0; }
.gest-vista-corpo > .gest-esito { padding: 0 var(--s1); }
.gest-btn-piccolo { padding: 8px 12px; font-size: 13px; }
.gest-btn-pericolo {
  min-height: 44px; padding: 11px 16px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: var(--no-fill); color: var(--on-no); font-size: 14px; font-weight: 700; font-family: inherit;
}
.gest-btn-pericolo:active { filter: brightness(.92); }
.gest-prezzi { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.gest-prezzi legend { grid-column: 1 / -1; margin-bottom: 4px; }
.gest-scelte { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.gest-scelte legend { width: 100%; margin-bottom: 4px; }
.gest-scelta { position: relative; display: inline-flex; }
.gest-scelta input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gest-scelta label {
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.gest-scelta input:checked + label { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.gest-scelta input:focus-visible + label { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.gest-cerca { margin-top: var(--s2); }
.gest-risultati:empty { display: none; }
.gest-risultati .gest-voce { padding-left: var(--s4); }
.gest-ospite-rapido { display: flex; flex-direction: column; gap: var(--s3); border-top: 1px solid var(--line-soft); }
.gest-ospite-nuova { display: flex; flex-direction: column; gap: var(--s3); }
.gest-ospite-nuova .gest-risultati { border: 1px solid var(--line-soft); border-radius: var(--r-sm); }

/* righe etichetta-valore e tabelle */
.gest-riga { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); min-height: 44px; }
.gest-riga:last-child { border-bottom: none; }
.gest-riga-l { color: var(--muted); font-size: 13.5px; }
.gest-riga-v { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.gest-tabella { overflow-x: auto; padding: var(--s2) var(--s3); }
.gest-tab-testo td, .gest-tab-testo th { text-align: left !important; }
.gest-naviga { display: flex; gap: var(--s2); flex-wrap: wrap; padding: var(--s2) var(--s3); }
.gest-vista-corpo > .gest-naviga { padding: var(--s2) 0 0; }

/* dettaglio (pannello) */
.gest-dettaglio { display: flex; flex-direction: column; gap: var(--s1); }
#gest-overlay .settings-head h1 { font-size: 21px; overflow-wrap: anywhere; }
.gest-dett-testa { display: flex; flex-direction: column; gap: 6px; padding: var(--s1) var(--s1) 0; }
.gest-dett-chip { display: flex; gap: var(--s2); flex-wrap: wrap; }
.gest-dett-date { font-size: 18px; font-weight: 700; }
.gest-azioni { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gest-azioni .btn-primary { width: auto; }
.gest-azioni .campo-nota { width: 100%; }
.gest-conferma, .gest-campo-in { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.gest-conferma .campo-nota { color: var(--text); }
details.gest-tipologia { border-bottom: 1px solid var(--line-soft); }
details.gest-tipologia > summary {
  list-style: none; cursor: pointer; min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: var(--s2) var(--s4); color: var(--text);
}
details.gest-tipologia > summary::-webkit-details-marker { display: none; }
details.gest-tipologia > summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
details.gest-tipologia[open] > summary { background: var(--panel-2); }
.gest-unita { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 0; border-top: 1px dashed var(--line); }
.gest-unita.chiusa .gest-input { color: var(--muted); }

/* PLANNING: griglia unita' x giorni. Colonna dei nomi fissa a sinistra, celle da 52px (tocco da 44). */
.pl-contenitore {
  overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sh-1); margin-top: var(--s2);
}
.pl-griglia {
  --pl-nomi: 104px; --pl-cella: 52px;
  display: grid; position: relative; width: max-content;
  grid-template-columns: var(--pl-nomi) repeat(var(--pl-giorni), var(--pl-cella));
  grid-auto-rows: minmax(52px, auto);
  -webkit-user-select: none; user-select: none; /* trascinando col mouse non si seleziona il testo della griglia */
}
.pl-angolo, .pl-tipologia, .pl-unita {
  position: sticky; left: 0; z-index: 3; background: var(--panel); border-right: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 8px; font-size: 13px; font-weight: 700; min-width: 0;
  overflow: hidden; line-height: 1.2; overflow-wrap: anywhere;
}
.pl-angolo { color: var(--muted); border-bottom: 1px solid var(--line); }
.pl-tipologia { background: var(--panel-2); color: var(--text); border-top: 1px solid var(--line); }
.pl-unita { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--line-soft); }
.pl-unita.chiusa { color: var(--muted); }
.pl-unita.da-assegnare { color: var(--muted); font-weight: 600; font-size: 12px; }
.pl-giorno {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  border-bottom: 1px solid var(--line); border-left: 1px solid var(--line-soft); color: var(--muted); font-size: 12px;
}
.pl-giorno .pl-giorno-n { font-size: 15px; font-weight: 700; color: var(--text); }
.pl-giorno.fine-sett { background: var(--panel-2); }
.pl-giorno.oggi { background: var(--accent-soft); }
.pl-giorno.oggi .pl-giorno-s, .pl-giorno.oggi .pl-giorno-n { color: var(--text); }
.pl-disp {
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: var(--panel-2); border-top: 1px solid var(--line); border-left: 1px solid var(--line-soft); font-variant-numeric: tabular-nums;
}
.pl-disp.pieno { color: var(--no); }
.pl-disp.oltre { color: var(--text); background: var(--no-soft); }
.pl-disp.chiuso { color: var(--text); background: var(--warn-soft); font-weight: 600; font-size: 11.5px; }
.pl-cella {
  border: none; border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: transparent; cursor: pointer; min-height: 52px; font-family: inherit; padding: 0;
}
.pl-cella:active { background: var(--accent-soft); }
@media (hover: hover) { button.pl-cella:hover { background: var(--panel-2); } }
.pl-cella:focus-visible { outline-offset: -3px; }
.pl-cella.vuota { cursor: default; }
.pl-cella.chiusa { background: var(--panel-2); }
.pl-cella.corsia { background: var(--panel-2); }
/* barra della prenotazione: fondo per stato, bordo a sinistra per canale (pieno = diretta, doppio = portale) */
.pl-barra {
  z-index: 2; margin: 4px 3px; min-height: 44px; min-width: 44px; border-radius: 8px; border: 1px solid var(--line);
  border-left-width: 6px; border-left-style: solid; border-left-color: var(--accent-ink);
  background: var(--accent-soft); color: var(--text); text-align: left; padding: 3px 8px; cursor: grab;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden; font-family: inherit;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pl-barra-t { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-barra-s { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-barra:focus-visible { outline-offset: 1px; }
.pl-barra.prima { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.pl-barra.dopo { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.st-confermata { background: var(--accent-soft); border-color: var(--accent-ink); }
.st-richiesta, .st-in_attesa_pagamento { background: var(--warn-soft); border-color: var(--warn); }
.st-arrivata { background: var(--ok-soft); border-color: var(--ok); }
.st-partita { background: var(--panel-2); border-color: var(--line); }
.pl-barra.st-confermata, .pl-leg.st-confermata { border-left-color: var(--accent-ink); }
.pl-barra.st-richiesta, .pl-barra.st-in_attesa_pagamento, .pl-leg.st-richiesta, .pl-leg.st-in_attesa_pagamento { border-left-color: var(--warn); }
.pl-barra.st-arrivata, .pl-leg.st-arrivata { border-left-color: var(--ok); }
.pl-barra.st-partita, .pl-leg.st-partita { border-left-color: var(--muted); }
.pl-barra.fuori, .pl-leg.fuori { background: var(--no-soft); border-color: var(--no); border-left-color: var(--no); }
.pl-barra.ca-ota, .pl-leg.ca-ota { border-left-style: double; border-left-width: 7px; }
.pl-barra.trascino { opacity: .55; cursor: grabbing; }
/* segno dello stato: lo stato non si legge solo dal colore, anche su una barra di una notte (15a B7) */
.pl-barra-i { display: inline-block; min-width: 1em; margin-right: 3px; font-weight: 700; }
.pl-leg .pl-barra-i { margin-right: 6px; }
/* giorni passati: niente nuova prenotazione (15a B5) */
.pl-cella.passato { background: var(--panel-2); }
/* rilascio non ammesso (nel passato, portale, ospite in casa: 15a A1) */
.pl-meta.vietato { border-color: var(--no); background: var(--no-soft); }
.pl-conferma-posto:empty { display: none; }
.pl-conferma {
  margin-top: var(--s2); padding: var(--s3); background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--accent-ink); border-radius: var(--radius); box-shadow: var(--sh-1);
}
.pl-meta {
  z-index: 4; margin: 3px 2px; border: 2px dashed var(--accent-ink); border-radius: 8px; background: var(--panel);
  color: var(--text); font-size: 12px; font-weight: 700; display: flex; align-items: center; padding: 0 8px;
  pointer-events: none; white-space: nowrap; overflow: hidden;
}
.pl-legenda { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.pl-legenda-voci { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pl-leg {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--line); border-left: 6px solid var(--accent-ink); color: var(--text); font-size: 12.5px; font-weight: 600;
}

/* TARIFFE: il calendario coi prezzi (piano 22, 17/10/2026; correzioni 23b R1). Griglia 7 colonne con
   celle da 44px almeno anche a 320px: sotto i 360px il calendario va da bordo a bordo (niente margine
   laterale) e lo spazio fra le celle scende a 1px; nel confronto fra tipologie ogni calendario e' largo
   almeno 360px (3 per riga a 1280px). Il prezzo non si tronca MAI: nella cella stretta l'euro intero
   arrotondato (il prezzo esatto e' nell'etichetta per i lettori di schermo, nel title e nell'editor),
   con 5 o 6 cifre un carattere piu' piccolo; nella cella larga il prezzo esatto coi centesimi. Le
   etichette vanno a capo invece di troncarsi. Le scritte stanno su fondi pieni dei token, tarati AA
   nei due temi. */
.gest-vista-corpo.gest-vista-larga { max-width: 1440px; }
.tc-piano { margin-top: -2px; }
.gest-griglia-2.tc-filtri { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tc-naviga { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.tc-mese { flex: 1; text-align: center; font-size: 18px; }
.adm-btn-ghost.tc-freccia { min-width: 48px; font-size: 20px; line-height: 1; padding: 8px 12px; }
.tc-confronto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--s3); align-items: start; }
.tc-cal {
  container-type: inline-size; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-1); padding: 2px; margin-top: var(--s2);
}
@media (max-width: 359.98px) {
  .tc-cal { margin-inline: calc(-1 * var(--s4)); border-inline: 0; border-radius: 0; padding-inline: 1px; }
  .gest-griglia-2.tc-filtri { grid-template-columns: minmax(0, 1fr); }
}
.tc-confronto .tc-cal { margin-top: 0; }
.tc-cal-t { font-size: 15px; padding: var(--s2) var(--s2) var(--s1); }
.tc-sett, .tc-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.tc-sett span { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.tc-griglia { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.tc-griglia.trascino { touch-action: none; }
.tc-giorno {
  position: relative; min-width: 44px; min-height: 66px; display: flex; flex-direction: column; align-items: stretch; gap: 1px;
  padding: 3px 1px 4px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); color: var(--text);
  font-family: inherit; font-size: 13px; text-align: left; overflow: hidden; cursor: pointer;
}
button.tc-giorno:active { background: var(--accent-soft); }
@media (hover: hover) { button.tc-giorno:hover { border-color: var(--accent-ink); } }
.tc-giorno:focus-visible { outline-offset: -3px; }
.tc-giorno.fine { background: var(--panel-2); }
.tc-giorno.passato { cursor: default; background: var(--panel-2); border-style: dashed; }
.tc-giorno.passato .tc-prezzo { color: var(--muted); font-weight: 600; }
.tc-giorno.oggi { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.tc-giorno.sel { background: var(--accent-soft); border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.tc-giorno.appena { box-shadow: inset 0 0 0 2px var(--ok); }
.tc-giorno.con-proposta { border-color: var(--arancio); }
.tc-vuoto { min-height: 66px; }
.tc-n { font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.2; }
.tc-giorno.oggi .tc-n, .tc-giorno.sel .tc-n { color: var(--text); }
.tc-prezzo { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; line-height: 1.25; letter-spacing: -0.2px; }
.tc-prezzo.tc-cifre-5 { font-size: 11px; }
.tc-prezzo.tc-cifre-6 { font-size: 9.5px; }
.tc-esatto, .tc-euro { display: none; }
.tc-trattino { color: var(--muted); font-weight: 700; }
.tc-lab {
  display: block; font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; border-radius: 4px; padding: 0 1px; color: var(--text);
  background: var(--panel-2); white-space: normal; overflow: hidden;
}
.tc-lab-chiuso { background: var(--no-soft); }
.tc-lab-min { background: var(--accent-soft); }
.tc-lab-fs, .tc-lab-pieno { background: var(--warn-soft); }
.tc-lab-cta, .tc-lab-ctd, .tc-lab-piu, .tc-lab-parz { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.tc-stato-sel:empty { display: none; }
.tc-stato-sel { padding: var(--s1) var(--s2) 0; color: var(--text); }
.tc-lungo { display: none; }
.tc-punto { position: absolute; top: 2px; right: 4px; color: var(--arancio); font-size: 12px; line-height: 1; }
.tc-punto-leg { color: var(--arancio); font-size: 13px; }
@container (max-width: 345px) {
  .tc-sett, .tc-griglia { gap: 1px; }
}
@container (min-width: 420px) {
  .tc-giorno { min-height: 74px; padding: 5px 6px 6px; }
  .tc-vuoto { min-height: 74px; }
  .tc-prezzo { font-size: 14.5px; }
  .tc-prezzo.tc-cifre-5 { font-size: 13px; }
  .tc-prezzo.tc-cifre-6 { font-size: 11px; }
  .tc-lab { font-size: 11.5px; letter-spacing: 0; padding: 0 4px; }
}
@container (min-width: 620px) {
  .tc-corto { display: none; }
  .tc-lungo { display: inline; }
  .tc-giorno { min-height: 84px; }
  .tc-vuoto { min-height: 84px; }
}
/* cella larga (da circa 98px): il prezzo esatto coi centesimi e l'euro */
@container (min-width: 700px) {
  .tc-intero { display: none; }
  .tc-esatto, .tc-euro { display: inline; }
  .tc-prezzo.tc-cifre-5, .tc-prezzo.tc-cifre-6 { font-size: 13px; }
}
/* PREZZI DELLA ZONA (piano 26): la mediana della zona sotto il prezzo, NEUTRA (correzioni 27b, review 27a M3:
   un riferimento, non un obiettivo; niente toni o colori d'avviso per "sotto", "dentro" o "sopra") */
.tc-zona {
  display: block; font-size: 10.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; border-radius: 4px; padding: 0 1px;
  color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.tc-leg .tc-zona { display: inline-block; flex: none; overflow: visible; padding: 0 4px; }
.tc-zona-nota { padding: var(--s1) 0 0; color: var(--text); }
.tc-zona-avviso { font-weight: 600; }
.zc-scegli { margin: 0 0 var(--s2); padding: var(--s2) var(--s3); color: var(--text); }
@container (min-width: 420px) {
  .tc-zona { font-size: 11.5px; letter-spacing: 0; padding: 0 4px; }
}
.zc-voc { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.zc-voc li { color: var(--text); }
.zc-t { font-size: 15px; margin: var(--s4) 0 var(--s1); color: var(--text); }
.zc-conta, .zc-stato, .zc-ricerche, .zc-fonte { color: var(--text); }
.zc-conferma { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) var(--s3); margin: var(--s2) 0 0; }
.zc-conferma p { margin: 0; }
.tc-sez .zc-riquadro, .zc-riquadro { display: flex; flex-direction: column; gap: var(--s1); margin: 0; padding: var(--s2) var(--s3);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.zc-riga { margin: 0; font-weight: 600; color: var(--text); line-height: 1.45; }
.zc-date { margin: 0; padding-left: 18px; color: var(--text); font-size: 14px; line-height: 1.5; }
.tc-legenda .pl-legenda-voci { gap: var(--s2) var(--s3); }
.tc-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); min-height: 28px; }
.tc-leg .tc-lab { display: inline-block; }
.tc-nota-confronto { padding: 0 var(--s1); }
/* pannelli che si aprono (Stagioni, Altro) e dettagli dell'editor: intestazione da 48px */
details.tc-stagioni > summary, details.tc-altro > summary {
  list-style: none; cursor: pointer; min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2);
  padding: var(--s2) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text);
}
details.tc-stagioni > summary::-webkit-details-marker, details.tc-altro > summary::-webkit-details-marker, details.tc-dettagli > summary::-webkit-details-marker { display: none; }
details.tc-stagioni > summary::before, details.tc-altro > summary::before, details.tc-dettagli > summary::before { content: "▸"; color: var(--accent-ink); font-weight: 700; }
details[open].tc-stagioni > summary::before, details[open].tc-altro > summary::before, details[open].tc-dettagli > summary::before { content: "▾"; }
details.tc-stagioni > summary:focus-visible, details.tc-altro > summary:focus-visible, details.tc-dettagli > summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
details[open].tc-stagioni > summary, details[open].tc-altro > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tc-stagioni-t { font-weight: 700; font-size: 15px; }
details.tc-stagioni > .settings-group { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }
.tc-altro-corpo { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s1); }
.tc-altro-corpo .gest-sec { margin-top: var(--s2); }
details.tc-dettagli { border-top: 1px solid var(--line-soft); }
details.tc-dettagli > summary {
  list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: var(--s2);
  color: var(--accent-ink); font-weight: 600; font-size: 14px; padding: var(--s1) 0;
}
details.tc-dettagli > .gest-modulo { padding: var(--s1) 0 var(--s3); }
/* editor del periodo */
.tc-editor { gap: var(--s3); }
.tc-editor > .gest-griglia-2 { padding: 0 var(--s1); }
.tc-frase { font-size: 15px; font-weight: 600; color: var(--text); padding: 0 var(--s1); line-height: 1.45; }
.tc-editor > .campo-nota { padding: 0 var(--s1); }
.tc-sez .settings-group.gest-pad > * + * { margin-top: var(--s3); }
.tc-prezzi { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.tc-prezzi legend { margin-bottom: var(--s2); color: var(--text); font-weight: 600; }
.tc-attenzione { color: var(--text); background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 6px; padding: var(--s2) var(--s3); }
.tc-avviso-vivo { color: var(--text); background: var(--no-soft); border-left: 3px solid var(--no); border-radius: 6px; padding: var(--s2) var(--s3); font-size: 13.5px; font-weight: 600; }
.tc-glossa { color: var(--text); }
/* correzioni 23c (prova di Simone del 18/10): prezzi e regole ben staccati, l'unita' accanto a ogni campo
   ("€", "notti", "giorni", "%"), cosa salvi prima di scrivere, la domanda sulle notti minime sospette */
.tc-editor > .tc-sez-regole { margin-top: var(--s4); }
.gest-con-misura { display: flex; align-items: center; gap: var(--s2); }
.gest-con-misura > .gest-input { flex: 1; min-width: 0; }
.gest-misura { flex: none; min-width: 3.4em; color: var(--text); font-size: 15px; font-weight: 600; }
.tc-salvi { color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: var(--s2) var(--s3); margin: 0 var(--s1); font-size: 14px; line-height: 1.45; }
.tc-dubbio { color: var(--text); background: var(--no-soft); border-left: 3px solid var(--no); border-radius: 6px; padding: var(--s2) var(--s3); font-size: 15px; font-weight: 700; line-height: 1.4; }
.tc-allotment, .tc-senza-nome, .tc-nuova { color: var(--text); }
.tc-avviso { padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.tc-proposta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); font-size: 14px; }
.tc-salva .btn-primary { width: auto; padding: 12px 22px; }
.tc-copia { border-top: 1px solid var(--line); padding: 0 var(--s1); }
/* stagioni: ogni riga si apre e si cambia li' (review 23a R16) */
.tc-stagione.gest-voce-statica { padding: 0; }
details.tc-riga-stagione { width: 100%; }
details.tc-riga-stagione > summary {
  list-style: none; cursor: pointer; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s2) var(--s4); color: var(--text);
}
details.tc-riga-stagione > summary::-webkit-details-marker { display: none; }
details.tc-riga-stagione > summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
details[open].tc-riga-stagione > summary { background: var(--panel-2); }
details.tc-riga-stagione > summary .gest-chip { flex: none; }
.tc-modulo-stagione { padding: var(--s2) var(--s4) var(--s3); }
/* conferma prima di salvare: riassunto per tipologia */
.tc-conferma-t { color: var(--text); font-weight: 600; }
.tc-per-tipologia { display: flex; flex-direction: column; gap: var(--s1); }
.tc-continua { color: var(--text); }
/* la scheda in Approvazioni aperta dal calendario */
.approval.evidenziata { box-shadow: 0 0 0 3px var(--arancio); }

@media (max-width: 600px) {
  .gest-titolo { font-size: 21px; }
  .gest-griglia-2 { grid-template-columns: 1fr; }
  .gest-testa-az { width: 100%; }
  .btn-primary.gest-btn-testa { width: 100%; }
  .pl-griglia { --pl-nomi: 84px; }
}
@media (min-width: 380px) and (max-width: 600px) {
  .gest-griglia-2 { grid-template-columns: 1fr 1fr; }
}
/* schermi larghi: celle piu' larghe, cosi' anche una notte sola si legge */
@media (min-width: 900px) {
  .pl-griglia { --pl-nomi: 128px; --pl-cella: 64px; }
}

/* Portali (iCal): l'indirizzo del calendario da copiare nel portale (sola lettura, 16px: niente zoom
   su iOS); la sezione in fondo a Struttura e Tariffe. */
.gest-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; }
.gest-portali .gest-avviso { padding: var(--s2) var(--s3); }

/* ANDAMENTO (piano 24, 18/10/2026): i sei numeri a due colonne su telefono e tre su schermo largo, i
   due grafici SVG a tutta larghezza (barre nel colore d'accento, l'anno prima come trattino scuro con
   l'anello del fondo: si distinguono anche per forma, non solo per colore), le etichette dei mesi in
   HTML (su telefono stretto una si' e una no, cosi' nessuna si taglia), tabelle apribili da 44px. */
.and-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.and-numero { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.and-termine { font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.and-confronto { color: var(--text); font-size: 12px; line-height: 1.4; }
.and-freccia { color: var(--accent-ink); font-size: 11px; margin-right: 4px; }
/* elenchi di numeri (mesi, canali, portafoglio): a filo del riquadro, il valore a destra */
.and-sec .gest-pad .and-elenco { margin: 0 calc(-1 * var(--s4)); }
.and-elenco { border-top: 1px solid var(--line-soft); }
.and-riga { align-items: flex-start; }
.and-valore { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); padding-top: 1px; }
details.and-come > summary, details.and-tabella > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px;
  color: var(--accent-ink); font-size: 13.5px; font-weight: 600;
}
details.and-come > summary::-webkit-details-marker, details.and-tabella > summary::-webkit-details-marker { display: none; }
details.and-come > summary::before, details.and-tabella > summary::before { content: "▸"; }
details[open].and-come > summary::before, details[open].and-tabella > summary::before { content: "▾"; }
details.and-come > summary:focus-visible, details.and-tabella > summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 6px; }
details.and-come p { margin: 0 0 var(--s1); font-size: 12.5px; color: var(--text); }
.and-grafico { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); }
.and-scala { display: flex; flex-direction: column; justify-content: space-between; height: 140px; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.and-area { min-width: 0; }
.and-svg { display: block; width: 100%; height: 140px; overflow: visible; }
.and-griglia { stroke: var(--line); stroke-width: 1; }
.and-base { stroke: var(--muted); stroke-width: 1; }
.and-colonna { fill: transparent; }
.and-voce:hover .and-colonna { fill: var(--overlay-soft); }
.and-barra { fill: var(--accent-ink); }
.and-anno-prima { fill: var(--text); stroke: var(--panel); stroke-width: 1px; vector-effect: non-scaling-stroke; paint-order: stroke; }
.and-assi { display: grid; margin-top: 4px; }
.and-mese { font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; }
.and-legenda { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px var(--s3); margin-top: var(--s2); font-size: 12.5px; color: var(--text); }
.and-leg { display: inline-flex; align-items: center; gap: 6px; }
.and-camp { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; }
.and-camp.barra { background: var(--accent-ink); }
.and-camp.linea { width: 14px; height: 3px; border-radius: 2px; background: var(--text); }
.and-leg-nota { color: var(--muted); }
.and-nota-tab { margin-top: var(--s2); }
.and-ritmo { margin: 0; }
.and-avvisi { display: flex; flex-direction: column; }
.and-avvisi .gest-avviso { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); }
.and-dettaglio { padding: 0 var(--s1); color: var(--text); }
/* la riga a parte delle notti bloccate dai portali (correzioni 25b, A1): dichiarata, col filo a sinistra
   come una nota, nel colore del testo (contrasto pieno in tutti e due i temi) */
.and-bloccate { margin: var(--s2) var(--s1) 0; padding: var(--s1) var(--s2); border-left: 3px solid var(--accent-ink); color: var(--text); }
.and-sec .and-bloccate { margin: var(--s2) 0 0; }
.and-regola { text-align: center; margin-top: var(--s3); }
@media (max-width: 419.98px) {
  .and-assi .and-mese:nth-child(even) { visibility: hidden; }
}
@media (min-width: 720px) {
  .and-numeri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .and-svg, .and-scala { height: 180px; }
}

/* REGOLA GENERALE DI TOCCO (18/10/2026, collaudo della CI su Linux): ogni campo e ogni selettore ha
   almeno 44 px di altezza qualunque sia il carattere del sistema. Su macOS l'altezza veniva dal
   carattere e bastava; su Linux i caratteri sono piu' bassi e un campo scendeva a 40 px. Le regole
   specifiche possono solo alzarla. Esclusi i tipi senza riquadro (caselle, pallini, cursori, file). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
select, textarea { min-height: 44px; box-sizing: border-box; }

/* PREZZI DELLA ZONA sulla scheda della proposta (piano 26, C21): la marcatura "Proposta generata con IA",
   la fonte e i limiti del dato */
.zona-scheda { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.marca-ia { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--on-arancio); background: var(--arancio-fill); border-radius: 999px; padding: 2px 10px; }
.zona-scheda-fonte, .zona-scheda-limiti { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
.adm-avviso-zona { color: var(--text); background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 6px; padding: 6px 10px; }
/* Richiesta di opposizione al dataset di mercato (pannello admin, review 27a M6) */
.adm-opposizione { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.adm-opposizione .adm-sub { font-size: 15px; margin: 0; color: var(--text); }
.adm-opposizione .srow-note { padding: 0; }
.adm-opposizione .cred { width: 100%; min-height: 44px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-md); padding: 10px 12px; font-size: 16px; font-family: inherit; }
.adm-opposizione > .adm-btn-ghost { align-self: flex-start; }
.adm-opp-lista { display: flex; flex-direction: column; gap: 8px; }
.adm-opp-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }

/* Prenotazioni dal sito (piano 29, F2): indirizzo pubblico da copiare e importi delle richieste in Oggi */
.gest-sito-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; overflow-wrap: anywhere; margin: 4px 0 var(--s2); }
.gest-sito-indirizzo { display: flex; flex-direction: column; gap: 2px; }
.gest-sito-titoletto { font-weight: 700; color: var(--text); margin-top: var(--s2); }
.gest-voce-importi { white-space: normal; }

/* Campagne e provenienza (piano 29, F5): generatore dei link nella Struttura, provenienza nella scheda della
   prenotazione, sezione Campagne dell'Andamento */
details.gest-campagna-modifica { border-top: 1px dashed var(--line); padding-top: var(--s1); }
details.gest-campagna-modifica > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px;
  color: var(--accent-ink); font-size: 13.5px; font-weight: 600;
}
details.gest-campagna-modifica > summary::-webkit-details-marker { display: none; }
details.gest-campagna-modifica > summary::before { content: "▸"; }
details[open].gest-campagna-modifica > summary::before { content: "▾"; }
details.gest-campagna-modifica > summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 6px; }
.gest-campagna .gest-voce-s { overflow-wrap: anywhere; }
.and-campagne-righe .gest-voce-t, .and-campagne-righe .gest-voce-s { overflow-wrap: anywhere; }
.and-definizioni { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: var(--s1); font-size: 12.5px; color: var(--text); }

/* RISPOSTA A UN OSPITE (pratica quote_send, piano 29 F6): messaggio dell'ospite, riepilogo coi numeri del motore,
   la risposta come partira'. Testi lunghi: vanno a capo, la risposta ha piu' spazio delle altre card. */
.preventivo-etichetta { margin: 2px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.approval .preventivo-ospite { max-height: 140px; }
.approval .preventivo-corpo { max-height: 320px; }
.preventivo-riepilogo { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 var(--s3); }
.preventivo-voce { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; line-height: 1.45; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; word-break: break-word; }
.preventivo-voce-t { color: var(--muted); min-width: 9em; }
.preventivo-voce-v { color: var(--text); font-weight: 600; flex: 1 1 12em; }
.preventivo-nota { margin: 0 0 var(--s3); font-size: 13px; line-height: 1.45; color: var(--text); }

/* MISURAZIONE META (piano 29, F8): la sezione della Struttura, la riga dell'Andamento > Campagne, le conversioni in
   Oggi (stessa riga impilata delle email agli ospiti: .gest-email-oggi) */
.gest-misurazione .gest-input[type="password"] { letter-spacing: 0.08em; }
.gest-conversione-oggi .gest-voce-t, .gest-conversione-oggi .gest-voce-s { overflow-wrap: anywhere; }
.and-meta { margin-top: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.and-meta-t { margin: 0 0 4px; font-weight: 700; color: var(--text); }