/* ============================================================================
   CABINE E MACCHINARI (passo 3) — gli stili di app/js/cabine.js
   ============================================================================
   Solo classi cab-* e solo i token di sistema.css: il tema scuro va da solo.
   Niente stili scritti nei template (le media query qui sotto funzionano) e
   niente movimenti (telefoni vecchi).
   Ogni altezza sull'altezza "dinamica" dello schermo e' scritta due volte,
   prima in vh: Chrome prima della 108 non conosce l'unita' nuova e butta via
   la riga, e sul telefono il foglio (allineato in basso) uscirebbe dallo
   schermo senza potersi scorrere.
   Tutto quello che si tocca e' alto almeno 44 px (--tocco), anche su PC.    */

/* ── la riga in Moduli & Funzioni ─────────────────────────────────────────── */
.riga-impo.cab-riga-moduli { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; }
.cab-mod-sx { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 auto; min-width: 0; }
.cab-ico { width: 22px; height: 22px; flex: none; color: var(--t2); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cab-mod-testi { flex: 1 1 auto; min-width: 0; }
.cab-mod-testa { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; }
.cab-mod-testa > * { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
#cab-mod-titolo { font-weight: 700; font-size: 14.5px; color: var(--t1); }
.cab-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 100px; background: var(--card-2); color: var(--t2); border: 1px solid var(--bordo); }
.cab-badge.on { background: var(--verde-soft); color: var(--verde-ink); border-color: var(--verde-vivo); }
.cab-mod-desc { font-size: 12px; color: var(--t2); line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; }
.cab-mod-stato { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--t1); }
.cab-mod-stato.on { color: var(--verde-ink); }
.cab-mod-stato.off { color: var(--t2); }
.cab-mod-stato > * { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }

/* l'interruttore: 48x44 da toccare, la pista 48x26 al centro */
.cab-interr { position: relative; display: inline-flex; align-items: center; width: 48px; height: 44px; flex: none; cursor: pointer; }
/* top/right/bottom/left prima di inset: i Chrome prima dell'87 non conoscono inset (telefoni vecchi) */
.cab-interr > input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cab-interr-pista { position: relative; display: block; width: 48px; height: 26px; border-radius: 26px; background: var(--t3); }
.cab-interr-pista::after { content: ''; position: absolute; top: 3px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.cab-interr > input:checked + .cab-interr-pista { background: var(--verde-vivo); }
.cab-interr > input:checked + .cab-interr-pista::after { left: 24px; }
.cab-interr > input:disabled + .cab-interr-pista { opacity: .55; }
.cab-interr > input:focus-visible + .cab-interr-pista { outline: 2px solid var(--verde-vivo); outline-offset: 3px; }

@media (max-width: 420px) {
  .riga-impo.cab-riga-moduli { flex-direction: column; align-items: stretch; gap: 10px; }
  .riga-impo.cab-riga-moduli > .cab-interr { align-self: flex-start; }
}

/* ── le finestre ──────────────────────────────────────────────────────────── */
.cab-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 800;
  background: rgba(11, 26, 20, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cab-foglio {
  background: var(--card); color: var(--t1);
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-modal);
  font-size: var(--fs-md); line-height: 1.45;
}
.cab-testa {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center;
  padding: 12px 10px 8px 18px; border-bottom: 1px solid var(--bordo-soft);
}
.cab-testa > .cab-passo, .cab-testa > .cab-titolo { grid-column: 1; }
.cab-testa > .cab-x { grid-column: 2; grid-row: 1; align-self: start; }
.cab-passo { font-size: var(--fs-sm); font-weight: 700; color: var(--t2); min-height: 0; }
.cab-passo:empty { display: none; }
.cab-titolo {
  margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.2px; color: var(--t1);
  min-width: 0; word-break: break-word; overflow-wrap: anywhere;
}
.cab-x {
  width: 44px; height: 44px; min-height: var(--tocco); border: 0; border-radius: 50%; background: none;
  color: var(--t2); font: inherit; font-size: 26px; line-height: 1; cursor: pointer;
}
.cab-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 18px 16px;
}
.cab-corpo > * { min-width: 0; }
.cab-errore { flex: none; margin: 0; padding: 8px 18px 0; color: var(--cancellato-t); font-weight: 700; font-size: var(--fs-md); word-break: break-word; overflow-wrap: anywhere; }
.cab-errore:empty { display: none; }
.cab-piede {
  flex: none; display: flex; gap: 10px;
  padding: 12px 18px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordo-soft);
}
.cab-piede:empty { display: none; }
.cab-piede > * { flex: 1 1 0; min-width: 0; }
.cab-piede2 { flex: none; padding: 0 18px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.cab-piede:not(:last-child) { padding-bottom: 8px; }

@media (max-width: 600px) {
  .cab-overlay { align-items: flex-end; padding: 0; }
  .cab-foglio {
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--r) var(--r) 0 0;
  }
}

