/* =========================================================
   Hotel Aurelia — Design System
   Estetica: sartoriale e squadrata. Fondo bianco, un solo colore di marca
   (#001035), superfici piatte separate da filetti da 1px.
   ========================================================= */

:root{
  /* Colore */
  --ink:        #001035;   /* il blu del marchio è anche il colore del testo */
  --ink-2:      #3A4560;
  --muted:      #8A8F9C;
  --muted-2:    #B0B4BE;

  --bg:         #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F7F7F8;
  --surface-3:  #F1F1F3;
  --line:       #E3E3E6;
  --line-2:     #EDEDEF;

  --deep:       #001035;   /* blu del marchio */
  --deep-2:     #17264C;
  --accent:     #001035;   /* nessun oro: l'accento è il blu del marchio */
  --accent-2:   #AEB6C6;   /* variante chiara, sui fondi scuri */
  --accent-soft:#F0F1F5;

  /* Stati: nessun colore fuori sistema. Il positivo è il blu del marchio,
     l'attesa è un grigio, e resta un solo rosso per gli errori. */
  --ok:         #001035;
  --ok-soft:    #EFF1F6;
  --warn:       #6A6F7D;
  --warn-soft:  #F2F2F4;
  --err:        #9E3B33;
  --err-soft:   #F7EBE9;
  --info:       #001035;
  --info-soft:  #F0F1F5;

  /* Forma */
  /* Sistema squadrato: nessun raggio sugli elementi. */
  --r-xs: 0;
  --r-sm: 0;
  --r:    0;
  --r-lg: 0;
  --r-xl: 0;

  --sh-1: none;                                        /* le superfici si separano con una linea */
  --sh-2: 0 2px 8px rgba(18,24,40,.05), 0 18px 40px -24px rgba(18,24,40,.24);
  --sh-3: 0 -8px 36px -16px rgba(18,24,40,.26);

  /* Tipografia */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --tabbar-h: 86px;
  --appbar-h: 56px;
  --gutter: 20px;
  --maxw: 520px;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}

button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
svg.ic{ width:20px; height:20px; flex:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:2px;
  border-radius:0;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============ App shell ============ */

.app{
  min-height:100dvh;
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--bg);
  position:relative;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 0 1px var(--line);
}

