/* ============================================================
   TOKEN — ricostruiti a mano per essere identici all'anteprima
   ============================================================ */
:root{
  --surface-2: rgba(255, 255, 255, 0.15); /* Glass molto trasparente (clear) */
  --surface-1: rgba(0, 0, 0, 0.02);
  --surface-0: rgba(0, 0, 0, 0.06);

  --text-primary: #1a1a18;
  --text-secondary: rgba(26,26,24,0.7);
  --text-muted: rgba(26,26,24,0.5);
  --text-on-dark: #f5f4f2; /* testo chiaro PIENO su superfici scure (pill, bottoni, toast) */

  --border: rgba(255, 255, 255, 0.3); /* Bordo riflettente ma discreto */
  --border-strong: rgba(255, 255, 255, 0.5);
  --border-stronger: rgba(255, 255, 255, 0.8);

  --bg-accent: rgba(23,84,158, 0.1);
  --text-accent: #17549e;
  --border-accent: rgba(23,84,158, 0.2);

  --bg-success: rgba(59,109,17, 0.1);
  --text-success: #3b6d11;
  --bg-warning: rgba(133,79,11, 0.1);
  --text-warning: #854f0b;
  --bg-danger: rgba(163,45,45, 0.1);
  --text-danger: #a32d2d;
  --bg-purple: rgba(75,65,173, 0.1);
  --text-purple: #4b41ad;
  --bg-teal: rgba(15,110,86, 0.1);
  --text-teal: #0f6e56;

  --radius: 16px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --nav-h: calc(58px + env(safe-area-inset-bottom));
}

/* Regole globali Glassmorphism */
.card, .banner, .datecard, .bigl, .daycard .mini, .sheet, .dwrap, .countdown, .pill, .act .only, .riga .only {
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border) !important;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background-color: #ffffff;
  background-image: none;
  color:var(--text-primary);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  overflow-x:hidden;
}
/* iOS colora di azzurro il testo dei bottoni senza sfondo, come fossero link.
   Azzeriamo l'aspetto nativo e imponiamo il colore: chi vuole altro lo dichiara. */
button{
  font-family:inherit;cursor:pointer;
  color:var(--text-primary);
  -webkit-text-fill-color:currentColor;
  -webkit-appearance:none;appearance:none;
}
a{color:inherit;text-decoration:none;-webkit-text-fill-color:currentColor}

/* ---------- struttura ---------- */
#app{
  max-width:520px;
  margin:0 auto;
  padding:0 20px;
  padding-top:calc(70px + env(safe-area-inset-top));
  padding-bottom:calc(var(--nav-h) + 24px);
  min-height:100vh;
  overflow-x:hidden;
}
.screen{animation:none}
/* Animazione rimossa per evitare il delay del backdrop-filter (blur) su iOS */
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

/* ---------- la barra fissa in alto ---------- */
#top{
  position:fixed;left:0;right:0;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:.5px solid var(--border);
  padding:12px 0;
  padding-top:calc(12px + env(safe-area-inset-top));
}
.top-in{
  max-width:520px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:9px;
}
#top .mark{width:22px;height:22px;flex-shrink:0;fill:var(--text-accent)}
#top-testo{
  flex:1;min-width:0;font-size:10px;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#top-dot{
  width:7px;height:7px;flex-shrink:0;border-radius:50%;
  background:var(--text-success);transition:background .3s ease;
}
#top-dot.off{background:var(--text-muted)}

/* ---------- la filigrana dietro il saluto ----------
   Sborda dall'angolo in alto a destra, come nella prima versione: una parte
   resta fuori dallo schermo, ed è voluto. Niente overflow:hidden, altrimenti
   ruotando si vedrebbe tranciata da un bordo dritto che non esiste. */
