/* L'impaginazione dell'applicazione a schermo: guscio, menu, barra, notifiche.
   Il vocabolario dei componenti sta in componenti.css, i valori in token.css,
   la resa su carta in stampa.css. */

*{box-sizing:border-box}
[hidden]{display:none!important}
body{ margin:0; font-family:var(--font-ui); font-size:var(--t-base);
  line-height:var(--i-normale); background:var(--bg); color:var(--testo);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
a{ color:var(--accento); text-decoration:none }
a:hover{ text-decoration:underline }

/* ───────────────────────────── ACCESSO ───────────────────────────── */

.schermata-login{ min-height:100vh; display:grid; place-items:center;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(46,124,176,.35), transparent 60%),
    linear-gradient(160deg, var(--accento-scuro), #0c2536) }
.card-login{ background:var(--superficie); padding:var(--s-7) var(--s-6);
  border-radius:var(--r-lg); width:min(92vw,392px); box-shadow:var(--ombra-alta) }
.card-login .logo{ font-size:var(--t-xl); font-weight:700; letter-spacing:.16em;
  color:var(--accento) }
.card-login .sottotitolo{ margin:var(--s-1) 0 var(--s-6); color:var(--tenue);
  font-size:var(--t-sm) }
.card-login label{ display:block; margin-bottom:var(--s-4); font-size:var(--t-sm);
  color:var(--tenue); font-weight:550 }
.card-login input{ width:100%; margin-top:var(--s-1); height:40px }
.card-login button{ width:100%; height:40px; justify-content:center }
/* Il secondo fattore (secondo-fattore.js): il QR da inquadrare, la chiave da scrivere a mano, i codici di riserva. */
.card-login.sf-larga{ width:min(92vw,460px) }
.card-login .piatto.sf-annulla{ margin-top:var(--s-3); background:none; border:0; color:var(--tenue); box-shadow:none }
.sf-scheda h2{ font-size:var(--t-lg) }
.sf-passi{ padding-left:1.2em; margin:0 0 var(--s-4); font-size:var(--t-sm); line-height:1.5 }
.sf-qr{ width:200px; max-width:70vw; margin:0 auto var(--s-4); background:#fff; padding:8px; border-radius:var(--r);
  border:1px solid var(--bordo) }
.sf-qr svg{ display:block; width:100%; height:auto }
.sf-chiave{ font-family:var(--mono); letter-spacing:.06em; word-break:break-all }
.sf-codice{ font-family:var(--mono); font-size:var(--t-lg); letter-spacing:.2em; text-align:center }
.sf-riserva{ list-style:none; padding:0; margin:0 0 var(--s-5); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-2) }
.sf-riserva code{ display:block; padding:6px 10px; border:1px dashed var(--bordo); border-radius:var(--r-sm); text-align:center;
  font-size:var(--t-md); letter-spacing:.08em }
.sf-messaggio{ color:var(--ok); font-weight:600 }
/* Un pulsante che si legge come un collegamento («Password dimenticata?»), anche dentro il modulo d'accesso. */
button.link, .card-login button.link{ background:none; border:0; box-shadow:none; padding:0; width:auto; height:auto;
  color:var(--accento); text-decoration:underline; font:inherit; cursor:pointer }
/* Il messaggio sotto il modulo di accesso. Si chiamava `.errore` e basta, ed
   è una parola troppo comune per stare da sola: `.pill.errore` e
   `.toast.errore` se ne prendevano il margine superiore. */
.errore-accesso{ color:var(--errore); font-size:var(--t-sm); min-height:18px;
  margin:var(--s-2) 0 0 }

/* ───────────────────────────── GUSCIO ───────────────────────────── */

.barra{ display:flex; align-items:center; gap:var(--s-4);
  background:var(--barra-sfondo); color:var(--su-colore);
  padding:0 var(--s-4); height:var(--barra-alta);
  position:sticky; top:0; z-index:20;
  box-shadow:0 1px 0 rgba(255,255,255,.08), var(--ombra) }
.marchio{ font-weight:700; letter-spacing:.16em; font-size:var(--t-md);
  color:var(--su-colore) }

/* Il contesto di lavoro — quale condominio, quale esercizio — non è un campo
   di un modulo: è dove ci si trova. Per questo non sembra un campo. */
.selettore{ display:flex; gap:var(--s-2); flex:1; min-width:0; align-items:center }
.selettore select{ background:rgba(255,255,255,.1); color:var(--su-colore);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-sm);
  height:32px; padding:0 var(--s-2); font-size:var(--t-sm); font-weight:550;
  max-width:300px; text-overflow:ellipsis;
  /* Un select in una riga flessibile non scende sotto la sua larghezza
     naturale: sul telefono spingeva la pagina 127 px oltre lo schermo. */
  min-width:0; flex:1 1 0 }
