/* ============================================================
   Le parti del programma che girano nel sito

   L'agenda della pagina iniziale (giornata, settimana, riquadri), i
   promemoria e la scheda del paziente: gli stili sono quelli del
   programma, copiati da public/css/base.css, public/css/home.css,
   public/css/pazienti.css e dal controllo segmentato di Ordito
   (selection.css). Qui niente di nuovo, a parte la cornice della
   finestra e le spunte che si fanno vedere: se il programma cambia
   aspetto, si ricopia da lì.

   Tre differenze, per stare in una pagina del sito:
   - il riquadro sta nella pagina (position: absolute) e scorre insieme
     all'appuntamento, sotto la testata del sito;
   - i campi del riquadro hanno le regole del programma anche se il
     sito ha le sue per il modulo dei contatti (.campo);
   - nelle voci della settimana le righe sono un po' più strette, così
     in un'ora entrano ora, nome e cosa si fa.
   ============================================================ */

/* Due curve del programma che i token del sito non hanno. */
:root {
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
}

/* ---------- La finestra del programma ----------
   Una cornice e, in cima, la barra della testata del programma: lo
   studio e il punto in cui ci si trova. Non un finto browser: nel
   programma la testata è proprio così. */

.programma {
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--elevation-raised);
  overflow: hidden;
  text-align: left;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}
.programma-corpo { padding: var(--sp-24); }
/* Sul telefono la finestra va da bordo a bordo: i denti e le ore hanno tutto lo spazio. */
@media (max-width: 640px) {
  .programma { margin-inline: calc(var(--sp-16) * -1); border-radius: 0; }
  .programma-corpo { padding: var(--sp-12); }
}
.programma-barra {
  display: flex; align-items: center; gap: var(--sp-8);
  min-height: var(--sp-32); padding: var(--sp-6) var(--sp-16);
  background: var(--layer); border-bottom: var(--static-hairline) solid var(--border-subtle);
  font-size: var(--fs-12); color: var(--fg-subtle);
}
.programma-segno {
  width: 13px; height: 15px; flex: none; background: var(--logo-chiaro);
  -webkit-mask: url("../logo.svg") center / contain no-repeat; mask: url("../logo.svg") center / contain no-repeat;
}
.programma-studio { font-weight: var(--fw-medium); color: var(--fg); }
.programma-dove { margin-left: auto; }

.pagina-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-16); flex-wrap: wrap; margin-bottom: var(--sp-20); }
.pagina-titolo { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--fg); }
.pagina-sub { font-size: var(--fs-14); color: var(--fg-subtle); margin-top: var(--sp-2); }

/* ---------- Bottoni (base.css) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: var(--mod-control-h, var(--control-h));
  padding-inline: var(--control-pad-x);
  border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-14); font-weight: var(--fw-medium);
  border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
  position: relative; isolation: isolate;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: transparent; transition: background var(--dur-fast) var(--ease-out); }
.btn:hover:not(:disabled)::after { background: var(--alpha-dark-1); }
.btn:active:not(:disabled)::after { background: var(--alpha-dark-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primario { background: var(--accent-solid); color: var(--on-accent); }
.btn-primario:hover { color: var(--on-accent); }
.btn-secondario { background: var(--surface); color: var(--fg); box-shadow: var(--elevation-flat); }
.btn-secondario:hover { color: var(--fg); }
.btn-pericolo { background: var(--danger-surface); color: var(--danger-fg); }
.btn-fantasma { background: transparent; color: var(--fg-subtle); }
.btn-fantasma:hover:not(:disabled) { color: var(--fg); }
.btn-sm { --mod-control-h: 32px; padding-inline: var(--sp-12); font-size: var(--fs-12); }

.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-32); height: var(--sp-32);
  border: none; background: transparent; color: var(--fg-subtle);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-ico:hover:not(:disabled) { background: var(--surface-hover); color: var(--fg); }

.btn-chiudi {
  background: none; border: none; font-size: var(--fs-20); line-height: 1; color: var(--fg-subtle); cursor: pointer;
  width: var(--sp-32); height: var(--sp-32); border-radius: var(--r-sm); display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-chiudi:hover { background: var(--surface-hover); color: var(--fg); }

.btn-link { background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-12); color: var(--accent-fg); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { color: var(--accent-fg-strong); }
.collegamento { color: var(--accent-fg); }

/* ---------- Schede, testi, stati vuoti (base.css) ---------- */

