/* ==========================================================================
   CAMADA DE MARCA — Boletim (fat.estudar.life/boletim)
   Estudar.Life. 31/08/2026.

   O QUE ESTE ARQUIVO É
   O Boletim tem folha própria, curta, com tokens em `:root`. Então aqui não há
   delta lutando com o core: a maior parte do rebranding é REDEFINIR OS TOKENS.
   O resto são poucas regras para o que token nenhum alcança — o logotipo no
   topo e o raio dos cartões.

   COMO ISTO VIRA PRODUÇÃO
   Não como arquivo separado. O certo é o bloco `:root` daqui substituir o do
   `style.css`, e as regras marcadas [NOVA] entrarem no fim daquela folha. Aqui
   está separado só para o preview mostrar antes/depois sem tocar no original.

   O QUE NÃO MUDA, de propósito:
   - A ESTRUTURA. Nenhum seletor novo, nenhuma marcação nova. O que está aqui
     funciona sobre o HTML que o app já emite hoje.
   - O VERDE DE APROVADO (`--verde-aprovado`). É semântica, não marca: verde diz
     "passou". Trocar por azul da casa apagaria a informação.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. OS TOKENS
   Coluna da esquerda: o que o Boletim serve hoje. Coluna da direita: de onde
   o novo valor vem. As três primeiras são a mudança que faz o Boletim parecer
   o mesmo produto que o AVA — hoje ele é cinza QUENTE e o AVA é azul FRIO,
   e é isso que denuncia dois sistemas diferentes antes de qualquer logotipo.
   -------------------------------------------------------------------------- */
:root {
    --tinta:          #16202e;   /* era #1d1c19, cinza quente          */
    --fundo:          #f4f8fb;   /* era #f4f3f0  — $don-surface, o mesmo da tela de curso */
    --papel:          #ffffff;   /* igual                               */
    --linha:          #e3e9f0;   /* era #e2e0da, linha quente           */
    --sub:            #5a6b7b;   /* era #6b6862  — 4.9:1 no branco, passa em AA */

    --acento:         #0059FB;   /* era #0f766e (verde-água). theme_don | brandcolor */
    --acento-escuro:  #102770;   /* era #0b5952. O navy da casa, vindo do mascote */

    --ok-fundo:       #e8f0ff;   /* era #e7f5f1 */
    --ok-tinta:       #102770;   /* era #0b5952 */
    --erro-fundo:     #fdeceb;   /* igual: vermelho de erro é semântica */
    --erro-tinta:     #a3231b;   /* igual */
    --verde-aprovado: #166534;   /* IGUAL, e deliberado: ver cabeçalho */

    /* NOVOS, que o Boletim ainda não tinha */
    --don-ciano:      #29C5FF;   /* theme_don | accentcolor — foco de teclado */
    --don-navy:       #102770;   /* barra do topo */
    --raio:           12px;      /* era 8px fixo; o AVA usa 12–14 nos cartões */

    --alerta:         #A16100;   /* tokens.json — 4,97:1 no branco. Turma oculta
                                    no AVA (seção 9): âmbar, não o vermelho de
                                    erro — turma oculta não é defeito. */

    /* O navy em componentes, para as sombras. `rgba()` precisa dos canais
       soltos, e não existe função que extraia de um hex: sem isto o #102770
       reaparecia escrito à mão em cada sombra da folha. */
    --navy-rgb:       16, 39, 112;
}


/* --------------------------------------------------------------------------
   2. TIPOGRAFIA                                                       [NOVA]
   O design system pede Ubuntu. O Boletim usa a fonte do sistema, o que o faz
   parecer ferramenta interna em qualquer máquina.

   ATENÇÃO PARA PRODUÇÃO: aqui a fonte vem do Google Fonts, que serve para o
   preview e NÃO serve para o ar — é o mesmo problema já aberto no AVA, onde os
   oito arquivos de fonte do tema respondem 404. Hospedar a Ubuntu resolve os
   dois de uma vez. Até lá a pilha de reserva mantém a tela legível.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

body {
    font-family: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, .marca, .metrica .valor {
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 {
    font-size: 1.75rem;
    color: var(--don-navy);
}


/* --------------------------------------------------------------------------
   3. O TOPO VIRA BARRA DE MARCA                                       [NOVA]
   Hoje: barra branca com a palavra "Boletim" em preto. Lê como página solta.
   Agora: a mesma barra navy do AVA, com o logotipo. É o que diz, sem texto,
   que o Boletim é parte do Estudar.Life e não outro sistema.

   O logotipo entra por `::before` no link que já existe — nenhuma marcação
   nova. Em produção, o certo é o template emitir um <img> com alt.
   -------------------------------------------------------------------------- */
