/* Central: dados, empresas e perfil (fix/central-ui2-dados, 2026-11-02). Carregado depois de styles.css: as regras daqui sobrepõem as de lá. */

/* ── Dados: o aviso do conector pede espaço antes da grade de bancos ── */
.dados-aviso{margin-bottom:22px}

/* ── Dados: o cartão do banco (rodada 3): o nome e o selo à esquerda, o "⋯" à direita. O menu
   (testar, editar, ver a estrutura, apagar) abre no "⋯". O endereço corta no fim, com reticências (o
   endereço inteiro vai no title). O rodapé: o acervo e o último teste, se houver ── */
.dados-cx{position:relative;border-color:var(--borda-verde)}
.dados-cx-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}
.dados-cx-nome{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;flex:1 1 auto}
.dados-cx-nome h3{min-width:0;overflow-wrap:anywhere}
.dados-cx-nome .pill{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dados-cx-w{position:relative;flex:none}
.dados-cx-w .dados-cx-mais{width:36px;height:36px;min-width:36px;min-height:36px;padding:0;justify-content:center;border:1px solid var(--borda-forte);border-radius:var(--raio-controle);color:var(--apagado)}
.dados-cx-w .dados-cx-mais:hover{color:var(--texto);background:var(--hover)}
.dados-cx-w .dados-cx-mais[aria-expanded="true"]{color:var(--destaque);border-color:var(--verde-escuro);background:var(--verde-ativo)}
.dados-cx-end{display:block;min-width:0;color:var(--texto-2);font-size:14px}
.dados-cx-ini{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a linha "Nas consultas dos DOTs" reserva duas linhas: a faixa de setores fica na mesma altura em todos os cartões; a chave não quebra no meio */
.dados-cx-consulta{display:block;min-height:2lh}
.dados-cx-consulta code{display:inline-block;max-width:100%;padding:0 6px;line-height:1.3;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.dados-cx-rodape{margin-top:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding-top:4px}
.dados-cx-rodape > .btn{flex:1 1 140px;justify-content:center;min-height:40px}
.dados-cx-teste{flex:0 1 auto;min-width:0;font-size:12.5px;line-height:1.35}
.dados-cx-apagar{flex-direction:column;align-items:stretch}
.dados-cx-apagar .acts{display:flex;flex-wrap:wrap;gap:8px}
.dados-cx-apagar .acts .btn{min-height:40px}

/* o menu "⋯": um painel ancorado no botão, com os mesmos traços do menu do artefato */
.dados-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:208px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--realce);border:1px solid var(--borda-forte);border-radius:16px;box-shadow:var(--sombra-popover);animation:dados-menu-entra 160ms ease-out both}
@keyframes dados-menu-entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dados-menu-item{display:flex;align-items:center;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--texto);font:inherit;font-size:14px;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer}
.dados-menu-item:hover{background:var(--hover)}
.dados-menu-item:disabled{color:var(--apagado);cursor:progress;background:none}
.dados-menu-item.perigo{color:var(--perigo)}
.dados-menu-sep{height:1px;margin:6px 4px;background:var(--borda)}
.dados-cx .btn:focus-visible,.dados-cx-mais:focus-visible,.dados-menu-item:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}
@media (max-width: 600px){
  .dados-cx-w .dados-cx-mais{width:40px;height:40px;min-width:40px;min-height:40px}
}
@media (prefers-reduced-motion: reduce){
  .dados-menu{animation:none}
}

/* ── Dados: o catálogo em grade de cartões, com a sigla do banco à esquerda do nome. Quatro bancos na grade
   (consulta de contêiner no .dados-cat-wrap): 4 colunas, 2 ou 1, sem sobra. A Planilha não é banco: ocupa a linha
   toda, numa faixa abaixo (cui9), sem cortar a grade dos bancos. ── */
