/* ============================================================
   SHARKILHA — SISTEMA VISUAL "PRENSA"
   Estética de estúdio analógico / prensa de vinil:
   papel, tinta, grão de filme, régua tipográfica.
   Nada de preto/branco puro — tudo é quente e sujo de propósito.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* tinta (escuro) — quente, nunca #000 */
  --tinta:#141110;
  --tinta-2:#1B1715;
  --tinta-3:#241F1B;
  --tinta-4:#2E2823;

  /* papel (claro) — bone, nunca #fff */
  --papel:#EDE6D8;
  --papel-2:#E2D9C7;
  --papel-3:#D5CAB4;

  /* acentos */
  --brasa:#CC4B24;        /* laranja queimado — VU meter, fita */
  --brasa-forte:#E35C2F;
  --latao:#C9973F;        /* latão/ouro — PRO, premium */
  --musgo:#5E8B5A;        /* ok/sucesso, dessaturado */
  --tijolo:#A63D34;       /* erro */

  /* texto sobre tinta */
  --t-forte:#F2EBDD;
  --t-medio:rgba(242,235,221,.62);
  --t-fraco:rgba(242,235,221,.38);
  --risco:rgba(242,235,221,.14);
  --risco-forte:rgba(242,235,221,.26);

  /* texto sobre papel */
  --p-forte:#181513;
  --p-medio:rgba(24,21,19,.66);
  --p-fraco:rgba(24,21,19,.42);
  --p-risco:rgba(24,21,19,.16);
  --p-risco-forte:rgba(24,21,19,.28);

  --curva:cubic-bezier(.19,1,.22,1);
  --curva-suave:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
/* overflow-x fica no <html>, NÃO no <body>: no body ele faz o
   overflow-y computar como `auto`, o body vira container de rolagem
   e aí a janela não rola mais (e o position:sticky do topo quebra). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  background:var(--tinta);
  color:var(--t-forte);
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
::selection{background:var(--brasa);color:var(--t-forte);}

/* ---------- GRÃO DE FILME (a textura principal) ----------
   Overlay fixo sobre a página inteira. É o que tira a cara
   "renderizada em tela" e dá corpo físico ao visual. */
body::after{
  content:"";
  position:fixed; inset:-50%;
  z-index:9998;
  pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grao 620ms steps(1) infinite;
  will-change:transform;
}
@keyframes grao{
  0%{transform:translate(0,0);}      20%{transform:translate(-1.5%,1%);}
  40%{transform:translate(1%,-1.5%);} 60%{transform:translate(-1%,-1%);}
  80%{transform:translate(1.5%,1.5%);} 100%{transform:translate(0,0);}
}
@media(prefers-reduced-motion:reduce){
  body::after{animation:none;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* fibra de papel — ruído fino e dessaturado, só nas seções claras.
   Sem o feColorMatrix o feTurbulence sai colorido (RGB) e vira
   chuvisco de TV em vez de fibra de papel. */
.papel{
  background-color:var(--papel);
  color:var(--p-forte);
  position:relative;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)' opacity='.42'/%3E%3C/svg%3E");
  background-blend-mode:multiply;
}
.papel .titulo,.papel h1,.papel h2,.papel h3{color:var(--p-forte);}

/* ---------- TIPOGRAFIA ---------- */
.titulo,h1,h2,h3{
  font-family:'Bricolage Grotesque','Inter Tight',sans-serif;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.94;
  text-wrap:balance;
}
.serifa{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;}
.mono{font-family:'JetBrains Mono','SF Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;}

/* ---------- ENVOLUCRO / GRADE ---------- */
.env{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px);}
.env-largo{max-width:1600px;margin:0 auto;padding:0 clamp(20px,4vw,48px);}

/* ---------- ETIQUETA DE SEÇÃO (régua editorial) ---------- */
.regua{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;
  border-top:1px solid var(--risco-forte);
  margin-bottom:clamp(28px,5vw,56px);
}
.papel .regua{border-color:var(--p-risco-forte);}
.regua-num{color:var(--brasa);}
.regua-nome{color:var(--t-medio);}
.papel .regua-nome{color:var(--p-medio);}
.regua-linha{flex:1;height:1px;background:var(--risco);}
.papel .regua-linha{background:var(--p-risco);}
.regua-fim{color:var(--t-fraco);}
.papel .regua-fim{color:var(--p-fraco);}

/* ---------- BOTÕES ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:2px;
  font-weight:600;font-size:.9rem;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:color .35s var(--curva-suave),border-color .35s var(--curva-suave),transform .35s var(--curva);
  isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);
  transition:transform .45s var(--curva);
}
.btn:hover::before{transform:translateY(0);}
.btn:active{transform:translateY(1px);}

.btn-brasa{background:var(--brasa);color:#FFF4EE;}
.btn-brasa::before{background:var(--tinta);}
.btn-brasa:hover{color:var(--t-forte);}

.btn-papel{background:var(--papel);color:var(--p-forte);}
.btn-papel::before{background:var(--brasa);}
.btn-papel:hover{color:#FFF4EE;}

.btn-linha{background:transparent;border-color:var(--risco-forte);color:var(--t-forte);}
.btn-linha::before{background:var(--t-forte);}
.btn-linha:hover{color:var(--tinta);border-color:var(--t-forte);}
.papel .btn-linha{border-color:var(--p-risco-forte);color:var(--p-forte);}
.papel .btn-linha::before{background:var(--p-forte);}
.papel .btn-linha:hover{color:var(--papel);}

/* Ação destrutiva: tijolo só no contorno, e só preenche no hover —
   botão vermelho cheio na tela toda assusta à toa. */
.btn-perigo{background:transparent;border-color:rgba(166,61,52,.5);color:#D08076;}
.btn-perigo::before{background:var(--tijolo);}
.btn-perigo:hover{color:#fff;border-color:var(--tijolo);}

.btn-pequeno{padding:9px 16px;font-size:.8rem;}
.btn-grande{padding:18px 34px;font-size:.98rem;}
.btn-cheio{width:100%;}
.btn i{font-size:1.05em;}

/* ---------- LINK COM SUBLINHADO QUE DESENHA ---------- */
.link-risco{position:relative;display:inline-block;}
.link-risco::after{
  content:"";position:absolute;left:0;bottom:-2px;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--curva);
}
.link-risco:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---------- CHIPS / SELOS ---------- */
.selo{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:2px;
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--risco-forte);color:var(--t-medio);
}
.papel .selo{border-color:var(--p-risco-forte);color:var(--p-medio);}
.selo-brasa{background:rgba(204,75,36,.13);border-color:rgba(204,75,36,.42);color:var(--brasa-forte);}
.selo-latao{background:rgba(201,151,63,.13);border-color:rgba(201,151,63,.45);color:var(--latao);}
.selo-ok{background:rgba(94,139,90,.15);border-color:rgba(94,139,90,.4);color:#8FC08A;}
.selo-erro{background:rgba(166,61,52,.15);border-color:rgba(166,61,52,.4);color:#D08076;}

/* ---------- TRANSIÇÃO ENTRE PÁGINAS ----------
   Entra com fade curto e sai com fade ao clicar num link interno,
   pra navegação não ser um corte seco. */
body{animation:paginaEntra .5s var(--curva-suave);}
@keyframes paginaEntra{from{opacity:0;}to{opacity:1;}}
body.saindo{opacity:0;transition:opacity .28s var(--curva-suave);}

/* ---------- PAINÉIS DE ABA ----------
   Regra compartilhada: só o painel com .ativo aparece. Fica aqui
   (e não no <style> de cada página) senão cada tela que usa abas
   mostra todos os painéis empilhados. */
[data-painel]{display:none;}
[data-painel].ativo{display:block;animation:painelEntra .5s var(--curva);}
@keyframes painelEntra{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- REVELAÇÃO NO SCROLL ---------- */
[data-revela]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--curva),transform .9s var(--curva);
}
[data-revela].visivel{opacity:1;transform:none;}
[data-revela-atraso="1"]{transition-delay:.08s;}
[data-revela-atraso="2"]{transition-delay:.16s;}
[data-revela-atraso="3"]{transition-delay:.24s;}
[data-revela-atraso="4"]{transition-delay:.32s;}
[data-revela-atraso="5"]{transition-delay:.4s;}

/* linha que se desenha sozinha ao aparecer */
.risco-anim{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--curva);}
.risco-anim.visivel{transform:scaleX(1);}

/* ---------- CAMPOS DE FORMULÁRIO ---------- */
.campo{margin-bottom:20px;}
.campo label{
  display:block;margin-bottom:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--t-medio);
}
.papel .campo label{color:var(--p-medio);}
.campo input,.campo select,.campo textarea{
  width:100%;
  background:transparent;
  border:none;border-bottom:1px solid var(--risco-forte);
  padding:12px 2px;
  font-size:1rem;
  transition:border-color .35s var(--curva-suave);
}
.papel .campo input,.papel .campo select,.papel .campo textarea{border-color:var(--p-risco-forte);}
.campo input::placeholder,.campo textarea::placeholder{color:var(--t-fraco);}
.papel .campo input::placeholder{color:var(--p-fraco);}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--brasa);}
/* A lista que abre de um <select> é desenhada pelo navegador, com fundo
   BRANCO — e as opções herdavam o texto claro da página: branco no branco,
   ilegível (reclamação do Tubarão em 14/09/2026, "status" e vários outros).
   color-scheme avisa o navegador que a página é escura, e a cor das opções
   fica explícita pros navegadores que ignoram isso. */