.topo {
    background: var(--don-navy);
    border-bottom: 0;
    padding: 14px 0;
}
.marca {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
}
.marca::before {
    content: "";
    width: 116px;
    height: 26px;
    background: url("logo-estudar-branco.svg") left center / contain no-repeat;
}
/* SEM FIO SEPARADOR, e a primeira versão tinha um.
   Eu quis separar o logotipo da palavra "Boletim" com um fio de 1px e usei
   `::after` com `position: absolute` e `margin-left` negativo. No preview ele
   apareceu ANTES do logotipo, não entre os dois: `::after` é o último filho da
   caixa, e sem um `position: relative` de referência o absoluto foi ancorar no
   contêiner errado. O `gap: 12px` já separa o suficiente. */
.nav a {
    color: rgba(255, 255, 255, .82);
}
.nav a:hover {
    color: #fff;
    text-decoration: underline;
}
.quem {
    color: rgba(255, 255, 255, .82);
}
.papel {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}


/* --------------------------------------------------------------------------
   4. CARTÕES E LISTAS
   Só o que o token não alcança: raio e o peso da borda no hover.
   -------------------------------------------------------------------------- */
.cartao,
.lista-cursos a,
.aviso {
    border-radius: var(--raio);
}
.lista-cursos a:hover {
    border-color: var(--acento);
    box-shadow: 0 2px 10px rgba(var(--navy-rgb), .10);
}
.lista-cursos a strong {
    color: var(--don-navy);
}

/* A LISTA DE TURMAS VIRA GRADE.                                        [NOVA]
   MEDIDO em 31/08: a tela de coordenação tem 4585px de altura. São 6 cursos e
   até 10 turmas cada, em coluna única, cada turma num cartão de 120px que
   carrega duas linhas curtas de texto. O coordenador rola quatro telas e meia
   para ver o que cabe em uma e meia.

   `auto-fill` com mínimo de 320px, e não um número fixo de colunas: em 1080px
   de contêiner dá três, em tablet dá duas, em celular volta a uma sozinho —
   sem media query e sem decidir por tamanho de tela, que é o que sempre
   envelhece mal. */
.lista-cursos {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* O h2 de seção é tratado na seção 8, com o resto da escada. */


/* --------------------------------------------------------------------------
   5. FOCO DE TECLADO                                                  [NOVA]
   O Boletim só declara foco em `input`. Link e botão ficam com o anel padrão
   do navegador, que muda de cor a cada um. O ciano é o token de foco da casa.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.lista-cursos a:focus-visible {
    outline: 2px solid var(--don-ciano);
    outline-offset: 2px;
    border-radius: 4px;
}


/* --------------------------------------------------------------------------
   6. RODAPÉ
   A frase sobre a origem dos dados é a coisa mais útil da tela para quem
   duvida de uma nota. Ela não precisa gritar, mas precisa ser encontrável.
   -------------------------------------------------------------------------- */
.rodape {
    border-top: 1px solid var(--linha);
    margin-top: 32px;
    padding-top: 20px;
    max-width: 1080px;
}


/* --------------------------------------------------------------------------
   7. A INSTRUÇÃO ABAIXO DO TÍTULO                                     [NOVA]
   "Todas as turmas da instituição. Abra uma para ver a grade..." é a única
   frase da tela que ensina o que fazer aqui, e estava servida em 0.85rem
   cinza — o mesmo tamanho do metadado repetido dentro de cada cartão. Quem
   nunca viu a tela não a lê.

   Sobe para 1rem e ganha medida de leitura. Continua em `--sub`: instrui,
   não compete com o h1.
   -------------------------------------------------------------------------- */
main > p.sub {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 68ch;
    margin: -10px 0 26px;
}

/* --------------------------------------------------------------------------
   8. HIERARQUIA: GRUPO, TURMA, CURSO                                  [NOVA]
   A tela é uma lista de LISTAS: seis cursos, cada um com suas turmas. Antes,
   o nome do curso ("Administração") e o código da turma ("T1 — EAD") tinham
   quase o mesmo peso — a página lia como 45 itens soltos, não como seis
   grupos. Sem o grupo forte, não há onde a vista descansar ao rolar.

   A escada agora é explícita, e cada degrau é metade do anterior em ênfase:

     h1   1.75rem   navy 700    o papel em que estou
     h2   1.375rem  navy 700    o curso — âncora da rolagem
     turma 1.0625rem navy 700   o item clicável
     curso .8125rem  --sub      desempate (há "Administração" e
                                "em Administração", cursos diferentes)

   A caixa alta saiu do h2: em 0.8125rem ela funcionava como rótulo de grupo,
   em 1.375rem viraria grito. Peso e tamanho já separam.
   -------------------------------------------------------------------------- */
/* Rótulo de cartão: "Dados pessoais", "Disciplinas". Nomeia a caixa, não
   compete com o que está dentro dela. Menor, caixa alta, como o "CURSOS QUE
   ESTOU CURSANDO" da tela de Notas do AVA. */
.cartao > h2 {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sub);
    margin-bottom: 14px;
}

