/* Painel da plataforma: o que falta além do painel.css (mesmo tema escuro). O destaque da marca
   aqui é âmbar, para nunca confundir este painel com o dos clientes. */
.marca-plataforma { display: flex; align-items: center; gap: 10px; }
.marca-plataforma span { display: grid; line-height: 1.15; }
.marca-plataforma small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--alerta); }
.menu a.ativo::before { background: var(--alerta); }
.menu a.ativo .ic { color: var(--alerta); }

.grupo-kpis { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.grupo-kpis:first-child { margin-top: 0; }
.grupo-kpis .ic { width: 15px; height: 15px; }
.grupo-kpis .texto-3 { text-transform: none; letter-spacing: 0; font-weight: 500; }
.kpis { margin-bottom: 4px; }
.kpi .nome .ic { width: 15px; height: 15px; color: var(--alerta); }
.cartao-grafico, .kpis + .cartao { margin-top: 16px; }

.grafico-plataforma rect { fill: var(--destaque); }
.grafico-plataforma.dinheiro rect { fill: var(--positivo); }
.grafico-plataforma .coluna:focus rect, .grafico-plataforma .coluna:hover rect { opacity: 1; }
.grafico-plataforma:hover .coluna rect { opacity: .55; }
.grafico-plataforma .coluna:hover rect { opacity: 1; }
.rotulo-grafico { margin: 0 0 6px; font-size: 12.5px; color: var(--texto-2); }

.lista-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px 0; }
.lista-cabeca h2 { margin: 0; font-size: 15px; font-weight: 600; }
.lista-cabeca .barra-filtros { margin: 0; }
.select-ordem select { height: 36px; font-size: 13px; width: auto; }
.busca { position: relative; display: block; min-width: 240px; }
.busca .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-3); pointer-events: none; }
.busca input { height: 36px; padding-left: 34px; font-size: 13px; }
#cartao-lista .tabela-rolagem { margin-top: 14px; }
.tabela-contas td { vertical-align: top; }
.tabela-contas .celula-conta { min-width: 230px; }
.celula-conta small { display: block; margin: 1px 0 6px; }
.tabela-contas td.num, .tabela-contas th { white-space: nowrap; }
.tabela-contas th .ordenar { white-space: nowrap; }
.tabela-contas .link-nome { color: var(--texto); text-decoration: none; }
.tabela-contas .link-nome:hover { text-decoration: underline; }
.selos { display: flex; flex-wrap: wrap; gap: 4px; }
.vazio-lista { padding: 8px 0 16px; }

.conexoes { display: inline-flex; gap: 4px; }
.conexao { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--superficie-2); color: var(--texto-3); opacity: .45; }
.conexao .ic { width: 15px; height: 15px; }
.conexao.ligada { background: var(--positivo-fundo); color: var(--positivo); opacity: 1; }
.conexoes-lista { display: grid; gap: 2px; }
.conexao-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.conexao-linha:last-child { border-bottom: 0; }
.conexao-linha .conexao { width: 32px; height: 32px; }
.conexao-linha .texto-2 { font-size: 12.5px; overflow-wrap: anywhere; }

.grade-detalhe .cartao { margin-bottom: 16px; }
.rodape-dados { margin: 4px 0 0; }
.campo-codigo { font: 600 22px/1 var(--mono); letter-spacing: .4em; text-align: center; height: 48px; }
.mensagem-contato { white-space: pre-wrap; min-width: 240px; max-width: 520px; }
.esqueleto-plataforma { min-height: 120px; }
.form-cadastro-plataforma { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.form-cadastro-plataforma .linha-email { margin: 0 0 12px; }

@media (max-width: 900px) {
  .busca { min-width: 0; flex: 1; }
  .lista-cabeca { padding: 14px 14px 0; }
  #cartao-lista .tabela-rolagem { padding: 0 14px; }
}