/* HS Academy — catálogo (academy.html), leitor (academy-curso.html, mais academy-curso.css) e
   editor (academy-gerir.html). Por cima de management.css, que dá a camada de vidro partilhada
   (barra lateral, topbar, painéis, botões, campos, modais); aqui ficam só as peças da Academy.
   A cor de cada curso vem do seu módulo (--tint, AcademyCourse.MODULES). */

:root {
  --ac-warning-ink: #8a4b00;
  --ac-success-ink: #1f7a36;
  --ac-accent-ink: #0058c7;
  --ac-track: rgba(120, 120, 128, 0.16);
}

/* ---------- marca na barra lateral ---------- */
.academy-brand { justify-content: flex-start; color: var(--mg-ink); }
.academy-brand .brand-icon,
.app.is-collapsed .academy-brand .brand-icon {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(155deg, #0a84ff, #5856d6);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(10, 132, 255, 0.7);
}
.academy-brand .brand-icon .icon { width: 22px; height: 22px; }
.academy-brand .brand-text__tag { color: var(--mg-tertiary); font-size: var(--fs-xs); letter-spacing: 0.1em; }
.app.is-collapsed .academy-brand { justify-content: center; }

.academy { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---------- barra de progresso (cartões, destaque, cronologia) ---------- */
.academy-progress {
  display: block;
  position: relative;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--ac-track);
  overflow: hidden;
}
.academy-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tint, var(--mg-accent));
  transition: width 0.4s ease;
}

/* ---------- "Continuar a aprender" ---------- */
.academy-hero {
  --tint: var(--mg-accent);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-radius: 28px;
  border: 1px solid var(--mg-glass-border);
  background: rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(60% 140% at 0% 0%, color-mix(in srgb, var(--tint) 18%, transparent), transparent 70%),
    rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 24px 50px -30px rgba(20, 30, 60, 0.32);
  overflow: hidden;
}
.academy-hero__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(155deg, var(--tint), color-mix(in srgb, var(--tint) 70%, #000));
  color: #fff;
  box-shadow: 0 14px 26px -14px var(--tint);
}
.academy-hero__icon .icon { width: 30px; height: 30px; }
.academy-hero__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.academy-hero__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mg-secondary);
}
.academy-hero__title {
  font-size: 1.375rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--mg-ink);
  line-height: 1.2;
}
.academy-hero__next { font-size: var(--fs-md); color: var(--mg-secondary); }
.academy-hero__next strong { color: var(--mg-ink-soft); font-weight: 650; }
.academy-hero__progress {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--mg-ink-soft);
  font-variant-numeric: tabular-nums;
}
.academy-hero__progress .academy-progress { flex: 0 1 320px; }
.academy-hero__cta { height: 44px; padding: 0 var(--sp-5); }

/* ---------- separadores e filtro ---------- */
.academy-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.academy-tabs {
  align-self: auto;
  padding: 4px;
  border-radius: var(--r-full);
  background: rgba(120, 120, 128, 0.12);
}
.academy-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border-radius: var(--r-full);
  color: var(--mg-secondary);
}
.academy-tabs .tab:hover { color: var(--mg-ink); }
.academy-tabs .tab.is-active {
  background: #fff;
  color: var(--mg-ink);
  box-shadow: 0 6px 16px -10px rgba(20, 30, 60, 0.4);
}
.academy-tabs .tab:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; }

.academy-soon {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(255, 149, 0, 0.16);
  color: var(--ac-warning-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.academy-soon--lg { padding: 6px 14px; font-size: var(--fs-sm); }

.academy-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.academy-filters.is-muted { display: none; }
.academy-chip {
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--mg-hairline);
  background: rgba(255, 255, 255, 0.6);
  color: var(--mg-ink-soft);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.academy-chip:hover { background: rgba(255, 255, 255, 0.9); color: var(--mg-ink); }
.academy-chip.is-active { background: var(--mg-ink); border-color: var(--mg-ink); color: #fff; }
.academy-chip:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; }

/* ---------- cartões de curso ---------- */
.academy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--sp-4);
}

.course-card {
  --tint: var(--mg-accent);
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 24px;
  border: 1px solid var(--mg-glass-border);
  background: var(--mg-glass-bg-strong);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 20px 46px -30px rgba(20, 30, 60, 0.26);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.course-card:hover { transform: translateY(-2px); box-shadow: 0 26px 52px -28px rgba(20, 30, 60, 0.34); }

.course-card__cover {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-2);
  height: 104px;
  padding: 14px 16px;
  background:
    radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--tint) 42%, transparent), transparent 70%),
    linear-gradient(150deg, color-mix(in srgb, var(--tint) 16%, #fff), color-mix(in srgb, var(--tint) 6%, #fff));
  overflow: hidden;
}
.course-card__module,
.course-card__draft {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.course-card__module { background: rgba(255, 255, 255, 0.88); color: var(--mg-ink); }
.course-card__module .icon { color: color-mix(in srgb, var(--tint) 80%, #000); }
.course-card__draft { background: var(--mg-ink); color: #fff; letter-spacing: 0.02em; }
.course-card__art {
  position: absolute;
  right: -10px;
  bottom: -30px;
  color: color-mix(in srgb, var(--tint) 75%, #000);
  opacity: 0.18;
  pointer-events: none;
}
.course-card__art .icon { width: 116px; height: 116px; stroke-width: 1.2; }

.course-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 12px;
}
.course-card__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--mg-ink);
}
.course-card__title a { color: inherit; }
.course-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.course-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--mg-secondary);
}
.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--mg-tertiary);
}
.course-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.course-card__meta .icon { width: 13px; height: 13px; }
.course-card__audience {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--mg-ink-soft);
}
.course-card__audience .icon { width: 13px; height: 13px; margin-top: 2px; color: var(--mg-tertiary); }

