/**
 * PARTECIPA — MOOC · Componenti UI
 * ============================================================================
 * Libreria di componenti riusabili dell'area MOOC, fedele ai mockup committente.
 * Dipende da tokens.css. Stile: card morbide, ombre leggere, molto whitespace,
 * line-icon, sidebar fissa + top bar, accent tematico per modulo.
 * ============================================================================ */

/* ----------------------------- BASE ------------------------------------- */
/* *, html: globali, non influenzano l'Astra chrome. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* body: SOLO su template area-riservata (Astra dequeued → MOOC possiede la pagina).
   Su student-registration l'Astra shell resta intatta: questa regola NON si applica.
   CR-01 fix 2026-06-27 — evita bleed su shell Astra. */
body.pa-area-riservata {
  margin: 0;
  font-family: var(--mooc-font-body);
  font-size: var(--mooc-fs-body);
  line-height: var(--mooc-lh-body);
  color: var(--mooc-ink);
  background: var(--mooc-bg-app);
}

/* Reset elementi: scopati ai container MOOC (.mooc-app su area-riservata,
   .mooc-form-page su student-registration). Il chrome Astra (header/footer/body)
   rimane invariato. CR-01 fix 2026-06-27. */
.mooc-app h1, .mooc-app h2, .mooc-app h3, .mooc-app h4,
.mooc-form-page h1, .mooc-form-page h2, .mooc-form-page h3, .mooc-form-page h4 {
  font-family: var(--mooc-font-head); font-weight: 600; line-height: 1.2; margin: 0; color: var(--mooc-navy);
}
.mooc-app p, .mooc-form-page p { margin: 0; }
/* :not(.mooc-btn) evita il conflitto di specificità con i bottoni <a>:
   .mooc-app a:not(.mooc-btn) (0,2,1) > .mooc-btn--module (0,1,0) rimane fuori scope. */
.mooc-app a:not(.mooc-btn), .mooc-form-page a:not(.mooc-btn) { color: var(--mooc-navy); text-decoration: none; }
.mooc-app a:not(.mooc-btn):hover, .mooc-form-page a:not(.mooc-btn):hover { text-decoration: underline; }
/* WCAG 1.4.1: link in blocchi di testo devono essere distinguibili senza colore.
   .mooc-form-page__login-link contiene testo "Accedi" in prosa → underline sempre.
   Specificità 0,2,1 = uguale a .mooc-form-page a:not(.mooc-btn); vince per cascade order. */
.mooc-form-page .mooc-form-page__login-link a { text-decoration: underline; }
.mooc-app img, .mooc-app svg, .mooc-form-page img, .mooc-form-page svg { display: block; max-width: 100%; }
.mooc-app ul, .mooc-form-page ul { margin: 0; padding: 0; list-style: none; }
.mooc-app :focus-visible, .mooc-form-page :focus-visible { outline: none; box-shadow: var(--mooc-focus); border-radius: 6px; }
.mooc-icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mooc-eyebrow { font-size: var(--mooc-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mooc-navy); }
.mooc-muted { color: var(--mooc-muted); }
.mooc-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mooc-sr:focus,
.mooc-sr:focus-visible {
  position: fixed;
  top: 8px; left: 8px;
  width: auto; height: auto;
  clip: auto;
  overflow: visible;
  white-space: normal;
  padding: 8px 16px;
  background: var(--mooc-navy);
  color: #fff;
  font-size: var(--mooc-fs-body);
  font-weight: 600;
  border-radius: 6px;
  box-shadow: var(--mooc-focus); /* WR-04 fix: --mooc-focus include già "0 0 0 3px …", il prefisso extra era malformato */
  z-index: 9999;
  text-decoration: none;
}

/* --------------------------- APP SHELL ---------------------------------- */
.mooc-app { min-height: 100vh; display: grid; grid-template-columns: var(--mooc-sidebar-w) 1fr; }
.mooc-main { display: flex; flex-direction: column; min-width: 0; }
.mooc-canvas { padding: 32px clamp(20px, 4vw, 56px); max-width: calc(var(--mooc-content-max) + 112px); width: 100%; }
.mooc-page-head { margin-bottom: 24px; }
.mooc-page-head h1 { font-size: var(--mooc-fs-display); }
.mooc-page-head p { color: var(--mooc-muted); margin-top: 6px; max-width: 60ch; }

