/* ═══════════════════════════════════════════════════════════════════
   Relata — foglio di stile dello Studio
   ═══════════════════════════════════════════════════════════════════

   Caricato DOPO Bootstrap, che resta in servizio: le pagine non ancora
   rifatte continuano a usarne le classi e devono restare intatte.

   Per questo qui NON si ridefiniscono mai selettori di elemento
   (`table`, `.card`, `th`…): si usano classi proprie in italiano
   (`.riquadro`, `.tabella-relata`, `.occhiello`…) che una pagina adotta
   solo quando viene rifatta. Cosi' il restyling procede a strati senza
   che uno strato rompa quelli ancora da fare.

   Convenzione: nomi in italiano, come nel resto del codice.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Colore dello Studio: lo stesso navy del marchio e della favicon.
     Passato anche a Bootstrap, cosi' .text-primary / .btn-primary delle
     pagine non ancora rifatte restano coerenti. */
  --bs-primary-rgb: 31, 60, 103;

  --r-navy-scuro:   #082b56;   /* barra laterale */
  --r-navy:         #1f3c67;   /* marchio, testo forte, pulsante primario */
  --r-navy-chiaro:  #12406f;   /* voce di menu attiva */
  --r-azzurro:      #2f6fb5;   /* accento, occhielli, collegamenti */

  --r-sfondo:       #f4f7fb;
  --r-superficie:   #ffffff;
  --r-bordo:        #e4eaf2;
  --r-bordo-tenue:  #eff3f8;

  --r-testo:        #1b2733;
  --r-tenue:        #6b7a8c;

  --r-rosso:        #c62828;
  --r-ambra:        #b26a00;
  --r-verde:        #1b7a4b;

  --r-raggio:       12px;
  --r-larghezza-barra: 252px;
}

/* Le classi del vecchio layout (`.semaforo-*`, `.badge-giorni`,
   `.card-hover`, `.navbar-studio`) sono state rimosse quando l'ultima
   pagina che le usava e' passata allo strato nuovo — verificato con una
   ricerca su templates/ e static/js/ prima di toglierle. Resta invece
   `--bs-primary-rgb` qui sopra: le due schede pratica non sono ancora
   rifatte e usano ancora .text-primary / .btn-primary di Bootstrap. */

/* ═══ IMPALCATURA ═══════════════════════════════════════════════════ */

body{
  background: var(--r-sfondo);
  color: var(--r-testo);
  -webkit-font-smoothing: antialiased;
}

.impalcatura{ display:flex; min-height:100vh; }

/* ─── Barra laterale ──────────────────────────────────────────────── */