.selettore select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px; font-weight:550 }
.selettore select:focus{ border-color:rgba(255,255,255,.6); box-shadow:0 0 0 3px rgba(255,255,255,.18) }
.selettore select:hover{ background-color:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.34) }
.selettore select option{ color:var(--testo); background:var(--superficie) }
.utente{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--t-sm);
  color:rgba(255,255,255,.82) }

.corpo{ display:grid; grid-template-columns:var(--menu-largo) 1fr;
  min-height:calc(100vh - var(--barra-alta)) }

/* ───────────────────────────── MENU ─────────────────────────────
   Venticinque voci sono troppe per un elenco piatto: senza gruppi marcati e
   senza un segno a sinistra di ciascuna riga l'occhio non trova appigli e
   deve rileggere ogni volta dall'alto. */

.menu{ background:var(--superficie); border-right:1px solid var(--bordo);
  padding:var(--s-2) 0 var(--s-6); overflow-y:auto;
  /* Il menu resta dov'è mentre la pagina scorre: prima scorreva via con lei. */
  position:sticky; top:var(--barra-alta); height:calc(100vh - var(--barra-alta)); align-self:start }
.menu-cerca{ position:sticky; top:calc(var(--s-2) * -1); z-index:2; background:var(--superficie);
  padding:var(--s-2) var(--s-3) var(--s-2) }
.menu-cerca input{ width:100%; height:32px; font-size:var(--t-sm) }
.menu-vuoto{ padding:var(--s-3) var(--s-4); font-size:var(--t-sm); color:var(--tenue) }
/* I gruppi si chiudono con un clic sul titolo; la freccia dice come sono. */
.gruppo-menu{ cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between }
.gruppo-menu::after{ content:''; width:10px; height:10px; margin-right:2px; opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5l3-3' fill='none' stroke='%238a96a3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat;
  transition:transform var(--transizione) }
.gruppo-menu.chiuso::after{ transform:rotate(-90deg) }
.gruppo-menu:hover{ color:var(--n-600) }
.menu a{ display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-4); color:var(--n-700); font-size:var(--t-base);
  border-left:3px solid transparent; line-height:var(--i-stretta);
  transition:background var(--transizione), color var(--transizione) }
.menu a:hover{ background:var(--n-50); color:var(--testo); text-decoration:none }
.menu a.attivo{ background:var(--accento-tenue); border-left-color:var(--accento);
  font-weight:650; color:var(--accento-scuro) }

/* Il segno di ciascuna voce: un glifo sobrio, non un'icona colorata. Serve a
   dare all'occhio un punto d'aggancio costante a sinistra del testo. */
.menu a::before{ content:''; width:15px; height:15px; flex:0 0 auto;
  background:currentColor; opacity:.55;
  -webkit-mask:var(--glifo) center/contain no-repeat;
  mask:var(--glifo) center/contain no-repeat }
.menu a.attivo::before{ opacity:1 }

.gruppo-menu{ padding:var(--s-5) var(--s-4) var(--s-1); font-size:var(--t-xs);
  font-weight:700; color:var(--n-400); text-transform:uppercase;
  letter-spacing:.1em }
.gruppo-menu:first-child{ padding-top:var(--s-3) }

main{ padding:var(--s-5) var(--s-6) var(--s-7); overflow-x:auto; max-width:100% }

/* ───────────────────────────── NOTIFICHE ───────────────────────────── */

#toast{ position:fixed; bottom:var(--s-5); right:var(--s-5); display:flex;
  flex-direction:column; gap:var(--s-2); z-index:100; max-width:min(92vw,420px) }
.toast{ background:var(--toast-sfondo); color:var(--su-colore);
  padding:var(--s-3) var(--s-4); border-radius:var(--r);
  font-size:var(--t-base); line-height:var(--i-normale);
  box-shadow:var(--ombra-alta); animation:sali .18s ease }
