@font-face{ font-family:'Goodly'; src:url('/static/fonts/Goodly-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Goodly'; src:url('/static/fonts/Goodly-Semibold.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Goodly'; src:url('/static/fonts/Goodly-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --azul-1:#2B4872; --azul-2:#3E69B7; --verde:#56CAC9;
  --escuro:#F4F8FB; --escuro-2:#E8F1F9; --surface:#FFFFFF; --surface-2:#E8F1F9;
  --ink:#16283F; --ink-soft:#4C6480;
  --borda:rgba(43,72,114,.12);
  --sombra:0 2px 4px rgba(22,40,63,.06), 0 20px 44px -24px rgba(22,40,63,.35);
  --raio:22px;
  /* Só pra badge/texto sobre um fundo colorido translúcido (chip verde-água,
     chip vermelho, chip âmbar) — o texto claro do tema escuro fica ilegível
     em cima do MESMO chip no tema claro, então cada um tem sua própria cor. */
  --texto-verde-chip:#1F6B6A; --texto-erro:#8A2846; --texto-amber:#8A6116;
  /* --verde puro como TEXTO direto (não em cima de um chip translúcido)
     não tem contraste suficiente no claro (teal claro sobre branco) — só
     nesses casos usa --verde-texto; --verde continua igual pra fundo,
     borda e ícone, onde o contraste não é o mesmo problema. */
  --verde-texto:#1F6B6A;
  --topo-bg:rgba(244,248,251,.92);
  /* Largura do card do carrossel. Vive aqui porque duas coisas dependem dela:
     o próprio card e a altura em que as setas pousam sobre a capa. Estreitou de
     320px quando a capa virou retrato (1/1.6): na largura antiga só a capa
     passaria de 500px de altura e o card não caberia na tela. */
  --largura-card:min(260px,74vw);
  color-scheme:light;
}
/* par escuro — era o único tema que esta página tinha até 27/09/2026
   (docs/PLANO_IDENTIDADE_VISUAL.md 2.1/passo 4); os valores aqui são
   exatamente os originais, então quem já usa escuro não vê diferença
   nenhuma. A capa/foto dos módulos continua sempre escura nos dois temas
   de propósito (overlay de foto, mesmo padrão do site institucional);
   `.topo` foi padronizado em 27/09/2026 pra também seguir o tema, igual
   ao resto do ecossistema — só o CONTEÚDO (cards, player de aula, admin)
   já seguia o tema escolhido antes disso. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="claro"]){
    --escuro:#0F1D30; --escuro-2:#16283F; --surface:#1C304A; --surface-2:#223a5a;
    --ink:#EAF1F7; --ink-soft:#9FB4CC;
    --borda:rgba(255,255,255,.1);
    --sombra:0 20px 44px -20px rgba(0,0,0,.6);
    --texto-verde-chip:#CFF3F2; --texto-erro:#F3B3B3; --texto-amber:#F0C24C;
    --verde-texto:#56CAC9;
    --topo-bg:rgba(15,29,48,.88);
    color-scheme:dark;
  }
}
:root[data-theme="escuro"]{
  --escuro:#0F1D30; --escuro-2:#16283F; --surface:#1C304A; --surface-2:#223a5a;
  --ink:#EAF1F7; --ink-soft:#9FB4CC;
  --borda:rgba(255,255,255,.1);
  --sombra:0 20px 44px -20px rgba(0,0,0,.6);
  --topo-bg:rgba(15,29,48,.88);
  --texto-verde-chip:#CFF3F2; --texto-erro:#F3B3B3; --texto-amber:#F0C24C;
  --verde-texto:#56CAC9;
  color-scheme:dark;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--escuro);color:var(--ink);font-family:'Roboto',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Goodly','Ubuntu',system-ui,sans-serif;font-weight:700;line-height:1.15;margin:0;text-wrap:balance;color:var(--ink);}
p{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px;}
@media (min-width:760px){ .wrap{padding-inline:32px;} }

/* ---------- alternador de tema — mesmo componente do resto do ecossistema,
   inclusive na tela de aula/vídeo (docs/PLANO_IDENTIDADE_VISUAL.md 2.1:
   "ninguém fica preso num lado só") ---------- */
.alterna-tema{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--borda);background:transparent;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex-shrink:0;
}
.alterna-tema svg{width:15px;height:15px;}
.alterna-tema .icone-lua{display:none;}
:root[data-theme="escuro"] .alterna-tema .icone-sol{display:none;}
:root[data-theme="escuro"] .alterna-tema .icone-lua{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="claro"]) .alterna-tema .icone-sol{display:none;}
  :root:not([data-theme="claro"]) .alterna-tema .icone-lua{display:block;}
}

/* ---------- topo ---------- */
/* Barra do topo adaptativa (27/09/2026, padronizado com o resto do
   ecossistema a pedido do dono) — segue o alternador de tema igual ao
   conteúdo. Só a capa/foto de cada módulo continua sempre escura de
   propósito (overlay de foto, mesmo padrão do site institucional). */
.topo{
  position:sticky;top:0;z-index:50;background:var(--topo-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--borda);
}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px;}
.logo-grupo{display:flex;align-items:center;gap:10px;}
.topo img{height:32px;width:auto;}
.topo .lado-direito{display:flex;align-items:center;gap:20px;}
.topo-nav{display:none;gap:24px;font-size:14.5px;color:var(--ink-soft);}
@media (min-width:760px){ .topo-nav{display:flex;} }
.topo-nav a:hover{color:var(--ink);}

