/* ═══════════════════════════════════════════════════════════════════════════
   KARAMELOO — PERFIL DO EDITOR (#profilePage) · v2
   ═══════════════════════════════════════════════════════════════════════════
   Dono único do estilo desta tela. Carrega por último no index.html.

   Por que existe, medido antes de mexer:
     • a tela era ESCURA dentro de um site claro e 12 elementos reprovavam em
       contraste — 1.09, 1.13, 1.14, 1.62 contra um mínimo de 4.5. Contraste
       1.09 é texto da cor do fundo: "Pagamentos em Real", "Pedidos
       verificados" e as tags simplesmente não existiam para quem olhava;
     • o link do portfólio renderizava a 1120px do topo, numa linha de tabela
       depois de "Ferramentas";
     • "Denunciar perfil" era o primeiro elemento da tela, em barra branca.

   Agora a tela vive na mesma superfície do resto do site. O único bloco que
   segue escuro é a capa, porque atrás dela há foto — ali o branco é proposital.

   Classes conferidas no DOM renderizado, não deduzidas do código. As tags, por
   exemplo, saem como `.badge` global e não como `.ppv2Tag`.

   Cérebro: LEIS/01 - Design Anti-IA · 30 - Marketplace/Guia - Card Perfil
   Portfolio e Pacotes · 31 - Microinteracoes/Estados · 25 - Animacoes/Tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

#profilePage{
  --p-papel:#ffffff;
  --p-papel2:#faf7f1;
  --p-tinta:#111827;
  --p-mut:#4b5563;
  --p-soft:#5c6573;
  --p-linha:rgba(17,24,39,.12);
  --p-ouro:#fcbc1d;
  --p-ouro-ink:#7a5d10;
  --p-ok:#1f7a45;
  --p-r:4px;
  --p-dur:220ms;
  --p-ease:cubic-bezier(.16,1,.3,1);
}

/* O reset global do site pinta p/span/label de #111 com !important. Aqui a cor
   precisa descer do pai, senão o texto sobre a capa fica preto no preto.
   Mesmo antídoto já usado na tela de entrada. */
#profilePage p, #profilePage span, #profilePage li, #profilePage small,
#profilePage strong, #profilePage b, #profilePage h1, #profilePage h2,
#profilePage h3, #profilePage h4, #profilePage label, #profilePage div,
#profilePage figcaption{
  color:inherit !important;
}

/* ── casca ────────────────────────────────────────────────────────────────── */
/* styles.css:4588 trava em 860px, o que num monitor de 1920 deixava ~530px de
   vão de cada lado e a página parecia um cartão flutuando no vazio. A regra de
   lá é `body.profileOnly #profilePage .ppShell` (1 ID + 2 classes + 1 tag), por
   isso repito o mesmo seletor — um `#profilePage .ppShell` sozinho perderia. */
#profilePage .ppShell,
body.profileOnly #profilePage .ppShell{
  max-width:1180px !important;
  color:var(--p-tinta) !important;
}
#profilePage .ppTopbar,
#profilePage .ppFooterNote{ background:transparent !important; color:var(--p-mut) !important }
#profilePage .ppBack{ color:var(--p-tinta) !important; font-weight:700 }

/* A folha é só a .ppv2Wrap. Antes eu pintava todo filho de #profilePageBody e
   isso transformava a barra de denúncia num cartão branco de destaque. */
#profilePage .ppv2Wrap{
  background:var(--p-papel) !important;
  border:1px solid var(--p-linha) !important;
  border-radius:var(--p-r) !important;
  box-shadow:0 14px 40px rgba(17,24,39,.10) !important;
  overflow:hidden;
}

/* ── denúncia: existe, mas não abre a tela ────────────────────────────────── */
/* Denunciar é ação de exceção. Estava em primeiro lugar na leitura — antes do
   nome do editor. Vai para o fim, discreta, sem deixar de ser alcançável. */
#profilePage #profilePageBody{ display:flex; flex-direction:column; gap:10px }
#profilePage #profilePageBody .ppv2Wrap{ order:1 }
#profilePage #profilePageBody .denProfileAction{
  order:2;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 2px !important; opacity:.72;
  transition:opacity var(--p-dur) var(--p-ease);
}
#profilePage #profilePageBody .denProfileAction:hover{ opacity:1 }
#profilePage .denBtn{
  background:transparent !important; border:0 !important;
  color:var(--p-soft) !important; font-size:.76rem !important; font-weight:600 !important;
}
#profilePage .denBtn:hover{ color:#a3341f !important; text-decoration:underline }

