/*
 * Estilos do projeto, por cima do Bootstrap local.
 *
 * Duas caras: o PAINEL veste a Lousa, aqui; as páginas de VISITANTE vestem
 * a Contemporânea, no contemporanea.css, que o layout carrega depois deste
 * só nelas (ADR-0046). Os formulários e as fontes daqui valem para as duas.
 *
 * Identidade provisória "Lousa" (ADR-0021, que supersede as cores e a
 * tipografia do ADR-0019): giz sobre o verde da lousa. A assinatura é o traço
 * de giz amarelo, que marca "onde você está" e "quanto já fez" (item atual do
 * menu, aula atual, progresso e o aviso da capa). Sem logo e sem cores do
 * cliente ainda: quando chegarem, mudam só os tokens abaixo.
 *
 * A regra de contraste da Lousa: o amarelo só aparece SOBRE A LOUSA (verde
 * escuro), onde chega a 7,2:1. Sobre o giz claro ele cai para 1,5:1 e some.
 *
 * Nada de style inline nas views: a CSP (style-src 'self') o recusaria (ADR-0016).
 * As fontes são locais, em assets/fonts, com a licença OFL ao lado (ADR-0019).
 */

/* ─── Fontes locais ──────────────────────────────────────────────── */
/* A Bricolage é variável (ADR-0033): peso 200 a 800, largura 75% a 100% e o
   tamanho óptico, num arquivo só. O painel usa 600 e 700; a Contemporânea, 700, na largura normal. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
    src: url('../fonts/bricolage-grotesque-latin-variavel.woff2') format('woff2-variations'),
         url('../fonts/bricolage-grotesque-latin-variavel.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400; font-display: swap;
    src: url('../fonts/instrument-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/instrument-sans-latin-700-normal.woff2') format('woff2'); }

/* ─── Tokens ─────────────────────────────────────────────────────── */
:root {
    --giz:          #F4F6F2;   /* fundo: o branco do giz, levemente verde */
    --folha:        #FFFFFF;   /* superfícies sobre o giz */
    --tinta:        #18201D;   /* texto (15,3:1 sobre o giz) */
    --tinta-suave:  #4C5A53;   /* texto secundário (6,7:1 sobre o giz) */
    --lousa:        #1D3730;   /* o verde do Eurosistem (ADR-0033): links, ação, superfícies escuras */
    --lousa-funda:  #142824;   /* hover e a faixa de exemplo */
    --giz-amarelo:  #E8C547;   /* a assinatura, e só sobre a lousa (7,2:1) */
    --giz-apagado:  #C9D2CC;   /* texto secundário sobre a lousa (7,8:1) */
    --risco:        #D6DDD7;   /* linhas e bordas */
    --erro:         #A3352C;   /* erros, e só (6,2:1 sobre o giz) */

    --fonte-titulo: 'Bricolage Grotesque', system-ui, sans-serif;
    --fonte-texto:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --largura-menu: 16rem;

    /* O Bootstrap passa a falar a mesma língua */
    --bs-body-bg:          var(--giz);
    --bs-body-color:       var(--tinta);
    --bs-body-font-family: var(--fonte-texto);
    --bs-body-line-height: 1.6;
    --bs-link-color-rgb:   29, 55, 48;
    --bs-link-hover-color-rgb: 20, 40, 36;
    --bs-border-color:     var(--risco);
    --bs-secondary-color:  var(--tinta-suave);
    --bs-danger:           var(--erro);
    --bs-focus-ring-color: rgba(29, 55, 48, .35);
    --bs-form-invalid-color:        var(--erro);
    --bs-form-invalid-border-color: var(--erro);
}

/* ─── Base ───────────────────────────────────────────────────────── */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    color: var(--tinta);
    letter-spacing: -.015em;
}

h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
h2 { font-size: 1.25rem; }

:focus-visible {
    outline: 3px solid var(--lousa);
    outline-offset: 2px;
}

/* Sobre a lousa, o foco é de giz amarelo */
.faixa-exemplo :focus-visible,
.menu-item[aria-current="page"]:focus-visible {
    outline-color: var(--giz-amarelo);
}

/* ─── A assinatura: o traço de giz ───────────────────────────────── */
/* Um traço desenhado à mão (assets/img/traco-giz.svg) usado como máscara: a
   forma vem do SVG, a cor vem do token. Fica sempre sobre a lousa. */
mark,
.menu-item[aria-current="page"],
.lista-aulas-atual {
    position: relative;
}

mark::after,
.menu-item[aria-current="page"]::after,
.lista-aulas-atual::after {
    content: '';
    position: absolute;
    pointer-events: none;
    background: var(--giz-amarelo);
    -webkit-mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
    mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
}

mark {
    display: inline-block;
    padding: 0;
    color: inherit;
    background: none;
}

mark::after {
    left: -.15em;
    right: -.3em;
    bottom: -.3em;
    height: .5em;
}

.btn-primary {
    --bs-btn-color: var(--giz);
    --bs-btn-bg: var(--lousa);
    --bs-btn-border-color: var(--lousa);
    --bs-btn-hover-color: var(--giz);
    --bs-btn-hover-bg: var(--lousa-funda);
    --bs-btn-hover-border-color: var(--lousa-funda);
    --bs-btn-active-color: var(--giz);
    --bs-btn-active-bg: var(--lousa-funda);
    --bs-btn-active-border-color: var(--lousa-funda);
    --bs-btn-disabled-bg: var(--lousa);
    --bs-btn-disabled-border-color: var(--lousa);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--lousa);
    --bs-btn-border-color: var(--lousa);
    --bs-btn-hover-color: var(--giz);
    --bs-btn-hover-bg: var(--lousa);
    --bs-btn-hover-border-color: var(--lousa);
    --bs-btn-active-color: var(--giz);
    --bs-btn-active-bg: var(--lousa-funda);
    font-weight: 600;
}

.pular-para-conteudo {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--folha);
    color: var(--lousa);
}

.pular-para-conteudo:focus { top: 1rem; }

.marca {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--tinta);
    text-decoration: none;
    letter-spacing: -.02em;
}

/* ─── Páginas públicas ─────────────────────────────────────────── */
/* A barra, a página inicial, as telas de conta, os avisos e o rodapé das
   páginas de visitante vestem a Contemporânea, no contemporanea.css (ADR-0046). */

/* ─── Faixa das telas de exemplo (ADR-0020) ──────────────────────── */
.faixa-exemplo {
    background: var(--lousa-funda);
    color: var(--giz);
    font-size: .875rem;
}

.faixa-exemplo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1.5rem;
    padding: .5rem 1rem;
}

.faixa-exemplo-texto { margin: 0; }

.faixa-exemplo-papeis {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
}

.faixa-exemplo-papeis a { color: var(--giz); }

/* Papel atual: giz amarelo sobre a lousa, sem fundo, com o traço embaixo */
.faixa-exemplo-papeis a[aria-current="page"] {
    position: relative;
    color: var(--giz-amarelo);
    text-decoration: none;
    font-weight: 600;
}

.faixa-exemplo-papeis a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: -.1em;
    right: -.2em;
    bottom: -.15em;
    height: .4em;
    background: var(--giz-amarelo);
    -webkit-mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
    mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
}

/* ─── Painel ─────────────────────────────────────────────────────── */
.barra-painel {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--folha);
    border-bottom: 1px solid var(--risco);
}

.barra-painel-area {
    color: var(--tinta-suave);
    border-left: 1px solid var(--risco);
    padding-left: .75rem;
}

.botao-menu {
    border: 1px solid var(--risco);
    background: var(--folha);
    color: var(--tinta);
    padding: .3rem .75rem;
    border-radius: .375rem;
    font-weight: 600;
}

.painel {
    flex: 1 0 auto;
    display: flex;
}

.painel-menu { background: var(--folha); }

.painel-menu-titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.1rem;
}

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

.menu-item {
    display: block;
    padding: .5rem .6rem;
    color: var(--tinta);
    text-decoration: none;
    border-bottom: 1px solid var(--risco);
}

a.menu-item:hover { color: var(--lousa); text-decoration: underline; }

/* O item atual é um pedaço de lousa, com o traço de giz embaixo do texto */
.menu-item[aria-current="page"] {
    font-weight: 600;
    color: var(--giz);
    background: var(--lousa);
    border-radius: .25rem;
    border-bottom-color: transparent;
    padding-bottom: .7rem;
}

a.menu-item[aria-current="page"]:hover { color: var(--giz); }

.menu-item[aria-current="page"]::after {
    left: .5rem;
    right: 30%;
    bottom: .3rem;
    height: .4rem;
}

.menu-item-em-breve { color: var(--tinta-suave); }
.menu-item-em-breve small { font-size: .75rem; }

.painel-conteudo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem 1rem 3rem;
}

@media (min-width: 992px) {
    .painel-menu {
        width: var(--largura-menu);
        flex: 0 0 var(--largura-menu);
        border-right: 1px solid var(--risco);
        padding: 1.5rem 1.25rem;
    }

    .painel-menu .offcanvas-header { display: block; padding: 0 0 .75rem; }
    .painel-menu .offcanvas-header .btn-close { display: none; }

    .painel-conteudo { padding: 2rem 2.5rem 4rem; }
}

