/* ORBIT Empresa · paginas/visao.css — área C: a Visão geral, a Estrutura e as Contas.

   Só o que é desta área, por cima dos componentes do sistema visual (visual.css: o-cartao, o-lista, o-linha, o-pill,
   o-tag, o-barra, o-dados, o-aviso, o-vazio, o-detalhe, o-folha…), que não se redefinem aqui. As classes novas levam o
   prefixo vis-. A escala 4/8 das fichas; no telemóvel (até 53,75 em, ou toque deitado com pouca altura), alvos de 44 px e
   campos de 16 px; nada sai para o lado; o movimento reduzido vem do visual.css. */

/* ── peças comuns às três páginas ──────────────────────────────────────────────────────────────────────────────── */
.vis-contador { min-height: 22px; padding: 1px var(--e-2); }
.vis-linha-meta { min-width: 0; color: var(--ink-3); font: 400 var(--t-12)/1.45 var(--mono); overflow-wrap: break-word; }
/* uma frase (a pergunta da IA, «Pronto para rever: …»): em letra normal, que se lê melhor; a mono é para as horas e as contas */
.vis-linha-frase { color: var(--ink-2); font: 400 var(--t-13)/1.5 var(--sans); }
.vis-lista { min-width: 0; }
/* uma linha: o corpo encolhe e, quando as ações já não cabem ao lado, descem para a linha de baixo (nada aperta o texto
   até partir palavras, nem os botões até o «Responder» sair de dentro deles) */
.vis-linha { flex-wrap: wrap; align-items: center; row-gap: var(--e-2); padding-left: 0; padding-right: 0; }
.o-lista:not(.o-lista--sem-caixa) .vis-linha { padding-left: var(--e-3); padding-right: var(--e-3); }
.vis-linha > .o-linha-corpo { flex: 1 1 240px; }
.vis-linha-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; align-self: flex-start;
  border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel-2); color: var(--ink-3); }
.vis-linha-nome { min-width: 0; overflow-wrap: break-word; }
.vis-linha-nome .o-md { display: inline; font-weight: 500; }
.vis-linha-fim { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; max-width: 100%; }
.vis-linha-fim .o-btn { white-space: nowrap; }
/* as linhas dos cartões alinhadas com o cabeçalho deles (a margem de −4 px punha-as 4 px à esquerda do título) */
.vis-cartao > .o-lista--sem-caixa { margin: 0; }
/* o estado do cartão («Por ver», «2 à espera») logo a seguir ao título, não na ponta (a regra da casa) */
.vis-cartao > .o-cartao-cabeca > .o-cartao-extra { margin-left: 0; }
.vis-cartao .o-lista--sem-caixa .o-linha { border-top-color: var(--linha-fraca); }
.vis-tecnico { margin-top: var(--e-2); background: var(--painel-2); }
.vis-tecnico .o-detalhe-corpo { padding-top: 0; }
.vis-tecnico-linha { margin: 0; color: var(--ink-2); font-size: var(--t-12); line-height: 1.5; overflow-wrap: anywhere; }
.vis-vazio { padding: var(--e-6) var(--e-4); }
.vis-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-2); color: var(--ink-2);
  font: 600 var(--t-13)/1.4 var(--sans); }
.vis-wesolve { letter-spacing: .04em; }

/* ── a Visão geral ─────────────────────────────────────────────────────────────────────────────────────────────── */
.vis-visao { display: flex; flex-direction: column; gap: var(--e-8); min-width: 0; }
.vis-seccao { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.vis-seccao-titulo { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--ink);
  font: 600 var(--t-16)/1.3 var(--sans); }
.vis-seccao-titulo > .o-ic { color: var(--accent-texto); }
.vis-seccao > .o-dica { margin: 0; }
/* «Nada à tua espera»: só sem nenhum cartão na secção (os lugares escondidos são div; os cartões, section) */
.vis-espera-vazio { display: none; }
.vis-seccao--espera:not(:has(> section)) > .vis-espera-vazio { display: block; }
.vis-espera-vazio .o-vazio { border: 1px dashed var(--linha-2); border-radius: var(--r-cartao); }
/* os vazios das secções no mesmo estilo («Nada a trabalhar agora» tinha caixa diferente de «Nada à tua espera») */
.vis-seccao > .vis-vazio { border: 1px dashed var(--linha-2); border-radius: var(--r-cartao); }

/* o primeiro passo (A1) e o «Aqui pedes trabalho à IA» do membro */
.vis-primeiro { gap: var(--e-2); padding: var(--e-5); border-color: var(--accent-linha); }
.vis-primeiro-rotulo { margin: 0; color: var(--accent-texto); }
.vis-primeiro-titulo { margin: 0; color: var(--ink); font: 600 var(--t-18)/1.3 var(--sans); }
.vis-primeiro .o-cartao-texto { max-width: 68ch; }
.vis-primeiro .o-acoes { margin-top: var(--e-2); }

/* os cartões de «À tua espera» */
.cartao-espera.oculto, .cartao-cofre.oculto { display: none; }
.cartao-espera, .cartao-cofre { border-left: 2px solid var(--aviso); }
.cartao-cofre.fora { border-left-color: var(--erro); }
.vis-cofre-lista { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.vis-cofre-linha { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vis-mudanca { color: var(--ink-2); font-size: var(--t-13); line-height: 1.45; overflow-wrap: anywhere; }
.vis-mais > summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--ink-3); font-size: var(--t-12); }
@media (max-width: 53.75em), (pointer: coarse) { .vis-mais > summary { min-height: var(--ctl); } }
.ponte .o-dica { margin: 0; }

/* a trabalhar agora */
.vis-trabalho .o-linha { min-height: 56px; }
.vis-dobras { display: flex; flex-direction: column; gap: var(--e-2); }
.vis-dobra > summary { gap: var(--e-2); }
.vis-dobra > summary .o-ic:first-child { color: var(--ink-3); }
.vis-dobra[open] > summary .o-ic:first-child { transform: rotate(90deg); }
.vis-filas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--e-4); }

/* as subscrições e o uso */
.vis-contas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--e-4);
  align-items: start; }