.sezione-card { background: var(--layer); border-radius: var(--r-lg); box-shadow: var(--elevation-flat); overflow: hidden; }
.sezione-card + .sezione-card { margin-top: var(--sp-16); }
.sezione-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-20);
  border-bottom: var(--static-hairline) solid var(--border-subtle);
}
.sezione-titolo { font-size: var(--fs-12); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); }
.etichetta { display: block; font-size: var(--fs-12); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-subtle); margin-bottom: var(--sp-6); }
.testo-muto { color: var(--fg-subtle); }
.nota-lieve { font-size: var(--fs-12); color: var(--fg-subtle); }
.nascosto { display: none !important; }
.riga { display: flex; align-items: center; gap: var(--sp-8); }
.riga-fine { margin-left: auto; }
.vuoto { padding: var(--sp-48) var(--sp-24); text-align: center; color: var(--fg-subtle); }
.vuoto strong { display: block; color: var(--fg); font-weight: var(--fw-medium); }
.vuoto p { margin-top: var(--sp-4); font-size: var(--fs-14); }
.msg { padding: var(--sp-8) var(--sp-12); border-radius: var(--r-md); font-size: var(--fs-14); border-left: 2px solid; }
.msg-errore { background: var(--danger-surface); color: var(--danger-fg); border-color: var(--danger-solid); }

/* Le righe che entrano una dopo l'altra (scaglione() in utili.js). */
.appare { animation: appare var(--dur-slow) var(--ease-out) both; animation-delay: var(--anim-delay, 0ms); }
@keyframes appare { from { opacity: 0; transform: translateY(var(--sp-6)); } }

/* ---------- Controllo segmentato (Ordito, selection.css) ---------- */

.segmented {
  --seg-count: 3; --seg-index: 0;
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: var(--sp-2); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--elevation-flat);
}
.segmented::before {
  content: ""; position: absolute; z-index: 0;
  inset-block: var(--sp-2); inset-inline-start: var(--sp-2);
  width: calc((100% - var(--sp-4)) / var(--seg-count));
  translate: calc(100% * var(--seg-index)) 0;
  background: var(--bg); border-radius: calc(var(--r-md) - var(--sp-2)); box-shadow: var(--shadow-1);
  transition: translate var(--dur-normal) var(--ease-emphasized);
}
.segmented label {
  position: relative; z-index: 1; display: grid; place-items: center;
  height: calc(var(--control-h) - var(--sp-8)); padding-inline: var(--sp-12);
  font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--fg-subtle);
  cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:hover, .segmented label:has(:checked) { color: var(--fg); }
.segmented label:has(:focus-visible) { outline: 2px solid var(--accent-solid); outline-offset: 1px; border-radius: var(--r-sm); }
.segmented-sm label { height: calc(var(--control-h) - var(--sp-16)); padding-inline: var(--sp-8); font-size: var(--fs-12); }

/* ---------- La giornata (home.css) ---------- */

.giornata-testata { flex-wrap: wrap; gap: var(--sp-12); }
.giornata-comandi { align-items: center; }

/* "Oggi" occupa sempre il suo posto: quando non serve è solo trasparente,
   così le frecce non si spostano. */
.btn-oggi {
  opacity: 0; scale: 0.92; translate: var(--sp-8) 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-out), scale var(--dur-normal) var(--ease-spring),
              translate var(--dur-normal) var(--ease-spring), visibility 0s linear var(--dur-normal);
}
.btn-oggi.visibile { opacity: 1; scale: 1; translate: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* Il giorno nuovo entra dal lato verso cui si sta andando. */
.da-avanti { animation: giorno-da-destra var(--dur-normal) var(--ease-emphasized) both; }
.da-indietro { animation: giorno-da-sinistra var(--dur-normal) var(--ease-emphasized) both; }
@keyframes giorno-da-destra { from { opacity: 0; transform: translateX(var(--sp-16)); } }
@keyframes giorno-da-sinistra { from { opacity: 0; transform: translateX(calc(var(--sp-16) * -1)); } }

.giornata-titolo { display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap; }
.giornata-nome { font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--fg); }

.agenda-voce {
  display: flex; align-items: center; gap: var(--sp-16);
  padding: var(--sp-12) var(--sp-20);
  border-bottom: var(--static-hairline) solid var(--border-subtle);
  text-decoration: none; color: inherit; font-size: var(--fs-14);
  transition: background var(--dur-fast) var(--ease-out);
}
.agenda-voce:last-child { border-bottom: none; }
.agenda-voce:hover { background: var(--surface-hover); color: inherit; }
.agenda-ora { display: flex; flex-direction: column; min-width: 92px; font-variant-numeric: tabular-nums; }
.agenda-ora strong { font-size: var(--fs-16); }
.agenda-ora .testo-muto { font-size: var(--fs-12); }
.agenda-chi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.agenda-chi .testo-muto { font-size: var(--fs-12); }
.agenda-freccia { color: var(--fg-subtle); display: inline-flex; }
.agenda-voce:hover .agenda-freccia { color: var(--accent-fg); }

