/* GoPlan — foglio di stile.
 *
 * Direzione: sobria. Un solo accento (verde pino), molto bianco, tipografia
 * di sistema. Gli stati si leggono dalla forma prima che dal colore:
 * libera = vuota con un cerchio, scelta = contornata, in attesa = a righe,
 * approvata = piena, non disponibile = spenta.
 *
 * Tre livelli di token: primitivi (valori), semantici (ruoli, cambiano col
 * tema), di componente (dove serve). Nei componenti si usano solo i semantici.
 */

/* ------------------------------------------------------------ token: primitivi */
:root {
  --pino-50: #eef5f1;
  --pino-100: #dfece5;
  --pino-200: #c3dccf;
  --pino-600: #1b6b53;
  --pino-700: #155743;
  --pino-800: #0f4434;
  --menta-200: #a6e3cb;
  --menta-400: #5dc6a0;
  --menta-500: #48b48d;

  --carta-0: #ffffff;
  --carta-50: #f3f4f1;
  --carta-100: #eceee9;
  --carta-200: #e1e4df;
  --carta-300: #c9cfc9;
  --carta-500: #7a847e;
  --carta-600: #59645e;
  --carta-900: #17201c;

  --notte-950: #0d1210;
  --notte-900: #141a17;
  --notte-850: #1a211e;
  --notte-800: #222a26;
  --notte-700: #2e3833;
  --notte-500: #78847e;
  --notte-300: #a6b1ab;
  --notte-100: #e7ece9;

  --rosso-50: #fdf0ee;
  --rosso-600: #b42318;
  --rosso-300: #ff8f84;
  --rosso-900: #3a1714;

  /* Spazi, scala da 4 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;

  /* Tipografia: il carattere del sistema (SF su iPhone e Mac) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-titoli: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.75rem;     /* 12 */
  --t-s: 0.8125rem;    /* 13 */
  --t-m: 0.9375rem;    /* 15 */
  --t-b: 1.0625rem;    /* 17: il corpo, come su iOS */
  --t-l: 1.25rem;      /* 20 */
  --t-xl: 1.5rem;      /* 24 */
  --t-xxl: 1.875rem;   /* 30 */
  --t-xxxl: 2.125rem;  /* 34 */

  /* Raggi */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 22px;
  --r-pieno: 999px;

  /* Movimento: brevi, senza rimbalzi se non dopo un gesto */
  --d-tocco: 90ms;
  --d-1: 160ms;
  --d-2: 240ms;
  --d-3: 360ms;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --curva-foglio: cubic-bezier(.32, .72, 0, 1);

  /* Piani */
  --z-alto: 20;
  --z-barra: 25;
  --z-schede: 30;
  --z-toast: 100;

  /* Misure fisse */
  --alto-h: 44px;
  --schede-h: 52px;
  --lato-w: 252px;
  --sicuro-su: env(safe-area-inset-top, 0px);
  --sicuro-giu: env(safe-area-inset-bottom, 0px);
  --sicuro-sx: env(safe-area-inset-left, 0px);
  --sicuro-dx: env(safe-area-inset-right, 0px);
}

/* ------------------------------------------------------------ token: semantici (chiaro) */
:root {
  color-scheme: light dark;
  --canvas: var(--carta-50);
  --superficie: var(--carta-0);
  --superficie-2: var(--carta-100);
  --campo: var(--carta-50);
  --ink: var(--carta-900);
  --ink-2: var(--carta-600);
  --ink-3: var(--carta-500);
  --linea: var(--carta-200);
  --linea-forte: var(--carta-300);
  --accento: var(--pino-600);
  --accento-forte: var(--pino-800);
  --accento-premuto: var(--pino-700);
  --accento-tinta: var(--pino-50);
  --accento-tinta-2: var(--pino-100);
  --accento-righe: var(--pino-200);
  --su-accento: #ffffff;
  --pericolo: var(--rosso-600);
  --pericolo-tinta: var(--rosso-50);
  --su-pericolo: #ffffff;
  --velo: rgba(18, 24, 21, .38);
  --materiale: rgba(250, 251, 249, .82);
  --ombra-1: 0 1px 2px rgba(23, 32, 28, .06);
  --ombra-2: 0 10px 40px rgba(23, 32, 28, .16), 0 2px 8px rgba(23, 32, 28, .06);
  --toast-sfondo: var(--carta-900);
  --toast-testo: var(--carta-0);
}

/* ------------------------------------------------------------ token: semantici (scuro) */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: var(--notte-950);
    --superficie: var(--notte-900);
    --superficie-2: var(--notte-800);
    --campo: var(--notte-850);
    --ink: var(--notte-100);
    --ink-2: var(--notte-300);
    --ink-3: var(--notte-500);
    --linea: var(--notte-800);
    --linea-forte: var(--notte-700);
    --accento: var(--menta-400);
    --accento-forte: var(--menta-200);
    --accento-premuto: var(--menta-500);
    --accento-tinta: #15291f;
    --accento-tinta-2: #1b3528;
    --accento-righe: #24483a;
    --su-accento: #05271b;
    --pericolo: var(--rosso-300);
    --pericolo-tinta: var(--rosso-900);
    --su-pericolo: #3a0b07;
    --velo: rgba(0, 0, 0, .55);
    --materiale: rgba(20, 26, 23, .82);
    --ombra-1: none;
    --ombra-2: 0 12px 48px rgba(0, 0, 0, .55);
    --toast-sfondo: var(--notte-100);
    --toast-testo: var(--notte-950);
  }
}

@media (prefers-contrast: more) {
  :root {
    --linea: var(--carta-300);
    --linea-forte: var(--carta-600);
    --ink-2: #3f4944;
    --ink-3: #505a55;
  }
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--canvas);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-b);
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

html.foglio-aperto, html.foglio-aperto body { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: var(--accento); text-decoration: none; touch-action: manipulation; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
[hidden] { display: none !important; }
strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

.invisibile {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.salta {
  position: fixed; left: var(--s-4); top: calc(var(--sicuro-su) + var(--s-2));
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  background: var(--accento); color: var(--su-accento);
  border-radius: var(--r-m);
  transform: translateY(-200%);
}
.salta:focus { transform: none; }

.noscript { padding: var(--s-8); text-align: center; }
.testo-tenue { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.solo-stampa { display: none; }

.icona { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.icona svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------ guscio */
.app { min-height: 100dvh; }

.contenuto {
  /* in fondo resta spazio per le schede e per la barra della scelta */
  padding: 0 calc(var(--s-4) + var(--sicuro-dx)) calc(var(--schede-h) + var(--sicuro-giu) + 104px) calc(var(--s-4) + var(--sicuro-sx));
}
.contenuto:focus { outline: none; }
.pagina { max-width: 720px; margin: 0 auto; }
.contenuto-largo .pagina { max-width: 1280px; }
.nuda .contenuto { padding: 0; }

/* Barra in alto (telefono): materiale traslucido, titolo piccolo che compare
   quando quello grande esce dallo schermo. */
.alto {
  position: sticky; top: 0; z-index: var(--z-alto);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: calc(var(--alto-h) + var(--sicuro-su));
  padding: var(--sicuro-su) calc(var(--s-2) + var(--sicuro-dx)) 0 calc(var(--s-2) + var(--sicuro-sx));
  background: var(--materiale);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid transparent;
  transition: border-color var(--d-2) ease;
}
.alto.con-titolo { border-bottom-color: var(--linea-forte); }
.alto-sinistra { display: flex; }
.alto-destra { display: flex; justify-content: flex-end; }
.alto-titolo {
  font-size: var(--t-b); font-weight: 600; text-align: center;
  max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--d-2) var(--curva), transform var(--d-2) var(--curva);
}
.alto.con-titolo .alto-titolo { opacity: 1; transform: none; }
.alto-indietro {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 0 var(--s-2) 0 0;
  font-size: var(--t-b); color: var(--accento);
}
.alto-indietro .icona { width: 1.5em; height: 1.5em; }
.alto-indietro:hover { text-decoration: none; }

/* Schede in basso (telefono) */
.schede {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-schede);
  display: grid; grid-template-columns: repeat(var(--schede, 3), 1fr);
  padding: 0 var(--sicuro-dx) var(--sicuro-giu) var(--sicuro-sx);
  background: var(--materiale);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--linea-forte);
}
.scheda {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--schede-h); padding: 6px 2px 4px;
  color: var(--ink-2);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0;
}
.scheda:hover { text-decoration: none; }
.scheda .voce-icona { position: relative; display: inline-flex; }
.scheda .icona { width: 26px; height: 26px; }
.scheda[aria-current="page"] { color: var(--accento); }
.scheda:active .voce-icona { transform: scale(.9); transition: transform var(--d-tocco) ease-out; }

.contatore {
  position: absolute; top: -4px; right: -10px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pieno);
  background: var(--pericolo); color: var(--su-pericolo);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--superficie);
}
.campanella { position: relative; }
.campanella .contatore { top: 4px; right: 2px; }

/* Barra laterale (schermi larghi) */
.lato { display: none; }

