/* Explorador do catálogo de agentes.
   Usa os tokens de site.css — claro e escuro vêm de graça. */

#explorador-agentes { margin-top: 8px }

.exp-status { color: var(--muted); font-size: .95rem; padding: 24px 0 }
.exp-erro { color: var(--link) }

.exp-resumo {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px;
}
.exp-resumo > div {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px;
}
.exp-resumo b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1 }
.exp-resumo span {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

.exp-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px }
.exp-busca {
  flex: 1 1 260px; min-width: 0; padding: 11px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 400 .95rem var(--font);
}
.exp-campo { display: flex; flex-direction: column; gap: 4px }
.exp-campo span {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.exp-campo select {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: 400 .9rem var(--font); max-width: 230px;
}
.exp-limpar {
  padding: 11px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: 700 .88rem var(--font); cursor: pointer;
}
.exp-limpar:hover { border-color: var(--orange) }

.exp-painel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px }
.exp-lista, .exp-detalhe {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; max-height: 620px; overflow: auto;
}

/* Árvore ------------------------------------------------------------- */
.exp-no > summary, .exp-folha {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px;
  cursor: pointer; list-style: none;
}
.exp-no > summary::-webkit-details-marker { display: none }
.exp-no > summary::before {
  content: "▸"; color: var(--muted); font-size: .8rem; width: 11px; flex: none;
  transition: transform .12s ease;
}
.exp-no[open] > summary::before { transform: rotate(90deg) }
.exp-folha { padding-left: 25px }
.exp-no > summary:hover, .exp-folha:hover { background: var(--chip) }
.exp-filhos { margin-left: 14px; border-left: 1px solid var(--line); padding-left: 4px }

.exp-ponto { width: 9px; height: 9px; border-radius: 2px; flex: none; transform: rotate(45deg) }
.exp-maestro { background: var(--orange) }
.exp-sub_maestro { background: #F39B6F }
.exp-agente { background: #6E7DA0 }
.exp-componente { background: #9AA6BE }
.exp-sub_agente { background: var(--line) }

.exp-nome { font-size: .92rem; font-weight: 600; min-width: 0 }
.exp-meta {
  margin-left: auto; font-family: var(--mono); font-size: .7rem; color: var(--muted);
  white-space: nowrap; padding-left: 10px;
}
.exp-contagem { color: var(--muted); font-size: .82rem; margin: 4px 0 10px }

/* Detalhe ------------------------------------------------------------ */
.exp-trilha { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 12px }
.exp-trilha button {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--link);
  font: 700 .76rem var(--font); text-align: left;
}
.exp-trilha button:hover { text-decoration: underline }
.exp-trilha span { color: var(--muted); font-size: .76rem }
.exp-trilha button:last-of-type { color: var(--ink); cursor: default }

.exp-detalhe h3 { margin-bottom: .6rem }
.exp-detalhe h4 {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px;
}
.exp-descricao { font-size: .95rem; margin-top: 12px }
.exp-nota {
  font-size: .86rem; color: var(--muted); border-left: 2px solid var(--orange);
  padding-left: 12px; margin-top: 12px;
}
.exp-chip-alerta { border: 1px solid var(--orange) }

.exp-subordinados { display: flex; flex-direction: column; gap: 2px }
.exp-sub {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font: 600 .9rem var(--font); text-align: left; width: 100%;
}
.exp-sub:hover { background: var(--chip) }

@media (max-width: 860px) {
  .exp-resumo { grid-template-columns: repeat(2, 1fr) }
  .exp-painel { grid-template-columns: 1fr }
  .exp-lista { max-height: 380px }
  .exp-detalhe { max-height: none }
  .exp-meta { display: none }
  /* min-width:0 nos dois: um item flex não encolhe abaixo do conteúdo sozinho,
     e a opção mais longa da lista de níveis de domínios empurrava a
     página 14px para fora da tela do iPhone. */
  .exp-campo { flex: 1 1 140px; min-width: 0 }
  .exp-campo select { max-width: none; width: 100%; min-width: 0 }
  .exp-limpar { flex: 0 0 auto }
}

@media (max-width: 420px) {
  .exp-resumo { grid-template-columns: 1fr 1fr; gap: 8px }
  .exp-resumo > div { padding: 11px 12px }
  .exp-resumo b { font-size: 1.25rem }
  .exp-barra { gap: 8px }
  .exp-campo { flex: 1 1 100% }
  .exp-limpar { width: 100% }
  .exp-nome { font-size: .88rem }
  .exp-lista, .exp-detalhe { padding: 10px }
  .exp-filhos { margin-left: 8px }
}