/* =====================================================================
   Concessionari AutoProff — le regole del prodotto sopra il foglio comune FTH (TOM-454, 03/11/2026)
   ---------------------------------------------------------------------
   Si carica DOPO stile-fth.css, che è la copia uguale all'originale
   (projects/fth-stile/stile.css, controllo: ops/controlla-stile.sh) e non si tocca.
   Qui stanno solo le cose di questo strumento: contatori, filtri, mappa, tabelle, lista, note.
   Tutti i colori vengono dai gettoni del foglio comune (chiaro, scuro, carattere Tomasi):
   nessun colore scritto a mano, tranne i punti della mappa, che hanno il loro significato.
   ===================================================================== */

[hidden] { display: none !important; }
.nascosto { display: none !important; }
.dim { color: var(--testo-3); }
.warn { color: var(--attenzione); }
.bad { color: var(--critico); font-weight: var(--peso-titolo); }
.cenno { color: var(--testo-2); }

/* ---------- Guscio ---------- */
.fs-prodotto { text-decoration: none; }
.fs-prodotto img, .fs-top img { height: 20px; width: auto; }
.fs-prodotto b { padding-left: 10px; border-left: var(--bordo); }
.fs-side nav.viste { display: flex; flex-direction: column; gap: 2px; }
.fs-voce { text-decoration: none; cursor: pointer; }
.fs-side-piede { flex-wrap: wrap; row-gap: 0; }
.fs-side-piede .chi { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.fs-side-piede .chi b { font-weight: var(--peso-medio); color: var(--testo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-side-piede .chi small { font-size: var(--t-xs); color: var(--testo-3); }
form.esci { display: inline; margin: 0; }
form.esci button { border: 0; background: none; padding: 4px 6px; border-radius: var(--r-1); font-size: var(--t-s);
  font-weight: var(--peso-medio); color: var(--testo-2); cursor: pointer; height: auto; }
form.esci button:hover { background: var(--fondo-3); color: var(--testo); }
.fs-top a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.fs-top form.esci { margin-left: auto; }
.fs-top form.esci button { min-height: 44px; padding: 0 8px; }
.fs-tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.fs-tabbar a { text-decoration: none; }
main.fs-pagina { max-width: 1500px; }
.vista { display: none; }
.vista.on { display: block; }
.fs-testa { display: block; }
.fs-testa .fs-sotto { margin: var(--s-1) 0 0; }

a { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linea-forte); }
a:hover { text-decoration-color: var(--marca); }
.sola-lettura { display: inline-block; font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--testo-3);
  border: var(--bordo); border-radius: var(--r-tondo); padding: 0 6px; margin-left: 4px; }

/* ---------- Campi e bottoni (i bottoni del codice non portano la classe del foglio) ---------- */
input, select, textarea { font: inherit; font-size: var(--t-s); color: var(--testo); background: var(--superficie);
  border: 1px solid var(--linea-forte); border-radius: var(--r-1); padding: 0 var(--s-3); height: 32px; min-width: 0; }
textarea { height: auto; padding: var(--s-2) var(--s-3); }
input::placeholder, textarea::placeholder { color: var(--testo-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: var(--fuoco); }
input[type=checkbox] { height: 16px; width: 16px; padding: 0; accent-color: var(--testo); }
button { font: inherit; font-size: var(--t-s); font-weight: var(--peso-medio); color: var(--testo); background: var(--superficie);
  border: 1px solid var(--linea-forte); border-radius: var(--r-1); height: 32px; padding: 0 var(--s-3); cursor: pointer;
  transition: background var(--veloce), border-color var(--veloce); }
button:hover { background: var(--fondo-2); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, th[tabindex]:focus-visible { outline: none; box-shadow: var(--fuoco); }
button.primario { background: var(--testo); color: var(--fondo); border-color: var(--testo); display: inline-flex; align-items: center; gap: var(--s-2); }
button.primario:hover { opacity: .88; background: var(--testo); }
button.primario svg { width: 15px; height: 15px; }

/* ---------- Stato dell'elenco ---------- */
.stato { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-4); margin-bottom: var(--s-4);
  font-size: var(--t-s); color: var(--testo-2); }
.stato b { color: var(--testo); font-weight: var(--peso-medio); }

/* ---------- I contatori: una striscia divisa da filetti ---------- */
.kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.k { padding: var(--s-4); border: var(--bordo); background: var(--superficie); border-radius: var(--r-2);
  display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: inherit; height: auto; text-decoration: none; }
.k .v { font-size: var(--t-2xl); line-height: 32px; font-weight: var(--peso-titolo); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.k .e { font-size: var(--t-s); color: var(--testo-2); font-weight: var(--peso-medio); }
.k .n { font-size: var(--t-xs); color: var(--testo-3); }
.k.attenzione .v { color: var(--attenzione); }
.k.nuovi .v { color: var(--bene); }
button.k { cursor: pointer; width: 100%; }
button.k:hover, a.k:hover { background: var(--fondo-2); }
button.k[aria-pressed=true] { background: var(--bene-tenue); box-shadow: inset 0 0 0 1px var(--bene); }
a.k { cursor: pointer; }
a.k .n { color: var(--testo-2); font-weight: var(--peso-medio); }

/* ---------- Filtri ---------- */
.filtri { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; background: var(--superficie); border: var(--bordo);
  border-radius: var(--r-2); padding: var(--s-4); margin-bottom: var(--s-4); }
.f { display: flex; flex-direction: column; gap: var(--s-1); }
.f label { font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--testo-3); }
.f select, .f input:not([type=checkbox]) { min-width: 150px; }
#f_q, #l_q { min-width: 220px; }
.f.spunta { justify-content: flex-end; height: 50px; }
.f.spunta label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-s); font-weight: var(--peso-testo);
  color: var(--testo-2); height: 32px; cursor: pointer; }
