/*
 * AGENDA VISITE — la giornata come TIMELINE (agenda/index, _giorno, _tappa) e la settimana
 * come colpo d'occhio. Design system: navy e corallo, ombre solo dalla scala --shadow-*,
 * una property per riga, mobile-first (il consulente la apre in furgone).
 */

.agenda-page {
  padding: 0.25rem 0 3rem;
}

.app-main:has(.agenda-page) {
  max-width: 1280px;
}

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

.agenda-testa {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.agenda-testa h2 {
  margin: 0.1rem 0 0.25rem;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.agenda-lead {
  margin: 0;
  max-width: 56ch;
  color: var(--gray-text);
  font-size: 0.92rem;
}

.agenda-controlli {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.agenda-consulenti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* ---------- I giorni: frecce, striscia scorrevole, salto a una data ---------- */

/* Due gruppi sulla stessa riga: le frecce abbracciano la striscia (larga quanto i suoi giorni,
   non quanto lo schermo), e subito accanto il calendario e "Oggi". Sul telefono vanno a capo. */
.agenda-navigazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.1rem;
}

.agenda-scorri {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.agenda-freccia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--navy);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.agenda-freccia:hover {
  border-color: var(--navy);
  background: var(--azure-soft);
}

.agenda-freccia .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.agenda-giorni {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
  overflow-x: auto;
  padding: 0.25rem 0.1rem;
  scrollbar-width: thin;
}

.agenda-salti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.agenda-vai {
  margin: 0;
}

.agenda-oggi-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--corallo);
  color: var(--corallo-dark);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.agenda-oggi-btn:hover {
  background: var(--corallo-soft);
}

.agenda-giorno-chip {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  min-width: 76px;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-small);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.agenda-giorno-chip:hover {
  transform: translateY(-2px);
  border-color: var(--navy);
  box-shadow: var(--shadow-1);
}

.agenda-giorno-chip.is-attivo {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #ffffff;
  box-shadow: var(--shadow-2);
}

.agenda-giorno-chip.is-oggi:not(.is-attivo) {
  border-color: var(--corallo);
}

.agenda-giorno-chip.is-vuoto:not(.is-attivo) {
  opacity: 0.55;
}

.agenda-giorno-chip-nome {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agenda-giorno-chip-data {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.agenda-giorno-chip-mese {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-logo);
}

.agenda-giorno-chip.is-attivo .agenda-giorno-chip-mese {
  color: rgba(255, 255, 255, 0.8);
}

.agenda-giorno-chip-n {
  font-size: 0.68rem;
  color: var(--gray-text);
}

.agenda-giorno-chip.is-attivo .agenda-giorno-chip-n {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Il sommario della giornata ---------- */

.agenda-sommario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.agenda-sommario-numeri {
  display: grid;
  gap: 0.05rem;
}

.agenda-sommario-n {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.agenda-sommario-numeri.is-valore .agenda-sommario-n {
  color: var(--semaforo-verde);
}

.agenda-sommario-label {
  font-size: 0.72rem;
  color: var(--gray-text);
}

.agenda-maps {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  min-height: 42px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--gradient-brand);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.agenda-maps:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.agenda-maps .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.agenda-attenzione,
.agenda-suggerimento {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-small);
  font-size: 0.86rem;
  line-height: 1.45;
}

.agenda-attenzione {
  background: var(--corallo-soft);
  color: var(--corallo-dark);
  font-weight: 600;
}

.agenda-suggerimento {
  background: var(--azure-soft);
  color: var(--navy);
}

.agenda-attenzione .icon,
.agenda-suggerimento .icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin-top: 0.1rem;
}

/* ---------- La timeline ---------- */

.agenda-giornata {
  display: grid;
  gap: 1.2rem;
  align-items: start;
}

.agenda-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.05rem;
  list-style: none;
  display: grid;
  gap: 0.2rem;
}

/* La linea del giro: parte dal primo numero e finisce sull'ultimo. */
.agenda-timeline::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 1.6rem;
  bottom: 1.6rem;
  width: 2px;
  background: linear-gradient(var(--navy) 0%, var(--navy-bright) 100%);
  opacity: 0.25;
}

