/* 🎨 LO STILE DELLE AGENDE — un foglio solo per tutte e tre.
   19/09/2026 ore 09:50, scritto da MASTER su ordine di Pietro: «adesso applichiamo questa
   grafica anche all'agenda normale, idem per ambulatorio, così allineiamo lo stile grafico».

   🎯 COSA FA, ed è solo questo: dà agli snippet e alle righe della giornata la FORMA nuova —
      la carta col bordo colorato a sinistra, l'ora e il nome in evidenza, il resto più piccolo
      e più chiaro, lo stato in una pillola invece che in una riga urlata.
   🚫 COSA NON FA: non tocca i COLORI di casa. Nell'agenda normale il verde resta
      dell'ambulatorio e l'azzurro della medicina del lavoro, perché lì il colore dice di chi è
      la visita e toglierlo vorrebbe dire togliere un'informazione. Chi vuole un fondo diverso
      (la pagina della medicina del lavoro lo vuole azzurro) se lo mette dopo, sopra questo.
   🚫 E non cambia NESSUN contenuto: nessuna parola, nessun comando, niente di quello che
      succede premendo. È un foglio di stile e basta.

   ♻️ PERCHÉ UNO SOLO: perché tre copie divergono in silenzio. Il giorno che si cambia una
      misura qui, cambia nelle tre agende insieme — e nessuno deve ricordarsi delle altre due.
   📌 Lo carica: `agende_studio.html`, `ambulatorio_agenda.html` e la pagina della medicina del
      lavoro (che è la prima servita sotto un altro nome). Se nasce una quarta agenda, si
      aggiunge il link: non si ricopia il foglio. */

/* ── LA CARTA DI UN APPUNTAMENTO NELLA SETTIMANA ────────────────────────────────── */
.week-day .pill,
.cell .pill {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  border: 1px solid #d7e3f0;
  border-left-width: 4px;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 1.42;
  color: #173052;
  box-shadow: 0 1px 2px rgba(6, 44, 116, .05);
}
.week-day .pill:hover { border-color: #16468f; }

/* la prima riga — ora e nome — è quella che si legge da lontano */
.week-day .pill > b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #0b2f63;
  letter-spacing: .01em;
  margin-bottom: 2px;
}
/* chi/cosa viene sotto: più piccolo e più chiaro, ma leggibile */
.week-day .pill > small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #5b7089;
  letter-spacing: 0;
  text-transform: none;
}
/* gli esami: in carattere a larghezza fissa, così le sigle si incolonnano */
.week-day .pill .pill-esami {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  color: #2b4467;
  letter-spacing: .02em;
  margin-top: 3px;
}
/* ⏱ gli orari della visita e 📨 la consegna dell'informativa sono fatti di SERVIZIO: stavano in
   grassetto e pesavano più del nome della persona. Il grassetto è scritto nell'attributo style
   della pagina, quindi qui ci vuole `!important` per forza. */
.week-day .pill .visita-orari,
.week-day .pill .visita-consegna {
  display: block;
  margin-top: 2px;
  font-weight: 400 !important;
  font-size: 10.5px;
  color: #5b7089;
  line-height: 1.35;
}
/* lo stato: una pillola in fondo alla carta */
.week-day .pill .pill-status {
  display: inline-block;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid #d7e3f0;
  border-radius: 999px;
  padding: 2px 7px;
  background: #fff;
}
/* le etichette che l'agenda attacca già restano in riga con lo stato */
.week-day .pill .recall-flag,
.week-day .pill .rev-flag,
.week-day .pill .conf-flag {
  display: inline-block;
  margin: 5px 0 0 6px;
  font-size: 9px;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: 2px 7px;
}
.week-day > .week-summary { padding: 11px 12px 9px; }
.week-day .week-events { padding: 0 10px 10px; }
.week-day .week-summary small { display: block; line-height: 1.5; }
.week-day .btn-bruno { margin-left: 4px; white-space: nowrap; }

/* ── LA GIORNATA APERTA, RIGA PER RIGA ──────────────────────────────────────────── */
/* 🚨 Il difetto che questa parte cura, e si vedeva solo guardando: la riga è una griglia di
   cinque colonne — spunta · ora · META · CHI · comandi — e «meta» (stato e informativa, cioè
   roba di servizio) stava PRIMA e più grande del nome della persona. Si leggeva «Informativa:
   invio email non registrato» in grassetto, e il lavoratore dopo, piccolo e barrato.
   👉 Qui si rimette l'ordine: prima CHI viene, poi com'è messo. */
