/* ═══════════════════════════════════════════════════════════════════════
   consulti.css — regole di DOMINIO del portale VetWay Consulti.
   Caricato nel blocco host_head, subito DOPO vetway.css del pacchetto
   vetway-ui. Nessun colore, font o breakpoint letterale: i valori vengono
   dalle variabili --ovic-* del pacchetto e, per le semantiche
   successo/pericolo/avviso, dalle variabili --bs-* di Bootstrap.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Testata del portale (blocco header): simbolo + nome prodotto ── */
.consulti-testata {
  background: var(--ovic-blu);
  padding: .55rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.consulti-testata img { height: 28px; width: auto; }
.consulti-testata .prodotto {
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}
.consulti-testata .prodotto span { color: var(--ovic-oro-lt); }
.consulti-testata .sottotitolo {
  color: rgba(255, 255, 255, .6);
  font-size: .78rem;
  margin-left: auto;
}
@media (max-width: 767.98px) {
  .consulti-testata { padding: .45rem .75rem; }
  .consulti-testata .sottotitolo { display: none; }
}

/* ── Avviso sopra la testata (blocco avvisi): "completa i dati di fatturazione" ── */
.consulti-avviso {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
  border-bottom: 1px solid var(--bs-warning-border-subtle);
  padding: 6px 14px;
  font-size: .82rem;
  text-align: center;
  font-weight: 500;
}
.consulti-avviso a { color: inherit; font-weight: 700; }

/* ── Stato della richiesta: .pill-stato del pacchetto (dalla 0.2.0) con il
   tono scelto da Richiesta.tono_stato; qui non serve piu' nulla. ── */

/* ── Form lunghi a blocchi (registrazione): titolo di blocco = .sezione-sottotitolo del pacchetto ── */
.blocco-form { margin-top: 1.1rem; }
.blocco-form > .sezione-sottotitolo {
  border-bottom: 1px solid var(--ovic-bordo);
  border-radius: 4px;
  margin-bottom: .75rem;
}

/* ── Testi legali ── */
.legale h5 { margin-top: 1.5rem; color: var(--ovic-blu); font-size: 1rem; }
.legale p, .legale li { line-height: 1.55; font-size: .9rem; }
.segnaposto {
  background: var(--bs-warning-bg-subtle);
  border: 1px dashed var(--bs-warning-border-subtle);
  padding: 0 .3em;
  border-radius: 3px;
  font-weight: 600;
}

/* ── Racconto dell'audit (pagina del caso e pagina di refertazione) ── */
.racconto { list-style: none; padding: 0; margin: 0; font-size: .82rem; }
.racconto li { padding: .3rem 0; border-bottom: 1px solid var(--ovic-bordo); }
.racconto li:last-child { border-bottom: 0; }
.racconto .quando { color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; margin-right: .35rem; }
.racconto .chi { font-weight: 600; }

/* ── Pagina di refertazione: visore degli allegati a sinistra (sopra, su
   mobile), caso e referto a destra (sotto). Breakpoint lg di Bootstrap. ── */
@media (min-width: 992px) {
  .visore { position: sticky; top: .75rem; }
}
/* Elenco dei file a gruppi (consulti/elenco_file.py): titolo della finestra,
   poi le schede con miniatura (immagini) o icona (filmati, PDF). */
.visore-elenco { margin-bottom: .6rem; }
.visore-gruppo {
  margin: .5rem 0 .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ovic-blu);
}
.visore-gruppo:first-child { margin-top: 0; }
.visore-gruppo .conta { font-weight: 600; color: var(--bs-secondary-color); letter-spacing: 0; }
.visore-schede { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ── Gruppi di allegati nel visore: un riquadro per finestra acustica, con la
   sua striscia di colore. Dal collaudo del 12/09: con 27 file i titoli di
   gruppo da soli non bastavano a separare le finestre a colpo d'occhio.
   Colori solo dalle variabili di Bootstrap, nessun esadecimale. ── */
.visore-blocco {
  border: 1px solid var(--ovic-bordo);
  border-left: 4px solid var(--bs-secondary-border-subtle);
  border-radius: 6px;
  padding: .5rem .6rem .6rem;
  margin-bottom: .6rem;
  background: var(--bs-tertiary-bg);
}
.visore-blocco:last-child { margin-bottom: 0; }
.visore-blocco.senza-titolo { border: 0; padding: 0; background: none; }
.visore-blocco .visore-gruppo { margin-top: 0; }
.visore-blocco.blocco-referto { border-left-color: var(--bs-secondary-border-subtle); }
.visore-blocco.blocco-parasternale_destra { border-left-color: var(--bs-primary-border-subtle); }
.visore-blocco.blocco-sottoxifoidea { border-left-color: var(--bs-warning-border-subtle); }
.visore-blocco.blocco-parasternale_sinistra { border-left-color: var(--bs-success-border-subtle); }
.visore-blocco.blocco-liberi,
.visore-blocco.blocco-altro { border-left-color: var(--bs-info-border-subtle); }
.visore-blocco.blocco-altri { border-left-color: var(--bs-danger-border-subtle); }
.visore-scheda {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 13.5rem;
  min-height: 44px;
  padding: .25rem .5rem .25rem .25rem;
  text-align: left;
  font-size: .78rem;
  line-height: 1.2;
  color: var(--ovic-testo);
  background: var(--bs-body-bg);
  border: 1px solid var(--ovic-bordo);
  border-radius: 6px;
}
.visore-scheda:hover { border-color: var(--ovic-oro-lt); }
.visore-scheda:focus-visible { outline: 3px solid var(--ovic-oro-lt); outline-offset: 1px; }
.visore-scheda .miniatura {
  flex: none;
  width: 48px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ovic-grigio);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ovic-blu);
  font-size: 1.1rem;
}
.visore-scheda .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visore-scheda .testo { min-width: 0; }
.visore-scheda .nome {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
}
.visore-scheda .tipo { display: block; font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visore-scheda.attiva { background: var(--ovic-blu); border-color: var(--ovic-blu); color: var(--bs-white); }
.visore-scheda.attiva .tipo { color: var(--bs-white); opacity: .8; }
.visore-scheda.attiva .miniatura { color: var(--ovic-blu); }
.visore-elenco + .visore-scena { margin-top: .6rem; }
.visore-scena {
  background: var(--ovic-grigio);
  border: 1px solid var(--ovic-bordo);
  border-radius: 6px;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visore-scena > * { display: none; }
.visore-scena > .attivo { display: block; }
.visore-scena iframe { width: 100%; height: 78vh; border: 0; }
.visore-scena img, .visore-scena video { max-width: 100%; max-height: 78vh; margin: 0 auto; }
.visore-scena .visore-altro { padding: 2rem 1rem; text-align: center; }
@media (max-width: 767.98px) {
  .visore-scena iframe { height: 60vh; }
  .visore-scena img, .visore-scena video { max-height: 60vh; }
  /* Su mobile le schede di un gruppo scorrono in orizzontale invece di impilarsi. */
  .visore-schede { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .visore-scheda { flex: 0 0 auto; width: 12rem; max-width: 75%; }
}

/* Barra delle azioni del referto: su mobile resta attaccata in basso,
   cosi' «Salva» e «Firma» non scorrono via con i testi lunghi. */
.referto-barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (max-width: 767.98px) {
  .referto-barra {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--ovic-bordo);
    padding: .5rem 0;
  }
  .referto-barra .btn, .referto-barra .btn-nuova { min-height: 44px; }
}
.stato-salvataggio { font-size: .78rem; color: var(--bs-secondary-color); }
.stato-salvataggio.errore { color: var(--bs-danger-text-emphasis); font-weight: 600; }

/* Frasi rapide per declinare: riempiono la casella, poi si completa. */
.frasi-rapide { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.frasi-rapide .btn { font-size: .75rem; }
@media (max-width: 767.98px) { .frasi-rapide .btn { min-height: 44px; } }

/* Referto firmato in lettura e storico delle versioni. */
.referto-firmato .firmato-da { font-size: .8rem; color: var(--bs-secondary-color); }
.rettifica-nota {
  background: var(--bs-warning-bg-subtle);
  border: 1px solid var(--bs-warning-border-subtle);
  color: var(--bs-warning-text-emphasis);
  border-radius: 4px;
  padding: .4rem .6rem;
  font-size: .82rem;
  margin-bottom: .6rem;
}
.caso-in-ritardo { color: var(--bs-danger-text-emphasis); font-weight: 600; }
.azioni-secondarie > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--ovic-blu); }
.azioni-secondarie > summary + * { margin-top: .6rem; }
.testo-a-capo { white-space: pre-wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   Richiesta guidata (F2): componenti nuovi. I primi cinque sono generici
   (nessun riferimento a consulti): candidati per vetway-ui 0.3.0.
     .passi            indicatore dei passi in cima (dove sei, cosa e' fatto)
     .schede-scelta    radio come schede grandi (tipo di esame, esperto)
     .zona-carica      zona di trascinamento che su touch apre il selettore
     .lista-controllo  elenco con caselle fatto / da fare
     .percorso-barra   barra del pulsante principale, sempre in fondo
   Nessun colore letterale: --ovic-* del pacchetto, --bs-* di Bootstrap.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Titolo del caso: il paziente, con il codice piccolo accanto ── */
.caso-titolo { margin: 0; font-weight: 700; color: var(--ovic-testo); }
.codice-caso {
  font-size: .8rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Indicatore dei passi ── */
.passi {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0 0 1.25rem;
}
.passi li { flex: 1 1 0; min-width: 0; position: relative; text-align: center; }
/* Il filo fra un passo e il precedente: colorato fino al passo corrente. */
.passi li + li::before {
  content: '';
  position: absolute;
  top: 1.05rem;
  left: -50%;
  right: 50%;
  height: 2px;
  background: var(--ovic-bordo);
}
.passi li.fatto::before, .passi li.attuale::before { background: var(--ovic-oro); }
.passi .passo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-height: 44px;
  padding: 0 .2rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
}
.passi .numero {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--bs-body-bg);
  border: 2px solid var(--ovic-bordo);
}
.passi .fatto .numero { background: var(--ovic-oro); border-color: var(--ovic-oro); color: var(--bs-white); }
.passi .attuale .numero { background: var(--ovic-blu); border-color: var(--ovic-blu); color: var(--bs-white); }
.passi .etichetta { font-size: .8rem; font-weight: 600; line-height: 1.2; }
.passi .attuale .etichetta { color: var(--ovic-blu); }
.passi a.passo:hover .etichetta { text-decoration: underline; color: var(--ovic-blu); }

/* ── Schede di scelta: <input class="btn-check"> + <label class="scheda-scelta"> ── */
.schede-scelta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem;
}
.scheda-scelta {
  position: relative;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  height: 100%;
  margin: 0;
  min-height: 44px;
  padding: .9rem 2.2rem .9rem 1rem;
  border: 2px solid var(--ovic-bordo);
  border-radius: 8px;
  background: var(--bs-body-bg);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.scheda-scelta:hover { border-color: var(--ovic-oro-lt); }
.scheda-scelta .icona { font-size: 1.6rem; line-height: 1; color: var(--ovic-blu); }
.scheda-scelta .titolo { display: block; font-weight: 700; color: var(--ovic-blu); }
.scheda-scelta .descrizione { display: block; font-size: .85rem; color: var(--bs-secondary-color); }
.scheda-scelta .spunta {
  position: absolute;
  top: .55rem;
  right: .65rem;
  font-size: 1.2rem;
  color: var(--ovic-oro);
  visibility: hidden;
}
.btn-check:checked + .scheda-scelta {
  border-color: var(--ovic-oro);
  background: var(--bs-body-bg);
  background: color-mix(in srgb, var(--ovic-oro) 7%, var(--bs-body-bg));
}
.btn-check:checked + .scheda-scelta .spunta { visibility: visible; }
.btn-check:focus-visible + .scheda-scelta { outline: 3px solid var(--ovic-oro-lt); outline-offset: 2px; }
.btn-check:disabled + .scheda-scelta {
  cursor: not-allowed;
  background: var(--ovic-grigio);
  border-style: dashed;
}
.btn-check:disabled + .scheda-scelta .titolo,
.btn-check:disabled + .scheda-scelta .icona { color: var(--bs-secondary-color); }

/* Scelta rapida a pulsanti (specie): btn-check + .btn del pacchetto Bootstrap. */
.scelta-rapida { display: flex; flex-wrap: wrap; gap: .4rem; }
.scelta-rapida .btn {
  min-height: 44px;
  min-width: 5.5rem;
  border-color: var(--ovic-bordo);
  color: var(--ovic-testo);
  background: var(--bs-body-bg);
  font-weight: 600;
}
.scelta-rapida .btn-check:checked + .btn { background: var(--ovic-blu); border-color: var(--ovic-blu); color: var(--bs-white); }
.scelta-rapida .btn-check:focus-visible + .btn { outline: 3px solid var(--ovic-oro-lt); outline-offset: 2px; }

/* ── Zona di caricamento: <label> che avvolge l'input file (tocco = selettore) ── */
.zona-carica { position: relative; margin: 0; }
.zona-carica-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  width: 100%;
  min-height: 7.5rem;
  margin: 0;
  padding: 1rem;
  text-align: center;
  border: 2px dashed var(--ovic-bordo);
  border-radius: 8px;
  background: var(--bs-body-bg);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.zona-carica-area:hover,
.zona-carica.trascina .zona-carica-area {
  border-color: var(--ovic-oro);
  background: color-mix(in srgb, var(--ovic-oro) 6%, var(--bs-body-bg));
}
.zona-carica:focus-within .zona-carica-area { outline: 3px solid var(--ovic-oro-lt); outline-offset: 2px; }
.zona-carica-area > .bi { font-size: 1.8rem; line-height: 1; color: var(--ovic-oro); }
.zona-carica-area .testo { font-weight: 600; color: var(--ovic-testo); }
.zona-carica-area .sottotesto { font-size: .8rem; color: var(--bs-secondary-color); }
.zona-carica-area .cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  margin-top: .4rem;
  padding: 0 1rem;
  border: 1px solid var(--ovic-oro);
  border-radius: 4px;
  color: var(--ovic-oro-dark);
  font-size: .85rem;
  font-weight: 700;
  background: var(--bs-body-bg);
}
.zona-carica.compatta .zona-carica-area { min-height: 3.5rem; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.zona-carica.compatta .zona-carica-area .cta { margin-top: 0; }
.zona-carica.in-corso .zona-carica-area { cursor: progress; opacity: .75; }
.zona-carica-stato { font-size: .82rem; margin-top: .35rem; color: var(--bs-secondary-color); }
.zona-carica-stato:empty { display: none; }
.zona-carica-stato.errore { color: var(--bs-danger-text-emphasis); font-weight: 600; }
.zona-carica .progress { height: 6px; margin-top: .35rem; }
/* Su telefono e tablet non si trascina: si tocca. */
.solo-tocco { display: none; }
@media (hover: none) and (pointer: coarse) {
  .solo-tocco { display: inline; }
  .solo-mouse { display: none; }
}

/* ── Lista di controllo: cosa c'e' e cosa manca ── */
.lista-controllo { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.lista-controllo li { display: flex; gap: .5rem; align-items: flex-start; line-height: 1.35; }
.lista-controllo li > span { min-width: 0; overflow-wrap: anywhere; }
.lista-controllo .bi { font-size: 1.1rem; line-height: 1.2; flex: none; }
.lista-controllo .fatto .bi { color: var(--bs-success); }
.lista-controllo .fatto .voce { color: var(--bs-secondary-color); }
.lista-controllo .da-fare .bi { color: var(--bs-secondary-color); }
.lista-controllo .da-fare .voce { font-weight: 600; }
.lista-controllo a { color: inherit; text-decoration-color: var(--ovic-bordo); }
.contatore-obbligatori { font-weight: 700; color: var(--ovic-blu); margin-bottom: .5rem; }
.contatore-obbligatori .progress { height: 6px; margin-top: .35rem; }

/* ── Barra del percorso: Indietro a sinistra, il pulsante principale a destra ── */
.percorso-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
  /* Sempre attaccata in basso, non solo su telefono: con 27 righe di
     proiezioni il pulsante principale («Confermo lo smistamento») restava in
     fondo alla pagina e chi caricava non sapeva che esistesse (collaudo del
     12/09). */
  position: sticky;
  bottom: 0;
  z-index: 100;
  background: var(--bs-body-bg);
  padding: .75rem 0;
  border-top: 1px solid var(--ovic-bordo);
  box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, .35);
}
.percorso-barra .principale { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.percorso-barra .btn-nuova,
.percorso-barra .btn-indietro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  font-size: .95rem;
}
.percorso-barra .btn-nuova { padding: 0 1.4rem; }
.percorso-barra .btn-nuova:disabled { opacity: .5; cursor: not-allowed; }
.percorso-barra .btn-indietro {
  padding: 0 1rem;
  border: 1px solid var(--ovic-bordo);
  border-radius: 4px;
  background: var(--bs-body-bg);
  color: var(--ovic-blu);
  font-weight: 600;
  text-decoration: none;
}
.percorso-barra .btn-indietro:hover { border-color: var(--ovic-blu); }
/* Nel DOM «Avanti» viene prima (Invio da tastiera = Avanti), a video sta a destra. */
.percorso-barra > .btn-indietro { order: -1; }
.percorso-barra .perche { font-size: .82rem; color: var(--bs-secondary-color); text-align: right; max-width: 30rem; }
@media (max-width: 767.98px) {
  .percorso-barra {
    background: var(--ovic-grigio);
    padding: .6rem 0;
    flex-wrap: nowrap;
  }
  .percorso-barra .principale { flex: 1 1 auto; align-items: stretch; }
  .percorso-barra .btn-nuova { width: 100%; }
  .percorso-barra .perche { text-align: left; }
}

/* ═══ Solo del portale: righe delle proiezioni eco, file caricati, riepilogo ═══ */

/* File gia' caricato in una zona: spunta, nome, Sostituisci / Rimuovi. */
.file-caricato {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  padding: .5rem .75rem;
  margin-bottom: .4rem;
  border: 1px solid var(--bs-success-border-subtle);
  border-radius: 6px;
  background: var(--bs-success-bg-subtle);
}
.file-caricato > .bi-check-circle-fill { color: var(--bs-success); font-size: 1.15rem; }
.file-caricato .nome { flex: 1 1 10rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.file-caricato .meta { display: block; font-size: .78rem; font-weight: 400; color: var(--bs-secondary-color); }
.file-caricato .azioni { display: flex; gap: .35rem; margin-left: auto; }
.file-caricato .azioni .btn { font-size: .8rem; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }
.file-caricato form { margin: 0; }
@media (max-width: 767.98px) {
  .file-caricato .azioni .btn { min-height: 44px; }
}

/* Una riga per proiezione del catalogo: riferimenti a sinistra, testi a
   destra, file o zona sotto i testi (su telefono a tutta larghezza). */
.riga-proiezione {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-template-areas: "rif testa" "rif testi" "rif zona";
  grid-template-rows: auto auto 1fr;
  gap: .4rem 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--ovic-bordo);
  scroll-margin-top: 1rem;
}
.riga-proiezione:first-child { border-top: 0; padding-top: .25rem; }
.riferimento-galleria { grid-area: rif; }
.testa-riga { grid-area: testa; }
/* Testi: i paragrafi a tutta riga; i richiudibili chiusi uno accanto all'altro. */
.testi-riga { grid-area: testi; display: flex; flex-wrap: wrap; column-gap: 1.25rem; align-items: flex-start; }
.testi-riga > p, .testi-riga > details[open] { flex: 1 1 100%; }
.riga-proiezione .riferimento {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ovic-grigio);
  border: 1px solid var(--ovic-bordo);
}
.riga-proiezione .riferimento img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.riferimento:hover, a.riferimento:focus-visible { outline: 3px solid var(--ovic-oro-lt); outline-offset: 1px; }
.riferimento-conta {
  position: absolute;
  right: .3rem;
  bottom: .3rem;
  padding: 0 .4rem;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--bs-white);
  background: var(--ovic-blu-dark);
  display: none;
}
.miniature { display: flex; gap: .35rem; margin-top: .35rem; }
.miniature a {
  flex: 0 0 calc((100% - .7rem) / 3);
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--ovic-bordo);
}
.miniature a:hover, .miniature a:focus-visible { outline: 2px solid var(--ovic-oro-lt); }
.miniature img { width: 100%; height: 100%; object-fit: cover; display: block; }
.riferimento-segnaposto {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: .4rem;
  text-align: center;
  font-size: .75rem;
  line-height: 1.2;
  color: var(--bs-secondary-color);
  border: 1px dashed var(--ovic-bordo);
  border-radius: 6px;
}
.riferimento-segnaposto .bi { font-size: 1.3rem; }
.riga-proiezione .nome-proiezione { margin: 0 0 .25rem; font-size: 1rem; font-weight: 700; color: var(--ovic-blu); }
.riga-proiezione .dati { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: center; font-size: .82rem; color: var(--bs-secondary-color); margin-bottom: .3rem; }
.riga-proiezione .dati .pill-stato { font-size: .75rem; }
.riga-proiezione .testo-riga { margin: 0 0 .2rem; font-size: .82rem; line-height: 1.4; color: var(--ovic-testo); }
.riga-proiezione .testo-riga strong { color: var(--ovic-blu); font-weight: 600; }
.riga-proiezione .zona { grid-area: zona; }
.istruzioni { margin-top: .2rem; font-size: .82rem; }
.istruzioni > summary { cursor: pointer; font-weight: 600; color: var(--ovic-link); display: inline-flex; align-items: center; min-height: 32px; }
.istruzioni > p { margin: .1rem 0 0; color: var(--ovic-testo); }
@media (max-width: 767.98px) {
  /* Su telefono testi e zona a tutta larghezza sotto immagine e titolo. */
  .riga-proiezione {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-areas: "rif testa" "testi testi" "zona zona";
    grid-template-rows: auto;
  }
  .miniature { display: none; }
  .riferimento-conta { display: inline-block; }
  .istruzioni > summary { min-height: 44px; }
}

