/* ============================================================
   Lekto V3, design tokens
   Linguagem expressiva Lekto V3, paleta, sombras, raios e movimento
   ============================================================ */
/* Tokens fornecidos por css/tokens.css, gerado de design/tokens.json.
   Para alterar cores/raios/sombras/movimento: edite design/tokens.json
   e rode `node scripts/build-tokens.mjs`. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--theme-font-family-base);
  font-weight: 500;
  color: var(--theme-text-heading);
  /* papel semântico (whitelabel): sob o tema lekto resolve para surface-pale, idêntico ao anterior */
  background: var(--theme-page-background);
  background-attachment: var(--theme-page-background-attachment, scroll);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Toda tag de título usa a família display — h4/h5/h6 ficavam de fora e caíam na
   fonte de corpo (ex.: os h4 emitidos por js/nivel.js e js/admin.js). */
h1, h2, h3, h4, h5, h6 { font-family: var(--theme-font-family-heading); margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }
svg { display: block; }
.nav-item svg, .btn svg, .chip svg, .player__ctl svg, .hero__meta svg,
.playlist__meta svg, .docs h2 svg, .docs__open svg, .playlist__state svg,
.playlist__thumb svg, .module-card__tile svg, .content-tab svg,
.cover-footer svg, .site-footer svg, .module-card__resume svg {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   App shell + sidebar
   ============================================================ */
.app { min-height: 100dvh; }

.sidebar {
  position: fixed; inset: 16px auto 16px 16px; width: var(--rail-w); z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 18px 12px;
  background: #fff;
  border: 1px solid var(--theme-panel-border);
  border-radius: var(--border-radius-sm-plus);
  box-shadow: var(--theme-panel-shadow);
}
.sidebar__logo img { width: 38px; height: auto; }
.sidebar__group { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sidebar__group--top { flex: 1; }
.sidebar__group--bottom { margin-top: auto; }
.sidebar__divider { width: 100%; border: 0; border-top: 1px solid var(--theme-panel-border); margin: 0 0 10px; }

.nav-item[hidden] { display: none; }   /* o menu do gestor é podado em js/app.js */
.nav-item {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--border-radius-sm);
  color: var(--theme-text-muted);
  transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
}
.nav-item svg { width: 21px; height: 21px; }
.nav-item:hover { background: var(--theme-surface-muted); color: var(--theme-text-heading); transform: translateY(-1px); }
.nav-item.is-active { background: var(--color-accent-pure); color: #fff; box-shadow: var(--lkt-shadow-level4); }
.nav-item--avatar { padding: 0; overflow: hidden; border-radius: var(--border-radius-circle); border: 2px solid var(--theme-panel-border); }
.nav-item--avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Modo Offline (js/modo-offline.js): só a navegação de tela (data-view) trava
   — o avatar continua ativo (é por ele que se desliga o modo) e os utilitários
   do rodapé do rail (notificações, ajuda) não são "outra tela", então também
   seguem. O bloqueio de clique é feito em JS (guard, não pointer-events) para
   não quebrar acionamento por teclado; isto aqui é só a aparência. */
.is-modo-offline .nav-item[data-view]:not([data-view="painel"]) { opacity: var(--opacity-intense); cursor: not-allowed; }
.is-modo-offline .nav-item[data-view]:not([data-view="painel"]):hover { background: none; color: var(--theme-text-muted); transform: none; }
/* Notificações e Central de Ajuda: mesmo tratamento, mesmo que não sejam
   "outra tela" (sem data-view) — só a atribuição em si e o avatar (que
   desliga o modo) seguem vivos. Sem reset de :hover aqui — [data-nt-bell]
   também é o sino do .mobile-bar (outro contexto visual); opacidade +
   cursor já comunicam o bloqueio nos dois. */
.is-modo-offline [data-nt-bell],
.is-modo-offline .nav-item[data-tip="Central de Ajuda"] { opacity: var(--opacity-intense); cursor: not-allowed; }
.is-modo-offline .nav-item[data-tip="Central de Ajuda"]:hover { background: none; color: var(--theme-text-muted); transform: none; }
/* "Administração" do alternador (#plat-goto-admin, só visível vindo de
   ?from=admin): mais uma saída da navegação, mesmo tratamento. O lado
   "Plataforma" já é o ativo e não navega a lugar nenhum, então fica de fora. */
.is-modo-offline .viewswitch__opt:not(.is-active) { opacity: var(--opacity-intense); cursor: not-allowed; }
.is-modo-offline .viewswitch__opt:not(.is-active):hover { color: var(--color-surface-pure); background: none; }
/* Alternador de view Administração ⇄ Plataforma — componente compartilhado (admin + plataforma),
   segmentado vertical, nativo ao rail icon-only, com tooltip no hover. */
.viewswitch { display: flex; flex-direction: column; gap: 3px; padding: 3px; background: var(--theme-surface-muted); border-radius: 13px; }
.viewswitch[hidden] { display: none; }
.viewswitch__opt { position: relative; display: grid; place-items: center; width: 44px; height: 40px; border-radius: 10px; color: var(--color-surface-pure); transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.viewswitch__opt svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viewswitch__opt.is-active { background: #fff; color: var(--color-primary-pure); box-shadow: var(--theme-card-shadow); }
.viewswitch__opt:not(.is-active):hover { color: var(--theme-text-heading); background: #fff; }
.viewswitch__opt span {
  position: absolute; left: calc(100% + 14px); top: 50%; translate: 0 -50%;
  background: var(--theme-text-heading); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; z-index: 5;
  opacity: 0; pointer-events: none; scale: .9;
  transition: opacity var(--motion-dur-fast) var(--motion-ease), scale var(--motion-dur-fast) var(--motion-ease);
}
.viewswitch__opt:hover span { opacity: 1; scale: 1; }

/* A faixa de contexto do gestor (.gs-volta) e o alternador de uma opção só
   (.viewswitch--single) saíram junto com o shell de gestão como destino: o
   gestor agora MORA na plataforma e na administração, com menu próprio em cada
   uma, e o alternador dele alterna como o de todo mundo. Tela com menu próprio
   não é tela emprestada, e dizer "tela do professor" contradiria o menu ao
   lado. Quem responde "de quem é este dado" passou a ser o cabeçalho da própria
   tela ("Atribuições da rede · Rede Exemplo"). */

/* Tooltip */
.sidebar .nav-item::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 14px); top: 50%; translate: 0 -50%;
  background: var(--theme-text-heading); color: #fff;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  padding: 6px 10px; border-radius: var(--border-radius-nano);
  opacity: 0; pointer-events: none; scale: .9;
  transition: opacity var(--motion-dur-fast) var(--motion-ease), scale var(--motion-dur-fast) var(--motion-ease);
}
.sidebar .nav-item:hover::after { opacity: 1; scale: 1; }

.mobile-bar, .bottom-nav { display: none; }

.view { --view-pad-r: 24px; margin-left: calc(var(--rail-w) + 32px); padding: 16px var(--view-pad-r) 0 8px; }
.view[hidden] { display: none; }

/* ============================================================
   Folga da sombra nos trilhos que rolam
   ------------------------------------------------------------
   `overflow-x: auto` recorta nos QUATRO lados, não só nos horizontais. Como a
   sombra do card (--lkt-shadow-level1 + --lkt-shadow-level3) avança bem além
   da caixa dele, um trilho mais apertado que essa sombra a corta no meio do
   degradê — e o corte aparece como um retângulo de tom levemente diferente
   atrás da fileira, com aresta reta embaixo e à esquerda. Era o que se via na
   Biblioteca e no Início.

   Os dois números abaixo são a MEDIDA dessa sombra, não valores de design:
     level3 = 0 32px 64px -8px → 32 - 8 + 32 = 56px para baixo, -8 + 32 = 24px
     para os lados; aferido em tela, a cauda visível some por volta dos 72px
     embaixo (no vão entre dois cards as duas sombras se somam e ela estica).

   Quem usa: dá essa folga como PADDING ao contêiner que rola e devolve o
   mesmo tanto em MARGIN negativa — a caixa cresce o bastante para conter a
   sombra e nada se move de lugar.
   ============================================================ */
:root {
  --card-shadow-bleed-x: 24px;
  --card-shadow-bleed-y: 72px;
}

/* ============================================================
   Buttons & chips
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; line-height: 1;
  /* tamanho xl do contrato (DEV-740): 52px / 14px 22px — idêntico ao valor anterior */
  min-height: var(--theme-button-height-xl); padding: var(--theme-button-padding-xl);
  border-radius: var(--theme-button-radius-md);
  transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 19px; height: 19px; }

.btn--hero {
  background: #fff; color: var(--theme-text-heading);
  box-shadow: var(--lkt-shadow-level4);
  padding-right: 14px;
}
.btn--hero:hover { transform: translateY(-2px); box-shadow: var(--theme-modal-shadow); }
.btn__arrow {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--border-radius-nano);
  background: var(--color-accent-pure); color: #fff;
  transition: transform var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease);
}
.btn--hero:hover .btn__arrow { transform: translateX(3px); background: var(--color-accent-dark); }

.btn--ghost {
  color: #fff; border: 1.5px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

.btn--dark { background: var(--theme-text-heading); color: #fff; box-shadow: var(--theme-panel-shadow); }
.btn--dark:hover { background: var(--color-surface-darker); transform: translateY(-2px); }

.btn--outline { border: 1.5px solid var(--theme-border-subtle); color: var(--theme-text-heading); background: #fff; }
.btn--outline:hover { border-color: var(--color-surface-soft); transform: translateY(-1px); box-shadow: var(--theme-card-shadow); }

.btn--back {
  min-height: 40px; padding: 8px 16px 8px 12px; font-size: 14.5px;
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm);
  box-shadow: var(--theme-card-shadow);
}
.btn--back:hover { transform: translateX(-2px); }
.btn--back svg { width: 17px; height: 17px; }

.btn--sm { min-height: 44px; font-size: 15px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700;
  padding: 7px 13px; border-radius: var(--border-radius-pill);
  background: var(--theme-surface-muted); color: var(--theme-text-heading);
}
.chip svg { width: 15px; height: 15px; }
.chip--glass { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.chip--lavender { background: var(--color-pastel-lavender); color: var(--theme-text-heading); }
.chip--peach { background: var(--color-pastel-peach); color: var(--theme-text-heading); }

/* ---- Switch (DS:Switch) ----
   Mora aqui, e não no admin.css, porque é primitiva de DS e passou a servir
   duas telas: os perfis do admin e as preferências de notificação, que abrem
   dentro do index.html. Duplicar o componente na folha do módulo daria duas
   fontes para um mesmo elemento do DS — a alternativa errada.
   Overrides de layout específicos do admin (`.cfg-row .switch`) seguem lá, e
   continuam vencendo: admin.css carrega depois desta folha. */
.switch {
  flex-shrink: 0; width: 42px; height: 24px; border-radius: 99px;
  background: var(--color-surface-light); position: relative; transition: background var(--motion-dur-fast) var(--motion-ease);
}
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--theme-card-shadow); transition: left var(--motion-dur-fast) var(--motion-ease); }
.switch[aria-checked="true"] { background: var(--color-accent-pure); }
.switch[aria-checked="true"] i { left: 21px; }

/* ============================================================
   VIEW: Cover
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--border-radius-lg);
  min-height: min(78vh, 720px);
  display: flex; align-items: center;
  padding: clamp(28px, 5vw, 72px);
  background:
    var(--grain),
    radial-gradient(120% 160% at 85% 0%, #4A1A66 0%, var(--color-surface-deep) 55%, var(--color-surface-deepest) 100%);
  box-shadow: var(--theme-shadow-lg);
  isolation: isolate;
}
.hero__art { position: absolute; inset: 0; z-index: -1; }
.hero__art img {
  position: absolute; right: -3%; top: 50%; translate: 0 -50%;
  width: clamp(420px, 56%, 780px); height: auto; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%);
  opacity: 1;
}
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(37,8,53,.96) 0%, rgba(37,8,53,.86) 38%, rgba(37,8,53,.35) 56%, rgba(37,8,53,0) 74%);
}
.hero--no-art .hero__art { display: none; }

.hero__doodles { position: absolute; inset: 0; pointer-events: none; }
.doodle { position: absolute; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.doodle--star { width: 34px; top: 14%; left: 46%; stroke: var(--color-pastel-butter); stroke-width: 2.4; }
.doodle--squiggle { width: 110px; bottom: 12%; left: 38%; stroke: var(--color-pastel-lavender); stroke-width: 3; }
.doodle--spark { width: 26px; top: 24%; left: 60%; stroke: var(--color-pastel-aqua); stroke-width: 2.6; }

.hero__content { max-width: min(620px, 55%); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero__title {
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.015em;
  color: #fff;
}
.hero__title-mark { position: relative; display: inline-block; color: var(--color-pastel-lavender); }
.hero__title-mark svg {
  position: absolute; left: -2%; bottom: -10px; width: 104%; height: 14px;
  stroke: var(--color-pastel-peach); stroke-width: 5; stroke-linecap: round; fill: none;
}
.hero__lead { color: rgba(255,255,255,.78); font-size: 16.5px; line-height: 1.65; max-width: 56ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hero__meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.62); font-size: 13.5px; font-weight: 700; }
.hero__meta svg { width: 16px; height: 16px; }

/* Modules */
.modules { padding: clamp(48px, 7vw, 88px) clamp(4px, 2vw, 24px); max-width: 1180px; margin: 0 auto; }
.modules__head { text-align: center; margin-bottom: 40px; }
.modules__head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.01em; }
.modules__head p { color: var(--theme-text-muted); font-size: 16.5px; margin-top: 10px; }

.modules__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  counter-reset: mod;
}
.module-card {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px;
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-plus);
  box-shadow: var(--theme-card-shadow);
  transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease);
  cursor: default;
}
.module-card:hover { transform: translateY(-5px); box-shadow: var(--theme-shadow-lg); border-color: var(--theme-border-subtle); }
.module-card.is-current-module { cursor: pointer; border-color: var(--color-accent-pale); outline: 3px solid var(--color-accent-tinted); }
.module-card.is-locked { opacity: .68; }
.module-card.is-locked:hover { transform: translateY(-2px); }

.module-card__tile {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--border-radius-sm-14);
  background: var(--tile, var(--color-pastel-lavender)); color: var(--theme-text-heading);
  transition: transform .3s var(--motion-ease);
}
.module-card__tile svg { width: 24px; height: 24px; }
.module-card:hover .module-card__tile { transform: rotate(-6deg) scale(1.08); }
.module-card__kicker { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-surface-pure); }
.module-card__body h3 { font-size: 19.5px; font-weight: 700; margin: 6px 0; }
.module-card__body p { color: var(--theme-text-muted); font-size: 14px; line-height: 1.55; }
.module-card__progress { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.module-card__progress i {
  flex: 1; height: 7px; border-radius: var(--border-radius-pill); background: var(--theme-surface-muted);
  position: relative; overflow: hidden;
}
.module-card__progress i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  border-radius: var(--border-radius-pill); background: var(--color-accent-pure);
}
.module-card__progress span { font-size: 12.5px; font-weight: 800; color: var(--color-surface-pure); }
.module-card__resume {
  position: absolute; top: 22px; right: 22px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--color-accent-dark);
}
.module-card__resume svg { width: 15px; height: 15px; transition: transform var(--motion-dur-fast) var(--motion-ease); }
.module-card.is-current-module:hover .module-card__resume svg { transform: translateX(3px); }

.cover-footer { padding: 28px 0 40px; text-align: center; color: var(--color-surface-pure); font-size: 13.5px; font-weight: 600; }
.cover-footer p { display: inline-flex; gap: 6px; align-items: center; }
.cover-footer svg { width: 15px; height: 15px; color: var(--color-pastel-lavender-deep); }

/* Rodapé global da plataforma ("Feito com ♥ pela equipe pedagógica Lekto") — SPA, admin e onboarding */
.site-footer { padding: 32px 24px 40px; text-align: center; color: var(--color-surface-pure); font-size: 13.5px; font-weight: 600; }
.site-footer p { display: inline-flex; gap: 6px; align-items: center; justify-content: center; margin: 0; }
.site-footer svg { width: 15px; height: 15px; color: var(--color-pastel-lavender-deep); }
.onb-scene--login .login-pane { position: relative; }
.onb-scene--login .site-footer { position: absolute; left: 0; right: 0; bottom: 4px; padding: 16px 24px; }
@media (max-width: 768px) {
  .site-footer { padding-bottom: 112px; }
  .onb-scene--login .site-footer { padding-bottom: 16px; }
}

/* ============================================================
   VIEW: Lesson
   ============================================================ */
.view--lesson { padding-bottom: 150px; } /* espaço p/ a barra "Concluiu esta aula?" flutuante no rodapé */

.lesson-head { padding: 8px 4px 0; max-width: 1280px; margin: 0 auto; }
.lesson-head__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lesson-head__progress { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lesson-head__count { font-size: 13.5px; color: var(--theme-text-muted); font-weight: 600; }
.lesson-head__count strong { color: var(--theme-text-heading); font-weight: 800; }
.progressbar { width: 180px; height: 8px; border-radius: var(--border-radius-pill); background: var(--color-surface-mist); overflow: hidden; }
.progressbar i { display: block; height: 100%; width: 11%; border-radius: var(--border-radius-pill);
  background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); }
.lesson-head__pct { font-size: 13.5px; font-weight: 800; color: var(--color-accent-dark); }

.lesson-head__title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.01em; margin: 18px 0 16px; }

.module-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none;
}
.module-tabs::-webkit-scrollbar { display: none; }
.module-tab {
  flex-shrink: 0;
  font-size: 14px; font-weight: 700; color: var(--theme-text-muted);
  padding: 10px 16px; border-radius: var(--border-radius-pill);
  background: #fff; border: 1px solid var(--theme-panel-border);
  transition: all var(--motion-dur-fast) var(--motion-ease);
}
.module-tab:hover { border-color: var(--base-400); color: var(--theme-text-heading); transform: translateY(-1px); }
.module-tab.is-active { background: var(--theme-text-heading); color: #fff; border-color: var(--theme-text-heading); box-shadow: var(--theme-panel-shadow); }

.lesson-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px;
  max-width: 1280px; margin: 18px auto 0; padding: 0 4px;
  align-items: start;
}
.lesson-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Player */
.player {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--theme-card-radius); aspect-ratio: 16 / 9.4;
  background: var(--color-surface-deep);
  box-shadow: var(--theme-shadow-lg);
}
.player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.player__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37,8,53,.1) 55%, rgba(37,8,53,.78) 100%); }
.player__doodle {
  position: absolute; width: 42%; right: 6%; top: 10%;
  stroke: var(--color-pastel-butter); stroke-width: 7; stroke-linecap: round; fill: none;
  opacity: .9; pointer-events: none;
}
.player__bigplay {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 84px; height: 84px; border-radius: var(--border-radius-circle);
  display: grid; place-items: center;
  background: #fff; color: var(--color-accent-dark);
  box-shadow: var(--theme-modal-shadow);
  transition: transform .25s var(--motion-ease), background .25s var(--motion-ease);
}
.player__bigplay svg { width: 34px; height: 34px; fill: currentColor; stroke: none; margin-left: 4px; }
.player__bigplay:hover { transform: translate(0,0) scale(1.08); background: var(--color-pastel-butter); }
.player.is-playing .player__bigplay { opacity: 0; pointer-events: none; transition: opacity .2s; }

.player__bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--border-radius-sm-14);
  background: var(--theme-modal-overlay-bg); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.player__ctl {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--border-radius-nano); color: rgba(255,255,255,.85);
  transition: background var(--motion-dur-fast), color var(--motion-dur-fast);
}
.player__ctl:hover { background: rgba(255,255,255,.14); color: #fff; }
.player__ctl svg { width: 18px; height: 18px; }
.player__ctl--text { font-size: 12.5px; font-weight: 800; width: auto; padding: 0 9px; }
#btn-play .ic-pause { display: none; }
.player.is-playing #btn-play .ic-play { display: none; }
.player.is-playing #btn-play .ic-pause { display: block; }
.player__time { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8); white-space: nowrap; padding: 0 6px; font-variant-numeric: tabular-nums; }
.player__track { position: relative; flex: 1; height: 22px; cursor: pointer; }
.player__track::before { content: ""; position: absolute; inset: 9px 0; border-radius: var(--border-radius-pill); background: rgba(255,255,255,.22); }
.player__track i {
  position: absolute; inset: 9px auto 9px 0; width: 14.6%;
  border-radius: var(--border-radius-pill); background: linear-gradient(90deg, var(--color-accent-soft), var(--color-pastel-lavender));
}
.player__track b { position: absolute; top: 50%; left: 14.6%; translate: -50% -50%; width: 13px; height: 13px; border-radius: var(--border-radius-circle); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* Content tabs */
.content-tabs {
  display: inline-flex; gap: 4px; align-self: flex-start;
  padding: 5px; border-radius: var(--border-radius-sm-14);
  background: var(--color-surface-mist);
}
.content-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--theme-text-muted);
  padding: 9px 16px; border-radius: var(--border-radius-sm);
  transition: all var(--motion-dur-fast) var(--motion-ease);
}
.content-tab svg { width: 16px; height: 16px; }
.content-tab:hover { color: var(--theme-text-heading); }
.content-tab.is-active { background: #fff; color: var(--theme-text-heading); box-shadow: var(--theme-card-shadow); }
.content-tab__badge {
  display: grid; place-items: center; min-width: 19px; height: 19px;
  border-radius: var(--border-radius-pill); font-size: 11px; font-weight: 800;
  background: var(--color-pastel-lavender); color: var(--theme-text-heading); padding: 0 5px;
}

/* Panels */
.panel {
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--theme-card-radius);
  padding: clamp(22px, 3vw, 36px);
  box-shadow: var(--theme-card-shadow);
}
.panel h2 { font-size: clamp(21px, 2.2vw, 27px); font-weight: 800; letter-spacing: -.01em; margin-bottom: 16px; }
.panel p { color: var(--color-surface-darker); font-size: 15.5px; line-height: 1.7; margin-bottom: 16px; }
.panel p strong { color: var(--theme-text-heading); font-weight: 800; }
.panel__chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 20px; }
.btn--download { margin-top: 8px; }

.transcript p { display: flex; gap: 14px; }
.transcript__t {
  font-family: var(--theme-font-family-heading);
  flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--color-accent-dark);
  background: var(--color-accent-tinted); border-radius: var(--border-radius-nano); padding: 3px 8px; height: fit-content;
  font-variant-numeric: tabular-nums;
}
.note {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--tile, var(--color-pastel-butter));
  border-radius: var(--border-radius-xs); padding: 16px 18px; margin-bottom: 12px;
}
.note__time { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--theme-text-muted); }
.note p { margin: 0; color: var(--theme-text-heading); font-weight: 600; }

/* Finish bar */
.finish {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--grain), linear-gradient(120deg, var(--color-surface-deep), #3A1054);
  border-radius: var(--theme-card-radius); padding: 24px 28px;
  color: #fff;
  box-shadow: var(--theme-shadow-lg);
}
.finish__copy { flex: 1 1 auto; min-width: 240px; }
.finish__copy h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.finish__copy p { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55; }
/* As ações são uma linha só e não encolhem: quem cede largura é a copy, que tem
   onde quebrar. Com wrap aqui, um CTA a mais empurrava a coluna de texto para um
   terço da barra e o título quebrava em duas linhas (board "Ajustes barras de
   CTA"). No mobile a regra é outra — ver o bloco de 768px. */
.finish__actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; flex-shrink: 0; }

.btn--confirm { position: relative; background: #fff; color: var(--theme-text-heading); box-shadow: var(--lkt-shadow-level4); }
.btn--confirm:hover { transform: translateY(-2px); }
.btn--confirm__check { width: 20px; height: 20px; display: none; }
.btn--confirm__check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.btn--confirm.is-done { background: var(--color-pastel-mint); pointer-events: none; }
/* #det-concluida é um <span>: o selo não é clicável, e quem reabre é o botão ao
   lado. Sem isto ele herdaria só metade do desenho do botão. */
#det-concluida { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.btn--confirm.is-done .btn--confirm__check { display: block; }
.finish .btn--dark { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.3); box-shadow: none; }
.finish .btn--dark:hover { background: rgba(255,255,255,.2); }

/* Action bar da one-pager (#det-actionbar): os CTAs que desceram do cabeçalho.
   O Exportar continua sendo o secundário da linha, mas no cabeçalho claro ele é
   o botão BRANCO — e sobre a barra escura o branco passa a ser o mais forte de
   todos, invertendo a hierarquia. Aqui ele veste o secundário da própria barra,
   o mesmo tratamento de .finish .btn--dark.
   O seletor precisa do id: .btn--export declara cor e fundo depois de
   .btn--dark na folha, e com a mesma especificidade venceria por ordem. */
/* .finish declara display:flex, e regra de autor vence o [hidden] da folha do
   navegador: sem isto a barra "escondida" continuava desenhada, vazia, no fim
   da one-pager de Formação e de Avaliação — que têm barra própria no corpo. */
#det-actionbar[hidden] { display: none; }
/* Mesma razão do seletor acima: .finish__actions declara display:flex e venceria
   o [hidden] da folha do navegador. Sem via de entrada, a barra não tem CTA. */
#det-actions[hidden] { display: none; }
/* ---- A barra VIRA o banner de atribuições ativas ----
   No estado "atribuída", quem não atribui o conteúdo não tem CTA — tem turmas
   para entrar. O banner desce para o rodapé e ocupa a barra inteira, mantendo o
   desenho claro que ele já tem no topo: a barra some por baixo dele (fundo e
   sombra saem daqui e ficam no .det-active__inner). */
#det-actionbar.is-banner { background: none; box-shadow: none; padding: 0; gap: 0; }
#det-actionbar.is-banner .finish__copy[hidden] { display: none; }
#det-actionbar.is-banner .det-active { max-width: none; width: 100%; margin: 0; padding: 0; }
#det-actionbar.is-banner .det-active__inner { box-shadow: var(--theme-shadow-lg); }
/* O subtítulo só existe na versão de rodapé: no topo o banner informa, aqui ele
   pede uma escolha. */
.det-active__sub { display: none; }
#det-actionbar.is-banner .det-active__sub {
  display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--theme-text-muted);
}
/* Com o pedido embaixo do título, a coluna de texto precisa de mais base para o
   convite não quebrar em duas linhas ao lado das turmas. */
#det-actionbar.is-banner .det-active__lead { flex: 1 1 380px; }
/* Sobre o banner claro o punho do mobile precisa da tinta do texto, não do
   branco que ele veste sobre a barra roxa. */
#det-actionbar.is-banner .finish__grip { color: var(--theme-text-heading); }
#det-actionbar .btn--export {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3);
  color: #fff; box-shadow: none;
}
#det-actionbar .btn--export:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.3); box-shadow: none; }
/* Sozinho na barra o Exportar leva o rótulo; dividindo a linha com o CTA
   principal ele vira ícone — secundário não disputa largura (board). O rótulo
   segue no aria-label, então quem usa leitor de tela continua ouvindo "Exportar". */
#det-actionbar .btn--export.is-icon { width: 44px; padding: 0; justify-content: center; }
#det-actionbar .btn--export.is-icon .btn--export__lbl { display: none; }
/* Punho de abrir/fechar — desenhado só no mobile, onde a barra retrai. */
.finish__grip { display: none; }

/* A barra flutua no rodapé, igual à das Formações (#finish-bar, logo abaixo):
   mesma geometria — coluna de conteúdo, fixa na tela, por cima do corpo que
   rola. Antes ela era o último bloco de #det-main e só aparecia no fim da
   rolagem, o que deixava a ação principal fora de alcance em quase toda a
   tela. Fora de #view-detalhe o ancestral .view[hidden] já a esconde. */
#det-actionbar {
  position: fixed;
  left: calc(var(--rail-w) + 40px);
  right: 24px;
  bottom: var(--det-actionbar-bottom);
  max-width: 1280px;
  margin-inline: auto;
  z-index: 55;
}
/* Onde a barra pousa, em UM lugar só: a posição dela, o respiro no fim do
   conteúdo e a subida do FAB saem todos daqui. Calculados em separado, saíam de
   sincronia — a barra do protótipo empurrava a barra 48px para cima e o respiro
   ficava para trás, comendo o último bloco. --lkp-lift é da barra do protótipo
   (css/lekto-protobar.css); sem ela, zero. */
body { --det-actionbar-bottom: calc(20px + var(--lkp-lift, 0px)); }
html.is-modo-offline body { --det-actionbar-bottom: calc(20px + var(--lkp-lift, 0px) + var(--modo-offline-lift, 44px)); }
/* O FAB "Registrar" mora no mesmo canto e tem z-index maior: sem subir, cobre o
   CTA primário. A altura vem medida do JS (detPublicarMedidasBarra) — varia com
   o estado e com a largura. */
body:has(.view--detalhe.is-current) .cap-fab {
  bottom: calc(var(--det-actionbar-bottom) + var(--det-actionbar-h, 0px) + 16px);
}
/* Respiro para a barra não cobrir o fim da página. Ele mora no RODAPÉ DO SITE,
   não na view: a .site-footer é o último elemento do documento, e reservar o
   espaço na view deixava a folga no meio — sobrava um vão vazio antes do
   rodapé, e o rodapé mesmo continuava atrás da barra.
   Acompanha a altura MEDIDA (--det-actionbar-h, detPublicarMedidasBarra),
   porque ela muda com o estado da barra e com a largura da tela; o fallback
   vale no primeiro render, antes da medida. */
body:has(.view--detalhe.is-current) .site-footer {
  padding-bottom: calc(var(--det-actionbar-bottom) + var(--det-actionbar-h, 100px) + 30px);
}

/* Barra "Concluiu esta aula?" flutuante, fixa no rodapé da tela da aula.
   Escopo em #finish-bar (só #view-lesson): a classe .finish segue inline nas demais telas.
   Alinha à coluna de conteúdo (.lesson-grid: offset do rail + max-width 1280, centralizado).
   Fora de #view-lesson o ancestral .view[hidden] já a esconde — sem JS. */
#finish-bar {
  position: fixed;
  left: calc(var(--rail-w) + 40px);
  right: 24px;
  bottom: 20px;
  max-width: 1280px;
  margin-inline: auto;
  z-index: 55;
}

/* Right rail */
.lesson-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.card {
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--theme-card-radius);
  padding: 22px; box-shadow: var(--theme-card-shadow);
}

.playlist__head h2 { font-size: 18.5px; font-weight: 800; letter-spacing: -.01em; }
.playlist__head > p { color: var(--theme-text-muted); font-size: 13.5px; line-height: 1.55; margin-top: 8px; }
.playlist__meta { display: flex; gap: 16px; margin: 12px 0 6px; }
.playlist__meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--color-surface-pure); }
.playlist__meta svg { width: 14px; height: 14px; }

.playlist__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.playlist__item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px; border-radius: var(--border-radius-sm-14); cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
}
.playlist__item:hover { background: var(--base-50); transform: translateX(2px); }
.playlist__item.is-now { background: var(--color-accent-tinted); border-color: var(--color-accent-pale); }
.playlist__thumb {
  position: relative; flex-shrink: 0;
  width: 78px; height: 50px; border-radius: var(--border-radius-sm);
  background: var(--tile, var(--color-pastel-lavender));
  display: grid; place-items: center; color: var(--theme-text-heading);
  overflow: hidden;
}
.playlist__thumb svg { width: 20px; height: 20px; }
.playlist__dur {
  position: absolute; right: 4px; bottom: 4px;
  font-size: 9.5px; font-weight: 800; color: #fff;
  background: rgba(15,1,26,.65); border-radius: var(--border-radius-quark); padding: 2px 5px;
  font-variant-numeric: tabular-nums;
}
.playlist__item p { flex: 1; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--theme-text-heading); }
.playlist__item.is-done p { color: var(--color-surface-pure); }
.playlist__state { flex-shrink: 0; }
.playlist__state--done {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--border-radius-circle);
  background: var(--color-pastel-mint); color: var(--theme-text-heading);
}
.playlist__state--done svg { width: 13px; height: 13px; stroke-width: 2.6; }
.playlist__state--now { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; padding-right: 4px; }
.playlist__state--now i { width: 3.5px; border-radius: var(--border-radius-pill); background: var(--color-accent-pure); height: 6px; }

/* Documents */
.docs h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.docs h2 svg { width: 19px; height: 19px; color: var(--color-accent-dark); }
.docs__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px; border-radius: var(--border-radius-sm-14);
  border: 1px solid var(--theme-panel-border);
  text-decoration: none; color: inherit;
  margin-bottom: 8px;
  transition: all var(--motion-dur-fast) var(--motion-ease);
}
.docs__item:hover { border-color: var(--base-400); box-shadow: var(--theme-card-shadow); transform: translateY(-1px); }
.docs__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--border-radius-sm);
  background: var(--tile, var(--color-pastel-lavender));
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
}
.docs__item p { flex: 1; font-size: 14px; font-weight: 700; }
.docs__open { width: 15px; height: 15px; color: var(--color-surface-soft); transition: all var(--motion-dur-fast) var(--motion-ease); }
.docs__item:hover .docs__open { color: var(--color-accent-dark); transform: translate(2px, -2px); }

/* Confetti canvas */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .lesson-grid { grid-template-columns: 1fr; }
  .lesson-rail { order: 1; }
  .progressbar { width: 120px; }
}