.toast.ko,.toast.errore{ background:var(--errore) }
.toast.ok{ background:var(--ok) }
/* Un'avvertenza non è un errore: l'operazione è riuscita, c'è solo qualcosa
   da guardare. In rosso sembrava fallita. */
.toast.att{ background:var(--allerta) }
@keyframes sali{ from{ opacity:0; transform:translateY(8px) } }

/* ───────────────────────────── FINESTRE ───────────────────────────── */

dialog{ border:none; border-radius:var(--r-lg); padding:0;
  box-shadow:var(--ombra-alta); max-width:min(94vw,820px); width:100%;
  max-height:90vh; color:var(--testo) }
dialog::backdrop{ background:rgba(22,28,34,.55) }
#modale-corpo{ padding:var(--s-5) var(--s-6) var(--s-6) }
#modale-corpo > h2:first-child{ margin-top:0 }

/* ───────────────────────────── DOCUMENTI A SCHERMO ───────────────────── */

.doc{ background:var(--superficie); padding:var(--s-6) var(--s-7);
  border:1px solid var(--bordo); border-radius:var(--r-lg);
  max-width:82ch; line-height:var(--i-larga); box-shadow:var(--ombra) }
.doc h2{ margin-top:var(--s-5) }
.doc .sez{ margin-bottom:var(--s-4) }

/* ───────────────────────── ADATTABILITÀ ─────────────────────────
   Tre soglie. La difficile è il telefono sulle tabelle dense: lì
   l'informazione non si taglia, si riorganizza. */

.solo-telefono{display:none}

/* ── tavoletta: il menu diventa un pannello a comparsa, come sul telefono.
   Ridotto a colonna fissa lasciava al contenuto 566 px, e le tabelle larghe
   (rate, prima nota, conti) si leggevano solo scorrendole di lato. ── */
@media (max-width:1024px){
  .solo-telefono{ display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:0; color:var(--su-colore); font-size:var(--t-lg);
    padding:0 var(--s-2); min-width:44px; height:44px; cursor:pointer }
  .solo-telefono:hover{ background:rgba(255,255,255,.12) }
  .corpo{ grid-template-columns:1fr }
  .menu{ position:fixed; top:var(--barra-alta); left:0; bottom:0; height:auto; align-self:auto;
    width:var(--menu-telefono); z-index:30; overflow-y:auto;
    transform:translateX(-100%); transition:transform var(--transizione) }
  /* L'ombra solo a menu aperto: chiuso, sporgeva dal bordo come una fascia grigia. */
  body.menu-aperto .menu{ transform:none; box-shadow:var(--ombra-alta) }
  .menu a{ font-size:var(--t-base); padding:var(--s-3) var(--s-4) }
  .corpo::before{ content:''; position:fixed; inset:var(--barra-alta) 0 0;
    background:rgba(22,28,34,.45); opacity:0; pointer-events:none; z-index:29;
    transition:opacity var(--transizione) }
  body.menu-aperto .corpo::before{ opacity:1; pointer-events:auto }
  main{ padding:var(--s-4) var(--s-4) var(--s-6) }
  /* Sulla tavoletta le tabelle si stringono: carattere e spazi più piccoli,
     così nella maggior parte delle pagine stanno nella larghezza. */
  .scorri table{ font-size:var(--t-sm) }
  .scorri th,.scorri td{ padding:var(--s-2) }
  /* Le intestazioni vanno a capo invece di allargare la colonna, e la
     colonna «larga» non pretende i suoi 16rem. */
  .scorri th{ white-space:normal; letter-spacing:0 }
  .scorri th.largo,.scorri td.largo{ min-width:11rem }
}