.agenda-prossimi { padding-top: var(--sp-12); background: var(--bg-subtle); border-top: var(--static-hairline) solid var(--border-subtle); }
.agenda-prossimi > .etichetta { padding-inline: var(--sp-20); }
.agenda-giorno-testa {
  display: flex; align-items: baseline; gap: var(--sp-8); width: 100%;
  padding: var(--sp-8) var(--sp-20); border: none; background: transparent;
  font: inherit; font-size: var(--fs-14); text-align: start; color: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.agenda-giorno-testa:hover { background: var(--surface-hover); }
.agenda-giorno-nome { font-weight: var(--fw-medium); }
.agenda-giorno.libero .agenda-giorno-nome { font-weight: var(--fw-normal); color: var(--fg-subtle); }
.agenda-compatta { padding: var(--sp-6) var(--sp-20) var(--sp-6) var(--sp-32); background: transparent; }
.agenda-compatta .agenda-ora { min-width: var(--sp-48); }
.agenda-compatta .agenda-ora strong { font-size: var(--fs-14); }
.agenda-compatta .agenda-chi { flex-direction: row; align-items: baseline; gap: var(--sp-8); }
.agenda-compatta:last-child { border-bottom: none; }
.agenda-giorno { border-bottom: var(--static-hairline) solid var(--border-subtle); }
.agenda-giorno:last-child { border-bottom: none; padding-bottom: var(--sp-4); }
.agenda-richiami { padding: var(--sp-12) 0 0; background: var(--bg-subtle); border-top: var(--static-hairline) solid var(--border-subtle); }
.agenda-richiami .etichetta { padding-inline: var(--sp-20); }
.agenda-richiamo { background: transparent; }

/* «Oggi», «Domani»: una parola accanto alla data, non un'etichetta. */
.giornata-relativo { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--accent-fg); }

/* Ogni dentista ha il suo colore in agenda. Come nel programma, qui il
   colore è il contenuto e non la veste: non cambia col tema. */
:root {
  --medico-1: #3e63dd; --medico-2: #12a594; --medico-3: #e5701a; --medico-4: #8e4ec6;
  --medico-5: #d6409f; --medico-6: #46a758; --medico-7: #0090ff; --medico-8: #a07553;
  --medico-nessuno: #8b8d98;
}
.medico-1 { --tl-colore: var(--medico-1); } .medico-2 { --tl-colore: var(--medico-2); }
.medico-3 { --tl-colore: var(--medico-3); } .medico-4 { --tl-colore: var(--medico-4); }
.medico-5 { --tl-colore: var(--medico-5); } .medico-6 { --tl-colore: var(--medico-6); }
.medico-7 { --tl-colore: var(--medico-7); } .medico-8 { --tl-colore: var(--medico-8); }
.medico-0 { --tl-colore: var(--medico-nessuno); }

