/* ============================================================================
   LA GRAFICA NUOVA DEL GESTIONALE COMPLETO (22/10/2026)

   Jacopo: «andiamo su crm altre sezioni e abbiamo ancora vecchia grafica, vecchia chat e
   non si puo' tornare alla sezione nuova... fai tutto nuovo». Questo foglio si carica per
   ultimo e veste il gestionale completo come la pagina con la chat (semplice.css): bianco,
   grigio chiaro e il blu del pulsante d'acquisto (#5a31f4), il carattere di sistema, la
   stessa testata con Chat · Oggi · Cerca · Gestionale. Niente card: elenchi con il filetto.
   Togliendo il <link> da index.html torna il vestito di prima.
   ============================================================================ */

:root {
  --testo: #1d1d1f;
  --testo2: #6e6e73;
  --testo3: #8e8e93;
  --riga: #e6e6ea;
  --filo: #e6e6ea;
  --grigio-chiaro: #f5f5f7;
  --blu: #5a31f4;
  --blu-scuro: #4a22e0;
  --blu-tenue: #efeafe;
  --rosso: #d70015;
  --r: 10px;
  --r-g: 12px;
  --ombra: none;
  --lato: 240px;
  --alta: 56px;
}

html, body {
  background: #fff !important;
  background-image: none !important;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--testo);
  font-variant-numeric: normal;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }

/* ---------- testata: la stessa della pagina nuova ---------- */
.testa {
  position: sticky; top: 0; z-index: 70;
  margin-left: 0 !important;
  height: calc(var(--alta) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.94) !important; color: var(--testo) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--filo) !important;
}
.testa::before { display: none !important; }
.testa .marchio {
  flex: 0 0 auto; font-weight: 700; letter-spacing: .08em; font-size: 14px; color: var(--testo);
  text-decoration: none; background: none; text-indent: 0; height: auto;
}
.testa .schede { flex: 1 1 auto; display: flex; justify-content: center; gap: 4px; min-width: 0; }
.testa .schede a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px;
  font-size: 15px; font-weight: 500; color: var(--testo2); text-decoration: none; white-space: nowrap;
}
.testa .schede a:hover { color: var(--testo); }
.testa .schede a.attiva { background: var(--grigio-chiaro); color: var(--testo); }
.testa__titolo { display: none !important; }
.testa__menu {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: -6px;
  border: 0 !important; border-radius: 10px !important; background: none !important; color: var(--testo) !important;
  opacity: 1 !important; padding: 0;
}
.testa__menu:hover { background: var(--grigio-chiaro) !important; }
.testa__aggiorna {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: 0 !important; border-radius: 10px; background: none !important; color: var(--blu) !important;
  font-size: 14px; font-weight: 500; cursor: pointer; margin-left: 0;
}
.testa__aggiorna:hover { background: var(--blu-tenue) !important; }
.testa__io {
  flex: 0 0 auto; width: 34px !important; height: 34px !important; margin-left: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: var(--blu-tenue) !important;
  color: var(--blu) !important; font-weight: 600; font-size: 14px; opacity: 1 !important;
  display: grid; place-items: center; padding: 0;
}
@media (max-width: 899px) {
  .testa .marchio { display: none; }
  .testa .schede { justify-content: flex-start; gap: 0; }
  .testa .schede a { padding: 0 10px; font-size: 14.5px; }
  .testa__aggiorna-t { display: none; }
}
@media (min-width: 900px) {
  .testa__menu { display: none !important; }
}

