/* ============================================================================
   QUADRO GESTIONALE — la pagina iniziale di tutti (11/10/2026, Jacopo: «sara' questa la
   home per tutti, poi abbiamo le altre sezioni»).
   Vive dentro il gestionale (#/quadro), cosi' il menu delle sezioni resta a fianco su
   desktop e in basso sul telefono. Ogni classe comincia con «qd-»: stile.css e tema.css
   hanno gia' .riga, .voce, .nota, .vuoto... e qui non devono toccarsi.
   Le misure non guardano lo schermo ma lo spazio che il Quadro ha davvero (container
   query): con il menu laterale aperto, una finestra da 1000 px lascia circa 700 px.
   ============================================================================ */
@media (min-width:900px){ .app--largo .vista{max-width:1240px} }

.qd{--qd-blu:#5a31f4;--qd-giallo:#F2E63F;--qd-rosso:#B42318;--qd-ink:#14151A;--qd-grigio:#5F6169;
  --qd-grigio2:#8A8C94;--qd-filo:#E6E6EA;--qd-fondo:#FAFAFB;--qd-barra:#EDEDF1;
  container-type:inline-size;container-name:qd;color:var(--qd-ink);font-variant-numeric:tabular-nums}
.qd a{color:var(--qd-blu)}
.qd-intro{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.qd-intro .titolo{margin-bottom:4px}
.qd-lead{color:var(--qd-grigio);font-size:13.5px;line-height:1.55;margin:0;max-width:70ch}
.qd-mini{font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:10px;cursor:pointer;
  border:1px solid #D9D9DF;background:#fff;color:var(--qd-ink);white-space:nowrap;text-decoration:none;display:inline-block}
.qd-mini:hover{border-color:var(--qd-blu);color:var(--qd-blu)}
.qd-intro .qd-mini{margin-left:auto}

/* i numeri in cima: una riga tipografica divisa da filetti, non tessere */
.qd-numeri{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));background:#fff;
  border:1px solid var(--qd-filo);border-radius:16px;overflow:hidden}
.qd-num{padding:15px 16px 14px;border-left:1px solid var(--qd-filo);min-width:0;text-decoration:none;color:inherit!important}
.qd-num:first-child{border-left:0}
a.qd-num:hover b{color:var(--qd-blu)}
.qd-num b{display:block;font-size:clamp(21px,2.4vw,27px);font-weight:800;letter-spacing:-.035em;line-height:1.1;white-space:nowrap}
.qd-num span{display:block;font-size:12px;font-weight:700;margin-top:4px}
.qd-num small{display:block;font-size:11.5px;color:var(--qd-grigio);line-height:1.4;margin-top:1px}
.qd-num.qd-allerta b{color:var(--qd-rosso)}

/* le due colonne */
.qd-colonne{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:26px;margin-top:24px;align-items:start}
.qd-colonna{display:flex;flex-direction:column;gap:24px;min-width:0}
.qd h2{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--qd-grigio2);
  display:flex;align-items:center;gap:10px}