.pagina-cabecalho { margin-bottom: 1.5rem; max-width: 46rem; }
.pagina-cabecalho p { color: var(--tinta-suave); margin: 0; }

.pagina-cabecalho-com-acao {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* ─── Progresso: o giz amarelo correndo na lousa ─────────────────── */
/* O trilho é a lousa, o feito é o giz: o amarelo nunca fica sobre o claro. */
.progresso {
    appearance: none;
    display: block;
    width: 100%;
    height: .6rem;
    border: 0;
    border-radius: .2rem;
    overflow: hidden;
    background: var(--lousa);
    color: var(--giz-amarelo);
}

.progresso::-webkit-progress-bar   { background: var(--lousa); }
.progresso::-webkit-progress-value { background: var(--giz-amarelo); }
.progresso::-moz-progress-bar      { background: var(--giz-amarelo); }

/* ─── Meus cursos (T-13) ─────────────────────────────────────────── */
/* A lousa de onde continuar é o que a tela tem de mais forte: a aula escrita
   a giz, com o traço amarelo embaixo, e o botão de giz. O resto é lista. */
.retomar,
.placar {
    max-width: 46rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem 1.25rem 1.25rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .3rem;
}

@media (min-width: 768px) {
    .retomar { padding: 2rem 2rem 1.5rem; }
}

.retomar :focus-visible,
.placar :focus-visible { outline-color: var(--giz-amarelo); }

.retomar-chamada { margin: 0 0 .75rem; color: var(--giz-apagado); font-size: .95rem; }

.retomar-curso { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 500; color: var(--giz-apagado); }
.retomar-curso a { color: inherit; text-decoration-color: rgba(201, 210, 204, .45); }
.retomar-curso a:hover { color: var(--giz); }

.retomar-aula {
    position: relative;
    display: inline-block;
    margin: 0 0 1rem;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-stretch: 87%;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--giz);
}

.retomar-aula::after {
    content: '';
    position: absolute;
    left: -.1em;
    right: 30%;
    bottom: -.4em;
    height: .45em;
    pointer-events: none;
    background: var(--giz-amarelo);
    -webkit-mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
    mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
}

.retomar-onde { margin: .5rem 0 1.25rem; color: var(--giz-apagado); }

/* Na lousa, o trilho do progresso é a lousa mais funda, com um fio de giz */
.retomar-progresso {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    color: var(--giz-apagado);
    font-size: .95rem;
}

.retomar-progresso .progresso {
    flex: 1 1 auto;
    max-width: 22rem;
    background: var(--lousa-funda);
    box-shadow: inset 0 0 0 1px rgba(201, 210, 204, .3);
}

.retomar-progresso .progresso::-webkit-progress-bar { background: var(--lousa-funda); }
.retomar-progresso span { flex: none; }

.retomar-prazo { margin: 1rem 0 0; color: var(--giz-apagado); font-size: .9rem; }

.cursos-outros { margin: 0 0 .5rem; font-size: 1.1rem; }

.cursos-vazio { max-width: 34rem; }

.lista-cursos {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 46rem;
}

.curso {
    padding-block: 1.25rem;
    border-top: 1px solid var(--risco);
}

.curso:last-child { border-bottom: 1px solid var(--risco); }

.curso-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin-bottom: .6rem;
}

.curso-titulo { margin: 0; font-size: 1.2rem; }
.curso-titulo a { color: var(--tinta); }
.curso-titulo a:hover { color: var(--lousa); }
.curso-tipo   { color: var(--tinta-suave); font-size: .9rem; }

.curso-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: .6rem;
    font-size: .95rem;
}

.curso-porcentagem { font-weight: 600; }
.curso-proxima     { color: var(--tinta-suave); flex: 1 1 14rem; }
.curso-acao        { margin-left: auto; }
.curso-rodape .btn { margin-left: auto; }
.curso-prazo       { flex-basis: 100%; color: var(--tinta-suave); font-size: .875rem; }

/* O curso que não dá para estudar agora fica apagado: o giz saiu da lousa.
   A frase diz o porquê; o progresso feito continua lá, sem cor. */
.curso-parado .curso-titulo,
.curso-parado .curso-porcentagem { color: var(--tinta-suave); }

.curso-situacao {
    margin: 0 0 .6rem;
    padding-left: .75rem;
    border-left: 3px dashed var(--tinta-suave);
    color: var(--tinta);
    font-size: .95rem;
}

.curso-parado .progresso { background: var(--risco); color: var(--tinta-suave); }
.curso-parado .progresso::-webkit-progress-bar   { background: var(--risco); }
.curso-parado .progresso::-webkit-progress-value { background: var(--tinta-suave); }
.curso-parado .progresso::-moz-progress-bar      { background: var(--tinta-suave); }

/* ─── Catálogo do painel (T-12) ──────────────────────────────────── */
/* Folhas brancas sobre o giz, com a capa da vitrine. O pé de cada folha é a
   situação do curso para quem olha, e é ali que a tela decide: o curso que o
   aluno já tem ganha o pé de lousa, escrito a giz; o resto fica em tinta. */
.catalogo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 1.5rem;
    max-width: 72rem;
}

.catalogo-curso {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--folha);
    border: 1px solid var(--risco);
    border-radius: .3rem;
    overflow: hidden;
}

.catalogo-capa {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--risco);
}

/* Sem capa, o título escrito a giz numa lousa pequena */
.catalogo-capa--lousa {
    display: flex;
    align-items: flex-end;
    padding: 1rem 1.1rem;
    background: var(--lousa);
    color: var(--giz);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.catalogo-corpo { flex: 1 1 auto; padding: 1rem 1.1rem .75rem; }

.catalogo-titulo { margin: 0 0 .35rem; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.catalogo-titulo a { color: var(--tinta); }
.catalogo-titulo a:hover { color: var(--lousa); }

.catalogo-descricao { margin: 0 0 .75rem; color: var(--tinta-suave); font-size: .95rem; }

.catalogo-dados {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
}

.catalogo-horas { font-weight: 600; }
.catalogo-formato { display: inline-flex; align-items: center; gap: .3rem; color: var(--tinta-suave); }
.catalogo-formato svg { width: 1em; height: 1em; flex: none; }

.catalogo-situacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    padding: .9rem 1.1rem 1.1rem;
    border-top: 1px solid var(--risco);
}

.catalogo-situacao p { margin: 0; flex-basis: 100%; }
.catalogo-situacao form { margin: 0; }
.catalogo-situacao .btn { margin-top: .4rem; }

.catalogo-preco {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.catalogo-nota    { color: var(--tinta-suave); font-size: .9rem; }
.catalogo-planos  { font-size: .95rem; }
.catalogo-parado  { padding-left: .75rem; border-left: 3px dashed var(--tinta-suave); font-size: .95rem; }

/* O que o aluno já tem: o pé vira lousa */
.catalogo-curso--ja_tem .catalogo-situacao {
    background: var(--lousa);
    border-top-color: var(--lousa);
    color: var(--giz-apagado);
}

.catalogo-curso--ja_tem .catalogo-situacao :focus-visible { outline-color: var(--giz-amarelo); }
.catalogo-curso--ja_tem .catalogo-nota { color: var(--giz-apagado); }

.catalogo-tem {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--giz);
}

/* ─── O curso (T-14) ─────────────────────────────────────────────── */
.placar-titulo { margin: 0 0 1rem; font-size: 1.35rem; color: var(--giz); }

.placar-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
}

.placar-feito { margin: 0; font-weight: 600; }
.placar-nota  { margin: 0; color: var(--giz-apagado); font-size: .9rem; }

/* Os módulos são uma sequência: o número grande, a giz apagado, à esquerda */
.modulos-aluno {
    list-style: none;
    counter-reset: modulo;
    max-width: 46rem;
    margin: 0;
    padding: 0;
}

.modulo-aluno {
    counter-increment: modulo;
    position: relative;
    padding: 0 0 2rem 2.75rem;
}

.modulo-aluno::before {
    content: counter(modulo);
    position: absolute;
    left: 0;
    top: -.2rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--tinta-suave);
}

.modulo-aluno-titulo { margin: 0 0 .5rem; font-size: 1.2rem; }

.aulas-aluno {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--risco);
}

.aula-aluno {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .1rem 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--risco);
}

.aula-aluno-titulo { grid-column: 1 / -1; font-weight: 600; }
.aula-aluno-tipo   { color: var(--tinta-suave); font-size: .9rem; }
.aula-aluno-estado { justify-self: end; color: var(--tinta-suave); font-size: .9rem; }
.aula-aluno-concluida .aula-aluno-estado { color: var(--lousa); font-weight: 600; }

.aula-aluno-concluida .aula-aluno-estado::before {
    content: '';
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--lousa);
}

@media (min-width: 768px) {
    .aula-aluno { grid-template-columns: minmax(0, 1fr) 9rem 9.5rem; align-items: baseline; }
    .aula-aluno-titulo { grid-column: auto; }
}

/* ─── A aula (T-16 vídeo, T-17 áudio, T-18 ebook) ────────────────── */
/* A aula acontece numa lousa: a mídia em cima e, na régua de baixo, a
   velocidade (ou as páginas) e a ação de concluir, em giz amarelo. Ao lado,
   a partir de 1200px, as aulas do curso; antes disso, elas descem. */
.aula {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 1200px) {
    .aula { grid-template-columns: minmax(0, 1fr) 18rem; }
}