/* Modale delle immagini di riferimento. */
.riferimento-ingrandito { text-align: center; }
.riferimento-ingrandito > img { max-width: 100%; max-height: 70vh; border-radius: 6px; }
.riferimento-ingrandito .didascalia { margin: .5rem 0 0; font-size: .85rem; color: var(--bs-secondary-color); }
.miniature-modale { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.miniature-modale button {
  width: 5rem;
  min-height: 44px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid var(--ovic-bordo);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ovic-grigio);
}
.miniature-modale button.attiva { border-color: var(--ovic-oro); }
.miniature-modale img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gruppi per finestra acustica: <details class="ovic-card"> con la testata
   del pacchetto come <summary>; chiusi da soli quando l'obbligatorio c'e'. */
.gruppo-finestra > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.gruppo-finestra > summary::-webkit-details-marker { display: none; }
.gruppo-finestra > summary .conteggio { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
.gruppo-finestra > summary .bi-chevron-down { transition: transform .15s; }
.gruppo-finestra[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.gruppo-finestra:not([open]) > summary { border-radius: 5px; }
.riferimento-segnaposto .testo-segnaposto {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .riferimento-segnaposto .testo-segnaposto { -webkit-line-clamp: 3; }
}
.elenco-controllo > summary { cursor: pointer; }
.lista-controllo-gruppo {
  margin: .6rem 0 .25rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  display: flex;
  justify-content: space-between;
}
.elenco-controllo > summary .progress { margin-left: 0; }
.gruppo-facoltative > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-weight: 700;
  color: var(--ovic-blu);
}
.gruppo-facoltative > summary::-webkit-details-marker { display: none; }
.gruppo-facoltative > summary .bi-chevron-down { transition: transform .15s; }
.gruppo-facoltative[open] > summary .bi-chevron-down { transform: rotate(180deg); }

/* Riepilogo del passo 4: blocchi con «Modifica» accanto. */
.riepilogo-blocco { padding: .9rem 0; border-top: 1px solid var(--ovic-bordo); }
.riepilogo-blocco:first-child { border-top: 0; padding-top: 0; }
.riepilogo-blocco .testa { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.riepilogo-blocco h6 {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ovic-blu);
}
.riepilogo-blocco .modifica { font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; min-height: 32px; }
.riepilogo-blocco dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem 1rem; margin: 0; }
.riepilogo-blocco dt { font-weight: 500; color: var(--bs-secondary-color); }
.riepilogo-blocco dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.riepilogo-prezzo { font-size: 1.4rem; font-weight: 700; color: var(--ovic-testo); }
.riepilogo-prezzo small { display: block; font-size: .8rem; font-weight: 400; color: var(--bs-secondary-color); }
@media (max-width: 767.98px) {
  .riepilogo-blocco .modifica { min-height: 44px; }
  .riepilogo-blocco dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .riepilogo-blocco dd { margin-bottom: .35rem; }
}

