/* ============================================================
   Deltar CRM - design system (moderno minimal, brand Deltar)
   Un solo posto per tipografia, colori, componenti. Le pagine
   aggiungono solo il layout che e davvero loro.
   ============================================================ */

/* Variabili, font, badge e pill: in base.css (condivisi col mobile). */

/* ---- Reset e base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--bordo-forte) transparent; scrollbar-width: thin; }
body {
  font-family: "Inter", system-ui, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  display: flex;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--accent-testo); }
a:hover { color: var(--accent); }
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bordo-forte); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: #141518;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: width .18s ease, min-width .18s ease;
}
.sidebar-logo {
  position: relative;
  height: 66px;
  border-bottom: 1px solid #232529;
  overflow: hidden;
}
.sidebar-logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .22s ease;
}
.sidebar-logo .logo-full { height: 29px; max-width: calc(100% - 24px); opacity: 1; }
.sidebar-logo .logo-mini { height: 36px; opacity: 0; }
.sidebar-nav { padding: 12px 8px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  color: #a3a6ad;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 480;
  border-radius: 8px;
  transition: background .15s, color .15s, padding .18s;
  overflow: hidden;
  white-space: nowrap;
}
.sidebar-nav a:hover { background: #1e2024; color: #ffffff; }
.sidebar-nav a.attiva { background: var(--accent-soft); color: var(--accent-testo); }
:root[data-theme="day"] .sidebar-nav a.attiva { color: #f5a44d; }
.sidebar-nav a i { font-size: 1.15rem; flex-shrink: 0; }
.sidebar-nav a .nav-label { transition: opacity .12s; overflow: hidden; }

body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-w); min-width: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .sidebar-logo .logo-full { opacity: 0; }
body.sidebar-collapsed .sidebar-logo .logo-mini { opacity: 1; }
body.sidebar-collapsed .sidebar-nav a { justify-content: center; padding: 9px 0; gap: 0; }
body.sidebar-collapsed .sidebar-nav a .nav-label { display: none; }

/* ---- Area principale ---- */
.main-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--bordo);
  padding: 8px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.topbar-left { margin-right: auto; display: flex; align-items: center; }
.chip-topbar {
  background: transparent;
  border: 1px solid var(--bordo);
  color: var(--txt2);
  border-radius: 99px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.chip-topbar:hover { border-color: var(--accent); color: var(--accent-testo); }
main { padding: 22px 24px; flex: 1; }

/* ---- Tipografia tabelle ---- */
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { border-bottom: 1px solid var(--bordo); padding: 9px 10px; text-align: left; color: var(--txt); }
th {
  color: var(--txt3);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--surface-2);
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

/* ---- Bottoni ---- */
.btn, .btn-primario, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: .875rem;
  font-weight: 550;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--bordo-forte);
  background: var(--surface);
  color: var(--txt);
  transition: background .15s, border-color .15s, color .15s, transform .06s;
}
.btn:hover, .btn-ghost:hover { border-color: var(--accent); color: var(--accent-testo); }
.btn:active, .btn-primario:active, .btn-ghost:active { transform: scale(.98); }
.btn-primario { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primario:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--bordo); color: var(--txt2); }
button:disabled { cursor: progress; opacity: .75; }

