/* Aspetto "Caldo maremmano" — gli stessi colori del prototipo approvato. */

:root{
  --verde:      #1C5E20;
  --verde-scuro:#164C1A;
  --verde-tenue:#3A7A3E;
  --oro:        #C9A227;
  --oro-chiaro: #F3E9C6;
  --salvia:     #E8EFE6;
  --crema:      #F7F4EC;
  --bianco:     #FFFFFF;
  --testo:      #2B2A26;
  --testo-tenue:#6E6B60;
  --bordo:      #E4DFD2;
  --ambra:      #9A6114;
  --ambra-sf:   #FBF1DF;
  --rosso:      #DC1C2E;
  --rosso-sf:   #FDECEE;
  --r-grande: 16px;
  --r-medio:  12px;
  --r-pillola: 999px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  padding:24px 16px 48px;
  background:var(--crema);
  color:var(--testo);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Avenir Next","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
}

.foglio{ max-width:680px; margin:0 auto; }

h1{
  font-size:22px; font-weight:600; margin:0 0 4px;
  color:var(--verde-scuro); text-wrap:balance;
}
.sottotitolo{ color:var(--testo-tenue); margin:0 0 22px; }

/* ── il verdetto in cima ──────────────────────────────────────────────── */
.verdetto{
  display:flex; align-items:center; gap:12px;
  border-radius:var(--r-grande); padding:16px 18px; margin-bottom:20px;
  border:1px solid var(--bordo); background:var(--bianco);
}
.verdetto .segno{ font-size:26px; line-height:1; }
.verdetto .parola{ font-size:17px; font-weight:600; }
.verdetto .spiega{ color:var(--testo-tenue); font-size:14px; }

