/* ORBIT Empresa · paginas/configuracoes.css — as Configurações: o «Acesso da WeSolve» no topo; as Contas de IA, as
   Pessoas, o Cofre, as Integrações, a Tailscale, a Segurança e a Aparência.

   Só o que é desta página, por cima dos componentes do sistema visual (visual.css: o-seps, o-cartao, o-lista, o-escolha,
   o-janela…) e das peças da casca e da gestão, que não se redefinem aqui. Todas as classes novas levam o prefixo cfg-.
   As cores só pelas fichas; as medidas na escala 4/8; no telemóvel (até 53,75 em, ou toque deitado com pouca altura), os
   alvos com 44 px e os campos com 16 px, nada para o lado. */

/* ── a página e os separadores ─────────────────────────────────────────────────────────────────────────────────────── */
.cfg-seps { margin: 0 0 var(--e-4); }
.cfg-sep { flex: none; }
.cfg-parte { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.cfg-parte:focus { outline: none; }
.cfg-parte-cabeca { min-width: 0; }
.cfg-parte-cabeca:not(:has(.cfg-parte-linha)) { display: contents; }
.cfg-parte-linha { margin: 0; max-width: 72ch; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.cfg-parte-linha a { color: var(--accent-texto); text-underline-offset: 2px; }
/* a linha da parte com o que fica à direita (o «Acrescentar uma conta», o contador das Pessoas); no telemóvel, por baixo */
.cfg-parte-cabeca--fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.cfg-parte-cabeca--fim > .cfg-parte-linha { flex: 1 1 320px; }
.cfg-parte-acoes { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--e-2); max-width: 100%; }
.cfg-parte-acoes:empty { display: none; }
.cfg-parte-contador { flex: none; }
@media (pointer: coarse) {
  /* a ligação «Segurança» da linha do Cofre: 44 px de altura no toque, sem mexer no texto à volta */
  .cfg-parte-linha a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* ── os cartões ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cfg-cartao { min-width: 0; }
/* o ⋯ fica na linha do título também no telemóvel (o título e o estado partem por baixo dele, não o contrário) */
.cfg-cartao-cabeca { flex-wrap: nowrap; align-items: flex-start; }
.cfg-cartao-cabeca .o-cartao-titulo { flex: 1 1 auto; flex-wrap: wrap; }
.cfg-cartao-cabeca:has(> .cfg-circulo) .o-cartao-titulo { min-height: 32px; }   /* o título ao meio do círculo */
.cfg-cartao-cabeca > .o-cartao-extra { flex: none; }
/* o ícone num círculo (o cartão do apoio da referência visual): o «Acesso da WeSolve» */
.cfg-circulo {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--apoio-linha);
  border-radius: 50%; background: var(--apoio-fundo); color: var(--ink);
}
.cfg-circulo .o-ic { width: 18px; height: 18px; }
.cfg-detalhe > .o-detalhe-corpo > :first-child { margin-top: 0; }
.cfg-quebra { overflow-wrap: anywhere; white-space: normal; }
.cfg-bloco { display: block; margin-top: 2px; }

/* ── a Segurança: o convite da chave de acesso no topo; depois, duas colunas no computador (pela ordem do desenho, de
   cima para baixo), uma no telemóvel ──────────────────────────────────────────────────────────────────────────────── */
.cfg-chave-destaque { margin: 0 0 var(--e-4); }
.cfg-aviso-rec + .cfg-chave-destaque { margin-top: var(--e-4); }
.cfg-colunas { column-count: 1; column-gap: var(--e-4); }
.cfg-colunas > .o-cartao { break-inside: avoid; margin: 0 0 var(--e-4); }
@media (min-width: 56.25em) { .cfg-colunas { column-count: 2; } }
.cfg-aviso-rec { margin: 0; }
/* (23/10) o aviso aos admins das senhas repostas sem caixa de email: no topo, antes de tudo */
.cfg-senhas-repostas { margin: 0 0 var(--e-4); }
.cfg-senhas-repostas .o-aviso-texto { margin-top: var(--e-1); }
.cfg-formas-lista > .cfg-forma + .cfg-forma { border-top: 1px solid var(--linha); }
.cfg-forma > .o-linha { padding-left: 0; padding-right: 0; border-top: 0; }
.cfg-forma > .o-linha > .o-ic { align-self: flex-start; margin-top: 3px; color: var(--ink-3); }
.cfg-forma > .o-detalhe { margin: 0 0 var(--e-3); }
.cfg-forma-nota { color: var(--ink-2); }
.cfg-chaves .o-linha, .cfg-aparelhos-lista .o-linha, .cfg-registo .o-linha { padding-left: 0; padding-right: 0; }
.cfg-aparelhos-lista .o-linha > .o-ic { align-self: flex-start; margin-top: 3px; color: var(--ink-3); }
.cfg-registo .o-linha { min-height: 0; }
.cfg-registo-texto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; color: var(--ink-2);
  font: 400 var(--t-12)/1.45 var(--mono); overflow-wrap: anywhere; }
