/* VxOS V2 - redesenho visual do SHELL (cabecalho, navegacao, barra do projeto, botoes globais).
   Mesma linguagem do modo Triagem ja aplicado no Buscador (v2-preview.css secao 5): tipografia
   'Space Grotesk', densidade compacta, hierarquia clara (acao/titulo primeiro, decoracao por ultimo),
   estados nitidos (aba ativa, hover, foco visivel) e contraste AA. Identidade preservada (navy + teal).
   Carrega DEPOIS de v2-preview.css: pode sobrescrever classes de producao.
   Regras: sem travessao; nao altera comportamento, dados nem nomes de funcao; nao esconde o selo V2. */

/* ==================================================================
   1) CABECALHO (topbar do app) - mais compacto e denso, gap firme
   ================================================================== */
#app .topbar{padding:11px 24px;gap:14px;box-shadow:0 1px 0 rgba(0,180,180,.35)}
#app .topbar-left,#app .topbar-right{gap:12px}

/* logo/home: vira alvo clicavel legivel, com hover e foco (era div "morto") */
#app .logo-block{border-radius:var(--r-ctrl);padding:3px 7px;margin:-3px -7px;transition:background .12s}
#app .logo-block:hover{background:rgba(255,255,255,.07)}
#app .logo-img{height:38px}
#app .logo-h1{font:700 19px 'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.05}
#app .logo-sub{font:600 10.5px 'Space Grotesk',sans-serif;color:var(--teal);text-transform:uppercase;letter-spacing:.09em}

/* "Projetos" (voltar) e "Area": controles pareados, densos */
#app .tb-back{height:32px;font:600 12px 'Space Grotesk',sans-serif;border-radius:var(--r-ctrl)}
#app .area-pick{height:32px;position:relative;padding:0 26px 0 12px}
#app .area-pick label{font:600 11px 'Space Grotesk',sans-serif;color:var(--gray-300);letter-spacing:.07em}
#app .area-pick select{font:600 13px 'Space Grotesk',sans-serif;padding-right:2px}
/* caret proprio: o select tem appearance:none e ficava sem sinal de "abre lista" */
#app .area-pick::after{content:'';position:absolute;right:12px;top:50%;width:6px;height:6px;
  border-right:1.6px solid var(--gray-300);border-bottom:1.6px solid var(--gray-300);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* Console: botao utilitario do Master */
#app .tb-console{height:32px;font:600 12.5px 'Space Grotesk',sans-serif}

/* ==================================================================
   2) BOTOES GLOBAIS (desfazer / refazer) + "Atualizado em"
   ================================================================== */
#app .hist{gap:5px}
#app .icon-btn{width:32px;height:32px}
#app .icon-btn:not(:disabled):hover{background:#1d3a78}

/* indicador "Atualizado em ... por ...": bloco de meta compacto, separado por filete */
#app .upd{padding-left:14px;border-left:1px solid rgba(255,255,255,.16);line-height:1.3}
#app .upd-1{font:500 11px 'Space Grotesk',sans-serif;color:var(--gray-300);letter-spacing:.01em}
#app .upd-1 strong{color:#fff;font-weight:600}
#app .upd-2{font:500 11px 'Space Grotesk',sans-serif;color:var(--gray-400)}

/* ==================================================================
   3) AVATAR + menu da conta
   ================================================================== */
/* F27 (contraste): branco sobre --teal #00B4B4 dava 2.6:1; --teal-btn passa AA e continua teal */
/* altura 32px: alinha com o cluster utilitario (Projetos/Area/Console/desfazer) numa so linha (disciplina 6) */
#app .avatar{height:32px;background:var(--teal-btn);font:700 13px 'Space Grotesk',sans-serif}
#app .avatar:hover{background:#005F5F}
#app .avatar-menu{border:1px solid var(--gray-200)}
#app .am-email{font:600 13px 'Space Grotesk',sans-serif}
#app .am-role{font:700 11px 'Space Grotesk',sans-serif;color:var(--gray-600);letter-spacing:.05em}
#app .am-item:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}

/* ==================================================================
   4) BARRA DO PROJETO (proj-sticky): titulo > badges > breadcrumb
   ================================================================== */
#pane-project .proj-sticky{padding-top:10px}
/* identidade (tipo/titulo/badge) numa linha que respira e quebra; acoes empurradas a direita
   pelo espacador flex herdado (.proj-actions{margin-left:auto}) (disciplina 2) */
