/* rd-data.css — il selettore di date del sito.
   ═══════════════════════════════════════════════════════════════════════════
   Grammatica del prodotto e basta: solo variabili --ds-*, nessun colore
   inventato. Due regole scritte nei token e rispettate qui:

     1. l'accento indica cosa si puo' fare, non decora: nel pannello c'e' UN
        SOLO riempimento pieno arancione, il giorno scelto. "Oggi" e' un velo
        al 10 per cento piu' un puntino, la stessa convenzione gia' decisa in
        disponibilita.css (--fc-today-bg-color: rgba(255,107,0,.10));
     2. l'elevazione e' bordo piu' fondo. Tre superfici: fondo, scheda,
        scheda sollevata.

   Trappola gia' vista quattro volte: una classe su un <button> senza azzerare
   i predefiniti fa comparire la barra chiara col bordo del browser. Qui ogni
   bottone parte da appearance:none, border:0, font:inherit, cursor:pointer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* L'attributo hidden non vince da solo se una regola d'autore impone display:
   dentro questo componente lo si dichiara esplicito. */
.rdv-fw [hidden],
.rdv-pop [hidden] { display: none !important; }

/* ─── il campo ─────────────────────────────────────────────────────────── */

.rdv-fw { display: block; min-width: 0; }
.rdv-box { position: relative; display: block; }

/* il campo visibile tiene le classi del campo che sostituisce (.nl-input,
   .vz-host-in, o nessuna): cosi' resta identico ai suoi vicini di modulo.
   Qui si aggiunge solo lo spazio per l'icona. */
/* Lo spazio a destra e' quello che serve al bottone e alla sua area sensibile:
   e' lo stesso numero, quindi si legge dallo stesso token. */