/* ---------- menu laterale: sotto la testata, bianco, una riga per sezione ---------- */
.lato {
  background: #fff !important; border-right: 1px solid var(--filo) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 12px 0 24px;
}
.lato__marchio { display: none !important; }
.lato a {
  margin: 1px 10px; padding: 8px 10px; border-radius: 10px; gap: 10px;
  font-size: 15px; font-weight: 400 !important; color: var(--testo) !important; text-decoration: none;
}
.lato a:hover { background: var(--grigio-chiaro); }
.lato a.qui { background: var(--grigio-chiaro) !important; color: var(--testo) !important; font-weight: 600 !important; }
.lato a.qui .lato__bollo { box-shadow: none !important; }
.lato__ico { width: 16px; opacity: .4; font-size: 12px; }
.lato__bollo { width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 4px; }
.lato hr { border: 0; border-top: 1px solid var(--filo); margin: 10px 20px; }
.lato .pill, .lato b.pill {
  margin-left: auto; background: none !important; color: var(--testo3) !important;
  font-size: 12.5px; font-weight: 500; padding: 0; min-width: 0;
}
.lato__esci { margin: 14px 20px 0; font-size: 15px; color: var(--testo2); }
@media (min-width: 900px) {
  .lato { top: calc(var(--alta) + env(safe-area-inset-top)); width: var(--lato); }
  .vista { margin-left: var(--lato) !important; }
}
@media (max-width: 899px) {
  .lato { z-index: 80; width: min(300px, 84vw); padding-top: calc(16px + env(safe-area-inset-top)); }
  .velo { z-index: 75; }
}

/* ---------- barra in basso (telefono) ---------- */
.basso { background: rgba(255,255,255,.96) !important; border-top: 1px solid var(--filo) !important; }
.basso a { color: var(--testo3) !important; font-size: 10.5px; text-decoration: none; }
.basso a i { color: inherit !important; }
.basso a.qui { color: var(--testo) !important; font-weight: 600; }

/* ---------- la pagina ---------- */
.vista { padding: 28px 20px 96px !important; max-width: 1040px; }
@media (min-width: 900px) { .vista { padding: 36px 40px 64px !important; } }
.app--largo .vista { max-width: none; }

.titolo {
  font-size: clamp(26px, 3.6vw, 34px) !important; font-weight: 600 !important; letter-spacing: -.02em !important;
  line-height: 1.12; margin: 0 0 6px !important; color: var(--testo);
}
h2.titolo { font-size: 20px !important; }
.occhiello { color: var(--testo2) !important; font-size: 15px; font-weight: 400 !important; }
.sezione {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .06em !important;
  color: var(--testo2) !important; text-transform: uppercase; margin: 28px 0 6px !important;
}
.etichetta { color: var(--testo2) !important; }
a { color: var(--blu); }

