/* ==========================================================================
   Motore di prenotazione Sequoya — foglio di stile
   Questo CSS non e' usa-e-getta: e' la base del motore vero. Il mockup gli
   attacca dati finti, la tappa 2 gli attacchera' quelli di Channex.
   ========================================================================== */

/* I nomi delle variabili restano quelli di prima: `motore.css` lo leggono
   anche `mockup-extranet.html` e `mockup-area-cliente.html`, e rinominarli
   avrebbe spento meta' delle loro regole. I VALORI invece vengono da
   `claude/stile-motore.html`, che e' il disegno approvato. Dove la pagina di
   stile ha un nome suo (`--grigio`, `--raggio-piccolo`) sta scritto accanto
   a quale variabile di qui corrisponde. */
:root {
  /* colori — un solo accento per struttura, tutto il resto e' neutro */
  --accento: #2f5d43;
  --accento-scuro: #24483a;
  /* l'alone della tariffa scelta: lo stesso verde all'un decimo */
  --accento-chiaro: rgba(47, 93, 67, .10);
  /* le etichette « di valore » (Tariffa piu' bassa) sono oro, mai rosse */
  --oro: #b08d4a;
  --fondo: #faf8f4;
  --fondo-alt: #f2eee6;
  /* `--carta` resta bianco pieno: la usano le tabelle dell'extranet e i
     riquadri dell'area cliente, che stanno su una pagina opaca. Le schede
     dentro il pannello traslucido usano `--carta-scheda`. */
  --carta: #ffffff;
  --carta-scheda: rgba(255, 255, 255, .92);
  /* il pannello: traslucido, il sito dell'hotel traspare */
  --pannello: rgba(250, 248, 244, .86);
  --testo: #1d1f1c;
  --tenue: #5f635c;                       /* --grigio */
  --tenue-chiaro: #9a9d96;                /* --grigio-chiaro: il pieno barrato */
  --linea: rgba(29, 31, 28, .08);
  --linea-forte: rgba(29, 31, 28, .2);
  --allarme: #8a4b2a;

  --raggio: 4px;
  --raggio-g: 8px;
  --raggio-piccolo: 10px;                 /* tariffe e bottoni */
  --raggio-scheda: 14px;                  /* schede camera e galleria */
  --ombra: 0 1px 2px rgba(35, 38, 42, .05), 0 8px 24px rgba(35, 38, 42, .06);
  --ombra-scheda: 0 1px 2px rgba(29, 31, 28, .04), 0 12px 32px -12px rgba(29, 31, 28, .18);
  --ombra-scheda-hover: 0 2px 4px rgba(29, 31, 28, .05), 0 24px 48px -16px rgba(29, 31, 28, .28);
  --ombra-pannello: -24px 0 60px -20px rgba(0, 0, 0, .45);

  --titolo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --corpo: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Il pannello della pagina di stile e' min(680px, 100%). */
  --pannello-l: 680px;
  /* Quanto e' alta la barra del totale: serve al fondo del corpo, perche' la
     barra ci sta sopra. Con la riga di fiducia sono ~28 px in piu'; sotto i
     640 px la riga di fiducia non c'e' e si torna a 84. */
  --barra-h: 112px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: #1b1d1a;
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
/* le icone non si schiacciano mai accanto a un testo lungo */
svg { flex: none; }
a { color: inherit; }

/* --- bersagli comodi al pollice: mai sotto i 44 px --- */
button, .tocco { min-height: 44px; }

/* ==========================================================================
   Barra del mockup — NON fa parte del motore, serve solo a Giovanni
   per cambiare la modalita' di pagamento senza ricaricare la pagina.
   ========================================================================== */
.barra-mockup {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: #23262a; color: #f2eee6;
  font-size: 13px; letter-spacing: .01em;
}
.barra-mockup strong { font-weight: 500; color: #fff; }
.barra-mockup .etichetta { color: #9c968c; }
.mock-scelte { display: flex; gap: 4px; background: #33373c; border-radius: 999px; padding: 3px; }
.mock-scelte button {
  min-height: 32px; padding: 4px 12px; border: 0; border-radius: 999px;
  background: transparent; color: #cfc9bf; font-size: 13px;
}
.mock-scelte button[aria-pressed="true"] { background: #f2eee6; color: #23262a; }
.mock-nota { margin-left: auto; color: #9c968c; }

/* ==========================================================================
   Sito finto dell'hotel — sta dietro, serve a vedere il pannello in contesto
   ========================================================================== */
.sito {
  min-height: 100vh; padding-top: 46px;
  background: #1b1d1a; color: #efe9df;
}
.sito-hero {
  position: relative; min-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 24px; gap: 22px;
  background: #2a2c26;
  overflow: hidden;
}
.sito-hero .sfondo { position: absolute; inset: 0; opacity: .5; }
.sito-hero .sfondo svg { width: 100%; height: 100%; }
.sito-hero > * { position: relative; }
.sito-occhiello {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #b9b1a3;
}
.sito-hero h1 {
  font-family: var(--titolo); font-weight: 400;
  font-size: clamp(38px, 8vw, 76px); line-height: 1.05; margin: 0; letter-spacing: .01em;
}
.sito-hero p { max-width: 30rem; margin: 0; color: #c8c1b4; }
.sito-prenota {
  margin-top: 10px; padding: 14px 34px; border: 1px solid #efe9df; border-radius: 2px;
  background: transparent; color: #efe9df;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  transition: background .18s, color .18s;
}
.sito-prenota:hover { background: #efe9df; color: #23262a; }
.sito-coda { padding: 72px 24px 96px; text-align: center; color: #8e887c; font-size: 14px; }

/* ==========================================================================
   Pannello laterale
   ========================================================================== */
.velo {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 22, 18, .45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.velo[data-aperto="1"] { opacity: 1; pointer-events: auto; }

/* Il pannello e' traslucido: il sito dell'hotel resta visibile sotto, sfocato.
   L'ingresso da destra qui NON e' l'`animation: entra` della pagina di stile,
   perche' il pannello si apre E si chiude su `data-aperto` e un'animazione
   parte una volta sola: e' la stessa cosa fatta con una transizione, con la
   durata e la curva che chiede il documento (0,45 s, cubic-bezier(.2,.7,.2,1)).
   `will-change` non serve: il browser ottimizza gia' la trasformazione. */
.pannello {
  position: fixed; z-index: 310; top: 0; right: 0; bottom: 0;
  width: min(var(--pannello-l), 100vw);
  display: flex; flex-direction: column;
  background: var(--pannello);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border-left: 1px solid rgba(255, 255, 255, .55);
  box-shadow: var(--ombra-pannello);
  transform: translateX(100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.pannello[data-aperto="1"] { transform: none; }

/* La striscia dell'anteprima (#159, #161): sopra il nome, finche' la struttura
   non e' in vendita. Vuota non occupa niente. */
.striscia { flex: none; }
.striscia-anteprima {
  margin: 0; padding: 8px 20px; font-size: 13px; line-height: 1.4; text-align: center;
  background: var(--testo); color: var(--fondo);
}

/* Intestazione e barra della ricerca non hanno un fondo loro: se lo avessero
   sarebbero due fasce opache incollate sopra un pannello traslucido. */
.pannello-testa {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--linea);
  background: transparent;
}
.pannello-testa .nome {
  font-family: var(--titolo); font-size: 26px; font-weight: 500; letter-spacing: .01em;
  margin-right: auto; line-height: 1.1;
}
.mini-scelta {
  display: flex; align-items: center; border: 1px solid var(--linea-forte); border-radius: 999px;
  overflow: hidden;
}
.mini-scelta button {
  min-height: 34px; padding: 3px 11px; border: 0; background: transparent;
  color: var(--tenue); font-size: 13px;
}
.mini-scelta button[aria-pressed="true"] { background: var(--testo); color: var(--fondo); }
.icona-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; background: transparent; border-radius: 999px; color: var(--tenue);
}
.icona-btn:hover { background: var(--fondo-alt); color: var(--testo); }

/* --- barra di ricerca, sempre visibile ---
   Nella pagina di stile i campi sono riquadri staccati con 8 px di respiro,
   non piu' una fila saldata: il bordo unico e gli angoli tagliati di prima
   qui non servono. */
.ricerca {
  flex: none; display: grid; grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 8px; padding: 14px 20px; background: transparent;
  border-bottom: 1px solid var(--linea);
}
/* `min-width: 0` non e' cosmetico: senza, una colonna `1fr` non scende sotto
   la larghezza minima del suo contenuto, e « 20 set → 22 set · 2 notti » (che
   e' `nowrap`) spinge la griglia oltre il pannello. Sul telefono si vedeva la
   barra della ricerca uscire dallo schermo. */
.campo {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 8px 14px; border: 1px solid var(--linea);
  border-radius: var(--raggio-piccolo); background: rgba(255, 255, 255, .85);
  text-align: left; min-height: 56px; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.campo:hover { border-color: var(--linea-forte); position: relative; z-index: 1; }
.campo:focus-within { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-chiaro); }
.campo .et { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.campo .vl {
  font-size: 14.5px; font-weight: 500; color: var(--testo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.campo-cerca {
  border: 0; border-radius: var(--raggio-piccolo); min-height: 56px; padding: 0 22px;
  background: var(--accento); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 8px 20px -8px rgba(47, 93, 67, .6);
  transition: transform .12s, box-shadow .15s, background .15s;
}
.campo-cerca:hover { background: var(--accento-scuro); transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(47, 93, 67, .7); }
.campo-cerca:active { transform: translateY(0); }

/* --- corpo scorrevole --- */
.corpo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px calc(var(--barra-h) + 28px);
}
.corpo[data-senza-barra="1"] { padding-bottom: 28px; }

/* ==========================================================================
   Schede camera
   ========================================================================== */
.riga-esito {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; color: var(--tenue); font-size: 14px;
}
.riga-esito b { color: var(--testo); font-weight: 600; }

/* Scheda quasi bianca su fondo caldo: al passaggio si alza di 2 px e l'ombra
   cresce. Il sollevamento non tocca le camere non disponibili: non si aprono,
   e una cosa che si alza sotto il dito promette un clic che non c'e'. */
.scheda {
  background: var(--carta-scheda); border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--raggio-scheda); box-shadow: var(--ombra-scheda);
  overflow: hidden; margin-bottom: 16px;
  transition: transform .2s, box-shadow .2s;
}
.scheda:hover:not(.scheda-no) { transform: translateY(-2px); box-shadow: var(--ombra-scheda-hover); }
/* La foto si ferma a 280 px, la misura della pagina di stile. Con il solo
   16/10, nel pannello da 680 px arriverebbe a quasi 400 px e spingerebbe il
   nome della camera e il prezzo sotto il bordo dello schermo: aprendo la lista
   si vedrebbe una fotografia e basta. Il limite morde solo oltre i 480 px di
   larghezza, quindi su telefono la proporzione resta 16/10 e la scheda non si
   appiattisce. L'immagine e' in object-fit: cover: viene ritagliata, mai
   deformata. */
/* La foto riempie SEMPRE tutta la larghezza della scheda. L'immagine dentro e'
   object-fit: cover: si ritaglia, non si deforma, e non lascia bordi.
   ATTENZIONE: `aspect-ratio` insieme a `max-height` non funziona qui — quando
   l'altezza tocca il tetto il riquadro stringe la LARGHEZZA per tenere il
   rapporto, e resta una fascia vuota a destra. Quindi: sui telefoni si tiene il
   rapporto (la larghezza comanda), da 701 px in su si fissa l'altezza e il
   rapporto si lascia cadere. */
.scheda-foto {
  position: relative; width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--fondo-alt);
  overflow: hidden;
}
.scheda-foto img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
/* Lo zoom lento: 1,04 in 1,2 s. Sulle camere non disponibili non si muove
   niente, come il sollevamento della scheda. */
.scheda:hover:not(.scheda-no) .scheda-foto img { transform: scale(1.04); }

/* La velatura: sfumatura scura sul 55 % piu' basso della foto. Serve a far
   leggere il nome della camera e il « da € X », che stanno SOPRA la foto in
   bianco. Senza foto non c'e' niente da velare. */
.scheda-foto:not(.senza-foto)::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, rgba(20, 22, 18, 0) 0%, rgba(20, 22, 18, .55) 100%);
}

/* Nome e prezzo sopra la foto, in Cormorant bianco. L'ombra del testo copre
   il caso della foto chiara proprio sotto la scritta. */
.titolo-foto {
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  color: #fff;
}
.titolo-foto h3 {
  font-family: var(--titolo); font-weight: 500; font-size: 30px; line-height: 1;
  margin: 0; letter-spacing: .01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.titolo-foto .da { text-align: right; line-height: 1.1; white-space: nowrap; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.titolo-foto .da .et {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85;
}
.titolo-foto .da .n { font-family: var(--titolo); font-weight: 600; font-size: 28px; line-height: 1; }
/* « a notte », « a notte in media », sotto il numero (#178 punto 9). */
.titolo-foto .da .et-notte { display: block; margin-top: 4px; }
.titolo-foto .da .prezzo-pieno { color: rgba(255, 255, 255, .7); font-size: 17px; }

/* Nessuna foto: una fascia sottile invece di un riquadro vuoto alto 280 px,
   che sopra il nome della camera si legge come un guasto. Non si toglie del
   tutto perche' la scheda perderebbe il suo attacco visivo. */
.scheda-foto.senza-foto { height: 6px; aspect-ratio: auto; background: var(--linea-forte); }

/* --- le etichette: pillole bianche semitrasparenti, in alto a sinistra --- */
.etichette { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
/* Senza foto le stesse pillole non hanno piu' un sopra: stanno in riga sotto
   il nome, dove si leggono ancora. */
.etichette-senza-foto { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.etichetta {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .9); color: var(--testo);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.etichetta.promo { background: var(--accento); color: #fff; }
/* « Tariffa piu' bassa » e le altre etichette di valore: oro, mai rosso. */
.etichetta.oro { background: rgba(255, 255, 255, .9); color: var(--oro); }
/* Sopra la foto la pillola bianca si stacca da sola. Su una scheda bianca no:
   senza foto « Ultima camera » diventerebbe tre parole in maiuscoletto senza
   piu' la forma della pillola. Il fondo caldo e il contorno gliela ridanno,
   e l'ombra interna al posto del bordo tiene la pillola della stessa misura
   di quella sopra la foto. La promo non serve: e' gia' verde piena. */
.etichette-senza-foto .etichetta:not(.promo) {
  background: var(--fondo-alt); box-shadow: inset 0 0 0 1px var(--linea);
}

/* Qualche pixel in meno attorno al testo, non uno stile denso: serve solo a
   tenere il prezzo dentro la prima schermata insieme alla foto. */
.scheda-testo { padding: 16px 20px 18px; }
.scheda-testo h3 {
  font-family: var(--titolo); font-weight: 500; font-size: 26px; line-height: 1.15;
  margin: 0 0 4px; letter-spacing: .01em;
}
.dettagli { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--tenue); font-size: 13.5px; margin-bottom: 12px; }
.dettagli span { display: inline-flex; align-items: center; gap: 6px; }

.scheda-piede {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 14px; border-top: 1px solid var(--linea);
}
/* Con la foto il prezzo sta gia' sopra la foto, e qui sotto resta la sola
   riga del soggiorno: « Totale 2 notti, 2 adulti: 424 € ». */
.riga-totale { font-size: 13.5px; color: var(--tenue); line-height: 1.35; }
.riga-totale b { color: var(--testo); font-weight: 600; }

/* Senza foto il prezzo torna qui sotto, com'era nella tappa 2. Il "da" e la
   riga del soggiorno sono etichette, non testo corrente: con l'interlinea del
   corpo occupavano tre righe larghe. */
.prezzo-da .da {
  display: block; font-size: 12px; line-height: 1.25;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
}
.prezzo-da .n { font-family: var(--titolo); font-weight: 600; font-size: 30px; line-height: 1.1; display: block; }
.prezzo-da .tot { display: block; font-size: 13px; line-height: 1.3; color: var(--tenue); }

/* --- bottoni ---
   `.btn` da solo e' il secondario della pagina di stile (contorno sottile, si
   riempie di bianco al passaggio); `.btn-principale` e' il primario (pieno,
   ombra colorata, sale di 1 px). I nomi restano questi perche' li usano anche
   l'extranet e l'area cliente. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border: 1px solid var(--linea-forte); border-radius: var(--raggio-piccolo);
  background: transparent; color: var(--testo);
  font-size: 14px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover { background: #fff; border-color: var(--testo); }
.btn-principale {
  border-color: var(--accento); background: var(--accento); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(47, 93, 67, .6);
}
.btn-principale:hover {
  background: var(--accento-scuro); border-color: var(--accento-scuro); color: #fff;
  transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(47, 93, 67, .7);
}
.btn-principale:active { transform: translateY(0); }
.btn-piatto { border-color: transparent; padding: 0 4px; color: var(--tenue); box-shadow: none; }
.btn-piatto:hover { background: transparent; color: var(--testo); text-decoration: underline; border-color: transparent; }
.btn[disabled] { opacity: .45; pointer-events: none; }
/* Un bottone dentro una riga di avviso: sta sulla stessa riga del testo, e non
   pretende di essere l'azione principale della schermata. */
.btn-nell-avviso { padding: 2px 10px; font-size: 13px; margin-left: 4px; vertical-align: baseline; }

/* --- camere non disponibili: in fondo, attenuate, con la ragione --- */
.titolo-sezione {
  margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--linea);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue);
}
.scheda-no { opacity: .72; }
.scheda-no .scheda-foto img { filter: grayscale(1); opacity: .6; }
.ragione {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: var(--raggio); background: var(--fondo-alt);
  color: var(--testo); font-size: 14px;
}
.ragione b { font-weight: 500; }
.ragione .sugg { color: var(--tenue); }

/* ==========================================================================
   Scheda camera (dettaglio)
   ========================================================================== */
.torna {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 10px 12px 10px 4px; border: 0; background: transparent; color: var(--tenue); font-size: 14px;
}
.torna:hover { color: var(--testo); }

.galleria { position: relative; border-radius: var(--raggio-scheda); overflow: hidden; background: var(--fondo-alt); box-shadow: var(--ombra-scheda); }
.galleria .grande { aspect-ratio: 16 / 10; }
.galleria .grande img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galleria-strip { display: flex; gap: 6px; margin-top: 6px; }
.galleria-strip button {
  flex: 1; min-height: 0; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: var(--raggio);
  overflow: hidden; opacity: .55; background: none;
}
.galleria-strip button[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--accento); outline-offset: 1px; }
.galleria-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

.camera-titolo {
  font-family: var(--titolo); font-weight: 500; font-size: 34px; line-height: 1.12;
  margin: 20px 0 6px; letter-spacing: .01em;
}
.descrizione { color: var(--testo); margin: 0 0 18px; }
.dotazioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0 0 26px; padding: 0; list-style: none; }
.dotazioni li { display: flex; align-items: center; gap: 9px; color: var(--tenue); font-size: 14px; }

h4.sez {
  font-family: var(--titolo); font-weight: 500; font-size: 22px; line-height: 1;
  margin: 26px 0 12px; letter-spacing: .01em;
}

/* --- piani tariffari in righe ---
   Sono i riquadri `.tariffa` della pagina di stile: piu' leggeri della scheda
   che li contiene (bianco al 70 %), bordo sottile; quello scelto ha il bordo
   e l'alone nel colore d'accento. */
.piano {
  display: block; width: 100%; text-align: left;
  padding: 16px 18px; margin-bottom: 10px;
  border: 1px solid var(--linea); border-radius: var(--raggio-piccolo);
  background: rgba(255, 255, 255, .7);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.piano:hover { background: #fff; border-color: var(--linea-forte); }
.piano[aria-pressed="true"] { border-color: var(--accento); background: #fff; box-shadow: 0 0 0 3px var(--accento-chiaro); }
.piano-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.piano-nome { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag {
  padding: 3px 8px; border-radius: 999px; background: var(--fondo-alt); color: var(--tenue);
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
/* « Tariffa piu' bassa » e' un'etichetta di valore: oro, mai rosso e mai il
   verde dell'accento, che qui dentro e' gia' preso dalla tariffa scelta. */
.tag-basso { background: rgba(255, 255, 255, .9); color: var(--oro); }
.piano-prezzo { text-align: right; white-space: nowrap; }
.piano-prezzo .n { font-family: var(--titolo); font-weight: 600; font-size: 26px; line-height: 1.1; display: block; }
.piano-prezzo .u { font-size: 12px; color: var(--tenue); }

/* --- di cosa e' fatto il prezzo --- */
/* La riga che scompone il prezzo, sotto quello del piano:
     2 adulti 290 EUR + 1 bambino di 8 anni 30 EUR - a notte
   Ogni voce e' un figlio a parte (di norma uno <span>). Il "+" fra una voce e
   l'altra lo mette il CSS invece del testo, e sta attaccato alla voce che
   introduce: cosi' non resta mai appeso in fondo a una riga. Con tre o quattro
   voci si va a capo fra una voce e l'altra, mai dentro una voce.
   L'ultimo pezzo, quando e' l'unita' e non un addendo ("a notte"), si marca
   con .unita e prende il punto in mezzo al posto del piu'.
   Essendo un flex, la riga ignora il text-align e il white-space del genitore:
   sta bene sia sotto .piano-testa sia dentro .piano-prezzo. E se il testo
   arriva tutto in un pezzo solo, senza figli, resta comunque della misura e
   del colore giusti. */
.composizione {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;
  margin-top: 8px;
  color: var(--tenue); font-size: 13px; line-height: 1.4;
}
.composizione > * {
  display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
}
.composizione > * + *::before { content: "+"; }
.composizione > * + *.unita::before { content: "\00B7"; }

/* Cosa include la tariffa: UNA riga grigia, le voci separate dal punto in
   mezzo — « Colazione inclusa · Saldo all'arrivo ». Era un elenco con le
   spunte: la spunta dentro la tariffa significa « vantaggio », e usarla anche
   qui la svuotava. */
.piano-incluso { margin: 10px 0 0; color: var(--tenue); font-size: 13px; line-height: 1.45; }
.politica { margin-top: 10px; font-size: 13.5px; color: var(--tenue); }
/* Una tariffa non rimborsabile e' un'informazione, non un allarme: in rosso
   sembra un errore dell'ospite. Grigio quando c'e' un'alternativa (spostare le
   date, il voucher), antracite pieno quando non c'e': li' la notizia e' secca e
   merita il peso del testo normale, non un colore. */
.politica.rigida { color: var(--tenue); }
.politica.rigida.secca { color: var(--testo); }

/* Il soggiorno a cavallo di due periodi: « dal 1º agosto vale la cancellazione
   più stretta ».

   Non è un allarme e non è una nota in grigio: è una **condizione che cambia
   dentro il soggiorno**, e va letta. Antracite pieno, con la barretta a
   sinistra che si usa nel resto del motore per « questo riguarda te ». */
.avviso-periodo {
  margin-top: 10px; padding: 8px 0 8px 11px;
  border-left: 2px solid var(--accento);
  font-size: 13.5px; line-height: 1.45; color: var(--testo);
}

/* ==========================================================================
   La riga di vantaggio, sotto il prezzo della tariffa.
   Il testo lo compone il SERVER (`piano.vantaggio.testo_it`): qui si mostra e
   basta. Se il campo non c'e' la riga non c'e' — una frase inventata sotto un
   prezzo e' pubblicita', non informazione.
   `neutro: true` e' il caso « il termine gratuito e' passato »: va in grigio,
   perche' dirlo e' giusto ma colorarlo di verde sarebbe una presa in giro.
   ========================================================================== */
.vantaggio {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; font-size: 13.5px; line-height: 1.35;
  color: var(--accento);
}
.vantaggio svg { margin-top: 1px; color: var(--accento); }
.vantaggio b { font-weight: 600; }
.vantaggio.neutro, .vantaggio.neutro svg { color: var(--tenue); }

/* --- extra --- */
.extra {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--carta);
}
/* Il segno dell'extra, disegnato da noi (Cowork #205 bis): grande come una
   riga di testo, dello stesso colore, e mai al posto del nome. */
.extra-icona { flex: none; display: flex; color: var(--accento); }
.extra-icona svg { width: 26px; height: 26px; }
.extra-testo { flex: 1; }
.extra-testo .n { font-size: 15px; font-weight: 500; }
.extra-testo .d { font-size: 14px; color: var(--tenue); }
.extra-prezzo { font-family: var(--titolo); font-size: 20px; white-space: nowrap; }
.interruttore {
  flex: none; width: 46px; height: 28px; min-height: 28px; padding: 3px; border: 0; border-radius: 999px;
  background: var(--linea-forte); position: relative; transition: background .18s;
}
.interruttore::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 999px; background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.interruttore[aria-pressed="true"] { background: var(--accento); }
.interruttore[aria-pressed="true"]::after { transform: translateX(18px); }

textarea.richieste {
  width: 100%; min-height: 88px; padding: 12px 14px; resize: vertical;
  border: 1px solid var(--linea-forte); border-radius: var(--raggio);
  background: var(--carta); font: inherit; color: inherit;
}
textarea.richieste:focus, input:focus, select:focus { outline: 2px solid var(--accento); outline-offset: 1px; border-color: transparent; }

/* ==========================================================================
   Barra del totale, fissa in basso
   ========================================================================== */
/* Traslucida come il pannello, ma con la sua sfocatura (18 px): il corpo che
   scorre sotto si intravede e si capisce che la lista continua. */
.barra-totale {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  background: rgba(250, 248, 244, .82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, .25);
}

/* La riga di fiducia: tre spunte grigie sopra il totale. Non e' decorazione,
   e' l'ultima obiezione prima del bottone. */
.fiducia {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px;
  font-size: 12px; color: var(--tenue);
}
.fiducia span { display: inline-flex; align-items: center; gap: 5px; }
.fiducia svg { width: 13px; height: 13px; color: var(--accento); }

.barra-riga { display: flex; align-items: center; gap: 14px; }
.barra-somma { margin-right: auto; }
.barra-somma .et { display: block; font-size: 12px; color: var(--tenue); line-height: 1.3; }
.barra-somma .n {
  font-family: var(--titolo); font-weight: 600; font-size: 30px; line-height: 1.15;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
/* « Vedi il dettaglio » tratteggiato, accanto alla cifra: e' un invito a
   guardare, non un secondo bottone che compete con « Prenota ». */
.barra-somma .n button {
  min-height: 0; padding: 2px 0; border: 0; background: none; color: var(--tenue);
  font-family: var(--corpo); font-size: 12px; line-height: 1.3;
  text-decoration: underline dotted; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 4px;
}
.barra-somma .n button:hover { color: var(--testo); }
.barra-totale .btn-principale { min-height: 48px; padding: 0 28px; font-size: 15px; }
.dettaglio { display: none; padding: 4px 0 14px; }
.dettaglio[data-aperto="1"] { display: block; }
.dettaglio dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; font-size: 14px; }
.dettaglio dt { color: var(--tenue); }
.dettaglio dd { margin: 0; text-align: right; }
.dettaglio .sep { grid-column: 1 / -1; height: 1px; background: var(--linea); margin: 4px 0; }
.dettaglio .forte { color: var(--testo); font-weight: 500; }

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; }
.gruppo { margin-bottom: 22px; }
.gruppo > label, .campo-et {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 6px;
}
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select {
  width: 100%; min-height: 48px; padding: 11px 13px;
  border: 1px solid var(--linea-forte); border-radius: var(--raggio);
  background: var(--carta); font: inherit; color: inherit;
}
select { appearance: none; background-image: none; }

/* Il campo data ha vizi suoi su Safari e su iOS: la regola qui sopra gli passa
   bordo, padding e font, ma da sola non basta.
   - con l'aspetto nativo acceso il campo ignora l'altezza, quindi il bersaglio
     scende sotto i 44 px: si spegne con -webkit-appearance;
   - spento l'aspetto nativo il testo resta incollato in alto invece di stare
     in mezzo, e il modo che funziona e' trattare il campo come un flex;
   - su iOS il campo si porta dietro una larghezza minima sua, che dentro una
     griglia lo fa debordare: min-width la annulla. */
input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center;
  min-width: 0;
}
/* l'iconcina del calendario segue il colore del testo tenue, non il blu di
   sistema, e si vede che ci si puo' cliccare */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

.riquadro {
  padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--raggio-g);
  background: var(--carta); margin-bottom: 16px;
}
.riquadro-testa {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 15px; font-weight: 500;
}
.riquadro-testa .marchio { margin-left: auto; color: var(--tenue); display: inline-flex; gap: 10px; align-items: center; }
.avviso {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--raggio);
  background: var(--fondo-alt); color: var(--testo); font-size: 14px; line-height: 1.45;
}
/* Un rifiuto del checkout, sopra il bottone (#171 punto 8): si legge prima di riprovare. */
.avviso-errore { background: #fdf7f3; border: 1px solid var(--allarme); margin: 12px 0; }
.finta-carta {
  display: grid; gap: 10px;
}
.finta-riga { display: grid; grid-template-columns: 1fr 90px 90px; gap: 10px; }
.pagamento-rapido { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.pagamento-rapido button {
  display: grid; place-items: center; padding: 12px; border: 1px solid var(--linea-forte);
  border-radius: var(--raggio); background: var(--carta); color: var(--testo);
}
.divisore {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  color: var(--tenue); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.divisore::before, .divisore::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

.consenso { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--tenue); margin-bottom: 18px; }
.consenso input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accento); }

.riepilogo {
  position: sticky; top: 4px;
  padding: 18px; border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--carta);
}
.riepilogo h4 { font-family: var(--titolo); font-weight: 500; font-size: 21px; margin: 0 0 4px; }
.riepilogo .sotto { font-size: 14px; color: var(--tenue); margin-bottom: 14px; }
.riepilogo dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 14px; }
.riepilogo dt { color: var(--tenue); }
.riepilogo dd { margin: 0; text-align: right; }
.riepilogo .sep { grid-column: 1 / -1; height: 1px; background: var(--linea); margin: 5px 0; }

/* ==========================================================================
   Conferma
   ========================================================================== */
.conferma { text-align: center; padding: 22px 0 8px; }
.bollo {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 999px;
  display: grid; place-items: center; background: var(--accento); color: #fff;
}
.conferma h2 { font-family: var(--titolo); font-weight: 500; font-size: 34px; margin: 0 0 6px; letter-spacing: .01em; }
.conferma .numero {
  display: inline-block; margin: 10px 0 20px; padding: 8px 16px;
  border: 1px dashed var(--linea-forte); border-radius: var(--raggio);
  font-size: 15px; letter-spacing: .06em;
}
.passi { text-align: left; margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.passi li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.passi .n {
  flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: var(--fondo-alt); color: var(--tenue); font-size: 13px;
}

/* ==========================================================================
   Scheletri — si carica cosi', mai con una schermata bianca
   ========================================================================== */
@keyframes respiro { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.scheletro { background: var(--fondo-alt); border-radius: var(--raggio); animation: respiro 1.4s ease-in-out infinite; }
.sk-scheda {
  background: var(--carta-scheda); border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--raggio-scheda); box-shadow: var(--ombra-scheda);
  overflow: hidden; margin-bottom: 16px;
}
/* stesse misure di .scheda-foto e .scheda-testo: quando arrivano le camere
   vere la lista non deve sobbalzare */
.sk-foto { width: 100%; aspect-ratio: 16 / 10; }
.sk-testo { padding: 16px 20px 18px; display: grid; gap: 10px; }


/* ==========================================================================
   Popover della ricerca: calendario a due mesi e ospiti
   ========================================================================== */
#zona-ricerca { position: relative; z-index: 20; flex: none; }
.popover {
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: 68vh; overflow-y: auto;
  padding: 16px 18px 18px;
  background: var(--carta); border-bottom: 1px solid var(--linea);
  box-shadow: 0 14px 30px rgba(35, 38, 42, .14);
}
.pop-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 15px; }
.pop-nav { display: flex; gap: 2px; }

.calendari { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mese-nome { text-align: center; font-family: var(--titolo); font-size: 19px; margin-bottom: 6px; text-transform: capitalize; }
.dow, .griglia { display: grid; grid-template-columns: repeat(7, 1fr); }
.dow { margin-bottom: 4px; }
.dow span { text-align: center; font-size: 11px; color: var(--tenue); }
.griglia { gap: 2px; }
/* **I tre stati dei giorni** (#173), che si distinguono senza leggere niente:
   il prenotabile bianco e nero, il passato chiarissimo e senza barra, il non
   prenotabile scuro e barrato — il piu' evidente dei tre. */
.g {
  min-height: 0; aspect-ratio: 1; display: grid; place-items: center; position: relative;
  border: 0; background: var(--carta); border-radius: var(--raggio);
  font-size: 14px; color: var(--testo);
}
.g:hover:not(:disabled) { background: var(--fondo-alt); }
.g.no { color: rgba(29, 31, 28, .22); background: transparent; pointer-events: none; }
.g.pieno { background: var(--testo); color: #fff; text-decoration: line-through; pointer-events: none; }
/* Le partenze che il minimo o una notte piena spengono (#170): restano spente. */
.g.spenta { color: var(--tenue-chiaro); background: transparent; pointer-events: none; }
/* **La fascia scelta** (#173): arrivo e partenza verde scuro, i giorni in mezzo
   verde chiaro. Anche sotto il dito: prima il passaggio del mouse vinceva sul
   verde, e l'arrivo appena toccato restava beige. */
.g.inizio, .g.fine, .g.inizio:hover, .g.fine:hover { background: var(--accento); color: #fff; }
.g.dentro, .g.dentro:hover { background: rgba(47, 93, 67, .22); color: var(--testo); border-radius: 0; }
/* Dentro la fascia, le partenze che il minimo spegne restano verdi, col numero tenue: non si toccano. */
.g.dentro.spenta { color: var(--tenue); }
/* Il puntino del soggiorno minimo, sotto il numero. */
.g-minimo { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accento); }
/* **La scritta del giorno compare subito** (#181): « minimo 3 notti » al passaggio del
   mouse, al fuoco della tastiera e sotto il dito, e sparisce quando si esce. Il `title`
   del browser arrivava dopo un secondo, e sul telefono mai. Nessun ritardo apposta. */
.g[data-detto]:hover::after, .g[data-detto]:focus-visible::after, .g[data-detto]:active::after {
  content: attr(data-detto); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: var(--testo); color: #fff;
  font-size: 12px; line-height: 1.3; text-decoration: none; pointer-events: none; z-index: 3;
}
/* Ai bordi della settimana la scritta non esce dal riquadro. */
.g[data-colonna="0"][data-detto]::after { left: 0; transform: none; }
.g[data-colonna="6"][data-detto]::after { left: auto; right: 0; transform: none; }
.g.inizio .g-minimo, .g.fine .g-minimo { background: #fff; }

.cal-minimo { margin: 12px 0 0; font-size: 13.5px; color: var(--testo); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12px; color: var(--tenue); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.q { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.q-pieno { background: var(--testo); }
.q-minimo { width: 6px; height: 6px; border-radius: 50%; background: var(--accento); margin: 0 3px; }
.q-scelto { background: var(--accento); }

.pop-piede { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }
.pop-riga { display: flex; gap: 10px; }
.pop-riga input { flex: 1; }

.contatore {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.contatore .n { font-size: 15px; }
.contatore .d { font-size: 13px; color: var(--tenue); }
.pm { display: flex; align-items: center; gap: 4px; }
.pm .v { min-width: 30px; text-align: center; font-size: 16px; }
.pm .icona-btn { border: 1px solid var(--linea-forte); }
.pm .icona-btn[disabled] { opacity: .35; pointer-events: none; }
.eta { padding: 12px 0 0; display: grid; gap: 10px; }
.riga-eta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.riga-eta select { max-width: 180px; }

/* Da 701 px in su il pannello e' largo 680: si fissa l'altezza della foto e si
   lascia cadere il rapporto, cosi' la foto resta larga quanto la scheda. Sotto
   i 701 vale il rapporto 16/10 qui sopra. I 280 px sono quelli della pagina di
   stile. */
@media (min-width: 701px) {
  .scheda-foto:not(.senza-foto), .sk-foto { aspect-ratio: auto; height: 280px; }
}

/* ==========================================================================
   Mobile — pannello a pieno schermo, colonne che diventano righe
   ========================================================================== */
@media (max-width: 700px) {
  .pannello { width: 100vw; }
  .pannello-testa { padding: 14px 16px; gap: 8px; }
  .pannello-testa .nome { font-size: 21px; }
  /* Riquadri staccati come nella pagina di stile, non piu' una fila saldata.
     La riga che sta larga pero' e' la PRIMA, non la terza: da noi le date si
     scrivono per esteso e senza andare a capo (« 20 set → 22 set · 2 notti »),
     e in mezza larghezza finirebbero nei puntini — proprio il valore che
     l'ospite e' venuto a controllare. Ospiti e codice sono corti e stanno in
     due. */
  .ricerca { grid-template-columns: 1fr 1fr; padding: 12px 16px; }
  .campo { min-height: 52px; }
  .campo:nth-child(1) { grid-column: 1 / -1; }
  .campo-cerca { grid-column: 1 / -1; min-height: 46px; }
  /* Sul telefono nessun bersaglio scende sotto i 46 px. */
  .btn { min-height: 46px; }
  .corpo { padding: 16px 16px calc(var(--barra-h) + 24px); }
  .scheda-testo { padding: 14px 16px 16px; }
  .titolo-foto { left: 16px; right: 16px; bottom: 14px; }
  .titolo-foto h3 { font-size: 26px; }
  .titolo-foto .da .n { font-size: 24px; }
  .checkout { grid-template-columns: 1fr; gap: 20px; }
  .riepilogo { position: static; order: -1; }
  .dotazioni { grid-template-columns: 1fr; }
  .barra-totale { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .mock-nota { display: none; }
  .camera-titolo { font-size: 28px; }
  .calendari { grid-template-columns: 1fr; gap: 18px; }
  .popover { max-height: 74vh; }
}

/* Sotto i 640 px la riga di fiducia non c'e': lo dice la pagina di stile, e
   il motivo si vede a video — tre voci su due righe rubano al totale e al
   bottone lo spazio che sul telefono conta di piu'. Il fondo del corpo torna
   alla misura senza fiducia. */
@media (max-width: 640px) {
  :root { --barra-h: 84px; }
  .fiducia { display: none; }
}

/* ==========================================================================
   Extra (add-on) — quantita' e dettaglio richiesto
   Le regole di calcolo sono quattro: a prenotazione, a persona, a notte,
   a persona per notte. Quella scelta si legge sempre sotto il prezzo.
   ========================================================================== */
.extra { flex-wrap: wrap; }
.extra-testo .regola { font-size: 13px; color: var(--tenue); margin-top: 2px; }
.extra-prezzo { text-align: right; }
.extra-prezzo .u { display: block; font-family: var(--corpo); font-size: 12px; color: var(--tenue); }
.extra-dettaglio {
  flex-basis: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea);
  display: grid; gap: 10px;
}
.extra-dettaglio .due { grid-template-columns: 1fr 1fr; }
.esaurito { font-size: 13px; color: var(--tenue); }

/* ==========================================================================
   Codici: sconto, upgrade VIP, voucher
   ========================================================================== */
.codici-messo {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--carta);
  font-size: 14px;
}
.codici-messo .cod {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
}
.codici-messo .che { color: var(--tenue); font-size: 13px; }
.codici-messo.buono { border-color: var(--accento); }
.codici-messo.buono svg { color: var(--accento); }
.codici-messo.rotto { border-color: var(--allarme); background: #fdf7f3; }
.codici-messo.rotto svg { color: var(--allarme); }
.codici-messo .via {
  margin-left: auto; min-height: 0; padding: 2px 4px; border: 0; background: none;
  color: var(--tenue); font-size: 13px; text-decoration: underline;
}

/* Il prezzo pieno barrato, accanto a quello scontato: grigio chiaro, un passo
   piu' piccolo della cifra che accompagna. Le etichette stanno piu' su, con
   `.etichette` e `.etichetta`. */
.prezzo-pieno { color: var(--tenue-chiaro); text-decoration: line-through; font-weight: 400; font-size: 15px; margin-right: 6px; }

/* la nota della tariffa derivata e la riga rassicurante della non rimborsabile */
.derivata { margin-top: 8px; font-size: 13px; color: var(--tenue); }
.rassicura {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  padding: 9px 11px; border-radius: var(--raggio); background: var(--fondo-alt);
  font-size: 13px; color: var(--testo);
}

/* ==========================================================================
   Classi di servizio, condivise dalle pagine
   ========================================================================== */
/* La seconda riga grigia sotto il testo principale di una cella di tabella o
   di una voce di elenco: sopra il nome, sotto il dettaglio. Prende il posto
   dello stile ripetuto a mano (colore tenue e 13 px) in una decina di punti
   dell'extranet e dell'area cliente. Funziona anche su uno <span>, perche' si
   mette in blocco da sola. L'interlinea stretta ripaga i 2 px di stacco: al
   cambio le righe restano alte quanto prima e le tabelle non si allungano. */
.sotto-riga {
  display: block; margin-top: 2px;
  color: var(--tenue); font-size: 13px; line-height: 1.35;
}

/* ==========================================================================
   Extranet — l'altra faccia: quello che vede l'hotel
   Stessa tavolozza del motore, densita' maggiore: qui si lavora, non si sogna.
   ========================================================================== */
.ex { min-height: 100vh; display: grid; grid-template-columns: 232px 1fr; background: var(--fondo); }
.ex-lato { border-right: 1px solid var(--linea); padding: 22px 0; background: var(--fondo-alt); }
.ex-marchio { padding: 0 22px 20px; font-family: var(--titolo); font-size: 21px; line-height: 1.2; }
.ex-marchio span { display: block; font-family: var(--corpo); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.ex-voci { display: grid; }
.ex-voci button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 22px; border: 0; background: transparent; color: var(--tenue); font-size: 15px;
}
.ex-voci button[aria-pressed="true"] { background: var(--carta); color: var(--testo); box-shadow: inset 3px 0 0 var(--accento); }
.ex-corpo { padding: 26px 30px 60px; max-width: 1080px; }
.ex-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 6px; }
.ex-testa h1 { font-family: var(--titolo); font-weight: 500; font-size: 32px; margin: 0; letter-spacing: .01em; }
.ex-sotto { color: var(--tenue); font-size: 14px; margin: 0 0 22px; max-width: 62ch; }

.ex-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 26px; }
.ex-numero { padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--carta); }
.ex-numero .n { font-family: var(--titolo); font-size: 28px; line-height: 1.15; }
.ex-numero .e { font-size: 13px; color: var(--tenue); }

.tabella { width: 100%; border-collapse: collapse; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-g); overflow: hidden; }
.tabella th, .tabella td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--linea); font-size: 14px; vertical-align: top; }
.tabella th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); font-weight: 400; background: var(--fondo-alt); }
.tabella tr:last-child td { border-bottom: 0; }
.tabella .nome { font-weight: 500; }
.tabella .cifra { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.avvolgi { overflow-x: auto; }

.stato { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.stato::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--linea-forte); }
.stato.attiva::before { background: var(--accento); }
.stato.spenta { color: var(--tenue); }
.tag-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ==========================================================================
   Area cliente — la pagina che l'ospite apre dall'email
   ========================================================================== */
.ac { min-height: 100vh; background: var(--fondo); padding: 0 20px 70px; }
.ac-testa { max-width: 760px; margin: 0 auto; padding: 26px 0 20px; border-bottom: 1px solid var(--linea); }
.ac-testa .occhiello { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.ac-testa h1 { font-family: var(--titolo); font-weight: 500; font-size: 34px; margin: 6px 0 0; letter-spacing: .01em; }
.ac-corpo { max-width: 760px; margin: 0 auto; padding-top: 24px; }
.ac-riquadro { padding: 20px; border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--carta); margin-bottom: 16px; }
.ac-riquadro h3 { font-family: var(--titolo); font-weight: 500; font-size: 22px; margin: 0 0 12px; }
.ac-righe { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 9px 16px; font-size: 15px; }
.ac-righe dt { color: var(--tenue); }
.ac-righe dd { margin: 0; text-align: right; }
.ac-righe .sep { grid-column: 1 / -1; height: 1px; background: var(--linea); margin: 4px 0; }
.ac-azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.scelta {
  display: block; width: 100%; text-align: left; padding: 16px 18px; margin-bottom: 10px;
  border: 1px solid var(--linea-forte); border-radius: var(--raggio-g); background: var(--carta);
}
.scelta[aria-pressed="true"] { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }
.scelta .n { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 9px; }
.scelta .d { font-size: 14px; color: var(--tenue); margin-top: 5px; }
.differenza { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 14px 0 0; }
.differenza .n { font-family: var(--titolo); font-size: 28px; }

@media (max-width: 860px) {
  .ex { grid-template-columns: 1fr; }
  .ex-lato { border-right: 0; border-bottom: 1px solid var(--linea); padding: 16px 0; }
  /* Il tappo. Senza, la colonna del grid non si lascia stringere sotto il suo
     contenuto: le voci in riga la spingono a 1385px e **tutta la pagina scorre
     di lato**, con il testo che esce dallo schermo del telefono. Il menu deve
     scorrere da solo, dentro il suo `overflow-x`, non trascinarsi dietro la
     pagina. */
  .ex, .ex-lato, .ex-voci, .ex-corpo { min-width: 0; }
  .ex-voci { grid-auto-flow: column; overflow-x: auto; }
  .ex-voci button { white-space: nowrap; }
  .ex-corpo { padding: 20px 16px 50px; }
}

/* ==========================================================================
   Intestazione del pannello: lingua e valuta

   Un comando per ognuna, con scritto sopra solo il valore corrente; le altre
   scelte stanno nel menu. I contenitori sono `#lingua` e `#valuta`, che
   vivono nel markup delle pagine: la classe gliela mette il JavaScript
   insieme al contenuto, come si fa gia' per il resto dell'intestazione.

   Lo z-index deve stare sopra `#zona-ricerca` (20), altrimenti il menu finisce
   dietro alla barra delle date, che nel documento viene dopo.
   ========================================================================== */
.testa-scelta { position: relative; z-index: 30; }
.testa-aperta { z-index: 40; }

.testa-cmd {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 9px 0 12px;
  border: 1px solid var(--linea-forte); border-radius: 999px;
  background: transparent; color: var(--testo); font-size: 13px; white-space: nowrap;
}
.testa-cmd:hover { border-color: var(--testo); }
.testa-cmd[aria-expanded="true"] { border-color: var(--testo); background: var(--fondo-alt); }
.testa-cmd svg { color: var(--tenue); }
.testa-cmd .giu { display: inline-flex; transition: transform .2s ease; }
.testa-cmd[aria-expanded="true"] .giu { transform: rotate(180deg); }

/* Due etichette, una sola visibile: per esteso dove c'e' spazio, in breve sul
   telefono — « IT », « € » — dove accanto ci sono gia' il nome della struttura
   e la croce per chiudere. */
.testa-cmd .corto { display: none; }

/* L'attesa della valuta: finche' la risposta non dice in che moneta vende la
   struttura non si scrive niente, ma il posto si tiene. */
.testa-attesa { display: inline-block; width: 62px; height: 44px; border-radius: 999px; }

/* Il velo non esiste fuori dal telefono: sul desktop a chiudere bastano Esc e
   il clic fuori. Sta prima del blocco mobile, altrimenti a parita' di peso lo
   spegnerebbe anche li'. */
.testa-velo { display: none; }

.testa-menu {
  position: absolute; top: calc(100% + 8px); right: 0; width: 250px;
  padding: 6px; background: var(--carta);
  border: 1px solid var(--linea); border-radius: var(--raggio-g); box-shadow: var(--ombra);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .2s ease, visibility 0s linear .2s;
}
.testa-menu[data-aperto="1"] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

.testa-menu-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px 8px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
}
/* Croce e maniglia servono al foglio del telefono: sul desktop si chiude con
   Esc o con un clic fuori, e una croce in piu' sarebbe un elemento in piu'. */
.testa-menu-testa .icona-btn { display: none; }
.testa-menu-maniglia { display: none; }

.testa-voce {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 8px 10px; text-align: left;
  border: 0; border-radius: var(--raggio); background: transparent;
  color: var(--testo); font-size: 15px;
}
.testa-voce .n { margin-right: auto; }
.testa-voce svg { color: var(--accento); }
.testa-voce[aria-pressed="true"] { font-weight: 500; }
.testa-voce:hover:not([disabled]) { background: var(--fondo-alt); }

/* Le scelte che non ci sono ancora restano leggibili: sono spente, non
   nascoste, e l'etichetta dice quando arrivano. Sbiadirle fino a non leggerle
   toglierebbe proprio la frase che spiega perche' non si possono premere. */
.testa-voce[disabled] { color: var(--tenue); }
.testa-presto {
  flex: none; padding: 3px 8px;
  border: 1px solid var(--linea); border-radius: 999px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue);
}

.testa-piede {
  margin: 6px 0 0; padding: 10px 10px 4px; border-top: 1px solid var(--linea);
  font-size: 13px; line-height: 1.45; color: var(--tenue);
}

/* La riga della dicitura del cambio. Oggi non la scrive nessuno, perche' non
   c'e' nessuna conversione: lo stile e' pronto per il giorno in cui ci sara'
   (vedi `rigaCambio()` in mockup-motore.js). */
.nota-cambio {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--tenue);
}
.nota-cambio svg { margin-top: 2px; }

/* --- telefono: il menu diventa un foglio che sale dal basso ---
   Una tendina appesa in cima allo schermo si apre dove il pollice non arriva.
   Il foglio parte dal bordo inferiore, dove la mano gia' sta. */
@media (max-width: 700px) {
  .testa-cmd { padding: 0 7px 0 10px; }
  .testa-cmd .lungo { display: none; }
  .testa-cmd .corto { display: inline; }
  /* Via anche il globo: sullo stretto l'intestazione ha gia' il nome della
     struttura e la croce, e i due comandi devono starci accanto. Il chevron
     resta, perche' e' lui a dire che si apre qualcosa (sta dentro `.giu`, e
     questa regola prende solo l'icona figlia diretta). */
  .testa-cmd > svg { display: none; }

  .testa-velo {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: rgba(20, 22, 19, .38);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .testa-velo[data-aperto="1"] { opacity: 1; pointer-events: auto; }

  .testa-menu {
    position: fixed; z-index: 2; top: auto; right: 0; bottom: 0; left: 0;
    width: auto; max-height: 74vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 10px calc(14px + env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--linea);
    border-radius: var(--raggio-g) var(--raggio-g) 0 0;
    box-shadow: 0 -14px 34px rgba(35, 38, 42, .2);
    transform: translateY(100%);
  }
  .testa-menu-maniglia {
    display: block; width: 38px; height: 4px; margin: 9px auto 2px;
    border-radius: 999px; background: var(--linea-forte);
  }
  .testa-menu-testa { padding: 4px 4px 8px; }
  .testa-menu-testa .icona-btn { display: grid; margin-right: -4px; }

  /* Bersagli piu' larghi del minimo: qui si preme con il pollice. */
  .testa-voce { min-height: 52px; padding: 10px; font-size: 16px; }
  .testa-piede { padding: 12px 10px 2px; }
}

/* A chi ha chiesto meno movimento il foglio non sale: compare e sparisce. */
@media (prefers-reduced-motion: reduce) {
  .testa-menu, .testa-velo, .testa-cmd .giu { transition: none; }
  .testa-menu { transform: none; }
}

/* ==========================================================================
   INIZIO BLOCCO AREA C — extranet, le schermate della configurazione
   (tappa 5, SEQ-107). Aggiunto in fondo: sopra questa riga non e' stata
   toccata una regola, perche' quelle le usa anche il pannello dell'ospite.
   Tutti i nomi cominciano per `.ex-`, tranne le tre regole marcate qui sotto
   che appoggiano su classi gia' esistenti (`.ex-voci`, `.interruttore`) senza
   cambiarle. Le pagine che non sono l'extranet non vedono niente di tutto
   questo: nessuna di queste classi compare fuori da `extranet.html`.
   ========================================================================== */

/* `.ex` e' un grid e `.ex-avvio` un flex: senza questa riga l'attributo
   `hidden` non nasconderebbe niente, perche' il display dell'autore vince
   su quello del browser. */
.ex[hidden], .ex-avvio[hidden], .ex-messaggio[hidden], .ex-corpo [hidden] { display: none; }

/* --- i campi che il foglio non copriva ancora: password, numeri, indirizzi,
       colore e le aree di testo dell'extranet. Sono scritti dentro `.ex` e
       `.ex-avvio` per non toccare il pannello dell'ospite. --- */
.ex input[type="password"], .ex input[type="number"], .ex input[type="url"],
.ex-avvio input[type="password"] {
  width: 100%; min-height: 48px; padding: 11px 13px;
  border: 1px solid var(--linea-forte); border-radius: var(--raggio);
  background: var(--carta); font: inherit; color: inherit;
}
/* Le frecciette del campo numerico rubano spazio a un dito e non servono:
   il numero si scrive. */
.ex input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ex input[type="number"]::-webkit-outer-spin-button,
.ex input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ex textarea.richieste { min-height: 60px; }
.ex input[disabled], .ex select[disabled], .ex textarea[disabled] {
  background: var(--fondo-alt); color: var(--tenue); cursor: not-allowed;
}

/* --- la porta: la password si chiede una volta sola --- */
.ex-avvio {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--fondo); padding: 24px;
}
.ex-avvio-riquadro {
  width: 100%; max-width: 380px; padding: 26px 24px 22px;
  border: 1px solid var(--linea); border-radius: var(--raggio-g);
  background: var(--carta); box-shadow: var(--ombra);
}
.ex-avvio-riquadro .ex-marchio { padding: 0 0 16px; }
.ex-avvio-testo { color: var(--tenue); font-size: 14px; margin: 0 0 18px; }
.ex-avvio-riquadro .btn { width: 100%; margin-top: 4px; }
.ex-avvio-piede { color: var(--tenue); font-size: 12.5px; line-height: 1.4; margin: 14px 0 0; }

/* --- la frase-spia in fondo alla pagina --- */
.ex-spia {
  text-align: center; color: var(--tenue); font-size: 12px;
  padding: 22px 0 30px; margin: 0; opacity: .7; background: var(--fondo);
}
.ex-attesa { color: var(--tenue); }

/* --- il menu di lato: scelta della struttura, voci spente, uscita --- */
.ex-scelta-struttura { padding: 0 16px 14px; }
.ex-scelta-struttura select { min-height: 44px; font-size: 14px; }
/* « Vedi la tua struttura online » (Cowork #188): sotto la scelta della struttura, sempre. */
.ex-vedi-online { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 2px; }
.ex-vedi-online:empty { display: none; }
.ex-vedi { align-self: flex-start; font-size: 14px; font-weight: 500; color: var(--accento); text-decoration: underline;
  text-underline-offset: 3px; background: none; border: 0; padding: 6px 0; min-height: 32px; cursor: pointer; font-family: inherit; }
.ex-voci button[disabled] { opacity: .45; cursor: default; }
.ex-presto {
  margin-left: auto; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); border: 1px solid var(--linea); border-radius: 999px; padding: 2px 7px;
  white-space: nowrap; flex: none;
}
.ex-presto-viva { color: var(--accento); border-color: var(--accento); opacity: .9; }
/* I sei passi (#148): il numero davanti, l'asterisco di quelli che servono per vendere, e sotto il nome
   a che punto è. Sotto e non accanto: accanto usciva dal menu. */
