:root {
    --bg: #F6F8F9;
    --surface: #FFFFFF;
    --surface-2: #F0F4F5;
    --border: #DEE5E8;
    --text: #1A2226;
    --text-muted: #5B6870;
    --accent: #0E7490;
    --accent-forte: #0B5563;
    --accent-tint: #E1F1F3;
    --sucesso: #157F3C;
    --sucesso-tint: #E5F5EA;
    --atencao: #A8570A;
    --atencao-tint: #FBEDDD;
    --erro: #B42318;
    --erro-tint: #FBEAE8;
    --sombra-md: 0 8px 24px -6px rgba(20, 30, 34, .18);

    --raio-sm: 6px;
    --raio-md: 10px;
    --fonte-titulo: ui-serif, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, Georgia, serif;
    --fonte-corpo: ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #10161A;
        --surface: #161E23;
        --surface-2: #1C262B;
        --border: #2B363C;
        --text: #E6EDEF;
        --text-muted: #8FA0A8;
        --accent: #35BFCB;
        --accent-forte: #8FE0E6;
        --accent-tint: #12333A;
        --sucesso: #3FBE72;
        --sucesso-tint: #143024;
        --atencao: #E0A346;
        --atencao-tint: #3A2A12;
        --erro: #F0685C;
        --erro-tint: #3A1614;
        --sombra-md: 0 8px 24px -6px rgba(0, 0, 0, .6);
    }
}

:root[data-theme="dark"] {
    --bg: #10161A;
    --surface: #161E23;
    --surface-2: #1C262B;
    --border: #2B363C;
    --text: #E6EDEF;
    --text-muted: #8FA0A8;
    --accent: #35BFCB;
    --accent-forte: #8FE0E6;
    --accent-tint: #12333A;
    --sucesso: #3FBE72;
    --sucesso-tint: #143024;
    --atencao: #E0A346;
    --atencao-tint: #3A2A12;
    --erro: #F0685C;
    --erro-tint: #3A1614;
    --sombra-md: 0 8px 24px -6px rgba(0, 0, 0, .6);
}

:root[data-theme="light"] {
    --bg: #F6F8F9;
    --surface: #FFFFFF;
    --surface-2: #F0F4F5;
    --border: #DEE5E8;
    --text: #1A2226;
    --text-muted: #5B6870;
    --accent: #0E7490;
    --accent-forte: #0B5563;
    --accent-tint: #E1F1F3;
    --sucesso: #157F3C;
    --sucesso-tint: #E5F5EA;
    --atencao: #A8570A;
    --atencao-tint: #FBEDDD;
    --erro: #B42318;
    --erro-tint: #FBEAE8;
    --sombra-md: 0 8px 24px -6px rgba(20, 30, 34, .18);
}

* {
    box-sizing: border-box;
}

/* garante que o atributo hidden nativo sempre vença qualquer display de classe (ex.: .cartao-grid
   é display:grid — sem isso, [hidden] perde porque tem a mesma especificidade e vem antes) */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    font-size: 15px;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
}

h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }

a { color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- shell da aplicação (sidebar + topo + conteúdo) ---- */

/* ---- cabeçalho fino + menu em gaveta ----
   Substitui a barra lateral fixa: no computador ela comia largura útil o tempo todo, e no celular
   virava uma faixa rolável onde itens do fim (como "Minha conta") ficavam fora da vista. */

.app-cabecalho {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.app-menu-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px;
    margin: 0;
    border-radius: var(--raio-sm);
    color: var(--text);
    cursor: pointer;
}

.app-menu-botao:hover {
    background: var(--surface-2);
}

.app-menu-botao svg {
    width: 22px;
    height: 22px;
}

.app-cabecalho-marca {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 15px;
}

.app-menu-fundo {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 14, 16, .5);
}

.app-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 268px;
    max-width: 84vw;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    transform: translateX(-100%);
    /* `visibility` tira os links da ordem de tabulação enquanto a gaveta está fechada — só o
       translate não faz isso, e o usuário de teclado percorreria 5 links invisíveis antes de
       chegar ao conteúdo. Sai da transição junto com o transform, sem cortar a animação. */
    visibility: hidden;
    transition: transform .18s ease, visibility .18s;
}

.app-menu.aberto {
    transform: translateX(0);
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .app-menu {
        transition: none;
    }
}

.app-menu-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px 16px;
}

.app-brand {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    white-space: nowrap;
}

.app-menu-fechar {
    display: inline-flex;
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--raio-sm);
    color: var(--text-muted);
    cursor: pointer;
}

.app-menu-fechar:hover {
    background: var(--surface-2);
    color: var(--text);
}

.app-menu-fechar svg {
    width: 18px;
    height: 18px;
}