/* Título de GRUPO: "Administração", "Serviços Jurídicos". Outra função e outro
   peso — é a âncora da rolagem numa página de 2600px, e o único texto grande
   que se lê de relance ao passar por seis cursos.

   O `:has` separa os dois casos sem marcação nova: só o cartão que contém uma
   lista de turmas tem grupo. Onde o `:has` não existir, o h2 fica no rótulo
   pequeno acima — degrada para o estado anterior, não para tela quebrada. */
.cartao:has(> .lista-cursos) > h2 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--don-navy);
    margin-bottom: 16px;
}

/* Cartões da mesma fileira com a mesma altura. O item da grade é o <li>, e
   ele já estica; quem não esticava era o <a> dentro dele — por isso a turma
   com etiqueta ficava mais alta que a vizinha sem. */
.lista-cursos li { display: flex; }
.lista-cursos a {
    flex: 1;
    gap: 4px;
    padding: 14px 16px;
}
.lista-cursos a strong {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.lista-cursos a .sub {
    font-size: 0.8125rem;
    line-height: 1.4;
}


/* --------------------------------------------------------------------------
   9. O ESTADO "OCULTA NO AVA"                                         [NOVA]
   Depende do `marca-boletim.js` emitir o <span> — ver o bloco 1 daquele
   arquivo, que é a spec do que a marcação deve produzir.

   UM SINAL, NÃO TRÊS. A primeira versão desta seção dava ao estado uma
   pílula com fundo, um fio âmbar na lateral do cartão e uma seta de "abre".
   Vinte dos quarenta e cinco cartões estão ocultos: decorado três vezes, o
   que era destaque virou o padrão da grade, e o olho não tinha mais onde
   pousar. Sinal repetido em metade do conjunto deixa de ser sinal.

   Ficou o mínimo que informa: uma linha própria, ícone de olho cortado e as
   palavras, em âmbar. Sem fundo, sem borda, sem seta. O que a distingue não
   é peso — é ser a única coisa colorida do cartão.

   COR: `--alerta` (#A16100, do tokens.json), não o vermelho de `.tag`. Turma
   oculta não é erro: muitas estão ocultas de propósito, entre matrículas ou
   fora de período. Vermelho pediria conserto de vinte turmas sadias.
   -------------------------------------------------------------------------- */
.tag-oculta {
    align-self: flex-start;   /* sem isto o <span> estica na coluna flex */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 0;
    background: none;
    color: var(--alerta);
    font-size: 0.75rem;
    font-weight: 500;
}
.tag-oculta::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>") center / contain no-repeat;
}


/* --------------------------------------------------------------------------
   10. LINK DENTRO DE TABELA                                           [NOVA]
   O "Detalhes" do boletim do aluno JÁ vinha na cor da marca — a folha do app
   pinta todo <a> com `--acento`, e medi: rgb(0,89,251). O que o fazia parecer
   link cru de navegador era o sublinhado permanente em peso 400 dentro de uma
   célula de dados.

   Mesma regra que a tela de Notas do AVA já usa: sem sublinhado parado, com
   sublinhado no hover e no foco. A cor sozinha não carrega o significado —
   o sublinhado volta em qualquer interação.
   -------------------------------------------------------------------------- */
