/* Interfaccia del gestionale. Font SF Pro Display servito da /font. */

@font-face {
  font-family: 'SF Pro Display';
  src: url('/font/SFPRODISPLAYREGULAR.OTF') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('/font/SFPRODISPLAYMEDIUM.OTF') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('/font/SFPRODISPLAYBOLD.OTF') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* color-scheme dice al browser di disegnare in scuro anche quello che non
     controlliamo: barre di scorrimento, calendari dei campi data, menu dei
     select. Senza, in mezzo all'interfaccia scura si aprono riquadri bianchi. */
  color-scheme: dark;

  --sfondo: #0d0d11;
  --superficie: #16161c;
  --superficie-2: #1d1d25;
  --testo: #eaeaf0;
  --tenue: #9494a4;
  --bordo: #262630;
  --bordo-forte: #35353f;
  --accento: #4c9dff;
  --accento-tenue: #14243a;
  --rosso: #ff6b6b;
  --arancio: #ffa94d;
  --ambra: #ffd43b;
  --verde: #51cf66;
  --viola: #b197fc;
  --acqua: #3bc9db;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --raggio: 12px;
}

* { box-sizing: border-box; }

/* Una regola di display su una classe batte il valore predefinito
   dell'attributo hidden: senza questa riga il velo della finestra di dialogo
   restava sopra la pagina, invisibile ma capace di intercettare i clic. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Accesso ------------------------------------------------------------ */

.accesso {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, #1b1b24 0%, #101015 55%, #08080b 100%);
}

.riquadro-accesso {
  width: min(360px, 90vw);
  background: var(--superficie);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--ombra);
  display: grid;
  gap: 14px;
}
.riquadro-accesso h1 { font-size: 22px; }
.riquadro-accesso .sottotitolo { margin: -8px 0 8px; color: var(--tenue); font-size: 13px; }
.riquadro-accesso label { display: grid; gap: 6px; font-size: 12px; color: var(--tenue); font-weight: 500; }
/* I due passaggi dell'accesso sono contenitori: senza griglia propria i campi
   che stanno dentro si attaccano l'uno all'altro. */
#passo-credenziali, #passo-codice { display: grid; gap: 14px; }
.riquadro-accesso input {
  padding: 10px 12px; border: 1px solid var(--bordo-forte); border-radius: 9px; background: var(--superficie-2);
}
.riquadro-accesso input:focus { outline: 2px solid var(--accento); outline-offset: -1px; }
.riquadro-accesso button {
  margin-top: 6px; padding: 11px; border: 0; border-radius: 9px;
  background: var(--accento); color: #fff; font-weight: 500; cursor: pointer;
}
.riquadro-accesso button:hover { background: #6cb0ff; }

.errore { color: var(--rosso); font-size: 13px; margin: 0; }

/* --- Testata ------------------------------------------------------------ */

/* La testata è la barra che si ha sempre sotto gli occhi: comandi grandi
   abbastanza da centrarli senza mirare. */
.testata {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 22px;
  background: rgba(18, 18, 24, .82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bordo);
  position: sticky; top: 0; z-index: 20;
}
.marchio { display: flex; align-items: center; gap: 9px; font-size: 17px; letter-spacing: -.01em; }
.testata .minimo { padding: 9px 16px; font-size: 14px; color: var(--testo); }
.testata .minimo:hover { border-color: var(--testo); background: var(--superficie-2); }

.barra-caricamento {
  position: sticky; top: 69px; z-index: 19;
  height: 3px; overflow: hidden; background: var(--bordo);
}
.barra-caricamento span {
  display: block; width: 34%; height: 100%; background: var(--accento);
  animation: scorre 1.1s ease-in-out infinite;
}
/* Indeterminata: quante cartelle mancano non si sa finché non si sono lette. */
@keyframes scorre {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(390%); }
}

.cerca { position: relative; flex: 1; max-width: 640px; display: flex; gap: 10px; align-items: center; }

#ricerca {
  flex: 1; min-width: 0; font-size: 15px;
  padding: 11px 18px; border: 1px solid var(--bordo-forte); border-radius: 22px;
  background: var(--superficie-2);
}
#ricerca:focus { outline: 2px solid var(--accento); outline-offset: -1px; background: var(--superficie); }