.vis-conta { gap: var(--e-3); }
.vis-conta-cabeca { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.vis-conta-nome { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.vis-conta-nome .o-cartao-titulo { display: block; min-width: 0; overflow-wrap: break-word; }
/* o nome e o estado («Ligada», «Por ligar») juntos, como no resto do OS */
.vis-conta-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
/* a conta que a Visão pediu (#/contas?conta=…) */
.vis-conta-pedida { border-color: var(--accent-linha); box-shadow: inset 2px 0 0 var(--accent); }
.vis-barras { display: flex; flex-direction: column; gap: var(--e-3); }
.vis-barra .o-barra-cabeca b { color: var(--ink); font-weight: 600; }
.vis-barra-renova { color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono); }
.vis-limite { padding: var(--e-2) var(--e-3); }
.vis-uso .o-dado-valor { font-size: var(--t-12); }
.vis-nota-uso { max-width: 90ch; }

/* o «Uso» do admin (o relatório, 19/10): os tokens e o custo estimado, o gráfico dos 30 dias, a tabela por conta e os
   limites; os números em mono, as frases em sans */
.vis-uso { display: grid; gap: var(--e-5); min-width: 0; }
.vis-uso-resumo { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.vis-uso-topo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
/* o número grande, «tokens hoje» e o custo: texto de tamanhos diferentes, alinhado pela linha de base (não pelo centro) */
.vis-uso-hoje { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-2); margin: 0; color: var(--ink-2);
  font: 400 var(--t-14)/1.3 var(--sans); }
.vis-uso-grande { color: var(--ink); font: 600 var(--t-24)/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.vis-uso-hoje-custo { color: var(--ink); font: 500 var(--t-15)/1.3 var(--mono); }
.vis-uso-mes { margin: 0; color: var(--ink-2); font: 400 var(--t-13)/1.5 var(--sans); }
.vis-uso-num { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vis-uso-falta { margin: 0; }
/* o gráfico: as barras em --ink-3 e a de hoje no acento, pelas classes (o SVG não leva cores nem estilos) */
.vis-uso-grafico { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.vis-uso-grafico-cabeca, .vis-uso-eixo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-width: 0;
  color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--sans); }
.vis-uso-max, .vis-uso-eixo { font-family: var(--mono); }
.vis-uso-max { flex: none; }
.vis-uso-sem { margin: 0; color: var(--ink-3); font-size: var(--t-13); }
.vis-g { display: block; width: 100%; height: 64px; }
.vis-g-barra { fill: var(--ink-3); }
.vis-g-barra.vis-g-hoje { fill: var(--accent); }
.vis-g-zero { stroke: var(--linha-2); stroke-width: 1; }
.vis-g-max { stroke: var(--linha-2); stroke-width: 1; stroke-dasharray: 2 3; }
/* a tabela: o nome da conta com as etiquetas e o tipo; em cada período, os tokens em negrito e o custo por baixo */
.vis-uso-tabela-caixa { min-width: 0; }
.vis-uso-tabela th[scope=col] { vertical-align: bottom; }
.vis-uso-tabela .vis-uso-conta { min-width: 0; color: var(--ink); font: 400 var(--t-13)/1.4 var(--sans); letter-spacing: 0;
  text-transform: none; white-space: normal; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha-fraca); }
.vis-uso-conta-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.vis-uso-conta-nome { flex: 1 0 100%; min-width: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.vis-uso-conta-meta { min-width: 0; color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--sans); }
.vis-uso-celula { vertical-align: top; white-space: nowrap; }
.vis-uso-tokens { display: block; color: var(--ink); font: 600 var(--t-13)/1.4 var(--mono); }
.vis-uso-euros { display: block; color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono); }
.vis-uso-aparte-texto { color: var(--ink-3); font-size: var(--t-13); vertical-align: top; }
.vis-uso-tabela tbody tr:last-child .vis-uso-conta { border-bottom: 0; }
.vis-uso-tabela tfoot .vis-uso-conta, .vis-uso-tabela tfoot td { border-top: 1px solid var(--linha-2); border-bottom: 0; }
/* os limites (as barras do Codex, o limite do Claude), por baixo */
.vis-uso-limites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--e-4); min-width: 0;
  padding-top: var(--e-4); border-top: 1px solid var(--linha-fraca); }
.vis-uso-limites > .vis-sub { grid-column: 1 / -1; margin: 0; }
.vis-uso-limite { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.vis-uso-limite-nome { margin: 0; color: var(--ink); font: 600 var(--t-13)/1.4 var(--sans); }
.vis-uso-dica { max-width: 90ch; }

/* a saúde do sistema: uma linha fechada que abre o detalhe */
.vis-saude { background: var(--painel); }
.vis-saude > summary.vis-saude-resumo { min-height: 48px; gap: var(--e-3); padding: var(--e-2) var(--e-4); }
.vis-saude-titulo { flex: none; color: var(--ink); font-weight: 600; }
.vis-saude-estado { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vis-saude-seta { flex: none; color: var(--ink-3); transition: transform var(--dur); }
.vis-saude[open] > summary .vis-saude-seta { transform: rotate(180deg); }
.vis-saude-corpo-todo { display: flex; flex-direction: column; padding: 0 var(--e-4) var(--e-2); border-top: 1px solid var(--linha); }
.vis-saude-linha { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: var(--e-3); align-items: start;
  padding: var(--e-3) 0; border-top: 1px solid var(--linha-fraca); }
.vis-saude-linha:first-child { border-top: 0; }
.vis-saude-linha > .o-ponto { margin-top: 7px; }
.vis-saude-corpo { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.vis-saude-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-3); }
.vis-saude-nome { color: var(--ink); font: 500 var(--t-14)/1.45 var(--sans); }
.vis-saude-valor { color: var(--ink-2); font: 500 var(--t-13)/1.45 var(--mono); text-align: right; }
.vis-saude-valor b { color: var(--ink); font-weight: 600; margin-right: var(--e-1); }
.vis-saude--erro .vis-saude-valor { color: var(--erro); }
.vis-saude--aviso .vis-saude-valor { color: var(--aviso); }
.vis-saude-frase, .vis-saude-mais { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.vis-saude-fazer { color: var(--ink); }   /* o que fazer (a cópia que falhou: avisar a WeSolve) */
.vis-partidas b { color: var(--ink); }
.vis-programas .vis-programa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-2) 0; border-top: 1px solid var(--linha-fraca); }
.vis-programas .vis-programa:first-child { border-top: 0; }
.vis-programa .rotulo { min-width: 0; overflow-wrap: break-word; }

/* no computador largo (a partir de 68,75 em, 1100 px), o relatório do admin em áreas fixas, pela ordem dele: o primeiro
   passo, «Precisa de ti» (os cartões em grelha) e o «Uso» à largura toda, «A trabalhar» e «Entregue» lado a lado, e a
   Saúde numa linha à largura toda (sem medir nada depois de desenhar: acabou a «meia página vazia»). O membro fica com a
   grelha de antes. No telemóvel, uma coluna, pela ordem do relatório */
@media (min-width: 68.75em) {
  /* (o membro) a linha «·» (1fr) leva o que «Precisa de ti» tiver a mais: «A trabalhar» fica com a altura dela. O espaço
     entre as partes é a margem de baixo de cada uma: as que faltam não deixam vão */
  .vis-visao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); row-gap: 0;
    grid-template-areas: "primeiro primeiro" "espera trabalho" "espera saude" "espera ." "subs subs" "conversas conversas";
    grid-template-rows: auto auto auto 1fr auto auto; align-items: start; }
  .vis-visao > * { grid-column: 1 / -1; margin-bottom: var(--e-6); }
  .vis-visao > .vis-primeiro { grid-area: primeiro; }
  .vis-visao > .vis-seccao--espera { grid-area: espera; }
  .vis-visao > .vis-seccao--trabalho { grid-area: trabalho; }
  .vis-visao > .vis-saude { grid-area: saude; }
  .vis-visao > .vis-seccao--subscricoes { grid-area: subs; }
  .vis-visao > .vis-seccao--conversas { grid-area: conversas; }
  .vis-seccao--subscricoes .vis-contas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* (o admin) o relatório */
  .vis-visao.vis-visao--admin { grid-template-areas: "primeiro primeiro" "espera espera" "uso uso" "trabalho entregue" "saude saude";
    grid-template-rows: none; }
  .vis-visao--admin > .vis-seccao--uso { grid-area: uso; }
  .vis-visao--admin > .vis-seccao--entregue { grid-area: entregue; }
  .vis-visao--admin > .vis-seccao--espera { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
    gap: var(--e-3) var(--e-4); align-items: start; }
  .vis-visao--admin > .vis-seccao--espera > :not(section) { grid-column: 1 / -1; }
  /* o «Uso»: o topo e o gráfico à esquerda (perto de 40 %), a tabela à direita e os limites por baixo */
  .vis-uso { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--e-8); align-items: start; }
  .vis-uso > .vis-uso-limites, .vis-uso > .vis-uso-falta { grid-column: 1 / -1; }
}
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .vis-visao { gap: var(--e-6); }
  .vis-primeiro { padding: var(--e-4); }
  .vis-saude > summary.vis-saude-resumo { flex-wrap: wrap; row-gap: 2px; padding: var(--e-2) var(--e-3); }
  .vis-saude-estado { flex-basis: 100%; order: 3; padding-left: calc(8px + var(--e-3)); white-space: normal; }
  .vis-saude-corpo-todo { padding: 0 var(--e-3) var(--e-2); }
  /* a tabela do uso: cada conta é um bloco (o nome, as etiquetas e o tipo numa linha; por baixo, os três períodos em
     colunas iguais, com o rótulo por cima); nada rola, nem para o lado nem por dentro */
  .vis-uso-tabela thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    clip-path: inset(50%); white-space: nowrap; }
  .vis-uso-tabela, .vis-uso-tabela tbody, .vis-uso-tabela tfoot { display: block; width: 100%; }
  .vis-uso-tabela tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2) var(--e-3); padding: var(--e-3) 0;
    border-top: 1px solid var(--linha-fraca); }
  .vis-uso-tabela tbody tr:first-child { padding-top: 0; border-top: 0; }
  .vis-uso-tabela tfoot tr { padding-bottom: 0; border-top-color: var(--linha-2); }
  .vis-uso-tabela tr > .vis-uso-conta, .vis-uso-tabela tr > td { display: block; padding: 0; border: 0; text-align: left; }
  .vis-uso-tabela .vis-uso-conta, .vis-uso-tabela .vis-uso-aparte-texto { grid-column: 1 / -1; }
  .vis-uso-tabela .vis-uso-celula { text-align: left; }
  .vis-uso-conta-nome { flex-basis: auto; }
  .vis-uso-celula::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; color: var(--ink-3);
    font: 600 var(--t-11)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
}

