/* Hora Console — solo impaginazione.
   I colori, i font, i raggi e le ombre vengono dal design system della suite:
   qui dentro si usano soltanto i suoi token. Un colore nuovo scritto qui e'
   una seconda identita' visiva che entra dalla finestra. */

/* ── due colonne: a sinistra cosa si scrive, a destra cosa viene fuori ── */
.due-colonne{display:grid; grid-template-columns:320px 1fr; gap:var(--s4);
  align-items:start;}
@media (max-width:1100px){.due-colonne{grid-template-columns:1fr;}}

/* ── riquadro generico, stessa forma della .tbl ── */
.riq{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s5); margin-bottom:var(--s4);}
.riq > h2:first-child{margin-top:0;}
.riq h2{font-size:15px; font-weight:700; margin:var(--s5) 0 var(--s3); letter-spacing:-.01em;}

/* ── campi in colonna, come li vuole .form-card ma senza la sua larghezza ── */
.campo{display:block; margin-bottom:var(--s3);}
.campo > span{display:block; font-size:12px; font-weight:600; color:var(--ink2);
  margin-bottom:6px;}
.campo input,.campo select,.campo textarea{width:100%; padding:9px 12px;
  border:1px solid var(--line); border-radius:var(--r); font-size:14px;
  font-family:inherit; color:var(--ink); background:var(--panel);}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.campo textarea{font-size:13px; line-height:1.5;}
.campo-flag{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink);
  margin:6px 0;}
.campo-flag input{width:auto;}

/* ── griglia di campi affiancati (schede anagrafiche) ── */
.griglia{display:grid; gap:var(--s3);}
@media (max-width:900px){.griglia{grid-template-columns:1fr !important;}}

/* ── numeri: incolonnati, e le celle del listino strette ── */
.num{text-align:right; font-variant-numeric:tabular-nums;}
.cella{width:96px; text-align:right; padding:7px 9px; border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:13.5px; font-family:inherit;
  font-variant-numeric:tabular-nums; background:var(--panel); color:var(--ink);}
.cella:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}

/* ── il risultato di un'ipotesi: titolo a sinistra, numerone a destra ── */
.esito{display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap;
  margin-bottom:var(--s3);}