@media (max-width: 768px) {
  :root { --rail-w: 0px; }
  .sidebar { display: none; }
  .view { --view-pad-r: 14px; margin-left: 0; padding: 76px var(--view-pad-r) 96px; }
  /* A sangria lateral não pode passar da margem da página: aqui não há corredor
     entre a barra e o conteúdo como no desktop, e 24px de folga jogariam o
     trilho 10px para fora da tela — página rolando de lado. Igualada à margem,
     a sombra ganha o espaço que existe e nada transborda. */
  :root { --card-shadow-bleed-x: 14px; }

  .mobile-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px calc(10px);
    background: rgba(251, 250, 252, .85); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--theme-panel-border);
  }
  .mobile-bar__logo { width: 64px; height: auto; }
  .mobile-bar__avatar { width: 36px; height: 36px; border-radius: var(--border-radius-circle); overflow: hidden; border: 2px solid var(--theme-panel-border); }
  .mobile-bar__avatar img { width: 100%; height: 100%; object-fit: cover; }

  /* Na HOME a barra deixa de ser superfície: o fundo imersivo já é o topo da
     tela, e a faixa clara cortava a foto em duas. Sobram os três elementos —
     logo, sino e avatar — em branco, direto sobre a imagem.
     SÓ na home: nas demais views o que está atrás da barra é o fundo claro da
     página (o banner imersivo começa ABAIXO dela), e conteúdo branco ali ficaria
     invisível. O :has() lê a view corrente, que é irmã da barra, não ancestral. */
  body:has(.view--home.is-current) .mobile-bar {
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: transparent;
  }
  /* o logo é um SVG de arquivo, sem currentColor: vira branco por filtro —
     mesma receita do logo dos emails (brightness(0) invert(1)), sem asset novo */
  body:has(.view--home.is-current) .mobile-bar__logo { filter: brightness(0) invert(1); }
  body:has(.view--home.is-current) .mobile-bar__bell { color: #fff; }
  body:has(.view--home.is-current) .mobile-bar__avatar { border-color: rgba(255,255,255,.55); }

  .bottom-nav {
    position: fixed; bottom: 12px; left: 14px; right: 14px; z-index: 60;
    display: flex; justify-content: space-around; align-items: center;
    padding: 8px;
    background: #fff; border: 1px solid var(--theme-panel-border);
    border-radius: var(--border-radius-sm-plus);
    box-shadow: var(--theme-shadow-lg);
  }

  .hero { min-height: auto; padding: 28px 22px 36px; border-radius: var(--theme-card-radius); }
  .hero__art::after { background: linear-gradient(0deg, rgba(37,8,53,0) 0%, rgba(37,8,53,.55) 55%, rgba(37,8,53,.85) 100%); }
  .hero__art img {
    right: 50%; translate: 50% 0; top: auto; bottom: -6%;
    width: 130%; height: auto; opacity: .55;
    -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 95%);
    mask-image: linear-gradient(0deg, #000 30%, transparent 95%);
  }
  .hero__content { gap: 16px; max-width: 100%; }
  .hero__lead { font-size: 15px; }
  .hero__actions { width: 100%; flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .doodle--star { left: auto; right: 10%; top: 8%; }
  .doodle--spark { left: 8%; top: 6%; }
  .doodle--squiggle { display: none; }

  .modules { padding: 48px 2px; }
  .modules__grid { grid-template-columns: 1fr; }

  .lesson-head__row { gap: 10px; }
  .lesson-head__progress { width: 100%; margin-left: 0; }
  .progressbar { flex: 1; width: auto; }
  .player { border-radius: var(--border-radius-xs); aspect-ratio: 16/10.5; }
  .player__bar { left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; }
  .player__time { display: none; }
  .player__ctl--text, .player__bar .player__ctl:nth-child(2) { display: none; }
  .player__bigplay { width: 64px; height: 64px; }
  .player__doodle { display: none; }
  .content-tabs { align-self: stretch; }
  .content-tab { flex: 1; justify-content: center; padding: 9px 6px; font-size: 13px; }
  .content-tab svg { display: none; }
  .panel { border-radius: var(--border-radius-sm-plus); }
  .finish { padding: 20px; }
  .finish__actions { width: 100%; flex-direction: column; flex-wrap: wrap; }
  /* Empilhados, os botões ocupam a linha inteira: ali o Exportar tem espaço de
     sobra e volta a levar o rótulo. */
  #det-actionbar .btn--export.is-icon { width: 100%; padding: 8px 16px; }
  #det-actionbar .btn--export.is-icon .btn--export__lbl { display: inline; }
  .finish__actions .btn { width: 100%; justify-content: center; }
  /* Rodapé flutuante no mobile: acima da bottom-nav, largura cheia */
  #finish-bar { left: 14px; right: 14px; bottom: 84px; max-width: none; margin-inline: 0; }
  .view--lesson { padding-bottom: 300px; }

  /* ---- A action bar da one pager, RETRAÍDA por baixo da barra de menus ----
     Aberta, ela ocupa um terço da tela do celular — e é o rodapé de TODA a one
     pager, não de um trecho. Fica então encostada na .bottom-nav e escondida
     atrás dela, com só a faixa do título à mostra; abre ao chegar ao fim da
     página e no toque (js/app.js). Quem cobre é a própria .bottom-nav, que tem
     z-index maior.

     --det-actionbar-nav é MEDIDA (detPublicarMedidasBarra): a altura da barra
     de menus é a dos itens dela, e a barra do protótipo ainda a empurra.
     A folga até a nav entra duas vezes de propósito — no repouso da barra
     aberta e, de volta, no translate. É o que faz a faixa retraída ENCOSTAR na
     nav em vez de parar a uma folga dela. */
  body {
    --det-actionbar-nav-gap: 8px;
    --det-actionbar-bottom: calc(var(--det-actionbar-nav, 74px) + var(--det-actionbar-nav-gap));
  }
  #det-actionbar {
    left: 14px; right: 14px; max-width: none; margin-inline: 0;
    transform: translateY(calc(100% + var(--det-actionbar-nav-gap) - var(--det-actionbar-peek, 58px)));
    /* Aberta o recorte fica fora da caixa, então não corta nada — mas existe,
       para poder interpolar com o da retraída. A margem cobre a sombra, que
       vive do lado de fora. */
    clip-path: inset(-60px round 0);
    transition: transform var(--motion-dur) var(--motion-ease),
                clip-path var(--motion-dur) var(--motion-ease);
  }
  #det-actionbar.is-open { transform: none; }
  /* Retraída, a barra não passa da barra de menus para baixo: o corte tira tudo
     abaixo da BASE dela — o que sobra é a faixa do título mais o pedaço que
     fica atrás da nav, e é esse pedaço que dá a leitura de "está por baixo".

     É clip-path, e não overflow nem max-height, porque não pode mexer na altura
     da caixa: é dela que sai o quanto a barra desce (o 100% do translate) e o
     respiro no fim da página. O recorte é geometria, não layout.

     A conta, em coordenadas da própria barra: a base dela está em
     (nav + peek - altura) contado do rodapé da tela, e o corte é a distância
     daí até a base da nav.

     Os cantos de baixo do corte são arredondados com o raio da própria barra:
     terminada em quadrado, ela aparecia como uma laje atrás de uma pílula, e
     os cantos retos sobrando ao lado dos cantos da nav denunciavam que não
     estava escondida. Arredondada, some por baixo. O recorte encosta nas
     laterais (0px) em vez de sobrar 60px, senão o arredondamento cairia fora
     da caixa e não tocaria a borda visível; a sombra é 0 30px 60px, cai para
     baixo, e é justamente o que este corte tira. */
  #det-actionbar:not(.is-open) {
    clip-path: inset(-60px 0px
      calc(100% + var(--det-actionbar-navbase, 12px) - var(--det-actionbar-nav, 74px) - var(--det-actionbar-peek, 58px))
      0px
      round 0 0 var(--theme-card-radius) var(--theme-card-radius));
  }
  /* O que está atrás da barra de menus sai do alcance do toque e do leitor de
     tela. `visibility` faz as duas coisas e, ao contrário de `display`, mantém
     a altura de que o translate depende. */
  #det-actionbar .finish__copy p,
  #det-actionbar #det-actions { transition: opacity var(--motion-dur-fast) var(--motion-ease); }
  #det-actionbar:not(.is-open) .finish__copy p,
  #det-actionbar:not(.is-open) #det-actions { visibility: hidden; opacity: 0; }
  #det-actionbar:not(.is-open) .finish__copy h3 { margin-bottom: 0; }

  .finish__grip {
    display: grid; place-items: center;
    position: absolute; top: 0; right: 0;
    width: 54px; height: var(--det-actionbar-peek, 58px);
    background: none; border: 0; padding: 0; cursor: pointer;
    color: rgba(255,255,255,.72);
  }
  .finish__grip svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    transition: rotate var(--motion-dur) var(--motion-ease);
  }
  #det-actionbar.is-open .finish__grip svg { rotate: 180deg; }
  /* O punho ocupa o canto da faixa: o título para antes de passar por baixo. */
  #det-actionbar .finish__copy { padding-right: 46px; }

  /* Retraída, o FAB pousa logo acima da faixa. Aberta, a barra toma um terço da
     tela e o FAB ficaria flutuando no meio dela: sai de cena com a abertura e
     volta na retração (mesma saída de body.cmdk-open). */
  body:has(.view--detalhe.is-current) .cap-fab {
    bottom: calc(var(--det-actionbar-bottom) + var(--det-actionbar-peek, 58px) + 12px);
    transition: bottom var(--motion-dur) var(--motion-ease), opacity var(--motion-dur-fast) var(--motion-ease);
  }
  body:has(.view--detalhe.is-current #det-actionbar.is-open) .cap-fab { opacity: 0; pointer-events: none; }
}

@media (min-width: 769px) and (max-width: 1080px) {
  .modules__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Stage (lesson media area) + alternative renderers
   ============================================================ */
.stage { display: flex; flex-direction: column; gap: 12px; }
.stage.is-full { position: fixed; inset: 0; z-index: 150; background: var(--color-surface-deepest); padding: 24px; }
.stage:fullscreen { background: var(--color-surface-deepest); padding: 24px; }
.stage__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stage__title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage__count { font-size: 12.5px; font-weight: 800; color: var(--color-surface-pure); white-space: nowrap; }
.chip--aqua { background: var(--color-pastel-aqua); color: var(--theme-text-heading); }
.chip--butter { background: var(--color-pastel-butter); color: var(--theme-text-heading); }
.chip--link { cursor: pointer; transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); border: 0; }
.chip--link:hover { transform: translateY(-1px); box-shadow: var(--theme-card-shadow); }
.chip--gloss { cursor: help; border-bottom: 2px dashed rgba(34,10,51,.35); border-radius: var(--border-radius-pill); }

.player__caption {
  position: absolute; left: 50%; bottom: 76px; translate: -50% 0;
  max-width: 80%; text-align: center;
  background: rgba(15,1,26,.8); color: #fff;
  font-size: 14.5px; font-weight: 700; line-height: 1.4;
  padding: 8px 14px; border-radius: var(--border-radius-sm);
  pointer-events: none;
}
#btn-volume .ic-muted { display: none; }
#btn-volume.is-muted .ic-vol { display: none; }
#btn-volume.is-muted .ic-muted { display: block; }
#btn-cc.is-on { background: rgba(255,255,255,.22); color: #fff; }

/* ---- Deck (slides) ---- */
.deck {
  position: relative; overflow: hidden;
  border-radius: var(--theme-card-radius); aspect-ratio: 16 / 9.4;
  background: var(--grain), radial-gradient(120% 160% at 80% 0%, #4A1A66 0%, var(--color-surface-deep) 60%, var(--color-surface-deepest) 100%);
  box-shadow: var(--theme-shadow-lg);
  isolation: isolate;
}
.deck__viewport { position: absolute; inset: 0 0 54px 0; }
.slide {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; color: #fff;
  padding: clamp(20px, 5%, 48px) clamp(56px, 12%, 110px);
}
.slide.is-active { display: flex; }
.slide h3 { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.01em; }
.slide p { color: rgba(255,255,255,.78); font-size: clamp(14px, 1.4vw, 16.5px); line-height: 1.6; max-width: 46ch; }
.slide p strong { color: var(--color-pastel-peach); }
.slide__big { font-size: clamp(26px, 3.4vw, 44px) !important; line-height: 1.05; position: relative; }
.slide__underline { position: absolute; left: 10%; bottom: -12px; width: 80%; height: 12px; stroke: var(--color-pastel-peach); stroke-width: 5; stroke-linecap: round; fill: none; }
.slide__sub { margin-top: 10px; }
.slide__tile {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: var(--border-radius-sm-plus);
  background: var(--tile, var(--color-pastel-lavender)); color: var(--theme-text-heading);
}
.slide__tile svg, .slide__doodle { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.slide__tile svg { width: 30px; height: 30px; }
.slide__doodle { position: absolute; width: 30px; top: 12%; right: 12%; stroke: var(--color-pastel-butter); stroke-width: 2.4; }

.deck__arrow {
  position: absolute; top: calc(50% - 27px); translate: 0 -50%; z-index: 2;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--border-radius-circle);
  background: #fff; color: var(--theme-text-heading);
  box-shadow: var(--theme-modal-shadow);
  transition: transform var(--motion-dur-fast) var(--motion-ease), opacity var(--motion-dur-fast);
}
.deck__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deck__arrow:hover:not(:disabled) { transform: scale(1.1); }
.deck__arrow:disabled { opacity: .35; cursor: default; }
.deck__arrow--prev { left: 14px; }
.deck__arrow--next { right: 14px; }
.deck__footer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 54px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0 18px;
}
.deck__dots { display: flex; gap: 7px; }
.deck__dot {
  width: 9px; height: 9px; border-radius: var(--border-radius-circle);
  background: rgba(255,255,255,.3);
  transition: background var(--motion-dur-fast), transform var(--motion-dur-fast) var(--motion-ease);
}
.deck__dot:hover { background: rgba(255,255,255,.55); }
.deck__dot.is-active { background: var(--color-pastel-peach); transform: scale(1.25); }
.deck__counter {
  position: absolute; right: 18px;
  font-size: 12px; font-weight: 800; color: rgba(255,255,255,.65);
  font-variant-numeric: tabular-nums;
}

/* ---- Reading banner ---- */
.reading {
  position: relative; overflow: hidden;
  border-radius: var(--theme-card-radius);
  background: var(--grain), linear-gradient(130deg, var(--color-pastel-aqua), #EAF4F8 55%, var(--color-pastel-butter));
  box-shadow: var(--theme-panel-shadow);
  padding: clamp(28px, 5vw, 48px);
}
.reading__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 52ch; }
.reading__tile {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: var(--border-radius-xs);
  background: #fff; color: var(--theme-text-heading); box-shadow: var(--theme-card-shadow);
}
.reading__tile svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reading h3 { font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; letter-spacing: -.01em; }
.reading p { color: var(--color-surface-darker); font-size: 15.5px; line-height: 1.6; }
.reading .btn--hero { box-shadow: var(--theme-panel-shadow); margin-top: 6px; }
.reading__doodle {
  position: absolute; right: 6%; bottom: 12%; width: 110px;
  fill: none; stroke: var(--color-pastel-lavender-deep); stroke-width: 3; stroke-linecap: round;
  opacity: .5;
}

/* ---- Quiz ---- */
.quiz {
  position: relative; overflow: hidden;
  border-radius: var(--theme-card-radius);
  background: var(--grain), radial-gradient(120% 160% at 80% 0%, #4A1A66 0%, var(--color-surface-deep) 60%, var(--color-surface-deepest) 100%);
  box-shadow: var(--theme-shadow-lg);
  padding: clamp(26px, 4.5vw, 44px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  color: #fff;
}
.quiz__q { font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; max-width: 30ch; }
.quiz__options { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 520px; }
.quiz__opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  font-size: 15.5px; font-weight: 700; color: #fff;
  padding: 14px 16px; border-radius: var(--border-radius-sm-14);
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.18);
  transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
}
.quiz__opt:hover:not(:disabled) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.quiz__opt i {
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: var(--border-radius-nano);
  background: rgba(255,255,255,.14);
  font-style: normal; font-size: 13px; font-weight: 800;
}
.quiz__opt.is-correct { background: var(--color-pastel-mint); border-color: var(--color-pastel-mint); color: var(--theme-text-heading); }
.quiz__opt.is-correct i { background: rgba(34,10,51,.12); }
.quiz__opt.is-wrong { background: var(--color-pastel-blush); border-color: var(--color-pastel-blush); color: var(--theme-text-heading); opacity: .85; }
.quiz__opt.is-wrong i { background: rgba(34,10,51,.12); }
.quiz__opt:disabled { cursor: default; }
.quiz__feedback { font-size: 14.5px; font-weight: 700; line-height: 1.5; max-width: 52ch; padding: 12px 16px; border-radius: var(--border-radius-sm); }
.quiz__feedback.is-correct { background: rgba(234,236,199,.18); color: var(--color-pastel-mint); }
.quiz__feedback.is-wrong { background: rgba(248,190,181,.16); color: var(--color-pastel-blush); }

/* ---- Playlist additions ---- */
.playlist__item p { display: flex; flex-direction: column; gap: 3px; }
.playlist__type { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-surface-soft); }
.playlist__meta b { font-weight: 800; }

/* ---- Module tabs / cards locked ---- */
.module-tab svg { width: 13px; height: 13px; display: inline-block; vertical-align: -1.5px; margin-left: 5px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.module-tab.is-locked { color: var(--color-surface-soft); background: var(--base-50); }
.module-tab.is-locked:hover { transform: none; border-color: var(--theme-border-subtle); color: var(--color-surface-pure); }
.module-card { cursor: pointer; }
.module-card__lock {
  position: absolute; top: 22px; right: 22px;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--border-radius-sm);
  background: var(--theme-surface-muted); color: var(--color-surface-pure);
}
.module-card__lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Content tab disabled ---- */
.content-tab.is-disabled { opacity: .45; }

/* ---- Notes form ---- */
.note-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.note-form input {
  flex: 1; min-width: 200px;
  font: inherit; font-weight: 600; color: var(--theme-text-heading);
  padding: 12px 16px;
  background: var(--base-50);
  border: 1.5px solid var(--theme-border-subtle); border-radius: var(--border-radius-sm);
  outline: none;
  transition: border-color var(--motion-dur-fast), box-shadow var(--motion-dur-fast);
}
.note-form input:focus { border-color: var(--color-accent-pure); box-shadow: var(--theme-input-focus-ring); }

/* ---- Buttons extras ---- */
.btn.is-hidden { display: none; }
.btn--download.is-busy { opacity: .7; pointer-events: none; }
.btn--download.is-busy svg { animation: dl-bounce .7s infinite var(--motion-ease); }
@keyframes dl-bounce { 50% { transform: translateY(4px); } }

/* ============================================================
   DS:Modal — contrato único de sobreposição (harmonização ago/2026)
   ------------------------------------------------------------
   Vale para TODA sobreposição do protótipo, nas duas plataformas: as
   variantes .modal__card--*, os diálogos de família própria (.gz-confirm,
   .finmod, .deckx, .onb-modal, .av-*, .edt, .voz, .conq, .cert, .mer-modal…)
   e os drawers (.dash-drawer, .reg-drawer, .edu-drawer).

   1. ROLAGEM — quem rola é a SOBREPOSIÇÃO, nunca uma área interna do cartão.
      Nenhum modal tem cabeçalho ou rodapé fixo: o cartão inteiro sobe junto
      com o conteúdo. Não existe `overflow` no cartão, nem `max-height` que o
      transforme em contêiner de scroll, nem `flex-shrink: 0`/`position:
      sticky` no topo ou no rodapé.
   2. VÉU — `position: fixed`, para não acompanhar a rolagem da sobreposição,
      e sempre pelos tokens --theme-modal-overlay-*.
   3. CENTRALIZAÇÃO — por margem automática no cartão: centraliza quando cabe
      na tela e não corta o topo quando não cabe (o que `place-items: center`
      num contêiner rolável faria).
   4. GEOMETRIA — largura pelo custom property --modal-w (as variantes só
      redefinem esse valor); raio, sombra e véu sempre por token.
   5. DRAWER (variante) — painel presa a uma borda, em altura de tela
      (.dash-drawer, .reg-drawer, .edu-drawer). Aqui não existe sobreposição
      rolável por fora: o PAINEL é a área de rolagem, e é ele que recebe o
      overflow. A regra 1 continua valendo onde importa — cabeçalho, corpo e
      rodapé ficam no fluxo, nada de sticky/fixed dentro do painel.

   Divergência registrada: --theme-modal-radius (16px, contrato do
   frontends-v3) não bate com os 24px praticados aqui. O protótipo mantém
   var(--border-radius-md) até a decisão com o time de dev.
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 180;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 20px; overflow-y: auto; overscroll-behavior: contain;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: fixed; inset: 0;
  background: var(--theme-modal-overlay-bg);
  backdrop-filter: blur(var(--theme-modal-overlay-blur));
}
.modal__card {
  position: relative; z-index: 1;
  width: min(var(--modal-w, 520px), 100%);
  margin: auto 0; /* centraliza quando cabe; não corta o topo quando não cabe */
  background: #fff; border-radius: var(--border-radius-md);
  box-shadow: var(--theme-modal-shadow);
  padding: var(--modal-pad, clamp(24px, 4vw, 36px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.modal__card h2 { font-family: var(--theme-font-family-heading); font-size: clamp(21px, 2.4vw, 27px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.modal__card > p { color: var(--color-surface-darker); font-size: 15px; line-height: 1.6; }
.modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--border-radius-sm);
  background: var(--theme-surface-muted); color: var(--theme-text-muted);
  transition: background var(--motion-dur-fast), transform var(--motion-dur-fast) var(--motion-ease);
}
.modal__close:hover { background: var(--color-surface-mist); transform: rotate(90deg); }
.modal__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.modal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.modal__list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--theme-text-heading); }
.modal__list svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--color-accent-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Cabeçalho canônico: ícone opcional (44px) + kicker + título + subtítulo.
   O botão de fechar é absoluto, então o texto reserva a calha à direita. */
.modal__head { display: flex; align-items: center; gap: 12px; width: 100%; padding-right: 46px; }
.modal__head-txt { min-width: 0; }
.modal__ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--border-radius-sm);
  background: var(--color-pastel-lavender); color: var(--theme-text-heading);
}
.modal__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.modal__kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-pure); }
.modal__sub { width: 100%; font-size: 14px; line-height: 1.55; color: var(--theme-text-muted); }

/* Rodapé canônico: ações à direita, primário por último; empilha no celular. */
.modal__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 10px; width: 100%; margin-top: 4px;
}
.modal__actions--divided { padding-top: 18px; border-top: 1px solid var(--color-surface-pale); }

@media (max-width: 560px) {
  .modal { padding: 14px; }
  .modal__actions { flex-direction: column; align-items: stretch; }
  .modal__actions > * { width: 100%; justify-content: center; }
}

.doc-preview { width: 100%; display: grid; place-items: center; background: var(--theme-surface-muted); border-radius: var(--border-radius-xs); padding: 20px; }
.doc-preview__page {
  width: min(220px, 70%); aspect-ratio: 210/297;
  background: #fff; border-radius: var(--border-radius-nano); box-shadow: var(--theme-panel-shadow);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 8px;
}
.doc-preview__page i { height: 7px; border-radius: var(--border-radius-pill); background: var(--color-surface-mist); }
.doc-preview__page i:first-child { height: 11px; background: var(--color-surface-light); }
.doc-preview__fig { width: 100%; height: 56px; border-radius: var(--border-radius-nano); background: var(--tile, var(--color-pastel-lavender)); margin: 4px 0; }
.doc-meta { font-size: 13px; font-weight: 700; color: var(--color-surface-pure); }

.gloss {
  position: absolute; z-index: 190;
  background: var(--theme-text-heading); color: #fff;
  font-size: 13.5px; font-weight: 600; line-height: 1.5;
  padding: 12px 14px; border-radius: var(--border-radius-sm);
  box-shadow: var(--theme-modal-shadow);
}

.toast {
  position: fixed; left: 50%; bottom: 28px; translate: -50% 0; z-index: 220;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--theme-text-heading); color: #fff;
  font-size: 14px; font-weight: 700;
  padding: 13px 18px; border-radius: var(--border-radius-sm);
  box-shadow: var(--theme-modal-shadow);
  max-width: min(420px, calc(100vw - 32px));
}
.toast[hidden] { display: none; } /* o atributo hidden precisa vencer o display:inline-flex */
.toast svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--color-pastel-mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Modo Offline: barra fixa de status (js/modo-offline.js) ----
   Ao contrário do .toast (transitório), esta é permanente enquanto o modo
   estiver ligado — por isso é condicionada à classe no <html>, não a
   [hidden]: não há um instante em que ela deva "ainda não ter aparecido". */
.modo-offline-bar { display: none; }
.is-modo-offline .modo-offline-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: fixed; inset: auto 0 0 0; z-index: 65;
  background: var(--color-primary-pure); color: #fff;
  font-size: 14px; font-weight: 700;
  padding: 12px 16px;
}
.modo-offline-bar svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Sobe os fixos que, de outra forma, ficariam atrás da barra — mesma ideia do
   --lkp-lift da barra do protótipo (css/lekto-protobar.css), e pela mesma
   variável: as regras `body.lkp-on .X` de lá somam var(--modo-offline-lift)
   na própria fórmula, porque especificidade (body.classe > .classe) faria
   elas venceram estas aqui quando as duas barras estão ligadas ao mesmo
   tempo — sem a soma pela variável, o levante do Modo Offline seria
   descartado nesse caso, e o bottom-nav/userpop ficariam espremidos atrás
   da barra roxa. */
.is-modo-offline { --modo-offline-lift: 44px; }
.is-modo-offline .sidebar { bottom: calc(16px + var(--modo-offline-lift)); }
.is-modo-offline .userpop { bottom: calc(20px + var(--modo-offline-lift)); }
.is-modo-offline .bottom-nav { bottom: calc(12px + var(--modo-offline-lift)); }

/* ---- Responsive: new components ---- */
@media (max-width: 768px) {
  .stage__head { flex-wrap: wrap; gap: 8px; }
  .stage__title { white-space: normal; flex-basis: 100%; order: 3; }
  .deck { aspect-ratio: auto; min-height: 380px; border-radius: var(--border-radius-xs); }
  .slide { padding: 24px 18px 70px; }
  .deck__arrow { width: 38px; height: 38px; top: auto; bottom: 8px; translate: 0 0; }
  .deck__arrow--prev { left: 12px; }
  .deck__arrow--next { right: 12px; }
  .deck__counter { right: 56px; }
  .quiz { border-radius: var(--border-radius-xs); }
  .reading { border-radius: var(--border-radius-xs); }
  .toast { bottom: 92px; }
  .player__caption { bottom: 64px; font-size: 12.5px; }
}

/* hidden must always win over component display values */
.stage__media[hidden], .panel[hidden], .note-form[hidden], [hidden].btn { display: none !important; }

/* ============================================================
   Completion → unlock flow
   ============================================================ */
.playlist__item.is-locked { opacity: .55; cursor: default; }
.playlist__item.is-locked:hover { background: transparent; transform: none; }
.playlist__item.is-locked .playlist__thumb { background: var(--color-surface-mist); color: var(--color-surface-pure); }
.playlist__state--lock {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--border-radius-circle);
  background: var(--theme-surface-muted); color: var(--color-surface-pure); flex-shrink: 0;
}
.playlist__state--lock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* "Aguardando conclusão" → "Próxima" */
.btn--next .btn--next__clock { display: none; }
.btn--next.is-waiting { background: transparent !important; border: 1.5px dashed rgba(255,255,255,.4); color: rgba(255,255,255,.7); box-shadow: none; cursor: default; }
.btn--next.is-waiting:hover { transform: none; background: rgba(255,255,255,.05) !important; }
.btn--next.is-waiting .btn--next__clock { display: block; }
.btn--next.is-waiting .btn--next__arrow { display: none; }

/* quiz gate on the confirm button */
.btn--confirm.is-blocked { opacity: .5; }
.btn--confirm.is-blocked:hover { transform: none; }

/* dynamic lock visuals */
.module-tab:not(.is-locked) svg { display: none; }
.module-card:not(.is-locked) .module-card__lock { display: none; }
.module-card.is-locked .module-card__resume { display: none; }

/* ============================================================
   Utilitário: conteúdo visualmente oculto (acessibilidade)
   ============================================================ */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Level badge with progress dots */
.level {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .01em;
  padding: 6px 11px 6px 9px; border-radius: var(--border-radius-pill); color: var(--theme-text-heading);
  white-space: nowrap;
}
.level--1 { background: var(--color-pastel-mint); }
.level--2 { background: var(--color-pastel-peach); }
.level--3 { background: var(--color-pastel-lavender); }
.level__dots { display: inline-flex; gap: 3px; }
.level__dots i { width: 6px; height: 6px; border-radius: var(--border-radius-circle); background: rgba(34,10,51,.35); }
.level__dots i.is-on { background: var(--theme-text-heading); }

.especial__system-label { color: var(--color-surface-pure); }
.label-small { font-family: var(--theme-font-family-heading); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.priority-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.priority-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--border-radius-sm-14);
  background: var(--color-primary-tinted);
}
.priority-row__time { font-size: 14px; font-weight: 800; color: var(--color-primary-pure); min-width: 34px; flex-shrink: 0; }
.priority-row__title { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--theme-text-heading); line-height: 1.35; min-width: 0; }
.priority-tag {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--border-radius-pill);
}
.priority-tag--rec { background: var(--color-pastel-peach); color: var(--theme-text-heading); }
.priority-tag--ess { background: var(--color-primary-pure); color: #fff; }
.priority-tag--exp { color: var(--color-primary-pure); background: transparent; }

.priority-row--exp { background: transparent; border: 1.5px dashed var(--theme-border-subtle); }
.priority-row--exp .priority-row__title { color: var(--color-primary-pure); font-weight: 700; }

@media (max-width: 768px) {
  .priority-row { flex-wrap: wrap; gap: 8px 12px; }
  .priority-row__title { flex-basis: calc(100% - 48px); }
  .priority-tag { margin-left: 48px; }
}

/* ============================================================
   VIEW: Biblioteca (acervo de conteúdos)
   ============================================================ */
.view--biblioteca { padding-bottom: 48px; }

/* Header band, mesma linguagem imersiva das capas do app */
.lib-head {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--border-radius-md);
  padding: clamp(20px, 2.6vw, 30px) clamp(24px, 4vw, 44px);
  background:
    var(--grain),
    var(--wl-page-hero-gradient); /* papel do contrato — mesmo valor do lekto; slate no aura */
  box-shadow: var(--theme-shadow-lg);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin-bottom: clamp(26px, 3.2vw, 38px);
}
.lib-head__art { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.lib-head__art .doodle { left: auto; stroke-width: 2.6; }
.lib-head__art .doodle--burst { width: 28px; top: 17%; right: 7%; stroke: var(--color-pastel-butter); }
.lib-head__art .doodle--sparkle { width: 17px; top: 30%; right: 19%; stroke: var(--color-pastel-lavender); }
.lib-head__art .doodle--wave-dot { width: 96px; top: 60%; right: 5%; stroke: var(--color-pastel-aqua); stroke-width: 4; stroke-dasharray: 0.1 9; }
.lib-head__art .doodle--dots { width: 42px; top: 44%; right: 21%; fill: var(--color-pastel-mint); stroke: none; }

/* doodles enxutos no mobile: mantém só o grafismo do canto, sem encostar no texto */
@media (max-width: 600px) {
  .lib-head__art .doodle--sparkle,
  .lib-head__art .doodle--wave-dot,
  .lib-head__art .doodle--dots { display: none; }
}
.lib-head__title {
  font-family: var(--theme-font-family-heading);
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 800;
  line-height: 1.04; letter-spacing: -.02em; color: #fff;
}
.lib-head__lead { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.55; max-width: 64ch; }

/* Section heads (Recomendados / Todos os conteúdos) */
.lib-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.lib-section__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lib-section__title {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--theme-font-family-heading); font-size: clamp(20px, 2.4vw, 26px); font-weight: 800;
  letter-spacing: -.015em; color: var(--theme-text-heading); line-height: 1.1;
}
.lib-section__spark { width: 22px; height: 22px; fill: var(--color-pastel-lavender-deep); stroke: none; flex-shrink: 0; }
.lib-section__sub { font-size: 14px; font-weight: 600; color: var(--color-surface-pure); line-height: 1.45; }
.lib-section__sub strong { color: var(--color-primary-pure); font-weight: 800; }

