/* ORBIT Empresa — estilo. Mobile primeiro (360 px sem scroll lateral), escala de 4/8 px, claro e escuro. */
:root {
  --fundo: #f6f6f4; --superficie: #ffffff; --superficie-2: #f0f0ed; --linha: #e2e2dd; --texto: #1b1b19;
  --texto-2: #5d5d57; --texto-3: #8a8a83; --acento: #2f5bd3; --acento-texto: #ffffff; --acento-suave: #e6ecfb;
  --ok: #1d7a46; --ok-suave: #e3f3e9; --aviso: #9a6200; --aviso-suave: #fbf0dc; --erro: #b3261e; --erro-suave: #fbe6e4;
  --terminal: #111214; --terminal-texto: #e6e6e3; --sombra: 0 1px 2px rgba(0,0,0,.06);
  --raio: 10px; --raio-p: 6px; --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0e0f10; --superficie: #17181a; --superficie-2: #1f2023; --linha: #2c2d31; --texto: #ececea;
    --texto-2: #b0b0aa; --texto-3: #7d7d78; --acento: #7b9cff; --acento-texto: #0e0f10; --acento-suave: #1d2540;
    --ok: #5fd08f; --ok-suave: #15291e; --aviso: #f0b552; --aviso-suave: #2e2513; --erro: #ff8a80; --erro-suave: #3a1a18;
    --terminal: #0a0a0b; --terminal-texto: #e6e6e3; --sombra: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #0e0f10; --superficie: #17181a; --superficie-2: #1f2023; --linha: #2c2d31; --texto: #ececea;
  --texto-2: #b0b0aa; --texto-3: #7d7d78; --acento: #7b9cff; --acento-texto: #0e0f10; --acento-suave: #1d2540;
  --ok: #5fd08f; --ok-suave: #15291e; --aviso: #f0b552; --aviso-suave: #2e2513; --erro: #ff8a80; --erro-suave: #3a1a18;
  --terminal: #0a0a0b; --terminal-texto: #e6e6e3; --sombra: none; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--fundo); color: var(--texto); font: 15px/1.5 var(--fonte); overflow-x: hidden;
  -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 620; }
h3 { font-size: 14px; font-weight: 600; }
.oculto { display: none !important; }
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); font-size: 13px; }
.mono { font-family: var(--mono); font-size: 13px; }

/* ── entrar ── */
.entrar { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.entrar-caixa { width: 100%; max-width: 380px; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra); }
.marca { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.marca-ponto { width: 24px; height: 24px; border-radius: 50%; background: var(--acento); flex: none;
  box-shadow: inset 0 0 0 5px var(--superficie), 0 0 0 2px var(--acento); }
.marca-nome { font-weight: 650; letter-spacing: .02em; }
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.campo label { font-size: 13px; color: var(--texto-2); }
.entrada { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--superficie); }
.entrada:focus, .botao:focus-visible, .nav a:focus-visible, .interruptor:focus-visible { outline: 2px solid var(--acento);
  outline-offset: 1px; }
.entrada-codigo { font-family: var(--mono); font-size: 24px; letter-spacing: .3em; text-align: center; }
.caixa-marcar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; color: var(--texto-2); }
.caixa-marcar input { width: 18px; height: 18px; margin: 0; }
.mensagem { padding: 8px 12px; border-radius: var(--raio-p); font-size: 14px; margin-bottom: 16px; }
.mensagem.erro { background: var(--erro-suave); color: var(--erro); }
.mensagem.info { background: var(--acento-suave); color: var(--texto); }

/* ── botões ── */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--superficie); cursor: pointer;
  font-weight: 550; white-space: nowrap; }
.botao:hover { background: var(--superficie-2); }
.botao.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.botao.primario:hover { filter: brightness(1.06); }
.botao.perigo { color: var(--erro); }
.botao.pequeno { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.botao.largo { width: 100%; }
.botao:disabled { opacity: .55; cursor: default; }

/* ── a moldura ── */
.app { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.topo .marca { margin: 0; min-width: 0; }
.topo .marca-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; background: var(--superficie); border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom); }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px;
  padding: 4px 2px; color: var(--texto-3); text-decoration: none; font-size: 11px; font-weight: 550; flex: 1 0 64px;
  min-width: 64px; }
.nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a svg { width: 22px; height: 22px; flex: none; }
.nav a[aria-current="page"] { color: var(--acento); }
.principal { padding: 16px 16px 96px; max-width: 1200px; width: 100%; margin: 0 auto; min-width: 0; }
.cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px;
  flex-wrap: wrap; }
.cabeca p { margin: 4px 0 0; color: var(--texto-2); font-size: 14px; }

@media (min-width: 900px) {
  .app { grid-template-columns: 224px 1fr; grid-template-rows: auto 1fr; }
  .topo { grid-column: 1 / -1; }
  .nav { position: sticky; top: 65px; bottom: auto; align-self: start; display: flex; flex-direction: column;
    gap: 4px; padding: 16px 12px; border-top: 0; border-right: 1px solid var(--linha); height: calc(100vh - 65px);
    background: var(--superficie); overflow-x: hidden; overflow-y: auto; }
  .nav a { flex: none; min-width: 0; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 40px; padding: 8px 12px;
    border-radius: var(--raio-p); font-size: 14px; color: var(--texto-2); }
  .nav a svg { width: 18px; height: 18px; }
  .nav a[aria-current="page"] { background: var(--acento-suave); color: var(--texto); }
  .principal { padding: 24px 32px 48px; }
}

/* ── cartões e grelhas ── */
.grelha { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grelha.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px;
  box-shadow: var(--sombra); min-width: 0; }
.cartao.largo { grid-column: 1 / -1; }
.cartao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-top: 1px solid var(--linha); min-width: 0; }
.lista li:first-child { border-top: 0; padding-top: 0; }
.lista .rotulo { min-width: 0; overflow-wrap: anywhere; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.numero { background: var(--superficie-2); border-radius: var(--raio-p); padding: 8px 12px; min-width: 0; }
.numero b { display: block; font-size: 20px; font-weight: 650; }
.numero span { font-size: 12px; color: var(--texto-2); }
.vazio { color: var(--texto-3); font-size: 14px; margin: 0; }

/* pills de estado */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; flex: none; background: var(--superficie-2);
  color: var(--texto-2); }
.pill.ok { background: var(--ok-suave); color: var(--ok); }
.pill.aviso { background: var(--aviso-suave); color: var(--aviso); }
.pill.erro { background: var(--erro-suave); color: var(--erro); }
.pill.acento { background: var(--acento-suave); color: var(--acento); }