.ex-voce-n {
  display: inline-grid; place-items: center; flex: none; align-self: flex-start; width: 20px; height: 20px;
  border-radius: 999px; border: 1px solid var(--linea-forte); font-size: 11px; color: var(--tenue);
}
.ex-voce-testo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ex-voce-testo .ex-presto { margin-left: 0; white-space: normal; }
.ex-voce-nome i { font-style: normal; color: var(--tenue); margin-left: 2px; }
.ex-voce-fatta { display: inline-flex; align-items: center; gap: 4px; color: var(--accento); border-color: var(--accento); }
.ex-voce-fatta svg { width: 11px; height: 11px; }
.ex-lato-piede { padding: 14px 18px 0; }

/* --- il nastro dello stato: si vede sempre, in cima, senza ambiguita' --- */
.ex-nastro {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 14px 16px; margin-bottom: 22px;
  border: 1px solid var(--linea-forte); border-left: 3px solid var(--testo);
  border-radius: var(--raggio-g); background: var(--carta); font-size: 14.5px; line-height: 1.4;
}
.ex-nastro > div { flex: 1; min-width: 220px; }
.ex-nastro svg { color: var(--tenue); }
.ex-nastro .btn { min-height: 40px; padding: 0 16px; }
.ex-nastro.viva { border-left-color: var(--accento); }
.ex-nastro.viva svg { color: var(--accento); }