.qd h2 a{margin-left:auto;font-size:12px;letter-spacing:0;text-transform:none;font-weight:700;text-decoration:none}
.qd-riquadro{background:#fff;border:1px solid var(--qd-filo);border-radius:16px;padding:6px 18px}
.qd-riquadro.qd-pieno{padding:16px 18px}

/* righe */
.qd-riga{display:grid;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--qd-filo);text-decoration:none;color:inherit!important}
.qd-riga:first-child{border-top:0}
a.qd-riga:hover .qd-tit{color:var(--qd-blu)}
.qd-tit{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.qd-sotto{font-size:12px;color:var(--qd-grigio);line-height:1.45;margin-top:1px}
.qd-dx{text-align:right;white-space:nowrap}
.qd-dx b{display:block;font-size:14px;font-weight:800;letter-spacing:-.015em}
.qd-dx small{display:block;font-size:11.5px;color:var(--qd-grigio2)}
.qd-bollo{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;vertical-align:1px;margin-right:7px}

/* pratiche per area */
.qd-area{grid-template-columns:minmax(120px,190px) minmax(0,1fr) 46px}
.qd-area .qd-tit{display:flex;align-items:center}
.qd-traccia{height:8px;border-radius:999px;background:var(--qd-barra);overflow:hidden}
.qd-traccia i{display:block;height:100%;width:0;border-radius:999px;transition:width .6s cubic-bezier(.2,.7,.3,1)}
.qd-area .qd-dx b{font-size:18px}

/* le ultime pratiche */
.qd-pratica{grid-template-columns:52px minmax(0,1fr) auto;align-items:start}
.qd-data{font-size:12px;font-weight:700;color:var(--qd-grigio2);line-height:1.25;padding-top:2px}
.qd-data small{display:block;font-weight:600}

/* barre con numero (vendite, spese) */
.qd-barre{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.qd-bar .qd-capo{display:flex;align-items:baseline;gap:8px;font-size:13px;margin-bottom:6px}
.qd-bar .qd-capo b{font-weight:700}
.qd-bar .qd-capo span{margin-left:auto;color:var(--qd-grigio);font-size:12px;white-space:nowrap}
.qd-bar .qd-traccia{height:10px;position:relative;overflow:visible}
.qd-bar .qd-traccia i{background:var(--qd-blu)}
.qd-bar.qd-anticipo .qd-traccia i{background:var(--qd-giallo)}
.qd-bar.qd-sforato .qd-traccia i{background:var(--qd-rosso)}
.qd-bar.qd-sforato .qd-capo b{color:var(--qd-rosso)}
.qd-passo{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--qd-ink);border-radius:2px;opacity:.55}
.qd-scelta{display:inline-flex;background:var(--qd-barra);border-radius:10px;padding:3px;margin-left:auto}
.qd-scelta button{border:0;background:transparent;font:inherit;text-transform:none;letter-spacing:0;font-size:12px;font-weight:700;
  color:var(--qd-grigio);padding:6px 12px;border-radius:8px;cursor:pointer}
.qd-scelta button.qd-on{background:#fff;color:var(--qd-ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.qd-totale{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:6px 0 4px}
.qd-totale b{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.qd-totale small{display:block;font-size:12px;color:var(--qd-grigio);margin-top:2px}

/* cassa: andamento mese per mese */
.qd-mesi{display:grid;grid-template-columns:repeat(var(--m,6),minmax(0,1fr));gap:8px;align-items:end;height:120px;padding:14px 0 0;border-bottom:1px solid var(--qd-filo)}
.qd-mesi div{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%}
.qd-mesi i{display:block;width:min(14px,40%);border-radius:4px 4px 0 0;min-height:2px;height:0;transition:height .6s cubic-bezier(.2,.7,.3,1)}
.qd-mesi i.qd-e{background:var(--qd-blu)} .qd-mesi i.qd-u{background:#C9CBD3}
.qd-etichette{display:grid;grid-template-columns:repeat(var(--m,6),minmax(0,1fr));gap:8px;font-size:11px;font-weight:700;color:var(--qd-grigio2);text-align:center;padding:6px 0 2px;text-transform:capitalize}
.qd-legenda{display:flex;gap:14px;font-size:11.5px;color:var(--qd-grigio);padding:8px 0 4px;flex-wrap:wrap}
.qd-legenda i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.qd-voce{grid-template-columns:minmax(0,1fr) auto}
.qd .qd-neg{color:var(--qd-rosso)} .qd .qd-pos{color:#0b6b00}

/* stati */
.qd-vuoto{padding:16px;margin:10px 0;border-radius:12px;background:var(--qd-fondo);border:1px dashed #D9D9DF;color:var(--qd-grigio);font-size:13px;line-height:1.55}
.qd-vuoto b{display:block;color:var(--qd-ink);font-size:14px;margin-bottom:2px}
.qd-nota{margin:4px 0 10px;padding:11px 13px;border-radius:12px;background:var(--qd-fondo);border:1px solid var(--qd-filo);font-size:12.5px;line-height:1.5;color:var(--qd-grigio)}
.qd-nota b{color:var(--qd-ink)}
.qd-nota.qd-gialla{background:#FFFBE0;border-color:#EFE38A;color:#5C5300}
.qd-nota.qd-gialla b{color:#3D3700}
.qd-piede{margin-top:30px;font-size:12px;color:var(--qd-grigio2);line-height:1.5}
.qd [hidden]{display:none!important}

/* spazio medio (finestra da ~1000 px con il menu, tablet): due mezze colonne, con le
   sezioni lunghe a tutta larghezza, in ordine d'importanza: le aree, poi cosa blocca
   accanto alla cassa, poi le ultime pratiche. Se manca la sezione accanto (chi non vede
   i soldi o il magazzino), quella rimasta sola si allarga. */
@container qd (min-width:600px) and (max-width:999px){
  .qd-colonne{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 22px}
  .qd-colonna{display:contents}
  #qd-aree{order:1;grid-column:1 / -1} #qd-s-blocchi{order:2} #qd-s-cassa{order:3}
  #qd-s-ultime{order:4;grid-column:1 / -1} #qd-s-scadenze{order:5} #qd-s-spese{order:6}
  #qd-s-vendite{order:7} #qd-s-magazzino{order:8}
  .qd-colonne:has(#qd-s-cassa[hidden]) #qd-s-blocchi,
  .qd-colonne:has(#qd-s-magazzino[hidden]) #qd-s-vendite,
  .qd-colonne:has(#qd-s-vendite[hidden]) #qd-s-magazzino{grid-column:1 / -1}
}
@container qd (max-width:859px){
  .qd-numeri{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qd-num:nth-child(3n+1){border-left:0}
  .qd-num:nth-child(n+4){border-top:1px solid var(--qd-filo)}
}
/* telefono: una colonna, i numeri su due, e l'ordine lo decide l'importanza */
@container qd (max-width:599px){
  .qd-colonne{display:flex;flex-direction:column;gap:22px}
  .qd-colonna{display:contents}
  #qd-aree{order:1} #qd-s-blocchi{order:2} #qd-s-ultime{order:3} #qd-s-vendite{order:4}
  #qd-s-cassa{order:5} #qd-s-scadenze{order:6} #qd-s-spese{order:7} #qd-s-magazzino{order:8}
}
@container qd (max-width:559px){
  .qd-numeri{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qd-num{padding:13px 12px 12px}
  .qd-num:nth-child(3n+1){border-left:1px solid var(--qd-filo)}
  .qd-num:nth-child(2n+1){border-left:0}
  .qd-num:nth-child(n+3){border-top:1px solid var(--qd-filo)}
  .qd-riquadro{padding:4px 14px} .qd-riquadro.qd-pieno{padding:14px}
  .qd-area{grid-template-columns:minmax(0,1fr) 40px;row-gap:7px}
  .qd-area .qd-traccia{grid-column:1 / -1;grid-row:2}
  .qd-pratica{grid-template-columns:44px minmax(0,1fr);column-gap:10px;row-gap:4px}
  .qd-pratica .qd-dx{grid-column:2;text-align:left;display:flex;gap:8px;align-items:baseline}
  .qd-pratica .qd-dx b{display:inline;font-size:13px}
  .qd-intro .qd-mini{margin-left:0}
}
@media (prefers-reduced-motion:reduce){ .qd *{transition:none!important} }