.rdv-in { padding-right: var(--ds-control-h, 44px); }
.rdv-in::placeholder { color: var(--ds-faint, #8a8a90); opacity: 1; }
.rdv-in.is-nonvalida { border-color: var(--ds-error, #ff6b6b); }

.rdv-apri {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  right: 5px;
  /* Il centraggio NON usa transform, di proposito. tokens.css dichiara
     button:active { transform: scale(0.97) } e al mousedown sostituiva
     translateY(-50%): il bottone scendeva di 17px, il mouseup atterrava
     sull'input e il click non veniva mai emesso sul bottone, quindi il
     pannello non si apriva ne' col mouse ne' col tap. Con il top calcolato
     la posizione a riposo e' identica (meta' del campo meno meta' dei 34px
     di altezza) e il transform resta libero per il feedback di pressione. */
  top: calc(50% - 17px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-r-pill, 999px);
  background: transparent;
  color: var(--ds-dim, #a1a1a8);
  font: inherit;
  line-height: 0;
  cursor: pointer;
  transition: color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease);
}
.rdv-apri:hover { color: var(--ds-accent-text, #ff9d5c); background: rgba(255, 255, 255, .07); }
.rdv-apri:focus-visible { outline: var(--ds-focus, 2px solid #ff9d5c); outline-offset: 2px; }
/* IL BERSAGLIO. Il disegno resta 34x34, perche' il bottone sta DENTRO il campo
   e crescere lo porterebbe sopra al testo. Cresce solo l'area sensibile, a 44:
   il campo riserva gia' 44px di padding a destra proprio per lui (.rdv-in),
   quindi la zona sensibile coincide con lo spazio vuoto che c'e' gia' e non
   ruba il punto d'inserimento del testo.
   Nel pannello, invece, non si tocca niente: li' le misure hanno gia' due
   taglie dichiarate, 34/36/38 sul portatile e 44 nel foglio dal basso del
   telefono (.rdv-pop--foglio), che e' dove si tocca col dito. */
.rdv-apri::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--ds-control-h, 44px));
  height: max(100%, var(--ds-control-h, 44px));
  transform: translate(-50%, -50%);
}

/* tokens.css dichiara button:active { transform: scale(0.97) }. Su un bottone
   tondo di 34px quel 3 per cento restringe anche l'area sensibile, e i clic
   sull'ultimo mezzo pixel del bordo cadono fuori. Qui il feedback di pressione
   non tocca la geometria, cambia solo il fondo: stessa scappatoia che tokens.css
   usa gia' per i controlli di Leaflet. La specificita' (due classi) basta a
   vincere su button:active, senza !important. */
.rdv-apri:active { transform: none; background: rgba(255, 255, 255, .14); }

.rdv-err {
  display: block;
  margin-top: var(--ds-s1, 4px);
  font-size: var(--ds-t-label, 12px);
  font-weight: var(--ds-w-medium, 500);
  line-height: 1.35;
  color: var(--ds-error, #ff6b6b);
}
.rdv-err:empty { display: none; }   /* niente riga vuota quando va tutto bene */

/* solo per chi legge con la voce: il formato lo mostra gia' il segnaposto,
   e una riga d'aiuto sotto ogni campo sfalserebbe le griglie del dossier */
.rdv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── il pannello ──────────────────────────────────────────────────────── */

.rdv-velo {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(4px);
}

.rdv-pop {
  position: fixed;
  z-index: 3001;
  box-sizing: border-box;
  width: 320px;
  max-width: calc(100vw - 16px);
  padding: var(--ds-s3, 12px);
  border: 1px solid var(--ds-line, rgba(255, 255, 255, .12));
  border-radius: var(--ds-r-box, 20px);
  background: var(--ds-surface, #121215);
  box-shadow: var(--ds-sh-modal, 0 18px 40px rgba(0, 0, 0, .45));
  color: var(--ds-text, #f5f5f7);
  font-size: var(--ds-t-body, 14px);
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
}
.rdv-pop * { box-sizing: border-box; }

/* ─── intestazione ─────────────────────────────────────────────────────── */

.rdv-testa {
  display: flex;
  align-items: center;
  gap: var(--ds-s1, 4px);
  margin-bottom: var(--ds-s2, 8px);
}

.rdv-nav {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-r-pill, 999px);
  background: transparent;
  color: var(--ds-dim, #a1a1a8);
  font: inherit;
  line-height: 0;
  cursor: pointer;
  transition: color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease);
}
.rdv-nav:hover:not(:disabled) { color: var(--ds-text, #f5f5f7); background: var(--ds-raised, #1c1c20); }
.rdv-nav:disabled { color: var(--ds-faint, #8a8a90); opacity: .35; cursor: default; }

/* l'intestazione E' il comando che cambia livello: si vede che si preme */
.rdv-zoom {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0 var(--ds-s3, 12px);
  border: 0;
  border-radius: var(--ds-r-pill, 999px);
  background: transparent;
  color: var(--ds-text, #f5f5f7);
  font: inherit;
  font-size: var(--ds-t-card, 16px);
  font-weight: var(--ds-w-bold, 600);
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  transition: background var(--ds-dur-fast) var(--ds-ease);
}
.rdv-zoom:hover:not(:disabled) { background: var(--ds-raised, #1c1c20); }
.rdv-zoom:disabled { cursor: default; }
.rdv-zoom-txt {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;   /* in ro e nl il mese esce minuscolo da Intl */
}

.rdv-nav:focus-visible,
.rdv-zoom:focus-visible,
.rdv-cel:focus-visible,
.rdv-pill:focus-visible {
  outline: var(--ds-focus, 2px solid #ff9d5c);
  outline-offset: 2px;
}

/* ─── le tre griglie ───────────────────────────────────────────────────────
   Div in flex e non <table>: mobile.css riga 279 dichiara
   "table { display:block; overflow-x:auto }" sotto i 768px, e una tabella che
   non e' piu' una tabella perde table-layout:fixed e schiaccia le sette
   colonne contro il bordo sinistro. Visto davvero a 360px, non temuto.
   I ruoli (grid, row, columnheader, gridcell) sono dichiarati nel markup. */

.rdv-gr { display: flex; flex-direction: column; gap: var(--ds-s1, 4px); }
.rdv-riga { display: flex; gap: var(--ds-s1, 4px); }
.rdv-riga > * { flex: 1 1 0; min-width: 0; }

.rdv-th {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--ds-s1, 4px);
  font-size: var(--ds-t-label, 12px);
  font-weight: var(--ds-w-medium, 500);
  color: var(--ds-faint, #8a8a90);
  text-align: center;
  text-transform: lowercase;
  overflow: hidden;
}
.rdv-gr--mesi .rdv-cel { height: 46px; }
.rdv-gr--anni .rdv-cel { height: var(--ds-control-h, 44px); }

/* ─── la casella ───────────────────────────────────────────────────────── */

.rdv-cel {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-r-pill, 999px);
  background: transparent;
  color: var(--ds-text, #f5f5f7);
  font: inherit;
  font-size: var(--ds-t-body, 14px);
  font-weight: var(--ds-w-normal, 400);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.rdv-cel--largo { font-size: var(--ds-t-card, 16px); }
.rdv-cel:hover:not(:disabled) { background: var(--ds-raised, #1c1c20); }
.rdv-cel:disabled { color: var(--ds-faint, #8a8a90); opacity: .3; cursor: default; }

/* oggi: velo al 10 per cento e un puntino. NON un secondo riempimento pieno:
   nella stessa veduta il pieno e' uno solo, ed e' la scelta dell'utente. */
.rdv-cel.is-oggi {
  background: rgba(255, 107, 0, .10);
  font-weight: var(--ds-w-medium, 500);
}
.rdv-cel.is-oggi::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--ds-r-dot, 50%);
  background: var(--ds-accent-text, #ff9d5c);
}

/* la scelta: l'unico pieno del pannello */
.rdv-cel.is-scelto {
  background: var(--ds-accent, #ff6b00);
  color: var(--ds-on-accent, #1a1206);
  font-weight: var(--ds-w-bold, 600);
}
.rdv-cel.is-scelto::after { background: var(--ds-on-accent, #1a1206); }
.rdv-cel.is-scelto:hover { background: #ff8636; }

/* ─── piede ────────────────────────────────────────────────────────────── */

.rdv-piede {
  display: flex;
  align-items: center;
  gap: var(--ds-s2, 8px);
  margin-top: var(--ds-s3, 12px);
  padding-top: var(--ds-s3, 12px);
  border-top: 1px solid var(--ds-line-soft, rgba(255, 255, 255, .08));
}

.rdv-pill {
  appearance: none;
  -webkit-appearance: none;
  min-height: 34px;
  margin: 0;
  padding: 0 var(--ds-s4, 16px);
  border: 1px solid var(--ds-line, rgba(255, 255, 255, .12));
  border-radius: var(--ds-r-pill, 999px);
  background: transparent;
  color: var(--ds-dim, #a1a1a8);
  font: inherit;
  font-size: var(--ds-t-label, 12px);
  font-weight: var(--ds-w-bold, 600);
  cursor: pointer;
  transition: color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}
.rdv-pill:hover {
  color: var(--ds-text, #f5f5f7);
  background: var(--ds-raised, #1c1c20);
  border-color: var(--ds-line-hard, rgba(255, 255, 255, .20));
}
.rdv-pill--chiudi { margin-left: auto; }

/* ─── telefono: foglio dal basso ───────────────────────────────────────────
   Sotto i 560px il pannello smette di inseguire il campo e diventa un foglio
   ancorato al fondo: a 360px non puo' uscire dallo schermo per costruzione,
   non per calcolo. Il ritaglio in basso tiene conto della barra di iPhone. */

.rdv-pop--foglio {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  padding: var(--ds-s4, 16px) var(--ds-s4, 16px) calc(var(--ds-s4, 16px) + env(safe-area-inset-bottom, 0px));
  border-width: 1px 0 0;
  border-radius: var(--ds-r-box, 20px) var(--ds-r-box, 20px) 0 0;
}
.rdv-pop--foglio .rdv-cel { height: var(--ds-control-h, 44px); }
.rdv-pop--foglio .rdv-gr--mesi .rdv-cel { height: 52px; }
.rdv-pop--foglio .rdv-gr--anni .rdv-cel { height: 48px; }
.rdv-pop--foglio .rdv-nav,
.rdv-pop--foglio .rdv-zoom { height: var(--ds-control-h, 44px); }
.rdv-pop--foglio .rdv-pill { min-height: var(--ds-control-h, 44px); }

/* nei ritagli molto stretti (360px e sotto) il mese abbreviato basta a se
   stesso: si toglie spazio ai lati, non alle caselle */
@media (max-width: 380px) {
  .rdv-pop--foglio { padding-left: var(--ds-s3, 12px); padding-right: var(--ds-s3, 12px); }
  .rdv-pop--foglio .rdv-pill { padding: 0 var(--ds-s3, 12px); }
}

/* Chi chiede meno animazioni: il blocco unico sta in tokens.css e azzera la
   durata di ogni transizione del sito. Qui c'era la stessa cosa scritta una
   seconda volta per cinque selettori. */