.testata{
  position:relative;overflow:visible;
  margin:0 -20px;padding:0 20px 2px;
}
.testata > *{position:relative}
.filigrana{
  position:absolute;top:-52px;right:-62px;width:210px;height:210px;
  fill:var(--text-accent);fill-opacity:.07;pointer-events:none;
  transform-origin:center;
  will-change:transform;
  /* Pendolo: oscilla fra +25° e -25°, decelerando verso ogni estremo.
     Periodo 24s = 6s per ogni quarto (dal centro all'estremo). Col ritardo
     negativo di -6s l'animazione parte dal centro (0°) andando in senso
     orario, come richiesto; poi swinga 50° avanti e indietro all'infinito. */
  animation:oscilla-filigrana 24s cubic-bezier(.3,0,.7,1) infinite;
  animation-delay:-6s;
  animation-play-state:var(--stato-rotazione, running);
}
@keyframes oscilla-filigrana{
  0%  {transform:rotate(-25deg)}
  50% {transform:rotate(25deg)}
  100%{transform:rotate(-25deg)}
}
@media (prefers-reduced-motion:reduce){
  .filigrana{animation:none}
}

/* ---------- il saluto ---------- */
h1.greet{margin:0;font-size:26px;font-weight:600;letter-spacing:-.4px;color:var(--text-primary)}
p.sub{margin:3px 0 0;font-size:14px;color:var(--text-secondary)}