/* Seletor de visualização do acervo: Tabela ↔ Mosaico */
.lib-viewtoggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--theme-surface-muted); border-radius: var(--border-radius-pill); flex-shrink: 0; }
.lib-viewtoggle__btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  font-family: var(--theme-font-family-base); font-size: 13px; font-weight: 700; color: var(--color-surface-pure);
  background: transparent; border-radius: var(--border-radius-pill); cursor: pointer;
  transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease);
}
.lib-viewtoggle__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lib-viewtoggle__btn:hover:not(.is-active) { color: var(--theme-text-heading); }
.lib-viewtoggle__btn.is-active { background: #fff; color: var(--theme-text-heading); box-shadow: var(--theme-card-shadow); }

/* Abas de tipo (Conteúdos / Trilhas / Aulas) — sincronizadas com o filtro "Tipo" do modal */
.lib-typetabs { display: flex; flex-wrap: wrap; gap: 9px; margin: 2px 0 16px; }
.lib-typetab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px;
  font-family: var(--theme-font-family-base); font-size: 14px; font-weight: 800; color: var(--theme-text-heading);
  background: var(--base-50); border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-pill); cursor: pointer;
  transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
}
.lib-typetab:hover { border-color: var(--base-400); transform: translateY(-1px); }
.lib-typetab:focus-visible { outline: none; border-color: var(--color-accent-soft); box-shadow: var(--theme-input-focus-ring); }
.lib-typetab.is-active { background: var(--color-accent-pure); color: #fff; border-color: var(--color-accent-pure); }
.lib-typetab__count {
  display: inline-grid; place-items: center; min-width: 24px; height: 21px; padding: 0 7px;
  font-size: 12px; font-weight: 800; line-height: 1; border-radius: var(--border-radius-pill);
  background: #fff; border: 1px solid var(--theme-panel-border); color: var(--theme-text-muted);
}
.lib-typetab.is-active .lib-typetab__count { background: rgba(255,255,255,.22); border-color: transparent; color: #fff; }
/* A LINHA DE CHIPS (Gustavo, 23/09/2026): as abas de tipo e, no Futuro, os chips
   de público-alvo, com a mesma pastilha. Dois grupos numa linha que quebra: o
   do público desce INTEIRO quando não cabe ao lado dos tipos (é um item flex só)
   e só quebra por dentro quando nem sozinho cabe — o caso do celular.
   A margem da linha é a que as abas tinham sozinhas, e o vão entre os chips de
   um grupo é o delas (9px): sem o público na tela, no Pronto pra DEV, a linha
   tem um item só e nada se move. */
.lib-chiprow {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-md); margin: 2px 0 16px;
  clip-path: inset(-6px);
}
.lib-chiprow > .lib-typetabs { margin: 0; }
.lib-publico { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; }
.lib-publico[hidden] { display: none; }
/* A LINHA DIVISÓRIA ENTRE OS GRUPOS (Gustavo, 23/09/2026): fio de 1px no tom da
   borda das pastilhas, o mesmo do divisor da barra lateral (.sidebar__divider).
   Os DOIS fios são desenhados sempre, e é o recorte da linha que escolhe qual
   aparece:
   - lado a lado, o vertical cai no meio do vão entre os grupos; o horizontal
     fica 10px acima da linha, fora do recorte;
   - empilhados, o horizontal cruza a linha inteira no meio do vão entre as duas
     fileiras; o vertical fica 12px para fora da borda esquerda, recortado.
   SEM JS medindo a quebra: os fios são absolutos e não mudam a largura de nada,
   então nenhum deles consegue empurrar o grupo de linha e entrar em laço.
   O clip-path deixa 6px de folga para o anel de foco (4px) e o hover (1px); os
   fios moram a 10px e 12px, fora dela.
   `left`/`top` automáticos pegam a posição estática (o começo do grupo) e as
   margens deslocam dali. O horizontal ancora na LINHA (`left: 0; right: 0`),
   que é o bloco de contenção porque o grupo não é posicionado. */
.lib-publico::before,
.lib-publico::after { content: ""; position: absolute; background: var(--theme-panel-border); pointer-events: none; }
.lib-publico::before { width: 1px; height: 24px; margin: 8px 0 0 calc(var(--spacing-md) / -2 - .5px); }
.lib-publico::after { left: 0; right: 0; height: 1px; margin-top: calc(var(--spacing-sm) / -2 - .5px); }
/* Ícone do chip no traço do DS: herda a cor da pastilha, branco quando ativa. */
.lib-typetab__ic { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Mosaico: o mesmo .ccard numa grade — mesmas proporções, empilhado */
.lib-mosaic { list-style: none; margin: 0; padding: 6px 0 10px; display: grid; grid-template-columns: repeat(auto-fill, 280px); justify-content: space-between; column-gap: 18px; row-gap: 28px; align-items: start; }
.lib-mosaic[hidden] { display: none; }

/* ---------------------------------------------------------
   CARROSSEL DE CARDS (DS) — setas, contador e botões de borda
   ---------------------------------------------------------
   Nasceu em "Recomendados para você" da Biblioteca e virou componente quando a
   Início pediu a MESMA rolagem nas suas duas fileiras. Copiar as regras faria
   as telas divergirem no primeiro ajuste, então aqui elas são as mesmas: a
   Biblioteca e as duas fileiras da Início montam `.crsl` + `.crsl__track`.
   O comportamento mora em js/carrossel.js.

   `.crsl` é a caixa que sangra até a borda da tela e desenha os degradês;
   `.crsl__track` é o trilho que rola, SEM barra de rolagem — quem anda são as
   setas do cabeçalho (.crsl__nav) e os botões sobre o degradê (.crsl__edge).

   A pilha com swipe do celular (`rec--deck`) continua sendo só da Biblioteca:
   é outro modelo de interação, não outra aparência do mesmo. Fica no fim.
   --------------------------------------------------------- */
.lib-rec { margin-bottom: clamp(34px, 4vw, 52px); }
.crsl__nav { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.crsl__counter { font-size: 13px; font-weight: 800; color: var(--color-surface-pure); min-width: 46px; text-align: center; }
.crsl__arrow {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--border-radius-circle); border: 1px solid var(--theme-panel-border); background: #fff;
  color: var(--theme-text-heading); cursor: pointer; box-shadow: var(--theme-card-shadow);
  transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease);
}
.crsl__arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crsl__arrow:hover { background: var(--color-accent-pure); color: #fff; border-color: var(--color-accent-pure); }
.crsl__arrow:disabled { opacity: .4; cursor: default; background: #fff; color: var(--theme-text-heading); border-color: var(--theme-panel-border); }
.lib-rec__hint {
  display: none; align-items: center; gap: 8px; justify-content: center;
  margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--color-surface-pure);
}
.lib-rec__hint svg { width: 18px; height: 18px; fill: none; stroke: var(--color-primary-pure); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* O trilho sangra até a borda direita da tela: o último card visível some por
   baixo de um degradê que termina na cor do fundo — como se rolasse sob a
   margem. */
/* A margem negativa à esquerda e embaixo abre espaço para a sombra dos cards
   fora da coluna de conteúdo; o padding de mesmo tamanho no trilho devolve o
   alinhamento, então o primeiro card continua na linha do título. Sem isso o
   `overflow-x` corta a sombra e a emenda desenha um retângulo no fundo.
   Os degradês das bordas moram no deck, então acompanham a sangria. */
.crsl {
  position: relative;
  margin-right: calc(-1 * var(--view-pad-r, 24px));
  margin-left: calc(-1 * var(--card-shadow-bleed-x));
  margin-bottom: calc(50px - var(--card-shadow-bleed-y));   /* mantém os 50px de respiro de antes */
}
.crsl .crsl__track {
  list-style: none; margin: 0;
  padding: 18px 2px var(--card-shadow-bleed-y) var(--card-shadow-bleed-x);
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  /* `scroll-snap-align: start` mira a borda do PADDING, não a do conteúdo: sem
     este scroll-padding o encaixe engolia a folga da sombra e o primeiro card
     voltava a encostar na parede da caixa. */
  scroll-padding-left: var(--card-shadow-bleed-x);
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.crsl .crsl__track::-webkit-scrollbar { display: none; }
.crsl .ccard { scroll-snap-align: start; }
.crsl .crsl__track > :last-child { margin-right: var(--view-pad-r, 24px); }

/* degradês das bordas — encostam no card parcialmente visível */
.crsl::before,
.crsl::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 132px; z-index: 3;
  pointer-events: none; opacity: 0; transition: opacity var(--motion-dur-fast) var(--motion-ease);
}
.crsl::before { left: 0; background: linear-gradient(to right, var(--theme-surface-muted), color-mix(in srgb, var(--theme-surface-muted) 62%, transparent) 46%, transparent); }
.crsl::after { right: 0; background: linear-gradient(to left, var(--theme-surface-muted), color-mix(in srgb, var(--theme-surface-muted) 62%, transparent) 46%, transparent); }
.crsl.has-fade-start::before { opacity: 1; }
.crsl.has-fade-end::after { opacity: 1; }

/* botão de rolagem sobre o degradê (substitui a barra de rolagem) */
.crsl__edge {
  position: absolute; top: 50%; z-index: 4;
  width: 46px; height: 46px; display: grid; place-items: center;
  transform: translateY(-50%);
  border-radius: var(--border-radius-circle); border: 1px solid var(--theme-panel-border);
  background: #fff; color: var(--theme-text-heading); cursor: pointer;
  box-shadow: var(--lkt-shadow-level1), var(--lkt-shadow-level2);
  opacity: 0; visibility: hidden;
  transition: opacity var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), visibility var(--motion-dur-fast);
}
.crsl__edge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crsl__edge:hover { background: var(--color-accent-pure); color: #fff; border-color: var(--color-accent-pure); }
.crsl__edge--prev { left: 10px; }
.crsl__edge--next { right: 14px; }
.has-fade-start .crsl__edge--prev,
.has-fade-end .crsl__edge--next { opacity: 1; visibility: visible; }

/* Deck mode (mobile), pilha empilhada controlada via JS — só na Biblioteca.
   Aqui o deck perde a classe .crsl (js/app.js), então nada do carrossel acima
   se aplica: o que resta é o empilhamento. */
.lib-rec__deck.rec--deck { touch-action: pan-y; margin-right: 0; }
.lib-rec__deck.rec--deck .crsl__edge { display: none; }
.lib-rec__deck.rec--deck .crsl__track {
  list-style: none; margin: 0; padding: 0;
  position: relative; height: 500px;
  display: block; overflow: visible;
}
.lib-rec__deck.rec--deck .ccard {
  position: absolute; top: 0; left: 50%; margin-left: -140px;
  will-change: transform; transform-origin: 50% 100%;
}
.lib-rec__deck.rec--deck .ccard.is-front .ccard__flip { cursor: grab; }
.lib-rec__deck.rec--deck .ccard.is-front .ccard__flip:active { cursor: grabbing; }
.lib-rec__deck.rec--deck .ccard[aria-hidden="true"] { pointer-events: none; }

/* Free content tag */
.lib-tag {
  font-size: 11.5px; font-weight: 700; color: var(--theme-text-heading);
  background: var(--color-pastel-lavender); border: 1px solid rgba(34,10,51,.12);
  padding: 4px 10px; border-radius: var(--border-radius-pill); white-space: nowrap;
}

/* ---------------------------------------------------------
   Tabela, toolbar, busca, filtros, paginação
   --------------------------------------------------------- */
/* A BARRA DE DESTINO DA ESTANTE (João, 09/09/2026) — o que o gestor LEVA para a
   escola/regional/rede × o que ele próprio estuda. O componente é o de
   Atribuições (.painel-segment--escopo, mais abaixo nesta folha), reusado sem
   retoque de cor nem de forma.
   A LARGURA MUDOU DE IDEIA (Gustavo, 16/09/2026). Nasceu ocupando a coluna
   inteira, com os dois lados dividindo o espaço ao meio; numa tela larga isso
   atravessava tudo e lia como divisória do layout, não como um par de opções.
   Agora a barra abraça os dois botões e encosta à esquerda, que é o tamanho de
   um controle de duas escolhas.
   `width: fit-content` e NÃO `display: inline-flex`: o pai (`.view`) é block, e
   um elemento inline-level abriria linha anônima e ganharia o vão de baseline
   embaixo — mexendo justamente no respiro que a regra do `.lib-rec` logo abaixo
   ajusta. Com `fit-content` ele continua block-level e só encolhe.
   Duas classes no seletor (0,2,0) por necessidade, não por gosto: o
   `.painel-segment` de origem declara `display: inline-flex` mais ABAIXO nesta
   mesma folha, e com especificidade igual a última linha venceria. */
.painel-segment.lib-escopo { display: flex; width: fit-content; margin-bottom: var(--spacing-sm); }
/* O RESPIRO ACIMA MUDA DE DONO quando a barra existe (João, 09/09/2026: "esse
   espaço cinza acima ficou exagerado"). Os recomendados já se despedem com os
   50px que o `.crsl` reserva no `margin-bottom: calc(50px - bleed-y)`, e a
   margem cheia do `.lib-rec` somava outros ~51px em cima disso — folga que era
   certa quando ela separava DUAS seções grandes (o carrossel e o box branco) e
   virou exagero com uma barra fina no meio. Aqui a distância que importa passa a
   ser carrossel → barra; a barra fica perto do box porque é dele que ela fala.
   `:has` para não tocar o professor: sem a barra na tela (ou com ela `hidden`),
   o seletor não casa e o respiro original fica de pé. */
.lib-rec:has(+ .lib-escopo:not([hidden])) { margin-bottom: var(--spacing-nano); }
.painel-segment.lib-escopo .painel-seg { justify-content: center; text-align: center; }

/* ABAIXO DE 620px a decisão de origem volta a valer: a barra ocupa a linha e os
   dois lados dividem o espaço ao meio. Abraçando o conteúdo os dois rótulos não
   caberiam lado a lado em 375px, e aí o componente de origem manda a fileira
   rolar (`overflow-x: auto` + `flex: 0 0 auto`, no bloco mobile lá embaixo) —
   uma barra que rola esconderia metade da pergunta.
   `flex: 1 1 0` com base ZERO, e não `flex: 1`: com base automática o rótulo
   mais comprido ("Conteúdos para a sua regional") ficaria com um botão maior
   que o do vizinho, e a barra deixaria de ler como duas metades. */
@media (max-width: 620px) {
  .painel-segment.lib-escopo { width: 100%; }
  .painel-segment.lib-escopo .painel-seg { flex: 1 1 0; }
}

.lib-catalog {
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-md);
  box-shadow: var(--theme-card-shadow); padding: clamp(18px, 2.4vw, 26px);
}
.lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.lib-search {
  position: relative; display: flex; align-items: center; flex: 1 1 280px; min-width: 220px;
}
.lib-search svg { position: absolute; left: 15px; width: 18px; height: 18px; fill: none; stroke: var(--color-surface-pure); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lib-search input {
  width: 100%; height: 46px; padding: 0 16px 0 42px;
  font-family: var(--theme-font-family-base); font-size: 14.5px; font-weight: 600; color: var(--theme-text-heading);
  background: var(--base-50); border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm);
  transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease);
}
.lib-search input::placeholder { color: var(--color-surface-pure); font-weight: 600; }
.lib-search input:focus { outline: none; background: #fff; border-color: var(--color-accent-soft); box-shadow: var(--theme-input-focus-ring); }

/* Botão "Filtros" (abre o modal de filtros) */
.lib-filterbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px;
  font-family: var(--theme-font-family-base); font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading);
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm); cursor: pointer;
  transition: border-color var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease);
}
.lib-filterbtn:hover { border-color: var(--theme-border-subtle); }
.lib-filterbtn:focus-visible { outline: none; border-color: var(--color-accent-soft); box-shadow: var(--theme-input-focus-ring); }
.lib-filterbtn__ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lib-filterbtn.has-active { border-color: var(--color-accent-pure); color: var(--color-primary-pure); }
.lib-filterbtn__badge {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  font-size: 11px; font-weight: 800; color: #fff; background: var(--color-accent-pure); border-radius: var(--border-radius-pill);
}
.lib-filterbtn__badge[hidden] { display: none; }

/* Modal de filtros (aplicação em lote) — título e ações fixos, corpo rola */
.modal__card--filtros { --modal-w: 520px; gap: 16px; }
.libf__body { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.libf__section { display: flex; flex-direction: column; }
/* Cabeçalho do dropdown (accordion) por categoria */
.libf__head {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 13px 14px; background: var(--base-50);
  border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm);
  transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease);
}
.libf__head:hover { border-color: var(--base-400); }
.libf__head:focus-visible { outline: none; border-color: var(--color-accent-soft); box-shadow: var(--theme-input-focus-ring); }
.libf__section.is-open .libf__head { background: var(--color-accent-tinted); border-color: var(--color-accent-soft); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.libf__legend { flex: 1; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-surface-pure); }
.libf__section.is-open .libf__legend { color: var(--color-accent-dark); }
.libf__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--color-accent-pure); color: #fff; border-radius: var(--border-radius-pill);
  font-size: 11px; font-weight: 800; line-height: 1;
}
.libf__count[hidden] { display: none; }
.libf__chevron {
  width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--color-surface-pure);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--motion-dur-fast) var(--motion-ease);
}
.libf__section.is-open .libf__chevron { transform: rotate(180deg); stroke: var(--color-accent-dark); }
/* Painel recolhível (grid-rows 0fr→1fr para reveal suave; reduced-motion zera a transição globalmente) */
.libf__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-dur-fast) var(--motion-ease); }
.libf__section.is-open .libf__panel { grid-template-rows: 1fr; }
.libf__panel-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.libf__section.is-open .libf__panel-inner {
  padding: 12px 12px 4px;
  border: 1px solid var(--theme-panel-border); border-top: none;
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}
.libf__search {
  width: 100%; height: 40px; padding: 0 14px;
  font-family: var(--theme-font-family-base); font-size: 13.5px; font-weight: 600; color: var(--theme-text-heading);
  background: var(--base-50); border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-nano);
}
.libf__search:focus { outline: none; border-color: var(--color-accent-soft); box-shadow: var(--theme-input-focus-ring); }
.libf__opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.libf__opt {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--border-radius-nano);
  font-size: 13.5px; font-weight: 600; color: var(--theme-text-heading); cursor: pointer;
}
.libf__opt:hover { background: var(--base-50); }
.libf__opt input { accent-color: var(--color-accent-pure); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
/* Cabeçalho de grupo dentro de uma faceta (ex.: anos por segmento). Não é opção:
   não tem checkbox, não recebe hover, e por isso pesa menos que as opções abaixo. */
.libf__grupo { margin: 10px 0 2px; padding: 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--theme-text-muted); }
.libf__grupo:first-child { margin-top: 0; }
/* Faceta que espera a "mãe": o cabeçalho apaga e o corpo explica o que falta,
   em vez de abrir uma lista vazia sem dizer por quê. */
.libf__section.is-locked .libf__head { cursor: not-allowed; background: var(--theme-surface-muted); border-color: transparent; }
.libf__section.is-locked .libf__legend, .libf__section.is-locked .libf__chevron { color: var(--color-surface-soft); stroke: var(--color-surface-soft); }
.libf__lock { margin: 0; padding: 2px 10px 6px; font-size: 13px; line-height: 1.4; color: var(--theme-text-muted); }
.libf__actions { width: 100%; justify-content: space-between; flex: 0 0 auto; }
.libf__actions-right { display: flex; gap: 10px; }

/* Active filter chips */
.lib-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lib-chips[hidden] { display: none; }
.lib-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--color-primary-pure);
  background: var(--color-primary-tinted); border: 1px solid var(--color-primary-pale);
  padding: 6px 8px 6px 12px; border-radius: var(--border-radius-pill);
}
.lib-chip button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--border-radius-circle); background: var(--color-primary-pale); cursor: pointer; }
.lib-chip button svg { width: 11px; height: 11px; fill: none; stroke: var(--color-primary-dark); stroke-width: 2.2; stroke-linecap: round; }
.lib-chip--clear { color: var(--theme-text-muted); background: transparent; border: 1px dashed var(--theme-border-subtle); cursor: pointer; padding: 6px 12px; }

/* Table */
.lib-table__scroll { overflow-x: auto; border-radius: var(--border-radius-sm); border: 1px solid var(--color-surface-pale); }
.lib-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.lib-table thead th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--theme-text-muted);
  background: var(--base-50); padding: 13px 16px; border-bottom: 1px solid var(--theme-panel-border); white-space: nowrap;
}
.lib-table tbody tr { cursor: pointer; transition: background var(--motion-dur-fast) var(--motion-ease); border-bottom: 1px solid var(--color-surface-pale); }
.lib-table tbody tr:last-child { border-bottom: 0; }
.lib-table tbody tr:hover { background: var(--color-accent-tinted); }
.lib-table td { padding: 14px 16px; vertical-align: middle; }

.lib-cell-title { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.lib-cell-title__tile { width: 40px; height: 40px; border-radius: var(--border-radius-sm); display: grid; place-items: center; background: var(--tile, var(--color-pastel-lavender)); flex-shrink: 0; }
.lib-cell-title__tile svg { width: 22px; height: 22px; fill: none; stroke: var(--theme-text-heading); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.lib-cell-title__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lib-cell-title__name { font-family: var(--theme-font-family-heading); font-size: 14.5px; font-weight: 700; color: var(--theme-text-heading); line-height: 1.25; }
.lib-type {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--border-radius-pill);
}
.lib-type--formacao { background: var(--color-pastel-lavender); color: var(--theme-text-heading); }
.lib-type--aula { background: var(--color-pastel-lavender); color: var(--theme-text-heading); }
.lib-type--trilha { background: var(--color-pastel-aqua); color: var(--theme-text-heading); }
.lib-type--avaliacao { background: var(--color-pastel-butter); color: var(--theme-text-heading); }

.lib-cell-seg { font-size: 13.5px; font-weight: 400; color: var(--theme-text-heading); white-space: nowrap; }
.lib-cell-seg small { display: block; font-size: 12px; font-weight: 600; color: var(--color-surface-pure); }
.lib-cell-tags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 240px; }
.lib-cell-load { font-size: 13.5px; font-weight: 400; color: var(--theme-text-heading); white-space: nowrap; }
.lib-cell-attr { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 400; color: var(--theme-text-heading); white-space: nowrap; }
.lib-cell-attr svg { width: 15px; height: 15px; fill: none; stroke: var(--color-primary-pure); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lib-cell-attr--zero { color: var(--color-surface-soft); font-weight: 600; }
.lib-table .level { font-size: 11px; padding: 5px 10px 5px 9px; }

/* Empty state */
/* `[hidden]` PRECISA DE REGRA EXPLÍCITA NESTE PROJETO: não há reset global de
   [hidden] (css/visao.css documenta isso), e `display: flex` de autor vence o
   `display: none` da folha do navegador. Sem a linha abaixo o
   `$("#lib-empty").hidden = total > 0` do app.js nunca escondeu nada. */
.lib-empty[hidden] { display: none; }
.lib-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 16px; text-align: center; }
.lib-empty svg { width: 34px; height: 34px; fill: none; stroke: var(--color-surface-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lib-empty p { font-size: 15px; font-weight: 700; color: var(--theme-text-muted); }

/* Pagination */
.lib-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.lib-pagination[hidden] { display: none; }
.lib-pagination__info { font-size: 13px; font-weight: 600; color: var(--color-surface-pure); }
.lib-pagination__info strong { color: var(--theme-text-heading); font-weight: 800; }
.lib-pagination__pages { display: inline-flex; align-items: center; gap: 6px; }
.lib-page {
  min-width: 38px; height: 38px; padding: 0 10px; display: grid; place-items: center;
  font-family: var(--theme-font-family-base); font-size: 13.5px; font-weight: 800; color: var(--theme-text-heading);
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-nano); cursor: pointer;
  transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease);
}
.lib-page:hover:not(:disabled):not(.is-current) { border-color: var(--theme-border-subtle); background: var(--base-50); }
.lib-page.is-current { background: var(--color-accent-pure); color: #fff; border-color: var(--color-accent-pure); cursor: default; }
.lib-page:disabled { opacity: .4; cursor: default; }
.lib-page svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lib-page--gap { border: 0; background: transparent; cursor: default; min-width: 22px; }

/* Responsive: Biblioteca */
@media (max-width: 700px) {
  .lib-mosaic { grid-template-columns: repeat(auto-fill, 280px); justify-content: center; }
}
@media (max-width: 768px) {
  .lib-head { border-radius: var(--border-radius-sm-plus); padding: 18px 20px 22px; }
  .lib-section__head { flex-wrap: wrap; }
  /* Só na Biblioteca: aqui o carrossel dá lugar à pilha com swipe, e setas e
     contador não descrevem mais o que a mão faz. A Início segue no carrossel
     em qualquer largura, então a nav dela fica. */
  .lib-rec .crsl__nav { display: none; }
  .lib-rec__hint { display: flex; }
  .lib-catalog { padding: 16px 14px; border-radius: var(--border-radius-sm-plus); }
  .lib-search { flex-basis: 100%; }
  .lib-filterbtn { width: 100%; justify-content: center; }
  .lib-pagination { justify-content: center; }
  .lib-pagination__info { flex-basis: 100%; text-align: center; order: 2; }
}

/* ============================================================
   VIEW: Detalhe (Aula / Trilha, one-pager)
   Reusa lesson-grid, card, chip, player, finish, module-tabs.
   ============================================================ */
.view--detalhe { padding-bottom: 48px; }
.detalhe-head { padding-top: 8px; }
.detalhe-head__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.detalhe-head__chips .chip { white-space: nowrap; font-size: 12px; font-weight: 800; gap: 6px; padding: 6px 11px; }
.detalhe-head__chips .chip svg { fill: none; stroke: currentColor; width: 14px; height: 14px; }
.detalhe-head__more {
  font-size: 12.5px; font-weight: 800; color: var(--color-surface-pure);
  background: var(--theme-surface-muted); padding: 6px 11px; border-radius: var(--border-radius-pill);
}
.detalhe-tabs { margin-top: 4px; }
.detalhe-grid { margin-top: 18px; }

/* ---- Resumo em áudio (LIA) ---- */
.resume-audio {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; gap: 18px; align-items: stretch;
  border-radius: var(--theme-card-radius); padding: 20px 22px; color: #fff;
  background: var(--grain), var(--wl-immersive-surface); /* papel do contrato — mesmo valor do lekto; slate no aura */
  box-shadow: var(--theme-shadow-lg);
}
.resume-audio__art {
  flex-shrink: 0; width: 84px; border-radius: var(--border-radius-xs);
  background: var(--tile, var(--color-pastel-lavender)); display: grid; place-items: center;
}
.resume-audio__art svg { width: 38px; height: 38px; fill: none; stroke: var(--theme-text-heading); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.resume-audio__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.resume-audio__lia { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--color-pastel-butter); }
.resume-audio__lia svg { width: 14px; height: 14px; fill: var(--color-pastel-butter); stroke: none; }
.resume-audio__body h2 { font-family: var(--theme-font-family-heading); font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.resume-audio__body > p { color: rgba(255,255,255,.72); font-size: 13.5px; line-height: 1.5; }
.resume-audio__player { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.resume-audio__play {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--border-radius-circle);
  display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--color-accent-dark); box-shadow: var(--lkt-shadow-level4);
  transition: transform var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease);
}
.resume-audio__play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 2px; }
.resume-audio__play:hover { transform: scale(1.06); background: var(--color-pastel-butter); }
.resume-audio__play .ic-pause { display: none; }
.resume-audio.is-playing .ic-play { display: none; }
.resume-audio.is-playing .ic-pause { display: block; margin-left: 0; }
.resume-audio__wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 34px; min-width: 0; overflow: hidden; }
.resume-audio__wave i { flex: 1; min-width: 2px; border-radius: var(--border-radius-pill); background: rgba(255,255,255,.3); }
.resume-audio__wave i.is-on { background: linear-gradient(180deg, var(--color-pastel-lavender), var(--color-accent-soft)); }
.resume-audio__time { flex-shrink: 0; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }

/* ---- Intro ---- */
.detalhe-intro { color: var(--color-surface-darker); font-size: 15.5px; line-height: 1.7; padding: 0 2px; }

/* ---- Blocos colapsáveis ---- */
.cblocks { display: flex; flex-direction: column; gap: 14px; }
.cblock {
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-plus);
  box-shadow: var(--theme-card-shadow); overflow: hidden;
}
.cblock__head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 18px 20px; cursor: pointer; text-align: left;
}
.cblock__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--border-radius-sm); background: var(--color-primary-tinted); flex-shrink: 0; }
.cblock__icon svg { width: 19px; height: 19px; fill: none; stroke: var(--color-primary-pure); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cblock__title { flex: 1; font-family: var(--theme-font-family-heading); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--theme-text-heading); min-width: 0; }
.cblock__dur {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 800; color: var(--color-accent-dark);
  background: var(--color-accent-tinted); padding: 5px 10px; border-radius: var(--border-radius-pill);
}
.cblock__dur svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cblock__caret { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--color-surface-pure); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-dur-fast) var(--motion-ease); }
.cblock.is-open .cblock__caret { transform: rotate(180deg); }
.cblock__body { padding: 0 20px 22px; }
.cblock:not(.is-open) .cblock__body { display: none; }

/* ---- Rich content (dentro dos blocos) ---- */
.rich > h3 { font-family: var(--theme-font-family-heading); font-size: 18px; font-weight: 700; color: var(--theme-text-heading); margin: 18px 0 10px; }
.rich > h3:first-child { margin-top: 4px; }
.rich p { color: var(--color-surface-darker); font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.rich p strong { color: var(--theme-text-heading); font-weight: 800; }
.rich p em { font-style: italic; }
.rich a.rich__link { color: var(--color-accent-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.rich ul, .rich ol { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.rich li { color: var(--color-surface-darker); font-size: 15px; line-height: 1.55; }
.rich li::marker { color: var(--color-primary-pure); font-weight: 800; }
.t-roxo { color: var(--color-primary-pure); font-weight: 700; }
.t-vermelho { color: var(--color-error-pure); font-weight: 700; }
.t-rosa { color: var(--color-pastel-lavender-deep); font-weight: 700; }
.t-verde { color: var(--color-success-dark); font-weight: 700; }
.t-laranja { color: var(--color-warning-dark); font-weight: 700; }

/* Dica de Mediação */
.mediation {
  background: var(--color-accent-tinted); border: 1px solid var(--color-accent-pale);
  border-radius: var(--border-radius-xs); padding: 18px 20px; margin: 4px 0 18px;
}
.mediation__head { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; color: var(--color-accent-darker); margin-bottom: 10px; }
.mediation__head svg { width: 18px; height: 18px; fill: none; stroke: var(--color-accent-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mediation p { color: var(--theme-text-heading); font-size: 14.5px; line-height: 1.65; margin-bottom: 12px; }
.mediation ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.mediation li { color: var(--color-surface-darker); font-size: 14px; line-height: 1.5; }
.mediation li strong { color: var(--theme-text-heading); }

/* Tag/destaque chips dentro do bloco */
.rich__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }

/* Citação */
.rich__quote {
  margin: 6px 0 18px; padding: 4px 0 4px 18px;
  border-left: 4px solid var(--color-pastel-lavender-deep);
  font-family: var(--theme-font-family-heading); font-size: 19px; font-weight: 600; font-style: italic;
  color: var(--theme-text-heading); line-height: 1.4;
}
.rich__quote cite { display: block; margin-top: 8px; font-family: var(--theme-font-family-base); font-size: 13.5px; font-weight: 700; font-style: normal; color: var(--color-surface-pure); }

/* Link card */
.linkcard {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--border-radius-sm-14); text-decoration: none;
  background: var(--color-primary-tinted); border: 1px solid var(--color-primary-pale);
  color: var(--color-primary-dark); margin-bottom: 6px;
  transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease);
}
.linkcard:hover { transform: translateY(-1px); box-shadow: var(--theme-card-shadow); }
.linkcard svg:first-child { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.linkcard span { flex: 1; font-size: 13.5px; font-weight: 700; line-height: 1.4; min-width: 0; }
.linkcard__out { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Botão genérico inline (ex.: "Abrir Personalização") já usa .btn--outline/.btn--sm */

/* ---- Atribuir (mesmo padrão do finish "Concluir aula") ---- */
.detalhe-finish .btn--confirm__check path { stroke: var(--theme-text-heading); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Ficha "como esta avaliação funciona" — one pager do 4º tipo de conteúdo.
   Quatro fatos em linha: quantas perguntas, quanto tempo, quem responde e
   quem atribui. É o que decide se o professor começa agora ou depois. */
.det-avinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; list-style: none; margin: 0; padding: 0; }
.det-avinfo li { display: flex; flex-direction: column; gap: 3px; }
.det-avinfo strong { font-size: 17px; font-weight: 800; color: var(--theme-text-heading); }
.det-avinfo span { font-size: 13px; line-height: 1.4; color: var(--theme-text-muted); }

/* ---- Per-aula panel ---- */
.aula-panel { display: flex; flex-direction: column; gap: 16px; }
.aula-panel__head { display: flex; flex-direction: column; gap: 8px; }
.aula-panel__title { font-family: var(--theme-font-family-heading); font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.01em; color: var(--theme-text-heading); }

/* ---- Right rail sections ---- */
.rail-section .rail-section__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--theme-text-heading); margin-bottom: 14px; }
.rail-section__title .rail-section__i { width: 19px; height: 19px; fill: none; stroke: var(--color-accent-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-list { display: flex; flex-direction: column; gap: 8px; }
.rail-item {
  display: flex; align-items: center; gap: 11px; padding: 11px;
  border-radius: var(--border-radius-sm-14); border: 1px solid var(--theme-panel-border);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
}
.rail-item:hover { border-color: var(--theme-border-subtle); background: var(--base-50); transform: translateX(2px); }
.rail-item__tile { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--border-radius-sm); background: var(--tile, var(--color-pastel-lavender)); display: grid; place-items: center; }
.rail-item__tile svg { width: 18px; height: 18px; fill: none; stroke: var(--theme-text-heading); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.rail-item p { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading); line-height: 1.35; min-width: 0; }
.rail-item__chev { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--color-surface-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-section + .rail-section { margin-top: 0; }

.rail-group { margin-top: 14px; }
.rail-group__label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-surface-pure); margin: 0 0 8px; }
.rail-group__label svg { width: 14px; height: 14px; fill: none; stroke: var(--color-surface-pure); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rail-group__aula { font-size: 11.5px; font-weight: 800; color: var(--color-surface-soft); margin: 10px 0 4px; }
.material {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border-radius: var(--border-radius-sm); text-decoration: none; color: var(--theme-text-heading);
  transition: background var(--motion-dur-fast) var(--motion-ease);
}
.material:hover { background: var(--base-50); }
.material span { flex: 1; font-size: 13.5px; font-weight: 700; min-width: 0; }
.material svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--color-surface-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-bullets { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rail-bullets li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--color-surface-darker); }
.rail-bullets li::before { content: ""; width: 7px; height: 7px; border-radius: var(--border-radius-circle); background: var(--color-pastel-lavender-deep); flex-shrink: 0; }

/* Responsive: Detalhe */
@media (max-width: 768px) {
  .resume-audio { flex-direction: column; }
  .resume-audio__art { width: 100%; height: 92px; }
  .cblock__head { flex-wrap: wrap; padding: 16px; }
  .cblock__title { flex-basis: calc(100% - 110px); }
  .cblock__body { padding: 0 16px 18px; }
}

/* ---- Blocos temporais colapsáveis (sistema priorizado) ---- */
.tblocks { display: flex; flex-direction: column; gap: 8px; }
.tblock { border-radius: var(--border-radius-sm-14); background: var(--color-primary-tinted); overflow: hidden; transition: background var(--motion-dur-fast) var(--motion-ease); }
.tblock--exp { background: transparent; border: 1.5px dashed var(--theme-border-subtle); }
.tblock__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; cursor: pointer; text-align: left; }
.tblock__time { flex-shrink: 0; min-width: 30px; font-size: 14px; font-weight: 800; color: var(--color-primary-pure); font-variant-numeric: tabular-nums; }
.tblock__title { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--theme-text-heading); line-height: 1.35; min-width: 0; }
.tblock--exp .tblock__title { color: var(--color-primary-pure); }
.tblock__mat { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--border-radius-nano); background: var(--color-primary-pale); color: var(--color-primary-dark); flex-shrink: 0; }
.tblock__mat svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tblock__caret { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--color-surface-pure); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-dur-fast) var(--motion-ease); }
.tblock.is-open .tblock__caret { transform: rotate(180deg); }
.tblock__body { display: none; padding: 0 16px 16px; }
.tblock.is-open .tblock__body { display: block; }
.tblock__desc { color: var(--color-surface-darker); font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.tblock__est { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--color-accent-dark); background: #fff; padding: 6px 11px; border-radius: var(--border-radius-pill); margin-bottom: 12px; box-shadow: var(--theme-card-shadow); }
.tblock__est svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tblock__mats { display: flex; flex-direction: column; gap: 6px; }
.tblock__mats-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-surface-pure); margin-bottom: 2px; }
.tblock__mat-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--border-radius-sm); background: #fff; border: 1px solid var(--theme-panel-border);
  text-decoration: none; color: var(--theme-text-heading); cursor: pointer;
  transition: border-color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
}
.tblock__mat-item:hover { border-color: var(--color-primary-pale); transform: translateX(2px); }
.tblock__mat-item > svg:first-child { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--color-primary-pure); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tblock__mat-item span { flex: 1; font-size: 13.5px; font-weight: 700; min-width: 0; }
.tblock__mat-out { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--color-surface-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 768px) {
  .tblock__head { flex-wrap: wrap; gap: 8px 10px; }
  .tblock__title { flex-basis: calc(100% - 44px); }
  .tblock__time { order: -1; }
}

/* ============================================================
   EXPORT, botão, modal, fluxo WhatsApp/2FA
   ============================================================ */

/* Ações do header do detalhe: Atribuir (primária) + Exportar (secundária) */
.detalhe-head__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Exportar, secundária */
.btn--export {
  min-height: 44px; padding: 8px 16px;
  color: var(--theme-text-heading); border: 1.5px solid var(--theme-border-subtle); border-radius: var(--border-radius-pill);
  background: #fff; box-shadow: var(--theme-card-shadow); font-weight: 700;
}
.btn--export:hover { transform: translateY(-1px); border-color: var(--color-surface-soft); box-shadow: var(--theme-panel-shadow); }
.btn--export:active { transform: translateY(0); }
.btn--export .btn--export__ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Atribuir, primária (ação mais importante da tela) */
.btn--attribute {
  min-height: 44px; padding: 8px 20px 8px 16px;
  color: #fff; border: 0; border-radius: var(--border-radius-pill);
  background: linear-gradient(120deg, var(--color-accent-pure), var(--color-pastel-lavender-deep));
  box-shadow: var(--theme-panel-shadow); font-weight: 800;
}
.btn--attribute:hover { transform: translateY(-2px); box-shadow: var(--theme-shadow-lg); }
.btn--attribute:active { transform: translateY(0); }
.btn--attribute__ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn--attribute__check { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: none; }
.btn--attribute__check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.btn--attribute.is-done { background: linear-gradient(120deg, var(--color-success-pure), var(--color-success-dark)); }
.btn--attribute.is-done .btn--attribute__ic { display: none; }
.btn--attribute.is-done .btn--attribute__check { display: block; }

@media (max-width: 700px) {
  .detalhe-head__actions { width: 100%; margin-left: 0; }
  .detalhe-head__actions .btn { flex: 1; justify-content: center; }
}

.btn--block { width: 100%; justify-content: center; }
.btn--block:disabled { opacity: .42; cursor: default; box-shadow: none; transform: none; }
.btn--block:disabled:hover { transform: none; box-shadow: none; }

.chip--mint { background: var(--color-pastel-mint); color: var(--theme-text-heading); }

/* Card do modal */
.modal__card--export { --modal-w: 560px; --modal-pad: 0; gap: 0; }
.modal__card--export .modal__close { top: 16px; right: 16px; z-index: 3; }