/* Sopra l'agenda: chi lavora nel periodo, col suo colore. Segno e nome, niente pillole. */
.tl-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-16); padding: var(--sp-8) var(--sp-20) 0; font-size: var(--fs-12); color: var(--fg-subtle); }
.tl-legenda-voce { display: inline-flex; align-items: center; gap: var(--sp-6); }
.tl-legenda-voce i { width: 10px; height: 10px; border-radius: 3px; background: var(--tl-colore); flex: none; }
button.tl-legenda-voce {
  border: none; background: none; font: inherit; color: var(--fg); cursor: pointer;
  padding: var(--sp-4) var(--sp-6); margin-inline: calc(var(--sp-6) * -1); border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
button.tl-legenda-voce:hover { background: var(--surface-hover); }
button.tl-legenda-voce[aria-pressed="false"] { color: var(--fg-subtle); text-decoration: line-through; }
button.tl-legenda-voce[aria-pressed="false"] i { background: none; box-shadow: inset 0 0 0 1.5px var(--tl-colore); }
.tl-legenda-nota { margin-left: auto; }

/* Preso sul calendario Google fuori dal gestionale: bordo tratteggiato. */
.tl-google { --tl-colore: var(--warning-solid); }
.tl-voce.tl-google, .agenda-google { border-left-style: dashed; }
.tl-legenda-voce.tl-google i { background: none; border: var(--static-hairline) dashed var(--tl-colore); }

.tl-scroll { max-height: min(62vh, 640px); overflow-y: auto; padding: var(--sp-12) var(--sp-20) var(--sp-12) 0; position: relative; }
.tl { position: relative; margin-left: var(--sp-64); }
.tl-ora { position: absolute; left: 0; right: 0; height: 0; border-top: var(--static-hairline) solid var(--border-subtle); }
.tl-ora span { position: absolute; left: calc(var(--sp-64) * -1); top: -0.6em; width: calc(var(--sp-64) - var(--sp-12)); text-align: right; font-size: var(--fs-12); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.tl-colonna { position: absolute; inset: 0; }

.tl-voce {
  position: absolute; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-md);
  border-left: 3px solid var(--tl-colore);
  background: color-mix(in srgb, var(--tl-colore) 14%, var(--layer));
  color: var(--fg); text-decoration: none; font-size: var(--fs-13, var(--fs-14)); line-height: 1.35;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tl-voce:hover { background: color-mix(in srgb, var(--tl-colore) 24%, var(--layer)); box-shadow: var(--elevation-flat); z-index: 2; color: var(--fg); }
.tl-quando { font-size: var(--fs-12); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.tl-nome { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-nota { font-size: var(--fs-12); color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-compatta { flex-direction: row; align-items: baseline; gap: var(--sp-6); padding-block: var(--sp-2); }

.tl-adesso { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger-solid); z-index: 3; pointer-events: none; }
.tl-adesso::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger-solid); }
.tl-adesso span { position: absolute; left: calc(var(--sp-64) * -1); top: -0.7em; width: calc(var(--sp-64) - var(--sp-12)); text-align: right; font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--danger-fg); background: var(--layer); font-variant-numeric: tabular-nums; }

/* ---------- La settimana (home.css) ---------- */

.home-vista label { padding-inline: var(--sp-12); }
.sett { padding: var(--sp-12) var(--sp-20) var(--sp-16); overflow-x: auto; }
.sett-testa, .sett-griglia { display: grid; grid-template-columns: var(--sp-48) repeat(7, minmax(calc(var(--sp-64) * 1.6), 1fr)); gap: 0; }
.sett-testa { position: sticky; top: 0; z-index: 3; background: var(--layer); }
.sett-giorno {
  display: grid; gap: var(--sp-4); align-content: start; text-align: center;
  padding: var(--sp-6) var(--sp-4); border: none; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-13, var(--fs-14)); color: var(--fg-subtle); text-transform: capitalize;
  border-bottom: var(--static-hairline) solid var(--border-subtle);
}
.sett-giorno:hover { color: var(--fg); }
.sett-giorno.oggi > span:first-child { color: var(--accent-fg); font-weight: var(--fw-medium); }
.sett-tutto-giorno {
  display: block; text-transform: none; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--fs-12); padding: var(--sp-2) var(--sp-6); border-radius: var(--r-sm);
  border-left: 3px dashed var(--warning-solid); background: color-mix(in srgb, var(--warning-solid) 14%, var(--layer)); color: var(--fg);
}
.sett-griglia { padding-top: var(--sp-12); position: relative; user-select: none; }
.sett-ore { position: relative; }
.sett-ore span { position: absolute; right: var(--sp-8); transform: translateY(-50%); font-size: var(--fs-12); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.sett-colonna {
  position: relative;
  border-left: var(--static-hairline) solid var(--border-subtle);
  background-image: repeating-linear-gradient(to bottom, var(--border-subtle) 0 var(--static-hairline), transparent var(--static-hairline) var(--altezza-ora));
}
.sett-colonna.oggi { background-color: color-mix(in srgb, var(--accent-solid) 4%, transparent); }
.sett-voce { cursor: pointer; touch-action: none; line-height: 1.2; padding-block: 3px; }
.sett-spostabile:active { cursor: grabbing; }
.sett-in-volo { cursor: grabbing; z-index: 5; box-shadow: var(--elevation-raised); opacity: 0.92; transition: none; }
.sett-in-gesto, .sett-in-gesto * { cursor: grabbing; }
.sett-aiuto { margin: var(--sp-8) 0 0; font-size: var(--fs-12); }

/* I bordi in alto e in basso di un appuntamento: tirandoli cambiano inizio e fine. */
.sett-maniglia { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }
.sett-maniglia-su { top: 0; bottom: auto; }
.tl-compatta .sett-maniglia { height: 5px; }
.sett-maniglia-su::after { bottom: auto; top: 2px; }
.sett-maniglia::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 3px; margin-left: -9px;
  border-radius: 2px; background: var(--tl-colore); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.sett-voce:hover .sett-maniglia::after, .sett-in-volo .sett-maniglia::after { opacity: 0.7; }

/* Dove cadrebbe un appuntamento (al passaggio) e l'orario scelto (trascinando). */
.sett-fantasma, .sett-selezione {
  position: absolute; z-index: 1; pointer-events: none; box-sizing: border-box;
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-8);
  font-size: var(--fs-12); font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap;
}
.sett-fantasma { background: color-mix(in srgb, var(--accent-solid) 7%, transparent); color: var(--accent-fg); }
.sett-selezione {
  z-index: 4; background: color-mix(in srgb, var(--accent-solid) 18%, var(--layer));
  border-left: 3px solid var(--accent-solid); color: var(--fg); font-weight: var(--fw-medium);
  box-shadow: var(--elevation-flat);
}
.sett-fantasma[hidden], .sett-selezione[hidden] { display: none; }
.sett-selezione { animation: sett-selezione-entra var(--dur-fast) var(--ease-out); }
.sett-selezione-esce { animation: sett-selezione-esce 180ms var(--ease-accelerate) forwards; }
@keyframes sett-selezione-entra { from { opacity: 0.4; } }
@keyframes sett-selezione-esce { to { opacity: 0; transform: scale(0.94); } }