/* --- il messaggio dopo un'azione: quello che e' andato bene e quello che no --- */
.ex-messaggio {
  padding: 12px 15px; margin-bottom: 18px; border-radius: var(--raggio-g);
  background: var(--accento-chiaro); border: 1px solid var(--accento);
  font-size: 14.5px; line-height: 1.45;
}
.ex-messaggio.rotto { background: #fdf7f3; border-color: var(--allarme); color: var(--testo); }

/* --- a che punto è la configurazione: i passi che servono per vendere, e cosa l'ospite noterà (#148) --- */
.ex-avanzamento { margin: 10px 0 24px; }
.ex-quanti { font-size: 12.5px; color: var(--tenue); margin-top: 7px; }
.ex-passo-n { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); white-space: nowrap; }
.ex-gruppo { margin-bottom: 34px; }
/* --- la riga della camera nel passo 1: la testa come prima, sotto il prezzo e le persone (#148 mossa 3) --- */
.ex-camera-testa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ex-camera-prezzo { border-top: 1px solid var(--linea); padding-top: 12px; }
.ex-camera-prezzo [data-std-detto] { margin: 2px 0 12px; }
.ex-sola-lettura {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  border: 1px dashed var(--linea-forte); border-radius: var(--raggio); color: var(--testo); font-variant-numeric: tabular-nums;
}
.ex-frase-prezzo { margin: 10px 0 0; font-family: var(--titolo); font-size: 17px; line-height: 1.35; }
.ex-da-fare {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--allarme); border: 1px solid var(--allarme); border-radius: 999px; padding: 2px 8px;
  vertical-align: middle; font-family: var(--corpo); font-weight: 400;
}

