/* ==========================================================================
   FARO — lo stile di Orizzonte.

   E' la proposta B del restyling (settembre 2026), scelta dall'utente per
   TUTTE le visuali: gestore, bagnino, bar, hotel, cliente, sito pubblico. Il
   riferimento esatto sono le tavole del canvas "Restyling Orizzonte"; qui c'e'
   la loro grammatica, scritta una volta.

   Questo foglio si carica PER ULTIMO su ogni pagina: rimappa le variabili dei
   fogli vecchi (app.css, panels.css, i fogli pubblici) sui colori nuovi, cosi'
   le regole gia' scritte cambiano veste senza essere riscritte una per una, e
   poi aggiunge i pezzi che prima non esistevano (barra laterale, ricerca,
   forme degli stati).

   Tre regole che valgono ovunque:
   - l'ARANCIO PIENO e' solo per i soldi (prenota, paga, incassa, emetti un
     importo). Il bottone principale di tutto il resto e' Notte.
   - uno stato si dice con il COLORE e con la FORMA: al sole, o a chi non
     distingue il verde dal rosso, basta la forma.
   - i bottoni sono alti almeno 44 px (48 dove si lavora in piedi): si
     centrano col pollice anche camminando sulla sabbia.
   ========================================================================== */

:root {
    /* ── la tavolozza ── */
    --f-notte: #0c3247;           /* barra laterale, bottone principale */
    --f-notte-2: #154a66;         /* notte sotto il dito */
    --f-mare: #1f7a94;            /* link, selezione, fuoco */
    --f-mare-chiaro: #e4f1f5;
    --f-arancio: #cc4d12;         /* SOLO soldi: 4,5:1 col testo bianco */
    --f-arancio-2: #b0400e;
    --f-arancio-chiaro: #fde5d6;
    --f-arancio-ink: #9c3a0c;
    --f-bruma: #edf2f4;           /* il fondo di lavoro */
    --f-bianco: #ffffff;
    --f-linea: #d5dee3;
    --f-linea-2: #e3e9ec;
    --f-linea-forte: #c9d3d9;
    --f-sabbia: #f3e9d2;          /* la sabbia della mappa, i vuoti */
    --f-sole: #f2c14e;            /* novita', conteggi, "Annulla" */
    --f-sole-chiaro: #fde7a6;
    --f-inchiostro: #0f2433;      /* testo: 15:1 sul bianco */
    --f-grigio: #4f6170;          /* secondario: 6,4:1 */
    --f-grigio-2: #6b7c89;
    --f-verde: #1e8449;
    --f-verde-chiaro: #e3f3e8;
    --f-rosso: #b3261e;
    --f-rosso-chiaro: #fdf1ef;
    --f-guasto: #d62c1a;
    --f-ambra: #e39100;
    --f-ambra-chiaro: #fdebc8;

    /* ── i caratteri ── */
    --f-titoli: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --f-testo: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --f-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* ── le misure ── */
    --f-barra: 232px;            /* aperta; 256 era "un pelo largo" (l'utente, 29/09) */
    --f-barra-stretta: 72px;     /* a sole icone */
    --f-testa-tel: 60px;
    --f-sotto-tel: 76px;

    /* ── il movimento ──
       Quattro durate e due curve per tutto il prodotto. Il censimento del
       29/09 ne ha trovate sette (0,18 · 0,2 · 0,22 · 0,25 · 0,42 · 0,45 ·
       0,55 s) e la stessa curva scritta a mano in sei fogli. */
    --f-tocco: 120ms;          /* la pressione, il passaggio del mouse */
    --f-cambio: 220ms;         /* aprire, chiudere, cambiare stato */
    --f-viaggio: 320ms;        /* una cosa che va da un posto all'altro */
    --f-viaggio-lungo: 420ms;  /* ...da una pagina all'altra */
    --f-racconto: 1400ms;      /* solo per i clienti, e una volta */
    --f-esce: cubic-bezier(.2, .9, .3, 1);    /* parte veloce e frena: entra */
    --f-rientra: cubic-bezier(.4, 0, 1, 1);   /* parte piano e accelera: esce */

    /* ── le variabili dei fogli di prima, rimappate ──
       app.css, panels.css e i fogli di pagina le usano da mesi: cambiarle qui
       cambia la veste a centinaia di regole in un colpo, e i fogli vecchi
       restano leggibili come erano. */
    --color-primary: #0c3247;
    --color-primary-light: #e4f1f5;
    --color-accent: #cc4d12;
    --color-accent-hover: #b0400e;
    --color-accent-light: #fde5d6;
    --color-success: #1e8449;
    --color-warning: #e39100;
    --color-danger: #b3261e;
    --color-bg: #edf2f4;
    --color-surface: #ffffff;
    --color-text: #0f2433;
    --color-muted: #4f6170;
    --color-border: #d5dee3;
    --testata: #0c3247;
    --testata-velo: rgba(12, 50, 71, .94);
}

/* ─── base ─────────────────────────────────────────────────────────────── */
/* Una radice sola per tutto il prodotto. app.css portava il gestionale a
   15 px perche' Inter "leggeva grande"; Atkinson no, e due radici diverse
   facevano valere lo stesso rem in due modi. */
html { font-size: 16px; }
body {
    font-family: var(--f-testo);
    color: var(--f-inchiostro);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--f-titoli);
    letter-spacing: -.015em;
    font-weight: 700;
}
code, kbd, samp, .f-mono { font-family: var(--f-mono); }
/* Le cifre si incolonnano: gli importi e i numeri si confrontano a occhio. */
.table, .f-cifre, [class*="importo"], [class*="totale"] { font-variant-numeric: tabular-nums; }
a { color: var(--f-mare); }
/* Sotto il mouse diventa notte solo il link che ha il colore di qui: con
   :where il peso resta quello di "a" (0,0,1), e un colore dato da una classe
   vince. Scritto a:hover (0,1,1), in questo foglio che si carica per ultimo,
   batteva .area-logo e .po-logo (0,1,0): il marchio bianco sul notte
   diventava notte, e "Orizzonte" spariva sotto il dito. */
a:where(:hover) { color: var(--f-notte); }
:focus-visible { outline: 3px solid rgba(31, 122, 148, .45); outline-offset: 2px; }

/* il fondo di lavoro: bruma, niente gradiente di sabbia */
body.faro {
    background: var(--f-bruma);
    background-image: none;
}

/* ─── bottoni ──────────────────────────────────────────────────────────── */
.btn {
    font-family: var(--f-testo);
    font-weight: 700;
    border-radius: 10px;
    min-height: 44px;
    padding: .5rem 1rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    border-width: 1.5px;
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 36px; padding: .3rem .75rem; font-size: .9rem; border-radius: 8px; }
/* i gruppi piccoli (7 gg / 30 gg) stanno nelle testate delle schede: con
   la misura piena di .btn uscivano dalla fascia */
.btn-group-sm > .btn { min-height: 34px; padding: .2rem .7rem; font-size: .88rem; }
.btn-lg { min-height: 52px; padding: .65rem 1.25rem; font-size: 1.05rem; }
.btn-action { min-height: 56px; font-size: 1.1rem; border-radius: 12px; }