/* Un appuntamento eliminato si fa piccolo e svanisce prima di sparire. */
.tl-voce.voce-esce { animation: voce-esce 260ms var(--ease-accelerate) forwards; pointer-events: none; z-index: 6; }
@keyframes voce-esce { 40% { transform: scale(1.03); } to { opacity: 0; transform: scale(0.85); } }

/* L'ora attuale nella colonna di oggi. */
.sett-adesso { position: absolute; left: 0; right: 0; height: 0; z-index: 3; pointer-events: none; border-top: 2px solid var(--danger-solid); }
.sett-adesso::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger-solid); }
.sett-adesso[hidden] { display: none; }

/* In agenda chi non si è presentato resta al suo posto, più tenue e con il segno. */
.tl-mancata { opacity: .62; }
.tl-mancata .tl-nome { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.tl-mancata .tl-quando { display: inline-flex; align-items: center; gap: var(--sp-4); }

/* ---------- I riquadri (base.css e home.css) ---------- */

.riquadro {
  position: absolute; z-index: 45;     /* nel sito: sotto la testata, che sta a 50 */
  width: min(360px, calc(100vw - var(--sp-16)));
  max-height: calc(100vh - var(--sp-16)); overflow-y: auto;
  padding: var(--sp-16);
  background: var(--layer); color: var(--fg);
  border-radius: var(--r-lg); box-shadow: var(--elevation-overlay);
  font-size: var(--fs-14); line-height: var(--lh-normal); text-align: left;
  opacity: 0;
}
.riquadro.visibile { opacity: 1; animation: riquadro-entra var(--dur-normal) var(--ease-out) both; }
.riquadro.in-uscita { opacity: 0; pointer-events: none; animation: riquadro-esce var(--dur-normal) var(--ease-out) both; }
@keyframes riquadro-entra { from { opacity: 0; transform: translateY(var(--sp-6)) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes riquadro-esce { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--sp-4)) scale(0.98); } }
.riquadro-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-12); margin-bottom: var(--sp-12); }
.riquadro-titolo { font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: 1.3; }
.riquadro-sotto { font-size: var(--fs-13, var(--fs-14)); color: var(--fg-subtle); margin-top: var(--sp-2); }
.riquadro-azioni { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-16); }