/* ── i testi ──────────────────────────────────────────────────────────────── */
/* due misure: le frasi che spiegano una scelta (14 px) e le note (12,5 px) */
.cab-spiega { margin: 0 0 10px; color: var(--t2); font-size: var(--fs-md); line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; }
.cab-grigio, .cab-nota-nessuna { margin: 0 0 10px; color: var(--t2); font-size: var(--fs-sm); line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; }
.cab-testo { margin: 0 0 10px; color: var(--t1); font-size: var(--fs-md); line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; }
.cab-domanda { margin: 4px 0 6px; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--t1); word-break: break-word; overflow-wrap: anywhere; }
.cab-sotto { display: block; margin: 14px 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--t2); }
.cab-blocco { margin-bottom: 12px; }
.cab-rosso { color: var(--cancellato-t); }
.cab-verde { margin: 12px 0 8px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--confermato-bg); color: var(--confermato-t); font-weight: 600; word-break: break-word; overflow-wrap: anywhere; }
.cab-avviso { background: var(--attesa-bg); color: var(--attesa-t); }

/* ── i tasti ──────────────────────────────────────────────────────────────── */
.cab-tasto {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tocco); padding: 8px 16px; border: 1px solid var(--bordo); border-radius: var(--r-sm);
  background: var(--card); color: var(--t1); font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer;
  text-align: center; word-break: break-word; overflow-wrap: anywhere;
}
/* il bianco sul verde non si legge: testo scuro, come .nov-tasto */
.cab-tasto-1 { background: var(--verde-vivo); border-color: var(--verde-vivo); color: #0d1a14; }
.cab-tasto:disabled { opacity: .6; cursor: default; }
.cab-link {
  display: inline-flex; align-items: center; min-height: var(--tocco); max-width: 100%; padding: 0 2px;
  border: 0; background: none; color: var(--verde-ink); font: inherit; font-size: var(--fs-md); font-weight: 700;
  text-align: left; cursor: pointer; word-break: break-word; overflow-wrap: anywhere;
}
.cab-link.cab-rosso { color: var(--cancellato-t); }
.cab-overlay [aria-disabled="true"], #cabine-impo-container [aria-disabled="true"] { opacity: .45; cursor: default; }
.cab-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

/* ── i bottoncini ─────────────────────────────────────────────────────────── */
.cab-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
/* largo almeno quanto alto (collaudo: «Sì» era 42 px): il testo corto sta al centro */
.cab-chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tocco); max-width: 100%; min-width: var(--tocco);
  padding: 8px 14px; border: 1.5px solid var(--bordo); border-radius: 100px;
  background: var(--card); color: var(--t1); font: inherit; font-size: var(--fs-md); font-weight: 600;
  text-align: left; cursor: pointer; word-break: break-word; overflow-wrap: anywhere;
}
/* acceso = aria-pressed, col segno di spunta davanti: non si capisce solo dal colore. Il segno e' DISEGNATO (due
   bordi ruotati) e non il carattere ✓: il font dell'app non ce l'ha, e al primo disegno il telefono andava a
   cercarlo fra i font di sistema (misurato: circa 140 ms con la CPU 20 volte piu' lenta). */
.cab-chip[aria-pressed="true"] { background: var(--verde-soft); border-color: var(--verde-vivo); color: var(--verde-ink); }
.cab-chip[aria-pressed="true"]::before, .cab-scelta[aria-pressed="true"]::before {
  content: ''; display: inline-block; flex: none; width: .32em; height: .62em; margin: 0 .55em .18em .12em;
  border: solid currentColor; border-width: 0 .15em .15em 0; transform: rotate(45deg);
}
.cab-chip-resto { border-style: dashed; }
.cab-scelte { display: grid; gap: 8px; margin: 6px 0 10px; }
.cab-scelta {
  display: flex; align-items: center; min-height: 52px; width: 100%; min-width: 0; padding: 10px 14px;
  border: 1.5px solid var(--bordo); border-radius: var(--r-sm); background: var(--card); color: var(--t1);
  font: inherit; font-size: var(--fs-md); font-weight: 700; text-align: left; cursor: pointer;
  word-break: break-word; overflow-wrap: anywhere;
}
.cab-scelta[aria-pressed="true"] { background: var(--verde-soft); border-color: var(--verde-vivo); color: var(--verde-ink); }

