/* Correções desta casa por cima do design system.

   O `nucleo/` é porte verbatim do `mw5_admin` e não se emenda aqui — quando
   algo de lá precisa mudar, a mudança é nomeada e fica nesta folha, que
   carrega DEPOIS da `mw5.css`. Cada regra abaixo diz o que corrige e por quê,
   para que voltar atrás seja uma decisão e não um esquecimento. */

/* --- a Jakarta, servida daqui -------------------------------------------

   `nucleo/theme/brand.py` declara `--font-display: "Plus Jakarta Sans", …`
   desde sempre, e a fonte nunca apareceu em máquina nenhuma: a pilha existia,
   o arquivo não. Todo título, botão e badge caía no `system-ui` seguinte —
   Segoe UI no Windows, e a tipografia do produto era a do sistema operacional
   de quem estava olhando.

   Servida do PRÓPRIO estático, e não do CDN do Google, para manter a promessa
   escrita ao lado da constante lá: o sistema abre igual sem internet, e uma
   instalação numa rede fechada não fica com a tipografia quebrada. São 60 KB
   nos cinco pesos, entregues pelo mesmo servidor que já entrega a folha.

   Os arquivos são os mesmos que o `fully-painel` e o `organizadormw5` já
   usam — subconjunto latino, que cobre ç, ã, õ, á e o resto do português.

   `font-display: swap`: o texto aparece na hora com a fonte do sistema e
   troca quando a Jakarta chega. Sem isso o título fica invisível enquanto o
   arquivo baixa, e numa conexão ruim isso é uma tela em branco.

   A Inter (`--font-body`) continua sem arquivo, de propósito: o corpo do
   texto na fonte do sistema é legível em qualquer máquina, e o que dá
   personalidade à tela é o display. Se ela também tiver de aparecer, é o
   mesmo bloco com outro nome. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fontes/jakarta-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fontes/jakarta-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fontes/jakarta-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("fontes/jakarta-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url("fontes/jakarta-800.woff2") format("woff2"); }


/* --- a marca empilhada estourava para fora da faixa ---------------------

   Na `mw5.css`, `.side-logo` pede `width: 100%; height: 100%` dentro de um
   link que é grid com `place-items: center`. O `height: 100%` não tem contra
   o que resolver ali, então a altura do `<img>` vira a LARGURA da barra
   vezes a proporção do desenho — e a faixa do grid cresce junto.

   Com marca DEITADA isso nunca apareceu: 223px numa proporção de 4:1 dão
   ~56px, que é justo a altura reservada, e tudo coube por coincidência. A
   marca do KRONOS é EMPILHADA (proporção 1,43): os mesmos 223px pedem 156px.
   O logo descia 36px abaixo da própria faixa e a linha "ERP | CRM" caía
   sobre o azul do menu.

   A correção inverte quem manda: a ALTURA é a medida reservada (definida, e
   por isso resolvível), e a largura acompanha a proporção. `max-width: 100%`
   segura o caso extremo de uma marca muito deitada numa barra estreita.

   A altura no link é a mesma medida, dita de novo: sem ela a caixa continua
   valendo o que o conteúdo pedir, e o dia em que o arquivo não carregar a
   faixa muda de tamanho.

   Isto é defeito do design system, não regra do KRONOS: vale para qualquer
   consumidor que envie marca empilhada. A correção definitiva é no
   `mw5_admin`; esta folha é a ponte até lá. */
.side-brand > a { height: var(--logo-side-h); }
.side-logo {
  height: var(--logo-side-h);
  width: auto;
  max-width: 100%;
  max-height: none;
  margin: 0;
}

/* --- o "Recolher" fecha a barra na mesma linha do rodapé ----------------

   O design system já faz esse encontro em CIMA: `header-h` é definido como
   `sidebar-brand-h`, para que a linha sob a marca e a linha sob o cabeçalho
   sejam uma linha só atravessando a tela. Embaixo o encontro não existia — a
   faixa do "Recolher" tinha altura de conteúdo (~53px) e o rodapé tem
   `--footer-h`, então as duas bordas caíam em alturas diferentes e o canto
   inferior esquerdo ficava com um degrau.

   Vale enquanto a página couber na tela, que é quando o degrau aparece: a
   barra é `sticky` de `100dvh` e o rodapé fica no fim do documento. Com a
   página rolando, os dois deixam de ser vizinhos e o alinhamento perde o
   sentido — não há o que consertar aí.

   `align-items: center` porque a altura agora vem de fora: sem isso o botão
   encostaria no topo da faixa em vez de ficar no meio dela. */