/* ── telefono ── */
@media (max-width:640px){
  /* Il menu parte sotto la barra vera, che qui va a capo ed è più alta: dalla
     misura fissa copriva i selettori di condominio ed esercizio. */
  .menu,.corpo::before{ top:var(--barra-reale, var(--barra-alta)) }

  /* La barra si accorcia: il selettore di condominio ed esercizio va a capo */
  .barra{ flex-wrap:wrap; height:auto; padding:var(--s-2) var(--s-3); gap:var(--s-2) }
  .selettore{ order:3; flex-basis:100% }
  .selettore select{ max-width:none; flex:1 }
  .utente{ font-size:var(--t-xs) }

  main{ padding:var(--s-3) }
  /* Sotto i 16 px Safari su iPhone ingrandisce la pagina al tocco di un campo. */
  input,select,textarea{ font-size:16px }
  /* Da toccare col dito: 44 px, i comandi di riga 36. */
  button,input,select{ min-height:44px }
  button.piccolo{ min-height:36px }
  button.piatto{ min-height:44px }
  .doc{ padding:var(--s-4) var(--s-3) }
  .card{ padding:var(--s-4); border-radius:var(--r) }
  .card table{ margin:0 calc(var(--s-4) * -1); width:calc(100% + var(--s-4) * 2) }
  .griglia{ grid-template-columns:1fr }
  .modulo{ grid-template-columns:1fr }
  #modale-corpo{ padding:var(--s-4) }
  h1{ font-size:var(--t-lg) }

  /* Le tabelle dense diventano schede: ogni riga un blocco, ogni cella una
     coppia etichetta-valore. L'etichetta arriva da data-etichetta, che la
     funzione tabella() scrive su ogni cella. */
  /* La riga e la cella diventano blocchi: bisogna toglierlo anche alla tabella e al
     corpo, altrimenti il browser genera scatole anonime per ricostruire la tabella
     e la larghezza torna quella (più larga) del contenuto, non quella dello schermo. */
  table.responsiva{ display:block; width:100% }
  table.responsiva tbody,table.responsiva tfoot{ display:block }
  table.responsiva thead{ position:absolute; left:-9999px }
  table.responsiva tr{ display:block; border:1px solid var(--bordo);
    border-radius:var(--r); margin-bottom:var(--s-2);
    padding:var(--s-2) var(--s-3); background:var(--superficie) }
  table.responsiva td{ display:flex; justify-content:space-between; gap:var(--s-3);
    border:0; padding:3px 0; text-align:left }
  /* L'etichetta nel carattere dell'interfaccia anche sulle celle numeriche. */
  table.responsiva td::before{ content:attr(data-etichetta); color:var(--tenue);
    font-size:var(--t-xs); text-transform:uppercase; font-family:var(--font-ui);
    letter-spacing:var(--spazio-lettere); flex:0 0 auto; font-weight:650 }
  /* Il valore è un blocco solo accanto all'etichetta, che va a capo dentro la
     scheda: messi in fila, nome e codice fiscale uscivano dal bordo. */
  table.responsiva td > .cella{ display:block; flex:1 1 auto; min-width:0; text-align:right;
    overflow-wrap:anywhere }
  table.responsiva td > .cella .azioni-riga{ justify-content:flex-end }
  table.responsiva td.num{ justify-content:space-between }
  /* Alcune celle portano un campo di modulo (select, input) invece di solo testo:
     senza questo, la larghezza fissa o il contenuto lungo del campo sfonda la scheda
     e main, che scorre in orizzontale, la nasconde invece di mostrarla a capo. */
  table.responsiva td > *{ min-width:0; max-width:100% }
  /* Sul telefono i comandi di una riga vanno a capo invece di sfondare la scheda. */
  .azioni-riga{ flex-wrap:wrap }

  /* Il grafico a barre perde la colonna dell'etichetta: a questa larghezza
     sedici caratteri di nome più la barra non convivono. L'etichetta sale
     sopra la propria barra, valore e quota restano in fondo. */
  .gbarra{ grid-template-columns:1fr auto 3.2rem }
  .gbarra--senza-quota{ grid-template-columns:1fr auto }
  .gbarra__etichetta{ grid-column:1 / -1 }
  .grafico__titolo{ flex-wrap:wrap }

  /* La scheda non ha più bisogno di scorrere: le righe si impilano nel flusso
     della pagina, che scorre verticalmente come il resto del contenuto. */
  .scorri{ overflow:visible; max-height:none; border:0; border-radius:0 }
  table.responsiva tfoot tr{ border-color:var(--accento); border-width:2px }
}
@media (max-width:640px){ .menu-esporta > summary{ min-height:44px } }
/* Il pulsante del tema: un glifo, quadrato. */
button.tema{ width:30px; padding:0; justify-content:center; font-size:15px }
@media (max-width:640px){ button.tema{ width:44px } }