.cfg-registo-texto > span { min-width: 0; }
.cfg-root-corpo { min-width: 0; }
.cfg-root-topo { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; }
.cfg-root-estado { flex: none; }
.cfg-root-cmd { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 100%; margin: 0; padding: 2px 0;
  border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 400 var(--t-12)/1.45 var(--mono); }
@media (pointer: coarse) { .cfg-root-cmd { min-height: var(--ctl); } }
.cfg-root-cmd > code { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-root-cmd--inteiro > code { white-space: pre-wrap; overflow-wrap: anywhere; }
.cfg-root-meta { margin: 2px 0 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.45; overflow-wrap: anywhere; }
.cfg-senha-form { min-width: 0; }
.cfg-conversas-escolhas .o-escolha { flex: 1 1 200px; }

/* ── «Confirma que és tu» e as janelas das Configurações ─────────────────────────────────────────────────────────── */
.cfg-c-formas { gap: var(--e-3); margin: 0 0 var(--e-3); }
.cfg-c-form { gap: var(--e-3); }
.cfg-janela .o-cartao-texto { margin: 0 0 var(--e-3); }
.cfg-janela .o-acoes { margin: 0 0 var(--e-3); }
.cfg-chave-passe { margin: 0 0 var(--e-3); }

/* ── o QR, a app de códigos e os códigos de recuperação ──────────────────────────────────────────────────────────── */
/* escuro sobre claro, também no tema escuro: os módulos em --void sobre um quadrado em --ink */
.cfg-qr-caixa { display: flex; justify-content: center; min-width: 0; margin: var(--e-2) 0 var(--e-3); }
.cfg-qr { display: block; width: min(240px, 100%); height: auto; border-radius: var(--r); }
.cfg-qr-fundo { fill: var(--ink); }
.cfg-qr-modulos { fill: var(--void); }
.cfg-passo { margin: 0 0 var(--e-2); color: var(--ink); font-size: var(--t-14); line-height: 1.5; }
.cfg-app-abrir { margin: 0 0 var(--e-3); }
.cfg-segredo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; margin: var(--e-1) 0 var(--e-4); }
.cfg-segredo-valor {
  flex: 1 1 200px; min-width: 0; padding: var(--e-2) var(--e-3); border: 1px dashed var(--linha-2); border-radius: var(--r);
  background: var(--void); color: var(--ink); font: 500 var(--t-14)/1.5 var(--mono); letter-spacing: .04em; overflow-wrap: anywhere;
  user-select: all; -webkit-user-select: all;
}
.cfg-app-form { gap: var(--e-3); }
.cfg-codigos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-3);
  padding: var(--e-3) var(--e-4) var(--e-3) var(--e-8); border: 1px solid var(--linha); border-radius: var(--r-caixa); background: var(--void);
  color: var(--ink); font-size: var(--t-14); line-height: 1.5;
}
.cfg-codigos li { padding-left: var(--e-1); overflow-wrap: anywhere; }
.cfg-codigos li::marker { color: var(--ink-3); font-size: var(--t-12); }
@media (max-width: 22.5em) { .cfg-codigos { grid-template-columns: minmax(0, 1fr); } }