/* ── a Estrutura: o mapa do ORBIT ──────────────────────────────────────────────────────────────────────────────── */
/* Como no separador Estrutura do ORBIT OS: o mapa (o motor do ORBIT, em /orbit/, desenhado num canvas) à esquerda e o
   painel à direita, com a lista das notas e, ao escolher uma, a nota. No telemóvel, o mapa por cima, a lista por baixo e
   a nota numa folha. As cores do desenho vêm das fichas (o acento da casa e os cinzentos), lidas pelo próprio motor;
   aqui só a moldura e as peças por cima. */
.vis-estrutura { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.vis-estrutura-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); min-width: 0; }
.vis-procurar { flex: 1 1 260px; }
.vis-sistema { flex: 0 1 auto; gap: var(--e-3); }
.vis-sistema-rotulo { color: var(--ink-2); font-size: var(--t-13); }
.vis-problemas-bt { gap: var(--e-2); }
.vis-problemas-ponto { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--erro); }
.vis-problemas-bt[aria-pressed="true"] { border-color: var(--erro-linha); background: var(--erro-fundo); color: var(--ink); }
.vis-problemas-n { color: var(--ink-2); }
/* o diagnóstico (só para o admin, 19/10): o cartão entre a barra e o mapa. No telemóvel, o título e a pílula numa linha,
   os dois botões por baixo à largura toda e os grupos uns por baixo dos outros, cada um a abrir logo a seguir; no
   computador (mais abaixo), o título, a pílula, os grupos e os botões numa linha, e o grupo aberto por baixo, à largura
   toda. Sem nada por arrumar, uma linha */
.vis-diag-lugar { min-width: 0; }
.vis-diag-nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); min-width: 0; }
.vis-diag-titulo { font-size: var(--t-16); }
.vis-diag-titulo .o-ic { color: var(--aviso); }
.vis-diag--ok .vis-diag-titulo .o-ic { color: var(--ok); }
.vis-diag-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); min-width: 0; }
.vis-diag-frase { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.vis-diag-alterna { justify-content: flex-start; gap: var(--e-2); }
.vis-diag-n { color: var(--ink); font: 600 var(--t-12)/1 var(--mono); }
.vis-diag-seta { color: var(--ink-3); transition: transform var(--dur); }
.vis-diag-alterna[aria-expanded="true"] { border-color: var(--accent-linha); background: var(--accent-fundo); }
.vis-diag-alterna[aria-expanded="true"] .vis-diag-seta { transform: rotate(90deg); }
.vis-diag-corpo { 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-cartao); background: var(--painel-2); }
.vis-diag-corpo-titulo { display: none; margin: 0; color: var(--ink); }
.vis-diag-ajuda, .vis-diag-caminho { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.vis-diag-caminho { color: var(--ink); }
.vis-diag-lista { margin: 0; }
.vis-diag-lista .o-linha { border-top-color: var(--linha-fraca); }
.vis-diag-corpo > .o-dica { margin: 0; }
.vis-estrutura-grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); min-width: 0; }
/* o mapa: a caixa do ORBIT (o contorno fino e o fundo do vazio), com o canvas a encher e as peças por cima */
.vis-rede {
  position: relative; min-width: 0; height: clamp(360px, 70vh, 640px); height: clamp(360px, 70svh, 640px); overflow: hidden;
  border: 1px solid var(--linha); border-radius: var(--r-caixa); background: var(--void);
}
.vis-rede:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: 2px; }
/* o dedo na vertical rola a página; de lado move o mapa; dois dedos aproximam (o motor apanha-os) */
.vis-mapa-tela {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.vis-mapa-topo { position: absolute; top: var(--e-3); left: var(--e-4); right: calc(2 * var(--ctl) + var(--e-6)); z-index: 1; pointer-events: none; }
.vis-mapa-olho {
  display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--ink-2);
  font: 500 var(--t-11)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.vis-mapa-olho i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent-texto); box-shadow: 0 0 10px var(--accent-texto); }
.vis-mapa-contas { margin: var(--e-1) 0 0; color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono); }
@media (max-width: 30em) { .vis-mapa-pastas { display: none; } }   /* num telemóvel estreito, as notas e as ligações numa linha */
.vis-mapa-acoes, .vis-mapa-zoom { position: absolute; right: var(--e-2); z-index: 1; display: flex; gap: var(--e-2); }
.vis-mapa-acoes { top: var(--e-2); }
.vis-mapa-zoom { bottom: var(--e-2); }   /* em linha, em baixo à direita, como no ORBIT (o motor deixa essa faixa sem nomes) */
.vis-mapa-bt {
  display: grid; place-items: center; width: var(--ctl); height: var(--ctl); padding: 0;
  border: 1px solid var(--linha-2); border-radius: var(--r-cartao); background: var(--painel); color: var(--ink-2); cursor: pointer;
}
.vis-mapa-bt:hover { border-color: var(--linha-campo); color: var(--ink); }
.vis-mapa-bt[aria-pressed="true"] { border-color: var(--accent-linha); color: var(--accent-texto); }
.vis-mapa-dica {
  position: absolute; left: var(--e-3); bottom: calc(var(--ctl) + var(--e-4)); z-index: 1; width: fit-content;
  max-width: calc(100% - var(--e-6)); margin: 0; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha-2); border-radius: var(--r-cartao); background: var(--painel-2); color: var(--ink-2);
  font-size: var(--t-13); line-height: 1.4; opacity: 0; transition: opacity var(--dur-2); pointer-events: none;
}
.vis-mapa-dica.vis--visivel { opacity: 1; }
.vis-rede--sem { display: grid; place-items: center; height: auto; min-height: 200px; }
/* no lugar do mapa: antes do arranque (as áreas ainda não existem, L19) e o «Tentar outra vez» (L46) */
.vis-mapa-vazio { display: grid; place-items: center; min-width: 0; min-height: 200px; }
/* o ecrã inteiro: o mapa por cima da casca (a folha de uma nota abre por cima dele), com as margens do iPhone */
.vis-rede--cheio { position: fixed; inset: 0; z-index: 55; height: auto; border: 0; border-radius: 0; }
.vis-rede--cheio .vis-mapa-tela { touch-action: none; }
.vis-rede--cheio .vis-mapa-topo { top: max(var(--e-3), env(safe-area-inset-top, 0px)); left: max(var(--e-4), env(safe-area-inset-left, 0px)); }
.vis-rede--cheio .vis-mapa-acoes { top: max(var(--e-2), env(safe-area-inset-top, 0px)); right: max(var(--e-2), env(safe-area-inset-right, 0px)); }
.vis-rede--cheio .vis-mapa-zoom { bottom: max(var(--e-2), env(safe-area-inset-bottom, 0px)); right: max(var(--e-2), env(safe-area-inset-right, 0px)); }
.vis-rede--cheio .vis-mapa-dica { bottom: calc(var(--ctl) + max(var(--e-4), env(safe-area-inset-bottom, 0px) + var(--e-2))); left: max(var(--e-3), env(safe-area-inset-left, 0px)); }
/* o painel: a lista das notas (no telemóvel por baixo do mapa e sem rolar por dentro: o dedo rola a página) e, no
   computador, a nota no lugar dela */