.f-sep { flex: 1 1 auto; }
#b_azzera, #l_azzera { background: none; border: 0; color: var(--testo-2); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--linea-forte); padding: 0 var(--s-1); }
#b_azzera:hover, #l_azzera:hover { color: var(--testo); background: none; }
#b_azzera:disabled, #l_azzera:disabled { text-decoration: none; }

/* ---------- Stato vuoto ---------- */
.vuoto { background: var(--superficie); border: 1px dashed var(--linea-forte); border-radius: var(--r-2); padding: var(--s-8) var(--s-5);
  text-align: center; color: var(--testo-2); margin: var(--s-8) auto; max-width: 640px; }
.vuoto h2 { margin: 0 0 var(--s-2); font-size: var(--t-l); color: var(--testo); }
.vuoto code { background: var(--fondo-3); padding: 2px 6px; border-radius: 4px; font-size: var(--t-xs); font-family: var(--font-num); overflow-wrap: anywhere; }

/* ---------- Schede e mappa ---------- */
.card { background: var(--superficie); border: var(--bordo); border-radius: var(--r-2); overflow: hidden; margin-bottom: var(--s-4); }
.card > h2 { margin: 0; padding: var(--s-3) var(--s-4); font-size: var(--t-m); font-weight: var(--peso-titolo); border-bottom: var(--bordo);
  display: flex; align-items: baseline; gap: var(--s-1) var(--s-4); flex-wrap: wrap; }