.course-card__footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 18px 16px;
  border-top: 1px solid var(--mg-hairline);
}
.course-card__progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.course-card__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--mg-secondary);
  font-variant-numeric: tabular-nums;
}
.course-card--completed .academy-progress__fill { background: var(--mg-success); }
.course-card--completed .course-card__status { color: var(--ac-success-ink); }
.course-card__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.course-card__no-lessons { font-size: var(--fs-sm); font-weight: 600; color: var(--mg-tertiary); }

.academy-empty {
  border-radius: 24px;
  border: 1px dashed rgba(60, 60, 67, 0.18);
  background: rgba(255, 255, 255, 0.45);
}

/* ---------- "Formação profissional" (brevemente) ---------- */
.academy-coming {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 620px;
  margin: var(--sp-4) auto;
  padding: var(--sp-10) var(--sp-8);
  text-align: center;
  border-radius: 28px;
  border: 1px solid var(--mg-glass-border);
  background: var(--mg-glass-bg-strong);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 24px 50px -30px rgba(20, 30, 60, 0.3);
}
.academy-coming__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(155deg, #ff9f0a, #c76a00);
  color: #fff;
  box-shadow: 0 16px 30px -16px rgba(199, 106, 0, 0.8);
}
.academy-coming__icon .icon { width: 34px; height: 34px; }
.academy-coming__title { font-size: 1.5rem; font-weight: 750; letter-spacing: -0.02em; color: var(--mg-ink); }
.academy-coming__text { max-width: 46ch; font-size: var(--fs-base); line-height: 1.55; color: var(--mg-secondary); }

/* ---------- editor do dono da app (academy-gerir.html) ---------- */
.academy-editor { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 980px; }
.academy-editor .panel__header .icon { flex-shrink: 0; }

.editor-state {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--mg-fill);
  color: var(--mg-ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.editor-state[data-state="published"] { background: var(--mg-success-soft); color: var(--ac-success-ink); }

.editor-form { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.editor-form__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.editor-form__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.editor-form__saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ac-success-ink);
  font-size: var(--fs-md);
  font-weight: 650;
}

/* "Para que cargos": pílulas com caixa de seleção; num curso Geral, agrupadas por módulo */
.editor-audience { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.editor-audience__legend { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 0; }
.editor-audience__legend .field__label { margin-right: auto; }
.editor-audience__summary { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 28px; }
.audience-count {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--mg-fill);
  color: var(--mg-ink-soft);
  font-size: var(--fs-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.audience-count.is-some { background: var(--mg-accent-soft); color: var(--ac-accent-ink); }
.audience-clear {
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ac-accent-ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  cursor: pointer;
}
.audience-clear:hover { background: var(--mg-accent-soft); }
.audience-clear:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; }

.editor-audience__options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.editor-audience__options.is-grouped {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-5) var(--sp-6);
}
.audience-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.audience-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mg-ink);
  font-size: var(--fs-md);
  font-weight: 700;
}
.audience-group__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tint) 15%, #fff);
  color: color-mix(in srgb, var(--tint) 82%, #000);
}
.audience-group__icon .icon { width: 15px; height: 15px; }
.audience-group__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.audience-chip { position: relative; display: inline-flex; min-width: 0; }
.audience-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.audience-chip__face {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 14px 5px 7px;
  border-radius: var(--r-full);
  border: 1px solid var(--mg-hairline);
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.05);
  color: var(--mg-ink-soft);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* A caixa é o próprio ícone "check" da app (círculo + visto): círculo vazio por marcar,
   círculo azul com o visto a branco quando marcado. */
