/* Perfil (Vitrine Profissional / Carteira do Cliente): estilos compartilhados entre os dois perfis */

/* ---- Capa + avatar sobreposto (estilo Facebook/LinkedIn) ---- */
.perfil-cover {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
  /* A foto entra pelo JS, entao a capa nasce sem imagem: sem esta cor ela ficaria
     transparente por um instante e deixaria a pagina piscar. */
  background-color: rgb(var(--color-surface-container));
}

@media (min-width: 640px) {
  .perfil-cover {
    height: 240px;
  }
}

.perfil-avatar {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 4px solid rgb(var(--color-surface-container-lowest));
  object-fit: cover;
  background: rgb(var(--color-surface-container));
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .perfil-avatar {
    width: 128px;
    height: 128px;
  }
}

/* ---- Índice SUIMOB: barras de pilar ---- */
.perfil-pillar-track {
  height: 8px;
  border-radius: 999px;
  background: rgb(var(--color-outline-variant) / 0.4);
  overflow: hidden;
}

.perfil-pillar-fill {
  height: 100%;
  border-radius: 999px;
  background: rgb(var(--color-secondary));
  transition: width 0.6s ease;
}

/* ---- Abas do Perfil ---- */
.perfil-tabs-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.perfil-tabs-scroll::-webkit-scrollbar {
  height: 4px;
}

.perfil-tabs-scroll::-webkit-scrollbar-thumb {
  background: rgb(var(--color-outline-variant));
  border-radius: 999px;
}

/* ---- Trilho horizontal (Empreendimentos da construtora) ----
   A lista cresce de lado, não para baixo: a construtora vai somando empreendimentos e o perfil
   não pode virar uma coluna sem fim. A barra fina é a mesma das abas — presente o bastante
   para se saber que há mais coisa à direita, discreta o bastante para não roubar a cena. */
.perfil-trilho {
  scrollbar-width: thin;
}

.perfil-trilho::-webkit-scrollbar {
  height: 4px;
}

.perfil-trilho::-webkit-scrollbar-thumb {
  background: rgb(var(--color-outline-variant));
  border-radius: 999px;
}

.perfil-tab-btn {
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  color: rgb(var(--color-on-surface-variant));
  transition: color 0.2s ease, border-color 0.2s ease;
}

.perfil-tab-btn.is-active {
  color: rgb(var(--color-secondary));
  border-color: rgb(var(--color-secondary));
}

.perfil-tab-panel {
  display: none;
}

.perfil-tab-panel.is-active {
  display: block;
  animation: wizard-fade-in-up 0.4s ease-out both;
}

/* ---- Selos ---- */
.perfil-selo-card {
  flex-shrink: 0;
  width: 148px;
}

/* ---- Linha do tempo (aba Atividade) ---- */
.perfil-timeline-item {
  position: relative;
  padding-left: 28px;
  padding-bottom: 24px;
}

.perfil-timeline-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgb(var(--color-secondary));
}

.perfil-timeline-item::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: rgb(var(--color-outline-variant));
}

.perfil-timeline-item:last-child {
  padding-bottom: 0;
}

.perfil-timeline-item:last-child::after {
  display: none;
}

/* ---- Barra de estrelas somente leitura (categorias comportamentais) ---- */
.perfil-stars {
  letter-spacing: 1px;
}

.perfil-stars .material-symbols-outlined {
  font-size: 16px;
}

/* ---- Trocar capa e foto: a área inteira é o botão (padrão Facebook/LinkedIn) ---- */
.perfil-troca-capa {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perfil-troca-selo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.perfil-troca-capa:hover .perfil-troca-selo,
.perfil-troca-capa:focus-visible .perfil-troca-selo {
  opacity: 1;
}

/* A foto do perfil: o círculo inteiro é clicável. */
.perfil-troca-foto {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.perfil-troca-foto:hover,
.perfil-troca-foto:focus-visible {
  opacity: 1;
}

/* Selinho fixo de câmera: indica que dá pra trocar sem depender do hover. */
.perfil-troca-selo-foto {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-surface-container-lowest));
  border: 1px solid rgb(var(--color-outline-variant));
  color: rgb(var(--color-on-surface-variant));
  pointer-events: none;
}

