/* Scheda /viaggi v2 — ridisegno 01/09/2026.
   Caricato SOLO da templates/public/viaggi/detail_v2.html, che si serve
   con ?v2=1 a flag VIAGGI_SCHEDA_V2 acceso. `viaggi-detail.css` resta la
   produzione e non si tocca: i suoi gate (modal stacking, dock senza
   prezzo) continuano a valere sulla v1.

   Prefisso `v2-` su tutto per non collidere con le `.vd-*` esistenti, che
   convivono nella stessa pagina finche' il porting non e' finito.

   I valori vengono dalla scheda vera e dal motore della home
   (_search_v2_styles.html), non da scelte fatte a occhio. */

/* ── card della selezione ─────────────────────────────────────────── */
.v2-sel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(30, 60, 114, .12);
    padding: 17.6px;
    margin-bottom: 14px;
}
.v2-sel__bar {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eef1f6;
}
.v2-sel__bar .vd-bar-icon { color: var(--primary, #1e3c72); font-size: 1.1rem; display: flex; margin-top: 1px; }
/* Il JS riappende i segmenti in ordine: data, aeroporto, persone. Dando
   al primo tutta la riga, gli altri scendono INSIEME sotto — con qualunque
   nome di scalo. Nessuna dipendenza dall'ordine oltre «il primo e' la
   data», che e' garantito dal JS. */
/* GRIGLIA, non flex-wrap. Nell'artboard mobile la barra e' fatta di due
   contenitori — riga 1 «data + Modifica», riga 2 «scalo, persone» — ma i
   tre segmenti li rigenera il JS della v1 dentro un solo `#vdBarSummary`,
   e spostarli nel DOM significherebbe vederli cancellare al primo render.
   Col flex-wrap il risultato erano TRE righe (misurato a 360px: allo
   scalo e alle persone restano ~188px e ne servono 192, e il wrap ha la
   precedenza sullo shrink, quindi non si accorciavano — andavano a capo).
   Con due colonne la seconda riga esiste per costruzione: lo scalo prende
   quel che avanza e si accorcia se serve, le persone restano intere. */
.v2-sum {
    flex: 1; min-width: 0;
    /* `minmax(0, 1fr) auto`, non colonne a contenuto: il primo segmento
       attraversa entrambe le colonne e, se queste si dimensionano sul
       contenuto, la sua larghezza viene ripartita fra loro — misurato:
       lo scalo collassava a 0 e «2 adulti» diventava largo 184px. Con
       `1fr` la prima colonna prende quel che avanza a prescindere da chi
       la attraversa, e `minmax(0, …)` le toglie il minimo automatico che
       impedirebbe l'ellissi. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; row-gap: 7px; column-gap: 14px;
    font-size: 13.1px; font-weight: 600; color: #1a1a1a;
}
.v2-sum > .vd-bar-seg:first-child { grid-column: 1 / -1; min-width: 0; padding: 0; border: 0; }
.v2-sum > .vd-bar-seg { padding: 0; border: 0; }
/* Perche' gli altri due sono comprimibili. Nell'artboard mobile la barra
   e' fatta di DUE contenitori: riga 1 = data + «Modifica», riga 2 = scalo
   e persone a tutta larghezza. Qui non si puo' riprodurre quella
   struttura, perche' i tre segmenti li rigenera il JS della v1 dentro un
   solo `#vdBarSummary` e spostarli li' farebbe cancellare tutto al primo
   render. Conseguenza: il tasto sottrae larghezza anche alla seconda
   riga, e con uno scalo lungo («da Roma Fiumicino») le righe diventano
   TRE invece di due — misurato a 360px. Rendendoli comprimibili tornano
   due: con uno scalo corto si legge tutto, con uno lungo si accorcia
   quello — mai il numero di persone, che e' l'informazione piu' densa.
   Vale per «tutti tranne il primo», non per posizione: cosi' non dipende
   dall'ordine oltre a «il primo e' la data», che il gate gia' difende. */
/* `block`, non l'`inline-flex` che la v1 da' ai segmenti. Due ragioni,
   misurate a 360px:
   - `text-overflow: ellipsis` NON si applica a un contenitore flex: lo
     scalo veniva tagliato netto a meta' parola («da Roma Fiumic») invece
     di finire con i puntini;
   - nel primo segmento data e «8 notti» sono due figli flex, quindi la
     data andava a capo su due righe mentre «8 notti» restava appeso a
     destra. Da blocco scorrono come testo — il JS fra i due mette uno
     spazio vero (`createTextNode(' ')`), quindi la spaziatura resta.
   Non ci sono icone dentro i segmenti (l'icona del calendario e' fuori,
   in `.vd-bar-icon`), quindi non si perde niente. */
.v2-sum > .vd-bar-seg { display: block; }
.v2-sum > .vd-bar-seg:not(:first-child) {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Il QUARTO segmento. Quando restano pochi posti la v1 appende un
   `.vd-bar-seg--seats` («Ultimi 2 posti», viaggi-detail.js:1031-1037): con
   quattro figli la griglia a due colonne fa una terza riga, e il testo rosso
   dell'urgenza finirebbe stretto in mezza colonna. Riga intera: e' la voce
   che deve leggersi, e non ha senso comprimerla per stare in due righe.
   ⚠️ Quindi «due righe per costruzione» vale con TRE segmenti; con la
   scarsita' sono tre, ed e' voluto. */
.v2-sum > .vd-bar-seg--seats { grid-column: 1 / -1; }
/* Stesso pill che la scheda usa gia' per «Modifica selezione». */
.v2-mod {
    flex: 0 0 auto; border: 1.5px solid var(--primary, #1e3c72);
    color: var(--primary, #1e3c72); background: #fff; border-radius: 999px;
    padding: 7.2px 16px; font-weight: 600; font-size: 13.6px;
    font-family: inherit; cursor: pointer; white-space: nowrap;
}
.v2-mod:hover { background: var(--primary, #1e3c72); color: #fff; }

/* ── contatori (stessi valori di .vd-step-btn) ────────────────────── */
.v2-tondo {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
    border: 1.5px solid #dbe2ee; background: #fff; color: var(--primary, #1e3c72);
    font-size: 18.4px; font-weight: 700; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.v2-tondo:hover:not(:disabled) { border-color: var(--primary, #1e3c72); background: #f4f7fc; }
.v2-tondo:disabled { opacity: .4; cursor: default; }
@keyframes v2-pulsa {
    0%, 100% { box-shadow: 0 6px 16px rgba(164, 198, 57, .45); }
    50%      { box-shadow: 0 6px 26px rgba(164, 198, 57, .95), 0 0 0 4px rgba(164, 198, 57, .25); }
}

/* ── calendario delle partenze ────────────────────────────────────────
   Vista sulle `.vd-date-row`, non una seconda copia dei dati. L'elenco
   resta nel DOM (e' il bersaglio dei clic) ma non si vede. */
.v2-elenco-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.v2-cal { margin-bottom: .6rem; }
.v2-cal__nav { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.v2-cal__frec { width: 32px; height: 32px; flex: 0 0 32px; font-size: 15px; }
.v2-cal__mese { flex: 1; text-align: center; font-size: 15.2px; font-weight: 800; color: #1a1a1a; }
.v2-cal__gg {
    display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
    font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase;
    letter-spacing: .5px; padding-bottom: 6px;
}
.v2-cal__griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.v2-cal__vuoto {
    height: 48px; display: flex; align-items: center; justify-content: center;
    font-size: 13.4px; color: #c3c7d0;
}
/* Il prezzo DENTRO la casella: su /viaggi la data e' il prezzo (632÷994,
   il 57%), quindi un calendario verde/grigio direbbe «si puo'» e non
   «quanto». I colori sono gli stessi che la scheda nativa usa per le
   disponibilita', copiati (vedi la nota sui valori diretti qui sotto). */
.v2-cal__g {
    height: 48px; border: 0; border-radius: 10px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; font-family: inherit;
    /* Valori diretti, non `var(--ii-cal-avail-*)`: quei token vivono in
       hotel-detail.css, che questa pagina NON carica (extra_css qui prende
       solo viaggi-detail.css e _gallery_lightbox.css). La var non risolveva
       mai e valeva sempre il fallback — cioe' dichiarava una dipendenza che
       non esisteva, e il prossimo lettore l'avrebbe presa per vera. I colori
       restano quelli della scheda nativa, copiati. */
    background: #e8f3ee; color: #2a6a47;
}
.v2-cal__g b { font-size: 14.4px; font-weight: 700; line-height: 1; }
.v2-cal__g i { font-size: 9.8px; font-weight: 700; line-height: 1; font-style: normal; }
.v2-cal__g.is-scelto {
    background: var(--primary, #1e3c72); color: #fff;
    box-shadow: 0 4px 12px rgba(30, 60, 114, .35);
}
/* Partenza senza posti per la comitiva scelta (limitatore #1110): resta
   visibile, con «solo N posti» al posto del prezzo, ma non si sceglie. */
.v2-cal__g.is-pieno {
    background: #f3f4f6; color: #9aa0ab; cursor: pointer; box-shadow: none;
}
.v2-cal__g.is-pieno i { color: #b4232a; }

/* Giorno pieno cliccato (owner 01/10/2026): perché non si può, e la
   stessa partenza in altre strutture della zona. Rosso «danger» della
   card pinnata dei risultati, su una banda tenue. */
.v2-pieno {
    margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px;
    background: #fdecee; border: 1px solid #f3c2c7;
}
.v2-pieno__titolo { margin: 0; font-size: .92rem; font-weight: 700; color: #b02a37; line-height: 1.35; }
.v2-pieno__titolo i { color: #dc3545; margin-right: 4px; }
.v2-pieno__testo { margin: 6px 0 8px; font-size: .86rem; color: #41506b; }
.v2-pieno__cta {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 6px; padding: 10px 14px; border-radius: 12px;
    background: var(--primary, #1e3c72); color: #fff; text-decoration: none;
    font-size: .9rem; font-weight: 700;
}
.v2-pieno__cta:hover { background: #152a4f; color: #fff; }
/* Più scali pieni lo stesso giorno: uno per riga, coi loro posti. */
.v2-pieno__scali { margin: 6px 0 0; padding-left: 18px; font-size: .86rem; color: #41506b; }
/* Date vicine con posto per la comitiva (owner 02/10/2026): la stessa
   forma delle righe «Scegli aeroporto di partenza», su fondo bianco. */
.v2-pieno__data {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; margin: 0 0 6px; padding: 9px 12px; background: #fff;
    border: 1.5px solid #dbe2ee; border-radius: 12px; font-family: inherit;
    text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.v2-pieno__data:hover, .v2-pieno__data:focus-visible {
    border-color: var(--primary, #1e3c72); background: #f3f6fc; outline: none;
}
.v2-pieno__data-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v2-pieno__data-main b { font-size: 14px; color: #1a1a1a; }
.v2-pieno__data-main small { font-size: 12px; color: #6b7280; font-weight: 500; }
.v2-pieno__data-prezzo {
    display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; line-height: 1.15;
}
.v2-pieno__data-prezzo strong { font-size: 15px; font-weight: 800; color: var(--price-amber, #e08b1a); }
.v2-pieno__data-prezzo small { font-size: 11px; color: #6b7280; font-weight: 500; }
/* Lo stesso riquadro nel piede del popup, sopra «Fatto»/«Aggiorna»
   (owner 02/10/2026: persone aggiunte dopo aver scelto la partenza).
   Largo quanto il tasto, come `.vd-panel-miss`. */
.v2-pieno--piede { width: 100%; margin: 0 0 .6rem; box-sizing: border-box; }
.v2-pieno--piede[hidden] { display: none; }

/* ── riepilogo: «La quota comprende» ──────────────────────────────────
   Un bottone, non una lista sempre aperta: nel foglio il cliente sta
   guardando prezzo e scadenze, e le inclusioni servono solo a chi le
   cerca. */
/* Misure e colori dal prototipo (`tastoIncluso` / `tipIncluso`). Il
   fumetto e' assoluto sopra il tasto: il contenitore gli da' il riferimento
   e la card ha `overflow` libero, quindi puo' sbordare verso l'alto. */
.v2-incl-wrap { position: relative; margin: 14px 18px 0; }
.v2-incl-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: #f0f8f1; border: 1px solid #d7ebda; border-radius: 10px;
    padding: 11px 13px; text-align: left; cursor: pointer;
    font-family: inherit; font-size: 13.4px; font-weight: 700; color: #1a1a1a;
}
.v2-incl-check {
    width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
    background: #2e7d32; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.v2-incl-testo { flex: 1; min-width: 0; }
.v2-incl-i {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid #2e7d32; color: #2e7d32;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; font-style: normal;
}
.v2-incl {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 9px); z-index: 5;
    background: #1a2235; color: #fff; border-radius: 12px; padding: 13px 15px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .32);
}
.v2-incl::after {
    content: ''; position: absolute; left: 26px; bottom: -7px;
    width: 14px; height: 14px; background: #1a2235;
    transform: rotate(45deg); border-radius: 2px;
}
.v2-incl-x {
    position: absolute; top: 6px; right: 8px;
    background: none; border: 0; color: rgba(255, 255, 255, .7);
    font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer;
}
.v2-incl-x:hover { color: #fff; }
.v2-incl-occhiello {
    font-size: 11.6px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 7px;
}
.v2-incl .vd-quota-box { margin: 0; padding: 0; background: none; border: 0; }
.v2-incl .vd-quota-list { margin: 0; padding-left: 17px; }
.v2-incl .vd-quota-list li {
    font-size: 13px; line-height: 1.62; color: rgba(255, 255, 255, .92);
}

/* ── pannello a tre campi (01/09) ─────────────────────────────────────
   «Modifica» apre un pannello compatto; ogni campo apre la sua sezione. */
.v2-riep {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eef1f6;
}
.v2-campo {
    display: block; width: 100%; text-align: left; margin-bottom: 10px;
    background: #fff; border: 1.5px solid #dbe2ee; border-radius: 10px;
    padding: 9px 12px; font-family: inherit; cursor: pointer;
}
.v2-campo:last-of-type { margin-bottom: 4px; }
.v2-campo__eti { display: block; font-size: 11.6px; color: #6b7280; font-weight: 600; margin-bottom: 1px; }
.v2-campo__val {
    display: block; font-size: 15.2px; font-weight: 600; color: #1a1a1a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-nota {
    display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0;
    font-size: 12.5px; line-height: 1.35; color: #778;
}
.v2-nota .bi { flex: 0 0 auto; margin-top: 2px; }
.v2-form[hidden] { display: none; }

/* La nota vive DENTRO il calendario: chi vede una griglia di giorni si
   aspetta di segnare un intervallo, e qui si sceglie solo la partenza. */
.v2-cal__nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.35; color: #6b7280; }
.v2-cal__nota strong { color: #1a1a1a; }

/* ── calendario aggregato «prima la data o l'aeroporto» (29/09/2026
   pomeriggio — sostituisce il calendario unico + «Cambia aeroporto» della
   mattina: qui i due flussi convivono in un solo stato, vedi
   `#vdAirportPills` qui sotto). Stessa griglia di `.v2-cal` (colori/misure
   invariati), solo l'intro e' nuova. */
.v2-cal--tutti { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #dbe2ee; }
.v2-cal__intro {
    margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: #6b7280;
    text-align: center;
}
/* «Da quale aeroporto parti?» sotto il giorno scelto (owner 02/10/2026,
   proposta B): una riga per scalo, cliccabile, stessa forma delle card
   camera (bordo chiaro, prezzo a destra). */
.v2-cal__giorno { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #dbe2ee; }
.v2-cal__giorno-tit { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #1a1a1a; }
.v2-cal__scalo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; margin: 0 0 8px; padding: 11px 13px; background: #fff;
    border: 1.5px solid #dbe2ee; border-radius: 12px; font-family: inherit;
    text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.v2-cal__scalo:hover, .v2-cal__scalo:focus-visible {
    border-color: var(--primary, #1e3c72); background: #f3f6fc; outline: none;
}
.v2-cal__scalo-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-cal__scalo-main b { font-size: 14.5px; color: #1a1a1a; }
.v2-cal__scalo-main small { font-size: 12px; color: #6b7280; font-weight: 500; }
.v2-cal__scalo-posti { font-size: 11.5px; font-weight: 700; color: #c62828; }
.v2-cal__scalo-prezzo {
    display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto;
    line-height: 1.15;
}
.v2-cal__scalo-prezzo s { font-size: 12px; color: #9aa0ab; }
.v2-cal__scalo-prezzo strong { font-size: 16px; font-weight: 800; color: var(--price-amber, #e08b1a); }
.v2-cal__scalo-prezzo small { font-size: 11px; color: #6b7280; font-weight: 500; }
/* Scalo PIENO per la comitiva (owner 02/10/2026): stessa riga, grigia e
   non cliccabile, col perché a destra al posto del prezzo. */
.v2-cal__scalo-pieno {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 8px; padding: 11px 13px; background: #f3f4f6;
    border: 1.5px dashed #dbe2ee; border-radius: 12px; cursor: default;
}
.v2-cal__scalo-pieno .v2-cal__scalo-main b { color: #6b7280; }
.v2-cal__scalo-nota {
    display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto;
    font-size: 13px; font-weight: 700; color: #b4232a; line-height: 1.2; text-align: right;
}
.v2-cal__scalo-nota small { font-size: 11px; font-weight: 500; color: #6b7280; }

/* ── pillole aeroporto (29/09/2026 pomeriggio) ───────────────────────────
   SEMPRE visibili nello stato «Scegli la partenza» (mai un `<select>`
   nativo: qui serve mostrare uno stato per pillola, cosa che un `<option>`
   non puo' fare). Quattro stati, mai in contemporanea nella pratica:
   - neutro: nessun aeroporto attivo, nessuna data evidenziata;
   - `.is-selezionata`: lo scalo il cui calendario e' filtrato ora (o della
     riga scelta);
   - `.is-disponibile`: dopo un clic su una data del calendario aggregato,
     gli scali che partono quel giorno (vedi `viaggi-detail-v2.js:
     evidenziaPille`). Nessuno stile: dal 02/10/2026 (owner) le pillole
     restano TUTTE normali e cliccabili — prima quelle senza quel giorno
     diventavano grigie e disattivate (`.is-altre-date`, prova del 29/09
     sera) e per cambiare aeroporto bisognava togliere la selezione. */
.vd-airport-pills {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.vd-airport-pill {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 6px 11px; background: #f8f9fb; border: 1.5px solid #dbe2ee;
    border-radius: 999px; font-family: inherit; font-size: 12.4px;
    font-weight: 600; color: #1a1a1a; cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s, color .15s;
}
.vd-airport-pill:hover:not(:disabled):not(.is-selezionata) {
    border-color: var(--primary, #1e3c72); background: #eaf1fb;
    color: var(--primary, #1e3c72);
}
.vd-airport-pill__nome { line-height: 1.1; }
.vd-airport-pill__stato {
    font-size: 9.6px; font-weight: 700; line-height: 1; min-height: 0;
}
.vd-airport-pill__stato:empty { display: none; }
.vd-airport-pill.is-selezionata {
    border-color: var(--primary, #1e3c72); background: var(--primary, #1e3c72);
    color: #fff;
}
/* La "x" segnala che questa e' la pillola attiva e ricliccarla deseleziona
   (owner 29/09/2026 sera) — pseudo-elemento sul nome, cosi' resta inline
   sulla stessa riga senza toccare il markup Jinja. */
.vd-airport-pill.is-selezionata .vd-airport-pill__nome::after {
    content: '\00d7'; margin-left: 6px; font-weight: 700;
}
/* Offerta in evidenza cliccata (spec 2026-10-06-0705): gli scali che partono
   il giorno della card, con «parte il 12/10» nello stato della pillola
   (viaggi-detail-v2.js: segnaOfferta). Il clic sceglie giorno + scalo. */
.vd-airport-pill.is-offerta {
    border-color: var(--accent, #f5a623); background: #fff7eb;
}
.vd-airport-pill.is-offerta .vd-airport-pill__stato {
    color: var(--price-amber, #e08b1a);
}
/* Le card delle offerte in evidenza stanno sotto le foto, a tutta
   larghezza come sulla scheda hotel, sopra la barra «Scegli la tua
   partenza»: meno aria sopra, perché le foto finiscono già col loro margine. */
.hd-stays--viaggi { margin: 16px 0 22px; }

/* «Chi viaggia» E' l'editor delle camere: la comitiva globale resta nel
   DOM — la v1 ci lavora — ma fuori dagli occhi. Solo i FIGLI DIRETTI
   della card: `renderSplitEditor` usa la stessa classe `.vd-pax` per le
   righe dentro ogni camera, e col selettore largo sparivano anche quelle. */
#vdPanel.v2-solo-camere > .vd-panel-card > .vd-pax,
#vdPanel.v2-solo-camere > .vd-panel-card > #vdAges,
#vdPanel.v2-solo-camere > .vd-panel-card > #vdPaxNote { display: none !important; }
#vdSplitEditor[hidden] { display: none; }
/* Via «Annulla» e «Applica» (owner 02/09). Erano i tasti della vecchia
   finestra separata: nel pannello sono un doppione di «Fatto», e avere tre
   comandi per uscire dalla stessa schermata confonde — «Fatto» sembrava non
   fare niente perche' la scelta andava confermata con «Applica».
   Via anche «Aggiungi camera» e «Torna alla divisione automatica» (owner
   04/10): su /viaggi la divisione e' automatica e le varianti possibili
   le proponiamo gia' noi, quindi il cliente non deve comporla a mano.
   Solo nascosti: il JS continua a costruirli, cosi' la logica della
   divisione non cambia. */
#vdPanel #vdSplitCancel,
#vdPanel #vdSplitApply,
#vdPanel #vdSplitAdd,
#vdPanel #vdSplitAuto { display: none !important; }

/* ── La carta dei voli ────────────────────────────────────────────────
   Il disegno impila andata e ritorno separate da un filo tratteggiato; la
   v1 le affianca in due colonne. Qui si torna a una colonna sempre: e' la
   disposizione che il filo richiede, e su schermo largo i puntini si
   allungano invece di sprecare spazio.

   Il filo e' un elemento vuoto che si allunga (`flex: 1`): non si puo'
   fare con un bordo sul contenitore, perche' deve stare FRA i due estremi
   e fermarsi dove comincia il testo. */
.vd-flight-legs { grid-template-columns: 1fr; gap: 0; }
.v2-leg { padding: 0; }
.v2-leg + .v2-leg,
.v2-flight-piede {
    border-top: 1px dashed #e3e8f0;
    padding-top: .75rem;
    margin-top: .75rem;
}
.v2-leg .vd-flight-leg-body { flex: 1; }
.v2-leg .vd-flight-leg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .6rem;
    margin-bottom: .25rem;
}
.v2-leg-eti {
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    font-size: .775rem;
    color: #667;
    white-space: nowrap;
}
.v2-leg-coda .vd-flight-logo { display: inline-block; vertical-align: middle; margin-right: .4rem; }
.v2-leg-coda {
    margin-left: auto;
    text-align: right;
    font-size: .79rem;
    font-weight: 500;
    color: #667;
    /* puo' stringersi e andare a capo: senza `min-width: 0` un flex item
       resta largo quanto il suo testo, e «Ethiopian Airlines · 1 scalo a
       Addis Ababa» spingeva la pagina oltre il bordo su mobile — la pagina
       «si muove a destra e a sinistra» (owner 02/09) */
    min-width: 0;
    flex: 1 1 auto;
}
/* Su mobile la coda (logo, compagnia, scali) va a capo sotto l'etichetta:
   allineata a SINISTRA, come l'etichetta (owner 04/10/2026). */
@media (max-width: 575.98px) {
    .v2-leg-coda { margin-left: 0; text-align: left; flex-basis: 100%; }
}
.v2-leg .vd-flight-route {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
}
/* Gli estremi della tratta preferiscono restare su una riga, ma se lo
   schermo e' stretto vanno a capo DENTRO invece di sbordare. */
.v2-leg-cap { min-width: 0; flex: 0 1 auto; }
.v2-leg .vd-flight-leg-head,
.v2-leg .vd-flight-route { min-width: 0; }
.v2-leg-filo {
    flex: 1;
    min-width: 12px;
    border-top: 1px dashed #d5dce8;
}
.v2-flight-piede { font-weight: 600; color: #4a4a4a; font-size: .84rem; }

/* ── Il foglio del riepilogo ──────────────────────────────────────────
   Testata navy col totale, quattro passi spuntati, i voli, il dettaglio.
   Le misure vengono dal prototipo approvato
   (`ai-workspace/dc-viaggi/prova-scheda-viaggi.html`, righe 210-235 e
   336-350), non da stime. */
/* ── la gemella desktop della sidebar (>=992px) ───────────────────────
   La sidebar della v1 resta nel DOM, nascosta: e' la sorgente in cui la
   v1 scrive e da cui il foglio mobile clona. La gemella `.v2-side` ha la
   base della card (viaggi-detail.css riga 162 e 457) senza il padding e
   il gap interni: nel prototipo ogni blocco porta il suo. */
#vdSide .v2-sorgente { display: none; }
:is(#vdSide, #fhSummary) .v2-side {
    background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--hair, #e5e1d8);
    box-shadow: 0 8px 30px rgba(30, 60, 114, .10);
    display: flex; flex-direction: column; padding: 0; gap: 0;
}
/* `.vd-side-head` nella sidebar ha `margin: -18px -18px 2px` per uscire
   dal padding della card: qui il padding non c'e' piu', e il margine
   negativo farebbe sbordare la testata. */
:is(#vdSide, #fhSummary) .v2-side .v2-riep-head {
    margin: 0; align-items: flex-start; padding-top: 2rem;
    /* navy come il prototipo: la skin HoEscape colora `.vd-side-head`
       di verde con `[data-skin="hoe"] .vd-side-head`, che batte una
       classe sola. */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
:is(#vdSide, #fhSummary) .v2-side .v2-riep-head .v2-riep-occhiello { margin-bottom: .25rem; }
/* Lo stato «senza partenza» (owner 04/09) nella gemella: il box
   .vd-side-nodate porta i suoi blocchi col loro padding; la card v2 non
   ne aggiunge. */
#vdSide .v2-side .vd-side-nodate { margin: 0; }

 Nel
   foglio il contenuto supera sempre l'altezza disponibile, quindi il
   browser prova a mandarlo in una seconda colonna e nel farlo gonfia i
   blocchi: misurato, la griglia dei passi passava da 147px a 230, con un
   vuoto di 84px sotto le celle. Il foglio scorre in verticale — le colonne
   non le vuole nessuno. */
.v2-riep { flex-wrap: nowrap; }
/* E ogni blocco a tutta larghezza: la card ha `align-items: center`, e
   sopra i 576px la v1 non forza piu' `width: 100%` sui bottoni — «Prenota
   ora» e «Chiama» restavano stretti al centro. */
.v2-riep > * { align-self: stretch; }

.v2-riep-head {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Il respiro in alto lascia posto al tasto di chiusura, che sta
       fuori flusso in un angolo: senza, si sovrappone a «TOTALE».
       `align-self: stretch` perche' `.vd-side-card` e' un flex con
       `align-items: center` — senza, ogni blocco si restringe al proprio
       contenuto e resta incolonnato in mezzo alla card. */
    padding: 2rem 1.1rem .85rem;
    position: relative;
    align-self: stretch;
    flex: 0 0 auto;
}
/* `flex-start`, non `center`: il blocco del totale e' piu' basso di quello
   del nome, e centrato SALE fin sotto la x (misurato a 516px: la x
   finiva sopra «TOTALE»). In alto restano tutti e due, e la x ha la sua
   striscia. Specificita' alzata apposta: la testata porta anche la classe
   `.vd-side-head` della v1, la cui regola di padding vinceva sulla mia
   (misurato: 13.6px invece di 32). La regola della v1 e'
   `[data-skin="hoe"] .vd-dock-body .vd-side-head` — tre classi — quindi
   qui ce ne vogliono tre, e questo file viene dopo. */
.vd-dock-body .v2-riep .v2-riep-head { align-items: flex-start; padding-top: 2rem; }
/* Il nome ha la precedenza sullo spazio: il blocco del totale non puo'
   schiacciarlo a una parola per riga («Stiamo quotando…», owner 02/09). */
.v2-riep-head-sx { min-width: 0; flex: 1 1 auto; }
.v2-riep-head-dx { text-align: right; flex: 0 1 auto; max-width: 48%; padding-right: .35rem; }
.v2-riep-head .vd-total-val.v2-totale-testo { font-size: .8rem; font-weight: 700; color: #fff; line-height: 1.3; }
.v2-riep--vuoto .v2-riep-head .vd-total-val { color: rgba(255, 255, 255, .7); }
.v2-riep-avviso {
    align-self: stretch; flex: 0 0 auto;
    padding: 10px 18px; font-size: 12.8px; line-height: 1.5; color: #7a4b00;
    background: #fff8e6; border-bottom: 1px solid #e9ecef;
}
.v2-riep-occhiello {
    display: block;
    font-size: .655rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    margin-bottom: .25rem;
}
.v2-riep-titolo {
    display: block;
    font-size: .94rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.v2-riep-head .vd-side-total {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.v2-riep-head .vd-total-row { margin: 0; padding: 0; border: 0; justify-content: flex-end; }
.v2-riep-head .vd-total-val { font-size: 1.375rem; font-weight: 800; color: #f5a623; line-height: 1; }
.v2-riep-head .vd-ms-close {
    position: absolute;
    top: .35rem;
    right: .5rem;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .8);
    /* Nel disegno e' una x in un angolo. Il testo si azzera invece di
       sparire con `display:none` perche' il tasto e' quello della v1 e la
       sua etichetta accessibile («Chiudi il riepilogo») deve restare. */
    font-size: 0;
    line-height: 1;
    padding: .1rem .35rem;
}
.v2-riep-head .vd-ms-close::before {
    content: '\00d7';
    font-size: 1.25rem;
    line-height: 1;
}
.v2-riep-head .vd-ms-close .bi { display: none; }

/* I quattro passi — `passo()` del prototipo: spunta tonda 22px a
   sinistra (sfondo #e6f6e6, segno #2e7d32), etichetta 10.5px sopra il
   valore 13.4px, filo tratteggiato verticale a destra della prima
   colonna. SEMPRE due colonne: il prototipo usa `auto-fit`, ma a 600px ne
   venivano tre piu' una a capo, e la forma approvata e' 2x2. */
.v2-passi {
    align-self: stretch;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 14px 18px;
    border-bottom: 1px solid #e9ecef;
}
.v2-passo {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 0; min-width: 0;
}
.v2-passo:nth-child(odd) { border-right: 1px dashed #e5e1d8; }
.v2-passo:nth-child(even) { padding-left: 12px; }
.v2-passo-check {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
    background: #e6f6e6; color: #2e7d32;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}
.v2-passo--spento .v2-passo-check { background: #f1f3f5; border: 1.5px dashed #c5c9d3; }
.v2-passo--spento .v2-passo-val { color: #8a8a8a; font-weight: 600; }
.v2-passo-testo { min-width: 0; }
.v2-passo-eti {
    font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: #8a8a8a;
}
.v2-passo-val { font-size: 13.4px; font-weight: 700; color: #1a2235; }

/* La riga del volo: una frase, ✈ davanti, la seconda riga in grigio. */
.v2-riep-volo {
    align-self: stretch; flex: 0 0 auto;
    display: flex; align-items: flex-start; gap: 9px;
    padding: 12px 18px; background: #f7f8fb;
    font-size: 12.8px; color: #4a4a4a; line-height: 1.5;
    border-bottom: 1px solid #e9ecef;
}
.v2-riep-volo-ico { flex: 0 0 auto; margin-top: 1px; }
.v2-riep-volo-corpo { min-width: 0; }
.v2-riep-volo-nota { color: #8a8a8a; }

/* I conti — `conto()` del prototipo: etichetta a sinistra, cifra a
   destra in grassetto, filo sottile sopra; il totale in ambra. */
.v2-conti { align-self: stretch; flex: 0 0 auto; padding: 12px 18px 0; }
.v2-conto {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 6px 0; font-size: 13px; color: #1a2235;
    border-top: 1px dashed #f1f3f5;
}
.v2-conto > span:first-child { color: #4a4a4a; min-width: 0; }
.v2-conto > span:last-child { font-weight: 800; white-space: nowrap; }
.v2-conto--forte > span:first-child { color: #1a2235; font-weight: 700; }
.v2-conto--forte > span:last-child { color: #e08b1a; }

/* Pagamenti: il riquadro del prototipo. La riga del saldo e' scritta
   qui; acconto e rate sono i nodi della v1. */
.v2-riep .vd-paybox {
    background: #f7f8fb; border-radius: 10px; padding: 11px 13px;
    margin: 12px 18px 0; border: 0;
}
.v2-riep .vd-paybox-row {
    font-size: 13.4px; background: none; border: 0; border-radius: 0;
    padding: 0; margin: 0; display: flex; justify-content: space-between; gap: 10px;
}
.v2-riep .vd-paybox-row > span { color: #4a4a4a; font-weight: 600; }
.v2-riep .vd-paybox-row > strong { color: #e08b1a; }
.v2-riep .v2-paybox-saldo { margin-top: 5px; }
.v2-riep .v2-paybox-saldo > strong { color: #4a4a4a; }
.v2-riep .vd-paybox-rate { font-size: 12.4px; color: #8a8a8a; margin-top: 5px; }

/* Il piede: «Prenota» pieno, sotto «Salva preventivo» (contorno navy,
   prende lo spazio) e il telefono in un quadrato da 48. Sticky al fondo
   dello scroll del foglio: nel prototipo il corpo scorre e il piede no. */
.v2-riep-piede {
    position: sticky; bottom: 0; z-index: 2;
    align-self: stretch; flex: 0 0 auto; margin-top: auto;
    background: #fff; border-top: 1px solid #ececf1;
    padding: 12px 16px 16px;
}
.v2-riep .vd-cta { margin: 0; }
.v2-riep .vd-side-duo,
.v2-riep .vd-ms-actions { display: flex; gap: 9.6px; align-items: stretch; margin: 9px 0 0; padding: 0; }
.v2-riep .vd-ms-actions > * { margin: 0; }
.v2-salva {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; background: #fff; color: #1e3c72;
    border: 1.5px solid #1e3c72; border-radius: 12px;
    font-size: 14.4px; font-weight: 700; text-decoration: none;
    font-family: inherit; cursor: pointer; padding: 0 12px;
}
.v2-salva .bi { display: none; }   /* il prototipo non ha l'icona della busta */
.v2-riep .v2-tel {
    flex: 0 0 48px; width: 48px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: #1e3c72; color: #fff;
    font-size: 0;          /* il testo «Chiama» resta per gli screen reader nell'aria-label */
    padding: 0;
}
.v2-riep .v2-tel .bi { font-size: 18px; }

/* «Invia a un amico» (owner 05/09): nel riepilogo v2 restava vestito da
   sorella della v1 — largo quanto TUTTA la card, 42px di altezza, incollato
   al tasto «Cosa comprende la quota» sopra. Qui prende le misure di
   «Prenota» (rientro 16px come il piede, 48px di altezza, corpo 1rem) e
   uno stacco sopra e sotto. Si cerca come FIGLIO DIRETTO della card, la
   posizione in cui la v1 lo lascia sia nella gemella desktop sia nel
   clone del foglio mobile. */
.v2-riep > .of-share-btn--side {
    width: auto;
    margin: 12px 16px 14px;
    min-height: 48px;
    padding: 0 24px;
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   BREAKPOINT
   Il resto del file e' mobile-first: sotto i 768px vale cosi' com'e'.
   I due scaglioni qui sotto seguono i breakpoint del progetto (576 /
   768 / 992) e le misure vengono dagli artboard desktop del design
   (`ai-workspace/dc-viaggi/DesktopRicerca.dc.html`), non da stime.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ≥768px: c'e' spazio per la riga unica ────────────────────────────
   Su mobile il primo segmento prende tutta la riga perche' «ven 16 ott →
   ven 23 ott» piu' scalo e persone non ci stanno. Da qui in su ci stanno,
   e il design li vuole in fila con i separatori — che sono gia' quelli
   della v1 (`.vd-bar-seg + .vd-bar-seg { border-left }`), quindi qui si
   smette di sopprimerli invece di ridisegnarli. */
@media (min-width: 768px) {
    .v2-sel__bar { align-items: center; }
    .v2-sum { display: flex; flex-wrap: nowrap; font-size: 14.4px; row-gap: 0; column-gap: 0; }
    .v2-sum > .vd-bar-seg { display: inline-flex; }
    .v2-sum > .vd-bar-seg,
    .v2-sum > .vd-bar-seg:first-child {
        flex: 0 1 auto; padding: 0 .9rem; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .v2-sum > .vd-bar-seg:first-child { padding-left: 0; flex: 0 0 auto; }
    .v2-sum > .vd-bar-seg + .vd-bar-seg { border-left: 1px solid #e3e8f0; }
    /* Le caselle crescono con la colonna: a 63px di larghezza una casella
       alta 48 sembrava schiacciata. */
    .v2-cal__g, .v2-cal__vuoto { height: 54px; }
    .v2-cal__g b { font-size: 15.2px; }
    .v2-cal__g i { font-size: 10.6px; }
}

/* ── ≥992px: desktop ─────────────────────────────────────────────────
   Misure dell'artboard: corpo 15.2px, padding 13.6/17.6, il «Modifica»
   a pillola in coda.

   Il tasto sta al BORDO DESTRO, non attaccato al testo: e' cosi' nella
   v1 (`#vdBarSummary` ha `flex: 1 1 0%`, misurato: sommario 1056px e
   tasto a 13px) ed e' cosi' nell'artboard (`flex: 1` sul sommario). Il
   vuoto in mezzo e' voluto in entrambi, quindi qui si usa lo stesso
   `flex: 1 1 auto` invece di inventare un allineamento diverso. */
@media (min-width: 992px) {
    .v2-sel { padding: 13.6px 17.6px; }
    .v2-sel__bar { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; gap: 12.8px; }
    .v2-sum { font-size: 15.2px; flex: 1 1 auto; }
    .v2-cal__g, .v2-cal__vuoto { height: 58px; }
    .v2-cal__mese { font-size: 16.4px; }
    .v2-cal__frec { width: 36px; height: 36px; flex: 0 0 36px; }
}

/* ── il puntatore fine ────────────────────────────────────────────────
   L'hover si dichiara per CAPACITA', non per larghezza: un tablet largo
   1024 non ha il passaggio del mouse, e uno stato :hover che resta
   incollato dopo il tocco e' peggio di nessun hover. */
@media (hover: hover) and (pointer: fine) {
    .v2-cal__g:hover { filter: brightness(.96); }
    .v2-cal__g.is-scelto:hover { filter: none; }
    .v2-incl-btn:hover { border-color: #2e7d32; }
}

/* L'avviso della camera fuori tetto, quando «Fatto» non puo' applicare. */
.v2-avviso-forte {
    background: #fdf1dc; border-radius: 10px; padding: 9px 12px;
    color: #9a5b00 !important; font-weight: 600;
}

/* «Modifica la divisione» sotto le camere: dal 02/09 la divisione si fa nel
   pannello, in «Persone / Camere», quindi qui e' una seconda porta per la
   stessa cosa. Si NASCONDE, non si toglie dal DOM: lo strato v2 lo preme
   come ripiego se `window.vdSplit` non c'e'. */
.vd-split-edit { display: none !important; }

/* Il tasto del dock si nasconde davvero: `.vd-dock-cta` porta un `display`
   suo, che vincerebbe sull'attributo `hidden`. */
.vd-dock-cta[hidden] { display: none !important; }
.vd-split-note[hidden] { display: none !important; }

/* ── card della camera a tre righe (owner 02/09) ──────────────────────
   Titolo a tutta larghezza, nome camera a capo, e in fondo i chip a
   sinistra col prezzo a destra. Il pallino resta nella sua colonna. */
.v2-room--righe .vd-room-main { min-width: 0; flex: 1; }
.v2-room--righe .vd-room-name--who { display: block; width: 100%; }
.v2-room--righe .vd-room-sub--name { display: block; width: 100%; }
.v2-room--righe .v2-room-foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
    margin-top: 7px; width: 100%;
}
/* Il prezzo si stacca a destra e cresce: nella riga in fondo condivide lo
   spazio con due chip piccoli, quindi 1.5rem non bastava piu' a farne la
   cosa che si legge per prima. */
.v2-room--righe .v2-room-foot .vd-room-price {
    margin-left: auto; white-space: nowrap; font-size: 1.75rem;
}
@media (min-width: 768px) {
    .v2-room--righe .v2-room-foot .vd-room-price { font-size: 1.9rem; }
}
/* Il trattamento sta sulla riga della camera, subito dopo il nome, senza
   evidenziazione (owner 30/09): testo semplice, separato da un punto. */
.v2-room--righe .vd-room-sub--name .vd-room-pill--board {
    display: inline; margin-left: 0; padding: 0; background: none;
    border-radius: 0; color: inherit; font: inherit;
    text-transform: inherit; letter-spacing: inherit; vertical-align: baseline;
}
.v2-room--righe .vd-room-sub--name .vd-room-pill--board::before {
    content: "\00b7"; margin: 0 .4em;
}

/* Scelta del trattamento: nome piu' piccolo, prezzo piu' grande, sulla
   stessa riga anche su mobile (owner 30/09). */
.vd-rt-plan { flex-direction: row !important; align-items: center !important; gap: .5rem; }
.vd-rt-plan-name { font-size: .85rem; min-width: 0; }
.vd-rt-plan-price { font-size: 1.15rem; flex: 0 0 auto; }

/* «Invia a un amico» + cuore: stessa misura e stesso rientro dei tasti del
   piede (16px di margine, 44px di altezza, cuore quadrato come il
   telefono), stesso passo verticale. */
.v2-riep .vd-share-row {
    gap: 9.6px; margin: 12px 16px 12px; padding: 0;
}
.v2-riep .vd-share-row .of-share-btn { min-height: 44px; margin: 0; }
.v2-riep .vd-share-row .hd-wishlist-heart--inline {
    flex: 0 0 48px; width: 48px; min-height: 44px; margin: 0;
}