/*
 * Painel · estilos de portal ADM: empresas, empresa e equipe — pacote B3.
 * Mesmas regras do painel.css: só layout, tudo com var(--token); nada de cor escrita à mão, de @font-face ou de @import.
 * Este arquivo é só do pacote: o painel.css fica para o que é de todos.
 */

/* ---------- Navegação do portal ADM ---------- */
/* No computador a conta é só o ícone do topo e o item "Minha conta" some da linha de seções; no celular (menu de baixo) ele continua. */
.topo-nav a[href="#/plataforma/conta"] { display: none; }
.menu-usuario:has(.menu-usuario__lista a[href="#/plataforma/conta"]) summary { padding: 0 var(--espaco-2); }
.menu-usuario:has(.menu-usuario__lista a[href="#/plataforma/conta"]) summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Seis itens no menu de baixo do celular: letra um pouco menor para os nomes mais longos não se encostarem. */
.ui-nav-baixo:has(a[href="#/plataforma/conta"]) a { font-size: 11px; padding-inline: 2px; }

/* O selo "Portal ADM" ao lado da marca, só nas telas do portal (o topo é o mesmo das empresas). */
.ui-topo:has(.menu-usuario__lista a[href="#/plataforma/conta"]) .ui-marca::after { content: "Portal ADM"; margin-left: var(--espaco-3); font: 400 14px/20px var(--font-texto); color: var(--feltro-400); }

/* ---------- Telas A1 a A3 e A6 ---------- */
.ui-resumo.adm-resumo--atencao { border-color: var(--atencao-ponto); background: var(--atencao-suave); }
.adm-voltar { display: inline-flex; align-items: center; gap: var(--espaco-1); min-height: var(--alvo-toque); width: fit-content; color: var(--link); text-decoration: none; font-weight: 600; }
.adm-voltar:hover { text-decoration: underline; }

.adm-form, .adm-form__corpo, .adm-criando { display: flex; flex-direction: column; gap: var(--espaco-4); max-width: 720px; width: 100%; }
.adm-form__corpo .ui-cartao { display: flex; flex-direction: column; gap: var(--espaco-4); }

.adm-empresa { display: flex; flex-direction: column; gap: var(--espaco-5); }
.adm-selos { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
.adm-duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-5); align-items: start; }

/* A prévia do "ver como a empresa": moldura tracejada de atenção, só leitura. */
.adm-previa { display: flex; flex-direction: column; gap: var(--espaco-3); padding: var(--espaco-4); border: 2px dashed var(--atencao-ponto); border-radius: var(--raio-3); }
.adm-previa__rotulo { font-size: 13px; line-height: 18px; color: var(--texto-2); }
.adm-previa__conteudo { display: flex; flex-direction: column; gap: var(--espaco-3); }

.adm-dialogo { max-height: 90vh; overflow: auto; }
/* Mensagens e resultados ocupam espaço só quando têm algo (a região de aviso fica na página, vazia, para o leitor de tela). */
.adm-pilha > :not(:empty) ~ :not(:empty) { margin-top: var(--espaco-4); }

@media (max-width: 899px) {
  .adm-duas-colunas { grid-template-columns: 1fr; }
}

/* Equipe no celular: o estado por extenso ("Aguardando o primeiro acesso") não cabe ao lado do rótulo; quebra para a linha de baixo em vez de sair do cartão. */
@media (max-width: 719.98px) {
  .adm-equipe td { flex-wrap: wrap; }
  .adm-equipe td .ui-selo { white-space: normal; max-width: 100%; }
}