.barra-laterale{
  width: var(--r-larghezza-barra);
  flex: 0 0 var(--r-larghezza-barra);
  background: var(--r-navy-scuro);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marchio{
  display:flex; align-items:center; gap:.7rem;
  padding: 1.4rem 1.25rem 1.1rem;
  text-decoration:none;
}
.marchio:hover{ text-decoration:none; }
.marchio .sigla{
  width:38px; height:38px; border-radius:9px;
  background: var(--r-azzurro); color:#fff;
  font-family: Georgia, "Times New Roman", serif;
  font-weight:700; font-size:1.25rem;
  display:grid; place-items:center; flex:none;
}
/* `display:block` qui e non con l'utility `.d-block` di Bootstrap: quella
   porta `!important` e non si lascia più spegnere dalle regole per schermi
   stretti, dove nome e ruolo devono sparire per far entrare la barra. */
.marchio .nome{ display:block; color:#fff; font-weight:600; font-size:1.05rem; line-height:1.15; }
.marchio .studio{ display:block; color:#8fa9c6; font-size:.72rem; }

.occhiello-menu{
  color:#5f7fa3; font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; font-weight:600;
  padding:.9rem 1.4rem .45rem;
}

.menu-laterale{ display:flex; flex-direction:column; gap:2px; padding:0 .6rem; }
.menu-laterale a{
  display:flex; align-items:center; gap:.7rem; position:relative;
  padding:.62rem .8rem; border-radius:8px;
  color:#c7d6e8; font-size:.92rem; text-decoration:none;
  transition: background .12s, color .12s;
}
.menu-laterale a::before{
  content:""; position:absolute; left:-.6rem; top:50%;
  transform: translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0;
  background: var(--r-azzurro); opacity:0; transition:opacity .12s;
}
.menu-laterale a:hover{ background:#0d3563; color:#fff; }
.menu-laterale a.attivo{ background: var(--r-navy-chiaro); color:#fff; font-weight:500; }
.menu-laterale a.attivo::before{ opacity:1; }
.menu-laterale a i{ font-size:1.02rem; width:1.15rem; text-align:center; }

.pastiglia{
  margin-left:auto; background: var(--r-rosso); color:#fff;
  font-size:.7rem; font-weight:600;
  min-width:1.35rem; height:1.35rem; border-radius:999px;
  display:grid; place-items:center; padding:0 .35rem;
}

.piede-barra{
  margin-top:auto; padding:1rem 1.4rem;
  color:#5f7fa3; font-size:.72rem; line-height:1.6;
  border-top:1px solid #10365f;
}

/* ─── Colonna principale e barra alta ─────────────────────────────── */

.colonna-principale{ flex:1; min-width:0; display:flex; flex-direction:column; }

.barra-alta{
  background: var(--r-superficie);
  border-bottom:1px solid var(--r-bordo);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.8rem 1.75rem;
  position:sticky; top:0; z-index:1020;
}

.briciole{ color: var(--r-tenue); font-size:.83rem; }
.briciole a{ color:inherit; text-decoration:none; }
.briciole a:hover{ text-decoration:underline; }
.briciole .sep{ margin:0 .4rem; color:#c3cedb; }
.briciole .corrente{ color: var(--r-testo); font-weight:500; }

.strumenti{ margin-left:auto; display:flex; align-items:center; gap:.75rem; }

.ricerca{ position:relative; }
.ricerca i{
  position:absolute; left:.65rem; top:50%; transform:translateY(-50%);
  color:#9fb0c2; font-size:.9rem; pointer-events:none;
}
.ricerca input{
  border:1px solid var(--r-bordo); border-radius:8px;
  padding:.45rem .7rem .45rem 2rem;
  font-size:.86rem; width:230px; background:#fbfcfe;
  font-family:inherit; color:inherit;
}
.ricerca input:focus{ outline:2px solid #cfe0f2; border-color: var(--r-azzurro); }

.btn-studio{
  background: var(--r-navy); color:#fff; border:0; border-radius:8px;
  padding:.5rem .95rem; font-size:.86rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; cursor:pointer; font-family:inherit;
}
.btn-studio:hover{ background:#183155; color:#fff; }

.area-utente{
  display:flex; align-items:center; gap:.55rem;
  padding-left:.9rem; border-left:1px solid var(--r-bordo);
  text-decoration:none; color:inherit;
}
.area-utente:hover{ color:inherit; }
.area-utente::after{ display:none; }   /* la freccetta la mettiamo noi */
.avatar{
  width:32px; height:32px; border-radius:999px;
  background: var(--r-navy); color:#fff;
  font-weight:600; font-size:.82rem;
  display:grid; place-items:center; flex:none;
}
.area-utente .chi{ display:block; font-size:.84rem; font-weight:500; line-height:1.2; }
.area-utente .ruolo{ display:block; font-size:.71rem; color: var(--r-tenue); }

.contenuto{ padding:1.75rem; width:100%; max-width:1380px; }

/* ═══ TIPOGRAFIA DI SEZIONE ═════════════════════════════════════════ */

.occhiello{
  color: var(--r-azzurro); font-size:.7rem; letter-spacing:.11em;
  text-transform:uppercase; font-weight:700;
}

.testata-pagina{ margin-bottom:1.5rem; }
.testata-pagina h1{ font-size:1.55rem; font-weight:650; margin:.2rem 0 .25rem; }
.testata-pagina p{ color: var(--r-tenue); font-size:.9rem; margin:0; }

.testata-sezione{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin:2rem 0 .85rem;
}
.testata-sezione h2{ font-size:1.08rem; font-weight:650; margin:.15rem 0 0; }
.vedi-tutti{
  color: var(--r-azzurro); font-size:.84rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.3rem; text-decoration:none;
  white-space:nowrap;
}
.vedi-tutti:hover{ text-decoration:underline; color: var(--r-azzurro); }

/* ═══ RIQUADRI E METRICHE ═══════════════════════════════════════════ */

.riquadro{
  background: var(--r-superficie);
  border:1px solid var(--r-bordo);
  border-radius: var(--r-raggio);
  box-shadow:0 1px 2px rgba(16,40,70,.04);
  overflow:hidden;
}

.griglia-metriche{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
}

.metrica{
  background: var(--r-superficie);
  border:1px solid var(--r-bordo);
  border-top:4px solid var(--r-azzurro);
  border-radius: var(--r-raggio);
  padding:1.15rem 1.25rem .9rem;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(16,40,70,.04);
  transition: transform .12s, box-shadow .12s;
}
.metrica:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(16,40,70,.09);
  color:inherit;
}
.metrica .occhiello{ color: var(--r-tenue); }
.metrica .numero{
  font-size:2.7rem; font-weight:700; line-height:1.05;
  margin:.35rem 0 .1rem;
  font-variant-numeric: tabular-nums;
  color: var(--r-navy);
}
.metrica .etichetta{ color: var(--r-tenue); font-size:.86rem; }
.metrica .apri{
  margin-top:.9rem; padding-top:.7rem;
  border-top:1px solid var(--r-bordo-tenue);
  color: var(--r-azzurro); font-size:.82rem; font-weight:600;
  display:flex; align-items:center; gap:.35rem;
  transition: gap .12s;
}
.metrica:hover .apri{ gap:.55rem; }

.metrica.rosso{ border-top-color: var(--r-rosso); }
.metrica.rosso .numero{ color: var(--r-rosso); }
.metrica.ambra{ border-top-color: var(--r-ambra); }
.metrica.ambra .numero{ color: var(--r-ambra); }
.metrica.verde{ border-top-color: var(--r-verde); }
.metrica.verde .numero{ color: var(--r-verde); }
.metrica.navy{ border-top-color: var(--r-navy); }

/* ═══ ELENCO AZIONI ════════════════════════════════════════════════ */

.lista-azioni{ list-style:none; margin:0; padding:0; }
.lista-azioni li{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1.15rem;
  border-bottom:1px solid var(--r-bordo-tenue);
}
.lista-azioni li:last-child{ border-bottom:0; }
.lista-azioni li:hover{ background:#fafcfe; }

.pittogramma{
  width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; font-size:.95rem; flex:none;
}
.pittogramma.rosso { background:#fdecec; color: var(--r-rosso); }
.pittogramma.ambra { background:#fdf3e3; color: var(--r-ambra); }
.pittogramma.azzurro{ background:#e9f1fa; color: var(--r-azzurro); }
.pittogramma.verde { background:#e7f5ee; color: var(--r-verde); }

.testo-azione{ flex:1; font-size:.91rem; }
.testo-azione .dettaglio{ color: var(--r-tenue); font-size:.8rem; display:block; }

.btn-tenue{
  border:1px solid var(--r-bordo); border-radius:7px;
  background: var(--r-superficie);
  padding:.32rem .75rem; font-size:.81rem; font-weight:600;
  color: var(--r-navy); text-decoration:none;
  display:inline-flex; align-items:center; gap:.35rem;
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.btn-tenue:hover{ background:#f4f8fd; border-color:#c9d9ea; color: var(--r-navy); }

/* ═══ TABELLE ══════════════════════════════════════════════════════
   Classe dedicata, non il selettore `table`: le pagine non ancora
   rifatte devono continuare a usare le tabelle di Bootstrap. */

.tabella-scorre{ overflow-x:auto; }

.tabella-relata{ width:100%; border-collapse:collapse; font-size:.88rem; margin:0; }
.tabella-relata thead th{
  background:#f8fafd; color: var(--r-tenue);
  font-size:.71rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; text-align:left; white-space:nowrap;
  padding:.7rem 1rem; border-bottom:1px solid var(--r-bordo);
}
.tabella-relata tbody td{
  padding:.78rem 1rem; border-bottom:1px solid var(--r-bordo-tenue);
  vertical-align:middle;
}
.tabella-relata tbody tr:last-child td{ border-bottom:0; }
.tabella-relata tbody tr[data-href]{ cursor:pointer; }
.tabella-relata tbody tr:hover{ background:#f7fbff; }

.id-record{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.82rem; font-weight:600; color: var(--r-navy);
  white-space:nowrap; text-decoration:none;
}
.id-record:hover{ color: var(--r-azzurro); text-decoration:underline; }
.sottotesto{ color: var(--r-tenue); font-size:.79rem; display:block; }

/* Etichette di stato. Nome proprio (`.targhetta`) per non collidere con
   `.badge` di Bootstrap, ancora usata dalle pagine non rifatte. */
.targhetta{
  display:inline-flex; align-items:center; gap:.3rem;
  border-radius:999px; padding:.18rem .6rem;
  font-size:.76rem; font-weight:600; white-space:nowrap;
}
.targhetta.rossa  { background:#fdecec; color: var(--r-rosso); }
.targhetta.ambra  { background:#fdf3e3; color: var(--r-ambra); }
.targhetta.verde  { background:#e7f5ee; color: var(--r-verde); }
.targhetta.azzurra{ background:#e9f1fa; color: var(--r-azzurro); }
.targhetta.grigia { background:#eef2f7; color: var(--r-tenue); }
.giorni{ font-variant-numeric: tabular-nums; font-weight:700; }

/* ═══ STATO VUOTO ══════════════════════════════════════════════════ */

.stato-vuoto{ padding:3rem 1.5rem; text-align:center; }
.stato-vuoto .cerchio{
  width:64px; height:64px; border-radius:999px;
  background:#eef4fb; color: var(--r-azzurro); font-size:1.6rem;
  display:grid; place-items:center; margin:0 auto .95rem;
}
.stato-vuoto.sereno .cerchio{ background:#e7f5ee; color: var(--r-verde); }
.stato-vuoto h3{ font-size:1rem; font-weight:600; margin:0 0 .35rem; }
.stato-vuoto p{
  color: var(--r-tenue); font-size:.87rem;
  margin:0 auto 1.15rem; max-width:30rem;
}
.stato-vuoto p:last-child{ margin-bottom:0; }

/* ═══ BARRA DEI FILTRI ═════════════════════════════════════════════ */

.barra-filtri{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  padding:.9rem 1.15rem;
  border-bottom:1px solid var(--r-bordo);
  background:#fcfdff;
}
.barra-filtri select,
.barra-filtri input[type="text"],
.barra-filtri input[type="search"]{
  border:1px solid var(--r-bordo); border-radius:8px;
  padding:.42rem .65rem; font-size:.85rem;
  background: var(--r-superficie); font-family:inherit; color:inherit;
}
.barra-filtri input[type="text"],
.barra-filtri input[type="search"]{ flex:1; min-width:14rem; max-width:26rem; }
.barra-filtri select:focus,
.barra-filtri input:focus{ outline:2px solid #cfe0f2; border-color: var(--r-azzurro); }
.barra-filtri .spunta{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.84rem; color: var(--r-tenue); cursor:pointer;
}
.barra-filtri .spunta input{ margin:0; }
.conteggio{ margin-left:auto; color: var(--r-tenue); font-size:.83rem; }

/* ═══ PIEDE DEL RIQUADRO ═══════════════════════════════════════════ */

.piede-riquadro{
  padding:.7rem 1.15rem; border-top:1px solid var(--r-bordo);
  background:#fcfdff; color: var(--r-tenue); font-size:.82rem;
}

/* ═══ TESTATA DENTRO IL RIQUADRO ═══════════════════════════════════
   Serve alla pagina Alert, che è fatta di cinque blocchi affiancati:
   ciascuno ha la sua testata con il colore della categoria. */

.testata-riquadro{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.85rem 1.15rem;
  border-bottom:1px solid var(--r-bordo);
  border-top:3px solid var(--r-azzurro);
  font-weight:650; font-size:.95rem;
}
.testata-riquadro i{ color: var(--r-azzurro); }
.testata-riquadro.rossa{ border-top-color: var(--r-rosso); }
.testata-riquadro.rossa i{ color: var(--r-rosso); }
.testata-riquadro.ambra{ border-top-color: var(--r-ambra); }
.testata-riquadro.ambra i{ color: var(--r-ambra); }
.testata-riquadro .quanti{ margin-left:auto; }
.testata-riquadro .soglia{
  font-weight:400; font-size:.8rem; color: var(--r-tenue);
}

/* Stato vuoto compatto: quando sta dentro un blocco e non da solo
   in mezzo alla pagina. */
.stato-vuoto.compatto{ padding:1.9rem 1rem; }
.stato-vuoto.compatto .cerchio{
  width:44px; height:44px; font-size:1.1rem; margin-bottom:.6rem;
}
.stato-vuoto.compatto p{ margin-bottom:0; }

/* ═══ MINUTERIE DI TABELLA ═════════════════════════════════════════ */

.semaforo{
  display:inline-block; width:.62rem; height:.62rem;
  border-radius:999px; margin-right:.35rem; vertical-align:baseline;
}
.semaforo.rosso { background: var(--r-rosso); }
.semaforo.giallo{ background: var(--r-ambra); }
.semaforo.verde { background: var(--r-verde); }

.tabella-relata .num{ text-align:right; font-variant-numeric: tabular-nums; }
.tabella-relata thead th.num{ text-align:right; }
.tabella-relata .centro{ text-align:center; }
.tabella-relata thead th.centro{ text-align:center; }
.importo{ font-variant-numeric: tabular-nums; font-weight:600; }
.monospazio{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.82rem;
}

/* Riga di conferma dopo un'azione HTMX che toglie la riga dall'elenco */
.riga-conferma td{
  background:#e7f5ee; color: var(--r-verde);
  text-align:center; font-size:.85rem; font-weight:600;
}

/* Differenze mostrate nell'audit trail */
.diff div{ line-height:1.5; }
.diff .campo{ color: var(--r-tenue); }
.diff .da{ color: var(--r-rosso); text-decoration:line-through; }
.diff .a{ color: var(--r-verde); }

/* Comandi in coda alla riga: incolonnati, cosi' non vanno a capo
   in modo irregolare quando sono piu' di due (guasto gia' corretto
   una volta, vedi commit "Pulsanti delle azioni incolonnati"). */
.comandi-riga{ display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; }
.comandi-riga > *{ width:100%; justify-content:center; }

/* ═══ PERCORSO DELLE FASI (scheda notifica) ════════════════════════ */

.percorso{
  display:flex; align-items:stretch; flex-wrap:wrap; gap:.25rem;
  padding:1.15rem;
}
.tappa{
  flex:1 1 7rem; min-width:7rem; max-width:11rem;
  border:1px solid var(--r-bordo); border-radius:10px;
  padding:.6rem .5rem; text-align:center; background:#fbfcfe;
}
.tappa .segno{ font-size:1.15rem; line-height:1; }
.tappa .nome{
  font-size:.73rem; font-weight:650; line-height:1.25; margin-top:.35rem;
  color: var(--r-tenue);
}
.tappa .quando{ font-size:.7rem; margin-top:.15rem; color: var(--r-tenue); }

.tappa.fatta   { border-color:#bfe3cf; background:#f2fbf6; }
.tappa.fatta .segno, .tappa.fatta .nome, .tappa.fatta .quando{ color: var(--r-verde); }
.tappa.corrente{ border-color:#a9c9ea; background:#f1f7fd; box-shadow:0 0 0 2px #e2eefb; }
.tappa.corrente .segno, .tappa.corrente .nome, .tappa.corrente .quando{ color: var(--r-azzurro); }
.tappa.ritardo { border-color:#f0bcbc; background:#fdf4f4; }
.tappa.ritardo .segno, .tappa.ritardo .nome, .tappa.ritardo .quando{ color: var(--r-rosso); }
.tappa.futura  { opacity:.55; }
/* Tappa SCAVALCATA: senza data, ma con tappe successive già compiute. Non è
   "futura" (non arriverà da sé) e non è la fase corrente: è un passaggio
   rimasto indietro, e senza un colore proprio spariva fra le grigie. Il caso
   che ha imposto la distinzione è l'addebito della spesa al cliente, che si
   può scavalcare aspettando gli A/R o il residuo. */
.tappa.arretrata{ border-color:#f0d7ac; background:#fdf9f2; }
.tappa.arretrata .segno, .tappa.arretrata .nome, .tappa.arretrata .quando{
  color: var(--r-ambra);
}

.freccia{ align-self:center; color:#c7d3e0; font-size:.9rem; }

.prossimo-passo{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin:0 1.15rem 1.15rem; padding:.6rem .85rem;
  border-radius:9px; font-size:.86rem;
  background:#f1f7fd; color:#154a80; border:1px solid #d6e6f7;
}
.prossimo-passo.ritardo{ background:#fdf4f4; color:#8c2020; border-color:#f2cccc; }
.prossimo-passo.arretrato{ background:#fdf9f2; color:#7a4c00; border-color:#f0d7ac; }
.prossimo-passo + .prossimo-passo{ margin-top:-.55rem; }
.prossimo-passo a{ margin-left:auto; font-weight:600; color:inherit; }

/* ═══ SCHEDA A COPPIE ETICHETTA/VALORE ═════════════════════════════ */

/* A colonne, non incolonnata: diciassette voci una sotto l'altra fanno
   una striscia alta quanto la pagina e stretta, che ruba larghezza alla
   tabella dei destinatari — dove invece serve. Il numero di colonne lo
   decide lo spazio disponibile. */
.coppie{
  margin:0; padding:.6rem 1.15rem;
  display:grid; gap:0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}
.coppie > div{
  display:flex; gap:1rem; padding:.42rem 0;
  border-bottom:1px solid var(--r-bordo-tenue);
}
.coppie dt{
  flex:0 0 10rem; color: var(--r-tenue); font-weight:400; font-size:.85rem;
}
.coppie dd{ margin:0; flex:1; min-width:0; font-size:.89rem; }
.coppie dd.forte{ font-weight:600; }

/* ═══ TRACCIATURA POSTE ════════════════════════════════════════════
   Cronologia dei movimenti di una raccomandata, dal più recente. */

.intestazione-tracciatura{
  display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap;
  padding:.85rem 1.15rem .3rem;
}
.intestazione-tracciatura > *:last-child{ margin-left:auto; }

/* Quanto è vecchio il dato. In grigio quando è fresco; in ambra, e con
   parole esplicite, quando non ci si può più fidare: una fotografia di
   nove giorni fa altrimenti è indistinguibile da una di stamattina. */
.eta-dato{
  display:flex; align-items:flex-start; gap:.45rem;
  margin:.5rem 1.15rem 0; padding:.5rem .75rem;
  border-radius:8px; font-size:.81rem;
  background:#f4f7fb; color: var(--r-tenue);
}
.eta-dato.vecchio{ background:#fdf3e3; color:#7a4a00; font-weight:500; }

.esito-aggiornamento{
  display:flex; align-items:flex-start; gap:.45rem;
  margin:.5rem 1.15rem 0; padding:.5rem .75rem;
  border-radius:8px; font-size:.83rem; font-weight:500;
}
.esito-aggiornamento.buono{ background:#e7f5ee; color: var(--r-verde); }
.esito-aggiornamento.attenzione{ background:#fdf3e3; color:#7a4a00; }

.tracciatura{ list-style:none; margin:0; padding:.5rem 1.15rem .9rem; }
.tracciatura li{
  position:relative; padding:.5rem 0 .5rem 1.75rem;
}
/* Pallino del movimento */
.tracciatura li::before{
  content:""; position:absolute; left:.18rem; top:.95rem;
  width:.62rem; height:.62rem; border-radius:999px;
  background:#c7d3e0; box-shadow:0 0 0 3px #fff;
}
/* Filo che unisce i movimenti: si ferma sull'ultimo */
.tracciatura li::after{
  content:""; position:absolute; left:.47rem; top:1.5rem; bottom:-.3rem;
  width:1px; background:var(--r-bordo);
}
.tracciatura li:last-child::after{ display:none; }

.tracciatura li.buono::before  { background: var(--r-verde); }
.tracciatura li.attesa::before { background: var(--r-ambra); }
.tracciatura li.ritorno::before{ background: var(--r-azzurro); }
.tracciatura li.guasto::before { background: var(--r-rosso); }

.tracciatura .titolo{ font-size:.88rem; font-weight:600; }
.tracciatura li.buono  .titolo{ color: var(--r-verde); }
.tracciatura li.attesa .titolo{ color: var(--r-ambra); }
.tracciatura li.guasto .titolo{ color: var(--r-rosso); }
.tracciatura .momento{ font-weight:400; color: var(--r-tenue); font-size:.8rem; }
.tracciatura .dove,
.tracciatura .nota{ font-size:.8rem; color: var(--r-tenue); line-height:1.45; }
.tracciatura .nota{ font-style:italic; }

/* ═══ MODULI ═══════════════════════════════════════════════════════
   I campi restano `.form-control` / `.form-select` di Bootstrap: li
   avvolge `pratica-modifica.js` per costruire il pulsante «oggi»
   (input-group), e cambiargli classe romperebbe quel pulsante. Qui si
   ridipingono soltanto, dentro i riquadri dello Studio. */

.riquadro .form-label{
  font-size:.8rem; font-weight:600; color: var(--r-testo);
  margin-bottom:.28rem;
}
.riquadro .form-control,
.riquadro .form-select,
.riquadro textarea.form-control{
  border:1px solid var(--r-bordo); border-radius:8px;
  font-size:.88rem; padding:.45rem .65rem; color: var(--r-testo);
}
.riquadro .form-control:focus,
.riquadro .form-select:focus{
  border-color: var(--r-azzurro); box-shadow:0 0 0 3px #e2eefb;
}
.riquadro .form-text{ font-size:.75rem; color: var(--r-tenue); }
/* Campi DERIVATI dal server — importo residuo (deposito − costo) e A/R
   atteso entro (spedizione + 30 gg): non si compilano a mano. Vanno
   riconosciuti a vista, altrimenti sembrano modificabili e non lo sono.
   Vale anche per il numero della notifica, bloccato finché non lo si
   sblocca col pulsante apposito. */
.riquadro .form-control[readonly]{
  background: var(--r-sfondo); color: var(--r-tenue); cursor: not-allowed;
}
.riquadro .form-check-label{ font-size:.86rem; }
/* Il pulsante «oggi» costruito dal JS: allineato ai campi accanto. */
.riquadro .input-group .btn{
  border:1px solid var(--r-bordo); border-left:0; border-radius:0 8px 8px 0;
  background: var(--r-superficie); color: var(--r-tenue);
  font-size:.8rem; white-space:nowrap;
}
.riquadro .input-group .btn:hover{ background:#f4f8fd; color: var(--r-navy); }
.riquadro .input-group .form-control{ border-radius:8px 0 0 8px; }

.sezione-modulo{ padding:1.15rem; }
.sezione-modulo + .sezione-modulo{ border-top:1px solid var(--r-bordo); }

/* ═══ SCHEDA DESTINATARIO (pagina di modifica) ═════════════════════ */

.scheda-destinatario{ border-top:1px solid var(--r-bordo); }
.scheda-destinatario:first-child{ border-top:0; }
.testa-destinatario{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  width:100%; padding:.85rem 1.15rem; text-align:left;
  background:#fbfcfe; border:0; font-family:inherit; cursor:pointer;
}
.testa-destinatario:hover{ background:#f4f8fd; }
.testa-destinatario .chevron{ margin-left:auto; color:#9fb0c2; transition:transform .15s; }
.testa-destinatario[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

.gruppo-ar{
  border:1px solid var(--r-bordo); border-left:3px solid var(--r-ambra);
  border-radius:9px; padding:.95rem; background:#fdfcf8;
}
.gruppo-ar .titolo-gruppo{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.82rem; font-weight:650; color: var(--r-ambra);
  margin-bottom:.7rem;
}
.gruppo-ar .titolo-gruppo .a-destra{ margin-left:auto; }

.avviso-riga{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .8rem; border-radius:8px; font-size:.83rem;
}
.avviso-riga.rosso{ background:#fdecec; color:#8c2020; }
.avviso-riga.ambra{ background:#fdf3e3; color:#7a4a00; }
/* Fase di sola attesa: dice che NON c'è nulla da fare, e fino a quando.
   Deve leggersi senza sembrare un allarme. */
.avviso-riga.neutro{ background:#eef2f7; color:#41506b; font-weight:500; }

/* Barra di salvataggio sempre visibile: la scheda è lunga, e il
   pulsante in fondo obbligava a scorrere tutto per salvare. */
.barra-salva{
  position:sticky; bottom:0; z-index:15;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin-top:1.25rem; padding:.85rem 1.15rem;
  background: var(--r-superficie);
  border:1px solid var(--r-bordo); border-radius: var(--r-raggio);
  box-shadow:0 -2px 14px rgba(16,40,70,.07);
}
.barra-salva .nota{ color: var(--r-tenue); font-size:.82rem; margin-left:auto; }

/* ═══ SCHERMI STRETTI ══════════════════════════════════════════════
   La barra laterale diventa una striscia orizzontale scorrevole.
   Niente pulsante che apre e chiude: servirebbe JavaScript, e in questa
   applicazione il codice sta fuori dall'HTML (CSP). Una striscia che
   scorre non ha stati da gestire e non puo' rompersi. */

@media (max-width: 900px){
  .impalcatura{ flex-direction:column; }
  .barra-laterale{
    width:100%; flex:none; height:auto; position:static;
    flex-direction:row; align-items:center; overflow-x:auto;
  }
  .occhiello-menu, .piede-barra, .marchio .studio{ display:none; }
  .menu-laterale{ flex-direction:row; padding:.5rem; }
  .menu-laterale a{ white-space:nowrap; }
  .menu-laterale a::before{ display:none; }
  .barra-alta{ position:static; padding:.7rem 1rem; }
  .contenuto{ padding:1.1rem; }
  .ricerca{ flex:1; min-width:0; }
  .ricerca input{ width:100%; }
  .strumenti{ margin-left:0; width:100%; }
  /* Nome e ruolo escono dallo schermo: resta la sola iniziale, che basta
     ad aprire il menu (Cambia password, Amministrazione, Esci). */
  .area-utente .chi, .area-utente .ruolo{ display:none; }
  .area-utente{ padding-left:.6rem; }
}

/* ═══ STAMPA ═══════════════════════════════════════════════════════ */

@media print{
  .barra-laterale, .barra-alta{ display:none; }
  .contenuto{ padding:0; max-width:none; }
  .riquadro, .metrica{ box-shadow:none; break-inside:avoid; }
}