.abre-menu{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--borda);background:transparent;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex-shrink:0;
}
.abre-menu svg{width:17px;height:17px;}
@media (min-width:760px){ .abre-menu{display:none;} }
.menu-mobile{
  display:none;flex-direction:column;gap:2px;
  position:absolute;top:100%;left:0;right:0;
  background:var(--topo-bg);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borda);
  padding:8px 20px 16px;
}
.menu-mobile.aberto{display:flex;}
.menu-mobile a{
  text-decoration:none;color:var(--ink-soft);font-size:15.5px;
  padding-block:12px;border-bottom:1px solid var(--borda);
}
.menu-mobile a:last-child{border-bottom:none;}
@media (min-width:760px){ .menu-mobile{display:none !important;} }
.avatar-chip{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft);}
.avatar-chip .bolha{width:32px;height:32px;border-radius:50%;background:var(--azul-2);display:flex;align-items:center;justify-content:center;font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;color:#fff;font-size:13px;}
.selo-papel{font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-verde-chip);background:rgba(86,202,201,.14);border:1px solid rgba(86,202,201,.35);padding:3px 9px;border-radius:999px;white-space:nowrap;}

/* ---------- login ---------- */
.tela-login{min-height:88vh;display:flex;align-items:center;justify-content:center;padding:48px 20px;position:relative;overflow:hidden;}
/* Cartão de login à direita e cérebro sobrando à esquerda — mesma
   composição do login do SaaS principal (só faz sentido em tela larga; no
   celular o cartão continua centralizado, sem espaço sobrando pro
   desenho). O efeito aparece nos dois temas (pedido do dono, 27/09/2026:
   "quando clicamos sol não aparece mais [o desenho]"), então o
   deslocamento do cartão vale nos dois também, não só no escuro. */
@media (min-width:860px){
  .tela-login{justify-content:flex-end;padding-inline-end:8vw;}
}
/* Fundo animado do cérebro (tsParticles) — mesmo efeito do login do SaaS
   principal (sistema.recursoscognitivos.com.br). Primeiro só aparecia no
   tema escuro, mas o dono pediu pra aparecer nos dois (27/09/2026:
   "quando clicamos sol não aparece mais [o desenho]") — as cores (azul
   #3e69b7) têm contraste OK tanto no fundo escuro quanto no claro
   (--escuro claro é #F4F8FB, quase branco), então não precisou de uma
   paleta separada por tema.

   O desenho do cérebro nasce num tamanho fixo em pixel (é como o
   tsParticles calcula a posição do polígono) — por isso fica "quebrado"
   se cada tela inicializar num tamanho diferente. Solução: sempre
   inicializa num canvas do MESMO tamanho de referência (1366x900) escondido
   dentro da cápsula, e a cápsula escala esse tamanho fixo via CSS
   (--escala-particulas, calculada em particulas-login.js) pra cobrir
   qualquer tamanho de tela sem recalcular nada do lado do tsParticles.

   A logo (imagem) e o cérebro de partículas moravam em dois sistemas de
   posição diferentes (a imagem em vw/vh direto da tela, o cérebro dentro
   dessa referência 1366x900) — só ficavam alinhados no tamanho de janela
   em que eu testei; redimensionar a página descolava um do outro (bug
   reportado pelo dono, print mostrando o cérebro flutuando longe da
   cabeça). Correção: os dois agora moram DENTRO do mesmo bloco de
   referência 1366x900 (.marca-cerebro-login), que é o único elemento que
   recebe a escala — como as posições da imagem e do #tsparticles-login
   são fixas uma em relação à outra dentro desse bloco, continuam
   alinhadas em qualquer tamanho de tela. */
.tsparticles-capsula{position:absolute;inset:0;z-index:0;overflow:hidden;}
.marca-cerebro-login{
  position:absolute;top:50%;left:30%;
  width:1366px;height:900px;
  transform:translate(-50%,-50%) scale(var(--escala-particulas,1));
  transform-origin:center center;
}
#tsparticles-login{position:absolute;inset:0;}
/* A nossa logo (ícone, não o cérebro traçado — pedido do dono,
   27/09/2026: "coloque a imagem no fundo") como marca d'água atrás do
   cartão, nos dois temas. Posição em pixel fixo dentro do quadro de
   referência 964x1250 → 1366x900 (mesma lógica do cérebro), calibrada
   pra cabeça da logo ficar por trás de onde as partículas desenham o
   cérebro. */
.marca-fundo-login{
  position:absolute;left:121px;top:68px;width:620px;height:auto;
  pointer-events:none;opacity:.35;
}
.login-card{
  position:relative;z-index:1;width:100%;max-width:400px;
  background:var(--surface);border:1px solid var(--borda);border-radius:var(--raio);
  padding:38px 32px;box-shadow:var(--sombra);text-align:center;
}
:root[data-theme="escuro"] .login-card{box-shadow:0 0 30px 4px rgba(62,105,183,.35),var(--sombra);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="claro"]) .login-card{box-shadow:0 0 30px 4px rgba(62,105,183,.35),var(--sombra);}
}
.login-card img.marca{height:36px;margin-inline:auto 0;margin-bottom:18px;}
.login-card h1{font-size:1.5rem;}
.login-card p.sub{margin-top:8px;color:var(--ink-soft);font-size:14.5px;}
.campo{margin-top:20px;text-align:left;}
.campo label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:6px;}
.campo input{
  width:100%;background:var(--escuro-2);border:1px solid var(--borda);border-radius:12px;
  padding:12px 14px;color:var(--ink);font-size:15px;font-family:'Roboto',sans-serif;
}
.campo input:focus{outline:2px solid var(--verde);outline-offset:1px;}
.login-linha{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:13px;color:var(--ink-soft);}
.btn-entrar{
  width:100%;margin-top:22px;background:var(--verde);color:#0E2A2A;border:none;border-radius:10px;
  padding:13px;font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:15px;cursor:pointer;
}
.login-rodape{margin-top:18px;font-size:13.5px;color:var(--ink-soft);}
.login-rodape a{color:var(--verde-texto);text-decoration:underline;text-underline-offset:3px;}
.separador-login{display:flex;align-items:center;gap:10px;margin-top:20px;color:var(--ink-soft);font-size:12px;}
.separador-login::before,.separador-login::after{content:"";flex:1;height:1px;background:var(--borda);}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;
  background:var(--escuro-2);border:1px solid var(--borda);border-radius:10px;padding:12px;
  font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;
}
.btn-google:hover{background:var(--borda);}
.erro{margin-top:16px;background:rgba(224,80,80,.12);border:1px solid rgba(224,80,80,.4);color:var(--texto-erro);border-radius:10px;padding:10px 14px;font-size:13.5px;text-align:left;}

