/*
Theme Name: Istituto Italo Calvino
Theme URI: https://calvino.edu.it/
Author: Istituto Italo Calvino
Description: Tema istituzionale per il sito dell'Istituto Italo Calvino — design pulito, accessibile, light/dark mode, role-based quick access.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calvino
Tags: education, accessibility-ready, custom-colors, custom-menu, dark-mode, responsive
*/

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
  --blue-50:  oklch(0.97 0.02 250);
  --blue-100: oklch(0.93 0.04 250);
  --blue-200: oklch(0.85 0.08 250);
  --blue-300: oklch(0.72 0.13 250);
  --blue-500: oklch(0.55 0.18 250);
  --blue-600: oklch(0.47 0.18 250);
  --blue-700: oklch(0.38 0.15 250);
  --blue-800: oklch(0.28 0.11 250);
  --blue-900: oklch(0.20 0.07 250);

  --amber-500: oklch(0.75 0.14 75);
  --amber-100: oklch(0.95 0.05 80);
  --rose-500:  oklch(0.62 0.17 20);
  --rose-100:  oklch(0.95 0.04 25);
  --green-500: oklch(0.62 0.13 150);
  --green-100: oklch(0.94 0.05 150);

  --n-0:   oklch(1.00 0 0);
  --n-50:  oklch(0.985 0.003 80);
  --n-100: oklch(0.965 0.005 80);
  --n-150: oklch(0.94 0.006 80);
  --n-200: oklch(0.90 0.008 80);
  --n-300: oklch(0.83 0.010 80);
  --n-400: oklch(0.68 0.012 80);
  --n-500: oklch(0.55 0.013 80);
  --n-600: oklch(0.44 0.012 80);
  --n-700: oklch(0.33 0.010 80);
  --n-800: oklch(0.22 0.008 80);
  --n-900: oklch(0.15 0.006 80);
  --n-950: oklch(0.09 0.005 80);

  --bg:        var(--n-50);
  --surface:   var(--n-0);
  --surface-2: var(--n-100);
  --surface-3: var(--n-150);
  --border:    var(--n-200);
  --border-strong: var(--n-300);
  --text:      var(--n-900);
  --text-muted: var(--n-600);
  --text-subtle: var(--n-500);
  --primary:   var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-bg: var(--blue-50);
  --on-primary: #fff;

  --font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Titoli e numeri display. Per cambiare il tono del sito si cambia
     solo questa riga — le alternative provate sono in fondo al commento.
     Alternative: 'Figtree' (più caldo) · 'Archivo' (più severo). */
  --font-display: 'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Resta ai testi lunghi: corpo articolo, citazioni. */
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.04), 0 1px 1px rgba(20, 30, 50, 0.03);
  --shadow-md: 0 4px 10px -2px rgba(20, 30, 50, 0.06), 0 2px 4px -1px rgba(20, 30, 50, 0.04);
  --shadow-lg: 0 12px 28px -8px rgba(20, 30, 50, 0.12), 0 4px 8px -2px rgba(20, 30, 50, 0.06);
}

[data-theme="dark"] {
  --bg:        var(--n-950);
  --surface:   oklch(0.14 0.008 250);
  --surface-2: oklch(0.18 0.010 250);
  --surface-3: oklch(0.22 0.012 250);
  --border:    oklch(0.25 0.012 250);
  --border-strong: oklch(0.32 0.015 250);
  --text:      oklch(0.97 0.005 80);
  --text-muted: oklch(0.72 0.010 80);
  --text-subtle: oklch(0.55 0.012 80);
  --primary:   oklch(0.72 0.15 250);
  --primary-hover: oklch(0.80 0.14 250);
  --primary-bg: oklch(0.22 0.06 250);
  --on-primary: oklch(0.12 0.02 250);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   2. Base
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  overflow-x: clip;
  touch-action: pan-y;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }

/* ============================================================
   3. Utility
   ============================================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   4. Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 7px 12px; font-size: 13px; }

/* ============================================================
   5. Cards & badges
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-hover {
  transition: border-color .15s, transform .15s, box-shadow .15s;
  cursor: pointer;
}
.card-hover:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.card-flush { padding: 0; overflow: hidden; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge-primary { background: var(--primary-bg); color: var(--primary); border-color: transparent; }
.badge-amber { background: var(--amber-100); color: oklch(0.45 0.12 75); border-color: transparent; }
.badge-rose { background: var(--rose-100); color: oklch(0.45 0.15 20); border-color: transparent; }
.badge-green { background: var(--green-100); color: oklch(0.40 0.10 150); border-color: transparent; }

[data-theme="dark"] .badge-amber { background: oklch(0.28 0.08 75); color: oklch(0.85 0.12 75); }
[data-theme="dark"] .badge-rose { background: oklch(0.28 0.10 20); color: oklch(0.85 0.12 20); }
[data-theme="dark"] .badge-green { background: oklch(0.25 0.06 150); color: oklch(0.80 0.11 150); }

/* ============================================================
   5b. Empty state
   Componente condiviso: 404, ricerca senza risultati, archivi vuoti.
   ============================================================ */
.empty-state {
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 0;
  text-align: center;
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--primary-bg);
  color: var(--primary);
}
.empty-state h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.empty-state p {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.empty-state-ctas { justify-content: center; margin-top: 28px; }
.empty-state-links {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.empty-state-links a { font-size: 14px; font-weight: 500; }

@media (max-width: 520px) {
  .empty-state-ctas { flex-direction: column; }
  .empty-state-ctas .btn { justify-content: center; }
}

/* ============================================================
   6. Section chrome
   ============================================================ */
.section { padding: 56px 0 8px; }
.section-tight { padding: 48px 0 8px; }
.section-head {
  display: flex;
  /* Centrato, non allineato alla prima riga di testo: dove c'è un
     sottotitolo, `baseline` incollava il link in cima al titolo invece di
     equilibrarlo sul blocco. */
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.section-head h2 { font-size: 20px; font-weight: 600; }
.section-head .link { font-size: 14px; color: var(--primary); font-weight: 500; }
.section-head .link .link-short { display: none; }
.section-head .subtitle { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

/* ============================================================
   7. Topbar / header
   ============================================================ */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px;
  flex-wrap: nowrap;
  position: relative;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--primary);
}
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.brand-name { font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--text); white-space: nowrap; }
.brand-name-short { display: none; }
.brand-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ---- Overlay di ricerca ----
      Si sovrappone alla riga della topbar, slide da sinistra,
      mentre brand, navigazione e azioni sfumano via.
   Sta fuori dalla media query: prima esisteva solo sotto gli 860px,
   e su desktop il bottone «cerca» aggiungeva la classe senza che
   comparisse nulla. */
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  inset: 0;
  padding: 12px 16px;
  background: var(--surface);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(.4,.2,.2,1), opacity 0.18s ease;
  z-index: 2;
}
.topbar-search-icon { color: var(--text-muted); flex-shrink: 0; }
.topbar-search input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
}
.topbar-search input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}
.topbar-search-close { flex-shrink: 0; }