.rq-agenda .riquadro-testa .btn-chiudi { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) 0 0; flex: none; }
.riquadro-tipo { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-12); color: var(--fg-subtle); margin-bottom: var(--sp-4); }
.rq-segno { width: 10px; height: 10px; border-radius: 3px; background: var(--tl-colore); }
.rq-segno-google { background: none; border: var(--static-hairline) dashed var(--tl-colore); }
.rq-dati { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6) var(--sp-12); margin: 0; font-size: var(--fs-14); }
.rq-dati:empty { display: none; }
.rq-dati dt { color: var(--fg-subtle); }
.rq-dati dd { margin: 0; overflow-wrap: anywhere; }
.rq-spiega { margin: var(--sp-12) 0 0; font-size: var(--fs-12); color: var(--fg-subtle); line-height: 1.5; }
.rq-spinta { flex: 1; }
.rq-presenza { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-12); padding-top: var(--sp-12); border-top: var(--static-hairline) solid var(--border-subtle); font-size: var(--fs-14); }
.rq-elimina { color: var(--danger-fg); }
.rq-agenda .riquadro-azioni { align-items: center; }
.rq-errore { margin-top: var(--sp-8); }
.rq-proposte { margin: var(--sp-4) 0 0; padding: var(--sp-4); list-style: none; background: var(--bg-subtle); border-radius: var(--r-md); }
.rq-proposte[hidden] { display: none; }
.rq-proposte li { display: flex; justify-content: space-between; gap: var(--sp-8); padding: var(--sp-6) var(--sp-8); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-14); }
.rq-proposte li span { color: var(--fg-subtle); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.rq-proposte li[aria-selected="true"], .rq-proposte li[role="option"]:hover { background: var(--surface-hover); }
.rq-proposte .rq-nessuno { color: var(--fg-subtle); cursor: default; }

/* I campi del riquadro, come nel programma: il sito ha i suoi per il modulo
   dei contatti, e qui non devono valere. */
.riquadro .campo { display: block; margin-bottom: var(--sp-12); }
.riquadro .campo:last-child { margin-bottom: 0; }
.riquadro .campo > label { display: block; font-size: var(--fs-12); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-subtle); margin-bottom: var(--sp-6); }
.riquadro .label-req::after { content: " *"; color: var(--danger-fg); }
.riquadro .campo input, .riquadro .campo select {
  width: 100%; min-height: var(--control-h);
  padding: var(--sp-8) var(--sp-12);
  background: var(--bg); color: var(--fg);
  border: var(--static-hairline) solid var(--border); border-radius: var(--r-md); box-shadow: none;
  font: inherit; font-size: var(--fs-14);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.riquadro .campo input:hover, .riquadro .campo select:hover { border-color: var(--border-strong); box-shadow: none; }
.riquadro .campo input:focus, .riquadro .campo select:focus { border-color: var(--accent-border-strong); }
.riquadro .campo input::placeholder { color: var(--fg-subtle); opacity: 0.75; }
.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }

/* ---------- La scheda del paziente (pazienti.css) ---------- */

.paziente-testata { display: flex; align-items: flex-start; gap: var(--sp-16); flex-wrap: wrap; margin-bottom: var(--sp-16); }
.paziente-avatar {
  display: grid; place-items: center; width: var(--sp-48); height: var(--sp-48); flex-shrink: 0; overflow: hidden;
  border-radius: var(--r-full); color: var(--bg); font-size: var(--fs-16); font-weight: var(--fw-medium);
}
.avatar-contenuto { display: grid; place-items: center; width: 100%; height: 100%; }
.paziente-identita { flex: 1; min-width: 200px; }
.paziente-nome { font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--fg); }
.paziente-privacy { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; margin-top: var(--sp-8); }

.cartella-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8);
  margin: 0 0 var(--sp-16); padding: var(--sp-12) var(--sp-16);
  background: var(--layer); border-radius: var(--r-md); box-shadow: var(--elevation-flat);
  border-left: 3px solid var(--warning-solid);
}
.cartella-alert-titolo { font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle); margin-right: var(--sp-4); }
.cartella-alert-sep { color: var(--fg-subtle); }

.sezione-corpo { padding: var(--sp-20); }
@media (max-width: 640px) { .sezione-corpo { padding: var(--sp-12); } }
.cartella-schede { margin-bottom: var(--sp-16); }
.info-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-16); }
.info-campo { font-size: var(--fs-14); }
.info-campo .etichetta { margin-bottom: var(--sp-2); }
.info-campo.larga { grid-column: 1 / -1; }
.testo-allergie { color: var(--danger-fg); font-weight: var(--fw-medium); }
.cartella-piede { margin-top: var(--sp-16); font-size: var(--fs-12); }
.msg-avviso { background: var(--warning-surface); color: var(--warning-fg); border-color: var(--warning-solid); }
.cartella-verifica { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap; margin-bottom: var(--sp-16); }
.anamnesi-verificata { margin-bottom: var(--sp-16); font-size: var(--fs-14); }

/* Odontogramma: la forma dice com'è il dente, il colore da dove viene. */
.odontogramma {
  display: grid; gap: var(--sp-8); padding: var(--sp-16) var(--sp-16) var(--sp-12);
  background: var(--bg-subtle); border-radius: var(--r-lg); box-shadow: var(--elevation-flat);
}
@media (max-width: 640px) { .odontogramma { padding: var(--sp-8); } }
.odontogramma-legenda { display: grid; gap: var(--sp-8); margin-top: var(--sp-12); font-size: var(--fs-12); color: var(--fg-subtle); }
.legenda-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-16); }
.legenda-titolo { color: var(--fg); font-weight: var(--fw-medium); min-width: 7rem; }
.legenda-stati { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); }
.legenda-voce { display: inline-flex; align-items: center; gap: var(--sp-6); }
.dente-svg.dente-legenda { width: auto; height: 24px; }

