/* ══════════════════════════════════════════════════════════════════════════════
comum.css — Componentes que as duas superfícies compartilham
──────────────────────────────────────────────────────────────────────────────
O sistema tem duas folhas de componente: style.css (console, que é operado) e
documento.css (painel, dossiê e laudos, que são lidos e impressos). Elas são
separadas de propósito — colidem em .card, .badge e body.
Três componentes, porém, precisam existir nas duas: o cabeçalho, o diálogo e
o painel de sessão expirada. Enquanto não havia esta folha, o painel de
sessão estava escrito duas vezes, uma em cada lugar, e os dois já começavam a
divergir: o véu era var(--surface-trans) numa e um rgba literal na outra.
Duas definições do mesmo componente um dia discordam — foi exatamente por
isso que as cinco declarações de variável concorrentes viraram tokens.css.
Ordem de carregamento, em todo template:
← ou documento.css
Toda cor vem de tokens.css. Nenhum literal aqui.
══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
SÓ PARA O LEITOR DE TELA
──────────────────────────────────────────────────────────────────────────────
Texto que existe na árvore de acessibilidade e não ocupa espaço na página.
Serve para o que a tela já diz por outros meios a quem enxerga, e não diz a
quem não enxerga: o nome da tela no console, onde a marca do cabeçalho é um
link e não um título; e o rótulo de uma área que só se distingue pela
posição.
Não use `display: none` nem `visibility: hidden` para isso — os dois tiram o
elemento da árvore de acessibilidade também, e aí o texto não existe para
ninguém. O recorte de 1px é o único jeito que continua sendo lido.
`white-space: nowrap` está aqui porque sem ele o texto quebra dentro do
quadro de 1px e alguns leitores de tela o anunciam letra a letra.
══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
O ATRIBUTO `hidden` PRECISA ESCONDER
──────────────────────────────────────────────────────────────────────────────
O navegador implementa `hidden` como `[hidden] { display: none }` na folha
dele, que é a de menor precedência: qualquer `display` declarado numa regra
de componente ganha, e o elemento continua na tela com o atributo posto.
Não é hipótese. `#header-btn-caso` nasce com `hidden` no console e só recebe
`href` quando a URL traz `?case=`. Como `.topo-btn` declara `display: flex`,
ele aparecia mesmo assim — 129px de botão, com `href` nulo, levando a lugar
nenhum em toda abertura do console sem caso na URL. O mesmo valia para o
bloco da conta, que nasce oculto até o servidor responder.
O `!important` é o que faz a regra valer contra o `display` do componente,
que é justamente quem ela precisa vencer. Vale globalmente porque `hidden`
significa a mesma coisa em toda parte, e quatro regras `[hidden]` por classe
— que era o que havia — deixam de fora a quinta classe que alguém escrever.
══════════════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }
.so-leitor {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ══════════════════════════════════════════════════════════════════════════════
PULAR PARA O CONTEÚDO
──────────────────────────────────────────────────────────────────────────────
Primeiro elemento focável de toda tela. Fica fora da vista até receber foco,
e então aparece no canto superior esquerdo.
Existe porque o cabeçalho montado por cabecalho.js tem entre seis e nove
controles — voltar, console, os destinos do perfil, o seletor de organização,
o tema e o sair —, e sem este link quem navega por teclado atravessa todos
eles em cada tela, a cada visita. Numa tela de leitura como o dossiê isso é
incômodo; no painel do caso, onde se alterna entre a tabela e o formulário de
convite, é o que faz a pessoa desistir do teclado.
Não usa .so-leitor: precisa ser invisível *e* voltar a ocupar espaço quando
focado, e o recorte de 1px não volta atrás. -100px acima do topo resolve as
duas coisas.
══════════════════════════════════════════════════════════════════════════════ */
.pular-para-conteudo {
position: absolute;
top: -100px;
left: var(--esp-3);
z-index: var(--z-sessao);
padding: var(--esp-2) var(--esp-4);
border-radius: var(--radius-sm);
background: var(--color-primary);
color: var(--hero-text);
font-family: var(--fonte-marca);
font-size: var(--texto-corpo);
font-weight: 700;
text-decoration: none;
transition: top 0.15s ease;
}
.pular-para-conteudo:focus {
top: var(--esp-3);
}
/* Região que o JS repinta sozinha. Não tem aparência própria: existe para que
o `aria-live` fique num lugar previsível do markup, e para que se possa
procurar por ela. */
.regiao-viva {
display: contents;
}
/* ══════════════════════════════════════════════════════════════════════════════
CABEÇALHO
──────────────────────────────────────────────────────────────────────────────
Montado por cabecalho.js dentro de .
Antes, só o console tinha cabeçalho: o painel, o dossiê e os três laudos
abrem em aba nova e terminavam sem caminho de volta, sem alternador de tema e
sem sair — quem chegasse ali por um link só saía digitando URL.
Duas linhas, e a divisão é declarada, não deixada ao flex-wrap: em cima quem
sou e onde estou; embaixo o que faço. Com a barra de abas na própria linha,
as cinco abas do console cabem inteiras bem abaixo de 1280px, e a rolagem
horizontal volta a ser exceção em vez de regra.
══════════════════════════════════════════════════════════════════════════════ */
.topo {
position: sticky;
top: 0;
z-index: var(--z-cabecalho);
background: var(--surface-trans);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--card-border);
}
/* O recuo lateral acompanha o dos contêineres de conteúdo — .app-container no
console e .container nos documentos, ambos 20px e 14px no telefone. A marca
é o ponto fixo que o olho usa para se situar; desalinhada do texto abaixo,
a tela parece de outro sistema. */
/* A faixa acompanha a largura da folha de cada superfície. O padrão é a do
console; quem tem folha mais estreita declara a própria largura — é o caso
dos documentos, em documento.css. Com uma largura fixa para todos, a marca
do laudo pré-matriz ficava 120px à esquerda do próprio texto, e a página
parecia de outro sistema. */
.topo-linha {
max-width: var(--topo-largura, 1280px);
margin: 0 auto;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
/* A fila de ações desce para uma segunda faixa quando não cabe, em vez de
comprimir a marca. Sem isto, o admin numa tela de laudo — nove itens, e a
faixa mais estreita do sistema (900px) — espremia "SISTEMA MYELINFY MNO"
até a caixa ter a largura de uma letra, e o nome quebrava em vertical,
um caractere por linha. */
flex-wrap: wrap;
}
/* Fio entre as duas linhas: sem ele a marca e as abas leem como um bloco só. */
.topo-linha + .topo-linha {
border-top: 1px solid var(--card-border);
}
/* ── Linha 1: marca e conta ── */
/* A marca é o ponto fixo que o olho usa para se situar; ela não cede espaço.
Quem cede é `.topo-acoes`, logo abaixo — o contrário do que era, e a inversão
era o defeito: a marca tinha `min-width: 0` e encolhia até zero enquanto as
ações tinham `flex-shrink: 0` e nunca encolhiam. */
.topo-marca {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
text-decoration: none;
color: var(--text-main);
border-radius: var(--radius-sm);
}
.topo-sigla {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, var(--hero-from), var(--color-primary));
display: flex;
align-items: center;
justify-content: center;
color: var(--hero-text);
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 18px;
box-shadow: var(--shadow-sm);
}
.topo-nome {
display: flex;
flex-direction: column;
min-width: 0;
/* Teto para o subtítulo, que é o nome da tela e pode ser longo ("Laudo
executivo do caso MYF-CASE-001"). Sem ele, a marca — que agora não encolhe
— ficaria tão larga quanto o texto mais comprido que passasse por ali. */
max-width: 32ch;
}
.topo-nome strong {
font-family: 'Outfit', sans-serif;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--text-strong);
/* O nome do sistema é uma unidade: ou cabe inteiro, ou a faixa quebra. Ele
nunca se parte no meio. */
white-space: nowrap;
}
.topo-nome span {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topo-acoes {
display: flex;
align-items: center;
gap: 10px;
/* Cede espaço e quebra internamente antes de a faixa inteira quebrar. */
flex: 1 1 auto;
min-width: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
.topo-btn {
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text-main);
padding: 8px 12px;
border-radius: 10px;
font-family: 'Outfit', sans-serif;
font-size: 12.5px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
text-decoration: none;
}
.topo-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.topo-btn-sair:hover {
border-color: var(--color-danger);
color: var(--color-danger);
}
/* ── Navegação por perfil e identidade ──
Preenchidas por cabecalho.js a partir de `/api/auth/estado`. Nascem `hidden`
e só aparecem quando o servidor diz que há o que mostrar: um cabeçalho que
abre com espaços vazios e depois se preenche pula na tela. */
.topo-perfil {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* O destino atual é o único item preenchido: quem está numa área não precisa
de um botão que a ofereça, precisa saber que já chegou. */
.topo-btn-atual {
background: var(--tone-accent-bg);
border-color: var(--color-primary);
color: var(--tone-accent-fg);
}
.topo-btn-atual:hover {
color: var(--tone-accent-fg);
}
/* ── Onde estou: organização ativa, à esquerda, colada na marca ──────────────
O seletor já esteve à direita, no meio dos botões. Ele responde "onde estou",
e não "para onde vou" — e um campo de formulário entre botões de navegação
era o elemento visualmente mais pesado do cabeçalho, disputando a primeira
leitura com a marca. Junto da marca ele lê como parte da resposta "que
sistema é este, e de quem é o dado que estou vendo", que é a pergunta que a
regra da casa manda responder em toda tela autenticada. */
.topo-onde {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
/* A linha é `space-between` com dois filhos. Com três, o do meio flutuaria;
o `auto` aqui devolve marca e organização à esquerda e empurra as ações
para a direita, sem que a linha precise saber quantos filhos tem. */
margin-right: auto;
padding-left: 12px;
border-left: 1px solid var(--card-border);
}
.topo-org-fixa {
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 22ch;
}
.topo-org {
background: var(--input-bg);
border: 1px solid var(--card-border);
color: var(--input-color);
border-radius: 9px;
padding: 6px 9px;
font-family: 'Inter', sans-serif;
font-size: 12px;
max-width: 26ch;
cursor: pointer;
}
.topo-org:hover { border-color: var(--color-primary); }
/* ══════════════════════════════════════════════════════════════════════════════
MENU DE CONTA
──────────────────────────────────────────────────────────────────────────────
Um avatar com as iniciais, e atrás dele o que diz respeito à própria conta:
quem sou, em que papel e organização, minha conta, tema e sair.
Existe porque a barra tinha os cinco itens abertos, lado a lado com a
navegação. Medido com a conta de administração — cinco destinos e 276
organizações —, o cabeçalho chegava a dez controles, quebrava em duas linhas
já aos 791px de largura e ficava com 143px de altura. E a degradação para
tela estreita piorava em vez de melhorar: abaixo de 560px o rótulo de cada
botão some (regra mais abaixo) e sobrava uma fileira de emoji sem texto —
🗂 👥 📊 ⚙ 🔑 🌤 🔓 —, sete alvos que só quem já sabia o que eram conseguia
distinguir. O `aria-label` salvava quem usa leitor de tela e não salvava
ninguém que enxerga.
Agora a navegação some abaixo de 640px e reaparece DENTRO do menu, e o avatar
cresce para 44px. Nada vira ícone mudo: some com um lugar para reaparecer.
Duas perguntas, dois lugares: `nav-perfil` é "para onde vou", este bloco é "o
que faço com a minha conta". Enquanto estavam na mesma fila, procurar "Sair"
e procurar "Painel" era a mesma busca visual.
══════════════════════════════════════════════════════════════════════════════ */
.conta-bloco {
position: relative;
display: inline-flex;
}
.conta-avatar {
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
cursor: pointer;
border: 1px solid var(--card-border);
background: var(--tone-accent-bg);
color: var(--tone-accent-fg);
font-family: var(--fonte-marca);
font-size: var(--texto-mini);
font-weight: 700;
letter-spacing: .02em;
}
.conta-avatar:hover { border-color: var(--color-primary); }
/* ── O painel, compartilhado pelos dois menus ──
O cabeçalho tem dois menus suspensos: Gestão, que guarda os destinos, e a
conta. Eles são o mesmo componente — mesma moldura, mesma sombra, mesma
linha de item — e por isso a aparência mora aqui, uma vez só. Escrever o
segundo painel copiando o primeiro é o começo da divergência que este
sistema já pagou cinco vezes, uma por declaração de variáveis concorrente —
as que viraram tokens.css. O que muda entre os dois menus é de onde o painel
se ancora e o que entra dentro. */
.menu-suspenso {
position: absolute;
top: calc(100% + 9px);
min-width: 232px;
z-index: var(--z-cabecalho);
padding: 6px;
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
background: var(--surface-solid);
box-shadow: var(--shadow-md);
}
.menu-suspenso button,
.menu-suspenso a {
display: flex;
width: 100%;
align-items: center;
gap: 9px;
padding: 9px 11px;
border: 0;
border-radius: var(--radius-sm);
background: none;
color: var(--text-body);
font-family: var(--fonte-texto);
font-size: var(--texto-corpo);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.menu-suspenso button:hover,
.menu-suspenso a:hover {
background: var(--realce-sutil);
color: var(--text-strong);
}
/* O destino atual não vira item clicável do menu — ele sai da lista. Esta
regra é para quando ele estiver lá assim mesmo, marcado com aria-current. */
.menu-suspenso [aria-current="page"] {
color: var(--tone-accent-fg);
font-weight: 600;
}
/* ── Menu de Gestão: os destinos, atrás de um botão só ──
Os destinos eram um botão cada, abertos na barra. Para a conta de
administração isso dava quatro botões seguidos, e a barra virava uma fila
de coisas do mesmo peso visual onde nada se destacava.
Agora são um item de menu cada, atrás de "Gestão". O que se perde é um
clique; o que se ganha é que a barra passa a ter três coisas — onde estou,
para onde vou, quem sou — em vez de sete.
Ancorado à esquerda, e não à direita como o da conta, porque o botão dele
fica no meio da barra: alinhado à direita, o painel escaparia da tela em
janela estreita. */
.menu-gestao-bloco {
position: relative;
display: inline-flex;
}
.menu-gestao { left: 0; }
/* A seta é o que diz que o botão abre alguma coisa em vez de levar a algum
lugar — sem ela, "Gestão" lê como mais um destino da barra. */
.menu-gestao-seta {
/* `inline-block` porque `transform` não se aplica a elemento inline não
substituído. */
display: inline-block;
font-size: 9px;
opacity: .7;
}
/* Sem `transition` aqui, de propósito. Com ela, a rotação não chegava a
acontecer: a regra casava, o atributo mudava e o valor computado ficava
parado na identidade. Uma animação de 150ms num glifo de 9px não paga o
preço de um comportamento que não se consegue verificar. */
[aria-expanded="true"] .menu-gestao-seta { transform: rotate(180deg); }
/* ── Menu da conta ── */
.conta-menu { right: 0; }
.conta-menu-topo {
padding: 9px 11px 11px;
margin-bottom: 5px;
border-bottom: 1px solid var(--card-border);
}
.conta-menu-nome {
font-family: var(--fonte-marca);
font-size: 13.5px;
font-weight: 700;
color: var(--text-strong);
}
/* Papel e organização na mesma linha: "titular · Meridiano Log". É a resposta
curta de "quem sou eu aqui", e ela precisa caber sem empurrar o menu. */
.conta-menu-onde {
font-size: var(--texto-rotulo);
color: var(--text-muted);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Sair é o único item do menu que encerra alguma coisa. Vermelho aqui não é
alarme: é o que impede o clique distraído em cima de "Tema claro". */
.conta-menu .conta-sair { color: var(--color-danger); }
.conta-menu .conta-sair:hover { background: var(--tone-danger-bg); }
/* Separador entre a navegação e a conta. Só entra quando há o que separar —
na área de quem apenas responde, o cabeçalho é a marca e o avatar. */
.cabecalho-sep {
width: 1px;
height: 24px;
flex: none;
background: var(--card-border);
}
/* Âmbar, e não vermelho: simular papel não é erro nem perigo, é um estado que
precisa ser notado. Vermelho aqui ensinaria a ignorar o vermelho. */
.topo-simulando {
background: var(--tone-warning-bg);
border: 1px solid var(--color-warning);
color: var(--tone-warning-fg);
border-radius: 999px;
padding: 5px 11px;
font-family: 'Outfit', sans-serif;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.topo-simulando:hover {
background: var(--color-warning);
color: var(--surface-solid);
}
/* ── Linha 2: as abas e a ação de contexto ── */
/*
A ação de contexto cede a linha antes das abas. Com os dois lado a lado e
sem quebra, as cinco abas só cabiam inteiras acima de 1204px — pouco abaixo
dos 1280px que esta fase queria destravar. Deixando a ação descer sozinha
quando aperta, as abas ficam com a linha inteira e a rolagem horizontal só
volta abaixo de 1062px. Medido no console real:
≥ 1204px abas e ação na mesma linha, nada rola
1204–1062 a ação desce, as cinco abas continuam inteiras
< 1062px a barra de abas rola em si mesma (o recurso, não a regra)
`flex: 0 1 auto` (e não `1 1`) é o que mantém isso: sem crescer, a barra
ocupa o tamanho natural e a ação fica encostada à direita; a quebra é
decidida por esse tamanho natural. O `min-width: 0` só entra depois da
quebra, para a barra poder encolher e rolar quando nem a linha toda basta.
*/
.topo-linha-abas {
gap: 12px;
flex-wrap: wrap;
row-gap: 8px;
}
.topo-linha-abas > :first-child {
flex: 0 1 auto;
min-width: 0;
}
/* ── Estreito ── */
@media (max-width: 860px) {
.topo-linha { padding: 9px 20px; }
.topo-nome strong { font-size: 15px; }
.topo-nome span { display: none; }
.topo-acoes { gap: 6px; }
.topo-btn { padding: 7px 10px; font-size: 12px; }
.topo-onde { padding-left: 8px; }
}
@media (max-width: 640px) {
.topo-linha { padding: 9px 14px; }
.topo-org, .topo-org-fixa { max-width: 14ch; }
/* No telefone os dois menus ganham alvo de toque maior. A navegação NÃO
precisa mais mudar de lugar aqui: ela já está atrás do botão "Gestão", que
é um alvo só em qualquer largura. Enquanto os destinos eram um botão cada
na barra, esta media query os escondia e uma cópia deles aparecia dentro
do menu de conta — duas listas do mesmo conteúdo, mantidas à mão. */
.conta-menu,
.menu-gestao { right: -4px; min-width: 236px; }
.menu-gestao { right: auto; left: -4px; }
.menu-suspenso button,
.menu-suspenso a { padding: 12px; font-size: var(--texto-leitura); }
.conta-avatar { width: 44px; height: 44px; font-size: var(--texto-corpo); }
.menu-gestao-btn { min-height: 44px; }
}
@media (max-width: 560px) {
/* Rótulo some, ícone fica. A regra continua valendo para os botões que
sobraram na barra — Voltar e Console —, que são dois e têm ícone
reconhecível. Os destinos do perfil não passam mais por aqui: eles saem da
barra 80px antes, em 640px, e reaparecem escritos por extenso dentro do
menu. Enquanto todos os sete passavam por esta regra, a tela estreita
mostrava uma fileira de emoji e o aria-label era a única coisa que ainda
dizia o que cada um fazia — o que resolve para quem usa leitor de tela e
não resolve para quem enxerga. */
.topo-btn .topo-btn-rotulo { display: none; }
.topo-btn { padding: 8px 10px; }
/* "Gestão" mantém o rótulo aqui, ao contrário dos outros botões da barra.
Um ⚙ com uma seta ao lado não diz que ali estão as áreas do acesso — e
esconder o rótulo dele desfaria justamente o que o menu veio resolver, que
era a barra virar uma fileira de ícones sem nome. Cabe porque, com os
destinos recolhidos, sobraram três ou quatro itens na barra em vez de
sete. */
.menu-gestao-btn .topo-btn-rotulo { display: inline; }
/* A simulação continua visível de propósito, mesmo aqui: é o único item que,
escondido, faz o administrador concluir que perdeu acesso. */
.topo-simulando { padding: 5px 9px; font-size: 11px; }
}
/* O cabeçalho é navegação: não vai para o papel junto com o laudo. */
@media print {
.topo { display: none !important; }
}
/* ══════════════════════════════════════════════════════════════════════════════
DIÁLOGOS
──────────────────────────────────────────────────────────────────────────────