/* ── i contatori ──────────────────────────────────────────────────────────── */
.cab-contatore { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.cab-cont-btn {
  width: var(--tocco); height: var(--tocco); min-height: var(--tocco); border: 1.5px solid var(--bordo); border-radius: 50%;
  background: var(--card); color: var(--t1); font: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
}
.cab-cont-val { min-width: 40px; text-align: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--t1); }

/* ── le spunte (la casella vera copre tutta la riga: si tocca ovunque) ────── */
.cab-spunte { display: flex; flex-direction: column; margin: 2px 0 6px; }
.cab-spunte[hidden], .cab-spunta[hidden] { display: none; }
.cab-spunte-titolo { margin: 10px 0 2px; font-size: var(--fs-sm); font-weight: 700; color: var(--t2); }
.cab-spunta { position: relative; display: flex; align-items: center; min-height: var(--tocco); min-width: 0; cursor: pointer; }
.cab-spunta > input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cab-spunta > span { position: relative; display: block; min-width: 0; padding: 4px 0 4px 32px; color: var(--t1); word-break: break-word; overflow-wrap: anywhere; }
.cab-spunta > span::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -11px;
  border: 1.5px solid var(--t3); border-radius: 6px; background: var(--card);
}
.cab-spunta > input:checked + span::before { background: var(--verde-vivo); border-color: var(--verde-vivo); }
.cab-spunta > input:checked + span::after {        /* il segno disegnato dentro la casella (vedi sopra: niente ✓) */
  content: ''; position: absolute; left: 8px; top: 50%; width: 6px; height: 11px; margin-top: -8px;
  border: solid #0d1a14; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.cab-spunta > input:focus-visible + span::before { outline: 2px solid var(--verde-vivo); outline-offset: 2px; }

/* ── le domande ───────────────────────────────────────────────────────────── */
.cab-scheda, .cab-macchina {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  margin: 10px 0; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: var(--r-sm); background: var(--card-2);
}
.cab-scheda > *, .cab-macchina > * { min-width: 0; max-width: 100%; word-break: break-word; overflow-wrap: anywhere; }
.cab-scheda > .cab-chips, .cab-macchina > .cab-chips, .cab-scheda > .cab-spunte, .cab-macchina > .cab-spunte,
.cab-scheda > .cab-nome-input, .cab-macchina > .input-form { align-self: stretch; }
.cab-nome-btn {
  min-height: var(--tocco); padding: 0; border: 0; background: none; color: var(--t1); font: inherit; font-size: 16px; font-weight: 700;
  text-align: left; cursor: pointer; text-decoration: underline dashed var(--t3); text-underline-offset: 4px;
  word-break: break-word; overflow-wrap: anywhere;
}
.cab-nome-input { margin: 0; }
.cab-elenco-btn {
  min-height: var(--tocco); padding: 0; border: 0; background: none; color: var(--t2); font: inherit; font-size: var(--fs-sm);
  text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; overflow-wrap: anywhere;
}
.cab-nota-misto {
  display: block; width: 100%; min-height: var(--tocco); margin: 8px 0 0; padding: 10px 12px;
  border: 1px dashed var(--bordo); border-radius: var(--r-sm); background: var(--card-2); color: var(--t1);
  font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; word-break: break-word; overflow-wrap: anywhere;
}
.cab-nota-nessuna { margin: 8px 0 0; }
.cab-mac-testa { font-weight: 700; color: var(--t1); }
.cab-mnome, .cab-mcerca { margin: 4px 0; }

/* il riepilogo */
.cab-riga {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--bordo-soft);
}
.cab-riga > p { flex: 1 1 200px; min-width: 0; margin: 0; color: var(--t1); word-break: break-word; overflow-wrap: anywhere; }
.cab-riga > .cab-spiega { flex: 1 1 100%; color: var(--t2); }
.cab-riga > .cab-cambia { flex: none; }
.cab-riga.cab-avviso { padding: 10px 12px; border-radius: var(--r-sm); border-bottom: 0; margin: 6px 0; }
.cab-riga.cab-avviso > p { color: var(--attesa-t); }
#cab-rie-elenco { flex: 1 1 100%; min-width: 0; }
.cab-prob { padding: 6px 0; border-bottom: 1px solid var(--bordo-soft); font-size: var(--fs-sm); color: var(--t1); word-break: break-word; overflow-wrap: anywhere; }
.cab-prob:last-child { border-bottom: 0; }
.cab-abit { padding: 10px 0; border-bottom: 1px solid var(--bordo-soft); }
.cab-abit-nome { display: block; font-weight: 700; color: var(--t1); word-break: break-word; overflow-wrap: anywhere; }