select{color-scheme:dark;}
select option,select optgroup{background:var(--tinta-2);color:var(--t-forte);}
.papel select{color-scheme:light;}
.papel select option,.papel select optgroup{background:var(--papel);color:var(--p-forte);}

/* ---------- TOCADOR (midia.js) ----------
   Fixo no canto: segue tocando enquanto a pessoa troca de aba. É o mesmo
   no painel da produtora e na tela do artista. */
#barraPlayer{position:fixed;right:14px;bottom:14px;z-index:9984;display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:var(--tinta-2);border:1px solid var(--risco-forte);max-width:calc(100vw - 28px);}
#barraPlayer[hidden]{display:none;}
#barraPlayer > i{color:var(--brasa);font-size:1.2rem;flex-shrink:0;}
#barraPlayer audio{height:34px;width:260px;max-width:100%;color-scheme:dark;}
.bp-info{display:flex;flex-direction:column;min-width:0;}
.bp-nome{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.bp-estado{font-size:.68rem;color:var(--t-fraco);}
@media(max-width:600px){
  #barraPlayer{left:10px;right:10px;bottom:58px;flex-wrap:wrap;}
  #barraPlayer audio{width:100%;}
}

/* ---------- CONTRATO (midia.js) ---------- */
.contrato-texto{max-height:52vh;overflow:auto;padding:16px 18px;background:var(--tinta-2);border:1px solid var(--risco);
  color:var(--t-medio);font-size:.9rem;line-height:1.7;}
.contrato-texto b,.contrato-texto strong,.contrato-texto h1,.contrato-texto h2,.contrato-texto h3{color:var(--t-forte);}
.bloco-assinatura{margin:16px 0;padding:12px 14px;border:1px dashed var(--risco-forte);font-size:.85rem;}
.ba-topo{display:flex;align-items:center;gap:6px;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--t-fraco);margin-bottom:6px;}
.ba-artista .ba-topo i{color:var(--musgo);}
.ba-nome{color:var(--t-forte);font-weight:600;}
.ba-linha{font-size:.8rem;color:var(--t-medio);}
.ba-trilha{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:8px;border-top:1px solid var(--risco);
  font-size:.74rem;color:var(--t-medio);overflow-wrap:anywhere;}
.campo-senha{position:relative;}
.olho{position:absolute;right:2px;bottom:12px;cursor:pointer;color:var(--t-fraco);}
.papel .olho{color:var(--p-fraco);}
.olho:hover{color:var(--brasa);}

/* ---------- CARTÃO ---------- */
.cartao{
  background:var(--tinta-2);
  border:1px solid var(--risco);
  padding:clamp(22px,3vw,34px);
  transition:border-color .4s var(--curva-suave),transform .5s var(--curva);
}
.cartao:hover{border-color:var(--risco-forte);}

/* ---------- MARQUEE (ticker analógico) ---------- */
.esteira{overflow:hidden;border-block:1px solid var(--risco-forte);padding:16px 0;}
.papel .esteira{border-color:var(--p-risco-forte);}
.esteira-trilha{display:flex;gap:0;white-space:nowrap;width:max-content;animation:esteira 38s linear infinite;}
.esteira:hover .esteira-trilha{animation-play-state:paused;}
.esteira-item{display:inline-flex;align-items:center;gap:20px;padding-right:20px;}
.esteira-item i{color:var(--brasa);font-size:.7em;}
@keyframes esteira{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- TABELA ----------
   Tabela larga precisa rolar dentro do próprio container. Sem isso
   ela é cortada no celular (o <html> tem overflow-x:hidden) e as
   últimas colunas somem sem o usuário perceber. */
.rolagem-h{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.rolagem-h table.dados{min-width:620px;}
table.dados{width:100%;border-collapse:collapse;}
table.dados th{
  text-align:left;padding:12px 12px 12px 0;
  border-bottom:1px solid var(--risco-forte);
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-medio);font-weight:400;
}
table.dados td{padding:16px 12px 16px 0;border-bottom:1px solid var(--risco);font-size:.92rem;}
table.dados tbody tr{transition:background .3s var(--curva-suave);}
table.dados tbody tr:hover{background:rgba(242,235,221,.03);}
.papel table.dados th{border-color:var(--p-risco-forte);color:var(--p-medio);}
.papel table.dados td{border-color:var(--p-risco);}
.papel table.dados tbody tr:hover{background:rgba(24,21,19,.035);}

/* ---------- LISTA DE LINHAS ---------- */
.linha{
  display:flex;align-items:center;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--risco);
  transition:padding-left .4s var(--curva),background .4s var(--curva-suave);
}
.linha:hover{padding-left:10px;background:rgba(242,235,221,.02);}
.papel .linha{border-color:var(--p-risco);}
.papel .linha:hover{background:rgba(24,21,19,.03);}
.linha-topo{border-top:1px solid var(--risco-forte);}
.papel .linha-topo{border-color:var(--p-risco-forte);}
.linha b{display:block;font-size:.95rem;font-weight:600;letter-spacing:-.01em;}
.linha span{display:block;font-size:.82rem;color:var(--t-medio);}
.papel .linha span{color:var(--p-medio);}
.linha .ao-fim{margin-left:auto;display:flex;align-items:center;gap:10px;}