@media (min-width: 960px) {
  .alto, .schede { display: none; }
  .lato {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-schede);
    width: var(--lato-w);
    display: flex; flex-direction: column; gap: var(--s-6);
    padding: var(--s-6) var(--s-3) var(--s-4);
    background: var(--canvas);
    border-right: 1px solid var(--linea);
    overflow-y: auto;
  }
  .contenuto {
    margin-left: var(--lato-w);
    padding: var(--s-8) var(--s-10) 120px;
  }
}
.lato-marchio {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink);
}
.lato-marchio:hover { text-decoration: none; }
.lato-gruppo { display: flex; flex-direction: column; gap: 2px; }
.lato-fondo { margin-top: auto; }
.lato-voce {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: 0 var(--s-3);
  border-radius: var(--r-m);
  color: var(--ink); font-size: var(--t-m); font-weight: 500;
}
.lato-voce:hover { background: var(--superficie-2); text-decoration: none; }
.lato-voce[aria-current="page"] { background: var(--accento-tinta); color: var(--accento-forte); font-weight: 600; }
.lato-voce .voce-icona { position: relative; display: inline-flex; color: var(--ink-2); }
.lato-voce[aria-current="page"] .voce-icona { color: var(--accento); }
.lato-voce .icona { width: 22px; height: 22px; }
.lato-voce .contatore { top: -3px; right: -8px; box-shadow: 0 0 0 2px var(--canvas); }
.lato-profilo .avatar { width: 26px; height: 26px; font-size: 11px; }
.lato-profilo .voce-testo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Il segno: tre righe-settimana (barra e segno), quella in mezzo scelta */
.marchio-segno {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
  width: 30px; height: 30px; flex: none;
  border-radius: 8px;
  background: var(--accento);
}
.marchio-segno span {
  position: relative; display: block;
  width: 13px; height: 4px; margin-right: 6px;
  border-radius: 2px; background: var(--su-accento); opacity: .45;
}
.marchio-segno span::after {
  content: ""; position: absolute; left: 15px; top: 0;
  width: 4px; height: 4px; border-radius: 50%; background: inherit;
}
.marchio-segno span:nth-child(2) { opacity: 1; }
.marchio-segno.grande { width: 60px; height: 60px; border-radius: 15px; gap: 6px; }
.marchio-segno.grande span { width: 27px; height: 8px; margin-right: 11px; border-radius: 4px; }
.marchio-segno.grande span::after { left: 30px; width: 8px; height: 8px; }

/* ------------------------------------------------------------ testata di pagina */
.testata { padding: var(--s-2) 0 var(--s-5); }
.testata-indietro {
  display: none; align-items: center; gap: 2px;
  min-height: 44px; margin-left: -6px;
  font-size: var(--t-m); color: var(--accento);
}
.testata-indietro .icona { width: 1.4em; height: 1.4em; }
@media (min-width: 960px) { .testata-indietro { display: inline-flex; } }
.testata-riga { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.testata-titolo {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-titoli);
  font-size: var(--t-xxl); font-weight: 700; line-height: 1.12; letter-spacing: -0.026em;
}
.testata-titolo:focus { outline: none; }
.testata-azioni { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.testata-sotto { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--t-m); max-width: 52ch; }
@media (min-width: 960px) {
  .testata { padding-top: 0; }
  .testata-titolo { font-size: var(--t-xxxl); }
}

/* ------------------------------------------------------------ sezioni e gruppi */
.sezione { margin-top: var(--s-8); }
.sezione:first-child { margin-top: 0; }
.testata + .sezione { margin-top: var(--s-2); }
.sezione-titolo {
  margin: 0 var(--s-1) var(--s-2);
  font-size: var(--t-m); font-weight: 600; color: var(--ink-2); letter-spacing: -0.005em;
}
.sezione-conta { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sezione-nota { margin: 0 var(--s-1) var(--s-3); color: var(--ink-2); font-size: var(--t-m); max-width: 60ch; }

.gruppo {
  background: var(--superficie);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--ombra-1);
}
.superficie {
  background: var(--superficie);
  border-radius: var(--r-l);
  padding: var(--s-5) var(--s-4);
  box-shadow: var(--ombra-1);
}
@media (min-width: 600px) { .superficie { padding: var(--s-6); } }

/* Righe: come le impostazioni del telefono */
.riga {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 0; background: none; text-align: left;
  color: var(--ink);
}
.riga + .riga::before, .gruppo > * + * > .riga:first-child::before {
  content: ""; position: absolute; top: 0; right: 0; left: var(--s-4);
  border-top: 0.5px solid var(--linea-forte);
}
.riga:has(.riga-testa) + .riga::before { left: 56px; }
.riga:has(.riga-testa .avatar) + .riga::before { left: 64px; }
a.riga:hover { text-decoration: none; }
button.riga:active, a.riga:active { background: var(--superficie-2); }
@media (hover: hover) { button.riga:hover, a.riga:hover { background: color-mix(in srgb, var(--superficie-2) 55%, transparent); } }
.riga-testa { display: inline-flex; flex: none; min-width: 28px; justify-content: center; color: var(--accento); }
.riga-testa .icona { width: 22px; height: 22px; }
.riga-testi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.riga-titolo { font-size: var(--t-b); font-weight: 500; }
.riga-sotto { display: flex; flex-wrap: wrap; column-gap: var(--s-2); color: var(--ink-2); font-size: var(--t-m); }
.riga-sotto span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: var(--s-2); border-radius: 50%; background: var(--ink-3); vertical-align: middle; }
.riga-coda { display: inline-flex; align-items: center; max-width: 55%; gap: var(--s-2); color: var(--ink-2); font-size: var(--t-m); }
.riga-freccia { color: var(--ink-3); width: 18px; height: 18px; }
.riga-pericolo .riga-titolo, .riga-pericolo .riga-testa { color: var(--pericolo); }
.riga.attenuata .riga-titolo, .riga.attenuata .riga-sotto { opacity: .55; }
.riga-profilo { min-height: 68px; }
.riga-profilo .riga-testa { width: 40px; }
.riga-profilo .avatar { width: 40px; height: 40px; }
.riga-profilo + .riga::before { left: 68px; }
.contatore-riga {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pieno);
  background: var(--pericolo); color: var(--su-pericolo); font-size: var(--t-s); font-weight: 700; line-height: 24px; text-align: center;
}

.etichette { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); justify-content: flex-end; }
.etichetta {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-pieno);
  background: var(--superficie-2); color: var(--ink-2);
  font-size: var(--t-s); font-weight: 600; white-space: nowrap;
}
.etichetta.accento { background: var(--accento-tinta); color: var(--accento-forte); }
.etichetta.pericolo { background: var(--pericolo-tinta); color: var(--pericolo); }

/* ------------------------------------------------------------ bottoni */
.bottone {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-m);
  font-size: var(--t-b); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  text-align: center; white-space: nowrap;
  transition: transform var(--d-tocco) ease-out, background-color var(--d-1) ease, opacity var(--d-1) ease;
}
.bottone:hover { text-decoration: none; }
.bottone:active:not(:disabled) { transform: scale(.97); }
.bottone:disabled { opacity: .42; cursor: not-allowed; }
.bottone .icona { width: 20px; height: 20px; }
.bottone-primario { background: var(--accento); color: var(--su-accento); }
.bottone-primario:active:not(:disabled) { background: var(--accento-premuto); }
.bottone-secondario { background: var(--accento-tinta); color: var(--accento-forte); }
.bottone-secondario:active:not(:disabled) { background: var(--accento-tinta-2); }
.bottone-tenue { background: transparent; color: var(--accento); padding: 0 var(--s-3); }
.bottone-tenue:active:not(:disabled) { background: var(--accento-tinta); }
.bottone-pericolo { background: var(--pericolo); color: var(--su-pericolo); }
.bottone-pericolo-tenue { background: transparent; color: var(--pericolo); padding: 0 var(--s-3); }
.bottone-pericolo-tenue:active:not(:disabled) { background: var(--pericolo-tinta); }
.bottone-piccolo { min-height: 38px; padding: 0 var(--s-4); font-size: var(--t-m); border-radius: 10px; }
.bottone-piccolo.bottone-tenue, .bottone-piccolo.bottone-pericolo-tenue { padding: 0 var(--s-2); }
.bottone-piccolo::after { content: ""; position: absolute; inset: -4px 0; }
.bottone-piccolo .icona { width: 18px; height: 18px; }
.bottone-largo { width: 100%; }
.bottone-grande { min-height: 52px; }
.bottone.in-corso { color: transparent !important; }
.bottone.in-corso::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid currentColor; border-radius: 50%;
  border-color: var(--su-accento) var(--su-accento) transparent transparent;
  animation: gira .7s linear infinite;
}
.bottone-secondario.in-corso::before, .bottone-tenue.in-corso::before { border-color: var(--accento) var(--accento) transparent transparent; }

.bottone-icona {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-pieno); background: transparent;
  color: var(--accento);
}
.bottone-icona .icona { width: 24px; height: 24px; }
.bottone-icona:active { background: var(--accento-tinta); }
.bottone-icona:disabled { opacity: .35; }

.fila-bottoni { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.link-bottone { border: 0; background: none; padding: var(--s-2); color: var(--accento); font-size: var(--t-m); }

@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ campi */
.modulo { display: flex; flex-direction: column; gap: var(--s-5); }
.modulo > .sezione { margin-top: var(--s-3); }
.modulo > .sezione:first-child { margin-top: 0; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.campo-etichetta { font-size: var(--t-m); font-weight: 600; color: var(--ink); padding: 0; }
.campo-aiuto { font-size: var(--t-s); color: var(--ink-2); line-height: 1.45; }
.campi-affiancati { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--linea); border-radius: var(--r-m);
  background: var(--campo); color: var(--ink);
  font-size: var(--t-b);
  transition: border-color var(--d-1) ease, box-shadow var(--d-1) ease, background-color var(--d-1) ease;
  -webkit-appearance: none; appearance: none;
}
input[type="date"], input[type="time"] { min-width: 0; display: block; }
input[type="number"] { max-width: 12rem; }
input::-webkit-date-and-time-value { text-align: left; }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a847e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent);
  background-color: var(--superficie);
}
input[readonly] { color: var(--ink-2); }
::placeholder { color: var(--ink-3); opacity: 1; }
.url { font-size: var(--t-m); color: var(--ink-2); }