/* Preventivi e operazioni: colonne condivise da tutte le righe, prezzi e stati allineati. */
#lista-operazioni { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: var(--sp-20); }
#lista-operazioni > * { grid-column: 1 / -1; }
.op-riga, .op-corpo { display: grid; grid-template-columns: subgrid; }
.op-riga { border-bottom: var(--static-hairline) solid var(--border-subtle); transition: background-color var(--dur-fast) var(--ease-out); }
.op-riga:last-child { border-bottom: none; }
.op-riga > * { grid-column: 1 / -1; }
.op-riga:hover, .op-riga:focus-within { background: var(--surface-hover); }
.op-corpo { align-items: center; padding: var(--sp-8) var(--sp-20); }
.op-lato { display: contents; }
.op-testo { min-width: 0; }
.op-voci { font-weight: var(--fw-medium); font-size: var(--fs-14); }
.op-denti { font-weight: var(--fw-normal); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.op-meta { font-size: var(--fs-12); color: var(--fg-subtle); margin-top: var(--sp-2); }
.op-meta .status { font-size: var(--fs-12); }
.op-quando { color: var(--fg); font-weight: var(--fw-medium); }
.op-prezzo { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-8); }
.op-stato { display: flex; justify-content: flex-end; }
.op-pagamento { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-8); font-size: var(--fs-12); }
.prezzo-dopo { font-weight: var(--fw-medium); font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.op-voci, .op-prezzo { transition: opacity var(--dur-normal) var(--ease-out); }
.op-rifiutata .op-voci, .op-rifiutata .op-prezzo { opacity: 0.55; }
[data-stato="accettato"].segmented::before { background: var(--success-surface); }
[data-stato="accettato"].segmented label:has(:checked) { color: var(--success-fg); }
[data-stato="rifiutato"].segmented::before { background: var(--danger-surface); }
[data-stato="rifiutato"].segmented label:has(:checked) { color: var(--danger-fg); }
.pag-parziale { display: inline-flex; align-items: center; gap: var(--sp-8); }
.pag-barra { width: var(--sp-48); height: var(--sp-4); border-radius: var(--r-full); background: var(--surface-hover); overflow: hidden; }
.pag-barra > span { display: block; height: 100%; width: var(--quota); border-radius: inherit; background: var(--warning-solid); }
.pag-cifre { display: flex; flex-direction: column; align-items: flex-end; line-height: var(--lh-snug); }
.pag-cifre strong { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--fg); }
.pag-cifre .testo-muto { font-size: var(--fs-12); }
/* Il programma è fatto per lo schermo del computer; nel sito, sul telefono, le righe vanno a capo. */
@media (max-width: 720px) {
  #lista-operazioni { display: block; }
  .op-corpo { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8) var(--sp-12); padding: var(--sp-12); }
  .op-testo { grid-column: 1 / -1; }
  .op-prezzo { justify-content: flex-start; }
  .op-pagamento { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- Una spunta appena messa ----------
   Nel sito si fa vedere: il segno arriva con uno scatto e la riga si
   accende di verde per un momento, poi torna com'era. */
.spunta-nuova .sig { animation: spunta-scatto 460ms var(--ease-spring) both; }
@keyframes spunta-scatto { 0% { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: none; } }
.riga-fatta { animation: riga-fatta 1400ms var(--ease-out) both; }
@keyframes riga-fatta { 0% { background-color: color-mix(in srgb, var(--success-solid) 20%, transparent); } 100% { background-color: transparent; } }

/* ---------- Promemoria e richiami (home.css) ---------- */

.richiami-lista { display: flex; flex-direction: column; }
.richiamo-riga {
  display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap;
  padding: var(--sp-12) var(--sp-20);
  border-bottom: var(--static-hairline) solid var(--border-subtle);
}
.richiamo-riga:last-child { border-bottom: none; }
.richiamo-data { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); color: var(--fg-subtle); min-width: 78px; }
.richiamo-data.scaduto { color: var(--danger-fg); }
.richiamo-data.oggi { color: var(--warning-fg); }
.richiamo-nome { font-weight: var(--fw-medium); color: var(--fg); text-decoration: none; }
.richiamo-nome:hover { color: var(--accent-fg); text-decoration: underline; }
.avviso-azioni { display: inline-flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.richiamo-riga.avvisato .richiamo-nome { color: var(--fg-subtle); }

/* ---------- La ricerca (base.css), dentro la pagina invece che sopra ---------- */

.cerca-prova { display: flex; flex-direction: column; background: var(--bg); }
.ricerca-campo { display: flex; align-items: center; gap: var(--sp-12); padding: 0 var(--sp-16); border-bottom: var(--static-hairline) solid var(--border-subtle); color: var(--fg-subtle); }
.ricerca-campo input {
  flex: 1; min-width: 0; height: calc(var(--sp-48) + var(--sp-4)); padding: 0;
  border: none; background: transparent; box-shadow: none; font: inherit; font-size: var(--fs-16); color: var(--fg);
}
.ricerca-campo input:focus { outline: none; }
.ricerca-campo:focus-within { box-shadow: inset 0 calc(var(--sp-2) * -1) 0 var(--accent-solid); }
.ricerca-campo .icona-cerca { flex: none; }
.icona-cerca .dente { fill: color-mix(in oklab, var(--accent-solid) 35%, transparent); }
.ricerca-risultati { height: 20rem; overflow-y: auto; overflow-x: hidden; padding: var(--sp-8); }
.ricerca-gruppo { padding: var(--sp-8) var(--sp-8) var(--sp-4); font-size: var(--fs-12); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-subtle); }
.ricerca-voce { display: flex; align-items: baseline; gap: var(--sp-12); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-md); cursor: pointer; }
.ricerca-voce.selezionata { background: var(--accent-surface); }
.ricerca-titolo { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.ricerca-sotto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); }
.cerca-prova mark { background: transparent; color: var(--accent-fg); font-weight: var(--fw-bold); }
.ricerca-vuoto { padding: var(--sp-24); text-align: center; font-size: var(--fs-14); }
.ricerca-piede { display: flex; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap; padding: var(--sp-8) var(--sp-16); border-top: var(--static-hairline) solid var(--border-subtle); background: var(--bg-subtle); font-size: var(--fs-12); }
@media (max-width: 640px) { .ricerca-voce { flex-direction: column; gap: var(--sp-2); } .ricerca-titolo { max-width: 100%; } .ricerca-risultati { height: 22rem; } }

