/* Schoolmate — stile formazione (docs/design.md, palette in design/palette.md). Bootstrap 5.3 personalizzato. */

@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/lexend-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/lexend-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/young-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/caveat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif Display Marchio"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/noto-serif-display-marchio-latin.woff2") format("woff2"); }

:root {
  /* scale tonali in OKLCH attorno al logo della British School: blu = navy 800, rosso = rosso 600 */
  --sm-navy-50: #F4F6FF; --sm-navy-100: #E5EBFF; --sm-navy-200: #CCD8FF; --sm-navy-300: #A9BCFF; --sm-navy-400: #8198F9; --sm-navy-500: #6177E3;
  --sm-navy-600: #495CC9; --sm-navy-700: #3744B0; --sm-navy-800: #242E7C; --sm-navy-900: #1A1D74; --sm-navy-950: #0D0D52;
  --sm-rosso-50: #FFF4F2; --sm-rosso-100: #FFE5E1; --sm-rosso-200: #FFCBC3; --sm-rosso-300: #FFA194; --sm-rosso-400: #FF6B5E; --sm-rosso-500: #EB4038;
  --sm-rosso-600: #CD1719; --sm-rosso-700: #AD000A; --sm-rosso-800: #8B0006; --sm-rosso-900: #6A0004; --sm-rosso-950: #470001;
  --sm-azzurro-50: #F1F8FF; --sm-azzurro-100: #DEEEFF; --sm-azzurro-200: #BDDDFF; --sm-azzurro-300: #8FC4FC; --sm-azzurro-400: #5DA5EC; --sm-azzurro-500: #2E85D4;
  --sm-azzurro-600: #006BB9; --sm-azzurro-700: #005696; --sm-azzurro-800: #004174; --sm-azzurro-900: #002F56; --sm-azzurro-950: #001C38;
  --sm-petrolio-50: #EEFAF8; --sm-petrolio-100: #D9F2EE; --sm-petrolio-200: #B3E5DD; --sm-petrolio-300: #80D1C6; --sm-petrolio-400: #3EB5A9; --sm-petrolio-500: #00968A;
  --sm-petrolio-600: #007A70; --sm-petrolio-700: #00625A; --sm-petrolio-800: #004B44; --sm-petrolio-900: #003631; --sm-petrolio-950: #00221E;
  --sm-neutri-50: #F8F9FC; --sm-neutri-100: #F1F2F7; --sm-neutri-200: #E4E6ED; --sm-neutri-300: #D1D4DE; --sm-neutri-400: #A0A4B2; --sm-neutri-500: #7B808F;
  --sm-neutri-600: #5E6373; --sm-neutri-700: #474C5D; --sm-neutri-800: #303545; --sm-neutri-900: #1C2131; --sm-neutri-950: #0D111F;
  --sm-verde-50: #F0FAF2; --sm-verde-100: #DCF3E1; --sm-verde-200: #BBE6C5; --sm-verde-500: #249A54; --sm-verde-600: #007E3F; --sm-verde-700: #006531; --sm-verde-800: #004E24;
  --sm-ambra-50: #FEF5EC; --sm-ambra-100: #FCE8D3; --sm-ambra-200: #F6D2A9; --sm-ambra-500: #B37100; --sm-ambra-600: #915B00; --sm-ambra-700: #754900;
  --sm-ambra-800: #5A3700; --sm-ambra-900: #422700;

  /* ruoli */
  /* tre ruoli di colore, «vassoi blu British» (12/11/2026, tavola https://claude.ai/code/artifact/3ee376b3-882c-4261-92e6-323a714c5d6b,
     variante A: «il grigio spegne la piattaforma»): niente grigio puro, ogni superficie ha un filo del blu del menu. Il quaderno è
     blu chiarissimo, il foglio bianco pieno, i contenitori sono vassoi blu chiari incassati con un filo di grana, i dati e i tasti
     in card bianche. Prima: vassoi grigi su foglio velato (tavola 28ab8461 del 12/11), e ancora prima cinque grigi (A1 dell'11/11) */
  --sm-pagina: #E9EDFA;          /* il quaderno, sotto tutto (sotto c'è l'aurora British) */
  --sm-foglio: #FFFFFF;          /* il foglio della pagina, la testata, le finestre: bianco pieno */
  --sm-vassoio: #E7ECFC;         /* i contenitori, vassoi blu chiari: sezioni, numeri, binario delle linguette, conto del carrello */
  --sm-card-dati: #FFFFFF;       /* i dati: righe, numeri, voci, schede, il corpo delle sezioni */
  --sm-vetro-foglio: #FFFFFF;    /* il foglio e la testata: pieni (la grana di gesso resta) */
  --sm-vetro-filtro-foglio: blur(40px) saturate(125%);
  --sm-primo-piano: #FFFFFF;     /* pulsanti e linguetta scelta: ciò che si preme */
  --sm-scavato: #F3F6FF;         /* i campi in cui si scrive: incassati, chiari e appena azzurri */
  --sm-in-rilievo: var(--sm-card-dati);
  --sm-buio: #C3CAD7; --sm-chiaro: #FFFFFF;   /* ombra e luce del rilievo */
  --sm-grana-vassoio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14  0 0 0 0 .18  0 0 0 0 .49  0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");   /* la grana dei vassoi: carta, appena visibile */
  /* la polvere di gesso del menu (img/gesso.svg, stesso disegno e stesso seme) in blu navy, per il foglio e la testata */
  --sm-grana-foglio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14  0 0 0 0 .18  0 0 0 0 .49  0 0 0 .26 -.1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  --sm-sfondo: var(--sm-pagina);
  --sm-superficie: var(--sm-foglio);
  --sm-superficie-2: var(--sm-neutri-100);
  /* nomi usati dai componenti: contenitore = foglio, card e sotto-card = card dei dati, campi = scavato */
  --sm-contenitore: var(--sm-foglio);
  --sm-card-normale: var(--sm-card-dati);
  --sm-card-interna: var(--sm-card-dati);
  --sm-scavo: var(--sm-scavato);
  --sm-su-contenitore: var(--sm-su);
  --sm-su-interna: var(--sm-su-piccolo);
  --sm-giu-scavo: var(--sm-giu-piccolo);
  --sm-bordo: var(--sm-neutri-200);
  --sm-bordo-tenue: var(--sm-neutri-100);
  --sm-bordo-campo: #747CA3;             /* grigio-azzurro: 3,7:1 sul campo, 4,0:1 sul bianco: il bordo dei campi si vede */
  --sm-testo: var(--sm-neutri-950);
  --sm-testo-2: var(--sm-neutri-800);
  --sm-testo-muto: var(--sm-neutri-600);
  --sm-primario: var(--sm-navy-800);     /* azioni principali, titoli, menu e testate */
  --sm-primario-scuro: var(--sm-navy-900);
  --sm-primario-testo: var(--sm-navy-700); /* link */
  --sm-primario-100: var(--sm-navy-100);
  --sm-primario-50: var(--sm-navy-50);
  --sm-accento: var(--sm-rosso-600);     /* con parsimonia: marchio, oggi, traguardi, cose da guardare */
  --sm-accento-testo: var(--sm-rosso-700);
  --sm-accento-50: var(--sm-rosso-50);
  --sm-accento-100: var(--sm-rosso-100);
  /* stati (style-stati-colori): verde fatto, ambra da fare, grigio chiuso, rosso da guardare, azzurro online */
  --sm-successo: var(--sm-verde-600); --sm-successo-testo: var(--sm-verde-700); --sm-successo-sfondo: var(--sm-verde-100);
  --sm-attesa: var(--sm-ambra-500);   --sm-attesa-testo: var(--sm-ambra-700);   --sm-attesa-sfondo: var(--sm-ambra-100);
  --sm-neutro: var(--sm-neutri-500);  --sm-neutro-testo: var(--sm-neutri-700);  --sm-neutro-sfondo: var(--sm-neutri-100);
  --sm-errore: var(--sm-rosso-600);   --sm-errore-testo: var(--sm-rosso-700);   --sm-errore-sfondo: var(--sm-rosso-100);
  --sm-info: var(--sm-azzurro-600);   --sm-info-testo: var(--sm-azzurro-700);   --sm-info-sfondo: var(--sm-azzurro-100);
  /* forma, profondità, movimento */
  --sm-raggio: 12px;
  --sm-raggio-card: 24px;
  /* ombre a tre livelli tinte di navy (riposo, card, sollevato): una di contatto stretta e una d'ambiente larga */
  --sm-ombra-bassa: 0 1px 2px rgb(36 46 124 / .07), 0 2px 6px rgb(36 46 124 / .05);
  --sm-ombra: 0 1px 2px rgb(36 46 124 / .06), 0 6px 14px -4px rgb(36 46 124 / .1), 0 18px 36px -14px rgb(36 46 124 / .18);
  --sm-ombra-alta: 0 2px 4px rgb(36 46 124 / .07), 0 14px 28px -8px rgb(36 46 124 / .16), 0 34px 64px -18px rgb(26 29 116 / .3);
  /* filo di luce sullo spigolo alto; sulle superfici blu anche lo spigolo basso più scuro */
  --sm-luce: inset 0 1px 0 rgb(255 255 255 / .9);
  --sm-luce-blu: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(0 0 0 / .22);
  /* vetro: «vetro» per riquadri, testata e menu a comparsa; «latte» per le card con tabelle e moduli */
  --sm-vetro: rgb(255 255 255 / .62);
  --sm-vetro-latte: rgb(255 255 255 / .94);
  --sm-vetro-bordo: rgb(255 255 255 / .8);
  --sm-vetro-filtro: blur(18px) saturate(165%);
  --sm-vetro-filtro-latte: blur(14px) saturate(140%);
  /* rilievo (neumorfismo): superficie, luce e ombra; solo per pochi controlli grandi */
  --sm-rilievo: var(--sm-superficie);
  --sm-rilievo-ombra: var(--sm-buio);
  /* ombra sì, bagliore no (12/11/2026): la luce in alto a sinistra è corta e velata, così il bordo delle card si legge;
     un filo navy al 7% disegna il contorno di card, pulsanti e pastiglie */
  --sm-contorno: 0 0 0 1px rgb(36 46 124 / .07);
  /* ombre da vetro (12/11/2026, bandiera di luce): un'ombra morbida tinta di navy sotto, un filo di luce bianca sul bordo e
     il contorno navy al 7%; i vassoi sono incassati con un'ombra corta in alto */
  --sm-su: 0 1px 2px rgb(36 46 124 / .07), 0 18px 40px -18px rgb(36 46 124 / .4), inset 0 0 0 1px rgb(255 255 255 / .55);   /* il foglio */
  --sm-su-medio: 0 1px 2px rgb(36 46 124 / .08), 0 10px 22px -12px rgb(36 46 124 / .34), inset 0 0 0 1px rgb(255 255 255 / .8), var(--sm-contorno);   /* testata, pulsanti */
  --sm-su-piccolo: 0 1px 2px rgb(36 46 124 / .07), 0 8px 18px -12px rgb(36 46 124 / .32), inset 0 0 0 1px rgb(255 255 255 / .8), inset 0 1px 0 rgb(255 255 255 / .95), var(--sm-contorno);   /* card, righe, pulsanti piccoli */
  --sm-giu: inset 0 1px 3px rgb(36 46 124 / .16), inset 0 0 0 1px rgb(255 255 255 / .35);                      /* vassoi di vetro */
  --sm-giu-piccolo: inset 1px 1px 3px rgb(36 46 124 / .15), inset 0 0 0 1px rgb(255 255 255 / .4);           /* campi, binari */
  --sm-rilievo-su: var(--sm-su-medio);
  --sm-rilievo-giu: inset 3px 3px 7px var(--sm-buio), inset -2px -2px 5px rgb(255 255 255 / .5);
  --sm-convesso: linear-gradient(145deg, #FFFFFF, #F3F5F9);                   /* pulsanti chiari: in primo piano */
  --sm-blu-su: 4px 4px 9px rgb(8 10 52 / .55), -3px -3px 8px rgb(255 255 255 / .07);       /* rilievo sul blu */
  --sm-blu-giu: inset 3px 3px 7px rgb(8 10 52 / .6), inset -3px -3px 7px rgb(255 255 255 / .08);
  --sm-grana: 0;                       /* niente grana sulla pagina: il gesso sta solo su lavagna, menu e testate blu */
  --sm-anello: 0 0 0 4px var(--sm-navy-100);
  --sm-avanzamento: linear-gradient(90deg, var(--sm-navy-500), var(--sm-navy-800));
  --sm-velatura: radial-gradient(560px 300px at 100% 0%, var(--sm-rosso-100) 0%, rgb(255 229 225 / 0) 70%),
    radial-gradient(480px 280px at 70% 120%, var(--sm-navy-100) 0%, rgb(229 235 255 / 0) 70%), var(--sm-superficie);
  /* sfondo a quadretti: il quadretto da 5 mm del quaderno in navy 800 al 10%, uguale fino in fondo alla pagina (11/11/2026:
     prima sfumava dopo 760 px) */
  --sm-quaderno-lato: 20px;
  --sm-quaderno-linea: rgb(36 46 124 / .09);
  --sm-durata: .2s;
  --sm-durata-rapida: .15s;
  --sm-durata-pannello: .28s;
  --sm-curva: cubic-bezier(.2, .7, .2, 1);
  --sm-curva-esce: cubic-bezier(.23, 1, .32, 1);      /* entrate e uscite */
  --sm-curva-sposta: cubic-bezier(.65, 0, .35, 1);    /* spostamenti sullo schermo */
  --sm-molla: cubic-bezier(.34, 1.36, .64, 1);        /* solo il pomello degli interruttori (deroga in docs/design.md) */
  --sm-altezza-azione: 44px;
  --sm-font: "Lexend", "Segoe UI", system-ui, sans-serif;
  --sm-font-titoli: "Young Serif", Georgia, serif;
  --sm-font-mano: "Caveat", "Segoe Print", cursive;       /* solo la data scritta a mano sulla lavagna della home */
  /* il carattere del marchio (Noto Serif Display condensato, wdth 62.5 e wght 800): il saluto sulla lavagna */
  --sm-font-marchio: "Noto Serif Display Marchio", "Bernard MT Condensed", Georgia, serif;
  --sm-gesso: #F5F3EC;                                     /* il bianco del gesso, testo sulla lavagna */
  --sm-gesso-rosso: var(--sm-rosso-400);                   /* gesso colorato: la sottolineatura del nome */
  --sm-sidebar: 256px;
  --sm-pagina-max: 1440px;   /* contenuto centrato: sugli schermi grandi ai lati resta lo sfondo */
  --sm-sidebar-stretta: 76px;

  /* Bootstrap */
  --bs-body-font-family: var(--sm-font);
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--sm-testo);
  --bs-body-bg: #FFFFFF;               /* superfici di Bootstrap (modali, menu, campi); il fondo pagina è sul body */
  --bs-emphasis-color: var(--sm-testo);
  --bs-secondary-color: var(--sm-testo-muto);
  --bs-tertiary-bg: var(--sm-neutri-50);
  --bs-primary: #242E7C;   --bs-primary-rgb: 36,46,124;
  --bs-success: #007E3F;   --bs-success-rgb: 0,126,63;
  --bs-danger: #AD000A;    --bs-danger-rgb: 173,0,10;
  --bs-warning: #915B00;   --bs-warning-rgb: 145,91,0;
  --bs-info: #006BB9;      --bs-info-rgb: 0,107,185;
  --bs-light-rgb: 248,249,252;
  --bs-primary-text-emphasis: #242E7C; --bs-primary-bg-subtle: #E5EBFF; --bs-primary-border-subtle: #CCD8FF;
  --bs-success-text-emphasis: #006531; --bs-success-bg-subtle: #DCF3E1; --bs-success-border-subtle: #BBE6C5;
  --bs-warning-text-emphasis: #754900; --bs-warning-bg-subtle: #FCE8D3; --bs-warning-border-subtle: #F6D2A9;
  --bs-danger-text-emphasis: #AD000A;  --bs-danger-bg-subtle: #FFE5E1;  --bs-danger-border-subtle: #FFCBC3;
  --bs-info-text-emphasis: #005696;    --bs-info-bg-subtle: #DEEEFF;    --bs-info-border-subtle: #BDDDFF;
  --bs-link-color: #3744B0;
  --bs-link-color-rgb: 55,68,176;
  --bs-link-hover-color: #242E7C;
  --bs-link-hover-color-rgb: 36,46,124;
  --bs-border-color: var(--sm-bordo);
  --bs-border-radius: var(--sm-raggio);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 16px;
  --bs-focus-ring-color: rgb(97 119 227 / .35);
  --bs-form-invalid-color: #AD000A;
  --bs-form-invalid-border-color: #AD000A;
  --bs-form-valid-color: #006531;
  --bs-form-valid-border-color: #007E3F;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
/* gestionale: base 15 px (12/11/2026, «un pelo più piccoli»); testi, titoli e spazi in rem scalano insieme. Portali e pagine
   pubbliche restano a 16 px: si usano dal telefono, e sotto i 16 px l'iPhone ingrandisce i campi */
html:has(.sm-shell) { font-size: 93.75%; }
body { background: var(--sm-sfondo); color: var(--sm-testo); font-family: var(--sm-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--sm-navy-100); color: var(--sm-navy-900); }
h1, h2, .sm-titolo, .sm-display { font-family: var(--sm-font-titoli); font-weight: 400; font-synthesis: none; font-variant-numeric: lining-nums; color: var(--sm-primario); letter-spacing: -.01em; }
h1 { font-size: 2rem; line-height: 1.15; }
h2 { font-size: 1.375rem; line-height: 1.25; }
h3 { font-size: 1rem; font-weight: 600; color: var(--sm-testo); font-family: var(--sm-font); }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
.text-muted, .sm-muto { color: var(--sm-testo-muto) !important; }
.sm-etichetta { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-testo-muto); }
.sm-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--sm-navy-500); outline-offset: 2px; }

/* ---- marchio -------------------------------------------------------------------------------------------------- */
.sm-marchio-img { display: block; width: 100%; height: auto; }
.sm-monogramma { display: block; flex: none; width: 36px; height: 36px; border-radius: 10px; }

/* ---- pulsanti ------------------------------------------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--sm-raggio); --bs-btn-padding-x: 1.125rem; --bs-btn-font-size: .9375rem;
  --bs-btn-disabled-opacity: .45; --bs-btn-focus-box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--sm-navy-500);
  min-height: var(--sm-altezza-azione); display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background-color var(--sm-durata) var(--sm-curva), border-color var(--sm-durata) var(--sm-curva), color var(--sm-durata) var(--sm-curva),
    box-shadow var(--sm-durata) var(--sm-curva), transform .12s var(--sm-curva); }
.btn:focus-visible { outline: 0; }
/* pressione: il pulsante si stringe e torna al rilascio, mai sui comandi disabilitati */
.btn:active:not(:disabled):not(.disabled) { transform: scale(.96); transition-duration: .1s; }
.btn-sm { min-height: 36px; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: 10px; }
.btn-lg { min-height: 52px; --bs-btn-font-size: 1rem; --bs-btn-border-radius: 14px; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--sm-primario); --bs-btn-border-color: var(--sm-primario); --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sm-primario-scuro); --bs-btn-hover-border-color: var(--sm-primario-scuro); --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sm-primario-scuro); --bs-btn-active-border-color: var(--sm-primario-scuro);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--sm-primario); --bs-btn-disabled-border-color: var(--sm-primario); }
/* navy più chiaro: accanto al primario distingue un secondo livello (es. lettura e scrittura nei permessi) */
.btn-navy { --bs-btn-color: #fff; --bs-btn-bg: var(--sm-navy-600); --bs-btn-border-color: var(--sm-navy-600); --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sm-navy-700); --bs-btn-hover-border-color: var(--sm-navy-700); --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sm-navy-700); --bs-btn-active-border-color: var(--sm-navy-700);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--sm-navy-600); --bs-btn-disabled-border-color: var(--sm-navy-600); }
/* spessore: filo di luce in alto, bordo inferiore più scuro, ombra tinta; premuto scende e l'ombra si stringe */
.btn-primary, .btn-navy, .btn-danger { background-image: linear-gradient(rgb(255 255 255 / .1), rgb(255 255 255 / 0) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -2px 0 rgb(13 13 82 / .32), 0 1px 2px rgb(36 46 124 / .2), 0 6px 14px -6px rgb(36 46 124 / .45); }
.btn-danger { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -2px 0 rgb(71 0 1 / .3), 0 1px 2px rgb(139 0 6 / .2), 0 6px 14px -6px rgb(205 23 25 / .45); }
.btn-primary:hover, .btn-navy:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -2px 0 rgb(13 13 82 / .32), 0 2px 4px rgb(36 46 124 / .2), 0 10px 20px -6px rgb(36 46 124 / .45); }
.btn-primary:active:not(:disabled), .btn-navy:active:not(:disabled), .btn-danger:active:not(:disabled) { box-shadow: inset 0 2px 4px rgb(13 13 82 / .4), 0 1px 1px rgb(36 46 124 / .2); }
.btn-outline-secondary, .btn-light { background-image: linear-gradient(rgb(255 255 255 / .7), rgb(255 255 255 / 0) 70%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 var(--sm-neutri-200), 0 1px 2px rgb(36 46 124 / .08), 0 6px 12px -8px rgb(36 46 124 / .25); }
.btn-outline-secondary:active:not(:disabled), .btn-light:active:not(:disabled) { box-shadow: inset 0 2px 4px rgb(36 46 124 / .14), 0 1px 1px rgb(36 46 124 / .06); }
.btn:disabled, .btn.disabled { box-shadow: none; background-image: none; }
.btn-check:checked + .btn, .btn.active { background-image: none; }
.btn-outline-secondary, .btn-light { --bs-btn-color: var(--sm-testo); --bs-btn-bg: #fff; --bs-btn-border-color: var(--sm-neutri-300);
  --bs-btn-hover-color: var(--sm-testo); --bs-btn-hover-bg: var(--sm-neutri-50); --bs-btn-hover-border-color: var(--sm-neutri-400);
  --bs-btn-active-color: var(--sm-primario); --bs-btn-active-bg: var(--sm-navy-100); --bs-btn-active-border-color: var(--sm-navy-300);
  --bs-btn-disabled-color: var(--sm-testo-muto); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--sm-neutri-200); }
.btn-outline-primary { --bs-btn-color: var(--sm-primario); --bs-btn-border-color: var(--sm-navy-300); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sm-primario);
  --bs-btn-hover-border-color: var(--sm-primario); --bs-btn-active-bg: var(--sm-primario-scuro); --bs-btn-active-border-color: var(--sm-primario-scuro); }
.btn-outline-danger { --bs-btn-color: var(--sm-errore-testo); --bs-btn-bg: var(--sm-rosso-50); --bs-btn-border-color: var(--sm-rosso-200);
  --bs-btn-hover-color: var(--sm-rosso-800); --bs-btn-hover-bg: var(--sm-rosso-100); --bs-btn-hover-border-color: var(--sm-rosso-300);
  --bs-btn-active-color: var(--sm-rosso-800); --bs-btn-active-bg: var(--sm-rosso-200); --bs-btn-active-border-color: var(--sm-rosso-300); }
.btn-danger { --bs-btn-bg: var(--sm-errore); --bs-btn-border-color: var(--sm-errore); --bs-btn-hover-bg: var(--sm-errore-testo); --bs-btn-hover-border-color: var(--sm-errore-testo);
  --bs-btn-active-bg: var(--sm-rosso-800); --bs-btn-active-border-color: var(--sm-rosso-800); }
.btn-link { --bs-btn-color: var(--sm-primario-testo); --bs-btn-hover-color: var(--sm-primario); text-decoration: none; min-height: auto; padding: .25rem .5rem; }
.btn-icona { width: var(--sm-altezza-azione); padding: 0; }
.btn-sm.btn-icona { width: 36px; }

/* ---- campi ---------------------------------------------------------------------------------------------------- */
.form-label { font-size: .8125rem; font-weight: 600; color: var(--sm-testo-2); margin-bottom: .375rem; }
.form-control, .form-select { min-height: var(--sm-altezza-azione); border-color: var(--sm-bordo-campo); border-radius: var(--sm-raggio); font-size: .9375rem; background-color: #fff;
  transition: border-color var(--sm-durata) var(--sm-curva), box-shadow var(--sm-durata) var(--sm-curva); }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: var(--sm-neutri-600); }
.form-control::placeholder { color: var(--sm-neutri-600); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--sm-neutri-50); }
textarea.form-control { min-height: 96px; }
.form-control-sm, .form-select-sm { min-height: 36px; font-size: .8125rem; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--sm-navy-700); box-shadow: var(--sm-anello); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--sm-errore-testo); box-shadow: 0 0 0 4px var(--sm-rosso-100); background-image: none; padding-right: .75rem; }
.invalid-feedback { color: var(--sm-errore-testo); font-size: .8125rem; }
.form-check-input { border-color: var(--sm-bordo-campo); }
.form-check-input:checked { background-color: var(--sm-primario); border-color: var(--sm-primario); }
.form-check-input:focus { border-color: var(--sm-navy-700); box-shadow: var(--sm-anello); }
.form-switch { padding-left: 3.125em; }
.form-switch .form-check-input { width: 2.5em; height: 1.4em; margin-left: -3.125em; }
.form-text { font-size: .8125rem; color: var(--sm-testo-muto); }
.input-group-text { background: var(--sm-neutri-50); border-color: var(--sm-bordo-campo); color: var(--sm-testo-2); border-radius: var(--sm-raggio); }
.input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text { min-height: 36px; font-size: .8125rem; }
.form-control-color { padding: .375rem; }
/* scelta con ricerca: la «x» per svuotare è quella del componente, non quella del campo di ricerca */
.sm-scelta-input { padding-right: 2.25rem; }
.sm-scelta-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
fieldset.sm-sezione { border: 0; padding: 0; margin: 0 0 1.5rem; }
fieldset.sm-sezione > legend { font-family: var(--sm-font-titoli); font-synthesis: none; font-variant-numeric: lining-nums; font-size: 1.125rem; font-weight: 400; color: var(--sm-primario);
  float: none; width: 100%; padding: .5rem .875rem; margin-bottom: 1rem; border-radius: 10px;
  background: linear-gradient(90deg, var(--sm-navy-100) 0%, rgb(229 235 255 / .45) 45%, rgb(229 235 255 / 0) 90%); }
.sm-obbligatorio::after { content: " *"; color: var(--sm-errore); }

/* ---- guscio del gestionale ------------------------------------------------------------------------------------ */
.sm-shell { display: flex; min-height: 100vh; }
.sm-sidebar { width: var(--sm-sidebar); flex: 0 0 var(--sm-sidebar); background: var(--sm-primario); color: var(--sm-navy-200); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh; padding-top: 1.5rem; z-index: 1030; }
.sm-marchio { flex: none; display: block; width: 184px; margin: 0 1.5rem 1rem; text-decoration: none !important; }
/* le voci scorrono sotto il marchio senza barra: sfumano in alto e in basso quando da quella parte ce ne sono altre.
   La sfumatura è lunga quanto lo scroll-padding (così il focus da tastiera porta la voce fuori) e si accorcia
   arrivando in cima o in fondo: --sm-sfuma-sopra e --sm-sfuma-sotto li mette static/js/menu.js */
.sm-sidebar-scorre { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: .5rem .75rem 1.25rem;
  scroll-padding-block: 4.5rem; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sm-sfuma-sopra, 0px), #000 calc(100% - var(--sm-sfuma-sotto, 0px)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sm-sfuma-sopra, 0px), #000 calc(100% - var(--sm-sfuma-sotto, 0px)), transparent 100%); }
.sm-sidebar-scorre::-webkit-scrollbar { display: none; }
@media (prefers-contrast: more), (forced-colors: active) {
  .sm-sidebar-scorre { -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
}
.sm-marchio-logo { width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--sm-primario); display: flex; align-items: center; justify-content: center;
  font-family: var(--sm-font-titoli); font-synthesis: none; font-size: 1.05rem; flex: none; }
.sm-marchio-nome { font-family: var(--sm-font-titoli); font-size: 1.0625rem; line-height: 1.1; }
.sm-marchio-sotto { font-size: .6875rem; color: var(--sm-navy-300); font-weight: 500; }
.sm-menu-gruppo { margin-bottom: .125rem; }
.sm-menu-titolo { display: flex; align-items: center; gap: .75rem; width: 100%; border: 0; background: transparent; color: var(--sm-navy-200); font-size: .875rem; font-weight: 500;
  padding: .625rem .75rem; border-radius: var(--sm-raggio); text-align: left; transition: background-color var(--sm-durata) var(--sm-curva), color var(--sm-durata) var(--sm-curva); }
