/* Il pannello del CRM. Prima il telefono, poi il PC.

   ATTENZIONE
     I COLORI E LE MISURE NON STANNO QUI. Stanno in base.css, che si carica prima:
     questo foglio ne usa i nomi e non ne inventa di suoi. Aveva un :root tutto suo
     che ridefiniva --bordo, --raggio, --ombra e --attesa, e proprio --attesa era
     scivolato da #8a6413 (4,78:1) a #8a6d1f (4,37:1) senza che nessuno l'avesse
     deciso: due posti con lo stesso nome divergono, e nessuno se ne accorge.
     UN NOME DI CLASSE SI CERCA PRIMA DI RIUSARLO. E' gia' successo due volte:
     .riquadro (il riquadro d'accesso, largo 380px) e .scheda (la carta di base.css,
     riusata come linguetta della barra). La terza era .avviso, che qui era il
     messaggio volante e in base.css il riquadro d'avviso: il messaggio volante ora si
     chiama .brindisi, e sta in base.css con gli altri componenti.
*/

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--fondo);
  color: var(--testo);
  padding-bottom: env(safe-area-inset-bottom);
}

header {
  position: sticky; top: 0; z-index: 5;
  background: var(--marchio);
  padding-top: env(safe-area-inset-top);
}
nav { display: flex; max-width: 900px; margin: 0 auto; }
/* La linguetta della barra. Si chiamava .scheda, come la carta di base.css: la carta
   di Studio prendeva colore bianco e opacita' della linguetta, bianco su bianco.
   Il colore del testo e' un token: nel tema scuro il marchio diventa chiaro, e un
   bianco scritto a mano ci restava sopra a 1,95:1. */
.linguetta {
  flex: 1; border: 0; background: none; color: var(--su-marchio); opacity: .7; /* .65 dava 4,29:1 al buio, sotto il minimo di 4,5: misurato in prova_stile */
  padding: 14px 8px; font-size: 15px; font-weight: 600; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.linguetta.attiva { opacity: 1; border-bottom-color: var(--su-marchio); }

main { max-width: 900px; margin: 0 auto; padding: 12px 12px 40px; }
.nascosto { display: none !important; }

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 20px 0 8px; }
h3 { font-size: 15px; margin: 0 0 2px; }
.smorto { color: var(--testo-2); font-size: 14px; margin: 2px 0; }
.errore { color: var(--ritardo); font-size: 14px; min-height: 18px; margin: 4px 0; }
.vuoto { color: var(--testo-2); padding: 24px 4px; text-align: center; }

/* ---------------------------------------------------------------- schede */

.carta {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 12px; margin-bottom: 10px; box-shadow: var(--ombra);
}
.carta.cliccabile { cursor: pointer; }
.carta.cliccabile:active { transform: scale(.995); }
.carta .capo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }

/* LA RIGA DI UN ELENCO: cliente, lead, pratica, intervista. E' una carta come quella
   delle agenzie, che era l'unico elenco disegnato: quattro elenchi che si somigliano
   si imparano una volta sola, quattro che non si somigliano sembrano quattro programmi.
   Prima .riga era usata 35 volte nel JavaScript e non aveva UNA regola: gli elenchi
   piu' aperti del pannello erano <article> nudi, senza carta, senza bordo, senza
   spaziatura, e la targhetta di stato finiva SOTTO il nome perche' mancava il flex.
   E' questo che faceva dire «l'interfaccia e' brutta». */
.riga {
  display: block;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: var(--s3); margin-bottom: var(--s2);
  box-shadow: var(--ombra);
}
.riga:last-child { margin-bottom: 0; }

/* L'intestazione della riga: il nome a sinistra, la targhetta di stato a DESTRA.
   Stava dentro .obiettivo, dove era nata, e fuori di li' non esisteva. */
.riga-testa { display: flex; justify-content: space-between; align-items: flex-start;
              gap: var(--s2); }
.riga-testa h3 { margin: 0; font-size: var(--t-corpo); }
.riga-testa > .targhetta, .riga-testa > .pallino { flex: none; margin-top: 1px; }

/* La riga sotto il nome: chi e', quanto, dove. E' la riga che si legge di sfuggita
   scorrendo, per cui e' piu' piccola e piu' smorta del nome, non uguale. */