/* Scheda dell'esperto dentro .scheda-scelta. */
.scheda-esperto { flex-direction: column; gap: .15rem; }
.scheda-esperto .specializzazione { font-size: .85rem; color: var(--bs-secondary-color); }
.scheda-esperto .prezzo { margin-top: .35rem; font-size: 1.15rem; font-weight: 700; color: var(--ovic-testo); }
.scheda-esperto .imponibile { font-size: .78rem; color: var(--bs-secondary-color); }
.scheda-esperto .tempo { font-size: .85rem; color: var(--ovic-testo); }
.scheda-esperto .nota { font-size: .8rem; color: var(--bs-secondary-color); font-style: italic; }
.scheda-esperto .assente {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--bs-warning-text-emphasis);
}

/* Pie' di pagina del portale: markup come quello del pacchetto, senza la riga
   sulla tecnologia (vedi templates/base.html). */
.consulti-footer a { color: var(--bs-white); opacity: .75; }
.consulti-footer a:hover { opacity: 1; }
.consulti-footer strong { color: var(--bs-white); opacity: .85; }

/* ── Elenco filtrato (razza nel passo 1): combobox con listbox sotto il campo.
   Generico, candidato per vetway-ui 0.3.0 (static/consulti/js/elenco_filtrato.js). ── */
