/* ORBIT Empresa · paginas/gestao.css — área D: a gestão (Agentes, Local, Skills, Automatismos, Acessos e Pessoas).

   Só o que é destas páginas, com o prefixo g-: os componentes (cartões, botões, etiquetas, avisos, o vazio, a janela, o
   menu ⋯, o terminal) são os do visual.css. As cores vêm só das fichas; os espaços na escala 4/8; os pontos de viragem
   em em, como no visual.css (53,75 em = 860 px). Liga-se depois do visual.css e antes do /aparencia.css. */

/* ── as peças ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.g-cabeca { margin: 0 0 var(--e-5); }   /* as medidas do cabeçalho da casca (.casca-cabeca) */
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) { .g-cabeca { margin-bottom: var(--e-4); } }
.g-cabeca-linha { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.g-cabeca .o-pagina-legenda { margin: var(--e-1) 0 0; }
.g-carregar { margin: var(--e-4) 0; }
.g-vazio { margin: 0 0 var(--e-4); }
.g-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
/* o «Detalhe técnico»: fechado, discreto; os valores compridos (caminhos, ramos, endereços) partem */
.g-detalhe { background: var(--painel); }
.g-detalhe .o-detalhe-corpo { display: flex; flex-direction: column; gap: var(--e-2); overflow-wrap: anywhere; }
.g-detalhe .o-detalhe-corpo > p { margin: 0; }
.g-dados .o-dado-valor { white-space: normal; overflow-wrap: anywhere; }
.g-pre {
  margin: 0; max-height: 320px; overflow: auto; padding: var(--e-2) var(--e-3); border: 1px solid var(--linha);
  border-radius: var(--r); background: var(--void); color: var(--ink-2); font: 400 var(--t-12)/1.5 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.g-menu-botao { flex: none; }
/* o terminal só de leitura (de um agente, do servidor de um projeto): numa camada própria (will-change), o fim dele é
   mesmo o fim e o primeiro deslize passa para a página; no telemóvel, a seguir as linhas novas, não rola por dentro (o
   dedo rola a página) — as mesmas provas do .terminal da casca (teste_dedo, teste_browser_dedo) */
.g-terminal { height: 56vh; min-height: min(280px, 50vh); font-size: var(--t-12); will-change: transform; }
.g-terminal--baixo { height: 30vh; min-height: 160px; }
@media (pointer: coarse) {
  .terminal-caixa:not(.a-ler) > .g-terminal { overflow-y: hidden; }
}
@media (max-width: 37.4375em) {
  .g-terminal { height: 40vh; }
}

/* ── Agentes ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.g-painel { margin: 0 0 var(--e-6); }
.g-painel-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.g-painel-cabeca .o-cartao-titulo { min-width: 0; overflow-wrap: anywhere; }
.g-grupo + .g-grupo { margin-top: var(--e-6); }
.g-grupo-n { color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
.g-tarefas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: var(--e-3); align-items: start; }
/* no computador largo, os grupos dos agentes lado a lado (como a Visão geral): a página enche-se em vez de uma coluna
   estreita com o resto vazio; o vazio e os avisos à largura toda */
@media (min-width: 68.75em) {
  .g-agentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); align-items: start; }
  .g-agentes > :not(.g-grupo) { grid-column: 1 / -1; }
  .g-agentes .g-tarefas { grid-template-columns: minmax(0, 1fr); }
  .g-agentes .g-tarefa { max-width: none; }
  .g-agentes > .g-grupo + .g-grupo { margin-top: 0; }
}
.g-tarefa { max-width: none; background: var(--painel); }
.g-tarefa .o-sub-faz b { color: var(--ink); font-weight: 600; }
/* a tarefa de um atalho da Visão geral (#/subagentes?tarefa=…): marcada com o acento */
.g-tarefa--pedida { border-color: var(--accent-linha); box-shadow: inset 2px 0 0 var(--accent); }
.g-territorio { font-family: var(--mono); font-size: var(--t-12); color: var(--ink); overflow-wrap: anywhere; }
/* (23/10, a F7) «Da tarefa: <título> ›», com as Tarefas ligadas: a ligação para a folha da tarefa. Uma linha só, com o
   eixo no contentor; um título comprido desce inteiro para a linha de baixo e parte dentro do cartão, com a seta sempre
   ao fim dele (ao meio do bloco, quando o título parte). No toque, 44 px de alvo, sem mexer na linha. */
