/* ==========================================================================
   Barra de navegação inferior do aluno (mobile) — Plano 11, Fase 1.3

   Quatro itens iguais e espaçados. A bolha central de roleta foi removida,
   junto com a animação zoomRotate que só ela usava.
   Cor sempre por token do tema — a barra precisa funcionar em claro e escuro.
   ========================================================================== */

.menu-navegacao {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    z-index: 1300; /* acima do conteúdo, abaixo de dialog (1400) e popover (1600) do MudBlazor */
}

.menu-item {
    flex: 1 1 0;
    /* Sem min-width:0 um item de rótulo longo ("Loja de Benefícios") não encolhe abaixo da
       largura do próprio texto — o padrão de item flex é min-width:auto — e empurra os outros,
       desalinhando a barra inteira em tela estreita. */
    min-width: 0;
    display: flex;
    flex-direction: column; /* ícone em cima, texto embaixo */
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 2px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    border-top: 2px solid transparent;
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* O ícone nunca encolhe: é ele que identifica o item quando o rótulo é cortado. */
.menu-item .mud-icon-root {
    flex-shrink: 0;
}

    .menu-item:hover {
        color: var(--mud-palette-text-primary);
    }

.menu-item-ativo {
    color: var(--mud-palette-primary);
    border-top-color: var(--mud-palette-primary);
}

/* Uma linha só, cortada com reticências. A barra tem altura fixa (64px): deixar o rótulo quebrar
   em duas ou três linhas estoura a altura e a barra passa a cobrir o conteúdo. */
.text-menu {
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1;
    color: inherit;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Celular estreito (iPhone SE e similares): quatro rótulos não cabem legíveis em 320-360px.
   Reduzir o corpo antes de cortar preserva mais palavra por item. */
@media (max-width: 380px) {
    .text-menu {
        font-size: 0.65rem;
    }
}