/* Stato aperto: slide-in del form, fade-out degli altri */
.topbar.is-search-open .topbar-search {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.topbar.is-search-open .topbar-burger,
.topbar.is-search-open .brand,
.topbar.is-search-open .topbar-nav,
.topbar.is-search-open .topbar-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.topbar-nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-wrap: nowrap;
}
.topbar-nav a {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.topbar-nav a:hover { background: var(--surface-2); text-decoration: none; }
.topbar-nav a.active { background: var(--primary-bg); color: var(--primary); }

/* Theme toggle e divisore nel drawer (visibili solo su mobile, vedi media query) */
.topbar-nav-divider { display: none; }
.topbar-nav-theme   { display: none; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.icon-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn-mobile { display: none; }

/* ============================================================
   8. Alert ribbon
   ============================================================ */
.alert-bar {
  background: var(--amber-100);
  color: oklch(0.35 0.12 75);
  border-bottom: 1px solid oklch(0.85 0.08 75);
  font-size: 14px;
}
[data-theme="dark"] .alert-bar {
  background: oklch(0.25 0.06 75);
  color: oklch(0.88 0.10 75);
  border-color: oklch(0.35 0.08 75);
}
.alert-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Il messaggio è un blocco atomico: icona e testo insieme, mai spezzati.
   Su desktop l'svg sta inline con la prima parola grazie a vertical-align. */
.alert-bar-msg {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  min-width: 0;                  /* permette il wrap dello span dentro */
  flex: 1 1 auto;
}
.alert-bar-msg svg {
  flex-shrink: 0;
  align-self: center;
  opacity: .85;
}
.alert-bar-inner .link-arrow { font-weight: 500; color: inherit; flex-shrink: 0; }

/* Il link-arrow prende il margin-left:auto: il bottone chiudi resta
   attaccato in fondo grazie al gap del flex. */
.alert-bar-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.alert-bar-close:hover { opacity: 1; background: oklch(0 0 0 / .08); }
[data-theme="dark"] .alert-bar-close:hover { background: oklch(1 0 0 / .1); }
.alert-bar[hidden] { display: none; }

/* ============================================================
   9. Hero
   ============================================================ */
.hero {
  background: linear-gradient(180deg, var(--blue-50), var(--bg));
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .hero {
  background: linear-gradient(180deg, oklch(0.18 0.04 250), var(--bg));
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px 32px 56px;
  max-width: 1200px;
  margin: 0 auto;
}
.hero h1 {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-family: var(--font-display);
}
.hero-lead {
  font-size: 17px;
  color: var(--text-muted);
  margin-top: 16px;
  max-width: 500px;
  line-height: 1.55;
}
.hero-ctas { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.hero-role-block { margin-top: 36px; }
.hero-role-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.hero-visual { position: relative; }
.hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.hero-card {
  position: absolute;
  bottom: -16px;
  left: -16px;
  background: var(--surface);
  padding: 16px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  width: 220px;
}
.hero-card-eyebrow { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.hero-card-title { font-weight: 600; font-size: 15px; }
.hero-card-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.hero-card-link { font-size: 13px; font-weight: 500; margin-top: 8px; display: inline-block; }

/* ============================================================
   10. Role chips
   ============================================================ */
.role-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.role-chip:hover { border-color: var(--border-strong); }
.role-chip.active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

/* ============================================================
   11. Highlights
   ============================================================ */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px;
}
.highlight {
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top-width: 3px;
  border-top-style: solid;
  position: relative;
  overflow: hidden;
}
.highlight:hover { text-decoration: none; color: inherit; }
.highlight-blob {
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  opacity: 0.6;
}
.highlight-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.highlight-body { position: relative; z-index: 1; }
.highlight-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.highlight-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 6px 0 0;
  line-height: 1.25;
  color: var(--text);
}
.highlight-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.highlight-cta {
  font-size: 13px;
  font-weight: 600;
  margin-top: auto;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.highlight-blue { border-top-color: oklch(0.55 0.16 230); }
.highlight-blue .highlight-icon,
.highlight-blue .highlight-blob { background: oklch(0.96 0.02 230); color: oklch(0.45 0.15 230); }
/* Colori testo scuriti per raggiungere WCAG AA 4.5:1 su sfondo bianco.
   Prima erano oklch(0.55) → ~4.4:1 (fail). Ora oklch(0.45) → ~5.8:1. */
.highlight-blue .highlight-tag,
.highlight-blue .highlight-cta { color: oklch(0.45 0.15 230); }

.highlight-rose { border-top-color: oklch(0.55 0.15 30); }
.highlight-rose .highlight-icon,
.highlight-rose .highlight-blob { background: oklch(0.96 0.02 30); color: oklch(0.55 0.15 30); }
.highlight-rose .highlight-tag,
.highlight-rose .highlight-cta { color: oklch(0.45 0.15 30); }

.highlight-green { border-top-color: oklch(0.55 0.15 150); }
.highlight-green .highlight-icon,
.highlight-green .highlight-blob { background: oklch(0.96 0.03 150); color: oklch(0.55 0.15 150); }
.highlight-green .highlight-tag,
.highlight-green .highlight-cta { color: oklch(0.42 0.15 150); }

.highlight-violet { border-top-color: oklch(0.52 0.16 295); }
.highlight-violet .highlight-icon,
.highlight-violet .highlight-blob { background: oklch(0.96 0.03 295); color: oklch(0.52 0.16 295); }
.highlight-violet .highlight-tag,
.highlight-violet .highlight-cta { color: oklch(0.44 0.16 295); }

[data-theme="dark"] .highlight-blue .highlight-icon,
[data-theme="dark"] .highlight-blue .highlight-blob { background: oklch(0.22 0.06 230); }
[data-theme="dark"] .highlight-rose .highlight-icon,
[data-theme="dark"] .highlight-rose .highlight-blob { background: oklch(0.22 0.06 30); }
[data-theme="dark"] .highlight-violet .highlight-icon,
[data-theme="dark"] .highlight-violet .highlight-blob { background: oklch(0.22 0.06 295); }
[data-theme="dark"] .highlight-green .highlight-icon,
[data-theme="dark"] .highlight-green .highlight-blob { background: oklch(0.22 0.05 150); }

/* Contrasto highlight-tag/cta in DARK mode: le versioni light usano
   oklch(0.45) — scuro su chiaro. In dark quello stesso scuro cade a
   ~2.9:1 su fondo #07090c. Inverto la luminanza: 0.78-0.80 → almeno
   4.7:1 sul dark background (WCAG AA). */
[data-theme="dark"] .highlight-blue .highlight-tag,
[data-theme="dark"] .highlight-blue .highlight-cta { color: oklch(0.78 0.14 230); }
[data-theme="dark"] .highlight-rose .highlight-tag,
[data-theme="dark"] .highlight-rose .highlight-cta { color: oklch(0.76 0.14 30); }
[data-theme="dark"] .highlight-green .highlight-tag,
[data-theme="dark"] .highlight-green .highlight-cta { color: oklch(0.80 0.14 150); }
[data-theme="dark"] .highlight-violet .highlight-tag,
[data-theme="dark"] .highlight-violet .highlight-cta { color: oklch(0.78 0.14 295); }

/* .circ-tab.active in dark: --primary è chiaro (~oklch 0.72), il testo
   bianco cade a 2.48:1. Uso testo scuro sul primary chiaro → contrasto
   abbondante. Vale solo in dark, il light restava com'era. */
[data-theme="dark"] .circ-tab.active {
  color: #0b1220;
}
/* Bg OPACO (non rgba con alpha) così axe non deve fare compositing:
   #ffffff su #0b1220 → contrasto ~18:1, ampiamente > AAA. */
[data-theme="dark"] .circ-tab.active .count {
  background: #0b1220;
  color: #ffffff;
}

/* ============================================================
   12. Quick access tiles
   ============================================================ */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.quick-tile {
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.quick-tile:hover { text-decoration: none; color: inherit; }
.quick-tile-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--primary-bg);
  color: var(--primary);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.quick-tile-body { min-width: 0; flex: 1; }
.quick-tile-label { font-weight: 600; font-size: 15px; }
.quick-tile-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.quick-tile-arrow { color: var(--text-subtle); }

/* ============================================================
   13. News
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-card { padding: 0; overflow: hidden; text-decoration: none; color: inherit; }
.news-card:hover { text-decoration: none; color: inherit; }
.news-image {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
}
.news-body { padding: 18px; }
.news-meta { display: flex; gap: 8px; align-items: center; }
.news-date { font-size: 12px; color: var(--text-muted); }
.news-title {
  font-weight: 600;
  font-size: 17px;
  margin-top: 10px;
  line-height: 1.35;
  font-family: var(--font-display);
  color: var(--text);
}
.news-link { margin-top: 12px; font-size: 14px; color: var(--primary); font-weight: 500; }

/* ============================================================
   14. Circolari (full-width list with category labels)
   ============================================================ */
.circ-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.circ-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.circ-tab .count {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.circ-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.circ-tab.active .count {
  /* Sfondo scuro (rgba nero .35 su primary) → ratio ~5:1 con testo bianco.
     Prima era rgba(255,255,255,.2) su primary → axe leggeva 4.41:1 (fail AA). */
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.circ-list { padding: 0; overflow: hidden; }
.circ-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.circ-item:last-child { border-bottom: none; }
.circ-item:hover { background: var(--surface-2); text-decoration: none; color: inherit; }
.circ-item-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--text-muted);
}
.circ-item-body { min-width: 0; flex: 1; }
.circ-item-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.circ-item-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.circ-item-sep { font-size: 12px; color: var(--text-subtle); }
.circ-item-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.circ-new {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: oklch(0.55 0.18 25);
  color: #fff;
}
.circ-item-title { font-weight: 500; font-size: 15px; line-height: 1.4; }

.circ-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.circ-cat .dot { width: 6px; height: 6px; border-radius: 50%; }
.circ-cat-docenti  { background: oklch(0.94 0.04 250); color: oklch(0.40 0.14 250); }
.circ-cat-docenti  .dot { background: var(--primary); }
.circ-cat-studenti { background: oklch(0.95 0.06 75);  color: oklch(0.42 0.14 60); }
.circ-cat-studenti .dot { background: oklch(0.70 0.16 60); }
.circ-cat-ata      { background: oklch(0.94 0.05 150); color: oklch(0.38 0.11 150); }
.circ-cat-ata      .dot { background: oklch(0.62 0.13 150); }
.circ-cat-genitori { background: oklch(0.95 0.04 25);  color: oklch(0.43 0.15 20); }
.circ-cat-genitori .dot { background: var(--rose-500); }

/* Wrapper dei badge destinatari, cosi' stanno tutti su una singola riga
   allineata al testo (indent 48px = larghezza icona+gap) invece di essere
   flex items del .circ-item con margin-left individuale che li sparpaglia. */
.circ-item-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.circ-cat-altro    { background: oklch(0.94 0 0);      color: oklch(0.38 0 0); }
.circ-cat-altro    .dot { background: oklch(0.65 0 0); }

[data-theme="dark"] .circ-cat-docenti  { background: oklch(0.25 0.07 250); color: oklch(0.85 0.12 250); }
[data-theme="dark"] .circ-cat-studenti { background: oklch(0.25 0.07 60);  color: oklch(0.85 0.12 60); }
[data-theme="dark"] .circ-cat-ata      { background: oklch(0.25 0.06 150); color: oklch(0.82 0.11 150); }
[data-theme="dark"] .circ-cat-genitori { background: oklch(0.27 0.08 20);  color: oklch(0.85 0.11 20); }
[data-theme="dark"] .circ-cat-altro    { background: oklch(0.25 0 0);      color: oklch(0.85 0 0); }

/* --- Archivio circolari: filtri, paginazione, gate sul documento --------- */

/* Le linguette dell'archivio sono link, non bottoni: stesso aspetto. */
a.circ-tab { text-decoration: none; }
a.circ-tab:hover { text-decoration: none; border-color: var(--border-strong); }
a.circ-tab.active:hover { border-color: var(--primary); }

.circ-item-pdf {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-muted);
}

.circ-filtri {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.circ-filtri-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
  padding: 0 12px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
}
.circ-filtri-campo:focus-within { border-color: var(--primary); }
.circ-filtri-campo input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.circ-filtri-anno {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.paginazione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.paginazione-stato {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.circ-destinatari {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.circ-destinatari-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Documento non scaricabile: stessa forma dell'allegato, ma spento e
   non cliccabile — si vede che c'è e perché non si può prendere. */
.attachment-bloccato {
  background: var(--surface-2);
  border-style: dashed;
  cursor: default;
}
.attachment-bloccato .attachment-icon-other {
  background: var(--amber-100);
  color: oklch(0.45 0.13 75);
}
[data-theme="dark"] .attachment-bloccato .attachment-icon-other {
  background: oklch(0.28 0.08 75);
  color: oklch(0.85 0.12 75);
}

/* ============================================================
   14b. Pagina Notizie (notizie.html)
   ============================================================ */
.news-page { padding: 8px 32px 64px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 14px 0 24px;
  /* Su mobile: scroll orizzontale invece che wrap.
     Le breadcrumb con più livelli (es. "Home › Notizie › Categoria X ›
     Titolo lungo di articolo") si spezzavano su più righe e su schermi
     stretti "premevano" tutto il layout. Meglio uno scroll: la label
     corrente resta sempre visibile a destra, il percorso è raggiungibile
     con swipe. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;    /* Firefox */
  -webkit-overflow-scrolling: touch;
  /* Ombre di scroll ai bordi per suggerire visivamente lo scroll. */
  mask-image: linear-gradient(to right, transparent 0, #000 12px,
                              #000 calc(100% - 12px), transparent 100%);
}
.breadcrumb::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.breadcrumb > * { flex-shrink: 0; white-space: nowrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb-sep { opacity: 0.6; color: currentColor; }
.breadcrumb [aria-current="page"] {
  color: var(--text);
  font-weight: 500;
  /* Se il titolo pagina è molto lungo, lo lasciamo troncare con ellipsis
     invece che spezzarlo — resta comunque scrollabile con swipe. */
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-title-block {
  display: flex;
  align-items: end;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.page-title-text { flex: 1; min-width: 0; }
.page-title-block h1 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.page-title-sub {
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 10px;
  max-width: 640px;
  line-height: 1.5;
}
.page-title-action { flex-shrink: 0; }

.news-featured {
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  margin-bottom: 32px;
}
.news-featured:hover { text-decoration: none; color: inherit; }
.news-featured-image {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.news-featured-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-featured-eyebrow {
  font-size: 11px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: 12px;
}
.news-featured-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}
.news-featured-excerpt {
  font-size: 15px;
  color: var(--text-muted);
  margin: 16px 0 0;
  line-height: 1.55;
}
.news-featured-meta {
  font-size: 13px;
  color: var(--text-subtle);
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.news-filters {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.filter-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.filter-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.filter-chip:hover { background: var(--surface-2); }
.filter-chip.active {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
.news-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.news-sort-label { font-size: 13px; color: var(--text-muted); }
.news-sort {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.news-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-card-page {
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.news-card-page:hover { text-decoration: none; color: inherit; }
.news-card-image {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}

/* --- Cover con gradient + emoji (fallback quando manca l'immagine) -------
   Utility applicabile a QUALSIASI contenitore-copertina (news-image,
   news-card-image, news-featured-image, indirizzo-hero-image, ecc.).
   Usa la variabile --hue impostata inline dal template a partire da
   `notizia.colore_hue_display` / `progetto.colore_hue_display`. */
.cover-gradient {
  position: relative;
  background: linear-gradient(
    135deg,
    hsl(var(--hue, 210) 55% 48%),
    hsl(calc(var(--hue, 210) + 25) 65% 30%)
  );
}
/* Trama sottile che spezza il gradient piatto */
.cover-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 20%, hsl(var(--hue, 210) 80% 65% / .18), transparent 55%),
    radial-gradient(circle at 80% 90%, hsl(calc(var(--hue, 210) + 40) 60% 25% / .35), transparent 60%);
  pointer-events: none;
}
.cover-emoji {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .18));
  user-select: none;
}
.news-card-body { padding: 18px; }
.news-card-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.news-card-meta .news-date { font-size: 12px; color: var(--text-muted); }
.news-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  margin: 12px 0 0;
  letter-spacing: -0.015em;
  color: var(--text);
}

.news-loadmore {
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 960px) {
  .news-page-grid { grid-template-columns: repeat(2, 1fr); }
  .news-featured { grid-template-columns: 1fr; }
  .news-featured-body { padding: 24px; }
  .news-featured-title { font-size: 26px; }
}
@media (max-width: 720px) {
  .news-page { padding: 4px 16px 48px; }
  .page-title-block {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .page-title-block h1 { font-size: 30px; }
  .news-filters { flex-direction: column; align-items: stretch; gap: 12px; }
  .news-sort-wrap { width: 100%; }
  .news-sort { flex: 1; }
  .news-page-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   14c. Pagina Contatti (contatti.html)
   ============================================================ */
.contacts-page { padding: 8px 32px 64px; }

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.contact-info-card { padding: 24px; }
.contact-info-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--primary-bg);
  color: var(--primary);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.contact-info-eyebrow {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact-info-primary {
  font-size: 17px;
  font-weight: 600;
  margin-top: 6px;
  word-break: break-word;
}
.contact-info-secondary {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-word;
}
.contact-info-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 14px;
}

.contacts-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

.offices-card { padding: 0; overflow: hidden; }
.offices-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.office-row {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 16px;
  align-items: center;
}
.office-row:last-child { border-bottom: none; }
.office-name > div:first-child { font-weight: 600; font-size: 14px; }
.office-name .office-person {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.office-email { font-size: 13px; word-break: break-word; }
.office-hours { font-size: 12px; color: var(--text-muted); }

.contacts-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.map-card { padding: 0; overflow: hidden; }
.map-canvas {
  height: 240px;
  position: relative;
  background: var(--surface-2);
  overflow: hidden;
}
.map-canvas iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}
[data-theme="dark"] .map-canvas iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.6); }

.map-body { padding: 16px; }
.map-title { font-weight: 600; font-size: 14px; }
.map-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.map-body .btn { margin-top: 12px; }

.emergency-card {
  background: var(--rose-100);
  border-color: transparent;
}
[data-theme="dark"] .emergency-card { background: oklch(0.25 0.07 20); }
.emergency-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 600;
  color: oklch(0.35 0.15 20);
}
[data-theme="dark"] .emergency-header { color: oklch(0.85 0.12 20); }
.emergency-body {
  font-size: 13px;
  color: oklch(0.35 0.12 20);
  line-height: 1.6;
}
[data-theme="dark"] .emergency-body { color: oklch(0.80 0.10 20); }

.contact-form-card { padding: 32px; margin-top: 32px; }
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
}
.contact-form-text h2 {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
}
.contact-form-text p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 10px 0 0;
  line-height: 1.6;
}
.contact-form { display: grid; gap: 12px; }
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form label > span {
  font-size: 12px;
  font-weight: 500;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--primary);
}
.contact-form textarea { resize: vertical; }
.contact-form .btn { justify-self: start; margin-top: 4px; }

@media (max-width: 960px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .contacts-row { grid-template-columns: 1fr; }
  .contact-form-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .contacts-page { padding: 4px 16px 48px; }
  .office-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 18px;
  }
  .offices-header { padding: 14px 18px; }
  .contact-form-card { padding: 24px; }
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   14d. Pagina Orario (orario.html)
   ============================================================ */
.orario-page { padding: 8px 32px 64px; }

.action-group { display: inline-flex; gap: 8px; }

.class-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.class-bar-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.class-picker {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.class-chip {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.class-chip:hover { background: var(--surface-2); }
.class-chip.active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.class-bar-filters {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
}

/* Timetable card */
.tt-card { padding: 0; overflow: hidden; }
.tt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tt-grid {
  display: grid;
  /* Il numero di giorni lo passa chi costruisce la griglia (`--tt-giorni`).
     Era scritto a mano come 6 mentre le righe ne producono 5: ogni riga
     slittava di una colonna e l'orario si leggeva in diagonale. */
  grid-template-columns: 80px repeat(var(--tt-giorni, 5), minmax(110px, 1fr));
  min-width: 760px;
}
.tt-corner {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.tt-day-header {
  padding: 14px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.tt-hour-cell {
  padding: 10px 12px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-muted);
}
.tt-hour-label { font-weight: 600; color: var(--text); }
.tt-hour-time { margin-top: 2px; }
.tt-cell {
  padding: 6px;
  border-bottom: 1px solid var(--border);
}
.tt-cell.tt-break { background: var(--surface-2); }
.tt-cell.tt-empty { background: var(--surface-2); }
.tt-grid > .tt-cell:last-child,
.tt-grid > .tt-hour-cell:last-of-type { /* drop last row's bottom border via specific selector below */ }

.break-pill {
  height: 100%;
  border-radius: 6px;
  border: 1px dashed var(--border-strong);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--text-subtle);
  min-height: 40px;
}

.subj {
  padding: 10px;
  border-radius: 6px;
  height: 100%;
  min-height: 56px;
}
.subj-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.subj-room { font-size: 11px; opacity: 0.85; margin-top: 2px; line-height: 1.2; }

.subj-bl { background: oklch(0.55 0.18 250); color: #fff; }
.subj-ro { background: oklch(0.62 0.17 25);  color: #fff; }
.subj-am { background: oklch(0.72 0.14 75);  color: #3a2810; }
.subj-gr { background: oklch(0.55 0.13 150); color: #fff; }
.subj-tl { background: oklch(0.58 0.14 200); color: #fff; }
.subj-pu { background: oklch(0.55 0.17 300); color: #fff; }
.subj-or { background: oklch(0.65 0.16 50);  color: #3a2810; }
.subj-pk { background: oklch(0.68 0.15 340); color: #fff; }
.subj-cy { background: oklch(0.62 0.13 220); color: #fff; }
.subj-gy { background: oklch(0.55 0.04 250); color: #fff; }
.subj-pe { background: oklch(0.78 0.05 60);  color: oklch(0.35 0.10 60); }

.orario-bottom {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
.legend-title { font-weight: 600; margin-bottom: 12px; }
.legend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  font-size: 13px;
}
.legend-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.legend-chip {
  width: 64px;
  padding: 3px 0;
  text-align: center;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.variations-card {
  background: var(--amber-100);
  border-color: transparent;
}
[data-theme="dark"] .variations-card { background: oklch(0.25 0.07 75); }
.variations-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 600;
  color: oklch(0.35 0.12 75);
}
[data-theme="dark"] .variations-header { color: oklch(0.85 0.12 75); }
.variations-body {
  font-size: 13px;
  color: oklch(0.35 0.10 75);
  line-height: 1.6;
}
[data-theme="dark"] .variations-body { color: oklch(0.78 0.09 75); }

@media (max-width: 960px) {
  .orario-bottom { grid-template-columns: 1fr; }
  .legend-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .orario-page { padding: 4px 16px 48px; }
  .class-bar { gap: 10px; }
  .class-bar-filters { margin-left: 0; width: 100%; }
  .tt-day-header { padding: 10px 6px; font-size: 11px; }
  .tt-hour-cell { padding: 8px; }
  .subj { padding: 8px; min-height: 48px; }
}

/* ============================================================
   14e. Pagina Indirizzo (informatica.html)
   ============================================================ */
.indirizzo-page { padding: 8px 32px 64px; }

.indirizzo-section { margin-top: 56px; }
.indirizzo-section:first-of-type { margin-top: 24px; }
.indirizzo-section h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.indirizzo-section .section-lead {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 720px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.indirizzo-section .section-eyebrow {
  font-size: 12px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

/* Hero indirizzo */
.indirizzo-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 32px 0 48px;
  border-bottom: 1px solid var(--border);
}
.indirizzo-hero h1 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 16px 0 18px;
}
.indirizzo-hero-lead {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 24px;
}
.indirizzo-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.indirizzo-hero-image {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.indirizzo-hero-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(8px);
}

/* Stats strip */
.indirizzo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.stat-card {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.stat-card .stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--primary);
  line-height: 1;
}
.stat-card .stat-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Articolazioni split */
.articolazioni-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.articolazione {
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.articolazione-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.articolazione h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.articolazione-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 18px;
}
.articolazione-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.articolazione-list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  align-items: flex-start;
}
.articolazione-list li::before {
  content: "→";
  color: var(--primary);
  font-weight: 600;
  flex-shrink: 0;
}
.articolazione-inf .articolazione-icon {
  background: var(--primary-bg);
  color: var(--primary);
}
.articolazione-tlc .articolazione-icon {
  background: oklch(0.93 0.05 200);
  color: oklch(0.42 0.14 200);
}
[data-theme="dark"] .articolazione-tlc .articolazione-icon {
  background: oklch(0.25 0.07 200);
  color: oklch(0.85 0.12 200);
}

/* Modern profile (AI/Cyber/Cloud/IoT) */
.modern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.modern-card {
  padding: 24px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
}
.modern-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--primary-bg);
  color: var(--primary);
}
.modern-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.modern-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Quadro orario summary line */
.orario-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 14px;
}
.orario-summary strong { color: var(--text); font-weight: 600; }

/* Tabella materie × 5 anni */
.quadro-card { padding: 0; overflow: hidden; }
.quadro-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.quadro-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 14px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  text-align: center;
  width: 60px;
}
.quadro-table thead th.quadro-subj-col {
  text-align: left;
  padding-left: 24px;
  width: auto;
}
.quadro-table tbody td,
.quadro-table tfoot td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-weight: 500;
}
.quadro-table tbody td.quadro-subj,
.quadro-table tfoot td.quadro-subj {
  text-align: left;
  padding-left: 24px;
  font-weight: 500;
  color: var(--text);
}
.quadro-lab {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}
.quadro-empty {
  color: var(--text-subtle);
  font-weight: 400;
}
.quadro-section-row td {
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 24px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .quadro-section-row td { background: oklch(0.22 0.06 250); }

.quadro-table tbody tr.quadro-highlight td:not(.quadro-subj) {
  background: oklch(0.97 0.02 250);
  color: var(--primary);
  font-weight: 600;
}
[data-theme="dark"] .quadro-table tbody tr.quadro-highlight td:not(.quadro-subj) {
  background: oklch(0.22 0.04 250);
}

.quadro-total-row td {
  background: var(--surface-2);
  font-weight: 700 !important;
  font-size: 14px;
  border-top: 2px solid var(--border-strong);
  border-bottom: none;
  padding: 14px 10px !important;
}
.quadro-total-row td.quadro-subj {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.orario-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.orario-meta-item {
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}
.orario-meta-item strong {
  color: var(--text);
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

@media (max-width: 960px) {
  .orario-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .quadro-table thead th { padding: 10px 6px; }
  .quadro-table tbody td,
  .quadro-table tfoot td { padding: 10px 6px; }
  .quadro-table tbody td.quadro-subj,
  .quadro-table tfoot td.quadro-subj { padding-left: 16px; font-size: 13px; }
  .quadro-section-row td { padding: 8px 16px !important; }
  .orario-meta { grid-template-columns: 1fr; }
}

/* Lab grid */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lab-card {
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.lab-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--primary);
  flex-shrink: 0;
}
.lab-card-body { min-width: 0; }
.lab-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
}
.lab-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Cert grid */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cert-card {
  padding: 24px;
  text-align: left;
}
.cert-card-name {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--primary);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cert-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}
.cert-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Career cards (Dopo il diploma) */
.career-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.career-card { padding: 28px; }
.career-card-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 10px;
}
.career-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.career-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Final CTA */
.indirizzo-cta {
  background: var(--primary-bg);
  border-radius: var(--r-lg);
  padding: 48px 40px;
  text-align: center;
  margin-top: 56px;
}
[data-theme="dark"] .indirizzo-cta { background: oklch(0.22 0.06 250); }
.indirizzo-cta h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.indirizzo-cta p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.55;
}
.indirizzo-cta-buttons {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 960px) {
  .indirizzo-hero { grid-template-columns: 1fr; gap: 24px; padding: 16px 0 32px; }
  .indirizzo-hero h1 { font-size: 36px; }
  .indirizzo-stats { grid-template-columns: repeat(2, 1fr); }
  .articolazioni-grid { grid-template-columns: 1fr; }
  .modern-grid { grid-template-columns: 1fr; }
  .lab-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: 1fr; }
  .career-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .indirizzo-page { padding: 4px 16px 48px; }
  .indirizzo-section { margin-top: 40px; }
  .indirizzo-section h2 { font-size: 24px; }
  .indirizzo-hero h1 { font-size: 30px; }
  .indirizzo-hero-lead { font-size: 15px; }
  .stat-card { padding: 16px 18px; }
  .stat-card .stat-num { font-size: 26px; }
  .articolazione { padding: 22px; }
  .modern-card {
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 18px;
  }
  .modern-icon { width: 44px; height: 44px; }
  .lab-grid { grid-template-columns: 1fr; }
  .indirizzo-cta { padding: 32px 20px; }
  .indirizzo-cta h2 { font-size: 24px; }
}

/* ============================================================
   15. Timetable / appointments
   ============================================================ */
.timetable-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.tt-card { padding: 0; overflow: hidden; }
.tt-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tt-header .icon { color: var(--primary); }
.tt-header-title { font-weight: 600; }
.tt-header-meta { margin-left: auto; font-size: 13px; }

.tt-row {
  display: flex;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.tt-row:last-child { border-bottom: none; }
.tt-row.active {
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
}
.tt-row-label { width: 80px; }
.tt-row-time { font-variant-numeric: tabular-nums; }
.tt-row-now { margin-left: auto; font-size: 12px; }

.appt-row {
  display: flex;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.appt-row:last-child { border-bottom: none; }
/* Stato vuoto della card appuntamenti: senza queste regole il <p> resta
   incollato in alto a sinistra della card. Centro sul box e do respiro. */
.appt-vuoto {
  margin: 0;
  padding: 44px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.appt-date {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  flex-shrink: 0;
  text-align: center;
}
.appt-date-d {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.appt-date-m {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.appt-body { flex: 1; min-width: 0; }
.appt-title { font-weight: 500; font-size: 14px; }
.appt-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   16. Offer / tracks
   ============================================================ */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.offer-card {
  padding: 24px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.offer-card:hover { text-decoration: none; color: inherit; }
.offer-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.offer-icon-blue  { background: oklch(0.55 0.15 230); }
.offer-icon-rose  { background: oklch(0.55 0.15 30); }
.offer-icon-green { background: oklch(0.55 0.15 150); }
.offer-name {
  font-weight: 600;
  font-size: 18px;
  font-family: var(--font-display);
}
.offer-sub { font-size: 14px; color: var(--text-muted); margin-top: 6px; }
.offer-cta { margin-top: 18px; font-size: 13px; color: var(--primary); font-weight: 500; }

/* ============================================================
   17. Projects
   ============================================================ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.project-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-image {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}
.project-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-title { font-weight: 600; font-size: 16px; margin-top: 10px; }
.project-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  flex: 1;
}

/* ============================================================
   18. Footer
   ============================================================ */
.site-footer {
  background: var(--blue-900);
  color: oklch(0.85 0.04 250);
  padding: 48px 0 28px;
  margin-top: 64px;
}
[data-theme="dark"] .site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.footer-stats {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid oklch(0.30 0.08 250);
}
[data-theme="dark"] .footer-stats { border-color: var(--border); }
.footer-stat .n {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  font-family: var(--font-display);
}
.footer-stat .label {
  font-size: 13px;
  color: oklch(0.75 0.05 250);
  margin-top: 4px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-top: 32px;
}
.footer-cols h3,
.footer-cols h4 {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.footer-cols a {
  display: block;
  color: oklch(0.82 0.04 250);
  font-size: 13px;
  padding: 3px 0;
  text-decoration: none;
  /* Email/PEC lunghe (GEIS01400Q@pec.istruzione.it) rompevano il layout
     su viewport stretto (<380px): forzo word-break così wrappano invece
     di far scrollare orizzontalmente l'intera pagina. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.footer-cols a:hover { color: #fff; }
.footer-about {
  font-size: 13px;
  line-height: 1.6;
  color: oklch(0.80 0.04 250);
  max-width: 320px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Cintura di sicurezza globale: nessun elemento del sito deve mai far
   scrollare l'intero body orizzontalmente. Se un embed o un contenuto
   utente supera la viewport, ha il suo overflow:auto interno. */
html, body { overflow-x: clip; }
.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid oklch(0.30 0.08 250);
  font-size: 12px;
  color: oklch(0.70 0.04 250);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
[data-theme="dark"] .footer-bottom { border-color: var(--border); }
/* Credit dell'autore: una riga sotto il copyright, un gradino più in sordina. */

/* ============================================================
   19. Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { max-width: 420px; }
  .highlights-grid,
  .quick-grid,
  .news-grid,
  .offer-grid,
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .timetable-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Show hamburger, hide secondary icons; brand subtitle hidden to save space */
  .icon-btn-desktop { display: none; }
  .icon-btn-mobile { display: grid; }
  .brand-sub { display: none; }

  /* Nome istituto: nascondiamo la versione completa, mostriamo l'abbreviata */
  .brand-name-full { display: none; }
  .brand-name-short { display: inline; }

  /* Riallineamento: hamburger primo a sinistra, brand subito dopo, actions spinte a destra */
  .topbar-actions { margin-left: auto; }

  /* Nav becomes a dropdown panel under the topbar */
  .topbar-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .topbar-nav.is-open { display: flex; }
  .topbar-nav a {
    padding: 12px 14px;
    font-size: 15px;
    border-radius: var(--r-sm);
  }

  .topbar-nav-divider {
    display: block;
    height: 1px;
    background: var(--border);
    margin: 8px 4px;
  }
  .topbar-nav-theme {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: left;
  }
  .topbar-nav-theme:hover { background: var(--surface-2); }
  .topbar-nav-theme-icon {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    color: var(--text-muted);
  }

}

@media (max-width: 720px) {
  .topbar-row { padding: 12px 16px; gap: 12px; }
  .container { padding: 0 16px; }
  /* Alert bar mobile: compatta ma pulita. Il messaggio prende la sua riga
     (icona+testo insieme), il link (se c'è) va a capo sotto, il bottone
     chiudi resta in alto a destra allineato al primo baseline. */
  .alert-bar-inner {
    position: relative;
    padding: 10px 44px 10px 14px;    /* spazio a destra per il bottone chiudi */
    gap: 6px 12px;
    flex-wrap: wrap;
    font-size: 13.5px;
    line-height: 1.4;
  }
  .alert-bar-msg { flex: 1 1 100%; }
  .alert-bar-inner .link-arrow { margin-left: 24px; font-size: 13.5px; }
  .alert-bar-close {
    position: absolute;
    top: 6px;
    right: 6px;
  }
  .hero-inner { padding: 32px 16px 40px; }
  .hero h1 { font-size: 34px; }
  .site-footer-inner { padding: 0 16px; }
  .footer-stats { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .highlights-grid,
  .quick-grid,
  .news-grid,
  .offer-grid,
  .projects-grid { grid-template-columns: 1fr; }

  /* Section head — link a fianco del titolo, testo accorciato a "Tutto →" */
  .section-head { gap: 12px; }
  .section-head > :first-child { min-width: 0; }
  .section-head .link { flex-shrink: 0; white-space: nowrap; }
  .section-head .link .link-full  { display: none; }
  .section-head .link .link-short { display: inline; }

  /* Circolari — mobile: tab scrollabili, layout item compatto su due righe */
  .circ-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px 14px;
    padding: 0 16px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .circ-tabs::-webkit-scrollbar { display: none; }
  .circ-tab { flex-shrink: 0; }

  .circ-item {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 12px;
    padding: 14px 16px;
  }
  .circ-item-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
  }
  .circ-item-body { flex: 1 1 calc(100% - 48px); }
  .circ-item-meta { gap: 6px 10px; margin-bottom: 4px; }
  .circ-item-title { font-size: 14.5px; line-height: 1.35; }

  .circ-item-cats {
    order: 3;
    flex: 1 1 100%;
    margin: 6px 0 0 48px;   /* indent per allinearsi al body sotto l'icona */
    gap: 6px;
  }
  .circ-cat {
    margin: 0;
    padding: 4px 10px;
    font-size: 11px;
  }
  .circ-item .quick-tile-arrow { display: none; }
}

/* ============================================================
   N. Pagina articolo (notizia.html)
   ============================================================ */
.article-page {
  padding-top: 28px;
  padding-bottom: 80px;
}

/* Layout a due colonne: contenuto + sidebar sticky */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 60px;
  align-items: start;
  margin-top: 24px;
}
.article-main { min-width: 0; max-width: 740px; }

.article-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
}
.sidebar-card-title {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* Sommario (TOC) */
.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.toc li { margin: 0; padding: 0; }
.toc li::before { content: none; }
.toc a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .12s, background .12s, border-color .12s;
}
.toc a:hover {
  color: var(--text);
  background: var(--surface-2);
  text-decoration: none;
}
.toc a.is-active {
  color: var(--primary);
  background: var(--primary-bg);
  border-left-color: var(--primary);
  font-weight: 600;
}
.toc .toc-h3 a { padding-left: 24px; font-size: 13px; }

/* Sidebar share */
.sidebar-share { display: flex; flex-direction: column; gap: 8px; }
.sidebar-share .btn { justify-content: center; width: 100%; }

/* Sidebar tags */
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Newsletter mini */
.sidebar-newsletter {
  background: var(--primary-bg);
  border-color: color-mix(in oklch, var(--primary) 25%, var(--border));
}
.sidebar-newsletter .sidebar-card-title { color: var(--primary); }
.sidebar-newsletter-text {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 12px;
}

/* --- Header articolo --- */
.article-header { margin: 18px 0 28px; }
.article-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.article-kicker-sep { color: var(--text-subtle); }
.article-section { font-weight: 500; }
.article-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 4px 0 18px;
}
.article-deck {
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 26px;
  max-width: 64ch;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.article-meta-author { display: flex; align-items: center; gap: 12px; }
.article-meta-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.article-meta-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.article-meta-role { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.article-meta-info { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.article-meta-sep { color: var(--text-subtle); }

/* --- Cover --- */
.article-cover { margin: 0 0 32px; }
.article-cover img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-cover-caption {
  font-size: 13px;
  color: var(--text-muted);
  margin: 10px 4px 0;
  line-height: 1.45;
}

/* --- Corpo articolo: tipografia editoriale --- */
.article-body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}
.article-body > * + * { margin-top: 1.2em; }
.article-body p { margin: 0; }
.article-body p strong { font-weight: 600; color: var(--text); }
.article-body p em { font-style: italic; }
.article-body a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article-body a:hover { color: var(--primary-hover); }
.article-body h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
}
.article-body h4 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 1.6em;
  margin-bottom: 0.3em;
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--text);
}
.article-body pre {
  font-family: var(--font-mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  margin: 24px 0;
}
.article-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}
.article-body hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 36px 0;
}
.article-body small { font-size: 0.85em; color: var(--text-muted); }
.article-body kbd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 7px;
  color: var(--text);
}

/* --- Liste --- */
.article-body ul,
.article-body ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-body li { margin: 8px 0; line-height: 1.6; }
.article-body ul li {
  position: relative;
  padding-left: 28px;
}
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.article-body ol { counter-reset: list; }
.article-body ol li {
  position: relative;
  padding-left: 38px;
  counter-increment: list;
  min-height: 24px;
}
.article-body ol li::before {
  content: counter(list);
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-body ul ul,
.article-body ol ol,
.article-body ul ol,
.article-body ol ul {
  margin-top: 6px;
  margin-bottom: 0;
}
.article-body ul ul li::before { background: var(--text-subtle); }

/* --- Citazione --- */
.article-body blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--primary);
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text);
}
.article-body blockquote p { margin: 0; }
.article-body blockquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 13.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
}

/* --- Figura inline --- */
.article-body figure { margin: 28px 0; }
.article-body figure img { width: 100%; border-radius: var(--r-md); }
.article-body figcaption {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.45;
  font-family: var(--font-sans);
}

/* --- Tabella --- */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  margin: 24px 0;
}
.article-body th,
.article-body td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.article-body thead th {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.article-body tbody tr:hover { background: var(--surface-2); }

/* --- Callout / nota informativa --- */
.article-callout {
  margin: 28px 0;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--primary-bg);
  border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border));
  display: flex;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}
.article-callout-icon {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.article-callout-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.article-callout-body { color: var(--text-muted); }
.article-callout-body strong { color: var(--text); font-weight: 600; }

/* --- File allegati --- */
/* Margine anche sotto: senza, il testo dell'articolo si incolla al riquadro. */
.attachments { margin: 36px 0; }
.attachments-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.attachments-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.attachment {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, background .15s, transform .15s;
  font-family: var(--font-sans);
}
.attachment:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  text-decoration: none;
}
.attachment-icon {
  width: 40px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.04em;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.attachment-icon::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(225deg, var(--surface) 0%, var(--surface) 50%, transparent 50%);
  border-bottom-left-radius: 3px;
}
.attachment-icon::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.22);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-bottom-left-radius: 3px;
}
.attachment-icon-pdf { background: oklch(0.55 0.18 25); }
.attachment-icon-doc { background: oklch(0.50 0.16 250); }
.attachment-icon-other { background: var(--n-500); }
.attachment-body {
  flex: 1;
  min-width: 0;
}
.attachment-name {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--text);
}
.attachment-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
}
.attachment-meta-sep { color: var(--text-subtle); margin: 0 4px; }
.attachment-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  transition: color .15s;
}
.attachment:hover .attachment-action { color: var(--primary); }