.aula-principal { min-width: 0; }

.aula-cabeca { margin-bottom: 1.25rem; max-width: 52rem; }
.aula-cabeca h1 { margin: 0; }
.aula-onde { margin: 0 0 .25rem; color: var(--tinta-suave); font-size: .95rem; }

.aula-lousa {
    max-width: 52rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .3rem;
    overflow: hidden;
}

.aula-lousa :focus-visible { outline-color: var(--giz-amarelo); }

/* O vídeo ocupa a largura da lousa, em 16:9, sobre a lousa mais funda */
.aula-tela {
    aspect-ratio: 16 / 9;
    background: var(--lousa-funda);
}

.aula-video {
    display: block;
    width: 100%;
    height: 100%;
}

.aula-midia-aviso {
    margin: 0;
    padding: .85rem 1.25rem 0;
    color: var(--giz-apagado);
}

.aula-midia-aviso[hidden] { display: none; }

/* A régua de baixo: velocidade ou páginas à esquerda, concluir à direita */
.aula-regua {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
}

.aula-velocidade {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--giz-apagado);
    font-size: .925rem;
}

.aula-velocidade .form-select {
    width: auto;
    background-color: var(--lousa-funda);
    color: var(--giz);
    border-color: rgba(201, 210, 204, .45);
    /* A seta do Bootstrap em giz apagado: a escura some na lousa */
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C9D2CC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.aula-conclusao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.aula-conclusao form { margin: 0; }
.aula-feita { margin: 0; color: var(--giz); font-weight: 600; }

.aula-curso-feito {
    max-width: 52rem;
    margin: .75rem 0 0;
    color: var(--tinta-suave);
    font-size: .925rem;
}

/* O tocador do áudio: o botão redondo de giz, o tempo escrito grande e a
   barra; o áudio não tem imagem, então o tempo é o que se olha. */
.tocador {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1.5rem 1.25rem .5rem;
}

@media (min-width: 768px) {
    .tocador { padding: 2.25rem 2rem .75rem; gap: 1rem 1.75rem; }
}

.tocador-play {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--giz-amarelo);
    color: var(--lousa-funda);
}

.tocador-play:hover:not(:disabled) { background: var(--giz); }
.tocador-play:disabled { opacity: .5; }
.tocador-play svg { width: 2rem; height: 2rem; fill: currentColor; }
.tocador-icone-pausa,
.tocando .tocador-icone-play { display: none; }
.tocando .tocador-icone-pausa { display: block; }

.tocador-tempo {
    margin: 0 0 .35rem;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    font-weight: 600;
    font-stretch: 87%;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.tocador-total { font-size: .55em; font-weight: 400; color: var(--giz-apagado); }

.tocador-barra {
    display: block;
    width: 100%;
    accent-color: var(--giz-amarelo);
}

.tocador-pulos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

/* O ebook: a página em branco presa na lousa, uma por vez */
.leitor {
    padding: 1.25rem 1.25rem 0;
}

.leitor:focus-visible { outline: 2px solid var(--giz-amarelo); outline-offset: -4px; }

/* O canvas tem o tamanho da folha em pixels da tela; o CSS o encaixa na
   lousa e na altura da janela, com o título e a régua à vista, sem
   deformar (leitor-pdf.js) */
.leitor-pagina {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: max(15rem, calc(100vh - 17rem));
    margin: 0 auto;
    background: var(--folha);
    border-radius: .15rem;
}

.leitor-paginas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.leitor-contagem {
    min-width: 7.5rem;
    text-align: center;
    color: var(--giz-apagado);
    font-size: .925rem;
    font-variant-numeric: tabular-nums;
}

.aula-texto { max-width: 42rem; margin-top: 1.5rem; }

.aula-bloco { margin-top: 2.25rem; max-width: 42rem; }
.aula-bloco h2 { font-size: 1.15rem; }

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

.lista-anexos li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--risco);
}

.lista-anexos small { color: var(--tinta-suave); }

/* A aula de antes e a de depois, cada uma num canto */
.aula-vizinhas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    max-width: 52rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--risco);
}

.aula-vizinha {
    display: flex;
    flex-direction: column;
    max-width: 22rem;
    font-weight: 600;
}

.aula-vizinha span { font-weight: 400; font-size: .875rem; color: var(--tinta-suave); }
.aula-vizinha-proxima { margin-left: auto; text-align: right; }

/* As aulas do curso, ao lado */
.aula-modulo h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.aula-modulo h2 a { color: var(--tinta); }

.aula-modulo-titulo {
    margin: 1.25rem 0 .35rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

.lista-aulas {
    padding-left: 1.5rem;
    margin: 0;
}

.lista-aulas-item { padding: .4rem .5rem; border-bottom: 1px solid var(--risco); }
.lista-aulas-item::marker { color: var(--tinta-suave); }
.lista-aulas-item small { color: var(--tinta-suave); margin-left: .35rem; }
.lista-aulas-item small[hidden] { display: none; }
.lista-aulas-concluida > a { color: var(--tinta-suave); }

/* A aula atual é um pedaço de lousa, como o item atual do menu */
.lista-aulas-atual {
    font-weight: 600;
    color: var(--giz);
    background: var(--lousa);
    border-radius: .25rem;
    border-bottom-color: transparent;
    padding-bottom: .65rem;
}

.lista-aulas-atual::marker { color: var(--tinta); }
.lista-aulas-atual small { color: var(--giz-apagado); }

.lista-aulas-atual::after {
    left: .4rem;
    right: 35%;
    bottom: .25rem;
    height: .4rem;
}

/* ─── Dúvidas e comentários (F-40 a F-44; ADR-0043) ──────────────── */
/* Embaixo da aula, na página com todos e na caixa do tutor. A peça forte é a
   resposta do tutor: um pedaço da lousa recuado sob o comentário, com o nome
   de quem respondeu no giz amarelo (o amarelo só sobre a lousa). O que só o
   autor vê leva a borda tracejada, e diz em palavras que só ele vê. */
.comentarios { max-width: 46rem; }

.comentario-form {
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1.75rem;
    background: var(--folha);
    border: 1px solid var(--risco);
    border-radius: .25rem;
}

.comentario-tipos { margin-bottom: .6rem; }
.comentario-tipos legend { float: none; font-size: 1rem; margin-bottom: .2rem; }

.comentario-form-pe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .6rem;
}

.comentario-form-pe .form-text { margin: 0; flex: 1 1 16rem; }

.lista-comentarios {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.comentario {
    padding: 1.1rem 0 1.25rem;
    border-top: 1px solid var(--risco);
}

.comentario-quem { margin: 0 0 .3rem; color: var(--tinta-suave); }
.comentario-quem strong { color: var(--tinta); font-weight: 600; }
.comentario-quem time,
.comentario-resposta-quem time { margin-left: .3rem; font-size: .875rem; }
.comentario-texto,
.comentario-resposta-texto { overflow-wrap: anywhere; }

/* Só o autor vê: aguardando a liberação, ou não publicado */
.comentario-pendente,
.comentario-reprovado {
    padding-left: 1rem;
    border-left: 2px dashed var(--tinta-suave);
}

.comentario-reprovado .comentario-texto { color: var(--tinta-suave); }
.comentario-situacao { margin: 0 0 .35rem; font-size: .875rem; font-weight: 600; color: var(--tinta-suave); }

/* A resposta: a lousa, com a pontinha apontando para o comentário */
.comentario-resposta {
    position: relative;
    margin: .9rem 0 0 1.5rem;
    padding: .85rem 1.1rem 1rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .2rem;
}

.comentario-resposta::before {
    content: '';
    position: absolute;
    top: -.45rem;
    left: 1.1rem;
    border: .45rem solid transparent;
    border-top: 0;
    border-bottom-color: var(--lousa);
}

.comentario-resposta-quem { margin: 0 0 .3rem; color: var(--giz-apagado); font-size: .9rem; }
.comentario-resposta-quem strong { color: var(--giz-amarelo); font-weight: 700; }

.comentarios-vazio { color: var(--tinta-suave); max-width: 46rem; }
.comentarios-mais { margin: 0; font-weight: 600; }

.paginas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
}

.paginas-onde { color: var(--tinta-suave); }

/* A caixa do tutor: as duas abas são links, e a da fila diz quantos esperam */
.abas {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.75rem;
    max-width: 52rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--risco);
}

.aba {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0 .6rem;
    margin-bottom: -1px;
    color: var(--tinta-suave);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.aba:hover { color: var(--tinta); }
.aba[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--lousa); }

.aba-conta {
    min-width: 1.7rem;
    padding: 0 .45rem;
    background: var(--lousa);
    color: var(--giz-amarelo);
    border-radius: 1rem;
    font-size: .8rem;
    line-height: 1.6;
    text-align: center;
}

.caixa-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1.25rem;
    max-width: 52rem;
    margin-bottom: 1.5rem;
}

.caixa-filtro-curso { flex: 0 1 20rem; min-width: 0; }
.caixa-filtro .form-check { margin-bottom: .45rem; }

.caixa-comentarios {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 52rem;
}

.caixa-item {
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid var(--risco);
}

.caixa-origem { margin: 0 0 .2rem; font-size: .875rem; color: var(--tinta-suave); }

