/* La demo dell'agenda: tutto sotto .demo-agenda; ciò che va nei fogli (fuori dal
   contenitore) ha classi che iniziano con «agenda-». Solo var(--…); i colori delle
   persone arrivano dai dati, nello style dei blocchi. */

.demo-agenda {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}
.demo-agenda .demo-segmentato {
  margin: 0;
}
.demo-agenda .demo-segmentato button {
  min-height: 2.75rem;
}

/* La striscia dei giorni: oggi in rosso, il giorno scelto pieno. */
.demo-agenda .ag-striscia {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  background: var(--superficie);
  border-radius: var(--raggio-lg);
  padding: 0.25rem;
}
.demo-agenda .ag-giorni {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.demo-agenda .ag-freccia {
  flex: none;
  width: 2rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--raggio-sm);
  background: none;
  font: inherit;
  font-size: 1.375rem;
  color: var(--accento);
  cursor: pointer;
}
.demo-agenda .ag-giorno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  min-height: 3.5rem;
  min-width: 0;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--inchiostro);
  cursor: pointer;
}
.demo-agenda .ag-sigla {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tenue);
}
.demo-agenda .ag-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
}
.demo-agenda .ag-giorno.oggi .ag-numero {
  color: var(--negativo);
  font-weight: 700;
}
.demo-agenda .ag-giorno.scelto .ag-numero {
  background: var(--inchiostro);
  color: #ffffff;
  font-weight: 700;
}
.demo-agenda .ag-giorno.oggi.scelto .ag-numero {
  background: var(--negativo);
  color: #ffffff;
}

.demo-agenda .ag-titolo-giorno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.demo-agenda .ag-titolo-giorno h4 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.demo-agenda .ag-link {
  flex: none;
  min-height: 2.75rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accento-scuro);
  cursor: pointer;
}
.demo-agenda .ag-link:hover {
  text-decoration: underline;
}

/* Chi lavora oggi, chi è a riposo, il salone chiuso a righe. */
.demo-agenda .ag-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  font-size: 0.875rem;
}
.demo-agenda .ag-chi {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
}
.demo-agenda .ag-riposo {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--superficie-alta);
  color: var(--tenue);
  font-size: 0.8125rem;
  font-weight: 600;
}
.demo-agenda .ag-chiuso {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--raggio-md);
  background-color: var(--superficie);
  background-image: repeating-linear-gradient(
    135deg,
    var(--superficie-alta) 0 6px,
    transparent 6px 12px
  );
  color: var(--tenue);
  font-weight: 700;
  font-size: 0.875rem;
}
.demo-agenda .ag-nuovo {
  width: 100%;
}
.demo-agenda .ag-piu {
  font-size: 1.375rem;
  line-height: 1;
}
.demo-agenda .ag-nota {
  margin: 0;
  font-size: 0.75rem;
  color: var(--tenue);
}
.demo-agenda .ag-tenue {
  color: var(--tenue);
  font-size: 0.875rem;
}

/* La griglia del giorno: scorre in orizzontale DENTRO la scheda, mai la pagina. */
.demo-agenda .ag-griglia {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--superficie);
  border-radius: var(--raggio-lg);
  -webkit-overflow-scrolling: touch;
}
.demo-agenda .ag-griglia:focus-visible {
  outline-offset: -3px;
}
.demo-agenda .ag-tela {
  position: relative;
  display: grid;
  grid-template-rows: 2.75rem auto;
  padding-bottom: 0.75rem;
}
.demo-agenda .ag-testa-col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 0;
  padding: 0 0.25rem;
  border-bottom: 1px solid var(--bordo);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.demo-agenda .ag-angolo {
  border-bottom: 1px solid var(--bordo);
}
.demo-agenda .ag-pallino {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
}
.demo-agenda .ag-ore {
  position: relative;
}
.demo-agenda .ag-ora {
  position: absolute;
  right: 0.375rem;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tenue);
}
.demo-agenda .ag-ora:first-child {
  transform: none;
}
.demo-agenda .ag-colonna {
  position: relative;
  border-left: 1px solid var(--superficie-alta);
  /* Una riga ogni ora: 88px come PX_ORA in agenda.js. */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--superficie-alta) 0 1px,
    transparent 1px 88px
  );
  cursor: pointer;
}
.demo-agenda .ag-fuori {
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--sfondo);
  background-image: repeating-linear-gradient(
    135deg,
    var(--superficie-alta) 0 6px,
    transparent 6px 12px
  );
  cursor: default;
}
.demo-agenda .ag-fuori span {
  display: block;
  padding: 0.5rem 0.25rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tenue);
}

