/* 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 (25/10/2026: a caixa do QR é
   da ilha escura, o-sempre-escuro, para ficar assim também no modo claro, onde estas duas fichas trocam de lado) */
.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; }
/* (24/10) «Só os aparelhos da empresa»: três passos numerados, cada um com o título, a dica e o botão para o site */
.cfg-ts-rede-passos { display: flex; flex-direction: column; gap: var(--e-4); margin: 0; padding-left: var(--e-5); min-width: 0; }
.cfg-ts-rede-passo { min-width: 0; padding-left: var(--e-1); }
.cfg-ts-rede-passo::marker { color: var(--ink-2); font: 600 var(--t-14)/1.5 var(--sans); }
.cfg-ts-rede-passo > * { margin: 0; }
.cfg-ts-rede-passo > * + * { margin-top: var(--e-2); }
.cfg-ts-rede-titulo { margin: 0; color: var(--ink); font-size: var(--t-14); line-height: 1.5; }
.cfg-ts-rede-nota { margin: 0; }
.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); }
/* (25/10/2026) o «Só pela Tailscale»: a frase, o interruptor, a contagem, «O que falta» (✓ ou ✗ e o porquê, com os botões
   da rede), «Quem fica de fora» e «Como voltar a abrir»; no computador, a largura toda da grelha */
@media (min-width: 56.25em) { .cfg-ts-grelha > .cfg-so { grid-column: 1 / -1; } }
.cfg-so-zona { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cfg-so-zona > * { margin: 0; }
.cfg-so-linha { align-items: flex-start; }
.cfg-so-linha > .o-interruptor[aria-busy="true"] { opacity: .55; cursor: progress; }
.cfg-so-sw-texto { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink); font-size: var(--t-13); line-height: 1.5; }
.cfg-so-sw-texto b { font-weight: 600; }
.cfg-so-conta { color: var(--ink); font-size: var(--t-13); font-variant-numeric: tabular-nums; line-height: 1.5; }
.cfg-so-sub { margin: 0 0 var(--e-2); color: var(--ink); font: 600 var(--t-13)/1.5 var(--sans); }
.cfg-so-falta { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.cfg-so-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--e-2); align-items: start; min-width: 0; }
.cfg-so-marca { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; color: var(--erro); font: 600 var(--t-12)/1 var(--sans); background: var(--painel-2); }
.cfg-so-marca--ok { color: var(--ok); }
.cfg-so-item-corpo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.cfg-so-item-corpo > * { margin: 0; }
.cfg-so-item-titulo { color: var(--ink); font-size: var(--t-13); line-height: 1.5; overflow-wrap: anywhere; }
.cfg-so-item--ok .cfg-so-item-titulo { color: var(--ink-2); }
.cfg-so-porque, .cfg-so-nome, .cfg-so-regra { overflow-wrap: anywhere; }
.cfg-so-acoes { margin-top: var(--e-1); }
.cfg-so-fora { padding-top: var(--e-3); border-top: 1px solid var(--linha); }
.cfg-so-fora > p { margin: 0; }
.cfg-so-fora-lista { display: flex; flex-direction: column; gap: var(--e-1); margin: var(--e-2) 0 0; padding: 0; list-style: none; }
.cfg-so-fora-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--e-2);
  min-width: 0; color: var(--ink); font-size: var(--t-13); line-height: 1.5; }
.cfg-so-fora-nome { min-width: 0; overflow-wrap: anywhere; }
.cfg-so-ip, .cfg-so-voltar-lista code, .cfg-so-valores code { overflow-wrap: anywhere; }
.cfg-so-janela-lista { display: flex; flex-direction: column; gap: var(--e-2); margin: 0 0 var(--e-3); padding-left: var(--e-5);
  color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.cfg-so-janela-nota { margin: 0 0 var(--e-3); }
.cfg-so-form { gap: var(--e-3); padding-top: var(--e-1); }
.cfg-so-valores { margin: 0 0 var(--e-2); }
/* (25/10/2026) a porta da WeSolve no «Acesso da WeSolve»: os endereços (com o «Mudar» ao lado), a restrição e a reposição */
.cfg-aw-ips { overflow-wrap: anywhere; }
.cfg-aw-mudar { min-height: 0; padding: 0; color: var(--accent-texto); font-size: inherit; text-decoration: underline;
  text-underline-offset: 2px; }
@media (pointer: coarse) { .cfg-aw-mudar { display: inline-flex; justify-content: center; min-width: 44px; min-height: var(--ctl); } }
.cfg-aw-mudar-form { gap: var(--e-3); padding-top: var(--e-1); }
.cfg-aw-mudar-agora { margin: 0 0 var(--e-2); overflow-wrap: anywhere; }
.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; }
  /* (25/10/2026, a voz) o separador mais curto (a «Voz») também com os 44 px de largura do toque */
  .cfg-sep { min-width: 44px; justify-content: center; }
  .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); }
