/* ZEFRA EPI — complementos deste app ao design system.
   Carregado DEPOIS de /static/zefra/css/zefra-ui.css. Só tokens (var(--...)), nenhum hex.
   Tudo aqui é específico do app ou paliativo de algo que ainda falta no design system. */

/* ---------- barra lateral: e-mail do usuário e ações (tema + sair) no rodapé ---------- */
.sidebar-user { margin-bottom: var(--space-3); }

/* ---------- entrada dividida: o aviso "RODANDO LOCAL" ocupa a 1ª linha (~1,85rem) ---------- */
.dev-banner + .auth-split { min-height: calc(100vh - 1.85rem); }
/* no celular a faixa da marca fica com a altura do conteúdo (o painel do formulário ocupa o resto) */
@media (max-width: 900px) { .auth-split { grid-template-rows: auto 1fr; } }

/* ---------- números/datas/CPF: não quebrar em duas linhas (a tabela rola na horizontal) ---------- */
.num { white-space: nowrap; }

/* ---------- textos de apoio e listas ---------- */
p.hint { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--text-faint); }
.field p.hint { margin: 0; }
.lista-simples { margin: 0 0 var(--space-4); padding-left: 1.2rem; color: var(--text-soft); }
.lista-simples:last-child { margin-bottom: 0; }
.entidade-grid { margin-bottom: var(--space-8); }
.page > .acoes { margin-bottom: var(--space-6); }
.form-inline { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.form-inline .field { margin-bottom: 0; flex: 1 1 260px; }

/* ---------- linhas repetidas ----------
   Bug no DS: em .linha-repetida a declaração grid-template-columns mistura repeat(auto-fit, …) com
   a trilha "auto", o que é CSS inválido; o navegador a descarta e a linha vira 1 coluna (o app antigo
   tinha a mesma regra inválida). Mantém-se o comportamento efetivo (1 coluna) e só se evita que o botão
   "Remover" estique na largura toda. (Pedido ao DS: corrigir a regra.) */
.linha-repetida .linha-remover { justify-self: end; }
/* linha com um campo só (perguntas do checklist): campo + botão */
.linha-repetida.linha-simples { grid-template-columns: 1fr auto; }

/* ---------- assinatura em canvas ----------
   A tinta do canvas é escura e o PNG segue para o PDF (papel branco): a caixa fica sempre
   clara, inclusive no tema escuro. (Pedido ao DS: token de "papel" para este caso.) */
.campo-assinatura-caixa { background: var(--neutral-0); }

/* ---------- portal do funcionário ---------- */
.portal-header .logo { color: var(--text); }
.portal-titulo { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.portal-nota { margin: 0 0 var(--space-5); font-size: var(--text-base); color: var(--text-soft); }
.portal-secao { margin-bottom: var(--space-6); }
.portal-secao-titulo { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-md); margin: 0 0 var(--space-3); }
.portal-item.destaque { border-color: var(--brand); background: var(--brand-soft); }
.portal-item.atencao { border-color: var(--warn-solid); background: var(--warn-bg); }

/* opções de resposta (OK / Não OK / N/A): alvos de toque grandes, marcados também pelo próprio rádio */
.opcoes-resposta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.opcao-resposta {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem;
  padding: 0.5rem 0.6rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font-weight: 600; font-size: var(--text-base); cursor: pointer;
}
.opcao-resposta:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-soft-text); }
.opcao-resposta:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }