/* (Feito, 23/10/2026) O PAINEL DA PÁGINA, a «segunda sidebar» (Romeu: «adicione ao lado do sidebar um espaço para outra
   sidebar em todas as outras páginas antes de começar o conteúdo… o scrollbar corre dentro»; depois: «ao invés de fazer
   reta e 100% do height faz arredondado e sem chegar a 100% e com botão de fechar e se fechar fica uma aba igual a aba
   fechada da assistente» · «deixa no middle da página»).

   Toda página da casca (FeitoWeb.Layouts.app) tem, dentro do #nb-troca e antes do <main class="pagina">, o
   <aside id="nb-lateral">, com a sidebar aberta OU recolhida. Ele é DA PÁGINA, nunca do menu (Romeu: «ele serve para
   servir o que existe na página que está sendo aberta e não some com o sidebar aberto»): o slot :lateral da página ou,
   sem ele, Layouts.lateral_padrao/1 (o título, a descrição e o que dá para pedir à assistente nela).

   O LUGAR: o documento continua rolando como sempre (âncoras, o scroll-padding da barra, o LiveView voltando ao topo).
   O <aside> é um TRILHO grudado (sticky) logo abaixo da barra, da altura da área visível, que guarda o lugar ao lado
   do conteúdo (nada fica por baixo do painel); dentro dele, o PAINEL de cantos redondos, solto das bordas e no meio da
   altura — curto quando tem pouco, até a altura do trilho menos o respiro quando tem muito —, e só o rolo de dentro
   rola, sem passar a rolagem para a página no fim da lista (overscroll-behavior). O vidro do acrílico fica no
   ::before do painel, que não rola.

   FECHADO (data-lat="fechada" no <html>, lateral.js; lembrado por pessoa no navegador, aplicado antes da pintura): o
   trilho sai, o conteúdo fica com o espaço, e a ABA #nb-lateral-aba encosta na sidebar, no meio da altura — o desenho
   da aba da assistente (.pm-aba, assistente.css), espelhado: mesma cor, tamanho, cantos, sombra e o crescer no mouse.

   LARGURA: 272 px de painel (231 px no tamanho padrão de 85 %), um pouco mais que a sidebar (248 px): até ~33 letras
   numa linha (o título de uma ação tem 20 na mediana e 29 em 90 %); o mais longo quebra em duas, sem reticências.

   CELULAR (abaixo de 900 px, e o quadro estreito da assistente): o painel não espreme o conteúdo. Começa fechado, na
   aba; aberto (data-lat-cel, sem lembrar), vem POR CIMA do conteúdo, no mesmo desenho, e fecha no ×, no Esc ou ao
   trocar de página.

   Medidas em px, como o resto da casca: o mix casca.escala as repete em escala.css vezes o --escala (A− / A+) — este
   arquivo está na lista dele, entre o navegacao.css e o temas.css (a ordem dos <link> do root). Cores: só tokens
   (claro, escuro e acrílico). Toda regra começa pelo interruptor do visual novo, de peso zero, como no
   navegacao.css. Impressão: fora do papel. */

/* ------------------------------------------------------------------ o lugar */
:where(:root[data-visual="novo"]) body.nav-lateral { --lat-l: 272px; --lat-margem: 16px; --lat-respiro: 24px; }
:where(:root[data-visual="novo"]) .nb-troca { display: flex; }
:where(:root[data-visual="novo"]) .nb-troca > .pagina { flex: 1 1 auto; min-width: 0; }
/* o trilho: guarda o lugar e gruda abaixo da barra; o painel fica no meio dele */
:where(:root[data-visual="novo"]) .nb-lateral { position: sticky; top: var(--barra-h); flex: none; align-self: flex-start;
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
  width: calc(var(--lat-l) + var(--lat-margem));
  height: calc(100vh - var(--barra-h)); height: calc(100dvh - var(--barra-h));
  padding: var(--lat-respiro) 0 var(--lat-respiro) var(--lat-margem); }
:where(:root[data-visual="novo"]) .nb-lateral-painel { position: relative; isolation: isolate; box-sizing: border-box;
  display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: 100%; overflow: hidden;
  background: var(--e-cartao, #fff); color: var(--tinta); border: 1px solid var(--linha); border-radius: 14px;
  box-shadow: var(--v-sombra-1, 0 4px 12px rgba(16, 32, 24, .08)); }
:where(:root[data-visual="novo"]) .nb-lateral-topo { flex: none; display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 18px; border-bottom: 1px solid var(--linha); }
:where(:root[data-visual="novo"]) .nb-lateral-nome { flex: 1; min-width: 0; margin: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--suave); font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; }
:where(:root[data-visual="novo"]) .nb-lateral-fechar { flex: none; width: 32px; height: 32px; display: grid;
  place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--suave);
  cursor: pointer; }