#azzera-filtri { white-space: nowrap; border-radius: 20px; }
.conteggio-filtri {
  display: inline-block; margin-left: 7px; min-width: 17px; padding: 0 5px;
  background: var(--accento); color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 500; text-align: center;
}

/* I due totali in denaro stanno accanto alla scheda "Strutture": sono il numero
   che si guarda per primo entrando, non un dato da cercare in fondo a una
   colonna. */
/* Campanello dei problemi rilevati: il numero rosso dice quanti annunci hanno
   qualcosa da sistemare prima di poterli lavorare. */
.avvisi { position: relative; margin-left: auto; }
.campanello {
  border: 0; background: transparent; cursor: pointer; font-size: 19px;
  padding: 4px 6px; border-radius: 8px; position: relative; line-height: 1;
  filter: grayscale(1) opacity(.75);
}
.campanello:hover, .campanello[aria-expanded="true"] { filter: none; background: var(--superficie); }
.pallino-avvisi {
  position: absolute; top: -3px; right: -4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: #e03131; color: #fff; border: 2px solid var(--sfondo);
  border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 13px;
  display: inline-block; text-align: center;
}
/* Il pannello dei problemi si legge, non si sbircia: sono le righe che dicono
   perché una struttura non è lavorabile, e vanno capite prima di telefonare. */