/* ── la scheda nelle Impostazioni ─────────────────────────────────────────── */
/* il «+» rotondo del nuovo appuntamento sta fisso in basso a destra: l'ultima
   riga (un «Rimetti», un «Modifica») deve poter salire sopra di lui */
#cabine-impo-container { padding-bottom: 88px; }
.cab-card { margin-bottom: 16px; }
.cab-card > .impostazioni-titolo { margin-bottom: 10px; }
.cab-nota-scheda { margin: 0 0 14px; }
.cab-voce, .cab-tolta {
  display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bordo-soft);
}
.cab-voce-testo { flex: 1 1 auto; min-width: 0; color: var(--t1); word-break: break-word; overflow-wrap: anywhere; }
.cab-voce > .cab-tasto, .cab-tolta > .cab-tasto { flex: none; }
.cab-ctrl { padding: 8px 0; border-bottom: 1px solid var(--bordo-soft); }
.cab-ctrl-testo { display: block; font-weight: 600; color: var(--t1); word-break: break-word; overflow-wrap: anywhere; }
.cab-probs { margin-bottom: 6px; }
.cab-massimo { margin-top: 6px; }

/* ── «Dove si fa?» nel trattamento nuovo e in Modifica Trattamento ────────── */
.cab-trat-righe { margin: 4px 0 14px; }
.cab-td { margin-bottom: 8px; min-width: 0; }
.cab-trat-nota { margin: 2px 0 0; }
/* nella finestra Modifica Trattamento le etichette sono come le altre della
   finestra (12,5 px, normali: agenda.js le scrive cosi'); nel modulo nuovo resta
   lo stile del modulo, in maiuscoletto */
#cab-mt-righe .form-label { font-size: var(--fs-sm); font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--t2); margin-bottom: 6px; }
/* la finestra Modifica Trattamento, solo col segno: con due righe in piu' il
   Salva non deve uscire da uno schermo basso */