/* --- i campi --- */
.ex-campo { display: block; margin: 0 0 14px; }
.ex-et {
  display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 6px;
}
.ex-nota { display: block; color: var(--tenue); font-size: 12.5px; line-height: 1.4; margin-top: 5px; }
/* La scelta dell'icona di un extra: la tendina, e accanto il segno scelto
   grande come lo vedrà l'ospite (Cowork #205 bis). */
.ex-icona-scelta { display: flex; align-items: center; gap: 14px; }
.ex-icona-scelta .ex-campo { flex: 1; }
.ex-icona-vista {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; margin-top: 6px;
  border: 1px solid var(--linea); background: var(--carta); color: var(--accento);
}
.ex-icona-vista svg { width: 26px; height: 26px; }
/* La spia dell'icona (Cowork #216): vuota finché non c'è una proposta da spiegare. */
.ex-nota[data-spia-icona]:empty { display: none; }

/* Il catalogo degli extra pronti (Cowork #205 bis): tessere col segno, il nome
   e la spunta. Accesa, la tessera prende il colore della struttura. */
.ex-extra-pronti { margin-bottom: 18px; }
.ex-extra-tessere { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ex-extra-tessera {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--carta);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ex-extra-tessera:hover { border-color: var(--linea-forte); }
.ex-extra-tessera[aria-pressed="true"] { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }
.ex-extra-segno { flex: none; display: flex; color: var(--accento); }
.ex-extra-segno svg { width: 24px; height: 24px; }
.ex-extra-nome { flex: 1; font-size: 14px; line-height: 1.25; }
.ex-extra-spunta { flex: none; display: flex; width: 18px; height: 18px; color: var(--accento); }
.ex-extra-spunta svg { width: 18px; height: 18px; }

.ex-due, .ex-tre, .ex-quattro { display: grid; gap: 0 16px; }
.ex-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Il campo di livello 1 che arriva dal revenue: si legge, non si tocca, e
   sotto c'e' scritto da dove viene. */
.ex-sola-lettura {
  min-height: 48px; display: flex; align-items: center; padding: 11px 13px;
  border: 1px dashed var(--linea-forte); border-radius: var(--raggio);
  background: var(--fondo-alt); color: var(--testo);
}
.ex-vuoto { color: var(--tenue); }

/* --- una riga con l'interruttore a destra --- */
.ex-riga {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border: 1px solid var(--linea); border-radius: var(--raggio-g);
  background: var(--carta);
}
.ex-riga + .ex-riga { margin-top: -1px; }
.ex-riga-testo { flex: 1; min-width: 0; }
.ex-riga-testo .n { font-size: 15px; font-weight: 500; }
.ex-riga-spenta { opacity: .55; }
.ex-ordine { flex: none; text-align: center; }
.ex-ordine span {
  display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 3px;
}
.ex-ordine input { width: 62px; text-align: center; }
.ex-riga-campo { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.ex-riga-campo input { flex: 1; }
.ex-riga-fondo { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ex-riga-fondo .ex-nota { margin: 0; }
.ex-riga-fondo .btn-piatto { margin-left: auto; }

/* --- un blocco per camera, per fascia, per extra --- */
.ex-blocco {
  padding: 16px 18px 10px; margin-bottom: 14px;
  border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--carta);
}
.ex-blocco-testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linea);
}
.ex-blocco-testa b { font-size: 16px; font-weight: 500; }
.ex-blocco-testa span { color: var(--tenue); font-size: 13px; }
.ex-blocco .ex-riga { border: 0; padding: 6px 0; background: transparent; }

