/* telas/placar-funcoes/estilo.css — Placar por função (#150).
   Cor só por token. Tudo sob .pf (a folha entra no app inteiro). */
.pf .pf-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 14px; }
.pf .pf-funcao {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 10px);
  padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 8px;
}
.pf .pf-funcao.aberta { grid-column: 1 / -1; border-color: var(--ink-accent); }
.pf .pf-funcao-topo { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pf .pf-funcao-topo h3 { margin: 0; font-size: 15px; }
.pf .pf-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 8px; }
.pf .pf-norte { grid-column: 1 / -1; border-color: var(--ink-accent); }
.pf .pf-norte .ds-kpi-val { font-size: 1.6rem; }
.pf .pf-pessoa { margin: 0; }
.pf .pf-metas summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.pf .pf-metas ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.pf .pf-metas a, .pf .pf-rodape a, .pf .pf-pessoa a { color: var(--ink-accent); }
.pf .pf-funcao > .btn { align-self: flex-start; min-height: 36px; }
.pf .pf-origem h4 { margin: 10px 0 6px; font-size: 13px; }
.pf .pf-aviso { border-left: 4px solid var(--ink-warn); padding-left: 10px; }
.pf .pf-rodape { margin-top: 14px; }