.agenda-tappa {
  position: relative;
}

.agenda-tratto {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.15rem 0 0.15rem 2.4rem;
  font-size: 0.74rem;
  color: var(--gray-logo);
}

.agenda-tratto-testo {
  padding-left: 0.2rem;
}

.agenda-tratto-avviso {
  margin-left: 0.35rem;
  color: var(--corallo-dark);
}

.agenda-tappa-card {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.9rem 1rem 0.8rem 0;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}

.agenda-tappa-card:hover {
  background: rgba(255, 255, 255, 0.6);
}

.agenda-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  margin-left: -1.05rem;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid var(--bg);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.agenda-tappa.is-fatto .agenda-marker {
  background: var(--semaforo-verde);
}

.agenda-tappa.is-stretta .agenda-marker {
  background: var(--corallo);
}

.agenda-marker.is-popup {
  width: 22px;
  height: 22px;
  margin: 0;
  border-width: 2px;
  border-color: #ffffff;
  font-size: 0.7rem;
}

.agenda-tappa-testo {
  flex: 1 1 auto;
  min-width: 0;
}

.agenda-tappa-ora {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.1rem;
  font-variant-numeric: tabular-nums;
}

.agenda-tappa-ora time {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.agenda-tappa-durata {
  font-size: 0.78rem;
  color: var(--gray-text);
}

.agenda-tappa-chi {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--border-soft);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-text);
}

.agenda-tappa-stato {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--border-soft);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-text);
}

.agenda-tappa-stato.is-fatto {
  background: #e5f3e9;
  color: var(--semaforo-verde);
}

.agenda-tappa-nome {
  margin: 0 0 0.15rem;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.agenda-tappa-nome a {
  color: var(--navy);
  text-decoration: none;
}

.agenda-tappa-nome a:hover {
  color: var(--corallo-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agenda-tappa-dove {
  margin: 0;
  font-size: 0.84rem;
  color: var(--gray-text);
}

.agenda-tappa-segni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
}

.agenda-segno {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--azure-soft);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--navy);
}

.agenda-segno.is-valore {
  background: #e5f3e9;
  color: var(--semaforo-verde);
}

.agenda-segno-nota {
  font-size: 0.66rem;
  font-weight: 500;
  opacity: 0.8;
}

.agenda-tappa-nota {
  margin: 0.45rem 0 0;
  padding-left: 0.65rem;
  border-left: 2px solid var(--border);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gray-text);
}

.agenda-tappa-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.agenda-azione {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.agenda-azione:hover {
  border-color: var(--navy);
  background: var(--azure-soft);
}

.agenda-azione.is-primaria {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.agenda-azione.is-primaria:hover {
  background: var(--navy-bright);
}

.agenda-azione .icon {
  width: 1rem;
  height: 1rem;
}

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

.agenda-mappa-blocco {
  position: sticky;
  top: calc(var(--header-height) + 0.6rem);
  display: grid;
  gap: 0.4rem;
}

.agenda-mappa {
  height: min(66vh, 620px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  /* Leaflet mette i suoi strati a z-index 400-700: senza un contesto proprio, sul tablet (mappa
     sotto la barra dei giorni) coprivano il pannello del calendario (review PR #135). */
  isolation: isolate;
  background: var(--border-soft);
}

.agenda-mappa-nota {
  margin: 0;
  font-size: 0.7rem;
  color: var(--gray-logo);
}

.agenda-popup {
  display: grid;
  gap: 0.35rem;
  font-family: inherit;
}

.agenda-popup-nome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.95rem;
}

.agenda-popup-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--gray-text);
}

.agenda-popup-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.agenda-popup-link {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}

.agenda-popup-link.is-primo {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.agenda-vuoto {
  display: grid;
  justify-items: start;
  gap: 0.7rem;
}

.agenda-nota {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--gray-text);
}