/* ---- Contato parcial: o resto do número abre num clique ---- */
.perfil-contato-mostrar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-secondary));
  background: rgb(var(--color-secondary) / 0.1);
  color: rgb(var(--color-secondary));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.perfil-contato-mostrar:hover {
  background: rgb(var(--color-secondary) / 0.2);
}

.perfil-contato-contado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(var(--color-secondary));
}

/* ---- Contato oculto: o comprador que nao quer o numero exposto ----
   Corretor e construtora vivem de ser encontrados; comprador e investidor, nao. No perfil do
   cliente o contato nasce oculto (mostrar_contato = false no banco), e oculto quer dizer
   oculto de verdade: nem o comeco do numero, nem o botao de abrir o resto. Some tudo e fica
   so o aviso de que existe um contato ali, atras de uma conexao. Quem liga e desliga o
   data-oculto e o js/perfil-cliente.js, lendo o que a API respondeu. */
[data-contato][data-oculto='sim'] [data-parcial],
[data-contato][data-oculto='sim'] [data-cheio],
[data-contato][data-oculto='sim'] [data-mostrar],
[data-contato][data-oculto='sim'] [data-contado] {
  display: none !important;
}

.perfil-contato-privado {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(var(--color-on-surface-variant));
}

[data-contato][data-oculto='sim'] .perfil-contato-privado {
  display: inline-flex;
}

/* Com o contato oculto, dizer a quem visita que a pessoa "prefere ser procurada por e-mail"
   e apontar para uma porta que nao existe. A linha continua sendo do dono — e dele que ela
   fala, e ele precisa dela para escolher — e some so de quem visita. */
html[data-perfil-visao='visitante'] #perfilLinhaContatoPreferido[data-oculto='sim'] {
  display: none;
}

/* ---- Conquistas: quanto falta para cada uma ---- */
.perfil-conquista-track {
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--color-outline-variant));
  overflow: hidden;
}

.perfil-conquista-fill {
  height: 100%;
  border-radius: 999px;
  background: rgb(var(--color-secondary));
}

/* Estrelas que o dono clica pra definir a nota da especialidade. */
.perfil-estrela-edit {
  line-height: 1;
  cursor: pointer;
}

/* ---- Data de nascimento: opcional e de dono ----
   O JS marca a linha com data-visivel a cada /corretores/me; quem decide se ela some e a
   visao (js/perfil-visao.js). Para quem visita, data escondida nao chega nem a ser pintada. */
html[data-perfil-visao='visitante'] #perfilLinhaNascimento[data-visivel='nao'] {
  display: none;
}

/* ---- Blocos que dependem do que o corretor preencheu ----
   O JS marca o card com data-vazio a cada /corretores/me. Vazio, ele continua na tela do
   dono (com o convite para preencher) e some para quem visita: bloco vazio no perfil
   publico e pior do que bloco nenhum. */
html[data-perfil-visao='visitante'] [data-vazio='sim'] {
  display: none;
}

/* ---- Botao de WhatsApp do cabecalho ----
   O botao so tem sentido com numero. Quem manda mostrar ou esconder pela visao e o
   .perfil-so-visitante (js/perfil-visao.js), entao a falta de numero nao pode ser um
   hidden que a visao apaga na proxima troca — vira um data-sem-numero, e o CSS decide. */
#perfilWhatsappBotao[data-sem-numero='sim'] {
  display: none;
}

/* ---- Corretor ou construtora na mesma tela ----
   Quem marca o <html> e o js/perfil-tipo.js; aqui so escondemos o que nao e daquele perfil.

   As duas regras so tiram da tela, nunca devolvem. E de proposito: devolver significaria
   escrever um display aqui, e o display de cada bloco vem das classes do Tailwind (flex,
   grid, inline-flex). A construtora fica escondida enquanto o <html> nao disser que e dela,
   entao a tela nunca pisca com o campo do outro perfil antes de o JS rodar. */
html:not([data-perfil-tipo='construtora']) .perfil-so-construtora,
html[data-perfil-tipo='construtora'] .perfil-so-corretor {
  display: none !important;
}