/* ── o «Acesso da WeSolve» (20/10): no topo da página, por cima dos separadores ─────────────────────────────────────── */
.cfg-aw { margin: 0 0 var(--e-4); }
.cfg-aw-linha { align-items: flex-start; }
.cfg-aw-linha > .o-interruptor { margin-top: 2px; }   /* ao meio da primeira linha da frase */
.cfg-aw-linha > .o-interruptor[aria-busy="true"] { opacity: .55; cursor: progress; }
.cfg-aw-frase { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink); font-size: var(--t-13); line-height: 1.5; }
.cfg-aw-mais { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.cfg-aw-mais[hidden] { display: none; }
.cfg-aw-mais > .o-aviso { margin-top: var(--e-1); }
.cfg-aw-demo b { color: var(--ink-2); font-weight: 600; }
/* (23/10, a FC) com as Tarefas ligadas (a referência: configuracoes.html da segunda volta): a frase com a linha dos
   pedidos por baixo, e o interruptor «A WeSolve vê as tarefas» separado por uma linha */
.cfg-aw-texto { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--e-1); min-width: 0; }
/* o interruptor do acesso ao meio da primeira linha da frase (13 px × 1,5 de linha; o interruptor tem 24 px) */
.cfg-aw-linha--tarefas > .o-interruptor { margin-top: calc((var(--t-13) * 1.5 - 24px) / 2); }
.cfg-aw-opcao { margin-top: var(--e-1); padding-top: var(--e-4); border-top: 1px solid var(--linha); }
/* items-start: o texto tem várias linhas e o interruptor fica com a primeira (o título, com a altura dele: 24 px) */
.cfg-aw-ve-linha { align-items: flex-start; }
.cfg-aw-ve-linha > .o-interruptor[aria-busy="true"] { opacity: .55; cursor: progress; }
.cfg-aw-ve-linha .casca-opcao-titulo { min-height: 24px; line-height: 24px; }
/* a pill sempre ao lado do nome, também quando o nome parte em duas linhas: o título em linha (não em flex) e a última
   palavra presa à pill */
.cfg-aw-ve-titulo { display: block; }
.cfg-aw-junto { white-space: nowrap; }
.cfg-aw-ve-estado { display: inline-flex; align-items: center; height: 24px; margin-left: var(--e-2); vertical-align: top; }