/* No celular a linha não cabia. O bloco do meio parava de encolher no
   e-mail (que é uma palavra só) e o grupo de botões nunca encolhe —
   resultado: o último botão ficava 11px pra fora da tela, cortado.
   min-width:0 deixa o texto quebrar, e o wrap manda os botões pra
   linha de baixo quando ainda assim não couber. */
.linha > div:not(.disco):not(.ao-fim){min-width:0;}
@media(max-width:560px){
  .linha{flex-wrap:wrap;row-gap:8px;}
}

.disco{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,var(--tinta-4) 0 1px,var(--tinta-3) 1px 2.5px);
  border:1px solid var(--risco);
  display:grid;place-items:center;
  position:relative;
}
.disco::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brasa);}

/* ---------- BOTÃO ÍCONE ---------- */
.btn-icone{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--risco);border-radius:2px;
  background:transparent;color:var(--t-medio);cursor:pointer;
  transition:.3s var(--curva-suave);
}
.btn-icone:hover{color:var(--brasa);border-color:var(--brasa);}
.papel .btn-icone{border-color:var(--p-risco);color:var(--p-medio);}
.btn-icone-mini{width:30px;height:30px;font-size:.85rem;}

/* Ações de uma linha de tabela ficam lado a lado. Sem isto os botões,
   que são display:grid, viram blocos e empilham — uma música sozinha
   passa a ocupar a altura de três. */
.acoes-linha{display:flex;gap:6px;justify-content:flex-end;}

/* ---------- CAMPO DE BUSCA ---------- */
.busca{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--risco);padding:0 14px;margin-bottom:18px;
  transition:border-color .3s var(--curva-suave);
}
.busca:focus-within{border-color:var(--brasa);}
/* display:flex ganha do atributo hidden — precisa desligar na mão */
.busca[hidden]{display:none;}
.busca i{color:var(--t-fraco);font-size:1.05rem;flex-shrink:0;}
.busca input{flex:1;background:none;border:none;padding:13px 0;color:inherit;font:inherit;min-width:0;}
.busca input:focus{outline:none;}
.busca input::placeholder{color:var(--t-fraco);}
.busca .limpar{border:none;background:none;color:var(--t-fraco);cursor:pointer;padding:6px;line-height:1;}
.busca .limpar:hover{color:var(--brasa);}

/* ---------- BARRA DE USO DO PLANO ---------- */
.usos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-bottom:34px;}
.uso-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;}
/* Em tela estreita o rótulo e a contagem quebravam os dois em duas
   linhas, desencontrados. Um embaixo do outro fica legível. */
@media(max-width:600px){.uso-topo{flex-direction:column;align-items:flex-start;gap:3px;}}
.uso-rotulo{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--t-fraco);}
.uso-qtd{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--t-medio);}
.uso-trilho{height:4px;background:var(--risco);overflow:hidden;}
.uso-barra{height:100%;background:var(--musgo);transform-origin:left;transition:width .9s var(--curva),background .4s;}
.uso-barra.apertado{background:var(--latao);}
.uso-barra.estourou{background:var(--tijolo);}

/* ---------- GRUPO POR ANO ---------- */
.ano-grupo{margin-bottom:34px;}
.ano-titulo{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--latao);
}
.ano-titulo::after{content:"";flex:1;height:1px;background:var(--risco);}

/* Selo clicável do resumo de distribuição */
.selo-botao{cursor:pointer;transition:.25s var(--curva-suave);}
.selo-botao:hover{border-color:currentColor;}
.selo-botao.marcado{box-shadow:0 0 0 1px currentColor;}
.chips-resumo{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px;}

/* Bloco de uma sub-planilha (artistas / músicas) */
.bloco-planilha{margin-bottom:40px;}
.bloco-cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.bloco-cabeca h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;}
.bloco-cabeca h2 i{color:var(--brasa);}
.bloco-cabeca .conta{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--t-fraco);}
.bloco-acoes{display:flex;gap:8px;flex-wrap:wrap;}

/* Linha marcada como "não subir" */
/* Selo de status e cabeçalho nunca quebram: "Contrato Assinado"
   em três linhas deixava a linha da planilha com 94px de altura. */
table.dados .selo{white-space:nowrap;}
table.dados th{white-space:nowrap;}

/* ---------- PLANILHA LARGA ----------
   Antes a tabela tinha largura fixa (1640px) repartida igual entre 14
   colunas: "Taka La Dentro" quebrava numa coluna de 108px enquanto a
   Descrição sobrava. Agora a tabela cresce conforme o conteúdo e a
   rolagem lateral cuida do resto. Por padrão nada quebra; só as
   colunas de texto livre podem ir pra segunda linha, e com um piso de
   largura que não deixa ficar espremido. */
table.dados.tabela-larga{width:max-content;min-width:100%;}
table.dados.tabela-larga th,
table.dados.tabela-larga td{padding-right:22px;white-space:nowrap;vertical-align:middle;}
table.dados.tabela-larga td.cel-titulo{white-space:normal;min-width:180px;max-width:280px;}
table.dados.tabela-larga td.cel-artistas{white-space:normal;min-width:160px;max-width:260px;}
table.dados.tabela-larga td.cel-texto{white-space:normal;min-width:220px;max-width:340px;}
table.dados.tabela-larga td.cel-acoes{padding-right:0;}

table.dados tr.bloqueada td{opacity:.55;}
table.dados tr.bloqueada td:first-child{box-shadow:inset 2px 0 0 var(--tijolo);}

