/* Barra de navegação inferior compacta (Material 3 Expressive, 64px). Consome os
   tokens do app que a carrega: --surface, --border, --text, --text-muted,
   --primary, --primary-tint. Aparece só abaixo de 768px. */
.bnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: none; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--border);
    box-sizing: border-box;
}
.bnav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--text-muted); text-decoration: none;
    font-size: 11px; font-weight: 500; -webkit-tap-highlight-color: transparent;
    margin: 6px 4px; border-radius: var(--radius-control, 14px); corner-shape: squircle;
    transition: background .15s;
}
.bnav__item:hover { text-decoration: none; color: var(--text); }
.bnav__item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.bnav__ind { display: inline-flex; align-items: center; justify-content: center; height: 28px; }
.bnav__ind svg { width: 22px; height: 22px; }
.bnav__label { white-space: nowrap; }   /* com 5 itens num celular de 320px, "Meus cursos" quebrava em 2 linhas */
.bnav__item--ativo { color: var(--text); font-weight: 700; background: var(--primary-tint); }
.bnav__item--ativo .bnav__ind { color: var(--primary); }
@media (max-width: 767px) {
    .bnav { display: grid; }
}