.sottotitolo { margin: var(--s1) 0 0; font-size: var(--t-nota); color: var(--testo-2);
               line-height: 1.45; }

/* Dentro una voce di elenco i tasti stanno stretti anche sul telefono: allargati a
   tutta la riga facevano sembrare ogni cliente una schermata a se'. */
.riga .azioni, .carta .azioni { margin-top: var(--s2); }
.riga .azioni .tasto, .riga .azioni button,
.carta .azioni .tasto, .carta .azioni button { flex: 0 1 auto; min-width: 0; }
.riga .avvisi { margin-top: var(--s2); }

.pallino {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 20px;
  background: var(--marchio-velo); color: var(--marchio); white-space: nowrap;
  font-weight: 600;
}
/* I fondi sono i veli di base.css: cambiano col tema da soli. Prima erano sei colori
   scritti a mano — tre chiari e tre scuri — che con i veli non tornavano. */
.pallino.allarme { background: var(--ritardo-velo); color: var(--ritardo); }
.pallino.buono   { background: var(--fatto-velo);   color: var(--fatto); }
.pallino.attesa  { background: var(--attesa-velo);  color: var(--attesa); }

/* ---------------------------------------------------------------- tasti */

/* OGNI BERSAGLIO E' ALTO 44px: e' la misura di un polpastrello, ed e' la regola
   scritta in CLAUDE.md. Erano 34, perche' ottanta bottoni su cento portano .piccolo
   e .piccolo toccava soltanto il riempimento. inline-flex e non inline-block: con
   inline-block min-height allarga la scatola e lascia il testo attaccato in alto. */
button, .tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tocco); padding: 0 var(--s4);
  font: inherit; border-radius: var(--raggio-2); border: 1px solid var(--bordo-forte);
  background: var(--superficie); color: var(--testo);
  cursor: pointer; text-decoration: none; text-align: center;
}
button:active, .tasto:active { opacity: .8; }
button:focus-visible, .tasto:focus-visible { outline: 2px solid var(--marchio);
                                             outline-offset: 2px; }
.principale { background: var(--marchio); color: var(--su-marchio);
              border-color: var(--marchio); font-weight: 600; }
.secondario { background: transparent; }
/* .piccolo restringe e alleggerisce, NON abbassa: la misura minima resta 44. */
.piccolo { padding: 0 var(--s3); font-size: var(--t-nota); }
/* I tasti si allargano solo dove serve. Sul telefono un tasto largo quanto lo schermo
   e' un bersaglio comodo; sul PC e' un cartello, e ".ics" centrato in 180px e' il
   genere di dettaglio che fa sembrare un programma non finito. */