.app-menu-rodape {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.app-menu-usuario {
    display: block;
    padding: 0 10px 8px;
    font-size: 12.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-menu-rodape form {
    margin: 0;
}

.app-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
}

.app-nav-item svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* o "Instalar app" é um <button> (o navegador exige clique de verdade pra instalar), então
   precisa anular o estilo de botão sólido padrão e parecer um item de menu como os outros */
button.app-nav-item {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.app-nav-item:hover,
button.app-nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

.app-nav-item.ativo {
    background: var(--accent-tint);
    color: var(--accent-forte);
    font-weight: 700;
}

/* ---- convite pra instalar o app (dashboard do aluno) ---- */

.instalar-convite {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--accent-tint);
    border: 1px solid var(--accent);
    border-radius: var(--raio-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.instalar-convite-icone {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    flex: none;
    box-shadow: var(--sombra-md);
}

.instalar-convite-texto {
    flex: 1;
    min-width: 200px;
}

.instalar-convite-texto strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    color: var(--accent-forte);
    margin-bottom: 2px;
}

.instalar-convite-texto p {
    margin: 0;
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.5;
}

.instalar-convite-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

/* revisão da prova pelo aluno (gabarito + conta da nota) */

.revisao-conta {
    font-size: 1.05rem;
}

.revisao-formula {
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    background: var(--surface-2);
    border-radius: var(--raio-sm);
    padding: 10px 14px;
    display: inline-block;
}

.revisao-opcoes {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}

.revisao-opcoes li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    margin-bottom: 6px;
}

.revisao-opcoes li.correta {
    border-color: var(--sucesso);
    background: var(--sucesso-tint);
}

.revisao-opcoes li.errada {
    border-color: var(--erro);
    background: var(--erro-tint);
}

/* detalhamento das saídas do app durante a prova */

/* o toggle padrão tem margem de 1rem embaixo (feita pra uso solto na página); dentro de uma
   célula de tabela isso inflaria a altura da linha */
.tabela td .js-toggle-secao {
    margin-bottom: 0;
}

.saidas-lista {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.6;
}

.saidas-lista li {
    margin-bottom: 8px;
}

.saidas-lista strong {
    font-variant-numeric: tabular-nums;
}

.saidas-questao {
    color: var(--text-muted);
    font-size: 12.5px;
}

/* chamado de prova liberada, dentro do card da turma no painel do aluno */
.prova-chamado {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--atencao-tint);
    border: 1px solid var(--atencao);
    border-radius: var(--raio-sm);
    padding: 10px 12px;
    margin: 0 1.25rem .9rem;
    color: var(--atencao);
    text-decoration: none;
}

.prova-chamado:hover {
    background: var(--surface-2);
}

.prova-chamado svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.prova-chamado strong {
    display: block;
    font-size: 13.5px;
}

.prova-chamado small {
    color: var(--text-muted);
}

/* prova já entregue: mesmo formato do chamado, mas sem urgência — é acesso ao resultado */
.prova-feita {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    padding: 10px 12px;
    margin: 0 1.25rem .9rem;
    color: var(--text);
    text-decoration: none;
}

.prova-feita:hover {
    border-color: var(--accent);
}

.prova-feita svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--text-muted);
}

.prova-feita strong {
    display: block;
    font-size: 13.5px;
}

.prova-feita small {
    color: var(--text-muted);
}

/* Respiro maior: com o menu fora do caminho, o conteúdo pode ocupar a largura confortável de
   leitura sem parecer comprimido. */