.con-bottone { position: relative; }
.con-bottone input { padding-right: 52px; }
.mostra-password {
  position: absolute; right: 2px; top: 2px;
  width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-m);
}
.input-codice { font-size: var(--t-xl) !important; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

/* Interruttore, come quello del telefono */
.gruppo-interruttori { background: var(--campo); box-shadow: none; border: 1px solid var(--linea); }
.foglio .gruppo-interruttori, .superficie .gruppo-interruttori { background: var(--campo); }
.interruttore + .interruttore { border-top: 0.5px solid var(--linea-forte); }
.interruttore > .campo-aiuto { padding: 0 var(--s-4) var(--s-3); margin-top: -4px; }
.interruttore-riga {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 52px; padding: var(--s-2) var(--s-4);
  cursor: pointer;
}
.interruttore-testo { flex: 1; font-size: var(--t-b); }
.interruttore-input { position: absolute; opacity: 0; width: 51px; height: 31px; right: var(--s-4); margin: 0; cursor: pointer; }
.interruttore-traccia {
  position: relative; flex: none;
  width: 51px; height: 31px; border-radius: var(--r-pieno);
  background: var(--linea-forte);
  transition: background-color var(--d-2) ease;
}
.interruttore-traccia::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
  transition: transform var(--d-2) var(--curva);
}
.interruttore-input:checked ~ .interruttore-traccia { background: var(--accento); }
.interruttore-input:checked ~ .interruttore-traccia::after { transform: translateX(20px); }
.interruttore-input:focus-visible ~ .interruttore-traccia { outline: 2px solid var(--accento); outline-offset: 2px; }

/* Controllo segmentato */
.segmentato {
  display: grid; grid-auto-columns: 1fr; grid-auto-flow: column;
  padding: 3px; gap: 2px;
  border-radius: 11px;
  background: var(--superficie-2);
  margin-bottom: var(--s-4);
}
.campo .segmentato { margin-bottom: 0; }
.segmento { position: relative; display: flex; }
.segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.segmento label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 var(--s-3);
  border-radius: 9px;
  font-size: var(--t-m); font-weight: 600; color: var(--ink-2); text-align: center;
  cursor: pointer;
  transition: background-color var(--d-1) ease, color var(--d-1) ease, box-shadow var(--d-1) ease;
}
.segmento input:checked + label { background: var(--superficie); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.segmento input:focus-visible + label { outline: 2px solid var(--accento); outline-offset: 1px; }
@media (prefers-color-scheme: dark) { .segmento input:checked + label { background: var(--notte-700); } }

/* Pastiglie */
.pastiglie { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pastiglia { position: relative; display: flex; }
.pastiglia input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.pastiglia label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid var(--linea-forte); border-radius: var(--r-pieno);
  font-size: var(--t-m); font-weight: 500; cursor: pointer;
  transition: background-color var(--d-1) ease, border-color var(--d-1) ease;
}
.pastiglia input:checked + label { background: var(--accento-tinta); border-color: var(--accento); color: var(--accento-forte); font-weight: 600; }
.pastiglia input:focus-visible + label { outline: 2px solid var(--accento); outline-offset: 2px; }

/* Frasi pronte */
.frasi { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.frase {
  display: inline-flex; align-items: center; min-height: 38px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--linea-forte); border-radius: var(--r-m);
  background: transparent; color: var(--ink); font-size: var(--t-m); text-align: left; line-height: 1.35;
}
.frase:active { background: var(--accento-tinta); border-color: var(--accento); }

/* Nota con l'avviso sulla privacy */
.avviso-privacy { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-s); color: var(--ink-2); }
.avviso-privacy .icona { width: 15px; height: 15px; margin-top: 2px; color: var(--accento); }
.nota-contatore { margin-left: auto; font-variant-numeric: tabular-nums; }

.messaggio-errore {
  display: flex; gap: var(--s-2); align-items: flex-start;
  color: var(--pericolo); font-size: var(--t-m); font-weight: 500;
}
.messaggio-errore .icona { margin-top: 2px; }

.dicitura { font-size: var(--t-s); color: var(--ink-2); text-align: center; max-width: 44ch; margin: 0 auto; }
.piede-pagina { margin-top: var(--s-10); }
.piede-modulo { margin-top: var(--s-6); display: flex; justify-content: flex-end; }
.piede-modulo .bottone { min-width: 200px; }
@media (max-width: 599px) { .piede-modulo .bottone { width: 100%; } }

/* ------------------------------------------------------------ stati */
.stato {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px 2px 7px; border-radius: var(--r-pieno);
  font-size: var(--t-s); font-weight: 600; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
.stato .icona { width: 14px; height: 14px; }
.stato-approvata { background: var(--accento-tinta); color: var(--accento-forte); }
.stato-in_attesa { border: 1px dashed var(--accento); color: var(--accento-forte); }
.stato-annullamento { border: 1px dashed var(--ink-3); color: var(--ink-2); }
.stato-rifiutata { background: var(--pericolo-tinta); color: var(--pericolo); }
.stato-ritirata, .stato-annullata { background: var(--superficie-2); color: var(--ink-2); }
.stato-ritardo { background: var(--pericolo-tinta); color: var(--pericolo); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--superficie-2); color: var(--ink-2);
  font-size: var(--t-s); font-weight: 700; letter-spacing: 0;
}
.avatar-grande { width: 64px; height: 64px; font-size: var(--t-l); }
.pallino { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ------------------------------------------------------------ attese, vuoti, errori */
.caricamento { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-10) var(--s-4); color: var(--ink-2); font-size: var(--t-m); }
.rotella { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linea-forte); border-top-color: var(--accento); animation: gira .8s linear infinite; }
.scheletro { display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-l); overflow: hidden; }
.scheletro-riga { height: 60px; background: var(--superficie); position: relative; overflow: hidden; }
.scheletro-riga::after {
  content: ""; position: absolute; left: var(--s-4); top: 18px; height: 12px; width: 46%;
  border-radius: 6px; background: var(--superficie-2);
  animation: respira 1.4s ease-in-out infinite;
}
.scheletro-riga:nth-child(2n)::after { width: 32%; }
@keyframes respira { 50% { opacity: .45; } }

.vuoto { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-12) var(--s-4); text-align: center; }
.vuoto-icona { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accento-tinta); color: var(--accento); margin-bottom: var(--s-2); }
.vuoto-icona .icona { width: 28px; height: 28px; }
.vuoto-titolo { font-size: var(--t-l); font-weight: 650; letter-spacing: -0.015em; }
.vuoto-testo { color: var(--ink-2); max-width: 36ch; font-size: var(--t-m); }
.vuoto .bottone { margin-top: var(--s-4); }

.riquadro {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-l);
  background: var(--superficie); color: var(--ink); font-size: var(--t-m);
  box-shadow: var(--ombra-1);
}
.riquadro > .icona { color: var(--accento); margin-top: 1px; }
.riquadro-errore > .icona { color: var(--pericolo); }
.riquadro-errore .bottone { margin-top: var(--s-3); }
.riquadro-proposta { background: var(--accento-tinta); box-shadow: none; }
.riquadro-proposta .bottone { margin-top: var(--s-3); }
.riquadro-attenzione { background: var(--superficie-2); box-shadow: none; }
.riquadro-titolo { font-weight: 600; }
.riquadro-vuoto { padding: var(--s-4); background: var(--superficie); border-radius: var(--r-l); }
.zona-settimane > .riquadro { margin-bottom: var(--s-4); }

.avvisi { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.avviso { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-m); color: var(--ink-2); }
.avviso .icona { width: 18px; height: 18px; margin-top: 2px; color: var(--accento); }
.avviso-errore, .avviso-copertura, .avviso-settimana_occupata, .avviso-ritardo { color: var(--ink); }
.avviso-errore .icona, .avviso-ritardo .icona, .avviso-copertura .icona { color: var(--pericolo); }
.avviso-ritardo { margin: 0 var(--s-1) var(--s-3); }

