/* ===========================================================================
   MENU LATERAL EM DOIS NÍVEIS  (unificação, 21/08/2026)

   Com as telas do Comercial o menu passou a 69 itens abertos de uma vez. Agora
   GRUPO abre em SUBGRUPO, e subgrupo abre nas telas. Só o ramo da tela aberta
   nasce expandido; o resto começa fechado.

   Carregado DEPOIS do brascamp-ui.css. Os seletores levam `.side-nav` na
   frente de propósito: o `.side-grupo` era um <div> e virou <button>, e sem a
   especificidade a regra antiga ganharia de volta o fundo e a borda do botão.
   =========================================================================== */

.nav-grupo, .nav-sub { display: flex; flex-direction: column; }

/* fechado é o padrão — o menu nasce curto */
.nav-filhos { display: none; }
.nav-grupo[data-aberto="1"] > .nav-filhos,
.nav-sub[data-aberto="1"]   > .nav-filhos { display: flex; flex-direction: column; gap: 2px; }

/* ------------------------------------------------------------------ nível 1 */
.side-nav .side-grupo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 12px 5px; border-radius: 9px;
}
.side-nav .side-grupo:hover { background: var(--superficie-2); color: var(--ink); }
/* a regra antiga era .side-grupo:first-child; o primeiro filho agora e o .nav-grupo */
.side-nav .nav-grupo:first-child > .side-grupo { padding-top: 4px; }