.caixa-acoes {
    display: grid;
    gap: .9rem;
    max-width: 40rem;
    margin-top: 1rem;
}

.caixa-responder .form-label { font-size: .9rem; }

.caixa-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .6rem;
}

.caixa-dobra summary { width: fit-content; color: var(--lousa); font-weight: 600; cursor: pointer; }
.caixa-dobra[open] summary { margin-bottom: .6rem; }
.caixa-reprovar summary { color: var(--erro); }
.caixa-reprovar .form-text { margin: .3rem 0 .6rem; }

/* A chave da moderação, na administração (T-29) */
.moderacao { max-width: 40rem; }
.moderacao fieldset { margin-bottom: 1.25rem; }
.moderacao legend { float: none; margin-bottom: .75rem; }
.moderacao-opcao { margin-bottom: .75rem; }
.moderacao-opcao .form-check-label { font-weight: 600; }
.moderacao-opcao .form-text { margin: 0; }

.moderacao-registro {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--risco);
    color: var(--tinta-suave);
}

.moderacao-registro p { margin-bottom: .35rem; }

/* ─── Lista de cursos do admin (T-20) ────────────────────────────── */
.tabela-painel {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tinta);
    --bs-table-border-color: var(--risco);
}

.tabela-painel thead th {
    font-weight: 600;
    color: var(--tinta-suave);
    font-size: .875rem;
}

.tabela-painel tbody th { font-weight: 600; }

.situacao {
    display: inline-block;
    padding: 0 .45em;
    font-size: .875rem;
    font-weight: 600;
    border-radius: .2rem;
}

.situacao-publicado { background: var(--lousa); color: var(--giz); }
.situacao-rascunho  { border: 1px dashed var(--tinta-suave); color: var(--tinta-suave); }

.situacao-arquivado { border: 1px solid var(--tinta-suave); color: var(--tinta-suave); background: var(--giz); }

.form-linha { display: grid; gap: 0 1rem; max-width: 46rem; }
.form-linha .campo-acao .btn { min-height: 3rem; }

@media (min-width: 768px) {
    .form-linha { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.bloco-painel-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1rem;
}

.bloco-painel-cabeca h2 { margin: 0; }

.form-busca { display: flex; gap: .5rem; flex: 1 1 18rem; max-width: 26rem; }
.form-busca .form-control { min-height: 2.6rem; }

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

.curso-admin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .2rem 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--risco);
}

.curso-admin:last-child { border-bottom: 1px solid var(--risco); }
.curso-admin .situacao { justify-self: end; align-self: start; }

.curso-admin-titulo {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--tinta);
    text-decoration: none;
}

a.curso-admin-titulo:hover { color: var(--lousa); text-decoration: underline; }

.curso-admin-detalhe { grid-column: 1 / -1; margin: 0; color: var(--tinta-suave); font-size: .925rem; }

@media (min-width: 768px) {
    .curso-admin { grid-template-columns: minmax(0, 1fr) 13rem 9rem 7rem; align-items: baseline; }
    .curso-admin-detalhe { grid-column: auto; }
    .curso-admin .situacao { order: 4; }
}

/* ─── Editor do curso (T-21) ─────────────────────────────────────── */
.trilha {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: .5rem;
    font-size: .925rem;
}

.trilha a { color: var(--tinta-suave); }
.trilha a::after { content: '/'; margin-left: .35rem; color: var(--tinta-suave); }

/* A régua da situação é um pedaço de lousa: os três passos escritos a giz,
   e o traço amarelo embaixo de onde o curso está. */
.regua {
    max-width: 60rem;
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .3rem;
}

.regua :focus-visible { outline-color: var(--giz-amarelo); }

.regua-passos {
    list-style: none;
    display: grid;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
}

@media (min-width: 768px) {
    .regua-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.regua-passo { display: grid; gap: .15rem; color: var(--giz-apagado); }

.regua-nome {
    position: relative;
    justify-self: start;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.2rem;
}

.regua-texto { font-size: .9rem; }

.regua-passo-atual { color: var(--giz); }

.regua-passo-atual .regua-nome::after {
    content: '';
    position: absolute;
    left: -.15em;
    right: -.3em;
    bottom: -.3em;
    height: .5em;
    pointer-events: none;
    background: var(--giz-amarelo);
    -webkit-mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
    mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
}

.regua-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(201, 210, 204, .25);
}

.regua-acoes form { margin: 0; }
.regua-nota { margin: 0; color: var(--giz-apagado); font-size: .9rem; flex: 1 1 18rem; }

.btn-giz {
    --bs-btn-color: var(--lousa-funda);
    --bs-btn-bg: var(--giz-amarelo);
    --bs-btn-border-color: var(--giz-amarelo);
    --bs-btn-hover-color: var(--lousa-funda);
    --bs-btn-hover-bg: var(--giz);
    --bs-btn-hover-border-color: var(--giz);
    --bs-btn-active-color: var(--lousa-funda);
    --bs-btn-active-bg: var(--giz);
    font-weight: 700;
}

.btn-lousa-contorno {
    --bs-btn-color: var(--giz);
    --bs-btn-border-color: var(--giz-apagado);
    --bs-btn-hover-color: var(--lousa-funda);
    --bs-btn-hover-bg: var(--giz);
    --bs-btn-hover-border-color: var(--giz);
    --bs-btn-active-color: var(--lousa-funda);
    --bs-btn-active-bg: var(--giz);
    font-weight: 600;
}

.regua-faltas {
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--folha);
    color: var(--tinta);
    border-left: 4px solid var(--erro);
    border-radius: .2rem;
}

.regua-faltas p { margin: 0 0 .25rem; font-weight: 600; color: var(--erro); }
.regua-faltas ul { margin: 0; padding-left: 1.2rem; }

.form-apresentacao { max-width: 46rem; }
.campo-carga { max-width: 14rem; }

/* A estrutura do curso: os módulos numerados (é a ordem que o aluno segue) e,
   dentro de cada um, as aulas como linhas do caderno, com "1.2" ao lado. */
.estrutura {
    list-style: none;
    margin: 1.5rem 0 2rem;
    padding: 0;
    counter-reset: modulo;
}

.estrutura-modulo {
    counter-increment: modulo;
    counter-reset: aula;
    padding: 1rem 0 1.25rem;
    border-top: 2px solid var(--lousa);
    background: var(--giz);
}