.dados-cat-wrap{container-type:inline-size}
.dados-cat-grade{grid-template-columns:minmax(0,1fr)}
@container (min-width:416px) and (max-width:1063px){
  .dados-cat-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:1064px){
  .dados-cat-grade{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.dados-cat-grade > .dados-cat-planilha{grid-column:1/-1}
/* a faixa da Planilha, na largura de 416px para cima: o título e a descrição à esquerda, o botão à direita, no mesmo cartão */
@container (min-width:416px){
  .dados-cat-planilha{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 24px}
  .dados-cat-planilha > .dados-cat-topo{grid-column:1;grid-row:1}
  .dados-cat-planilha > p{grid-column:1;grid-row:2}
  .dados-cat-planilha > .foot-p{grid-column:2;grid-row:1 / span 2}
}
.dados-cat{transition:background-color 150ms ease-out,border-color 150ms ease-out}
.dados-cat:hover{background:var(--realce);border-color:var(--borda-verde)}
.dados-cat-topo{display:flex;align-items:center;gap:12px;min-width:0}
.dados-cat-topo h3{min-width:0;overflow-wrap:anywhere}
.dados-sigla{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--raio-controle);background:#0b110d;border:1px solid var(--borda-verde);color:var(--destaque);font-size:13px;font-weight:700;letter-spacing:.04em}
.dados-cat .foot-p{margin-top:auto}
.dados-cat .foot-p .btn{min-height:40px}
/* (cui6) "Conectar" de cada tipo e "Abrir acervo" de cada banco são ações de catálogo: contorno verde; o hover ganha o fundo de ativo */
.dados-cat .foot-p .btn.g:hover,.dados-cx-rodape > .btn.g:hover{background:var(--verde-ativo)}
/* no celular (cartão de até 415px, uma coluna), o botão "Conectar" sobe para a linha do título: o cartão cai de ~180px para ~120px */
@container (max-width:415px){
  .dados-cat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
  .dados-cat > .dados-cat-topo{grid-column:1;grid-row:1}
  .dados-cat > p{grid-column:1/-1;grid-row:2}
  .dados-cat > .foot-p{grid-column:2;grid-row:1;margin-top:0}
  .dados-cat > .foot-p > span{display:none}
}
@media (prefers-reduced-motion: reduce){
  .dados-cat{transition:none}
}

/* ── Sua conta (Perfil): duas colunas com Empresa, Sessão, Acesso, Primeiros passos e Acessos;
   o Levar tudo ocupa a largura toda. Os cartões de uma linha têm a mesma altura; o conteúdo da Sessão fica logo abaixo do título (o vão sobra no fim do cartão) ── */
.perfil-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.perfil-grade > *{min-width:0}
.sessao{display:flex;flex-direction:column;justify-content:flex-start}
.perfil-avatar{width:96px;height:96px;font-size:30px}
/* o topo do Perfil alinha o título ao topo do avatar (e não ao centro): o H1 cai no mesmo y das outras telas */
.perfil-topo{align-items:flex-start}
.levar-tudo{grid-column:1/-1}
.levar-tudo .row-t > .btn{min-height:40px}
.levar-tudo .row-t small{display:block;max-width:62ch}

/* ── Empresas: os cartões dividem a linha (auto-fit: com poucos, cada um ocupa mais) e têm a mesma altura; a ação "Abrir" em botão de verdade ── */
.empresas-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:stretch}
.empresa-topo > .btn,.empresa-topo > .pill{flex:none}
.empresa-card .btn{min-height:40px}
/* (cui9) a empresa aberta: o botão "Aberta agora" ocupa o lugar do "Abrir" (mesmo tamanho e posição), desabilitado mas sem o esmaecido de desabilitado */
.empresa-topo > .btn:disabled{opacity:1;filter:none;cursor:default;color:var(--destaque);border-color:var(--verde-escuro);background:var(--verde-ativo)}

@media (max-width: 860px){
  .perfil-grade{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 600px){
  .levar-tudo .row-t{flex-direction:column;align-items:stretch}
  .levar-tudo .row-t > .btn{justify-content:center}
  /* o avatar de 56px ao lado do nome, numa linha só */
  .perfil-topo{flex-wrap:nowrap;gap:14px}
  .perfil-topo > div{min-width:0}
  .perfil-avatar{width:56px;height:56px;font-size:20px}
}

/* ── Cabeçalho das telas de Dados: a pílula do acervo fica numa linha só ── */
.cabec .acts .pill{white-space:nowrap}

/* ── Empresas: a sigla e o nome no alto, a ação à direita, os selos numa linha só embaixo, alinhados à borda do cartão (sob a sigla, como a descrição).
   O .empresa-nome vira display:contents: o h2 e os selos entram na grade do topo. ── */
.empresa-topo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.empresa-nome{display:contents}
.empresa-nome h2{grid-column:2;grid-row:1;margin:0;min-width:0}
.empresa-topo > .btn,.empresa-topo > .pill{grid-column:3;grid-row:1;justify-self:end}
.empresa-nome .acts{grid-column:1/-1;grid-row:2;margin:0}
/* o link com cara de botão não sublinha (Console de operação) */
.cabec a.btn{text-decoration:none}

/* ── Alvo de toque: no celular, 40px de altura nos botões do Perfil e dos cabeçalhos ── */
@media (max-width: 600px){
  .perfil-grade .btn,.cabec .acts .btn{min-height:40px}
}