/* ---------------------------- SIDEBAR ----------------------------------- */
/* Sidebar globale = navy. Sidebar di modulo eredita --mooc-accent-strong via
   .mooc-sidebar--module dentro un contenitore .mooc-theme--mN. */
.mooc-sidebar {
  background: var(--mooc-navy);
  color: #cfd6e6;
  display: flex; flex-direction: column;
  padding: 22px 16px;
  position: sticky; top: 0; align-self: start; height: 100vh;
}
.mooc-sidebar--module { background: var(--mooc-accent-strong); }
.mooc-brand { display: flex; flex-direction: column; line-height: 1; padding: 4px 8px 22px; }
.mooc-brand b { font-family: var(--mooc-font-head); font-weight: 600; font-size: 1.05rem; color: #fff; letter-spacing: .02em; }
.mooc-brand span { font-family: var(--mooc-font-head); font-weight: 600; font-size: 1.05rem; color: var(--mooc-green); letter-spacing: .02em; }
.mooc-nav { display: flex; flex-direction: column; gap: 4px; }
.mooc-nav__eyebrow { font-size: var(--mooc-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); padding: 0 12px 8px; }
/* .mooc-app prefisso: vince su `.mooc-app a:not(.mooc-btn)` (0-2-1) che
   altrimenti forza il colore navy scuro → link non-attivi invisibili su sidebar navy. */
.mooc-app .mooc-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--mooc-r-lg);
  color: #cfd6e6; font-size: var(--mooc-fs-body); font-weight: 500;
}
.mooc-nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.mooc-nav a.is-active { background: var(--mooc-blue); color: #fff; font-weight: 600; } /* WCAG AAA: blu UNISA #2F577F su bianco 7.53:1; bianco su blu 7.53:1 AAA ✓ */
.mooc-sidebar--module .mooc-nav a.is-active { background: rgba(255,255,255,.95); color: var(--mooc-accent-strong); }
.mooc-nav .mooc-icon { width: 20px; height: 20px; }
.mooc-sidebar__foot { margin-top: auto; padding: 18px 12px 4px; }
.mooc-sidebar__claim { font-family: var(--mooc-font-head); font-weight: 600; color: #fff; font-size: .95rem; }
.mooc-sidebar__claim em { color: var(--mooc-green); font-style: normal; }
.mooc-modinfo { padding: 2px 12px 16px; }
.mooc-modinfo .mooc-eyebrow { color: rgba(255,255,255,.7); }
.mooc-modinfo b { display: block; color: #fff; font-family: var(--mooc-font-head); font-size: 1.05rem; margin-top: 4px; }
.mooc-sidebar--module .mooc-progress__track { background: rgba(255,255,255,.25); }
.mooc-sidebar--module .mooc-progress__bar { background: #fff; }
.mooc-sidebar--module .mooc-muted,
.mooc-sidebar--module .mooc-back { color: rgba(255,255,255,.85); }
.mooc-sidebar--module .mooc-sidebar__foot a { color: #fff; }
.mooc-back { display: inline-flex; align-items: center; gap: 8px; color: #cfd6e6; font-size: var(--mooc-fs-sm); margin-top: 14px; }

/* Voci sidebar "in arrivo": feature MOOC non ancora costruite (Fase 9/10/v2).
   Non cliccabili, mutate, con badge — così è chiaro che sono future, non rotte. */
.mooc-nav__soon {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--mooc-r-lg);
  color: rgba(207,214,230,.5); font-size: var(--mooc-fs-body); font-weight: 500;
  cursor: not-allowed;
}
.mooc-nav__soon .mooc-icon { width: 20px; height: 20px; opacity: .6; }
.mooc-nav__soon-badge {
  margin-left: auto; font-style: normal; font-size: var(--mooc-fs-xs);
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.6); background: rgba(255,255,255,.1);
  padding: 2px 8px; border-radius: var(--mooc-r-pill);
}

/* ---------------------------- TOP BAR ----------------------------------- */
.mooc-topbar {
  height: var(--mooc-topbar-h); flex: none;
  display: flex; align-items: center; gap: 24px;
  padding: 0 clamp(20px, 4vw, 56px);
  background: #fff; border-bottom: 1px solid var(--mooc-line);
  position: sticky; top: 0; z-index: 10;
}
.mooc-topbar__brand { display: flex; align-items: center; gap: 10px; font-family: var(--mooc-font-head); font-weight: 600; color: var(--mooc-navy); }
.mooc-topbar__logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--mooc-navy), var(--mooc-blue)); flex: none; }
.mooc-topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mooc-topnav a { padding: 8px 14px; border-radius: var(--mooc-r-pill); color: var(--mooc-ink); font-size: var(--mooc-fs-sm); font-weight: 500; }
.mooc-topnav a:hover { background: var(--mooc-bg-app); text-decoration: none; }
.mooc-topnav a.is-active { background: var(--mooc-blue-100); color: var(--mooc-navy); font-weight: 600; }
.mooc-topbar__tools { display: flex; align-items: center; gap: 14px; }
.mooc-topbar__tools .mooc-icon { color: var(--mooc-muted); }
.mooc-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--mooc-navy); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: var(--mooc-fs-sm); }