.container {
    max-width: 940px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

@media (max-width: 560px) {
    .container {
        padding: 1.5rem 1rem 3rem;
    }
}

/* ---- sub-navegação de turma (abas) ---- */

.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.subnav-item {
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.subnav-item:hover {
    color: var(--text);
    text-decoration: none;
}

.subnav-item.ativo {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ---- página ---- */

.cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cabecalho-pagina h1 {
    margin: 0;
}

.cartao {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.cartao-estreito {
    max-width: 420px;
    margin: 3rem auto;
}

.tabela-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-md);
    overflow: hidden;
}

.tabela th,
.tabela td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.tabela th {
    background: var(--surface-2);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
}

.tabela tr:last-child td {
    border-bottom: none;
}

.tabela-gradebook input[type="number"] {
    width: 4.5rem;
}

form label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

form input,
form select,
form textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: normal;
}

form input:focus,
form select:focus,
form textarea:focus {
    border-color: var(--accent);
}

.form-inline {
    display: inline-block;
    margin: 0;
}

.form-linha {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-linha label {
    margin-bottom: 0;
}

/* checkbox com o rótulo ao lado (em vez do label em bloco por cima, que é o padrão do projeto) */
.form-inline-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
}

.form-inline-checkbox input[type="checkbox"] {
    display: inline-block;
    width: auto;
    margin: 0;
    flex: none;
}

button,
.botao {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: var(--raio-sm);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    font-size: 13.5px;
}

button:hover,
.botao:hover {
    background: var(--accent-forte);
}

.botao-link {
    background: none;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-weight: normal;
}

.botao-link-erro {
    color: var(--erro);
}

.acoes-linha {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.js-campo-conteudo,
.js-liberacao-data-campo {
    background: var(--surface-2);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    margin: 10px 0;
}

.alerta {
    padding: 0.75rem 1rem;
    border-radius: var(--raio-sm);
    margin-bottom: 1rem;
    font-size: 14px;
}

.alerta-sucesso {
    background: var(--sucesso-tint);
    color: var(--sucesso);
    border: 1px solid var(--sucesso);
}

.alerta-erro {
    background: var(--erro-tint);
    color: var(--erro);
    border: 1px solid var(--erro);
}

/* ---- indicadores de estado (disponíveis para uso futuro em colunas de status) ---- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pill-sucesso { background: var(--sucesso-tint); color: var(--sucesso); }
.pill-atencao { background: var(--atencao-tint); color: var(--atencao); }
.pill-erro { background: var(--erro-tint); color: var(--erro); }
.pill-neutro { background: var(--surface-2); color: var(--text-muted); }

.progresso-track {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.progresso-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
}

/* ---- grade de cards (disciplinas) ---- */

.cartao-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-items: start;
    gap: 14px;
    margin-bottom: 2rem;
}

.disciplina-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-md);
    padding: 1.1rem 5%;
}

.disciplina-card h3 {
    margin: 0;
}

.disciplina-card-trigger {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.disciplina-card-trigger:hover {
    background: none;
}

.disciplina-codigo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.disciplina-card-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.disciplina-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.disciplina-card-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    flex: none;
}

.disciplina-card-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform .15s ease;
}

.disciplina-card.aberto .disciplina-card-toggle svg {
    transform: rotate(180deg);
}

/* uso do .disciplina-card-toggle fora de um card (ex.: "Turmas anteriores" na tela de Turmas) —
   precisa do próprio reset de botão e da própria regra de rotação, já que não tem o
   .disciplina-card ancestral pra herdar o estado "aberto" */
button.js-toggle-secao {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 1rem;
    cursor: pointer;
    font: inherit;
}

.js-toggle-secao.aberto svg {
    transform: rotate(180deg);
}

/* ---- avatar (foto do usuário ou iniciais) ---- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
    background: var(--accent-tint);
    color: var(--accent-forte);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 15px;
    border: 1px solid var(--border);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-grande {
    width: 64px;
    height: 64px;
    font-size: 22px;
}

/* no menu lateral o avatar ocupa o lugar do ícone, então acompanha o tamanho deles */
.avatar-menu {
    width: 20px;
    height: 20px;
    font-size: 9px;
    border: none;
}

/* ---- saudação do painel do aluno ---- */

.saudacao {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 2.5rem;
}

/* fora do painel: faixa fina, sem e-mail, pra não competir com o conteúdo da tela */
.saudacao-compacta {
    gap: 10px;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.saudacao-compacta .saudacao-ola {
    font-size: 1rem;
    color: var(--text-muted);
}

.saudacao-ola {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0;
}

.saudacao-email {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--text-muted);
}

/* ---- "o que vem agora": aula ao vivo, liberação, prazo de tarefa, recado ---- */

.compromisso {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
}

.compromisso-vivo { border-left-color: var(--erro); }
.compromisso-tarefa { border-left-color: var(--atencao); }
.compromisso-liberacao { border-left-color: var(--accent); }
.compromisso-recado { border-left-color: var(--text-muted); }

.compromisso-quando {
    flex: none;
    min-width: 92px;
}

.compromisso-rotulo {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.compromisso-quando strong {
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.compromisso-texto {
    flex: 1;
    min-width: 0;
}

.compromisso-texto strong {
    display: block;
    font-size: 14px;
}

.compromisso-texto a {
    text-decoration: none;
}

.compromisso-texto a:hover strong {
    text-decoration: underline;
}

.compromisso-texto small {
    color: var(--text-muted);
}

.compromisso-fechar {
    flex: none;
    background: none;
    border: none;
    padding: 6px;
    border-radius: var(--raio-sm);
    color: var(--text-muted);
    cursor: pointer;
}

.compromisso-fechar:hover {
    background: var(--surface-2);
    color: var(--text);
}

.compromisso-fechar svg {
    width: 16px;
    height: 16px;
    display: block;
}

@media (max-width: 560px) {
    .compromisso {
        flex-wrap: wrap;
    }

    .compromisso-quando {
        min-width: 0;
    }
}

/* ---- lista de certificados do aluno ---- */

.certificado-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-md);
    padding: 1rem 1.25rem;
    margin-bottom: 12px;
    text-decoration: none;
    color: var(--text);
}

