/* ==========================================================================
   Barra lateral do Shell — trilho que expande no hover
   ==========================================================================

   Receita extraída LITERALMENTE do CSS da aplicação de referência da CDC
   ("Duplicatas CDC", tela de Estoque), lendo as regras servidas em
   27/07/2026 — não é reconstrução por observação de captura de tela.

   COMO FUNCIONA
   -------------
   O trilho fica com 72px (só ícones). Ao passar o mouse — ou ao receber
   foco de teclado — expande pra 248px mostrando rótulo e logo completa,
   em 0.18s.

   ✏️ 17/09/2026 — a referência SOBREPÕE o conteúdo; aqui ele é EMPURRADO
   junto com a barra, sem nada ficar embaixo (pedido do Sylvio, escolhido
   num protótipo aplicado sobre a tela real). Por isso a sombra lateral
   saiu: não há mais conteúdo sob a barra para ela separar. Ver seção 1.

   DETALHES QUE NÃO SÃO ÓBVIOS E VALEM PRESERVAR
   ---------------------------------------------
   1. `:has(:focus-visible)` junto com `:hover` — quem navega por teclado
      (Tab) também vê o menu expandir. Sem isso, o teclado ficaria preso num
      menu de ícones sem rótulo. Não é detalhe estético, é acessibilidade.

      ✏️ 17/09/2026: era `:focus-within`, como na referência. Com a barra
      empurrando o conteúdo, `:focus-within` prendia o menu aberto depois de
      um CLIQUE — o botão clicado guarda o foco, e a tela ficava deslocada
      até alguém clicar em outro lugar. `:focus-visible` casa com foco de
      teclado: o Tab continua abrindo, o clique do mouse não prende.

      ⚠️ MAS não basta sozinho: a primeira TECLA com o foco no item clicado o
      torna `:focus-visible` (medido: seta para baixo reabria 72 → 248px). Por
      isso o clique num item leva o foco para o conteúdo —
      `Components/Shell/FocoDoConteudo.cs`.

   2. A LOGO usa UM único arquivo de imagem pros dois estados, via
      object-fit/object-position:
        - recolhido: 44x44, `object-fit: cover` + `object-position: right
          center` → recorta e mostra só o símbolo;
        - expandido: `object-fit: contain`, largura 100% (máx. 212px),
          altura automática → mostra a logo inteira com o nome.
      Ou seja: não são dois arquivos nem troca de src no JavaScript. O
      espaço da logo (48px de altura, `overflow: hidden`) é reservado nos
      dois estados, então nada "pula" na transição.

   3. O gradiente de marca leva por cima uma textura de duas faixas
      diagonais (branco 14% e ciano 20%) via `::before` — é o que dá o
      brilho na diagonal do trilho. `pointer-events: none` pra não roubar
      clique dos itens.

   4. O item de menu é `display: grid` e MUDA de template entre estados:
      1 coluna centralizada quando recolhido → `auto minmax(0,1fr) auto`
      quando expandido (ícone | rótulo | indicador). É isso que faz o
      rótulo aparecer sem reflow brusco.
   ========================================================================== */

/* ✏️ 08/09/2026 — `.superficie-marca` acrescentada como SELETOR IRMÃO nas
   duas regras que carregam o degradê e a textura (esta e a `::before`
   logo abaixo). Nenhum valor mudou: é a mesma declaração, agora alcançada
   por quem não é a barra.

   Por quê: a tela de entrada precisa do mesmo degradê e da mesma textura
   (Delta Spec `aplicar-identidade-visual-cdc`), e a spec proíbe copiar os
   valores — "duas cópias do mesmo degradê são o começo de dois degradês
   diferentes". Uma classe de marca reusável é o caminho que o próprio
   prompt de implementação abriu. Quem quiser a superfície de marca em
   outro lugar usa `.superficie-marca`; quem quiser a barra usa
   `.app-sidebar`, que já a inclui. */
.app-sidebar,
.superficie-marca {
  position: relative;
  background: var(--brand-gradient);
  color: var(--color-surface);
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  width: 72px;
  min-height: 0;
  gap: 14px;
  padding: 12px 10px;
  overflow: hidden;
  z-index: calc(var(--z-action) + 2);
  transition: width .18s, padding .18s, gap .18s;
}

/* Textura diagonal sobre o gradiente de marca. */
.app-sidebar::before,
.superficie-marca::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .78;
  pointer-events: none;
  background:
    linear-gradient(124deg, transparent 0, transparent 46%, rgba(255, 255, 255, .14) 46%, rgba(255, 255, 255, .14) 57%, transparent 57%),
    linear-gradient(64deg, transparent 0, transparent 64%, rgba(19, 212, 195, .2) 64%, rgba(19, 212, 195, .2) 72%, transparent 72%);
}