/* I blocchi: tondi, nel colore di chi lo fa (tinta chiara + filo a sinistra). */
.demo-agenda .ag-blocco {
  position: absolute;
  left: 0.1875rem;
  right: 0.1875rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 0.125rem 0.375rem;
  border: 0;
  border-left: 4px solid;
  border-radius: 0.625rem;
  font: inherit;
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--inchiostro);
  text-align: left;
  cursor: pointer;
}
.demo-agenda .ag-blocco:hover {
  box-shadow: var(--ombra);
}
.demo-agenda .ag-blocco:focus-visible {
  outline-offset: 0;
  z-index: 3;
}
.demo-agenda .ag-spento {
  left: 50%;
  z-index: 2;
  border: 1px dashed var(--bordo-campo);
  border-left: 4px solid;
  color: var(--tenue);
}
.demo-agenda .ag-blocco-riga {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-agenda .ag-forte {
  font-weight: 700;
}
.demo-agenda .ag-blocco .ag-tenue {
  font-size: 0.6875rem;
}
.demo-agenda .ag-barrato {
  text-decoration: line-through;
}
.demo-agenda .ag-stato {
  font-weight: 700;
}
.demo-agenda .ag-positivo {
  color: var(--positivo);
}
.demo-agenda .ag-negativo {
  color: var(--negativo);
}
.demo-agenda .ag-attenzione {
  color: var(--attenzione);
}
.demo-agenda .ag-accento {
  color: var(--accento-scuro);
}
.demo-agenda .ag-neutro {
  color: var(--tenue);
}

/* La riga «Adesso»: rossa, ferma, sopra le colonne. */
.demo-agenda .ag-adesso {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  height: 0;
  pointer-events: none;
}
.demo-agenda .ag-adesso-ora {
  flex: none;
  width: 2.75rem;
  padding: 0.0625rem 0;
  border-radius: 999px;
  background: var(--negativo);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 800;
  text-align: center;
  transform: translateY(0);
}
.demo-agenda .ag-adesso-filo {
  flex: 1;
  height: 2px;
  background: var(--negativo);
}

/* La vista settimana, semplice. */
.demo-agenda .ag-settimana {
  display: grid;
  gap: 0.75rem;
}
.demo-agenda .ag-sett-giorno {
  background: var(--superficie);
  border-radius: var(--raggio-lg);
  overflow: hidden;
}
.demo-agenda .ag-sett-giorno .ag-chiuso {
  border-radius: 0;
}
.demo-agenda .ag-sett-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
}
.demo-agenda .ag-sett-titolo {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}
.demo-agenda .ag-sett-titolo.oggi {
  color: var(--negativo);
}
.demo-agenda .ag-vuoto {
  margin: 0;
  padding: 0 1rem 0.75rem;
}
.demo-agenda .ag-righe {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--superficie-alta);
}
.demo-agenda .ag-righe > li + li {
  border-top: 1px solid var(--superficie-alta);
}
.demo-agenda .ag-riga {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.demo-agenda .ag-riga:hover {
  background: var(--sfondo);
}
.demo-agenda .ag-riga:focus-visible {
  outline-offset: -3px;
}
.demo-agenda .ag-riga-ora {
  flex: none;
  width: 2.75rem;
  font-weight: 800;
}
.demo-agenda .ag-cresce {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.demo-agenda .ag-una-riga {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pezzi comuni fuori dal contenitore (nei fogli). */
.pastiglia.agenda-neutro {
  background: var(--superficie-alta);
  color: var(--tenue);
}
.pastiglia.agenda-pastiglia {
  flex: none;
  max-width: 9rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.25rem 0.625rem;
}
.demo-iniziali.agenda-piccole {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.6875rem;
}

/* Il foglio dell'appuntamento. */
.agenda-foglio {
  display: grid;
  gap: 0.75rem;
}
.agenda-quando {
  margin: 0;
  font-weight: 600;
}
.agenda-chi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.agenda-servizi {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border-radius: var(--raggio-lg);
  overflow: hidden;
}
.agenda-servizi li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
}
.agenda-servizi li + li {
  border-top: 1px solid var(--superficie-alta);
}
.agenda-totale {
  font-weight: 800;
}
.agenda-tenue {
  color: var(--tenue);
  font-size: 0.875rem;
}
.agenda-nota {
  margin: 0;
  padding: 0.625rem 1rem;
  border-radius: var(--raggio-md);
  background: var(--superficie);
  font-size: 0.9375rem;
}
.agenda-link {
  justify-self: start;
  min-height: 2.75rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accento-scuro);
  cursor: pointer;
  text-align: left;
}
.agenda-link:hover {
  text-decoration: underline;
}
.agenda-incassato {
  margin: 0;
  font-weight: 700;
  color: var(--positivo);
}
.agenda-esito,
.agenda-errore {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: var(--raggio-md);
  font-size: 0.9375rem;
  font-weight: 600;
}
.agenda-esito {
  background: var(--positivo-chiaro);
  color: var(--positivo);
}
.agenda-errore {
  background: var(--negativo-chiaro);
  color: var(--negativo);
}
.agenda-errore[hidden] {
  display: none;
}
.agenda-azioni {
  display: grid;
  gap: 0.5rem;
}
.agenda-due {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.agenda-due .bottone {
  padding: 0 0.75rem;
  font-size: 0.9375rem;
}
.agenda-discreto {
  min-height: 2.75rem;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--negativo);
  cursor: pointer;
}
.agenda-discreto:hover {
  text-decoration: underline;
}
.agenda-conferma-annullo {
  padding: 0.75rem;
  border-radius: var(--raggio-md);
  border: 1px solid var(--negativo);
  background: var(--negativo-chiaro);
  font-size: 0.9375rem;
}
.agenda-conferma-annullo p {
  margin: 0 0 0.625rem;
}
.bottone.agenda-pericolo {
  background: var(--negativo);
}
.bottone.agenda-pericolo:hover {
  background: var(--negativo);
  text-decoration: underline;
}

/* Sposta e Nuovo appuntamento: campi, orari liberi, servizi. */
.agenda-pannello {
  display: grid;
  gap: 0.75rem;
}
.agenda-pannello h4 {
  margin: 0.25rem 0 0;
  font-size: 1rem;
}
.agenda-campo {
  display: grid;
  gap: 0.375rem;
}
.agenda-campo label,
.agenda-etichetta,
.agenda-servizi-scelta legend {
  font-size: 0.875rem;
  font-weight: 600;
}
.agenda-etichetta {
  display: block;
  margin: 0;
}
.agenda-libere {
  display: grid;
  gap: 0.375rem;
}
.agenda-libere p {
  margin: 0;
}
.agenda-gettoni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.agenda-gettone {
  min-width: 4rem;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border: 1.5px solid var(--bordo);
  border-radius: 999px;
  background: var(--superficie);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--inchiostro);
  cursor: pointer;
}
.agenda-gettone[aria-pressed='true'] {
  border-color: var(--accento);
  background: var(--accento);
  color: #ffffff;
}
.agenda-trovati {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border-radius: var(--raggio-md);
  overflow: hidden;
}
.agenda-trovati li.agenda-tenue {
  padding: 0.625rem 0.875rem;
}
.agenda-trovati li + li {
  border-top: 1px solid var(--superficie-alta);
}
.agenda-trovato {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--inchiostro);
  cursor: pointer;
}
.agenda-trovato:hover {
  background: var(--sfondo);
}
.agenda-scelto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: var(--raggio-md);
  background: var(--superficie);
}
.agenda-servizi-scelta {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.agenda-categoria {
  margin: 0.75rem 0 0.25rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
}
.agenda-casella {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.375rem 0.875rem;
  background: var(--superficie);
  cursor: pointer;
}
.agenda-categoria + .agenda-casella {
  border-radius: var(--raggio-md) var(--raggio-md) 0 0;
}
.agenda-casella + .agenda-casella {
  border-top: 1px solid var(--superficie-alta);
}
.agenda-casella:last-of-type,
.agenda-casella:has(+ .agenda-categoria) {
  border-radius: 0 0 var(--raggio-md) var(--raggio-md);
}
.agenda-categoria + .agenda-casella:has(+ .agenda-categoria) {
  border-radius: var(--raggio-md);
}
.agenda-casella input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accento);
  flex: none;
}
.agenda-cresce {
  flex: 1;
  min-width: 0;
}
.agenda-visita {
  margin: 0;
  font-weight: 600;
}
.agenda-chi-scelta {
  margin: 0;
}
.agenda-chi-scelta button {
  min-height: 2.75rem;
}