#dayOverlay .event {
  grid-template-columns: 22px 76px minmax(0, 1.5fr) minmax(0, 1fr) auto !important;
  align-items: start;
  gap: 10px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e6eef7;
}
#dayOverlay .event:hover { background: #f7fbff; }
#dayOverlay .event .day-check { order: 1; margin-top: 3px; }
#dayOverlay .event .time     { order: 2; }
#dayOverlay .event .who      { order: 3; }
#dayOverlay .event .meta     { order: 4; }
#dayOverlay .event .tail     { order: 5; }

#dayOverlay .event .time {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: #16468f;
  line-height: 1.35;
}
/* lo «Storico (29)» sotto l'ora è un dettaglio, non un titolo */
#dayOverlay .event .time * {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #5b7089 !important;
  font-family: inherit;
}
/* chi viene: la cosa più grande della riga */
#dayOverlay .event .who { font-size: 13.5px; color: #173052; line-height: 1.4; }
#dayOverlay .event .who > :first-child {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0b2f63;
  text-decoration: none !important;
}
/* com'è messo: leggero, senza grassetti che gridano */
#dayOverlay .event .meta { font-size: 11px; color: #5b7089; line-height: 1.45; }
#dayOverlay .event .meta * { font-weight: 400 !important; font-size: 11px !important; }