/* Painéis (state machine) */
.xport__panel { padding: clamp(22px, 4vw, 32px); display: none; flex-direction: column; gap: 20px; }
.xport__panel.is-active { display: flex; animation: xport-in .42s var(--motion-ease) both; }
@keyframes xport-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Cabeçalho */
.xport__head { display: flex; gap: 16px; align-items: flex-start; padding-right: 28px; }
.xport__head h2 { font-size: clamp(20px, 2.4vw, 25px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 8px 0 0; }
.xport__sub { color: var(--theme-text-muted); font-size: 14.5px; line-height: 1.6; margin: 6px 0 0; }
.xport__sub b { color: var(--theme-text-heading); }
.xport__art {
  position: relative; flex-shrink: 0;
  width: 56px; height: 56px; border-radius: var(--border-radius-xs);
  display: grid; place-items: center;
  background: radial-gradient(130% 130% at 30% 10%, #4A1A66, var(--color-surface-deep) 70%, var(--color-surface-deepest));
  box-shadow: var(--theme-card-shadow);
}
.xport__art-ic { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xport__art-doodle { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; fill: var(--color-pastel-butter); stroke: none; filter: drop-shadow(0 2px 4px rgba(37,8,53,.35)); }
.xport__art--wa { background: linear-gradient(135deg, var(--color-success-pure), var(--color-success-darker)); }

/* Escopo */
.xport__scope { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.xport__scope legend { color: var(--color-surface-pure); margin-bottom: 2px; padding: 0; }
.scope-card { display: block; cursor: pointer; }
.scope-card input { position: absolute; opacity: 0; pointer-events: none; }
.scope-card__body {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px; border-radius: var(--border-radius-sm);
  border: 1.5px solid var(--theme-panel-border); background: #fff;
  transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease);
}
.scope-card:hover .scope-card__body { border-color: var(--base-400); }
.scope-card input:focus-visible + .scope-card__body { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }
.scope-card input:checked + .scope-card__body { border-color: var(--color-accent-pure); background: var(--color-accent-tinted); box-shadow: var(--theme-card-shadow); }
.scope-card__ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--border-radius-sm); display: grid; place-items: center; background: var(--tile, var(--color-pastel-lavender)); }
.scope-card__ic svg { width: 21px; height: 21px; fill: none; stroke: var(--theme-text-heading); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scope-card__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.scope-card__txt b { font-size: 15px; color: var(--theme-text-heading); font-weight: 700; }
.scope-card__txt small { font-size: 13px; color: var(--color-surface-pure); }
.scope-card__check { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--color-accent-pure); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.scope-card input:checked + .scope-card__body .scope-card__check { opacity: 1; transform: none; }

.xport__aula-pick { padding: 2px 2px 0 56px; display: flex; flex-direction: column; gap: 7px; }
.xport__aula-pick[hidden], .xport__scope[hidden], .xport__formats[hidden] { display: none; }
.xport__select-label { font-size: 13px; font-weight: 700; color: var(--theme-text-muted); }
.xport__select { position: relative; }
.xport__select select {
  width: 100%; appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--theme-text-heading);
  padding: 12px 38px 12px 14px; border-radius: var(--border-radius-sm);
  border: 1.5px solid var(--theme-border-subtle); background: #fff; cursor: pointer;
}
.xport__select select:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 1px; border-color: var(--color-accent-pure); }
.xport__select svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; fill: none; stroke: var(--color-surface-pure); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Divisor + formatos */
.xport__formats { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--theme-panel-border); }
.xport__formats-label { color: var(--color-surface-pure); }
.format-card {
  display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 15px 16px; border-radius: var(--border-radius-sm-plus);
  border: 1.5px solid var(--theme-panel-border); background: #fff;
  box-shadow: var(--theme-card-shadow);
  transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease);
}
.format-card:hover { transform: translateY(-2px); box-shadow: var(--theme-shadow-lg); border-color: var(--theme-border-subtle); }
.format-card:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }
.format-card__ic { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--border-radius-sm-14); display: grid; place-items: center; }
.format-card__ic svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.format-card__ic--pdf { background: var(--color-pastel-lavender); color: var(--theme-text-secondary); }
.format-card__ic--wa { background: linear-gradient(135deg, var(--color-success-pure), var(--color-success-dark)); color: #fff; }
.format-card__txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.format-card__txt b { font-size: 16px; font-weight: 800; color: var(--theme-text-heading); letter-spacing: -.01em; }
.format-card__txt small { font-size: 12.8px; line-height: 1.5; color: var(--theme-text-muted); }
.format-card__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-accent-dark); }
.format-card__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-dur-fast) var(--motion-ease); }
.format-card:hover .format-card__cta svg { transform: translateX(3px); }

/* Voltar dentro do modal */
.xport__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--theme-text-muted); font-weight: 700; font-size: 14px; padding: 4px 6px 4px 0; border-radius: var(--border-radius-nano); }
.xport__back svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xport__back:hover { color: var(--theme-text-heading); transform: translateX(-2px); }

/* Formulário WhatsApp */
.xport__form { display: flex; flex-direction: column; gap: 16px; }
.xport__field { display: flex; flex-direction: column; gap: 7px; }
.xport__field-label { font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading); }
.xport__phone { display: flex; align-items: stretch; border: 1.5px solid var(--theme-border-subtle); border-radius: var(--border-radius-sm); background: #fff; overflow: hidden; transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.xport__phone:focus-within { border-color: var(--color-accent-pure); box-shadow: 0 0 0 3px var(--color-accent-tinted); }
.xport__ddi { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; background: var(--theme-surface-muted); color: var(--theme-text-heading); font-weight: 700; font-size: 15px; border-right: 1.5px solid var(--theme-border-subtle); }
.xport__flag { font-size: 17px; line-height: 1; }
.xport__phone input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--theme-text-heading); padding: 13px 14px; }
.xport__phone.is-error { border-color: var(--color-error-pure); }
.xport__phone.is-error:focus-within { box-shadow: 0 0 0 3px var(--color-error-tinted); }
.xport__hint { font-size: 12.5px; color: var(--color-surface-pure); display: flex; align-items: center; gap: 6px; }
.xport__hint.is-error { color: var(--color-error-dark); font-weight: 600; }
.xport__legal { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--color-surface-pure); margin: 0; }
.xport__legal svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--color-success-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* OTP 2FA */
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.otp__cell {
  aspect-ratio: 3/4; min-width: 0; width: 100%;
  text-align: center; font: inherit; font-size: 24px; font-weight: 800; color: var(--theme-text-heading);
  border: 1.5px solid var(--theme-border-subtle); border-radius: var(--border-radius-sm); background: #fff;
  transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
}
.otp__cell:focus { outline: 0; border-color: var(--color-accent-pure); box-shadow: 0 0 0 3px var(--color-accent-tinted); transform: translateY(-2px); }
.otp__cell.is-filled { border-color: var(--color-accent-soft); background: var(--color-accent-tinted); }
.otp.is-error .otp__cell { border-color: var(--color-error-pure); }
.otp.is-ok .otp__cell { border-color: var(--color-success-pure); background: var(--color-success-tinted); }
.xport__otp-msg { font-size: 13px; font-weight: 600; margin: -4px 0 0; }
.xport__otp-msg.is-error { color: var(--color-error-dark); }
.xport__otp-msg.is-ok { color: var(--color-success-darker); }
.xport__resend { background: none; border: 0; cursor: pointer; font-size: 13.5px; color: var(--theme-text-muted); text-align: center; padding: 2px; }
.xport__resend b { color: var(--color-accent-dark); }
.xport__resend:disabled { cursor: default; opacity: .6; }
.xport__resend:disabled b { color: var(--color-surface-pure); }

/* Sucesso */
.xport__panel--sent { text-align: center; align-items: center; padding-top: clamp(28px, 6vw, 40px); }
.xport__panel--sent h2 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 800; letter-spacing: -.01em; }
.xport__panel--sent .xport__sub { text-align: center; max-width: 40ch; }
.xport__sent-mark { width: 76px; height: 76px; border-radius: var(--border-radius-circle); display: grid; place-items: center; background: linear-gradient(135deg, var(--color-success-pure), var(--color-success-dark)); box-shadow: var(--theme-panel-shadow); }
.xport__sent-mark svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: xport-check .5s var(--motion-ease) .18s forwards; }
@keyframes xport-check { to { stroke-dashoffset: 0; } }
.xport__sent-preview { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--border-radius-sm); border: 1.5px dashed var(--theme-border-subtle); background: var(--base-50); }
.xport__sent-fav { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--border-radius-nano); display: grid; place-items: center; background: var(--color-pastel-lavender); }
.xport__sent-fav svg { width: 18px; height: 18px; fill: none; stroke: var(--color-surface-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xport__sent-link { flex: 1; text-align: left; display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.xport__sent-link small { font-size: 12px; color: var(--color-surface-pure); }
.xport__sent-link b { font-size: 14px; color: var(--theme-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xport__sent-copy { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--border-radius-nano); display: grid; place-items: center; cursor: pointer; color: var(--theme-text-muted); background: #fff; border: 1px solid var(--theme-panel-border); transition: transform var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.xport__sent-copy:hover { color: var(--color-accent-dark); transform: translateY(-1px); }
.xport__sent-copy svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xport__panel--sent .modal__actions { margin-top: 4px; width: 100%; }
.xport__panel--sent .modal__actions .btn { flex: 1; justify-content: center; }

@media (max-width: 600px) {
  .xport__head { flex-direction: column; gap: 12px; }
  .otp { gap: 6px; }
  .otp__cell { font-size: 20px; }
  .xport__aula-pick { padding-left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .xport__panel.is-active { animation: none; }
  .xport__sent-mark svg { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   DET-STAGE, player + deck reusados no detalhe (interatividade por classe)
   ============================================================ */
.det-stage { display: flex; flex-direction: column; gap: 16px; margin: 22px 0; }

/* swap de ícones play/pause e mudo por classe (a formação usa IDs singleton) */
.player__ctl--play .ic-pause { display: none; }
.det-player.is-playing .player__ctl--play .ic-play { display: none; }
.det-player.is-playing .player__ctl--play .ic-pause { display: block; }
.det-player .ic-muted { display: none; }
.det-player.is-muted .ic-vol { display: none; }
.det-player.is-muted .ic-muted { display: block; }

/* dots como botões, reset */
.det-deck .deck__dot { padding: 0; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.det-deck .deck__arrow { cursor: pointer; }

/* fullscreen do player do detalhe (a formação usa .stage.is-full) */
.det-player.is-full { position: fixed; inset: 0; z-index: 150; border-radius: 0; aspect-ratio: auto; background: var(--color-surface-deepest); }
.det-player.is-full .player__poster { object-fit: contain; }

/* ============================================================
   ATRIBUIR, modal de atribuição (turma + quando + celebração)
   ============================================================ */
.modal__card--attribute { --modal-w: 540px; --modal-pad: 30px; }
/* `width: 100%` não é cosmético: o .modal__card alinha os filhos em flex-start,
   então o corpo ganhava a largura do próprio conteúdo. Com as turmas do
   professor ("28 alunos") isso nunca apareceu; com as do gestor ("Centro de
   Atividades Nunes Machado · Mariana Ferreira") o corpo passava a ser mais
   largo que o card e vazava para fora do modal. */
.attr__body { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.attr__body[hidden] { display: none; }
.attr__head { padding-right: 28px; }
.attr__kicker { display: inline-flex; margin-bottom: 14px; }
.attr__head h2 { font-family: var(--theme-font-family-heading); font-size: clamp(22px, 2.6vw, 27px); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0; }
.attr__sub { color: var(--color-surface-pure); font-size: 14.5px; line-height: 1.55; margin: 8px 0 0; }


.attr__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
/* `flex-wrap`: no mobile a dica ao lado do rótulo ("busque e selecione uma ou
   mais") espremia as duas em colunas estreitas em vez de descer uma linha. */
.attr__group legend { color: var(--color-surface-pure); padding: 0; margin-bottom: 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.attr__hint-inline { font-weight: 600; font-size: 11px; color: var(--color-surface-soft); text-transform: none; letter-spacing: 0; }

.attr__turmas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.turma-card { display: block; cursor: pointer; }
.turma-card input { position: absolute; opacity: 0; pointer-events: none; }
.turma-card__body {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--border-radius-sm-14); border: 1.5px solid var(--theme-panel-border); background: #fff;
  transition: border-color var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease);
}
.turma-card:hover .turma-card__body { border-color: var(--base-400); }
.turma-card input:focus-visible + .turma-card__body { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }
.turma-card input:checked + .turma-card__body { border-color: var(--color-accent-pure); background: var(--color-accent-tinted); }
.turma-card__avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--border-radius-sm); display: grid; place-items: center; background: var(--tile, var(--color-pastel-lavender)); color: var(--theme-text-secondary); font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 13px; }
.turma-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.turma-card__txt b { font-size: 14px; font-weight: 700; color: var(--theme-text-heading); }
.turma-card__txt small { font-size: 12px; color: var(--color-surface-pure); }
.turma-card__check { flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--border-radius-circle); padding: 3px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; background: transparent; opacity: 0; transform: scale(.6); transition: opacity var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.turma-card input:checked + .turma-card__body .turma-card__check { opacity: 1; transform: none; background: var(--color-accent-pure); }

.attr__when { display: flex; gap: 4px; padding: 4px; background: var(--theme-surface-muted); border-radius: var(--border-radius-pill); }
.when-card { flex: 1; cursor: pointer; }
.when-card input { position: absolute; opacity: 0; pointer-events: none; }
.when-card__body { display: block; text-align: center; padding: 9px 8px; border-radius: var(--border-radius-pill); font-weight: 700; font-size: 13px; color: var(--color-surface-pure); transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.when-card:hover .when-card__body { color: var(--theme-text-heading); }
.when-card input:focus-visible + .when-card__body { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }
.when-card input:checked + .when-card__body { background: #fff; color: var(--theme-text-heading); box-shadow: var(--theme-card-shadow); }

.attr__date { display: flex; flex-direction: column; gap: 6px; }
.attr__date[hidden] { display: none; }
.attr__date-label { font-size: 13px; font-weight: 700; color: var(--theme-text-muted); }
.attr__date input { font: inherit; font-size: 15px; font-weight: 600; color: var(--theme-text-heading); padding: 11px 14px; border-radius: var(--border-radius-sm); border: 1.5px solid var(--theme-border-subtle); background: #fff; }
.attr__date input:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 1px; border-color: var(--color-accent-pure); }
/* PRAZOS (11/09/2026): "Definir prazo" abre o par início+fim. Lado a lado
   enquanto couber, um sob o outro quando não — um intervalo se lê melhor
   inteiro do que partido em dois blocos distantes. */
.attr__prazo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.attr__prazo[hidden] { display: none; }

.attr__actions { display: flex; gap: 10px; margin-top: 4px; }
.attr__actions .attr__confirm { flex: 1; width: auto; }

/* ------------------------------------------------------------------
   COMBO MULTI (js/combo-multi.js) — dropdown com busca e seleção
   múltipla. Colapsa uma escolha em UMA linha: o campo diz o que já foi
   escolhido, e a lista só existe enquanto se está escolhendo.
   ------------------------------------------------------------------ */
.cmb { position: relative; min-width: 0; }
.cmb__campo {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px;
  padding: 11px 14px; font: inherit; font-size: 14px; font-weight: 600; text-align: left;
  color: var(--color-surface-soft); cursor: pointer;
  border: 1.5px solid var(--theme-border-subtle); border-radius: var(--border-radius-sm); background: #fff;
  transition: border-color var(--motion-dur-fast) var(--motion-ease);
}
.cmb__campo.is-cheio { color: var(--theme-text-heading); font-weight: 700; }
.cmb__campo:hover { border-color: var(--color-accent-soft); }
.cmb__campo:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 1px; border-color: var(--color-accent-pure); }
.cmb.is-aberto .cmb__campo { border-color: var(--color-accent-pure); }
.cmb__valor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmb__chev { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: var(--color-surface-soft); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-dur-fast) var(--motion-ease); }
.cmb.is-aberto .cmb__chev { transform: rotate(180deg); }

/* O painel flutua: sem isso ele empurraria o resto do modal para baixo, que é
   exatamente o problema que o dropdown existe para resolver. */
.cmb__pop {
  position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; right: 0;
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border: 1.5px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-14);
  background: #fff; box-shadow: var(--theme-modal-shadow);
}
.cmb__pop[hidden] { display: none; }
.cmb__busca { position: relative; display: flex; align-items: center; }
.cmb__busca-ic { position: absolute; left: 11px; width: 16px; height: 16px; fill: none; stroke: var(--color-surface-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cmb__busca input {
  width: 100%; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--theme-text-heading);
  padding: 9px 12px 9px 34px; border-radius: var(--border-radius-sm); border: 1.5px solid var(--theme-border-subtle); background: #fff;
}
.cmb__busca input:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 1px; border-color: var(--color-accent-pure); }

.cmb__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.cmb__op {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 44px;
  border-radius: var(--border-radius-sm); cursor: pointer;
  transition: background var(--motion-dur-fast) var(--motion-ease);
}
.cmb__op:hover, .cmb__op.is-ativo { background: var(--theme-surface-muted); }
.cmb__op.is-on { background: var(--color-accent-tinted); }
.cmb__op-box {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--border-radius-xs);
  border: 1.5px solid var(--theme-panel-border); background: #fff; display: grid; place-items: center;
}
.cmb__op-box svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.cmb__op.is-on .cmb__op-box { border-color: var(--color-accent-pure); background: var(--color-accent-pure); }
.cmb__op.is-on .cmb__op-box svg { opacity: 1; }
.cmb__op-av {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--border-radius-sm);
  display: grid; place-items: center; background: var(--tile, var(--theme-surface-muted));
  font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 12px; color: var(--theme-text-secondary);
}
.cmb__op-av svg { width: 16px; height: 16px; fill: none; stroke: var(--color-surface-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmb__op-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmb__op-txt b { font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading); }
.cmb__op-txt small { font-size: 11.5px; color: var(--color-surface-pure); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmb__vazio { font-size: 12.5px; line-height: 1.5; color: var(--color-surface-pure); margin: 0; padding: 4px 2px 6px; }
.cmb__resto { font-size: 11.5px; line-height: 1.45; color: var(--color-surface-soft); margin: 0; padding: 2px 2px 0; }
/* Recado fixo no pé do dropdown (opção `notaTxt`). Fica separado do resto por
   um filete porque não é resultado: é a saída para quem não achou o que
   procurava. Lê com peso de dica, nunca de item. */
.cmb__nota {
  margin: 8px 0 0;
  padding: 8px 2px 0;
  border-top: 1px solid var(--theme-border-subtle);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-surface-soft);
}

/* ------------------------------------------------------------------
   QUEM CONDUZ (js/atribuidores.js) — só aparece no fluxo do gestor.
   O professor não recebe campo desabilitado: recebe ausência de campo,
   porque ele já vem com o condutor sendo ele próprio.

   A gramática é a que o modal já tinha: card de opção com a mesma
   moldura do .turma-card e o mesmo check de canto. O que muda é a
   natureza — aqui é checkbox, porque regra e nome CONVIVEM (D4).
   ------------------------------------------------------------------ */
.atbd[hidden] { display: none; }
.atbd, .atbd > div { min-width: 0; }
.atbd > div { display: flex; flex-direction: column; gap: 12px; }

.atbd__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.atbd-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px;
  border-radius: var(--border-radius-sm-14); border: 1.5px solid var(--color-accent-soft); background: var(--color-accent-tinted);
}
.atbd-chip__av { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--border-radius-circle); display: grid; place-items: center; background: #fff; }
.atbd-chip__av svg { width: 16px; height: 16px; fill: none; stroke: var(--color-accent-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atbd-chip > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.atbd-chip b { font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading); }
.atbd-chip small { font-size: 11.5px; color: var(--color-surface-pure); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atbd-chip__x { flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: var(--border-radius-circle); background: transparent; cursor: pointer; display: grid; place-items: center; }
.atbd-chip__x svg { width: 15px; height: 15px; fill: none; stroke: var(--color-surface-pure); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atbd-chip__x:hover { background: #fff; }
.atbd-chip__x:hover svg { stroke: var(--color-surface-dark); }

.atbd-busca { display: flex; flex-direction: column; gap: 8px; }
.atbd-busca__campo { position: relative; display: flex; align-items: center; }
.atbd-busca__ic { position: absolute; left: 13px; width: 17px; height: 17px; fill: none; stroke: var(--color-surface-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.atbd-busca__campo input {
  width: 100%; font: inherit; font-size: 14px; font-weight: 600; color: var(--theme-text-heading);
  padding: 11px 14px 11px 38px; border-radius: var(--border-radius-sm); border: 1.5px solid var(--theme-border-subtle); background: #fff;
}
.atbd-busca__campo input:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 1px; border-color: var(--color-accent-pure); }
.atbd-busca__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 216px; overflow-y: auto; }
.atbd-op {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 44px;
  border: 0; border-radius: var(--border-radius-sm); background: transparent; cursor: pointer; font: inherit; text-align: left;
  transition: background var(--motion-dur-fast) var(--motion-ease);
}
.atbd-op:hover, .atbd-op:focus-visible { background: var(--theme-surface-muted); }
.atbd-op__av { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--border-radius-circle); display: grid; place-items: center; background: var(--color-pastel-lavender); }
.atbd-op__av svg { width: 16px; height: 16px; fill: none; stroke: var(--color-surface-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atbd-op__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.atbd-op__txt b { font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading); }
.atbd-op__txt small { font-size: 11.5px; color: var(--color-surface-pure); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atbd-op__add { flex-shrink: 0; }
.atbd-op__add svg { width: 17px; height: 17px; fill: none; stroke: var(--color-surface-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atbd-op:hover .atbd-op__add svg { stroke: var(--color-accent-pure); }
.atbd-busca__vazio { font-size: 12.5px; line-height: 1.5; color: var(--color-surface-pure); margin: 0; padding: 2px 2px 4px; }
.atbd-busca__resto { font-size: 11.5px; line-height: 1.45; color: var(--color-surface-soft); margin: 0; padding: 2px 2px 0; }

/* Regra e pessoa são a MESMA linha de resultado — mudam de avatar, não de
   forma: a diferença entre "o professor de cada turma" e "Ana Prado" é o grau
   de precisão da resposta, não a natureza do controle. */
.atbd-op--regra .atbd-op__av { background: var(--color-accent-tinted); }
.atbd-op--regra .atbd-op__av svg { stroke: var(--color-accent-dark); }
.atbd-chip--regra .atbd-chip__av svg { stroke: var(--color-accent-dark); }

.atbd__resolve { font-size: 12.5px; line-height: 1.5; font-weight: 700; color: var(--color-accent-dark); margin: 0; }
.atbd__resolve.is-vazio { font-weight: 600; color: var(--color-surface-soft); }


@media (max-width: 600px) {
  .attr__head { flex-direction: column; gap: 12px; }
  .attr__turmas { grid-template-columns: 1fr; }
  .atbd-busca__lista { max-height: 200px; }
}

/* ================================================================
   ATRIBUIR TRILHA, modal "configurar" (settings-style, 3 painéis)
   ================================================================ */
.modal__card--assign { --modal-w: 1000px; --modal-pad: 0; gap: 0; }
.modal__card--assign .modal__close { top: 18px; right: 18px; z-index: 3; }

.assign__body { display: flex; flex-direction: column; }
.assign__body[hidden] { display: none; }

/* Cabeçalho com ícone + divisória */
.assign__head { display: flex; gap: 16px; align-items: flex-start; padding: clamp(22px,3vw,30px) clamp(22px,4vw,40px); border-bottom: 1px solid var(--theme-panel-border); }
.assign__head-ic { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--border-radius-sm-14); display: grid; place-items: center; background: var(--color-accent-tinted); color: var(--color-accent-dark); }
.assign__head-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assign__head-txt { flex: 1; min-width: 0; }
.assign__kicker { display: inline-flex; margin-bottom: 8px; }
.assign__head h2 { font-family: var(--theme-font-family-heading); font-size: clamp(21px,2.6vw,28px); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0; }
.assign__sub { color: var(--color-surface-pure); font-size: 14px; line-height: 1.5; margin: 6px 0 0; }

/* Linha de 3 painéis */
.assign__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.6vw,20px); padding: clamp(20px,3vw,28px) clamp(22px,4vw,40px); }
.assign__panel { border: 1.5px solid var(--theme-panel-border); border-radius: var(--border-radius-md); padding: 18px 18px 16px; margin: 0; min-width: 0; display: flex; flex-direction: column; }
.assign__panel-label { padding: 0; margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-surface-pure); }
.assign__panel-hint { margin: 0 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--color-surface-soft); }

.assign__turmas { display: flex; flex-direction: column; gap: 8px; }
.assign__aulas { display: flex; flex-direction: column; gap: 5px; }
.assign__when { display: flex; flex-direction: column; gap: 5px; }
.assign__date { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.assign__date[hidden] { display: none; }
.assign__date-label { font-size: 12.5px; font-weight: 700; color: var(--theme-text-muted); }
.assign__date input { font: inherit; font-size: 14.5px; font-weight: 600; color: var(--theme-text-heading); padding: 10px 12px; border-radius: var(--border-radius-sm); border: 1.5px solid var(--theme-border-subtle); background: #fff; }
.assign__date input:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 1px; border-color: var(--color-accent-pure); }
/* O par início+fim do modal da trilha — mesma regra do .attr__prazo, na
   coluna mais estreita do stage, onde ele empilha mais cedo. */
.assign__prazo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; max-width: 420px; }
.assign__prazo[hidden] { display: none; }
.assign__prazo .assign__date { margin-top: 0; }

/* pick-row, linha genérica de checkbox/radio (aulas + quando) */
.pick-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--border-radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease); }
.pick-row:hover { background: var(--base-50); }
.pick-row input { position: absolute; opacity: 0; pointer-events: none; }
.pick-row__box { flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--border-radius-quark); border: 2px solid var(--base-400); background: #fff; display: grid; place-items: center; transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.pick-row--radio .pick-row__box { border-radius: var(--border-radius-circle); }
.pick-row__tick { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.pick-row input:checked + .pick-row__box { background: var(--color-accent-pure); border-color: var(--color-accent-pure); }
.pick-row input:checked + .pick-row__box .pick-row__tick { opacity: 1; transform: none; }
.pick-row--radio input:checked + .pick-row__box { background: #fff; border-color: var(--color-accent-pure); box-shadow: inset 0 0 0 5px var(--color-accent-pure); }
.pick-row input:focus-visible + .pick-row__box { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }
.pick-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pick-row__txt b { font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading); }
.pick-row__txt small { font-size: 11.5px; color: var(--color-surface-pure); margin-top: 1px; }
.pick-row__tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--color-surface-pure); background: var(--theme-surface-muted); border-radius: var(--border-radius-pill); padding: 3px 9px 3px 7px; }
.pick-row__tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pick-row--locked { cursor: default; }
.pick-row--locked:hover { background: transparent; }
.pick-row--locked input:checked + .pick-row__box { background: var(--color-accent-pale); border-color: var(--color-accent-pale); }
.pick-row--locked input:checked + .pick-row__box .pick-row__tick { stroke: var(--color-accent-dark); }

/* Lista de escolha do Modo Offline (#offline-lista): reaproveita o próprio
   .atr-card (js/painel.js, cardHTML com o.escolha) em vez de uma linha
   genérica — é o mesmo cartão que a pessoa já reconhece da tela de
   Atribuições, só que clicável como opção em vez de ter rodapé de ações. */
.offline-pick { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 12px; width: 100%; max-height: 56vh; overflow-y: auto; }
.modal__card--offline-escolha { --modal-w: 640px; }

.atr-card--escolha { cursor: pointer; }
.atr-card--escolha:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 3px; border-radius: var(--theme-card-radius); }
/* Hover fica só na elevação padrão do card (a mesma de qualquer lugar da
   lista) — de propósito SEM roxo: era o que confundia com "selecionado" ao
   passar o mouse pelos outros cards. Quem diz "é este" é só o estado abaixo. */
/* Selecionada: anel grosso + fundo levemente tingido, pra não depender de um
   traço de 1px pra dizer qual é — precisa ler de relance. #offline-lista na
   frente (não só a classe) porque .atr-card:hover genérico, mais abaixo no
   arquivo, tem a MESMA especificidade da borda-padrão e venceria por ordem. */
#offline-lista .atr-card--escolha.is-selected .atr-card__panel {
  border-color: var(--color-primary-pure);
  background: var(--color-primary-tinted);
  box-shadow: inset 0 0 0 2px var(--color-primary-pure), 0 0 0 4px var(--color-primary-pale);
}

/* Lista real de Atribuições com o Modo Offline ligado: todas continuam
   aparecendo, mas só a escolhida na modal tem ação — as demais ficam com o
   rodapé de botões inerte (mesmo tratamento visual de Registro/Gerenciar
   logo abaixo; o bloqueio de fato é o guard em onAtrCardClick, js/painel.js).
   Sem pointer-events:none, mesma razão de sempre: preserva o clique vindo do
   teclado, que o guard então recusa. */
.is-modo-offline .atr-card--offline-bloqueada .atr-card__actions,
.is-modo-offline .atr-card--offline-bloqueada .atr-act { opacity: var(--opacity-intense); cursor: not-allowed; }
.is-modo-offline .atr-card--offline-bloqueada .atr-act:hover { box-shadow: none; transform: none; }
.is-modo-offline .atr-card--offline-bloqueada .atr-act:not(.atr-act--primary):hover { border-color: var(--theme-border-subtle); background: #fff; }
.is-modo-offline .atr-card--offline-bloqueada .atr-act--primary:hover { background: var(--theme-text-heading); border-color: var(--theme-text-heading); }

/* Rodapé tintado: status + ações */
.assign__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 15px clamp(22px,4vw,40px); border-top: 1px solid var(--theme-panel-border); background: var(--color-accent-tinted); }
.assign__status { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--theme-text-muted); }
.assign__status-ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assign__status-ic--wait { stroke: var(--color-surface-soft); }
.assign__status-ic--ok { stroke: var(--color-accent-dark); display: none; }
.assign__status.is-ready { color: var(--theme-text-heading); }
.assign__status.is-ready .assign__status-ic--wait { display: none; }
.assign__status.is-ready .assign__status-ic--ok { display: block; }
.assign__foot-actions { display: flex; gap: 10px; flex-shrink: 0; }
.assign__confirm { width: auto; }
.assign__confirm:disabled { opacity: .42; cursor: default; box-shadow: none; transform: none; }
.assign__confirm:disabled:hover { transform: none; box-shadow: none; }

.modal__card--assign .attr__loading { padding: clamp(26px,5vw,48px); }

@media (max-width: 860px) {
  .assign__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .assign__head { padding: 20px; }
  .assign__foot { flex-direction: column; align-items: stretch; }
  .assign__foot-actions { width: 100%; }
  .assign__foot-actions .btn { flex: 1; justify-content: center; }
}

/* ================================================================
   Bússola de Equilíbrio ASET, faixa de balanceamento no modal Atribuir trilha.
   Mostra a distribuição da seleção de aulas pelas 9 ASETs e sugere (sem travar)
   dimensões ainda não cobertas. Cor: accent indigo = coberto, surface = vazio,
   warning do DS só p/ estado de alerta (nunca cor por categoria).
   ================================================================ */
.aset-bal { display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); padding: clamp(16px, 2.4vw, 22px) clamp(22px, 4vw, 40px); border-top: 1px solid var(--theme-panel-border); background: var(--theme-surface-muted); }
.aset-bal__wheel { position: relative; width: 120px; height: 120px; flex-shrink: 0; display: grid; place-items: center; }
.aset-bal__svg { width: 100%; height: 100%; overflow: visible; }
.aset-bal__guide { stroke: var(--color-surface-mist); stroke-width: 1; }
.aset-bal__core { fill: var(--color-accent-tinted); stroke: var(--color-accent-pure); stroke-width: 1.5; }
.aset-bal__count { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--theme-font-family-heading); color: var(--theme-text-heading); pointer-events: none; }
.aset-bal__count b { font-size: 20px; font-weight: 800; line-height: 1; }
.aset-bal__count i { font-size: 11px; font-style: normal; color: var(--color-surface-soft); }
.aset-ray { stroke: var(--color-surface-mist); stroke-width: 6; stroke-linecap: round; transition: stroke var(--motion-dur-base) var(--motion-ease); }
.aset-ray[data-lvl="1"] { stroke: var(--color-accent-soft); }
.aset-ray[data-lvl="2"] { stroke: var(--color-accent-pure); }
.aset-ray[data-lvl="3"] { stroke: var(--color-accent-dark); }
.aset-bal__read { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.aset-bal__read .assign__panel-label { margin: 0; }
.aset-bal__lead { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--theme-font-family-heading); font-size: 14px; font-weight: 700; color: var(--theme-text-heading); }
.aset-bal__lead-ic { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--color-accent-dark); stroke-width: 1.9; }
.aset-bal__lead.is-warn .aset-bal__lead-ic { stroke: var(--color-warning-dark); }
.aset-bal__lead.is-warn b { color: var(--color-warning-dark); }
.aset-bal__gaps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aset-bal__more { font-size: 12px; font-weight: 700; color: var(--color-surface-pure); }
.aset-bal__done { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 600; color: var(--color-success-dark); }
.aset-bal__done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chip--gap { background: var(--color-accent-tinted); color: var(--color-accent-darker); border: 1.5px dashed var(--color-accent-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px 6px 7px; font-size: 12px; font-weight: 700; border-radius: var(--border-radius-pill); transition: border-color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.chip--gap:hover { border-style: solid; transform: translateY(-1px); }
.chip--gap:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }
.chip--gap .chip__num { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--border-radius-circle); background: var(--color-accent-pure); color: #fff; font-size: 11px; font-weight: 800; }
.chip--gap .chip__plus { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: var(--color-accent-darker); stroke-width: 2; stroke-linecap: round; }
@keyframes asetGapPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-pure) 13%, transparent); } }
.chip--gap { animation: asetGapPulse 2.4s var(--motion-ease) infinite; }
.chip--gap:nth-child(2) { animation-delay: .12s; }
.chip--gap:nth-child(3) { animation-delay: .24s; }
@media (max-width: 600px) {
  .aset-bal { flex-direction: column; align-items: stretch; text-align: center; }
  .aset-bal__wheel { margin: 0 auto; }
  .aset-bal__read { align-items: center; }
  .aset-bal__gaps { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .chip--gap { animation: none; border-style: solid; border-color: var(--color-accent-pure); }
  .aset-ray { transition: none; }
  #asg-bal-blob, .aset-node__dot, .aset-node__lbl { transition: none; }
}

/* ================================================================
   MODAL ATRIBUIR TRILHA, quase-fullscreen + radar líquido das ASETs
   Escopado em .modal__card--assign--full (só Infantil/Anos Iniciais).
   Cor: só var()/color-mix; #fff e #000 já estão na baseline do lint.
   ================================================================ */
.modal__card--assign--full { --modal-w: 1320px; --modal-pad: 0; gap: 0; }
.modal__card--assign--full .assign__body { display: flex; flex-direction: column; }
.modal__card--assign--full .modal__close { top: 20px; right: 20px; z-index: 4; }
.modal__card--assign--full .assign__head h2 { font-size: clamp(24px, 2.4vw, 30px); }

/* STAGE, a linha das 4 zonas */
.assign__stage { display: grid; grid-template-columns: minmax(200px,0.8fr) minmax(220px,0.9fr) minmax(400px,1.75fr) minmax(200px,0.75fr); align-items: start; gap: clamp(20px,2.2vw,36px); padding: clamp(24px,3vw,40px) clamp(26px,4vw,48px); }
.assign__stage .assign__panel { border: none; border-radius: 0; padding: 0; background: transparent; min-width: 0; }
.assign__stage > * + * { border-left: 1px solid var(--theme-panel-border); padding-left: clamp(20px,2.2vw,36px); }
.assign__stage .assign__panel-label, .assign__graph .assign__panel-label { margin: 0 0 4px; }
/* ZONA 4, datas: um painel só desde 11/09/2026 (Prazos). Abaixo de 1180px a
   coluna vira faixa horizontal, e sem um segundo painel para dividir a linha
   o par de datas esticaria pela largura inteira do modal — daí o teto em
   .assign__prazo. */
.assign__dates { grid-column: 4; display: flex; flex-direction: column; gap: clamp(20px,2.4vw,32px); min-width: 0; }

/* ZONA 3, gráfico */
.assign__graph { grid-column: 3; display: flex; flex-direction: column; align-items: center; gap: clamp(10px,1.3vw,18px); min-width: 0; }
.assign__graph-ring { position: relative; width: 100%; max-width: 322px; aspect-ratio: 1 / 1; margin: 2px auto 0; display: grid; place-items: center; contain: layout; }
.assign__graph-ring .aset-bal__svg { width: 100%; height: 100%; overflow: visible; }

/* gradiente do blob (frio→quente) via tokens */
.aset-grad-a { stop-color: var(--color-pastel-aqua); }
.aset-grad-b { stop-color: color-mix(in srgb, var(--color-pastel-butter) 70%, #fff); }
.aset-grad-c { stop-color: var(--color-pastel-peach); }
.aset-bal__blob { filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--color-accent-pure) 12%, transparent)); }
.aset-bal__core { transform-box: fill-box; transform-origin: center; }