.azioni { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.azioni .tasto, .azioni button { flex: 0 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .azioni .tasto, .azioni button { flex: 1 1 auto; min-width: 96px; }
}

/* ---------------------------------------------------------------- filtri */

.filtri { margin-bottom: var(--s3); }
/* Il resto (misura, riempimento, bordo, raggio) lo dice base.css: i campi e i tasti
   devono avere lo stesso raggio, o accanto sembrano di due programmi diversi. Qui
   resta solo `font: inherit`, cioe' i 16px del corpo: sotto i 16px iOS ingrandisce la
   pagina appena si tocca un campo, e non la rimpicciolisce piu'. */
input, select, textarea { font: inherit; }
textarea { min-height: 70px; resize: vertical; }
/* I FILTRI VANNO A CAPO. Senza flex-wrap la mappa con i filtri avanzati metteva sei
   controlli in 351px — 52px l'uno — e di "tutte le province" si leggeva "tu". Sotto
   i 150px una tendina non si legge: meglio due righe che sei parole tagliate. */
.riga-filtri { display: flex; gap: var(--s2); margin-top: var(--s2);
               align-items: center; flex-wrap: wrap; }
/* Della loro misura, non stirate: `width: 100%` piu` `flex: 1` faceva diventare
   "tutti gli stati" una tendina larga mezza pagina quando era l'unica della riga. */
.riga-filtri select, .riga-filtri input { flex: 0 1 auto; width: auto; min-width: 150px; }
.conteggio { flex: 1 1 auto; color: var(--testo-2); font-size: var(--t-nota); }

/* ---------------------------------------------------------------- moduli */

dialog {
  border: 0; border-radius: var(--raggio); padding: 0; width: min(560px, 94vw);
  background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-alta);
}
dialog::backdrop { background: var(--velo-modale); }
dialog form { padding: 16px; }
dialog h2 { margin-top: 0; }
dialog menu { display: flex; gap: 8px; padding: 0; margin: 14px 0 0; }
dialog menu button { flex: 1; }
.campo { margin-bottom: 10px; }
.campo label { display: block; font-size: 13px; color: var(--testo-2); margin-bottom: 3px; }
.velo {
  position: fixed; inset: 0; z-index: 20; background: var(--fondo);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.riquadro {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 20px; width: min(380px, 100%); box-shadow: var(--ombra);
}
.riquadro input, .riquadro button { margin-top: 10px; }

/* ---------------------------------------------------------------- scheda agenzia */

.intestazione-scheda { margin-bottom: 4px; }
.dettaglio { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bordo); font-size: 15px; }
.dettaglio .etichetta { color: var(--testo-2); min-width: 92px; font-size: 14px; }
.dettaglio .valore { flex: 1; word-break: break-word; }
.riga-storia { padding: 10px 0; border-bottom: 1px solid var(--bordo); }
.riga-storia:last-child { border-bottom: 0; }
.riga-storia .quando { color: var(--testo-2); font-size: 13px; }
.fonte { font-size: 11px; color: var(--testo-2); }

@media (min-width: 700px) {
  .elenco-due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .elenco-due .carta { margin-bottom: 0; }
}

/* ---------------------------------------------------------------- mappa */

.cornice-mappa { position: relative; margin: 10px 0; }
#tela-mappa {
  position: relative; overflow: hidden; height: 62vh; min-height: 320px;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--superficie); cursor: grab; touch-action: none;
}
#tela-mappa:active { cursor: grabbing; }
.tassello { position: absolute; width: 256px; height: 256px; user-select: none; pointer-events: none; }

.segno {
  position: absolute; width: 16px; height: 16px; padding: 0;
  margin: -8px 0 0 -8px; border: 2px solid var(--contorno-segno); cursor: pointer;
  box-shadow: var(--ombra-segno);
  /* min-height: 0 NON E' UNA RIFINITURA, E' LA CORREZIONE DI UN DIFETTO.
     Il segno e' un <button>, e la regola generale "button, .tasto { min-height: 44px }"
     vince sempre su height: ogni agenzia sulla mappa usciva larga 16px e ALTA 44,
     schiacciata in verticale, su telefono come su PC. La legenda usa <i> invece di
     <button> e restava tonda: mappa e legenda non si somigliavano, ed e' proprio la
     legenda che dovrebbe spiegare la mappa.
     La regola dei 44px resta giusta: e' il bersaglio che si allarga sotto, non il
     pallino che si deforma. */
  min-height: 0; min-width: 0;
  display: block; line-height: 0;
}

/* Il bersaglio da dito, invisibile, attorno al pallino: 44px veri senza deformare i
   16px che si vedono. E' il modo di rispettare la regola del polpastrello su una
   mappa dove i segni devono restare piccoli per non coprirsi a vicenda. */
.segno::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--tocco); height: var(--tocco); transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  /* Col mouse il bersaglio grande non serve, e su una mappa fitta ruberebbe i clic
     al segno accanto. */
  .segno::after { width: 100%; height: 100%; }
}
.segno.indip { border-radius: 50%; }              /* tondo: indipendente */
.segno.marchio { border-radius: 3px; }            /* quadrato: franchising */
.segno.s-nuova { background: var(--segno-nuova); }
.segno.s-contattata { background: var(--segno-contattata); }
.segno.s-app { background: var(--segno-appuntamento); }
.segno.s-attiva { background: var(--segno-attiva); }
.segno.s-no { background: var(--segno-spenta); }
.segno:hover { transform: scale(1.35); z-index: 3; }

.partenza {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--partenza);
  border: 3px solid var(--contorno-segno);
  box-shadow: 0 0 0 3px var(--partenza-alone); pointer-events: none;
}