/* Conteúdo acima da textura. */
.app-sidebar > * {
  position: relative;
  z-index: 1;
}

.app-sidebar:hover,
.app-sidebar:has(:focus-visible) {
  width: 248px;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
}

/* ---- Espaço da logo: altura fixa nos dois estados, sem "pulo" ---- */
.brand-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 48px;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.app-sidebar:hover .brand-block,
.app-sidebar:has(:focus-visible) .brand-block {
  align-items: flex-start;
}

.brand-logo {
  display: block;
  width: 44px;
  height: 44px;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  transition: width .18s, height .18s, max-width .18s;
}

.app-sidebar:hover .brand-logo,
.app-sidebar:has(:focus-visible) .brand-logo {
  width: 100%;
  max-width: 212px;
  height: auto;
  object-fit: contain;
  object-position: center center;
}

.brand-block span {
  display: block;
  color: rgba(255, 255, 255, .78);
  font-size: .78rem;
  line-height: 1.35;
}

/* ---- Itens de navegação ---- */
.app-nav {
  display: grid;
  gap: var(--space-1);
}

.nav-item {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
  min-height: 48px;
  padding: 0;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
}

.nav-item:hover,
.nav-item.is-active {
  background: rgba(255, 255, 255, .16);
  color: var(--color-surface);
}

.app-sidebar:hover .nav-item,
.app-sidebar:has(:focus-visible) .nav-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  justify-items: stretch;
  gap: var(--space-3);
  min-height: 42px;
  padding: 0 var(--space-3);
}

.nav-item small {
  color: rgba(255, 255, 255, .62);
  font-size: .72rem;
  font-weight: 700;
}

/* ---- Pé do trilho: "Trocar senha" (reset-de-senha-sem-a-ti) ----
   Grupo ancorado no rodapé, separado da navegação por um filete. Na barra
   com bloco de perfil, "Trocar senha" fica logo ACIMA dele; na do Vendedor,
   que não tem bloco, é o último item. Protótipo "Senha e Acesso — handoff
   (04-10-2026)", peça 4a. O item usa `.nav-item`: recolhido mostra só o
   ícone, e o nome acessível vem do `.nav-label` recortado, como os demais. */
.sidebar-rodape {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.sidebar-rodape .sidebar-profile {
  margin-top: 0;
}

.sidebar-filete {
  height: 1px;
  background: rgba(255, 255, 255, .18);
}

/* ---- Bloco de perfil, ancorado no rodapé do trilho ---- */
.sidebar-profile {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  margin-top: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-md);
  background: rgba(5, 42, 61, .34);
  color: var(--color-surface);
}

.sidebar-profile:hover:not(:disabled),
.sidebar-profile:focus-visible {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .28);
  color: var(--color-surface);
}

.sidebar-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: var(--color-surface);
  font-size: .76rem;
  font-weight: 850;
  line-height: 1;
}

/* ==========================================================================
   Acessibilidade — respeitar quem pediu menos animação no sistema
   ==========================================================================
   A referência não tem esta regra; é acréscimo nosso. Sem ela, a expansão
   anima mesmo pra quem marcou "reduzir movimento" no SO. O menu continua
   expandindo (a função não se perde), só deixa de deslizar.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .brand-logo {
    transition: none;
  }
}

/* ==========================================================================
   Acréscimos nossos — o que a receita extraída não trazia
   ==========================================================================

   Escrito em 08/09/2026, quando o CSS acima saiu de 43 dias de gaveta e foi
   finalmente ligado ao Shell.

   A receita de 27/07 foi lida das REGRAS SERVIDAS pela aplicação de
   referência, não do markup dela — então o que não estava numa regra
   `.app-sidebar`/`.nav-item`/`.brand-*` não veio junto. Quatro buracos
   apareceram na hora de plugar, e cada um está abaixo com a razão à vista.

   ⚠️ Nada aqui redesenha a barra. São adaptações de integração; onde
   divergirem da receita, a receita vence.
   ========================================================================== */