/* contador central sobre o blob */
.assign__graph .aset-bal__count { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--theme-font-family-heading); color: var(--theme-text-heading); pointer-events: none; text-shadow: 0 1px 0 color-mix(in srgb, #fff 70%, transparent); }
.assign__graph .aset-bal__count b { font-size: clamp(28px,3.4vw,40px); font-weight: 800; line-height: 1; }
.assign__graph .aset-bal__count i { font-size: 13px; font-style: normal; color: var(--color-surface-pure); }

/* nós no anel (SVG, dentro do <g> gooey p/ fundir com o blob) */
.aset-node__dot { fill: var(--color-surface-mist); stroke: var(--color-surface-pale); stroke-width: .6; transition: fill var(--motion-dur-base) var(--motion-ease); transform-box: fill-box; transform-origin: center; }
.aset-node__dot[data-lvl="1"] { fill: var(--color-accent-soft); stroke: var(--color-accent-soft); }
.aset-node__dot[data-lvl="2"] { fill: var(--color-accent-pure); stroke: var(--color-accent-pure); }
.aset-node__dot[data-lvl="3"] { fill: var(--color-accent-dark); stroke: var(--color-accent-dark); }

/* rótulos radiais (HTML absoluto, fora do SVG → texto nítido) */
.aset-node__lbl { position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 96px; font-family: var(--theme-font-family-base); font-size: 11px; line-height: 1.18; font-weight: 700; color: var(--theme-text-muted); letter-spacing: .005em; pointer-events: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--motion-dur-base) var(--motion-ease); }
.aset-node__lbl[data-side="l"] { text-align: left; }
.aset-node__lbl[data-side="r"] { text-align: right; }
.aset-node__lbl[data-side="c"] { text-align: center; max-width: 150px; }
.aset-node__lbl b { font-weight: 800; color: var(--color-surface-soft); margin-right: 3px; }
.aset-node__lbl.is-covered { color: var(--color-accent-darker); font-weight: 800; }
.aset-node__lbl.is-covered b { color: var(--color-accent-pure); }

/* faixa de equilíbrio, agora centralizada abaixo do círculo */
.assign__graph .aset-bal { width: 100%; padding: 0; border-top: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.assign__graph .aset-bal__read { width: 100%; align-items: center; gap: 10px; }
.assign__graph .aset-bal__lead { justify-content: center; }
.assign__graph .aset-bal__gaps { justify-content: center; }

/* responsivo: 4 → 3 → 2 → 1 */
@media (max-width: 1180px) {
  .assign__stage { grid-template-columns: minmax(200px,.9fr) minmax(220px,.95fr) minmax(360px,1.5fr); }
  .assign__stage .assign__dates { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--theme-panel-border); padding-top: clamp(18px,2vw,28px); flex-direction: row; gap: clamp(20px,3vw,44px); }
  .assign__stage .assign__dates > .assign__panel { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 880px) {
  .assign__stage { grid-template-columns: 1fr 1fr; }
  .assign__graph { grid-column: 1 / -1; order: -1; border-left: 0; padding-left: 0; }
  .assign__stage > * + * { border-left: 0; padding-left: 0; }
  .assign__stage .assign__panel--aulas { border-left: 1px solid var(--theme-panel-border); padding-left: clamp(18px,2vw,28px); }
}
@media (max-width: 600px) {
  .modal__card--assign--full { --modal-w: 100vw; border-radius: 0; }
  .assign__stage { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .assign__stage > * + * { border-left: 0; padding-left: 0; }
  .assign__stage .assign__panel--aulas { border-left: 0; padding-left: 0; }
  .assign__stage .assign__dates { flex-direction: column; gap: 22px; }
  .assign__graph-ring { max-width: 222px; }
  .aset-node__lbl { max-width: 80px; font-size: 10px; -webkit-line-clamp: 3; }
}
@media (max-height: 720px) {
  .modal__card--assign--full { border-radius: var(--border-radius-md); }
}
@media (prefers-reduced-motion: reduce) {
  .aset-bal__blob, .aset-node__dot, .aset-node__lbl { transition: none; }
}

/* Nota de atribuição customizada no detalhe da trilha */
.det-assign-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--border-radius-sm); background: var(--color-accent-tinted); border: 1px solid var(--color-accent-pale); }
.det-assign-note__ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--border-radius-nano); display: grid; place-items: center; background: #fff; color: var(--color-accent-dark); }
.det-assign-note__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.det-assign-note p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--theme-text-heading); }

/* ================================================================
   Banner de atribuições ativas (estado "atribuída"), acima do cabeçalho
   do detalhe. Panorama à esquerda + turmas clicáveis para participar.
   ================================================================ */
/* padding inferior + os 8px de padding-top do .detalhe-head = respiro até o "Voltar" */
.det-active { max-width: 1280px; margin: 0 auto; padding: 8px 4px 24px; }
.det-active[hidden] { display: none; }
.det-active__inner {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--color-pastel-aqua); border-radius: var(--theme-card-radius);
  padding: 16px 20px;
}
.det-active__lead { display: flex; align-items: center; gap: 13px; flex: 1 1 230px; min-width: 0; }
.det-active__ic {
  flex: none; width: 46px; height: 46px; border-radius: var(--border-radius-sm-14);
  background: #fff; color: var(--color-accent-dark); display: grid; place-items: center;
  box-shadow: var(--theme-card-shadow);
}
.det-active__ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.det-active__lead-txt { min-width: 0; }
.det-active__kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-darker); }
.det-active__lead-txt b { display: block; font-family: var(--theme-font-family-heading); font-size: 17px; font-weight: 800; color: var(--theme-text-heading); letter-spacing: -.01em; line-height: 1.2; margin-top: 1px; }

/* Trilho de turmas: setas nas pontas andam 5 por clique e a barra de rolagem
   fica oculta — o toque/trackpad continua funcionando. */
.det-active__track { flex: 2 1 460px; min-width: 0; display: flex; align-items: center; gap: 6px; }
.det-active__list {
  flex: 1; min-width: 0;
  display: flex; gap: 8px; margin: -4px 0; padding: 4px 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.det-active__list::-webkit-scrollbar { display: none; }
/* a largura acompanha o rótulo: serve tanto para "8º B" quanto para "Matutino 4A" */
.det-active__list > li { flex: 0 0 auto; scroll-snap-align: start; }
/* O espaço do ícone de participar fica reservado desde sempre: se ele empurrasse
   o chip no hover, os vizinhos do trilho dançariam a cada passagem do mouse. */
.det-active__turma {
  position: relative; display: block; max-width: 220px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--theme-text-heading); line-height: 1.2;
  background: #fff; border: 1px solid transparent; border-radius: var(--border-radius-pill);
  padding: 9px 32px 9px 15px; box-shadow: var(--theme-card-shadow);
  transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease);
}
.det-active__nome { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.det-active__join {
  position: absolute; right: 11px; top: 50%; translate: 0 -50%;
  width: 15px; height: 15px; color: var(--color-accent-dark);
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity var(--motion-dur-fast) var(--motion-ease);
}
.det-active__turma:hover { transform: translateY(-1px); box-shadow: var(--theme-panel-shadow); border-color: var(--color-accent-soft); }
.det-active__turma:hover .det-active__join,
.det-active__turma:focus-visible .det-active__join { opacity: 1; }
.det-active__turma:focus-visible { outline: none; border-color: var(--color-accent-pure); box-shadow: 0 0 0 3px var(--color-accent-pale), var(--lkt-shadow-level1); }
@media (prefers-reduced-motion: reduce) { .det-active__join { transition: none; } }

.det-active__nav {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; cursor: pointer;
  border-radius: var(--border-radius-circle); background: #fff; color: var(--theme-text-muted);
  box-shadow: var(--theme-card-shadow); transition: color var(--motion-dur-fast) var(--motion-ease), opacity var(--motion-dur-fast) var(--motion-ease);
}
.det-active__nav:hover:not(:disabled) { color: var(--color-accent-dark); }
.det-active__nav:disabled { opacity: .35; cursor: default; }
.det-active__nav[hidden] { display: none; }
.det-active__nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@keyframes detActiveIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.det-active:not([hidden]) .det-active__inner { animation: detActiveIn var(--motion-dur-fast) var(--motion-ease) both; }

@media (max-width: 768px) {
  .det-active { padding: 4px 0 24px; }
  .det-active__inner { padding: 15px 16px; gap: 14px; }
  /* No mobile o trilho rola por toque; as setas saem para não roubar largura */
  .det-active__track { flex-basis: 100%; }
  .det-active__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .det-active:not([hidden]) .det-active__inner { animation: none; }
  .det-active__turma { transition: none; }
}

/* ================================================================
   Modal "Participar da atribuição": contexto completo antes da decisão.
   Aberto por uma turma do banner acima. Aulas são leitura, não ação.
   ================================================================ */
/* --part-pad espelha o padding do .modal__card: o rodapé usa margem negativa
   para sangrar até a borda ao ficar fixo. */
.modal__card--part { --part-pad: clamp(24px, 4vw, 36px); --modal-w: 680px; gap: 20px; }
/* CONFIRMAR ATRIBUIÇÃO INDIVIDUAL EM LOTE. Estreito de propósito: a pergunta é
   curta e a lista de nomes é o corpo dela — um card largo faria a lista
   parecer um formulário a preencher, e o que se pede aqui é só um sim. */
.modal__card--lote { --modal-w: 520px; gap: 18px; padding: clamp(24px, 4vw, 32px); }
.alote__head { align-self: stretch; display: flex; gap: 14px; align-items: flex-start; }
.alote__ic {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--border-radius-md); background: var(--color-pastel-butter);
}
.alote__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--theme-text-heading); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alote__head h2 { margin-top: 6px; font-size: 20px; line-height: 1.25; }
.alote__sub { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--theme-text-muted); }
.alote__lista { align-self: stretch; display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.alote__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--border-radius-sm); font-size: 14px; }
.alote__item:nth-child(odd) { background: var(--theme-surface-muted); }
.alote__av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--border-radius-pill); background: var(--tile, var(--color-pastel-aqua)); }
.alote__turma { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--theme-text-muted); }
.alote__foot { align-self: stretch; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (max-width: 620px) {
  .alote__foot { flex-direction: column-reverse; }
  .alote__foot .btn { justify-content: center; }
}
.part__head { display: flex; flex-direction: column; gap: 6px; padding-right: 44px; }
.part__kicker { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.part__type { padding: 3px 10px; font-size: 12px; }
.part__count { font-size: 12.5px; font-weight: 700; color: var(--color-surface-pure); }
.part__sub { font-size: 13px; color: var(--color-surface-pure); }

/* faixa de contexto: atribuidor, executores, turma, prazo */
.part__ctx { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 20px;
  width: 100%; margin: 0; padding: 16px 18px;
  border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-14); background: var(--base-50); }
.part-ctx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.part-ctx__lbl { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-surface-pure); }
.part-ctx__val { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; min-width: 0;
  font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading); }
.part-ctx__val b { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-ctx__sub { flex-basis: 100%; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--color-surface-pure);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-av { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px;
  border-radius: var(--border-radius-circle); font-size: 11px; font-weight: 800; color: var(--theme-text-heading);
  box-shadow: 0 0 0 2px #fff, var(--lkt-shadow-level1); }
.part-av-stack { display: inline-flex; align-items: center; flex-shrink: 0; }
/* -4px mantém a leitura de pilha sem cobrir a 2ª inicial do avatar anterior
   (26px de avatar, ~15px de texto centralizado: acima disso o corte aparece) */
.part-av-stack .part-av + .part-av { margin-left: -4px; }
.part-av--more { background: var(--theme-surface-muted); color: var(--theme-text-muted); font-size: 10px; }

/* disclosure dos executores: a lista completa é o detalhe, não o resumo */
.part-vertodos { font-size: 11.5px; font-weight: 700; color: var(--color-accent-dark);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.part-vertodos:hover { color: var(--color-accent-darker); }
.part-membros { grid-column: 1 / -1; list-style: none; margin: 0; padding: 12px 0 0;
  border-top: 1px solid var(--theme-panel-border);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 16px;
  max-height: 168px; overflow-y: auto; }
.part-membros[hidden] { display: none; }
.part-membros li { font-size: 12.5px; color: var(--theme-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-dot { width: 10px; height: 10px; border-radius: var(--border-radius-circle); flex-shrink: 0;
  box-shadow: 0 0 0 1.5px #fff; }

/* aulas com status — só aparecem quando a atribuição tem mais de uma */
.part__aulas { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.part__aulas[hidden] { display: none; }
.part__aulas-h { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-surface-pure); }
.part__aulalist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.part-aula { display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm); background: #fff; }
.part-aula__n { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px;
  border-radius: var(--border-radius-circle); background: var(--theme-surface-muted); color: var(--theme-text-muted);
  font-size: 11px; font-weight: 800; }
.part-aula__nome { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-aula__status { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 700; color: var(--color-surface-pure); }
.part-aula__status svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.part-aula.is-done { border-color: var(--color-success-pale); background: var(--color-success-tinted); }
.part-aula.is-done .part-aula__n { background: #fff; color: var(--color-success-darker); }
.part-aula.is-done .part-aula__status { color: var(--color-success-darker); }

/* Rodapé: aviso do que vai acontecer + ações. No fluxo (DS:Modal — nada fixo):
   quem rola é a sobreposição inteira, então a ação principal é alcançada rolando. */
.part__foot {
  align-self: stretch; width: auto;
  margin: 0 calc(-1 * var(--part-pad)) calc(-1 * var(--part-pad));
  padding: 14px var(--part-pad) var(--part-pad);
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid var(--theme-panel-border);
}
.part__hint { margin: 0; padding: 12px 14px; border-radius: var(--border-radius-sm);
  background: var(--color-accent-tinted); color: var(--theme-text-heading); font-size: 13px; line-height: 1.5; }
.part__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.part__acts .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 560px) {
  .part__ctx { grid-template-columns: 1fr; }
  .part__acts { justify-content: stretch; }
  .part__acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* ================================================================
   MODO AULA, CTA de 3 estados (Atribuir / Participar / Modo Aula)
   ================================================================ */
.det-state[hidden] { display: none !important; }

/* Estado 2, Atribuir nova (participar acontece pelo banner de atribuições ativas) */
#det-atribuir-nova { min-height: 44px; padding: 8px 16px; border-radius: var(--border-radius-pill); }
.det-state svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Estado 3, chip da turma + Iniciar Modo Aula (ação de maior destaque) */
.det-turma-chip { gap: 6px; align-self: center; }
.det-turma-chip b { font-weight: 800; }
.btn--modo-aula {
  /* O respiro à direita acompanha o da esquerda: com 6px o chip da turma
     encostava na borda e o botão parecia cortado. */
  min-height: 44px; padding: 6px 18px 6px 18px; color: #fff; border: 0; gap: 9px;
  border-radius: var(--border-radius-pill); font-weight: 800;
  background: linear-gradient(120deg, var(--color-accent-pure), var(--color-primary-pure));
  box-shadow: var(--theme-shadow-lg);
}
.btn--modo-aula:hover { transform: translateY(-2px); box-shadow: var(--theme-modal-shadow); }
.btn--modo-aula:active { transform: translateY(0); }
.btn--modo-aula svg { fill: currentColor; stroke: none; }
/* turma como extensão do próprio CTA, deixa claro com qual turma o Modo Aula abre */
.btn--modo-aula__turma {
  display: inline-flex; align-items: center; padding: 6px 13px; line-height: 1;
  border-radius: var(--border-radius-pill); background: rgba(255,255,255,.22);
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
.btn--modo-aula__dot {
  width: 8px; height: 8px; border-radius: var(--border-radius-circle); background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.55);
  animation: maPulse 1.9s var(--motion-ease) infinite;
}
@keyframes maPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .btn--modo-aula__dot { animation: none; } }


/* ================================================================
   MODO AULA, tela de início (QR) + projeção desktop
   ================================================================ */

/* ---------- Tela de início ---------- */
.ma-start { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 24px; }
.ma-start[hidden] { display: none; }
.ma-start__backdrop { position: absolute; inset: 0; background: rgba(15,1,26,.55); backdrop-filter: blur(6px); }
.ma-start__panel {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 1fr;
  width: min(780px, 100%); background: #fff; border-radius: var(--border-radius-lg);
  box-shadow: var(--theme-modal-shadow); overflow: hidden;
}
.ma-start__close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: var(--border-radius-circle);
  background: var(--theme-surface-muted); color: var(--theme-text-muted); transition: transform var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease);
}
.ma-start__close:hover { background: var(--color-surface-mist); transform: rotate(90deg); }
.ma-start__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ma-start__left { padding: 36px 32px; }
.ma-start__badge { margin-bottom: 14px; }
.ma-start__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -.01em; color: var(--theme-text-heading); }
.ma-start__sub { margin-top: 8px; color: var(--theme-text-muted); font-size: 15px; line-height: 1.5; font-weight: 600; }
.ma-start__meta { display: grid; gap: 8px; margin: 18px 0 24px; }
.ma-start__meta li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--theme-text-muted); }
.ma-start__meta svg { width: 18px; height: 18px; fill: none; stroke: var(--color-accent-pure); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ma-start__go { width: 100%; justify-content: center; }
.ma-start__hint { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--color-surface-pure); font-weight: 600; }
.ma-start__hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ma-start__right {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 28px;
  background: var(--grain), linear-gradient(160deg, var(--color-primary-tinted), var(--color-accent-tinted));
  border-left: 1px solid var(--theme-panel-border);
}
.ma-qr { width: 188px; height: 188px; padding: 14px; background: #fff; border-radius: var(--border-radius-md); box-shadow: var(--theme-panel-shadow); color: var(--theme-text-heading); }
.ma-qr svg { width: 100%; height: 100%; display: block; }
.ma-qr__label { text-align: center; font-size: 13.5px; color: var(--theme-text-muted); line-height: 1.45; font-weight: 600; }
.ma-qr__label b { color: var(--theme-text-heading); font-weight: 800; }
.ma-qr__open {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--color-accent-dark);
  padding: 9px 14px; border-radius: var(--border-radius-pill); background: #fff; box-shadow: var(--theme-card-shadow);
  transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease);
}
.ma-qr__open:hover { transform: translateY(-1px); box-shadow: var(--theme-panel-shadow); }
.ma-qr__open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ma-qr__demo { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--border-radius-pill); background: var(--color-pastel-mint); color: var(--theme-text-heading); }

@media (max-width: 680px) {
  .ma-start__panel { grid-template-columns: 1fr; }
  .ma-start__right { border-left: 0; border-top: 1px solid var(--theme-panel-border); }
}

/* ---------- Projeção (face lúdica para a turma) ---------- */
.ma-stage {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  padding: 0 clamp(20px, 4vw, 56px);
  background: var(--grain), radial-gradient(125% 120% at 82% -10%, var(--color-primary-tinted) 0%, #fff 52%, var(--color-accent-tinted) 100%);
  overflow: hidden;
}
.ma-stage[hidden] { display: none; }
.ma-stage__progress { display: flex; gap: 6px; padding-top: 16px; }
.ma-stage__progress i {
  flex: 1; height: 5px; border-radius: var(--border-radius-pill); background: var(--color-primary-pale);
  transition: background var(--motion-dur-fast) var(--motion-ease);
}
.ma-stage__progress i.is-done { background: var(--color-pastel-lavender-deep); }
.ma-stage__progress i.is-active { background: var(--color-warning-soft); }

.ma-stage__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 6px; }
.ma-stage__topl { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ma-stage__kicker { background: var(--color-warning-soft); color: #fff; font-weight: 800; letter-spacing: .04em; }
.ma-stage__lesson { font-weight: 700; color: var(--theme-text-muted); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-stage__topr { display: flex; align-items: center; gap: 10px; flex: none; }
.ma-stage__connect, .ma-stage__exit {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
  padding: 9px 16px; border-radius: var(--border-radius-pill); background: #fff; color: var(--theme-text-heading);
  box-shadow: var(--theme-card-shadow); border: 1.5px solid var(--theme-panel-border);
  transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease);
}
.ma-stage__connect:hover, .ma-stage__exit:hover { transform: translateY(-1px); box-shadow: var(--theme-panel-shadow); border-color: var(--base-400); }
.ma-stage__connect svg, .ma-stage__exit svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ma-stage__connect svg rect { fill: currentColor; stroke: none; }

.ma-stage__viewport { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
.ma-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  max-width: 980px; margin: 0 auto; padding: 12px 0 28px; opacity: 0; visibility: hidden;
  transform: translateY(14px); transition: opacity var(--motion-dur-base) var(--motion-ease), transform var(--motion-dur-base) var(--motion-ease), visibility var(--motion-dur-base);
}
.ma-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.ma-slide__kicker { align-self: flex-start; background: var(--color-warning-soft); color: #fff; font-weight: 800; letter-spacing: .04em; margin-bottom: 16px; }
.ma-slide__title {
  font-family: var(--theme-font-family-heading); font-weight: 800; line-height: 1.0; letter-spacing: -.02em;
  font-size: clamp(40px, 6vw, 68px); color: var(--color-primary-pure); position: relative; display: inline-block;
}
.ma-slide__title .ma-uline { position: absolute; left: 0; right: -8px; bottom: -10px; height: 16px; width: 100%; }
.ma-slide__title .ma-uline path { fill: none; stroke: var(--color-warning-soft); stroke-width: 7; stroke-linecap: round; }
.ma-slide__consigna { margin: 26px 0 22px; font-size: clamp(19px, 2.2vw, 26px); font-weight: 700; color: var(--theme-text-heading); max-width: 760px; }
.ma-slide__consigna b { color: var(--color-primary-pure); }

.ma-roteiro { display: grid; gap: 12px; max-width: 760px; }
.ma-roteiro--two { grid-template-columns: 1fr 1fr; }
.ma-roteiro__item {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #fff;
  border-radius: var(--border-radius-md); box-shadow: var(--theme-card-shadow);
  font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; color: var(--theme-text-heading);
}
.ma-roteiro__num {
  flex: none; width: 38px; height: 38px; border-radius: var(--border-radius-circle); display: grid; place-items: center;
  background: var(--num, var(--color-pastel-lavender-deep)); color: #fff; font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 18px;
}
.ma-roteiro__dot { flex: none; width: 12px; height: 12px; border-radius: var(--border-radius-circle); background: var(--num, var(--color-pastel-lavender-deep)); }

/* slide de capa */
.ma-slide--cover { align-items: center; text-align: center; }
.ma-slide--cover .ma-slide__kicker { align-self: center; }
.ma-slide--cover .ma-slide__title { font-size: clamp(44px, 7vw, 80px); }
.ma-cover__meta { display: flex; gap: 22px; justify-content: center; margin-top: 28px; color: var(--theme-text-muted); font-weight: 700; font-size: 16px; }
.ma-cover__meta span { display: inline-flex; align-items: center; gap: 8px; }
.ma-cover__meta svg { width: 19px; height: 19px; fill: none; stroke: var(--color-pastel-lavender-deep); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ma-cover__hint { margin-top: 30px; font-size: 15px; color: var(--color-surface-pure); font-weight: 600; }

/* doodles decorativos */
.ma-doodle { position: absolute; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ma-doodle--spark1 { top: 12%; right: 8%; width: 38px; stroke: var(--color-pastel-peach); stroke-width: 3.4; fill: var(--color-pastel-peach); }
.ma-doodle--spark2 { bottom: 20%; right: 16%; width: 26px; stroke: var(--color-pastel-lavender-deep); stroke-width: 3; fill: var(--color-pastel-lavender-deep); }
.ma-doodle--ring { top: 24%; right: 6%; width: 120px; stroke: var(--color-warning-soft); stroke-width: 6; opacity: .85; }
.ma-doodle--wave { bottom: 8%; left: 4%; width: 160px; stroke: var(--color-primary-pale); stroke-width: 4; }

/* setas */
.ma-stage__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
  display: grid; place-items: center; border-radius: var(--border-radius-circle); background: #fff;
  box-shadow: var(--theme-panel-shadow); color: var(--color-primary-pure); z-index: 3;
  transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), opacity var(--motion-dur-fast) var(--motion-ease);
}
.ma-stage__arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ma-stage__arrow:hover { box-shadow: var(--theme-shadow-lg); }
.ma-stage__arrow--prev { left: clamp(8px, 2vw, 28px); }
.ma-stage__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.ma-stage__arrow--next { right: clamp(8px, 2vw, 28px); }
.ma-stage__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
.ma-stage__arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }

/* rodapé */
.ma-stage__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 22px; }
.ma-stage__mirror { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--color-primary-soft); }
.ma-stage__mirror svg { width: 56px; height: 10px; stroke: var(--color-primary-pale); stroke-width: 2.4; stroke-linecap: round; }
.ma-stage__dots { display: flex; gap: 8px; }
.ma-stage__dots button { width: 9px; height: 9px; border-radius: var(--border-radius-circle); background: var(--color-primary-pale); transition: background var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.ma-stage__dots button.is-active { background: var(--color-pastel-lavender-deep); transform: scale(1.3); }
.ma-stage__counter { font-size: 13px; font-weight: 700; color: var(--color-surface-pure); min-width: 48px; text-align: right; }

/* popover de reconexão (QR) */
.ma-stage__qrpop {
  position: absolute; top: 70px; right: clamp(20px, 4vw, 56px); z-index: 5; width: 220px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px;
  background: #fff; border-radius: var(--border-radius-md); box-shadow: var(--lkt-shadow-level4); text-align: center;
}
.ma-stage__qrpop[hidden] { display: none; }
.ma-stage__qrpop p { font-size: 12.5px; color: var(--theme-text-muted); line-height: 1.4; font-weight: 600; }
.ma-stage__qrpop p b { color: var(--theme-text-heading); font-weight: 800; }
.ma-qr--mini { width: 140px; height: 140px; padding: 10px; box-shadow: none; }
.ma-qr__open--mini { font-size: 12px; padding: 7px 12px; }

@media (prefers-reduced-motion: reduce) {
  .ma-slide { transition: opacity .01ms; }
}
@media (max-width: 700px) {
  .ma-stage__lesson { display: none; }
  .ma-roteiro--two { grid-template-columns: 1fr; }
  .ma-stage__arrow { width: 44px; height: 44px; }
}

/* ================================================================
   ATRIBUIR, refino do botão quieto + transição "gerando turma"
   ================================================================ */
.btn--quiet { background: transparent; color: var(--color-surface-pure); box-shadow: none; }
.btn--quiet:hover { background: var(--theme-surface-muted); color: var(--theme-text-heading); transform: none; }

.attr__loading { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; align-self: stretch; padding: 6px 6px 4px; }
.attr__loading[hidden] { display: none; }

/* cena de geração, orbit com profundidade, seamless no modal */
.genload { position: relative; width: 380px; height: 264px; max-width: 100%; margin: 0 auto; }
.genload__glow { position: absolute; top: 50%; left: 50%; width: 300px; height: 190px; transform: translate(-50%,-50%); background: radial-gradient(closest-side, var(--color-accent-tinted), transparent 78%); filter: blur(8px); animation: glowPulse 3.6s var(--motion-ease) infinite; }
.genload__rings { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: center; animation: ringDrift 60s linear infinite; }
.genload__rings ellipse { fill: none; stroke: var(--color-surface-light); stroke-width: 1.5; stroke-dasharray: 3 8; stroke-linecap: round; }

.genload__core { position: absolute; top: 50%; left: 50%; width: 138px; height: 138px; transform: translate(-50%,-50%); display: grid; place-items: center; animation: coreBreathe 3.4s var(--motion-ease) infinite; }
.genload__core img { position: relative; width: 104px; filter: grayscale(1); opacity: .5; }

.genload__tile {
  position: absolute; top: 0; left: 0; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--border-radius-sm-14); background: var(--tile, var(--color-pastel-lavender)); box-shadow: var(--theme-panel-shadow);
  offset-path: path("M 190 44 A 156 88 0 1 1 189.99 44 Z"); offset-rotate: 0deg; offset-distance: var(--start, 0%);
  animation: orbMove 14s linear infinite, orbDepth 14s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.genload__tile svg { width: 27px; height: 27px; fill: none; stroke: var(--color-surface-deep); stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

.genload__spark { position: absolute; color: var(--color-pastel-lavender-deep); opacity: 0; animation: sparkTwinkle 2.6s var(--motion-ease) infinite; }
.genload__spark svg { width: 100%; height: 100%; fill: currentColor; }
.genload__spark--1 { top: 9%; right: 12%; width: 22px; color: var(--color-pastel-peach); animation-delay: .2s; }
.genload__spark--2 { bottom: 13%; left: 10%; width: 16px; color: var(--color-pastel-lavender-deep); animation-delay: 1.1s; }
.genload__spark--3 { top: 32%; left: 4%; width: 13px; color: var(--color-warning-soft); animation-delay: 1.9s; }

.attr__loading-title { font-family: var(--theme-font-family-heading); font-size: 26px; font-weight: 800; color: var(--theme-text-heading); margin-top: 10px; letter-spacing: -.015em; }

.genload__steps { list-style: none; display: grid; gap: 9px; margin: 16px 0 0; }
.genload__steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--base-400); transition: color .3s var(--motion-ease); }
.genload__steps li.is-active { color: var(--theme-text-heading); }
.genload__steps li.is-done { color: var(--color-surface-pure); }
.genload__check { flex: none; width: 20px; height: 20px; border-radius: var(--border-radius-circle); display: grid; place-items: center; background: var(--color-surface-mist); transition: background .3s var(--motion-ease); }
.genload__check svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s var(--motion-ease); }
.genload__steps li.is-active .genload__check { background: var(--color-accent-pure); animation: checkPulse 1.2s var(--motion-ease) infinite; }
.genload__steps li.is-done .genload__check { background: var(--color-success-pure); }
.genload__steps li.is-done .genload__check svg { opacity: 1; }

.attr__loading-bar { width: 200px; height: 5px; border-radius: var(--border-radius-pill); background: var(--color-surface-mist); margin-top: 22px; overflow: hidden; }
.attr__loading-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); }
.attr__loading.run .attr__loading-bar i { animation: orbitBar 5s var(--motion-ease) forwards; }

@keyframes orbMove { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes orbDepth { 0% { transform: scale(.58); opacity: .32; } 50% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(.58); opacity: .32; } }
@keyframes coreBreathe { 0%, 100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.05); } }
@keyframes glowPulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes ringDrift { to { transform: rotate(360deg); } }
@keyframes sparkTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 45%, 65% { opacity: 1; transform: scale(1); } }
@keyframes checkPulse { 0% { box-shadow: 0 0 0 0 var(--color-accent-pale); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes orbitBar { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .genload__tile, .genload__rings, .genload__core, .genload__glow, .genload__spark { animation: none; }
  .genload__spark { opacity: .9; }
  .attr__loading.run .attr__loading-bar i { animation: none; width: 100%; }
}

/* ============================================================
   VIEW: Painel do professor (home / "Início")
   Atribuições do professor (Ativas · Agendadas · Passadas) + feed lateral
   ============================================================ */
.view--painel { padding-bottom: 48px; }
.cmdk { max-width: 1280px; margin-left: auto; margin-right: auto; }
/* Atribuições em largura total, igual à Biblioteca (sem cap de 1280) */
/* CABEÇALHO DE COMANDOS: escopo + lote em cima, busca e filtro embaixo.
   As fileiras de situação e natureza saíram daqui em 26/08/2026 e viraram
   facetas do filtro (js/painel.js); o que resta em fileira é só o eixo que
   troca a pergunta, e não recorta a mesma lista. */
.painel-toolwrap { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; padding: 0 4px; }
.painel-toolwrap__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* O topo some inteiro quando não há nem escopo nem lote (o professor): sem
   isto, sobraria um respiro de 12px sem nada dentro acima da busca. */
.painel-toolwrap__top:not(:has(> :not([hidden]))) { display: none; }
.painel-toolbar { margin: 0; }
/* Sem regra global de [hidden] neste projeto (ver css/visao.css): o componente
   declara display:inline-flex, e sem esta linha a fileira de escopo apareceria
   para o professor mesmo com o atributo posto. */
.painel-segment[hidden] { display: none; }

/* O lote encosta na borda DIREITA da toolbar, alinhado com o botão de filtros
   logo abaixo. Sem o `margin-left:auto` ele só ia para a direita enquanto o
   segmento de escopo estivesse ao lado (o `space-between` do pai); sozinho na
   linha, caía para a esquerda e desalinhava da busca. */
.painel-lote { flex-shrink: 0; gap: 8px; margin-left: auto; }
.painel-lote[hidden] { display: none; }
.painel-lote__ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* A FILEIRA DE ESCOPO (as minhas × as do meu domínio) decide DE QUEM é a lista;
   o filtro recorta dentro disso. Ela e o botão de filtros não podem ler como
   comandos iguais, então o ativo aqui é a cor da marca — a mesma pastilha,
   outra voz. Existe só para gestor; quem monta é js/painel.js. */
.painel-segment--escopo .painel-seg.is-active { background: var(--color-accent-pure); color: #fff; }
.painel-segment--escopo .painel-seg.is-active .painel-seg__n {
  background: color-mix(in srgb, var(--color-essence-ivory) 26%, transparent); color: #fff;
}

/* ============================================================
   Busca inteligente (command palette), topo da home
   Busca de entidades + paleta de comandos. Comportamento e regras de
   negócio em design/backlog-specs/busca-inteligente-home.md
   ============================================================ */
.cmdk { position: relative; z-index: 95; padding: 0 4px; margin-bottom: 6px; }
/* A barra e o painel são superfícies CLARAS dentro de uma view escura, que
   declara `.view--home { color: #fff }` e `.view--home svg { stroke: currentColor }`.
   Sem fixar a cor de texto aqui, tudo dentro do componente herda branco — e a
   lupa da barra fechada some no fundo branco. Os dois ícones que dependem de
   `stroke` próprio precisam de especificidade acima de `.view--home svg`. */
.cmdk__bar { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 16px; height: 54px;
  background: #fff; color: var(--theme-text-heading); border: 1.5px solid var(--theme-panel-border); border-radius: var(--border-radius-sm);
  box-shadow: var(--theme-card-shadow); cursor: text;
  transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.cmdk__bar:hover { border-color: var(--color-surface-light); }
.cmdk__bar.is-open { border-color: var(--color-accent-pure); box-shadow: 0 0 0 4px var(--color-accent-tinted), var(--lkt-shadow-level2); }
.cmdk .cmdk__ic { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--color-surface-soft); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cmdk__bar.is-open .cmdk__ic { stroke: var(--color-accent-pure); }
/* pílula de escopo: aparece quando a busca começa por > @ # / */
.cmdk__scope { flex-shrink: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-accent-darker); background: var(--color-accent-tinted); padding: 4px 10px; border-radius: var(--border-radius-pill); }
.cmdk__scope[hidden] { display: none; }
.cmdk__input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15.5px; font-weight: 600;
  color: var(--theme-text-heading); }
.cmdk__input::placeholder { color: var(--color-surface-soft); font-weight: 500; }
.cmdk__input:focus { outline: none; }
.cmdk__clear { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--border-radius-circle);
  color: var(--color-surface-soft); transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.cmdk__clear:hover { background: var(--theme-surface-muted); color: var(--theme-text-heading); }
.cmdk__clear[hidden] { display: none; }
.cmdk__clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* mensagem só para leitor de tela ("N resultados") */
.cmdk__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }

.cmdk__scrim { position: fixed; inset: 0; z-index: 90; background: rgba(37,8,53,.35); backdrop-filter: blur(2px); }
.cmdk__scrim[hidden] { display: none; }

.cmdk__panel { position: absolute; left: 4px; right: 4px; top: calc(100% + 8px); z-index: 96;
  display: flex; flex-direction: column; max-height: min(560px, 70vh); overflow: hidden; padding: 14px 14px 0;
  background: #fff; color: var(--theme-text-heading); border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-plus); box-shadow: var(--theme-shadow-lg); }
.cmdk__panel[hidden] { display: none; }
.cmdk__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.cmdk__filters { flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 4px 12px; border-bottom: 1px solid var(--color-surface-pale); margin-bottom: 6px; }
.cmdk__filters[hidden] { display: none; }
.cmdk__filters-label { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-surface-soft); margin-right: 2px; }
.cmdk-chip { font-size: 13px; font-weight: 700; color: var(--theme-text-muted); background: var(--theme-surface-muted);
  padding: 6px 13px; border-radius: var(--border-radius-pill); transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.cmdk-chip:hover:not(:disabled) { background: var(--color-surface-mist); }
.cmdk-chip.is-active { background: var(--theme-text-heading); color: #fff; }
/* escopo por prefixo manda no filtro: os chips ficam informativos */
.cmdk-chip[data-locked] { cursor: default; opacity: .55; }
.cmdk-chip[data-locked].is-active { opacity: 1; background: var(--color-accent-dark); }

/* rodapé de atalhos de teclado */
.cmdk__foot { flex-shrink: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 4px; margin-top: 4px; border-top: 1px solid var(--color-surface-pale); }
.cmdk__hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--color-surface-soft); }
.cmdk__hint kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  font: inherit; font-size: 11px; font-weight: 700; color: var(--color-surface-pure); background: var(--theme-surface-muted);
  border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-quark); }

