/* e-PGM · componentes (reforma, Fase 1).
 *
 * Componentes únicos, usados em todas as telas: ícone, controle de tema e a
 * tipografia do sistema (sete tamanhos, três
 * pesos, números tabulares). Camada "componentes": vence a base antiga
 * (estilo.css, vidro.css) e perde para o ajuste de cada tela. Só tokens. */

@layer componentes {

/* ---------- tipografia ---------- */

body { font-family: var(--fonte); font-size: var(--fs-3); }
strong, b, th { font-weight: 600; }
h1, h2 { letter-spacing: -0.01em; }
h1 { font-size: var(--fs-7); font-weight: 600; }
h2 { font-size: var(--fs-6); font-weight: 600; }
h3 { font-size: var(--fs-4); font-weight: 600; }
table, .selo, .contagem, .quadro-coluna-total, .quadro-dias, .quadro-seletor-conta, .indicador .numero,
.fila-filtro-conta, .quadro-grupo-conta, .quadro-pilula, time, .dias, .numero { font-variant-numeric: tabular-nums; }
::selection { background: var(--selecao); }

/* ---------- ícone ---------- */

.icone {
  display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.icone.icone-20 { width: 20px; height: 20px; }
button > .icone:only-child, .lupa-menu .icone, .quadro-mais .icone, .botao-copiar .icone { vertical-align: middle; }

/* ---------- tema: Claro, Escuro, Automático ---------- */

.usuario-topo .tema-topo.segmentado {
  display: inline-flex; gap: 2px; padding: 2px; min-width: 0; border: 0; border-radius: var(--raio-2);
  background: var(--neutro-suave);
}
.tema-topo.segmentado button {
  display: inline-grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0;
  border-radius: var(--raio-1); background: transparent; color: var(--texto-2); cursor: pointer;
  transition: background-color var(--t-1) var(--curva), color var(--t-1) var(--curva);
}
.tema-topo.segmentado button:hover { color: var(--texto); background: var(--neutro-suave); }
.tema-topo.segmentado button[aria-pressed="true"] { color: var(--texto); background: var(--superficie); box-shadow: var(--sombra-1); }
.tema-topo.segmentado button:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* O cartão padrão dos quadros mora em quadro-nucleos.css, nesta mesma camada. */

/* ---------- formulário e ações ---------- */

/* Os botões não encostam nos campos, em todo o sistema (5.13.1). */
.formulario + .acoes { margin-top: var(--e-4); }

/* Cartões lado a lado não herdam a margem do cartão de cima (revisão 5.13.0, item 4):
   o segundo descia 16 px na Agenda e nos Prazos do dia do Contencioso. */
:where(.grade-dois, .ct-acervo) > .cartao + .cartao { margin-top: 0; }

/* Prioridade da agenda e dos projetos: Urgente em vermelho, Alta em âmbar, as outras neutras. */
.etiqueta.et-prioridade-critica { background: var(--vencido-suave); color: var(--vencido); }
.etiqueta.et-prioridade-alta { background: var(--atencao-suave); color: var(--atencao); }

/* Aviso da ordem recebida na Fila (revisão 5.13.0, item 9). */
.nota.ordem-fila { margin-top: var(--e-3); }
.nota.ordem-fila p { margin: 0; }
.nota.ordem-fila .acoes-linha { margin-top: var(--e-2); }
.ordem-fila-itens { margin: var(--e-2) 0 0; padding-left: var(--e-5); }

/* Barra de formatação do editor (ajustes de 25/10, item 6): botões sem contorno nem fundo,
   como a faixa do Word; o fundo aparece ao passar o mouse ou com o foco. O campo "Estilo"
   continua campo. Entre as linhas da barra, 8 px. */
.editor-rico-barra { row-gap: var(--e-2); }
.editor-rico-barra button { border: 0; background: transparent; box-shadow: none; }
.editor-rico-barra button:is(:hover, :focus-visible) { background: var(--acao-suave); color: var(--link); }

/* Ações nas tabelas (ajustes de 25/10, item 5): numa linha, alinhadas à esquerda; o botão
   discreto perde o espaço lateral e fica alinhado com o texto das outras linhas. */
.acoes-tabela { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.acoes-tabela .acao.discreta, td > .acao.discreta:only-child { padding-inline: 0; }
/* Ações empilhadas na célula (acessos MCP, 30/10/2026): "Permissões" sobre "Revogar",
   no topo da linha. 8 px entre os botões, o mínimo do detector de telas para caixas. */
.acoes-empilhadas { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.acoes-empilhadas .acao.discreta { padding-inline: 0; }
td:has(> .acoes-empilhadas) { vertical-align: top; }

/* Várias etiquetas seguidas (30/10/2026): quebrando a linha, a segunda fileira não
   encosta na primeira; o gap faz o espaço que o " " entre elas fazia. 6 px, feitos do
   token (a escala não tem 6). */
.etiquetas-grupo { display: flex; flex-wrap: wrap; gap: calc(var(--e-1) * 1.5); align-items: center; }
/* Permissão de maior risco (o conector exclui arquivos). */
.etiqueta.et-perigo { background: var(--vencido-suave); color: var(--vencido); }
tr.linha-apagada td { color: var(--texto-2); }
.mcp-sem-acesso { margin: var(--e-3) 0 0; }
/* "Função e perfis": a função em texto, alinhada com os perfis embaixo. */
.funcao-acesso { font-weight: 500; }
/* Parecer principal novo aberto (Gestão do fluxo): o desfazer alinhado ao texto. */
.novo-principal-nota p { margin: 0 0 var(--e-2); }
.novo-principal-nota > .acao.discreta { padding-inline: 0; }

/* Acessos (revisão 5.13.0, item 12): "Editar" e o menu "..." lado a lado. */
.acoes-acesso { display: flex; align-items: center; gap: var(--e-2); }

/* Selo âmbar: estado que pede providência, sem ser prazo vencido. */
.etiqueta.et-atencao { background: var(--atencao-suave); color: var(--atencao); }

/* Atos parecidos e biblioteca de blocos (reforma, Fase 4). */
.lista-parecidos { margin: var(--e-2) 0 0; padding-left: var(--e-5); }
.lista-parecidos > li + li { margin-top: var(--e-3); }
.janela-bloco { width: min(760px, calc(100vw - 32px)); }

/* O que falta para emitir, ao lado do botão (reforma, Fase 4). */
.faltas-emissao:empty { display: none; }
.faltas-emissao { margin: var(--e-3) 0; color: var(--texto-2); }
.faltas-emissao ul { margin: var(--e-1) 0 0; padding-left: var(--e-5); }

/* Número da peça como texto, sem campo (reforma, Fase 4). */
.numero-previsto { display: block; padding: var(--e-2) 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Situação de um indicador diante da meta (reforma, Fase 3). Cor só de estado. */
.selo-meta { font-weight: 500; white-space: nowrap; }
.selo-meta.ok { color: var(--ok); }
.selo-meta.fora { color: var(--vencido); }

}

/* Novo PA que pode ser retorno de um PA com parecer (29/10/2026): as
   mensagens empilhadas, com o objeto do PA anterior em letra menor. */
.nota.novo-pa-semelhantes { display: grid; gap: var(--e-2); }
.nota.novo-pa-semelhantes small { display: block; color: var(--texto-2); font-size: var(--fs-1); }
.nota.novo-pa-semelhantes .acoes-linha { margin-top: var(--e-1); }