/* ============================================================================
   plume.css — estilos comuns a todas as páginas
   ----------------------------------------------------------------------------
   O resto do visual é Tailwind direto no HTML. Aqui fica só o que o Tailwind
   não alcança e precisa ser igual no site inteiro.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Barra de rolagem
   ---------------------------------------------------------------------------
   Fina, arredondada, no cinza do site, sem trilha visível. O polegar tem uma
   borda transparente que "descola" ele da beirada, e escurece no hover.

   Chrome/Safari/Edge usam os pseudo-elementos ::-webkit-scrollbar. Firefox só
   entende scrollbar-width/scrollbar-color — e no Chrome essas duas, se
   presentes, DESLIGAM os pseudo-elementos (inclusive a margem da trilha que
   tira a barra de baixo dos cabeçalhos). Por isso elas ficam só no bloco do
   Firefox, e nenhum outro lugar do site deve usar scrollbar-width: thin.
   --------------------------------------------------------------------------- */
:root {
  --rolagem-polegar: rgba(24, 26, 26, .2);
  --rolagem-polegar-hover: rgba(24, 26, 26, .38);
  --rolagem-polegar-ativo: rgba(24, 26, 26, .5);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--rolagem-polegar);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--rolagem-polegar-hover); }
::-webkit-scrollbar-thumb:active { background-color: var(--rolagem-polegar-ativo); }

/* Barra da página: começa abaixo do cabeçalho do site (h-20 = 80px em todas
   as páginas), para não atravessá-lo.
   O Chrome não aceita margem na barra da JANELA, só na de um elemento. Então,
   em computador (mouse), quem rola é o <body>, e não a janela: html fica
   travado na altura da tela e o body rola dentro dele. O cabeçalho sticky,
   as âncoras (#catalogo) e o scroll-mt continuam funcionando igual.
   No celular a barra já é flutuante e some sozinha, então nada muda lá.
   Quem trava a rolagem (Plume.travarScroll em ui.js) já considera os dois
   casos. */
@media (hover: hover) and (pointer: fine) {
  html { height: 100%; overflow: hidden; }
  body { height: 100%; overflow-y: auto; }
  html.scroll-smooth body { scroll-behavior: smooth; }
  body::-webkit-scrollbar-track { margin-top: 80px; }
  /* Continuação do cabeçalho dentro da faixa da barra: acima dos 80px a
     faixa já tem a cor do cabeçalho (é o fundo da página, #FAFAFA); logo
     abaixo entra a mesma sombra suave (shadow-plume), e o cabeçalho vira uma
     peça só de ponta a ponta. Transparente em cima para respeitar cantos
     arredondados (folha do visualizador). Valores escritos à mão: a barra não
     herda variáveis de CSS. */
  body::-webkit-scrollbar { background: linear-gradient(to bottom, transparent 0, transparent 80px, rgba(0,0,0,.075) 80px, rgba(0,0,0,.025) 85px, rgba(0,0,0,0) 91px); }
}

/* Dentro da página (listas, chat, modais, gavetas) a barra é um pouco mais
   fina que a da janela. */
body *::-webkit-scrollbar { width: 10px; height: 10px; }

/* Caixa com cantos arredondados: a trilha começa e termina longe das quinas,
   para a barra não "vazar" pela curva. */
body [class*="rounded-"]::-webkit-scrollbar-track { margin: 10px; }

@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: var(--rolagem-polegar) transparent; }
}

/* Rolagem sem barra (abas e pílulas que deslizam para o lado). */
/* Faixa que rola para os lados (abas, carrosséis) não pode rolar na
   vertical: o sublinhado da aba ativa (-mb-px) passa 1px da altura, a faixa
   vira rolável em Y e "prende" a rodinha do mouse, que para de rolar a
   página. Sem rolagem em Y, a rodinha segue direto para a página. */