/* ---------- PLAYS: BARRAS POR MÊS ---------- */
.meses-grafico{
  display:flex;align-items:flex-end;gap:clamp(8px,2vw,22px);
  border-bottom:1px solid var(--risco);padding-bottom:0;margin-bottom:38px;
}
.mes-barra{
  flex:1;background:none;border:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:inherit;font:inherit;
}
.mes-valor{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--t-fraco);
  transition:color .3s var(--curva-suave);
}
.mes-haste{display:flex;align-items:flex-end;justify-content:center;width:100%;height:clamp(90px,14vh,160px);}
/* Teto de largura pra coluna não virar um bloco chapado num monitor
   largo — com 6 meses em 1800px cada fatia passa de 280px. */
.mes-haste i{
  display:block;width:100%;max-width:96px;background:var(--tinta-4);
  transition:height .8s var(--curva),background .3s var(--curva-suave);
}
.mes-barra:hover .mes-haste i{background:var(--risco-forte);}
.mes-barra:hover .mes-valor{color:var(--t-medio);}
.mes-barra.escolhido .mes-haste i{background:var(--brasa);}
.mes-barra.escolhido .mes-valor{color:var(--brasa);}
.mes-rotulo{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-fraco);
  padding:10px 0;border-top:1px solid transparent;width:100%;
  transition:color .3s,border-color .3s;
}
.mes-barra.escolhido .mes-rotulo{color:var(--t-forte);border-top-color:var(--brasa);}

/* ---------- CONFIGURAÇÕES: CHAVES E COR ---------- */
.chaves{display:flex;flex-direction:column;gap:11px;margin-top:14px;}
.chave{display:flex;align-items:center;gap:11px;font-size:.85rem;color:var(--t-medio);cursor:pointer;}
.chave input{position:absolute;opacity:0;width:0;height:0;}
.chave-trilho{
  width:34px;height:19px;border-radius:100px;background:var(--tinta-4);
  border:1px solid var(--risco-forte);position:relative;flex-shrink:0;
  transition:background .3s var(--curva-suave),border-color .3s;
}
.chave-bola{
  position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--t-fraco);transition:transform .3s var(--curva),background .3s;
}
.chave input:checked + .chave-trilho{background:rgba(204,75,36,.3);border-color:var(--brasa);}
.chave input:checked + .chave-trilho .chave-bola{transform:translateX(15px);background:var(--brasa);}
.chave input:focus-visible + .chave-trilho{outline:2px solid var(--brasa);outline-offset:2px;}

.amostra-cor{width:20px;height:20px;border-radius:50%;border:1px solid var(--risco-forte);flex-shrink:0;}
.cores{display:flex;gap:10px;flex-wrap:wrap;}
.bola-cor{
  width:34px;height:34px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;transition:transform .25s var(--curva),border-color .25s;
}
.bola-cor:hover{transform:scale(1.1);}
.bola-cor.escolhida{border-color:var(--t-forte);transform:scale(1.1);}

/* ---------- METADADOS (obras + fonogramas) ---------- */
.meta-barra{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:16px;
}
.meta-filtros{display:flex;gap:8px;flex-wrap:wrap;}
.meta-filtro{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;background:none;border:1px solid var(--risco);border-radius:999px;
  cursor:pointer;color:var(--t-medio);font:inherit;font-size:.82rem;
  transition:background .25s var(--curva-suave),border-color .25s,color .25s;
}
.meta-filtro:hover{background:var(--tinta-2);color:var(--t-forte);}
.meta-filtro.ativo{background:var(--t-forte);border-color:var(--t-forte);color:var(--tinta);}
.meta-filtro span{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;font-variant-numeric:tabular-nums;
  opacity:.75;
}
.meta-barra-acoes{display:flex;gap:8px;flex-wrap:wrap;}
.meta-resumo-linha{
  font-size:.84rem;color:var(--t-medio);
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--risco);
}
.meta-resumo-linha b{color:var(--t-forte);font-weight:700;font-variant-numeric:tabular-nums;}
.meta-grade{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;
}
.meta-cartao{
  border:1px solid var(--risco);background:var(--tinta);
  padding:16px 18px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .25s;
}
.meta-cartao:hover{border-color:var(--t-fraco);}
.meta-cartao.incompleto{border-left:2px solid var(--latao);}
.meta-cartao-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.meta-tipo{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-fraco);
}
.meta-tipo.obra i{color:var(--brasa);}
.meta-tipo.fono i{color:var(--latao);}
.meta-cartao-titulo{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.08rem;
  letter-spacing:-.02em;line-height:1.25;
}
.meta-cartao-sub{font-size:.8rem;color:var(--t-medio);line-height:1.5;}
.meta-cartao-sub .isrc{font-family:'JetBrains Mono',monospace;font-size:.74rem;}
.meta-cartao-acoes{display:flex;gap:8px;align-items:center;margin-top:4px;}
.meta-cartao-acoes .btn{flex:1;justify-content:center;}

.isrc-campos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.isrc-campos input{font-family:'JetBrains Mono',monospace;text-align:center;}
.isrc-campos span{color:var(--t-fraco);font-weight:600;}

/* Inputs/selects DENTRO das tabelas e do ISRC dos metadados sao "crus"
   (nao ficam num .campo), entao o navegador desenhava fundo BRANCO com
   texto claro = ilegivel. Aqui recebem o tema escuro do painel. As larguras
   inline (ex: 78px do %) continuam valendo porque estilo inline vence. */
#metaCorpo table.dados input,
#metaCorpo table.dados select,
#metaCorpo .isrc-campos input{
  width:100%;
  background:var(--tinta-2);
  border:1px solid var(--risco-forte);
  color:var(--t-forte);
  padding:8px 10px;
  font:inherit;font-size:.9rem;
}
#metaCorpo table.dados select{color-scheme:dark;}
#metaCorpo table.dados input::placeholder,
#metaCorpo .isrc-campos input::placeholder{color:var(--t-fraco);}
#metaCorpo table.dados input:focus,
#metaCorpo table.dados select:focus,
#metaCorpo .isrc-campos input:focus{outline:none;border-color:var(--brasa);}

.fono-grupo{
  border:1px solid var(--risco);padding:14px 16px;margin-bottom:12px;
}
.fono-grupo-cabeca{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;
}
.fono-grupo-cabeca b{font-weight:600;}
.fono-grupo table.dados td{padding:6px 8px;}
.fono-grupo table.dados input,.fono-grupo table.dados select{width:100%;}

