/* estilo.css — RH · Agentes (#155). Só tokens do design system. */
.rha-tela .sus { color: var(--muted); font-weight: 400; font-size: var(--ds-fs-xs, 12px); }
.rha-resumo { color: var(--muted); font-size: var(--ds-fs-sm, 13px); }
.rha-resumo b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rha-busca { min-height: 36px; min-width: 0; flex: 1 1 220px; max-width: 320px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--ds-r-sm, 6px); padding: 0 var(--ds-s3, 12px); }
.rha-nota { margin-top: var(--ds-s3, 12px); }

.rha-quem { display: inline-flex; gap: var(--ds-s2, 8px); align-items: center; color: inherit; text-decoration: none; min-width: 0; }
.rha-quem > span { display: flex; flex-direction: column; min-width: 0; }
.rha-quem b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rha-quem:hover b, .rha-quem:focus-visible b { text-decoration: underline; }
.rha-nivel { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* retrato pixel: a cor do rosto vem do token da área (pixel.jsx) */
.rha-pixel, .rha-foto { flex: none; border-radius: var(--ds-r-sm, 6px); border: 1px solid var(--line); background: var(--panel); }
.rha-foto { object-fit: cover; }
.rha-pixel .fundo { fill: var(--panel); }
.rha-pixel .olho { fill: var(--ink); }
.rha-pixel.apagado { opacity: .45; filter: grayscale(1); }

/* ficha */
.rha-ficha-cab { display: flex; gap: var(--ds-s3, 12px); align-items: center; min-width: 0; }
.rha-ficha-cab > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rha-ficha-linha { display: flex; flex-wrap: wrap; gap: var(--ds-s2, 8px); align-items: center; font-weight: 400; font-size: var(--ds-fs-sm, 13px); }
.rha-bloco { display: grid; gap: var(--ds-s2, 8px); border-top: 1px solid var(--line-soft); padding-top: var(--ds-s3, 12px); }
.rha-bloco:first-child { border-top: 0; padding-top: 0; }
.rha-bloco h3 { margin: 0; font-size: var(--ds-fs-md, 14px); }
.rha-bloco h4 { margin: var(--ds-s1, 4px) 0 0; font-size: var(--ds-fs-xs, 12px); color: var(--muted); text-transform: var(--ds-label-case, none); letter-spacing: var(--ds-label-track, 0); }
.rha-bloco p { margin: 0; }
.rha-missao-papel { font-weight: 600; }
.rha-aviso { border: 1px solid var(--line); border-left: 3px solid var(--ds-warn); border-radius: var(--ds-r-sm, 6px); padding: var(--ds-s2, 8px); font-size: var(--ds-fs-sm, 13px); }
.rha-vazio { color: var(--muted); font-size: var(--ds-fs-sm, 13px); }
.rha-lista { margin: 0; padding-left: var(--ds-s4, 16px); display: grid; gap: var(--ds-s1, 4px); font-size: var(--ds-fs-sm, 13px); }
.rha-missoes { list-style: none; padding-left: 0; }
.rha-missao { display: flex; flex-direction: column; min-width: 0; }
.rha-missao a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rha-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--ds-s1, 4px) var(--ds-s3, 12px); margin: 0; font-size: var(--ds-fs-sm, 13px); }
.rha-dl dt { color: var(--muted); }
.rha-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rha-etiquetas { display: flex; flex-wrap: wrap; gap: var(--ds-s1, 4px); }
.rha-etiqueta { border: 1px solid var(--line); border-radius: var(--ds-r-pill, 999px); padding: 1px var(--ds-s2, 8px); font-size: var(--ds-fs-xs, 12px); }
.rha-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-s2, 8px); }
.rha-numeros div { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--ds-r-sm, 6px); padding: var(--ds-s2, 8px); min-width: 0; }
.rha-numeros b { font-variant-numeric: tabular-nums; font-size: var(--ds-fs-md, 14px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rha-numeros span { color: var(--muted); font-size: var(--ds-fs-xs, 12px); }
.rha-kpis { list-style: none; padding-left: 0; }
.rha-kpi { display: grid; grid-template-columns: 1fr auto auto; gap: var(--ds-s1, 4px) var(--ds-s2, 8px); align-items: baseline; }
.rha-kpi .val { font-variant-numeric: tabular-nums; text-align: right; }
.rha-kpi .sus { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .rha-busca { max-width: none; min-height: 44px; }
  .rha-tela .chip-filtro { min-height: 44px; }
  .rha-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .rha-pixel, .rha-foto { transition: none; }
}