.cab-mt-scorre {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.riga-impo-dettagli .cab-el { color: var(--t2); word-break: break-word; overflow-wrap: anywhere; }

/* ── il fuoco da tastiera ─────────────────────────────────────────────────── */
.cab-tasto:focus-visible, .cab-chip:focus-visible, .cab-link:focus-visible, .cab-scelta:focus-visible,
.cab-cont-btn:focus-visible, .cab-nome-btn:focus-visible, .cab-elenco-btn:focus-visible,
.cab-nota-misto:focus-visible, .cab-x:focus-visible {
  outline: 2px solid var(--verde-vivo); outline-offset: 2px;
}

/* ============================================================================
   PASSO 4 — LE CABINE IN AGENDA (solo col segno di prova)
   ============================================================================
   Ogni selettore ha una classe o un id cab-: senza segno nessuna di queste
   regole tocca un elemento di oggi. Dove si cambia una regola di sistema.css o
   agenda.css il selettore pesa di piu' (una classe in piu'): non dipende
   dall'ordine dei fogli. Solo token (tema scuro), niente movimenti, niente
   color-mix (telefoni vecchi).                                              */

/* le icone disegnate da cabine.js (porta, presa, orologio) non si stringono */
svg.cab-ic { flex: none; }

/* ── la giornata: l'ora prima di tutto (§7.1.2) ───────────────────────────── */
/* La riga dell'ora e l'etichetta stanno in .cab-riga1, che va a capo ed e'
   tagliata: l'ora non si stringe mai (se da sola non ci sta va a capo dentro
   di se', come senza segno); l'etichetta prende lo spazio che resta, coi
   puntini, e se non ci stanno nemmeno i suoi 20 px finisce sulla riga dopo,
   alta zero e fuori dal riquadro: non si vede per niente. */
.timeline-apt .cab-riga1 { display: flex; flex-wrap: wrap; align-items: flex-start; min-width: 0; overflow: hidden; margin-bottom: 2px; }
.timeline-apt .cab-riga1 > .timeline-apt-ora { flex: 0 0 auto; max-width: 100%; min-width: 0; margin-bottom: 0; }
.timeline-apt .cab-riga1.cab-inv > .cab-eti { margin-right: 14px; }   /* la spunta del promemoria: spazio per l'etichetta, non per l'ora */
.cab-eti {
  box-sizing: border-box; flex: 1 1 20px; min-width: 20px; max-width: -webkit-max-content; max-width: max-content;
  margin-left: 6px; margin-bottom: -15px;   /* sulla riga dopo ha altezza zero e resta fuori: non si vede */
  display: inline-flex; align-items: center; gap: 3px; height: 15px; line-height: 15px;
  padding: 0 5px 0 4px; border-radius: 4px; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden;
}
.cab-eti .cab-ic { flex: none; }
.cab-eti-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cab-eti-grigia { color: var(--t2); background: transparent; padding-left: 0; }
.cab-eti-arancio { color: var(--attesa-t); background: var(--attesa-bg); }
/* (lenti) chi resta senza, in un blocco cosi' stretto che accanto all'ora
   l'etichetta non ci sta: resta l'icona in un distintivo pieno, a destra
   nella riga del nome (mai solo il colore del bordo, §7.1.4). cabine.js mette
   cab-eti-giu sul blocco quando l'etichetta e' finita sulla riga nascosta. */
.cab-eti-mini { display: none; }
.timeline-apt.cab-eti-giu .cab-eti-mini {
  display: flex; align-items: center; justify-content: center; float: right;
  width: 15px; height: 15px; margin: 1px 0 0 4px; border-radius: 4px;
  background: var(--attesa-bg); color: var(--attesa-t);
}
/* il bordo arancione e' un'ombra interna: il bordo sinistro resta del colore
   dell'operatrice e la selezione resta il contorno verde */
.timeline-apt.cab-pb { box-shadow: inset 0 0 0 2px var(--attesa); }
.timeline-apt.cab-pb:hover, .timeline-apt.cab-pb.selezionata { box-shadow: inset 0 0 0 2px var(--attesa), var(--shadow-sm); }

/* ── la panoramica per operatrice (§7.2) ──────────────────────────────────── */
.pano-apt.cab-pb { box-shadow: inset 0 0 0 2px var(--attesa); }
.pano-apt.cab-pb:hover { box-shadow: inset 0 0 0 2px var(--attesa), var(--shadow-sm); }
.cab-pa-segno { display: inline-flex; vertical-align: -1px; margin-right: 3px; color: var(--attesa-t); }
.pano-apt-trat .cab-pa-dove { color: var(--t2); font-weight: 600; }
.pano-apt-trat .cab-pa-manca { color: var(--attesa-t); font-weight: 700; }

/* ── la settimana: solo chi resta senza, bordo TRATTEGGIATO (non solo un
   colore: si vede anche sulle operatrici arancioni, §7.4) ──────────────── */
.apt-block.cab-pb { outline: 2px dashed var(--attesa-t); outline-offset: -2px; }

/* ── il dettaglio (§7.5) ──────────────────────────────────────────────────── */
.cab-det-dove-t, .cab-det-macchine-t { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
.cab-det-dove .cab-det-solito { color: var(--t2); font-weight: 400; }
.cab-det-box { background: var(--attesa-bg); border: 1.5px solid var(--attesa); border-radius: 12px; padding: 11px 13px; margin: 0 0 14px; }
.cab-det-tit { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--attesa-t); }
.cab-det-tit > span { min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
.cab-det-box .cab-det-tit ~ .cab-det-tit { margin-top: 10px; }
.cab-det-testo { font-size: 12.5px; line-height: 1.5; color: var(--t1); margin-top: 3px; word-break: break-word; overflow-wrap: anywhere; }
.cab-det-sposta, .cab-det-apri {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: var(--tocco);
  margin-top: 10px; padding: 6px 14px; border-radius: 100px; background: var(--card); font: inherit; font-size: 13.5px; font-weight: 700;
  text-align: center; cursor: pointer; word-break: break-word; overflow-wrap: anywhere;
}
.cab-det-sposta { border: 1.5px solid var(--attesa); color: var(--attesa-t); }
.cab-det-apri { border: 1.5px solid var(--bordo); color: var(--t1); }
.cab-det-nota { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--t2); word-break: break-word; overflow-wrap: anywhere; }
.cab-det-sposta:focus-visible, .cab-det-apri:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 2px; }
/* (lenti) «(15:00–15:30)» non va a capo in mezzo */
.cab-det-box .cab-nowrap, .cab-det-macchine .cab-nowrap { white-space: nowrap; }