/* ---------- dashboard ---------- */
.hero-dash{padding-block:52px 30px;position:relative;overflow:hidden;}
.hero-dash::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 10% 30%, rgba(86,202,201,.14), transparent 45%),
    radial-gradient(circle at 90% 20%, rgba(62,105,183,.2), transparent 50%);
}
.hero-dash .wrap{position:relative;z-index:1;}
.eyebrow{display:inline-block;font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--texto-verde-chip);background:rgba(86,202,201,.14);border:1px solid rgba(86,202,201,.35);padding:6px 14px;border-radius:999px;margin-bottom:14px;}
.hero-dash h1{font-size:clamp(1.7rem,4vw,2.4rem);}
.hero-dash p.sub{margin-top:10px;color:var(--ink-soft);max-width:60ch;}

section{padding-block:36px;}
.cabeca{margin-bottom:24px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.cabeca h2{font-size:1.3rem;}
.cabeca span{font-size:13.5px;color:var(--ink-soft);}

/* Carrossel horizontal, no formato da área de membros antiga: uma fileira só,
   rolando de lado com o scroll nativo do navegador — dedo no celular, trackpad
   no desktop, sem biblioteca. O respiro de cima é pro `translateY` do hover não
   sair cortado pelo `overflow`, e o de baixo pra sombra do card e a barra de
   rolagem. */
.grade-modulos{
  display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-block:6px 24px;
  scrollbar-width:thin;scrollbar-color:rgba(86,202,201,.45) color-mix(in srgb, var(--ink) 6%, transparent);
  /* O card que sai da tela esmaece em vez de ser cortado a seco na borda. A
     máscara mora aqui, na própria fileira que rola: ela é medida pela caixa do
     elemento, então as faixas ficam paradas nas pontas enquanto o conteúdo
     passa por baixo. */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-inicio), #000 calc(100% - var(--fade-fim)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-inicio), #000 calc(100% - var(--fade-fim)), transparent 100%);
  --fade-inicio:0px; --fade-fim:52px;
}
/* Esmaecer o lado onde não há mais nada pra rolar deixa o primeiro (ou o
   último) card apagado à toa. Quem acompanha o scroll e liga/desliga cada ponta
   é o JS de catalogo.html; sem JavaScript vale o padrão acima, que é o estado
   em que o carrossel nasce: parado no começo, com fade só à direita. */
.grade-modulos.com-fade-inicio{--fade-inicio:52px;}
.grade-modulos.sem-fade-fim{--fade-fim:0px;}
.grade-modulos::-webkit-scrollbar{height:8px;}
.grade-modulos::-webkit-scrollbar-track{background:color-mix(in srgb, var(--ink) 6%, transparent);border-radius:999px;}
.grade-modulos::-webkit-scrollbar-thumb{background:rgba(86,202,201,.45);border-radius:999px;}

/* Setas de navegação. Ficam fora da `.grade-modulos` de propósito: dentro,
   entrariam na máscara e esmaeceriam junto com os cards. Só o glifo, grande:
   sem fundo, sem borda, sem moldura — quem manda na tela é a capa do módulo,
   e em repouso a seta fica apagada, acendendo no hover/foco. */
.carrossel{position:relative;}
.seta-carrossel{
  /* Na metade da CAPA, não na metade do card: assim a seta pousa sobre a
     imagem em vez de tapar o título. A capa é 1/1,6, logo o meio dela está a
     0,8 da largura do card — mais os 6px de respiro da fileira. */
  position:absolute;top:calc(6px + var(--largura-card) * .8);transform:translateY(-50%);z-index:2;
  padding:0 6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:48px;line-height:1;
  background:none;border:0;color:var(--ink);opacity:.45;
  transition:opacity .2s ease;
}
.seta-carrossel:hover{opacity:1;}
.seta-carrossel:focus-visible{opacity:1;outline:2px solid var(--verde);outline-offset:2px;}
.seta-anterior{left:0;}
.seta-proxima{right:0;}
@media (min-width:760px){ .seta-anterior{left:-10px;} .seta-proxima{right:-10px;} }
/* Cabe tudo na tela, não há o que rolar: as setas somem (classe posta pelo JS). */
.carrossel.sem-rolagem .seta-carrossel{display:none;}
.cabeca-em-breve{margin-top:18px;}

.card-modulo{
  background:var(--surface);border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;
  box-shadow:var(--sombra);display:flex;flex-direction:column;position:relative;
  transition:transform .2s ease, border-color .2s ease;
}
/* Largura fixa é o que dá o formato de carrossel. O `min` garante que em tela
   estreita sempre sobre um pedaço do card seguinte — é o sinal de que dá pra
   arrastar. */