.card > h2 .conta { font-variant-numeric: tabular-nums; }
.card > h2 .cenno { font-size: var(--t-s); font-weight: var(--peso-testo); }
.card > h2 .cenno.warn { color: var(--attenzione); }
.mappa { height: 520px; background: var(--fondo-3); position: relative; z-index: 0; }
.leaflet-container { font: inherit; }
.leaflet-control-zoom a { color: var(--testo); background: var(--superficie); }
.leaflet-bar { border: var(--bordo) !important; }
.leaflet-control-attribution { background: color-mix(in srgb, var(--superficie) 80%, transparent) !important; color: var(--testo-3); }
.leaflet-control-attribution a { color: var(--testo-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .leaflet-tile-pane { filter: invert(.92) hue-rotate(180deg) brightness(.92) contrast(.9); }
}
:root[data-tema="dark"] .leaflet-tile-pane { filter: invert(.92) hue-rotate(180deg) brightness(.92) contrast(.9); }
.grappolo { background: var(--testo); color: var(--fondo); border: 2px solid var(--superficie); border-radius: 99px; display: flex;
  align-items: center; justify-content: center; font-weight: var(--peso-titolo); font-variant-numeric: tabular-nums;
  box-shadow: var(--ombra-pop); font-size: 12px; width: 34px; height: 34px; margin-left: -17px; margin-top: -17px; }
.grappolo.m { font-size: 12.5px; width: 42px; height: 42px; margin-left: -21px; margin-top: -21px; }
.grappolo.g { font-size: 13px; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; }
.leaflet-popup-content-wrapper { border-radius: var(--r-2); box-shadow: var(--ombra-pop); padding: 2px; background: var(--superficie); color: var(--testo); }
.leaflet-popup-tip { background: var(--superficie); }
.leaflet-popup-content { margin: var(--s-3) var(--s-4); font-family: inherit; font-size: var(--t-s); line-height: 1.45; min-width: 240px; max-width: 320px; }
.leaflet-popup-content a { color: var(--testo); }
.leaflet-container a.leaflet-popup-close-button { color: var(--testo-3); }
.leaflet-tooltip { background: var(--superficie); color: var(--testo); border-color: var(--linea); }
.pp h3 { margin: 0 0 var(--s-1); font-size: var(--t-m); font-weight: var(--peso-titolo); line-height: 1.3; padding-right: 14px; display: flex; gap: 6px; align-items: flex-start; }
.pp .ind { color: var(--testo-2); margin-bottom: var(--s-2); }
.pp .riga { display: flex; gap: var(--s-2); align-items: baseline; margin-top: 3px; }
.pp .riga .e { flex: 0 0 68px; font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--testo-3); }
.pp .riga a { word-break: break-all; }
.pp .piede { margin-top: var(--s-3); padding-top: var(--s-2); border-top: var(--bordo); }
.pp .tel { white-space: nowrap; }
.legenda { display: inline-flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t-xs); color: var(--testo-2); margin-left: auto; font-weight: var(--peso-testo); }
.legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 99px; background: var(--marca); border: 1.5px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--linea-forte); vertical-align: -1px; margin-right: 5px; }
.legenda i.lista { background: var(--testo); border: 2px solid var(--marca); box-shadow: none; }
.legenda i.nuovo { background: var(--marca); border: 2px solid var(--bene); box-shadow: none; }
.legenda i.sparito { background: var(--testo-3); box-shadow: none; opacity: .6; }
.leaflet-control.torna { background: var(--superficie); border: var(--bordo); border-radius: 99px; box-shadow: var(--ombra-fin); padding: 6px 12px;
  font: 500 var(--t-s)/1 var(--font); color: var(--testo); cursor: pointer; margin: 10px; }
.leaflet-control.torna:hover { border-color: var(--marca); }
.leaflet-control.torna[hidden] { display: none; }

/* ---------- Pastiglie ---------- */
.pos, .pill-stato, .pill-lista, .u-pill { display: inline-flex; align-items: center; font-size: var(--t-xs); font-weight: var(--peso-medio);
  padding: 0 6px; height: 20px; border-radius: 4px; background: var(--fondo-3); color: var(--testo-2); white-space: nowrap; vertical-align: 1px; }
