/* VIS2 (redesenho visual, fase 2): casca nova do app logado, carregada DEPOIS do kit.css. Barra superior fina (recolher, marca, "Nova proposta",
   conta), menu lateral agrupado (#menuLateral) e, no celular, barra inferior com 4 atalhos + "Mais" (#barraInferior) que abre a lateral como folha.
   Tudo o que muda o layout fica sob body[data-nav="lateral"]: sem o atributo o app.css desenha a barra escura antiga e as abas numa linha que rola
   (reverter = apagar 1 atributo). O app.css fica intocado até a fase 8; por isso as regras daqui levam o #id para vencer as do .topo-menu.
   Mobile-first: base = celular (até 760 px), lateral a partir de 761 px (recolhida até 1099 px, ver menu-lateral.js). docs/operacao.md §71. */

/* --- Sem data-nav (layout antigo): o grupo não vira caixa e o título, os ícones, o recolher e a barra inferior não aparecem --- */
#menuLateral .ml-grupo { display: contents; }
#menuLateral .ml-grupo[hidden], .ml-grupo-tit, #menuLateral .ic, #btnRecolher, #barraInferior { display: none; }

/* --- Barra superior fina e clara --- */
[data-nav="lateral"] { --ml-topo: 56px; --ml-w: 0px; --ml-base: 0px; }
[data-nav="lateral"] #topo {
    height: var(--ml-topo); padding: 0 var(--v-space-4); gap: var(--v-space-3); flex-wrap: nowrap;
    background: var(--v-surface); color: var(--v-ink); border-bottom: 1px solid var(--v-line); box-shadow: none;
}
[data-nav="lateral"] .topo-marca { margin: 0 auto 0 0; color: var(--v-brand); }
[data-nav="lateral"] #topo [data-acao="nova-proposta"] { height: var(--v-alvo); border-radius: var(--v-radius-ctl); }
/* texto longo sem espaço (nome de 80 letras na saudação) alargava a página: no celular a janela acompanha a largura e a barra inferior fixa sai da tela */
[data-nav="lateral"] .painel-saudacao { overflow-wrap: anywhere; }

/* --- Menu lateral: os mesmos botões [data-aba]; o ícone vem depois do texto no HTML e o order o põe na frente --- */
[data-nav="lateral"] #menuLateral {
    display: flex; flex-direction: column; gap: var(--v-space-4); flex: none; align-self: auto; order: 0; min-width: 0;
    padding: var(--v-space-4) var(--v-space-3); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background: var(--v-nav-bg); border-right: 1px solid var(--v-line); mask-image: none; -webkit-mask-image: none; scroll-snap-type: none;
}
[data-nav="lateral"] #menuLateral .ml-grupo { display: grid; gap: 2px; }
[data-nav="lateral"] .ml-grupo-tit {
    display: block; margin: 0; padding: 0 var(--v-space-3) var(--v-space-1);
    font: 700 12px/1.4 var(--v-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--v-nav-ink-2);
}
[data-nav="lateral"] #menuLateral button {
    display: flex; align-items: center; gap: var(--v-space-3); width: 100%; height: auto; min-height: var(--v-alvo);
    margin: 0; padding: 0 var(--v-space-3); border: 0; border-radius: var(--v-radius-ctl); background: none;
    color: var(--v-nav-ink); font: 500 var(--v-t-sm)/1.2 var(--v-font-body); text-align: left; white-space: nowrap; scroll-snap-align: none;
}
[data-nav="lateral"] #menuLateral .ic { display: block; order: -1; width: 20px; height: 20px; color: var(--v-nav-ink-2); }
[data-nav="lateral"] #menuLateral button:hover { background: var(--v-surface-2); color: var(--v-nav-ink); filter: none; }
[data-nav="lateral"] #menuLateral [data-aba].ativo { background: var(--v-surface-2); color: var(--v-nav-ink); font-weight: 700; border: 0; }
[data-nav="lateral"] #menuLateral [data-aba].ativo .ic { color: var(--v-brand); }
[data-nav="lateral"] #menuLateral [hidden] { display: none; }