.soma-pct{
  display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;
}
.soma-pct.fecha{color:#8FC08A;}
.soma-pct.nao-fecha{color:var(--latao);}

/* Aviso de dado inventado. Usa tijolo, não brasa: brasa é a cor de
   ação normal do painel, e isto precisa parar o olho. */
.aviso-inventado{
  display:flex;gap:16px;align-items:flex-start;
  border:1px solid rgba(166,61,52,.45);background:rgba(166,61,52,.08);
  padding:18px 20px;margin-bottom:30px;
}
.aviso-inventado > i{font-size:1.3rem;color:#D08076;flex-shrink:0;margin-top:1px;}
.aviso-inventado b{display:block;font-size:.95rem;margin-bottom:5px;}
.aviso-inventado span{display:block;font-size:.85rem;color:var(--t-medio);line-height:1.6;max-width:82ch;}
.aviso-inventado span b{display:inline;color:var(--t-forte);}

/* ---------- PLAYS: GRUPOS DE LOJA ---------- */
.grupo-loja + .grupo-loja{margin-top:30px;padding-top:26px;border-top:1px solid var(--risco);}
.grupo-titulo{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;
}
.grupo-titulo span{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-fraco);
}
.grupo-titulo b{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.grupo-nota{margin-top:16px;font-size:.79rem;color:var(--t-fraco);line-height:1.6;}
.grupo-nota b{color:var(--t-medio);font-weight:600;}
/* Vídeo curto usa latão pra ficar claro, sem legenda, que é outra conta */
.grupo-loja + .grupo-loja .cat-barra{background:var(--latao);}

/* ---------- PLAYS: ENTRADAS DO RELATÓRIO ---------- */
.entrada-plays{border:1px solid var(--risco);padding:18px 20px;margin-bottom:14px;}
.entrada-plays.ligada{border-color:rgba(94,139,90,.4);background:rgba(94,139,90,.05);}
.entrada-topo{display:flex;align-items:flex-start;gap:14px;}
.entrada-topo > i{font-size:1.3rem;color:var(--brasa);flex-shrink:0;margin-top:2px;}
.entrada-plays.ligada .entrada-topo > i{color:var(--musgo);}
.entrada-topo > div{flex:1;min-width:0;}
.entrada-topo b{display:block;font-size:.95rem;margin-bottom:4px;}
.entrada-topo span{display:block;font-size:.84rem;color:var(--t-medio);line-height:1.5;}
.entrada-detalhe{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:11px 14px;background:var(--tinta-2);
}
.entrada-detalhe .mono{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--t-medio);}

/* ---------- PLAYS: RANKING ---------- */
.play-linha{
  display:flex;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--risco);
}
.play-linha:last-child{border-bottom:none;}
.play-pos{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--t-fraco);
  width:20px;flex-shrink:0;
}
.play-nome{min-width:150px;flex-shrink:0;}
.play-nome b{display:block;font-size:.92rem;font-weight:600;}
.play-nome span{display:block;font-size:.78rem;color:var(--t-medio);}
.play-trilho{flex:1;height:4px;background:var(--risco);min-width:40px;overflow:hidden;}
.play-barra{height:100%;background:var(--brasa);}
.play-num{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:-.02em;min-width:74px;text-align:right;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.play-dif{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;
  min-width:62px;text-align:right;flex-shrink:0;color:var(--t-fraco);
}
.play-dif.subiu{color:#8FC08A;}
.play-dif.desceu{color:#D08076;}
@media(max-width:640px){
  .play-trilho{display:none;}
  .play-nome{flex:1;min-width:0;}
}

.plays-colunas{display:grid;grid-template-columns:1.35fr 1fr;gap:1px;background:var(--risco);border:1px solid var(--risco);margin-bottom:38px;}
.plays-bloco{background:var(--tinta);padding:26px clamp(18px,2vw,28px);}
@media(max-width:900px){.plays-colunas{grid-template-columns:1fr;}}

/* Nada encontrado / lista vazia */
.vazio-tabela{
  padding:34px 0;text-align:center;color:var(--t-fraco);font-size:.9rem;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.vazio-tabela i{font-size:1.6rem;opacity:.6;}

/* ---------- ROLAGEM ----------
   Trilho transparente: com fundo próprio a barra virava um risco
   claro cortando a faixa fixa das abas no topo. O polegar fica fino
   e apagado, e só acende quando o mouse encosta. */
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:rgba(242,235,221,.14);border-radius:100px;
  border:2px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(204,75,36,.6);background-clip:content-box;}
::-webkit-scrollbar-corner{background:transparent;}
html{scrollbar-width:thin;scrollbar-color:rgba(242,235,221,.18) transparent;}

/* Dentro de tabela larga a barra precisa ser vista — é o aviso de
   que dá pra arrastar de lado. Aí ela fica um pouco mais forte. */
.rolagem-h::-webkit-scrollbar-thumb{background:rgba(242,235,221,.24);background-clip:content-box;}

/* ---------- SELO DE DEMONSTRAÇÃO ---------- */
.fita-demo{
  position:fixed;left:14px;bottom:14px;z-index:9985;
  display:flex;align-items:center;gap:9px;
  padding:9px 15px;
  background:rgba(20,17,16,.9);backdrop-filter:blur(10px);
  border:1px solid var(--risco-forte);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-medio);cursor:pointer;
  animation:demoEntra .7s var(--curva) .8s both;
  max-width:calc(100vw - 28px);
}
.fita-demo:hover{color:var(--t-forte);border-color:var(--brasa);}
.fita-demo .ponto-demo{width:6px;height:6px;border-radius:50%;background:var(--brasa);flex-shrink:0;animation:pisca-demo 2s infinite;}
@keyframes demoEntra{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes pisca-demo{0%,100%{opacity:1;}50%{opacity:.3;}}
@media(max-width:600px){.fita-demo{font-size:.52rem;padding:7px 11px;}}

/* ---------- TOAST ---------- */
#toasts{position:fixed;bottom:24px;right:24px;z-index:9990;display:flex;flex-direction:column;gap:10px;}
.toast{
  background:var(--tinta-3);border:1px solid var(--risco-forte);
  border-left:3px solid var(--brasa);
  padding:14px 20px;font-size:.9rem;max-width:340px;
  animation:toastEntra .5s var(--curva);
}
.toast.ok{border-left-color:var(--musgo);}
.toast.erro{border-left-color:var(--tijolo);}
@keyframes toastEntra{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:none;}}

/* ---------- MODAL ---------- */
.modal-fundo{
  position:fixed;inset:0;z-index:9995;
  background:rgba(10,8,7,.82);
  display:none;place-items:center;padding:24px;
  animation:fade .3s var(--curva-suave);
}
.modal-fundo.aberto{display:grid;}
.modal-caixa{
  background:var(--tinta-2);border:1px solid var(--risco-forte);
  width:100%;max-width:520px;padding:34px;
  animation:modalEntra .5s var(--curva);
  max-height:88vh;overflow-y:auto;
}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes modalEntra{from{opacity:0;transform:translateY(24px) scale(.98);}to{opacity:1;transform:none;}}

/* ---------- BUSCA POR ISRC (consulta real ao Deezer) ---------- */
/* Campo com botão do lado. O input tem piso de largura: abaixo disso
   os botões descem pra linha de baixo em vez de esmagar o que a pessoa
   digitou. Antes o flex encolhia o input até sumir. */
.campo-com-botao{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;}
/* o input estava sem cor de fundo/texto próprios: em cima de um cartão
   claro do navegador ficava branco no branco (não dava pra ler o que
   digitava). Agora tem fundo escuro, borda e texto claro. */
.campo-com-botao input{flex:1 1 180px;min-width:0;
  background:var(--tinta);border:1px solid var(--risco-forte);color:var(--t-forte);
  padding:12px 14px;font-size:.95rem;transition:border-color .3s var(--curva-suave);}
.campo-com-botao input::placeholder{color:var(--t-fraco);}
.campo-com-botao input:focus{outline:none;border-color:var(--brasa);}
.campo-com-botao .btn{flex-shrink:0;white-space:nowrap;}

/* ---------- FORMULÁRIO EM DUAS COLUNAS ----------
   Substitui o grid escrito na mão em cada modal. Três coisas que o
   inline não fazia: item de grid com min-width:0 (senão um campo largo
   estoura a coluna), campo que ocupa as duas colunas quando precisa de
   espaço, e uma coluna só no celular. */
.form-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;}
.form-2col > *{min-width:0;}
.form-2col > .campo-largo{grid-column:1 / -1;}

.modal-caixa.larga{max-width:760px;}

@media(max-width:600px){
  .form-2col{grid-template-columns:minmax(0,1fr);}
  .modal-fundo{padding:10px;}
  .modal-caixa{padding:24px 18px;max-height:94vh;}
  .campo-com-botao .btn{flex:1 1 auto;justify-content:center;}
}

.achado{
  display:flex;align-items:center;gap:12px;margin-top:10px;
  padding:11px 13px;border:1px solid var(--risco);font-size:.85rem;
}
.achado img{width:42px;height:42px;object-fit:cover;flex-shrink:0;border:1px solid var(--risco);}
.achado > div{flex:1;min-width:0;}
.achado b{display:block;font-size:.9rem;font-weight:600;}
.achado span{display:block;font-size:.78rem;color:var(--t-medio);}
.achado a{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;color:var(--brasa);margin-top:3px;}
.achado.ok{border-color:rgba(94,139,90,.4);background:rgba(94,139,90,.06);}
.achado.erro{border-color:rgba(166,61,52,.4);background:rgba(166,61,52,.06);color:#D08076;}
.achado.carregando{color:var(--t-fraco);}
.achado.carregando i{animation:girando 1s linear infinite;display:inline-block;}
@keyframes girando{to{transform:rotate(360deg);}}

/* ---------- QUADRO "COMO FUNCIONA" (linguagem de produtora) ----------
   Fica no topo da aba Plays. Acordeão porque quem já entendeu não
   precisa reler todo dia, mas abre por padrão na primeira visita. */
.explica{border:1px solid var(--risco);margin-bottom:34px;}
.explica-cabeca{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:16px 20px;background:none;border:none;cursor:pointer;
  color:inherit;font:inherit;text-align:left;
}
.explica-cabeca > span{flex:1;font-weight:600;font-size:.95rem;}
.explica-cabeca > i:first-child{color:var(--brasa);font-size:1.15rem;}
.explica-seta{color:var(--t-fraco);transition:transform .45s var(--curva);}
.explica [data-item].aberto .explica-seta{transform:rotate(180deg);}
.explica-corpo{height:0;overflow:hidden;transition:height .5s var(--curva);}
.explica-dentro{padding:4px 20px 24px;}

.explica-par{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--risco);border:1px solid var(--risco);margin-bottom:18px;}
@media(max-width:680px){.explica-par{grid-template-columns:1fr;}}
.explica-cartao{background:var(--tinta-2);padding:20px;}
.explica-cartao > i{font-size:1.4rem;color:var(--brasa);display:block;margin-bottom:12px;}
.explica-cartao b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:6px;}
.explica-cartao span{display:block;font-size:.86rem;color:var(--t-medio);line-height:1.6;}
.explica-cartao span b{display:inline;font-family:inherit;font-size:inherit;color:var(--t-forte);}