/* ---- Card ---- */
.card-ds {
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.card-titolo {
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt3);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- Metriche (lista e statistiche) ---- */
.metrica-card {
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--bordo);
}
.metrica-card.principale { background: var(--accent); border-color: var(--accent); }
.metrica-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt3);
}
.metrica-card.principale .metrica-label { color: rgba(255, 255, 255, .8); }
.metrica-valore { font-size: 1.7rem; font-weight: 700; line-height: 1.15; color: var(--txt); }
.metrica-card.principale .metrica-valore { color: #fff; }

/* ---- Form ---- */
input:not([type]), input[type="text"], input[type="number"], input[type="date"],
input[type="search"], input[type="password"], select, textarea {
  background: var(--surface);
  color: var(--txt);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: .875rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---- Barra filtri ---- */
.filtri { margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtri input[name="q"] { min-width: 180px; }
.filtri label {
  color: var(--txt2);
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--bordo);
  border-radius: 99px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.filtri label:hover { border-color: var(--bordo-forte); }
.filtri label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-testo);
}
.filtri button {
  background: transparent;
  color: var(--txt2);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color .15s, color .15s;
}
.filtri button:hover { border-color: var(--accent); color: var(--accent-testo); }

/* Badge e pill: in base.css (condivisi col mobile). */

/* Esito rapido dalla riga lista: compare solo al passaggio del mouse */
.btn-esito-rapido {
  border: 1px solid transparent;
  background: none;
  color: var(--txt3);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, border-color .12s, color .12s;
}
tr:hover .btn-esito-rapido { opacity: 1; }
.btn-esito-rapido:hover { border-color: var(--accent); color: var(--accent-testo); }

/* Toast con Annulla dopo l'esito rapido */
.toast-area {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  font-size: .875rem;
  color: var(--txt);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.toast i { color: var(--ok); }
.toast-annulla-btn {
  border: none;
  background: none;
  color: var(--accent-testo);
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  font-size: .875rem;
}

/* Lista su schermi stretti: restano Tier/Punti, Azienda, Citta e Stato */
@media (max-width: 700px) {
  .col-largo { display: none; }
}

/* Ultimo esito in testata scheda: chi ci ha lavorato per ultimo e quando */
.ultimo-esito {
  font-size: .8rem;
  color: var(--txt3);
  margin-top: 4px;
}
.ultimo-esito.recente { color: var(--accent-testo); font-weight: 600; }

/* Matita per correggere la nota di un esito nello storico */
.btn-matita {
  border: none;
  background: none;
  color: var(--txt3);
  cursor: pointer;
  padding: 1px 4px;
}
.btn-matita:hover { color: var(--accent-testo); }
.att-nota-form { margin-top: 6px; }
.note-salvate { color: var(--ok); }

/* ---- Stati vuoti e avvisi ---- */
.vuoto {
  text-align: center;
  color: var(--txt3);
  padding: 28px 16px;
  font-size: .9rem;
}
.vuoto i { font-size: 1.6rem; display: block; margin-bottom: 6px; color: var(--bordo-forte); }
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: .9rem;
  color: var(--txt);
  border: 1px solid;
}
.banner.arancio { background: var(--accent-soft); border-color: var(--accent); }
.banner.verde { background: var(--ok-soft); border-color: var(--ok); }
.banner i { font-size: 1.1rem; flex-shrink: 0; }
.banner.arancio i { color: var(--accent); }
.banner.verde i { color: var(--ok); }

/* ---- Barre di avanzamento (statistiche) ---- */
.barra {
  height: 6px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
  min-width: 60px;
}
.barra > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

/* ---- Intestazione pagina ---- */
.testata-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.testata-pagina h2 { margin: 0; color: var(--txt); }
.testata-pagina .sotto { font-size: .82rem; color: var(--txt3); margin-top: 1px; }

/* ---- Card collassabili (scheda azienda): ognuno tiene aperte o chiuse le
   card che vuole; la scelta resta in localStorage e vale su ogni azienda. ---- */
.card-collassabile {
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
}
.card-collassabile > summary {
  list-style: none; cursor: pointer; padding: 16px 18px;
  display: flex; align-items: center; gap: 10px;
  font-size: .75rem; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt3);
}
.card-collassabile > summary::-webkit-details-marker { display: none; }
.card-collassabile > summary .box-icona { text-transform: none; }
.card-collassabile > summary i.freccia { margin-left: auto; transition: transform .2s; font-size: 1rem; }
.card-collassabile[open] > summary i.freccia { transform: rotate(90deg); }
.card-collassabile > .card-corpo { padding: 0 18px 18px; }