.vis-painel { min-width: 0; }
.vis-painel-lista, .vis-painel-nota { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.vis-painel-nota { gap: var(--e-4); }
.vis-painel-cabeca { display: flex; flex-direction: column; align-items: stretch; gap: var(--e-1); min-width: 0; }
.vis-painel-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: var(--ctl); }
.vis-painel-fechar { margin-right: calc(-1 * var(--e-2)); }
.vis-filtro {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-width: 0;
  padding: 0 0 0 var(--e-3); border: 1px solid var(--accent-linha); border-radius: var(--r-cartao); background: var(--accent-fundo);
  color: var(--ink-2); font-size: var(--t-13);
}
.vis-filtro-texto { min-width: 0; overflow-wrap: break-word; }
.vis-filtro b { color: var(--ink); font-weight: 600; }
.vis-contagem { color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono); }
.vis-lista-notas { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.vis-grupo-notas { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.vis-grupo-titulo { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--ink-2);
  font: 600 var(--t-11)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.vis-grupo-titulo b { color: var(--ink-3); font-weight: 500; }
.vis-dom-ponto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--vis-cor, var(--ink-3)); }
.vis-nota { align-items: center; }
.vis-nota .o-linha-titulo { font-weight: 500; overflow-wrap: break-word; }
.vis-nota[aria-current="true"] { background: var(--accent-fundo); box-shadow: inset 2px 0 0 var(--accent); }
.vis-nota[aria-current="true"] .o-linha-titulo { color: var(--accent-texto); }
.vis-nota-problema { display: block; color: var(--erro); font-size: var(--t-12); line-height: 1.45; }
/* a nota: no computador, no painel ao lado; no telemóvel e no tablet de pé (ou com o mapa em ecrã inteiro), numa folha */
.vis-nota-titulo { margin: 0; color: var(--ink); font: 600 var(--t-18)/1.3 var(--sans); overflow-wrap: break-word; }
.vis-nota-meta { gap: var(--e-2); }
.vis-nota-aviso { margin: 0; }
.vis-nota-corpo { color: var(--ink); font-size: var(--t-14); line-height: 1.6; }
.vis-nota-corpo .vis-ligacao-partida { color: var(--ink-2); text-decoration-style: dashed; }
.vis-nota-ligadas { display: flex; flex-direction: column; gap: var(--e-2); padding-top: var(--e-3); border-top: 1px solid var(--linha); }
/* o .o-chip é inline-flex (o texto vira um item flex e o text-overflow não pega, L21): aqui é um bloco de uma linha, com a
   altura feita pela linha, e um título comprido acaba em reticências (o inteiro fica no title) */
.vis-chip { display: inline-block; min-height: 28px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 22px; text-align: left; cursor: pointer; color: var(--ink-2); }
.vis-chip:hover { border-color: var(--accent-linha); color: var(--accent-texto); }
.vis-voltar { margin-left: calc(-1 * var(--e-2)); }
.vis-folha-veu { touch-action: pinch-zoom; }
.vis-nota-folha .o-folha-corpo { display: flex; flex-direction: column; gap: var(--e-4); touch-action: pan-y pinch-zoom;
  padding-bottom: var(--e-4); }
/* a margem de baixo do iPhone fica fora da parte que rola (com o telemóvel deitado, o «Ver no mapa» ficava por baixo da
   barra do sistema) */
.vis-nota-folha { padding-bottom: env(safe-area-inset-bottom, 0px); }
.vis-folha-voltar:empty { display: none; }
@media (min-width: 62.5em) {
  /* no computador, como no ORBIT: o mapa e o painel lado a lado, à altura do ecrã (o painel rola por dentro) */
  .o-pagina[data-pagina="estrutura"] { --largura: 1400px; }
  /* a grelha desconta a altura do cartão «Diagnóstico» (--vis-diag-alt, medida pelo visao.js): fechado, a página cabe no
     ecrã; com um grupo aberto, a grelha encolhe até aos 460 px e a página rola */
  .vis-estrutura-grelha {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    height: max(460px, calc(100vh - var(--topo-alt) - 220px - var(--vis-diag-alt, 0px)));
    height: max(460px, calc(100svh - var(--topo-alt) - 220px - var(--vis-diag-alt, 0px)));
  }
  .vis-rede { height: auto; }
  .vis-painel { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  /* o diagnóstico numa linha: o título e a pílula, os grupos, os botões no fim; a frase e o grupo aberto por baixo */
  .vis-diag { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); }
  .vis-diag-nome { order: 0; }
  .vis-diag-alterna { order: 1; }
  .vis-diag-acoes { order: 2; margin-left: auto; }
  .vis-diag-frase { order: 3; flex: 1 1 100%; }
  .vis-diag-corpo { order: 4; flex: 1 1 100%; }
  .vis-diag-corpo-titulo { display: flex; }
  .vis-diag--ok .vis-diag-frase { order: 1; flex: 1 1 320px; }
}
@media (max-width: 53.75em), (pointer: coarse) {
  .vis-chip { min-height: var(--ctl); line-height: calc(var(--ctl) - 6px); }
  .vis-sistema { flex: 1 1 100%; justify-content: space-between; }
  .vis-problemas-bt { flex: 1 1 100%; justify-content: center; }
  .vis-diag-acoes > .o-btn { flex: 1 1 100%; }
}
/* os grupos das notas abrem e fecham (no telemóvel, só o primeiro abre sozinho) */
.vis-grupo-notas > summary { min-height: 32px; padding: var(--e-1) 0; cursor: pointer; list-style: none; }
.vis-grupo-notas > summary::-webkit-details-marker { display: none; }
.vis-grupo-seta { color: var(--ink-3); transition: transform var(--dur); }
.vis-grupo-notas[open] > summary .vis-grupo-seta { transform: rotate(90deg); }
.vis-grupo-notas > .o-lista { margin-top: var(--e-2); }
@media (max-width: 53.75em), (pointer: coarse) {
  .vis-grupo-notas > summary { min-height: var(--ctl); }
}

/* ── as Contas ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* o painel (Configurações › Contas de IA e o passo 2 do onboarding): os grupos «Da empresa» e «Só tuas», um por baixo do
   outro (a .vis-contas da Visão geral é uma grelha; aqui não) */