.explica-alerta{
  display:flex;gap:10px;align-items:flex-start;
  border-left:2px solid var(--latao);padding:12px 0 12px 14px;margin-bottom:26px;
  font-size:.87rem;color:var(--t-medio);line-height:1.6;
}
.explica-alerta i{color:var(--latao);font-size:1.05rem;flex-shrink:0;margin-top:1px;}
.explica-alerta b{color:var(--t-forte);}
.explica-titulo{color:var(--t-fraco);margin-bottom:12px;}
.explica-nota{margin-top:20px;font-size:.85rem;color:var(--t-medio);line-height:1.7;max-width:80ch;}
.explica-nota b{color:var(--t-forte);}

/* ---------- LOGO ----------
   Arte branca sobre transparente: entra como está no fundo escuro.
   Nas seções de papel ela precisa inverter, senão some no claro. */
.marca-icone{
  width:1.5em;height:1.5em;object-fit:contain;
  /* .marca alinha pela linha de base do texto, e a linha de base de uma
     imagem é a borda de baixo dela — por isso a logo subia e ficava
     torta. Fora do alinhamento do grupo, centrada na mão. */
  align-self:center;
  margin-right:.3em;flex-shrink:0;
  position:relative;top:-.05em;
}
.papel .marca-icone,.marca-escura .marca-icone{filter:invert(1);}

/* ---------- FONTES DE PLAYS DO ARTISTA ---------- */
.fontes{
  display:inline-flex;align-items:center;gap:6px;margin-top:5px;
  font-size:.75rem;color:var(--t-fraco);
}
.fontes.alerta-fonte{color:var(--latao);}
.secao-fontes{border-top:1px solid var(--risco);padding-top:22px;margin-top:6px;}
.lista-canais{display:flex;flex-direction:column;gap:1px;background:var(--risco);border:1px solid var(--risco);}
.lista-canais:empty{display:none;}
.canal-linha{
  display:flex;align-items:center;gap:12px;
  background:var(--tinta-2);padding:12px 14px;
}
.canal-linha.divergente{background:rgba(166,61,52,.08);}
.canal-linha > i{font-size:1.15rem;color:var(--brasa);flex-shrink:0;}
.canal-linha > div{flex:1;min-width:0;}
.canal-linha b{display:block;font-size:.88rem;font-weight:600;}
.canal-linha span{display:block;font-size:.76rem;color:var(--t-medio);}
.achado.aviso{border-color:rgba(201,151,63,.45);background:rgba(201,151,63,.07);}

/* ---------- BUSCA GLOBAL DO PAINEL ----------
   Com 11 abas, achar uma música exige lembrar em qual delas ela mora.
   Isto procura em tudo de uma vez e leva direto ao lugar. */
