/* Chrome compartilhado do ecossistema ÓRBITA (shell + todos os módulos):
   1) chip do usuário com menu "Sair" (substitui o antigo canto da barra azul);
   2) prefixo "Módulo · " no início do breadcrumb de cada tela. */

/* --- breadcrumb: "Administração · Cadastros · Empresas" --------------------
   O prefixo vem de uma variável CSS definida por orbita-chrome.js; usar
   ::before faz ele sobreviver quando o módulo reescreve o innerHTML do .cb. */
/* Breadcrumb navegável: [Módulo] · [Seção] / atual — tudo que não é a tela
   atual vira link (montado por orbita-chrome.js). */
.tb .cb-wrap{display:flex;align-items:center;min-width:0;font-size:12px;color:#8a94a6;white-space:nowrap}
.tb .cb-wrap .cb-sep{margin:0 5px;color:#8a94a6}
.cb a.cb-seg,.cb-wrap a.cb-mod,.cb .cb-seg{color:#137dff;font-weight:600;cursor:pointer;text-decoration:none;border-radius:4px}
.cb a.cb-seg:hover,.cb-wrap a.cb-mod:hover,.cb .cb-seg:hover{text-decoration:underline}
.cb-wrap a.cb-mod{color:#4a5568}
.cb-wrap a.cb-mod:hover{color:#137dff}
.cb .cb-hidden{display:none}

/* --- chip do usuário ------------------------------------------------------ */
.uc{position:relative;display:flex;align-items:center;gap:10px;padding:4px 8px;border-radius:10px;cursor:pointer;user-select:none;font-size:13px;font-weight:600;color:#101828}
.uc:hover,.uc.open{background:#f2f5fa}
.uc .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#137dff,#152896);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0}
.uc .uc-info{display:flex;flex-direction:column;line-height:1.2;text-align:left;min-width:0}
.uc .uc-info b{font-size:12.5px;font-weight:700;color:#101828;white-space:nowrap}
.uc .uc-info small{font-size:10.5px;font-weight:600;color:#8a94a6;white-space:nowrap}
.uc .uc-chev{width:13px;height:13px;stroke:#8a94a6;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:transform .15s ease}
.uc.open .uc-chev{transform:rotate(180deg)}
.uc-panel{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:#fff;border:1px solid #e2e7f0;border-radius:10px;box-shadow:0 12px 30px rgba(16,24,60,.16);z-index:2000;overflow:hidden;text-align:left;cursor:default}
.uc.open .uc-panel{display:block}
.uc-panel .uc-mail{padding:10px 14px;font-size:11.5px;font-weight:500;color:#8a94a6;border-bottom:1px solid #e2e7f0;word-break:break-all}
.uc-panel .uc-sair{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12.5px;font-weight:600;color:#d61f1f;cursor:pointer}
.uc-panel .uc-sair:hover{background:#ffe9e9}
.uc-panel .uc-sair svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.uc .uc-info,.uc .uc-chev{display:none}}

/* ===== Cabeçalho de tela (.ph): grupo de ações no LUGAR PADRÃO, igual em todos os módulos =====
   Canto superior direito, alinhado à direita mesmo quando quebra de linha em painel estreito
   (seletor Indicadores|Permissões|Alertas → botão primário → Exportar). Antes o grupo caía
   à esquerda, sob o título, com o seletor desalinhado dos botões. */
.ph>.ha{margin-left:auto;justify-content:flex-end;max-width:100%}
.ph>.ha:not(:has(.fl)){align-items:center}
.ph .ha .seg{margin:0!important}

/* ===== Cabeçalho (.tb) em tela estreita (<= 640 px): sem estouro horizontal, breadcrumb nunca sob os ícones =====
   Estrutura (montada por orbita-chrome.js / orbita-busca.js / orbita-acesso-rapido.js / módulo):
     .tb > .cb-wrap > [a.cb-mod, .cb-sep, .cb]   (ou .tb > .cb direto, antes do JS rodar)
     .tb > .ta > [.obs-wrap(busca), .oar-sv(🔖), .nwrap > .nbtn(sino), .uc(avatar)]
   Desktop (>= 641 px) NÃO muda: tudo abaixo está dentro desta media query.
   Seletores com `div.tb`/`.ta .x` ganham do CSS inline do módulo (.tb, .ta, .nbtn) e dos <style> injetados por
   orbita-busca.js (.obs-in, @media 760) e orbita-acesso-rapido.js (.oar-sv, @media 560) por especificidade, sem !important. */
@media (max-width:640px){
  /* barra: não deixa o conteúdo empurrar a largura da página */
  div.tb{padding:0 8px 0 12px;gap:8px;min-width:0;max-width:100%;box-sizing:border-box}

  /* breadcrumb em FLEX, sempre na ordem do DOM (ltr; sem direction:rtl, que inverte/empurra segmentos isolados):
       .cb-wrap = [a.cb-mod (módulo)] [.cb-sep "·"] [.cb (trilha + tela atual)]
     - o .cb-wrap ocupa só o espaço que sobra (flex:1 1 0) e corta o excedente;
     - o NOME DO MÓDULO é o que encolhe primeiro (fator de encolhimento 100), com reticência no fim do próprio nome;
     - o .cb (trilha "Seção / tela atual") só encolhe depois, e é um flex com justify-content:flex-end: se ainda assim não couber, o que é
       cortado é o COMEÇO da trilha (borda esquerda do .cb), nunca a tela atual, que é o último item. Se cabe, o .cb tem a largura do conteúdo
       e a ordem/alinhamento são os normais. Os filhos do .cb (<b>, .cb-seg, trechos de texto) viram itens flex; gap repõe o espaço que o flex
       remove entre eles. */
  div.tb>.cb-wrap{display:flex;align-items:center;flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;direction:ltr;text-align:left}
  div.tb>.cb-wrap>a.cb-mod{display:block;flex:0 100 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:12px 2px}
  div.tb>.cb-wrap>.cb-sep{flex:0 0 auto}
  div.tb>.cb-wrap>.cb,div.tb>.cb{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;direction:ltr}
  div.tb .cb>*{flex:none}
  div.tb .cb .cb-seg{padding:12px 2px}   /* área de toque ~40 px; o .cb tem ~39 px de altura, dentro dos 56 px fixos do .tb */
  @media (max-width:360px){div.tb>.cb-wrap,div.tb>.cb{font-size:11px}}

  /* grupo de ícones: largura fixa, nunca encolhe, alvos de toque de 40 px (D-120) */
  div.tb>.ta{flex:none;gap:2px;position:relative}
  .tb .ta .oar-sv{width:40px;height:40px;margin:0;font-size:16px;border-radius:12px;border-color:transparent;background:transparent}
  .tb .ta .oar-sv:hover{background:#f2f5fa;border-color:transparent}
  .tb .ta .nbtn{width:40px;height:40px;border-radius:12px}
  .tb .ta .uc{min-width:40px;min-height:40px;padding:0;gap:0;justify-content:center;border-radius:12px;font-size:0}   /* font-size:0 esconde o nome solto (fora do shell); .av e .uc-panel têm font-size próprio */
  .tb .ta .uc .av{font-size:11.5px}
  .tb .ta .uc .uc-info,.tb .ta .uc .uc-chev{display:none}   /* nome/papel já somem a 560; aqui vale desde 640 */

  /* busca: colapsada num botão-ícone 40x40; ao tocar o campo se expande SOBRE a barra (position:absolute),
     então não altera a largura do .ta nem da página. Âncora à direita: cresce para a esquerda. */
  .tb .ta .obs-wrap{--obs-w:min(220px,calc(100vw - 144px));width:40px;height:40px;margin:0;flex:none;justify-content:center}
  .tb .ta .obs-wrap svg{left:13px;z-index:6}
  .tb .ta .obs-wrap:focus-within svg{left:calc(52px - var(--obs-w))}   /* acompanha a borda esquerda do campo expandido */
  .tb .ta .obs-wrap .obs-in{width:40px;height:40px;padding:0;border-color:transparent;background:transparent;border-radius:12px;color:transparent;caret-color:transparent;cursor:pointer;font-size:16px}
  .tb .ta .obs-wrap .obs-in::placeholder{color:transparent}
  .tb .ta .obs-wrap .obs-in:hover{background:#f2f5fa}
  .tb .ta .obs-wrap .obs-in:focus{position:absolute;right:0;top:0;z-index:5;width:var(--obs-w);min-width:var(--obs-w);max-width:none;padding:0 12px 0 34px;background:#fff;border-color:var(--b,#137dff);color:var(--t,#101828);caret-color:auto;cursor:text}
  .tb .ta .obs-wrap .obs-in:focus::placeholder{color:var(--t3,#8a94a6)}

  /* popover do sino: nunca mais largo que a viewport (o JS de posicionamento também usa min(340, innerWidth-16)) */
  .notifpop{width:min(340px,calc(100vw - 16px))}
}

/* ===== Cabeçalho (.tb) em largura intermediária (641–1000 px): o breadcrumb não pode ficar sob a busca =====
   Sem isto, .cb-wrap (flex, min-width:0) encolhe mas o texto do .cb transborda visível POR BAIXO do .ta (a busca tem 220 px fixos e o .ta não encolhe).
   Aqui o breadcrumb vira bloco com overflow:hidden e reticência no FIM (direção normal, ordem correta). Acima de 1000 px e até 640 px nada muda neste bloco. */
@media (min-width:641px) and (max-width:1000px){
  div.tb{min-width:0}
  div.tb>.cb-wrap,div.tb>.cb{flex:1 1 0;min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  div.tb>.cb-wrap>a.cb-mod,div.tb>.cb-wrap>.cb-sep,div.tb>.cb-wrap>.cb{display:inline}
}
/* a 641–760 o orbita-busca.js já colapsa a busca (34 px, 170 px ao focar); de 761 a 1000 a busca (220 px fixos no JS) encolhe para liberar >= ~150 px ao breadcrumb */
@media (min-width:761px) and (max-width:1000px){
  .tb .ta .obs-wrap .obs-in{width:clamp(140px,20vw,220px)}
}