/* 0. `box-sizing: border-box` ------------------------------------------

   A receita declara `width: 72px` junto com `padding: 12px 10px`, e
   `width: 248px` junto com `padding: var(--space-6) var(--space-4)`. Os
   dois números só fecham com `border-box` — a aplicação de referência tem
   o reset global que quase toda folha moderna tem, e este repositório NÃO
   tem (nem app.css nem componentes-base.css declaram `box-sizing`).

   🔑 MEDIDO em Chromium, 08/09/2026, antes desta regra: a barra dava
   **92px** recolhida (72 + 20 de padding) e **280px** expandida (248 + 32).
   Ler o CSS não denuncia isso; só medir denuncia. */
.app-sidebar,
.nav-item,
.nav-group,
.sidebar-profile {
  box-sizing: border-box;
}

/* 0b. `--color-surface` dentro do trilho é TINTA, não superfície ---------

   A receita usa `var(--color-surface)` como cor de texto sobre o gradiente
   de marca em quatro lugares (`.app-sidebar`, `.nav-item:hover`/
   `.is-active`, `.sidebar-profile` e o avatar). Na aplicação de referência
   isso é branco e pronto — ela não tem tema escuro. Aqui o token INVERTE:
   #ffffff no claro, #0f172a no escuro (temas.css:91 e :254).

   🔑 MEDIDO em Chromium, 08/09/2026: no tema escuro o item ativo e as
   iniciais do avatar saíam quase pretos sobre o gradiente escuro — texto
   invisível justamente no item que marca onde o usuário está.

   O trilho é escuro NOS DOIS TEMAS (o gradiente de marca só muda de tom),
   então o que vai por cima dele é constante. Redefinir o token no escopo
   da barra conserta os quatro usos de uma vez, sem tocar na receita.

   ✏️ 08/09/2026, achado D-03 da revisão: `.superficie-marca` entrou junto.
   Ela herda `color: var(--color-surface)` da regra de marca lá em cima, e
   o antídoto estava só no escopo de `.app-sidebar` — ou seja, na tela de
   entrada, no tema escuro, a tinta voltava a inverter sobre um degradê que
   não inverte. O mesmo defeito que esta regra existe para impedir, um
   escopo ao lado. Onde o degradê de marca vai, a tinta constante vai
   junto. */
.app-sidebar,
.superficie-marca {
  --color-surface: #ffffff;
}

/* 1. O trilho acompanha a barra, e a expansão EMPURRA o conteúdo ----------

   ✏️ 17/09/2026 — até esta data a seção dizia o contrário: o trilho
   reservava 72px fixos (`flex: 0 0 72px` + `min-width: 0`) e a barra
   transbordava POR CIMA do conteúdo, como na referência. Em 08/09 o
   empurrão tinha sido tratado como defeito ("empurra a tela inteira 176px
   para a direita, a cada hover").

   O Sylvio pediu o contrário em 17/09 — nada embaixo do menu — e escolheu
   entre três variações aplicadas sobre a tela real: sobrepor (a de antes),
   empurrar no hover (esta) e empurrar só por clique. O custo conhecido, e
   aceito na escolha: a tela reflui quando o ponteiro passa pelo trilho.

   `flex: 0 0 auto` faz o trilho medir o que a barra mede; como a barra
   anima a largura em .18s, o conteúdo desliza junto em vez de saltar. */
.shell-trilho {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}

/* O conteúdo recebe foco por código quando um item do trilho troca a tela
   (`FocoDoConteudo.cs`): sem isso o item clicado guarda o foco, a primeira
   tecla o torna `:focus-visible` e o trilho reabre preso. O contorno do foco
   programático cercaria a tela inteira — e não é destino de Tab
   (`tabindex="-1"`), então não há o que sinalizar. */
.shell-trilho-corpo > section[tabindex="-1"]:focus {
  outline: none;
}

.shell-trilho > .app-sidebar {
  flex: 0 0 auto;
}

/* 2. `<button>` onde a referência tinha `<a>` ---------------------------

   `.nav-item` da receita traz `text-decoration: none` — é link. Os nossos
   itens navegam por `@onclick` em `<button>`, que chega com fundo cinza,
   borda 3D e fonte do sistema por padrão do navegador. Sem este reset a
   barra nasce com seis caixinhas cinza sobre o gradiente de marca. */