/* Switcher lingua nel topbar area riservata — allineato al frontend (.pa-lang-switcher,
   D-19): SOLO bandiera, tendina bianca arrotondata all'hover. brand.css NON è caricato
   qui, quindi le regole del frontend vanno replicate scoped a .mooc-lang. */
.mooc-lang { display: flex; align-items: center; }
.mooc-lang .trp-shortcode-switcher__wrapper,
.mooc-lang .trp-current-language-item__wrapper {
  display: flex !important; align-items: center !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
.mooc-lang .trp-flag-image { vertical-align: middle; }
/* Solo bandiera: nascondi nome lingua + freccia tendina (come nel frontend). */
.mooc-lang .trp-language-item-name,
.mooc-lang .trp-shortcode-arrow { display: none !important; }
.mooc-lang .trp-shortcode-switcher__wrapper {
  --bg: transparent !important; --bg-hover: transparent !important;
  --border: none !important; --border-width: 0 !important;
  --border-color: transparent !important; --border-radius: 0 !important;
  --flag-size: 22px !important;
}
.mooc-lang .trp-current-language-item__wrapper,
.mooc-lang .trp-language-item { cursor: pointer; }
.mooc-lang .trp-shortcode-switcher__wrapper a,
.mooc-lang .trp-shortcode-switcher__wrapper a:hover,
.mooc-lang .trp-shortcode-switcher__wrapper a:focus,
.mooc-lang .trp-shortcode-switcher__wrapper a:focus-visible { text-decoration: none; }
/* Tendina aperta: leggibile e con raggio coerente col design MOOC. */
.mooc-lang .trp-switcher-dropdown-list {
  background: #fff !important; min-width: 100%;
  box-shadow: 0 6px 20px rgba(20,56,82,.15);
  border: 1px solid rgba(20,56,82,.1);
  border-radius: var(--mooc-r-sm, 8px);
}
.mooc-lang .trp-switcher-dropdown-list .trp-language-item {
  padding: .45rem .6rem; justify-content: center;
}
/* Floater TRP (.trp-floating-switcher, position:fixed in basso): nascosto anche
   nell'area riservata — qui brand.css che lo nasconde nel frontend non è caricato. */
.trp-floating-switcher { display: none !important; }

/* ---------------------------- BUTTONS ----------------------------------- */
.mooc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mooc-font-body); font-size: var(--mooc-fs-body); font-weight: 600;
  padding: 11px 20px; border-radius: var(--mooc-r); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .05s, background .15s, box-shadow .15s; text-decoration: none;
}
.mooc-btn:active { transform: translateY(1px); }
.mooc-btn .mooc-icon { width: 18px; height: 18px; }
.mooc-btn--primary { background: var(--mooc-navy); color: #fff; }
.mooc-btn--primary:hover { background: var(--mooc-navy-700); text-decoration: none; }
.mooc-btn--primary::after { content: "\2192"; font-weight: 700; }
.mooc-btn--navy { background: var(--mooc-navy); color: #fff; }
.mooc-btn--navy:hover { background: var(--mooc-navy-700); text-decoration: none; }
.mooc-btn--ghost { background: #fff; color: var(--mooc-navy); border-color: var(--mooc-navy); }
.mooc-btn--ghost:hover { background: var(--mooc-blue-100); text-decoration: none; }
/* Bottone tematizzato per modulo: usa accent del contenitore .mooc-theme--mN */
.mooc-btn--module { background: var(--mooc-accent-strong); color: #fff; }
.mooc-btn--module:hover { filter: brightness(.92); text-decoration: none; }
.mooc-btn--module-soft { background: var(--mooc-accent-100); color: var(--mooc-accent-strong); }
.mooc-btn--block { width: 100%; }
.mooc-btn--sm { padding: 8px 14px; font-size: var(--mooc-fs-sm); border-radius: var(--mooc-r-sm); }

/* ----------------------------- CARDS ------------------------------------ */
.mooc-card { background: var(--mooc-bg); border: 1px solid var(--mooc-line); border-radius: var(--mooc-r-lg); padding: var(--mooc-pad-card); box-shadow: var(--mooc-sh-sm); }
.mooc-card--pad-lg { padding: 28px; }
.mooc-card__title { font-size: var(--mooc-fs-h3); margin-bottom: 4px; }
.mooc-grid { display: grid; gap: var(--mooc-gap); }
.mooc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mooc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mooc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mooc-grid--feature { grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 1000px){ .mooc-grid--4{grid-template-columns:repeat(2,1fr)} .mooc-grid--3{grid-template-columns:repeat(2,1fr)} .mooc-grid--feature{grid-template-columns:1fr} }
@media (max-width: 640px){ .mooc-grid--2,.mooc-grid--4{grid-template-columns:1fr} }

/* ----------------------- HERO (homepage MOOC) --------------------------- */
.mooc-hero {
  border-radius: var(--mooc-r-xl); padding: 38px 40px; color: #fff;
  background: linear-gradient(110deg, var(--mooc-hero-from), var(--mooc-hero-to));
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center;
  position: relative; overflow: hidden;
}
.mooc-hero h2 { color: #fff; font-size: 1.9rem; line-height: 1.15; }
.mooc-hero p { color: rgba(255,255,255,.92); margin: 14px 0 22px; max-width: 36ch; }
.mooc-hero__art { aspect-ratio: 16/10; width: 100%; border-radius: var(--mooc-r-lg); object-fit: cover; background: rgba(255,255,255,.16); }
/* Il video di presentazione è 16:9 e non va tagliato: `contain` su fondo scuro, così
   i bumper del brand restano interi anche quando la colonna dell'hero è più stretta. */
.mooc-hero__video { aspect-ratio: 16/9; object-fit: contain; background: #0e1836; display: block; }
@media (max-width: 760px){ .mooc-hero{grid-template-columns:1fr} }

/* ----------------- MODULE CARDS ("I 4 moduli del percorso") -------------- */
.mooc-modcard { position: relative; background: var(--mooc-bg); border: 1px solid var(--mooc-line); border-radius: var(--mooc-r-lg); padding: 22px 18px; box-shadow: var(--mooc-sh-sm); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.mooc-modcard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--mooc-accent); }
.mooc-modcard__num { font-family: var(--mooc-font-head); font-weight: 600; font-size: 2rem; color: var(--mooc-accent); line-height: 1; }
.mooc-modcard__title { font-size: var(--mooc-fs-h3); color: var(--mooc-navy); }
.mooc-modcard__icon { width: 56px; height: 56px; color: var(--mooc-accent); }
.mooc-modcard__meta { font-size: var(--mooc-fs-sm); color: var(--mooc-muted); margin-top: auto; }
.mooc-modcard--soft { background: var(--mooc-accent-100); border-color: transparent; }

/* ----------------------- STAT / FEATURE CARDS --------------------------- */
.mooc-stat { display: flex; gap: 16px; align-items: center; }
.mooc-stat__ico { width: 46px; height: 46px; border-radius: var(--mooc-r-lg); background: var(--mooc-blue-100); color: var(--mooc-navy); display: grid; place-items: center; flex: none; }
.mooc-stat__big { font-family: var(--mooc-font-head); font-weight: 600; font-size: 1.6rem; color: var(--mooc-navy); line-height: 1; }
.mooc-feature { text-align: left; }
.mooc-feature__ico { width: 52px; height: 52px; border-radius: 50%; background: var(--mooc-blue-100); color: var(--mooc-navy); display: grid; place-items: center; margin-bottom: 14px; }
.mooc-feature h3 { font-size: var(--mooc-fs-h3); margin-bottom: 6px; }
.mooc-feature p { color: var(--mooc-muted); font-size: var(--mooc-fs-sm); }

/* ----------------------------- PROGRESS --------------------------------- */
.mooc-progress { display: flex; flex-direction: column; gap: 6px; }
.mooc-progress__track { height: 8px; border-radius: var(--mooc-r-pill); background: var(--mooc-line); overflow: hidden; }
.mooc-progress__bar { height: 100%; border-radius: inherit; background: var(--mooc-green-ink); }
.mooc-progress__bar--accent { background: var(--mooc-accent); }
.mooc-progress__row { display: flex; justify-content: space-between; font-size: var(--mooc-fs-sm); color: var(--mooc-muted); }
/* Donut progress (conic-gradient): imposta --val (0..100) inline */
.mooc-donut { --val: 60; width: 96px; height: 96px; border-radius: 50%; flex: none; position: relative;
  background: conic-gradient(var(--mooc-navy) calc(var(--val) * 1%), var(--mooc-blue-100) 0); display: grid; place-items: center; }
.mooc-donut span { width: 70px; height: 70px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--mooc-font-head); font-weight: 600; color: var(--mooc-navy); }

/* ---------------------------- TAGS / BADGES ----------------------------- */
.mooc-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--mooc-r-pill); font-size: var(--mooc-fs-xs); font-weight: 600; letter-spacing: .02em; }
.mooc-tag--teal { background: var(--mooc-teal-100); color: var(--mooc-teal-ink); }
.mooc-tag--green { background: var(--mooc-green-100); color: var(--mooc-green-ink); }
.mooc-tag--m3 { background: var(--mooc-m3-100); color: var(--mooc-m3-ink); }
.mooc-tag--m1 { background: var(--mooc-m1-100); color: var(--mooc-m1-strong); }
.mooc-pill-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mooc-fs-sm); font-weight: 600; color: var(--mooc-green-ink); }
.mooc-pill-status .mooc-icon { width: 16px; height: 16px; }