.comandi-mappa { position: absolute; top: 8px; right: 8px; display: grid; gap: 4px; }
/* Anche qui 44: insieme a Chiama, i due tasti dello zoom erano i bersagli piu'
   piccoli del pannello, e si usano con il pollice mentre si guarda la cartina. */
.comandi-mappa button { width: var(--tocco); height: var(--tocco); font-size: 20px;
                        line-height: 1; padding: 0; }

.attribuzione {
  position: absolute; right: 0; bottom: 0; font-size: 11px; padding: 1px 5px;
  background: var(--fondo-attribuzione); color: var(--testo-attribuzione);
  border-radius: 4px 0 0 0;
}
.attribuzione a { color: var(--testo-attribuzione); }

.legenda {
  position: absolute; left: 8px; bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 8px;
  padding: 5px 8px; font-size: 12px; color: var(--testo-2);
}
.legenda span { display: flex; align-items: center; gap: 4px; }
.legenda i { position: static; margin: 0; width: 11px; height: 11px; border-width: 1px; box-shadow: none; }

/* ================================================ fase 2: clienti, lead, ricerca */

/* La casella che cerca ovunque: sta nell'intestazione, sempre allo stesso posto. */
.cerca-tutto { position: relative; max-width: var(--colonna); margin: 0 auto;
               padding: 0 var(--s4) var(--s3); }
/* font: inherit e basta: il font-size: var(--t-corpo) che c'era qui la portava a 15px,
   e sotto i 16px iOS ingrandisce la pagina appena si tocca il campo — proprio la
   casella che si tocca piu' spesso, e proprio sul telefono. */
.cerca-tutto input { width: 100%; min-height: var(--tocco); padding: 0 var(--s3);
                     border: 1px solid var(--bordo-forte); border-radius: var(--raggio-2);
                     background: var(--superficie); color: var(--testo);
                     font: inherit; }
.cerca-tutto input:focus { outline: 2px solid var(--marchio-2); outline-offset: 1px; }

.risultati { position: absolute; z-index: 40; left: var(--s4); right: var(--s4);
             max-height: 60vh; overflow-y: auto; background: var(--superficie);
             border: 1px solid var(--bordo); border-radius: var(--raggio);
             box-shadow: var(--ombra-alta); padding: var(--s2); }
.gruppo-risultati h4 { margin: var(--s2) var(--s2) var(--s1); font-size: var(--t-minuta);
                       text-transform: uppercase; letter-spacing: .04em;
                       color: var(--testo-2); }
/* align-items e justify-content si dichiarano: la regola generale dei tasti centra
   tutto, e in una colonna il nome del cliente finiva in mezzo alla riga come un
   titolo invece che a sinistra come una voce di elenco. */
.risultato { display: flex; flex-direction: column; align-items: flex-start;
             justify-content: center; gap: 2px; width: 100%;
             min-height: var(--tocco); padding: var(--s2) var(--s3); border: 0;
             border-radius: var(--raggio-2); background: transparent; text-align: left;
             color: var(--testo); font: inherit; cursor: pointer; }
.risultato:hover, .risultato:focus { background: var(--marchio-velo); }
.risultato span { font-size: var(--t-nota); color: var(--testo-2); }