/* ------------------------------------------------------------ toast */
.toasts {
  position: fixed; left: 50%; z-index: var(--z-toast);
  bottom: calc(var(--schede-h) + var(--sicuro-giu) + var(--s-4));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  width: max-content; max-width: calc(100vw - 32px);
  pointer-events: none;
}
dialog .toasts { bottom: calc(var(--sicuro-giu) + 96px); }
body:has(.barra-fondo.visibile) .toasts { bottom: calc(var(--schede-h) + var(--sicuro-giu) + 92px); }
@media (min-width: 960px) { .toasts { bottom: var(--s-8); left: calc(50% + var(--lato-w) / 2); } dialog .toasts { left: 50%; } }
.toast {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 12px 18px; border-radius: 18px;
  background: var(--toast-sfondo); color: var(--toast-testo);
  line-height: 1.35;
  font-size: var(--t-m); font-weight: 600;
  box-shadow: var(--ombra-2);
  animation: entra-toast var(--d-3) var(--curva-foglio);
}
.toast .icona { width: 18px; height: 18px; }
.toast-errore .icona { color: var(--rosso-300); }
@media (prefers-color-scheme: dark) { .toast-errore .icona { color: var(--rosso-600); } }
.toast-via { opacity: 0; transform: translateY(6px); transition: opacity var(--d-2) ease, transform var(--d-2) ease; }
@keyframes entra-toast { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ------------------------------------------------------------ barra in fondo (scelta) */
.barra-fondo {
  position: fixed; z-index: var(--z-barra);
  left: calc(var(--s-3) + var(--sicuro-sx)); right: calc(var(--s-3) + var(--sicuro-dx));
  bottom: calc(var(--schede-h) + var(--sicuro-giu) + var(--s-2));
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: var(--ombra-2);
  border: 0.5px solid var(--linea);
  opacity: 0; transform: translateY(24px);
  pointer-events: none;
  transition: opacity var(--d-2) ease, transform var(--d-3) var(--curva-foglio);
}
.barra-fondo.visibile { opacity: 1; transform: none; pointer-events: auto; }
.barra-fondo-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.barra-fondo-titolo { font-weight: 650; }
.barra-fondo-sotto { font-size: var(--t-m); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-fondo-azioni { display: flex; gap: var(--s-1); flex: none; }
.barra-fondo-azioni .bottone { min-height: 46px; }
@media (min-width: 960px) {
  .barra-fondo {
    left: calc(var(--lato-w) + 50% - var(--lato-w) / 2); right: auto;
    width: min(640px, calc(100vw - var(--lato-w) - 80px));
    transform: translate(-50%, 24px);
    bottom: var(--s-6);
  }
  .barra-fondo.visibile { transform: translate(-50%, 0); }
}

/* ------------------------------------------------------------ fogli */
dialog.foglio {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink);
  overflow: hidden;
}
dialog.foglio::backdrop { background: transparent; }
.foglio-velo {
  position: absolute; inset: 0;
  background: var(--velo);
  opacity: 0;
  transition: opacity var(--d-3) ease;
}
.foglio.aperto .foglio-velo { opacity: 1; }
.foglio-pannello {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--sicuro-su) - 12px);
  background: var(--superficie);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--ombra-2);
  transform: translateY(105%);
  transition: transform 420ms var(--curva-foglio);
  outline: none;
}
.foglio.aperto .foglio-pannello { transform: translateY(0); }
.foglio-testa {
  position: relative; flex: none;
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-5) var(--s-2) var(--s-3) var(--s-5);
  touch-action: none; cursor: grab;
}
.foglio-maniglia {
  position: absolute; top: 6px; left: 50%; margin-left: -18px;
  width: 36px; height: 5px; border-radius: 3px;
  background: var(--linea-forte);
}
.foglio-titoli { flex: 1; min-width: 0; padding-top: 6px; }
.foglio-titolo { font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.foglio-sotto { margin-top: 2px; color: var(--ink-2); font-size: var(--t-m); }
.foglio-chiudi { flex: none; color: var(--ink-2); }
.foglio-chiudi .icona { width: 22px; height: 22px; }
.foglio-corpo {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-1) var(--s-5) var(--s-6);
  -webkit-overflow-scrolling: touch;
}
.foglio-piede {
  flex: none;
  display: flex; gap: var(--s-2);
  padding: var(--s-3) var(--s-5) calc(var(--s-3) + var(--sicuro-giu));
  border-top: 0.5px solid var(--linea);
  background: var(--superficie);
}
.foglio-piede .bottone { flex: 1 1 0; }
.foglio-testo { color: var(--ink-2); font-size: var(--t-m); }
.foglio-azioni { display: flex; flex-direction: column; gap: var(--s-4); }
.foglio-azioni > :not(.gruppo) { color: var(--ink-2); font-size: var(--t-m); }
.foglio .gruppo { background: var(--campo); box-shadow: none; border: 1px solid var(--linea); }

@media (min-width: 720px) {
  .foglio-pannello {
    left: 50%; top: 50%; bottom: auto; right: auto;
    width: min(520px, calc(100vw - 48px));
    max-height: min(86dvh, 820px);
    border-radius: var(--r-xl);
    transform: translate(-50%, -48%) scale(.96);
    opacity: 0;
    transition: transform var(--d-2) var(--curva), opacity var(--d-1) ease;
  }
  .foglio-largo { width: min(680px, calc(100vw - 48px)); }
  .foglio.aperto .foglio-pannello { transform: translate(-50%, -50%); opacity: 1; }
  .foglio-testa { cursor: auto; touch-action: auto; padding-top: var(--s-5); }
  .foglio-maniglia { display: none; }
  .foglio-titoli { padding-top: 4px; }
  .foglio-piede { border-radius: 0 0 var(--r-xl) var(--r-xl); justify-content: flex-end; }
  .foglio-piede .bottone { flex: 0 1 auto; min-width: 140px; }
  .foglio-piede .bottone-largo { width: auto; }
}

/* ------------------------------------------------------------ settimane */
.legenda { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0 var(--s-1) var(--s-3); font-size: var(--t-s); color: var(--ink-2); }
.legenda-voce { display: inline-flex; align-items: center; gap: 6px; }
.campione { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; }
.campione-libera { background: var(--superficie); border: 1.5px solid var(--linea-forte); border-radius: 50%; }
.campione-approvata { background: var(--accento); }
.campione-attesa { background: repeating-linear-gradient(135deg, var(--accento-righe) 0 3px, var(--accento-tinta) 3px 6px); border: 1px dashed var(--accento); }
.campione-no { background: var(--superficie-2); border: 1px solid var(--linea-forte); }
.campione-altro { background: var(--ink-3); }
.campione-mezza { background: linear-gradient(90deg, var(--accento) 50%, var(--superficie-2) 50%); }
.campione-chiuso { background: var(--superficie-2); border: 1px solid var(--linea-forte); }
.campione-riposo { background: repeating-linear-gradient(135deg, var(--linea-forte) 0 1.5px, transparent 1.5px 5px); border: 1px solid var(--linea); }

.salta-mesi {
  position: sticky; z-index: 5;
  top: calc(var(--alto-h) + var(--sicuro-su));
  display: flex; gap: var(--s-1);
  margin: 0 calc(-1 * var(--s-4)); padding: var(--s-2) var(--s-4);
  overflow-x: auto; scrollbar-width: none;
  background: var(--materiale);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.salta-mesi::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .salta-mesi { top: 0; margin: 0; padding: var(--s-2) 0; border-radius: 0; } }
.salta-mese {
  position: relative; flex: none;
  display: inline-flex; align-items: baseline; gap: 3px;
  min-height: 44px; padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-pieno); background: transparent;
  color: var(--ink-2); font-size: var(--t-m); font-weight: 600;
  align-items: center;
}
.salta-mese:active { background: var(--superficie-2); }
.salta-mese.attivo { background: var(--accento-tinta); color: var(--accento-forte); }
.salta-anno { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; }
.salta-mese.con-tue::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; margin-left: -2.5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accento);
}

.mese { scroll-margin-top: calc(var(--alto-h) + var(--sicuro-su) + 64px); }
.mese + .mese { margin-top: var(--s-6); }
.mese-titolo {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin: var(--s-4) var(--s-1) var(--s-2);
  font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.02em;
}
.mese-anno { color: var(--ink-3); font-weight: 500; }
.mese-settimane {
  list-style: none; margin: 0; padding: 0;
  background: var(--superficie);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--ombra-1);
}

.sett { position: relative; }
.sett + .sett::before {
  content: ""; position: absolute; top: 0; right: 0; left: 56px; z-index: 1;
  border-top: 0.5px solid var(--linea-forte);
}
.sett-tocco {
  display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 62px;
  padding: var(--s-2) var(--s-4);
  border: 0; background: transparent; text-align: left; color: inherit;
  transition: background-color var(--d-1) ease;
}
button.sett-tocco:active { background: var(--superficie-2); }
button.sett-tocco:focus-visible { outline-offset: -3px; border-radius: 0; }
.sett-num { font-size: var(--t-s); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: center; }
.sett-testi { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sett-date { font-size: var(--t-b); font-weight: 600; letter-spacing: -0.015em; }
.sett-stato { font-size: var(--t-m); color: var(--ink-2); }
.sett-segno {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  justify-self: end;
}
.sett-segno .icona { width: 16px; height: 16px; }

/* libera: un cerchio vuoto da riempire */
.sett-libera .sett-segno { border: 1.5px solid var(--linea-forte); color: transparent; transition: background-color var(--d-1) ease, border-color var(--d-1) ease, color var(--d-1) ease, transform var(--d-2) var(--curva); }
@media (hover: hover) { .sett-libera button.sett-tocco:hover .sett-segno { border-color: var(--accento); } }

/* scelta: le settimane scelte si saldano in un blocco contornato */
.sett.scelta .sett-tocco { background: var(--accento-tinta); }
.sett.scelta .sett-segno { background: var(--accento); border-color: var(--accento); color: var(--su-accento); transform: scale(1.04); }
.sett.scelta .sett-date { color: var(--accento-forte); }
.sett.scelta .sett-num { color: var(--accento); }
.sett.scelta + .sett.scelta::before { border-top-color: var(--accento-righe); left: 0; }
.sett.scelta::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 2px 0 0 var(--accento), inset -2px 0 0 var(--accento);
}
.sett.scelta-inizio::after { box-shadow: inset 2px 0 0 var(--accento), inset -2px 0 0 var(--accento), inset 0 2px 0 var(--accento); }
.sett.scelta-fine::after { box-shadow: inset 2px 0 0 var(--accento), inset -2px 0 0 var(--accento), inset 0 -2px 0 var(--accento); }
.sett.scelta-inizio.scelta-fine::after { box-shadow: inset 0 0 0 2px var(--accento); }
.mese-settimane .sett:first-child.scelta::after { border-top-left-radius: var(--r-l); border-top-right-radius: var(--r-l); }
.mese-settimane .sett:last-child.scelta::after { border-bottom-left-radius: var(--r-l); border-bottom-right-radius: var(--r-l); }