.tabela a {
    font-weight: 500;
    text-decoration: none;
}
.tabela a:hover,
.tabela a:focus-visible {
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   11. O CABEÇALHO A 375                                               [NOVA]
   MEDIDO em 31/08, e as duas telas quebravam de jeitos diferentes:

   - aluno:       o <nav> tentava caber ao lado do logotipo em 129px, e
                  "Voltar pro AVA" partia em duas linhas com "Sair" alinhado
                  na primeira. Cabeçalho de 112px, torto.
   - coordenação: com três links o <nav> ia inteiro para a segunda linha,
                  e o nome do usuário para uma terceira. 136px.

   A causa é `.topo .wrap { flex-wrap: wrap }` com `.nav { flex: 1 }`: o
   resultado depende de quantos links a tela tem, então cada tela quebra de um
   jeito. Aqui a quebra passa a ser decidida, e igual nas duas: logotipo,
   quem sou eu, ações. Nesta ordem, porque é a ordem em que se lê um topo.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .topo .wrap {
        row-gap: 10px;
        column-gap: 16px;
    }
    .topo .marca  { flex-basis: 100%; }
    .topo .quem   { flex-basis: 100%; order: 2; }
    .topo .nav    { flex-basis: 100%; order: 3; flex-wrap: wrap; row-gap: 6px; }
}


/* --------------------------------------------------------------------------
   12. A TABELA DE DISCIPLINAS                                         [NOVA]
   MEDIDO a 375: as quatro colunas pedem 320px e o cartão oferece 295. Como o
   app já põe `overflow-x: auto` no cartão, nada estourava a página — a tabela
   só ficava 7px rolando por dentro, com "Detalhes" encostado na borda. Some
   sem ninguém ver que sumiu, que é o pior tipo de corte.

   Duas mudanças, e a primeira vale em qualquer largura:

   - A primeira e a última célula perdem o recuo lateral. A tabela passa a
     alinhar com o "DISCIPLINAS" acima dela, em vez de flutuar 10px para
     dentro. Ganha 20px e ganha alinhamento.
   - A 640 o cartão e as células apertam o recuo. Sobra folga em vez de corte.

   O que NÃO foi feito: empilhar a linha em blocos rotulados no celular. É a
   resposta certa para tabela larga, mas muda a leitura da tela inteira e é
   decisão do Marcelo, não consequência de um ajuste de recuo.
   -------------------------------------------------------------------------- */
.tabela th:first-child,
.tabela td:first-child { padding-left: 0; }
.tabela th:last-child,
.tabela td:last-child  { padding-right: 0; }

@media (max-width: 640px) {
    .cartao { padding: 16px; }
    .tabela { font-size: 0.875rem; }
    .tabela th,
    .tabela td { padding: 9px 8px; }
}


/* --------------------------------------------------------------------------
   13. A TABELA DE NOTAS DO ALUNO                                      [NOVA]
   Só aparece quando o aluno tem nota lançada — a ficha do Adriel é o caso com
   dado de verdade: seis disciplinas, sete colunas, e a maioria das células
   com "—" porque a prova ainda não saiu.

   13.1 A LINHA QUE NÃO É DISCIPLINA
   Uma das linhas é a própria TURMA ("Curso Técnico Informática para Internet
   EAD | T5"), com total 10,0. Lida na mesma pauta das disciplinas, parece uma
   matéria em que o aluno tirou nota máxima. O app já tenta avisar com uma
   etiqueta "turma" — em VERMELHO, a cor de erro da folha. Não é erro: é um
   aviso de leitura.

   Aqui a etiqueta fica azul de informação e a linha inteira recua um tom, para
   sair da pauta das disciplinas sem sumir. Escopado em `.tabela` para não
   mexer no `.tag` que a folha usa em outras telas, que eu não capturei.
   -------------------------------------------------------------------------- */