.modulo-cabeca {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.modulo-titulo {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.2rem;
}

.modulo-titulo::before {
    content: 'Módulo ' counter(modulo);
    display: block;
    font-family: var(--fonte-texto);
    font-size: .85rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

.estrutura-aulas {
    list-style: none;
    margin: .75rem 0 1rem;
    padding: 0;
    min-height: 2.75rem; /* o módulo vazio ainda recebe aula arrastada */
}

.estrutura-aula {
    counter-increment: aula;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "alca titulo   titulo   mover"
        "alca tipo     conteudo mover";
    align-items: center;
    gap: .1rem .75rem;
    padding: .55rem .25rem;
    border-bottom: 1px solid var(--risco);
    background: var(--giz);
}

.estrutura-aula > .alca { grid-area: alca; }
.estrutura-aula-titulo { grid-area: titulo; font-weight: 600; color: var(--tinta); text-decoration: none; }
.estrutura-aula-titulo::before { content: counter(modulo) '.' counter(aula) ' '; color: var(--tinta-suave); font-weight: 400; }
a.estrutura-aula-titulo:hover { color: var(--lousa); text-decoration: underline; }
.estrutura-aula .aula-tipo { grid-area: tipo; }
.estrutura-aula .conteudo-situacao { grid-area: conteudo; }
.aula-mover { grid-area: mover; }

@media (min-width: 768px) {
    .estrutura-aula {
        grid-template-columns: auto 5.5rem minmax(0, 1fr) 8.5rem auto;
        grid-template-areas: "alca tipo titulo conteudo mover";
    }
}

.estrutura-sem-aula { padding: .6rem .25rem; color: var(--tinta-suave); border-bottom: 1px dashed var(--risco); }

.aula-tipo { font-size: .85rem; font-weight: 600; color: var(--lousa); }
.conteudo-situacao { font-size: .85rem; color: var(--tinta-suave); }
.conteudo-pronto { color: var(--lousa); font-weight: 600; }
.conteudo-falhou { color: var(--erro); font-weight: 600; }

/* A alça: seis pontos de giz, para o mouse e o toque; o teclado usa as setas */
.alca {
    width: 1.25rem;
    height: 2rem;
    flex: 0 0 auto;
    cursor: grab;
    touch-action: none;
    background-image: radial-gradient(circle, var(--tinta-suave) 1.5px, transparent 1.6px);
    background-size: .5rem .5rem;
    background-position: center;
    background-repeat: space;
    opacity: .7;
}

.alca:hover { opacity: 1; }

.modulo-mover, .aula-mover { display: flex; gap: .25rem; }
.mover { margin: 0; }

.botao-mover {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #A9B5AD;
    border-radius: .25rem;
    background: var(--folha);
    color: var(--lousa);
    font-weight: 700;
    line-height: 1;
}

.botao-mover:hover { border-color: var(--lousa); }

/* Arrastando: o item fica apagado, e a linha da lousa marca onde ele cai */
.arrastando { opacity: .45; }
.alvo-antes { box-shadow: inset 0 3px 0 var(--lousa); }
.alvo-depois { box-shadow: inset 0 -3px 0 var(--lousa); }
.estrutura-salvando { opacity: .7; pointer-events: none; }

.nova-aula { max-width: 46rem; }
.nova-aula .form-label { font-size: .925rem; }
.nova-aula-tipos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

.modulo-mais { margin-top: 1rem; max-width: 46rem; }
.modulo-mais summary { color: var(--lousa); font-weight: 600; cursor: pointer; }
.modulo-mais[open] summary { margin-bottom: .75rem; }

.estrutura-vazia-curso {
    max-width: 46rem;
    padding: 1.25rem;
    border: 1px dashed var(--tinta-suave);
    border-radius: .25rem;
}

.novo-modulo { padding-top: 1.25rem; border-top: 2px solid var(--lousa); }

/* ─── Apagar o módulo ────────────────────────────────────────────── */
.bloco-perda { max-width: 46rem; }

.lista-perda { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.lista-perda li {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--risco);
}

.lista-perda-titulo { flex: 1 1 12rem; font-weight: 600; }

.acoes-confirmar { display: flex; flex-wrap: wrap; gap: .75rem; }
.acoes-confirmar form { margin: 0; }

.btn-erro {
    --bs-btn-color: var(--folha);
    --bs-btn-bg: var(--erro);
    --bs-btn-border-color: var(--erro);
    --bs-btn-hover-color: var(--folha);
    --bs-btn-hover-bg: #85291F;
    --bs-btn-hover-border-color: #85291F;
    --bs-btn-active-color: var(--folha);
    --bs-btn-active-bg: #85291F;
    font-weight: 600;
}

/* ─── Editor da aula (T-22) ──────────────────────────────────────── */
.aula-cabeca-tipo { margin: 0 0 .25rem; }
.conteudo-linha { margin-bottom: .5rem; }

/* O conteúdo da aula. Enquanto falta algo, o quadro fica no claro, com a
   borda dizendo o estado; quando a aula fica pronta, ele vira um pedaço de
   lousa, e "Pronto" ganha o traço de giz: o único momento de cor da tela. */
.conteudo-atual {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--tinta-suave);
    border-radius: .25rem;
    background: var(--folha);
}

.conteudo-atual > :last-child { margin-bottom: 0; }
.conteudo-atual .conteudo-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.conteudo-atual .conteudo-situacao { font-size: 1.05rem; font-weight: 600; color: var(--tinta); }

.conteudo-atual-processando { border-style: solid; border-color: var(--lousa); }
.conteudo-atual-falhou { border: 1px solid var(--erro); border-left-width: 4px; }
.conteudo-atual-falhou .conteudo-situacao { color: var(--erro); }

.conteudo-atual-pronto {
    border: 0;
    background: var(--lousa);
    color: var(--giz);
}

.conteudo-atual-pronto .conteudo-situacao { color: var(--giz); font-size: 1.15rem; }
.conteudo-atual-pronto .conteudo-detalhe { color: var(--giz-apagado); }
.conteudo-atual-pronto a { color: var(--giz); }
.conteudo-atual-pronto a:hover { color: var(--giz-amarelo); }

.conteudo-detalhe { color: var(--tinta-suave); font-size: .9rem; font-variant-numeric: tabular-nums; }
.conteudo-explica { max-width: 40rem; margin-bottom: .5rem; color: var(--tinta-suave); }
.conteudo-explica-erro { color: var(--erro); }
.conteudo-arquivo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: 0; overflow-wrap: anywhere; }

/* O envio direto: a barra de giz corre enquanto o arquivo sobe */
.envio-direto { max-width: 46rem; }
.envio-andamento { margin: .75rem 0 .5rem; }
.envio-mensagem { min-height: 1.5rem; margin-bottom: .5rem; font-size: .925rem; color: var(--tinta-suave); }
.envio-mensagem:empty { min-height: 0; margin: 0; }
.envio-mensagem-erro { color: var(--erro); font-weight: 600; }
.envio-sem-script { color: var(--tinta-suave); font-size: .925rem; }

.envio-cuidado {
    max-width: 40rem;
    padding: .6rem .9rem;
    border-left: 3px solid var(--erro);
    background: var(--giz);
    font-size: .925rem;
}

/* Sem a Cloudflare, o lugar do envio fica marcado a giz, vazio: não é erro de
   quem usa, é o servidor que ainda não tem onde guardar o arquivo */
.envio-indisponivel {
    max-width: 40rem;
    margin: 0;
    padding: .75rem 1rem;
    border: 2px dashed var(--risco);
    border-radius: .25rem;
    color: var(--tinta-suave);
    font-size: .95rem;
}

/* Os materiais de apoio: uma lista em ordem, como as aulas do curso */
.lista-materiais { list-style: none; margin: 0 0 1.5rem; padding: 0; counter-reset: material; }

.material {
    counter-increment: material;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tipo" "nome" "acoes";
    gap: .35rem 1rem;
    align-items: center;
    padding: .75rem .25rem;
    border-bottom: 1px solid var(--risco);
}

.material:first-child { border-top: 1px solid var(--risco); }

.material-tipo { grid-area: tipo; font-size: .85rem; font-weight: 600; color: var(--lousa); }
.material-tipo::before { content: counter(material) '. '; color: var(--tinta-suave); font-weight: 400; }
.material-nome { grid-area: nome; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; min-width: 0; }
.material-nome a { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.material-nome a:hover { color: var(--lousa); }
.material-endereco { overflow-wrap: anywhere; }
.material-acoes { grid-area: acoes; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.material-acoes form { margin: 0; }
.material-remover { color: var(--erro); font-weight: 600; }
.material-remover:hover { color: #85291F; }

@media (min-width: 768px) {
    .material {
        grid-template-columns: 6.5rem minmax(0, 1fr) auto;
        grid-template-areas: "tipo nome acoes";
    }
}

.materiais-vazio { padding: .75rem 0; color: var(--tinta-suave); border-bottom: 1px dashed var(--risco); }

.materiais-novos { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.material-novo { padding-top: 1rem; border-top: 2px solid var(--lousa); }
.material-novo-titulo { margin-bottom: .75rem; font-size: 1.05rem; }

@media (min-width: 768px) {
    .materiais-novos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; }
    .materiais-novos .campo-acao { padding-top: 0; }
}

.bloco-apagar-aula { padding-top: 1.5rem; border-top: 1px solid var(--risco); }

/* ─── A capa do curso (T-21) ─────────────────────────────────────── */
.capa-curso { max-width: 46rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--risco); }
.capa-curso-titulo { margin-bottom: .75rem; font-size: 1.15rem; }

.capa-curso-quadro {
    max-width: 32rem;
    aspect-ratio: 16 / 9;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: .25rem;
    background: var(--lousa);
}

.capa-curso-quadro img { display: block; width: 100%; height: 100%; object-fit: cover; }

.capa-curso-vazia {
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px dashed var(--tinta-suave);
    background: var(--giz);
    color: var(--tinta-suave);
    text-align: center;
}

.capa-curso-vazia p { margin: 0; }
.capa-curso-envio .campo-acao { padding-top: 0; }

/* ─── Formulários ────────────────────────────────────────────────── */
.campo { margin-bottom: 1.1rem; }

.form-label { font-weight: 600; margin-bottom: .3rem; }

.form-control,
.form-select {
    min-height: 3rem;
    border-color: #A9B5AD; /* a borda do campo precisa de 3:1 sobre o claro */
    background-color: var(--folha);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--lousa);
    box-shadow: 0 0 0 .2rem rgba(29, 55, 48, .2);
}

.form-control[readonly] { background-color: var(--giz); color: var(--tinta-suave); }

.campo-dica { margin: .3rem 0 0; font-size: .875rem; color: var(--tinta-suave); }
.invalid-feedback { margin-bottom: 0; }

/* O "Mostrar" fica dentro do campo da senha, do lado direito */
.campo-senha { position: relative; }
.campo-senha .form-control { padding-right: 5.5rem; }

.botao-ver-senha {
    position: absolute;
    top: .4rem;
    right: .4rem;
    bottom: .4rem;
    padding: 0 .75rem;
    border: 0;
    border-radius: .25rem;
    background: none;
    color: var(--lousa);
    font-weight: 600;
    font-size: .9rem;
}

.botao-ver-senha:hover { background: var(--giz); }

/* Avisos de página: o resultado (lousa) e o erro (vermelho), sempre com texto */
.aviso-status,
.aviso-erro {
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--folha);
    border-left: 4px solid var(--lousa);
    max-width: 46rem;
}

.aviso-erro {
    border-left-color: var(--erro);
    color: var(--erro);
    font-weight: 600;
}

.btn-outline-erro {
    --bs-btn-color: var(--erro);
    --bs-btn-border-color: var(--erro);
    --bs-btn-hover-color: var(--folha);
    --bs-btn-hover-bg: var(--erro);
    --bs-btn-hover-border-color: var(--erro);
    --bs-btn-active-color: var(--folha);
    --bs-btn-active-bg: var(--erro);
    font-weight: 600;
}

/* ─── Barra do painel: quem está logado e o Sair ─────────────────── */
.barra-painel { flex-wrap: wrap; }

.barra-painel-conta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-left: auto;
}