.audience-chip__box { display: inline-flex; flex-shrink: 0; }
.audience-chip__box .icon { width: 22px; height: 22px; }
.audience-chip__box circle {
  fill: transparent;
  stroke: rgba(60, 60, 67, 0.3);
  stroke-width: 1.6;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.audience-chip__box path {
  stroke: #fff;
  stroke-width: 2.4;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.audience-chip:hover .audience-chip__face { border-color: rgba(60, 60, 67, 0.24); color: var(--mg-ink); }
.audience-chip:hover .audience-chip__box circle { stroke: rgba(60, 60, 67, 0.5); }
.audience-chip input:checked + .audience-chip__face {
  border-color: color-mix(in srgb, var(--mg-accent) 55%, transparent);
  background: var(--mg-accent-soft);
  color: var(--ac-accent-ink);
}
.audience-chip input:checked + .audience-chip__face .audience-chip__box circle { fill: var(--mg-accent); stroke: var(--mg-accent); }
.audience-chip input:checked + .audience-chip__face .audience-chip__box path { opacity: 1; }
.audience-chip input:focus-visible + .audience-chip__face { outline: 2px solid var(--mg-accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .audience-chip__face { min-height: 44px; padding: 8px 16px 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .audience-chip__face,
  .audience-chip__box circle,
  .audience-chip__box path { transition: none; }
}

/* Interruptor "Publicado" */
.editor-switch {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 16px;
  background: var(--mg-fill);
  cursor: pointer;
}
.editor-switch input { position: absolute; opacity: 0; pointer-events: none; }
.editor-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 28px;
  border-radius: var(--r-full);
  background: rgba(120, 120, 128, 0.32);
  transition: background 0.2s ease;
}
.editor-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.editor-switch input:checked + .editor-switch__track { background: var(--mg-success); }
.editor-switch input:checked + .editor-switch__track::after { transform: translateX(18px); }
.editor-switch input:focus-visible + .editor-switch__track { outline: 2px solid var(--mg-accent); outline-offset: 2px; }
.editor-switch__text { display: flex; flex-direction: column; gap: 2px; }
.editor-switch__text strong { font-size: var(--fs-base); color: var(--mg-ink); }
.editor-switch__text small { font-size: var(--fs-md); color: var(--mg-secondary); }

.editor-add { margin-left: auto; }
.panel__header .panel__meta + .editor-add { margin-left: auto; }

.editor-sections { display: flex; flex-direction: column; gap: var(--sp-3); }
.editor-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  border-radius: 18px;
  border: 1px solid var(--mg-hairline);
  background: rgba(255, 255, 255, 0.6);
}
.editor-section__head { display: flex; align-items: center; gap: var(--sp-3); }
.editor-section__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.editor-section__index {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mg-tertiary);
}
.editor-section__title { font-size: var(--fs-lg); font-weight: 700; color: var(--mg-ink); }
.editor-section__empty { padding: var(--sp-2) 0; font-size: var(--fs-md); color: var(--mg-secondary); }
.editor-section__add { align-self: flex-start; }

.editor-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.editor-actions .btn-icon:disabled { opacity: 0.35; cursor: not-allowed; }
.icon--up { transform: rotate(-90deg); }
.icon--down { transform: rotate(90deg); }

.editor-lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.editor-lesson {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-radius: 14px;
  background: var(--mg-fill);
}
.editor-lesson__index {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--mg-ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.editor-lesson__main { flex: 1; min-width: 0; }
.editor-lesson__title { font-size: var(--fs-base); font-weight: 600; color: var(--mg-ink); }
.editor-lesson__meta { font-size: var(--fs-sm); font-weight: 600; }
.editor-video-ok,
.editor-video-missing { display: inline-flex; align-items: center; gap: 4px; }
.editor-video-ok { color: var(--ac-success-ink); }
.editor-video-missing { color: var(--ac-warning-ink); }
.editor-lesson__meta .icon { width: 13px; height: 13px; }

/* Modal da aula: ficheiro de vídeo e envio */
.editor-video-current { font-size: var(--fs-md); color: var(--mg-secondary); }
.editor-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: 16px;
  border: 1.5px dashed rgba(60, 60, 67, 0.24);
  background: rgba(120, 120, 128, 0.05);
  color: var(--mg-ink-soft);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.editor-file:hover { border-color: var(--mg-accent); background: var(--mg-accent-soft); }
.editor-file:focus-within { border-color: var(--mg-accent); box-shadow: 0 0 0 3px var(--mg-accent-soft); }
.editor-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.editor-file .icon { color: var(--mg-accent); }
.editor-upload { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-2); }
.editor-upload .academy-progress { height: 8px; }
.editor-upload__text { font-size: var(--fs-md); font-weight: 600; color: var(--mg-ink-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .editor-form__row { grid-template-columns: minmax(0, 1fr); }
  .editor-lesson { flex-wrap: wrap; }
  .editor-lesson .editor-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 768px) {
  .academy-hero { grid-template-columns: auto minmax(0, 1fr); padding: var(--sp-4); gap: var(--sp-4); }
  .academy-hero__icon { width: 52px; height: 52px; border-radius: 16px; }
  .academy-hero__cta { grid-column: 1 / -1; justify-content: center; }
  .academy-hero__title { font-size: 1.125rem; }
  .academy-hero__progress { flex-wrap: wrap; gap: 6px; }
  .academy-hero__progress .academy-progress { flex: 1 1 100%; }
  .academy-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .academy-stats .stat { padding: var(--sp-3); }
  .academy-stats .stat__icon { display: none; }
  .academy-tabs { width: 100%; }
  .academy-tabs .tab { flex: 1; justify-content: center; padding-left: var(--sp-2); padding-right: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  .course-card,
  .academy-progress__fill { transition: none; }
  .course-card:hover { transform: none; }
}