/* ---------- riga data ---------- */
.dayrow{display:flex;align-items:center;gap:14px;padding:18px 0 14px}
.datecard{
  width:64px;height:64px;flex-shrink:0;border-radius:16px;background:var(--bg-accent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-accent);
}
.datecard .dow{font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
.datecard .num{font-size:25px;font-weight:600;line-height:1.15}
.datecard .mon{font-size:11px}
.dayinfo{flex:1;min-width:0}
.dayinfo .title{margin:0;font-size:15px;font-weight:600}
.dayinfo .route{margin:3px 0 8px;font-size:13px;color:var(--text-secondary)}
.progress{display:flex;gap:3px}
.progress span{height:3px;flex:1;border-radius:2px;background:var(--border-strong)}
.progress span.on{background:var(--text-accent)}

/* ---------- banner ---------- */
.banner{
  display:block;width:100%;text-align:left;border:0;margin:6px 0 20px;
  border-radius:16px;padding:15px;background:var(--bg-accent);color:var(--text-accent);
  transition:transform .12s ease;
}
.banner:active{transform:scale(.985)}
.banner.t-traghetto{background:var(--bg-teal);color:var(--text-teal)}
.banner.t-auto{background:var(--bg-purple);color:var(--text-purple)}
.banner.t-hotel{background:var(--bg-warning);color:var(--text-warning)}
.banner.t-avviso{background:var(--bg-danger);color:var(--text-danger)}
.banner.t-prenotazione{background:var(--bg-success);color:var(--text-success)}
.banner .bhead{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.banner .bhead i{font-size:19px}
.banner .blabel{font-size:12px;letter-spacing:1.8px;font-weight:600}
.banner .bmeta{margin-left:auto;font-size:11px}
.banner .brow{display:flex;align-items:center;gap:12px}
.banner .code{margin:0;font-size:24px;font-weight:600;letter-spacing:.5px}
.banner .time{margin:1px 0 0;font-size:13px}
.banner .mid{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.banner .dur{font-size:10px;letter-spacing:.5px}
.banner .line{width:100%;display:flex;align-items:center;gap:3px}
.banner .line .o{width:5px;height:5px;border-radius:50%;border:1px solid currentColor}
.banner .line .fin{width:5px;height:5px;border-radius:50%;background:currentColor}
.banner .line .d{flex:1;border-top:1px dashed currentColor;opacity:.5}
.banner .line i{font-size:15px}
.banner .bfoot{
  margin-top:14px;padding-top:11px;border-top:.5px solid currentColor;
  display:flex;align-items:center;justify-content:space-between;font-size:12px;
}
.banner .bfoot .go{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.banner .btext{margin:0;font-size:14px;line-height:1.45}

.sechead{margin:0 0 14px;font-size:11px;letter-spacing:1.6px;color:var(--text-muted);text-transform:uppercase}

/* ---------- card generiche ---------- */
.card{
  display:block;width:100%;text-align:left;background:var(--surface-2);color:var(--text-primary);
  border:.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;
}
.card.tap{transition:transform .12s ease}
.card.tap:active{transform:scale(.99)}
.card .ct{margin:0;font-size:15px;font-weight:600;color:var(--text-primary)}
.card .cs{margin:3px 0 0;font-size:13px;color:var(--text-secondary)}
.card .cx{margin:8px 0 0;font-size:12px;color:var(--text-muted)}
.daycard{display:flex;align-items:center;gap:14px}
.daycard .mini{
  width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--surface-0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
}
.daycard .mini .n{font-size:17px;font-weight:600}
.daycard .mini .m{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.daycard.today .mini{background:var(--bg-accent);color:var(--text-accent)}
.daycard.today .mini .m{color:var(--text-accent)}
.daycard.past{opacity:.5}

.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 9px;border-radius:20px;
  background:var(--surface-0);color:var(--text-secondary);
}
.pill i{font-size:13px}

/* ---------- Viaggio: le giornate a fisarmonica ---------- */
.dwrap{
  background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;
  margin-bottom:10px;overflow:hidden;
}
.dhead{
  display:flex;align-items:center;gap:14px;width:100%;padding:14px;
  background:none;border:0;text-align:left;color:var(--text-primary);
}
.dhead:active{background:var(--surface-1)}
.dhead .mini{
  width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--surface-0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
  color:var(--text-primary);
}
.dhead .mini .n{font-size:17px;font-weight:600;color:inherit}
.dhead .mini .m{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.dwrap.today .mini{background:var(--bg-accent);color:var(--text-accent)}
.dwrap.today .mini .m{color:var(--text-accent)}
.dwrap.past .dhead{opacity:.55}
.dhead .info{flex:1;min-width:0}
.dhead .info .t{margin:0;font-size:15px;font-weight:600;color:var(--text-primary)}
.dhead .info .s{margin:3px 0 0;font-size:13px;color:var(--text-secondary)}
.chev{flex-shrink:0;font-size:18px;color:var(--text-muted);transition:transform .25s ease}
.dwrap.open .chev{transform:rotate(90deg)}

.dpane{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.22,1,.36,1)}
.dpane .inner{border-top:.5px solid var(--border);padding:6px 0}
@media (prefers-reduced-motion:reduce){.dpane,.chev{transition:none}}

.act{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;
  background:none;border:0;text-align:left;
}
.act:active{background:var(--surface-1)}
.act .h{width:40px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--text-secondary)}
.act .ic{
  width:32px;height:32px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.act .ic i{font-size:17px}
.act .txt{flex:1;min-width:0}
.act .tt{display:block;font-size:14px;color:var(--text-primary);line-height:1.35}
.act .ad{display:block;font-size:12px;color:var(--text-secondary);line-height:1.35}
.act .go{flex-shrink:0;font-size:16px;color:var(--text-muted)}
.act .only{
  display:inline-block;margin-top:4px;font-size:11px;padding:2px 8px;border-radius:20px;
  background:var(--surface-0);color:var(--text-secondary);
}
.vuoto{padding:14px;font-size:13px;color:var(--text-muted);text-align:center}

/* ---------- Oggi: la giornata in corso ---------- */
.oggi{margin:0 -4px}
.riga{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;
  padding:11px 4px 11px 18px;background:none;border:0;text-align:left;
  color:var(--text-primary);
}
.riga:active{background:var(--surface-1);border-radius:10px}
.riga .h{width:42px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--text-secondary)}
.riga .ic{
  width:32px;height:32px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.riga .ic i{font-size:17px}
.riga .txt{flex:1;min-width:0}
.riga .tt{display:block;font-size:14px;color:var(--text-primary);line-height:1.35}
.riga .ad{display:block;font-size:12px;color:var(--text-secondary);line-height:1.35}
.riga .go{flex-shrink:0;font-size:16px;color:var(--text-muted)}
.riga .only{
  display:inline-block;margin-top:4px;font-size:11px;padding:2px 8px;border-radius:20px;
  background:var(--surface-0);color:var(--text-secondary);
}

/* quello che è già successo resta lì, ma si fa da parte */
.riga.passata{opacity:.42}

/* quello che sta succedendo adesso: pallino nel margine, così gli orari
   restano incolonnati al pixel, e nome e orario un po' più marcati */
.riga.adesso .tt{font-weight:600}
.riga.adesso .h{color:var(--text-primary)}
.blip{
  position:absolute;left:0;top:50%;margin-top:-4px;
  width:8px;height:8px;border-radius:50%;
  animation:blip 1.6s ease-in-out infinite;
}
@keyframes blip{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.72)}
}
@media (prefers-reduced-motion:reduce){.blip{animation:none}}

/* il pallino prende il colore dell'attività: viola per l'auto, rosso per la cena */
.blip.tp-generico{background:var(--text-secondary)}
.blip.tp-special{background:#b07908}
.blip.tp-ristorante{background:#a32d2d}
.blip.tp-alloggio{background:#17549e}
.blip.tp-volo{background:#1b7fa8}
.blip.tp-auto{background:#4b41ad}
.blip.tp-traghetto{background:#0f6e56}

/* i sette tipi di attività */
.tp-generico{background:var(--surface-0)}   .tp-generico i{color:var(--text-secondary)}
.tp-special{background:#faeeda}             .tp-special i{color:#b07908}
.tp-ristorante{background:#fbe9e9}          .tp-ristorante i{color:#a32d2d}
.tp-alloggio{background:#d8e7f9}            .tp-alloggio i{color:#17549e}
.tp-volo{background:#e4f2fa}                .tp-volo i{color:#1b7fa8}
.tp-auto{background:#ebe8fa}                .tp-auto i{color:#4b41ad}
.tp-traghetto{background:#dcf2ea}           .tp-traghetto i{color:#0f6e56}

/* ---------- Documenti: i biglietti in griglia ---------- */
.biglietti{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.bigl{
  display:flex;flex-direction:column;text-align:left;
  border:0;border-radius:16px;padding:13px;
  background:var(--bg-accent);color:var(--text-accent);
  -webkit-text-fill-color:currentColor;
  transition:transform .12s ease;
}
.bigl:active{transform:scale(.985)}
.bigl.nave{background:var(--bg-teal);color:var(--text-teal)}

.bigl .riga1{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bigl .riga1 i{font-size:20px}
.bigl .riga1 i.freccia{font-size:16px;opacity:.55}

.bigl .rotta{font-size:17px;font-weight:600;letter-spacing:.5px;line-height:1.2}
.bigl .citta{
  font-size:11px;margin-top:2px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bigl .sep{display:block;height:1px;background:currentColor;opacity:.22;margin:11px 0}
.bigl .data{font-size:12px;font-weight:600}
.bigl .orari{font-size:12px;margin-top:2px}
.bigl .posto{
  align-self:flex-start;margin-top:10px;
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;
  background:var(--surface-2);
}
.bigl .posto.vuoto{font-weight:400;opacity:.72}

/* le prenotazioni: card in fila, con l'icona del tipo */
.card.doc{display:flex;align-items:center;gap:12px}
.card.doc .ic{
  width:32px;height:32px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.card.doc .ic i{font-size:17px}

/* ---------- empty ---------- */
.empty{text-align:center;padding:48px 20px;color:var(--text-muted)}
.empty i{font-size:32px;display:block;margin-bottom:12px;opacity:.5}
.empty p{margin:0;font-size:14px}

/* ---------- countdown ---------- */
.countdown{
  border-radius:16px;background:var(--surface-0);padding:24px;text-align:center;margin:6px 0 20px;
}
.countdown .n{margin:0;font-size:44px;font-weight:600;letter-spacing:-1px;line-height:1}
.countdown .l{margin:6px 0 0;font-size:13px;color:var(--text-secondary)}

/* ---------- overlay biglietto ---------- */
.sheet{
  position:fixed;inset:0;z-index:60;background:var(--surface-2);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:calc(16px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom));
  animation:up .3s cubic-bezier(.22,1,.36,1);
  transition:transform .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
/* quando se ne va: scivola giù (o a destra, se chiuso con swipe orizzontale) */
.sheet.via{transform:translateY(100%);opacity:0}
.sheet.via-dx{transform:translateX(100%);opacity:0}
@keyframes up{from{transform:translateY(3%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none;transition:none}}
.sheet-inner{max-width:520px;margin:0 auto}
.sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.sheet-top button{background:none;border:0;padding:4px;color:var(--text-secondary);font-size:22px;line-height:1}

.pass{border:.5px solid var(--border);border-radius:16px;overflow:hidden}
.pass-top{padding:16px;background:var(--bg-accent);color:var(--text-accent)}
.pass.t-traghetto .pass-top{background:var(--bg-teal);color:var(--text-teal)}
.pass-top .r1{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:12px}
.pass-top .r1 .n{letter-spacing:1.4px;font-weight:600}
.pass-top .r2{display:flex;align-items:flex-end;justify-content:space-between}
.pass-top .r2 .big{margin:0;font-size:32px;font-weight:600;letter-spacing:1px;line-height:1}
.pass-top .r2 .sm{margin:5px 0 0;font-size:12px}
.pass-top .r2 i{font-size:20px;padding-bottom:12px}
.perf{position:relative;height:1px;background:var(--surface-2)}
.perf .l,.perf .r{position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--surface-1)}
.perf .l{left:-8px}.perf .r{right:-8px}
.perf .d{position:absolute;left:14px;right:14px;top:0;border-top:1px dashed var(--border-strong)}
.pass-body{padding:18px 16px 16px}
.lab{margin:0 0 3px;font-size:11px;letter-spacing:1.2px;color:var(--text-muted);text-transform:uppercase}
.val{margin:0;font-size:17px;font-weight:600}
.pax{margin:0 0 18px;font-size:19px;font-weight:600}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.passfoot{margin-top:18px;padding-top:14px;border-top:.5px solid var(--border);display:flex;justify-content:space-between}
.passfoot .val{font-size:14px;font-weight:400}
.mono{font-family:var(--font-mono)}
.offnote{margin:20px 0 0;text-align:center;font-size:12px;color:var(--text-muted)}
.offnote i{font-size:14px;vertical-align:-2px;margin-right:4px}

/* il bottone del Wallet: nero, come lo vuole Apple */
.wallet{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding:14px;border-radius:12px;
  background:#000;color:#fff;font-size:15px;font-weight:500;
  -webkit-text-fill-color:#fff;
  transition:transform .12s ease;
}
.wallet:active{transform:scale(.985)}
.wallet i{font-size:19px}

/* ---------- menu in basso ---------- */
#nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:.5px solid var(--border);
  display:flex;
  padding:9px 0 calc(9px + env(safe-area-inset-bottom));
}
#nav button{
  flex:1;background:none;border:0;padding:0;color:var(--text-muted);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
#nav button i{font-size:21px}
#nav button span{font-size:11px}
#nav button.on{color:var(--text-accent)}
#nav button.on span{font-weight:600}

/* ============================================================
   PANNELLO HOST
   ============================================================ */
#app.host{
  max-width:640px;overflow-x:hidden;
  padding-top:calc(20px + env(safe-area-inset-top));
  padding-bottom:40px;
}
.h-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.h-top h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.3px}

/* le schede restano appiccicate in alto mentre scorri i moduli lunghi */
.h-tabs{
  position:sticky;top:0;z-index:10;
  display:flex;gap:6px;overflow-x:auto;
  margin:0 -20px 18px;padding:10px 20px 12px;
  background:var(--surface-2);
  border-bottom:.5px solid var(--border);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.h-tabs::-webkit-scrollbar{display:none}
.h-tabs button{
  flex-shrink:0;background:var(--surface-0);border:0;border-radius:20px;
  padding:8px 15px;font-size:14px;color:var(--text-secondary);white-space:nowrap;
}
.h-tabs button.on{background:var(--text-primary);color:var(--text-on-dark);font-weight:500}

.h-card{
  background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;
  padding:16px;margin-bottom:12px;overflow:hidden;
}
.h-card h3{margin:0 0 2px;font-size:15px;font-weight:600}
.h-card .h-sub{margin:0 0 14px;font-size:12px;color:var(--text-muted)}
.h-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}

.f{margin-bottom:12px;min-width:0}
.f label{
  display:block;font-size:10px;letter-spacing:.7px;line-height:1.4;
  color:var(--text-muted);text-transform:uppercase;margin-bottom:5px;
}
.f input,.f select,.f textarea{
  display:block;width:100%;min-width:0;max-width:100%;
  font-family:inherit;font-size:16px;color:var(--text-primary);
  background:var(--surface-1);border:.5px solid var(--border);border-radius:var(--radius);
  padding:10px 11px;outline:none;
}
/* iOS dà agli input di data una larghezza minima enorme: la annulliamo */
.f input[type=datetime-local],.f input[type=date],.f input[type=time]{
  -webkit-appearance:none;appearance:none;text-align:left;
}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--text-accent);background:var(--surface-2)}
.f textarea{resize:vertical;min-height:64px}

/* minmax(0,...) è ciò che impedisce alle colonne di gonfiarsi oltre la card */
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.f3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:420px){.f3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- Host: le giornate a fisarmonica ---------- */
.hchev{flex-shrink:0;font-size:17px;color:var(--text-muted);transition:transform .22s ease}
.on .hchev{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.hchev{transition:none}}

.gwrap{
  background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;
  margin-bottom:10px;overflow:hidden;
}
.ghead{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;
  background:none;border:0;text-align:left;color:var(--text-primary);
}
.ghead:active{background:var(--surface-1)}
.ghead .mini{
  width:42px;height:42px;flex-shrink:0;border-radius:11px;background:var(--surface-0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
}
.ghead .mini .n{font-size:16px;font-weight:600}
.ghead .mini .m{font-size:9px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.ghead .info{flex:1;min-width:0}
.ghead .info .t{display:block;font-size:14px;font-weight:600;line-height:1.35}
.ghead .info .s{display:block;font-size:12px;color:var(--text-muted)}
.gbody{border-top:.5px solid var(--border);padding:14px}

/* ---------- Host: le attività a fisarmonica, dentro la giornata ---------- */
.awrap{border:.5px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.ahead{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  background:none;border:0;text-align:left;color:var(--text-primary);
}
.ahead:active{background:var(--surface-1)}
.ahead .h{width:38px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--text-secondary)}
.ahead .ic{
  width:28px;height:28px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.ahead .ic i{font-size:15px}
.ahead .nm{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abody{border-top:.5px solid var(--border);padding:12px;background:var(--surface-1)}
.abody .f input,.abody .f select{background:var(--surface-2)}
.eyeb{margin:0 0 10px;font-size:10px;letter-spacing:1.2px;color:var(--text-muted);text-transform:uppercase}

/* ---------- Host: la fisarmonica generica (tratte, banner, biglietti, documenti) ---------- */
.hwrap{
  background:var(--surface-2);border:.5px solid var(--border);border-radius:10px;
  margin-bottom:8px;overflow:hidden;
}
.hhead{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;
  background:none;border:0;text-align:left;color:var(--text-primary);
}
.hhead:active{background:var(--surface-1)}
.hhead .ic{
  width:28px;height:28px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.hhead .ic i{font-size:15px}
.hhead .txt{flex:1;min-width:0}
.hhead .tt{display:block;font-size:13px;font-weight:600;line-height:1.35}
.hhead .st{
  display:block;font-size:11px;color:var(--text-muted);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hbody{border-top:.5px solid var(--border);padding:12px;background:var(--surface-1)}
.hbody .f input,.hbody .f select,.hbody .f textarea{background:var(--surface-2)}

/* l'interruttore vive sulla riga chiusa: spegnere un banner deve costare un tocco solo */
.switch.mini{width:38px;height:22px}
.switch.mini .kn{width:16px;height:16px}
.switch.mini input:checked ~ .kn{transform:translateX(16px)}

/* le righe dei posti: nome a sinistra, posto e codice a destra */
.prow{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:.5px solid var(--border)}
.prow .nm{flex:1;min-width:0;font-size:13px;font-weight:500}
.prow input{
  font-family:inherit;font-size:15px;color:var(--text-primary);
  background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--radius);
  padding:7px 9px;outline:none;min-width:0;
}
.prow input:focus{border-color:var(--text-accent)}
.prow .posto{width:62px;text-align:center;flex-shrink:0}
.prow .cod{width:96px;flex-shrink:0}
.btn{
  background:var(--text-primary);color:var(--text-on-dark);border:0;border-radius:var(--radius);
  padding:10px 16px;font-size:14px;font-weight:500;
}
.btn:active{opacity:.85}
.btn.ghost{background:var(--surface-0);color:var(--text-primary)}
.btn.danger{background:var(--bg-danger);color:var(--text-danger)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5}
.switch{position:relative;width:44px;height:26px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;z-index:2}
.switch .tr{position:absolute;inset:0;border-radius:20px;background:var(--border-strong);transition:background .2s}
.switch .kn{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked ~ .tr{background:var(--text-success)}
.switch input:checked ~ .kn{transform:translateX(18px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface-0);
  border:0;border-radius:20px;padding:6px 12px;font-size:13px;
  color:var(--text-primary);text-align:left;
}
button.chip{cursor:pointer}
button.chip:active{background:var(--border-strong)}
.chip input{margin:0}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);z-index:90;
  background:var(--text-primary);color:var(--text-on-dark);font-size:13px;
  padding:10px 18px;border-radius:24px;transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.toast.show{transform:translate(-50%,0)}
.login{max-width:340px;margin:15vh auto 0}
.login h1{margin:0 0 6px;font-size:24px;font-weight:600}
.login p{margin:0 0 24px;font-size:14px;color:var(--text-secondary)}
.err{margin:10px 0 0;font-size:13px;color:var(--text-danger)}
.h-note{font-size:12px;color:var(--text-muted);margin:0 0 16px;line-height:1.6}

/* Helper per orari e modifiche nel pannello host */
.ora-help {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 5px;
  line-height: 1.4;
}
.ora-help.error {
  color: var(--text-danger);
  font-weight: 500;
}
.ora-help .ora-lbl {
  font-weight: 600;
  color: var(--text-primary);
}
input.modificato, select.modificato, textarea.modificato {
  border-color: var(--text-warning) !important;
  background-color: var(--bg-warning) !important;
}

/* ---------- tira giù per aggiornare ----------
   La barbabietola sta ferma dietro la barra in alto (z-index più basso del
   suo: 55 contro 60) e sbuca solo quando il dito la tira giù. Due elementi
   annidati apposta: il guscio pulsa, l'immagine dentro gira. Se girassero
   insieme sullo stesso transform una delle due animazioni vincerebbe. */
#ptr{
  position:fixed;left:50%;top:calc(46px + env(safe-area-inset-top));
  z-index:55;pointer-events:none;
  transform:translate(-50%, calc(var(--y, 0px) - 42px));
  opacity:0;transition:opacity .18s ease;
}
#ptr.visibile{opacity:1}
#ptr .ptr-p{display:block}
#ptr img{
  display:block;width:34px;height:34px;
  transform:rotate(var(--gira, 0deg));
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.24));
}
/* Lasciata andare: si assesta alla soglia con un piccolo scatto, e lì lavora. */
#ptr.carica{transition:opacity .18s ease, transform .28s cubic-bezier(.22,1,.36,1)}
#ptr.carica .ptr-p{animation:ptr-batti .75s ease-in-out infinite}
#ptr.carica img{animation:ptr-gira .9s linear infinite}
@keyframes ptr-gira{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes ptr-batti{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.16)} }
/* Chi preferisce meno movimento: gira piano e non pulsa. */
@media (prefers-reduced-motion:reduce){
  #ptr.carica img{animation-duration:2.2s}
  #ptr.carica .ptr-p{animation:none}
}

/* ============================================================
   MODALITÀ SCURA — attiva 19:30 → 07:00 (ora del dispositivo).
   Si accende con data-tema="scuro" sull'<html>: lo mette lo script inline
   nell'<head> (prima del primo paint, così niente lampo chiaro) e lo tiene
   aggiornato applicaTema() in data.js. Qui ridefiniamo solo i colori.
   ============================================================ */
:root[data-tema="scuro"]{
  color-scheme: dark;

  --surface-2: rgba(255,255,255,0.09);
  --surface-1: rgba(255,255,255,0.05);
  --surface-0: rgba(255,255,255,0.10);

  --text-primary: #f3f2ef;
  --text-secondary: rgba(243,242,239,0.72);
  --text-muted: rgba(243,242,239,0.46);
  --text-on-dark: #16151a;   /* i bottoni nel buio diventano chiari: testo scuro */

  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.20);
  --border-stronger: rgba(255,255,255,0.30);

  --bg-accent: rgba(122,167,224,0.16);  --text-accent: #8fb4e8;  --border-accent: rgba(122,167,224,0.28);
  --bg-success: rgba(143,202,95,0.16);  --text-success: #9ccf6a;
  --bg-warning: rgba(224,169,75,0.16);  --text-warning: #e0b060;
  --bg-danger:  rgba(224,128,128,0.16); --text-danger:  #e58a8a;
  --bg-purple:  rgba(154,144,224,0.16); --text-purple:  #a79ce8;
  --bg-teal:    rgba(79,192,165,0.16);  --text-teal:    #57c4a8;
}

/* Sfondo base e barre fisse: nel chiaro erano bianchi hardcoded */
:root[data-tema="scuro"] body{ background-color:#16151a; }
:root[data-tema="scuro"] #top{ background:rgba(22,21,26,.82); }
:root[data-tema="scuro"] #nav{ background:rgba(22,21,26,.92); }

/* Icone attività: nel chiaro sono pastelli fissi, qui tinte scure + icona chiara */
:root[data-tema="scuro"] .tp-special   { background:rgba(176,121,8,0.18); }
:root[data-tema="scuro"] .tp-special i  { color:#e0b060; }
:root[data-tema="scuro"] .tp-ristorante { background:rgba(163,45,45,0.18); }
:root[data-tema="scuro"] .tp-ristorante i{ color:#e58a8a; }
:root[data-tema="scuro"] .tp-alloggio   { background:rgba(23,84,158,0.22); }
:root[data-tema="scuro"] .tp-alloggio i { color:#8fb4e8; }
:root[data-tema="scuro"] .tp-volo       { background:rgba(27,127,168,0.20); }
:root[data-tema="scuro"] .tp-volo i     { color:#6cc6e6; }
:root[data-tema="scuro"] .tp-auto       { background:rgba(75,65,173,0.22); }
:root[data-tema="scuro"] .tp-auto i     { color:#a79ce8; }
:root[data-tema="scuro"] .tp-traghetto  { background:rgba(15,110,86,0.20); }
:root[data-tema="scuro"] .tp-traghetto i{ color:#57c4a8; }

/* Pallini che pulsano: schiariti per il buio */
:root[data-tema="scuro"] .blip.tp-special  { background:#e0b060; }
:root[data-tema="scuro"] .blip.tp-ristorante{ background:#e58a8a; }
:root[data-tema="scuro"] .blip.tp-alloggio { background:#8fb4e8; }
:root[data-tema="scuro"] .blip.tp-volo     { background:#6cc6e6; }
:root[data-tema="scuro"] .blip.tp-auto     { background:#a79ce8; }
:root[data-tema="scuro"] .blip.tp-traghetto{ background:#57c4a8; }

/* Il bottone Apple Wallet resta nero (convenzione): nel buio un bordo lo stacca */
:root[data-tema="scuro"] .wallet{ border:.5px solid rgba(255,255,255,0.18); }

/* Passaggio morbido chiaro↔scuro */
body, #top, #nav{ transition: background-color .4s ease; }

/* Video di benvenuto: a tutto schermo, sopra ogni cosa, su fondo nero.
   cover riempie tutto lo schermo edge-to-edge: se le proporzioni non
   combaciano (video 9:16, telefoni più allungati) ritaglia i bordi
   invece di lasciare bande nere. */
.intro{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}