/* tua, approvata: piena */
.sett-tua-approvata .sett-tocco { background: var(--accento); color: var(--su-accento); }
.sett-tua-approvata .sett-stato, .sett-tua-approvata .sett-num { color: color-mix(in srgb, var(--su-accento) 78%, transparent); }
.sett-tua-approvata .sett-segno { color: var(--su-accento); background: color-mix(in srgb, var(--su-accento) 18%, transparent); }
.sett-tua-approvata:not(.blocco-inizio)::before { border-top-color: color-mix(in srgb, var(--su-accento) 22%, transparent) !important; left: 56px; }
button.sett-tocco:active { filter: none; }
.sett-tua-approvata button.sett-tocco:active { background: var(--accento-premuto); }

/* tua, in attesa: a righe, col bordo tratteggiato */
.sett-tua-in_attesa .sett-tocco {
  background: repeating-linear-gradient(135deg, var(--accento-tinta-2) 0 6px, var(--accento-tinta) 6px 12px);
}
.sett-tua-in_attesa .sett-segno { color: var(--accento); }
.sett-tua-in_attesa .sett-stato { color: var(--accento-forte); font-weight: 500; }
.sett-tua-in_attesa:not(.blocco-inizio)::before { border-top: 0.5px dashed var(--accento-righe) !important; left: 56px; }

/* tua, annullamento chiesto */
.sett-tua-annullamento .sett-tocco { background: var(--accento-tinta-2); }
.sett-tua-annullamento .sett-segno { color: var(--ink-2); }

/* non disponibile e chiusa: spente, nessun cerchio */
.sett-non_disponibile .sett-date, .sett-chiusa .sett-date, .sett-passata .sett-date { color: var(--ink-3); font-weight: 500; }
.sett-non_disponibile .sett-stato, .sett-chiusa .sett-stato, .sett-passata .sett-stato { color: var(--ink-3); }
.sett-non_disponibile .sett-tocco, .sett-chiusa .sett-tocco, .sett-passata .sett-tocco { cursor: default; }

/* assenze tue parziali (ore, mezze giornate, giorni sciolti): la settimana
   tiene il suo stato, sotto una riga con l'assenza; si tocca per aprirla */
.sett-mie { font-size: var(--t-m); color: var(--accento-forte); font-weight: 500; }
.sett-libera.sett-con-mie .sett-stato { color: var(--accento-forte); font-weight: 500; }
.sett-libera.sett-con-mie .sett-segno { border: 0; color: var(--accento); }
.sett-con-mie button.sett-tocco { cursor: pointer; }

/* elenco compatto, dentro il foglio del rifiuto */
.settimane-compatte .mese-titolo { font-size: var(--t-b); margin-top: var(--s-3); }
.settimane-compatte .mese + .mese { margin-top: var(--s-2); }
.settimane-compatte .mese-settimane { background: var(--campo); box-shadow: none; border: 1px solid var(--linea); }
.settimane-compatte .sett-tocco { min-height: 54px; }
.alternativa { border-radius: var(--r-l); border: 1px solid var(--linea); padding: 0 var(--s-4); }
.alternativa[open] { padding-bottom: var(--s-1); }
.alternativa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 52px; cursor: pointer; font-weight: 600; list-style: none;
}
.alternativa summary::-webkit-details-marker { display: none; }
.alternativa summary::after { content: "+"; font-size: var(--t-l); color: var(--accento); font-weight: 400; }
.alternativa[open] summary::after { content: "−"; }
.alternativa-facoltativo { margin-left: auto; font-size: var(--t-s); color: var(--ink-3); font-weight: 500; }
/* Nessuno scorrimento annidato: scorre il foglio, e la scelta resta in vista in fondo. */
.alternativa-elenco { margin-top: var(--s-2); }
.alternativa-scelta {
  position: sticky; bottom: 0; z-index: 3;
  margin: var(--s-2) calc(-1 * var(--s-4)) 0; padding: var(--s-3) var(--s-4);
  background: var(--superficie); border-top: 0.5px solid var(--linea);
  font-size: var(--t-m); font-weight: 600; color: var(--accento-forte);
}

/* scelta fra elenco e calendario */
.scelta-vista .segmentato { max-width: 22rem; }

/* ------------------------------------------------------------ settimane: calendario del mese
   Una riga per settimana, da lunedì a domenica. Dietro lunedì–sabato c'è la
   «fascia» della settimana, con gli stessi stati dell'elenco: libera = chiara
   coi numeri pieni, scelta = contornata, in attesa = a righe, approvata =
   piena, non disponibile = spenta. La domenica resta fuori, attenuata. */
.calendario {
  padding: var(--s-2) var(--s-2) var(--s-3);
  background: var(--superficie);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-1);
  overflow: hidden;
}
.cal-testa { display: flex; align-items: center; gap: var(--s-1); padding-bottom: var(--s-1); }
.cal-titolo {
  flex: 1; min-width: 0; padding-left: var(--s-2);
  font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.02em;
}
.cal-titolo-anno { color: var(--ink-3); font-weight: 500; }
.cal-oggi { min-height: 36px; }
.cal-nomi, .cal-tocco { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-nomi { padding: var(--s-1) 0 var(--s-2); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); text-align: center; }
.cal-nomi .cal-domenica { color: var(--ink-3); font-weight: 500; }
.cal-righe { list-style: none; margin: 0; padding: 0; }
.cal-entra-avanti { animation: cal-entra-avanti var(--d-2) var(--curva); }
.cal-entra-indietro { animation: cal-entra-indietro var(--d-2) var(--curva); }
@keyframes cal-entra-avanti { from { opacity: 0; transform: translateX(14px); } }
@keyframes cal-entra-indietro { from { opacity: 0; transform: translateX(-14px); } }

.cal-tocco {
  position: relative; align-items: center;
  width: 100%; min-height: 52px; padding: 0; margin: 0;
  border: 0; background: transparent; color: inherit; text-align: center;
}
button.cal-tocco:focus-visible { outline-offset: -2px; border-radius: 14px; }
/* la fascia: copre lunedì–sabato */
.cal-tocco::before {
  content: ""; position: absolute; z-index: 0;
  top: 3px; bottom: 3px; left: 1px; width: calc(100% * 6 / 7 - 2px);
  border-radius: 14px;
  transition: background-color var(--d-1) ease, box-shadow var(--d-1) ease;
}
.cal-giorno {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
}
.cal-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: var(--t-b); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.cal-giorno.cal-fuori-mese .cal-num { opacity: .42; }
.cal-giorno.cal-festivo .cal-num { color: var(--ink-3); font-weight: 500; }
.cal-giorno.cal-domenica .cal-num { color: var(--ink-3); font-weight: 400; }
.cal-giorno.cal-oggi-giorno .cal-num { background: var(--accento); color: var(--su-accento); font-weight: 700; opacity: 1; }
/* un'assenza tua parziale (ore, mezza giornata, un giorno sciolto) su quel giorno */
.cal-segno {
  position: absolute; left: 50%; bottom: 5px; margin-left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accento);
}
.cal-segno-in_attesa, .cal-segno-annullamento { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accento); }

/* libera: chiara, coi numeri pieni; si tocca */
.cal-libera .cal-num { font-weight: 650; }
@media (hover: hover) { .cal-libera button.cal-tocco:hover::before { box-shadow: inset 0 0 0 1.5px var(--accento-righe); } }
.cal-libera button.cal-tocco:active::before { background: var(--superficie-2); }