/* interruptor */
.acesso { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.interruptor { position: relative; width: 52px; height: 30px; flex: none; border-radius: 15px; border: 0;
  background: var(--linha); cursor: pointer; padding: 0; transition: background .15s; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.interruptor[aria-checked="true"] { background: var(--ok); }
.interruptor[aria-checked="true"]::after { transform: translateX(22px); }
.interruptor:disabled { opacity: .6; cursor: default; }

/* ── estrutura ── */
.estrutura { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1000px) { .estrutura { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.grafo { width: 100%; height: 52vh; min-height: 320px; display: block; background: var(--superficie-2);
  border-radius: var(--raio-p); touch-action: none; cursor: grab; }
.grafo .aresta { stroke: var(--linha); stroke-width: 1; }
.grafo .aresta.liga { stroke: var(--acento); stroke-opacity: .45; }
.grafo .no-pasta { fill: var(--texto-3); }
.grafo .no-nota { fill: var(--acento); }
.grafo .no-nota.solta { fill: var(--aviso); }
.grafo .selecionado { stroke: var(--texto); stroke-width: 2; }
.grafo text { font-size: 10px; fill: var(--texto-2); pointer-events: none; }
.filtro { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filtro .entrada { flex: 1 1 180px; min-height: 40px; }
.nota-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; max-height: 60vh; overflow: auto;
  margin: 0; }
.nota-texto h4 { margin: 12px 0 4px; font-size: 14px; }
.lista-notas { max-height: 40vh; overflow: auto; }
.lista-notas button { all: unset; cursor: pointer; display: block; width: 100%; min-width: 0; }
.lista-notas button:focus-visible { outline: 2px solid var(--acento); }

/* ── chat ── */
.chat { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1000px) { .chat { grid-template-columns: 300px minmax(0, 1fr); } }
.contas { display: flex; flex-direction: column; gap: 8px; }
.conta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversa-item { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; width: 100%;
  padding: 8px 12px; border-radius: var(--raio-p); cursor: pointer; min-width: 0; }
.conversa-item:hover { background: var(--superficie-2); }
.conversa-item[aria-current="true"] { background: var(--acento-suave); }
.conversa-item .linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.conversa-item .titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; min-width: 0; }
.terminal { background: var(--terminal); color: var(--terminal-texto); font: 12.5px/1.45 var(--mono); padding: 12px;
  border-radius: var(--raio-p); height: 56vh; min-height: 280px; overflow: auto; white-space: pre-wrap;
  overflow-wrap: anywhere; margin: 0; }
.compor { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.compor textarea { flex: 1; min-height: 44px; max-height: 200px; resize: vertical; }
.teclas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.teclas .botao { min-height: 32px; padding: 4px 10px; font-size: 13px; font-family: var(--mono); }
.form-linha { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .form-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
select.entrada { appearance: auto; }
.link-login { display: block; overflow-wrap: anywhere; padding: 8px 12px; background: var(--acento-suave);
  border-radius: var(--raio-p); margin: 8px 0; font-size: 14px; }
.codigo-grande { font: 600 24px var(--mono); letter-spacing: .1em; }

/* ── skills e automatismos ── */
.skill-desc { margin: 8px 0; color: var(--texto-2); font-size: 14px; overflow-wrap: anywhere; }
.resultado { margin-top: 8px; padding: 8px 12px; border-radius: var(--raio-p); background: var(--superficie-2);
  font-size: 13px; overflow-wrap: anywhere; }
details summary { cursor: pointer; color: var(--texto-2); font-size: 13px; padding: 4px 0; }
.registo { background: var(--superficie-2); border-radius: var(--raio-p); padding: 8px; font: 12px/1.45 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; margin: 8px 0 0; }
.meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--texto-2); margin-top: 4px; }

/* ── janela (modal da casa: nunca alert/confirm/prompt) ── */
.veu { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: flex; align-items: flex-end;
  justify-content: center; padding: 16px; }
@media (min-width: 600px) { .veu { align-items: center; } }
.janela { width: 100%; max-width: 440px; background: var(--superficie); border-radius: var(--raio); padding: 24px;
  border: 1px solid var(--linha); }
.janela p { color: var(--texto-2); margin: 8px 0 24px; }
.janela .acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.aviso-topo { position: fixed; left: 16px; right: 16px; bottom: 76px; z-index: 40; max-width: 480px; margin: 0 auto;
  padding: 12px 16px; border-radius: var(--raio-p); background: var(--texto); color: var(--fundo); font-size: 14px; }
@media (min-width: 900px) { .aviso-topo { bottom: 24px; } }

/* ── as páginas novas: Contas, Acessos, Pessoas, Localhost, Subagentes, o onboarding ── */
.topo-direita { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topo-direita .quem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
@media (max-width: 480px) { .topo-direita .quem { display: none; } }
.mensagem.aviso-porta { background: var(--aviso-suave); color: var(--texto); }
.erro-texto { color: var(--erro); }
.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lista li.acesso-linha { align-items: flex-start; flex-wrap: wrap; }
.lista li.acesso-linha .rotulo { flex: 1 1 220px; }
.filas { display: grid; grid-template-columns: 1fr; gap: 16px; }
.filas h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.valor-revelado { background: var(--superficie-2); border-radius: var(--raio-p); padding: 12px; font: 14px/1.4 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; max-height: 40vh; overflow: auto; user-select: all; }
.janela form { margin-top: 12px; }
.janela form .acoes { margin-top: 8px; }
.previa-frame { display: block; width: 100%; height: 70vh; min-height: 360px; border: 1px solid var(--linha);
  border-radius: var(--raio-p); background: #fff; }
.terminal.baixo { height: 30vh; min-height: 160px; }
.registo.diff { max-height: 60vh; }
.entrar-caixa.larga { max-width: 760px; }
.onboarding { align-items: flex-start; }
.opcoes { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 16px 0; }
@media (min-width: 560px) { .opcoes { grid-template-columns: 1fr 1fr; } }
.opcao { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 16px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); font-size: 14px; }
.opcao:hover { background: var(--superficie-2); }
.opcao[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); }
.opcao:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.fluxo-conta { margin-top: 0; }
.conta-cartao .meta { align-items: center; }

/* ── Acessos: o formulário, a importação e a pré-visualização (emenda 10) ── */
.janela.larga { max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; }
.campos-livres { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.campo-livre { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.campo-livre .marca-secreto { display: flex; align-items: center; gap: 4px; }
@media (min-width: 600px) { .campo-livre { grid-template-columns: 1fr 1.4fr auto auto; } }
.filtros { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
@media (min-width: 600px) { .filtros { grid-template-columns: 2fr 1fr; } }
.grupo-acessos + .grupo-acessos { margin-top: 16px; }
.grupo-acessos h3 { font-size: 13px; margin-bottom: 8px; }
.zona-ficheiro { border: 1px dashed var(--linha); border-radius: var(--raio); padding: 24px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; }
.zona-ficheiro p { margin: 0; color: var(--texto-2); }
.zona-ficheiro.por-cima { border-color: var(--acento); background: var(--acento-suave); }
.zona-ficheiro:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.importar { margin-top: 16px; }
.importar textarea { width: 100%; resize: vertical; }
.lista.previa li.previa-linha { display: block; }
.previa-linha .incluir { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.previa-grelha { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
@media (min-width: 600px) { .previa-grelha { grid-template-columns: 1fr 1fr; } }
.campo-previa { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 8px; }
@media (min-width: 600px) { .campo-previa { grid-template-columns: 160px 1fr; align-items: center; } }

/* ── Chat: etiquetas, ficheiros, só leitura (emendas 9 e 12) ── */
.filtro-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.filtro-tags:empty { display: none; }
.tag-filtro { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: 12px; border: 1px solid var(--linha); font-size: 12px; cursor: pointer; color: var(--texto-2); }
.tag-filtro[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento); border-color: transparent; }
.tag-filtro:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 8px; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px;
  background: var(--superficie-2); color: var(--texto-2); font-size: 12px; line-height: 1; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-tirar { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 16px;
  height: 16px; border-radius: 8px; font-size: 14px; line-height: 1; color: var(--texto-3); }
.tag-tirar:hover, .tag-tirar:focus-visible { background: var(--linha); color: var(--texto); }
.compor .botao { flex: 0 0 auto; }
.a-largar { outline: 2px dashed var(--acento); outline-offset: -2px; background: var(--acento-suave); }
.ficheiros { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.ficheiros:empty { display: none; }
.ficheiro { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border: 1px solid var(--linha);
  border-radius: var(--raio-p); color: var(--texto); text-decoration: none; }
.ficheiro:hover { background: var(--superficie-2); }
.ficheiro img { width: 100%; height: 72px; object-fit: cover; border-radius: 4px; background: var(--superficie-2); }
.ficheiro-ext { display: flex; align-items: center; justify-content: center; height: 72px; border-radius: 4px;
  background: var(--superficie-2); color: var(--texto-3); font: 600 13px var(--mono); }
.ficheiro-nome { font-size: 13px; overflow-wrap: anywhere; line-height: 1.3; }

/* ── Equipa ── */
.convite-link { margin-top: 12px; padding: 12px; border-radius: var(--raio-p); background: var(--acento-suave); }
.convite-link .entrada { width: 100%; }
.lista li.pessoa { align-items: flex-start; flex-wrap: wrap; }
.lista li.pessoa .rotulo { flex: 1 1 220px; }
.contas-pessoa { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }