/*
 * Etapa 3 do layout do Figma (`docs/cruds/css-figma.md`): o que nem o Bootstrap
 * nem o tema dão — a foto do evento ao fundo, o vidro do painel de login, o
 * brilho e a marca d'água, o número em gradiente e a migalha invertida.
 *
 * Carregado DEPOIS de `layout.css`. O que tem variável no tema vem por
 * `var(--bs-…)`; o que é só do desenho e não tem variável (a foto a 4%, o vidro
 * a 50%, o brilho) está escrito aqui, uma vez, com o valor lido do Figma.
 */

/* A foto do evento atrás de tudo, a 4% e só em luminância, como a página do
   Figma. Só no escuro: sobre a página clara vira sujeira. */
.backdrop-photo {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
[data-bs-theme="dark"] .backdrop-photo {
    display: block;
    background: url(/img/fundo-evento.jpg) center bottom / cover no-repeat;
    opacity: .04;
    mix-blend-mode: luminosity;
}

/* No login a foto é outra e aparece a 20% nos dois temas (o quadro claro a
   tem igual), apagando para a cor da página no terço de baixo — é o que deixa
   o rodapé do formulário legível. Duas classes para vencer a regra do escuro. */
.backdrop-photo.backdrop-photo-login {
    display: block;
    background-image: linear-gradient(to bottom, transparent 60%, var(--bs-body-bg)), url(/img/fundo-login.jpg);
    background-size: cover, cover;
    background-position: center, center bottom;
    background-repeat: no-repeat;
    opacity: .2;
    mix-blend-mode: normal;
}

/* No celular em pé a foto (de paisagem) estica pela altura e a borda do palco
   cai a 83% da tela, numa emenda reta. Apagar mais cedo a esconde. No claro o
   quadro de 390 não tem a foto: a página inteira leva o gradiente da marca, e
   quem decide os dois é o tema (`--ctc-foto-login-celular`, `--ctc-fundo-marca-celular`). */
@media (max-width: 991.98px) {
    .backdrop-photo.backdrop-photo-login {
        display: var(--ctc-foto-login-celular);
        background-image: linear-gradient(to bottom, transparent 25%, var(--bs-body-bg) 70%), url(/img/fundo-login.jpg);
    }
    .glass { background-image: var(--ctc-fundo-marca-celular); }
}

/* Celular baixo (iPhone SE, 360x640): menos folga em volta do formulário, para
   o rodapé caber sem rolar onde der. `.glass` só existe no login. */
@media (max-width: 991.98px) and (max-height: 700px) {
    .glass {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .glass .d-lg-none.mb-4 {
        margin-bottom: 1rem !important;
    }
}

/* O brilho dourado do canto do login (#AA7E55 a 30% no centro, zero na borda)
   e a marca d'água do símbolo, que passa por baixo do vidro do formulário — nos
   dois temas, que o desenho os tem nos dois. A marca d'água é um SVG por tema
   (`--ctc-marca-dagua`): o mesmo traço, com o gradiente de cada paleta a 5%.
   As medidas são as do quadro de 1440; no celular, as do quadro de 390. */
.glow,
.watermark {
    position: fixed;
    z-index: 0;
    pointer-events: none;
}
/* A marca d'água só no computador: no celular, atrás do formulário, a barra e
   a haste do símbolo liam como emenda do layout (relato de 2026-10-05). */
.watermark { display: none; }
@media (min-width: 992px) {
    .watermark { display: block; }
}
.glow {
    width: 460px;
    height: 460px;
    left: -130px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(170, 126, 85, .3), rgba(170, 126, 85, 0) 100%);
}
.watermark {
    width: 558px;
    height: 558px;
    left: -84px;
    top: 484px;
    background: var(--ctc-marca-dagua) center / contain no-repeat;
}
/* O painel da marca, à esquerda do login: no claro leva o gradiente do desenho
   (do dourado quase branco à cor da página); no escuro é o fundo do corpo. O
   brilho e a marca d'água ficam SOBRE ele (z-index 0) e SOB o formulário, que
   sobe a 1: é a ordem do desenho, e é o vidro desfocando os dois. */
.brand-panel { background-image: var(--ctc-fundo-marca); }
.glass { position: relative; z-index: 1; }
@media (min-width: 992px) {
    .glow {
        width: 822px;
        height: 822px;
        left: -326px;
        top: 420px;
    }
    .watermark {
        width: 726px;
        height: 726px;
        left: 39%;
        top: 50%;
        transform: translateY(-50%);
    }

    /* O painel do formulário é vidro: desfocado sobre a foto e a marca d'água,
       branco no claro e meio transparente no escuro (`--ctc-vidro`, do tema).
       Só faz sentido em tela grande, onde há o que desfocar ao lado. */
    .glass {
        background: var(--ctc-vidro);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-left: 1px solid var(--bs-border-color);
    }
}

/* A pílula apagada dos pilares, no login: dourado a 7% com a borda do tema. */
.pill-soft {
    background: rgba(var(--bs-primary-rgb), .07);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

/* Número em gradiente dourado: os três do topo do Início, o percentual da
   jornada, o saldo de mentorias. O gradiente é o do tema: cada paleta tem o
   seu, lido do próprio quadro. */
.text-gradient {
    background-image: var(--ctc-gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Migalhas como no desenho: as anteriores apagadas, a atual em dourado — o
   inverso da convenção, por isso é regra própria e não o `.breadcrumb`. */
.crumbs a { color: var(--bs-secondary-color); }
.crumbs a:hover { color: var(--bs-link-hover-color); }
.crumbs > span:not(:last-child) { color: var(--bs-tertiary-color); }
.crumbs > :last-child { color: var(--bs-link-color); font-weight: 600; }

/* O texto do termo vem do editor com os títulos dele: dentro da caixa de leitura
   eles ficam no tamanho de um título de seção, não no de página. */
[data-termo-texto] :is(h1, h2, h3, h4) { font-size: 1em; font-weight: 600; margin: 1em 0 .5em; }

/* Texto em até N linhas, com reticências — título de aula na lista, descrição
   de cartão. Cortar em uma linha deixava o nome da aula ilegível no celular. */
.linhas-2, .linhas-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.linhas-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.linhas-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* A miniatura das listas de aula (professor): menor no celular, onde
   os 6rem tomavam metade da linha. */
.miniatura-lista { width: 4.5rem; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 576px) { .miniatura-lista { width: 6rem; } }

/* O campo de busca das listas (Formação, Cursos livres, Materiais): largura
   mínima só onde cabe; no celular ele ocupa a linha. */
.busca-campo { flex: 1 1 auto; }
@media (min-width: 576px) { .busca-campo { flex: 0 0 auto; min-width: 18rem; } }

/* Tamanho e data do material, separados por ponto quando há os dois. */
.item-detalhes [data-item-detalhe]:not(:empty) + [data-item-quando]:not(:empty)::before { content: " · "; }

/* O sino no celular: dentro da navbar o Bootstrap não usa o Popper, e o menu,
   preso à direita do botão, saía pela borda esquerda. Aqui ele se prende à
   barra inteira, a 0,75rem da borda. */
@media (max-width: 991.98px) {
    #aluno-barra .dropdown-sino { position: static; }
    #aluno-barra .dropdown-sino .dropdown-menu { right: .75rem; max-width: calc(100vw - 1.5rem); }
}

/* Alvo de toque de ~40px sem mudar o desenho: o padding cresce e a margem
   negativa devolve o espaço, então o texto fica onde estava (revisão do
   celular de 2026-10-01: curtir tinha 18x30, migalha 15px de altura). */
.link-toque { padding: 0; }
@media (max-width: 991.98px) {
    .link-toque, .crumbs a { display: inline-block; padding: .6rem .4rem; margin: -.6rem -.4rem; }
}

/* A aula no celular: título menor e em até 3 linhas, migalha numa linha só —
   um título longo empurrava o vídeo para a metade da tela. */
@media (max-width: 575.98px) {
    .titulo-da-aula { font-size: 1.25rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
    .crumbs-uma-linha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Celular deitado: a barra de cima fica fina e não acompanha a rolagem — as
   duas barras fixas comiam 40% dos 390px de altura. `!important` porque o
   `py-3` e o `sticky-top` da barra são utilitários, que também são.
   `relative` e não `static`: o menu do sino se prende à barra (acima), e
   sem ancestral posicionado ele abria abaixo da janela. */
@media (max-width: 991.98px) and (max-height: 500px) {
    #aluno-barra { position: relative !important; padding-top: .25rem !important; padding-bottom: .25rem !important; }
    #marca-logo { height: 32px; }
}

/* O select dos recortes no celular, ao lado (ou embaixo) da busca. */
.filtro-select { flex: 1 1 10rem; }

/* Os cartões no celular (decisão 318): deitados, capa 16:9 à esquerda e o
   texto ao lado — em pé, cabia pouco mais de um módulo por tela. A capa fica
   em 16:9 porque as artes trazem texto: quadrada, cortava "MÓDULO 1". A
   descrição e o botão saem (o cartão inteiro é o toque); o aviso do bloqueado
   fica, pequeno. `!important` contra os utilitários do molde (`px-3 pt-3`, a
   largura de 16rem do carrossel). */
@media (max-width: 767.98px) {
    .cartao-curso { flex-direction: row; align-items: center; }
    .cartao-curso > :first-child { flex: 0 0 8.5rem; padding: .75rem 0 .75rem .75rem !important; }
    .cartao-curso > :first-child .ratio { border-radius: .5rem; }
    .cartao-curso .card-body { padding: .75rem; min-width: 0; }
    .cartao-curso h3 { font-size: 1rem !important; margin-bottom: .35rem !important; }
    .cartao-curso [data-curso-selo] { font-size: .7rem; }
    .cartao-curso [data-curso-meta] { font-size: .75rem !important; }
    .cartao-curso [data-curso-descricao] { display: none; }
    .cartao-curso [data-curso-acao]:not(.disabled) { display: none !important; }
    /* O aviso do bloqueado vira uma linha com cadeado, não um botão apagado:
       no cartão deitado, a caixa do botão parecia quebrada. */
    .cartao-curso [data-curso-acao].disabled {
        display: inline-flex !important; align-items: center; gap: .35rem; width: auto !important;
        margin-top: .25rem !important; padding: 0; border: 0; background: none;
        font-size: .8125rem; font-weight: 400; text-align: left; color: var(--bs-secondary-color); opacity: 1;
    }
    .cartao-curso [data-curso-acao].disabled::before { font-family: bootstrap-icons; content: "\f47b"; }

    .cartao-capa { flex-direction: row; align-items: center; width: min(20rem, 85vw) !important; }
    .cartao-capa > [data-cartao-capa], .cartao-capa > [data-cartao-sem-capa] { flex: 0 0 7.5rem; width: 7.5rem; margin: .75rem 0 .75rem .75rem; border-radius: .5rem; }
    .cartao-capa > .card-body { min-width: 0; padding: .75rem !important; }
}

/* A linha de ações da aula: a barra do assistido tem 14rem na tela larga e a
   linha inteira no celular; os três botões andam juntos, e no celular o
   concluir ocupa o que sobra (com reticências, se for preciso). */
.aula-assistido { width: 14rem; }
@media (max-width: 575.98px) {
    .aula-assistido { width: 100%; }
    .aula-acoes { width: 100%; }
    .aula-acoes [data-aula-concluir] { flex: 1 1 auto; }
}

/* Os três números do Início no celular: três colunas iguais na largura toda.
   Soltos numa linha que quebra, o terceiro caía sozinho embaixo. Da `md` para
   cima, o `d-md-flex` do molde os põe lado a lado, à direita da saudação. */
@media (max-width: 767.98px) {
    .numeros-inicio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .numeros-inicio .card-body { padding-left: .5rem !important; padding-right: .5rem !important; }
}

/* A linha das aulas ao vivo: capa, texto e ações numa grade. Da `md` para
   cima, as ações à direita; no celular, embaixo do texto, na coluna dele. */
.linha-ao-vivo { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: .875rem; row-gap: .5rem; align-items: start; }
.linha-ao-vivo-acoes { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.linha-ao-vivo-acoes:not(:has(> :not([hidden]))) { display: none; }
@media (min-width: 768px) {
    .linha-ao-vivo { grid-template-columns: 6rem minmax(0, 1fr) auto; align-items: center; }
    .linha-ao-vivo-acoes { grid-column: 3; }
}

/* As ações da mentoria: duas colunas iguais na largura toda; um botão
   sozinho fica com a metade dele, sem esticar. Sem nenhum, a linha some. */
.mentoria-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mentoria-acoes .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mentoria-acoes:not(:has(> :not([hidden]))) { display: none; }
/* Na tela larga, os botões no tamanho natural, à direita da linha, no meio
   da altura dela. `!important` contra o `mt-3` do molde. */
@media (min-width: 768px) {
    [data-mentoria] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; }
    [data-mentoria] > [data-mentoria-prazo] { grid-column: 1 / -1; }
    .mentoria-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 0 !important; }
}

/* Abas que dividem a linha no celular, em vez de quebrar: com quatro, a
   última caía sozinha embaixo ("Segurança", no perfil). De 360 pontos para
   cima as quatro cabem inteiras; abaixo disso continuam quebrando, para
   nenhuma sumir da tela (revisão de 2026-10-01). No computador, como as outras. */
@media (min-width: 360px) and (max-width: 575.98px) {
    .abas-encaixadas {
        flex-wrap: nowrap;
        gap: 0 !important;
    }
    .abas-encaixadas .nav-item {
        flex: 1 1 auto;
    }
    .abas-encaixadas .nav-link {
        padding-inline: .375rem !important;
        font-size: .8125rem;
        text-align: center;
        white-space: nowrap;
    }
}

/* O símbolo do curso da formação no lugar da capa (Figma, "Formação v2", 56px; maior a pedido, 96px),
   centrado, com o respiro do desenho acima. */
.cartao-simbolo { display: flex; align-items: center; justify-content: center; padding: .875rem 0 .25rem; }
.cartao-simbolo img { width: 6rem; height: 6rem; object-fit: contain; }
/* Na grade da Formação, a faixa do ícone tem altura própria, como no desenho
   (30px acima do ícone de 56px e o respiro até o texto): sem ela, o ícone
   ficava espremido contra o selo. */
@media (min-width: 768px) {
    .cartao-curso .cartao-simbolo { min-height: 9.5rem; padding: 1rem 0 .75rem; }
}