/* ------------------------------------------------------------------ nível 2 */
.side-nav .side-sub {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 7px 12px 7px 14px; border-radius: 9px;
}
.side-nav .side-sub:hover { background: var(--superficie-2); color: var(--ink); }
.side-nav .side-sub .rot { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* quantas telas tem dentro — dá para decidir se vale abrir sem abrir */
.side-nav .side-sub .qtd {
  font-size: 11px; font-weight: 700; color: var(--ink-2); opacity: .65;
  background: var(--superficie-2); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.side-nav .side-sub:hover .qtd { opacity: 1; }

/* a setinha gira ao abrir */
.side-nav .cev { font-size: 13.5px; line-height: 1; opacity: .55; transition: transform .16s ease; display: inline-block; }
.side-nav .side-grupo:hover .cev, .side-nav .side-sub:hover .cev { opacity: 1; }
.nav-grupo[data-aberto="1"] > .side-grupo .cev,
.nav-sub[data-aberto="1"] > .side-sub .cev { opacity: .85; }
.nav-grupo[data-aberto="1"] > .side-grupo .cev,
.nav-sub[data-aberto="1"]   > .side-sub   .cev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .side-nav .cev { transition: none; } }

/* tela dentro de subgrupo entra um degrau — a hierarquia se lê sem linha guia */
.side-nav .nav-sub .nav-filhos .side-item { padding-left: 26px; }

/* ------------------------------------------------------------- RAIL (72px) */
/* No rail só cabe ícone. Cabeçalho de grupo e de subgrupo somem e TUDO fica
   visível — recolher um menu que já é só ícone não ajudaria ninguém. */
.app.rail .side-nav .side-grupo, .app.rail .side-nav .side-sub { display: none; }
.app.rail .nav-filhos,
.app.rail .nav-grupo[data-aberto="0"] > .nav-filhos,
.app.rail .nav-sub[data-aberto="0"] > .nav-filhos { display: flex; flex-direction: column; }
.app.rail .side-nav .nav-sub .nav-filhos .side-item { padding-left: 0; }

/* ---------------------------------------------------- carimbo da base
   Fica abaixo do titulo da pagina, em TODAS as telas. Antes a mesma data
   aparecia duas vezes -- na linha da logo e aqui. Ficou so esta. */
.carimbo-base {
  margin: -4px 0 14px; font-size: 12.5px; color: var(--ink-3);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.carimbo-base b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- busca do menu
   28/08/2026. O menu passou de ~40 para mais de 60 telas e rolar virou o
   caminho mais lento até a tela que se usa todo dia.

   A busca casa por TOKEN: "cot frete" acha "Cotação de frete", porque cada
   pedaço do que se digitou precisa aparecer em algum lugar do caminho — título,
   grupo ou subgrupo. Casar a frase inteira obrigaria a lembrar o nome exato,
   que é justamente o que a pessoa não lembra quando vai buscar. */
.side-busca {
  position: relative; display: flex; align-items: center;
  margin: 10px 10px 2px;
}
.side-busca .sb-ic {
  position: absolute; left: 9px; width: 16px; height: 16px;
  color: var(--ink-3); pointer-events: none; display: inline-flex;
}
.side-busca .sb-ic svg { width: 16px; height: 16px; }
.side-busca input {
  width: 100%; padding: 8px 26px 8px 31px; font-size: 13.5px;
  border: 1px solid var(--borda); border-radius: var(--r-sm);
  background: var(--superficie-2); color: var(--ink);
  outline: none; transition: border-color .15s ease;
  -webkit-appearance: none; appearance: none;
}
.side-busca input:focus { border-color: var(--marca, var(--ink-3)); }
.side-busca input::-webkit-search-cancel-button { display: none; }
.side-busca .sb-x {
  position: absolute; right: 6px; border: none; background: transparent;
  color: var(--ink-3); font-size: 17px; line-height: 1; cursor: pointer;
  padding: 0 4px; border-radius: 4px;
}
.side-busca .sb-x:hover { color: var(--ink); background: var(--superficie-2); }

/* Nada encontrado: dizer o que se procurou evita a dúvida de "o menu quebrou?" */
.side-nav .nav-vazio {
  padding: 14px 12px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5;
}

/* No rail de 72px só cabe ícone — um campo de texto ali não teria como ser
   lido nem preenchido. Some, e o menu inteiro continua visível, como já era. */
.app.rail .side-busca { display: none; }

/* ===========================================================================
   TRILHO DE MÓDULOS + COLUNA DO MÓDULO  (10/09/2026, §24.73)
   O menu chegou a 132 telas em 14 grupos: 7.186 px de altura tudo aberto.
   Agora a lateral tem DUAS camadas: o trilho (um ícone por módulo, sempre
   visível) e a coluna (só as telas do módulo escolhido). É o "seletor de
   área" do Dynamics 365 e a grade de apps do Odoo. Nunca mais 132 de uma vez.
   O `.app.rail` (encolher) passa a significar "só o trilho".
   =========================================================================== */
.sidebar{flex-direction:row;width:calc(var(--rail-mod-w) + var(--sidebar-w))}
.rail-mod{width:var(--rail-mod-w);flex-shrink:0;display:flex;flex-direction:column;align-items:stretch;
  gap:2px;padding:8px 6px;border-right:1px solid var(--borda);background:var(--superficie);overflow-y:auto}
.rail-mod .mod-btn{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;height:42px;
  border-radius:8px;font-size:19px;color:var(--ink-2);position:relative;transition:.12s}
.rail-mod .mod-btn:hover{background:var(--superficie-2)}
.rail-mod .mod-btn.on{background:var(--nota-bg);box-shadow:inset 3px 0 0 var(--azul-logo)}
.rail-mod .mod-btn:focus-visible{outline:2px solid var(--azul-logo);outline-offset:-2px}
.rail-mod .mod-btn.home{font-size:15px;font-weight:800;color:var(--azul-logo)}
/* A linha sob o 🏠 e a linha sob o logo eram duas: alturas diferentes, uma com
   4px de recuo — pareciam desencontradas (Joel, 10/09). Agora o botão do
   Início tem a altura do bloco do logo (66px) e a linha vai de ponta a ponta:
   as duas viram UMA linha contínua, do trilho até a coluna. */
.rail-mod .mod-btn.home{height:66px}
.rail-mod hr{border:0;border-top:1px solid var(--borda);margin:0}
/* nome do módulo ao passar o mouse — o trilho só tem ícone */
.rail-mod .mod-btn .dica{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:var(--superficie);font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:5px;white-space:nowrap;pointer-events:none;opacity:0;transition:.12s;z-index:60}
.rail-mod .mod-btn:hover .dica,.rail-mod .mod-btn:focus-visible .dica{opacity:0}
/* balão do nome, no body (fora do overflow do trilho) — ver portal.js */
.rail-balao{position:fixed;transform:translateY(-50%);background:var(--ink);color:var(--superficie);font-size:12px;
  font-weight:700;padding:4px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:500;
  box-shadow:var(--sombra-lg);opacity:0;transition:opacity .08s}
.rail-balao::before{content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--ink);border-left:0}
.rail-balao.on{opacity:1}
.side-col{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
/* cabeçalho da coluna: qual módulo está aberto, e quantas telas tem */
.side-nav .mod-cab{display:flex;align-items:center;gap:8px;padding:6px 10px 10px;font-size:14px;font-weight:800;color:var(--ink)}
.side-nav .mod-cab .qtd{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3)}
/* na busca, a coluna mostra achados de TODOS os módulos: o nome do módulo vira o cabeçalho de cada bloco */
.side-nav .mod-bloco{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--azul-logo);padding:12px 10px 4px}
/* ★ para fixar no Início — aparece ao passar o mouse, fica quando fixado */
.side-item{position:relative}
.side-item .fav{all:unset;cursor:pointer;margin-left:auto;font-size:13px;color:var(--ink-3);opacity:0;padding:0 2px;line-height:1}
.side-item:hover .fav,.side-item .fav.on{opacity:1}.side-item .fav.on{color:var(--alerta)}
.side-item .fav:focus-visible{opacity:1;outline:2px solid var(--azul-logo);border-radius:4px}
/* encolhido = só o trilho */
.app.rail .sidebar{width:var(--rail-mod-w)}
.app.rail .side-col{display:none}
/* Coluna sobreposta quando só há trilho: mesma gaveta do celular, ancorada
   à direita do trilho. Abre no clique do módulo, fecha ao escolher tela. */