.agenda-nota-link {
  color: var(--navy);
  font-weight: 600;
}

@media (min-width: 40rem) {
  .agenda-testa {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .agenda-controlli {
    justify-content: flex-end;
  }
}

@media (min-width: 64rem) {
  .agenda-giornata {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-giorno-chip,
  .agenda-maps,
  .agenda-tappa-card,
  .agenda-azione {
    transition: none;
  }
}

/* ---------- La settimana, come Google Calendar ---------- */
/* La colonna delle ore a sinistra e sette giorni. Ogni visita e' un blocco alla sua ora e alto
   quanto dura: --inizio, --durata, --corsia e --corsie li scrive agenda_settimana_controller,
   l'altezza di un'ora vive solo qui (--agenda-ora). Le linee delle ore sono lo sfondo delle
   colonne, non elementi. Sul telefono il foglio scorre di lato: sette giorni stretti non si
   leggono. Testata, frecce e totale riusano quelli del mese. */

.agenda-sett {
  --agenda-ora: 3.4rem;
  --agenda-gronda: 3.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.agenda-sett-scorri {
  overflow-x: auto;
}

.agenda-sett-foglio {
  min-width: 46rem;
}

.agenda-sett-intesta,
.agenda-sett-corpo {
  display: grid;
  grid-template-columns: var(--agenda-gronda) repeat(7, minmax(0, 1fr));
}

.agenda-sett-intesta {
  border-bottom: 1px solid var(--border);
}

.agenda-sett-giorno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.25rem 0.5rem;
  border-left: 1px solid var(--border-soft);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease;
}

.agenda-sett-giorno:hover {
  background: var(--azure-soft);
}

.agenda-sett-giorno-nome {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.agenda-sett-giorno-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.agenda-sett-giorno.is-passato .agenda-sett-giorno-numero {
  color: var(--gray-logo);
}

.agenda-sett-giorno.is-oggi .agenda-sett-giorno-nome {
  color: var(--navy);
}

.agenda-sett-giorno.is-oggi .agenda-sett-giorno-numero {
  background: var(--navy);
  color: #ffffff;
}

.agenda-sett-giorno-zone {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--corallo-dark);
}

.agenda-sett-corpo {
  position: relative;
  height: calc(var(--agenda-ore, 12) * var(--agenda-ora));
}

.agenda-sett-ore {
  position: relative;
}

/* L'etichetta sta sulla linea dell'ora, come in Google: la prima (08:00) sul bordo alto. */
.agenda-sett-ora {
  display: block;
  height: var(--agenda-ora);
  padding-right: 0.5rem;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  color: var(--gray-text);
  transform: translateY(-0.35rem);
}

.agenda-sett-ora:first-child {
  transform: translateY(0.2rem);
}

.agenda-sett-colonna {
  position: relative;
  border-left: 1px solid var(--border-soft);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--border-soft) 0,
    var(--border-soft) 1px,
    transparent 1px,
    transparent var(--agenda-ora)
  );
}

.agenda-sett-colonna.is-weekend {
  background-color: var(--bg);
}

.agenda-sett-colonna.is-oggi {
  background-color: var(--azure-soft);
}

.agenda-sett-evento {
  --colore-evento: var(--navy-bright);
  position: absolute;
  top: calc(var(--inizio, 0) * var(--agenda-ora) + 1px);
  left: calc(var(--corsia, 0) * (100% - 6px) / var(--corsie, 1) + 3px);
  width: calc((100% - 6px) / var(--corsie, 1) - 2px);
  height: calc(var(--durata, 0.75) * var(--agenda-ora) - 2px);
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-height: 1.4rem;
  padding: 0.25rem 0.4rem;
  overflow: hidden;
  border-left: 3px solid var(--colore-evento);
  border-radius: 6px;
  background: color-mix(in srgb, var(--colore-evento) 14%, var(--surface));
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.agenda-sett-evento:hover {
  z-index: 2;
  box-shadow: var(--shadow-2);
}

.agenda-sett-evento-nome {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-sett-evento-ora,
.agenda-sett-evento-meta {
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gray-text);
}

.agenda-sett-evento.is-breve .agenda-sett-evento-meta {
  display: none;
}

.agenda-sett-evento.is-fatto,
.agenda-sett-evento.is-saltato {
  opacity: 0.6;
}

.agenda-sett-evento.is-saltato .agenda-sett-evento-nome {
  text-decoration: line-through;
}

.agenda-sett-evento.is-fatto {
  border-left-color: var(--semaforo-verde);
}

/* Adesso: la linea corallo col pallino a sinistra, come la rossa di Google. */
.agenda-sett-adesso {
  position: absolute;
  top: calc(var(--inizio, 0) * var(--agenda-ora));
  right: 0;
  left: 0;
  z-index: 3;
  height: 2px;
  background: var(--corallo);
  pointer-events: none;
}

.agenda-sett-adesso[hidden] {
  display: none;
}

.agenda-sett-adesso::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--corallo);
}

@media (prefers-reduced-motion: reduce) {
  .agenda-sett-giorno,
  .agenda-sett-evento {
    transition: none;
  }
}

/* ---------- Il mese, come Google Calendar ---------- */
/* Un foglio bianco solo con le linee sottili fra i giorni (non sette card: il mese si legge
   come una tabella), il numero del giorno in alto, oggi nel cerchio navy, le visite come righe
   «pallino · ora · locale» troncate. Il colore del pallino e' il consulente. */

.agenda-mese-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 0.9rem;
}

.agenda-mese-frecce {
  display: flex;
  gap: 0.35rem;
}