.pos.citta, .pill-stato.contattato { background: var(--attenzione-tenue); color: var(--attenzione); }
.pos.nessuna { background: var(--critico-tenue); color: var(--critico); }
.pos.sede, .pill-stato.cliente, .u-pill.on { background: var(--bene-tenue); color: var(--bene); }
.pos.nuovo, .pill-lista { background: var(--marca-tenue); color: var(--marca); }
.pos.sparito, .pill-stato.non_interessato, .u-pill.off { color: var(--testo-3); }
.pp h3 .pos { margin-left: 6px; }
tr.sparito td { color: var(--testo-3); }
.nome-riga { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sola-lettura { height: auto; }

/* ---------- Tabelle ---------- */
.scroll { max-height: min(66vh, 680px); overflow: auto; }
.u-scroll { max-height: min(60vh, 560px); }
.u-scroll thead th { position: sticky; top: 0; background: var(--fondo-2); z-index: 1; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
#t_dealer { min-width: 1280px; }
#t_dealer colgroup { display: none; }
#t_dealer td { overflow-wrap: normal; }
#t_dealer td:nth-child(2) { min-width: 170px; }
#t_dealer td:nth-child(3) { min-width: 170px; }
#t_dealer td:nth-child(4) { min-width: 130px; }
#t_dealer td:nth-child(5), #t_dealer td:nth-child(6), #t_dealer td:nth-child(7), #t_dealer td:nth-child(8) { white-space: nowrap; }
#t_dealer td:nth-child(9) { min-width: 120px; }
#t_dealer td .mail { max-width: 200px; }
#t_lista { min-width: 900px; }
th { text-align: left; font-weight: var(--peso-medio); color: var(--testo-3); font-size: var(--t-xs); padding: 0 var(--s-3); height: 36px;
  border-bottom: var(--bordo); position: sticky; top: 0; background: var(--fondo-2); z-index: 1; white-space: nowrap; }
th[tabindex] { cursor: pointer; user-select: none; }
th[tabindex]:hover { color: var(--testo); }
th .ord { display: inline-block; width: 0; margin-left: 5px; color: var(--testo-3); font-size: 9px; vertical-align: 1px; }
th[aria-sort=ascending] .ord::after { content: "▲"; color: var(--testo); }
th[aria-sort=descending] .ord::after { content: "▼"; color: var(--testo); }
td { padding: var(--s-2) var(--s-3); border-bottom: var(--bordo); vertical-align: top; line-height: 1.35; overflow-wrap: anywhere; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { font-variant-numeric: tabular-nums; }
th.mid, td.mid { text-align: center; }
tbody tr { cursor: pointer; transition: background var(--veloce); }
tbody tr:hover { background: var(--fondo-2); }
tbody tr.sel { background: var(--marca-tenue); }
tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--marca); }
tbody tr.nonloc { cursor: default; }
td .nome { font-weight: var(--peso-medio); color: var(--testo); }
td .tel { font-variant-numeric: tabular-nums; }
td a { color: inherit; }
td .mail, td .tel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-vuota td { padding: var(--s-8) var(--s-4); text-align: center; color: var(--testo-2); cursor: default; }
.tab-vuota td b { display: block; color: var(--testo); font-size: var(--t-m); margin-bottom: var(--s-1); }
.tab-vuota td button { margin-top: var(--s-3); }
.scroll.carico { opacity: .5; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Accessi ---------- */
.card > .b { padding: var(--s-4); }
#v-utenti .card > h2 { display: block; }
#v-utenti .card > h2 span { display: block; font-size: var(--t-s); font-weight: var(--peso-testo); color: var(--testo-2); margin-top: 3px; }
.u-chi { display: flex; align-items: center; gap: var(--s-3); }
.u-av { width: 28px; height: 28px; border-radius: 50%; background: var(--fondo-3); color: var(--testo-2); display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: var(--peso-titolo); flex: none; }
tr:not(.spento) .u-av { background: var(--marca-tenue); color: var(--marca); }
.u-id { display: flex; flex-direction: column; line-height: 1.3; }
.u-id b { font-weight: var(--peso-medio); }
.u-id small { color: var(--testo-3); font-size: var(--t-xs); }
.u-ruolo { border: var(--bordo); border-radius: var(--r-1); padding: 3px var(--s-2); font-size: var(--t-xs); font-weight: var(--peso-medio);
  background: var(--superficie); color: var(--testo-2); cursor: pointer; height: auto; }
.u-ruolo.r-admin { background: var(--marca-tenue); color: var(--marca); border-color: transparent; }
.u-ruolo.r-editor { background: var(--bene-tenue); color: var(--bene); border-color: transparent; }
.u-quando { font-variant-numeric: tabular-nums; color: var(--testo-2); font-size: var(--t-s); }
.u-mai { color: var(--testo-3); }
.u-oggi, .u-tu { font-size: var(--t-xs); font-weight: var(--peso-medio); border-radius: 4px; padding: 0 6px; margin-left: 6px; vertical-align: 1px;
  background: var(--bene-tenue); color: var(--bene); }
.u-oggi.ieri, .u-tu { background: var(--fondo-3); color: var(--testo-2); }
.u-nota { flex-basis: 100%; font-size: var(--t-xs); color: var(--testo-2); line-height: 1.5; max-width: 72ch; }
.u-az { text-align: right; }
.u-toggle { background: none; border: 1px solid var(--linea-forte); border-radius: var(--r-1); padding: 4px var(--s-3); font-size: var(--t-xs);
  font-weight: var(--peso-medio); color: var(--testo-2); cursor: pointer; height: auto; }
.u-toggle:hover { border-color: var(--testo); color: var(--testo); background: none; }
#t_utenti td { padding: var(--s-3); vertical-align: middle; }
#t_utenti tbody tr { cursor: default; }
#t_utenti tbody tr:hover { background: transparent; }
#t_utenti tr.spento { background: var(--fondo-2); }
#t_utenti tr.spento td { color: var(--testo-3); }
#t_utenti tr.spento b, #t_utenti tr.spento small { color: var(--testo-3); }
#t_utenti tr.spento .u-av { background: var(--fondo-3); color: var(--testo-3); }
#t_utenti tr.prima-spenta td { border-top: 1px solid var(--linea-forte); }
#t_utenti select { height: 28px; font-size: var(--t-xs); }
.invito { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); padding: var(--s-3); background: var(--fondo-2);
  border: var(--bordo); border-radius: var(--r-2); }
.invito input, .invito select { height: 36px; }
.invito input[type=email] { flex: 1 1 220px; }
.invito input[type=text] { flex: 1 1 160px; }
.invito button { height: 36px; }
.invito .primario { padding: 0 var(--s-5); margin-left: auto; }
.invito .cenno { align-self: center; font-size: var(--t-s); }

/* ---------- Finestre in pagina ---------- */
dialog { color: var(--testo); background: var(--superficie); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
#cf_dialog { border: 0; border-radius: var(--r-3); padding: var(--s-5); width: min(420px, calc(100% - 32px)); box-shadow: var(--ombra-fin); }
#cf_dialog h3 { margin: 0 0 var(--s-2); font-size: var(--t-l); }
#cf_dialog p { margin: 0 0 var(--s-4); font-size: var(--t-s); color: var(--testo-2); line-height: 1.55; }
.cf-azioni { display: flex; gap: var(--s-2); justify-content: flex-end; }
#cf_ok { background: var(--testo); border-color: var(--testo); color: var(--fondo); }
#cf_dialog.pericolo #cf_ok { background: var(--critico); border-color: var(--critico); color: #fff; }

/* ---------- La lista del team ---------- */
.stella { display: inline-flex; align-items: center; justify-content: center; color: var(--marca); line-height: 0; width: 18px; height: 18px; flex: none; margin-top: 1px; }
.stella svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
td.st, th.st { vertical-align: middle; white-space: nowrap; }
.b-aggiungi.mini { height: 26px; padding: 0 var(--s-2); font-size: var(--t-xs); color: var(--marca); border-color: color-mix(in srgb, var(--marca) 35%, var(--linea)); white-space: nowrap; }
.b-aggiungi.mini:hover { background: var(--marca-tenue); }
.b-togli { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-xs); color: var(--testo-3); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap; height: auto; font-weight: var(--peso-testo); }
.b-togli:hover { color: var(--critico); background: none; }
.pp .azioni .b-togli { border: 1px solid var(--linea-forte); border-radius: var(--r-tondo); padding: 4px var(--s-3); color: var(--testo-2); background: var(--superficie); text-decoration: none; }
.pp .azioni .b-togli:hover { border-color: var(--critico); color: var(--critico); }
.lista-cella { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#t_dealer td.st { overflow: visible; }
#t_dealer .sel-stato { height: 26px; padding: 0 4px; font-size: var(--t-xs); width: 104px; min-width: 0; }
.b-togli.x { width: 24px; height: 24px; border: 1px solid var(--linea-forte); border-radius: 99px; font-size: 15px; line-height: 1; color: var(--testo-2); background: var(--superficie); text-decoration: none; }
.b-togli.x:hover { border-color: var(--critico); color: var(--critico); background: var(--critico-tenue); }
.pp .lista { margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--bordo); display: flex; flex-direction: column; gap: var(--s-2); }
.pp .lista .primario { height: 34px; justify-content: center; width: 100%; }
.pp .lista .stato { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin: 0; }
.pp .lista .riga .e { flex-basis: 52px; }
.pp .lista select { height: 30px; min-width: 150px; }
.pp .da { font-size: var(--t-xs); color: var(--testo-3); }
.pp .nota { font-size: var(--t-xs); color: var(--testo-2); background: var(--fondo-2); border-radius: var(--r-1); padding: var(--s-2); line-height: 1.45; }
.pp .nota b { font-weight: var(--peso-medio); color: var(--testo); }
.pp .nota p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pp .azioni { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.pp .azioni button.b-note { height: 30px; }
.pp .azioni .b-togli { margin-left: auto; }
.pp .azioni .dim { font-size: var(--t-xs); }
#t_lista td { vertical-align: middle; }
#t_lista td .sotto { display: block; font-size: var(--t-xs); color: var(--testo-3); }
#t_lista .sel-stato { height: 30px; min-width: 150px; }
#t_lista td.nota { max-width: 360px; }
#t_lista td.nota b { font-weight: var(--peso-medio); }
#t_lista td.nota .quando { color: var(--testo-3); font-size: var(--t-xs); }
#t_lista td.nota p { margin: 2px 0 0; color: var(--testo-2); overflow-wrap: anywhere; font-size: var(--t-xs); line-height: 1.4; }
#t_lista td.az { white-space: nowrap; text-align: right; }
#t_lista td.az .b-note { height: 28px; margin-right: var(--s-3); }
#l_vuoto p { margin: var(--s-2) 0 0; }

/* il pannello delle note */
#note_dialog { border: 0; border-left: var(--bordo); border-radius: 0; padding: 0; width: min(440px, 100%); height: 100vh; height: 100dvh; max-height: 100dvh;
  margin: 0 0 0 auto; box-shadow: var(--ombra-fin); flex-direction: column; }
#note_dialog[open] { display: flex; }
.nd-testa { padding: var(--s-4) var(--s-5); border-bottom: var(--bordo); display: flex; gap: var(--s-3); align-items: flex-start; }
.nd-testa h3 { margin: 0; font-size: var(--t-l); line-height: 1.3; }
.nd-testa .sotto { font-size: var(--t-s); color: var(--testo-2); margin-top: 3px; }
.nd-testa .chiudi { margin-left: auto; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--testo-3); cursor: pointer; padding: 0 var(--s-2);
  flex: none; min-width: 44px; min-height: 44px; margin-top: -8px; margin-right: -12px; }