.g-da-tarefa { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-1); min-width: 0; }
.g-da-tarefa-ligacao { position: relative; display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%;
  font-weight: 600; }
.g-da-tarefa-nome { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 53.75em), (pointer: coarse) {
  .g-da-tarefa-ligacao::before { content: ''; position: absolute; inset: -13px 0; }
}
/* o caminho para a decisão que passou para a folha («Aceitar na tarefa», «Começar outra vez na tarefa»): no telemóvel
   estreito, numa linha só dele, com o nome inteiro (a meias com o «Ver o resultado», partia em duas linhas a 320 px) */
@media (max-width: 37.4375em) {
  .g-tarefa .o-acoes > .o-btn.g-na-tarefa { flex-basis: 100%; }
}
.g-registo { margin: 0; padding: 0; list-style: none; color: var(--ink-3); font: 400 var(--t-12)/1.5 var(--mono); }
.g-registo li + li { margin-top: var(--e-1); }
.g-ficheiros { margin: 0; padding: 0; list-style: none; border: 1px solid var(--linha); border-radius: var(--r-cartao); overflow: hidden; }
.g-ficheiro { display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: 40px; padding: var(--e-2) var(--e-3); border-top: 1px solid var(--linha); }
.g-ficheiro:first-child { border-top: 0; }
.g-ficheiro > .o-ic { color: var(--ink-3); }
.g-ficheiro-nome { flex: 1; min-width: 0; color: var(--ink); font: 500 var(--t-13)/1.4 var(--mono); overflow-wrap: anywhere; }
.g-linhas { display: inline-flex; gap: var(--e-2); flex: none; color: var(--ink-3); font: 500 var(--t-12)/1 var(--mono); font-variant-numeric: tabular-nums; }
.g-mais { color: var(--ok); }
.g-menos { color: var(--erro); }
.g-diff .o-diff-corpo { max-height: 420px; overflow: auto; }
/* as notas do resultado de um agente, desenhadas (o relatório lê-se antes de «Aceitar») */
.g-notas-resultado { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.g-nota-resultado { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel-2); }
.g-nota-resultado-nome { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--ink-3);
  font: 500 var(--t-12)/1.4 var(--mono); overflow-wrap: anywhere; }
.g-nota-resultado-nome > .o-ic { flex: none; }
.g-nota-resultado > .o-md { color: var(--ink); font-size: var(--t-14); line-height: 1.6; }

/* ── Local ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.g-projetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--e-4); align-items: start; }
.g-projeto .o-cartao-titulo, .g-previa .o-cartao-titulo { overflow-wrap: anywhere; }
.g-construcao { border-color: var(--aviso-fundo); background: var(--aviso-fundo); color: var(--aviso); white-space: normal; overflow-wrap: anywhere; }
/* o cartão de cada servidor (19/10): o estado em palavras, o que é, a conversa, o que aconteceu, as ações e o «sempre
   ligado». Nada de laranja cheio: a ação do cartão tem contorno, «Desligar» é discreto, «Apagar…» vive no ⋯ e só o
   «Ligar outra vez» de um «sempre ligado» que desistiu é principal */
