/* Il Gestionale medici: i caratteri e i pezzi che usano tutte le pagine
   (bottoni, campi, tabelle, schede, finestre). I colori stanno in
   css/colori.css, che si carica prima di questo: uno studio coi suoi colori
   ne ha una copia sua (istanza/sito/css/colori.css). Le pagine aggiungono
   solo quello che è loro, nel loro file css/<pagina>.css, che js/moduli.js
   carica solo per le pagine accese. I nomi delle classi sono scritti in
   PROGETTO.md, «L'aspetto». */

:root {
  --ombra-1: 0 1px 2px rgba(20, 32, 51, .06), 0 1px 3px rgba(20, 32, 51, .05);
  --ombra-2: 0 4px 12px rgba(20, 32, 51, .08), 0 2px 4px rgba(20, 32, 51, .05);
  --ombra-3: 0 18px 48px rgba(20, 32, 51, .18), 0 4px 12px rgba(20, 32, 51, .08);
  --raggio: 10px;
  --raggio-piccolo: 7px;
  --carattere: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --carattere-numeri: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --laterale: 236px;
  --testata: 60px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--carattere);
  font-size: 14px;
  line-height: 1.45;
  color: var(--testo);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
p { margin: 0 0 .6em; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
::selection { background: var(--blu-chiaro); }

.muto { color: var(--testo-2); }
.tenue { color: var(--testo-3); }
.numeri { font-variant-numeric: tabular-nums; }
.destra { text-align: right; }
.centro { text-align: center; }
.forte { font-weight: 650; }
.piccolo { font-size: 12.5px; }
.spezza { overflow-wrap: anywhere; }
.una-riga { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ accesso ============ */

.accesso {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--accesso-luce-1) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, var(--accesso-luce-2) 0%, transparent 55%),
    var(--fondo);
}
.accesso__box {
  width: min(400px, 100%);
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 16px;
  box-shadow: var(--ombra-3);
  padding: 32px 30px 28px;
  display: grid;
  gap: 14px;
}
.accesso__logo { display: grid; justify-items: center; gap: 6px; margin: 0 0 8px; }
.accesso__logo img { width: min(240px, 80%); height: auto; }
.accesso__logo span { color: var(--testo-2); font-size: 13px; letter-spacing: .02em; }
.accesso__marchio { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.accesso__marchio .simbolo { width: 44px; height: 44px; }
.accesso__marchio strong { display: block; font-size: 17px; }
.accesso__marchio span { color: var(--testo-2); font-size: 13px; }
.accesso .errore { color: var(--rosso); margin: 0; font-size: 13px; }
.accesso__piede { color: var(--testo-3); font-size: 12px; text-align: center; margin-top: 4px; }

.simbolo {
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--blu-medio), var(--blu) 55%, var(--blu-scuro));
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--blu-scuro-rgb), .28);
}
.simbolo svg { width: 58%; height: 58%; }

/* ============ l'impianto della pagina ============ */

.app {
  display: grid;
  grid-template-columns: var(--laterale) 1fr;
  min-height: 100%;
}
.laterale {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border-right: 1px solid var(--bordo);
  padding: 14px 12px;
  gap: 4px;
  overflow-y: auto;
}
.laterale__marchio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--bordo);
  margin-bottom: 8px;
}
.laterale__simbolo { width: 38px; height: 38px; flex: none; object-fit: contain; }
.laterale__marchio strong { font-size: 14px; line-height: 1.15; display: block; }
.laterale__marchio span { font-size: 11.5px; color: var(--testo-3); }
.menu { display: grid; gap: 2px; }
.menu__gruppo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--testo-3);
  padding: 12px 10px 4px;
  font-weight: 600;
}
.menu__voce {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--testo-2);
  font-weight: 550;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  text-decoration: none !important;
}
.menu__voce svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.menu__voce:hover { background: var(--fondo); color: var(--testo); }
.menu__voce[aria-current="page"] { background: var(--blu-chiaro); color: var(--blu-scuro); box-shadow: inset 3px 0 0 var(--oro); }
.menu__voce[aria-current="page"] svg { opacity: 1; }
.menu__voce .conta {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--rosso);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}
.laterale__piede { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bordo); display: grid; gap: 6px; }
.utente { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.utente__iniziali {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blu-tenue); color: var(--blu-scuro);
  display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex: none;
  border: 1px solid var(--blu-chiaro);
}
.utente strong { display: block; font-size: 13px; }
.utente span { font-size: 11.5px; color: var(--testo-3); }