.nd-testa .chiudi:hover { color: var(--testo); background: none; }
.nd-corpo { flex: 1; overflow: auto; padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); background: var(--fondo-2); }
.nd-nota { background: var(--superficie); border: var(--bordo); border-radius: var(--r-2); padding: var(--s-3); font-size: var(--t-s); line-height: 1.5; }
.nd-nota .da { font-size: var(--t-xs); color: var(--testo-3); margin-bottom: var(--s-1); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.nd-nota .da b { color: var(--testo-2); font-weight: var(--peso-medio); }
.nd-nota p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nd-vuoto { color: var(--testo-2); font-size: var(--t-s); text-align: center; padding: var(--s-6) var(--s-3); border: 1px dashed var(--linea-forte); border-radius: var(--r-2); background: var(--superficie); line-height: 1.5; }
.nd-piede { border-top: var(--bordo); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.nd-piede textarea { min-height: 84px; resize: vertical; width: 100%; }
.nd-cenno { font-size: var(--t-xs); color: var(--testo-2); line-height: 1.5; }
.nd-azioni { display: flex; align-items: center; gap: var(--s-3); }
.nd-azioni .conta { font-size: var(--t-xs); color: var(--testo-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.nd-azioni .primario { height: 36px; }
.nd-err { color: var(--critico); font-size: var(--t-s); }
#avviso { position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); background: var(--testo); color: var(--fondo); font-size: var(--t-s);
  padding: 10px 14px; border-radius: var(--r-2); box-shadow: var(--ombra-pop); z-index: 2000; max-width: min(560px, calc(100% - 32px)); line-height: 1.45; }
#avviso.err { background: var(--critico); color: #fff; }

/* ---------- Pagina di accesso ---------- */
body.accesso { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--s-4); background: var(--fondo-2); }
.accesso .box { background: var(--superficie); border: var(--bordo); border-radius: var(--r-3); padding: var(--s-8) var(--s-8) var(--s-6);
  width: min(400px, 100%); text-align: center; box-shadow: var(--ombra-fin); }
.accesso .logo svg { height: 30px; width: auto; }
.accesso .logo path { fill: var(--marca); }
.accesso .divisorio { display: none; }
.accesso h1.fs-titolo { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-xl); }
.accesso h1.fs-titolo::after { display: none; }
.accesso .sotto { color: var(--testo-2); font-size: var(--t-s); margin: 0 0 var(--s-5); }
.accesso label { display: block; text-align: left; font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--testo-3); margin-bottom: var(--s-1); }
.accesso select { width: 100%; height: 40px; font-size: 16px; margin-bottom: var(--s-3); }
.accesso .fs-btn { width: 100%; height: 40px; justify-content: center; }
.accesso .g svg { background: #fff; border-radius: 99px; padding: 3px; flex: none; }
.accesso .nota { color: var(--testo-3); font-size: var(--t-xs); margin-top: var(--s-4); line-height: 1.55; }
.accesso .err { background: var(--critico-tenue); color: var(--critico); font-size: var(--t-s); border-radius: var(--r-1); padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.accesso .piede { margin-top: var(--s-5); padding-top: var(--s-3); border-top: var(--bordo); font-size: var(--t-xs); color: var(--testo-3); }

/* ---------- Fino a 1080 punti ---------- */
@media (max-width: 1080px) {
  .mappa { height: 420px; }
  .f select, .f input:not([type=checkbox]) { min-width: 130px; }
  #f_q, #l_q { min-width: 200px; }
}

/* ---------- Telefono ---------- */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; height: 40px; }
  textarea { height: auto; }
  input[type=checkbox] { height: 18px; width: 18px; }
  button { min-height: 36px; }
  .filtri { padding: var(--s-3); gap: var(--s-3); }
  .f { flex: 1 1 calc(50% - var(--s-3)); min-width: 0; }
  .f select, .f input:not([type=checkbox]), #f_q, #l_q { min-width: 0; width: 100%; }
  .f.spunta { flex: 1 1 100%; height: auto; }
  .f.spunta label { height: 36px; }
  .f-sep { display: none; }
  #b_excel, #l_excel { flex: 1 1 auto; justify-content: center; }
  .mappa { height: 340px; }
  .legenda { margin-left: 0; flex-basis: 100%; }
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .k { padding: var(--s-3); }
  .k .v { font-size: 22px; line-height: 28px; }
  #note_dialog { width: 100%; max-width: 100%; }
  .nd-testa, .nd-corpo, .nd-piede { padding-left: var(--s-4); padding-right: var(--s-4); }
  .invito .primario { margin-left: 0; flex: 1; justify-content: center; }
  #cf_dialog { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: var(--r-3) var(--r-3) 0 0; padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
  .fs-testa { margin-bottom: var(--s-4); }
}