.verdetto.attesa{ background:var(--bianco); }
.verdetto.bene  { background:var(--salvia);   border-color:#CBDDC7; }
.verdetto.bene .parola{ color:var(--verde-scuro); }
.verdetto.male  { background:var(--rosso-sf); border-color:#F6CBD0; }
.verdetto.male .parola{ color:var(--rosso); }
.verdetto.forse { background:var(--ambra-sf); border-color:#EEDCB9; }
.verdetto.forse .parola{ color:var(--ambra); }

/* ── la tabella dei controlli ─────────────────────────────────────────── */
.riquadro{
  background:var(--bianco); border:1px solid var(--bordo);
  border-radius:var(--r-grande); overflow:hidden; margin-bottom:20px;
}
.riquadro h2{
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--testo-tenue); margin:0; padding:14px 18px 10px;
}
.controllo{
  display:flex; gap:14px; align-items:baseline;
  padding:11px 18px; border-top:1px solid var(--bordo);
}
.controllo .voce{ flex:0 0 190px; color:var(--testo-tenue); }
.controllo .esito{ flex:1; min-width:0; word-break:break-word; }
.controllo .esito b{ font-weight:600; }
.controllo .esito .dettaglio{
  display:block; color:var(--testo-tenue); font-size:13px; margin-top:2px;
}
.numero{ font-variant-numeric:tabular-nums; font-weight:600; font-size:17px; }

.pallino{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; }
.p-ok  { background:var(--verde-tenue); }
.p-no  { background:var(--rosso); }
.p-ni  { background:var(--oro); }
.p-att { background:var(--bordo); }

/* ── la nota esplicativa ──────────────────────────────────────────────── */
.nota{
  background:var(--salvia); border:1px solid #CBDDC7;
  border-radius:var(--r-medio); padding:14px 16px; font-size:14px;
  color:#3B4A3A; margin-bottom:20px;
}
.nota b{ color:var(--verde-scuro); }
.nota ul{ margin:8px 0 0; padding-left:20px; }
.nota li{ margin-bottom:4px; }

.dafare{
  background:var(--ambra-sf); border:1px solid #EEDCB9;
  border-radius:var(--r-medio); padding:14px 16px; font-size:14px;
  color:#5C3B0C; margin-bottom:20px;
}
.dafare b{ color:var(--ambra); }
code{
  background:var(--bianco); border:1px solid var(--bordo); border-radius:6px;
  padding:1px 6px; font-size:13px;
}

.piede{
  color:var(--testo-tenue); font-size:12px; text-align:center;
  border-top:1px solid var(--bordo); padding-top:14px; margin-top:28px;
}

@media (max-width:520px){
  .controllo{ display:block; }
  .controllo .voce{ margin-bottom:2px; }
}


/* ═══ LA PORTA — la pagina del login ═══════════════════════════════════════ */

body.porta{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:32px 16px;
}

.entrata{
  width:100%; max-width:420px; text-align:center;
}

.entrata .marchio{
  width:100%; max-width:260px; height:auto;
  margin:0 auto 26px; display:block;
}

.entrata .benvenuto{
  color:var(--testo-tenue); margin:0 0 26px; text-wrap:balance;
}

.scheda-entrata{
  background:var(--bianco); border:1px solid var(--bordo);
  border-radius:var(--r-grande); padding:26px 22px;
  box-shadow:0 1px 2px rgba(43,42,38,.04), 0 8px 24px rgba(43,42,38,.05);
}

/* il bottone di Google: bianco con bordo, come vuole Google */
.bottone-google{
  display:flex; align-items:center; justify-content:center; gap:11px;
  width:100%; padding:13px 18px;
  background:var(--bianco); color:var(--testo);
  border:1px solid #C9C4B6; border-radius:var(--r-pillola);
  font-size:15px; font-weight:600; font-family:inherit;
  cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s;
}
.bottone-google:hover{ border-color:var(--verde-tenue); background:#FCFBF7; }
.bottone-google:focus-visible{
  outline:none; border-color:var(--verde);
  box-shadow:0 0 0 3px var(--salvia);
}
.bottone-google:active{ background:#F4F1E9; }
.bottone-google svg{ width:19px; height:19px; flex:0 0 19px; }

.entrata .sotto-bottone{
  color:var(--testo-tenue); font-size:13px; margin:16px 0 0; line-height:1.45;
}

.entrata .aiuto{
  margin-top:22px; font-size:13px;
}
.entrata .aiuto a{ color:var(--verde); text-decoration:none; border-bottom:1px solid #BFD4BC; }
.entrata .aiuto a:hover{ border-bottom-color:var(--verde); }

/* il cartello del passo in corso */
.cantiere{
  background:var(--ambra-sf); border:1px solid #EEDCB9;
  border-radius:var(--r-medio); padding:12px 14px;
  font-size:13px; color:#5C3B0C; text-align:left; margin-top:18px;
}
.cantiere b{ color:var(--ambra); }

.entrata .piede{ margin-top:26px; border-top:none; padding-top:0; }

.nascosto{ display:none !important; }

/* chi è dentro */
.ciao{
  font-size:19px; font-weight:600; color:var(--verde-scuro);
  margin:0 0 4px; text-wrap:balance;
}
.ciao-sotto{ color:var(--testo-tenue); font-size:14px; margin:0; word-break:break-word; }
.ciao-mail{
  color:#9A968A; font-size:13px; margin:8px 0 0; word-break:break-all;
}
/* il verde è del benvenuto: un rifiuto non deve vestirsi da successo */
.ciao-fermo{ color:var(--ambra); }

.bottone-entra{
  display:inline-block; margin-top:18px; padding:11px 24px;
  background:var(--verde); color:#fff; text-decoration:none;
  border-radius:var(--r-pillola); font-size:15px; font-weight:600;
  transition:background .15s;
}
.bottone-entra:hover{ background:var(--verde-scuro); }
.bottone-entra:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--salvia), 0 0 0 4px var(--verde);
}


/* ═══ IL GUSCIO DEL CRM — barra in alto e impianto di pagina ═══════════════
   Ricalca il prototipo approvato. Una cosa NON è stata ricopiata: nel
   prototipo la barra sbiadiva al passaggio del mouse (opacity .82), sotto
   un commento che parlava d'altro. Era un residuo di prova, non una scelta:
   qui non c'è. */

body.crm{
  padding:0; display:block; min-height:100vh;
}

.barra{
  background:var(--verde); color:#EFF3EC;
  padding:0 20px;
  display:flex; align-items:center; gap:22px;
  min-height:64px;
  position:sticky; top:0; z-index:50;
  flex-wrap:wrap;
}
.marchio{ display:flex; align-items:center; gap:11px; padding:12px 0; flex-shrink:0; }
.marchio img{
  height:26px; width:auto; display:block;
  /* il logo è verde: qui sopra il verde lo si porta a crema */
  filter:brightness(0) invert(1) opacity(.94);
}

.menu{ display:flex; gap:4px; flex:1; overflow-x:auto; scrollbar-width:none; }
.menu::-webkit-scrollbar{ display:none; }
.menu button{
  background:none; border:0; color:#D5E2D3;
  font:inherit; font-size:15.5px;
  padding:9px 14px; border-radius:var(--r-pillola);
  cursor:pointer; white-space:nowrap; transition:background .15s, color .15s;
}
.menu button:hover{ background:rgba(255,255,255,.10); color:#fff; }
.menu button.attivo{ background:rgba(255,255,255,.16); color:#fff; font-weight:600; }
/* le voci non ancora costruite: si vedono, ma si capisce che non aprono */
.menu button.spenta{ color:rgba(213,226,211,.45); cursor:default; }
.menu button.spenta:hover{ background:rgba(255,255,255,.05); color:rgba(213,226,211,.6); }

.btn-menu{
  display:none; align-items:center; gap:8px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.25);
  color:#fff; font:inherit; font-size:15px; font-weight:600;
  padding:8px 14px; border-radius:var(--r-pillola); cursor:pointer;
}
.btn-menu .righe{ font-size:17px; line-height:1; }

.destra{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.targhetta{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--oro-chiaro); border:1px solid rgba(201,162,39,.55);
  padding:4px 10px; border-radius:var(--r-pillola); white-space:nowrap;
}
.iniziali{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff; cursor:pointer;
  font-family:inherit; padding:0;
}
.iniziali:hover{ background:rgba(255,255,255,.24); }
.iniziali:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.45); }

/* la tendina dell'utente */
.utente-box{ position:relative; }
.utente-menu{
  position:absolute; right:0; top:48px; min-width:250px;
  background:var(--bianco); border:1px solid var(--bordo);
  border-radius:var(--r-medio); padding:14px 16px;
  box-shadow:0 10px 30px rgba(40,35,20,.18);
  z-index:60; text-align:left; color:var(--testo);
}
.utente-menu .u-nome{ font-weight:600; font-size:15.5px; margin:0 0 2px; }
.utente-menu .u-ruolo{ color:var(--testo-tenue); font-size:13.5px; margin:0; }
.utente-menu .u-mail{ color:#9A968A; font-size:12.5px; margin:6px 0 0; word-break:break-all; }
.utente-menu .separa{ height:1px; background:var(--bordo); margin:12px -16px; }

main{ max-width:1180px; margin:0 auto; padding:30px 20px 80px; }

.titolo-pagina{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:20px;
}
.titolo-pagina h1{ font-size:26px; font-weight:600; margin:0; color:var(--verde-scuro); }
.titolo-pagina .conta{ color:var(--testo-tenue); font-size:14px; }

/* Fra il telefono e lo schermo largo — tablet e portatili piccoli — le voci
   non ci stanno in fila accanto al logo. Il menu scorrerebbe di lato con la
   barra di scorrimento nascosta, e l'ultima voce sparirebbe SENZA DIRLO.
   Meglio farlo scendere su una riga sua: si vede tutto. */
@media (min-width:641px) and (max-width:1090px){
  .menu{ order:3; flex:1 0 100%; padding-bottom:9px; overflow:visible; }
}

@media (max-width:640px){
  .barra{ padding:0 12px; gap:8px; }
  .marchio{ min-width:0; }
  .marchio img{ height:20px; max-width:44vw; }
  .btn-menu{ display:inline-flex; padding:8px 12px; font-size:14.5px; }
  .iniziali{ width:34px; height:34px; font-size:13px; }
  .targhetta{ display:none; }

  /* Su telefono il menu non scorre di lato — le voci si tagliavano a metà.
     Diventa un bottone che apre l'elenco in verticale, una voce per riga. */
  .menu{
    display:none;
    position:fixed; left:12px; right:12px; top:66px;
    flex-direction:column; gap:2px;
    background:var(--bianco); border:1px solid var(--bordo);
    border-radius:var(--r-medio); padding:7px;
    box-shadow:0 10px 30px rgba(40,35,20,.18);
    overflow:visible; z-index:70; max-height:calc(100vh - 90px); overflow-y:auto;
  }
  .menu.aperto{ display:flex; }
  .menu button{
    color:var(--testo); text-align:left; width:100%;
    padding:13px 15px; border-radius:9px; font-size:16.5px;
  }
  .menu button:hover{ background:var(--salvia); color:var(--testo); }
  .menu button.attivo{ background:var(--salvia); color:#265A29; }
  .menu button.spenta{ color:#B4B0A4; }
  .menu button.spenta:hover{ background:none; color:#B4B0A4; }

  .destra{ margin-left:auto; }
  main{ padding:22px 14px 70px; }
  .titolo-pagina h1{ font-size:22px; }
}

/* l'avviso per le voci di menu non ancora costruite */
.avviso-costruzione{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--testo); color:#F7F4EC;
  padding:11px 20px; border-radius:var(--r-pillola);
  font-size:14px; box-shadow:0 8px 24px rgba(40,35,20,.25);
  z-index:90; max-width:calc(100vw - 32px); text-align:center;
}

/* ═══ GLI STRUMENTI SOPRA LA LISTA — ricerca e filtri ═════════════════════ */

.strumenti{
  display:flex; gap:11px; flex-wrap:wrap; align-items:center; margin-bottom:18px;
}
.cerca{ position:relative; flex:1; min-width:220px; }
.cerca input{
  width:100%; font:inherit; font-size:16px;
  padding:11px 15px 11px 40px;
  border:1px solid var(--bordo); border-radius:var(--r-pillola);
  background:var(--bianco); color:var(--testo);
}
.cerca input:focus{ outline:2px solid var(--verde-tenue); outline-offset:-1px; border-color:transparent; }
.cerca .lente{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--testo-tenue); font-size:15px; pointer-events:none;
}

select.campo{
  font:inherit; font-size:15.5px; padding:11px 15px;
  border:1px solid var(--bordo); border-radius:var(--r-pillola);
  background:var(--bianco); color:var(--testo); cursor:pointer;
}
select.campo:focus{ outline:2px solid var(--verde-tenue); outline-offset:-1px; }

.risultati{
  background:var(--salvia); border:1px solid #CFDECD; color:#265A29;
  font-size:14.5px; font-weight:600;
  padding:9px 16px; border-radius:var(--r-pillola); white-space:nowrap;
}

/* la nota sotto i filtri, per le regole che altrimenti sembrano un errore */
.nota-filtro{
  font-size:14px; color:var(--testo-tenue);
  margin:-6px 0 16px; padding-left:2px;
}

.multi{ position:relative; display:inline-block; }
.multi > button{
  font:inherit; font-size:15.5px; padding:11px 15px;
  border:1px solid var(--bordo); border-radius:var(--r-pillola);
  background:var(--bianco); color:var(--testo); cursor:pointer;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.multi > button:hover{ background:#F7F5EE; }
.multi > button[disabled]{ color:#B4B0A4; cursor:default; background:#FAF8F2; }
.multi > button[disabled]:hover{ background:#FAF8F2; }
.multi > button.pieno{
  border-color:var(--verde); background:var(--salvia); color:#265A29; font-weight:600;
}
.multi > button .frecciolina{ font-size:11px; opacity:.6; }
.multi .pannello{
  position:absolute; top:calc(100% + 6px); left:0; min-width:230px; max-height:290px;
  overflow-y:auto; background:var(--bianco); border:1px solid var(--bordo);
  border-radius:var(--r-medio); padding:6px;
  box-shadow:0 6px 24px rgba(40,35,20,.13); display:none; z-index:60;
}
.multi .pannello.aperto{ display:block; }
.multi .pannello label{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:9px; cursor:pointer; font-size:15.5px;
}
.multi .pannello label:hover{ background:var(--salvia); }
.multi .pannello input{
  width:17px; height:17px; accent-color:var(--verde); cursor:pointer; flex-shrink:0;
}
.multi .pannello .pulisci{
  width:100%; text-align:left; background:none; border:0; font:inherit; font-size:14px;
  color:var(--verde); padding:9px 12px; cursor:pointer; border-top:1px solid var(--bordo);
  margin-top:4px;
}
.multi .pannello .pulisci:hover{ text-decoration:underline; }


/* ═══ LA LISTA — ricalca il prototipo approvato ═══════════════════════════ */

.elenco{
  background:var(--bianco); border:1px solid var(--bordo);
  border-radius:var(--r-grande); overflow:hidden;
}

.voce{
  display:flex; align-items:center; gap:16px;
  padding:15px 20px; border-bottom:1px solid #F0EDE3;
  cursor:pointer; transition:background .12s;
}
.voce:last-child{ border-bottom:0; }
.voce:hover{ background:#FBFAF5; }
.voce .principale{ flex:1; min-width:0; }
.voce .nome{ font-weight:600; font-size:16.5px; }
.voce .sotto{ font-size:14.5px; color:var(--testo-tenue); margin-top:2px; }

/* Colonne a larghezza fissa: le righe si incolonnano invece di ballare
   a seconda della lunghezza dei nomi. */
.voce .colonna{ flex-shrink:0; flex-grow:0; font-size:14.5px; width:120px; }
.voce .col-prezzo{ width:124px; }
.voce .col-stato { width:132px; }
.voce .col-agente{ width:136px; }
.voce .col-scad  { width:172px; }
.voce .colonna .etich{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:#9A968A; display:block; margin-bottom:2px;
}
.voce .prezzo{
  font-weight:700; font-size:16.5px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* Un prezzo chiesto e una stima non sono la stessa cosa: la riga sotto
   dice sempre quale dei due si sta guardando. */
.voce .prezzo-da{ display:block; font-size:11.5px; color:#9A968A; margin-top:1px; }
.voce .senza{ color:#9A968A; font-style:normal; }

.pillola{
  display:inline-block; font-size:12.5px; font-weight:600;
  padding:3px 11px; border-radius:var(--r-pillola); white-space:nowrap;
}
.p-grigia{ background:#F1EFE7; color:#5F5C52; border:1px solid #E2DDD0; }
.p-ambra { background:var(--ambra-sf); color:var(--ambra); border:1px solid #EFD9AE; }
.p-oro   { background:var(--oro-chiaro); color:#7A5E12; border:1px solid #E6D28E; }
.p-rossa { background:var(--rosso-sf); color:#A81523; border:1px solid #F3C6CB; }
.p-verde { background:var(--salvia); color:#265A29; border:1px solid #CFDECD; }

.scad-ambra { color:var(--ambra); font-weight:600; }
.scad-visita{ color:var(--verde); font-weight:600; }
.scad-rosso { color:var(--rosso); font-weight:600; }
.scad-quieta{ color:var(--testo-tenue); }

/* quando non c'è niente da mostrare */
.vuoto{ padding:44px 24px; text-align:center; color:var(--testo-tenue); }
.vuoto b{ display:block; color:var(--testo); font-size:16px; margin-bottom:6px; }
.vuoto .spiega{ display:block; font-size:13.5px; color:#9A968A; margin-top:8px; }
.vuoto.guasto b{ color:var(--rosso); }
.vuoto .tecnico{
  display:block; margin-top:10px; font-size:12px; color:#9A968A;
  word-break:break-word;
}

@media (max-width:820px){
  /* Le colonne non ci stanno più in fila: la riga diventa un blocchetto,
     con le etichette che finalmente servono a qualcosa. */
  .voce{ display:block; }
  .voce .principale{ margin-bottom:10px; }
  .voce .colonna{
    display:inline-block; width:auto; min-width:104px;
    margin:0 22px 6px 0; vertical-align:top;
  }
}

/* ═══ LA SCHEDA — pannello di lato, pagina intera sul telefono ════════════ */

.velo{
  position:fixed; inset:0; background:rgba(35,30,20,.38);
  opacity:0; pointer-events:none; transition:opacity .2s; z-index:80;
}
.velo.aperto{ opacity:1; pointer-events:auto; }

/* Largo quanto serve per SCRIVERCI dentro, non solo per leggere: a 580px la
   casella delle note restava di 482, e su uno schermo grande avanzava spazio
   inutilizzato. La lista sotto non si stringe — il pannello ci passa sopra. */
.pannello{
  position:fixed; top:0; right:0; bottom:0; width:min(780px,96vw);
  background:var(--crema); border-left:1px solid var(--bordo);
  transform:translateX(101%); transition:transform .22s ease-out;
  z-index:90; display:flex; flex-direction:column;
  box-shadow:-12px 0 44px rgba(40,35,20,.18);
}
.pannello.aperto{ transform:none; }

.pannello-testa{
  padding:16px 20px; border-bottom:1px solid var(--bordo); background:var(--bianco);
  display:flex; align-items:flex-start; gap:14px; flex-shrink:0;
}
.pannello-testa .cuore{ flex:1; min-width:0; }
.pannello-testa h2{ font-size:20px; margin:0; font-weight:600; }
.pannello-testa .sotto{ font-size:14.5px; color:var(--testo-tenue); margin-top:3px; }

.chiudi-pannello{
  background:none; border:1px solid var(--bordo); border-radius:50%;
  width:34px; height:34px; font-size:16px; color:var(--testo-tenue);
  cursor:pointer; flex-shrink:0; line-height:1; font-family:inherit; padding:0;
}
.chiudi-pannello:hover{ background:#F7F5EE; }
.chiudi-pannello:focus-visible{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px var(--salvia);
}

.pannello-corpo{ overflow-y:auto; padding:18px 20px 44px; flex:1; }
.pannello-corpo .blocco:last-child{ margin-bottom:0; }

/* Dentro la scheda le intestazioni dei riquadri sono titoli veri, non le
   targhette minuscole della pagina di diagnostica. Lo stile sta qui e non
   più in generale, così le due pagine restano ognuna con la sua veste. */
.pannello-corpo .riquadro > header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 20px; border-bottom:1px solid var(--bordo);
}
.pannello-corpo .riquadro > header h2{
  font-size:17.5px; font-weight:600; margin:0; padding:0;
  text-transform:none; letter-spacing:0; color:var(--testo);
}
.pannello-corpo .riquadro > header .conta{
  font-size:14px; color:var(--testo-tenue); white-space:nowrap;
}
/* ⚠️ L'intestazione e' uno `space-between` pensato per DUE cose: titolo a
   sinistra, conteggio a destra. La Scheda tecnica ne ha tre — titolo,
   marcatore di versione, conteggio — e il marcatore restava sospeso in mezzo,
   lontano da tutti e due. Attaccato al titolo: e' un'etichetta del riquadro,
   non un dato della scheda. (Visto a schermo il 26/08.) */
.pannello-corpo .riquadro > header .isi-versione{ margin-right:auto; }

/* Il viaggio a dieci tappe.
   Va A CAPO, non di lato: dentro un pannello stretto la striscia scorrevole
   lasciava la tappa in corso — l'unica d'oro, la sola che conta — fuori
   dallo schermo, e per vederla bisognava trascinare. Su due righe si vedono
   tutte e dieci senza toccare niente. */
.percorso{
  display:flex; flex-wrap:wrap; gap:3px; background:var(--bianco);
  border:1px solid var(--bordo); border-radius:var(--r-grande);
  padding:6px; margin-bottom:22px;
}
/* Cinque per riga, sempre: con una larghezza fissa il pannello largo faceva
   sette sopra e tre stiracchiate sotto. In quinti restano due righe pari a
   qualunque larghezza. I nomi lunghi vanno a capo invece di sbordare. */
.tappa{
  flex:1 1 calc(20% - 3px); min-width:76px; text-align:center;
  padding:9px 5px; border-radius:var(--r-medio);
  font-size:12.5px; color:var(--testo-tenue); position:relative;
  white-space:normal; line-height:1.3;
}
.tappa.fatta{ color:#3F6E42; background:var(--salvia); }
/* la tappa attuale: l'unica in oro */
.tappa.ora{ background:var(--oro); color:#3D2F06; font-weight:700; }
.tappa .num{
  display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  opacity:.75; margin-bottom:1px;
}

.banner-azione{
  background:var(--oro-chiaro); border:1px solid #E6D28E;
  border-radius:var(--r-grande); padding:15px 18px; margin-bottom:20px;
}
.banner-azione strong{ font-size:16px; color:#6B5210; }
.banner-azione .dettagli{ font-size:14.5px; color:#7A5E12; margin-top:3px; }

.blocco{ margin-bottom:22px; }
.dato{
  display:flex; gap:12px; padding:9px 20px; font-size:15.5px;
  border-bottom:1px solid #F5F2E9;
}
.dato:last-child{ border-bottom:0; }
.dato .k{ color:var(--testo-tenue); min-width:130px; flex-shrink:0; }
.dato .v{ flex:1; min-width:0; word-break:break-word; font-weight:600; }
.dato .v.normale{ font-weight:400; }
.dato .v.assente{ font-weight:400; color:#9A968A; }

/* le note: in ALTO nella scheda, non in fondo — nel vecchio CRM è già così */
.testo-note{
  padding:14px 20px; font-size:15.5px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
}
.testo-note.assente{ color:#9A968A; }

/* una persona collegata: co-proprietario o co-intestatario */
.persona{ padding:13px 20px; border-bottom:1px solid #F3F0E7; }
.persona:last-of-type{ border-bottom:0; }
.p-nome{ font-weight:600; font-size:16px; }
.p-quota{ font-weight:400; font-size:13.5px; color:var(--testo-tenue); margin-left:8px; }
.p-righe{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:5px; }
.p-righe span{ font-size:14px; color:var(--testo-tenue); white-space:nowrap; }
/* L'elenco di quello che manca può essere lungo: se non va a capo viene
   tagliato dal bordo, e proprio la parte che serve resta fuori. */
.p-righe span.elenco-manca{ white-space:normal; line-height:1.45; }
.p-righe span.assente{ color:#B4B0A4; }
.nota-persone{
  padding:12px 20px 14px; font-size:13.5px; color:var(--testo-tenue);
  background:#FBFAF5; border-top:1px solid #F0EDE3;
}

/* il prezzo e la sua storia */
.prezzo-grande{
  font-size:31px; font-weight:800; color:var(--verde);
  padding:14px 20px 2px; font-variant-numeric:tabular-nums;
}
.prezzo-grande .da{
  display:block; font-size:13px; font-weight:400; color:var(--testo-tenue);
  margin-top:2px;
}
.storia-prezzi{ padding:8px 20px 16px; }
.storia-prezzi .voce-prezzo{
  display:flex; justify-content:space-between; gap:12px;
  font-size:14.5px; padding:6px 0; border-bottom:1px dotted #E8E3D6;
}
.storia-prezzi .voce-prezzo:last-of-type{ border-bottom:0; }
.storia-prezzi .voce-prezzo .quando{ color:var(--testo-tenue); }
.storia-prezzi .voce-prezzo .quanto{ font-weight:600; font-variant-numeric:tabular-nums; }
.storia-prezzi .attuale .quanto{ color:var(--verde); }
.storia-prezzi .nota-storia{
  font-size:13.5px; color:var(--testo-tenue); margin-top:10px; font-style:italic;
}

.collegamento{
  color:var(--verde); font-weight:600; font-size:14px; text-decoration:none;
  border-bottom:1px solid #BFD4BC;
}
.collegamento:hover{ border-bottom-color:var(--verde); }

/* i portali su cui l'immobile è pubblicato */
.elenco-portali{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 20px 16px; }
.pill-portale{
  background:var(--salvia); border:1px solid #CFDECD; color:#265A29;
  border-radius:var(--r-pillola); padding:6px 13px; font-size:14px;
  text-decoration:none; white-space:nowrap;
}
.pill-portale:hover{ background:#DCE7DA; }
.pill-portale .quando{ color:#5B7A59; font-size:12.5px; margin-left:5px; }

/* chi manca all'appello delle firme */
.manca-firma{ color:var(--ambra); font-weight:600; }

/* una precisazione discreta accanto a un valore */
.nota-inline{
  font-size:12.5px; font-weight:400; color:var(--testo-tenue); margin-left:8px;
}


/* ═══ MODIFICARE — un riquadro alla volta ═════════════════════════════════
   Non si modifica campo per campo: si entra in modifica, si cambia, si
   salva. Un momento esplicito, un solo salvataggio, un solo posto dove
   dire che qualcosa è andato storto. */

.btn-modifica{
  background:none; border:1px solid var(--bordo); border-radius:var(--r-pillola);
  color:var(--verde); font:inherit; font-size:14px; font-weight:600;
  padding:6px 14px; cursor:pointer; white-space:nowrap;
}
.btn-modifica:hover{ background:var(--salvia); border-color:#CFDECD; }
.btn-modifica:focus-visible{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px var(--salvia);
}

/* Il modulo non rientra ai lati: la casella arriva ai bordi del riquadro.
   Con venti pixel per parte si scriveva in una colonna più stretta del
   pannello che la conteneva. */
.modulo{ padding:0 0 16px; }
.modulo > *:not(.note-mod){ margin-left:20px; margin-right:20px; }

/* Alta abbastanza da scriverci dentro: dieci righe senza toccare niente, e
   cresce da sé man mano che si scrive. Prima erano tre righe con la barra di
   scorrimento — si scriveva guardando dentro una feritoia. */
.note-mod{
  font:inherit; font-size:15px; width:100%; min-height:230px; resize:vertical;
  border:0; border-top:1px solid var(--bordo); border-bottom:1px solid var(--bordo);
  border-radius:0; padding:14px 20px;
  background:var(--bianco); color:var(--testo); line-height:1.55;
  overflow:hidden;   /* cresce invece di scorrere */
  display:block;
}
.note-mod:focus{ outline:2px solid var(--verde-tenue); outline-offset:-2px; }

.azioni-modulo{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;
}
/* Il messaggio di stato sta su una RIGA SUA: in fila coi bottoni finiva
   sopra ad «Annulla» appena il testo si allungava. */
.esito-salva{ display:block; width:100%; margin-top:2px; }
.btn-salva{
  background:var(--verde); color:#fff; border:0; border-radius:var(--r-pillola);
  font:inherit; font-size:15px; font-weight:600; padding:10px 22px; cursor:pointer;
}
.btn-salva:hover{ background:var(--verde-scuro); }
.btn-salva:disabled{ background:#9BB098; cursor:default; }
.btn-annulla{
  background:none; border:1px solid var(--bordo); border-radius:var(--r-pillola);
  color:var(--testo-tenue); font:inherit; font-size:15px; padding:10px 18px;
  cursor:pointer;
}
.btn-annulla:hover{ border-color:#C9C4B6; color:var(--testo); }
.esito-salva{ font-size:14px; color:var(--testo-tenue); }

/* i moduli a campi: due colonne dove ci stanno, una sul telefono */
.modulo-campi{ padding:16px 20px; }
.modulo-campi > *{ margin-left:0; margin-right:0; }

/* Di chi è il modulo. Aprendolo, la riga della persona sparisce: senza
   questo nome il modulo sembra appartenere alla riga di sopra. */
.modulo-chi{
  font-weight:600; font-size:16.5px; color:var(--verde-scuro);
  padding-bottom:12px; margin-bottom:14px;
  border-bottom:1px solid var(--bordo);
}
.campi{ display:grid; grid-template-columns:1fr 1fr; gap:13px 18px; }
.campo{ display:block; min-width:0; }
.campo-etichetta{
  display:block; font-size:12.5px; color:var(--testo-tenue); margin-bottom:4px;
}
.campo-testo{
  font:inherit; font-size:15px; width:100%;
  border:1px solid var(--bordo); border-radius:var(--r-medio);
  padding:9px 12px; background:var(--bianco); color:var(--testo);
}
.campo-testo:focus{ outline:2px solid var(--verde-tenue); outline-offset:-1px; }
select.campo-testo{ cursor:pointer; }
/* una precisazione sotto un campo, quando serve spiegare qualcosa */
.campo-nota{
  display:block; margin-top:5px; font-size:12.5px; color:var(--ambra);
  line-height:1.4;
}

/* ── Nuovo venditore ──────────────────────────────────────────────────────
   Il bottone sta in fondo alla riga del titolo, spinto a destra: è l'azione
   principale della pagina, e va cercata sempre nello stesso posto. */
.btn-nuovo{
  margin-left:auto; background:var(--verde); color:#fff; border:0;
  border-radius:var(--r-pillola); font:inherit; font-size:15px; font-weight:600;
  padding:10px 20px; cursor:pointer;
}
.btn-nuovo:hover{ background:var(--verde-scuro); }
.btn-nuovo:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }

/* Cosa serve per forza, detto una volta sola in cima invece che ripetuto
   sotto ogni campo. */
.legenda-nuovo{
  background:var(--salvia); border-radius:var(--r-medio);
  padding:12px 15px; margin-bottom:18px; font-size:14px; line-height:1.5;
  color:#2F4A31;
}
.obbl{ color:var(--ambra); font-weight:700; margin-left:3px; }

/* Una spiegazione tranquilla sotto un campo.
   NON è .campo-nota: quella è ambra, cioè il colore con cui questo CRM dice
   «attenzione». Su un modulo appena aperto tre note ambra sembrano tre
   problemi già successi, e si comincia a compilare in allarme. */
.campo-aiuto{
  display:block; margin-top:5px; font-size:12.5px; color:var(--testo-tenue);
  line-height:1.4;
}
/* Una nota che vale per DUE campi accanto: attraversa tutta la griglia,
   così non sembra appartenere solo a quello di destra. */
/* un campo che occupa tutta la larghezza: i link e gli indirizzi lunghi
   in mezza colonna si leggono a fatica */
.campo-largo{ grid-column:1 / -1; }
.campi-nota{
  grid-column:1 / -1; margin-top:-4px; font-size:12.5px;
  color:var(--testo-tenue); line-height:1.4;
}

/* I bottoni valgono per TUTTO il modulo, non per una sezione: stanno fuori
   dai riquadri, in fondo, dove finisce la lettura. */
.azioni-nuovo{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px;
}
.azioni-nuovo .esito-salva{ width:100%; }

/* Un campo che non si può cambiare: si vede che c'è ed è spento, invece di
   sparire e lasciare il dubbio su chi sarà l'agente. */
.campo-testo:disabled{
  background:var(--crema); color:var(--testo-tenue); cursor:not-allowed;
}

/* Un campo sbagliato: il rosso entra nei moduli solo per questo, e vuol dire
   «qui devi mettere le mani prima di andare avanti» — diverso dall'ambra, che
   avverte senza fermare. */
.campo-errore{
  display:block; margin-top:5px; font-size:12.5px; color:var(--rosso);
  line-height:1.4; font-weight:600;
}
.campo-testo.sbagliato{ border-color:var(--rosso); background:var(--rosso-sf); }
.campo-testo.sbagliato:focus{ outline-color:var(--rosso); }

/* Il nastro sopra la lista: parla quando il pannello si è già chiuso. */
#nastro:empty{ display:none; }
.nastro-buono{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--salvia); border:1px solid #CBDDC7; border-radius:var(--r-medio);
  padding:13px 15px; margin-bottom:16px; font-size:14.5px; color:#2F4A31;
}
.nastro-buono b{ color:var(--verde-scuro); }

/* Il nastro d'avviso: stessa forma, altro tono. Verde vuol dire «fatto»,
   e qui non è stato fatto niente — è successo qualcosa. */
.nastro-avviso{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--ambra-sf); border:1px solid #EEDCB9; border-radius:var(--r-medio);
  padding:13px 15px; margin-bottom:16px; font-size:14.5px; color:#5C3B0C;
}
.nastro-avviso b{ color:var(--ambra); }
.nastro-buono .btn-annulla{ margin-left:auto; background:var(--bianco); }

/* ── I doppioni (6a-4) ────────────────────────────────────────────────────
   Un candidato: nome, dati, dove sta, perché è saltato fuori. Il «certo» ha
   il filo d'oro a sinistra, il «forse» resta grigio — mostrarli uguali
   farebbe leggere un forse come una certezza. */
.forse{
  border-left:3px solid var(--bordo); padding:2px 0 2px 13px; margin-bottom:16px;
}
.forse:last-of-type{ margin-bottom:4px; }
.forse.certo{ border-left-color:var(--oro); }
.forse-testa{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.forse-nome{ font-weight:600; font-size:16px; color:var(--verde-scuro); }
.forse-dati{ font-size:14.5px; margin-top:3px; }
.forse-dove{ font-size:13.5px; color:var(--testo-tenue); margin-top:3px; }
.forse-perche{
  font-size:12.5px; color:#9A968A; margin-top:3px; font-style:italic;
}
.forse .btn-annulla{ margin-top:9px; }

/* L'avviso onesto sulla visibilità limitata: breve quando ha trovato,
   per esteso quando no. Non è un allarme — è una precisazione — quindi
   grigio, non ambra. */
.avviso-onesto{
  font-size:13.5px; line-height:1.5; color:var(--testo-tenue);
  border-top:1px solid var(--bordo); padding-top:11px; margin:14px 0 0;
}
.avviso-onesto.lungo{
  border:1px solid var(--bordo); border-top:1px solid var(--bordo);
  border-radius:var(--r-medio); background:var(--crema);
  padding:13px 15px; margin:0 0 20px;
}
.avviso-onesto b{ color:var(--testo); font-weight:600; }

/* la persona agganciata */
.riquadro.agganciata{ border-color:#CBDDC7; background:var(--salvia); }
.chi-agganciato{ font-weight:600; font-size:17px; color:var(--verde-scuro); }
.dettaglio-agganciato{ font-size:14px; color:#3B4A3A; margin-top:4px; line-height:1.5; }
.spiega-agganciato{ font-size:13.5px; color:#3B4A3A; margin:11px 0 0; line-height:1.5; }

/* la testa di un comproprietario: nome a sinistra, Modifica a destra */
.testa-persona{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.avviso-persona:empty{ display:none; }

@media (max-width:560px){
  .campi{ grid-template-columns:1fr; }
}

/* chi ha toccato per ultimo */
.riga-firma{
  padding:10px 20px 12px; font-size:12.5px; color:#9A968A;
  border-top:1px solid #F5F2E9;
}

/* il conflitto: qualcun altro ha salvato mentre modificavi */
.conflitto{
  background:var(--ambra-sf); border:1px solid #EEDCB9; border-radius:var(--r-medio);
  padding:13px 15px; margin-top:12px; font-size:14px; color:#5C3B0C; line-height:1.5;
}
/* Il titolo è un blocco a sé. I grassetti DENTRO il testo restano in riga:
   prima li rendeva blocchi la stessa regola, e la frase si spezzava. */
.conflitto .titolo{
  display:block; color:var(--ambra); font-weight:600; margin-bottom:4px;
}
.conflitto b{ font-weight:600; color:inherit; }
.conflitto .btn-modifica{ margin-top:12px; display:block; }
/* il dettaglio tecnico: c'è, ma non ruba la scena al messaggio in italiano */
.conflitto .tecnico{
  display:block; margin-top:10px; font-size:12px; color:#8A7355;
  word-break:break-word; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ⚠️ IL FRATELLO VERDE DEL CONFLITTO: stessa forma, colore opposto.
   «ISI generato» dentro un riquadro ambra si legge come un guasto — e chi
   crede di aver sbagliato rifà il lavoro che era gia' andato bene. */
.riuscito{
  background:var(--salvia); border:1px solid #CBDDC7; border-radius:var(--r-medio);
  padding:13px 15px; margin-top:12px; font-size:14px; color:#24501F; line-height:1.5;
}
.riuscito .titolo{
  display:block; color:var(--verde-scuro); font-weight:600; margin-bottom:4px;
}

/* mentre un riquadro si sta riempiendo, o se non ci è riuscito */
.in-attesa{ padding:16px 20px; color:#9A968A; font-size:14.5px; }
.in-guasto{
  padding:14px 20px; font-size:14px; color:#8A1520; background:var(--rosso-sf);
}
.in-guasto b{ display:block; color:var(--rosso); margin-bottom:3px; }

@media (max-width:640px){
  /* Sul telefono la scheda prende tutto lo schermo: un pannello stretto
     accanto a niente non serve a nessuno. */
  .pannello{ width:100%; border-left:0; }
  .pannello-corpo{ padding:16px 14px 40px; }
  .tappa{ min-width:84px; font-size:12px; }
}

/* la parte di pagina ancora da costruire */
.in-arrivo{
  background:var(--bianco); border:1px dashed var(--bordo);
  border-radius:var(--r-grande); padding:44px 24px; text-align:center;
  color:var(--testo-tenue);
}
.in-arrivo p{ margin:0 0 6px; }
.in-arrivo p:last-child{ margin:0; font-size:13.5px; color:#9A968A; }

.bottone-esci{
  margin-top:20px; padding:10px 20px;
  background:var(--bianco); color:var(--testo-tenue);
  border:1px solid var(--bordo); border-radius:var(--r-pillola);
  font-size:14px; font-family:inherit; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.bottone-esci:hover{ border-color:#C9C4B6; color:var(--testo); }
.bottone-esci:focus-visible{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 3px var(--salvia);
}

/* quando il ritorno da Google va storto */
.guaio{
  background:var(--rosso-sf); border:1px solid #F6CBD0;
  border-radius:var(--r-medio); padding:12px 14px; margin-top:16px;
  font-size:13px; color:#8A1520; text-align:left; line-height:1.45;
}
.guaio b{ display:block; margin-bottom:3px; color:var(--rosso); }
.guaio .tecnico{
  display:block; margin-top:6px; color:#9A6B70; font-size:12px;
  word-break:break-word;
}

/* Il segnale accanto al campo che ha fatto scattare la ricerca dei doppioni.
   AMBRA e non rosso: il rosso qui dentro vuol dire «devi metterci le mani
   prima di andare avanti», questo invece non blocca niente — dice soltanto
   «guarda». Cliccabile: la pagina si sposta solo se lo si chiede. */
.campo-segnale{
  display:block; margin-top:6px; padding:6px 10px;
  background:var(--ambra-sf); border:1px solid #EEDCB9; border-radius:var(--r-medio);
  color:var(--ambra); font-size:12.5px; font-weight:600; line-height:1.4;
  cursor:pointer;
}
.campo-segnale:hover{ background:#F7E8CE; }

/* ── Il riquadro Valutazione ──────────────────────────────────────────────
   Il ragionamento sotto i numeri, e le valutazioni precedenti in fila: la
   storia non si sovrascrive, e deve anche vedersi. */
.ragionamento{
  padding:12px 20px 4px; font-size:14.5px; line-height:1.55; color:var(--testo);
  white-space:pre-wrap;
}
.riga-pdf{ padding:8px 20px 14px; font-size:14px; }

.storico-val{ border-top:1px solid var(--bordo); margin-top:8px; padding:12px 20px 14px; }
.titolo-storico{
  display:block; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--testo-tenue); margin-bottom:9px;
}
.val-vecchia{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:6px 0; font-size:14px; border-top:1px solid #F5F2E9;
}
.val-vecchia:first-of-type{ border-top:none; }
.val-vecchia .quando{ color:var(--testo-tenue); min-width:82px; }
.val-vecchia .quanto{ font-weight:600; font-variant-numeric:tabular-nums; }

/* il modulo «Registra valutazione», stessa forma del Nuovo venditore */
.modulo-val .azioni-nuovo{ margin-top:4px; }

/* Un avviso che non si può non vedere: rosso pieno, in cima al modulo.
   NON è .conflitto (ambra, «guarda che»): questo dice «così non si salva».
   Serve per gli errori che riguardano più caselle insieme, dove la scritta
   sotto una sola casella passerebbe inosservata. */
.avviso-forte{
  background:var(--rosso-sf); border:1px solid #F6C6CC;
  border-left:4px solid var(--rosso); border-radius:var(--r-medio);
  padding:13px 15px; margin-bottom:16px; font-size:14.5px;
  color:#8A1520; line-height:1.5;
}
.avviso-forte .titolo{
  display:block; color:var(--rosso); font-weight:700; margin-bottom:3px;
}

/* ⚠️ Via le freccine su/giù dalle caselle numeriche.
   Su una cifra come 185.000 muovono di un centesimo per volta: non servono
   a niente, restringono la casella e si premono per sbaglio scorrendo la
   pagina col dito. Il numero si scrive, non si pigia. */
.campo-testo[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.campo-testo[type="number"]::-webkit-outer-spin-button,
.campo-testo[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; appearance:none; margin:0;
}

/* ── I gesti sulla valutazione (val-4) ────────────────────────────────────
   La striscia sotto i numeri della bozza. Sta DENTRO il riquadro, in fondo:
   sono cose che si fanno a quella valutazione lì, e un bottone in testata
   sembrerebbe riguardare il riquadro intero. */
.azioni-riquadro{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  padding:14px 20px 16px; border-top:1px solid var(--bordo); margin-top:6px;
}
.azioni-nota{
  flex:1 1 220px; min-width:200px; font-size:13px; line-height:1.45;
  color:var(--testo-tenue);
}

/* Rosso solo dove si distrugge qualcosa. Non e' un colore d'accento: e' un
   avvertimento, e se comparisse anche altrove smetterebbe di esserlo. */
.btn-pericolo{ color:var(--rosso); border-color:#F0C8CD; }
.btn-pericolo:hover{ background:var(--rosso-sf); border-color:var(--rosso); color:var(--rosso); }
.btn-salva.btn-pericolo{ background:var(--rosso); color:#fff; border:0; }
.btn-salva.btn-pericolo:hover{ background:#B31424; }

.azioni-conferma{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:13px; }

/* Un bottone che non deve rubare la scena al link accanto a cui sta. */
.btn-minuto{
  background:none; border:0; padding:0 0 0 12px; font:inherit; font-size:13px;
  color:var(--testo-tenue); text-decoration:underline; cursor:pointer;
}
.btn-minuto:hover{ color:var(--verde); }

/* dentro un riquadro l'avviso forte respira come il resto */
.riquadro .avviso-forte{ margin:0 20px 16px; }
.modulo-val > .avviso-forte{ margin-bottom:18px; }

/* ── Il modulo Nuovo incarico (6b-2) ──────────────────────────────────────
   Una riga per proprietario: si firma o no, e con che quota. La quota sta
   accanto al nome e non in un riquadro a parte — sono la stessa domanda. */
.elenco-firmatari{ display:flex; flex-direction:column; gap:9px; }
.riga-firmatario{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 12px; border:1px solid var(--bordo); border-radius:var(--r-medio);
  background:var(--bianco);
}
.riga-firmatario .spunta{
  display:flex; align-items:center; gap:8px; flex:1 1 220px;
  font-size:14.5px; cursor:pointer;
}
.riga-firmatario .spunta input{ width:17px; height:17px; accent-color:var(--verde); }
.riga-firmatario .quota{ width:150px; flex:0 0 auto; font-size:14px; padding:6px 10px; }

/* una casella spenta deve SEMBRARE spenta: il residuo del mutuo senza mutuo */
.campo-testo:disabled{
  background:#F5F3EC; color:#9A968A; cursor:not-allowed;
}

.modulo-inc .campi-nota{ font-size:14px; }
.modulo-inc .conflitto{ margin-bottom:16px; }

/* ── La griglia delle firme (6b-4) ────────────────────────────────────────
   Una riga per proprietario, una colonna per documento. Si legge per righe
   («chi devo sollecitare?») e per colonne («quale foglio è indietro per
   tutti?»): un elenco risponderebbe solo alla prima. */
.griglia-firme{ padding:14px 20px 4px; display:flex; flex-direction:column; gap:8px; }

.griglia-firme .riga-testa,
.griglia-firme .riga-firme{
  /* l'ultima colonna ha un minimo suo: senza, il bottone «Ha firmato tutto»
     veniva schiacciato fuori dal bordo del riquadro */
  display:grid;
  grid-template-columns:minmax(130px,1.1fr) repeat(4, minmax(84px,1fr)) minmax(132px,auto);
  gap:8px; align-items:center;
}
.griglia-firme .riga-testa .doc{
  font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--testo-tenue); text-align:center;
}
.griglia-firme .riga-firme .chi{ font-size:14.5px; }

.cella-firma{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 6px; border:1px solid var(--bordo); border-radius:var(--r-medio);
  background:var(--bianco); font:inherit; cursor:pointer; width:100%;
}
.cella-firma:hover{ border-color:var(--verde); }
.cella-firma:disabled{ opacity:.45; cursor:default; }
.cella-firma .segno{ font-size:15px; line-height:1; }
.cella-firma .quando{ font-size:11.5px; color:var(--testo-tenue); }

/* Il verde solo su «firmata»: è l'unico stato che vuol dire «fatto». */
.cella-firma.st-firmata{ background:var(--salvia); border-color:#CBDDC7; }
.cella-firma.st-firmata .segno{ color:var(--verde); }
.cella-firma.st-inviata{ background:var(--ambra-sf); border-color:#EEDCB9; }
.cella-firma.st-inviata .segno{ color:var(--ambra); }
.cella-firma.st-annullata .segno{ color:var(--rosso); }
.cella-firma.st-annullata .quando{ text-decoration:line-through; }

.griglia-firme .tutto-fatto{
  font-size:12.5px; color:var(--verde); font-weight:600; white-space:nowrap;
}

/* la striscia che si apre sotto la griglia, invece di un menu che galleggia */
.modifica-cella{
  margin:12px 20px 16px; padding:13px 15px; background:var(--sfondo);
  border:1px solid var(--bordo); border-radius:var(--r-medio);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.modifica-cella .titolo{ font-weight:600; font-size:14px; width:100%; }
.modifica-cella .stati{ display:flex; gap:7px; flex-wrap:wrap; }
.modifica-cella .stati .scelto{
  border-color:var(--verde); color:var(--verde); background:var(--salvia);
}
.campo-data-firma{ min-width:210px; }

/* Sul telefono quattro colonne non ci stanno: una scheda per persona, coi
   suoi quattro fogli in verticale. Stesso contenuto, stessi gesti. */
@media (max-width:640px){
  .griglia-firme .riga-testa{ display:none; }
  .griglia-firme .riga-firme{
    display:flex; flex-direction:column; align-items:stretch; gap:6px;
    border:1px solid var(--bordo); border-radius:var(--r-medio); padding:11px;
  }
  .cella-firma{ flex-direction:row; justify-content:space-between; }
  .cella-firma .quando{ font-size:12.5px; }
}

/* ── Il questionario antiriciclaggio, a sezioni (aml-3) ───────────────────
   Si compila col foglio di carta davanti, dall'alto in basso: le tre sezioni
   hanno lo stesso ordine e lo stesso nome del modulo. */
.sezione-aml{ margin-bottom:6px; }
.sezione-aml .titolo-sezione{
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--verde); padding:14px 0 8px;
  border-top:1px solid var(--bordo); margin-top:10px;
}
.sezione-aml:first-of-type .titolo-sezione{ border-top:none; margin-top:0; padding-top:4px; }

/* La pillola grigia del questionario sta accanto a quella della firma: due
   misure diverse, una accanto all'altra, e si leggono insieme. */
.testa-persona .p-nome .pillola + .pillola{ margin-left:5px; }

/* ── Il questionario dell'operazione, sezione D (aml-4) ───────────────────
   I mezzi sono spunte perché nella stessa vendita arrivano insieme: un
   elenco di caselle, non una tendina. */
.spunte-mezzi{
  display:flex; flex-wrap:wrap; gap:8px 16px; padding:6px 0 2px;
}
.spunte-mezzi .spunta{
  display:flex; align-items:center; gap:7px; font-size:14px; cursor:pointer;
}
.spunte-mezzi .spunta input{ width:16px; height:16px; accent-color:var(--verde); }

/* i mezzi scelti, nel riquadro chiuso */
.pill-mezzo{
  display:inline-block; background:var(--salvia); color:#2F4A31;
  border-radius:var(--r-pillola); padding:3px 10px; font-size:13px;
  margin:0 6px 4px 0;
}
.modulo-d .campo-nota{ margin-top:4px; }

/* ═══ LA SCHEDA TECNICA ISI ═══════════════════════════════════════════════
   Tre gruppi — quello che vedi, quello che ti dicono, quello che arriva coi
   documenti — e dentro ognuno le sezioni a fisarmonica. Tutte chiuse
   all'apertura: chi compila al sopralluogo apre le sue tre e lascia stare il
   resto. */
/* ⚠️ IL CORPO DELLA SCHEDA ERA ATTACCATO AL BORDO. Nel riquadro convivevano
   tre margini diversi: 20 per l'intestazione, 14 per i bottoni della stampa,
   ZERO per le sezioni — che quindi partivano più a sinistra di tutto il
   resto. Adesso 14 come il cassetto dei documenti (`.doc-elenco`), così i due
   riquadri dello stesso pannello si incolonnano. (Visto il 26/08.) */
#isi-corpo{ padding:2px 14px 12px; }

.isi-gruppo{ margin-bottom:18px; }
/* ⚠️ SOBRIE (pan-5, 27/08/2026). Erano verdi, maiuscole e spaziate come
   titoli di giornale: con tre gruppi per scheda, più i catastali e l'atto,
   diventavano rumore. Il giudizio di Lucia sulla scheda Terreno era
   «confusa, non bella da vedere», e questa era la prima ragione.
   La riga sopra resta a dividere i gruppi: separa senza gridare. */
.isi-gruppo > .titolo-sezione{
  font-size:14.5px; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--testo); padding:16px 0 0;
  border-top:1px solid var(--bordo); margin-top:12px;
}
/* La spiegazione del gruppo: sotto il titolo, piccola, e non gli ruba la scena. */
.isi-gruppo-nota{
  font-size:12.5px; color:var(--testo-tenue); padding:2px 0 8px; line-height:1.45;
}

/* Cosa manca: grigio e corto. Non è un'urgenza — è una cosa da fare. */
.isi-manca{
  font-size:12.5px; color:var(--testo-tenue); padding:0 0 8px; line-height:1.5;
}
.isi-manca-altre{ opacity:.7; }

/* Il conteggio di una sezione: c'è solo quando dice qualcosa, e sta indietro. */
.isi-conta-sez{
  font-size:12px; font-weight:400; color:var(--testo-tenue); margin-left:8px;
  font-variant-numeric:tabular-nums;
}

/* La riga corta al posto di un paragrafo: una frase, non una spiegazione.
   Il perché sta nella guida — un pannello si usa, non si legge. */
.isi-nota-corta{
  font-size:12.5px; color:var(--testo-tenue); line-height:1.5;
  flex:1 1 100%; margin-top:2px;
}
.isi-gruppo:first-of-type > .titolo-sezione{ border-top:none; margin-top:0; padding-top:4px; }

.sezione-isi{ border:1px solid var(--bordo); border-radius:8px; margin:6px 0; }

/* La testa è un bottone vero, non un div che sembra cliccabile: si raggiunge
   col tabulatore e si apre con Invio, come tutto il resto del CRM. */
/* ⚠️ LA GERARCHIA, in tre gradini: il gruppo (14,5 semigrassetto), la sezione
   (14 normale), il campo (13,5 tenue). Prima erano quasi tutti uguali di
   peso, e una pagina dove tutto pesa uguale non si legge: si guarda. */
.isi-testa{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:none; border:none; font:inherit; color:var(--testo);
  padding:9px 12px; font-weight:500; font-size:14px;
}
.isi-testa:hover{ background:var(--sfondo-tenue); border-radius:8px; }
.isi-testa:focus-visible{ outline:2px solid var(--verde); outline-offset:-2px; }
.sezione-isi .campi{ padding:0 12px 12px; }


/* L'avviso ambra dentro un riquadro: si usa quando qualcosa ANDRA' storto,
   non quando c'e' semplicemente da finire un lavoro. In questo CRM l'ambra
   e' una risorsa che si consuma: se compare spesso smette di essere letta. */
.avviso-ambra{
  background:var(--ambra-sf); border:1px solid #EEDCB9;
  border-radius:6px; padding:10px 12px; margin:8px 0;
  font-size:13px; line-height:1.5;
}
.avviso-ambra b{ color:var(--ambra); }

/* ═══ I DOCUMENTI ═════════════════════════════════════════════════════════
   Disegno deciso da Lucia il 19/08/2026, dopo due giri di collaudo.
   Una riga per slot, larghezza piena, e le righe devono RESPIRARE.

   ⚠️ NON si usa `.campi`: quella e' la griglia a due colonne dei campi ISI, e
   qui il pannello laterale e' stretto. In mezza colonna «manca» andava a capo
   lettera per lettera e i bottoni uscivano dal bordo. */
.doc-elenco{ padding:2px 14px 12px; }

.doc-slot{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  padding:11px 0; border-top:1px solid var(--crema);
  font-size:14.5px;
}
.doc-slot:first-child{ border-top:0; }

/* Il numero dello slot: un quadratino di salvia col verde bosco dentro.
   ⚠️ `tabular-nums` perche' i numeri incolonnino: 04 e 18 devono essere
   larghi uguali, o le righe si spostano l'una rispetto all'altra. */
.doc-numero{
  flex:0 0 auto; background:var(--salvia); color:var(--verde);
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
  padding:3px 7px; border-radius:6px; line-height:1.2;
}

/* ⚠️ `min-width:0` e `overflow-wrap:break-word` insieme: senza il primo il
   nome non si stringe mai e spinge fuori il bottone; col secondo va a capo
   PER PAROLE, e spezza una parola solo se da sola non ci sta. */
.doc-nome{
  flex:1 1 auto; min-width:0; overflow-wrap:break-word; word-break:normal;
}

/* Stato e bottone a destra finche' c'e' posto; sotto quando non ce n'e' piu'.
   Il `gap` del contenitore li tiene staccati dal nome: mai incollati. */
.doc-destra{
  margin-left:auto; flex:0 0 auto;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}

/* Il bottone: piccolo, bordo verde bosco, solo la parola. */
.doc-aggiungi{
  background:none; border:1px solid var(--verde); border-radius:var(--r-pillola);
  color:var(--verde); font:inherit; font-size:13px; font-weight:600;
  padding:4px 12px; cursor:pointer; white-space:nowrap;
}
.doc-aggiungi:hover{ background:var(--salvia); }
.doc-aggiungi:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--salvia);
}

/* I file dello slot: sotto il nome, a tutta larghezza, in piccolo. */
.doc-files{ flex:1 1 100%; min-width:0; margin:2px 0 0 34px; }
.doc-file{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  padding:4px 0; font-size:13.5px;
}
.doc-file + .doc-file{ border-top:1px solid var(--crema); }
.doc-file-nome{
  flex:1 1 auto; min-width:0; overflow-wrap:break-word; color:var(--testo);
}
.doc-file-azioni{
  margin-left:auto; flex:0 0 auto; display:flex; flex-wrap:wrap; gap:6px;
}
.doc-file-azioni button{ white-space:nowrap; font-size:13px; padding:3px 10px; }

/* Il marcatore di versione accanto al titolo: piccolo e tenue, serve a chi
   prova, non a chi lavora. */
.doc-versione{
  background:var(--salvia); color:var(--verde); font-size:11.5px;
  font-weight:700; padding:2px 7px; border-radius:var(--r-pillola);
}

/* ═══ IL COLPO D'OCCHIO ═══════════════════════════════════════════════════
   In cima al pannello, sempre visibile. Deve rispondere a una domanda sola —
   «cosa devo fare adesso?» — e per farlo dev'essere corto: se cresce, smette
   di essere un colpo d'occhio e diventa un altro riquadro da leggere. */
.colpo{ padding:12px 20px 4px; }

/* I recapiti: cliccabili, e si vede che lo sono. */
.colpo-recapiti{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:8px; }
.recapito{
  font-size:14.5px; color:var(--verde); text-decoration:none; font-weight:600;
  white-space:nowrap;
}
.recapito:hover{ text-decoration:underline; }
.recapito.assente{ color:var(--testo-tenue); font-weight:400; font-style:italic; }

/* Le note, corte. */
.colpo-note{ font-size:14px; color:var(--testo-tenue); line-height:1.5; margin-bottom:8px; }
.colpo-note.aperta{ white-space:pre-wrap; }
/* ⚠️ Staccato dal testo: senza, «…Pref…tutta la nota» si legge come una
   parola sola e il bottone sembra parte della frase. */
.colpo-note .colpo-piu{ margin-left:8px; }

/* La riga dell'urgenza. Tre colori e tre significati, mai mescolati:
   ROSSO = qualcosa è rotto · AMBRA = c'è da fare · VERDE = si può andare. */
.colpo-riga{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  border-radius:var(--r-medio); padding:10px 14px; font-size:14.5px; line-height:1.45;
}
.colpo-riga.ambra { background:var(--ambra-sf); border:1px solid #EEDCB9; color:#5C3B0C; }
.colpo-riga.guasta{ background:var(--rosso-sf); border:1px solid #F6CBD0; color:#8A1F2B; }
.colpo-riga.pronta{ background:var(--salvia);   border:1px solid #CBDDC7; color:#24501F; }

/* La voce è un bottone vero: cliccandola si apre la stanza che la riguarda. */
.colpo-voce{
  background:none; border:none; padding:0; margin:0; font:inherit; color:inherit;
  text-align:left; cursor:pointer; text-decoration:underline;
  text-decoration-color:rgba(0,0,0,.25); text-underline-offset:3px;
  flex:1 1 auto; min-width:0; overflow-wrap:break-word;
}
.colpo-voce:hover{ text-decoration-color:currentColor; }
.colpo-voce:focus-visible{ outline:2px solid var(--verde); outline-offset:2px; border-radius:4px; }

.colpo-piu{
  flex:0 0 auto; background:none; border:none; cursor:pointer; font:inherit;
  font-size:13px; font-weight:600; color:inherit; opacity:.75;
  text-decoration:underline; text-underline-offset:3px; padding:0;
}
.colpo-piu:hover{ opacity:1; }

/* Le altre urgenze, quando si aprono: una sotto l'altra, rientrate. */
.colpo-elenco{
  display:flex; flex-direction:column; gap:8px;
  padding:10px 14px 2px 26px; font-size:14px; color:var(--testo-tenue);
}

/* ═══ LE CINQUE STANZE DEL PANNELLO ═══════════════════════════════════════
   Deciso da Lucia il 27/08/2026, dopo essersi persa due volte nel pannello
   vecchio: cinque nomi grandi, e sotto ognuno quello che ci si aspetta.
   La testata è un bottone vero — tabulatore e Invio — come le sezioni ISI. */
.stanza{ border-top:1px solid var(--bordo); }
.stanza:first-of-type{ border-top:none; }

.stanza-testa{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; cursor:pointer; text-align:left;
  font:inherit; font-size:16.5px; font-weight:600; color:var(--verde-scuro);
  padding:16px 20px;
}
.stanza-testa:hover{ background:var(--sfondo-tenue); }
.stanza-testa:focus-visible{ outline:2px solid var(--verde); outline-offset:-2px; }
.stanza-segno{ color:var(--verde-tenue); font-size:13px; }

/* Il fondo appena diverso dice «sei dentro una stanza» senza scrivere niente. */
.stanza-corpo{ padding:0 0 10px; background:var(--sfondo-tenue); }

/* Le versioni precedenti: chiuse, e quando si aprono restano indietro di un
   passo — sono la storia, non il documento. */
.doc-storia{ flex:1 1 100%; min-width:0; margin:2px 0 0 12px; }
.doc-storia-testa{
  background:none; border:none; padding:3px 0; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--testo-tenue);
}
.doc-storia-testa:hover{ color:var(--verde); }
.doc-storia-testa:focus-visible{ outline:2px solid var(--verde); outline-offset:2px; }
.doc-file-vecchio{ color:var(--testo-tenue); font-size:13px; }
.doc-file-vecchio .doc-file-nome{ color:var(--testo-tenue); }

.doc-esito, .doc-avviso{ flex:1 1 100%; min-width:0; }
.doc-esito:empty, .doc-avviso:empty{ display:none; }

/* I due bottoni della stampa dell'ISI, sotto l'intestazione del riquadro. */
.isi-stampa{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 14px 4px;
}
.isi-stampa .campo-nota{ flex:1 1 100%; margin-top:2px; }
.isi-stampa > span[id]{ flex:1 1 100%; }

/* ── Il gemello (val-4) ───────────────────────────────────────────────────
   L'immobile più simile oggi in vendita, e il gesto di guardarlo prima che
   il documento lo usi. Sta sotto i numeri della valutazione e sopra lo
   storico: è il lavoro di oggi, non la memoria.

   ⚠️ NIENTE COLORI NUOVI. Il verde della pillola dice «qualcuno l'ha
      guardato»: se comparisse anche altrove smetterebbe di dirlo. */
.gem-blocco{ margin-top:14px; }

.gem-di{
  padding:12px 20px 0; font-size:13px; line-height:1.45; color:var(--testo-tenue);
}

.gem-perche{
  padding:10px 20px 4px; font-size:14.5px; line-height:1.55; color:var(--testo);
  white-space:pre-wrap;
}

.gem-assente{ padding:14px 20px 6px; }
.gem-assente .titolo{
  display:block; font-size:15px; font-weight:600; color:var(--testo); margin-bottom:6px;
}
.gem-assente .perche{
  font-size:14.5px; line-height:1.55; color:var(--testo); white-space:pre-wrap;
}
.gem-assente .vicino{ margin-top:9px; font-size:13.5px; color:var(--testo-tenue); }

/* Cosa manca per impaginare: le parole vengono dal database, e stanno in
   fondo perché sono una conseguenza, non un'azione. */
.gem-manca{
  border-top:1px solid var(--bordo); padding:12px 20px 14px; font-size:13.5px;
  line-height:1.5; color:var(--testo-tenue);
}
.gem-manca .titolo{
  display:block; font-weight:600; color:var(--testo); margin-bottom:5px;
}
.gem-manca ul{ margin:0; padding-left:19px; }
.gem-manca li{ margin:2px 0; }

/* Gli scartati stanno chiusi: sono memoria, non lavoro da fare. */
.gem-scartati{
  border-top:1px solid var(--bordo); padding:10px 20px 12px; font-size:13.5px;
}
.gem-scartati summary{
  cursor:pointer; color:var(--testo-tenue); font-size:13px;
  padding:2px 0; list-style:none;
}
.gem-scartati summary::-webkit-details-marker{ display:none; }
.gem-scartati summary::before{ content:'▸ '; }
.gem-scartati[open] summary::before{ content:'▾ '; }
.gem-scartato{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:7px 0; border-top:1px solid #F5F2E9;
}
.gem-scartato .perche{ color:var(--testo-tenue); }
.gem-scartato .quando{ color:var(--testo-tenue); font-size:12.5px; }

/* La riga che spiega perché l'ok è caduto dopo un salvataggio riuscito.
   ⚠️ AMBRA, NON ROSSA: il salvataggio è andato bene: rossa sembrerebbe un
      guasto e farebbe rifare il gesto appena fatto. */
.gem-azzerato{
  margin:0 20px 4px; padding:11px 13px; border-radius:var(--r-medio);
  background:var(--ambra-sf); border:1px solid #EEDCB9;
  font-size:13.5px; line-height:1.5; color:var(--ambra);
}

/* ⚠️ DAL TELEFONO. Gli agenti lavorano da telefono e tablet, mai da Mac: i
      bottoni in colonna e a tutta larghezza (un bottone stretto accanto a un
      altro si sbaglia col pollice), il link che va a capo invece di sfondare
      la riga, e lo scartato uno sotto l'altro. */
@media (max-width:640px){
  .gem-blocco .azioni-riquadro{ flex-direction:column; align-items:stretch; }
  .gem-blocco .azioni-riquadro button{ width:100%; }
  .gem-blocco .azioni-nota{ min-width:0; margin-top:2px; }
  .gem-blocco .dato .v a,
  .gem-assente .vicino a,
  .gem-scartato a{ overflow-wrap:anywhere; word-break:break-word; }
  .gem-scartato{ flex-direction:column; gap:3px; }
  .gem-azzerato{ margin:0 14px 4px; }
}