:where(:root[data-visual="novo"]) .nb-lateral-fechar:hover { background: var(--e-sutil, #eef1f0); color: var(--tinta); }
:where(:root[data-visual="novo"]) .nb-lateral-fechar:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
:where(:root[data-visual="novo"]) .nb-lateral-rolo { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--e-linha-forte, #c5d3ca) transparent;
  padding: 14px 10px 18px; }

/* ------------------------------------------------------------------ fechado: a aba (a da assistente, espelhada) */
:where(:root[data-visual="novo"]) .nb-lateral-aba { position: fixed; left: var(--sb-l); top: 50%; z-index: 840;
  transform: translateY(-50%); display: none; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 6px 11px 5px; background: var(--marca, #0b5c3f); color: #fff; border: 0; cursor: pointer;
  border-radius: 0 14px 14px 0; box-shadow: 3px 4px 16px rgba(16, 32, 24, .22);
  font: 600 .86rem/1 "Segoe UI", Roboto, system-ui, -apple-system, sans-serif; letter-spacing: .04em;
  transition: padding .18s ease, box-shadow .18s ease, left .2s ease; }
/* o círculo branco do tamanho da foto da Pamella, com o ícone da lista na cor da marca */
:where(:root[data-visual="novo"]) .nb-lateral-aba-ic { width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: #fff; color: var(--marca, #0b5c3f); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
:where(:root[data-visual="novo"]) .nb-lateral-aba-rot { writing-mode: vertical-rl; transform: rotate(180deg); }
:where(:root[data-visual="novo"]) .nb-lateral-aba:hover { padding-left: 12px; box-shadow: 5px 6px 22px rgba(16, 32, 24, .3); }
:where(:root[data-visual="novo"]) .nb-lateral-aba:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
:where(:root[data-visual="novo"][data-lat="fechada"]) .nb-lateral { display: none; }
:where(:root[data-visual="novo"][data-lat="fechada"]) .nb-lateral-aba { display: flex; }
/* com a aba à vista, o conteúdo começa depois dela (o respiro de sempre + a largura da aba): nada fica por baixo */
:where(:root[data-visual="novo"][data-lat="fechada"]) body.nav-lateral .nb-troca > .pagina { padding-left: 64px; }

/* ------------------------------------------------------------------ o conteúdo (a padrão e o de qualquer página) */
:where(:root[data-visual="novo"]) .nb-lat-cab { display: grid; gap: 4px; margin: 0 0 10px; padding: 0 8px 12px;
  border-bottom: 1px solid var(--linha); }
:where(:root[data-visual="novo"]) .nb-lat-tit { display: flex; align-items: center; gap: 8px; margin: 0;
  color: var(--tinta); font-size: 15px; font-weight: 700; line-height: 1.3; }
:where(:root[data-visual="novo"]) .nb-lat-tit > svg { color: var(--verde); }
:where(:root[data-visual="novo"]) .nb-lat-n { margin: 0; color: var(--suave); font-size: 12px; }
:where(:root[data-visual="novo"]) .nb-lat-tit2 { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px;
  padding: 0 8px; color: var(--tinta); font-size: 13px; font-weight: 700; }
:where(:root[data-visual="novo"]) .nb-lat-tit2 > svg { color: var(--verde); }
:where(:root[data-visual="novo"]) .nb-lat-dica { margin: 0 0 6px; padding: 0 8px; }
:where(:root[data-visual="novo"]) .nb-lat-grupo + .nb-lat-grupo { margin-top: 10px; }
:where(:root[data-visual="novo"]) .nb-lat-secao { display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 6px 8px 4px; color: var(--suave); font-size: 11.5px; font-weight: 600; }
:where(:root[data-visual="novo"]) .nb-lat-secao > .nb-lat-num { margin-left: auto; }
/* as ações da página: cada uma, um pedido à assistente (lateral.js), com o traço do grupo à esquerda */
:where(:root[data-visual="novo"]) .nb-lat-acoes { display: grid; gap: 1px; margin: 0 0 0 15px; padding: 0 0 0 6px;
  list-style: none; border-left: 1px solid var(--linha); }
:where(:root[data-visual="novo"]) .nb-lat-acao { display: block; padding: 4px 6px; border-radius: 6px; color: var(--tinta);
  font-size: 12.5px; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
:where(:root[data-visual="novo"]) .nb-lat-acao:hover { background: var(--verde-claro); color: var(--verde-esc); }
:where(:root[data-visual="novo"]) .nb-lat-acao:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
/* a lista mestre de uma página (links, o aberto com aria-current) */
:where(:root[data-visual="novo"]) .nb-lat-lista { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
:where(:root[data-visual="novo"]) .nb-lat-item { display: flex; align-items: flex-start; gap: 8px; min-height: 32px;
  padding: 7px 8px; border-radius: 6px; color: var(--tinta); font-size: 13px; font-weight: 500; line-height: 1.35;
  text-decoration: none; }
/* o ícone alinha com a 1ª linha do rótulo, que quebra em vez de cortar */
:where(:root[data-visual="novo"]) .nb-lat-item > svg { margin-top: 1px; color: var(--suave); }
:where(:root[data-visual="novo"]) .nb-lat-rot { flex: 1; min-width: 0; overflow-wrap: anywhere; }
:where(:root[data-visual="novo"]) .nb-lat-item:hover { background: var(--e-sutil, #eef1f0); }
:where(:root[data-visual="novo"]) .nb-lat-item:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
/* a aberta: o fundo e a cor da aba ativa da faixa (.nb-abas), e o traço da marca à esquerda (sombra interna: não
   mexe na largura) — a cor não é o único sinal, o aria-current diz ao leitor de tela */
:where(:root[data-visual="novo"]) .nb-lat-item[aria-current="page"] { background: var(--verde-claro);
  color: var(--verde-esc); box-shadow: inset 3px 0 0 var(--verde); }
:where(:root[data-visual="novo"]) .nb-lat-item[aria-current="page"] > svg { color: currentColor; }
:where(:root[data-visual="novo"]) .nb-lat-num { flex: none; min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--e-sutil, #eef1f0); color: var(--suave); font-size: 11px; font-weight: 600; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums; }
:where(:root[data-visual="novo"]) .nb-lat-vazio { margin: 8px; color: var(--suave); font-size: 13px; }

/* ------------------------------------------------------------------ celular: fechado na aba; aberto, por cima */
@media (max-width: 899px) {
  :where(:root[data-visual="novo"]) .nb-lateral { display: none; }
  :where(:root[data-visual="novo"]) .nb-lateral-aba { display: flex; }
  :where(:root[data-visual="novo"]) body.nav-lateral .nb-troca > .pagina { padding-left: 64px; }
  :where(:root[data-visual="novo"][data-lat-cel]) .nb-lateral { display: flex; position: fixed; top: var(--barra-h);
    bottom: 0; left: var(--sb-l); z-index: 1100; height: auto; max-width: calc(100vw - var(--sb-l));
    width: calc(var(--lat-l) + 2 * var(--lat-margem)); padding: var(--lat-respiro) var(--lat-margem); }
  :where(:root[data-visual="novo"][data-lat-cel]) .nb-lateral-painel {
    box-shadow: var(--v-sombra-2, 0 12px 32px rgba(16, 32, 24, .2)); }
  :where(:root[data-visual="novo"][data-lat-cel]) .nb-lateral-aba { display: none; }
}
/* no telefone, como a aba da assistente: desce para perto do pé, e o conteúdo volta à largura toda */
@media (max-width: 700px) {
  :where(:root[data-visual="novo"]) .nb-lateral-aba { top: auto; bottom: 88px; transform: none;
    padding: 8px 6px 10px 5px; }
  :where(:root[data-visual="novo"]) .nb-lateral-aba-ic { width: 34px; height: 34px; }
  :where(:root[data-visual="novo"]) body.nav-lateral .nb-troca > .pagina { padding-left: 16px; }
}

/* ------------------------------------------------------------------ acrílico: o painel e a aba viram vidro */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media screen {
    :where(:root[data-visual="novo"][data-acrilico="on"]) .nb-lateral-painel { background: transparent;
      border-color: var(--acr-borda);
      box-shadow: 0 8px 32px var(--acr-sombra), inset 0 1px 0 var(--acr-brilho); }
    :where(:root[data-visual="novo"][data-acrilico="on"]) .nb-lateral-painel::before { content: ""; position: absolute;
      inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: var(--acr-vidro);
      -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat));
      backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); }
    :where(:root[data-visual="novo"][data-acrilico="on"]) .nb-lateral-topo { border-bottom-color: var(--acr-borda); }
    /* a aba: o vidro na cor da marca da aba da assistente */
    :where(:root[data-visual="novo"][data-acrilico="on"]) .nb-lateral-aba {
      background: color-mix(in srgb, var(--marca, #0b5c3f) 82%, transparent);
      -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat));
      backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat));
      box-shadow: 3px 4px 18px rgba(16, 32, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .22); }
  }
}

/* ------------------------------------------------------------------ movimento e impressão */
@media (prefers-reduced-motion: reduce) {
  :where(:root[data-visual="novo"]) .nb-lateral-aba { transition: none; }
}
@media print {
  :where(:root[data-visual="novo"]) :is(.nb-lateral, .nb-lateral-aba) { display: none !important; }
  :where(:root[data-visual="novo"]) .nb-troca { display: block; }
}