/* --- Tag (riusato in sidebar) --- */
.article-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: border-color .15s, background .15s, color .15s;
}
.article-tag:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

/* --- Navigazione articolo prev/next --- */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 36px;
}
.article-nav-card {
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-sans);
}
.article-nav-card:hover { text-decoration: none; }
.article-nav-eyebrow {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.article-nav-card[data-dir="next"] { text-align: right; }
.article-nav-card[data-dir="next"] .article-nav-eyebrow { justify-content: flex-end; }
.article-nav-title {
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--text);
}

/* --- Articoli correlati --- */
.article-related { margin-top: 64px; }
.article-related-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  line-height: 1.2;
}

/* Tablet: la sidebar passa sotto il contenuto */
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .article-main { max-width: none; }
  .article-sidebar {
    position: static;
    top: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .article-sidebar .sidebar-card { flex: 1 1 280px; }
  /* Su tablet nascondiamo il sommario, perde valore senza lo sticky */
  .article-sidebar .sidebar-card-toc { display: none; }
}

/* Mobile */
@media (max-width: 720px) {
  .article-page { padding-top: 16px; padding-bottom: 60px; }
  .article-title { font-size: 30px; }
  .article-deck { font-size: 17px; }
  .article-body { font-size: 17px; line-height: 1.65; }
  .article-body h2 { font-size: 23px; }
  .article-body h3 { font-size: 19px; }
  .article-body blockquote { font-size: 17px; padding: 16px 18px; }
  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .article-sidebar { flex-direction: column; }
  .article-sidebar .sidebar-card { flex: 1 1 auto; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-card[data-dir="next"] { text-align: left; }
  .article-nav-card[data-dir="next"] .article-nav-eyebrow { justify-content: flex-start; }
  .attachment { padding: 12px 14px; gap: 12px; }
  .attachment-action-label { display: none; }
}

/* ============================================================
   N+1. Pagina evento (evento-panarese.html)
   ============================================================ */
.event-page {
  --accent:        oklch(0.75 0.14 75);
  --accent-soft:   oklch(0.93 0.06 80);
  --accent-strong: oklch(0.55 0.14 70);
  --accent-on:     oklch(0.20 0.07 70);
}
[data-theme="dark"] .event-page {
  --accent:        oklch(0.80 0.14 80);
  --accent-soft:   oklch(0.24 0.05 75);
  --accent-strong: oklch(0.85 0.13 80);
  --accent-on:     oklch(0.12 0.03 70);
}

/* Bottone large condiviso */
.btn-lg {
  padding: 14px 22px;
  font-size: 16px;
  border-radius: var(--r-md);
}
.btn-on-dark {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
}
.btn-on-dark:hover { background: rgba(255, 255, 255, 0.2); }

/* --- Hero full-bleed --- */
.event-hero {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.event-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transform: scale(1.05);
}
.event-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.20) 30%, rgba(0,0,0,0.92) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, transparent 80%),
    radial-gradient(circle at 80% 20%, oklch(0.30 0.10 70 / 0.40), transparent 60%);
  z-index: -1;
}
.event-hero-inner {
  padding: 100px 32px 80px;
  max-width: 1200px;
  width: 100%;
}
.event-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  backdrop-filter: blur(8px);
  margin-bottom: 28px;
}
.event-hero-badge-edition { color: #fff; }
.event-hero-badge-sep { color: rgba(255, 255, 255, 0.4); }
.event-hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 11vw, 132px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
}
.event-hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.event-hero-deck {
  font-size: 20px;
  line-height: 1.5;
  max-width: 560px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.88);
}
.event-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
}
.event-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.event-hero-meta-sep { color: rgba(255, 255, 255, 0.35); }
.event-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Stats strip --- */
.event-stats {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.event-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.event-stat {
  padding: 32px 24px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-stat:last-child { border-right: 0; }
.event-stat-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.event-stat-num span {
  font-size: 0.6em;
  color: var(--accent);
  margin-left: 2px;
}
.event-stat-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.35;
}
.event-stat-countdown { background: var(--accent-soft); }
.event-stat-countdown .event-stat-num { color: var(--accent-strong); }

/* --- Sezione base --- */
.event-section { padding: 80px 0; }
.event-section-alt { background: var(--surface-2); }
.event-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 16px;
}
.event-h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  max-width: 22ch;
}
.event-section-head { margin-bottom: 44px; max-width: 720px; }
.event-section-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 4px 0 0;
  max-width: 60ch;
}
.event-section-lead code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 1px 6px;
  border-radius: 4px;
}

/* --- About --- */
.event-about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.event-about-text p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 16px;
}
.event-about-text p strong { font-weight: 600; }
.event-quote {
  margin: 28px 0 0;
  padding: 24px 26px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  position: relative;
}
.event-quote-mark {
  color: var(--accent);
  opacity: 0.6;
  margin-bottom: 8px;
}
.event-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 12px;
  color: var(--text);
}
.event-quote cite {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text-muted);
}
.event-about-figure {
  margin: 0;
  position: sticky;
  top: 88px;
}
.event-about-figure img {
  width: 100%;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.event-about-figure figcaption {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 10px;
  font-style: italic;
}

/* --- Categorie --- */
.event-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.event-category {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  position: relative;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.event-category:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.event-category-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.event-category-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.event-category h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  line-height: 1.2;
}
.event-category p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* --- Programma --- */
.event-program-tabs {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  margin-bottom: 32px;
  gap: 4px;
}
.event-program-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 22px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-sans);
  transition: background .15s, color .15s;
}
.event-program-tab:hover { color: var(--text); background: var(--surface-2); }
.event-program-tab.is-active {
  background: var(--accent);
  color: var(--accent-on);
}
.event-program-tab-day {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.event-program-tab-date { font-size: 15px; font-weight: 600; }

.event-program-day { display: none; }
.event-program-day.is-active {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.event-program-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  padding: 22px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.event-program-item:first-child { border-top: 0; }
.event-program-time {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text-muted);
  font-weight: 500;
  padding-top: 4px;
}
.event-program-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.event-program-tag-gold { background: var(--accent); color: var(--accent-on); }
.event-program-content h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 6px;
}
.event-program-content p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 8px;
}
.event-program-where {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-subtle);
}
.event-program-content-highlight {
  position: relative;
}
.event-program-content-highlight::before {
  content: '';
  position: absolute;
  inset: -22px -24px;
  background: var(--accent-soft);
  z-index: -1;
}

/* --- Galleria mosaico --- */
.event-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}
.event-gallery-item {
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  border-radius: var(--r-md);
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.event-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35) 100%);
  opacity: 0;
  transition: opacity .2s;
}
.event-gallery-item:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow-md);
}
.event-gallery-item:hover::after { opacity: 1; }
.event-gallery-tall { grid-row: span 2; }
.event-gallery-wide { grid-column: span 2; }
.event-gallery-cta {
  margin-top: 20px;
  text-align: right;
}

/* --- Video & progetti --- */
.event-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.event-video-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.event-video-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.event-video-thumb {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  position: relative;
}
.event-video-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform .2s;
}
.event-video-card:hover .event-video-play { transform: translate(-50%, -50%) scale(1.08); }
.event-video-duration {
  position: absolute;
  right: 10px; bottom: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 4px;
}
.event-video-body { padding: 18px 20px 22px; }
.event-video-eyebrow {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 8px;
}
.event-video-body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 6px;
}
.event-video-body p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* --- Albo d'oro: sezione scura --- */
.event-section-dark {
  --bg:        oklch(0.14 0.012 250);
  --surface:   oklch(0.18 0.012 250);
  --surface-2: oklch(0.22 0.014 250);
  --border:    oklch(0.28 0.014 250);
  --border-strong: oklch(0.36 0.018 250);
  --text:      oklch(0.97 0.005 80);
  --text-muted: oklch(0.72 0.010 80);
  --text-subtle: oklch(0.58 0.012 80);
  --accent:        oklch(0.80 0.14 80);
  --accent-soft:   oklch(0.24 0.05 75);
  --accent-strong: oklch(0.85 0.13 80);
  --accent-on:     oklch(0.12 0.03 70);
  background: var(--bg);
  color: var(--text);
}
.event-section-dark .event-eyebrow { color: var(--accent); }
.event-section-dark .event-section-lead { color: var(--text-muted); }
.event-honors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.event-honor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}
.event-honor-year {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.event-honor-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.event-honor-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  align-items: baseline;
}
.event-honor-list li:first-child { border-top: 0; padding-top: 0; }
.event-honor-cat {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.event-honor-project {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.event-honor-school {
  display: block;
  grid-column: 2;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.event-honor-collapsed { background: transparent; }
.event-honor-collapsed .event-honor-archive {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
}
.link-on-dark {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: 14px;
  text-decoration: none;
}
.link-on-dark:hover { color: #fff; text-decoration: none; }

/* --- Giuria --- */
.event-jury-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.event-jury-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .15s, transform .15s;
}
.event-jury-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.event-jury-photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-2);
  border: 2px solid var(--accent-soft);
}
.event-jury-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.event-jury-role {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Partner --- */
.event-partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.event-partner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 16px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  transition: color .15s, border-color .15s;
}
.event-partner:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* --- FAQ --- */
.event-faq-wrap { max-width: 820px; }
.event-faq {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.event-faq-item { border-top: 1px solid var(--border); }
.event-faq-item:first-child { border-top: 0; }
.event-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  transition: background .15s;
}
.event-faq-item summary::-webkit-details-marker { display: none; }
.event-faq-item summary:hover { background: var(--surface-2); }
.event-faq-marker {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  position: relative;
  flex-shrink: 0;
  transition: transform .2s, background .15s;
}
.event-faq-marker::before,
.event-faq-marker::after {
  content: '';
  position: absolute;
  background: currentColor;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.event-faq-marker::before { width: 10px; height: 2px; }
.event-faq-marker::after  { width: 2px; height: 10px; transition: transform .2s; }
.event-faq-item[open] .event-faq-marker {
  background: var(--accent);
  color: var(--accent-on);
}
.event-faq-item[open] .event-faq-marker::after { transform: translate(-50%, -50%) scaleY(0); }
.event-faq-body {
  padding: 0 22px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}
.event-faq-body p { margin: 0; }
.event-faq-body strong { color: var(--text); font-weight: 600; }

/* --- CTA finale --- */
.event-cta {
  background:
    linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.event-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.event-eyebrow-on-accent { color: var(--accent-strong); }
.event-cta-text p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 6px 0 24px;
  max-width: 56ch;
}
.event-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.event-cta-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.event-cta-info-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.event-cta-info-row svg { color: var(--accent-strong); flex-shrink: 0; margin-top: 2px; }
.event-cta-info-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.event-cta-info-value {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.45;
}
.event-cta-info-value a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.event-cta-info-value a:hover { color: var(--accent-strong); }

/* --- Banner promo (riusato in notizie.html e index.html) --- */
.event-banner {
  --eb-accent: oklch(0.80 0.14 80);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 0% 100%, oklch(0.30 0.10 75) 0%, transparent 50%),
    linear-gradient(135deg, oklch(0.18 0.07 70) 0%, oklch(0.22 0.05 250) 100%);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform .2s, box-shadow .2s;
}
.event-banner:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.event-banner-body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
}
.event-banner-eyebrow {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--eb-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.event-banner-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 4px 0 0;
}
.event-banner-title em { font-style: italic; color: var(--eb-accent); font-weight: 500; }
.event-banner-deck {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 6px 0 0;
  max-width: 38ch;
}
.event-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 6px;
}
.event-banner-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.event-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--eb-accent);
  margin-top: 14px;
  transition: gap .2s, color .15s;
}
.event-banner:hover .event-banner-cta { gap: 10px; color: #fff; }
.event-banner-image {
  background-size: cover;
  background-position: center;
  position: relative;
}
.event-banner-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, oklch(0.18 0.07 70) 0%, transparent 30%);
  pointer-events: none;
}

/* Variante compatta usata in home */
.event-banner-compact .event-banner-body {
  padding: 28px 32px;
  min-height: 180px;
}
.event-banner-compact .event-banner-title { font-size: 30px; }
.event-banner-compact .event-banner-deck { font-size: 14px; }

/* Sezione di chiusura pagina (più aria sotto, prima del footer) */
.section-end { padding: 64px 0 88px; }
@media (max-width: 720px) {
  .section-end { padding: 48px 0 64px; }
}

@media (max-width: 720px) {
  .event-banner { grid-template-columns: 1fr; }
  .event-banner-image { aspect-ratio: 16 / 9; order: -1; }
  .event-banner-image::before {
    background: linear-gradient(180deg, transparent 50%, oklch(0.18 0.07 70) 100%);
  }
  .event-banner-body { padding: 24px 22px; min-height: 0; }
  .event-banner-title { font-size: 30px; }
}

/* --- Tablet (≤ 1024) --- */
@media (max-width: 1024px) {
  .event-hero { min-height: 480px; }
  .event-hero-inner { padding: 80px 32px 60px; }
  .event-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .event-stat:nth-child(2) { border-right: 0; }
  .event-stat:nth-child(1), .event-stat:nth-child(2) { border-bottom: 1px solid var(--border); }
  .event-about { grid-template-columns: 1fr; gap: 40px; }
  .event-about-figure { position: static; max-width: 480px; }
  .event-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .event-jury-grid { grid-template-columns: repeat(2, 1fr); }
  .event-videos-grid { grid-template-columns: repeat(2, 1fr); }
  .event-videos-grid > :last-child { grid-column: span 2; max-width: 50%; }
  .event-honors { grid-template-columns: 1fr; }
  .event-cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .event-partners-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Mobile (≤ 720) --- */
@media (max-width: 720px) {
  .event-hero { min-height: 460px; }
  .event-hero-inner { padding: 64px 16px 48px; }
  .event-hero-deck { font-size: 17px; }
  .event-hero-meta { font-size: 13px; gap: 8px 12px; }
  .event-hero-meta-sep { display: none; }
  .event-section { padding: 56px 0; }
  .event-h2 { font-size: 28px; }
  .event-section-head { margin-bottom: 28px; }
  .event-stats-grid { grid-template-columns: 1fr 1fr; }
  .event-stat { padding: 22px 18px; }
  .event-stat-num { font-size: 36px; }
  .event-categories-grid { grid-template-columns: 1fr; }
  .event-program-tabs { width: 100%; display: flex; }
  .event-program-tab { flex: 1; padding: 8px 6px; }
  .event-program-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 18px;
  }
  .event-program-time { font-size: 12.5px; }
  .event-program-content-highlight::before { inset: -18px -18px; }
  .event-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .event-gallery-wide { grid-column: span 2; }
  .event-videos-grid { grid-template-columns: 1fr; }
  .event-videos-grid > :last-child { grid-column: span 1; max-width: none; }
  .event-honor-list li { grid-template-columns: 1fr; gap: 4px; }
  .event-honor-school { grid-column: 1; }
  .event-jury-grid { grid-template-columns: 1fr; }
  .event-partners-grid { grid-template-columns: repeat(2, 1fr); }
  .event-cta { padding: 56px 0; }
}

/* ============================================================
   20. Pannello di redazione (circolari)
   Superficie di lavoro, non di lettura: campi larghi, testo
   esplicito, un solo pulsante primario per schermata.
   ============================================================ */
.container-stretto { max-width: 860px; }

