/**
 * ============================================================================
 * JATAÍ FRAMEWORK - COMPONENTE 3 (AULAS)
 * File: componente3-aulas.css
 * Version: 2.17.0
 * ============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.jatai-video-wrapper {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15) !important;
    background: #000000 !important;
}

.jatai-video-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

.jatai-video-wrapper--arquivo video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000000 !important;
}

.jatai-video-mobile-card {
    position: relative !important;
    width: 100% !important;
    padding: 24px 20px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    text-align: center !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

.jatai-video-card-icone {
    margin-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
}

.jatai-video-card-titulo {
    margin: 0 0 6px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.jatai-video-card-subtitulo {
    margin: 0 0 16px 0 !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.4 !important;
}

.jatai-video-card-botao {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 20px !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.jatai-video-card-botao:hover {
    transform: translateY(-1px) !important;
    background: #f0f0f0 !important;
}

.jatai-video-alerta-erro {
    padding: 20px !important;
    text-align: center !important;
    color: #db5b5d !important;
    background: rgba(219, 91, 93, 0.08) !important;
    border-radius: 8px !important;
}

.jatai-video-alerta-vazio {
    padding: 20px !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #a0a0a0 !important;
    border-radius: 8px !important;
}

/*
=================================================
BADGE DE STATUS DE HOMEWORK
=================================================
*/

.jatai-hw-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

.jatai-hw-status.hw_pendente {
    background: #D65D5D !important;
    color: #ffffff !important;
}

.jatai-hw-status.hw_realizada {
    background: #C7917C !important;
    color: #ffffff !important;
}

.jatai-hw-status.hw_aprovada {
    background: #687B27 !important;
    color: #ffffff !important;
}

.jatai-hw-status.jatai-hw-clicavel {
    cursor: pointer !important;
}

/*
=================================================
BOTTOM-SHEET DE CONFIRMAÇÃO DE STATUS DE HOMEWORK
=================================================
*/

.jatai-hw-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-hw-sheet__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

.jatai-hw-sheet__content {
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    text-align: center !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
}

/* Sheet de "Gerenciar pacotes" tem mais informação por linha (status +
data + valor + ações) que um menu simples — um pouco mais largo pra
não ficar apertado, e o texto some do centralizado (o conteúdo de
dentro, .jatai-card-pacotes, já se organiza sozinho à esquerda). Mesma
largura pro sheet de "Contratos ativos" (rendimento) — hoje cada linha
já carrega nome + status de pagamento empilhados, então precisa do
mesmo respiro. */
.jatai-hw-sheet__content--pacotes {
    max-width: 560px !important;
    text-align: left !important;
}

.jatai-hw-sheet__texto {
    margin: 0 0 22px 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #4A3B2E !important;
}