/* scelta: le settimane scelte si saldano in un blocco contornato */
.cal-sett.scelta .cal-tocco::before {
  background: var(--accento-tinta);
  box-shadow: inset 2px 0 0 var(--accento), inset -2px 0 0 var(--accento);
}
.cal-sett.scelta.scelta-inizio .cal-tocco::before { box-shadow: inset 2px 0 0 var(--accento), inset -2px 0 0 var(--accento), inset 0 2px 0 var(--accento); }
.cal-sett.scelta.scelta-fine .cal-tocco::before { box-shadow: inset 2px 0 0 var(--accento), inset -2px 0 0 var(--accento), inset 0 -2px 0 var(--accento); }
.cal-sett.scelta.scelta-inizio.scelta-fine .cal-tocco::before { box-shadow: inset 0 0 0 2px var(--accento); }
.cal-sett.scelta:not(.scelta-inizio) .cal-tocco::before { top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.cal-sett.scelta:not(.scelta-fine) .cal-tocco::before { bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cal-sett.scelta .cal-giorno:not(.cal-domenica) .cal-num { color: var(--accento-forte); font-weight: 700; }
.cal-sett.scelta .cal-giorno.cal-festivo:not(.cal-domenica) .cal-num, .cal-tua-in_attesa .cal-giorno.cal-festivo:not(.cal-domenica):not(.cal-oggi-giorno) .cal-num { color: var(--accento); font-weight: 400; opacity: .7; }

/* tue: le settimane di una richiesta si saldano */
.cal-tua:not(.blocco-inizio) .cal-tocco::before { top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.cal-tua:not(.blocco-fine) .cal-tocco::before { bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cal-tua-approvata .cal-tocco::before { background: var(--accento); }
.cal-tua-approvata .cal-giorno:not(.cal-domenica) .cal-num { color: var(--su-accento); font-weight: 650; }
.cal-tua-approvata .cal-giorno.cal-festivo:not(.cal-domenica) .cal-num { color: color-mix(in srgb, var(--su-accento) 62%, transparent); }
.cal-tua-approvata .cal-giorno.cal-oggi-giorno:not(.cal-domenica) .cal-num { background: var(--su-accento); color: var(--accento); }
.cal-tua-approvata .cal-segno { background: var(--su-accento); }
.cal-tua-approvata button.cal-tocco:active::before { background: var(--accento-premuto); }
.cal-tua-in_attesa .cal-tocco::before {
  background: repeating-linear-gradient(135deg, var(--accento-tinta-2) 0 6px, var(--accento-tinta) 6px 12px);
  box-shadow: inset 1px 0 0 var(--accento-righe), inset -1px 0 0 var(--accento-righe);
}
.cal-tua-in_attesa.blocco-inizio .cal-tocco::before { box-shadow: inset 1px 0 0 var(--accento-righe), inset -1px 0 0 var(--accento-righe), inset 0 1px 0 var(--accento-righe); }
.cal-tua-in_attesa.blocco-fine .cal-tocco::before { box-shadow: inset 1px 0 0 var(--accento-righe), inset -1px 0 0 var(--accento-righe), inset 0 -1px 0 var(--accento-righe); }
.cal-tua-in_attesa.blocco-inizio.blocco-fine .cal-tocco::before { box-shadow: inset 0 0 0 1px var(--accento-righe); }
.cal-tua-in_attesa .cal-giorno:not(.cal-domenica):not(.cal-oggi-giorno) .cal-num { color: var(--accento-forte); font-weight: 650; }
.cal-tua-annullamento .cal-tocco::before { background: var(--accento-tinta-2); }
.cal-tua-annullamento .cal-giorno:not(.cal-domenica):not(.cal-oggi-giorno) .cal-num { color: var(--ink-2); }

/* non disponibile, chiusa, passata: spente, non si toccano */
.cal-no .cal-tocco::before { background: var(--superficie-2); }
.cal-chiusa .cal-tocco::before { background: repeating-linear-gradient(135deg, var(--linea-forte) 0 1.5px, transparent 1.5px 6px); }
.cal-no .cal-giorno:not(.cal-oggi-giorno) .cal-num, .cal-chiusa .cal-giorno:not(.cal-oggi-giorno) .cal-num { color: var(--ink-3); font-weight: 400; }
.cal-passata .cal-giorno:not(.cal-oggi-giorno) .cal-num, .cal-fuori .cal-giorno:not(.cal-oggi-giorno) .cal-num { color: var(--ink-3); font-weight: 400; opacity: .55; }
.cal-trascorsa { opacity: .55; }

/* una settimana libera con un'assenza tua dentro: si apre, non si sceglie */
.cal-libera.cal-con-mie .cal-tocco::before { box-shadow: inset 0 0 0 1px var(--accento-righe); }

/* la legenda, quando si guarda il calendario: la libera è una fascia chiara */
.legenda-cal .campione-libera { border-radius: 4px; border-width: 1px; }

/* banner delle raccolte */
.banner-elenco { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.banner {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-l);
  background: var(--accento-tinta);
}
.banner-titolo { font-weight: 650; }
.banner-testi p:not(.banner-titolo) { font-size: var(--t-m); color: var(--ink-2); }
.banner-messaggio { margin-top: var(--s-1); font-style: italic; }
.banner-azioni { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.banner-letto { display: inline-flex; align-items: center; gap: 4px; color: var(--accento-forte); font-size: var(--t-m); font-weight: 600; padding: 0 var(--s-2); }

/* le tue settimane in programma */
.riassunto { margin-bottom: var(--s-6); }
.riassunto-elenco { list-style: none; padding: 0; display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4) var(--s-1); }
.riassunto-elenco::-webkit-scrollbar { display: none; }
.riassunto-voce {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 152px; min-height: 64px; padding: var(--s-3) var(--s-4);
  border: 0; border-radius: var(--r-l); text-align: left;
  background: var(--superficie); box-shadow: var(--ombra-1);
}
.riassunto-periodo { font-weight: 650; white-space: nowrap; }
.riassunto-stato { font-size: var(--t-s); color: var(--ink-2); font-weight: 600; }
.riassunto-approvata { background: var(--accento); color: var(--su-accento); }
.riassunto-approvata .riassunto-stato { color: color-mix(in srgb, var(--su-accento) 80%, transparent); }
.riassunto-in_attesa { background: repeating-linear-gradient(135deg, var(--accento-tinta-2) 0 6px, var(--accento-tinta) 6px 12px); box-shadow: inset 0 0 0 1px var(--accento-righe); }
.riassunto-in_attesa .riassunto-stato { color: var(--accento-forte); }
.riassunto-voce:active { transform: scale(.98); transition: transform var(--d-tocco) ease-out; }

/* conferma della richiesta */
.conferma-periodo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: var(--r-l); overflow: hidden;
  background: var(--accento-tinta);
}
.conferma-periodo p { display: flex; flex-direction: column; padding: var(--s-4); }
.conferma-a { border-left: 1px solid var(--accento-righe); }
.conferma-etichetta { font-size: var(--t-s); color: var(--accento-forte); font-weight: 600; }
.conferma-data { font-size: var(--t-b); font-weight: 650; line-height: 1.3; }
.anteprima { display: flex; flex-direction: column; gap: var(--s-2); transition: opacity var(--d-1) ease; }
.anteprima.in-aggiornamento { opacity: .55; }
.anteprima-giorni { font-family: var(--font-titoli); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ le mie richieste */
.scegli-anno { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin: calc(-1 * var(--s-2)) 0 var(--s-3); }
.scegli-anno:empty { display: none; }
.scegli-anno-valore { min-width: 4ch; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.voci { list-style: none; padding: 0; background: var(--superficie); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombra-1); }
.voce { position: relative; }
.voce + .voce::before { content: ""; position: absolute; top: 0; right: 0; left: 72px; border-top: 0.5px solid var(--linea-forte); }
.voce-tocco {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; min-height: 72px; padding: var(--s-3) var(--s-4);
  border: 0; background: transparent; text-align: left; color: inherit;
}
.voce-tocco:active { background: var(--superficie-2); }
.datario {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 48px; border-radius: 10px;
  background: var(--superficie-2); line-height: 1.05;
}
.datario-mese { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.datario-giorno { font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 700; font-variant-numeric: tabular-nums; }
.voce-approvata .datario { background: var(--accento); color: var(--su-accento); }
.voce-approvata .datario-mese { color: color-mix(in srgb, var(--su-accento) 80%, transparent); }
.voce-in_attesa .datario { background: repeating-linear-gradient(135deg, var(--accento-tinta-2) 0 5px, var(--accento-tinta) 5px 10px); box-shadow: inset 0 0 0 1px var(--accento-righe); }
.voce-rifiutata .datario-giorno, .voce-ritirata .datario-giorno, .voce-annullata .datario-giorno { color: var(--ink-3); }
.voce-testi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.voce-persona { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); }
.voce-periodo { font-weight: 600; letter-spacing: -0.015em; }
.voce-sotto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-m); color: var(--ink-2); }
.voce-freccia { color: var(--ink-3); width: 18px; height: 18px; }
.voce-motivo { margin: -4px var(--s-4) var(--s-3) 72px; font-size: var(--t-m); color: var(--ink-2); font-style: italic; }
.voce-proposta {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 var(--s-4) var(--s-3) 72px; min-height: 44px; padding: 0 var(--s-3);
  border-radius: var(--r-m); background: var(--accento-tinta); color: var(--accento-forte);
  font-size: var(--t-m); font-weight: 600;
}
.voce-proposta:hover { text-decoration: none; }

/* ------------------------------------------------------------ dettaglio di una richiesta */
.dettaglio { display: flex; flex-direction: column; gap: var(--s-5); }
.dettaglio-testa { display: flex; flex-direction: column; gap: var(--s-1); }
.dettaglio-persona { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; margin-bottom: var(--s-2); }
.dettaglio-persona .avatar { width: 32px; height: 32px; }
.dettaglio-periodo { font-family: var(--font-titoli); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; }
.dettaglio-quanto { color: var(--ink-2); font-size: var(--t-m); }
.dettaglio-inserita { color: var(--ink-3); font-size: var(--t-m); }
.dettaglio-stati { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.blocco-testo h3 { font-size: var(--t-m); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s-1); }
.blocco-testo > p { font-size: var(--t-b); }
.blocco-firma { margin-top: var(--s-1); font-size: var(--t-s) !important; color: var(--ink-2); }
.dettaglio-azioni { display: flex; flex-direction: column; gap: var(--s-2); }
.dettaglio-azioni .bottone { width: 100%; }
@media (min-width: 720px) { .dettaglio-azioni { flex-direction: row; flex-wrap: wrap; } .dettaglio-azioni .bottone { width: auto; } }
.dettaglio-storico summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--accento); }
.storico { list-style: none; padding: 0; margin-top: var(--s-2); }
.storico-voce { position: relative; display: flex; gap: var(--s-3); padding-bottom: var(--s-4); }
.storico-voce:not(:last-child)::after { content: ""; position: absolute; left: 4.5px; top: 16px; bottom: 0; border-left: 1px solid var(--linea-forte); }
.storico-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--linea-forte); margin-top: 7px; flex: none; }
.storico-approvata .storico-punto, .storico-creata_per_conto .storico-punto, .storico-approvata_automaticamente .storico-punto { background: var(--accento); }
.storico-rifiutata .storico-punto { background: var(--pericolo); }
.storico-testo { font-size: var(--t-m); }
.storico-nota { color: var(--ink-2); font-style: italic; }
.storico-dettaglio, .storico-quando { color: var(--ink-2); font-size: var(--t-s); }