.elenco-filtrato { position: relative; }
.elenco-filtrato-voci {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  /* Sopra la barra di «Avanti», che su telefono sta attaccata in basso (z-index 100). */
  z-index: 110;
  max-height: 16rem;
  max-height: min(16rem, 45vh);
  overflow-y: auto;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
  background: var(--bs-body-bg);
  border: 1px solid var(--ovic-bordo);
  border-radius: 6px;
  box-shadow: var(--bs-box-shadow);
}
.elenco-filtrato-voci [role="option"] { padding: .4rem .75rem; cursor: pointer; }
.elenco-filtrato-voci [role="option"]:hover,
.elenco-filtrato-voci [role="option"][aria-selected="true"] {
  background: var(--ovic-grigio);
  background: color-mix(in srgb, var(--ovic-oro) 14%, var(--bs-body-bg));
  color: var(--ovic-testo);
}
.elenco-filtrato-avviso { color: var(--bs-secondary-color); }
@media (max-width: 767.98px) {
  .elenco-filtrato-voci [role="option"] { min-height: 44px; display: flex; align-items: center; }
}

/* ── Foto dell'esperto: riquadro in testa alla scheda (passo 2), iniziali se manca ── */
.scheda-esperto .esperto-testa { display: flex; align-items: center; gap: .75rem; margin-bottom: .2rem; }
.scheda-esperto .esperto-nome { min-width: 0; }
.esperto-foto {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ovic-grigio);
  border: 1px solid var(--ovic-bordo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.esperto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esperto-iniziali { font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; color: var(--ovic-blu); }
.btn-check:disabled + .scheda-scelta .esperto-foto { opacity: .6; }
/* Il campo foto nel profilo e nell'admin: anteprima protetta + «Togli la foto». */
.foto-attuale { display: flex; align-items: center; gap: .75rem; margin-bottom: .4rem; }
.foto-attuale img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ovic-bordo); }
/* Pagina del caso: i file a gruppi per finestra, come nel visore. */
.tbl-risultati .riga-gruppo th {
  padding-top: .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ovic-blu);
  background: var(--bs-body-bg);
}

