/* =============================================================================
   PAINÉIS — folha de estilos única da aplicação. Sem frameworks, só CSS.

   Direção aprovada: clínico sóbrio + cor por modalidade · densidade alta
   (corpo 15 px) · barra lateral com pesquisa em destaque · tema automático (segue
   o esquema de cores do dispositivo), com escolha fixa de claro ou escuro.

   COMO ESTÁ ORGANIZADA (por ordem no ficheiro):
     1.  Tokens: cor, letra (--t-1…--t-8), espaçamento (--e1…--e6), alturas dos
         botões (--alt-p/--alt/--alt-g), raios e medidas — tema claro, escuro
         por sistema («Automático») e escuro escolhido no seletor «Tema»
     2.  Cor por modalidade
     3.  Reposição, tipografia e base
     4.  Foco visível e movimento reduzido
     5.  Invólucro de duas colunas (.app · .lateral · .principal)
     6.  Pesquisa (.procura · .lista-procura · .resultado · .sem-resultados)
     7.  Barra do topo antiga e botões
     8.  Conteúdo, títulos, rodapé e utilitários
     9.  Etiquetas e chips
    10.  Formulários
    11.  Página do painel: cabeçalho, navegação de secções, grelha e cartões
    12.  Painel em leitura: blocos gerados pelo servidor (.blk-*)
    13.  Fonte validada e painel incluído (transclusão)
    14.  Bloco «Passo» (leitura e editor)
    15.  Bloco «Plano de corte» (leitura e editor)
    16.  Editor de blocos
    17.  Ferramentas próprias do editor (fonte, painel incluído, vídeo, ficheiro)
    18.  Anotação de imagens
    19.  Árvore de secções e página «Organizar secções»
    20.  Importação de PDF e triagem
    21.  Apagar painéis e reciclagem
    22.  Seleção múltipla e barra de ações em lote (.sel-*)
    23.  (número vago — os cartões antigos saíram em 06/09/2026)
    24.  Ecrãs estreitos (<= 900 px) e telemóvel (<= 640 px)
    25.  Impressão
    26.  Ligações entre painéis (.blk-ligacao, .lig-*)
    27.  Importar PDF para o painel (.imp-*)
    28.  Contas e pessoas (.aut-*)
    29.  Rascunho, publicação e versões (.pub-*)
    30.  Instituição — logótipo e nome (.inst-* · .marca-logo · .aut-logo)
    31.  Tomada de conhecimento (.tc-*)
    32.  Notas e sugestões (.notas-* · .nota-*)
    33.  Lembretes (.lem-*)
    34.  Mensagens (.msg-*)
    35.  E-mail — definições de envio (.email-*)
    36.  Escolher folhas do Excel (.folhas-*)
    37.  Organização — agrupar e permissões (.agrupar-* · .org-so-leitura)
    38.  Modo Organizar na barra lateral (.org-lat-*)
    39.  Triagem por grupos e passos da importação (.triagem-grupo ·
         .triagem-variante · .passo-importar)
    40.  Protocolos de TC — ficha rápida, secções recolhíveis, subtítulos,
         fichas das regras transversais e cabeçalho compacto (.ptc-*) ·
         página «Uniformizar decimais» (.ptc-dec-*)
    41.  Acertos de apresentação de 26/09/2026 (declarações pendentes, «+» do
         editor, ações dos lembretes próprios, botões dos lembretes a 44 px)
    42.  Ajuda — o manual do utilizador na plataforma: página «Ajuda», botão
         «?» e a janela da ajuda contextual (.ajuda-*)
    43.  Visitas guiadas — «Mostrar-me passo a passo» (.visita-* · .visitas-*)
    44.  Arrastar imagens para os campos do editor (.largar-*)
    45.  Copiar e mover blocos no editor: arrastar pelo ⋮, «Mover para a
         secção…», «Copiar o bloco» e «Colar bloco copiado» (.mov-* ·
         .blocos-* · .botao-colar)

   REGRAS QUE ESTA FOLHA CUMPRE:
   · Nenhuma cor nasce dentro de um @media ou de um [data-tema]: todas existem
     primeiro no :root, e os blocos de tema só lhes trocam o valor.
   · --acento-contra é a cor do texto POR CIMA do acento: branca no tema claro,
     escura no tema escuro. (Já foi apanhado aqui um erro de contraste; fica fixo.)
   · «text-transform: uppercase» só em palavras que é a APLICAÇÃO que escreve
     (rótulos, etiquetas, títulos de secção). Nunca em texto escrito por quem
     faz o painel: nas tabelas de parâmetros as colunas chamam-se kV, mAs, mSv
     e mm, e a caixa desses símbolos é normalizada — «KV» e «MAS» não existem.
   · Alvos de toque com 44 px ou mais em ecrãs estreitos.
   · Tudo o que é focável mostra um contorno visível (:focus-visible).
   ========================================================================== */


/* =============================================================================
   1. TOKENS
   -----------------------------------------------------------------------------
   O tema claro é a base. O tema escuro aparece duas vezes, com os MESMOS
   valores (quem mudar um token escuro muda-o nos dois blocos):
     · @media (prefers-color-scheme: dark) guardado por
       :root:not([data-tema="claro"]) — o sistema está escuro e a escolha no
       seletor «Tema» é «Automático» (sem atributo data-tema). É isto que faz a
       aplicação seguir o computador ou o telemóvel ao vivo, sem JavaScript;
     · :root[data-tema="escuro"] — escolheu «Escuro» no seletor (vale com
       qualquer esquema do sistema).
   Com data-tema="claro" («Claro» no seletor) o tema claro manda, mesmo com o
   sistema escuro. O color-scheme acompanha em cada estado (light no :root,
   dark nos dois blocos escuros), para os controlos nativos — setas dos
   seletores, barras de deslocamento, calendários — terem as cores certas.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Tom e croma do acento (é só isto que a modalidade troca) ------------ */
  --tom: 250;        /* tom predefinido: «geral», cinzento-azulado */
  --croma: 0.02;

  /* --- Neutros (tema claro) ----------------------------------------------- */
  --bg: oklch(0.988 0.004 245);          /* fundo da aplicação */
  --sup: oklch(1 0 0);                   /* superfície: cartões, barras, campos */
  --sup2: oklch(0.972 0.005 245);        /* superfície secundária: barra lateral */
  --linha: oklch(0.905 0.008 245);       /* contorno normal */
  --linha-suave: oklch(0.93 0.006 245);  /* linha interior de tabela */
  --txt: oklch(0.27 0.02 250);           /* texto principal */
  --txt2: oklch(0.53 0.015 250);         /* texto secundário */
  --tela: oklch(0.955 0.006 245);        /* fundo das capturas de consola */
  --tela-linha: oklch(0.80 0.012 245);   /* traço dos desenhos sobre a tela */
  /* Contorno dos CAMPOS (caixas de texto, seletores). Mais forte do que
     --linha: o limite de um campo tem de se ver a 3:1 ou mais contra o fundo
     onde está (WCAG 1.4.11). Medido: 3,64:1 sobre --sup, 3,35:1 sobre --sup2;
     no escuro 3,38:1 sobre --sup e 3,69:1 sobre --bg. */
  --linha-campo: oklch(0.62 0.015 250);
  /* Fundo do texto e dos blocos SELECIONADOS no editor (o Editor.js trazia um
     azul claro fixo, ilegível sob as letras claras do tema escuro).
     --txt por cima: 11,2:1 no claro, 7,8:1 no escuro. */
  --selecao: oklch(0.90 0.045 245);

  /* --- Estados ------------------------------------------------------------ */
  --ok-fundo: oklch(0.955 0.03 150);
  --ok-linha: oklch(0.82 0.06 150);
  --ok-txt: oklch(0.42 0.09 150);

  --erro-fundo: oklch(0.975 0.02 25);
  --erro-linha: oklch(0.88 0.06 25);
  --erro-txt: oklch(0.48 0.14 25);

  --aviso-fundo: oklch(0.968 0.03 75);
  --aviso-linha: oklch(0.86 0.07 75);
  --aviso-txt: oklch(0.47 0.10 65);

  /* --- «Mudou desde a última vez que aqui estive» --------------------------
     Marca de novidade (.novidade na árvore lateral, .aviso-novidade no topo do
     painel). Tem cor própria de propósito: não é um alarme (que é âmbar), não
     é um erro (vermelho) nem um «correu bem» (verde) — é só uma chamada de
     atenção calma. E não é a cor da modalidade, porque essa muda de página
     para página e a marca tem de ser sempre a mesma. */
  --novidade-fundo: oklch(0.955 0.035 265);
  --novidade-linha: oklch(0.64 0.15 265);
  --novidade-txt: oklch(0.44 0.14 265);

  /* --- Ficheiro anexado: fundo do quadradinho que diz PDF ou XLSX ---------
     São só duas manchas de cor para o olho separar um documento de uma folha
     de cálculo à distância. Quem lê a diferença são as LETRAS desenhadas por
     cima (PDF / XLSX): a cor sozinha nunca distingue nada nesta folha. */
  --fic-pdf: oklch(0.93 0.045 25);
  --fic-xls: oklch(0.93 0.050 150);

  /* --- Cores das seis modalidades (o ponto colorido da árvore) ------------- */
  --m-rm: oklch(0.60 0.11 195);
  --m-tc: oklch(0.60 0.11 265);
  --m-mamo: oklch(0.60 0.11 350);
  --m-rx: oklch(0.60 0.11 75);
  --m-dexa: oklch(0.60 0.11 150);
  --m-geral: oklch(0.60 0.02 250);

  /* --- Véu e janela de anotação (é sempre escura, mesmo no tema claro) ----- */
  --veu: oklch(0.16 0.02 250 / 0.55);
  --anotar-fundo: oklch(0.16 0.02 250 / 0.94);
  --anotar-barra: oklch(0.225 0.014 250);
  --anotar-txt: oklch(0.97 0 0);
  --anotar-linha: oklch(0.97 0 0 / 0.35);

  /* --- Cor por tipo de lembrete (procedimento/ação/formação/evento) --------
     Cada tipo tem cor própria; --lem-tag-txt é o texto POR CIMA dessas cores
     (branco no tema claro, escuro no tema escuro, onde as cores clareiam). */
  --lem-proc: oklch(0.58 0.11 195);   /* Procedimento — verde-azulado */
  --lem-acao: oklch(0.56 0.12 265);   /* Ação — índigo */
  --lem-form: oklch(0.60 0.11 85);    /* Formação — âmbar/ocre */
  --lem-even: oklch(0.58 0.13 350);   /* Evento — rosa */
  --lem-tag-txt: oklch(0.99 0 0);

  /* --- Logótipo da instituição --------------------------------------------
     --logo-placa é a placa que fica POR TRÁS do logótipo quando só há a versão
     do tema claro (tinta escura) e a aplicação está no tema escuro: sem ela o
     desenho desaparecia no fundo. No tema claro não é precisa placa nenhuma,
     por isso vale «transparent» — a regra existe sempre, é só o valor que muda.
     Os outros são FIXOS nos dois temas: são as duas amostras da página
     «Instituição» — «assim fica no tema escuro», que tem de mostrar o fundo
     escuro mesmo a quem tem a aplicação no tema claro, e «assim fica no tema
     claro», que tem de mostrar o fundo claro mesmo a quem a tem no escuro
     (sem isso um logótipo de tinta escura quase desaparecia na amostra clara).
     --inst-rotulo-claro é o rótulo por cima da amostra clara: 5,99:1 sobre
     --inst-tela-clara. */
  --logo-placa: transparent;
  --inst-tela-escura: #1c2330;
  --inst-placa: oklch(0.97 0.005 245);
  --inst-tela-clara: oklch(1 0 0);
  --inst-linha-clara: oklch(0.905 0.008 245);
  --inst-rotulo-claro: oklch(0.50 0.015 250);

  /* --- Papel e tinta da impressão (usados no bloco @media print) ----------- */
  --papel: #ffffff;
  --tinta: #000000;
  --preto: #000000;        /* fundo dos leitores de vídeo */

  /* --- Escala tipográfica (oito degraus; nenhum tamanho fora daqui) --------
     A folha tinha vinte tamanhos em px, com meios-pontos consecutivos
     (12 / 12,5 / 13 / 13,5 …): não era uma escala, era um contínuo. Estes oito
     degraus cobrem tudo o que a aplicação escreve, do rótulo mais pequeno ao
     título de página. Fora daqui só existem os «pt» da impressão e os «em»
     relativos. Quem precisar de um tamanho novo escolhe o degrau mais próximo;
     não se acrescentam degraus sem razão escrita. */
  --t-1: 11px;   /* rótulos em maiúsculas pequenas, emblemas, notas de rodapé */
  --t-2: 12px;   /* legendas, texto secundário apertado */
  --t-3: 13px;   /* texto secundário, chips, botões pequenos */
  --t-4: 14px;   /* letra dos botões e da maioria dos controlos */
  --t-5: 15px;   /* corpo de texto */
  --t-6: 17px;   /* subtítulos e títulos de cartão */
  --t-7: 20px;   /* títulos de secção da página */
  --t-8: 25px;   /* título da página (h1) */

  /* --- Escala de espaçamento (seis degraus) --------------------------------
     Os mesmos seis valores servem gap, padding e margin em toda a folha. */
  --e1: 4px;
  --e2: 6px;
  --e3: 8px;
  --e4: 12px;
  --e5: 16px;
  --e6: 24px;

  /* --- Alturas dos botões (três, e só três) --------------------------------
     --alt-p: controlos de apoio dentro de um bloco (atalhos, filtros);
     --alt:   altura corrente de qualquer botão ou campo;
     --alt-g: ação principal em destaque (barra móvel, botão de largura total).
     Em ecrãs estreitos (≤ 900 px) tudo o que se toca sobe para 44 px — a lista
     está na secção 24. */
  --alt-p: 36px;
  --alt: 40px;
  --alt-g: 50px;

  /* --- Medidas, sombras e letra ------------------------------------------- */
  --raio: 10px;        /* cartões */
  --raio-p: 7px;       /* botões e campos */
  --raio-g: 12px;      /* caixa grande do editor */
  --sombra: 0 1px 2px oklch(0 0 0 / 0.04);
  --sombra-g: 0 2px 8px oklch(0 0 0 / 0.06);
  --largura-lateral: 268px;

  /* --- Recuos dos quatro níveis da árvore lateral --------------------------
     tema → modalidade → secção/painel → variante. Ficam aqui em cima porque a
     marcação da árvore é PLANA (os níveis são irmãos, não caixas encaixadas):
     é o recuo que faz a hierarquia, e assim aperta-se tudo num sítio só.
     --arv-guia é o x onde passa o filete vertical que agrupa o que está dentro
     de uma modalidade, e é também o meio da pastilha de cor dela. ---------- */
  --arv-n1: 6px;       /* tema (encostado à esquerda) */
  --arv-n2: 22px;      /* modalidade — a pastilha de cor vive dentro do recuo */
  --arv-n3: 34px;      /* secção e painel */
  --arv-n4: 48px;      /* variante de painel */
  --arv-guia: 10px;    /* filete vertical / meio da pastilha */
  --arv-conta: 2.4em;  /* largura da coluna das contas, para os números alinharem à direita */
  --passo: 16px;       /* recuo acrescentado por cada nível de secção mais fundo */
  --altura-movel: 62px;               /* barra inferior do telemóvel */
  --fonte-ui: "Public Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
              Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
                "Liberation Mono", monospace;

  /* --- Nomes antigos, mantidos para nada partir se sobrar algum var() ------ */
  --fundo: var(--bg);
  --superficie: var(--sup);
  --texto: var(--txt);
  --texto-suave: var(--txt2);
  --navy: var(--txt);
  --teal: var(--acento);
  --teal-escuro: var(--acento-txt);
  --aviso: var(--erro-txt);
}

/* Os quatro tokens do acento são declarados no :root E no body: é no body que
   vive o atributo data-modalidade, por isso é aí que --tom e --croma mudam. */
:root,
body {
  --acento: oklch(0.50 var(--croma) var(--tom));                 /* preenchimento */
  --acento-txt: oklch(0.42 var(--croma) var(--tom));             /* texto e ligações */
  --acento-fraco: oklch(0.955 calc(var(--croma) * 0.32) var(--tom)); /* fundo suave */
  --acento-contra: oklch(1 0 0);                                 /* texto SOBRE o acento */
  /* A janela de anotação é sempre escura, mesmo com o tema claro: precisa da
     variante clara do acento nos dois temas, senão o anel de foco e o botão da
     ferramenta escolhida ficam abaixo dos 3:1 exigidos para um indicador. */
  --anotar-acento: oklch(0.74 calc(var(--croma) * 1.1) var(--tom));
  --anotar-acento-contra: oklch(0.19 0.02 var(--tom));
}

/* --- Tema escuro seguindo o sistema («Automático» no seletor «Tema») ------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --bg: oklch(0.185 0.012 250);
    --sup: oklch(0.225 0.014 250);
    --sup2: oklch(0.205 0.013 250);
    --linha: oklch(0.325 0.016 250);
    --linha-suave: oklch(0.29 0.015 250);
    --txt: oklch(0.945 0.008 250);
    --txt2: oklch(0.70 0.012 250);
    --tela: oklch(0.255 0.014 250);
    --tela-linha: oklch(0.45 0.018 250);
    --linha-campo: oklch(0.54 0.016 250);
    --selecao: oklch(0.40 0.06 250);

    --ok-fundo: oklch(0.30 0.05 150);
    --ok-linha: oklch(0.45 0.07 150);
    --ok-txt: oklch(0.86 0.10 150);

    --erro-fundo: oklch(0.30 0.06 25);
    --erro-linha: oklch(0.45 0.09 25);
    --erro-txt: oklch(0.82 0.11 25);

    --aviso-fundo: oklch(0.30 0.05 75);
    --aviso-linha: oklch(0.45 0.07 75);
    --aviso-txt: oklch(0.87 0.10 85);

    --novidade-fundo: oklch(0.30 0.05 265);
    --novidade-linha: oklch(0.55 0.11 265);
    --novidade-txt: oklch(0.87 0.09 265);

    --fic-pdf: oklch(0.35 0.055 25);
    --fic-xls: oklch(0.33 0.050 150);

    --m-rm: oklch(0.72 0.12 195);
    --m-tc: oklch(0.72 0.12 265);
    --m-mamo: oklch(0.72 0.12 350);
    --m-rx: oklch(0.72 0.12 75);
    --m-dexa: oklch(0.72 0.12 150);
    --m-geral: oklch(0.72 0.02 250);

    --veu: oklch(0.10 0.01 250 / 0.65);
    --sombra: 0 1px 2px oklch(0 0 0 / 0.35);
    --sombra-g: 0 2px 10px oklch(0 0 0 / 0.45);

    --lem-proc: oklch(0.72 0.11 195);
    --lem-acao: oklch(0.72 0.12 265);
    --lem-form: oklch(0.76 0.11 85);
    --lem-even: oklch(0.74 0.13 350);
    --lem-tag-txt: oklch(0.18 0.02 250);

    /* Placa por trás de um logótipo que só existe na versão do tema claro. */
    --logo-placa: oklch(0.97 0.005 245);
  }

  :root:not([data-tema="claro"]),
  :root:not([data-tema="claro"]) body {
    --acento: oklch(0.74 calc(var(--croma) * 1.1) var(--tom));
    --acento-txt: oklch(0.82 calc(var(--croma) * 0.9) var(--tom));
    --acento-fraco: oklch(0.30 calc(var(--croma) * 0.45) var(--tom));
    /* Texto SOBRE o acento: no escuro o acento é claro, logo o texto é escuro. */
    --acento-contra: oklch(0.19 0.02 var(--tom));
  }
}

/* --- Tema escuro escolhido no seletor «Tema» (manda sobre o sistema) ------- */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --bg: oklch(0.185 0.012 250);
  --sup: oklch(0.225 0.014 250);
  --sup2: oklch(0.205 0.013 250);
  --linha: oklch(0.325 0.016 250);
  --linha-suave: oklch(0.29 0.015 250);
  --txt: oklch(0.945 0.008 250);
  --txt2: oklch(0.70 0.012 250);
  --tela: oklch(0.255 0.014 250);
  --tela-linha: oklch(0.45 0.018 250);
  --linha-campo: oklch(0.54 0.016 250);
  --selecao: oklch(0.40 0.06 250);

  --ok-fundo: oklch(0.30 0.05 150);
  --ok-linha: oklch(0.45 0.07 150);
  --ok-txt: oklch(0.86 0.10 150);

  --erro-fundo: oklch(0.30 0.06 25);
  --erro-linha: oklch(0.45 0.09 25);
  --erro-txt: oklch(0.82 0.11 25);

  --aviso-fundo: oklch(0.30 0.05 75);
  --aviso-linha: oklch(0.45 0.07 75);
  --aviso-txt: oklch(0.87 0.10 85);

  --novidade-fundo: oklch(0.30 0.05 265);
  --novidade-linha: oklch(0.55 0.11 265);
  --novidade-txt: oklch(0.87 0.09 265);

  --fic-pdf: oklch(0.35 0.055 25);
  --fic-xls: oklch(0.33 0.050 150);

  --m-rm: oklch(0.72 0.12 195);
  --m-tc: oklch(0.72 0.12 265);
  --m-mamo: oklch(0.72 0.12 350);
  --m-rx: oklch(0.72 0.12 75);
  --m-dexa: oklch(0.72 0.12 150);
  --m-geral: oklch(0.72 0.02 250);

  --veu: oklch(0.10 0.01 250 / 0.65);
  --sombra: 0 1px 2px oklch(0 0 0 / 0.35);
  --sombra-g: 0 2px 10px oklch(0 0 0 / 0.45);

  --lem-proc: oklch(0.72 0.11 195);
  --lem-acao: oklch(0.72 0.12 265);
  --lem-form: oklch(0.76 0.11 85);
  --lem-even: oklch(0.74 0.13 350);
  --lem-tag-txt: oklch(0.18 0.02 250);

  /* Placa por trás de um logótipo que só existe na versão do tema claro. */
  --logo-placa: oklch(0.97 0.005 245);
}

:root[data-tema="escuro"],
:root[data-tema="escuro"] body {
  --acento: oklch(0.74 calc(var(--croma) * 1.1) var(--tom));
  --acento-txt: oklch(0.82 calc(var(--croma) * 0.9) var(--tom));
  --acento-fraco: oklch(0.30 calc(var(--croma) * 0.45) var(--tom));
  --acento-contra: oklch(0.19 0.02 var(--tom));
}


/* =============================================================================
   2. COR POR MODALIDADE
   -----------------------------------------------------------------------------
   <body data-modalidade="rm|tc|mamografia|rx|dexa|geral"> troca apenas o tom e o
   croma; os quatro tokens do acento são recalculados a partir daí. Sem atributo,
   ou com um valor desconhecido, fica «geral» (cinzento-azulado) — que é o certo
   para as páginas de gestão (importar, organizar secções, triagem).
   ========================================================================== */

body[data-modalidade="rm"] { --tom: 195; --croma: 0.10; }
body[data-modalidade="tc"] { --tom: 265; --croma: 0.10; }
body[data-modalidade="mamografia"] { --tom: 350; --croma: 0.10; }
body[data-modalidade="rx"] { --tom:  75; --croma: 0.10; }
body[data-modalidade="dexa"] { --tom: 150; --croma: 0.10; }
body[data-modalidade="geral"]       { --tom: 250; --croma: 0.02; }

/* Escritas alternativas que também se aceitam, para o nome não ter de ser exato. */
body[data-modalidade="ressonancia"] { --tom: 195; --croma: 0.10; }
body[data-modalidade="tac"]         { --tom: 265; --croma: 0.10; }
body[data-modalidade="mamo"]        { --tom: 350; --croma: 0.10; }
body[data-modalidade="raiox"]       { --tom:  75; --croma: 0.10; }
body[data-modalidade="densitometria"] { --tom: 150; --croma: 0.10; }

/* O ponto colorido: por omissão usa o acento da página; com classe ou com
   data-modalidade própria mostra a cor daquela modalidade (a árvore lateral
   mostra várias modalidades ao mesmo tempo). */
.ponto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--acento);
}
.ponto[data-modalidade="rm"],         [data-modalidade="rm"] > .ponto         { background: var(--m-rm); }
.ponto[data-modalidade="tc"],         [data-modalidade="tc"] > .ponto         { background: var(--m-tc); }
.ponto[data-modalidade="mamografia"], [data-modalidade="mamografia"] > .ponto { background: var(--m-mamo); }
.ponto[data-modalidade="rx"],         [data-modalidade="rx"] > .ponto         { background: var(--m-rx); }
.ponto[data-modalidade="dexa"],       [data-modalidade="dexa"] > .ponto       { background: var(--m-dexa); }
.ponto[data-modalidade="geral"],      [data-modalidade="geral"] > .ponto      { background: var(--m-geral); }
/* Modalidade criada à mão (chave «x-…») sem cor escolhida: fica na cor neutra
   (geral), como qualquer modalidade que não seja de imagiologia. Quando o
   administrador lhe escolhe uma cor, a regra gerada em `estilo_cores_modalidades`
   (com !important) ganha a esta. */
.ponto[data-modalidade^="x-"],        [data-modalidade^="x-"] > .ponto        { background: var(--m-geral); }


/* =============================================================================
   TOKENS DE RECURSO — só para navegadores antigos que não conhecem oklch().
   Sem este bloco a aplicação ficaria sem cores nesses navegadores. As cores são
   as mesmas, escritas em hexadecimal aproximado.
   ========================================================================== */

@supports not (color: oklch(0.5 0.1 200)) {
  :root {
    --bg: #f7f8fa;  --sup: #ffffff;  --sup2: #f1f3f6;
    --linha: #dde2e9; --linha-suave: #e8ebf0;
    --txt: #1f2733; --txt2: #5d6675;
    --tela: #eef1f5; --tela-linha: #b9c1cc;
    --linha-campo: #80878f; --selecao: #c6e2fb;
    /* As amostras fixas da página «Instituição» (iguais nos dois temas). */
    --inst-placa: #f2f5f8; --inst-tela-clara: #ffffff;
    --inst-linha-clara: #dbe0e5; --inst-rotulo-claro: #5d646c;
    --ok-fundo: #e8f6ee; --ok-linha: #a8d8bd; --ok-txt: #1d6b45;
    --erro-fundo: #fdf0ee; --erro-linha: #f0c7bd; --erro-txt: #a8371f;
    --aviso-fundo: #fdf4e6; --aviso-linha: #e8cf9a; --aviso-txt: #8a5a14;
    --novidade-fundo: #e5f0ff; --novidade-linha: #5f87e7; --novidade-txt: #2b4c9f;
    --fic-pdf: #fbe7e2; --fic-xls: #e4f3ea;
    --m-rm: #2f8f8a; --m-tc: #5a7fd0; --m-mamo: #c05a8a;
    --m-rx: #9c7a1e; --m-dexa: #3f8f5f; --m-geral: #7a828f;
    --veu: rgba(20, 26, 38, .55);
    --anotar-fundo: rgba(16, 22, 36, .94);
    --anotar-barra: #232c3c;
    --anotar-txt: #ffffff;
    --anotar-linha: rgba(255, 255, 255, .35);
    --sombra: 0 1px 2px rgba(0, 0, 0, .06);
    --sombra-g: 0 2px 8px rgba(0, 0, 0, .08);
  }
  :root, body { --acento: #4a5568; --acento-txt: #3c4655; --acento-fraco: #eef0f4; --acento-contra: #ffffff;
                --anotar-acento: #a1acb9; --anotar-acento-contra: #0d151c; }
  body[data-modalidade="rm"]         { --acento: #227e78; --acento-txt: #1b6660; --acento-fraco: #e9f4f3; --anotar-acento: #3fc0c0; --anotar-acento-contra: #081717; }
  body[data-modalidade="tc"]         { --acento: #3a5fa8; --acento-txt: #2f4d88; --acento-fraco: #ecf0f9; --anotar-acento: #89a9f1; --anotar-acento-contra: #0f141d; }
  body[data-modalidade="mamografia"] { --acento: #a34572; --acento-txt: #86375d; --acento-fraco: #fbecf2; --anotar-acento: #df8db5; --anotar-acento-contra: #1b1015; }
  body[data-modalidade="rx"]         { --acento: #7d6413; --acento-txt: #64500f; --acento-fraco: #f7f2e3; --anotar-acento: #d3a056; --anotar-acento-contra: #19130a; }
  body[data-modalidade="dexa"]       { --acento: #2c7a4e; --acento-txt: #23623e; --acento-fraco: #e9f5ee; --anotar-acento: #76be86; --anotar-acento-contra: #0d160f; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
      --bg: #161b24; --sup: #1e2531; --sup2: #1a212c;
      --linha: #333c4b; --linha-suave: #2a323f;
      --txt: #eef1f5; --txt2: #a8b0bd;
      --tela: #232b38; --tela-linha: #5c6675;
      --linha-campo: #6e7680; --selecao: #2e4a67;
      --ok-fundo: #1e3a2c; --ok-linha: #386b4f; --ok-txt: #9fe0bb;
      --erro-fundo: #3a2320; --erro-linha: #6b3c34; --erro-txt: #f0a99b;
      --aviso-fundo: #3a2f1c; --aviso-linha: #6b5a30; --aviso-txt: #e8c98a;
      --novidade-fundo: #212d47; --novidade-linha: #526fb2; --novidade-txt: #b7d4ff;
      --fic-pdf: #472920; --fic-xls: #1f3b2b;
    }
    :root:not([data-tema="claro"]), :root:not([data-tema="claro"]) body {
      --acento: #9aa5b5; --acento-txt: #c3cbd6; --acento-fraco: #2a323f; --acento-contra: #161b24;
    }
  }
  :root[data-tema="escuro"] {
    --bg: #161b24; --sup: #1e2531; --sup2: #1a212c;
    --linha: #333c4b; --linha-suave: #2a323f;
    --txt: #eef1f5; --txt2: #a8b0bd;
    --tela: #232b38; --tela-linha: #5c6675;
    --linha-campo: #6e7680; --selecao: #2e4a67;
    --ok-fundo: #1e3a2c; --ok-linha: #386b4f; --ok-txt: #9fe0bb;
    --erro-fundo: #3a2320; --erro-linha: #6b3c34; --erro-txt: #f0a99b;
    --aviso-fundo: #3a2f1c; --aviso-linha: #6b5a30; --aviso-txt: #e8c98a;
    --novidade-fundo: #212d47; --novidade-linha: #526fb2; --novidade-txt: #b7d4ff;
    --fic-pdf: #472920; --fic-xls: #1f3b2b;
  }
  :root[data-tema="escuro"], :root[data-tema="escuro"] body {
    --acento: #9aa5b5; --acento-txt: #c3cbd6; --acento-fraco: #2a323f; --acento-contra: #161b24;
  }
}


/* =============================================================================
   3. REPOSIÇÃO, TIPOGRAFIA E BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--fonte-ui);
  font-size: var(--t-5);
  line-height: 1.45;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-txt); text-decoration: none; }
a:hover { text-decoration: underline; }

img, video, canvas, svg { max-width: 100%; }

h1 {
  font-size: var(--t-8);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: var(--e2) 0 var(--e2);
  text-wrap: balance;
}
h2 { font-size: var(--t-7); line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; margin: var(--e5) 0 var(--e3); }
h3 { font-size: var(--t-5); line-height: 1.3; font-weight: 700; margin: var(--e4) 0 var(--e2); }

p { margin: var(--e3) 0; }

/* Literais da consola: nomes de sequências, antenas, destinos de rede, códigos. */
.mono { font-family: var(--fonte-mono); font-size: var(--t-4); }

hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e5) 0; }

/* Âncoras da navegação de secções: não ficam escondidas por baixo das barras. */
:target { scroll-margin-top: 56px; }


/* =============================================================================
   4. FOCO VISÍVEL E MOVIMENTO REDUZIDO
   -----------------------------------------------------------------------------
   Tudo o que é focável mostra um contorno bem visível quando se navega pelo
   teclado. Nada nesta folha usa outline:0 sem pôr outra marca de foco no lugar.
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

/* Nos campos de texto o contorno aparece mesmo ao clicar — ajuda a ver onde se
   está a escrever, e serve de recurso nos navegadores sem :focus-visible. */
input:focus, select:focus, textarea:focus, [contenteditable="true"]:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   5. INVÓLUCRO DE DUAS COLUNAS
   -----------------------------------------------------------------------------
   .app  = grelha geral · .lateral = barra lateral · .principal = conteúdo.
   A barra lateral acompanha o ecrã (sticky) e é a árvore que rola por dentro.
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--largura-lateral) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

.lateral {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sup2);
  border-right: 1px solid var(--linha);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}

.principal {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* --- Marca (serve na barra lateral e na barra do topo antiga) -------------- */

.marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.marca:hover { text-decoration: none; }
.lateral .marca {
  justify-content: space-between;
  padding: var(--e4) var(--e4) var(--e3);
}
.marca b { display: block; font-size: var(--t-6); font-weight: 700; letter-spacing: -0.01em; }
.marca small {
  display: block;
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--txt2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Seletor «Tema» (Automático · Claro · Escuro) --------------------------
   Um <select> nativo (templates/_tema_controlo.html) com o desenho dos botões
   pequenos da barra: mesma altura (--alt-p; 44 px no telemóvel, secção 24),
   mesmo raio, texto secundário. Nasce com o atributo «hidden» e é o tema.js
   que o mostra — por isso o «[hidden]» tem de ganhar ao display desta regra.
   A seta é a do próprio navegador, que o color-scheme de cada tema pinta.

   O LUGAR GUARDADO. O tema.js carrega depois da primeira pintura («defer»);
   se o seletor só ocupasse espaço quando ele o mostra, empurrava para baixo,
   a cada página, o que estivesse por baixo (a pesquisa e a árvore da barra
   lateral; no telemóvel, o cartão inteiro de «Iniciar sessão»). Por isso o
   <script> em linha do <head> (templates/_tema_cabeca.html) marca o <html>
   com a classe «tema-js» ANTES da primeira pintura, e com essa marca o
   seletor escondido é desenhado já com o seu tamanho, mas invisível
   (visibility: hidden — nem se vê, nem recebe o foco, nem o leitor de ecrã o
   anuncia). O tema.js tira-lhe o «hidden» e ele aparece no lugar que já era
   dele. Sem JavaScript não há marca: fica «display: none», sem lugar. */

.tema-escolha {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  flex: none;
  position: relative;
  color: var(--txt2);
}
.tema-escolha[hidden] { display: none; }
:root.tema-js .tema-escolha[hidden] { display: inline-flex; visibility: hidden; }
.tema-icone { width: 16px; height: 16px; flex: none; }

select.tema-seletor {
  width: auto;
  min-height: var(--alt-p);
  padding: var(--e1) var(--e2) var(--e1) var(--e3);
  font-size: var(--t-3);
  color: var(--txt2);
  background: var(--sup);
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
  cursor: pointer;
}
select.tema-seletor:hover { border-color: var(--acento); color: var(--acento-txt); }
select.tema-seletor:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* Na marca da barra lateral o seletor é o ÚLTIMO elemento (templates/base.html
   — assim a ordem do Tab é a ordem à vista, sem «order»). Ao lado do nome
   «Painéis» cabe e fica na mesma linha, encostado à direita (como o antigo
   botão). Ao lado de um logótipo não cabe — um logótipo horizontal ocupa uns
   150 px a 40 px de altura — e passa para uma linha própria, por baixo das
   áreas («Gestão documental | …»), que são a legenda do logótipo e não podem
   ficar separadas dele. */
.lateral .marca { flex-wrap: wrap; }
/* O ✕ de fechar a gaveta só aparece no telemóvel (secção 24). */
.fechar-lateral { display: none; }

/* --- Árvore de navegação da barra lateral ---------------------------------
   Nota: a classe .arvore também é usada pela árvore de secções da página
   inicial. As regras da barra lateral vivem debaixo de .lateral, por isso as
   duas convivem sem se pisarem.

   QUATRO NÍVEIS, de fora para dentro:

     .tema   «Protocolos», «Proteção radiológica»… É um LETREIRO de grupo, não
             um sítio para onde se vai: letra pequena em maiúsculas espaçadas,
             encostada à esquerda e separada da anterior apenas por espaço (sem
             filete). NÃO leva pastilha de cor — a cor é da modalidade e
             continua a ser dela.
     .mod    A modalidade (RM, TC, Mamografia…). É o nível que o técnico procura
             primeiro, por isso é o mais forte da barra: letra maior, a negro,
             com a pastilha da cor da modalidade.
     .sub    A secção dentro da modalidade (Segurança, Protocolos…).
     .item   O painel. .item.var é uma variante desse painel.

   A marcação é PLANA — os quatro níveis são irmãos, um a seguir ao outro, sem
   caixas encaixadas. Por isso a hierarquia lê-se por três coisas ao mesmo tempo
   e não só pelo peso da letra:
     1. o recuo (--arv-n1 … --arv-n4);
     2. o registo da letra (maiúsculas pequenas · negro grande · corpo normal);
     3. um filete vertical em --arv-guia, desenhado em cada linha de secção e de
        painel, que os amarra à modalidade de cima. O filete começa exatamente
        no meio da pastilha de cor.

   CORTE DOS NOMES: só se corta com reticências o que já leva o nome completo no
   atributo title — os painéis e as variantes (ver base.html). O tema, a
   modalidade e a secção não têm title, por isso passam para a linha de baixo em
   vez de se cortarem: numa barra estreita é preferível duas linhas a perder
   metade de «Programação anatómica das sequências». ----------------------- */

/* --- Abrir e fechar os ramos ---------------------------------------------
   Os três níveis de cima (tema, modalidade e secção) são <button> quando têm
   alguma coisa lá dentro, e continuam a ser <div> quando estão vazios. Este
   bloco tira ao botão tudo o que o navegador lhe põe por omissão — moldura,
   fundo, letra própria, texto ao centro — para a linha ficar EXATAMENTE com o
   aspeto que já tinha. Vem antes das regras de cada nível, para que o tamanho
   de letra de cada um continue a mandar.

   O «ramo» é o saco onde vive o que está dentro de uma linha. Não tem desenho
   nenhum: nem margem, nem enchimento, nem fundo. Só serve para se poder
   esconder tudo de uma vez com o atributo «hidden» — e é preciso dizê-lo aqui,
   porque a regra «display: block» de uma folha de estilos ganha sempre à do
   navegador, e sem esta linha um ramo fechado continuava à vista. */

.arvore button.tema,
.arvore button.mod,
.arvore button.sub {
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-style: inherit;
  text-align: left;
  cursor: pointer;
}

.arvore .ramo { display: block; flex: none; min-width: 0; }
.arvore .ramo[hidden] { display: none; }

/* A seta que diz se o ramo está aberto ou fechado. É desenhada com dois lados
   de uma caixa vazia, e não com uma letra: assim aparece igual em qualquer
   computador, sem depender das letras que lá estiverem instaladas.

   Aberto aponta para baixo; fechado aponta para a esquerda. Não é só a
   direção que muda de estado — o «aria-expanded» do botão diz o mesmo por
   palavras, para quem não vê a seta.

   FICA À DIREITA. À esquerda não podia: é o recuo de cada nível que diz a que
   nível a linha pertence, e uma seta antes do nome empurrava o tema para o
   recuo da modalidade. */
.arv-seta {
  flex: none;
  align-self: center;
  width: 6px;
  height: 6px;
  margin-left: var(--e3);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.75;
  transition: transform 0.15s ease;
}
.arvore [aria-expanded="false"] > .arv-seta {
  transform: rotate(-45deg) translate(-1px, -1px);
}

/* «Fechar tudo» / «Abrir tudo». Não vem escrito do servidor: é o
   static/js/arvore.js que o cria. Sem JavaScript não existe — e faz bem, que
   sem JavaScript não teria nada para fazer. Fica por CIMA da árvore, fora da
   parte que rola, para estar sempre à mão. */
.arv-comandos {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--e4) var(--e1);
}
.arv-tudo {
  min-height: var(--alt-p);
  padding: var(--e1) var(--e3);
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--txt2);
  font: inherit;
  font-size: var(--t-3);
  cursor: pointer;
}
.arv-tudo:hover {
  border-color: var(--linha);
  background: var(--sup);
  color: var(--acento-txt);
}
/* Este comando come altura à árvore, e a árvore é o que interessa. Quando ele
   existe, a folga que a caixa de pesquisa deixava por baixo passa de 12 px para
   4 px — o botão fica encostado à pesquisa e a árvore recupera 8 px. Sem
   JavaScript o comando não é criado, esta regra não encontra ninguém e a folga
   fica exatamente como sempre esteve. */
.procura:has(+ .arv-comandos) { margin-bottom: var(--e1); }

.lateral .arvore {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 var(--e3) var(--e4);
  display: flex;
  flex-direction: column;
  /* Sem folga entre linhas de propósito: cada linha já tem o seu enchimento, e
     com 1 px de folga o filete vertical dos níveis 3 e 4 aparecia aos bocados
     nos ecrãs de alta resolução (o corte é do tamanho de dois pontos do ecrã). */
  gap: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Nível 1: tema -------------------------------------------------------- */

.arvore .tema {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  /* Os temas de topo separam-se uns dos outros só por ESPAÇO, sem filete
     (decisão do promotor, 05/09/2026): o espaço em branco por cima chega para
     distinguir um grupo do seguinte. */
  margin: 20px 0 var(--e1);
  padding: 4px var(--arv-n1) 3px;
  font-size: var(--t-1);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--txt2);
  text-decoration: none;
  overflow-wrap: anywhere;   /* um nome sem espaços parte, não transborda */
}
/* O primeiro tema já tem a caixa de pesquisa por cima: precisa de menos espaço. */
.arvore .tema:first-child { margin-top: var(--e1); padding-top: 2px; }
/* Quantos painéis tem o tema todo. Um tema ainda vazio mostra 0 — é uma
   informação, não um erro: fica com o mesmo ar calmo dos outros. */
.arvore .tema .conta {
  flex: none;
  margin-left: auto;
  width: var(--arv-conta);
  text-align: right;
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: var(--t-1);
  letter-spacing: 0;
  color: var(--txt2);
}
/* Se um dia o tema passar a ser uma ligação, ganha realce e alvo de toque. */
.arvore a.tema:hover { color: var(--txt); text-decoration: none; }

/* --- Nível 2: modalidade (o nível mais forte da barra) -------------------- */

.arvore .mod {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 7px 6px 7px var(--arv-n2);
  border-radius: var(--raio-p);
  font-weight: 700;
  font-size: var(--t-4);
  line-height: 1.3;
  color: var(--txt);
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* A pastilha sai do fluxo e vai viver DENTRO do recuo, centrada em --arv-guia.
   Assim o nome da modalidade começa sempre no mesmo x, o filete vertical das
   linhas de baixo nasce debaixo dela, e não se gasta largura útil com o ponto. */
.arvore .mod > .ponto {
  position: absolute;
  left: var(--arv-guia);
  top: 50%;
  margin: -4.5px 0 0 -4.5px;
}
/* Quando a modalidade tem alguma coisa por baixo E ESSA COISA ESTÁ À VISTA, o
   filete já nasce NELA — da metade da pastilha para baixo — e vê-se de onde vem
   o que está lá dentro. Uma modalidade ainda sem nada (Mamografia, RX…) não
   ganha filete nenhum, para não ficar com um coto pendurado; e uma modalidade
   FECHADA também não, pelo mesmo motivo — o filete apontaria para linhas que
   naquele momento não existem no ecrã. Navegadores sem :has() ignoram esta
   regra e a árvore continua a ler-se pelo recuo e pela letra. */
.arvore .mod:has(+ .ramo:not([hidden])) {
  background-image: linear-gradient(var(--linha), var(--linha));
  background-repeat: no-repeat;
  background-size: 1px 50%;
  background-position: var(--arv-guia) 100%;
}

/* --- Níveis 3 e 4: secção, painel e variante ------------------------------
   O filete que os amarra à modalidade é um fundo de 1 px em --arv-guia. Fica em
   «background-image» de propósito: assim o realce do rato e o do painel aberto
   só mexem em «background-color» e não apagam o filete. */

/* As linhas da árvore não encolhem.
   A árvore é uma caixa flexível em coluna; por omissão, os filhos de uma caixa
   flexível encolhem para caber. Com meia dúzia de painéis não se nota, mas a
   partir de umas dezenas o navegador esprememe cada linha — medido: 85 painéis
   davam 10 px de altura por linha, em vez de 27, e os nomes ficavam ilegíveis.
   Com «flex: none» as linhas guardam a altura própria e a árvore rola, que é o
   que já estava previsto (a caixa tem «overflow-y: auto»). */
.arvore .tema,
.arvore .mod,
.arvore .sub,
.arvore .item,
.arvore .ramo { flex: none; }

.arvore .sub,
.arvore .item {
  background-image: linear-gradient(var(--linha), var(--linha));
  background-repeat: no-repeat;
  background-size: 1px 100%;
  /* O filete-guia acompanha o recuo do nível: cada profundidade tem a sua
     linha vertical, como numa árvore, em vez de todas partilharem uma só. */
  background-position: calc(var(--arv-guia) + var(--nivel, 0) * var(--passo)) 0;
}

.arvore .sub {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding: 5px 6px 5px calc(var(--arv-n3) + var(--nivel, 0) * var(--passo));
  border-radius: var(--raio-p);
  font-size: var(--t-4);
  line-height: 1.35;
  color: var(--txt2);
  text-decoration: none;
}
.arvore .sub b { flex: 1 1 auto; min-width: 0; font-weight: 500; color: var(--txt); overflow-wrap: anywhere; }
/* Um nível mais fundo lê-se mais leve: o nome perde peso e fica num tom mais suave. */
.arvore .sub-fundo b { font-weight: 400; color: var(--txt2); }
/* A conta da secção fica numa coluna de largura fixa, encostada à direita, com
   algarismos de largura fixa (tabular) — os números alinham-se numa coluna,
   linha a linha, independentemente do comprimento do nome. O alvo é só .conta
   (não «span»), senão apanhava também a seta, que também é um <span> — foi isso
   que desalinhava as contas na primeira tentativa. */
.arvore .sub .conta {
  flex: none;
  width: var(--arv-conta);
  text-align: right;
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-2);
  color: var(--txt2);
}

.arvore .item {
  display: block;
  padding: 5px 6px 5px calc(var(--arv-n3) + var(--nivel, 0) * var(--passo));
  border-radius: var(--raio-p);
  font-size: var(--t-4);
  color: var(--txt2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arvore .item.var { padding-left: calc(var(--arv-n3) + (var(--nivel, 0) + 1) * var(--passo)); font-size: var(--t-3); }

.arvore .mod:hover,
.arvore .sub:hover,
.arvore .item:hover {
  background-color: var(--sup);
  text-decoration: none;
}

.arvore .item.ativo {
  background-color: var(--acento-fraco);
  color: var(--acento-txt);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--acento);
}

/* --- Marca de «mudou desde a última vez» ----------------------------------
   Um <span class="novidade"> ao lado do nome do painel, na árvore lateral.
   Quem o põe lá é o static/js/novidades.js, quando aquele painel mudou desde a
   última vez que ESTE navegador o abriu.

   Regras que este desenho cumpre:
   · discreto — pastilha pequena, cor calma, sem animação nenhuma;
   · NÃO se apoia só na cor. O que assinala o painel é uma PASTILHA — uma forma
     com contorno e fundo próprios, que se vê numa fotocópia a preto e branco e
     para quem não distingue cores. A cor só a torna mais fácil de encontrar;
   · o que vai dentro da pastilha é de quem a põe: hoje é um ponto («•»), com o
     texto para os leitores de ecrã ao lado. Se um dia lá for uma palavra, cabe
     à mesma; e se vier vazia, é esta folha que lhe escreve «novo» (:empty),
     para nunca ficar uma marca muda;
   · não sai na impressão (ver a secção 25).

   ONDE FICA: encostada à direita da linha, e a linha ganha espaço à direita
   para o nome do painel não passar por baixo dela. Isso é feito com :has() —
   nos navegadores antigos que não o conhecem a pastilha fica logo a seguir ao
   nome, que também se lê bem, só sem o alinhamento à direita. */
.novidade {
  display: inline-block;
  flex: none;
  margin-left: var(--e1);
  padding: 0 var(--e1);
  border: 1px solid var(--novidade-linha);
  border-radius: 999px;
  background: var(--novidade-fundo);
  color: var(--novidade-txt);
  font-size: var(--t-1);
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}
/* Marca sem nada lá dentro: escreve-se a palavra, para não ficar um risco mudo. */
.novidade:empty { padding: 0 var(--e1); }
.novidade:empty::after { content: "novo"; font-size: var(--t-1); }

/* Espaço reservado à direita da linha: o que chega para a pastilha do ponto
   (a de todos os dias) é pouco; só a pastilha com palavra precisa de mais. */
.arvore .item:has(.novidade) { position: relative; padding-right: var(--e6); }
.arvore .item:has(.novidade:empty) { padding-right: 44px; }
.arvore .item:has(.novidade) .novidade {
  position: absolute;
  right: 6px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}

/* Um tema ainda sem nada dentro não pode ter ar de avaria. Se a página puser lá
   uma nota, ela fica recuada como se fosse uma secção e sem a caixa tracejada
   que o .vazio ganha nas páginas de conteúdo — na barra lateral isso lia-se
   como erro. */
.lateral .arvore .vazio {
  border: 0;
  margin: 0;
  padding: 3px 6px 6px var(--arv-n3);
  font-size: var(--t-3);
}

/* --- Rodapé da barra lateral ----------------------------------------------
   SEMPRE À VISTA. A barra lateral é uma caixa flexível em coluna com a altura
   do ecrã; a árvore é que leva o «flex: 1» e o «overflow-y: auto», por isso é
   ela que rola por dentro. Este rodapé fica encostado ao fundo e não sai do
   ecrã, tenha a árvore dez linhas ou mil.

   TRÊS ANDARES, do mais importante para o menos:
     .rodape-novo     «Novo painel» — a ação principal, botão cheio com a cor
                      da modalidade da página. É o único que se lê à distância.
     .rodape-atalhos  «Importar», «Organizar» e «Reciclagem», lado a lado, em
                      botões de contorno. Já não são texto miudinho: têm caixa,
                      contorno e a cor do texto principal.
     .versao          a linha da versão, a mais discreta das três.

   PORQUE SÃO OS NOMES CURTOS: a barra tem 268 px, o que deixa 239 px úteis
   entre as margens. «Organizar secções» sozinho pede 124 px e «Importar
   ficheiros» 122 px — dois deles não cabem lado a lado, e três muito menos.
   Com os nomes por extenso, um em cada linha, o rodapé passava de 117 px para
   167 px e tirava 50 px à árvore. O nome por extenso não se perde: está no
   «title» de cada botão e continua escrito no rodapé da própria página.

   ALTURA MEDIDA: 121,7 px no computador, contra os 117,2 px que as quatro
   linhas de texto ocupavam antes — a árvore perde 4,5 px e ganha um botão de
   criar painel que nunca sai do ecrã. No telemóvel são 141,7 px, porque aí
   todos os alvos de toque passam a 44 px (regra do projeto).

   Se algum dia os nomes deixarem de caber numa linha (letras maiores, outro
   idioma), o «flex-wrap» passa-os para a linha de baixo em vez de os cortar. */

.rodape-lat {
  border-top: 1px solid var(--linha);
  padding: var(--e3) var(--e4);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  font-size: var(--t-3);
  color: var(--txt2);
}
.rodape-lat a { color: var(--txt2); }
.rodape-lat a:hover { color: var(--acento-txt); }

/* Ação principal: criar um painel novo. */
.rodape-novo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--alt);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--acento);
  color: var(--acento-contra);
  font-size: var(--t-4);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.rodape-lat a.rodape-novo { color: var(--acento-contra); }
.rodape-lat a.rodape-novo:hover {
  background: var(--acento-txt);
  border-color: var(--acento-txt);
  color: var(--acento-contra);
  text-decoration: none;
}
.rodape-novo:active { transform: translateY(1px); }
/* O «+» é só um sinal: quem diz o que o botão faz são as palavras ao lado. */
.rodape-mais { font-size: var(--t-6); font-weight: 400; line-height: 1; }

/* Os três atalhos, lado a lado. */
.rodape-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}
.rodape-atalho {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alt-p);
  padding: var(--e1) var(--e2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  font-size: var(--t-3);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.rodape-lat a.rodape-atalho { color: var(--txt); }
.rodape-lat a.rodape-atalho:hover {
  border-color: var(--acento);
  color: var(--acento-txt);
  text-decoration: none;
}

/* --- Barra inferior fixa do telemóvel -------------------------------------
   Só aparece em ecrãs estreitos (ver a secção 22). ------------------------ */

.barra-movel { display: none; }

/* Véu escuro por trás da gaveta da barra lateral, no telemóvel. */
.tapa-lateral { display: none; }


/* =============================================================================
   6. PESQUISA
   ========================================================================== */

.procura {
  position: relative;
  margin: 0 var(--e4) var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e3);
  background: var(--sup);
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e3);
  box-shadow: var(--sombra);
}
.procura:focus-within { border-color: var(--acento); }
.procura svg { width: 15px; height: 15px; color: var(--txt2); flex: none; }

/* O campo da pesquisa não usa o desenho normal dos campos de formulário. */
.procura input,
.procura input[type="text"],
.procura input[type="search"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t-4);
  color: var(--txt);
  outline: none;
}
.procura input::placeholder { color: var(--txt2); }

.procura kbd {
  flex: none;
  font-family: var(--fonte-mono);
  font-size: var(--t-1);
  color: var(--txt2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 1px var(--e1);
}

/* Lista de resultados: em página é uma lista simples; dentro da barra lateral
   é uma caixa que cai por baixo do campo de pesquisa. */
.lista-procura {
  list-style: none;
  margin: var(--e4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.procura .lista-procura {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  gap: 2px;
  margin: 0;
  padding: var(--e2);
  max-height: min(52vh, 380px);
  overflow-y: auto;
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-g);
}
.lateral > .lista-procura {
  margin: 0 var(--e4) var(--e4);
  gap: 2px;
  padding: var(--e2);
  max-height: 40vh;
  overflow-y: auto;
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}

.resultado {
  display: block;
  padding: var(--e3) var(--e3);
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  color: var(--txt);
  text-decoration: none;
}
.resultado b { display: block; font-size: var(--t-4); font-weight: 600; }
.resultado small { display: block; font-size: var(--t-2); color: var(--txt2); }
.resultado em {          /* realce do que foi procurado */
  font-style: normal;
  background: var(--acento-fraco);
  color: var(--acento-txt);
  border-radius: var(--raio-p);
  padding: 0 2px;
}
.resultado:hover,
.resultado:focus-visible,
.resultado.ativo {
  background: var(--acento-fraco);
  color: var(--acento-txt);
  text-decoration: none;
}

/* Na página de resultados cada resultado é um cartão com mais folga. */
.principal .lista-procura > .resultado,
.conteudo .lista-procura > .resultado {
  border-color: var(--linha);
  background: var(--sup);
  padding: var(--e4) var(--e4);
}

.sem-resultados {
  margin: var(--e4) 0;
  padding: var(--e4) var(--e4);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup2);
  color: var(--txt2);
  font-size: var(--t-4);
}
.sem-resultados strong { color: var(--txt); }


/* =============================================================================
   7. BARRA DO TOPO ANTIGA E BOTÕES
   -----------------------------------------------------------------------------
   A barra .topo continua a funcionar (páginas que ainda a usem); passou a ser
   clara, como o resto da aplicação, em vez de azul-escura.
   ========================================================================== */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) var(--e5);
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--sup);
  color: var(--txt);
  border-bottom: 1px solid var(--linha);
}
/* As ações da página ficam sempre encostadas à direita, haja migalhas à
   esquerda ou não. */
.acoes-topo { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; margin-left: auto; }

/* Migalhas DENTRO da barra do topo («Início › Utilizadores › Ana Dias»). São a
   única orientação de regresso da aplicação: não há botões «Voltar» avulsos
   nem navegação no rodapé da página. O último item é o sítio onde se está e
   não é ligação nenhuma. */
.topo .migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  min-width: 0;
}
.topo .migalhas b { color: var(--txt); font-weight: 600; }
.topo .migalhas a { color: var(--txt2); }
.topo .migalhas a:hover { color: var(--acento-txt); }

/* --- Botões ---------------------------------------------------------------
   .botao é a base de todos os botões e de todas as ligações com ar de botão.

   ANATOMIA COMUM (vale para os botões desta secção E para os «botões por
   componente» espalhados pela folha — .rodape-novo, .rodape-atalho, .tema-seletor,
   .arv-tudo, .ps-botao, .pc-botao, .an-botao, .fic-abrir, .lem-botao-p,
   .msg-botao-p, .arrastar-*, .vd-botao…):
     · três alturas, e só três: --alt-p (36 px) para controlos de apoio dentro
       de um bloco, --alt (40 px) para tudo o resto, --alt-g (50 px) para a
       ação principal de largura total;
     · raio --raio-p;
     · letra --t-4 com peso 500 (peso 600 quando o botão leva a cor de acento);
       os botões pequenos usam --t-3, que é o degrau abaixo.
   Uma altura fora destas três só se justifica com uma razão escrita ao lado —
   hoje há duas: os botões QUADRADOS de fechar (44 × 44 px, alvo de toque) e a
   barra inferior do telemóvel, que herda os 44 px da secção 24. */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--alt);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  font: inherit;
  font-size: var(--t-4);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.botao:hover { border-color: var(--acento); color: var(--acento-txt); text-decoration: none; }
.botao:active { transform: translateY(1px); }
/* Desativado com cores próprias em vez de opacity: em importar.html o botão
   desativado passa a mostrar «A importar…», e essa mensagem tem de ler-se
   (com opacity 0.55 ficava a 2,36:1; assim fica a 4,86:1 no tema claro). */
.botao[disabled] {
  background: var(--sup2);
  border-color: var(--linha);
  color: var(--txt2);
  cursor: default;
  transform: none;
  opacity: 1;
}

/* Ação principal do ecrã: preenchida com a cor da modalidade.
   O texto usa --acento-contra (branco no claro, escuro no escuro). */
.botao-acento {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-contra);
  font-weight: 600;
}
.botao-acento:hover {
  background: var(--acento-txt);
  border-color: var(--acento-txt);
  color: var(--acento-contra);
}
.botao-acento[disabled],
.botao-acento[disabled]:hover {
  background: var(--sup2);
  border-color: var(--linha);
  color: var(--txt2);
}

/* Botão só com contorno. */
.botao-linha { background: transparent; border-color: var(--linha); color: var(--txt); }
.conteudo .botao-linha,
.principal .botao-linha { background: var(--sup); border-color: var(--linha); color: var(--txt); }

/* Botão de largura toda. O texto PODE passar à linha: são botões com frases
   inteiras («Esvaziar a reciclagem (23 painéis)») e, com o texto numa linha só
   — que é o normal de todos os botões —, num ecrã de 320 px o botão ficava mais
   largo do que a caixa que o segura e empurrava a página inteira para fora do
   ecrã (medido: 333 px de conteúdo contra 320 px de ecrã). Num ecrã largo o
   texto cabe na mesma numa linha e nada muda. */
.botao-grande {
  width: 100%;
  min-width: 0;
  min-height: var(--alt-g);
  height: auto;
  padding-top: var(--e4);
  padding-bottom: var(--e4);
  font-size: var(--t-5);
  font-weight: 600;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.botao-pequeno { min-height: var(--alt-p); padding: var(--e2) var(--e4); font-size: var(--t-3); }
.botao-perigo { color: var(--erro-txt); border-color: var(--erro-linha); background: var(--erro-fundo); }
.botao-perigo:hover { color: var(--erro-txt); border-color: var(--erro-txt); }

/* Botões «Anotar» e «Repor original» acrescentados a cada imagem do editor:
   o desenho vem de .botao .botao-linha .botao-pequeno; aqui é só o acabamento. */
.an-abrir { font-weight: 600; }
.an-repor { color: var(--txt2); }


/* =============================================================================
   8. CONTEÚDO, TÍTULOS, RODAPÉ E UTILITÁRIOS
   ========================================================================== */

.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--e5) var(--e6) 40px;
}

.subtitulo { color: var(--txt2); margin: 0 0 var(--e4); font-size: var(--t-4); max-width: 74ch; }

.rodape {
  padding: var(--e5) var(--e6);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--t-3);
  color: var(--txt2);
  border-top: 1px solid var(--linha);
}
/* Texto de «não há nada aqui». Em bloco ganha caixa tracejada; dentro de uma
   frase (por exemplo no plano de corte) fica só em itálico. */
.vazio { color: var(--txt2); font-style: italic; font-size: var(--t-4); }
p.vazio, div.vazio, li.vazio {
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e3);
  margin: var(--e3) 0;
}

.escondido { display: none !important; }

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A ligação «Saltar para o conteúdo» está escondida até alguém carregar em Tab:
   nesse momento tem de aparecer no canto, senão o foco desaparece do ecrã e o
   atalho não serve para nada. Só se aplica a <a>: as etiquetas e o botão
   escondido da triagem também usam .oculto-visual e não podem sair do sítio. */
a.oculto-visual:focus,
a.oculto-visual:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  padding: var(--e3) var(--e4);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--sup);
  color: var(--txt);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-g);
}

/* --- As três caixas de mensagem: confirmação, aviso e erro ----------------
   Mesma anatomia nas três — contorno fino, filete de 4 px à esquerda, raio
   pequeno e 14 px de letra —, só com a cor a mudar. Assim distinguem-se de
   relance, e a informação não está SÓ na cor: cada uma começa por uma frase
   que diz o que aconteceu.

     .aviso-ok  confirmação: a ação foi feita («Painel publicado», «Definições
                guardadas», «Palavra-passe alterada»);
     .aviso     informação ou aviso: não foi feito nada, ou há algo a saber;
     .aut-erro  erro: não foi possível fazer o que se pediu (secção 28). */
.aviso,
.aviso-ok {
  padding: var(--e4) var(--e4);
  border-radius: var(--raio-p);
  margin: var(--e4) 0;
  font-size: var(--t-4);
}
.aviso {
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-linha);
  border-left: 4px solid var(--aviso-txt);
  color: var(--aviso-txt);
}
.aviso-ok {
  background: var(--ok-fundo);
  border: 1px solid var(--ok-linha);
  border-left: 4px solid var(--ok-txt);
  color: var(--ok-txt);
}
.aviso a, .aviso-ok a { color: inherit; text-decoration: underline; }
.aviso-ok p { margin: 0; }
.aviso-ok p + p { margin-top: var(--e2); }

/* --- Faixa «este painel mudou desde a última vez que aqui esteve» ----------
   Vai no topo da página do painel. Serve sozinha (class="aviso-novidade") e
   serve também em cima do aviso normal (class="aviso aviso-novidade") — por
   isso repete o desenho da caixa em vez de contar com ele.

   É a irmã grande da pastilha .novidade da árvore lateral (secção 5) e cumpre
   as mesmas regras: cor calma e própria, sem animação; a informação NÃO está
   na cor — está na frase que a faixa escreve e no traço grosso à esquerda, que
   se vê em papel e em qualquer daltonismo; e não sai na impressão (secção 25),
   porque uma folha impressa não tem «última vez que aqui estive». */
.aviso-novidade {
  /* Sem «display» de propósito: a faixa nasce escondida (class="escondido" e
     atributo hidden) e é o JavaScript que a destapa. Se aqui se escrevesse
     «display: block», esta regra ganhava ao «hidden» do navegador e a faixa
     aparecia onde não devia. */
  margin: var(--e4) 0;
  padding: var(--e4) var(--e4);
  border: 1px solid var(--novidade-linha);
  border-left: 4px solid var(--novidade-txt);
  border-radius: var(--raio-p);
  background: var(--novidade-fundo);
  color: var(--novidade-txt);
  font-size: var(--t-4);
  line-height: 1.45;
}
.aviso-novidade strong, .aviso-novidade b { font-weight: 700; }
.aviso-novidade a { color: inherit; text-decoration: underline; }
.aviso-novidade p { margin: 0; }
.aviso-novidade p + p { margin-top: var(--e2); }

/* Notas de ajuda por baixo dos campos. */
.nota-campo { font-size: var(--t-3); color: var(--txt2); margin: var(--e1) 0 0; }
.nota-campo.sugestao { color: var(--acento-txt); }

/* Migalhas de texto («Painéis › Secção ›») */
.migalhas { font-size: var(--t-3); color: var(--txt2); margin: 0 0 var(--e1); font-weight: 500; }
.migalhas .sep { margin: 0 var(--e2); opacity: 0.6; }

/* =============================================================================
   9. PÍLULAS: CHIPS E ETIQUETAS
   -----------------------------------------------------------------------------
   Havia duas pílulas com o mesmo papel e dois desenhos (.chip e .etiqueta).
   Agora é uma só: .chip é o nome, .etiqueta continua a valer como sinónimo
   enquanto houver páginas a usá-la, e os modificadores antigos
   (.etiqueta.rascunho, .erro-etiqueta, .chip.estado, .chip.variante) continuam
   a funcionar exatamente como funcionavam.

   Modificadores de estado, os que se escrevem de raiz:
     .chip-estado  âmbar — «Rascunho», «Por publicar»
     .chip-erro    vermelho — «Na reciclagem»
   ========================================================================== */

.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e2) 0 0; padding: 0; align-items: center; }

/* Chips de metadados do cabeçalho do painel (estado, versão, revisão, código). */
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin: var(--e3) 0 var(--e3); }
.chip,
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: var(--e1) var(--e3);
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--txt2);
  background: var(--bg);
  text-decoration: none;
}
.chip b, .etiqueta b { color: var(--txt); font-weight: 600; }

/* --- Modificadores de estado (novos) -------------------------------------- */
.chip-estado { background: var(--aviso-fundo); border-color: var(--aviso-linha); color: var(--aviso-txt); font-weight: 600; }
.chip-erro { background: var(--erro-fundo); border-color: var(--erro-linha); color: var(--erro-txt); font-weight: 600; }

/* --- Modificadores antigos (continuam a valer) ---------------------------- */
.etiqueta.tipo { background: var(--acento-fraco); border-color: var(--acento-fraco); color: var(--acento-txt); font-weight: 600; }
.etiqueta.neutra { background: transparent; border-color: var(--linha); color: var(--txt2); }
.etiqueta.rascunho { background: var(--aviso-fundo); border-color: var(--aviso-linha); color: var(--aviso-txt); font-weight: 600; }
.etiqueta.variante { background: var(--sup2); border-color: var(--linha); color: var(--txt); font-weight: 600; }
.etiqueta.erro-etiqueta { background: var(--erro-fundo); border-color: var(--erro-linha); color: var(--erro-txt); font-weight: 600; }
.chip.estado { border-color: var(--ok-linha); background: var(--ok-fundo); color: var(--ok-txt); font-weight: 600; }
.chip.variante { border-color: var(--acento); background: var(--acento-fraco); color: var(--acento-txt); font-weight: 600; }

/* --- Ligação no meio da fila de chips («Alterar classificação…») ----------
   Não é uma pílula: é uma ligação de texto, para não competir com os chips
   que estão ao lado dela e não parecer mais um atributo do painel. */
.chip-lig {
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--acento-txt);
  padding: var(--e1) 2px;
  text-decoration: none;
}
.chip-lig:hover { text-decoration: underline; }

/* Atalhos para as variantes do painel que se está a ler. */
.chips-variantes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: var(--e4) 0; }
.chips-etiqueta { font-size: var(--t-3); font-weight: 600; color: var(--txt2); }
.chips-variantes .chip {
  min-height: 36px;
  padding: var(--e2) var(--e4);
  border-color: var(--acento);
  background: var(--acento-fraco);
  color: var(--acento-txt);
  font-weight: 600;
}
.chips-variantes .chip:hover { text-decoration: none; border-color: var(--acento-txt); }


/* =============================================================================
   10. FORMULÁRIOS
   ========================================================================== */

.formulario { display: grid; gap: var(--e2); max-width: 560px; margin-top: var(--e5); }

.formulario label,
.metadados label,
.metadados-corpo label,
.triagem-campo label {
  display: block;
  font-weight: 600;
  font-size: var(--t-3);
  color: var(--txt2);
  margin-top: var(--e3);
}

/* Os campos de PALAVRA-PASSE e de E-MAIL entram nesta lista como qualquer
   outro: sem eles, o navegador desenhava-os à sua maneira (fundo cinzento no
   tema escuro) nas páginas «Iniciar sessão», «Configuração inicial»,
   «Palavra-passe» e «Nova conta». */
input[type="text"],
input[type="url"],
input[type="date"],
input[type="search"],
input[type="number"],
input[type="file"],
input[type="password"],
input[type="email"],
select,
textarea {
  width: 100%;
  min-height: var(--alt);
  padding: var(--e3) var(--e4);
  font: inherit;
  font-size: var(--t-4);
  color: var(--txt);
  background: var(--sup);
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
}
textarea { min-height: 90px; resize: vertical; }
/* Sem opacity: com 0.85 o texto de sugestão caía para 3,85:1 sobre --sup no
   tema claro. Só com a cor dá 5,27:1. O Firefox já põe opacity:1 sozinho. */
input::placeholder, textarea::placeholder { color: var(--txt2); }

.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.formulario .botao-grande { margin-top: var(--e5); }


/* =============================================================================
   11. PÁGINA DO PAINEL — cabeçalho, navegação de secções, grelha e cartões
   -----------------------------------------------------------------------------
   .painel é o cartão de leitura (também usado nas páginas de gestão).
   .cab / .navsec / .grelha / .cartao são o desenho denso das pranchas aprovadas.
   ========================================================================== */

.painel {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--e5) var(--e5) var(--e6);
}

/* Cabeçalho do painel, com a faixa da cor da modalidade à esquerda. */
.cab {
  background: var(--sup);
  border-bottom: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  padding: var(--e4) var(--e6) 0;
}
.titulo-linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e5);
  margin-top: var(--e1);
}
.acoes { display: flex; flex-wrap: wrap; gap: var(--e3); flex: none; }

/* Menu «Exportar» do painel: um <details> cujo rótulo é um botão de linha e
   cuja lista abre por baixo, encostada à direita. Sem JavaScript: abre e fecha
   pelo próprio <details>. Em ecrã estreito a lista deixa de flutuar e entra no
   fluxo, a toda a largura, para nunca sair do ecrã. */
.menu-exportar { position: relative; }
.menu-exportar > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}
.menu-exportar > summary::-webkit-details-marker { display: none; }
.menu-exportar > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
}
.menu-exportar[open] > summary::after { transform: rotate(-135deg) translateY(2px); }
.menu-exportar-lista {
  position: absolute;
  right: 0;
  top: calc(100% + var(--e2));
  z-index: 20;
  min-width: 260px;
  max-width: min(340px, calc(100vw - 2 * var(--e4)));
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  padding: var(--e3);
  display: grid;
  gap: 2px;
}
.menu-exportar-rotulo {
  margin: var(--e2) var(--e3) 2px;
  font-size: var(--t-2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt2);
}
.menu-exportar-lista a {
  display: block;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-p);
  color: var(--txt);
  text-decoration: none;
  min-height: 36px;
  line-height: 20px;
}
.menu-exportar-lista a:hover,
.menu-exportar-lista a:focus-visible { background: var(--sup2); }
.menu-exportar-nota { margin: var(--e2) var(--e3) 0; font-size: var(--t-3); color: var(--txt2); }
@media (max-width: 640px) {
  .menu-exportar { flex: 1 1 100%; }
  .menu-exportar-lista { position: static; margin-top: var(--e2); min-width: 0; max-width: none; }
}

/* Ações no fim de uma página de confirmação (apagar, duplicar, versões…).
   A página do painel deixou de as ter: o cabeçalho e as migalhas já fazem
   esse trabalho, e repetir a mesma ação em quatro sítios era o defeito n.º 2
   da auditoria. */
.acoes-fundo { display: grid; gap: var(--e3); margin-top: 28px; }

/* Navegação entre as secções do painel: fica colada ao topo ao rolar.

   EM COMPUTADOR A BARRA QUEBRA DE LINHA. Estava numa linha só, com rolagem
   horizontal: com muitas secções ficava cortada (medido: 1 819 px de atalhos
   em 1 009 px de barra) e nada dizia que havia mais. No telemóvel mantém-se a
   rolagem — em quatro linhas de atalhos o conteúdo do painel ficava empurrado
   para fora do ecrã —, mas com um degradê à direita a dizer que continua. */
.navsec {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  overscroll-behavior-x: contain;
}
/* Fica presa ao topo enquanto se rola. Tem de ser filha do <main>: dentro do
   <header class="cab"> o sticky só valia até ao fim do cabeçalho e a barra
   desaparecia com ele. */
main > .navsec {
  position: sticky;
  top: 0;
  z-index: 12;
  padding: 0 var(--e6);
  background: var(--sup);
  border-bottom: 1px solid var(--linha);
  /* Continua a faixa da cor da modalidade que vem do cabeçalho. */
  border-left: 3px solid var(--acento);
}
.navsec a {
  padding: var(--e3) var(--e3);
  font-size: var(--t-3);
  color: var(--txt2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
.navsec a:hover { color: var(--txt); text-decoration: none; }
.navsec a.on,
.navsec a.ativo { color: var(--acento-txt); border-bottom-color: var(--acento); font-weight: 600; }

/* Corpo denso e grelha de duas colunas em ecrã largo. */
.corpo {
  flex: 1;
  padding: var(--e4) var(--e6) 20px;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); align-items: start; }

/* Só na página do painel: UMA SECÇÃO POR LINHA, pela ordem do protocolo.
   Esteve em duas colunas de texto, para aproveitar o espaço — mas as secções de
   um protocolo executam-se por ordem durante o exame, e em duas colunas a
   «Pós-aquisição» ficava no topo da coluna direita, à mesma altura do título:
   para ler pela ordem certa era preciso descer a coluna esquerda toda e depois
   voltar ao topo. Isso também tornava impossível a barra das secções marcar
   onde se vai — havia sempre duas secções no ecrã — e espremia as capturas da
   consola a 167 px num portátil. Numa coluna, a ordem de leitura é a ordem do
   documento e as capturas ficam ao tamanho a que foram gravadas. */
.corpo-painel .grelha { display: block; columns: 1; }
.corpo-painel .grelha > .cartao { break-inside: avoid; margin: 0 0 var(--e4); }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }

/* Cartão de secção: título pequeno em maiúsculas com a barra da modalidade. */
.cartao {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4) var(--e4);
}
.cartao > h2 {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e2);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--txt2);
}
/* Um SEGUNDO título dentro do mesmo cartão (é o caso de «Temas que gere», na
   ficha de uma conta) precisa de ar por cima: sem isto ficava colado ao
   parágrafo anterior e parecia pertencer-lhe. */
.cartao > h2:not(:first-child) { margin-top: var(--e4); }
.cartao > h2::before {
  content: "";
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 999px;
  background: var(--acento);
}
.cartao ul { margin: 0; padding-left: var(--e5); display: flex; flex-direction: column; gap: var(--e1); }
.cartao li { font-size: var(--t-5); }

/* Contagem ao lado do título do cartão («DECLARAÇÕES PENDENTES  3»): número em
   letra de largura fixa, encostado à direita e sem maiúsculas forçadas. */
.cartao > h2 .n {
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-size: var(--t-3);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}

/* --- Linha de estado da página inicial ------------------------------------
   Uma linha por pendência: o que é à esquerda, quantos à direita e, quando faz
   sentido, a ligação que leva ao sítio onde se resolve. Não é uma tabela — no
   telemóvel as linhas envolvem e cada parte fica na sua linha. */
.linha-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  font-size: var(--t-4);
}
.linha-estado + .linha-estado { margin-top: var(--e2); }
.linha-estado > span:first-child { min-width: 0; }
.linha-estado .n {
  font-family: var(--fonte-mono);
  font-size: var(--t-3);
  color: var(--txt2);
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* A ligação de resolução fica depois do número, encostada à direita. */
.linha-estado .lig { font-size: var(--t-3); font-weight: 600; }
.linha-estado-versao { font-size: var(--t-3); color: var(--txt2); }

/* Colunas da página inicial: à esquerda as pendências e a administração, à
   direita o trabalho por concluir, e «Publicados recentemente» a atravessar as
   duas por baixo. Em ecrã estreito a grelha cai para uma coluna sozinha
   (secção 24) e a ordem passa a ser a de leitura. */
.inicio-col { display: grid; gap: var(--e4); align-content: start; }
.inicio-largo { grid-column: 1 / -1; }

/* Listas por baixo das contagens, com o cabeçalho da lista e o «e mais N». */
.inicio-lista { margin-top: var(--e3); }
.inicio-lista .sub-h { margin-top: var(--e4); }
.inicio-mais { margin: var(--e2) 0 0; font-size: var(--t-3); color: var(--txt2); }

.sub-h { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e2); font-size: var(--t-3); font-weight: 700; }
.sub-h em {
  font-style: normal;
  font-size: var(--t-2);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--txt2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: 0 var(--e1);
}

/* Lista de fontes no fim do painel. */
.fonte { display: flex; gap: var(--e3); font-size: var(--t-3); padding: var(--e2) 0; border-bottom: 1px solid var(--linha); }
.fonte:last-child { border-bottom: 0; }
.fonte b {
  font-family: var(--fonte-mono);
  font-size: var(--t-3);
  color: var(--acento-txt);
  background: var(--acento-fraco);
  border-radius: var(--raio-p);
  padding: 1px var(--e2);
  height: fit-content;
}
.fonte small { color: var(--txt2); }


/* =============================================================================
   12. PAINEL EM LEITURA — blocos gerados pelo servidor (.blk-*)
   ========================================================================== */

.corpo-painel { margin-top: var(--e4); }

/* Títulos das secções do painel: o H2 é o título de secção (maiúsculas
   pequenas, como nas pranchas); os outros níveis mantêm hierarquia normal. */
.corpo-painel .blk-h {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 20px 0 var(--e2);
  font-weight: 700;
  line-height: 1.25;
  color: var(--txt);
}
.corpo-painel .blk-h::before {
  content: "";
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 999px;
  background: var(--acento);
}
.corpo-painel h1.blk-h { font-size: var(--t-7); }
.corpo-painel h2.blk-h {
  font-size: var(--t-3);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--txt2);
  margin-top: var(--e6);
}
.corpo-painel h3.blk-h,
.corpo-painel h4.blk-h,
.corpo-painel h5.blk-h,
.corpo-painel h6.blk-h { font-size: var(--t-5); }
.corpo-painel .blk-h:first-child { margin-top: var(--e1); }

.corpo-painel .blk-p { margin: var(--e3) 0; }
/* LISTAS. Sem «display: flex» de propósito (até 30/09/2026 a lista era uma
   coluna flexível com «gap»): num <ol> flexível os itens deixam de ser contados
   da mesma maneira em todos os navegadores, e no Safari (Mac e iPhone) uma
   lista numerada podia sair com «1.» em todos os itens. O espaço entre itens é
   agora a margem de cima de cada item a seguir ao primeiro — o mesmo espaço do
   «gap». A sublista usa preenchimento (que não se funde com as margens dos
   itens) em vez de margem, para ficar exatamente com o espaço que tinha. O
   «display: block» explícito ganha à regra geral «.cartao ul» (secção 11),
   que também punha as listas com marcas em coluna flexível. O número de cada
   item vem escrito no HTML (<li value>, ver `render_lista`). */
.corpo-painel .blk-lista { display: block; margin: var(--e3) 0; padding-left: 20px; }
.corpo-painel .blk-lista > li + li { margin-top: var(--e1); }
.corpo-painel .blk-lista .blk-lista { margin: 0; padding-top: var(--e1); padding-bottom: var(--e1); }

.corpo-painel .blk-checklist { list-style: none; margin: var(--e3) 0; padding: 0; }
.corpo-painel .blk-checklist li { display: flex; gap: var(--e3); padding: var(--e1) 0; }
.corpo-painel .blk-checklist .chk { color: var(--acento-txt); flex: none; }

/* FORMATAÇÃO ESCRITA NO EDITOR.
   O negrito, o itálico, o sublinhado e as ligações saem com o desenho normal
   do texto. O realce e o valor literal é que precisam de regra própria: sem
   ela o navegador desenha o realce com o seu amarelo cru — que não é nenhuma
   das cores desta aplicação e, no tema escuro, salta à vista como um erro. O
   fundo do realce vem do acento do painel, e o valor literal fica com o mesmo
   tratamento discreto que já têm os outros números da página. */
.corpo-painel mark {
  background: var(--acento-fraco);
  color: inherit;
  padding: 0 var(--e1);
  border-radius: var(--raio-p);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.corpo-painel code {
  font-family: var(--fonte-mono);
  font-size: 0.92em;
  background: var(--linha-suave);
  padding: 0 var(--e1);
  border-radius: var(--raio-p);
}

.tabela-wrap { overflow-x: auto; margin: var(--e4) 0; -webkit-overflow-scrolling: touch; }
.blk-tabela { border-collapse: collapse; width: 100%; min-width: 420px; font-size: var(--t-4); }
/* CABEÇALHOS DE TABELA: SEM MAIÚSCULAS FORÇADAS.
   Aqui passa conteúdo escrito por quem faz o painel, e numa tabela de
   parâmetros de exposição as colunas chamam-se kV, mAs, mA, mSv, mGy, mm.
   Com «text-transform: uppercase» lia-se «KV», «MAS», «MSV», «MM» — símbolos
   que não existem ou que querem dizer outra coisa (K é kelvin, M é mega).
   A caixa dos símbolos das grandezas é normalizada (SI / ISO 80000): não é
   decoração, é informação, e uma folha de estilos não a pode reescrever.
   O cabeçalho continua a distinguir-se do corpo pelo peso, pelo tamanho, pela
   cor mais discreta e pelo filete de baixo — nenhum deles altera as letras.
   O «letter-spacing» também baixou: 0,06em existia para abrir texto em
   maiúsculas; em caixa mista só afasta as letras da palavra sem ganho nenhum. */
.blk-tabela th {
  text-align: left;
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--txt2);
  padding: var(--e2) var(--e3) var(--e2) 0;
  border-bottom: 1px solid var(--linha);
  vertical-align: bottom;
}
.blk-tabela td { padding: var(--e2) var(--e3) var(--e2) 0; border-bottom: 1px solid var(--linha-suave); vertical-align: top; }
.blk-tabela tr:last-child td { border-bottom: 0; }

.blk-imagem { margin: var(--e4) 0; }
.blk-imagem img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}
/* Imagem marcada como «esticada» no editor: ocupa toda a largura do cartão. */
.blk-imagem.esticada img { width: 100%; }
.blk-imagem figcaption,
.blk-video figcaption { font-size: var(--t-3); color: var(--txt2); margin-top: var(--e2); }

.blk-video { margin: var(--e4) 0; }
.blk-video video {
  width: 100%;
  max-height: 70vh;
  border-radius: var(--raio-p);
  background: var(--preto);
}

/* --- Bloco «ficheiro anexado» (PDF ou folha de cálculo Excel) ---------------
   O MESMO DESENHO em três sítios: na página que a equipa lê (HTML do servidor),
   na pré-visualização dentro do editor (JavaScript) e no papel.

   A marcação real é esta:

     <figure class="blk-ficheiro fic-embutido" data-tipo="pdf">
       <object class="fic-visor">…</object>          ← o PDF por inteiro
       <figcaption class="fic-cartao">
         <span class="fic-icone"></span>             ← o quadradinho do tipo
         <span class="fic-texto">
           <span class="fic-nome">…</span>
           <span class="fic-meta">PDF · 2,4 MB</span>
         </span>
         <a class="botao botao-acento fic-abrir">Abrir o ficheiro</a>
       </figcaption>
       <p class="fic-aviso">…</p>                    ← só para quem elabora
     </figure>

   No modo «botão» (e sempre num Excel) não há <object>: fica só o cartão.

   NOMES. A marcação que a aplicação emite usa «.blk-ficheiro» como invólucro
   (segue a convenção «.blk-*» dos outros blocos) e «.fic-*» nas partes. Houve
   um segundo conjunto de nomes, «.blk-ficheiro-*», vindo da especificação do
   bloco; nunca chegou a apanhar nada e saiu em 06/09/2026 com o resto do CSS
   morto. Se algum dia voltar a aparecer, o critério é o de sempre:
   «.blk-ficheiro» (sem hífen a seguir) e «.fic-*» são os nomes que valem. */

.blk-ficheiro {
  margin: var(--e4) 0;   /* <figure> traz margens do navegador; aqui não servem */
}

/* --- O cartão ---------------------------------------------------------------
   Grelha de três colunas: ícone · nome e metainformação · botão de abrir.
   As peças são colocadas por coluna e por linha, o que faz o desenho servir
   tanto quando o nome e a metainformação vêm dentro de uma caixa própria
   (.fic-texto, que é o caso) como quando são filhos diretos do cartão. */
.fic-cartao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--e4);
  row-gap: 2px;
  padding: var(--e4) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup2);
}

/* --- O ícone ----------------------------------------------------------------
   DESENHADO AQUI, EM CSS, e não com um emoji nem com uma imagem:
   · o emoji está fora das regras do projeto e cada sistema desenha o seu (o
     mesmo painel mostraria uma folha azul no Windows e outra coisa no Mac);
   · um SVG teria de ser inserido na marcação, e uma coisa que alguém tem de se
     lembrar de pôr acaba por faltar num sítio qualquer.
   Assim o cartão nasce sempre com ícone, sem depender de mais ninguém.
   O que distingue um PDF de uma folha de cálculo são as LETRAS (PDF / XLSX); a
   mancha de cor é só um reforço, nunca a única diferença.
   O ESPAÇO CONTINUA ABERTO a um ícone de verdade: se um dia entrar um <svg> ou
   uma <img> dentro do cartão, o desenho em CSS apaga-se sozinho (regra mais
   abaixo) e o ícone inserido ocupa exatamente a mesma caixa de 34 × 42 px. */
.blk-ficheiro .fic-icone {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 34px;
  height: 42px;
  padding-bottom: var(--e1);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  /* Sem tipo conhecido: uma folha com linhas de texto. */
  background:
    repeating-linear-gradient(var(--txt2) 0 1.5px, transparent 1.5px 5.5px)
      no-repeat 6px 13px / 20px 18px,
    var(--sup);
  font-size: var(--t-1);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--txt);
}
/* Quando o ícone é um elemento seu, o texto que vier lá dentro (hoje um emoji)
   fica a zero e quem escreve a extensão é o ::before dele. */
.blk-ficheiro .fic-icone { font-size: 0; }
.blk-ficheiro .fic-icone::before {
  content: "";
  font-size: var(--t-1);
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* O tipo vem de data-tipo (no bloco ou no cartão). Em alternativa, quando não
   houver data-tipo nenhum, dá-se por ele pelo endereço do botão de abrir. */
.blk-ficheiro[data-tipo="pdf"] .fic-icone::before { content: "PDF"; }

.blk-ficheiro[data-tipo="pdf"] .fic-icone {
  background: var(--fic-pdf);
}

.blk-ficheiro[data-tipo="xlsx"] .fic-icone::before { content: "XLSX"; }

.blk-ficheiro[data-tipo="xlsx"] .fic-icone {
  background: var(--fic-xls);
}

/* Ícone de verdade inserido na marcação: manda ele; o desenho em CSS cala-se. */
.fic-cartao > svg,
.fic-cartao > img {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 34px;
  height: 42px;
  object-fit: contain;
  color: var(--txt2);          /* currentColor, para o traço do SVG */
}
.blk-ficheiro .fic-icone:has(svg),
.blk-ficheiro .fic-icone:has(img) {
  padding: 0;
  border: 0;
  background: none;
}
.blk-ficheiro .fic-icone:has(svg)::before,
.blk-ficheiro .fic-icone:has(img)::before { content: none; }

/* --- Nome, tipo e tamanho --------------------------------------------------- */
.fic-texto {
  grid-column: 2;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.fic-nome {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  font-weight: 600;
  color: var(--txt);
  /* Um nome comprido sem espaços («Anexo_IX_parametros_exposicao_2026.xlsx»)
     não pode empurrar a página para fora de um ecrã de telemóvel. */
  overflow-wrap: anywhere;
}
.fic-meta {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-width: 0;
  font-size: var(--t-3);
  color: var(--txt2);
  overflow-wrap: anywhere;
}
/* Dentro da caixa .fic-texto o nome e a metainformação empilham-se sozinhos: a
   colocação por linha e coluna acima é para quando são filhos do cartão. */
.fic-texto > .fic-nome,
.fic-texto > .fic-meta { grid-column: auto; grid-row: auto; }

/* --- O botão de abrir -------------------------------------------------------
   Mesma anatomia dos outros botões (altura --alt, raio --raio-p, letra --t-4);
   no telemóvel sobe aos 44 px pela lista de alvos de toque da secção 24, onde
   está inscrito de propósito — o botão pode aparecer sem .botao. */
.fic-abrir {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--alt);
  padding: var(--e3) var(--e5);
  border: 1px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--acento);
  color: var(--acento-contra);
  font: inherit;
  font-size: var(--t-4);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.fic-abrir:hover {
  background: var(--acento-txt);
  border-color: var(--acento-txt);
  color: var(--acento-contra);
  text-decoration: none;
}
.fic-abrir:active { transform: translateY(1px); }

/* --- O PDF mostrado por inteiro ---------------------------------------------
   Altura de LEITURA, não de página inteira: acompanha o ecrã (70vh) mas nunca
   passa dos 760 px nem desce dos 340 px. As regras servem quer a classe esteja
   na moldura à volta, quer esteja no próprio <object> / <iframe>. */
.fic-visor {
  display: block;
  width: 100%;
  height: clamp(340px, 70vh, 760px);
  margin: 0 0 var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup2);
  overflow: hidden;
}
/* Com PDF embutido, o cartão vem colado por baixo da moldura e os dois leem-se
   como UMA peça só: a moldura perde os cantos de baixo, o cartão perde os de
   cima e o filete do meio não se repete. */
.fic-embutido .fic-visor {
  margin-bottom: 0;
  border-radius: var(--raio-p) var(--raio-p) 0 0;
}
.fic-embutido .fic-cartao {
  border-top: 0;
  border-radius: 0 0 var(--raio-p) var(--raio-p);
}
/* O que aparece dentro do <object> quando o navegador não sabe mostrar PDF. */
.fic-sem-visor {
  margin: 0;
  padding: var(--e5) var(--e5);
  color: var(--txt2);
  font-size: var(--t-3);
  text-align: center;
}

/* --- «Só para quem elabora os painéis» --------------------------------------
   A marca não pode depender da cor: leva um CADEADO desenhado em CSS (o arco é
   meio contorno, o corpo é um retângulo cheio), contorno TRACEJADO — que mais
   nenhuma caixa desta folha tem — e o texto que o bloco lhe puser dentro. */
.fic-aviso {
  position: relative;
  display: block;
  margin: var(--e3) 0 0;
  padding: var(--e3) var(--e4) var(--e3) 33px;
  border: 1px dashed var(--aviso-linha);
  border-radius: var(--raio-p);
  background: var(--aviso-fundo);
  color: var(--aviso-txt);
  font-size: var(--t-3);
  line-height: 1.45;
}
.fic-aviso::before {     /* o arco do cadeado */
  content: "";
  position: absolute;
  left: 13px;
  top: 12px;
  width: 8px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: var(--raio-p) var(--raio-p) 0 0;
}
.fic-aviso::after {      /* o corpo do cadeado */
  content: "";
  position: absolute;
  left: 11px;
  top: 17px;
  width: 12px;
  height: 9px;
  border-radius: 2px;   /* forma desenhada, não componente: o raio é do ícone */
  background: currentColor;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* --- Bloco ainda sem ficheiro escolhido ------------------------------------- */
.fic-vazio {
  display: block;
  margin: 0;
  padding: var(--e5) var(--e4);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt2);
  font-size: var(--t-3);
  text-align: center;
}

/* --- TELEMÓVEL --------------------------------------------------------------
   Fica aqui, ao pé do resto do bloco, porque não é um acerto de espaçamento: é
   uma decisão sobre O QUE SE MOSTRA.
   Um PDF embutido num ecrã de 390 px é quase inútil — o leitor do telemóvel
   abre a página a uma escala ilegível dentro de uma moldura que ainda por cima
   disputa o deslizar com a página por baixo. Como o cartão com o botão «Abrir
   o ficheiro» vem SEMPRE com o bloco, no telemóvel mostra-se só o cartão: o
   ficheiro abre no leitor do sistema, que é onde se lê bem e onde se pode
   ampliar. Se algum dia aparecer um bloco embutido SEM cartão, a moldura fica
   (mais baixa) — mais vale isso do que nada. */
@media (max-width: 640px) {
  .blk-ficheiro:has(.fic-cartao) .fic-visor { display: none; }
  .fic-visor { height: 62vh; }

  /* Sem moldura por cima, o cartão volta a ser uma caixa inteira. */
  .fic-embutido .fic-cartao {
    border-top: 1px solid var(--linha);
    border-radius: var(--raio-p);
  }

  /* O botão passa para uma linha só dele, à largura toda: o dedo não falha e o
     nome do ficheiro deixa de ter de caber ao lado dele. */
  .fic-cartao { grid-template-columns: auto minmax(0, 1fr); }
  .fic-abrir {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: var(--e3);
    white-space: normal;
  }
}


.blk-desconhecido {
  background: var(--sup2);
  border: 1px solid var(--linha);
  padding: var(--e3);
  border-radius: var(--raio-p);
  overflow-x: auto;
  font-family: var(--fonte-mono);
  font-size: var(--t-2);
  color: var(--txt2);
}


/* =============================================================================
   13. FONTE VALIDADA E PAINEL INCLUÍDO (TRANSCLUSÃO)
   ========================================================================== */

.blk-fonte {
  display: grid;
  gap: 2px;
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--sup2);
}
.fonte-entidade {
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento-txt);
}
.fonte-titulo { font-weight: 600; color: var(--txt); }
.fonte-url { font-size: var(--t-3); word-break: break-all; }
.fonte-data { font-size: var(--t-3); color: var(--txt2); }

.transclusao {
  margin: var(--e5) 0;
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  background: var(--sup);
  overflow: hidden;
}
.transclusao-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--acento-fraco);
}
.transclusao-etiqueta {
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento-txt);
}
.transclusao-titulo { font-weight: 600; color: var(--txt); }
.transclusao-corpo { padding: var(--e1) var(--e4) var(--e4); }
.transclusao-corpo .blk-h { font-size: var(--t-3); }
.transclusao-rodape { padding: var(--e2) var(--e4) var(--e3); font-size: var(--t-2); color: var(--txt2); }

/* Caso de erro: painel apagado, inclusão circular ou fundo a mais. */
.transclusao.vazia,
.transclusao .vazia { padding: var(--e4) var(--e4); color: var(--aviso-txt); font-style: normal; }
div.transclusao.vazia { background: var(--aviso-fundo); border-color: var(--aviso-linha); }


/* =============================================================================
   14. BLOCO «PASSO»
   -----------------------------------------------------------------------------
   O mesmo desenho na leitura (.blk-passo, gerado pelo servidor) e no editor
   (.ps-caixa, gerado pelo JavaScript), para se escrever já a ver o resultado.
   ========================================================================== */

.blk-passo,
.ps-caixa {
  display: flex;
  gap: var(--e4);
  margin: var(--e4) 0;
  padding: var(--e4) var(--e4);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--sup);
}
.passo-numero,
.ps-numero {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-contra);
  font-weight: 700;
  font-size: var(--t-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.passo-corpo,
.ps-corpo { flex: 1; min-width: 0; }

.passo-titulo { margin: 2px 0 var(--e1); font-size: var(--t-5); color: var(--txt); }
.passo-rotulo {
  display: block;
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento-txt);
}
.passo-texto { margin: var(--e1) 0; }
.passo-imagem,
.ps-imagem {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}

.ps-titulo { font-weight: 700; color: var(--txt); min-height: 1.5em; }
.ps-texto { margin-top: var(--e1); min-height: 1.5em; }
.ps-titulo:empty::before,
.ps-texto:empty::before { content: attr(data-placeholder); color: var(--txt2); font-weight: 400; }
.ps-imagem-zona { margin-top: var(--e3); display: grid; gap: var(--e2); justify-items: start; }
.ps-botao {
  min-height: var(--alt);
  padding: var(--e3) var(--e4);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  font: inherit;
  font-weight: 600;
  color: var(--txt);
  cursor: pointer;
}
.ps-botao:hover { border-color: var(--acento); color: var(--acento-txt); }
.ps-botao-linha { border-style: solid; font-weight: 500; font-size: var(--t-3); min-height: var(--alt-p); }
.ps-estado { color: var(--txt2); font-size: var(--t-3); }

/* --- Várias imagens por passo (desde 01/10/2026) -----------------------------
   Um passo pode ter uma ou várias imagens, cada uma com a sua legenda.

   LEITURA: uma só imagem sem legenda desenha-se como sempre (o «img» solto, com
   a mesma classe e a mesma largura). Com legenda vai dentro de uma «figure»;
   várias vão numa grelha — duas ou três por linha em ecrã largo (mínimo de
   240 px por imagem), uma por linha no telemóvel — pela ordem gravada. A
   imagem nunca é esticada: fica com o seu tamanho, até à largura da coluna.

   EDITOR: a mesma grelha (um pouco mais estreita), com a legenda por baixo de
   cada imagem — um campo com contorno, como a nota das capturas do plano de
   corte — e os botões «Para trás», «Para a frente» e «Remover imagem». «Para
   trás/para a frente» e não «esquerda/direita»: a grelha passa a uma coluna no
   telemóvel e aí a ordem lê-se de cima para baixo. */
.passo-figura { margin: var(--e3) 0 0; min-width: 0; }
.passo-figura .passo-imagem { margin-top: 0; }
.passo-legenda {
  margin-top: var(--e1);
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--txt2);
  overflow-wrap: anywhere;
}
.passo-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--e3) var(--e4);
  align-items: start;
  margin-top: var(--e3);
}
.passo-galeria .passo-figura { margin: 0; }

.ps-imagem-zona > .ps-galeria { justify-self: stretch; }
.ps-galeria { display: grid; gap: var(--e3); width: 100%; }
.ps-galeria-varias { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ps-figura {
  margin: 0;
  min-width: 0;
  display: grid;
  gap: var(--e2);
  align-content: start;
  justify-items: start;
}
.ps-figura .ps-imagem { margin-top: 0; }
.ps-legenda {
  margin: 0;
  width: 100%;
  font-size: var(--t-3);
  line-height: 1.4;
  color: var(--txt2);
  overflow-wrap: anywhere;
}
.ps-legenda[contenteditable] {
  min-height: 32px;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  cursor: text;
}
/* A regra que o Editor.js injeta (.codex-editor [data-placeholder]:empty:before,
   #707684) ficava abaixo dos 4,5:1 no tema escuro; com o «.ps-caixa» à frente a
   ajuda volta à cor secundária do tema (a mesma correção da nota do plano). */
.ps-caixa .ps-legenda[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--txt2);
  font-weight: 400;
}
/* Botões de cada imagem compactos: numa coluna da grelha (~260 px) os dois de
   ordenar cabem lado a lado e o «Remover imagem» fica por baixo. */
.ps-figura-barra { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); width: 100%; }
.ps-figura-barra .ps-botao {
  min-height: var(--alt-p);
  padding: var(--e1) var(--e2);
  font-size: var(--t-3);
  font-weight: 500;
}
/* No ecrã estreito, altura de dedo (a regra geral da secção 24 perdia para a
   de cima, que é mais específica). */
@media (max-width: 900px) {
  .ps-figura-barra .ps-botao { min-height: 44px; }
}
.ps-figura-barra .ps-botao[disabled],
.ps-figura-barra .ps-botao[disabled]:hover,
.ps-botao[disabled],
.ps-botao[disabled]:hover {
  opacity: 0.5;
  cursor: default;
  border-color: var(--linha);
  color: var(--txt);
}
.ps-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.ps-ajuda { font-size: var(--t-3); color: var(--txt2); }
.ps-estado:empty { display: none; }
.ps-estado-erro { color: var(--erro-txt); }


/* =============================================================================
   15. BLOCO «PLANO DE CORTE»
   -----------------------------------------------------------------------------
   Cartão fixo: captura da consola à esquerda (58 %) e alinhamento à direita.
   Abaixo de 720 px empilha, com a imagem por cima do texto.
   .blk-plano = leitura (servidor) · .pc-caixa = editor (JavaScript)
   .plano = versão escrita à mão nos «templates», com .img e .txt lá dentro.
   ========================================================================== */

.blk-plano,
.pc-caixa,
.plano {
  margin: var(--e5) 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--bg);
  overflow: hidden;
}

.plano-faixa,
.pc-faixa {
  padding: var(--e1) var(--e4);
  background: var(--acento);
  color: var(--acento-contra);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plano-etiqueta { font: inherit; letter-spacing: inherit; color: inherit; }

/* A coluna da imagem ajusta-se à captura, até um máximo de 58 % do cartão.
   Com uma secção por linha o cartão fica largo, e uma medida fixa deixava a
   captura (que tem o tamanho a que foi gravada e não se estica sem borrar) a
   nadar em espaço vazio. `fit-content` dá o menor de dois: o que a imagem
   precisa, ou 58 % — que é o que valia antes, e continua a valer quando a
   captura é grande. */
.plano-par,
.pc-par,
.plano { display: grid; grid-template-columns: fit-content(58%) minmax(0, 1fr); align-items: stretch; }

.plano-imagem,
.pc-imagem-zona,
.plano > .img {
  margin: 0;
  padding: var(--e3);
  background: var(--tela);
  border-right: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
}
.pc-imagem-zona { display: grid; gap: var(--e3); align-content: center; justify-items: center; }
.plano-imagem img,
.pc-imagem,
.plano > .img img { max-width: 100%; height: auto; display: block; border-radius: var(--raio-p); }
.plano > .img svg { width: 100%; height: 100%; display: block; }

.plano-sem-imagem {
  color: var(--txt2);
  font-size: var(--t-3);
  font-style: italic;
  text-align: center;
  padding: var(--e6) var(--e4);
}

.plano-lado,
.pc-lado,
.plano > .txt {
  padding: var(--e3) var(--e4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.plano-orientacao { margin: 0 0 var(--e1); font-size: var(--t-4); font-weight: 700; color: var(--txt); }
.plano-texto { margin: 0; font-size: var(--t-3); color: var(--txt2); line-height: 1.4; }
.plano > .txt b { font-size: var(--t-4); }
.plano > .txt p { margin: 0; font-size: var(--t-3); color: var(--txt2); line-height: 1.35; }

/* Versão do editor: contorno mais grosso, para se ver que é uma peça fixa. */
.pc-caixa { border: 2px solid var(--acento); border-radius: var(--raio); box-shadow: var(--sombra-g); margin: var(--e3) 0; }
.pc-botoes { display: flex; gap: var(--e3); flex-wrap: wrap; justify-content: center; }
.pc-ajuda { margin: 0; font-size: var(--t-2); color: var(--txt2); text-align: center; }
.pc-botao {
  min-height: var(--alt);
  padding: var(--e3) var(--e4);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  font: inherit;
  font-weight: 600;
  color: var(--txt);
  cursor: pointer;
}
.pc-botao:hover { border-color: var(--acento); color: var(--acento-txt); }
.pc-botao-linha { border-style: solid; font-weight: 500; font-size: var(--t-3); min-height: var(--alt-p); }
.pc-estado { color: var(--txt2); font-size: var(--t-3); }
.pc-orientacao { font-size: var(--t-4); font-weight: 700; color: var(--txt); min-height: 1.5em; }
.pc-texto { margin-top: var(--e1); min-height: 3em; font-size: var(--t-4); }
.pc-orientacao:empty::before,
.pc-texto:empty::before { content: attr(data-placeholder); color: var(--txt2); font-weight: 400; }

/* --- Cobertura anatómica ------------------------------------------------------
   A cobertura («incluir desde o bordo inferior do cerebelo até à região superior
   dos lobos parietais») responde a uma pergunta diferente da das regras de
   alinhamento: diz até onde os cortes têm de ir, não como se alinham. Por isso
   fica numa linha própria por baixo do título da orientação, numa caixa discreta
   com um filete de acento à esquerda — vê-se que é outra coisa sem dar nas
   vistas. Mesmo desenho na leitura (.plano-cobertura) e no editor
   (.pc-cobertura), para o cartão ser o mesmo dos dois lados.
   --------------------------------------------------------------------------- */
.plano-cobertura,
.pc-cobertura {
  margin: 0 0 2px;
  padding: var(--e1) var(--e3);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  background: var(--tela);
  color: var(--txt);
  font-size: var(--t-3);          /* um pouco menor do que as regras (13 px) */
  line-height: 1.4;
  overflow-wrap: anywhere;    /* nomes anatómicos longos não alargam a coluna */
}

/* Rótulo «Cobertura»: maiúsculas pequenas e espaçadas, na cor secundária.
   Contraste medido sobre --tela: 4,63:1 no tema claro e 5,90:1 no escuro
   (mínimo exigido 4,5:1). */
.plano-cobertura-rotulo,
.pc-cobertura::before {
  display: inline-block;
  margin-right: var(--e2);
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt2);
}

/* No editor o rótulo não existe no HTML: é desenhado pelo CSS, para quem está a
   escrever ver o mesmo cartão que vai sair na leitura. Texto gerado por CSS não
   entra no conteúdo gravado — o que se grava é só o que a pessoa escreveu. */
.pc-cobertura::before { content: "Cobertura"; user-select: none; -webkit-user-select: none; }

/* Com o campo vazio mostra-se só o texto de ajuda (que já começa pela palavra
   «Cobertura»): o rótulo desaparece para não ficar a palavra escrita duas vezes.
   Como o ::before está ocupado com o rótulo, a ajuda vai no ::after — nos outros
   campos do editor vai no ::before. */
.pc-cobertura {
  min-height: 2em;
  cursor: text;
}
/* A especificidade sobe para «.pc-caixa .pc-cobertura[data-placeholder]:empty»
   de propósito: o Editor.js injeta no <head>, em tempo de execução, duas regras
   próprias para campos vazios —
     .codex-editor [data-placeholder]:empty:before        { content: attr(data-placeholder) }
     .codex-editor__redactor [contenteditable]:empty:after { content: "\feff" }
   — que são mais específicas do que «.pc-cobertura:empty::before/::after».
   Sem esta subida, o campo «Cobertura» vazio ficava uma caixa cinzenta MUDA
   dentro do editor: o rótulo escondido e a ajuda substituída por um espaço de
   largura zero. Só acontece dentro do editor, por isso não se via na página de
   teste do CSS, que não carrega o Editor.js. */
.pc-caixa .pc-cobertura[data-placeholder]:empty::before { display: none; }
.pc-caixa .pc-cobertura[data-placeholder]:empty::after {
  content: attr(data-placeholder);
  color: var(--txt2);
  font-weight: 400;
}

/* --- Galeria: as imagens daquela orientação ----------------------------------
   Uma orientação pode ter 2, 3 ou 4 capturas da consola, cada uma com o seu
   número e a sua nota («1) Nervo trigémio», «2) Nervo oculomotor»). Ficam
   EMPILHADAS, pela ordem do documento, e não lado a lado: as capturas são
   triplos largos e, lado a lado, ficariam ilegíveis no telemóvel.
   --------------------------------------------------------------------------- */
.plano-galeria,
.pc-galeria {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-width: 0;
}
.pc-galeria { justify-self: stretch; }

/* A coluna da imagem continua a centrar quando há uma imagem só — nesse caso o
   cartão fica igual ao de sempre. Com duas ou mais, alinha ao topo, para a pilha
   começar à altura do título da orientação em vez de flutuar a meio. */
.plano-imagem,
.pc-imagem-zona { min-width: 0; }
.plano-imagem:has(.plano-figura + .plano-figura) { align-items: flex-start; }
.pc-imagem-zona:has(.pc-figura + .pc-figura) { align-content: start; }

/* Uma figura: a imagem, o emblema do número por cima dela e a nota logo abaixo.
   Com uma imagem só, a figura fica com a largura da própria imagem e continua
   centrada, como sempre esteve. Com duas ou mais, todas as figuras passam a
   ocupar a largura da coluna: assim as imagens e as notas começam todas na
   mesma vertical, em vez de ficarem aos ziguezagues consoante o tamanho de cada
   imagem e o comprimento de cada nota. O emblema cai sempre dentro da imagem,
   porque a imagem fica encostada ao início da figura. */
.plano-figura,
.pc-figura {
  position: relative;
  margin: 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e1);
}
.plano-figura:not(:only-child),
.pc-figura:not(:only-child) { width: 100%; }
.plano-figura img,
.pc-figura img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--raio-p);
}

/* Emblema do número, no canto superior esquerdo da imagem. As capturas da
   consola são quase pretas: no tema claro o acento sozinho fica-se por 3:1
   contra esse preto (2,96:1 na mamografia), por isso o emblema leva um anel na
   cor do texto do acento — branco no tema claro, escuro no tema escuro — que o
   recorta da imagem. O texto sobre o acento tem 5,6:1 ou mais em todas as
   modalidades e nos dois temas. */
.plano-numero,
.pc-numero,
.plano-marca {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  min-width: 21px;
  padding: 0 var(--e2);
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-contra);
  font-size: var(--t-1);
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  white-space: nowrap;
  /* Duas vezes de propósito: a primeira linha (só o anel) é a que fica de pé
     nos navegadores antigos que não conhecem oklch() — sem ela perdiam o anel
     e o emblema desaparecia dentro da imagem escura. */
  box-shadow: 0 0 0 1.5px var(--acento-contra);
  box-shadow: 0 0 0 1.5px var(--acento-contra), 0 1px 3px oklch(0 0 0 / 0.35);
}

/* A marca «3 · 1 de 2» de uma imagem de um conjunto só serve na tira do
   telemóvel, onde as imagens do conjunto se veem uma de cada vez. Em ecrã largo
   (e no papel) o conjunto vê-se inteiro, com o seu emblema único, e a marca
   estaria a repetir o que já lá está — por isso não se desenha. */
.plano-marca { display: none; }

/* No editor o número escreve-se dentro do próprio emblema. */
.pc-numero {
  cursor: text;
  caret-color: var(--acento-contra);
}
/* Mesma subida de especificidade da «cobertura», e pela mesma razão: a regra
   global do Editor.js (.codex-editor [data-placeholder]:empty:before) impõe
   «color: #707684», um cinzento que sobre o emblema de acento fica em 1,04:1 —
   invisível. Aqui a ajuda tem de herdar a cor do texto do emblema (4,72:1). */
.pc-caixa .pc-numero[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--acento-contra);
  font-weight: 600;
  /* 0,78 dava, no tema claro, 4,41:1 em «geral» e 4,05:1 em RM — medido nas seis
     modalidades, todas abaixo dos 4,5:1 menos a mamografia (4,56:1). Com 0,90
     passam todas, nos dois temas, e continua a ler-se como sugestão («n.º») e
     não como um número já escrito. */
  opacity: 0.9;
}

/* Alvo de toque do emblema a escrever: medido a 390 px tinha 30 × 27 px (e
   21–31 × 19 px na versão anterior deste campo), abaixo dos 24 × 24 px da
   WCAG 2.5.8 na altura e muito abaixo do que um dedo acerta sem falhar.
   Passa a 32 × 32 px sem mexer no tamanho da letra — o algarismo fica centrado
   na pastilha. Só a ESCREVER ([contenteditable]): na leitura o emblema continua
   pequeno, colado ao canto da imagem, como estava. */
.pc-numero[contenteditable] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

/* --- CONJUNTOS: imagens seguidas com o MESMO número ---------------------------
   Nas células com variantes numeradas — «Axiais para o colo e anexos (1), colo
   (2) ou endométrio (3)» — cada número é uma variante do posicionamento, e uma
   variante pode ter mais do que uma captura da consola (o mesmo alinhamento em
   dois tipos de útero, por exemplo). Essas capturas chegam com o número
   repetido, «1, 2, 3, 3», e são O MESMO conjunto: um emblema só, e as imagens
   do conjunto dentro de uma caixa que se vê ser uma peça.
   A caixa é --sup dentro da coluna das capturas, que é --tela: nos dois temas
   fica um degrau de claridade entre as duas (claro: 1 e 0,955; escuro: 0,225 e
   0,255), e o filete de acento à esquerda é o mesmo sinal que a cobertura já
   usa para dizer «isto é uma peça própria».
   Mesmo desenho na leitura (.plano-grupo) e no editor (.pc-grupo).
   --------------------------------------------------------------------------- */
.plano-grupo,
.pc-grupo {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--e2);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  border: 1px solid var(--tela-linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--sup);
}

/* O emblema do conjunto vai para o canto da PRIMEIRA imagem, que é onde o
   emblema de uma imagem sozinha sempre esteve: aos 6 px do canto somam-se os
   6 px de espaço interior da caixa do conjunto. */
.plano-grupo > .plano-numero { top: 12px; left: 12px; }

/* No editor o número escreve-se por baixo de cada imagem (ver o comentário em
   plano-corte.js), por isso o conjunto identifica-se por uma etiqueta em vez de
   um emblema — e diz também quantas imagens tem, que é o que responde à dúvida
   de quem está a escrever: «estas duas estão juntas?».
   A MARCA («Conjunto 3 · 1 de 2») é a mesma etiqueta, mas dentro de cada imagem
   do conjunto: só serve na tira do telemóvel, onde a caixa do conjunto dá lugar
   a um deslize por imagem. Em ecrã largo a caixa está à vista e a marca
   repetiria o que a etiqueta já diz — por isso não se desenha. */
.pc-grupo-marca { display: none; }
.pc-grupo-etiqueta,
.pc-grupo-marca {
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--txt2);
  user-select: none;
  -webkit-user-select: none;
}

/* A nota daquela imagem, logo por baixo dela. Alinhada à ESQUERDA: quando há
   várias, as notas começam todas na mesma vertical e leem-se como a lista
   numerada que são; centrada, uma nota que passe a duas linhas ficaria com a
   segunda linha a flutuar debaixo da primeira. */
.plano-nota,
.pc-nota {
  margin: 0;
  max-width: 100%;
  font-size: var(--t-2);
  line-height: 1.35;
  color: var(--txt2);
  text-align: left;
  overflow-wrap: anywhere;
}
.pc-nota {
  min-height: 1.35em;
  cursor: text;
}
.pc-nota:empty::before {
  content: attr(data-placeholder);
  color: var(--txt2);
  font-weight: 400;
}

/* A escrever, a nota tem de PARECER um campo. Sem fundo nem contorno era uma
   tira de 16 px de altura (266 a 306 px de largura, medido a 390 px de ecrã)
   indistinguível do parágrafo de ajuda que fica logo abaixo:
   quem não é programador não adivinha que é ali que se escreve. Leva agora
   caixa, como a cobertura — e altura de dedo (32 px; o mínimo da WCAG 2.5.8 é
   24 px e a nota tinha 16 px). Cresce a caixa, não a letra.
   O fundo é --sup e não --tela: a nota vive DENTRO da coluna da imagem, que já
   é --tela, e uma caixa --tela sobre fundo --tela não se via. --sup mais um
   filete --linha é exatamente o desenho dos campos de formulário desta folha
   (ver a regra de input/textarea na secção 10), que é o que a pessoa já
   reconhece como «aqui escreve-se».
   Só a ESCREVER: na leitura a nota continua a ser texto simples por baixo da
   imagem, exatamente como sempre foi. */
.pc-nota[contenteditable] {
  min-height: 32px;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
  background: var(--sup);
}

/* Mesma subida de especificidade da «cobertura» e do emblema, e pela mesma
   razão: a regra que o Editor.js injeta no <head> em tempo de execução —
     .codex-editor [data-placeholder]:empty:before { color: #707684 }
   (0-3-1) — ganhava a «.pc-nota:empty::before» (0-2-1) e punha o texto de ajuda
   a #707684: 4,01:1 no tema claro e 3,47:1 no escuro, abaixo dos 4,5:1
   exigidos. Com o «.pc-caixa» à frente sobe para 0-4-1 e a ajuda volta à cor
   secundária do tema, medida acima dos 4,5:1 nos dois temas. */
.pc-caixa .pc-orientacao[data-placeholder]:empty::before,
.pc-caixa .pc-texto[data-placeholder]:empty::before,
.pc-caixa .pc-nota[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--txt2);
  font-weight: 400;
}

/* Barra de cada figura no editor: «↑ Subir», «↓ Descer» e «Remover imagem».
   Discreta — só tem de ser confortável ao toque. Não existe na leitura. */
.pc-figura-barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
.pc-figura-barra .pc-botao {
  min-height: var(--alt-p);
  padding: var(--e1) var(--e3);
  font-size: var(--t-3);
  font-weight: 500;
}
.pc-figura-barra .pc-botao[disabled],
.pc-figura-barra .pc-botao[disabled]:hover {
  opacity: 0.5;
  cursor: default;
  border-color: var(--linha);
  color: var(--txt);
}

@media (max-width: 720px) {
  .plano-par,
  .pc-par,
  .plano { grid-template-columns: 1fr; }
  .plano-imagem,
  .pc-imagem-zona,
  .plano > .img { border-right: 0; border-bottom: 1px solid var(--linha); }

  /* A galeria ocupa a largura toda do cartão; cada figura continua a ter a
     largura da sua imagem (nunca mais do que isso), por isso o emblema do
     número cai sempre dentro da imagem e nada transborda para o lado. */
  .plano-galeria,
  .pc-galeria { width: 100%; }

  /* --- DUAS OU MAIS IMAGENS: TIRA HORIZONTAL, UMA POR DESLIZE ---------------
     Empilhadas, três ou quatro capturas punham o cartão com 900 a 1000 px de
     altura num ecrã de 390 px de largura (área útil ≈ 782 px): lia-se a regra
     «1) nervo trigémio 2) Nervo oculomotor» sem nenhuma das imagens no ecrã,
     760 px acima. O cartão existe precisamente para manter a imagem agarrada à
     regra — e no telemóvel deixava de o fazer.
     Em tira, o cartão volta à altura de UMA imagem e cada deslize traz a
     seguinte, com o seu número e a sua nota agarrados (vão dentro da mesma
     <figure>). Sem JavaScript nenhum: é o scroll-snap do próprio navegador, que
     responde ao dedo, à roda do rato e à barra de deslize.
     Só com DUAS ou mais imagens (:has): com uma só, o cartão fica exatamente
     como sempre foi. Num navegador sem :has() a regra é ignorada e volta-se ao
     empilhamento — perde-se a melhoria, não se parte nada.
     O overflow-x vive AQUI DENTRO e em mais lado nenhum: o corpo da página
     nunca ganha deslize lateral. */
  .plano-imagem:has(.plano-figura + .plano-figura),
  .pc-imagem-zona:has(.pc-figura + .pc-figura) {
    flex-direction: column;
    align-items: stretch;
    justify-items: stretch;
    gap: var(--e2);
  }

  /* Aviso de que há mais imagens para o lado, por cima da tira. Fica no ::before
     para aparecer ANTES da galeria — nas duas caixas: a da leitura é uma coluna
     flex e a do editor é uma grelha, e em ambas o ::before é o primeiro item. */
  .plano-imagem:has(.plano-figura + .plano-figura)::before,
  .pc-imagem-zona:has(.pc-figura + .pc-figura)::before {
    content: "Mais imagens para o lado →";
    align-self: center;
    justify-self: center;
    font-size: var(--t-1);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--txt2);
    user-select: none;
    -webkit-user-select: none;
  }

  .plano-galeria:has(.plano-figura + .plano-figura),
  .pc-galeria:has(.pc-figura + .pc-figura) {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--e3);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;   /* não arrasta a página por trás */
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--e2);              /* espaço para a barra de deslize */
    scrollbar-width: thin;            /* com rato, a barra é a pista visível */
    scrollbar-color: var(--tela-linha) transparent;
  }

  /* --- O CONJUNTO NA TIRA ---------------------------------------------------
     Na leitura, cada imagem do conjunto é UM deslize seu: a caixa passa a
     «display: contents» e as suas imagens ficam a ser itens da tira, como as
     outras. É a decisão que mantém o encaixe de uma imagem por deslize e as
     capturas à largura a que os valores da consola se leem — com o conjunto a
     deslizar inteiro, as suas duas capturas ficavam empilhadas dentro dos mesmos
     86 % e a coluna das imagens media 445 px em vez dos 246 px de agora
     (medido a 390 px, no cartão de quatro capturas com um conjunto de duas).
     O que agarra as imagens umas às outras passa a ser a MARCA: o emblema
     repete-se em cada imagem do conjunto com «3 · 1 de 2», «3 · 2 de 2» — nada
     se esconde, o número continua à vista em todas, e vê-se logo que faltam
     imagens daquele conjunto para o lado. O emblema único da caixa sai de cena
     porque a caixa deixou de existir nesta largura.
     Sem :has() o navegador ignora a tira e as imagens empilham-se — a marca fica
     na mesma em cada imagem, que é o que ali faz falta. */
  .plano-grupo { display: contents; }
  .plano-grupo > .plano-numero { display: none; }
  .plano-grupo .plano-marca { display: block; }

  /* No EDITOR é igual, e pela mesma razão: com o conjunto a deslizar inteiro, a
     tira ficava tão alta como as duas imagens somadas — cada uma com o campo do
     número, o da nota e os seus botões. Medido a 390 px: 709 px de coluna das
     imagens, contra os 416 px de agora — e é precisamente essa altura que a tira
     existe para não haver. Aqui a marca é uma linha de texto por cima de cada
     imagem («Conjunto 3 · 1 de 2»), como a etiqueta da caixa, e o campo do
     número de cada imagem continua onde estava. */
  .pc-grupo { display: contents; }
  .pc-grupo-etiqueta { display: none; }
  .pc-grupo-marca { display: block; }

  /* 86 % da largura: os 14 % que sobram (uns 44 px a 390 px de ecrã) deixam
     espreitar a imagem seguinte, que é o que torna óbvio que há mais para o
     lado. Foi o compromisso escolhido: menos do que isto e a espreitadela não
     se via; mais do que isto e as capturas mais largas (456 px de origem)
     ficavam pequenas de mais para se lerem os valores da consola.
     «scroll-snap-stop: always» garante que um deslize passa UMA imagem, nunca
     duas de enfiada. */
  .plano-galeria:has(.plano-figura + .plano-figura) .plano-figura,
  .pc-galeria:has(.pc-figura + .pc-figura) .pc-figura {
    flex: 0 0 86%;
    width: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Alvos de toque maiores: no telemóvel os botões de cada figura são o que se
     usa para trocar a ordem das imagens. */
  .pc-figura-barra .pc-botao { min-height: 44px; }
}

/* --- A caixa da cobertura em ecrã médio --------------------------------------
   Na página do painel os cartões vêm a duas colunas (grelha anterior a esta
   alteração, que aqui não se mexe). Nessas larguras a coluna útil da cobertura
   fica estreitíssima, e o cromo horizontal desta caixa — filete de 3 px mais
   9 + 9 px de espaço — leva-lhe 21 px. Aqui devolvem-se: sai o espaço lateral e
   o rótulo «COBERTURA» passa a linha própria por cima do texto, em vez de comer
   o início da primeira linha. O filete de acento fica, que é o que identifica a
   caixa.
   Só entre os 721 px (acima da tira do telemóvel) e os 1400 px: no telemóvel o
   cartão já ocupa a largura toda e a coluna é larga, e ali uma linha extra para
   o rótulo só faria crescer a altura — que é exatamente o que a tira acima
   está a poupar. */
@media (min-width: 721px) and (max-width: 1400px) {
  .plano-cobertura,
  .pc-cobertura {
    padding-left: var(--e2);
    padding-right: 0;
  }
  .plano-cobertura-rotulo,
  .pc-cobertura::before {
    display: block;
    margin-right: 0;
  }
}


/* =============================================================================
   16. EDITOR DE BLOCOS
   ========================================================================== */

.modo-editor .conteudo { max-width: none; padding: 0 0 40px; }
.editor-pagina { padding: 0 var(--e4); }

/* --- Disposição da página de edição ---------------------------------------
   Uma linha para a barra de ferramentas de blocos, outra para a folha de
   edição (esquerda) e a classificação do painel (direita).
   Estas regras viviam num <style> dentro de templates/editar.html — o próprio
   comentário mandava trazê-las para aqui; vieram em 06/09/2026, sem mudar uma
   única classe do HTML. */
.editor-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 18px;
  align-items: start;
  margin-top: var(--e3);
  /* Sem isto a grelha nunca encolhe abaixo do conteúdo mais largo que tem lá
     dentro, e no telemóvel ficavam alguns píxeis fora do ecrã. */
  min-width: 0;
}
.editor-folha { min-width: 0; }
.editor-lado {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.editor-lado .metadados { margin: 0; }

/* Barra de ferramentas de blocos: atravessa as duas colunas. Cada botão insere
   um bloco; o ícone é um SVG em linha, no mesmo traço dos ícones da barra. */
.ferramentas {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linha);
}
.ferramentas .rotulo-fer {
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--txt2);
  margin-right: 2px;
}
.ferramentas .sep-fer {
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 var(--e1);
  background: var(--linha);
}
/* O ícone de cada botão de inserir: 16 px, traço da cor do texto. */
.botao-inserir svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Pergunta de «descartar o rascunho»: os dois botões lado a lado, por baixo da
   frase. Passam para linhas separadas quando não cabem (telemóvel). */
.acoes-confirmar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e4);
}

/* TELEMÓVEL E TABLET (≤ 900 px): uma coluna só. Primeiro escreve-se, depois
   classifica-se, e os atalhos de inserção ficam colados ao fundo, ao alcance
   do polegar.
   Este bloco usa o ponto de rutura de 900 px do resto da folha (secção 24). No
   <style> do template havia aqui um segundo ponto, de 760 px, só para a barra
   do topo do editor; passou para 900 px, que é onde a página já muda de duas
   colunas para uma — entre 760 e 900 px o campo do título passa agora a ocupar
   uma linha inteira, em vez de dividir a linha com os quatro botões. */
@media (max-width: 900px) {
  .editor-area { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .editor-folha { order: 1; }
  .ferramentas {
    order: 2;
    position: sticky;
    bottom: calc(var(--altura-movel) + env(safe-area-inset-bottom));
    z-index: 20;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--e3) 0;
    border-bottom: 0;
    background: linear-gradient(to top, var(--bg) 70%, transparent);
  }
  .ferramentas .rotulo-fer,
  .ferramentas .sep-fer { display: none; }
  .editor-lado { order: 3; }

  /* A barra do topo do editor tem quatro botões mais o estado da gravação:
     numa janela estreita não cabe tudo na linha do título. O título ocupa a
     linha toda e os botões repartem a de baixo, dois a dois. */
  .campo-titulo { flex: 1 1 100%; }
  .barra-acoes { width: 100%; gap: var(--e3); }
  .barra-acoes .botao { flex: 1 1 45%; justify-content: center; }
}

/* Barra do título e da gravação: fica colada ao topo.
   Se a página ainda tiver a barra .topo, desce o suficiente para não a tapar. */
/* A barra pode partir-se em linhas: com o título e os quatro botões, numa
   janela normal já não cabe tudo na mesma linha, e sem isto o campo do título
   era esmagado até ficar com quatro letras à vista. */
.barra-editor {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  padding: var(--e3) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--linha);
}
.topo ~ * .barra-editor,
.topo ~ .conteudo .barra-editor { top: 58px; }

/* O título pede pelo menos 260 px; quando os botões não couberem ao lado
   dele, descem para a linha seguinte sozinhos. */
.campo-titulo {
  flex: 1 1 260px;
  min-width: 0;
  font-size: var(--t-6);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--txt);
  background: transparent;
  border: 1px solid transparent;
}
.campo-titulo:hover { border-color: var(--linha); }

.barra-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }

/* Estado da gravação — o JavaScript reescreve a classe: estado / ok / pendente / erro. */
.estado { font-size: var(--t-3); font-weight: 600; color: var(--txt2); white-space: nowrap; }
.estado.ok { color: var(--ok-txt); }
.estado.pendente { color: var(--aviso-txt); }
.estado.erro { color: var(--erro-txt); font-weight: 700; }

.metadados {
  margin: var(--e3) 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
}
.metadados > summary {
  padding: var(--e4) var(--e4);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--t-4);
  color: var(--txt);
}
.metadados-corpo { display: grid; gap: var(--e1); padding: 0 var(--e4) var(--e4); }

/* «Exige tomada de conhecimento» — separado por um traço das escolhas de
   arrumação de cima, para se ler como uma decisão à parte (uma exigência sobre
   quem lê, não onde o painel fica). Reaproveita o desenho de .aut-lembrar. */
.metadados-conhecimento {
  margin-top: var(--e2);
  padding-top: var(--e3);
  border-top: 1px solid var(--linha);
}

.caixa-editor {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: var(--e3) var(--e2) 60px;
  min-height: 60vh;
}

.botao-inserir { background: var(--sup); border-color: var(--linha); color: var(--txt); font-size: var(--t-3); }

.nota-editor { font-size: var(--t-3); color: var(--txt2); }

/* Sobreposições ao CSS do Editor.js (vem por CDN). Sem elas o editor fica com
   pouco espaço útil no telemóvel — não apagar. */
.codex-editor__redactor { padding-bottom: 120px !important; }
.ce-block__content, .ce-toolbar__content { max-width: 100% !important; }
.ce-block { max-width: 100%; }
.image-tool img { border-radius: var(--raio-p); }
.image-tool__caption { font-size: var(--t-3); color: var(--txt2); }

/* --- Cores do Editor.js -----------------------------------------------------
   O CSS do Editor.js vem dentro do pacote do CDN e é sempre claro e fixo: sem
   isto, com o tema escuro ligado o menu do «+» abre como uma caixa branca sobre
   a página escura e os ícones da barra do editor ficam quase invisíveis.
   As regras usam os tokens da folha, por isso servem os dois temas: no tema
   claro var(--sup) já é branco e nada muda à vista. O !important é preciso
   porque o CSS do pacote é injetado depois desta folha. */
.codex-editor {
  --color-text-primary: var(--txt);
  --color-text-secondary: var(--txt2);
  --color-background-item-hover: var(--sup2);
  --color-background-item-focus: var(--acento-fraco);
  --color-border-icon: var(--linha);
  --color-border-item-hover: var(--sup2);
  --color-shadow-item-focus: var(--linha);
  color: var(--txt);
}

/* Menu de inserção («+»), menu das reticências, barra em linha e conversão. */
.ce-popover__container,
.ce-popover-item__icon,
.ce-inline-toolbar,
.ce-conversion-toolbar,
.ce-settings,
.ce-toolbar__settings-btn,
.ce-toolbar__plus {
  background: var(--sup) !important;
  color: var(--txt) !important;
  border-color: var(--linha) !important;
}
.ce-popover__container,
.ce-inline-toolbar,
.ce-conversion-toolbar { box-shadow: var(--sombra-g) !important; }

.ce-popover-item__title,
.ce-popover-item__secondary-title,
.ce-inline-tool,
.ce-conversion-tool__title,
.ce-popover__nothing-found-message { color: var(--txt) !important; }
.ce-popover-item__secondary-title,
.ce-popover__nothing-found-message { color: var(--txt2) !important; }

.ce-popover-item:hover,
.ce-popover-item--focused,
.ce-inline-tool:hover,
.ce-conversion-tool:hover,
.ce-toolbar__plus:hover,
.ce-toolbar__settings-btn:hover { background: var(--sup2) !important; }
.ce-popover-item--active { background: var(--acento-fraco) !important; }

/* Traço separador dos menus do editor (por baixo de «Convert to» nos ajustes
   do bloco; o traço vertical da barra de formatação, a seguir ao «T»). Usa
   --color-border, que o pacote declara na própria .ce-popover (#EFF0F1): no
   escuro era uma linha quase branca num menu escuro (15:1). O «html» à frente
   ganha à regra do pacote, que é injetada depois desta folha. */
html .ce-popover { --color-border: var(--linha); }

/* Confirmação do «Eliminar» nos ajustes do bloco. O pacote pinta a faixa de
   vermelho vivo (#e24a4a) para letras brancas, mas as regras de cima forçam o
   texto a --txt (3,36:1 no escuro, 3,82:1 no claro) e o pairar e o foco a
   --sup2 (o vermelho desaparecia e a confirmação só se distinguia pelo texto).
   Passa a ter as cores de erro do tema, com o rato por cima ou não — as mesmas
   da confirmação do menu da tabela (.tc-popover, no fim desta secção). O ícone
   perde a caixa --sup, que ficava a destoar dentro da faixa. Especificidade
   0-3-1 com !important: ganha também à regra do foco do pacote (0-3-0). */
html .ce-popover-item.ce-popover-item--confirmation,
html .ce-popover-item.ce-popover-item--confirmation:hover,
html .ce-popover-item.ce-popover-item--confirmation.ce-popover-item--focused {
  background: var(--erro-fundo) !important;
}
html .ce-popover-item--confirmation .ce-popover-item__title,
html .ce-popover-item--confirmation .ce-popover-item__icon { color: var(--erro-txt) !important; }
html .ce-popover-item--confirmation .ce-popover-item__icon { background: transparent !important; }

/* O «+» e as seis reticências: no escuro ficavam pretos sobre fundo escuro. */
.ce-toolbar__plus,
.ce-toolbar__settings-btn { color: var(--txt2) !important; }

/* Caixa de procura do menu de blocos e campos próprios das ferramentas. */
.cdx-search-field,
.cdx-input,
.ce-popover__search {
  background: var(--sup2) !important;
  color: var(--txt) !important;
  border-color: var(--linha-campo) !important;
}
.cdx-search-field__input::placeholder { color: var(--txt2) !important; }

/* Caixa de visto da lista de verificação. Só a caixa POR ASSINALAR leva a
   superfície do tema: a regra antiga apanhava também a assinalada, e no tema
   claro o visto branco ficava sobre caixa branca (um item assinalado parecia
   por assinalar). A assinalada leva o acento, com o visto na cor que se lê
   por cima dele (--acento-contra), nos dois temas. */
.cdx-checklist__item:not(.cdx-checklist__item--checked) .cdx-checklist__item-checkbox-check {
  background: var(--sup) !important;
  border-color: var(--linha-campo) !important;
}
.cdx-checklist__item--checked .cdx-checklist__item-checkbox-check {
  background: var(--acento) !important;
  border-color: var(--acento) !important;
}
.cdx-checklist__item--checked .cdx-checklist__item-checkbox-check svg path {
  stroke: var(--acento-contra) !important;
}

/* Texto selecionado e blocos selecionados (Ctrl+A duas vezes, arrastar a
   seleção por vários blocos, abrir os ajustes de um bloco). O pacote traz um
   azul claro fixo (#d4ecff e #e1f2ff) que, sob as letras claras do tema escuro,
   ficava ilegível (1,04:1). --selecao existe nos dois temas. */
.codex-editor ::selection { background-color: var(--selecao) !important; }
.codex-editor ::-moz-selection { background-color: var(--selecao) !important; }
.ce-block--selected .ce-block__content { background: var(--selecao) !important; }

/* Estados «ativo» do «+» e das reticências, e o pairar dos botões de ajustes
   e da lista da barra em linha: o pacote pinta-os de #eff2f5 (claro fixo). */
.ce-toolbar__plus--active,
.ce-toolbar__settings-btn--active,
.ce-inline-toolbar__dropdown:hover,
.cdx-settings-button:hover { background: var(--sup2) !important; }

/* Campo onde se escreve o endereço de uma ligação (barra em linha). No pacote
   é um retângulo #F8F8F8 sem cor de texto: no escuro o endereço saía branco
   sobre quase branco (1,06:1). */
.ce-inline-tool-input {
  background: var(--sup2) !important;
  color: var(--txt) !important;
  border-color: var(--linha-campo) !important;
}
.ce-inline-tool-input::placeholder { color: var(--txt2) !important; }

/* Texto de ajuda dos blocos vazios: o pacote impõe #707684 (3,76:1 sobre a
   superfície do tema escuro). O Editor.js 2.30 usa DOIS atributos:
     · [data-placeholder-active] — o parágrafo vazio onde está o cursor, com o
       «Escrever aqui… (use o + para imagens, …)» de static/js/editor.js;
     · [data-placeholder] — as ajudas das outras ferramentas (cabeçalho,
       legendas, campos próprios).
   O «html» à frente sobe a especificidade para 0-3-2 — ganha às regras do
   pacote (0-3-1) e continua a perder para as ajudas das ferramentas próprias
   (.pc-caixa …, 0-4-1), que têm cor sua. */
html .codex-editor [data-placeholder]:empty::before,
html .codex-editor [data-placeholder][data-empty="true"]::before,
html .codex-editor [data-placeholder-active]:empty::before,
html .codex-editor [data-placeholder-active][data-empty="true"]::before { color: var(--txt2); }
html .image-tool__caption[contentEditable="true"][data-placeholder]::before { color: var(--txt2); }

/* Fundo falso da ligação: enquanto o campo do endereço está aberto, o
   Editor.js pinta o texto a ligar com document.execCommand('backColor',
   '#a8d6ff') — um <span style="background-color: rgb(168, 214, 255)"> — para
   se continuar a ver o que estava selecionado. Sob as letras claras do tema
   escuro ficava ilegível (1,30:1). Passa a ter o fundo da seleção do tema
   (--selecao), o mesmo de ::selection logo acima. O !important ganha ao
   atributo «style»; a segunda regra apanha o valor escrito em hexadecimal,
   em maiúsculas ou minúsculas, se o navegador o guardar assim (fica à parte:
   um navegador que não conheça o «i» ignora só essa). Ao fechar o campo,
   o próprio Editor.js retira o <span>. */
.codex-editor [style*="rgb(168, 214, 255)"] { background-color: var(--selecao) !important; }
.codex-editor [style*="#a8d6ff" i] { background-color: var(--selecao) !important; }

/* Realce (<mark>) escrito no editor: o mesmo desenho da página de leitura
   (.corpo-painel mark, secção 12) em vez do amarelo cru do navegador. */
.codex-editor mark {
  background: var(--acento-fraco);
  color: inherit;
  padding: 0 var(--e1);
  border-radius: var(--raio-p);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Botão do bloco de imagem vazio, bloco que não se consegue mostrar e os
   avisos do Editor.js (estes últimos vivem fora do editor, no <body>). */
.codex-editor .cdx-button {
  background: var(--sup);
  color: var(--txt2);
  border-color: var(--linha-campo);
}
.codex-editor .cdx-button:hover { background: var(--sup2); }
.codex-editor .ce-stub {
  background: var(--sup2);
  border-color: var(--linha);
  color: var(--txt2);
}
body .cdx-notify { background: var(--sup) !important; color: var(--txt); }
body .cdx-notify--error { background: var(--erro-fundo) !important; color: var(--erro-txt); }
body .cdx-notify--success { background: var(--ok-fundo) !important; color: var(--ok-txt); }

/* Bloco de imagem: moldura e fundo de carregamento (claros fixos no pacote). */
.codex-editor .image-tool {
  --bg-color: var(--sup2);
  --border-color: var(--linha);
}
.codex-editor .image-tool--loading .image-tool__image { background-color: var(--sup); }

/* Bloco «Tabela» (pacote table 2.4.1). O pacote declara as suas cores em
   variáveis próprias; basta dar-lhes os tokens — com «.codex-editor» à frente,
   para ganhar ao CSS do pacote, que é injetado depois desta folha.
     · linha e célula selecionadas, e o pairar do «+» de acrescentar linha
       (--color-background, #f9f9fb no pacote: 1,12:1 sob as letras claras);
     · o menu da linha e da coluna (.tc-popover, branco no pacote: 1,18:1);
     · os pontos do comando da tabela (quase pretos ao pairar). */
.codex-editor .tc-wrap {
  --color-background: var(--sup2);
  --color-text-secondary: var(--txt2);
  --color-border: var(--linha);
}
.codex-editor .tc-popover {
  --color-border: var(--linha);
  --color-background: var(--sup);
  --color-background-hover: var(--sup2);
  --color-background-confirm: var(--erro-fundo);
  --color-background-confirm-hover: var(--erro-fundo);
  --color-text-confirm: var(--erro-txt);
  color: var(--txt);
  box-shadow: var(--sombra-g);
}
.codex-editor .tc-toolbox {
  --toggler-dots-color: var(--txt2);
  --toggler-dots-color-hovered: var(--txt);
}


/* =============================================================================
   17. FERRAMENTAS PRÓPRIAS DO EDITOR
   (fonte validada · painel incluído · vídeo · ficheiro anexado)
   ========================================================================== */

.ft-cartao,
.pi-caixa,
.vd-caixa {
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: var(--e4) var(--e4);
  margin: var(--e2) 0;
  background: var(--sup2);
}
.ft-cartao { border-left: 3px solid var(--acento); }

.ft-cabecalho,
.pi-cabecalho {
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento-txt);
  margin-bottom: var(--e3);
}

.ft-campo { display: grid; gap: var(--e1); margin-bottom: var(--e3); }
.ft-campo > span { font-size: var(--t-2); font-weight: 600; color: var(--txt2); }
.ft-input, .ft-select, .pi-select { width: 100%; }

.pi-previa {
  margin-top: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px dashed var(--acento);
  border-radius: var(--raio-p);
  background: var(--sup);
  font-size: var(--t-4);
  color: var(--txt2);
  max-height: 320px;
  overflow-y: auto;
}
.pi-previa.carregada { color: var(--txt); }
.pi-previa-titulo { display: block; font-weight: 700; color: var(--txt); margin-bottom: var(--e1); }
.pi-previa-corpo .blk-h { font-size: var(--t-3); }
.pi-rodape { margin-top: var(--e3); font-size: var(--t-2); color: var(--txt2); }

.vd-botao {
  width: 100%;
  min-height: var(--alt-g);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  font: inherit;
  font-weight: 600;
  color: var(--txt);
  cursor: pointer;
}
.vd-botao:hover { border-color: var(--acento); color: var(--acento-txt); }
.vd-video { width: 100%; max-height: 60vh; border-radius: var(--raio-p); background: var(--preto); }
.vd-legenda { font-size: var(--t-3); color: var(--txt2); margin-top: var(--e2); min-height: 1.4em; }
.vd-legenda:empty::before { content: attr(data-placeholder); color: var(--txt2); opacity: 0.8; }
.vd-estado { color: var(--txt2); font-size: var(--t-3); }

/* --- Ficheiro anexado, no editor -------------------------------------------
   O cartão, a moldura do PDF e a marca «só para quem elabora» são desenhados na
   secção 12 (é a mesma peça que a equipa vê). Aqui fica só o que é do editor:
   escolher o ficheiro, ver o estado do envio e escolher como ele aparece.
   Como na secção 12, os nomes que valem são os que a aplicação usa (fic-*); os
   «fi-*» da especificação do bloco nunca apanharam nada e saíram em 06/09/2026. */

.fic-editor {
  display: grid;
  gap: var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: var(--e4) var(--e4);
  margin: var(--e2) 0;
  background: var(--sup2);
}

/* Botão «Escolher um ficheiro»: na aplicação já vem com .botao .botao-linha,
   e aqui só se garante a altura comum (mesmo sem .botao) e que o texto pode
   passar à linha num ecrã estreito. Os 44 px do telemóvel vêm da secção 24. */
.fic-escolher {
  min-height: var(--alt);
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
/* O nome da especificação não traz .botao nenhum: leva o desenho completo. */

/* A nota que explica o que se pode anexar, e o estado do envio. */
.fic-nota,
.fic-estado {
  margin: 0;
  font-size: var(--t-3);
  line-height: 1.45;
  color: var(--txt2);
}
.fic-erro {
  margin: 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--erro-linha);
  border-radius: var(--raio-p);
  background: var(--erro-fundo);
  color: var(--erro-txt);
  font-size: var(--t-3);
  font-weight: 600;
}

/* As escolhas por baixo da pré-visualização. */
.fic-opcoes {
  display: grid;
  gap: var(--e3);
  margin-top: 2px;
  padding-top: var(--e3);
  border-top: 1px solid var(--linha);
}

/* O <fieldset> «Como aparece no painel»: sem a moldura do navegador, com a
   legenda com o mesmo ar dos outros rótulos pequenos da aplicação. */
.fic-grupo {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--e1);
}
.fic-grupo > legend {
  padding: 0;
  margin-bottom: var(--e1);
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--txt2);
}

/* Cada linha de escolha: o botão redondo (ou a caixa) à esquerda, o texto à
   direita — com o título em destaque e a explicação a seguir, mais discreta.
   A linha inteira é clicável (é um <label>), por isso leva os 44 px de altura. */
.fic-caixa {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  min-height: 44px;
  padding: var(--e1) 0;
  font-size: var(--t-4);
  line-height: 1.4;
  color: var(--txt);
  cursor: pointer;
}
.fic-caixa > input[type="radio"],
.fic-caixa > input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--acento);
}
.fic-caixa small { color: var(--txt2); font-size: var(--t-3); }

.fic-trocar { justify-self: start; }

/* O nome do ficheiro escolhido, quando o editor o mostrar à parte do cartão. */


/* =============================================================================
   18. ANOTAÇÃO DE IMAGENS
   -----------------------------------------------------------------------------
   Esta janela é sempre escura (é uma mesa de trabalho sobre a imagem), tanto no
   tema claro como no escuro. As cores vêm dos tokens --anotar-*.
   ========================================================================== */

.an-barra-bloco { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e3); }

body.an-aberta { overflow: hidden; }

.an-fundo {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--anotar-fundo);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.an-painel { display: flex; flex-direction: column; width: 100%; max-width: 1100px; }
.an-barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  padding: var(--e3) var(--e4);
  background: var(--anotar-barra);
  color: var(--anotar-txt);
}
.an-grupo { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.an-grupo-fim { margin-left: auto; }

.an-botao {
  min-height: var(--alt);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--anotar-linha);
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--anotar-txt);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.an-botao.ativo,
.an-botao-acento {
  background: var(--anotar-acento);
  border-color: var(--anotar-acento);
  color: var(--anotar-acento-contra);
}

/* A janela é escura nos dois temas, por isso o anel de foco também tem de vir
   da variante clara do acento: com var(--acento) do tema claro ficava entre
   2,69:1 e 3,06:1 sobre a barra da janela; assim fica entre 7,0:1 e 7,8:1. */
.an-fundo :focus-visible { outline-color: var(--anotar-acento); }
.an-botao[disabled] { opacity: 0.6; cursor: default; }

/* A cor de fundo de cada botão de cor é posta pelo JavaScript. */
.an-cor {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--anotar-linha);
  cursor: pointer;
}
.an-cor.ativo { border-color: var(--anotar-txt); box-shadow: 0 0 0 3px var(--anotar-linha); }

.an-palco {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e3);
  overflow: auto;
}
.an-tela {
  max-width: 100%;
  max-height: 100%;
  background: var(--papel);
  border-radius: var(--raio-p);
  touch-action: none;   /* o dedo desenha, não faz scroll */
  cursor: crosshair;
}
.an-ajuda {
  padding: var(--e3) var(--e4);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  color: var(--anotar-txt);
  opacity: 0.8;
  font-size: var(--t-3);
  text-align: center;
}


/* =============================================================================
   19. ÁRVORE DE SECÇÕES E PÁGINA «ORGANIZAR SECÇÕES»
   ========================================================================== */

.arvore { margin-top: var(--e5); display: grid; gap: var(--e3); }


/* Nível de profundidade (gerado com nivel-{{ nivel }}). Com o nível de TEMA por
   cima das modalidades a árvore passou a ter três níveis — e antes só havia
   fundo para dois: o terceiro voltava ao fundo do primeiro e deixava de se
   perceber onde acabava um e começava o outro. Os fundos alternam, e é o filete
   à esquerda de cada lista encaixada que conta a profundidade. */
.org-seccao.nivel-0 { background: var(--sup); }
.org-seccao.nivel-1 { background: var(--sup2); }
.org-seccao.nivel-2 { background: var(--sup); }
.org-seccao.nivel-3 { background: var(--sup2); }


/* --- Página «Organizar secções» ------------------------------------------- */

.org-lista { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e3); }
/* Uma caixa de secção nunca pode ser mais larga do que a coluna onde está. Sem
   isto, a caixa crescia até ao tamanho do seu conteúdo mais teimoso (a lista de
   escolha do «Mover para dentro de») e cada nível de subsecção somava mais
   18 px: a página de «Organizar secções» ficava com 410 px de conteúdo num
   ecrã de 390 px e rolava para o lado. */
.org-seccao { min-width: 0; }
.org-lista .org-lista { margin-top: var(--e3); padding-left: var(--e5); border-left: 2px solid var(--linha); }
.org-seccao { border: 1px solid var(--linha); border-radius: var(--raio-p); padding: var(--e3) var(--e4); background: var(--sup); }
.org-cabecalho { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.org-nome { font-weight: 700; color: var(--txt); }
.org-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e3); align-items: center; }
.org-form { display: flex; gap: var(--e2); align-items: center; margin: 0; }
.org-form input[type="text"], .org-form select { min-height: 38px; width: auto; min-width: 0; max-width: 100%; padding: var(--e2) var(--e3); }
/* Criar uma gaveta dentro desta (o «+ Criar» de cada linha da árvore). Fica na
   sua própria linha, por baixo dos botões, para se ler como o que é: não é mais
   um botão que mexe NESTA secção, é o sítio onde nasce a de dentro.
   O campo estica-se com o espaço que houver (flex: 1 1 220px) e a linha pode
   partir-se em duas (flex-wrap): num telemóvel de 390 px, e ainda por cima
   dentro de duas ou três gavetas encaixadas, o campo mais o botão já não cabem
   lado a lado — sem isto a página passava a rolar para o lado. */
.org-criar { margin-top: var(--e3); flex-wrap: wrap; }
.org-criar input[type="text"] { min-width: 0; flex: 1 1 220px; }
/* O de criar TEMAS, no topo da árvore: não vive dentro de nenhuma caixa, por
   isso leva a margem por cima em vez de a colar ao título. */
.org-criar-tema { margin: var(--e3) 0 0; }

/* --- Filtros da lista «Onde fica cada painel» -----------------------------
   Barra de filtros (título, tipo, origem, «Por organizar») por cima da lista.
   Reaproveita o desenho de «.org-form.cat-filtro» — o mesmo do filtro do
   registo e da lista de utilizadores — e só acrescenta duas regras:

     · cada etiqueta anda colada ao seu campo («.org-filtro-campo»), para que a
       linha se possa partir entre pares e nunca entre a etiqueta e o campo a
       que ela pertence. Num ecrã de 390 px cada par ocupa a largura toda;
     · a caixa de verificação e o seu texto ficam lado a lado. */
.org-filtros { align-items: center; }
.org-filtro-campo { display: flex; align-items: center; gap: var(--e2); flex: 0 1 auto; min-width: 0; }
/* Os campos não crescem com o texto que têm dentro: o nome mais comprido de um
   tipo de painel («Ficha de segurança RM — dispositivo/implante») esticava a
   lista a ponto de partir a barra em três linhas num ecrã de computador. */
.org-filtro-campo input[type="text"] { min-width: 0; width: 13rem; }
.org-filtro-campo select { min-width: 0; max-width: 15rem; }
.org-filtro-caixa { display: inline-flex; align-items: center; gap: var(--e2); }

@media (max-width: 640px) {
  /* Um par «etiqueta + campo» por linha, com o campo a ocupar o que sobra, e a
     caixa de verificação também na sua linha — senão fica encostada aos botões
     e lê-se como se fosse um deles. */
  .org-filtro-campo { flex: 1 1 100%; }
  .org-filtro-campo input[type="text"] { width: auto; }
  .org-filtro-caixa { flex: 1 1 100%; }
}

/* --- Cores das modalidades (só do administrador) -------------------------
   Uma linha por modalidade: o seletor de cor, o nome e o botão «Repor». O
   quadrado de cor é grande o suficiente para se carregar sem falhar. */
.org-cores { margin: var(--e2) 0 var(--e6); }
.org-cores-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e3);
}
.org-cor {
  display: flex;
  gap: var(--e3);
  align-items: center;
  flex-wrap: wrap;
}
.org-cor input[type="color"] {
  width: 46px;
  height: 38px;
  min-height: 38px;
  padding: 2px;
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
  background: var(--sup);
  cursor: pointer;
  flex: none;
}
.org-cor-nome { display: inline-flex; gap: var(--e3); align-items: center; min-width: 150px; }
.org-cores-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); }
.org-paineis {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0 0 0 var(--e1);
  display: grid;
  gap: var(--e1);
  font-size: var(--t-4);
  color: var(--txt2);
}
.org-paineis a { color: var(--txt); }
.org-mover { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e3); }
.org-mover li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  border-bottom: 1px solid var(--linha);
  padding-bottom: var(--e3);
  /* Uma linha desta lista nunca pode ser mais larga do que a lista. Sem isto,
     cada linha ficava com a largura do seu conteúdo mais teimoso (a caixa de
     assinalar + o nome do painel + a lista do «Mover para») e a página inteira
     rolava para o lado no telemóvel: medido, 397 px de conteúdo num ecrã de
     390 px e de 320 px. É o mesmo remédio que a .org-seccao já leva acima. */
  min-width: 0;
}
.org-mover-titulo { flex: 1; min-width: 180px; font-weight: 600; color: var(--txt); }

/* --- «Organizar secções»: ficar no sítio e navegar a árvore comprida --------
   Tudo o que se segue é a ajuda para uma árvore com muita coisa: o triângulo de
   recolher, o índice colado ao topo, o filtro-de-árvore por nome e a lista de
   painéis que se abre e fecha. As cores são só as fichas de sempre (--sup,
   --linha, --txt…); nenhuma cor nova nasce aqui nem no tema escuro. */

/* Triângulo de recolher/expandir de cada linha. Nasce escondido: sem o
   seccoes.js não há nada para abrir (a árvore vem toda aberta do servidor), e um
   botão que não faz nada é pior do que botão nenhum. */
.org-recolher { display: none; }
.org-arvore-viva .org-recolher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--acento-txt);
  cursor: pointer;
  line-height: 1;
}
.org-arvore-viva .org-recolher:hover { background: var(--sup2); }
.org-recolher::before { content: '▾'; font-size: 13px; }
.org-recolher[aria-expanded="false"]::before { content: '▸'; }

/* O índice de saltos: colado ao topo enquanto se rola a árvore comprida. */
.org-indice {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 12px 0 0;
  padding: 9px 12px;
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra);
}
.org-indice-rotulo { font-size: 12.5px; font-weight: 600; color: var(--txt2); flex: none; }
.org-indice a {
  font-size: 13px;
  font-weight: 600;
  color: var(--acento-txt);
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--sup2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.org-indice a:hover { background: var(--acento-fraco); }

/* Caixa de ferramentas (filtro-de-árvore + abrir/fechar tudo + contagem). */
.org-ferramentas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
}
.org-filtro { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 0; }
/* O campo de texto do filtro-de-árvore. Chama-se «.org-arvore-filtro-campo»
   (e não «.org-filtro-campo») de propósito: «.org-filtro-campo» já existe e é o
   CONTENTOR de cada filtro da lista de painéis (o de baixo) — reutilizar o nome
   dava dois desenhos à mesma classe. */
.org-arvore-filtro-campo {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 6px 34px 6px 12px;
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  font: inherit;
}
.org-filtro-limpar {
  position: absolute;
  right: 4px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--txt2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.org-filtro-limpar:hover { background: var(--sup2); color: var(--txt); }
.org-comandos { display: flex; gap: 8px; flex: none; }
.org-conta { font-size: 12.5px; color: var(--txt2); }

/* Enquanto o filtro-de-árvore esconde linhas, elas ficam mesmo fora do fluxo. */
.org-seccao[hidden] { display: none; }

/* Quando a página salta para uma linha (âncora #seccao-<id> ou #painel-<id>),
   deixa-a parar um pouco abaixo do topo, para não ficar escondida por baixo do
   índice colado ao topo. Serve a via sem JavaScript; com JavaScript repõe-se a
   posição exata na mesma. */
.org-seccao, .sel-linha { scroll-margin-top: 60px; }

/* Um brilho breve na linha para onde a página saltou, só para o olho a
   encontrar. Sem cor nova: é o mesmo fundo suave do acento a esbater-se. */
@media (prefers-reduced-motion: no-preference) {
  .org-seccao:target > .org-cabecalho { animation: org-brilho 1.6s ease-out 1; }
}
@keyframes org-brilho {
  0%   { background: var(--acento-fraco); box-shadow: 0 0 0 3px var(--acento-fraco); }
  100% { background: transparent; box-shadow: 0 0 0 3px transparent; }
}

/* A lista de painéis, agora recolhida por defeito num <details>. */
.org-paineis-bloco {
  margin-top: 26px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  overflow: hidden;
}
.org-paineis-resumo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  color: var(--txt);
  list-style: none;
}
.org-paineis-resumo::-webkit-details-marker { display: none; }
.org-paineis-resumo::before {
  content: '▸';
  flex: none;
  color: var(--acento-txt);
  font-size: 14px;
}
.org-paineis-bloco[open] > .org-paineis-resumo::before { content: '▾'; }
.org-paineis-resumo:hover { background: var(--sup2); }
.org-paineis-titulo { flex: 1; min-width: 0; }
.org-paineis-bloco > *:not(summary) { margin-left: 14px; margin-right: 14px; }
.org-paineis-bloco > *:last-child { margin-bottom: 14px; }

.passos-ajuda { padding-left: 20px; }
.passos-ajuda li { margin: var(--e2) 0; }

/* Aviso «este painel é uma variante de outro». */
.aviso-variante {
  background: var(--acento-fraco);
  border: 1px solid var(--acento);
  border-left-width: 3px;
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e4);
  margin: var(--e3) 0;
  font-size: var(--t-4);
  color: var(--txt);
}
.aviso-variante a { font-weight: 600; }


/* =============================================================================
   20. IMPORTAÇÃO DE PDF E TRIAGEM
   ========================================================================== */

/* --- ARRASTAR FICHEIROS PARA O QUADRO DA IMPORTAÇÃO -------------------------
   Três estados, e cada um tem de se ler sem ninguém explicar:

     1. REPOUSO — o quadro do formulário está tracejado e tem, em cima, a linha
        que diz que se pode largar ali. Diz-se ANTES de alguém arrastar seja o
        que for: uma moldura que só aparece a meio do gesto não ensina nada a
        quem nunca arrastou um ficheiro.
     2. COM FICHEIROS POR CIMA (.arrastar-sobre) — a moldura passa a inteira e
        à cor da página, o fundo acende e a linha de cima troca de frase para
        «Largue aqui». Muda o traço, a cor E a palavra: quem não distingue as
        cores vê o tracejado virar linha cheia e lê outra frase.
     3. A LISTA DO QUE VAI SER IMPORTADO — nome, tamanho e um botão para tirar
        cada ficheiro de lá antes de importar.

   Estas classes só ganham vida com o static/js/arrastar.js: é ele que põe a
   classe .arrastar-zona no formulário e destapa a linha do convite. Sem
   JavaScript — ou num telemóvel, onde não se arrasta — nada disto aparece e a
   página fica como sempre esteve, com o botão de escolher ficheiros. */

.arrastar-zona {
  padding: var(--e4) var(--e4) var(--e5);
  border: 2px dashed var(--linha);
  border-radius: var(--raio);
  background: var(--sup);
}

.arrastar-convite {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  margin: 0 0 var(--e1);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-p);
  background: var(--sup2);
  color: var(--txt2);
  font-size: var(--t-3);
  line-height: 1.5;
}
.arrastar-convite strong { color: var(--txt); }
/* A seta é só um sinal para o olho — quem ouve a página não precisa dela
   (está com aria-hidden na marcação). O desenho vem de um SVG em linha, como
   os restantes ícones da aplicação: um sinal de texto («seta para baixo») fica
   à mercê do tipo de letra de cada equipamento e há leitores de ecrã que o leem
   em voz alta. O SVG mede 16 px dentro do círculo de 26 px. */
.arrastar-seta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--sup);
  color: var(--txt2);
}
.arrastar-seta svg { width: 16px; height: 16px; }
/* A segunda frase, a de «largue aqui», só existe enquanto há ficheiros por
   cima do quadro; a primeira dá-lhe o lugar. */
.arrastar-largue { display: none; }

.arrastar-zona.arrastar-sobre {
  border-style: solid;
  border-color: var(--acento);
  background: var(--acento-fraco);
}
.arrastar-zona.arrastar-sobre .arrastar-convite {
  background: var(--sup);
  color: var(--acento-txt);
}
.arrastar-zona.arrastar-sobre .arrastar-convite strong { color: var(--acento-txt); }
.arrastar-zona.arrastar-sobre .arrastar-seta {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--acento-contra);
}
.arrastar-zona.arrastar-sobre .arrastar-texto { display: none; }
.arrastar-zona.arrastar-sobre .arrastar-largue { display: block; }

/* --- A lista do que vai ser importado -------------------------------------- */

.arrastar-lista {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: var(--e3) var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup2);
  display: grid;
  gap: 2px;
  font-size: var(--t-3);
  max-height: 260px;
  overflow-y: auto;
}
.arrastar-item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
  padding: 2px 0;
}
/* Quadradinho do tipo: quem distingue um documento de uma folha de cálculo são
   as LETRAS (PDF / XLSX). A cor é só para o olho os separar à distância — é a
   mesma regra do bloco de ficheiro anexado. */
.arrastar-tipo {
  flex: none;
  min-width: 40px;
  padding: 2px var(--e1);
  border-radius: var(--raio-p);
  background: var(--fic-pdf);
  color: var(--txt);
  font-family: var(--fonte-mono);
  font-size: var(--t-1);
  letter-spacing: 0.04em;
  text-align: center;
}
.arrastar-tipo[data-tipo="xlsx"] { background: var(--fic-xls); }
.arrastar-nome {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--txt);
  overflow-wrap: anywhere;
}
.arrastar-tamanho {
  flex: none;
  color: var(--txt2);
  font-size: var(--t-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Botões pequenos dentro da lista. Em ecrã estreito voltam aos 44 px pela
   regra de alvos de toque da secção 24. */
.arrastar-tirar,
.arrastar-limpar {
  flex: none;
  min-height: var(--alt-p);
  padding: var(--e1) var(--e3);
  font-size: var(--t-3);
}
.arrastar-conta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-top: var(--e1);
  padding-top: var(--e3);
  border-top: 1px solid var(--linha);
  font-size: var(--t-3);
  font-weight: 700;
  color: var(--txt);
}

/* --- O que foi recusado aqui mesmo ----------------------------------------
   Ficheiros que nem são PDF nem Excel, repetidos, ou a mais do que o limite:
   são recusados no computador de quem importa, com o NOME e o PORQUÊ, e nunca
   chegam a sair daqui. */
.arrastar-recusados {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--erro-linha);
  border-left: 4px solid var(--erro-txt);
  border-radius: var(--raio-p);
  background: var(--erro-fundo);
  color: var(--erro-txt);
  display: grid;
  gap: var(--e1);
  font-size: var(--t-3);
  line-height: 1.45;
}
.arrastar-recusa-titulo { font-weight: 700; }
.arrastar-recusados b { font-weight: 600; overflow-wrap: anywhere; }

.triagem-resumo { margin: var(--e5) 0 var(--e1); }
.triagem-barra { height: 8px; border-radius: 999px; background: var(--linha-suave); overflow: hidden; max-width: 420px; }
/* A largura vem calculada no «template» (style inline) — não mexer. */
.triagem-barra-cheia { display: block; height: 100%; background: var(--ok-txt); }
.triagem-conta { margin: var(--e3) 0 0; font-size: var(--t-4); color: var(--txt2); }
.triagem-conta strong { color: var(--txt); }
.triagem-conta-erro { color: var(--erro-txt); font-weight: 600; }

.triagem-lista { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e4); }
.triagem-linha {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra);
  padding: var(--e4) var(--e4) var(--e4);
}
.triagem-linha.com-erro { border-left-color: var(--erro-txt); background: var(--erro-fundo); }

.triagem-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e3); margin-bottom: var(--e1); }
.triagem-ficheiro {
  flex: 1;
  min-width: 200px;
  font-family: var(--fonte-mono);
  font-size: var(--t-3);
  font-weight: 500;
  color: var(--txt);
  word-break: break-word;
}
.triagem-mensagem-erro { margin: var(--e2) 0 0; color: var(--erro-txt); font-size: var(--t-3); }

.triagem-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e2) var(--e4);
  margin-top: var(--e2);
}
.triagem-campo { display: grid; gap: var(--e1); align-content: start; }
.triagem-campo-largo { grid-column: 1 / -1; }
.triagem-campo input[type="text"], .triagem-campo select { width: 100%; }
.triagem-campo .nota-campo { font-size: var(--t-2); }

.triagem-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin-top: var(--e4); }


/* --- Paginação (triagem de importações e registo) --------------------------
   Barra com «Página N de M», anterior/seguinte. Nasceu nos templates da
   triagem paginada e do registo (06/09/2026) e vive aqui para os dois. */
.paginacao { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; margin: var(--e4) 0; }
.paginacao .pag-conta { color: var(--txt2); font-size: var(--t-3); }

/* =============================================================================
   21. APAGAR PAINÉIS E RECICLAGEM
   -----------------------------------------------------------------------------
   Três peças: a zona de apagar no fim da página do painel (deliberadamente
   pequena e afastada do botão de editar), a página de confirmação (apagar.html)
   e a lista da reciclagem (reciclagem.html).
   ========================================================================== */

/* --- Zona de apagar, no fim da página do painel ---------------------------
   Separada por uma linha e com o botão pequeno: nunca pode ser confundida com
   o botão grande de «Editar este painel», que fica logo acima. */
.zona-apagar {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e4);
}
.zona-apagar .nota-campo { margin: 0; flex: 1 1 220px; min-width: 0; }

/* Aviso no topo do corpo de um painel que está na reciclagem. */
.aviso-reciclagem {
  background: var(--erro-fundo);
  border-color: var(--erro-linha);
  color: var(--erro-txt);
}
.aviso-reciclagem p { margin: 0 0 var(--e3); }
.aviso-reciclagem p:last-child { margin-bottom: 0; }

/* --- Página de confirmação (apagar.html) --------------------------------- */
.apagar-cartao { border-left: 3px solid var(--erro-linha); }
.apagar-cartao.apagar-definitivo { border-left-color: var(--erro-txt); }
.apagar-titulo {
  font-size: var(--t-6);
  font-weight: 700;
  color: var(--txt);
  margin: var(--e1) 0 0;
  overflow-wrap: anywhere;
}
.apagar-aviso {
  margin-top: var(--e5);
  padding: var(--e4) var(--e4);
  border: 1px solid var(--aviso-linha);
  border-radius: var(--raio-p);
  background: var(--aviso-fundo);
  color: var(--aviso-txt);
}
.apagar-aviso h3 { margin: 0 0 var(--e3); font-size: var(--t-4); font-weight: 700; }
.apagar-aviso p { margin: var(--e3) 0 0; font-size: var(--t-4); }
.apagar-lista { margin: 0; padding-left: 20px; display: grid; gap: var(--e1); }
.apagar-lista li { font-size: var(--t-4); overflow-wrap: anywhere; }
.apagar-lista a { font-weight: 600; color: inherit; text-decoration: underline; }
/* A linha que conta, sem os nomear, os painéis de temas a que a conta não tem
   acesso (confirmações de apagar, 26/09/2026): texto corrido, sem ligação. */
.apagar-sem-acesso { font-style: italic; }
.apagar-nota-final { margin: var(--e5) 0 0; font-size: var(--t-3); color: var(--txt2); }
.apagar-cartao .acoes-fundo form { display: block; }

/* --- Escolhas da página de apagar uma SECÇÃO (apagar-seccao.html) --------
   Cada escolha é uma caixa inteira, e não um redondinho com uma frase ao lado:
   a caixa é grande o suficiente para se acertar nela com o dedo e para caber lá
   dentro a explicação do que vai acontecer — e, numa delas, a lista das secções
   para onde os painéis podem ir. */
.apagar-escolhas { display: grid; gap: var(--e3); margin-top: var(--e3); }
.apagar-escolha {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
}
/* O redondinho não encolhe quando o texto ao lado é comprido, e alinha-se com a
   primeira linha desse texto. */
.apagar-escolha input[type="radio"] { flex: none; margin-top: var(--e1); }
/* O texto de cada escolha ocupa o resto da caixa; o «min-width: 0» é o que
   impede um nome de secção comprido de empurrar a caixa para fora do ecrã. */
.apagar-escolha > span { flex: 1 1 auto; min-width: 0; }
.apagar-escolha label { display: block; font-size: var(--t-4); }
.apagar-escolha .nota-campo { display: block; }
.apagar-escolha select { margin-top: var(--e2); min-height: 38px; max-width: 100%; }

/* --- Lista da reciclagem (reciclagem.html) ------------------------------- */
.rec-lista { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e3); }
.rec-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3) var(--e4);
  padding: var(--e4) var(--e5);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--sup);
}
.rec-info { flex: 1 1 240px; min-width: 0; }
.rec-titulo {
  display: block;
  font-weight: 700;
  font-size: var(--t-5);
  color: var(--txt);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rec-titulo:hover { color: var(--acento-txt); }
.rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.rec-data { font-size: var(--t-3); color: var(--txt2); }
.rec-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }

/* Os botões da confirmação têm frases inteiras («Sim, apagar de vez — não dá
   para voltar atrás»). Os botões normais são de uma linha só (white-space:
   nowrap); aqui deixa-se o texto passar à linha, senão no telemóvel o botão
   ficava mais largo do que o ecrã. */
.apagar-cartao .acoes-fundo .botao {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  height: auto;
  padding-top: var(--e4);
  padding-bottom: var(--e4);
}

/* Num ecrã estreito, o título do painel e os botões ao lado dele deixam de
   caber lado a lado: os botões passam para a linha de baixo em vez de
   empurrarem a página para fora do ecrã. */
@media (max-width: 900px) {
  .cab .titulo-linha { flex-wrap: wrap; }
  .cab .titulo-linha h1 { min-width: 0; overflow-wrap: anywhere; }
  .cab .titulo-linha .acoes { flex: 1 1 100%; }
}


/* =============================================================================
   22. SELEÇÃO MÚLTIPLA E BARRA DE AÇÕES EM LOTE
   -----------------------------------------------------------------------------
   Serve as três páginas onde se assinalam vários painéis de uma vez: a triagem
   da importação (logo a seguir a importar um lote), a reciclagem e a página
   «Organizar secções».

   MARCAÇÃO QUE ESTAS REGRAS ESPERAM (os nomes são fixos: o servidor lê o campo
   «paineis» e reconhece os botões pelo nome próprio):

     <form data-seleccao>
       <div class="sel-barra">
         <label><input class="sel-todos" type="checkbox"> Assinalar todos</label>
         <span class="sel-conta" role="status">Nenhum painel assinalado</span>
         <button class="botao botao-perigo" data-lote name="apagar_assinalados">…</button>
       </div>

       <ul class="rec-lista">
         <li class="rec-item sel-linha">
           <input class="sel-caixa" type="checkbox" name="paineis" value="7" id="sel-7">
           <label class="oculto-visual" for="sel-7">Assinalar «…»</label>
           …o resto da linha, como já era…
         </li>
       </ul>
     </form>

   «sel-linha» é um ACRESCENTO a linhas que já existem e já têm desenho próprio
   (.rec-item na reciclagem, .org-mover li em «Organizar secções»,
   .triagem-cabecalho na triagem). Por isso estas regras não desenham outra
   caixa por cima: só arrumam a caixa de seleção à esquerda, dão à linha altura
   de alvo de toque e marcam-na quando está assinalada.

   PORQUE É QUE A BARRA FICA COLADA AO TOPO (e não ao fundo): a barra é a
   primeira coisa do formulário, antes da lista — colada ao topo, acompanha a
   rolagem e está sempre à mão, e a ordem em que se lê a página é a mesma por
   onde passa o teclado. Uma barra colada ao fundo assentaria por cima da última
   linha da lista; assim não. Medido nas três páginas, a 1280, 768, 390 e
   320 px, com a lista rolada até ao fim: a barra tapa 0 px da última linha em
   todos os casos. Quando a página tem barra de topo (.topo), a barra de seleção
   assenta por baixo dela, nunca escondida atrás.

   NO TELEMÓVEL A BARRA TAMBÉM FICA COLADA, mas só a linha que interessa. Já
   esteve solta («position: static») porque, empilhada em três linhas, media
   205 px a 320 px e comia um terço do ecrã. Mas solta era pior: medido a
   390 px, com a última das 23 linhas da reciclagem assinalada, a barra ficava
   4929 px acima do topo do ecrã, e na triagem 11 554 px — assinalava-se e não
   havia botão nenhum à vista. A saída está no «top» negativo (ver o bloco dos
   640 px): a barra cola-se com a linha do «Assinalar todos» — e, quando há dois
   botões, também com o botão destrutivo — já acima do ecrã, e o que fica colado
   é só a última linha: o contador e o botão principal, 53 px a 320 px. O
   «Assinalar todos» continua onde sempre esteve, no princípio da lista.

   DUAS BARRAS NA MESMA PÁGINA: a reciclagem repete a barra no fim da lista,
   dentro de uma <div class="sel-barra-rodape">. Essa caixa tem exatamente a
   altura da barra, por isso a barra colada não tem para onde deslizar e fica
   quieta onde está.

   SEM JAVASCRIPT continua tudo a funcionar: as caixas são caixas de formulário
   normais e os botões enviam o formulário na mesma. O contador fica no texto
   que o servidor escreveu e os botões não chegam a ficar desativados — quem
   decide o que fazer é sempre o servidor.
   ========================================================================== */

/* --- A barra de ações em lote --------------------------------------------- */
.sel-barra {
  /* Dois números decidem onde a barra se cola:
       --sel-topo   = a que distância do topo do ecrã ela assenta (0, ou a
                      altura da barra .topo quando a página tem uma);
       --sel-oculto = quanto da própria barra fica ACIMA do ecrã quando ela se
                      cola. No computador é 0 — cola-se inteira. No telemóvel
                      passa a ser a altura das linhas de cima, para ficar colada
                      só a linha do contador e do botão (ver o bloco dos 640 px). */
  --sel-topo: 0px;
  --sel-oculto: 0px;
  position: sticky;
  top: calc(var(--sel-topo) - var(--sel-oculto));
  z-index: 25;                  /* por cima da lista, por baixo da barra .topo */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 24 px ENTRE LINHAS, e não 8: quando os botões não cabem lado a lado
     passam para linhas diferentes, e entre «Repor os assinalados» e «Apagar
     definitivamente os assinalados» tem de haver sempre espaço que chegue para
     ninguém se enganar no botão. Com 8 px, entre os 641 e os 1180 px de ecrã,
     ficavam a 8 px um do outro. Lado a lado são estas 14 px mais 14 px de
     acerto (ver mais abaixo): 28 px. */
  gap: var(--e6) var(--e4);
  margin: var(--e5) 0 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  /* Fundo opaco e sombra: a barra passa POR CIMA da lista enquanto se rola. */
  background: var(--sup);
  box-shadow: var(--sombra-g);
}
/* Mesmo acerto que a barra do editor já faz: quando a página tem barra de topo
   fixa, esta assenta por baixo dela em vez de lhe ficar escondida atrás.
   São 61 px medidos, e não os 58 que aqui estavam (nem os 54 que estavam para o
   telemóvel): a barra .topo mede 61 px nos dois casos — 10 px de espaço à volta
   de um botão de 40 px no ecrã largo, 8 px à volta de um de 44 px no estreito.
   Com 58, os últimos 3 px da barra de seleção ficavam escondidos por trás. */
.topo ~ * .sel-barra,
.topo ~ .conteudo .sel-barra { --sel-topo: 61px; }

/* TELEMÓVEIS COM «ENTALHE» (iPhone X e seguintes, e os Android com furo).
   -----------------------------------------------------------------------------
   Nesses telemóveis a página é desenhada por baixo da barra de estado — é o
   que o «viewport-fit=cover» do cabeçalho manda fazer — e o sistema diz, pelo
   env(safe-area-inset-top), quantos pixels dessa faixa é preciso deixar livres.
   A barra .topo já conta com isso (o padding de cima é
   «max(10px, env(safe-area-inset-top))»), e por isso CRESCE nesses telemóveis:
   com uma faixa de 47 px passa dos 61 px medidos para 100 px.

   Os 61 px fixos aqui em cima deixavam então de bater certo, e a barra de
   seleção colada ficava escondida por trás da .topo. Medido a 390 px, na
   página «Organizar secções», com uma faixa de 47 px: dos 44 px do botão
   «Apagar os assinalados» ficavam 39 tapados, e um toque no meio dele ia parar
   ao «Importar PDFs» da barra de cima. Com estas contas fica a zero.

   As contas são a altura da .topo sem o espaço de cima:
     ecrã largo    (mais de 900 px)  botão de 40 px + 10 de espaço + 1 de risco = 51;
     ecrã estreito (até 900 px)      botão de 44 px +  8 de espaço + 1 de risco = 53.
   Onde não há entalhe o env() vale 0, o max() devolve o espaço de sempre e a
   conta dá exatamente os mesmos 61 px — nada muda no computador.

   O @supports é a rede de segurança: um navegador que não conheça env() ou
   max() salta este bloco inteiro e fica com os 61 px de cima. (Sem ele, um
   valor que o navegador não percebesse estragava o «top» da barra, porque as
   variáveis só rebentam na hora de serem usadas.) */
@supports (top: calc(1px + max(2px, env(safe-area-inset-top)))) {
  /* Páginas sem barra .topo (a triagem da importação): a barra colada assenta
     abaixo da faixa do sistema em vez de ficar por baixo do relógio. */
  .sel-barra { --sel-topo: env(safe-area-inset-top, 0px); }

  .topo ~ * .sel-barra,
  .topo ~ .conteudo .sel-barra { --sel-topo: calc(51px + max(10px, env(safe-area-inset-top))); }

  @media (max-width: 900px) {
    .topo ~ * .sel-barra,
    .topo ~ .conteudo .sel-barra { --sel-topo: calc(53px + max(8px, env(safe-area-inset-top))); }
  }
}

/* A cópia da barra no fim da lista (reciclagem). A caixa em volta tem
   exatamente a altura da barra: uma barra colada só desliza dentro da caixa
   onde vive, e aqui não sobra nada para deslizar — fica quieta no fim da
   lista, que é onde se espera encontrá-la depois de rolar tudo. Por isso a
   margem de cima é da CAIXA e não da barra: se fosse da barra, a caixa ficava
   16 px mais alta e a barra baloiçava esses 16 px ao rolar. */
.sel-barra-rodape { margin-top: var(--e5); }
.sel-barra-rodape .sel-barra { margin-top: 0; }

/* O «Assinalar todos» é uma etiqueta com a sua caixa: a palavra também
   assinala, para não ser preciso acertar no quadradinho. */
.sel-barra label {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--alt);
  font-size: var(--t-4);
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  cursor: pointer;
}

/* O «N painéis assinalados». Fica a seguir ao «Assinalar todos» e empurra os
   botões para a direita. */
.sel-conta {
  flex: 1 1 160px;
  min-width: 0;
  font-size: var(--t-4);
  font-weight: 600;
  color: var(--txt);
  overflow-wrap: anywhere;
}

/* A LISTA DE SECÇÕES DA BARRA (triagem da importação): escolhe-se uma secção e
   ela vai para todas as linhas assinaladas de uma só vez. Sem esta regra
   herdava o «width: 100%» dos campos de formulário e ficava sozinha, com a
   largura toda, numa linha da barra. Fica com 220 px e NÃO cresce: o espaço
   que sobra é do contador, e a lista fica encostada ao botão que a usa. Medido
   a 1280 px (a página tem 966 px de largura útil): a lista e o «Aplicar a
   secção aos assinalados» ficam na primeira linha e o botão destrutivo passa
   para a segunda — que é onde ele está melhor, longe do outro. */
.sel-barra .sel-seccao {
  flex: 0 1 220px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/* Os botões desta barra levam frases inteiras («Apagar definitivamente os
   assinalados»). Como os botões normais são de uma linha só, aqui deixa-se o
   texto passar à linha seguinte — senão, num ecrã de 320 px, o botão ficava
   mais largo do que o ecrã. */
.sel-barra .botao {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

/* AFASTAR O BOTÃO DESTRUTIVO DO QUE ESTÁ AO LADO. Na reciclagem, «Repor os
   assinalados» e «Apagar definitivamente os assinalados» fazem coisas opostas e
   uma delas não tem volta. Com o intervalo normal da barra ficavam a 14 px um
   do outro (10 px a 390 px) — uma polpa de dedo tem cerca de 38 px. Aqui somam-
   se 14 px ao intervalo da barra: 28 px num ecrã largo e 24 px entre os 641 e
   os 900 px, onde o intervalo da barra é mais apertado. Quando não cabem lado
   a lado, as 24 px entre linhas tratam do mesmo. */
.sel-barra .botao + .botao-perigo { margin-left: var(--e4); }

/* Botão desativado (não há nada assinalado): claramente inerte — perde a cor
   do perigo e o efeito de passagem do rato — mas o texto continua a ler-se.
   É preciso dizê-lo aqui: .botao-perigo:hover e .botao-acento:hover estão
   escritos mais acima na folha e, sem esta regra, voltavam a pintar de vermelho
   (ou da cor da modalidade) um botão que está desativado. */
.sel-barra .botao:disabled,
.sel-barra .botao:disabled:hover,
.sel-barra .botao[disabled],
.sel-barra .botao[disabled]:hover {
  background: var(--sup2);
  border-color: var(--linha);
  color: var(--txt2);
  box-shadow: none;
  cursor: default;
  transform: none;
  opacity: 1;
}

/* --- A linha selecionável -------------------------------------------------
   Não desenha caixa nenhuma: a linha já a tem. Aqui só se arruma a caixa de
   seleção à esquerda, se garante a altura de alvo de toque e se deixa espaço à
   esquerda para o filete do estado assinalado. */
.sel-linha {
  /* Entrelinha do NOME do painel nesta lista. Serve para pôr a caixa de seleção
     à altura certa (ver .sel-caixa, logo a seguir). São os 21,75 px que o nome
     mede na reciclagem e em «Organizar secções»; na triagem o nome do ficheiro
     é mais pequeno e o número é outro — está lá em baixo, na regra da triagem. */
  --sel-nome-linha: 22px;
  display: flex;
  flex-wrap: wrap;
  /* Tudo encostado ao TOPO da linha: a caixa de seleção tem de ficar ao pé da
     PRIMEIRA linha do nome do painel, e não a meio de uma linha que às vezes
     tem três andares (nome, etiquetas, data). Ao centro, medido a 390 px, a
     caixa caía 28,6 px abaixo do nome — encostava à etiqueta «Protocolo RM» e
     parecia pertencer-lhe. Os grupos de botões e as listas de escolha de cada
     linha voltam ao centro logo a seguir. */
  align-items: flex-start;
  gap: var(--e3) var(--e4);
  min-height: 46px;
  padding-left: var(--e4);
  cursor: pointer;
  /* Para uma linha alcançada pelo teclado não ficar escondida atrás da barra. */
  scroll-margin-top: 120px;
}
/* Em «Organizar secções» a linha já tinha desenho próprio («.org-mover li»,
   que por ter mais peso ganhava a «.sel-linha»): daí esta regra escrita com o
   nome da lista à frente, para o encosto ao topo valer também ali. */
.org-mover .sel-linha { align-items: flex-start; }

/* O que se faz COM a linha continua ao centro dela: os botões «Repor» e
   «Apagar definitivamente» da reciclagem, e a lista de secções com o «Mover»
   de «Organizar secções». Só o nome e a caixa é que sobem ao topo. */
.sel-linha .rec-acoes,
.sel-linha .org-form { align-self: center; }

/* Na triagem a linha vive DENTRO do cartão do ficheiro, que já tem margem
   interior própria. A faixa estica-se até às bordas do cartão: assim o filete
   do estado assinalado nasce na borda do cartão e o texto continua alinhado com
   os campos de baixo, em vez de ficar uma caixa dentro de outra. */
.triagem-linha .sel-linha {
  /* O nome do ficheiro é mais pequeno do que o nome de um painel (12,5 px, com
     18,125 px de entrelinha): a caixa de seleção acompanha. */
  --sel-nome-linha: 18px;
  margin: -12px -14px var(--e1);
  padding: var(--e3) var(--e4) var(--e3) var(--e4);
  border-radius: var(--raio-p) var(--raio-p) 0 0;
}

/* Estado assinalado. NÃO depende só da cor: além do fundo mudar, aparece à
   esquerda um filete grosso que a linha por assinalar não tem — e a própria
   caixa mostra o visto. Quem não distingue cores vê à mesma o filete.
   A regra está escrita duas vezes de propósito: a segunda usa :has(), que os
   navegadores anteriores a 2022 não conhecem. Havia também uma classe
   «assinalada» pensada para esses navegadores, mas nada no JavaScript chegava
   a pô-la: saiu com o resto do CSS morto. */
.sel-linha:has(.sel-caixa:checked) {
  background: var(--acento-fraco);
  box-shadow: inset 4px 0 0 0 var(--acento);
}
/* Com o foco na caixa, a linha inteira fica marcada: ajuda quem anda pelo
   teclado a perceber em que linha está. */
.sel-linha:has(.sel-caixa:focus-visible) { background: var(--sup2); }

/* --- As caixas de seleção -------------------------------------------------
   24 × 24 px: é o mínimo exigido para um alvo de apontador (WCAG 2.5.8). No
   telemóvel sobem para 26 px e a linha inteira tem 44 px ou mais — e um toque
   em qualquer ponto da linha assinala-a (isso é o seleccao.js que faz). */
.sel-caixa,
.sel-todos {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--acento);
  cursor: pointer;
}
/* A caixa de cada linha desce meia entrelinha, para ficar CENTRADA na primeira
   linha do nome — e não encostada ao topo dela. A conta é sempre a mesma:
   (entrelinha do nome − lado da caixa) ÷ 2. Com 22 px de entrelinha e uma caixa
   de 24 px dá −1 px; na triagem, com 18 px, dá −3 px. */
.sel-caixa { margin-top: calc((var(--sel-nome-linha, 22px) - 24px) / 2); }
/* O contorno de foco já vem da regra geral :focus-visible; fica aqui repetido
   para não se perder se algum dia se mexer nessa regra — quem navega com o
   teclado tem de ver sempre onde está. */
.sel-caixa:focus-visible,
.sel-todos:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* --- Ecrãs estreitos ------------------------------------------------------ */
@media (max-width: 900px) {
  .sel-linha { min-height: 44px; }
  /* ALVO DE TOQUE DE 44 px SEM A CAIXA CRESCER.
     A caixa DESENHADA continua a medir 26 px — é o que se vê e é o que a lista
     precisa para não abrir espaço nenhum. O que muda é a CAIXA QUE RECEBE O
     TOQUE: passa a ter 44 px de altura, a partir do topo do quadrado para
     baixo, dentro da própria linha (a linha tem 46 px de altura mínima, por
     isso nada transborda para a linha de cima nem para a de baixo). A LARGURA
     fica nos 26 px de propósito: alargá-la empurrava o nome do painel 18 px
     para a direita — medido em «Organizar secções», o título passava a quebrar
     numa linha a mais.

     Porque é que isto precisa de «appearance: none»: numa caixa de seleção
     desenhada pelo navegador, o enchimento, o contorno e a moldura são
     ignorados no cálculo do tamanho — está medido, com «padding: 9px»,
     «border: 9px solid transparent» e «outline: 9px» a caixa continuava com
     26 × 26 px. A única coisa que pega é a altura. Por isso o quadrado passa a
     ser desenhado aqui, com camadas de fundo (nunca com cores literais: saem
     todas das variáveis do :root), e há uma regra para cada estado — por
     marcar, marcada e «alguns sim, outros não» (indeterminada, que é como o
     «Assinalar todos» nasce quando só parte da lista está assinalada).

     Um toque em QUALQUER ponto da linha continua a assinalá-la (é o
     static/js/seleccao.js que o faz): isto só endireita o alvo da própria
     caixa, para quem lhe aponta ao quadrado. */
  .sel-caixa, .sel-todos {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 44px;
    /* O ESPAÇO QUE A CAIXA OCUPA continua a ser de 26 px: os 18 px a mais são
       devolvidos aqui, em margem negativa. Sem isto, a caixa de «Assinalar
       todos» — que vive dentro de um rótulo alinhado ao centro — subia 9 px e
       o cartão cortava-lhe o topo (medido: o quadrado ficava aberto em cima).
       Assim o quadrado fica exatamente onde estava e a área de toque cresce
       só para baixo, para dentro da linha, que tem 46 px de altura. */
    margin-bottom: -18px;
    border: 0;
    border-radius: 4px;
    background-color: transparent;
    background-repeat: no-repeat;
    /* O quadrado desenha-se ENCOSTADO AO TOPO da área de toque: fica no mesmo
       sítio onde estava, e os 18 px que sobram crescem para baixo, para dentro
       da linha.

       São duas camadas: a de baixo é o contorno (26 px, na cor do texto
       secundário) e a de cima é o miolo (23 px, na cor da superfície), o que
       deixa um contorno de 1,5 px à volta. O miolo tem de vir DESCIDO 1,5 px
       («top 1.5px»), senão encostava ao topo e comia a linha de cima do
       contorno — o quadrado ficava aberto em cima. E são 1,5 px, e não 1, para
       o contorno não desaparecer quando a linha cai a meio de um ponto do
       ecrã: a lista põe as caixas em posições fracionárias (medido: y =
       252,23 px), e uma linha de 1 px aí fica desmaiada. */
    background-position: left 50% top 1.5px, left 50% top 0;
    background-size: 23px 23px, 26px 26px;
    background-image:
      linear-gradient(var(--sup), var(--sup)),
      linear-gradient(var(--txt2), var(--txt2));
  }
  /* MARCADA E «ALGUNS SIM, OUTROS NÃO». O quadrado enche-se com a cor de
     acento e o visto (ou o traço) é RECORTADO nele, deixando ver o fundo da
     linha por baixo. É de propósito que o sinal não é desenhado com uma cor
     sua: um «data:» não lê as variáveis do :root, e uma cor literal branca
     ficava ilegível no tema escuro, onde o acento clareia (medido: acento
     #9aa5b5 com um visto branco por cima). Recortado, o sinal fica sempre
     na cor do que está por trás — claro sobre acento escuro no tema claro,
     escuro sobre acento claro no tema escuro —, que é exatamente o que o
     navegador faz sozinho quando desenha a caixa. */
  .sel-caixa:checked, .sel-todos:checked,
  .sel-caixa:indeterminate, .sel-todos:indeterminate {
    background-image: none;
    background-color: var(--acento);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 26px 26px;
    mask-size: 26px 26px;
    -webkit-mask-position: left 50% top 0;
    mask-position: left 50% top 0;
  }
  /* O visto: um quadrado inteiro com a marca aberta lá dentro («fill-rule» a
     «evenodd» é o que faz o buraco). */
  .sel-caixa:checked, .sel-todos:checked {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M0 0h26v26H0Z M10.6 18.9 4.7 13l2.3-2.3 3.6 3.6 8.4-8.4L21.3 8.2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M0 0h26v26H0Z M10.6 18.9 4.7 13l2.3-2.3 3.6 3.6 8.4-8.4L21.3 8.2Z'/%3E%3C/svg%3E");
  }
  /* O traço de «alguns sim, outros não» — o mesmo recorte, com uma barra. */
  .sel-caixa:indeterminate, .sel-todos:indeterminate {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M0 0h26v26H0Z M6.6 11.6h12.8v2.8H6.6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M0 0h26v26H0Z M6.6 11.6h12.8v2.8H6.6Z'/%3E%3C/svg%3E");
  }
  /* O contorno do cursor do teclado passa a contornar a área de toque inteira
     (26 × 44 px) e não só o quadrado. Continua a ver-se onde está o cursor, que
     é o que interessa, e não se perde nenhum alvo. */
  .sel-caixa { margin-top: calc((var(--sel-nome-linha, 22px) - 26px) / 2); }
  .sel-barra { column-gap: var(--e3); }   /* as 24 px entre linhas ficam como estão */
  .sel-barra label { min-height: 44px; }
  /* A barra .topo mede 61 px tanto no computador como no telemóvel: no ecrã
     largo são 10 px de espaço de cada lado à volta de um botão de 40 px; no
     estreito, 8 px à volta de um botão de 44 px. Por isso o valor não muda
     aqui — e não se repete a regra. */
}

/* --- Telemóvel: a barra colada mostra uma linha só ------------------------
   O PROBLEMA. Numa lista de 20 ou mais painéis, quem assinala uma linha lá
   para baixo tem de conseguir agir sem voltar ao princípio. Mas a barra
   inteira, empilhada num ecrã de 320 px, mede cerca de 200 px — colada ao topo
   comia um terço do ecrã.

   A SAÍDA. A barra continua colada, mas com as linhas de cima já acima do
   ecrã: é para isso que serve o «top» negativo (--sel-oculto). Fica à vista só
   a última linha — o contador («3 painéis assinalados») e o botão principal —,
   53 px medidos a 320 px. As peças ficam por esta ordem, de cima para baixo:

     1.ª linha   «Assinalar todos»          ← sobe para fora do ecrã ao rolar
     2.ª linha   botão destrutivo, se houver dois botões    ← idem
     3.ª linha   contador + botão principal ← é esta que fica colada

   O «Assinalar todos» fica assim onde faz sentido: no princípio da lista, fora
   da barra colada. Quem o quiser, sobe ao topo — que é onde ele sempre esteve.

   PORQUE É QUE O BOTÃO DESTRUTIVO SOBE. Na reciclagem há dois botões e o
   destrutivo («Apagar definitivamente os assinalados») não tem volta: numa
   linha própria, com 24 px de intervalo para o «Repor», ninguém lhe acerta por
   engano — e fica colado o botão que não estraga nada. Quem quiser mesmo
   apagar de vez tem os dois botões no princípio e no fim da lista.

   A CONTA do --sel-oculto (é preciso ser exata, senão fica de fora mais linha
   do que se quer): borda 1 + espaço de cima 8 + «Assinalar todos» 44 +
   intervalo entre linhas 24 = 77 px. Com dois botões acrescenta-se o botão
   destrutivo (44 px) e mais um intervalo (24 px): 77 + 44 + 24 = 145 px.

   O :has() É UM EXTRA. Um navegador que não o conheça (anteriores a 2022) usa
   os 77 px e mostra duas linhas coladas em vez de uma — mais alto, mas a
   funcionar na mesma. */
@media (max-width: 640px) {
  .sel-barra {
    --sel-oculto: 77px;
    column-gap: var(--e3);
    padding: var(--e3) var(--e3);
  }
  /* Uma barra com dois botões esconde mais uma linha: a do botão destrutivo. */
  .sel-barra:has(.botao ~ .botao) { --sel-oculto: 145px; }

  /* 1.ª linha: «Assinalar todos», com altura fixa — é dela que sai a conta
     de cima, por isso não pode variar. */
  .sel-barra label {
    order: 1;
    flex: 1 1 100%;
    height: 44px;
    min-height: 44px;
  }

  /* 2.ª linha: o botão destrutivo, sozinho, quando há mais do que um botão.
     Fica a 24 px do botão de baixo — é o intervalo entre linhas da barra.
     A ALTURA É FIXA (44 px, o alvo de toque mínimo) porque é dela que sai a
     conta do --sel-oculto: se o botão crescesse ao sabor do texto, a parte que
     fica acima do ecrã deixava de bater certo. A letra desce para 12,5 px para
     a frase caber à vontade dentro dos 44 px, mesmo num ecrã de 320 px. */
  .sel-barra .botao-perigo:not(:only-of-type) {
    order: 2;
    flex: 1 1 100%;
    height: 44px;
    min-height: 44px;
    padding: var(--e1) var(--e3);
    font-size: var(--t-3);
    line-height: 1.2;
    margin: 0;
  }

  /* 3.ª linha (a que fica colada): contador e botão principal, lado a lado.
     O contador encolhe até 84 px e passa a 12,5 px de letra, para sobrar
     largura que chegue ao botão caber inteiro numa linha num ecrã de 320 px.
     A entrelinha mais curta é para o pior caso: «Nenhum painel assinalado»,
     que num ecrã de 320 px se parte em três linhas. Com a entrelinha normal a
     barra colada ia a 63 px; com esta, fica em 56 px. Assim que houver alguma
     coisa assinalada são duas linhas e a barra desce aos 53 px. */
  .sel-conta {
    order: 3;
    flex: 1 1 84px;
    font-size: var(--t-3);
    line-height: 1.25;
  }
  .sel-barra .botao {
    order: 3;
    flex: 1 1 150px;
    padding-left: var(--e3);         /* mais espaço para o texto, menos à volta:
                                   assim «Apagar os assinalados» cabe numa
                                   linha só num ecrã de 320 px */
    padding-right: var(--e3);
    margin-left: 0;             /* o afastamento passou a ser entre linhas */
  }

  /* A lista de secções fica na MESMA linha do contador e do botão que a usa
     («Aplicar a secção aos assinalados»), e não nas linhas que sobem para fora
     do ecrã: escolher a secção e aplicá-la é um gesto só, e de nada servia ter
     o botão colado com a lista escondida lá em cima. A conta do --sel-oculto
     não muda — continua a ser «Assinalar todos» mais o botão destrutivo. */
  .sel-barra .sel-seccao {
    order: 3;
    flex: 1 1 150px;
    font-size: var(--t-3);
  }

  /* A ficha de cada painel na reciclagem tem de caber ao lado da caixa de
     seleção: com os 240 px que pedia por omissão, num ecrã de 320 px passava
     para a linha de baixo e a caixa ficava sozinha, por cima do nome. */
  .sel-linha .rec-info { flex: 1 1 140px; }

  /* COM O CURSOR DO TECLADO DENTRO DA BARRA, ELA MOSTRA-SE INTEIRA. Quem anda
     pela página com a tecla de tabulação chega ao «Assinalar todos» (e ao botão
     destrutivo), que vivem na parte de cima — a que fica acima do ecrã quando a
     barra está colada. Sem isto, o cursor ia parar a um controlo que não se
     via: medido a 390 px na reciclagem, ficava 50 px acima do topo do ecrã.

     É :focus-visible (o cursor do TECLADO) e não :focus-within (qualquer
     cursor) de propósito. Com :focus-within, tocar no botão colado dava-lhe o
     cursor, a barra abria-se e descia 145 px — o botão fugia de debaixo do dedo
     entre carregar e largar, e o toque não chegava a valer. Está medido: com
     :focus-within, um toque em «Repor os assinalados» não saía da página; com
     :focus-visible, abre a página que pergunta se é mesmo isso.

     A REGRA ESTÁ ESCRITA DUAS VEZES de propósito: um seletor com :has() lá
     dentro pesa tanto como o que está dentro dos parênteses, por isso o
     «.sel-barra:has(.botao ~ .botao)» de cima ganhava à primeira linha sozinha
     e a barra da reciclagem continuava a esconder a linha de cima. */
  .sel-barra:has(:focus-visible),
  .sel-barra:has(.botao ~ .botao):has(:focus-visible) { --sel-oculto: 0px; }
}

/* Ecrãs muito estreitos (iPhone SE e afins, 320 px). Com a letra de 13,5 px e
   10 px de espaço de cada lado, o texto do botão colado («Repor os
   assinalados», 149 px) não cabia nos 163 px do botão e passava para uma
   segunda linha: a barra colada subia de 53 para 61 px. Com meio ponto de letra
   a menos e menos espaço à volta, o botão fica com 166 px para 161 px de texto
   e volta a caber numa linha só. Ao contador sobram 94 px — duas linhas
   quando há painéis assinalados, três no «Nenhum painel assinalado». */
@media (max-width: 360px) {
  .sel-conta { flex: 1 1 78px; }
  .sel-barra .botao {
    font-size: var(--t-3);
    padding-left: var(--e2);
    padding-right: var(--e2);
  }
}

/* --- Impressão ------------------------------------------------------------
   Em papel não se assinala nada: as caixas e a barra de ações não saem, e a
   linha assinalada perde o fundo e o filete. */
@media print {
  .sel-barra,
  .sel-barra-rodape,
  .sel-caixa,
  .sel-todos,
  .sel-conta { display: none !important; }

  .sel-linha {
    min-height: 0;
    padding-left: 0;
    background: var(--papel);
    box-shadow: none;
  }
  /* O filete do estado assinalado tem de ser tirado outra vez, e em regras
     separadas: as de cima têm mais peso do que «.sel-linha» sozinha, e um
     traço preto ao lado de uma linha, sem a caixa que o explica, só confundia
     quem lê o papel. */
  .sel-linha:has(.sel-caixa:checked) { background: var(--papel); box-shadow: none; }
  .triagem-linha .sel-linha { margin: 0; padding: 0; }
}


/* =============================================================================
   23. (número vago)
   -----------------------------------------------------------------------------
   Aqui viviam os «cartões antigos» da lista simples de painéis, anterior à
   árvore de secções (.lista-paineis, .cartao-corpo, .cartao-titulo,
   .cartao-data). Nenhuma página os usava desde a árvore, e saíram em
   06/09/2026. O número fica vago de propósito: as secções seguintes são
   citadas pelo número em comentários desta folha e na documentação do projeto,
   e renumerá-las trocava as voltas a quem as procura.
   ========================================================================== */


/* =============================================================================
   24. ECRÃS ESTREITOS
   -----------------------------------------------------------------------------
   Até 900 px: uma coluna, barra lateral em gaveta (abre pelo botão «Menu» da
   barra inferior) e alvos de toque com 44 px ou mais.

   COMO SE ABRE A GAVETA: o JavaScript põe a classe «menu-aberto» no <body>
   (ou a classe «aberta» na própria .lateral). Sem JavaScript, uma ligação
   para #lateral também a abre, através de :target.
   ========================================================================== */

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(86vw, 320px);
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.18s ease, visibility 0.18s ease;
  }
  /* A gaveta rola INTEIRA no telemóvel (árvore e rodapé juntos), em vez de a
     árvore rolar sozinha num bocado de ecrã: com os grupos do rodapé (edição,
     administração, conta), a um administrador sobravam ~250 px para a árvore.
     Assim a árvore tem a altura que precisa e o rodapé chega-se rolando. */
  .lateral { overflow-y: auto; overscroll-behavior: contain; }
  .lateral .arvore { flex: none; overflow: visible; min-height: 0; }
  .lateral .rodape-lat { flex: none; }
  summary.lat-rotulo, summary.lat-quem { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
  summary.lat-rotulo { flex-direction: row; align-items: center; }
  body.menu-aberto .lateral,
  .lateral.aberta,
  .lateral:target {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 0 10px 40px var(--veu);
  }

  body.menu-aberto .tapa-lateral {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--veu);
    border: 0;
  }

  /* Barra inferior fixa: dois alvos e só dois — «Procurar» e «Painéis».
     Havia um terceiro, «Protocolos», que ia dar à página inicial: o nome não
     batia com o destino («Painéis»), e a árvore que se procura já vive na
     gaveta. Saiu a 02/09/2026, a pedido do promotor, depois do estudo de
     desenho do menu. Cada alvo leva ícone e rótulo: o ícone reconhece-se de
     relance e o rótulo tira a dúvida a quem nunca o viu. */
  .barra-movel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    background: var(--sup);
    border-top: 1px solid var(--linha);
  }
  /* A altura vem da lista de alvos de toque mais abaixo (44 px): a barra vive
     só nesta consulta, e o valor tem de ser o do dedo, não o das três alturas
     do computador. */
  .barra-movel a,
  .barra-movel button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e3);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--sup);
    color: var(--txt);
    font: inherit;
    font-size: var(--t-5);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  .barra-movel svg { width: 20px; height: 20px; flex: none; }
  /* «Painéis» é a ação principal e leva sempre a cor de acento; enquanto a
     gaveta está aberta fica um pouco mais escuro, a dizer que está «premido».
     «Procurar» acende-se, mais suave, na própria página de pesquisa. */
  .barra-movel .destaque,
  .barra-movel .on {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--acento-contra);
    font-weight: 700;
  }
  body.menu-aberto .barra-movel .destaque { filter: brightness(0.88); }
  .barra-movel .ativo {
    background: var(--acento-fraco);
    border-color: var(--acento);
    color: var(--acento-txt);
    font-weight: 700;
  }
  /* O ✕ no topo da gaveta: só existe no telemóvel (fora desta regra está
     escondido — no computador a barra lateral não se fecha). */
  .fechar-lateral {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    background: var(--sup);
    color: var(--txt);
    cursor: pointer;
  }
  .fechar-lateral svg { width: 18px; height: 18px; }
  /* Com o ✕ na linha, o nome «Painéis» (ou o logótipo) estica-se e o fechar
     fica encostado à direita, no canto. O seletor «Tema» vai sempre para uma
     linha própria, por baixo do nome (ou das áreas do logótipo): sem isso,
     com o nome curto, ficava entre o nome e o ✕. O próprio ✕ também é um <a>,
     e fica de fora da primeira regra: esticado, media 74 px em vez dos 44 px
     do quadrado. */
  .lateral .marca > a:not(.fechar-lateral) { flex: 1 1 auto; min-width: 0; }
  .lateral .marca > .tema-escolha { flex-basis: 100%; }

  /* Espaço no fundo para a barra não tapar o conteúdo. */
  .principal,
  body > .conteudo,
  body > .rodape { padding-bottom: calc(var(--altura-movel) + env(safe-area-inset-bottom)); }

  /* Uma coluna em tudo o que estava em duas. */
  .grelha, .duas, .triagem-campos, .linha-dupla { grid-template-columns: minmax(0, 1fr); }
  .corpo-painel .grelha { columns: 1; }

  /* Alvos de toque com 44 px ou mais. Entram aqui todos os controlos que se
     usam a sério no telemóvel, incluindo os campos de formulário. */
  .botao, .botao-pequeno, select.tema-seletor, .an-botao,
  .ps-botao, .ps-botao-linha, .pc-botao, .pc-botao-linha,
  .arrastar-tirar, .arrastar-limpar,
  .arvore .mod, .arvore .sub, .arvore .item,
  .arv-tudo, .rodape-novo, .rodape-atalho,
  .rodape-lat .lat-ligacoes a, .rodape-lat .lat-ligacoes button,
  .migalhas a, a.chip, .chip-lig,
  .lem-botao-p, .msg-botao-p,
  .fic-abrir, .fic-escolher, .vd-botao,
  .lig-fechar, .lig-item, .lig-bloco-texto, .lig-procura,
  .dose-pendente-acoes .botao, .dose-pendente-acoes select,
  .barra-movel a, .barra-movel button,
  input[type="text"], input[type="url"], input[type="date"],
  input[type="search"], input[type="number"], input[type="file"],
  input[type="password"], input[type="email"],
  select, textarea,
  .org-form input[type="text"], .org-form select,
  .chips-variantes .chip { min-height: 44px; }
  /* Ligações que são texto corrido dentro de uma frase ou de uma lista, e por
     isso nasciam com a altura da linha (18 a 22 px) em vez da altura do dedo.
     Acrescentadas a 06/09/2026, depois de as medir a 390 px:
       · «a.lig» — as ligações das contagens da página inicial («Ir à
         reciclagem», «Organizar secções»), 18,8 px;
       · «a.aut-nome» — o nome de cada pessoa na lista «Utilizadores», 21,8 px;
         só a ligação, que o nome de quem não se pode abrir é um <span>;
       · «.nota-campo a» — as ligações das notas por baixo dos campos (a
         «Gerir categorias» da ficha de uma pessoa media 15 px);
       · «.org-paineis li a» e «.org-mover-titulo» — os painéis da árvore e a
         lista «Onde fica cada painel» da página «Organizar secções», entre
         16 e 43,5 px;
       · «a.rec-titulo» — o título de cada painel na reciclagem, 21,8 px
         (apanhado na verificação do orquestrador).
     São todas «inline-flex» para a altura pegar (numa ligação «inline» o
     min-height não conta) e alinhadas ao centro, para o texto não subir. */
  a.lig,
  a.aut-nome,
  .nota-campo a,
  .org-paineis li a,
  .org-mover-titulo,
  a.rec-titulo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* O quadrado de cor de cada modalidade em «Organizar secções» media 38 px. */
  .org-cor input[type="color"] { height: 44px; min-height: 44px; }
  /* As pastilhas do rodapé da barra lateral e as migalhas ganham enchimento
     lateral a condizer com a altura. Os seletores levam «.rodape-lat» à frente
     de propósito: as regras da secção 28 vêm depois desta no ficheiro, e com a
     mesma especificidade ganhavam elas (medido: 28 px em vez de 44 px). */
  .rodape-lat .lat-ligacoes a,
  .rodape-lat .lat-ligacoes button { padding: 0 var(--e3); }
  .migalhas a, .chip-lig { display: inline-flex; align-items: center; }
  .topo .migalhas { min-height: 44px; font-size: var(--t-3); }
  .an-cor { width: 44px; height: 44px; }
  /* A caixa de pesquisa tem desenho próprio (a regra .procura input ganha à de
     cima por ser mais específica): aqui o campo passa a encher a caixa toda,
     para o dedo acertar em qualquer ponto dela e não só na linha do texto. */
  .procura { padding: 0 var(--e3); }
  .procura input, .procura input[type="search"] { min-height: 44px; }
  .arvore .item { padding-top: var(--e4); padding-bottom: var(--e4); }
  /* O tema deixou de ser só um letreiro: é o botão que abre e fecha o tema
     todo, e por isso leva os 44 px como qualquer outro alvo de toque. Um tema
     VAZIO continua a ser um letreiro (não é botão nenhum) e fica como estava. */
  .arvore button.tema { min-height: 44px; align-items: center; }
  .navsec a { padding: var(--e4) var(--e4); }
  /* No telemóvel a barra volta a uma linha com rolagem, e o degradê da direita
     diz que há mais atalhos para lá da margem. */
  .navsec {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Numa máscara só conta o canal alfa; usa-se «currentColor» (opaco) para
       não nascer aqui nenhuma cor literal — a regra da folha é que todas as
       cores existem primeiro no :root. */
    -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, currentColor calc(100% - 28px), transparent 100%);
  }
  /* 16 px: com menos, o Safari do iPhone amplia a página ao tocar no seletor. */
  select.tema-seletor { padding: var(--e2) var(--e3); font-size: 16px; }

  /* Menos margem lateral: o conteúdo aproveita o ecrã todo. */
  .conteudo { padding: var(--e4) var(--e4) 32px; }
  .cab { padding: var(--e4) var(--e4) 0; }
  main > .navsec { padding: 0 var(--e4); }
  .corpo { padding: var(--e4) var(--e4) var(--e5); }
  .topo { padding: var(--e3) var(--e4); padding-top: max(8px, env(safe-area-inset-top)); }
  .rodape { padding-left: var(--e4); padding-right: var(--e4); }
  .procura, .lateral > .lista-procura { margin-left: var(--e4); margin-right: var(--e4); }

}

/* --- Telemóvel: acertos finos --------------------------------------------- */

@media (max-width: 640px) {
  .painel { padding: var(--e4) var(--e4) 20px; border-radius: 0; border-left: 0; border-right: 0; margin: 0 -14px; }
  .cartao { border-radius: var(--raio-p); }
  .caixa-editor { padding: var(--e2) 2px 60px; border-radius: 0; margin: 0 -12px; border-left: 0; border-right: 0; }
  .topo ~ * .barra-editor,
  .topo ~ .conteudo .barra-editor { top: 54px; }
  /* O logótipo da instituição encolhe no telemóvel — a regra está no fim da
     folha, na secção 30, para ganhar à altura normal que lá é declarada. */
  .org-form { width: 100%; }
  .org-form input[type="text"], .org-form select { flex: 1; min-width: 0; }
  .triagem-acoes .botao { flex: 1; }
  .an-grupo-fim { margin-left: 0; width: 100%; }
  .an-botao, .an-cor { flex: 1; }

  /* Reciclagem: os dois botões de cada linha ocupam a largura toda, lado a
     lado, para o dedo não falhar. */
  .rec-acoes { width: 100%; }
  .rec-acoes > form, .rec-acoes > .botao { flex: 1 1 140px; }
  .rec-acoes > form .botao { width: 100%; }
  /* «Apagar este painel» também enche a linha — mas continua numa zona à
     parte, por baixo de uma linha separadora e com o texto de aviso ao lado. */
  .zona-apagar .botao { width: 100%; }
}


/* =============================================================================
   25. IMPRESSÃO
   -----------------------------------------------------------------------------
   Papel branco, tinta preta, sem barras nem botões: só o conteúdo do painel.
   Os três seletores do :root garantem que também imprime bem a partir do
   tema escuro.
   ========================================================================== */

@media print {
  :root,
  body,
  :root[data-tema="escuro"],
  :root[data-tema="escuro"] body,
  :root:not([data-tema="claro"]),
  :root:not([data-tema="claro"]) body {
    color-scheme: light;
    --bg: var(--papel);
    --sup: var(--papel);
    --sup2: var(--papel);
    --tela: var(--papel);
    --txt: var(--tinta);
    --txt2: var(--tinta);
    --linha: #999999;
    --linha-suave: #cccccc;
    --linha-campo: #999999;
    --tela-linha: #999999;
    --acento: var(--tinta);
    --acento-txt: var(--tinta);
    --acento-fraco: var(--papel);
    --acento-contra: var(--papel);
    --ok-fundo: var(--papel);   --ok-linha: #999999;   --ok-txt: var(--tinta);
    --erro-fundo: var(--papel); --erro-linha: #999999; --erro-txt: var(--tinta);
    --aviso-fundo: var(--papel);--aviso-linha: #999999;--aviso-txt: var(--tinta);
    --fic-pdf: var(--papel); --fic-xls: var(--papel);
    --sombra: none;
    --sombra-g: none;
  }

  body { background: var(--papel); color: var(--tinta); font-size: 11pt; }

  /* Fora tudo o que é navegação, comandos e caixas de trabalho. */
  .lateral,
  .barra-movel,
  .tapa-lateral,
  .topo,
  .acoes-topo,
  .acoes,
  .acoes-fundo,
  .rodape,
  .rodape-lat,
  .navsec,
  .procura,
  .lista-procura,
  .tema-escolha,
  .barra-editor,
  .org-acoes,
  .triagem-acoes,
  .zona-apagar,
  .rec-acoes,
  .an-fundo,
  .botao,
  button { display: none !important; }

  .app { display: block; }
  .principal, .conteudo, .corpo { display: block; padding: 0; max-width: none; }

  /* CABEÇALHO DA INSTITUIÇÃO — só existe no papel (no ecrã está escondido,
     ver a secção 30). Diz de onde veio a folha, de que dia é, e que a versão
     que vale é a que está na plataforma. */
  .inst-impressao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--e4);
    border-bottom: 1.5px solid var(--tinta);
    padding-bottom: var(--e3);
    margin-bottom: var(--e4);
  }
  .inst-impressao img { height: 34px; width: auto; flex: none; }
  .inst-impressao-texto { text-align: right; }
  .inst-impressao-texto b { display: block; font-size: 11pt; }
  .inst-impressao-texto span { display: block; font-size: 8pt; }
  .grelha, .duas { display: block; column-count: 1; }
  .grelha > *, .duas > * { margin-bottom: var(--e3); }

  .painel, .cartao, .caixa-editor {
    border: 1px solid var(--linha);
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 var(--e3);
  }

  a { color: var(--tinta); text-decoration: underline; }

  /* Faixas cheias gastariam tinta à toa: em papel ficam só com um traço. */
  .plano-faixa, .pc-faixa {
    background: var(--papel);
    color: var(--tinta);
    border-bottom: 1px solid var(--linha);
  }

  /* A galeria, os números e as notas TÊM de sair no papel: um protocolo
     impresso sem as anotações das imagens perde informação clínica.
     O emblema do número fica preto com o algarismo a branco (é o que --acento e
     --acento-contra valem na impressão) e leva print-color-adjust: exact, senão
     o navegador não pinta o fundo e o algarismo branco desaparecia. */
  .plano-numero, .pc-numero {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: 0 0 0 1.5px var(--papel);
  }
  .plano-nota, .pc-nota { color: var(--tinta); }
  .plano-figura, .pc-figura { break-inside: avoid; page-break-inside: avoid; }
  /* As imagens de um passo e as suas legendas também saem todas no papel, e
     cada imagem nunca se parte entre duas folhas. Um passo com muitas imagens
     pode ser mais alto do que uma folha: aí parte-se entre imagens. */
  .passo-legenda, .ps-legenda { color: var(--tinta); }
  .passo-figura, .ps-figura { break-inside: avoid; page-break-inside: avoid; }
  .blk-passo:has(.passo-galeria) { break-inside: auto; page-break-inside: auto; }
  /* O conjunto sai inteiro no papel — todas as suas imagens, com o emblema do
     número. Em papel vale o desenho de ecrã largo: caixa branca com filete
     preto à esquerda, como a cobertura. */
  .plano-grupo, .pc-grupo { break-inside: avoid; page-break-inside: avoid; }

  /* A cobertura em papel: fundo branco, filete preto à esquerda. */
  .plano-cobertura, .pc-cobertura {
    background: var(--papel);
    border-left: 2px solid var(--tinta);
  }

  /* Não partir peças ao meio entre páginas. */
  .cartao, .blk-imagem, .blk-plano, .blk-passo, .blk-fonte, .transclusao,
  .blk-ficheiro, .fic-cartao,
  .triagem-linha, table, figure { break-inside: avoid; page-break-inside: avoid; }

  /* Um cartão «Plano de corte» com três ou quatro capturas é MAIS ALTO do que
     uma folha A4: o «break-inside: avoid» acima deixa de poder ser cumprido e o
     navegador parte-o na mesma — mas, com «overflow: hidden» (o que no ecrã
     arredonda os cantos da faixa), CORTA o que passa da primeira folha em vez de
     o levar para a seguinte. Medido: a última captura e a sua nota
     desapareciam do papel. Em papel não há cantos a arredondar; sem o corte, o
     que sobra passa para a folha seguinte. */
  .blk-plano, .pc-caixa, .plano { overflow: visible; }
  .blk-h, h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  .blk-video, .vd-video { display: none; }

  /* FICHEIRO ANEXADO EM PAPEL.
     A moldura do PDF embutido não se imprime: o navegador não desenha lá
     dentro o documento de outro ficheiro, e o que sairia era um retângulo
     vazio a ocupar meia folha. O CARTÃO sai — é ele que diz, em papel, qual é
     o ficheiro que acompanha este protocolo (nome, tipo e tamanho). O botão de
     abrir não sai: numa folha impressa não há onde carregar. O quadradinho do
     ícone fica em contorno, com a extensão escrita lá dentro a preto. */
  .fic-visor { display: none !important; }
  .fic-abrir { display: none !important; }
  .fic-opcoes, .fic-nota, .fic-estado { display: none !important; }
  .fic-cartao {
    border: 1px solid var(--linha);
    background: var(--papel);
    grid-template-columns: auto minmax(0, 1fr);
  }
  .blk-ficheiro .fic-icone { background: var(--papel); }
  .fic-aviso { border: 1px dashed var(--linha); color: var(--tinta); }

  /* MARCA DE NOVIDADE: não sai no papel. «Mudou desde a última vez que aqui
     estive» é uma conta que cada navegador faz para si; numa folha impressa,
     que passa de mão em mão e dura semanas, dizê-lo era mentir a quem a lê.
     Vale para a pastilha da árvore lateral e para a faixa do topo do painel. */
  .novidade,
  .aviso-novidade { display: none !important; }

  /* Zona de largar ficheiros e lista da importação: são caixas de trabalho,
     não têm nada que fazer em papel. */
  .arrastar-convite,
  .arrastar-recusados,
  .arrastar-lista { display: none !important; }
  .arrastar-zona { border: 0; padding: 0; background: var(--papel); }
}

/* Versão instalada, no fundo da barra lateral: quem testa precisa de saber
   qual das versões está a correr. Discreta, mas legível. */
.rodape-lat .versao {
  margin-top: 2px;
  font-family: var(--tipo-mono, ui-monospace, monospace);
  font-size: var(--t-1);
  color: var(--txt2);
  opacity: 0.85;
}

/* =============================================================================
   26. LIGAÇÕES ENTRE PAINÉIS (.blk-ligacao, .lig-*)
   -----------------------------------------------------------------------------
   Duas caras da mesma coisa. NO PAINEL: o botão «→ nome» que leva a outro
   painel (bloco), a ligação escrita no meio do texto (a.lig-interna) e o
   aviso .lig-vazia quando o destino desapareceu. NO EDITOR: o cartão do bloco
   (.lig-bloco-*) e a janela de escolha do destino (.lig-fundo/.lig-janela),
   que é a única janela por cima da página nesta folha — usa o véu e as
   sombras que já existem, nada nasce aqui.
   ========================================================================== */

/* --- No painel: o botão e a sua legenda ----------------------------------- */
.blk-ligacao {
  margin: var(--e4) 0;
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.lig-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  text-decoration: none;
}
.lig-botao:hover { text-decoration: none; }
/* A seta desenha-se aqui e não no HTML: é decoração, um leitor de ecrã não
   precisa de a ouvir. Só entra na página que a equipa lê (.blk-ligacao): a
   pré-visualização do editor mostra o botão sem ela. */
.blk-ligacao .lig-botao .lig-rotulo::before {
  content: "→ ";
  color: var(--acento-txt);
}
.lig-destino {
  font-size: var(--t-3);
  color: var(--txt2);
}
.lig-vazia {
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  border: 1px dashed var(--aviso-linha);
  border-radius: var(--raio);
  background: var(--aviso-fundo);
  color: var(--aviso-txt);
  font-size: var(--t-4);
}
.lig-vazia a { color: inherit; font-weight: 600; }

/* Ligação escrita no meio do texto: é uma ligação normal — a cor de acento
   já a distingue. Só a quebrada (destino apagado, visível no editor) é que
   precisa de avisar. */

/* DENTRO DO EDITOR a mesma ligação mostra, a seguir às palavras, o NOME do
   painel de destino — nunca o número. É texto gerado pelo CSS: não faz parte
   do painel e nunca vai parar ao que fica gravado. (Estas regras vieram do
   <style> de templates/editar.html em 06/09/2026.) */
.lig-interna {
  color: var(--acento-txt);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lig-interna::after {
  content: " (" attr(data-lig-titulo) ")";
  font-size: 0.82em;
  font-weight: 500;
  color: var(--txt2);
  white-space: nowrap;
}
.lig-interna.lig-quebrada {
  color: var(--erro-txt);
  text-decoration-style: wavy;
  background: var(--erro-fundo);
}
.lig-interna.lig-quebrada::after {
  content: " (destino apagado)";
  color: var(--erro-txt);
}
/* Botão da barra de formatação do Editor.js. O tamanho normal é o que o
   Editor.js dá aos irmãos (negrito, itálico); no telemóvel cresce para os
   44 px que um dedo precisa. */
.lig-inline-botao.ce-inline-tool--active { color: var(--acento-txt); }
@media (max-width: 900px) {
  .lig-inline-botao { min-width: 44px; min-height: 44px; }
  /* A «Ligação» a um endereço (LigacaoExternaInline) é da mesma barra. */
  .lig-externa-botao { min-width: 44px; min-height: 44px; }
}

a.lig-quebrada,
.lig-botao.lig-quebrada {
  color: var(--aviso-txt);
  text-decoration-style: wavy;
  text-decoration-line: underline;
}

/* --- No editor: o cartão do bloco ----------------------------------------- */
.lig-bloco {
  margin: var(--e3) 0;
  padding: var(--e4) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--sup);
  box-shadow: var(--sombra);
}
.lig-bloco-cabecalho {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--txt2);
  margin-bottom: var(--e3);
}
.lig-previa { margin: var(--e1) 0 var(--e3); }
.lig-previa .lig-botao {
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  font-weight: 600;
  font-size: var(--t-4);
}
.lig-bloco-vazio,
.lig-bloco-aviso {
  margin: var(--e3) 0 2px;
  font-size: var(--t-3);
  color: var(--txt2);
}
.lig-bloco-aviso {
  padding: var(--e3) var(--e3);
  border: 1px dashed var(--aviso-linha);
  border-radius: var(--raio-p);
  background: var(--aviso-fundo);
  color: var(--aviso-txt);
}
.lig-bloco-destino { margin: 2px 0 var(--e3); font-size: var(--t-3); color: var(--txt2); }
.lig-bloco-rotulo { margin-right: var(--e2); }
.lig-bloco-nome { color: var(--txt); }
/* O campo do texto do botão e a caixa de pesquisa da janela são <input> sem
   atributo «type»: os seletores input[type="text"] da secção 10 não lhes pegam,
   e por isso levam aqui o desenho dos campos. */
.lig-bloco-texto,
.lig-procura {
  width: 100%;
  min-height: var(--alt);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  font: inherit;
  font-size: var(--t-4);
}
.lig-bloco-campo { margin: var(--e3) 0 var(--e1); }
.lig-bloco-etiqueta {
  display: block;
  font-size: var(--t-3);
  color: var(--txt2);
  margin-bottom: var(--e1);
}
.lig-bloco-botoes,
.lig-bloco-rodape {
  display: flex;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-top: var(--e3);
}

/* --- No editor: a janela de escolha do destino ---------------------------- */
.lig-fundo {
  position: fixed;
  inset: 0;
  z-index: 80;                    /* acima da barra do topo e da lateral */
  background: var(--veu);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e5);
}
.lig-janela {
  width: min(560px, 100%);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  padding: var(--e5) var(--e5) var(--e4);
}
.lig-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
.lig-titulo { margin: 0; font-size: var(--t-6); }
.lig-fechar {
  border: 0;
  background: transparent;
  color: var(--txt2);
  font-size: var(--t-5);
  line-height: 1;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-p);
  cursor: pointer;
}
.lig-fechar:hover { background: var(--acento-fraco); color: var(--txt); }
.lig-nota { margin: var(--e2) 0 0; font-size: var(--t-3); color: var(--txt2); }
.lig-procura { margin-top: var(--e3); }
.lig-contagem {
  margin: var(--e2) 2px 0;
  font-size: var(--t-2);
  color: var(--txt2);
  min-height: 16px;
}
.lig-lista {
  margin-top: var(--e2);
  overflow-y: auto;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
}
.lig-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  /* A lista é uma coluna flexível que rola: sem isto, no telemóvel (onde o
     item leva `min-height: 44px`) os itens encolhiam até aos 44 px e o texto
     de um passava por cima do seguinte, a etiqueta «destino atual» incluída. */
  flex-shrink: 0;
  width: 100%;
  padding: var(--e3) var(--e3);
  border: 0;
  border-bottom: 1px solid var(--linha);
  background: transparent;
  color: var(--txt);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lig-item:hover,
.lig-realcado { background: var(--acento-fraco); }
.lig-item-titulo { font-weight: 600; font-size: var(--t-4); }
.lig-item-linha { font-size: var(--t-3); color: var(--txt2); }
.lig-item-marca {
  font-size: var(--t-1);
  font-weight: 600;
  color: var(--acento-txt);
  border: 1px solid var(--acento-txt);
  border-radius: 999px;
  padding: 1px var(--e3);
  margin-top: 2px;
}
.lig-item-actual { box-shadow: inset 2px 0 0 var(--acento); }
.lig-vazio { padding: var(--e4) var(--e3); font-size: var(--t-4); color: var(--txt2); }
.lig-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--e3);
  padding-top: var(--e3);
  margin-top: auto;
}
.lig-remover { margin-right: auto; }

/* No telemóvel a janela cola-se ao fundo, como uma folha que sobe: mais fácil
   de alcançar com o polegar e a lista ganha o ecrã quase todo. */
@media (max-width: 640px) {
  .lig-fundo { padding: 0; align-items: flex-end; }
  .lig-janela {
    width: 100%;
    max-height: 86vh;
    border-radius: var(--raio) var(--raio) 0 0;
    border-bottom: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}


/* =============================================================================
   27. IMPORTAR PDF PARA O PAINEL (.imp-*)
   -----------------------------------------------------------------------------
   A janela que se abre no editor com o botão «Importar PDF para este painel»:
   escolher o documento e dizer onde é que o que lá vem fica.

   É a mesma janela da secção 26 vestida de outra maneira — véu por cima da
   página, caixa branca ao meio, e no telemóvel a subir do fundo do ecrã, ao
   alcance do polegar. A marcação é construída pelo static/js/importar-painel.js;
   aqui está só o aspeto.

   Como no resto da folha: nenhuma cor nasce aqui dentro de um @media — todas
   vêm dos tokens do :root, e por isso a janela acompanha sozinha o tema claro
   e o escuro.
   ========================================================================== */

.imp-fundo {
  position: fixed;
  inset: 0;
  z-index: 80;                    /* acima da barra do topo e da lateral */
  background: var(--veu);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e5);
}
.imp-janela {
  width: min(560px, 100%);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  background: var(--sup);
  color: var(--txt);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  padding: var(--e5) var(--e5) var(--e4);
}
.imp-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
.imp-titulo { margin: 0; font-size: var(--t-6); }
/* Botão QUADRADO de fechar: 44 × 44 px em qualquer largura — é a exceção às
   três alturas, e a razão é o alvo de toque (igual ao ✕ da gaveta). */
.imp-fechar {
  border: 0;
  background: transparent;
  color: var(--txt2);
  font-size: var(--t-5);
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--raio-p);
  cursor: pointer;
}
.imp-fechar:hover { background: var(--acento-fraco); color: var(--txt); }
.imp-nota { margin: 0; font-size: var(--t-3); color: var(--txt2); }

/* --- Escolher o ficheiro --------------------------------------------------- */
.imp-campo { display: flex; flex-direction: column; gap: var(--e2); }
.imp-etiqueta { font-size: var(--t-3); font-weight: 600; color: var(--txt2); }
.imp-ficheiro {
  width: 100%;
  min-height: 44px;
  padding: var(--e3) var(--e3);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup2);
  color: var(--txt);
  font: inherit;
  font-size: var(--t-4);
}

/* --- «Onde fica o que vier do PDF?» ---------------------------------------- */
.imp-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin: 0;
  padding: var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup2);
}
.imp-legenda {
  padding: 0 var(--e1);
  font-size: var(--t-3);
  font-weight: 700;
  color: var(--txt2);
}
.imp-opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  min-height: 32px;
  font-size: var(--t-4);
  line-height: 1.4;
  cursor: pointer;
}
.imp-opcao input { margin-top: 2px; flex: none; }
.imp-opcao-texto { flex: 1 1 auto; }
.imp-opcao-existente { display: flex; flex-direction: column; gap: var(--e2); }
.imp-seccoes {
  width: 100%;
  min-height: 44px;
  margin-left: var(--e6);               /* alinhado com o texto do rádio de cima */
  max-width: calc(100% - 24px);
  padding: var(--e3) var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  font: inherit;
  font-size: var(--t-4);
}

/* --- Erro, dentro da própria janela ---------------------------------------- */
.imp-erro {
  margin: 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--erro-linha);
  border-radius: var(--raio-p);
  background: var(--erro-fundo);
  color: var(--erro-txt);
  font-size: var(--t-4);
}

.imp-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--e3);
  padding-top: var(--e1);
  margin-top: auto;
}
.imp-rodape .botao { min-height: 44px; }

/* No telemóvel a janela cola-se ao fundo e sobe, como a da secção 26: é onde o
   polegar chega, e o teclado do sistema deixa de tapar os botões. */
@media (max-width: 640px) {
  .imp-fundo { padding: 0; align-items: flex-end; }
  .imp-janela {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--raio) var(--raio) 0 0;
    border-bottom: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}


/* =============================================================================
   28. CONTAS E PESSOAS (.aut-*)
   -----------------------------------------------------------------------------
   Tudo o que a autenticação trouxe: as páginas de porta (Entrar, Configuração
   inicial, Sem permissão), a linha de «quem está» no fundo da barra lateral, a
   lista de pessoas e a grelha de acessos por tema.

   Três decisões que valem a pena ficar escritas:

   · AS PÁGINAS DE PORTA NÃO TÊM BARRA LATERAL. Quem ainda não entrou não pode
     ver a lista dos painéis, e a barra lateral é exatamente essa lista. Por
     isso elas não usam a grelha .app: é um cartão sozinho, centrado.
   · A SENHA PROVISÓRIA E A LIGAÇÃO DE DISPOSITIVO aparecem uma única vez, e
     têm cartão próprio (.aut-segredo) com a cor de aviso — para se perceber à
     primeira que aquilo é para copiar AGORA.
   · A GRELHA DE ACESSOS é uma lista de linhas com três rádios, não uma tabela:
     numa tabela, no telemóvel, ou se rola para o lado ou se lê letra de 10 px.
   ========================================================================== */

/* --- Páginas de porta (Entrar · Configuração inicial · Sem permissão) ------ */

body.aut-pagina { background: var(--bg); }

.aut-entrada {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px max(24px, env(safe-area-inset-bottom));
}

.aut-caixa {
  width: 100%;
  max-width: 420px;
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  padding: var(--e6) var(--e6) var(--e6);
}
/* A configuração inicial tem muito mais que explicar do que o «Entrar». */
.aut-caixa-larga { max-width: 560px; }

.aut-caixa h1 { margin: 0 0 var(--e2); font-size: var(--t-7); }
.aut-caixa .subtitulo { margin-bottom: var(--e3); }
.aut-caixa .formulario { max-width: none; margin-top: var(--e3); }
.aut-caixa .acoes { margin-top: var(--e5); }

/* Marca no topo do cartão: é o único sítio da página que diz onde se está. */
.aut-marca {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  flex-wrap: wrap;
  padding-bottom: var(--e4);
  margin-bottom: var(--e4);
  border-bottom: 1px solid var(--linha);
}
.aut-marca b { font-size: var(--t-6); font-weight: 700; color: var(--txt); }
.aut-marca small { font-size: var(--t-3); color: var(--txt2); }

/* --- Recados ------------------------------------------------------------- */

/* A caixa de erro tem a MESMA anatomia das outras duas (secção 8): contorno
   fino, filete de 4 px à esquerda, raio pequeno e 14 px. */
.aut-erro {
  margin: 0 0 var(--e4);
  padding: var(--e4) var(--e4);
  border: 1px solid var(--erro-linha);
  border-left: 4px solid var(--erro-txt);
  border-radius: var(--raio-p);
  background: var(--erro-fundo);
  color: var(--erro-txt);
  font-size: var(--t-4);
  line-height: 1.45;
}
.aut-erro a { color: inherit; text-decoration: underline; }

.aut-nota {
  margin: var(--e4) 0 0;
  font-size: var(--t-3);
  line-height: 1.5;
  color: var(--txt2);
}

/* --- Caixa «manter a sessão iniciada» / «esta conta pode entrar» ---------- */

.aut-lembrar {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  margin-top: var(--e4);
  min-height: 32px;
  font-size: var(--t-4);
  font-weight: 400;
  color: var(--txt);
  cursor: pointer;
}
.aut-lembrar input[type="checkbox"],
.aut-lembrar input[type="radio"] { flex: none; margin-top: var(--e1); }
.aut-lembrar > span { flex: 1 1 auto; min-width: 0; }
.aut-lembrar .nota-campo { display: block; }

/* --- Escolha do modo de importação (rádios «ler / anexar / tabela») ------- */
/* Um grupo de rádios; cada linha reaproveita o desenho de .aut-lembrar. */
.modo-escolha { border: 0; margin: var(--e4) 0 0; padding: 0; }
.modo-escolha legend {
  padding: 0;
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--txt2);
}
.modo-escolha .aut-lembrar { margin-top: var(--e3); }

/* --- Grupos do rodapé da barra lateral (administração e conta) ------------
   O rodapé da barra lateral tem três grupos, separados por filetes: as ações
   de edição (que já têm desenho próprio — .rodape-novo e .rodape-atalho),
   a administração e a conta. Antes eram nove ou dez ligações soltas na mesma
   linha de texto, com 17 px de altura no telemóvel: agora cada uma é uma
   pastilha com o seu alvo de toque.

   O «Terminar sessão» tem de ser um BOTÃO dentro de um formulário POST — um
   endereço que desliga alguém só por ser aberto é um endereço que qualquer
   imagem de outra página consegue disparar —, e por isso tem de se desenhar
   exatamente como as ligações ao lado. */

.lat-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding-top: var(--e2);
  border-top: 1px solid var(--linha);
  line-height: 1.4;
}

/* Rótulo do grupo («Administração»): letras pequenas e espaçadas, para se ler
   como um cabeçalho e não como mais uma ligação. */
.lat-rotulo {
  font-size: var(--t-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--txt2);
}

.lat-ligacoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--e1);
}
.lat-ligacoes form { display: inline-flex; }
.lat-ligacoes a,
.lat-ligacoes button {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--e1) var(--e3);
  border: 0;
  border-radius: var(--raio-p);
  background: none;
  font: inherit;
  font-size: var(--t-3);
  color: var(--txt);
  text-decoration: none;
  cursor: pointer;
}
.lat-ligacoes a:hover,
.lat-ligacoes button:hover {
  background: var(--acento-fraco);
  color: var(--acento-txt);
  text-decoration: none;
}
/* A barra lateral tinha uma regra própria para as suas ligações (secção 5):
   aqui as pastilhas mandam. */
.rodape-lat .lat-ligacoes a { color: var(--txt); }

/* Quem está a usar a aplicação: nome em cima, perfil por baixo. */
/* Os grupos são <details>: o rótulo (ou o nome) é o <summary>, com um
   chevron à direita que roda quando o grupo está aberto. Sem JavaScript
   abrem e fecham na mesma; o JavaScript só guarda o estado no navegador. */
summary.lat-rotulo, summary.lat-quem {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 22px;
  user-select: none;
}
summary.lat-rotulo::-webkit-details-marker, summary.lat-quem::-webkit-details-marker { display: none; }
summary.lat-rotulo::after, summary.lat-quem::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid var(--txt2);
  border-bottom: 1.6px solid var(--txt2);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
details[open] > summary.lat-rotulo::after, details[open] > summary.lat-quem::after { transform: rotate(45deg); margin-top: -7px; }
summary.lat-rotulo:hover, summary.lat-quem:hover { color: var(--txt); }
.lat-ponto {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--aviso-txt);
  vertical-align: 1px;
}
.lat-quem { display: block; font-size: var(--t-3); color: var(--txt2); }
.lat-quem b { display: block; font-size: var(--t-3); font-weight: 600; color: var(--txt); }
.lat-perfil { display: block; }

/* --- Lista de pessoas ----------------------------------------------------- */

.aut-lista { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; gap: var(--e3); }

.aut-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3) var(--e4);
  padding: var(--e4) var(--e4);
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}
/* Conta desativada: fica visivelmente apagada, mas continua legível (o
   contraste do texto principal não desce — quem a lê tem de a poder ler). */
.aut-linha-inativa { background: var(--sup2); border-style: dashed; }

.aut-linha-info { flex: 1 1 260px; min-width: 0; }
.aut-linha-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); flex: none; }

.aut-nome {
  display: block;
  font-size: var(--t-5);
  font-weight: 700;
  color: var(--txt);
}
a.aut-nome:hover { color: var(--acento-txt); }
.aut-linha .chips { margin: var(--e2) 0 0; }
.aut-meta { margin: var(--e2) 0 0; font-size: var(--t-3); color: var(--txt2); }

/* Duas variantes do «chip» que a folha ainda não tinha: «sem acesso» (neutro,
   apagado) e «desativada» (a cor de erro, que é a mesma do resto da folha). */
.chip.aut-chip-nada { color: var(--txt2); border-style: dashed; }
.chip.aut-chip-inativa {
  border-color: var(--erro-linha);
  background: var(--erro-fundo);
  color: var(--erro-txt);
  font-weight: 600;
}

/* --- «A minha conta»: os dados em duas colunas ---------------------------- */

.aut-dados {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: var(--e1) var(--e4);
  margin: var(--e3) 0 var(--e4);
  font-size: var(--t-4);
}
.aut-dados dt { font-weight: 600; font-size: var(--t-3); color: var(--txt2); align-self: baseline; }
.aut-dados dd { margin: 0; color: var(--txt); min-width: 0; overflow-wrap: anywhere; }

.aut-temas-lista { list-style: none; margin: var(--e3) 0 var(--e4); padding: 0; display: grid; gap: var(--e3); }
.aut-temas-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  font-size: var(--t-4);
}

/* --- Grelha de acessos por tema ------------------------------------------ */

.aut-temas { display: grid; gap: var(--e3); margin: var(--e3) 0 var(--e4); }

.aut-tema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3) var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
}

.aut-tema-nome { font-weight: 600; font-size: var(--t-4); color: var(--txt); flex: 1 1 160px; min-width: 0; }

.aut-niveis { display: flex; flex-wrap: wrap; gap: var(--e1); flex: none; }
.aut-niveis label {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 34px;
  padding: var(--e1) var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  font-size: var(--t-3);
  cursor: pointer;
}
/* O nível escolhido fica marcado pela COR e pelo PESO — e continua marcado
   pelo próprio rádio, que nunca se esconde: a cor sozinha não diz nada a quem
   não a distingue. */
.aut-niveis label:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-fraco);
  color: var(--acento-txt);
  font-weight: 600;
}
.aut-niveis input[type="radio"] { flex: none; }

.aut-tema-gere {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 34px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  font-size: var(--t-4);
  cursor: pointer;
}
.aut-tema-gere input[type="checkbox"] { flex: none; }

/* --- Aquilo que só se vê uma vez (senha provisória, ligação) -------------- */

.aut-segredo {
  border-color: var(--aviso-linha);
  background: var(--aviso-fundo);
}
.aut-segredo > h2 { color: var(--aviso-txt); }
.aut-segredo > h2::before { background: var(--aviso-txt); }

/* O valor é para ser LIDO letra a letra e copiado: letra de largura fixa,
   grande, e a quebrar em qualquer sítio (um endereço de ligação é comprido). */
.aut-segredo-valor {
  margin: var(--e1) 0 var(--e4);
  padding: var(--e4) var(--e4);
  border: 1px solid var(--aviso-linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  font-family: var(--fonte-mono);
  font-size: var(--t-5);
  line-height: 1.5;
  color: var(--txt);
  overflow-wrap: anywhere;
  user-select: all;
}

/* --- Ecrãs estreitos ------------------------------------------------------ */

@media (max-width: 640px) {
  .aut-entrada { align-items: flex-start; padding-top: var(--e5); }
  .aut-caixa { padding: var(--e5) var(--e5) var(--e5); }
  /* Alvos de toque de 44 px, como no resto da folha. */
  .aut-niveis label,
  .aut-tema-gere { min-height: 44px; }
  .aut-niveis { width: 100%; }
  .aut-niveis label { flex: 1 1 auto; justify-content: center; }
  .aut-linha-acoes { width: 100%; }
  .aut-linha-acoes .botao { flex: 1 1 auto; min-height: 44px; }
}


/* --- Seletor «Tema» nas páginas autónomas (entrar, configurar, sem permissão)
   O cartão é o único elemento da página: o seletor fica no canto superior
   direito, sobre a PRIMEIRA linha da marca. O espaço dele (150 px: o bastante
   para o «Automático», a opção mais comprida, com o ícone e a seta) guarda-se
   só nessa linha, e não na marca inteira — senão o nome da instituição e o
   subtítulo ficavam presos numa coluna de 220 px, partidos em várias linhas
   com espaço vazio por baixo do seletor. A primeira linha é:
     · com logótipo, a caixa do logótipo (já ocupa a linha toda, e é mais alta
       do que o seletor): o logótipo encolhe, o nome e o subtítulo, por baixo,
       têm a largura toda;
     · sem logótipo, o nome «Painéis», que passa a ter a linha só para ele —
       o subtítulo vai para a linha de baixo, com a largura toda.
   O espaço é uma MARGEM (e não um enchimento): a caixa do nome ou do logótipo
   acaba onde o seletor começa, sem passar por baixo dele. À direita, o
   seletor fica à mesma distância da borda do cartão que o resto do conteúdo
   (o enchimento do cartão, --e6): acaba na mesma vertical que os campos. */
.aut-caixa { position: relative; }
.aut-caixa > .tema-escolha { position: absolute; top: var(--e5); right: var(--e6); }
.aut-caixa .aut-marca > :first-child { flex-basis: calc(100% - 150px); margin-right: 150px; }
/* Num telemóvel o seletor deixa o canto e passa a uma linha própria, em cima e
   à direita: ao lado dele, o nome da instituição ficava espremido numa coluna
   estreita. (Vem depois das regras de cima para lhes ganhar.) */
@media (max-width: 640px) {
  .aut-caixa > .tema-escolha {
    position: static;
    width: 100%;
    justify-content: flex-end;
    margin-bottom: var(--e3);
  }
  .aut-caixa .aut-marca > :first-child { margin-right: 0; }
  .aut-caixa .aut-marca > b:first-child { flex-basis: auto; }
  .aut-caixa .aut-marca > .aut-logo-caixa:first-child { flex-basis: 100%; }
}

/* =============================================================================
   29. RASCUNHO, PUBLICAÇÃO E VERSÕES (.pub-*)
   -----------------------------------------------------------------------------
   Três peças, todas com a mesma ideia por trás: separar à vista o que a equipa
   LÊ (o publicado) do que alguém está a ESCREVER (o rascunho).

     .pub-emblema  a marca «por publicar» ao lado do nome de um painel, na
                   árvore e nas listas. Só chega a quem edita.
     .pub-faixa    a faixa no topo da página de leitura: há um rascunho, este
                   painel ainda não foi publicado, ou está-se a ver uma versão
                   antiga. Usa os tokens de aviso — nenhuma cor nasce aqui.
     .pub-janela   a pergunta de «Publicar», com a nota da versão.
     .pub-lista    o histórico de versões.

   Nenhuma cor é escrita à mão: todas vêm dos tokens da secção 1, e por isso o
   tema escuro trata-se sozinho.
   ========================================================================== */

/* --- Emblema «por publicar» ----------------------------------------------- */

.pub-emblema {
  display: inline-block;
  margin-left: var(--e2);
  padding: 1px var(--e2);
  border: 1px solid var(--aviso-linha);
  border-radius: 999px;
  background: var(--aviso-fundo);
  color: var(--aviso-txt);
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 1px;
}

/* Na árvore da barra lateral o espaço é pouco: o emblema encolhe. E a linha,
   que normalmente corta o nome com «…», passa a poder partir-se em duas — de
   outro modo o emblema era a primeira coisa a desaparecer, que é justamente a
   que não pode faltar. Só acontece nos painéis por publicar, que são poucos. */
.lateral .pub-emblema { font-size: var(--t-1); padding: 0 var(--e1); margin-left: var(--e1); }
.arvore .item:has(.pub-emblema) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.4;
}

/* --- Faixa de publicação, no topo da página de leitura -------------------- */

.pub-faixa {
  margin: 0 0 var(--e4);
  padding: var(--e4) var(--e4);
  border: 1px solid var(--aviso-linha);
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--aviso-fundo);
  color: var(--aviso-txt);
}
.pub-faixa p { margin: 0; font-size: var(--t-4); line-height: 1.55; }

.pub-faixa-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e3);
}
/* Os botões dentro de um <form> (repor uma versão) alinham com os outros. */
.pub-faixa-acoes form { margin: 0; display: inline-flex; }

/* Um painel que ainda não foi publicado é o caso mais forte: leva a cor de
   erro, porque nesse estado ninguém da equipa o vê. */
.pub-faixa-novo {
  border-color: var(--erro-linha);
  background: var(--erro-fundo);
  color: var(--erro-txt);
}

/* --- Chips de publicação (na fila de chips do painel) --------------------- */

.chip.pub-chip { border-color: var(--acento); }
a.chip.pub-chip { text-decoration: none; }
a.chip.pub-chip:hover { border-color: var(--acento); }

/* --- Janela de «Publicar» -------------------------------------------------- */

.pub-fundo {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 12px calc(24px + env(safe-area-inset-bottom));
  background: var(--veu);
}
.pub-janela {
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e5) var(--e5) var(--e5);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--sup);
  color: var(--txt);
  box-shadow: var(--sombra-g);
}
.pub-janela h2 { margin: 0 0 2px; font-size: var(--t-6); }
.pub-janela label { font-size: var(--t-3); font-weight: 600; color: var(--txt2); }
.pub-janela input[type="text"] {
  min-height: 44px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  font: inherit;
  font-size: var(--t-5);
}
.pub-janela-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: flex-end;
  margin-top: var(--e3);
}
.pub-janela-acoes .botao { min-height: 44px; }

/* --- Janela de «Ligar códigos e nomes citados» ---------------------------- */
/* É a mesma janela pequena da publicação (.pub-fundo/.pub-janela) com uma
   lista lá dentro: «RT-22 → RT-22 · Bolus tracking (2×)». Só a lista precisa
   de regras próprias — tudo o resto vem de cima, e por isso as duas janelas
   nunca se afastam uma da outra. */
.lig-chaves-janela { width: min(520px, 100%); }
.lig-chaves-lista {
  margin: 4px 0 2px;
  padding-left: 20px;
  max-height: min(42vh, 320px);
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
}
.lig-chaves-lista li { margin-bottom: 2px; }
.lig-chaves-lista .lig-chaves-chave { font-weight: 600; }
.lig-chaves-lista .lig-chaves-vezes { color: var(--txt2); }

/* --- Histórico de versões -------------------------------------------------- */

.pub-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin: var(--e4) 0 var(--e5);
}
.pub-versao {
  padding: var(--e4) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--sup);
}
/* A versão do topo é a que a equipa está a ler agora: fica assinalada. */
.pub-versao-atual { border-color: var(--acento); }

.pub-versao-cab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-bottom: var(--e1);
}
.pub-versao-numero {
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt2);
}
.pub-versao-quando,
.pub-versao-titulo,
.pub-versao-nota { margin: 2px 0; font-size: var(--t-4); }
.pub-versao-titulo { color: var(--txt2); font-size: var(--t-3); }
.pub-versao-sem-nota { color: var(--txt2); font-style: italic; }

.pub-versao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e3);
}
.pub-versao-acoes form { margin: 0; display: inline-flex; }

/* --- Ecrãs estreitos ------------------------------------------------------- */

@media (max-width: 640px) {
  /* Alvos de toque de 44 px, como no resto da folha. */
  .pub-faixa-acoes .botao,
  .pub-versao-acoes .botao { min-height: 44px; }
  .pub-faixa-acoes,
  .pub-versao-acoes { width: 100%; }
  .pub-faixa-acoes .botao,
  .pub-faixa-acoes form,
  .pub-versao-acoes .botao,
  .pub-versao-acoes form { flex: 1 1 auto; }
  .pub-faixa-acoes form .botao,
  .pub-versao-acoes form .botao { width: 100%; justify-content: center; }
  .pub-fundo { padding-top: var(--e5); }
}


/* =============================================================================
   30. INSTITUIÇÃO — LOGÓTIPO E NOME (.inst-* · .marca-logo · .aut-logo)
   -----------------------------------------------------------------------------
   O nome e o logótipo de quem tem a plataforma instalada (página «Instituição»,
   só do administrador). Aparecem em três sítios: no topo da barra lateral, no
   cartão da página «Entrar» e no cabeçalho dos painéis impressos.

   O LOGÓTIPO TEM DUAS VERSÕES POSSÍVEIS — a do tema claro e a do tema escuro.
   Quando só há a do tema claro (o caso normal: um logótipo de tinta escura), o
   tema escuro mostra-a sobre uma PLACA clara (--logo-placa), senão o desenho
   desaparecia no fundo. A regra da placa está sempre escrita; o que muda entre
   temas é só o valor do token — transparente no claro, clara no escuro.
   ========================================================================== */

/* --- Barra lateral --------------------------------------------------------- */

/* Com logótipo, o <a> da marca leva as imagens; sem logótipo fica o «Painéis /
   Protótipo» de sempre e nada disto se aplica. */
.marca-com-logo { flex-wrap: wrap; }

.marca-logo {
  flex: 1 1 auto;
  min-width: 0;              /* deixa a imagem encolher em vez de esticar a barra */
  display: block;
  line-height: 0;            /* sem a folga que o <img> em linha deixa por baixo */
}
.marca-logo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
}
/* O logótipo do tema escuro só se vê no tema escuro (ver os dois blocos de
   tema, mais abaixo). Os seletores têm de ser tão específicos como a regra
   «.marca-logo img» aqui em cima, senão é ela que ganha e o logótipo do tema
   escuro aparecia nos dois. */
.marca-logo .logo-escuro,
.aut-logo-caixa .logo-escuro { display: none; }

/* Só há a versão do tema claro: no tema escuro ela vai sobre uma placa. No tema
   claro a placa é transparente e isto não se nota. */
.marca-logo.sem-escuro .logo-claro,
.aut-logo-caixa.sem-escuro .logo-claro {
  background: var(--logo-placa);
  border-radius: var(--raio-p);
  padding: var(--e1) var(--e3);
}

/* As três áreas da aplicação por baixo do logótipo, na sua própria linha —
   «GESTÃO DOCUMENTAL | PROCEDIMENTOS | PROTOCOLOS», com o mesmo desenho dos
   rótulos em maiúsculas pequenas da barra (o antigo «PAINÉIS»). É uma lista
   sem marcas: cada área é uma peça que não se parte, e o separador vive no FIM
   de cada área menos a última, para que, quando a barra é estreita e a linha
   se parte, ela parta no separador e nunca comece por ele. */
.marca-sub { flex: 0 0 100%; margin-top: 2px; }
.marca-areas {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 1px;
  font-size: var(--t-1);
  line-height: 1.45;
  font-weight: 500;
  color: var(--txt2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.marca-areas li { white-space: nowrap; }
.marca-areas li:not(:last-child)::after {
  content: "|";
  margin: 0 var(--e2);
  font-weight: 400;
  opacity: 0.45;
}

/* --- Página «Entrar» ------------------------------------------------------- */

.aut-marca-logo { align-items: center; }
.aut-logo-caixa { flex: 0 0 100%; line-height: 0; margin-bottom: var(--e1); }
.aut-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
}

/* --- Troca das duas versões nos dois temas escuros -------------------------
   São regras de VISIBILIDADE, não de cor: o que muda de valor entre temas é só
   o token --logo-placa, declarado no :root. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-logo .logo-claro,
  :root:not([data-tema="claro"]) .aut-logo-caixa .logo-claro { display: none; }
  :root:not([data-tema="claro"]) .marca-logo .logo-escuro,
  :root:not([data-tema="claro"]) .aut-logo-caixa .logo-escuro { display: block; }
  :root:not([data-tema="claro"]) .marca-logo.sem-escuro .logo-claro,
  :root:not([data-tema="claro"]) .aut-logo-caixa.sem-escuro .logo-claro { display: block; }
}

:root[data-tema="escuro"] .marca-logo .logo-claro,
:root[data-tema="escuro"] .aut-logo-caixa .logo-claro { display: none; }
:root[data-tema="escuro"] .marca-logo .logo-escuro,
:root[data-tema="escuro"] .aut-logo-caixa .logo-escuro { display: block; }
:root[data-tema="escuro"] .marca-logo.sem-escuro .logo-claro,
:root[data-tema="escuro"] .aut-logo-caixa.sem-escuro .logo-claro { display: block; }

/* --- Cabeçalho dos painéis impressos --------------------------------------
   No ECRÃ não existe. A regra vive dentro de «@media screen» de propósito: uma
   regra solta ganhava à do bloco de impressão, que está mais acima na folha. */
@media screen {
  .inst-impressao { display: none; }
}

/* --- Página «Instituição» -------------------------------------------------- */

.inst-formulario { max-width: 720px; }
.inst-cartao { max-width: 720px; margin-top: var(--e5); }
.inst-cartao h2 { margin-top: 0; }
.inst-cartao .nota-campo { margin-bottom: var(--e1); }

/* As duas amostras, lado a lado. */
.inst-previas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4);
  margin: var(--e4) 0 var(--e2);
}
.inst-previa {
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  padding: var(--e3) var(--e3) var(--e3);
  min-width: 0;
}
.inst-previa-rotulo {
  display: block;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt2);
  margin-bottom: var(--e3);
}
.inst-previa-tela {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: var(--e2);
  border-radius: var(--raio-p);
}
.inst-previa-tela img { max-height: 56px; max-width: 100%; width: auto; display: block; }
.inst-previa-vazio { font-size: var(--t-3); color: var(--txt2); }

/* A amostra da esquerda é clara SEMPRE e a da direita escura SEMPRE, seja qual
   for o tema de quem está a ver: é o que cada uma está a mostrar. */
.inst-previa-claro { background: var(--inst-tela-clara); border-color: var(--inst-linha-clara); }
.inst-previa-claro .inst-previa-rotulo,
.inst-previa-claro .inst-previa-vazio { color: var(--inst-rotulo-claro); }
.inst-previa-escuro { background: var(--inst-tela-escura); border-color: var(--inst-tela-escura); }
.inst-previa-escuro .inst-previa-rotulo { color: var(--inst-placa); }
.inst-previa-escuro .inst-previa-vazio { color: var(--inst-placa); }
/* Placa clara por trás do logótipo do tema claro — o mesmo que a barra lateral
   faz quando não há versão para o tema escuro. */
.inst-previa-placa img { background: var(--inst-placa); border-radius: var(--raio-p); padding: var(--e1) var(--e3); }

/* Ecrãs estreitos: o logótipo encolhe e as amostras passam a uma coluna.
   Estas regras vivem aqui, e não na secção 24 com o resto do telemóvel, porque
   as regras de tamanho do logótipo estão nesta secção: uma media query não
   acrescenta especificidade nenhuma, por isso a altura de 34 px tem de vir
   DEPOIS da altura normal, senão não ganhava. */
@media (max-width: 640px) {
  .marca-logo img { height: 34px; }
  .inst-previas { grid-template-columns: minmax(0, 1fr); }
}


/* =============================================================================
   31. TOMADA DE CONHECIMENTO (.tc-*)
   -----------------------------------------------------------------------------
   Três estados, três aspetos, e nenhuma cor nova: tudo sai dos tokens que já
   existem no :root (ver a regra da folha — nenhuma cor nasce dentro de um
   @media nem de um [data-tema]).

     .tc-faixa       — «ainda não declarou»: é uma chamada de atenção, não um
                       erro. Usa o âmbar dos avisos.
     .tc-partilhada  — a mesma faixa num computador de sala: nada a fazer aqui,
                       por isso vai para o cinzento neutro da superfície.
     .tc-feito       — «declarou a tal dia»: verde discreto, uma linha só.
     .tc-texto       — o texto da declaração. É o que a pessoa está a declarar:
                       merece respiro, um filete à esquerda e nada de decoração.
   ========================================================================== */

/* --- Faixa no topo da leitura --------------------------------------------- */
.tc-faixa {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--e5);
  padding: var(--e4) var(--e4);
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-linha);
  border-left: 4px solid var(--aviso-txt);
  border-radius: var(--raio);
  color: var(--aviso-txt);
}

.tc-faixa p { margin: 0; flex: 1 1 320px; color: inherit; }
.tc-faixa strong { color: inherit; }

.tc-faixa-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* Computador de sala: não há nada a fazer nesta página, por isso a faixa não
   grita — fica em tom neutro, com o mesmo desenho. */
.tc-partilhada {
  background: var(--sup2);
  border-color: var(--linha);
  border-left-color: var(--txt2);
  color: var(--txt);
}

/* --- «Já declarou» -------------------------------------------------------- */
.tc-feito {
  margin: 0 0 var(--e5);
  padding: var(--e3) var(--e4);
  background: var(--ok-fundo);
  border: 1px solid var(--ok-linha);
  border-left: 4px solid var(--ok-txt);
  border-radius: var(--raio);
  color: var(--ok-txt);
  font-size: var(--t-4);
}

/* --- Página de declaração ------------------------------------------------- */
.tc-cartao { max-width: 70ch; }

/* O texto que se declara. Sem aspas decorativas e sem itálico: é um texto
   jurídico para se ler devagar, não uma citação bonita. */
.tc-texto {
  margin: var(--e4) 0 var(--e5);
  padding: var(--e4) var(--e5);
  background: var(--sup2);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--acento);
  border-radius: var(--raio-p);
  color: var(--txt);
  font-size: var(--t-5);
  line-height: 1.65;
  text-align: left;
}

/* Um texto de declaração na lista da página «Tomadas de conhecimento»: o nome,
   uma pré-visualização e um bloco «Editar». Separam-se por uma linha suave. */
.tc-texto-item {
  padding: var(--e4) 0;
  border-top: 1px solid var(--linha-suave);
}
.tc-texto-item:first-of-type { border-top: 0; }
.tc-texto-item h3 { margin: 0 0 var(--e1); font-size: var(--t-6); }

/* A pré-visualização mostra só o começo do texto — o texto inteiro fica no
   editor, dentro de «Editar este texto». */
.tc-texto-previa {
  max-height: 7.5em;
  overflow: hidden;
  font-size: var(--t-4);
}

/* A caixa de confirmação (e as outras caixas desta funcionalidade) reaproveita
   o desenho das caixas das contas (.aut-lembrar): rótulo em cima, nota por
   baixo, alvo de toque grande. Aqui só se lhe dá o respiro que falta quando ela
   está sozinha num formulário. */
.tc-caixa { margin: var(--e4) 0; }

/* --- Listas e tabelas (conta, «Tomadas de conhecimento») ------------------ */
.tc-lista { list-style: none; margin: var(--e3) 0; padding: 0; }
.tc-lista li { padding: var(--e3) 0; border-bottom: 1px solid var(--linha-suave); }
.tc-lista li:last-child { border-bottom: 0; }

.tc-pendencia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e4);
  align-items: center;
  justify-content: space-between;
}

.tc-pendencia-doc { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }

.tc-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-4); }
.tc-tabela th,
.tc-tabela td {
  padding: var(--e3) var(--e3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha-suave);
}
.tc-tabela th {
  font-size: var(--t-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt2);
  white-space: nowrap;
}
.tc-tabela tr:last-child td { border-bottom: 0; }

/* Marca «exposto» na lista de pessoas e «tem declarações» na lista do apagar
   em lote. É um chip como os outros — só muda a cor de fundo. */
.tc-chip {
  background: var(--aviso-fundo);
  border-color: var(--aviso-linha);
  color: var(--aviso-txt);
}

/* Quantos faltam declarar. Zero fica no verde do chip «estado» normal; mais do
   que zero fica em âmbar, para saltar à vista na tabela. */
.tc-chip-faltam {
  background: var(--aviso-fundo);
  border-color: var(--aviso-linha);
  color: var(--aviso-txt);
  font-variant-numeric: tabular-nums;
}

/* A ligação «Declarações pendentes: N» no rodapé da barra lateral. É a única
   pendência pessoal da aplicação: fica em âmbar, com fundo e contorno, para se
   distinguir das outras ligações do grupo, que são todas iguais. */
.lat-ligacoes a.tc-pendentes,
.lat-ligacoes a.notas-novas,
.lat-ligacoes a.lembretes-aviso,
.lat-ligacoes a.mensagens-aviso {
  background: var(--aviso-fundo);
  border: 1px solid var(--aviso-linha);
  color: var(--aviso-txt);
  font-weight: 700;
}
.rodape-lat .lat-ligacoes a.tc-pendentes,
.rodape-lat .lat-ligacoes a.notas-novas,
.rodape-lat .lat-ligacoes a.lembretes-aviso { color: var(--aviso-txt); }
.lat-ligacoes a.tc-pendentes:hover,
.lat-ligacoes a.notas-novas:hover,
.lat-ligacoes a.lembretes-aviso:hover {
  background: var(--aviso-linha);
  color: var(--aviso-txt);
}

/* Ecrãs estreitos: a faixa passa a uma coluna, com o botão por baixo do texto
   e à largura toda — é o alvo de toque de 44 px que a folha exige. */
@media (max-width: 640px) {
  .tc-faixa { flex-direction: column; align-items: stretch; }
  .tc-faixa-acoes .botao { width: 100%; text-align: center; }
  .tc-pendencia { flex-direction: column; align-items: flex-start; }
}


/* =============================================================================
   32. NOTAS E SUGESTÕES (.notas-* · .nota-*)

   Na página de um painel: uma secção com o formulário para deixar uma nota e,
   para quem o pode gerir, a lista das notas recebidas. Na página «/notas»: um
   bloco por painel com as suas notas novas. E, na barra lateral, o atalho
   «Notas novas: N» realçado para quem coordena.
   ========================================================================== */

.notas-seccao {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
}
.notas-titulo { font-size: var(--t-6); margin: 0 0 var(--e3); }

.notas-form {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e4) var(--e4);
  margin-bottom: var(--e5);
}
.notas-form label { display: block; font-weight: 600; margin-bottom: var(--e2); }
.notas-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 68px;
  resize: vertical;
  padding: var(--e3) var(--e3);
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
  background: var(--bg);
  color: var(--txt);
  font: inherit;
}
.notas-form textarea:focus { border-color: var(--acento); outline: none; }
.notas-form .botao { margin-top: var(--e3); }

.notas-lista h3 { font-size: var(--t-4); margin: 0 0 var(--e3); color: var(--txt2); }

/* A lista das notas — uma por linha, sem marcadores. */
.notas-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }

.nota {
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e4);
  background: var(--sup);
}
.nota-resolvida { opacity: 0.66; }

.nota-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e1);
  font-size: var(--t-3);
  color: var(--txt2);
}
.nota-autor { font-weight: 600; color: var(--txt); }
.nota-data { font-variant-numeric: tabular-nums; }

/* O texto da nota é de quem a escreveu: preserva as quebras de linha e nunca
   deixa uma palavra comprida romper a caixa. */
.nota-texto {
  margin: 0 0 var(--e3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nota form { display: inline; }

.notas-grupo h2 { font-size: var(--t-6); margin: 0 0 var(--e3); }
.notas-grupo + .notas-grupo { margin-top: var(--e4); }

/* O atalho «Notas novas: N» no rodapé da barra lateral. Usa as cores de aviso
   para se distinguir das outras ligações, como o «Declarações pendentes» — a
   pastilha propriamente dita está declarada com a do «tc-pendentes». */
.lat-ligacoes a.notas-novas { font-weight: 600; }

/* ---------------------------------------------------------------------------
   DOSES — a vista pessoal do trabalhador («As minhas doses») e o painel do
   administrador/DPR («Doses»). Reaproveitam o cartão, a grelha e a .tc-tabela;
   estas classes tratam só do que é próprio da dose: o número grande, a lista de
   valores e a faixa de dados do relatório.
   --------------------------------------------------------------------------- */
.dose-periodo {
  font-family: var(--fonte-mono);
  font-size: var(--t-3);
  color: var(--txt2);
  margin: 2px 0 0;
}
.dose-grande {
  font-family: var(--fonte-mono);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  margin: var(--e4) 0 var(--e1);
}
.dose-unidade { font-size: 1rem; color: var(--txt2); font-weight: 400; }
.dose-lista { list-style: none; margin: var(--e4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }
.dose-lista li { font-size: var(--t-4); color: var(--txt2); }
.dose-lista strong { color: var(--txt); font-weight: 600; }

/* Faixa de dados do relatório: quatro rótulos pequenos com o seu valor. */
.dose-dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e1) 20px; margin: 0; }
.dose-dl dt { font-size: var(--t-1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--txt2); }
.dose-dl dd { margin: 2px 0 0; font-size: var(--t-4); }
.dose-meta { margin-top: var(--e4); }

/* Colunas de números da tabela de dose: alinhadas à direita e em mono. */
.dose-tabela th.num, .dose-tabela td.num { text-align: right; }
.dose-tabela td.num { font-family: var(--fonte-mono); }

@media (max-width: 620px) {
  .dose-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   DOSES — importação e associação (etapa 2b). Só o administrador e o DPR veem
   estas peças. Reaproveitam o cartão e os botões; aqui trata-se só do que é
   próprio: a lista de resultado de uma importação, os passos de ajuda e as
   linhas de «leituras por associar» com as suas ações.
   --------------------------------------------------------------------------- */

/* Resultado de uma importação, ficheiro a ficheiro. Uma barra à esquerda com a
   cor do estado (verde = importado, âmbar = já existia, vermelho = erro). */
.dose-resultados { list-style: none; margin: var(--e3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.dose-resultado {
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-left-width: 4px;
  border-radius: var(--raio-p);
  font-size: var(--t-4);
  background: var(--sup);
}
.dose-resultado-ok { border-left-color: var(--ok-linha); }
.dose-resultado-aviso { border-left-color: var(--aviso-linha); }
.dose-resultado-erro { border-left-color: var(--erro-linha); }

/* Passos de ajuda da página de importação. */
.dose-passos { margin: var(--e2) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--e2); font-size: var(--t-4); color: var(--txt2); }
.dose-passos strong { color: var(--txt); }

/* Utilitário: um espaço antes do botão que leva ao painel a seguir a uma ação. */
.dose-continuar { margin-top: var(--e4); }

/* Lista de leituras por associar (a triagem do DPR). Cada leitura é uma linha
   com o nome do relatório, o valor e o período em cima, e as ações por baixo. */
.dose-pendentes { list-style: none; margin: var(--e4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.dose-pendente {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e4) var(--e4);
  background: var(--sup);
}
.dose-pendente-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e5); }
.dose-pendente-nome { font-size: var(--t-5); }
.dose-pendente-valor { font-family: var(--fonte-mono); font-size: var(--t-3); color: var(--txt2); }
.dose-pendente-periodo { font-family: var(--fonte-mono); font-size: var(--t-3); color: var(--txt2); }
.dose-pendente-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e3); }
/* O formulário de associar é o par «escolher pessoa + Associar», lado a lado. */
.dose-associar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; }
.dose-associar select { max-width: 260px; }
.dose-rejeitar { margin: 0; }

/* ---------------------------------------------------------------------------
   DOSES — acabamento visual (etapa 2c): a barra até ao limite legal (20 mSv/ano)
   na vista do trabalhador e no painel, e o realce a vermelho das doses MEDIDAS
   acima do valor de reporte obrigatório (Hp(10) ≥ 1,34 mSv; Hp(0,07) ≥ 33,50
   mSv — números da legenda do relatório). Usa os tokens de cor existentes (ok =
   verde, erro = vermelho), que já se adaptam ao tema claro e escuro.
   --------------------------------------------------------------------------- */

/* Número grande e valor de tabela a vermelho quando é dose reportável ou acima
   do limite anual. */
.dose-grande.dose-alerta,
.dose-valor-alerta { color: var(--erro-txt); }

/* Selo explicativo por baixo da dose medida reportável (vista do trabalhador). */
.dose-selo { display: inline-block; margin: var(--e3) 0 0; padding: var(--e2) var(--e4); border-radius: var(--raio-p); font-size: var(--t-3); line-height: 1.4; }
.dose-selo-alerta { background: var(--erro-fundo); color: var(--erro-txt); border: 1px solid var(--erro-linha); }

/* Barra «até ao limite» do cartão da acumulada (vista do trabalhador). */
.dose-medidor { margin: var(--e4) 0 2px; }
.dose-medidor-trilho { height: 12px; border-radius: 999px; background: var(--linha-suave); overflow: hidden; }
.dose-medidor-fill { height: 100%; border-radius: 999px; background: var(--ok-linha); min-width: 3px; }
.dose-medidor-fill.excedido { background: var(--erro-txt); }
.dose-medidor-legenda { display: flex; justify-content: space-between; margin-top: var(--e2); font-size: var(--t-1); color: var(--txt2); }

/* Chip «reportável» ao lado da dose medida, na tabela do painel do DPR. */
.dose-chip-reportavel {
  display: inline-block; margin-left: var(--e3); padding: 2px var(--e3); border-radius: 999px;
  font-size: var(--t-1); font-weight: 600; white-space: nowrap; vertical-align: middle;
  background: var(--erro-fundo); color: var(--erro-txt); border: 1px solid var(--erro-linha);
}

/* Mini-barra da acumulada, dentro da tabela do painel: barra + valor ao lado. */
.dose-barra-mini { display: flex; align-items: center; gap: var(--e3); min-width: 150px; }
.dose-barra-mini-trilho { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--linha-suave); overflow: hidden; }
.dose-barra-mini-fill { height: 100%; border-radius: 999px; background: var(--ok-linha); min-width: 2px; }
.dose-barra-mini-fill.excedido { background: var(--erro-txt); }
.dose-barra-mini-valor { flex: none; width: 48px; text-align: right; font-size: var(--t-3); color: var(--txt2); }

/* ---------------------------------------------------------------------------
   AUTORIA — o crédito de quem a desenhou e desenvolveu (Roberto Pais).
   Discreto e coerente com o resto: o papel em maiúsculas pequenas e o nome por
   baixo, sem monograma. Aparece só no fundo da barra lateral (decisão do
   promotor, 06/09/2026: saiu do rodapé da página). Herda as cores dos tokens,
   por isso acompanha o tema claro e o escuro sem mais nada.
   --------------------------------------------------------------------------- */
.autoria { display: inline-flex; align-items: center; gap: var(--e3); text-align: left; }
.autoria-txt { display: flex; flex-direction: column; line-height: 1.2; }
.autoria-papel { font-size: var(--t-1); text-transform: uppercase; letter-spacing: 0.07em; color: var(--txt2); font-weight: 600; }
.autoria-nome { font-size: var(--t-4); font-weight: 600; color: var(--txt); }

/* Compacto, no fundo da barra lateral: um traço a separar da restante coluna. */
.autoria-compacta { gap: var(--e3); margin: var(--e4) 0 2px; padding-top: var(--e4); border-top: 1px solid var(--linha); }
.autoria-compacta .autoria-nome { font-size: var(--t-3); }
.autoria-compacta .autoria-papel { font-size: var(--t-1); }

/* --- Consolas ligadas (ficha da conta partilhada) e página de confirmação --
   Lista das consolas ligadas na ficha, e o endereço a guardar nos favoritos na
   página que se mostra depois de ligar um computador de sala. Desenho sóbrio,
   assente nos tokens já existentes; a lista empilha nome + datas de um lado e o
   botão «Desligar esta» do outro, e passa a coluna em ecrãs estreitos. */
.disp-endereco {
  margin: var(--e1) 0 var(--e4);
  padding: var(--e4) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  font-family: var(--fonte-mono);
  font-size: var(--t-5);
  line-height: 1.5;
  color: var(--txt);
  overflow-wrap: anywhere;
  user-select: all;
}
.disp-titulo { margin: 20px 0 var(--e3); font-size: var(--t-5); }
.disp-lista { list-style: none; margin: 0 0 var(--e5); padding: 0; display: grid; gap: var(--e3); }
.disp-item {
  display: flex; gap: var(--e4); align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--sup);
}
.disp-info { flex: 1 1 240px; min-width: 0; display: grid; gap: var(--e2); }
.disp-nome { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.disp-nome input[type="text"] { flex: 1 1 180px; min-width: 0; }
.disp-datas { margin: 0; }
.disp-desligar { flex: none; }

/* --------------------------------------------------------------------------
   CATEGORIA PROFISSIONAL DAS PESSOAS (rótulo descritivo — não dá acessos)
   --------------------------------------------------------------------------
   O «chip» da categoria na lista de Pessoas é propositadamente discreto: é
   informação de contexto (o que a pessoa é), não um estado. O filtro por
   categoria, no topo dessa lista, ganha só um respiro em cima e em baixo. */
.chip.cat-chip { color: var(--txt2); border-style: dashed; }
.cat-filtro { margin: var(--e4) 0 var(--e1); flex-wrap: wrap; }


/* =============================================================================
   33. LEMBRETES (.lem-*)

   Lembretes de procedimentos, ações, formações e eventos. Os quatro tipos têm
   cor própria (--lem-proc/acao/form/even, declaradas no :root e nos dois blocos
   de tema escuro). Três ecrãs: «Os meus lembretes» (cartões por grupo), o
   formulário e a tabela «Gerir lembretes». Fica bem em tema claro e escuro.
   ========================================================================= */

/* O aviso «Lembretes por ver: N» no rodapé da barra lateral. Usa a cor de aviso
   para se destacar das outras ligações, tal como «Declarações pendentes» — a
   pastilha propriamente dita está declarada com a do «tc-pendentes». */
.lat-ligacoes a.lembretes-aviso { font-weight: 600; }

/* --- Grupos («Atrasados», «Para hoje», …) -------------------------------- */
.lem-grupo-h {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: var(--e6) 0 var(--e3);
  font-size: var(--t-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--txt2);
}
.lem-pastilha { width: 9px; height: 9px; border-radius: 50%; background: var(--txt2); }
.lem-grupo-h--atr .lem-pastilha { background: var(--erro-txt); }
.lem-grupo-h--hoje .lem-pastilha { background: var(--aviso-txt); }
.lem-grupo-h--vem .lem-pastilha { background: var(--acento); }
.lem-grupo-h--feito .lem-pastilha { background: var(--ok-txt); }
.lem-conta {
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--txt2);
}

/* --- Cartões -------------------------------------------------------------- */
.lem-cartoes { display: grid; gap: var(--e4); margin-bottom: var(--e3); }
.lem-card {
  display: grid;
  grid-template-columns: 5px 1fr auto;
  gap: 0 var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--sup);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.lem-faixa { background: var(--acento); }
.lem-card.lem-t-proc .lem-faixa { background: var(--lem-proc); }
.lem-card.lem-t-acao .lem-faixa { background: var(--lem-acao); }
.lem-card.lem-t-form .lem-faixa { background: var(--lem-form); }
.lem-card.lem-t-even .lem-faixa { background: var(--lem-even); }
.lem-corpo { padding: var(--e4) 0; min-width: 0; }
.lem-lado {
  padding: var(--e4) var(--e4) var(--e4) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e3);
  justify-content: space-between;
}
.lem-linha1 { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.lem-titulo { margin: 0; font-size: var(--t-6); font-weight: 600; letter-spacing: -0.01em; color: var(--txt); }
.lem-card--feita .lem-titulo {
  color: var(--txt2);
  text-decoration: line-through;
  text-decoration-color: var(--linha);
}
.lem-desc { margin: var(--e1) 0 0; color: var(--txt2); font-size: var(--t-4); }

/* Etiqueta de tipo (a palavra «Procedimento», «Ação», …). */
.lem-tag {
  font-size: var(--t-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--raio-p);
  padding: 2px var(--e2);
  color: var(--lem-tag-txt);
  background: var(--txt2);
  white-space: nowrap;
}
.lem-tag.lem-t-proc { background: var(--lem-proc); }
.lem-tag.lem-t-acao { background: var(--lem-acao); }
.lem-tag.lem-t-form { background: var(--lem-form); }
.lem-tag.lem-t-even { background: var(--lem-even); }

/* Chips da linha de metadados (recorrência, ligação, hora, quem atribuiu). */
.lem-meta { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); align-items: center; }
.lem-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 2px var(--e3);
  font-size: var(--t-1);
  color: var(--txt2);
  background: var(--bg);
  text-decoration: none;
}
.lem-chip b { color: var(--txt); font-weight: 600; }
.lem-chip--rec { border-color: var(--acento); color: var(--acento-txt); background: var(--acento-fraco); }
a.lem-chip--link { color: var(--acento-txt); }
a.lem-chip--link:hover { text-decoration: underline; }

/* Vencimento, no lado direito do cartão. */
.lem-venc { font-size: var(--t-2); font-weight: 600; text-align: right; }
.lem-venc--atr { color: var(--erro-txt); }
.lem-venc--hoje { color: var(--aviso-txt); }
.lem-venc--vem { color: var(--txt2); }
.lem-botao-p { min-height: var(--alt-p); padding: var(--e2) var(--e4); font-size: var(--t-3); }

/* --- Mensagem de lista vazia --------------------------------------------- */
.lem-vazio {
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  padding: var(--e5) var(--e5);
  color: var(--txt2);
  background: var(--sup2);
  font-size: var(--t-4);
}

/* --- Formulário ---------------------------------------------------------- */
.lem-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e5) var(--e6);
  max-width: 820px;
  margin: 0;
  padding: 0;
  border: 0;
}
.lem-campo { min-width: 0; border: 0; margin: 0; padding: 0; }
.lem-campo--full { grid-column: 1 / -1; }
.lem-campo > label,
.lem-campo > legend,
.lem-legenda-quem {
  display: block;
  font-size: var(--t-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt2);
  margin-bottom: var(--e2);
  padding: 0;
}
.lem-campo input[type="text"],
.lem-campo input[type="date"],
.lem-campo input[type="time"],
.lem-campo input[type="number"],
.lem-campo textarea,
.lem-campo select {
  width: 100%;
  border: 1px solid var(--linha-campo);
  background: var(--bg);
  color: var(--txt);
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e4);
  font: inherit;
  font-size: var(--t-4);
}
.lem-campo textarea { min-height: 66px; resize: vertical; }
.lem-data-hora { display: flex; gap: var(--e3); }
.lem-data-hora input[type="date"] { flex: 2; }
.lem-data-hora input[type="time"] { flex: 1; min-width: 96px; }
.lem-sub { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e3); flex-wrap: wrap; }
.lem-sub label { font-size: var(--t-3); color: var(--txt2); margin: 0; }
.lem-num { width: 84px !important; flex: none; }
.lem-dica { font-size: var(--t-2); color: var(--txt2); margin: var(--e1) 0 0; }

/* Tipo em segmentos (radios escondidos, o rótulo é o botão). */
.lem-seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  overflow: hidden;
}
.lem-seg-op {
  display: flex;
  align-items: center;
  gap: var(--e2);
  border-right: 1px solid var(--linha);
  background: var(--bg);
  color: var(--txt2);
  padding: var(--e3) var(--e4);
  font-size: var(--t-3);
  cursor: pointer;
}
.lem-seg-op:last-child { border-right: 0; }
.lem-seg-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.lem-pt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lem-pt.lem-t-proc { background: var(--lem-proc); }
.lem-pt.lem-t-acao { background: var(--lem-acao); }
.lem-pt.lem-t-form { background: var(--lem-form); }
.lem-pt.lem-t-even { background: var(--lem-even); }
.lem-seg-op:has(input:checked) { color: var(--lem-tag-txt); }
.lem-seg-op.lem-t-proc:has(input:checked) { background: var(--lem-proc); }
.lem-seg-op.lem-t-acao:has(input:checked) { background: var(--lem-acao); }
.lem-seg-op.lem-t-form:has(input:checked) { background: var(--lem-form); }
.lem-seg-op.lem-t-even:has(input:checked) { background: var(--lem-even); }
.lem-seg-op:has(input:checked) .lem-pt { background: var(--lem-tag-txt); }
.lem-seg-op:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: -2px; }

/* «Quem recebe» — opções e sub-opções (checkboxes em pastilha). */
.lem-radios { display: flex; flex-direction: column; gap: var(--e3); }
.lem-op {
  display: block;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e4);
  background: var(--bg);
}
.lem-op > label { display: flex; gap: var(--e3); align-items: baseline; cursor: pointer; margin: 0; }
.lem-op b { font-size: var(--t-4); color: var(--txt); }
.lem-op small { display: inline; color: var(--txt2); font-size: var(--t-2); margin-left: var(--e2); }
.lem-op:has(> input:checked),
.lem-op--grupo:has(> label > input:checked) {
  border-color: var(--acento);
  background: var(--acento-fraco);
}
.lem-op > input[type="radio"] { margin-top: var(--e1); }
.lem-checks { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0 0 var(--e6); }
.lem-checkpill {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: var(--e1) var(--e4);
  font-size: var(--t-3);
  background: var(--sup);
  color: var(--txt2);
  cursor: pointer;
  margin: 0;
}
.lem-checkpill:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-fraco);
  color: var(--acento-txt);
  font-weight: 600;
}
/* Subcategoria: uma pastilha ligeiramente mais discreta que a categoria-mãe. */
.lem-checkpill--sub { border-style: dashed; }
.lem-nota-so-mim {
  margin: 0;
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e4);
  color: var(--txt2);
  background: var(--sup2);
  font-size: var(--t-3);
}
.lem-acoes-form { display: flex; gap: var(--e3); justify-content: flex-end; align-items: center; }

/* --- Tabela «Gerir lembretes» -------------------------------------------- */
.lem-tabela-caixa { overflow-x: auto; }
.lem-tabela { border-collapse: collapse; width: 100%; font-size: var(--t-4); }
.lem-tabela th {
  text-align: left;
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt2);
  font-weight: 600;
  padding: 0 var(--e3) var(--e2) 0;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.lem-tabela td {
  padding: var(--e3) var(--e3) var(--e3) 0;
  border-bottom: 1px solid var(--linha-suave);
  vertical-align: middle;
  color: var(--txt);
}
.lem-tabela tr:last-child td { border-bottom: 0; }
.lem-atrasada { color: var(--erro-txt); font-weight: 600; }
.lem-estado-on {
  font-size: var(--t-1);
  font-weight: 700;
  color: var(--ok-txt);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lem-estado-off {
  font-size: var(--t-1);
  font-weight: 700;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lem-acoes-td { display: flex; gap: var(--e2); align-items: center; }
.lem-acoes-td form { margin: 0; }
/* «Apagar…» dos lembretes («Os meus lembretes» e «Gerir lembretes») com a cor
   de perigo das outras ações destrutivas (.botao-perigo). O botão leva também
   .botao-linha, e «.conteudo .botao-linha» (duas classes, secção dos botões)
   ganhava a «.lem-botao-apagar» (uma só): o «Apagar…» saía com a cor do texto,
   igual ao «Editar» ao lado. Duas classes aqui, mais abaixo na folha, ganham. */
.botao-linha.lem-botao-apagar { color: var(--erro-txt); border-color: var(--erro-linha); background: var(--erro-fundo); }
.botao-linha.lem-botao-apagar:hover { color: var(--erro-txt); border-color: var(--erro-txt); }

/* --- Ecrãs estreitos ----------------------------------------------------- */

/* Alvos de toque com 44 px no formulário do lembrete. Os quadrados do próprio
   <input type=radio|checkbox> continuam com o tamanho do navegador (13 px): o
   que se toca é o RÓTULO que os envolve, e é a esse que se dá a altura. Esta
   regra vem depois da secção 24 no ficheiro, por isso ganha-lhe com a mesma
   especificidade. */
@media (max-width: 900px) {
  .lem-seg-op { min-height: 44px; }
  .lem-op { min-height: 44px; }
  .lem-op > label { min-height: 44px; }
  .lem-checkpill { min-height: 44px; }
}

@media (max-width: 760px) {
  .lem-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lem-card { grid-template-columns: 5px 1fr; }
  .lem-lado {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    padding: 0 var(--e4) var(--e4);
  }
  .lem-lado form { flex: 1; }
  .lem-lado .botao { width: 100%; text-align: center; }
}


/* =============================================================================
   34. MENSAGENS (.msg-*)

   Comunicações de cima para baixo — o espelho dos lembretes, mas de sentido
   único. Três ecrãs: «As minhas mensagens» (a caixa de entrada, cartões por
   grupo), «Ler uma mensagem» e o formulário «Nova/Editar mensagem», mais a
   tabela «Gerir mensagens». As mensagens por ler realçam-se com a cor de
   novidade (--novidade-*, a mesma marca calma da árvore lateral, já declarada
   no :root e nos dois blocos de tema escuro). Fica bem em claro e escuro.
   ========================================================================= */

/* O aviso «Mensagens por ler: N» no rodapé da barra lateral. Tem a forma de
   pastilha das outras pendências (declarada com a do «tc-pendentes»), mas na
   cor de novidade — é uma chamada de atenção, não uma falta. */
.lat-ligacoes a.mensagens-aviso {
  background: var(--novidade-fundo);
  border-color: var(--novidade-linha);
  color: var(--novidade-txt);
}
.rodape-lat .lat-ligacoes a.mensagens-aviso { color: var(--novidade-txt); }
.lat-ligacoes a.mensagens-aviso:hover {
  background: var(--novidade-linha);
  color: var(--novidade-txt);
}

/* --- Grupos («Não lidas», «Lidas recentemente») -------------------------- */
.msg-grupo-h {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: var(--e6) 0 var(--e3);
  font-size: var(--t-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--txt2);
}
.msg-pastilha { width: 9px; height: 9px; border-radius: 50%; background: var(--txt2); }
.msg-grupo-h--nova .msg-pastilha { background: var(--novidade-linha); }
.msg-grupo-h--lida .msg-pastilha { background: var(--ok-txt); }
.msg-conta {
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--txt2);
}

/* --- Cartões da caixa de entrada ----------------------------------------- */
.msg-lista { display: grid; gap: var(--e4); margin-bottom: var(--e3); }
.msg-card {
  display: grid;
  grid-template-columns: 5px 1fr auto;
  gap: 0 var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--sup);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.msg-flag { background: transparent; }
.msg-card--nova {
  background: color-mix(in oklch, var(--novidade-fundo) 45%, var(--sup));
  border-color: var(--novidade-linha);
}
.msg-card--nova .msg-flag { background: var(--novidade-linha); }
.msg-corpo {
  padding: var(--e4) 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: block;
}
.msg-corpo:hover .msg-assunto { text-decoration: underline; }
.msg-lado {
  padding: var(--e4) var(--e4) var(--e4) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e3);
  justify-content: space-between;
}
.msg-l1 { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.msg-ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--novidade-linha); flex: none;
}
.msg-assunto { margin: 0; font-size: var(--t-6); font-weight: 600; letter-spacing: -0.01em; color: var(--txt); }
.msg-card--nova .msg-assunto { font-weight: 700; }
.msg-corpo-txt {
  margin: var(--e1) 0 0;
  color: var(--txt2);
  font-size: var(--t-4);
  /* No cartão, o corpo é só uma antevisão: corta-se a duas linhas. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-data { font-size: var(--t-2); color: var(--txt2); white-space: nowrap; }
.msg-botao-p { min-height: var(--alt-p); padding: var(--e2) var(--e4); font-size: var(--t-3); }

/* --- Chips de metadados (remetente, ligação, «a partir de um lembrete») --- */
.msg-meta { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); align-items: center; }
.msg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 2px var(--e3);
  font-size: var(--t-1);
  color: var(--txt2);
  background: var(--bg);
  text-decoration: none;
}
.msg-chip b { color: var(--txt); font-weight: 600; }
.msg-chip--lembrete { border-color: var(--acento); color: var(--acento-txt); background: var(--acento-fraco); }
a.msg-chip--link { color: var(--acento-txt); }
a.msg-chip--link:hover { text-decoration: underline; }
span.msg-chip--link { color: var(--acento-txt); }

/* --- Mensagem de lista vazia --------------------------------------------- */
.msg-vazio {
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  padding: var(--e5) var(--e5);
  color: var(--txt2);
  background: var(--sup2);
  font-size: var(--t-4);
}

/* --- Ler uma mensagem ---------------------------------------------------- */
.msg-ver {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--sup);
  box-shadow: var(--sombra);
  padding: var(--e5) 20px;
  max-width: 760px;
}
.msg-ver-cab { border-bottom: 1px solid var(--linha-suave); padding-bottom: var(--e4); margin-bottom: var(--e4); }
.msg-ver-assunto { margin: 0 0 var(--e3); font-size: var(--t-7); letter-spacing: -0.01em; color: var(--txt); }
.msg-ver-meta { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.msg-ver-corpo { color: var(--txt); font-size: var(--t-5); line-height: 1.55; }
.msg-ver-corpo p { margin: 0 0 var(--e3); }
.msg-ver-vazio { color: var(--txt2); font-style: italic; }
.msg-ver-ligacoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.msg-ver-acoes {
  display: flex;
  gap: var(--e3);
  align-items: center;
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linha-suave);
}
.msg-ver-acoes form { margin: 0; }
/* «Apagar…» de uma mensagem: a mesma cor de perigo, pela mesma razão que o
   «Apagar…» dos lembretes (secção 33). */
.botao-linha.msg-botao-apagar { color: var(--erro-txt); border-color: var(--erro-linha); background: var(--erro-fundo); }
.botao-linha.msg-botao-apagar:hover { color: var(--erro-txt); border-color: var(--erro-txt); }

/* --- Formulário ---------------------------------------------------------- */
.msg-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e5) var(--e6);
  max-width: 820px;
  margin: 0;
  padding: 0;
  border: 0;
}
.msg-campo { min-width: 0; border: 0; margin: 0; padding: 0; }
.msg-campo--full { grid-column: 1 / -1; }
.msg-campo > label,
.msg-legenda-quem {
  display: block;
  font-size: var(--t-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt2);
  margin-bottom: var(--e2);
  padding: 0;
}
.msg-campo input[type="text"],
.msg-campo textarea,
.msg-campo select {
  width: 100%;
  border: 1px solid var(--linha-campo);
  background: var(--bg);
  color: var(--txt);
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e4);
  font: inherit;
  font-size: var(--t-4);
}
.msg-campo textarea { min-height: 96px; resize: vertical; }
.msg-dica { font-size: var(--t-2); color: var(--txt2); margin: var(--e1) 0 0; }
.msg-de-lembrete {
  margin: 0;
  border: 1px solid var(--acento);
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e4);
  color: var(--acento-txt);
  background: var(--acento-fraco);
  font-size: var(--t-3);
}

/* «Quem recebe» — opções e sub-opções (checkboxes em pastilha). */
.msg-radios { display: flex; flex-direction: column; gap: var(--e3); }
.msg-op {
  display: block;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  padding: var(--e3) var(--e4);
  background: var(--bg);
}
.msg-op > label { display: flex; gap: var(--e3); align-items: baseline; cursor: pointer; margin: 0; }
.msg-op b { font-size: var(--t-4); color: var(--txt); }
.msg-op small { display: inline; color: var(--txt2); font-size: var(--t-2); margin-left: var(--e2); }
.msg-op:has(> input:checked),
.msg-op--grupo:has(> label > input:checked) {
  border-color: var(--acento);
  background: var(--acento-fraco);
}
.msg-op > input[type="radio"] { margin-top: var(--e1); }
.msg-checks { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0 0 var(--e6); }
.msg-checkpill {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: var(--e1) var(--e4);
  font-size: var(--t-3);
  background: var(--sup);
  color: var(--txt2);
  cursor: pointer;
  margin: 0;
}
.msg-checkpill:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-fraco);
  color: var(--acento-txt);
  font-weight: 600;
}
.msg-checkpill--sub { border-style: dashed; }

/* Bloco «Email» — desligado nesta fase (o envio liga-se na segunda fase). */
.msg-email-bloco {
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  padding: var(--e4) var(--e4);
  background: var(--sup2);
}
/* Desligado: esbatem-se a caixa e o título, que é o que não se pode usar. A
   explicação por baixo («Disponível quando…») fica com a cor inteira — é texto
   para ler, e com a opacidade no bloco todo caía para 3,01:1 no tema claro e
   4,31:1 no escuro. */
.msg-email-bloco--desligado .msg-email-cx input,
.msg-email-bloco--desligado .msg-email-cx b { opacity: 0.75; }
.msg-email-cx { display: flex; gap: var(--e3); align-items: flex-start; margin: 0; cursor: not-allowed; }
/* Quando o envio está configurado, a caixa fica ativa (clicável). */
.msg-email-cx--ativo { cursor: pointer; }
.msg-email-cx input { margin-top: 2px; }
.msg-email-cx b { font-size: var(--t-4); color: var(--txt); }
.msg-email-cx small { display: block; color: var(--txt2); font-size: var(--t-2); margin-top: var(--e1); }
/* Escolha «só um alerta» vs «incluir o texto» (só quando o admin o permite). */
.msg-email-modo { display: flex; flex-direction: column; gap: var(--e2); margin: var(--e3) 0 0 27px; }
.msg-email-op { display: flex; gap: var(--e3); align-items: flex-start; margin: 0; cursor: pointer; }
.msg-email-op input { margin-top: 2px; }
.msg-email-op b { font-size: var(--t-3); color: var(--txt); }
.msg-email-op small { display: block; color: var(--txt2); font-size: var(--t-2); margin-top: 2px; }
.msg-email-nota { margin-top: var(--e3); }
.msg-acoes-form { display: flex; gap: var(--e3); justify-content: flex-end; align-items: center; }

/* --- Tabela «Gerir mensagens» -------------------------------------------- */
.msg-tabela-caixa { overflow-x: auto; }
.msg-tabela { border-collapse: collapse; width: 100%; font-size: var(--t-4); }
.msg-tabela th {
  text-align: left;
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt2);
  font-weight: 600;
  padding: 0 var(--e3) var(--e2) 0;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.msg-tabela td {
  padding: var(--e3) var(--e3) var(--e3) 0;
  border-bottom: 1px solid var(--linha-suave);
  vertical-align: middle;
  color: var(--txt);
}
.msg-tabela tr:last-child td { border-bottom: 0; }
.msg-tabela-assunto { color: var(--txt); text-decoration: none; }
.msg-tabela-assunto:hover { text-decoration: underline; }
.msg-tabela-email { color: var(--txt2); }

/* Barra de progresso «lida por N/M». */
.msg-prog { display: inline-flex; align-items: center; gap: var(--e2); white-space: nowrap; }
.msg-prog-barra {
  width: 70px;
  height: 6px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
}
.msg-prog-barra i { display: block; height: 100%; background: var(--ok-txt); }

.msg-acoes-td { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.msg-acoes-td form { margin: 0; }

/* --- Ecrãs estreitos ----------------------------------------------------- */

/* Alvos de toque com 44 px no formulário da mensagem — a mesma regra do
   formulário do lembrete: a altura vai ao RÓTULO, não ao quadrado do input. */
@media (max-width: 900px) {
  .msg-op { min-height: 44px; }
  .msg-op > label { min-height: 44px; }
  .msg-checkpill { min-height: 44px; }
  .msg-email-cx, .msg-email-op { min-height: 44px; }
  /* Os botões pequenos das mensagens, como os dos lembretes (secção 41): a
     lista da secção 24 já pedia 44 px para .msg-botao-p, mas a altura normal
     (36 px), declarada acima nesta secção, ganhava — medido a 390 px:
     «Abrir e marcar como lida», «Marcar como não lida», «Editar» e
     «Apagar…» tinham 36 px. Aqui, mais abaixo, ganha a de 44. */
  .msg-botao-p { min-height: 44px; }
}

@media (max-width: 760px) {
  .msg-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .msg-card { grid-template-columns: 5px 1fr; }
  .msg-lado {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    padding: 0 var(--e4) var(--e4);
  }
  .msg-lado form { flex: 1; }
  .msg-lado .botao { width: 100%; text-align: center; }
  /* A data e o botão da direita partilham a linha; quando não cabem, o botão
     passa para a linha de baixo e ocupa-a. Sem isto o «Abrir e marcar como
     lida» (uma ligação, fora de <form>) saía do cartão — medido: 4 px a
     390 px, 74 px a 320 px; o «Marcar como não lida», 33 px a 320 px. */
  .msg-lado { flex-wrap: wrap; }
  .msg-lado > .botao { flex: 1 1 auto; width: auto; }
}


/* =============================================================================
   35. E-MAIL — DEFINIÇÕES DE ENVIO (.email-*)

   A página «E-mail» só do administrador. Reaproveita o cartão, o formulário e
   as caixas de mensagem; aqui fica só a linha de estado do envio, que não é um
   aviso nem um erro — é informação permanente da página, e por isso tem um
   desenho próprio (a mesma anatomia das caixas: filete esquerdo de 4 px, raio
   pequeno, 14 px) em cor neutra.
   ========================================================================= */

.email-estado {
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-left-width: 4px;
  border-radius: var(--raio-p);
  background: var(--sup2);
  color: var(--txt);
  font-size: var(--t-4);
}


/* =============================================================================
   36. ESCOLHER FOLHAS DO EXCEL (.folhas-*)

   Página «Escolher as folhas do Excel»: uma caixa por folha do livro, com o
   que ela tem lá dentro (registos, colunas, cabeçalhos) e os controlos para
   dizer o que fazer com ela.

   Nenhuma cor nova: tudo sai dos tokens que já existem no :root (ver a regra
   da folha — nenhuma cor nasce dentro de um @media nem de um [data-tema]).

     .folhas-cartao     — a caixa de uma folha (um <fieldset>).
     .folhas-legenda    — o nome da folha, a negrito, mais os chips de estado.
     .folhas-dados      — a linha «N registos · M colunas».
     .folhas-preambulo  — o título que alguém escreveu por cima da tabela.
     .folhas-cabecalhos — os nomes das colunas, em chips que passam de linha.
     .folhas-modos      — as três opções, uma por linha, cada uma com a nota.
     .folhas-campos     — os três dropdowns lado a lado (um por linha ao telemóvel).
   ========================================================================= */

/* Esta página não é um formulário de campos estreitos — é uma lista de cartões,
   um por folha. Por isso larga a largura de `.formulario` e usa a coluna toda. */
.formulario.folhas-formulario { max-width: 100%; }

.folhas-cartao {
  /* Um <fieldset> tem `min-width: min-content` de origem: sem este zero, um
     cabeçalho comprido esticava a caixa e punha a página a rolar de lado. */
  min-width: 0;
  margin: var(--e4) 0;
  padding: var(--e4) var(--e4) var(--e4);
  border: 1px solid var(--linha-suave);
  border-radius: var(--raio);
  background: var(--sup);
}

.folhas-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  align-items: center;
  padding: 0 var(--e2);
}

.folhas-nome {
  font-weight: 700;
  font-size: var(--t-6);
  overflow-wrap: anywhere;
}

.folhas-dados {
  margin: var(--e2) 0 0;
  color: var(--txt2);
  font-size: var(--t-3);
  font-variant-numeric: tabular-nums;
}

.folhas-preambulo {
  margin: var(--e2) 0 0;
  color: var(--txt2);
  font-style: italic;
}

.folhas-cabecalhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  padding: 0;
}

/* Há cabeçalhos de coluna com uma frase inteira lá dentro. O chip parte a
   palavra em vez de sair do ecrã — é o que garante o telemóvel sem rolar. */
.folhas-legenda .etiqueta,
.folhas-cabecalhos .etiqueta {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* As três opções: cada uma numa linha, com a nota por baixo do rótulo e
   alinhada com ele (a margem da esquerda é a largura do próprio botão). */
.folhas-modos {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin: var(--e3) 0 0;
}

.folhas-modos label {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

.folhas-modos input[type="radio"] {
  margin: var(--e1) 0 0;
  flex: 0 0 auto;
}

.folhas-modos .nota-campo {
  display: block;
  margin: var(--e1) 0 0;
}

/* Os três dropdowns lado a lado. `min-width: 0` é o que impede uma opção
   comprida (o caminho de uma secção funda) de esticar a grelha e pôr a página
   a rolar de lado. */
.folhas-campos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e3) var(--e4);
  margin: var(--e4) 0 0;
}

.folhas-campos p,
.folhas-campos .folhas-campo {
  margin: 0;
  min-width: 0;
}

/* A nota da «Secção sugerida» (sugestão num tema onde a conta não pode
   editar) vai dentro da caixa desse campo, por baixo da lista — na mesma
   coluna da grelha, no computador e no telemóvel. A regra de cima tira as
   margens aos <p>; a nota recupera a sua. */
.folhas-campos .folhas-campo .nota-campo { margin-top: var(--e1); }

.folhas-campos select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* O cartão «Se um painel com o mesmo título já existir», no topo da página.
   É um `.folhas-cartao` como os outros — só se destaca do fundo, por ser uma
   pergunta sobre a importação inteira e não sobre uma folha. */
.folhas-repetidos { background: var(--sup2); }

@media (max-width: 640px) {
  .folhas-campos { grid-template-columns: minmax(0, 1fr); }
}


/* =============================================================================
   37. ORGANIZAÇÃO — AGRUPAR E PERMISSÕES
   -----------------------------------------------------------------------------
   Duas coisas novas na organização da árvore:

   · «Agrupar numa subsecção…» — a página de confirmação do lote ganha, quando
     o modo é «agrupar», um conjunto de perguntas: subsecção nova (nome + onde
     nasce) ou secção que já existe. São botões de rádio com os campos de cada
     escolha por baixo, sempre visíveis: sem JavaScript, esconder os campos da
     opção não escolhida deixava a página impossível de preencher.

   · «Só leitura» — na página «Organizar secções», as linhas da árvore que não
     são de quem está a ver (um gestor de área vê a árvore toda, mas só
     organiza os temas que gere) ficam sem controlos e levam esta etiqueta. É
     um recado, e não uma tranca: quem tranca é o servidor.

   Sem cores novas: usa os mesmos tokens do resto da folha.
   ========================================================================== */

.agrupar-escolha {
  margin: 0 0 18px;
  padding: 14px 16px 6px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--sup);
  text-align: left;
}

.agrupar-escolha legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
}

/* Cada escolha: o rádio com o nome em cima, os campos dela por baixo. */
.agrupar-opcao { margin: 0 0 14px; }

.agrupar-radio {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 6px;
  cursor: pointer;
}

.agrupar-radio input { margin: 0; }

/* Os campos ficam recuados para se ver que pertencem ao rádio de cima. */
.agrupar-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  padding-left: 26px;
}

.agrupar-campos label {
  font-size: 13px;
  color: var(--txt2);
}

.agrupar-campos input[type="text"] { min-width: 220px; }
.agrupar-campos select { max-width: 100%; }

.agrupar-campos .nota-campo {
  flex-basis: 100%;
  margin: 2px 0 0;
}

/* O que correu mal, por palavras, sem perder o que já estava preenchido. */
.agrupar-erro {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--erro-linha);
  border-radius: var(--raio-p);
  background: var(--erro-fundo);
  color: var(--erro-txt);
  font-weight: 600;
}

/* Linha da árvore que esta conta não organiza (ver o cabeçalho da secção). */
.org-so-leitura {
  background: var(--sup2);
  color: var(--txt2);
}

/* Ecrãs estreitos: os campos passam a ocupar a largura toda e o recuo
   desaparece — com 320 px não há espaço para recuos decorativos. */
@media (max-width: 640px) {
  .agrupar-campos { padding-left: 0; }
  .agrupar-campos input[type="text"],
  .agrupar-campos select { width: 100%; }
}


/* =============================================================================
   38. MODO ORGANIZAR NA BARRA LATERAL (.org-lat-*)
   -----------------------------------------------------------------------------
   O atalho «Organizar», no fundo da barra do lado, liga um MODO: cada linha da
   árvore que aquela conta pode organizar ganha, por baixo do nome, uma fila de
   controlos pequenos — renomear, criar uma secção dentro, subir, descer, mover
   e apagar. Os painéis ganham os seus, mais uma caixa de assinalar para
   agrupar vários de uma só vez. Quem desenha tudo isto é o
   static/js/organizar.js, e só com o modo ligado: desligado, não existe aqui
   um único elemento a mais.

   AS DECISÕES DE DESENHO, e porquê assim:

   · A FILA FICA POR BAIXO DO NOME, não ao lado. A barra tem 268 px
     (--largura-lateral) e os nomes das secções já passam para a linha de baixo
     quando são compridos; com os controlos à direita sobrava meia dúzia de
     letras para o nome. Por baixo, a linha continua a ler-se inteira e os
     controlos cabem todos numa fila só.

   · A FILA ALINHA COM A LINHA A QUE PERTENCE. O recuo copia o do nível
     (--arv-n1 … --arv-n3, mais --passo por cada subsecção mais funda, que o
     JavaScript traz da linha no «--nivel»), e o filete vertical de --arv-guia
     continua a passar: sem isso, a fila parecia solta no meio da árvore.

   · OS FORMULÁRIOS EM LINHA SUBSTITUEM O NOME. Renomear, criar e mover abrem
     um formulário no lugar da própria linha (a linha esconde-se com
     .org-lat-escondido). Numa barra estreita não há espaço para as duas coisas
     ao mesmo tempo, e ver o campo exatamente onde estava o nome diz melhor do
     que qualquer rótulo o que é que se está a mudar.

   · NO TELEMÓVEL (<= 900 px, a barra deslizante) A FILA ESTÁ FECHADA. Cada
     linha mostra só o botão «Mais ações»; carregar nele abre a fila daquela
     linha e fecha as outras. Cinco alvos de 44 px por linha enchiam o ecrã de
     uma barra de 320 px.

   · OS ÍCONES SÃO DESENHOS SVG EM LINHA, com a cor herdada do botão
     («currentColor»): acompanham o tema claro e o tema escuro sem uma única
     cor escrita aqui, e cada botão diz quem é no «aria-label».

   · SEM CORES NOVAS: tudo sai dos tokens do :root (--linha, --sup, --txt2,
     --acento…), e nenhuma cor nasce dentro de um @media, como manda o
     cabeçalho desta folha.
   ========================================================================== */

/* --- A fila de controlos de uma linha -------------------------------------- */

.org-lat-acoes {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 1px 6px 4px var(--arv-n3);
  /* O mesmo filete vertical das linhas da árvore, para a fila não flutuar. */
  background-image: linear-gradient(var(--linha), var(--linha));
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: var(--arv-guia) 0;
}

/* O recuo é o do nível da linha que está mesmo por cima. Nas secções e nos
   painéis acrescenta-se --passo por cada nível de profundidade, exatamente
   como nas linhas (o «--nivel» é copiado pelo organizar.js). */
.tema + .org-lat-acoes { padding-left: var(--arv-n1); background-image: none; }
.mod + .org-lat-acoes { padding-left: var(--arv-n2); }
.sub + .org-lat-acoes,
.item + .org-lat-acoes {
  padding-left: calc(var(--arv-n3) + var(--nivel, 0) * var(--passo));
  background-position: calc(var(--arv-guia) + var(--nivel, 0) * var(--passo)) 0;
}
.item.var + .org-lat-acoes {
  padding-left: calc(var(--arv-n3) + (var(--nivel, 0) + 1) * var(--passo));
}

/* A modalidade desenha um filete até ao que tem lá dentro, e o filete nasce da
   regra «modalidade seguida do ramo» (secção 19). Com a fila de controlos pelo
   meio deixavam de ser vizinhos: esta regra repõe o filete no modo Organizar. */
.lateral.organizar .arvore .mod:has(+ .org-lat-acoes + .ramo:not([hidden])) {
  background-image: linear-gradient(var(--linha), var(--linha));
  background-repeat: no-repeat;
  background-size: 1px 50%;
  background-position: var(--arv-guia) 100%;
}

.org-lat-botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

/* A linha (ou o painel) que está a ser renomeada some-se enquanto o formulário
   está aberto: o campo fica exatamente no lugar dela. */
.lateral .arvore .org-lat-escondido { display: none; }

/* --- Os botões pequenos ---------------------------------------------------- */

.org-lat-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 24px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--txt2);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.org-lat-b:hover {
  border-color: var(--linha);
  background: var(--sup);
  color: var(--acento-txt);
  text-decoration: none;
}
.org-lat-ico {
  display: block;
  width: 15px;
  height: 15px;
  flex: none;
}

/* Assinalar um painel para o agrupar ou mover com outros. */
.org-lat-marca {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0 3px 0 0;
  accent-color: var(--acento);
  cursor: pointer;
}

/* «Mais ações» — só existe no telemóvel (ver o fim desta secção). */
.org-lat-mais { display: none; }

/* --- Os formulários em linha ----------------------------------------------- */

.org-lat-slot {
  flex: 1 1 100%;
  min-width: 0;
}
.org-lat-em-forma > .org-lat-botoes,
.org-lat-em-forma > .org-lat-mais { display: none; }

.org-lat-forma {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  padding: 2px 0;
}
.org-lat-campo {
  flex: 1 1 100%;
  min-width: 0;
  display: block;
}
.org-lat-forma input[type="text"],
.org-lat-forma select {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid var(--linha-campo);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  font: inherit;
  font-size: var(--t-3);
}
.org-lat-forma-acoes {
  flex: 1 1 100%;
  display: flex;
  gap: 4px;
}
.org-lat-guardar,
.org-lat-cancelar {
  min-height: 26px;
  padding: 3px 10px;
  border-radius: var(--raio-p);
  font: inherit;
  font-size: var(--t-3);
  cursor: pointer;
}
.org-lat-guardar {
  border: 1px solid var(--acento);
  background: var(--acento);
  color: var(--acento-contra);
  font-weight: 600;
}
.org-lat-cancelar {
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--txt2);
}
.org-lat-cancelar:hover { background: var(--sup); color: var(--txt); }

/* Um recado curto dentro do formulário (a lista das secções a chegar, ou a
   dizer que não chegou). */
.org-lat-nota {
  flex: 1 1 100%;
  margin: 2px 0;
  font-size: var(--t-3);
  color: var(--txt2);
}

/* --- A linha de estado, por cima da árvore ---------------------------------- */

/* A caixa dos comandos da árvore («Fechar tudo») passa a ter duas linhas: o
   comando de sempre em cima, o estado do modo por baixo, à largura toda. */
.lateral.organizar .arv-comandos { flex-wrap: wrap; }

.org-lat-estado {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  margin-top: 2px;
  padding: 6px 8px;
  border: 1px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--acento-fraco);
  color: var(--acento-txt);
  font-size: var(--t-3);
  text-align: left;
}
.org-lat-estado-txt { flex: 1 1 100%; font-weight: 600; }
.org-lat-estado-lig { color: var(--acento-txt); }
.org-lat-estado-fechar {
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--acento);
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--acento-txt);
  font: inherit;
  font-size: var(--t-3);
  cursor: pointer;
}
.org-lat-estado-fechar:hover { background: var(--sup); }

/* --- A barra dos painéis assinalados ---------------------------------------- */

/* Fica entre a árvore e o rodapé da barra: à vista, sem tapar nada e sem sair
   do ecrã quando a árvore rola. */
.org-lat-lote {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 8px 6px;
  padding: 8px;
  border: 1px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--acento-fraco);
  color: var(--acento-txt);
  font-size: var(--t-3);
}
.org-lat-lote-conta { flex: 1 1 100%; font-weight: 600; }
.org-lat-lote-b,
.org-lat-lote-limpar {
  min-height: 28px;
  padding: 4px 10px;
  border-radius: var(--raio-p);
  font: inherit;
  font-size: var(--t-3);
  cursor: pointer;
}
.org-lat-lote-b {
  border: 1px solid var(--acento);
  background: var(--acento);
  color: var(--acento-contra);
  font-weight: 600;
}
.org-lat-lote-limpar {
  border: 1px solid var(--acento);
  background: transparent;
  color: var(--acento-txt);
}
.org-lat-lote-limpar:hover { background: var(--sup); }

/* --- «+ Novo tema», no fim da árvore ---------------------------------------- */

.org-lat-novo-tema {
  flex: none;
  margin: 10px 0 4px;
  padding: 0 6px;
}
.org-lat-novo-tema-b {
  width: 100%;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px dashed var(--linha);
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--txt2);
  font: inherit;
  font-size: var(--t-3);
  text-align: left;
  cursor: pointer;
}
.org-lat-novo-tema-b:hover {
  border-color: var(--acento);
  color: var(--acento-txt);
}

/* --- Telemóvel e ecrãs estreitos --------------------------------------------
   A barra deslizante tem min(86vw, 320px): cinco alvos de 44 px por linha não
   cabem. Em vez da fila sempre aberta, cada linha mostra um botão «Mais ações»
   que abre a sua (e fecha as outras). Só medidas — nenhuma cor nasce aqui
   dentro, como manda o cabeçalho desta folha. */

@media (max-width: 900px) {
  .org-lat-mais {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
  }
  /* Fechada: só se vê o «Mais ações». Aberta: a fila toda, com alvos de 44 px. */
  .org-lat-acoes:not(.aberta) > .org-lat-botoes { display: none; }
  .org-lat-acoes.aberta > .org-lat-botoes { gap: 4px; }
  .org-lat-acoes.aberta .org-lat-b {
    min-width: 44px;
    min-height: 44px;
  }
  .org-lat-ico { width: 18px; height: 18px; }
  .org-lat-marca { width: 22px; height: 22px; margin-right: 8px; }
  .org-lat-guardar,
  .org-lat-cancelar,
  .org-lat-estado-fechar,
  .org-lat-lote-b,
  .org-lat-lote-limpar,
  .org-lat-novo-tema-b { min-height: 44px; }
  .org-lat-forma input[type="text"],
  .org-lat-forma select { min-height: 44px; }
}

/* --- O atalho «Organizar» quando o modo está ligado -------------------------
   O atalho é um interruptor (leva «aria-pressed»), e um interruptor tem de se
   ver ligado: ganha o mesmo destaque da linha de estado, para não haver dúvida
   de que a barra está em modo de organização. Sem JavaScript o atributo nunca
   aparece e o atalho fica exatamente como sempre esteve. */
.rodape-lat a.rodape-atalho[aria-pressed="true"] {
  border-color: var(--acento);
  background: var(--acento-fraco);
  color: var(--acento-txt);
  font-weight: 600;
}

/* =============================================================================
   39. TRIAGEM POR GRUPOS E PASSOS DA IMPORTAÇÃO
   =============================================================================
   Três acrescentos ao ecrã de triagem e ao de importação, todos de desenho:
   o cabeçalho que separa as linhas por ficheiro (ou por folha do Excel), a
   caixa dobrável da variante dentro de cada linha, e os cabeçalhos numerados
   dos passos da página «Importar ficheiros». Nenhum deles esconde um controlo:
   os campos da variante continuam sempre no formulário, mesmo dobrados.
   ========================================================================== */

/* Cabeçalho de grupo da triagem: «livro.xlsx › folha TC — 27 protocolos».
   Fica colado ao topo da lista que encabeça, com espaço acima para se ver
   onde uma folha acaba e a seguinte começa. */
.triagem-grupo {
  margin: var(--e5) 0 var(--e2);
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--txt);
}

.triagem-grupo:first-of-type { margin-top: var(--e3); }

/* A contagem do grupo é informação de apoio: mais leve do que o nome. */
.triagem-grupo-conta {
  font-weight: 400;
  font-size: var(--t-2);
  color: var(--txt2);
}

/* «É variante de outro painel?» — os dois campos da variante, dobrados. A
   maior parte dos painéis não é variante de nenhum outro, e tê-los sempre
   abertos dava a cada linha dois campos a mais para ler. Abre sozinho quando
   há sugestão de variante ou quando já está escolhida (atributo `open`). */
.triagem-variante {
  grid-column: 1 / -1;
  margin-top: var(--e2);
  border-top: 1px dashed var(--linha);
  padding-top: var(--e2);
}

.triagem-variante > summary {
  cursor: pointer;
  font-size: var(--t-2);
  color: var(--txt2);
  padding: var(--e1) 0;
}

.triagem-variante[open] > summary { color: var(--txt); }

/* Cabeçalhos numerados dos passos da página «Importar ficheiros». O formulário
   continua a ser um só — isto é apenas a marca de onde cada passo começa. */
.passo-importar {
  margin: var(--e5) 0 var(--e2);
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-3);
  font-weight: 600;
}

.passo-importar:first-of-type { margin-top: var(--e3); }


/* =============================================================================
   40. PROTOCOLOS DE TC — ficha rápida, secções, fichas das regras
       transversais e cabeçalho compacto (.ptc-*) · «Uniformizar decimais»
       (.ptc-dec-*)
   -----------------------------------------------------------------------------
   Só nos painéis do tipo «Protocolo TC» (apresentacao_tc.py desenha a
   marcação; static/js/painel-tc.js dá o comportamento). O conteúdo guardado
   não muda: é apresentação. Todos os outros painéis ficam como estavam — nada
   aqui apanha um painel que não traga as classes .ptc-*.

   · .ptc-ficha — a ficha rápida no topo do corpo: Exam Card numa linha e três
     grupos («Aquisição», «Contraste», «Temporização e fases») em três colunas
     (uma no telemóvel). Os «Não aplicável.» juntam-se numa linha discreta
     (.ptc-na) e um valor comprido ocupa a linha inteira no fim (.ptc-longos).
   · .ptc-seccao — cada secção de nível 3. O título leva âncora e recua
     --ptc-topo (a altura da barra de atalhos presa no topo, medida pelo
     JavaScript; sem ele valem os valores por omissão) para nunca ficar tapado.
     Abre e fecha pelo título (.ptc-sec-botao, um botão dentro do <h3>); o
     conteúdo é .ptc-sec-corpo. Tudo o que é recolher (seta, linha de
     pré-visualização .ptc-sec-previa, botões «Abrir todas»/«Fechar todas»
     .ptc-seccoes-cmd) só aparece com .ptc-recolhivel, a marca que o
     JavaScript põe no corpo: sem ele o título parece o de sempre e tudo fica
     aberto. Os subtítulos de nível 4 (um por coluna do Excel) são mais
     pequenos, na cor da modalidade.
   · .ptc-rt — a ficha de uma regra transversal no meio do texto: um botão com
     o código; o nome completo vai no nome acessível e só se vê no papel.
     .ptc-rt-janela é a janela pequena que o botão abre.
   · .ptc-painel — o <main> da página de um protocolo de TC: no telemóvel o
     cabeçalho fica compacto (migalhas numa linha, título a 20 px, etiquetas
     numa linha que desliza).
   · Alvos de toque: as ligações e as fichas que vivem no meio de uma linha de
     texto ganham, a ≤ 900 px, uma área de toque de 44 px de altura (um
     ::after transparente) sem mudar a altura da linha.
   ========================================================================== */

/* --- Secções de nível 3 e recuo das âncoras ------------------------------- */
.corpo-painel .ptc-seccao > h3[id],
.ptc-ficha { scroll-margin-top: var(--ptc-topo, 96px); }

/* O título da secção é o primeiro filho do invólucro; sem isto herdava a
   margem apertada de «primeiro filho do cartão» e as secções colavam-se. */
.corpo-painel .ptc-seccao > .blk-h:first-child { margin-top: 20px; }
.corpo-painel .cartao > .ptc-seccao:first-child > .blk-h:first-child { margin-top: var(--e1); }

/* --- Secções que abrem e fecham pelo título --------------------------------
   O botão ocupa o título todo. Sem JavaScript (sem .ptc-recolhivel) não tem
   aspeto de botão: é o texto do título de sempre, e o conteúdo está aberto.
   O conteúdo fechado leva hidden="until-found", que o navegador desenha com
   «content-visibility: hidden» para a pesquisa da página o continuar a
   encontrar: por isso .ptc-sec-corpo nunca recebe «display», margens nem
   enchimento próprios — um «display» desfazia o «hidden» simples (o recurso
   dos navegadores sem «until-found») e um enchimento deixava um espaço vazio
   no lugar do texto fechado. */
.ptc-sec-botao {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
}
.ptc-sec-nome { min-width: 0; }
.ptc-sec-previa { display: none; }

/* Com o JavaScript: uma linha fina entre secções, o título mais junto dela e
   o filete da modalidade desenhado dentro do botão, com a seta à direita. */
.corpo-painel.ptc-recolhivel .ptc-seccao { border-top: 1px solid var(--linha-suave); }
.corpo-painel.ptc-recolhivel .cartao > .ptc-seccao:first-child { border-top: 0; }
.corpo-painel.ptc-recolhivel .ptc-seccao > h3.blk-h { margin: 0; }
.corpo-painel.ptc-recolhivel .ptc-seccao > h3.blk-h::before { display: none; }
.corpo-painel.ptc-recolhivel .ptc-sec-corpo > :first-child { margin-top: var(--e1); }
.ptc-recolhivel .ptc-sec-botao {
  grid-template-columns: 3px minmax(0, 1fr) auto;
  column-gap: var(--e3);
  min-height: var(--alt-p);
  padding: var(--e2) 0;
  cursor: pointer;
}
.ptc-recolhivel .ptc-sec-botao::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 3px;
  height: 12px;
  border-radius: 999px;
  background: var(--acento);
}
.ptc-recolhivel .ptc-sec-nome { grid-column: 2; grid-row: 1; }
/* A seta: para baixo quando a secção está fechada, para cima quando aberta. */
.ptc-recolhivel .ptc-sec-botao::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  width: 8px;
  height: 8px;
  margin: 0 var(--e2) 0 var(--e3);
  border-right: 2px solid var(--txt2);
  border-bottom: 2px solid var(--txt2);
  transform: translateY(-2px) rotate(45deg);
}
.ptc-recolhivel .ptc-sec-botao[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.ptc-recolhivel .ptc-sec-botao:hover .ptc-sec-nome { color: var(--acento-txt); }
.ptc-recolhivel .ptc-sec-botao:hover::after { border-color: var(--acento-txt); }
/* Fechada: uma linha com o início do texto, cortada com reticências. O texto
   vem do atributo data-previa e é escrito aqui, pelo CSS: assim a pesquisa da
   página (Ctrl+F) não o encontra e vai direta ao texto da secção fechada, que
   o navegador abre (com a pré-visualização em texto, a primeira ocorrência
   ficava nesta linha e a secção não abria). */
.ptc-recolhivel .ptc-fechada .ptc-sec-previa {
  display: block;
  grid-column: 2 / -1;
  grid-row: 2;
  min-width: 0;
  margin-top: 2px;
  font-size: var(--t-3);
  font-weight: 400;
  line-height: 1.4;
  color: var(--txt2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptc-recolhivel .ptc-fechada .ptc-sec-previa::before { content: attr(data-previa); }

/* «Abrir todas» e «Fechar todas» (e a frase que diz como funciona). */
.ptc-seccoes-cmd { display: none; }
.ptc-recolhivel .ptc-seccoes-cmd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
  margin: 0 0 var(--e4);
}
.ptc-seccoes-nota,
.ptc-seccoes-aviso { flex: 1 1 280px; margin: 0; font-size: var(--t-3); color: var(--txt2); }
/* A frase dos navegadores sem «until-found» ocupa a linha toda, no fim. */
.ptc-seccoes-aviso { flex-basis: 100%; order: 1; }
.ptc-seccoes-botoes { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* --- Subtítulos de nível 4 dentro de uma secção ----------------------------
   Um por coluna do Excel, nas secções que juntam várias (o contraste, a
   consola, a reconstrução). Mais pequenos e na cor da modalidade, para não
   competirem com o título da secção. */
.corpo-painel .ptc-seccao h4.blk-h {
  margin: var(--e4) 0 0;
  font-size: var(--t-3);
  color: var(--acento-txt);
}
.corpo-painel .ptc-seccao h4.blk-h::before { width: 8px; height: 2px; }
.corpo-painel .ptc-seccao h4.blk-h + .blk-p,
.corpo-painel .ptc-seccao h4.blk-h + .blk-lista { margin-top: var(--e1); }

/* --- Ficha rápida ---------------------------------------------------------- */
.ptc-ficha {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4) var(--e4);
  margin: 0 0 var(--e4);
}
.ptc-ficha-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e1) var(--e3);
  margin: 0 0 var(--e3);
}
.ptc-ficha-cab h2 {
  margin: 0;
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--txt2);
}
.ptc-ficha-cab p { margin: 0; font-size: var(--t-2); color: var(--txt2); }
.ptc-ficha dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--e1) var(--e3);
  align-items: baseline;
}
.ptc-ficha dt { font-size: var(--t-3); color: var(--txt2); }
.ptc-ficha dd {
  margin: 0;
  font-size: var(--t-4);
  font-weight: 600;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ptc-ficha dl.ptc-exame {
  gap: 2px var(--e3);
  margin: 0 0 var(--e3);
  padding: 0 0 var(--e3);
  border-bottom: 1px solid var(--linha-suave);
}
.ptc-grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.ptc-grupo { min-width: 0; }
.ptc-grupo > h3 {
  margin: 0 0 var(--e2);
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento-txt);
}
.ptc-grupo > h3 a { color: var(--acento-txt); text-decoration: none; }
.ptc-grupo > h3 a:hover { text-decoration: underline; }
.ptc-ficha dd.ptc-remete { font-weight: 400; font-size: var(--t-3); color: var(--txt2); }
.ptc-ler { margin-left: var(--e1); font-size: var(--t-3); font-weight: 400; }
.ptc-na { margin: var(--e2) 0 0; font-size: var(--t-3); color: var(--txt2); }
.ptc-ficha dl.ptc-longos {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--linha-suave);
}
.ptc-ficha dl.ptc-longos dd { font-weight: 500; }

/* --- Fichas das regras transversais --------------------------------------- */
.ptc-rt {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 0 1px;
  padding: 0 var(--e2);
  vertical-align: 1px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--acento-fraco);
  color: var(--acento-txt);
  font: 600 var(--t-2)/1.4 var(--fonte-mono);
  white-space: nowrap;
  cursor: pointer;
}
.ptc-rt:hover,
.ptc-rt[aria-expanded="true"] { border-color: var(--acento); }
/* O nome completo está no nome acessível do botão; no ecrã só o código. */
.ptc-rt-nome { display: none; }

.ptc-rt-janela {
  position: absolute;
  z-index: 30;
  max-width: min(360px, calc(100vw - 32px));
  padding: var(--e3) var(--e4) var(--e4);
  background: var(--sup);
  color: var(--txt);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  font-size: var(--t-3);
}
.ptc-rt-janela:focus { outline: none; }
.ptc-rt-janela:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ptc-rt-janela-rotulo {
  margin: 0;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt2);
}
.ptc-rt-janela-nome { margin: var(--e1) 0 0; font-size: var(--t-4); font-weight: 700; }
.ptc-rt-janela-texto { margin: var(--e2) 0 0; color: var(--txt2); }
.ptc-rt-janela-abrir {
  display: inline-flex;
  align-items: center;
  min-height: var(--alt-p);
  margin-top: var(--e2);
  font-weight: 600;
}

/* --- Ecrãs estreitos -------------------------------------------------------- */
@media (max-width: 900px) {
  .ptc-grupos { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .corpo-painel .ptc-seccao > h3[id],
  .ptc-ficha { scroll-margin-top: var(--ptc-topo, 60px); }
  /* Área de toque de 44 px para o que vive no meio de uma linha de texto. */
  .ptc-rt,
  .ptc-grupo > h3 a,
  .ptc-ler { position: relative; }
  .ptc-grupo > h3 a,
  .ptc-ler { display: inline-block; }
  .ptc-rt::after,
  .ptc-grupo > h3 a::after,
  .ptc-ler::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  /* As fichas RT ficam muitas vezes em linhas seguidas (22 px de distância):
     com 44 px, a área da ficha de baixo tapava a metade de baixo da de cima e
     um toque abria a regra errada. Alargam só para os lados, nunca para cima
     nem para baixo — em linha de texto, a altura é a da própria linha. */
  .ptc-rt::after {
    left: -3px;
    right: -3px;
    top: 0;
    bottom: 0;
    height: auto;
    transform: none;
  }
  .ptc-rt-janela-abrir { min-height: 44px; }
  /* O título de cada secção é um alvo de toque de 44 px. «Abrir todas» e
     «Fechar todas» já sobem para 44 px pela regra geral (.botao-pequeno). */
  .ptc-recolhivel .ptc-sec-botao { min-height: 44px; }
}

/* --- Cabeçalho compacto no telemóvel (só nos protocolos de TC) ------------- */
@media (max-width: 640px) {
  .ptc-painel .cab .migalhas {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ptc-painel .cab h1 { font-size: var(--t-7); }
  .ptc-painel .cab .titulo-linha .acoes { margin-top: var(--e1); }
  .ptc-painel .cab .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: var(--e2);
    overscroll-behavior-x: contain;
    /* O degradê da direita diz que há mais etiquetas para lá da margem (como
       na barra de atalhos): na máscara só conta o alfa, por isso usa-se
       «currentColor» e não nasce aqui nenhuma cor. */
    -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, currentColor calc(100% - 28px), transparent 100%);
  }
  .ptc-painel .cab .chips > * { flex: none; }
  /* «Tipo» e «Modalidade» repetem as migalhas: vão para o fim da fila. */
  .ptc-painel .cab .chips > .ptc-chip-fim { order: 1; }
}

/* --- Impressão ---------------------------------------------------------------
   A ficha sai no topo (é útil em papel). A ficha de uma regra sai como texto,
   com o código e o nome — a regra geral da secção 25 esconde todos os botões,
   por isso esta vence-a pela especificidade. A janela e o «ler» não saem.
   As secções saem TODAS abertas: o JavaScript abre-as no «beforeprint» e
   repõe-nas no «afterprint»; a última regra abaixo garante o mesmo no papel
   quando o navegador imprime sem esses avisos. O título da secção sai como
   título (é um botão, que a regra geral esconderia), sem seta nem
   pré-visualização, e os botões «Abrir/Fechar todas» não saem. */
@media print {
  .ptc-seccoes-cmd,
  .ptc-sec-previa { display: none !important; }
  .corpo-painel .ptc-seccao > h3 > button.ptc-sec-botao {
    display: block !important;
    min-height: 0;
    padding: 0;
  }
  .ptc-recolhivel .ptc-sec-botao::before,
  .ptc-recolhivel .ptc-sec-botao::after { display: none; }
  .corpo-painel.ptc-recolhivel .ptc-seccao > h3.blk-h { margin-top: var(--e4); }
  .corpo-painel.ptc-recolhivel .ptc-seccao > h3.blk-h::before { display: block; }
  .ptc-sec-corpo[hidden] { display: block !important; content-visibility: visible !important; }
  .ptc-ficha { break-inside: avoid; page-break-inside: avoid; border-left-width: 1px; }
  button.ptc-rt {
    display: inline !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tinta);
    font: inherit;
    white-space: normal;
  }
  .ptc-rt-nome { display: inline !important; }
  .ptc-rt-janela,
  .ptc-ler { display: none !important; }
}

/* --- Página «Uniformizar decimais» ------------------------------------------ */
.ptc-dec-grupo { margin: var(--e6) 0 0; }
.ptc-dec-grupo > h2 { margin: 0 0 var(--e1); font-size: var(--t-6); }
.ptc-dec-grupo > .nota-campo { margin-top: 0; }
.ptc-dec-painel { margin: var(--e3) 0 0; }
.ptc-dec-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
}
.ptc-dec-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--alt-p);
  font-weight: 600;
  cursor: pointer;
}
.ptc-dec-marca input { flex: none; width: 18px; height: 18px; margin: 0; }
.ptc-dec-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  font-size: var(--t-3);
}
.ptc-dec-tabela { min-width: 480px; }
.ptc-dec-tabela td:first-child { color: var(--txt2); white-space: nowrap; }
.ptc-dec-tabela mark {
  background: var(--acento-fraco);
  color: inherit;
  padding: 0 2px;
  border-radius: var(--raio-p);
  font-weight: 700;
}
.ptc-dec-lista { margin: var(--e2) 0 0; padding-left: var(--e5); }
.ptc-dec-acoes { margin: var(--e5) 0 0; }
@media (max-width: 900px) {
  .ptc-dec-marca { min-height: 44px; }
  .ptc-dec-meta a,
  .ptc-dec-lista a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* =============================================================================
   41. ACERTOS DE APRESENTAÇÃO (26/09/2026)
   -----------------------------------------------------------------------------
   Pequenos defeitos vistos nas capturas do manual do utilizador. Ficam num
   bloco próprio, no fim, para se lerem juntos; cada regra diz o que corrige.
   ========================================================================== */

/* Página inicial, cartão «Declarações pendentes»: o título do documento e a
   linha «Declaração da versão N» ficavam colados na mesma linha («…(exemplo)
   Declaração da versão 1»), porque no HTML não há nada entre os dois. A linha
   da versão passa para baixo do título — em computador e no telemóvel. */
.linha-estado-versao { display: block; margin-top: 2px; }

/* Editor, em janelas largas: o «+» e as seis reticências (⋮) do Editor.js ficam
   À ESQUERDA da folha, fora dela (o pacote põe-nos a 100 % para a esquerda do
   texto). Com a barra lateral logo ali, a 1280 px apareciam por cima da árvore
   — e o menu do «+» abria por cima dela; a 768 px ficavam fora do ecrã. A folha
   reserva agora 56 px à esquerda, onde os dois botões (58 px com o intervalo)
   cabem por dentro do contorno. Só fora do «modo estreito» do Editor.js
   (.codex-editor--narrow, uma folha com menos de 650 px — telemóvel, ou
   computador com a coluna da classificação ao lado): nesse modo o próprio
   pacote já põe os botões do lado direito, dentro da folha. */
.caixa-editor > .codex-editor:not(.codex-editor--narrow) { margin-left: 56px; }

/* «Os meus lembretes»: «Editar» e «Apagar…» num lembrete que a pessoa criou
   para si. Ficam no corpo do cartão, por baixo dos chips — a coluna da direita
   continua a ser só do «Marcar como concluído», a ação do dia a dia. */
.lem-proprio-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin-top: var(--e3);
}
/* Alvos de toque dos botões dos lembretes no telemóvel. A lista da secção 24
   já pedia 44 px para .lem-botao-p, mas a altura normal (36 px) é declarada
   depois, na secção 33, e ganhava — medido a 390 px: «Marcar como concluído»,
   «Reabrir», «Editar» e «Apagar…» tinham 36 px. Aqui, no fim, ganha a de 44. */
@media (max-width: 900px) {
  .lem-botao-p { min-height: 44px; }
}


/* =============================================================================
   42. AJUDA — O MANUAL DO UTILIZADOR NA PLATAFORMA (.ajuda-*)
   -----------------------------------------------------------------------------
   Página «Ajuda» (templates/ajuda.html), o botão «?» de cada página e a
   ligação «Como faço isto?» (templates/_ajuda.html), e a janela onde o «?»
   abre o capítulo (static/js/ajuda.js). O texto vem de
   docs/manual-utilizador/manual-fonte.md, convertido por ajuda.py.
   Só tokens existentes; claro e escuro seguem-nos sozinhos. As caixas
   «Atenção/Dica/Importante/Nota» têm a anatomia das caixas da secção 8
   (.aviso): contorno fino, filete de 4 px à esquerda, raio pequeno — e a
   palavra a negrito no princípio, para a informação não estar só na cor.
   ========================================================================== */

/* --- O botão «?» ---------------------------------------------------------- */
.ajuda-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--alt-p);
  height: var(--alt-p);
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--sup);
  color: var(--txt2);
  font-size: var(--t-5);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.ajuda-botao:hover { border-color: var(--acento); color: var(--acento-txt); text-decoration: none; }

/* O título de uma página sem barra do topo («Início», «Iniciar sessão») com o
   «?» ao lado. */
.ajuda-titulo { display: flex; align-items: center; gap: var(--e3); }
.ajuda-titulo h1 { margin-right: auto; }

/* «Como faço isto?» — ligação discreta por baixo de um cartão ou de um aviso. */
.ajuda-como { margin: var(--e3) 0 0; font-size: var(--t-3); }
.ajuda-ligacao { color: var(--acento-txt); font-weight: 500; }
.menu-exportar-lista a.ajuda-ligacao {
  margin-top: var(--e2);
  border-top: 1px solid var(--linha-suave);
  border-radius: 0;
  font-size: var(--t-3);
  color: var(--acento-txt);
}

/* --- Página «Ajuda»: índice e pesquisa ------------------------------------ */
.ajuda-pesquisa { margin: var(--e4) 0 var(--e5); max-width: 640px; }
.ajuda-pesquisa label { display: block; font-weight: 600; font-size: var(--t-4); margin-bottom: var(--e2); }
.ajuda-pesquisa-linha { display: flex; gap: var(--e3); }
.ajuda-pesquisa-linha input { flex: 1; min-width: 0; }
.ajuda-pesquisa-compacta { margin: 0 0 var(--e4); }
.ajuda-pesquisa-compacta label { font-size: var(--t-3); }
.ajuda-pesquisa-compacta .botao { padding: var(--e2) var(--e3); }

.ajuda-parte {
  margin: var(--e5) 0 var(--e2);
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt2);
}
.ajuda-indice .ajuda-parte:first-of-type { margin-top: var(--e3); }
.ajuda-lista { list-style: none; margin: 0; padding: 0; }
.ajuda-lista a {
  display: block;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-p);
  color: var(--txt);
  text-decoration: none;
}
.ajuda-lista a:hover { background: var(--sup2); color: var(--acento-txt); }
.ajuda-lista a[aria-current="page"] { background: var(--acento-fraco); color: var(--acento-txt); font-weight: 600; }
.ajuda-indice .ajuda-lista { columns: 2 280px; column-gap: var(--e6); }
.ajuda-indice .ajuda-lista li { break-inside: avoid; }

.ajuda-resultados-lista { list-style: none; margin: 0; padding: 0; }
.ajuda-resultados-lista li + li { border-top: 1px solid var(--linha-suave); }
.ajuda-resultados-lista a {
  display: block;
  padding: var(--e3) var(--e2);
  color: var(--txt);
  text-decoration: none;
}
.ajuda-resultados-lista a:hover b { color: var(--acento-txt); text-decoration: underline; }
.ajuda-resultados-lista b { display: block; font-size: var(--t-4); }
.ajuda-resultados-lista span { display: block; margin-top: 2px; font-size: var(--t-3); color: var(--txt2); }
.ajuda-resultados-lista mark,
.ajuda-corpo mark { background: var(--aviso-fundo); color: var(--txt); padding: 0 1px; border-radius: 2px; }

/* --- Página de um capítulo ------------------------------------------------ */
.ajuda-grelha {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: var(--e6);
  align-items: start;
}
.ajuda-nav {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 88px);
  overflow: auto;
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e4);
}
.ajuda-nav > summary {
  font-weight: 700;
  font-size: var(--t-4);
  cursor: pointer;
  margin-bottom: var(--e3);
}
.ajuda-nav .ajuda-parte { margin-top: var(--e4); }
.ajuda-nav .ajuda-lista a { font-size: var(--t-3); padding: var(--e1) var(--e2); }

.ajuda-artigo { min-width: 0; max-width: 78ch; }
.ajuda-parte-atual {
  margin: 0;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt2);
}
.ajuda-nesta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2) var(--e3);
  margin: var(--e3) 0 var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-3);
}
.ajuda-nesta-rotulo { font-weight: 600; color: var(--txt2); }
.ajuda-nesta ul { display: contents; list-style: none; }
.ajuda-nesta a { color: var(--acento-txt); }

/* O texto do manual (página, página sem sessão e janela). */
.ajuda-corpo { font-size: var(--t-5); line-height: 1.55; }
.ajuda-corpo h3 { font-size: var(--t-6); margin: var(--e6) 0 var(--e3); scroll-margin-top: 72px; }
.ajuda-corpo p { margin: var(--e3) 0; }
.ajuda-corpo ol,
.ajuda-corpo ul { margin: var(--e3) 0; padding-left: 1.5em; }
.ajuda-corpo li { margin: var(--e1) 0; }
.ajuda-corpo li > ul { margin: var(--e1) 0; }
.ajuda-corpo strong { font-weight: 700; }
.ajuda-corpo a { color: var(--acento-txt); }
.ajuda-tabela { overflow-x: auto; margin: var(--e4) 0; }
.ajuda-tabela table { border-collapse: collapse; width: 100%; font-size: var(--t-4); background: var(--sup); }
.ajuda-tabela th,
.ajuda-tabela td { border: 1px solid var(--linha); padding: var(--e2) var(--e3); text-align: left; vertical-align: top; }
.ajuda-tabela th { background: var(--sup2); font-weight: 600; }

.ajuda-figura { margin: var(--e5) 0; }
.ajuda-figura a { display: block; }
.ajuda-figura img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
}
.ajuda-figura figcaption { margin-top: var(--e2); font-size: var(--t-3); color: var(--txt2); }

.ajuda-caixa {
  margin: var(--e4) 0;
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-p);
  font-size: var(--t-4);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--txt2);
  background: var(--sup2);
  color: var(--txt);
}
.ajuda-caixa p { margin: 0; }
.ajuda-caixa-atencao { background: var(--aviso-fundo); border-color: var(--aviso-linha); border-left-color: var(--aviso-txt); }
.ajuda-caixa-atencao strong:first-child { color: var(--aviso-txt); }
.ajuda-caixa-importante { background: var(--erro-fundo); border-color: var(--erro-linha); border-left-color: var(--erro-txt); }
.ajuda-caixa-importante strong:first-child { color: var(--erro-txt); }
.ajuda-caixa-dica { background: var(--ok-fundo); border-color: var(--ok-linha); border-left-color: var(--ok-txt); }
.ajuda-caixa-dica strong:first-child { color: var(--ok-txt); }
.ajuda-caixa-nota { background: var(--novidade-fundo); border-color: var(--novidade-linha); border-left-color: var(--novidade-txt); }
.ajuda-caixa-nota strong:first-child { color: var(--novidade-txt); }

.ajuda-passar {
  display: flex;
  gap: var(--e4);
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha);
}
.ajuda-passar a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  text-decoration: none;
  min-width: 0;
}
.ajuda-passar a:hover { border-color: var(--acento); }
.ajuda-passar a:hover b { color: var(--acento-txt); }
.ajuda-passar small { font-size: var(--t-2); color: var(--txt2); }
.ajuda-passar b { font-size: var(--t-4); }
.ajuda-passar-seg { text-align: right; margin-left: auto; }

/* A página do capítulo aberto sem sessão (ajuda da página «Iniciar sessão»). */
.ajuda-aberta-caixa { max-width: 760px; }
.ajuda-aberta .ajuda-artigo { max-width: none; margin-top: var(--e4); }

/* --- A janela da ajuda contextual (static/js/ajuda.js) -------------------- */
html.ajuda-janela-aberta { overflow: hidden; }
.ajuda-veu {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--veu);
}
.ajuda-janela {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 401;
  width: min(520px, 94vw);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--linha);
  box-shadow: var(--sombra-g);
}
.ajuda-veu[hidden],
.ajuda-janela[hidden] { display: none; }
.ajuda-janela-cabeca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  padding: var(--e3) var(--e3) var(--e3) var(--e5);
  padding-top: max(var(--e3), env(safe-area-inset-top));
  background: var(--sup);
  border-bottom: 1px solid var(--linha);
}
.ajuda-janela-rotulo {
  flex: 1 1 100%;
  order: 0;
  margin: 0;
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt2);
}
.ajuda-janela-abrir { order: 1; margin-right: auto; font-size: var(--t-3); font-weight: 600; color: var(--acento-txt); }
.ajuda-janela-fechar {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  cursor: pointer;
}
.ajuda-janela-fechar:hover { border-color: var(--acento); color: var(--acento-txt); }
.ajuda-janela-fechar svg { width: 18px; height: 18px; }
.ajuda-janela-cabeca { position: relative; padding-right: 64px; }
.ajuda-janela-fechar { position: absolute; top: 50%; right: var(--e3); transform: translateY(-50%); }
.ajuda-janela-corpo {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--e4) var(--e5) var(--e6);
}
.ajuda-janela-corpo:focus { outline: none; }
.ajuda-janela-espera { color: var(--txt2); }
.ajuda-janela-capitulo { margin: var(--e1) 0 var(--e3); font-size: var(--t-7); }
.ajuda-artigo-janela .ajuda-corpo { font-size: var(--t-4); }
.ajuda-artigo-janela .ajuda-corpo h3 { font-size: var(--t-5); scroll-margin-top: 0; }

/* --- Ecrãs estreitos e telemóvel ------------------------------------------ */
@media (max-width: 900px) {
  .ajuda-grelha { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .ajuda-nav { position: static; max-height: none; }
  .ajuda-nav > summary { margin-bottom: 0; min-height: 44px; display: flex; align-items: center; }
  .ajuda-nav[open] > summary { margin-bottom: var(--e3); }
  .ajuda-botao { width: 44px; height: 44px; }
  .ajuda-lista a,
  .ajuda-nav .ajuda-lista a,
  .ajuda-resultados-lista a,
  .ajuda-nesta a,
  .ajuda-ligacao,
  .ajuda-janela-abrir { min-height: 44px; display: flex; align-items: center; }
  .ajuda-ligacao { display: inline-flex; }
  .ajuda-nesta { gap: 0 var(--e3); }
  .ajuda-pesquisa-linha .botao { min-height: 44px; }
  .ajuda-passar { flex-direction: column; }
  .ajuda-passar a { min-height: 44px; }
  .ajuda-passar-seg { margin-left: 0; }
}
/* No telemóvel a janela sobe do fundo do ecrã e ocupa a largura toda. */
@media (max-width: 640px) {
  .ajuda-janela {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 88vh;
    height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--linha);
    border-radius: var(--raio-g) var(--raio-g) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ajuda-janela-cabeca { border-radius: var(--raio-g) var(--raio-g) 0 0; padding-top: var(--e3); }
  .ajuda-janela-corpo { padding: var(--e3) var(--e4) var(--e6); }
  .ajuda-titulo { align-items: flex-start; }
}

/* A janela e os botões da ajuda não saem na impressão. */
@media print {
  .ajuda-botao, .ajuda-como, .ajuda-veu, .ajuda-janela, .ajuda-nav,
  .ajuda-passar, .ajuda-pesquisa { display: none !important; }
  .ajuda-grelha { display: block; }
}


/* =============================================================================
   43. VISITAS GUIADAS — «Mostrar-me passo a passo» (.visita-* · .visitas-*)
   -----------------------------------------------------------------------------
   Desenhadas pelo static/js/visitas.js (as visitas definem-se em visitas.py):
     .visita-mascara  SVG do tamanho do ecrã que escurece tudo menos o «buraco»
                      à volta do elemento destacado (regra evenodd). O buraco
                      deixa passar o rato e o toque; o resto não.
     .visita-anel     o contorno do elemento destacado (não recebe toques).
     .visita-caixa    a caixa do passo: «Passo N de M», título, frase e botões.
                      No computador fica ao lado do elemento; no telemóvel é
                      uma folha em cima ou em baixo do ecrã, do lado livre.
   Por baixo da janela do «?» (400/401) e por cima da barra lateral do
   telemóvel (60) e de tudo o resto da página.
   ========================================================================== */

.visita-mascara {
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.visita-mascara path {
  fill: var(--veu);
  pointer-events: auto;
}
.visita-anel {
  position: fixed;
  z-index: 301;
  border: 2px solid var(--acento);
  border-radius: var(--raio-p);
  box-shadow: 0 0 0 3px var(--sup);
  pointer-events: none;
}
.visita-anel[hidden] { display: none; }

.visita-caixa {
  position: fixed;
  z-index: 302;
  width: min(360px, calc(100vw - 16px));
  padding: var(--e4) var(--e5);
  background: var(--sup);
  color: var(--txt);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g), 0 8px 28px oklch(0 0 0 / 0.18);
}
.visita-caixa:focus { outline: none; }
.visita-caixa:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.visita-caixa-centro {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.visita-contador {
  margin: 0;
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt2);
}
.visita-titulo {
  margin: var(--e1) 0 var(--e2);
  font-size: var(--t-5);
  font-weight: 700;
  color: var(--txt);
}
.visita-texto {
  margin: 0 0 var(--e4);
  font-size: var(--t-4);
  line-height: 1.5;
}
.visita-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e3);
}
.visita-acoes-passo { display: inline-flex; gap: var(--e2); margin-left: auto; }
.visita-acoes [hidden] { display: none; }
.visita-sair {
  padding: var(--e2) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-3);
  font-weight: 600;
  color: var(--acento-txt);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Oferta das visitas na página «Ajuda» e na janela do «?». */
.visita-oferta {
  margin: var(--e3) 0 var(--e5);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--acento-fraco);
}
.visita-oferta[hidden], .visitas-lista[hidden] { display: none; }
.visita-oferta-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin: 0;
}
.visita-oferta-linha + .visita-oferta-linha { margin-top: var(--e2); }
.visita-oferta-nome { font-weight: 600; font-size: var(--t-4); }
.visitas-lista-itens { list-style: none; margin: 0; padding: 0; }
.visitas-lista-itens li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  padding: var(--e3) 0;
  border-top: 1px solid var(--linha-suave);
}
.visitas-lista-itens li:first-child { border-top: 0; }
.visitas-lista-nome { font-weight: 600; }
/* Na janela do «?», a oferta fica fixa por baixo da cabeça (static/js/ajuda.js). */
.ajuda-janela > .visita-oferta {
  flex: none;
  margin: 0;
  border-width: 0 0 1px;
  border-left: 3px solid var(--acento);
  border-radius: 0;
  padding: var(--e3) var(--e5);
}

@media (max-width: 900px) {
  .visita-caixa .botao,
  .visita-sair,
  .visita-iniciar { min-height: 44px; }
}
/* No telemóvel a caixa é uma folha com a largura toda, em cima ou em baixo. */
@media (max-width: 640px) {
  .visita-caixa {
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 45vh;
    overflow: auto;
  }
  .visita-caixa-cima { top: max(8px, env(safe-area-inset-top)); }
  .visita-caixa-baixo { bottom: max(8px, env(safe-area-inset-bottom)); }
  .visita-acoes-passo { margin-left: 0; }
}
@media print {
  .visita-mascara, .visita-anel, .visita-caixa, .visita-oferta, .visitas-lista { display: none !important; }
}


/* =============================================================================
   44. ARRASTAR IMAGENS PARA OS CAMPOS DO EDITOR (.largar-*)
   -----------------------------------------------------------------------------
   Enquanto se arrasta uma imagem do computador por cima de um campo que a
   aceita — bloco «Imagem» vazio, «Passo», «Plano de corte» —, o campo fica
   destacado: contorno tracejado com a cor de acento, fundo suave e a frase
   «Largue aqui…» numa etiqueta ao centro. Quem trata o gesto é o
   static/js/arrastar-imagens.js.

   O destaque é um VÉU por cima do campo, fora da folha do editor (é filho do
   <body>), e não uma classe no próprio campo: o Editor.js conta qualquer
   mudança dentro dos blocos como uma alteração do painel e gravava um rascunho
   sem ninguém ter mudado nada. Pela mesma razão, a mensagem de «isto não é uma
   imagem» (.largar-recado) aparece no topo do campo, também fora da folha.

   O véu não apanha o rato (pointer-events: none): o gesto continua a chegar ao
   campo. A etiqueta tem fundo próprio (--sup) e texto em --acento-txt, por isso
   o contraste é o do resto da aplicação (AA) nos dois temas, qualquer que seja
   o que está por baixo do véu. Fica por cima da folha do editor e por baixo
   das barras fixas do editor (.barra-editor e, no telemóvel, .ferramentas, com
   z-index 20): ao rolar, o véu passa por baixo delas e não as tapa.
   ========================================================================== */

.largar-veu {
  position: absolute;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e3);
  border: 2px dashed var(--acento);
  border-radius: var(--raio-p);
  background: var(--acento-fraco);
  background: color-mix(in oklch, var(--acento-fraco) 82%, transparent);
  pointer-events: none;
  box-sizing: border-box;
}
.largar-veu[hidden] { display: none; }
.largar-veu-texto {
  max-width: 100%;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--acento);
  border-radius: 999px;
  background: var(--sup);
  color: var(--acento-txt);
  font-size: var(--t-3);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--sombra-g);
}

.largar-recado {
  position: absolute;
  z-index: 16;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--erro-linha);
  border-left: 4px solid var(--erro-txt);
  border-radius: var(--raio-p);
  background: var(--erro-fundo);
  color: var(--erro-txt);
  font-size: var(--t-3);
  line-height: 1.45;
  box-shadow: var(--sombra-g);
  box-sizing: border-box;
  pointer-events: none;
}
.largar-recado[hidden] { display: none; }

@media print {
  .largar-veu, .largar-recado { display: none !important; }
}


/* =============================================================================
   45. COPIAR E MOVER BLOCOS NO EDITOR (.mov-* · .blocos-* · .botao-colar)
   -----------------------------------------------------------------------------
   O botão ⋮ de cada bloco também se arrasta (static/js/arrastar-blocos.js):
   premir e mover leva o bloco — ou a secção inteira, num título — para outro
   sítio da folha. Enquanto se arrasta: o que se leva fica esbatido
   (.mov-esbatido), uma sombra curta segue o ponteiro (.mov-sombra), uma linha
   mostra onde vai ficar (.mov-linha) e uma etiqueta diz a secção de destino
   (.mov-etiqueta). Depois de mover ou de colar, um realce breve
   (.blocos-realce) mostra os blocos que mudaram; as confirmações e os avisos
   de copiar e colar são um recado curto junto ao bloco (.blocos-recado).

   Tudo isto é filho do <body>, por cima da folha e não dentro dela: uma
   mudança dentro dos blocos contava, para o Editor.js, como uma alteração do
   painel (e gravava um rascunho sem ninguém ter mudado nada). Nada apanha o
   rato (pointer-events: none): o recado fecha sozinho ao fim de uns segundos
   ou com Escape.
   Ficam por baixo das barras fixas do editor (.barra-editor e, no telemóvel,
   .ferramentas, com z-index 20); a sombra, que segue o ponteiro, fica por cima.

   O botão «Colar bloco copiado» (barra «Inserir:») nasce inativo com
   aria-disabled (e não «disabled»): continua a receber o foco do teclado e o
   leitor de ecrã diz porquê; as cores são as do botão desativado.
   ========================================================================== */

/* O ⋮ arrasta: o dedo leva o bloco em vez de deslocar a página, e premir
   não seleciona texto nem abre o menu do sistema. */
.modo-editor .ce-toolbar__settings-btn {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
body.mov-a-arrastar,
body.mov-a-arrastar * {
  cursor: grabbing !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
/* Durante o arrasto, a dica do ⋮ («Carregue para ver as opções…») não fica por
   cima da linha e da etiqueta do destino: o Editor.js só a esconde com atraso,
   e com o ponteiro preso ao ⋮ o navegador não avisa que o rato saiu dele. */
body.mov-a-arrastar .ct {
  visibility: hidden !important;
  opacity: 0 !important;
}

.mov-esbatido {
  position: absolute;
  z-index: 14;
  border: 1px dashed var(--linha-campo);
  border-radius: var(--raio-p);
  background: var(--sup);
  background: color-mix(in oklch, var(--sup) 68%, transparent);
  pointer-events: none;
  box-sizing: border-box;
}

.mov-linha {
  position: absolute;
  z-index: 16;
  height: 3px;
  border-radius: 2px;
  background: var(--acento);
  box-shadow: 0 0 0 2px var(--sup);
  pointer-events: none;
}
.mov-linha::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 2px var(--sup);
}
.mov-linha-sem-mudanca,
.mov-linha-sem-mudanca::before { background: var(--txt2); }
.mov-linha[hidden],
.mov-etiqueta[hidden] { display: none; }

.mov-etiqueta {
  position: absolute;
  z-index: 17;
  max-width: min(440px, calc(100vw - 32px));
  padding: 2px var(--e3);
  border: 1px solid var(--acento);
  border-radius: 999px;
  background: var(--sup);
  color: var(--acento-txt);
  font-size: var(--t-3);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--sombra-g);
  pointer-events: none;
  box-sizing: border-box;
}

.mov-sombra {
  position: fixed;
  z-index: 40;
  max-width: min(300px, calc(100vw - 16px));
  padding: var(--e2) var(--e3);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  font-size: var(--t-3);
  line-height: 1.4;
  box-shadow: var(--sombra-g);
  pointer-events: none;
  box-sizing: border-box;
}
.mov-sombra-tipo { display: block; font-weight: 600; color: var(--acento-txt); }
.mov-sombra-texto {
  display: block;
  color: var(--txt2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mov-sombra-aviso { display: block; margin-top: 2px; color: var(--aviso-txt); font-weight: 600; }
.mov-sombra-aviso[hidden] { display: none; }
.mov-sombra-fora { border-left-color: var(--txt2); }

.blocos-realce {
  position: absolute;
  z-index: 13;
  border: 2px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--acento-fraco);
  background: color-mix(in oklch, var(--acento-fraco) 50%, transparent);
  pointer-events: none;
  box-sizing: border-box;
  transition: opacity 0.7s ease;
}
.blocos-realce-a-sair { opacity: 0; }

.blocos-recado {
  position: absolute;
  z-index: 18;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--sup);
  color: var(--txt);
  font-size: var(--t-3);
  line-height: 1.45;
  box-shadow: var(--sombra-g);
  box-sizing: border-box;
  /* Não apanha o rato: fica por cima dos blocos seguintes durante uns
     segundos, e o ⋮ desses blocos tem de continuar a aparecer ao passar. */
  pointer-events: none;
}
.blocos-recado[hidden] { display: none; }
.blocos-recado-ok {
  border-color: var(--ok-linha);
  border-left-color: var(--ok-txt);
  background: var(--ok-fundo);
  color: var(--ok-txt);
}
.blocos-recado-erro {
  border-color: var(--erro-linha);
  border-left-color: var(--erro-txt);
  background: var(--erro-fundo);
  color: var(--erro-txt);
}

/* «Colar bloco copiado» sem nada para colar: as cores do botão desativado. */
.botao-colar[aria-disabled="true"],
.botao-colar[aria-disabled="true"]:hover {
  background: var(--sup2);
  border-color: var(--linha);
  color: var(--txt2);
  cursor: default;
}
.botao-colar[aria-disabled="true"]:active { transform: none; }

/* O menu ⋮ (e o submenu «Mover para a secção…», que tem a mesma largura,
   porque a posição dele conta com ela): 250 px em vez dos 200 px do pacote.
   A 200 px a opção lia-se «Mover para a se…» e os títulos das secções
   cortavam-se logo ao princípio. No telemóvel o menu ocupa a largura do ecrã
   e isto não conta. */
html .ce-settings .ce-popover { --width: 250px; }

/* No telemóvel (até 650 px, a regra do próprio Editor.js), o menu do ⋮ e o
   do «+» abrem numa folha no fundo do ecrã. A folha vive dentro da caixa do
   editor, que tem o seu próprio plano (z-index 1 no pacote): ficava por baixo
   da barra «Inserir:», da barra do fundo e da barra de cima, e as últimas
   opções — as secções de «Mover para a secção…», «Apagar», «Mover para
   baixo» — não se viam nem se podiam tocar (um toque nelas ia parar a
   «Pesquisar» ou «Painéis»). Enquanto a folha está aberta, a caixa do editor
   sobe acima dessas barras (50) e fica abaixo da gaveta da barra lateral
   (55–60). O véu da folha tapa então a página inteira, como deve. */
@media (max-width: 650px) {
  .codex-editor:has(.ce-settings .ce-popover--opened),
  .codex-editor:has(.ce-toolbox .ce-popover--opened) { z-index: 52; }
}

/* No telemóvel (até 650 px, a disposição do Editor.js), o «+» e o ⋮ — que
   agora também se arrasta — medem 36 × 36 px, abaixo dos 44 px de tudo o que
   se toca. O alvo cresce para 44 × 44 px com um ::after invisível, centrado
   no botão (o desenho fica igual; centrado, e não com «inset», porque a borda
   de 1 px dos botões encolhia o alvo para 42 px), e o ⋮ afasta-se do «+» o
   bastante para os dois alvos não se sobreporem (cada um alarga 4 px para
   cada lado: 8 px entre os dois, mais 1 px de folga para os arredondamentos
   do ecrã). */
@media (max-width: 650px) {
  .modo-editor .ce-toolbar__plus,
  .modo-editor .ce-toolbar__settings-btn { position: relative; }
  .modo-editor .ce-toolbar__settings-btn { margin-left: 9px; }
  .modo-editor .ce-toolbar__plus::after,
  .modo-editor .ce-toolbar__settings-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
  }
}

/* No tablet (651 a 900 px, com ecrã tátil) o Editor.js usa a disposição de
   computador: o «+» (26 × 26 px) e o ⋮ (24 × 26 px — também a pega do
   arrasto) ficam ao lado da folha, abaixo dos 44 px de tudo o que se toca
   até 900 px. Os dois alvos crescem para 44 × 44 px, centrados nos botões
   (como no telemóvel), sem se sobreporem um ao outro nem ao texto dos blocos:
   · o ⋮ afasta-se do texto 10 px (em vez de 5): o alvo dele acaba onde o
     texto começa;
   · o «+» afasta-se do ⋮ 20 px (em vez de 3): os dois alvos ficam lado a
     lado, com 1 px de folga para os arredondamentos do ecrã;
   · a folha reserva, desse lado, o espaço para os dois alvos (89 px, dentro
     do contorno): 92 px à esquerda em vez de 56; no «modo estreito» do
     Editor.js, em que os botões ficam à direita, dentro da folha, o texto
     acaba 94 px antes da margem direita em vez de 50. */
@media (min-width: 651px) and (max-width: 900px) and (pointer: coarse) {
  .caixa-editor > .codex-editor:not(.codex-editor--narrow) { margin-left: 92px; }
  .modo-editor .codex-editor:not(.codex-editor--narrow) .ce-toolbar__actions { padding-right: 10px; }
  .modo-editor .codex-editor--narrow .codex-editor__redactor { margin-right: 94px; }
  .modo-editor .codex-editor--narrow .ce-toolbar__actions { padding-right: 15px; }
  .modo-editor .ce-toolbar__plus,
  .modo-editor .ce-toolbar__settings-btn { position: relative; }
  /* O pacote dá ao «+» do modo estreito «left: 5px», que só conta com
     «position: relative»: chegava-o 5 px ao ⋮ e os alvos sobrepunham-se. */
  .modo-editor .codex-editor--narrow .ce-toolbar__plus { left: 0; }
  .modo-editor .ce-toolbar__settings-btn { margin-left: 20px; }
  .modo-editor .ce-toolbar__plus::after,
  .modo-editor .ce-toolbar__settings-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blocos-realce { transition: none; }
}
@media print {
  .mov-esbatido, .mov-linha, .mov-etiqueta, .mov-sombra,
  .blocos-realce, .blocos-recado { display: none !important; }
}