/* (24/10) os passos da pré-configuração: o número (ou o visto) e o estado de cada um */
.cfg-srv-passos { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.cfg-srv-passo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.cfg-srv-passo > .o-ic { flex: none; width: 20px; color: var(--ok); }
.cfg-srv-passo-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 1px solid var(--linha-2); border-radius: 50%; color: var(--ink-3); font: 600 var(--t-12)/1 var(--sans); }
.cfg-srv-passo-nome { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cfg-srv-passo-estado { flex: none; color: var(--ink-3); font: 400 var(--t-12)/1.5 var(--mono); }
.cfg-srv-passo--feito { color: var(--ink); }
.cfg-srv-passo--a-ver .cfg-srv-passo-estado { color: var(--erro); }
.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); }
/* (24/10) o nome e a etiqueta «Grande» na mesma linha (no telemóvel, a etiqueta parte para baixo do nome comprido) */
.cfg-ordem-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
/* (a revisão de 24/10) as listas por papel (e as chaves de API à parte), cada uma com o rótulo: o rótulo fica mais perto
   da lista dele (8 px) do que da de cima (16 px) */
.cfg-ordem-grupos { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cfg-ordem-grupo { margin: var(--e-2) 0 0; }
.cfg-ordem-grupo:first-child { margin-top: 0; }

/* ── o router das contas (24/10, o router completo): por baixo das contas, os interruptores da empresa (o admin), os de
   cada pessoa («As tuas contas»), as ordens e «As últimas mudanças». A escala 4/8; no telemóvel, o interruptor fica com
   o alvo de 44 px do visual.css e o texto parte por baixo, sem nada para o lado ───────────────────────────────────── */
.cfg-router-zona { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.cfg-router-zona:empty { display: none; }
/* (25/10/2026) as APIs de IA da empresa: uma lista de linhas (o nome com o ⋯, os modelos, a nota e o endereço), cada uma
   separada da de cima por um traço; os rótulos por cima do texto, que parte onde for preciso (nada para o lado) */
.cfg-apis-zona { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.cfg-apis-zona:empty { display: none; }
.cfg-apis-lista { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; margin: 0; padding: 0; list-style: none; }
.cfg-api { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.cfg-api-cabeca { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }   /* o ⋯ ao meio do nome */
.cfg-api-nome { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; margin: 0;
  font-size: var(--t-16); line-height: 1.4; overflow-wrap: anywhere; }
.cfg-api-cabeca > .g-menu { flex: none; }
.cfg-api-linha { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; margin: 0; }
.cfg-api-rotulo { color: var(--ink-2); font-size: var(--t-12); line-height: 1.4; }
.cfg-api-nota, .cfg-api-modelos, .cfg-api-url { overflow-wrap: anywhere; white-space: pre-line; }
.cfg-api-modelos, .cfg-api-url { font-family: var(--mono); font-size: var(--t-14); }
.cfg-api-falta { margin: 0; }
.cfg-api-area { min-height: 96px; }
.cfg-router-frase { margin: 0; max-width: 72ch; }
.cfg-router-opcao { padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.cfg-cartao-cabeca + .cfg-router-opcao { padding-top: 0; border-top: 0; }
/* 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-router-linha { align-items: flex-start; }
.cfg-router-linha > .o-interruptor[aria-busy="true"] { opacity: .55; cursor: progress; }
.cfg-router-linha .casca-opcao-titulo { min-height: 24px; }
.cfg-router-linha .casca-opcao-texto { flex: 1 1 auto; }
.cfg-router-linha .o-dica { max-width: 72ch; }
.cfg-router-nota { color: var(--ink-3); }
/* items-start: a dica pode partir em duas linhas (no telemóvel parte); o ícone fica na primeira, com a altura dela */
.cfg-router-falta { display: flex; align-items: flex-start; gap: var(--e-2); }
.cfg-router-falta > .o-ic { flex: none; height: 1.45em; }   /* a altura de uma linha da dica (o-dica: 1,45) */
.cfg-ultimas { margin-top: var(--e-1); }
.cfg-ultimas-lista { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.cfg-ultimas-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); min-width: 0; color: var(--ink-2);
  font-size: var(--t-13); line-height: 1.5; overflow-wrap: anywhere; }
.cfg-ultimas-hora { flex: none; color: var(--ink-3); font-size: var(--t-12); font-variant-numeric: tabular-nums; }

/* ── o «Quem a usa?» e o contexto de cada conta (25/10), nos cartões das Contas de IA (os do visao.js, que já põem 12 px
   entre as linhas) e nas janelas «Quem usa …?» e «O contexto de …». A escala 4/8; no telemóvel, as caixas de marcar com
   os 44 px do o-marcar e o campo com os 16 px do visual.css, nada para o lado ─────────────────────────────────────── */
.cfg-conta-extra { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
/* items-start: o nome de várias pessoas parte em duas linhas; o ícone fica na primeira, com a altura dela */
.cfg-conta-quem { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; margin: 0; color: var(--ink-2);
  font-size: var(--t-13); line-height: 1.45; overflow-wrap: anywhere; }
.cfg-conta-quem > .o-ic { flex: none; height: 1.45em; color: var(--ink-3); }
.cfg-conta-quem b { color: var(--ink); font-weight: 600; }
.cfg-conta-contexto { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--r-caixa); background: var(--painel-2); }
.cfg-conta-contexto-rotulo { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--ink-3); font-size: var(--t-12);
  line-height: 1.45; }
/* até três linhas (as quebras do texto contam); o resto lê-se no «Mudar o contexto» */
.cfg-conta-contexto-texto { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-2); font-size: var(--t-13); line-height: 1.45;
  white-space: pre-line; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.cfg-quem-escolhas .o-escolha { flex: 1 1 160px; }
.cfg-quem-dica { margin: var(--e-2) 0 0; max-width: 72ch; }
.cfg-quem-pessoas { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.cfg-quem-pessoas[hidden], .cfg-quem-aviso[hidden] { display: none; }
.cfg-quem-pessoas > legend { margin: 0 0 var(--e-2); padding: 0; }
.cfg-quem-pessoas .o-marcar > span { min-width: 0; overflow-wrap: anywhere; }
.cfg-contexto-area { min-height: 128px; }
.cfg-contexto-letras { margin: var(--e-1) 0 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ── 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; }
}

/* (24/10) a chave de acesso reposta pela WeSolve: as duas linhas de ajuda juntas */
.cfg-chave-reposta { gap: var(--e-2); }

/* ── (25/10/2026) os multi-cofres: os cofres em separadores (o-seps, como as partes) com o «Novo cofre» ao lado, o cartão do
   cofre escolhido (as frases e as ações), as linhas de um cofre com formato (a pesquisa, a escolha e a barra das
   escolhidas, presa por baixo do topo) e as janelas (o novo cofre com os passos, as colunas e a pré-visualização; mudar de
   cofre). No telemóvel, as ações de cada linha descem para baixo dela e a caixa de escolher tem os 44 px do toque. */
.cfg-cofre-topo { display: flex; align-items: flex-end; gap: var(--e-2) var(--e-3); min-width: 0; }
.cfg-cofre-topo > .o-seps { flex: 1 1 auto; min-width: 0; }
.cfg-cofre-novo { flex: none; margin-bottom: var(--e-1); }
.cfg-cofre-abas { margin-bottom: 0; }
.cfg-cofre-aba { flex: none; max-width: 22rem; }
.cfg-cofre-abas-painel { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.cfg-cof-cartao .casca-def-corpo { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cfg-cof-frases { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--e-2) var(--e-4); margin: 0; min-width: 0; }
.cfg-cof-frase { min-width: 0; }
.cfg-cof-frase dt { color: var(--ink-3); font-size: var(--t-12); }
.cfg-cof-frase dd { margin: 0; color: var(--ink); font-size: var(--t-13); overflow-wrap: anywhere; }
.cfg-cof-colunas { margin: 0; overflow-wrap: anywhere; }
.cfg-cof-acoes { flex-wrap: wrap; }
.cfg-cof-escondido { margin: 0; }
/* (25/10/2026, a revisão) o aviso do registo dos cofres que não se lê, por cima dos separadores */
.cfg-cof-aviso { min-width: 0; }
.cfg-cof-form { gap: var(--e-3); }
.cfg-cof-campos { margin-top: var(--e-1); }
.cfg-cof-barra-acoes { flex-wrap: wrap; margin: 0; }
.cfg-novo-corpo { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cfg-novo-fich-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); min-width: 0; }
.cfg-novo-fich-nome { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cfg-novo-fich input[type="file"], .cfg-imp-fich { display: none; }
.cfg-novo-cols { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
.cfg-novo-col { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--r-cartao); }
.cfg-novo-col-opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); min-width: 0; }
.cfg-novo-col-opcoes .o-select-caixa { flex: 0 1 10rem; min-width: 0; }
.cfg-novo-previa { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding: 0; list-style: none; min-width: 0;
  max-height: 22rem; overflow-y: auto; }
.cfg-novo-previa-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-2); min-width: 0;
  padding: var(--e-2) var(--e-3); border-radius: var(--r-cartao); background: var(--fundo-2, transparent); font-size: var(--t-13); }