.cmdk__sec { padding: 6px 0 2px; }
.cmdk__sec-h { display: flex; align-items: center; gap: 8px; padding: 6px 8px 7px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-surface-soft); }
.cmdk__sec-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 800; letter-spacing: 0; color: var(--color-surface-pure); background: var(--theme-surface-muted); border-radius: var(--border-radius-pill); }
.cmdk__rows { display: flex; flex-direction: column; gap: 2px; }

.cmdk-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; text-align: left; padding: 9px 10px; border-radius: var(--border-radius-sm); transition: background var(--motion-dur-fast) var(--motion-ease); }
.cmdk-row.is-sel { background: var(--color-accent-tinted); }
.cmdk-row__ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--border-radius-nano); display: grid; place-items: center; background: var(--tile, var(--theme-surface-muted)); color: var(--theme-text-heading); }
.cmdk-row__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmdk-row__ic--action { background: var(--color-accent-tinted); color: var(--color-accent-dark); }
.cmdk-row__av { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--border-radius-circle); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--theme-text-heading); }
.cmdk-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmdk-row__name { font-size: 14.5px; font-weight: 700; color: var(--theme-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row__name mark { background: var(--color-tertiary-pale); color: var(--theme-text-heading); border-radius: 3px; padding: 0 1px; }
.cmdk-row__sub { font-size: 12.5px; color: var(--color-surface-pure); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row__sub mark { background: none; color: var(--theme-text-heading); font-weight: 800; }
.cmdk-row__tag { flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: var(--color-surface-pure); background: var(--theme-surface-muted); padding: 3px 9px; border-radius: var(--border-radius-pill); }
.cmdk-row__tag.is-on { color: var(--color-accent-darker); background: var(--color-accent-tinted); }
.cmdk-row__kind { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--color-surface-soft); }
.cmdk-row__go { flex-shrink: 0; width: 22px; opacity: 0; transition: opacity var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.cmdk-row__go svg { width: 18px; height: 18px; fill: none; stroke: var(--color-surface-soft); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cmdk-row.is-sel .cmdk-row__go { opacity: 1; transform: translateX(2px); }
.cmdk-row.is-sel .cmdk-row__kind { color: var(--color-surface-pure); }
/* "ver todas as N": abre o grupo inteiro, não navega */
.cmdk-row--mais { padding-left: 58px; min-height: 34px; }
.cmdk-row--mais .cmdk-row__name { font-size: 13px; font-weight: 700; color: var(--color-accent-darker); }
.cmdk-row--mais .cmdk-row__go svg { stroke: var(--color-accent-dark); width: 15px; height: 15px; }

.cmdk__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 30px 16px; }
.cmdk .cmdk__empty-ic { width: 34px; height: 34px; fill: none; stroke: var(--base-400); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmdk__empty p { font-size: 14px; color: var(--color-surface-pure); }
.cmdk__empty-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.cmdk__sec--kw { border-top: 1px solid var(--color-surface-pale); margin-top: 4px; padding-top: 6px; }

/* No toque não existe atalho de teclado: o rodapé inteiro sai — não sobra
   nada nele além da borda. E o painel vira folha, porque o teclado virtual
   come metade da tela e o ancoramento absoluto deixaria a lista fora de
   alcance. */
@media (hover: none) and (pointer: coarse) {
  .cmdk__foot { display: none; }
}
@media (max-width: 768px) {
  .cmdk__panel { position: fixed; left: 12px; right: 12px; top: 132px; bottom: 12px;
    max-height: none; border-radius: var(--border-radius-sm); padding-bottom: 8px; }
  /* a folha ocupa a tela inteira: a FAB de registrar flutuaria por cima dela */
  body.cmdk-open .cap-fab { opacity: 0; pointer-events: none; }
  .cmdk__foot { display: none; }
  .cmdk__filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; padding-bottom: 10px; }
  .cmdk__filters::-webkit-scrollbar { display: none; }
  .cmdk__filters-label { display: none; }
  .cmdk-chip { flex-shrink: 0; }
  .cmdk-row__kind { display: none; }
}
/* Cabeçalho imersivo das Atribuições, mesmo padrão da Biblioteca */
.painel-head {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--border-radius-md);
  padding: clamp(20px, 2.6vw, 30px) clamp(24px, 4vw, 44px);
  background:
    var(--grain),
    var(--wl-page-hero-gradient); /* papel do contrato — mesmo valor do lekto; slate no aura */
  box-shadow: var(--theme-shadow-lg);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.painel-segment svg, .atr-card svg, .atr-feed svg, .atr-empty svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.painel-head__art { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.painel-head__art .doodle { left: auto; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.painel-head__art .doodle--check { width: 30px; top: 22%; right: 30%; stroke: var(--color-pastel-mint); stroke-width: 3; }
.painel-head__art .doodle--sparkle { width: 17px; top: 16%; right: 22%; stroke: var(--color-pastel-blush); }
.painel-head__art .doodle--ring { width: 26px; top: 52%; right: 8%; stroke: var(--color-pastel-lavender); }
.painel-head__art .doodle--dots { width: 40px; top: 60%; right: 23%; fill: var(--color-pastel-aqua); stroke: none; }
.painel-head__title { font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; color: #fff; }
.painel-head__lead { max-width: 64ch; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.55; }
@media (max-width: 600px) {
  .painel-head__art .doodle--sparkle, .painel-head__art .doodle--ring, .painel-head__art .doodle--dots { display: none; }
}

/* ============================================================
   Cabeçalho padrão de view/seção — banner imersivo com doodles.
   PADRÃO do protótipo: toda nova seção/módulo usa .view-head
   (mesmo tratamento de .painel-head / .lib-head).
   ============================================================ */
.view-head {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--border-radius-md);
  padding: clamp(20px, 2.6vw, 30px) clamp(24px, 4vw, 44px);
  background:
    var(--grain),
    var(--wl-page-hero-gradient); /* papel do contrato — mesmo valor do lekto; slate no aura */
  box-shadow: var(--theme-shadow-lg);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin-bottom: clamp(26px, 3.2vw, 38px);
}
.view-head__art { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.view-head__art .doodle { left: auto; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.view-head__art .doodle--check { width: 30px; top: 22%; right: 30%; stroke: var(--color-pastel-mint); stroke-width: 3; }
.view-head__art .doodle--sparkle { width: 17px; top: 16%; right: 22%; stroke: var(--color-pastel-blush); }
.view-head__art .doodle--ring { width: 26px; top: 52%; right: 8%; stroke: var(--color-pastel-lavender); }
.view-head__art .doodle--dots { width: 40px; top: 60%; right: 23%; fill: var(--color-pastel-aqua); stroke: none; }
.view-head__title { font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.02em; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; color: #fff; }
.view-head__lead { max-width: 64ch; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.55; }
@media (max-width: 600px) {
  .view-head__art .doodle--sparkle, .view-head__art .doodle--ring, .view-head__art .doodle--dots { display: none; }
}

/* ── Badge de nível (avatar + selo) ── */
/* O selo sai do Início de quem gere (js/home-nova.js): a progressão é a do
   professor. `display` de autor vence o [hidden] do navegador, então a regra
   é explícita — este projeto não tem reset global de [hidden]. */
.level-badge[hidden] { display: none; }
.level-badge { display: flex; align-items: center; gap: 13px; flex-shrink: 0; padding: 9px 16px 9px 10px;
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-pill);
  box-shadow: var(--theme-card-shadow); --lvl-tile: var(--color-pastel-lavender);
  transition: box-shadow var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease); }
.level-badge:hover { box-shadow: var(--theme-panel-shadow); transform: translateY(-2px); border-color: var(--theme-border-subtle); }
.level-badge:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 3px; }
.level-badge__ava { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.level-badge__ava img { width: 46px; height: 46px; border-radius: var(--border-radius-circle); object-fit: cover;
  box-shadow: 0 0 0 3px var(--lvl-tile); }
.level-badge__seal { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: var(--border-radius-circle);
  display: grid; place-items: center; background: var(--seal, var(--color-pastel-lavender)); color: var(--theme-text-heading);
  box-shadow: 0 0 0 2.5px #fff; }
.level-seal__svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.level-badge__meta { display: flex; flex-direction: column; gap: 2px; min-width: 92px; }
.level-badge__kicker { font-family: var(--theme-font-family-heading); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-surface-soft); }
.level-badge__name { font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.01em; font-size: 16px; color: var(--theme-text-heading); line-height: 1.1; }
.level-badge__prog { height: 5px; border-radius: var(--border-radius-pill); background: var(--theme-surface-muted); overflow: hidden; margin-top: 4px; }
.level-badge__prog-fill { display: block; height: 100%; width: 0; border-radius: var(--border-radius-pill);
  background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); transition: width var(--motion-dur-base) var(--motion-ease); }

/* Segmented control */
.painel-segment { display: inline-flex; gap: 4px;
  padding: 5px; background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-pill);
  box-shadow: var(--theme-card-shadow); }
.painel-seg { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  color: var(--theme-text-muted); padding: 9px 18px; border-radius: var(--border-radius-pill);
  transition: color var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease); }
.painel-seg:hover { color: var(--theme-text-heading); }
.painel-seg.is-active { background: var(--theme-text-heading); color: #fff; box-shadow: var(--theme-panel-shadow); }
.painel-seg__n { font-family: var(--theme-font-family-heading); display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 12px; font-weight: 800; border-radius: var(--border-radius-pill);
  background: var(--theme-surface-muted); color: var(--theme-text-muted); }
.painel-seg.is-active .painel-seg__n { background: var(--color-accent-pure); color: #fff; }

/* DE ONDE VEIO o card, no domínio do gestor: escola que não é a dele. Discreto
   de propósito — é procedência, não estado, e não pode competir com o chip de
   tipo nem com o de situação, que estão na mesma linha. */
.atr-card__origem {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--theme-text-muted); background: var(--theme-surface-muted);
  border-radius: var(--border-radius-pill);
}
.atr-card__origem svg { width: 14px; height: 14px; flex-shrink: 0; }
/* QUEM FAZ, quando a atribuição é de uma pessoa (Gustavo, 17/09/2026). Conteúdo
   de agrupamento individual gera um card por estudante, e sem o nome aqui três
   atribuições da mesma autoavaliação ficam indistinguíveis na lista. Usa o
   .chip do DS, então herda forma e cor; o que este bloco acrescenta é só a
   turma em voz mais baixa ao lado do nome. */
.atr-card__quem { gap: 6px; max-width: 100%; }
.atr-card__quem svg { width: 14px; height: 14px; flex-shrink: 0; }
.atr-card__quem-t { padding-left: 6px; margin-left: 2px; border-left: 1px solid currentColor; opacity: .6; font-weight: 700; }
/* Feed sem nenhum evento: o gestor em "Minhas", antes de atribuir a primeira
   coisa, cai aqui. Uma linha em voz baixa, não um estado vazio ilustrado — a
   coluna toda tem 360px e o assunto é secundário. */
.atr-feed__vazio { padding: 10px 2px; font-size: 13.5px; color: var(--theme-text-muted); }

/* Grid: cards + feed lateral */
.painel-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 22px;
  margin-top: 20px; padding: 0 4px; align-items: start; }
.painel-main { min-width: 0; }
/* Lista de cartões largos: 1 por linha (contexto rico, 1–4 simultâneos) */
.atr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }

/* ── Cartão largo de atribuição (corpo não-clicável + barra de ações) ── */
.atr-card { position: relative; list-style: none; min-width: 0; --tile: var(--color-pastel-lavender); }
.atr-card__panel { position: relative; z-index: 2; background: #fff; border: 1px solid var(--theme-panel-border);
  border-radius: var(--theme-card-radius); box-shadow: var(--theme-card-shadow); overflow: hidden;
  transition: box-shadow var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease); }
.atr-card:hover .atr-card__panel { box-shadow: var(--theme-panel-shadow); border-color: var(--theme-border-subtle); }

.atr-card__body { display: flex; align-items: stretch; }
.atr-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 18px 22px; }

.atr-card__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.atr-card__chips { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.atr-card__type { gap: 5px; padding: 3px 10px; font-size: 12px; }
.atr-card__type svg { width: 13px; height: 13px; }

/* avatares dos executores (reusados no card e nos fatos) */
.atr-card__av { width: 28px; height: 28px; border-radius: var(--border-radius-circle); display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: var(--theme-text-heading); flex-shrink: 0; box-shadow: 0 0 0 2px #fff, var(--lkt-shadow-level1); }
.atr-card__av svg { width: 14px; height: 14px; }
.atr-card__profs { display: inline-flex; align-items: center; flex-shrink: 0; }
.atr-card__av--stacked { margin-left: -9px; }
.atr-card__av--stacked:first-child { margin-left: 0; }
.atr-card__profs .atr-card__av { transition: margin-left var(--motion-dur-fast) var(--motion-ease); }
.atr-card:hover .atr-card__av--stacked { margin-left: -5px; }
.atr-card__av--more { background: var(--theme-surface-muted); color: var(--theme-text-muted); font-size: 11px; }
.atr-card__av[data-name] { position: relative; }
.atr-card__av[data-name]:hover { z-index: 6; }
.atr-card__av[data-name]::after {
  content: attr(data-name);
  position: absolute; left: 50%; bottom: calc(100% + 7px); translate: -50% 4px;
  background: var(--theme-text-heading); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 6px 10px; border-radius: var(--border-radius-nano);
  box-shadow: var(--theme-shadow-lg);
  opacity: 0; pointer-events: none; z-index: 7;
  transition: opacity var(--motion-dur-fast) var(--motion-ease), translate var(--motion-dur-fast) var(--motion-ease);
}
.atr-card__av[data-name]:hover::after { opacity: 1; translate: -50% 0; }

.atr-card__id { display: flex; flex-direction: column; gap: 6px; }
/* AS TAGS SAÍRAM DO CARD (Gustavo, 17/09/2026). Eram as únicas do protótipo
   escritas como hashtag solta — "#Registroguiado", "#ASET" —, e o resto do
   sistema nunca fez isso: o card do acervo (.ccard__tag) e a tabela da
   Biblioteca (.lib-tag) mostram o mesmo dado como chip, sem cerquilha e sem
   colar as palavras. Aqui elas empilhavam uma terceira fileira de pastilhas em
   cima do chip de tipo e do de situação, e repetiam o que a linha de metadados
   já diz. O que identifica o card continua: tipo, situação, procedência,
   segmento, ano e, na atribuição individual, o nome de quem faz.
   As regras saíram junto com o markup para não deixar CSS órfão. */
/* O TÍTULO DO CARD É O NOME DA ATRIBUIÇÃO (ver tituloHTML em js/painel.js).
   Duas caixas: o começo do nome encolhe com reticências, o código nunca — ele é
   a parte que identifica, e um nome cortado no fim perderia justamente ela. */
.atr-card__title { display: flex; align-items: baseline; gap: 8px; min-width: 0;
  font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.01em;
  font-size: 21px; line-height: 1.14; color: var(--theme-text-heading); }
.atr-card__title-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atr-card__title-quem { flex: none; white-space: nowrap; }
.atr-card__title-cod {
  flex: none;
  font-family: var(--theme-font-family-base, inherit);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-surface-pure);
}
.atr-card__seg { font-size: 12.5px; color: var(--color-surface-pure); font-weight: 600; }


/* Fatos ricos: progresso, executores, turmas, prazo, atribuidor */
.atr-card__facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 2px;
  padding-top: 14px; border-top: 1px solid var(--color-surface-pale); }
.atr-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.atr-fact--prog { flex: 1 1 200px; min-width: 180px; }
.atr-fact__lbl { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-surface-soft); }
.atr-fact__val { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--theme-text-heading); }
.atr-fact__val svg { width: 14px; height: 14px; color: var(--color-surface-soft); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atr-fact__val b { font-weight: 800; }
.atr-fact__val--profs { gap: 8px; }
.atr-fact__profn { font-size: 12.5px; font-weight: 700; color: var(--theme-text-muted); }
.atr-fact--warn .atr-fact__val, .atr-fact--warn .atr-fact__val svg { color: var(--color-warning-darker); }
.atr-fact--muted .atr-fact__val, .atr-fact--muted .atr-fact__val svg { color: var(--color-surface-soft); }

.atr-card__turmas { display: inline-flex; align-items: center; gap: 2px; }
.atr-card__turma-dot { width: 9px; height: 9px; border-radius: var(--border-radius-circle); margin-right: -3px; box-shadow: 0 0 0 1.5px #fff; }
.atr-card__turma-name { font-size: 13px; font-weight: 700; color: var(--theme-text-heading); margin-left: 7px; }

.atr-card__bar { height: 6px; border-radius: var(--border-radius-pill); background: var(--theme-surface-muted); overflow: hidden; margin-top: 4px; }
.atr-card__bar i { display: block; height: 100%; border-radius: var(--border-radius-pill);
  background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); }
/* Todo mundo respondeu: verde, a mesma regra de ouro dos estados de conclusão
   que a barra da trilha já segue. Progresso é indigo; concluído é verde. */
.atr-card__bar.is-complete i { background: var(--color-success-pure); }

/* Barra de quick actions (Ver conteúdo · Registro · Gerenciar) */
.atr-card__actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--color-surface-pale); background: var(--base-50); }
.atr-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--theme-text-heading);
  background: #fff; border: 1px solid var(--theme-border-subtle); border-radius: var(--border-radius-sm);
  cursor: pointer; transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.atr-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atr-act:hover { border-color: var(--base-400); box-shadow: var(--theme-card-shadow); transform: translateY(-1px); }
.atr-act:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }
.atr-act--primary { color: #fff; background: var(--theme-text-heading); border-color: var(--theme-text-heading); flex-shrink: 0; }
.atr-act--primary:hover { background: var(--color-surface-deepest); border-color: var(--color-surface-deepest); }
/* Modo Offline (js/modo-offline.js): Registro e Gerenciar ficam visíveis mas
   inertes (o bloqueio de fato é o guard em js/painel.js, onAtrCardClick) —
   sem pointer-events:none, pela mesma razão do nav lateral: preserva o clique
   chegando pelo teclado, que o guard então recusa. */
.is-modo-offline [data-act="registro"],
.is-modo-offline [data-act="gerenciar"] { opacity: var(--opacity-intense); cursor: not-allowed; }
.is-modo-offline [data-act="registro"]:hover,
.is-modo-offline [data-act="gerenciar"]:hover { border-color: var(--theme-border-subtle); box-shadow: none; transform: none; }

/* Status badge */
.atr-status { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--border-radius-pill); }
.atr-status--ativa { background: var(--color-accent-tinted); color: var(--color-accent-darker); }
.atr-status--agendada { background: var(--color-warning-tinted); color: var(--color-warning-darker); }
.atr-status--passada { background: var(--color-success-tinted); color: var(--color-success-darker); }
/* Pendente = prazo estourado. Não pode ser a rampa `warning`, que já é a da
   "Futura": a diferença entre o que ainda vai começar e o que já devia ter
   começado precisa ser vista de longe. */
.atr-status--pendente { background: var(--color-error-tinted); color: var(--color-error-darker); }
/* Selo "Suspensa" (card + hero de gerenciamento) */
.atr-badge-susp { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--border-radius-pill);
  background: var(--color-surface-mist); color: var(--theme-text-muted); }
.atr-badge-susp svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }

/* ── Deck empilhado (somente trilhas): cartas espreitam atrás ── */
.atr-deck__peek { position: absolute; inset: 0; background: #fff; border: 1px solid var(--theme-panel-border);
  border-radius: var(--theme-card-radius); box-shadow: var(--theme-card-shadow);
  transition: transform var(--motion-dur-fast) var(--motion-ease); }
.atr-deck__peek--1 { z-index: 1; transform: translateY(7px) scaleX(0.97); }
.atr-deck__peek--2 { z-index: 0; transform: translateY(13px) scaleX(0.93); }
.atr-card--deck { margin-bottom: 8px; }
.atr-card--deck:hover .atr-deck__peek--1 { transform: translateY(9px) scaleX(0.97) rotate(-.6deg); }
.atr-card--deck:hover .atr-deck__peek--2 { transform: translateY(16px) scaleX(0.93) rotate(.8deg); }

.atr-card--pendente .atr-card__panel { border-color: var(--color-error-soft); }
.atr-fact--late { color: var(--color-error-dark); }
.atr-fact--late .atr-fact__val, .atr-fact--late b { color: var(--color-error-darker); }
.atr-card--passada .atr-card__panel { filter: saturate(.9); }
.atr-card--passada .atr-card__bar i { background: var(--color-success-soft); }
/* Suspensa: card atenuado */
.atr-card.is-suspensa .atr-card__panel { opacity: .82; }

/* Empty state */
.atr-empty[hidden] { display: none; }
.atr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 56px 24px; background: #fff; border: 1px dashed var(--theme-border-subtle); border-radius: var(--theme-card-radius); }
.atr-empty__ic { width: 56px; height: 56px; border-radius: var(--border-radius-xs); display: grid; place-items: center; background: var(--theme-surface-muted); color: var(--color-surface-pure); }
.atr-empty__ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.atr-empty__txt { max-width: 42ch; color: var(--theme-text-muted); font-size: 15px; line-height: 1.5; }

/* Feed lateral (linha do tempo unificada) */
.painel-rail { position: sticky; top: 18px; }
/* ============================================================
   DS:Log — layout base do histórico de atividades
   ------------------------------------------------------------
   Uma linha do tempo é sempre a mesma coisa no sistema, esteja ela no feed do
   painel, no Histórico completo, no sino de notificações, no card de Atividades
   da Avaliação, no histórico de licença ou nos registros do relatório:

     [ marcador redondo com ícone ]  frase do evento
                                     carimbo de tempo

   O marcador é um disco de --log-marker com SVG no traço do DS, colorido pelo
   TIPO do evento. Os itens são costurados por um fio vertical que nasce no
   centro do marcador — o fio é o separador do componente; não se usa borda
   entre linhas. O carimbo mora no slot de meta, ABAIXO da frase, nunca à
   direita nem acima.

   As superfícies ajustam apenas o recuo lateral da lista (--log-list-pad);
   marcador, fio, densidade e tipografia vêm daqui.
   ============================================================ */
:root {
  --log-marker: 34px;          /* diâmetro do marcador */
  --log-icon: 17px;            /* SVG dentro do marcador */
  --log-gap: 12px;             /* marcador → texto */
  --log-row-pad: 11px;         /* respiro vertical de cada linha */
  --log-line: 2px;             /* espessura do fio conector */
  --log-time-size: 12px;
  --log-time-weight: 600;
  --log-phrase-size: 13.5px;

  --card-hd-title-size: 18px;
  --card-hd-sub-size: 13px;
  --card-hd-sub-gap: 3px;
  --card-hd-gap: 16px;         /* cabeçalho → conteúdo do card */
}

/* ============================================================
   DS:CardHead — cabeçalho de card, uma implementação só
   ============================================================
   Existiam TRÊS (.atr-feed__head, .gz-card__hd, .av-card__hd) para o mesmo
   desenho. Sincronizar número a número não segura: só a última rodada tinha
   33 propriedades computadas divergindo entre elas — padding 20/20/14 contra
   0, borda de 1px em uma só, margin-bottom em 0/8/12, display block contra
   flex, line-height do subtítulo normal contra 1,5 — além de três estruturas
   de DOM diferentes. Enquanto forem três classes, voltam a divergir na
   próxima PR de qualquer um.

   Anatomia — o ícone é opcional, o resto não muda:

     <header class="card-hd">
       <span class="card-hd__ic">{svg}</span>          <!-- opcional -->
       <div class="card-hd__txt">
         <h2 class="card-hd__title">Título</h2>
         <p  class="card-hd__sub">Subtítulo</p>
       </div>
       <button class="card-hd__acao">…</button>        <!-- opcional -->
     </header>

   O envelope __txt existe TENHA OU NÃO ícone: é ele que garante que a caixa
   do texto é a mesma nos dois casos. */
.card-hd { display: flex; align-items: flex-start; gap: 14px; margin-bottom: var(--card-hd-gap); }
.card-hd__ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--border-radius-sm-14);
  display: grid; place-items: center; background: var(--theme-surface-muted); color: var(--theme-text-muted); }
.card-hd__ic svg { width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-hd__txt { flex: 1; min-width: 0; }
.card-hd__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: var(--card-hd-title-size);
  color: var(--theme-text-heading); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-hd__sub { margin-top: var(--card-hd-sub-gap); font-size: var(--card-hd-sub-size); line-height: 1.5; color: var(--color-surface-pure); }
.card-hd__ic--warn { background: var(--color-warning-tinted); color: var(--color-warning-darker); }
/* ação à direita (ex.: "Editar avaliações" no Mapa das ASET) */
.card-hd__acao { flex: none; align-self: center; }

.atr-feed { display: flex; flex-direction: column; padding: 20px 22px; }
/* <ol>/<ul> chegam com margin e list-style do user-agent. Declarar só o padding
   deixou A e B com 16px de margem em cima E embaixo (e marcador decimal invisível
   sob o display:grid do item) enquanto C, que tinha um reset local, ficava sem —
   32/36/16px do cabeçalho ao primeiro item, nas três telas do mesmo componente. */
.atr-feed__list { margin: 0; padding: var(--log-list-pad, 0); list-style: none; }
.atr-feed__item { position: relative; display: grid; grid-template-columns: var(--log-marker) minmax(0,1fr); gap: var(--log-gap); padding: var(--log-row-pad) 0; }
/* O fio começa NA BORDA do marcador, não 5px dentro dele. O recuo antigo
   contava com o disco ser opaco para esconder a sobra — e o quadro de widgets
   (26/08 a 23/09/2026) desenhava os discos translúcidos sobre o fundo escuro,
   onde o fio aparecia atravessando o ícone. Encostar em vez de entrar por
   baixo dá o mesmo desenho onde o disco é opaco e conserta onde não é:
   `marcador + respiro` é exatamente a base do disco, e `bottom` alcança o
   topo do disco seguinte. */
.atr-feed__item::before { content: ""; position: absolute;
  left: calc(var(--log-marker) / 2 - var(--log-line) / 2);
  top: calc(var(--log-marker) + var(--log-row-pad)); bottom: calc(-1 * var(--log-row-pad));
  width: var(--log-line); background: var(--theme-surface-muted); }
.atr-feed__item:last-child::before { display: none; }
.atr-feed__dot { position: relative; z-index: 1; width: var(--log-marker); height: var(--log-marker); border-radius: var(--border-radius-circle);
  display: grid; place-items: center; background: var(--theme-surface-muted); color: var(--theme-text-muted); }
/* O traço do DS viaja com o componente, não com o contêiner. Antes vinha de
   `.atr-feed svg`, então o item só desenhava certo dentro do painel — o card
   Atividades da Avaliação, que usa o mesmo item fora de .atr-feed, saía com
   os ícones preenchidos. */
.atr-feed__dot svg { width: var(--log-icon); height: var(--log-icon);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atr-feed__txt { min-width: 0; }
.atr-feed__txt p { font-size: var(--log-phrase-size); line-height: 1.45; color: var(--theme-text-heading); }
.atr-feed__txt p b { font-weight: 800; }
.atr-feed__meta { display: block; margin-top: 3px; font-size: var(--log-time-size); color: var(--color-surface-pure); font-weight: var(--log-time-weight); }

.atr-feed__item--avaliacao .atr-feed__dot { background: var(--color-accent-tinted); color: var(--color-accent-dark); }
.atr-feed__item--finalizou-aula .atr-feed__dot,
.atr-feed__item--finalizou-atr .atr-feed__dot,
.atr-feed__item--turma-concluiu .atr-feed__dot { background: var(--color-success-tinted); color: var(--color-success-darker); }
.atr-feed__item--turma-entrou .atr-feed__dot,
.atr-feed__item--juntou .atr-feed__dot { background: var(--color-primary-tinted); color: var(--color-primary-dark); }
.atr-feed__item--modo-aula .atr-feed__dot { background: var(--color-pastel-aqua); color: var(--color-accent-dark); }
.atr-feed__item--agendou .atr-feed__dot { background: var(--color-warning-tinted); color: var(--color-warning-darker); }
/* `registro` estava só proposto em logs-atividade.html. O card Atividades loga
   nota do professor, então o evento saiu do papel. Cor na mesma rampa `tinted`
   dos outros marcadores — o pastel puro pesava mais que os vizinhos. */
.atr-feed__item--registro .atr-feed__dot { background: color-mix(in srgb, var(--color-pink-pure) 14%, var(--color-essence-ivory)); color: var(--color-primary-dark); }

/* ============================================================
   Página dedicada: Gerenciar atribuição (one-pager)
   ============================================================ */
.view--gerenciar { padding-bottom: 48px; }
.gz svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gz__topbar { margin-bottom: 14px; }
.gz__back { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--theme-text-muted);
  background: #fff; border: 1px solid var(--theme-panel-border); padding: 8px 14px 8px 10px; border-radius: var(--border-radius-pill);
  transition: border-color var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.gz__back:hover { border-color: var(--theme-border-subtle); color: var(--theme-text-heading); box-shadow: var(--theme-card-shadow); }
.gz__back svg { width: 16px; height: 16px; }

.gz__hero { padding: 4px 0 20px; margin-bottom: 22px; border-bottom: 1px solid var(--color-surface-pale); }
.gz__hero-chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gz__hero-title { font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.02em; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.08; color: var(--theme-text-heading); }
.gz__hero-sub { margin-top: 8px; font-size: 14px; color: var(--color-surface-pure); font-weight: 600; }

.gz__grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 22px; align-items: start; }
.gz__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.gz__rail { position: sticky; top: 18px; }

.gz-card { background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--theme-card-radius); box-shadow: var(--theme-card-shadow); padding: 20px 22px; }
.gz-card__foot { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.gz-soon { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-surface-pure);
  background: var(--theme-surface-muted); padding: 2px 8px; border-radius: var(--border-radius-pill); }

/* Prazos */
.gz-fields { display: flex; gap: 16px; flex-wrap: wrap; }
.gz-field { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; }
.gz-field > span { font-size: 12px; font-weight: 700; color: var(--theme-text-muted); }
.gz-field em { font-style: normal; font-weight: 600; color: var(--color-surface-soft); font-size: 11px; margin-left: 4px; }
.gz-field input { padding: 10px 12px; border: 1px solid var(--theme-border-subtle); border-radius: var(--border-radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--theme-text-heading); background: #fff; }
.gz-field input:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 1px; border-color: var(--color-accent-pure); }

/* Executores */
.gz-exec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gz-exec { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--theme-panel-border);
  border-radius: var(--border-radius-sm-14); background: var(--base-50); }
.gz-exec__av { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--border-radius-circle); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--theme-text-heading); box-shadow: 0 0 0 2px #fff, var(--lkt-shadow-level1); }
.gz-exec__av svg { width: 16px; height: 16px; }
.gz-exec__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gz-exec__id b { font-size: 14px; font-weight: 800; color: var(--theme-text-heading); }
.gz-exec__id span { font-size: 12px; color: var(--color-surface-pure); font-weight: 600; }
.gz-exec__rm { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--border-radius-circle); display: grid; place-items: center;
  color: var(--color-surface-soft); transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.gz-exec__rm svg { width: 20px; height: 20px; }
.gz-exec__rm:hover { background: var(--color-warning-tinted); color: var(--color-warning-darker); }
/* Sair: só na própria linha. Discreto em repouso, assume o tom de risco no hover —
   um atribuidor não remove o outro, cada um só sai de si. */
.gz-exec--self { border-color: var(--color-accent-pale); background: #fff; }
.gz-exec__sair { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 7px 13px; min-height: 36px; border-radius: var(--border-radius-pill);
  border: 1px solid var(--theme-panel-border); background: #fff;
  font-size: 12.5px; font-weight: 700; color: var(--color-surface-pure);
  transition: border-color var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease); }
.gz-exec__sair svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gz-exec__sair:hover { border-color: var(--color-error-pure); color: var(--color-error-pure); background: var(--color-error-tinted); }
.gz-exec__sair:focus-visible { outline: 2px solid var(--color-error-pure); outline-offset: 2px; }
/* turma executora clicável → leva ao detalhe da turma */
.gz-exec--link { cursor: pointer; transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.gz-exec--link:hover { border-color: var(--color-accent-soft); box-shadow: var(--theme-card-shadow); transform: translateY(-1px); }
.gz-exec--link .gz-exec__av { color: var(--theme-text-heading); }
.gz-exec--link .gz-exec__av svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gz-exec__chev { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--color-surface-soft); }
.gz-add { margin-top: 12px; padding: 14px; border: 1px dashed var(--theme-border-subtle); border-radius: var(--border-radius-sm-14); background: var(--base-50); }
.gz-add[hidden] { display: none; }
.gz-add__lbl { display: block; font-size: 12px; font-weight: 700; color: var(--color-surface-pure); margin-bottom: 10px; }
.gz-add__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gz-add__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--theme-border-subtle);
  border-radius: var(--border-radius-pill); background: #fff; font-size: 13px; font-weight: 700; color: var(--theme-text-heading);
  transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.gz-add__chip:hover { border-color: var(--base-400); box-shadow: var(--theme-card-shadow); transform: translateY(-1px); }
.gz-add__dot { width: 10px; height: 10px; border-radius: var(--border-radius-circle); }
.gz-add__empty { font-size: 13px; color: var(--color-surface-pure); }

/* Participação (suspender / sair) */
.gz-card--danger { border-color: var(--color-warning-pale); }
.gz-risk { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--color-surface-pale); }
.gz-risk__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gz-risk__txt b { font-size: 14px; font-weight: 800; color: var(--theme-text-heading); }
.gz-risk__txt span { font-size: 12.5px; color: var(--color-surface-pure); line-height: 1.45; max-width: 48ch; }
.gz-risk .btn { flex-shrink: 0; }
.gz-btn-exit { color: var(--color-warning-darker); background: #fff; border: 1px solid var(--color-warning-pale); }
.gz-btn-exit:hover { background: var(--color-warning-tinted); border-color: var(--color-warning-light); }

/* Histórico completo (reusa o componente do feed lateral) */
/* Histórico completo: mesmo DS:Log, só o recuo lateral muda (a superfície já
   tem padding próprio de card, então a lista não repete o dela). */
.gz-hist { display: flex; flex-direction: column; }

/* mini-modal de confirmação (ações de risco) */
.gz-confirm[hidden] { display: none; }
.gz-confirm { position: fixed; inset: 0; z-index: 180; display: flex; justify-content: center; align-items: flex-start; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.gz-confirm__backdrop { position: fixed; inset: 0; background: var(--theme-modal-overlay-bg); backdrop-filter: blur(var(--theme-modal-overlay-blur)); }
.gz-confirm__card { position: relative; z-index: 1; width: min(440px, 100%); margin: auto 0; background: #fff; border-radius: var(--border-radius-md);
  box-shadow: var(--theme-modal-shadow); padding: 26px 26px 22px; }
.gz-confirm__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 20px; color: var(--theme-text-heading); }
.gz-confirm__msg { margin-top: 10px; font-size: 14px; color: var(--color-surface-pure); line-height: 1.55; }
.gz-confirm__actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 10px; }
body.gz-confirm-open { overflow: hidden; }

