.records-panel{padding:0}.records-panel table{min-width:810px}.approval-panel{max-width:930px}.approval-count{font-size:11px;font-weight:700;color:#b87526;background:#fff2e1;border-radius:20px;padding:5px 8px}.approval-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 0;border-top:1px solid var(--line)}.approval-row strong{font-size:13px}.approval-row p{margin:4px 0 0;font-size:12px;color:var(--muted)}.approval-row>div:last-child{display:flex;gap:8px}.approval-row .outline-button,.approval-row .create-button{padding:8px 10px;font-size:12px}.approval-empty{text-align:center;padding:32px;color:var(--muted);font-size:13px}.record-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}.record-dialog label{font-size:12px;font-weight:650;color:#526174}.warning-dialog select{display:block;width:100%;margin-top:6px;border:1px solid #dce3ec;border-radius:7px;padding:9px 10px;background:#fff;color:var(--ink);font:inherit;font-size:13px}@media(max-width:720px){.approval-row{align-items:flex-start;flex-direction:column}.record-times{grid-template-columns:1fr}}

/* Busca de Aprovacoes. A .people-toolbar padrao tem borda inferior e padding
   de 18px 22px, pensados pra encabecar um painel sem .panel-heading; aqui ela
   vem DEPOIS do cabecalho, entao a borda seria uma segunda linha colada. */
.approval-panel .approval-toolbar{padding:0 0 14px;border-bottom:0}
.approval-panel .approval-toolbar .people-search{width:min(340px,100%)}

/* Sincronização falhou: sem este aviso a tela fica idêntica a um período
   legitimamente vazio, e quem busca por uma pessoa não descobre que o problema
   é conexão/sessão, não ausência de marcação. */
.records-sync-error {
  display:flex; flex-direction:column; gap:3px;
  margin:0 0 14px; padding:13px 15px;
  border:1px solid #ffd3d3; border-radius:13px; background:#fff6f6;
}
.records-sync-error strong { color:#a13636; font-size:13px; }
.records-sync-error span { color:#9a5a5a; font-size:12px; line-height:1.45; }
/* Guarda obrigatória: `.hidden` e `.records-sync-error` empatam em
   especificidade (0,1,0), e records.css carrega depois de styles.css — sem
   esta linha o aviso ficaria SEMPRE visível. Mesma armadilha já vista três
   vezes neste projeto; existe teste para ela (test-hidden-vencido-por-display). */
.records-sync-error.hidden { display:none; }
.records-sync-trace { margin-top:7px; }
.records-sync-trace summary { color:#a13636; font-size:11px; font-weight:700; cursor:pointer; }
.records-sync-trace pre {
  margin:6px 0 0; padding:9px 10px; overflow-x:auto;
  border-radius:9px; background:#fff; border:1px solid #ffd3d3;
  color:#7d4444; font-size:11px; line-height:1.5;
}