.cfg-novo-previa-linha--erro { border: 1px solid var(--erro); }
.cfg-novo-previa-n { color: var(--ink-3); font-size: var(--t-12); }
.cfg-novo-previa-valores { flex: 1 1 100%; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.cfg-novo-previa-erro { flex: 1 1 100%; margin: 0; }
.cfg-mover-estado { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cfg-mover-estado:empty { display: none; }
.cfg-mover-cabe { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--ok); }
.cfg-mover-falta { margin: var(--e-1) 0 0; padding-left: 1.2em; }
.cfg-imp-resultado:empty { display: none; }
.cfg-imp-resultado { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.cfg-cli .casca-def-corpo { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cfg-cli-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); min-width: 0; }
.cfg-cli-pesquisa { flex: 1 1 260px; max-width: 480px; }
/* a barra das escolhidas presa por baixo do cabeçalho (como a pesquisa do Cofre): com muitas linhas, escolhe-se lá em
   baixo e o que fazer continua à mão; o fundo é o do cartão com a cor das escolhidas por cima (a cor sozinha é
   transparente) */
.cfg-cli-escolha { position: sticky; top: calc(var(--topo-alt) + var(--e-2)); z-index: 3; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--e-2); min-width: 0; padding: var(--e-2) var(--e-3); border: 1px solid var(--accent-linha);
  border-radius: var(--r-cartao); background-color: var(--painel); background-image: linear-gradient(var(--accent-fundo), var(--accent-fundo)); }
