/* AVA ConfecSoft. Cores e componentes da base visual aprovada (BaseVisual.dc.html).
   Marca: ConfecSoft.LandingPage/public/brand. #22c55e é só identidade, nunca fundo de botão. */

:root {
  --verde-marca: #22c55e;
  --verde-acao: #15803d;
  --verde-escuro: #166534;
  --verde-progresso: #16a34a;
  --verde-no-escuro: #4ade80;
  --verde-claro: #f0fdf4;
  --verde-fundo-tag: #dcfce7;
  --ambar-texto: #8A3409;
  --ambar-fundo: #FDEEDF;
  --vermelho: #B42318;
  --vermelho-fundo: #FDECEA;
  --grafite: #18181b;
  --grafite-2: #27272a;
  --texto: #18181b;
  --texto-2: #52525b;
  --borda: #e4e4e7;
  --borda-input: #d4d4d8;
  --fundo: #fafafa;
  --superficie: #ffffff;
  --fonte: 'Poppins', system-ui, sans-serif;
  --fonte-logo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --raio: 10px;
  --raio-cartao: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 16px; line-height: 1.5; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0; }
a { color: var(--verde-acao); }
a:hover { color: var(--verde-escuro); }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca__nome { font: 700 18px var(--fonte-logo); letter-spacing: -0.3px; color: #52525b; }
.marca--clara .marca__nome { color: #ffffff; }
.marca__selo { padding: 3px 9px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-acao); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.marca--clara .marca__selo { background: var(--grafite-2); color: var(--verde-no-escuro); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--raio); border: 1px solid transparent; font: 600 15px var(--fonte); cursor: pointer; text-decoration: none; }
.btn--grande { min-height: 48px; font-size: 16px; }
.btn--principal { background: var(--verde-acao); color: #fff; }
.btn--principal:hover { background: var(--verde-escuro); color: #fff; }
.btn--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda); }
.btn--secundario:hover { border-color: #a1a1aa; color: var(--texto); }
.btn:disabled { background: #a1a1aa; color: #fff; cursor: not-allowed; }

/* Formulário */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__rotulo { font-size: 14px; font-weight: 600; }
.campo__ajuda { font-size: 14px; color: var(--texto-2); }
.campo__erro { font-size: 14px; font-weight: 600; color: var(--vermelho); }
.input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--borda-input); border-radius: var(--raio); font: 16px var(--fonte); background: var(--superficie); color: var(--texto); }
.input:focus { outline: 2px solid var(--verde-acao); outline-offset: 1px; border-color: var(--verde-acao); }
.input[aria-invalid="true"] { border-color: var(--vermelho); }

/* Login (Main.dc.html) */
.login { min-height: 100vh; display: flex; flex-wrap: wrap; }
.login__marca { flex: 1 1 420px; background: var(--grafite); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.login__marca .marca__nome { font-size: 22px; }
.login__chamada { display: flex; flex-direction: column; gap: 20px; max-width: 460px; }
.login__chamada h1 { font-size: 44px; line-height: 1.1; color: #fff; }
.login__chamada p { font-size: 18px; line-height: 1.6; color: #d4d4d8; }
.login__rodape { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #a1a1aa; }
.login__autoria { font-size: 13px; }
.login__lado { flex: 1 1 420px; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.login__form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
.login__form h2 { font-size: 28px; }
.login__sub { color: var(--texto-2); }
.login__nota { font-size: 15px; color: var(--texto-2); }
.divisor { height: 1px; background: var(--borda); }

@media (max-width: 600px) {
  .login__marca { padding: 32px 24px; gap: 32px; }
  .login__chamada h1 { font-size: 32px; }
}

/* Comuns */
.texto-2 { color: var(--texto-2); }
.forte { font-weight: 600; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.campo__dica { font-size: 13px; color: var(--texto-2); }
.input--mono { font-family: ui-monospace, Menlo, monospace; }
select.input { min-height: 44px; }
.linha-campo { display: flex; gap: 8px; }
.linha-campo .btn { flex: none; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cartao h2 { font-size: 19px; }
.cartao__cabeca { display: flex; flex-direction: column; gap: 4px; }
.cartao__cabeca p { font-size: 15px; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.input[readonly] { background: var(--fundo); color: var(--texto-2); }
.tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.tag--ok { background: var(--verde-fundo-tag); color: var(--verde-escuro); }
.tag--neutra { background: #f4f4f5; color: #3f3f46; }
.vazio { background: var(--superficie); border: 1px dashed var(--borda-input); border-radius: var(--raio-cartao); padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.vazio strong { font-size: 17px; }
.vazio span { font-size: 15px; color: var(--texto-2); }
.vazio--dentro { border: 0; border-top: 1px solid var(--borda); border-radius: 0; }
.aviso { padding: 12px 16px; border-radius: var(--raio); background: var(--verde-claro); color: var(--verde-escuro); font-size: 15px; font-weight: 600; }
.aviso--alerta { background: var(--ambar-fundo); color: var(--ambar-texto); }

/* Área do aluno (AlunoCursos, AlunoConta) */
.topo { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topo__dentro { max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.topo__menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.topo__conta { display: flex; align-items: center; gap: 4px; }
.nav { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--raio); color: #3f3f46; text-decoration: none; font-weight: 600; font-size: 15px; }
.nav:hover { background: #f4f4f5; color: var(--texto); }
.nav[aria-current="page"] { background: var(--verde-claro); color: var(--verde-acao); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--verde-no-escuro); color: var(--grafite); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.pagina { max-width: 1200px; margin: 0 auto; padding: 40px 24px 64px; display: flex; flex-direction: column; gap: 32px; }
.pagina--estreita { max-width: 760px; gap: 24px; }
.pagina h1 { font-size: 32px; }
.pagina__titulo { display: flex; flex-direction: column; gap: 6px; }

/* Área do admin (AdminPainel, AdminAlunos) */
.admin { min-height: 100vh; display: flex; flex-wrap: wrap; }
.admin__menu { flex: 1 1 240px; background: var(--grafite); color: #fff; padding: 20px 14px; display: flex; flex-direction: column; gap: 24px; }
.admin__menu .marca { padding: 0 8px; }
.marca__selo--admin { padding: 3px 8px; font-size: 11px; }
.admin__nav { display: flex; flex-direction: column; gap: 4px; }
.admin__rodape { margin-top: auto; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--grafite-2); padding-top: 16px; }
.snav { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--raio); color: #d4d4d8; text-decoration: none; font-weight: 600; font-size: 15px; }
.snav:hover { background: var(--grafite-2); color: #fff; }
.snav[aria-current="page"] { background: var(--verde-acao); color: #fff; }
.admin__conteudo { flex: 999 1 560px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.admin__conteudo h1 { font-size: 30px; }
.admin__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.admin__colunas { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.admin__principal { flex: 999 1 520px; min-width: 0; }
.admin__lateral { flex: 1 1 320px; padding: 20px; gap: 14px; }
.admin__lateral h2 { font-size: 18px; }
.admin__lateral .input { min-height: 44px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.numero { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.numero span { font-size: 14px; color: var(--texto-2); font-weight: 600; }
.numero strong { font-size: 32px; font-weight: 700; }

/* Tabelas */
.cartao--tabela { padding: 0; gap: 0; overflow: hidden; }
.filtros { padding: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.filtros .input { min-height: 44px; }
.filtros__busca { flex: 1 1 240px; width: auto; }
.filtros__situacao { flex: 0 1 180px; width: auto; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; min-width: 560px; }
.tabela th { text-align: left; font-size: 13px; font-weight: 700; color: var(--texto-2); padding: 12px 16px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 12px 16px; border-bottom: 1px solid #f4f4f5; font-size: 15px; white-space: nowrap; }

/* Comuns da Fase 2 */
.texto-pequeno { font-size: 14px; }
.sem-quebra { white-space: nowrap; }
.icone-fixo { flex: none; }
.icone-verde { color: var(--verde-progresso); }
.rotulo { font-size: 13px; font-weight: 700; color: var(--texto-2); letter-spacing: 0.04em; }
.caminho { font-size: 14px; color: var(--texto-2); display: flex; gap: 8px; flex-wrap: wrap; }
.tag--alerta { background: var(--ambar-fundo); color: var(--ambar-texto); }
.tag--pequena { padding: 2px 8px; font-size: 12px; }
.titulo-com-tag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--pequeno { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn--perigo { color: var(--vermelho); }
.btn--perigo:hover { color: var(--vermelho); border-color: var(--vermelho); }
.btn--secundario:disabled { background: var(--fundo); color: #a1a1aa; border-color: var(--borda); }
.campo--largo { grid-column: 1 / -1; }
textarea.input { padding: 12px 14px; line-height: 1.6; resize: vertical; }
.caixa { display: flex; align-items: center; gap: 10px; font-size: 15px; min-height: 44px; }
.caixa input { width: 20px; height: 20px; accent-color: var(--verde-acao); margin: 0; }

/* Admin: cursos (AdminCursos, AdminCursoEditar) */
.grade-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.capa { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #3f3f46; }
.capa--icone { display: flex; align-items: center; justify-content: center; background: var(--verde-claro); color: var(--verde-acao); }
.capa-campo { padding-bottom: 20px; }
.capa-campo__linha { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.capa-campo__previa { width: 240px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raio); background: #3f3f46; }
.capa-campo__previa--vazia { display: flex; align-items: center; justify-content: center; background: var(--verde-claro); color: var(--verde-acao); }
.capa-campo__acoes { display: flex; flex-direction: column; gap: 10px; }
.capa-campo label.btn { cursor: pointer; }
.capa-campo form:focus-within label.btn { outline: 2px solid var(--verde-acao); outline-offset: 1px; }
.curso-admin { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); overflow: hidden; display: flex; flex-direction: column; }
.curso-admin__corpo { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.curso-admin__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.curso-admin__topo h2 { font-size: 17px; line-height: 1.35; }
.curso-admin__topo .tag { flex: none; }
.curso-admin__acoes { display: flex; gap: 10px; margin-top: auto; }
.curso-admin__acoes .btn { flex: 1; }
.mini-numeros { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-numeros div { display: flex; flex-direction: column; gap: 2px; }
.mini-numeros dt { font-size: 13px; color: var(--texto-2); }
.mini-numeros dd { margin: 0; font-size: 18px; font-weight: 700; }
.dados-curso { padding: 0 20px; gap: 0; }
.dados-curso summary { min-height: 56px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.dados-curso form { padding-bottom: 20px; }
.dados-curso .input, .admin__conteudo form .input { min-height: 44px; }
.editor-curso { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.estrutura { flex: 1 1 340px; padding: 16px; gap: 12px; }
.estrutura h2 { font-size: 17px; }
.estrutura__cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modulo-admin { border: 1px solid #f4f4f5; border-radius: var(--raio); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.modulo-admin__topo, .linha-item { display: flex; align-items: center; gap: 4px; }
.modulo-admin__rodape { padding: 6px 6px 2px; }
.item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--texto); text-decoration: none; font-size: 15px; font-weight: 500; }
.item:hover { background: var(--fundo); color: var(--texto); }
.item--modulo { font-size: 14px; font-weight: 700; }
.item--atual { background: var(--verde-claro); border-color: var(--verde-acao); font-weight: 700; }
.item__tipo { width: 46px; flex: none; font-size: 12px; font-weight: 700; color: var(--texto-2); }
.item__titulo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mover { display: flex; flex: none; gap: 2px; }
.mover button { width: 32px; height: 32px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto-2); font-size: 15px; cursor: pointer; }
.mover button:hover:not(:disabled) { border-color: #a1a1aa; color: var(--texto); }
.mover button:disabled { opacity: 0.35; cursor: default; }
.painel-edicao { flex: 999 1 420px; min-width: 0; padding: 20px; }
.painel-edicao h2 { font-size: 18px; }
.painel-edicao__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.painel-edicao__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.editor__barra { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--borda-input); border-bottom: 0; border-radius: var(--raio) var(--raio) 0 0; background: var(--fundo); }
.editor__barra button { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 6px; font: 600 15px var(--fonte); color: var(--texto); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.editor__barra button:hover { background: #f4f4f5; }
.editor__barra i { font-family: Georgia, serif; }
.editor__texto { border-radius: 0 0 var(--raio) var(--raio); }

/* Aluno: cursos, curso e aula (AlunoCursos, AlunoCurso, AlunoAula, MobileAula) */
.pagina__sub { font-size: 17px; color: var(--texto-2); }
.secao { display: flex; flex-direction: column; gap: 16px; }
.secao h2 { font-size: 22px; }
.grade-cursos--aluno { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.curso-cartao { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); overflow: hidden; text-decoration: none; color: var(--texto); }
.curso-cartao:hover { border-color: #a1a1aa; color: var(--texto); }
.curso-cartao__corpo { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.curso-cartao__corpo h3 { font-size: 17px; line-height: 1.35; }
.pagina--curso { padding-top: 28px; gap: 28px; }
.curso-cabeca { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.curso-cabeca__texto { display: flex; flex-direction: column; gap: 12px; flex: 1 1 520px; }
.pagina .curso-cabeca h1 { font-size: 34px; line-height: 1.15; }
.curso-cabeca__descricao { font-size: 17px; line-height: 1.6; color: var(--texto-2); max-width: 680px; white-space: pre-line; }
.curso-colunas, .aula-colunas { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.curso-colunas__principal { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.curso-colunas__lateral { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; }
.modulo { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); overflow: hidden; }
.modulo__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 20px; }
.modulo__cabeca div { display: flex; flex-direction: column; gap: 2px; }
.modulo__cabeca h2 { font-size: 18px; }
.linha-aula { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 20px; text-decoration: none; color: var(--texto); border-top: 1px solid #f4f4f5; }
.linha-aula:hover { background: var(--fundo); color: var(--texto); }
.linha-aula__titulo { flex: 1; font-weight: 500; }
.cartao--lateral { padding: 20px; gap: 14px; }
.cartao--lateral h2 { font-size: 17px; }
.cartao--linha { flex-direction: row; align-items: flex-start; }
.cartao--linha div { display: flex; flex-direction: column; gap: 4px; }
.cartao--linha p { font-size: 15px; line-height: 1.5; }
.lista-dados { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.lista-dados div { display: flex; justify-content: space-between; gap: 8px; }
.lista-dados dt { color: var(--texto-2); }
.lista-dados dd { margin: 0; font-weight: 600; }
.pagina--aula { padding-top: 24px; gap: 20px; }
.aula { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.aula__video { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--raio-cartao); background: #09090b; overflow: hidden; }
.aula__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.aula__cabeca { display: flex; flex-direction: column; gap: 6px; }
.pagina .aula__cabeca h1 { font-size: 28px; }
.aula__texto { font-size: 17px; line-height: 1.7; gap: 14px; }
.aula__texto ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.aula__texto a { overflow-wrap: anywhere; }
.aula__navegacao { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.lista-lateral { flex: 1 1 300px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); overflow: hidden; }
.lista-lateral__cabeca { padding: 16px; }
.lista-lateral__cabeca h2 { font-size: 16px; }
.lista-lateral__modulo { padding: 10px 16px; background: var(--fundo); border-top: 1px solid #f4f4f5; font-size: 13px; font-weight: 700; color: var(--texto-2); letter-spacing: 0.04em; }
.lista-lateral__aula { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border-top: 1px solid #f4f4f5; color: var(--texto); text-decoration: none; font-size: 15px; }
.lista-lateral__aula:hover { background: var(--fundo); color: var(--texto); }
.lista-lateral__aula[aria-current="page"] { background: var(--verde-claro); font-weight: 700; }
.lista-lateral__todas { display: block; padding: 14px 16px; border-top: 1px solid #f4f4f5; font-size: 15px; font-weight: 600; }

/* ---------- Progresso (AlunoCursos, AlunoCurso, AlunoAula, AdminMatriculas, AdminProgresso) ---------- */
.barra { flex: 1; height: 8px; border-radius: 99px; background: var(--borda); overflow: hidden; }
.barra__cheia { height: 100%; border-radius: 99px; background: var(--verde-progresso); }
.barra__cheia--completa { background: var(--verde-acao); }
.barra--grossa { height: 10px; }
.barra--fina { height: 6px; }
.barra--escura { background: var(--grafite-2); }
.barra--escura .barra__cheia { background: var(--verde-no-escuro); }
.linha-barra { display: flex; align-items: center; gap: 12px; }
.linha-barra__pct { min-width: 40px; text-align: right; }
.curso-cabeca__barra { max-width: 520px; }
.curso-cartao__corpo { flex: 1; }
.curso-cartao__barra { margin-top: auto; padding-top: 6px; gap: 10px; }
.tag--inicio { align-self: flex-start; }
.continuar { background: var(--grafite); color: #fff; border-radius: 16px; padding: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.continuar__texto { display: flex; flex-direction: column; gap: 8px; flex: 1 1 360px; }
.continuar__rotulo { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--verde-no-escuro); }
.continuar h2 { font-size: 24px; color: #fff; }
.continuar__curso { font-size: 15px; color: #d4d4d8; }
.continuar__barra { margin-top: 6px; max-width: 420px; }
.btn--claro { background: #fff; color: var(--grafite); }
.btn--claro:hover { background: #f4f4f5; color: var(--grafite); }
.secao__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); font-weight: 600; font-size: 15px; text-decoration: none; }
.chip:hover { border-color: #a1a1aa; color: var(--texto); }
.chip[aria-current="page"] { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.aula__topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.btn--concluida { background: var(--verde-fundo-tag); color: var(--verde-escuro); border-color: #b2ebc1; }
.btn--concluida:hover { border-color: var(--verde-acao); color: var(--verde-escuro); }
.lista-lateral__cabeca { display: flex; flex-direction: column; gap: 10px; }
.form-linha { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 20px; }
.form-linha__campo { flex: 1 1 220px; }
.filtros--titulo { justify-content: space-between; align-items: center; }
.filtros--titulo h2 { font-size: 18px; }
.filtros__curso { flex: 0 1 280px; width: auto; }
.tabela--larga { min-width: 720px; }
.link-discreto { color: var(--texto); text-decoration: none; }
.link-discreto:hover { color: var(--verde-acao); text-decoration: underline; }
.celula-barra { min-width: 160px; gap: 10px; }
.celula-acao { text-align: right; }
.cartao__titulo-tabela { font-size: 18px; padding: 18px 16px 8px; }
.cartao__titulo-tabela--link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 16px; }
.cartao__titulo-tabela--link h2 { font-size: 18px; }
.linha-escolhida { background: var(--fundo); }
.admin__cabeca--base { align-items: flex-end; }
.escolha-aluno { flex: 0 1 320px; }
.admin__pilha { display: flex; flex-direction: column; gap: 24px; }
.ficha-aluno { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 20px; }
.avatar--grande { width: 56px; height: 56px; font-size: 20px; flex: none; }
.ficha-aluno__nome { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; }
.ficha-aluno__nome strong { font-size: 20px; }
.ficha-aluno__nome span { font-size: 15px; }
.ficha-aluno__numeros { margin: 0; display: flex; flex-wrap: wrap; gap: 28px; }
.ficha-aluno__numeros div { display: flex; flex-direction: column; gap: 2px; }
.ficha-aluno__numeros dt { font-size: 13px; color: var(--texto-2); }
.ficha-aluno__numeros dd { margin: 0; font-size: 22px; font-weight: 700; }
.por-modulo { max-width: 640px; }
.por-modulo__item { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.por-modulo__item .barra { flex: none; }
.por-modulo__linha { display: flex; justify-content: space-between; gap: 12px; }

/* ---------- Quiz (AlunoQuiz, AdminQuiz, AdminProgresso) ---------- */
.aviso--erro { background: var(--vermelho-fundo); color: #7A1A12; }
.pagina--quiz { max-width: 820px; padding-top: 24px; gap: 24px; }
.quiz-cabeca { display: flex; flex-direction: column; gap: 10px; }
.pagina .quiz-cabeca h1 { font-size: 30px; }
.quiz-cabeca__dados { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--texto-2); }
.resultado { border-radius: var(--raio-cartao); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.resultado--ok { background: var(--verde-fundo-tag); border: 1px solid #b2ebc1; color: var(--verde-escuro); }
.resultado--erro { background: var(--vermelho-fundo); border: 1px solid #F3C1BB; color: #7A1A12; }
.resultado__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.resultado__nota { width: 92px; height: 92px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff; background: var(--verde-acao); }
.resultado--erro .resultado__nota { background: var(--vermelho); }
.resultado__texto { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; font-size: 16px; }
.resultado__texto strong { font-size: 22px; }
.quiz-form { display: flex; flex-direction: column; gap: 16px; }
.pergunta { margin: 0; min-width: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pergunta legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-size: 17px; font-weight: 600; line-height: 1.5; }
.quiz-opcao { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); cursor: pointer; font-size: 16px; }
.quiz-opcao:has(input:checked) { border-color: var(--verde-acao); background: var(--verde-claro); }
.quiz-opcao:has(input:focus-visible) { outline: 2px solid var(--verde-acao); outline-offset: 1px; }
.quiz-opcao:has(input:disabled) { cursor: default; }
.quiz-opcao input, .opcao-admin input[type="radio"] { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--verde-acao); }
.quiz-opcao__texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.quiz-opcao__selo { font-size: 13px; font-weight: 700; }
.quiz-opcao--certa, .quiz-opcao--certa:has(input:checked) { border-color: var(--verde-acao); background: var(--verde-fundo-tag); color: var(--verde-escuro); }
.quiz-opcao--errada, .quiz-opcao--errada:has(input:checked) { border-color: var(--vermelho); background: var(--vermelho-fundo); color: #7A1A12; }
.quiz-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; font-size: 15px; }
.editor-quiz { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.editor-quiz__principal { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.editor-quiz__lateral { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.dados-quiz { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.dados-quiz .caixa { grid-column: 1 / -1; min-height: 0; }
.pergunta-admin { gap: 12px; }
.pergunta-admin legend { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.pergunta-admin .input { font-weight: 600; }
.botao-icone { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--vermelho); display: inline-flex; align-items: center; justify-content: center; }
.botao-icone:hover { background: var(--vermelho-fundo); }
.opcao-admin { display: flex; align-items: center; gap: 10px; }
.opcao-admin .input { font-weight: 400; }
.opcao-admin:has(input[type="radio"]:checked) .input { border-color: var(--verde-acao); background: var(--verde-fundo-tag); }
.btn--tracejado { border-style: dashed; min-height: 52px; }
.cartao__titulo-tabela + .tabela-rolagem .tabela { min-width: 0; }
.tabela td.resultado-ok { color: var(--verde-escuro); font-weight: 600; }
.tabela td.resultado-erro { color: var(--vermelho); font-weight: 600; }
.colunas-progresso { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.colunas-progresso > section { flex: 1 1 360px; }

@media (max-width: 600px) {
  .pagina .quiz-cabeca h1 { font-size: 26px; }
  .quiz-rodape .btn { flex: 1 1 100%; }
  .pagina .curso-cabeca h1 { font-size: 26px; }
  .pagina .aula__cabeca h1 { font-size: 22px; }
  .aula__video { border-radius: 0; margin: 0 -16px; width: calc(100% + 32px); }
  .aula__navegacao .btn { flex: 1 1 100%; }
  .admin__conteudo { padding: 24px 16px; }
  .pagina { padding: 28px 16px 48px; }
  .topo__dentro { padding: 10px 16px; }
}

/* Certificados do aluno (AlunoCertificados.dc.html) */
.pagina--certificados { gap: 28px; }
.certificados__subtitulo { font-size: 20px; }
.certificado-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.certificado-miniatura { width: 168px; height: 118px; flex: none; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie); padding: 8px; }
.certificado-miniatura__folha { width: 100%; height: 100%; border: 2px solid var(--grafite); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.certificado-miniatura__folha div { border-radius: 2px; }
.certificado-miniatura__folha .certificado-miniatura__selo { width: 20px; height: 20px; border-radius: 50%; background: var(--verde-no-escuro); margin-top: 4px; }
.certificado-cartao__corpo { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.certificado-cartao__corpo h2 { font-size: 19px; }
.certificado-cartao__dados { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; color: var(--texto-2); }
.codigo { color: var(--texto); font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
.grade-bloqueados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.bloqueado { background: var(--superficie); border: 1px dashed var(--borda-input); border-radius: var(--raio-cartao); padding: 18px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--texto); }
.bloqueado:hover { color: var(--texto); border-color: #a1a1aa; }
.bloqueado__titulo { display: flex; align-items: center; gap: 10px; }
.bloqueado .linha-barra { gap: 10px; }

/* Verificar certificado (Verificar.dc.html) */
.topo__dentro--publico { justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.pagina--verificar { max-width: 720px; padding-top: 56px; gap: 28px; }
.pagina--verificar h1 { font-size: 34px; }
.form-verificar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-verificar .campo { flex: 1 1 280px; }
.form-verificar .input { letter-spacing: 0.04em; }
.verificado { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); overflow: hidden; }
.verificado__cabeca { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: var(--verde-fundo-tag); border-bottom: 1px solid #b2ebc1; color: var(--verde-escuro); }
.verificado__cabeca div, .alerta-erro div { display: flex; flex-direction: column; gap: 2px; }
.verificado__cabeca strong { font-size: 18px; }
.verificado__cabeca span { font-size: 14px; }
.verificado__dados { margin: 0; padding: 20px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.verificado__dados div { display: flex; flex-direction: column; gap: 4px; }
.verificado__dados dt { font-size: 13px; color: var(--texto-2); font-weight: 600; }
.verificado__dados dd { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.alerta-erro { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: 12px; background: var(--vermelho-fundo); border: 1px solid #F3C1BB; color: #7A1A12; }
.alerta-erro svg { margin-top: 1px; }
.alerta-erro strong { font-size: 16px; }
.alerta-erro span { font-size: 15px; }

@media (max-width: 600px) {
  .pagina--verificar { padding-top: 32px; }
  .pagina--verificar h1 { font-size: 28px; }
  .form-verificar .btn { flex: 1 1 100%; }
  .verificado__dados { grid-template-columns: minmax(0, 1fr); }
  .certificado-cartao .botoes, .certificado-cartao .botoes .btn { flex: 1 1 100%; }
}

/* Admin: editar aluno (AdminAlunoEditar.dc.html) e ações das listas */
.editar-aluno > * { width: 100%; max-width: 920px; }
.editar-aluno__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.editar-aluno__nome { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; }
.editar-aluno__nome h1 { font-size: 30px; }
.editar-aluno__nome .texto-2 { font-size: 15px; }
.editar-aluno__salvar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.editar-aluno__acao { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.editar-aluno__acao > div { display: flex; flex-direction: column; gap: 6px; flex: 1 1 360px; }
.editar-aluno__acao p { font-size: 15px; line-height: 1.5; }
.aviso--senha { display: flex; flex-direction: column; gap: 4px; font-weight: 400; }
.aviso--senha strong { font-size: 15px; }
.aviso--senha span { font-size: 14px; }
.btn--ativar { color: var(--verde-acao); }
.btn--ativar:hover { color: var(--verde-escuro); border-color: var(--verde-acao); }
.celula-acoes { text-align: right; }
.celula-acoes a + a { margin-left: 16px; }
.matricular-em { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.matricular-em legend { margin-bottom: 4px; }
.matricular-em .caixa { min-height: 36px; }
.curso-admin__acoes { flex-wrap: wrap; }
.curso-admin__acoes > .btn { flex: 1 1 100px; }
.curso-admin__situacao { flex: 1 1 100%; display: flex; }
.curso-admin__situacao .btn { flex: 1; }
.matricular-em legend { padding: 0; }
.lista-alunos { flex-basis: 680px; }

/* Admin: trilhas (AdminTrilhas.dc.html, AdminTrilhaEditar.dc.html) */
.grade-trilhas { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.curso-admin__botao { flex: 1 1 100px; display: flex; }
.curso-admin__botao .btn { flex: 1; }
.form-trilha-nova { max-width: 640px; }
.editor-trilha { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.editor-trilha__principal { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.editor-trilha__dados { flex: 1 1 320px; }
.cartao__cabeca--trilha { padding: 18px 20px; }
.cursos-trilha { margin: 0; padding: 0; list-style: none; }
.cursos-trilha__item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid #f4f4f5; }
.cursos-trilha__texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.cursos-trilha__texto strong { font-size: 16px; }
.numero-passo { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--verde-claro); color: var(--verde-acao); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.adicionar-curso { padding: 16px 20px; border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: var(--fundo); }
.adicionar-curso .campo { flex: 1 1 260px; }

/* Aluno: catálogo (AlunoCatalogo.dc.html, MobileCatalogo.dc.html) */
.so-celular { display: none; }
.rotulo--verde { color: var(--verde-acao); letter-spacing: 0.06em; }
.icone-trilha { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--verde-claro); color: var(--verde-acao); display: flex; align-items: center; justify-content: center; }
.grade-trilhas-aluno { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 20px; }
.trilha-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.trilha-cartao__topo { display: flex; align-items: flex-start; gap: 14px; }
.trilha-cartao__nome { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.trilha-cartao__nome h3 { font-size: 19px; line-height: 1.3; }
.trilha-cartao__descricao { font-size: 15px; line-height: 1.55; color: #3f3f46; }
.trilha-cartao__cursos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.trilha-cartao__cursos li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.numero-passo--neutro { width: 24px; height: 24px; font-size: 12px; background: #f4f4f5; color: #3f3f46; }
.trilha-cartao__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; padding-top: 4px; }
.trilha-cartao__botao { margin-left: auto; }
.curso-catalogo:hover { border-color: var(--borda); }
.curso-catalogo__acao { margin-top: auto; padding-top: 6px; display: flex; }
.curso-catalogo__acao > *, .curso-catalogo__acao .btn { flex: 1; display: flex; }
@media (max-width: 600px) {
  .so-tela-larga { display: none; }
  .so-celular { display: inline; }
  .trilha-cartao { padding: 16px; gap: 10px; }
  .trilha-cartao .icone-trilha { display: none; }
  .trilha-cartao__nome h3 { font-size: 17px; }
  .trilha-cartao__descricao { font-size: 14px; color: var(--texto-2); }
  .trilha-cartao__botao, .trilha-cartao__botao .btn { margin-left: 0; flex: 1 1 100%; display: flex; }
  .grade-catalogo { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .curso-catalogo .capa { display: none; }
  .curso-catalogo .curso-cartao__corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 12px 14px; gap: 4px 12px; }
  .curso-catalogo h3 { grid-column: 1; font-size: 15px; line-height: 1.3; }
  .curso-catalogo .curso-cartao__corpo > .texto-2 { grid-column: 1; font-size: 13px; }
  .curso-catalogo__acao { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; }
  .curso-catalogo__acao .btn { padding: 0 14px; font-size: 14px; }
}

/* Aluno: página do curso sem matrícula e "Sair do curso" (AlunoCurso.dc.html) */
.matricular-curso { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.linha-aula--fechada { cursor: default; }
.linha-aula--fechada:hover { background: none; }
.sair-curso { gap: 10px; }
.sair-curso p { font-size: 15px; line-height: 1.5; }
.sair-curso .btn { align-self: flex-start; }
@media (max-width: 600px) {
  .matricular-curso { align-items: stretch; flex: 1 1 100%; }
}

/* Aluno: página da trilha (AlunoTrilha.dc.html) */
.passos-trilha { margin: 0; padding: 0; list-style: none; }
.passo-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 20px; border-top: 1px solid #f4f4f5; }
.passo-trilha:first-child { border-top: 0; }
.passo-trilha__texto { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
.passo-trilha__texto strong { font-size: 17px; }
.passo-trilha .tag { flex: none; }
.marca-passo { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.marca-passo--concluido { background: var(--verde-acao); color: #fff; }
.marca-passo--andamento { background: var(--verde-progresso); color: #fff; }
.marca-passo--bloqueado { background: #f4f4f5; color: var(--texto-2); border: 1px dashed #a1a1aa; }
@media (max-width: 600px) {
  .passo-trilha { padding: 16px; }
  .passo-trilha > .btn { flex: 1 1 100%; }
}

/* Aluno: Meus cursos com trilhas (AlunoCursos.dc.html) */
.proximo-trilha { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 22px; border-radius: 16px; }
.proximo-trilha__texto { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
.proximo-trilha__texto strong { font-size: 18px; }
.proximo-trilha__texto .texto-2 { font-size: 15px; }
.grade-minhas-trilhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.minha-trilha { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 18px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--texto); }
.minha-trilha:hover { border-color: #a1a1aa; color: var(--texto); }
.minha-trilha strong { font-size: 17px; }
@media (max-width: 600px) {
  .proximo-trilha { padding: 16px; }
  .proximo-trilha .icone-trilha { display: none; }
  .proximo-trilha > .btn { flex: 1 1 100%; }
}

/* Certificado de trilha (AlunoCertificados.dc.html) */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag--trilha { background: var(--verde-claro); color: var(--verde-acao); border: 1px solid #bbf7d0; }
.tabela td.celula-quebra { white-space: normal; min-width: 160px; }

/* Celular: os três itens do menu do aluno (Meus cursos, Catálogo, Certificados) cabem numa linha. */
@media (max-width: 600px) {
  .topo__menu { flex: 1 1 100%; gap: 2px; }
  .topo__menu .nav { padding: 0 10px; font-size: 14px; }
}