/**
 * ============================================================================
 * JATAÍ FRAMEWORK - COMPONENTE 1 (USUÁRIOS)
 * File: componente1-usuarios.css
 * Version: 1.17.0
 * Atualizado em: 23/09/2026 - (1.14.0) "Sou Gestora" pede token do comercial; chave nova de permissão "Gerar convites (tokens) de aluna" (desligada por padrão); teacher particular (sem gestora) tem todas as permissões. (1.13.0) guias de estudo sem estouro no mobile (grid + mandamentos); página "bem-vinda" leva direto ao onboarding
 * ============================================================================
 * Primeiro CSS próprio do C1 — até aqui ele era só PHP (avatar, permissões).
 * Nasce auto-contido, sem depender de nenhum outro componente. !important
 * espalhado de propósito, mesmo motivo documentado nos outros componentes:
 * o Elementor injeta estilo global em <button>/<a>/<img> com prioridade
 * alta, então força-se tudo aqui pra nada herdar do tema por baixo.
 * ============================================================================
 */

/*
=================================================
GRID DE RECURSOS ([jatai_grid_recursos])
3 colunas no desktop, 2 no tablet/mobile — cards
brancos arredondados, imagem centralizada, rótulo
na cor de destaque do sistema (mesma dos subtítulos
de aula). Card sem link (recurso ainda não
configurado) fica visualmente "apagado", pra ficar
claro que falta preencher.
=================================================
*/