.agenda-mese-nome {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.agenda-mese-nome::first-letter {
  text-transform: uppercase;
}

.agenda-mese-totale {
  font-size: 0.82rem;
  color: var(--gray-text);
}

.agenda-mese {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.agenda-mese-intesta,
.agenda-mese-griglia {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.agenda-mese-intesta span {
  padding: 0.55rem 0 0.45rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--gray-text);
}

.agenda-mese-griglia {
  grid-auto-rows: minmax(7.2rem, auto);
}

.agenda-mese-cella {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 0.3rem 0.3rem 0.4rem;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.agenda-mese-cella:nth-child(7n) {
  border-right: none;
}

.agenda-mese-cella.is-weekend {
  background: var(--bg);
}

.agenda-mese-cella.is-fuori {
  background: var(--border-soft);
}

.agenda-mese-numero {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.15rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.agenda-mese-numero:hover {
  background: var(--azure-soft);
}

.agenda-mese-cella.is-fuori .agenda-mese-numero {
  color: var(--gray-logo);
}

.agenda-mese-cella.is-oggi .agenda-mese-numero {
  background: var(--navy);
  color: #ffffff;
}

.agenda-mese-evento {
  --colore-evento: var(--navy-bright);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.12rem 0.3rem;
  border-radius: 6px;
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease;
}

.agenda-mese-evento:hover {
  background: var(--azure-soft);
}

.agenda-mese-pallino {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--colore-evento, var(--navy-bright));
}

.agenda-mese-ora {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--gray-text);
}

.agenda-mese-locale {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fatta, saltata o rinviata: resta in griglia ma non chiede piu' attenzione. */
.agenda-mese-evento.is-fatto,
.agenda-mese-evento.is-saltato {
  opacity: 0.55;
}

.agenda-mese-evento.is-saltato .agenda-mese-locale {
  text-decoration: line-through;
}

.agenda-mese-evento.is-fatto .agenda-mese-pallino {
  background: var(--semaforo-verde);
}

.agenda-mese-altre {
  align-self: flex-start;
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}

.agenda-mese-altre:hover {
  background: var(--azure-soft);
}

/* I colori dei consulenti: gli accenti del brand, niente tinte inventate. */
.is-colore-0 {
  --colore-evento: var(--navy-bright);
}

.is-colore-1 {
  --colore-evento: var(--corallo);
}

.is-colore-2 {
  --colore-evento: var(--semaforo-verde);
}

.is-colore-3 {
  --colore-evento: var(--semaforo-arancio);
}

.is-colore-4 {
  --colore-evento: #4f8fca;
}

.is-colore-5 {
  --colore-evento: var(--navy-dark);
}

.agenda-mese-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--gray-text);
}

.agenda-mese-legenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.agenda-mese-legenda .agenda-mese-pallino {
  background: var(--colore-evento);
}

/* Sul telefono sette colonne sono strette: restano il numero e i pallini, il nome non ci sta. */
@media (max-width: 40rem) {
  .agenda-mese-griglia {
    grid-auto-rows: minmax(4.2rem, auto);
  }

  .agenda-mese-cella {
    align-items: center;
    padding: 0.2rem 0.1rem;
  }

  .agenda-mese-numero {
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.2rem;
    font-size: 0.74rem;
  }

  .agenda-mese-evento {
    padding: 0.15rem;
  }

  .agenda-mese-ora,
  .agenda-mese-locale {
    display: none;
  }

  .agenda-mese-altre {
    align-self: center;
    padding: 0;
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-mese-numero,
  .agenda-mese-evento {
    transition: none;
  }
}

/* ---------- Spostare o annullare una visita (dentro la card della tappa) ---------- */

.agenda-sposta-blocco {
  display: contents;
  margin: 0;
  min-width: 0;
}

/* «Sposta» e «Modifica» sono due tasti gemelli in fondo alla card: sul telefono un link
   sottolineato da 12 px non si centra col pollice (Mattias 2026-09-16). */
.agenda-sposta-apri {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  box-sizing: border-box;
  line-height: 1.2;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-text);
  cursor: pointer;
  list-style: none;
}

.agenda-sposta-apri::-webkit-details-marker {
  display: none;
}

.agenda-sposta-apri:hover {
  color: var(--navy);
}

.agenda-sposta {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding: 0.55rem;
  border-radius: var(--radius-small);
  background: var(--border-soft);
}

.agenda-sposta .fs-input {
  width: auto;
  max-width: 100%;
  min-width: 8rem;
  font-size: 0.82rem;
}

.agenda-sposta .btn-secondary {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}

.agenda-annulla {
  color: var(--corallo-dark);
}

/* ---------- L'esito dentro la timeline ---------- */
/* Si segna da qui, col telefono in mano appena usciti dal locale: gli stessi quattro
   bottoni della pagina Visite (componente visite/_esiti), solo piu' piccoli. */

.agenda-tappa-esito {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border);
}

.agenda-tappa-esito-titolo {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-logo);
}

.coda-blocco.is-compatto .coda-esiti {
  gap: 0.35rem;
}

.coda-blocco.is-compatto .coda-btn {
  min-height: 52px;
  padding: 0.45rem 0.7rem;
}

.coda-blocco.is-compatto .coda-btn-nome {
  font-size: 0.82rem;
}

.coda-blocco.is-compatto .coda-btn-poi {
  font-size: 0.66rem;
}

/* ---------- Telefono: e' la pagina che si usa in strada ---------- */
/* La mappa va in cima (dove sono, in che ordine), poi la giornata da scorrere col pollice.
   Tutto quello che si tocca sta sopra i 44 px. */

@media (max-width: 64rem) {
  .agenda-mappa-blocco {
    position: static;
    order: -1;
  }

  .agenda-mappa {
    height: 38vh;
    min-height: 220px;
  }
}

@media (max-width: 40rem) {
  .agenda-testa h2 {
    font-size: 1.45rem;
  }

  .agenda-lead {
    display: none;
  }

  .agenda-sommario {
    gap: 1rem;
    padding: 0.8rem 0.9rem;
  }

  .agenda-sommario-n {
    font-size: 1.25rem;
  }

  .agenda-maps {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: center;
  }

  .agenda-timeline {
    padding-left: 0.9rem;
  }

  .agenda-timeline::before {
    left: 0.9rem;
  }

  .agenda-marker {
    margin-left: -0.9rem;
  }

  .agenda-tappa-card {
    gap: 0.6rem;
    padding-right: 0;
  }

  .agenda-tappa-nome {
    font-size: 1.05rem;
  }

  .agenda-azione {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
  }

  .agenda-oggi-btn {
    min-height: 44px;
  }

  .agenda-freccia {
    width: 44px;
    height: 44px;
  }

  .agenda-sposta .fs-input {
    flex: 1 1 45%;
    min-width: 0;
  }
}