.overflow-x-auto:not(.overflow-y-auto), .overflow-x-scroll:not(.overflow-y-auto) { overflow-y: hidden; overscroll-behavior-y: auto; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
   Visualizador de projeto (visualizador.js)
   ---------------------------------------------------------------------------
   A folha inteira rola, e o cabeçalho com o perfil fica preso no topo dela.
   A trilha começa logo abaixo do cabeçalho (h-16 / sm:h-20), então a barra
   nunca passa por cima dele.
   --------------------------------------------------------------------------- */
body .pv-folha::-webkit-scrollbar-track { margin: 64px 0 12px; }
body .pv-folha::-webkit-scrollbar { background: linear-gradient(to bottom, transparent 0, transparent 64px, rgba(0,0,0,.075) 64px, rgba(0,0,0,.025) 69px, rgba(0,0,0,0) 75px); }
@media (min-width: 640px) {
  body .pv-folha::-webkit-scrollbar-track { margin-top: 80px; }
  body .pv-folha::-webkit-scrollbar { background: linear-gradient(to bottom, transparent 0, transparent 80px, rgba(0,0,0,.075) 80px, rgba(0,0,0,.025) 85px, rgba(0,0,0,0) 91px); }
}

/* ---------------------------------------------------------------------------
   Onda de áudio (cards do setor de Áudio e página do projeto)
   --------------------------------------------------------------------------- */
/* Onda da faixa: barras finas, na altura real do volume de cada trecho
   (dados/ondas.js). Duas camadas iguais: a cinza embaixo e a escura por
   cima, recortada até onde a música já tocou (--p). Com o mouse em cima,
   uma terceira mostra até onde o clique vai levar (--h). */
.onda { position: relative; height: 44px; cursor: pointer; touch-action: none; }
.onda-camada { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.onda-camada i { display: block; width: 2px; border-radius: 2px; background: rgba(24,26,26,.16); flex: none; min-height: 2px; transition: background .2s ease; }
.faixa:hover .onda-base i, .onda:hover .onda-base i { background: rgba(24,26,26,.22); }
.onda-hover { clip-path: inset(0 calc(100% - var(--h, 0%)) 0 0); opacity: 0; transition: opacity .15s; }
.onda-hover i { background: rgba(24,26,26,.35); }
.onda:hover .onda-hover { opacity: 1; }
.onda-cheia { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.onda-cheia i { background: #181A1A; }
.faixa[data-tocando] .onda-cheia i, .onda[data-tocando] .onda-cheia i { background: #FF4D3D; }
.onda:focus-visible { outline: 2px solid rgba(24,26,26,.3); outline-offset: 4px; border-radius: 6px; }

/* Botões de tocar: triângulo preenchido, não só o contorno. */
[data-player] .feather-play, [data-pv-tocar] .feather-play { fill: currentColor; }

/* ---------------------------------------------------------------------------
   Páginas de setor (setor-*.html, setor-catalogo.js)
   --------------------------------------------------------------------------- */
/* Banner: nome do setor à esquerda; o mural fica à direita e some no escuro */
.setor-banner { min-height: 300px; display: flex; align-items: center; }
.setor-banner .sm-colunas, .setor-banner .sm-fileiras { left: 30%; opacity: .8; }
.setor-banner-veu { background:
    linear-gradient(90deg, #181A1A 0%, #181A1A 30%, rgba(24,26,26,.85) 48%, rgba(24,26,26,.25) 75%, rgba(24,26,26,.1) 100%),
    linear-gradient(180deg, rgba(24,26,26,.25), rgba(24,26,26,0) 40%, rgba(24,26,26,.35)); }
@media (max-width: 767px) {
  .setor-banner .sm-colunas, .setor-banner .sm-fileiras { left: -10%; opacity: .5; }
  .setor-banner-veu { background: linear-gradient(180deg, rgba(24,26,26,.7), rgba(24,26,26,.92)); }
}

/* Barra que gruda: o fundo é o da página, então os cards somem por baixo dela */
.setor-barra { background: #FAFAFA; }

/* Pílulas de categoria: a pílula da Plume (branca, borda fina), com uma
   miniatura redonda de um trabalho da categoria e a contagem. Ativa = escura. */
.chip-cat { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 6px; border-radius: 999px;
  background: #fff; border: 1px solid #E5E5E5; color: #181A1A; font: 700 13px/1 Gilroy, sans-serif; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s; }
.chip-cat:hover { border-color: rgba(24,26,26,.2); box-shadow: 0 4px 7.8px 1px rgba(0,0,0,.08); transform: translateY(-1px); }
.chip-cat img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; flex: none; transition: transform .35s cubic-bezier(.2,.7,0,1); }
.chip-cat:hover img { transform: scale(1.08) rotate(-4deg); }
.chip-cat small { font: 500 11px/1 Inter, sans-serif; color: rgba(24,26,26,.4); }
.chip-cat.ativo { background: #181A1A; border-color: #181A1A; color: #fff; }
.chip-cat.ativo small { color: rgba(255,255,255,.55); }
.chip-todos { padding: 0 18px; }

/* Painel de filtros: abre e fecha pelo botão Filtrar, deslizando.
   No computador a coluna do painel cresce de 0 a 250px (e a grade anda junto);
   no celular o painel desce por cima da lista. */
.setor-layout { display: grid; grid-template-columns: 0px minmax(0, 1fr); column-gap: 0;
  transition: grid-template-columns .45s cubic-bezier(.32,.72,0,1), column-gap .45s cubic-bezier(.32,.72,0,1); }
.setor-painel { min-width: 0; overflow: hidden; }
.setor-painel > div { width: 250px; opacity: 0; transform: translateX(-24px); visibility: hidden;
  transition: opacity .3s ease, transform .45s cubic-bezier(.32,.72,0,1), visibility 0s linear .45s; }
.painel-aberto .setor-painel > div { opacity: 1; transform: none; visibility: visible; transition-delay: .08s, 0s, 0s; }
.setor-layout.painel-aberto { grid-template-columns: 250px minmax(0, 1fr); column-gap: 40px; }
@media (min-width: 1024px) {
  /* clip-path corta o painel enquanto a coluna encolhe sem quebrar o sticky (overflow quebraria) */
  .setor-painel { overflow: visible; clip-path: inset(0); }
  .setor-painel > div { position: sticky; top: 168px; max-height: calc(100vh - 188px); overflow-y: auto; padding-right: 6px; border-top: 1px solid #E5E5E5; }
}
@media (max-width: 1023px) {
  .setor-layout, .setor-layout.painel-aberto { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .setor-painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.32,.72,0,1), margin .45s; }
  .painel-aberto .setor-painel { grid-template-rows: 1fr; margin-bottom: 24px; }
  .setor-painel > div { width: auto; min-height: 0; overflow: hidden; transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .setor-layout, .setor-painel, .setor-painel > div { transition: none; } }
.painel-grupo summary:hover .painel-titulo { color: #000; }

/* ---------------------------------------------------------------------------
   Vermelho da marca (#FF4D3D) — pontual, como na landing: só onde algo
   "acende" (curtida, o que está tocando, o que está marcado) e nos pontos
   finais dos títulos. O resto do site continua preto e branco.
   --------------------------------------------------------------------------- */
::selection { background: rgba(255, 77, 61, .2); color: inherit; }

/* Curtir: o coração ligado fica vermelho em todo lugar */
[data-curtir="1"]:not(.capa-acao) { color: #FF4D3D !important; }
.capa-acao[data-capa-acao="curtir"][aria-pressed="true"] { background: #FF4D3D; color: #fff; }
[data-pv-curtir][aria-pressed="true"] { background: #FF4D3D !important; border-color: #FF4D3D !important; color: #fff !important; }
[data-pv-curtir-comentario][aria-pressed="true"] { color: #FF4D3D; }

/* Quantos filtros estão ligados */
[data-filtros-qtd] { background: #FF4D3D; }

/* Barra do vídeo tocando na página do projeto */
[data-pv-video-barra] { background: #FF4D3D; }

/* ---------------------------------------------------------------------------
   Mesa de trabalho (jobs.html / compras.html, workspace.js)
   Três colunas numa tela só, sem rolar a página: conversas | chat | projeto.
   Cada coluna rola sozinha. Abaixo de 1024px vira uma coluna por vez
   (lista → chat), e o painel do projeto desliza por cima.
   --------------------------------------------------------------------------- */
.mesa {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  height: calc(100vh - 80px); height: calc(100dvh - 80px); overflow: hidden;
}
/* Do tablet para cima, a mesa vira um quadro com margem pequena, como as
   mensagens do Behance: o conteúdo respira em vez de encostar nas bordas. */
@media (min-width: 1024px) {
  .mesa {
    margin: 20px auto; width: calc(100% - 40px); max-width: 1720px;
    height: calc(100vh - 120px); height: calc(100dvh - 120px);
    border: 1px solid #E5E5E5; border-radius: 18px; box-shadow: 0 4px 7.8px 1px rgba(0,0,0,.05);
  }
}
.mesa > * { min-height: 0; min-width: 0; }
.mesa-lista, .mesa-chat { display: flex; flex-direction: column; }
.mesa-projeto {
  position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; width: min(400px, 100%);
  transform: translateX(0); transition: transform .4s cubic-bezier(.32,.72,0,1), box-shadow .4s;
  box-shadow: -12px 0 32px rgba(0,0,0,.08);
}
.mesa[data-projeto="fechado"] .mesa-projeto { transform: translateX(105%); box-shadow: none; }
.mesa-projeto-miolo { width: min(400px, 100vw); height: 100%; }
@media (max-width: 1023px) {
  .mesa[data-vista="lista"] .mesa-chat { display: none; }
  .mesa[data-vista="chat"] .mesa-lista { display: none; }
}
@media (min-width: 1024px) {
  .mesa { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .mesa { grid-template-columns: 340px minmax(0, 1fr) auto; }
  .mesa-projeto { position: relative; transform: none; box-shadow: none; width: 400px; overflow: hidden;
                  transition: width .4s cubic-bezier(.32,.72,0,1); }
  .mesa[data-projeto="fechado"] .mesa-projeto { transform: none; width: 0; }
  .mesa-projeto-miolo { width: 400px; }
}
/* Tela larga: a mesa ocupa a largura toda (sem faixas nas laterais) e as
   lista cresce um pouco; o excesso fica com a conversa. */
@media (min-width: 1600px) {
  .mesa { grid-template-columns: 380px minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .mesa-projeto { transition: none; } }

/* Linha selecionada da lista: faixa vermelha à esquerda */
.mesa-item[aria-current="true"] { background: #fff; box-shadow: inset 3px 0 0 #181A1A, 0 4px 7.8px 1px rgba(0,0,0,.05); }

/* Chat: mensagem entrando */
@keyframes mesaMsg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mesa-msg-nova { animation: mesaMsg .25s ease-out both; }
/* "digitando…" da outra parte (simulacao.js) */
.mesa-digitando { width: 6px; height: 6px; border-radius: 9999px; background: rgba(24,26,26,.35); animation: mesaDigitando 1.1s ease-in-out infinite; }
.mesa-digitando:nth-child(2) { animation-delay: .15s; }
.mesa-digitando:nth-child(3) { animation-delay: .3s; }
@keyframes mesaDigitando { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Fase atual da trilha pulsa devagar */
@keyframes jornadaPulso { 0% { box-shadow: 0 0 0 0 rgba(255,77,61,.35); } 70% { box-shadow: 0 0 0 7px rgba(255,77,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,61,0); } }
.jornada-agora { animation: jornadaPulso 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .jornada-agora, .mesa-msg-nova { animation: none; } }
/* Banner do projeto sem imagem (trabalhos editoriais): quadrícula discreta */
.dash-grade-mesa {
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Banner do perfil do criativo: proporção fixa de 5:1 no computador, a mesma
   do recorte em "Meus arquivos" (arquivos.js), para a capa aparecer igual à
   prévia. No celular fica mais alto e mostra o meio da imagem. */
.capa-perfil { aspect-ratio: 5 / 2; max-height: 420px; }
@media (min-width: 640px) { .capa-perfil { aspect-ratio: 4 / 1; } }
@media (min-width: 1024px) { .capa-perfil { aspect-ratio: 5 / 1; } }

/* Barra de valor com duas bolinhas (filtros.js, faceta de intervalo).
   Dois <input type=range> sobrepostos: só as bolinhas recebem o clique; o
   trilho escuro entre elas vem de --de e --ate. */
.faixa-dupla { position: relative; height: 22px; margin: 0 9px; }
.faixa-dupla::before, .faixa-dupla::after { content: ''; position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; }
.faixa-dupla::before { left: 0; right: 0; background: #E5E5E5; }
.faixa-dupla::after { left: var(--de); right: calc(100% - var(--ate)); background: #181A1A; }
.faixa-dupla input[type=range] { position: absolute; inset: 0 -9px; width: calc(100% + 18px); height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 1; }
.faixa-dupla input[type=range]::-webkit-slider-runnable-track { background: none; border: 0; }
.faixa-dupla input[type=range]::-moz-range-track { background: none; border: 0; }
.faixa-dupla input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid #181A1A; box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: grab; }
.faixa-dupla input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 999px; background: #fff; border: 2px solid #181A1A; box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: grab; }
.faixa-dupla input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.faixa-dupla input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(24,26,26,.15); }

/* Setor sem projetos ainda: sem painel de filtros (setor-render.js). */
.setor-sem-painel { display: block !important; }
.setor-sem-painel .setor-painel { display: none !important; }