.cfg-cli-escolha-n { margin-right: auto; color: var(--accent-texto); font: 600 var(--t-13)/1.3 var(--sans); }
/* a tabela de um cofre com formato: rola para o lado dentro do cartão (a página nunca); a coluna que identifica cada
   linha fica presa à esquerda ao rolar; os segredos, só «••••••» */
.cfg-tab-caixa { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--linha);
  border-radius: var(--r-cartao); }   /* relative: os rótulos só para o leitor de ecrã ficam dentro dela (não alargam a página) */
.cfg-tab-caixa:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
.cfg-tab { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.cfg-tab-legenda, .cfg-tab-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cfg-tab th, .cfg-tab td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle;
  white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.cfg-tab thead th { color: var(--ink-3); font: 600 var(--t-12)/1.3 var(--sans); background: var(--painel); }
.cfg-tab tbody tr:last-child > * { border-bottom: 0; }
.cfg-tab-nome { position: sticky; left: 0; z-index: 1; background: var(--painel); color: var(--ink); font-weight: 600; }
.cfg-tab-nome .o-pill { margin-left: var(--e-2); }
.cfg-tab-marcar { width: 1%; }
.cfg-tab-acoes { width: 1%; }
.cfg-tab-vazio { color: var(--ink-3); }
.cfg-tab-segredo { color: var(--ink-2); letter-spacing: 0.08em; }
.cfg-cli-linha--escolhida > td, .cfg-cli-linha--escolhida > th { background: var(--accent-fundo); }
.cfg-cli-linha--escolhida > .cfg-tab-nome { background-color: var(--painel); background-image: linear-gradient(var(--accent-fundo), var(--accent-fundo)); }
.cfg-cli-marcar { display: grid; flex: none; place-items: center; width: 24px; height: 24px; cursor: pointer; }
.cfg-cli-marcar input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cfg-cli-cliente { min-width: 0; }
.cfg-cli-acoes { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--e-1); }
.cfg-mover-fora:empty { display: none; }
.cfg-cli-menu .o-menu { min-width: 220px; max-width: min(340px, calc(100vw - 3rem)); max-height: 60vh; overflow-y: auto; }
.cfg-cli-menu .o-menu-item { white-space: normal; text-align: left; }
.cfg-cli-nota { margin: 0; max-width: 72ch; color: var(--ink-3); font-size: var(--t-12); line-height: 1.5; }
.cfg-cli-janela .o-form { gap: var(--e-3); }
/* o erro do «Guardar» numa linha só dele, por cima dos botões (no telemóvel, que os empilha ao contrário, também) */
.cfg-cli-j-erro { flex-basis: 100%; margin: 0; }
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) { .cfg-cli-j-erro { order: 1; } }
@media (max-width: 53.75em) {
  .cfg-cofre-topo { flex-wrap: wrap; }
  .cfg-cofre-topo > .o-seps { flex-basis: 100%; }
  .cfg-cofre-novo { margin-bottom: 0; }
  .cfg-cofre-aba { padding: 0 var(--e-2); max-width: 14rem; }
  .cfg-cofre-aba > .o-ic { display: none; }
  .cfg-tab th, .cfg-tab td { max-width: 14rem; }
  .cfg-cli-escolha > .o-btn, .cfg-cli-escolha > .cfg-cli-menu { flex: 1 1 auto; }
  .cfg-cli-escolha > .cfg-cli-menu > .o-btn { width: 100%; justify-content: center; }
  .cfg-cli-barra > .o-acoes { flex: 1 1 100%; }
}
@media (pointer: coarse) {
  .cfg-cli-marcar { width: 44px; height: 44px; margin: -10px -12px; }
  .cfg-novo-col-opcoes .o-marcar { min-height: 44px; }
}