.btn-busca-topo{width:auto;padding:0 12px;gap:8px;display:flex;align-items:center;}
.btn-busca-topo .atalho{
  font-size:.58rem;letter-spacing:.08em;color:var(--t-fraco);
  border:1px solid var(--risco);padding:2px 6px;
}
@media(max-width:700px){.btn-busca-topo .atalho{display:none;}.btn-busca-topo{width:36px;padding:0;justify-content:center;}}

.busca-global{
  position:fixed;inset:0;z-index:9990;
  background:rgba(10,8,7,.72);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(60px,12vh,140px) 20px 20px;
  animation:fundo-entra .25s var(--curva-suave);
}
.busca-global[hidden]{display:none;}
@keyframes fundo-entra{from{opacity:0;}to{opacity:1;}}
.busca-global-caixa{
  width:min(660px,100%);background:var(--tinta-2);
  border:1px solid var(--risco-forte);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  animation:caixa-entra .35s var(--curva);
  display:flex;flex-direction:column;max-height:min(560px,76vh);
}
@keyframes caixa-entra{from{opacity:0;transform:translateY(-14px) scale(.98);}to{opacity:1;transform:none;}}
.busca-global-campo{display:flex;align-items:center;gap:12px;padding:0 14px 0 18px;border-bottom:1px solid var(--risco);}
.busca-global-campo > i{color:var(--t-fraco);font-size:1.2rem;flex-shrink:0;}
.busca-global-campo input{flex:1;min-width:0;background:none;border:none;padding:19px 0;font-size:1rem;}
.busca-global-campo input:focus{outline:none;}
.busca-global-lista{overflow-y:auto;flex:1;padding:8px 0;}
.busca-grupo{
  font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-fraco);padding:12px 18px 6px;
}
.busca-item{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:11px 18px;background:none;border:none;cursor:pointer;
  color:inherit;font:inherit;text-align:left;
}
.busca-item:hover,.busca-item.marcado{background:var(--tinta-3);}
.busca-item.marcado{box-shadow:inset 2px 0 0 var(--brasa);}
.busca-item > i{font-size:1.05rem;color:var(--t-fraco);flex-shrink:0;}
.busca-item.marcado > i{color:var(--brasa);}
.busca-item div{flex:1;min-width:0;}
.busca-item b{display:block;font-size:.92rem;font-weight:600;}
.busca-item span{display:block;font-size:.78rem;color:var(--t-medio);}
.busca-item .onde{
  font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t-fraco);flex-shrink:0;
}
.busca-global-pe{
  display:flex;gap:18px;padding:11px 18px;border-top:1px solid var(--risco);
  color:var(--t-fraco);font-size:.58rem;letter-spacing:.09em;flex-wrap:wrap;
}
.busca-global-pe b{color:var(--t-medio);font-weight:500;}
.busca-vazia{padding:36px 18px;text-align:center;color:var(--t-fraco);font-size:.9rem;}

/* ---------- FOCO VISÍVEL ----------
   Vários campos tiram o outline pra não brigar com a borda desenhada,
   mas isso deixa quem navega por teclado sem saber onde está. O
   :focus-visible só aparece na navegação por teclado — quem usa mouse
   não vê anel nenhum, então o visual continua limpo. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--brasa);
  outline-offset:2px;
  border-radius:1px;
}
.papel :where(a,button,input,select,textarea):focus-visible{outline-color:var(--brasa-forte);}

/* Onde o campo já ganha borda de brasa no foco, o anel iria por cima
   dela — aqui a própria borda faz o papel, com um halo pra destacar. */
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(204,75,36,.22);
}

/* Pular direto pro conteúdo — quem usa teclado não precisa passar por
   todas as abas do topo antes de chegar na tela. */
.pular-para-conteudo{
  position:absolute;left:14px;top:-60px;z-index:9999;
  background:var(--brasa);color:#FFF4EE;
  padding:11px 18px;font-weight:600;font-size:.88rem;
  transition:top .25s var(--curva);
}
.pular-para-conteudo:focus{top:14px;}

/* ---------- CONTADOR DO SINO ---------- */
.envolve-sino{position:relative;overflow:visible;}
.sino-conta{
  position:absolute;top:-5px;right:-5px;
  min-width:17px;height:17px;padding:0 4px;border-radius:100px;
  background:var(--brasa);color:#FFF4EE;
  font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:500;
  display:grid;place-items:center;
  border:2px solid var(--tinta);
}
.sino-conta[hidden]{display:none;}


/* ---------- PESSOA DA EQUIPE ----------
   Usada no painel e na tela do artista. Os !important não são preguiça:
   as duas páginas têm regras do tipo ".linha span{display:block}" e
   ".lanc span{margin-bottom:12px}", e a bolinha de uma pessoa não pode
   virar bloco nem ganhar margem só porque caiu dentro de uma linha. */
.avatar{
  display:inline-grid !important;place-items:center;flex-shrink:0;
  border-radius:50%;margin:0 !important;
  color:#FFF7F0;font-weight:700;letter-spacing:-.02em;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.avatar-vazio{background:transparent;border:1px dashed var(--risco-forte);color:var(--t-fraco);box-shadow:none;}
.avatar-foto{overflow:hidden;background:var(--tinta-3);}
.avatar-foto img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.chip-pessoa{display:inline-flex !important;align-items:center;gap:7px;margin:0 !important;white-space:nowrap;vertical-align:middle;}
.chip-pessoa .chip-nome{display:inline !important;margin:0 !important;font-size:.84rem;color:var(--t-forte);}
.chip-pessoa.sem .chip-nome{color:var(--t-fraco);font-style:italic;}

/* ============================================================
   TELA DE ENVIO (artista mandando música no modo real)
   Pedido do Tubarão em 14/09/2026: enquanto a música sobe, uma tela
   de carregamento bonita, com o texto certo pro que ele escolheu
   (single, EP ou álbum). É um envio que pode demorar (WAV é pesado),
   então a tela precisa dizer que está trabalhando e pedir calma.
   ============================================================ */
#envioCarregando{
  position:fixed;inset:0;z-index:9995;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px;text-align:center;
  background:radial-gradient(circle at 50% 36%,var(--tinta-3),var(--tinta) 72%);
  animation:envEntra .45s var(--curva) both;
}
@keyframes envEntra{from{opacity:0}to{opacity:1}}
#envioCarregando.saindo{opacity:0;transition:opacity .4s var(--curva-suave);pointer-events:none;}