.grade-modulos>.card-modulo{flex:0 0 var(--largura-card);scroll-snap-align:start;}
.card-modulo:hover{transform:translateY(-3px);border-color:rgba(86,202,201,.4);}
/* Módulo bloqueado: capa em preto e branco, como no WordPress antigo. O filtro
   fica na `.capa`, então pega tanto o gradiente de `cor_capa` quanto a imagem
   enviada pelo admin, que mora dentro dela. O cadeado é irmão da `.capa` de
   propósito: dentro, entraria no filtro e ficaria cinza junto. */
.card-modulo.bloqueado{opacity:.85;}
.card-modulo.bloqueado .capa{filter:grayscale(1);}
/* Capa em retrato: as fotos que o dono sobe são verticais (os thumbnails 150×300
   do WordPress), e na caixa horizontal antiga elas apareciam espremidas. A
   proporção vale pro gradiente e pra imagem enviada juntos — se só um dos dois
   mudasse, cards vizinhos ficariam de alturas diferentes na fileira. */
.card-modulo .capa{
  aspect-ratio:1/1.6;display:flex;align-items:center;justify-content:center;position:relative;
}
.capa-1{background:linear-gradient(135deg,#2B4872,#3E69B7);}
.capa-2{background:linear-gradient(135deg,#1F5C5A,#2E8E88);}
.capa-3{background:linear-gradient(135deg,#3E3072,#6A4FB3);}
.capa-4{background:linear-gradient(135deg,#7A4A2E,#B87A2B);}
/* Capa enviada pelo admin: cobre o gradiente, que segue embaixo pra imagem
   com proporção diferente não deixar buraco no card. */
.capa-imagem{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Sombra escura de baixo pra cima, por cima de QUALQUER capa (foto enviada ou
   só o gradiente) — é o sistema que desenha isso, não precisa vir pronta na
   imagem que o admin sobe. `pointer-events:none` pra não atrapalhar nenhum
   clique que a capa já tenha. */
.card-modulo .capa::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
}
.card-modulo .capa svg{width:54px;height:54px;color:rgba(255,255,255,.9);}
.card-modulo .cadeado{position:absolute;top:12px;right:12px;z-index:1;width:30px;height:30px;border-radius:50%;background:rgba(15,29,48,.7);display:flex;align-items:center;justify-content:center;}
.card-modulo .cadeado svg{width:16px;height:16px;color:#fff;}
/* Faixa da capa no topo da página do módulo — só aparece quando o módulo tem
   imagem enviada; sem imagem, a página fica como sempre foi. */
.capa-modulo{position:relative;aspect-ratio:16/5;border-radius:var(--raio);overflow:hidden;margin-bottom:20px;}
/* z-index pra ficar por cima da sombra de `.capa::after`, que nasce depois
   dela no empilhamento. */
.card-modulo .tarja{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(0,0,0,.25);z-index:1;}
.card-modulo .tarja span{display:block;height:100%;background:var(--verde);}
/* Sombra suave na costura entre a capa (foto/gradiente) e o corpo branco —
   sem ela a borda reta entre as duas parecia um corte seco. Sombra do
   próprio `.corpo`, virada pra cima: pinta por cima da `.capa` porque
   `.corpo` vem depois dela no DOM (26/09/2026). */
.card-modulo .corpo{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;box-shadow:0 -10px 14px -12px rgba(0,0,0,.28);position:relative;}
.tag-papel{display:inline-block;font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--verde-texto);margin-bottom:8px;}
.card-modulo h3{font-size:1.08rem;}
.card-modulo p.desc{margin-top:8px;font-size:13.5px;color:var(--ink-soft);}
.card-modulo .meta{margin-top:10px;display:flex;gap:14px;font-size:13px;color:var(--ink-soft);}
.card-modulo .meta span{display:flex;align-items:center;gap:5px;}
.card-modulo .meta svg{width:14px;height:14px;}
.btn-modulo{
  margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--borda);border-radius:10px;padding:9px 16px;font-size:13.5px;
  font-family:'Goodly','Ubuntu',sans-serif;font-weight:500;color:var(--ink);background:none;cursor:pointer;
}
/* Só dentro do card o `auto` faz sentido: o `.corpo` é flex-column, então o
   botão é empurrado pro rodapé e fica na mesma altura em toda a fileira, por
   mais que o título/descrição variem de tamanho. Fora do card (o link
   "Continuar de onde parou" em modulo.html, por exemplo) o pai não é flex, e
   `auto` ali viraria 0 — por isso a regra fica restrita a `.card-modulo`. */
.card-modulo .btn-modulo{margin-top:auto;}
.card-modulo:hover .btn-modulo{border-color:var(--verde);color:var(--verde-texto);}

/* Fileira "Em breve": cards decorativos, sem módulo por trás — não existem no
   banco e não levam a lugar nenhum (_carrossel_fantasma.html). Vêm depois dos
   cards de verdade e repetem `.card-modulo` no seletor pra vencer o `.bloqueado`
   e o `:hover` acima — não são clicáveis, então também não reagem ao mouse. */
.card-modulo.card-fantasma{opacity:.72;}
.card-fantasma h3{color:var(--ink-soft);}
.card-fantasma .btn-modulo{cursor:default;color:var(--ink-soft);}
.card-modulo.card-fantasma:hover{transform:none;border-color:var(--borda);}
.card-modulo.card-fantasma:hover .btn-modulo{border-color:var(--borda);color:var(--ink-soft);}

/* ---------- player de aula ---------- */
.tela-player{padding-block:32px 60px;}
.player-grade{display:grid;gap:24px;grid-template-columns:1fr;}
@media (min-width:900px){ .player-grade{grid-template-columns:2.1fr 1fr;} }
.video-box{
  aspect-ratio:16/9;background:var(--escuro-2);border-radius:var(--raio);border:1px solid var(--borda);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:var(--sombra);
}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-box:fullscreen{aspect-ratio:auto;width:100%;height:100%;border:0;border-radius:0;}
/* Bloqueia o clique nos dois pontos onde o player do Vimeo expõe
   nome/marca/link pra fora do site — não esconde do código-fonte (isso não
   tem solução com vídeo embutido de terceiro), só impede o clique casual.
   Só o Vimeo usa isto: o player do YouTube não desenha mais UI nenhuma
   (`controls=0`, seção 7e do plano). */
.bloqueio-marca{position:absolute;z-index:2;}
.bloqueio-marca-topo{top:0;left:0;right:0;height:46px;}
.bloqueio-marca-canto{right:0;bottom:0;width:130px;height:44px;}
.video-box::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%, rgba(86,202,201,.12), transparent 60%);pointer-events:none;}
.play-btn{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;background:var(--verde);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);}
.play-btn svg{width:26px;height:26px;color:#0E2A2A;margin-left:3px;}
/* Pôster do vídeo do YouTube (ver seção 7d do plano). Antes do play, o embed do
   YouTube mostra no meio da tela a marca "Assista no YouTube", clicável e fora
   do alcance dos dois `.bloqueio-marca` — e não há parâmetro de player que a
   tire. A saída é não carregar o player nenhum: a caixa nasce com a miniatura
   do vídeo e só o clique aqui é que traz o iframe. */
.capa-video{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--escuro-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.capa-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.capa-video .play-btn{transition:transform .2s ease;}
.capa-video:hover .play-btn{transform:scale(1.06);}
/* Clicou e o script do YouTube ainda não chegou: a capa fica esperando, sem
   aceitar um segundo clique. */
.capa-video[disabled]{cursor:progress;}
.capa-video[disabled] .play-btn{opacity:.6;}
/* Controles do site por cima do vídeo do YouTube (seção 7e do plano). Com
   `controls=0` o player não desenha barra nenhuma — nem a tela de pausa com a
   marca clicável —, então esta barra é o único jeito de comandar o vídeo. Ela
   só aparece depois que o clique na capa cria o player. */
.controles-video{
  position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:color-mix(in srgb, var(--escuro-2) 75%, transparent);backdrop-filter:blur(4px);border-top:1px solid var(--borda);
}
.controles-video[hidden]{display:none;}
.ctrl-btn{flex:none;width:30px;height:30px;padding:0;border:0;background:transparent;color:var(--verde-texto);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ctrl-btn svg{width:20px;height:20px;}
.ctrl-btn:hover{color:var(--ink);}
.ctrl-btn:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:4px;}
.barra-progresso{flex:1;height:5px;border-radius:999px;background:color-mix(in srgb, var(--ink) 20%, transparent);cursor:pointer;}
.barra-progresso span{display:block;width:0;height:100%;border-radius:999px;background:var(--verde);}
.tempo-video{flex:none;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
/* Recebe o clique no meio do vídeo (alterna play/pausa) e, de quebra, nenhum
   clique chega ao iframe do YouTube. */
.camada-clique{position:absolute;inset:0;z-index:2;cursor:pointer;}
.aula-titulo{margin-top:18px;}
.aula-titulo h2{font-size:1.35rem;}
.aula-titulo p{margin-top:8px;color:var(--ink-soft);font-size:14.5px;text-align:justify;}
.lista-aulas{background:var(--surface);border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);}
.lista-aulas .cab{padding:16px 18px;border-bottom:1px solid var(--borda);font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:14.5px;}
.aula-item{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--borda);font-size:14px;}
.aula-item:last-child{border-bottom:none;}
.aula-item .num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-family:'Goodly','Ubuntu',sans-serif;flex:none;}
.aula-item.concluida .num{background:var(--verde);color:#0E2A2A;}
.aula-item.atual .num{background:var(--azul-2);color:#fff;}
.aula-item.pendente .num{background:var(--escuro-2);color:var(--ink-soft);border:1px solid var(--borda);}
.aula-item .nome{flex:1;}
.aula-item.atual{background:rgba(86,202,201,.06);}
.aula-item .dur{font-size:12.5px;color:var(--ink-soft);}
.aula-item .nome em{font-size:12.5px;color:var(--ink-soft);font-style:normal;}

/* ---------- acordeão de subtemas (Fase 3) ---------- */
.subtema{background:var(--surface);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden;margin-bottom:14px;}
.subtema>summary{
  cursor:pointer;list-style:none;padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:14.5px;
}
.subtema>summary::-webkit-details-marker{display:none;}
.subtema>summary::after{content:"▾";color:var(--ink-soft);font-size:13px;}
.subtema[open]>summary::after{content:"▴";}
.subtema>summary .titulo{flex:1;min-width:140px;}
.subtema>summary .contagem{font-family:'Roboto',system-ui,sans-serif;font-weight:400;font-size:12.5px;color:var(--ink-soft);}
.subtema .barra{display:block;width:110px;height:6px;border-radius:999px;background:rgba(0,0,0,.3);overflow:hidden;}
.subtema .barra span{display:block;height:100%;background:var(--verde);}
.subtema .lista-aulas{border:0;border-top:1px solid var(--borda);border-radius:0;box-shadow:none;background:none;}

/* ---------- comentários por aula ---------- */
.comentarios{margin-top:28px;}
.comentarios h3{font-size:1.1rem;margin-bottom:14px;}
.comentario-form textarea{
  width:100%;background:var(--surface);border:1px solid var(--borda);border-radius:14px;
  padding:12px 14px;color:var(--ink);font-family:'Roboto',sans-serif;font-size:14.5px;resize:vertical;min-height:70px;
}
.aviso-lgpd{margin-top:8px;font-size:12px;color:var(--ink-soft);}
.comentario{background:var(--surface);border:1px solid var(--borda);border-radius:14px;padding:14px 16px;margin-top:12px;}
.comentario .autor{font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:13.5px;}
.comentario .corpo{margin-top:6px;font-size:14px;color:var(--ink-soft);}
.comentario.resposta-admin{border-color:rgba(86,202,201,.4);background:rgba(86,202,201,.06);margin-left:20px;}
.comentario.resposta-admin .autor{color:var(--verde-texto);}
.comentario.oculto{opacity:.6;}

/* ---------- avanço automático ---------- */
.aviso-proxima{
  position:fixed;bottom:24px;right:24px;z-index:80;background:var(--surface);border:1px solid var(--borda);
  border-radius:16px;padding:16px 20px;box-shadow:var(--sombra);display:flex;align-items:center;gap:14px;
}
.aviso-proxima .contagem{font-family:'Goodly','Ubuntu',sans-serif;font-weight:700;font-size:1.3rem;color:var(--verde-texto);}
/* Sem isto o `display:flex` acima venceria o atributo hidden e a contagem
   apareceria antes do vídeo acabar. */
.aviso-proxima[hidden]{display:none;}
.aviso-proxima .nome-proxima{margin-top:4px;font-size:13px;color:var(--ink-soft);max-width:26ch;}
.fim-de-bloco{
  margin-top:18px;background:var(--surface);border:1px solid rgba(86,202,201,.4);border-radius:var(--raio);
  padding:18px 20px;font-size:14.5px;color:var(--ink-soft);
}
.fim-de-bloco strong{color:var(--ink);}
.fim-de-bloco p+p{margin-top:6px;}
.btn-avancar{
  display:inline-block;margin-top:14px;background:var(--verde);color:#0E2A2A;border-radius:10px;
  padding:11px 28px;font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:15px;text-decoration:none;
}
.nota-conclusao{margin-top:8px;font-size:12.5px;color:var(--ink-soft);max-width:44ch;}
.nav-aulas{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap;}
.nav-aulas-vazio{color:var(--ink-soft);font-size:13.5px;}
.btn-proxima-aula{margin-top:0;margin-left:auto;display:inline-flex;align-items:center;gap:8px;}
.btn-proxima-aula svg{width:18px;height:18px;}

/* ---------- Fase 1: aviso, estado vazio e tela de admin ---------- */
.aviso{margin-top:16px;background:rgba(86,202,201,.1);border:1px solid rgba(86,202,201,.4);color:var(--texto-verde-chip);border-radius:10px;padding:12px 14px;font-size:13.5px;text-align:left;}
.campo select{
  width:100%;background:var(--escuro-2);border:1px solid var(--borda);border-radius:12px;
  padding:12px 14px;color:var(--ink);font-size:15px;font-family:'Roboto',sans-serif;
}
.campo select:focus{outline:2px solid var(--verde);outline-offset:1px;}
.estado-vazio{background:var(--surface);border:1px dashed var(--borda);border-radius:var(--raio);padding:40px 24px;text-align:center;color:var(--ink-soft);}
.estado-vazio strong{color:var(--ink);}
.link-uso-unico{margin-top:10px;background:var(--escuro-2);border:1px solid var(--borda);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--verde-texto);word-break:break-all;}
.btn-texto{
  background:none;border:1px solid var(--borda);border-radius:10px;color:var(--ink-soft);
  padding:6px 14px;font-size:13px;cursor:pointer;font-family:'Goodly','Ubuntu',sans-serif;
}
.btn-texto:hover{border-color:var(--verde);color:var(--verde-texto);}

footer{border-top:1px solid var(--borda);padding-block:28px;text-align:center;color:var(--ink-soft);font-size:13.5px;}

/* ---------- admin: cartões colapsáveis (conteúdo, módulos, usuários) ----------
   Mesma linguagem visual nas 3 telas de admin: um bloco de nível "container"
   (subtema, módulo, pessoa) que abre e revela itens de nível "folha" dentro
   (aula, ou as ações de um módulo/pessoa) — sempre com o selo indicando o
   nível, pra nunca ficar em dúvida do que está sendo criado/editado. */
.bloco-admin{background:var(--surface);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden;margin-bottom:16px;}
.bloco-admin>summary{cursor:pointer;list-style:none;padding:16px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:15px;}
.bloco-admin>summary::-webkit-details-marker{display:none;}
.bloco-admin>summary::after{content:"▾";color:var(--ink-soft);font-size:13px;margin-left:auto;}
.bloco-admin[open]>summary::after{content:"▴";}
.bloco-admin>summary .titulo{flex:1;min-width:140px;}
.bloco-admin>summary .contagem{font-family:'Roboto',sans-serif;font-weight:400;font-size:12.5px;color:var(--ink-soft);}
.bloco-admin .corpo{padding:0 20px 20px;border-top:1px solid var(--borda);}
.rotulo-nivel{background:var(--azul-2);color:#fff;font-family:'Roboto',sans-serif;font-weight:500;font-size:10px;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:3px 9px;flex:none;}
.rotulo-nivel.folha{background:var(--escuro-2);color:var(--verde-texto);border:1px solid var(--borda);}
.rotulo-nivel.alerta{background:rgba(224,80,80,.16);color:var(--texto-erro);border:1px solid rgba(224,80,80,.4);}
.acoes-bloco{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0;}

/* Lista de pessoas (admin_usuarios.html): TODAS as colunas com largura fixa
   — inclusive e-mail (corta com "..." se for grande) e nome (idem). Cada
   linha é um <details> separado, ou seja, um grid independente da linha de
   cima: se alguma coluna fosse "auto"/conteúdo (como e-mail antes), duas
   pessoas com e-mails de tamanho diferente desalinhavam os selos de novo,
   mesmo com os selos em si sendo largura fixa — o espaço sobrando ia todo
   pra coluna do nome (1fr), que aí ficava com tamanho diferente por linha.
   Só largura fixa em tudo garante que a coluna bate igual sempre. */
.linha-pessoa>summary{
  display:grid;grid-template-columns:36px 1fr 92px 104px 68px 230px 16px;
  align-items:center;column-gap:12px;row-gap:0;
}
.linha-pessoa>summary .titulo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.linha-pessoa>summary .contagem{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.linha-pessoa>summary .rotulo-nivel:empty{visibility:hidden;}
.badge-duvidas{
  justify-self:start;background:rgba(240,180,60,.16);color:var(--texto-amber);border:1px solid rgba(240,180,60,.4);
  border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;cursor:pointer;flex:none;
}
.badge-duvidas:hover{background:rgba(240,180,60,.28);}
.badge-duvidas-total{color:var(--texto-amber);font-weight:500;}
.status-badge{
  font-family:'Roboto',sans-serif;font-weight:500;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  border-radius:999px;padding:3px 9px;text-align:center;flex:none;
}
.status-badge.status-ativo{background:rgba(86,202,201,.16);color:var(--texto-verde-chip);border:1px solid rgba(86,202,201,.4);}
.status-badge.status-inativo{background:rgba(224,80,80,.16);color:var(--texto-erro);border:1px solid rgba(224,80,80,.4);}
.status-badge.status-visitante{background:color-mix(in srgb, var(--ink) 8%, transparent);color:var(--ink-soft);border:1px solid var(--borda);}

.duvida-pendente{margin-top:16px;}
.duvida-pendente-onde{font-size:12px;color:var(--ink-soft);}
.duvida-pendente-corpo{margin-top:6px;font-size:14px;background:var(--escuro-2);border-radius:10px;padding:10px 12px;}
.separador-duvida{border:0;border-top:1px solid var(--borda);margin:16px 0 0;}

/* Progresso de aulas por pessoa (admin_usuarios.html) — barrinha simples,
   sem sequência de dias/XP do WordPress antigo (pedido explícito do dono
   de manter mais enxuto): só "quanto já concluiu em cada módulo". */
.linha-progresso-usuario{font-size:12.5px;color:var(--ink-soft);}
.linha-progresso-cabeca{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px;}
.trilha-progresso-usuario{background:var(--escuro-2);border-radius:999px;height:6px;overflow:hidden;}
.trilha-progresso-usuario>span{display:block;height:100%;background:var(--verde);border-radius:999px;}

/* Módulo já liberado pra pessoa (admin_usuarios.html) — verde de propósito,
   pra não ter dúvida do que já funciona hoje vs. o seletor de liberar um novo. */
.pill-modulo-ativo{
  display:inline-flex;align-items:center;gap:6px;background:rgba(86,202,201,.14);color:var(--verde-texto);
  border:1px solid rgba(86,202,201,.4);border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;font-weight:500;
}
.aviso-sem-senha{margin-top:10px;font-size:12.5px;color:var(--texto-erro);}
.btn-texto-destaque{border-color:var(--verde);color:var(--verde-texto);}

.item-admin{background:var(--escuro-2);border:1px solid var(--borda);border-radius:12px;margin-top:12px;overflow:hidden;}
.item-admin>summary{cursor:pointer;list-style:none;padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:13.5px;flex-wrap:wrap;}
.item-admin>summary::-webkit-details-marker{display:none;}
.item-admin>summary::after{content:"editar ▾";color:var(--ink-soft);font-size:12px;margin-left:auto;flex:none;}
.item-admin[open]>summary::after{content:"editar ▴";}
.item-admin>summary .status-nao-publicada{color:var(--texto-erro);font-size:12px;}
.item-admin .corpo{padding:4px 14px 14px;border-top:1px solid var(--borda);}

.recem-criado{outline:2px solid var(--verde);outline-offset:2px;animation:pisca-verde 2.4s ease-out 1;}
@keyframes pisca-verde{0%{box-shadow:0 0 0 6px rgba(86,202,201,.35);}100%{box-shadow:0 0 0 0 rgba(86,202,201,0);}}

dialog.modal{border:1px solid var(--borda);border-radius:var(--raio);background:var(--surface);color:var(--ink);padding:26px 24px;max-width:520px;width:calc(100% - 48px);max-height:calc(100vh - 48px);overflow-y:auto;box-shadow:var(--sombra);}
dialog.modal::backdrop{background:rgba(6,14,26,.72);backdrop-filter:blur(2px);}
dialog.modal h2{font-size:1.15rem;margin-bottom:4px;}
dialog.modal p.sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:4px;}
.modal-rodape{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;}

/* ---------- trilha de navegação (breadcrumb) ---------- */
.faixa-migalhas{padding-block:22px 0;}
.migalhas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:'Goodly','Ubuntu',sans-serif;font-weight:500;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);}
.migalhas a, .migalhas .atual{display:inline-flex;align-items:center;gap:5px;}
.migalhas svg{width:13px;height:13px;flex:none;}
.migalhas a{color:var(--ink-soft);}
.migalhas a:hover{color:var(--verde-texto);}
.migalhas .separador{color:color-mix(in srgb, var(--ink-soft) 50%, transparent);font-size:13px;}
.migalhas .atual{color:var(--verde-texto);}

/* ---------- página do módulo (projeto) ---------- */
.hero-projeto{padding-block:18px 30px;}
.hero-projeto-grade{display:grid;gap:28px;align-items:center;}
@media (min-width:860px){
  .hero-projeto-grade{grid-template-columns:1.3fr 1fr;}
  .hero-projeto-grade.sem-capa{grid-template-columns:1fr;}
}
.hero-projeto .capa-modulo{margin-bottom:0;}
.btn-continuar{width:auto;display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:13px 26px;}

/* ---------- painel lateral do player (sidebar) ---------- */
.painel-lateral{
  background:var(--surface);border:1px solid var(--borda);border-radius:var(--raio);
  padding:20px;box-shadow:var(--sombra);
}
.painel-cabeca{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--borda);}
.painel-rotulo{display:block;font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--verde-texto);margin-bottom:4px;}
.painel-cabeca h2{font-size:1.05rem;}
.painel-anel{
  flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:12px;color:var(--ink);
  background:conic-gradient(var(--verde) calc(var(--percentual) * 1%), color-mix(in srgb, var(--ink) 12%, transparent) 0);
}
.painel-lateral .subtema{margin-bottom:10px;}
.painel-lateral .subtema:last-child{margin-bottom:0;}
.num-subtema{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--escuro-2);border:1px solid var(--borda);
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:11.5px;
  font-family:'Roboto',sans-serif;font-weight:500;
}
.num-subtema.feito{background:var(--verde);border-color:var(--verde);color:#0E2A2A;}
.subtema[open]>summary .num-subtema{background:var(--azul-2);border-color:var(--azul-2);color:#fff;}
.aula-item.atual{border-left:3px solid var(--verde);padding-left:15px;}

/* ---------- avatar circular (comentários e lista de pessoas do admin) ---------- */
.avatar{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--azul-2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Goodly','Ubuntu',sans-serif;font-weight:600;font-size:12px;
}
.comentario-cabeca{display:flex;align-items:center;gap:10px;}
.comentario.resposta-admin .avatar{background:var(--verde);color:#0E2A2A;}

/* ---------- ações rápidas da aula (concluir, favoritar, avaliar, modo teatro) ---------- */
.aula-titulo-cabeca{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.acoes-aula{display:flex;align-items:center;gap:8px;flex:none;}
.icone-acao{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--borda);background:var(--escuro-2);
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
}
.icone-acao svg{width:18px;height:18px;}
.icone-acao:hover{border-color:var(--verde);color:var(--verde-texto);}
.icone-acao.ativo{background:var(--verde);border-color:var(--verde);color:#0E2A2A;}

.popover-avaliar{position:relative;}
.popover-avaliar>summary{list-style:none;}
.popover-avaliar>summary::-webkit-details-marker{display:none;}
.popover-avaliar .media-avaliacao{
  position:absolute;bottom:-3px;right:-3px;background:var(--azul-2);color:#fff;font-size:9px;
  border-radius:999px;padding:1px 4px;font-family:'Roboto',sans-serif;font-weight:600;line-height:1.3;
}
.popover-corpo{
  position:absolute;top:calc(100% + 8px);right:0;z-index:5;background:var(--surface);border:1px solid var(--borda);
  border-radius:14px;padding:14px 16px;box-shadow:var(--sombra);min-width:210px;
}
.popover-corpo p{font-size:12.5px;color:var(--ink-soft);}
.estrelas{display:flex;gap:4px;margin-top:8px;}
.estrelas button{background:none;border:0;font-size:24px;line-height:1;color:color-mix(in srgb, var(--ink) 25%, transparent);cursor:pointer;padding:2px;}
.estrelas button:hover{color:var(--verde-texto);}
.estrelas button.cheia{color:var(--verde-texto);}
.media-info{margin-top:10px;}

/* Modo teatro: some com a barra lateral, o vídeo fica sozinho e mais largo. */
.player-grade.modo-teatro{grid-template-columns:1fr;}
.player-grade.modo-teatro aside{display:none;}
.player-grade.modo-teatro .video-box{max-width:1040px;margin-inline:auto;width:100%;}

/* Materiais de apoio (Fase 7) — lado do aluno. */
.materiais-aula{margin-top:24px;}
.materiais-aula h3{font-size:1.1rem;margin-bottom:14px;}
.lista-materiais{display:flex;flex-direction:column;gap:8px;}
.material-item{
  display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--borda);
  border-radius:12px;padding:11px 14px;
}
.material-icone{font-size:16px;flex:none;}
.material-nome{flex:1;font-size:13.5px;}
.material-acao{
  flex:none;color:var(--verde-texto);font-size:13px;font-weight:600;text-decoration:none;border:1px solid rgba(86,202,201,.4);
  border-radius:10px;padding:5px 14px;
}
.material-acao:hover{background:rgba(86,202,201,.12);}

/* Materiais de apoio (Fase 7) — lado do admin, dentro do item-admin da aula. */
.materiais-admin{margin-top:18px;padding-top:14px;border-top:1px solid var(--borda);}
.rotulo-materiais{font-size:12.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.lista-materiais-admin{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.lista-materiais-admin li{
  display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--borda);
  border-radius:8px;padding:7px 10px;font-size:13px;
}
.material-titulo-admin{flex:1;}
.sem-materiais{color:var(--ink-soft);font-size:13px;margin-bottom:14px;}
.form-material-admin{max-width:420px;}
.campo-tipo-material{display:flex;gap:16px;font-size:13px;color:var(--ink-soft);}
.campo-tipo-material label{display:flex;align-items:center;gap:5px;}
.dica-material{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:5px;}