.certificado-item:hover {
    border-color: var(--accent);
}

.certificado-item svg {
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--accent);
}

.certificado-item strong {
    display: block;
    font-size: 14.5px;
}

.certificado-item small {
    color: var(--text-muted);
}

.conta-identidade {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.25rem;
}

.conta-identidade p {
    margin: 0;
}

/* rótulo discreto de seção — o peso visual vai pros cards, não pra etiqueta */
.secao-rotulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 2rem 0 .75rem;
}

/* ---- card compacto de turma (lista de turmas do professor) ---- */

.turma-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-md);
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: inherit;
}

.turma-card:hover {
    background: var(--surface-2);
}

.turma-card-periodo {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.05rem;
}

/* ---- card de disciplina do painel do aluno ----
   Componente diferente do .turma-card acima: aquele é um link compacto numa grade; este é um
   painel com progresso, chamados de prova e grade de ações. Nomes separados de propósito. */

.turma-painel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-md);
    overflow: hidden;
    margin-bottom: 14px;
}

.turma-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 1.1rem 1.25rem .9rem;
    text-decoration: none;
    color: inherit;
}

.turma-card-topo:hover {
    background: var(--surface-2);
}

.turma-card-topo h3 {
    font-size: 1.15rem;
    margin: 2px 0 4px;
}

.turma-codigo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
}

.turma-card-seta {
    color: var(--text-muted);
    flex: none;
    display: inline-flex;
}

.turma-card-seta svg {
    width: 20px;
    height: 20px;
}

.turma-progresso {
    padding: 0 1.25rem .9rem;
}

.turma-progresso .progresso-track {
    margin-bottom: 6px;
}

.turma-acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 1.25rem 1rem;
}

@media (max-width: 560px) {
    .turma-acoes {
        grid-template-columns: 1fr;
    }
}

.turma-acao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    text-decoration: none;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 500;
    background: var(--surface);
}

.turma-acao:hover {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent-forte);
}

.turma-acao svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--accent);
}

.turma-rodape {
    border-top: 1px solid var(--border);
    padding: .75rem 1.25rem;
}

.turma-rodape .js-toggle-secao {
    margin-bottom: 0;
}

.lista-turmas-encerradas {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 1.5rem;
}

.lista-turmas-encerradas a,
.lista-turmas-encerradas-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
}

/* ---- gerenciar conteúdo: módulos recolhíveis + menu kebab ---- */

.modulo-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.modulo-drag {
    color: var(--text-muted);
    flex: none;
    display: inline-flex;
}

.modulo-drag svg {
    width: 16px;
    height: 16px;
}

.modulo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.modulo-toggle:hover {
    color: var(--accent);
}

.modulo-titulo {
    font-weight: 700;
    font-size: 15px;
}

.modulo-contagem {
    font-size: 12.5px;
    color: var(--text-muted);
    flex: none;
}

.modulo-toggle svg {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform .15s ease;
}

.modulo-toggle.aberto svg {
    transform: rotate(180deg);
}

.tipo-icone {
    display: inline-flex;
    color: var(--text-muted);
}

.tipo-icone svg {
    width: 16px;
    height: 16px;
}

.continuar-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 1.5rem;
}

.continuar-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: none;
    width: 220px;
    background: var(--surface);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-md);
    padding: .9rem 1rem;
    text-decoration: none;
    color: var(--text);
}

.continuar-card:hover {
    background: var(--surface-2);
}

/* `minmax(0, 1fr)` e não `1fr`: `1fr` é `minmax(auto, 1fr)`, e o `auto` deixa a coluna crescer
   até o min-content do que estiver dentro. Bastava uma referência com URL longa na descrição da
   aula pra coluna passar de 500px dentro de uma tela de 375px, e aí a página inteira (vídeo,
   botão de concluir, abas) saía pela direita. Com o mínimo em 0, o texto é que cede. */
.player-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 720px) {
    .player-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.player-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (min-width: 721px) {
    .player-sidebar {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

.aula-lista-modulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 14px 0 4px;
}

.aula-lista-modulo:first-child {
    margin-top: 0;
}

.aula-lista-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--raio-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
}

a.aula-lista-item:hover {
    background: var(--surface-2);
}

.aula-lista-item-titulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aula-lista-item .tipo-icone {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text-muted);
}

.aula-lista-item .tipo-icone svg {
    width: 13px;
    height: 13px;
}

.aula-lista-item.concluida .tipo-icone {
    background: var(--sucesso-tint);
    color: var(--sucesso);
}