.tabela .tag {
    background: var(--ok-fundo);
    color: var(--ok-tinta);
    font-weight: 500;
    vertical-align: middle;
}
.tabela tr.linha-turma td {
    background: #f8fbfd;   /* alternativa: o mesmo tom, fixo */
    background: color-mix(in srgb, var(--fundo) 60%, #fff);
}
.tabela tr.linha-turma .num {
    color: var(--sub);
}

/* 13.2 O TOTAL É A COLUNA QUE SE PROCURA
   Sete colunas, e a que responde "passei?" estava com o mesmo peso das
   parciais. Ganha um fio à esquerda que separa o resultado do caminho. */
.tabela th:nth-last-child(2),
.tabela td:nth-last-child(2) {
    border-left: 1px solid var(--linha);
    padding-left: 14px;
}


/* --------------------------------------------------------------------------
   14. A TABELA DE NOTAS NO CELULAR                                    [NOVA]
   MEDIDO a 375: sete colunas pedem largura que não existe, e a tabela era
   cortada em "AVA". O cartão rola por dentro — `overflow-x: auto` já vinha da
   folha do app — mas nada na tela avisa. O aluno abre o boletim no celular e
   não vê o Total. É o número pelo qual ele abriu a tela.

   Rolagem lateral não resolve: ninguém arrasta uma tabela que não parece
   arrastável. A linha vira BLOCO, e cada célula passa a dizer de que coluna
   veio — o `data-rotulo` que o `marca-boletim.js` emite (bloco 7).

   Não é "responsivo" no sentido de encolher: é outra leitura da mesma
   informação. No desktop se lê em coluna, comparando disciplinas entre si;
   no celular se lê uma disciplina por vez, inteira.
   NÃO VALE PARA A GRADE DA TURMA (`.tabela.grade`), e a exclusão é o ponto:
   aquela tem 78 colunas de nota para 109 alunos. Empilhada, cada aluno viraria
   78 linhas rotuladas — 8.500 linhas de bloco. Ali a rolagem lateral É a
   leitura certa, e o que faltava era ela se anunciar (seção 15.4).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .tabela:not(.grade) thead { display: none; }

    .tabela:not(.grade),
    .tabela:not(.grade) tbody { display: block; width: 100%; }

    .tabela:not(.grade) tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 14px;
        padding: 14px 0;
        border-bottom: 1px solid var(--linha);
    }
    .tabela:not(.grade) tbody tr:last-child { border-bottom: 0; }

    .tabela:not(.grade) tbody td {
        display: block;
        padding: 0;
        border: 0;
    }

    /* O nome da disciplina abre o bloco, na largura toda. */
    .tabela:not(.grade) tbody td:first-child {
        grid-column: 1 / -1;
        margin-bottom: 8px;
    }

    /* Cada nota: rótulo miúdo à esquerda, valor à direita. */
    .tabela:not(.grade) tbody td.num {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 3px 0;
        text-align: right;
    }
    .tabela:not(.grade) tbody td.num::before {
        content: attr(data-rotulo);
        color: var(--sub);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        text-align: left;
    }

    /* Total e Faltas fecham o bloco, separados por um fio — o mesmo papel que
       o fio vertical cumpre no desktop. */
    .tabela:not(.grade) tbody td:nth-last-child(2),
    .tabela:not(.grade) tbody td:last-child {
        border-left: 0;
        padding-left: 0;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--linha);
    }
    .tabela:not(.grade) tbody td:nth-last-child(2) .total { font-size: 1.0625rem; }

    /* A linha da turma continua recuada, agora como bloco inteiro. */
    .tabela:not(.grade) tbody tr.linha-turma {
        padding: 14px 12px;
        margin: 0 -12px;
        border-radius: 8px;
    }
}


/* --------------------------------------------------------------------------
   15. A GRADE DA TURMA                                                [NOVA]
   A tela que a coordenação abre ao clicar num cartão: 109 alunos, 13
   disciplinas, 78 colunas de nota, mais resumo, filtro de pendências e busca.
   É a tela mais densa do Boletim, e a que mais denuncia o que a folha do app
   ainda não cobre.

   15.1 O <select> NÃO EXISTIA NA FOLHA
   O app estiliza `input[type=text]` e `button`, mas não `select`. Os três
   filtros de pendências saíam com o desenho nativo do Windows, encostados num
   campo de busca arredondado — dois sistemas na mesma linha. Aqui o select
   recebe a mesma caixa do input, e a seta é desenhada (a nativa some com
   `appearance: none`).
   -------------------------------------------------------------------------- */