.jatai-grid-recursos {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Guias de estudo — 4 lado a lado; quebra pra 2x2 se não couber
(mesmo breakpoint usado pro grid de recursos original). */
.jatai-grid-recursos--estudo {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 700px) {
    .jatai-grid-recursos--estudo {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.jatai-card-recurso-wrap {
    position: relative !important;
}

.jatai-card-recurso {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 14px !important;
    padding: 22px 14px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: box-shadow .15s ease, border-color .15s ease !important;
}

a.jatai-card-recurso:hover,
button.jatai-card-recurso:hover {
    border-color: #D6DCE5 !important;
    box-shadow: 0 4px 14px rgba(31, 35, 40, 0.08) !important;
}

.jatai-card-recurso--vazio {
    opacity: .5 !important;
    cursor: default !important;
}

.jatai-card-recurso__imagem {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 42px !important;
}

.jatai-card-recurso__imagem img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Elli tem versão clara e escura — a claro fica visível por padrão,
a escuro escondida, e invertem no tema escuro. Mesmo princípio já
usado pro logo do header (troca de imagem via CSS, já que não dá
pra mudar o src de uma <img> só com CSS). */
.jatai-card-recurso__imagem img.jatai-card-recurso__imagem--escuro {
    display: none !important;
}

html[data-jatai-tema="escuro"] body .jatai-card-recurso__imagem img.jatai-card-recurso__imagem--claro {
    display: none !important;
}

html[data-jatai-tema="escuro"] body .jatai-card-recurso__imagem img.jatai-card-recurso__imagem--escuro {
    display: block !important;
}

.jatai-card-recurso__label {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #A85A3D !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* No escuro, o terracota (calibrado pro card branco) fica escuro/
opaco demais contra o fundo já escuro do card — quase ilegível.
Branco puro, como pedido. */
html[data-jatai-tema="escuro"] body .jatai-card-recurso__label {
    color: #F2F2F2 !important;
}

/* Lápis de editar — só aparece pra quem pode gerenciar aquele recurso
   (gestora/admin sempre; teacher só nas alunas dela; nunca a própria
   aluna). Canto superior direito do card, discreto até o hover. */
.jatai-card-recurso__editar {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    color: #8A92A1 !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 6px rgba(31, 35, 40, .08) !important;
    transition: background .12s ease, color .12s ease !important;
    z-index: 2 !important;
}

.jatai-card-recurso__editar:hover {
    background: #F0F3F8 !important;
    color: #353B46 !important;
}

/*
=================================================
SHEET DE EDITAR RECURSO — um campo só (a URL),
modal centralizado, mesma linguagem visual dos
sheets do resto do sistema (cartão branco
arredondado + fundo escurecido).
=================================================
*/

.jatai-c1-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.jatai-c1-sheet__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, .45) !important;
}

.jatai-c1-sheet__content {
    position: relative !important;
    width: 100% !important;
    max-width: 380px !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 22px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25) !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

.jatai-c1-sheet__titulo-linha {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

.jatai-c1-sheet__titulo {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
}

.jatai-c1-sheet__fechar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F0F3F8 !important;
    border: none !important;
    color: #5B6372 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
}

.jatai-c1-sheet__input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 13px !important;
    border-radius: 10px !important;
    border: 1px solid #D6DCE5 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    color: #2A2F38 !important;
    outline: none !important;
    margin-bottom: 14px !important;
}

.jatai-c1-sheet__salvar {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    background: #A85A3D !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    appearance: none !important;
    box-sizing: border-box !important;
}

.jatai-c1-sheet__salvar:hover {
    background: #8A4A31 !important;
}
/*
=================================================
MEU PERFIL ([jatai_perfil_completo])
Inspirado no padrão Apple/Google de tela de conta:
avatar grande com badge de câmera, nome em destaque,
linhas agrupadas (estilo iOS Settings), "Sair" discreto
no final. Reaproveita .jatai-c1-sheet* já existente pros
sheets (nada duplicado ali).
=================================================
*/

.jatai-perfil {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    gap: 20px !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

.jatai-perfil-cabecalho {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 24px 0 0 !important;
}

html body button.jatai-perfil-avatar-wrap {
    position: relative !important;
    display: flex !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    cursor: pointer !important;
    appearance: none !important;
    overflow: visible !important;
}

.jatai-perfil-avatar-wrap img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

.jatai-perfil-avatar-badge {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #A85A3D !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

.jatai-perfil-nome {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
}

.jatai-perfil-tipo {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #A3AAB7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.jatai-perfil-tipo-linha {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/*
Pílula de tipo de pacote — mesma classe/visual do card de aluna
(componente3-aulas.css), duplicada aqui em versão mínima porque o C3
não carrega os próprios arquivos pra aluna na página "Meu Perfil" (só
em páginas específicas de aula/homework/dashboard). Sem essa cópia, a
pílula apareceria sem estilo nenhum aqui — mesmo motivo já resolvido
antes pro sino de notificações. Só a "moldura" (tamanho, formato,
texto branco); a cor de cada pacote continua vindo inline do PHP.
*/
html body span.jatai-pacote-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 20px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Pílula de nível (nivelamento) — mesmo padrão visual da de pacote,
mas com gradiente terracota→dourado próprio (não depende de uma cor
vinda de PHP, já que o nível não tem "cor customizável" como pacote). */
html body span.jatai-nivel-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 20px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #A85A3D, #D9A441) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/*
=================================================
ESTATÍSTICAS — reaproveita a linguagem visual dos
mini-contadores do dashboard, só que centralizado aqui.
=================================================
*/

.jatai-perfil-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 16px !important;
    background: #F0F3F8 !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
}

.jatai-perfil-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}

.jatai-perfil-stat__numero {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
}

.jatai-perfil-stat__label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #8A92A1 !important;
}

/*
=================================================
GRUPO DE LINHAS (estilo iOS Settings) — fundo branco,
cada linha com um divisor fino, só a última sem borda.
=================================================
*/

.jatai-perfil-grupo {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.jatai-perfil-grupo__titulo {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #A3AAB7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 0 4px 8px !important;
}

/*
=================================================
CARD "ONBOARDING E NIVELAMENTO" (Meu Perfil, aluna)
=================================================
*/

html body a.jatai-perfil-card-onboarding {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 16px 16px !important;
    background: linear-gradient(135deg, rgba(217, 164, 65, .22), rgba(168, 90, 61, .14)) !important;
    backdrop-filter: blur(18px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
    border: 0.5px solid rgba(217, 164, 65, .35) !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .03) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

html body a.jatai-perfil-card-onboarding:hover {
    transform: translateY(-1px) !important;
    border-color: #A85A3D !important;
    box-shadow: 0 8px 20px rgba(168, 90, 61, .12) !important;
}

.jatai-perfil-card-onboarding__icone {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #A85A3D !important;
}

.jatai-perfil-card-onboarding__texto {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.jatai-perfil-card-onboarding__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #353B46 !important;
}

.jatai-perfil-card-onboarding__sub {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #6F7787 !important;
}

.jatai-perfil-card-onboarding__status {
    flex-shrink: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

.jatai-perfil-card-onboarding__status--ok {
    background: #E4EFDD !important;
    color: #4C7A32 !important;
}

.jatai-perfil-card-onboarding__status--pendente {
    background: #F6EEDD !important;
    color: #D9A441 !important;
}

html body button.jatai-perfil-linha,
.jatai-perfil-linha {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #E6EBF2 !important;
    border-radius: 0 !important;
    text-align: left !important;
    cursor: pointer !important;
    appearance: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* :first-child não funcionava aqui — o título do grupo
(.jatai-perfil-grupo__titulo) é sempre o PRIMEIRO filho de verdade no
HTML, então a linha "Nome" nunca batia com :first-child (ela é o
segundo filho). Por isso o topo do card sempre saía com canto reto,
em vez de arredondado como o resto do sistema. O seletor certo é "a
linha que vem logo depois do título", não importa se é <button> ou
<div>. */
.jatai-perfil-grupo__titulo + .jatai-perfil-linha {
    border-radius: 14px 14px 0 0 !important;
}

html body button.jatai-perfil-linha--ultima,
.jatai-perfil-linha--ultima {
    border-bottom: none !important;
    border-radius: 0 0 14px 14px !important;
}

/* Quando um grupo só tem UMA linha (ex: "Aparência", com só "Modo
escuro" dentro), ela é ao mesmo tempo a primeira (depois do título) E
a última — as duas regras acima competem, e como a de cima tem mais
classes no seletor (logo, mais específica), ela sempre vencia,
deixando a base sem arredondar (o "cortado embaixo" reportado). Essa
regra, combinando as duas classes junto, é mais específica que as
outras duas, e garante os 4 cantos juntos nesse caso. */
.jatai-perfil-grupo__titulo + .jatai-perfil-linha.jatai-perfil-linha--ultima {
    border-radius: 14px !important;
}

.jatai-perfil-linha--estatico {
    cursor: default !important;
}

.jatai-perfil-linha__label {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #1F2328 !important;
    flex-shrink: 0 !important;
}

.jatai-perfil-linha__valor {
    flex: 1 1 auto !important;
    text-align: right !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #8A92A1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-perfil-linha svg {
    flex-shrink: 0 !important;
    color: #C9BDAE !important;
}

.jatai-perfil-linha__icone-google {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/*
=================================================
SAIR — discreto, sem chrome de botão, tom de alerta
sutil (mesma família do vermelho já usado no sistema),
igual o padrão "Sign Out" do iOS.
=================================================
*/

a.jatai-perfil-sair {
    display: block !important;
    padding: 14px !important;
    margin-bottom: 24px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #d55d60 !important;
    text-decoration: none !important;
    text-align: center !important;
}

a.jatai-perfil-sair:hover {
    opacity: 0.75 !important;
}

/*
=================================================
SHEET DE TROCAR FOTO — preview + botões (reaproveita
.jatai-c1-sheet__salvar pro botão principal, e cria uma
variante mais neutra pro secundário).
=================================================
*/

.jatai-perfil-foto-preview {
    width: 140px !important;
    height: 140px !important;
    margin: 4px auto 16px !important;
    border-radius: 50% !important;
    background: #E6EBF2 center center no-repeat !important;
    background-size: cover !important;
    border: 2px dashed #D6DCE5 !important;
    box-sizing: border-box !important;
}

.jatai-perfil-foto-preview--tem-imagem {
    border: none !important;
}

html body button.jatai-perfil-botao-secundario {
    background: #F0F3F8 !important;
    color: #5B6372 !important;
    margin-bottom: 10px !important;
}

html body button.jatai-perfil-botao-secundario:hover {
    background: #E6EBF2 !important;
}

.jatai-perfil-sheet-texto {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #353B46 !important;
    margin: 0 !important;
}

/*
=================================================
SELECIONE SEU PERFIL ([jatai_selecione_seu_perfil])
Página de boas-vindas — ainda não existe "papel" nem
cor de role pra usar (é literalmente antes disso
existir), então a paleta é neutra/quente, a mesma
usada como acento geral da marca no resto do sistema.
Página inteira: shortcode assume os 100% de largura/
100vh que você já configurou no container do Elementor,
só cuida de centralizar o conteúdo por dentro.
=================================================
*/

.jatai-selecionar-perfil {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    padding: 48px 20px !important;
    text-align: center !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    overflow: hidden !important;
    /* Cinza claro liso (neutro HIVE) — os cards brancos saltam por cima. */
    background: #F0F3F8 !important;
}

.jatai-selecionar-perfil__topo {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 520px !important;
    animation: jataiSelecionarPerfilEntrada .6s cubic-bezier(.22,1,.36,1) both !important;
}

.jatai-selecionar-perfil__titulo {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1F2328 !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
}

.jatai-selecionar-perfil__subtitulo {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #6F7787 !important;
}

/* 3 opções (gestora entrou na 1.3.0): 3 colunas no desktop, 1 coluna
a partir do tablet — 3 cartões lado a lado abaixo de ~900px ficariam
estreitos demais pra ilustração + texto. */
.jatai-selecionar-perfil__opcoes {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 960px !important;
}

@media (max-width: 900px) {
    .jatai-selecionar-perfil__opcoes {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 360px !important;
    }
}

html body button.jatai-perfil-opcao {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #E4E8EF !important;
    border-radius: 24px !important;
    padding: 28px 24px 28px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(31, 35, 40, .05) !important;
    text-decoration: none !important;
    color: inherit !important;
    font-family: inherit !important;
    overflow: hidden !important;
    white-space: normal !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.22,1,.36,1) !important;
    animation: jataiSelecionarPerfilEntrada .6s cubic-bezier(.22,1,.36,1) .1s both !important;
}

html body button.jatai-perfil-opcao:nth-child(2) {
    animation-delay: .2s !important;
}

html body button.jatai-perfil-opcao:nth-child(3) {
    animation-delay: .3s !important;
}

html body button.jatai-perfil-opcao:hover {
    border-color: #D6DCE5 !important;
    box-shadow: 0 16px 36px rgba(31, 35, 40, .14) !important;
    transform: translateY(-5px) !important;
}

html body button.jatai-perfil-opcao:active {
    transform: translateY(-2px) scale(.99) !important;
}

html body button.jatai-perfil-opcao:disabled {
    opacity: .6 !important;
    cursor: default !important;
    transform: none !important;
}

.jatai-perfil-opcao--carregando {
    opacity: .75 !important;
}

/* As duas ilustrações vêm com fundo branco de propósito (não são
transparentes) — em vez de tentar mesclar uma auréola atrás (que
ficava invisível, escondida pelo próprio fundo branco da imagem), a
cor agora é uma moldura de verdade: um quadrado arredondado colorido,
maior que a imagem, com a imagem sentada por cima — a cor aparece na
margem visível ao redor, de propósito, não escondida. */
.jatai-perfil-opcao__imagem {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 156px !important;
    height: 156px !important;
    margin-bottom: 18px !important;
    border-radius: 26px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}

.jatai-perfil-opcao--teacher .jatai-perfil-opcao__imagem {
    background: #FD9C18 !important;
}

.jatai-perfil-opcao--aluna .jatai-perfil-opcao__imagem {
    background: #FBC83C !important;
}

.jatai-perfil-opcao--gestora .jatai-perfil-opcao__imagem {
    background: #E87514 !important;
    color: #FFFFFF !important;
}

/* Hover: a borda do card acende na cor da role (a mesma da moldura). */
html body button.jatai-perfil-opcao--aluna:hover {
    border-color: #FBC83C !important;
}

html body button.jatai-perfil-opcao--teacher:hover {
    border-color: #FD9C18 !important;
}

html body button.jatai-perfil-opcao--gestora:hover {
    border-color: #E87514 !important;
}

/* Ícone provisório da gestora (até a ilustração própria ficar pronta),
também usado no banner da coluna de Aprovações. */
.jatai-perfil-opcao__icone-svg {
    width: 56% !important;
    height: 56% !important;
    display: block !important;
}

.jatai-perfil-opcao__imagem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 16px rgba(31, 35, 40, .10) !important;
}

.jatai-perfil-opcao__label {
    width: 100% !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1F2328 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
}

.jatai-perfil-opcao__desc {
    width: 100% !important;
    margin-top: 6px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #8A92A1 !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* margin-top:auto empurra o "Escolher" pro rodapé de CADA card,
sempre na mesma altura nos dois — mesmo que a descrição de um seja
uma linha mais curta ou mais longa que a do outro (a altura dos dois
cards já fica igual por causa do align-items:stretch no container
pai; o que faltava era isso aqui pra alinhar o conteúdo por dentro). */
.jatai-perfil-opcao__cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: auto !important;
    padding-top: 18px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.jatai-perfil-opcao--teacher .jatai-perfil-opcao__cta {
    color: #985801 !important;
}

.jatai-perfil-opcao--gestora .jatai-perfil-opcao__cta {
    color: #964C0D !important;
}

.jatai-perfil-opcao--aluna .jatai-perfil-opcao__cta {
    color: #8C6703 !important;
}

.jatai-perfil-opcao__seta {
    display: inline-block !important;
    transition: transform .18s cubic-bezier(.22,1,.36,1) !important;
}

html body button.jatai-perfil-opcao:hover .jatai-perfil-opcao__seta {
    transform: translateX(4px) !important;
}

@keyframes jataiSelecionarPerfilEntrada {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jatai-selecionar-perfil__topo,
    html body button.jatai-perfil-opcao {
        animation: none !important;
    }
}

/* Variante simples de link (login / ir pro painel) — mesma família
visual, sem imagem, só texto centralizado numa cápsula. */
a.jatai-perfil-opcao--login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 28px !important;
    background: #A85A3D !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background .15s ease !important;
}

a.jatai-perfil-opcao--login:hover {
    background: #8A4A31 !important;
}

/*
=================================================
BEM-VINDA ([jatai_bem_vinda]) — próxima etapa depois
de escolher o perfil. Mesma família visual da página
anterior (fundo com gradiente suave, entrada com
fade+subida) — aqui é um cartão só, com a imagem da
comunidade em destaque e o aviso de "aguarde a
aprovação".
=================================================
*/

.jatai-bem-vinda__cartao {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 500px !important;
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 28px !important;
    padding: 22px 30px 32px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 18px rgba(31, 35, 40, .05) !important;
    animation: jataiSelecionarPerfilEntrada .6s cubic-bezier(.22,1,.36,1) .1s both !important;
}

.jatai-bem-vinda__imagem-wrap {
    display: block !important;
    width: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.jatai-bem-vinda__imagem {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
}

/*
Parágrafo longo alinhado à esquerda, não centralizado — texto de
título curto fica bem centralizado, mas frase de várias linhas
centralizada cria aquele efeito de "dente de serra" (cada linha com
um tamanho diferente, sem régua nenhuma guiando o olho), o que lê como
amador. Alinhado à esquerda, com um comprimento de linha confortável
(a largura do próprio card já cuida disso), fica muito mais fácil de
ler.
*/
.jatai-bem-vinda__texto {
    display: block !important;
    width: 100% !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #353B46 !important;
    line-height: 1.7 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .jatai-bem-vinda__imagem {
        height: 170px !important;
    }
    .jatai-bem-vinda__cartao {
        padding: 18px 22px 26px !important;
    }
}

/* Mensagem de "conta arquivada" — texto solto, sem card/caixa em
volta (nem foto nenhuma), só a frase mesmo na área principal. */
.jatai-bem-vinda__texto-simples {
    display: block !important;
    max-width: 480px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #353B46 !important;
    line-height: 1.6 !important;
}

[data-jatai-tema="escuro"] .jatai-selecionar-perfil__titulo {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-selecionar-perfil__subtitulo {
    color: #98989D !important;
}

[data-jatai-tema="escuro"] .jatai-bem-vinda__texto-simples {
    color: #F2F2F2 !important;
}

.jatai-selecionar-perfil__aguardando {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 420px !important;
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 20px !important;
    padding: 28px 26px !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 18px rgba(31, 35, 40, .05) !important;
    animation: jataiSelecionarPerfilEntrada .6s cubic-bezier(.22,1,.36,1) .1s both !important;
}

.jatai-selecionar-perfil__aguardando-icone {
    font-size: 30px !important;
    line-height: 1 !important;
}

.jatai-selecionar-perfil__aguardando-texto {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #353B46 !important;
    line-height: 1.5 !important;
}

@media (max-width: 600px) {
    .jatai-selecionar-perfil__titulo {
        font-size: 21px !important;
    }
    .jatai-perfil-opcao__imagem {
        width: 108px !important;
        height: 108px !important;
    }
    html body button.jatai-perfil-opcao {
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}

/*
=================================================
APROVAÇÕES ([jatai_lista_aprovacoes] /
[jatai_pagina_aprovacoes])
2 colunas — alunas à esquerda, teachers à direita.
A ilustração de cada perfil marca a COLUNA inteira (um
banner no topo, separando visualmente os dois tipos de
pedido) — não é o avatar de ninguém. Cada card usa o
avatar de verdade da pessoa (foto do Google, Gravatar
ou iniciais — jatai_c1_renderizar_avatar, o mesmo usado
em todo o resto do sistema). As cores de cada role
(verde pra teacher, salmão pra aluna, já usadas em toda
a navegação) reforçam a divisão no banner e na borda de
cada card.
=================================================
*/

.jatai-aprovacoes {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    width: 100% !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

@media (max-width: 700px) {
    .jatai-aprovacoes {
        grid-template-columns: 1fr !important;
    }
}

/* Gestora comum: só a coluna de alunas (teachers entram por token). */
.jatai-aprovacoes--uma-coluna {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 640px !important;
}

/* Com a coluna de gestoras (só o admin vê): 3 colunas no desktop,
2 no tablet (gestoras desce pra linha de baixo), 1 no celular. */
.jatai-aprovacoes--com-gestoras {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
    .jatai-aprovacoes--com-gestoras {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .jatai-aprovacoes--com-gestoras {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

.jatai-aprovacoes__coluna {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-width: 0 !important;
}

/* Banner da coluna — ilustração + título, num fundo pastel da cor da
role. É aqui que a separação "isso é aluna, isso é teacher" acontece
visualmente, não em cada card individual. Mais alto e mais respirado
que um cabeçalho comum, de propósito — é a abertura da coluna, o
primeiro elemento que o olho encontra. */
.jatai-aprovacoes__banner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 108px !important;
    border-radius: 24px !important;
    padding: 16px 22px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.jatai-aprovacoes__coluna--aluna .jatai-aprovacoes__banner {
    background: linear-gradient(135deg, #FFFBEF 0%, #FEF4D8 100%) !important;
}

.jatai-aprovacoes__coluna--teacher .jatai-aprovacoes__banner {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEBD1 100%) !important;
}

.jatai-aprovacoes__coluna--gestora .jatai-aprovacoes__banner {
    background: linear-gradient(135deg, #FDF4EC 0%, #FAE3D0 100%) !important;
}

.jatai-aprovacoes__coluna--gestora .jatai-aprovacoes__banner-imagem-wrap {
    color: #964C0D !important;
}

/*
Os PNGs novos já vêm coloridos no tema de cada perfil e com fundo
transparente — diferente das ilustrações antigas (fundo sólido), que
precisavam de uma caixa branca por trás pra não ficar estranhas.
Transparente entra direto por cima do gradiente pastel, sem moldura
nenhuma — é o que dá aquele acabamento premium, a ilustração parece
"pintada" ali, não colada em cima de uma caixa.
*/
.jatai-aprovacoes__banner-imagem-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 92px !important;
    height: 92px !important;
    flex-shrink: 0 !important;
}

html body img.jatai-aprovacoes__banner-imagem {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 6px 10px rgba(31, 35, 40, .16)) !important;
}

.jatai-aprovacoes__titulo-coluna {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}

.jatai-aprovacoes__coluna--aluna .jatai-aprovacoes__titulo-coluna {
    color: #8C6703 !important;
}

.jatai-aprovacoes__coluna--teacher .jatai-aprovacoes__titulo-coluna {
    color: #985801 !important;
}

.jatai-aprovacoes__coluna--gestora .jatai-aprovacoes__titulo-coluna {
    color: #964C0D !important;
}

.jatai-aprovacoes__contagem {
    font-weight: 500 !important;
    opacity: .75 !important;
}

.jatai-aprovacoes__lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.jatai-aprovacoes__vazio {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #A3AAB7 !important;
    background: #ffffff !important;
    border: 0.5px dashed #D6DCE5 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

html body button.jatai-aprovacao-card {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-left-width: 3px !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    text-align: left !important;
    box-shadow: none !important;
    font-family: inherit !important;
    color: inherit !important;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

/* Fio de cor na borda esquerda de cada card — o mesmo reforço visual
que o resto do sistema já usa pra deixar a role óbvia à primeira
vista, sem precisar ler nada. */
.jatai-aprovacoes__coluna--aluna button.jatai-aprovacao-card {
    border-left-color: #FDE9B1 !important;
}

.jatai-aprovacoes__coluna--teacher button.jatai-aprovacao-card {
    border-left-color: #FED7A3 !important;
}

.jatai-aprovacoes__coluna--gestora button.jatai-aprovacao-card {
    border-left-color: #F6C8A1 !important;
}

html body button.jatai-aprovacao-card:hover {
    box-shadow: 0 6px 18px rgba(31, 35, 40, .10) !important;
    transform: translateY(-2px) !important;
}

.jatai-aprovacoes__coluna--aluna button.jatai-aprovacao-card:hover {
    border-color: #D6DCE5 !important;
    border-left-color: #FBC83C !important;
}

.jatai-aprovacoes__coluna--teacher button.jatai-aprovacao-card:hover {
    border-color: #D6DCE5 !important;
    border-left-color: #FD9C18 !important;
}

.jatai-aprovacoes__coluna--gestora button.jatai-aprovacao-card:hover {
    border-color: #D6DCE5 !important;
    border-left-color: #E87514 !important;
}

html body button.jatai-aprovacao-card:active {
    transform: translateY(0) scale(.99) !important;
}

/* jatai_c1_renderizar_avatar() já devolve a foto (ou as iniciais)
totalmente estilizada e circular, com tamanho definido no próprio
inline style — este wrapper só cuida do espaço reservado ao redor. */
.jatai-aprovacao-card__imagem {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
}

.jatai-aprovacao-card__info {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
}

.jatai-aprovacao-card__nome {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-aprovacao-card__email {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #8A92A1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Botões Sim/Não dentro do sheet — lado a lado, o "Sim" já usa o
estilo de botão principal (.jatai-c1-sheet__salvar) que já existe. */
.jatai-aprovacao-sheet__opcoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/*
=================================================
PAINEL DE PERMISSÕES DA TEACHER (engrenagem no card
individual / na página "Todas Teachers", em massa)
Toggle estilo iOS — laranja = desligado, verde =
ligado (sem estado neutro/cinza intermediário).
=================================================
*/

.jatai-c1-permissoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.jatai-c1-permissoes__linha {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 13px 2px !important;
}

.jatai-c1-permissoes__linha + .jatai-c1-permissoes__linha {
    border-top: 0.5px solid #E4E8EF !important;
}

.jatai-c1-permissoes__label {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2A2F38 !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.jatai-c1-permissoes__erro {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #d55d60 !important;
    margin: 10px 0 !important;
}

.jatai-c1-permissoes__erro[hidden] {
    display: none !important;
}

/* O toggle em si — trilho + bolinha. aria-checked (não uma classe)
guarda o estado, então o próprio JS de acessibilidade do navegador
já entende o componente como um switch de verdade. */
html body button.jatai-c1-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 30px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: #E0895A !important;
    cursor: pointer !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    transition: background .2s ease !important;
}

html body button.jatai-c1-toggle[aria-checked="true"] {
    background: #528C22 !important;
}

.jatai-c1-toggle__bolinha {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    transition: transform .2s ease !important;
}

html body button.jatai-c1-toggle[aria-checked="true"] .jatai-c1-toggle__bolinha {
    transform: translateX(20px) !important;
}

/*
=================================================
TEMA ESCURO — página de Recursos (cards) e o sheet
de editar recurso (gestora)
=================================================
*/

/* Card de recurso — "button." incluído de propósito: os cards de guia
de estudo são <button> (abrem sheet, não navegam), não <a>/<div> como
os originais, e sem isso ficavam de fora do tema escuro inteiro. */
html[data-jatai-tema="escuro"] body a.jatai-card-recurso,
html[data-jatai-tema="escuro"] body div.jatai-card-recurso,
html[data-jatai-tema="escuro"] body button.jatai-card-recurso {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
    box-shadow: none !important;
}

html[data-jatai-tema="escuro"] body a.jatai-card-recurso:hover,
html[data-jatai-tema="escuro"] body button.jatai-card-recurso:hover {
    border-color: #3A3A3C !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* __label (terracota) já contrasta bem em qualquer fundo — sem
ajuste necessário. */

html[data-jatai-tema="escuro"] body button.jatai-card-recurso__editar {
    background: #2C2C2E !important;
    color: #98989D !important;
    border-color: #3A3A3C !important;
}

html[data-jatai-tema="escuro"] body button.jatai-card-recurso__editar:hover {
    background: #3A3A3C !important;
    color: #F2F2F2 !important;
}

/* Sheet de editar recurso (mesmo sheet genérico de .jatai-c1-sheet,
usado só aqui por enquanto) */
[data-jatai-tema="escuro"] .jatai-c1-sheet__content {
    background: #1C1C1E !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-jatai-tema="escuro"] .jatai-c1-sheet__titulo {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-c1-sheet__fechar {
    background: #2C2C2E !important;
    color: #98989D !important;
}

[data-jatai-tema="escuro"] .jatai-c1-sheet__input {
    background: #2C2C2E !important;
    border-color: #3A3A3C !important;
    color: #F2F2F2 !important;
}

/* __salvar (terracota sólido) já contrasta bem em qualquer fundo —
sem ajuste necessário. */

/*
=================================================
TEMA ESCURO — Meu Perfil (nome, stats, grupos de linha)
=================================================
*/

[data-jatai-tema="escuro"] .jatai-perfil-nome {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-perfil-tipo,
[data-jatai-tema="escuro"] .jatai-perfil-grupo__titulo {
    color: #6E6E73 !important;
}

[data-jatai-tema="escuro"] .jatai-perfil-stats {
    background: #1C1C1E !important;
}

[data-jatai-tema="escuro"] .jatai-perfil-stat__numero {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-perfil-stat__label {
    color: #98989D !important;
}

html[data-jatai-tema="escuro"] body button.jatai-perfil-linha,
html[data-jatai-tema="escuro"] body .jatai-perfil-linha {
    background: #1C1C1E !important;
    border-bottom-color: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-perfil-linha__label {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-perfil-linha__valor {
    color: #98989D !important;
}

[data-jatai-tema="escuro"] .jatai-perfil-linha svg {
    color: #6E6E73 !important;
}

/*
=================================================
TEMA ESCURO — painel de permissões da teacher (título
de cada função dentro do sheet)
=================================================
*/

[data-jatai-tema="escuro"] .jatai-c1-permissoes__linha + .jatai-c1-permissoes__linha {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-jatai-tema="escuro"] .jatai-c1-permissoes__label {
    color: #F2F2F2 !important;
}

/*
=================================================
TEMA ESCURO — página de Aprovações (/acesso/, gestora
libera novas alunas/teachers inscritas)
=================================================
*/

/* __titulo-coluna (terracota/verde sólido) já contrasta bem em
qualquer fundo — sem ajuste necessário. */

/* Banner de cada coluna (Alunas/Teachers) — era um gradiente pastel
bem claro, pensado só pro fundo branco; sobre o fundo escuro (com a
imagem floral por trás) ficava um retângulo claro destoando de tudo.
Aqui, a mesma ideia (degradê sutil na cor da role), só que em tons
escuros. */
[data-jatai-tema="escuro"] .jatai-aprovacoes__coluna--aluna .jatai-aprovacoes__banner {
    background: linear-gradient(135deg, #373122 0%, #292620 100%) !important;
}

[data-jatai-tema="escuro"] .jatai-aprovacoes__coluna--teacher .jatai-aprovacoes__banner {
    background: linear-gradient(135deg, #372B1D 0%, #29241E 100%) !important;
}

[data-jatai-tema="escuro"] .jatai-aprovacoes__coluna--gestora .jatai-aprovacoes__banner {
    background: linear-gradient(135deg, #34271D 0%, #28211D 100%) !important;
}

[data-jatai-tema="escuro"] .jatai-aprovacoes__coluna--gestora .jatai-aprovacoes__titulo-coluna,
[data-jatai-tema="escuro"] .jatai-aprovacoes__coluna--gestora .jatai-aprovacoes__banner-imagem-wrap {
    color: #E87514 !important;
}

/* Card de pessoa pendente de aprovação e o estado "vazio" — mais
escuros que o #1C1C1E padrão do resto do sistema, de propósito: essa
página é toda em cima do fundo floral escuro (.jatai-main-area), e o
cinza #1C1C1E ficava "lavado" contra ele, sem separação de superfície
clara. Um tom mais perto do preto de fundo da página (#0D0906)
resolve, com a borda um pouco mais visível pra ainda marcar o
contorno do card. */
html[data-jatai-tema="escuro"] body .jatai-aprovacoes__vazio {
    background: #121110 !important;
    color: #6E6E73 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-aprovacao-card {
    background: #121110 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-jatai-tema="escuro"] .jatai-aprovacoes__coluna--aluna button.jatai-aprovacao-card:hover,
[data-jatai-tema="escuro"] .jatai-aprovacoes__coluna--teacher button.jatai-aprovacao-card:hover,
[data-jatai-tema="escuro"] .jatai-aprovacoes__coluna--gestora button.jatai-aprovacao-card:hover {
    border-color: #3A3A3C !important;
}

[data-jatai-tema="escuro"] .jatai-aprovacao-card__nome {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-aprovacao-card__email {
    color: #98989D !important;
}
/*
=================================================
GUIAS DE ESTUDO INTERATIVOS ([jatai_grid_recursos_estudo])
4 cards novos na página de Recursos, cada um abrindo
um sheet grande cheio de tela (não é o sheet universal
.jatai-hw-sheet, que é pensado pra conteúdo curto —
esse aqui rola o próprio conteúdo, com um cabeçalho
fixo no topo). Sistema de "blocos" reaproveitado nos
4 guias — só o conteúdo muda, a estrutura visual é a
mesma, com --cor-guia mudando a cor de destaque de
cada um.
=================================================
*/

html body .jatai-estudo-secao-titulo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 28px 0 14px !important;
}

html body .jatai-estudo-secao-titulo__emoji {
    font-size: 16px !important;
    line-height: 1 !important;
}

html body .jatai-estudo-secao-titulo__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-secao-titulo__texto {
    color: #F2F2F2 !important;
}

/* Card do grid — mesmo .jatai-card-recurso de sempre, só que agora
é um <button> (abre sheet, não navega) e o "ícone" por enquanto é um
emoji grande num círculo colorido (--cor-guia) em vez de uma imagem —
troca fácil por PNG depois, só substituir o conteúdo do span. O
RÓTULO, porém, fica na MESMA cor terracota fixa dos outros cards de
recursos (não usa --cor-guia) — de propósito, pra esse grid ter a
mesma identidade visual do resto do sistema; a cor de cada guia só
aparece DENTRO do sheet dele, como um toque de identidade sutil, não
no grid principal. */
html body button.jatai-card-recurso--estudo {
    cursor: pointer !important;
    border: 0.5px solid #E4E8EF !important;
    /* O reset.css do Hello Elementor põe white-space: nowrap em todo
    <button> — sem isso, o rótulo ("Notícias, Artigos e Livros") não
    quebra linha e empurra o card pra fora da tela no mobile. */
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html body button.jatai-card-recurso--estudo .jatai-card-recurso__label {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* ---- O SHEET GRANDE — tela cheia num overlay próprio, separado do
.jatai-hw-sheet universal (aquele é um painel pequeno que sobe de
baixo; esse aqui é a tela inteira, com cabeçalho fixo e o conteúdo
rolando por baixo). */
html body .jatai-estudo-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: none !important;
}

html body .jatai-estudo-sheet--aberto {
    display: block !important;
}

html body .jatai-estudo-sheet__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 20, 30, 0.55) !important;
}

html body .jatai-estudo-sheet__painel {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.25) !important;
    animation: jatai-estudo-subir .28s cubic-bezier(.32, .72, 0, 1) !important;
}

@keyframes jatai-estudo-subir {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

html body .jatai-estudo-sheet__topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    gap: 10px !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-bottom: 0.5px solid #E4E8EF !important;
    box-sizing: border-box !important;
}

html body .jatai-estudo-sheet__topo-titulo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

html body .jatai-estudo-sheet__topo-emoji {
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

html body .jatai-estudo-sheet__topo-emoji--imagem {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
}

html body .jatai-estudo-sheet__topo-emoji--imagem img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

html body .jatai-estudo-sheet__topo-texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
}

html body button.jatai-estudo-sheet__fechar {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: #F0F3F8 !important;
    border: none !important;
    box-shadow: none !important;
    color: #5B6372 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

html body button.jatai-estudo-sheet__fechar:hover {
    background: #E6EBF2 !important;
}

html body .jatai-estudo-sheet__corpo {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 24px 20px 60px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ---- Hero (topo do conteúdo, dentro do corpo que rola) */
html body .jatai-estudo-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding-bottom: 22px !important;
    margin-bottom: 22px !important;
    border-bottom: 0.5px solid #E4E8EF !important;
}

html body .jatai-estudo-hero__emoji {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--cor-guia) 14%, white) !important;
    font-size: 30px !important;
    margin-bottom: 4px !important;
}

html body .jatai-estudo-hero__emoji--imagem img {
    max-width: 60% !important;
    max-height: 60% !important;
    object-fit: contain !important;
    display: block !important;
}

html body .jatai-estudo-hero__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1F2328 !important;
    letter-spacing: -.01em !important;
}

html body .jatai-estudo-hero__subtitulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #5B6372 !important;
    max-width: 440px !important;
}

/* ---- Bloco genérico (título + conteúdo) */
html body .jatai-estudo-bloco {
    margin-bottom: 26px !important;
}

html body .jatai-estudo-bloco__titulo {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--cor-guia) !important;
    margin-bottom: 12px !important;
}

html body .jatai-estudo-bloco__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #353B46 !important;
    margin: 0 0 10px !important;
}

/* Listas embutidas em alguns textos (ex: "preste atenção: ...") — cor
explícita própria, sem depender só de herança (por segurança: <ul>
dentro do texto às vezes acaba fora do escopo visual esperado
dependendo de como o navegador normaliza a estrutura). */
html body .jatai-estudo-bloco__texto ul {
    margin: 6px 0 !important;
    padding-left: 18px !important;
}

html body .jatai-estudo-bloco__texto li {
    color: #353B46 !important;
    margin-bottom: 4px !important;
}

/* ---- Destaque (callout) */
html body .jatai-estudo-destaque {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: color-mix(in srgb, var(--cor-guia) 8%, #F0F3F8) !important;
    border-left: 3px solid var(--cor-guia) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 26px !important;
}

html body .jatai-estudo-destaque__emoji {
    font-size: 18px !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
}

html body .jatai-estudo-destaque__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #353B46 !important;
}

/* ---- Comparativo (2 cartões lado a lado) */
html body .jatai-estudo-comparativo {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

html body .jatai-estudo-comparativo__cartao {
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}

html body .jatai-estudo-comparativo__cartao-titulo {
    display: block !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: var(--cor-guia) !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 0.5px solid #E4E8EF !important;
}

html body .jatai-estudo-comparativo__linha {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    margin-bottom: 8px !important;
}

html body .jatai-estudo-comparativo__linha:last-child {
    margin-bottom: 0 !important;
}

html body .jatai-estudo-comparativo__label {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    color: #8A92A1 !important;
}

html body .jatai-estudo-comparativo__valor {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1F2328 !important;
}

/* ---- Tabela */
html body .jatai-estudo-tabela-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
}

html body .jatai-estudo-tabela {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

html body .jatai-estudo-tabela th {
    text-align: left !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    color: #ffffff !important;
    background: var(--cor-guia) !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
}

html body .jatai-estudo-tabela td {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #353B46 !important;
    padding: 10px 12px !important;
    border-top: 0.5px solid #E4E8EF !important;
    background: #ffffff !important;
}

html body .jatai-estudo-tabela tr:nth-child(even) td {
    background: #F0F3F8 !important;
}

/* ---- Cardápio (lista de itens com emoji) */
html body .jatai-estudo-cardapio {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html body .jatai-estudo-cardapio__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
}

html body .jatai-estudo-cardapio__emoji {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--cor-guia) 14%, white) !important;
    font-size: 15px !important;
}

html body .jatai-estudo-cardapio__corpo {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html body .jatai-estudo-cardapio__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
}

html body .jatai-estudo-cardapio__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #5B6372 !important;
}

/* ---- Checklist interativa (persistida em localStorage, ver JS) */
html body .jatai-estudo-checklist {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

html body button.jatai-estudo-checklist__item {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 12px !important;
    padding: 11px 14px !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .12s ease, border-color .12s ease !important;
    /* Mesmo motivo do card do grid: o reset do Hello Elementor deixa
    todo <button> com white-space: nowrap, e os "mandamentos" (frases
    longas) estouravam a largura do sheet em vez de quebrar linha. */
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

html body .jatai-estudo-checklist__bolinha {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    border: 1.6px solid #D8CFC3 !important;
    box-sizing: border-box !important;
    transition: background .12s ease, border-color .12s ease !important;
}

html body .jatai-estudo-checklist__bolinha::after {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    opacity: 0 !important;
    transform: scale(.4) !important;
    transition: opacity .12s ease, transform .12s ease !important;
}

html body .jatai-estudo-checklist__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1F2328 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

html body button.jatai-estudo-checklist__item--marcado {
    background: color-mix(in srgb, var(--cor-guia) 7%, white) !important;
    border-color: color-mix(in srgb, var(--cor-guia) 35%, white) !important;
}

html body .jatai-estudo-checklist__item--marcado .jatai-estudo-checklist__bolinha {
    background: var(--cor-guia) !important;
    border-color: var(--cor-guia) !important;
}

html body .jatai-estudo-checklist__item--marcado .jatai-estudo-checklist__bolinha::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

html body .jatai-estudo-checklist__item--marcado .jatai-estudo-checklist__texto {
    color: #8A92A1 !important;
    text-decoration: line-through !important;
}

/* ---- Prompt copiável */
html body .jatai-estudo-prompt {
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 14px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
}

html body .jatai-estudo-prompt__topo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

html body .jatai-estudo-prompt__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: var(--cor-guia) !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
}

html body button.jatai-estudo-prompt__copiar {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    background: #F0F3F8 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #5B6372 !important;
    cursor: pointer !important;
    transition: background .12s ease, color .12s ease !important;
}

html body button.jatai-estudo-prompt__copiar:hover {
    background: #E6EBF2 !important;
}

html body button.jatai-estudo-prompt__copiar--copiado {
    background: var(--cor-guia) !important;
    color: #ffffff !important;
}

html body .jatai-estudo-prompt__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    line-height: 1.55 !important;
    color: #353B46 !important;
    margin: 0 !important;
}

/* ---- Timeline (passos com tempo) */
html body .jatai-estudo-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html body .jatai-estudo-timeline__item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 0 !important;
    border-bottom: 0.5px solid #E4E8EF !important;
}

html body .jatai-estudo-timeline__item:last-child {
    border-bottom: none !important;
}

html body .jatai-estudo-timeline__tempo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    min-width: 52px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--cor-guia) 14%, white) !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--cor-guia) !important;
}

html body .jatai-estudo-timeline__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1F2328 !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
}

/* ---- Colunas (3 listas lado a lado — vira empilhado no mobile) */
html body .jatai-estudo-colunas {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

html body .jatai-estudo-colunas__item {
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-radius: 14px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

html body .jatai-estudo-colunas__titulo {
    display: block !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--cor-guia) !important;
    margin-bottom: 8px !important;
}

html body .jatai-estudo-colunas__lista {
    margin: 0 !important;
    padding-left: 16px !important;
    list-style: disc !important;
}

html body .jatai-estudo-colunas__lista li {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #353B46 !important;
}

/* ---- Legenda de cores (detetive da pronúncia) */
html body .jatai-estudo-legenda {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html body .jatai-estudo-legenda__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 0.5px solid #E4E8EF !important;
    border-left-width: 3px !important;
    border-left-style: solid !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
}

html body .jatai-estudo-legenda__bolinha {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-top: 4px !important;
}

html body .jatai-estudo-legenda__corpo {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html body .jatai-estudo-legenda__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
}

html body .jatai-estudo-legenda__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #5B6372 !important;
}

/* ---- Erros comuns (x + título + texto) */
html body .jatai-estudo-erros {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html body .jatai-estudo-erros__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: #FCEBEB !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
}

html body .jatai-estudo-erros__x {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: #A32D2D !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

html body .jatai-estudo-erros__corpo {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html body .jatai-estudo-erros__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #7A2626 !important;
}

html body .jatai-estudo-erros__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #7A2626 !important;
}

/* ---- Badges (prompts favoritos) */
html body .jatai-estudo-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html body .jatai-estudo-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: color-mix(in srgb, var(--cor-guia) 12%, white) !important;
    color: var(--cor-guia) !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ---- Caderno (tabela editável de verdade — a aluna digita e o
navegador salva sozinho, ver JS) */
html body .jatai-estudo-tabela--caderno td[contenteditable] {
    cursor: text !important;
    min-width: 110px !important;
    outline: none !important;
    transition: background .12s ease !important;
}

html body .jatai-estudo-tabela--caderno td[contenteditable]:focus {
    background: color-mix(in srgb, var(--cor-guia) 10%, white) !important;
}

html body .jatai-estudo-tabela--caderno__col-acao {
    width: 30px !important;
}

html body button.jatai-estudo-caderno__del {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #A3AAB7 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

html body button.jatai-estudo-caderno__del:hover {
    background: #FCEBEB !important;
    color: #A32D2D !important;
}

html body .jatai-estudo-caderno__vazio {
    display: block !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #8A92A1 !important;
    text-align: center !important;
    padding: 16px !important;
}

html body button.jatai-estudo-caderno__add {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    background: color-mix(in srgb, var(--cor-guia) 12%, white) !important;
    color: var(--cor-guia) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    margin-top: 10px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .12s ease !important;
}

html body button.jatai-estudo-caderno__add:hover {
    background: color-mix(in srgb, var(--cor-guia) 20%, white) !important;
}

@media (max-width: 560px) {
    .jatai-estudo-comparativo {
        grid-template-columns: 1fr !important;
    }
    .jatai-estudo-colunas {
        grid-template-columns: 1fr !important;
    }
    .jatai-estudo-sheet__corpo {
        padding: 20px 16px 50px !important;
    }
}

/*
=================================================
TEMA ESCURO — Guias de Estudo Interativos
=================================================
*/

html[data-jatai-tema="escuro"] body .jatai-estudo-sheet__painel {
    background: #161616 !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-sheet__topo {
    background: #1C1C1E !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-sheet__topo-texto {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-sheet__fechar {
    background: #2C2C2E !important;
    color: #98989D !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-sheet__fechar:hover {
    background: #3A3A3C !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-hero {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-hero__emoji {
    background: color-mix(in srgb, var(--cor-guia) 24%, #1C1C1E) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-hero__titulo {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-hero__subtitulo,
html[data-jatai-tema="escuro"] body .jatai-estudo-bloco__texto {
    color: #98989D !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-bloco__texto li {
    color: #98989D !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-destaque {
    background: color-mix(in srgb, var(--cor-guia) 16%, #1C1C1E) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-destaque__texto {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-comparativo__cartao,
html[data-jatai-tema="escuro"] body .jatai-estudo-cardapio__item,
html[data-jatai-tema="escuro"] body .jatai-estudo-prompt,
html[data-jatai-tema="escuro"] body .jatai-estudo-colunas__item,
html[data-jatai-tema="escuro"] body .jatai-estudo-legenda__item {
    background: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Faltava a cor do TEXTO aqui — só o fundo escurecia, o texto
continuava com o marrom pensado pro fundo branco (#353B46), quase
ilegível em cima do fundo já escuro. Era a causa real do "letras
escuras" nas tabelas dos guias. */
html[data-jatai-tema="escuro"] body .jatai-estudo-tabela td {
    background: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #C7C7CC !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-tabela tr:nth-child(even) td {
    background: #212123 !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-comparativo__cartao-titulo {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-comparativo__valor,
html[data-jatai-tema="escuro"] body .jatai-estudo-cardapio__titulo,
html[data-jatai-tema="escuro"] body .jatai-estudo-legenda__titulo,
html[data-jatai-tema="escuro"] body .jatai-estudo-timeline__texto {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-comparativo__label,
html[data-jatai-tema="escuro"] body .jatai-estudo-cardapio__texto,
html[data-jatai-tema="escuro"] body .jatai-estudo-legenda__texto {
    color: #98989D !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-cardapio__emoji {
    background: color-mix(in srgb, var(--cor-guia) 24%, #1C1C1E) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-checklist__item {
    background: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-checklist__bolinha {
    border-color: #48484A !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-checklist__texto {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-checklist__item--marcado {
    background: color-mix(in srgb, var(--cor-guia) 16%, #1C1C1E) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-checklist__item--marcado .jatai-estudo-checklist__texto {
    color: #6E6E73 !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-prompt__texto {
    color: #C7C7CC !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-prompt__copiar {
    background: #2C2C2E !important;
    color: #98989D !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-prompt__copiar:hover {
    background: #3A3A3C !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-timeline__item {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-timeline__tempo {
    background: color-mix(in srgb, var(--cor-guia) 24%, #1C1C1E) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-colunas__titulo {
    color: color-mix(in srgb, var(--cor-guia) 70%, white) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-colunas__lista li {
    color: #C7C7CC !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-erros__item {
    background: rgba(163, 45, 45, 0.18) !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-erros__titulo,
html[data-jatai-tema="escuro"] body .jatai-estudo-erros__texto {
    color: #FF8B8B !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-badge {
    background: color-mix(in srgb, var(--cor-guia) 22%, #1C1C1E) !important;
    color: color-mix(in srgb, var(--cor-guia) 65%, white) !important;
}

/* Todo texto que usa a cor do guia direto (não um tom derivado) fica
mais claro no escuro — as 4 cores foram calibradas pra ler bem no
fundo branco; contra fundo escuro, principalmente a teal (IA) fica
com contraste fraco. Clareado uniformemente com color-mix, sem
precisar de 4 ajustes manuais diferentes. Só dentro do sheet de cada
guia — o rótulo do card no grid usa a cor fixa de sempre, não entra
aqui. */
html[data-jatai-tema="escuro"] body .jatai-estudo-bloco__titulo,
html[data-jatai-tema="escuro"] body .jatai-estudo-comparativo__cartao-titulo,
html[data-jatai-tema="escuro"] body .jatai-estudo-timeline__tempo,
html[data-jatai-tema="escuro"] body .jatai-estudo-prompt__titulo {
    color: color-mix(in srgb, var(--cor-guia) 65%, white) !important;
}

/* ---- Caderno (escuro) */
html[data-jatai-tema="escuro"] body .jatai-estudo-tabela--caderno td[contenteditable]:focus {
    background: color-mix(in srgb, var(--cor-guia) 18%, #1C1C1E) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-caderno__del {
    color: #6E6E73 !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-caderno__del:hover {
    background: rgba(163, 45, 45, 0.22) !important;
    color: #FF8B8B !important;
}

html[data-jatai-tema="escuro"] body .jatai-estudo-caderno__vazio {
    color: #6E6E73 !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-caderno__add {
    background: color-mix(in srgb, var(--cor-guia) 20%, #1C1C1E) !important;
    color: color-mix(in srgb, var(--cor-guia) 65%, white) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-estudo-caderno__add:hover {
    background: color-mix(in srgb, var(--cor-guia) 30%, #1C1C1E) !important;
}

/* Trava de segurança no nível da página de Recursos inteira — não
importa o que mais exista na página (decorações florais de fundo,
outros elementos), a página nunca deve conseguir rolar de lado no
mobile. */
html body .jatai-pagina--acessos {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}