.aula-lista-item.atual {
    background: var(--accent-tint);
    border-left: 3px solid var(--accent);
    padding-left: 5px;
}

.aula-lista-item.atual .aula-lista-item-titulo {
    color: var(--accent-forte);
    font-weight: 600;
}

.aula-lista-item.bloqueada {
    color: var(--text-muted);
}

/* ---- cabeçalho da aula (player de conteúdo) ---- */

/* Voltar sempre no topo à esquerda — no rodapé, obrigava a rolar a página inteira pra sair dela */
.voltar-topo {
    margin: 0 0 1rem;
}

.voltar-topo a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
}

.voltar-topo a:hover {
    color: var(--accent);
}

.voltar-link {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}

.voltar-link:hover {
    color: var(--accent);
}

/* ---- materiais e links complementares da aula ---- */

.recursos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin-bottom: .5rem;
}

.recurso-botao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
}

.recurso-botao:hover {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent-forte);
}

.recurso-botao svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--accent);
}

.recurso-botao span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recursos-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recursos-links li {
    border-top: 1px solid var(--border);
}

.recursos-links li:first-child {
    border-top: none;
}

.recursos-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    font-size: 13.5px;
    text-decoration: none;
}

.recursos-links a:hover {
    text-decoration: underline;
}

.recursos-links svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--text-muted);
}

/* chips de material/link na tela de gerenciar conteúdo — visão rápida do que a aula já tem */

.recursos-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.recurso-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 220px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent-forte);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recurso-chip-link {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* material herdado do plano de curso: o cadeado e o contorno tracejado comunicam, antes de
   qualquer texto, que aqui só dá pra abrir — trocar e apagar é pela disciplina */
.recurso-chip-bloqueado {
    background: var(--atencao-tint);
    color: var(--atencao);
    border: 1px dashed currentColor;
}

.recurso-chip:hover {
    text-decoration: underline;
}

.recurso-chip svg {
    width: 12px;
    height: 12px;
    flex: none;
}

/* ---- cadastro de materiais e links (formulário da aula) ---- */

.recursos-bloco {
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    margin: 1rem 0;
}

.recursos-bloco legend {
    font-weight: 600;
    font-size: 14px;
    padding: 0 6px;
}

.recurso-linha {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    margin-bottom: 8px;
}

@media (max-width: 560px) {
    .recurso-linha {
        grid-template-columns: 1fr;
    }
}

.recurso-linha input {
    margin-top: 0;
}

/* ---- avaliação da aula em uma linha (discreta, logo abaixo do botão de concluir) ---- */

.avaliacao-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: .75rem 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.avaliacao-linha .avaliacao-estrelas {
    margin: 0;
}

.avaliacao-linha .estrela {
    font-size: 20px;
    padding: 0 1px;
}

.avaliacao-estrelas-legenda {
    font-variant-numeric: tabular-nums;
}

.aula-lista-item-data {
    flex: none;
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- cabeçalho enxuto da aula: título, posição e progresso do curso ---- */

/* o h1 global tem margin-bottom .5rem, que colapsaria com a margem de cima daqui e
   engoliria o espaçamento pretendido — por isso o título perde a margem neste contexto */
.player-principal > h1 {
    margin-bottom: 0;
}

.aula-posicao {
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.aula-progresso-curso {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 16px;
}

.aula-progresso-curso .progresso-track {
    flex: 1;
    min-width: 0;
    height: 4px;
}

.aula-progresso-curso span {
    flex: none;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- abas abaixo do vídeo ---- */

.abas-aula {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    margin-bottom: 1.5rem;
}

.abas-aula-lista {
    display: flex;
    gap: 4px;
    padding: 0 8px;
    border-bottom: 1px solid var(--border);
    /* no celular cabem duas ou três abas por vez — rolar é melhor que quebrar linha,
       porque a quebra empurraria o conteúdo pra baixo do dobro da altura */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.abas-aula-lista::-webkit-scrollbar {
    display: none;
}

/* sem `margin-bottom: -1px` pra puxar o sublinhado por cima da borda da lista: como a lista
   tem `overflow-x: auto`, o eixo vertical passa a recortar junto e esse 1px sumiria */
.aba-aula {
    flex: none;
    padding: 12px 12px 10px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
}

.aba-aula:hover {
    color: var(--text);
}

.aba-aula.ativa {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.abas-aula-painel {
    padding: 18px;
}

.abas-aula-painel > :first-child {
    margin-top: 0;
}

.abas-aula-painel > :last-child {
    margin-bottom: 0;
}

.abas-aula-painel h3 {
    margin: 1.25rem 0 .6rem;
    font-size: 14px;
}

/* ---- explicação da resposta, na revisão da prova ---- */

.revisao-explicacao {
    margin-top: 1rem;
    padding: 12px 14px;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
    background: var(--accent-tint);
}

.revisao-explicacao strong {
    display: block;
    font-size: 12px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--accent-forte);
    margin-bottom: 4px;
}

.revisao-explicacao p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}

/* ---- imagem/vídeo no enunciado de uma questão ---- */

.questao-midia {
    margin: 0 0 1rem;
}

/* O teto de altura fica na imagem, não no contêiner: uma foto de celular na vertical tomaria a
   tela inteira e empurraria o enunciado para fora, obrigando o aluno a rolar para saber o que
   está sendo perguntado. Aqui e não num `:has()` no contêiner porque `:has()` não existe em
   celular antigo — justamente o aparelho em que a prova é feita. O vídeo, que tem proporção
   fixa própria, não é afetado por esta regra. */
.questao-midia img {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    background: var(--surface-2);
    border-radius: var(--raio-md);
}

/* ---- player de vídeo embutido ---- */

.video-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-md);
    overflow: hidden;
    box-shadow: var(--sombra-md);
    margin-top: .75rem;
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0B1013;
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-frame-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-frame-fallback a {
    color: #fff;
    font-weight: 600;
}

.video-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.video-toolbar-tipo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.video-toolbar-tipo svg {
    width: 16px;
    height: 16px;
}

.botao-concluir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--fonte-corpo);
}

.botao-concluir svg {
    width: 15px;
    height: 15px;
}

.botao-concluir.feito {
    background: var(--sucesso-tint);
    color: var(--sucesso);
    border: 1px solid var(--sucesso);
}

.avaliacao-estrelas {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}

.avaliacao-estrelas .estrela {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    padding: 2px;
    color: var(--border);
    font-family: var(--fonte-corpo);
}

.avaliacao-estrelas .estrela.marcada {
    color: var(--atencao);
}

.avaliacao-estrelas .estrela:hover,
.avaliacao-estrelas .estrela:hover ~ .estrela {
    color: var(--atencao);
}

.avaliacao-media {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 0;
}

.avaliacao-media-nota {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--atencao);
}

