/* GESTHOTEL — design system (direzione A2: operativo/pro, moduli a tessera) */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f4f6f9; --panel:#ffffff; --ink:#0f1218; --ink2:#39404c; --muted:#7b8291;
  --line:#e6e9ef; --line2:#eef1f5; --sidebar:#20264c; --side-ink:#c7ccdb; --side-mut:#7b83a6;
  --brand:#293172; --brand-soft:#e7e9f3;
  --accent:#198ab2; --accent-ink:#0e3a4a; --accent-soft:#e2f1f6;
  --green:#1f9d63; --green-soft:#e6f6ee; --blue:#1f6d8c; --blue-soft:#e2f1f6;
  --slate:#64748b; --slate-soft:#eef1f5; --red:#dc2626; --red-soft:#fdecec;
  --radius:14px;

  /* --- scale (2026-07-25, vedi docs/DESIGN-UI.md) --------------------------
     Prima spaziature, raggi e ombre erano decisi a occhio in ogni componente.
     Usare queste, non valori sciolti. --radius resta per compatibilità. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px;
  --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:18px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lift:0 16px 32px -22px rgba(16,30,54,.45);
  /* ambra: era già il colore di "in pulizia" ma non era un token */
  --amber:#e79c2c; --amber-soft:#fbf0da; --amber-ink:#875711;
  /* etichette maiuscole: erano .3/.4/.5px sparsi */
  --track-lbl:.06em;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{font-family:"Geist",-apple-system,"Helvetica Neue",Arial,sans-serif; background:var(--bg);
  color:var(--ink); font-size:15px; -webkit-font-smoothing:antialiased;}
.mono{font-variant-numeric:tabular-nums; letter-spacing:.01em;}
a{color:inherit;}

/* etichetta mockup (rimane innocua nell'app reale) */
.flag{background:var(--sidebar); color:#fff; text-align:center; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:6px; font-weight:600;}
.flag b{color:var(--accent);}

/* ---------- app shell ---------- */
.app{display:grid; grid-template-columns:246px 1fr; height:100vh;}
.app.flagged{height:calc(100vh - 30px);}
.side{background:var(--sidebar); color:var(--side-ink); padding:18px 13px; display:flex; flex-direction:column;}
.logo{display:flex; align-items:center; gap:10px; padding:8px 10px 20px; font-weight:800; font-size:19px; color:#fff;}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 4px rgba(231,156,44,.18);}
.side .grp{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--side-mut); padding:16px 10px 7px; font-weight:700;}
.nav{display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:9px; color:var(--side-ink);
  text-decoration:none; font-size:14.5px; font-weight:500; margin-bottom:2px; position:relative;}
.nav svg{width:18px;height:18px;opacity:.72;}
.nav:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav.on{background:rgba(25,138,178,.20); color:#fff;}
.nav.on::before{content:"";position:absolute;left:-13px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--accent);}
.side .foot{margin-top:auto; padding:11px; font-size:12.5px; color:var(--side-mut);}
.side-user{margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.08);}
.side-user-main{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--side-ink);
  padding:8px 9px; border-radius:10px;}