.barra-painel-areas a { color: var(--lousa); font-weight: 600; }
.barra-painel-nome { color: var(--tinta-suave); }
.barra-painel-sair { margin: 0; }

@media (max-width: 575.98px) {
    .barra-painel-nome { display: none; }
}

/* ─── Início provisório das áreas ────────────────────────────────── */
.quadro-vazio {
    max-width: 46rem;
    padding: 1.5rem;
    border: 1px dashed var(--tinta-suave);
    border-radius: .25rem;
}

.quadro-vazio p { margin: 0; }
.quadro-vazio .quadro-vazio-nota { margin-top: .5rem; color: var(--tinta-suave); font-size: .9rem; }

/* ─── Usuários e papéis (T-30) ───────────────────────────────────── */
.bloco-painel { max-width: 60rem; margin-bottom: 2.5rem; }
.bloco-painel-nota { color: var(--tinta-suave); }

.form-novo-acesso { display: grid; gap: 0 1rem; }

@media (min-width: 768px) {
    .form-novo-acesso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 11rem auto; align-items: start; }
    .campo-acao { padding-top: 1.9rem; }
    .campo-acao .btn { min-height: 3rem; }
}

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

.pessoa {
    display: grid;
    gap: .25rem 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--risco);
}

.pessoa:last-child { border-bottom: 1px solid var(--risco); }
.pessoa p { margin: 0; }

@media (min-width: 768px) {
    .pessoa { grid-template-columns: minmax(0, 2fr) 8rem 10rem minmax(0, 1.6fr); align-items: center; }
}

.pessoa-nome { font-weight: 600; }
.pessoa-nome small { font-weight: 400; color: var(--tinta-suave); }
.pessoa-email, .pessoa-situacao, .pessoa-nota { color: var(--tinta-suave); font-size: .925rem; }
.pessoa-desativada .pessoa-nome { color: var(--tinta-suave); }

.pessoa-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .pessoa-acoes { justify-content: flex-end; }
}

.pessoa-acoes form { margin: 0; }

.situacao-desativado { border: 1px solid var(--erro); color: var(--erro); }

/* ─── O que se vende: planos, venda do curso, formas de pagamento ── */
/* ADR-0035. O preço é o protagonista: em Bricolage, com algarismos de mesma
   largura, para os valores alinharem uns sob os outros. O único pedaço de
   lousa de cada tela é o dinheiro como o aluno vai ver (a vitrine da T-23 e o
   simulador da T-25); o resto fica no claro e quieto. */
.cabecalho-venda { margin-top: .35rem; font-weight: 600; }

.lista-planos { list-style: none; margin: 0 0 .75rem; padding: 0; }

.plano {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--risco);
}

.plano:last-child { border-bottom: 1px solid var(--risco); }
.plano p { margin: 0; }

.plano-nome {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--tinta);
    text-decoration: none;
}

a.plano-nome:hover { color: var(--lousa); text-decoration: underline; }
.plano-cursos { color: var(--tinta-suave); font-size: .925rem; }
.plano-situacao { justify-self: end; align-self: start; }
.plano-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.plano-acoes form { margin: 0; }
.plano-inativo .plano-nome,
.plano-inativo .plano-valor { color: var(--tinta-suave); }

.plano-preco {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
}

.plano-valor {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
}

.plano-por { color: var(--tinta-suave); }
.plano-preco-cabecalho { margin: .25rem 0 0; }
.plano-preco-cabecalho .situacao { align-self: center; margin-left: .25rem; }

@media (min-width: 768px) {
    .plano { grid-template-columns: minmax(0, 1fr) 14rem 6rem auto; align-items: center; }
    .plano-preco { grid-column: auto; justify-content: flex-end; }
    .plano-situacao { justify-self: start; align-self: center; }
    .plano-acoes { grid-column: auto; justify-content: flex-end; }
}

.form-plano { display: grid; gap: 0 1rem; max-width: 46rem; }
.campo-dinheiro { max-width: 14rem; }
.campo-dinheiro .form-control { font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
    .form-plano { grid-template-columns: minmax(0, 1fr) 12rem 11rem; align-items: start; }
    .campo-plano-texto,
    .campo-plano-botao { grid-column: 1 / -1; }
}

.lista-cursos-plano { list-style: none; margin: 0 0 .75rem; padding: 0; max-width: 46rem; }

.lista-cursos-plano li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--risco);
}

.confirmar-apagar summary { color: var(--erro); font-weight: 600; cursor: pointer; }
.confirmar-apagar[open] summary { margin-bottom: .75rem; }
.confirmar-apagar p { max-width: 40rem; }

/* A vitrine da T-23: o curso à venda, escrito a giz */
.vitrine-venda {
    max-width: 46rem;
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.5rem 1rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .3rem;
}

.vitrine-venda :focus-visible { outline-color: var(--giz-amarelo); }
.vitrine-venda a { color: var(--giz); }
.vitrine-venda a:hover { color: var(--giz-amarelo); }

.vitrine-venda-titulo {
    margin: 0 0 .75rem;
    font-family: var(--fonte-texto);
    font-size: 1rem;
    font-weight: 600;
    color: var(--giz-apagado);
    letter-spacing: 0;
}

.vitrine-venda-preco {
    margin: 0 0 .9rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.vitrine-venda-vazia { margin: 0 0 .9rem; font-size: 1.15rem; font-weight: 600; }

.vitrine-venda-linhas { margin: 0 0 1rem; padding-left: 1.1rem; }
.vitrine-venda-linhas li { padding: .1rem 0; }
.vitrine-venda-linhas li::marker { color: var(--giz-apagado); }

.vitrine-venda-nota {
    margin: 0;
    padding-top: .75rem;
    border-top: 1px solid rgba(201, 210, 204, .25);
    color: var(--giz-apagado);
    font-size: .9rem;
}

.form-oferta { max-width: 46rem; }
.campo-prazo { border: 0; padding: 0; }

.prazo-dias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.prazo-dias .form-check-input { margin-top: 0; }
.campo-dias { width: 6.5rem; font-variant-numeric: tabular-nums; }

.lista-escolha-planos { list-style: none; margin: 0 0 1.25rem; padding: 0; max-width: 46rem; }

.escolha-plano {
    margin: 0;
    padding: .7rem 0 .7rem 2rem;
    border-bottom: 1px solid var(--risco);
}

.escolha-plano:first-child { border-top: 1px solid var(--risco); }
.escolha-plano .form-check-input { margin-left: -2rem; }

.escolha-plano .form-check-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .75rem;
}