select {
    font: inherit;
    font-size: 0.92rem;
    padding: 7px 34px 7px 9px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: var(--papel);
    color: var(--tinta);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b7b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
select:focus {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    border-color: var(--acento);
}

/* 15.2 O RESUMO ERA UMA FILEIRA QUE QUEBRAVA TORTA
   Sete métricas em `flex-wrap` com larguras diferentes: a sétima ("Faltas")
   caía sozinha numa segunda linha e deixava metade do cartão vazia. Em grade
   de trilhos iguais elas alinham em matriz — e a matriz também é a leitura
   certa, porque são todas a mesma coisa medida de jeitos diferentes. */
.resumo,
.resumo-topo .resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 24px 32px;
}
.metrica .valor {
    font-weight: 700;
    color: var(--don-navy);
}
.metrica.total-metrica.aprovado .valor {
    color: var(--verde-aprovado);   /* semântica vence a marca: verde diz "passou" */
}

/* 15.3 "BAIXAR PLANILHA" TINHA VIRADO RÓTULO
   O botão secundário mora DENTRO do <h2> do cartão. Quando o h2 virou rótulo
   em caixa alta (seção 8), o link herdou caixa alta, espaçamento de letra e a
   cor apagada — e o que era ação virou legenda. Ele volta a ser botão. */
.botao-secundario {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--acento);
}
.botao-secundario:hover {
    background: var(--fundo);
    border-color: var(--acento);
}

/* 15.4 — vago. A rolagem da grade virou controle na seção 16, e a tentativa
   de sombra que morava aqui saiu junto: ela pintava no FUNDO do contêiner,
   atrás das células, e as faixas das disciplinas passavam por cima. */

/* 15.5 O RESUMO NO CELULAR
   Em coluna única as sete métricas somam mil pixels antes do primeiro filtro:
   o coordenador rola uma tela inteira de números agregados para chegar no que
   veio fazer. Em duas colunas o cartão cabe numa olhada. O detalhe encolhe um
   ponto porque agora divide a largura com o vizinho. */
@media (max-width: 640px) {
    .resumo,
    .resumo-topo .resumo {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 16px;
    }
    .metrica .valor { font-size: 1.4rem; }
    .metrica .detalhe { font-size: 0.72rem; }
}


/* --------------------------------------------------------------------------
   16. A ROLAGEM DA GRADE, AGORA COMO CONTROLE                         [NOVA]
   Substitui a sombra da seção 15.4, que ficou fraca — e ficou fraca por um
   motivo estrutural, não por falta de opacidade: sombra pintada no FUNDO do
   contêiner fica ATRÁS das células, e as faixas cinzas que separam as
   disciplinas passavam por cima dela.

   O sinal agora está ACIMA do conteúdo, numa moldura que não rola (o
   `marca-boletim.js` a emite — bloco 8). São dois sinais, e cada um faz uma
   coisa: o esmaecido diz que a informação continua; o botão leva até lá.

   Somem sozinhos quando não há mais nada daquele lado (`data-fim`).
   -------------------------------------------------------------------------- */
.grade-moldura {
    position: relative;
}

/* O esmaecido: as colunas dissolvem na borda em vez de serem cortadas. Corte
   parece fim de tabela; dissolução parece continuação. */
.grade-moldura::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 72px;
    z-index: 1;
    pointer-events: none;
    /* Duas declarações, e a ordem é a alternativa: onde `color-mix` não
       existir a segunda é inválida e cai inteira, sobrando a primeira. Sem
       isto o véu sumia por completo — um degradê com uma parada inválida não
       degrada, é descartado. */
    background: linear-gradient(to left,
        var(--papel) 12%,
        rgba(255, 255, 255, .7) 55%,
        transparent);
    background: linear-gradient(to left,
        var(--papel) 12%,
        color-mix(in srgb, var(--papel) 70%, transparent) 55%,
        transparent);
    transition: opacity .2s ease;
}
.grade-moldura[data-fim]::after { opacity: 0; }