/* ------------------------------------------------------------ da decidere */
.carte { display: flex; flex-direction: column; gap: var(--s-3); }
.carta {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-l);
  background: var(--superficie);
  box-shadow: var(--ombra-1);
  transition: opacity var(--d-2) ease, transform var(--d-2) var(--curva), box-shadow var(--d-1) ease;
}
.carta.selezionata { box-shadow: inset 0 0 0 2px var(--accento); }
.carta.decisa { opacity: 0; transform: scale(.98); }
.carta-testa { display: flex; align-items: center; gap: var(--s-3); }
.carta-casella { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 44px; margin-left: -4px; }
.casella { width: 22px; height: 22px; accent-color: var(--accento); margin: 0; }
.carta-chi { flex: 1; min-width: 0; }
.carta-nome { font-weight: 650; }
.carta-meta { font-size: var(--t-s); color: var(--ink-2); }
.carta-periodo {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s-2);
  margin: 0 calc(-1 * var(--s-2)); padding: var(--s-2);
  border: 0; border-radius: var(--r-m); background: transparent; text-align: left; color: inherit;
}
.carta-periodo:active { background: var(--superficie-2); }
.carta-date { font-family: var(--font-titoli); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; }
.carta-quanto { grid-column: 1; color: var(--ink-2); font-size: var(--t-m); }
.carta-freccia { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-3); width: 18px; height: 18px; }
.carta-nota { font-size: var(--t-m); color: var(--ink-2); font-style: italic; }
.carta-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
@media (min-width: 720px) { .carta-azioni { grid-template-columns: repeat(2, minmax(150px, auto)); justify-content: end; } }

/* ------------------------------------------------------------ planner */
.planner-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.planner-nav { display: flex; align-items: center; gap: var(--s-1); flex: 1 1 auto; min-width: 0; }
.planner-periodo { font-weight: 650; text-align: center; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-filtro select { min-height: 40px; padding-top: 6px; padding-bottom: 6px; font-size: var(--t-m); width: auto; }
.planner-zona { transition: opacity var(--d-1) ease; }
.planner-zona.in-aggiornamento { opacity: .5; }
.planner-scorri {
  overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--s-4));
  padding: 0 var(--s-4);
}
@media (min-width: 960px) { .planner-scorri { margin: 0; padding: 0; } }
/* il mese scorre di lato: niente sbordo, sennò si vede passare sotto i nomi */
.planner-scorri-mese { margin: 0; padding: 0; border-radius: var(--r-l); }
.planner {
  --nome-w: 92px;
  --cella-w: 40px;
  width: 100%; min-width: min-content;
  background: var(--superficie);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-1);
  /* clip e non hidden: hidden ne farebbe il contenitore dello scorrimento, e
     la colonna dei nomi (sticky) scapperebbe quando il mese scorre di lato */
  overflow: hidden;
  overflow: clip;
}
.planner.settimane-1 { --nome-w: 108px; }
.planner.settimane-2 { --nome-w: 132px; --cella-w: 38px; }
.planner.settimane-4, .planner.settimane-5, .planner.settimane-6 { --nome-w: 128px; --cella-w: 29px; }
/* il mese sul telefono: nomi corti, si scorre di lato */
@media (max-width: 759px) {
  .planner.planner-mese { --nome-w: 96px; }
  .planner-mese .pl-persona:not(.io) .pl-nome-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .planner-mese .pl-nome-breve { display: block; }
}
/* il mese su un computer: celle strette, così sei settimane stanno in pagina */
@media (min-width: 1100px) {
  .planner.planner-mese { --nome-w: 120px; --cella-w: 22px; }
  .planner-mese .pl-numero { width: 22px; height: 22px; font-size: var(--t-s); }
  .planner-mese .pl-settimana-date { display: none; }
  .planner-mese .pl-ore { display: none; }
}
.pl-giorno.fuori-mese .pl-numero, .pl-giorno.fuori-mese .pl-iniziale { opacity: .4; }
.pl-cella.fuori-mese, .pl-cop.fuori-mese { background-color: color-mix(in srgb, var(--superficie-2) 50%, transparent); }
.pl-cella.fuori-mese .pl-assenza, .pl-cop.fuori-mese > span { opacity: .45; }
.pl-riga {
  display: grid;
  grid-template-columns: var(--nome-w) repeat(var(--colonne), minmax(var(--cella-w), 1fr));
}
.pl-nome {
  position: sticky; left: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--s-1);
  min-width: 0; padding: 0 var(--s-2) 0 var(--s-3);
  background: var(--superficie);
  border-right: 0.5px solid var(--linea-forte);
  font-size: var(--t-m);
}
.pl-nome-testo, .pl-nome-breve { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-nome-breve { display: none; }
.planner.settimane-1 .pl-persona:not(.io) .pl-nome-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.planner.settimane-1 .pl-nome-breve { display: block; }
.pl-settimane .pl-settimana {
  display: flex; align-items: baseline; gap: var(--s-2); justify-content: center;
  padding: var(--s-2) var(--s-2) 0;
  border-left: 1px solid var(--linea-forte);
  font-size: var(--t-s); white-space: nowrap; overflow: hidden;
}
.pl-settimana-num { font-weight: 650; color: var(--ink); }
.pl-settimana-date { color: var(--ink-2); }
.planner.settimane-1 .pl-settimane { display: none; }
.pl-giorno {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-1) 0 var(--s-2);
  border-bottom: 0.5px solid var(--linea-forte);
  line-height: 1.15;
}
.pl-giorni .pl-angolo { border-bottom: 0.5px solid var(--linea-forte); }
.pl-iniziale { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; }
.pl-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: var(--t-m); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pl-giorno.oggi .pl-numero { background: var(--accento); color: var(--su-accento); }
.pl-giorno.chiuso .pl-numero { color: var(--ink-3); }
.pl-giorno.bloccato .pl-iniziale::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 2px; border-radius: 50%; background: var(--pericolo); vertical-align: middle; }
.pl-giorno.lunedi, .pl-cella.lunedi, .pl-cop.lunedi { border-left: 1px solid var(--linea-forte); }
.pl-reparto { background: var(--canvas); }
.pl-reparto .pl-nome { background: var(--canvas); flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-top: var(--s-2); padding-bottom: var(--s-1); line-height: 1.2; }
.pl-reparto-nome { font-size: var(--t-s); font-weight: 650; color: var(--ink-2); }
.pl-minimo { font-size: var(--t-xs); color: var(--ink-3); }
.pl-cop {
  display: flex; align-items: center; justify-content: center;
  min-height: 32px;
  font-size: var(--t-s); color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 600;
}
.pl-cop.scarsa { color: var(--pericolo); background: var(--pericolo-tinta); }
.pl-cop.chiuso { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
.pl-persona { border-top: 0.5px solid var(--linea); }
.pl-persona.io .pl-nome-testo { font-weight: 600; }
.pl-cella {
  position: relative;
  min-height: 46px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent;
}
button.pl-cella:active { background: var(--superficie-2); }
button.pl-cella:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; border-radius: 4px; }
.pl-cella.chiuso { background: color-mix(in srgb, var(--superficie-2) 70%, transparent); }
.pl-cella.non-lavora { background: repeating-linear-gradient(135deg, var(--linea) 0 1px, transparent 1px 6px); }
.pl-cella.oggi::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accento) 7%, transparent); pointer-events: none; }
.pl-assenza {
  position: absolute; top: 9px; bottom: 9px; left: 3px; right: 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--accento);
  color: var(--su-accento);
}
.pl-assenza.unita-prima { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pl-assenza.unita-dopo { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pl-assenza.ass-in_attesa {
  background: repeating-linear-gradient(135deg, var(--accento-righe) 0 4px, var(--accento-tinta) 4px 8px);
  box-shadow: inset 0 0 0 1.5px var(--accento);
  color: var(--accento-forte);
}
.pl-assenza.ass-annullamento { opacity: .5; }
.pl-assenza.ass-altro { background: var(--ink-3); color: var(--superficie); }
.pl-assenza.ass-altro.ass-in_attesa { background: var(--superficie-2); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pl-assenza.fr-mattina { right: 50%; border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
.pl-assenza.fr-pomeriggio { left: 50%; border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.pl-assenza.fr-ore { left: 3px; right: 3px; top: 14px; bottom: 14px; border-radius: 6px; font-size: 10.5px; letter-spacing: -0.02em; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-assenza.pausa { opacity: .35; }
.legenda-planner { margin-top: var(--s-4); }

/* ------------------------------------------------------------ accesso */
.accesso {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sicuro-su) + var(--s-8)) calc(var(--s-5) + var(--sicuro-dx)) calc(var(--sicuro-giu) + var(--s-8)) calc(var(--s-5) + var(--sicuro-sx));
}
.accesso-colonna { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--s-5); }
.accesso-colonna-larga { max-width: 480px; }
.accesso-marchio { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.accesso-nome { font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.02em; }
.accesso-titolo { font-family: var(--font-titoli); font-size: var(--t-xxxl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.accesso-titolo:focus { outline: none; }
.accesso-sotto { color: var(--ink-2); margin-top: calc(-1 * var(--s-3)); }
.accesso-nota { color: var(--ink-2); font-size: var(--t-m); text-align: center; }
.accesso .modulo { gap: var(--s-4); }
.accesso input { background: var(--superficie); }
.passi { list-style: none; padding: 0; counter-reset: passo; display: flex; flex-direction: column; gap: var(--s-5); }
.passi > li { counter-increment: passo; position: relative; padding-left: 40px; font-size: var(--t-m); }
.passi > li::before {
  content: counter(passo); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accento-tinta); color: var(--accento-forte); font-weight: 700; font-size: var(--t-s);
}
.passi .modulo { margin-top: var(--s-3); }
.qr-riquadro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-3); }
.qr { width: 184px; height: 184px; padding: 10px; background: #fff; border-radius: var(--r-m); border: 1px solid var(--linea); }
.chiave-manuale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.chiave { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-m); padding: 6px 10px; border-radius: var(--r-s); background: var(--superficie-2); word-break: break-all; }
.stato-voce { display: flex; gap: var(--s-2); align-items: center; font-weight: 600; color: var(--accento-forte); }

/* ------------------------------------------------------------ profilo e notifiche */
.profilo-testa { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.profilo-nome { font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 700; letter-spacing: -0.02em; }
.profilo-ruolo, .profilo-login { color: var(--ink-2); font-size: var(--t-m); }
.istruzioni { font-size: var(--t-m); }
.istruzioni summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accento); font-weight: 600; }
.istruzioni ol { padding-left: var(--s-5); color: var(--ink-2); display: flex; flex-direction: column; gap: var(--s-1); }
.testo-da-copiare { font-size: var(--t-m); }
.elenco-semplice { padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }

.notifiche { list-style: none; padding: 0; }
.notifica { position: relative; }
.notifica + .notifica::before { content: ""; position: absolute; top: 0; right: 0; left: 36px; border-top: 0.5px solid var(--linea-forte); }
.notifica-tocco { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 64px; padding: var(--s-3) var(--s-4); border: 0; background: transparent; text-align: left; color: inherit; }
.notifica-tocco:active { background: var(--superficie-2); }
.notifica-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--accento); flex: none; }
.notifica.letta .notifica-punto { background: transparent; }
.notifica-testi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notifica-testo { font-weight: 600; }
.notifica.letta .notifica-testo { font-weight: 400; }
.notifica-quando { font-size: var(--t-s); color: var(--ink-2); }