/* ---------- Avvisi e conferme ---------- */

.pila-avvisi { position: fixed; right: var(--sp-20); bottom: var(--sp-20); z-index: 400; display: flex; flex-direction: column; gap: var(--sp-8); pointer-events: none; }
.avviso {
  pointer-events: auto; max-width: 380px;
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-md); border-start-start-radius: var(--sp-2);
  font-size: var(--fs-14); background: var(--bg); color: var(--fg);
  box-shadow: var(--elevation-overlay);
  border-left: 2px solid var(--border-strong);
  animation: entra-avviso var(--dur-normal) var(--ease-spring);
}
.avviso-errore { border-left-color: var(--danger-solid); }
.avviso-ok { border-left-color: var(--success-solid); }
.avviso-avviso { border-left-color: var(--warning-solid); }
.avviso.esce { animation: esce-avviso var(--dur-normal) var(--ease-out) forwards; }
@keyframes entra-avviso { from { opacity: 0; transform: translateY(8px); } }
@keyframes esce-avviso { to { opacity: 0; transform: translateX(12px); } }
@media (max-width: 640px) { .pila-avvisi { left: var(--sp-16); right: var(--sp-16); bottom: var(--sp-16); } .avviso { max-width: none; } }

.conferma {
  width: min(92vw, 26rem); padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--layer); color: var(--fg); box-shadow: var(--elevation-overlay);
}
.conferma::backdrop { background: var(--alpha-dark-4); }
.conferma[open] { animation: riquadro-entra var(--dur-normal) var(--ease-out); }
.conferma-dentro { padding: var(--sp-24); }
.conferma-titolo { font-size: var(--fs-16); font-weight: var(--fw-bold); letter-spacing: var(--ls-normal); max-width: none; }
.conferma-testo { margin-top: var(--sp-8); font-size: var(--fs-14); color: var(--fg-subtle); }
.conferma-azioni { display: flex; justify-content: flex-end; gap: var(--sp-8); margin-top: var(--sp-24); }

@media (prefers-reduced-motion: reduce) {
  .appare, .da-avanti, .da-indietro, .riquadro, .conferma[open], .avviso, .sett-selezione, .sett-selezione-esce, .tl-voce.voce-esce,
  .spunta-nuova .sig, .riga-fatta { animation: none; }
  .riquadro.in-uscita { display: none; }
}

/* Al tocco: bersagli più grandi per i comandi dell'agenda. */
@media (pointer: coarse) {
  .btn-ico, .btn-chiudi { width: var(--sp-48); height: var(--sp-48); }
  .btn-sm { --mod-control-h: 40px; }
  .segmented-sm label { height: calc(var(--sp-48) - var(--sp-4)); padding-inline: var(--sp-12); font-size: var(--fs-14); }
}