.principale { min-width: 0; display: flex; flex-direction: column; }
.testata {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--testata);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  background: rgba(244, 246, 249, .86);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--bordo);
}
.testata .testata__menu { display: none; }
.cerca-globale { position: relative; flex: 1; max-width: 520px; }
.cerca-globale input[type="search"] {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--carta);
  box-shadow: var(--ombra-1);
}
.cerca-globale > svg { position: absolute; left: 12px; top: 10px; width: 18px; height: 18px; color: var(--testo-3); }
.cerca-globale__risultati {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  box-shadow: var(--ombra-3);
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
}
.testata__destra { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.testata__data { color: var(--testo-2); font-weight: 550; white-space: nowrap; }

.fascia {
  padding: 10px 24px;
  font-weight: 550;
  display: flex;
  gap: 10px;
  align-items: center;
}
.fascia--gialla { background: var(--giallo-chiaro); color: #7A4A00; border-bottom: 1px solid #F3D9A6; }
.fascia--rossa { background: var(--rosso-chiaro); color: #8E1F17; border-bottom: 1px solid #F2C3BE; }

.contenuto { padding: 22px 24px 48px; min-width: 0; }

/* ============ le pagine ============ */

.pagina { display: grid; gap: 18px; min-width: 0; }
.pagina__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.pagina__testa h1 { margin-right: auto; }
.pagina__testa .sottotitolo { width: 100%; margin-top: -8px; color: var(--testo-2); }
/* Il titolo con la sua spiegazione sotto, insieme a sinistra della barra
   (Richiami): il blocco cede spazio alla barra e la spiegazione va a capo,
   finché non c'è più posto e la barra scende sotto. */
.pagina__titolo { flex: 1 1 320px; margin-right: auto; display: grid; gap: 4px; min-width: 0; }
.pagina__titolo .sottotitolo { width: auto; margin: 0; }
.barra-strumenti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Un menu a tendina nella barra in testa è largo quanto il suo testo: di
   suo un campo prende tutta la riga, e la barra spingerebbe giù il titolo. */
.pagina__testa > .barra-strumenti > select { width: auto; max-width: 100%; }
.separa { width: 1px; height: 24px; background: var(--bordo); margin: 0 4px; }

/* ============ bottoni ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--bordo-forte);
  background: var(--carta);
  color: var(--testo);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--ombra-1);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .05s;
  text-decoration: none !important;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { background: var(--fondo); border-color: #B9C3D1; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primario { background: var(--blu); border-color: var(--blu); color: #fff; box-shadow: 0 1px 2px rgba(var(--blu-scuro-rgb), .3); }
.btn--primario:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); }
.btn--pericolo { color: var(--rosso); }
.btn--pericolo:hover { background: var(--rosso-chiaro); border-color: #EBB4AE; }
.btn--pieno-rosso { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.btn--pieno-rosso:hover { background: #A92B21; border-color: #A92B21; }
.btn--verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn--verde:hover { background: #0E6A4C; }
.btn--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #fff; }
.btn--whatsapp:hover { background: #178F47; }
.btn--leggero { background: transparent; border-color: transparent; box-shadow: none; color: var(--testo-2); }
.btn--leggero:hover { background: rgba(20, 32, 51, .06); color: var(--testo); border-color: transparent; }
.btn--piccolo { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn--piccolo svg { width: 15px; height: 15px; }
.btn--icona { width: 36px; padding: 0; }
.btn--icona.btn--piccolo { width: 30px; }
.btn-gruppo { display: inline-flex; }
.btn-gruppo .btn { border-radius: 0; margin-left: -1px; }
.btn-gruppo .btn:first-child { border-radius: 9px 0 0 9px; margin-left: 0; }
.btn-gruppo .btn:last-child { border-radius: 0 9px 9px 0; }
.btn-gruppo .btn[aria-pressed="true"] { background: var(--blu-chiaro); color: var(--blu-scuro); border-color: var(--blu-bordo); position: relative; z-index: 1; }

/* ============ campi ============ */

.campo { display: grid; gap: 5px; min-width: 0; align-content: start; }
.campo__etichetta { font-size: 12.5px; font-weight: 600; color: var(--testo-2); }
.campo__aiuto { font-size: 12px; color: var(--testo-3); }
.campo--errore input, .campo--errore select, .campo--errore textarea { border-color: var(--rosso); }
.campo--errore .campo__aiuto { color: var(--rosso); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="datetime-local"], input[type="color"], input:not([type]),
select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--bordo-forte);
  border-radius: 9px;
  background: var(--carta);
  transition: border-color .12s, box-shadow .12s;
}
input[type="color"] { padding: 3px; width: 54px; cursor: pointer; }
textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(var(--blu-rgb), .16); }
input:disabled, select:disabled, textarea:disabled { background: var(--fondo); color: var(--testo-2); }
input[readonly] { background: var(--fondo); }
.spunta { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; line-height: 1.35; }
.spunta input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--blu); flex: none; }
.griglia-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.griglia-campi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia-campi--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia-campi .tutta { grid-column: 1 / -1; }
.griglia-campi .due { grid-column: span 2; }
fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 14px 14px; margin: 0; min-width: 0; }
legend { padding: 0 6px; font-weight: 650; font-size: 13px; color: var(--testo-2); }

