/* estilo.css — Organograma de agentes (#280, refeito na #507). Só tokens do design system. */
.org-tela { display: grid; gap: var(--ds-s4, 16px); }
.org-topo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; justify-content: space-between; }
.org-topo h1 { margin: 0; font-size: 22px; }
.org-resumo { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.org-periodo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; max-width: 100%; }
.org-periodo > * { min-width: 0; max-width: 100%; }
.org-periodo input[type="date"] { min-height: 36px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--ds-r-sm, 6px); padding: 0 8px; }
.org-comparar { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; min-height: 36px; }

.org-nivel h2 { font-size: 14px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.org-n { display: inline-block; padding: 1px 6px; border-radius: var(--ds-r-sm, 4px); border: 1px solid var(--line); color: var(--ink-accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.org-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.org-card { border: 1px solid var(--line); border-radius: var(--ds-r, 8px); padding: 12px; display: grid; gap: 6px; align-content: start; }
.org-card header { display: flex; flex-direction: column; gap: 2px; }
.org-card h3 { margin: 0; font-size: 15px; }
.org-cargo, .org-faz, .org-cobertura { font-size: 12px; color: var(--muted); margin: 0; }
.org-cobertura { color: var(--muted-2); border-top: 1px solid var(--line-soft); padding-top: 6px; }

.org-kpis { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.org-kpi { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; font-size: 13px; align-items: baseline; min-height: 24px; }
.org-rot { min-width: 0; }
.org-val { font-variant-numeric: tabular-nums; text-align: right; }
.org-val.vazio { color: var(--muted-2); font-weight: 400; }
.org-delta { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 4ch; text-align: right; }
.org-delta.ok { color: var(--ink-ok); }
.org-delta.err { color: var(--ink-err); }
.org-falta .org-rot { color: var(--muted); }
.org-fonte { grid-column: 1 / -1; font-size: 11px; color: var(--muted-2); }

.org-erro { border: 1px solid var(--line); border-radius: var(--ds-r, 8px); padding: 12px; color: var(--ink-err); display: grid; gap: 6px; justify-items: start; }
.org-erro small { color: var(--muted); }

.org-ranking { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border-top: 1px solid var(--line-soft); padding-top: 12px; }
.org-ranking h2 { font-size: 14px; margin: 0 0 8px; }
.org-ranking ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.org-ranking li span { margin-right: 8px; }
.org-ranking li b { font-variant-numeric: tabular-nums; margin-right: 8px; }
.org-ranking li small { color: var(--muted); }
.org-vazio { color: var(--muted); font-size: 13px; margin: 0; }

@media (max-width: 640px) {
  .org-topo { align-items: stretch; }
  .org-periodo .chip-filtro { min-height: 44px; }
  .org-periodo input[type="date"] { min-height: 44px; flex: 1 1 140px; }
  .org-grade { grid-template-columns: 1fr; }
}

/* ── #787 · organograma vivo de robôs (tela.jsx) ───────────────────────── */
.rb-nav { display: flex; gap: 6px; align-items: center; }
.org-volta { margin: 0 0 4px; font-size: 12px; }
.org-volta a, .rb-link { color: var(--ink-accent); text-decoration: none; }
.rb-resumo b { color: var(--ink); font-weight: 600; }
.rb-corpo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.rb-com-painel .rb-corpo { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
.rb-arvore { display: grid; gap: 16px; min-width: 0; }
.rb-grade-1 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-width: 420px; }
.rb-sep { color: var(--muted-2); font-weight: 400; }
.rb-areas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.rb-area { display: grid; gap: 8px; min-width: 0; }
.rb-area-nome { margin: 0; font-size: 13px; color: var(--muted); }
.rb-operacionais { display: grid; gap: 8px; margin-left: 12px; padding-left: 10px; border-left: 2px solid var(--line); }

.rb-card { border: 1px solid var(--line); border-radius: var(--ds-r, 8px); padding: 10px 12px; display: grid; gap: 6px; cursor: pointer; min-height: 44px; transition: border-color var(--ds-dur-fast, 120ms) var(--ds-ease, ease); }
.rb-card:hover, .rb-card:focus-visible { border-color: var(--ink-accent); outline: none; }
.rb-card.ativo { border-color: var(--ink-accent); box-shadow: var(--ds-shadow-1); }
.rb-card.rb-vaga { opacity: .72; border-style: dashed; }
.rb-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rb-id { min-width: 0; display: grid; gap: 2px; }
.rb-id h3, .rb-id h2 { margin: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-id h2 { font-size: 18px; white-space: normal; }
.rb-cargo { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-estado { white-space: nowrap; }
.rb-trabalhando .rb-estado { animation: rb-pulse 1.6s ease-in-out infinite; }
@keyframes rb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .rb-trabalhando .rb-estado { animation: none; } }
.rb-missao { margin: 0; font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rb-missoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; }
.rb-missoes li { display: flex; gap: 8px; align-items: baseline; min-height: 24px; }
.rb-missoes a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-missoes a:hover { color: var(--ink-accent); }
.rb-missoes small, .rb-sem { color: var(--muted-2); font-size: 11.5px; }
.rb-sem { margin: 0; }

.rb-painel { border: 1px solid var(--line); border-radius: var(--ds-r, 8px); padding: 12px; display: grid; gap: 12px; align-content: start; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; min-width: 0; }
.rb-painel-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.rb-painel-cab { align-items: start; }
.rb-meta { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 12.5px; }
.rb-meta dt { color: var(--muted); }
.rb-meta dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.rb-meta code, .rb-md code { font-family: var(--ds-font-mono, monospace); font-size: 11.5px; border: 1px solid var(--line); border-radius: var(--ds-r-sm, 4px); padding: 0 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-meta code.rb-off { text-decoration: line-through; color: var(--muted-2); }
.rb-meta a { color: var(--ink-accent); text-decoration: none; }
.rb-md { font-size: 13px; line-height: 1.45; display: grid; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.rb-md h3, .rb-md h4, .rb-md h5 { margin: 8px 0 0; font-size: 13.5px; }
.rb-md h3 { font-size: 16px; }
.rb-md p, .rb-md ul, .rb-md ol { margin: 0; }
.rb-md ul, .rb-md ol { padding-left: 18px; display: grid; gap: 2px; }
.rb-md a { color: var(--ink-accent); }
.rb-vazio { border: 1px dashed var(--line); border-radius: var(--ds-r, 8px); padding: 16px; }
.rb-vazio code { font-family: var(--ds-font-mono, monospace); }

@media (max-width: 960px) {
  .rb-com-painel .rb-corpo { grid-template-columns: minmax(0, 1fr); }
  .rb-painel { position: static; max-height: none; order: -1; }
}
@media (max-width: 640px) {
  .rb-areas { grid-template-columns: 1fr; }
  .rb-grade-1 { max-width: none; }
  .rb-nav .chip-filtro, .rb-painel-topo .chip-filtro { min-height: 44px; }
  .rb-meta { grid-template-columns: 1fr; }
}

/* ── #815 · organograma ao vivo (grafo.jsx) ─────────────────────────────── */
.rb-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gv { display: grid; gap: 10px; min-width: 0; }
.gv-resposta { margin: 0; font-size: 14px; }
.gv-n-rodando { color: var(--ink-ok); }
.gv-n-gate { color: var(--ink-warn); }
.gv-n-mudo { color: var(--muted); }
.gv-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gv-chip { opacity: .55; }
.gv-chip.on { opacity: 1; box-shadow: inset 0 -2px 0 var(--ink-accent); }
.gv-n { font-variant-numeric: tabular-nums; color: var(--muted); margin-left: 4px; }
.gv-sel { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
.gv-sel select { min-height: 36px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--ds-r-sm, 6px); padding: 0 6px; }
.gv-corpo { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.gv-com-painel .gv-corpo { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.gv-area-grafo { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: var(--ds-r, 8px); background: var(--panel); overflow: hidden; }
.gv-area-grafo .gf { display: block; width: 100%; height: auto; }
.gv-vazio-filtro { position: absolute; inset: auto 0 12px 0; text-align: center; margin: 0; color: var(--muted); }

.gv-tronco { stroke: var(--line); stroke-width: 1.2; }
.gv-aresta { stroke: var(--line); stroke-width: 1; }
.gv-a-rodando { stroke: var(--ds-ok); stroke-width: 1.6; }
.gv-a-gate { stroke: var(--ds-warn); }
.gv-host circle { fill: var(--panel-2); stroke: var(--ink-accent); stroke-width: 2; }
.gv-host-velho circle, .gv-host-nunca circle { stroke: var(--muted-2); stroke-dasharray: 4 3; }
.gv-host text { fill: var(--ink); font-size: 11px; font-weight: 700; }
.gv-area circle { fill: var(--muted-2); }
.gv-area text { fill: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gv-robo { cursor: pointer; }
.gv-robo circle { fill: var(--panel-2); stroke: var(--muted-2); stroke-width: 1.5; }
.gv-robo-trabalhando circle { stroke: var(--ds-ok); }
.gv-robo-aguardando circle { stroke: var(--ds-warn); }
.gv-vaga circle { fill: transparent; stroke-dasharray: 3 3; }
.gv-robo text { fill: var(--ink); font-size: 11px; }
.gv-robo:focus-visible circle, .gv-missao:focus-visible circle { stroke: var(--ink-accent); stroke-width: 3; outline: none; }
.gv-missao { cursor: pointer; }
.gv-missao circle { stroke: var(--panel); stroke-width: 2; fill: var(--ds-none); transition: fill .2s; }
.gv-missao.gv-rodando circle { fill: var(--ds-ok); }
.gv-missao.gv-gate circle { fill: var(--ds-warn); animation: gv-pulsar 1.6s ease-in-out infinite; }
.gv-missao.gv-sem_noticia circle { fill: var(--muted-2); }
.gv-missao.gv-fila circle, .gv-missao.gv-pausada circle, .gv-missao.gv-revisao circle { fill: var(--panel-2); stroke: var(--muted-2); stroke-width: 1.5; }
.gv-missao.ativo circle { stroke: var(--ink-accent); stroke-width: 3; }
.gv-mais circle { fill: var(--panel-2); stroke: var(--line); }
.gv-mais text { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
@keyframes gv-pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.gv-titulo { margin: 0; font-size: 16px; font-family: var(--ds-font-mono, monospace); overflow-wrap: anywhere; }
.gv-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.gv-selo { font-weight: 700; }
.gv-selo.gv-rodando { color: var(--ink-ok); }
.gv-selo.gv-gate { color: var(--ink-warn); }
.gv-selo.gv-sem_noticia, .gv-selo.gv-fila, .gv-selo.gv-pausada, .gv-selo.gv-revisao { color: var(--muted); }
.gv-h3 { margin: 0; font-size: 13px; }
.gv-eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gv-eventos li { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; font-size: 12.5px; border-left: 2px solid var(--line); padding-left: 8px; }
.gv-eventos time { color: var(--muted); font-variant-numeric: tabular-nums; }
.gv-eventos small { color: var(--muted-2); }
.gv-eventos p { grid-column: 1 / -1; margin: 0; color: var(--muted); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .gv-missao.gv-gate circle { animation: none; }
  .gv-missao circle { transition: none; }
}
@media (max-width: 960px) {
  .gv-com-painel .gv-corpo { grid-template-columns: minmax(0, 1fr); }
  .gv-painel { order: -1; }
}
@media (max-width: 640px) {
  .gv-chip, .gv-sel select, .rb-nav .ld-toggle button { min-height: 44px; }
}
.gv-robo:focus, .gv-missao:focus { outline: none; }
.gv-host-nunca text { font-size: 9.5px; }

/* #815 · fatia 3: aresta acesa (só rodando com batimento fresco) */
.gv-trilha { fill: none; stroke: var(--ds-ok); stroke-width: 2; opacity: .35; }
.gv-bolinha { fill: var(--panel); stroke: var(--ds-ok); stroke-width: 1.5; pointer-events: none; }

/* #824 · donos para revisar: fechado por padrão, abaixo do resumo */
.rb-donos { margin: 0 0 12px; }
.rb-donos > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 4px; color: var(--muted); }
.rb-motivo { display: inline-block; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-2); vertical-align: bottom; }