/* ── (25/10/2026, a voz) Configurações › Voz com a marca `voz_microfone`: os dois cartões um por baixo do outro, a barra do
   nível do microfone (a o-barra da casa, mais alta, verde quando se ouve bem e vermelha quando satura) e o volume do
   ditado (um range com o valor ao lado; no toque, os 44 px e o campo de 16 px) ─────────────────────────────────────── */
.cfg-voz--microfone { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.cfg-voz-mic .casca-def-corpo { gap: var(--e-3); }
.cfg-voz-nivel { height: 10px; }
.cfg-voz-barra .o-barra-valor { transition: width 90ms linear; }
.cfg-voz-barra[data-nivel="bom"] .o-barra-valor { background: var(--ok); }
.cfg-voz-barra[data-nivel="alto"] .o-barra-valor { background: var(--erro); }
.cfg-voz-frase { margin: 0; }
.cfg-voz-frase--erro { color: var(--erro); }
.cfg-voz-ganho-linha { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.cfg-voz-ganho { flex: 1; min-width: 0; height: 24px; margin: 0; accent-color: var(--accent); font-size: 16px; cursor: pointer; }
.cfg-voz-ganho:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
.cfg-voz-ganho-valor { flex: none; min-width: 3.5rem; color: var(--ink-2); font: 500 var(--t-13)/1.3 var(--mono);
  font-variant-numeric: tabular-nums; text-align: right; }
@media (prefers-reduced-motion: reduce) { .cfg-voz-barra .o-barra-valor { transition: none; } }
@media (pointer: coarse) { .cfg-voz-ganho { height: 44px; } }
@media (max-width: 53.75em) {
  .cfg-voz-acoes > .o-btn { flex: 1 1 auto; }
}