.sm-menu-titolo:hover { background: rgb(255 255 255 / .08); color: #fff; text-decoration: none; }
.sm-menu-titolo .bi { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.sm-menu-titolo .sm-freccia { margin-left: auto; font-size: .75rem; width: auto; transition: transform var(--sm-durata) var(--sm-curva); }
.sm-menu-titolo[aria-expanded="true"] .sm-freccia { transform: rotate(90deg); }
.sm-menu-voci { list-style: none; margin: .125rem 0 .375rem 1.375rem; padding: 0 0 0 .75rem; border-left: 1px solid rgb(255 255 255 / .14); }
.sm-menu-voce { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: 10px; color: var(--sm-navy-200); font-size: .875rem; text-decoration: none !important;
  transition: background-color var(--sm-durata) var(--sm-curva), color var(--sm-durata) var(--sm-curva); }
.sm-menu-voce:hover { background: rgb(255 255 255 / .08); color: #fff; }
.sm-menu-voce.attiva, .sm-menu-titolo.attiva { position: relative; isolation: isolate; color: #fff; font-weight: 600; }
/* la pillola della voce attiva (con la barra rossa) è un elemento suo: cambiando pagina scivola sulla voce nuova (View Transitions) */
.sm-menu-pillola { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: rgb(255 255 255 / .12);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); view-transition-name: sm-menu-attiva; }
.sm-menu-pillola::before { content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--sm-accento); }
.sm-menu-singola { padding-left: .75rem; }
.sm-sidebar-piede { margin-top: auto; padding: 1.25rem .75rem 0; font-size: .6875rem; color: var(--sm-navy-300); }

.sm-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sm-testata { position: sticky; top: 0; z-index: 1020; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 2rem;
  background: rgb(255 255 255 / .72); -webkit-backdrop-filter: var(--sm-vetro-filtro); backdrop-filter: var(--sm-vetro-filtro); border-bottom: 1px solid rgb(36 46 124 / .1);
  box-shadow: 0 10px 30px -20px rgb(36 46 124 / .45); view-transition-name: sm-testata; }
.sm-pillola { height: 40px; padding: 0 .875rem; border-radius: 999px; border: 1px solid var(--sm-bordo); background: var(--sm-neutri-50); font-size: .8125rem; font-weight: 600;
  color: var(--sm-testo); display: inline-flex; align-items: center; gap: .5rem; transition: border-color var(--sm-durata) var(--sm-curva); }
.sm-pillola:hover { border-color: var(--sm-neutri-400); }
.sm-pillola .bi-geo-alt { color: var(--sm-accento); }
select.sm-pillola { appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23303545' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 12px 12px; }
.sm-ricerca { position: relative; flex: 1 1 260px; max-width: 560px; }
.sm-ricerca input { width: 100%; height: 40px; border: 1px solid transparent; border-radius: var(--sm-raggio); background: var(--sm-neutri-100); padding: 0 .875rem 0 2.5rem; font-size: .875rem;
  transition: background-color var(--sm-durata) var(--sm-curva), border-color var(--sm-durata) var(--sm-curva), box-shadow var(--sm-durata) var(--sm-curva); }
.sm-ricerca input::placeholder { color: var(--sm-neutri-600); }
.sm-ricerca input:focus { background: #fff; border-color: var(--sm-navy-700); outline: none; box-shadow: var(--sm-anello); }
.sm-ricerca .bi-search { position: absolute; left: .9375rem; top: 50%; transform: translateY(-50%); color: var(--sm-testo-muto); }
.sm-ricerca-risultati { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: 14px; box-shadow: var(--sm-ombra-alta);
  border: 1px solid var(--sm-bordo); padding: .375rem; display: none; max-height: 420px; overflow-y: auto; }
.sm-ricerca-risultati.aperto { display: block; animation: sm-appare .16s var(--sm-curva); }
.sm-ricerca-risultati a { display: flex; align-items: center; gap: .75rem; padding: .5rem .625rem; border-radius: 10px; color: var(--sm-testo); text-decoration: none; }
.sm-ricerca-risultati a:hover, .sm-ricerca-risultati a.attivo { background: var(--sm-navy-50); }
.sm-ricerca-risultati .bi { color: var(--sm-primario-testo); }
.sm-utente { display: inline-flex; align-items: center; gap: .625rem; margin-left: auto; border: 0; background: transparent; padding: .25rem .375rem; border-radius: 12px; text-align: left;
  transition: background-color var(--sm-durata) var(--sm-curva); }
.sm-utente:hover { background: var(--sm-neutri-100); }
.sm-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--sm-navy-100); color: var(--sm-primario); display: inline-flex; align-items: center;
  justify-content: center; font-weight: 600; font-size: .8125rem; flex: none; }
.sm-utente-nome { font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.sm-utente-ruolo { font-size: .75rem; color: var(--sm-testo-muto); }
.sm-hamburger { display: none; }
.sm-contenuto { padding: 2rem; width: 100%; max-width: 1440px; }

.sm-entra-come { position: sticky; top: 0; z-index: 1040; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .625rem 1.25rem; background: var(--sm-ambra-100); color: var(--sm-ambra-900); font-weight: 600; font-size: .875rem; border-bottom: 1px solid var(--sm-ambra-200); }
.sm-entra-come .btn { min-height: 36px; background: var(--sm-ambra-800); color: #fff; border: 0; font-size: .8125rem; }

/* ---- sfondo a quadretti ------------------------------------------------------------------------------------------- */
/* Il foglio del quaderno dietro le pagine del gestionale, dei portali, dell'accesso e delle pagine pubbliche. Sta a
   z-index -1 nel contesto della pagina (i contenitori non ne creano uno): le card bianche lo coprono, si vede dietro i
   titoli e tra una card e l'altra, e scorre con la pagina. */
.sm-corpo, .sm-accesso-form, .sm-pubblica { position: relative; }
.sm-corpo::before, .sm-accesso-form::before, .sm-pubblica::before, body.sm-portale::before {
  content: ""; position: absolute; top: var(--sm-quaderno-inizio, 0); left: 0; right: 0; bottom: 0; z-index: -1;
  pointer-events: none; background-image: linear-gradient(to right, var(--sm-quaderno-linea) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sm-quaderno-linea) 1px, transparent 1px);
  background-size: var(--sm-quaderno-lato) var(--sm-quaderno-lato); background-position: var(--sm-quaderno-origine, 0 0); }
/* gestionale: il foglio parte sotto la testata e le righe passano sul bordo sinistro e alto del contenuto */
.sm-corpo { --sm-quaderno-inizio: calc(4rem + 1px); --sm-quaderno-origine: 2rem 2rem; }
/* portali: la testata blu copre l'alto, il foglio si vede dagli angoli arrotondati in giù */
body.sm-portale { --sm-quaderno-inizio: 7rem; }
@media print, (prefers-contrast: more), (forced-colors: active) {
  .sm-corpo::before, .sm-accesso-form::before, .sm-pubblica::before, body.sm-portale::before { display: none; }
}

/* ---- pagina e card ---------------------------------------------------------------------------------------------- */
.sm-indietro { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; margin-bottom: 1rem; }
.sm-pagina-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.sm-pagina-testa h1 { margin: 0; }
.sm-pagina-sotto { color: var(--sm-testo-muto); font-size: .9375rem; margin-top: .375rem; }
.sm-pagina-azioni { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
/* card in vetro latte senza sfocatura: su tante card grandi la sfocatura costa troppo a chi disegna senza scheda video;
   i riquadri e le cose che galleggiano hanno il vetro sfocato su uno strato sotto il contenuto, così non diventano un
   contesto di impilamento e i menu a comparsa che ne escono restano sopra le card vicine */
.sm-card { position: relative; background: var(--sm-vetro-latte); border-radius: var(--sm-raggio-card); box-shadow: var(--sm-ombra), var(--sm-luce), inset 0 0 0 1px var(--sm-vetro-bordo); border: 0; }
.sm-kpi::before, .modal-content::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--sm-fondo-vetro, var(--sm-vetro-latte)); -webkit-backdrop-filter: var(--sm-filtro-vetro, var(--sm-vetro-filtro-latte)); backdrop-filter: var(--sm-filtro-vetro, var(--sm-vetro-filtro-latte));
  box-shadow: inset 0 0 0 1px var(--sm-vetro-bordo); }
.sm-in-modifica .sm-pagina-testa { position: sticky; top: calc(4rem + 1px); z-index: 1015; margin: -.75rem -2rem 1.5rem; padding: .75rem 2rem;
  background: rgb(244 246 250 / .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sm-bordo); }
.sm-in-modifica form.sm-card { box-shadow: 0 0 0 1px var(--sm-navy-200), var(--sm-ombra); }
.sm-avviso-modifica { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; padding: .625rem .875rem; border-radius: 12px; background: var(--sm-ambra-50);
  color: var(--sm-ambra-800); font-size: .875rem; font-weight: 500; }
a.sm-card, a.sm-kpi { transition: box-shadow var(--sm-durata) var(--sm-curva), transform var(--sm-durata) var(--sm-curva); }
a.sm-card:hover, a.sm-kpi:hover { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  a.sm-card:hover, a.sm-kpi:hover { box-shadow: var(--sm-ombra-alta), var(--sm-luce); transform: translateY(-3px); }
}
a.sm-card:active, a.sm-kpi:active { transform: translateY(-1px) scale(.995); }
.sm-card-corpo { padding: 1.375rem 1.5rem; }
.sm-card-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--sm-navy-100);
  background: linear-gradient(90deg, var(--sm-navy-100) 0%, rgb(229 235 255 / .45) 45%, rgb(229 235 255 / 0) 90%); }
.sm-card > .sm-card-testa:first-child { border-radius: var(--sm-raggio-card) var(--sm-raggio-card) 0 0; }
.sm-card-testa h2, .sm-card-testa h3 { margin: 0; font-family: var(--sm-font-titoli); font-synthesis: none; font-weight: 400; font-variant-numeric: lining-nums; color: var(--sm-testo); }
.sm-card-testa h2 { font-size: 1.1875rem; }
.sm-card-testa h3 { font-size: 1.0625rem; }
.sm-griglia { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.sm-kpi-riga { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1.5rem; }
.sm-kpi { --sm-fondo-vetro: var(--sm-vetro); --sm-filtro-vetro: var(--sm-vetro-filtro); position: relative; background: transparent; border-radius: var(--sm-raggio-card);
  padding: 1.125rem 1.25rem; box-shadow: var(--sm-ombra-bassa), var(--sm-luce); display: flex; flex-direction: column; gap: .25rem; color: var(--sm-testo); }
.sm-kpi-etichetta { font-size: .75rem; color: var(--sm-testo-muto); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sm-kpi-valore { font-family: var(--sm-font-titoli); font-synthesis: none; font-size: 1.875rem; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; line-height: 1.15; color: var(--sm-testo); }
.sm-kpi-valore small { font-family: var(--sm-font); font-size: .875rem; color: var(--sm-testo-muto); font-weight: 500; }
.sm-kpi-nota { font-size: .8125rem; color: var(--sm-testo-2); }
.sm-kpi-riga--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 575.98px) {
  .sm-kpi-riga--tre { grid-template-columns: 1fr; gap: .5rem; }
  .sm-kpi-riga--tre .sm-kpi { flex-direction: row; justify-content: space-between; align-items: baseline; padding: .75rem 1rem; }
}
button.sm-kpi { border: 1px solid transparent; text-align: left; font: inherit; }
.sm-kpi--filtro { cursor: pointer; transition: box-shadow var(--sm-durata) var(--sm-curva), transform var(--sm-durata) var(--sm-curva), background-color var(--sm-durata) var(--sm-curva); }
.sm-kpi--filtro:hover { box-shadow: var(--sm-ombra); transform: translateY(-1px); }
.sm-kpi--filtro .sm-kpi-filtro { margin-left: .375rem; font-size: .6875rem; color: var(--sm-primario-testo); opacity: 0; transition: opacity var(--sm-durata) var(--sm-curva); }
.sm-kpi--filtro:hover .sm-kpi-filtro { opacity: .5; }
/* riquadro-filtro acceso: resta premuto nella superficie */
.sm-kpi--filtro.attivo { --sm-fondo-vetro: rgb(244 246 255 / .92); border-color: var(--sm-navy-300);
  box-shadow: inset 3px 3px 7px rgb(36 46 124 / .14), inset -3px -3px 7px rgb(255 255 255 / .95), var(--sm-anello); }
.sm-kpi--filtro.attivo .sm-kpi-filtro { opacity: 1; }
.sm-kpi--successo { --sm-fondo-vetro: rgb(240 250 242 / .82); } .sm-kpi--successo .sm-kpi-etichetta, .sm-kpi--successo .sm-kpi-valore { color: var(--sm-successo-testo); }
.sm-kpi--errore { --sm-fondo-vetro: rgb(255 244 242 / .84); } .sm-kpi--errore .sm-kpi-etichetta, .sm-kpi--errore .sm-kpi-valore { color: var(--sm-errore-testo); }
.sm-kpi--attesa { --sm-fondo-vetro: rgb(254 245 236 / .84); } .sm-kpi--attesa .sm-kpi-etichetta, .sm-kpi--attesa .sm-kpi-valore { color: var(--sm-attesa-testo); }
.sm-dati { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.125rem 1.5rem; margin: 0; }
.sm-dati dt { font-size: .75rem; font-weight: 600; color: var(--sm-testo-muto); margin-bottom: .125rem; }
.sm-dati dd { margin: 0; font-size: .9375rem; word-break: break-word; }

/* ---- stati, chip, barre ---------------------------------------------------------------------------------------- */
.sm-stato { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .625rem; border-radius: 999px; font-family: var(--sm-font); font-size: .75rem;
  font-weight: 600; letter-spacing: 0; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.sm-stato::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--sm-punto, currentColor); flex: none; }
.sm-stato--verde { background: var(--sm-successo-sfondo); color: var(--sm-successo-testo); }
.sm-stato--ambra { background: var(--sm-attesa-sfondo); color: var(--sm-attesa-testo); }
.sm-stato--grigio { background: var(--sm-neutro-sfondo); color: var(--sm-neutro-testo); }
.sm-stato--rosso { background: var(--sm-errore-sfondo); color: var(--sm-errore-testo); }
.sm-stato--blu { background: var(--sm-info-sfondo); color: var(--sm-info-testo); }
.sm-stato--viola { background: #F4EEFF; color: #6B2FB3; }
.sm-stato--arancio { background: var(--sm-ambra-50); color: var(--sm-ambra-800); }
.sm-tag { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 6px; font-family: var(--sm-font); font-size: .75rem; font-weight: 600;
  line-height: 1.5; white-space: nowrap; background: var(--sm-neutri-100); color: var(--sm-neutri-800); }
.sm-tag--navy { background: var(--sm-navy-50); color: var(--sm-primario); box-shadow: inset 0 0 0 1px var(--sm-navy-100); }
.sm-tag--azzurro { background: var(--sm-azzurro-50); color: var(--sm-azzurro-800); box-shadow: inset 0 0 0 1px var(--sm-azzurro-100); }
.sm-tag--rosso { background: var(--sm-rosso-50); color: var(--sm-rosso-800); box-shadow: inset 0 0 0 1px var(--sm-rosso-100); }
.sm-tag--verde { background: var(--sm-verde-50); color: var(--sm-verde-700); box-shadow: inset 0 0 0 1px var(--sm-verde-100); }
.sm-conteggio { min-width: 28px; height: 28px; padding: 0 .5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8125rem;
  font-family: var(--sm-font); font-variant-numeric: tabular-nums; letter-spacing: 0; background: var(--sm-navy-100); color: var(--sm-primario); }
.sm-conteggio--rosso { background: var(--sm-errore-sfondo); color: var(--sm-errore-testo); }
.sm-conteggio--ambra { background: var(--sm-attesa-sfondo); color: var(--sm-attesa-testo); }
.sm-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .5rem .375rem .8125rem; border-radius: 999px; background: var(--sm-navy-100);
  color: var(--sm-primario); font-size: .8125rem; font-weight: 600; border: 0; transition: background-color var(--sm-durata) var(--sm-curva), border-color var(--sm-durata) var(--sm-curva); }
.sm-chip button { border: 0; background: transparent; color: inherit; padding: 0 .125rem; line-height: 1; border-radius: 999px; }
.sm-chip button:hover { color: var(--sm-errore-testo); }
.sm-chip--aggiungi { background: transparent; border: 1px dashed var(--sm-bordo-campo); color: var(--sm-testo-2); padding-right: .8125rem; }
.sm-chip--aggiungi:hover { background: var(--sm-neutri-50); border-color: var(--sm-neutri-600); }
.sm-chip--rapido { background: #fff; border: 1px solid var(--sm-neutri-300); color: var(--sm-testo-2); padding: .375rem .875rem; }
.sm-chip--rapido:hover { border-color: var(--sm-neutri-400); }
.sm-chip--rapido.attivo { background: var(--sm-navy-100); border-color: var(--sm-navy-300); color: var(--sm-primario); }
.sm-chip--rapido .bi-check2 { font-size: .875rem; margin-left: -.125rem; }
.sm-chip .sm-evento { border: 0 !important; border-radius: 999px; background: var(--sm-evento-colore) !important; }
.sm-barra { height: 8px; border-radius: 999px; background: var(--sm-neutri-200); overflow: hidden; }
.sm-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--sm-avanzamento); transition: width .5s var(--sm-curva); }
.sm-barra--piena > span { background: var(--sm-errore); }
.sm-barra--quasi > span { background: var(--sm-attesa); }

/* ---- linguette ----------------------------------------------------------------------------------------------------- */
.sm-tabs { display: flex; gap: .125rem; border-bottom: 1px solid var(--sm-bordo); margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--sm-neutri-300) transparent; }
.sm-tabs::-webkit-scrollbar { height: 4px; } .sm-tabs::-webkit-scrollbar-thumb { background: var(--sm-neutri-300); border-radius: 4px; }
.sm-tabs button, .sm-tabs a { padding: .75rem .75rem; border: 0; border-bottom: 3px solid transparent; background: transparent; font-weight: 500; font-size: .875rem;
  color: var(--sm-testo-muto); white-space: nowrap; text-decoration: none; transition: color var(--sm-durata) var(--sm-curva), border-color var(--sm-durata) var(--sm-curva); }
.sm-tabs button:hover, .sm-tabs a:hover { color: var(--sm-testo); border-bottom-color: var(--sm-neutri-300); }
.sm-tabs button[aria-selected="true"], .sm-tabs a.attiva { color: var(--sm-primario); border-bottom-color: var(--sm-primario); font-weight: 600; }
.sm-tabs .sm-tab-conteggio { color: var(--sm-neutri-600); font-weight: 500; margin-left: .25rem; font-variant-numeric: tabular-nums; }
/* pallino rosso che pulsa: c'è qualcosa da fare in quella linguetta (soldi da abbinare nei pagamenti) */
.sm-tab-punto { display: inline-block; width: 7px; height: 7px; margin-left: .375rem; border-radius: 50%; background: var(--sm-errore); color: var(--sm-errore);
  vertical-align: .125rem; animation: sm-pulsa 2.2s var(--sm-curva-esce) infinite; }
.sm-tabs .sm-tab-allarme { color: var(--sm-errore-testo); }

/* ---- tabelle ------------------------------------------------------------------------------------------------------- */
.sm-tabella-box { overflow-x: auto; }
.sm-tabella { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sm-tabella thead th { text-align: left; color: var(--sm-testo-muto); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  padding: .75rem .5rem; white-space: nowrap; background: var(--sm-neutri-50); border-bottom: 1px solid var(--sm-bordo); }
.sm-tabella tbody td, .sm-tabella tbody th { padding: .8125rem .5rem; border-top: 1px solid var(--sm-bordo-tenue); vertical-align: middle; }
.sm-tabella tbody th { text-align: left; font-weight: 600; }
.sm-tabella thead th:first-child, .sm-tabella tbody td:first-child, .sm-tabella tbody th:first-child, .sm-tabella tfoot td:first-child { padding-left: 1.5rem; }
.sm-tabella thead th:last-child, .sm-tabella tbody td:last-child, .sm-tabella tfoot td:last-child { padding-right: 1.5rem; }
.sm-tabella tbody tr { transition: background-color .15s var(--sm-curva); }
.sm-tabella tbody tr.cliccabile { cursor: pointer; }
.sm-tabella tbody tr.cliccabile:hover { background: var(--sm-navy-50); }
.sm-tabella tbody tr.selezionata { background: var(--sm-navy-50); }
.sm-tabella tbody tr.selezionata td:first-child { box-shadow: inset 3px 0 0 var(--sm-primario); }
.sm-tabella tbody tr.riga-errore { background: var(--sm-rosso-50); }
.sm-tabella tbody tr.riga-spenta td { color: var(--sm-neutri-600); }
.sm-tabella th.ordinabile { cursor: pointer; user-select: none; }
.sm-tabella th.ordinabile:hover { color: var(--sm-testo); }
.sm-tabella .destra { text-align: right; }
.sm-tabella .stretto { width: 1%; white-space: nowrap; }
.sm-tabella tfoot td { padding: .75rem .5rem; font-weight: 600; border-top: 2px solid var(--sm-bordo); }
.table { --bs-table-hover-bg: var(--sm-navy-50); --bs-table-border-color: var(--sm-bordo-tenue); }
.table-danger { --bs-table-bg: var(--sm-rosso-50); --bs-table-color: var(--sm-testo); }
.list-group { --bs-list-group-border-color: var(--sm-bordo-tenue); --bs-list-group-active-bg: var(--sm-primario); --bs-list-group-active-border-color: var(--sm-primario);
  --bs-list-group-action-hover-bg: var(--sm-navy-50); --bs-list-group-border-radius: var(--sm-raggio); }

/* ---- elenco standard ------------------------------------------------------------------------------------------------ */
.sm-elenco-barra { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sm-bordo-tenue); }
.sm-elenco-barra .sm-cerca { flex: 1 1 260px; position: relative; }
.sm-elenco-barra .sm-cerca input { padding-left: 2.375rem; }
.sm-elenco-barra .sm-cerca .bi { position: absolute; left: .9375rem; top: 50%; transform: translateY(-50%); color: var(--sm-testo-muto); }
.sm-elenco-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sm-elenco-chips:empty { display: none; }
.sm-elenco-selezione { display: none; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .625rem 1.25rem; background: var(--sm-navy-50);
  border-bottom: 1px solid var(--sm-navy-100); font-size: .8125rem; color: var(--sm-primario); }
.sm-elenco-selezione.attiva { display: flex; animation: sm-appare .16s var(--sm-curva); }
.sm-elenco-selezione .btn-link { color: var(--sm-primario); font-weight: 600; }
.sm-elenco-piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .875rem 1.25rem;
  border-top: 1px solid var(--sm-bordo-tenue); font-size: .8125rem; color: var(--sm-testo-muto); }
.sm-filtri-pannello { padding: .875rem 1.25rem 1rem; border-bottom: 1px solid var(--sm-bordo-tenue); background: var(--sm-neutri-50); display: none; }
.sm-filtri-pannello.aperto { display: block; animation: sm-appare .16s var(--sm-curva); }
/* campi dei filtri: compatti, vanno a capo senza buchi; gli intervalli («dal … al …») prendono il doppio */
.sm-filtri-griglia { display: flex; flex-wrap: wrap; gap: .625rem .875rem; }
.sm-filtro { flex: 1 1 180px; min-width: 0; }
.sm-filtro--largo { flex: 2 1 320px; }
.sm-filtro .form-label { font-size: .75rem; margin-bottom: .25rem; }
.sm-intervallo .input-group-text { font-size: .75rem; color: var(--sm-testo-muto); background: var(--sm-neutri-100); border-color: var(--sm-bordo-campo); padding: 0 .5rem; }
.sm-intervallo .form-control { min-width: 0; }
.sm-filtro-tendina { width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sm-testo-muto); }
.sm-filtro-tendina--scelta { color: var(--sm-primario); font-weight: 600; background-color: var(--sm-navy-50); border-color: var(--sm-navy-300); }
.sm-filtro-opzioni { min-width: 100%; max-height: 280px; overflow-y: auto; padding: .375rem; }
.sm-filtro-opzioni label { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: 8px; font-size: .8125rem; cursor: pointer; }
.sm-filtro-opzioni label:hover { background: var(--sm-navy-50); }
.sm-filtri-altri { margin-top: .75rem; padding-top: .625rem; border-top: 1px solid var(--sm-bordo-tenue); }
.sm-filtri-altri > summary { display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; list-style: none; font-size: .8125rem; font-weight: 600; color: var(--sm-primario-testo); }
.sm-filtri-altri > summary::-webkit-details-marker { display: none; }
.sm-filtri-altri > summary .bi { font-size: .75rem; transition: transform var(--sm-durata) var(--sm-curva); }
.sm-filtri-altri[open] > summary .bi { transform: rotate(180deg); }
.sm-filtri-altri > .sm-filtri-griglia { margin-top: .625rem; }
.sm-filtri-gruppo { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-testo-muto); margin: .75rem 0 .375rem; }
.sm-colonne-lista { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.sm-colonne-lista li { display: flex; align-items: center; gap: .5rem; padding: .375rem .25rem; border-radius: 10px; }
.sm-colonne-lista li:hover { background: var(--sm-neutri-50); }
.sm-colonne-lista .sm-maniglia { cursor: grab; color: var(--sm-neutri-400); }
.sm-scheletro { display: block; height: 14px; border-radius: 7px; background: linear-gradient(100deg, var(--sm-navy-50) 30%, #fff 50%, var(--sm-navy-50) 70%);
  background-size: 260% 100%; animation: sm-luccica 1.3s linear infinite; }
@keyframes sm-luccica { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- stato vuoto, toast, modali ------------------------------------------------------------------------------------- */
.sm-vuoto { border: 1px dashed var(--sm-neutri-300); border-radius: var(--sm-raggio-card); padding: 2.25rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center; color: var(--sm-testo-muto); margin: 1rem; }
.sm-vuoto .bi { font-size: 1.375rem; color: var(--sm-navy-600); width: 52px; height: 52px; border-radius: 999px; background: var(--sm-navy-50); display: inline-flex;
  align-items: center; justify-content: center; margin-bottom: .25rem; }
.sm-vuoto strong { color: var(--sm-testo); font-family: var(--sm-font-titoli); font-synthesis: none; font-variant-numeric: lining-nums; font-weight: 400; font-size: 1.125rem; }
.sm-vuoto span { max-width: 46ch; font-size: .875rem; }
/* riquadro vuoto in fondo a una card: il margine sotto resta dentro la card, uguale a quello sopra (nelle card a
   blocchi altrimenti «esce» per il collasso dei margini e il riquadro tocca il bordo) */
.sm-card:has(> .sm-vuoto:last-child)::after { content: ""; display: table; }
.sm-toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 2rem)); }
/* avvisi in vetro liquido scuro: entrano dal basso, escono più in fretta (classe .esce, UI.toast) */
.sm-toast { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: .625rem; padding: .8125rem 1rem; border-radius: 14px; color: #fff; font-size: .875rem;
  background: rgb(13 17 31 / .84); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: var(--sm-ombra-alta), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .06); animation: sm-avviso-entra .28s var(--sm-curva-esce); }
.sm-toast.esce { animation: sm-avviso-esce .18s ease-in forwards; }
.sm-toast--errore { background: rgb(173 0 10 / .9); }
.sm-toast--successo { background: rgb(0 101 49 / .9); }
.sm-toast-azione { margin-left: auto; align-self: center; border: 0; background: none; color: #fff; font-weight: 700; font-size: .8125rem; padding: .125rem .375rem;
  border-radius: 8px; text-decoration: underline; text-underline-offset: .2em; }