/* --- le tre strade del pagamento: due dichiarate ma spente --- */
.ex-scelte { display: grid; gap: 12px; margin-bottom: 18px; }
.ex-scelta {
  display: block; width: 100%; text-align: left; padding: 16px 18px;
  border: 1px solid var(--linea-forte); border-radius: var(--raggio-g);
  background: var(--carta); color: inherit;
}
button.ex-scelta[aria-pressed="true"] { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-chiaro); }
.ex-scelta .n { font-size: 16px; font-weight: 500; }
.ex-scelta .d { font-size: 14px; color: var(--tenue); margin-top: 4px; }
.ex-scelta-spenta { background: var(--fondo-alt); border-style: dashed; }
.ex-scelta-spenta .n, .ex-scelta-spenta .d { color: var(--tenue); }
.ex-spenta-riga {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 13.5px; color: var(--testo);
}
.ex-spenta-riga svg { width: 15px; height: 15px; color: var(--tenue); }

/* --- quando non c'e' ancora niente da mostrare --- */
.ex-vuota {
  display: grid; justify-items: start; gap: 12px; padding: 22px;
  border: 1px dashed var(--linea-forte); border-radius: var(--raggio-g);
  background: var(--fondo-alt); margin-bottom: 18px;
}
.ex-vuota p { margin: 0; color: var(--tenue); font-size: 14.5px; max-width: 62ch; }
.ex-vuota svg { color: var(--tenue); }