.lh-cartao { transition: border-color var(--dur), box-shadow var(--dur); }
.lh-estados { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); min-width: 0; }
.lh-corpo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.lh-o-que { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.lh-conversa { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-1); min-width: 0; margin: 0;
  color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.lh-conversa--nenhuma { color: var(--ink-3); }
/* a ligação para a conversa: 32 px no computador e 44 no toque (o --ctl); o ícone fica ao centro do bloco, também quando
   o texto parte em duas linhas */
.lh-conversa-ligacao { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: var(--ctl);
  color: var(--accent-texto); text-decoration: none; overflow-wrap: anywhere; }
.lh-conversa-ligacao:hover { text-decoration: underline; }
.lh-conversa-ligacao > .o-ic { flex: none; color: currentColor; }
.lh-conversa-mais { color: var(--ink-3); }
.lh-ultimo { display: flex; flex-direction: column; min-width: 0; }
.lh-ultimo > p { margin: 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.5; }
.lh-acoes > .g-menu { margin-left: auto; }
.lh-sempre { display: flex; flex-direction: column; gap: var(--e-1); padding-top: var(--e-3); border-top: 1px solid var(--linha); }
.lh-sempre-rotulo { color: var(--ink); font-size: var(--t-13); line-height: 1.3; cursor: pointer; }
/* o «Detalhe técnico» discreto: só a linha do resumo, sem a caixa de um botão (o alvo continua com 44 px no toque) */
.lh-detalhe { border: 0; background: none; }
.lh-detalhe > summary { width: fit-content; min-height: var(--ctl); padding: 0; color: var(--ink-3); font-size: var(--t-12); }
.lh-detalhe .o-detalhe-corpo { padding: 0; }
.lh-outras a { color: var(--accent-texto); }
/* a ligação direta (#/localhost?projeto=…): o cartão marcado 2,5 s (sem transição com o movimento reduzido, no visual.css) */
.g-projeto.lh-destaque { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-fundo); }
.g-previa { margin: 0 0 var(--e-6); }
.g-previa-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); }
.g-previa-nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; }
.g-lh-estado-caixa[hidden] { display: none; }
.g-lh-estado .lh-motivo { margin: var(--e-2) 0 0; font-size: var(--t-12); }
/* a pré-visualização: a página da empresa sobre o papel branco (como no browser) e, sem servidor, escondida */
.previa-frame { display: block; width: 100%; height: 70vh; min-height: min(360px, 60vh); border: 1px solid var(--linha);
  border-radius: var(--r); background: var(--papel); }
.previa-frame.oculto { display: none; }
.g-previa .previa-frame { border-color: var(--linha-2); border-radius: var(--r-cartao); }
.g-previa .lh-mexer { margin: 0; }
.lh-motivo { overflow-wrap: anywhere; white-space: pre-wrap; }
.lh-registo { margin-top: var(--e-2); }
/* no telemóvel, o dedo em cima da pré-visualização rola o OS: uma página comprida apanhava o dedo (16 de 18 deslizes só a
   rolavam por dentro e o OS não andava). Um escudo transparente por cima dela leva o dedo; «Mexer na página» tira-o (rolar,
   tocar nos botões) até «Parar de mexer». Um escudo e não o pointer-events no iframe: no Chrome, o iframe de outra origem
   não voltava a receber o dedo depois de um pointer-events: none */
.lh-lugar { position: relative; }
.lh-escudo, .lh-mexer { display: none; }
.lh-mexer { flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e-2); margin: 0 0 var(--e-2); }
.lh-dica { flex: 1 1 180px; color: var(--ink-2); }
.lh-mexer-chama { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-fundo); }
@media (pointer: coarse) {
  .lh-lugar:not(.a-mexer) > .lh-escudo { display: block; position: absolute; inset: 0; }
  .lh-lugar.a-mexer > .previa-frame { border-color: var(--accent); }
  .lh-mexer:has(+ .lh-lugar > .previa-frame:not(.oculto)) { display: flex; }
}
@media (max-width: 37.4375em) {
  .previa-frame { height: 55vh; }
  /* a ação do cartão e «Desligar» a meias, com o ⋯ no fim da mesma fila (por cima da regra partilhada dos dois por linha) */
  .g-projeto .o-acoes.lh-acoes > .o-btn { flex: 1 1 0; }
  .lh-acoes > .g-menu { flex: none; }
}