section.vis-contas-painel { display: flex; flex-direction: column; align-items: stretch; gap: var(--e-4); min-width: 0; }
.vis-contas-grupos { display: flex; flex-direction: column; gap: var(--e-6); min-width: 0; }
.vis-contas-grupo .o-grupo-rotulo { margin: 0 0 var(--e-3); }
.vis-contas-vazio { margin: 0; }
/* os cartões numa grelha (3 no computador), com a mesma altura em cada fila e a ação no fundo, alinhada com as vizinhas */
.vis-contas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--e-4); align-items: stretch; }
.vis-conta-gestao { gap: var(--e-3); }
.vis-conta-gestao > .vis-conta-cabeca { align-items: flex-start; }
.vis-conta-gestao > .vis-conta-cabeca > .g-menu { flex: none; margin: calc(-1 * var(--e-1)) calc(-1 * var(--e-2)) 0 auto; }
.vis-conta-papel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.5; }
.vis-conta-falta { margin: 0; }
.vis-preco { margin: 0; color: var(--ink-2); font: 400 var(--t-12)/1.45 var(--mono); }
.vis-conta-acoes { margin-top: auto; }
/* a ligar: o cartão fica com a linha inteira, e o fluxo por baixo de um traço no acento */
.vis-conta-ligar { grid-column: 1 / -1; }
.vis-conta-ligar > .vis-conta-acoes { display: none; }   /* a ligar, o «Ligar» do cartão já está a correr por baixo */
.fluxo-conta { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; padding-top: var(--e-4); border-top: 1px solid var(--accent-linha); }
.fluxo-conta[hidden] { display: none; }
/* a janela «Acrescentar uma conta»: as escolhas a meias (uma por linha quando não cabem); ao admin, sem a frase das
   outras janelas, o «Para quem?» ganha o ar dela por baixo do título (colado, a 4 px, lia-se como o título) */
.vis-janela-conta .vis-escolhas .o-escolha { flex: 1 1 200px; }
.vis-janela-conta > .o-janela-titulo + .vis-acrescentar-form { margin-top: var(--e-3); }
.vis-papel-frase { margin: 0; }
.vis-campo-papel[hidden] { display: none; }
.vis-codigo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }   /* o código e «Copiar o código» (L33) */
.vis-codigo-linha > .vis-codigo { margin: 0; }
.vis-ligar-cabeca { flex-wrap: nowrap; align-items: flex-start; }
.vis-ligar-cabeca > .o-cartao-titulo { flex: 1; min-width: 0; overflow-wrap: break-word; }
.vis-ligar-cabeca > .o-btn { flex: none; }
.vis-ligar-guia { display: flex; flex-direction: column; gap: var(--e-3); }
.vis-passos { margin: 0; padding-left: 1.4em; color: var(--ink-2); font-size: var(--t-14); line-height: 1.55; }
.vis-passos li + li { margin-top: var(--e-1); }
/* «Abrir o Claude para aprovar» e «Copiar o link»: o passo principal da ligação, com 44 px também no computador (T2) */
.vis-abrir-login .o-btn { min-height: 44px; white-space: normal; text-align: center; }
.vis-codigo { margin: 0; color: var(--ink-2); }
.codigo-grande { color: var(--ink); font: 600 var(--t-24)/1.2 var(--mono); letter-spacing: .12em; }
.vis-compor { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--e-2); }
.vis-compor > .o-entrada { flex: 1 1 220px; }
.vis-compor[hidden] { display: none; }
/* a linha de estado lê-se como uma frase («À espera da aprovação… 0:12»): texto corrido, sem flex (o leitor de ecrã e o
   innerText não a partem em pedaços) */
.vis-estado-ligar { margin: 0; color: var(--ink-2); font-size: var(--t-14); line-height: 1.6; }
.vis-estado-ligar[hidden] { display: none; }
.vis-estado-ligar > .o-ponto { vertical-align: middle; margin: 0 var(--e-1) 2px 2px; }
.estado-ligar.o-aviso { margin: 0; }
.vis-form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--e-3); }
.vis-ligada b { margin-right: var(--e-1); }

/* ── a Visão nova (a FV das Tarefas, 23/10; só com as Tarefas ligadas) ──────────────────────────────────────────────
   A proposta aprovada a 22/10 (3-propostas/visao, a terceira volta) com a mudança das 22:11: a lista das tarefas de cada
   cartão fica dentro de um cartão, com scroll por dentro. À largura da página Tarefas (1280 px; a 1440, 80 px de cada
   lado). No computador largo (a partir de 75 em, 1200 px), duas colunas: à esquerda as tarefas e as contas, à direita o
   mapa e o uso; abaixo disso, uma coluna pela ordem do HTML. */
.o-pagina[data-pagina="visao"]:has(> .vis-nova) { --largura: 1280px; }
.vis-nova { display: flex; flex-direction: column; gap: var(--e-6); min-width: 0; }
.vis-colunas { display: flex; flex-direction: column; gap: var(--e-8); min-width: 0; }
@media (min-width: 75em) {
  .vis-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--e-6); row-gap: var(--e-8); align-items: start; }
  .vis-colunas--admin { grid-template-areas: "tarefas cerebro" "contas uso"; }
  .vis-colunas--membro { grid-template-areas: "tarefas cerebro" "contas cerebro"; }
  .vis-colunas--dia { grid-template-areas: "primeiro cerebro" "tarefas cerebro" "contas uso"; }
  .vis-colunas > .vis-primeiro { grid-area: primeiro; }
  .vis-colunas > .vis-seccao--tarefas { grid-area: tarefas; }
  .vis-colunas > .vis-seccao--cerebro { grid-area: cerebro; }
  .vis-colunas > .vis-seccao--uso { grid-area: uso; }
  .vis-colunas > .vis-seccao--contas { grid-area: contas; }
  /* no primeiro dia, o vazio das tarefas estica até ao fundo do mapa (sem um buraco por baixo dele) */
  .vis-colunas--dia > .vis-seccao--tarefas { align-self: stretch; }
  .vis-colunas--dia > .vis-seccao--tarefas > .vis-tvazio { flex: 1 1 auto; justify-content: center; }
}
/* o título da secção e, quando há, a ligação para o sítio de onde vem (as Contas de IA) */
.vis-seccao-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1) var(--e-4);
  min-width: 0; min-height: 24px; }
.vis-ir { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--ink-2); font: 500 var(--t-13)/1.3 var(--sans);
  text-decoration: none; }
.vis-ir > .o-ic { color: var(--ink-3); }
.vis-ir:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.vis-tdica { margin: 0; }

/* a linha fina do Sistema: o aviso da casa, numa linha, e a linha inteira é a ligação */
.vis-alerta { align-items: center; min-height: 44px; padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3); text-decoration: none;
  transition: border-color var(--dur); }
.vis-alerta > .o-ic { height: auto; }
.vis-alerta-texto { flex: 1 1 auto; min-width: 0; color: var(--ink-2); }
.vis-alerta-texto b { color: var(--ink); font-weight: 600; }
.vis-alerta-ir { display: inline-flex; align-items: center; gap: var(--e-1); flex: none; color: var(--ink); font-weight: 500; white-space: nowrap; }
.vis-alerta:hover { border-color: var(--aviso-linha); border-left-color: var(--aviso); }
.vis-alerta.o-aviso--erro:hover { border-color: var(--erro-linha); border-left-color: var(--erro); }
.vis-alerta:hover .vis-alerta-ir { text-decoration: underline; text-underline-offset: 2px; }

