@charset "utf-8";

#perfil { padding: 21px 0;}
#perfil .apresentacao { align-items: center; gap: 20px;}
#perfil .apresentacao .foto { width: 160px; height: 160px;}
#perfil .apresentacao .foto .alterar { bottom: 0; left: 0;}
#perfil .apresentacao .foto .escolher { background-image: url('../../imagens/app/foto-up.png?v3'); background-size: 20px; background-position: 50%; background-repeat: no-repeat;}
#perfil .apresentacao .foto .alterar:hover  { transform: scale(1.1);}
#perfil .apresentacao .detalhes { flex: 1; flex-direction: column; align-items: flex-start;}
#perfil .apresentacao .detalhes h1 { font-size: 1.5em;}
#perfil .apresentacao .detalhes h1 b.verificado { padding: 0 30px 0 0; background-position: 100% 50%; background-repeat: no-repeat;}
#perfil .apresentacao .detalhes h1 b.verificado.sim { background-image: url('../../imagens/app/perfil-verificado-sim.png?v1');}
#perfil .apresentacao .detalhes h1 b.verificado.nao { background-image: url('../../imagens/app/perfil-verificado-nao.png?v1');}
#perfil .apresentacao .detalhes h2 { font-size: 1.2em;}
#perfil .apresentacao .detalhes h3 { font-size: 1em; opacity: 0.8;}
#perfil .apresentacao .detalhes h4 { font-size: 1.1em;}
#perfil .apresentacao .partilhar { top: 0; right: 0;}
#perfil .apresentacao .partilhar .opcoes { position: absolute; width: 240px; top: 40px; right: 0;}
#perfil .apresentacao .partilhar .opcoes .linkado a { padding: 10px 10px 10px 45px; background-position: 8px 50%; background-repeat: no-repeat;}
#perfil .apresentacao .partilhar .opcoes .linkado a.facebook { background-image: url('../../imagens/app/perfil-partilhar-facebook.png?v1');}
#perfil .apresentacao .partilhar .opcoes .linkado a.whatsapp { background-image: url('../../imagens/app/perfil-partilhar-whatsapp.png?v1');}
#perfil .apresentacao .partilhar .opcoes .linkado a:hover { background-color: rgb(90 90 90 / 10%);}

#perfil .conteudo { gap: 20px;}
#perfil .lapis { width: 22px; height: 22px; top: 50%; right: 5px; margin: -11px 0 0; background-image: url('../../imagens/app/perfil-lapis.png?v5');}

#perfil .destaques { margin: 11px 0 4px;}
#perfil .destaques .post h2 { font-size: 1.1em;}
#perfil .destaques .post h3 { font-size: 0.9em;}

#perfil .links { width: 280px;}
#perfil .links .post { gap: 5px;}
#perfil .links .post .ico { width: 50px; height: 70px;}
#perfil .links .post .nome { flex: 1; flex-direction: column; justify-content: center; padding: 10px 32px 10px 10px;}
#perfil .links .post .nome h2 { font-size: 0.9em;}
#perfil .links .post .nome h3 { font-size: 0.9em;}

#perfil .publicacoes { flex: 1;}
#perfil .publicacoes .imgvid .nav { width: 24px; height: 24px; top: 50%; margin: -12px 0 0;}
#perfil .publicacoes .imgvid .nav.recuar { left: 5px; background-image: url('../../imagens/app/seta-recuar.png');}
#perfil .publicacoes .imgvid .nav.avancar { right: 5px; background-image: url('../../imagens/app/seta-avancar.png');}
#perfil .publicacoes .imgvid .remover { top: 10px; right: 10px;}

#perfil .publicacoes .publicando .texto { height: 50px; font-size: 1.1em;}
#perfil .publicacoes .publicando .carregar { top: -50px; left: 105px;}
#perfil .publicacoes .publicando .carregar span { justify-content: center; align-items: center; height: 50px; padding: 0 10px 0 40px; background-image: url('../../imagens/app/perfil-upload-preto.png'); background-position: 10px 50%; background-repeat: no-repeat; font-size: 0.9em;}
#perfil .publicacoes .publicando .publicar { width: 100px; height: 50px;}