.side-foot {
  height: var(--footer-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.side-collapsed .side-foot { padding: 0 8px; }

/* --- o desenho cresce dentro da faixa que já estava reservada -----------

   O logo aparecia pequeno no meio de um espaço grande: 84px de desenho numa
   faixa de 132px na barra, 40px numa barra de rodapé de 80px. O resto era
   respiro — quase metade da altura reservada, dos dois lados.

   Crescer pelo caminho normal não resolve, e é por isso que a correção mora
   AQUI e não em `plataforma/marca.py`: lá, `logo_areas` alimenta as DUAS
   coisas ao mesmo tempo. `nucleo/theme/tokens.py` monta
   `sidebar-brand-h = logo-side-h + sidebar-brand-pad * 2` (e o `header-h`
   copia dela, para que a linha sob a marca e a linha sob o cabeçalho sejam a
   mesma linha). Subir `logo-side-h` no `marca.py` sobe a faixa junto, o
   cabeçalho junto, e a tela inteira desce.

   O que separa os dois é que essas alturas de faixa saem RESOLVIDAS do
   Python — `calc(84px + 24px * 2)`, com os números dentro, não
   `var(--logo-side-h)`. Então redefinir a variável aqui muda o desenho e
   deixa a faixa exatamente onde estava. É a única folga que existe, e é toda
   a correção: 84 -> 108px na barra (+29%), 40 -> 56px no rodapé (+40%), com
   a mesma altura de faixa de antes.

   O respiro precisa encolher junto, senão o desenho maior transborda a
   faixa: `sidebar-brand-pad` é `var()` de verdade no `.side-brand`, então
   basta redefini-lo. O rodapé não tem padding vertical (o logo é centrado
   por `align-items`), então lá não há o que ajustar.

   `logo-footer-w` sobe junto por obrigação, não por gosto: o design system
   limita a largura com `max-width: min(var(--logo-footer-w), 100%)` sobre um
   `width: auto`. Com 72px de teto, um desenho de 56px de altura (que pede
   80px de largura) sairia espremido — a altura obedeceria e a largura não,
   e a marca ficaria estreita. O teto é a proporção 1,434 com folga.

   A entrada é o caso diferente, e por isso está junto: lá NÃO existe faixa
   reservada por fora — `.login-logo-box` é a própria caixa do token, e o
   cartão cresce com ela. Subir de 72 para 112px empurra o cartão 40px para
   baixo, e é de propósito: ele flutua centrado numa tela vazia, então não há
   nada embaixo para desalinhar. Foi o lugar onde a marca aparecia menor —
   103px de desenho numa caixa de 220px de largura.

   `tests/test_logo_do_produto.py::TestOTamanhoDoDesenho` prova que o desenho
   continua cabendo na faixa, e que os arquivos têm resolução para a medida
   nova: é o que impede alguém de subir mais um pouco e descobrir o estouro
   (ou o borrão) na tela. */
:root {
  --logo-side-h: 108px;
  --sidebar-brand-pad: 12px;
  --logo-footer-h: 56px;
  --logo-footer-w: 96px;
  --logo-login-h: 112px;
}

/* Na barra recolhida o design system limita a LARGURA a 52px sem mexer na
   altura. Com `width: auto` isso não encolhe o desenho: espreme-o — a altura
   continua valendo `--logo-side-h` e a proporção morre. Já era assim com
   84px (o desenho pede 120px de largura); com 108px pioraria. Aqui a altura
   passa a ser o teto e a largura manda, que é a mesma inversão do bloco lá
   em cima. */
.side-collapsed .side-logo {
  height: auto;
  max-height: var(--logo-side-h);
}

/* --- o botão do Excel ---------------------------------------------------

   O design system tem `primary`, `ghost` e `danger`, e nenhuma serve aqui: o
   Excel não é a ação principal da tela (essa é "Novo produto", "Novo
   usuário"), não é perigosa, e como `ghost` ela sumia — dois links cinzas ao
   lado do título, indistinguíveis do texto em volta.

   O verde é o do FORMATO, e por isso é literal e não sai de um token do
   tema: é a mesma associação que faz o PDF ser vermelho em toda tela do
   mundo, e ela funciona porque não muda com a marca do cliente. Trocá-la
   pela cor primária da instalação seria pintar a planilha de azul num
   cliente e de laranja noutro, perdendo justamente o que faz o botão ser
   achado sem leitura.

   `#1d6f42` é o verde escuro da própria marca do Excel. Sobre ele, texto
   branco dá contraste 5,9:1 — acima do 4,5:1 que a WCAG pede para texto
   normal, com folga para o peso 600 do botão. */
.btn.excel {
  background: #1d6f42;
  border-color: #1d6f42;
  color: #fff;
}
.btn.excel:hover {
  background: #175834;
  border-color: #175834;
}
/* O anel de foco do teclado sai do verde, e não do azul do tema: sobre um
   fundo verde escuro, o azul do foco quase não aparece. */
.btn.excel:focus-visible {
  outline: 2px solid #1d6f42;
  outline-offset: 2px;
}