@media (min-width:560px){
  body{ background:#EFEFF1; }
}

.view{
  flex:1;
  padding-bottom:calc(var(--tabbar-h) + var(--sab) + 12px);
  outline:none;
  animation:viewIn .28s cubic-bezier(.2,.7,.3,1);
}
.view.no-tabbar{ padding-bottom:calc(var(--sab) + 12px); }

@keyframes viewIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .view{ animation:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============ App bar ============ */

.appbar{
  position:sticky; top:0; z-index:40;
  padding-top:var(--sat);
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.appbar.scrolled{ border-bottom-color:var(--line); }
.appbar__inner{
  height:var(--appbar-h);
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:4px;
  padding:0 8px;
}
.appbar__title{
  font-family:var(--sans);
  font-size:16px; font-weight:600; letter-spacing:-.01em;
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.iconbtn{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:0;
  color:var(--ink);
  transition:background .15s;
  position:relative;
}
.iconbtn:active{ background:var(--surface-3); }
.iconbtn__dot{
  position:absolute; top:9px; right:9px;
  width:8px; height:8px; border-radius:0;
  background:var(--err); border:2px solid var(--bg);
}

/* ============ Tab bar ============ */

.tabbar{
  position:fixed; bottom:calc(12px + var(--sab)); left:50%; transform:translateX(-50%);
  width:calc(100% - 26px); max-width:calc(var(--maxw) - 26px);
  z-index:50;
  display:flex; gap:2px;
  padding:7px;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line);
  border-radius:999px;  /* stadio pieno */
  box-shadow:0 2px 10px rgba(18,24,40,.06), 0 20px 40px -24px rgba(18,24,40,.38);
}
.tab{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  min-height:52px;
  padding:6px 2px;
  color:var(--muted);
  border-radius:999px;
  position:relative;
  transition:color .18s, background .18s;
}
.tab__label{ font-size:10px; font-weight:600; letter-spacing:.005em; }
.tab svg{ width:22px; height:22px; }
.tab[aria-current="page"]{ background:var(--deep); color:#fff; }
.tab[aria-current="page"] .tab__label{ color:#fff; }
.tab__icon{ position:relative; display:block; }
.tab__badge{
  position:absolute; top:-5px; right:-9px;
  min-width:17px; height:17px; padding:0 5px;
  border-radius:0;
  background:var(--err); color:#fff;
  font-size:10px; font-weight:600; line-height:17px; text-align:center;
  border:2px solid #fff;
}

/* ============ Tipografia ============ */

.display{
  font-family:var(--sans);
  font-weight:700;
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.035em;
}
.display--sm{ font-size:24px; letter-spacing:-.03em; }
.h2{ font-size:19px; font-weight:700; letter-spacing:-.025em; }
.h2--label{
  font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink);
}
.h3{ font-size:15.5px; font-weight:600; letter-spacing:-.005em; }
.eyebrow{
  font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--muted{ color:var(--muted); }
.body{ font-size:14.5px; color:var(--ink-2); line-height:1.55; }
.small{ font-size:13px; color:var(--muted); line-height:1.5; }
.tiny{ font-size:11.5px; color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; }
.strike{ text-decoration:line-through; color:var(--muted); }

/* ============ Layout utility ============ */

.wrap{ padding-inline:var(--gutter); }
.stack > * + *{ margin-top:12px; }
.stack-lg > * + *{ margin-top:22px; }
.row{ display:flex; align-items:center; gap:10px; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grow{ flex:1; min-width:0; }
.center{ text-align:center; }
.mt{ margin-top:14px; } .mt-lg{ margin-top:26px; } .mt-sm{ margin-top:8px; }
.mb{ margin-bottom:14px; }
.hr{ height:1px; background:var(--line); border:0; margin:16px 0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.link{
  font-size:13px; font-weight:600; color:var(--accent);
  text-decoration:none; white-space:nowrap;
}
.link--underline{ text-decoration:underline; text-underline-offset:3px; }

/* ============ Card ============ */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
}
.card__pad{ padding:18px; }
.card--flat{ box-shadow:none; background:var(--surface-2); }
.card--tint{ background:var(--surface-2); border-color:var(--line); }
.card--deep{ background:var(--deep); color:#fff; border-color:transparent; }
.card--deep .body,.card--deep .small{ color:rgba(255,255,255,.72); }

.press{ transition:transform .12s ease, box-shadow .12s ease; }
.press:active{ transform:scale(.985); }

/* ============ Bottoni ============ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 22px;
  border-radius:0;
  font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em;
  transition:transform .12s, opacity .15s, background .15s;
  text-decoration:none;
  white-space:nowrap;
}
.btn:active{ transform:scale(.975); }
.btn--block{ display:flex; width:100%; }
.btn--primary{ background:var(--deep); color:#fff; }
.btn--accent{ background:var(--accent); color:#fff; }
/* inverso, per i fondi scuri */
.btn--invert{ background:#fff; color:var(--deep); }
.btn--light{ background:var(--surface); color:var(--ink); border:1px solid var(--ink); }
.btn--ghost{ background:var(--surface-3); color:var(--ink); }
.btn--ghost-light{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); }
.btn--danger{ background:var(--err-soft); color:var(--err); }
.btn--sm{ min-height:42px; padding:0 18px; font-size:12px; }
.btn--xs{
  min-height:34px; padding:0 13px; font-size:12.5px; border-radius:0;
  text-transform:none; letter-spacing:0; font-weight:600;
}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.42; pointer-events:none;
}
.btn svg{ width:18px; height:18px; flex:none; }

.btnbar{
  position:sticky; bottom:0;
  padding:14px var(--gutter) calc(14px + var(--sab));
  background:linear-gradient(to top, var(--bg) 62%, rgba(255,255,255,0));
  z-index:20;
}
.view:not(.no-tabbar) .btnbar{ bottom:calc(var(--tabbar-h) + var(--sab)); padding-bottom:14px; }

/* ============ Badge / pill ============ */

.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px;
  border-radius:0;
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  background:var(--surface-3); color:var(--ink-2);
  white-space:nowrap;
}
.badge--ok{ background:var(--ok-soft); color:var(--ok); }
.badge--warn{ background:var(--warn-soft); color:var(--warn); }
.badge--err{ background:var(--err-soft); color:var(--err); }
.badge--info{ background:var(--info-soft); color:var(--info); }
.badge--accent{ background:var(--accent-soft); color:var(--accent); }
.badge--ghost{ background:rgba(255,255,255,.16); color:#fff; }
.badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge--live .badge__dot{ animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ============ Chips ============ */

.chips{
  display:flex; gap:8px; overflow-x:auto;
  padding:2px var(--gutter) 6px;
  margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{ display:none; }
.chips--wrap{ flex-wrap:wrap; overflow:visible; margin:0; padding:0; }
.chip{
  flex:none;
  min-height:36px; padding:0 14px;
  display:inline-flex; align-items:center; gap:6px;
  border-radius:0;
  border:1px solid var(--line);
  background:var(--surface);
  font-size:11.5px; font-weight:600; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.08em;
  transition:all .15s;
}
.chip[aria-pressed="true"],.chip.is-active{
  background:var(--deep); border-color:var(--deep); color:#fff;
}
.chip[disabled]{ opacity:.35; pointer-events:none; text-decoration:line-through; }
.chip--stack{ flex-direction:column; gap:1px; min-height:56px; padding:8px 14px; line-height:1.15; }
.chip--stack b{ font-size:15px; font-weight:600; }
.chip--stack span{ font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; opacity:.62; }

/* ============ List rows ============ */

.list{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
}
/* a filo dello schermo, come le griglie di card */
.wrap > .list,
.wrap > .ctrls,
.wrap > .pgrid,
.sheet__body > .list{ margin-inline:calc(var(--gutter) * -1); }
.listrow{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:16px var(--gutter);
  text-align:left;
  border-bottom:1px solid var(--line);
  transition:background .15s;
}
.listrow:last-child{ border-bottom:0; }
.listrow:active{ background:var(--surface-2); }
.listrow__ico{
  width:42px; height:42px; flex:none;
  border-radius:0;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--deep);
}
.listrow__ico svg{ width:19px; height:19px; }
.listrow__ico--accent{ background:var(--accent-soft); color:var(--accent); }
.listrow__body{ flex:1; min-width:0; }
.listrow__title{
  display:inline-block; font-size:14px; font-weight:500; line-height:1.25;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.listrow__sub{
  display:block; margin-top:7px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.listrow__chev{ color:var(--muted-2); flex:none; }
.listrow__chev svg{ width:18px; height:18px; }

/* ============ Media / immagini ============ */

.media{
  position:relative;
  background:var(--surface-3);
  background-size:cover; background-position:center;
  overflow:hidden;
}
.media--16x9{ aspect-ratio:16/9; }
.media--4x3{ aspect-ratio:4/3; }
.media--1x1{ aspect-ratio:1/1; }
.media__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,26,24,.78) 0%, rgba(20,26,24,.12) 52%, rgba(20,26,24,0) 100%);
}
.media__cap{
  position:absolute; left:16px; right:16px; bottom:14px; color:#fff;
}

/* ============ Card di prodotto ============
   Impianto da vetrina: immagine a filo, griglia separata da linee,
   prezzo sopra il nome, etichetta in maiuscolo in fondo. */

.pgrid{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.pcard{ background:var(--surface); display:flex; flex-direction:column; }
.pcard__top{ position:relative; }
.pcard:nth-child(odd){ border-right:1px solid var(--line); }
.pcard:not(:nth-last-child(-n+2)){ border-bottom:1px solid var(--line); }

.pcard__media{
  position:relative; display:block; width:100%;
  aspect-ratio:4/5;
  background:#F1F1EF center/cover no-repeat;
}
.pcard__fav{
  position:absolute; top:8px; right:8px;
  width:34px; height:34px;
  display:grid; place-items:center;
  color:var(--ink);
}
.pcard__fav svg{ width:20px; height:20px; }
.pcard__fav.is-on svg{ fill:currentColor; }
.pcard__act{
  position:absolute; right:0; bottom:0;
  width:44px; height:44px;
  background:var(--deep); color:#fff;
  display:grid; place-items:center;
  transition:opacity .15s;
}
.pcard__act:active{ opacity:.85; }
.pcard__act svg{ width:19px; height:19px; }

.pcard__info{ padding:12px 12px 16px; text-align:left; }
.pcard__price{ display:block; font-size:16.5px; font-weight:700; letter-spacing:-.02em; }
.pcard__name{
  display:inline-block; margin-top:5px;
  font-size:13.5px; line-height:1.3; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.pcard__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pcard__tag{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.pcard__tag--ok{ color:var(--ok); }
.pcard__tag--warn{ color:var(--warn); }
.pcard__tag--err{ color:var(--err); }

/* ============ Tessere di navigazione ============
   Stessa costruzione delle card di prodotto — griglia a filo separata da
   linee — ma con icona al posto della fotografia. */

.ngrid{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.ngrid--1{ grid-template-columns:1fr; }
.ncard{
  display:flex; flex-direction:column; gap:14px;
  min-height:132px; padding:18px 14px 18px;
  text-align:left; background:var(--surface);
  transition:background .15s;
}
.ncard:active{ background:var(--surface-2); }
.ngrid:not(.ngrid--1) .ncard:nth-child(odd){ border-right:1px solid var(--line); }
.ngrid:not(.ngrid--1) .ncard:not(:nth-last-child(-n+2)){ border-bottom:1px solid var(--line); }
.ngrid--1 .ncard:not(:last-child){ border-bottom:1px solid var(--line); }
.ncard__ico{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--deep);
}
.ncard__ico svg{ width:20px; height:20px; }
.ncard__b{ margin-top:auto; }
.ncard__name{
  display:inline-block; font-size:14px; line-height:1.25; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.ncard__tag{
  display:block; margin-top:9px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.ncard[aria-disabled="true"]{ opacity:.5; }

/* variante orizzontale, per elenchi di due voci */
.ncard--row{ flex-direction:row; align-items:center; gap:14px; min-height:0; padding:16px 14px; }
.ncard--row .ncard__b{ margin-top:0; flex:1; }
.ncard--row .ncard__tag{ margin-top:4px; }

/* ============ Vecchie tessere (in via di dismissione) ============ */

.navtile{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:0;
  text-align:left;
  transition:transform .12s, border-color .15s;
}
.navtile:active{ transform:scale(.985); }
.navtile__ico{
  width:44px; height:44px; flex:none;
  border-radius:0;
  display:grid; place-items:center;
  background:var(--surface-3); color:var(--deep);
}
.navtile__ico svg{ width:21px; height:21px; }
.navtile__ico--dark{ background:var(--deep); color:#fff; }
.navtile__b{ flex:1; min-width:0; }
.navtile__t{ display:block; font-size:15px; font-weight:600; letter-spacing:-.02em; }
.navtile__s{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.35; }
.navtile__chev{ color:var(--muted-2); flex:none; }
.navtile[aria-disabled="true"]{ opacity:.55; box-shadow:none; }

/* variante a colonna, per griglie 2x2 */
.navgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.navgrid .navtile{
  flex-direction:column; align-items:flex-start; gap:12px;
  min-height:126px; padding:16px 15px;
}
.navgrid .navtile__chev{ display:none; }

/* ============ Bottone circolare sopra le foto ============ */

.circbtn{
  width:40px; height:40px; border-radius:0;
  display:inline-grid; place-items:center;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 10px rgba(20,26,24,.18);
  color:var(--ink);
  transition:transform .12s;
}
.circbtn:active{ transform:scale(.92); }
.circbtn svg{ width:19px; height:19px; }

/* Pillola informativa sopra una foto (prezzo, valutazione) */
.overpill{
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:0;
  background:rgba(255,255,255,.95);
  font-size:12.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink);
  box-shadow:0 2px 8px rgba(20,26,24,.14);
}
.overpill--tr{ top:12px; right:12px; }
.overpill--tl{ top:12px; left:12px; }
.overpill--dark{ background:var(--deep); color:#fff; }
.overpill svg{ width:14px; height:14px; color:var(--accent); }

/* Riga di servizi in un riquadro, come nelle schede immobiliari */
.amen{
  display:grid; grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line); border-radius:0;
  padding:15px 6px; gap:4px;
  background:var(--surface);
}
.amen__i{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.amen__i svg{ width:20px; height:20px; color:var(--deep); }
.amen__i span{ font-size:10.5px; color:var(--muted); font-weight:500; line-height:1.15; }

/* ============ Hero home ============ */

.hero{
  position:relative;
  min-height:360px;
  display:flex; align-items:flex-end;
  padding:calc(var(--sat) + 34px) var(--gutter) 34px;
  color:#fff;
  overflow:hidden;
  background:var(--deep);

}
.hero__bg{ position:absolute; inset:0; opacity:.9; background-size:cover; background-position:center; }
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(178deg, rgba(0,16,53,.24) 0%, rgba(0,16,53,.64) 44%, rgba(0,10,32,.94) 100%);
}
.hero__in{ position:relative; width:100%; }
.hero__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hero__hotel{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-2); font-weight:600;
}
.hero h1{
  font-family:var(--sans); font-weight:700;
  font-size:27px; line-height:1.15; margin-top:8px;
  letter-spacing:-.035em;
}
.hero__meta{
  margin-top:14px; display:flex; gap:18px; flex-wrap:wrap;
}
.hero__meta div span{ display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.hero__meta div b{ font-size:14.5px; font-weight:600; }
.avatar{
  width:40px; height:40px; border-radius:0;
  display:grid; place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-size:14px; font-weight:600; letter-spacing:.02em;
  flex:none;
}

/* Hero compatto (pre-stay): una sola riga di informazioni */
.hero--compact{ min-height:340px; padding-bottom:40px; }
.hero--compact h1{ font-size:28px; margin-top:6px; }
.hero__line{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-top:16px;
  font-size:13.5px; color:rgba(255,255,255,.78);
}
.hero__line b{ color:#fff; font-weight:600; }
.hero__dot{ color:rgba(255,255,255,.4); }

/* Countdown */
.countdown{
  display:flex; align-items:center; gap:14px;
  margin-top:20px; padding:14px 16px;
  border-radius:0;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
}
.countdown__n{
  font-size:34px; line-height:1; font-weight:700; letter-spacing:-.04em;
  color:#fff;
}

/* ============ Quick actions ============ */

.qa{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.qa--3{ grid-template-columns:repeat(3,1fr); }
.qa__item{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:15px 14px;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:0;
  box-shadow:var(--sh-1);
  text-align:left;
  min-height:92px;
  transition:transform .12s;
}
.qa__item:active{ transform:scale(.975); }
.qa__ico{
  width:34px; height:34px; border-radius:0;
  display:grid; place-items:center;
  background:var(--surface-3); color:var(--deep);
}
.qa__ico svg{ width:18px; height:18px; }
.qa__t{ display:block; font-size:13.5px; font-weight:600; line-height:1.25; }
.qa__s{ display:block; font-size:11.5px; color:var(--muted); margin-top:-4px; }
.qa__item--tall{
  align-items:center; justify-content:center; text-align:center;
  min-height:96px; gap:10px; padding:16px 8px;
}
.qa__item--tall .qa__ico{ width:40px; height:40px; border-radius:0; }
.qa__item--tall .qa__ico svg{ width:20px; height:20px; }

/* ============ Key card (NFC) ============ */

.keycard{
  position:relative;
  border-radius:14px;   /* simula una tessera fisica */
  padding:18px 18px 16px;
  color:#fff;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(174,182,198,.26), transparent 58%),
    linear-gradient(155deg,#1B2E5C 0%,#001035 52%,#000B23 100%);
  box-shadow:0 20px 44px -20px rgba(19,31,61,.7);
  overflow:hidden;
  isolation:isolate;
}
.keycard__brand{ display:flex; align-items:center; gap:9px; }
.keycard__brand b{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; }
.keycard__tier{
  margin-left:auto;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.82); font-weight:600;
  padding:4px 10px; border-radius:0;
  border:1px solid rgba(255,255,255,.32);
}
.keycard__name{
  font-size:19px; font-weight:600; margin-top:14px; letter-spacing:-.02em;
}
.keycard__grid{
  display:flex; gap:18px 22px; margin-top:12px; flex-wrap:wrap;
}
.keycard__grid span{ display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.keycard__grid b{ font-size:13.5px; font-weight:600; }
.keycard__club{
  display:flex; gap:20px; flex-wrap:wrap;
  margin-top:12px;
}
.keycard__club span{ display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.keycard__club b{ font-size:13.5px; font-weight:600; color:#fff; }
.keycard--disabled .keycard__club b{ color:rgba(255,255,255,.62); }

.keycard__foot{
  margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; gap:14px;
}
.keycard--locked{ filter:saturate(.35); }
.keycard--disabled{
  border-radius:14px;
  background:linear-gradient(155deg,#3D4763,#232C45);
  box-shadow:var(--sh-1);
}

.qr{
  width:62px; height:62px; flex:none;
  padding:6px; border-radius:0; background:#fff;
}
.qr svg{ width:100%; height:100%; display:block; }
.qr--lg{ width:184px; height:184px; padding:12px; border-radius:0; }

/* Nel pre-stay il codice esiste ma non e' ancora utilizzabile */
.qr--locked{ position:relative; }
.qr--locked svg{ filter:blur(3.4px) grayscale(.4); opacity:.5; }
.qr__lock{
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:var(--ink-2);
}
.qr__lock svg{ width:20px; height:20px; filter:none; opacity:1; }

/* ============ NFC overlay ============ */

.nfc{
  position:fixed; inset:0; z-index:200;
  background:linear-gradient(160deg,#001035,#000A20);
  color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; padding:32px;
  text-align:center;
  animation:fadeIn .22s;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.nfc__ring{
  position:relative; width:190px; height:190px;
  display:grid; place-items:center;
}
.nfc__ring i{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(174,182,198,.45);
  animation:ripple 2.1s cubic-bezier(.2,.6,.3,1) infinite;
}
.nfc__ring i:nth-child(2){ animation-delay:.7s; }
.nfc__ring i:nth-child(3){ animation-delay:1.4s; }
@keyframes ripple{
  0%{ transform:scale(.42); opacity:0; }
  22%{ opacity:.9; }
  100%{ transform:scale(1); opacity:0; }
}
.nfc__core{
  width:92px; height:92px; border-radius:0;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.35);
  display:grid; place-items:center;
  color:#fff;
  transition:all .4s;
}
.nfc__core svg{ width:38px; height:38px; }
.nfc.is-ok .nfc__core{ background:var(--ok); border-color:var(--ok); color:#fff; transform:scale(1.06); }
.nfc.is-ok .nfc__ring i{ animation:none; opacity:0; }
.nfc__t{ font-size:25px; font-weight:700; letter-spacing:-.035em; }
.nfc__s{ font-size:14px; color:rgba(255,255,255,.66); max-width:280px; }

/* ============ Progress / stepper ============ */

.steps{ display:flex; gap:6px; }
.steps i{ flex:1; height:3px; border-radius:0; background:var(--line); }
.steps i.on{ background:var(--deep); }

.timeline{ position:relative; padding-left:30px; }
.timeline__i{ position:relative; padding-bottom:22px; }
.timeline__i:last-child{ padding-bottom:0; }
.timeline__i::before{
  content:""; position:absolute; left:-24px; top:3px;
  width:13px; height:13px; border-radius:0;
  background:var(--surface); border:2px solid var(--line);
}
.timeline__i::after{
  content:""; position:absolute; left:-18.5px; top:18px; bottom:2px;
  width:2px; background:var(--line);
}
.timeline__i:last-child::after{ display:none; }
.timeline__i.done::before{ background:var(--deep); border-color:var(--deep); }
.timeline__i.done::after{ background:var(--deep); }
.timeline__i.now::before{
  background:var(--deep); border-color:var(--deep);
  box-shadow:0 0 0 5px rgba(0,16,53,.12);
}
.timeline__t{ font-size:14px; font-weight:600; }
.timeline__i:not(.done):not(.now) .timeline__t{ color:var(--muted); }

/* ============ Form ============ */

.field{ display:block; }
.field__label{
  display:block; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  margin-bottom:7px;
}
.input,.textarea,.select{
  width:100%;
  min-height:52px; padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:0;
  font-size:16px;
  transition:border-color .15s, box-shadow .15s;
  appearance:none;
}
.input:focus,.textarea:focus,.select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(27,44,85,.12);
}
.textarea{ min-height:92px; resize:vertical; line-height:1.5; }
.input--code{
  text-align:center; letter-spacing:.5em; font-size:24px; font-weight:600;
  padding-left:.5em; font-family:var(--sans);
}
.field__err{ color:var(--err); font-size:12.5px; margin-top:7px; display:flex; gap:5px; align-items:center; }
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8681' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  padding-right:42px;
}

.opt{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:14px 16px;
  border:1px solid var(--line); border-radius:0;
  background:var(--surface); text-align:left;
  transition:all .15s;
}
.opt + .opt{ margin-top:8px; }
.opt__mark{
  width:22px; height:22px; flex:none; border-radius:0;
  border:1.5px solid var(--line); display:grid; place-items:center;
  transition:all .15s;
}
.opt__mark--sq{ border-radius:0; }
.opt__mark svg{ width:13px; height:13px; color:#fff; opacity:0; }
.opt[aria-checked="true"]{ border-color:var(--deep); background:var(--surface-2); }
.opt[aria-checked="true"] .opt__mark{ background:var(--deep); border-color:var(--deep); }
.opt[aria-checked="true"] .opt__mark svg{ opacity:1; }
.opt__b{ flex:1; min-width:0; }
.opt__t{ display:block; font-size:14.5px; font-weight:500; }
.opt__s{ display:block; font-size:12.5px; color:var(--muted); }
.opt__p{ font-size:13.5px; font-weight:600; color:var(--ink-2); }

.stepper{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--surface-3); border-radius:0; padding:4px;
}
.stepper button{
  width:38px; height:38px; border-radius:0;
  display:grid; place-items:center; color:var(--deep);
  background:var(--surface); box-shadow:var(--sh-1);
  transition:transform .12s;
}
.stepper button:active{ transform:scale(.9); }
.stepper button[disabled]{ opacity:.3; box-shadow:none; }
.stepper span{ min-width:42px; text-align:center; font-weight:600; font-size:15.5px; }

/* Range */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:38px; background:transparent; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:0;
  background:linear-gradient(to right, var(--deep) var(--pct,50%), var(--line) var(--pct,50%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; border-radius:0;
  background:#fff; box-shadow:0 2px 8px rgba(0,16,53,.22);
  border:1px solid var(--line);
  margin-top:-11px;
}
input[type=range]::-moz-range-track{ height:6px; border-radius:0; background:var(--line); }
input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:0; background:#fff;
  border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,16,53,.22);
}
input[type=range][disabled]{ opacity:.4; }

/* Switch */
.switch{
  width:52px; height:31px; flex:none;
  border-radius:0; background:var(--line);
  position:relative; transition:background .22s;
}
.switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:25px; height:25px; border-radius:0;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.22);
  transition:transform .22s cubic-bezier(.3,1.4,.5,1);
}
.switch[aria-checked="true"]{ background:var(--ok); }
.switch[aria-checked="true"]::after{ transform:translateX(21px); }

/* ============ Sheet / modal ============ */

.backdrop{
  position:fixed; inset:0; z-index:100;
  background:rgba(20,26,24,.44);
  backdrop-filter:blur(3px);
  animation:fadeIn .2s;
}
.sheet{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:0; z-index:101;
  width:100%; max-width:var(--maxw);
  background:var(--bg);
  border-radius:0;
  box-shadow:var(--sh-3);
  max-height:92dvh;
  display:flex; flex-direction:column;
  animation:sheetUp .3s cubic-bezier(.2,.8,.25,1);
}
@keyframes sheetUp{ from{ transform:translate(-50%,100%);} to{ transform:translate(-50%,0);} }
.sheet__grab{
  width:38px; height:4px; border-radius:0; background:var(--line);
  margin:10px auto 0; flex:none;
}
.sheet__head{
  padding:14px var(--gutter) 8px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex:none;
}
.sheet__body{
  padding:6px var(--gutter) calc(20px + var(--sab));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.sheet__foot{
  padding:12px var(--gutter) calc(14px + var(--sab));
  border-top:1px solid var(--line);
  background:var(--bg);
  flex:none;
}

/* ============ Toast ============ */

.toast-root{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + var(--sab) + 14px);
  transition:bottom .2s;
  z-index:300;
  width:100%; max-width:var(--maxw);
  padding-inline:var(--gutter);
  pointer-events:none;
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
.toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  padding:13px 18px;
  border-radius:0;
  background:var(--deep); color:#fff;
  font-size:13.5px; font-weight:500; line-height:1.35; text-align:left;
  box-shadow:var(--sh-2);
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1);
  max-width:100%;
}
.toast:has(span:not(:only-child)){ border-radius:0; }
.toast svg{ width:17px; height:17px; flex:none; color:var(--accent-2); }
.toast.out{ animation:toastOut .25s forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.96);} to{opacity:1;transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform:translateY(8px) scale(.97);} }

/* ============ Chat ============ */

.chat{
  display:flex; flex-direction:column;
  height:calc(100dvh - var(--tabbar-h) - var(--sab) - var(--appbar-h) - var(--sat));
}
.chat__scroll{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px var(--gutter) 10px;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}
.msg{ max-width:82%; display:flex; flex-direction:column; gap:3px; }
.msg--in{ align-self:flex-start; }
.msg--out{ align-self:flex-end; align-items:flex-end; }
.msg__b{
  padding:11px 15px;
  border-radius:0;
  font-size:14.5px; line-height:1.45;
  white-space:pre-wrap; word-break:break-word;
}
.msg--in .msg__b{
  background:var(--surface); border:1px solid var(--line-2);
  border-bottom-left-radius:7px;
}
.msg--out .msg__b{
  background:var(--deep); color:#fff;
  border-bottom-right-radius:7px;
}
.msg__meta{ font-size:10.5px; color:var(--muted-2); padding-inline:6px; }
.msg__author{
  font-size:11px; font-weight:600; color:var(--accent);
  padding-inline:6px; letter-spacing:.02em;
}
.msg--sys{
  align-self:center; max-width:92%; text-align:center;
}
.msg--sys .msg__b{
  background:var(--surface-3); color:var(--ink-2);
  font-size:12.5px; border-radius:0; padding:8px 16px;
}
.msg--card{ max-width:92%; }
.typing{ display:flex; gap:4px; padding:14px 16px; }
.typing i{
  width:7px; height:7px; border-radius:0; background:var(--muted-2);
  animation:blink 1.3s infinite;
}
.typing i:nth-child(2){ animation-delay:.2s; }
.typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{opacity:.28; transform:translateY(0)} 30%{opacity:1; transform:translateY(-2px)} }

.chat__quick{
  display:flex; gap:8px; overflow-x:auto;
  padding:6px var(--gutter) 8px;
  scrollbar-width:none;
  flex:none;
}
.chat__quick::-webkit-scrollbar{ display:none; }
.chat__bar{
  flex:none;
  display:flex; align-items:flex-end; gap:8px;
  padding:10px var(--gutter) 12px;
  background:var(--surface);
  border-top:1px solid var(--line);
}
.chat__input{
  flex:1;
  min-height:44px; max-height:110px;
  padding:11px 16px;
  border-radius:0; border:1px solid var(--line);
  background:var(--surface-2);
  font-size:16px; resize:none; line-height:1.35;
}
.chat__input:focus{ outline:none; border-color:var(--accent); background:#fff; }
.chat__send{
  width:44px; height:44px; flex:none; border-radius:0;
  background:var(--deep); color:#fff;
  display:grid; place-items:center;
  transition:transform .12s, opacity .15s;
}
.chat__send:active{ transform:scale(.92); }
.chat__send[disabled]{ opacity:.35; }
.chat__hdr{
  flex:none;
  display:flex; align-items:center; gap:11px;
  padding:11px var(--gutter);
  background:var(--surface); border-bottom:1px solid var(--line);
}

/* ============ Mappa ============ */

.map{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--line-2);
  border-radius:0;
  overflow:hidden;
  box-shadow:var(--sh-1);
}
.map svg{ width:100%; height:auto; display:block; touch-action:manipulation; }
.zone{ transition:all .2s; cursor:pointer; }
.zone rect,.zone path.zshape{ transition:all .2s; }
.zone:hover rect{ filter:brightness(.97); }
.zone.is-sel rect,.zone.is-sel path.zshape{ stroke:var(--accent); stroke-width:2.5; }
.zone.is-dest rect,.zone.is-dest path.zshape{ stroke:var(--accent); stroke-width:2.5; }
.zlabel{ font-family:var(--sans); font-size:8.4px; font-weight:600; fill:var(--ink-2); pointer-events:none; letter-spacing:-.02em; }
.zlabel--sm{ font-size:6.6px; fill:var(--muted); font-weight:500; letter-spacing:0; }
.route-path{
  fill:none; stroke:var(--accent); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:6 7;
  animation:dash 1.1s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-26; } }
.you{ animation:pulseYou 2s infinite; transform-origin:center; }
@keyframes pulseYou{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* ============ Camera: tessere di comando ============ */
/* Ogni dispositivo è una fascia a filo dello schermo che contiene
   i propri comandi: nessun foglio si apre sopra la schermata. */

.ctrls{
  border-top:1px solid var(--line);
  background:var(--surface);
}
.ctrl{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  padding:16px var(--gutter) 18px;
  transition:background .3s;
}
.ctrl.is-on{ background:var(--accent-soft); }
.ctrl:not(.is-on) .ctrl__body{ opacity:.62; }

.ctrl__head{ display:flex; align-items:center; gap:14px; }
.ctrl__ico{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  background:var(--surface-3); color:var(--muted);
  transition:background .25s, color .25s;
}
.ctrl__ico svg{ width:21px; height:21px; }
.ctrl.is-on .ctrl__ico{ background:var(--deep); color:#fff; }
.ctrl__txt{ flex:1; min-width:0; }
.ctrl__name{ display:block; font-size:15px; font-weight:600; line-height:1.2; }
.ctrl__state{
  display:block; margin-top:6px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.ctrl__hint{
  margin-top:12px;
  font-size:12px; line-height:1.45; color:var(--muted);
}
.ctrl__body{ margin-top:14px; }

.ctrl__ch{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.ctrl__chnow{ text-align:center; line-height:1.2; }
.ctrl__chnow b{ display:block; font-size:26px; font-weight:700; letter-spacing:-.02em; }
.ctrl__chnow span{
  display:block; margin-top:4px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.ctrl__vol{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.ctrl__vol input[type=range]{ flex:1; }
.ctrl__vol .num{ width:26px; text-align:right; }
.ctrl__body > .chips{ margin-top:6px; }

.temp{
  display:flex; align-items:center; justify-content:center; gap:22px;
  padding:6px 0 4px;
}
.temp__v{
  font-family:var(--sans); font-size:52px; line-height:1; font-weight:700;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.temp__v sup{ font-size:20px; vertical-align:super; font-weight:600; }
.roundbtn{
  width:52px; height:52px; border-radius:0;
  display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-1); color:var(--deep);
  transition:transform .12s;
}
.roundbtn:active{ transform:scale(.9); }
.roundbtn[disabled]{ opacity:.35; box-shadow:none; }
.roundbtn svg{ width:22px; height:22px; }

.tvscreen{
  aspect-ratio:16/9;
  border-radius:0;
  background:#0E1211;
  display:grid; place-items:center;
  color:rgba(255,255,255,.35);
  font-size:12.5px;
  overflow:hidden; position:relative;
  transition:background .3s;
}
.tvscreen--on{
  background:linear-gradient(140deg,#1B2E5C,#0A1128);
  color:#fff;
}
.tvscreen__ch{ text-align:center; }
.tvscreen__num{ font-size:38px; line-height:1; font-weight:700; }
.tvscreen__nm{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; margin-top:6px; opacity:.75; }

/* ============ Testata di pagina con immagine ============ */

.pagehero{
  position:relative;
  padding:calc(var(--sat) + 34px) var(--gutter) 32px;
  min-height:330px;
  display:flex; align-items:flex-end;
  color:#fff; overflow:hidden;

}
.pagehero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.pagehero__veil{
  position:absolute; inset:0;
  background:linear-gradient(178deg, rgba(0,16,53,.22) 0%, rgba(0,16,53,.52) 58%, rgba(0,10,32,.9) 100%);
}
.pagehero__in{ position:relative; width:100%; }
.pagehero h1{ font-size:25px; font-weight:700; letter-spacing:-.035em; margin-top:6px; }
.pagehero .hero__hotel{ color:var(--accent-2); }

/* ============ Calendario settimanale ============ */

.cal__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:2px 0 10px;
}
.cal{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:0;
  box-shadow:var(--sh-1);
  overflow:hidden;
  margin-inline:var(--gutter);
}
.cal__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.cal__scroll::-webkit-scrollbar{ display:none; }
.cal__inner{ min-width:max-content; }

.cal__daysrow{ display:flex; border-bottom:1px solid var(--line-2); background:var(--surface); }
.cal__gutterhead{
  width:42px; flex:none;
  position:sticky; left:0; z-index:4;
  background:var(--surface);
}
.cal__dh{
  width:96px; flex:none;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 2px 8px;
  border-left:1px solid var(--line-2);
}
.cal__dh span{ font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.cal__dh b{ font-size:15.5px; font-variant-numeric:tabular-nums; }
.cal__dh.is-today b{
  background:var(--deep); color:#fff;
  width:26px; height:26px; border-radius:0;
  display:grid; place-items:center; font-size:14px;
}

.cal__body{ display:flex; position:relative; }
.cal__gutter{
  width:42px; flex:none;
  position:sticky; left:0; z-index:3;
  background:var(--surface);
}
.cal__hour{ position:relative; }
.cal__hour span{
  position:absolute; top:-7px; right:7px;
  font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums;
}
.cal__col{ width:96px; flex:none; position:relative; border-left:1px solid var(--line-2); }
.cal__slot{ border-top:1px solid var(--line-2); }

.cal__ev{
  position:absolute; left:3px; right:3px;
  border-radius:0;
  padding:5px 7px 4px 9px;
  text-align:left; overflow:hidden;
  background:var(--surface-3);
  border-left:3px solid var(--muted);
  box-shadow:0 1px 3px rgba(20,26,40,.08);
}
.cal__evt{
  font-size:10.5px; font-weight:600; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.cal__evh{ display:block; font-size:9.5px; color:var(--muted); margin-top:2px; }
.cal__ev--trattamento{ background:#E7EAF1; border-left-color:#001035; }
.cal__ev--ristorante{ background:#EDEFF3; border-left-color:#3A4560; }
.cal__ev--medico{ background:#F0F1F5; border-left-color:#5E6884; }
.cal__ev--ordine{ background:#F3F4F7; border-left-color:#8A8F9C; }
.cal__ev--attivita{ background:#EAECF1; border-left-color:#233152; }

.cal__now{
  position:absolute; left:42px; right:0; height:1.5px; z-index:2;
  background:var(--err); pointer-events:none;
}
.cal__now::before{
  content:""; position:absolute; left:-4px; top:-3.5px;
  width:8px; height:8px; border-radius:50%; background:var(--err);
}

/* ============ Conto ============ */

.total{
  text-align:center; padding:26px 20px;
}
.total__v{
  font-size:42px; line-height:1; font-weight:700; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.bar{
  height:8px; border-radius:0; background:var(--line); overflow:hidden; display:flex;
}
.bar i{ display:block; height:100%; }
.bar i.paid{ background:var(--ok); }
.bar i.due{ background:var(--accent); }

.folio__cat{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:14px 18px;
  text-align:left;
  border-bottom:1px solid var(--line-2);
}
.folio__items{ background:var(--surface-2); }
.folio__items[hidden]{ display:none; }
.folio__i{
  display:flex; gap:12px; padding:12px 18px;
  border-bottom:1px solid var(--line-2);
}

/* ============ Misc ============ */

.empty{
  text-align:center; padding:44px 26px;
  color:var(--muted);
}
.empty svg{ width:38px; height:38px; color:var(--muted-2); margin-bottom:12px; }

.spinner{
  width:22px; height:22px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.spinner--dark{ border-color:rgba(0,16,53,.16); border-top-color:var(--deep); }
.spinner--lg{ width:44px; height:44px; border-width:3px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.ok-pop{
  width:76px; height:76px; border-radius:0;
  background:var(--ok); color:#fff;
  display:grid; place-items:center; margin:0 auto;
  animation:pop .42s cubic-bezier(.2,1.5,.4,1);
}
.ok-pop svg{ width:38px; height:38px; }
@keyframes pop{ from{ transform:scale(.3); opacity:0 } to{ transform:scale(1); opacity:1 } }

.hscroll{
  display:flex; gap:12px; overflow-x:auto;
  padding:2px var(--gutter) 8px;
  margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll > *{ flex:none; scroll-snap-align:start; }

.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }

.pricebox{
  display:flex; align-items:baseline; gap:8px;
}
.pricebox b{ font-size:16px; font-weight:600; }
.pricebox .strike{ font-size:13px; }

.note{
  display:flex; gap:10px; padding:13px 15px;
  border-radius:0;
  background:var(--info-soft); color:var(--info);
  font-size:12.5px; line-height:1.45;
}
.note svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.note--warn{ background:var(--warn-soft); color:var(--warn); }
.note--accent{ background:var(--accent-soft); color:var(--ink); }
.note--ok{ background:var(--ok-soft); color:var(--ok); }


.allergen{
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:0;
  background:var(--surface-3); color:var(--ink-2);
  font-size:11px; font-weight:500;
}

.divider-txt{
  display:flex; align-items:center; gap:12px;
  color:var(--muted); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
}
.divider-txt::before,.divider-txt::after{
  content:""; flex:1; height:1px; background:var(--line);
}

.ornament{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--accent); opacity:.8;
}
.ornament::before,.ornament::after{
  content:""; width:34px; height:1px; background:currentColor;
}
.ornament svg{ width:13px; height:13px; }

.fab-tools{
  position:fixed; z-index:60;
  left:calc(50% - min(var(--maxw), 100vw)/2 + 12px);
  bottom:calc(var(--tabbar-h) + var(--sab) + 14px);
}
.fab-tools button{
  width:36px; height:36px; border-radius:0;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-2); color:var(--muted);
  display:grid; place-items:center;
  opacity:.3; transition:opacity .2s;
}
.fab-tools button:active{ opacity:1; }
.fab-tools button:hover{ opacity:1; }
.fab-tools button svg{ width:17px; height:17px; }
/* Il pulsante di servizio scompare sulle schermate a tutta pagina (senza tab bar) */
body:has(#tabbar[hidden]) .fab-tools{ display:none; }
body:has(#tabbar[hidden]) .toast-root{ bottom:calc(var(--sab) + 84px); }
body:has(#tabbar[hidden]) .chat{ height:calc(100dvh - var(--appbar-h) - var(--sat)); }