/* ── Dati in sola lettura (templates/_dato.html): etichetta + valore come
   TESTO, senza il bordo da casella di _campo.html del pacchetto, che li
   faceva sembrare campi da compilare. Variante da portare in vetway-ui 0.3.0. ── */
.dato { margin-bottom: .65rem; min-width: 0; }
.dato-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: .05rem;
}
.dato-valore { font-size: .95rem; font-weight: 600; color: var(--ovic-testo); overflow-wrap: anywhere; }
.dato-valore.dato-testo { font-weight: 400; white-space: pre-wrap; line-height: 1.45; }
.dato-valore.vuoto { font-weight: 400; color: var(--bs-secondary-color); }
/* ═══ Eco: cartella intera, tavolo di smistamento, protocollo stampabile ═══
   (consulti/templates/consulti/percorso/_zona_cartella.html, _posto.html,
   carica.html; eco/templates/eco/protocollo.html). Solo --ovic-* e --bs-*. */

/* Zona unica per la cartella: la stessa area tratteggiata delle zone, con due pulsanti. */
.zona-cartella .zona-carica-area { cursor: default; min-height: 9rem; }
.zona-cartella.compatta .zona-carica-area { min-height: 4rem; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.zona-cartella.compatta .zona-carica-area .sottotesto { flex-basis: 100%; }
.zona-cartella .zona-carica-area.trascina {
  border-color: var(--ovic-oro);
  background: color-mix(in srgb, var(--ovic-oro) 6%, var(--bs-body-bg));
}
.zona-cartella.in-corso .zona-carica-area { opacity: .6; pointer-events: none; }
.cartella-pulsanti { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.cartella-pulsanti .cta { cursor: pointer; margin-top: .4rem; }
.zona-cartella.compatta .cartella-pulsanti .cta { margin-top: 0; }
.cartella-pulsanti .cta:focus-within { outline: 3px solid var(--ovic-oro-lt); outline-offset: 2px; }
.cartella-avanzamento { margin-top: .6rem; }
.cartella-avanzamento .progress { height: 8px; margin-top: .35rem; }
.cartella-note { list-style: none; padding: 0; margin: .4rem 0 0; font-size: .82rem; color: var(--bs-secondary-color); }
.cartella-note li.errore { color: var(--bs-danger-text-emphasis); font-weight: 600; }

/* Smistamento in corso e riepilogo dopo lo smistamento. */
.avviso-smistamento, .riepilogo-smistamento {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--ovic-bordo);
  border-left: 4px solid var(--ovic-oro);
  border-radius: 6px;
  background: var(--bs-body-bg);
  font-size: .9rem;
}
.avviso-smistamento .spinner-border { flex: none; margin-top: .15rem; color: var(--ovic-oro); }
.riepilogo-smistamento { justify-content: space-between; flex-wrap: wrap; }
.riepilogo-smistamento > div { flex: 1 1 20rem; }
.riepilogo-numeri { display: inline-flex; flex-wrap: wrap; gap: .35rem; margin-left: .5rem; vertical-align: middle; }

/* Bollini del tavolo: verde confermato/sicuro, giallo da verificare, neutro scelto da te. */
.bollino {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--ovic-bordo);
  background: var(--ovic-grigio);
  color: var(--ovic-testo);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.bollino--ok, .bollino--sicuro {
  background: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
  color: var(--bs-success-text-emphasis);
}
.bollino--verifica {
  background: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
  color: var(--bs-warning-text-emphasis);
}
.bollino--manuale {
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
  color: var(--bs-primary-text-emphasis);
}
.bollino--vuota {
  background: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
  color: var(--bs-danger-text-emphasis);
}

/* Un file sul tavolo: miniatura, nome e bollino, «Sposta in...» ed «Elimina». */
.posto-file {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  grid-template-areas: "mini testo" "mini azioni";
  gap: .35rem .75rem;
  padding: .5rem;
  margin-bottom: .4rem;
  border: 1px solid var(--ovic-bordo);
  border-left: 4px solid var(--ovic-bordo);
  border-radius: 6px;
  background: var(--bs-body-bg);
  cursor: grab;
}
.posto-file.posto--confermato, .posto-file.posto--sicuro { border-left-color: var(--bs-success); }
.posto-file.posto--verifica { border-left-color: var(--bs-warning); }
.posto-file.posto--manuale { border-left-color: var(--bs-primary); }
.posto-file.in-volo { opacity: .45; }
.posto-miniatura {
  grid-area: mini;
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ovic-blu-dark);
}
.posto-miniatura img { width: 100%; height: 100%; object-fit: contain; display: block; }
.posto-senza { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 1.6rem;
  color: var(--bs-white); opacity: .7; }