/* ── perfil inexistente ──────────────────────────────────────────────────── */
/* Abrir o link direto na barra de endereços dava tela branca sem explicação.
   Agora falha visível, com saída. */
#profilePage .ppv2Erro{
  background:var(--p-papel) !important;
  border:1px solid var(--p-linha) !important;
  border-radius:var(--p-r) !important;
  padding:56px 28px; text-align:center;
}
#profilePage .ppv2ErroT{
  color:var(--p-tinta) !important;
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em; margin-bottom:8px;
}
#profilePage .ppv2ErroS{
  color:var(--p-mut) !important; margin:0 auto 20px; max-width:44ch; line-height:1.6;
}
#profilePage .ppv2Erro .btn{
  background:var(--p-ouro) !important; color:#1c1405 !important;
  border:1px solid var(--p-ouro) !important; font-weight:800 !important;
}

/* ── capa e identidade ────────────────────────────────────────────────────── */
/* Único bloco escuro da tela: tem foto atrás e o véu garante o branco legível.
   O véu é ::after com z-index 1 e o conteúdo sobe para 2 — sem isso o texto
   ficaria por baixo do próprio véu. */
#profilePage .ppv2Hero{
  position:relative; overflow:hidden;
  border-radius:0 !important;
  color:#f7f8fa !important;
  min-height:210px;
}
#profilePage .ppv2Hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,12,16,.35) 0%, rgba(10,12,16,.72) 55%, rgba(10,12,16,.88) 100%);
}
#profilePage .ppv2HeroContent{ position:relative; z-index:2 }
#profilePage .ppv2Name{
  color:#ffffff !important;
  font-weight:800; letter-spacing:-.03em;
  text-shadow:0 1px 12px rgba(10,12,16,.8);
}
/* Título/especialidade: a frase em que o editor se apresenta. Fica entre o nome
   e a linha de números, que é a ordem em que o cliente lê. */
#profilePage .ppv2Headline{
  color:rgba(255,255,255,.95) !important;
  font-size:.92rem; font-weight:600; margin-top:2px;
  text-shadow:0 1px 8px rgba(10,12,16,.85);
}
#profilePage .ppv2Sub{
  color:rgba(255,255,255,.93) !important;
  text-shadow:0 1px 8px rgba(10,12,16,.85);
}
#profilePage .ppv2Dot{ color:rgba(255,255,255,.5) !important }
#profilePage .ppv2AvatarRing{
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 6px 18px rgba(10,12,16,.45) !important;
}
#profilePage .ppv2StatusBadge.on{
  background:var(--p-ok) !important; color:#fff !important; border:0 !important; font-weight:800;
}
#profilePage .ppv2StatusBadge.off{
  background:rgba(255,255,255,.22) !important; color:#fff !important; border:0 !important;
}
/* "Fora do horário" não é o mesmo que "não aceita trabalho": ele volta. Âmbar
   em vez de verde ou cinza, e o horário aparece logo abaixo na barra. */
#profilePage .ppv2StatusBadge.fora{
  background:#9c6512 !important; color:#fff !important; border:0 !important; font-weight:800;
}
#profilePage .ppv2AvailDot.fora{ background:#9c6512 !important }

/* ── barra de confiança + PORTFÓLIO ──────────────────────────────────────── */
/* Substitui os 10 glifos de estrela que só repetiam a nota escrita acima.
   Entregas, prazo e preço são o que decide contratação — e o portfólio,
   que estava enterrado no rodapé, agora é botão na dobra. */
#profilePage .ppv2Trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px;
}
#profilePage .ppv2TrustItem{
  color:rgba(255,255,255,.88) !important;
  font-size:.82rem; line-height:1.2;
  text-shadow:0 1px 8px rgba(10,12,16,.85);
}
#profilePage .ppv2TrustItem b{ color:#fff !important; font-weight:800 }