/* as tarefas: os três cartões (os números) e, por baixo de cada um, a lista dele num cartão com scroll por dentro */
.vis-tarefas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-4); row-gap: var(--e-2); align-items: start; }
.vis-tcartao { position: relative; grid-row: 1; align-self: stretch; gap: var(--e-2); padding: var(--e-4) var(--e-5); text-decoration: none; }
.vis-tcartao--correr, .vis-relatorio--correr { grid-column: 1; }
.vis-tcartao--rever, .vis-relatorio--rever { grid-column: 2; }
.vis-tcartao--prontas, .vis-relatorio--prontas { grid-column: 3; }
/* «Precisam de revisão» com alguma coisa à espera do admin: o traço e o número amarelos (os do «Precisa de ti» do quadro) */
.vis-tcartao--aviso { border-left: 2px solid var(--aviso); }
.vis-tcartao-n { color: var(--ink); font: 600 var(--t-24)/1.15 var(--mono); font-variant-numeric: tabular-nums; }
.vis-tcartao-n--aviso { color: var(--aviso); }
/* o ponto ao meio da primeira linha do nome (o nome pode partir em duas) */
.vis-tcartao-nome { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; color: var(--ink-2); font: 500 var(--t-14)/1.4 var(--sans); }
.vis-tcartao-nome > .o-ponto { margin-top: calc((var(--t-14) * 1.4 - 8px) / 2); }
.vis-tcartao-sub { margin-top: calc(-1 * var(--e-1)); padding-left: calc(8px + var(--e-2)); color: var(--ink-3); font-size: var(--t-12); line-height: 1.45; }
.vis-junto { display: inline-block; }   /* «7 dias», «Precisa de ti», «a Marta»: nunca a meio */
/* a seta ao meio da linha do número (a primeira do cartão, que pode ter três): a caixa do ícone, 14 px, centrada na altura
   dessa linha */
.vis-tcartao-seta { position: absolute; top: calc(var(--e-4) + (var(--t-24) * 1.15 - 14px) / 2); right: var(--e-4); display: inline-flex;
  color: var(--ink-3); transition: color var(--dur); }
.vis-tcartao:hover .vis-tcartao-seta { color: var(--ink); }
/* a lista de cada cartão: um cartão (22:11, «para termos a estética mais arrumada») da altura dos vizinhos, e o scroll por
   dentro, com perto de três tarefas à vista; «Ver as N no quadro ›» fica no fundo, fora do scroll. No fim da lista, a roda
   e o dedo passam à página (a revisão da FV, 23/10: com o `overscroll-behavior: contain`, a página ficava parada) */
.vis-relatorio { grid-row: 2; align-self: stretch; gap: 0; padding: var(--e-1) 0; }
.vis-relatorio-titulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.vis-relatorio-rolar { flex: 1 1 auto; max-height: 264px; min-height: 0; overflow-y: auto;
  padding: 0 var(--e-3) 0 var(--e-5); scrollbar-width: thin; scrollbar-color: var(--linha-2) transparent; }
.vis-relatorio-rolar:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: -2px; border-radius: var(--r-cartao); }
.vis-tlinhas { margin: 0; padding: 0; list-style: none; }
.vis-tlinhas > li + li { border-top: 1px solid var(--linha-fraca); }
.vis-tlinha { display: flex; align-items: flex-start; gap: var(--e-3); min-height: 44px; margin: 0 calc(-1 * var(--e-2));
  padding: var(--e-3) var(--e-2); border-radius: var(--r); color: inherit; text-decoration: none; }
.vis-tlinha:hover { background: var(--hover); }
.vis-tlinha:focus-visible { outline-offset: -2px; }
/* o ponto ao meio da primeira linha da frase; nas linhas não pulsa (o do cartão já diz que a IA trabalha) */
.vis-tlinha > .o-ponto { margin-top: calc((var(--t-13) * 1.5 - 8px) / 2); animation: none; }
.vis-tlinha-corpo { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.vis-tlinha-frase { color: var(--ink-2); font: 400 var(--t-13)/1.5 var(--sans); overflow-wrap: break-word; }
.vis-tlinha-frase b { color: var(--ink); font-weight: 600; }
.vis-tlinha:hover .vis-tlinha-frase b { text-decoration: underline; text-underline-offset: 2px; }
.vis-tlinha-meta { color: var(--ink-3); font: 400 var(--t-12)/1.45 var(--mono); overflow-wrap: break-word; }
.vis-parte { display: inline-block; max-width: 100%; }   /* cada parte desce inteira para a linha de baixo */
.vis-tlinha-vazia { margin: 0; padding: var(--e-3) 0; color: var(--ink-3); font-size: var(--t-13); line-height: 1.5; }
.vis-ver { display: flex; align-items: center; gap: var(--e-1); min-height: 40px; margin: 0 var(--e-3) 0 var(--e-5);
  padding-left: calc(8px + var(--e-3)); border-top: 1px solid var(--linha-fraca); color: var(--ink-2);
  font: 500 var(--t-13)/1.3 var(--sans); text-decoration: none; }
.vis-ver > .o-ic { color: var(--ink-3); transition: color var(--dur); }
.vis-ver:hover, .vis-ver:hover > .o-ic { color: var(--ink); }
/* o primeiro dia: o vazio das tarefas (sem os zeros) */
.vis-tvazio { padding: var(--e-8) var(--e-4); }

/* o primeiro passo, por cima das tarefas */
.vis-primeiro--nova { gap: var(--e-2); }
.vis-primeiro--nova .o-cartao-texto { max-width: 68ch; }

/* o que a IA sabe: o mapa da Estrutura em pequeno (o motor dela num canvas), com os números por cima, e as áreas */
.vis-cerebro { gap: var(--e-4); color: inherit; text-decoration: none; }
.vis-cerebro-mapa { position: relative; display: block; overflow: hidden; aspect-ratio: 330 / 248; border: 1px solid var(--linha);
  border-radius: var(--r-caixa); background: var(--void); }
/* o canvas não se toca: o cartão todo é a ligação para a Estrutura */
.vis-cerebro-tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.vis-cerebro-topo { position: absolute; top: var(--e-3); left: var(--e-4); right: var(--e-4); display: flex; flex-direction: column;
  pointer-events: none; }
.vis-cerebro-topo .vis-mapa-contas { margin: var(--e-1) 0 0; }
.vis-cerebro-lado { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.vis-cerebro-areas { display: block; min-width: 0; }
.vis-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2) var(--e-5); }
.vis-area { display: flex; align-items: center; gap: var(--e-2); min-width: 0; color: var(--ink-2); font: 400 var(--t-13)/1.4 var(--sans); }
.vis-area-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vis-cerebro-frase { display: block; color: var(--ink-3); font-size: var(--t-12); line-height: 1.45; }
.vis-cerebro-ir { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding-top: var(--e-3);
  border-top: 1px solid var(--linha); color: var(--ink); font: 500 var(--t-13)/1.3 var(--sans); }
.vis-cerebro-ir > .o-ic { color: var(--ink-3); transition: color var(--dur); }
.vis-cerebro:hover .vis-cerebro-ir > .o-ic { color: var(--ink); }

/* o uso: o de hoje, o mês, o preço das subscrições, o gráfico e, no fundo do cartão, o «Detalhe técnico» numa dobra */
.vis-uso-nova { gap: var(--e-5); }
.vis-uso-custo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-1); }
.vis-uso-unidade { color: var(--ink-2); }
.vis-dobra-fundo { min-width: 0; margin: 0 calc(-1 * var(--e-5)) calc(-1 * var(--e-5)); border-top: 1px solid var(--linha); }
.vis-dobra-fundo > summary { display: flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-5); list-style: none;
  cursor: pointer; color: var(--ink-2); font: 500 var(--t-13)/1.3 var(--sans); }
.vis-dobra-fundo > summary::-webkit-details-marker { display: none; }
.vis-dobra-fundo > summary:hover { color: var(--ink); }
.vis-dobra-fundo > summary > .o-ic { color: var(--ink-3); transition: transform var(--dur); }
.vis-dobra-fundo[open] > summary > .o-ic { transform: rotate(90deg); }
.vis-dobra-fundo-corpo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; padding: 0 var(--e-5) var(--e-5); }