.posto-tipo {
  position: absolute;
  left: .25rem;
  bottom: .25rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ovic-oro);
  color: var(--bs-white);
  font-size: .85rem;
}
.posto-testo { grid-area: testo; min-width: 0; }
.posto-nome { display: block; font-weight: 600; font-size: .85rem; overflow-wrap: anywhere; }
.posto-stato { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .15rem; }
.posto-meta { font-size: .75rem; color: var(--bs-secondary-color); }
.posto-motivo { font-size: .8rem; margin-top: .15rem; }
.posto-motivo > summary { cursor: pointer; color: var(--ovic-link); font-weight: 600; display: inline-flex; min-height: 28px; align-items: center; }
.posto-motivo > p { margin: 0; color: var(--ovic-testo); }
.posto-azioni { grid-area: azioni; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.posto-sposta { display: flex; gap: .35rem; flex: 1 1 12rem; margin: 0; min-width: 0; }
.posto-sposta select { min-width: 0; flex: 1 1 auto; }
.posto-azioni .btn { min-height: 34px; }
.posto-perche { margin: -.2rem 0 .6rem; padding-left: .6rem; font-size: .78rem; color: var(--bs-secondary-color); }

/* Pannello «Da smistare»: a destra su desktop, resta in vista mentre si scorre. */
@media (min-width: 992px) {
  .pannello-da-smistare { position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; }
}
.pannello-da-smistare .card-header-ovic .conteggio { margin-left: .35rem; }
.pannello-da-smistare .posto-file { grid-template-columns: 5.5rem minmax(0, 1fr); }

/* Bersagli del trascinamento e righe obbligatorie vuote. */
.trascinando-file [data-destinazione] { outline: 2px dashed var(--ovic-bordo); outline-offset: -2px; }
.trascinando-file [data-destinazione].bersaglio {
  outline: 3px solid var(--ovic-oro);
  background: color-mix(in srgb, var(--ovic-oro) 6%, var(--bs-body-bg));
}
.riga-proiezione.vuota-obbligatoria .nome-proiezione { color: var(--bs-danger-text-emphasis); }
.riga-proiezione.vuota-obbligatoria .zona .zona-carica-area { border-color: var(--bs-danger-border-subtle); }
.riga-vuota-avviso { margin: 0 0 .35rem; font-size: .82rem; font-weight: 600; color: var(--bs-danger-text-emphasis); }
.riga-vuota-avviso .bi { margin-right: .3rem; }
.tavolo-in-corso { cursor: progress; }
.avviso-tavolo { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1080; max-width: 90vw; }

@media (max-width: 767.98px) {
  .posto-file { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-areas: "mini testo" "azioni azioni"; }
  .posto-azioni .btn, .posto-sposta select { min-height: 44px; }
  .posto-motivo > summary { min-height: 44px; }
  .cartella-pulsanti .cta { min-height: 44px; }
}

/* Protocollo stampabile (a video; la stampa e' nel template). */
.protocollo-sottotitolo { font-size: .9rem; color: var(--bs-secondary-color); }
.protocollo-consiglio {
  padding: .6rem .9rem;
  border: 1px solid var(--ovic-oro);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ovic-oro) 7%, var(--bs-body-bg));
  font-weight: 600;
}
.protocollo-riga {
  display: grid;
  grid-template-columns: 2rem 14rem minmax(0, 1fr);
  gap: .75rem;
  padding: .75rem 0;
  border-top: 1px solid var(--ovic-bordo);
}
.protocollo-riga:first-child { border-top: 0; padding-top: 0; }
.protocollo-numero { font-size: 1.3rem; font-weight: 700; color: var(--ovic-blu); line-height: 1; }
.protocollo-immagine img { width: 100%; max-height: 11rem; object-fit: contain; border: 1px solid var(--ovic-bordo); border-radius: 4px; background: var(--ovic-blu-dark); }
.protocollo-senza { border: 1px dashed var(--ovic-bordo); border-radius: 4px; padding: 1.5rem .5rem; text-align: center; font-size: .8rem; color: var(--bs-secondary-color); }
.protocollo-nome { font-weight: 700; color: var(--ovic-blu); }
.protocollo-dati { font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.protocollo-testo p { margin: 0 0 .2rem; font-size: .88rem; line-height: 1.4; }
.protocollo-testo strong { color: var(--ovic-blu); font-weight: 600; }
@media (max-width: 767.98px) {
  .protocollo-riga { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .protocollo-immagine { grid-column: 2; }
  .protocollo-testo { grid-column: 2; }
}

/* ── Dettatura vocale (templates/_campo_dettatura.html + js/dettatura.js) ──
   Il campo resta quello di _campo_form.html: qui sotto solo la barra dei
   pulsanti, il testo parziale di cio' che si sta dicendo e lo stato. */
.dettatura { margin-bottom: 1rem; }
.campo-dettatura > .mb-3 { margin-bottom: .35rem !important; }
.dettatura-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dettatura-pulsante { --bs-btn-padding-y: .2rem; --bs-btn-font-size: .82rem; }
.dettatura-pulsante.in-ascolto {
  color: var(--bs-danger-text-emphasis);
  border-color: var(--bs-danger-border-subtle);
  background: var(--bs-danger-bg-subtle);
  animation: dettatura-pulsa 1.4s ease-in-out infinite;
}
@keyframes dettatura-pulsa { 50% { border-color: var(--bs-danger); } }
@media (prefers-reduced-motion: reduce) { .dettatura-pulsante.in-ascolto { animation: none; } }
.dettatura-annulla {
  --bs-btn-font-size: .82rem;
  --bs-btn-padding-y: .2rem;
  text-decoration: none;
  color: var(--ovic-blu);
}
.dettatura-parziale:empty { display: none; }
.dettatura-parziale {
  margin-top: .35rem;
  padding: .3rem .5rem;
  border-left: 3px solid var(--bs-danger-border-subtle);
  background: var(--bs-tertiary-bg);
  font-size: .85rem;
  font-style: italic;
  color: var(--bs-secondary-color);
}
.dettatura-stato:empty { display: none; }
.dettatura-stato { margin-top: .3rem; font-size: .82rem; color: var(--bs-secondary-color); }
.dettatura-stato.ascolto { color: var(--bs-danger-text-emphasis); font-weight: 600; }
.dettatura-stato.attesa { color: var(--ovic-blu); }
.dettatura-stato.fatto { color: var(--bs-success-text-emphasis); }
.dettatura-stato.errore { color: var(--bs-danger-text-emphasis); font-weight: 600; }
.dettatura-aiuto { margin-top: .3rem; }

@media (max-width: 767.98px) {
  /* Touch: 44 px anche per i pulsanti piccoli della barra. */
  .dettatura-barra .btn { min-height: 44px; --bs-btn-font-size: .9rem; }
  .dettatura-stato, .dettatura-parziale { font-size: .9rem; }
}