#profilePage .ppv2PortBtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:100px;
  background:rgba(255,255,255,.96) !important;
  color:#14181f !important;
  border:1px solid rgba(255,255,255,.9);
  font-size:.82rem; font-weight:800; text-decoration:none;
  box-shadow:0 4px 14px rgba(10,12,16,.35);
  transition:transform var(--p-dur) var(--p-ease), box-shadow var(--p-dur) var(--p-ease);
}
#profilePage .ppv2PortBtn:hover{
  transform:translateY(-1px); box-shadow:0 8px 20px rgba(10,12,16,.45);
}
#profilePage .ppv2PortBtn:focus-visible{ outline:3px solid #fff; outline-offset:2px }
#profilePage .ppv2PortIco{ color:#14181f !important; font-weight:900 }
/* o domínio dá a prova de que o link é real antes do clique */
#profilePage .ppv2PortHost{
  color:#5c6573 !important; font-weight:600; font-size:.74rem;
  padding-left:8px; border-left:1px solid rgba(17,24,39,.18);
}

/* ── abas ─────────────────────────────────────────────────────────────────── */
#profilePage .ppv2TabBar{
  background:var(--p-papel) !important;
  border-bottom:1px solid var(--p-linha) !important;
}
#profilePage .ppv2TabBtn{
  color:var(--p-mut) !important; font-weight:700;
  background:transparent !important; border:0 !important;
  transition:color var(--p-dur) var(--p-ease);
}
#profilePage .ppv2TabBtn.active{
  color:var(--p-tinta) !important;
  box-shadow:inset 0 -2px 0 0 var(--p-ouro) !important;
}
#profilePage .ppv2TabBtn:focus-visible{ outline:2px solid var(--p-ouro-ink); outline-offset:-2px }

/* ── corpo ────────────────────────────────────────────────────────────────── */
#profilePage .ppv2TabPane,
#profilePage .ppv2Body,
#profilePage .ppv2Left,
#profilePage .ppv2Right,
#profilePage .ppv2Section{
  background:transparent !important; color:var(--p-tinta) !important;
}
#profilePage .ppv2SecHd{
  color:var(--p-ouro-ink) !important;
  font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
#profilePage .ppv2Bio{ color:var(--p-mut) !important; line-height:1.62 }

/* Legenda virou opcional. Sem ela a `<figcaption>` continuava ocupando 26px
   de nada embaixo de cada imagem — medido. `:empty` não serve: o template
   deixa quebras de linha dentro do elemento, então ele nunca está realmente
   vazio para o CSS. `:has()` pergunta o que importa: tem filho? */
#profilePage .ppv2WorkInfo:not(:has(strong)):not(:has(span)){
  display:none !important;
}

/* Mesma trava do preview: texto sem espaço é um token só e o navegador não
   tem onde quebrar. Medido aqui: 452px de bio para fora da caixa. `anywhere`
   quebra só o que não cabe; `break-all` picotaria palavra normal também. */
#profilePage .ppv2Bio,
#profilePage .ppv2Name,
#profilePage .ppv2Headline,
#profilePage .ppv2TrustItem,
#profilePage .ppv2PortHost,
#profilePage .ppv2Tags .badge{
  overflow-wrap:anywhere;
  min-width:0;
}

/* tags saem como .badge global — conferido no DOM */
#profilePage .ppv2Tags .badge{
  background:var(--p-papel2) !important;
  border:1px solid var(--p-linha) !important;
  color:var(--p-mut) !important;
  font-weight:700;
}
#profilePage .ppv2Tags .badge.off{ color:var(--p-soft) !important; font-style:italic }

/* ── linhas de informação ────────────────────────────────────────────────── */
#profilePage .ppv2InfoGrid{
  background:var(--p-papel2) !important;
  border:1px solid var(--p-linha) !important;
  border-radius:var(--p-r) !important;
}
/* A regra antiga é `.ppv2InfoRow{background:rgba(0,0,0,.14)}` — um véu preto
   pensado para o tema escuro. Sobre o creme ele virava uma faixa cinza suja,
   fora da paleta. Aqui a linha volta a ser só linha. */
#profilePage .ppv2InfoRow{
  background:transparent !important;
  border-bottom:1px solid var(--p-linha) !important;
}
#profilePage .ppv2InfoRow:last-child{ border-bottom:0 !important }
#profilePage .ppv2InfoK{ color:var(--p-soft) !important; font-weight:700 }
#profilePage .ppv2InfoV{ color:var(--p-tinta) !important }
#profilePage .ppv2Link{
  color:var(--p-ouro-ink) !important; font-weight:800;
  text-decoration:underline; text-underline-offset:3px;
}
#profilePage .ppv2Link:hover{ color:#5c4409 !important }