/* as contas de IA: quem usa cada uma, o tipo, os limites de 5 horas e de 7 dias e o de hoje */
.vis-contas-ia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); align-items: stretch; }
.vis-conta-ia { gap: var(--e-4); }
.vis-conta-ia-cabeca { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.vis-conta-ia-cabeca .o-cartao-titulo { display: block; min-width: 0; overflow-wrap: break-word; }
.vis-conta-ia-papel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); margin: 0; }
.vis-conta-tipo { min-width: 0; color: var(--ink-3); font: 400 var(--t-13)/1.4 var(--sans); }
.vis-conta-ia .vis-barras { gap: var(--e-4); }
.vis-conta-ia .vis-barra-renova { margin: 0; }
/* a percentagem (e, no telemóvel, quando renova) à direita da linha de cima da barra; se não couber, desce inteira */
.vis-conta-ia .o-barra-cabeca { flex-wrap: wrap; row-gap: 2px; }
.vis-barra-fim { margin-left: auto; }
/* o limite atingido: no cartão da conta, por baixo da barra dela (nunca uma faixa grande no «Uso») */
.vis-limite-cheio { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; color: var(--aviso); font: 400 var(--t-12)/1.45 var(--sans); }
/* o ícone ancorado à primeira linha da frase (pode partir em duas): a caixa dele tem a altura dessa linha */
.vis-limite-cheio > .o-ic { flex: none; height: calc(var(--t-12) * 1.45); }
.vis-conta-hoje { margin-top: auto; padding-top: var(--e-3); border-top: 1px solid var(--linha); }
.vis-conta-aparte { margin: 0; color: var(--ink-3); font-size: var(--t-13); line-height: 1.5; }
/* (23/10) o router das contas da Equipa (só o admin): «Disponível» ou «Fora até às 15:40 · …» e o trabalho na conta */
.vis-conta-rotacao { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; min-width: 0; }
.vis-conta-rotacao-estado { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; color: var(--ink-2);
  font: 400 var(--t-13)/1.45 var(--sans); overflow-wrap: anywhere; }
.vis-conta-rotacao-estado > .o-ic { flex: none; height: calc(var(--t-13) * 1.45); color: var(--ok); }
.vis-conta-rotacao--fora .vis-conta-rotacao-estado { color: var(--aviso); }
.vis-conta-rotacao--fora .vis-conta-rotacao-estado > .o-ic { color: var(--aviso); }
.vis-conta-rotacao-uso { margin: 0; padding-left: calc(var(--e-2) + 16px); color: var(--ink-3); font-size: var(--t-12); line-height: 1.45; }

/* o computador estreito e o tablet: uma coluna; o mapa ao lado das áreas */
@media (min-width: 53.8125em) and (max-width: 74.9375em) {
  .vis-cerebro { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); column-gap: var(--e-6); align-items: stretch; }
  .vis-cerebro-lado { justify-content: space-between; }
}
/* o telemóvel (até 860 px, ou o toque deitado com pouca altura) */
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .vis-colunas { gap: var(--e-6); }
  /* os três números numa fila, para se verem de uma vez; as listas por baixo, cada uma com o título */
  .vis-tarefas { column-gap: var(--e-2); row-gap: 0; }
  .vis-tcartao { gap: var(--e-1); padding: var(--e-3); }
  .vis-tcartao-seta { top: calc(var(--e-3) + (var(--t-24) * 1.15 - 14px) / 2); right: var(--e-3); }
  .vis-tcartao-nome { font-size: var(--t-13); }
  .vis-tcartao-nome > .o-ponto { margin-top: calc((var(--t-13) * 1.4 - 8px) / 2); }
  .vis-tcartao-sub { margin-top: 0; }
  .vis-relatorio { grid-column: 1 / -1; grid-row: auto; margin-top: var(--e-5); padding: var(--e-3) 0 var(--e-1); }
  .vis-relatorio-titulo { position: static; width: auto; height: auto; margin: 0 var(--e-4) var(--e-1); overflow: visible; clip: auto;
    clip-path: none; white-space: normal; color: var(--ink-3); font: 600 var(--t-12)/1.3 var(--mono); letter-spacing: .08em;
    text-transform: uppercase; }
  .vis-relatorio-rolar { max-height: 280px; padding: 0 var(--e-4); }
  .vis-ver { margin: 0 var(--e-4); }
  .vis-contas-ia { grid-template-columns: minmax(0, 1fr); }
  .vis-conta-ia { gap: var(--e-3); }
  /* o mapa mais baixo, desenhado para esta caixa (o motor pede 200 px: o canvas fica ao meio e a caixa corta o resto), e
     sem a lista das áreas: é o desenho, e o cartão abre a Estrutura */
  .vis-cerebro-mapa { aspect-ratio: auto; height: 160px; }
  .vis-cerebro-tela { inset: auto; top: 50%; left: 0; height: 200px; transform: translateY(-50%); }
  .vis-cerebro .vis-areas { display: none; }
  .vis-dobra-fundo { margin: 0 calc(-1 * var(--e-4)) calc(-1 * var(--e-4)); }
  .vis-dobra-fundo > summary { padding: 0 var(--e-4); }
  .vis-dobra-fundo-corpo { padding: 0 var(--e-4) var(--e-4); }
}
/* no telemóvel, nada abaixo de 12 px e alvos de 44 px */
@media (max-width: 53.75em), (pointer: coarse) {
  .vis-cerebro-topo .vis-mapa-olho { font-size: var(--t-12); }
  .vis-ir, .vis-ver { min-height: 44px; }
}
/* os telemóveis estreitos (até 360 px): os três números continuam numa fila, com menos ar à volta e o nome a 12 px, para
   «concluídas» e «precisam» caberem dentro do cartão; a linha de baixo começa no início do cartão, para o que vai junto
   («Precisa de ti», «7 dias») caber inteiro na sua linha (a 320 px partia-se: «Precisa de / ti»; a revisão de 23/10) */
@media (max-width: 22.5em) {
  .vis-tarefas { column-gap: var(--e-1); }
  .vis-tcartao { padding: var(--e-3) var(--e-2); }
  .vis-tcartao-seta { right: var(--e-2); }
  .vis-tcartao-nome { gap: var(--e-1); font-size: var(--t-12); }
  .vis-tcartao-nome > .o-ponto { margin-top: calc((var(--t-12) * 1.4 - 8px) / 2); }
  .vis-tcartao-sub { padding-left: 0; }
}

/* ── «Servidores e plataformas» (23/10, só o admin) ────────────────────────────────────────────────────────────────
   Uma linha por ligação, à largura toda do cartão (16 px de cada lado): o ponto, o nome (corta com «…») e a pill na mesma
   linha; por baixo, alinhados com o nome, a frase e «verificado há…», os números (três medidores de 4 px, um terço cada),
   o aviso a âmbar, o «Tentar outra vez» (primário, 44 px) e o «Detalhe técnico» fechado. No computador largo (a partir de
   75 em), uma grelha de quatro colunas: o nome com a pill, a frase, os números e as últimas 12 voltas. Nas duas Visões,
   o cartão fica à largura toda, depois do Uso. */
.vis-srv { gap: 0; padding: 0; overflow: hidden; }
.vis-srv-lista { margin: 0; padding: 0; list-style: none; }
.vis-srv-lista > li + li { border-top: 1px solid var(--linha-fraca); }
.vis-srv-linha { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--e-2); min-width: 0; padding: var(--e-3) var(--e-4); }
.vis-srv-cabeca { display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: 24px; }
.vis-srv-cabeca > .o-ponto { margin-right: var(--e-1); }
.vis-srv-nome { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font: 600 var(--t-14)/1.4 var(--sans);
  text-overflow: ellipsis; white-space: nowrap; }