/* --- Celular (até 760 px): a lateral vira folha (aberta pelo "Mais"); barra inferior fixa, que nunca cobre o conteúdo nem os avisos --- */
@media (max-width: 760px) {
    [data-nav="lateral"] { --ml-base: calc(65px + env(safe-area-inset-bottom, 0px)); }
    [data-nav="lateral"] #menuLateral {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 2; width: min(320px, 86vw); padding-top: var(--v-space-5);
        box-shadow: var(--v-shadow-2); visibility: hidden; transform: translateX(-100%); transition: transform .2s ease, visibility 0s linear .2s;
    }
    /* abre visível na hora (o foco entra já no clique); ao fechar, o hidden espera o fim do deslize */
    [data-nav="lateral"] #menuLateral.aberto { visibility: visible; transform: none; transition: transform .2s ease; }
    /* fundo escurecido da folha: dentro do #topo (z-index 30), entre o topo e a folha; o clique nele fecha (menu-lateral.js) */
    [data-nav="lateral"].ml-folha #topo::after { content: ""; position: fixed; inset: 0; z-index: 1; background: rgba(14, 31, 43, .45); }
    /* com a folha aberta o #topo sobe acima dos toasts (z 1000; o de erro fica até fechar e cobria os últimos itens); os diálogos (2000) seguem por cima */
    [data-nav="lateral"].ml-folha #topo { z-index: 1001; }
    [data-nav="lateral"] #barraInferior {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--v-nav-bg); border-top: 1px solid var(--v-line);
    }
    [data-nav="lateral"] #barraInferior button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 56px;
        margin: 0; padding: 4px 2px; border: 0; border-radius: 12px; background: none; color: var(--v-nav-ink-2); font: 600 12px/1.2 var(--v-font-body);
    }
    [data-nav="lateral"] #barraInferior button:hover { background: var(--v-surface-2); filter: none; }
    [data-nav="lateral"] #barraInferior .ic { width: 22px; height: 22px; }
    [data-nav="lateral"] #barraInferior :is([aria-current="page"], .ativo, [aria-expanded="true"]) { background: var(--v-surface-2); color: var(--v-brand); font-weight: 700; }
    [data-nav="lateral"] #barraInferior [hidden] { display: none; }
    [data-nav="lateral"] #telaApp:not(.oculto) { padding-bottom: var(--ml-base); }
    [data-nav="lateral"] #telaApp:not(.oculto) ~ .toasts { bottom: calc(var(--ml-base) + var(--v-space-4)); }
}

/* --- A partir de 761 px: lateral fixa abaixo da barra superior; o conteúdo começa depois dela. Recolhida = 64 px, só os ícones --- */
@media (min-width: 761px) {
    [data-nav="lateral"] { --ml-w: 256px; }
    [data-nav="lateral"].ml-recolhido { --ml-w: 64px; }
    [data-nav="lateral"] #btnRecolher {
        display: inline-flex; align-items: center; justify-content: center; min-width: var(--v-alvo); min-height: var(--v-alvo);
        margin: 0; padding: 0; border: 0; border-radius: var(--v-radius-ctl); background: none; color: var(--v-ink-2);
    }
    [data-nav="lateral"] #btnRecolher:hover { background: var(--v-surface-2); color: var(--v-ink); filter: none; }
    [data-nav="lateral"] #menuLateral { position: fixed; top: var(--ml-topo); bottom: 0; left: 0; z-index: 1; width: var(--ml-w); }
    [data-nav="lateral"] #telaApp > :not(#topo, #barraInferior, .pular) { margin-left: var(--ml-w); width: auto; }
    [data-nav="lateral"].ml-recolhido #menuLateral { padding: var(--v-space-4) var(--v-space-2); }
    [data-nav="lateral"].ml-recolhido #menuLateral button { justify-content: center; gap: 0; padding: 0; font-size: 0; }
    [data-nav="lateral"].ml-recolhido .ml-grupo-tit { display: none; }
    [data-nav="lateral"].ml-recolhido #menuLateral .ml-grupo + .ml-grupo { padding-top: var(--v-space-3); border-top: 1px solid var(--v-line); }
}

@media (prefers-reduced-motion: reduce) {
    [data-nav="lateral"] #menuLateral { transition: none; }
}