/* ---- Card contatti / email / persone (scheda): contenuto dentro le collassabili ---- */
.card-email .email-oggetto { font-size: .875rem; margin: 0 0 8px; color: var(--txt); }
.card-email .email-vuoto, .card-email .email-avviso, .card-email .email-errore {
  font-size: .85rem; color: var(--txt2); margin: 0 0 10px;
}
.card-email .email-errore { color: var(--errore); }
.card-email .email-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.card-email .btn-outlook, .card-email .btn-genera, .btn-rigenera {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--radius); padding: 7px 14px;
  font-size: .875rem; font-family: inherit; cursor: pointer;
  text-decoration: none; border: 1px solid var(--bordo);
  transition: background .15s, border-color .15s, color .15s;
}
.card-email .btn-outlook, .card-email .btn-genera {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 550;
}
.card-email .btn-outlook:hover, .card-email .btn-genera:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-rigenera { background: transparent; color: var(--txt2); }
.btn-rigenera:hover { border-color: var(--accent); color: var(--accent-testo); }
.btn-idle { display: inline-flex; align-items: center; gap: 5px; }
.btn-load { display: none; align-items: center; gap: 5px; }
button.htmx-request .btn-idle { display: none; }
button.htmx-request .btn-load { display: inline-flex; }
.spin { animation: ds-spin .8s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Qualifica in chiamata: form con 4 campi */
.card-qualifica label {
  display: block; margin: 0 0 12px; font-size: .85rem; color: var(--txt2);
}
.card-qualifica label input {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--surface-2); color: var(--txt); border: 1px solid var(--bordo);
  border-radius: var(--radius); padding: 8px 10px; font-size: .875rem; margin-top: 4px;
  font-family: inherit; transition: border-color .15s, background .15s;
}
.card-qualifica label input:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
}
.card-qualifica button {
  margin-top: 4px;
}

/* Stato-pill: in base.css (condiviso col mobile). */

/* ---- Storico attivita (scheda) ---- */
.att-riga {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 2px; border-top: 1px solid var(--bordo); font-size: .875rem;
}
.att-riga strong { font-weight: 600; }
.att-riga small { color: var(--txt3); font-size: .78rem; }
.att-note { flex-basis: 100%; color: var(--txt2); font-size: .84rem; margin-left: 24px; }

/* ---- Barra di lavorazione fissa (scheda): chip esito + nota + registra ---- */
.chip-esito {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--bordo-forte); background: var(--surface-2);
  border-radius: 99px; padding: 5px 12px; font-size: .8rem;
  cursor: pointer; color: var(--txt); font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.chip-esito:hover { border-color: var(--accent); color: var(--accent-testo); }
.chip-esito.attivo { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-testo); }
.chip-esito i { font-size: .9rem; }
.barra-esito {
  position: sticky; bottom: 10px; z-index: 40;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius-lg); padding: 9px 12px; margin-top: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
.barra-esito .barra-nota { flex: 1; min-width: 160px; }
.barra-esito button[type=submit]:disabled { opacity: .45; cursor: not-allowed; }

/* Card del giro del giorno in /oggi */
.giro-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 14px; }
.giro-fatte { display: flex; align-items: baseline; gap: 6px; }
.giro-num { font-size: 1.6rem; font-weight: 700; color: var(--accent-testo); }
.giro-et { font-size: .8rem; color: var(--txt3); }
.giro-coda { font-size: .9rem; color: var(--txt2); }