/* ── Skills ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.g-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--e-4); align-items: start; }
.g-skill-nome { margin: 0; font-family: var(--mono); font-size: var(--t-13); overflow-wrap: anywhere; }
.g-skill-resumo { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.g-skill-resumo.g-aberto { display: block; -webkit-line-clamp: unset; overflow: visible; }
.g-ler-tudo { align-self: flex-start; margin-top: calc(-1 * var(--e-2)); }
.g-como-pedir { margin: 0; color: var(--ink-3); font-size: var(--t-13); line-height: 1.5; }
.g-como-pedir > span { color: var(--ink); }
.g-skill-sem { margin: 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.5; }
.g-testes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e-3); }
.g-teste-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.g-teste-cabeca b { color: var(--ink); font: 600 var(--t-13)/1.4 var(--mono); overflow-wrap: anywhere; }
.g-teste-pergunta { margin: var(--e-1) 0 0; color: var(--ink-2); font-size: var(--t-13); }
.g-teste-motivo { margin: var(--e-1) 0 0; padding: var(--e-2) var(--e-3); border-radius: var(--r); background: var(--painel-2); color: var(--ink-2); font-size: var(--t-12); overflow-wrap: anywhere; }
/* com a largura da grelha das skills (760 px deixavam-no mais estreito do que ela); o texto, numa medida que se lê */
.g-como { margin-top: var(--e-4); }
.g-como .g-passos, .g-como > .o-cartao-texto { max-width: 80ch; }
.g-passos { margin: 0; padding-left: 1.4em; color: var(--ink-2); font-size: var(--t-13); line-height: 1.55; }
.g-passos li + li { margin-top: var(--e-2); }
.g-passos li::marker { color: var(--accent-texto); font-family: var(--mono); font-weight: 600; }

/* ── Automatismos ──────────────────────────────────────────────────────────────────────────────────────────────── */
.g-horas { margin: 0 0 var(--e-3); color: var(--ink-3); font: 400 var(--t-11)/1.4 var(--mono); }
.g-autos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--e-4); align-items: start; }
.g-auto--falhou { border-left: 2px solid var(--erro); }
.g-auto .o-cartao-titulo { overflow-wrap: break-word; }
.g-unidade + .g-unidade { padding-top: var(--e-2); border-top: 1px solid var(--linha); }
.g-unidade > p { margin: 0; overflow-wrap: anywhere; }
.g-unidade > p + p, .g-unidade > .g-pre { margin-top: var(--e-1); }
.g-unidade-meta { color: var(--ink-3); font-size: var(--t-12); }
.g-cron { margin-top: var(--e-4); }
.g-cron-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e-3); }
.g-cron-quando { margin: 0 0 var(--e-1); color: var(--ink); font-size: var(--t-13); }
.g-cron-comando { margin: 0; overflow-wrap: anywhere; }

/* ── Acessos ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/* a barra presa por baixo do cabeçalho: a pesquisa e o «Adicionar acesso» à mão, também com centenas de acessos */
.g-barra-acessos { position: sticky; top: var(--topo-alt); z-index: 3; display: flex; align-items: center; gap: var(--e-2);
  margin: calc(-1 * var(--e-4)) calc(-1 * var(--e-4)) 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-cartao) var(--r-cartao) 0 0; background: var(--painel); border-bottom: 1px solid var(--linha); }