.avaliacao-media-total {
    font-size: 13px;
    color: var(--text-muted);
}

.aula-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin: 1rem 0;
}

.aula-nav a {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-md);
    padding: 12px 14px;
    font-size: 13.5px;
    min-width: 0;
}

.aula-nav a:hover {
    border-color: var(--accent);
}

.aula-nav a svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex: none;
}

.aula-nav-proxima {
    justify-content: flex-end;
    text-align: right;
}

.aula-nav-rotulo {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.aula-nav-titulo {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-kebab {
    position: relative;
    flex: none;
}

.menu-kebab-lista {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    min-width: 170px;
    margin-top: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra-md);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-kebab-lista a,
.menu-kebab-lista button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 10px;
    border-radius: var(--raio-sm);
    font: inherit;
    font-size: 13.5px;
    font-weight: normal;
    color: var(--text);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.menu-kebab-lista a:hover,
.menu-kebab-lista button:hover {
    background: var(--surface-2);
}

.menu-kebab-lista .item-erro {
    color: var(--erro);
}

.menu-kebab-lista .item-erro:hover {
    background: var(--erro-tint);
}

.lista-turmas-encerradas a:hover {
    background: var(--surface-2);
}

.disciplina-card-turmas {
    display: none;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.disciplina-card.aberto .disciplina-card-turmas {
    display: flex;
}

.disciplina-card-turmas a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: var(--raio-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
}

.disciplina-card-turmas a:hover {
    background: var(--surface-2);
}

.icone-acoes {
    display: flex;
    gap: 2px;
    flex: none;
}

.disciplina-card-icones {
    position: absolute;
    top: 10px;
    right: 10px;
}

@keyframes piscar {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.icone-piscando {
    color: var(--atencao);
    animation: piscar 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .icone-piscando {
        animation: none;
    }
}

.pill-piscando {
    background: var(--erro-tint);
    color: var(--erro);
    animation: piscar 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pill-piscando {
        animation: none;
    }
}

/* ---- modal do plano de curso ---- */

.modal-plano {
    width: min(680px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    border: none;
    border-radius: var(--raio-md);
    padding: 1.5rem;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--sombra-md);
}

.modal-plano::backdrop {
    background: rgba(10, 14, 16, .55);
}

.modal-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.modal-cabecalho h2 {
    margin: 0;
}

.plano-identificacao {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 1rem;
    padding: 12px 14px;
    background: var(--surface-2);
    border-radius: var(--raio-sm);
    font-size: 13.5px;
}

.plano-item {
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    padding: 10px 14px;
    margin-bottom: 8px;
}

.plano-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
}

.plano-item[open] summary {
    margin-bottom: 8px;
}

/* "Remover encontro" fica embaixo e discreto: é destrutivo, não pode competir com os campos */
.plano-item-acoes {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    text-align: right;
}

.plano-item-acoes .js-plano-remover {
    color: var(--erro);
    font-size: 13px;
}

/* ---- conferência do plano de curso dentro de "Gerenciar conteúdo" ---- */

.plano-conferencia {
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.plano-conferencia:first-of-type {
    border-top: none;
}

.plano-conferencia p {
    margin: .25rem 0;
}

.plano-conferencia-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* campo de data dentro da tabela de aulas — estreito, pra não empurrar as outras colunas */
.agenda-data {
    width: 100%;
    min-width: 170px;
    max-width: 200px;
}

.modal-rodape {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.icone-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--raio-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.icone-botao svg {
    width: 16px;
    height: 16px;
}

.icone-botao:hover {
    background: var(--surface-2);
    color: var(--text);
}

.icone-botao-erro:hover {
    background: var(--erro-tint);
    color: var(--erro);
}

/* ---- painel de início ---- */

.filtros-painel {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.filtros-painel label {
    margin-bottom: 0;
}

.filtros-painel select {
    min-width: 160px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 1.5rem;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-md);
    padding: 1rem 1.1rem;
}

.kpi-rotulo {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.kpi-valor {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

.grafico-linha-item {
    display: grid;
    grid-template-columns: minmax(90px, 140px) 1fr minmax(48px, 64px);
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13.5px;
}

.grafico-linha-rotulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.grafico-linha-valor {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.grafico-svg-caixa {
    width: 100%;
    height: auto;
    display: block;
}

.grafico-svg-caixa text {
    font-family: var(--fonte-corpo);
}

.grafico-svg-rotulo {
    fill: var(--text);
    font-weight: 700;
    font-size: 9px;
}

.grafico-svg-eixo {
    fill: var(--text-muted);
    font-size: 7px;
}

.distribuicao-barra {
    display: flex;
    gap: 2px;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-2);
    margin-bottom: 10px;
}

.distribuicao-legenda {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: var(--text-muted);
}

.distribuicao-legenda li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.distribuicao-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}

.lista-aulas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-aulas li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.lista-aulas li:last-child {
    border-bottom: none;
}

.qa {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}

.qa h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-family: var(--fonte-corpo);
    font-weight: 600;
}

.qa-pergunta {
    background: var(--surface-2);
    border-radius: var(--raio-sm);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.qa-resposta {
    margin-left: 1rem;
    color: var(--text-muted);
}

.qa .form-inline input[type="text"] {
    display: inline-block;
    width: auto;
    margin-top: 0;
}

/* ---- comentários da aula (player de conteúdo) — avatar + item + resposta em thread ---- */

.qa-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-tint);
    color: var(--accent-forte);
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 13px;
}

.qa-avatar-pequeno {
    width: 26px;
    height: 26px;
    font-size: 11px;
    background: var(--surface-2);
    color: var(--text-muted);
}

.qa-novo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.qa-novo input[type="text"] {
    flex: 1;
    margin-top: 0;
    border-radius: 999px;
    padding-left: 14px;
}

.qa-novo button {
    flex: none;
    border-radius: 999px;
}

.qa-item {
    display: flex;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.qa-item:first-of-type {
    padding-top: 14px;
}

.qa-corpo {
    flex: 1;
    min-width: 0;
}

.qa-item-cabecalho {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.qa-autor {
    font-weight: 600;
    font-size: 13.5px;
}

.qa-data {
    font-size: 12px;
    color: var(--text-muted);
}

.qa-texto {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
}

.qa-resposta-item {
    display: flex;
    gap: 8px;
    margin: 10px 0 10px 6px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
}

.qa-corpo .qa-responder-toggle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.qa-corpo .qa-responder-toggle:hover {
    text-decoration: underline;
}

.qa-responder-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.qa-responder-form input[type="text"] {
    flex: 1;
    margin-top: 0;
}

.opcao-linha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.opcao-linha input[type="text"] {
    flex: 1;
    width: auto;
    margin-top: 0;
}

/* checkbox junto do radio: o `form input { width: 100% }` global pegaria o checkbox do gabarito
   de caixa de verificação e ele engoliria a linha inteira, espremendo o campo de texto */
.opcao-linha input[type="radio"],
.opcao-linha input[type="checkbox"] {
    width: auto;
    flex: none;
}

/* O wrapper existe só para o JS poder esconder um dos dois controles de gabarito — não é uma
   seção do formulário. Precisa anular o fundo/padding/margem que `.js-campo-conteudo` ganha lá
   em cima (linha ~707), senão cada radio vira uma pílula tingida de 14px e as seis linhas de
   alternativa dobram de altura. Mesma coisa para os textos de ajuda, que agora são
   `.js-campo-conteudo` dentro de outro e sairiam como caixa tingida dentro de caixa tingida. */
.opcao-linha > .js-campo-conteudo,
.js-campo-conteudo .js-campo-conteudo {
    background: none;
    padding: 0;
    margin: 0;
}

.opcao-linha > .js-campo-conteudo {
    flex: none;
    display: inline-flex;
    align-items: center;
}

/* ---- quebra de texto vindo do professor ----
   Objetivo, metodologia, referências, recados, tarefas e comentários são textos livres: uma URL
   ou um DOI colado ali é uma palavra só, sem espaço nenhum, e a largura mínima dela empurrava o
   layout inteiro pra fora da tela no celular. `anywhere` só age quando não há outro ponto de
   quebra possível, então frase normal continua quebrando por espaço, como sempre. */
.abas-aula-painel,
.qa-texto,
.cartao p,
.estado-vazio p,
.recursos-links a,
.aula-nav-rotulo {
    overflow-wrap: anywhere;
}

/* ---- estado vazio ----
   Substitui as frases soltas ("Nenhum conteúdo disponível...") que sobravam no meio de uma tela
   em branco. O aluno precisa entender se falta publicar, se falta a data chegar, e o que fazer
   enquanto isso — por isso o bloco tem ícone, título, explicação e uma saída. */
.estado-vazio {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-md);
    padding: 2.5rem 1.5rem;
    margin: 1rem 0;
    text-align: center;
}

.estado-vazio-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.estado-vazio-icone svg {
    width: 26px;
    height: 26px;
}

.estado-vazio h2 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
}

.estado-vazio p {
    margin: 0 auto;
    max-width: 46ch;
    color: var(--text-muted);
    font-size: 14px;
}

.estado-vazio-acoes {
    margin-top: 1.5rem !important;
}

/* ---- lista reordenável (ordem das avaliações no gradebook) ---- */
.texto-auxiliar {
    color: var(--text-muted);
    font-size: 13px;
    margin: -.25rem 0 1rem;
}

.lista-ordenavel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    counter-reset: ordem;
}

.lista-ordenavel li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    counter-increment: ordem;
}

.lista-ordenavel li::before {
    content: counter(ordem);
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-forte);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lista-ordenavel-titulo {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
}

.lista-ordenavel-titulo small {
    display: block;
    font-weight: normal;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: capitalize;
}

.lista-ordenavel-acoes {
    flex: none;
    display: flex;
    gap: 4px;
}

.botao-seta {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--raio-sm);
    color: var(--text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    font-family: var(--fonte-corpo);
}

.botao-seta:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Ocupa o lugar da seta que não existe nas pontas da lista: sem ele, as setas das outras
   linhas mudariam de posição a cada movimento e o alvo do dedo fugiria. */
.botao-seta-vazio {
    border-color: transparent;
    background: none;
    cursor: default;
    pointer-events: none;
}

/* ---- sininho de notificações (cabeçalho) ---- */
.app-sino {
    margin-left: auto;      /* empurra pra ponta direita do cabeçalho */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--text-muted);
    text-decoration: none;
    flex: none;
}

.app-sino:hover {
    background: var(--surface-2);
    color: var(--text);
}

.app-sino svg {
    width: 21px;
    height: 21px;
}

.app-sino.tem-novidade { color: var(--accent); }

.app-sino-contador {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--erro);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    /* o anel na cor do cabeçalho separa o balão do desenho do sino por baixo dele */
    box-shadow: 0 0 0 2px var(--surface);
}

/* ---- resumo da semana ---- */
.semana-resumo-nova {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.semana-resumo-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.semana-resumo-topo h2 { margin: 0; }

.semana-lista {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.semana-lista li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.semana-lista li:first-child { border-top: none; }

.semana-dia {
    flex: none;
    width: 46px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent-forte);
}

.semana-dia small {
    display: block;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.semana-aula {
    min-width: 0;
    font-size: 14px;
}

.semana-aula small {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- lista de notificações ---- */
.lista-notificacoes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notificacao {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--raio-md);
}

/* a cor da borda esquerda é o que diferencia os três tipos de relance */
.notificacao-recado { border-left-color: var(--accent); }
.notificacao-tarefa { border-left-color: var(--atencao); }
.notificacao-aula   { border-left-color: var(--sucesso); }

.notificacao-icone {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text-muted);
}

.notificacao-icone svg { width: 16px; height: 16px; }

.notificacao-corpo {
    min-width: 0;
    flex: 1;
}

.notificacao-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.notificacao-quando {
    flex: none;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
}

.notificacao-titulo {
    display: block;
    margin-top: 3px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.notificacao-titulo:hover { color: var(--accent); }

.notificacao-corpo small {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}