/* ---- Pagina Canovaccio (/canovaccio) ---- */
.canovaccio-nota { color: var(--txt2); font-size: .875rem; max-width: 70ch; margin-bottom: 18px; }
.canovaccio-nota code { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; }
.canovaccio-sezione { margin: 24px 0 12px; font-size: 1rem; }
.canovaccio-blocco { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.canovaccio-blocco-testa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.canovaccio-blocco-testa small { color: var(--txt3); font-size: .78rem; }
.canovaccio-blocco textarea { width: 100%; resize: vertical; }
.note-salvate { color: var(--accent-testo); font-size: .78rem; font-weight: 650; }
.canovaccio-storico { margin-top: 4px; font-size: .82rem; }
.canovaccio-storico summary { cursor: pointer; color: var(--txt2); }
.canovaccio-versione {
  border-left: 2px solid var(--bordo-forte); padding: 6px 0 6px 10px;
  margin-top: 8px; display: flex; flex-direction: column; gap: 4px;
}
.canovaccio-versione p { margin: 0; color: var(--txt2); }
.canovaccio-modifica { margin-top: 10px; }
/* Motivo dell'esito negativo accanto all'esito (storico e feed) */
.att-motivo { color: var(--txt3); }
.giro-attesa { color: var(--txt3); font-size: .82rem; }

/* ---- Card Trattativa (Cantiere 3) ---- */
.card-trattativa .tratt-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-trattativa .tratt-valore { font-weight: 700; color: var(--accent-testo); }
.card-trattativa .tratt-meta { font-size: .8rem; color: var(--txt3); margin: 6px 0 10px; }
.card-trattativa .tratt-azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-trattativa .tratt-form-inline { display: inline-flex; gap: 6px; align-items: center; }
.card-trattativa .tratt-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.card-trattativa .tratt-form label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--txt2); }
.card-trattativa .tratt-form input, .card-trattativa select, .card-trattativa input[type=date] {
  background: var(--surface-2); color: var(--txt); border: 1px solid var(--bordo);
  border-radius: 6px; padding: 6px 9px; font-size: .85rem;
}
.card-trattativa .tratt-check { font-size: .78rem; color: var(--txt2); display: inline-flex; gap: 4px; align-items: center; }
.card-trattativa details summary { cursor: pointer; font-size: .82rem; color: var(--txt2); margin-top: 8px; }
.card-trattativa .tratt-riga-chiusa { font-size: .82rem; color: var(--txt2); padding: 6px 0; border-top: 1px solid var(--bordo); }
.badge-stato.tratt-in_corso { background: var(--accent-soft); color: var(--accent-testo); }
.badge-stato.tratt-offerta_inviata { background: rgba(59,130,246,.14); color: var(--blu); }
.badge-stato.tratt-vinta { background: rgba(99,153,34,.14); color: var(--ok); }
.badge-stato.tratt-persa { background: rgba(226,75,74,.14); color: var(--errore); }

/* ------------------------------ Guida ---------------------------------- */
.guida-indice { position: sticky; top: 14px; font-size: .85rem; }
.guida-indice .guida-indice-titolo { font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--txt2); font-weight: 700;
  margin-bottom: 6px; padding-left: 12px; }
.guida-indice a { display: block; color: var(--txt2); text-decoration: none;
  padding: 5px 12px; border-left: 2px solid var(--bordo); }
.guida-indice a:hover { color: var(--accent-testo); }
.guida-indice a.attiva { color: var(--accent-testo); font-weight: 600;
  border-left-color: var(--accent); background: var(--accent-soft);
  border-radius: 0 7px 7px 0; }
@media (max-width:800px) {
  .guida-indice a { border-left: none; border: 1px solid var(--bordo);
    border-radius: 99px; padding: 4px 11px; }
  .guida-indice .guida-indice-titolo { display: none; }
}
.guida-novita { border-color: var(--accent); }
.novita-voce { display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--bordo); font-size: .9rem; }
.novita-voce:first-of-type { border-top: none; }
.novita-data { font-size: .72rem; font-weight: 700; color: var(--txt2);
  background: var(--surface-2); border-radius: 6px; padding: 2px 8px;
  white-space: nowrap; }
.tag-nuovo-guida { font-size: .62rem; font-weight: 800; letter-spacing: .05em;
  color: #fff; background: var(--accent); border-radius: 5px; padding: 2px 6px; }
.novita-voce .novita-testo { color: var(--txt2); }
.novita-voce .novita-testo strong { color: var(--txt); }
.guida-demo-label { font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--txt2); font-weight: 700;
  margin: 12px 0 7px; display: flex; align-items: center; gap: 7px; }
.guida-demo-label::after { content: ""; flex: 1; height: 1px; background: var(--bordo); }
.guida-demo { border: 1px dashed var(--bordo); border-radius: 10px;
  padding: 12px; background: var(--surface-2); }
.guida-demo .barra-esito { position: static; margin: 0; }
.guida-demo button:disabled { cursor: default; opacity: .9; }
/* Card di Bacheca: stili scoped, minimi, copiati dal <style> locale di
   kanban.html (non spostato) solo per rendere fedele questa demo statica. */
