/* App do Aluno - layout mobile-first (topo + conteúdo + barra inferior). No desktop fica centralizado em 560px. */
:root {
    --app-primaria: #2b2e9e;
    --app-primaria-escura: #1f2278;
    --app-fundo: #f3f4f8;
    --app-card: #ffffff;
    --app-texto: #1d2033;
    --app-suave: #6b7085;
    --app-borda: #e4e6ef;
    --app-nav-altura: 64px;
    --bs-primary: var(--app-primaria);
    --bs-primary-rgb: 43, 46, 158;
}

html, body { background: var(--app-fundo); color: var(--app-texto); }
body.app { min-height: 100vh; -webkit-tap-highlight-color: transparent; }

.btn-primary {
    --bs-btn-bg: var(--app-primaria);
    --bs-btn-border-color: var(--app-primaria);
    --bs-btn-hover-bg: var(--app-primaria-escura);
    --bs-btn-hover-border-color: var(--app-primaria-escura);
    --bs-btn-active-bg: var(--app-primaria-escura);
    --bs-btn-active-border-color: var(--app-primaria-escura);
    --bs-btn-disabled-bg: var(--app-primaria);
    --bs-btn-disabled-border-color: var(--app-primaria);
}
.list-group { --bs-list-group-active-bg: var(--app-primaria); --bs-list-group-active-border-color: var(--app-primaria); }
a { color: var(--app-primaria); }