/* Hero da one-pager: chips + CTA "Ver conteúdo completo" + status bar de conclusão */
.gz__hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gz__hero-cta { flex-shrink: 0; min-height: 44px; padding: 10px 18px; font-size: 14px; }
.gz__hero-cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gz__status { margin-top: 20px; max-width: 560px; }
.gz__status-lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--theme-text-muted); margin-bottom: 10px; }
.gz__status-lbl b { font-weight: 800; color: var(--theme-text-heading); }
/* barra: o % flutua acima do fim da porção concluída; track = branco super leve */
.gz__status-bar { position: relative; padding-top: 26px; }
.gz__status-pct { position: absolute; top: 0; transform: translateX(-50%); font-size: 15px; font-weight: 800; color: var(--color-accent-dark); white-space: nowrap; transition: left var(--motion-dur-fast) var(--motion-ease); }
.gz__status-track { height: 8px; border-radius: var(--border-radius-pill); background: #FFF; overflow: hidden; }
.gz__status-track i { display: block; height: 100%; border-radius: var(--border-radius-pill);
  background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); transition: width var(--motion-dur-fast) var(--motion-ease); }
.gz__status.is-complete .gz__status-pct { color: var(--color-success-darker); }
.gz__status.is-complete .gz__status-track i { background: var(--color-success-soft); }

/* CTA de finalização no cabeçalho do detalhe (conclusão = roxo, regra de ouro) */
.det-finalizar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* item "Sair do conteúdo" no menu de ações da aula (destrutivo = warning) */
.aula-actions__item--exit { color: var(--color-warning-darker); }
.aula-actions__item--exit:hover:not(:disabled) { background: var(--color-warning-tinted); }

/* ============================================================
   Modais de finalização (Finalizar Aula/Trilha/todas · sucesso · sair)
   Base: telas ~/Downloads/Atribuição. Conclusão = roxo; sair = warning.
   ============================================================ */
.finmod[hidden] { display: none; }
.finmod { position: fixed; inset: 0; z-index: 180; display: flex; justify-content: center; align-items: flex-start; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.finmod__backdrop { position: fixed; inset: 0; background: var(--theme-modal-overlay-bg); backdrop-filter: blur(var(--theme-modal-overlay-blur)); }
.finmod__card { position: relative; z-index: 1; width: min(440px, 100%); margin: auto 0; background: #fff; border-radius: var(--border-radius-md);
  box-shadow: var(--theme-modal-shadow); padding: 28px 28px 24px; display: flex; flex-direction: column; }
.finmod__icon { width: 56px; height: 56px; border-radius: var(--border-radius-sm-14); display: grid; place-items: center; margin-bottom: 18px; }
.finmod__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.finmod__icon--primary { background: var(--color-primary-tinted); color: var(--color-primary-pure); }
.finmod__icon--warn { background: var(--color-warning-tinted); color: var(--color-warning-darker); }
.finmod__kicker { font-family: var(--theme-font-family-heading); font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--color-surface-soft); margin-bottom: 6px; }
.finmod__kicker[hidden] { display: none; }
.finmod__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 22px; line-height: 1.16; color: var(--theme-text-heading); }
.finmod__sub { margin-top: 10px; font-size: 14px; color: var(--color-surface-pure); line-height: 1.55; }
.finmod__sub[hidden] { display: none; }
.finmod__chip { align-self: flex-start; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--theme-text-muted);
  border: 1px solid var(--theme-border-subtle); border-radius: var(--border-radius-pill); padding: 4px 12px; }
.finmod__chip[hidden] { display: none; }
.finmod__actions { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.finmod__primary { width: 100%; justify-content: center; gap: 8px; }
.finmod__primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.finmod__cancel { width: 100%; min-height: 48px; padding: 12px; font-size: 14px; font-weight: 700; color: var(--theme-text-muted);
  border-radius: var(--border-radius-sm); transition: background var(--motion-dur-fast) var(--motion-ease); }
.finmod__cancel:hover { background: var(--base-50); }
.finmod__link { align-self: center; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--color-accent-dark);
  text-decoration: underline; text-underline-offset: 2px; }
.finmod__link:hover { color: var(--color-accent-darker); }
.finmod__danger { width: 100%; justify-content: center; gap: 8px; color: #fff;
  background: var(--color-warning-darker); border: 1px solid var(--color-warning-darker); }
.finmod__danger:hover { background: var(--color-warning-deep); border-color: var(--color-warning-deep); }
.finmod__danger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.finmod-open { overflow: hidden; }
@media (max-width: 620px) {
  .gz__hero-top { flex-direction: column; }
  .gz__hero-cta { width: 100%; justify-content: center; }
}

/* opção "opcional" na legenda do painel de data limite (modal-assign) */
.assign__panel-opt { font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--color-surface-pure); background: var(--theme-surface-muted); padding: 2px 8px; border-radius: var(--border-radius-pill); margin-left: 6px; }

/* ============================================================
   Deck aberto, clicar numa trilha "abre" o baralho em aulas
   ============================================================ */
.deckx[hidden] { display: none; }
.deckx { position: fixed; inset: 0; z-index: 180; display: flex; justify-content: center; align-items: flex-start; padding: 20px; overflow-y: auto; overscroll-behavior: contain; --tile: var(--color-pastel-lavender); }
.deckx__backdrop { position: fixed; inset: 0; background: var(--theme-modal-overlay-bg); backdrop-filter: blur(var(--theme-modal-overlay-blur)); }
.deckx__panel { position: relative; z-index: 1; width: min(940px, 100%); margin: auto 0;
  display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 22px); padding: clamp(22px, 3vw, 32px);
  background: #fff; border-radius: var(--border-radius-lg); box-shadow: var(--theme-modal-shadow); }
.deckx__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.deckx__kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.deckx__type { gap: 5px; padding: 3px 10px; font-size: 12px; }
.deckx__type svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deckx__count { font-size: 12.5px; font-weight: 700; color: var(--color-surface-pure); }
.deckx__title { font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.015em; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.1; color: var(--theme-text-heading); }
.deckx__sub { margin-top: 6px; font-size: 13.5px; color: var(--color-surface-pure); line-height: 1.5; max-width: 56ch; }
.deckx__close { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--border-radius-sm); display: grid; place-items: center;
  background: var(--theme-surface-muted); color: var(--theme-text-muted); transition: background var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.deckx__close:hover { background: var(--color-surface-mist); transform: rotate(90deg); }
.deckx__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.deckx__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: clamp(12px, 1.6vw, 16px); }
.deckx-card { position: relative; display: flex; flex-direction: column; gap: 7px; text-align: left; min-height: 148px;
  padding: 15px 15px 14px 18px; border-radius: var(--border-radius-sm-plus); border: 1px solid var(--theme-panel-border); background: #fff;
  box-shadow: var(--theme-card-shadow); overflow: hidden; cursor: pointer;
  transition: transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease); }
.deckx-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tile); }
.deckx-card:hover { transform: translateY(-4px); box-shadow: var(--theme-shadow-lg); border-color: var(--theme-border-subtle); }
.deckx-card:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }
.deckx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deckx-card__n { width: 26px; height: 26px; border-radius: var(--border-radius-circle); display: grid; place-items: center;
  background: var(--theme-surface-muted); color: var(--theme-text-heading); font-size: 12.5px; font-weight: 800; }
.deckx-card__chk { width: 26px; height: 26px; border-radius: var(--border-radius-circle); display: grid; place-items: center;
  background: var(--color-success-tinted); color: var(--color-success-darker); }
.deckx-card__chk svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.deckx-card__min { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--color-surface-soft); }
.deckx-card__min svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deckx-card__label { font-family: var(--theme-font-family-heading); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-surface-soft); }
.deckx-card__title { font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.01em; font-size: 16px; line-height: 1.2; color: var(--theme-text-heading); flex: 1; }
.deckx-card__cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--color-accent-dark); margin-top: 2px; }
.deckx-card__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-dur-fast) var(--motion-ease); }
.deckx-card:hover .deckx-card__cta svg { transform: translateX(3px); }
/* Aula concluída = regra canônica ROXA (mesma de .module-tab.is-done na one-pager):
   primary-pure + branco + checkmark. NUNCA success/verde, este fica reservado a
   status de atribuição, feed e progresso. Ver design/MERGE-SPEC.md §"Estados de conclusão". */
.deckx-card.is-done { background: var(--color-primary-pure); border-color: var(--color-primary-pure); }
.deckx-card.is-done:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.deckx-card.is-done::before { background: rgba(255,255,255,.4); }
.deckx-card.is-done .deckx-card__title { color: #fff; }
.deckx-card.is-done .deckx-card__label,
.deckx-card.is-done .deckx-card__min { color: rgba(255,255,255,.8); }
.deckx-card.is-done .deckx-card__n { background: rgba(255,255,255,.18); color: #fff; }
.deckx-card.is-done .deckx-card__chk { background: rgba(255,255,255,.2); color: #fff; }
.deckx-card.is-done .deckx-card__cta { color: #fff; }
.deckx-card.is-locked { opacity: .55; cursor: default; }
.deckx-card.is-locked:hover { transform: none; box-shadow: var(--theme-card-shadow); border-color: var(--theme-panel-border); }
.deckx__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
body.deckx-open { overflow: hidden; }

/* ============================================================
   Modal de nível do professor (progressão)
   ============================================================ */
.modal__card--nivel { --modal-w: 600px; --modal-pad: clamp(24px, 3vw, 34px); }
.nivel { display: flex; flex-direction: column; gap: 22px; }
.nivel svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.nivel__head { display: flex; align-items: center; gap: 16px; }
.nivel__seal { width: 60px; height: 60px; flex-shrink: 0; border-radius: var(--border-radius-circle); display: grid; place-items: center;
  background: var(--seal, var(--color-pastel-lavender)); color: var(--theme-text-heading); box-shadow: var(--theme-card-shadow); }
.nivel__seal .level-seal__svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.nivel__kicker { font-family: var(--theme-font-family-heading); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-surface-soft); }
.nivel__title { font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.015em; font-size: clamp(24px, 3vw, 30px); line-height: 1.1; color: var(--theme-text-heading); margin-top: 2px; }
.nivel__blurb { margin-top: 5px; font-size: 13.5px; color: var(--color-surface-pure); line-height: 1.5; }

/* trilho de níveis */
.nivel-track { display: flex; align-items: flex-start; gap: 0; padding: 4px 6px; }
.nivel-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; flex-shrink: 0; --seal: var(--color-pastel-lavender); }
.nivel-step__medal { width: 44px; height: 44px; border-radius: var(--border-radius-circle); display: grid; place-items: center;
  background: var(--theme-surface-muted); color: var(--color-surface-soft); border: 2px solid var(--theme-panel-border); }
.nivel-step__seal { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.nivel-step__chk { width: 22px; height: 22px; }
.nivel-step__lbl { display: flex; flex-direction: column; gap: 1px; }
.nivel-step__lbl small { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-surface-soft); }
.nivel-step__lbl b { font-size: 13px; font-weight: 800; color: var(--theme-text-muted); }
.nivel-track__line { flex: 1; height: 2px; background: var(--color-surface-mist); margin: 22px 4px 0; border-radius: var(--border-radius-pill); }
.nivel-step.is-done .nivel-step__medal { background: var(--color-success-tinted); color: var(--color-success-darker); border-color: var(--color-success-pale); }
.nivel-step.is-current .nivel-step__medal { background: var(--seal); color: var(--theme-text-heading); border-color: #fff; box-shadow: 0 0 0 3px var(--seal), var(--lkt-shadow-level1); }
.nivel-step.is-current .nivel-step__lbl b { color: var(--theme-text-heading); }
.nivel-step.is-next { opacity: .65; }

/* próximo nível: barra + título */
.nivel__next { padding: 16px 18px; background: var(--base-50); border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-md); }
.nivel__next-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.nivel__next-h { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--theme-text-heading); }
.nivel__next-pct { font-size: 14px; font-weight: 800; color: var(--color-accent-dark); white-space: nowrap; }
.nivel__bar { height: 8px; border-radius: var(--border-radius-pill); background: var(--color-surface-mist); overflow: hidden; }
.nivel__bar i { display: block; height: 100%; width: 0; border-radius: var(--border-radius-pill);
  background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); }

/* grupos / critérios */
.nivel__groups { display: flex; flex-direction: column; gap: 18px; }
.nivel-group__h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.nivel-group__ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--border-radius-nano); display: grid; place-items: center; background: var(--color-pastel-lavender); color: var(--theme-text-heading); }
.nivel-group__ic svg { width: 17px; height: 17px; }
.nivel-group__t { font-family: var(--theme-font-family-heading); font-size: 14px; font-weight: 800; color: var(--theme-text-heading); }
.nivel-group__n { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--color-surface-pure); background: var(--theme-surface-muted); padding: 2px 9px; border-radius: var(--border-radius-pill); }
.nivel-group__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nivel-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: var(--border-radius-sm); border: 1px solid var(--color-surface-pale); background: #fff; }
.nivel-item__box { width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--border-radius-circle); display: grid; place-items: center; margin-top: 1px; }
.nivel-item__ic { width: 14px; height: 14px; }
.nivel-item__lbl { font-size: 13.5px; line-height: 1.45; color: var(--theme-text-heading); font-weight: 600; }
.nivel-item.is-done { background: var(--color-success-tinted); border-color: var(--color-success-pale); }
.nivel-item.is-done .nivel-item__box { background: var(--color-success-pure); color: #fff; }
.nivel-item.is-done .nivel-item__lbl { color: var(--color-success-deep); }
.nivel-item.is-todo .nivel-item__box { background: var(--theme-surface-muted); color: var(--color-surface-soft); }
.nivel-item.is-todo .nivel-item__lbl { color: var(--theme-text-muted); }

.nivel__foot { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-surface-soft); font-weight: 600; }
.nivel__foot-ic { width: 12px; height: 12px; color: var(--base-400); }

@media (max-width: 560px) {
  .nivel-step__lbl b { font-size: 11.5px; }
  .nivel-track__line { margin-top: 22px; }
}

/* Responsivo */
@media (max-width: 1080px) {
  .painel-grid { grid-template-columns: 1fr; }
  .painel-rail { position: static; order: 2; }
  .gz__grid { grid-template-columns: 1fr; }
  .gz__rail { position: static; }
}
@media (max-width: 620px) {
  .atr-card__title { font-size: 18px; }
  .atr-card__main { padding: 16px 16px 16px 18px; }
  .atr-card__facts { gap: 10px 18px; }
  .atr-card__actions { flex-wrap: wrap; }
  .atr-act { flex: 1 1 42%; }
  .atr-act--primary { flex-basis: 100%; }
  /* Escopo e lote empilham: lado a lado, o botão espremeria os dois rótulos da
     fileira até eles se atropelarem em 375px. */
  .painel-toolwrap { align-self: stretch; margin-inline: -4px; padding-inline: 4px; }
  .painel-toolwrap__top { flex-direction: column; align-items: stretch; gap: 10px; }
  /* Empilhado, o botão ocupa a linha inteira: o `margin-left:auto` do desktop
     encolheria a caixa para o tamanho do rótulo. */
  .painel-lote { justify-content: center; margin-left: 0; }
  .painel-segment { display: flex; align-self: stretch; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .painel-segment::-webkit-scrollbar { display: none; }
  .painel-seg { flex: 0 0 auto; justify-content: center; padding: 9px 12px; }
  .deckx__cards { grid-template-columns: repeat(2, 1fr); }
  .gz-risk { flex-direction: column; align-items: flex-start; }
  .gz-risk .btn { align-self: stretch; justify-content: center; }
}
@media (max-width: 420px) {
  .deckx__cards { grid-template-columns: 1fr; }
}

/* ============================================================
   Detalhe da trilha, menu de ações por aula + estado de conclusão
   ============================================================ */
.aula-panel__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 14px; }
.aula-panel__heading { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.aula-actions { position: relative; flex-shrink: 0; }
.aula-actions__btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
  color: var(--theme-text-heading); background: #fff; border: 1px solid var(--theme-border-subtle);
  padding: 9px 15px; border-radius: var(--border-radius-sm); transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.aula-actions__btn:hover { border-color: var(--base-400); box-shadow: var(--theme-card-shadow); }
.aula-actions__btn svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.aula-actions__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 236px;
  background: #fff; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-14);
  box-shadow: var(--theme-shadow-lg); padding: 6px; }
.aula-actions__menu[hidden] { display: none; }
.aula-actions__item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  font-size: 14px; font-weight: 600; color: var(--theme-text-heading); padding: 10px 12px; border-radius: var(--border-radius-nano);
  transition: background var(--motion-dur-fast) var(--motion-ease); }
.aula-actions__item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.aula-actions__item:hover:not(:disabled) { background: var(--base-50); }
.aula-actions__item--finish { color: var(--color-success-darker); }
.aula-actions__item--soon { color: var(--color-surface-soft); cursor: default; }
.aula-actions__soon { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  background: var(--theme-surface-muted); color: var(--color-surface-pure); padding: 2px 8px; border-radius: var(--border-radius-pill); }

/* Estados padronizados do botão de aula (detalhe da trilha + módulos da formação):
   finalizada → fundo primary-pure + branco + checkmark ; ativa/clicada → base-800 + branco
   (vence o fundo, mantém o checkmark) ; não iniciada → padrão. */
.module-tab.is-done { background: var(--color-primary-pure); border-color: var(--color-primary-pure); color: #fff; }
.module-tab.is-done:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.module-tab.is-done.is-active { background: var(--theme-text-heading); border-color: var(--theme-text-heading); color: #fff; box-shadow: var(--theme-panel-shadow); }
/* especificidade acima de `.module-tab:not(.is-locked) svg { display:none }` (l.866) */
.module-tab.is-done .module-tab__done { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 620px) {
  .aula-panel__head { flex-direction: column; }
  .aula-actions { align-self: flex-start; }
  .aula-actions__menu { right: auto; left: 0; }
}

/* ============================================================= */
/* ===============  ONBOARDING DO PROFESSOR  =================== */
/* Fluxo: Login → Perfil → Enriquecimento → Níveis → Trilhas      */
/* Tema lekto_v3 · somente tokens/vars + baseline tolerada        */
/* ============================================================= */

.onb-body { margin: 0; background: var(--color-surface-deepest); font-family: var(--theme-font-family-base); color: var(--theme-text-heading); }
.onb { position: relative; min-height: 100svh; }

/* --- sistema de cenas --- */
.onb-scene {
  position: fixed; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
}
.onb-scene.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* botões extra do fluxo (reaproveitam .btn) */
.btn--primary { background: var(--theme-brand-primary); color: #FFF; box-shadow: var(--lkt-shadow-level4); }
.btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--theme-modal-shadow); }
.btn--light { background: #FFF; color: var(--theme-text-heading); box-shadow: var(--lkt-shadow-level4); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--theme-modal-shadow); }
.i-arrow { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* chips extra */
.chip--accentlight { background: var(--color-accent-tinted); color: var(--color-accent-dark); }
.chip--ghost { background: transparent; color: #FFF; border: 1.5px solid rgba(255,255,255,.4); }

/* campos de formulário do fluxo */
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field__label { font-size: 14px; font-weight: 700; color: var(--color-surface-pure); }
.field__label--row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field__link { color: var(--color-accent-dark); font-weight: 700; text-decoration: none; }
.field__link:hover { text-decoration: underline; }
.field__wrap { position: relative; display: flex; align-items: center; }
.field__input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 16px; color: var(--theme-text-heading);
  /* papéis de input do contrato — valores idênticos sob o tema lekto */
  padding: 14px 16px; border: var(--border-width-hairline-plus) solid var(--theme-input-border);
  border-radius: var(--theme-input-radius); background: var(--theme-input-bg); transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease);
}
.field__wrap .field__input { padding-right: 48px; }
.field__input::placeholder { color: var(--color-surface-soft); }
.field__input:focus { outline: none; border-color: var(--color-accent-pure); box-shadow: var(--theme-input-focus-ring); }
.field__eye { position: absolute; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; color: var(--color-surface-soft); }
.field__eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field__adorn { position: absolute; left: 12px; display: grid; place-items: center; color: var(--color-primary-pure); pointer-events: none; }
.field__adorn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.field--light .field__wrap .field__input { padding-left: 44px; }

/* ============== CENA 1 · LOGIN ============== */
.onb-scene--login { display: grid; grid-template-columns: 1.05fr 1fr; background: #FFF; }
.login-brand { position: relative; overflow: hidden; }
.login-brand__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login-brand__veil { position: absolute; inset: 0; background:
  linear-gradient(120deg, rgba(37,8,53,.85) 0%, rgba(37,8,53,.55) 52%, rgba(37,8,53,.35) 100%); }
.login-brand__inner { position: absolute; left: clamp(28px,5vw,64px); bottom: clamp(36px,8vh,72px); color: #FFF; }
.login-brand__logo { height: 38px; filter: brightness(0) invert(1); }
.login-brand__tagline { margin: 16px 0 0; font-size: clamp(15px,1.4vw,18px); font-weight: 600; color: rgba(255,255,255,.85); max-width: 22ch; }
.login-pane { display: grid; place-items: center; padding: 40px 24px; }
.login-card { width: min(420px, 100%); }
.login-card__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: clamp(30px,3.6vw,40px); letter-spacing: -.01em; color: var(--theme-text-heading); margin: 0; }
.login-card__lead { margin: 8px 0 30px; color: var(--color-surface-pure); font-size: 16px; }
.login-card__submit { width: 100%; justify-content: center; margin-top: 6px; }
/* estado de erro de autenticação (base: 1.1.1) */
.login-card.is-error .field__input { border-color: var(--color-error-pure); }
.login-card.is-error .field__input:focus { border-color: var(--color-error-pure); box-shadow: 0 0 0 4px var(--color-error-tinted); }
.login-card__error { margin: 0 0 18px; }
.login-card__errmsg { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--color-error-pure); }
.login-card__support { display: inline-block; margin-top: 8px; font-size: 14px; }

/* ============== CENA 2 · PERFIL ============== */
.onb-scene--profile { display: grid; place-items: center; padding: 24px; }
.profile-stage { position: absolute; inset: 0; background: var(--grain), radial-gradient(120% 140% at 50% -10%, #4A1A66 0%, var(--color-surface-deep) 55%, var(--color-surface-deepest) 100%); }
.profile-card { position: relative; width: min(560px, 100%); background: #FFF; border-radius: var(--border-radius-md); padding: clamp(28px,4vw,40px); box-shadow: var(--theme-modal-shadow); }
.profile-card__close { position: absolute; top: 22px; right: 22px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; color: var(--theme-text-heading); border-radius: var(--border-radius-nano); }
.profile-card__close:hover { background: var(--theme-surface-muted); }
.profile-card__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.profile-card__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--border-radius-sm); background: var(--color-primary-tinted); color: var(--color-primary-pure); margin-bottom: 20px; }
.profile-card__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-card__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: clamp(24px,3vw,30px); letter-spacing: -.01em; margin: 0 0 22px; color: var(--theme-text-heading); }
.profile-row { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; background: #FFF; border: 1.5px solid var(--theme-panel-border); border-radius: var(--border-radius-xs); padding: 18px 20px; margin-bottom: 14px; cursor: pointer; transition: transform var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.profile-row:hover { transform: translateY(-2px); border-color: var(--color-accent-soft); box-shadow: var(--theme-panel-shadow); }
.profile-row.is-primary { border-color: var(--color-accent-pale); }
.profile-row__icon { display: grid; place-items: center; width: 40px; flex: 0 0 40px; color: var(--color-primary-pure); }
.profile-row__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.profile-row__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.profile-row__name { font-family: var(--theme-font-family-heading); font-weight: 700; font-size: 22px; color: var(--theme-text-heading); }
.profile-row__chev { width: 24px; height: 24px; fill: none; stroke: var(--base-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============== CENA 3 · ENRIQUECIMENTO (light mode · manchas em degradê) ============== */
.onb-scene--enrich { background: var(--color-accent-tinted); color: var(--theme-text-heading); }
.enrich-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(172deg, var(--color-accent-pale) 0%, #FFF 50%, var(--color-accent-tinted) 100%); }
.enrich-blob { position: absolute; border-radius: var(--border-radius-circle); filter: blur(74px); will-change: transform; }
.enrich-blob--1 { width: 60vw; height: 60vw; left: -18vw; bottom: -22vw; background: var(--color-accent-soft); opacity: .85; }
.enrich-blob--2 { width: 52vw; height: 52vw; right: -16vw; bottom: -18vw; background: var(--color-pastel-lavender); opacity: .78; }
.enrich-blob--3 { width: 66vw; height: 46vw; left: 50%; bottom: -12vw; transform: translateX(-50%); background: var(--color-pastel-blush); opacity: .68; }
.enrich-blob--4 { width: 44vw; height: 44vw; right: 4vw; top: -18vw; background: var(--color-accent-pale); opacity: .9; }
.enrich-grain { position: absolute; inset: 0; background: var(--grain); opacity: .5; mix-blend-mode: soft-light; pointer-events: none; }

.enrich-top { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px,4vw,48px); }
.enrich-top__logo { height: 26px; }
.enrich-skip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--color-surface-pure); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.enrich-skip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.enrich-skip:hover { color: var(--theme-text-heading); }
.enrich-wrap { position: relative; z-index: 2; width: min(620px, 100%); margin: 0 auto; padding: 8px clamp(20px,4vw,24px) 64px; }
.enrich-progress { height: 5px; border-radius: var(--border-radius-pill); background: rgba(34,10,51,.12); overflow: hidden; margin-bottom: 28px; }
.enrich-progress i { display: block; height: 100%; width: 20%; border-radius: var(--border-radius-pill); background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); transition: width var(--motion-dur-base) var(--motion-ease); }
.enrich-greet { display: flex; gap: 13px; align-items: center; margin-bottom: 24px; }
.enrich-greet__avatar { position: relative; flex: 0 0 44px; }
.enrich-greet__avatar img { width: 44px; height: 44px; border-radius: var(--border-radius-circle); object-fit: cover; background: #FFF; box-shadow: var(--theme-card-shadow); }
.enrich-greet__emoji { position: absolute; right: -6px; bottom: -6px; font-size: 16px; filter: drop-shadow(0 2px 4px rgba(37,8,53,.35)); font-style: normal; }
.enrich-greet__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-surface-pure); }
.enrich-greet__text strong { color: var(--theme-text-heading); }

.enrich-step { display: none; }
.enrich-step.is-active { display: block; }
.enrich-q__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: clamp(26px,3.6vw,40px); letter-spacing: -.025em; margin: 0 0 8px; color: var(--theme-text-heading); }
.enrich-q__sub { margin: 0 0 26px; color: var(--color-surface-pure); font-size: 15.5px; }

.enrich-contact { background: #FFF; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-plus); padding: 22px; color: var(--theme-text-heading); box-shadow: var(--theme-panel-shadow); }
.enrich-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--color-surface-pure); cursor: pointer; }
.enrich-terms input { position: absolute; opacity: 0; width: 0; height: 0; }
.enrich-terms__box { flex: 0 0 20px; width: 20px; height: 20px; border: 1.5px solid var(--theme-border-subtle); border-radius: var(--border-radius-quark); display: grid; place-items: center; transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease); }
.enrich-terms__box svg { width: 14px; height: 14px; fill: none; stroke: #FFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.enrich-terms input:checked + .enrich-terms__box { background: var(--color-accent-pure); border-color: var(--color-accent-pure); }
.enrich-terms input:checked + .enrich-terms__box svg { opacity: 1; }
.enrich-terms a { color: var(--color-accent-dark); font-weight: 700; }

.enrich-pact__head { display: flex; align-items: center; gap: 8px; margin: 24px 0 12px; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; color: var(--theme-text-muted); }
.enrich-pact__head svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--color-primary-pure); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.enrich-pact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.enrich-pact li { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.72); border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-14); padding: 12px 16px; font-size: 14px; line-height: 1.45; color: var(--theme-text-muted); backdrop-filter: blur(4px); }
.enrich-pact li svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--color-success-pure); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }

/* listas de opção (ano / componente), light */
.enrich-list { display: grid; gap: 12px; }
.enrich-opt { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.7); border: 1.5px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-14); padding: 16px 18px; cursor: pointer; color: var(--theme-text-heading); backdrop-filter: blur(6px); transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.enrich-opt:hover { border-color: var(--color-accent-soft); transform: translateY(-1px); box-shadow: var(--theme-card-shadow); }
.enrich-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.enrich-opt__box { flex: 0 0 22px; width: 22px; height: 22px; border: 1.5px solid var(--theme-border-subtle); border-radius: var(--border-radius-quark); display: grid; place-items: center; position: relative; transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease); }
.enrich-opt__box::after { content: ""; width: 12px; height: 7px; border-left: 2.4px solid #FFF; border-bottom: 2.4px solid #FFF; transform: rotate(-45deg) scale(0); transform-origin: center; margin-top: -3px; transition: transform var(--motion-dur-fast) var(--motion-ease); }
.enrich-opt.is-checked { background: #FFF; border-color: var(--color-accent-pure); color: var(--theme-text-heading); box-shadow: var(--theme-panel-shadow); }
.enrich-opt.is-checked .enrich-opt__box { background: var(--color-accent-pure); border-color: var(--color-accent-pure); }
.enrich-opt.is-checked .enrich-opt__box::after { transform: rotate(-45deg) scale(1); }
.enrich-opt__icon { display: grid; place-items: center; color: var(--color-surface-soft); transition: color var(--motion-dur-fast) var(--motion-ease); }
.enrich-opt.is-checked .enrich-opt__icon { color: var(--color-accent-dark); }
.enrich-opt__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.enrich-opt__label { flex: 1; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.enrich-opt__chev { width: 20px; height: 20px; fill: none; stroke: var(--base-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.enrich-opt .chip--ghost { color: var(--color-surface-pure); border-color: var(--theme-border-subtle); }
.enrich-opt.is-checked .chip--ghost { color: var(--color-accent-dark); border-color: var(--color-accent-soft); }

/* turmas, tiles selecionáveis (light) */
.turmas { display: grid; gap: 14px; }
.turmas-year { background: rgba(255,255,255,.55); border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-plus); padding: 18px; backdrop-filter: blur(6px); }
.turmas-year__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.turmas-year__label { display: grid; }
.turmas-year__label b { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 18px; color: var(--theme-text-heading); }
.turmas-year__label i { font-style: normal; font-size: 12.5px; color: var(--color-surface-soft); margin-top: 1px; }
.turmas-all { border: 1px solid var(--theme-panel-border); background: #FFF; color: var(--theme-text-muted); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: var(--border-radius-pill); cursor: pointer; white-space: nowrap; transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.turmas-all:hover { border-color: var(--color-accent-soft); color: var(--color-accent-dark); }
.turmas-all.is-all { background: var(--color-accent-pure); border-color: var(--color-accent-pure); color: #FFF; }
.turmas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; }
.turma { display: flex; align-items: center; gap: 11px; text-align: left; background: #FFF; border: 1.5px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-14); padding: 10px 12px; cursor: pointer; color: var(--theme-text-heading); transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.turma:hover { border-color: var(--color-accent-soft); transform: translateY(-1px); box-shadow: var(--theme-card-shadow); }
.turma__badge { flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--border-radius-circle); display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--theme-surface-muted); color: var(--color-surface-pure); transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.turma__txt { flex: 1; display: grid; line-height: 1.12; min-width: 0; }
.turma__txt b { font-weight: 700; font-size: 15px; }
.turma__txt i { font-style: normal; font-size: 11px; letter-spacing: .04em; color: var(--color-surface-soft); margin-top: 2px; }
.turma__tick { flex: 0 0 20px; width: 20px; height: 20px; border-radius: var(--border-radius-circle); display: grid; place-items: center; background: var(--theme-surface-muted); transition: background var(--motion-dur-fast) var(--motion-ease); }
.turma__tick svg { width: 13px; height: 13px; fill: none; stroke: #FFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--motion-dur-fast) var(--motion-ease); }
.turma.is-on { background: #FFF; border-color: var(--color-accent-pure); box-shadow: var(--theme-panel-shadow); }
.turma.is-on .turma__badge { background: var(--color-accent-tinted); color: var(--color-accent-dark); }
.turma.is-on .turma__tick { background: var(--color-accent-pure); }
.turma.is-on .turma__tick svg { opacity: 1; }
.turmas-summary { text-align: center; margin: 20px 0 0; }
.turmas-summary__pill { display: inline-block; background: #FFF; border: 1px solid var(--theme-panel-border); color: var(--theme-text-muted); font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: var(--border-radius-pill); box-shadow: var(--theme-card-shadow); }
.turmas-summary__pill b { color: var(--color-accent-dark); }

/* finalização, light */
.enrich-step--final { text-align: center; padding-top: 16px; }
.enrich-final__avatar img { width: 72px; height: 72px; border-radius: var(--border-radius-circle); object-fit: cover; background: #FFF; box-shadow: var(--theme-panel-shadow); }
.enrich-final__bar { width: min(320px, 80%); height: 5px; border-radius: var(--border-radius-pill); background: rgba(34,10,51,.12); overflow: hidden; margin: 28px auto; }
.enrich-final__bar i { display: block; height: 100%; width: 0; border-radius: var(--border-radius-pill); background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); }
.enrich-final__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: clamp(26px,3.6vw,38px); line-height: 1.12; letter-spacing: -.02em; margin: 0; color: var(--color-surface-darker); }
.enrich-final__title strong { color: var(--theme-text-heading); }
.enrich-final__hint { margin: 14px 0 0; color: var(--color-surface-soft); font-size: 15px; }

.enrich-foot { display: grid; gap: 14px; justify-items: center; margin-top: 30px; }
/* CTA assinatura, pílula branca + quadrado escuro com seta (ref. exemplo) */
.enrich-next { width: 100%; max-width: 420px; justify-content: space-between; padding: 8px 8px 8px 24px; min-height: 56px; border-radius: var(--border-radius-pill); background: #FFF; color: var(--theme-text-heading); box-shadow: var(--theme-shadow-lg); }
.enrich-next:hover { transform: translateY(-2px); box-shadow: var(--lkt-shadow-level4); }
.enrich-next .i-arrow { width: 40px; height: 40px; flex: 0 0 40px; padding: 9px; box-sizing: border-box; background: var(--theme-text-heading); color: #FFF; border-radius: var(--border-radius-sm); }
.enrich-back, .enrich-optout { border: 0; background: transparent; color: var(--color-surface-pure); font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.enrich-optout { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.enrich-back:hover, .enrich-optout:hover { color: var(--theme-text-heading); }

/* ============== CENA 4 · NÍVEIS ============== */
.onb-scene--levels { overflow: hidden; background: linear-gradient(160deg, var(--color-accent-soft) 0%, var(--color-pastel-blush) 48%, var(--color-pastel-lavender) 100%); }
.levels-aurora { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.levels-grain { position: absolute; inset: 0; z-index: 1; background: var(--grain); opacity: .5; mix-blend-mode: soft-light; pointer-events: none; }
.levels-skip { position: absolute; top: 24px; right: clamp(20px,4vw,40px); z-index: 6; display: inline-flex; align-items: center; gap: 6px; border: 0; background: rgba(255,255,255,.4); backdrop-filter: blur(6px); color: var(--theme-text-heading); font: inherit; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: var(--border-radius-pill); cursor: pointer; }
.levels-skip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.levels-deck { position: absolute; inset: 0; z-index: 2; }
.lslide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; padding: clamp(32px,6vw,80px); }
.lslide.is-active { opacity: 1; visibility: visible; }

.lslide__intro { max-width: 760px; text-align: center; }
.lslide__eyebrow { display: inline-block; font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary-deep); background: rgba(255,255,255,.45); padding: 7px 16px; border-radius: var(--border-radius-pill); }
.lslide__bigtitle { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: clamp(40px,7vw,76px); line-height: 1.02; letter-spacing: -.025em; color: var(--theme-text-heading); margin: 22px 0 0; }
.lslide__bigtitle em { font-style: normal; color: var(--color-primary-pure); }
.lslide__lead { max-width: 52ch; margin: 22px auto 32px; font-size: clamp(16px,1.6vw,19px); line-height: 1.6; color: rgba(37,8,53,.78); }

.lslide--lvl { grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,72px); align-items: center; max-width: 1180px; margin: 0 auto; }
.lslide__art { position: relative; display: grid; place-items: center; }
.lslide__art img { width: min(440px, 78%); aspect-ratio: 1040/1291; object-fit: contain; border-radius: var(--border-radius-lg); background: rgba(255,255,255,.55); box-shadow: var(--theme-modal-shadow); padding: 10px; }
.lslide__copy { max-width: 460px; }
.lslide__level { display: inline-block; font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary-pure); background: rgba(255,255,255,.55); padding: 6px 14px; border-radius: var(--border-radius-pill); }
.lslide__name { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: clamp(44px,6.5vw,80px); line-height: .98; letter-spacing: -.025em; color: var(--theme-text-heading); margin: 16px 0 0; }
.lslide__desc { margin: 18px 0 28px; font-size: clamp(16px,1.7vw,20px); line-height: 1.55; color: rgba(37,8,53,.85); max-width: 40ch; }
.lslide__here { position: absolute; top: clamp(24px,5vh,56px); left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; letter-spacing: .04em; color: #FFF; background: var(--color-primary-pure); padding: 9px 18px; border-radius: var(--border-radius-pill); box-shadow: var(--lkt-shadow-level4); }
.lslide__here::before { content: ""; width: 8px; height: 8px; border-radius: var(--border-radius-circle); background: var(--color-pastel-mint); }

/* barra de navegação dos níveis: setas manuais + stepper com contagem de 5s */
.levels-nav { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 14px; }
.levels-nav.is-hidden { display: none; }
.levels-arrow { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 0; border-radius: var(--border-radius-circle); background: rgba(255,255,255,.55); color: var(--theme-text-heading); cursor: pointer; box-shadow: var(--theme-card-shadow); backdrop-filter: blur(6px); transition: background var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.levels-arrow:hover { background: #FFF; transform: translateY(-1px); }
.levels-arrow:disabled { opacity: .4; cursor: default; transform: none; }
.levels-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.levels-stepper { display: flex; align-items: center; gap: 10px; }
.lstep { position: relative; width: 34px; height: 8px; border: 0; border-radius: var(--border-radius-pill); background: rgba(37,8,53,.35); cursor: pointer; padding: 0; transition: width var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.lstep::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 40px; }
.lstep:hover { transform: translateY(-1px); }
.lstep.is-active { width: 54px; }
.lstep i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--border-radius-pill); background: var(--color-primary-pure); }
.lstep:focus-visible, .levels-arrow:focus-visible { outline: 2px solid var(--color-primary-pure); outline-offset: 3px; }

/* ============== CENA 5 · TRILHAS ============== */
.onb-scene--trilhas { background: var(--theme-surface-muted); }
.trilhas-branch { width: min(1200px, 100%); margin: 0 auto; padding: clamp(28px,5vw,64px) clamp(20px,4vw,40px) 64px; }
.trilhas-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.trilhas-head__eyebrow { margin-bottom: 16px; }
.trilhas-head__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: clamp(30px,4.4vw,52px); line-height: 1.04; letter-spacing: -.02em; color: var(--theme-text-heading); margin: 0; }
.trilhas-head__lead { margin: 14px auto 0; max-width: 56ch; color: var(--color-surface-pure); font-size: 16px; line-height: 1.55; }
.trilhas-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(20px,3vw,32px); align-items: start; }

/* demo "vídeo", mock GSAP das telas reais */
.demo { display: flex; flex-direction: column; gap: 14px; }
.demo__frame { position: relative; border-radius: var(--border-radius-lg); overflow: hidden; background: var(--color-surface-deep); box-shadow: var(--theme-modal-shadow); border: 1px solid var(--theme-panel-border); }
.demo__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--color-surface-deep); }
.demo__bar i { width: 11px; height: 11px; border-radius: var(--border-radius-circle); background: rgba(255,255,255,.3); }
.demo__url { margin-left: 12px; font-size: 12px; color: rgba(255,255,255,.62); background: rgba(255,255,255,.08); padding: 4px 12px; border-radius: var(--border-radius-pill); }
.demo__screens { position: relative; aspect-ratio: 16/10; background: var(--theme-surface-muted); }
.demo__screen { position: absolute; inset: 0; opacity: 0; }
.demo__screen.is-active { opacity: 1; }
.demo__cursor { position: absolute; z-index: 8; width: 22px; height: 22px; top: 50%; left: 50%; pointer-events: none; filter: drop-shadow(0 2px 5px rgba(15,1,26,.55)); }
.demo__cursor::before { content: ""; display: block; width: 0; height: 0; border-left: 7px solid #FFF; border-right: 7px solid transparent; border-bottom: 7px solid #FFF; border-top: 0; transform: rotate(-37deg); }
.demo__cap { display: flex; align-items: center; gap: 14px; }
.demo__dots { display: flex; gap: 7px; }
.demo__dots b { width: 8px; height: 8px; border-radius: var(--border-radius-circle); background: var(--color-surface-light); transition: background var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.demo__dots b.is-active { background: var(--color-primary-pure); transform: scale(1.25); }
.demo__play { width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: var(--border-radius-circle); background: var(--theme-text-heading); color: #FFF; display: grid; place-items: center; cursor: pointer; }
.demo__play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo__play svg[data-play] { fill: currentColor; stroke: none; }
.demo__label { font-weight: 700; font-size: 15px; color: var(--theme-text-muted); }

/* telas internas do mock */
.mock { position: absolute; inset: 0; padding: 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; font-family: var(--theme-font-family-base); }
.mock--dark { background: var(--grain), linear-gradient(150deg, #4A1A66, var(--color-surface-deep) 70%, var(--color-surface-deepest)); color: #FFF; }
.mock--light { background: var(--base-50); }
.mock__eyebrow { font-family: var(--theme-font-family-heading); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mock--dark .mock__eyebrow { color: var(--color-pastel-lavender); }
.mock--light .mock__eyebrow { color: var(--color-primary-pure); }
.mock__h { font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.01em; margin: 0; line-height: 1.08; }
.mock--dark .mock__h { color: #FFF; font-size: clamp(20px,3.2vw,30px); }
.mock--light .mock__h { color: var(--theme-text-heading); font-size: clamp(18px,2.8vw,26px); }
.mock__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2px; }
.mock__card { background: #FFF; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-plus); padding: 14px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--theme-card-shadow); }
.mock__tile { height: 56px; border-radius: var(--border-radius-sm); background: var(--tile, var(--color-pastel-lavender)); display: grid; place-items: center; }
.mock__tile svg { width: 26px; height: 26px; fill: none; stroke: var(--theme-text-heading); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.mock__line { height: 9px; border-radius: var(--border-radius-pill); background: var(--color-surface-mist); }
.mock__line.sm { width: 55%; }
.mock__bar { height: 7px; border-radius: var(--border-radius-pill); background: var(--theme-surface-muted); overflow: hidden; }
.mock__bar i { display: block; height: 100%; border-radius: var(--border-radius-pill); background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); }
.mock__player { flex: 1; border-radius: var(--border-radius-sm); overflow: hidden; position: relative; background: var(--color-surface-deepest); display: grid; place-items: center; }
.mock__player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.mock__playbtn { position: relative; width: 56px; height: 56px; border-radius: var(--border-radius-circle); background: rgba(255,255,255,.85); display: grid; place-items: center; }
.mock__playbtn::before { content: ""; width: 0; height: 0; border-left: 16px solid var(--theme-text-heading); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.mock__rows { display: grid; gap: 10px; margin-top: 4px; }
.mock__row { display: flex; align-items: center; gap: 12px; background: #FFF; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-14); padding: 11px 13px; }
.mock__row .dot { flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--border-radius-nano); background: var(--tile, var(--color-pastel-aqua)); display: grid; place-items: center; }
.mock__row .dot svg { width: 17px; height: 17px; fill: none; stroke: var(--theme-text-heading); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mock__row .grow { flex: 1; display: grid; gap: 6px; }
.mock__chip { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--border-radius-pill); background: var(--color-pastel-mint); color: var(--theme-text-heading); }
.mock__stars { display: flex; gap: 3px; }
.mock__stars svg { width: 16px; height: 16px; fill: var(--color-warning-soft); stroke: none; }

/* tour + atribuições */
.trilhas-side { display: flex; flex-direction: column; gap: 12px; }
.trilhas-side__eyebrow { font-family: var(--theme-font-family-heading); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--theme-text-muted); }
.tour { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tour li { display: flex; gap: 13px; align-items: flex-start; padding: 13px 15px; border-radius: var(--border-radius-sm-14); border: 1.5px solid var(--theme-panel-border); background: #FFF; transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease); }
.tour li.is-active { border-color: var(--color-accent-soft); box-shadow: var(--theme-panel-shadow); background: var(--color-accent-tinted); }
.tour__n { flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--border-radius-circle); display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--color-primary-tinted); color: var(--color-primary-pure); }
.tour li.is-active .tour__n { background: var(--color-primary-pure); color: #FFF; }
.tour__b { display: grid; gap: 2px; }
.tour__b b { font-size: 15px; color: var(--theme-text-heading); }
.tour__b span { font-size: 13.5px; color: var(--color-surface-pure); line-height: 1.4; }

/* trilhas atribuídas, faixa full-width abaixo do tour */
.trilhas-assign { margin-top: clamp(28px,4vw,44px); }
.trilhas-assign__head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 16px; }
.trilhas-assign__head b { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: clamp(20px,2.4vw,26px); letter-spacing: -.01em; color: var(--theme-text-heading); }
.trilhas-assign__head span { font-size: 14px; color: var(--color-surface-pure); }
.trilhas-assign__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 14px; }
.tcard { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--border-radius-sm-plus); border: 1px solid var(--theme-panel-border); background: #FFF; box-shadow: var(--theme-card-shadow); transition: transform var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.tcard:hover { transform: translateY(-2px); border-color: var(--color-accent-soft); box-shadow: var(--theme-panel-shadow); }
.tcard__tile { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--border-radius-sm); background: var(--tile, var(--color-pastel-lavender)); display: grid; place-items: center; }
.tcard__tile svg { width: 24px; height: 24px; fill: none; stroke: var(--theme-text-heading); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tcard__body { flex: 1; min-width: 0; }
.tcard__top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.tcard__type { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-pure); }
.tcard__status { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--border-radius-pill); }
.tcard__status--andamento { background: var(--color-accent-tinted); color: var(--color-accent-dark); }
.tcard__status--nova { background: var(--color-pastel-mint); color: var(--theme-text-heading); }
.tcard__status--agendada { background: var(--theme-surface-muted); color: var(--theme-text-muted); }
.tcard__status--done { background: var(--color-primary-tinted); color: var(--color-primary-pure); }
.tcard__title { font-family: var(--theme-font-family-heading); font-weight: 700; font-size: 17px; line-height: 1.15; color: var(--theme-text-heading); margin: 0; }
.tcard__meta { margin: 5px 0 12px; font-size: 12.5px; color: var(--color-surface-pure); }
.tcard__prog { display: flex; align-items: center; gap: 10px; }
.tcard__prog i { flex: 1; height: 7px; border-radius: var(--border-radius-pill); background: var(--theme-surface-muted); overflow: hidden; }
.tcard__prog i b { display: block; height: 100%; border-radius: var(--border-radius-pill); background: linear-gradient(90deg, var(--color-accent-pure), var(--color-pastel-lavender-deep)); }
.tcard__prog span { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--color-surface-pure); }

.trilhas-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 36px; }

/* branch vazio */
.empty { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(24px,5vw,56px); align-items: center; }
.empty__art { display: grid; place-items: center; }
.empty__art img { width: min(360px, 80%); border-radius: var(--border-radius-lg); background: var(--base-50); box-shadow: var(--theme-panel-shadow); padding: 12px; }
.empty__copy { max-width: 520px; }
.empty__copy .trilhas-head__title { text-align: left; font-size: clamp(28px,4vw,46px); }
.empty__copy .trilhas-head__lead { margin-left: 0; text-align: left; }
.empty__list { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 12px; }
.empty__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--theme-text-muted); line-height: 1.45; }
.empty__list li svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--color-primary-pure); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.empty .trilhas-cta { justify-content: flex-start; margin-top: 0; }

/* ============== MODAL TERMOS ============== */
.onb-modal { position: fixed; inset: 0; z-index: 180; display: flex; justify-content: center; align-items: flex-start; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.onb-modal[hidden] { display: none; }
.onb-modal__backdrop { position: fixed; inset: 0; background: var(--theme-modal-overlay-bg); backdrop-filter: blur(var(--theme-modal-overlay-blur)); }
.onb-modal__card { position: relative; z-index: 1; width: min(520px, 100%); margin: auto 0; background: #FFF; border-radius: var(--border-radius-md); padding: 26px 28px 30px; box-shadow: var(--theme-modal-shadow); }
.onb-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.onb-modal__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--border-radius-sm); background: var(--color-primary-tinted); color: var(--color-primary-pure); }
.onb-modal__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.onb-modal__close { width: 38px; height: 38px; border: 0; background: var(--theme-surface-muted); cursor: pointer; color: var(--theme-text-muted); border-radius: var(--border-radius-sm); display: grid; place-items: center; }
.onb-modal__close:hover { background: var(--color-surface-mist); transform: rotate(90deg); }
.onb-modal__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.onb-modal__title { font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 22px; letter-spacing: -.01em; margin: 0 0 14px; color: var(--theme-text-heading); }
.onb-modal__body h3 { font-size: 15px; font-weight: 700; color: var(--theme-text-heading); margin: 18px 0 6px; }
.onb-modal__body p, .onb-modal__body li { font-size: 14px; line-height: 1.6; color: var(--color-surface-pure); }
.onb-modal__body ul { margin: 6px 0; padding-left: 18px; }

/* ============== RECUPERAÇÃO DE SENHA (modais auth) ============== */
.onb-modal--auth .onb-modal__card { width: min(440px, 100%); padding: 30px 30px 26px; }
.onb-modal--auth .onb-modal__icon { margin-bottom: 20px; }
.onb-modal__lead { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--color-surface-pure); }
.onb-modal__submit { width: 100%; justify-content: center; margin-top: 4px; }
.onb-modal__textlink { display: block; width: 100%; margin: 16px auto 0; padding: 6px; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; color: var(--theme-text-heading); text-align: center; transition: color var(--motion-dur-fast) var(--motion-ease); }
.onb-modal__textlink:hover { color: var(--color-primary-pure); }
.onb-modal__resend { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--color-surface-pure); }
.onb-resend__wait b { color: var(--theme-text-heading); font-weight: 700; }
.onb-resend__link { font-weight: 700; }

/* checklist de requisitos de senha (base: 1.2.4) */
.pwreq { list-style: none; margin: 2px 0 22px; padding: 0; display: grid; gap: 10px; }
.pwreq__item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--color-surface-soft); transition: color var(--motion-dur-fast) var(--motion-ease); }
.pwreq__ic { display: block; width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwreq__ic--on { display: none; }
.pwreq__item.is-valid { color: var(--color-success-dark); }
.pwreq__item.is-valid .pwreq__ic--on { display: block; }
.pwreq__item.is-valid .pwreq__ic--off { display: none; }

/* ============== CENA 6 · LINK EXPIRADO (base: 1.3) ============== */
.onb-scene--expired { display: grid; place-items: center; padding: 40px 24px; background: var(--theme-surface); }
.expired { width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.expired__logo { height: 30px; margin-bottom: clamp(20px, 5vh, 44px); }
.expired__art { width: min(340px, 76%); margin-bottom: 26px; }
.expired__art img { width: 100%; height: auto; display: block; }
.expired__msg { margin: 0 0 24px; font-family: var(--theme-font-family-heading); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.01em; color: var(--theme-text-heading); }

/* ============================================================
   ONE PAGER DA FORMAÇÃO (.fmc-*)
   Mesma estrutura da tela de estudo — módulos em abas, playlist ao lado —
   dentro da moldura da one pager. Ver detFormacaoMain() em js/app.js.
   ============================================================ */
/* O bloco do módulo nasce aberto e não recolhe: o acordeão do .cblock serve
   para blocos opcionais, e aqui o conteúdo do módulo é o assunto da tela. */
.fmc-mod .cblock__head { flex-direction: column; align-items: flex-start; gap: 4px; cursor: default; }
.fmc-mod__num {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-dark);
}
.fmc-mod .cblock__head h2 {
  font-family: var(--theme-font-family-heading); font-size: 21px; font-weight: 700;
  letter-spacing: -.01em; color: var(--theme-text-heading); margin: 0;
}
.fmc-mod__cta { margin-top: 14px; }
.fmc-mod__cta svg { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-right: 6px; vertical-align: -3px; }

.fmc-aulas { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fmc-aula {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 9px; cursor: pointer;
  border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-14);
  background: var(--color-surface-pale);
  transition: border-color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
}
.fmc-aula:hover { border-color: var(--color-accent-soft); transform: translateX(2px); }
.fmc-aula__tile {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--border-radius-sm);
  background: var(--tile, var(--color-pastel-lavender)); color: var(--theme-text-heading);
}
.fmc-aula__tile svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fmc-aula__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fmc-aula__txt b { font-size: 14px; font-weight: 700; color: var(--theme-text-heading); }
.fmc-aula__txt small { font-size: 12px; color: var(--theme-text-muted); }
.fmc-aula__done { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--border-radius-circle); background: var(--color-primary-pure); }
.fmc-aula__done svg { width: 13px; height: 13px; fill: none; stroke: var(--color-essence-ivory); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Aula da formação que ainda não é minha: legível, sem alvo de clique.
   Mesmo tratamento de .playlist__item.is-locked no trilho. */
.fmc-aula.is-locked { opacity: .62; cursor: default; }
.fmc-aula.is-locked:hover { border-color: var(--theme-panel-border); transform: none; }
.fmc-aula.is-locked .fmc-aula__tile { background: var(--color-surface-mist); color: var(--color-surface-pure); }
.fmc-aula__lock { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; color: var(--color-surface-pure); }
.fmc-aula__lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Percurso da formação na aba Visão Geral: um módulo por linha, com o que ele
   entrega. É o índice da formação — clicar leva para a aba daquele módulo. */
.fmc-mods { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fmc-modrow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm-14);
  background: var(--color-surface-pale);
  transition: border-color var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease);
}
.fmc-modrow:hover { border-color: var(--color-accent-soft); transform: translateX(2px); }
.fmc-modrow.is-locked { opacity: .62; cursor: default; }
.fmc-modrow.is-locked:hover { border-color: var(--theme-panel-border); transform: none; }
.fmc-modrow__num {
  flex-shrink: 0; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--border-radius-sm);
  background: var(--color-accent-tinted); color: var(--color-accent-pure);
  font-family: var(--theme-font-family-heading); font-weight: 800; font-size: 14px;
}
.fmc-modrow__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fmc-modrow__txt b { font-size: 14.5px; font-weight: 700; color: var(--theme-text-heading); }
.fmc-modrow__txt small { font-size: 12.5px; color: var(--theme-text-muted); }
.fmc-modrow__ic { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-surface-pure); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fmc-modrow__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }


/* ============== RESPONSIVO ============== */
@media (max-width: 900px) {
  .onb-scene--login { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .lslide--lvl { grid-template-columns: 1fr; gap: 18px; text-align: center; max-width: 520px; }
  .lslide__copy { max-width: none; }
  .lslide__desc { margin-left: auto; margin-right: auto; }
  .lslide__art { order: -1; }
  .lslide__art img { width: min(300px, 64%); }
  .trilhas-grid { grid-template-columns: 1fr; }
  .empty { grid-template-columns: 1fr; text-align: center; }
  .empty__art { order: -1; }
  .empty__copy .trilhas-head__title, .empty__copy .trilhas-head__lead { text-align: center; }
  .empty .trilhas-cta { justify-content: center; }
  .empty__list { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .enrich-grid { grid-template-columns: repeat(2, 1fr); }
  .lslide__name { font-size: clamp(40px,12vw,56px); }
}

@media (prefers-reduced-motion: reduce) {
  .lslide, .onb-scene, .demo__screen { transition: none !important; }
}

/* Itens informativos do rail, sem link (ex.: Integração com o Currículo) */
.rail-item--static { cursor: default; }
.rail-item--static:hover { border-color: var(--theme-panel-border); background: transparent; transform: none; }

/* Barra de finalização de aula no detalhe (análoga à da formação).
   Concluída = ROXO (regra de ouro §Estados de conclusão: a ENTIDADE aula finalizada
   é roxo primary + branco + ✓, NUNCA verde — mesma dívida já fechada em .deckx-card.is-done).
   Alinha com os modais de sucesso (.finmod__icon--primary) e .module-tab.is-done. */
/* ============================================================
   BLOCOS DO CADASTRO NA ONE-PAGER DA FORMAÇÃO
   O canvas do editor (css/admin.css §blk-*) é WYSIWYG contra esta tela; aqui
   está a contraparte em leitura. .blk-faixa repete o nome de lá de propósito:
   é o MESMO componente, sem a barra de autoria.
   ============================================================ */
.fmc-canvas { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
/* A aula da formação, aberta dentro da aba do módulo: o tile do tipo ao lado do
   título, e a posição dela no percurso numa linha de apoio. */
.fmc-aulapanel .aula-panel__heading { flex-direction: row; align-items: center; gap: 12px; }
.fmc-aulapanel .fmc-aula__tile { flex: none; }
.fmc-aulapanel__meta { margin: 6px 0 0; font-size: 13.5px; color: var(--theme-text-muted); }
.fmc-aulapanel__done {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 12px; border-radius: var(--border-radius-pill);
  background: var(--color-pastel-mint); color: var(--theme-text-heading);
  font-size: 13px; font-weight: 800;
}
.fmc-aulapanel__done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fmc-canvas > .cblock { margin: 4px 0; }
.blk-faixa {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; align-self: flex-start;
  border-radius: var(--border-radius-pill); padding: 7px 14px 7px 12px;
  font-size: 13.5px; font-weight: 800; color: #fff; background: var(--blk-faixa-cor, var(--color-primary-pure));
}
.blk-faixa__ic { display: grid; place-items: center; flex: none; }
.blk-faixa__ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.blk-faixa--roxo     { --blk-faixa-cor: var(--color-primary-pure); }
.blk-faixa--indigo   { --blk-faixa-cor: var(--color-accent-dark); }
.blk-faixa--vermelho { --blk-faixa-cor: var(--color-error-pure); }
.blk-faixa--rosa     { --blk-faixa-cor: var(--color-pink-pure); }
.blk-faixa--laranja  { --blk-faixa-cor: var(--color-warning-dark); }
.blk-faixa--gold     { --blk-faixa-cor: var(--color-tertiary-darker); }
.blk-faixa--verde    { --blk-faixa-cor: var(--color-success-darker); }
.blk-faixa--teal     { --blk-faixa-cor: var(--color-success-deep); }
.blk-faixa--navy     { --blk-faixa-cor: var(--color-accent-deep); }

.fmc-blk__desc { color: var(--theme-text-muted); font-size: 14.5px; }
.fmc-blk__quote { border-left: 3px solid var(--color-primary-pale); padding-left: 16px; margin: 0; color: var(--theme-text-heading); font-style: italic; }
.fmc-blk__hr { border: 0; border-top: 1px solid var(--theme-border-subtle); margin: 4px 0; }
.fmc-blk__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-primary-pure); text-decoration: none; }
.fmc-blk__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fmc-blk__dica { background: var(--color-pastel-aqua); border-radius: var(--border-radius-sm-14); padding: 16px 18px; }
.fmc-blk__dica-top { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; color: var(--theme-text-heading); margin-bottom: 6px; }
.fmc-blk__dica-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fmc-blk__dica p { margin: 0; color: var(--theme-text-heading); }
.fmc-blk__pendente { color: var(--theme-text-muted); font-size: 13px; font-style: italic; }
.fmc-blk__docs { margin: 0; }
.fmc-cols { display: grid; gap: 20px; }
.fmc-cols--2 { grid-template-columns: 1fr 1fr; }
.fmc-cols--3 { grid-template-columns: repeat(3, 1fr); }
.fmc-cols__col { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 768px) { .fmc-cols--2, .fmc-cols--3 { grid-template-columns: 1fr; } }

/* ---- MIOLO BLOQUEADO ----
   O módulo de uma formação que ainda não é minha continua navegável — as abas
   andam, a lista de aulas aparece com cadeado —, mas o conteúdo cadastrado dá
   lugar a este aviso. Mesma moldura tracejada dos estados vazios do painel
   (.atr-empty), com uma ilustração em vez de um ícone solto. */
.fmc-bloq {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 56px 24px; margin-top: 20px;
  background: var(--theme-surface); border: 1px dashed var(--theme-border-subtle);
  border-radius: var(--theme-card-radius);
}
.fmc-bloq__art { position: relative; display: grid; place-items: center; width: 128px; height: 108px; color: var(--color-surface-soft); }
.fmc-bloq__doc { width: 74px; height: 74px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* O cadeado é o assunto da ilustração: sai do cinza da folha e ganha a cor de
   marca, encostado na quina do documento. */
.fmc-bloq__lock {
  position: absolute; right: 14px; bottom: 6px;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--border-radius-circle);
  background: var(--color-primary-pale); color: var(--color-primary-pure);
  box-shadow: 0 0 0 5px var(--theme-surface);
}
.fmc-bloq__lock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fmc-bloq__doodle { position: absolute; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .55; }
.fmc-bloq__doodle--ring { top: 2px; left: 2px; width: 22px; height: 22px; }
.fmc-bloq__doodle--dots { top: 12px; right: 0; width: 32px; height: 18px; fill: currentColor; stroke: none; }
.fmc-bloq__title { margin: 0; font-family: var(--theme-font-family-heading); font-size: 17px; font-weight: 800; color: var(--theme-text-heading); max-width: 32ch; }
.fmc-bloq__sub { margin: 0; max-width: 46ch; font-size: 14.5px; line-height: 1.55; color: var(--theme-text-muted); }

.aula-finish { margin-top: 4px; }
/* A barra concluída NÃO troca de fundo: é a mesma barra da tela inteira, e quem
   diz que acabou é a copy mais o selo à direita (board "Ajustes barras de CTA").
   O roxo claro que ela vestia fazia a última barra parecer outro componente. */

/* ============================================================
   HOME (Início), landing imersiva (linguagem expressiva Lekto V3)
   Dobra 1: herói imersivo + glance das atribuições + busca + badge.
   Dobra 2: trilhas/aulas recomendadas; fundo replica a imagem do card
   e troca conforme o scroll (home.js + GSAP ScrollTrigger).
   ============================================================ */
.view--home { margin-left: 0; padding: 0; color: #fff; position: relative; }
.view--home svg { stroke: currentColor; }

/* ---- fundo imersivo fixo (camadas trocadas no scroll) ----
   z-index: -1 mantém o fundo atrás do conteúdo SEM que o herói precise criar um
   contexto de empilhamento, assim a busca (cmdk) pode subir acima do scrim. */
.home-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.home-bg__layer {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  background-color: var(--color-surface-deep); opacity: 0; transform: scale(1.04); will-change: opacity;
}
.home-bg__layer.is-active { opacity: 1; }
/* herói nítido; cards desfocados, o fundo "replicando a imagem principal" */
.home-bg__layer:not([data-bg="hero"]) { filter: blur(34px) saturate(1.15); transform: scale(1.2); }
.home-bg__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,1,26,.55) 0%, rgba(37,8,53,0) 24%, rgba(37,8,53,0) 46%, rgba(15,1,26,.8) 100%),
    radial-gradient(130% 120% at 78% 26%, rgba(37,8,53,0) 28%, rgba(15,1,26,.65) 100%);
}
.home-bg::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .5;
  mix-blend-mode: soft-light; pointer-events: none; }

/* ================= DOBRA 1, HERÓI ================= */
/* sem z-index: não cria contexto de empilhamento, para a busca (cmdk z-95)
   conseguir subir acima do scrim do cmdk (z-90) e não ficar borrada/escurecida. */
.home-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; }
.home-hero__inner { width: 100%; display: flex; flex-direction: column; gap: 20px;
  padding: 24px clamp(24px, 5vw, 64px) 48px calc(var(--rail-w) + 40px); }

/* cluster busca + badge, a busca alinha a largura ao componente do glance (780px) */
.home-hero__bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.home-hero__bar .cmdk { position: relative; flex: 1 1 auto; width: 100%; max-width: 780px; margin: 0; z-index: 95; }
.home-hero__bar .level-badge { margin-left: auto; }

/* painel do glance (cartão imersivo inferior) */
.home-hero__panel { margin-top: auto; max-width: 780px; display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 3vw, 36px); border-radius: var(--border-radius-lg);
  background: rgba(37,8,53,.55); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12); box-shadow: var(--theme-modal-shadow); }
.home-hero__eyebrow { align-self: flex-start; }
.home-hero__title { font-family: var(--theme-font-family-heading); font-weight: 800; color: #fff;
  font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.02em; max-width: 19ch; }
.home-hero__title em { font-style: normal; color: var(--color-pastel-lavender); }
.home-hero__lead { color: rgba(255,255,255,.78); font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6; max-width: 60ch; }
.home-hero__lead b { color: #fff; font-weight: 800; }

.home-glance { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.home-stat { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--border-radius-pill); }
.home-stat__ic { width: 30px; height: 30px; border-radius: var(--border-radius-circle); display: grid; place-items: center;
  background: var(--tile); color: var(--theme-text-secondary); }
.home-stat__ic svg { width: 16px; height: 16px; fill: none; stroke-width: 2; }
.home-stat__txt { display: flex; flex-direction: column; line-height: 1; }
.home-stat__n { font-family: var(--theme-font-family-heading); font-size: 16px; font-weight: 800; color: #fff; }
.home-stat__l { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 4px; }

/* CTAs da dobra 1: primário (vai para outra página, seta ↗) + secundário (rola a tela, seta ↓) */
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.home-cta { height: 52px; padding: 0 22px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border-radius: var(--border-radius-sm); border: none; font-family: var(--theme-font-family-base); font-weight: 800; font-size: 15px;
  transition: background var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease); }
.home-cta:active { transform: scale(.98); }
.home-cta svg { width: 18px; height: 18px; fill: none; stroke-width: 2.2; }
.home-cta--primary { background: var(--color-accent-pure); color: #fff; box-shadow: var(--lkt-shadow-level4); }
.home-cta--primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
.home-cta--secondary { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.home-cta--secondary:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

/* ================= DOBRA 2, RECOMENDADOS (imersivo) ================= */
.home-reco { position: relative; z-index: 1; }
.home-reco__head { position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(24px, 5vw, 64px) 16px calc(var(--rail-w) + 40px);
  background: linear-gradient(180deg, rgba(15,1,26,.65), rgba(37,8,53,0));
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.home-reco__eyebrow { align-self: center; }
.home-reco__thumbs { display: flex; gap: 10px; }
.home-thumb { position: relative; width: 58px; height: 42px; padding: 0; border-radius: var(--border-radius-sm); overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.2); background: var(--color-surface-deep); cursor: pointer; opacity: .5;
  transition: opacity var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease); }
.home-thumb__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.home-thumb__n { position: absolute; left: 6px; bottom: 3px; font-size: 10px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.home-thumb:hover { opacity: .85; }
.home-thumb.is-active { opacity: 1; border-color: var(--color-pastel-lavender); transform: translateY(-2px); }
.home-thumb:focus-visible { outline: 2px solid var(--color-pastel-lavender); outline-offset: 2px; }

.home-reco__panels { display: block; }
.reco-panel { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1fr minmax(300px, 38vw) 1fr; align-items: center; gap: clamp(20px, 3vw, 48px);
  padding: 104px clamp(24px, 5vw, 64px) 64px calc(var(--rail-w) + 40px); }

.reco-panel__left { align-self: center; }
.reco-panel__index { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: 14px; }
.reco-panel__title { font-family: var(--theme-font-family-heading); font-weight: 800; color: #fff;
  font-size: clamp(28px, 3.4vw, 52px); line-height: 1.03; letter-spacing: -.02em; }
.reco-panel__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* mídia central, a imagem sempre cobre toda a forma do componente, sem bordas */
.reco-panel__media { position: relative; margin: 0; align-self: center; aspect-ratio: 4 / 5;
  border-radius: var(--border-radius-lg); overflow: hidden; background: var(--color-surface-deep); box-shadow: var(--theme-modal-shadow); }
.reco-panel__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.reco-panel__chip { position: absolute; top: 14px; left: 14px; }

.reco-panel__info { align-self: center; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 2vw, 30px); border-radius: var(--border-radius-lg);
  background: rgba(37,8,53,.55); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12); box-shadow: var(--lkt-shadow-level4); }
.reco-panel__kicker { font-family: var(--theme-font-family-heading); font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.62); }
.reco-panel__desc { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.6; }
.reco-panel__why { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-pastel-butter); font-size: 13px; font-weight: 700; }
.reco-panel__why svg { width: 15px; height: 15px; fill: var(--color-pastel-butter); stroke: none; }
.reco-panel__meta { display: flex; gap: 18px; flex-wrap: wrap; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 700; }
.reco-panel__meta span { display: inline-flex; align-items: center; gap: 7px; }
.reco-panel__meta svg { width: 15px; height: 15px; fill: none; stroke-width: 2; }
.reco-panel__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.reco-panel__primary { background: var(--color-accent-pure); color: #fff; box-shadow: var(--lkt-shadow-level4); }
.reco-panel__primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
.reco-panel__primary svg { fill: none; stroke-width: 2.2; }
.reco-panel__secondary { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.reco-panel__secondary:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.reco-panel__secondary svg { fill: none; stroke-width: 2.2; }

/* ---- responsivo ---- */
@media (max-width: 1080px) {
  .reco-panel { grid-template-columns: minmax(0, 1fr) minmax(280px, 46vw); }
  .reco-panel__left { grid-column: 1 / -1; }
  .reco-panel__media { grid-column: 1; }
  .reco-panel__info { grid-column: 2; }
}
@media (max-width: 768px) {
  .home-hero__inner { padding: 88px 18px 112px; gap: 16px; }
  .home-hero__bar { gap: 12px; }
  .home-hero__bar .cmdk { flex: 1 1 100%; max-width: 100%; }
  .home-hero__bar .level-badge { margin-left: 0; }
  .home-hero__panel { max-width: 100%; }
  .home-reco__head { top: 76px; padding: 12px 16px; }
  .home-reco__eyebrow { display: none; }
  .home-reco__thumbs { width: 100%; justify-content: center; }
  .reco-panel { min-height: auto; grid-template-columns: 1fr; gap: 18px;
    padding: 132px 18px 56px; }
  .reco-panel__left, .reco-panel__media, .reco-panel__info { grid-column: 1; }
  .reco-panel__media { max-width: 420px; width: 100%; margin: 0 auto; aspect-ratio: 4 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  .home-bg__layer { transition: none; }
}