.btn-primary, .btn-primary:disabled {
    background: var(--f-notte); border-color: var(--f-notte); color: #fff; box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--f-notte-2) !important; border-color: var(--f-notte-2) !important;
    color: #fff; box-shadow: none;
}
/* I soldi: prenota, paga, incassa. L'unico arancio pieno del prodotto. */
.btn-soldi, .btn-soldi:disabled {
    background: var(--f-arancio); border-color: var(--f-arancio); color: #fff;
}
.btn-soldi:hover, .btn-soldi:focus, .btn-soldi:active {
    background: var(--f-arancio-2); border-color: var(--f-arancio-2); color: #fff;
}
.btn-outline-primary {
    color: var(--f-notte); border-color: var(--f-notte); background: #fff;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.active {
    color: #fff; background: var(--f-notte); border-color: var(--f-notte);
}
.btn-outline-secondary, .btn-light {
    color: var(--f-notte); border-color: var(--f-linea-forte); background: #fff;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-light:hover {
    color: var(--f-notte); border-color: var(--f-notte); background: #fff;
}
.btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary {
    color: #fff; background: var(--f-notte); border-color: var(--f-notte);
}
.btn-secondary {
    color: var(--f-inchiostro); background: var(--f-bruma); border-color: var(--f-bruma);
}
.btn-secondary:hover { background: var(--f-linea-2); border-color: var(--f-linea-2); color: var(--f-inchiostro); }
.btn-success { background: var(--f-verde); border-color: var(--f-verde); color: #fff; }
.btn-success:hover { background: #17693a; border-color: #17693a; }
.btn-outline-success { color: var(--f-verde); border-color: #9fd0b0; background: #fff; }
.btn-outline-success:hover { background: var(--f-verde); border-color: var(--f-verde); color: #fff; }
.btn-danger { background: var(--f-rosso); border-color: var(--f-rosso); color: #fff; }
.btn-danger:hover { background: #8f1d17; border-color: #8f1d17; }
.btn-outline-danger { color: var(--f-rosso); border-color: #f0c9c3; background: #fff; }
.btn-outline-danger:hover { color: #fff; background: var(--f-rosso); border-color: var(--f-rosso); }
.btn-warning { background: var(--f-sole); border-color: var(--f-sole); color: var(--f-inchiostro); }
.btn-warning:hover { background: #e5ae2c; border-color: #e5ae2c; color: var(--f-inchiostro); }
.btn-outline-warning { color: #7a4a00; border-color: #efd089; background: #fff; }
.btn-link { font-weight: 700; color: var(--f-mare); text-decoration: none; }
.btn-link:hover { color: var(--f-notte); }
.btn-close:focus { box-shadow: 0 0 0 3px rgba(31, 122, 148, .3); }

/* la pastiglia "Indietro": con la barra laterale sempre li', serve solo
   sulle pagine di dettaglio; resta, ma sobria */
.btn-back {
    border-radius: 10px; box-shadow: none; border: 1.5px solid var(--f-linea-forte);
    color: var(--f-notte); font-weight: 700; min-height: 40px;
}
.btn-back:hover { color: var(--f-notte); border-color: var(--f-notte); transform: none; box-shadow: none; }

/* ─── campi ────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    font-family: var(--f-testo);
    font-size: 1rem;
    border: 1.5px solid var(--f-linea-forte);
    border-radius: 10px;
    min-height: 44px;
    color: var(--f-inchiostro);
    background-color: #fff;
    box-shadow: none;
}
.form-control::placeholder { color: #8795a0; }
.form-control:hover, .form-select:hover { border-color: #aebbc4; box-shadow: none; }
.form-control:focus, .form-select:focus {
    border-color: var(--f-mare);
    box-shadow: 0 0 0 3px rgba(31, 122, 148, .18);
}
.form-control-sm, .form-select-sm { min-height: 36px; border-radius: 8px; font-size: .92rem; }
.form-control-lg, .form-select-lg { min-height: 52px; }
textarea.form-control { min-height: 88px; }
.form-label { font-weight: 700; font-size: .88rem; color: var(--f-inchiostro); margin-bottom: .35rem; }
.form-text { color: var(--f-grigio); }
.input-group-text {
    border: 1.5px solid var(--f-linea-forte); background: var(--f-bruma);
    color: var(--f-grigio); font-weight: 700; border-radius: 10px;
}
.form-check-input { border: 1.5px solid #8a99a6; }
.form-check-input:checked { background-color: var(--f-notte); border-color: var(--f-notte); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(31, 122, 148, .2); border-color: var(--f-mare); }
.form-switch .form-check-input:checked { background-color: var(--f-verde); border-color: var(--f-verde); }

/* ─── pannelli ─────────────────────────────────────────────────────────── */
/* Bianchi, bordo sottile, niente ombra: le ombre a tre strati e l'alzarsi
   al passaggio del mouse facevano sembrare cliccabile cio' che non lo e'. */
.card, .card-flat {
    background: #fff;
    border: 1px solid var(--f-linea);
    border-radius: 12px;
    box-shadow: none;
}
.card:hover { box-shadow: none; }
.card-header, .card-footer { background: #fff; border-color: var(--f-linea-2); }
.card-flat .card-band {
    background: #fff;
    border-bottom: 1px solid var(--f-linea-2);
    padding: .85rem 1.1rem;
    flex-wrap: wrap; row-gap: .5rem;          /* i comandi della testata vanno a capo, non fuori */
}
.card-flat .card-band h6, .card-header h5, .card-header h6 {
    font-family: var(--f-titoli); font-weight: 700; font-size: 1.12rem; color: var(--f-notte);
}
.icona-sezione {
    background: var(--f-mare-chiaro); color: var(--f-mare); border-radius: 8px;
}
.card-stat { border-top: 0; border-radius: 12px; }
.card-stat .stat-value { font-family: var(--f-titoli); font-weight: 800; color: var(--f-inchiostro); }
.card-stat .stat-label { letter-spacing: .06em; font-weight: 700; color: var(--f-grigio); }

/* ─── tabelle: bianche, intestazione piccola e grigia ─────────────────── */
.table { --bs-table-bg: #fff; border-color: var(--f-linea-2); color: var(--f-inchiostro); }
.table thead, .table thead th {
    background: #fff; color: var(--f-grigio);
}
.table thead th {
    font-family: var(--f-testo);
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--f-linea-2);
}
.table > :not(caption) > * > * { border-bottom-color: #eef2f4; }
/* le tabelle-dati (cassa, listini, scadenze): panels.css le scriveva color
   sabbia, con i gruppi in arancio — e l'arancio in Faro e' solo dei soldi */
table.tabella-dati thead th {
    background: #fff; color: var(--f-grigio); font-family: var(--f-testo);
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--f-linea-2);
}
table.tabella-dati tbody tr:hover { background: #f6f9fa; }
table.tabella-dati tr.gruppo td { background: var(--f-bruma); color: var(--f-grigio); }
/* la griglia dei listini (pricing.css) ha le sue righe di gruppo, uguali */
.matrix tr.gruppo td { background: var(--f-bruma); color: var(--f-grigio); }
.matrix tbody tr:not(.gruppo):hover { background: #f6f9fa; }
.table-hover tbody tr:hover, .table-hover > tbody > tr:hover > * { background-color: #f4f8f9; --bs-table-hover-bg: #f4f8f9; }

/* ─── etichette ────────────────────────────────────────────────────────── */
.badge {
    font-family: var(--f-testo); font-weight: 700; letter-spacing: 0;
    border-radius: 6px; padding: .35em .6em;
}
.bg-primary { background-color: var(--f-notte) !important; }
.bg-success { background-color: var(--f-verde) !important; }
.bg-danger { background-color: var(--f-rosso) !important; }
.bg-warning { background-color: var(--f-sole) !important; color: var(--f-inchiostro) !important; }
.text-primary { color: var(--f-notte) !important; }
.text-muted { color: var(--f-grigio) !important; }
.text-danger { color: var(--f-rosso) !important; }
.text-success { color: var(--f-verde) !important; }
.text-accent { color: var(--f-arancio-ink) !important; }

/* Gli stati dell'ombrellone nelle schede e negli elenchi: la stessa lingua
   della mappa. Aperto e chiuso NON sono colori (G1-bis): pieno neutro e
   riquadro vuoto; l'occupato e' notte, non arancio. */
.badge-open, .badge-apertura-aperto { background: #e6ecf1; color: #233b4d; }
.badge-closed, .badge-apertura-chiuso { background: #fff; color: #233b4d; box-shadow: inset 0 0 0 1.5px #9aa7b1; }
.badge-free, .badge-disp-libero { background: var(--c-libero, #1e8449); color: #fff; }
.badge-occupied, .badge-disp-occupato { background: var(--c-occupato, #1d3557); color: #fff; }
.badge-disp-prenotato { background: #fff; color: #0b3553; box-shadow: inset 0 0 0 2.5px #1f6fa3; }
.badge-seasonal { background: var(--f-notte); color: #fff; }
.badge-error, .badge-offline { background: var(--f-rosso-chiaro); color: var(--f-rosso); }
.badge-warning { background: var(--f-ambra-chiaro); color: #7a4a00; }
.badge-draft { background: var(--f-ambra-chiaro); color: #7a4a00; }
.badge-unknown { background: #eef2f4; color: var(--f-grigio); }

/* ─── le forme degli stati ─────────────────────────────────────────────── */
/* <span class="f-forma f-libero"></span> e simili: il segno che accompagna la
   parola. Cerchio pieno, anello, quadrato, triangolo, rombo, tratteggio. */
.f-forma {
    display: inline-block; flex: 0 0 auto;
    width: .9em; height: .9em; vertical-align: -.08em;
    box-sizing: border-box;
}
.f-libero { border-radius: 50%; background: var(--f-verde); }
.f-prenotato { border-radius: 50%; background: #fff; border: .2em solid #1f6fa3; }
.f-occupato { border-radius: .18em; background: #1d3557; }
.f-guasto { background: var(--f-guasto); clip-path: polygon(50% 4%, 97% 94%, 3% 94%); }
.f-scadenza { background: var(--f-ambra); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.f-chiuso { border-radius: 50%; border: .12em dashed #6b7c89; background: transparent; }
.f-annullato { border-radius: 50%; background: #c9d3d9; }

/* ─── dialoghi, menu, schede, avvisi ───────────────────────────────────── */
.modal-content { border: 0; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 36, 51, .28); }
/* bianche: la fascia sabbia in testa e in piede (app.css) era della
   palette di prima; e le etichette dei campi non si urlano in maiuscolo */
.modal-header { background: #fff; border-bottom: 1px solid var(--f-linea-2); padding: 1rem 1.25rem; }
.modal-title, .modal-header .modal-title {
    font-family: var(--f-titoli); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; color: var(--f-notte);
}
.modal-footer { background: #fff; border-top: 1px solid var(--f-linea-2); gap: .5rem; }
.modal-body .form-label, .modal-body label.form-label.small {
    text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 700; color: var(--f-inchiostro);
}
.modal-backdrop.show { opacity: .5; }
.dropdown-menu {
    border: 1px solid var(--f-linea); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15, 36, 51, .16); padding: .35rem;
}
.dropdown-item { border-radius: 8px; font-weight: 600; padding: .55rem .75rem; color: var(--f-inchiostro); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--f-bruma); color: var(--f-inchiostro); }
.dropdown-item.active, .dropdown-item:active { background: var(--f-notte); color: #fff; }
.nav-tabs { border-bottom: 1px solid var(--f-linea); gap: .25rem; }
.nav-tabs .nav-link {
    border: 0; border-radius: 0; color: var(--f-grigio); font-weight: 700;
    padding: .7rem .9rem; margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--f-inchiostro); }
.nav-tabs .nav-link.active {
    color: var(--f-inchiostro); background: transparent; box-shadow: inset 0 -3px 0 var(--f-notte);
}
.nav-pills .nav-link { border-radius: 8px; font-weight: 700; color: var(--f-grigio); }
.nav-pills .nav-link.active { background: var(--f-notte); color: #fff; }
.alert { border-radius: 12px; border-width: 1px; }
.alert-info { background: var(--f-mare-chiaro); border-color: #bfe0ea; color: #0f4454; }
.alert-warning { background: var(--f-ambra-chiaro); border-color: #efd089; color: #5c3a00; }
.alert-danger { background: var(--f-rosso-chiaro); border-color: #f0c9c3; color: #7d1a14; }
.alert-success { background: var(--f-verde-chiaro); border-color: #a9d8b8; color: #145a31; }
.progress { background: var(--f-linea-2); border-radius: 999px; }
.progress-bar { background: var(--f-notte); }
.list-group-item { border-color: var(--f-linea-2); }
.list-group-item.active { background: var(--f-notte); border-color: var(--f-notte); }
.page-link { color: var(--f-notte); border-color: var(--f-linea); }
.page-item.active .page-link { background: var(--f-notte); border-color: var(--f-notte); }

/* i dialoghi di ui.js (Notify): il principale e' notte, il pericolo rosso */
.ui-dialog { border-radius: 14px; font-family: var(--f-testo); }
.ui-dialog-title { font-family: var(--f-titoli); font-weight: 700; color: var(--f-notte); }
.ui-dialog-btn { border-radius: 10px; min-height: 44px; font-family: var(--f-testo); font-weight: 700; }
.ui-dialog-btn-primary { background: var(--f-notte); color: #fff; }
.ui-dialog-btn-primary:hover { background: var(--f-notte-2); filter: none; }
.ui-dialog-btn-secondary { background: #fff; color: var(--f-notte); box-shadow: inset 0 0 0 1.5px var(--f-linea-forte); }
.ui-dialog-btn-danger { background: var(--f-rosso); color: #fff; }

/* l'incasso in un gesto (IncassoRapido, ui.js): chi paga, quanto, come */
.ir-chi { font-weight: 700; margin-bottom: 12px; }
.ir-chi small { display: block; font-weight: 400; color: var(--f-grigio); }
.ir-codice { font-family: var(--f-mono); }
.ir-metodo { display: flex; width: 100%; }
.ir-metodo > button { flex: 1 1 0; justify-content: center; gap: 6px; }

/* "Fatto · Annulla": notte, e l'Annulla in sole — si trova al primo colpo */
.annulli-barra {
    background: var(--f-notte); color: #fff; border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 36, 51, .3); font-family: var(--f-testo);
    overflow: hidden;
}
.annulli-barra .annulli-btn {
    background: var(--f-sole); color: var(--f-inchiostro); font-weight: 800;
    border-radius: 8px; min-height: 40px; padding: 0 14px; border: 0;
}
.annulli-barra .annulli-btn:hover { background: #e5ae2c; }
/* il tempo che resta per disfare: la linea sole si accorcia, lineare, per
   tutta la durata (ui.js la mette in --annulli-durata) */
.annulli-tempo {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--f-sole); transform-origin: left center; transform: scaleX(0);
}
.annulli-barra.aperta .annulli-tempo { animation: annulli-scorre var(--annulli-durata, 12s) linear forwards; }
@keyframes annulli-scorre { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ─── componenti nuovi ─────────────────────────────────────────────────── */
/* il titolo di pagina: Bricolage, notte, una riga sotto in grigio */
.f-titolo { font-family: var(--f-titoli); font-weight: 700; font-size: 2rem; line-height: 1.1;
            letter-spacing: -.02em; color: var(--f-notte); margin: 0; }
.f-sottotitolo { font-size: .95rem; color: var(--f-grigio); }
/* la testa di una pagina: titolo e sottotitolo a sinistra, l'azione principale a destra */
.f-testa-pagina { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
/* il pannello bianco generico */
.f-pannello { background: #fff; border: 1px solid var(--f-linea); border-radius: 12px; }
/* le viste di un elenco, a linguette con il conteggio */
.f-viste { display: flex; align-items: flex-end; gap: .25rem; border-bottom: 1px solid var(--f-linea);
           overflow-x: auto; scrollbar-width: none; }
.f-viste::-webkit-scrollbar { display: none; }
.f-vista {
    display: inline-flex; align-items: center; gap: .5rem; height: 44px; padding: 0 .9rem;
    color: var(--f-grigio); font-weight: 700; text-decoration: none; white-space: nowrap;
    border: 0; background: transparent; cursor: pointer;
}
.f-vista:hover { color: var(--f-inchiostro); }
.f-vista.attiva { color: var(--f-inchiostro); font-weight: 800; box-shadow: inset 0 -3px 0 var(--f-notte); }
.f-vista .f-conta { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; background: #dde5ea; color: var(--f-inchiostro); }
.f-vista.attiva .f-conta { background: var(--f-notte); color: #fff; }
/* il selettore a segmenti */
.f-segmenti { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--f-bruma); gap: 3px; }
.f-segmenti > button, .f-segmenti > a, .f-segmenti > label {
    min-height: 38px; padding: 0 .9rem; border: 0; border-radius: 8px; background: transparent;
    color: var(--f-grigio); font-weight: 700; display: inline-flex; align-items: center; cursor: pointer;
    text-decoration: none;
}
.f-segmenti > .attivo, .f-segmenti > [aria-pressed="true"] {
    background: #fff; color: var(--f-inchiostro); box-shadow: 0 1px 2px rgba(15, 36, 51, .12);
}
/* i tasti della tastiera */
.f-tasto { font-family: var(--f-mono); font-size: .72rem; padding: .15rem .4rem; border-radius: 6px;
           background: var(--f-bruma); color: var(--f-grigio); border: 1px solid var(--f-linea); }
/* la striscia dei numeri in testa alle pagine */
.f-striscia { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
              background: #fff; border: 1px solid var(--f-linea); border-radius: 12px; overflow: hidden; }
.f-striscia > * { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; min-width: 0; }
.f-striscia > * + * { border-left: 1px solid var(--f-linea-2); }
.f-striscia .f-numero { font-family: var(--f-titoli); font-weight: 800; font-size: 1.85rem; line-height: 1; }
.f-striscia .f-etichetta { font-size: .88rem; color: var(--f-grigio); }
.f-striscia .allarme { background: var(--f-rosso-chiaro); }
.f-striscia .allarme .f-numero { color: var(--f-rosso); }
/* il lampo di sole sulle cose nuove: 1,5 s e poi torna bianco. E' una luce,
   non un movimento: resta anche con «riduci movimento» (qui sotto). */
@keyframes f-lampo { 0%, 8% { background-color: transparent; } 14% { background-color: var(--f-sole-chiaro); } 60%, 100% { background-color: transparent; } }
.f-nuovo { animation: f-lampo 3s ease-out 1; }

/* ═══ IL MOVIMENTO ═══════════════════════════════════════════════════════
   Le regole (censimento "Orizzonte in movimento", 29/09/2026):
   - il movimento dice cosa e' cambiato, dove e' andato o quanto manca; se
     non dice niente, non c'e';
   - il personale non aspetta: niente oltre --f-viaggio-lungo, niente che
     si ripeta per sempre se non chiede un gesto;
   - il cliente puo' avere un racconto, una volta, quando la cosa entra
     nello schermo;
   - si muovono solo posizione, scala e trasparenza;
   - giallo = nuovo, o cambiato da qualcun altro; il colore dello stato =
     l'hai cambiato tu; verde = pronto o fatto; arancio solo sui soldi.

   «RIDUCI MOVIMENTO», UNA REGOLA SOLA. Era scritta in 5 fogli su 10, e /qui
   (che si usa al sole, col telefono) aveva quattro animazioni infinite
   senza. Qui ogni animazione arriva subito al suo stato finale e non si
   ripete, e le transizioni sono istantanee. Restano le luci (.f-nuovo) e
   cio' che e' un'informazione in se' (.f-sempre: il tempo dell'Annulla che
   scorre; le rotelle, piu' lente). Le animazioni fatte da script chiedono
   a moto.js, che guarda la stessa impostazione. */
@media (prefers-reduced-motion: reduce) {
    *:not(.f-sempre):not(.f-nuovo):not(.pub-spinner):not(.spinner-border):not(.spinner-grow),
    *:not(.f-sempre)::before, *:not(.f-sempre)::after {
        animation-duration: 1ms !important; animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important; transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    .pub-spinner, .spinner-border, .spinner-grow { animation-duration: 1.6s; }
}

/* L'ONDA DISEGNATA, una sola: la riva del sito, la copertina della vetrina
   e il disegno della home. Erano riva-onda, pub-onda e po-onda, la stessa
   animazione in tre fogli; ognuno dice il suo passo in --onda-passo (una
   posizione per ogni strato dello sfondo). */
@keyframes f-onda { to { background-position: var(--onda-passo, 236px 0, 352px 6px); } }

/* MENTRE CARICA: le righe grigie della lista che sta arrivando, al posto
   della rotella, con un luccichio che scorre (fermo con «riduci
   movimento»); i dati ci entrano dentro senza spostare niente. Si dimensiona
   dove si usa: qui c'e' la riga di testo. */
.f-scheletro {
    display: block; height: 12px; border-radius: 6px; max-width: 100%;
    background: linear-gradient(90deg, var(--f-linea-2) 0%, #f6f9fa 50%, var(--f-linea-2) 100%) 0 0 / 200% 100%;
    animation: f-luccica 1.2s linear infinite;
}
@keyframes f-luccica { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* i dati arrivati al posto delle righe grigie: entrano in dissolvenza */
.f-entra { animation: f-entra var(--f-cambio) ease-out; }
@keyframes f-entra { from { opacity: 0; } }
/* una lista che si ricarica resta dov'e', un po' spenta, finche' non arriva */
.f-in-corso { opacity: .55; pointer-events: none; transition: opacity var(--f-tocco); }

/* LA LUCE DEL FARO dopo «Entra» (moto.js, Moto.faro): un fascio che parte
   dal marchio e passa sulla pagina, una volta */
.f-faro { position: fixed; z-index: 2500; width: 0; height: 0; pointer-events: none; }
.f-faro-raggio {
    position: absolute; left: 0; top: -1600px; width: 3200px; height: 3200px;
    transform-origin: 0 50%; opacity: 0;
    background: conic-gradient(from 72deg at 0 50%, rgba(242, 193, 78, 0) 0deg,
        rgba(242, 193, 78, .18) 6deg, rgba(242, 193, 78, .42) 13deg, rgba(242, 193, 78, .18) 20deg,
        rgba(242, 193, 78, 0) 26deg, rgba(242, 193, 78, 0) 360deg);
}

/* i pezzi di moto.js: il numero che rotola, la goccia che va alla barra */
.f-rotola { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.f-rotola > * { grid-area: 1 / 1; }
.f-goccia {
    position: fixed; z-index: 3000; width: 14px; height: 14px; border-radius: 50%;
    background: var(--f-arancio); box-shadow: 0 0 0 3px #fff; pointer-events: none;
}

/* ═══ LA SHELL DEL GESTIONALE ══════════════════════════════════════════════
   La barra laterale notte (aperta 232 px, a sole icone 72), e sul telefono
   la testata bianca in alto con la barra notte in basso. La scrive
   faro-shell.js; le pagine non hanno piu' ognuna la sua barra — erano tre,
   diverse. --f-barra-ora e' quanto occupa adesso: la pagina comincia li'. */
body.faro.con-barra { --f-barra-ora: var(--f-barra); padding-left: var(--f-barra-ora); }
/* Le soglie delle pagine larghe (tre colonne o due, il dettaglio accanto o
   in una finestra) guardano la larghezza della PAGINA, cioe' lo schermo meno
   la barra: le classi pagina-N che mette faro-shell.js ("LE SOGLIE DELLA
   PAGINA"), usate come :where(body.pagina-1278) .x. */
body.faro.con-barra .navbar { display: none !important; }   /* le barre vecchie, se ne resta una */
/* Cio' che sta fisso al centro dello schermo (l'annullo, gli avvisi della
   mappa, "disfa" del bar) si centra sulla pagina, non sotto la barra: con
   la barra aperta finiva 116 px a sinistra del centro. */
body.faro.con-barra .annulli-barra,
body.faro.con-barra .map-toast,
body.faro.con-barra .cn-disfa {
    left: calc(50% + var(--f-barra-ora) / 2); max-width: calc(100vw - var(--f-barra-ora) - 32px);
}
/* "Indietro" fuori dalle schede di dettaglio (lo decide faro-shell.js), e
   con lui la riga che lo conteneva da solo */
body.senza-indietro .btn-back,
body.senza-indietro main > .d-flex:has(> .btn-back:only-child) { display: none !important; }
/* Accanto alla barra la pagina si prende TUTTA la larghezza che resta:
   fermarla contro la barra lasciava vuota la destra degli schermi larghi,
   con le fasce laterali strette (l'utente, sulla Cassa: "tutto schiacciato
   a sinistra"). Oltre i 1920 px, sui 27", si ferma e si centra: righe di
   tabella lunghe mezzo metro non si leggono. */
body.faro.con-barra .app-shell,
body.faro.con-barra .app-shell-wide {
    max-width: 1920px; margin-left: auto; margin-right: auto;
    padding-left: 24px !important; padding-right: 24px !important;
}
/* le fasce laterali crescono con la pagina, il centro si prende il resto
   (17vw di prima, con la barra da 72, sono 17% della pagina + 12 px) */
body.faro:where(.pagina-1278) .layout-3col {
    grid-template-columns: clamp(290px, calc((100vw - var(--f-barra-ora)) * .17 + 12px), 360px) minmax(0, 1fr) clamp(300px, calc((100vw - var(--f-barra-ora)) * .18 + 13px), 380px);
}
/* senza la fascia destra (Ombrelloni: la Gestione e' andata nelle
   Impostazioni) il centro si prende anche il suo posto */
body.faro:where(.pagina-1278) .layout-3col.senza-destra {
    grid-template-columns: clamp(290px, calc((100vw - var(--f-barra-ora)) * .17 + 12px), 360px) minmax(0, 1fr);
}
/* sotto i 1278 le due colonne di panels.css valgono anche senza la fascia
   destra: la sinistra accanto al centro */

.fb-barra {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--f-barra); z-index: 1035;
    background: var(--f-notte); color: #fff;
    /* --fb-t: quanto la barra si stringe per stare nell'altezza dello schermo,
       da 0 (comoda) a 1 (al minimo). La misura faro-shell.js (stringiBarra):
       scendono insieme altezza delle voci, spazi e corpo del testo, cosi' il
       menu resta intero e non serve scorrerlo. */
    --fb-t: 0;
    display: flex; flex-direction: column; gap: calc(14px - 8px * var(--fb-t));
    padding: calc(18px - 10px * var(--fb-t)) 14px calc(14px - 8px * var(--fb-t)); box-sizing: border-box;
    /* su uno schermo cosi' basso che nemmeno al minimo ci sta, la barra scorre
       ancora (rotella, dito), ma senza la striscia di scorrimento */
    overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
    font-family: var(--f-testo);
}
.fb-barra::-webkit-scrollbar { display: none; }
/* mentre faro-shell.js prende le due misure: niente transizioni, o leggerebbe
   l'altezza di prima (con "riduci il movimento" ogni elemento ne ha una da 1 ms) */
.fb-barra.fb-misura, .fb-barra.fb-misura * { transition: none !important; }
/* Nessun pezzo della barra si restringe da solo: su uno schermo basso
   (1440x900) il tasto Cerca si schiacciava a 16 px per far stare il resto. */
.fb-barra > *, .fb-nav > *, .fb-piede > * { flex-shrink: 0; }
.fb-cima { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fb-marchio {
    display: flex; align-items: center; gap: 9px; padding: 4px 8px; color: #fff; text-decoration: none;
    font-family: var(--f-titoli); font-weight: 800; font-size: 21px; letter-spacing: -.01em;
}
.fb-marchio:hover { color: #fff; }
.fb-marchio svg { flex: 0 0 auto; }
.fb-spiaggia {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
    padding: calc(8px - 4px * var(--fb-t)) 12px; color: #fff; font: inherit; text-align: left; cursor: pointer;
}
.fb-spiaggia:hover { background: rgba(255,255,255,.12); }
.fb-spiaggia .fb-chi { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fb-spiaggia .fb-chi small { font-size: 12px; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-spiaggia .fb-chi strong { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-cerca {
    display: flex; align-items: center; gap: 8px; height: calc(42px - 8px * var(--fb-t)); padding: 0 10px; width: 100%;
    border-radius: 10px; background: #fff; color: var(--f-grigio); border: 0; cursor: text;
    font: 400 15px var(--f-testo); text-align: left;
}
.fb-cerca span:first-of-type { flex: 1 1 auto; }
.fb-nav { display: flex; flex-direction: column; gap: 2px; font-size: calc(15px - 2px * var(--fb-t)); }
.fb-gruppo {
    padding: calc(12px - 9px * var(--fb-t)) 10px calc(6px - 4px * var(--fb-t));
    font-size: calc(11px - 1px * var(--fb-t)); letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.5); font-weight: 700;
}
.fb-gruppo:first-child { padding-top: 4px; }
.fb-voce {
    display: flex; align-items: center; gap: 10px; min-height: calc(42px - 16px * var(--fb-t)); padding: 0 10px;
    border-radius: 10px; color: rgba(255,255,255,.78); text-decoration: none; font-weight: 600;
}
.fb-voce:hover { background: rgba(255,255,255,.07); color: #fff; }
.fb-voce.attiva { background: rgba(255,255,255,.12); color: #fff; font-weight: 700; }
.fb-voce.attiva svg { color: var(--f-sole); }
.fb-voce svg { flex: 0 0 auto; }
.fb-barra :focus-visible { outline-color: var(--f-sole); }   /* il mare sul notte non si vede */
.fb-voce .fb-testo { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-conta {
    min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
    background: var(--f-sole); color: var(--f-inchiostro); font-size: 12px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.fb-conta.rosso { background: var(--f-guasto); color: #fff; }
.fb-piede { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: calc(10px - 6px * var(--fb-t));
            border-top: 1px solid rgba(255,255,255,.12); font-size: calc(15px - 2px * var(--fb-t)); }
.fb-utente {
    display: flex; align-items: center; gap: 10px; padding: calc(8px - 5px * var(--fb-t)) 10px; border-radius: 10px;
    color: #fff; background: transparent; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer;
}
.fb-utente:hover { background: rgba(255,255,255,.07); }
.fb-avatar {
    width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--f-mare); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.fb-utente .fb-chi { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fb-utente .fb-chi strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-utente .fb-chi small { font-size: 12px; color: rgba(255,255,255,.62); }
/* il menu che si apre dal nome, e quello delle spiagge */
.fb-menu {
    position: fixed; z-index: 1060; min-width: 230px; background: #fff; color: var(--f-inchiostro);
    border: 1px solid var(--f-linea); border-radius: 12px; box-shadow: 0 18px 44px rgba(15, 36, 51, .22);
    padding: 6px; font-family: var(--f-testo);
}
.fb-menu[hidden] { display: none; }
.fb-menu a, .fb-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 10px;
    border: 0; background: transparent; border-radius: 8px; color: var(--f-inchiostro);
    font: 600 15px var(--f-testo); text-decoration: none; text-align: left; cursor: pointer;
}
.fb-menu a:hover, .fb-menu button:hover { background: var(--f-bruma); color: var(--f-inchiostro); }
.fb-menu .scelta { background: var(--f-mare-chiaro); }
.fb-menu hr { margin: 6px 4px; border-color: var(--f-linea-2); opacity: 1; }
.fb-menu .fb-menu-titolo { padding: 6px 10px 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--f-grigio); font-weight: 700; }
.fb-menu #fb-menu-chi { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }   /* un indirizzo email non si urla */

/* APERTA, O A SOLE ICONE A SCELTA. Sul desktop la barra e' aperta, con le
   scritte, e la pagina comincia dopo di lei: niente le passa sopra. Il
   tasto in cima la riduce alle icone e la pagina si allarga; la scelta
   resta da una pagina all'altra (faro-shell.js). L'utente, 2026-09-29: "di
   default aperto", "quando aperto stringerei tutte le pagine invece che
   passarci sopra", "se decido di collassarlo le pagine si allargano"; dal
   28/09 era sempre a sole icone, e aperta passava sopra la pagina. A sole
   icone il nome di una voce si legge passandoci sopra. Sul telefono resta
   il cassetto, con le scritte. */
.fb-allarga {
    display: none; flex: 0 0 auto; width: 36px; height: 36px; padding: 0;
    align-items: center; justify-content: center;
    border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.66); cursor: pointer;
}
.fb-allarga:hover { background: rgba(255,255,255,.1); color: #fff; }
/* la spiaggia in sigla, quando il nome intero non ci sta */
.fb-spiaggia-mini {
    display: none; flex: 0 0 auto; width: 48px; height: 44px; padding: 0;
    border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07); color: #fff; cursor: pointer;
    font: 800 15px var(--f-titoli); letter-spacing: .01em; align-items: center; justify-content: center;
}
.fb-spiaggia-mini:hover { background: rgba(255,255,255,.14); }
/* il nome della voce, accanto all'icona */
.fb-suggerimento {
    position: fixed; z-index: 1065; pointer-events: none; transform: translateY(-50%);
    background: var(--f-inchiostro); color: #fff; font: 700 13px/1.3 var(--f-testo);
    padding: 7px 10px; border-radius: 8px; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(15, 36, 51, .25);
}
.fb-suggerimento small { font-weight: 500; color: rgba(255,255,255,.72); font-size: 13px; }
.fb-suggerimento[hidden] { display: none; }

@media (min-width: 992px) {
    .fb-allarga { display: inline-flex; }
    body.faro.con-barra.barra-stretta { --f-barra-ora: var(--f-barra-stretta); }
    /* il passaggio dall'una all'altra, solo dopo il primo disegno
       (barra-pronta): una pagina che si carica non apre la barra davanti a
       chi guarda */
    body.faro.con-barra.barra-pronta { transition: padding-left var(--f-cambio) var(--f-esce); }
    .barra-pronta .fb-barra { transition: width var(--f-cambio) var(--f-esce); }
    .barra-pronta .selection-bar { transition: left var(--f-cambio) var(--f-esce); }
    .con-barra.barra-stretta .fb-barra { width: var(--f-barra-stretta); padding: calc(16px - 8px * var(--fb-t)) 12px; align-items: center; }
    .con-barra.barra-stretta .fb-marchio span,
    .con-barra.barra-stretta .fb-spiaggia,
    .con-barra.barra-stretta .fb-cerca .fb-cerca-testo,
    .con-barra.barra-stretta .fb-cerca .f-tasto,
    .con-barra.barra-stretta .fb-gruppo,
    .con-barra.barra-stretta .fb-voce .fb-testo,
    .con-barra.barra-stretta .fb-utente .fb-chi { display: none; }
    .con-barra.barra-stretta .fb-spiaggia-mini { display: inline-flex; }
    .con-barra.barra-stretta .fb-cima { flex-direction: column; gap: calc(8px - 4px * var(--fb-t)); }
    .con-barra.barra-stretta .fb-marchio { padding: 4px 0; justify-content: center; }
    .con-barra.barra-stretta .fb-allarga { width: 48px; }
    .con-barra.barra-stretta .fb-cerca { width: 48px; height: calc(44px - 10px * var(--fb-t)); justify-content: center; padding: 0; background: rgba(255,255,255,.1); color: #fff; }
    .con-barra.barra-stretta .fb-cerca:hover { background: rgba(255,255,255,.16); }
    .con-barra.barra-stretta .fb-barra { gap: calc(12px - 6px * var(--fb-t)); }
    .con-barra.barra-stretta .fb-voce { width: 48px; height: calc(44px - 16px * var(--fb-t)); min-height: 0; justify-content: center; padding: 0; position: relative; }
    .con-barra.barra-stretta .fb-voce .fb-conta { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
    .con-barra.barra-stretta .fb-nav { align-items: center; gap: 2px; }
    .con-barra.barra-stretta .fb-piede { align-items: center; width: 100%; }
    .con-barra.barra-stretta .fb-utente { justify-content: center; padding: calc(8px - 5px * var(--fb-t)) 0; }
    /* fra un gruppo e l'altro, a sole icone, un filo al posto del titolo */
    .con-barra.barra-stretta .fb-nav .fb-gruppo:not(:first-child) {
        display: block; width: 28px; height: 1px; padding: 0; margin: calc(5px - 3px * var(--fb-t)) 0; background: rgba(255,255,255,.14); font-size: 0;
    }
    /* la barra della selezione multipla (pagina ombrelloni) parte dopo la barra */
    body.faro.con-barra .selection-bar { left: var(--f-barra-ora); }
}

/* la testata e la barra del telefono: non esistono sul desktop */
.fb-testa, .fb-sotto, .fb-velo { display: none; }

@media (max-width: 991.98px) {
    body.faro.con-barra {
        --f-barra-ora: 0px;
        padding-left: 0;
        padding-top: var(--f-testa-tel);
        padding-bottom: calc(var(--f-sotto-tel) + env(safe-area-inset-bottom, 0px));
    }
    .fb-barra {
        width: min(86vw, 300px); transform: translateX(-102%); transition: transform var(--f-viaggio) var(--f-esce);
        box-shadow: 0 0 40px rgba(0,0,0,.3); z-index: 1062;
    }
    body.barra-aperta .fb-barra { transform: none; }
    .fb-cerca .f-tasto { display: none; }          /* Ctrl K su un telefono non c'e' */
    .fb-velo { position: fixed; inset: 0; z-index: 1061; background: rgba(12, 50, 71, .45); }
    body.barra-aperta .fb-velo { display: block; }
    .fb-voce { min-height: 46px; }

    .fb-testa {
        display: flex; align-items: center; gap: 4px;
        position: fixed; left: 0; right: 0; top: 0; height: var(--f-testa-tel); z-index: 1034;
        padding: 0 6px 0 14px; box-sizing: border-box;
        background: #fff; border-bottom: 1px solid var(--f-linea); font-family: var(--f-testo);
    }
    .fb-testa .fb-spiaggia-tel {
        display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1 1 auto;
        background: transparent; border: 0; padding: 0; text-align: left; color: var(--f-inchiostro); cursor: pointer;
    }
    .fb-testa .fb-spiaggia-tel small { font-size: 12px; color: var(--f-grigio); line-height: 1.2; }
    .fb-testa .fb-spiaggia-tel strong {
        display: flex; align-items: center; gap: 4px; max-width: 100%;
        font-family: var(--f-titoli); font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--f-notte);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
    }
    .fb-testa .fb-tasto-tel {
        width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 10px; background: transparent;
        color: var(--f-notte); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .fb-testa .fb-tasto-tel:hover { background: var(--f-bruma); }
    .fb-testa .fb-avatar { width: 36px; height: 36px; font-size: 13px; }

    .fb-sotto {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1034;
        height: calc(var(--f-sotto-tel) + env(safe-area-inset-bottom, 0px));
        padding: 6px 6px calc(10px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
        background: var(--f-notte); font-family: var(--f-testo);
    }
    .fb-sotto a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: rgba(255,255,255,.74); text-decoration: none; font-size: 12px; font-weight: 600; min-width: 0;
    }
    .fb-sotto a.attiva { color: #fff; font-weight: 800; }
    .fb-sotto a.attiva svg { color: var(--f-sole); }
    .fb-sotto a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .fb-sotto .fb-piu {
        width: 46px; height: 46px; margin-top: -20px; border-radius: 14px; background: var(--f-arancio); color: #fff;
        display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.25);
    }
    /* la barra dell'annullo sta sopra la barra in basso, non dietro */
    .annulli-barra { bottom: calc(var(--f-sotto-tel) + 14px + env(safe-area-inset-bottom, 0px)) !important; }
    body.faro.con-barra .selection-bar { bottom: calc(var(--f-sotto-tel) + env(safe-area-inset-bottom, 0px)); }
    body.faro.con-barra .app-shell, body.faro.con-barra .app-shell-wide {
        max-width: 100%; padding-left: 16px !important; padding-right: 16px !important;
    }
}

/* ─── la ricerca (Ctrl K) ──────────────────────────────────────────────── */
.fk-velo {
    position: fixed; inset: 0; z-index: 1070; background: rgba(12, 50, 71, .42);
    display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px;
    font-family: var(--f-testo);
}
.fk-velo[hidden] { display: none; }
.fk-finestra {
    width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 14px; box-shadow: 0 28px 70px rgba(15, 36, 51, .35); overflow: hidden;
    animation: fk-entra var(--f-cambio) var(--f-esce);
}
@keyframes fk-entra { from { transform: translateY(-8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.fk-campo { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 60px; border-bottom: 1px solid var(--f-linea-2); }
.fk-campo input {
    flex: 1 1 auto; border: 0; outline: 0; background: transparent; min-width: 0;
    font: 400 19px var(--f-testo); color: var(--f-inchiostro);
}
.fk-risultati { overflow-y: auto; padding: 6px; }
.fk-gruppo { padding: 10px 10px 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--f-grigio); font-weight: 700; }
.fk-voce {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px;
    color: var(--f-inchiostro); text-decoration: none; cursor: pointer;
}
.fk-voce:hover, .fk-voce.scelta { background: var(--f-mare-chiaro); color: var(--f-inchiostro); }
.fk-voce .fk-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fk-voce .fk-testo strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-voce .fk-testo small { color: var(--f-grigio); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-voce .fk-codice { font-family: var(--f-mono); font-weight: 700; }
.fk-voce .fk-invio { font-size: 12px; color: var(--f-grigio); }
.fk-vuoto { padding: 18px 14px; color: var(--f-grigio); }
.fk-piede { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--f-linea-2); font-size: 12px; color: var(--f-grigio); }
@media (max-width: 575.98px) {
    .fk-velo { padding: 0; align-items: stretch; }
    .fk-finestra { width: 100%; max-height: none; border-radius: 0; }
    .fk-piede { display: none; }
}

/* ─── l'impianto a tre fasce, nella veste nuova ────────────────────────── */
/* Senza la barra in alto le fasce laterali si fermano piu' in alto; e sul
   telefono il LAVORO viene prima dei filtri: aprire Prenotazioni e trovarsi
   davanti due schede di filtri prima della lista era il difetto principale. */
body.faro:where(.pagina-1278) .layout-3col > .col-left,
body.faro:where(.pagina-1278) .layout-3col > .col-right { top: 16px; max-height: calc(100vh - 32px); }
/* la barra aperta su uno schermo sotto i 1130 px lascia meno di 900 px:
   una colonna sola, come sul telefono, col lavoro per primo */
body.faro:where(:not(.pagina-900)) .layout-3col { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
body.faro:where(:not(.pagina-900)) .layout-3col > .col-main { order: 1; }
body.faro:where(:not(.pagina-900)) .layout-3col > .col-left { order: 2; margin-bottom: 0; }
body.faro:where(:not(.pagina-900)) .layout-3col > .col-right { order: 3; margin-bottom: 0; }
@media (max-width: 991.98px) {
    /* stretch, non lo start di panels.css: con start la colonna prendeva la
       larghezza della tabella (542 px su un telefono da 390, 628 sui
       Listini) e la pagina intera scorreva di lato, testata compresa */
    body.faro .layout-3col { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
    body.faro .layout-3col > .col-main { order: 1; }
    body.faro .layout-3col > .col-left { order: 2; margin-bottom: 0; }
    body.faro .layout-3col > .col-right { order: 3; margin-bottom: 0; }
}
body.faro .lista-sommario { background: #fff; }
body.faro .rail-nav .rail-item.scelto { box-shadow: none; background: var(--f-mare-chiaro); }

/* ═══ IL BAR IN CONCESSIONE (area "servizio") ══════════════════════════════
   Le pagine di chi conduce il bar (servizio_shell.js) entrano nella stessa
   shell: le loro schede sono le voci della barra laterale, e la pagina si
   prende tutta la larghezza come le altre. servizio.css resta com'era:
   parla con le variabili di prima, che qui sopra sono rimappate su Faro. */
body.faro .sv-app { max-width: 1920px; margin: 0 auto; padding: 22px 24px 40px; }
body.faro .sv-intestazione {
    display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
    padding: 0; margin-bottom: 18px;
}
.sv-titoli { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
/* il posto in cima quando non c'e' altro da scegliere: niente freccina */
body.luogo-fisso .fb-spiaggia > svg, body.luogo-fisso .fb-spiaggia-tel svg { display: none; }
body.luogo-fisso .fb-spiaggia, body.luogo-fisso .fb-spiaggia-mini,
body.luogo-fisso .fb-spiaggia-tel { cursor: default; }
@media (max-width: 991.98px) {
    body.faro .sv-app { padding: 14px 16px 24px; }
    body.faro .sv-intestazione { margin-bottom: 12px; }
    /* il locale e la spiaggia li dice gia' la testata del telefono */
    body.faro .sv-titoli .f-sottotitolo { display: none; }
}

/* Sulle pagine del bar il vecchio "accento" dei fogli di pagina (menu.css,
   locale.css, servizio.css) non e' mai un importo: e' il tocco, il fuoco di
   un campo, la cosa scelta. In Faro quello e' notte; l'arancio resta ai
   soldi, che le regole di Faro chiamano per nome (--f-arancio). */
body.faro[data-area="servizio"], body.faro[data-area="hotel"] {
    --color-accent: var(--f-notte);
    --color-accent-hover: var(--f-notte-2);
    --color-accent-light: var(--f-mare-chiaro);
}
/* le stelle di "in evidenza" nel Menu': sole, scurito quanto basta per
   leggersi sul bianco */
body.faro .mb-evidenza i, body.faro .mb-stella, body.faro .mb-star.on { color: #b88a12; }
body.faro .mb-star:hover { color: #b88a12; background: var(--f-sole-chiaro); }

/* I colori scritti a mano in servizio.css — l'arancio del "c'e' da fare",
   il viola del menu', il verde scuro dei soldi — tornano sulla tavolozza:
   sole quando c'e' da fare, verde quando e' a posto, notte il resto. Il
   tasto principale e' notte come nel resto del gestionale; l'arancio resta
   solo a cio' che e' ancora da incassare. */
body.faro .sv-btn {
    min-height: 44px; padding: 0 14px; border: 1.5px solid var(--f-linea-forte); border-radius: 10px;
    background: #fff; color: var(--f-notte); font-size: 15px; font-weight: 700; justify-content: center;
}
body.faro .sv-btn:hover { border-color: var(--f-notte); color: var(--f-notte); }
body.faro .sv-btn.primario, body.faro .sv-btn.blu {
    background: var(--f-notte); border-color: var(--f-notte); color: #fff;
}
body.faro .sv-btn.primario:hover, body.faro .sv-btn.blu:hover { background: var(--f-notte-2); border-color: var(--f-notte-2); color: #fff; }
body.faro .sv-btn.piccolo { min-height: 36px; padding: 0 10px; font-size: 14px; }
body.faro .sv-btn.grande { min-height: 52px; justify-content: flex-start; }
body.faro .sv-stato.prova, body.faro .sv-badge.prova { background: var(--f-sole-chiaro); color: #7a4a00; }
body.faro .sv-campo input:focus, body.faro .sv-campo select:focus,
body.faro .rq-risposta input:focus {
    outline: none; border-color: var(--f-mare); box-shadow: 0 0 0 3px rgba(31, 122, 148, .2);
}
body.faro .sv-blocco { border-radius: 12px; border-color: var(--f-linea); }
body.faro .sv-blocco-testa h2 {
    font-family: var(--f-titoli); font-weight: 700; font-size: 20px; letter-spacing: -.01em;
    text-transform: none; color: var(--f-notte);
}
/* le schede dei numeri del giorno (Shell.scheda) */
body.faro .sv-numero { border-radius: 12px; border-color: var(--f-linea); }
body.faro a.sv-numero:hover { border-color: var(--f-notte); transform: none; }
body.faro .sv-numero .etichetta { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--f-grigio); }
body.faro .sv-numero .valore { font-weight: 800; font-size: 1.85rem; }
body.faro .sv-numero .sotto { font-size: 13px; color: var(--f-grigio); }
body.faro .sv-numero .sotto.allarme { color: var(--f-inchiostro); font-weight: 700; }
body.faro .sv-numero.t-fuoco { --tinta: var(--f-inchiostro); --velo: var(--f-sole); border-color: #efd089; background: #fffbef; }
body.faro .sv-numero.t-verde, body.faro .sv-numero.t-pronto { --tinta: var(--f-verde); --velo: var(--f-verde-chiaro); }
body.faro .sv-numero.t-soldi, body.faro .sv-numero.t-mare,
body.faro .sv-numero.t-menu { --tinta: var(--f-notte); --velo: var(--f-bruma); }
body.faro .sv-numero.t-spento { --tinta: var(--f-grigio); --velo: var(--f-bruma); }
/* il conto della giornata: la somma in grande, senza il verde scuro */
body.faro .og-conto { font-size: 15px; }
body.faro .og-conto.somma { background: var(--f-bruma); }
body.faro .og-conto.somma > span > .bi, body.faro .og-conto.somma strong { color: var(--f-inchiostro); }
body.faro .og-conto.somma strong { font-family: var(--f-titoli); font-weight: 800; font-size: 1.25rem; }
body.faro .og-conto.aperto strong, body.faro .og-conto.aperto > span > .bi { color: var(--f-arancio-ink); }
body.faro a.og-link-conto:hover { background: var(--f-bruma); }
/* gli ordini in breve (Oggi), le cose da fare, le azioni veloci */
body.faro .og-ordine { border-radius: 12px; border-color: var(--f-linea); }
body.faro .og-num { background: var(--f-notte); border-radius: 10px; }
body.faro .og-ordine.ready { border-color: #b7e1c8; background: #f6fcf8; }
body.faro .og-ordine.ready .og-num { background: var(--f-verde); }
body.faro .og-ic { background: var(--f-sole-chiaro); color: var(--f-inchiostro); }
body.faro .og-voce:hover, body.faro .og-azione:hover { border-color: var(--f-notte); background: #fff; }
body.faro .og-azione:hover .og-pastiglia { --tinta: var(--f-notte); --velo: var(--f-mare-chiaro); }
/* unita', concessioni (gestori.html), richieste di tavolo */
body.faro .u-carta:hover, body.faro .gs-scelta:hover { border-color: var(--f-notte); }
body.faro .gs-gia { color: var(--f-grigio); }
body.faro .gs-aggiungi:hover { color: var(--f-notte); }
body.faro .rq-carta.pending { border-color: #efd089; background: #fffbef; }
@media (max-width: 575.98px) {
    /* quattro numeri in due righe, non quattro schede alte una sopra l'altra */
    body.faro .sv-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    body.faro .sv-numero { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
    body.faro .sv-numero .og-pastiglia { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; }
    body.faro .sv-numero .valore { font-size: 1.5rem; }
}

/* ─── le segnalazioni e i conteggi nelle tabelle ──────────────────────────
   Gli stati avevano i colori scritti negli script: "Aperto" era l'arancio
   dei soldi. Una tinta per stato: aperta e' da guardare (sole), in
   lavorazione e' in mano a qualcuno (mare), risolta e' a posto (verde),
   chiusa e' storia. I numeri nelle tabelle: sole, e rosso per gli errori. */
.badge-segn { font-weight: 700; }
.badge-segn.aperta { background: var(--f-sole-chiaro); color: #7a4a00; }
.badge-segn.lavorazione { background: var(--f-mare-chiaro); color: var(--f-notte); }
.badge-segn.risolta { background: var(--f-verde-chiaro); color: #14663a; }
.badge-segn.chiusa { background: var(--f-bruma); color: var(--f-grigio); }
.badge-conta { background: var(--f-sole); color: var(--f-inchiostro); font-weight: 800; }
.badge-conta.rosso { background: var(--f-rosso); color: #fff; }

/* il cruscotto della piattaforma: due strisce, quanto c'e' e cosa seguire */
.ad-numeri { display: grid; gap: 12px; margin-bottom: 18px; }
.ad-cifra { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ad-numeri .f-forma { font-size: 20px; }
.ad-numeri .f-numero small { font-size: 18px; font-weight: 600; color: var(--f-grigio); }
.ad-numeri .allarme .f-etichetta { color: #8a2a20; }
@media (max-width: 767.98px) {
    .ad-numeri .f-striscia { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad-numeri .f-striscia > :nth-child(odd) { border-left: 0; }
    .ad-numeri .f-striscia > :nth-child(n+3) { border-top: 1px solid var(--f-linea-2); }
}

/* ═══ IL SITO E L'APP DEL CLIENTE ══════════════════════════════════════════
   Le pagine pubbliche (portale, risultati, vetrina, le due porte, /qui, il
   pagamento) hanno i loro fogli — base.css, spiaggia.css, scena.css e
   quelli di pagina — scritti con le variabili del sito: qui prendono i
   colori di Faro, come le variabili del gestionale piu' su. Il fondo di
   sabbia (con la grana) diventa la bruma delle tavole B; il mare e la
   sabbia DISEGNATI (la scena) restano: sono un'illustrazione, non un fondo.
   L'arancio pieno resta a cio' che costa: prenota, paga, ordina. */
:root {
    --blu: #0c3247;
    --blu-chiaro: #1f7a94;
    --sabbia: #edf2f4;
    --sabbia-scura: #d5dee3;
    --testo: #0f2433;
    --muto: #4f6170;
    --bordo: #d5dee3;
    --verde: #1e8449;
    --arancio: #cc4d12;
    --testata: #0c3247;
    --testata-velo: rgba(12, 50, 71, .94);
}
body.pub-corpo, body.po-ricerca {
    background-color: var(--f-bruma);
    background-image: none;
}
/* Il tasto principale del sito e' notte, come nel gestionale; l'arancio
   pieno solo dove si spende (.soldi: paga, ordina, avanti nella
   prenotazione). Prima era arancio anche "Entra", "Vai", "Attiva" e
   "Prenota un tavolo", che e' gratis. E i bottoni sono rettangoli coi
   angoli di Faro, non pillole. */
.pub-btn { border-radius: 10px; min-height: 44px; font-weight: 700; }
.pub-btn.primary { background: var(--f-notte); color: #fff; box-shadow: none; }
.pub-btn.primary:hover { background: var(--f-notte-2); color: #fff; filter: none; box-shadow: none; }
.pub-btn.primary.soldi { background: var(--f-arancio); }
.pub-btn.primary.soldi:hover { background: var(--f-arancio-2); }
.pub-btn.large { min-height: 56px; font-size: 18px; font-weight: 800; border-radius: 12px; }
.pub-btn.ghost.scuro { border: 1.5px solid var(--f-linea-forte); color: var(--f-notte); }
.pub-btn.ghost.scuro:hover { border-color: var(--f-notte); background: #fff; color: var(--f-notte); }
.pub-btn:focus-visible { outline-color: rgba(31, 122, 148, .45); }
/* il menu' dei locali: il prezzo all'ombrellone in mare (e' un prezzo, non
   un tasto), le icone dei capitoli in notte, gli allergeni in ambra */
.men-eur-2, .men-legenda > span:nth-child(3) { color: var(--f-mare); }
.men-sezione h4 .bi { color: var(--f-notte); }
.men-allergeni, .ord-avvertenza { color: #7a4a00 !important; }
.pren-da-pagare { background: var(--f-arancio-chiaro); }
/* /qui: gli accenti arancio diventano sole sul mare della scena, mare
   sulla sabbia della mappa; il tuo ombrellone ha l'anello mare */
.q-barra-posto .bi, body.scena-corpo .q-gruppo h3 .bi, body.scena-corpo .q-niente-vicino .bi,
.q-suggerimento .bi, .q-riprova .bi, #s-scegli .q-invito .bi { color: var(--f-sole); }
.q-zoom-io { color: var(--f-mare); }
.q-cerca:focus-within { border-color: var(--f-mare); box-shadow: 0 0 0 3px rgba(31, 122, 148, .2); }
.q-item.mio::before { border-color: var(--f-mare); animation-name: q-tu-mare; }
@keyframes q-tu-mare {
    0% { box-shadow: 0 0 0 0 rgba(31, 122, 148, .45); }
    100% { box-shadow: 0 0 0 14px rgba(31, 122, 148, 0); }
}
.q-item-tu { background: var(--f-notte); }