/* ============================================================================================================
   hz-barra.css — A BARRA DO TOPO, uma só (acabamento, 12/10/2026).
   Pedido do dono: «a barra lá em cima está com tamanhos diferentes, faça todas iguais». Antes cada tela tinha a
   sua: Contratos 62 px com abas, Pricing/Risco/Valuation/Câmbio… 80 px com o título no meio, o Manual 50 px escuro
   com «← minhas ferramentas», o Câmbio sem a marca; no site da empresa o chip com o nome da empresa (posto por
   cima, «fixed») caía EM CIMA do «? Manual».
   Agora, em TODA tela do sistema (a faixa leva a classe hz-barra), na mesma ordem e no mesmo lugar:
       [símbolo + MARCA] | TÍTULO DA FERRAMENTA   [abas, só Contratos e Administração]   … [? Manual] [chip da empresa] [crachá]
   · altura 64 px (56 px até 560 px de largura) + o respiro do entalhe no app; tudo centrado na mesma linha;
   · nada se sobrepõe: as peças são da mesma fileira (flex), o chip corta o nome com reticências (o nome inteiro
     fica no title); abas que não cabem descem para uma faixa logo abaixo (manual.js mede e liga hz-abas-abaixo).
   Só a TELA (nada aqui vale para o papel: cada página já esconde a faixa na impressão).
   Carrega por ÚLTIMO no <head> (depois do <style> da página e do app-shell.css): é a última palavra sobre a faixa,
   por isso o !important — as páginas tinham regras de posição (absolute/top:50%/translate) com especificidade alta.
   ============================================================================================================ */
@media screen{
/* .hz-q-flex: o manual.js marca o pai do crachá para pôr o «?» ao lado; quando o pai é a própria faixa, ela continua flex de largura inteira */
.hz-barra.hz-q-flex{display:flex!important}
.hz-barra{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;
  justify-content:flex-start!important;gap:0 12px!important;box-sizing:border-box!important;
  height:calc(64px + env(safe-area-inset-top, 0px))!important;min-height:0!important;max-height:none!important;
  padding:env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px))!important;
  background:#16494D!important;color:#fff!important;text-align:left!important;
  box-shadow:0 4px 18px rgba(15,53,56,.25)!important;z-index:50!important;line-height:normal;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}   /* a mesma espessura de letra em toda tela (umas páginas suavizavam, outras não) */
/* o que sobra no meio empurra o grupo da direita (o «?», o chip e o crachá) para a ponta */
.hz-barra::after{content:"";display:block;order:5;flex:1 1 0;min-width:0;height:1px}

/* ---- símbolo + marca (a de cada site: o gerador dos sites de empresa troca a da casa pela do Horizon) ---- */
.hz-barra>.brand{order:1;flex:none;display:flex!important;align-items:center;margin:0!important;padding:0!important}
.hz-barra a.logohome,.hz-barra>.brand>a{order:1;flex:none;position:static!important;transform:none!important;
  top:auto!important;left:auto!important;margin:0!important;padding:0!important;
  display:inline-flex!important;align-items:center!important;gap:10px!important;line-height:0!important;text-decoration:none!important}