/* --------------------------- LIST WIDGET -------------------------------- */
.mooc-list { display: flex; flex-direction: column; }
.mooc-list__item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mooc-line-soft); }
.mooc-list__item:last-child { border-bottom: 0; }
.mooc-list__ico { width: 34px; height: 34px; border-radius: 9px; background: var(--mooc-bg-app); color: var(--mooc-muted); display: grid; place-items: center; flex: none; }
.mooc-list__main { min-width: 0; }
.mooc-list__main b { display: block; font-size: var(--mooc-fs-body); color: var(--mooc-navy); font-weight: 600; }
.mooc-list__main small { color: var(--mooc-muted); font-size: var(--mooc-fs-sm); }
.mooc-list__time { margin-left: auto; color: var(--mooc-muted); font-size: var(--mooc-fs-sm); white-space: nowrap; }

/* --------------------------- MEDIA PLAYER ------------------------------- */
.mooc-player { border-radius: var(--mooc-r-lg); overflow: hidden; background: #0f1b2e; }
.mooc-player__stage { aspect-ratio: 16/9; background: linear-gradient(135deg, #cfe6df, #aacbe6); display: grid; place-items: center; position: relative; overflow: hidden; }
.mooc-player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mooc-player__play { position: relative; z-index: 1; }
.mooc-player__play { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--mooc-accent-strong); display: grid; place-items: center; box-shadow: var(--mooc-sh); }
.mooc-player__play .mooc-icon { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.mooc-player__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: #cfd6e6; font-size: var(--mooc-fs-sm); }
.mooc-player__bar .mooc-icon { width: 18px; height: 18px; color: #cfd6e6; }
.mooc-player__seek { flex: 1; height: 5px; border-radius: var(--mooc-r-pill); background: rgba(255,255,255,.25); }
.mooc-player__seek i { display: block; height: 100%; width: 8%; border-radius: inherit; background: #fff; }
.mooc-player__label { position: absolute; top: 14px; left: 16px; color: #fff; font-weight: 600; font-family: var(--mooc-font-head); background: rgba(15,27,46,.35); padding: 4px 10px; border-radius: var(--mooc-r-pill); }

/* --------------------------- TIP BANNER --------------------------------- */
.mooc-tip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--mooc-r); background: var(--mooc-bg-soft); border: 1px solid var(--mooc-line); font-size: var(--mooc-fs-sm); color: var(--mooc-muted); }
.mooc-tip .mooc-icon { color: var(--mooc-m3); flex: none; }
.mooc-tip b { color: var(--mooc-navy); }

/* --------------------------- CONTENT TILE (unità) ----------------------- */
.mooc-tile { display: flex; flex-direction: column; gap: 8px; }
.mooc-tile__ico { width: 44px; height: 44px; border-radius: var(--mooc-r-lg); background: var(--mooc-accent-100); color: var(--mooc-accent-strong); display: grid; place-items: center; }
.mooc-tile h3 { font-size: var(--mooc-fs-h3); }
.mooc-tile p { color: var(--mooc-muted); font-size: var(--mooc-fs-sm); }
.mooc-stack { display: flex; flex-direction: column; gap: var(--mooc-gap); }
.mooc-flex { display: flex; align-items: center; gap: 12px; }
.mooc-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-auto{margin-top:auto} .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}

/* ============================ ESTENSIONI ================================= */

/* ---- Pannello laterale soft (info registrazione/privacy) ---- */
.mooc-aside-soft { background: var(--mooc-blue-100); border: 1px solid var(--mooc-line); border-radius: var(--mooc-r-lg); padding: 26px; }
.mooc-aside-soft h3 { color: var(--mooc-navy); font-size: var(--mooc-fs-h3); }
.mooc-aside-soft .mooc-icon { color: var(--mooc-navy); }

/* ---- Form ---- */
.mooc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
@media (max-width: 720px){ .mooc-form-grid{grid-template-columns:1fr} }
.mooc-field { display: flex; flex-direction: column; gap: 6px; }
.mooc-field > label { font-weight: 600; font-size: var(--mooc-fs-sm); color: var(--mooc-navy); }
.mooc-field small { color: var(--mooc-muted); font-size: var(--mooc-fs-sm); }
.mooc-input, .mooc-textarea, .mooc-select {
  font: inherit; color: var(--mooc-ink); background: #fff;
  border: 1.5px solid var(--mooc-line); border-radius: var(--mooc-r-lg); padding: 11px 13px; width: 100%;
}
.mooc-input::placeholder, .mooc-textarea::placeholder { color: #9aa3b2; }
.mooc-input:focus, .mooc-textarea:focus, .mooc-select:focus { outline: none; border-color: var(--mooc-navy); box-shadow: var(--mooc-focus); }
.mooc-textarea { min-height: 92px; resize: vertical; }
.mooc-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--mooc-fs-sm); color: var(--mooc-muted); }
.mooc-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mooc-navy); flex: none; }
.mooc-upload { border: 2px dashed var(--mooc-line); border-radius: var(--mooc-r-lg); padding: 22px; text-align: center; color: var(--mooc-muted); font-size: var(--mooc-fs-sm); }