/* ── il tasto «Da sistemare» in alto (§7.6) ───────────────────────────────── */
/* arancione chiaro e FERMO (la campanella pulsa: questo no) */
.cab-sis-tasto {
  display: inline-flex; align-items: center; gap: 5px; flex: none; height: 32px; padding: 0 12px 0 10px; border-radius: 100px;
  border: 1.5px solid var(--attesa); background: var(--attesa-bg); color: var(--attesa-t); font: inherit; font-size: 13px;
  font-weight: 700; white-space: nowrap; cursor: pointer;
}
.cab-sis-n { font-variant-numeric: tabular-nums; }
.cab-sis-tasto:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 2px; }
/* sul telefono: quando il tasto c'e' il nome in alto si accorcia prima, e
   sotto i 480 px gli spazi della prima riga stringono a 6 px (la campanella
   non si tocca: ha una transition sua).
   (passo 6) LA PAROLA RESTA SEMPRE: «N da sistemare» (numero e parola in un
   solo span, con uno spazio vero). Se il tasto uscirebbe dallo schermo
   (oltre i 16 px del bordo) o toccherebbe il resto della barra, cabine.js
   (misuraTasto) stringe il resto un gradino alla volta e si ferma al primo
   che basta: 1) cab-sis-corto, il tasto piu' piccolo (12 px, porta 14 px);
   2) cab-sis-due, «N da» / «sistemare» su due righe dentro il tasto; 3)
   cab-sis-stretto, il nome in alto (o «Tutte») coi puntini; 4) solo alla
   fine cab-sis-senzanome, il nome si nasconde (resta il cerchio con
   l'iniziale). Il nome dice di chi e' l'agenda: si tocca per ultimo. La barra
   non cambia altezza; niente animazioni. Le due regole del nome stanno DOPO
   le @media: hanno la stessa forza e vincono perche' vengono dopo. */
@media (max-width: 767px) { .topbar-op-info.cab-sis-on .topbar-op-nome { max-width: 90px; } }
@media (max-width: 479px) { .topbar-op-info.cab-sis-on { gap: 6px; } }
@media (max-width: 359px) { .topbar-op-info.cab-sis-on .topbar-op-nome { max-width: 56px; } }
.cab-sis-tasto.cab-sis-corto { padding: 0 8px 0 7px; gap: 4px; font-size: 12px; }
.cab-sis-tasto.cab-sis-corto svg { width: 14px; height: 14px; }
.cab-sis-tasto.cab-sis-due { height: auto; min-height: 32px; padding: 2px 8px 2px 7px; font-size: 11.5px; }
.cab-sis-tasto.cab-sis-due .cab-sis-testo { white-space: normal; line-height: 1.05; width: -webkit-min-content; width: min-content; text-align: left; }
.topbar-op-info.cab-sis-stretto .topbar-op-nome { max-width: 3.2em; }
.topbar-op-info.cab-sis-senzanome .topbar-op-nome { display: none; }
/* la finestra: le righe col loro [Apri] */
.cab-sis-riga { display: flex; align-items: center; gap: 10px; }
.cab-sis-riga .cab-prob-testo { flex: 1 1 auto; min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
.cab-sis-riga .cab-sis-apri { flex: none; }

/* ── il toast grigio di cabine.js (agenda.css non ne ha uno grigio: .toast
   senza tipo e' scuro); si chiude al tocco ────────────────────────────── */
.toast.cab-grigio { background: var(--t2); color: var(--card); cursor: pointer; }

/* ── la barra della panoramica e la vista «Per cabina» (§7.3) ─────────────── */
/* i due tasti con l'aspetto di .tema-seg (sistema.css), ma alti 44 px */
.cab-pano-barra {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px;
  background: var(--card); border-bottom: 1px solid var(--bordo-soft);
}
.cab-pano-scelte { display: inline-flex; gap: 2px; padding: 3px; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 100px; max-width: 100%; }
.cab-pano-scelta {
  min-height: var(--tocco); min-width: 0; padding: 0 16px; border: 0; border-radius: 100px; background: transparent; color: var(--t2);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; word-break: break-word; overflow-wrap: anywhere;
}
.cab-pano-scelta[aria-pressed="true"] { background: var(--t1); color: var(--card); font-weight: 700; }
.cab-pano-scelta:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 2px; }
.cab-pano-nota { flex: 1 1 100%; min-width: 0; margin: 0; font-size: var(--fs-sm); color: var(--t2); word-break: break-word; overflow-wrap: anywhere; }
/* le corsie dei posti uguali: 112 px sul computer (come sul telefono: con 88
   px «Mariagrazia 12:00» non ci stava e l'ora spariva), un terzo dello spazio
   sul telefono */