/* O botão é um CONTROLE, e a primeira versão o desenhou como enfeite: círculo
   branco, borda cinza-clara, chevron navy. Sobre a tabela branca ele sumia — e
   um controle que some não é controle. Agora é cheio, na cor de ação da folha,
   com um anel branco que o descola das notas por baixo.

   O CHEVRON É ::before, NÃO background-image, e isso não é preferência: o
   `button:hover` da folha do app usa o ATALHO `background`, que zera o
   `background-image` junto. Com o desenho no fundo, passar o mouse apagava a
   seta e sobrava um disco navy cego. Como máscara de pseudo-elemento, nenhuma
   regra de fundo o alcança. */
.grade-seta {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;   /* acima do esmaecido: o ::after é o último filho e pinta por
                     cima de tudo — foi ele que lavou a primeira versão */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--acento);
    box-shadow: 0 0 0 3px var(--papel), 0 4px 16px rgba(var(--navy-rgb), .38);
    cursor: pointer;
    transition: opacity .2s ease, box-shadow .15s ease, background-color .15s ease;
}
.grade-seta::before {
    content: "";
    width: 19px;
    height: 19px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center / contain no-repeat;
}
.grade-seta:hover {
    background: var(--acento-escuro);
    box-shadow: 0 0 0 3px var(--papel), 0 6px 20px rgba(var(--navy-rgb), .5);
}
.grade-seta:focus-visible {
    outline: 3px solid var(--don-ciano);
    outline-offset: 3px;
}
.grade-moldura[data-fim] .grade-seta {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .grade-moldura::after,
    .grade-seta { transition: none; }
}



/* --------------------------------------------------------------------------
   17. TRÊS AJUSTES DE LEITURA NA GRADE                                [NOVA]

   17.1 A SEGUNDA LINHA DO CABEÇALHO PERDE O NEGRITO
   São 78 células repetindo P1 · P2 · AVA · Part · Total · Faltas, treze vezes.
   Em negrito, essa repetição pesa mais que os nomes das disciplinas acima —
   que são o que de fato distingue uma coluna da outra. O grupo continua em
   600; a régua que se repete cai para o peso normal.
   -------------------------------------------------------------------------- */
.grade thead th.num {
    font-weight: 400;
}

/* 17.2 "BAIXAR PLANILHA" É A AÇÃO DA TELA
   Quem abre a grade de 109 alunos costuma abrir para levar embora. O link
   estava com borda cinza, do mesmo peso de um "cancelar". Vira botão cheio,
   com a seta de baixar — e é o único botão deste cartão, então não disputa
   com "Filtrar" nem com "Buscar", que moram em outros. */
.botao-secundario {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--acento);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.botao-secundario::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") center / contain no-repeat;
}
.botao-secundario:hover {
    background: var(--acento-escuro);
    color: #fff;
}

/* 17.3 A LINHA QUE ENSINA A LER A GRADE
   "Cada disciplina abre em seis colunas — Prova 1ºBi · Prova 2ºBi · AVA ·
   Participação · Total · Faltas. Total ≥ 6 (aprovado) fica em verde."

   São três informações diferentes servidas em 0.85rem cinza, numa linha que
   atravessa 1080px. Quem precisa dela é justamente quem está vendo a tela
   pela primeira vez — e é a primeira coisa que se pula.

   Cresce, respira e ganha medida de leitura; os seis nomes de coluna, que já
   vêm em <strong>, passam a ter a cor do texto para funcionarem como a
   legenda que são. */
/* A ação mora na linha da legenda (bloco 10 do JS). O texto ocupa a medida de
   leitura e o botão vai para a direita, encostado na tabela em que age. */
.ajuda:has(> .botao-secundario) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.ajuda > .botao-secundario { flex: none; }

/* A medida de leitura passa a valer para o TEXTO, não para a linha: com o
   `max-width` no <p>, o contêiner acabava a 78ch e o botão parava no meio do
   cartão em vez de na borda. */
.ajuda:has(> .botao-secundario) { max-width: none; }
.ajuda > span { max-width: 78ch; }

.ajuda {
    font-size: 0.9375rem;
    line-height: 1.65;
    max-width: 78ch;
    margin: 6px 0 16px;
}
/* A lista de colunas é a legenda da grade, não ênfase dentro de uma frase:
   ganha a cor do texto e um respiro que a separa das duas linhas de prosa
   entre as quais ela mora. */
.ajuda strong {
    display: inline-block;
    margin: 3px 0;
    color: var(--tinta);
    font-weight: 600;
}