/* ---- Accordion ---- */
.mooc-acc__item { border: 1px solid var(--mooc-line); border-radius: var(--mooc-r-lg); margin-bottom: 12px; background: #fff; }
.mooc-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 600; color: var(--mooc-navy); cursor: pointer; }
.mooc-acc__head .mooc-icon { color: var(--mooc-muted); width: 18px; height: 18px; }
.mooc-acc__body { padding: 0 18px 16px; color: var(--mooc-muted); font-size: var(--mooc-fs-sm); }

/* ---- Stepper orizzontale ---- */
.mooc-stepper { display: flex; align-items: flex-start; }
.mooc-stepper__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; }
.mooc-stepper__step::before { content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px; background: var(--mooc-line); z-index: 0; }
.mooc-stepper__step:first-child::before { display: none; }
.mooc-stepper__num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--mooc-line); color: var(--mooc-muted); font-weight: 600; position: relative; z-index: 1; }
.mooc-stepper__step.is-active .mooc-stepper__num { background: var(--mooc-navy); border-color: var(--mooc-navy); color: #fff; }
.mooc-stepper__step.is-active::before, .mooc-stepper__step.is-done::before { background: var(--mooc-navy); }
.mooc-stepper__lbl { font-size: var(--mooc-fs-sm); color: var(--mooc-muted); font-weight: 600; }
.mooc-stepper__step.is-active .mooc-stepper__lbl { color: var(--mooc-navy); }

/* ---- Step list verticale (onboarding) ---- */
.mooc-vsteps { display: flex; flex-direction: column; gap: 22px; }
.mooc-vstep { display: flex; gap: 16px; }
.mooc-vstep__num { width: 34px; height: 34px; border-radius: 50%; background: var(--mooc-navy); color: #fff; display: grid; place-items: center; font-weight: 600; flex: none; }
.mooc-vstep h3 { font-size: var(--mooc-fs-h3); }
.mooc-vstep p { color: var(--mooc-muted); font-size: var(--mooc-fs-sm); }

/* ---- Tabella discussioni (forum) ---- */
.mooc-table { width: 100%; border-collapse: collapse; }
.mooc-table th { text-align: left; font-size: var(--mooc-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--mooc-muted); padding: 10px 12px; border-bottom: 1px solid var(--mooc-line); }
.mooc-table td { padding: 14px 12px; border-bottom: 1px solid var(--mooc-line-soft); font-size: var(--mooc-fs-sm); color: var(--mooc-muted); vertical-align: middle; }
.mooc-table td b { color: var(--mooc-navy); font-weight: 600; display: block; font-size: var(--mooc-fs-body); }
.mooc-table .mooc-icon { color: var(--mooc-navy); width: 18px; height: 18px; }
.mooc-table tr:hover td { background: var(--mooc-bg-soft); }

/* ---- Resource card + ricerca/filtri ---- */
.mooc-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--mooc-line); border-radius: var(--mooc-r-pill); padding: 10px 18px; flex: 1; }
.mooc-search input { border: 0; outline: none; font: inherit; width: 100%; }
.mooc-search .mooc-icon { color: var(--mooc-muted); }
.mooc-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.mooc-filters .mooc-select { width: auto; border-radius: var(--mooc-r-pill); padding: 8px 16px; font-size: var(--mooc-fs-sm); }
.mooc-rescard { display: flex; flex-direction: column; gap: 10px; }
.mooc-rescard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mooc-rescard__ico { width: 44px; height: 44px; border-radius: var(--mooc-r-lg); background: var(--mooc-blue-100); color: var(--mooc-navy); display: grid; place-items: center; flex: none; }
.mooc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mooc-pager { display: flex; gap: 6px; justify-content: center; align-items: center; }
.mooc-pager a { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--mooc-muted); font-size: var(--mooc-fs-sm); border: 1px solid var(--mooc-line); }
.mooc-pager a.is-active { background: var(--mooc-navy); color: #fff; border-color: var(--mooc-navy); }

/* ---- Calendario ---- */
.mooc-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mooc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mooc-cal span.dow { text-align: center; font-size: var(--mooc-fs-xs); text-transform: uppercase; color: var(--mooc-muted); padding: 6px 0; font-weight: 600; }
.mooc-cal a.day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; color: var(--mooc-ink); font-size: var(--mooc-fs-sm); }
.mooc-cal a.day:hover { background: var(--mooc-bg-app); text-decoration: none; }
.mooc-cal a.day.is-muted { color: #b9c0cd; }
.mooc-cal a.day.is-today { background: var(--mooc-navy); color: #fff; font-weight: 600; }
.mooc-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--mooc-fs-sm); color: var(--mooc-muted); }
.mooc-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.mooc-event { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mooc-line-soft); }
.mooc-event:last-child { border-bottom: 0; }
.mooc-event__bar { width: 4px; border-radius: 4px; background: var(--mooc-navy); flex: none; }