.prosa { max-width: 62ch; color: var(--ink); }
.prosa + .prosa { margin-top: var(--s-3); }
.come-funziona { padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.testo-informativa p + p { margin-top: var(--s-3); }
.sezione > .prosa, .sezione > .testo-informativa, .sezione > .come-funziona { padding: var(--s-4) var(--s-5); background: var(--superficie); border-radius: var(--r-l); }
.sezione > .come-funziona { padding-left: var(--s-10); }
.citazione { font-style: italic; color: var(--ink-2); margin-bottom: var(--s-4); }

/* ------------------------------------------------------------ gestione */
.orario-giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); }
.orario-giorno { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--t-s); font-weight: 600; color: var(--ink-2); }
.orario-giorno input { padding: 8px 2px; text-align: center; min-height: 44px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.orario-giorno input::-webkit-inner-spin-button, .orario-giorno input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.orario-somma { font-size: var(--t-m); font-weight: 600; font-variant-numeric: tabular-nums; }
.spunte { display: flex; flex-direction: column; }
.spunta-voce { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); cursor: pointer; }
.spunta-voce + .spunta-voce { border-top: 0.5px solid var(--linea-forte); }
.spunta-voce input { width: 22px; height: 22px; accent-color: var(--accento); margin: 0; }

.colonne { display: grid; gap: 0 var(--s-8); }
@media (min-width: 1100px) { .contenuto-largo .colonne, .colonne { grid-template-columns: 1fr; } }
.colonne .sezione .bottone-tenue { margin-top: var(--s-2); }
.festivi { list-style: none; padding: 0; }
.festivo { position: relative; display: grid; grid-template-columns: 7.5em 1fr auto; gap: var(--s-2); align-items: center; min-height: 48px; padding: 0 var(--s-4); font-size: var(--t-m); }
.festivo + .festivo::before { content: ""; position: absolute; top: 0; left: var(--s-4); right: 0; border-top: 0.5px solid var(--linea-forte); }
.festivo-data { font-weight: 600; font-variant-numeric: tabular-nums; }
.festivo-giorno { color: var(--ink-2); font-size: var(--t-s); }

.barra-filtri { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.barra-filtri .scegli-anno { margin: 0; }
.export { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.export select { width: auto; min-height: 44px; }

.tabella-scorri { overflow-x: auto; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--ombra-1); }
.tabella { width: 100%; border-collapse: collapse; font-size: var(--t-m); }
.tabella th, .tabella td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 0.5px solid var(--linea-forte); }
.tabella thead th { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); white-space: nowrap; background: var(--superficie); }
.tabella tbody tr:last-child > * { border-bottom: 0; }
.tabella tbody th { font-weight: 500; }
.cella-persona { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.cella-persona .avatar { width: 28px; height: 28px; font-size: 11px; }
.rp-valore { display: block; font-weight: 650; font-variant-numeric: tabular-nums; }
.rp-sotto, .rp-attesa { display: block; font-size: var(--t-s); color: var(--ink-2); }
.rp-attesa { color: var(--accento-forte); }
.rp-rifiutate { color: var(--pericolo); font-weight: 650; }
.ric-compatte { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.ric-compatte li { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

.cifre { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-bottom: var(--s-4); }
@media (min-width: 720px) { .cifre { grid-template-columns: repeat(4, 1fr); } }
.cifra { display: flex; flex-direction: column; padding: var(--s-4); border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--ombra-1); font-size: var(--t-s); color: var(--ink-2); }
.cifra-n { font-family: var(--font-titoli); font-size: var(--t-xl); font-weight: 700; color: var(--ink); }
.cifra-accento .cifra-n { color: var(--accento); }
.cifra-allarme .cifra-n { color: var(--pericolo); }
.fila-bottoni.solo-schermo { margin-bottom: var(--s-4); }
.solo-schermo.gruppo { margin-bottom: var(--s-4); }

.mappa-scorri { overflow-x: auto; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--ombra-1); }
.mappa { border-collapse: collapse; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.mappa th, .mappa td { padding: 0; text-align: center; }
.mappa-angolo, .mappa-reparto { position: sticky; left: 0; background: var(--superficie); z-index: 1; text-align: left !important; padding: 6px var(--s-3) !important; font-size: var(--t-s); white-space: nowrap; }
.mappa-mese { padding: var(--s-2) var(--s-1) 0 !important; text-align: left !important; font-weight: 650; color: var(--ink-2); }
.mappa-giorno { min-width: 26px; padding: 4px 0 6px !important; color: var(--ink-3); font-weight: 600; }
.mappa-cella { height: 30px; min-width: 26px; color: var(--ink-2); border-top: 0.5px solid var(--linea); }
.mappa-cella.al-limite { background: var(--accento-tinta); color: var(--accento-forte); font-weight: 650; }
.mappa-cella.scarsa { background: var(--pericolo-tinta); color: var(--pericolo); font-weight: 700; }
.mappa .lunedi { border-left: 1px solid var(--linea-forte); }
.conflitti { margin-top: var(--s-3); font-size: var(--t-m); }
.conflitti summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--pericolo); }

/* ------------------------------------------------------------ stampa */
.stampabile { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.storico-stampa { list-style: none; padding: 0; font-size: var(--t-s); color: var(--ink-2); }

@media print {
  .lato, .alto, .schede, .solo-schermo, .barra-fondo, .toasts, .salta { display: none !important; }
  .contenuto { margin: 0 !important; padding: 0 !important; }
  .solo-stampa { display: block; }
  body, html { background: #fff; color: #000; }
  .tabella-scorri, .mappa-scorri, .superficie, .gruppo { box-shadow: none; overflow: visible; }
  .tabella th, .tabella td { border-bottom: 1px solid #bbb; }
}

/* ------------------------------------------------------------ movimento ridotto e trasparenza */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Fogli e barre non scorrono: compaiono con una dissolvenza breve. */
  .foglio-pannello, .foglio.aperto .foglio-pannello { transform: none !important; }
  .foglio-pannello { opacity: 0; transition: opacity 140ms ease !important; }
  .foglio.aperto .foglio-pannello { opacity: 1; }
  .foglio-velo { transition: opacity 140ms ease !important; }
  @media (min-width: 720px) {
    .foglio-pannello, .foglio.aperto .foglio-pannello { transform: translate(-50%, -50%) !important; }
  }
  .barra-fondo { transform: none !important; transition: opacity 140ms ease !important; }
  @media (min-width: 960px) { .barra-fondo { transform: translateX(-50%) !important; } }
  .bottone:active:not(:disabled), .riassunto-voce:active { transform: none; }
  .rotella, .bottone.in-corso::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .alto, .schede, .salta-mesi { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
}