/* ── destaques (pagamento, pedidos concluídos) ───────────────────────────── */
#profilePage .ppv2Hi{
  background:var(--p-papel2) !important;
  border:1px solid var(--p-linha) !important;
  border-radius:var(--p-r) !important;
  color:var(--p-tinta) !important;
}
#profilePage .ppv2HiIcon{ color:var(--p-ouro-ink) !important }
#profilePage .ppv2HiT{ color:var(--p-tinta) !important; font-weight:800 }
#profilePage .ppv2HiS{ color:var(--p-mut) !important }   /* media 1.09 antes */

/* ── TRABALHOS RECENTES ──────────────────────────────────────────────────── */
/* A prova visual que faltava: o perfil não mostrava nenhuma peça. Proporção
   4:5 porque o trabalho do editor é majoritariamente vertical — 16:9 daria
   ideia errada do produto. */
#profilePage .ppv2Works{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px; margin-top:14px;
}
#profilePage .ppv2Work{
  margin:0; display:flex; flex-direction:column;
  background:var(--p-papel) !important;
  border:1px solid var(--p-linha) !important;
  border-radius:var(--p-r); overflow:hidden;
  transition:transform var(--p-dur) var(--p-ease), box-shadow var(--p-dur) var(--p-ease);
}
#profilePage .ppv2Work:hover{
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(17,24,39,.12);
}
#profilePage .ppv2WorkImg{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--p-papel2);
}
#profilePage .ppv2WorkImg img{ width:100%; height:100%; object-fit:cover; display:block }
/* etiqueta do canal fica sobre a foto, então carrega o próprio fundo */
#profilePage .ppv2WorkCanal{
  position:absolute; left:8px; bottom:8px; z-index:2;
  padding:4px 9px; border-radius:100px;
  background:rgba(10,12,16,.84) !important; color:#f3f5f8 !important;
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
}
#profilePage .ppv2WorkInfo{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:5px }
#profilePage .ppv2WorkInfo strong{
  color:var(--p-tinta) !important;
  font-size:.86rem; font-weight:800; line-height:1.3; letter-spacing:-.01em;
}
#profilePage .ppv2WorkResult{
  color:var(--p-ouro-ink) !important; font-size:.78rem; font-weight:700; line-height:1.4;
}
/* Deixa claro que o número é declarado pelo editor. Métrica sem fonte, num
   marketplace, vira promessa vazia. */
#profilePage .ppv2WorksNota{
  margin:12px 0 0; color:var(--p-soft) !important; font-size:.72rem; line-height:1.5;
}

/* ── EDITORES PARECIDOS ──────────────────────────────────────────────────── */
/* O perfil terminava em beco sem saída: quem não gostava deste editor só tinha
   o botão Voltar. Agora a página termina oferecendo a próxima opção. */
#profilePage .ppv2Similares{
  padding:22px 24px 26px;
  border-top:1px solid var(--p-linha);
  background:var(--p-papel2) !important;
}
#profilePage .ppv2SimilGrid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px; margin-top:14px;
}
#profilePage .ppv2Simil{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:14px; text-align:left; cursor:pointer;
  background:var(--p-papel) !important;
  border:1px solid var(--p-linha) !important;
  border-radius:var(--p-r);
  transition:transform var(--p-dur) var(--p-ease), box-shadow var(--p-dur) var(--p-ease),
             border-color var(--p-dur) var(--p-ease);
}
#profilePage .ppv2Simil:hover{
  transform:translateY(-2px);
  border-color:rgba(17,24,39,.24) !important;
  box-shadow:0 8px 20px rgba(17,24,39,.10);
}
#profilePage .ppv2Simil:focus-visible{ outline:2px solid var(--p-ouro-ink); outline-offset:2px }
#profilePage .ppv2SimilFoto{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--p-papel2); border:1px solid var(--p-linha);
}
#profilePage .ppv2SimilFoto img{ width:100%; height:100%; object-fit:cover; display:block }
#profilePage .ppv2SimilIni{ color:var(--p-soft) !important; font-weight:800 }
#profilePage .ppv2SimilNome{
  color:var(--p-tinta) !important; font-weight:800; font-size:.9rem;
  letter-spacing:-.01em; line-height:1.25;
}
#profilePage .ppv2SimilTag{
  color:var(--p-mut) !important; font-size:.74rem; line-height:1.3;
}
#profilePage .ppv2SimilPe{
  display:flex; align-items:center; gap:10px; margin-top:2px;
}
#profilePage .ppv2SimilNota{ color:var(--p-ouro-ink) !important; font-size:.78rem; font-weight:800 }
#profilePage .ppv2SimilPreco{ color:var(--p-soft) !important; font-size:.78rem; font-weight:700 }