.escolha-plano-nome { font-weight: 600; }
.escolha-plano-preco { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/* T-25: a regra à esquerda, o simulador à direita (embaixo no celular) */
.pagamento-grade { display: grid; gap: 2.5rem; max-width: 72rem; }

@media (min-width: 1200px) {
    .pagamento-grade { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
    .simulador { position: sticky; top: 1.5rem; }
}

.pagamento-regra { margin-bottom: 0; }

.grupo-pagamento {
    margin: 0 0 1.75rem;
    padding: 0 0 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--risco);
}

.grupo-pagamento legend {
    float: none;
    margin-bottom: .6rem;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.05rem;
}

.campo-parcelas { max-width: 22rem; }
.campo-parcelas .form-control { max-width: 7rem; }

.tabela-faixas { max-width: 26rem; margin-bottom: .5rem; }
.tabela-faixas td { vertical-align: middle; }
.tabela-faixas .input-group { max-width: 8.5rem; }
.faixa-de { width: 3.5rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.faixa-com-erro td { border-bottom: 0; }
.faixa-erro td { padding-top: 0; }

/* O simulador: o checkout escrito a giz, com o traço no maior parcelamento */
.simulador {
    padding: 1.25rem 1.25rem 1rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .3rem;
}

.simulador h2 { color: var(--giz); margin-bottom: .25rem; }
.simulador :focus-visible { outline-color: var(--giz-amarelo); }
.simulador-nota { margin: 0 0 1rem; color: var(--giz-apagado); font-size: .9rem; }
.simulador-form { margin-bottom: 1rem; }
.simulador-form .form-control { font-variant-numeric: tabular-nums; }
.simulador-erro { margin: .4rem 0 0; color: var(--giz); font-weight: 600; }
.simulador .form-control.is-invalid { border-color: var(--giz-amarelo); }

.simulador-pix {
    margin: 0 0 .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(201, 210, 204, .25);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tabela-simulador {
    width: 100%;
    margin-bottom: .75rem;
    font-variant-numeric: tabular-nums;
    border-collapse: collapse;
}

.tabela-simulador th,
.tabela-simulador td {
    padding: .4rem .5rem .4rem 0;
    vertical-align: top;
    text-align: left;
}

.tabela-simulador thead th { color: var(--giz-apagado); font-size: .85rem; font-weight: 600; }
.tabela-simulador tbody th { font-family: var(--fonte-titulo); font-weight: 600; white-space: nowrap; }
.tabela-simulador tbody tr { border-top: 1px solid rgba(201, 210, 204, .18); }
.tabela-simulador small { display: block; color: var(--giz-apagado); font-size: .8rem; }

.simulador-maior th span { position: relative; display: inline-block; }

.simulador-maior th span::after {
    content: '';
    position: absolute;
    left: -.15em;
    right: -.3em;
    bottom: -.25em;
    height: .45em;
    pointer-events: none;
    background: var(--giz-amarelo);
    -webkit-mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
    mask: url('../img/traco-giz.svg') center / 100% 100% no-repeat;
}
/* ─── Acessos aos cursos (T-31) ──────────────────────────────────── */
/* O traço à esquerda da linha repete o estado do acesso, como a marca da
   chamada: cheio de lousa é valendo, tracejado é suspenso, sem traço é
   vencido ou encerrado. O texto do estado está sempre ao lado. */
.form-dar-acesso { display: grid; gap: 0 1rem; }

@media (min-width: 768px) {
    .form-dar-acesso { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 11rem; align-items: start; }
    .form-dar-acesso .campo-motivo { grid-column: 1 / 3; }
}

.campo-opcional { font-weight: 400; color: var(--tinta-suave); }
.campo-nota { margin: .25rem 0 0; color: var(--tinta-suave); font-size: .875rem; }

.acessos-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1rem;
}

.acessos-topo h2 { margin: 0; }

.form-filtro-acessos { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 22rem; max-width: 36rem; }
.form-filtro-acessos .form-control { flex: 1 1 13rem; min-height: 2.6rem; }
.form-filtro-acessos .form-select  { flex: 1 1 11rem; min-height: 2.6rem; }

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

.acesso {
    display: grid;
    gap: .25rem 1rem;
    padding: .9rem 0 .9rem .9rem;
    border-top: 1px solid var(--risco);
    border-left: 4px solid transparent;
}

.acesso:last-child { border-bottom: 1px solid var(--risco); }
.acesso p { margin: 0; }

.acesso-vigente  { border-left-color: var(--lousa); }
.acesso-suspenso { border-left: 4px dashed var(--tinta-suave); }

@media (min-width: 768px) {
    .acesso { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) 8rem 11rem 6.5rem; align-items: center; }
    .acesso-historia { grid-column: 1 / -1; }
    .acesso-acoes { text-align: right; }
}

.acesso-aluno { font-weight: 600; }
.acesso-email, .acesso-origem, .acesso-prazo { color: var(--tinta-suave); font-size: .925rem; }
.acesso-email { overflow-wrap: anywhere; }
/* No celular, o pedido e o prazo seguem na mesma linha, e o Encerrar vem
   depois da história, por último no cartão */
.acesso-ref { margin-left: .35rem; font-size: .85rem; }
.acesso-prazo { margin-left: .4rem; }
.acesso-historia { order: 1; }
.acesso-acoes { order: 2; margin-top: .35rem; }

@media (min-width: 768px) {
    .acesso-ref, .acesso-prazo { display: block; margin-left: 0; }
    .acesso-historia, .acesso-acoes { order: 0; }
    .acesso-acoes { margin-top: 0; }
}

.acesso-vencido .acesso-aluno, .acesso-vencido .acesso-curso,
.acesso-encerrado .acesso-aluno, .acesso-encerrado .acesso-curso { color: var(--tinta-suave); }

.acesso-historia {
    list-style: none;
    margin: .2rem 0 0;
    padding: 0;
    color: var(--tinta-suave);
    font-size: .875rem;
}

.situacao-acesso-vigente   { background: var(--lousa); color: var(--giz); }
.situacao-acesso-suspenso  { border: 1px dashed var(--tinta); color: var(--tinta); }
.situacao-acesso-vencido   { border: 1px solid var(--tinta-suave); color: var(--tinta-suave); }
.situacao-acesso-encerrado { border: 1px solid var(--risco); color: var(--tinta-suave); }

.form-encerrar-acesso { max-width: 32rem; }
.form-encerrar-acesso .campo { margin-bottom: 1.25rem; }

/* ─── O certificado (T-14, T-15, T-26; ADR-0042) ─────────────────── */
/* O código do certificado se lê letra por letra: os números em coluna e um
   respiro entre os caracteres, na letra do título */
.codigo-certificado {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    white-space: nowrap;
}

/* T-14: o certificado no pé da lousa, depois de um fio de giz */
.placar-certificado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px dashed rgba(201, 210, 204, .4);
}

.placar-certificado form { margin: 0; }
.placar-certificado-texto { flex: 1 1 18rem; margin: 0; color: var(--giz-apagado); }
.placar-certificado .codigo-certificado { color: var(--giz-amarelo); }
.placar-aviso { flex: 1 1 100%; margin: 0; color: var(--giz); font-weight: 600; }
.placar-certificado .btn:disabled { --bs-btn-disabled-color: var(--giz-apagado); --bs-btn-disabled-border-color: rgba(201, 210, 204, .45); opacity: 1; }

/* T-15: um certificado por linha, o botão de baixar à direita */
.lista-certificados { list-style: none; margin: 0; padding: 0; max-width: 46rem; }

.certificado-linha {
    display: grid;
    gap: .75rem 1.5rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--risco);
}

.certificado-linha:last-child { border-bottom: 1px solid var(--risco); }
.certificado-linha-titulo { margin: 0 0 .3rem; font-size: 1.2rem; overflow-wrap: anywhere; }
.certificado-linha-dados { margin: 0 0 .2rem; color: var(--tinta-suave); }
.certificado-linha-codigo { margin: 0; color: var(--tinta-suave); font-size: .95rem; }
.certificado-linha-codigo a { color: var(--lousa); }
.certificado-linha-baixar { justify-self: start; }

@media (min-width: 768px) {
    .certificado-linha { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* T-26: o que se escreve à esquerda, a prévia na lousa à direita */
.certificado-grade { display: grid; gap: 2.5rem; max-width: 76rem; }
.certificado-edicao { min-width: 0; }
.certificado-edicao .bloco-painel { max-width: 40rem; }

@media (min-width: 1200px) {
    .certificado-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); align-items: start; }
    .previa { position: sticky; top: 1.5rem; }
}

.form-certificado textarea { resize: vertical; }

.marcas { margin-top: .4rem; }
.marcas .campo-dica { margin-bottom: .5rem; }

.marcas-lista { display: grid; gap: .3rem; margin: 0; font-size: .9rem; }
.marcas-lista div { display: flex; flex-wrap: wrap; gap: .1rem .75rem; }
.marcas-lista dt { flex: 0 0 4.5rem; font-weight: 400; }
.marcas-lista dd { margin: 0; color: var(--tinta-suave); }
.marcas-lista code { color: var(--lousa); font-size: .95em; font-weight: 600; }

@media (min-width: 768px) {
    .form-assinante { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
}

.form-certificado-acoes { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .25rem; }

.arte-pecas { display: grid; gap: 2rem; }
.arte-peca { padding-top: 1rem; border-top: 2px solid var(--lousa); }
.arte-peca-titulo { margin-bottom: .75rem; font-size: 1.05rem; }

/* O quadro mostra a peça no lugar dela: o logo sobre o verde da faixa, o
   fundo na proporção da página */
.arte-quadro {
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: .25rem;
}

.arte-quadro-logo { max-width: 16rem; aspect-ratio: 58 / 26; padding: .75rem; background: var(--lousa); }
.arte-quadro-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.arte-quadro-fundo { max-width: 24rem; aspect-ratio: 297 / 210; background: var(--folha); border: 1px solid var(--risco); }
.arte-quadro-fundo img { width: 100%; height: 100%; object-fit: cover; }

.arte-quadro-vazio { padding: 1rem; border: 1px dashed var(--tinta-suave); background: var(--giz); color: var(--tinta-suave); text-align: center; font-size: .925rem; }
.arte-quadro-vazio p { margin: 0; }
.arte-peca .envio-direto .campo-acao { padding-top: 0; }

.arte-tirar { margin: .25rem 0 0; }
.arte-tirar-botao { padding-inline: 0; color: var(--erro); font-weight: 600; }
.arte-tirar-botao:hover { color: #85291F; }

/* A prévia: a folha do certificado presa na lousa, como no quadro da sala */
.previa {
    padding: 1.25rem 1.25rem 1rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .3rem;
}

.previa h2 { margin-bottom: .25rem; color: var(--giz); }
.previa :focus-visible { outline-color: var(--giz-amarelo); }
.previa-nota { margin: 0 0 1rem; color: var(--giz-apagado); font-size: .9rem; }

.previa-folha {
    aspect-ratio: 297 / 210;
    background: var(--folha);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7);
    transition: opacity .2s ease;
}

.previa-folha-gerando { opacity: .55; }
.previa-canvas { display: block; width: 100%; height: auto; }
.previa-estado { min-height: 1.5rem; margin: .75rem 0 0; color: var(--giz-apagado); font-size: .9rem; }
.previa-estado-erro { color: var(--giz); font-weight: 600; }

/* ─── Minha assinatura e Trocar de plano (T-10, T-11; ADR-0037) ──── */
/* Um pedaço de lousa só: o plano escrito a giz, o preço e a data que importa
   agora, com o traço amarelo embaixo dela. O resto fica no claro, em blocos
   quietos: o passo daquela situação, os cursos e as cobranças. */
.assinatura-lousa {
    max-width: 46rem;
    margin-bottom: 2rem;
    padding: 1.5rem 1.25rem 1.35rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .3rem;
}

@media (min-width: 768px) {
    .assinatura-lousa { padding: 2rem 2rem 1.6rem; }
}

.assinatura-lousa :focus-visible { outline-color: var(--giz-amarelo); }
.assinatura-lousa p { margin: 0; }

.assinatura-situacao { color: var(--giz-apagado); font-size: .95rem; }

.assinatura-plano {
    margin: .2rem 0 .35rem;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-stretch: 87%;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--giz);
    overflow-wrap: anywhere;
}