.nav-item {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* "Em breve": a referência não tem item desabilitado, e `:hover` casa com
   botão desabilitado — sem isto, item bloqueado acende ao passar o mouse
   como se fosse clicável. */
.nav-item:disabled {
  color: rgba(255, 255, 255, .45);
  cursor: not-allowed;
}

.nav-item:disabled:hover {
  background: none;
}

/* 3. O rótulo só ocupa espaço quando a barra está expandida -------------

   A receita troca `grid-template-columns` entre os estados (uma coluna
   recolhido, `auto minmax(0,1fr) auto` expandido) e não traz regra nenhuma
   sobre o rótulo. Com uma coluna só, ícone e rótulo empilham em duas linhas
   e o texto vaza no trilho de 72px — o oposto de "só ícones", que é o
   estado recolhido inteiro.

   Escondido por recorte (`clip`) e NÃO por `display: none`: recolhido, o
   botão tem só um `<svg>` dentro, e sem o texto na árvore de acessibilidade
   ele fica sem nome nenhum para leitor de tela. Assim o rótulo sai do grid
   sem sair da árvore. */
.nav-item .nav-label,
.nav-group {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.app-sidebar:hover .nav-item .nav-label,
.app-sidebar:hover .nav-group,
.app-sidebar:has(:focus-visible) .nav-item .nav-label,
.app-sidebar:has(:focus-visible) .nav-group {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  text-overflow: ellipsis;
}

/* 4. Cabeçalho "Em breve" ----------------------------------------------

   Vinha de `.shell-navgrupo`, no app.css, escrito para a barra BRANCA:
   usava `--color-disabled`, que no tema escuro é #475569 e desaparece
   dentro do gradiente de marca. Mesma escala de texto do `.nav-item small`
   da receita, que é o rótulo secundário dela. */
.app-sidebar:hover .nav-group,
.app-sidebar:has(:focus-visible) .nav-group {
  padding: var(--space-3) var(--space-3) var(--space-1);
  color: rgba(255, 255, 255, .62);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ==========================================================================
   Tela estreita — abaixo de 1100px o trilho empilha em vez de dividir a
   largura com o conteúdo
   ==========================================================================

   Escrito em 08/09/2026, achado D-04 da revisão: a folha não tinha uma
   única `@media`, e a Delta Spec exige o comportamento ("Em tela estreita o
   trilho não come o conteúdo").

   🔑 O PONTO É 1100px, e ele não foi escolhido aqui: é o que o módulo
   Vendas já usa para empilhar (`esqueleto-carregamento.css:235`,
   `localidades-vendas.css:377`). Os 900px de `entrada.css` NÃO servem de
   precedente — aquele arquivo nasceu nesta mesma mudança, copiando a
   maquete; citá-lo seria citar como precedente um número que esta mudança
   acabou de introduzir (achado N-11 da revisão de spec).

   O QUE MUDA
   ----------
   O trilho deixa de ser coluna e vira uma faixa horizontal acima do
   conteúdo, com ícone E rótulo visíveis de uma vez. Some a expansão: não
   há o que expandir quando tudo já está à mostra, e é isso que satisfaz a
   segunda metade do cenário — "a barra não fica sobre o conteúdo de forma
   permanente". Aqui ela não sobrepõe nada, em estado nenhum.

   Vale para AS DUAS barras do sistema (Shell/Gestor e Vendas/Vendedor),
   porque as duas usam estas classes — é o que a spec pede ao dizer "toda
   barra lateral de navegação".
   ========================================================================== */

/* O contêiner que põe trilho e conteúdo lado a lado. Existe como classe
   própria porque as duas barras precisam empilhar, e a do Vendedor
   declarava `display: flex` em `style=` inline — que nenhuma media query
   consegue sobrescrever (inline vence folha, sempre). */
.shell-trilho-corpo {
  display: flex;
}

@media (max-width: 1100px) {
  .shell-trilho-corpo {
    flex-direction: column;
  }

  .shell-trilho {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Os seletores de `:hover`/`:has(:focus-visible)` vêm junto de propósito: eles
     têm especificidade maior (0-2-0) que `.app-sidebar` (0-1-0), e sem
     repeti-los aqui passar o mouse ainda tentaria alargar a faixa para
     248px. */
  .app-sidebar,
  .app-sidebar:hover,
  .app-sidebar:has(:focus-visible) {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);

    /* Muitos itens não podem sumir: rolagem horizontal em vez de recorte. */
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: none;
  }

  /* A marca fica no símbolo, como no trilho recolhido — a marca inteira
     comeria a largura que os itens precisam. */
  .brand-block {
    flex: 0 0 auto;
    height: 40px;
  }

  .brand-logo,
  .app-sidebar:hover .brand-logo,
  .app-sidebar:has(:focus-visible) .brand-logo {
    width: 40px;
    max-width: none;
    height: 40px;
    object-fit: cover;
    object-position: right center;
  }

  .app-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
  }

  .nav-item,
  .app-sidebar:hover .nav-item,
  .app-sidebar:has(:focus-visible) .nav-item {
    grid-template-columns: auto auto;
    gap: var(--space-2);
    justify-items: center;
    width: auto;
    min-height: 40px;
    padding: 0 var(--space-3);
  }

  /* O rótulo volta ao fluxo em definitivo: sem estado expandido, esconder
     por recorte deixaria a faixa como um menu de ícones sem nome — o mesmo
     problema que `:has(:focus-visible)` existe para evitar no trilho vertical. */
  .nav-item .nav-label,
  .nav-group {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    white-space: nowrap;
  }

  .nav-group,
  .app-sidebar:hover .nav-group,
  .app-sidebar:has(:focus-visible) .nav-group {
    padding: 0 var(--space-2);
    color: rgba(255, 255, 255, .62);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* `margin-top: auto` ancorava no rodapé de uma coluna; em linha, o que
     ancora à direita é a margem esquerda. */
  .sidebar-profile {
    margin-top: 0;
    margin-left: auto;
  }
}

/* ==========================================================================
   Profundidade da superfície de marca no tema CLARO — o que faz o
   contraste passar
   ==========================================================================

   Escrito em 08/09/2026, achado D-07 da revisão (🔴, o único item que
   afeta quem usa o sistema hoje).

   O QUE FOI MEDIDO, e não suposto
   -------------------------------
   Contraste amostrado no PIXEL DE RENDER, com a aplicação no ar: a tinta
   de cada elemento foi tornada transparente, a tela capturada, e tomado o
   pixel mais claro dentro da caixa de cada um — que é o "tom mais claro
   que cada um efetivamente cobre" da Delta Spec. Onze itens de navegação,
   o item ativo, as iniciais do perfil e o parágrafo da tela de entrada,
   nos dois temas.

   | Onde | Tema | Pior ANTES | Pior DEPOIS |
   |---|---|---|---|
   | barra lateral | claro | **3,55:1** (rótulo do 7º item) | 5,08:1 |
   | tela de entrada | claro | **3,87:1** (parágrafo da marca) | 5,35:1 |
   | barra lateral | escuro | 5,87:1 — já passava | 5,87:1, intacto |

   🔑 A medição derrubou DUAS suposições, e as duas importam:

   1. **Onde estava o problema.** A revisão mediu sobre `#008c88`, o fim do
      degradê, "que é justamente onde o bloco de perfil fica ancorado". No
      render, o pior ponto é o MEIO: `#0a5e8f` (o azul dos 48%) coberto
      pela faixa clara da textura dá `rgb(38,131,162)`, mais claro que o
      teal do fim. Correção que mexesse só no fim do degradê deixaria os
      rótulos do meio reprovando.

   2. **Que a tela de entrada estava fora.** A primeira versão desta regra
      valia só para `.app-sidebar`, justificada por escrito com "o painel
      da entrada não tem problema de contraste". Tinha: 3,87:1 no
      parágrafo. A frase foi escrita antes de medir aquela tela — o erro
      que este projeto registra desde sempre, cometido dentro do parágrafo
      que explica a medição.

   POR QUE UM VÉU, E NÃO ESCURECER O TOKEN
   ---------------------------------------
   `--brand-gradient` é a identidade da CDC. O véu é `--color-brand-navy`
   — a própria cor da identidade, não um cinza — e só no tema CLARO: no
   escuro o pior caso é 5,87:1, e mexer ali seria estragar o que funciona.
   Escurecer o token faria o mesmo efeito visual aqui, mas mudaria a
   identidade também no tema escuro, que não pediu nada.

   Vale para AS DUAS superfícies de marca, e é isso que mantém as duas
   idênticas — o Requirement do login exige "o mesmo degradê e a mesma
   textura da barra lateral". Véu só na barra as faria divergir.

   Ele fica ACIMA da textura (`::before` pinta antes de `::after`) e ABAIXO
   do conteúdo (`.app-sidebar > *` e `.entrada-marca > *` carregam
   `z-index: 1`), então escurece o que o texto cobre sem apagar o texto, e
   o realce do item ativo continua clareando a partir do tom já corrigido.

   ⚠️ `:root:not([data-tema="escuro"])` e não `[data-tema="claro"]`: o
   claro é o padrão do sistema, e um `<html>` sem o atributo (falha de
   cookie, pré-renderização perdida) tem de cair no véu, não ficar sem.
   ========================================================================== */
:root:not([data-tema="escuro"]) .app-sidebar::after,
:root:not([data-tema="escuro"]) .superficie-marca::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-brand-navy);
  opacity: .32;
  pointer-events: none;
}