.g-barra-acessos > .g-pesquisa { flex: 1 1 auto; min-width: 0; }
.g-barra-acessos > .g-pesquisa[hidden] + .o-btn { margin-left: auto; }
.g-barra-acessos > .o-btn { flex: none; }
.g-acoes-acessos .o-btn { flex: 0 0 auto; }
.g-filtros[hidden] { display: none; }
.g-grupo-acessos { border-top: 1px solid var(--linha); }
.g-grupo-acessos:first-child { border-top: 0; }
.g-grupo-acessos > summary {
  display: flex; align-items: center; gap: var(--e-2); min-height: 44px; list-style: none; cursor: pointer;
  color: var(--ink-3); font: 600 var(--t-11)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.g-grupo-acessos > summary::-webkit-details-marker { display: none; }
.g-grupo-acessos > summary:hover { color: var(--ink); }
.g-grupo-acessos > summary .o-ic { transition: transform var(--dur); }
.g-grupo-acessos[open] > summary .o-ic:first-child { transform: rotate(90deg); }
.g-grupo-nome { min-width: 0; }
.g-grupo-acessos > summary .o-contador { margin-left: auto; letter-spacing: 0; text-transform: none; }
.g-acessos-lista { margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.g-acesso {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--e-2) var(--e-3);
  padding: var(--e-3) 0; border-top: 1px solid var(--linha-fraca);
}
.g-acesso:first-child { border-top: 0; }
.g-acesso-corpo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.g-acesso-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); min-width: 0; }
.g-acesso-titulo > b { color: var(--ink); font: 600 var(--t-13)/1.4 var(--sans); overflow-wrap: anywhere; }
.g-acesso-utilizador { min-width: 0; color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono); overflow-wrap: anywhere; }
.g-acesso-meta, .g-acesso-onde, .g-acesso-notas { min-width: 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.45; overflow-wrap: anywhere; }
/* o estado de um acesso gerido pelo ORBIT (a chave de API da Tailscale), em palavras e sem vermelho */
.g-acesso-gerido { min-width: 0; color: var(--ink-2); font-size: var(--t-12); line-height: 1.45; }
.g-acesso-meta { font-family: var(--mono); font-size: var(--t-11); }
.g-acesso-campos { display: flex; flex-wrap: wrap; gap: var(--e-1); min-width: 0; }
.g-campo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.g-acesso-acoes { display: flex; align-items: center; gap: var(--e-1); }
.g-ia-linha { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); min-width: 0; }
.g-ia-rotulo { color: var(--ink-2); font-size: var(--t-13); }
.g-ia-uso { flex: 1 1 200px; min-width: 0; color: var(--ink-3); font-size: var(--t-12); overflow-wrap: anywhere; }
.g-acesso-seta { display: none; }
.g-sem-resultados { margin: var(--e-3) 0; color: var(--ink-3); font-size: var(--t-13); }
.g-zona-importar[hidden] { display: none; }
.g-zona-importar { margin: var(--e-4) 0 0; }
.g-usos, .g-do-os { margin-top: var(--e-4); }
.g-usos-lista { margin: 0; padding: 0; list-style: none; }
.g-uso { padding: var(--e-2) 0; border-top: 1px solid var(--linha-fraca); }
.g-uso:first-child { border-top: 0; }
.g-uso-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.g-uso-titulo b { color: var(--ink); font-weight: 600; font-size: var(--t-13); overflow-wrap: anywhere; }
.g-uso-meta { color: var(--ink-3); font: 400 var(--t-12)/1.45 var(--mono); overflow-wrap: anywhere; }
.g-sistema { margin: 0; }
.g-nota { margin: var(--e-4) 0 0; max-width: 72ch; color: var(--ink-3); font-size: var(--t-12); line-height: 1.5; }
/* o formulário de um acesso: a janela comprida rola por dentro (o véu não rola a página de trás) */
.g-veu { overflow: hidden; touch-action: pinch-zoom; overscroll-behavior: contain; }
.g-janela-longa { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.g-janela-longa .o-janela-acoes { position: sticky; bottom: calc(-1 * var(--e-5)); z-index: 1; margin-bottom: calc(-1 * var(--e-5));
  padding: var(--e-3) 0 var(--e-5); background: var(--painel); border-top: 1px solid var(--linha); }
.g-erro-guardar { flex-basis: 100%; margin: 0; }   /* o «Guardar» sempre à vista, sem descer */
.g-campos-livres { display: flex; flex-direction: column; gap: var(--e-2); }
.g-campo-livre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--e-2); }
.g-campo-livre > .o-btn { justify-self: end; }
.g-secreto { min-height: var(--ctl); align-items: center; }
@media (min-width: 37.5em) {
  .g-campo-livre { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto; }
}
/* importar (A13): as três frases, a zona do ficheiro, o texto livre e a pré-visualização */
.g-importar { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-4); border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel); }
.g-frases { margin: 0; padding-left: 1.4em; color: var(--ink-2); font-size: var(--t-13); line-height: 1.55; }
.g-frases li + li { margin-top: var(--e-1); }
.g-frases li::marker { color: var(--accent-texto); font-family: var(--mono); font-weight: 600; }
.g-zona {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3); padding: var(--e-6) var(--e-4);
  border: 1px dashed var(--linha-2); border-radius: var(--r-caixa); text-align: center;
}
.g-zona.por-cima { border-color: var(--accent-linha); background: var(--accent-fundo); }
.g-zona-texto { margin: 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.5; }
.g-ficheiro-escondido { display: none; }
/* o texto livre cresce com o que se escreve (o crescer() da casca) até meio ecrã: até lá, sem scroll próprio, o dedo em
   cima dele rola a página */