/* ── LA GIORNATA DELL'AMBULATORIO (stessa riga, altro nome di classe) ───────────── */
.gio-riga {
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  box-shadow: 0 1px 2px rgba(6, 44, 116, .05);
}
.gio-riga b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.gio-riga .chi { font-size: 14px; font-weight: 600; color: #0b2f63; }
.gio-riga small { font-size: 11.5px; color: #5b7089; }

/* 📱 dal telefono le carte si prendono col pollice: più alte e con il testo più grande */
@media (max-width: 620px) {
  .week-day .pill { padding: 11px 12px; font-size: 12.5px; margin-bottom: 8px; }
  .week-day .pill > b { font-size: 14px; }
  .week-day .pill > small { font-size: 12px; }
  #dayOverlay .event {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 4px 10px;
  }
  #dayOverlay .event .time { grid-column: 2; }
  #dayOverlay .event .who  { grid-column: 2; }
  #dayOverlay .event .meta { grid-column: 2; }
  #dayOverlay .event .tail { grid-column: 2; }
  #dayOverlay .event .day-check { grid-column: 1; grid-row: 1 / 3; align-self: center; }
}


/* ── 🪪 LA SCHEDA DELLA PERSONA: stretta, non enorme ────────────────────────────────
   Ordine di Pietro, 19/09/2026: «la scheda cliente è enorme, campi larghissimi».
   🎯 Il difetto non è la quantità di campi — servono tutti — è che ognuno era largo quanto la
      finestra: un codice fiscale sono 16 caratteri e occupava 600 pixel, e per leggere nome,
      nascita e recapiti bisognava scorrere.
   👉 Ogni campo largo quanto il dato che contiene, e le righe piene invece che una per campo.
      Sotto i 900 px torna tutto a una colonna: là lo spazio non c'è davvero. */
/* 📏 MISURATO, non a occhio: nella finestra larga i campi diventavano
      indirizzo 620 px · email 592 · nome e cognome 382 ciascuno. Un nome non sono 382 pixel.
      Le righe erano a frazioni (`1fr`), quindi ogni campo cresceva insieme alla finestra.
   👉 Adesso le colonne si misurano in CARATTERI: un campo è largo quanto il dato che contiene.
      Sotto i 680 px resta la regola loro, che rimette tutto a una colonna. */
.an-blocco { max-width: 760px; }
.an-riga.nomi  { grid-template-columns: minmax(0, 22ch) minmax(0, 22ch) !important; }
.an-riga.rec   { grid-template-columns: 17ch minmax(0, 32ch) auto !important; }
.an-riga.resid { grid-template-columns: minmax(0, 44ch) 15ch !important; }
.an-riga.cf    { grid-template-columns: 20ch 152px 84px minmax(0, 24ch) !important; }
@media (max-width: 680px) {
  .an-riga { grid-template-columns: 1fr !important; }
  .an-blocco { max-width: none; }
}

/* la fisarmonica delle richieste: chiusa, la testata si preme */
.ri-testa { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ri-testa .ri-freccia { margin-left: 6px; color: #5b7089; font-size: 12px; }
.ri-testa .ri-stato { margin-left: auto; }

/* la traccia del Customer Care: righe fitte, si leggono in fila */
.sv-riga-traccia { margin-bottom: 6px; }
.sv-riga-traccia b { display: block; font-size: 13px; color: #0b2f63; }
.sv-riga-traccia span span { font-size: 12px; color: #40566f; line-height: 1.45; }


/* ── 🔲 LE CINQUE TESSERE DELLA SCHEDA: quadrate, strette, in una riga ──────────────
   Ordine di Pietro, 19/09/2026, con un esempio davanti (le carte di «Risorse Umane»):
   «quegli accordion mettili come dei pannelli quadrati uno accanto all'altro, con un po' di
   grafica carina, ma più stretti, quadrati — tutti e 5 su una riga, che se cliccati aprono
   l'accordion e se ricliccati lo richiudono».
   🎯 Cinque cose della stessa persona, quindi cinque riquadri uguali: chi guarda capisce in un
      colpo che sono cinque strade, non un elenco in cui una conta più delle altre.
   📐 Quadrati per davvero (`aspect-ratio: 1`), con un minimo per non schiacciare le parole, e
      l'icona grande in alto come nell'esempio. Sotto i 760 px diventano tre per riga: cinque
      quadrati su un telefono sarebbero cinque francobolli. */
.sv-tre {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 12px 0 0 !important;
}
.sv-tessera {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px !important;
  aspect-ratio: 1 / 1;
  min-height: 132px;
  padding: 12px !important;
  border: 1px solid #dce4ef;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.sv-tessera:hover { border-color: #16468f; transform: translateY(-1px);
                    box-shadow: 0 6px 16px rgba(6, 44, 116, .10); }
/* l'icona: un quadrato colorato, grande, come nell'esempio che Pietro ha mandato */
.sv-tessera .ico {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: #e8f0fb;
  color: #16468f;
  flex: none;
}
.sv-tessera .ico svg { width: 20px; height: 20px; }
.sv-tessera .t { display: block; min-width: 0; }
.sv-tessera .t b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #0b2f63;
  line-height: 1.25;
  margin-bottom: 3px;
}
/* ⚠️ il sottotitolo VA A CAPO, non si taglia: nella prima versione restava su una riga sola e
   usciva dal bordo («le aziende che l'hanno m…»). Tre righe bastano per tutti e cinque, e la
   parola non si spezza a metà. */
.sv-tessera .t small {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  font-size: 11px;
  color: #5b7089;
  line-height: 1.32;
}
/* quella aperta si riconosce senza leggere */
.sv-tessera[aria-pressed="true"] {
  border-color: #16468f;
  background: #f2f7fd;
  box-shadow: 0 0 0 1px #16468f inset;
}
.sv-tessera[aria-pressed="true"] .ico { background: #16468f; color: #fff; }
/* un colore per ognuna, come nell'esempio: si riconoscono di lato, senza leggere */
.sv-tessera[data-apre="care"] .ico      { background: #e7f5f7; color: #0f6f7f; }
.sv-tessera[data-apre="visite"] .ico    { background: #e8f5ec; color: #166534; }
.sv-tessera[data-apre="aziende"] .ico   { background: #efeafb; color: #5b3fa8; }
.sv-tessera[data-apre="conto"] .ico     { background: #fdf3e2; color: #8a5a06; }
.sv-tessera[data-apre="richieste"] .ico { background: #e8f0fb; color: #16468f; }
.sv-tessera[aria-pressed="true"][data-apre="care"] .ico      { background: #0f6f7f; color: #fff; }
.sv-tessera[aria-pressed="true"][data-apre="visite"] .ico    { background: #166534; color: #fff; }
.sv-tessera[aria-pressed="true"][data-apre="aziende"] .ico   { background: #5b3fa8; color: #fff; }
.sv-tessera[aria-pressed="true"][data-apre="conto"] .ico     { background: #8a5a06; color: #fff; }

@media (max-width: 760px) {
  .sv-tre { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sv-tessera { aspect-ratio: auto; min-height: 96px; }
}