.assinatura-preco {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .5rem;
    color: var(--giz-apagado);
}

.assinatura-valor {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--giz);
}

.assinatura-data {
    margin-top: 1.25rem !important;
    font-size: 1.15rem;
    font-weight: 500;
}

.assinatura-data mark { font-weight: 700; font-variant-numeric: tabular-nums; }

.assinatura-troca {
    margin-top: .9rem !important;
    padding-left: .75rem;
    border-left: 2px solid var(--giz-amarelo);
    color: var(--giz-apagado);
    font-size: .95rem;
}

.assinatura-lousa .btn-giz { margin-top: 1.4rem; }

.assinatura-passo,
.assinatura-bloco { max-width: 46rem; margin-bottom: 2rem; }

.assinatura-passo h2,
.assinatura-bloco h2 { font-size: 1.15rem; margin-bottom: .6rem; }

.assinatura-passo > p { max-width: 40rem; }
.assinatura-passo .btn-lg { margin: .25rem 0 .5rem; }
.assinatura-espera { margin-top: .5rem; }

.assinatura-form { max-width: 32rem; }
.assinatura-form .campo { margin-bottom: 1rem; }

.assinatura-quem {
    margin: 0 0 1.25rem;
    padding: 0 0 .25rem;
    border: 0;
    border-bottom: 1px solid var(--risco);
}

.assinatura-quem legend { float: none; margin-bottom: .2rem; font-weight: 700; font-size: 1.05rem; }

.assinatura-sair { margin-top: 1.5rem; }
.assinatura-sair summary { color: var(--tinta-suave); }

.assinatura-cursos { display: grid; gap: .25rem; margin: 0; padding-left: 1.1rem; }
.assinatura-cursos a { font-weight: 600; overflow-wrap: anywhere; }

.assinatura-cobrancas th[scope="row"] { font-weight: 500; font-variant-numeric: tabular-nums; }
.assinatura-cobranca-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Na T-11, o plano de quem assina leva um fio de lousa à esquerda */
.lista-planos-aluno { max-width: 60rem; }
.lista-planos-aluno .plano-atual { padding-left: .9rem; border-left: 3px solid var(--lousa); }
.lista-planos-aluno .situacao { white-space: nowrap; }

@media (min-width: 768px) {
    .lista-planos-aluno .plano { grid-template-columns: minmax(0, 1fr) 12rem 11rem 12rem; }
}

/* ─── Minhas compras (T-09; ADR-0038) ────────────────────────────── */
/* Uma linha do tempo quieta: o valor em algarismos alinhados, a situação
   numa marca (cheia é paga, tracejada espera, contorno não vai mais ser
   paga) e, na direita, a única coisa a fazer com a linha. */
.compras-lista { max-width: 60rem; }
.compras-lista th[scope="row"] a { font-weight: 600; overflow-wrap: anywhere; }
.compras-tipo { display: block; color: var(--tinta-suave); font-size: .875rem; font-weight: 400; }
.compras-data,
.compras-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.compras-valor { text-align: right; }
.compras-acao { text-align: right; white-space: nowrap; }
.compras-nota { max-width: 46rem; }

.situacao-paga      { background: var(--lousa); color: var(--giz); }
.situacao-esperando { border: 1px dashed var(--tinta); color: var(--tinta); }
.situacao-perdida   { border: 1px solid var(--tinta-suave); color: var(--tinta-suave); }

.compra-resumo { max-width: 46rem; }
.compra-dados {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: .45rem 1.5rem;
    margin: 0 0 1.5rem;
}
.compra-dados dt { color: var(--tinta-suave); font-weight: 500; }
.compra-dados dd { margin: 0; }
.compra-valor {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .compra-dados { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    .compra-dados dd { margin-bottom: .6rem; }
}

/* ─── Vendas e assinaturas (T-32; ADR-0039) ──────────────────────── */
/* O pedaço de lousa do relatório: o período escrito a giz e os números
   dele, o principal com o traço amarelo. Tudo o mais fica no claro. */
.relatorio-filtro .relatorio-filtro-data { flex: 0 1 11rem; min-width: 0; }

.relatorio-lousa {
    max-width: 60rem;
    margin-bottom: 2rem;
    padding: 1.4rem 1.25rem 1.5rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .3rem;
}

@media (min-width: 768px) {
    .relatorio-lousa { padding: 1.75rem 2rem 1.9rem; }
}

.relatorio-periodo {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--giz-apagado);
    overflow-wrap: anywhere;
}

.relatorio-numeros {
    display: grid;
    gap: 1.25rem 2rem;
    margin: 0;
}

@media (min-width: 768px) {
    .relatorio-numeros { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}

.relatorio-numero dt { color: var(--giz-apagado); font-weight: 500; font-size: .95rem; }
.relatorio-numero dd { margin: .15rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }

.relatorio-valor {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    color: var(--giz);
    line-height: 1.2;
}

.relatorio-numero-forte .relatorio-valor {
    font-stretch: 87%;
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
    letter-spacing: -.02em;
}

.relatorio-conta { color: var(--giz-apagado); font-size: .9rem; }

.relatorio-bloco h2 { font-size: 1.15rem; margin-bottom: .6rem; }
.relatorio-tabela th[scope="row"] { overflow-wrap: anywhere; }
.relatorio-email { display: block; color: var(--tinta-suave); font-size: .85rem; font-weight: 400; overflow-wrap: anywhere; }
.relatorio-dia,
.relatorio-dinheiro { font-variant-numeric: tabular-nums; white-space: nowrap; }
.relatorio-dinheiro { text-align: right; }

/* ─── Relatório de progresso (T-33; ADR-0044) ────────────────────── */
/* Um bloco por curso: a média na barra de giz do aluno e as contas numa
   linha; embaixo, na lousa, as aulas em que quem parou ficou, contadas em
   risquinhos de giz de cinco em cinco, com o número escrito ao lado. */
.relatorio-vazio { max-width: 40rem; color: var(--tinta-suave); }

.relatorio-curso {
    padding: 1.25rem 1.25rem 1.5rem;
    background: var(--folha);
    border: 1px solid var(--risco);
    border-radius: .3rem;
}

@media (min-width: 768px) {
    .relatorio-curso { padding: 1.5rem 1.75rem 1.75rem; }
}

.relatorio-curso-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    margin-bottom: 1rem;
}

.relatorio-curso-cabeca h2 { margin: 0; font-size: 1.35rem; }

.relatorio-etiqueta {
    padding: .05rem .5rem;
    border: 1px solid var(--tinta-suave);
    border-radius: .2rem;
    color: var(--tinta-suave);
    font-size: .8rem;
}

.relatorio-curso-aulas { flex-basis: 100%; margin: 0; color: var(--tinta-suave); font-size: .95rem; }

.relatorio-nota { margin: 0; color: var(--tinta-suave); }

.relatorio-media { max-width: 30rem; margin-bottom: .75rem; }
.relatorio-media p { margin: .4rem 0 0; }
.relatorio-media strong {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.relatorio-contas {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.relatorio-contas strong { font-weight: 700; font-variant-numeric: tabular-nums; }

.travas {
    padding: 1.25rem 1.25rem 1rem;
    background: var(--lousa);
    color: var(--giz);
    border-radius: .3rem;
}

.travas h3 { margin: 0 0 .35rem; font-size: 1.1rem; color: var(--giz); }
.travas-regra { max-width: 44rem; margin: 0 0 1rem; color: var(--giz-apagado); font-size: .9rem; }
.travas-vazio,
.travas-resto { margin: .75rem 0 0; color: var(--giz-apagado); }

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

.trava {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem 1rem;
    align-items: center;
    padding: .75rem 0;
    border-top: 1px solid rgba(201, 210, 204, .2);
}

.trava:first-child { border-top: 0; padding-top: 0; }
.trava-aula { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.trava-modulo { display: block; color: var(--giz-apagado); font-size: .875rem; font-weight: 400; }
.trava-quantos { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
    .trava { grid-template-columns: minmax(0, 1fr) 9rem 5.5rem; }
    .trava-aula { grid-column: auto; }
}

/* Os risquinhos: cada traço tem .14rem, a cada .42rem; o de cinco ganha a
   diagonal amarela, que fecha o grupo como no quadro */
.riscos { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; min-height: 1.4rem; }

.risco {
    position: relative;
    height: 1.25rem;
    background: repeating-linear-gradient(90deg, var(--giz) 0 .14rem, transparent .14rem .42rem);
    opacity: .92;
}

.risco-1 { width: .14rem; }
.risco-2 { width: .56rem; }
.risco-3 { width: .98rem; }
.risco-4,
.risco-5 { width: 1.4rem; }

.risco-5::after {
    content: '';
    position: absolute;
    left: -.3rem;
    right: -.3rem;
    top: calc(50% - .07rem);
    height: .16rem;
    border-radius: .08rem;
    background: var(--giz-amarelo);
    transform: rotate(-28deg);
}

.riscos-mais { color: var(--giz-apagado); font-size: .8rem; }

/* ─── Movimento ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}