/* ==========================================================================
   IL FORM DI UN EVENTO (rifatto il 2026-09-16, Mattias: «migliora il design e la ux della
   creazione nuovo evento»). Si legge come una frase, un passo alla volta: che cosa è, con chi,
   quando, chi ci va. In testa la riga che dice sempre cosa si sta per salvare. Una colonna sola,
   campi grandi: si compila dal telefono in piedi davanti a un locale.
   ========================================================================== */

.app-main:has(.evento-page) {
  max-width: 1280px;
}

.evento-page {
  max-width: 46rem;
  margin-inline: auto;
}

.evento-form {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.2rem;
}

/* La riga in testa: giorno, orario e persone, riscritta a ogni tocco. */
.evento-riepilogo {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--navy);
  color: #ffffff;
}

.evento-riepilogo svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.1rem;
  opacity: 0.85;
}

.evento-riepilogo > span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.evento-riepilogo strong {
  font-size: 1.05rem;
  line-height: 1.3;
}

/* In italiano il mese va minuscolo: si maiuscola solo la prima lettera del giorno. */
.evento-riepilogo strong::first-letter {
  text-transform: uppercase;
}

.evento-riepilogo small {
  font-size: 0.86rem;
  opacity: 0.85;
}

/* Ogni passo è una scheda con il suo numero. Il titolo e' un <legend>, che di suo si appende
   SOPRA il bordo del riquadro e resta fuori dalla scheda: `float` lo riporta dentro, in cima, e il
   corpo del blocco (il div sotto) ricomincia sotto di lui. */
.evento-blocco {
  display: block;
  margin: 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.evento-titolo {
  float: left;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  margin: 0 0 0.9rem;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.evento-corpo {
  clear: both;
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.evento-passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--azure-soft);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--navy);
}

.evento-campo {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.evento-campo > label,
.evento-blocco .picker-label,
.evento-etichetta {
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.evento-campo input[type="text"],
.evento-campo input[type="time"],
.evento-campo select,
.evento-campo textarea,
.evento-dettagli input[type="text"],
.evento-dettagli select,
.evento-dettagli textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--bg);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}

.evento-campo textarea,
.evento-dettagli textarea {
  resize: vertical;
}

/* L'ORA: su iPhone Safari disegna il suo widget, che centra il testo, si tiene una larghezza
   minima sua e sborda dalla scheda — accanto agli altri campi sembrava un pezzo di un'altra
   app (Mattias 2026-09-16: «guarda l'orario, e tutto sballato, il quadrato è una merda»).
   Spento l'aspetto nativo, il campo torna uguale agli altri e resta dentro la scheda; il
   selettore a rotella dell'iPhone si apre lo stesso, perché è il tipo del campo a deciderlo. */
.evento-campo input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  min-height: 2.9rem;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.evento-aiuto {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--gray-text);
}

/* 1. CHE COSA È: tre schede, una riga sola quando c'è spazio. */
.evento-tipi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem;
}

.evento-tipo {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--bg);
  cursor: pointer;
}