.vis-srv-texto, .vis-srv-recursos, .vis-srv-resto { display: flex; flex-direction: column; min-width: 0; padding-left: calc(8px + var(--e-3)); }
.vis-srv-texto { gap: 2px; }
.vis-srv-recursos { gap: var(--e-2); }
.vis-srv-resto { gap: var(--e-2); }
.vis-srv-frase { margin: 0; color: var(--ink-2); font: 400 var(--t-13)/1.5 var(--sans); overflow-wrap: break-word; }
.vis-srv--em_baixo .vis-srv-frase { color: var(--ink); }
.vis-srv-quando { margin: 0; color: var(--ink-3); font: 400 var(--t-12)/1.45 var(--mono); }
/* os três medidores lado a lado, um terço cada, com 8 px entre eles; a barra de 4 px */
.vis-srv-medidores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.vis-srv-medidor .o-barra-trilho { height: 4px; }
.vis-srv-medidor .o-barra-cabeca { align-items: baseline; gap: var(--e-1); }
.vis-srv-medidor .o-barra-cabeca b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.vis-srv-medidor-nome { min-width: 0; overflow: hidden; font-family: var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.vis-srv-medidor--alto .o-barra-valor { background: var(--aviso); }
.vis-srv-medidor--alto .o-barra-cabeca b { color: var(--aviso); }
.vis-srv-dado { margin: 0; color: var(--ink-2); font: 400 var(--t-13)/1.5 var(--sans); overflow-wrap: break-word; }
.vis-srv-dado b { color: var(--ink); font: 600 var(--t-13)/1.5 var(--mono); }
/* o aviso numa linha à parte, a âmbar, com o ícone na primeira linha da frase */
.vis-srv-aviso { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; color: var(--aviso); font: 400 var(--t-13)/1.5 var(--sans);
  overflow-wrap: break-word; }
.vis-srv-aviso > .o-ic { flex: none; height: calc(var(--t-13) * 1.5); }
/* o que se verifica dentro de um programa (o site, o SSH, a base), quando há mais de uma coisa */
.vis-srv-partes { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin: 0; padding: 0; list-style: none; }
.vis-srv-parte { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; max-width: 100%; color: var(--ink-2);
  font: 400 var(--t-12)/1.45 var(--sans); }
.vis-srv-parte > .o-ponto { width: 6px; height: 6px; box-shadow: none; }
.vis-srv-parte-nome { min-width: 0; overflow-wrap: anywhere; }
.vis-srv-parte-estado { flex: none; color: var(--ink-3); font-family: var(--mono); }
.vis-srv-resto > .o-acoes { margin: 0; }
.vis-srv-tentar { min-height: 44px; }
.vis-srv-tecnico { margin-top: 0; }
.vis-srv-tecnico .o-acoes { margin-top: var(--e-2); }
/* as últimas 12 voltas: só no computador largo */
.vis-srv-voltas { display: none; }
.vis-srv-faixa { display: flex; gap: var(--e-1); }
.vis-volta { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--linha-2); }
.vis-volta--vazia { background: transparent; box-shadow: inset 0 0 0 1px var(--linha-2); }
.vis-volta--bem { background: var(--ok); }
.vis-volta--lento, .vis-volta--a_confirmar { background: var(--aviso); }
.vis-volta--em_baixo { background: var(--erro); }
.vis-srv-legenda { color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--sans); }
/* as plataformas na web que respondem, numa linha que abre a lista */
.vis-srv-grupo > summary { list-style: none; cursor: pointer; }
.vis-srv-grupo > summary::-webkit-details-marker { display: none; }
.vis-srv-grupo > summary:hover { background: var(--hover); }
.vis-srv-grupo > summary:focus-visible { outline: 2px solid var(--accent-texto); outline-offset: -2px; }
.vis-srv-abre { display: inline-flex; align-items: center; gap: var(--e-1); }
.vis-srv-seta { color: var(--ink-3); transition: transform var(--dur); }
.vis-srv-grupo[open] .vis-srv-seta { transform: rotate(90deg); }
.vis-srv-grupo-lista { margin: 0; padding: 0 var(--e-4) var(--e-3) calc(var(--e-4) + 8px + var(--e-3)); list-style: none; }
.vis-srv-grupo-item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--e-3); min-width: 0;
  padding: var(--e-2) 0; border-top: 1px solid var(--linha-fraca); }
.vis-srv-grupo-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ink); font: 500 var(--t-13)/1.5 var(--sans);
  text-overflow: ellipsis; white-space: nowrap; }
.vis-srv-grupo-tempo { flex: none; max-width: 100%; color: var(--ink-3); font: 400 var(--t-12)/1.5 var(--mono); }
/* o estado vazio: só o servidor do OS */
.vis-srv-vazio { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4); border-top: 1px dashed var(--linha-2); }
.vis-srv-vazio:first-child { border-top: 0; }
.vis-srv-vazio-texto { margin: 0; max-width: 68ch; color: var(--ink-2); font: 400 var(--t-13)/1.5 var(--sans); }
.vis-srv-vazio .o-acoes { margin: 0; }
.vis-seccao--servidores:focus { outline: none; }
.vis-seccao--servidores .vis-seccao-titulo > .o-pill { margin-left: var(--e-1); }
/* nas duas Visões, à largura toda, depois do Uso */
@media (min-width: 68.75em) {
  .vis-visao.vis-visao--admin:has(> .vis-seccao--servidores) {
    grid-template-areas: "primeiro primeiro" "espera espera" "uso uso" "servidores servidores" "trabalho entregue" "saude saude"; }
  .vis-visao--admin > .vis-seccao--servidores { grid-area: servidores; }
}
@media (min-width: 75em) {
  .vis-colunas--admin.vis-colunas--servidores { grid-template-areas: "tarefas cerebro" "contas uso" "servidores servidores"; }
  .vis-colunas--dia.vis-colunas--servidores { grid-template-areas: "primeiro cerebro" "tarefas cerebro" "contas uso" "servidores servidores"; }
  .vis-colunas > .vis-seccao--servidores { grid-area: servidores; }
  /* a grelha das quatro colunas */
  .vis-srv-linha { grid-template-columns: minmax(0, 296px) minmax(0, 1fr) minmax(0, 312px) 120px; column-gap: var(--e-6); align-items: start;
    padding: var(--e-4) var(--e-5); }
  .vis-srv-cabeca { grid-column: 1; grid-row: 1; }
  .vis-srv-texto { grid-column: 2; grid-row: 1; padding-left: 0; }
  .vis-srv-recursos { grid-column: 3; grid-row: 1; padding-left: 0; }
  .vis-srv-voltas { display: flex; flex-direction: column; gap: var(--e-1); grid-column: 4; grid-row: 1; padding-top: 9px; }
  .vis-srv-resto { grid-column: 2 / -1; grid-row: 2; padding-left: 0; }
  .vis-srv-resto > .o-acoes, .vis-srv-resto > .vis-srv-tecnico { max-width: 560px; }
  .vis-srv-grupo-lista { padding: 0 var(--e-5) var(--e-3) calc(var(--e-5) + 296px + var(--e-6)); }
}
@media (max-width: 53.75em), (pointer: coarse) {
  .vis-srv-grupo > summary { min-height: 44px; }
}
/* os telemóveis (até 480 px): em cada medidor, a % por baixo do rótulo (os três iguais, sem «Process…»; a 390 px, um
   processador a 100% já cortava o rótulo: revisão 23/10) */
@media (max-width: 30em) {
  .vis-srv-medidor .o-barra-cabeca { flex-direction: column; align-items: flex-start; gap: 0; }
}