.hz-barra a.logohome img,.hz-barra>.brand img{height:30px!important;width:auto!important;max-width:none!important;margin:0!important}
/* nos sites de empresa o horizon-marca.js desenha o símbolo vivo (svg.hz-marca, 30 px) e esconde a <img> (data-hz-feito) */
.hz-barra img[data-hz-feito]{display:none!important}
.hz-barra .hz-marca{flex:none}
.hz-barra .lc-wm{display:inline!important;color:#fff!important;font:600 12.5px/1 'Montserrat', system-ui, -apple-system, sans-serif!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;white-space:nowrap!important}

/* ---- o título da ferramenta: logo depois da marca, com um fio separando ---- */
.hz-barra>.hz-barra-tit{order:2;flex:0 1 auto;min-width:0;position:static!important;transform:none!important;
  top:auto!important;left:auto!important;margin:0!important;padding:0 0 0 12px!important;max-width:none!important;
  border-left:1px solid rgba(255,255,255,.32);color:#fff!important;opacity:1!important;
  font:400 12.5px/24px 'Montserrat', system-ui, -apple-system, sans-serif!important;letter-spacing:.16em!important;text-indent:0!important;
  text-transform:uppercase!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* ---- abas da ferramenta (Contratos, Administração): na fileira enquanto couberem ---- */
.hz-barra>nav{order:3;flex:0 1 auto!important;min-width:0!important;flex-basis:auto!important;margin:0!important;padding:0!important;
  flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;align-self:center}
.hz-barra>nav::-webkit-scrollbar{display:none}
/* as abas um pouco mais justas na fileira (o texto e o ícone não mudam): as 7 do Contratos cabem a 1366 px com o título */
.hz-barra>nav{gap:2px!important}
.hz-barra>nav>button{padding:8px 10px!important}
/* CONSERTO (13/10): antes de as abas descerem, a fileira abre espaço, em degraus (o manual.js mede e liga um por vez):
   1 hz-ap1 — some o título da ferramenta (a aba acesa já diz onde se está) · 2 hz-ap2 — some a marca ao lado do símbolo
   3 hz-ap3 — o chip da empresa fica só com o ícone (o nome inteiro continua no title). Só se nem assim couber, as abas descem
   (e os degraus saem: com as abas embaixo, há lugar de novo). Assim o Contratos do dono, com a aba Comissões, fica em 64 px. */
.hz-barra.hz-ap1>.hz-barra-tit,.hz-barra.hz-ap2 .lc-wm,.hz-barra.hz-ap3 #cr-troca .ct-nome{display:none!important}
/* não couberam (tela estreita, nome comprido): descem para uma faixa colada embaixo da barra — a barra não muda de altura.
   CONSERTO 2 (13/10): a faixa é UMA fileira que rola de lado em TODA largura (antes só até 560 px; entre ~560 e ~1250 px ela
   quebrava em 2 linhas: o topo do Contratos a 768 px ia a 146 px com 8 abas). */
.hz-barra.hz-abas-abaixo>nav{position:absolute!important;left:0;right:0;top:100%;z-index:1;display:flex;
  flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  gap:4px!important;padding:6px max(12px, env(safe-area-inset-left, 0px)) 7px!important;
  background:#16494D;border-top:1px solid rgba(255,255,255,.14);box-shadow:0 6px 14px rgba(15,53,56,.22);box-sizing:border-box}
.hz-barra.hz-abas-abaixo>nav>button{flex:none!important}
/* com mouse (tablet deitado, janela estreita no computador) a fileira mostra um trilho fino para rolar; no celular, nenhum */
.hz-barra.hz-abas-abaixo>nav::-webkit-scrollbar{display:block;height:5px}
.hz-barra.hz-abas-abaixo>nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:3px}

/* ---- o grupo da direita: «? Manual» · chip da empresa · crachá — na mesma fileira, nunca um por cima do outro ---- */
.hz-barra #hz-q{order:7;position:static!important;top:auto!important;right:auto!important;left:auto!important;margin:0!important;flex:none}
.hz-barra #cr-troca{order:8;position:static!important;top:auto!important;left:auto!important;right:auto!important;margin:0!important;
  display:inline-flex!important;align-items:center;gap:6px;box-sizing:border-box;height:34px;padding:0 12px!important;
  flex:0 1 auto;min-width:0;max-width:340px;white-space:nowrap;overflow:hidden}
/* CONSERTO (13/10): o teto era 170 px abaixo de 1500 px e cortava um nome comum de empresa com a barra quase vazia. O chip só
   encolhe quando falta lugar de verdade (flex 0 1 auto); o teto de 340 px é para nome de cooperativa inteiro. */
.hz-barra #cr-troca .ct-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hz-barra #cr-troca .ct-seta,.hz-barra #cr-troca hz-i{flex:none}
.hz-barra>.cr,.hz-barra>.mu-ancora,.hz-barra>.profile{order:9;flex:none;position:relative!important;top:auto!important;right:auto!important;
  left:auto!important;bottom:auto!important;transform:none!important;margin:0!important;padding:0;display:flex!important;align-items:center;gap:8px;white-space:nowrap}
.hz-barra>.mu-ancora,.hz-barra>.profile{min-width:0}
.hz-barra #cr-btn{order:9;display:flex!important;align-items:center!important;gap:8px!important;box-sizing:border-box!important;height:34px!important;
  padding:0 12px 0 5px!important;margin:0!important;border-radius:999px!important;position:relative!important;top:auto!important;right:auto!important;transform:none!important;
  background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.32)!important;color:#fff!important;
  font:600 12.5px/1 'Montserrat', system-ui, -apple-system, sans-serif!important;cursor:pointer;white-space:nowrap}
.hz-barra #cr-btn:hover{background:rgba(255,255,255,.22)!important}
.hz-barra #cr-ini{flex:none;width:24px!important;height:24px!important;border-radius:50%!important;background:#fff!important;color:#16494D!important;
  display:flex!important;align-items:center;justify-content:center;font:700 12px/1 'Montserrat', system-ui, -apple-system, sans-serif!important}
.hz-barra #cr-nome{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px!important;font-weight:600!important}
/* a seta de voltar do app fica na ponta esquerda, na mesma fileira */
.hz-barra>.app-voltar{order:0;position:static!important;top:auto!important;left:auto!important;margin:0!important;flex:none}

/* ---- tela estreita ---- */
@media (max-width:760px){
  .hz-barra .lc-wm{display:none!important}
}
@media (max-width:560px){
  .hz-barra{height:calc(56px + env(safe-area-inset-top, 0px))!important;gap:0 10px!important;
    padding-left:max(12px, env(safe-area-inset-left, 0px))!important;padding-right:max(12px, env(safe-area-inset-right, 0px))!important}
  .hz-barra>.hz-barra-tit{padding-left:10px!important;letter-spacing:.1em!important;font-size:11.5px!important}
  .hz-barra #cr-nome,.hz-barra #cr-btn>span:not(#cr-ini):not(.av){display:none!important}
  .hz-barra #cr-btn{width:34px!important;padding:0!important;gap:0!important;justify-content:center!important}
  .hz-barra #cr-troca{padding:0 9px!important;max-width:none}
  .hz-barra #cr-troca .ct-nome{display:none!important}
  /* CONSERTO (13/10): no celular a faixa das abas é a mesma fileira que rola de lado (regra acima, toda largura), mais justa */
  .hz-barra.hz-abas-abaixo>nav{padding-top:5px!important;padding-bottom:5px!important;scrollbar-width:none}
  .hz-barra.hz-abas-abaixo>nav::-webkit-scrollbar{display:none}
}
}