/* ---- Medaglia badge ---- */
.mooc-medal { width: 200px; aspect-ratio: 1/1.1; margin: 0 auto; background: linear-gradient(160deg, var(--mooc-navy), var(--mooc-blue)); color: #fff; display: grid; place-items: center; text-align: center; padding: 18px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: var(--mooc-sh); }
.mooc-medal b { font-family: var(--mooc-font-head); font-size: 1rem; line-height: 1.2; display: block; }
.mooc-summary { display: flex; flex-direction: column; gap: 14px; }
.mooc-summary li { display: flex; align-items: center; gap: 12px; }
.mooc-summary .mooc-icon { color: var(--mooc-navy); }
.mooc-summary b { margin-left: auto; color: var(--mooc-navy); font-family: var(--mooc-font-head); }

/* ---- Profilo ---- */
.mooc-profile { display: flex; align-items: center; gap: 16px; }
.mooc-profile img { width: 72px; height: 72px; border-radius: 50%; }
.mooc-profile h2 { font-size: var(--mooc-fs-h2); }

/* ---- Quiz ---- */
.mooc-quiz-opt { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--mooc-line); border-radius: var(--mooc-r-lg); padding: 14px 16px; margin-bottom: 12px; cursor: pointer; }
.mooc-quiz-opt:hover { border-color: var(--mooc-navy); }
.mooc-quiz-opt.is-correct { border-color: var(--mooc-green-ink); background: var(--mooc-green-100); }
.mooc-quiz-opt__key { width: 32px; height: 32px; border-radius: 8px; background: var(--mooc-bg-app); display: grid; place-items: center; font-weight: 600; color: var(--mooc-navy); flex: none; }
.mooc-quiz-opt.is-correct .mooc-quiz-opt__key { background: var(--mooc-green-ink); color: #fff; }
.mooc-qnav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mooc-qnav span { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--mooc-line); display: grid; place-items: center; font-size: var(--mooc-fs-sm); color: var(--mooc-muted); }
.mooc-qnav span.is-done { background: var(--mooc-green-100); border-color: var(--mooc-green-ink); color: var(--mooc-green-ink); font-weight: 600; }
.mooc-qnav span.is-current { border-color: var(--mooc-navy); color: var(--mooc-navy); font-weight: 600; }

/* ---- Banner completamento / congrats ---- */
.mooc-congrats { display: flex; align-items: center; gap: 22px; background: var(--mooc-blue-100); border: 1px solid var(--mooc-line); border-radius: var(--mooc-r-lg); padding: 28px; }
.mooc-congrats__check { width: 64px; height: 64px; border-radius: 50%; background: var(--mooc-navy); color: #fff; display: grid; place-items: center; flex: none; }
.mooc-congrats__check .mooc-icon { width: 34px; height: 34px; }

/* ---- Pagina di registrazione: intestazione in stile pagine interne (D-46) ----
   La banda .pa-page-header e il breadcrumb vengono stampati dentro il contenuto
   della pagina Tutor: il breakout li porta edge-to-edge come su /mooc/ e /ricerca/,
   mentre il form resta nel container centrato. Il titolo pagina di Astra viene
   nascosto per non duplicare l'H1 della banda. */
.pa-registrazione-mooc .ast-single-entry-banner,
.pa-registrazione-mooc .entry-header { display: none; }
.pa-registrazione-mooc .pa-page-header,
.pa-registrazione-mooc .pa-breadcrumb { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
/* Astra distanzia il contenuto dall'header con margin-top sul content-area:
   sulla banda a piena larghezza lascerebbe una fascia bianca sopra. */
.pa-registrazione-mooc #primary { margin-top: 0; }
.pa-registrazione-mooc .mooc-form-page { padding: 28px 0 8px; }

/* ---- Form di registrazione/accesso (tutor/dashboard/registration.php) ----
   Le classi .mooc-form-row/.mooc-form-field/.mooc-form-hint/.mooc-alert erano
   usate dal template senza definizione: il form risultava senza stile. */
.mooc-form-grid > .mooc-form-row, .mooc-form-grid > .mooc-form-field, .mooc-form-grid > .mooc-alert { grid-column: 1 / -1; }
.mooc-form-row { display: grid; gap: 18px 24px; }
.mooc-form-row--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px){ .mooc-form-row--2col { grid-template-columns: 1fr; } }
.mooc-form-field { display: flex; flex-direction: column; gap: 6px; }
.mooc-form-field > label { font-weight: 600; font-size: var(--mooc-fs-sm); color: var(--mooc-navy); }
.mooc-form-field input:not([type="checkbox"]), .mooc-form-field select {
  font: inherit; line-height: 1.4; color: var(--mooc-ink); background: #fff;
  border: 1.5px solid var(--mooc-line); border-radius: var(--mooc-r-lg); padding: 11px 13px; width: 100%;
}
.mooc-form-field select { height: auto; }
.mooc-form-field input:focus, .mooc-form-field select:focus { outline: none; border-color: var(--mooc-navy); box-shadow: var(--mooc-focus); }
.mooc-form-hint { color: var(--mooc-muted); font-size: var(--mooc-fs-xs); }
.mooc-form-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: var(--mooc-fs-sm); color: var(--mooc-muted); }
.mooc-form-checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mooc-navy); flex: none; }
.mooc-alert { border-left: 4px solid var(--mooc-navy); background: var(--mooc-bg-soft); border-radius: var(--mooc-r-lg); padding: 14px 16px; font-size: var(--mooc-fs-sm); color: var(--mooc-ink); }
.mooc-alert--info { border-left-color: var(--mooc-navy); }
.mooc-alert--warning { border-left-color: var(--mooc-accent-strong); background: var(--mooc-accent-100); }
.mooc-alert__list { list-style: disc; padding-left: 20px; display: grid; gap: 4px; }

/* ---- Eyebrow su sfondo modulo ---- */
.mooc-unit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mooc-chip-dur { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: var(--mooc-fs-sm); color: var(--mooc-muted); }
.mooc-chip-dur .mooc-icon { width: 18px; height: 18px; }