.evento-tipo:has(input:checked) {
  border-color: var(--navy);
  background: var(--azure-soft);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.evento-tipo input {
  margin-top: 0.2rem;
}

.evento-tipo-testo {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.evento-tipo-testo strong {
  font-size: 0.95rem;
  color: var(--ink);
}

.evento-tipo:has(input:checked) .evento-tipo-testo strong {
  color: var(--navy);
}

.evento-tipo-testo small {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--gray-text);
}

/* 3. QUANDO: giorno, ora e durata affiancati quando c'è spazio. */
.evento-quando {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  align-items: start;
}

/* Gli orari di sempre, a portata di dito. */
.evento-scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.evento-scelta {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font: inherit;
  font-size: 0.85rem;
  color: var(--navy);
  cursor: pointer;
}

.evento-scelta:hover {
  border-color: var(--navy);
  background: var(--azure-soft);
}

/* 4. CHI CI VA: pastiglie. Chi fa l'evento non compare fra gli altri. */
.evento-persone-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.evento-persona {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.92rem;
  cursor: pointer;
}

.evento-persona:has(input:checked) {
  border-color: var(--navy);
  background: var(--azure-soft);
  font-weight: 700;
  color: var(--navy);
}

/* 5. I dettagli, chiusi finché non servono. */
.evento-dettagli {
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.evento-dettagli > summary {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

.evento-dettagli[open] > summary {
  margin-bottom: 0.9rem;
}

.evento-dettagli .evento-campo + .evento-campo {
  margin-top: 0.9rem;
}

.evento-errori {
  padding: 0.8rem 1rem;
  border: 1px solid var(--corallo);
  border-radius: var(--radius-small);
  background: rgba(224, 90, 72, 0.08);
  color: var(--corallo-dark);
}

.evento-errori ul {
  margin: 0;
  padding-left: 1.1rem;
}

.evento-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.evento-azioni input[type="submit"] {
  cursor: pointer;
}

/* «Elimina» sta fuori dal form (un form dentro un form il browser lo scarta): defilato, in fondo. */
.evento-page > .evento-elimina {
  margin-top: 1rem;
}

.evento-elimina input[type="submit"] {
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  color: var(--corallo-dark);
  cursor: pointer;
}

.evento-elimina input[type="submit"]:hover {
  border-color: var(--corallo);
  background: rgba(224, 90, 72, 0.08);
}

/* Il tasto «Nuovo evento» in testa all'agenda. */
.agenda-nuovo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.agenda-tappa-modifica {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  line-height: 1.2;
  align-self: start;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}

.agenda-tappa-persone {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  color: var(--gray-text);
}

/* «Modifica» e «Sposta» sulla stessa riga, in fondo alla card. */
.agenda-tappa-gestioni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: start;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-soft);
}

/* Chi non sta sul giro del giorno (un impegno, un locale senza indirizzo) ha un pallino al posto
   del numero di tappa. */
.agenda-marker.is-fuori-giro {
  background: var(--border-soft);
  color: var(--gray-text);
}

/* Il «+» del giorno nel mese: compare passandoci sopra (e sempre, sul touch). */
.agenda-mese-cella {
  position: relative;
}

.agenda-mese-aggiungi {
  position: absolute;
  top: 0.15rem;
  right: 0.25rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--azure-soft);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  opacity: 0;
  text-decoration: none;
  transition: opacity 0.12s ease;
}

.agenda-mese-cella:hover .agenda-mese-aggiungi,
.agenda-mese-aggiungi:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .agenda-mese-aggiungi {
    opacity: 1;
  }
}

@media (max-width: 40rem) {
  .evento-blocco,
  .evento-dettagli {
    padding: 1rem;
  }

  .evento-elimina input[type="submit"] {
    width: 100%;
  }

  .evento-azioni input[type="submit"],
  .evento-azioni .btn-secondary {
    flex: 1 1 100%;
    text-align: center;
  }
}
/* Current lead actions share the calendar dates without becoming visits. */
.agenda-follow-ups {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-small);
  background: var(--surface);
}

.agenda-follow-ups h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 16px;
}

.agenda-follow-ups > summary {
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.agenda-follow-up-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.agenda-follow-up-list li + li {
  border-top: 1px solid var(--border-soft);
}

.agenda-follow-up-row {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--navy);
  text-decoration: none;
}

.agenda-follow-up-row:hover {
  background: var(--azure-soft);
}