.tendina-avvisi {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 30;
  width: min(620px, 94vw); max-height: 76vh; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: 14px;
  box-shadow: var(--ombra); padding: 22px 24px; display: grid; gap: 16px;
}
.tendina-avvisi h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); }
.avviso-voce {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--bordo); padding-top: 16px;
}
.avviso-voce:first-of-type { border-top: 0; padding-top: 0; }
.avviso-voce .quanto { font-weight: 700; font-size: 15px; color: #ff8787; font-variant-numeric: tabular-nums; }
.avviso-voce .cosa { font-size: 15px; line-height: 1.5; }
.avviso-voce .cosa strong { font-size: 16px; }
.avviso-voce .cosa small { color: var(--tenue); font-size: 13.5px; display: inline-block; margin-top: 4px; }
.avviso-voce .azioni-utente .minimo { padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.tendina-avvisi .nota { font-size: 14px; }

.totali { display: flex; align-items: center; gap: 16px; margin-left: 16px; }
.totale { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.totale .voce { font-size: 14px; color: var(--testo); }
.totale strong { font-size: 17px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.totale.accettate strong { color: var(--verde); }

.led {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--verde); animation: battito 3s ease-in-out infinite;
}
@keyframes battito {
  0%, 82%, 100% { opacity: .35; box-shadow: none; }
  88% { opacity: 1; box-shadow: 0 0 8px 2px rgba(81, 207, 102, .65); }
  94% { opacity: .35; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .led { animation: none; opacity: 1; }
}

.schede { display: flex; gap: 4px; }
.scheda {
  padding: 10px 20px; border: 0; border-radius: 9px; background: transparent;
  color: var(--testo); cursor: pointer; font-weight: 500; font-size: 15px;
}
.scheda:hover { background: var(--sfondo); }
.scheda.attiva { background: var(--accento); color: #fff; }

.utente { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--testo); }
.minimo {
  border: 1px solid var(--bordo-forte); background: var(--superficie); color: var(--tenue);
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
}
.minimo:hover { border-color: var(--tenue); color: var(--testo); }
.largo { width: 100%; }

/* --- Impianto ----------------------------------------------------------- */

.vista {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  align-items: start;
  height: calc(100vh - 69px);
}
.vista.con-dettaglio { grid-template-columns: 252px minmax(0, 1fr) 520px; }

.pannello-filtri {
  display: grid; gap: 14px; align-content: start;
  height: 100%; overflow-y: auto; padding-right: 4px;
}

.cruscotto { display: grid; gap: 6px; }
.tessera {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: baseline;
}
.tessera .numero { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.tessera .voce { font-size: 14px; color: var(--testo); }
.tessera.evidenza { background: var(--accento-tenue); border-color: #2b4a72; color: var(--testo); }
.tessera.evidenza .voce { color: rgba(255, 255, 255, .7); }

.gruppo-filtri {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 13px; display: grid; gap: 9px;
}
.gruppo-filtri h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.gruppo-filtri select {
  padding: 7px 9px; border: 1px solid var(--bordo-forte); border-radius: 8px; background: var(--superficie-2);
}
.pulsanti-filtro { display: flex; flex-wrap: wrap; gap: 5px; }
.pillola {
  border: 1px solid var(--bordo-forte); background: var(--superficie-2); color: var(--tenue);
  padding: 5px 10px; border-radius: 14px; cursor: pointer; font-size: 12px; font-weight: 500;
}
.pillola:hover { border-color: var(--tenue); }
.pillola.attiva { background: var(--accento); border-color: var(--accento); color: #fff; }
/* La pillola di Airbnb si accende del suo colore: la si riconosce senza
   leggerla, come il tag nelle righe. */
.pillola.airbnb { color: #ff5a5f; border-color: rgba(255, 90, 95, .5); }
.pillola.airbnb.attiva { background: #ff5a5f; border-color: #ff5a5f; color: #fff; }
.pillola .quanti { opacity: .6; margin-left: 4px; }

.spunta { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.nota { font-size: 12px; color: var(--tenue); margin: 0; line-height: 1.45; }

/* --- Elenco ------------------------------------------------------------- */

.elenco {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  position: relative; /* aggancio delle tendine di colonna */
}
.intestazione-elenco, .riga {
  display: grid;
  /* Le colonne di testo crescono insieme sugli schermi larghi: con una sola
     elastica tutte le altre restavano strette e il contenuto andava a capo. */
  grid-template-columns:
    minmax(240px, 2.8fr) 96px minmax(118px, .9fr) minmax(150px, 1.15fr)
    84px minmax(130px, .85fr) 96px minmax(96px, .7fr) minmax(140px, .95fr) 28px;
  gap: 14px; align-items: center;
  padding: 10px 16px;
}
.intestazione-elenco {
  border-bottom: 1px solid var(--bordo); background: var(--superficie-2);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 500;
}

/* Ogni intestazione è il filtro della sua colonna. La freccia dice che si apre,
   il pallino che quella colonna sta già filtrando qualcosa. */
.colonna {
  position: relative;
  border: 0; background: transparent; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: left;
  padding: 2px 0; cursor: pointer; border-radius: 5px;
  display: flex; align-items: center; gap: 5px;
}
/* La freccia sta fuori dal flusso, appoggiata al bordo destro: dentro il
   centraggio spostava il titolo rispetto al dato sotto, prima a sinistra e poi
   — con la gemella invisibile — a destra. Fuori dal flusso non pesa, e si
   mostra al passaggio del mouse, quando serve sapere che la colonna si apre. */
.colonna::after {
  content: '▾'; font-size: 9px; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); opacity: 0; transition: opacity .12s;
}
.colonna:hover::after, .colonna[aria-expanded="true"]::after { opacity: .6; }
.colonna:hover { color: var(--testo); }
.colonna[aria-expanded="true"] { color: var(--accento); }
.colonna.filtrata { color: var(--accento); }
.colonna.filtrata::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accento);
}

.tendina-colonna {
  position: absolute; top: 38px; z-index: 25;
  width: max-content; max-width: min(420px, 90vw);
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: 12px;
  box-shadow: var(--ombra); padding: 14px;
}
.gruppo-tendina { display: grid; gap: 9px; }
.gruppo-tendina h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.gruppo-tendina select {
  padding: 8px 10px; border: 1px solid var(--bordo-forte); border-radius: 9px; background: var(--superficie-2);
}
.gruppo-tendina .pulsanti-filtro { max-width: 340px; max-height: 210px; overflow-y: auto; }
.fascia-prezzo { display: flex; gap: 8px; }
.fascia-prezzo input {
  width: 100px; padding: 8px 10px; border: 1px solid var(--bordo-forte);
  border-radius: 9px; background: var(--superficie-2);
}
.righe { overflow-y: auto; flex: 1; }
.riga { border-bottom: 1px solid var(--bordo); cursor: pointer; }
.riga:hover { background: var(--superficie-2); }
.riga.scelta { background: var(--accento-tenue); }
.riga.chiusa { opacity: .5; }

.titolo-riga { display: flex; align-items: center; gap: 7px; min-width: 0; }
.titolo-riga .segno { flex: 0 0 auto; }
.titolo-riga .nome { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Aria fra il titolo e la sua riga secondaria. Vale per tutte le colonne che hanno una
   riga secondaria — struttura, tipo, zona — perche' spaziarne una sola
   scentrerebbe la sua rispetto alle altre. */
.riga .sotto {
  font-size: 13px; color: var(--tenue); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-top: 5px;
}
/* Le stelline restano piccole anche se la riga è cresciuta: cinque emoji alla
   dimensione del testo si prendevano metà colonna. */
.riga .stelline { font-size: 9px; letter-spacing: .5px; vertical-align: 1.5px; }

/* La fascia di priorità è la prima cosa da leggere nella riga, quindi sta in
   una pastiglia squadrata: il bordo la stacca dal nome senza il peso di un
   fondo pieno, che sul tema scuro spegneva il rosso dei casi critici. */
.segno {
  font-size: 13px; font-weight: 600; white-space: nowrap; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 4px; border: 1px solid currentColor;
  display: inline-block; line-height: 1.15;
}
.segno.fuoriuso { color: #ff4d4d; }
.segno.massima { color: #ff4d4d; }
.segno.alta { color: #ffa94d; }
.segno.media { color: var(--tenue); }

/* Il bollo GDPR: piccolo, in riquadro, perché è un'altra cosa rispetto alla
   fascia di priorità e non deve confondersi con essa. */
.segno.gdpr {
  font-size: 10px; padding: 2px 6px; border-radius: 4px; border: 1px solid currentColor;
  letter-spacing: .04em;
}
/* Il rosso corallo del marchio Airbnb (#FF5A5F): si riconosce a colpo d'occhio
   e distingue gli annunci dalle strutture trovate sul web, che hanno dati
   diversi — prezzo a notte sì, contatti no. */
.segno.airbnb {
  font-size: 13px; padding: 3px 9px; border-radius: 4px; font-weight: 600;
  color: #ff5a5f; border: 1px solid currentColor; letter-spacing: .01em;
}
.meta.airbnb { color: #ff5a5f; border-color: rgba(255, 90, 95, .45); }

/* La ristorazione ha un colore suo, distinto dal corallo di Airbnb e dal rosso
   dei problemi: serve a capire in un colpo d'occhio con chi si sta parlando. */
.segno.ristorazione {
  font-size: 13px; padding: 3px 9px; border-radius: 4px; font-weight: 600;
  color: #ff922b; border: 1px solid currentColor; letter-spacing: .01em;
}
.meta.ristorazione { color: #ff922b; border-color: rgba(255, 146, 43, .45); }
.pillola.ristorazione { color: #ff922b; border-color: rgba(255, 146, 43, .5); }
.pillola.ristorazione.attiva { background: #ff922b; border-color: #ff922b; color: #fff; }
/* Celeste per quello che abbiamo trovato noi cercando sul web: si distingue a
   colpo d'occhio dal corallo di Airbnb e dall'arancio della ristorazione. Nei
   dati la fonte resta `openstreetmap`, ma quel nome a chi lavora l'elenco non
   dice niente: conta sapere che la struttura ha email e telefono pubblici. */
.segno.ricerca-web {
  font-size: 13px; padding: 3px 9px; border-radius: 4px; font-weight: 600;
  color: #4dabf7; border: 1px solid currentColor; letter-spacing: .01em;
}
.meta.ricerca-web { color: #4dabf7; border-color: rgba(77, 171, 247, .45); }
.pillola.ricerca-web { color: #4dabf7; border-color: rgba(77, 171, 247, .5); }
.pillola.ricerca-web.attiva { background: #4dabf7; border-color: #4dabf7; color: #fff; }

.segno.gdpr.critica { color: #ff4d4d; }
.segno.gdpr.da-sistemare { color: var(--arancio); }

.rilievo .argomento { color: var(--accento); margin-top: 3px; }

.punto { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tenue); }

.icone-contatto { display: flex; gap: 5px; font-size: 13px; }
.icone-contatto span { opacity: .28; }
.icone-contatto span.c-sì { opacity: 1; }

/* Dalla seconda colonna in poi intestazione e dato stanno sullo stesso asse:
   con l'intestazione a sinistra e il contenuto sparso la tabella sembrava
   disallineata anche quando non lo era. La colonna della struttura resta a
   bandiera: i nomi sono lunghi e diversi, centrarli renderebbe il bordo
   sinistro un zigzag. */
.intestazione-elenco > *:not(:first-child) { justify-content: center; text-align: center; }
.riga > *:not(:first-child) { text-align: center; }
.riga .icone-contatto { justify-content: center; }

.riga select, .riga input[type="text"] {
  width: 100%; padding: 5px 7px; border: 1px solid transparent; border-radius: 7px;
  background: var(--superficie-2);
}
.riga select { text-align: center; text-align-last: center; }
.riga select:hover, .riga input[type="text"]:hover { border-color: var(--bordo-forte); }
.riga select:focus, .riga input[type="text"]:focus { outline: 2px solid var(--accento); outline-offset: -1px; background: var(--sfondo); }
.riga input[type="text"] { text-align: center; font-variant-numeric: tabular-nums; }
.riga input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; margin: 0 auto; display: block; }

.stato-da-contattare { color: var(--tenue); }
.stato-contattato { color: var(--accento); }
.stato-in-trattativa { color: var(--viola); }
.stato-proposta-inviata { color: var(--acqua); }
.stato-cliente { color: var(--verde); font-weight: 500; }
.stato-perso { color: var(--rosso); }
.stato-non-idoneo { color: var(--tenue); }

.vuoto { padding: 40px; text-align: center; color: var(--tenue); }

/* Il cestino resta smorto finché non ci si passa sopra: cancella dossier e
   schermate, non è un tasto da premere per sbaglio scorrendo l'elenco. */
.cestino {
  border: 0; background: transparent; cursor: pointer; padding: 2px;
  font-size: 13px; line-height: 1; opacity: .18; border-radius: 6px;
}
.riga:hover .cestino { opacity: .55; }
.cestino:hover { opacity: 1 !important; background: #3a1c1c; }
.colonna-vuota { display: block; }

/* --- Dettaglio ---------------------------------------------------------- */

.dettaglio {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  height: 100%; overflow-y: auto; padding: 18px;
}
.dettaglio h2 { font-size: 21px; line-height: 1.25; }
.dettaglio h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue);
  margin: 22px 0 9px; font-weight: 500;
}
.capo-dettaglio { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.chiudi { border: 0; background: transparent; font-size: 20px; color: var(--tenue); cursor: pointer; line-height: 1; }

.riga-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.meta {
  font-size: 13px; background: var(--superficie-2); border: 1px solid var(--bordo);
  padding: 4px 9px; border-radius: 7px; color: var(--tenue);
}

.contatti-elenco { display: grid; gap: 9px; }
.contatto { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.contatto .etichetta { color: var(--tenue); min-width: 92px; font-size: 14px; }
.contatto .valore { word-break: break-word; }
.contatto.secondario { opacity: .75; }
.avvertenza {
  background: #2a2113; border: 1px solid #4a3a19; color: #ffd8a8;
  border-radius: 9px; padding: 11px 13px; font-size: 14px; line-height: 1.5;
}

.modulo-scheda { display: grid; gap: 11px; }
.modulo-scheda label { display: grid; gap: 5px; font-size: 14px; color: var(--tenue); font-weight: 500; }
.modulo-scheda input, .modulo-scheda select, .modulo-scheda textarea {
  padding: 8px 10px; border: 1px solid var(--bordo-forte); border-radius: 9px; background: var(--superficie-2);
  font-weight: 400; color: var(--testo);
}
.modulo-scheda textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
/* La casella di spunta resta su una riga sola: la griglia dei campi la
   metterebbe sotto la sua etichetta, larga quanto il pannello. */
.modulo-scheda label.spunta { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--testo); }
.modulo-scheda label.spunta input { width: 17px; height: 17px; padding: 0; }
.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.totale-proposta {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 9px; padding: 10px 12px;
}
.totale-proposta strong { font-size: 19px; letter-spacing: -.02em; }

.azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.azione {
  padding: 9px; border-radius: 9px; border: 1px solid var(--bordo-forte); background: var(--superficie);
  cursor: pointer; font-weight: 500; font-size: 14px;
}
.azione:hover { border-color: var(--tenue); }
.azione.negativa { color: #ff8787; border-color: #4a2626; background: #241618; }
.azione.negativa:hover { background: #331d1f; }
.azione.positiva { color: #69db7c; border-color: #234a2f; background: #14231a; }
.azione.positiva:hover { background: #1b2f22; }

.rilievo { border-left: 3px solid var(--bordo-forte); padding: 2px 0 2px 10px; margin-bottom: 10px; }
.rilievo.critica, .rilievo.alta { border-left-color: var(--rosso); }
.rilievo.media { border-left-color: var(--arancio); }
.rilievo .titolo-rilievo { font-weight: 500; font-size: 15px; }
.rilievo .spiega { font-size: 14px; color: var(--tenue); line-height: 1.5; margin-top: 3px; }

.schermate { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.schermate figure { margin: 0; display: grid; gap: 4px; justify-items: center; cursor: zoom-in; }
.schermate img {
  height: 130px; border-radius: 8px; border: 1px solid var(--bordo); background: var(--superficie-2);
  transition: border-color .12s;
}
.schermate figure:hover img { border-color: var(--accento); }
.schermate figcaption { font-size: 12px; color: var(--tenue); }

/* --- Lettore dei dossier ------------------------------------------------ */

.lettore {
  position: fixed; inset: 0; z-index: 55;
  background: var(--sfondo);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
/* La barra del lettore è quella che si guarda mentre si legge un dossier
   davanti al cliente: sta larga e si legge da lontano. */
.barra-lettore {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 18px 26px; border-bottom: 1px solid var(--bordo); background: var(--superficie);
}
.capo-lettore { display: flex; align-items: center; gap: 24px; min-width: 0; }
.capo-lettore strong { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schede-dossier { display: flex; gap: 6px; }
.schede-dossier button {
  border: 0; background: transparent; color: var(--testo); cursor: pointer;
  padding: 10px 18px; border-radius: 9px; font-size: 15px; white-space: nowrap;
}
.schede-dossier button:hover { background: var(--superficie-2); }
.schede-dossier button.attiva { background: var(--accento); color: #fff; }
.comandi-lettore { display: flex; gap: 10px; }
.comandi-lettore .minimo { padding: 10px 18px; font-size: 15px; color: var(--testo); }
.comandi-lettore .minimo:hover { border-color: var(--testo); background: var(--superficie-2); }

/* Il foglio: colonna stretta e interlinea larga, si legge davanti al cliente. */
.foglio {
  overflow-y: auto; padding: 32px 24px 80px;
  font-size: 15px; line-height: 1.65;
}
.foglio > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.foglio h1 { font-size: 26px; margin: 0 auto 6px; }
.foglio h2 { font-size: 19px; margin: 30px auto 10px; }
.foglio h3 { font-size: 16px; margin: 22px auto 8px; }
.foglio p { margin: 0 auto 14px; }
.foglio ul, .foglio ol { margin: 0 auto 14px; padding-left: 22px; }
.foglio li { margin-bottom: 5px; }
.foglio hr { border: 0; border-top: 1px solid var(--bordo); margin: 26px auto; }
.foglio blockquote {
  margin: 0 auto 16px; padding: 10px 14px; border-left: 3px solid var(--accento);
  background: var(--superficie); color: var(--tenue); font-size: 14px;
}
.foglio code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 5px; padding: 1px 5px;
}
.foglio table { border-collapse: collapse; width: 100%; margin: 0 auto 18px; font-size: 14px; }
.foglio th, .foglio td { border-bottom: 1px solid var(--bordo); padding: 8px 10px; text-align: left; vertical-align: top; }
.foglio th { color: var(--tenue); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.foglio tr:hover td { background: var(--superficie); }

/* In stampa esce il solo dossier, su carta bianca: è quello che si consegna. */
@media print {
  body > *:not(#lettore) { display: none !important; }
  .lettore { position: static; background: #fff; color: #000; }
  .barra-lettore { display: none; }
  .foglio { overflow: visible; padding: 0; font-size: 11pt; }
  .foglio blockquote { background: #f5f5f5; color: #333; }
  .foglio code { background: #f5f5f5; border-color: #ddd; }
  .foglio th, .foglio td { border-bottom: 1px solid #ccc; }
  .foglio th { color: #444; }
}

/* --- Galleria delle schermate ------------------------------------------- */

.galleria {
  position: fixed; inset: 0; z-index: 60;
  /* Quasi opaco: al 92% la testata sottostante si leggeva ancora attraverso
     lo sfondo e sembrava un difetto di disegno. */
  background: #06060a;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
}
.barra-galleria {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid #1e1e26; color: var(--testo); font-size: 13px;
}
.comandi-galleria { display: flex; gap: 8px; align-items: center; }
.comandi-galleria .minimo { text-decoration: none; }

/* Le schermate a pagina intera sono alte migliaia di pixel: o si adattano
   all'altezza, o si scorrono a dimensione reale. Servono tutte e due. */
.corpo-galleria { grid-column: 2; height: 100%; overflow: auto; display: grid; place-items: center; padding: 14px 0; }
.corpo-galleria img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.corpo-galleria.reale { place-items: start center; }
.corpo-galleria.reale img { max-width: none; max-height: none; }

.freccia-galleria {
  background: transparent; border: 0; color: var(--tenue);
  font-size: 34px; line-height: 1; cursor: pointer; padding: 10px;
}
.freccia-galleria:hover { color: var(--testo); }
.freccia-galleria.sinistra { grid-column: 1; }
.freccia-galleria.destra { grid-column: 3; }

.cronologia { display: grid; gap: 8px; font-size: 12px; }
.voce-cronologia { border-bottom: 1px dashed var(--bordo); padding-bottom: 7px; }
.voce-cronologia .quando { color: var(--tenue); }

.documenti { display: flex; flex-wrap: wrap; gap: 6px; }
.documento {
  font-size: 12px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--bordo-forte);
  background: var(--superficie-2); cursor: pointer;
}
.documento:hover { border-color: var(--tenue); }
.testo-documento {
  white-space: pre-wrap; font-size: 12px; line-height: 1.55; background: var(--superficie-2);
  border: 1px solid var(--bordo); border-radius: 9px; padding: 12px; max-height: 320px; overflow: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* --- Utenti ------------------------------------------------------------- */

.colonna-utenti {
  grid-column: 1 / -1; max-width: 860px; margin: 0 auto; width: 100%;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 22px; display: grid; gap: 14px; align-content: start;
}
.tabella-utenti { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella-utenti th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); font-weight: 500; padding: 8px 6px; border-bottom: 1px solid var(--bordo);
}
.tabella-utenti td { padding: 9px 6px; border-bottom: 1px solid var(--bordo); }
.tabella-utenti .azioni-utente { display: flex; gap: 6px; justify-content: flex-end; }

.nuovo-utente { border-top: 1px solid var(--bordo); padding-top: 16px; display: grid; gap: 10px; }
.riga-campi { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.riga-campi label { display: grid; gap: 5px; font-size: 12px; color: var(--tenue); font-weight: 500; }
.riga-campi input, .riga-campi select {
  padding: 8px 10px; border: 1px solid var(--bordo-forte); border-radius: 9px; background: var(--superficie-2);
}
.riga-campi button {
  padding: 9px 18px; border: 0; border-radius: 9px; background: var(--accento); color: #fff;
  font-weight: 500; cursor: pointer;
}

/* --- Sicurezza ---------------------------------------------------------- */

.modale {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .6);
  display: grid; place-items: center;
  padding: 20px;
}
.riquadro-modale {
  width: min(460px, 96vw); max-height: 90vh; overflow-y: auto;
  background: var(--superficie); border-radius: 16px; padding: 24px;
  box-shadow: var(--ombra); display: grid; gap: 12px; align-content: start;
}
.riquadro-modale h2 { font-size: 18px; }
.chiave {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 17px; letter-spacing: .08em;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 9px;
  padding: 13px; text-align: center; user-select: all;
}
.codici-recupero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 9px; padding: 13px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; user-select: all;
}

/* --- Avviso ------------------------------------------------------------- */

.avviso {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--superficie-2); color: var(--testo); border: 1px solid var(--bordo-forte);
  padding: 10px 18px; border-radius: 22px;
  font-size: 13px; box-shadow: var(--ombra); z-index: 40;
}
.avviso.rosso { background: var(--rosso); }

@media (max-width: 1180px) {
  .vista, .vista.con-dettaglio { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pannello-filtri, .elenco, .dettaglio { height: auto; max-height: none; }
  .intestazione-elenco { display: none; }
  .riga { grid-template-columns: 1fr 1fr; }
}