/* L'imbuto dei lead: si preme un passo per filtrare, si ripreme per tornare a tutto. */
.imbuto { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.passo { display: flex; flex-direction: column; align-items: center; gap: 2px;
         min-width: 92px; min-height: var(--tocco); padding: var(--s2) var(--s3);
         border: 1px solid var(--bordo); border-radius: var(--raggio);
         background: var(--superficie); color: var(--testo); font: inherit;
         cursor: pointer; }
.passo:hover { border-color: var(--bordo-forte); }
.passo strong { font-size: var(--t-titolo); font-family: var(--cifre); }
.passo span { font-size: var(--t-minuta); color: var(--testo-2); }
.passo.fatto strong { color: var(--fatto); }
.passo.attesa strong { color: var(--attesa); }
.passo.ritardo strong { color: var(--ritardo); }

/* Gli avvisi su una scheda: si vedono, ma non gridano. */
.avvisi { margin: var(--s2) 0 0; padding: 0; list-style: none; }
/* Il testo a sinistra e il tasto che porta alla pratica a destra, incolonnati. Prima
   il tasto stava in mezzo al testo come una parola qualunque: a 34px si notava poco,
   a 44px si accavallava con la riga sotto. */
.avviso-riga { display: flex; align-items: center; justify-content: space-between;
               gap: var(--s2); flex-wrap: wrap;
               padding: var(--s2); border-left: 3px solid var(--attesa);
               background: var(--attesa-velo); color: var(--attesa);
               font-size: var(--t-nota); border-radius: 0 var(--raggio-2) var(--raggio-2) 0; }
.avviso-riga > div { flex: 1 1 200px; min-width: 0; }
.avviso-riga + .avviso-riga { margin-top: var(--s1); }

/* Sotto i campi: a sinistra cosa ci va, a destra se quel che c'e' torna. */
.campo .aiuto { display: block; margin-top: var(--s1); font-size: var(--t-minuta);
                color: var(--testo-2); }
.campo .verdetto { display: block; margin-top: 2px; font-size: var(--t-minuta); }
.campo .verdetto.buono { color: var(--fatto); }
.campo .verdetto.storto { color: var(--ritardo); }
/* Un campo riempito dal programma si vede: e' un'ipotesi, non un dato raccolto. */
.campo input.dedotto { background: var(--informazione-velo); }

.targhetta { padding: 2px var(--s2); border-radius: 999px; background: var(--superficie-2);
             color: var(--testo-2); font-size: var(--t-minuta); white-space: nowrap; }
.targhetta.fatto { background: var(--fatto-velo); color: var(--fatto); }
.targhetta.attesa { background: var(--attesa-velo); color: var(--attesa); }
.targhetta.ritardo { background: var(--ritardo-velo); color: var(--ritardo); }

.vuoto { padding: var(--s6) var(--s4); text-align: center; color: var(--testo-2);
         line-height: 1.6; }

@media (max-width: 640px) {
  .cerca-tutto { padding: 0 var(--s3) var(--s2); }
  .risultati { left: var(--s3); right: var(--s3); }
  .passo { flex: 1 1 auto; min-width: 72px; }
  /* Sul telefono ogni tendina prende tutta la riga. Due per riga vorrebbe dire 170px
     l'una, e "con o senza telefono" tornerebbe tagliato; larghezze diverse una sotto
     l'altra sembrano un errore. Meglio scorrere che leggere mezze parole. */
  .riga-filtri select, .riga-filtri input { flex: 1 1 100%; }
}

/* Con sei linguette la barra non ci sta piu' su un telefono: invece di tagliare
   l'ultima, scorre di lato. Le linguette non si stringono, o diventano illeggibili. */
nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
nav::-webkit-scrollbar { display: none; }
.linguetta { flex: 1 0 auto; white-space: nowrap; min-width: 84px; }

/* auto-fill invece di auto-fit: l'ultimo passo dell'imbuto resta della sua misura
   invece di stirarsi per tutta la riga quando va a capo. */
.imbuto { display: grid; gap: var(--s2);
          grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
@media (max-width: 640px) {
  .passo { flex: none; min-width: 0; }
}

/* ============================================ fase 3: pratiche e calcolatori */

.pannello { background: var(--superficie); border: 1px solid var(--bordo);
            border-radius: var(--raggio); padding: var(--s4); margin-bottom: var(--s4); }
.pannello h3 { margin: 0 0 var(--s3); font-size: var(--t-sezione);
               display: flex; align-items: center; gap: var(--s2); }
.pannello h4 { margin: var(--s4) 0 var(--s2); font-size: var(--t-nota);
               text-transform: uppercase; letter-spacing: .04em; color: var(--testo-2); }

/* I numeri che contano, grandi e con sotto da dove escono. */
.numeri { display: grid; gap: var(--s3);
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
          margin-bottom: var(--s3); }
.misura { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s3);
          background: var(--superficie-2); border-radius: var(--raggio-2); }
.misura-nome { font-size: var(--t-minuta); text-transform: uppercase;
               letter-spacing: .04em; color: var(--testo-2); }
.misura strong { font-family: var(--cifre); font-size: var(--t-titolo); }
.misura small { font-size: var(--t-minuta); color: var(--testo-2); line-height: 1.4; }

/* Le tabelle larghe scorrono dentro il loro riquadro: la pagina non si sposta mai. */
.scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.misure, table.documenti { width: 100%; border-collapse: collapse;
                                font-size: var(--t-nota); }
table.misure th, table.documenti th { text-align: left; padding: var(--s2);
                                      border-bottom: 1px solid var(--bordo);
                                      font-size: var(--t-minuta); color: var(--testo-2);
                                      text-transform: uppercase; letter-spacing: .04em; }
table.misure td, table.documenti td { padding: var(--s2);
                                      border-bottom: 1px solid var(--bordo);
                                      vertical-align: top; }
td.cifra, th.cifra { font-family: var(--cifre); text-align: right; white-space: nowrap; }
table.misure tr.giallo td:first-child { border-left: 3px solid var(--attesa);
                                        padding-left: calc(var(--s2) - 3px); }
table.misure tr.rosso td:first-child { border-left: 3px solid var(--ritardo);
                                       padding-left: calc(var(--s2) - 3px); }

.stato-documento { min-height: var(--tocco); padding: 0 var(--s2);
                   border: 1px solid var(--bordo-forte); border-radius: var(--raggio-2);
                   background: var(--superficie); color: var(--testo); font: inherit;
                   font-size: var(--t-nota); }
.facoltativo { color: var(--testo-3); }
.rimedi { margin: 0; padding-left: var(--s5); line-height: 1.7; }
.rimedi li { color: var(--testo); }
.nota-piccola { margin: var(--s3) 0 0; font-size: var(--t-minuta); color: var(--testo-2);
                line-height: 1.5; }
.tutto-fatto { margin: 0; padding: var(--s3); background: var(--fatto-velo);
               color: var(--fatto); border-radius: var(--raggio-2); }
.avviso-riga.ritardo { border-left-color: var(--ritardo); background: var(--ritardo-velo);
                       color: var(--ritardo); }

/* Un risultato appena calcolato si fa notare, poi torna normale. */
.pannello.risultato { border-color: var(--marchio-2); box-shadow: var(--ombra); }

@media print {
  header, .filtri, .azioni, nav, #pipeline, .cerca-tutto { display: none !important; }
  .pannello { border: 0; padding: 0; break-inside: avoid; }
  table.misure, table.documenti { font-size: 11px; }
}

/* ================================================== fase 5: listino e comparativa */

/* La colonna della provvigione e' tua: si distingue a colpo d'occhio da quelle che
   il cliente puo' vedere, e in stampa sparisce. */
.tuo { color: var(--marchio-2); }
th.tuo { color: var(--marchio-2); }
tr.spento { opacity: .55; }

@media print {
  .tuo { display: none !important; }
}

/* Un avviso trascurato da oltre un mese non deve somigliare agli altri: sta in un
   riquadro suo, in cima, e si vede da lontano. */
.pannello.trascurati { border-color: var(--ritardo); border-width: 2px; }
.pannello.trascurati h3 { color: var(--ritardo); }
.avviso-riga.trascurato { border-left-width: 5px; font-weight: 600; }

/* ================================================== fase 12: la parte da telefono */

/* La barra dello stato rete: resta finche' c'e' qualcosa in sospeso. In fondo, dove
   non copre niente, ma sopra tutto il resto perche' non si possa non vederla. */
#barra-rete {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--s2) var(--s4);
  padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom));
  font-size: var(--t-nota); font-weight: 600; text-align: center;
}
/* Il testo e' un token: nel tema scuro ambra e rosso si schiariscono, e un bianco
   scritto a mano su "cose da mandare" scendeva a 1,73:1 — proprio la barra che deve
   farsi leggere. */