/* disco girando com braço do toca-discos */
.env-toca{position:relative;width:158px;height:158px;margin-bottom:34px;}
.env-disco{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(242,235,221,.055) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 44% 40%,var(--tinta-4),#0b0908 78%);
  border:1px solid var(--risco-forte);
  box-shadow:0 20px 55px rgba(0,0,0,.55);
  animation:envGira 2.6s linear infinite;
}
.env-disco::after{content:"";position:absolute;top:50%;left:50%;width:36%;height:36%;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle at 40% 38%,var(--brasa-forte),var(--brasa));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
.env-disco::before{content:"";position:absolute;top:50%;left:50%;width:6%;height:6%;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--tinta);z-index:2;}
@keyframes envGira{to{transform:rotate(360deg)}}
.env-brilho{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(125deg,transparent 42%,rgba(242,235,221,.10) 50%,transparent 58%);}
.env-braco{position:absolute;top:-8px;right:2px;width:70px;height:70px;transform-origin:top right;
  animation:envBraco 2.6s var(--curva-suave) infinite alternate;}
.env-braco i{position:absolute;top:5px;right:5px;width:11px;height:11px;border-radius:50%;
  background:var(--latao);box-shadow:0 2px 6px rgba(0,0,0,.5);}
.env-braco i::after{content:"";position:absolute;top:8px;left:3px;width:3px;height:52px;background:var(--latao);
  border-radius:2px;transform:rotate(40deg);transform-origin:top;}
@keyframes envBraco{from{transform:rotate(12deg)}to{transform:rotate(24deg)}}

.env-titulo{font-family:'Bricolage Grotesque','Sora',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.15;text-wrap:balance;margin-bottom:8px;}
.env-sub{color:var(--brasa);font-size:1.02rem;margin-bottom:26px;max-width:34ch;}
.env-ondas{display:flex;align-items:flex-end;gap:5px;height:24px;margin-bottom:20px;}
.env-ondas span{width:4px;height:6px;background:var(--brasa);border-radius:2px;animation:envOnda 1s ease-in-out infinite;}
.env-ondas span:nth-child(2){animation-delay:.1s}
.env-ondas span:nth-child(3){animation-delay:.2s}
.env-ondas span:nth-child(4){animation-delay:.3s}
.env-ondas span:nth-child(5){animation-delay:.4s}
.env-ondas span:nth-child(6){animation-delay:.5s}
.env-ondas span:nth-child(7){animation-delay:.6s}
@keyframes envOnda{0%,100%{height:6px;opacity:.45}50%{height:24px;opacity:1}}
.env-status{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-medio);margin-bottom:12px;min-height:1em;}
.env-dica{font-size:.84rem;color:var(--t-fraco);max-width:42ch;line-height:1.55;}
@media (prefers-reduced-motion: reduce){
  .env-disco,.env-braco,.env-ondas span{animation:none !important;}
}

/* linha rótulo → valor (ex.: e-mail / senha nova gerada pro artista) */
.pag-linha{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 14px;border:1px solid var(--risco);background:var(--tinta-2);}
.pag-linha > span{font-size:.82rem;color:var(--t-medio);}
.pag-linha > b{color:var(--t-forte);overflow-wrap:anywhere;text-align:right;}

/* consulta de autorização (painel do artista) */
.autz{border:1px solid var(--risco);background:var(--tinta-2);padding:20px 22px;}
.autz-intro{color:var(--t-medio);font-size:.9rem;line-height:1.6;margin-bottom:16px;max-width:70ch;}
.autz-intro b{color:var(--t-forte);}
.autz-lista{margin-top:16px;}
.autz-lista summary{cursor:pointer;font-size:.85rem;color:var(--brasa);width:fit-content;}
.autz-nomes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.autz-nomes span{font-size:.82rem;color:var(--t-forte);border:1px solid var(--risco-forte);padding:4px 10px;background:var(--tinta);}
.autz-vazio{color:var(--t-fraco);font-size:.85rem;margin-top:14px;}

/* Aviso de possível duplicata ao salvar uma música na planilha
   (ISRC/título repetido, ou mesmo artista na mesma data) */
.aviso-dup{border:1px solid var(--risco-forte);background:var(--tinta-2);padding:13px 15px;margin-bottom:12px;}
.aviso-dup.grave{border-color:var(--tijolo);background:rgba(166,61,52,.09);}
.aviso-dup > b{display:flex;align-items:center;gap:7px;font-size:.92rem;color:var(--t-forte);margin-bottom:6px;}
.aviso-dup > b i{color:var(--latao);}
.aviso-dup.grave > b,.aviso-dup.grave > b i{color:var(--tijolo);}
.aviso-dup p{font-size:.84rem;color:var(--t-medio);line-height:1.5;margin-bottom:9px;}
.aviso-dup ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.aviso-dup li{font-size:.85rem;color:var(--t-medio);display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;padding:8px 11px;background:var(--tinta);border:1px solid var(--risco);}
.aviso-dup li b{color:var(--t-forte);}
/* artista da própria produtora, destacado nos avisos de duplicata */
.artista-casa{color:var(--brasa);font-weight:700;}
/* recado da produtora pro artista, no card da música (rejeição, autorização) */
.msg-produtora{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 12px;
  background:rgba(204,75,36,.09);border:1px solid rgba(204,75,36,.28);
  font-size:.84rem;color:var(--t-medio);line-height:1.5;}
.msg-produtora i{color:var(--brasa);margin-top:2px;flex-shrink:0;}
.msg-produtora span{min-width:0;overflow-wrap:anywhere;}
/* nome da música na planilha vira "clique pra editar" */
table.dados.tabela-larga td.cel-editavel{cursor:pointer;}
td.cel-editavel .cel-lapis{opacity:0;color:var(--brasa);font-size:.82rem;margin-left:3px;transition:opacity .2s;}
table.dados tbody tr:hover td.cel-editavel .cel-lapis{opacity:.9;}
td.cel-editavel:hover b{color:var(--brasa);}
/* aviso no topo da Início do artista: músicas que precisam de ação (rejeitada,
   corrigir, aguardando autorização, ou com recado da produtora) */
.atencao-artista{border:1px solid var(--latao);background:rgba(201,162,39,.07);padding:16px 18px;margin-bottom:28px;}
.atencao-cabeca{display:flex;align-items:center;gap:9px;font-size:.98rem;color:var(--t-forte);margin-bottom:10px;}
.atencao-cabeca i{color:var(--latao);font-size:1.2rem;}
.atencao-item{padding:11px 13px;background:var(--tinta);border:1px solid var(--risco);margin-top:8px;cursor:pointer;transition:border-color .25s;}
.atencao-item:hover{border-color:var(--brasa);}
.atencao-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem;}
.atencao-topo b{color:var(--t-forte);}
.atencao-msg{display:flex;gap:7px;align-items:flex-start;margin-top:7px;font-size:.85rem;color:var(--t-medio);line-height:1.5;}
.atencao-msg i{color:var(--brasa);margin-top:2px;flex-shrink:0;}