.jatai-hw-sheet__confirmar,
.jatai-hw-sheet__cancelar {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

/*
Cor do botão principal dos sheets, baseada em quem está REALMENTE
logado (não em quem está sendo impersonado) — a classe body.jatai-
real-{role} é definida via body_class no PHP acima. O valor #C7917C
é o fallback (visitante/estado desconhecido).
*/
body.jatai-real-gestora {
    --jatai-real-accent: #B8923D !important;
}
body.jatai-real-teacher {
    --jatai-real-accent: #5C7A2A !important;
}
body.jatai-real-aluna {
    --jatai-real-accent: #A85A3D !important;
}

.jatai-hw-sheet__confirmar {
    background: var(--jatai-real-accent, #C7917C) !important;
    color: #ffffff !important;
    border: 1px solid var(--jatai-real-accent, #C7917C) !important;
    margin-bottom: 10px !important;
}

.jatai-hw-sheet__cancelar {
    background: #ffffff !important;
    color: #4A3B2E !important;
    border: 1px solid #E0D5CC !important;
    cursor: pointer !important;
}

.jatai-hw-sheet__opcao {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    margin-bottom: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    color: #ffffff !important;
}

.jatai-hw-sheet__opcao--hw_pendente {
    background: #D65D5D !important;
    border: 1px solid #D65D5D !important;
}

.jatai-hw-sheet__opcao--hw_realizada {
    background: #C7917C !important;
    border: 1px solid #C7917C !important;
}

.jatai-hw-sheet__opcao--hw_aprovada {
    background: #687B27 !important;
    border: 1px solid #687B27 !important;
}

/*
=================================================
CAMPOS DO SHEET DE EDITAR LINK DE HOMEWORK
=================================================
*/

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

.jatai-hw-sheet__titulo {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #4A3B2E !important;
}

.jatai-hw-sheet__fechar {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: #9C8F82 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.jatai-hw-editar-item {
    text-align: left !important;
    margin-bottom: 14px !important;
}

.jatai-hw-editar-item--linha {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.jatai-hw-editar-remover {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #F1EBE3 !important;
    color: #9C8F82 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background .12s ease, color .12s ease !important;
}

.jatai-hw-editar-remover:hover {
    background: #FCEBEB !important;
    color: #A32D2D !important;
}

.jatai-hw-editar-label {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    color: #9C8F82 !important;
    margin-bottom: 6px !important;
}

.jatai-hw-editar-input {
    width: 100% !important;
    padding: 10px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    color: #3A2E24 !important;
    background: #FBF7F2 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .12s ease, background .12s ease !important;
}

.jatai-hw-editar-input:focus {
    border-color: #C7917C !important;
    background: #ffffff !important;
}

select.jatai-hw-editar-input {
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/*
=================================================
DATA/HORA DA AULA COM ÍCONE
=================================================
*/

.jatai-data-aula {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/*
=================================================
BADGE DE STATUS DE AULA (4 status, cores oficiais)
=================================================
*/

.jatai-aula-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

.jatai-aula-status.agendada {
    background: #c7917f !important;
}

.jatai-aula-status.realizada {
    background: #687c27 !important;
}

.jatai-aula-status.aluno_faltou {
    background: #d55d60 !important;
}

.jatai-aula-status.aguardando_reposicao {
    background: #ae74e2 !important;
}

/* Usado só no sheet do calendário (C4), na linha "fulana está de
férias" — mesma família de vermelho de aluno_faltou (ausência),
faz sentido semanticamente. */
.jatai-aula-status.ferias {
    background: #d55d60 !important;
}

.jatai-aula-status.jatai-aula-status-clicavel {
    cursor: pointer !important;
}

.jatai-aula-sheet__opcao--agendada {
    background: #c7917f !important;
    border: 1px solid #c7917f !important;
}

.jatai-aula-sheet__opcao--realizada {
    background: #687c27 !important;
    border: 1px solid #687c27 !important;
}

.jatai-aula-sheet__opcao--aluno_faltou {
    background: #d55d60 !important;
    border: 1px solid #d55d60 !important;
}

.jatai-aula-sheet__opcao--aguardando_reposicao {
    background: #ae74e2 !important;
    border: 1px solid #ae74e2 !important;
}

/*
=================================================
CHEVRON DO CARD DE AULA
Sinaliza que o card inteiro é clicável (leva pra dentro
da aula), sem depender de hover — funciona igual em
desktop, tablet e celular. Feito só com bordas de CSS,
sem SVG/ícone externo, pra não depender de nada carregar.
=================================================
*/

.botao-card-aula {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: #F5EEE7 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: background 0.25s ease, transform 0.25s ease !important;
}

.botao-card-aula::after {
    content: '' !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 2px solid #A85A3D !important;
    border-top: 2px solid #A85A3D !important;
    transform: rotate(45deg) translateX(-1px) !important;
    transition: transform 0.25s ease, border-color 0.25s ease !important;
}

.botao-card-aula:hover {
    background: #A85A3D !important;
    transform: scale(1.08) !important;
}

.botao-card-aula:hover::after {
    border-color: #ffffff !important;
    transform: rotate(45deg) translateX(1px) !important;
}

/*
=================================================
FORM DE EDIÇÃO COMPLETA DA AULA
=================================================
*/

.jatai-aula-editar-secao {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid #F1EBE3 !important;
}

.jatai-aula-editar-linha-dupla {
    gap: 8px !important;
}

.jatai-aula-editar-linha-dupla .jatai-hw-editar-input {
    flex: 1 !important;
}

.jatai-aula-editar-add {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    background: #FBF7F2 !important;
    border: none !important;
    border-radius: 10px !important;
    color: var(--jatai-real-accent, #A85A3D) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 10px !important;
    margin-top: 6px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background .12s ease !important;
}

.jatai-aula-editar-add:hover {
    background: #F1EBE3 !important;
}

/*
=================================================
DROPZONE DE UPLOAD DE ARQUIVO (drag-and-drop ou clique)
=================================================
*/

.jatai-aula-dropzone {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border: 1.5px dashed #E0D5CC !important;
    border-radius: 6px !important;
    background: #FBF7F2 !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease !important;
}

.jatai-aula-dropzone-texto {
    font-size: 12px !important;
    color: #9C8F82 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.jatai-aula-dropzone:hover,
.jatai-aula-dropzone-hover {
    border-color: #C7917C !important;
    background: #FBF3EE !important;
    transform: scale(1.015) !important;
}

.jatai-aula-dropzone-hover {
    border-style: solid !important;
    border-color: #A85A3D !important;
}

.jatai-aula-dropzone-enviando {
    border-color: #C7917C !important;
    background: #FBF3EE !important;
    animation: jataiDropzonePulso 1s ease-in-out infinite !important;
}

@keyframes jataiDropzonePulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.jatai-aula-dropzone-preenchida {
    border-style: solid !important;
    border-color: #687c27 !important;
    background: #F3F6EC !important;
}

.jatai-aula-dropzone-preenchida .jatai-aula-dropzone-texto {
    color: #4A5A1E !important;
    font-weight: 600 !important;
}

/*
=================================================
FILTRO EM PÍLULAS (Aulas / Reposições)
Estilo Apple (chips do App Store / Apple Music): pílula
cinza clara -> vira sólida quando ativa, sombra bem suave,
fonte do sistema, check na opção selecionada dentro do
mini-sheet, cantos bem arredondados, transições suaves.

!important espalhado de propósito — o Elementor injeta
estilo global em <button>/<input>/<select> que sempre
vence especificidade normal (padrão já visto em outros
componentes daqui). Aqui forçamos tudo: fonte, cor, borda,
sombra, pra nenhuma pílula herdar nada do tema por baixo.
=================================================
*/

.jatai-filtro-aulas {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/*
O <form> só existe pra carregar os inputs ocultos (jf_busca, jf_status
etc.) — não tem nada visível dentro dele. Mas por ser filho direto de
.jatai-filtro-aulas (flex container), ele contava como um item de flex
igual aos outros, e o "gap: 8px" empurrava o PRÓXIMO item (a barra de
busca) 8px pra direita — só na primeira linha, porque quando as
pílulas quebram pra segunda linha elas recomeçam do zero (flex-wrap
reinicia a régua a cada linha nova). Resultado: a barra de busca ficava
uns 8px mais indentada que a pílula "Status" embaixo. display:none
tira o form do fluxo do flex sem tirar sua função — inputs ocultos e
JS continuam funcionando normalmente num elemento invisível.
*/
.jatai-filtro-aulas__form {
    display: none !important;
}

/* Busca — ~30% da largura, o resto é pra pílulas */
.jatai-filtro-aulas__busca-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 1 1 30% !important;
    max-width: 260px !important;
    min-width: 140px !important;
    padding: 7px 12px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(8px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.6) !important;
    box-shadow: 0 2px 8px rgba(58, 46, 36, 0.06) !important;
    border: 1.5px solid transparent !important;
    border-radius: 999px !important;
    color: #6B5D4F !important;
    box-sizing: border-box !important;
    transition: border-color .15s ease !important;
}

/* Borda fina e sólida, na cor de quem está REALMENTE logado (não
importa o tema de quem está sendo vestida) — mesmo princípio já usado
nos botões de sheet e no header. */
.jatai-filtro-aulas__busca-wrap:focus-within {
    border-color: var(--jatai-real-accent, #A85A3D) !important;
}

.jatai-filtro-aulas__busca-wrap svg {
    flex-shrink: 0 !important;
    opacity: 0.6 !important;
}

.jatai-filtro-aulas__criar {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(8px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.6) !important;
    box-shadow: 0 2px 8px rgba(58, 46, 36, 0.06) !important;
    border: none !important;
    color: #6B5D4F !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background .18s cubic-bezier(.4,0,.2,1), color .18s cubic-bezier(.4,0,.2,1), transform .12s ease !important;
}

.jatai-filtro-aulas__criar:hover {
    background: #A85A3D !important;
    color: #ffffff !important;
    transform: rotate(45deg) !important;
}

.jatai-filtro-aulas__criar:active {
    transform: rotate(45deg) scale(0.92) !important;
}

.jatai-filtro-aulas__busca-input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #3A2E24 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

.jatai-filtro-aulas__busca-input::placeholder {
    color: #B8AB9C !important;
}

/* Trilha de pílulas */
.jatai-filtro-aulas__pilulas {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
}

.jatai-filtro-pilula-wrap {
    position: relative !important;
}

.jatai-filtro-pilula {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 7px 13px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(8px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.6) !important;
    box-shadow: 0 2px 8px rgba(58, 46, 36, 0.06) !important;
    color: #5C5049 !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 590 !important;
    letter-spacing: -0.1px !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    appearance: none !important;
    white-space: nowrap !important;
    transition: background .18s cubic-bezier(.4,0,.2,1), color .18s cubic-bezier(.4,0,.2,1), transform .1s ease !important;
}

.jatai-filtro-pilula:hover {
    background: rgba(255, 255, 255, 0.8) !important;
}

.jatai-filtro-pilula:active {
    transform: scale(0.96) !important;
}

.jatai-filtro-pilula--ativa {
    background: #A85A3D !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(168, 90, 61, 0.35) !important;
}

.jatai-filtro-pilula--ativa:hover {
    background: #954E34 !important;
}

.jatai-filtro-pilula--aberta {
    background: #3A2E24 !important;
    color: #ffffff !important;
}

.jatai-filtro-chevron {
    transition: transform .2s cubic-bezier(.4,0,.2,1) !important;
    opacity: 0.7 !important;
}

.jatai-filtro-pilula--aberta .jatai-filtro-chevron,
.jatai-filtro-pilula--ativa .jatai-filtro-chevron {
    opacity: 1 !important;
}

.jatai-filtro-pilula--aberta .jatai-filtro-chevron {
    transform: rotate(180deg) !important;
}

/* Pílula "Arquivadas" — dourada quando ativa (cor da gestora, já que
só ela vê essa opção), diferente do terracota genérico das outras, e
com um "x" que só aparece nesse estado, deixando claro que é só
clicar de novo pra tirar o filtro. */
.jatai-filtro-pilula__x {
    display: none !important;
    flex-shrink: 0 !important;
}

.jatai-filtro-pilula--dourada.jatai-filtro-pilula--ativa {
    background: #B8923D !important;
    box-shadow: 0 1px 3px rgba(184, 146, 61, 0.35) !important;
}

.jatai-filtro-pilula--dourada.jatai-filtro-pilula--ativa:hover {
    background: #A17F35 !important;
}

.jatai-filtro-pilula--dourada.jatai-filtro-pilula--ativa .jatai-filtro-pilula__x {
    display: block !important;
}

.jatai-filtro-pilula--limpar {
    background: transparent !important;
    color: #B8AB9C !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 7px 6px !important;
}

.jatai-filtro-pilula--limpar:hover {
    background: transparent !important;
    color: #A85A3D !important;
}

/* Mini-sheet — ancorado logo abaixo da pílula que abriu ele.
   Vidro fosco (backdrop-filter) com fallback sólido pra quem
   não suporta. */
.jatai-filtro-mini-sheet {
    display: none !important;
    position: fixed !important;
    z-index: 40 !important;
    min-width: 168px !important;
    max-width: 240px !important;
    max-height: 264px !important;
    overflow-y: auto !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.6) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(58, 46, 36, 0.16), 0 2px 8px rgba(58, 46, 36, 0.08) !important;
    padding: 6px !important;
    animation: jataiFiltroSheetEntrada .16s cubic-bezier(.2,.8,.3,1) !important;
}

@keyframes jataiFiltroSheetEntrada {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.jatai-filtro-mini-sheet--aberto {
    display: block !important;
}

.jatai-filtro-sheet-busca {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 7px 9px !important;
    margin: 0 0 4px 0 !important;
    border: none !important;
    background: rgba(120, 110, 100, 0.08) !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    color: #3A2E24 !important;
    outline: none !important;
    box-shadow: none !important;
}

.jatai-filtro-sheet-busca::placeholder {
    color: #B8AB9C !important;
}

.jatai-filtro-opcao {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #3A2E24 !important;
    cursor: pointer !important;
    appearance: none !important;
    box-shadow: none !important;
    transition: background .12s ease !important;
}

.jatai-filtro-opcao__texto {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.jatai-filtro-opcao__contagem {
    color: #B8AB9C !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    flex-shrink: 0 !important;
}

.jatai-filtro-opcao--ativa .jatai-filtro-opcao__contagem {
    color: #C89A87 !important;
}

.jatai-filtro-opcao:hover {
    background: rgba(120, 110, 100, 0.1) !important;
}

.jatai-filtro-opcao--ativa {
    color: #A85A3D !important;
    font-weight: 600 !important;
}

.jatai-filtro-opcao--ativa::after {
    content: "✓" !important;
    color: #A85A3D !important;
    font-weight: 700 !important;
    margin-left: 8px !important;
}

/*
Backdrop por trás do mini-sheet — só existe visualmente no mobile (ver
media query abaixo). No desktop fica sempre invisível/inerte.
*/
.jatai-filtro-backdrop {
    display: none !important;
}

@media (max-width: 600px) {

    /* Busca ocupa a linha, dividindo espaço com o botão + (se houver) */
    .jatai-filtro-aulas__busca-wrap {
        flex: 1 1 auto !important;
        max-width: none !important;
    }

    .jatai-filtro-aulas__criar {
        width: 36px !important;
        height: 36px !important;
    }

    /*
    Pílulas em UMA linha só, com rolagem horizontal — padrão de app
    nativo (App Store, Google Maps, Instagram Explore), em vez de
    quebrar em várias linhas e empurrar o conteúdo pra baixo.
    */
    .jatai-filtro-aulas__pilulas {
        flex: 1 1 100% !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
        margin: 0 -14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .jatai-filtro-aulas__pilulas::-webkit-scrollbar {
        display: none !important;
    }

    .jatai-filtro-pilula {
        padding: 6px 11px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    /* Backdrop escurecido atrás do cartão de filtro */
    .jatai-filtro-backdrop {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(30, 22, 15, 0.32) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: 999998 !important;
        transition: opacity .2s ease !important;
    }

    .jatai-filtro-backdrop--visivel {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /*
    O mini-sheet vira um cartão CENTRALIZADO na tela, com efeito glass
    (backdrop-filter), em vez de colado no rodapé — colado embaixo ele
    disputava espaço com a barra de navegação mobile (que tem z-index
    próprio, configurado direto no widget do Elementor, fora do nosso
    controle). Centralizado + z-index bem alto (999999) resolve de vez,
    não importa o que mais exista na página por cima.
    */
    .jatai-filtro-mini-sheet {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(100% - 56px) !important;
        max-width: 340px !important;
        min-width: 0 !important;
        max-height: 60vh !important;
        border-radius: 20px !important;
        padding: 12px !important;
        z-index: 999999 !important;
        background: rgba(255, 255, 255, 0.86) !important;
        backdrop-filter: blur(22px) saturate(1.8) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.8) !important;
        transform: translate(-50%, -50%) scale(0.94) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform .2s cubic-bezier(.2,.8,.3,1), opacity .16s ease !important;
    }

    .jatai-filtro-mini-sheet--aberto {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .jatai-filtro-opcao {
        padding: 11px 10px !important;
        font-size: 14px !important;
    }

}

/*
=================================================
AVATAR DE TROCAR ALUNA (card de listing e página da aula, gestora)
Círculo com a foto/inicial da aluna atual — passa o
mouse, aparece um ícone de troca por cima; clica, abre a
lista de todas as alunas pra reatribuir a aula.

!important espalhado de propósito (mesmo motivo de sempre
— o Elementor injeta estilo em elementos dentro do template
do Listing Grid que vence especificidade normal).
=================================================
*/

.jatai-avatar-trocar {
    position: relative !important;
    display: inline-flex !important;
    width: fit-content !important;
    height: fit-content !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
}

.jatai-avatar-trocar__hover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(58, 46, 36, 0.55) !important;
    opacity: 0 !important;
    transition: opacity .15s ease !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
    appearance: none !important;
    box-shadow: none !important;
}

.jatai-avatar-trocar:hover .jatai-avatar-trocar__hover,
.jatai-avatar-trocar__hover:focus-visible {
    opacity: 1 !important;
}

/* Lista de alunas no sheet — estilo Apple, igual ao filtro
(fonte do sistema, hover suave, check na atual em vez de só
mudar o fundo) */

.jatai-avatar-trocar__lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    text-align: left !important;
    margin-top: 6px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.jatai-avatar-trocar__item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    appearance: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: #3A2E24 !important;
    width: 100% !important;
    text-align: left !important;
    box-shadow: none !important;
    transition: background .12s cubic-bezier(.4,0,.2,1) !important;
}

.jatai-avatar-trocar__item > span {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.jatai-avatar-trocar__item > .jatai-avatar-trocar__item-foto {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    line-height: 0 !important;
}

.jatai-avatar-trocar__item:hover {
    background: rgba(120, 110, 100, 0.1) !important;
}

.jatai-avatar-trocar__item--atual {
    background: rgba(168, 90, 61, 0.08) !important;
    color: #A85A3D !important;
    font-weight: 600 !important;
}

.jatai-avatar-trocar__item--atual::after {
    content: "✓" !important;
    color: #A85A3D !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

/*
=================================================
TEMA ESCURO — sheet "Trocar aluna"
=================================================
O sheet em volta (.jatai-hw-sheet__content) já escurece
sozinho — faltava só o texto de cada item, que ficava preto
(#3A2E24) em cima desse fundo já escuro: texto quase
invisível, dava pra ler só pela silhueta.
*/
html[data-jatai-tema="escuro"] body button.jatai-avatar-trocar__item {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body button.jatai-avatar-trocar__item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-avatar-trocar__item--atual {
    background: rgba(168, 90, 61, 0.22) !important;
    color: #E0916F !important;
}

html[data-jatai-tema="escuro"] body button.jatai-avatar-trocar__item--atual::after {
    color: #E0916F !important;
}

/*
=================================================
MENU DE AÇÕES DO CARD DE AULA (botao-sheet-card-aula)
Editar / Duplicar / Remover — linha simples com ícone +
texto, sem caixinha colorida atrás (diferente do sheet de
status, que usa botões grandes coloridos).
=================================================
*/

.jatai-menu-aula {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: left !important;
    margin-top: 4px !important;
}

.jatai-menu-aula__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 8px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    appearance: none !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: #A85A3D !important;
    width: 100% !important;
    text-align: left !important;
    box-shadow: none !important;
    transition: background .12s ease !important;
}

.jatai-menu-aula__item:hover {
    background: #FBF3EE !important;
}

.jatai-menu-aula__item svg {
    flex-shrink: 0 !important;
}

.jatai-menu-aula__item--perigo {
    color: #C24A4A !important;
}


/*
=================================================
CARD DE AULA MOBILE ([jatai_card_aula_mobile])
Card completo, pronto — avatar, título, status (cores
oficiais), data, chevron de abrir e menu "..." (branco,
bolinhas pretas). Fonte Montserrat em tudo.
=================================================
*/

.jatai-card-aula-mobile {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 0.5px solid #EAE3DA !important;
    padding: 14px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    box-sizing: border-box !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: box-shadow .15s ease !important;
}

.jatai-card-aula-mobile:hover {
    box-shadow: 0 5px 16px rgba(58, 46, 36, 0.18) !important;
}

.jatai-card-aula-mobile__topo {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.jatai-card-aula-mobile__avatar {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin-top: 1px !important;
}

.jatai-card-aula-mobile__info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.jatai-card-aula-mobile__titulo-linha {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.jatai-card-aula-mobile__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2C2C2A !important;
}

.jatai-card-aula-mobile__status {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    line-height: 1.5 !important;
}

.jatai-card-aula-mobile__subtitulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #A85A3D !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 3px !important;
}

/* "Arquivada" — mesma família visual dos outros status (pill sólida),
cor neutra de propósito (não é bom nem ruim, é só um estado). */
.jatai-card-aula-mobile__arquivada {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #6B5D4F !important;
    background: #F1EBE3 !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    line-height: 1.5 !important;
}

/* "Aluna removida: Fulana" — aparece só em aula órfã (a aluna foi
DELETADA, não só arquivada), avisando de quem era antes de sumir. */
.jatai-card-aula-mobile__aluna-removida {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    font-style: italic !important;
    color: #9C8F82 !important;
    margin-top: 2px !important;
}

/* Texto do sheet de confirmar exclusão de aluna */
.jatai-confirmar-deletar__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #6B5D4F !important;
    margin: 4px 0 14px !important;
}

.jatai-card-aula-mobile__rodape {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 0.5px solid #EAE3DA !important;
}

.jatai-card-aula-mobile__data {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #9C8F82 !important;
}

.jatai-card-aula-mobile__acoes {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.jatai-card-aula-mobile__abrir {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #FAECE7 !important;
    color: #993C1D !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.jatai-card-aula-mobile__menu {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 0.5px solid #EAE3DA !important;
    color: #1A1A1A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: background .12s ease !important;
}

.jatai-card-aula-mobile__menu:hover,
.jatai-card-aula-mobile__menu:active {
    background: #F7F5F1 !important;
}

/*
Botões diretos (editar/duplicar/remover) — escondidos por padrão
(mobile continua com o "..." abrindo o sheet). A partir de telas
maiores, aparecem direto no card e o "..." some.
*/
.jatai-card-aula-mobile__acoes-pc {
    display: none !important;
}

.jatai-card-aula-mobile__acao-pc {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #FBF7F2 !important;
    border: none !important;
    color: #6B5D4F !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: background .12s ease, color .12s ease !important;
}

.jatai-card-aula-mobile__acao-pc:hover {
    background: #F1EBE3 !important;
}

.jatai-card-aula-mobile__acao-pc--perigo:hover {
    background: #FCEBEB !important;
    color: #A32D2D !important;
}

@media (min-width: 601px) {
    .jatai-card-aula-mobile__acoes-pc {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .jatai-card-aula-mobile__menu {
        display: none !important;
    }
}


/*
=================================================
CARD DE ALUNA ([jatai_card_aluna])
Responsivo — mesma marcação pra PC, tablet e mobile,
o CSS que se adapta via media query. Avatar, nome,
teachers vinculadas, barra de progresso, reposições
pendentes. Menu "..." só pra gestora.
=================================================
*/

.jatai-card-aluna {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 0.5px solid #EAE3DA !important;
    padding: 14px 16px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    box-sizing: border-box !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: box-shadow .15s ease, border-color .15s ease !important;
}

.jatai-card-aluna:hover {
    border-color: #E0D5CC !important;
    box-shadow: 0 5px 16px rgba(58, 46, 36, 0.18) !important;
}

.jatai-card-aluna__principal {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.jatai-card-aluna__avatar {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

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

.jatai-card-aluna__nome {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #2C2C2A !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    display: block !important;
}

/*
=================================================
PÍLULA DE TIPO DE PACOTE (Bloom/Rise/Premium)
Fica na PRÓPRIA linha, embaixo do nome — não do lado
(isso espremia o nome, cortando alunas com nome mais
comprido). Cor de fundo vem inline (style="background:...")
direto do PHP/JS — cada pacote tem a própria cor, não faz
sentido fixar isso aqui. O que importa manter aqui é a
"moldura" (tamanho, formato, texto branco) igual pra
qualquer cor que vier.
=================================================
*/

.jatai-card-aluna__pacote-linha {
    display: flex !important;
    margin-top: 2px !important;
}

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;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

html body span.jatai-pacote-badge--vazio {
    background: #E0D5CC !important;
    color: #6B5D4F !important;
}

html body span.jatai-pacote-badge--editavel {
    cursor: pointer !important;
}

html body span.jatai-pacote-badge--editavel:hover {
    filter: brightness(1.08) !important;
}

/* As 3 opções dentro do sheet — mesma cor de cada pacote, só maiores
e empilhadas verticalmente, fáceis de tocar no mobile. */
.jatai-pacote-sheet__opcoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

html body button.jatai-pacote-sheet__opcao {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    opacity: .75 !important;
    transition: opacity .12s ease, transform .12s ease !important;
}

html body button.jatai-pacote-sheet__opcao:hover {
    opacity: .9 !important;
}

html body button.jatai-pacote-sheet__opcao:active {
    transform: scale(.98) !important;
}

html body button.jatai-pacote-sheet__opcao--ativa {
    opacity: 1 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .12) inset !important;
}

.jatai-card-aluna__teachers {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.jatai-card-aluna__teacher-chip {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #6B5D4F !important;
    background: #F1EBE3 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
}

.jatai-card-aluna__menu {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 0.5px solid #EAE3DA !important;
    color: #1A1A1A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background .12s ease !important;
}

.jatai-card-aluna__menu:hover {
    background: #F7F5F1 !important;
}

.jatai-card-aluna__progresso {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 0.5px solid #EAE3DA !important;
}

.jatai-card-aluna__progresso-barra {
    width: 100% !important;
    height: 6px !important;
    background: #F1EBE3 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

.jatai-card-aluna__progresso-preenchido {
    height: 100% !important;
    background: #687c27; /* cor padrão — sobrescrita pela cor dinâmica inline (sem !important de propósito) */
    border-radius: 999px !important;
    transition: width .3s ease !important;
}

.jatai-card-aluna__progresso-numeros {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 7px !important;
    gap: 8px !important;
}

.jatai-card-aluna__progresso-numeros > span:first-child {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #9C8F82 !important;
}

.jatai-card-aluna__reposicoes {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: #ae74e2 !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

@media (max-width: 600px) {
    .jatai-card-aluna {
        padding: 12px 14px !important;
    }
    .jatai-card-aluna__avatar {
        width: 40px !important;
        height: 40px !important;
    }
    .jatai-card-aluna__nome {
        font-size: 13.5px !important;
    }
}

/*
=================================================
GERENCIAR TEACHERS (sheet — liga/desliga por item)
=================================================
*/

.jatai-gerenciar-teachers__lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    text-align: left !important;
    margin-top: 4px !important;
}

.jatai-gerenciar-teachers__item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    appearance: none !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #3A2E24 !important;
    width: 100% !important;
    text-align: left !important;
    transition: background .12s ease !important;
}

.jatai-gerenciar-teachers__item:hover {
    background: #F1EBE3 !important;
}

.jatai-gerenciar-teachers__item-foto {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.jatai-gerenciar-teachers__item > span:nth-child(2) {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.jatai-gerenciar-teachers__check {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 1.5px solid #E0D5CC !important;
}

.jatai-gerenciar-teachers__item--vinculada {
    background: rgba(104, 124, 39, 0.08) !important;
}

.jatai-gerenciar-teachers__item--vinculada .jatai-gerenciar-teachers__check {
    background: #687c27 !important;
    border-color: #687c27 !important;
    position: relative !important;
}

.jatai-gerenciar-teachers__item--vinculada .jatai-gerenciar-teachers__check::after {
    content: "✓" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/*
=================================================
CARD DE TEACHER ([jatai_card_teacher])
Responsivo — linha no PC/tablet, empilha no mobile.
=================================================
*/

.jatai-card-teacher {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 0.5px solid #EAE3DA !important;
    padding: 14px 16px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    box-sizing: border-box !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    cursor: pointer !important;
    transition: box-shadow .15s ease !important;
}

.jatai-card-teacher:hover {
    box-shadow: 0 5px 16px rgba(58, 46, 36, 0.18) !important;
}

.jatai-card-teacher__avatar {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

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

.jatai-card-teacher__nome {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #2C2C2A !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-card-teacher__email {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #9C8F82 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-card-teacher__contador {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #A85A3D !important;
    margin-top: 2px !important;
}

.jatai-card-teacher__abrir {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    color: #ffffff !important;
    background: #687c27 !important;
    padding: 0 !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    transition: background .12s ease !important;
}

.jatai-card-teacher__abrir:hover {
    background: #566a1f !important;
}

.jatai-card-teacher__engrenagem {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: #F7F5F1 !important;
    border: none !important;
    color: #8C7A63 !important;
    padding: 0 !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    transition: background .12s ease, color .12s ease !important;
}

.jatai-card-teacher__engrenagem:hover {
    background: #EFEAE1 !important;
    color: #4A3B2E !important;
}


/*
=================================================
FORMULÁRIO DE CRIAR AULA ([jatai_criar_aula])
Flor animada no topo (identidade da marca), botão de
expandir "material" só quando a pessoa realmente for usar.
=================================================
*/

.jatai-criar-aula__flor {
    display: flex !important;
    justify-content: center !important;
    margin: 0 0 14px !important;
}

.jatai-criar-aula__flor svg {
    animation: jatai-flor-respirar 4s ease-in-out infinite !important;
}

.jatai-criar-aula__flor-petalas {
    transform-origin: 26px 26px !important;
    animation: jatai-flor-girar 18s linear infinite !important;
}

@keyframes jatai-flor-respirar {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes jatai-flor-girar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .jatai-criar-aula__flor svg,
    .jatai-criar-aula__flor-petalas {
        animation: none !important;
    }
}

.jatai-criar-aula__toggle-material {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    background: #FBF7F2 !important;
    border: none !important;
    border-radius: 10px !important;
    color: #A85A3D !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 10px !important;
    margin-top: 18px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background .12s ease !important;
}

.jatai-criar-aula__toggle-material:hover {
    background: #F1EBE3 !important;
}

.jatai-criar-aula__toggle-material svg {
    flex-shrink: 0 !important;
    transition: transform .2s ease !important;
}

.jatai-criar-aula__toggle-material--aberto svg {
    transform: rotate(45deg) !important;
}

.jatai-criar-aula__material {
    margin-top: 8px !important;
}

.jatai-criar-aula__material .jatai-aula-editar-secao:first-child {
    margin-top: 12px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/*
=================================================
CARD DE HOMEWORK ([jatai_card_homework])
Repensado do zero — não é o card antigo (cinza/rosa,
montado no Elementor/JetEngine). Estrutura de checklist
(Apple Reminders / Google Tasks): bolha de status à
esquerda pra escanear rápido, título + legenda de status
ao centro, ações discretas à direita. Reaproveita 100% o
JS que já existe (.jatai-hw-status, .editar-hw,
.deletar-hw, .abrir-aula) — aqui só o visual muda.
=================================================
*/

.jatai-card-homework {
    display: block !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 0.5px solid #EAE3DA !important;
    padding: 4px 14px 2px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: box-shadow .15s ease !important;
}

.jatai-card-homework:hover {
    box-shadow: 0 5px 16px rgba(58, 46, 36, 0.18) !important;
}

.jatai-card-homework__titulo-secao {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 0 6px !important;
}

.jatai-card-homework__avatar-aluna {
    flex-shrink: 0 !important;
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.jatai-card-homework__titulo-secao-texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #B0A392 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Lixeira "em destaque" — deleta todas as homeworks da aula de uma vez.
   Mesma cor do título (bege) — não é um alerta vermelho, é uma ação de
   gestão normal — mas com traço bem mais grosso que as lixeiras
   individuais de cada linha, pra parecer "em negrito" e não ser
   confundida com elas mesmo tendo a mesma cor. Sem fundo/pílula: fica
   discreta até passar o mouse. */
.jatai-card-homework__deletar-todas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    background: none !important;
    color: #B0A392 !important;
    text-decoration: none !important;
    transition: background .12s ease, color .12s ease !important;
}

.jatai-card-homework__deletar-todas:hover {
    background: #F1EBE3 !important;
    color: #8A7A64 !important;
}

.jatai-card-homework__lista {
    display: flex !important;
    flex-direction: column !important;
}

.jatai-card-homework__item {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 11px 0 !important;
    border-top: 1px solid #F1EBE3 !important;
}

.jatai-card-homework__lista .jatai-card-homework__item:first-child {
    border-top: none !important;
}

/* Bolha decorativa de status — puramente visual (não recebe clique,
   quem intercepta o toque é o .jatai-hw-status ao lado). */
.jatai-card-homework__bolha {
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid #E3C9BC !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.jatai-card-homework__bolha.status-hw_realizada {
    background: #C7917C !important;
    border-color: #C7917C !important;
}

.jatai-card-homework__bolha.status-hw_aprovada {
    background: #687B27 !important;
    border-color: #687B27 !important;
    box-shadow: 0 0 0 3px rgba(104, 123, 39, .14) !important;
}

.jatai-card-homework__bolha.status-hw_realizada::after,
.jatai-card-homework__bolha.status-hw_aprovada::after {
    content: "" !important;
    width: 7px !important;
    height: 5px !important;
    border-left: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    transform: rotate(-45deg) translate(1px, -1px) !important;
}

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

.jatai-card-homework__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #2C2C2A !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* .jatai-hw-status já existe (badge de status em pílula, usado em
   outros lugares do sistema) — aqui a versão do card de homework
   mantém a pílula colorida (mesma linguagem visual do resto do
   sistema), só um pouco mais compacta. */
.jatai-card-homework__status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    cursor: default !important;
    width: fit-content !important;
}

.jatai-card-homework__status.hw_pendente {
    background: #D65D5D !important;
    color: #ffffff !important;
}

.jatai-card-homework__status.hw_realizada {
    background: #C7917C !important;
    color: #ffffff !important;
}

.jatai-card-homework__status.hw_aprovada {
    background: #687B27 !important;
    color: #ffffff !important;
}

.jatai-card-homework__status.jatai-hw-clicavel {
    cursor: pointer !important;
}

.jatai-card-homework__status.jatai-hw-clicavel:hover {
    text-decoration: underline !important;
}

.jatai-card-homework__acoes {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
}

.jatai-card-homework__acao {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: none !important;
    border: none !important;
    color: #9C8F82 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    transition: background .12s ease, color .12s ease !important;
}

.jatai-card-homework__acao:hover {
    background: #F7F5F1 !important;
    color: #4A3B2E !important;
}

.jatai-card-homework__acao--perigo:hover {
    background: #FCEBEB !important;
    color: #A32D2D !important;
}

/* O "abrir" continua existindo no DOM mesmo sem link ainda (ver
   comentário no PHP) — só fica invisível e fora do fluxo de toque. */
.jatai-card-homework__acao--oculto {
    display: none !important;
}

/*
=================================================
CARD DE MATERIAIS ([jatai_card_materiais])
3 seções expansíveis nativas (<details>/<summary> —
zero JS novo pra abrir/fechar). Mesma receita visual
do resto do sistema: branco chapado, borda fina,
sombra só no hover.
=================================================
*/

/*
Card único unificado — cabeçalho + as 3 seções (Links/Arquivos/
Homeworks) dentro do MESMO bloco (fundo/borda uma vez só), em vez de
3 caixas brancas soltas + um botão flutuando sem container, que era
como estava antes.
*/
.jatai-card-materiais {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 0.5px solid #EAE3DA !important;
    overflow: hidden !important;
}

.jatai-card-materiais__cabecalho {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #F1EBE3 !important;
}

.jatai-card-materiais__titulo {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2C2C2A !important;
}

html body button.jatai-card-materiais__editar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #FBF7F2 !important;
    border: none !important;
    color: #6B5D4F !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    appearance: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: background .12s ease, color .12s ease !important;
}

html body button.jatai-card-materiais__editar:hover {
    background: #F1EBE3 !important;
    color: #4A3B2E !important;
}

/*
Cada seção é um <details>/<summary> nativo — o navegador cuida do
abrir/fechar sozinho. O <summary> nativo vem com uma seta própria do
navegador (triângulo) que PRECISA ser removida antes da gente desenhar
a nossa — daí o reforço "html body ... details/summary" nessas regras:
é o mesmo tipo de elemento que costuma ter estilo forte de user-agent
e às vezes do próprio tema por cima, então a especificidade normal não
é suficiente pra garantir a vitória.

Diferente de antes: cada seção NÃO é mais uma caixa própria (sem
fundo/borda/raio individual) — só uma divisória fina ENTRE seções
(nunca antes da primeira, que já tem o cabeçalho acima dela).
*/
html body details.jatai-acordeon-material {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: background .15s ease !important;
}

html body details.jatai-acordeon-material + details.jatai-acordeon-material {
    border-top: 1px solid #F1EBE3 !important;
}

html body details.jatai-acordeon-material[open] {
    background: #FBF7F2 !important;
}

html body details.jatai-acordeon-material > summary.jatai-acordeon-material__cabecalho {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    list-style: none !important;
    list-style-type: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

html body details.jatai-acordeon-material > summary.jatai-acordeon-material__cabecalho::-webkit-details-marker {
    display: none !important;
}

html body details.jatai-acordeon-material > summary.jatai-acordeon-material__cabecalho::marker {
    content: "" !important;
    display: none !important;
}

.jatai-acordeon-material__seta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9C8F82 !important;
    flex-shrink: 0 !important;
    transition: transform .2s ease !important;
}

html body details.jatai-acordeon-material[open] .jatai-acordeon-material__seta {
    transform: rotate(180deg) !important;
}

.jatai-acordeon-material__icone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    background: #F1EBE3 !important;
    color: #6B5D4F !important;
    flex-shrink: 0 !important;
}

.jatai-acordeon-material__label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2C2C2A !important;
}

.jatai-acordeon-material__contagem {
    font-weight: 500 !important;
    color: #9C8F82 !important;
}

.jatai-acordeon-material__corpo {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 16px 14px 56px !important;
    gap: 2px !important;
}

.jatai-acordeon-material__corpo--homework {
    padding: 0 16px 14px !important;
}

/* O card de homework tem fundo/borda próprios pra uso avulso (ex: numa
listagem de "Todas Homeworks"). Aninhado aqui dentro do card unificado
de materiais, isso criaria uma caixa dentro da caixa — removido só
nesse contexto específico, sem tocar no uso avulso do shortcode. */
.jatai-acordeon-material__corpo--homework .jatai-card-homework {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.jatai-acordeon-material__corpo--homework .jatai-card-homework:hover {
    box-shadow: none !important;
}

.jatai-acordeon-material__vazio {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #B0A392 !important;
    padding: 4px 0 !important;
}

.jatai-acordeon-material__item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 9px 0 !important;
    border-top: 1px solid #F1EBE3 !important;
    text-decoration: none !important;
    color: inherit !important;
}

.jatai-acordeon-material__item--sem-link {
    opacity: .6 !important;
}

.jatai-acordeon-material__item-aviso {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #B0A392 !important;
    font-style: italic !important;
    flex-shrink: 0 !important;
}

.jatai-acordeon-material__corpo > .jatai-acordeon-material__item:first-child {
    border-top: none !important;
}

.jatai-acordeon-material__item-titulo {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #2C2C2A !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-acordeon-material__item-abrir {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    color: #9C8F82 !important;
    flex-shrink: 0 !important;
    transition: background .12s ease, color .12s ease !important;
}

.jatai-acordeon-material__item:hover .jatai-acordeon-material__item-abrir {
    background: #F7F5F1 !important;
    color: #4A3B2E !important;
}


/*
=================================================
REAGENDAMENTO DE AULA
Botão no card de aula (4 estados), card de solicitações
pro dashboard da teacher/gestora, e os sheets de sugerir/
escolher data. Cores reaproveitadas da paleta oficial já
existente (não inventei tom novo pra estado nenhum).
=================================================
*/

.jatai-card-aula-mobile__data-linha {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.jatai-btn-reagendar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    border: none !important;
    background: #FBF7F2 !important;
    color: #9C8F82 !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    transition: background .12s ease, color .12s ease, width .28s cubic-bezier(.4,0,.2,1) !important;
}

/* O ícone tem um "lugar" próprio, fixo — nunca se move, nunca encolhe,
não importa se o botão está colapsado (30px) ou expandido (hover). Só
o texto (.jatai-btn-reagendar__tooltip) aparece do lado dele. */
.jatai-btn-reagendar__icone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

/* Estado "disponível" (o único realmente clicável) — no hover, o
próprio botão vira uma pílula que se expande revelando o texto "Solicitar
reagendamento" dentro dele, em vez da caixinha preta flutuando por cima
(que lembrava um alerta de "proibido"). Os outros estados (bloqueado,
aguardando, sugestões) continuam com a tooltip flutuante de antes. */
html body button.jatai-btn-reagendar--disponivel {
    justify-content: flex-start !important;
    padding-left: 8px !important;
    box-sizing: border-box !important;
}

html body button.jatai-btn-reagendar--disponivel:hover {
    width: 195px !important;
}

.jatai-btn-reagendar--disponivel:hover {
    background: #F1EBE3 !important;
    color: #6B5D4F !important;
}

.jatai-btn-reagendar--disponivel .jatai-btn-reagendar__tooltip {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    max-width: 0 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    margin-left: 0 !important;
    transition: max-width .22s ease, opacity .18s ease, margin-left .22s ease !important;
}

/* Especificidade reforçada (html body button + 2 classes) de propósito
— sem isso, a regra genérica ".jatai-btn-reagendar:hover .tooltip" (lá
embaixo, mesma especificidade de :hover) empatava e vencia por vir
depois no arquivo, revertendo o texto pra position:absolute centralizado
em cima do ícone (o bug do "ícone e texto no mesmo lugar"). */
html body button.jatai-btn-reagendar--disponivel:hover .jatai-btn-reagendar__tooltip {
    max-width: 160px !important;
    opacity: 1 !important;
    margin-left: 8px !important;
    position: static !important;
    transform: none !important;
}

/* Versão ESTÁTICA — usada no sheet do calendário (ponto pedido: o
texto fica sempre visível ali, uma pilulazinha pequena, sem depender de
hover, já que no calendário faz mais sentido já mostrar a ação direto). */
html body button.jatai-btn-reagendar--estatico.jatai-btn-reagendar--disponivel {
    width: auto !important;
    justify-content: flex-start !important;
    padding: 0 12px 0 8px !important;
}

.jatai-btn-reagendar--estatico.jatai-btn-reagendar--disponivel .jatai-btn-reagendar__tooltip {
    max-width: 160px !important;
    opacity: 1 !important;
    margin-left: 6px !important;
}

.jatai-btn-reagendar--bloqueado {
    background: #FBF7F2 !important;
    color: #9C8F82 !important;
    cursor: not-allowed !important;
}

.jatai-btn-reagendar--bloqueado:hover {
    background: #FCEBEB !important;
    color: #D65D5D !important;
}

.jatai-btn-reagendar--bloqueado:hover::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 22px !important;
    height: 1.6px !important;
    background: #D65D5D !important;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
    border-radius: 2px !important;
}

.jatai-btn-reagendar--aguardando {
    background: #FBF0E4 !important;
    color: #A8763F !important;
}

.jatai-btn-reagendar--sugestoes {
    background: #ae74e2 !important;
    color: #ffffff !important;
}

.jatai-btn-reagendar__bolinha {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #D65D5D !important;
    border: 2px solid #ffffff !important;
}

/* Tooltip só no hover de verdade (desktop/tablet) — no celular, o
clique no estado bloqueado já mostra a mesma mensagem num sheet. */
.jatai-btn-reagendar__tooltip {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(4px) !important;
    background: #2C2C2A !important;
    color: #ffffff !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    padding: 7px 11px !important;
    border-radius: 8px !important;
    white-space: normal !important;
    width: max-content !important;
    max-width: 190px !important;
    text-align: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .15s ease, transform .15s ease !important;
    z-index: 30 !important;
}

.jatai-btn-reagendar:hover .jatai-btn-reagendar__tooltip {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/*
=================================================
CARD DE REAGENDAMENTOS ([jatai_card_reagendamentos])
=================================================
*/

.jatai-card-reagendamentos {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 0.5px solid #EAE3DA !important;
    overflow: hidden !important;
}

.jatai-card-reagendamentos__titulo {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2C2C2A !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #F1EBE3 !important;
}

.jatai-card-reagendamentos__vazio {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #B0A392 !important;
    padding: 14px 16px !important;
}

.jatai-card-reagendamentos__lista {
    display: flex !important;
    flex-direction: column !important;
}

html body button.jatai-reagend-linha {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #F1EBE3 !important;
    cursor: pointer !important;
    appearance: none !important;
    text-align: left !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    transition: background .12s ease !important;
}

html body .jatai-card-reagendamentos__lista button.jatai-reagend-linha:first-child {
    border-top: none !important;
}

html body button.jatai-reagend-linha:hover {
    background: #FBF7F2 !important;
}

.jatai-reagend-linha__avatar {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.jatai-reagend-linha__info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 1px !important;
}

.jatai-reagend-linha__aluna {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #2C2C2A !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-reagend-linha__aula {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #9C8F82 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-reagend-linha__data {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #B0A392 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.jatai-reagend-linha__seta {
    display: flex !important;
    align-items: center !important;
    color: #C9BDAE !important;
    flex-shrink: 0 !important;
}

.jatai-reagend-linha__status {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.jatai-reagend-linha__status--aguardando {
    background: #FBF0E4 !important;
    color: #A8763F !important;
}

.jatai-reagend-linha__status--sugestoes {
    background: #ae74e2 !important;
    color: #ffffff !important;
}

/*
=================================================
SHEETS DE REAGENDAMENTO (confirmar / sugerir / escolher)
=================================================
*/

.jatai-reagend-confirmar__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #4A3B2E !important;
    margin: 4px 0 18px !important;
}

.jatai-reagend-confirmar__acoes {
    display: flex !important;
    gap: 10px !important;
}

html body button.jatai-reagend-confirmar__nao {
    flex: 1 1 auto !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #FBF7F2 !important;
    border: none !important;
    color: #6B5D4F !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    appearance: none !important;
}

html body button.jatai-reagend-confirmar__nao:hover {
    background: #F1EBE3 !important;
}

.jatai-reagend-confirmar__sim {
    flex: 1 1 auto !important;
}

.jatai-reagend-sheet-teacher__intro,
.jatai-reagend-sheet-aluna__intro {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #6B5D4F !important;
    margin: 0 0 14px !important;
}

.jatai-reagend-sheet-teacher__linhas {
    display: flex !important;
    flex-direction: column !important;
}

.jatai-reagend-sheet-aluna__opcoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html body button.jatai-reagend-opcao {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: #FBF7F2 !important;
    border: 1px solid transparent !important;
    color: #2C2C2A !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    appearance: none !important;
    text-align: left !important;
    transition: background .12s ease, border-color .12s ease !important;
}

html body button.jatai-reagend-opcao:hover {
    background: #F1EBE3 !important;
    border-color: #E0D5CC !important;
}


/*
=================================================
REAGENDAMENTO — TELAS NOVAS (form de solicitar,
justificativa, opções de aula gravada/aguardar, sheet
de aula gravada, notificação centralizada)
=================================================
*/

.jatai-reagend-form-solicitar__form-horarios {
    margin-top: 4px !important;
}

.jatai-reagend-sheet-teacher__justificativa {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    color: #4A3B2E !important;
    background: #FBF7F2 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin: 0 0 14px !important;
}

.jatai-reagend-sheet-teacher__subtitulo {
    display: block !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6B5D4F !important;
    margin-bottom: 8px !important;
}

.jatai-reagend-sheet-teacher__ou {
    text-align: center !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #B0A392 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 14px 0 !important;
}

.jatai-reagend-sheet-teacher__form-horarios {
    margin-top: 10px !important;
}

.jatai-reagend-linha__status--novo-round {
    background: #FBF0E4 !important;
    color: #A8763F !important;
}

.jatai-reagend-linha--sem-clique {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-top: 1px solid #F1EBE3 !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

.jatai-card-reagendamentos__lista .jatai-reagend-linha--sem-clique:first-child {
    border-top: none !important;
}

.jatai-reagend-sheet-aluna__outras-opcoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #F1EBE3 !important;
}

html body button.jatai-reagend-sheet-aluna__gravada,
html body button.jatai-reagend-sheet-aluna__aguardar {
    width: 100% !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: #FBF7F2 !important;
    border: none !important;
    color: #6B5D4F !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    appearance: none !important;
    transition: background .12s ease !important;
}

html body button.jatai-reagend-sheet-aluna__gravada:hover,
html body button.jatai-reagend-sheet-aluna__aguardar:hover {
    background: #F1EBE3 !important;
}

/*
=================================================
NOTIFICAÇÃO CENTRALIZADA ([jatai_notificacoes])
=================================================
*/

.jatai-notificacoes {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #EAF3DE !important;
    border: 0.5px solid #C7D497 !important;
    border-radius: 14px !important;
    padding: 14px 40px 14px 16px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    margin-bottom: 16px !important;
}

.jatai-notificacoes__lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
}

.jatai-notificacao__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    color: #3B6D11 !important;
}

.jatai-notificacao__item svg {
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

.jatai-notificacao__texto {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #3B6D11 !important;
}

html body button.jatai-notificacoes__fechar {
    position: absolute !important;
    top: 10px !important;
    right: 10px !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;
    color: #6B8A3F !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    appearance: none !important;
    padding: 0 !important;
}

html body button.jatai-notificacoes__fechar:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}


/*
=================================================
CHAT SOBRE A ALUNA ([jatai_chat_aluna])
Estilo o mais próximo possível de um app de mensagens:
bolhas com cauda assimétrica, própria x da outra pessoa,
separador de data, área de digitar que cresce sozinha.
=================================================
*/

.jatai-chat-aluna {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 480px !important;
    background: #F7F3ED !important;
    border-radius: 14px !important;
    border: 0.5px solid #EAE3DA !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

.jatai-chat-aluna__titulo {
    padding: 14px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #F1EBE3 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2C2C2A !important;
    flex-shrink: 0 !important;
}

.jatai-chat-aluna__mensagens {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.jatai-chat-aluna__vazio {
    margin: auto !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #B0A392 !important;
    text-align: center !important;
    max-width: 220px !important;
}

.jatai-chat-aluna__separador-data {
    display: flex !important;
    justify-content: center !important;
    margin: 10px 0 !important;
}

.jatai-chat-aluna__separador-data span {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #6B5D4F !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
}

.jatai-chat-aluna__bolha-linha {
    display: flex !important;
    width: 100% !important;
}

.jatai-chat-aluna__bolha-linha--propria {
    justify-content: flex-end !important;
}

.jatai-chat-aluna__bolha-linha--outro {
    justify-content: flex-start !important;
}

.jatai-chat-aluna__bolha {
    max-width: 75% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 12px 6px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
}

/* Cauda assimétrica (um cantinho menos arredondado), igual apps de
mensagem fazem — sem precisar de nenhum SVG/triângulo extra. */
.jatai-chat-aluna__bolha-linha--propria .jatai-chat-aluna__bolha {
    background: #EFD4C8 !important;
    border-bottom-right-radius: 4px !important;
}

.jatai-chat-aluna__bolha-linha--outro .jatai-chat-aluna__bolha {
    background: #ffffff !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.jatai-chat-aluna__autor {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #A85A3D !important;
    margin-bottom: 2px !important;
}

.jatai-chat-aluna__texto {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #2C2C2A !important;
    line-height: 1.4 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.jatai-chat-aluna__hora {
    align-self: flex-end !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: rgba(0, 0, 0, 0.4) !important;
    margin-top: 2px !important;
}

.jatai-chat-aluna__form {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border-top: 1px solid #F1EBE3 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

textarea.jatai-chat-aluna__input {
    flex: 1 1 auto !important;
    resize: none !important;
    border: none !important;
    background: #F7F3ED !important;
    border-radius: 18px !important;
    padding: 9px 14px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #2C2C2A !important;
    max-height: 110px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

textarea.jatai-chat-aluna__input:focus {
    outline: none !important;
}

html body button.jatai-chat-aluna__enviar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #EFD4C8 !important;
    border: none !important;
    color: #A85A3D !important;
    cursor: pointer !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background .12s ease !important;
}

html body button.jatai-chat-aluna__enviar:hover {
    background: #E5BCA8 !important;
}

html body button.jatai-chat-aluna__enviar:disabled {
    opacity: 0.6 !important;
    cursor: default !important;
}

/*
=================================================
[jatai_lista_aulas] — filtro + grid num shortcode só,
sem depender de Listing Grid do Elementor. Cards em
coluna única (mesmo padrão de lista que já usamos em
todo o resto do sistema, não é um grid multi-coluna).
=================================================
*/

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

.jatai-lista-aulas__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 4px !important;
}

.jatai-lista-aulas__vazio {
    display: block !important;
    padding: 40px 16px !important;
    text-align: center !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #B0A392 !important;
}

/*
=================================================
[jatai_lista_pessoas] — mesmo wrapper de [jatai_lista_
aulas] (.jatai-lista-aulas, filtro + área de conteúdo),
mas o grid em si é responsivo em várias colunas — cards
de pessoa são mais compactos que o de aula, não fazem
sentido numa lista de coluna única.
=================================================
*/

.jatai-lista-pessoas__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 4px !important;
}

/* Engrenagem "geral" — só na lista de teachers, só pra quem gerencia.
Mesmo tratamento visual do botão de engrenagem individual do card,
só que com o texto explícito ao lado (não é óbvio o que uma engrenagem
sozinha, solta no topo da página, faria sem esse rótulo). */
html body button.jatai-lista-pessoas__engrenagem-geral {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 10px !important;
    margin-bottom: 18px !important;
    padding: 15px 22px !important;
    background: #F7F5F1 !important;
    border: 0.5px solid #EAE3DA !important;
    border-radius: 12px !important;
    color: #4A3B2E !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease !important;
}

html body button.jatai-lista-pessoas__engrenagem-geral:hover {
    background: #EFEAE1 !important;
    border-color: #E0D5CC !important;
}

html body button.jatai-lista-pessoas__engrenagem-geral svg {
    flex-shrink: 0 !important;
    color: #8C7A63 !important;
}

/*
=================================================
PÁGINA DA AULA INDIVIDUAL
([jatai_pagina_aula_individual])
Título + editar numa linha; vídeo à esquerda, materiais
à direita no desktop — empilha no mobile (vídeo sempre
primeiro, materiais logo depois).
=================================================
*/

.jatai-aula-individual__topo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-bottom: 18px !important;
    padding: 12px 18px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(10px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.6) !important;
    box-shadow: 0 2px 8px rgba(58, 46, 36, 0.06) !important;
    box-sizing: border-box !important;
}

.jatai-aula-individual__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #A85A3D !important;
    letter-spacing: -.005em !important;
}

.jatai-aula-individual__corpo {
    display: grid !important;
    grid-template-columns: minmax(0, 640px) 1fr !important;
    align-items: start !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body .jatai-aula-individual__video {
    width: 100% !important;
    max-width: 640px !important;
    min-width: 0 !important;
}

.jatai-aula-individual__lateral {
    width: 100% !important;
    min-width: 0 !important;
}

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

/*
=================================================
FALLBACK DE VÍDEO DO DRIVE NO MOBILE
iOS renderiza mal o player embutido do Drive dentro
de iframe — no mobile, troca o player por uma prévia
de verdade (miniatura que o próprio Drive já gera) +
botão que abre o vídeo direto no Drive, onde sempre
funciona. Só existe essa troca quando o vídeo É do
Drive (--drive) — YouTube e arquivo direto continuam
tocando embutido no mobile normalmente.
=================================================
*/

.jatai-video-mobile-drive-fallback {
    display: none !important;
}

@media (max-width: 768px) {
    .jatai-video-container--drive .jatai-video-wrapper {
        display: none !important;
    }
    .jatai-video-container--drive .jatai-video-mobile-drive-fallback {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.jatai-video-mobile-drive-fallback__preview {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding-top: 56.25% !important;
    border-radius: 12px !important;
    background-color: #000000 !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18) !important;
    box-sizing: border-box !important;
}

.jatai-video-mobile-drive-fallback__play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, .55) !important;
    color: #ffffff !important;
}

.jatai-video-mobile-drive-fallback__texto {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #9C8F82 !important;
    text-align: center !important;
}

html body a.jatai-video-mobile-drive-fallback__botao {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 46px !important;
    padding: 0 22px !important;
    background: #ffffff !important;
    border: 0.5px solid #EAE3DA !important;
    border-radius: 999px !important;
    color: #2C2C2A !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(74, 59, 46, .08) !important;
    box-sizing: border-box !important;
}

.jatai-video-mobile-drive-fallback__botao img {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/*
=================================================
SELETOR DE ALUNA COM FOTO
(jatai_c3_renderizar_seletor_aluna) — substitui o
<select> simples nos forms de criar aula/pacote. Um
"falso select": botão-gatilho que mostra a escolhida
(foto + nome), clique abre um painel com busca e a
lista de opções, cada uma com avatar de verdade.
=================================================
*/

.jatai-seletor-aluna {
    position: relative !important;
    width: 100% !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
}

html body button.jatai-seletor-aluna__gatilho {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px !important;
    background: #FBF7F2 !important;
    border: 1px solid #E0D5CC !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.jatai-seletor-aluna__gatilho-foto {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.jatai-seletor-aluna__gatilho-texto {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #B0A392 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-seletor-aluna__gatilho--preenchido .jatai-seletor-aluna__gatilho-texto {
    color: #3A2E24 !important;
    font-weight: 600 !important;
}

.jatai-seletor-aluna__gatilho-seta {
    flex-shrink: 0 !important;
    color: #9C8F82 !important;
}

.jatai-seletor-aluna__painel {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    background: #ffffff !important;
    border: 0.5px solid #EAE3DA !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(74, 59, 46, .16) !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    max-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* !important no display:flex acima vence até o atributo nativo
[hidden] do navegador (que normalmente já bastaria sozinho) — sem essa
regra extra, o painel aparecia sempre aberto, ignorando o hidden que o
JS liga/desliga. */
.jatai-seletor-aluna__painel[hidden] {
    display: none !important;
}

.jatai-seletor-aluna__busca {
    width: 100% !important;
    height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid #E0D5CC !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    color: #3A2E24 !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.jatai-seletor-aluna__opcoes {
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

html body button.jatai-seletor-aluna__opcao {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-align: left !important;
    box-shadow: none !important;
    font-family: inherit !important;
}

html body button.jatai-seletor-aluna__opcao:hover {
    background: #F7F5F1 !important;
}

.jatai-seletor-aluna__opcao-foto {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.jatai-seletor-aluna__opcao-nome {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #2C2C2A !important;
}

.jatai-seletor-aluna__vazio {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #B0A392 !important;
    text-align: center !important;
    padding: 10px !important;
}

/*
=================================================
SHEET DE ESCOLHA "O que você quer criar?"
Lista vertical (like iOS/Material action sheet) —
ícone colorido + título + descrição + seta, uma
linha por opção. Substituiu o layout antigo de 3
caixinhas lado a lado, que estourava a largura do
sheet em telas mais estreitas (aparecia até uma
barra de rolagem horizontal).
=================================================
*/

html body .jatai-hw-sheet__content.jatai-escolha-criar__content {
    max-width: 420px !important;
    text-align: left !important;
    padding: 24px !important;
}

.jatai-escolha-criar__lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

html body button.jatai-escolha-criar__linha {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 12px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-align: left !important;
    transition: background .12s ease !important;
}

html body button.jatai-escolha-criar__linha:hover {
    background: #FBF7F2 !important;
}

.jatai-escolha-criar__linha-icone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 8px rgba(58, 46, 36, .18) !important;
}

.jatai-escolha-criar__linha-corpo {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.jatai-escolha-criar__linha-titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #2C2C2A !important;
}

.jatai-escolha-criar__linha-desc {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #9C8F82 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-escolha-criar__linha-seta {
    flex-shrink: 0 !important;
    color: #D8CFC3 !important;
}

/* Ícone "Plano de Estudo" — anel colorido girando atrás do relógio,
em vez de um fundo sólido só — pra essa opção nova se destacar um
pouco mais das outras duas. */
.jatai-escolha-criar__linha-icone--anel {
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
}

.jatai-escolha-criar__relogio-anel {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg, #A85A3D, #CBA23D, #687c27, #4A90A4, #8B5FBF, #D4708C, #A85A3D) !important;
    animation: jatai-plano-anel-girar 6s linear infinite !important;
    box-shadow: 0 3px 8px rgba(58, 46, 36, .18) !important;
}

@keyframes jatai-plano-anel-girar {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.jatai-escolha-criar__linha-icone--anel svg {
    position: relative !important;
    z-index: 1 !important;
    color: #4A3B2E !important;
    background: #FBF7F2 !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    padding: 7px !important;
    box-sizing: border-box !important;
}

/*
=================================================
CARD DE PACOTES DE AULAS
([jatai_card_pacotes_aluna])
=================================================
*/

.jatai-hw-sheet__content--pacotes .jatai-card-pacotes {
    margin-top: 0 !important;
}

.jatai-card-pacotes {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    box-sizing: border-box !important;
}

.jatai-card-pacotes__titulo {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #B0A392 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.jatai-card-pacotes__vazio {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #B0A392 !important;
    background: #ffffff !important;
    border: 0.5px dashed #E0D5CC !important;
    border-radius: 14px !important;
    padding: 18px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.jatai-card-pacotes__item {
    background: #ffffff !important;
    border: 0.5px solid #EAE3DA !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.jatai-card-pacotes__item-topo {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.jatai-card-pacotes__item-status {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
}

.jatai-card-pacotes__item-data {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #9C8F82 !important;
}

.jatai-card-pacotes__item-acoes {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
}

html body button.jatai-card-pacotes__acao {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: #9C8F82 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: background .12s ease, color .12s ease !important;
}

html body button.jatai-card-pacotes__acao:hover {
    background: #F7F5F1 !important;
    color: #4A3B2E !important;
}

html body button.jatai-card-pacotes__acao--perigo:hover {
    background: #FCEBEB !important;
    color: #A32D2D !important;
}

.jatai-card-pacotes__item-numeros {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #4A3B2E !important;
}

.jatai-card-pacotes__item-migradas {
    font-weight: 500 !important;
    color: #9C8F82 !important;
    font-size: 12px !important;
}

/*
=================================================
CHECKBOX "PAGAMENTO À VISTA" — form de criar/editar
pacote.
=================================================
*/

.jatai-hw-editar-item--checkbox {
    display: flex !important;
}

.jatai-hw-editar-label-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4A3B2E !important;
    cursor: pointer !important;
}

.jatai-hw-editar-checkbox {
    width: 18px !important;
    height: 18px !important;
    accent-color: #A85A3D !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/*
=================================================
PAGAMENTO DO PACOTE — bloco dentro de cada card
([jatai_card_pacotes_aluna])
=================================================
*/

.jatai-card-pacotes__pagamento {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 0.5px dashed #EAE3DA !important;
}

.jatai-card-pacotes__pagamento--avista {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #687c27 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.jatai-card-pacotes__pagamento-icone {
    font-size: 14px !important;
}

.jatai-card-pacotes__pagamento-status {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    border: 0.5px solid transparent !important;
}

.jatai-card-pacotes__pagamento-status--pago {
    background: linear-gradient(155deg, #EFF7E7 0%, #DEEDCC 100%) !important;
    border-color: #C9E0AC !important;
    color: #4A6B37 !important;
    box-shadow: 0 1px 3px rgba(82, 140, 34, 0.1) !important;
}

.jatai-card-pacotes__pagamento-status--pendente {
    background: linear-gradient(155deg, #FDF2E9 0%, #FBE4D2 100%) !important;
    border-color: #F0D2B8 !important;
    color: #A85A3D !important;
    box-shadow: 0 1px 3px rgba(168, 90, 61, 0.1) !important;
}

.jatai-card-pacotes__pagamento-historico {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #B0A392 !important;
}

/* Versão escura do badge de status (vidro fosco + gradiente + borda
luminosa + brilho no topo — mesmo princípio "premium" usado no botão
de baixa acima, mas aqui é o span de status em si). */
html[data-jatai-tema="escuro"] body .jatai-card-pacotes__pagamento-status--pago {
    background: linear-gradient(155deg, rgba(82, 140, 34, 0.26) 0%, rgba(28, 42, 18, 0.55) 100%) !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    border-color: rgba(143, 203, 92, 0.35) !important;
    color: #A8DB78 !important;
    box-shadow:
        0 4px 14px rgba(82, 140, 34, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

html[data-jatai-tema="escuro"] body .jatai-card-pacotes__pagamento-status--pendente {
    background: linear-gradient(155deg, rgba(168, 90, 61, 0.28) 0%, rgba(60, 38, 28, 0.55) 100%) !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    border-color: rgba(232, 149, 110, 0.35) !important;
    color: #F0A87E !important;
    box-shadow:
        0 4px 14px rgba(168, 90, 61, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

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

[data-jatai-tema="escuro"] .jatai-card-pacotes__pagamento {
    border-top-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-jatai-tema="escuro"] body .jatai-card-pacotes__pagamento--avista {
    color: #8FCB5C !important;
}

html body button.jatai-card-pacotes__baixa-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 14px !important;
    background: linear-gradient(155deg, #FDF2E9 0%, #FBE4D2 100%) !important;
    border: 0.5px solid #F0D2B8 !important;
    border-radius: 999px !important;
    color: #A85A3D !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(168, 90, 61, 0.1) !important;
    transition: background .12s ease, color .12s ease !important;
}

html body button.jatai-card-pacotes__baixa-btn:hover {
    background: linear-gradient(155deg, #FBE4D2 0%, #F6D2B4 100%) !important;
    border-color: #E8C09A !important;
}

html body button.jatai-card-pacotes__baixa-btn--pago {
    background: linear-gradient(155deg, #EFF7E7 0%, #DEEDCC 100%) !important;
    border-color: #C9E0AC !important;
    color: #4A6B37 !important;
    box-shadow: 0 1px 3px rgba(82, 140, 34, 0.1) !important;
}

html body button.jatai-card-pacotes__baixa-btn--pago:hover {
    background: linear-gradient(155deg, #DEEDCC 0%, #CCE3AD 100%) !important;
    border-color: #B5D690 !important;
}

html body button.jatai-card-pacotes__baixa-btn--compacto {
    padding: 5px 11px !important;
    font-size: 11.5px !important;
}

/* Versão escura — vidro fosco com gradiente, borda luminosa e brilho
interno no topo (como luz refletindo num vidro curvo), em vez de uma
cor chapada. Fica no MESMO arquivo que a classe base (não no C6, onde
estava antes) — pra nunca depender de qual dos dois arquivos carrega
por último na página. */
html[data-jatai-tema="escuro"] body button.jatai-card-pacotes__baixa-btn {
    background: linear-gradient(155deg, rgba(168, 90, 61, 0.28) 0%, rgba(60, 38, 28, 0.55) 100%) !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    border: 0.5px solid rgba(232, 149, 110, 0.35) !important;
    color: #F0A87E !important;
    box-shadow:
        0 4px 14px rgba(168, 90, 61, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-card-pacotes__baixa-btn:hover {
    background: linear-gradient(155deg, rgba(168, 90, 61, 0.4) 0%, rgba(60, 38, 28, 0.65) 100%) !important;
    border-color: rgba(232, 149, 110, 0.5) !important;
    box-shadow:
        0 6px 18px rgba(168, 90, 61, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-card-pacotes__baixa-btn--pago {
    background: linear-gradient(155deg, rgba(82, 140, 34, 0.26) 0%, rgba(28, 42, 18, 0.55) 100%) !important;
    border-color: rgba(143, 203, 92, 0.35) !important;
    color: #A8DB78 !important;
    box-shadow:
        0 4px 14px rgba(82, 140, 34, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-card-pacotes__baixa-btn--pago:hover {
    background: linear-gradient(155deg, rgba(82, 140, 34, 0.36) 0%, rgba(28, 42, 18, 0.65) 100%) !important;
    border-color: rgba(143, 203, 92, 0.5) !important;
}

/*
=================================================
TEMA ESCURO
=================================================
*/

/* Sheet universal — usado por praticamente todo popup do sistema
(editar aula, deletar, marcar homework, reagendar, gravada...). */
[data-jatai-tema="escuro"] .jatai-hw-sheet__content {
    background: #1C1C1E !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}

[data-jatai-tema="escuro"] .jatai-hw-sheet__texto,
[data-jatai-tema="escuro"] .jatai-hw-sheet__titulo,
[data-jatai-tema="escuro"] .jatai-hw-editar-label,
[data-jatai-tema="escuro"] .jatai-reagend-confirmar__texto,
[data-jatai-tema="escuro"] .jatai-reagend-sheet-teacher__intro {
    color: #F2F2F2 !important;
}

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

/* Itens de menu dentro do sheet universal (ex: sheet "Opções da
aluna" — Abrir aluna/Onboarding/Gerenciar teachers/Gerenciar
pacotes/Arquivar/Deletar). Texto e ícone (mesma cor, via currentColor)
claros de verdade no escuro — precisa do prefixo "html...body..." pra
ter mais força que a regra equivalente duplicada em C7
(componente7-notificacoes.css, que reaproveita essa mesma classe de
sheet — sem esse prefixo, as duas regras empatam em especificidade e
qual vence depende da ordem de carregamento dos dois arquivos, que
não é garantida). */
html[data-jatai-tema="escuro"] body .jatai-menu-aula__item {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body .jatai-menu-aula__item--perigo {
    color: #FF8B8B !important;
}

html[data-jatai-tema="escuro"] body .jatai-menu-aula__item:hover {
    background: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-hw-sheet__cancelar {
    background: #2C2C2E !important;
    color: #F2F2F2 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-jatai-tema="escuro"] .jatai-hw-editar-input {
    background: #2C2C2E !important;
    color: #F2F2F2 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Card "Reagendamentos pendentes" — a MESMA estrutura é reaproveitada
pelo card de "Aulas gravadas pendentes" (mesmas classes .jatai-card-
reagendamentos/.jatai-reagend-linha*), então uma correção aqui já
cobre os dois cards de uma vez. */
[data-jatai-tema="escuro"] .jatai-card-reagendamentos {
    background: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-jatai-tema="escuro"] .jatai-card-reagendamentos__titulo {
    color: #F2F2F2 !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-jatai-tema="escuro"] .jatai-card-reagendamentos__vazio,
[data-jatai-tema="escuro"] .jatai-reagend-linha__aula,
[data-jatai-tema="escuro"] .jatai-reagend-linha__data {
    color: #98989D !important;
}

html[data-jatai-tema="escuro"] body button.jatai-reagend-linha {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-reagend-linha:hover {
    background: #242426 !important;
}

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

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

[data-jatai-tema="escuro"] .jatai-reagend-linha__status--aguardando {
    background: rgba(168, 118, 63, 0.28) !important;
    color: #E8B87D !important;
}

/*
=================================================
TEMA ESCURO — chat/anotações sobre a aluna
([jatai_chat_aluna], gestora ↔ teacher no dashboard)
=================================================
*/

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

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

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

[data-jatai-tema="escuro"] .jatai-chat-aluna__separador-data span {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #98989D !important;
}

/* Bolha própria — mantém a cor de destaque (terracota) só que num
tom escuro sólido, em vez do rosa-claro pensado pro fundo branco. */
[data-jatai-tema="escuro"] .jatai-chat-aluna__bolha-linha--propria .jatai-chat-aluna__bolha {
    background: #4A3226 !important;
}

[data-jatai-tema="escuro"] .jatai-chat-aluna__bolha-linha--outro .jatai-chat-aluna__bolha {
    background: #2C2C2E !important;
    box-shadow: none !important;
}

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

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

[data-jatai-tema="escuro"] .jatai-chat-aluna__hora {
    color: rgba(255, 255, 255, 0.4) !important;
}

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

html[data-jatai-tema="escuro"] body textarea.jatai-chat-aluna__input {
    background: #2C2C2E !important;
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body textarea.jatai-chat-aluna__input::placeholder {
    color: #6E6E73 !important;
}

html[data-jatai-tema="escuro"] body button.jatai-chat-aluna__enviar {
    background: #4A3226 !important;
    color: #E8B190 !important;
}

html[data-jatai-tema="escuro"] body button.jatai-chat-aluna__enviar:hover {
    background: #5A3D2E !important;
}

/*
=================================================
TEMA ESCURO — página da aula, card de aula, card de
materiais/homework, barra de busca
=================================================
*/

/* Barra de busca + botão "+" de criar aula */
[data-jatai-tema="escuro"] .jatai-filtro-aulas__busca-wrap,
[data-jatai-tema="escuro"] .jatai-filtro-aulas__criar {
    background: #2C2C2E !important;
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-filtro-aulas__busca-input {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-filtro-aulas__busca-input::placeholder {
    color: #6E6E73 !important;
}

/* Card de aula (mobile/desktop) */
html[data-jatai-tema="escuro"] body .jatai-card-aula-mobile {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-card-aula-mobile__titulo {
    color: #F2F2F2 !important;
}

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

[data-jatai-tema="escuro"] .jatai-card-aula-mobile__aluna-removida {
    color: #6E6E73 !important;
}

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

[data-jatai-tema="escuro"] .jatai-card-aula-mobile__rodape {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

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

[data-jatai-tema="escuro"] .jatai-card-aula-mobile__menu {
    background: #1C1C1E !important;
    color: #F2F2F2 !important;
    border-color: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-card-aula-mobile__menu:hover,
[data-jatai-tema="escuro"] .jatai-card-aula-mobile__menu:focus {
    background: #242426 !important;
}

[data-jatai-tema="escuro"] .jatai-card-aula-mobile__acao-pc {
    background: #2C2C2E !important;
    color: #C7C7CC !important;
}

[data-jatai-tema="escuro"] .jatai-card-aula-mobile__acao-pc:hover {
    background: #3A3A3C !important;
}

[data-jatai-tema="escuro"] .jatai-card-aula-mobile__acao-pc--perigo:hover {
    background: rgba(163, 45, 45, 0.24) !important;
    color: #FF8B8B !important;
}

/* Card de materiais */
html[data-jatai-tema="escuro"] body .jatai-card-materiais {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
}

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

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

html[data-jatai-tema="escuro"] body button.jatai-card-materiais__editar {
    background: #2C2C2E !important;
    color: #C7C7CC !important;
}

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

/* Card de homework */
html[data-jatai-tema="escuro"] body .jatai-card-homework {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-card-homework__titulo,
[data-jatai-tema="escuro"] .jatai-card-homework__titulo-secao-texto {
    color: #F2F2F2 !important;
}

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

[data-jatai-tema="escuro"] .jatai-card-homework__deletar-todas:hover {
    background: #3A3A3C !important;
    color: #C7C7CC !important;
}

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

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

[data-jatai-tema="escuro"] .jatai-card-homework__acao--perigo:hover {
    background: rgba(163, 45, 45, 0.24) !important;
    color: #FF8B8B !important;
}

/* Página da aula individual — topo (vidro fosco branco vira escuro) */
[data-jatai-tema="escuro"] .jatai-aula-individual__topo {
    background: rgba(28, 28, 30, 0.75) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Acordeon de materiais (Links/Arquivos, dentro do card de
materiais) — o fundo do accordion ABERTO era um bege claro fixo, e o
título de cada seção ("Links"/"Arquivos") + o nome de cada material
individual usavam uma cor escura pensada só pro fundo branco. Contra
o card já escuro por fora, esse miolo continuava claro por dentro —
exatamente onde a pessoa precisa ler o nome do material. */
html[data-jatai-tema="escuro"] body details.jatai-acordeon-material + details.jatai-acordeon-material {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-jatai-tema="escuro"] body details.jatai-acordeon-material[open] {
    background: #242426 !important;
}

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

[data-jatai-tema="escuro"] .jatai-acordeon-material__icone {
    background: #3A3A3C !important;
    color: #C7C7CC !important;
}

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

[data-jatai-tema="escuro"] .jatai-acordeon-material__contagem,
[data-jatai-tema="escuro"] .jatai-acordeon-material__vazio,
[data-jatai-tema="escuro"] .jatai-acordeon-material__item-aviso {
    color: #98989D !important;
}

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

[data-jatai-tema="escuro"] .jatai-acordeon-material__item-titulo {
    color: #F2F2F2 !important;
}

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

[data-jatai-tema="escuro"] .jatai-acordeon-material__item:hover .jatai-acordeon-material__item-abrir {
    background: #3A3A3C !important;
    color: #F2F2F2 !important;
}

/* O card de homework, quando usado AVULSO (ex: página "Todas
Homeworks"), continua com o fundo escuro próprio dele (#1C1C1E, já
coberto acima). Mas quando ele é injetado DENTRO da sanfona de
materiais, precisa ficar transparente — herdando o fundo da própria
sanfona aberta (#242426) — senão fica uma caixa mais escura dentro de
outra, destacando sem necessidade. Essa regra é mais específica que a
geral do card avulso, então vence só nesse contexto aninhado. */
html[data-jatai-tema="escuro"] body .jatai-acordeon-material__corpo--homework .jatai-card-homework {
    background: transparent !important;
}

/*
=================================================
TEMA ESCURO — filtros (pílulas + mini-sheet)

Essas classes são GENÉRICAS e reaproveitadas por TODOS os
filtros do sistema (aulas, homework, teacher, aluna) — uma
correção aqui cobre os 4 de uma vez.
=================================================
*/

[data-jatai-tema="escuro"] .jatai-filtro-pilula {
    background: #2C2C2E !important;
    color: #C7C7CC !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* A regra genérica de cima tem a mesma especificidade da pílula
dourada (duas classes cada) — sem essa versão escura própria, ela
venceria por vir depois no arquivo e apagaria o dourado de volta pro
cinza padrão no tema escuro. */
[data-jatai-tema="escuro"] .jatai-filtro-pilula--dourada.jatai-filtro-pilula--ativa {
    background: #B8923D !important;
    color: #ffffff !important;
}

[data-jatai-tema="escuro"] .jatai-filtro-pilula--dourada.jatai-filtro-pilula--ativa:hover {
    background: #A17F35 !important;
}

[data-jatai-tema="escuro"] .jatai-filtro-pilula:hover {
    background: #3A3A3C !important;
}

/* --ativa (terracota sólido) e --aberta (marrom escuro sólido) já
têm bom contraste em qualquer fundo — não precisam de ajuste. */

[data-jatai-tema="escuro"] .jatai-filtro-pilula--limpar {
    color: #6E6E73 !important;
}

[data-jatai-tema="escuro"] .jatai-filtro-pilula--limpar:hover {
    color: #D4A94A !important;
}

[data-jatai-tema="escuro"] .jatai-filtro-mini-sheet {
    background: #242426 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-jatai-tema="escuro"] .jatai-filtro-sheet-busca {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-filtro-sheet-busca::placeholder {
    color: #6E6E73 !important;
}

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

[data-jatai-tema="escuro"] .jatai-filtro-opcao:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

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

/* --ativa (terracota, com o ✓) já contrasta bem em qualquer fundo —
sem ajuste necessário. */

/* Chevron (abrir card) + botão de reagendamento */
[data-jatai-tema="escuro"] .jatai-card-aula-mobile__abrir {
    background: rgba(168, 90, 61, 0.18) !important;
    color: #E8956E !important;
}

[data-jatai-tema="escuro"] .jatai-btn-reagendar,
[data-jatai-tema="escuro"] .jatai-btn-reagendar--bloqueado {
    background: #2C2C2E !important;
    color: #98989D !important;
}

[data-jatai-tema="escuro"] .jatai-btn-reagendar--disponivel:hover {
    background: #3A3A3C !important;
    color: #C7C7CC !important;
}

[data-jatai-tema="escuro"] .jatai-btn-reagendar--bloqueado:hover {
    background: rgba(214, 93, 93, 0.2) !important;
    color: #FF8B8B !important;
}

[data-jatai-tema="escuro"] .jatai-btn-reagendar--aguardando {
    background: rgba(168, 118, 63, 0.24) !important;
    color: #E8B87D !important;
}

/* --sugestoes (roxo sólido vibrante) já contrasta bem em qualquer
fundo, e o tooltip já é escuro sólido — nenhum dos dois precisa de
ajuste. */

/* Sheet de reagendamento (confirmar / sugerir horário / escolher
opção) — botão "Não", opções de horário, campo de justificativa,
textos auxiliares, e os botões extras da aluna (gravada/aguardar). */
html[data-jatai-tema="escuro"] body button.jatai-reagend-confirmar__nao {
    background: #2C2C2E !important;
    color: #C7C7CC !important;
}

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

html[data-jatai-tema="escuro"] body button.jatai-reagend-opcao {
    background: #2C2C2E !important;
    color: #F2F2F2 !important;
}

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

[data-jatai-tema="escuro"] .jatai-reagend-sheet-teacher__justificativa {
    background: #2C2C2E !important;
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-reagend-sheet-teacher__subtitulo,
[data-jatai-tema="escuro"] .jatai-reagend-sheet-aluna__intro {
    color: #C7C7CC !important;
}

[data-jatai-tema="escuro"] .jatai-reagend-sheet-teacher__ou {
    color: #6E6E73 !important;
}

[data-jatai-tema="escuro"] .jatai-reagend-linha--sem-clique,
[data-jatai-tema="escuro"] .jatai-reagend-sheet-aluna__outras-opcoes {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-jatai-tema="escuro"] .jatai-reagend-linha__status--novo-round {
    background: rgba(168, 118, 63, 0.24) !important;
    color: #E8B87D !important;
}

html[data-jatai-tema="escuro"] body button.jatai-reagend-sheet-aluna__gravada,
html[data-jatai-tema="escuro"] body button.jatai-reagend-sheet-aluna__aguardar {
    background: #2C2C2E !important;
    color: #C7C7CC !important;
}

html[data-jatai-tema="escuro"] body button.jatai-reagend-sheet-aluna__gravada:hover,
html[data-jatai-tema="escuro"] body button.jatai-reagend-sheet-aluna__aguardar:hover {
    background: #3A3A3C !important;
}

/* Botões "+ Adicionar" (sugerir horários, adicionar horário, e os
mesmos reaproveitados em homework/link/arquivo no editar-aula) e o
botão "×" de remover uma linha de horário sugerido. */
html[data-jatai-tema="escuro"] body .jatai-aula-editar-add {
    background: #2C2C2E !important;
}

html[data-jatai-tema="escuro"] body .jatai-aula-editar-add:hover {
    background: #3A3A3C !important;
}

/* Botão "+ Adicionar material (opcional)" — o toggle que abre a
seção de homework/links/arquivos no form de criar/editar aula. Mesmo
motivo do botão acima: fundo creme claro (#FBF7F2) sobrando no sheet
escuro. */
html[data-jatai-tema="escuro"] body .jatai-criar-aula__toggle-material {
    background: #2C2C2E !important;
}

html[data-jatai-tema="escuro"] body .jatai-criar-aula__toggle-material:hover {
    background: #3A3A3C !important;
}

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

html[data-jatai-tema="escuro"] body .jatai-hw-editar-remover:hover {
    background: rgba(163, 45, 45, 0.24) !important;
    color: #FF8B8B !important;
}

/* Card de "Pacotes de aulas" (usado no Meu Perfil da aluna) */
[data-jatai-tema="escuro"] .jatai-card-pacotes__titulo {
    color: #6E6E73 !important;
}

html[data-jatai-tema="escuro"] body .jatai-card-pacotes__vazio {
    background: #1C1C1E !important;
    color: #6E6E73 !important;
    border-color: #2C2C2E !important;
}

html[data-jatai-tema="escuro"] body .jatai-card-pacotes__item {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-card-pacotes__item-data,
[data-jatai-tema="escuro"] .jatai-card-pacotes__item-migradas {
    color: #98989D !important;
}

[data-jatai-tema="escuro"] .jatai-card-pacotes__item-numeros {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body button.jatai-card-pacotes__acao {
    color: #98989D !important;
}

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

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

/* __item-status (cor sólida via role/status) já contrasta bem em
qualquer fundo — sem ajuste necessário. */

/*
=================================================
TEMA ESCURO — cards de Teacher e Aluna (listas),
engrenagem de permissões
=================================================
*/

/* Card de Teacher */
html[data-jatai-tema="escuro"] body .jatai-card-teacher {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
}

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

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

/* __contador (terracota) e __abrir (verde sólido) já contrastam bem
em qualquer fundo — sem ajuste necessário. */

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

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

html[data-jatai-tema="escuro"] body button.jatai-lista-pessoas__engrenagem-geral {
    background: #2C2C2E !important;
    color: #F2F2F2 !important;
    border-color: #3A3A3C !important;
}

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

html[data-jatai-tema="escuro"] body button.jatai-lista-pessoas__engrenagem-geral svg {
    color: #98989D !important;
}

/* Painel de permissões (sheet da engrenagem) */
[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;
}

/* Card de Aluna */
html[data-jatai-tema="escuro"] body .jatai-card-aluna {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
}

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

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

[data-jatai-tema="escuro"] .jatai-card-aluna__teacher-chip {
    background: #2C2C2E !important;
    color: #C7C7CC !important;
}

html[data-jatai-tema="escuro"] body .jatai-card-aluna__menu {
    background: #1C1C1E !important;
    color: #F2F2F2 !important;
    border-color: #2C2C2E !important;
}

html[data-jatai-tema="escuro"] body .jatai-card-aluna__menu:hover {
    background: #242426 !important;
}

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

[data-jatai-tema="escuro"] .jatai-card-aluna__progresso-barra {
    background: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-card-aluna__progresso-numeros > span:first-child {
    color: #98989D !important;
}

/* __progresso-preenchido (verde) e __reposicoes (roxo) já contrastam
bem em qualquer fundo — sem ajuste necessário. */

/* Card de teacher + engrenagem de configurações */
html[data-jatai-tema="escuro"] body .jatai-card-teacher {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
}

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

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

/* __contador (terracota) e __abrir (verde sólido) já contrastam bem
em qualquer fundo — sem ajuste necessário. */

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

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

html[data-jatai-tema="escuro"] body button.jatai-lista-pessoas__engrenagem-geral {
    background: #2C2C2E !important;
    color: #F2F2F2 !important;
    border-color: #3A3A3C !important;
}

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

html[data-jatai-tema="escuro"] body button.jatai-lista-pessoas__engrenagem-geral svg {
    color: #98989D !important;
}

/* Card de aluna */
html[data-jatai-tema="escuro"] body .jatai-card-aluna {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
}

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

[data-jatai-tema="escuro"] .jatai-card-aluna__teacher-chip {
    background: #2C2C2E !important;
    color: #C7C7CC !important;
}

html[data-jatai-tema="escuro"] body .jatai-card-aluna__menu {
    background: #242426 !important;
    color: #F2F2F2 !important;
    border-color: #3A3A3C !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

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

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

[data-jatai-tema="escuro"] .jatai-card-aluna__progresso-barra {
    background: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-card-aluna__progresso-numeros > span:first-child {
    color: #98989D !important;
}

/* __progresso-preenchido (verde) e __reposicoes (roxo sólido) já
contrastam bem em qualquer fundo — sem ajuste necessário. */

/* Seletor de aluna (usado no form de criar aula) */
html[data-jatai-tema="escuro"] body button.jatai-seletor-aluna__gatilho {
    background: #1C1C1E !important;
    border-color: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-seletor-aluna__gatilho-texto {
    color: #6E6E73 !important;
}

[data-jatai-tema="escuro"] .jatai-seletor-aluna__gatilho--preenchido .jatai-seletor-aluna__gatilho-texto {
    color: #F2F2F2 !important;
}

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

html[data-jatai-tema="escuro"] body .jatai-seletor-aluna__painel {
    background: #242426 !important;
    border-color: #3A3A3C !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

html[data-jatai-tema="escuro"] body .jatai-seletor-aluna__busca {
    background: #1C1C1E !important;
    border-color: #3A3A3C !important;
    color: #F2F2F2 !important;
}

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

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

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

/* Dropzone de arquivo (material extra da aula) */
[data-jatai-tema="escuro"] .jatai-aula-dropzone {
    background: #1C1C1E !important;
    border-color: #3A3A3C !important;
}

[data-jatai-tema="escuro"] .jatai-aula-dropzone-texto {
    color: #6E6E73 !important;
}

[data-jatai-tema="escuro"] .jatai-aula-dropzone:hover,
[data-jatai-tema="escuro"] .jatai-aula-dropzone-hover {
    background: #242426 !important;
}

[data-jatai-tema="escuro"] .jatai-aula-dropzone-enviando {
    background: #242426 !important;
}

[data-jatai-tema="escuro"] .jatai-aula-dropzone-preenchida {
    background: rgba(82, 140, 34, 0.16) !important;
    border-color: #528C22 !important;
}

[data-jatai-tema="escuro"] .jatai-aula-dropzone-preenchida .jatai-aula-dropzone-texto {
    color: #A8DB78 !important;
}

/* Sheet de escolha "O que você quer criar?" (abre pelo botão + do header) */
html[data-jatai-tema="escuro"] body button.jatai-escolha-criar__linha:hover {
    background: #242426 !important;
}

[data-jatai-tema="escuro"] .jatai-escolha-criar__linha-titulo {
    color: #F2F2F2 !important;
}

[data-jatai-tema="escuro"] .jatai-escolha-criar__linha-desc {
    color: #6E6E73 !important;
}

[data-jatai-tema="escuro"] .jatai-escolha-criar__linha-seta {
    color: #48484A !important;
}

html[data-jatai-tema="escuro"] body .jatai-escolha-criar__linha-icone--anel svg {
    background: #1C1C1E !important;
    color: #F2F2F2 !important;
}
/*
=================================================
PLANO DE ESTUDOS — lista na página de Recursos +
sheet de ver/responder
=================================================
*/

.jatai-card-planos-estudo {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

html body button.jatai-planos-estudo-item:hover {
    background: #FBF7F2 !important;
}

.jatai-planos-estudo-item__icone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: #FBF7F2 !important;
    font-size: 15px !important;
}

.jatai-planos-estudo-item__corpo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    gap: 10px !important;
    min-width: 0 !important;
}

.jatai-planos-estudo-item__textos {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
}

.jatai-planos-estudo-item__titulo {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2C2C2A !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-planos-estudo-item__semana {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #b0a79f !important;
}

.jatai-plano-estudo-semana {
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #b0a79f !important;
    margin: -8px 0 10px !important;
}

.jatai-plano-estudo-arquivo {
    display: flex !important;
    align-items: center !important;
    background: #FBF7F2 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 10px 0 !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #A85A3D !important;
    text-decoration: none !important;
}

.jatai-plano-estudo-arquivo:hover {
    background: #F1EBE3 !important;
}

.jatai-plano-estudo-textarea {
    resize: vertical !important;
    min-height: 140px !important;
    line-height: 1.5 !important;
}

.jatai-plano-estudo-erro {
    display: block !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #A32D2D !important;
    margin: -6px 0 10px !important;
}

/*
=================================================
TEMA ESCURO — Plano de Estudos
=================================================
*/

html[data-jatai-tema="escuro"] body button.jatai-planos-estudo-item:hover {
    background: #2C2C2E !important;
}

[data-jatai-tema="escuro"] .jatai-planos-estudo-item__icone {
    background: #2C2C2E !important;
}

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

html[data-jatai-tema="escuro"] body .jatai-plano-estudo-arquivo {
    background: #2C2C2E !important;
    color: #E0916F !important;
}

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

[data-jatai-tema="escuro"] .jatai-plano-estudo-erro {
    color: #FF8B8B !important;
}