.pano-wrap.cab-pano { --cab-corsia: 112px; }
@media (max-width: 699px) {
  .pano-wrap.cab-pano { --cab-corsia: calc((100vw - var(--pano-ore)) / 3); }
  @supports (width: 1cqw) { .pano-wrap.cab-pano { --cab-corsia: calc((100cqw - var(--pano-ore)) / 3); } }
  /* lo scatto si ferma solo all'inizio di ogni posto, non delle corsie 2..q */
  .pano-wrap.cab-pano .pano-col.cab-pc-col:not(.cab-pc-prima) { scroll-snap-align: none; }
}
/* le teste non fanno niente al tocco (qui non c'e' un'agenda da aprire) */
.pano-testa.cab-pc-testa, .pano-testa.cab-pc-testa:hover { cursor: default; background: var(--card); }
.cab-pc-testa.cab-pc-uguali { flex-direction: column; align-items: stretch; padding: 8px 0 4px; }
.cab-pc-riga { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cab-pc-testa.cab-pc-uguali .cab-pc-riga { padding: 0 8px 0 10px; }
.cab-pc-icona {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--card-2); color: var(--t2); box-sizing: border-box;
}
.cab-pc-speciale .cab-pc-icona { background: transparent; border: 1.5px dashed var(--bordo); }
/* lo stato sotto il nome si legge (≥ 4,5 anche col tema scuro): --t3 della
   panoramica per operatrice qui non basta */
.pano-testa.cab-pc-testa .pano-stato { color: var(--t2); }
/* (lenti) Le teste non si tagliano: nome e stato vanno a capo (fra le parole)
   invece dei puntini («Cabina V…», «Altr…» a 768-1440 px), e dove le colonne
   sono strette l'icona tonda si toglie per lasciare il posto al nome: sul
   computer e sul tablet (da 700 px le colonne sono da 124 px, o poco piu') e
   sui telefoni piu' stretti di 340 px (mezza schermata sotto i 150 px). Con
   una media query e non con @container: basta questa, e non si aggiunge un
   contenitore per ogni testa a una vista che si ridisegna a ogni cambio. */
.pano-testa.cab-pc-testa .pano-nome, .pano-testa.cab-pc-testa .pano-stato { white-space: normal; overflow-wrap: break-word; text-overflow: clip; }
@media (min-width: 700px), (max-width: 339px) {
  .pano-testa.cab-pc-testa .cab-pc-icona { display: none; }
}
.cab-pc-sistemare .pano-nome { color: var(--attesa-t); }
.cab-pc-sistemare .cab-pc-icona { background: var(--attesa-bg); color: var(--attesa-t); border: 0; }
.pano-wrap .pano-col.cab-pc-col { cursor: default; }
.pano-wrap .pano-col.cab-pc-corsia:not(.cab-pc-prima) { border-left-style: dashed; }
.pano-apt.cab-pc-rich { border-left-style: dashed; background: var(--card); box-shadow: inset 0 0 0 1px var(--bordo); }
.pano-apt.cab-pc-rich.cab-pb { box-shadow: inset 0 0 0 2px var(--attesa); }
.pano-apt-riga b.cab-pc-op { color: var(--t1); font-variant-numeric: normal; margin-right: 4px; }
/* (lenti) riga 1 dei blocchi per cabina: il nome si accorcia coi puntini,
   l'ora non si stringe mai (nelle corsie strette spariva per prima) */
.pano-apt.cab-pc-apt .pano-apt-riga { display: flex; align-items: baseline; min-width: 0; }
.pano-apt.cab-pc-apt .pano-apt-riga > b.cab-pc-op { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-apt.cab-pc-apt .pano-apt-riga > .cab-pc-ora { flex: none; font-variant-numeric: tabular-nums; }
.pano-apt.cab-pc-apt .pano-apt-riga > .cab-pa-segno { flex: none; align-self: center; }
.cab-pc-manca {
  display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--attesa-t);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab-pc-manca > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* «Nascondi nomi»: come agenda.css, ma solo token (tema scuro) e i puntini
   sempre visibili (il testo a 0 px: anche dopo un nome lungo) */
body.privacy-mode .cab-pc-cliente { font-size: 0 !important; color: transparent !important; background: var(--bordo); border-radius: 4px; user-select: none; }
body.privacy-mode .cab-pc-cliente::after { content: '● ● ●'; font-size: 10px; letter-spacing: 2px; color: var(--t3); }

/* ── passo 5: la riga sotto Data e Ora (§8) ──────────────────────────────────
   Nessuna animazione, nessuna transizione: su un telefono vecchio la riga
   compare e basta. Lo spazio dei tasti e' tenuto anche mentre si cerca
   (min-height): il modulo sotto non salta quando arriva il tasto. */
#modal-nuovo .cab-riga-nuovo { margin: -2px 0 14px; }
.cab-riga-grigia .cab-riga-g { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--t2); overflow-wrap: anywhere; }
.cab-riga-grigia .cab-riga-g + .cab-riga-g { margin-top: 2px; }
.cab-riga-arancio { background: var(--attesa-bg); border: 1.5px solid var(--attesa); border-radius: 12px; padding: 11px 13px; }
/* (giro 3) titolo su due o tre righe: l'icona sta accanto alla PRIMA riga (non a meta' altezza);
   2 px = (riga di 19,5 px - icona di 16) / 2 */