.g-importar textarea { max-height: 50vh; resize: vertical; }
.g-rotas .o-escolha { flex: 1 1 240px; }
.g-previa-cartao .o-cartao-titulo { overflow-wrap: anywhere; }
.g-previa-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e-3); }
.g-previa-linha { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel-2); }
.g-incluir b { color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.g-previa-grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
.g-campo-rotulado { gap: var(--e-1); min-width: 0; margin: 0; }   /* o rótulo à vista por cima do campo (L14) */
.g-campo-previa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1); }
.g-campo-valor { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.g-campo-valor .o-entrada { flex: 1 1 auto; min-width: 0; }
@media (min-width: 37.5em) {
  .g-previa-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-campo-previa { grid-template-columns: 160px minmax(0, 1fr); align-items: center; }
}

/* ── Pessoas ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.g-pessoas { display: flex; flex-direction: column; gap: var(--e-4); }   /* a largura das outras páginas (L42) */
/* no computador, duas colunas: «Quem entra» à esquerda; «As conversas» e «Convidar» à direita; a linha do modo por baixo */
@media (min-width: 64em) {
  .g-pessoas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .g-pessoas > .g-lista-pessoas { grid-row: span 2; }
  .g-pessoas > .g-modo, .g-pessoas > .g-carregar, .g-pessoas > .o-aviso { grid-column: 1 / -1; }
}
.g-conversas-dica { margin: 0; }
/* «Voltar a uma só pessoa»: a linha discreta do fundo, com a ação secundária ao lado (L42) */
.g-modo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.g-modo > .g-pessoa-nota { flex: 1 1 280px; margin: 0; }
.g-pessoas-lista { margin: 0; padding: 0; list-style: none; }
.g-pessoa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--e-3); padding: var(--e-3) 0; border-top: 1px solid var(--linha-fraca); }
.g-pessoa:first-child { border-top: 0; padding-top: 0; }
.g-pessoa--desativada .g-pessoa-corpo { opacity: .75; }
.g-pessoa-corpo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.g-pessoa-nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.g-pessoa-nome > b { color: var(--ink); font: 600 var(--t-15)/1.35 var(--sans); overflow-wrap: anywhere; }
.g-pessoa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.g-pessoa-email { color: var(--ink-3); font-size: var(--t-12); overflow-wrap: anywhere; }
/* o link de recomeço («Repor o segundo passo» sem email no OS): os botões por baixo do link */
.g-recomeco-acoes { margin: var(--e-3) 0 var(--e-4); }
/* como a pessoa entra (a chave de acesso, a app, o email) e a última entrada (18/10) */
.g-pessoa-forma { color: var(--ink-3); font-size: var(--t-12); }
.g-pessoa-nome-por { display: inline-flex; align-items: center; min-height: var(--ctl); font-size: var(--t-13); }
.g-contas-pessoa { margin: var(--e-1) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e-1); }
.g-contas-pessoa li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); color: var(--ink-2); font-size: var(--t-12); }
.g-contas-pessoa .o-ic { color: var(--ink-3); }
.g-pessoa-nota { margin: 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.5; }
.g-convidar-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
@media (min-width: 37.5em) {
  .g-convidar-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
}
.g-convite { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3); border: 1px solid var(--accent-linha); border-radius: var(--r-cartao); background: var(--accent-fundo); }
.g-convite-titulo, .g-convite-nota { margin: 0; color: var(--ink-2); font-size: var(--t-12); line-height: 1.5; overflow-wrap: anywhere; }
.g-convite-titulo b { color: var(--ink); }
.g-convites { display: flex; flex-direction: column; gap: var(--e-2); }
.g-convites .o-grupo-rotulo { margin: var(--e-2) 0 0; }
.g-convites-lista { margin: 0; padding: 0; list-style: none; }
.g-convite-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-2) 0; border-top: 1px solid var(--linha-fraca); }
.g-convite-linha:first-child { border-top: 0; }
.g-convite-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.g-convite-corpo b { color: var(--ink); font-size: var(--t-13); overflow-wrap: anywhere; }