.pannello-testata {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.pannello-occhiello {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 6px;
}
.pannello-testata h1 { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.03em; }
.pannello-guida { margin-top: 8px; color: var(--text-muted); font-size: 15px; max-width: 60ch; }

.pannello-sezione { margin-top: 36px; }
.pannello-sezione h2 {
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pannello-conteggio {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pannello-nota { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }
/* .pannello-manca è un warning inline «senza documento» sui pulsanti di
   gestione. Prima usava --amber-500 (oklch 0.75) → 2.26:1 su bianco,
   fail WCAG AA. Scurito a oklch 0.55: giallo/ambra ben visibile ma con
   contrasto > 4.5:1 sia su sfondo chiaro sia scuro. */
.pannello-manca {
  color: oklch(0.55 0.15 70);
  font-weight: 600;
  font-size: 12px;
}
[data-theme="dark"] .pannello-manca { color: oklch(0.78 0.14 70); }

.circ-item-riga { cursor: default; }
.circ-item-riga:hover { background: transparent; }
.pannello-azioni { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pannello-azioni form { margin: 0; }

/* --- moduli --- */
.pannello-modulo { padding: 28px; margin-top: 8px; }
.campo { margin-bottom: 22px; }
.campo > label {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 6px;
}
.campo input[type="text"],
.campo input[type="date"],
.campo input[type="datetime-local"],
.campo input[type="number"],
.campo input[type="time"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.campo textarea { resize: vertical; min-height: 82px; }
/* Campi che stanno stretti: una quantità a due cifre e un orario non hanno
   bisogno di tutta la riga, e larghi sembrano chiedere altro. */
.campo input[type="number"] { width: 7em; }
.campo input[type="time"] { width: 10em; }
.campo input[type="color"] {
  width: 62px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.campo-aiuto { margin-top: 6px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.campo-errore { margin-top: 6px; font-size: 13px; color: var(--rose-500); font-weight: 500; }
.campo-errato input, .campo-errato textarea { border-color: var(--rose-500); }

.campo-destinatari .scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  user-select: none;
}
.scelta:hover { border-color: var(--primary); }
.scelta input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.scelta:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); }

/* --- caricamento del file --- */
.campo-file {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.campo-file:hover { border-color: var(--primary); background: var(--primary-bg); }
.campo-file-icona {
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--primary);
}
.campo-file-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo-file-testo strong { font-size: 15.5px; overflow-wrap: anywhere; }
.campo-file-testo span { font-size: 13px; color: var(--text-muted); }

/* Il campo nativo è nascosto alla vista ma non rimosso: resta raggiungibile
   da tastiera, e l'etichetta mostra il focus con :focus-within. Due comandi
   visibili per la stessa azione confondevano. */
.campo-file input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.campo-file:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.campo-file-pieno {
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-bg);
}
.campo-file-pieno .campo-file-icona { color: var(--primary); }

/* --- riquadri esplicativi --- */
.pannello-effetto,
.pannello-documento {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.pannello-effetto { background: var(--primary-bg); color: var(--text); }
.pannello-effetto svg { color: var(--primary); flex-shrink: 0; }
.pannello-documento { background: var(--surface-2); border: 1px solid var(--border); }
.pannello-documento svg { color: var(--text-muted); flex-shrink: 0; }
.pannello-documento div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pannello-documento span { font-size: 13px; color: var(--text-muted); }

.pannello-piede {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.pannello-aiuto {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.pannello-aiuto h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.pannello-aiuto ul { margin: 0; padding-left: 18px; }
.pannello-aiuto li { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }
.pannello-aiuto li strong { color: var(--text); }

/* --- avvisi --- */
.avvisi { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.avviso {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  line-height: 1.5;
}
.avviso svg { flex-shrink: 0; margin-top: 1px; }
.avviso-success { background: var(--green-100); color: oklch(0.35 0.10 150); }
.avviso-warning { background: var(--amber-100); color: oklch(0.38 0.12 75); }
.avviso-error   { background: var(--rose-100);  color: oklch(0.40 0.15 20); }
.avviso-info    { background: var(--primary-bg); color: oklch(0.35 0.14 250); }

[data-theme="dark"] .avviso-success { background: oklch(0.25 0.06 150); color: oklch(0.85 0.11 150); }
[data-theme="dark"] .avviso-warning { background: oklch(0.27 0.07 75);  color: oklch(0.87 0.12 75); }
[data-theme="dark"] .avviso-error   { background: oklch(0.27 0.08 20);  color: oklch(0.86 0.11 20); }
[data-theme="dark"] .avviso-info    { background: oklch(0.24 0.06 250); color: oklch(0.86 0.10 250); }

@media (max-width: 720px) {
  .pannello-testata { flex-direction: column; align-items: stretch; }
  .pannello-testata .btn { justify-content: center; }
  .pannello-modulo { padding: 20px 16px; }
  .pannello-azioni { width: 100%; }
  .pannello-azioni .btn { flex: 1; justify-content: center; }
  .pannello-piede .btn { flex: 1 1 100%; justify-content: center; }
}

/* --- Accesso di sviluppo (visibile solo con DEBUG attivo) --------------- */
.auth-sviluppo {
  margin-top: 18px;
  padding: 18px 20px;
  text-align: left;
  border-style: dashed;
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.auth-sviluppo-testata {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.auth-sviluppo form { display: flex; flex-direction: column; gap: 8px; }
.auth-sviluppo input {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.auth-sviluppo input:focus { outline: none; border-color: var(--primary); }
.auth-sviluppo .btn { justify-content: center; }
.auth-sviluppo-errore {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rose-500);
}
/* Rifiuto dell'accesso Google (dominio sbagliato, sessione scaduta): sta
   sopra la card, prima che l'utente riprovi lo stesso pulsante. */
.auth-errore {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--rose-500);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rose-500);
  text-align: left;
}
.auth-sviluppo-nota { margin: 12px 0 0; font-size: 12px; color: var(--text-subtle); line-height: 1.5; }
.auth-sviluppo-nota code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Avvisi stampati a livello di pagina (sopra il contenuto, sotto la topbar). */
.avvisi-pagina { margin: 20px auto 0; }

/* Anno scolastico nella testata di sezione del pannello. */
.pannello-anno {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary);
  letter-spacing: 0.01em;
}

/* --- Orientamento fra le schermate del pannello ------------------------- */
.pannello-indietro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}
.pannello-indietro:hover { color: var(--primary); text-decoration: none; }
/* La freccia del ritorno punta a sinistra: è la stessa icona, ruotata. */
.pannello-indietro svg { transform: rotate(180deg); }
.pannello-indietro-avanti svg { transform: none; }

/* Dove sono nel percorso: due passi, mai di più. */
.pannello-passi {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.passo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
  color: var(--text-subtle);
}
.passo + .passo::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--border-strong);
  margin-right: 2px;
}
.passo-n {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.passo-attuale {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 600;
}
.passo-attuale .passo-n { background: var(--primary); color: #fff; }
.passo-fatto { color: var(--text-muted); }
.passo-fatto .passo-n { background: var(--green-100); color: oklch(0.40 0.11 150); }
[data-theme="dark"] .passo-fatto .passo-n { background: oklch(0.28 0.07 150); color: oklch(0.85 0.11 150); }

/* --- Menu utente -------------------------------------------------------- */
/* Su TUTTI i formati (mobile e desktop) è un drawer laterale destro: la
   lista voci può crescere parecchio (staff con più pannelli), e un dropdown
   che punta al bottone finisce fuori dallo schermo. Il drawer scorre da solo. */
.menu-utente { position: relative; }
.menu-utente-bottone {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.menu-utente-bottone:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Avatar circolare: foto Google se disponibile, altrimenti iniziali su
   sfondo colorato (tinta HSL deterministica dall'username per essere
   riconoscibile a colpo d'occhio, come su Slack/GitHub/etc.). */
.user-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 2px solid transparent;
  transition: border-color .15s, transform .15s;
}
.menu-utente-bottone:hover .user-avatar,
.menu-utente.is-open .user-avatar {
  border-color: var(--primary);
}
.menu-utente-bottone:active .user-avatar { transform: scale(0.96); }

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.user-avatar-iniziali {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--font-sans, inherit);
}

.menu-utente-pannello {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 380px);
  z-index: 50;
  padding: 20px 14px 24px;
  background: var(--surface);
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.32,.72,0,1);
}
/* `hidden` toglierebbe l'elemento e la transizione non partirebbe:
   la visibilità viene governata dalla transform. */
.menu-utente-pannello[hidden] { display: block; }
.menu-utente.is-open .menu-utente-pannello { transform: translateX(0); }

/* Pulsante di chiusura in cima al drawer (il bottone che l'ha aperto è coperto) */
.menu-utente-pannello .drawer-chiudi {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.menu-utente-pannello .drawer-chiudi:hover { color: var(--text); }

/* Con il drawer aperto la pagina sotto non scorre. */
body.drawer-aperto { overflow: hidden; }

.menu-utente-testata {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.menu-utente-info { min-width: 0; flex: 1; }   /* min-width:0 permette il word-break dell'email */

/* Avatar dentro la testata drawer: leggermente più grande del bottone
   in topbar (36px) per bilanciare il blocco nome+email+badge. */
.user-avatar-lg {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.user-avatar-lg .user-avatar-iniziali { font-size: 18px; }
.menu-utente-chi { font-weight: 600; font-size: 14.5px; }
.menu-utente-mail {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.menu-utente-ruolo {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary);
}

.menu-utente-voce,
.menu-utente-esci button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-utente-voce:hover,
.menu-utente-esci button:hover { background: var(--surface-2); text-decoration: none; }
.menu-utente-icona { color: var(--text-muted); display: grid; place-items: center; flex-shrink: 0; }
.menu-utente-voce:hover .menu-utente-icona { color: var(--primary); }
.menu-utente-testo { display: flex; flex-direction: column; gap: 1px; }
.menu-utente-nota { font-size: 12px; color: var(--text-muted); }

/* Separatore + etichetta tra "consultazione" e "gestione" nel menu utente.
   Non è un semplice hr: un piccolo cappello discreto rende evidente che le
   voci sotto sono di un altro tipo (i pannelli di redazione), senza dover
   ripetere «Gestione» in ogni etichetta. */
.menu-utente-gruppo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 4px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.menu-utente-gruppo-etichetta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.menu-utente-esci {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.menu-utente-esci button:hover { color: var(--rose-500); }
.menu-utente-esci button:hover .menu-utente-icona { color: var(--rose-500); }

/* .menu-utente-nome era il nome accanto al bottone: ora rimosso (l'avatar
   circolare comunica già "menu utente" senza etichetta, pattern universale
   di Google/GitHub/Slack). Regola rimossa. */

/* --- Conferma di eliminazione ------------------------------------------ */
.elimina-riepilogo {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.elimina-titolo { font-size: 17px; font-weight: 600; margin-top: 6px; line-height: 1.35; }
.elimina-riepilogo .circ-destinatari { margin-top: 12px; }

/* L'unico pulsante rosso del pannello: l'unica azione che non si disfa. */
.btn-elimina { background: var(--rose-500); color: #fff; }
.btn-elimina:hover { background: oklch(0.55 0.19 20); color: #fff; }

/* Azione irreversibile, staccata dal resto del modulo. */
.pannello-pericolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.pannello-pericolo div { display: flex; flex-direction: column; gap: 2px; }
.pannello-pericolo strong { font-size: 14.5px; }
.pannello-pericolo span { font-size: 13px; color: var(--text-muted); }

/* ============================================================
   21. Drawer — velo condiviso + menu del sito su mobile
   Il velo è sempre disponibile (per il menu utente drawer, che è tale su
   ogni schermo). Il menu del sito diventa drawer solo sotto gli 860px:
   più su ha righe orizzontali nella topbar.
   ============================================================ */
.velo-drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: oklch(0.15 0.02 250 / .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.velo-drawer.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 860px) {
  /* --- menu del sito: entra da sinistra --- */
  .topbar-nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 320px);
    z-index: 50;
    display: flex;             /* niente display:none: si anima */
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 76px 14px 24px;
    background: var(--surface);
    border-bottom: 0;
    border-right: 1px solid var(--border);
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.32,.72,0,1), visibility .26s;
  }
  .topbar-nav.is-open { transform: translateX(0); visibility: visible; }
  .topbar-nav a { padding: 13px 14px; font-size: 15.5px; border-radius: var(--r-md); }

  /* Chiusura in cima al drawer del menu principale */
  .topbar-nav .drawer-chiudi {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
  }
  .topbar-nav .drawer-chiudi:hover { color: var(--text); }

  /* Voci del menu utente più grandi al tocco */
  .menu-utente-voce,
  .menu-utente-esci button { padding: 13px 12px; font-size: 15px; }
}

@media (min-width: 861px) {
  /* Sopra 860px il drawer-chiudi del MENU PRINCIPALE non serve (nav orizzontale).
     Quello del menu UTENTE resta visibile (drawer sempre). */
  .topbar-nav .drawer-chiudi { display: none; }
}

/* --- Righe del pannello su schermo stretto ------------------------------ */
.circ-item-dest { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

@media (max-width: 760px) {
  /* In colonna ogni figlio diventa una riga: perciò i badge stanno in un
     contenitore loro e i pulsanti in un altro, altrimenti si sgranano uno
     per riga e la scheda diventa illeggibile. */
  .circ-item-riga {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }
  /* L'icona non porta informazione: su mobile è solo spazio tolto al titolo. */
  .circ-item-riga .circ-item-icon { display: none; }
  .circ-item-riga .circ-item-body { width: 100%; }
  .circ-item-riga .circ-item-title { font-size: 15.5px; line-height: 1.35; }

  .pannello-azioni {
    width: 100%;
    display: flex;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
  }
  /* Solo l'azione principale si allarga: le altre restano compatte, così
     "Elimina" non ha la stessa forza visiva di "Modifica". */
  .pannello-azioni > .btn:first-child,
  .pannello-azioni > form:first-child .btn { flex: 1; justify-content: center; }
  .pannello-azioni form { margin: 0; }
  .pannello-azioni .btn { padding: 9px 14px; }
}

/* --- Pulsanti d'azione con icona ---------------------------------------- */
.btn-icona { gap: 7px; padding-left: 12px; padding-right: 14px; }
.btn-icona svg { flex-shrink: 0; opacity: .85; }
.btn-icona:hover svg { opacity: 1; }
/* Il cestino si tinge solo al passaggio: presente ma non urlato. */
.btn-icona-elimina:hover { color: var(--rose-500); }
.btn-icona-elimina:hover svg { color: var(--rose-500); }

/* Etichette dei pulsanti d'azione (Modifica/Ritira/Elimina/Riprendi):
   forzo color esplicito. axe DevTools segnalava #666666 su fondo dark
   (contrasto 3.47:1 < AA 4.5:1) per 89 span in /circolari/gestione/,
   probabilmente per una cascade che overridava var(--text). Fissare
   var(--text) qui garantisce contrasto sufficiente in entrambi i temi. */
.pannello-azioni .btn,
.pannello-azioni .btn span {
  color: var(--text);
}
/* Il cestino stays subtle finché non è in hover: mantengo il testo
   pieno-contrasto, ma solo l'icona SVG è opacità .85. */
.pannello-azioni .btn-icona-elimina,
.pannello-azioni .btn-icona-elimina span { color: var(--text); }

@media (max-width: 900px) {
  /* Sotto una certa larghezza restano le sole icone: il titolo della
     circolare vale più delle etichette dei pulsanti. Il testo resta per i
     lettori di schermo e come suggerimento (title). */
  .btn-icona span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .btn-icona { padding: 8px 10px; }
}

@media (max-width: 760px) {
  /* Su mobile le etichette tornano: lì lo spazio in larghezza c'è, ed è
     meglio leggere "Elimina" che indovinare un cestino. */
  .btn-icona span { position: static; width: auto; height: auto; clip: auto; }
  .btn-icona { padding: 9px 14px; }
}

/* --- Righe del pannello su mobile: correzioni ---------------------------- */
@media (max-width: 760px) {
  /* I badge ereditavano `margin-left: 48px` dalle regole mobile dell'elenco
     pubblico, dove servivano ad allinearsi sotto l'icona da 48px. Qui
     l'icona non c'è, quindi restava solo un rientro senza motivo. */
  .circ-item-dest { margin: 0; }
  .circ-item-dest .circ-cat { order: 0; margin: 0; }

  /* Le tre azioni come una barra sola: stessa forma e stesso peso, perché
     sono tre alternative allo stesso livello. Prima "Modifica" era un
     pulsante pieno e le altre due testo nudo, e la riga sembrava sbilenca. */
  .pannello-azioni {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 2px;
    padding-top: 12px;
  }
  .pannello-azioni > .btn,
  .pannello-azioni > form > .btn {
    width: 100%;
    justify-content: center;
    padding: 10px 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
  }
  .pannello-azioni > .btn:first-child { flex: none; }
  .pannello-azioni .btn-primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
  .pannello-azioni .btn-icona-elimina { color: var(--rose-500); border-color: color-mix(in oklch, var(--rose-500) 35%, transparent); }
  .pannello-azioni .btn-icona-elimina svg { color: var(--rose-500); }

  /* Solo due azioni (le bozze): niente terza colonna vuota. */
  .pannello-azioni:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }

  .circ-item-riga { gap: 10px; }
  .circ-item-riga .circ-item-body { margin: 0; }
}

/* Il pannello è una superficie di lavoro, non una pagina da leggere: i 56px
   di `.section` in cima erano spazio vuoto fra la barra e il contenuto. */
.section-pannello { padding-top: 20px; }
@media (max-width: 760px) { .section-pannello { padding-top: 14px; } }

/* --- Testata del drawer del menu principale ----------------------------- */
.drawer-testata { display: none; }

@media (max-width: 860px) {
  /* Il drawer copre la barra: senza il marchio in cima si perde il
     riferimento di dove si è. La chiusura sta accanto, non isolata. */
  .drawer-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
  }
  .drawer-brand:hover { text-decoration: none; }
  .drawer-brand .brand-mark {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    flex-shrink: 0;
    color: var(--primary);
  }
  .drawer-brand .brand-mark svg { width: 100%; height: 100%; }
  .drawer-brand-testo { display: flex; flex-direction: column; min-width: 0; }
  .drawer-brand-nome { font-weight: 600; font-size: 14.5px; line-height: 1.2; }
  .drawer-brand-sub { font-size: 12px; color: var(--text-muted); }

  /* La testata è nel flusso: niente più padding-top per far posto a un
     pulsante in posizione assoluta. */
  .topbar-nav { padding-top: 16px; }
  .drawer-chiudi { position: static; flex-shrink: 0; }
}

/* --- Correzione del contesto di impilamento ------------------------------
   `.topbar` è `sticky`, e un elemento sticky **crea un contesto di
   impilamento**: i drawer che stanno dentro non possono salire sopra il velo,
   che vive a livello di documento, per quanto alto sia il loro z-index. Senza
   correzione il velo li copriva e li lasciava grigi.

   La barra viene quindi alzata sopra il velo (45 > 40) e con lei i pannelli
   che contiene. Ma così restavano illuminati e cliccabili anche logo e voci
   di menu, in mezzo a una pagina oscurata: il velo sembrava non riguardarli.

   Non si può risolvere con lo z-index — nessun figlio esce dal contesto del
   padre — e togliere `sticky` mentre il drawer è aperto farebbe saltare la
   barra in cima se la pagina è scrollata. Si porta invece il velo *dentro* la
   barra: un secondo velo, stessa tinta, che copre solo lei e resta sotto ai
   pannelli (1 < 50). Intercetta anche i clic, quindi le voci sotto non si
   premono per sbaglio — e un clic lì chiude il menu, come cliccare sul velo
   grande, perché per il gestore «clic fuori» quello è fuori. */
body.drawer-aperto .topbar { z-index: 45; }
body.drawer-aperto .topbar::after {
  content: "";
  position: absolute;
  /* `inset: 0` si ferma alla padding box, e il bordo inferiore della barra
     sta fuori da quella: restava una rigatura chiara larga un pixel sotto la
     testata oscurata. Il velo scende di quel pixel e se la mangia. */
  inset: 0 0 -1px 0;
  z-index: 1;
  background: oklch(0.15 0.02 250 / .5);
}

/* --- Contatti in fondo al menu ------------------------------------------ */
.drawer-contatti { display: none; }

@media (max-width: 860px) {
  /* Su telefono i recapiti valgono più di una voce di menu: il numero si
     tocca e parte la chiamata. Stanno in fondo perché si cercano, non si
     incontrano per caso. */
  /* Tre azioni invece di quattro righe di testo: chiamare, scrivere,
     aprire la mappa. Su telefono sono le uniche cose che uno fa davvero
     con un recapito, e in questa forma occupano una riga sola. */
  .drawer-contatti {
    display: block;   /* la regola fuori dalla media query lo nasconde */
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .drawer-contatti-titolo {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
    padding: 0 4px 8px;
  }
  .drawer-contatti-azioni { display: flex; gap: 8px; }
  .drawer-azione {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
  }
  .drawer-azione svg { color: var(--primary); }
  .drawer-azione:active,
  .drawer-azione:hover {
    text-decoration: none;
    border-color: var(--primary);
    background: var(--primary-bg);
  }
}

/* --- Icone delle voci di menu ------------------------------------------- */
/* Sulla barra orizzontale le icone sarebbero rumore: lo spazio è poco e le
   voci si leggono comunque. Nel drawer, dove sono incolonnate, aiutano a
   trovarle senza rileggere ogni etichetta. */
.nav-icona { display: none; }

@media (max-width: 860px) {
  .topbar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .nav-icona { display: block; flex-shrink: 0; color: var(--text-subtle); }
  .topbar-nav a:hover .nav-icona { color: var(--primary); }
  .topbar-nav a.active .nav-icona { color: var(--primary); }
  /* La testata non è una voce: non deve ereditare la disposizione. */
  .topbar-nav .drawer-testata { display: flex; }
}

/* ============================================================
   22. Progetti
   ============================================================ */
.indirizzo-hero-text { min-width: 0; }
.progetto-page .indirizzo-hero-image { border-radius: var(--r-lg); min-height: 280px; }

/* Galleria: colonne che si adattano senza punti d'interruzione, e immagini
   ritagliate a rapporto fisso perché una fila di foto di altezze diverse è
   il modo più rapido per far sembrare disordinata una pagina ordinata. */
.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.galleria-scatto {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  line-height: 0;
}
.galleria-scatto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s var(--ease, cubic-bezier(.165,.84,.44,1));
}
.galleria-scatto:hover img { transform: scale(1.04); }
.galleria-scatto:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.progetto-page .lab-card h3 { margin: 0; font-size: 15px; }
.progetto-page .career-card p { margin: 0; }

@media (max-width: 720px) {
  .galleria { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ============================================================
   23. Portale della gestione e permessi
   ============================================================ */
.portale-griglia { display: grid; gap: 12px; }
.portale-riquadro {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  text-decoration: none;
  color: var(--text);
}
.portale-riquadro:hover { text-decoration: none; }
.portale-icona {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--primary-bg);
  color: var(--primary);
}
.portale-testo { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.portale-testo strong { font-size: 16px; }
.portale-testo span { font-size: 13.5px; color: var(--text-muted); }

/* --- Chi può gestire cosa ---
   Era una matrice persone × aree. Con dieci aree — e cresceranno — le colonne
   non entravano nei 1136px del contenitore: la colonna dei nomi si schiacciava
   a zero e le email andavano a capo una lettera per riga. Una griglia che si
   allarga a ogni area nuova è la forma sbagliata per questo dato.
   Ora è un elenco di persone; gli incarichi si spostano uno alla volta in un
   modale a due colonne, che di larghezza ne chiede sempre la stessa. */
.permessi-elenco { padding: 0; overflow: hidden; }
.permessi-riga {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.permessi-riga:last-child { border-bottom: 0; }
.permessi-riga:hover { background: var(--surface-2); }
.permessi-persona { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.permessi-persona strong { font-size: 14.5px; }
.permessi-persona span { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }

.permessi-incarichi { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.permessi-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.permessi-nessuno { font-size: 12.5px; color: var(--text-subtle); font-style: italic; }

/* --- il modale --- */
.permessi-modale {
  width: min(760px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
}
.permessi-modale::backdrop { background: rgba(0, 0, 0, .45); }
.permessi-modale-testata {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 20px 12px;
}
.permessi-modale-testata h2 { font-size: 20px; margin: 0; }
.permessi-colonne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 8px 20px 4px;
}
.permessi-colonna-lista h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 8px;
}
.permessi-lista {
  list-style: none; margin: 0; padding: 6px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 180px;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.permessi-lista-vuota {
  padding: 12px; font-size: 12.5px; color: var(--text-subtle);
  font-style: italic; text-align: center;
}
.permessi-voce {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.permessi-voce:hover { border-color: var(--primary); background: var(--primary-bg); }
.permessi-voce-testo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.permessi-voce-testo strong { font-size: 13.5px; }
.permessi-voce-testo span { font-size: 12px; color: var(--text-muted); }
.permessi-voce-segno {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 15px; font-weight: 700; line-height: 1;
}
.permessi-voce:hover .permessi-voce-segno { background: var(--primary); color: #fff; }
.permessi-modale-piede {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 20px 20px;
}

@media (max-width: 720px) {
  .permessi-riga {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }
  /* Il pulsante a tutta larghezza: su telefono un bersaglio piccolo in fondo
     alla scheda si manca. */
  .permessi-riga .permessi-modifica { justify-content: center; width: 100%; }
  /* Una colonna sotto l'altra, con le etichette che dicono quale è quale. */
  .permessi-colonne { grid-template-columns: 1fr; }
  .permessi-lista { min-height: 0; max-height: 32vh; }
}

/* Le schede sono link interi: la sottolineatura al passaggio, pensata per i
   link nel testo, qui sottolinea titolo e descrizione insieme. */
a.card,
a.card:hover,
a.card:focus,
a.card *,
.project-card *,
.portale-riquadro * { text-decoration: none; }
a.card:hover .project-title,
a.card:hover .news-title { color: var(--primary); }

/* Elenco di blocchi (obiettivi di un progetto): una voce per riga, senza
   che la resa dipenda dal markup del contenuto importato. */
.elenco-blocchi { margin: 8px 0 0; padding-left: 22px; }
.elenco-blocchi li {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.elenco-blocchi li::marker { color: var(--primary); }

/* --- Blocchi di testo ---------------------------------------------------
   Un muro di paragrafi non lo legge nessuno. Spezzato in tessere con un
   contorno si scorre a colpo d'occhio, e chi vuole approfondire si ferma
   su quella che gli interessa. */
.blocco-apertura {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 68ch;
  margin-bottom: 20px;
  text-wrap: pretty;
}
.blocchi {
  display: grid;
  /* Due colonne, non "quante ne stanno": con auto-fit su schermo largo
     diventavano quattro colonne strettissime, e su contenuti lunghi una sola
     tessera altissima accanto a una vuota. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin-top: 8px;
}
.blocco {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}

.blocchi-gruppo + .blocchi-gruppo { margin-top: 20px; }
.blocchi-etichetta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 8px;
}
.blocchi-numerati .blocco { padding-left: 50px; position: relative; }
.blocco-numero {
  position: absolute;
  left: 14px; top: 13px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: oklch(0.12 0.01 250 / .92);
}
.lightbox[hidden] { display: none; }
body.lightbox-aperta { overflow: hidden; }

.lightbox-corpo {
  margin: 0;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox-corpo img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  border-radius: var(--r-md);
  background: oklch(0.2 0 0);
}
.lightbox-corpo figcaption {
  font-size: 13px;
  color: oklch(0.8 0 0);
  font-variant-numeric: tabular-nums;
}

.lightbox-chiudi,
.lightbox-freccia {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: oklch(1 0 0 / .12);
  color: #fff;
  cursor: pointer;
}
.lightbox-chiudi:hover,
.lightbox-freccia:hover { background: oklch(1 0 0 / .24); }
.lightbox-chiudi { position: absolute; top: 20px; right: 20px; }
.lightbox-prec svg { transform: rotate(180deg); }

@media (max-width: 720px) {
  .lightbox { padding: 12px; }
  .lightbox-freccia { position: absolute; bottom: 20px; }
  .lightbox-prec { left: 24px; }
  .lightbox-succ { right: 24px; }
  .lightbox-corpo img { max-height: 70vh; }
  .blocchi { grid-template-columns: 1fr; }
}

/* Elenco degli obiettivi: righe brevi, senza cornice. Incorniciare una riga
   la fa sembrare più importante di quel che è. */
.elenco-obiettivi { margin: 10px 0 0; padding-left: 20px; max-width: 72ch; }
.elenco-obiettivi li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-left: 4px;
}
.elenco-obiettivi li::marker { color: var(--primary); }
.progetto-page .career-card p { margin: 0 0 8px; }
.progetto-page .career-card p:last-child { margin-bottom: 0; }

/* --- Foto nel pannello progetti ----------------------------------------- */
.foto-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.foto-tessera {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  line-height: 0;
}
.foto-tessera img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-togli {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: oklch(0.15 0.01 250 / .62);
  color: #fff;
  cursor: pointer;
}
.foto-togli:hover { background: var(--rose-500); }
/* Non basta il primo posto per capire che è la copertina: va detto. */
.foto-copertina {
  position: absolute;
  left: 6px; bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* --- Editor di testo (Quill) -------------------------------------------- */
/* La textarea resta nel modulo — è quella che viene inviata — ma non si vede:
   `display:none` la toglierebbe anche dalla validazione del browser. */
.editor-sorgente {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.editor {
  border: 1px solid var(--border-strong);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--surface);
  min-height: 150px;
  font-family: var(--font-sans);
  font-size: 15px;
}
.ql-toolbar.ql-snow {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--surface-2);
  padding: 7px 8px;
}
.ql-container.ql-snow { border: 0; font-family: inherit; font-size: inherit; }
.ql-editor { min-height: 130px; padding: 13px; line-height: 1.6; color: var(--text); }
.ql-editor.ql-blank::before { color: var(--text-subtle); font-style: normal; left: 13px; }
.ql-editor p { margin-bottom: 10px; }
.ql-editor ul, .ql-editor ol { padding-left: 20px; }

/* Icone e menu del tema Quill riportati ai colori del sito, altrimenti
   restano quelli predefiniti e stonano col resto del pannello. */
.ql-snow .ql-stroke { stroke: var(--text-muted); }
.ql-snow .ql-fill { fill: var(--text-muted); }
.ql-snow .ql-picker { color: var(--text-muted); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--primary); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--primary); }
.ql-snow.ql-toolbar button:hover { background: var(--surface-3); border-radius: 4px; }
.ql-snow .ql-tooltip {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-sm);
  color: var(--text);
}
.ql-snow .ql-tooltip input[type=text] {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  border-radius: 4px;
}

/* --- Pannello notizie ---------------------------------------------------- */
.notizia-miniatura {
  width: 52px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  color: var(--text-subtle);
}
.notizia-miniatura img { width: 100%; height: 100%; object-fit: cover; }

.copertina-attuale {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.copertina-attuale img {
  width: 120px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.copertina-attuale span { font-size: 13px; color: var(--text-muted); }

@media (max-width: 760px) {
  .circ-item-riga .notizia-miniatura { display: none; }
}

/* ============================================================
   24. Prenotazioni — aule e portatili
   Tre schermate: mese, giorno, conferma. La griglia del giorno è
   una tabella oraria vera (ore in riga, risorse in colonna) e su
   schermo stretto scorre in orizzontale tenendo ferma la colonna
   dell'ora: senza quella non si capisce più cosa si sta guardando.
   ============================================================ */
.section-prenota { padding-top: 28px; }

.pren-testata {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.pren-testata h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.pren-testata-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* -- barra: cosa prenoto, e a che piano ---------------------- */
.pren-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 18px;
}
.pren-sezioni {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.pren-sezione {
  padding: 8px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.pren-sezione:hover { color: var(--text); background: var(--surface-3); }
.pren-sezione.attiva {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}

.pren-zone { display: flex; flex-wrap: wrap; gap: 6px; }
.pren-zona {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.pren-zona:hover { color: var(--text); border-color: var(--border-strong); }
.pren-zona.attiva {
  color: var(--text);
  border-color: var(--primary);
  background: var(--primary-bg);
}
.pren-pallino {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}

.pren-calendario { padding: 20px; }
.pren-navmese {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.pren-navmese h2 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.pren-navmese-bottoni { display: flex; gap: 6px; }
.pren-navmese-bottoni .btn { padding: 7px 12px; }

/* -- mese ---------------------------------------------------- */
.pren-griglia-mese {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pren-intestazione-giorno {
  background: var(--surface-2);
  padding: 9px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pren-giorno {
  background: var(--surface);
  min-height: 104px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pren-giorno.fuori { background: var(--surface-2); }
.pren-giorno.fuori .pren-giorno-numero { color: var(--text-subtle); }
.pren-giorno.chiuso { background: var(--surface-2); }
.pren-giorno-numero {
  align-self: flex-end;
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
a.pren-giorno-numero:hover { background: var(--primary-bg); color: var(--primary); }
.pren-giorno.oggi .pren-giorno-numero {
  background: var(--primary);
  color: var(--on-primary);
}
.pren-voci { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.pren-voce {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 11.5px;
  line-height: 1.3;
  min-width: 0;
}
.pren-voce.mia { background: var(--primary-bg); }
.pren-voce-ora { font-weight: 700; color: var(--text-muted); flex: 0 0 auto; }
.pren-voce-testo {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pren-voce-altre { font-size: 11px; color: var(--text-subtle); padding-left: 5px; }

.pren-nota {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* -- giorno: tabella oraria ---------------------------------- */
.pren-scorri {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pren-tabella {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 520px;
}
.pren-tabella th,
.pren-tabella td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px;
  vertical-align: top;
  text-align: left;
}
.pren-tabella tr:last-child th,
.pren-tabella tr:last-child td { border-bottom: 0; }
.pren-tabella th:last-child,
.pren-tabella td:last-child { border-right: 0; }
.pren-tabella thead th {
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.pren-tabella thead th small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.pren-col-ora {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-2);
  min-width: 74px;
  white-space: nowrap;
}
.pren-col-ora strong { display: block; font-size: 14px; }
.pren-col-ora small { font-size: 11.5px; color: var(--text-muted); }

.pren-cella { min-width: 132px; background: var(--surface); }
.pren-cella.mia { background: var(--primary-bg); }
.pren-occupata {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 7px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 12.5px;
  margin-bottom: 4px;
}
.pren-occupata strong { font-size: 13px; }
.pren-occupata span { color: var(--text-muted); }
.pren-occupata em { color: var(--text-subtle); font-size: 11.5px; font-style: normal; }

.pren-prendi {
  display: block;
  padding: 7px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.pren-prendi:hover {
  background: var(--primary-bg);
  border-color: var(--primary);
  border-style: solid;
}
.pren-libera { font-size: 12px; color: var(--text-muted); }
.pren-esaurito {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-subtle);
}
.pren-chiusa { color: var(--text-subtle); }

/* Stato vuoto (nato per il pannello prenotazioni, ora usato anche in
   libri di testo e altrove come "empty state"). Un box tratteggiato con
   icona e messaggio al centro segnala chiaramente che non c'è ancora
   nulla senza sembrare un errore. */
.pren-vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  margin: 20px 0;
  text-align: center;
  color: var(--text-muted);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-lg);
  background: transparent;
}
.pren-vuoto svg {
  color: var(--text-subtle);
  margin: 0;                        /* niente margin-bottom: il gap del flex basta */
}
.pren-vuoto p {
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

/* -- conferma ------------------------------------------------ */
.pren-riepilogo { padding: 18px 20px; margin-bottom: 16px; }
.pren-riepilogo-riga {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.pren-riepilogo-riga:last-child { border-bottom: 0; }
.pren-riepilogo-etichetta {
  flex: 0 0 96px;
  font-size: 13px;
  color: var(--text-muted);
}
.pren-riepilogo-riga strong { display: inline-flex; align-items: center; gap: 7px; }

/* -- le mie prenotazioni ------------------------------------- */
.pren-sottotitolo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 26px 0 10px;
}
.pren-elenco { padding: 4px 0; }
.pren-riga {
  display: grid;
  grid-template-columns: 148px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.pren-riga:last-child { border-bottom: 0; }
.pren-riga-quando strong { display: block; font-size: 15px; text-transform: capitalize; }
.pren-riga-quando span { font-size: 12.5px; color: var(--text-muted); }
.pren-riga-cosa { min-width: 0; }
.pren-riga-cosa strong { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.pren-riga-cosa span { font-size: 13px; color: var(--text-muted); }
.pren-elenco-passate .pren-riga { opacity: .62; }

/* -- gestione ------------------------------------------------ */
.gest-colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.gest-blocco { padding: 18px 20px; margin-bottom: 16px; }
.gest-testata {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.gest-testata h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.gest-testata p {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
  text-wrap: pretty;
}
.gest-riga {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.gest-riga:last-child { border-bottom: 0; }
a.gest-riga:hover { background: var(--surface-2); }
.gest-riga.spenta { opacity: .55; }
.gest-riga-nome { flex: 1; min-width: 0; }
.gest-riga-nome strong { display: block; font-size: 14.5px; }
.gest-riga-nome span { font-size: 12.5px; color: var(--text-muted); }
.gest-riga > svg { color: var(--text-subtle); flex: 0 0 auto; }
.gest-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--surface-3);
  color: var(--text-muted);
}
.gest-vuoto {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  text-wrap: pretty;
}

.gest-chip-riga { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.gest-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s ease;
}
.gest-chip:hover { border-color: var(--primary); }
.gest-chip strong { font-size: 14px; }
.gest-chip span { font-size: 12.5px; color: var(--text-muted); }
.gest-chip em { font-size: 11px; font-style: normal; color: var(--text-subtle); }
.gest-chip.spenta { opacity: .55; border-style: dashed; }

/* La spunta va a sinistra della sua etichetta, non sopra: `.campo` è un
   blocco, quindi qui serve dichiarare il flex, non solo la direzione. */
.campo-spunta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.campo-spunta > label { order: 2; margin-bottom: 0; }
.campo-spunta input[type="checkbox"] {
  order: 1;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}
.campo-spunta .campo-aiuto, .campo-spunta .campo-errore { order: 3; flex: 1 0 100%; margin-top: 0; }

@media (max-width: 720px) {
  .pren-barra { flex-direction: column; align-items: stretch; }
  .pren-sezioni { justify-content: stretch; }
  .pren-sezione { flex: 1; text-align: center; }
  .pren-giorno { min-height: 74px; padding: 4px; }
  .pren-voce-testo { display: none; }
  .pren-voce { justify-content: center; padding: 2px 3px; }
  .pren-riga { grid-template-columns: 1fr auto; }
  .pren-riga-quando { grid-column: 1 / -1; }
  .pren-calendario { padding: 14px; }
}

/* -- plesso: il filtro che viene prima di tutti ---------------- */
.pren-plessi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.pren-plesso {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.pren-plesso:hover { color: var(--text); border-color: var(--border-strong); }
.pren-plesso svg { flex: 0 0 auto; }
.pren-plesso small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-subtle);
}
.pren-plesso.attivo {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}
.pren-plesso.attivo small { color: var(--primary); opacity: .8; }

/* -- ricorrenza ----------------------------------------------- */
.pren-ricorrenza {
  padding: 16px 18px 2px;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.pren-ricorrenza.campo-errato { border-color: var(--rose-500); }
.pren-ricorrenza .campo:last-child { margin-bottom: 16px; }

.pren-tag-serie {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--primary-bg);
  color: var(--primary);
}
.pren-riga-azioni { display: flex; align-items: center; gap: 6px; }

/* -- gestione ------------------------------------------------- */
.gest-plesso {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
}
.gest-riga.statica { cursor: default; }

@media (max-width: 720px) {
  .pren-plessi { flex-direction: column; }
  .pren-plesso { justify-content: flex-start; }
  .pren-riga-azioni { flex-wrap: wrap; justify-content: flex-end; }
}

.svuota-passo {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.svuota-esempi {
  list-style: none;
  margin: 14px 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13px;
  max-height: 220px;
  overflow-y: auto;
}
.svuota-esempi li { padding: 3px 0; color: var(--text-muted); }
.svuota-esempi li strong { color: var(--text); margin-right: 4px; }
.svuota-altre { font-style: italic; }
.campo code {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
}
/* Il collegamento allo svuotamento sta in fondo al blocco delle prenotazioni,
   staccato e in rosso: si trova quando lo si cerca, non quando si passa. */
.gest-svuota {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--rose-500);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.gest-svuota:hover { border-color: var(--rose-500); background: var(--rose-100); }
.gest-svuota > span { flex: 1; min-width: 0; }
.gest-svuota strong { display: block; font-size: 14px; }
.gest-svuota span span { font-size: 12.5px; color: var(--text-muted); }

/* ============================================================
   25. Academy — corsi extracurricolari e registro FSL
   Tre superfici: l'elenco pubblico, il registro del docente e
   l'appello. Quest'ultimo è pensato per il telefono tenuto in
   mano in aula: righe alte, bersagli larghi, nessun dettaglio
   che non serva a dire «c'è» o «non c'è».
   ============================================================ */
.acc-testata {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.acc-testata h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.acc-testata-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-intro {
  margin-top: 8px;
  max-width: 62ch;
  color: var(--text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}
.acc-sottotitolo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 30px 0 12px;
}

/* -- selettore d'anno ----------------------------------------- */
.acc-anni,
.prog-anni { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.acc-anno,
.prog-anno {
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.acc-anno:hover,
.prog-anno:hover { color: var(--text); border-color: var(--border-strong); }
.acc-anno.attivo,
.prog-anno.attivo {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* -- stati ---------------------------------------------------- */
.acc-stato {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--surface-3);
  color: var(--text-muted);
}
.acc-stato-pubblicato { background: var(--green-100); color: #14532d; }
.acc-stato-proposto { background: var(--amber-100); color: #713f12; }
.acc-stato-respinto { background: var(--rose-100); color: #7f1d1d; }
.acc-stato-concluso { background: var(--surface-3); color: var(--text-muted); }
.acc-tag-fsl {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--primary-bg);
  color: var(--primary);
}

/* -- elenco pubblico ------------------------------------------ */
.acc-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.acc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s ease, transform .18s ease;
}
.acc-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.acc-card-alto { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-card h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.acc-card-sommario {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  text-wrap: pretty;
}
.acc-card-dati { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.acc-card-dati > div { display: flex; gap: 10px; font-size: 13.5px; }
.acc-card-dati dt { flex: 0 0 74px; color: var(--text-subtle); }
.acc-card-dati dd { color: var(--text); font-weight: 500; }
.acc-card-piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

/* -- scheda del corso ----------------------------------------- */
.acc-dett-testata { margin-bottom: 18px; }
.acc-dett-testata h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 10px;
  text-wrap: balance;
}
.acc-scheda { padding: 18px 20px; }
.acc-scheda-riga {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.acc-scheda-riga:last-child { border-bottom: 0; }
.acc-scheda-riga > span:first-child {
  flex: 0 0 92px;
  font-size: 13px;
  color: var(--text-muted);
}
.acc-descrizione {
  margin: 22px 0;
  max-width: 68ch;
  line-height: 1.7;
  color: var(--text);
}
.acc-descrizione p { margin-bottom: 14px; }
.acc-descrizione ul { margin: 0 0 14px 20px; }
.acc-descrizione li { margin-bottom: 6px; }

/* -- iscrizione ----------------------------------------------- */
.acc-iscrizione { padding: 20px; margin: 22px 0; }
.acc-iscritto-si {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--text);
}
.acc-iscritto-si svg { color: var(--green-500); flex: 0 0 auto; }
.acc-iscritto-si strong { display: block; font-size: 15px; }
.acc-iscritto-si span { font-size: 13.5px; color: var(--text-muted); }
.acc-iscrizione-invito { margin-bottom: 14px; }
.acc-iscrizione-invito strong { display: block; font-size: 15px; }
.acc-iscrizione-invito span { font-size: 13.5px; color: var(--text-muted); }
.acc-modulo-iscrizione .campo { margin-bottom: 16px; max-width: 220px; }

/* -- calendario delle lezioni --------------------------------- */
.acc-calendario { padding: 4px 0; }
.acc-lezione {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.acc-lezione:last-child { border-bottom: 0; }
.acc-lezione.annullata { opacity: .55; }
.acc-lezione.annullata .acc-lezione-quando strong { text-decoration: line-through; }
.acc-lezione-quando strong { display: block; font-size: 14.5px; text-transform: capitalize; }
.acc-lezione-quando span { font-size: 12.5px; color: var(--text-muted); }
.acc-lezione-cosa { min-width: 0; }
.acc-lezione-cosa strong { display: block; font-size: 14px; }
.acc-lezione-cosa span { font-size: 12.5px; color: var(--text-muted); }
.acc-lezione-ore { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.acc-lezione-azioni { display: flex; gap: 4px; align-items: center; }
.acc-manca { font-style: normal; color: var(--rose-500); font-weight: 600; }
.acc-scorciatoia { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }

/* -- pannello docente ----------------------------------------- */
.acc-oggi, .acc-validare, .acc-promemoria { padding: 18px 20px; margin-bottom: 18px; }
.acc-validare { border-color: var(--amber-500); }
.acc-oggi-titolo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.acc-oggi-titolo h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.acc-oggi-titolo svg { color: var(--primary); }
.acc-oggi-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.acc-oggi-riga:last-child { border-bottom: 0; }
.acc-oggi-riga strong { display: block; font-size: 15px; }
.acc-oggi-riga span { font-size: 13px; color: var(--text-muted); }

.acc-elenco { padding: 4px 0; }
.acc-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.acc-riga:last-child { border-bottom: 0; }
.acc-riga-testo { min-width: 0; }
.acc-riga-alto { display: flex; gap: 6px; margin-bottom: 5px; }
.acc-riga-testo > strong { display: block; font-size: 15.5px; }
.acc-riga-testo > span { font-size: 13px; color: var(--text-muted); }
.acc-nota-respinta {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--rose-500);
}
.acc-riga-azioni { display: flex; gap: 6px; flex: 0 0 auto; }

/* -- percorso di validazione ---------------------------------- */
.acc-percorso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.acc-percorso strong { display: block; font-size: 15.5px; }
.acc-percorso > div > span { font-size: 13.5px; color: var(--text-muted); text-wrap: pretty; }
.acc-percorso-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-rimanda { padding: 18px 20px; margin-bottom: 18px; }
.acc-rimanda strong { font-size: 15px; }
.acc-rimanda p { font-size: 13.5px; color: var(--text-muted); margin: 4px 0 14px; }
.acc-rimanda textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.acc-nuova-lezione h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.acc-riga-campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 14px;
}

/* -- appello --------------------------------------------------- */
.acc-appello { padding: 0; overflow: hidden; }
.acc-appello-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.acc-appello-testata strong { display: block; font-size: 15px; }
.acc-appello-testata span { font-size: 13px; color: var(--text-muted); }
.acc-appello-scorciatoie { display: flex; gap: 6px; }
.acc-appello-lista { list-style: none; }
.acc-appello-riga {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .14s ease;
}
.acc-appello-riga:hover { background: var(--surface-2); }
.acc-appello-riga input { position: absolute; opacity: 0; pointer-events: none; }
.acc-appello-nome { flex: 1; min-width: 0; }
.acc-appello-nome strong { display: block; font-size: 15.5px; }
.acc-appello-nome span { font-size: 13px; color: var(--text-muted); }
/* Il segno di presenza è grande e pieno: si deve leggere con un'occhiata
   mentre si scorre la lista in piedi, non guardando da vicino. */
.acc-appello-segno {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  color: transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.acc-appello-riga input:checked ~ .acc-appello-segno {
  background: var(--green-500);
  border-color: var(--green-500);
  color: #fff;
}
.acc-appello-riga:has(input:not(:checked)) { background: var(--rose-100); }
.acc-appello-riga input:focus-visible ~ .acc-appello-segno {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.acc-appello-piede { padding: 16px 18px; }

/* -- registro -------------------------------------------------- */
.acc-registro .acc-col-lezione { text-align: center; min-width: 52px; }
.acc-registro .acc-col-lezione span { display: block; font-size: 12.5px; }
.acc-registro .acc-col-lezione small { font-weight: 500; color: var(--text-muted); }
.acc-registro .acc-col-lezione.annullata { opacity: .5; }
.acc-cella-presenza { text-align: center; vertical-align: middle; }
.acc-registro .acc-col-ore { text-align: right; min-width: 66px; }
.acc-registro .acc-col-ore strong { display: block; font-size: 14px; }
.acc-registro .acc-col-ore small { font-size: 11.5px; color: var(--text-muted); }
.acc-ritirato { opacity: .6; }
.acc-p-si, .acc-p-no, .acc-p-vuota, .acc-p-ann {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.acc-p-si { background: var(--green-100); color: #14532d; }
.acc-p-no { background: var(--rose-100); color: #7f1d1d; }
.acc-p-vuota { color: var(--text-subtle); }
.acc-p-ann { color: var(--text-subtle); }
.acc-legenda {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

/* -- promemoria e feed ----------------------------------------- */
.acc-promemoria-riga {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.acc-promemoria-riga:last-of-type { border-bottom: 0; }
.acc-promemoria-quando { flex: 0 0 118px; }
.acc-promemoria-quando strong { display: block; font-size: 14.5px; text-transform: capitalize; }
.acc-promemoria-quando span { font-size: 12.5px; color: var(--text-muted); }
.acc-promemoria-cosa { min-width: 0; }
.acc-promemoria-cosa strong { display: block; font-size: 14.5px; }
.acc-promemoria-cosa span { font-size: 12.5px; color: var(--text-muted); }
.acc-promemoria .btn { margin-top: 14px; }

.acc-feed { padding: 18px 20px; margin-bottom: 22px; }
.acc-feed strong { font-size: 15px; }
.acc-feed p {
  margin: 5px 0 14px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}
.acc-feed-indirizzo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.acc-feed-indirizzo input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.acc-feed-nota { font-size: 12.5px; color: var(--text-subtle); margin-left: 8px; }

/* -- i miei corsi ---------------------------------------------- */
.acc-anno-blocco { margin-bottom: 28px; }
.acc-anno-testata {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.acc-anno-testata h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.acc-ore-totali { text-align: right; }
.acc-ore-totali strong { font-size: 22px; font-weight: 700; color: var(--primary); }
.acc-ore-totali span { display: block; font-size: 12px; color: var(--text-muted); }
.acc-riga-corso { grid-template-columns: 1fr 220px; }
/* Due figli, non tre: senza questo il nome finisce nella colonna
   stretta della data e il bottone si infila in mezzo al testo. */
.acc-riga-iscritto { grid-template-columns: 1fr auto; }
.acc-progresso { text-align: right; }
.acc-progresso > span { font-size: 12.5px; color: var(--text-muted); }
.acc-barra {
  height: 6px;
  border-radius: 100px;
  background: var(--surface-3);
  overflow: hidden;
  margin-bottom: 5px;
}
.acc-barra span { display: block; height: 100%; background: var(--primary); }

@media (max-width: 720px) {
  .acc-lezione { grid-template-columns: 1fr auto; }
  .acc-lezione-quando { grid-column: 1 / -1; }
  .acc-riga { flex-direction: column; align-items: stretch; }
  .acc-riga-azioni { justify-content: flex-end; }
  .acc-riga-corso { grid-template-columns: 1fr; }
  .acc-progresso { text-align: left; }
  .acc-percorso { flex-direction: column; align-items: stretch; }
  .acc-appello-riga { padding: 16px 14px; }
}

/* -- soglia minima e scadenza --------------------------------- */
.acc-stato-confermato { background: var(--green-100); color: #14532d; }
.acc-stato-annullato { background: var(--rose-100); color: #7f1d1d; }

/* La barra dice a colpo d'occhio quanto manca perché il corso parta: è
   l'informazione che spinge uno studente a parlarne a un compagno. */
.acc-soglia { padding: 16px 20px; margin: 18px 0; }
.acc-soglia-testo strong { display: block; font-size: 15.5px; }
.acc-soglia-testo span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  text-wrap: pretty;
}
.acc-soglia-barra {
  height: 8px;
  margin-top: 12px;
  border-radius: 100px;
  background: var(--surface-3);
  overflow: hidden;
}
.acc-soglia-barra span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: var(--primary);
  transition: width .3s ease;
}
.acc-confermato { margin: 18px 0; }

/* ============================================================
   26. Ricerca, eventi, indirizzi di studio
   Le tre superfici che chiudevano i vicoli ciechi del sito: la
   ricerca in cima a ogni pagina, gli eventi e le schede degli
   indirizzi collegate dalla home.
   ============================================================ */

/* -- ricerca --------------------------------------------------- */
.ric-testata { margin-bottom: 26px; }
.ric-testata h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.ric-modulo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.ric-modulo:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.ric-icona { color: var(--text-subtle); flex: 0 0 auto; }
.ric-modulo input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  padding: 8px 0;
}
.ric-modulo input:focus { outline: none; }
.ric-conteggio { margin-bottom: 22px; color: var(--text-muted); font-size: 15px; }

.ric-gruppo { margin-bottom: 30px; }
.ric-gruppo-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ric-gruppo-testata h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ric-gruppo-testata h2 svg { color: var(--primary); }
.ric-gruppo-testata > span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 2px 9px;
  border-radius: 100px;
}
.ric-elenco { padding: 4px 0; }
.ric-voce {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background .14s ease;
}
.ric-voce:last-child { border-bottom: 0; }
.ric-voce:hover { background: var(--surface-2); }
.ric-voce-testo { flex: 1; min-width: 0; }
.ric-voce-testo > strong { display: block; font-size: 15.5px; }
.ric-voce-testo > span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.ric-etichette { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ric-etichette em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--primary-bg);
  color: var(--primary);
}
.ric-voce-data {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--text-subtle);
  white-space: nowrap;
}
.ric-voce > svg { color: var(--text-subtle); flex: 0 0 auto; }
.ric-altri { margin-top: 8px; font-size: 13.5px; color: var(--text-muted); }
.ric-suggerimento { color: var(--text-muted); line-height: 1.7; text-wrap: pretty; }

/* -- eventi ---------------------------------------------------- */
.ev-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.ev-card {
  display: flex;
  gap: 16px;
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s ease, transform .18s ease;
}
.ev-card:hover { border-color: var(--primary); transform: translateY(-2px); }
/* Il blocco della data è la parte che si cerca per prima scorrendo
   l'elenco: sta a sinistra, grande, e non si mescola al testo. */
.ev-data {
  flex: 0 0 58px;
  display: grid;
  place-content: center;
  align-content: center;
  height: 58px;
  border-radius: var(--r-md);
  background: var(--primary-bg);
  color: var(--primary);
  text-align: center;
}
.ev-data-giorno { font-size: 22px; font-weight: 700; line-height: 1; }
.ev-data-mese {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ev-corpo { min-width: 0; }
.ev-occhiello {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}
.ev-corpo h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ev-corpo p {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  text-wrap: pretty;
}
.ev-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.ev-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.ev-meta svg { color: var(--text-subtle); }
.ev-riga-passata { text-decoration: none; color: var(--text); }
.ev-riga-passata:hover { background: var(--surface-2); }
.ev-dett-testata { margin-bottom: 18px; }
.ev-dett-testata h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 6px;
  text-wrap: balance;
}
.ev-testo { margin: 22px 0; max-width: 68ch; }

/* -- indirizzi di studio --------------------------------------- */
.ind-testata {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.ind-testata h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 33px);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.ind-durata { margin-top: 4px; font-size: 14px; color: var(--text-muted); }
.ind-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

@media (max-width: 640px) {
  .ric-modulo { flex-wrap: wrap; }
  .ric-modulo input { flex: 1 0 100%; }
  .ric-modulo .btn { flex: 1; justify-content: center; }
  .ric-voce { flex-wrap: wrap; }
  .ric-voce-data { order: 3; }
  .ind-testata { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* -- pagina servizi -------------------------------------------- */
.serv-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.serv-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s ease, transform .18s ease;
}
.serv-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.serv-card > div:nth-child(2) { flex: 1; min-width: 0; }
.serv-card strong { display: block; font-size: 15.5px; }
.serv-card span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.serv-icona {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--primary-bg);
  color: var(--primary);
}
.serv-freccia { color: var(--text-subtle); flex: 0 0 auto; }

/* -- blog: categorie e paginazione ----------------------------- */
.blog-categorie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.blog-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.blog-cat:hover { color: var(--text); border-color: var(--border-strong); }
.blog-cat span {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--surface-3);
  color: var(--text-subtle);
}
.blog-cat.attiva {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.blog-cat.attiva span { background: rgba(255,255,255,.22); color: var(--on-primary); }
.blog-cat-calendario { margin-left: auto; color: var(--primary); border-color: var(--primary); }

.blog-card-evento {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--primary);
  font-weight: 500;
}

/* La paginazione porta i numeri, non solo le frecce: su dieci pagine
   di archivio bisogna poter saltare, non scorrere. */
.paginazione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.pag-numero, .pag-freccia {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.pag-numero:hover, .pag-freccia:hover { color: var(--text); border-color: var(--border-strong); }
.pag-numero.attivo {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.pag-freccia.disabilitata { opacity: .35; pointer-events: none; }
.pag-salto { padding: 0 4px; color: var(--text-subtle); }
.pag-conteggio {
  margin-top: 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .blog-cat-calendario { margin-left: 0; }
}

/* -- scelta della classe nell'orario ---------------------------- */
/* La lista galleggia sopra la griglia invece di spingerla in basso:
   con quarantanove classi, un elenco nel flusso farebbe saltare tutto
   l'orario ogni volta che si apre il menu. */
.orario-combo { position: relative; min-width: 220px; }
.libri-page .orario-combo { min-width: 400px; flex: 0 1 460px; }

/* Su mobile il select di scelta classe deve stare nella larghezza reale
   dello schermo: 400px min-width lo faceva sforare oltre il viewport. */
@media (max-width: 640px) {
  .orario-combo,
  .libri-page .orario-combo {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }
}

.orario-select {
  width: 100%;
  padding: 10px 38px 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.orario-select::placeholder { font-weight: 400; color: var(--text-subtle); }
/* Su un `select` il browser disegna già la sua freccia: senza toglierla se
   ne vedrebbero due, la nativa e quella di `.orario-combo::after`. */
select.orario-select {
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}
.orario-select:hover { border-color: var(--primary); }
.orario-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

/* Il segno di menu a tendina: decorativo, e non deve rubare il clic
   all'input che ci sta sotto. */
.orario-combo::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  /* Ruotando un quadrato di bordi il centro ottico si sposta: lo scarto
     verticale va corretto in ciascuno dei due versi, o la freccetta esce
     dall'asse del campo. */
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform .18s ease, border-color .18s ease;
}
.orario-combo:focus-within::after {
  transform: translateY(-25%) rotate(-135deg);
  border-color: var(--primary);
}

.orario-combo-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.orario-combo-list[hidden] { display: none; }

.orario-combo-opt {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.orario-combo-opt:hover,
.orario-combo-opt.active {
  background: var(--primary-bg);
  color: var(--primary);
}
/* La classe che si sta guardando resta riconoscibile mentre si scorre. */
.orario-combo-opt[aria-selected="true"] {
  background: var(--primary);
  color: var(--on-primary);
}
.orario-combo-opt[aria-selected="true"]::after {
  content: "✓";
  float: right;
  font-weight: 700;
}
.orario-combo-empty {
  padding: 14px 12px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 520px) {
  .orario-combo { min-width: 0; flex: 1; }
}

/* ============================================================
   27. Libri di testo
   L'elenco delle adozioni, per classe. È una pagina che finisce
   in stampa più spesso che a schermo: chi compra i libri si porta
   il foglio in libreria. Le regole di stampa in fondo non sono un
   ripensamento, sono metà del lavoro.
   ============================================================ */
.libri-page { padding-bottom: 60px; }

.libri-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 22px;
  margin-bottom: 8px;
}
.libri-testata-classe { display: flex; align-items: center; gap: 16px; }
.libri-classe-sigla {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 64px;
  height: 64px;
  padding: 0 12px;
  border-radius: var(--r-lg);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.libri-testata-classe strong { display: block; font-size: 16px; }
.libri-testata-classe span { font-size: 13.5px; color: var(--text-muted); }

.libri-spesa { display: flex; flex-wrap: wrap; gap: 26px; }
.libri-spesa dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.libri-spesa dd { font-size: 18px; font-weight: 700; }
.libri-spesa-forte { color: var(--primary); }
.libri-sforamento { color: var(--rose-500); }
.libri-nota {
  margin: 0 0 26px;
  font-size: 13px;
  color: var(--text-muted);
  text-wrap: pretty;
}

.libri-materia { margin-bottom: 26px; }
.libri-materia h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
}
.libri-tabella {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.libri-tabella th {
  padding: 8px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.libri-tabella td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: top;
}
.libri-tabella tr:last-child td { border-bottom: 0; }
.libri-tabella td strong { font-size: 14.5px; }
.libri-volume { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.libri-col-isbn code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.libri-col-prezzo { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* I volumi che non vanno comprati restano leggibili ma non in primo piano:
   sono la ragione per cui il totale è più basso della somma dei prezzi. */
.libri-non-obbligatorio { opacity: .62; }

.libri-segni { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.libri-segno {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--surface-3);
  color: var(--text-muted);
}
.libri-segno-nuovo { background: var(--amber-100); color: #713f12; }
.libri-segno-tipo { background: var(--primary-bg); color: var(--primary); }

.libri-avvertenza {
  margin-top: 26px;
  padding: 14px 16px;
  border-left: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

.libri-riepilogo { display: flex; gap: 30px; padding: 14px 0; }
.libri-riepilogo strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
}
.libri-riepilogo span { font-size: 12.5px; color: var(--text-muted); }

/* Intestazione che compare solo sul foglio stampato. */
.libri-intestazione-stampa { display: none; }

/* -- stampa ---------------------------------------------------- */
@media print {
  /* Tutto ciò che serve a navigare non serve su carta. `.avvisi-pagina` sono
     i messaggi di Django: riscontri di un'azione appena fatta, non contenuto
     del documento — su un tabellone appeso in sala prof direbbero il falso. */
  .topbar, .site-footer, .alert-bar, .no-print,
  .breadcrumb, .velo-drawer, .lightbox,
  .avvisi-pagina { display: none !important; }

  body { background: #fff; color: #000; }
  .container { max-width: none; padding: 0; }

  .libri-intestazione-stampa {
    display: block;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
  }
  .libri-intestazione-stampa strong { display: block; font-size: 13pt; }
  .libri-intestazione-stampa span { font-size: 10pt; }

  .card, .libri-testata {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .libri-classe-sigla { background: #000 !important; color: #fff !important; }
  .libri-spesa dd { font-size: 12pt; }
  .libri-spesa-forte, .libri-sforamento { color: #000 !important; }

  /* Una materia non si spezza fra due pagine se può stare intera, e la
     tabella non deve scorrere: su carta non c'è dove scorrere. */
  .libri-materia { break-inside: avoid; margin-bottom: 14pt; }
  .libri-materia h2 { font-size: 11pt; border-bottom: 1.5pt solid #000; }
  .tt-scroll { overflow: visible !important; width: auto !important; }

  /* Su A4 verticale restano 182 mm utili: la tabella va **imposta** dentro
     quella misura. Con `table-layout: auto` le colonne si dimensionano sul
     contenuto e un titolo lungo spinge il resto fuori dal foglio — che è
     esattamente come veniva tagliata. */
  .libri-tabella {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    font-size: 8.5pt;
  }
  .libri-tabella th, .libri-tabella td {
    padding: 3pt 5pt;
    /* `break-word` e non `anywhere`: spezza dentro la parola solo se non
       c'è alternativa. Con `anywhere` uscivano «ZANICHELL / I EDITORE». */
    overflow-wrap: break-word;
  }
  /* Le larghezze sono tarate sui contenuti veri: i nomi degli editori sono
     lunghi («ZANICHELLI EDITORE», «B. MONDADORI») e vanno su una riga. */
  .libri-tabella th:nth-child(1), .libri-tabella td:nth-child(1) { width: 38%; }
  .libri-tabella th:nth-child(2), .libri-tabella td:nth-child(2) { width: 17%; }
  .libri-tabella th:nth-child(3), .libri-tabella td:nth-child(3) { width: 19%; }
  .libri-tabella th:nth-child(4), .libri-tabella td:nth-child(4) { width: 17%; }
  .libri-tabella th:nth-child(5), .libri-tabella td:nth-child(5) { width: 9%; }
  .libri-tabella td strong { font-size: 8.5pt; }
  .libri-col-isbn code { font-size: 8pt; white-space: normal; }
  /* L'intestazione si ripete su ogni pagina: un elenco di dodici materie
     supera il foglio, e senza intestazione la seconda pagina è illeggibile. */
  .libri-tabella thead { display: table-header-group; }
  .libri-tabella tr { break-inside: avoid; }

  /* La testata è una riga a due blocchi: su carta stretta va impilata. */
  .libri-testata { flex-direction: column; align-items: flex-start; gap: 10pt; padding: 8pt 10pt; }
  .libri-spesa { gap: 18pt; }
  .libri-classe-sigla { min-width: 44px; height: 44px; font-size: 15pt; }
  .libri-segno {
    background: none !important;
    color: #000 !important;
    padding: 0;
    font-style: italic;
  }
  .libri-segno::before { content: "· "; }
  .libri-non-obbligatorio { opacity: 1; color: #444; }

  .libri-avvertenza { border: 0; background: none; font-size: 8pt; padding: 0; }

  @page { size: A4 portrait; margin: 12mm; }
}

/* Rimando all'orario personale, per chi è riconosciuto come docente. */
.orario-mio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  text-decoration: none;
  color: var(--text);
  border-color: var(--primary);
  background: var(--primary-bg);
  transition: transform .18s ease;
}
.orario-mio:hover { transform: translateY(-1px); }
.orario-mio-icona {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--on-primary);
}
.orario-mio-testo { flex: 1; min-width: 0; }
.orario-mio-testo strong { display: block; font-size: 15px; }
.orario-mio-testo span { font-size: 13px; color: var(--text-muted); }
.orario-mio > svg { color: var(--primary); flex: 0 0 auto; }

/* ============================================================
   28. Programmi svolti
   Non un elenco redazionale ma un archivio da attraversare: le
   cartelle sono le classi, i file i programmi. La griglia serve
   a trovare la propria classe a colpo d'occhio, non a leggere
   dall'alto in basso.
   ============================================================ */
.prog-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}
.prog-cartella {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.prog-cartella:hover {
  border-color: var(--primary);
  background: var(--surface-2);
}
.prog-cartella-icona { flex: 0 0 auto; color: var(--primary); }
.prog-cartella-nome {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 15px;
  overflow-wrap: break-word;
}
.prog-cartella-freccia {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform .18s ease;
}
.prog-cartella:hover .prog-cartella-freccia { transform: translateX(3px); }

/* Un file per riga, nome per intero. Riusare la riga delle prenotazioni
   stringeva il nome in una colonna e lo mandava a capo tre volte: qui il
   nome è la cosa che si legge, e prende tutto lo spazio che c'è. */
.prog-file { padding: 4px 0; }
.prog-file-riga {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background .15s ease;
}
.prog-file-riga:last-child { border-bottom: 0; }
.prog-file-riga:hover { background: var(--surface-2); }
.prog-file-icona { flex: 0 0 auto; color: var(--text-muted); }
.prog-file-nome {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.prog-file-formato {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--surface-3);
  color: var(--text-muted);
}
.prog-apri {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  transition: gap .18s ease;
}

.prog-strade { margin: 8px 0 0; padding-left: 18px; }
.prog-strade li { margin-bottom: 6px; }
.prog-strade code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 4px;
}

.prog-file-riga:hover .prog-apri { gap: 9px; }

@media (prefers-reduced-motion: reduce) {
  .prog-cartella, .prog-cartella-freccia, .prog-apri, .prog-file-riga { transition: none; }
  .prog-cartella:hover .prog-cartella-freccia { transform: none; }
  .prog-file-riga:hover .prog-apri { gap: 6px; }
}
@media (max-width: 560px) {
  .prog-griglia { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* Sullo stretto il nome resta la priorità: «Apri» si riduce alla sua icona
     invece di rubargli larghezza. */
  .prog-file-riga { padding: 12px 14px; gap: 9px; }
  .prog-file-formato { display: none; }
  .prog-apri { font-size: 0; gap: 0; }
  .prog-apri svg { width: 17px; height: 17px; }
}

/* ============================================================
   29. Area riservata a schede
   La pagina che si apre dopo il login, per tutti i profili.
   Su telefono le schede stanno in basso come in un'app: è una
   PWA installabile, e chi la installa la usa come un'app.
   ============================================================ */
.area-personale { padding: 26px 20px 90px; max-width: 940px; }

.area-testata { margin-bottom: 18px; }
.area-testata h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.area-ruolo { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* -- le schede -------------------------------------------------- */
.area-schede {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding-bottom: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.area-scheda {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.area-scheda:hover { color: var(--text); }
.area-scheda.attiva { color: var(--primary); border-bottom-color: var(--primary); }
.area-scheda svg { flex: 0 0 auto; }

/* -- promemoria ------------------------------------------------- */
.area-promemoria {
  display: flex;
  gap: 11px;
  padding: 13px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--primary);
  border-radius: var(--r-md);
  background: var(--primary-bg);
  text-decoration: none;
  color: var(--text);
}
.area-promemoria > svg { flex: 0 0 auto; color: var(--primary); margin-top: 1px; }
/* Il promemoria Academy invita a qualcosa di piacevole; questo segnala che
   manca un dato, e con il colore del sito si confonderebbero. Stessa coppia
   ambra degli avvisi (`.avviso-warning`), colore del testo scurito a mano:
   `--amber-500` su fondo chiaro non ha contrasto sufficiente.
   Dopo la regola generica, che ha la stessa specificità e altrimenti vince. */
.area-promemoria-avviso {
  border-color: var(--amber-500);
  background: var(--amber-100);
}
.area-promemoria-avviso > svg { color: oklch(0.45 0.12 75); }
.area-promemoria strong { display: block; font-size: 14px; }
.area-promemoria span { display: block; font-size: 13px; color: var(--text-muted); }

/* -- contenuto delle schede -------------------------------------- */
.area-contenuto > .card { margin-bottom: 14px; }
.area-vuoto, .area-chiedi, .area-profilo, .area-figlio { padding: 24px; }
.area-vuoto h2, .area-chiedi h2, .area-profilo h2, .area-figlio h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}
.area-vuoto p, .area-chiedi p { color: var(--text-muted); text-wrap: pretty; margin: 0 0 12px; }
.area-nota { font-size: 13px; color: var(--text-muted); text-wrap: pretty; }
.area-nota-inline { font-size: 12px; color: var(--text-muted); }
/* Una mancanza da colmare, non un errore: ambra, non rosso. Il colore è
   scritto per esteso e non `--amber-500` perché quello, pensato per gli
   sfondi, su bianco sta a 2.26:1 — vedi la nota più su. */
.area-nota-forte {
  font-size: 13.5px; font-weight: 600;
  color: oklch(0.45 0.12 75);
  margin: 0 0 10px;
}
.area-sottotitolo { font-size: 14px; font-weight: 700; margin: 18px 0 6px; }

.area-chiedi-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.area-chiedi-form label { font-size: 13px; font-weight: 600; }

/* -- orario di oggi ---------------------------------------------- */
.area-oggi { padding: 0; }
.area-oggi-testata {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.area-oggi-testata span { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.area-oggi-vuoto {
  margin: 0;
  padding: 44px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Card informativa "non hai niente qui" nelle aree riservate (academy,
   avvisi, circolari, figli...): senza queste regole h2, p e btn restano
   allineati a sinistra dentro il .card, con molto spazio vuoto. */
.area-vuoto {
  padding: 32px 24px;
  text-align: center;
}
.area-vuoto h2 {
  margin: 0 0 8px;
  font-size: 17px;
}
.area-vuoto p {
  margin: 0 auto 16px;
  max-width: 46ch;
  color: var(--text-muted);
  text-wrap: pretty;
}
.area-vuoto .btn,
.area-vuoto a.btn {
  margin-top: 4px;
}
.area-ora {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
}
.area-ora:last-of-type { border-bottom: 0; }
.area-ora-quando {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.area-ora-quando span { display: block; font-weight: 400; opacity: .7; }
.area-ora-cosa strong { display: block; font-size: 14.5px; }
.area-ora-cosa span { font-size: 12.5px; color: var(--text-muted); }
.area-ora-adesso { background: var(--primary-bg); }
.area-ora-adesso .area-ora-quando { color: var(--primary); }
.area-ora-passata { opacity: .5; }
.area-oggi-tutto { display: block; padding: 13px 18px; font-size: 13.5px; }
.area-settimana { padding: 18px; }

/* -- ricerca in area riservata (circolari) ---------------------- */
.area-cerca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 8px 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s;
}
.area-cerca:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.area-cerca-icona { color: var(--text-muted); display: inline-grid; place-items: center; }
.area-cerca input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  padding: 8px 0;
}
.area-cerca input[type="search"]::-webkit-search-cancel-button { display: none; }
.area-cerca-reset {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--text-muted);
  text-decoration: none;
}
.area-cerca-reset:hover { background: var(--surface-2); color: var(--text); }
.area-cerca-esito {
  margin: -6px 0 12px;
  font-size: 13px;
  color: var(--text-muted);
}

/* -- elenchi (circolari, avvisi) ----------------------------------
   Sovrascrive .pren-riga (che è a 3 colonne "148px 1fr auto" per le
   prenotazioni): qui gli elementi sono solo 2 (titolo/data a sinistra +
   pill/freccia a destra), quindi il titolo si spezzava in una colonna
   stretta e la pill restava sospesa in mezzo. */
.area-riga { text-decoration: none; color: inherit; }
.area-riga:hover { background: var(--surface-2); }
.area-riga,
.pren-riga.area-riga {
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 18px;
}
/* Un link `a` sottolinea anche i figli block: forziamo il no-underline
   sui contenuti (il primo item aveva un underline visited/hover-brutto). */
.area-riga strong,
.area-riga span,
.area-riga a { text-decoration: none !important; }
.area-riga strong { display: block !important; }  /* non più flex, così va a capo naturale */
.area-riga > svg { color: var(--text-muted); flex: 0 0 auto; align-self: center; }

.area-pdf, .area-chiuso {
  align-self: center;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.area-pdf { background: var(--primary-bg); color: var(--primary); }
.area-chiuso { background: var(--surface-3); color: var(--text-muted); }

/* -- profilo e numeri --------------------------------------------- */
.area-dati { display: grid; gap: 11px; margin: 0 0 16px; }
.area-dati div { display: flex; gap: 10px; flex-wrap: wrap; }
.area-dati dt {
  min-width: 150px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.area-dati dd { margin: 0; font-size: 14.5px; }
.area-azioni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.area-totale { padding: 18px 24px; }
.area-totale strong {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.area-totale span { font-size: 13px; color: var(--text-muted); }

.area-figlio-testata {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.area-figlio-testata h2 { margin: 0; }
.area-figlio-testata > div > span { font-size: 13px; color: var(--text-muted); }
.stato-ok, .stato-attenzione {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
}
.stato-ok { background: var(--primary-bg); color: var(--primary); }
.stato-attenzione { background: var(--amber-100); color: #713f12; }
.area-numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.area-numeri strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.area-numeri span { font-size: 12px; color: var(--text-muted); }
.area-tabella { width: 100%; border-collapse: collapse; }
.area-tabella th, .area-tabella td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  text-align: left;
}
.area-tabella th { font-size: 11.5px; text-transform: uppercase; color: var(--text-muted); }
.area-num { text-align: right; font-variant-numeric: tabular-nums; }
.area-num-piccolo { color: var(--text-muted); font-size: 12.5px; }
.area-riga-rossa td { color: var(--rose-500); font-weight: 600; }
.area-riga-gialla td { color: oklch(0.55 0.15 65); font-weight: 600; }

/* --- Area figli: nuovi elementi rischio bocciatura ---------------------- */
.stato-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.stato-badge-ok    { background: var(--primary-bg); color: var(--primary); }
.stato-badge-medio { background: var(--amber-100); color: #713f12; }
.stato-badge-alto  { background: oklch(0.92 0.10 20); color: oklch(0.40 0.18 20); }

/* Border sinistro colorato sulla card figlio, per colpo d'occhio */
.area-figlio-medio { border-left: 4px solid oklch(0.72 0.15 75); }
.area-figlio-alto  { border-left: 4px solid var(--rose-500); }

/* Box avviso motivi rischio */
.area-avviso {
  margin: 6px 0 16px;
  padding: 12px 14px;
  background: oklch(0.97 0.03 20);
  border: 1px solid oklch(0.88 0.06 20);
  border-radius: var(--r-md);
  font-size: 13.5px;
}
.area-avviso strong { color: oklch(0.40 0.18 20); }
.area-avviso ul { margin: 6px 0 0; padding-left: 20px; }
.area-avviso li { margin: 2px 0; }
[data-theme="dark"] .area-avviso {
  background: oklch(0.22 0.05 20);
  border-color: oklch(0.32 0.08 20);
}

.area-num-freq strong { color: var(--text); }
.area-num-freq.area-num-medio strong { color: oklch(0.55 0.15 65); }
.area-num-freq.area-num-alto strong { color: var(--rose-500); }

.area-medie-periodi {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.area-medie-periodi strong { color: var(--text); font-variant-numeric: tabular-nums; }

.area-nota-secondaria { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-subtle); }

/* Dettagli eventi assenza (collassabile) */
.area-eventi {
  margin: 14px 0 6px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-size: 13px;
}
.area-eventi > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-muted);
}
.area-eventi-lista {
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.area-eventi-lista li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.area-eventi-lista li:last-child { border-bottom: 0; }
.area-evento-data {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  min-width: 82px;
}
.area-evento-nogi {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--rose-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Su telefono le schede diventano la barra dell'app, in basso: è la forma
   che rende la PWA indistinguibile da un'applicazione installata. */
@media (max-width: 720px) {
  .area-personale { padding-bottom: 86px; }
  .area-schede {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    justify-content: space-around;
    gap: 0;
    margin: 0;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: 0 -2px 12px rgb(0 0 0 / .06);
    overflow-x: auto;
  }
  .area-scheda {
    flex-direction: column;
    gap: 3px;
    padding: 7px 10px;
    margin: 0;
    border-bottom: 0;
    border-radius: var(--r-md);
    font-size: 10.5px;
  }
  .area-scheda.attiva { background: var(--primary-bg); }
  .area-ora { grid-template-columns: 60px 1fr auto; padding: 11px 14px; }
}
@media (prefers-reduced-motion: reduce) { .area-scheda { transition: none; } }

/* ==========================================================================
   PWA — banner install/push, offline, transizioni tra schede, feel app-like
   ==========================================================================

   Tutto quello che serve a rendere /area-riservata/ "un'app" quando la si
   apre da un cellulare o dopo averla installata. Convenzioni:
   - i banner (install/push) sono `.area-banner-pwa` con varianti;
   - `body.is-offline` viene messa da pwa-area.js in base a navigator.onLine;
   - `.body-app` (settata dal template) fa scomparire footer e alert-bar su
     mobile, così l'app installata è compatta; la barra in alto resta, perché
     è l'unica strada verso quello che nell'area riservata non c'è;
   - le transizioni tra schede sfruttano la View Transitions API — su
     browser non supportati la navigazione è quella di sempre.
   ========================================================================== */

.area-banner-pwa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--primary);
  border-radius: var(--r-md);
  background: var(--primary-bg);
  color: var(--text);
  animation: banner-in 220ms cubic-bezier(.4, 0, .2, 1) both;
}
.area-banner-pwa[hidden] { display: none; }
.area-banner-pwa-icona {
  flex: 0 0 auto;
  color: var(--primary);
}
.area-banner-pwa-testo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  min-width: 0;
}
.area-banner-pwa-testo strong { font-size: 14.5px; }
.area-banner-pwa-testo em { font-style: normal; font-weight: 600; }
.area-banner-pwa-status { font-size: 12.5px; color: var(--text-muted); }
.area-banner-pwa-azioni {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.area-banner-pwa-chiudi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.area-banner-pwa-chiudi:hover { background: rgb(0 0 0 / .06); color: var(--text); }
@keyframes banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Indicatore "sei offline". Nascosto di default, appare quando body.is-offline
   è attiva. `role="status"` legge da solo agli screen reader. */
.area-offline-indicator {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #78350f;
  font-size: 13px;
}
body.is-offline .area-offline-indicator {
  display: flex;
  animation: banner-in 180ms cubic-bezier(.4, 0, .2, 1) both;
}

/* -- View Transitions ---------------------------------------------------- */
/* Le transizioni tra schede sono un tocco *app-like*: hanno senso su
   telefono e in modalità standalone, non sul sito desktop dove sembrano
   fuori posto. Non attiviamo `@view-transition { navigation: auto }`
   (partirebbe ovunque). Il polyfill JS in `pwa-area.js` chiama
   `document.startViewTransition` a mano, solo se siamo su viewport
   mobile o in app installata.

   Le regole `view-transition-name` restano: sono innocue quando nessuna
   transizione parte, e servono al polyfill per far restare ferma la
   bar delle schede mentre il contenuto slitta. */
.area-testata     { view-transition-name: area-testata; }
.area-schede      { view-transition-name: area-schede; }
.area-contenuto   { view-transition-name: area-contenuto; }
.area-banner-pwa  { view-transition-name: none; }  /* fuori dalla transizione */

::view-transition-old(area-contenuto) {
  animation: 180ms cubic-bezier(.4, 0, .6, 1) both fade-out-left;
}
::view-transition-new(area-contenuto) {
  animation: 240ms cubic-bezier(.2, 0, .2, 1) both fade-in-right;
}
::view-transition-group(area-schede)  { animation-duration: 0ms; }
::view-transition-group(area-testata) { animation-duration: 0ms; }

@keyframes fade-out-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-16px); }
}
@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* -- Tap feedback (micro-interazione) ------------------------------------ */
.area-scheda,
.area-banner-pwa .btn,
.area-banner-pwa-chiudi {
  -webkit-tap-highlight-color: transparent;
  transition: transform 80ms ease, background-color 140ms ease, color .15s ease, border-color .15s ease;
}
.area-scheda:active,
.area-banner-pwa .btn:active,
.area-banner-pwa-chiudi:active {
  transform: scale(0.96);
}

/* -- Focus visibile (a11y) ---------------------------------------------- */
.area-scheda:focus-visible,
.area-banner-pwa .btn:focus-visible,
.area-banner-pwa-chiudi:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* -- Skeleton loading (shimmer) ----------------------------------------- */
/* Uso opzionale: `<div class="skel-riga"></div>` per un placeholder di
   riga durante il caricamento; non usato inline oggi, ma pronto per chi
   servisse. */
.skel-riga {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgb(0 0 0 / .05) 0%,
    rgb(0 0 0 / .1) 40%,
    rgb(0 0 0 / .05) 80%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
}
@keyframes skel-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* -- Overscroll (impedisce rimbalzo doppio su iOS) ---------------------- */
.area-contenuto { overscroll-behavior-y: contain; }

/* -- .body-app: l'area riservata come app, su mobile / standalone --------
   La classe la mette `area_riservata.html`.

   La barra in alto **resta**, ed è una correzione. Prima spariva insieme al
   footer, per far sembrare l'area riservata un'app a schermo pieno: ma lì
   dentro stanno il menu a cassetto e il menu utente, cioè l'unica strada per
   tutto quello che nell'area riservata non c'è — le circolari, le notizie, la
   bacheca, i pannelli di gestione — e per uscire. Chi installava l'app si
   ritrovava chiuso in cinque schede senza porta: le schede in basso portano
   dentro, e non c'era più niente che portasse fuori. A schermo pieno il
   problema è peggiore, non minore, perché non c'è nemmeno la barra del
   browser.

   Il footer invece sparisce davvero: è una colonna di collegamenti che in
   un'app in mano non serve, e le stesse voci stanno nel cassetto. */
@media (max-width: 720px), (display-mode: standalone) {
  body.body-app > footer.site-footer { display: none; }
  body.body-app > .avvisi-pagina { display: none; }
  body.body-app { padding-top: env(safe-area-inset-top); }
  body.body-app .area-personale { padding-top: 14px; }
  /* La barra si stringe: in un'app è un'intestazione, non la testata di un
     sito, e ogni pixel che prende è tolto al contenuto. */
  body.body-app > header.topbar { position: sticky; top: 0; }
  body.body-app > header.topbar .topbar-row { padding-top: 6px; padding-bottom: 6px; }
}

/* -- Reduced motion: silenziamo tutto quel che si muove ------------------ */
@media (prefers-reduced-motion: reduce) {
  .area-banner-pwa,
  .area-offline-indicator { animation: none; }
  .area-scheda:active,
  .area-banner-pwa .btn:active,
  .area-banner-pwa-chiudi:active { transform: none; }
  .skel-riga { animation: none; }
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Touch target ≥ 44px sulle schede in mobile (era ~35px prima) —
   raccomandazione Apple HIG / Material. */
@media (max-width: 720px) {
  .area-scheda {
    min-height: 48px;
    padding: 8px 6px;
    /* flex 1 così le tab si spartiscono equamente lo spazio anziché
       misurarsi sul contenuto — con 6 tab larghezze uniformi ci stanno
       tutte anche su 360px logici, senza scroll orizzontale nascosto. */
    flex: 1 1 0;
    min-width: 0;
  }
  .area-scheda span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Bottoni dentro l'area riservata: possono andare a capo invece che
   sforare lo schermo. Il `.btn` di libreria è `white-space: nowrap` di
   default e con testi lunghi (es. "Apri il pannello completo…") su
   telefoni stretti taglia via il contenuto oltre il bordo. */
.area-contenuto .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

/* Contenitore per gruppi di CTA (es. i due "Prenota aula" / "Prenota
   carrello PC" della scheda Prenota): flex-wrap così su telefono i
   bottoni scendono a capo invece di stringersi. */
.area-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ==========================================================================
   Disposizioni (sostituzioni docenti) — pannello vicario
   ========================================================================== */
.disp-nav-giorno { display: flex; gap: 6px; align-items: center; }
.disp-badge {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  border-radius: 999px; background: var(--primary-bg); color: var(--primary);
  font-size: .8rem; font-weight: 600;
}
.disp-testata-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
/* Il blocco `.disp-ora` — una card per slot con la cascata aperta sotto — se
   n'è andato con l'interfaccia che lo usava: vedi `.disp-riga` più sotto. */
.disp-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 4px; font-size: .78rem; font-weight: 600; letter-spacing: .3px;
}
.disp-tag-pot     { background: #dbeafe; color: #1e40af; }
.disp-tag-disp    { background: #dcfce7; color: #166534; }
.disp-tag-banca   { background: #fef3c7; color: #92400e; }
.disp-tag-manuale { background: #e5e7eb; color: #374151; }

.disp-cascata { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.disp-fascia {
  border-left: 3px solid var(--border); padding: 8px 12px;
  background: rgb(0 0 0 / .015);
  border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
}
.disp-lvl-pot    { border-left-color: #3b82f6; }
.disp-lvl-disp   { border-left-color: #16a34a; }
.disp-lvl-debito { border-left-color: #d97706; }
/* Il buco orario è un ripiego buono (sono già dentro), non uno dei tre
   livelli istituzionali: colore proprio, più tenue del verde della banca ore. */
.disp-lvl-buco   { border-left-color: #14b8a6; }
/* A ricevimento: sono a scuola come quelli in buco, ma occupati. Viola per
   dire "caso a parte", non rosso — non è un divieto, è un'informazione. */
.disp-lvl-ricev  { border-left-color: #8b5cf6; }
.disp-lvl-altri  { border-left-color: #9ca3af; }
.disp-fascia-testa { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.disp-fascia-nota {
  font-size: 12.5px; color: var(--text-muted);
  line-height: 1.45; margin: -2px 0 8px;
}
.disp-fascia-vuota { font-style: italic; padding: 4px 0; }
/* --- Anagrafica docenti (vicario) --- */
.anag-tabella { padding: 0; overflow: hidden; }
.anag-intestazione,
.anag-riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 100px 220px 110px;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
}
.anag-intestazione {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.anag-riga { border-bottom: 1px solid var(--border); }
.anag-riga:last-child { border-bottom: 0; }
.anag-riga:hover { background: var(--surface-2); }
.anag-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anag-nome strong { font-size: 14px; }
.anag-nome span { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
/* Intestazione e cella incolonnate: la spunta è centrata, e la sua etichetta
   deve stare sopra di lei, non a sinistra. */
.anag-intestazione > span:nth-child(2),
.anag-intestazione > span:nth-child(3) { text-align: center; }
.anag-spunta { display: grid; place-items: center; min-height: 38px; cursor: pointer; }
.anag-spunta input { width: 19px; height: 19px; accent-color: var(--primary); cursor: pointer; }
.anag-spunta input:disabled { opacity: .55; cursor: not-allowed; }
/* Le tendine restavano quelle grezze del browser — spigoli vivi e bordo nero
   in mezzo a campi arrotondati. `background` e `color` espliciti perché il
   default del sistema non segue il tema scuro. */
.anag-riga select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 6px);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}
.anag-riga select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.anag-riga select:disabled { opacity: .55; cursor: not-allowed; }
.anag-banca { font-size: 12.5px; }

@media (max-width: 860px) {
  .anag-intestazione { display: none; }
  .anag-riga { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .anag-spunta { justify-items: start; }
}

.disp-fascia-comprimi > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--primary);
  padding: 2px 0 6px;
}
.disp-cand-riga { display: flex; flex-wrap: wrap; gap: 6px; }
.disp-cand {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); cursor: pointer; font: inherit; font-size: .88rem;
  transition: background .15s, border-color .15s, transform .05s;
}
.disp-cand:hover  { background: var(--primary-bg); border-color: var(--primary); }
.disp-cand:active { transform: scale(.97); }
.disp-cand-affine { border-color: var(--primary); font-weight: 600; }
.disp-cand-saldo {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: .72rem; font-weight: 700;
}
.disp-saldo-pos { background: #dcfce7; color: #166534; }
.disp-saldo-neg { background: #fee2e2; color: #b91c1c; }

/* --- Pannello vicario: la giornata in righe -------------------------------
   La cascata a sei fasce aperte sotto ogni ora si legge finché le ore sono
   due. A venti assenti da cinque ore l'una sono cento slot per seicento
   elenchi: la stessa informazione, illeggibile. Qui la cascata resta
   l'ordine con cui il motore sceglie, e a schermo diventa una riga per ora
   scoperta con il nome già proposto e un'etichetta che dice da dove arriva. */

.disp-avviso { margin: 12px 0; }
.disp-legenda {
  font-size: 13px; color: var(--text-muted);
  line-height: 2.1; margin: 18px 0 10px;
}

/* --- il gruppo di un'ora --- */
.disp-gruppo {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); margin: 10px 0; overflow: hidden;
}
.disp-gruppo-testa {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer;
  background: var(--surface-2); list-style: none;
}
.disp-gruppo-testa::-webkit-details-marker { display: none; }
.disp-gruppo-testa::before {
  content: "▸"; color: var(--text-muted); font-size: 12px;
  transition: transform .15s;
}
.disp-gruppo[open] > .disp-gruppo-testa::before { transform: rotate(90deg); }
.disp-gruppo-ora {
  font-family: var(--font-mono, monospace); font-size: 1.05rem; font-weight: 700;
  min-width: 4.5ch;
}
.disp-gruppo-conta { font-weight: 600; }
.disp-gruppo-fatte,
.disp-gruppo-liberi { font-size: 12.5px; color: var(--text-muted); }
.disp-gruppo-liberi { margin-left: auto; }
.disp-gruppo-fatto > .disp-gruppo-testa { opacity: .7; }
.disp-gruppo-fatto > .disp-gruppo-testa .disp-gruppo-conta { color: #166534; }

/* --- una riga = un'ora scoperta di una classe --- */
.disp-riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center; gap: 6px 18px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
}
.disp-riga-coperta { background: var(--primary-bg-soft, #eefdf3); }
.disp-riga-dove { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.disp-riga-classe { font-size: 1rem; }
.disp-riga-dettaglio { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.disp-riga-scelto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.disp-freccia { color: var(--text-muted); }
.disp-riga-vuota { font-style: italic; color: var(--text-muted); font-size: 13px; }
.disp-riga-azioni { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.disp-riga-azioni form { display: inline; }

/* La proposta non è ancora una decisione, e su cento righe le due cose non
   devono somigliarsi: la riga assegnata ha la spunta, il fondo verde e il
   nome in grassetto; la proposta ha la parola «proposto», il nome in tono
   minore e il fondo a righe — «qui manca ancora un tuo gesto». */
.disp-esito { color: #16a34a; font-weight: 700; }
.disp-riga-proposta {
  padding: 3px 0;
}
.disp-proposto {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 4px; padding: 1px 6px;
}
.disp-proposta-nome {
  color: var(--text-muted);
  border-bottom: 1px dashed var(--border-strong, var(--border));
}
.disp-riga:not(.disp-riga-coperta):has(.disp-riga-proposta) {
  background: repeating-linear-gradient(
    135deg, transparent 0 7px, rgb(127 127 127 / .045) 7px 14px);
}
.disp-btn-conferma { padding: 5px 14px; font-size: .85rem; }
.disp-btn-cambia {
  font-size: 13px; color: var(--primary); text-decoration: none;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.disp-btn-cambia:hover { border-bottom-color: currentColor; }

/* --- l'etichetta del livello: due parole, non una fascia --- */
.disp-liv {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap;
}
.disp-liv-potenziamento { background: #dbeafe; color: #1e40af; }
.disp-liv-disponibilita { background: #dcfce7; color: #166534; }
.disp-liv-debito        { background: #fef3c7; color: #92400e; }
.disp-liv-buco          { background: #ccfbf1; color: #115e59; }
.disp-liv-ricevimento   { background: #ede9fe; color: #5b21b6; }
.disp-liv-altri         { background: #e5e7eb; color: #374151; }
.disp-liv-affine        { background: transparent; color: var(--primary);
                          border: 1px solid var(--primary); }

/* --- il pannellino «cambia» --- */
.disp-picker { position: fixed; inset: 0; z-index: 900; display: flex;
               align-items: center; justify-content: center; padding: 16px; }
.disp-picker[hidden] { display: none; }
.disp-picker-sfondo { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.disp-picker-corpo {
  position: relative; z-index: 1;
  width: min(560px, 100%); max-height: min(80vh, 720px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 18px 50px rgb(0 0 0 / .28);
}
.disp-picker-testa {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.disp-picker-cerca {
  margin: 12px 16px 8px; padding: 9px 12px;
  border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r-sm, 6px);
  background: var(--surface); color: var(--text); font: inherit;
}
.disp-picker-cerca:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg);
}
.disp-picker-lista { overflow-y: auto; padding: 0 10px 12px; }
.disp-picker-vuoto { padding: 18px 6px; color: var(--text-muted); font-style: italic; }
.disp-picker-voce {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: var(--r-sm, 6px);
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.disp-picker-voce[hidden] { display: none; }
.disp-picker-voce:hover { background: var(--primary-bg); }
.disp-picker-voce:active { transform: scale(.995); }
.disp-picker-nome { flex: 1 1 auto; min-width: 0; }
.disp-picker-affine .disp-picker-nome { font-weight: 600; }
.disp-picker-carico { font-size: .72rem; color: var(--text-muted); }

@media (max-width: 780px) {
  /* Su iPad in verticale e su telefono la riga si impila: la classe sopra,
     il nome proposto sotto, i bottoni in fondo a tutta larghezza — restano
     bersagli grandi per il dito, che è il modo in cui questa pagina si usa
     davvero (in piedi, alle otto meno un quarto, in vicepresidenza). */
  .disp-riga { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .disp-riga-azioni { justify-content: flex-start; }
  .disp-btn-conferma { padding: 8px 18px; }
  .disp-gruppo-liberi { margin-left: 0; }
  .disp-picker { padding: 0; align-items: flex-end; }
  .disp-picker-corpo {
    width: 100%; max-height: 88vh;
    border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0;
  }
}

.gest-form-wrap { margin: 12px 0; }
.gest-form-wrap summary { cursor: pointer; display: inline-flex; }
.gest-form { padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); margin-top: 10px; background: rgb(0 0 0 / .01); }
.gest-form-riga { margin-bottom: 10px; }
.gest-form-riga label { display: block; font-size: .9rem; font-weight: 500; }
.gest-form-riga input, .gest-form-riga select, .gest-form-riga textarea {
  display: block; width: 100%; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  font: inherit; margin-top: 4px;
}
.gest-form-riga-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tabellona { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .92rem; }
.tabellona th, .tabellona td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.tabellona th { background: rgb(0 0 0 / .03); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; }
.tabellona tr.riga-oggi { background: var(--primary-bg-soft, #f0fdf4); }
.btn-icona {
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--muted, #666); border-radius: 4px;
}
.btn-icona:hover { background: rgb(0 0 0 / .06); color: var(--text); }
.btn-icona-danger:hover { color: #b91c1c; background: #fee2e2; }

/* Badge conteggio non lette accanto alla voce Notifiche del drawer utente */
.menu-utente-voce { position: relative; display: flex; align-items: center; }
.menu-utente-badge {
  margin-left: auto;
  display: inline-block;
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

/* ==========================================================================
   Accessibilità — WCAG 2.1 AA
   ========================================================================== */

/* Skip link: invisibile finché non riceve il focus da tastiera.
   Requisito 2.4.1 Bypass Blocks (Livello A). */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--primary, #4f46e5);
  color: #fff;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: top .15s ease-out;
}
/* `:focus-visible` fa comparire il link solo quando il focus è arrivato
   da tastiera (non da click), che è il caso d'uso reale. `:focus`
   liscio è mantenuto per browser vecchi che non supportano
   focus-visible. Contrasto: bianco su blu istituzionale già ≥ 7:1. */
.skip-link:focus,
.skip-link:focus-visible { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }

/* Focus visibile forte su tutti gli elementi interattivi.
   Requisito 2.4.7 Focus Visible (Livello AA). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--primary, #4f46e5);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Focus dentro il main con outline non tagliato dall'overflow */
main:focus { outline: none; }

/* Contrasti minimi: alcuni testi 'muted' sotto AAA in dark mode.
   Rafforzo il testo secondario in dark. */
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] small.muted {
  color: var(--text-muted, #cbd5e1) !important;
}

/* prefers-reduced-motion: spengo animazioni e transizioni globalmente
   per chi ha impostato la preferenza. Requisito 2.3.3 Animation from
   Interactions (Livello AAA - ma è buona pratica sempre). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Assicura che le immagini decorative senza alt non vengano lette:
   se hai <img> senza alt e con role="presentation", non compare
   nemmeno agli screen reader. */
img[alt=""], img[role="presentation"] { }

/* Link inline nei paragrafi di prosa — WCAG 1.4.1 Use of Color.
   Solo dove il link è "mescolato" nel testo (paragrafi, list-item, dd)
   serve sottolinearlo, perché lì colore vs testo circostante non basta
   a farlo riconoscere. Non applico a titoli, card cliccabili, chip,
   menu, breadcrumb: quelli sono riconoscibili dal layout. */
main p > a,
main li > a:not([class]),
main dd > a,
.legale-contenuto a,
.persona-content a,
.luogo-content a,
.documento-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
main p > a:hover,
main li > a:not([class]):hover,
main dd > a:hover,
.legale-contenuto a:hover,
.persona-content a:hover,
.luogo-content a:hover,
.documento-content a:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   Sezioni AGID: /persone, /luoghi, /documenti
   ========================================================================== */
.persone-griglia,
.luoghi-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-top: 8px;
}
.persona-card,
.luogo-card {
  display: flex; gap: 10px; padding: 10px; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: inherit; text-decoration: none;
  transition: border-color .15s, transform .1s;
}
.persona-card:hover,
.luogo-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.persona-foto,
.luogo-foto {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.luogo-foto { border-radius: 8px; width: 72px; height: 52px; }
.persona-foto-vuota {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-bg); color: var(--primary);
  font-weight: 700; font-size: 20px;
}
.persona-info,
.luogo-info { display: flex; flex-direction: column; min-width: 0; }
.persona-info strong,
.luogo-info strong { color: var(--text); }
.persona-info span,
.luogo-info span { font-size: .82rem; }
.persona-foto-grande { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; float: right; margin-left: 16px; margin-bottom: 8px; }
.persona-testata { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.luogo-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0; }
.luogo-dl dt { font-weight: 600; color: var(--text-muted); }
.luogo-dl dd { margin: 0; }

.documenti-lista { list-style: none; padding: 0; margin: 8px 0 0; }
.documento-item {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 8px; background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.documento-titolo { color: var(--text); text-decoration: none; flex: 1; min-width: 220px; }
.documento-titolo:hover { color: var(--primary); }

/* ==========================================================================
   Footer: badge conformità WCAG 2.1 AA (link alla dichiarazione)
   ========================================================================== */
.footer-bottom-badges {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: flex-end;
}
.footer-badge-wcag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: inherit;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.footer-badge-wcag:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.45);
  text-decoration: none;
}
.footer-badge-wcag svg { flex-shrink: 0; color: currentColor; }
.footer-badge-wcag-txt {
  display: inline-flex; flex-direction: column; line-height: 1.15;
}
.footer-badge-wcag-txt strong {
  font-size: .82rem; font-weight: 700; letter-spacing: .3px;
}
.footer-badge-wcag-txt small {
  font-size: .68rem; opacity: .75; letter-spacing: .2px;
}
@media (max-width: 500px) {
  .footer-bottom-badges { justify-content: flex-start; }
}

/* Le ore che nessuno dentro la scuola può coprire: non è un dettaglio di
   stato, è la cifra che dice quanto la giornata non tiene a costo zero. */
.disp-allarme { color: #b91c1c; }
.disp-gruppo-senza {
  font-size: 12.5px; font-weight: 600; color: #b91c1c;
}

/* La campanella in topbar: stesso pallino rosso della voce di menu, perché
   sono la stessa notizia vista da due porte. Sparisce quando non c'è niente
   da leggere — un badge sempre acceso smette di dire qualcosa. */
.icon-btn-campanella { position: relative; text-decoration: none; }
.icon-btn-pallino {
  position: absolute; top: 3px; right: 2px;
  min-width: 16px; padding: 0 4px;
  border-radius: 999px;
  background: #dc2626; color: #fff;
  font-size: .65rem; font-weight: 700; line-height: 16px;
  text-align: center;
  border: 2px solid var(--surface);
  box-sizing: content-box;
}

/* ==========================================================================
   Supporto — i messaggi arrivati dal modulo contatti
   ========================================================================== */
.sup-linguette { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 12px; }
.sup-linguetta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-decoration: none; font-size: 14px;
}
.sup-linguetta:hover { border-color: var(--primary); }
.sup-linguetta-attiva { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.sup-linguetta-n { font-size: 12px; color: var(--text-muted); }
.sup-linguetta-n-vivo {
  background: #dc2626; color: #fff; border-radius: 999px;
  padding: 0 7px; font-weight: 700;
}

.sup-elenco { padding: 0; overflow: hidden; }
.sup-riga {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: 6px 18px; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  color: inherit; text-decoration: none;
}
.sup-riga:last-child { border-bottom: 0; }
.sup-riga:hover { background: var(--surface-2); }
/* Il non letto si vede prima di leggerlo: barra a sinistra, non solo un
   badge in fondo alla riga dove l'occhio arriva per ultimo. */
.sup-riga-nuova { box-shadow: inset 3px 0 0 var(--primary); }
.sup-riga-nuova .sup-riga-chi strong { font-weight: 700; }
.sup-riga-chi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sup-riga-corpo { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sup-riga-anteprima {
  color: var(--text-muted); font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sup-riga-meta { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.sup-riga-stato { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.sup-oggetto, .sup-stato {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.sup-oggetto-iscrizione   { background: #dbeafe; color: #1e40af; }
.sup-oggetto-documenti    { background: #dcfce7; color: #166534; }
.sup-oggetto-segnalazione { background: #fef3c7; color: #92400e; }
.sup-oggetto-altro        { background: #e5e7eb; color: #374151; }
.sup-stato-nuovo   { background: var(--primary-bg); color: var(--primary); }
.sup-stato-corso   { background: #fef3c7; color: #92400e; }
.sup-stato-chiuso  { background: #e5e7eb; color: #374151; }
.sup-stato-inviata { background: #dcfce7; color: #166534; }
.sup-stato-errore  { background: #fee2e2; color: #b91c1c; }

/* Il testo arriva da un campo libero: si rispetta com'e stato scritto, ma
   una parola lunghissima non deve poter sfondare la colonna. */
.sup-testo { line-height: 1.65; overflow-wrap: anywhere; }
.sup-testo p:last-child { margin-bottom: 0; }

.sup-risposta {
  border-left: 3px solid #16a34a; padding: 10px 16px; margin: 12px 0;
  background: rgb(0 0 0 / .015);
}
.sup-risposta-fallita { border-left-color: #b91c1c; }
.sup-risposta-testa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sup-errore { color: #b91c1c; font-size: 13px; margin: 6px 0 0; }

/* Il campo esca dell'anti-spam: fuori dallo schermo, non `display:none` —
   qualche bot salta i campi nascosti in modo troppo evidente. */
.campo-esca {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
.form-errore {
  display: block; margin-top: 4px;
  color: #b91c1c; font-size: 13px; font-style: normal;
}
.contact-form-privacy {
  margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}

@media (max-width: 780px) {
  .sup-riga { grid-template-columns: 1fr; gap: 8px; }
  .sup-riga-stato { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .sup-riga-anteprima { white-space: normal; }
}

/* Stato di consegna di una risposta. «Inviata» diceva solo che il relay
   l'aveva presa: il rimbalzo arriva dopo, e va visto da lontano perche e
   l'unico dei tre stati che chiede di fare qualcosa. */
.sup-stato-volo { background: #e0e7ff; color: #3730a3; }
.sup-risposta-rimbalzata { border-left-color: #b91c1c; background: rgb(185 28 28 / .04); }
.sup-risposta-nonpartita { border-left-color: #b91c1c; }
.sup-risposta-involo     { border-left-color: #6366f1; }

/* --- Tendina «Scuola» nella barra ----------------------------------------
   La voce esisteva gia e puntava alla home: ora apre le sezioni canoniche
   AGID senza rubare larghezza, che nella barra e la risorsa scarsa. */
.nav-tendina { position: relative; }
.nav-tendina-bottone {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
  padding: 8px 10px; border-radius: var(--r-sm);
}
.nav-tendina-bottone:hover { color: var(--primary); }
.nav-tendina-freccia { transform: rotate(90deg); transition: transform .15s; opacity: .6; }
.nav-tendina[data-aperta] .nav-tendina-freccia { transform: rotate(-90deg); }
.nav-tendina-pannello {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 230px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 12px 32px rgb(0 0 0 / .14);
}
.nav-tendina-pannello[hidden] { display: none; }
.nav-tendina-pannello a {
  padding: 9px 12px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--text); font-size: 14.5px;
  white-space: nowrap;
}
.nav-tendina-pannello a:hover { background: var(--surface-2); color: var(--primary); }

@media (max-width: 960px) {
  /* Nel cassetto laterale non c'e niente da far scendere: le voci stanno
     gia una sotto l'altra, e una tendina dentro un cassetto e un livello
     di apertura in piu per niente. Si srotola e basta, rientrata. */
  .nav-tendina { position: static; }
  .nav-tendina-bottone { width: 100%; justify-content: flex-start; }
  .nav-tendina-freccia { margin-left: auto; }
  .nav-tendina-pannello {
    position: static; min-width: 0; box-shadow: none;
    border: 0; border-left: 2px solid var(--border);
    border-radius: 0; margin: 2px 0 6px 18px; padding: 0 0 0 8px;
  }
}

/* --- Luoghi: la scuola per edifici ---------------------------------------
   Mobile-first: le voci sono righe piene, i nomi a sinistra e la dotazione
   sotto; da 640px in su la dotazione risale sulla stessa riga, allineata a
   destra, perche li lo spazio c'e. */
.luo-edificio { padding: 0; overflow: hidden; margin: 16px 0; }
.luo-edificio-testa {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: flex-start; justify-content: space-between;
  padding: 18px 20px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.luo-edificio-nome h2 { margin: 0 0 4px; font-size: 1.15rem; }
.luo-indirizzo { margin: 0; font-size: 14px; color: var(--text-muted); }
.luo-edificio-nota { margin: 6px 0 0; font-size: 13.5px; color: var(--text-muted); }
.luo-edificio-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

.luo-gruppo { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.luo-gruppo:last-child { border-bottom: 0; }
.luo-gruppo-titolo {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.luo-conta {
  background: var(--surface-2); border-radius: 999px;
  padding: 1px 8px; font-size: 11.5px; letter-spacing: 0;
}
.luo-elenco { list-style: none; margin: 0; padding: 0; }
.luo-voce + .luo-voce { border-top: 1px solid var(--border); }
.luo-voce a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 4px; text-decoration: none; color: var(--text);
  border-radius: var(--r-sm);
}
.luo-voce a:hover { background: var(--surface-2); }
.luo-voce-nome { font-size: 15px; }
.luo-dotazione { font-size: 13px; color: var(--text-muted); }

@media (min-width: 640px) {
  .luo-voce a {
    flex-direction: row; align-items: baseline;
    justify-content: space-between; gap: 18px; padding: 9px 8px;
  }
  .luo-dotazione { text-align: right; white-space: nowrap; }
}
/* Riga di luogo senza scheda: stessa forma di quella cliccabile, ma non
   finge di essere un collegamento. */
.luo-voce-statica {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 4px;
}
@media (min-width: 640px) {
  .luo-voce-statica {
    flex-direction: row; align-items: baseline;
    justify-content: space-between; gap: 18px; padding: 9px 8px;
  }
}

/* --- Organigramma: blocchi, non pagine -----------------------------------
   A una colonna sul telefono, due dal tablet in su: i blocchi sono sei e
   di lunghezza molto diversa (uno ha una voce, uno ne ha undici), quindi
   niente griglia rigida — il masonry a colonne li lascia respirare senza
   buchi. */
.org-blocchi { margin-top: 18px; }
.org-blocco { break-inside: avoid; margin: 0 0 16px; padding: 18px 20px; }
.org-blocco-titolo {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px; font-size: 1.05rem;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.org-conta {
  background: var(--surface-2); color: var(--text-muted);
  border-radius: 999px; padding: 1px 9px;
  font-size: .72rem; font-weight: 700;
}
.org-elenco { list-style: none; margin: 0; padding: 0; }
.org-elenco li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 0;
}
.org-elenco li + li { border-top: 1px solid var(--border); }
.org-nome { font-size: 14.5px; }
.org-nota { font-size: 12.5px; color: var(--text-muted); }

@media (min-width: 820px) {
  .org-blocchi { columns: 2; column-gap: 16px; }
}

/* --- Pagina di presentazione della scuola --------------------------------- */
.scuola-apertura { margin: 8px 0 22px; }
.scuola-apertura h1 { margin: 0 0 10px; }
.scuola-claim {
  margin: 0; font-size: 1.15rem; line-height: 1.55;
  color: var(--text-muted); max-width: 60ch;
  border-left: 3px solid var(--primary); padding-left: 16px;
}
.scuola-testo { line-height: 1.7; max-width: 68ch; }

/* I numeri: grandi, perche sono la sintesi che la gente ricorda. A tre
   colonne solo quando ci stanno davvero — sotto, si impilano. */
.scuola-numeri {
  display: grid; gap: 12px; margin: 26px 0 6px;
  grid-template-columns: 1fr;
}
.scuola-numero {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.scuola-numero strong {
  font-size: 2.1rem; line-height: 1; font-family: var(--font-titolo, inherit);
  color: var(--primary);
}
.scuola-numero span { font-size: 13.5px; color: var(--text-muted); }
.scuola-numeri-nota {
  margin: 0 0 8px; font-size: 12.5px; color: var(--text-muted);
}

.scuola-sezione { margin-top: 34px; }
.scuola-sezione h2 { margin: 0 0 14px; }

/* La linea del tempo: una barra verticale con i pallini, che su telefono
   resta stretta e leggibile invece di diventare due colonne strizzate. */
.storia-linea { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.storia-linea::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.storia-tappa { position: relative; padding: 0 0 22px 12px; }
.storia-tappa:last-child { padding-bottom: 0; }
.storia-tappa::before {
  content: ""; position: absolute; left: -21px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--surface);
}
.storia-anno {
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 2px;
}
.storia-corpo strong { font-size: 15.5px; }
.storia-corpo p { margin: 3px 0 0; color: var(--text-muted); line-height: 1.6; }

.scuola-altre { display: flex; flex-wrap: wrap; gap: 10px; }
.scuola-altra {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--border);
  border-radius: 999px; text-decoration: none; color: var(--text);
  font-size: 14.5px;
}
.scuola-altra:hover { border-color: var(--primary); color: var(--primary); }

@media (min-width: 700px) {
  .scuola-numeri { grid-template-columns: repeat(3, 1fr); }
}

/* --- Pagine «I numeri» e «La storia» -------------------------------------- */
.storia-linea-ampia { margin-top: 22px; }
.storia-linea-ampia .storia-tappa { padding-bottom: 28px; }
.scuola-sezione-rimando { margin: -6px 0 14px; font-size: 14px; }
.num-provenienza { margin-top: 22px; padding: 20px 22px; }
.num-provenienza h2 { margin: 0 0 14px; font-size: 1.05rem; }
.num-provenienza dl { margin: 0; }
.num-provenienza dt {
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 14px;
}
.num-provenienza dt:first-child { margin-top: 0; }
.num-provenienza dd { margin: 4px 0 0; line-height: 1.6; }
.num-nota {
  margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted);
}

/* --- Calendario attività --------------------------------------------------
   Mobile-first: la riga si impila (quando, cosa, azioni); da 780px in su
   diventa tre colonne con la data a sinistra, come un'agenda. */
/* La card va a padding zero perche le righe arrivino ai bordi. Ma
   `.gest-testata` conta sul padding della card per il proprio respiro
   orizzontale: senza, il titolo tocca il bordo e la sua riga di sotto
   sembra passargli attraverso. Glielo ridiamo qui. */
.att-elenco { padding: 0; overflow: hidden; }
.att-elenco > .gest-testata {
  padding: 16px 20px 12px;
  margin-bottom: 0;
}
/* Il vuoto dentro una card senza padding: niente cornice tratteggiata, che
   li dentro sembra un secondo riquadro incollato male. Solo la frase. */
.att-elenco .pren-vuoto {
  margin: 0; border: 0; padding: 34px 20px; background: none;
}
.att-riga {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.att-riga:last-child { border-bottom: 0; }
.att-riga-passata { opacity: .55; }
.att-quando { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.att-quando strong { font-size: 1rem; font-family: var(--font-mono, monospace); }
.att-freccia { color: var(--text-muted); font-family: var(--font-mono, monospace); }
.att-ore { font-size: 12.5px; color: var(--text-muted); }
.att-titolo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.att-tipo {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.att-tipo-uscita       { background: #dbeafe; color: #1e40af; }
.att-tipo-viaggio      { background: #ede9fe; color: #5b21b6; }
.att-tipo-evento       { background: #dcfce7; color: #166534; }
.att-tipo-orientamento { background: #fef3c7; color: #92400e; }
.att-tipo-altro        { background: #e5e7eb; color: #374151; }
.att-classi { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.att-classe {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 7px;
  font-size: 12px; font-family: var(--font-mono, monospace);
}
.att-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.att-accomp { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
/* Non un dettaglio anagrafico: da qui dipendono le ore che restano scoperte. */
.att-accomp-manca { color: #b45309; }
.att-azioni { display: flex; justify-content: flex-start; }

/* Anche qui padding zero sulla card: lo mettono il riepilogo e il modulo,
   che altrimenti si sommavano a quello della card e ballavano fra loro. */
.att-nuova { padding: 0; }
.att-nuova > summary {
  cursor: pointer; padding: 16px 20px;
  font-size: 15px; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.att-nuova > summary::-webkit-details-marker { display: none; }
.att-nuova > summary::before {
  content: "+"; font-size: 18px; line-height: 1;
  width: 24px; height: 24px; flex: 0 0 24px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--primary-bg); color: var(--primary);
  transition: transform .15s;
}
.att-nuova[open] > summary::before { content: "−"; }
.att-nuova > summary:hover { background: var(--surface-2); }
.att-nuova[open] > summary { border-bottom: 1px solid var(--border); }
.att-nuova .gest-form { padding: 18px 20px; margin: 0; border: 0; background: none; }
.att-form-griglia { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.att-nota-ore {
  margin: -2px 0 14px; font-size: 12.5px; color: var(--text-muted);
}
/* La navigazione fra i mesi resta a destra anche quando va a capo: sotto
   il testo di guida, allineata a sinistra, sembrava caduta li per sbaglio. */
.pannello-testata .disp-nav-giorno { margin-left: auto; }

@media (min-width: 780px) {
  .att-riga {
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 18px; align-items: start;
  }
  .att-quando { flex-direction: column; gap: 2px; }
  .att-azioni { justify-content: flex-end; }
  .att-form-griglia { grid-template-columns: repeat(3, 1fr); }
}

/* --- Scelta a etichette (campo «classi coinvolte») ------------------------
   Innesto sulla casella di testo, che resta e porta il valore: senza
   JavaScript la pagina funziona come prima. */
.tagsel-nascosto {
  /* Non `display:none`: il campo deve restare raggiungibile dal modulo, e
     un campo con `display:none` sparisce anche dalla validazione. */
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.tagsel { position: relative; margin-top: 4px; }
.tagsel-scatola {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 42px; padding: 6px 8px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--r-sm, 6px);
  background: var(--surface);
  cursor: text;
}
.tagsel-scatola:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.tagsel-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 9px; border-radius: 999px;
  background: var(--primary-bg); color: var(--primary);
  font-size: 13px; font-weight: 600;
  font-family: var(--font-mono, monospace);
}
.tagsel-via {
  border: 0; background: none; cursor: pointer; padding: 0;
  width: 18px; height: 18px; border-radius: 50%;
  color: inherit; font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}
.tagsel-via:hover { background: rgb(0 0 0 / .1); }
.tagsel-ricerca {
  flex: 1 1 140px; min-width: 120px;
  border: 0; outline: none; background: none;
  font: inherit; font-size: 14.5px; padding: 4px 2px; color: var(--text);
}
/* Il modulo rifiutato perche manca una classe: si dice sulla casella, non
   con un avviso in cima che costringe a cercare quale campo fosse. */
.tagsel-ricerca-manca::placeholder { color: #b91c1c; }
.tagsel-ricerca-manca { box-shadow: inset 0 -2px 0 #b91c1c; }

/* L'elenco sta sempre aperto: e una zona della pagina, non un menu che
   compare. Niente `position: absolute`, niente ombra da oggetto sospeso —
   quelle dicono «sto coprendo qualcosa, sbrigati», ed e il contrario di
   quello che serve a chi ne deve spuntare quattro. Scorre dentro di se
   perche cinquanta classi non stanno in mezzo a un modulo. */
.tagsel-elenco {
  max-height: 210px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 10px; margin-top: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
}
.tagsel-elenco:empty { display: none; }
/* Quante ne restano, e cosa farci. Sotto la casella e sopra l'elenco: e la
   riga che si legge senza cercarla mentre si scrive. */
.tagsel-stato {
  margin: 8px 2px 0; font-size: 12.5px; color: var(--text-muted);
}
.tagsel-stato:empty { display: none; }
.tagsel-voce {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text);
  font-family: var(--font-mono, monospace);
}
.tagsel-voce:hover, .tagsel-voce:focus-visible {
  border-color: var(--primary); background: var(--primary-bg); color: var(--primary);
}
/* Cercando, la prima e quella che prende l'Invio: va detto, o si preme alla
   cieca. Senza ricerca nessuna e «la prima» e non si evidenzia niente. */
.tagsel-voce-prima { border-color: var(--primary); }

/* --- Supplenze nel pannello segreteria ----------------------------------- */
.sup-chiudi { display: inline-flex; gap: 6px; align-items: center; }
.sup-chiudi input[type="date"] {
  padding: 4px 8px; border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px); font: inherit; font-size: 13px;
  background: var(--surface); color: var(--text);
}
.btn-mini { padding: 4px 12px; font-size: .85rem; }
.sup-storico { margin: 12px 0; font-size: 13.5px; }
.sup-storico > summary { cursor: pointer; color: var(--primary); }
.sup-storico ul { margin: 8px 0 0; padding-left: 18px; }
.sup-senza-email { margin-top: 14px; }

/* --- Orario di sostegno: la griglia che il docente si compila -------------
   Cinque giorni per sette ore stanno larghi su desktop e non stanno su un
   telefono. La tabella scorre dentro il suo contenitore invece di allargare
   la pagina: la colonna delle ore resta appiccicata a sinistra, altrimenti
   scorrendo si perde di vista a che ora si sta scrivendo. */
.sost-perche { padding: 20px 22px; }
.sost-perche h2 { margin: 0 0 10px; font-size: 17px; }
.sost-perche ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 8px; }
.sost-perche li { font-size: 14px; line-height: 1.5; }
.sost-perche p { margin: 0; font-size: 13px; }

.sost-stato {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 14px 20px; margin-top: 16px;
}
.sost-stato .muted { font-size: 13px; }
.sost-stato form { margin: 0; }

.sost-griglia-guscio { padding: 16px; margin-top: 16px; }
.sost-griglia-scorri { overflow-x: auto; }
.sost-griglia { border-collapse: collapse; width: 100%; min-width: 520px; }
.sost-griglia th, .sost-griglia td { padding: 4px; }
.sost-griglia thead th {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); text-align: center;
  padding-bottom: 8px;
}
.sost-griglia tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-align: right; padding-right: 10px; white-space: nowrap;
}
.sost-griglia td input {
  width: 100%; min-width: 74px; padding: 8px 6px;
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  background: var(--surface); color: var(--text);
  font-size: 14px; text-align: center; text-transform: uppercase;
}
.sost-griglia td input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.sost-griglia td input:placeholder-shown { color: var(--text-muted); }
.sost-nota { margin: 12px 4px 0; font-size: 13px; }

/* --- Ore presidiate dal sostegno, nel pannello del vicario ---------------
   Non sono ore risolte: sono ore che il pannello ha deciso di non chiedere.
   Stanno chiuse ma si aprono, perché una decisione presa per conto di
   qualcuno deve almeno essere guardabile. */
.disp-presidiate { margin: 18px 0 6px; }
.disp-presidiate > summary {
  cursor: pointer; padding: 12px 16px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md, 10px);
  font-size: 14px; color: var(--text-muted);
}
.disp-presidiate > summary:hover { background: var(--surface-2); }
.disp-presidiate[open] > summary { margin-bottom: 10px; }
.disp-presidiate ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
.disp-presidiate li { font-size: 14px; }
.disp-presidiate .muted { font-size: 13px; }

/* --- Il livello «di sostegno» nella cascata -------------------------------
   Ambra e non rosso: non è un divieto, è un costo. A quell'ora il docente ha
   un alunno accanto, e il motore per questo non lo propone mai — ma se il
   vicario sa che oggi quell'alunno è assente, è la persona più libera della
   scuola. Il nome porta con sé la classe: «col suo alunno» da solo non dice
   cosa si sta togliendo a chi. */
.disp-lvl-sostegno { border-left-color: #d97706; }
.disp-liv-sostegno { background: #fef3c7; color: #92400e; }
.disp-cand-dove {
  margin-left: 5px; padding: 1px 5px;
  border-radius: 4px; background: #fef3c7; color: #92400e;
  font-size: 11px; font-weight: 700;
}

/* --- Bacheca sindacale ----------------------------------------------------
   L'avviso «riservata al personale» sta in cima e non è decorativo: chi apre
   la pagina deve sapere, prima di leggere, che quello che vede non è pubblico
   e che inoltrarlo fuori non è come inoltrare una circolare. */
.bacheca-riservata { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; }
.bacheca-riservata svg { flex: none; margin-top: 2px; }

/* Le scadute non spariscono: sbiadiscono e scendono in fondo. Un volantino
   staccato dall'albo va nel raccoglitore, non nel cestino — e chi cerca a
   maggio la convocazione di marzo la deve ritrovare. */
.bacheca-scaduta { opacity: .62; }
.bacheca-scaduta:hover { opacity: 1; }
.bacheca-tag-scaduta,
.bacheca-tag-fino {
  flex: none; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.bacheca-tag-scaduta { background: var(--surface-2); color: var(--text-muted); }
.bacheca-tag-fino { background: #dbeafe; color: #1e40af; }

.area-rimando {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  padding: 18px 20px; margin-top: 18px;
}
.area-rimando h2 { margin: 0 0 6px; font-size: 17px; }
.area-rimando p { margin: 0; font-size: 14px; color: var(--text-muted); max-width: 62ch; }

/* La data di aggiornamento di un modulo, accanto al nome. Non è decorazione:
   un modulo rifatto a settembre e consegnato nella versione di giugno torna
   indietro dallo sportello, e chi l'ha compilato non ha modo di saperlo. */
.mod-file-data {
  flex: none; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}

/* La classe accanto ai destinatari di una circolare. Neutra di proposito: i
   destinatari hanno un colore ciascuno perché sono quattro e si riconoscono
   a colpo d'occhio, le classi sono cinquanta e un colore per ciascuna
   sarebbe rumore. */
.circ-cat-classe {
  background: var(--surface-2);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Preferenze notifiche: la matrice evento × canale --------------------
   Su schermo largo è una tabella e va benissimo. Su un telefono no: cinque
   colonne non ci stanno, e farla scorrere di lato è peggio che inutile —
   scorrendo si perde di vista la riga, cioè di quale evento si sta spuntando
   il canale, e si finisce per attivare la cosa sbagliata. È il difetto che si
   vede nella schermata: la colonna «Push» tagliata fuori dal bordo. */
.notif-scorri { overflow-x: auto; }
.notif-matrice { width: 100%; border-collapse: collapse; }
.notif-matrice th,
.notif-matrice td { padding: 12px 10px; vertical-align: top; }
.notif-matrice thead th {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border); text-align: left;
}
.notif-matrice tbody tr { border-bottom: 1px solid var(--border); }
.notif-matrice tbody tr:last-child { border-bottom: 0; }
.notif-matrice .notif-evento strong { font-size: 14.5px; }
.notif-matrice .notif-evento .muted { font-size: 13px; margin-top: 2px; }
.notif-col { text-align: center; white-space: nowrap; }
.notif-col input { width: 19px; height: 19px; accent-color: var(--primary); cursor: pointer; }
/* Il nome del canale sta nell'intestazione: nella cella sarebbe ripetuto
   quaranta volte. Torna sotto i 760px, dove l'intestazione non c'è più. */
.notif-col label > span { display: none; }
.notif-col label { display: inline-flex; cursor: pointer; }

@media (max-width: 760px) {
  /* La tabella diventa un elenco di schede. Il documento resta una tabella —
     è quello che è — e cambia solo come la si dispone. */
  .notif-matrice thead { display: none; }
  .notif-matrice,
  .notif-matrice tbody,
  .notif-matrice tr,
  .notif-matrice td { display: block; width: auto; }
  .notif-matrice tbody tr {
    border: 1px solid var(--border); border-radius: var(--r-md, 10px);
    padding: 14px; margin-bottom: 12px;
  }
  .notif-matrice tbody tr:last-child { margin-bottom: 0; }
  .notif-matrice td { padding: 0; }
  .notif-matrice .notif-evento { margin-bottom: 12px; }

  /* I canali: pulsanti larghi abbastanza da centrarli col pollice, con il
     nome scritto accanto invece che in cima a una colonna che non c'è più. */
  .notif-col { display: inline-block; margin: 0 8px 8px 0; }
  .notif-col label {
    align-items: center; gap: 8px;
    padding: 9px 14px 9px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    font-size: 13.5px; font-weight: 600;
  }
  .notif-col label > span { display: inline; }
  /* Acceso si vede senza doverci guardare dentro: la spunta da sola, su un
     telefono in mano, è troppo piccola per dire lo stato a colpo d'occhio. */
  .notif-col label:has(input:checked) {
    border-color: var(--primary); background: var(--primary-bg); color: var(--primary);
  }
  .notif-col label:focus-within {
    box-shadow: 0 0 0 3px var(--primary-bg);
  }
}