.app.rail .sidebar.aberto .side-col{display:flex;position:fixed;left:var(--rail-mod-w);top:0;height:100vh;
  width:var(--sidebar-w);z-index:120;background:var(--superficie);box-shadow:var(--sombra-lg);
  border-right:1px solid var(--borda)}
.app.rail .drawer-overlay.aberto{display:block;position:fixed;inset:0;background:rgba(16,32,58,.25);z-index:110}
/* A LATERAL SOBE ACIMA DO VÉU quando a coluna está aberta por cima. A
   `.sidebar` tem z-index 40 e é contexto de empilhamento: a coluna fixa com
   z-index 120 lá dentro continuava ABAIXO do véu (110), que está na raiz. No
   iPad a coluna abria apagada atrás do véu e o toque fechava tudo — parecia
   que "não abre" (Joel, 10/09/2026). */
.app.rail .sidebar.aberto{z-index:130}
.rail-mod .mod-btn.col{box-shadow:inset 3px 0 0 var(--borda-forte,var(--borda))}
/* celular: a gaveta continua sendo a lateral inteira, trilho + coluna */
@media (max-width:767px){.sidebar{width:min(92vw,calc(var(--rail-mod-w) + var(--sidebar-w)))}}

/* ------------------------------------------------ PALETA (Ctrl+K) */
.paleta-veu{position:fixed;inset:0;background:rgba(15,23,32,.55);z-index:900;display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.paleta-veu.aberta{display:flex}
.paleta{width:min(620px,94vw);background:var(--superficie);border:1px solid var(--borda-forte);border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;font-family:var(--fonte)}
.paleta .in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--borda)}
.paleta .in input{all:unset;flex:1;font:inherit;font-size:16px;color:var(--ink);min-width:0}
.paleta .k{border:1px solid var(--borda-forte);border-radius:5px;padding:1px 7px;font-size:11px;color:var(--ink-3);white-space:nowrap}
.paleta .res{max-height:min(56vh,420px);overflow:auto;padding:6px}
.paleta .res a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;text-decoration:none;color:var(--ink);font-size:13.5px}
.paleta .res a.on,.paleta .res a:hover{background:var(--nota-bg)}
.paleta .res a b{font-weight:700}.paleta .res a mark{background:none;color:var(--azul-logo);font-weight:800}
.paleta .res a .cam{margin-left:auto;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.paleta .vazio{padding:16px;color:var(--ink-3);font-size:13px;text-align:center}
.tb-paleta{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--borda-forte);background:var(--superficie-2);
  color:var(--ink-3);border-radius:7px;padding:4px 9px;font-size:12px;font-family:var(--fonte);cursor:pointer}
.tb-paleta:hover{color:var(--ink);border-color:var(--ink-3)}
.tb-paleta kbd{font:inherit;font-weight:700;color:var(--ink-2)}
@media (max-width:767px){.tb-paleta span{display:none}}
/* ============================== TRILHO AZUL (10/09/2026) ==============================
   Escolha do Joel entre as duas versões do artefato "Trilho Azul": azul da
   marca com ícones brancos de linha. O módulo ativo ganha o verde da marca na
   lateral; o balão do nome continua no body (`.rail-balao`). */
.rail-mod{background:var(--azul-logo);border-right:0;padding:6px 0}
.rail-mod .mod-btn{margin:0 6px;border-radius:8px;color:#fff;height:42px}
.rail-mod .mod-btn .ic-mod{width:21px;height:21px;opacity:.82}
.rail-mod .mod-btn:hover{background:rgba(255,255,255,.14)}
.rail-mod .mod-btn:hover .ic-mod,.rail-mod .mod-btn.on .ic-mod,.rail-mod .mod-btn.col .ic-mod{opacity:1}
.rail-mod .mod-btn.on{background:rgba(255,255,255,.18);box-shadow:none}
.rail-mod .mod-btn.on::before{content:"";position:absolute;left:-6px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--verde)}
.rail-mod .mod-btn.col{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.rail-mod .mod-btn.home{height:66px;margin:-6px 0 0;border-radius:0;color:#fff;background:transparent}
.rail-mod .mod-btn.home .ic-mod{width:24px;height:24px;opacity:1}
.rail-mod .mod-btn.home.on{background:rgba(255,255,255,.14)}
.rail-mod hr{border-top-color:rgba(255,255,255,.22)}
.rail-mod .mod-btn:focus-visible{outline:2px solid #fff;outline-offset:-3px}
/* o mesmo desenho no cabeçalho da coluna e nos azulejos do Início */
.side-nav .mod-cab .ic-mod{width:18px;height:18px;color:var(--azul-logo);flex:none}
.ini-tile .ic .ic-mod,.ini-chip .ic-mod{width:18px;height:18px;vertical-align:-4px;color:var(--azul-logo)}