/* ── a Tailscale ───────────────────────────────────────────────────────────────────────────────────────────────────── */
/* no computador, os cartões lado a lado (o do acesso, mais largo); no telemóvel, um por baixo do outro */
.cfg-ts-grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: start; min-width: 0; }
@media (min-width: 56.25em) {
  .cfg-ts-grelha { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .cfg-ts-grelha > .cfg-ts-pergunta { grid-column: 1 / -1; }
}
.cfg-ts-escolhas .o-escolha { flex: 1 1 220px; }
.cfg-ts-form { gap: var(--e-3); padding-top: var(--e-1); }
.cfg-passos-lista { margin: 0; padding-left: var(--e-5); }
.cfg-passos-lista li + li { margin-top: var(--e-1); }
.cfg-fases { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.cfg-fase { display: flex; align-items: center; gap: var(--e-2); color: var(--ink-3); font-size: var(--t-13); line-height: 1.5; }
.cfg-fase--feita { color: var(--ink); }
.cfg-fase--feita > .o-ic { color: var(--ok); }
.cfg-fase--agora { color: var(--ink-2); }
.cfg-fase:not(.cfg-fase--agora) > .o-pontos { visibility: hidden; }
.cfg-ts-link { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cfg-ts-link--lado { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.cfg-ts-link--lado .cfg-qr-caixa { margin: 0; }
.cfg-ts-link--lado .cfg-qr { width: 200px; }
.cfg-ts-link-texto { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cfg-link { margin: 0; color: var(--ink-2); font-size: var(--t-12); overflow-wrap: anywhere; }
.cfg-ts-linha { align-items: flex-start; }
.cfg-ts-frase { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.cfg-ts-frase b { color: var(--ink); font-weight: 600; }
.cfg-ts-conta { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-1); overflow-wrap: anywhere; }
.cfg-detalhes { min-height: 0; padding: 0; color: var(--accent-texto); font-size: var(--t-12); text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .cfg-detalhes { min-height: var(--ctl); } }
.cfg-ts-partilha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); min-width: 0;
  padding-top: var(--e-3); border-top: 1px solid var(--linha); }
.cfg-ts-partilha > .o-cartao-texto { flex: 1 1 220px; }
.cfg-ts-partilha > .o-detalhe { flex: 1 1 100%; }
.cfg-ts-falta { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.cfg-ts-alerta { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; color: var(--erro); font-size: var(--t-13); line-height: 1.5; }
.cfg-ts-alerta > .o-ic { height: 1.5em; flex: none; }
.cfg-ts-registo-caixa { min-width: 0; }
.cfg-ts-registo-caixa > .o-grupo-rotulo { margin: var(--e-2) 0 var(--e-1); }
.cfg-ts-erro { margin: 0; }
.cfg-ts-tecnico .o-dados { margin-top: var(--e-2); }

/* os itens da Tailscale em «À tua espera», na Visão do admin */
.cfg-ts-espera > .o-linha { padding-left: 0; padding-right: 0; }
.cfg-ts-espera > .o-detalhe { margin: 0 0 var(--e-2); }
.cfg-ts-espera + .cfg-ts-espera { border-top: 1px solid var(--linha); }
.cfg-entrada-item > .o-linha { padding-left: 0; padding-right: 0; }
.cfg-entrada-item + .cfg-entrada-item { border-top: 1px solid var(--linha); }

/* ── as Integrações (22/10): um cartão por serviço; a Hostinger ────────────────────────────────────────────────────── */
.cfg-int { min-width: 0; }
.cfg-hg .casca-def-corpo { gap: var(--e-4); }
.cfg-hg-sobre { max-width: 72ch; }
.cfg-hg-problema, .cfg-hg-aviso { margin: 0; }
/* cada grupo (a chave, as áreas) separado do de cima por uma linha */
.cfg-hg-grupo { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.cfg-hg-grupo-titulo { margin: 0; }
.cfg-hg-grupo > .o-dica { max-width: 72ch; }
.cfg-hg-acesso-campo, .cfg-hg-campo-zona { max-width: 36rem; min-width: 0; }
.cfg-hg-campo-zona[hidden] { display: none; }
.cfg-hg-form { gap: var(--e-3); max-width: 36rem; min-width: 0; }
.cfg-hg-sem-acessos { max-width: 72ch; }
/* como a IA entra: as duas formas lado a lado (no telemóvel, uma por baixo da outra), cada uma com o aviso dela */
.cfg-hg-modos > .cfg-hg-modo { flex: 1 1 16rem; }
.cfg-hg-modo .o-escolha-titulo { flex-wrap: wrap; }
/* o login com a conta: o estado, um problema, as ações ou, a meio, os passos, o link e o endereço final */
.cfg-hg-login, .cfg-hg-login-pendente { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; max-width: 36rem; }
.cfg-hg-login-estado { margin: 0; color: var(--ink); font-size: var(--t-13); line-height: 1.5; }
.cfg-hg-login-estado--expirado { color: var(--erro); }
.cfg-hg-login-erro { margin: 0; }
.cfg-hg-login-passos { color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; overflow-wrap: anywhere; }
.cfg-hg-login > .o-dica { max-width: 72ch; }
/* as áreas: uma por baixo da outra; no computador largo, duas colunas */
.cfg-hg-areas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 56.25em) { .cfg-hg-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.cfg-hg-area {
  display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; padding: var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--r); background: var(--painel-2);
}
.cfg-hg-area[data-nivel="tudo"] { border-color: var(--aviso-fundo); }
/* o nome e a nota à esquerda, o nível à direita, ao meio um do outro */
.cfg-hg-area-topo { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.cfg-hg-area-texto { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-hg-area-nome { color: var(--ink); font: 600 var(--t-14)/1.4 var(--sans); }
.cfg-hg-area-nota { margin: 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.45; }
.cfg-hg-area-topo > .o-select-caixa { flex: 0 0 11rem; }
.cfg-hg-frase { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.cfg-hg-area > .o-aviso[hidden] { display: none; }
.cfg-hg-ops { background: var(--painel); }
/* as operações de uma área: um grupo por nível, cada operação numa linha (o nome da Hostinger e o da API) */
.cfg-hg-ops-corpo { display: flex; flex-direction: column; gap: var(--e-3); }
.cfg-hg-ops-grupo { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cfg-hg-ops-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; color: var(--ink-2);
  font-size: var(--t-12); line-height: 1; }
.cfg-hg-ops-n { color: var(--ink-3); font-family: var(--mono); }
.cfg-hg-ops-lista { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.cfg-hg-op { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.cfg-hg-op-texto { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-hg-op-titulo { color: var(--ink); font-size: var(--t-13); line-height: 1.4; overflow-wrap: anywhere; }
.cfg-hg-op-nome { color: var(--ink-3); font: 400 var(--t-11)/1.4 var(--mono); overflow-wrap: anywhere; }
/* as mudanças por guardar: a faixa logo a seguir às áreas */
.cfg-hg-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); min-width: 0;
  padding: var(--e-3); border: 1px solid var(--accent-linha); border-radius: var(--r); background: var(--accent-fundo);
}
.cfg-hg-barra[hidden] { display: none; }
.cfg-hg-barra-texto { margin: 0; color: var(--ink); font-size: var(--t-13); font-weight: 600; line-height: 1.5; }
.cfg-hg-acoes-caixa { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cfg-hg-acoes-caixa > .casca-erro { margin: 0; }
/* o último teste: o ícone na primeira linha da frase (items-start de propósito: a frase pode partir em várias linhas) */
.cfg-hg-teste { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cfg-hg-teste-linha { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; color: var(--ink); font-size: var(--t-13);
  line-height: 1.5; overflow-wrap: anywhere; }
.cfg-hg-teste-linha > .o-ic { flex: none; height: 1.5em; }
.cfg-hg-teste--ok .cfg-hg-teste-linha > .o-ic { color: var(--ok); }
.cfg-hg-teste--erro .cfg-hg-teste-linha > .o-ic { color: var(--erro); }
.cfg-hg-ultima { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cfg-hg-ultima-linha { overflow-wrap: anywhere; }
.cfg-hg-registo { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding: 0; list-style: none;
  font: 400 var(--t-12)/1.45 var(--mono); overflow-wrap: anywhere; }
.cfg-hg-tecnico .o-dados { margin-top: var(--e-2); }

/* ── a Aparência ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.cfg-cartao-aparencia .casca-def-corpo { gap: var(--e-4); }

@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .cfg-seps { margin-bottom: var(--e-3); }
  /* os separadores sem os ícones e com menos margem; os seis não cabem todos a 390 px: a fila rola por dentro, com o
     escolhido à vista (o cfgVerSeparador), e a página não rola para o lado */
  .cfg-sep { padding: 0 var(--e-2); }
  .cfg-sep > .o-ic { display: none; }
  .cfg-ts-link--lado { grid-template-columns: minmax(0, 1fr); }
  /* o «Acrescentar uma conta» à largura toda, e o contador, por baixo da frase */
  .cfg-parte-cabeca--fim { flex-direction: column; align-items: stretch; }
  .cfg-parte-cabeca--fim > .cfg-parte-linha { flex: none; }
  .cfg-parte-acoes > .o-btn { flex: 1 1 100%; }
  .cfg-ts-link--lado .cfg-qr { width: min(240px, 100%); }
  /* as Integrações: o nível por baixo do nome da área, à largura toda; os botões também */
  .cfg-hg-area-topo { flex-direction: column; align-items: stretch; }
  .cfg-hg-area-topo > .o-select-caixa { flex: none; }
  .cfg-hg-acoes > .o-btn, .cfg-hg-barra-acoes > .o-btn, .cfg-hg-form-acoes > .o-btn { flex: 1 1 100%; }
  .cfg-hg-login-acoes > .o-btn, .cfg-hg-login-abrir > .o-btn { flex: 1 1 100%; }
  .cfg-hg-modos > .cfg-hg-modo { flex-basis: 100%; }
  .cfg-hg-barra { flex-direction: column; align-items: stretch; }
}

/* ── o Sistema (23/10, a FV: só com as Tarefas ligadas, só o admin) ─────────────────────────────────────────────────
   «A proteção» e «A saúde» lado a lado (no telemóvel, um por baixo do outro), cada um com o estado ao lado do nome (a
   regra da casa) e as linhas da Saúde de sempre (vis-saude-linha, do visao.css), sem as redefinir. */
.cfg-sistema { min-width: 0; }
.cfg-sistema-grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); align-items: start; }
.cfg-sistema-grupo { gap: var(--e-2); }
.cfg-sistema-grupo > .o-cartao-cabeca { gap: var(--e-2) var(--e-3); }
.cfg-sistema-linhas { display: flex; flex-direction: column; min-width: 0; }
.cfg-sistema-linhas > .vis-saude-linha:first-child { border-top: 0; }
.cfg-sistema-linhas .o-acoes { margin-top: var(--e-1); }
.cfg-sistema .vis-saude-fazer a { color: var(--accent-texto); text-underline-offset: 2px; }
/* o cofre que mudou (o cartão da Visão de antes), por cima dos acessos; a tarefa na linha de cada mudança em letra normal
   (a linha é mono, das horas) */
.cfg-cofre-mudou { min-width: 0; }
.cfg-cofre-mudou:not(:has(section)) { display: none; }
.cfg-cofre-mudou .vis-linha-meta a { font-family: var(--sans); text-underline-offset: 2px; }
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .cfg-sistema-grelha { grid-template-columns: minmax(0, 1fr); }
}
/* no telemóvel, as ligações no meio do texto com 44 px de alvo, sem mexer na linha */
@media (max-width: 53.75em), (pointer: coarse) {
  .cfg-sistema .vis-saude-frase a, .cfg-parte[data-parte="sistema"] .cfg-parte-linha a,
  .cfg-cofre-mudou .vis-linha-meta a { display: inline-block; padding: var(--e-4) 0; margin: calc(-1 * var(--e-4)) 0; }
}

/* ── os Servidores ligados (23/10: só o admin, só com eles ligados) ─────────────────────────────────────────────────
   Os pedidos à espera («É este?») em destaque e primeiro; o código grande e em mono; cada servidor num bloco com o estado
   ao lado do nome; o SHA-256 e a política partem a linha (nada para o lado no telemóvel). */
.cfg-srv { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.cfg-srv .casca-def-corpo { gap: var(--e-4); }
.cfg-srv .o-aviso { margin: 0; }
.cfg-srv-portas { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.cfg-srv-portas > legend { margin: 0 0 var(--e-2); padding: 0; }
.cfg-srv-sim, .cfg-srv-form { gap: var(--e-3); max-width: 36rem; min-width: 0; }
.cfg-srv-numero { max-width: 12rem; }
.cfg-srv-codigo-caixa { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; max-width: 36rem; padding: var(--e-4);
  border: 1px dashed var(--linha-2); border-radius: var(--r); background: var(--painel-2); }
.cfg-srv-codigo-valor { margin: 0; color: var(--ink); font: 600 var(--t-24)/1.2 var(--mono); letter-spacing: .12em; overflow-wrap: anywhere; }
.cfg-srv-codigo-valor:focus { outline: none; }
.cfg-srv-servidor { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.cfg-srv-lista .casca-def-corpo > .cfg-srv-servidor:first-child,
.cfg-srv-lista .o-detalhe-corpo > .cfg-srv-servidor:first-child { padding-top: 0; border-top: 0; }
.cfg-srv-servidor-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; }
.cfg-srv-servidor-nome { margin: 0; color: var(--ink); font: 600 var(--t-14)/1.4 var(--sans); overflow-wrap: anywhere; }
.cfg-srv-lista .o-cartao-titulo:focus { outline: none; }
.cfg-srv-politica { margin: 0; padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--r); background: var(--painel-2);
  color: var(--ink-2); font: 400 var(--t-12)/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.cfg-srv-problemas { margin: var(--e-2) 0 0; padding-left: var(--e-5); }
.cfg-srv-shas { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cfg-srv-sha { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-srv-sha-nome { color: var(--ink-3); font-size: var(--t-12); line-height: 1.4; }
.cfg-srv-sha-valor { color: var(--ink); font: 500 var(--t-12)/1.45 var(--mono); overflow-wrap: anywhere; }
.cfg-srv-versao { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cfg-srv-versao + .cfg-srv-versao { margin-top: var(--e-4); }
.cfg-srv-versao > .o-rotulo { margin: 0; }
.cfg-srv-registo { min-width: 0; }
.cfg-srv-registo-lista { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.cfg-srv-registo-lista > li { color: var(--ink-2); font-size: var(--t-13); line-height: 1.45; overflow-wrap: anywhere; }
.cfg-srv-registo-quando { color: var(--ink-3); font: 400 var(--t-12)/1.45 var(--mono); }
@media (max-width: 53.75em), (pointer: coarse) {
  .cfg-srv-numero { max-width: none; }
}

/* (23/10) a ordem do router entre as contas da Equipa (as Contas de IA, só o admin) */
.cfg-ordem { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cfg-ordem .o-cartao-titulo { margin: 0; }
.cfg-ordem-dica { margin: 0; }
.cfg-ordem-lista { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.cfg-ordem-item { display: flex; align-items: center; gap: var(--e-3); min-width: 0; padding: var(--e-2) 0;
  border-top: 1px solid var(--linha); }
.cfg-ordem-item:first-child { border-top: 0; }
.cfg-ordem-n { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--painel-2); color: var(--ink-2); font: 600 var(--t-12)/1 var(--sans); }
.cfg-ordem-nome { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cfg-ordem-nome b { font-weight: 600; overflow-wrap: anywhere; }
.cfg-ordem-estado { color: var(--ink-3); font-size: var(--t-12); line-height: 1.45; overflow-wrap: anywhere; }
.cfg-ordem-estado--fora { color: var(--aviso); }
.cfg-ordem-acoes { display: flex; flex: none; gap: var(--e-1); }

/* ── o fundo do Cofre: as credenciais da AT (23/10, só com `cofre_at` ligado) ─────────────────────────────────────── */
.cfg-at .casca-def-corpo { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cfg-at-pesquisa { max-width: 480px; }
.cfg-at-lista { max-height: 60vh; overflow-y: auto; }
.cfg-at-linha .o-linha-titulo { overflow-wrap: anywhere; }
.cfg-at-sem-nome { color: var(--ink-3); font-weight: 400; font-style: italic; }
.cfg-at-nota, .cfg-at-vazio, .cfg-at-por-preparar { margin: 0; }
.cfg-at-sessao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4);
  padding: var(--e-2) var(--e-3); border: 1px solid var(--ok-linha); border-radius: var(--r-caixa); background: var(--ok-fundo); }
.cfg-at-sessao[hidden] { display: none; }
.cfg-at-sessao-texto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; color: var(--ink); font-size: var(--t-13); }
.cfg-at-sessao-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* o visor: uma camada de ecrã inteiro (por cima de tudo menos dos avisos), a cabeça, o ecrã da AT e a linha de escrever */
.cfg-at-v { position: fixed; inset: 0; z-index: var(--z-veu); display: flex; flex-direction: column; gap: var(--e-2);
  padding: max(var(--e-2), env(safe-area-inset-top, 0px)) var(--e-3) max(var(--e-2), env(safe-area-inset-bottom, 0px));
  background: var(--void); }
.cfg-at-v-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.cfg-at-v-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-at-v-titulo { margin: 0; color: var(--ink); font: 600 var(--t-15)/1.3 var(--sans); overflow-wrap: anywhere; }
.cfg-at-v-estado { color: var(--ink-2); font-size: var(--t-12); overflow-wrap: anywhere; }
.cfg-at-v-url { color: var(--ink-3); font-size: var(--t-11); overflow-wrap: anywhere; }
.cfg-at-v-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cfg-at-v-ecra { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0;
  border: 1px solid var(--linha); border-radius: var(--r-caixa); background: var(--painel-2); overflow: hidden; }
.cfg-at-v-ecra:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg-at-v-img { display: block; max-width: 100%; max-height: 100%; aspect-ratio: 1280 / 800; object-fit: contain;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
.cfg-at-v-img[hidden] { display: none; }
.cfg-at-v-espera { padding: var(--e-6); text-align: center; }
.cfg-at-v-espera[hidden] { display: none; }
.cfg-at-v-erro { margin: 0 0 var(--e-3); color: var(--erro); }
.cfg-at-v-pe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.cfg-at-v-escrever { flex: 1 1 240px; min-width: 0; }
@media (max-width: 53.75em) {
  /* no telemóvel, os botões da cabeça só com o ícone (o nome fica no title e no leitor de ecrã) */
  .cfg-at-v-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cfg-at-v-acoes .o-btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .cfg-at-v-escrever { font-size: 16px; }
}