.esito h2{flex:1; margin:0;}
.esito-cifra{text-align:right;}
.esito-cifra b{display:block; font-size:26px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.esito-cifra.bene b{color:var(--green);}
.esito-cifra.male b{color:var(--red);}

/* ── avviso giallo: le ipotesi sono ipotesi, non si rifiutano ── */
.avviso{background:var(--amber-soft); border:1px solid var(--amber);
  color:var(--amber-ink); padding:10px 13px; border-radius:var(--r);
  font-size:13.5px; margin:var(--s2) 0;}
/* 🔴 Si chiamava `.ok`, e si scontrava con `.pill.ok` del design system: OGNI
   pillola verde («acceso», «governata», «in uso», «sì») si prendeva anche il
   padding, il bordo e il margine di questo riquadro, e usciva come un bottone
   gonfio — nelle tabelle copriva la riga di sopra. Un nome generico in un
   foglio nostro è un nome che prima o poi il design system usa (29/09). */
.messaggio-ok{background:var(--green-soft); border:1px solid var(--green); color:var(--green);
  padding:10px 13px; border-radius:var(--r); font-size:14px; margin:0 0 var(--s4);}
.messaggio-ok .btn{margin-left:var(--s2);}

/* .hint del design system nasce per stare SOTTO un campo, e ha un margine
   superiore negativo. Da sola dentro un riquadro sale addosso al testo di sopra:
   qui le si ridà uno spazio normale. Non e' un colore nuovo, e' impaginazione. */
.riq > .hint{margin-top:var(--s2);}
.riq > h2 + .hint{margin-top:calc(var(--s2) * -1);}

/* ⚠️ `.pill` del design system e' un `span` INLINE con padding verticale: dentro
   una riga di testo il padding esce dal box della riga e **si accavalla a quello
   che c'e' sopra**. In Hotel non si vede perche' le pillole stanno nelle celle di
   una tabella, da sole. Non la si tocca — e' della suite: le si da' una riga
   tutta sua, e dentro ai titoli la si rende un blocco in linea. */
.pillole{display:flex; flex-wrap:wrap; gap:6px; margin:var(--s2) 0;}
h1 .pill, h2 .pill{display:inline-block; vertical-align:middle;}

/* ── tabella nuda, per i conti dentro un riquadro ── */
.conto{width:100%; border-collapse:collapse;}
.conto td,.conto th{padding:6px 8px; border-bottom:1px solid var(--line2);
  font-size:14px; vertical-align:top; text-align:left;}
.conto th{font-size:11px; text-transform:uppercase; letter-spacing:var(--track-lbl);
  color:var(--muted); font-weight:700;}
.conto tr:last-child td{border-bottom:none;}
.conto .totale td{font-weight:700; color:var(--ink);}

/* ══════════════════════════════════════════════════════════════════════════
   SCHERMI STRETTI
   La conchiglia del design system e' `grid-template-columns:246px 1fr` con
   `height:100vh`: a 375px la barra laterale si prende due terzi dello schermo
   e il contenuto trabocca. In Hotel il caso non si pone — per il telefono
   hanno una vista apposta (l'operatore) — ma Console si guarda anche dal
   telefono, e una pagina che trabocca non e' «meno comoda»: e' rotta.
   Qui sotto c'e' solo impaginazione: nessun colore, nessun font, nessun raggio.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* la conchiglia si srotola: menu sopra, contenuto sotto, scorre la pagina */
  .app, .app.flagged{display:block; height:auto;}
  .side{flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--s1);
    padding:var(--s3);}
  .side .logo{padding:0 var(--s2) 0 0; font-size:17px; width:100%;
    margin-bottom:var(--s2);}
  /* i titoletti di gruppo servono a una colonna, non a una riga */
  .side .grp{display:none;}
  .nav{margin-bottom:0; padding:8px 11px;}
  .nav.on::before{display:none;}
  .side-user{margin-top:var(--s3); padding-top:var(--s3); width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3);}
  .side-user-main{padding:0;}
  .side-user-foot{padding:0;}
  .side-user-foot span{display:none;}

  .main{overflow:visible;}
  .top{height:auto; min-height:52px; padding:var(--s2) var(--s4); flex-wrap:wrap;
    gap:var(--s2);}
  .work{overflow:visible;}

  /* ⚠️ Una tabella non si stringe: o scorre, o spinge fuori tutta la pagina.
     Meglio che scorra lei. */
  .tbl{display:block; overflow-x:auto; white-space:nowrap;}

  /* i numeroni dei risultati non devono uscire dal riquadro */
  .esito{gap:var(--s2);}
  .esito-cifra{text-align:left;}
  .esito-cifra b{font-size:22px;}

  .riq{padding:var(--s4);}
  .head h1{font-size:22px;}
}

/* ── la scadenza di una richiesta privacy ──────────────────────────────────
   ⚠️ Il ritardo deve fare PIU' rumore, non meno: un adempimento in ritardo che
   si sbiadisce e' peggio di uno che non c'e'. Niente grigio, niente sparire.
   I colori sono i token del design system, non ne nasce nessuno nuovo. */
.pill.ritardo{background:var(--red-soft); color:var(--red); font-weight:800;}
.pill.oggi{background:var(--amber-soft); color:var(--amber-ink); font-weight:800;}
.riga-ritardo{border-left:3px solid var(--red);}


/* ══════════════════════════════════════════════════════════════════════════
   IL GIRO DEL 29/09 — campi, bottoni, pillole, tabelle
   Tutto misurato su ogni pagina prima di scrivere una riga. Solo impaginazione
   e token del design system: nessun colore nuovo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── un bottone che è un link resta un bottone ──
   `.btn` del design system non toglie la sottolineatura, e `a{color:inherit}`
   lascia quella del browser: «Apri una richiesta», «← tutte», «Storico»,
   «Riempi le celle», «Applica subito in Hotel» uscivano sottolineati. */
a.btn{text-decoration:none;}
.btn{white-space:nowrap;}

/* ── .form-card dà stile solo a `input`: select e textarea restavano del browser ── */
.form-card select,.form-card textarea{padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; font-size:15px; font-family:inherit; color:var(--ink);
  background:var(--panel); width:100%;}
.form-card textarea{line-height:1.5; resize:vertical;}
.form-card select:focus,.form-card textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);}

/* ── campi fuori da .campo e da .form-card: la rete sotto ──
   Un campo aggiunto domani senza il suo contenitore non deve tornare grezzo.
   Vale solo dove nessuna regola più precisa ha già deciso (specificità bassa). */
:where(.work) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea){
  font-family:inherit; font-size:14px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); padding:8px 11px;}
:where(.work) :where(input, select, textarea):focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);}
:where(.work) :where(input[type=checkbox], input[type=radio]){width:16px; height:16px;
  accent-color:var(--accent); vertical-align:middle;}

/* ── le pillole: non vanno a capo, e in una cella non escono dalla riga ── */
.pill{white-space:nowrap;}
td .pill{display:inline-block; line-height:1.3; margin:2px 0;}

/* ── .hint ha un margine NEGATIVO nel design system: nasce per stare sotto un
   campo. Dentro i nostri riquadri sta spesso sotto una tabella o un paragrafo,
   e ci saliva addosso («Nessun modulo: è Hora Hotel Free» incollato ai moduli). */
.riq .hint{margin:var(--s2) 0 0;}
.riq h2 + .hint{margin-top:calc(var(--s2) * -1);}
.form-card .hint{margin:-6px 0 0;}      /* lì il design system ha ragione */

/* ── tabelle dentro un riquadro: respiro prima di ciò che segue ── */
.riq .tbl{margin-bottom:var(--s3);}
.riq .tbl:last-child{margin-bottom:0;}
.tbl td > form{margin:0;}
/* la prima colonna di una tabella di caselle non deve prendersi mezzo schermo */
.tbl td:has(> input[type=checkbox]:only-child){width:1%;}

/* ── i moduli di ogni albergo nella scheda del cliente (03/10) ──
   Un albergo per blocco, separati da una riga: il nome, le caselle in griglia,
   il bottone. Solo impaginazione e token. */
.albergo{padding:var(--s4) 0; border-top:1px solid var(--line);
  scroll-margin-top:var(--s6);}   /* tornando dal salvataggio, il nome resta in vista */
.riq > h2 + .albergo{border-top:none; padding-top:0;}
.albergo:last-child{padding-bottom:0;}
.albergo-testa{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  margin-bottom:var(--s3);}
.albergo-testa strong{font-size:15px;}
.albergo-link{margin-left:auto; font-size:13px; font-weight:600; white-space:nowrap;}

/* ── 🧩 il modulo come SCHEDA (03/10) ─────────────────────────────────────
   Icona, nome, due righe di descrizione. Al passaggio si avvicina, scelta si
   colora e RESTA colorata: «quale è acceso» si legge senza cercare la spunta.
   La casella vera c'è (nascosta alla vista, non alla tastiera): lo stato lo
   decide lei, e la scheda lo mostra con :has(). Solo token del design system. */
.moduli{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:var(--s3);}
.modulo{position:relative; display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s3) var(--s4); padding-right:calc(var(--s4) + 26px);
  border:1.5px solid var(--line); border-radius:var(--r-lg); background:var(--panel);
  cursor:pointer; user-select:none;
  transition:border-color .15s, background .15s, box-shadow .15s, transform .15s;}
.modulo:hover{border-color:var(--accent); box-shadow:var(--shadow-lift);
  transform:translateY(-1px);}
.modulo > input{position:absolute; opacity:0; width:1px; height:1px; margin:0;
  pointer-events:none;}
.modulo:has(> input:focus-visible){box-shadow:0 0 0 3px var(--accent-soft);
  border-color:var(--accent);}

.modulo-icona{flex:none; display:grid; place-items:center; width:40px; height:40px;
  border-radius:var(--r); background:var(--accent-soft); color:var(--accent);
  transition:background .15s, color .15s;}
.modulo-icona svg{width:21px; height:21px;}
.modulo-testo{display:flex; flex-direction:column; gap:3px; min-width:0;}
.modulo-testo b{font-size:14px; color:var(--ink);}
.modulo-testo span{font-size:12.5px; line-height:1.4; color:var(--ink2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

.modulo-segno{position:absolute; top:var(--s3); right:var(--s3); display:grid;
  place-items:center; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--line); color:transparent;
  transition:background .15s, border-color .15s, color .15s;}
.modulo-segno svg{width:12px; height:12px;}

/* scelta: si accende, e resta accesa */
.modulo:has(> input:checked){border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent);}
.modulo:has(> input:checked) .modulo-icona{background:var(--accent); color:var(--panel);}
.modulo:has(> input:checked) .modulo-segno{background:var(--accent); border-color:var(--accent);
  color:var(--panel);}
.modulo:has(> input:checked) .modulo-testo b{color:var(--accent-ink);}
@media (prefers-reduced-motion:reduce){.modulo, .modulo *{transition:none;}
  .modulo:hover{transform:none;}}
.albergo .messaggio-ok, .albergo .avviso{margin:0 0 var(--s3);}

/* ── nel listino l'etichetta stava in alto e la cella da riempire più in basso:
   `.conto` allinea in alto (giusto per i testi lunghi), non dove c'è un campo ── */
.conto tr:has(input) > td{vertical-align:middle;}