/* --- una proposta da guardare prima di accettarla --- */
.ex-proposta {
  padding: 16px 18px; margin: 4px 0 18px;
  border: 1px solid var(--accento); border-radius: var(--raggio-g);
  background: var(--carta); box-shadow: 0 0 0 3px var(--accento-chiaro);
}
.ex-proposta p { margin: 0 0 12px; font-size: 14.5px; max-width: 62ch; }
.ex-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ex-prova { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 48px; }
.ex-prova-nota { color: var(--tenue); font-size: 12.5px; }
.ex-colore { display: flex; gap: 10px; align-items: center; }
.ex-colore input[type="color"] {
  flex: none; width: 52px; height: 48px; padding: 3px; border: 1px solid var(--linea-forte);
  border-radius: var(--raggio); background: var(--carta); cursor: pointer;
}
.ex-stile-dal-sito { display: grid; gap: 10px; align-items: end; grid-template-columns: 1fr auto; margin-bottom: 6px; }
.ex-stile-dal-sito .ex-campo { margin: 0; }
.ex-mancanti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* --- avanti e indietro: sempre nello stesso posto --- */
.ex-nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linea);
}
.ex-nav .btn-principale { order: 2; margin-left: auto; }
.ex-fatto { order: 3; display: inline-flex; align-items: center; gap: 6px; color: var(--tenue); font-size: 13px; }
.ex-fatto svg { width: 14px; height: 14px; color: var(--accento); }

/* Mentre si aspetta il server non si preme due volte: la seconda pressione
   e' il modo piu' facile di salvare due cose diverse. */
.ex-attende .ex-corpo { opacity: .55; pointer-events: none; }
/* Ma quello che serve a **smettere di aspettare** resta premibile: un bottone
   « Ferma » spento mentre si aspetta è un bottone finto, ed è peggio che non
   averlo — lo si preme e non succede niente. */
.ex-attende .ex-azioni-vive { pointer-events: auto; opacity: 1; }
.ex-attende { cursor: progress; }

/* --- il telefono: l'albergatore configura spesso in piedi dietro il banco --- */
@media (max-width: 760px) {
  .ex-due, .ex-tre, .ex-quattro { grid-template-columns: 1fr; }
  .ex-stile-dal-sito { grid-template-columns: 1fr; }
  .ex-stile-dal-sito .btn { width: 100%; }
  .ex-riga { flex-wrap: wrap; }
  .ex-riga-testo { flex-basis: 100%; }
  .ex-blocco { padding: 14px 14px 8px; }
  .ex-nav {
    position: sticky; bottom: 0; z-index: 4;
    margin-left: -16px; margin-right: -16px; padding: 14px 16px;
    background: var(--fondo); border-top: 1px solid var(--linea-forte);
  }
  .ex-nav .btn { flex: 1; min-height: 48px; }
  .ex-nav .btn-principale { order: 0; margin-left: 0; }
  .ex-fatto { flex-basis: 100%; order: 4; }
  .ex-nastro .btn { width: 100%; }
}

/* FINE BLOCCO AREA C
   ========================================================================== */

/* --- le foto in extranet ------------------------------------------------- */
.ex-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ex-btn-spento { opacity: .5; cursor: not-allowed; }
.ex-manca { color: #9a3324; }
.ex-riga-foto { align-items: flex-start; }
.ex-provini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ex-provino {
  width: 62px; height: 46px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--linea); background: var(--fondo-alt);
}

/* Il provino e' un bottone: si tocca quello che deve stare per primo. Il
   contorno non c'e' finche' non ci passi sopra — la fila deve leggersi come
   foto, non come una barra di comandi. */
.ex-provino-box {
  position: relative; padding: 0; border: 0; background: none;
  line-height: 0; cursor: pointer; border-radius: 6px;
}
.ex-provino-box:hover .ex-provino,
.ex-provino-box:focus-visible .ex-provino { border-color: var(--accento); }
.ex-provino-box:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.ex-copertina { cursor: default; }
.ex-copertina .ex-provino { border-color: var(--accento); border-width: 2px; }
.ex-bollo {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 10px; line-height: 14px; letter-spacing: .02em;
  text-align: center; border-radius: 0 0 5px 5px;
}
.ex-nota-provini { color: var(--tenue); font-size: 13px; margin: 7px 0 0; }

/* Il segno che sta lavorando. Non e' un avviso e non e' un errore: e' una
   riga che dice cosa sta succedendo, con l'icona a sinistra. */
.ex-lavoro {
  display: flex; align-items: center; gap: 9px;
  color: var(--tenue); font-size: 14px; margin: 0;
}
.ex-lavoro svg { flex: 0 0 auto; }

/* --- « quando si vende »: i mesi ------------------------------------------
   Dodici caselle in griglia, non un elenco: si vede a colpo d'occhio quali
   mesi sono accesi, che è la domanda vera — « quando vendo questa tariffa? ». */