#pane-project .proj-head{gap:9px 10px;margin:2px 0 4px;flex-wrap:wrap}
#pane-project .proj-head h2{font:700 20px 'Space Grotesk',sans-serif;color:var(--navy);letter-spacing:-.01em}
/* tipo do projeto (ex.: TRANSFER-IN): TAG quadradinho 6px, nao pill (tipo -> tag, disciplina 4) */
#pane-project #proj-kind{font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.05em;border-radius:6px;padding:1px 7px}
/* visibilidade (CONVIDADOS/Privado/Area inteira): status -> PILL 999px, 700 10px (disciplina 4) */
#pane-project #proj-vis{font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.03em;border-radius:999px;padding:2px 9px}
/* breadcrumb "Area / Subarea": meta de contexto, caixa normal e muted, um degrau abaixo do titulo (disciplina 7) */
#pane-project .proj-sub{font:500 12px 'Space Grotesk',sans-serif;color:var(--gray-500);letter-spacing:.02em;margin:0 0 3px}

/* acoes do projeto (Somente leitura / Configuracoes) */
#pane-project .proj-actions .chip-ro{font:700 10px 'Space Grotesk',sans-serif}
#pane-project .proj-actions .ic-btn{font:600 12.5px 'Space Grotesk',sans-serif}
#pane-project .proj-actions button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ==================================================================
   5) ABAS do projeto (navegacao) - estado ativo nitido, config a direita
   ================================================================== */
#pane-project .tabbar{gap:2px;margin-top:12px;border-bottom:1px solid var(--gray-200)}
/* a faixa de abas ocupa a largura para permitir empurrar "Configuracoes" ao fim */
#pane-project .tabs{flex:1 1 auto}
#pane-project .tab{font:500 13px 'Space Grotesk',sans-serif;color:var(--gray-600);
  padding:9px 14px 10px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0;
  transition:color .12s,background .12s,border-color .12s}
#pane-project .tab:hover{color:var(--navy);background:rgba(13,31,76,.05)}
/* aba ativa: peso maior + sublinhado teal que cobre o filete da tabbar.
   Usa --teal-btn (mesmo token das sub-abas do dossie aprovado) p/ casar a pegada (disciplina 5/8) */
#pane-project .tab.on{font-weight:600;color:var(--navy);border-bottom-color:var(--teal-btn);background:transparent}
#pane-project .tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:6px}

/* "Configuracoes" (aba admin) empurrada para a direita: separa a config das abas de trabalho (T7) */
#pane-project .tab-config{margin-left:auto;color:var(--gray-500)}
#pane-project .tab-config.on{color:var(--navy)}

/* "+" (adicionar aba): affordance de hover/foco coerente com a linguagem teal */
#pane-project .tab-add{margin-left:6px;transition:border-color .12s,color .12s,background .12s}
#pane-project .tab-add:hover{border-color:var(--teal);color:var(--teal-btn);background:rgba(0,180,180,.07)}
#pane-project .tab-add:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* "x" para remover a aba (so master): discreto no gray, fica vermelho no hover */
/* "x" para remover a aba: so existe no MODO EDITAR (renderTabs so injeta com tabsEditMode). Fora do modo
   nao existe -> zero risco de clique errado. Dentro, visivel e vermelho no hover. */
#pane-project .tab .tab-x{margin-left:7px;color:var(--gray-400);font:700 13px 'Space Grotesk',sans-serif;line-height:1;padding:1px 4px;border-radius:5px;opacity:.55;transition:opacity .12s,color .12s,background .12s}
#pane-project .tab:hover .tab-x,#pane-project .tab .tab-x:focus{opacity:1}
#pane-project .tab .tab-x:hover{color:var(--neg-text);background:var(--neg-bg)}

/* botao "Editar / Concluir" das abas (so Master): discreto fora do modo, navy solido no modo editar */
#pane-project .tab-edit{align-self:center;margin-left:8px;border:1px solid var(--gray-300);background:#fff;color:var(--gray-500);border-radius:6px;font:600 11.5px 'Space Grotesk',sans-serif;padding:5px 11px;cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s,background .12s}
#pane-project .tab-edit:hover{border-color:var(--teal);color:var(--teal-btn);background:rgba(0,180,180,.07)}
#pane-project .tab-edit.on{background:var(--navy);color:#fff;border-color:var(--navy)}
#pane-project .tab-edit.on:hover{background:#1d3a78;color:#fff}

/* ==================================================================
   6) FOCO VISIVEL - navegacao por teclado em todo controle do shell (F26/A11y)
   ================================================================== */
#app .logo-block:focus-visible,
#app .tb-back:focus-visible,
#app .area-pick select:focus-visible,
#app .tb-console:focus-visible,
#app .icon-btn:focus-visible,
#app .avatar:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:var(--r-ctrl)}
/* na topbar navy, um halo claro reforca o anel teal */
#app .topbar :focus-visible{box-shadow:0 0 0 4px rgba(0,180,180,.18)}
#pane-project .tab:focus-visible,#pane-project .tab-add:focus-visible{box-shadow:none}