.side-user-main:hover{background:rgba(255,255,255,.06);}
.side-user-txt{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.side-user-txt b{font-weight:700; font-size:13.5px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.side-user-txt span{font-size:11.5px; color:var(--side-mut); text-transform:capitalize;}
.side-user-foot{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px 2px; font-size:12px; color:var(--side-mut);}
.side-user-foot span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.side-logout{color:var(--side-mut); text-decoration:none; font-weight:600; flex-shrink:0;}
.side-logout:hover{color:#fff;}

/* ---- Sidebar collassabile ---- */
.side-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px;}
.logo-mini{display:none;}
.side-toggle{flex-shrink:0; width:30px; height:30px; border:none; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.06); color:var(--side-mut); display:flex; align-items:center; justify-content:center;}
.side-toggle:hover{background:rgba(255,255,255,.12); color:#fff;}
.side-toggle svg{width:18px; height:18px; transition:transform .2s ease;}
.app{transition:grid-template-columns .18s ease;}

html.side-collapsed .app{grid-template-columns:66px 1fr;}
html.side-collapsed .side{padding:18px 9px; overflow:hidden;}
html.side-collapsed .side-head{flex-direction:column; justify-content:center; gap:14px; margin-bottom:8px;}
html.side-collapsed .logo{display:none;}
html.side-collapsed .logo-mini{display:block;}
html.side-collapsed .side-toggle svg{transform:rotate(180deg);}
html.side-collapsed .grp{height:1px; margin:12px 6px; padding:0; font-size:0; overflow:hidden; background:rgba(255,255,255,.09);}
html.side-collapsed .nav{justify-content:center; gap:0; padding:11px 0;}
html.side-collapsed .nav-t{display:none;}
html.side-collapsed .nav svg{opacity:.85;}
html.side-collapsed .nav.on svg{opacity:1;}
html.side-collapsed .nav.on::before{left:-9px;}
html.side-collapsed .nav-badge{position:absolute; top:5px; right:13px; min-width:0; width:8px; height:8px; padding:0; font-size:0;}
html.side-collapsed .side-user-txt{display:none;}
html.side-collapsed .side-user-main{justify-content:center; padding:8px 0;}
html.side-collapsed .side-user-foot{justify-content:center; padding:7px 0 2px;}
html.side-collapsed .side-user-foot span{display:none;}

.main{display:flex; flex-direction:column; overflow:hidden;}
.top{height:60px; border-bottom:1px solid var(--line); background:var(--panel); display:flex;
  align-items:center; gap:var(--s4); padding:0 var(--s6); flex-shrink:0;}
/* barra in alto a tre zone: struttura · data · azioni.
   La data sta qui e non nell'intestazione di pagina, dove faceva a botte
   con i bottoni e mandava il titolo a capo. */
.top-l{display:flex; align-items:center; gap:9px; min-width:0; font-weight:700;
  font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.top-l svg{width:17px; height:17px; color:var(--brand); flex-shrink:0;}
.top-c{display:flex; align-items:center; gap:var(--s2); margin-left:auto; min-width:0;}
.top-r{display:flex; align-items:center; gap:var(--s2); flex-shrink:0;}
.top-c:empty, .top-r:empty{display:none;}

/* navigatore data */
.datenav{display:flex; align-items:center; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; flex-shrink:0;}
.datenav a, .datenav button{border:none; background:none; padding:8px 9px; cursor:pointer;
  color:var(--muted); display:grid; place-items:center; font-family:inherit;}
.datenav a:hover, .datenav button:hover{background:#e8edf4; color:var(--ink);}
.datenav svg{width:15px; height:15px;}
.datenav .cur{display:flex; align-items:center; gap:var(--s2); padding:6px 11px; background:var(--panel);
  border-left:1px solid var(--line); border-right:1px solid var(--line); font-size:13.5px; font-weight:700;}
.datenav .cur input[type=date]{border:none; background:none; font:inherit; font-weight:700;
  color:var(--ink); padding:0; width:118px;}
.datenav .cur input[type=date]:focus{outline:none;}
.datenav .today{font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:var(--track-lbl); color:var(--accent); background:var(--accent-soft);
  padding:2px 6px; border-radius:20px;}
.datenav .today.lnk{text-decoration:none;}
.datenav .today.lnk:hover{filter:brightness(.96);}
.search{display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--line);
  border-radius:9px; padding:9px 13px; width:300px; color:var(--muted); font-size:14px;}
.search .k{margin-left:auto; font-size:11px; border:1px solid var(--line); border-radius:5px; padding:2px 6px; background:#fff;}
.user{display:flex; align-items:center; gap:11px; font-size:14px;}
.user-link{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit;
  border-radius:10px; padding:4px 6px; margin:-4px -6px;}
.user-link:hover{background:var(--bg);}
.user .who{text-align:right; line-height:1.25;}
.user .who b{font-weight:700;} .user .who span{color:var(--muted); font-size:12px;}
.av{width:34px;height:34px;border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--brand));
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px;}
.topout{margin-left:6px; font-size:13px; color:var(--muted); text-decoration:none; border:1px solid var(--line);
  padding:7px 12px; border-radius:8px; font-weight:600;}
.topout:hover{background:var(--bg); color:var(--ink); border-color:#d8dde6;}

.work{padding:24px 26px; overflow:auto;}
/* intestazione di pagina. `align-items:center` + niente wrap mandava il titolo
   a capo quando la toolbar era piena: ora il titolo non si spezza e la toolbar
   va a capo per conto suo. */
.head{display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5);}
.head > div:first-child{min-width:0;}
.head h1{font-size:26px; font-weight:800; letter-spacing:-.025em; line-height:1.15; text-wrap:balance;}
.head .sub{color:var(--muted); font-size:13.5px; margin-top:var(--s1);}
.toolbar{display:flex; gap:9px; align-items:center; flex-wrap:wrap;}
.board-datepick{padding:8px 11px; border:1px solid var(--line); border-radius:9px; font-size:13.5px; color:var(--ink); background:var(--panel);}
.board-datepick:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.seg{display:flex; background:var(--panel); border:1px solid var(--line); border-radius:9px; overflow:hidden;}
.seg button{border:none; background:none; padding:8px 13px; font-size:13.5px; font-weight:600; color:var(--muted);
  cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px;}
.seg button.on{background:var(--ink); color:#fff;}

/* ---------- bottoni ---------- */
.btn{background:var(--brand); color:#fff; border:none; border-radius:9px; padding:10px 16px;
  font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:7px;}
.btn:hover{filter:brightness(1.04);}
.btn.dark{background:var(--ink); color:#fff;}
.btn.ghost{background:var(--panel); color:var(--ink); border:1px solid var(--line);}

/* ---------- moduli camera (griglia per piano) ---------- */
.floor{margin-bottom:24px;}
.floor-h{display:flex; align-items:center; gap:10px; margin:6px 2px 13px;}
.floor-h .fname{font-size:15.5px; font-weight:700;}
.floor-h .fcount{font-size:12px; color:var(--muted); background:var(--panel); border:1px solid var(--line); padding:2px 9px; border-radius:20px;}
.floor-h .fline{flex:1; height:1px; background:var(--line);}
.rooms{display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:13px;}
.room{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px 14px;
  position:relative; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s;}
.room:hover{transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(20,30,50,.35); border-color:#d8dde6;}
.room .ic{width:38px;height:38px;border-radius:10px; display:grid; place-items:center; margin-bottom:12px;
  background:color-mix(in srgb, var(--c) 14%, #fff); color:var(--c);}
.room .ic svg{width:21px;height:21px;}
.room .rnum{font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;}
.room .rname{font-size:12.5px; color:var(--muted); margin-top:1px; min-height:16px;}
.room .rtype{display:inline-flex; align-items:center; gap:7px; margin-top:11px; font-size:12.5px; font-weight:600; color:var(--ink2);}
.room .rtype .sw{width:9px;height:9px;border-radius:3px; background:var(--c);}
.room .st{position:absolute; top:14px; right:14px; width:9px; height:9px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 3px var(--green-soft);}
.room .note{margin-top:9px; font-size:11.5px; color:var(--accent); background:var(--accent-soft);
  display:inline-block; padding:2px 8px; border-radius:6px; font-weight:600;}
.room-act{display:flex; align-items:center; gap:2px; margin-top:11px; padding-top:10px; border-top:1px solid var(--line2);}

/* ---------- board operativa: tessera per stato pulizia ---------- */
.rtile{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  position:relative; cursor:pointer; transition:transform .12s, box-shadow .12s;}
.rtile:hover{transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(20,30,50,.35);}
.rtile .bar{height:5px; background:var(--sc);}
.rtile .body{padding:13px 14px 12px;}
.rtile .rnum{font-weight:800; font-size:21px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.rtile .rt{font-size:12px; color:var(--muted); margin-top:1px;}
.rtile .foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px;}
.status{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px;
  background:var(--sc-soft); color:var(--sc-ink);}
.status .d{width:7px;height:7px;border-radius:50%;background:var(--sc-ink);}
.op{width:26px;height:26px;border-radius:50%; display:grid;place-items:center; font-size:11px; font-weight:700;
  color:#fff; background:var(--slate);}
.op.empty{background:none; color:var(--muted); border:1.5px dashed var(--line); }

/* legenda stati */
.legend{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.lg{display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:8px 13px;}
.lg .d{width:10px;height:10px;border-radius:3px;}
.lg .n{font-weight:700; font-size:14px;}
.lg .t{font-size:12.5px; color:var(--muted);}

/* ---------- tabella (vista elenco / config) ---------- */
.tbl{width:100%; border-collapse:separate; border-spacing:0; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.tbl th{text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  font-weight:700; padding:13px 16px; background:#fbfbfc; border-bottom:1px solid var(--line);}
.tbl td{padding:13px 16px; border-bottom:1px solid var(--line2); font-size:14.5px; color:var(--ink2); vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:#fafbfc;}
.swatch{display:inline-block; width:22px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,.08); vertical-align:middle;}
.pill{font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:20px;}
.pill.ok{background:var(--green-soft); color:var(--green);}
.del{background:none; border:none; padding:4px 9px; margin:0; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--red); cursor:pointer; text-decoration:none; border-radius:7px; line-height:1.4;}
.del:hover{background:color-mix(in srgb, currentColor 13%, transparent);}
.muted{color:var(--muted);}

/* ---------- form ---------- */
.addbar{display:flex; gap:9px; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:11px; margin-bottom:18px; flex-wrap:wrap;}
.addbar input,.addbar select{border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:14px;
  font-family:inherit; color:var(--ink); background:#fff;}
.addbar input:focus,.addbar select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.addbar input[type=color]{padding:2px; width:46px; height:40px;}

/* ---------- form-card (es. nuovo hotel) ---------- */
.form-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px;
  max-width:520px; display:flex; flex-direction:column; gap:14px;}
.form-card label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink2); font-weight:600;}
.form-card input{padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:15px; font-family:inherit;}
.form-card input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.form-sec{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700;
  margin-top:10px; border-top:1px solid var(--line); padding-top:16px;}
.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:8px;}
.hint{font-size:12.5px; color:var(--muted); margin:-6px 0 0;}
.hint-inline{font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0;}

.alert{background:var(--red-soft); border:1px solid #f2c4c4; color:var(--red); padding:11px 15px;
  border-radius:10px; margin-bottom:16px; font-size:14px;}
.empty{color:var(--muted); padding:22px; background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius);}

/* ---------- board: controlli tessera + selettore date ---------- */
.tile-ctrls{display:flex; flex-direction:column; gap:7px; margin-top:12px;}
.tile-ctrls select{width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:12.5px; background:#fff; color:var(--ink);}
.tile-ctrls select:focus{outline:none; border-color:var(--accent);}
.tile-op{margin-top:9px; font-size:12px; color:var(--ink2);}
.tile-op a{color:var(--blue); text-decoration:none; font-weight:600;}
.tile-op a:hover{text-decoration:underline;}
.board-dates{display:flex; gap:7px; flex-wrap:wrap;}
.board-dates a{padding:8px 13px; border:1px solid var(--line); border-radius:9px; background:var(--panel);
  text-decoration:none; font-size:13.5px; font-weight:600; color:var(--ink2); font-variant-numeric:tabular-nums;}
.board-dates a:hover{border-color:var(--accent);}
.board-dates a.on{background:var(--ink); color:#fff; border-color:var(--ink);}
.prio{font-size:9.5px; font-weight:800; padding:2px 8px; border-radius:20px; vertical-align:middle;
  margin-left:5px; text-transform:uppercase; letter-spacing:.04em;}

/* ---------- assegnazione (pool + drag&drop) ---------- */
.hint-bar{background:var(--blue-soft); border:1px solid #d6e0f0; color:var(--blue2); border-radius:10px;
  padding:10px 15px; font-size:13px; margin-bottom:16px;}
.assign-wrap{display:flex; gap:18px; align-items:flex-start;}
.pool{width:230px; flex-shrink:0; position:sticky; top:78px; display:flex; flex-direction:column; gap:8px;}
.pool-title{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:0 4px 2px;}
.op-chip{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:9px 11px; cursor:grab; user-select:none;}
.op-chip:hover{border-color:#cdd5e0; box-shadow:0 6px 16px -12px rgba(20,30,50,.4);}
.op-chip.dragging{opacity:.5;}
.op-chip.libera{border-style:dashed; background:transparent;}
.op-av{width:34px; height:34px; border-radius:9px; color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:13px; flex-shrink:0;}
.op-av.sm{width:24px; height:24px; font-size:10px; border-radius:7px;}
.op-meta{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.op-name{font-weight:700; font-size:13.5px;}
.op-count{font-size:11.5px; color:var(--muted);}

.assign-rooms{flex:1; min-width:0;}
.arooms{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;}
.acard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:15px 16px 13px; cursor:pointer;
  transition:transform .12s, border-color .12s, box-shadow .12s, background .12s;}
.acard:hover{border-color:#cdd5e0; transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(20,30,50,.4);}
.acard.selected{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:#fffdf7;}
.acard.dragover{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}
.acard.assigned{background:linear-gradient(180deg,#fbfcfe,#fff);}
.ac-head{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:11px;}
.ac-brush{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex-shrink:0;
  color:var(--bc); background:color-mix(in srgb, var(--bc) 15%, #fff);}
.ac-brush svg{width:23px; height:23px;}
.ac-head .op-av{width:32px; height:32px;}
.ac-toassign{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); font-weight:600;
  border:1px dashed var(--line); padding:5px 9px; border-radius:20px; white-space:nowrap;}
.ac-toassign svg{width:14px; height:14px;}
.ac-num{font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;}
.ac-tipo{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink2); font-weight:600; margin-top:5px;}
.ac-tipo .dot{width:9px; height:9px; border-radius:3px; background:var(--tc); flex-shrink:0;}
.ac-info{display:flex; align-items:center; gap:14px; margin-top:13px; padding-top:11px; border-top:1px solid var(--line2);
  font-size:12.5px; color:var(--muted); font-weight:600;}
.ac-azione{display:flex; align-items:center; gap:6px;} .ac-azione svg{width:17px; height:17px;}
.ac-pax{display:flex; align-items:center; gap:5px; margin-left:auto;} .ac-pax svg{width:16px; height:16px;}
.ac-badges{display:flex; align-items:center; gap:6px; flex-shrink:0;}
.acard.static{cursor:default;}
.acard.static:hover{transform:none; box-shadow:none; border-color:var(--line);}
.acard.static .tile-ctrls{margin-top:12px;}
.prio-btns{display:flex; gap:6px;}
.pb{flex:1; border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 0; cursor:pointer;
  display:grid; place-items:center; color:#aab2bf;}
.pb svg{width:17px; height:17px;}
.pb:hover{background:var(--bg); color:var(--muted);}
.pb.pb-g.on{background:var(--green-soft); border-color:#bfe3cd; color:var(--green);}
.pb.pb-y.on{background:var(--slate-soft); border-color:#d5dbe3; color:var(--slate);}
.pb.pb-r.on{background:var(--red-soft); border-color:#f2c4c4; color:var(--red);}
.drop-floor{cursor:default; padding:11px 15px; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; transition:background .1s, border-color .1s;}
.drop-floor .fname{font-size:17px;}
.drop-floor.dragover{background:var(--blue-soft); border-color:var(--blue);}
.drop-tip{font-size:12px; color:var(--muted); margin-left:8px; opacity:.55; transition:opacity .1s; white-space:nowrap;}
.drop-floor:hover .drop-tip, .drop-floor.dragover .drop-tip{opacity:1; color:var(--blue);}

/* ---------- upload report ---------- */
.upload-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; max-width:640px;}
.upload-drop{position:relative; border:2px dashed var(--line); border-radius:12px; padding:34px 20px; text-align:center;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:10px; transition:border-color .15s;}
.upload-drop:hover{border-color:var(--accent);}
.upload-drop svg{color:var(--accent);}
.upload-drop .ud-t{font-size:15px; font-weight:600; color:var(--ink2); line-height:1.5;}
.upload-drop .ud-t span{color:var(--muted); font-weight:400; font-size:13px;}
.upload-drop input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.upload-row{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:16px;}
.upload-row label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink2); font-weight:600;}
.upload-row select{padding:9px 12px; border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:14px;}

/* ---------- vista operatore (mobile) ---------- */
.op-body{background:#f4f6f9; max-width:520px; margin:0 auto; min-height:100vh;}
.op-top{position:sticky; top:0; z-index:5; background:var(--sidebar); color:#fff; display:flex;
  justify-content:space-between; align-items:center; padding:14px 18px;}
.op-brand{font-weight:800; font-size:18px;} .op-brand span{color:var(--accent);}
.op-logout{color:#fff; font-size:13px; border:1px solid rgba(255,255,255,.4); padding:5px 12px; border-radius:8px; text-decoration:none;}
.op-sub{padding:16px 18px 6px;}
.op-hotel{font-weight:700; font-size:17px;}
.op-date{color:var(--muted); font-size:14px; text-transform:capitalize;}
.op-list{padding:10px 14px 34px; display:flex; flex-direction:column; gap:12px;}
.op-card{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex;}
.op-bar{width:6px; flex-shrink:0;}
.op-cbody{padding:14px 16px; flex:1;}
.op-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.op-num{font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.op-type{display:flex; align-items:center; gap:7px; color:var(--ink2); font-weight:600; font-size:13.5px; margin-top:3px;}
.op-tic{display:inline-flex; flex-shrink:0;} .op-tic svg{width:20px; height:20px;}
.op-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px;}
.op-status{font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:20px; white-space:nowrap;}
.op-btn{display:block; width:100%; margin-top:13px; padding:13px; border:none; border-radius:10px;
  font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;}
.op-btn.start{background:var(--accent); color:var(--accent-ink);}
.op-btn.done{background:var(--green); color:#fff;}
.op-note{margin-top:13px; text-align:center; padding:11px; border-radius:10px; font-size:14px; font-weight:600;}
.op-note.wait{color:var(--blue); background:var(--blue-soft);}
.op-note.ok{color:var(--green); background:var(--green-soft); font-weight:700;}
.op-note.block{color:var(--red); background:var(--red-soft); font-weight:700;}
.op-empty{padding:44px 20px; text-align:center; color:var(--muted);}
.op-check{margin-top:13px; border-top:1px solid var(--line2); padding-top:10px; display:flex; flex-direction:column; gap:2px;}
.op-check label{display:flex; align-items:center; gap:10px; font-size:14px; padding:7px 4px; cursor:pointer; color:var(--ink2);}
.op-check label input{width:20px; height:20px; accent-color:var(--green); flex-shrink:0;}
.op-check label.done span{color:var(--muted); text-decoration:line-through;}

/* ---------- login ---------- */
.login-page{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 20% -10%, #22283a, #14161c 60%);}
.login-card{background:var(--panel); border-radius:20px; padding:38px 36px 30px; width:370px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:15px;}
.login-brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:24px;}
.login-brand .dot{width:12px;height:12px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 5px rgba(231,156,44,.16);}
.login-sub{color:var(--muted); font-size:14px; margin:-6px 0 8px;}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink2); font-weight:600;}
.login-card input{padding:12px 13px; border:1px solid var(--line); border-radius:10px; font-size:15px;}
.login-card input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.login-card .btn{justify-content:center; padding:13px; font-size:15px; margin-top:6px;}

/* ---- Statistiche ---- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px; margin-bottom:22px;}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 17px;}
.kpi .kl{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700;}
.kpi .kv{font-size:30px; font-weight:800; letter-spacing:-.02em; margin-top:8px; font-variant-numeric:tabular-nums; color:var(--ink);}
.kpi .kv small{font-size:15px; font-weight:700; color:var(--muted);}
.kpi.hero{background:linear-gradient(135deg,#1f9d63,#178a56); border-color:transparent; color:#fff;}
.kpi.hero .kl{color:rgba(255,255,255,.82);}
.kpi.hero .kv{color:#fff;}
.kpi .bar{height:7px; border-radius:20px; background:rgba(255,255,255,.28); margin-top:11px; overflow:hidden;}
.kpi .bar > i{display:block; height:100%; border-radius:20px; background:#fff;}
.pct-bar{position:relative; height:8px; border-radius:20px; background:var(--line2); overflow:hidden; min-width:66px;}
.pct-bar > i{display:block; height:100%; border-radius:20px; background:var(--green);}
.trend{display:flex; align-items:flex-end; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 18px 12px; margin-bottom:22px; height:150px;}
.trend .col{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end;}
.trend .col .bwrap{flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center;}
.trend .col .b{width:60%; max-width:38px; min-height:3px; border-radius:6px 6px 0 0; background:var(--accent);}
.trend .col .v{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;}
.trend .col .dl{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
.trend .col.on .b{background:var(--green);}
.tempo{display:inline-flex; align-items:center; gap:6px; color:var(--ink2); font-variant-numeric:tabular-nums;}

/* ---- Board card: chip azione/occupanti/letti + rail stati ---- */
.ac-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line2);}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; line-height:1;
  padding:6px 10px; border-radius:9px; color:var(--cc); background:color-mix(in srgb,var(--cc) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--cc) 26%,#fff); font-variant-numeric:tabular-nums;}
.chip svg{width:16px; height:16px;}
.ac-states{display:flex; flex-direction:column; gap:6px; flex-shrink:0; padding-left:11px; border-left:1px solid var(--line2);}
.ac-sbtn{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:#c2c8d2; transition:.12s;}
.ac-sbtn svg{width:19px; height:19px;}
button.ac-sbtn:hover{background:color-mix(in srgb,var(--sc) 10%,#fff); border-color:color-mix(in srgb,var(--sc) 40%,#fff); color:var(--sc);}
.ac-sbtn.on{background:var(--sc); border-color:var(--sc); color:#fff; box-shadow:0 4px 12px -4px color-mix(in srgb,var(--sc) 55%,transparent);}

/* ---- Modale di conferma ---- */
.modal-bg{position:fixed; inset:0; background:rgba(15,18,24,.44); backdrop-filter:blur(2px);
  display:grid; place-items:center; z-index:60; padding:20px;}
.modal{background:var(--panel); border-radius:18px; padding:26px 26px 22px; width:100%; max-width:390px;
  box-shadow:0 30px 70px -20px rgba(15,25,45,.5); text-align:center;}
.modal .m-ic{width:56px; height:56px; border-radius:15px; display:grid; place-items:center; margin:0 auto 14px;}
.modal .m-ic svg{width:28px; height:28px;}
.modal .m-title{font-size:19px; font-weight:800; letter-spacing:-.01em;}
.modal .m-text{font-size:16px; color:var(--ink2); margin-top:8px;}
.modal .m-note{font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.5;}
.modal .m-act{display:flex; gap:10px; margin-top:20px;}
.modal .m-act .btn{flex:1; justify-content:center;}

.modal-bg[hidden]{display:none;}

/* modale di inserimento (form) — allineata a sinistra, più larga */
.modal.mform{max-width:540px; text-align:left; padding:0; overflow:hidden;}
.mform-h{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:17px 22px; border-bottom:1px solid var(--line);}
.mform-h .m-title{font-size:17px; margin:0;}
.mform-close{background:none; border:none; font-size:24px; line-height:1; color:var(--muted);
  cursor:pointer; padding:0 2px; border-radius:8px;}
.mform-close:hover{color:var(--ink);}
.mform-body{padding:20px 22px; display:flex; flex-direction:column; gap:14px; max-height:68vh; overflow:auto;}
.mfield{display:flex; flex-direction:column; gap:5px; min-width:0;}
.mfield label{font-size:12px; font-weight:700; color:var(--ink2); text-transform:uppercase; letter-spacing:.02em;}
.mfield input,.mfield select,.mfield textarea{border:1px solid var(--line); border-radius:9px;
  padding:9px 12px; font-size:14px; color:var(--ink); width:100%; background:var(--panel); font-family:inherit;}
.mfield input:focus,.mfield select:focus,.mfield textarea:focus{outline:none;
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
/* checkbox/radio non devono ereditare width:100% (staccava la label dal flag) */
.mfield input[type=checkbox],.mfield input[type=radio]{width:auto; padding:0; border-radius:4px;}
.mfield .chk{align-self:flex-start; padding-top:8px;}
.mf-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.mform-foot{display:flex; gap:10px; justify-content:flex-end; padding:15px 22px;
  border-top:1px solid var(--line); background:var(--bg);}
.mform .filebtn{width:100%; justify-content:center;}
.head .btn.head-add{flex-shrink:0;}
.lf-toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:16px;}
.lf-toolbar .searchbar{margin:0;}

/* ---- Popup letti aggiuntivi ---- */
.bed-input{display:flex; align-items:center; justify-content:center; gap:18px; margin:18px 0 6px;}
.bed-input button{width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:#fff;
  font-size:23px; font-weight:700; color:var(--ink2); cursor:pointer; line-height:1;}
.bed-input button:hover{background:var(--bg); border-color:#d3dae3;}
.bed-input #bed-val{font-size:28px; font-weight:800; min-width:40px; text-align:center; font-variant-numeric:tabular-nums;}

/* ---- Picker icone tipo camera ---- */
.icon-pick-btn{width:46px; height:40px; border:1px solid var(--line); background:#fff; border-radius:9px;
  display:grid; place-items:center; cursor:pointer; color:var(--ink2);}
.icon-pick-btn svg{width:24px; height:24px;} .icon-pick-btn.sm{width:40px; height:34px;}
.icon-pick-btn:hover{border-color:var(--accent);}
.icon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:18px 0 6px;}
.icon-opt{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border:1px solid var(--line);
  border-radius:11px; background:#fff; cursor:pointer; font-size:11.5px; color:var(--ink2); font-weight:600;}
.icon-opt svg{width:26px; height:26px; color:var(--ink);}
.icon-opt:hover{border-color:var(--accent); background:var(--accent-soft);}

/* ---- Board card LANDSCAPE (larga, non alta — altezza = rail stati) ---- */
.boardgrid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));}
.acard.board.land{display:flex; gap:0; padding:0; cursor:default; align-items:stretch; overflow:hidden;}
.acard.board.land:hover{transform:none; box-shadow:0 10px 26px -18px rgba(20,30,50,.35); border-color:#dbe1ea;}
.acard.board.land .ac-main{flex:1; min-width:0; display:flex; flex-direction:column; padding:13px 14px 12px 15px; border-left:4px solid var(--tc);}
.acard.board.land .ac-head{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-height:24px;}
.ac-occ{display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:800; line-height:1;
  color:#2f6fd6; background:color-mix(in srgb,#3b82f6 12%,#fff); border:1px solid color-mix(in srgb,#3b82f6 26%,#fff);
  padding:6px 10px; border-radius:9px; font-variant-numeric:tabular-nums;}
.ac-occ svg{width:16px; height:16px;}
.acard.board.land .ac-num{font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1; margin-top:5px;}
.acard.board.land .ac-tipo{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink2); font-weight:600; margin-top:6px;}
.ac-tic{display:inline-flex; flex-shrink:0;} .ac-tic svg{width:22px; height:22px;}
.acard.board.land .ac-chips{margin-top:auto; padding-top:12px;}
.chip.bedchip.empty{color:var(--muted); background:#fff; border-color:var(--line); font-weight:800;}
.chip.bedchip.empty:hover{border-color:#c47d1a; color:#c47d1a;}
.chip.bedchip{cursor:pointer;} .chip.bedchip:hover{filter:brightness(.98);}
.ac-ctrl{display:flex; flex-direction:column; justify-content:space-between; gap:10px; flex-shrink:0;
  padding:14px 13px; background:#fbfcfe; border-left:1px solid var(--line2); min-width:132px;}
.ac-ctrl .prio-btns{width:110px;}
.ac-ctrl .tile-op{margin-top:0; font-size:12.5px; line-height:1.4;}
.acard.board.land .ac-states{padding:14px 13px; border-left:1px solid var(--line2); justify-content:center; background:#fbfcfe;}

/* ---- Manutenzione (ticket guasti) ---- */
.addbar .chk{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink2); font-weight:600; white-space:nowrap;}
.btn.sm{padding:7px 12px; font-size:13px;}
.tk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;}
.tkcard{display:flex; flex-direction:column; height:186px; background:var(--panel); border:1px solid var(--line);
  border-top:4px solid var(--sc); border-radius:14px; padding:14px 16px 13px; text-decoration:none; color:var(--ink);
  cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; overflow:hidden;}
.tkcard:hover{transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(20,30,50,.35); border-color:#d8dde6;}
.clamp2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tk-cardfoot{margin-top:auto; padding-top:11px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.tk-who{font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tk-icons{display:flex; align-items:center; gap:11px; flex-shrink:0; color:var(--muted); font-size:12.5px; font-weight:700;}
.tk-icons span{display:inline-flex; align-items:center; gap:4px;} .tk-icons svg{width:14px; height:14px;}
.tk-open{color:var(--blue) !important;}
.tk-top{display:flex; align-items:center; gap:9px;}
.tk-loc{font-size:13px; font-weight:800; color:var(--ink); background:var(--bg); border:1px solid var(--line); padding:3px 10px; border-radius:20px;}
.tk-urg{font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--red); background:var(--red-soft); padding:3px 9px; border-radius:20px;}
.tk-title{font-size:16px; font-weight:700; color:var(--ink); margin-top:11px;}
.tk-desc{font-size:13.5px; color:var(--ink2); margin-top:3px; line-height:1.45;}
.tk-meta{font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.5;}
.tk-foot{margin-top:13px; padding-top:13px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:10px;}
.tk-assign{display:flex; gap:6px;}
.tk-assign input{flex:1; min-width:0; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px;}
.tk-assign input:focus{outline:none; border-color:var(--accent);}
.tk-states{display:flex; flex-wrap:wrap; gap:5px;}
.tk-states form{display:flex;}
.tk-sbtn{border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:8px; padding:5px 9px;
  font-size:12px; font-weight:700; cursor:pointer;}
.tk-sbtn:hover{border-color:var(--c); color:var(--c);}
.tk-sbtn.on{background:color-mix(in srgb,var(--c) 14%,#fff); border-color:var(--c); color:var(--c);}

/* ---- Oggetti smarriti (lost & found) ---- */
.searchbar{display:flex; align-items:center; gap:9px; margin:-6px 0 16px; color:var(--muted);}
.searchbar input[name=q]{flex:1; max-width:420px; border:1px solid var(--line); border-radius:9px;
  padding:8px 12px; font-size:14px; color:var(--ink);}
.searchbar input[name=q]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.searchbar .clear{color:var(--muted); font-size:18px; font-weight:700; text-decoration:none; line-height:1; padding:0 2px;}
.searchbar .clear:hover{color:var(--red);}
.tk-cat{font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--ink2);
  background:var(--bg); border:1px solid var(--line); padding:3px 9px; border-radius:20px; white-space:nowrap;}
.og-body{display:flex; gap:12px; margin-top:11px; align-items:flex-start;}
.og-thumb{width:60px; height:60px; flex-shrink:0; border-radius:10px; overflow:hidden; background:var(--bg);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.og-thumb img{width:100%; height:100%; object-fit:cover;}
.og-noimg{color:#c4ccd8;} .og-noimg svg{width:24px; height:24px;}
.og-info{min-width:0; flex:1;}
.og-info .tk-title{margin-top:0;}
.og-guest{font-size:12.5px; color:var(--ink2); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---- Manutenzione: foto, upload, link, manutentore ---- */
.filebtn{display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--line);
  border-radius:9px; background:#fff; color:var(--ink2); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;}
.filebtn:hover{border-color:var(--accent);}
.filebtn.has{border-color:var(--green); color:var(--green); background:var(--green-soft);}
.filebtn input{display:none;}
.tk-fotos{display:flex; gap:9px; flex-wrap:wrap; margin-top:11px;}
.tk-foto{position:relative; display:block; width:88px; height:66px; border-radius:9px; overflow:hidden; border:1px solid var(--line);}
.tk-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.tk-foto span{position:absolute; left:0; bottom:0; right:0; font-size:10px; font-weight:700; text-align:center;
  background:rgba(15,18,24,.6); color:#fff; padding:2px;}
.tk-foto.ok span{background:rgba(31,157,99,.85);}
.tk-motivo{margin-top:10px; font-size:13px; color:#8a5a12; background:#fdf3e2; border:1px solid #f0dcb6; border-radius:8px; padding:8px 11px;}
.tk-hint{font-size:12.5px; color:var(--blue); text-decoration:none; font-weight:600;}
.tk-assign select{flex:1; min-width:0; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:#fff;}
.tk-link{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted);}
.tk-link span{white-space:nowrap;}
.tk-link input{flex:1; min-width:0; padding:5px 8px; border:1px solid var(--line); border-radius:7px; font-size:11px; color:var(--ink2); background:var(--bg);}
.tk-link a{color:var(--blue); text-decoration:none; font-weight:700; font-size:15px;}

/* ---- Operatore: segnala guasto ---- */
.op-guasto{margin-top:14px; border-top:1px solid var(--line2); padding-top:12px;}
.op-guasto summary{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; font-weight:700; color:var(--red); list-style:none;}
.op-guasto summary::-webkit-details-marker{display:none;}
.op-guasto summary svg{width:17px; height:17px;}
.op-gform{display:flex; flex-direction:column; gap:9px; margin-top:11px;}
.op-gform input[type=text], .op-gform input:not([type]), .op-gform textarea{width:100%; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; font-size:14px; font-family:inherit; resize:vertical;}
.op-gform input:focus, .op-gform textarea:focus{outline:none; border-color:var(--accent);}
.op-file{display:flex; align-items:center; justify-content:center; gap:9px; padding:13px; border:1.5px dashed var(--line);
  border-radius:11px; color:var(--ink2); font-size:14px; font-weight:600; cursor:pointer;}
.op-file svg{width:19px; height:19px;}
.op-file.has{border-style:solid; border-color:var(--green); color:var(--green); background:var(--green-soft);}
.op-file input{display:none;}
.op-btn.guasto{background:var(--red); color:#fff;}

/* ---- Operatore: frigobar (consumi minibar) ---- */
.op-frigo summary{color:#0d9488;}
.op-frigo-badge{margin-left:auto; background:#0d9488; color:#fff; font-size:12px; font-weight:800;
  min-width:20px; height:20px; padding:0 6px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;}
.op-frigo-form{display:flex; flex-direction:column; gap:6px; margin-top:11px;}
.op-frigo-row{display:flex; align-items:center; gap:12px; padding:7px 10px; border:1px solid var(--line);
  border-radius:11px; background:var(--bg);}
.op-frigo-row.has{border-color:#0d9488; background:color-mix(in srgb,#0d9488 8%,#fff);}
.op-frigo-name{flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--ink); display:flex; flex-direction:column;}
.op-frigo-price{font-size:12px; color:var(--muted); font-weight:600;}
.op-frigo-form .op-btn{background:#0d9488; color:#fff;}

/* ---- Reception: riepilogo consumi frigobar ---- */
.fg-datepick input{padding:8px 12px; border:1px solid var(--line); border-radius:9px; font-size:14px; color:var(--ink);}
.fg-datepick input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.fg-summary{display:flex; gap:22px; align-items:baseline; flex-wrap:wrap; margin-bottom:18px; padding:14px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;}
.fg-sum-k{font-size:13.5px; color:var(--ink2);}
.fg-sum-k .n{font-size:20px; font-weight:800; color:var(--ink); margin-right:5px;}
.fg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;}
.fg-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.fg-card-h{display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:1px solid var(--line); background:var(--bg);}
.fg-cam{font-size:14.5px; font-weight:800; color:var(--ink);}
.fg-ospite{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fg-subtot{margin-left:auto; font-size:14px; font-weight:800; color:#0d9488; white-space:nowrap;}
.fg-tbl{width:100%; border-collapse:collapse;}
.fg-tbl td{padding:8px 15px; font-size:14px; border-top:1px solid var(--line2);}
.fg-tbl tr:first-child td{border-top:none;}
.fg-q{width:44px; font-weight:800; color:#0d9488;}
.fg-n{color:var(--ink);}
.fg-p{text-align:right; color:var(--muted); white-space:nowrap;}

/* ---- Pagina riparazione (manutentore) ---- */
.rip-title{font-size:17px; font-weight:800; margin-top:12px;}
.rip-desc{font-size:14px; color:var(--ink2); margin-top:4px; line-height:1.5;}
.rip-label{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:16px; margin-bottom:8px;}
.rip-fotos{display:flex; gap:10px; flex-wrap:wrap;}
.rip-fotos img{width:104px; height:104px; object-fit:cover; border-radius:11px; border:1px solid var(--line); display:block;}
.rip-actions{margin-top:20px; display:flex; flex-direction:column; gap:14px;}
.rip-ok{display:flex; flex-direction:column; gap:11px;}
.rip-no summary{cursor:pointer; font-size:13.5px; color:var(--muted); font-weight:600; text-align:center;}
.rip-no form{display:flex; flex-direction:column; gap:10px; margin-top:11px;}
.rip-no textarea{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; font-family:inherit;}
.rip-no textarea:focus{outline:none; border-color:var(--accent);}

/* ---- Dettaglio ticket + chat/cronologia ---- */
.back{display:inline-block; font-size:13px; color:var(--muted); text-decoration:none; font-weight:600; margin-bottom:6px;}
.back:hover{color:var(--ink);}
.dt-grid{display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start;}
.dt-main{display:flex; flex-direction:column; gap:16px;}
.dt-side{display:flex; flex-direction:column; gap:16px;}
.dt-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.dt-h{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:12px;}
.dt-title{font-size:18px; font-weight:800; letter-spacing:-.01em;}
.dt-desc{font-size:14.5px; color:var(--ink2); margin-top:6px; line-height:1.55;}
.dt-meta{font-size:13px; color:var(--muted); margin-top:12px; line-height:1.5;}
.dt-flabel{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin:6px 0 8px;}
.dt-fotos{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
.dt-fotos img{width:118px; height:118px; object-fit:cover; border-radius:11px; border:1px solid var(--line); display:block;}
.dt-assign{display:flex; gap:8px;}
.dt-assign select{flex:1; min-width:0; padding:9px 11px; border:1px solid var(--line); border-radius:9px; font-size:14px; background:#fff;}
.dt-side .tk-states{display:flex; flex-direction:column; gap:7px;}
.dt-side .tk-states form{display:flex;} .dt-side .tk-sbtn{width:100%; text-align:left; padding:9px 12px; font-size:13px;}

.chat{display:flex; flex-direction:column; gap:11px; max-height:420px; overflow-y:auto; margin-bottom:14px;}
.chat-row.sys{text-align:center;}
.chat-sys{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); background:var(--bg);
  border:1px solid var(--line2); border-radius:20px; padding:5px 13px;}
.chat-sys .dot{width:6px; height:6px; border-radius:50%; background:var(--slate); flex-shrink:0;}
.chat-sys .chat-t{color:#aab2bf;}
.chat-msg{background:var(--bg); border:1px solid var(--line2); border-radius:12px; padding:10px 13px;}
.chat-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.chat-head b{font-size:13.5px; font-weight:700;}
.chat-t{font-size:11.5px; color:var(--muted); white-space:nowrap;}
.chat-body{font-size:14px; color:var(--ink2); margin-top:4px; line-height:1.5; white-space:pre-wrap;}
.chat-form{display:flex; gap:8px; border-top:1px solid var(--line2); padding-top:13px;}
.chat-form input{flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-size:14px;}
.chat-form input:focus{outline:none; border-color:var(--accent);}
@media (max-width:820px){ .dt-grid{grid-template-columns:1fr;} }

/* ---- Badge sidebar (guasti aperti) ---- */
.nav-badge{margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:20px; background:var(--red);
  color:#fff; font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}

/* ---- Dettaglio: modifica/elimina + foto elimina ---- */
.dt-hrow{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.dt-lnk{background:none; border:none; font-family:inherit; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; padding:0;}
.dt-lnk:hover{color:var(--ink);}
.dt-lnk.del{color:var(--red);} .dt-lnk.del:hover{text-decoration:underline;}
.dt-edit{margin-top:14px; border-top:1px solid var(--line2); padding-top:12px;}
.dt-edit summary{cursor:pointer; font-size:13px; font-weight:700; color:var(--blue); list-style:none;}
.dt-edit summary::-webkit-details-marker{display:none;}
.dt-eform{display:flex; flex-direction:column; gap:9px; margin-top:12px;}
.dt-eform input, .dt-eform textarea, .dt-eform select{width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:9px; font-size:14px; font-family:inherit; resize:vertical;}
.dt-eform input:focus, .dt-eform textarea:focus, .dt-eform select:focus{outline:none; border-color:var(--accent);}
.dt-erow{display:flex; gap:10px; align-items:center;} .dt-erow select{flex:1;}
.chk{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink2); font-weight:600; white-space:nowrap;}
.dt-foto{position:relative; display:inline-block;}
.dt-foto form{position:absolute; top:5px; right:5px; margin:0;}
.dt-foto form button{width:24px; height:24px; border-radius:50%; border:none; background:rgba(15,18,24,.62); color:#fff;
  font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center;}
.dt-foto form button:hover{background:var(--red);}

/* ---- Operatore: i miei guasti ---- */
.op-guasti-mine{margin:18px 14px 30px; }
.op-gm-h{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:10px; padding-left:2px;}
.op-gm-row{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; margin-bottom:8px;}
.op-gm-txt{flex:1; min-width:0;}
.op-gm-t{font-size:14.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.op-gm-sub{font-size:12px; color:var(--muted); margin-top:2px;}
.op-gm-st{font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:20px; white-space:nowrap; flex-shrink:0;}

/* ---- Form hotel / impostazioni ---- */
.fbox{display:flex; flex-direction:column; gap:11px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:18px 20px; max-width:760px;}
.fbox label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink2); flex:1;}
.fbox label.chk{flex-direction:row; align-items:center; gap:7px; font-weight:600;}
.fbox input{padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-size:14px; font-family:inherit; font-weight:400; color:var(--ink);}
.fbox input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.frow{display:flex; gap:12px; flex-wrap:wrap;}
.banner{max-width:760px; padding:11px 15px; border-radius:10px; font-size:13.5px; font-weight:600; margin-bottom:16px;}
.banner.ok{background:var(--green-soft); color:var(--green); border:1px solid #bfe3cd;}
.banner.err{background:var(--red-soft); color:var(--red); border:1px solid #f2c4c4;}

/* ---- Login/account: link secondario + alert successo ---- */
.alert.ok{background:var(--green-soft); border-color:#bfe3cd; color:var(--green);}
.login-link{display:inline-block; margin-top:12px; font-size:13px; color:var(--blue); text-decoration:none; font-weight:600; text-align:center;}
.login-link:hover{text-decoration:underline;}

/* ---- Compila giornata: griglia batch presenze ---- */
.gg-bulk{position:sticky; top:0; z-index:5; display:flex; flex-direction:column; gap:9px;
  background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 14px; margin-bottom:14px;}
.gg-bulk-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.gg-count{font-size:13px; font-weight:700; color:var(--ink); min-width:96px;}
.gg-arrow{font-size:12.5px; color:var(--muted); font-weight:600;}
.gg-smartlbl{font-size:12.5px; color:var(--muted);}
.gg-vsep{width:1px; height:20px; background:var(--line);}
.gg-mini{border:1px solid var(--line); background:#fff; color:var(--ink2); border-radius:8px;
  padding:6px 11px; font-size:12.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;}
.gg-mini:hover{border-color:var(--accent);}
.gg-mini-sel{border:1px solid var(--line); border-radius:8px; padding:6px 9px; font-size:12.5px; color:var(--ink); background:#fff;}
.gg-mini-num{width:66px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:12.5px; text-align:center; -moz-appearance:textfield;}
.gg-mini-num::-webkit-outer-spin-button,.gg-mini-num::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.gg-mini-sel:focus,.gg-mini-num:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.gg-floor{margin-bottom:16px;}
.gg-floor-h{display:flex; align-items:center; gap:10px; margin:0 2px 8px;}
.gg-selall{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer;}
.gg-selall input{width:16px; height:16px;}
.gg-floor-n{font-size:12px; color:var(--muted); background:var(--bg); border:1px solid var(--line); padding:2px 9px; border-radius:20px;}
.gg-row{display:flex; align-items:center; gap:12px; padding:8px 12px; border:1px solid var(--line);
  border-radius:11px; background:var(--panel); margin-bottom:6px;}
.gg-row > .gg-sel{width:16px; height:16px; flex-shrink:0;}
.gg-cam{width:150px; flex-shrink:0; min-width:0; display:flex; align-items:baseline; gap:8px;}
.gg-num{font-size:16px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;}
.gg-type{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gg-seg{display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; flex-shrink:0;}
.gg-opt{display:inline-flex; cursor:pointer;}
.gg-opt input{position:absolute; opacity:0; width:0; height:0;}
.gg-opt > span{display:block; padding:7px 13px; font-size:12.5px; font-weight:700; color:var(--muted);
  border-left:1px solid var(--line); white-space:nowrap;}
.gg-opt:first-child > span{border-left:none;}
.gg-opt input:disabled + span{opacity:.35; cursor:not-allowed;}
.gg-opt input:checked + .s-out{background:var(--slate-soft); color:var(--slate);}
.gg-opt input:checked + .s-in{background:var(--bg); color:var(--ink);}
.gg-opt input:checked + .s-arrivo{background:var(--green-soft); color:var(--green);}
.gg-opt input:checked + .s-fermo{background:var(--blue-soft); color:var(--blue);}
.gg-opt input:checked + .s-part{background:var(--red-soft); color:var(--red);}
.gg-opt input:focus-visible + span{box-shadow:inset 0 0 0 2px var(--accent);}
.gg-pax,.gg-letti{width:56px; flex-shrink:0; padding:7px 6px; border:1px solid var(--line); border-radius:8px; font-size:13px; text-align:center; -moz-appearance:textfield;}
.gg-pax::-webkit-outer-spin-button,.gg-pax::-webkit-inner-spin-button,.gg-letti::-webkit-outer-spin-button,.gg-letti::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.gg-osp{flex:1; min-width:80px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px;}
.gg-pax:focus,.gg-letti:focus,.gg-osp:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.gg-lock{flex-shrink:0; color:var(--muted); display:inline-flex;}
.gg-foot{position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin-top:6px;}
@media(max-width:820px){
  .gg-row{flex-wrap:wrap;}
  .gg-seg{order:3;} .gg-osp{order:4; flex-basis:100%;}
}

/* ---- sotto-navigazione a schede ---- */
.subnav{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:-4px 0 18px;}
.subnav a{padding:9px 15px; font-size:14px; font-weight:700; color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;}
.subnav a:hover{color:var(--ink2);}
.subnav a.on{color:var(--ink); border-bottom-color:var(--accent);}

/* ---- vista settimana: calendario a barre ---- */
.wk-nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.wk-range{font-size:15px; font-weight:800; color:var(--ink);}
.wk-legend{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; font-size:12.5px; color:var(--ink2);}
.wk-legend span{display:inline-flex; align-items:center; gap:6px;}
.wk-dot{width:11px; height:11px; border-radius:3px; display:inline-block;}
.wk-scroll{overflow-x:auto;}
.wk-wd{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.wk-dn{font-size:15px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;}
.wk-num{font-size:14px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1;}
.wk-type{font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---- tape chart (calendario soggiorni a barre) ---- */
.tp{display:inline-block; min-width:100%;}
.tp-head{display:flex; margin-bottom:3px;}
.tp-corner{width:96px; flex:none; position:sticky; left:0; z-index:5; background:var(--panel);}
.tp-dayh{width:120px; flex:none; text-align:center; padding:6px 0; display:flex; flex-direction:column; gap:1px; border-radius:8px;}
.tp-dayh.we{background:var(--bg);}
.tp-dayh.today{background:var(--accent-soft);}
.tp-dayh.mon{box-shadow:inset 1px 0 0 var(--line);}
.tp-floor{position:sticky; left:0; width:max-content; font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em; margin:11px 0 3px 2px;}
.tp-row{display:flex; align-items:center; margin-bottom:4px;}
.tp-cam{width:96px; flex:none; position:sticky; left:0; z-index:3; background:var(--panel);
  display:flex; flex-direction:column; justify-content:center; min-width:0; padding-right:8px;
  border-right:1px solid var(--line); height:40px;}
.tp-track{position:relative; height:40px; flex:none; border:1px solid var(--line2); border-radius:8px;}
.tp-cells{position:absolute; inset:0; display:flex; z-index:1; border-radius:8px; overflow:hidden;}
.tp-cell{flex:1; background:transparent; border:none; border-right:1px solid var(--line2); cursor:pointer; padding:0; transition:background .1s;}
.tp-cell:last-child{border-right:none;}
.tp-cell.mon{border-left:1px solid var(--line);}
.tp-cell.we{background:color-mix(in srgb, var(--muted) 7%, transparent);}
.tp-cell:hover{background:var(--accent-soft);}
.tp-cell.today{background:color-mix(in srgb, var(--accent-soft) 60%, transparent);}
.tp-cell.sel{background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent);}
.tp-bar{position:absolute; top:6px; height:28px; z-index:2; display:flex; align-items:stretch; border:none;
  border-radius:7px; overflow:hidden; cursor:pointer; padding:0; background:var(--blue-soft); min-width:12px;}
.tp-bar:hover{filter:brightness(.96);}
.tp-h{position:absolute; top:0; bottom:0; width:9px; z-index:3; cursor:ew-resize;}
.tp-hl{left:0;} .tp-hr{right:0;}
.tp-cap{width:6px; flex-shrink:0;}
.tp-arr{background:var(--green);}
.tp-par{background:var(--red);}
.tp-body{flex:1; min-width:0; display:flex; align-items:center; padding:0 7px; font-size:12px; font-weight:600;
  color:var(--blue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wk-wd{display:block;} .wk-dn{display:block; line-height:1.15;}

/* ---- comunicazioni interne (bacheca) ---- */
.cm-list{display:flex; flex-direction:column; gap:10px;}
.cm-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 16px;}
.cm-card.urg{border-color:#f2c4c4;}
.cm-card.fatta{opacity:.66;}
.cm-top{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px;}
.cm-urg{font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--red); background:var(--red-soft); padding:3px 9px; border-radius:20px;}
.cm-dest{font-size:12px; font-weight:700; color:var(--accent-ink); background:var(--accent-soft); padding:3px 10px; border-radius:20px;}
.cm-when{font-size:12.5px; color:var(--muted); margin-left:auto; white-space:nowrap;}
.cm-testo{font-size:15px; color:var(--ink); line-height:1.5; white-space:pre-wrap;}
.cm-card.fatta .cm-testo{text-decoration:line-through; color:var(--ink2);}
.cm-foot{display:flex; align-items:center; gap:10px; margin-top:11px;}
.cm-ok{padding:6px 12px; font-size:13px;}
.cm-done{font-size:12.5px; color:var(--green); font-weight:600;}
.kpi.lnk{text-decoration:none; color:inherit; display:block; transition:border-color .1s, transform .1s;}
.kpi.lnk:hover{border-color:var(--accent); transform:translateY(-2px);}

/* ==========================================================================
   Componenti rientrati dai <style> inline dei template  (2026-07-25)
   Vedi docs/DESIGN-UI.md. Stessa resa di prima, valori portati sui token:
   spaziature sulla scala --s*, raggi su --r*, letter-spacing su --track-lbl.
   ========================================================================== */

/* --- config/cameriere.html : interruttore in linea nella modale --- */
.switch-inline{display:flex; gap:var(--s2); align-items:center; font-size:13px;
  font-weight:600; color:var(--ink); padding-top:var(--s2);}
.switch-inline input{width:auto; flex:none;}

/* --- config/utenti.html : editor dei permessi --- */
.permedit{margin-top:var(--s1); border-top:1px solid var(--line); padding-top:var(--s3);}
.permtools{display:flex; gap:var(--s2); align-items:center; margin-bottom:6px; flex-wrap:wrap;}
.permlbl{font-size:11px; text-transform:uppercase; letter-spacing:var(--track-lbl);
  color:var(--muted); font-weight:700;}
.permgrp{margin:var(--s2) 0;}
.permgrp h5{margin:0 0 2px; font-size:11px; text-transform:uppercase;
  letter-spacing:var(--track-lbl); color:var(--slate);}
.permrow{display:flex; gap:var(--s2); align-items:flex-start; padding:var(--s1) 0; cursor:pointer;}
.permrow input{width:auto; margin-top:3px; flex:none;}
.permrow .pl{font-size:13px; font-weight:600; color:var(--ink);}
.permrow .pd{font-size:11px; color:var(--muted); line-height:1.3;}

/* --- frigobar/index.html : righe prodotto nella modale consumo --- */
.fg-prodrows{margin:var(--s3) 0 var(--s1); border-top:1px solid var(--line);}
.fg-prodrow{display:flex; align-items:center; gap:var(--s3); padding:7px 0;
  border-bottom:1px solid var(--line2);}
.fg-prodn{font-size:13px; font-weight:600; color:var(--ink); flex:1;}
.fg-stock{font-size:11px; white-space:nowrap;}
.fg-prodrow input{width:64px; flex:none; text-align:center;}

/* --- hotel/modifica.html : pannello moduli acquistati --- */
.mod-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s5); margin:var(--s1) 0 6px;}
.mod-row{display:flex; gap:9px; align-items:flex-start; cursor:pointer; padding:var(--s1) 0;}
.mod-row input{width:auto; flex:none; margin-top:3px;}
.mod-n{font-size:13px; font-weight:700; color:var(--ink);}
.mod-d{font-size:11px; color:var(--muted); line-height:1.3;}
@media (max-width:640px){ .mod-grid{grid-template-columns:1fr;} }

/* --- operatore/oggi.html : selettore lingua nella barra scura --- */
.op-top-r{display:flex; align-items:center; gap:var(--s3);}
.op-lang{margin:0;}
.op-lang select{font:inherit; font-size:13px; padding:5px var(--s2); border-radius:9px;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff;}
.op-lang select option{color:#111;}
html[dir=rtl] .op-bar{left:auto; right:0;}

/* --- app_login.html : accesso operatore (pagina scura a sé stante) ---------
   Prima non caricava nemmeno ds.css e usava un blu #2f6bd8 che non è il brand.
   Ora usa l'indigo Hora e il teal d'accento. Selettori tutti sotto .applogin
   perché la pagina non ha la shell e userebbe tag generici. */
body.applogin{min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#242a5a 0%,#1b2050 100%); color:#dfe3f0; padding:var(--s6);}
.applogin .card{width:100%; max-width:360px; text-align:center;}
/* .logo qui è il marchio centrato, non la voce della sidebar (ds.css riga ~41) */
.applogin .logo{display:flex; justify-content:center; padding:0; margin-bottom:6px;}
.applogin .sub{color:var(--side-mut); font-size:14px; margin-bottom:var(--s6);}
.applogin form.login{display:flex; flex-direction:column; gap:var(--s3);}
.applogin label{text-align:start; font-size:12px; text-transform:uppercase;
  letter-spacing:var(--track-lbl); color:var(--side-mut); font-weight:700;}
.applogin input[name=codice]{width:100%; font:inherit; font-size:26px; letter-spacing:5px;
  text-align:center; text-transform:uppercase; padding:var(--s4) var(--s3); border-radius:var(--r-lg);
  border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; font-weight:700;}
.applogin input[name=codice]::placeholder{color:rgba(255,255,255,.28); letter-spacing:4px;}
.applogin input[name=codice]:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(25,138,178,.28);}
.applogin button[type=submit]{font:inherit; font-size:17px; font-weight:700; padding:15px;
  border:none; border-radius:var(--r-lg); background:var(--accent); color:#fff; cursor:pointer;}
.applogin button[type=submit]:hover{filter:brightness(1.06);}
.applogin .err{background:rgba(192,57,43,.18); color:#ffb4ac; border:1px solid rgba(192,57,43,.5);
  border-radius:var(--r); padding:var(--s3); font-size:14px; margin-bottom:var(--s4);}
.applogin .hint{margin-top:var(--s5); color:var(--side-mut); font-size:13px; line-height:1.5;}
.applogin .lang{margin-top:var(--s6);}
.applogin .lang select{font:inherit; font-size:14px; padding:var(--s2) var(--s3); border-radius:var(--r);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#dfe3f0;}
.applogin .lang select option{color:#111;}

/* ---- vista compatta della board (2026-07-25) ------------------------------
   Serve alla reception per vedere più camere senza scorrere: numero, tipo,
   chip e cambio stato. La colonna dei comandi (priorità e assegnazione) qui
   sparisce — a questa larghezza le tre colonne non ci stanno e il numero
   camera andava a capo. Chi deve assegnare usa la vista comoda o
   /assegnazione, che è la schermata fatta apposta. */
html.board-dense .arooms{grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:var(--s2);}
html.board-dense .acard.board.land .ac-main{padding:11px 11px 10px 12px;}
html.board-dense .acard.board.land .ac-num{font-size:23px; margin-top:3px;}
html.board-dense .acard.board.land .ac-tipo{font-size:12px; margin-top:4px; gap:6px;}
html.board-dense .acard.board.land .ac-tipo .ac-tic svg{width:17px; height:17px;}
html.board-dense .acard.board.land .ac-chips{padding-top:9px; gap:5px;}
html.board-dense .ac-ctrl{display:none;}
html.board-dense .acard.board.land .ac-states{padding:9px 7px; gap:4px;}
html.board-dense .ac-sbtn{width:28px; height:28px; border-radius:var(--r-sm);}
html.board-dense .ac-sbtn svg{width:15px; height:15px;}
html.board-dense .ac-occ{font-size:13px;}

.seg[data-seg]{display:flex; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;}
.seg[data-seg] button{border:none; background:none; padding:7px 12px; font-size:13px;
  font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;}
.seg[data-seg] button + button{border-left:1px solid var(--line);}
.seg[data-seg] button.on{background:var(--brand); color:#fff;}
.seg[data-seg] button svg{width:14px; height:14px;}

/* conteggio dentro le linguette di filtro (manutenzione, oggetti):
   dice quanti ce ne sono senza doverli contare a occhio */
.board-dates a{display:inline-flex; align-items:center; gap:7px;}
.board-dates a .n{font-size:11px; font-weight:800; line-height:1; padding:2px 6px;
  border-radius:20px; background:var(--slate-soft); color:var(--ink2);
  font-variant-numeric:tabular-nums;}
.board-dates a.on .n{background:rgba(255,255,255,.22); color:#fff;}

/* ---- tabella per elenchi lunghi (manutenzione) ----------------------------
   Sostituisce la griglia di schede dove il numero di righe conta più
   dell'effetto vetrina. La riga intera è cliccabile; il link "apri" resta
   perché la riga cliccabile non è raggiungibile da tastiera. */
.tblwrap{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;}
.tblscroll{overflow-x:auto;}
.tblwrap table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:720px;}
.tblwrap thead th{text-align:left; font-size:10.5px; text-transform:uppercase;
  letter-spacing:var(--track-lbl); color:var(--muted); font-weight:800;
  padding:11px 14px; background:#fafbfd; border-bottom:1px solid var(--line); white-space:nowrap;}
.tblwrap tbody td{padding:11px 14px; border-bottom:1px solid var(--line2); vertical-align:middle;}
.tblwrap tbody tr{cursor:pointer;}
.tblwrap tbody tr:last-child td{border-bottom:none;}
.tblwrap tbody tr:hover{background:#fafbfd;}
.tblwrap tbody tr td:first-child{box-shadow:inset 3px 0 0 var(--sc);}
.tblwrap .nowrap{white-space:nowrap;}
.tblwrap .muted{color:var(--muted);}
.tblwrap .mono{font-variant-numeric:tabular-nums;}
.tbl-main{display:flex; align-items:center; gap:var(--s3); min-width:0;}
.tm-tx{min-width:0;}
.tm-tx b{display:block; font-weight:700; font-size:13.5px;}
.tm-tx span{display:block; font-size:12px; color:var(--muted); margin-top:1px;}
.clamp1{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tm-ic{display:flex; align-items:center; gap:9px; margin-left:auto; flex-shrink:0;
  font-size:11.5px; font-weight:700; color:var(--muted);}
.tm-ic span{display:inline-flex; align-items:center; gap:4px;}
.tm-ic svg{width:14px; height:14px;}
.tbl-go{text-align:right; white-space:nowrap;}
.tbl-go a{color:var(--accent); font-weight:700; font-size:12.5px; text-decoration:none;}
.tbl-go a:hover{text-decoration:underline;}

/* ---- dashboard (2026-07-26) -----------------------------------------------
   Riepilogo prima del dettaglio: i numeri che contano in cima, poi andamento
   e cose da guardare affiancati, poi la tabella per operatore. */
.kpi2{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:13px 15px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow);
  position:relative; overflow:hidden; text-decoration:none; color:inherit;}
.kpi2::after{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--k);}
.kpi2.lnk:hover{border-color:var(--accent); transform:translateY(-2px);}
.kpi2 .lb{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--track-lbl); color:var(--muted);}
.kpi2 .lb svg{width:14px; height:14px; color:var(--k); flex-shrink:0;}
.kpi2 .vrow{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
.kpi2 .v{font-size:27px; font-weight:800; letter-spacing:-.03em; line-height:1;}
.kpi2 .of{font-size:12.5px; color:var(--muted); font-weight:600;}
.kpi2 .kbar{height:4px; border-radius:3px; background:var(--line2); overflow:hidden;}
.kpi2 .kbar i{display:block; height:100%; border-radius:3px; background:var(--k);}
.kpi2 .foot{font-size:11.5px; color:var(--muted);}

.dash2{display:grid; grid-template-columns:1.5fr 1fr; gap:var(--s4); align-items:start;
  margin-bottom:var(--s6);}
@media (max-width:1080px){ .dash2{grid-template-columns:1fr;} }

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;}
.panel-h{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line2);}
.panel-h h3{font-size:13px; font-weight:800; text-transform:uppercase;
  letter-spacing:var(--track-lbl); color:var(--ink2);}
.panel-h .sp{flex:1;}
.panel-h .pmuted{font-size:12px; color:var(--muted); font-weight:600;}
.panel-b{padding:16px;}
.pvuoto{color:var(--muted); font-size:13.5px; padding:14px 2px; text-align:center;}

/* riga di avviso */
.alrow{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line2);
  text-decoration:none; color:inherit;}
.alrow:last-child{border-bottom:none;}
.alrow:hover .tx b{color:var(--accent);}
.alrow .ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--c) 13%,#fff); color:var(--c); flex-shrink:0;}
.alrow .ic svg{width:16px; height:16px;}
.alrow .tx{min-width:0; flex:1;}
.alrow .tx b{display:block; font-size:13.5px; font-weight:700; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.alrow .tx span{font-size:12px; color:var(--muted);}
.alrow .urg{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 8px; border-radius:20px; background:var(--red-soft); color:#9c2c20; flex-shrink:0;}
.alrow .when{font-size:11.5px; color:var(--muted); flex-shrink:0;}

/* ---- pagina Opzioni (per-hotel) -------------------------------------------
   Interruttori di comportamento. Sezioni per modulo, una riga per opzione. */
.okbar{display:flex; align-items:center; gap:9px; background:var(--green-soft);
  color:var(--green-ink, #0f6b40); border:1px solid #bfe3cd; border-radius:var(--r);
  padding:11px 14px; font-size:13.5px; font-weight:700; margin-bottom:var(--s5);}
.okbar svg{width:16px; height:16px;}
.opt-sec{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:var(--s4);}
.opt-sec-h{font-size:11.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:var(--track-lbl); color:var(--ink2); padding:12px 16px;
  background:#fafbfd; border-bottom:1px solid var(--line);}
.opt-row{display:flex; align-items:center; gap:var(--s4); padding:14px 16px;
  border-bottom:1px solid var(--line2);}
.opt-row:last-child{border-bottom:none;}
.opt-txt{flex:1; min-width:0;}
.opt-nm{display:block; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer;}
.opt-ds{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45; max-width:70ch;}
.opt-sel{border:1px solid var(--line); border-radius:9px; padding:8px 11px;
  font-size:13.5px; color:var(--ink); background:#fff; font-family:inherit; flex-shrink:0;}
.opt-sel:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.opt-foot{display:flex; justify-content:flex-end; margin-top:var(--s3);}

/* interruttore on/off */
.switch{position:relative; flex-shrink:0; cursor:pointer; display:inline-flex;}
.switch input{position:absolute; opacity:0; width:0; height:0;}
.switch .track{width:46px; height:26px; border-radius:20px; background:#cdd5e0;
  display:inline-flex; align-items:center; padding:3px; transition:background .16s ease;}
.switch .dot{width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(16,24,40,.3); transition:transform .16s ease;}
.switch input:checked + .track{background:var(--green);}
.switch input:checked + .track .dot{transform:translateX(20px);}
html[dir=rtl] .switch input:checked + .track .dot{transform:translateX(-20px);}
.switch input:focus-visible + .track{outline:2px solid var(--accent); outline-offset:2px;}

/* ---- parcheggi: board operativa (2026-07-27) ------------------------------
   Stesso linguaggio della board camere: posti per zona, tessere con stato.
   La targa è l'elemento caratteristico. */
.pk-stalls{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s3);}
.pk-cap{display:flex; align-items:center; gap:var(--s3); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:16px 18px; margin-bottom:var(--s3);}
.pk-cap .big{font-size:30px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.pk-cap .big small{font-size:16px; color:var(--muted); font-weight:600;}
.pk-cap .lab{font-size:13px; color:var(--muted); font-weight:600;}
.pk-cap .bar{flex:1; height:8px; border-radius:5px; background:var(--line2); overflow:hidden; min-width:80px;}
.pk-cap .bar i{display:block; height:100%; background:var(--brand); border-radius:5px;}
.pk-stall{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; border-left:4px solid var(--sc); display:flex; flex-direction:column;}
.pk-stall.free{background:repeating-linear-gradient(135deg,#fff,#fff 9px,#fafbfd 9px,#fafbfd 18px);}
.pk-h{display:flex; align-items:center; gap:9px; padding:12px 13px 9px;}
.pk-code{font-size:19px; font-weight:800; letter-spacing:-.02em;}
.pk-tic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--tc) 12%,#fff); color:var(--tc);}
.pk-tic svg{width:16px;height:16px;}
.pk-st{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  padding:4px 9px; border-radius:20px; background:var(--sc-soft); color:var(--sc-ink);}
.pk-b{padding:0 13px 12px; display:flex; flex-direction:column; gap:9px; flex:1;}
.pk-who{display:flex; align-items:center; gap:8px; font-size:13px;}
.pk-who .sq{width:26px;height:26px;border-radius:8px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:10.5px;font-weight:800;flex-shrink:0;}
.pk-who b{font-weight:700;} .pk-who span{font-size:11.5px;color:var(--muted);}
.pk-when{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2);font-weight:600;}
.pk-when svg{width:14px;height:14px;color:var(--muted);}
.pk-empty{font-size:12.5px;color:var(--muted);padding:6px 0 2px;}
.pk-f{display:flex;align-items:center;gap:7px;padding:9px 13px;border-top:1px solid var(--line2);background:#fafbfd;flex-wrap:wrap;}
.pk-price{font-size:12px;font-weight:800;padding:3px 9px;border-radius:20px;}
.pk-price.pay{background:var(--violet-soft, #f0e9ff);color:#5b21b6;}
.pk-price.free{background:var(--green-soft);color:var(--green-ink,#0f6b40);}
.pk-f .act{margin-left:auto;font-size:12.5px;font-weight:700;}
.pk-f .act.assign{color:var(--accent);} .pk-f .act.free-btn{color:var(--red);background:none;border:none;cursor:pointer;font-family:inherit;padding:0;}
/* coppia modifica+libera in fondo alla tessera (classe nuova: `pk-acts` non era presa) */
.pk-acts{margin-left:auto;display:flex;align-items:center;gap:10px;}
.pk-acts .act{margin-left:0;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;color:var(--accent);}
.pk-acts .act.del{color:var(--red);}
.pk-acts form{display:inline-flex;margin:0;}
/* targa */
.plate{display:inline-flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:5px;overflow:hidden;background:#fff;align-self:flex-start;}
.plate .eu{background:#1c3d8f;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 4px;font-size:8px;font-weight:800;min-width:9px;}
.plate .num{padding:4px 9px;font-size:14px;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums;}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROLLI DI FORM — aspetto nostro, non quello del sistema operativo
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ Il difetto che queste regole chiudono: da nessuna parte si toglieva
   l'`appearance` nativa, così ogni <select> disegnava il widget del OS (grigio,
   doppia freccia, font di sistema) dentro schermate per il resto curate. Bastava
   una select in una modale per far sembrare tutto un prototipo.

   I selettori ripetono le classi già esistenti (.mfield, .addbar, …) perché una
   regola sul solo elemento perderebbe contro di loro: qui serve pareggiare la
   specificità, non alzare la voce con !important.
   ⚠️ La tendina APERTA la disegna il sistema operativo e NON è stilabile in CSS:
   si può cambiare solo il controllo chiuso. Per una tendina interamente nostra
   servirebbe un componente JS. */
select,
.mfield select, .addbar select, .upload-row select, .tile-ctrls select,
.tk-assign select, .dt-assign select, .dt-eform select {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:14px;
  padding-right:32px;
  font-family:inherit; color:var(--ink);
  cursor:pointer;
  text-overflow:ellipsis;
}
select:hover{border-color:#d3dae3;}
select:disabled{background-color:var(--bg); color:var(--muted); cursor:not-allowed; opacity:.7;}
/* le select strette della board: stessa cura, meno spazio a destra */
.tile-ctrls select{background-position:right 7px center; background-size:12px; padding-right:24px;}

/* campi di testo, numero e data: bordo, raggio e fuoco uguali ovunque */
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=tel],input[type=url],input[type=number],input[type=date],
input[type=time],input:not([type]),textarea{
  font-family:inherit; color:var(--ink); background:#fff;
}
input[type=date],input[type=time]{-webkit-appearance:none; appearance:none;}
input::placeholder,textarea::placeholder{color:#9aa6b6; opacity:1;}
input:disabled,textarea:disabled,select[disabled]{background:var(--bg); color:var(--muted);}
/* il calendarietto del campo data: grigio come le altre icone, non nero di sistema */
input[type=date]::-webkit-calendar-picker-indicator{opacity:.55; cursor:pointer;}
input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1;}

/* ═══ STEPPER − / + ═══════════════════════════════════════════════════════
   Sostituisce le freccine native di <input type=number>, che sono minuscole e
   al telefono non si prendono. Due bottoni quadrati, grandi, con il numero in
   mezzo. Su schermo piccolo crescono a 46px: è la misura che DESIGN-UI.md
   fissa per l'uso con una mano e col guanto.
   (classi nuove: `stepper` non era presa in ds.css — controllato) */
.stepper{display:inline-flex; align-items:center; gap:6px; flex:none;}
.stepper button{
  width:38px; height:38px; flex:none;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  font-size:20px; font-weight:800; line-height:1; color:var(--ink);
  font-family:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, border-color .12s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  user-select:none;
}
.stepper button:hover{background:var(--bg); border-color:#c9d3de;}
.stepper button:active{background:var(--accent-soft); border-color:var(--accent); transform:translateY(1px);}
.stepper button:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.stepper button[disabled]{opacity:.35; cursor:not-allowed; background:var(--bg);}
.stepper button[disabled]:active{transform:none; background:var(--bg); border-color:var(--line);}
.stepper input{
  width:52px; height:38px; flex:none; padding:0;
  text-align:center; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums;
  border:1px solid var(--line); border-radius:10px; color:var(--ink); background:#fff;
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;}
.stepper input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
/* quando il valore non è zero si vede a colpo d'occhio quali righe hai toccato */
.stepper.on input{color:var(--accent); border-color:var(--accent); background:var(--accent-soft);}

@media (max-width:640px){
  .stepper button{width:46px; height:46px; font-size:22px; border-radius:12px;}
  .stepper input{width:56px; height:46px; font-size:17px; border-radius:12px;}
}

/* select su fondo scuro (barra lingua dell'app operatore e login soci):
   stesso trattamento ma chevron bianco, o sparirebbe sul blu.
   ⚠️ Queste regole dichiarano `background` con la scorciatoia, che azzera
   l'immagine: vanno ridichiarate qui, dopo, o restano senza freccia. */
.op-lang select, .applogin .lang select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:12px;
  padding-right:26px; cursor:pointer;
}

/* ═══ Striscia d'ambiente ═══════════════════════════════════════════════════
   Si vede solo se HORA_AMBIENTE è valorizzato o la modalità demo è attiva: in
   produzione questa riga non esiste proprio.
   ⚠️ Serve perché in locale e in demo si usano i nomi di dominio VERI: senza,
   si guarda la macchina di sviluppo credendo di guardare il cloud.
   (classe nuova: `envbar` non era presa — controllato) */
.envbar{position:sticky; top:0; z-index:60; display:flex; align-items:center;
  justify-content:center; gap:10px; padding:5px 14px;
  background:var(--amber); color:#3a2a08;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.envbar b{letter-spacing:.12em;}
.envbar span{font-weight:600; letter-spacing:0; text-transform:none; opacity:.85;}
.envbar.is-demo{background:var(--accent); color:#fff;}
@media print{ .envbar{display:none;} }