.agenda-follow-up-time {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.agenda-follow-up-body {
  display: grid;
  gap: 3px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.agenda-follow-up-body small,
.agenda-follow-up-empty {
  color: var(--gray-text);
  font-size: 12px;
}

.agenda-follow-up-status {
  font-size: 12px;
  color: var(--gray-text);
}

.agenda-follow-up-row.is-overdue .agenda-follow-up-status,
.agenda-follow-up-alert a {
  color: var(--danger);
  font-weight: 600;
}

.agenda-follow-up-alert {
  margin: 12px 0;
  font-size: 14px;
}

.agenda-follow-up-week {
  display: grid;
  grid-template-columns: var(--agenda-gronda) repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-soft);
  background: var(--azure-soft);
}

.agenda-follow-up-week > div {
  padding: 5px;
  border-left: 1px solid var(--border-soft);
}

.agenda-follow-up-week-label {
  padding: 8px 3px;
  font-size: 11px;
  color: var(--gray-text);
}

.agenda-follow-up-week-item {
  display: block;
  margin: 3px 0;
  padding: 6px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--navy);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.agenda-follow-up-month {
  position: relative;
  z-index: 2;
  display: block;
  margin: 4px 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 48rem) {
  .agenda-follow-up-row {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
  }

  .agenda-follow-up-status {
    grid-column: 2;
  }

  .agenda-follow-up-month {
    font-size: 10px;
  }
}

/* The shared lead drawer remains inside the calendar, with native modal focus. */
.crm-panel.crm-panel-dialog {
  left: auto;
  bottom: 0;
  margin: 0;
  max-width: 100vw;
  max-height: 100dvh;
  border: 0;
  padding-top: 0;
}

.crm-panel-dialog .crm-panel-bar {
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agenda-panel-name {
  min-width: 0;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.4;
}

.crm-panel-dialog::backdrop {
  background: rgba(13, 27, 51, 0.35);
}

.agenda-follow-up-row.is-completed {
  background: var(--surface);
  color: var(--gray-text);
  border-left: 3px solid var(--semaforo-verde);
}

.agenda-completed-count,
.agenda-completed-detail h4 {
  color: var(--semaforo-verde);
}

.agenda-completed-count {
  display: block;
  margin-top: 4px;
}

.crm-panel-dialog .crm-register,
.crm-panel-dialog .agenda-completed-detail {
  scroll-margin-top: 4.5rem;
}
.agenda-day-loading {
  display: none;
  color: var(--navy);
  font-weight: 650;
}

.agenda-page:has(#agenda-day[busy]) .agenda-day-loading {
  display: block;
}

#agenda-day[busy] {
  opacity: 0.5;
  pointer-events: none;
}

.agenda-context {
  display: block;
  color: var(--corallo-dark);
  font-size: 0.78rem;
  font-weight: 750;
}

.agenda-context.is-client {
  color: var(--navy);
}

.agenda-follow-up-row.is-post-visit,
.agenda-follow-up-week-item.is-post-visit,
.agenda-follow-up-month.is-post-visit {
  border-left: 4px solid var(--corallo);
  background: var(--corallo-soft);
}

.agenda-follow-up-week-item.is-client {
  border-left: 4px solid var(--navy);
  background: var(--azure-soft);
  color: var(--navy);
}

.agenda-priority-issues {
  border-left: 4px solid var(--danger);
}

.agenda-priority-issues header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--danger);
}

.agenda-priority-issues h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agenda-priority-issues > p,
.agenda-call-queue-note {
  color: var(--gray-text);
  font-size: 0.85rem;
  line-height: 1.5;
}

.agenda-priority-issues .agenda-follow-up-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.agenda-more-follow-ups > summary {
  padding: 12px;
  cursor: pointer;
  color: var(--navy);
  font-weight: 650;
}

.agenda-call-queue-note a {
  color: var(--navy);
  font-weight: 650;
  white-space: nowrap;
}

.agenda-tappa-azioni button.agenda-azione {
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.agenda-tappa-esito > summary {
  cursor: pointer;
  padding: 8px 0;
}