/* ---------- niente card: righe con il filetto ---------- */
.pr {
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--filo) !important;
  border-radius: 0 !important; box-shadow: none !important; margin: 0 !important;
  padding: 14px 4px !important; transform: none !important;
}
.pr:hover { background: #fafafa !important; }
.pr__tit { font-weight: 500 !important; font-size: 15.5px; letter-spacing: 0 !important; color: var(--testo) !important; }
.pr__cod { color: var(--testo3) !important; font-weight: 500 !important; font-size: 12px !important; }
.pr__meta, .pr__sotto { color: var(--testo2) !important; font-size: 14px; }

.scheda, .det__testa, .scheda--piatta, .scheda--chiara, .msg {
  background: #fff !important; border: 1px solid var(--filo) !important; border-radius: 12px !important;
  box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.vuoto {
  background: none !important; border: 0 !important; color: var(--testo2) !important;
  padding: 10px 2px !important; font-size: 15px;
}

/* le «card» delle aree in Oggi e nel Quadro: righe chiare, non blocchi colorati */
.area-card, .area-card.c-blu, .area-card.c-teal, .area-card.c-nero, .area-card.c-gia {
  background: #fff !important; color: var(--testo) !important;
  border: 1px solid var(--filo) !important; box-shadow: none !important; border-radius: 12px !important;
}
.area-card .numero, .area-card .etichetta { color: var(--testo) !important; }
.area-card .etichetta { color: var(--testo2) !important; }
.area-card:hover { transform: none !important; border-color: #cfcfd4 !important; }

/* ---------- pulsanti: rettangoli smussati, uno solo blu ---------- */
.btn, .rapido {
  border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important;
  background: #fff !important; border: 1px solid var(--filo) !important; color: var(--testo) !important;
}
.btn:hover, .rapido:hover { background: var(--grigio-chiaro) !important; }
.btn--blu, .btn--via, .rapidi .rapido:first-child, .rapidi .btn--blu {
  background: var(--blu) !important; border-color: var(--blu) !important; color: #fff !important;
}
.btn--blu:hover, .btn--via:hover, .rapidi .rapido:first-child:hover { background: var(--blu-scuro) !important; }
.btn--nudo { background: transparent !important; border-color: transparent !important; color: var(--blu) !important; }
.stati button, .filtri button { border-radius: 10px !important; }
.stati button.sel, .filtri button.sel { background: var(--testo) !important; color: #fff !important; }

/* ---------- pastiglie ---------- */
.tag { background: var(--grigio-chiaro) !important; color: var(--testo2) !important; border: 0 !important;
  border-radius: 6px !important; font-weight: 500 !important; }
.tag--stato { background: var(--blu-tenue) !important; color: var(--blu) !important; }
.tag--urgente, .tag--alta { background: #fdecec !important; color: var(--rosso) !important; }
.tag--tardi { background: #fdecec !important; color: var(--rosso) !important; }

/* ---------- campi ---------- */
.campo, .cerca, input[type=text], input[type=number], input[type=date], input[type=search],
input[type=email], input[type=tel], input[type=password], select, textarea {
  border: 1px solid #d2d2d7 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none;
}
.campo:focus, input:focus, select:focus, textarea:focus, .cerca:focus-within {
  border-color: var(--blu) !important; box-shadow: 0 0 0 3px rgba(90,49,244,.14) !important; outline: 0;
}

/* ---------- fogli (finestre) ---------- */
.foglio { border-radius: 16px !important; box-shadow: 0 24px 60px rgba(0,0,0,.18) !important; border: 0 !important; }
.foglio__dentro { background: #fff !important; }

/* ---------- pulsante + e avvisi ---------- */
.piu { background: var(--blu) !important; border-radius: 50% !important; box-shadow: 0 8px 22px rgba(90,49,244,.3) !important; }
.avviso { background: var(--testo) !important; border-radius: 12px !important; }

/* ---------- il Quadro ---------- */
.qd { --qd-blu: #5a31f4; --qd-ink: #1d1d1f; --qd-grigio: #6e6e73; --qd-filo: #e6e6ea; }
.qd-riquadro, .qd-numeri { border-radius: 12px !important; box-shadow: none !important; border-color: var(--filo) !important; }
.qd h1, .qd .qd-titolo { font-weight: 600 !important; letter-spacing: -.02em !important; }

/* il logo che una vecchia rifinitura metteva nella testata: il marchio c'e' gia' a sinistra */
.testa__logo { display: none !important; }

/* gli elenchi: niente riquadro intorno, solo il filetto sopra e fra le righe */
.gruppo {
  border: 0 !important; border-top: 1px solid var(--filo) !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important;
}
.gruppo > .pr:last-child { border-bottom: 0 !important; }

/* il Quadro senza riquadri: numeri e sezioni separati dal filetto, come il resto */
.qd-numeri { border: 0 !important; border-top: 1px solid var(--filo) !important; border-bottom: 1px solid var(--filo) !important;
  border-radius: 0 !important; background: none !important; }
.qd-riquadro { border: 0 !important; border-top: 1px solid var(--filo) !important; border-radius: 0 !important;
  background: none !important; padding: 6px 0 !important; }

/* telefono: la testata deve stare in 375 px senza sovrapporsi */
@media (max-width: 520px) {
  .testa { gap: 4px; padding-left: 10px; padding-right: 10px; }
  .testa .schede a { padding: 0 8px; font-size: 14.5px; }
  .testa__aggiorna { display: none !important; }
}
/* la freccia che apre la riga sta a destra: il titolo non ci deve finire sotto */
.pr { padding-right: 40px !important; position: relative; }