#barra-rete.ritardo { background: var(--ritardo); color: var(--su-allarme); }
#barra-rete.attesa  { background: var(--attesa); color: var(--su-allarme); }

.pannello.invito {
  position: fixed; z-index: 60; left: var(--s4); right: var(--s4);
  bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  max-width: 420px; margin: 0 auto; box-shadow: var(--ombra-alta);
  border-color: var(--marchio-2);
}

/* Una copia servita senza rete si vede: non si spaccia per il dato di adesso. */
.da-copia { border-left: 3px solid var(--attesa); padding-left: var(--s2); }

/* Installata sulla Home, la barra di stato del telefono sta sopra l'intestazione. */
@media (display-mode: standalone) {
  header { padding-top: max(env(safe-area-inset-top), 8px); }
  main { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ============================================== fase 13: cruscotto e obiettivi */

.barra { position: relative; height: 10px; border-radius: 999px;
         background: var(--superficie-2); overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--marchio-2);
              border-radius: 999px; }
.barra.grande { height: 16px; overflow: visible; margin: var(--s2) 0; }
.barra.grande span { border-radius: 999px 0 0 999px; }
/* La tacca e' il tempo passato: se il pieno le sta davanti, si e' in pari. */
.barra .tacca { position: absolute; top: -4px; bottom: -4px; width: 2px;
                background: var(--testo); opacity: .55; }
.obiettivo { margin-bottom: var(--s4); }
.obiettivo small { color: var(--testo-2); font-size: var(--t-minuta); }

/* Chi segue quale agenzia: coordinarsi, non nascondere. */
.seguita-da { margin: 0 0 var(--s3); padding-left: var(--s5); line-height: 1.9; }
.seguita-da small { color: var(--testo-2); font-size: var(--t-minuta); }
.seguita-da button { margin-left: var(--s2); }

/* Sulla mappa: la forma dice il tipo, il colore lo stato, l'ANELLO dice se qualcuno
   la segue gia'. Le libere restano "nude", e si trovano a occhio. */
.segno.presa { box-shadow: 0 0 0 3px var(--contorno-segno), 0 0 0 5px var(--attesa); }
.segno.mia   { box-shadow: 0 0 0 3px var(--contorno-segno), 0 0 0 5px var(--fatto); }
/* Nella legenda l'anello va rimpicciolito, o mangia il quadratino accanto. */
.legenda i.mia, .legenda i.presa { box-shadow: 0 0 0 1px var(--contorno-segno), 0 0 0 2px currentColor; }
.legenda i.mia { color: var(--fatto); }
.legenda i.presa { color: var(--attesa); }

/* Colorando per chi la segue il colore cambia mestiere: non racconta piu' lo stato del
   contatto ma se l'agenzia e' presa. Tre tinte lontane dalle cinque degli stati, cosi'
   passando da un modo all'altro non si crede di star guardando la stessa cosa. */
.segno.c-libera  { background: var(--segno-libera); }   /* nessuno ci lavora */
.segno.c-mia     { background: var(--segno-mia); }      /* la segui tu */
.segno.c-altrui  { background: var(--segno-altrui); }   /* la segue un collega */

/* La nuvoletta: quello che serve a decidere se chiamare, senza aprire la scheda. */
.nuvoletta {
  position: absolute; z-index: 6; max-width: 280px; pointer-events: none;
  background: var(--superficie); color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-2);
  box-shadow: var(--ombra-alta); padding: var(--s2) var(--s3);
  font-size: var(--t-nota); line-height: 1.35;
}
.nuvoletta strong { display: block; font-size: var(--t-corpo); }
.nuvoletta p { margin: 2px 0 0; }
.nuvoletta .chi { font-weight: 600; }
.nuvoletta .chi.libera { color: var(--fatto); }
.nuvoletta .chi.presa  { color: var(--ritardo); }
.nuvoletta .chi.mia    { color: var(--marchio); }
.nuvoletta .nota-segue { color: var(--testo-2); font-style: italic; }
.nuvoletta .fonte { margin-top: var(--s1); }

/* Sul telefono non esiste il passaggio del cursore: la nuvoletta non comparirebbe mai
   e occuperebbe solo spazio. Li' si tocca il segno e si apre la scheda, che dice tutto. */
@media (hover: none) { .nuvoletta { display: none !important; } }

/* Gli indirizzi che Nominatim propone quando si cerca la partenza: uno sotto l'altro,
   allineati a sinistra come si legge un elenco. Erano quattro dichiarazioni scritte
   nell'attributo style, dove nessuno le trova e dove non le governa il tema. */
.suggerimento {
  display: flex; width: 100%; justify-content: flex-start; text-align: left;
  margin-top: var(--s1);
}