/* ============ schede (riquadri) ============ */

.scheda {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  box-shadow: var(--ombra-1);
  min-width: 0;
}
.scheda__testa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bordo);
}
.scheda__testa h2, .scheda__testa h3 { margin-right: auto; }
.scheda__corpo { padding: 16px 18px; }
.scheda__corpo--stretto { padding: 0; }
.scheda__piede { padding: 12px 18px; border-top: 1px solid var(--bordo); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.griglia-schede { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.colonne { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }

/* i numeri in evidenza */
.numeri-grandi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.numero {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--ombra-1);
}
.numero__valore { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero__etichetta { color: var(--testo-2); font-size: 12.5px; font-weight: 550; }
.numero__nota { color: var(--testo-3); font-size: 12px; margin-top: 2px; }

/* ============ tabelle ============ */

.tabella-contenitore { overflow-x: auto; }
.tabella { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabella th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--testo-3);
  font-weight: 650;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bordo);
  background: #FAFBFC;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.tabella td { padding: 10px 14px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella tr.cliccabile { cursor: pointer; }
.tabella tr.cliccabile:hover td { background: var(--blu-tenue); }
.tabella .azioni { text-align: right; white-space: nowrap; }
.tabella td.numeri, .tabella th.numeri { text-align: right; }
.tabella tfoot td { font-weight: 700; background: #FAFBFC; border-top: 1px solid var(--bordo); }

/* ============ linguette ============ */

.linguette {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--bordo);
  overflow-x: auto;
  scrollbar-width: thin;
}
.linguetta {
  border: 0;
  background: none;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--testo-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.linguetta svg { width: 16px; height: 16px; }
.linguetta:hover { color: var(--testo); }
.linguetta[aria-selected="true"] { color: var(--blu); border-bottom-color: var(--blu); }
.linguetta .conta { background: var(--fondo); border-radius: 9px; padding: 0 7px; font-size: 11.5px; color: var(--testo-2); }

/* ============ etichette (pastiglie) ============ */

.etichetta {
  --c: var(--testo-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, white);
  border: 1px solid color-mix(in srgb, var(--c) 22%, white);
}
.etichetta svg { width: 13px; height: 13px; flex: none; }
.etichetta { max-width: 100%; }
.etichetta__testo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etichetta--blu { --c: var(--blu); }
.etichetta--verde { --c: var(--verde); }
.etichetta--rosso { --c: var(--rosso); }
.etichetta--giallo { --c: var(--giallo); }
.etichetta--viola { --c: var(--viola); }
.etichetta--grigio { --c: #6B7686; }
.pallino { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--c, var(--blu)); }

/* gli stati dell'appuntamento, uguali dappertutto */
.stato-richiesta { --c: #B26B00; }
.stato-prenotato { --c: #4F5D70; }
.stato-confermato { --c: #12805C; }
.stato-arrivato { --c: #C25E00; }
.stato-in_visita { --c: var(--blu); }
.stato-completato { --c: #3E7D3A; }
.stato-annullato { --c: #8A95A5; }
.stato-assente { --c: #C9372C; }

/* ============ elenchi semplici ============ */

.elenco { list-style: none; margin: 0; padding: 0; }
.elenco > li { padding: 10px 0; border-bottom: 1px solid var(--bordo); display: flex; gap: 12px; align-items: center; }
.elenco > li:last-child { border-bottom: 0; }
.elenco--cliccabile > li { cursor: pointer; padding: 10px 12px; border-radius: 8px; border-bottom: 0; }
.elenco--cliccabile > li:hover, .elenco--cliccabile > li[aria-selected="true"] { background: var(--blu-tenue); }
.definizioni { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.definizioni dt { color: var(--testo-2); font-size: 13px; }
.definizioni dd { margin: 0; font-weight: 550; min-width: 0; overflow-wrap: anywhere; }

/* ============ vuoto, caricamento ============ */

.vuoto {
  text-align: center;
  padding: 36px 20px;
  color: var(--testo-2);
  display: grid;
  gap: 8px;
  justify-items: center;
}
.vuoto svg { width: 40px; height: 40px; color: var(--bordo-forte); }
.vuoto strong { color: var(--testo); font-size: 15px; }
.carica {
  display: grid;
  place-items: center;
  padding: 40px;
  color: var(--testo-3);
}
.carica::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--bordo);
  border-top-color: var(--blu);
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.avviso-riga {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--blu-tenue);
  border: 1px solid var(--blu-chiaro);
  color: var(--blu);
  font-size: 13px;
}
.avviso-riga svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.avviso-riga--giallo { background: var(--giallo-chiaro); border-color: #F3D9A6; color: #6E4500; }
.avviso-riga--rosso { background: var(--rosso-chiaro); border-color: #F2C3BE; color: #8E1F17; }
.avviso-riga--verde { background: var(--verde-chiaro); border-color: #BFE3D2; color: #0B5A40; }

/* ============ finestre (dialog) ============ */

dialog.dialogo {
  border: 0;
  padding: 0;
  border-radius: 16px;
  box-shadow: var(--ombra-3);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  color: var(--testo);
  background: var(--carta);
  overflow: hidden;
}
dialog.dialogo--s { width: min(420px, calc(100vw - 32px)); }
dialog.dialogo--l { width: min(820px, calc(100vw - 32px)); }
dialog.dialogo--xl { width: min(1080px, calc(100vw - 32px)); }
dialog.dialogo::backdrop { background: rgba(16, 26, 42, .42); backdrop-filter: blur(2px); }
dialog.dialogo[open] { display: flex; flex-direction: column; animation: entra .16s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.dialogo__testa { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--bordo); }
.dialogo__testa h2 { margin-right: auto; }
.dialogo__corpo { padding: 18px 20px; overflow-y: auto; display: grid; gap: 14px; align-content: start; }
.dialogo__piede { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 14px 20px; border-top: 1px solid var(--bordo); background: #FAFBFC; flex-wrap: wrap; }
.dialogo__piede .a-sinistra { margin-right: auto; }

/* ============ avvisi in basso ============ */

.avvisi { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: grid; gap: 8px; width: min(380px, calc(100vw - 40px)); }
.avviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #1C2636;
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: var(--ombra-3);
  animation: entra .18s ease-out;
  font-weight: 500;
}
.avviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.avviso--ok svg { color: #6EE7B0; }
.avviso--errore { background: #7E1F17; }
.avviso button { margin-left: auto; background: none; border: 0; color: #fff; opacity: .7; cursor: pointer; padding: 0 2px; }

/* ============ campanella ============ */

.campanella { position: relative; }
.campanella__n {
  position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--rosso); color: #fff; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--fondo);
}
.notifiche {
  position: absolute;
  top: calc(var(--testata) - 6px);
  right: 16px;
  width: min(380px, calc(100vw - 32px));
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  box-shadow: var(--ombra-3);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 40;
}
.notifiche__testa { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--bordo); }
.notifiche__testa strong { margin-right: auto; }
.notifica { display: grid; gap: 2px; padding: 11px 14px; border-bottom: 1px solid var(--bordo); cursor: pointer; }
.notifica:hover { background: var(--blu-tenue); }
.notifica--nuova { background: #F6F9FF; box-shadow: inset 3px 0 0 var(--blu); }
.notifica small { color: var(--testo-3); }

/* ============ il paziente scelto (pezzo comune) ============ */

.paziente-riga { display: flex; align-items: center; gap: 12px; min-width: 0; }
.paziente-riga__iniziali {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--blu-tenue); color: var(--blu-scuro); border: 1px solid var(--blu-chiaro);
}
.paziente-riga__nome { font-weight: 650; }
.paziente-riga__info { color: var(--testo-2); font-size: 12.5px; }

/* ============ la sospensione ============ */

.sospeso { max-width: 560px; margin: 10vh auto; text-align: center; display: grid; gap: 12px; }

/* ============ telefono e tablet ============ */

@media (max-width: 980px) {
  .colonne { grid-template-columns: 1fr; }
  .griglia-campi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .laterale {
    position: fixed; z-index: 60; left: 0; top: 0; width: 270px;
    transform: translateX(-100%); transition: transform .2s; box-shadow: var(--ombra-3);
  }
  .app--menu-aperto .laterale { transform: none; }
  .testata .testata__menu { display: inline-flex; }
  .testata__data { display: none; }
  .contenuto { padding: 16px 14px 40px; }
  .testata { padding: 0 14px; }
  .griglia-campi, .griglia-campi--3 { grid-template-columns: 1fr; }
  .griglia-campi .due { grid-column: auto; }
}

/* ============ stampa ============ */

@media print {
  .laterale, .testata, .fascia, .avvisi, .notifiche, .non-stampare { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .contenuto { padding: 0; }
  .scheda { box-shadow: none; }
}

/* ============ il blocco per inattività ============ */

dialog.blocco { border: 0; padding: 0; background: transparent; overflow: visible; max-width: none; max-height: none; }
dialog.blocco[open] { display: grid; place-items: center; width: 100vw; height: 100vh; }
dialog.blocco::backdrop { background: rgba(244, 246, 249, .55); backdrop-filter: blur(6px); }