/* Topo */
.app-topo {
    background: linear-gradient(135deg, var(--app-primaria), var(--app-primaria-escura));
    color: #fff;
    padding: calc(env(safe-area-inset-top) + 16px) 16px 28px;
    border-radius: 0 0 20px 20px;
}
.app-topo-linha { max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-topo-texto { min-width: 0; }
.app-saudacao { font-size: 1.35rem; font-weight: 700; }
.app-subtitulo { opacity: .85; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-aluno-chip {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; max-width: 100%;
    background: rgba(255, 255, 255, .18); color: #fff; text-decoration: none;
    padding: 4px 12px; border-radius: 999px; font-size: .85rem;
}
.app-aluno-chip:hover { color: #fff; background: rgba(255, 255, 255, .28); }
.app-aluno-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Conteúdo */
.app-conteudo {
    max-width: 560px; margin: -14px auto 0; padding: 0 16px;
    padding-bottom: calc(var(--app-nav-altura) + env(safe-area-inset-bottom) + 20px);
}
.app-card {
    background: var(--app-card); border-radius: 16px; padding: 16px; margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(20, 22, 60, .06);
}
.app-card-titulo { font-weight: 600; color: var(--app-primaria); margin-bottom: 6px; }

.app-menu { border-radius: 16px; overflow: hidden; }
.app-menu .list-group-item { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }

.app-avatar {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
    background: #e8e9f8; color: var(--app-primaria); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.app-avatar-lg { width: 56px; height: 56px; flex-basis: 56px; font-size: 1.4rem; }
.list-group-item.active .app-avatar { background: rgba(255, 255, 255, .25); color: #fff; }

.min-w-0 { min-width: 0; }
.app-vazio-icone { font-size: 2.4rem; color: var(--app-suave); display: block; margin-bottom: 8px; }

/* Progresso */
.app-progresso { height: 10px; border-radius: 999px; background: #e8e9f2; }
.app-progresso .progress-bar { background: var(--app-primaria); border-radius: 999px; }
.app-progresso-fino { height: 6px; }

/* Abas (Módulos / Aulas / Testes) */
.app-abas { background: #fff; border-radius: 12px; padding: 4px; gap: 4px; box-shadow: 0 1px 3px rgba(20, 22, 60, .06); }
.app-abas .nav-item { flex: 1; }
.app-abas .nav-link { width: 100%; border-radius: 10px; color: var(--app-suave); font-size: .9rem; padding: 8px 4px; }
.app-abas .nav-link.active { background: var(--app-primaria); color: #fff; }

/* Linha de lista em cartão (módulo, teste) */
.app-item { display: flex; align-items: center; }
.app-nota { font-size: 1.3rem; font-weight: 700; color: var(--app-primaria); line-height: 1; }
.app-nota-pequena { font-weight: 600; color: var(--app-primaria); }
.app-nota-badge { min-width: 48px; text-align: center; padding: 8px 10px; border-radius: 10px; font-weight: 700; margin-left: 12px; }

.app-acordeao { --bs-accordion-border-radius: 16px; --bs-accordion-inner-border-radius: 16px; --bs-accordion-active-bg: #eef0fb; --bs-accordion-active-color: var(--app-primaria); --bs-accordion-btn-focus-box-shadow: none; }
.app-acordeao .accordion-item { border: 0; margin-bottom: 10px; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(20, 22, 60, .06); }

/* Financeiro */
.app-indicador { background: #f6f7fb; border-radius: 12px; padding: 10px 4px; }
.app-indicador-numero { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.app-parcela-linha { gap: 8px; }
.app-parcela-linha .badge { font-size: .7rem; }
.app-qrcode { width: 220px; max-width: 100%; margin-top: 8px; background: #fff; padding: 8px; border-radius: 12px; }

/* Agenda */
.app-data-bloco { width: 56px; flex: 0 0 56px; text-align: center; background: #eef0fb; border-radius: 12px; padding: 6px 0; color: var(--app-primaria); }
.app-data-dia { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.app-data-mes { font-size: .75rem; text-transform: uppercase; }
.app-lista-linhas li { padding: 8px 0; border-bottom: 1px solid var(--app-borda); }
.app-lista-linhas li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Barra inferior */
.app-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; justify-content: space-around;
    background: #fff; border-top: 1px solid var(--app-borda);
    height: calc(var(--app-nav-altura) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
}
.app-nav-item {
    flex: 1; max-width: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: .72rem; color: var(--app-suave); text-decoration: none;
}
.app-nav-item i { font-size: 1.3rem; }
.app-nav-item.ativo { color: var(--app-primaria); font-weight: 600; }
.app-nav-item.em-breve { opacity: .4; }

/* Telas de conta (entrar, criar senha, escolher aluno) */
body.app-conta { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.app-conta-caixa {
    width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 28px 22px;
    box-shadow: 0 6px 24px rgba(20, 22, 60, .08);
}
.app-conta-marca { text-align: center; margin-bottom: 18px; }
.app-conta-marca img { max-width: 180px; max-height: 80px; object-fit: contain; }
.app-conta-nome { font-weight: 700; color: var(--app-primaria); margin-top: 6px; }
.app-lista-alunos .list-group-item { border-radius: 0; }
.app-lista-alunos form + form .list-group-item { border-top-width: 0; }
.app-lista-alunos form:first-child .list-group-item { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.app-lista-alunos form:last-child .list-group-item { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

/* Documentos */
.app-documento-icone { font-size: 1.8rem; color: var(--app-primaria); }
/* Título de seção como primeiro item da página: desce para não ficar atrás do topo arredondado */
.app-conteudo > .app-card-titulo:first-child { padding-top: 26px; }

/* Início */
.app-inicio-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--app-texto); text-decoration: none; }
.app-inicio-cabecalho .bi-chevron-right { color: var(--app-suave); }
.app-anel {
    --tamanho: 92px;
    width: var(--tamanho); height: var(--tamanho); flex: 0 0 var(--tamanho); border-radius: 50%;
    background: conic-gradient(var(--app-primaria) calc(var(--progresso) * 1%), #e8e9f2 0);
    display: flex; align-items: center; justify-content: center;
}
.app-anel-centro {
    width: calc(var(--tamanho) - 18px); height: calc(var(--tamanho) - 18px); border-radius: 50%; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.app-anel-valor { font-size: 1.25rem; font-weight: 700; color: var(--app-primaria); }
.app-anel-rotulo { font-size: .68rem; color: var(--app-suave); }
.app-inicio-aviso { display: flex; align-items: center; padding: 8px 0; border-top: 1px solid var(--app-borda); }
.app-inicio-cabecalho + .app-inicio-aviso { border-top: 0; padding-top: 0; }

/* Avisos */
.app-aviso-marca { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; margin-right: 12px; background: transparent; }
.app-aviso.nao-lido .app-aviso-marca { background: var(--app-primaria); }
.app-aviso-titulo { font-weight: 500; }
.app-aviso.nao-lido .app-aviso-titulo { font-weight: 700; }
.app-aviso-resumo { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.app-aviso-mensagem { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.app-nav-item { position: relative; }
.app-nav-badge {
    position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #dc3545; color: #fff; font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.app-sino { position: relative; color: #fff; font-size: 1.4rem; text-decoration: none; }
.app-sino:hover { color: #fff; }
.app-sino .app-nav-badge { top: -4px; left: auto; right: -8px; border: 2px solid var(--app-primaria-escura); }

/* Meus dados */
.app-foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(20, 22, 60, .15); }
.app-foto-inicial { width: 96px; height: 96px; font-size: 2.4rem; margin: 0 auto; }
.app-dado { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--app-borda); }
.app-dado:last-child { border-bottom: 0; padding-bottom: 0; }
.app-dado > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Notificação no celular */
.app-push-icone { font-size: 1.5rem; color: var(--app-primaria); line-height: 1; }
.app-push-cartao { border: 1px solid #dfe1f7; }
.app-push-chave { width: 2.8em !important; height: 1.5em; cursor: pointer; }
.app-push-chave:checked { background-color: var(--app-primaria); border-color: var(--app-primaria); }