/* ── coluna única ────────────────────────────────────────────────────────── */
/* A coluna da direita saiu do HTML. O .ppv2Body ainda é grid com trilha fixa
   de 240px, então sem esta regra sobraria uma faixa vazia à direita. */
#profilePage .ppv2Body{
  display:block !important;
}
#profilePage .ppv2Left{ width:100% !important; max-width:none !important }

#profilePage .ppv2NoPkgs{ color:var(--p-mut) !important }

/* botões da capa: contorno claro sobre o escuro */
#profilePage .ppv2HeroActs .btn{
  background:rgba(255,255,255,.14) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.55) !important; font-weight:700 !important;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
#profilePage .ppv2HeroActs .btn:hover{ background:rgba(255,255,255,.26) !important }

/* ── seguir ──────────────────────────────────────────────────────────────── */
/* Sólido enquanto é um convite, contorno depois de aceito. O estado ligado não
   pode gritar mais que o desligado, senão parece que ainda falta fazer algo. */
#profilePage .ppv2HeroActs .ppv2SeguirBtn{
  background:#fff !important; color:#14181f !important;
  border:1px solid #fff !important; font-weight:800 !important;
  transition:background var(--p-dur) var(--p-ease), color var(--p-dur) var(--p-ease);
}
#profilePage .ppv2HeroActs .ppv2SeguirBtn:hover{ background:rgba(255,255,255,.86) !important }
#profilePage .ppv2HeroActs .ppv2SeguirBtn.is-seguindo{
  background:rgba(255,255,255,.14) !important; color:#fff !important;
  border-color:rgba(255,255,255,.55) !important; font-weight:700 !important;
}
/* ao passar o mouse em "Seguindo", diz o que o clique vai fazer */
#profilePage .ppv2HeroActs .ppv2SeguirBtn.is-seguindo:hover{
  background:rgba(163,52,31,.22) !important; border-color:rgba(255,255,255,.75) !important;
}
#profilePage .ppv2HeroActs .ppv2SeguirBtn:focus-visible{ outline:3px solid #fff; outline-offset:2px }

@media (prefers-reduced-motion:reduce){
  #profilePage .ppv2HeroActs .ppv2SeguirBtn{ transition:none }
}

/* ── responsivo ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  #profilePage .ppv2Works{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  #profilePage .ppv2SimilGrid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:560px){
  #profilePage .ppv2Works{ grid-template-columns:1fr }
  #profilePage .ppv2SimilGrid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  #profilePage .ppv2Similares{ padding:18px 16px 22px }
  #profilePage .ppv2WorkImg{ aspect-ratio:16/10 }
  #profilePage .ppv2Trust{ gap:6px 10px }
  #profilePage .ppv2PortBtn{ width:100%; justify-content:center }
}

@media (prefers-reduced-motion:reduce){
  #profilePage .ppv2Work,
  #profilePage .ppv2PortBtn,
  #profilePage .ppv2Simil{ transition:none }
  #profilePage .ppv2Work:hover,
  #profilePage .ppv2PortBtn:hover,
  #profilePage .ppv2Simil:hover{ transform:none }
}

/* ── Barra de status do editor: ponto de online ─────────────────────────────
   Estado nunca so por cor: o ponto verde vem acompanhado da palavra "online
   agora". Quem nao distingue verde de cinza le o texto. */
#profilePage .ppv2TrustOnline{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#1f7a45 !important;
  font-weight:800 !important;
}
#profilePage .ppv2TrustOnline i{
  width:8px !important; height:8px !important; flex:0 0 auto !important;
  border-radius:100px !important; background:#1f7a45 !important;
}