/* una riga di tabella con tante colonne non si legge su un telefono: ogni riga diventa una scheda, con il nome della colonna */
@media (max-width: 640px) {
  #t_dealer, #t_lista, #t_utenti { min-width: 0; table-layout: auto; }
  #t_dealer thead, #t_lista thead, #t_utenti thead { display: none; }
  #t_dealer colgroup { display: none; }
  #t_dealer tbody, #t_lista tbody, #t_utenti tbody { display: block; }
  #t_dealer tr:not(.tab-vuota), #t_lista tr:not(.tab-vuota), #t_utenti tr { display: block; border-bottom: var(--bordo); padding: var(--s-3) var(--s-4); }
  #t_dealer tr:not(.tab-vuota) td, #t_lista tr:not(.tab-vuota) td, #t_utenti tr td {
    display: block; position: relative; min-height: 22px; border: 0; padding: 3px 0 3px 100px; white-space: normal; text-align: left; }
  #t_dealer tr:not(.tab-vuota) td::before, #t_lista tr:not(.tab-vuota) td::before, #t_utenti tr td::before {
    position: absolute; left: 0; top: 5px; font-size: var(--t-xs); color: var(--testo-3); font-weight: var(--peso-medio); }
  #t_dealer td:nth-child(1)::before { content: "Lista"; }
  #t_dealer td:nth-child(2)::before { content: "Nome"; }
  #t_dealer td:nth-child(3)::before { content: "Indirizzo"; }
  #t_dealer td:nth-child(4)::before { content: "Città"; }
  #t_dealer td:nth-child(5)::before { content: "CAP"; }
  #t_dealer td:nth-child(6)::before { content: "Prov."; }
  #t_dealer td:nth-child(7)::before { content: "Paese"; }
  #t_dealer td:nth-child(8)::before { content: "In vendita"; }
  #t_dealer td:nth-child(9)::before { content: "Referente"; }
  #t_dealer td:nth-child(10)::before { content: "Telefono"; }
  #t_dealer td:nth-child(11)::before { content: "Email"; }
  #t_dealer td:nth-child(12)::before { content: "Posizione"; }
  #t_lista td:nth-child(1)::before { content: "Nome"; }
  #t_lista td:nth-child(2)::before { content: "Città"; }
  #t_lista td:nth-child(3)::before { content: "Stato"; }
  #t_lista td:nth-child(4)::before { content: "Aggiunto da"; }
  #t_lista td:nth-child(5)::before { content: "Ultima nota"; }
  #t_lista td:nth-child(6)::before { content: "Note"; }
  #t_lista td:nth-child(7)::before { content: ""; }
  #t_utenti td:nth-child(1)::before { content: "Utente"; }
  #t_utenti td:nth-child(2)::before { content: "Ruolo"; }
  #t_utenti td:nth-child(3)::before { content: "Ultimo accesso"; }
  #t_utenti td:nth-child(4)::before { content: "Stato"; }
  #t_utenti td:nth-child(5)::before { content: ""; }
  #t_dealer td .mail, #t_dealer td .tel { white-space: normal; overflow-wrap: anywhere; }
  #t_lista td.az { text-align: left; }
  #t_utenti td.u-az { text-align: left; }
  #t_dealer tr:not(.tab-vuota) td.mid { text-align: left; }
  #t_dealer td.num { text-align: left; }
  #t_lista td.nota { max-width: none; }
  .tab-vuota { display: block; }
  .tab-vuota td { display: block; }
}