.cab-riga-tit { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 800; color: var(--attesa-t); overflow-wrap: anywhere; }
.cab-riga-tit .cab-ic { flex: none; margin-top: 2px; }
.cab-riga-testo { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--t1); overflow-wrap: anywhere; }
/* (giro 2) la frase di [Fai prima …] staccata dall'elenco di chi c'e' */
.cab-riga-testo.cab-riga-inverso { margin-top: 8px; font-weight: 600; }
.cab-riga-tasti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; min-height: var(--tocco); }
.cab-riga-tasto {
  flex: 1 1 180px; min-height: var(--tocco); padding: 0 14px; border-radius: 100px; border: 1.5px solid var(--attesa);
  background: var(--card); color: var(--attesa-t); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  overflow-wrap: anywhere;
}
.cab-riga-nota { flex: 1 1 100%; margin: 0; font-size: 12px; line-height: 1.45; color: var(--t2); }
/* l'icona della finestra al Salva e a Sposta (porta o presa, 28 px) */
#forza-apt-icona .cab-ic { color: var(--attesa-t); }
/* il toast arancione che resta 10 s (toastLungo): il colore e' quello di .toast.arancio di agenda.css */
#toast-container .toast.cab-lungo { cursor: pointer; }
/* (giro 2) Col tema scuro il fondo di .toast.arancio e' arancione chiaro e il
   testo bianco non si leggeva (contrasto 1,58): per i toast delle cabine (solo
   col segno: toastLungo e il toast di Sposta diventato arancione) il testo e'
   scuro. Il tasto «Annulla» del toast di Sposta senza il suo velo bianco. */
:root[data-theme="dark"] #toast-container .toast.arancio.cab-lungo,
:root[data-theme="dark"] #toast-container .toast.arancio.cab-arancio { color: var(--sfondo); }
#toast-container .toast.cab-arancio #toast-undo-btn { background: transparent !important; }
:root[data-theme="dark"] #toast-container .toast.cab-arancio #toast-undo-btn { color: var(--sfondo) !important; border-color: var(--sfondo) !important; }

/* ── passo 6: il perché degli orari che mancano, il conteggio, la riga fissa ── */
/* (collaudo, §10.8.6 «il sito com'era»: prove_cabine_banco 4, telefoni vecchi) accanto a overflow-wrap:anywhere, che
   Safari < 15.4 e Chrome < 80 non conoscono, la riserva word-break:break-word come in tutte le regole dei passi 3 e 4;
   sui browser di adesso le due insieme vanno a capo esattamente come overflow-wrap:anywhere da sola */
.cab-perche { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--t2); word-break: break-word; overflow-wrap: anywhere; }
#lista-buchi-risultati .cab-perche { margin: -4px 0 10px; }
.cab-vuota { word-break: break-word; overflow-wrap: anywhere; }
/* (collaudo, §9 contrasti ≥ 4,5) in Trova posto la frase sta sotto «Nessun posto trovato.», che e' in --t3 (contrasto
   3,03 col tema chiaro): la frase delle cabine, su una riga sua, prende --t2 come le altre frasi del perche' */
#lista-buchi-risultati .cab-vuota { color: var(--t2); }
.cab-fascia-tag { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--attesa-t); text-align: right; }
.cab-fascia-perche { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--t2); word-break: break-word; overflow-wrap: anywhere; }
.rich-scelta.occupata.cab-scelta { border-color: var(--attesa); background: var(--attesa-bg); }
.rich-scelta.cab-scelta .rich-scelta-nota { color: var(--attesa-t); }
.cab-portale-impo { margin: -4px 0 14px; }
.cab-portale-impo p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--t2); word-break: break-word; overflow-wrap: anywhere; }
.cab-portale-impo p + p { margin-top: 6px; }
.cab-conta { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--t2); word-break: break-word; overflow-wrap: anywhere; }
#richieste-contenuto > .cab-conta { margin: -8px 0 16px; }
#cabine-impo-container .cab-conta { margin: 0 0 14px; }