.ex-mesi {
  display: grid; gap: 6px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
}
.ex-mese {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 4px; border: 1px solid var(--linea); border-radius: 7px;
  font-size: 13px; cursor: pointer; background: var(--fondo-alt);
  text-transform: capitalize;
}
.ex-mese:hover { border-color: var(--accento); }
.ex-mese-acceso { background: #fff; border-color: var(--accento); font-weight: 500; }
.ex-mese input { margin: 0; }

/* Il calendario dei dodici mesi: verde vende, rosso no, e il numero dice
   quante camere. Si legge in tre secondi, che è il punto — un elenco di dodici
   righe di testo non lo guarda nessuno. */
/* « meno | 10 | % » su una riga sola: il verso, il numero e l'unità sono una
   frase, e spezzarli su tre righe la fa leggere come tre domande. */
.ex-variazione { display: flex; gap: 6px; align-items: center; }
/* Le tendine della riga larghe quanto il loro testo (Cowork #202): la regola di tutte le
   tendine le fa larghe il 100 %, e qui una accanto all'altra traboccavano. */
.ex-variazione select { flex: 0 0 auto; width: auto; min-width: 84px; }
.ex-variazione input { flex: 1 1 80px; min-width: 80px; }

/* Un avvertimento non è un blocco: si vede, ma non con il peso di « non si
   vende ». Stessa forma, colore più quieto. */
/* Con tutte e due le classi (#169): `.ex-rimedio` sta più sotto in questo file
   e, da sola, vinceva — l'avvertimento usciva col bordo e il titolo rossi, cioè
   col peso di « non si vende » che qui sopra dice di non avere. */
.ex-rimedio.ex-rimedio-tenue { border-color: var(--linea); }
.ex-rimedio.ex-rimedio-tenue b { font-weight: 500; color: var(--testo); }

.ex-eccezioni { display: grid; gap: 8px; margin-top: 10px; }
.ex-eccezione {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px;
}
.ex-eccezione .ex-al { color: var(--tenue); font-size: 13px; }
@media (max-width: 560px) {
  /* Sul telefono le due date vanno a capo insieme, non spezzate. */
  .ex-eccezione input[type="date"] { flex: 1 1 42%; min-width: 130px; }
}

/* --- la proposta del modello --------------------------------------------
   Qui i provini sono grandi: si guarda una foto per decidere se e' la Girasole
   o la Basilico, e a 62 pixel non si distingue niente. La griglia si adatta
   da sola alla larghezza — sul telefono due per riga, sul portatile cinque —
   perche' questa schermata si apre anche dal telefono, in piedi, in mezzo
   all'albergo. */
.ex-elenco-foto { display: grid; gap: 8px; margin-top: 10px; }
/* Le camere sotto ogni foto: spunte piccole, in riga, perché sono tante e si
   scorrono con l'occhio invece che una alla volta. */
.ex-camere-foto { gap: 4px 8px; }
.ex-camere-foto .ex-camera { padding: 4px 8px; font-size: 13px; }
/* « Foto della struttura » non è una camera: si vede che è un'altra cosa. */
.ex-camera-posto { border-style: dashed; }
.ex-riga-proposta { display: flex; align-items: center; gap: 12px; }
.ex-riga-proposta .ex-provino-grande {
  width: 116px; height: 82px; flex: 0 0 auto;
}
/* La tendina prende lo spazio che le serve fino a un tetto: un nome lungo ci
   sta per intero, e su uno schermo largo non diventa un nastro da un metro. */
.ex-riga-proposta select { width: 100%; max-width: 340px; }
.ex-riga-proposta .sotto-riga { margin-top: 5px; line-height: 1.35; }

@media (max-width: 560px) {
  /* Sul telefono la foto va sopra, larga: a 116 pixel di lato non si
     distingue una camera dall'altra, ed è proprio quello che si deve fare. */
  .ex-riga-proposta { flex-direction: column; align-items: stretch; }
  .ex-riga-proposta .ex-provino-grande { width: 100%; height: 150px; }
  .ex-riga-proposta select { max-width: none; }
}

/* Il gruppo « da assegnare » e' quello da guardare per primo: si vede. */
.ex-blocco-attenzione { border-color: #9a3324; }

.ex-carica {
  display: block; margin-top: 10px; padding: 12px 14px; border-radius: 8px;
  border: 1px dashed var(--linea); color: var(--tenue); font-size: 14px;
  cursor: pointer; text-align: center; background: var(--fondo-alt);
}
.ex-carica:hover { border-color: var(--accento); color: var(--testo); }
/* Una camera senza foto si vede da lontano: e' l'unica cosa che manca davvero. */
.ex-carica-vuota { border-color: #9a3324; color: #9a3324; }

/* --- la libreria delle foto (#154) ---------------------------------------
   Una casella sola dove si trascina tutto, il conto delle da assegnare, i
   filtri, la griglia, e la barra delle scelte che resta sotto il dito mentre
   si scorre. */
.ex-carica-libreria { margin: 0 0 18px; padding: 22px 14px; font-size: 15px; }
.ex-carica-sopra { border-color: var(--accento); border-style: solid; color: var(--testo); background: var(--accento-chiaro); }
.ex-libreria-conto { margin: 0 0 10px; font-size: 15px; }
.ex-filtri { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ex-filtro {
  font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--carta); color: var(--testo);
}
.ex-filtro span { color: var(--tenue); }
.ex-filtro[aria-pressed="true"] { background: var(--accento); border-color: var(--accento); color: #fff; }
.ex-filtro[aria-pressed="true"] span { color: rgba(255, 255, 255, .8); }
.ex-libreria-aiuto { margin: 0 0 10px; }
.ex-libreria { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ex-tessera { min-width: 0; }
.ex-tessera-foto {
  position: relative; display: block; width: 100%; padding: 0; border: 2px solid transparent;
  border-radius: 8px; background: var(--fondo-alt); cursor: pointer; line-height: 0; overflow: hidden;
}
.ex-tessera-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ex-tessera-foto:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.ex-tessera-spunta {
  position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .9); border: 1px solid var(--linea-forte);
  color: transparent;
}
.ex-tessera-spunta svg { width: 14px; height: 14px; }
.ex-tessera-scelta .ex-tessera-foto { border-color: var(--accento); }
.ex-tessera-scelta .ex-tessera-spunta { background: var(--accento); border-color: var(--accento); color: #fff; }
.ex-tessera-dove { font-size: 12.5px; line-height: 1.35; margin-top: 5px; color: var(--tenue); overflow-wrap: anywhere; }
.ex-tessera-prima { font-size: 12.5px; }
/* L'ordine dentro una camera (#154): si prende la foto, e dove cade si vede. */
.ex-tessera[draggable="true"] .ex-tessera-foto { cursor: grab; }
.ex-tessera-qui .ex-tessera-foto { outline: 2px dashed var(--accento); outline-offset: 3px; }
.ex-tessera-ordine { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin-top: 2px; }
.ex-freccia { padding: 2px 4px; line-height: 0; }
.ex-freccia svg { width: 16px; height: 16px; }
.ex-freccia:disabled { opacity: .3; cursor: default; }
/* Con dieci camere i bottoni vanno a capo: la barra non prende più di mezzo
   schermo, e dentro si scorre. Sotto resta la griglia, da toccare. */
.ex-barra-foto {
  position: sticky; bottom: 0; z-index: 3; margin: 0 0 14px; padding: 12px 14px;
  max-height: 50vh; overflow-y: auto;
  border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--carta);
  box-shadow: 0 8px 24px rgba(35, 38, 42, .12);
}
.ex-barra-foto p { margin: 0; font-size: 14px; }
.ex-barra-foto .ex-azioni { margin: 10px 0 0; }
.ex-barra-foto-attenta { border-color: #9a3324; }
.ex-barra-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.ex-barra-riga:first-child { margin-top: 0; }
.ex-barra-riga .ex-et { font-size: 13px; color: var(--tenue); margin-right: 2px; }
.ex-bottone-camera { padding: 5px 10px; font-size: 13.5px; }

/* --- la pagina della prenotazione ---------------------------------------- */
/* `.ac-righe` e' una griglia a due colonne, fatta per coppie di <span>. Una
   riga intera deve dirlo, se no due righe finiscono affiancate sulla stessa
   linea e il conto si legge di traverso. */
.ac-riga {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 15px;
}
.ac-riga + .ac-riga { border-top: 1px solid var(--linea); }
.ac-riga.totale { font-weight: 600; border-top: 1px solid var(--testo); margin-top: 4px; padding-top: 10px; }
.ac-nota { color: var(--tenue); font-size: 14px; margin: 12px 0 0; line-height: 1.6; }
.ac-messaggio {
  padding: 13px 16px; border-radius: var(--raggio-g); background: var(--fondo-alt);
  border: 1px solid var(--linea); margin-bottom: 16px; font-size: 15px;
}
.ac-messaggio.rotto { border-color: #9a3324; color: #9a3324; background: #fff; }
/* La conferma si stacca dal resto: e' il momento in cui si decide qualcosa. */
.ac-conferma { border-color: var(--accento); }
.ac-codice { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.ac-attende { cursor: progress; }
.ac-attende button { pointer-events: none; opacity: .55; }

.ex-attivo { color: #2f5d43; }
.ex-dns { margin: 8px 0 0; padding-left: 18px; color: var(--tenue); font-size: 14px; line-height: 1.7; }
.ex-dns li { margin: 2px 0; }

.ac-due { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.ac-due label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--tenue); }
.ac-due input {
  font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--linea);
  border-radius: 8px; background: var(--carta); color: var(--testo);
}
@media (max-width: 560px) { .ac-due { grid-template-columns: 1fr; } }

/* --- le istruzioni DNS, per chi non ha mai visto un pannello -------------- */
.ex-sottosez { font-family: var(--corpo); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tenue); margin: 26px 0 8px; }
.ex-fatto { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid #2f5d43; border-radius: var(--raggio-g); color: #2f5d43; background: #fff; }
.ex-rimedio { padding: 14px 16px; border: 1px solid #9a3324; border-radius: var(--raggio-g);
  background: #fff; margin: 12px 0; }
.ex-rimedio b { color: #9a3324; }
/* **In vendita, ma oggi la prova non trova camere** (#169): un'informazione,
   non un allarme. Giallo, non rosso. */
.ex-rimedio.ex-rimedio-giallo { border-color: #b08d4a; background: #fdf9ef; }
.ex-rimedio.ex-rimedio-giallo b { color: #7a5b1e; }
.ex-rimedio ol, .ex-passi { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; font-size: 15px; }
.ex-rimedio li, .ex-passi li { margin: 5px 0; }
.ex-dns2 { display: grid; gap: 10px; }
.ex-dnsriga { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px 12px;
  align-items: center; padding: 11px 14px; border: 1px solid var(--linea);
  border-radius: var(--raggio-g); background: var(--carta); }
.ex-dnscampo { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.ex-dnsvalore { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
  word-break: break-all; user-select: all; }
.ex-dnsspiega { grid-column: 1 / -1; font-size: 13px; color: var(--tenue); }
.ex-messaggio-tecnico { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.6; padding: 14px 16px; border: 1px solid var(--linea);
  border-radius: var(--raggio-g); background: var(--fondo-alt); overflow-x: auto; margin: 0 0 12px; }
@media (max-width: 640px) {
  .ex-dnsriga { grid-template-columns: 1fr auto; }
  .ex-dnscampo { grid-column: 1 / -1; }
}

/* Le camere sotto una tariffa: spunte, non righe — sono quindici e devono
   stare sotto l'occhio tutte insieme. */
.ex-camere { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.ex-camera { display: flex; align-items: center; gap: 7px; font-size: 15px; cursor: pointer; }
.ex-camera input { width: 17px; height: 17px; accent-color: var(--accento); }

/* « Ecco cosa ho trovato, dimmi cosa uso » (marcia del 14/09, punto 6): le
   strutture tutte a vista, e sotto ciascuna camere e tariffe coi nomi; le
   tariffe con la loro spunta, una per riga. */
.ex-strutture { display: grid; gap: 10px; margin: 12px 0 16px; }
.ex-struttura { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; }
.ex-struttura-scelta { border-color: var(--accento); }
.ex-struttura .sotto-riga { margin-top: 4px; }
.ex-scelte { display: grid; gap: 6px; margin-top: 8px; }

.ex-comelovede { display: block; margin-top: 3px; font-size: 13px; color: #9a3324; }

/* Le righe di « cosa manca » sono bottoni: portano dove si risolve. */
.ex-vaia {
  border: 0; background: none; padding: 0; font: inherit; font-size: 15px;
  color: inherit; text-align: left; cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--linea); text-underline-offset: 3px;
}
.ex-vaia:hover { text-decoration-color: currentColor; }

/* Il perché di un fermo, riga per riga, e il passo dopo (#178 punto 7). */
.ex-perche { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.ex-avanti {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--accento); background: var(--carta);
}

/* --- la tabella delle tariffe -------------------------------------------- */
.ta { border: 1px solid var(--linea); border-radius: var(--raggio-g); overflow: hidden; background: var(--carta); }
.ta-riga {
  display: grid;
  grid-template-columns: 34px minmax(200px, 1.5fr) 1fr 1fr 0.8fr auto;
  gap: 14px; align-items: start; padding: 16px 18px;
}
.ta-riga + .ta-riga { border-top: 1px solid var(--linea); }
.ta-aperta { background: var(--fondo-alt); }
.ta-freccia {
  border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1.4;
  color: var(--tenue); padding: 0; align-self: start;
}
.ta-nome input { font-size: 17px; font-weight: 500; padding: 6px 8px; }
.ta-tipo { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--linea); font-size: 12px; color: var(--tenue); }
.ta-col { font-size: 15px; padding-top: 8px; }
.ta-et { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); margin-bottom: 4px; }
.ta-int { padding-top: 8px; }
/* La frase di chiusura di un passo, sotto il suo nome nel menu (#148 mossa 6). */
.ex-voce-frase { display: block; font-size: 12px; line-height: 1.35; color: var(--tenue); margin: 2px 0 4px; font-weight: 400; }
/* La scheda di una camera chiusa: una riga coi numeri e « Modifica » (#147 punto 3). */
.ex-scheda-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ex-scheda-testa > span { flex: 1 1 200px; }
.ex-scheda-chiusa { padding-top: 12px; padding-bottom: 12px; }
/* Il conto vero sotto il conto: « 2 accese su camere non in vendita ». */
.ta-sotto { font-size: 12px; color: var(--tenue); margin-top: 3px; }
/* La striscia dei dodici mesi (#168): sotto la riga, per tutta la larghezza.
   Acceso pieno, chiuso da voi vuoto e barrato, spento grigio e senza bordo:
   tre stati che si distinguono anche senza colori. */
.ta-striscia { grid-column: 2 / -1; }
.ta-mesi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.ta-mese {
  font: inherit; font-size: 12px; text-transform: capitalize; padding: 5px 0; border-radius: 6px;
  border: 1px solid var(--linea); background: var(--carta); color: var(--testo); cursor: pointer;
}
.ta-mese-acceso { background: var(--accento); border-color: var(--accento); color: #fff; }
.ta-mese-chiuso { text-decoration: line-through; color: var(--tenue); }
.ta-mese-spento { background: var(--fondo-alt); border-color: transparent; color: var(--tenue); opacity: .55; cursor: help; }
@media (max-width: 700px) {
  .ta-mesi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- il resoconto del giro delle foto --------------------------------------
   Chiuso: chi guarda le foto non lo vuole davanti, chi cerca un difetto lo
   apre. Un riquadro sempre aperto che nessuno legge e' rumore sopra le foto,
   che sono la cosa per cui si e' aperta la schermata. */
.ex-resoconto {
  margin: 10px 0 16px; padding: 10px 14px;
  border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--fondo-alt);
}
.ex-resoconto summary { cursor: pointer; font-size: 14px; color: var(--tenue); }
.ex-resoconto ul { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.ex-resoconto li { margin-bottom: 6px; }
.ex-resoconto-via {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--tenue); word-break: break-all;
}

/* --- le tappe di una politica -------------------------------------------- */
.ex-tappe { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.ex-tappa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--raggio-g);
  background: var(--fondo-alt);
}
.ex-tappa-da { font-size: 15px; color: var(--tenue); }
.ex-tappa input[type="number"] { width: 76px; }
.ex-quota { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ex-quota input[type="number"] { width: 92px; }
.ex-quota-unita { font-size: 15px; color: var(--tenue); }
.ex-quota-nota { font-size: 13px; color: var(--tenue); }

/* --- l'anteprima di una politica ------------------------------------------
   Sta sotto i campi e resta sotto l'occhio mentre si cambiano i numeri sopra:
   e' la cosa per cui si sta scrivendo la politica. */
.ex-prova-pol {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--fondo-alt);
}
.ex-mancanze, .ex-avvertimenti { margin: 0 0 10px; padding-left: 20px; font-size: 14px; }
/* Una mancanza impedisce di vendere, un avvertimento no: si vedono diversi. */
.ex-mancanze { color: #9a3324; }
.ex-avvertimenti { color: var(--tenue); }
.ex-righe-testa {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); margin: 10px 0 4px;
}
.ex-righe-ospite > .ex-righe-testa:first-child { margin-top: 0; }
.ex-riga-ospite { margin: 0 0 5px; font-size: 15px; line-height: 1.5; }
.ex-riga-en { color: var(--tenue); }
.ex-nota-rossa { color: #9a3324; }

/* --- la bozza di una politica: « Crea nuove condizioni » (SEQ-167) ---------
   Come Booking: una domanda per volta, e accanto la linea del tempo che si
   scrive mentre si risponde. Su un telefono la linea va sotto. */
.ex-briciole {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 14px; color: var(--tenue); margin-bottom: 6px;
}
.ex-link {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accento); text-decoration: underline; text-underline-offset: 3px;
}
.ex-bozza-titolo { font-family: var(--titolo); font-size: 28px; font-weight: 500; margin: 4px 0 14px; }
.ex-passaggi { display: flex; align-items: center; gap: 10px; max-width: 520px; }
.ex-passaggio {
  width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--linea-forte); background: var(--carta);
  font-size: 14px; color: var(--tenue);
}
.ex-passaggio.qui { background: var(--accento); border-color: var(--accento); color: #fff; }
.ex-passaggio.fatto { border-color: var(--accento); color: var(--accento); }
.ex-passaggi-linea { flex: 1; height: 1px; background: var(--linea-forte); }
.ex-passaggi-n { font-size: 13.5px; color: var(--tenue); margin: 6px 0 16px; }
.ex-bozza-corpo {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
@media (max-width: 900px) { .ex-bozza-corpo { grid-template-columns: minmax(0, 1fr); } }
.ex-bozza-carta, .ex-bozza-lato {
  padding: 18px 20px; border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--carta);
}
.ex-bozza-lato { position: sticky; top: 12px; }
.ex-bozza-sottotitolo { font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.ex-domanda-pol { margin: 0 0 18px; }
.ex-domanda-pol-testo { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.ex-opzioni { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ex-opzione {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 2px;
  background: none; border: 0; font: inherit; font-size: 15px; color: var(--testo);
  cursor: pointer; text-align: left;
}
.ex-opzione-punto {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--linea-forte); background: var(--carta);
}
.ex-opzione[aria-checked="true"] .ex-opzione-punto { border: 6px solid var(--accento); }
.ex-tendina { min-height: 44px; width: min(100%, 360px); font-size: 15px; }
.ex-porta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 0;
  background: none; border: 0; font: inherit; font-size: 14.5px; color: var(--accento); cursor: pointer;
}
.ex-porta svg { width: 16px; height: 16px; }
.ex-porta-aperta { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--linea); }
.ex-porta-testa { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.ex-lato-testa { font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.ex-lato-vecchio { opacity: .55; transition: opacity .2s; }
/* La linea del tempo: un filo verticale, un punto per ogni momento. */
.ex-linea { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--linea-forte); }
.ex-momento { position: relative; padding: 0 0 16px; }
.ex-momento:last-child { padding-bottom: 0; }
.ex-momento::before {
  content: ""; position: absolute; left: -30px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--testo); background: var(--carta);
}
.ex-momento-quando { font-weight: 600; font-size: 15px; }
.ex-momento-come { font-size: 14px; margin-top: 4px; }
.ex-momento-gratuita .ex-momento-come { color: var(--accento); }
.ex-momento-parziale .ex-momento-come { color: var(--allarme); }
.ex-momento-non_rimborsabile .ex-momento-come { color: #9a3324; }
.ex-momento-riga { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; }
/* Il passaggio 2: la regola in frasi piane, e le due righe dell'ospite. */
.ex-verifica-blocco { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--linea); }
.ex-verifica-testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px;
}
.ex-frasi { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.55; }
.ex-pol-racconto { margin: -4px 0 6px; }

/* --- le promozioni come Booking (SEQ-171) ---------------------------------
   « Con cosa si somma » sta sotto lo sconto, staccato: è la risposta alla
   domanda che viene subito dopo « quanto ». */
.ex-cumulabile { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.ex-cumulabile .ex-frasi { margin-bottom: 10px; }
.ex-togli-conferma { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }

/* --- « Modifica un piano tariffario » (SEQ-168) ----------------------------
   Il piano riga per riga: etichetta, frase, e il suo « Modifica ». La riga
   aperta si distingue dalle altre: e' l'unica dove si scrive. */
.tf-righe { border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--carta); }
.tf-riga {
  display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto;
  gap: 14px 18px; align-items: start; padding: 16px 18px;
}
.tf-riga + .tf-riga { border-top: 1px solid var(--linea); }
.tf-aperta { background: var(--fondo-alt); }
.tf-et { font-weight: 600; font-size: 15px; padding-top: 2px; }
.tf-valore { font-size: 15px; line-height: 1.5; min-width: 0; }
.tf-sotto { display: block; font-size: 13px; color: var(--tenue); margin-top: 3px; }
.tf-azioni { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 700px) {
  .tf-riga { grid-template-columns: minmax(0, 1fr); }
  .tf-azioni { justify-content: flex-start; }
}
/* « Cosa vedrà l'ospite » (#171 punto 10): le righe della pagina dell'ospite,
   con le sue classi, dentro una carta; sotto, i prezzi delle camere. */
.tf-ospite { margin-top: 18px; }
.tf-ospite-blocco {
  border: 1px solid var(--linea); border-radius: var(--raggio-g); background: var(--carta);
  padding: 14px 18px; margin: 10px 0;
}
.tf-ospite-nome { font-weight: 600; font-size: 16px; }
.tf-ospite-blocco .vantaggio { display: block; }
.tf-ospite-prezzi { margin-top: 10px; font-size: 14px; color: var(--tenue); }
.tf-ospite-prezzi b { color: var(--testo); font-weight: 600; }
.tf-ospite-paga { margin-top: 8px; }
/* La riga dell'elenco: si legge, e i dettagli si aprono sotto. */
.ta-nome-testo { display: block; font-size: 17px; font-weight: 500; }
.ta-dettagli { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; }
.ta-dettaglio > div + div { font-size: 14.5px; margin-top: 2px; }
.ta-alloggi { margin: 0; padding-left: 18px; }
/* Quando la tariffa non vende affatto, la riga sotto non e' una nota: e' la
   notizia. Si legge anche con la riga chiusa, che e' come sta quasi sempre. */
.ta-sotto-guasta { color: #9a3324; }
/* Una camera che oggi non vende, dove una tariffa la nomina. Non e' un
   guasto e non e' rossa: e' uno stato, e si legge come tale. */
.ta-nascosta {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--linea); font-size: 11px; color: var(--tenue);
  white-space: nowrap; vertical-align: middle;
}
.ex-camera-nascosta { color: var(--tenue); }
/* Se una camera si vende sul motore, detto con le parole di chi la cerca
   (#110): un bottone che dice cosa fa, non un interruttore muto. */
.ex-vendita { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; }
.ex-vendita-nota { flex-basis: 100%; text-align: right; font-size: 12.5px; color: var(--tenue); }
.ta-dentro { grid-column: 2 / -1; margin-top: 12px; }
@media (max-width: 860px) {
  .ta-riga { grid-template-columns: 28px 1fr auto; }
  .ta-col { grid-column: 2 / -1; padding-top: 4px; }
  .ta-dentro { grid-column: 1 / -1; }
}

/* --- « questa e' una pagina di prova » ------------------------------------
   Non si chiude, non si scorre via, e sta sopra ogni altra cosa. Un avviso
   che si puo' chiudere lo chiude chi ha fretta, ed e' chi ha fretta quello
   che poi configura il mockup per un pomeriggio. */
.ex-fascia-finta {
  position: sticky; top: 0; z-index: 9999;
  background: #7a1c1c; color: #fff;
  padding: 10px 16px; font-size: 14px; line-height: 1.45;
  text-align: center;
}
.ex-fascia-finta a { color: #fff; text-decoration: underline; }

/* « Tutte » / « Nessuna »: scorciatoie in mezzo al testo, non due bottoni
   grossi. Sono un gesto sulla riga, non una scelta della schermata. */
.ex-collega {
  border: 0; background: none; padding: 0; font: inherit;
  color: var(--accento); text-decoration: underline; cursor: pointer;
}

/* Il « cosa manca » dentro la striscia (Cowork #204): stesso testo, un filo piu' tenue,
   e il link si legge sul fondo scuro. */
.striscia-anteprima a { color: inherit; text-underline-offset: 2px; }
.striscia-manca { opacity: .88; }

/* Le prenotazioni dal sito nell'extranet (SEQ-183): lo stato accanto al numero,
   i passaggi in fila, e i due bottoni che cancellano col colore di chi toglie. */
.ex-stato-prenotazione {
  font-size: 12.5px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--linea); color: var(--tenue); white-space: nowrap;
}
.ex-stato-prenotazione[data-stato="cancellata"], .ex-stato-prenotazione[data-stato="rimborsata"] { color: var(--errore); border-color: var(--errore); }
.ex-stato-prenotazione[data-stato="da_verificare"] { color: var(--attenzione, #9a6b12); border-color: currentColor; }
.ex-scheda-prenotazione p { margin: 6px 0; }
.ex-storia { margin: 8px 0 0; }
.ex-storia-riga { margin: 6px 0; line-height: 1.45; }
.ex-storia-quando { color: var(--tenue); font-variant-numeric: tabular-nums; margin-right: 6px; }
.ex-storia-riga .ex-nota { margin-top: 2px; word-break: break-word; }
.ex-storia-riga[data-esito="errore"] b { color: var(--errore); }
.ex .btn[data-fai=prenotazione-cancella], .ex .btn[data-fai=prenotazione-cancella-si] {
  color: var(--errore); border-color: var(--errore); background: var(--carta);
}

/* Preparazione pagamento: mantiene la pagina ferma fino al passaggio a Stripe. */
.sequoya-pagamento-attesa { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; background:rgba(255,255,255,.88); backdrop-filter:blur(4px); }
.sequoya-pagamento-card { display:flex; flex-direction:column; align-items:center; gap:16px; padding:32px; text-align:center; color:#1a2d42; }
.sequoya-pagamento-card img { animation:sequoya-pagamento 1.8s ease-in-out infinite; margin-bottom:8px; }
.sequoya-pagamento-card strong { font-size:20px; }
.sequoya-pagamento-card span { font-size:15px; }
@keyframes sequoya-pagamento { 0%,100% { transform:rotate(0deg) scale(.94); opacity:.65; } 50% { transform:rotate(180deg) scale(1.06); opacity:1; } }
@media(prefers-reduced-motion:reduce) { .sequoya-pagamento-card img { animation:none; } }

.sequoya-credit { flex:none; padding:8px 16px; text-align:center; font-size:11px; line-height:1.5; color:var(--testo,#4b535a); background:var(--pannello,#fff); }

.ac-cal {max-width:560px;margin:24px auto}.ac-cal-nav{display:flex;align-items:center;justify-content:space-between}.ac-cal-griglia{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center}.ac-cal-griglia>span{padding:8px 0;font-size:12px}.ac-cal-giorno{min-height:54px;border:1px solid #dce2e8;background:white;border-radius:6px;color:#263746;cursor:pointer;font:inherit}.ac-cal-giorno small{display:block;font-size:10px}.ac-cal-giorno.scelto{background:var(--accento,#246aab);color:white}.ac-cal-giorno:disabled{opacity:.35;cursor:default}.ac-cal-giorno:focus-visible{outline:2px solid #246aab;outline-offset:2px}#sposta-date{scroll-margin-top:20px}

.ac-cancellata { display:flex; gap:16px; align-items:flex-start; padding:24px; margin-bottom:24px; border:2px solid #a32b36; border-left-width:6px; border-radius:12px; background:#fff1f2; color:#74202a; }
.ac-cancellata > span { font-size:28px; font-weight:700; line-height:1.2; }
.ac-cancellata h2 { margin:0 0 8px; font-family:var(--corpo, sans-serif); font-size:clamp(24px,4vw,32px); font-weight:700; }
.ac-cancellata p { margin:0; line-height:1.5; }

.ac-costo-cancellazione {display:block; padding:16px; margin:12px 0;}
.ac-penale-avviso {background:#fff1f2;color:#74202a;border:1px solid #a32b36;border-radius:10px;}
.ac-penale-titolo {font-size:22px;line-height:1.35;}
.ac-costo-cancellazione p {margin:0 0 12px;}

/* Sequoya: shared mark for credits and explicit network waits. */
.sequoya-credit a,.of-footer a[href="https://sequoya.io"],.ac-marchio a[href="https://sequoya.io"]{display:inline-flex;align-items:center;gap:8px}
.sequoya-credit a::before,.of-footer a[href="https://sequoya.io"]::before,.ac-marchio a[href="https://sequoya.io"]::before,footer a[href="https://sequoya.io"]::before{content:"";display:inline-block;width:24px;height:28px;vertical-align:middle;background:url("sequoya-marchio.svg") center/contain no-repeat}
.ex-suite-brand img{object-fit:contain;flex:none}
.sq-request-loader{position:fixed;right:20px;bottom:20px;z-index:10010;display:flex;align-items:center;gap:12px;padding:12px 18px;max-width:calc(100vw - 40px);border:1px solid #dbe7f2;border-radius:14px;background:#fff;color:#1a2d42;box-shadow:0 6px 24px #1a2d4220;font:500 14px/1.4 system-ui,sans-serif;pointer-events:none}
.sq-request-loader[hidden]{display:none}
.sq-request-loader::before,.sq-loading-inline::before{content:"";display:inline-block;width:38px;height:38px;flex:none;background:url("sequoya-marchio.svg") center/contain no-repeat;animation:sq-mark-breathe 1.8s ease-in-out infinite}
.sq-loading-inline{display:flex;align-items:center;justify-content:center;gap:14px;min-height:64px}
@keyframes sq-mark-breathe{0%,100%{opacity:.55;transform:scale(.88) rotate(-8deg)}50%{opacity:1;transform:scale(1.04) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.sq-request-loader::before,.sq-loading-inline::before{animation:none}}

body:has(.ex-sequoya-attesa-overlay,.sequoya-pagamento-attesa) .sq-request-loader{display:none}