/* assets/css/console.css
   Console da plataforma: cartão da empresa (conta), v1.16.1.
   De cima para baixo: faixa da conta (contrato + ações), CNPJs em blocos e
   Pessoas em largura inteira, com o e-mail sempre inteiro (quebra a linha,
   nunca reticências). Marcação em ui/plataforma/painel-cartao.js. */

.cliente-alerta{flex:none}

/* Faixa da conta: termos do contrato por extenso e as ações que valem para a conta toda. */
.cliente-conta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:14px;padding:10px 12px 10px 14px;
  border-radius:var(--r);background:var(--papel-2);border:1px solid var(--borda)}
.cliente-conta p{flex:1 1 280px;margin:0;font-size:13px;line-height:1.5;color:var(--texto-2)}
.cliente-conta p b{color:var(--texto);font-weight:650}
.cliente-conta-acoes{display:flex;flex-wrap:wrap;gap:8px}

.cliente-secao{min-width:0}
.cliente-secao .secao-topo{flex-wrap:wrap;margin-bottom:10px}
.cliente-secao .secao-topo .botao-mini{flex:none}

/* CNPJs: blocos lado a lado (1, 2, 3, 4+ por linha conforme a largura). */
.cnpjs-grade{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.cnpj-bloco{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:space-between;gap:6px 8px;min-width:0;padding:12px 12px 4px 14px;
  border-radius:var(--r);background:var(--papel-2);border:1px solid var(--borda)}
.cnpj-id{display:grid;gap:2px;min-width:0}
.cnpj-id b{font-size:14px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.cnpj-id small{font-size:12px;color:var(--texto-3);font-variant-numeric:tabular-nums}
.cnpj-bloco>.pilula{align-self:start}
.cnpj-bloco .lista-acoes{grid-column:1/-1;margin:0 0 0 -10px}
.cnpj-bloco.inativo{background:transparent;border-style:dashed}
.cnpj-bloco.inativo b{color:var(--texto-3);text-decoration:line-through}
.cnpjs-grade .vazio,.pessoas-vazio{grid-column:1/-1;margin:0;padding:14px;border:1px dashed var(--borda-forte);border-radius:var(--r);
  font-size:14px;line-height:1.5;color:var(--texto-3)}

/* Pessoas: lista em largura inteira, medida pela própria lista (container).
   Até 460px: identidade, perfil/situação e ações em três linhas (o e-mail
   ganha a largura toda). De 460 a 720px: ações à direita da identidade.
   720px+: uma linha com quatro colunas, alinhadas entre as linhas. */
.pessoas-titulo{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-size:13px;font-weight:600;color:var(--texto-2)}
.secao-topo+.pessoas-titulo,.nota+.pessoas-titulo{margin-top:4px}
.pessoas-titulo span{padding:0 8px;border-radius:var(--r-pilula);background:var(--papel-2);border:1px solid var(--borda);
  font-size:12px;color:var(--texto-3);font-variant-numeric:tabular-nums}
.pessoas{list-style:none;container-type:inline-size;border:1px solid var(--borda);border-radius:var(--r);overflow:hidden}
.pessoa{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-areas:"av id" ". meta" ". acoes";
  align-items:center;column-gap:12px;row-gap:6px;padding:10px 12px}
.pessoa+.pessoa{border-top:1px solid var(--borda)}
.pessoa>.avatar{grid-area:av;align-self:start}
.pessoa-id{grid-area:id;display:grid;gap:1px;min-width:0}
.pessoa-id b{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.pessoa-email{font-size:13px;line-height:1.4;color:var(--texto-2);overflow-wrap:anywhere}
.pessoa-detalhe{font-size:12px;line-height:1.45;color:var(--texto-3)}
.pessoa-meta{grid-area:meta;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.pessoa-acesso{font-size:12px;color:var(--texto-3);white-space:nowrap}
.pessoa .lista-acoes{grid-area:acoes;justify-self:start;margin:-4px 0 -6px -10px}
.pessoa.suspensa .pessoa-id b{color:var(--texto-3)}
.pessoa.com-problema{background:color-mix(in srgb,var(--amarelo-suave) 55%,transparent)}
.avatar.avatar-convite{background:var(--papel-2);color:var(--texto-2);border:1px solid var(--borda-forte)}
@media (hover:hover){.pessoa:hover{background:color-mix(in srgb,var(--texto) 3%,transparent)}}
@container (min-width:460px){
  .pessoa{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"av id acoes" ". meta meta"}
  .pessoa .lista-acoes{justify-self:end;margin:0}
}
@container (min-width:720px){
  .pessoa{grid-template-columns:28px minmax(0,1.3fr) minmax(0,1fr) auto;grid-template-areas:"av id meta acoes"}
  .pessoa>.avatar{align-self:center}
}

@media (max-width:520px){
  .cliente-conta-acoes,.cliente-conta-acoes .botao{width:100%}
  .cliente-conta-acoes .botao{justify-content:center}
  .cnpjs-grade{grid-template-columns:1fr}
}