.guida-demo-bacheca .card {
  max-width: 250px; background: var(--surface-2); border: 1px solid var(--bordo);
  border-radius: var(--radius); padding: 8px 10px;
}
.guida-demo-bacheca .card-riga1 { display: flex; align-items: center; gap: 6px; }
.guida-demo-bacheca .card-nome {
  font-size: .875rem; font-weight: 500; color: var(--txt); line-height: 1.3;
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.guida-demo-bacheca .card-tierlet {
  flex-shrink: 0; width: 17px; height: 17px; border-radius: 4px; border: 1px solid;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 600;
}
.guida-demo-bacheca .card-riga2 { margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.guida-demo-bacheca .card-esito {
  font-size: .7rem; color: var(--txt3); display: flex; align-items: center;
  gap: 5px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.guida-demo-bacheca .card-owner {
  margin-left: auto; background: var(--surface); border: 1px solid var(--bordo-forte);
  border-radius: 99px; font-size: .62rem; font-weight: 700; color: var(--txt2);
  padding: 1px 6px; letter-spacing: .04em; flex-shrink: 0;
}
/* Guida: ricerca client-side */
.guida-cerca { display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--bordo); border-radius: 10px;
  background: var(--surface); padding: 8px 13px; margin-bottom: 4px; }
.guida-cerca:focus-within { border-color: var(--accent); }
.guida-cerca i { color: var(--txt2); }
.guida-cerca input { border: none; outline: none; background: transparent;
  font: inherit; font-size: .92rem; color: var(--txt); width: 100%; }
.guida-cerca-conteggio { font-size: .8rem; color: var(--txt2); margin: 0 0 12px 4px; }
.guida-sezione mark { background: var(--accent-soft); color: var(--accent-testo);
  border-radius: 3px; padding: 0 2px; }

/* ---- Aiuto contestuale: "?" nelle testate ---- */
.aiuto-guida { display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--bordo); color: var(--txt2);
  font-size: .8rem; font-weight: 700; text-decoration: none; vertical-align: middle;
  margin-left: 6px; }
.aiuto-guida:hover { border-color: var(--accent); color: var(--accent-testo); }

/* ============================= Giro visite ============================= */
.giro-filtri { display:flex; flex-wrap:wrap; gap:10px; align-items:center;
               margin-bottom:12px; }
.giro-filtri input[type="search"] { flex:1 1 200px; min-width:160px; }
.giro-check { display:inline-flex; align-items:center; gap:6px;
              font-size:.85rem; color:var(--txt2); white-space:nowrap; }
.giro-conta { margin-left:auto; font-size:.8rem; color:var(--txt3); }

.giro-pannello { background:var(--surface); border:1px solid var(--bordo);
                 border-radius:var(--radius-lg); padding:14px 16px;
                 display:flex; flex-direction:column; gap:10px;
                 position:sticky; top:12px; }
.giro-pannello h3 { margin:0; font-size:.95rem; display:flex;
                    align-items:center; gap:6px; }
.giro-vuoto { font-size:.83rem; color:var(--txt3); margin:0; }
.giro-tappe { list-style:none; margin:0; padding:0; display:flex;
              flex-direction:column; gap:4px; counter-reset: tappa; }
.giro-tappe li { display:flex; align-items:center; gap:4px;
                 font-size:.85rem; padding:6px 8px;
                 background:var(--surface-2); border-radius:var(--radius); }
.giro-tappe li::before { counter-increment: tappa; content: counter(tappa) ".";
                         color:var(--txt3); font-weight:650; min-width:1.2em; }
.tappa-nome { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
              white-space:nowrap; }
.tappa-btn { background:none; border:none; cursor:pointer; color:var(--txt3);
             padding:2px; font-size:.95rem; line-height:1; }
.tappa-btn:hover:not(:disabled) { color:var(--txt); }
.tappa-btn:disabled { opacity:.3; cursor:default; }
.giro-campo { display:flex; flex-direction:column; gap:4px;
              font-size:.8rem; color:var(--txt2); }

.giro-popup strong { font-size:.9rem; }
.giro-popup-sotto { font-size:.8rem; color:var(--txt2); margin:3px 0 8px; }
.giro-popup-azioni { display:flex; gap:8px; align-items:center; }
.giro-popup-azioni a { color:var(--accent-testo); }

.giro-riepilogo-ok { font-size:.85rem; background:var(--surface-2);
                     border-radius:var(--radius); padding:10px 12px; }
.giro-riepilogo-ok p { margin:0 0 4px; }
.giro-salto { color:var(--txt2); }