.sm-toast-azione:hover { background: rgb(255 255 255 / .12); }
.sm-toast-tempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgb(255 255 255 / .45); transform-origin: left; animation: sm-tempo var(--sm-tempo, 5s) linear forwards; }
@keyframes sm-avviso-entra { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes sm-avviso-esce { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes sm-tempo { to { transform: scaleX(0); } }
@keyframes sm-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sm-appare { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.modal { --bs-modal-border-radius: 20px; --bs-modal-inner-border-radius: 20px; }
.modal-backdrop { --bs-backdrop-bg: var(--sm-navy-950); --bs-backdrop-opacity: .4; }  /* il velo dietro le finestre è navy */
.modal-content { border: 0; border-radius: 20px; box-shadow: var(--sm-ombra-alta), var(--sm-luce); background: transparent; }
.modal-content::before { --sm-fondo-vetro: var(--sm-contenitore); --sm-filtro-vetro: none; }
.modal-header { border-bottom-color: var(--sm-bordo-tenue); padding: 1.125rem 1.5rem; }
.modal-header .modal-title { font-family: var(--sm-font-titoli); font-synthesis: none; font-variant-numeric: lining-nums; font-weight: 400; color: var(--sm-primario); font-size: 1.25rem; }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-footer { border-top-color: var(--sm-bordo-tenue); padding: 1rem 1.5rem; }
/* tendine «velo e filo blu» (12/11, tavola https://claude.ai/code/artifact/0c5ed744-873d-4074-9dd6-54a1b3e25cc8, tendine A): pannello
   bianco con l'ombra navy, gruppi con l'intestazione piccola; la voce su cui sei ha un velo blu leggero e un filo blu a sinistra,
   quella scelta il nome in blu e la spunta; il testo resta sempre scuro, mai grigio su blu pieno. Vale per i menu «…», le scelte
   con ricerca (componenti/scelta.js) e, dove il browser lo permette, le tendine native (in fondo a questo blocco).
   I menu nascono dall'angolo del comando che li apre (scale e opacity, il transform è di Popper) */
.dropdown-menu { border: 0; border-radius: 14px; box-shadow: var(--sm-ombra-alta), var(--sm-contorno); padding: .375rem 0; font-size: .875rem;
  background: #fff; transform-origin: top left; }
.dropdown-menu-end, .dropdown-menu[data-popper-placement$="end"] { transform-origin: top right; }
.dropdown-menu[data-popper-placement^="top"] { transform-origin: bottom left; }
.dropdown-menu[data-popper-placement="top-end"] { transform-origin: bottom right; }
.dropdown-menu.show { animation: sm-tendina .2s var(--sm-curva-esce); }
@keyframes sm-tendina { from { opacity: 0; scale: .95; } }
.dropdown-item { border-radius: 0; padding: .5rem .875rem; color: var(--sm-testo); }
.dropdown-item:hover, .dropdown-item:focus { background: rgb(36 46 124 / .04); color: var(--sm-testo); }
.dropdown-item:focus-visible, .dropdown-item.active, .dropdown-item:active { background: rgb(36 46 124 / .07); color: var(--sm-testo);
  box-shadow: inset 3px 0 0 var(--sm-primario); outline: 0; }
.dropdown-item.text-danger:is(:focus-visible, .active, :active) { background: var(--sm-rosso-50); box-shadow: inset 3px 0 0 var(--sm-errore); }
.dropdown-divider { margin: .375rem 0; }
.sm-lista-gruppo { padding: .5rem .875rem .1875rem; font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sm-testo-muto); }
.sm-lista-voce { display: grid; grid-template-columns: minmax(0, 1fr) 1rem; align-items: center; gap: .5rem; }
.sm-lista-testo { min-width: 0; }
.sm-lista-spunta { visibility: hidden; color: var(--sm-primario); font-size: 1rem; }
.sm-lista-voce.scelta .sm-lista-spunta { visibility: visible; }
.sm-lista-voce.scelta .sm-lista-testo > :first-child { color: var(--sm-primario); font-weight: 600; }
/* le tendine del browser con lo stesso aspetto dove si può (select personalizzabile: Chrome ed Edge recenti); altrove restano
   quelle di sistema. Solo le tendine a scelta singola: le liste a più righe (multiple, size) restano come sono */
@supports (appearance: base-select) {
  select.form-select:not([multiple]):not([size]), select.form-select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select.form-select:not([multiple]):not([size])::picker-icon { display: none; }
  select.form-select::picker(select) { border: 0; border-radius: 14px; background: #fff; box-shadow: var(--sm-ombra-alta), var(--sm-contorno);
    padding: .375rem 0; margin-block: .375rem; max-block-size: min(22rem, 60vh); font-size: .875rem; }
  select.form-select option { padding: .5rem .875rem; gap: .5rem; color: var(--sm-testo); }
  select.form-select option:hover { background: rgb(36 46 124 / .04); }
  select.form-select option:focus-visible { background: rgb(36 46 124 / .07); box-shadow: inset 3px 0 0 var(--sm-primario); outline: 0; }
  select.form-select option:checked { background: transparent; color: var(--sm-primario); font-weight: 600; }
  select.form-select option:checked:focus-visible { background: rgb(36 46 124 / .07); }
  select.form-select option::checkmark { order: 1; margin-inline-start: auto; color: var(--sm-primario); }
  select.form-select option:disabled { color: var(--sm-neutri-400); }
  select.form-select optgroup { padding-top: .25rem; font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sm-testo-muto); }
  select.form-select optgroup option { font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sm-testo); }
}
.alert { border-radius: 14px; border: 0; font-size: .875rem; }
.alert-warning { background: var(--sm-ambra-100); color: var(--sm-ambra-900); }
.alert-danger { background: var(--sm-rosso-50); color: var(--sm-errore-testo); }
.alert-info { background: var(--sm-azzurro-50); color: var(--sm-azzurro-800); }
.alert-success { background: var(--sm-verde-50); color: var(--sm-successo-testo); }
.alert-secondary { background: var(--sm-neutri-100); color: var(--sm-neutri-800); }
.alert-light { background: #fff; color: var(--sm-testo-2); border: 1px solid var(--sm-bordo); }

/* ---- home ----------------------------------------------------------------------------------------------------------- */
.sm-velatura { background: var(--sm-velatura); }
.sm-benvenuto { border-radius: var(--sm-raggio-card); box-shadow: var(--sm-ombra); padding: 2rem 2.25rem; margin-bottom: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.sm-benvenuto-data { font-size: .875rem; color: var(--sm-testo-muto); }
.sm-benvenuto h1 { margin: 0; font-size: 2.5rem; line-height: 1.08; }
.sm-benvenuto-sintesi { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sm-testo-2); max-width: 64ch; }
.sm-benvenuto-sintesi a { font-weight: 500; }
.sm-benvenuto .sm-pagina-azioni { margin-top: .5rem; }
/* il saluto a lavagna (tela «Buongiorno a lavagna», variante C senza cornice): ardesia blu British con un velo di
   polvere di gesso e qualche passata di cancellino, la data scritta a mano in alto a destra, il nome sottolineato in
   gesso rosso, link e pulsanti color gesso */
.sm-benvenuto.sm-lavagna { position: relative; isolation: isolate; overflow: hidden; padding: 1.875rem 2.5rem 2.25rem; color: var(--sm-gesso);
  box-shadow: 0 2px 4px rgb(13 17 31 / .1), 0 16px 36px rgb(13 17 31 / .18), inset 0 0 0 1px rgb(255 255 255 / .07);
  background: radial-gradient(farthest-side at 88% 140%, transparent 57%, rgb(255 255 255 / .05) 65%, transparent 75%),
    radial-gradient(52% 62% at 70% 28%, rgb(255 255 255 / .055), transparent 70%), radial-gradient(34% 48% at 10% 92%, rgb(255 255 255 / .04), transparent 70%),
    radial-gradient(120% 150% at 28% 18%, var(--sm-navy-800) 0%, var(--sm-navy-900) 55%, var(--sm-navy-950) 100%); }
.sm-lavagna::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; background: url("../img/gesso.svg") 0 0 / 240px 240px; }
.sm-lavagna .sm-benvenuto-data { position: absolute; top: 1.5rem; right: 2.5rem; font-family: var(--sm-font-mano); font-size: 1.875rem; font-weight: 500; line-height: 1;
  color: rgb(245 243 236 / .82); transform: rotate(-2deg); transform-origin: right center; }
.sm-lavagna h1 { padding-right: 15rem; font-family: var(--sm-font-marchio); font-weight: 800; font-size: 3.25rem; line-height: 1.05; letter-spacing: .012em;
  color: var(--sm-gesso); text-shadow: 0 0 1px rgb(245 243 236 / .35); }
.sm-lavagna-nome { position: relative; display: inline-block; }
/* la lavagna sa che ora è (_gesso_ora.html): sole che sorge, sole e nuvola o luna, in gesso accanto alla data */
.sm-gesso-ora { position: absolute; z-index: 0; width: 76px; height: 76px; pointer-events: none; fill: none; stroke: var(--sm-gesso); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.sm-gesso-ora .giallo { stroke: #F6D27A; } .sm-gesso-ora .rosso { stroke: var(--sm-gesso-rosso); }
.sm-gesso-ora > * { stroke-dasharray: 1; }
.sm-lavagna .sm-gesso-ora { right: 2.25rem; top: 4.25rem; }
.sm-portale-testa .sm-gesso-ora { right: 1.25rem; bottom: .75rem; width: 54px; height: 54px; opacity: .75; }
.sm-lavagna--scrive .sm-gesso-ora > *, html.sm-prima-vista .sm-portale-testa .sm-gesso-ora > * {
  stroke-dashoffset: 1; animation: sm-gesso-traccia .8s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.9s + var(--i, 0) * 80ms); }
@keyframes sm-gesso-traccia { to { stroke-dashoffset: 0; } }
@media (max-width: 575.98px) { .sm-lavagna .sm-gesso-ora { display: none; } }
.sm-lavagna-nome svg { position: absolute; left: -3%; bottom: -.2em; width: 108%; height: .25em; overflow: visible; color: var(--sm-gesso-rosso); }
.sm-lavagna .sm-benvenuto-sintesi { color: rgb(245 243 236 / .84); line-height: 1.7; }
.sm-lavagna .sm-benvenuto-sintesi a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: rgb(245 243 236 / .42); text-underline-offset: .24em; }
.sm-lavagna .sm-benvenuto-sintesi a:hover { color: #fff; text-decoration-color: #fff; }
.sm-lavagna .btn-primary { --bs-btn-color: var(--sm-navy-900); --bs-btn-bg: var(--sm-gesso); --bs-btn-border-color: var(--sm-gesso); --bs-btn-hover-color: var(--sm-navy-950);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-color: var(--sm-navy-950); --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff; }
.sm-lavagna .btn-primary:hover { box-shadow: 0 6px 18px rgb(0 0 0 / .3); }
.sm-lavagna .btn-outline-secondary { --bs-btn-color: var(--sm-gesso); --bs-btn-bg: transparent; --bs-btn-border-color: rgb(245 243 236 / .4); --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(245 243 236 / .08); --bs-btn-hover-border-color: var(--sm-gesso); --bs-btn-active-color: #fff; --bs-btn-active-bg: rgb(245 243 236 / .14);
  --bs-btn-active-border-color: var(--sm-gesso); }
.sm-lavagna :focus-visible { outline-color: #fff; }
/* tre zone: da sistemare e oggi affiancate, in arrivo sotto a tutta larghezza */
.sm-home { display: flex; flex-direction: column; gap: 1.5rem; }
.sm-home-riga { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.sm-home-riga--una { grid-template-columns: minmax(0, 1fr); }
.sm-zona { padding: 1.5rem 1.75rem 1.375rem; scroll-margin-top: 5rem; }
.sm-zona-testa { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.sm-zona-testa h2 { margin: 0; font-size: 1.375rem; }
/* da sistemare: il numero in colonna fa leggere a colpo d'occhio dove c'è più lavoro */
.sm-pratica + .sm-pratica { border-top: 1px solid var(--sm-bordo-tenue); }
.sm-pratica > summary { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8125rem .625rem;
  margin: 0 -.625rem; border-radius: 12px; cursor: pointer; list-style: none; transition: background-color .15s var(--sm-curva); }
.sm-pratica > summary::-webkit-details-marker { display: none; }
.sm-pratica > summary:hover { background: var(--sm-neutri-50); }
.sm-pratica-numero { font-family: var(--sm-font-titoli); font-synthesis: none; font-variant-numeric: lining-nums tabular-nums; font-size: 1.875rem; line-height: 1;
  text-align: right; color: var(--sm-primario); }
.sm-pratica-numero--rosso { color: var(--sm-errore-testo); }
.sm-pratica-numero--ambra { color: var(--sm-attesa-testo); }
.sm-pratica-testo { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.sm-pratica-testo .titolo { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.sm-pratica-testo .titolo .bi { color: var(--sm-testo-muto); font-size: .9375rem; }
.sm-pratica-testo .anteprima { font-size: .8125rem; color: var(--sm-testo-muto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-pratica-freccia { color: var(--sm-neutri-500); transition: transform var(--sm-durata) var(--sm-curva); }
.sm-pratica[open] .sm-pratica-freccia { transform: rotate(180deg); }
.sm-pratica[open] > summary { background: var(--sm-neutri-50); }
.sm-pratica-corpo { display: flex; flex-direction: column; gap: .125rem; padding: .375rem 0 1rem 4.75rem; animation: sm-appare .2s var(--sm-curva); }
.sm-in-ordine { display: flex; align-items: baseline; gap: .5rem; margin: .5rem 0 0; padding-top: .875rem; border-top: 1px solid var(--sm-bordo-tenue); font-size: .875rem;
  color: var(--sm-successo-testo); }
.sm-in-ordine--tutto { border-top: 0; padding-top: .25rem; font-size: 1rem; }
/* oggi: agenda con l'orario in colonna */
.sm-agenda + .sm-agenda { margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid var(--sm-bordo-tenue); }
.sm-agenda-testa { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .375rem; }
.sm-agenda-testa h3 { margin: 0; font-size: .9375rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.sm-agenda-testa h3 .bi { color: var(--sm-primario-testo); }
.sm-agenda-testa .sm-conteggio { min-width: 24px; height: 24px; font-size: .75rem; }
.sm-agenda-testa > a { white-space: nowrap; }
.sm-colonna { display: flex; flex-direction: column; }
.sm-colonna .sm-blocco-link { margin-top: .5rem; }
.sm-agenda-riga { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: baseline; gap: .75rem; padding: .5rem .625rem; margin: 0 -.625rem;
  border-radius: 10px; font-size: .875rem; color: var(--sm-testo); text-decoration: none !important; transition: background-color .15s var(--sm-curva); }
.sm-agenda-riga--senza-ora { grid-template-columns: minmax(0, 1fr) auto; }
a.sm-agenda-riga:hover { background: var(--sm-navy-50); }
.sm-agenda-riga .ora { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sm-primario); white-space: nowrap; }
.sm-agenda-riga .cosa, .sm-voce .cosa { display: flex; flex-direction: column; min-width: 0; }
.sm-agenda-riga .sotto, .sm-voce .sotto { font-size: .8125rem; color: var(--sm-testo-muto); }
.sm-agenda-riga--rossa .fw-semibold, .sm-voce--rossa .fw-semibold { color: var(--sm-rosso-800); }
/* in arrivo: colonne leggere, senza riquadri */
.sm-colonne { display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem; }
.sm-colonne > * { flex: 1 1 230px; min-width: 0; }
.sm-voce { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .4375rem .625rem; margin: 0 -.625rem; border-radius: 10px;
  font-size: .875rem; color: var(--sm-testo); text-decoration: none !important; transition: background-color .15s var(--sm-curva); }
a.sm-voce:hover { background: var(--sm-navy-50); }
/* grafici: la riga in alto, un numero con la sua variazione e il grafico (static/js/componenti/grafici.js) */
.sm-cruscotti { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.sm-cruscotti > * { flex: 1 1 250px; min-width: 0; }
.sm-cruscotto { padding: 1.25rem 1.375rem 1.125rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.sm-cruscotto-testa { margin: 0; font-size: .8125rem; font-weight: 600; }
.sm-cruscotto-testa a { display: inline-flex; align-items: center; gap: .5rem; color: var(--sm-testo-muto); text-decoration: none; }
.sm-cruscotto-testa a:hover { color: var(--sm-primario); text-decoration: none; }
.sm-cruscotto-testa .bi { color: var(--sm-primario-testo); }
.sm-cruscotto-testa .freccia { font-size: .6875rem; color: var(--sm-neutri-500); transition: transform var(--sm-durata) var(--sm-curva); }
.sm-cruscotto-testa a:hover .freccia { transform: translateX(2px); color: var(--sm-primario); }
.sm-cruscotto-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .625rem; margin-top: .375rem; }
.sm-cruscotto-cifra .sm-cifra { font-size: 2.125rem; line-height: 1.05; color: var(--sm-testo); font-variant-numeric: lining-nums proportional-nums; }
.sm-cruscotto-di { font-size: .9375rem; color: var(--sm-testo-muto); }
.sm-variazione { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  font-variant-numeric: tabular-nums; align-self: center; }
.sm-variazione--buona { background: var(--sm-verde-100); color: var(--sm-verde-700); }
.sm-variazione--cattiva { background: var(--sm-rosso-100); color: var(--sm-rosso-700); }
.sm-variazione--pari { background: var(--sm-neutri-100); color: var(--sm-neutri-700); }
.sm-cruscotto-nota { margin: 0; font-size: .8125rem; color: var(--sm-testo-muto); }
.sm-cruscotto-grafico { padding-top: .875rem; }
.sm-cruscotto-grafico .sm-grafico { border-radius: 8px; }
.sm-cruscotto-grafico .sm-grafico:focus-visible { outline-offset: 4px; }
.sm-cruscotto-grafico svg text { font-size: 11px; fill: var(--sm-testo-muto); font-family: var(--sm-font); }
.sm-cruscotto-grafico svg text.valore { font-weight: 600; fill: var(--sm-testo); }
.sm-cruscotto-grafico .sm-legenda { margin-top: .5rem; font-size: .75rem; gap: .75rem; }
.sm-cruscotto > .small.sm-muto { padding-top: .875rem; }
.sm-legenda i.linea { width: 14px; height: 2px; border-radius: 1px; }
/* barre di riempimento: la traccia è un passo chiaro della stessa scala del riempimento */
.sm-riempimenti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.sm-riempimento { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3125rem .75rem; align-items: center; padding: .3125rem .5rem; margin: 0 -.5rem;
  border-radius: 10px; color: var(--sm-testo); text-decoration: none !important; transition: background-color .15s var(--sm-curva); }
a.sm-riempimento:hover { background: var(--sm-navy-50); }
.sm-riempimento .nome { font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-riempimento .conto { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--sm-testo-muto); font-variant-numeric: tabular-nums; }
.sm-riempimento .conto .sm-stato { padding: .0625rem .5rem; }
.sm-riempimento .sm-barra { grid-column: 1 / -1; height: 6px; background: var(--sm-navy-100); }
.sm-riempimento .sm-barra > span { background: var(--sm-navy-600); }
.sm-riempimento .sm-barra--quasi { background: var(--sm-ambra-100); }
.sm-riempimento .sm-barra--quasi > span { background: var(--sm-ambra-500); }
.sm-riempimento .sm-barra--piena { background: var(--sm-rosso-100); }
.sm-riempimento .sm-barra--piena > span { background: var(--sm-rosso-600); }
.sm-blocco-riga { display: flex; justify-content: space-between; align-items: center; gap: .75rem; font-size: .875rem; color: var(--sm-testo); text-decoration: none !important;
  padding: .5rem .625rem; margin: 0 -.625rem; border-radius: 12px; transition: background-color .15s var(--sm-curva); }
a.sm-blocco-riga:hover { background: var(--sm-navy-50); }
.sm-blocco-riga .sotto { font-size: .8125rem; color: var(--sm-testo-muto); }
.sm-blocco-riga--rossa { background: var(--sm-rosso-50); } .sm-blocco-riga--rossa .titolo { color: var(--sm-rosso-800); font-weight: 600; }
a.sm-blocco-riga--rossa:hover { background: var(--sm-rosso-100); }
.sm-card > .sm-blocco-riga { margin: 0; border-radius: 0; }
.sm-card > .sm-blocco-riga:first-child { border-radius: var(--sm-raggio-card) var(--sm-raggio-card) 0 0; }
.sm-card > .sm-blocco-riga:last-child { border-radius: 0 0 var(--sm-raggio-card) var(--sm-raggio-card); }
.sm-card > .sm-blocco-riga:last-child, .sm-card ul.list-unstyled > li:last-child { border-bottom: 0 !important; }
.sm-blocco-link { font-size: .875rem; font-weight: 600; margin-top: auto; padding-top: .25rem; color: var(--sm-primario-testo); }
.sm-entra-sfalsato > * { animation: sm-sale .45s var(--sm-curva) both; }
.sm-entra-sfalsato > :nth-child(2) { animation-delay: .04s; } .sm-entra-sfalsato > :nth-child(3) { animation-delay: .08s; }
.sm-entra-sfalsato > :nth-child(4) { animation-delay: .12s; } .sm-entra-sfalsato > :nth-child(5) { animation-delay: .16s; }
.sm-entra-sfalsato > :nth-child(n+6) { animation-delay: .2s; }
@keyframes sm-sale { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- accesso -------------------------------------------------------------------------------------------------------- */
.sm-accesso { min-height: 100vh; display: flex; flex-wrap: wrap; }
.sm-accesso-lato { flex: 1 1 420px; color: #fff; padding: 3.5rem 4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  background: radial-gradient(560px 520px at 0% 100%, var(--sm-navy-700) 0%, rgb(55 68 176 / 0) 70%), var(--sm-primario); }
.sm-accesso-marchio { width: 240px; display: block; }
.sm-accesso-sedi { font-size: .8125rem; color: var(--sm-navy-200); margin-top: .75rem; letter-spacing: .04em; }
.sm-accesso-lato h1 { color: #fff; font-size: 2.5rem; line-height: 1.12; max-width: 480px; margin: 0; }
.sm-accesso-lato p { color: var(--sm-navy-200); font-size: 1.0625rem; line-height: 1.65; max-width: 460px; }
.sm-accesso-pillole { display: flex; flex-wrap: wrap; gap: .625rem; }
.sm-accesso-pillole span { padding: .5rem .875rem; border-radius: 999px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .14); font-size: .8125rem; font-weight: 500; }
.sm-accesso-privacy { font-size: .8125rem; color: var(--sm-navy-300); max-width: 520px; }
.sm-accesso-form { flex: 1 1 420px; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.sm-accesso-card { width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 2.25rem; box-shadow: var(--sm-ombra-alta); display: flex; flex-direction: column; gap: 1.125rem;
  animation: sm-sale .45s var(--sm-curva) both; }
.sm-accesso-card h2 { font-size: 1.75rem; margin: 0; }
.sm-accesso-card .btn, .sm-accesso-card .form-control { min-height: 48px; }
.sm-lingue { display: inline-flex; border: 1px solid var(--sm-bordo); border-radius: 999px; padding: 3px; font-size: .75rem; font-weight: 600; background: #fff; }
.sm-lingue a, .sm-lingue button { padding: .25rem .625rem; border-radius: 999px; color: var(--sm-testo-muto); border: 0; background: transparent; text-decoration: none; }
.sm-lingue .attiva { background: var(--sm-primario); color: #fff; }
.sm-requisiti { list-style: none; padding: 0; margin: 0; font-size: .8125rem; display: grid; gap: .25rem; }
.sm-requisiti li { color: var(--sm-testo-muto); display: flex; align-items: center; gap: .375rem; }
.sm-requisiti li.ok { color: var(--sm-successo-testo); }
.sm-profili { display: grid; gap: .75rem; }
.sm-profilo-scelta { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.125rem; border-radius: 16px; border: 1px solid var(--sm-bordo); background: #fff; text-align: left; width: 100%;
  transition: border-color var(--sm-durata) var(--sm-curva), box-shadow var(--sm-durata) var(--sm-curva); }
.sm-profilo-scelta:hover { border-color: var(--sm-navy-300); box-shadow: var(--sm-anello); }
.sm-profilo-scelta .bi { font-size: 1.5rem; color: var(--sm-primario-testo); }

/* ---- portali e pagine pubbliche da smartphone ------------------------------------------------------------------------ */
.sm-portale { min-height: 100vh; display: flex; flex-direction: column; background: var(--sm-sfondo); --sm-altezza-azione: 48px; font-size: 1rem; }
.sm-portale-testa { background: var(--sm-primario); color: #fff; padding: 1rem 1.25rem 1.75rem; border-radius: 0 0 24px 24px; }
.sm-portale-testa .sm-portale-riga { display: flex; justify-content: space-between; align-items: center; gap: .75rem; max-width: 960px; margin: 0 auto; }
.sm-portale-marchio { display: flex; align-items: center; gap: .625rem; color: #fff; text-decoration: none !important; font-weight: 600; font-size: .9375rem; }
.sm-portale-marchio .sm-monogramma { width: 34px; height: 34px; }
.sm-portale-menu { background: rgb(255 255 255 / .12); color: #fff; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; }
.sm-portale-menu:hover { background: rgb(255 255 255 / .2); color: #fff; }
.sm-portale-titolo { max-width: 960px; margin: 1.125rem auto 0; }
.sm-portale-titolo .data, .sm-portale-sotto { font-size: .875rem; color: var(--sm-navy-300); }
.sm-portale-titolo h1 { color: #fff; font-size: 1.875rem; margin: .125rem 0 0; }
.sm-portale-corpo { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem 6.5rem; display: flex; flex-direction: column; gap: 1rem; }
.sm-portale .sm-card { border-radius: var(--sm-raggio-card); }
/* barra dei portali in vetro liquido: galleggia sul contenuto, poca sfocatura e molta saturazione, riflesso in alto;
   la pillola della voce attiva scivola cambiando pagina (View Transitions) */
.sm-nav-basso { position: fixed; z-index: 1030; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem;
  left: max(.625rem, calc((100% - 560px) / 2)); right: max(.625rem, calc((100% - 560px) / 2)); bottom: calc(.625rem + env(safe-area-inset-bottom)); padding: .3125rem;
  border-radius: 24px; background: rgb(255 255 255 / .46); -webkit-backdrop-filter: blur(6px) saturate(190%) brightness(1.06); backdrop-filter: blur(6px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .75), inset 0 8px 14px rgb(255 255 255 / .5), inset 0 -8px 16px rgb(36 46 124 / .1), 0 12px 28px -8px rgb(36 46 124 / .38);
  view-transition-name: sm-nav-basso; }
.sm-nav-basso::before { content: ""; position: absolute; left: 1.5rem; top: .3125rem; width: 30%; height: .5rem; border-radius: 999px; pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / .9), rgb(255 255 255 / 0)); }
.sm-nav-basso a { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: .125rem; padding: .375rem 0; font-size: .6875rem; font-weight: 500;
  color: var(--sm-testo-2); text-decoration: none; min-height: 52px; justify-content: center; border-radius: 19px; transition: color var(--sm-durata) var(--sm-curva); }
.sm-nav-basso a .bi { font-size: 1.3rem; }
.sm-nav-basso a.attiva { color: var(--sm-primario); font-weight: 600; }
/* la conca della voce attiva sta nella barra (ui.js): cambiando pagina arriva come una goccia dalla voce di prima */
.sm-nav-basso a { z-index: 1; }
.sm-nav-pillola { position: absolute; left: 0; top: calc(.3125rem + var(--sm-stretto, 0px)); bottom: calc(.3125rem + var(--sm-stretto, 0px)); z-index: 0; border-radius: 19px;
  pointer-events: none; background: rgb(36 46 124 / .1); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7); }
.sm-nav-basso a.attiva .bi { animation: sm-icona-su .3s .12s var(--sm-curva-esce) both; }
@keyframes sm-icona-su { to { transform: translateY(-2px); } }
.sm-nav-pillola::before { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--sm-accento); }
.sm-figli { display: flex; gap: .5rem; flex-wrap: wrap; max-width: 960px; margin: 1rem auto 0; }
.sm-figli button { height: 40px; padding: 0 .9375rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: transparent; color: #fff; font-weight: 500; font-size: .875rem;
  transition: background-color var(--sm-durata) var(--sm-curva); }
.sm-figli button:hover { background: rgb(255 255 255 / .1); }
.sm-figli button[aria-selected="true"] { background: #fff; color: var(--sm-primario); border-color: #fff; font-weight: 600; }
.sm-presenze-riga { display: flex; flex-direction: column; gap: .625rem; padding: .875rem; }
/* registro presenze in rilievo: i tre tasti sporgono dalla superficie, quello scelto resta premuto col colore dello stato */
.sm-presenze-pulsanti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; padding: .5rem; border-radius: 18px; background: var(--sm-rilievo); }
.sm-presenze-pulsanti button { min-height: 48px; border-radius: 13px; border: 0; background: var(--sm-rilievo); color: var(--sm-neutri-700); font-weight: 600; font-size: .8125rem;
  box-shadow: var(--sm-rilievo-su); transition: box-shadow var(--sm-durata-rapida) var(--sm-curva-esce), background-color var(--sm-durata) ease, color var(--sm-durata) ease,
    transform var(--sm-durata-rapida) var(--sm-curva-esce); }
.sm-presenze-pulsanti button:hover { color: var(--sm-testo); }
.sm-presenze-pulsanti button:active:not(:disabled) { transform: scale(.97); }
.sm-presenze-pulsanti button[aria-pressed="true"] { box-shadow: var(--sm-rilievo-giu); }
.sm-presenze-pulsanti button[aria-pressed="true"][data-stato="presente_aula"] { background: var(--sm-verde-100); color: var(--sm-verde-700);
  box-shadow: inset 3px 3px 7px rgb(0 101 49 / .2), inset -3px -3px 7px rgb(255 255 255 / .75); }
.sm-presenze-pulsanti button[aria-pressed="true"][data-stato="presente_online"] { background: var(--sm-azzurro-100); color: var(--sm-azzurro-700);
  box-shadow: inset 3px 3px 7px rgb(0 86 150 / .2), inset -3px -3px 7px rgb(255 255 255 / .75); }
.sm-presenze-pulsanti button[aria-pressed="true"][data-stato="assente"] { background: var(--sm-rosso-100); color: var(--sm-rosso-700);
  box-shadow: inset 3px 3px 7px rgb(173 0 10 / .18), inset -3px -3px 7px rgb(255 255 255 / .75); }
/* il segno della presenza (lezione_didattica.js): il colore dello stato incassato scorre come una goccia da un tasto all'altro;
   il tasto scelto diventa trasparente e lascia vedere il segno */
.sm-presenze-pulsanti { position: relative; }
.sm-presenze-pulsanti button { position: relative; z-index: 1; }
.sm-presenze-segno { position: absolute; left: 0; top: calc(.5rem + var(--sm-stretto, 0px)); bottom: calc(.5rem + var(--sm-stretto, 0px)); z-index: 0; border-radius: 13px;
  pointer-events: none; transition: background-color var(--sm-durata) ease, box-shadow var(--sm-durata) ease; }
.sm-presenze-segno[data-stato="presente_aula"] { background: var(--sm-verde-100); box-shadow: inset 3px 3px 7px rgb(0 101 49 / .2), inset -3px -3px 7px rgb(255 255 255 / .75); }
.sm-presenze-segno[data-stato="presente_online"] { background: var(--sm-azzurro-100); box-shadow: inset 3px 3px 7px rgb(0 86 150 / .2), inset -3px -3px 7px rgb(255 255 255 / .75); }
.sm-presenze-segno[data-stato="assente"] { background: var(--sm-rosso-100); box-shadow: inset 3px 3px 7px rgb(173 0 10 / .18), inset -3px -3px 7px rgb(255 255 255 / .75); }
.sm-presenze-pulsanti.con-segno button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.sm-azione-fissa { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--sm-bordo); padding: .75rem 1rem calc(.875rem + env(safe-area-inset-bottom)); margin: 0 -1rem -6.5rem; }
.sm-passi { display: flex; gap: .375rem; flex-wrap: wrap; font-size: .75rem; font-weight: 600; }
.sm-passi span { padding: .25rem .6875rem; border-radius: 999px; background: var(--sm-neutri-100); color: var(--sm-testo-muto); transition: background-color var(--sm-durata) var(--sm-curva); }
.sm-passi span.fatto { background: var(--sm-successo-sfondo); color: var(--sm-successo-testo); }
.sm-passi span.attivo { background: var(--sm-primario); color: #fff; }
.sm-pubblica { min-height: 100vh; --sm-altezza-azione: 48px; font-size: 1rem; }
.sm-pubblica-testa { background: #fff; border-bottom: 1px solid var(--sm-bordo); padding: .875rem 1rem; }
.sm-pubblica-testa > div { max-width: 720px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.sm-pubblica-marchio { width: 150px; display: block; }
.sm-pubblica-corpo { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
/* portale studente: prossima lezione, anello delle presenze, traguardi */
.sm-prossima { padding: 1.375rem 1.375rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.sm-prossima h2 { margin: 0; font-size: 1.625rem; line-height: 1.15; }
.sm-prossima-quando { font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sm-prossima-dove { font-size: .875rem; color: var(--sm-testo-muto); display: flex; align-items: center; gap: .375rem; }
.sm-anello { position: relative; width: 84px; height: 84px; flex: none; }
.sm-anello svg { display: block; transform: rotate(-90deg); }
.sm-anello circle { fill: none; stroke-width: 9; }
.sm-anello .traccia { stroke: var(--sm-navy-100); }
.sm-anello .valore { stroke: var(--sm-primario); stroke-linecap: round; transition: stroke-dashoffset .8s var(--sm-curva); }
.sm-anello--attesa .valore { stroke: var(--sm-attesa); }
.sm-anello span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sm-font-titoli); font-synthesis: none;
  font-size: 1.125rem; color: var(--sm-primario); font-variant-numeric: lining-nums tabular-nums; }
.sm-anello--attesa span { color: var(--sm-attesa-testo); }
.sm-traguardo-icona { width: 48px; height: 48px; border-radius: 14px; background: var(--sm-rosso-50); color: var(--sm-accento); display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.375rem; flex: none; }
.sm-cifra { font-family: var(--sm-font-titoli); font-synthesis: none; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; line-height: 1.1; }
.sm-titoletto { margin: 0; font-family: var(--sm-font); font-size: 1rem; font-weight: 600; color: var(--sm-testo); letter-spacing: 0; }

/* ---- calendari ----------------------------------------------------------------------------------------------------- */
.sm-cal-mese { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--sm-bordo); border-radius: 14px; overflow: hidden; background: #fff; }
.sm-cal-mese .testa { background: var(--sm-neutri-50); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-testo-muto); padding: .5rem;
  text-align: center; border-bottom: 1px solid var(--sm-bordo); }
.sm-cal-mese .giorno { min-height: 110px; padding: .375rem; border-right: 1px solid var(--sm-bordo-tenue); border-bottom: 1px solid var(--sm-bordo-tenue); font-size: .75rem; }
.sm-cal-mese .giorno.fuori { background: var(--sm-neutri-50); color: var(--sm-neutri-500); }
.sm-cal-mese .giorno.oggi .num { background: var(--sm-accento); color: #fff; }
.sm-cal-mese .num { display: inline-flex; width: 26px; height: 26px; border-radius: 999px; align-items: center; justify-content: center; font-weight: 600; font-variant-numeric: tabular-nums; }
/* tipi di evento: colori validati con dataviz su tutte le coppie (lezioni navy, esami rosso, impegni petrolio, chiusure grigio);
   fondo 100 e testo 800 della stessa scala, così si distinguono anche le chip senza guardare il bordo */
.sm-evento { --sm-evento-colore: var(--sm-navy-700); --sm-evento-fondo: var(--sm-navy-100); --sm-evento-testo: var(--sm-navy-900);
  display: block; padding: .1875rem .375rem; margin-top: .25rem; border-radius: 7px; font-size: .6875rem; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: var(--sm-evento-fondo); color: var(--sm-evento-testo); border-left: 4px solid var(--sm-evento-colore); text-decoration: none !important;
  transition: filter .15s var(--sm-curva); }
.sm-evento:hover { filter: brightness(.95) saturate(1.2); }
.sm-evento--lezione { --sm-evento-colore: var(--sm-navy-700); --sm-evento-fondo: var(--sm-navy-100); --sm-evento-testo: var(--sm-navy-900); }
.sm-evento--esame { --sm-evento-colore: var(--sm-rosso-600); --sm-evento-fondo: var(--sm-rosso-100); --sm-evento-testo: var(--sm-rosso-800); }
.sm-evento--impegno { --sm-evento-colore: var(--sm-petrolio-500); --sm-evento-fondo: var(--sm-petrolio-100); --sm-evento-testo: var(--sm-petrolio-800); }
.sm-evento--chiusura { --sm-evento-colore: var(--sm-neutri-400); --sm-evento-fondo: var(--sm-neutri-100); --sm-evento-testo: var(--sm-neutri-700); }
.sm-evento--annullata { text-decoration: line-through !important; opacity: .7; }
/* lezione di un corso da confermare (il docente non la vede): il colore resta quello del tipo, la forma dice lo stato,
   con il contorno tratteggiato e la clessidra prima dell'ora (scelta C della tavola «Lezioni da confermare») */
.sm-evento--da-confermare { --sm-evento-fondo: rgb(255 255 255 / .35); --sm-evento-testo: var(--sm-navy-800);
  border: 1.5px dashed var(--sm-navy-500); padding-left: .3125rem; }
.sm-evento--da-confermare::before { content: "\f41f"; font-family: "bootstrap-icons"; font-weight: normal; margin-right: .1875rem; vertical-align: -.125em; }
.sm-legenda-evento { display: inline-flex; align-items: center; align-self: center; margin: 0; padding-right: .625rem; font-size: .75rem; }
/* aula libera: un clic e si apre l'impegno nuovo in quell'aula, quel giorno */
.sm-libera { display: inline-flex; align-items: center; gap: .375rem; border: 1px dashed var(--sm-neutri-300); background: transparent; color: var(--sm-testo-muto);
  border-radius: 8px; padding: .25rem .5rem; font-size: .75rem; font-weight: 500; transition: background-color var(--sm-durata) var(--sm-curva), border-color var(--sm-durata) var(--sm-curva), color var(--sm-durata) var(--sm-curva); }
.sm-libera .bi { font-size: .6875rem; opacity: .7; }
.sm-libera:hover, .sm-libera:focus-visible { border-color: var(--sm-petrolio-500); border-style: solid; background: var(--sm-petrolio-50); color: var(--sm-petrolio-800); }
.sm-tabella-aule th.oggi { color: var(--sm-accento-testo); }
/* «Oggi»: per un momento il pulsante e la casella di oggi si accendono dello stesso rosso */
.btn.sm-oggi-acceso { --bs-btn-bg: var(--sm-accento); --bs-btn-color: #fff; --bs-btn-border-color: var(--sm-accento); --bs-btn-hover-bg: var(--sm-accento);
  --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--sm-accento); }
#vista .oggi { transition: box-shadow .4s var(--sm-curva), background-color .4s var(--sm-curva); }
#vista .sm-oggi-acceso { box-shadow: inset 0 0 0 2px var(--sm-accento); background-color: var(--sm-rosso-50); }

/* ---- stampa -------------------------------------------------------------------------------------------------------- */
@media print {
  .sm-sidebar, .sm-testata, .sm-pagina-azioni, .sm-elenco-barra, .sm-elenco-piede, .sm-nav-basso, .sm-ticketing-nascondi, .btn { display: none !important; }
  .sm-contenuto { padding: 0; }
  .sm-card { box-shadow: none; border: 1px solid #ddd; }
  .sm-benvenuto, .sm-benvenuto.sm-lavagna { box-shadow: none; background: none; padding: 0; }
  .sm-lavagna::before { display: none; }
  .sm-benvenuto.sm-lavagna, .sm-lavagna h1, .sm-lavagna .sm-benvenuto-data, .sm-lavagna .sm-benvenuto-sintesi, .sm-lavagna .sm-benvenuto-sintesi a { color: var(--sm-testo); text-shadow: none; }
  body { background: #fff; }
}

/* ---- responsive ---------------------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root { --sm-altezza-azione: 48px; }
  .sm-sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .25s var(--sm-curva); box-shadow: var(--sm-ombra-alta); }
  .sm-sidebar.aperta { transform: none; }
  .sm-velo { position: fixed; inset: 0; background: rgb(13 17 31 / .45); z-index: 1025; display: none; }
  .sm-velo.aperto { display: block; }
  .sm-hamburger { display: inline-flex; }
  .sm-testata { padding: .625rem 1rem; }
  .sm-contenuto { padding: 1.25rem 1rem 2rem; }
  .sm-corpo { --sm-quaderno-inizio: calc(3.75rem + 1px); --sm-quaderno-origine: 1rem 1.25rem; }
  .sm-utente-testo { display: none; }
  h1 { font-size: 1.625rem; }
  .sm-benvenuto { padding: 1.5rem 1.25rem; }
  .sm-benvenuto h1 { font-size: 2rem; }
  .sm-benvenuto.sm-lavagna { padding: 1.5rem 1.25rem 1.75rem; }
  .sm-lavagna h1 { font-size: 2.5rem; }
  .sm-lavagna .sm-benvenuto-data { top: 1.25rem; right: 1.25rem; font-size: 1.625rem; }
  .sm-in-modifica .sm-pagina-testa { margin: -.5rem -1rem 1.25rem; padding: .625rem 1rem; top: calc(3.75rem + 1px); }
}
@media (max-width: 1199.98px) { .sm-home-riga { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) {
  .sm-zona { padding: 1.25rem 1.125rem; }
  .sm-pratica > summary { grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: .75rem; }
  .sm-pratica-numero { font-size: 1.5rem; }
  .sm-pratica-corpo { padding-left: 0; }
}
@media (max-width: 767.98px) {
  .sm-lavagna .sm-benvenuto-data { position: static; align-self: flex-end; }
  .sm-lavagna h1 { padding-right: 0; }
  .sm-tabella-carte thead { display: none; }
  .sm-tabella-carte tbody tr { display: block; padding: .75rem 1rem; border-top: 1px solid var(--sm-bordo-tenue); }
  .sm-tabella-carte tbody td { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0 !important; border: 0; text-align: right; }
  .sm-tabella-carte tbody td::before { content: attr(data-etichetta); font-weight: 600; color: var(--sm-testo-muto); font-size: .75rem; text-align: left; }
  .sm-tabella-carte tbody td.sm-cella-titolo { display: block; text-align: left; font-size: .9375rem; }
  .sm-tabella-carte tbody td.sm-cella-titolo::before, .sm-tabella-carte tbody td.sm-cella-check::before { content: none; }
  .sm-tabella-carte tbody tr.selezionata td:first-child { box-shadow: none; }
  .sm-pagina-azioni { width: 100%; }
  .sm-pagina-azioni .btn { flex: 1 1 auto; }
  .sm-accesso-lato { padding: 2rem 1.5rem; flex-basis: 100%; gap: 1.75rem; }
  .sm-accesso-lato h1 { font-size: 1.875rem; }
  .sm-accesso-marchio { width: 190px; }
  .sm-accesso-card { padding: 1.5rem; }
}

/* ---- contabilità e magazzino --------------------------------------------------------------------------------------- */
/* grafico a colonne raggruppate (report economici): due serie validate con lo script di dataviz, distinte per luminosità;
   l'azzurro 400 sta sotto 3:1 sul bianco, quindi legenda e tabella dei valori restano sempre */
.sm-grafico, .sm-legenda { --sm-serie-1: var(--sm-navy-700); --sm-serie-2: var(--sm-azzurro-400); }
.sm-grafico { position: relative; }
.sm-grafico svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sm-font); }
.sm-grafico .fascia { fill: transparent; cursor: default; outline: none; }
.sm-grafico .fascia:hover, .sm-grafico .fascia:focus { fill: var(--sm-navy-50); }
.sm-grafico-suggerimento { position: absolute; z-index: 5; pointer-events: none; background: #fff; border: 1px solid var(--sm-bordo); border-radius: 12px;
  box-shadow: var(--sm-ombra-alta); padding: .5rem .75rem; font-size: .75rem; min-width: 180px; color: var(--sm-testo-2); }
.sm-grafico-suggerimento .titolo { font-weight: 600; color: var(--sm-testo); margin-bottom: .25rem; }
.sm-grafico-suggerimento .riga { display: flex; align-items: center; gap: .5rem; line-height: 1.6; }
.sm-grafico-suggerimento .chiave { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.sm-grafico-suggerimento strong { color: var(--sm-testo); font-variant-numeric: tabular-nums; }
.sm-legenda { display: flex; flex-wrap: wrap; gap: .875rem; font-size: .8125rem; color: var(--sm-testo-2); }
.sm-legenda > span { display: inline-flex; align-items: center; gap: .375rem; }
.sm-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- didattica e portali --------------------------------------------------------------------------------------------- */
.sm-avviso { display: flex; align-items: center; gap: .625rem; padding: .75rem .875rem; border-radius: 14px; background: var(--sm-attesa-sfondo);
  color: var(--sm-ambra-800); font-size: .8125rem; font-weight: 600; text-decoration: none; transition: background-color .15s var(--sm-curva); }
.sm-avviso:hover { color: var(--sm-ambra-900); background: var(--sm-ambra-200); text-decoration: none; }
.sm-avviso .bi { font-size: 1.1rem; }
.sm-btn-accento-tenue { --bs-btn-color: var(--sm-primario); --bs-btn-border-color: var(--sm-navy-200); --bs-btn-bg: var(--sm-navy-50);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sm-primario); --bs-btn-hover-border-color: var(--sm-primario);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sm-primario-scuro); --bs-btn-active-border-color: var(--sm-primario-scuro); font-weight: 600; }
.sm-salva-grande { width: 100%; min-height: 52px; font-size: .9375rem; font-weight: 600; border-radius: 14px; }
.sm-etichetta-accento { font-size: .8125rem; font-weight: 600; color: var(--sm-primario-testo); }
.sm-timeline { list-style: none; margin: 0; padding: .75rem 1.5rem .75rem 2.5rem; position: relative; }
.sm-timeline::before { content: ""; position: absolute; left: 1.5rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--sm-bordo); }
.sm-timeline-voce { position: relative; padding: .625rem 0; border-bottom: 1px solid var(--sm-bordo-tenue); }
.sm-timeline-voce:last-child { border-bottom: 0; }
.sm-timeline-voce::before { content: ""; position: absolute; left: -1.3125rem; top: 1rem; width: 12px; height: 12px; border-radius: 999px; background: #fff;
  border: 3px solid var(--sm-neutri-400); }
.sm-timeline-voce--verde::before { border-color: var(--sm-successo); background: var(--sm-successo); }
.sm-timeline-voce--ambra::before { border-color: var(--sm-attesa); }
.sm-timeline-voce--rosso::before { border-color: var(--sm-errore); background: var(--sm-errore-sfondo); }
.sm-griglia-presenze .sm-tabella th, .sm-griglia-presenze .sm-tabella td { padding: .5rem .375rem; }
.sm-griglia-presenze .sm-griglia-nome { position: sticky; left: 0; z-index: 1; background: var(--sm-superficie); min-width: 180px; padding-left: 1.5rem; }
.sm-griglia-presenze .sm-griglia-cella { text-align: center; min-width: 52px; white-space: nowrap; }
.sm-griglia-presenze td[data-cella] { cursor: pointer; }
.sm-griglia-presenze td[data-cella]:hover { background: var(--sm-navy-50); }
.sm-griglia-cambiata { box-shadow: inset 0 0 0 2px var(--sm-navy-700); }
.sm-settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.sm-settimana-giorno { min-width: 0; }
@media (max-width: 767.98px) { .sm-settimana { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- esami: riepilogo a griglia e calendario delle prove --------------------------------------------------------------- */
.sm-griglia-esami { border-collapse: separate; border-spacing: 0; font-size: .8125rem; min-width: 100%; }
.sm-griglia-esami th, .sm-griglia-esami td { padding: .5rem .625rem; border-bottom: 1px solid var(--sm-bordo-tenue); border-right: 1px solid var(--sm-bordo-tenue);
  background: var(--sm-superficie); vertical-align: middle; }
.sm-griglia-esami thead th { font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sm-testo-muto);
  background: var(--sm-neutri-50); min-width: 96px; max-width: 128px; vertical-align: bottom; line-height: 1.25; }
.sm-griglia-esami .sm-fissa { position: sticky; left: 0; z-index: 1; min-width: 250px; max-width: 300px; box-shadow: 1px 0 0 var(--sm-bordo); }
.sm-griglia-esami thead .sm-fissa { z-index: 2; }
.sm-griglia-esami tfoot td { font-weight: 600; background: var(--sm-neutri-50); }
.sm-cella { text-align: center; cursor: pointer; white-space: nowrap; min-width: 96px; }
.sm-cella:hover, .sm-cella:focus-visible { outline: 2px solid var(--sm-navy-300); outline-offset: -2px; }
.sm-cella--fatta { background: var(--sm-successo-sfondo) !important; color: var(--sm-successo-testo); font-weight: 600; }
.sm-cella--scaduta { background: var(--sm-errore-sfondo) !important; color: var(--sm-errore-testo); font-weight: 600; }
.sm-cella--na { background: var(--sm-neutro-sfondo) !important; color: var(--sm-neutro-testo); }
.sm-cella .sotto { display: block; font-size: .6875rem; font-weight: 500; opacity: .85; }
.sm-cal-giorno { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: .875rem; padding: .875rem 1.5rem; border-top: 1px solid var(--sm-bordo-tenue); }
.sm-cal-giorno .data { color: var(--sm-primario); font-family: var(--sm-font-titoli); font-synthesis: none; font-variant-numeric: lining-nums; font-size: 1.0625rem; line-height: 1.2; }
.sm-cal-giorno .data small { display: block; font-weight: 500; font-size: .75rem; color: var(--sm-testo-muto); font-family: var(--sm-font); }
.sm-prove { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.sm-prova { display: flex; flex-direction: column; text-align: left; width: 100%; background: var(--sm-superficie); border: 1px solid var(--sm-bordo); border-top: 4px solid var(--sm-primario);
  border-radius: 14px; padding: .75rem .875rem; font-size: .8125rem; color: var(--sm-testo); transition: box-shadow var(--sm-durata) var(--sm-curva); }
button.sm-prova:hover { box-shadow: var(--sm-ombra); }
.sm-prova .titolo { font-weight: 600; display: flex; justify-content: space-between; gap: .5rem; }
.sm-prova dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .125rem .625rem; margin: .5rem 0 0; }
.sm-prova dt { font-size: .6875rem; font-weight: 600; color: var(--sm-testo-muto); letter-spacing: .04em; }
.sm-prova dd { margin: 0; overflow-wrap: anywhere; }
.sm-prova .note { margin-top: .375rem; color: var(--sm-attesa-testo); font-style: italic; }
/* calendario delle prove a mese: la riga della prova (ora, sessioni, città) va a capo invece di tagliarsi */
.sm-cal-prove .sm-evento { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }

/* ---- iscrizioni online ------------------------------------------------------------------------------------------------- */
.sm-pubblica-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--sm-primario); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sm-font-titoli); font-synthesis: none; }
.sm-pubblica .form-control, .sm-pubblica .form-select { min-height: var(--sm-altezza-azione); }
.sm-pubblica textarea.form-control { min-height: 96px; }
.sm-pubblica h1 { font-size: 1.625rem; color: var(--sm-primario); }
.sm-iniziativa-testa { background: radial-gradient(420px 260px at 100% 0%, rgb(205 23 25 / .24) 0%, rgb(205 23 25 / 0) 70%), var(--sm-primario); color: #fff;
  border-radius: var(--sm-raggio-card); padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .375rem; }
.sm-iniziativa-testa h1 { color: #fff; font-size: 1.375rem; margin: 0; }
.sm-iniziativa-testa .sotto { font-size: .8125rem; color: var(--sm-navy-200); }
.sm-codice-iniziativa { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; font-size: 1.25rem; text-align: center; }
.sm-opzione { display: flex; align-items: center; gap: .625rem; min-height: 48px; padding: .5rem .875rem; border: 1px solid var(--sm-bordo-campo); border-radius: var(--sm-raggio);
  background: var(--sm-superficie); cursor: pointer; font-size: .875rem; margin: 0; transition: background-color var(--sm-durata) var(--sm-curva), border-color var(--sm-durata) var(--sm-curva); }
.sm-opzione:hover { background: var(--sm-neutri-50); }
.sm-opzione:has(input:checked) { border: 2px solid var(--sm-primario); background: var(--sm-navy-50); padding: calc(.5rem - 1px) calc(.875rem - 1px); }
.sm-privacy { max-height: 160px; overflow-y: auto; padding: .75rem; border: 1px solid var(--sm-bordo); border-radius: var(--sm-raggio); background: var(--sm-neutri-50); color: var(--sm-testo-2); }
.sm-civetta { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sm-iscrizione-azione { position: sticky; bottom: 0; z-index: 5; background: var(--sm-superficie); border-top: 1px solid var(--sm-bordo); margin: 0 -1rem -3rem;
  padding: .75rem 1rem calc(.875rem + env(safe-area-inset-bottom)); }
.sm-iscrizione-azione > div { max-width: 720px; margin: 0 auto; }
.sm-iscrizione-azione .btn-primary { min-height: 52px; border-radius: 14px; font-weight: 600; }

/* ---- corsi ------------------------------------------------------------------------------------------------------------- */
.sm-tabella tbody tr.sm-riga-conflitto { background: var(--sm-rosso-50); }
.sm-tabella tbody tr.sm-riga-saltata td { color: var(--sm-neutri-600); }
.sm-cal-settimana .giorno { min-height: 260px; }
.sm-cal-mese .giorno .data-breve { display: none; }
.sm-evento .ora { font-variant-numeric: tabular-nums; margin-right: .25rem; }
.sm-tabella-aule td, .sm-tabella-aule th { vertical-align: top; }
@media (max-width: 767.98px) {
  .sm-cal-settimana { grid-template-columns: 1fr; }
  .sm-cal-settimana .testa { display: none; }
  .sm-cal-settimana .giorno { min-height: 0; }
  .sm-cal-settimana .giorno .num { display: none; }
  .sm-cal-settimana .giorno .data-breve { display: inline; }
}

/* ---- materia e movimento (novembre 2026, docs/design.md «Movimento») ---------------------------------------------------- */
@property --sm-angolo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --sm-px { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@property --sm-py { syntax: "<percentage>"; inherits: true; initial-value: 40%; }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --sm-molla: linear(0, .03, .107, .211, .329, .451, .567, .673, .766, .845, .909, .959, .997, 1.023, 1.041, 1.05, 1.054, 1.054, 1.051, 1.046, 1.039,
    1.033, 1.026, 1.02, 1.015, 1.01, 1.006, 1.003, 1.001, .999, 1); }
}

/* grana delicatissima sopra tutta la pagina: toglie l'effetto plastica e le bande delle sfumature */
/* senza modalità di fusione: uno strato fuso con tutta la pagina andrebbe ricalcolato a ogni ridisegno */
html::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: var(--sm-grana);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* fondo British (12/11/2026, tavola https://claude.ai/code/artifact/1bf0562a-05ec-4073-9ce6-7b16689414bc, menu com'è oggi,
   movimento acceso), dal basso: l'aurora blu navy e rossa che deriva piano (60 s) e sopra i quadretti del quaderno. La bandiera
   di luce (la Union Jack accennata) c'è stata per un giorno: tolta il 12/11, all'utente non piaceva */
:root {
  --sm-aurora: radial-gradient(closest-side at 26% 20%, rgb(55 68 176 / .17), transparent),
    radial-gradient(closest-side at 84% 14%, rgb(205 23 25 / .11), transparent),
    radial-gradient(closest-side at 58% 82%, rgb(26 29 116 / .14), transparent);
}
.sm-shell::before { content: ""; position: fixed; inset: -12%; z-index: -3; pointer-events: none; background: var(--sm-aurora);
  will-change: transform; animation: sm-aurora 60s ease-in-out infinite alternate; }
@keyframes sm-aurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 3%, 0) scale(1.08); } 100% { transform: translate3d(-1%, 4%, 0) scale(.96); } }
/* accesso, pagine pubbliche e portali: l'aurora ferma */
.sm-accesso-form::after, .sm-pubblica::after, body.sm-portale::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--sm-aurora); }

/* menu laterale ridotto col tasto in alto (M1), gruppi che si aprono di lato (M3), luce che segue il mouse (M4) */
.sm-sidebar { transition: width var(--sm-durata-pannello) var(--sm-curva-sposta), flex-basis var(--sm-durata-pannello) var(--sm-curva-sposta); view-transition-name: sm-menu; }
.sm-sidebar::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(240px circle at var(--sm-mx, -400px) var(--sm-my, -400px), rgb(255 255 255 / .07), transparent 70%); }
@media (hover: hover) and (pointer: fine) { .sm-sidebar:hover::after { opacity: 1; } }
.sm-marchio { position: relative; }
.sm-marchio-img { clip-path: inset(0 0 0 0); transition: clip-path .24s var(--sm-curva-esce), opacity .2s ease; }
.sm-marchio-mono { position: absolute; left: -6px; top: -4px; width: 40px; height: 40px; border-radius: 10px; opacity: 0; transform: scale(.86); pointer-events: none;
  transition: opacity .18s ease, transform .26s var(--sm-curva-esce); }
.sm-sidebar-scorre { overflow-x: hidden; }
.sm-menu-titolo { white-space: nowrap; overflow: hidden; }
.sm-menu-etichetta { transition: opacity .14s ease, transform .22s var(--sm-curva-esce); }
.sm-menu-titolo .sm-freccia { transition: transform var(--sm-durata) var(--sm-curva), opacity .14s ease; }
.sm-sidebar-piede { white-space: nowrap; transition: opacity .14s ease; }
.sm-sidebar-leva { display: none; }
@media (min-width: 992px) {
  .sm-sidebar { clip-path: inset(0 -24px 0 0); }
  .sm-sidebar-leva { display: grid; place-items: center; position: absolute; right: -14px; top: 1.6875rem; z-index: 2; width: 28px; height: 28px; padding: 0; border-radius: 50%;
    border: 1px solid var(--sm-navy-100); background: #fff; color: var(--sm-primario); font-size: .75rem; box-shadow: var(--sm-ombra), var(--sm-luce);
    transition: transform var(--sm-durata-rapida) var(--sm-curva-esce), box-shadow var(--sm-durata) ease; }
  .sm-sidebar-leva::after { content: ""; position: absolute; inset: -8px; }
  .sm-sidebar-leva .bi { transition: transform var(--sm-durata-pannello) var(--sm-curva-sposta); }
  .sm-sidebar-leva:hover { box-shadow: var(--sm-ombra-alta), var(--sm-luce); }
  .sm-sidebar-leva:active { transform: scale(.9); }
  .sm-sidebar-leva:focus-visible { outline: 2px solid var(--sm-navy-300); outline-offset: 2px; }
  html.sm-menu-ridotto { --sm-sidebar: var(--sm-sidebar-stretta); }
  html.sm-menu-ridotto .sm-sidebar-leva .bi { transform: rotate(180deg); }
  html.sm-menu-ridotto .sm-marchio-img { clip-path: inset(0 100% 0 0); opacity: 0; }
  html.sm-menu-ridotto .sm-marchio-mono { opacity: 1; transform: none; transition-delay: .1s; }
  html.sm-menu-ridotto .sm-menu-etichetta, html.sm-menu-ridotto .sm-menu-titolo .sm-freccia, html.sm-menu-ridotto .sm-sidebar-piede { opacity: 0; transform: translateX(-6px); pointer-events: none; }
  html.sm-menu-ridotto .sm-menu-titolo { padding-left: 1rem; padding-right: 1rem; }
  html.sm-menu-ridotto .sm-menu-voci { display: none !important; }
  html.sm-menu-ridotto .sm-menu-gruppo:has(.sm-menu-voce.attiva) > .sm-menu-titolo { background: rgb(255 255 255 / .12); color: #fff; box-shadow: inset 3px 0 0 var(--sm-accento); }
}
html.sm-senza-transizioni .sm-sidebar, html.sm-senza-transizioni .sm-sidebar * { transition: none !important; }
.sm-menu-volante { position: fixed; z-index: 1040; min-width: 210px; max-width: 280px; padding: .375rem; border-radius: 14px; color: #fff; visibility: hidden; opacity: 0;
  transform: translateX(-4px) scale(.96); transform-origin: left 1.25rem; pointer-events: none; background: rgb(26 29 116 / .86);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgb(255 255 255 / .14);
  box-shadow: var(--sm-ombra-alta), inset 0 1px 0 rgb(255 255 255 / .12); transition: opacity .14s ease, transform .18s var(--sm-curva-esce), visibility 0s .18s; }
.sm-menu-volante.aperto { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.sm-menu-volante .titolo { display: block; padding: .375rem .625rem .25rem; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-navy-300); }
.sm-menu-volante a { display: block; padding: .4375rem .625rem; border-radius: 9px; color: var(--sm-navy-100); font-size: .875rem; text-decoration: none; }
.sm-menu-volante a:hover, .sm-menu-volante a:focus-visible, .sm-menu-volante a.attiva { background: rgb(255 255 255 / .1); color: #fff; }
.sm-menu-volante a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.sm-menu-volante.solo { min-width: 0; padding: .4375rem .75rem; font-size: .8125rem; font-weight: 500; white-space: nowrap; }

/* passaggio tra pagine (M2): menu, testata e barra dei portali restano fermi, la voce attiva scivola, il contenuto entra */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sm-vt-esce .12s ease-out both; }
::view-transition-new(root) { animation: sm-vt-entra .26s var(--sm-curva-esce) both; }
::view-transition-group(sm-menu-attiva) { animation-duration: var(--sm-durata-pannello); animation-timing-function: var(--sm-curva-sposta); }
::view-transition-old(sm-menu), ::view-transition-old(sm-testata), ::view-transition-old(sm-nav-basso) { display: none; }
::view-transition-new(sm-menu), ::view-transition-new(sm-testata), ::view-transition-new(sm-nav-basso) { animation: none; }
/* pillola dei lavori nella testata (UI.attendiLavoro): conta con un anello, finito dice «Fatto» e si richiude */
.sm-lavori { margin-left: auto; flex: none; height: 40px; display: inline-flex; align-items: center; gap: .5625rem; padding: 0 .875rem 0 .4375rem; overflow: hidden; white-space: nowrap;
  border: 1px solid rgb(255 255 255 / .85); border-radius: 999px; background: rgb(255 255 255 / .62); box-shadow: 0 2px 6px rgb(36 46 124 / .1); font-size: .8125rem; font-weight: 600; color: var(--sm-testo); }
.sm-lavori .testo { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.sm-lavori .n { color: var(--sm-testo-muto); font-variant-numeric: tabular-nums; }
.sm-lavori-anello { width: 26px; height: 26px; flex: none; transform: rotate(-90deg); fill: none; stroke-width: 3; }
.sm-lavori-anello circle { stroke: var(--sm-neutri-300); }
.sm-lavori-anello .arco { stroke: var(--sm-navy-700); stroke-linecap: round; transition: stroke-dasharray .3s var(--sm-curva-esce); }
.sm-lavori.pronta { padding-left: .75rem; background: var(--sm-verde-100); color: var(--sm-verde-700); }
.sm-lavori.pronta svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sm-lavori-pannello { position: absolute; right: 1rem; top: calc(100% + .5rem); z-index: 5; width: min(320px, calc(100vw - 2rem)); display: grid; gap: .5rem; padding: .75rem .875rem;
  border-radius: 16px; background: var(--sm-vetro-latte); border: 1px solid var(--sm-vetro-bordo); box-shadow: var(--sm-ombra-alta); font-size: .8125rem; }
.sm-lavori-pannello div { display: flex; justify-content: space-between; gap: .75rem; } .sm-lavori-pannello small { color: var(--sm-testo-muto); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .sm-lavori .testo { display: none; } }

/* tieni premuto (UI.tieniPremuto): per gli invii che non si annullano il pulsante si riempie di blu da sinistra mentre lo tieni */
.sm-tieni { position: relative; overflow: hidden; isolation: isolate; touch-action: none; user-select: none; -webkit-user-select: none; }
.sm-tieni-chiaro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; border-radius: inherit; pointer-events: none;
  background: linear-gradient(145deg, #2E3A96, #1D2468); color: #fff; clip-path: inset(0 calc((1 - var(--sm-p, 0)) * 100%) 0 0); }
.sm-tieni.premuto { box-shadow: var(--sm-giu-piccolo); }

/* «Nuovo» apre la finestra (UI.modale): la finestra nasce dal pulsante; la sua forma vola sopra tutto, la finestra di
   Bootstrap non fa la sua discesa */
.sm-finestra-forma { position: fixed; z-index: 1060; pointer-events: none; box-shadow: var(--sm-ombra-alta); }
.modal.sm-da-pulsante, .modal.sm-da-pulsante .modal-dialog { transition: none; }
.modal.sm-da-pulsante .modal-dialog { transform: none; }

/* la riga diventa la scheda: il nome della riga vola fino al titolo (elenco.js, _testa_movimento.html) */
.sm-cella-nome { display: inline-block; }
::view-transition-group(sm-titolo) { animation-duration: .38s; animation-timing-function: var(--sm-curva-sposta); }
@keyframes sm-vt-esce { to { opacity: 0; } }
@keyframes sm-vt-entra { from { opacity: 0; transform: translateY(8px); } }

/* l'ingresso dopo «Entra»: il registro si apre (tavola «Ingresso e indicatori liquidi», proposta D). Il lato blu dell'accesso
   è la copertina: gira sul bordo sinistro (al telefono sul bordo alto) e si scurisce; dal dorso si srotola il menu (o la
   testata del portale), le card salgono dal piano. La classe sm-ingresso la mette _testa_movimento.html, una volta sola,
   sulla pagina che arriva dal login; un clic o un tasto saltano tutto. */
.sm-accesso-lato { view-transition-name: sm-copertina; }
html.sm-ingresso::view-transition-group(sm-copertina) { z-index: 3; }
html.sm-ingresso::view-transition-old(sm-copertina) { animation: sm-copertina .78s cubic-bezier(.45, 0, .3, 1) both; transform-origin: left center; }
html.sm-ingresso::view-transition-old(root) { animation: sm-affonda .38s ease-in both; }
html.sm-ingresso::view-transition-new(root) { animation: sm-appare .34s .1s ease-out both; }
html.sm-ingresso::view-transition-new(sm-menu) { animation: sm-dorso .42s .56s var(--sm-curva-esce) both; transform-origin: left center; }
html.sm-ingresso::view-transition-new(sm-menu-attiva) { animation: sm-appare .3s .86s ease-out both; }
html.sm-ingresso::view-transition-new(sm-testata) { animation: sm-cala .34s .6s var(--sm-curva-esce) both; }
html.sm-ingresso::view-transition-new(sm-nav-basso) { animation: sm-sale-su .46s .5s var(--sm-curva-esce) both; }
html.sm-ingresso .sm-portale-testa { animation: sm-dorso-giu .42s .5s var(--sm-curva-esce) both; transform-origin: center top; }
html.sm-ingresso .sm-portale-testa > * { animation: sm-appare .3s .78s ease-out both; }
html.sm-ingresso .sm-lavagna { animation: sm-emerge .54s .3s var(--sm-curva-esce) both; }
html.sm-ingresso :is(.sm-contenuto, .sm-portale-corpo) .sm-card { animation: sm-emerge .54s .4s var(--sm-curva-esce) both; }
html.sm-ingresso :is(.sm-contenuto, .sm-portale-corpo) .sm-card:nth-child(2) { animation-delay: .47s; }
html.sm-ingresso :is(.sm-contenuto, .sm-portale-corpo) .sm-card:nth-child(3) { animation-delay: .54s; }
html.sm-ingresso :is(.sm-contenuto, .sm-portale-corpo) .sm-card:nth-child(4) { animation-delay: .61s; }
html.sm-ingresso :is(.sm-contenuto, .sm-portale-corpo) .sm-card:nth-child(n+5) { animation-delay: .7s; }
@keyframes sm-copertina { to { transform: perspective(2200px) rotateY(-90deg); filter: brightness(.55); } }
@keyframes sm-copertina-su { to { transform: perspective(2200px) rotateX(90deg); filter: brightness(.55); } }
@keyframes sm-dorso { from { transform: scaleX(.04); opacity: .5; } }
@keyframes sm-dorso-giu { from { transform: scaleY(.04); opacity: .5; } }
@keyframes sm-appare { from { opacity: 0; } }
@keyframes sm-affonda { to { opacity: 0; transform: scale(.985); } }
@keyframes sm-cala { from { opacity: 0; transform: translateY(-10px); } }
@keyframes sm-sale-su { from { transform: translateY(130%); } }
/* l'ombra cresce da zero: la card esce dalla superficie */
@keyframes sm-emerge { 0% { opacity: 0; box-shadow: none; transform: translateY(12px) scale(.985); } 35% { opacity: 1; } }
@media (max-width: 767.98px) {
  html.sm-ingresso::view-transition-old(sm-copertina) { animation-name: sm-copertina-su; transform-origin: center top; }
}

/* superfici blu col filo di luce (L2) */
.sm-portale-testa { background-image: linear-gradient(rgb(255 255 255 / .06), rgb(255 255 255 / 0) 55%); box-shadow: var(--sm-luce-blu), 0 14px 30px -18px rgb(36 46 124 / .7); }

/* linguette a pillola (UI.linguette, docs/design.md «Indicatori liquidi»): binario incassato, la linguetta scelta è un tasto in
   rilievo che scorre come una goccia; il pannello nuovo entra dal lato giusto */
.sm-tabs { position: relative; }
.sm-tabs--pillola { width: fit-content; max-width: 100%; gap: .125rem; padding: 5px; border-bottom: 0; border-radius: 16px; background-color: var(--sm-vassoio);
  background-image: var(--sm-grana-vassoio); box-shadow: var(--sm-giu-piccolo); }
.sm-tabs--pillola button { position: relative; z-index: 1; padding: .5rem .875rem; border-bottom: 0; border-radius: 12px; white-space: nowrap; transition: color var(--sm-durata) var(--sm-curva), background-color var(--sm-durata) var(--sm-curva); }
.sm-tabs--pillola button:hover { background: rgb(255 255 255 / .35); }
.sm-tabs--pillola button[aria-selected="true"], .sm-tabs--pillola button[aria-selected="true"]:hover { background: transparent; }
.sm-tabs-pillola { position: absolute; left: 0; top: calc(5px + var(--sm-stretto, 0px)); bottom: calc(5px + var(--sm-stretto, 0px)); z-index: 0; border-radius: 12px; pointer-events: none;
  background: var(--sm-primo-piano); box-shadow: var(--sm-su-piccolo); }
[role="tabpanel"].sm-entra-da-destra { --sm-dx: 28px; animation: sm-entra-x .26s var(--sm-curva-esce); }
[role="tabpanel"].sm-entra-da-sinistra { --sm-dx: -28px; animation: sm-entra-x .26s var(--sm-curva-esce); }
@keyframes sm-entra-x { from { opacity: 0; transform: translateX(var(--sm-dx)); } }

/* interruttori in rilievo col pomello a molla (S5, G4: deroga in docs/design.md) */
.form-switch .form-check-input, .form-switch .form-check-input:focus, .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23DCE1EC'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cy='.35' r='3' fill='%231A1D74' fill-opacity='.2'/%3E%3Ccircle r='3' fill='url(%23g)'/%3E%3C/svg%3E"); }
.form-switch .form-check-input { background-color: var(--sm-rilievo); border-color: transparent; box-shadow: inset 2px 2px 4px var(--sm-rilievo-ombra), inset -2px -2px 4px #fff;
  transition: background-position .42s var(--sm-molla), background-color var(--sm-durata) ease, box-shadow var(--sm-durata) ease; }
.form-switch .form-check-input:focus { box-shadow: inset 2px 2px 4px var(--sm-rilievo-ombra), inset -2px -2px 4px #fff, var(--sm-anello); }
.form-switch .form-check-input:checked { background-color: var(--sm-primario); box-shadow: inset 2px 2px 5px rgb(13 13 82 / .5), inset -1px -1px 2px rgb(255 255 255 / .12); }
.form-switch .form-check-input:checked:focus { box-shadow: inset 2px 2px 5px rgb(13 13 82 / .5), var(--sm-anello); }

/* selettori a pulsanti (viste del calendario e simili): scanalatura con il tasto scelto in rilievo (S5) */
.btn-group:has(> .btn-check) { padding: 4px; gap: 4px; border-radius: 14px; background: var(--sm-rilievo); box-shadow: inset 2px 2px 5px var(--sm-rilievo-ombra), inset -2px -2px 5px #fff; }
.btn-group:has(> .btn-check) > .btn { border: 0 !important; border-radius: 10px !important; margin: 0 !important; background: transparent; background-image: none; box-shadow: none;
  color: var(--sm-testo-muto); transition: box-shadow var(--sm-durata) var(--sm-curva-esce), color var(--sm-durata) ease, background-color var(--sm-durata) ease; }
.btn-group:has(> .btn-check) > .btn:hover { color: var(--sm-testo); background: rgb(255 255 255 / .4); }
.btn-group:has(> .btn-check) > .btn-check:checked + .btn { background: var(--sm-rilievo); color: var(--sm-primario); font-weight: 600; box-shadow: -1px -1px 3px rgb(255 255 255 / .5), 3px 3px 8px var(--sm-rilievo-ombra); }
.btn-group:has(> .btn-check) > .btn-check:focus-visible + .btn { outline: 2px solid var(--sm-navy-500); outline-offset: 2px; }

/* bordo luminoso su ciò che succede adesso (L3): lezione in corso, scheda in modifica */
.sm-in-corso { position: relative; }
.sm-in-corso::after, .sm-in-modifica form.sm-card::after { content: ""; position: absolute; inset: -1.5px; border-radius: calc(var(--sm-raggio-card) + 1.5px); padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--sm-angolo), transparent 0 52%, var(--sm-navy-400) 66%, var(--sm-azzurro-300) 76%, var(--sm-rosso-400) 86%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sm-giro 4s linear infinite; }
@keyframes sm-giro { to { --sm-angolo: 360deg; } }
.sm-vivo { display: inline-flex; align-items: center; gap: .4375rem; font-size: .75rem; font-weight: 600; color: var(--sm-successo-testo); }
.sm-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sm-verde-500); animation: sm-pulsa 1.8s var(--sm-curva-esce) infinite; }

/* oggi che manda due onde rosse (L4) e pallino delle lezioni online che pulsa piano */
.sm-prima-vista .sm-cal-mese .giorno.oggi .num, #vista .sm-oggi-acceso .num { animation: sm-bagliore 1.4s var(--sm-curva-esce) 2; }
@keyframes sm-bagliore { 0% { box-shadow: 0 0 0 0 rgb(205 23 25 / .5); } 70% { box-shadow: 0 0 0 10px rgb(205 23 25 / 0); } 100% { box-shadow: 0 0 0 0 rgb(205 23 25 / 0); } }
.sm-prossima .sm-stato--vivo::before, .sm-agenda .sm-stato--vivo::before, .sm-cal-mese .sm-stato--vivo::before { animation: sm-pulsa 2.2s var(--sm-curva-esce) infinite; }
@keyframes sm-pulsa { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

/* olografico per i traguardi (S7): esame con il risultato, nei portali; il riflesso segue il dito o il mouse */
.sm-olografico, a.sm-card.sm-olografico:hover { isolation: isolate; color: var(--sm-navy-950); transform: perspective(800px) rotateX(var(--sm-rx, 0deg)) rotateY(var(--sm-ry, 0deg)); }
.sm-olografico { overflow: hidden; background: linear-gradient(115deg, #FFD9EC, #CFEFFF 18%, #DCD1FF 36%, #FFF4C9 52%, #CFF7E0 68%, #FFD9EC 84%, #CFEFFF) var(--sm-px) var(--sm-py) / 320% 320%;
  transition: transform .25s var(--sm-curva-esce); animation: sm-olo-deriva 7s ease-in-out infinite alternate; box-shadow: var(--sm-ombra-alta), inset 0 0 0 1px rgb(255 255 255 / .6); }
.sm-olografico::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--sm-px) var(--sm-py), rgb(255 255 255 / .8), transparent 45%), repeating-linear-gradient(55deg, rgb(255 255 255 / .5) 0 1.5px, transparent 1.5px 5px); }
.sm-olografico.sm-olo-attivo { animation: none; }
@keyframes sm-olo-deriva { from { --sm-px: 15%; --sm-py: 30%; } to { --sm-px: 85%; --sm-py: 70%; } }

/* stati che cambiano: cifre che rotolano (C1), anello e barre alla prima apertura (C2), pratiche che si aprono (C4),
   calendario che scorre nel verso del periodo (C6), dati che arrivano (C7), righe tolte con «Annulla» (C3) */
.sm-rotola { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.sm-rotola > span { grid-area: 1 / 1; }
.sm-rotola--su .vecchio { animation: sm-esce-su .32s var(--sm-curva-esce) forwards; } .sm-rotola--su .nuovo { animation: sm-entra-su .32s var(--sm-curva-esce) both; }
.sm-rotola--giu .vecchio { animation: sm-esce-giu .32s var(--sm-curva-esce) forwards; } .sm-rotola--giu .nuovo { animation: sm-entra-giu .32s var(--sm-curva-esce) both; }
@keyframes sm-esce-su { to { transform: translateY(-100%); opacity: 0; } } @keyframes sm-entra-su { from { transform: translateY(100%); opacity: 0; } }
@keyframes sm-esce-giu { to { transform: translateY(100%); opacity: 0; } } @keyframes sm-entra-giu { from { transform: translateY(-100%); opacity: 0; } }
.sm-prima-vista .sm-anello .valore { animation: sm-anello-disegna .9s var(--sm-curva-esce) both; }
@keyframes sm-anello-disegna { from { stroke-dashoffset: var(--sm-giro); } }
.sm-prima-vista .sm-barra > span { transform-origin: left; animation: sm-barra-cresce .8s var(--sm-curva-esce) both; }
@keyframes sm-barra-cresce { from { transform: scaleX(0); } }
.sm-pratica { interpolate-size: allow-keywords; }
.sm-pratica::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--sm-durata-pannello) var(--sm-curva-esce), content-visibility var(--sm-durata-pannello) allow-discrete; }
.sm-pratica[open]::details-content { block-size: auto; }
#vista.sm-scorre-avanti > * { animation: sm-scorre-avanti .24s var(--sm-curva-esce); }
#vista.sm-scorre-indietro > * { animation: sm-scorre-indietro .24s var(--sm-curva-esce); }
@keyframes sm-scorre-avanti { from { opacity: 0; transform: translateX(24px); } }
@keyframes sm-scorre-indietro { from { opacity: 0; transform: translateX(-24px); } }
.sm-arriva { animation: sm-dissolve .24s ease both; }
@keyframes sm-dissolve { from { opacity: 0; } }
.sm-via { opacity: 0 !important; transition: opacity .18s ease !important; }

/* risposta ai gesti: «Salva» che diventa conferma (G2), errore che trema (G3) */
.btn.sm-salva-attesa, .btn.sm-salva-fatto { --bs-btn-disabled-opacity: 1; position: relative; }
.btn.sm-salva-attesa { color: transparent !important; }
.btn.sm-salva-attesa::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2.4px solid color-mix(in srgb, var(--bs-btn-color) 30%, transparent); border-top-color: var(--bs-btn-color); animation: sm-ruota .7s linear infinite; }
@keyframes sm-ruota { to { rotate: 360deg; } }
.btn.sm-salva-fatto { --bs-btn-disabled-bg: var(--sm-successo); --bs-btn-disabled-border-color: var(--sm-successo); --bs-btn-disabled-color: #fff; }
.btn.sm-salva-fatto svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.btn.sm-salva-fatto svg path { stroke-dasharray: 24; animation: sm-traccia .32s .05s var(--sm-curva-esce) both; }
@keyframes sm-traccia { from { stroke-dashoffset: 24; } }
.sm-trema { animation: sm-trema .38s cubic-bezier(.36, .07, .19, .97); }
@keyframes sm-trema { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45%, 55% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }

/* l'AI al lavoro (A2): la frase di stato luccica, i campi abbinati si accendono un momento */
.sm-luccica-testo { background: linear-gradient(100deg, var(--sm-navy-700) 40%, var(--sm-azzurro-400) 50%, var(--sm-navy-700) 60%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sm-luccica 1.6s linear infinite; }
.sm-appena-messo { animation: sm-lampo 1.2s var(--sm-curva-esce); }
@keyframes sm-lampo { from { background-color: var(--sm-navy-100); box-shadow: 0 0 0 4px var(--sm-navy-100); } }


/* momenti rari: la lavagna che si scrive (R1), l'iscrizione inviata (R2), il marchio dell'accesso che si scopre (R3) */
.sm-lavagna--scrive .sm-benvenuto-data { animation: sm-scritta .8s .05s steps(14, end) both; }
@keyframes sm-scritta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sm-lavagna--scrive h1 .w { display: inline-block; animation: sm-parola .6s var(--sm-curva-esce) both; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
@keyframes sm-parola { from { opacity: 0; transform: translateY(40%); filter: blur(6px); } }
.sm-lavagna--scrive .sm-lavagna-nome svg { animation: sm-scopre .5s .75s var(--sm-curva-esce) both; }
@keyframes sm-scopre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sm-lavagna--scrive .sm-benvenuto-sintesi { animation: sm-sale .5s .95s var(--sm-curva-esce) both; }
.sm-lavagna--scrive .sm-pagina-azioni { animation: sm-sale .5s 1.05s var(--sm-curva-esce) both; }
.sm-spunta-grande { width: 56px; height: 56px; flex: none; }
.sm-spunta-grande circle { fill: var(--sm-verde-100); stroke: var(--sm-verde-600); stroke-width: 3; stroke-dasharray: 170; }
.sm-spunta-grande path { fill: none; stroke: var(--sm-verde-700); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; }
.sm-prima-vista .sm-spunta-grande circle { animation: sm-cerchio .55s var(--sm-curva-esce) both; }
.sm-prima-vista .sm-spunta-grande path { animation: sm-spunta .4s .38s var(--sm-curva-esce) both; }
@keyframes sm-cerchio { from { stroke-dashoffset: 170; fill-opacity: 0; } }
@keyframes sm-spunta { from { stroke-dashoffset: 40; } }
.sm-coriandoli { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1060; }
.sm-accesso-marchio { animation: sm-scopre .7s .1s var(--sm-curva-esce) both; }

@media print, (prefers-contrast: more), (forced-colors: active) {
  html::after, .sm-accesso-form::after, .sm-pubblica::after, body.sm-portale::after, .sm-sidebar::after, .sm-shell::before { display: none; }
  .sm-contenuto::before, .sm-testata { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--sm-foglio) !important; }
}
/* ---- rilievo (novembre 2026, docs/design.md «Rilievo, vetro e movimento»): un'unica superficie in rilievo; le card
   sporgono, campi e cose scelte sono incassati, il vetro resta a ciò che galleggia ------------------------------------------ */
html::after { display: none; }                                  /* niente grana sulla pagina */
.sm-contenuto { max-width: var(--sm-pagina-max); margin-inline: auto; }       /* pagina centrata */

/* card e riquadri */
.sm-card { background: var(--sm-contenitore); box-shadow: var(--sm-su-contenitore); }
.sm-card-testa { background: linear-gradient(90deg, rgb(229 235 255 / .8) 0%, rgb(229 235 255 / 0) 80%); border-bottom: 1px solid rgb(193 200 216 / .8); box-shadow: 0 1px 0 #fff; }
@media (hover: hover) and (pointer: fine) {
  a.sm-card:hover { box-shadow: 12px 12px 26px var(--sm-rilievo-ombra), -1px -1px 3px rgb(255 255 255 / .5); }
  a.sm-kpi:hover, .sm-kpi--filtro:hover { box-shadow: 8px 8px 16px var(--sm-rilievo-ombra), -1px -1px 3px rgb(255 255 255 / .5); }
}
.sm-kpi { background: var(--sm-card-normale); border-radius: 22px; box-shadow: var(--sm-su-medio); }
.sm-kpi::before { display: none; }
.sm-kpi--filtro.attivo { background: var(--sm-superficie); border-color: transparent; box-shadow: var(--sm-giu); }
.sm-kpi--filtro.attivo .sm-kpi-etichetta { color: var(--sm-primario-testo); }
.sm-velatura { box-shadow: var(--sm-su); }

/* pulsanti: chiari convessi, primario blu convesso; premuti, scelti o accesi diventano incassati */
.btn-outline-secondary, .btn-light, .btn-outline-primary, .btn-outline-danger {
  --bs-btn-bg: var(--sm-superficie); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--sm-superficie); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--sm-superficie); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--sm-superficie); --bs-btn-disabled-border-color: transparent;
  --bs-btn-hover-color: var(--sm-primario); --bs-btn-active-color: var(--sm-primario);
  background-image: var(--sm-convesso); box-shadow: var(--sm-su-medio); }
.btn-outline-primary { --bs-btn-color: var(--sm-primario); }
.btn-outline-danger { --bs-btn-color: var(--sm-errore-testo); --bs-btn-hover-color: var(--sm-rosso-800); --bs-btn-active-color: var(--sm-rosso-800); }
.btn-sm.btn-outline-secondary, .btn-sm.btn-light, .btn-sm.btn-outline-primary, .btn-sm.btn-outline-danger { box-shadow: var(--sm-su-piccolo); }
.btn-outline-secondary:active:not(:disabled), .btn-light:active:not(:disabled), .btn-outline-primary:active:not(:disabled), .btn-outline-danger:active:not(:disabled),
.btn-outline-secondary.active, .btn-outline-primary.active, .btn-outline-secondary.show, .btn-light.show { background-image: none; box-shadow: var(--sm-giu-piccolo); }
.btn-primary, .btn-navy, .btn-danger { border-color: transparent; }
.btn-primary { background-image: linear-gradient(145deg, #2E3A96, #1D2468); }
.btn-navy { background-image: linear-gradient(145deg, #5468D2, #3D4FB8); }
.btn-danger { background-image: linear-gradient(145deg, #E0262A, #B10D12); }
.btn-primary, .btn-navy, .btn-danger, .btn-primary:hover, .btn-navy:hover {
  box-shadow: 5px 5px 12px var(--sm-rilievo-ombra), -1px -1px 3px rgb(255 255 255 / .5), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -2px 0 rgb(13 13 82 / .35); }
.btn-primary:hover { background-image: linear-gradient(145deg, #3542A6, #222A78); }
.btn-primary:active:not(:disabled), .btn-navy:active:not(:disabled), .btn-danger:active:not(:disabled) { box-shadow: inset 3px 3px 7px rgb(13 13 82 / .55), inset -2px -2px 5px rgb(255 255 255 / .12); }
.btn-sm.btn-primary, .btn-sm.btn-navy, .btn-sm.btn-danger { box-shadow: 3px 3px 7px var(--sm-rilievo-ombra), -1px -1px 3px rgb(255 255 255 / .5), inset 0 1px 0 rgb(255 255 255 / .2); }
.sm-lavagna .btn-primary { background-image: none; box-shadow: 3px 3px 8px rgb(0 0 30 / .5), inset 0 1px 0 #fff; }
.sm-lavagna .btn-outline-secondary { --bs-btn-bg: transparent; --bs-btn-hover-bg: rgb(245 243 236 / .08); background-image: none; box-shadow: inset 0 0 0 1.5px rgb(245 243 236 / .45); }
.modal .btn-outline-secondary, .modal .btn-light { box-shadow: var(--sm-su-piccolo); }
/* pulsante diviso («Nuovo corso ▾»): l'ombra in rilievo è del gruppo intero; i due pezzi tengono solo i riflessi interni
   (con l'ombra di ciascuno, la luce del secondo cadeva sul primo) e li separa un filo scuro */
.btn-group:has(> .dropdown-toggle-split) { border-radius: var(--sm-raggio); box-shadow: 5px 5px 12px var(--sm-rilievo-ombra), -1px -1px 3px rgb(255 255 255 / .5); }
.btn-group:has(> .dropdown-toggle-split) > .btn-primary:not(:active):not(:focus-visible) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -2px 0 rgb(13 13 82 / .35); }
.btn-group:has(> .dropdown-toggle-split) > .dropdown-toggle-split { border-left: 1px solid rgb(13 13 82 / .5); }

/* campi incassati; il bordo resta a 3,3:1 per chi non vede il rilievo */
.form-control, .form-select, .input-group-text { background-color: var(--sm-scavo); box-shadow: var(--sm-giu-scavo); }
.form-control:focus, .form-select:focus { background-color: #FFFFFF; box-shadow: var(--sm-giu-scavo), var(--sm-anello); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: #E9ECF2; }
.form-control.is-invalid, .form-select.is-invalid { box-shadow: var(--sm-giu-piccolo), 0 0 0 4px var(--sm-rosso-100); }
.form-check-input:not([role="switch"]) { background-color: var(--sm-superficie); box-shadow: var(--sm-giu-piccolo); }
.form-check-input:not([role="switch"]):checked { background-color: var(--sm-primario); box-shadow: inset 2px 2px 4px rgb(13 13 82 / .55); }
.form-check-input:not([role="switch"]):focus { box-shadow: var(--sm-giu-piccolo), var(--sm-anello); }

/* menu laterale: pannello blu in rilievo scuro che galleggia, con la polvere di gesso della lavagna */
.sm-sidebar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .12; background: url("../img/gesso.svg") 0 0 / 240px 240px; }
@media (min-width: 992px) {
  .sm-sidebar { margin: 16px 0 16px 16px; top: 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px); border-radius: 28px; clip-path: none;
    background: radial-gradient(120% 70% at 20% 0%, #2B3690 0%, var(--sm-navy-800) 55%, #1E2669 100%);
    box-shadow: 10px 10px 24px rgb(36 46 124 / .38), -1px -1px 3px rgb(255 255 255 / .5), inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .25); }
  html.sm-menu-ridotto .sm-marchio { width: 40px; margin-left: 18px; margin-right: 18px; }
  html.sm-menu-ridotto .sm-menu-gruppo:has(.sm-menu-voce.attiva) > .sm-menu-titolo { background: rgb(13 13 82 / .18); box-shadow: var(--sm-blu-giu), inset 3px 0 0 var(--sm-accento); }
}
.sm-marchio { height: 40px; display: flex; align-items: center; overflow: hidden;
  transition: width var(--sm-durata-pannello) var(--sm-curva-sposta), margin var(--sm-durata-pannello) var(--sm-curva-sposta); }
.sm-marchio-img { width: 184px; max-width: none; flex: none; }
.sm-marchio-mono { left: 0; top: 0; box-shadow: var(--sm-blu-su), 0 0 0 1px rgb(255 255 255 / .14); }
.sm-menu-titolo, .sm-menu-voce { color: #DFE6FF; font-weight: 450;
  transition: color .15s ease, background-color .15s ease, box-shadow .2s var(--sm-curva-esce), font-weight .25s var(--sm-curva-esce); }
.sm-menu-titolo:hover, .sm-menu-voce:hover { background: transparent; color: #fff; font-weight: 600; box-shadow: var(--sm-blu-su); }
.sm-menu-voce.attiva, .sm-menu-titolo.attiva { font-weight: 650; }
.sm-menu-pillola { background: rgb(13 13 82 / .2); box-shadow: var(--sm-blu-giu); }
.sm-menu-pillola::before { box-shadow: 0 0 8px rgb(205 23 25 / .6); }
.sm-menu-voci { border-left-color: rgb(255 255 255 / .12); }
/* quando i gruppi aperti non ci stanno, a destra delle voci c'è una barra sottile e chiara: si vede che sotto ce ne sono
   altre. Lo spazio della barra è sempre riservato, così aprire un gruppo non sposta le voci */
.sm-sidebar-scorre { scrollbar-width: thin; scrollbar-color: rgb(223 230 255 / .34) transparent; scrollbar-gutter: stable; padding-right: .25rem; }
.sm-sidebar-scorre::-webkit-scrollbar { display: block; width: 6px; }
.sm-sidebar-scorre::-webkit-scrollbar-thumb { background: rgb(223 230 255 / .34); border-radius: 3px; }
.sm-sidebar-scorre::-webkit-scrollbar-track { background: transparent; }
.sm-sidebar-scorre:hover { scrollbar-color: rgb(223 230 255 / .55) transparent; }
html.sm-menu-ridotto .sm-sidebar-scorre { scrollbar-gutter: auto; padding-right: .75rem; }
/* chi è entrato, in fondo al menu e fermo: avatar, nome e ruolo (apre profilo e lingua), accanto l'uscita a vista */
.sm-sidebar-utente { flex: none; display: flex; align-items: center; gap: .25rem; margin: 0 .75rem; padding: .75rem 0 1rem; border-top: 1px solid rgb(255 255 255 / .12); }
.sm-sidebar-utente .dropup { flex: 1 1 auto; min-width: 0; }
.sm-sidebar-utente .sm-utente { display: flex; width: 100%; margin: 0; padding: .375rem .5rem .375rem .375rem; border-radius: 14px; color: #DFE6FF;
  transition: box-shadow .2s var(--sm-curva-esce), color .15s ease; }
.sm-sidebar-utente .sm-utente:hover, .sm-sidebar-utente .sm-utente[aria-expanded="true"] { background: transparent; color: #fff; box-shadow: var(--sm-blu-su); }
.sm-sidebar-utente .sm-utente:focus-visible, .sm-sidebar-esci:focus-visible { outline: 2px solid var(--sm-navy-300); outline-offset: 1px; }
.sm-sidebar-utente .sm-avatar { width: 36px; height: 36px; background: rgb(255 255 255 / .1); color: #fff; box-shadow: var(--sm-blu-su), inset 0 1px 0 rgb(255 255 255 / .12); }
.sm-sidebar-utente .sm-utente-testo { display: grid; min-width: 0; line-height: 1.25; white-space: nowrap; transition: opacity .14s ease; }
.sm-sidebar-utente .sm-utente-nome, .sm-sidebar-utente .sm-utente-ruolo { overflow: hidden; text-overflow: ellipsis; }
.sm-sidebar-utente .sm-utente-nome { font-size: .8125rem; color: #fff; }
.sm-sidebar-utente .sm-utente-ruolo { color: var(--sm-navy-300); }
.sm-sidebar-esci { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; background: transparent;
  color: #DFE6FF; font-size: 1.0625rem; transition: box-shadow .2s var(--sm-curva-esce), color .15s ease, transform .15s var(--sm-curva-esce); }
.sm-sidebar-esci:hover { color: #fff; box-shadow: var(--sm-blu-su); }
.sm-sidebar-esci:active { box-shadow: var(--sm-blu-giu); transform: scale(.94); }
.sm-sidebar-utente .dropdown-menu { min-width: 13rem; }
@media (min-width: 992px) {
  /* menu ridotto: l'avatar sopra e l'uscita sotto, centrati nella colonna stretta */
  html.sm-menu-ridotto .sm-sidebar-utente { flex-direction: column; gap: .375rem; }
  html.sm-menu-ridotto .sm-sidebar-utente .dropup { flex: none; }
  html.sm-menu-ridotto .sm-sidebar-utente .sm-utente { padding: .25rem; gap: 0; }
  html.sm-menu-ridotto .sm-sidebar-utente .sm-utente-testo { opacity: 0; width: 0; overflow: hidden; }
}

/* «Trova una pagina» (feat-trova-pagina; tavola https://claude.ai/code/artifact/dab0f0c4-122e-4664-895f-ccdac2e651b4, proposta B
   «Dizionario», 13/11/2026; static/js/componenti/trova.js): il campo incassato nel blu sotto il marchio; i risultati in un foglio
   bianco accanto al menu, con la punta all'altezza del campo: vassoi blu chiari, una card bianca per pagina come una voce di
   dizionario (nome in Young Serif, dove sta, cosa ci si fa, SIN.), la parola trovata sottolineata in rosso */
.sm-trova-posto { flex: none; margin: 0 .75rem .5rem; }
.sm-trova-campo { position: relative; display: flex; align-items: center; gap: .5625rem; height: 40px; padding: 0 .5rem 0 .8125rem; border: 1px solid transparent;
  border-radius: var(--sm-raggio); color: #DFE6FF; background: rgb(13 13 82 / .24); box-shadow: var(--sm-blu-giu); transition: box-shadow var(--sm-durata) ease; }
.sm-trova-campo:focus-within { box-shadow: var(--sm-blu-giu), 0 0 0 2px var(--sm-navy-300); }
.sm-trova-campo > .bi { flex: none; font-size: .9375rem; }
.sm-trova-campo input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: .875rem; }
.sm-trova-campo input::placeholder { color: rgb(223 230 255 / .7); opacity: 1; }
.sm-trova-campo input::-webkit-search-cancel-button { display: none; }
.sm-trova-campo kbd { display: grid; place-items: center; flex: none; min-width: 22px; height: 22px; padding: 0 .25rem; border: 1px solid rgb(255 255 255 / .26); border-radius: 6px;
  background: transparent; color: var(--sm-navy-200); font: 600 .6875rem/1 var(--sm-font); box-shadow: none; }
@media (hover: none) { .sm-trova-campo kbd { display: none; } }
.sm-trova-lente { display: none; }
@media (min-width: 992px) {
  html.sm-menu-ridotto .sm-trova-posto { display: none; }
  html.sm-menu-ridotto .sm-trova-lente { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 auto .5rem; padding: 0; border: 0;
    border-radius: var(--sm-raggio); background: rgb(13 13 82 / .24); color: #DFE6FF; font-size: 1.0625rem; box-shadow: var(--sm-blu-giu); transition: box-shadow var(--sm-durata) ease, color .15s ease; }
  html.sm-menu-ridotto .sm-trova-lente:hover, html.sm-menu-ridotto .sm-trova-lente[aria-expanded="true"] { color: #fff; box-shadow: var(--sm-blu-giu), 0 0 0 2px var(--sm-navy-300); }
  html.sm-menu-ridotto .sm-trova-lente:focus-visible { outline: 2px solid var(--sm-navy-300); outline-offset: 2px; }
}
.sm-trova-foglio { position: fixed; z-index: 1035; top: 16px; left: calc(var(--sm-sidebar) + 30px); width: 440px; max-width: calc(100vw - var(--sm-sidebar) - 48px);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: var(--sm-raggio-card);
  background: var(--sm-foglio); color: var(--sm-testo); box-shadow: var(--sm-ombra-alta), var(--sm-contorno); }
.sm-trova-foglio::before { content: ""; position: absolute; left: -7px; top: var(--sm-trova-punta, 40px); width: 14px; height: 14px; margin-top: -7px; border-radius: 3px;
  background: var(--sm-foglio); transform: rotate(45deg); box-shadow: -1px 1px 0 rgb(36 46 124 / .08); }
.sm-trova-anima { animation: sm-trova-entra .18s var(--sm-curva-esce) both; }
@keyframes sm-trova-entra { from { opacity: 0; transform: translateX(-8px); } }
@keyframes sm-trova-dissolvi { from { opacity: 0; } }
html.sm-movimento-ridotto .sm-trova-anima { animation-name: sm-trova-dissolvi; }
@media (prefers-reduced-motion: reduce) { .sm-trova-anima { animation-name: sm-trova-dissolvi; } }
.sm-trova-testa { flex: none; display: none; align-items: center; gap: .625rem; padding: 1rem 1.125rem 0; }
.sm-trova-foglio.con-campo .sm-trova-testa { display: flex; }
.sm-trova-casa { flex: 1 1 auto; min-width: 0; }
.sm-trova-torna { display: none; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--sm-raggio); background: var(--sm-primo-piano);
  color: var(--sm-primario); font-size: 1.125rem; box-shadow: var(--sm-su-piccolo); }
/* il campo salito nel foglio chiaro (menu ridotto, telefono): come i campi della pagina */
.sm-trova-foglio .sm-trova-campo { color: var(--sm-navy-700); background: var(--sm-scavato); border-color: var(--sm-bordo-campo); box-shadow: var(--sm-giu-piccolo); }
.sm-trova-foglio .sm-trova-campo:focus-within { background: #fff; border-color: var(--sm-navy-700); box-shadow: var(--sm-anello); }
.sm-trova-foglio .sm-trova-campo input { color: var(--sm-testo); }
.sm-trova-foglio .sm-trova-campo input::placeholder { color: var(--sm-testo-muto); }
.sm-trova-foglio .sm-trova-campo kbd { border-color: var(--sm-navy-300); color: var(--sm-navy-700); }
.sm-trova-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .875rem; padding: 1.125rem;
  scrollbar-width: thin; scrollbar-color: var(--sm-navy-200) transparent; }
.sm-trova-sez { display: grid; gap: .375rem; }
.sm-trova-lab { display: flex; align-items: baseline; justify-content: space-between; gap: .625rem; margin: 0 .25rem; font: 600 .6875rem/1.2 var(--sm-font); letter-spacing: .09em;
  text-transform: uppercase; color: var(--sm-navy-700); }
.sm-trova-lab small { font-size: .75rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sm-testo-muto); }
.sm-trova-vassoio { display: grid; gap: .375rem; padding: .5rem; border-radius: 20px; background-color: var(--sm-vassoio); background-image: var(--sm-grana-vassoio); box-shadow: var(--sm-giu); }
.sm-trova-gr { margin: .5rem .375rem .125rem; font: 600 .65625rem/1.2 var(--sm-font); letter-spacing: .1em; text-transform: uppercase; color: var(--sm-neutri-700); }
.sm-trova-gr:first-child { margin-top: .125rem; }
.sm-trova-voce, .sm-trova-dato { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: .125rem .75rem; padding: .6875rem .875rem .75rem .75rem; border-radius: 16px;
  background: var(--sm-card-dati); color: var(--sm-testo); text-decoration: none; box-shadow: var(--sm-su-piccolo); transition: box-shadow var(--sm-durata-rapida) ease, background-color var(--sm-durata-rapida) ease; }
.sm-trova-voce:hover, .sm-trova-dato:hover { color: var(--sm-testo); text-decoration: none; }
.sm-trova-voce > .bi, .sm-trova-dato > .bi { grid-row: 1 / span 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sm-navy-50);
  color: var(--sm-navy-700); font-size: .9375rem; }
.sm-trova-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5625rem; min-width: 0; }
.sm-trova-nome { font: 400 1.125rem/1.25 var(--sm-font-titoli); font-synthesis: none; color: var(--sm-navy-900); }
.sm-trova-cat { font-size: .71875rem; color: var(--sm-navy-600); }
.sm-trova-dove { font-size: .75rem; color: var(--sm-testo-muto); }
.sm-trova-def { grid-column: 2; font-size: .8125rem; color: var(--sm-testo-2); }
.sm-trova-sin { grid-column: 2; font-size: .78125rem; color: var(--sm-neutri-700); }
.sm-trova-sin > span { margin-right: .125rem; font-size: .625rem; font-weight: 600; letter-spacing: .1em; color: var(--sm-navy-700); }
.sm-trova-foglio mark { padding: 0; background: none; color: var(--sm-navy-900); font-weight: 650; text-decoration: underline 2px var(--sm-accento); text-underline-offset: 3px;
  text-decoration-skip-ink: none; }
.sm-trova-nome mark { font-weight: 400; }
.sm-trova-foglio [data-i] kbd { grid-column: 3; grid-row: 1; align-self: center; display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 .3125rem;
  border: 1px solid var(--sm-navy-300); border-radius: 6px; background: transparent; color: var(--sm-navy-700); font: 600 .6875rem/1 var(--sm-font); box-shadow: none; opacity: 0; }
.sm-trova-foglio [data-i].attiva { background: var(--sm-navy-50); box-shadow: 0 0 0 1.5px var(--sm-navy-700), var(--sm-su-piccolo); }
.sm-trova-foglio [data-i].attiva kbd { opacity: 1; }
.sm-trova-voce.compatta { grid-template-columns: minmax(0, 1fr) auto; gap: .0625rem .75rem; padding: .5625rem .875rem; }
.sm-trova-voce.compatta .sm-trova-nome { font-size: .96875rem; }
.sm-trova-voce.compatta .sm-trova-def { grid-column: 1; overflow: hidden; font-size: .75rem; color: var(--sm-testo-muto); white-space: nowrap; text-overflow: ellipsis; }
.sm-trova-voce.compatta kbd { grid-column: 2; }
.sm-trova-dato { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; padding: .5rem .75rem; border-radius: 14px; }
.sm-trova-dato > .bi { grid-row: auto; }
.sm-trova-dato strong { display: block; font-size: .875rem; font-weight: 600; }
.sm-trova-dato small { display: block; overflow: hidden; color: var(--sm-testo-muto); font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.sm-trova-vuoto { margin: 0; padding: .875rem 1rem; font-size: .84375rem; color: var(--sm-testo-2); }
.sm-trova-rimando { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .625rem; width: 100%; padding: .625rem .875rem; border: 1px dashed var(--sm-navy-300);
  border-radius: 14px; background: transparent; color: var(--sm-navy-900); font-size: .8125rem; text-align: left; }
.sm-trova-rimando b { font-weight: 600; }
.sm-trova-foglio .sm-trova-rimando.attiva { border-color: transparent; }
.sm-trova-rimando kbd { grid-column: 3; }
@media (max-width: 991.98px) {
  /* al telefono il foglio prende lo schermo, con il campo in cima e «Torna al menu» */
  .sm-trova-foglio { inset: 0; z-index: 1045; width: auto; max-width: none; max-height: none; border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sm-trova-foglio::before { display: none; }
  .sm-trova-torna { display: grid; }
  .sm-trova-campo { height: 44px; }
  .sm-trova-campo input { font-size: 1rem; }
  .sm-trova-corpo { padding: 1rem; }
}
@media (forced-colors: active) { .sm-trova-foglio [data-i].attiva { outline: 2px solid Highlight; } }

/* testata: una barra in vetro arrotondata che galleggia sopra il contenuto */
.sm-corpo { --sm-quaderno-inizio: 0px; --sm-quaderno-origine: 2rem 1rem; }
/* allineata ai bordi del contenuto, anche quando la pagina è centrata (schermi più larghi di --sm-pagina-max) */
.sm-testata { margin: 16px max(2rem, calc((100% - var(--sm-pagina-max)) / 2 + 2rem)) 0; top: 16px; border-radius: 22px; padding: .625rem .875rem .625rem 1rem; border: 0;
  background: var(--sm-foglio); box-shadow: var(--sm-su-medio); }
.sm-pillola { background: var(--sm-primo-piano); border-color: transparent; box-shadow: var(--sm-su-piccolo); }
.sm-ricerca input { background: var(--sm-scavato); border-color: transparent; box-shadow: var(--sm-giu-piccolo); }
.sm-ricerca input:focus { background: #F1F4F9; box-shadow: var(--sm-giu-piccolo), var(--sm-anello); }
.sm-ricerca-risultati { background: rgb(255 255 255 / .74); -webkit-backdrop-filter: var(--sm-vetro-filtro); backdrop-filter: var(--sm-vetro-filtro); border-color: var(--sm-vetro-bordo); }
.sm-avatar { background: var(--sm-superficie); box-shadow: var(--sm-su-piccolo); }
.sm-in-modifica .sm-pagina-testa { top: 6rem; background: rgb(230 234 242 / .92); border-radius: 18px; border-bottom: 0; box-shadow: var(--sm-su-piccolo); }
@media (max-width: 991.98px) { .sm-testata { margin: 10px 10px 0; top: 10px; } }

/* home: la lavagna incassata in una cornice in rilievo, cruscotti coi grafici nei pozzi, pratiche e agenda */
.sm-benvenuto.sm-lavagna { margin: 12px 12px calc(1.75rem + 12px); border-radius: 20px;
  box-shadow: 0 0 0 12px var(--sm-superficie), 8px 8px 18px 12px var(--sm-rilievo-ombra), -8px -8px 18px 12px #fff,
    inset 6px 6px 16px rgb(0 0 30 / .55), inset -3px -3px 10px rgb(255 255 255 / .08); }
.sm-lavagna::before { opacity: .12; }
.sm-cruscotto-grafico { margin-top: .5rem; padding: .625rem .625rem .375rem; border-radius: 18px; box-shadow: var(--sm-giu); }
.sm-cruscotto-cifra .sm-cifra { font-size: 2.375rem; }
.sm-cifra small { font-size: .46em; color: var(--sm-testo-muto); margin-left: 2px; letter-spacing: 0; }
.sm-variazione { box-shadow: var(--sm-giu-piccolo); }
.sm-pratica + .sm-pratica { border-top: 0; margin-top: .625rem; }
.sm-pratica > summary { margin: 0; padding: .625rem .75rem .625rem .625rem; border-radius: 18px; background: var(--sm-card-interna); box-shadow: var(--sm-su-interna); }
.sm-pratica > summary:hover { background: var(--sm-card-interna); box-shadow: var(--sm-su-medio); }
.sm-pratica[open] > summary { background: transparent; box-shadow: var(--sm-giu-piccolo); }
.sm-pratica-numero { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; text-align: center; box-shadow: var(--sm-giu-piccolo); font-size: 1.5rem; }
.sm-pratica > summary { grid-template-columns: 52px minmax(0, 1fr) auto; }
.sm-pratica-corpo { padding-left: 4.5rem; }
.sm-agenda + .sm-agenda { border-top: 1px solid rgb(193 200 216 / .8); box-shadow: inset 0 1px 0 #fff; }
.sm-agenda-riga .ora { justify-self: start; padding: .25rem .5rem; border-radius: 10px; box-shadow: var(--sm-giu-piccolo); }
a.sm-agenda-riga:hover, a.sm-voce:hover, a.sm-riempimento:hover, a.sm-blocco-riga:hover { background: rgb(255 255 255 / .4); }
.sm-in-ordine { border-top: 1px solid rgb(193 200 216 / .8); }
.sm-conteggio, .sm-conteggio--rosso, .sm-conteggio--ambra { background: var(--sm-superficie); box-shadow: var(--sm-giu-piccolo); }
/* tipografia espressiva, con misura: quante cose, grande e contornato accanto al titolo */
.sm-zona-testa .sm-conto-grande { margin-left: auto; margin-right: .25rem; font: 400 2.875rem/.8 var(--sm-font-titoli); font-synthesis: none; font-variant-numeric: lining-nums;
  color: transparent; -webkit-text-stroke: 1.3px var(--sm-navy-300); }
/* z-index: i menu a tendina delle azioni (es. «Nuovo corso ▾») restano sopra le card che seguono la testata */
.sm-pagina-testa { position: relative; isolation: isolate; z-index: 5; }
.sm-pagina-testa h1:has(> .sm-numerone) { position: relative; width: fit-content; }
.sm-numerone { position: absolute; left: calc(100% + .75rem); top: -1.5rem; z-index: -1; pointer-events: none; user-select: none; font: 400 92px/1 var(--sm-font-titoli); font-synthesis: none;
  font-variant-numeric: lining-nums; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px rgb(36 46 124 / .2); }
.sm-numerone.cambia { animation: sm-numerone .45s var(--sm-curva-esce); }
@keyframes sm-numerone { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@media (max-width: 575.98px) { .sm-numerone { font-size: 72px; top: -.5rem; } }

/* tilt 3D, solo cruscotti (6°) e lavagna (1,3°): da fermi piatti e nitidi, prospettiva e profondità solo mentre si muovono */
.sm-tilt { transition: transform .45s var(--sm-curva-esce), box-shadow .3s var(--sm-curva-esce); }
.sm-tilt.sm-tilt-muove { transform: perspective(var(--sm-prospettiva, 1000px)) rotateX(var(--sm-rx, 0deg)) rotateY(var(--sm-ry, 0deg)); transform-style: preserve-3d;
  transition: transform .08s linear, box-shadow .3s var(--sm-curva-esce); }
.sm-cruscotto.sm-tilt-muove { box-shadow: 14px 16px 30px var(--sm-rilievo-ombra), -1px -1px 3px rgb(255 255 255 / .5); }
.sm-lavagna.sm-tilt { --sm-prospettiva: 1600px; }
.sm-cruscotto.sm-tilt::before, .sm-lavagna.sm-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .3s ease; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--sm-px, 50%) var(--sm-py, 50%), rgb(255 255 255 / .6), rgb(255 255 255 / 0) 55%); }
.sm-cruscotto.sm-tilt { position: relative; }
.sm-cruscotto.sm-tilt-muove::before, .sm-lavagna.sm-tilt-muove::after { opacity: 1; }
.sm-cruscotto .sm-cruscotto-cifra, .sm-cruscotto .sm-cruscotto-testa, .sm-cruscotto .sm-cruscotto-nota, .sm-cruscotto .sm-cruscotto-grafico { transition: transform .45s var(--sm-curva-esce); }
.sm-cruscotto.sm-tilt-muove .sm-cruscotto-cifra { transform: translateZ(16px); }
.sm-cruscotto.sm-tilt-muove .sm-cruscotto-testa, .sm-cruscotto.sm-tilt-muove .sm-cruscotto-nota, .sm-cruscotto.sm-tilt-muove .sm-cruscotto-grafico { transform: translateZ(8px); }

/* tabelle «Tasti» (docs/design.md; tavola https://claude.ai/code/artifact/ef376ec0-b7cc-4211-b91a-86f962ba728c, proposta B):
   niente linee, ogni riga è un tasto piatto con gli angoli tondi; al passaggio si incassa, scelta resta incassata e velata
   di blu. Stati e sigla della sede sono pastiglie in rilievo, le barre sono scavate */
.sm-tabella-box { padding: 0 .75rem; }
.sm-tabella { --sm-incavo: #B4BCCB; border-collapse: separate; border-spacing: 0 6px; margin-block: -6px 0; }
.sm-tabella thead th { background: transparent; border-bottom: 0; box-shadow: none; padding-top: .875rem; padding-bottom: .25rem; }
.sm-tabella thead th:first-child, .sm-tabella tbody td:first-child, .sm-tabella tbody th:first-child, .sm-tabella tfoot td:first-child { padding-left: .75rem; }
.sm-tabella thead th:last-child, .sm-tabella tbody td:last-child, .sm-tabella tfoot td:last-child { padding-right: .75rem; }
.sm-tabella tbody td, .sm-tabella tbody th { border-top: 0; background-color: var(--sm-card-interna); box-shadow: 0 1px 0 var(--sm-buio), inset 0 1px 0 var(--sm-chiaro);
  transition: background-color .16s var(--sm-curva); }
.sm-tabella tbody tr > :first-child { border-radius: 16px 0 0 16px; }
.sm-tabella tbody tr > :last-child { border-radius: 0 16px 16px 0; }
.sm-tabella tbody tr > :only-child { border-radius: 16px; }
.sm-tabella tbody tr, .sm-tabella tbody tr.cliccabile:hover, .sm-tabella tbody tr.selezionata, .sm-tabella tbody tr.riga-errore,
.sm-tabella tbody tr.sm-riga-conflitto { background: transparent; }
/* l'incasso è fatto di sfumature verticali (ombra sopra, luce sotto), così le celle si saldano senza giunture; le celle
   alle estremità aggiungono l'ombra a sinistra e la luce a destra */
.sm-tabella tbody tr:is(:hover, .selezionata) > :is(td, th) {
  background-image: linear-gradient(180deg, rgb(180 188 203 / .55), rgb(180 188 203 / 0) 7px, rgb(255 255 255 / 0) calc(100% - 6px), rgb(255 255 255 / .95)); }
.sm-tabella tbody tr:is(:hover, .selezionata) > :is(td, th):first-child {
  background-image: linear-gradient(90deg, rgb(180 188 203 / .5), rgb(180 188 203 / 0) 7px),
    linear-gradient(180deg, rgb(180 188 203 / .55), rgb(180 188 203 / 0) 7px, rgb(255 255 255 / 0) calc(100% - 6px), rgb(255 255 255 / .95)); }
.sm-tabella tbody tr:is(:hover, .selezionata) > :is(td, th):last-child {
  background-image: linear-gradient(270deg, rgb(255 255 255 / .95), rgb(255 255 255 / 0) 6px),
    linear-gradient(180deg, rgb(180 188 203 / .55), rgb(180 188 203 / 0) 7px, rgb(255 255 255 / 0) calc(100% - 6px), rgb(255 255 255 / .95)); }
.sm-tabella tbody tr:is(:hover, .selezionata) > :is(td, th):only-child {
  background-image: linear-gradient(90deg, rgb(180 188 203 / .5), rgb(180 188 203 / 0) 7px), linear-gradient(270deg, rgb(255 255 255 / .95), rgb(255 255 255 / 0) 6px),
    linear-gradient(180deg, rgb(180 188 203 / .55), rgb(180 188 203 / 0) 7px, rgb(255 255 255 / 0) calc(100% - 6px), rgb(255 255 255 / .95)); }
.sm-tabella tbody tr.selezionata td:first-child { box-shadow: none; }
.sm-tabella tbody tr.selezionata > * { background-color: rgb(36 46 124 / .055); }
.sm-tabella tbody tr:is(.riga-errore, .sm-riga-conflitto) > * { background-color: #FCEAE7; }
.sm-tabella tbody tr:has(> td[colspan="99"]):hover > * { background-image: none; }      /* scheletri del caricamento */
/* pastiglie in rilievo: stato e sede sporgono dalla riga; nella riga scelta il rilievo si abbassa */
.sm-tabella .sm-stato { box-shadow: none; }
.sm-tabella tr.selezionata .sm-stato, .sm-tabella tr.selezionata .sm-sigla-sede { box-shadow: 2px 2px 4px var(--sm-rilievo-ombra), -1px -1px 3px rgb(255 255 255 / .5); }
.sm-stato--piatto, .sm-tabella .sm-stato--piatto, .sm-tabella tr.selezionata .sm-stato--piatto { padding-inline: 0; background: transparent; box-shadow: none; }
.sm-sigla-sede { display: inline-grid; place-items: center; min-width: 2.5rem; height: 1.625rem; padding: 0 .5rem; border-radius: 999px; background: var(--sm-superficie);
  box-shadow: var(--sm-su-piccolo); color: var(--sm-navy-700); font-size: .71875rem; font-weight: 700; letter-spacing: .04em; }
/* il nome e, sotto, la seconda riga che lo distingue */
.sm-cella-sotto { display: block; margin-top: .125rem; font-size: .75rem; font-weight: 400; color: var(--sm-testo-muto); white-space: nowrap; }
.sm-cella-sotto .sm-scade { font-size: inherit; }
/* ⋯ in fondo alla riga: le azioni su quella riga */
.sm-riga-azioni { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 10px; background: transparent;
  color: var(--sm-testo-muto); font-size: 1.125rem; transition: box-shadow .16s var(--sm-curva), color .16s var(--sm-curva); }
.sm-riga-azioni:hover, .sm-riga-azioni[aria-expanded="true"] { color: var(--sm-testo); box-shadow: var(--sm-su-piccolo); }
.sm-riga-azioni:active { box-shadow: var(--sm-giu-piccolo); }
.sm-riga-azioni:focus-visible { outline: 2px solid var(--sm-navy-600); outline-offset: 2px; }
.sm-cella-azioni .dropdown-item { text-decoration: none; }
/* importi: l'intero in evidenza, decimali ed euro piccoli; scadenza relativa */
.sm-importo { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sm-importo small { margin-left: 1px; font-size: .78em; color: inherit; opacity: .62; }
.sm-scade { font-size: .75rem; font-weight: 600; color: var(--sm-testo-muto); white-space: nowrap; }
.sm-scade--vicina { color: var(--sm-attesa-testo); }
.sm-scade--passata { color: var(--sm-errore-testo); }
/* riga dei totali: un tasto incassato in fondo, gli importi in grassetto */
.sm-tabella tfoot td { border-top: 0; padding-top: .875rem; padding-bottom: .875rem; }
.sm-tabella tfoot tr > :first-child { border-radius: 16px 0 0 16px; } .sm-tabella tfoot tr > :last-child { border-radius: 0 16px 16px 0; }
.sm-tabella tfoot td { background-image: linear-gradient(180deg, rgb(193 200 216 / .7), rgb(193 200 216 / 0) 6px, rgb(255 255 255 / 0) calc(100% - 5px), rgb(255 255 255 / .95)); }
.sm-tabella tfoot tr > :first-child { background-image: linear-gradient(90deg, rgb(193 200 216 / .65), rgb(193 200 216 / 0) 6px),
  linear-gradient(180deg, rgb(193 200 216 / .7), rgb(193 200 216 / 0) 6px, rgb(255 255 255 / 0) calc(100% - 5px), rgb(255 255 255 / .95)); }
.sm-tabella tfoot tr > :last-child { background-image: linear-gradient(270deg, rgb(255 255 255 / .95), rgb(255 255 255 / 0) 5px),
  linear-gradient(180deg, rgb(193 200 216 / .7), rgb(193 200 216 / 0) 6px, rgb(255 255 255 / 0) calc(100% - 5px), rgb(255 255 255 / .95)); }
.sm-tabella tfoot .sm-totale-etichetta { color: var(--sm-testo-muto); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* iscritti di un corso: barra scavata, numero accanto, nota della soglia sotto */
.sm-iscritti { display: flex; flex-direction: column; gap: .1875rem; min-width: 9.5rem; }
.sm-iscritti-riga { display: flex; align-items: center; gap: .625rem; }
.sm-iscritti-riga .sm-barra { flex: 1; }
.sm-iscritti-riga .sm-num { min-width: 3.25rem; text-align: right; white-space: nowrap; }
.sm-barra--sotto > span { background: linear-gradient(90deg, #D58F2E, var(--sm-ambra-500)); }
.sm-barra--piena > span { background: linear-gradient(90deg, var(--sm-rosso-500), var(--sm-rosso-600)); }
.sm-soglia { font-size: .71875rem; font-weight: 600; color: var(--sm-attesa-testo); }
.sm-soglia--piena { color: var(--sm-errore-testo); }
/* l'elenco senza linee: barra, selezione (incassata) e piede */
.sm-elenco-barra { border-bottom: 0; }
.sm-elenco-piede { border-top: 0; }
.sm-elenco-selezione { margin: 0 1.25rem .5rem; padding: .5rem 1rem; border: 0; border-radius: 16px; background: transparent; box-shadow: var(--sm-giu-piccolo); }

/* elenchi e tabelle: chip in rilievo, filtro acceso premuto; barre e calendario incassati */
.sm-chip { background: var(--sm-card-interna); box-shadow: var(--sm-su-piccolo); }
.sm-chip--rapido { background: var(--sm-card-interna); border-color: transparent; box-shadow: var(--sm-su-piccolo); }
.sm-chip--rapido.attivo { background: var(--sm-superficie); border-color: transparent; box-shadow: var(--sm-giu-piccolo); color: var(--sm-primario); }
.sm-chip--aggiungi { background: transparent; box-shadow: none; }
.sm-tabs:not(.sm-tabs--pillola) { border-bottom: 1px solid rgb(193 200 216 / .85); box-shadow: 0 1px 0 #fff; }
.sm-vuoto { border: 0; background: transparent; box-shadow: var(--sm-giu); }
.sm-vuoto .bi { background: var(--sm-superficie); box-shadow: var(--sm-su-piccolo); }
/* anteprima al passaggio (ui.js): card in vetro che nasce dal nome; il nome lo segnala con una sottolineatura a puntini */
@media (hover: hover) and (pointer: fine) {
  [data-anteprima] { text-decoration: underline dotted rgb(36 46 124 / .35); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
}
.sm-anteprima { position: fixed; z-index: 1070; width: 290px; display: grid; gap: .5rem; padding: .875rem 1rem; border-radius: 18px; font-size: .8125rem;
  background: var(--sm-vetro-latte); border: 1px solid var(--sm-vetro-bordo); box-shadow: var(--sm-ombra-alta);
  -webkit-backdrop-filter: var(--sm-vetro-filtro-latte); backdrop-filter: var(--sm-vetro-filtro-latte); }
.sm-anteprima .chi { display: flex; align-items: center; gap: .625rem; margin-bottom: .125rem; }
.sm-anteprima .av { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sm-primario); color: #fff;
  font-size: .8125rem; font-weight: 600; box-shadow: 3px 3px 8px rgb(36 46 124 / .35); }
.sm-anteprima .chi b { display: block; font-family: var(--sm-font-titoli); font-synthesis: none; font-weight: 400; font-size: 1.0625rem; line-height: 1.2; color: var(--sm-testo); }
.sm-anteprima .chi small { color: var(--sm-testo-muto); font-size: .75rem; }
.sm-anteprima .riga { display: flex; justify-content: space-between; gap: .75rem; }
.sm-anteprima .riga span { color: var(--sm-testo-muto); flex: none; }
.sm-anteprima .riga b { font-weight: 600; text-align: right; } .sm-anteprima .riga b small { display: block; font-weight: 500; font-size: .6875rem; }
.sm-anteprima .barra { height: 6px; margin-top: -.125rem; overflow: hidden; border-radius: 9px; box-shadow: var(--sm-giu-piccolo); }
.sm-anteprima .barra i { display: block; height: 100%; border-radius: 9px; background: var(--sm-avanzamento); }
.sm-anteprima .apri { justify-self: start; margin-top: .125rem; font-weight: 600; color: var(--sm-primario-testo); text-decoration: none; }
html.sm-leggero .sm-anteprima { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* il mese dello studente (componenti/mese.js): mesi con la goccia, giorni con gli eventi colorati per tipo */
.sm-mese { display: grid; gap: .75rem; }
.sm-mese-filtri { display: flex; flex-wrap: wrap; gap: .375rem; }
.sm-mese .sm-mese-mesi { margin-bottom: 0; }
.sm-mese-giorni { display: grid; padding: .25rem 0; border-radius: 22px; box-shadow: var(--sm-su); overflow: hidden; }
.sm-mese-giorni > .sm-vuoto { margin: .75rem; }
.sm-mese-giorno { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-top: 1px solid rgb(193 200 216 / .55); }
.sm-mese-giorno:first-child { border-top: 0; }
.sm-mese-n { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--sm-testo-muto); }
.sm-mese-n b { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; font-family: var(--sm-font-titoli); font-synthesis: none;
  font-weight: 400; font-size: 1.1875rem; color: var(--sm-testo); font-variant-numeric: lining-nums; }
.sm-mese-giorno.oggi .sm-mese-n b { background: var(--sm-accento); color: #fff; box-shadow: 0 4px 10px rgb(205 23 25 / .35); }
.sm-mese-eventi { display: flex; flex-wrap: wrap; gap: .5rem; }
.sm-mese-niente { font-size: .8125rem; color: var(--sm-testo-muto); }
.sm-ev { display: inline-flex; align-items: center; gap: .5625rem; max-width: 100%; padding: .3125rem .8125rem .3125rem .3125rem; border-radius: 14px;
  background: var(--ev-fondo, var(--sm-neutri-100)); color: var(--ev-testo, var(--sm-neutri-700)); font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.sm-ev > .bi { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgb(255 255 255 / .82); font-size: .9375rem; }
.sm-ev > span { min-width: 0; } .sm-ev small { display: block; font-size: .75rem; font-weight: 500; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.sm-ev--aula { --ev-fondo: var(--sm-verde-100); --ev-testo: var(--sm-verde-700); } .sm-ev--online { --ev-fondo: var(--sm-azzurro-100); --ev-testo: var(--sm-azzurro-700); }
.sm-ev--assente, .sm-ev--rata_scaduta { --ev-fondo: var(--sm-rosso-100); --ev-testo: var(--sm-rosso-700); }
.sm-ev--compito, .sm-ev--rata { --ev-fondo: var(--sm-ambra-100); --ev-testo: var(--sm-ambra-700); } .sm-ev--voto { --ev-fondo: var(--sm-navy-100); --ev-testo: var(--sm-navy-800); }
.sm-ev--pagamento { --ev-fondo: var(--sm-petrolio-100); --ev-testo: var(--sm-petrolio-700); }
.sm-ev--esame { --ev-fondo: #fff; --ev-testo: var(--sm-rosso-700); box-shadow: inset 0 0 0 1.5px rgb(205 23 25 / .45); }
.sm-ev--lezione, .sm-ev--non_rilevata { --ev-fondo: transparent; box-shadow: inset 0 0 0 1.5px rgb(122 128 147 / .45); }
.sm-ev--non_rilevata { box-shadow: inset 0 0 0 1.5px var(--sm-ambra-500); }
.sm-ev--chiusura { --ev-fondo: var(--sm-neutri-200); --ev-testo: var(--sm-neutri-800); }
@media (max-width: 575.98px) { .sm-mese-giorno { grid-template-columns: 3.25rem minmax(0, 1fr); padding-inline: .75rem; } .sm-mese-n { flex-direction: column; gap: 0; } }

/* presenze a quadretti (UI.quadretti): ogni lezione un quadretto del quaderno, una riga per mese */
.sm-quadretti { display: grid; grid-template-columns: 2.25rem repeat(var(--colonne, 9), 18px); gap: 5px; width: fit-content; max-width: 100%; overflow-x: auto;
  padding: .75rem; border-radius: 16px; box-shadow: var(--sm-giu); background-color: var(--sm-superficie); background-size: 23px 23px; background-position: .75rem .75rem;
  background-image: linear-gradient(var(--sm-quaderno-linea) 1px, transparent 1px), linear-gradient(90deg, var(--sm-quaderno-linea) 1px, transparent 1px); }
.sm-quadretti-mese { align-self: center; font-size: .6875rem; font-weight: 600; color: var(--sm-testo-muto); }
.sm-q { display: inline-block; width: 18px; height: 18px; border-radius: 5px; }
.sm-q--aula { background: var(--sm-verde-500); } .sm-q--online { background: var(--sm-azzurro-500); } .sm-q--assente { background: var(--sm-errore); }
.sm-q--futura { box-shadow: inset 0 0 0 1.5px rgb(122 128 147 / .55); } .sm-q--non-rilevata { box-shadow: inset 0 0 0 1.5px var(--sm-ambra-500); }
.sm-q--prossima { box-shadow: inset 0 0 0 2px var(--sm-primario); }
.sm-quadretti .sm-q:not(.sm-q--vuota):hover { outline: 2px solid var(--sm-primario); outline-offset: 1px; }
.sm-quadretti.apre .sm-q:not(.sm-q--vuota) { animation: sm-q-entra .38s var(--sm-curva-esce) both; animation-delay: calc(var(--i) * 14ms); }
@keyframes sm-q-entra { from { opacity: 0; transform: scale(.3); } }
.sm-quadretti-legenda { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin-top: .5rem; font-size: .75rem; color: var(--sm-testo-muto); }
.sm-quadretti-legenda span { display: inline-flex; align-items: center; gap: .375rem; }
.sm-quadretti-legenda .sm-q { width: 11px; height: 11px; border-radius: 3px; }

/* stati vuoti a matita (UI.vuoto): un disegno sul quaderno che si traccia da solo la prima volta nella pagina */
.sm-vuoto--matita { background-color: var(--sm-superficie); background-image: linear-gradient(var(--sm-quaderno-linea) 1px, transparent 1px),
  linear-gradient(90deg, var(--sm-quaderno-linea) 1px, transparent 1px); background-size: 16px 16px; background-position: center; }
.sm-matita { width: 96px; height: 72px; margin-bottom: .25rem; fill: none; stroke: var(--sm-navy-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sm-matita .accento { stroke: var(--sm-accento); }
.sm-matita > * { stroke-dasharray: 1; }
.sm-matita.traccia > * { stroke-dashoffset: 1; animation: sm-gesso-traccia 1s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.15s + var(--i, 0) * 120ms); }
.sm-barra, .sm-riempimento .sm-barra, .sm-riempimento .sm-barra--quasi, .sm-riempimento .sm-barra--piena { height: 10px; padding: 2px; background: var(--sm-superficie); box-shadow: var(--sm-giu-piccolo); }
.sm-barra > span { box-shadow: 1px 1px 3px rgb(26 29 116 / .3); }
.sm-cal-mese { background: transparent; border: 0; border-radius: 18px; box-shadow: var(--sm-giu); }
.sm-cal-mese .testa { background: transparent; border-bottom-color: rgb(193 200 216 / .85); }
.sm-cal-mese .giorno { border-color: rgb(193 200 216 / .55); }
.sm-cal-mese .giorno.fuori { background: rgb(13 17 31 / .025); }
.alert-light { background: var(--sm-card-interna); border: 0; box-shadow: var(--sm-su-piccolo); }

/* i pulsanti del conto («Nuovo acquisto», «Registra incasso») stanno sempre su una riga: al telefono se la dividono a metà */
.sm-conto-azioni { display: flex; flex-wrap: nowrap; gap: .5rem; }
.sm-conto-azioni .btn { white-space: nowrap; }
/* nella scheda dello studente stanno in linea con i numeri, a destra, uno sopra l'altro e larghi uguali (niente riga tutta
   loro con il vuoto a sinistra); sotto i 768 px tornano una riga sopra i numeri */
.sm-conto-cima { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.sm-conto-cima > .sm-kpi-riga { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.sm-conto-cima > .sm-conto-azioni { flex-direction: column; }
.sm-conto-cima > .sm-conto-azioni .btn { justify-content: center; }
@media (max-width: 767.98px) {
  .sm-conto-cima { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .sm-conto-cima > .sm-conto-azioni { order: -1; flex-direction: row; justify-content: flex-end; }
}
@media (max-width: 575.98px) {
  .sm-conto-azioni { width: 100%; }
  .sm-conto-azioni .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .5rem; font-size: .8125rem; }
}
/* conto dello studente: elenco e scheda dell'acquisto (dec-acquisti-come-contenitori; tavola
   https://claude.ai/code/artifact/0a0ac561-8d43-4882-9d76-b66e2aac1396, proposta B): a sinistra gli acconti e gli acquisti
   come tasti piccoli (quello scelto è incassato), a destra la scheda in rilievo con i tre numeri in una fascia scavata, le
   rate su una linea con gli incassi appesi alla rata che hanno pagato, e le righe */
.sm-conto-due { display: grid; grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr); gap: 1rem; align-items: start; padding-top: .375rem; }
.sm-acq-elenco { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.sm-acq-gruppo { padding: .375rem .25rem 0; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-testo-muto); }
.sm-acq-voce { display: flex; flex-direction: column; gap: .375rem; width: 100%; padding: .6875rem .8125rem; border: 0; border-radius: 16px; text-align: left; font: inherit; color: inherit;
  background: var(--sm-in-rilievo); box-shadow: var(--sm-su-piccolo); cursor: pointer; transition: box-shadow .16s var(--sm-curva), background-color .16s var(--sm-curva); }
.sm-acq-voce:hover:not([aria-selected="true"]) { background-color: var(--sm-primo-piano); }
.sm-acq-voce[aria-selected="true"] { background: var(--sm-card-dati); box-shadow: var(--sm-su-piccolo), inset 0 0 0 2px var(--sm-primario); cursor: default; }
.sm-acq-voce:focus-visible { outline: 2px solid var(--sm-navy-600); outline-offset: 2px; }
.sm-acq-voce.spento { color: var(--sm-neutri-600); }
.sm-acq-voce-alto { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sm-acq-voce-alto strong { min-width: 0; font-weight: 600; font-size: .875rem; }
.sm-acq-voce-sotto { font-size: .75rem; color: var(--sm-testo-muto); }
.sm-acq-voce .sm-stato { flex: none; font-size: .6875rem; padding: .125rem .5rem; }
.sm-acq-voce .sm-barra { height: 6px; background: var(--sm-vassoio); }
.sm-acq-voce--attesa { background: linear-gradient(100deg, var(--sm-rosso-50), var(--sm-in-rilievo) 72%); box-shadow: none; outline: 2px dashed rgb(205 23 25 / .42); outline-offset: -2px; }
.sm-acq-voce--attesa:hover:not([aria-selected="true"]) { background: var(--sm-rosso-50); }
.sm-acq-voce--attesa[aria-selected="true"] { background: var(--sm-rosso-50); box-shadow: inset 0 0 0 2px var(--sm-errore); outline-color: transparent; }
.sm-acq-voce--attesa .sm-stato::before, .sm-acq-scheda--attesa .sm-stato::before { animation: sm-pulsa 2.2s var(--sm-curva-esce) infinite; }
.sm-acq-scheda { min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.125rem 1.25rem 1.25rem; border-radius: 20px; background: var(--sm-in-rilievo);
  box-shadow: var(--sm-su-medio); }
.sm-acq-scheda--attesa { background: linear-gradient(160deg, var(--sm-rosso-50), var(--sm-in-rilievo) 45%); }
.sm-acq-scheda.spento { color: var(--sm-neutri-600); }
.sm-acq-scheda-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; }
.sm-acq-scheda-titolo { flex: 1 1 auto; min-width: 0; }
.sm-acq-scheda-testa > .sm-acq-scheda-azioni { flex: none; flex-wrap: nowrap; }
@media (max-width: 575.98px) { .sm-acq-scheda-testa { flex-wrap: wrap; } }
.sm-acq-scheda-titolo h3 { margin: 0 0 .25rem; font-family: var(--sm-font-titoli); font-weight: 400; font-size: 1.375rem; color: var(--sm-primario); }
.sm-acq-scheda-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sm-acq-scheda-azioni .sm-riga-azioni { width: 2rem; height: 2rem; }
.sm-acq-conti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #DDE2EA; border-bottom: 1px solid #DDE2EA; }
.sm-acq-conto { display: flex; flex-direction: column; gap: .125rem; min-width: 0; padding: .5rem .875rem .5rem 0; }
.sm-acq-conto + .sm-acq-conto { border-left: 1px solid #DDE2EA; padding-left: .875rem; }
.sm-acq-cifra { font-family: var(--sm-font-titoli); font-synthesis: none; font-weight: 400; font-size: 1.375rem; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; color: var(--sm-testo); }
.sm-acq-conto--verde .sm-kpi-etichetta, .sm-acq-conto--verde .sm-acq-cifra { color: var(--sm-successo-testo); }
.sm-acq-conto--rosso .sm-kpi-etichetta, .sm-acq-conto--rosso .sm-acq-cifra { color: var(--sm-errore-testo); }
.sm-acq-colonne { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem 1.75rem; }
.sm-acq-blocco { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.sm-acq-blocco > h4 { margin: 0 0 .125rem; font-family: var(--sm-font-titoli); font-weight: 400; font-size: 1.0625rem; color: var(--sm-primario); }
.sm-acquisto-tag { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.sm-acquisto-tag .sm-tag { font-size: .6875rem; }
.sm-acquisto-avviso { font-size: .75rem; color: var(--sm-attesa-testo); }
/* le rate su una linea scavata, con il punto pieno quando sono pagate; gli incassi appesi sono pastiglie in primo piano */
.sm-linea-rate { position: relative; display: flex; flex-direction: column; gap: .75rem; padding-left: 1.375rem; }
.sm-linea-rate::before { content: ""; position: absolute; left: .4375rem; top: .5rem; bottom: .5rem; width: 3px; border-radius: 3px; background: var(--sm-vassoio); }
.sm-tappa { position: relative; display: flex; flex-direction: column; gap: .3125rem; }
.sm-tappa::before { content: ""; position: absolute; left: -1.3125rem; top: .3125rem; width: 13px; height: 13px; border-radius: 50%; background: var(--sm-primo-piano);
  border: 3px solid var(--sm-navy-300); box-shadow: var(--sm-su-piccolo); }
.sm-tappa--pagata::before { background: var(--sm-successo); border-color: var(--sm-successo); }
.sm-tappa--parziale::before { border-color: var(--sm-attesa); background: linear-gradient(90deg, var(--sm-attesa) 50%, var(--sm-primo-piano) 50%); }
.sm-tappa--scaduta::before { border-color: var(--sm-errore); }
.sm-tappa-testa { display: flex; justify-content: space-between; align-items: center; gap: .625rem; font-size: .84rem; }
.sm-tappa-cosa { min-width: 0; }
.sm-tappa-cosa strong { font-weight: 600; }
.sm-tappa--scaduta .sm-tappa-cosa > strong { color: var(--sm-errore-testo); }
.sm-tappa-fine { display: flex; align-items: center; gap: .25rem; flex: none; }
.sm-tappa-fine .sm-stato { font-size: .6875rem; padding: .125rem .5rem; }
.sm-tappa-fine .sm-riga-azioni { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
.sm-tappa-incasso { display: flex; justify-content: space-between; align-items: center; gap: .625rem; padding: .25rem .25rem .25rem .625rem; border-radius: 10px; font-size: .78rem;
  color: var(--sm-testo-2); background: var(--sm-primo-piano); box-shadow: var(--sm-su-piccolo); }
.sm-tappa-incasso--stornato { background: transparent; box-shadow: none; color: var(--sm-testo-muto); }
.sm-acq-altri, .sm-acq-stornati { display: flex; flex-direction: column; gap: .375rem; }
.sm-acq-stornati > .btn-link { align-self: flex-start; font-size: .78rem; }
/* le righe: un elenco semplice, il totale sotto un filo */
.sm-acq-riga { display: flex; justify-content: space-between; align-items: flex-start; gap: .625rem; padding: .1875rem 0; font-size: .84rem; }
.sm-acq-riga-testo { min-width: 0; }
.sm-acq-riga-testo .sm-cella-sotto { white-space: normal; }
.sm-acq-riga.spenta { color: var(--sm-neutri-600); }
.sm-acq-riga.sconto { color: var(--sm-successo-testo); padding-left: .875rem; }
.sm-acq-riga--totale { margin-top: .25rem; padding-top: .5rem; border-top: 1px solid #C9D0DC; box-shadow: inset 0 1px 0 var(--sm-chiaro); font-weight: 600; }
.sm-acq-comandi { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.sm-acq-comandi .btn-link { display: inline-flex; align-items: center; gap: .25rem; padding-left: 0; padding-right: 0; font-weight: 600; text-decoration: none; }
.sm-acq-descrizione { margin: 0; font-size: .95rem; color: var(--sm-testo-2); }
.sm-kpi-valore--testo { font-size: 1.375rem; padding-top: .25rem; }
@media (max-width: 1199.98px) {
  .sm-acq-colonne { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .sm-conto-due { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .sm-acq-conti { grid-template-columns: minmax(0, 1fr); }
  .sm-acq-conto + .sm-acq-conto { border-left: 0; border-top: 1px solid #C9D0DC; box-shadow: inset 0 1px 0 var(--sm-chiaro); }
  .sm-acq-scheda { padding: .875rem; }
}

/* carrello di «Nuovo acquisto» (blocco 3; tavola https://claude.ai/code/artifact/594f8c80-6e69-414e-aa21-b85011bf9d98,
   proposta A): ricerca scavata, righe come card più chiare che oltre la terza scorrono nella loro area (la finestra non
   cresce), schemi di rate come tasti (scelto = incassato e velato di blu), anteprima scavata, riquadro «Oggi incassa» */
.sm-carrello { display: flex; flex-direction: column; gap: .875rem; }
.sm-carrello-cerca { position: relative; }
.sm-carrello-cerca > .bi-search { position: absolute; left: .8125rem; top: 50%; transform: translateY(-50%); color: var(--sm-testo-muto); pointer-events: none; }
.sm-carrello-cerca .form-control { padding-left: 2.375rem; padding-right: 3rem; min-height: 2.75rem; }
.sm-carrello-codice { position: absolute; right: .375rem; top: 50%; transform: translateY(-50%); width: 2.125rem; height: 2.125rem; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: var(--sm-card-interna); color: var(--sm-primario); box-shadow: var(--sm-su-piccolo); }
.sm-carrello-codice:active { box-shadow: var(--sm-giu-piccolo); }
.sm-carrello-risultati { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: 14px; background: #F2F4F9; box-shadow: 0 16px 34px -12px rgb(26 29 116 / .35), var(--sm-su-piccolo); max-height: 18rem; overflow-y: auto; }
.sm-carrello-risultato { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .625rem; border: 0; border-radius: 10px; background: transparent;
  text-align: left; font-size: .875rem; color: var(--sm-testo); }
.sm-carrello-risultato:hover, .sm-carrello-risultato[aria-selected="true"] { box-shadow: var(--sm-giu-piccolo); }
.sm-carrello-risultato-nome { flex: 1; min-width: 0; }
.sm-carrello-rapidi { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.sm-carrello-rapidi:empty { display: none; }
.sm-carrello-rapido { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .6875rem; border: 0; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--sm-card-interna); color: var(--sm-testo-2); box-shadow: var(--sm-su-piccolo); }
.sm-carrello-rapido:active { box-shadow: var(--sm-giu-piccolo); }
.sm-carrello-scorre { max-height: 13.25rem; overflow-y: auto; padding: 4px 10px 8px 4px; margin: -4px -10px -8px -4px; scrollbar-width: thin; scrollbar-color: var(--sm-navy-300) transparent;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.sm-carrello-scorre.in-fondo, .sm-carrello-scorre.corta { -webkit-mask-image: none; mask-image: none; }
.sm-carrello-scorre::-webkit-scrollbar { width: 6px; }
.sm-carrello-scorre::-webkit-scrollbar-thumb { background: var(--sm-navy-300); border-radius: 999px; }
.sm-carrello-righe { display: flex; flex-direction: column; gap: 6px; }
.sm-carrello-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto 6.5rem 5.5rem 2rem; align-items: center; gap: .625rem; padding: .5rem .625rem;
  border-radius: 14px; background: var(--sm-card-interna); box-shadow: var(--sm-su-piccolo); }
.sm-carrello-riga.errore { box-shadow: var(--sm-su-piccolo), inset 0 0 0 2px var(--sm-errore); }
.sm-carrello-nome { min-width: 0; }
.sm-carrello-nome strong { display: block; font-weight: 600; font-size: .875rem; }
.sm-carrello-sotto { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .125rem; }
.sm-carrello-scarico { border: 0; padding: 0; background: none; font-size: .72rem; color: var(--sm-testo-muto); text-decoration: underline dotted; text-underline-offset: 3px; }
.sm-carrello-qta { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; box-shadow: var(--sm-giu-piccolo); }
.sm-carrello-qta button { width: 1.5rem; height: 1.5rem; border: 0; border-radius: 8px; background: transparent; color: var(--sm-primario); display: grid; place-items: center; }
.sm-carrello-qta button:hover { box-shadow: var(--sm-su-piccolo); }
.sm-carrello-qta .sm-num { min-width: 1.375rem; text-align: center; font-weight: 600; }
.sm-carrello-prezzo { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; padding: .3125rem .5rem; border-radius: 10px; box-shadow: var(--sm-giu-piccolo);
  font-size: .8125rem; color: var(--sm-testo-2); }
.sm-carrello-prezzo .bi { font-size: .6875rem; color: var(--sm-testo-muto); }
.sm-carrello-importo { text-align: right; font-weight: 600; }
.sm-carrello-vuoto { padding: 1.125rem; border-radius: 14px; background: var(--sm-scavo); box-shadow: var(--sm-giu-scavo); color: var(--sm-testo-muto); text-align: center; font-size: .875rem; }
.sm-carrello-totale { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: 0 .625rem; }
.sm-carrello-totale-valore { font-family: var(--sm-font-titoli); font-weight: 400; font-size: 1.5rem; color: var(--sm-primario); }
.sm-carrello-sezione { display: flex; flex-direction: column; gap: .5rem; }
.sm-carrello-schemi { display: flex; flex-direction: column; gap: .3125rem; }
.sm-carrello-schema { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; padding: .625rem .75rem; border: 0; border-radius: 14px; text-align: left;
  background: var(--sm-card-interna); box-shadow: var(--sm-su-piccolo); color: var(--sm-testo); }
.sm-carrello-schema strong { font-size: .84rem; font-weight: 600; }
.sm-carrello-schema span { font-size: .72rem; color: var(--sm-testo-muto); }
.sm-carrello-schema[aria-pressed="true"] { background: rgb(36 46 124 / .055); box-shadow: var(--sm-giu-piccolo); }
.sm-carrello-schema[aria-pressed="true"] strong { color: var(--sm-primario); }
.sm-carrello-anteprima { display: flex; flex-direction: column; gap: .25rem; padding: .625rem .75rem; border-radius: 14px; background: var(--sm-scavo); box-shadow: var(--sm-giu-scavo); }
.sm-carrello-voce { display: flex; justify-content: space-between; align-items: center; gap: .625rem; font-size: .8125rem; }
.sm-carrello-oggi { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; padding: .75rem .875rem; border-radius: 14px; background: var(--sm-card-interna);
  box-shadow: var(--sm-su-piccolo); }
.sm-carrello-oggi-campi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; flex: 1; }
.sm-carrello-oggi-importo { width: 8.5rem; }
.sm-carrello-metodi { display: flex; flex-wrap: wrap; gap: .3125rem; }
.sm-carrello-metodo { border: 0; border-radius: 999px; padding: .25rem .625rem; font-size: .74rem; font-weight: 600; background: var(--sm-card-interna); color: var(--sm-testo-2);
  box-shadow: var(--sm-su-piccolo); }
.sm-carrello-metodo[aria-pressed="true"] { background: rgb(36 46 124 / .055); color: var(--sm-primario); box-shadow: var(--sm-giu-piccolo); }

/* soldi da abbinare (dec-catalogo-controllato; tavola https://claude.ai/code/artifact/436787c9-caa6-494a-ab95-1746a02da4fb,
   variante B): l'acconto è la prima voce dell'elenco, tratteggiata in rosso con lo stato che pulsa; la finestra «Abbina» è il
   carrello con l'acconto in cima e le due strade; la quota d'esame chiede la sessione */
.sm-abbina-testa { display: flex; flex-direction: column; gap: .625rem; }
.sm-strade { display: inline-flex; flex-wrap: wrap; gap: .125rem; width: fit-content; max-width: 100%; padding: 4px; border-radius: 14px; background: var(--sm-scavato);
  box-shadow: var(--sm-giu-piccolo); }
.sm-strade button { border: 0; border-radius: 10px; padding: .4375rem .875rem; background: transparent; color: inherit; font: inherit; font-size: .8125rem;
  transition: background-color var(--sm-durata) var(--sm-curva), box-shadow var(--sm-durata) var(--sm-curva); }
.sm-strade button:hover { background: rgb(255 255 255 / .35); }
.sm-strade button[aria-pressed="true"] { background: var(--sm-primo-piano); box-shadow: var(--sm-su-piccolo); color: var(--sm-primario); font-weight: 600; }
.sm-carrello-totale { flex-wrap: wrap; }
.sm-carrello-acconto { flex-basis: 100%; display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; color: var(--sm-successo-testo); }
.sm-carrello-acconto.forte { padding-top: .375rem; border-top: 1px solid #C9D0DC; color: var(--sm-testo); font-weight: 600; font-size: .92rem; }
.sm-carrello-acconto.sm-muto { color: var(--sm-testo-muto); }
.sm-carrello-acconto.sm-testo-errore { color: var(--sm-errore-testo); }
.sm-carrello-esame { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .375rem; padding-top: .375rem; border-top: 1px solid rgb(185 193 209 / .55); }
.sm-carrello-esame .form-label { margin: 0; color: var(--sm-testo-muto); font-weight: 600; }
.sm-carrello-esame-nota { display: flex; gap: .375rem; align-items: flex-start; font-size: .75rem; color: var(--sm-info-testo); }
.sm-abbina-gruppi { display: flex; flex-direction: column; gap: .875rem; max-height: 22rem; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.sm-abbina-gruppo > h3 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; margin: 0 0 .25rem; font-family: var(--sm-font); font-size: .6875rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-testo-2); }
.sm-abbina-gruppo > h3 .sm-muto { letter-spacing: .02em; text-transform: none; font-weight: 400; }
.sm-abbina-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto 7rem; align-items: center; gap: .75rem; padding: .375rem 0; font-size: .84rem; }
.sm-abbina-riga + .sm-abbina-riga { border-top: 1px solid rgb(185 193 209 / .5); }
.sm-abbina-riga label { min-width: 0; }
/* carrello e «Abbina» a due colonne (tavola https://claude.ai/code/artifact/0a0ac561-8d43-4882-9d76-b66e2aac1396, proposta 1):
   a sinistra cosa compra (ricerca, frequenti, righe), a destra il conto sempre in vista in una vasca scavata (totale, acconto,
   come paga, oggi incassa); i quattro metodi di tutti i giorni come tasti, gli altri in una scelta */
@media (min-width: 992px) {
  .modal-dialog.sm-carrello-finestra { max-width: min(80rem, calc(100vw - 3rem)); }
  /* il carrello ha una misura fissa e grande (12/11): scegliere schemi, aggiungere righe o un pacchetto non la cambia;
     dentro scorrono le righe (a sinistra) e il conto (a destra) */
  .sm-carrello-finestra .modal-content:has(.modal-body > .sm-carrello) { height: min(100%, 60rem); }
  .sm-carrello-finestra .modal-body:has(> .sm-carrello) { display: flex; flex-direction: column; overflow: hidden; }
  .modal-body > .sm-carrello { flex: 1; min-height: 0; }
  .modal-body > .sm-carrello > .sm-carrello-colonne { flex: 1; min-height: 0; align-items: stretch; }
  .modal-body > .sm-carrello > .sm-carrello-colonne--tre { grid-template-rows: minmax(0, 1fr); }
  .modal-body > .sm-carrello .sm-carrello-centro > [data-righe] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .modal-body > .sm-carrello .sm-carrello-centro > [data-righe] > .sm-carrello-scorre { flex: 1; min-height: 0; max-height: none; }
  .modal-body > .sm-carrello .sm-carrello-conto { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}
.sm-carrello-colonne { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 1fr); gap: 1.25rem; align-items: start; }
.sm-carrello-sx { min-width: 0; display: flex; flex-direction: column; gap: .875rem; }
.sm-carrello-colonne .sm-carrello-scorre { max-height: 21rem; }
.sm-carrello-conto { min-width: 0; display: flex; flex-direction: column; gap: .875rem; padding: 1rem; border-radius: 18px; background-color: var(--sm-vassoio);
  background-image: var(--sm-grana-vassoio); box-shadow: var(--sm-giu); }
.sm-carrello-conto .sm-carrello-totale { padding: 0; }
.sm-carrello-conto .sm-carrello-schema { flex-direction: row; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .4375rem .75rem; border-radius: 11px; }
.sm-carrello-conto .sm-carrello-schema[aria-pressed="true"] { background: var(--sm-primo-piano); box-shadow: var(--sm-su-piccolo), inset 0 0 0 1.5px var(--sm-primario); }
.sm-carrello-conto .sm-carrello-schema:not([aria-pressed="true"]) { background: transparent; box-shadow: none; }
.sm-carrello-conto .sm-carrello-schemi { padding: 3px; border-radius: 13px; background: var(--sm-card-dati); box-shadow: var(--sm-su-piccolo); }
.sm-carrello-conto .sm-carrello-anteprima { background: var(--sm-card-dati); box-shadow: var(--sm-su-piccolo); }
.sm-carrello-conto .sm-carrello-oggi { flex-direction: column; align-items: stretch; padding: .75rem; background: var(--sm-card-dati); }
.sm-carrello-conto .sm-carrello-oggi-campi { flex-direction: column; align-items: stretch; }
.sm-carrello-conto .sm-carrello-metodi { flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sm-vassoio); box-shadow: var(--sm-giu-piccolo); }
.sm-carrello-conto .sm-carrello-metodo { flex: 1 1 auto; border-radius: 9px; padding: .3125rem .4375rem; background: transparent; box-shadow: none; }
.sm-carrello-conto .sm-carrello-metodo[aria-pressed="true"] { background: var(--sm-primo-piano); box-shadow: var(--sm-su-piccolo); }
.sm-carrello-altro-metodo { width: auto; flex: 0 1 6.5rem; min-width: 0; border: 0; border-radius: 9px; background-color: transparent; box-shadow: none; font-size: .74rem; font-weight: 600; }
.sm-carrello-altro-metodo.scelto { background-color: var(--sm-primo-piano); box-shadow: var(--sm-su-piccolo); color: var(--sm-primario); }
@media (max-width: 991.98px) {
  .sm-carrello-colonne { grid-template-columns: minmax(0, 1fr); }
  .sm-carrello-conto .sm-carrello-metodi { flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
  /* sul telefono: il nome sopra, quantità, prezzo e importo sotto */
  .sm-carrello-riga { grid-template-columns: auto minmax(0, 1fr) auto 2rem; grid-template-areas: "nome nome nome togli" "qta prezzo importo importo"; }
  .sm-carrello-nome { grid-area: nome; } .sm-carrello-qta { grid-area: qta; justify-self: start; }
  .sm-carrello-riga > .sm-carrello-prezzo, .sm-carrello-riga > .sm-carrello-prezzo-campo { grid-area: prezzo; justify-self: end; max-width: 6.5rem; }
  .sm-carrello-importo { grid-area: importo; } .sm-carrello-riga > .sm-riga-azioni { grid-area: togli; }
}
/* carrello a tre colonne (tavola https://claude.ai/code/artifact/0c5ed744-873d-4074-9dd6-54a1b3e25cc8, catalogo A): a sinistra il
   catalogo sempre in vista a gruppi con le intestazioni che restano in cima (scrivere filtra, il lettore di codici a barre
   aggiunge), al centro cosa compra, a destra il conto; la voce su cui sei ha il velo e il filo blu, quella già nel carrello la
   spunta verde */
.sm-carrello-colonne--tre { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(18rem, .95fr); grid-template-areas: "catalogo carrello conto"; }
.sm-carrello-colonne--tre > .sm-carrello-catalogo { grid-area: catalogo; }
.sm-carrello-colonne--tre > .sm-carrello-centro { grid-area: carrello; }
.sm-carrello-colonne--tre > .sm-carrello-conto { grid-area: conto; }
.sm-carrello-catalogo { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 16px; background: var(--sm-primo-piano);
  box-shadow: var(--sm-su-piccolo); overflow: hidden; }
.sm-carrello-catalogo > .sm-carrello-cerca { margin: .625rem .625rem .25rem; }
.sm-catalogo-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 0 .375rem .5rem; scrollbar-width: thin; scrollbar-color: var(--sm-navy-300) transparent; }
.sm-catalogo-gruppo { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .5rem .25rem;
  background: var(--sm-primo-piano); font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sm-testo-muto); }
.sm-catalogo-voce { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 1.75rem; align-items: center; gap: .5rem; width: 100%; padding: .4375rem .5rem;
  border: 0; border-radius: 10px; background: transparent; text-align: left; color: var(--sm-testo); font-size: .8125rem; }
.sm-catalogo-voce:hover { background: rgb(36 46 124 / .04); }
.sm-catalogo-voce.attiva { background: rgb(36 46 124 / .07); box-shadow: inset 3px 0 0 var(--sm-primario); }
.sm-catalogo-nome { min-width: 0; }
.sm-catalogo-nome strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-catalogo-nome small { display: block; font-size: .7rem; color: var(--sm-testo-muto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-catalogo-nome small.sm-catalogo-poco { color: var(--sm-attesa-testo); font-weight: 600; }
.sm-catalogo-prezzo { font-weight: 600; text-align: right; white-space: nowrap; }
.sm-catalogo-prezzo s { margin-right: .25rem; font-size: .7rem; font-weight: 400; color: var(--sm-testo-muto); }
.sm-catalogo-piu { width: 1.75rem; height: 1.75rem; border-radius: 9px; display: grid; place-items: center; background: var(--sm-primo-piano);
  box-shadow: var(--sm-su-piccolo); color: var(--sm-primario); }
.sm-catalogo-voce.dentro .sm-catalogo-piu { background: var(--sm-successo-sfondo); color: var(--sm-successo-testo); box-shadow: none; }
.sm-catalogo-vuoto { margin: .75rem .5rem; color: var(--sm-testo-muto); font-size: .8125rem; }
.sm-carrello-centro { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
/* il conto è più stretto: i metodi vanno a capo invece di uscire dal bordo */
.sm-carrello-colonne--tre .sm-carrello-conto .sm-carrello-metodi { flex-wrap: wrap; }
/* al centro le righe stanno su due piani: il nome sopra, quantità, prezzo e importo sotto */
.sm-carrello-colonne--tre .sm-carrello-riga { grid-template-columns: auto minmax(0, 1fr) auto 2rem; grid-template-areas: "nome nome nome togli" "qta prezzo importo importo"; }
.sm-carrello-colonne--tre .sm-carrello-riga > .sm-carrello-nome { grid-area: nome; }
.sm-carrello-colonne--tre .sm-carrello-riga > .sm-carrello-qta { grid-area: qta; justify-self: start; }
.sm-carrello-colonne--tre .sm-carrello-riga > :is(.sm-carrello-prezzo, .sm-carrello-prezzo-campo) { grid-area: prezzo; justify-self: end; max-width: 6.5rem; }
.sm-carrello-colonne--tre .sm-carrello-riga > .sm-carrello-importo { grid-area: importo; }
.sm-carrello-colonne--tre .sm-carrello-riga > .sm-riga-azioni { grid-area: togli; }
@media (max-width: 1199.98px) {
  .sm-carrello-colonne--tre { grid-template-columns: minmax(0, 1fr) minmax(17rem, .85fr); grid-template-areas: "catalogo conto" "carrello conto";
    grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); }
  .modal-body > .sm-carrello > .sm-carrello-colonne--tre { grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  .sm-carrello-colonne--tre, .modal-body > .sm-carrello > .sm-carrello-colonne--tre { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "catalogo" "carrello" "conto"; grid-template-rows: none; }
  .sm-catalogo-lista { max-height: 18rem; }
}
/* pacchetti (dec-pacchetti-di-articoli; tavola https://claude.ai/code/artifact/384abdb5-72b5-4d29-a5c6-5ecfb344f865: catalogo A,
   carrello B, conto A). Il pacchetto ha la pastiglia navy piena; le sue voci stanno sotto una graffa (carrello) o rientrate su un
   filo blu (conto); l'avviso «già comprato» è ambra sulla voce a cui si riferisce */
.sm-tag--pacchetto { background: var(--sm-primario); color: #fff; box-shadow: none; }
.modal-header .sm-modale-sotto { margin-left: auto; margin-right: 1rem; font-size: .8125rem; color: var(--sm-testo-muto); text-align: right; }
.sm-pacchetto-prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .625rem; }
.sm-pacchetto-prezzo .sm-cifra { font-size: 1.5rem; color: var(--sm-primario); }
.sm-pacchetto-voci { list-style: none; margin: 0 0 .625rem; padding: 0; display: flex; flex-direction: column; gap: .3125rem; font-size: .84rem; }
.sm-pacchetto-voci li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.sm-pacchetto-voce-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-pacchetto-testa, .sm-pacchetto-riga { display: grid; grid-template-columns: minmax(0, 1fr) 4.25rem 6.75rem 6rem 2rem; align-items: center; gap: .625rem; }
.sm-pacchetto-testa { padding: 0 .625rem .25rem; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-testo-muto); }
.sm-pacchetto-testa span:nth-child(n+2) { text-align: right; }
.sm-pacchetto-distinta { display: flex; flex-direction: column; gap: 6px; }
.sm-pacchetto-riga { padding: .5rem .625rem; border-radius: 14px; background: var(--sm-card-interna); box-shadow: var(--sm-su-piccolo); }
.sm-pacchetto-riga.is-invalid { box-shadow: var(--sm-su-piccolo), inset 0 0 0 2px var(--sm-errore); }
.sm-pacchetto-quota { text-align: right; font-weight: 600; color: var(--sm-primario); }
.sm-pacchetto-conto { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border-radius: 14px; background: var(--sm-card-dati); box-shadow: var(--sm-su-piccolo); }
.sm-pacchetto-conto-riga { display: flex; justify-content: space-between; gap: .75rem; font-size: .875rem; }
.sm-pacchetto-sconto { color: var(--sm-successo-testo); font-weight: 600; }
.sm-pacchetto-sconto.sm-testo-errore { color: var(--sm-errore-testo); }
.sm-pacchetto-prezzo-campo .form-control { font-family: var(--sm-font-titoli); font-size: 1.375rem; color: var(--sm-primario); }
.sm-carrello-pacchetto { border-radius: 14px; background: var(--sm-card-interna); box-shadow: var(--sm-su-piccolo); overflow: hidden; }
.sm-carrello-pacchetto.errore { box-shadow: var(--sm-su-piccolo), inset 0 0 0 2px var(--sm-errore); }
.sm-carrello-pacchetto > .sm-carrello-riga { border-radius: 0; box-shadow: none; background: linear-gradient(90deg, var(--sm-navy-50), transparent 70%);
  border-bottom: 1px solid rgb(185 193 209 / .5); }
.sm-carrello-qta--fissa { gap: .25rem; padding: .25rem .5rem; color: var(--sm-testo-muto); font-size: .8125rem; }
.sm-carrello-qta--fissa .bi { font-size: .6875rem; }
.sm-carrello-graffa { position: relative; display: flex; flex-direction: column; padding: .25rem .75rem .5rem 2rem; }
.sm-carrello-graffa::before { content: ""; position: absolute; left: .9375rem; top: .5rem; bottom: 1rem; width: .5rem; border: 2px solid var(--sm-navy-300); border-right: 0;
  border-radius: 8px 0 0 8px; }
.sm-carrello-voce-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .25rem .75rem; padding: .4375rem 0; font-size: .8125rem; }
.sm-carrello-voce-p + .sm-carrello-voce-p { border-top: 1px dashed rgb(185 193 209 / .75); }
.sm-carrello-voce-p.gia { margin: 0 -.5rem; padding-inline: .5rem; border-radius: 8px; background: linear-gradient(90deg, var(--sm-ambra-50), transparent 85%); }
.sm-carrello-voce-nome { min-width: 0; }
.sm-carrello-voce-valore { text-align: right; font-weight: 600; }
.sm-carrello-voce-listino { display: block; font-weight: 400; font-size: .6875rem; color: var(--sm-testo-muto); }
.sm-carrello-risultato-nome { overflow: hidden; }
.sm-carrello-risultato-nome .sm-cella-sotto { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-carrello-risultato > s, .sm-carrello-risultato > .sm-num { flex: none; }
.sm-carrello-voce-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; }
.sm-carrello-voce-extra .form-select { flex: 1 1 16rem; width: auto; min-width: 0; }
.sm-carrello-gia { flex-basis: 100%; display: flex; gap: .375rem; align-items: flex-start; padding: .375rem .5rem; border-radius: 10px; font-size: .75rem;
  color: var(--sm-attesa-testo); background: var(--sm-ambra-50); box-shadow: inset 0 0 0 1px rgb(179 113 0 / .25); }
.sm-carrello-gia strong { font-weight: 600; }
.sm-proposta-strade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.sm-proposta-strada { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .875rem; border: 0; border-radius: 16px; text-align: left; color: var(--sm-testo);
  background: var(--sm-card-dati); box-shadow: var(--sm-su-piccolo); }
.sm-proposta-strada[aria-checked="true"] { box-shadow: var(--sm-su-piccolo), inset 0 0 0 2px var(--sm-primario); }
.sm-proposta-strada-testa { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sm-proposta-strada .sm-cifra { font-size: 1.25rem; color: var(--sm-primario); }
.sm-proposta-voci { list-style: none; margin: .375rem 0 0; padding: 0 0 0 .875rem; border-left: 2px solid var(--sm-navy-300); display: flex; flex-direction: column; gap: .25rem;
  font-size: .8125rem; }
.sm-proposta-voci li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; }
.sm-proposta-voce-extra { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; }
.sm-proposta-voce-extra .form-select { flex: 1 1 14rem; width: auto; min-width: 0; }
@media (max-width: 575.98px) { .sm-proposta-strade { grid-template-columns: minmax(0, 1fr); } }
.sm-acq-pacchetto-testa { margin: .25rem -.5rem 0; padding: .375rem .5rem; border-radius: 10px; background: var(--sm-navy-50); color: var(--sm-primario); font-weight: 600; }
.sm-acq-pacchetto-testa .sm-cella-sotto { font-weight: 400; color: var(--sm-testo-muto); }
.sm-acq-riga.nel-pacchetto { position: relative; padding-left: 1rem; }
.sm-acq-riga.nel-pacchetto::before { content: ""; position: absolute; left: .25rem; top: 0; bottom: 0; border-left: 2px solid var(--sm-navy-300); }
.sm-acq-riga.nel-pacchetto.sconto { padding-left: 1.875rem; }
.sm-report-pacchetti { color: var(--sm-primario); }
@media (max-width: 575.98px) {
  .sm-pacchetto-testa { display: none; }
  .sm-pacchetto-riga { grid-template-columns: 4.25rem minmax(0, 1fr) auto 2rem; grid-template-areas: "nome nome nome togli" "qta listino quota quota"; }
  .sm-pacchetto-riga > .sm-carrello-nome { grid-area: nome; } .sm-pacchetto-riga > [data-qta] { grid-area: qta; }
  .sm-pacchetto-riga > .sm-carrello-prezzo, .sm-pacchetto-riga > [data-valore] { grid-area: listino; justify-self: end; max-width: 7rem; }
  .sm-pacchetto-riga > .sm-pacchetto-quota { grid-area: quota; } .sm-pacchetto-riga > :last-child { grid-area: togli; }
  .sm-carrello-graffa { padding-left: 1.75rem; }
}
@media (max-width: 767.98px) {
  /* sul telefono ogni riga è una card in rilievo; scelta, si incassa */
  .sm-tabella-carte { margin-top: 0; }
  .sm-tabella-carte tbody tr { position: relative; margin: 0 0 .875rem; border-top: 0; border-radius: 18px; background: var(--sm-card-interna); box-shadow: var(--sm-su-interna); }
  .sm-tabella-carte tbody tr.selezionata { box-shadow: var(--sm-giu-piccolo); background: rgb(36 46 124 / .04); }
  .sm-tabella-carte tbody tr > *, .sm-tabella-carte tbody tr:is(:hover, .selezionata) > :is(td, th) { border-top: 0; border-radius: 0; box-shadow: none !important; background: transparent !important; }
  .sm-tabella-carte tbody td.stretto { width: auto; }
  .sm-tabella-carte tbody td.sm-cella-azioni { position: absolute; top: .5rem; right: .5rem; width: auto; padding: 0 !important; }
  .sm-tabella-carte tbody td.sm-cella-azioni::before { content: none; }
  .sm-tabella-carte tbody tr:has(> .sm-cella-azioni) .sm-cella-titolo { padding-right: 2.25rem !important; }
  .sm-tabella-carte tfoot tr { display: block; padding: .75rem 1rem; border-radius: 18px; box-shadow: var(--sm-giu-piccolo); }
  .sm-tabella-carte tfoot td, .sm-tabella-carte tfoot tr > * { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0 !important; background: transparent !important; border-radius: 0; }
  .sm-tabella-carte tfoot td[data-etichetta]::before { content: attr(data-etichetta); font-weight: 600; color: var(--sm-testo-muto); font-size: .75rem; }
  .sm-tabella-carte tfoot td.sm-cella-vuota { display: none; }
}

/* avvisi in vetro chiaro */
.sm-toast { color: var(--sm-testo); background: rgb(255 255 255 / .68); border: 1px solid var(--sm-vetro-bordo); box-shadow: 0 18px 40px -14px rgb(26 29 116 / .4), inset 0 1px 0 #fff; }
.sm-toast > .bi { color: var(--sm-primario-testo); }
.sm-toast--successo { background: rgb(240 250 242 / .8); } .sm-toast--successo > .bi { color: var(--sm-successo); }
.sm-toast--errore { background: rgb(255 244 242 / .84); color: var(--sm-errore-testo); } .sm-toast--errore > .bi { color: var(--sm-errore); }
.sm-toast-azione { color: var(--sm-primario); } .sm-toast-azione:hover { background: rgb(36 46 124 / .08); }
.sm-toast-tempo { background: var(--sm-navy-400); }

/* accesso, portali e pagine pubbliche: stessa superficie; le testate blu hanno il gesso */
.sm-accesso-card { background: var(--sm-superficie); box-shadow: var(--sm-su); }
.sm-lingue { border: 0; background: transparent; box-shadow: var(--sm-giu-piccolo); }
.sm-profilo-scelta { border: 0; background: var(--sm-card-interna); box-shadow: var(--sm-su-piccolo); }
.sm-accesso-lato, .sm-portale-testa { position: relative; isolation: isolate; }
.sm-accesso-lato::before, .sm-portale-testa::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .12;
  background: url("../img/gesso.svg") 0 0 / 240px 240px; }
.sm-azione-fissa, .sm-iscrizione-azione { background: rgb(230 234 242 / .92); -webkit-backdrop-filter: var(--sm-vetro-filtro); backdrop-filter: var(--sm-vetro-filtro); border-top: 1px solid var(--sm-vetro-bordo); }
.sm-pubblica-testa { background: rgb(230 234 242 / .85); -webkit-backdrop-filter: var(--sm-vetro-filtro); backdrop-filter: var(--sm-vetro-filtro); border-bottom: 1px solid rgb(193 200 216 / .8); }

/* modalità leggera: il browser disegna senza scheda video (desktop remoto, PC vecchio, macchina virtuale; la classe la mette
   lo script in testa ai template): niente sfocature, grana e aurora, e le superfici in vetro diventano quasi piene */
html.sm-leggero { --sm-vetro: rgb(255 255 255 / .94); }
html.sm-leggero *, html.sm-leggero *::before, html.sm-leggero *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.sm-leggero::after, html.sm-leggero .sm-accesso-form::after, html.sm-leggero .sm-pubblica::after,
html.sm-leggero body.sm-portale::after, html.sm-leggero .sm-shell::before { display: none; }
html.sm-leggero .sm-contenuto::before { background: var(--sm-grana-foglio) 0 0 / 240px 240px, var(--sm-foglio); }
html.sm-leggero { --sm-card-dati: #FFFFFF; --sm-vassoio: #E7ECFC; }
html.sm-leggero .sm-testata { animation: none; background: var(--sm-grana-foglio) 0 0 / 240px 240px, var(--sm-foglio); }
html.sm-leggero .dropdown-menu, html.sm-leggero .sm-ricerca-risultati { background: #fff; }
html.sm-leggero .sm-nav-basso { background: rgb(255 255 255 / .96); }
html.sm-leggero .sm-toast { background: #fff; }
html.sm-leggero .sm-toast--errore { background: var(--sm-rosso-50); } html.sm-leggero .sm-toast--successo { background: var(--sm-verde-50); }

/* ---- foglio chiaro e vassoi (11/11/2026 il foglio unico, tavola https://claude.ai/code/artifact/302b9630-40f7-4fc1-a136-d31b806c91e7;
   12/11/2026 i vassoi, tavola https://claude.ai/code/artifact/28ab8461-e388-4f8a-b435-b25a2def4e4c, V1 senza puntini): la pagina del
   gestionale è un foglio chiaro sul quaderno, allineato alla testata; ogni sezione (.sm-card) è un vassoio grigio incassato con
   un filo di grana e i dati ci stanno sopra in card chiare (il corpo della sezione, le righe delle tabelle, i numeri, le voci).
   Il grigio è solo dei contenitori --------- */
.sm-contenuto { width: auto; max-width: none; margin: 16px max(2rem, calc((100% - var(--sm-pagina-max)) / 2 + 2rem)) 2rem;
  border-radius: 28px; background: var(--sm-foglio); box-shadow: var(--sm-su); }
.sm-contenuto { position: relative; isolation: isolate; background: transparent; }
.sm-contenuto::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--sm-grana-foglio) 0 0 / 240px 240px, var(--sm-vetro-foglio);
  -webkit-backdrop-filter: var(--sm-vetro-filtro-foglio); backdrop-filter: var(--sm-vetro-filtro-foglio); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8); }
.sm-testata { background: var(--sm-grana-foglio) 0 0 / 240px 240px, var(--sm-vetro-foglio); -webkit-backdrop-filter: var(--sm-vetro-filtro-foglio); backdrop-filter: var(--sm-vetro-filtro-foglio);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 0 0 1px rgb(255 255 255 / .55), 0 10px 30px -16px rgb(36 46 124 / .35); }
.sm-contenuto .sm-card { padding: .75rem; border-radius: 22px; background-color: var(--sm-vassoio); background-image: var(--sm-grana-vassoio); box-shadow: var(--sm-giu); }
.sm-contenuto a.sm-card:hover { box-shadow: var(--sm-giu); background-color: #DCE1E9; }
.sm-contenuto .sm-card > .sm-card-testa { padding: .25rem .5rem .625rem; background: none; border: 0; border-radius: 0; box-shadow: none; }
.sm-contenuto .sm-card .sm-card-testa { background: none; border-bottom: 0; box-shadow: none; }   /* anche i titoli dentro un modulo: niente fascia */
.sm-contenuto .sm-card > .sm-card-corpo { padding: 1rem 1.125rem; border-radius: 16px; background: var(--sm-card-dati); box-shadow: var(--sm-su-piccolo); }
/* dove il corpo ha già le sue card (le righe delle tabelle, gli elenchi, i numeri) resta trasparente: le card stanno sul vassoio */
.sm-contenuto .sm-card > .sm-card-corpo:has(> .sm-tabella-box, > .sm-kpi-riga), .sm-contenuto .sm-elenco > .sm-card-corpo { padding: .25rem .25rem 0; background: none; box-shadow: none; }
.sm-contenuto .sm-card > .sm-tabella-box, .sm-contenuto .sm-card .sm-elenco .sm-tabella-box { padding-left: 0; padding-right: 0; }
.sm-contenuto .sm-card .sm-card { padding: 0; background: var(--sm-card-dati); background-image: none; box-shadow: var(--sm-su-piccolo); }  /* dentro un vassoio una card è un dato */
.sm-contenuto .sm-card .sm-card > .sm-card-corpo { box-shadow: none; }
.sm-contenuto .sm-card + .sm-card { margin-top: 1rem; }
.sm-contenuto .row > [class*="col"] > .sm-card { margin-top: .5rem; }
/* i numeri: un vassoio con una card chiara per numero; quello scelto (filtro) ha il bordo blu */
.sm-contenuto .sm-kpi-riga { gap: .625rem; padding: .625rem; border-radius: 20px; background-color: var(--sm-vassoio); background-image: var(--sm-grana-vassoio); box-shadow: var(--sm-giu); }
.sm-contenuto .sm-kpi { background: var(--sm-card-dati); box-shadow: var(--sm-su-piccolo); border-radius: 14px; }
.sm-contenuto a.sm-kpi:hover, .sm-contenuto .sm-kpi--filtro:hover { background-color: var(--sm-primo-piano); box-shadow: var(--sm-su-piccolo); }
.sm-contenuto .sm-kpi--filtro.attivo { background: var(--sm-card-dati); box-shadow: var(--sm-su-piccolo), inset 0 0 0 2px var(--sm-primario); }
/* card dei dati vive (12/11/2026, tavola https://claude.ai/code/artifact/419cb879-3da6-40b7-b5be-2f8142e1df71, proposta B «Luce che
   segue», più delicata della tavola): il mouse rinforza il filo navy del bordo delle card vicine (un'ombra di rosso più in là,
   niente bianco sul bordo: lo interrompeva e la card sembrava piegarsi) e un punto di luce leggero dentro quella sotto il
   puntatore, sul velo navy al 2,5%. Da ferme sono come prima. La posizione la scrive ui.js (--sm-lx, --sm-ly)
   solo col mouse; il punto di luce è uno strato dello sfondo, così non copre il testo e non crea contesti di sovrapposizione */
:is(.sm-acq-voce, .sm-acq-scheda), .sm-contenuto .sm-card .sm-card:not(form, .sm-in-corso), .sm-contenuto .sm-card > .sm-card-corpo { position: relative; }
.sm-contenuto .sm-kpi::after, .sm-acq-voce::after, .sm-acq-scheda::after, .sm-contenuto .sm-card .sm-card:not(form, .sm-in-corso)::after, .sm-contenuto .sm-card > .sm-card-corpo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(220px circle at var(--sm-lx, -999px) var(--sm-ly, -999px), rgb(55 68 176 / .3), rgb(55 68 176 / .15) 45%, rgb(205 23 25 / .06) 62%, rgb(205 23 25 / 0) 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.sm-contenuto .sm-kpi:hover, .sm-acq-voce:not(.sm-acq-voce--attesa):hover, .sm-acq-scheda:not(.sm-acq-scheda--attesa):hover, .sm-contenuto .sm-card .sm-card:not(form):hover, .sm-contenuto .sm-card > .sm-card-corpo:hover {
  background-image: radial-gradient(150px circle at var(--sm-lx, -999px) var(--sm-ly, -999px), rgb(255 255 255 / .45), rgb(255 255 255 / .15) 35%, rgb(255 255 255 / 0) 65%),
    linear-gradient(rgb(55 68 176 / .025), rgb(55 68 176 / .025)); }
/* dove il corpo è trasparente (le card stanno sul vassoio) niente luce sul corpo: ce l'hanno le card dentro */
.sm-contenuto .sm-card > .sm-card-corpo:is(:has(> .sm-tabella-box, > .sm-kpi-riga), .sm-elenco > *)::after { display: none; }
.sm-contenuto .sm-card > .sm-card-corpo:is(:has(> .sm-tabella-box, > .sm-kpi-riga), .sm-elenco > *):hover { background-image: none; }
@media print, (prefers-contrast: more), (forced-colors: active) {
  .sm-contenuto .sm-kpi::after, .sm-acq-voce::after, .sm-acq-scheda::after, .sm-contenuto .sm-card .sm-card::after, .sm-contenuto .sm-card > .sm-card-corpo::after { display: none; }
}
@media (max-width: 991.98px) {
  .sm-contenuto { margin: 10px 10px 1.25rem; border-radius: 22px; }
  .sm-contenuto .sm-card { padding: .5rem; border-radius: 18px; }
  .sm-contenuto .sm-card > .sm-card-corpo { padding: .875rem; }
}
@media print { .sm-contenuto { margin: 0; background: none; box-shadow: none; } }
/* scheda in modifica: il form diventa un riquadro in rilievo, un tono più chiaro del foglio, con i suoi margini; l'anello
   luminoso segue lo stesso bordo e gira più lento. La barra con Annulla e Salva resta ferma in alto, opaca, staccata dai bordi */
.sm-contenuto .sm-in-modifica form.sm-card { padding: 1.5rem 1.75rem; border-radius: 22px; background: var(--sm-in-rilievo); box-shadow: var(--sm-su-piccolo); }
.sm-contenuto .sm-in-modifica form.sm-card::after { border-radius: calc(22px + 1.5px); animation-duration: 8s; }
.sm-contenuto .sm-in-modifica .sm-pagina-testa { margin: -.5rem -.75rem 1.5rem; padding: .75rem 1.25rem; border-radius: 20px; background: var(--sm-foglio);
  box-shadow: var(--sm-su-medio); }
@media (max-width: 575.98px) {
  .sm-contenuto .sm-in-modifica form.sm-card { padding: 1rem; border-radius: 18px; }
  .sm-contenuto .sm-in-modifica form.sm-card::after { border-radius: calc(18px + 1.5px); }
  .sm-contenuto .sm-in-modifica .sm-pagina-testa { margin: -.25rem -.25rem 1.25rem; padding: .625rem .875rem; }
}

/* ---- il pannello «Pagato» degli incassi ------------------------------------------------------------------------------------
   13/11/2026, tavola https://claude.ai/code/artifact/818dfb0e-f069-4192-a192-e0d5ef3eb51c, proposta D «Chiusura di cassa».
   Un vassoio blu con l'aurora British che deriva piano dietro le card di vetro: a sinistra il totale, chiuso dalla doppia riga
   delle chiusure di cassa con gli stornati esclusi; a destra i metodi nei quattro gruppi dove si controllano a fine giornata.
   Gruppi e metodi sono pulsanti che filtrano l'elenco: quello scelto si incassa col filo navy e il suo gruppo si accende.
   Le cifre stanno ferme; si muovono solo l'aurora (si ferma con il movimento ridotto) e la luce del mouse (ui.js). */
.sm-pagato { position: relative; isolation: isolate; overflow: hidden; container: pagato / inline-size; margin-bottom: 1.25rem; padding: .625rem; border-radius: 24px;
  background-color: var(--sm-vassoio); background-image: var(--sm-grana-vassoio); box-shadow: var(--sm-giu); }
.sm-pagato::before, .sm-pagato::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.sm-pagato::before { width: 62%; height: 260%; left: -10%; top: -80%; background: radial-gradient(closest-side, rgb(55 68 176 / .42), transparent);
  animation: sm-pagato-deriva 38s ease-in-out infinite alternate; }
.sm-pagato::after { width: 42%; height: 240%; right: 4%; top: -70%; background: radial-gradient(closest-side, rgb(205 23 25 / .2), transparent);
  animation: sm-pagato-deriva-2 46s ease-in-out infinite alternate; }
@keyframes sm-pagato-deriva { to { transform: translate(60%, 8%); } }
@keyframes sm-pagato-deriva-2 { to { transform: translate(-80%, -6%); } }
.sm-pagato-griglia { display: grid; grid-template-columns: minmax(15rem, .9fr) minmax(0, 3.6fr); gap: .625rem; }
.sm-pagato-vetro { --sm-pagato-ombra: 0 1px 2px rgb(36 46 124 / .08), 0 12px 24px -14px rgb(36 46 124 / .42), inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .7), var(--sm-contorno);
  position: relative; border-radius: 18px; background-color: rgb(255 255 255 / .66); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--sm-pagato-ombra); transition: box-shadow var(--sm-durata) var(--sm-curva); }
.sm-pagato button { margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.sm-pagato button:focus-visible { outline: 2px solid var(--sm-primario); outline-offset: 2px; }
.sm-pagato-cifra { font-family: var(--sm-font-titoli); font-synthesis: none; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; line-height: 1.12;
  white-space: nowrap; color: var(--sm-testo); }
.sm-pagato-cifra small { font-size: .52em; }
.sm-pagato-etichetta, .sm-pagato-dove { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--sm-testo-2); }
.sm-pagato-dove { font-weight: 700; color: var(--sm-navy-700); }
.sm-pagato-nota { font-size: .8125rem; color: var(--sm-testo-2); font-variant-numeric: tabular-nums; }
.sm-pagato-nota b { font-weight: 600; color: var(--sm-testo); }
.sm-pagato-come { font-size: .78rem; line-height: 1.3; color: var(--sm-testo-muto); }
/* il totale */
.sm-pagato-totale { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.125rem .875rem; }
.sm-pagato-totale .sm-pagato-cifra { font-size: 2.4rem; color: var(--sm-primario); }
.sm-pagato .sm-pagato-tutti { align-self: flex-start; padding: 0; font-size: .8rem; font-weight: 600; color: var(--sm-primario-testo); }
.sm-pagato-tutti[hidden] { display: none; }
.sm-pagato-chiusura { margin-top: auto; padding-top: .5rem; border-top: 3px double rgb(36 46 124 / .55); font-size: .8rem; color: var(--sm-testo-2); font-variant-numeric: tabular-nums; }
/* i gruppi: a sinistra dove si controlla e la somma, a destra i metodi con i puntini come una distinta */
.sm-pagato-gruppi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.sm-pagato-gruppo { display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.25fr); gap: .25rem; padding: .375rem; }
.sm-pagato-gruppo--solo { grid-template-columns: minmax(0, 1fr); }
.sm-pagato-gruppo.acceso { box-shadow: var(--sm-pagato-ombra), 0 0 0 1.5px var(--sm-primario); }
.sm-pagato .sm-pagato-testa { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; padding: .625rem .75rem .6875rem; border-radius: 13px;
  transition: background-color var(--sm-durata) var(--sm-curva), box-shadow var(--sm-durata) var(--sm-curva); }
.sm-pagato-gruppo--solo .sm-pagato-testa { justify-content: center; gap: .1875rem; }
.sm-pagato-testa .sm-pagato-cifra { font-size: 1.65rem; color: var(--sm-primario); }
.sm-pagato-righe { display: flex; flex-direction: column; justify-content: center; gap: .1875rem; min-width: 0; }
.sm-pagato .sm-pagato-riga { display: grid; grid-template-columns: auto minmax(.625rem, 1fr) auto; column-gap: .5rem; align-items: baseline; padding: .375rem .625rem; border-radius: 12px;
  transition: background-color var(--sm-durata) var(--sm-curva), box-shadow var(--sm-durata) var(--sm-curva); }
.sm-pagato-nome { font-size: .875rem; font-weight: 500; white-space: nowrap; }
.sm-pagato-punti { align-self: end; margin-bottom: .3rem; border-bottom: 1.5px dotted rgb(36 46 124 / .32); }
.sm-pagato-riga .sm-pagato-cifra { font-size: 1.25rem; }
.sm-pagato-riga .sm-pagato-nota { grid-column: 1 / -1; font-size: .78rem; color: var(--sm-testo-muto); }
.sm-pagato .sm-pagato-testa[aria-pressed="true"], .sm-pagato .sm-pagato-riga[aria-pressed="true"] { background-color: var(--sm-navy-50);
  box-shadow: inset 0 0 0 1.5px var(--sm-primario), inset 0 1px 3px rgb(36 46 124 / .16); }
.sm-pagato button:disabled { cursor: default; }
.sm-pagato button:disabled :is(.sm-pagato-cifra, .sm-pagato-nome) { color: var(--sm-testo-muto); }
@media (hover: hover) and (pointer: fine) {
  .sm-pagato :is(.sm-pagato-testa, .sm-pagato-riga):not([aria-pressed="true"]):not(:disabled):hover { background-color: rgb(255 255 255 / .8); }
  /* la luce che segue, come le card dei dati: filo navy sul bordo delle card vicine, punto di luce in quella sotto il mouse */
  .sm-pagato-vetro:hover { background-image: radial-gradient(150px circle at var(--sm-lx, -999px) var(--sm-ly, -999px), rgb(255 255 255 / .45), rgb(255 255 255 / .15) 35%, rgb(255 255 255 / 0) 65%),
    linear-gradient(rgb(55 68 176 / .025), rgb(55 68 176 / .025)); }
}
.sm-pagato-vetro::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(220px circle at var(--sm-lx, -999px) var(--sm-ly, -999px), rgb(55 68 176 / .3), rgb(55 68 176 / .15) 45%, rgb(205 23 25 / .06) 62%, rgb(205 23 25 / 0) 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
/* più stretto: il totale va sopra, i gruppi restano due per riga con i metodi sotto la somma; al telefono uno per riga */
@container pagato (max-width: 900px) {
  .sm-pagato-griglia { grid-template-columns: minmax(0, 1fr); }
  .sm-pagato-totale { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
  .sm-pagato-totale .sm-pagato-etichetta { flex-basis: 100%; }
  .sm-pagato-chiusura { flex-basis: 100%; }
  .sm-pagato-gruppo { grid-template-columns: minmax(0, 1fr); }
}
@container pagato (max-width: 560px) {
  .sm-pagato-totale .sm-pagato-cifra { font-size: 2rem; }
  .sm-pagato-gruppi { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .sm-pagato .sm-pagato-testa { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .125rem .625rem; padding: .5rem .625rem; }
  .sm-pagato-testa .sm-pagato-cifra { margin-left: auto; font-size: 1.35rem; }
  .sm-pagato-testa :is(.sm-pagato-come, .sm-pagato-nota) { flex-basis: 100%; }
  .sm-pagato-riga .sm-pagato-cifra { font-size: 1.125rem; }
}
@media (max-width: 575.98px) { .sm-pagato { padding: .5rem; border-radius: 20px; } }
/* senza scheda video, in stampa e con il contrasto alto: niente aurora né sfocatura, card piene */
html.sm-leggero .sm-pagato::before, html.sm-leggero .sm-pagato::after { display: none; }
html.sm-leggero .sm-pagato-vetro { background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media print, (prefers-contrast: more), (forced-colors: active) {
  .sm-pagato::before, .sm-pagato::after, .sm-pagato-vetro::after { display: none; }
  .sm-pagato-vetro { background-color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- movimento ridotto: gli stati finali compaiono subito (sistema o scelta nel profilo) -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html.sm-movimento-ridotto { scroll-behavior: auto; }
html.sm-movimento-ridotto *, html.sm-movimento-ridotto *::before, html.sm-movimento-ridotto *::after, html.sm-movimento-ridotto::after {
  animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html.sm-movimento-ridotto::view-transition-group(*), html.sm-movimento-ridotto::view-transition-old(*), html.sm-movimento-ridotto::view-transition-new(*) { animation: none !important; }