#perfil .publicacoes .post .cabecario { align-items: center; gap: 10px;}
#perfil .publicacoes .post .cabecario .foto { width: 50px; height: 50px;}
#perfil .publicacoes .post .cabecario .nome { flex: 1;}
#perfil .publicacoes .post .cabecario .nome h2 { font-size: 1.2em;}
#perfil .publicacoes .post .cabecario .nome h3 { font-size: 1em;}
#perfil .publicacoes .post .texto h2 { font-size: 1.2em;}

#perfil .popup * { scrollbar-width: none;}
#perfil .popup *::-webkit-scrollbar { display: none;}
#perfil .popup .nomesi { margin: 21px 0 0;}
#perfil .popup .nomesi h2 { font-size: 1.5em;}
#perfil .popup .nomesi h3 { font-size: 1.1em;}
#perfil .popup .apresentacao { flex-direction: column; align-items: center;}
#perfil .popup .apresentacao .foto .alterar { left: -5px; bottom: -5px;}
#perfil .popup .apresentacao .detalhes { align-items: center; text-align: center;}
#perfil .popup .apresentacao .partilhar { top: 2px; right: 0; margin: 0;}
#perfil .popup .esconder { flex-direction: column; justify-content: center; align-items: center; top: 10px; left: 10px;}
#perfil .popup .esconder span.x { font-size: 1.2em;}
#perfil .popup .esconder span.f { font-size: 0.9em;}

#minhaconta { padding: 31px 0;}
#minhaconta .conteudo { gap: 100px;}
#minhaconta .lado1 { width: 250px;}
#minhaconta .lado2 { flex: 1;}
#minhaconta .submenu .um { padding: 18px 0; margin: 2px 0; text-align: right; font-size: 1.1em;}
#minhaconta .submenu .um.ativo { font-weight: bold;}
#minhaconta .sair { padding: 15px 0; text-align: right; font-size: 0.9em;}
#minhaconta .nomesi h2 { font-size: 1.5em;}

/*tema*/
main.clear #perfil .apresentacao .partilhar .icone.abrir { background-image: url('../../imagens/app/perfil-abrir-preto.png?v3');}
main.clear #perfil .apresentacao .partilhar .icone.fechar { background-image: url('../../imagens/app/perfil-fechar-preto.png?v3');}
main.dark #perfil .apresentacao .partilhar .icone.abrir { background-image: url('../../imagens/app/perfil-abrir-branco.png?v3');}
main.dark #perfil .apresentacao .partilhar .icone.fechar { background-image: url('../../imagens/app/perfil-fechar-branco.png?v3');}

@media only screen and (max-width: 1000px){
  #minhaconta { padding: 11px 0;}
  #perfil { margin: 0 0 45px;}
}
@media only screen and (max-width: 800px){
  #perfil { padding: 5px 0;}
  #perfil .apresentacao { flex-direction: column; gap: 10px;}
  #perfil .apresentacao .partilhar { top: 5px; margin: 0;}
  #perfil .apresentacao .detalhes { align-items: center; text-align: center;}
  #perfil .destaques .post h2 { font-size: 1em;}
  #perfil .links .post .ico { height: 50px;}

  #minhaconta .conteudo { flex-direction: column; gap: 0;}
  #minhaconta .lado1 { width: 100%;}
  #minhaconta .submenu .um { padding: 25px 10px; outline: 1px solid rgb(90 90 90 / 40%); text-align: left;}
  #minhaconta .nomesi { padding: 5px 0;}
  #minhaconta .nomesi h2 { text-align: center; font-size: 1.2em;}
  #minhaconta .nomesi a { display: block; top: 0; left: 0;}
}
@media only screen and (max-width: 700px){
  #perfil .conteudo { flex-direction: column; gap: 0;}
  #perfil .links { width: 100%;}
}