/* ── Toque e telemóvel ─────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 53.75em), (pointer: coarse) {
  .g-so-rato { display: none; }
  .g-grupo-acessos > summary { min-height: 48px; font-size: var(--t-12); }
  .g-horas { font-size: var(--t-12); }
  .g-acesso-meta { font-size: var(--t-12); }
}
@media (max-width: 43.6875em) {
  /* Acessos, no telemóvel: a linha fechada fica compacta (cada linha do texto numa só, com reticências) e «A IA pode
     usar» resume-se na linha do «Onde»; tocar na linha mostra tudo, com o interruptor e o último uso */
  .g-acesso:not(.aberta) .g-acesso-corpo > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .g-acesso:not(.aberta) .g-acesso-campos { flex-wrap: nowrap; }
  .g-acesso:not(.aberta) .g-acesso-notas { display: none; }
  /* «A IA pode usar» fica à vista com a linha fechada (o interruptor e a palavra; o último uso, ao abrir) */
  .g-acesso:not(.aberta) > .g-ia-linha .g-ia-uso { display: none; }
  .g-acesso-seta { display: inline-block; margin-left: auto; align-self: center; color: var(--ink-3); transition: transform var(--dur); }
  .g-acesso.aberta .g-acesso-seta { transform: rotate(180deg); }
  .g-acesso-corpo { cursor: pointer; }
  /* as ações («Revelar» e o ⋯) por baixo do texto: ao lado, apertavam-no numa coluna estreita (o endereço partia em três
     linhas) */
  .g-acesso { grid-template-columns: minmax(0, 1fr); }
  .g-acesso-acoes { justify-content: flex-start; }
  .g-acoes-acessos > .o-btn { flex: 1 1 auto; }
}
@media (max-width: 62.4375em) {
  /* os registos e as mudanças abertos (no «Detalhe técnico») sem altura própria: o dedo em cima deles rola a página (uma
     caixa com scroll próprio apanhava o dedo); as linhas compridas de um diff rolam só de lado */
  .g-pre, .g-diff .o-diff-corpo { max-height: none; overflow-y: visible; }
}
@media (max-width: 37.4375em) {
  /* dois por linha, a meias (com auto, ficavam 57/43 e 54/46); um ímpar fica com a linha toda */
  .g-tarefa .o-acoes > .o-btn, .g-projeto .o-acoes > .o-btn, .g-skill .o-acoes > .o-btn { flex: 1 1 calc(50% - var(--e-1)); }
  .g-pessoa { grid-template-columns: auto minmax(0, 1fr) auto; }
  .g-convite-linha > .o-acoes { width: 100%; }
  .g-convite-linha > .o-acoes > .o-btn { flex: 1 1 auto; }
}

/* (23/10) o router das contas: o agente à espera de uma conta e a conta dele fora (só o admin) */
.g-espera-conta { display: flex; align-items: flex-start; gap: var(--e-2); color: var(--aviso); overflow-wrap: anywhere; }
.g-espera-conta > .o-ic { flex: none; margin-top: 2px; }
.g-conta-fora.o-chip { color: var(--aviso); max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* (23/10) Pessoas: «Pode escrever nas conversas dos outros» em cada pessoa (uma linha da grelha por baixo do nome, até à
   margem direita, com ou sem o ⋯: os interruptores ficam alinhados; 8 px abaixo das contas, o gap da grelha menos 4) e «A WeSolve pode escrever nas conversas das pessoas» por baixo das escolhas de «As conversas», numa linha à
   parte. O rótulo parte em linhas e o interruptor fica sempre à direita (44 px de toque no telemóvel, o ::before da
   casa); 4 px entre o rótulo e a dica */
.g-escreve { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.g-pessoa > .g-escreve { grid-column: 2 / -1; margin-top: calc(-1 * var(--e-1)); }
.g-escreve-linha { align-items: flex-start; }
.g-escreve-linha > .o-interruptor { margin-top: 1px; }
.g-escreve-rotulo { flex: 1 1 auto; min-width: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; }
.g-pessoa--desativada .g-escreve-rotulo { color: var(--ink-3); cursor: default; }
.g-escreve--wesolve { padding-top: var(--e-3); border-top: 1px solid var(--linha-fraca); }