/* Portal dos Criativos — mesmos tokens do DaVinci (apps/web/assets/css/globals.css),
   pra agência não sentir que entrou noutro produto. Nada de inline style em
   view nenhuma: a CSP manda `style-src 'self'`, e é ela que faz um texto que
   escape do e() virar texto na tela em vez de script. */
:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --border: 220 13% 91%;
  --success: 142 71% 38%;
  --warning: 38 92% 50%;
  --destructive: 0 84% 60%;
  --sidebar: 0 0% 100%;
  --radius: 0.625rem;
  --sombra: 0 1px 2px hsl(222 47% 11% / .06), 0 1px 3px hsl(222 47% 11% / .04);
  --sombra-alta: 0 4px 12px hsl(222 47% 11% / .08), 0 2px 4px hsl(222 47% 11% / .04);
  /* Sem isto, escolher "claro" num sistema escuro deixava o navegador pintando
     o TEXTO dos campos de claro sobre o fundo branco do CSS — invisível. */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 222 47% 6%;
    --foreground: 210 40% 98%;
    --card: 222 47% 8%;
    --primary: 217 91% 60%;
    --primary-foreground: 222 47% 11%;
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    --border: 217 33% 17%;
    --success: 142 71% 45%;
    --warning: 38 92% 60%;
    --destructive: 0 63% 45%;
    --sidebar: 222 47% 8%;
    --sombra: 0 1px 2px hsl(0 0% 0% / .3);
    --sombra-alta: 0 4px 14px hsl(0 0% 0% / .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: 222 47% 6%; --foreground: 210 40% 98%; --card: 222 47% 8%;
  --primary: 217 91% 60%; --primary-foreground: 222 47% 11%;
  --muted: 217 33% 17%; --muted-foreground: 215 20% 65%; --border: 217 33% 17%;
  --success: 142 71% 45%; --warning: 38 92% 60%; --destructive: 0 63% 45%;
  --sidebar: 222 47% 8%;
  --sombra: 0 1px 2px hsl(0 0% 0% / .3);
  --sombra-alta: 0 4px 14px hsl(0 0% 0% / .35);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground));
  font: 14px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: hsl(var(--primary)); }
img { max-width: 100%; }

/* ── casca ───────────────────────────────────────────── */
.topo {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 24px; background: hsl(var(--sidebar));
  border-bottom: 1px solid hsl(var(--border)); position: sticky; top: 0; z-index: 10;
}
.marca {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: inherit; letter-spacing: -.02em;
}
.marca-logo { border-radius: 6px; display: block; }
.marca-nome { font-weight: 700; font-size: 15px; }
.marca-sub { color: hsl(var(--muted-foreground)); font-weight: 500; font-size: 15px; }
.marca-sub::before { content: "·"; margin-right: 6px; }
/* `wrap` + `max-width` em QUALQUER largura, não só no telefone: é a trava que
   impede o menu de passar da tela seja qual for a conta de breakpoint. Na
   tela larga ele cabe numa fila e isto não muda nada. */
.abas { display: flex; gap: 2px; flex-wrap: wrap; max-width: 100%; }
.aba {
  padding: 7px 14px; border-radius: var(--radius); text-decoration: none;
  color: hsl(var(--muted-foreground)); font-weight: 500; white-space: nowrap;
}
.aba:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.aba.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.quem { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: hsl(var(--muted-foreground)); }

/* ── O cabeçalho no telefone ─────────────────────────────────────────────
   As sete abas numa fila só dão 768px, e o telefone tem 360-430: a página
   inteira rolava para o lado. Aqui elas QUEBRAM em linhas, como pílulas.
   Rolagem lateral no menu (o outro jeito comum) foi descartada de propósito:
   sem JavaScript não há como rolar até a aba atual, e "Vídeos de referência",
   a última, ficaria escondida justamente quando é a tela aberta.

   Linha de cima: a marca e o bloco de conta/tema. Embaixo: as abas.

   O cabeçalho deixa de grudar no topo: com duas linhas de abas ele teria ~140px
   e comeria um sexto da tela o tempo todo. `relative` e NÃO `static` — sem
   posicionamento o `z-index` para de valer, e a cortina da troca de tela
   (z-index 9) passaria a cobrir o menu (10).

   Vale até 900px e não só até 720: em 768 (tablet em pé) o menu de desktop
   ainda tinha 776px, e transbordava igual. */
@media (max-width: 900px) {
  .topo { position: relative; padding: 10px 16px; gap: 10px 12px; }
  .marca-sub { display: none; }
  .quem { order: 1; margin-left: auto; gap: 10px; }
  .abas { order: 2; width: 100%; flex-wrap: wrap; gap: 6px; }
  .aba { padding: 6px 11px; font-size: 13.5px; background: hsl(var(--muted) / .55); }
  .aba.on { background: hsl(var(--primary)); }
}
/* Em tela bem estreita o nome do login sai: marca + tema + Sair já enchem a
   linha, e quem está logado é quem está segurando o telefone. */
@media (max-width: 420px) {
  .quem-nome { display: none; }
}

main { max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; }
.cabeca { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
h1 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 4px; }
h2 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin: 0 0 10px; }
.sub { color: hsl(var(--muted-foreground)); margin: 0; max-width: 58ch; }
.contagem {
  margin-left: auto; flex-shrink: 0; font-size: 12px; color: hsl(var(--muted-foreground));
  background: hsl(var(--muted)); padding: 4px 10px; border-radius: 999px;
}

/* ── cartões ─────────────────────────────────────────── */
.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grade-elenco { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra);
  display: flex; flex-direction: column;
}
/* O card INTEIRO abre a ficha, e não só o título. Sem capa (as ideias que o
   robô escreve nunca têm imagem) sobrava um link de duas palavras no meio de
   um cartão grande — quem clica em cima do resumo não acontecia nada.
   O truque é o link do <h3> esticado por ::after em vez de embrulhar tudo num
   <a>: âncora dentro de âncora é HTML inválido, e aqui dentro já existem
   outros links (marca, personagem). */
.card-link { position: relative; transition: box-shadow .15s, border-color .15s; }
.card-link:hover { box-shadow: var(--sombra-alta); border-color: hsl(var(--primary) / .35); }
.card-link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Quem vem DEPOIS na pilha continua clicável: a etiqueta do personagem e o
   link de baixar precisam ganhar do retângulo esticado. */
.card-link .card-corpo > *:not(h3) { position: relative; z-index: 1; }
.card-link:hover { cursor: pointer; }
.card-corpo { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.card h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; line-height: 1.35; }
.card h3 a { text-decoration: none; color: inherit; }
.card h3 a:hover { color: hsl(var(--primary)); }
.linha-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }

.card-capa, .ficha-capa {
  display: flex; align-items: center; justify-content: center;
  height: 150px; background: hsl(var(--muted)); overflow: hidden;
}
.card-capa img, .ficha-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-capa-vazia { font-size: 11.5px; color: hsl(var(--muted-foreground)); }

.meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: hsl(var(--muted-foreground)); }
.meta code { background: hsl(var(--muted)); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }
.tempo { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.resumo { margin: 0; font-size: 13px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
/* Segunda trava do corte: mesmo com texto curto, nenhum card estica a linha
   inteira da grade por causa de um vizinho falante. */
.grade-elenco .resumo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  line-clamp: 4; overflow: hidden;
}
.grade-elenco .card-corpo { min-height: 0; }
.grade-elenco .card { align-self: start; }

/* ── elenco ──────────────────────────────────────────── */
.elenco { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 2px;
  border: 1px solid hsl(var(--border)); border-radius: 999px;
  background: hsl(var(--muted) / .6); font-size: 11.5px;
}
.chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; }
.etiqueta {
  display: block; background: hsl(var(--muted)); border-radius: 6px;
  padding: 5px 8px; font-size: 11px; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── detalhe do roteiro ──────────────────────────────── */
.voltar { display: inline-block; margin-bottom: 14px; font-size: 13px; text-decoration: none; }
.voltar:hover { text-decoration: underline; }
.colunas { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.colunas section + section { margin-top: 24px; }
/* Título de seção com uma ação à direita (o "Copiar texto" do roteiro). */
.secao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.secao-cabeca h2 { margin: 0; }
/* O `display` do .btn ganhava do `hidden` (regra do navegador perde para a
   do site), e botão que só funciona com JavaScript aparecia sem ele. */
[hidden] { display: none !important; }
.roteiro {
  white-space: pre-wrap; background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 18px; font-size: 13.5px; line-height: 1.7; margin: 0;
  overflow-wrap: anywhere;
}
.personagem { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid hsl(var(--border)); }
.personagem:first-of-type { border-top: 0; padding-top: 0; }
.personagem-foto { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; display: block; }
.personagem-foto-vazia { background: hsl(var(--muted)); }
.personagem-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; }
.personagem-texto span { color: hsl(var(--muted-foreground)); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.galeria img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; display: block; border: 1px solid hsl(var(--border)); }
.galeria-mini img { height: 48px; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.links a { overflow-wrap: anywhere; }

/* ── recado da recusa ────────────────────────────────── */
.recado {
  border-left: 3px solid hsl(var(--warning)); background: hsl(var(--warning) / .08);
  border-radius: 0 8px 8px 0; padding: 10px 12px; font-size: 13px;
}
.recado b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--warning)); margin-bottom: 4px; }
.recado p { margin: 0 0 4px; white-space: pre-wrap; }
.atalho { font-size: 12.5px; text-decoration: none; }
.atalho:hover { text-decoration: underline; }

/* ── arquivos ────────────────────────────────────────── */
.arquivos { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.arquivo { display: flex; justify-content: space-between; gap: 10px; color: hsl(var(--muted-foreground)); }
.arquivo b { color: hsl(var(--foreground)); font-weight: 500; overflow-wrap: anywhere; }

/* ── filtros de estado ───────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.filtro {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; border: 1px solid hsl(var(--border));
  text-decoration: none; color: hsl(var(--muted-foreground)); font-size: 12.5px;
}
.filtro:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.filtro.on { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.filtro-n { font-variant-numeric: tabular-nums; opacity: .75; }

/* ── tabela das entregas ─────────────────────────────── */
/* Cartão é bom pra 5 itens e péssimo pra 50: a linha deixa comparar estado e
   arquivo de relance, que é o que se faz nesta tela. */
.tabela-rolagem {
  overflow-x: auto; border: 1px solid hsl(var(--border));
  border-radius: var(--radius); background: hsl(var(--card));
}
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: .03em;
  text-transform: uppercase; color: hsl(var(--muted-foreground));
  padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap;
}
.tabela td { padding: 11px 12px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
.tabela tbody tr:last-child td, .tabela tbody tr.linha-recado:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: hsl(var(--muted) / .35); }
/* A linha do recado é continuação da de cima: sem risco entre as duas. */
.tabela tr.tem-recado td { border-bottom: 0; }
.tabela tr.linha-recado td { padding-top: 0; }
.tabela tr.linha-recado:hover td { background: transparent; }
.tabela td b { font-weight: 500; }
.celula-produto { display: table-cell; }
.celula-produto span { margin-right: 6px; color: hsl(var(--muted-foreground)); }
.celula-produto code { background: hsl(var(--muted)); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }
.col-estado { white-space: nowrap; }
.col-envio { min-width: 260px; }
.nada { color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.rodape-nota { color: hsl(var(--muted-foreground)); font-size: 12px; margin: 10px 2px 0; }
.anexo-nao-imagem {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 80px; padding: 6px; font-size: 10.5px; overflow-wrap: anywhere;
  color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border-radius: 8px;
}
.galeria-grande { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.galeria-grande img { height: 170px; }
.etiqueta-grande { font-size: 12.5px; padding: 9px 11px; }

/* ── arquivos do personagem ──────────────────────────── */
/* O ARQUIVO é o que a agência leva: a etiqueta do gerador é atalho e pode
   quebrar (é id interno da ferramenta que criou o rosto). Por isso o botão de
   baixar fica junto de cada foto, e não escondido numa ação secundária. */
.foto { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.foto img { width: 100%; height: 170px; object-fit: cover; border-radius: 8px; display: block; border: 1px solid hsl(var(--border)); }
.foto figcaption { display: flex; align-items: center; gap: 7px; font-size: 11px; color: hsl(var(--muted-foreground)); }
.voz { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.voz audio { width: 100%; height: 34px; }
.voz-acoes { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.voz-mini { width: 100%; max-width: 230px; height: 30px; margin-top: 2px; }
.link-video { font-size: 13.5px; }
.selos { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }

/* ── pills, iguais às do DaVinci ─────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; border: 1px solid; font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.pill-ok    { border-color: hsl(var(--success) / .3);     background: hsl(var(--success) / .1);     color: hsl(var(--success)); }
.pill-espera{ border-color: hsl(var(--warning) / .3);     background: hsl(var(--warning) / .1);     color: hsl(var(--warning)); }
.pill-nao   { border-color: hsl(var(--destructive) / .3); background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.pill-info  { border-color: hsl(var(--border));           background: hsl(var(--muted));            color: hsl(var(--muted-foreground)); }

/* ── formulários ─────────────────────────────────────── */
.btn {
  display: inline-block; border: 0; border-radius: var(--radius); padding: 9px 16px;
  font-weight: 500; font-size: 13.5px; text-decoration: none;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn-sec { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
input[type=email], input[type=password], input[type=file] {
  width: 100%; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: inherit; font: inherit;
}
input:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 2px solid hsl(var(--primary)); outline-offset: 2px;
}
label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 5px; }
.envio { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.envio input[type=file] { flex: 1 1 150px; min-width: 0; font-size: 11.5px; padding: 5px 7px; }
.tabela .envio { margin-top: 0; gap: 6px; flex-wrap: nowrap; }

.aviso { border-radius: var(--radius); padding: 11px 14px; margin-bottom: 18px; font-size: 13.5px; border: 1px solid; }
.aviso-erro { border-color: hsl(var(--destructive) / .4); background: hsl(var(--destructive) / .08); }
.aviso-ok   { border-color: hsl(var(--success) / .4);     background: hsl(var(--success) / .08); }
.vazio {
  color: hsl(var(--muted-foreground)); text-align: center; padding: 50px 20px;
  border: 1px dashed hsl(var(--border)); border-radius: var(--radius);
}
.vazio-grande { padding: 70px 20px; }
.vazio-grande h1 { color: hsl(var(--foreground)); }
.vazio-grande p { margin: 0 0 18px; }

/* ── login ───────────────────────────────────────────── */
.login { max-width: 390px; margin: 12vh auto; padding: 0 20px; }
.card-login { padding: 28px; gap: 18px; display: flex; flex-direction: column; }
.login-marca { display: flex; align-items: center; gap: 12px; }
.login-marca img { border-radius: 9px; display: block; }
.login h1 { font-size: 19px; margin: 0; }
.sub-login { font-size: 13px; }
.form-login { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 900px) {
  .colunas { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Tabela não cabe em tela de telefone: cada linha vira um bloco, com o
     nome da coluna antes do valor. */
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border-bottom: 1px solid hsl(var(--border)); padding: 6px 0; }
  .tabela tr:last-child { border-bottom: 0; }
  .tabela td { border-bottom: 0; padding: 4px 12px; }
  .tabela td::before {
    content: attr(data-rotulo); display: block; font-size: 10.5px; letter-spacing: .03em;
    text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 2px;
  }
  .tabela .envio { flex-wrap: wrap; }
  .col-envio { min-width: 0; }
}
@media (max-width: 560px) {
  main { padding: 20px 16px 50px; }
  .grade, .grade-elenco { grid-template-columns: 1fr; }
  .cabeca { flex-wrap: wrap; }
}

/* Entrega na tela do roteiro. Separada por um fio e com respiro em cima: é a
   única ação da página, e ficar colada no conteúdo faria parecer parte dele. */
.entrega { margin-top: 42px; padding-top: 28px; border-top: 1px solid hsl(var(--border)); }
.entrega h2 { margin: 0 0 6px; }
.entrega-nota { margin: 0 0 16px; color: hsl(var(--muted-foreground)); font-size: 14px; line-height: 1.6; }
.entrega .envio { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .entrega .envio { flex-direction: column; align-items: stretch; } }

/* Versão e requisição ficam atrás de <details>: são ações raras, e abertas por
   padrão empurrariam o conteúdo que a pessoa veio ler para fora da tela. */
.versao, .requisicao { margin-top: 36px; padding-top: 26px; border-top: 1px solid hsl(var(--border)); }
.versao h2, .requisicao h2 { margin: 0 0 6px; }
.versao summary, .requisicao summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.form-versao { display: grid; gap: 14px; margin-top: 14px; max-width: 720px; }
.form-versao label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.form-versao label small { font-weight: 400; color: hsl(var(--muted-foreground)); }
.form-versao input[type=text], .form-versao textarea, .form-versao select,
.form-versao input[type=file] {
    width: 100%; padding: 10px 12px; font: inherit; font-weight: 400;
    /* Explícito de propósito: `font: inherit` NÃO traz cor, e deixar a cor do
       texto por conta do navegador é o que produziu branco no branco. */
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card));
}
.form-versao textarea { resize: vertical; line-height: 1.6; }
.form-versao label.check { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.form-versao .btn { justify-self: start; }
/* "Descreva esse personagem": só com a opção marcada. Sem :has() fica à vista. */
@supports selector(:has(*)) {
    .form-versao:not(:has(option[value="outro"]:checked)) .campo-outro { display: none; }
}

/* O veredito dos pedidos, na mesma tela de quem pediu: aprovado vira personagem
   na grade acima, recusado traz o motivo — que é o que evita o mesmo pedido
   voltar igual na semana seguinte. */
.pedidos-titulo { margin: 28px 0 10px; font-size: 15px; }
.pedidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 720px; }
.pedido {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: 10px;
    background: hsl(var(--card));
}
.pedido-nome { font-weight: 600; font-size: 14px; }
.pedido-motivo {
    flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.6;
    color: hsl(var(--muted-foreground));
}

/* A grade de vídeos de referência. Card mais largo que o de personagem porque
   o conteúdo é 9:16 tocando dentro dele — abaixo de ~220px o controle do
   player come a imagem. */
.grade-refs { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ref-video {
    width: 100%; aspect-ratio: 9/16; display: block; background: #15130f;
    border-radius: 12px 12px 0 0; object-fit: cover;
}
.grade-refs .card-corpo .meta { margin: 6px 0 0; font-size: 13px; }
.grade-refs code {
    font-size: 12px; padding: 1px 5px; border-radius: 5px;
    background: var(--muted, #f1eee8);
}

/* Seletor de tema no topo. Três botões de um form: sem JavaScript, porque
   `script-src` herda 'none' e é isso que faz texto do DaVinci que escape do
   e() virar texto em vez de script. */
.tema { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px;
        background: hsl(var(--muted)); }
.tema-op {
    border: 0; cursor: pointer; font: inherit; font-size: 12px;
    padding: 4px 9px; border-radius: 7px; background: transparent;
    color: hsl(var(--muted-foreground));
}
.tema-op:hover { color: hsl(var(--foreground)); }
.tema-op.on {
    background: hsl(var(--card)); color: hsl(var(--foreground));
    box-shadow: var(--sombra); font-weight: 600;
}

/* Vídeo de referência: card estreito porque a peça é 9:16 — num card largo a
   coluna vira uma tira de vídeo com dois campos de nada dos lados. */
.grade-refs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ref-video {
    width: 100%; aspect-ratio: 9/16; display: block;
    background: hsl(var(--muted)); border-radius: 12px 12px 0 0; object-fit: cover;
}
.grade-refs .card-corpo { padding: 10px 12px; }
.grade-refs .card-corpo h3 { font-size: 14px; margin: 0 0 4px; }

/* Paginação. Server-side, pelo mesmo motivo do tema. */
.paginas { display: flex; gap: 6px; align-items: center; justify-content: center;
           margin: 26px 0 8px; font-size: 14px; }
.paginas a, .paginas span {
    padding: 6px 11px; border-radius: 8px; border: 1px solid hsl(var(--border));
    text-decoration: none; color: hsl(var(--foreground));
}
.paginas .on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
               border-color: transparent; font-weight: 600; }
.paginas .inerte { opacity: .45; }

/* A tela "Como usar". Uma coluna de passos, com medida de leitura curta — é
   texto para ler uma vez e voltar quando esquecer, não parede de manual. */
/* O tutorial em destaque, no topo do "Como usar". Mais largo que o guia de
   propósito: é a primeira coisa que a agência vê depois de entrar, e vídeo de
   interface pequeno demais não se lê. 16:9 fixo reserva o espaço antes de o
   vídeo carregar — com `preload="none"`, sem isso a caixa nasceria com altura
   zero e o guia pularia para cima e para baixo. */
.tutorial {
    max-width: 960px; margin: 0 0 34px; padding: 18px;
    border: 1px solid hsl(var(--border)); border-radius: 16px;
    background: hsl(var(--muted) / .45);
}
.tutorial-cabeca { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.tutorial-cabeca h2 { margin: 0; font-size: 19px; }
.tutorial-dur { font-size: 13px; color: hsl(var(--muted-foreground)); }
.tutorial-video {
    display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px;
    background: #0a0d14; box-shadow: 0 10px 34px rgb(0 0 0 / .28);
}
.tutorial-nota { margin: 12px 2px 0; font-size: 13.5px; color: hsl(var(--muted-foreground)); }
@media (max-width: 720px) { .tutorial { padding: 12px; margin-bottom: 26px; } }

.guia { display: grid; gap: 20px; max-width: 760px; }
.passo { padding: 18px 20px; border: 1px solid hsl(var(--border)); border-radius: 14px;
         background: hsl(var(--card)); box-shadow: var(--sombra); }
.passo h2 { margin: 0 0 8px; font-size: 16px; }
.passo h2 a { text-decoration: none; }
.passo h2 a:hover { text-decoration: underline; }
.passo p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; }
.passo p:last-child { margin-bottom: 0; }
.passo .nota { color: hsl(var(--muted-foreground)); font-size: 13px; }
.guia-fim { max-width: 760px; margin-top: 26px; padding-top: 20px;
            border-top: 1px solid hsl(var(--border)); }
.guia-fim h2 { font-size: 15px; margin: 0 0 10px; }
.guia-fim p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; }

/* Capa do vídeo de referência. A grade é só imagem — o player mora na tela da
   peça, e é lá que o arquivo desce. */
.ref-capa { position: relative; display: block; }
.ref-capa img {
    /* 4:5 e não 9:16: a peça É 9:16, mas o CARD não precisa ser. Em coluna
       estreita o quadro inteiro vira uma torre de ~600px e cabem duas fileiras
       na tela — a grade deixa de ser folha de contato. O corte central segura o
       rosto, que é onde o olho vai primeiro; o enquadramento real está a um
       clique, na tela da peça. */
    width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 30%;
    display: block; background: hsl(var(--muted)); border-radius: 12px 12px 0 0;
}
.ref-play {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 26px; color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / .6);
    opacity: .85; transition: opacity .15s;
}
.card-link:hover .ref-play { opacity: 1; }
/* O palco da peça: 9:16 numa altura que caiba na tela sem rolar. */
.ref-palco { display: grid; place-items: center; margin: 14px 0 10px; }
.ref-palco video {
    max-height: 72vh; max-width: 100%; aspect-ratio: 9/16;
    border-radius: 14px; background: #000;
}

/* A dica de que o card abre. Discreta: ela repete em cada peça da grade, então
   não pode competir com o título. */
.card-abrir {
    margin-top: auto; padding-top: 2px; font-size: 12.5px;
    color: hsl(var(--muted-foreground)); transition: color .15s;
}
.card-link:hover .card-abrir { color: hsl(var(--primary)); }

/* O botão enquanto o vídeo sobe. Sem isto, 38 MB de upload é um clique sem
   resposta — e a pessoa clica de novo, mandando o arquivo duas vezes. */
.btn-carregando { opacity: .75; cursor: progress; }
.btn-carregando::before {
    content: ""; display: inline-block; width: 12px; height: 12px;
    margin-right: 8px; vertical-align: -1px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: girando .7s linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-carregando::before { animation: none; } }

/* Lightbox do vídeo entregue. `:target` em vez de JavaScript: o link é uma
   âncora, o CSS mostra a camada, e fechar é voltar para `#`. Funciona com o
   botão voltar do navegador, que é mais do que a maioria dos lightbox faz. */
.luz { display: none; }
.luz:target {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 50;
    padding: 24px;
}
.luz-fundo { position: absolute; inset: 0; background: rgb(0 0 0 / .82); }
.luz-caixa { position: relative; display: grid; gap: 10px; place-items: center; }
.luz-caixa video {
    max-height: 78vh; max-width: min(92vw, 440px); aspect-ratio: 9/16;
    border-radius: 14px; background: #000;
}
/* A mesma camada, para FOTO de produto. O vídeo entregue é 9:16 e tem
   proporção fixa; foto de catálogo vem em tudo quanto é formato (há tira de
   1920x25000 no acervo), então aqui o limite é de CAIXA e o `object-fit`
   resolve — sem aspect-ratio, que esticaria umas e cortaria outras. */
.luz-foto .luz-caixa { max-width: min(92vw, 720px); }
.luz-foto img {
    max-height: 74vh; max-width: 100%; width: auto; height: auto;
    object-fit: contain; border-radius: 14px; background: #15130f; display: block;
}
.luz-sku {
    font-size: 12px; padding: 1px 6px; border-radius: 5px;
    background: rgb(255 255 255 / .16); color: #fff;
}
/* O botão dentro da camada escura: o `.btn` normal some no fundo preto. */
.btn-luz { text-decoration: none; }
/* "Vídeo de <produto>" no topo do publicar: de onde a pessoa veio. */
.de-produto {
    margin: 0 0 14px; padding: 9px 12px; border-radius: 10px;
    background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
    font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.de-produto code {
    font-size: 12px; padding: 1px 6px; border-radius: 5px;
    background: hsl(var(--background)); color: hsl(var(--muted-foreground));
}
.de-produto a { margin-left: auto; font-size: 12.5px; }

.luz-pe { margin: 0; font-size: 13px; color: #e8e4dc; text-align: center; }
.luz-pe a { color: #fff; }
.arquivo-nome { text-decoration: none; }
.arquivo-nome:hover { text-decoration: underline; }

/* ── A abertura, depois do login ─────────────────────────────────────────
   Tudo em CSS: o `script-src` libera um hash e mais nada, e enfeite não vale
   gastar essa porta. A cortina some com `visibility`, não só `opacity` — sem
   isso ela ficaria invisível por cima da página engolindo os cliques. */
.abertura {
    position: fixed; inset: 0; z-index: 100; display: grid;
    place-items: center; align-content: center; gap: 18px;
    background: hsl(var(--background));
    animation: ab-cortina 1.9s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes ab-cortina {
    0%, 62%  { opacity: 1; visibility: visible; }
    100%     { opacity: 0; visibility: hidden; transform: scale(1.04); }
}

.abertura-marca { overflow: visible; }
/* O D entra primeiro, de baixo, e assenta. */
.ab-d {
    transform-origin: 50% 50%;
    animation: ab-d-entra .55s cubic-bezier(.34, 1.3, .64, 1) both;
}
@keyframes ab-d-entra {
    from { opacity: 0; transform: translateY(10px) scale(.86); }
    to   { opacity: 1; transform: none; }
}
/* O V se desenha por cima — o traço tem ~96 de comprimento. */
.ab-v {
    stroke-dasharray: 100; stroke-dashoffset: 100;
    animation: ab-v-traco .6s cubic-bezier(.65, 0, .35, 1) .38s forwards;
}
@keyframes ab-v-traco { to { stroke-dashoffset: 0; } }

.abertura-nome {
    margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em;
    color: hsl(var(--foreground));
    animation: ab-nome .5s ease .85s both;
}
.abertura-nome span { font-weight: 400; color: hsl(var(--muted-foreground)); }
@keyframes ab-nome {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Quem pediu menos movimento vê a marca parada e a cortina sair, e nada mais. */
@media (prefers-reduced-motion: reduce) {
    .ab-d, .ab-v, .abertura-nome { animation: none; }
    .ab-v { stroke-dashoffset: 0; }
    .abertura { animation: ab-cortina-curta .6s ease .3s forwards; }
    @keyframes ab-cortina-curta {
        0%   { opacity: 1; visibility: visible; }
        100% { opacity: 0; visibility: hidden; }
    }
}

/* Catálogo. O card do produto é texto — a foto mora na ficha, e carregar uma
   capa por linha na grade seria uma ida ao MEGA por card. */
.grade-produtos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.skus { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; align-items: center; }
.skus code {
    font-size: 11.5px; padding: 1px 5px; border-radius: 5px;
    background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
.skus .mais { font-size: 11.5px; color: hsl(var(--muted-foreground)); }

/* Os códigos na FICHA do produto. Lista inteira e com quebra — `ABS 12` tem 53
   e `ABS 12+18` tem 52, e cortar aqui repetiria o buraco que a grade já tinha.

   A regra mora AQUI, depois de `.skus`, e não lá em cima junto da lightbox:
   `.skus` e `.skus-ficha` têm a mesma especificidade (0-1-0), então quem vem
   depois ganha. Na primeira versão esta regra estava antes, e o `margin: 0` do
   `.skus` comia o espaçamento inteiro — o bloco de 8 linhas de código encostava
   na primeira fileira de fotos. Mover é o conserto; subir para `.skus.skus-ficha`
   só esconderia a armadilha para o próximo. */
.skus-ficha { margin: 2px 0 26px; max-width: 70ch; row-gap: 5px; }

/* A grade de fotos da linha. Quadrado e recortado: as fotos do fornecedor vêm
   em proporções diferentes, e sem isso a grade vira escada. */
.grade-fotos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.foto { display: block; border-radius: 10px; overflow: hidden; background: hsl(var(--muted)); }
.foto img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.foto:hover { outline: 2px solid hsl(var(--primary)); outline-offset: 1px; }

/* ── Enquanto a foto não chega ────────────────────────────────────────────
   A primeira abertura de cada produto busca a imagem no MEGA, e isso leva
   segundos. Sem sinal nenhum o card fica um buraco e a tela parece travada.
   O pulso vive no CONTÊINER e a <img> entra por cima quando carrega — sem
   JavaScript, e sem depender de evento de load. */
.capa-produto, .foto {
    position: relative; display: block; overflow: hidden;
    border-radius: 12px 12px 0 0; background: hsl(var(--muted));
}
.foto { border-radius: 10px; }
.carregando::before {
    content: ""; position: absolute; inset: 0;
    /* A parada do meio NÃO pode ser --border: no tema escuro --muted e
       --border valem os dois `217 33% 17%` (linhas 32 e 34, e de novo na 48),
       distância RGB ZERO — o pulso existia no HTML e desenhava NADA. Conferido
       no CSS que está no ar. Mexer é aqui e não no token: --border é borda de
       verdade no site inteiro, inclusive na linha 249 desta mesma folha. */
    background: linear-gradient(100deg,
        hsl(var(--muted)) 30%,
        hsl(var(--muted-foreground) / .14) 50%,
        hsl(var(--muted)) 70%);
    background-size: 300% 100%;
    animation: pulsando 1.4s ease-in-out infinite;
}
@keyframes pulsando { to { background-position: -150% 0; } }
/* A imagem cobre o pulso. `position: relative` a põe acima do ::before. */
.capa-produto img, .foto img {
    position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
}
.capa-produto img { aspect-ratio: 4/3; }
.capa-sem {
    display: grid; place-items: center; aspect-ratio: 4/3;
    font-size: 12.5px; color: hsl(var(--muted-foreground));
}
@media (prefers-reduced-motion: reduce) { .carregando::before { animation: none; } }

/* ── Troca de tela: a nossa marca, rápida, e o conteúdo em cascata ────────
   Três números mandam em tudo — é aqui que se deixa mais rápido ou mais lento:
     --troca  quanto dura a marca (a abertura grande do login dura 1,9s; esta
              é a versão de passagem, porque as telas carregam em ~70ms e uma
              animação longa a cada clique deixaria o portal mais lento)
     --entra  quanto cada item leva para aparecer
     --passo  o atraso entre um item e o próximo, na cascata

   SEGURANÇA, porque isto roda em toda tela para as duas agências:
   - a cortina NASCE ESCONDIDA e a animação só a mostra de passagem. A abertura
     do login faz o contrário (nasce visível e depende da animação para sumir);
     se a animação não rodar, ela fica por cima. Esta não: sem animação, a
     página aparece normal.
   - `pointer-events: none` do início ao fim: a cortina nunca engole clique.
   - o conteúdo só anima OPACIDADE nos blocos de página e nas linhas de
     tabela. `transform` num ancestral muda o referencial de `position: fixed`,
     e as lightboxes (a do vídeo entregue mora dentro da tabela) são fixed.
     Deslocamento só nos cards das grades, onde não há nada fixed dentro.
   - `backwards`, e não `both`/`forwards`: terminada a animação, o elemento
     volta a ser exatamente o que era, sem estilo pendurado. */
:root { --troca: 650ms; --entra: 170ms; --passo: 26ms; }
body.entra { --base: 0ms; }
body.troca-sim { --base: calc(var(--troca) * .6); }

.troca {
    position: fixed; inset: 0; z-index: 9;           /* o `.topo` é 10: o menu fica por cima */
    display: grid; place-items: center;
    background: hsl(var(--background));
    pointer-events: none;
    opacity: 0; visibility: hidden;                  /* estado de repouso: invisível */
    animation: troca-cortina var(--troca) cubic-bezier(.4, 0, .2, 1);
}
/* A ordem dentro dos --troca: o D entra (0-40%), o V se desenha (15-53%), o
   logo inteiro SEGURA um instante (53-70%, ~110ms a 650ms — a mesma
   proporção da abertura grande do login), e só então a cortina sai (70-100%). Na
   primeira versão (420ms) a cortina começava a sumir com o V ainda pela
   metade — rápido demais para notar, mas mais devagar viraria um logo
   incompleto saindo de cena. */
@keyframes troca-cortina {
    0%, 70% { opacity: 1; visibility: visible; }
    100%    { opacity: 0; visibility: visible; }
}
.troca-marca { overflow: visible; margin-top: -8vh; }
.tr-d {
    transform-origin: 50% 50%;
    animation: troca-d calc(var(--troca) * .4) cubic-bezier(.34, 1.3, .64, 1) backwards;
}
@keyframes troca-d {
    from { opacity: 0; transform: translateY(6px) scale(.86); }
}
.tr-v {
    stroke-dasharray: 100; stroke-dashoffset: 0;
    animation: troca-v calc(var(--troca) * .38) cubic-bezier(.65, 0, .35, 1) calc(var(--troca) * .15) backwards;
}
@keyframes troca-v { from { stroke-dashoffset: 100; } }

/* O conteúdo: cada bloco da página, e dentro das grades cada card, um atrás
   do outro. A partir do 12º todos entram juntos — senão a última foto de uma
   grade de 24 esperaria meio segundo, e "rápido" é o pedido. */
body.entra main > * {
    animation: entra-fade var(--entra) ease-out backwards;
    animation-delay: var(--base);
}
body.entra .grade > *,
body.entra .tabela tbody > tr {
    animation: entra-fade var(--entra) ease-out backwards;
    animation-delay: calc(var(--base) + var(--i, 12) * var(--passo));
}
body.entra .grade > * { animation-name: entra-sobe; }
.grade > :nth-child(1),  .tabela tbody > tr:nth-child(1)  { --i: 0; }
.grade > :nth-child(2),  .tabela tbody > tr:nth-child(2)  { --i: 1; }
.grade > :nth-child(3),  .tabela tbody > tr:nth-child(3)  { --i: 2; }
.grade > :nth-child(4),  .tabela tbody > tr:nth-child(4)  { --i: 3; }
.grade > :nth-child(5),  .tabela tbody > tr:nth-child(5)  { --i: 4; }
.grade > :nth-child(6),  .tabela tbody > tr:nth-child(6)  { --i: 5; }
.grade > :nth-child(7),  .tabela tbody > tr:nth-child(7)  { --i: 6; }
.grade > :nth-child(8),  .tabela tbody > tr:nth-child(8)  { --i: 7; }
.grade > :nth-child(9),  .tabela tbody > tr:nth-child(9)  { --i: 8; }
.grade > :nth-child(10), .tabela tbody > tr:nth-child(10) { --i: 9; }
.grade > :nth-child(11), .tabela tbody > tr:nth-child(11) { --i: 10; }
@keyframes entra-fade { from { opacity: 0; } }
@keyframes entra-sobe { from { opacity: 0; transform: translateY(8px); } }

/* Entre uma tela e outra, o navegador faz a ponte sozinho (Chrome, Edge e
   Safari recentes; nos outros a troca só é seca, e o resto funciona igual).
   O menu tem nome próprio para ficar PARADO — ele é o mesmo nas duas telas, e
   esmaecer ele junto com o conteúdo faria o site inteiro piscar. */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }

/* Quem pediu menos movimento no sistema não vê nada disto. */
@media (prefers-reduced-motion: reduce) {
    .troca { display: none; }
    body.entra main > *, body.entra .grade > *, body.entra .tabela tbody > tr { animation: none; }
    @view-transition { navigation: none; }
}

/* ── produtos cadastrados pela agência e busca (29/09/2026) ─────────── */
/* O botão de adicionar e a contagem dividem a direita do cabeçalho. */
.cabeca-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cabeca-acoes .contagem { margin-left: 0; }
.busca { display: flex; gap: 8px; align-items: center; margin: -6px 0 12px; max-width: 560px; }
.busca input[type=search] {
    flex: 1 1 auto; min-width: 0; padding: 8px 12px; border-radius: var(--radius);
    border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: inherit; font: inherit;
    font-size: 13.5px;
}
.busca input[type=search]:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.busca-limpar { font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.vazio .btn { margin-top: 6px; }
.vazio p { margin: 0 0 8px; }
/* "adicionado por": discreto, mas a casa precisa saber de onde veio. */
.tag-portal {
    align-self: flex-start; font-size: 11px; padding: 1px 7px; border-radius: 999px;
    background: hsl(var(--warning) / .14); color: hsl(var(--foreground));
}
.origem-portal {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; margin: -12px 0 22px;
    font-size: 13px; color: hsl(var(--muted-foreground));
}
/* Confirmação sem JavaScript: o <details> abre o botão de verdade. */
.confirmar summary { cursor: pointer; font-size: 12.5px; color: hsl(var(--destructive)); }
.confirmar[open] summary { margin-bottom: 8px; }
.confirmar form { display: grid; gap: 8px; justify-items: start; }
.confirmar p { margin: 0; font-size: 12.5px; }
.btn-perigo { background: hsl(var(--destructive)); color: #fff; }
/* Dentro da lightbox o fundo é escuro sempre, nos dois temas. */
.confirmar-luz { text-align: center; }
.confirmar-luz summary { color: #f5b3b3; }
.confirmar-luz form { justify-items: center; }
.form-fotos { margin-top: 26px; }
a.capa-sem { text-decoration: none; }
@media (max-width: 640px) {
    .cabeca { flex-wrap: wrap; }
    .cabeca-acoes { margin-left: 0; }
    .busca { max-width: none; }
}

/* ── Ideias com o check, relatório, campos de IA e Conector do Claude (13/10/2026) ── */

/* O card de ideia já feita. A borda e um friso de cima na cor do estado: dá
   para varrer a grade e ver o que falta sem ler selo por selo. */
.card-feita-ok     { border-color: hsl(var(--success) / .55);     box-shadow: inset 0 3px 0 hsl(var(--success)), var(--sombra); }
.card-feita-espera { border-color: hsl(var(--warning) / .55);     box-shadow: inset 0 3px 0 hsl(var(--warning)), var(--sombra); }
.card-feita-nao    { border-color: hsl(var(--destructive) / .45); box-shadow: inset 0 3px 0 hsl(var(--destructive)), var(--sombra); }
.selos-entrega { gap: 5px; }
/* "Publicada" é outra notícia (já está no ar), por isso outra cor. */
.pill-pub { border-color: hsl(var(--primary) / .3); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }

/* Filtros da aba Ideias: um GET comum, sem JavaScript. */
.filtros-ideias { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: -6px 0 12px; }
.filtros-ideias label { display: grid; gap: 4px; margin: 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.filtros-ideias select, .filtros-ideias input[type=search] {
    padding: 7px 10px; border-radius: var(--radius); border: 1px solid hsl(var(--border));
    background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-size: 13.5px;
    min-width: 0;
}
.filtros-ideias input[type=search] { width: min(300px, 70vw); }
.filtros-ideias .busca-limpar { align-self: center; }
.nota-filtro { margin: -8px 0 14px; font-size: 12.5px; color: hsl(var(--muted-foreground)); max-width: 80ch; }

/* O aviso "vocês já enviaram" no topo da ficha da ideia. */
.aviso-entrega a { margin-left: 4px; font-size: 13px; }
.aviso-entrega-ok     { border-color: hsl(var(--success) / .4);     background: hsl(var(--success) / .08); }
.aviso-entrega-espera { border-color: hsl(var(--warning) / .45);    background: hsl(var(--warning) / .08); }
.aviso-entrega-nao    { border-color: hsl(var(--destructive) / .4); background: hsl(var(--destructive) / .07); }

/* Campos opcionais de IA (views/campos-ia.php), nos três formulários de envio. */
.campos-ia {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
    margin: 0; padding: 10px 12px 12px; border: 1px dashed hsl(var(--border)); border-radius: 10px;
    flex-basis: 100%; min-width: 0;
}
.campos-ia legend { padding: 0 4px; font-size: 12.5px; font-weight: 600; }
.campos-ia legend small { font-weight: 400; color: hsl(var(--muted-foreground)); }
.campos-ia label { display: grid; gap: 4px; margin: 0; font-size: 12.5px; font-weight: 500; }
.campos-ia select, .campos-ia input[type=text], .campos-ia input[type=number] {
    padding: 7px 10px; border-radius: 8px; border: 1px solid hsl(var(--border));
    background: hsl(var(--card)); color: hsl(var(--foreground)); font: inherit; font-weight: 400;
    font-size: 13px; width: 100%; min-width: 0;
}
.campos-ia input[type=number] { width: 120px; }
/* O formulário de Publicar põe `display: grid` e negrito 14px em todo label;
   aqui dentro vale o tamanho dos campos de IA. */
.form-versao .campos-ia label { font-size: 12.5px; font-weight: 500; }
@supports selector(:has(*)) {
    .campos-ia:not(:has(option[value="outra"]:checked)) .campo-ia-outra { display: none; }
}
/* Na tabela de Entregas os campos ficam dobrados. A linha do envio passa a
   quebrar para a dobra ter a largura inteira da célula. */
.tabela .envio { flex-wrap: wrap; }
.ia-dobra { flex-basis: 100%; font-size: 12px; }
.ia-dobra summary { cursor: pointer; color: hsl(var(--muted-foreground)); }
.ia-dobra[open] summary { margin-bottom: 6px; }
.ia-dobra .campos-ia { padding: 8px; }
.ia-linha { display: block; margin-top: 3px; font-size: 11.5px; color: hsl(var(--muted-foreground)); }

/* ── Relatório ── */
.relatorio + .relatorio { margin-top: 38px; padding-top: 24px; border-top: 1px solid hsl(var(--border)); }
.relatorio-equipe { font-size: 15px; letter-spacing: -.01em; text-transform: none; color: hsl(var(--foreground)); margin-bottom: 12px; }
.numeros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 10px; }
.numero {
    display: grid; gap: 2px; padding: 14px 16px; border: 1px solid hsl(var(--border));
    border-radius: var(--radius); background: hsl(var(--card)); box-shadow: var(--sombra);
}
.numero span { font-size: 12px; color: hsl(var(--muted-foreground)); }
.numero b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero small { font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.relatorio-colunas { display: grid; gap: 20px 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 18px 0 20px; }
.relatorio-sub { margin: 0 0 10px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.faixas, .por-ia { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.faixas li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; gap: 10px; align-items: center; }
.faixa-barra { width: 100%; height: 12px; display: block; }
.faixa-fundo { fill: hsl(var(--muted)); }
.faixa-valor { fill: hsl(var(--primary)); }
.faixa-n, .por-ia b { text-align: right; font-variant-numeric: tabular-nums; }
.por-ia li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid hsl(var(--border)); }
.por-ia li:last-child { border-bottom: 0; }
.ia-top { margin: 0 0 10px; font-size: 13.5px; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.relatorio-ideia { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); }

/* ── Conector do Claude ── */
/* O link mora no bloco da conta (views/layout.php). Com o nome escrito, a
   linha do topo pede ~1500px (medido: marca 165 + abas 841 + conta 407); abaixo
   disso sobra só o ícone, com o nome no `title` e no `aria-label` — sem isso o
   topo quebrava em duas linhas já em 1440px. */
.aba-conector { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 13px; }
.aba-conector svg { flex-shrink: 0; }
@media (max-width: 1560px) { .aba-conector span { display: none; } }
@media (max-width: 900px) { .aba-conector { background: transparent; } .aba-conector.on { background: hsl(var(--primary)); } }
.conector-bloco { margin-top: 30px; max-width: 900px; }
.conector-bloco h2 { margin-bottom: 8px; }
.form-conector { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.form-conector label { display: grid; gap: 5px; margin: 0; font-size: 13px; }
.form-conector input[type=text] {
    width: min(360px, 80vw); padding: 9px 12px; border-radius: var(--radius); border: 1px solid hsl(var(--border));
    background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit;
}
.token-novo {
    max-width: 900px; padding: 18px 20px; border-radius: 14px;
    border: 1px solid hsl(var(--success) / .45); background: hsl(var(--success) / .07);
}
.token-novo h2 { margin: 0 0 6px; font-size: 15px; text-transform: none; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.token-novo h3 { margin: 16px 0 6px; font-size: 13px; }
.token-novo p { margin: 0 0 6px; font-size: 13.5px; }
.comando { display: flex; gap: 8px; align-items: flex-start; }
.comando code, .comando-bloco {
    flex: 1 1 auto; min-width: 0; display: block; margin: 0; padding: 9px 11px; border-radius: 8px;
    background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
    font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere;
    white-space: pre-wrap; user-select: all;
}
.guia-conector .passo { margin-bottom: 14px; }
.guia-conector .passo h3 { margin: 0 0 8px; font-size: 15px; }
.lista-ferramentas { margin: 0 0 8px; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }

/* ── Prioridade (28/10/2026): título começando com "PRIORIDADE" ──
   Amarelo próprio, diferente do âmbar de "em análise", para a prioridade não
   parecer um vídeo esperando aprovação. Fica no topo da lista enquanto falta
   fazer (ideias_prioridade_no_topo). */
:root { --prioridade: 48 96% 47%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --prioridade: 48 96% 56%; } }
:root[data-theme="dark"] { --prioridade: 48 96% 56%; }
.card-prioridade {
  border-color: hsl(var(--prioridade) / .75);
  background: linear-gradient(hsl(var(--prioridade) / .10), hsl(var(--prioridade) / .03)), hsl(var(--card));
  box-shadow: inset 0 4px 0 hsl(var(--prioridade)), var(--sombra);
}
.pill-prioridade { border-color: hsl(var(--prioridade)); background: hsl(var(--prioridade)); color: hsl(30 60% 12%); font-weight: 600; }

/* ── Ideias — Histórias x Produtos (03/11/2026) ── */
.abas-tipo { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.aba-tipo {
  display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline;
  padding: 10px 16px; border: 1px solid hsl(var(--border)); border-radius: 12px;
  background: hsl(var(--card)); color: hsl(var(--foreground)); text-decoration: none; min-width: 190px;
}
.aba-tipo small { grid-column: 1 / -1; color: hsl(var(--muted-foreground)); font-size: 12px; }
.aba-tipo .n { color: hsl(var(--muted-foreground)); font-size: 13px; }
.aba-tipo.ativa { border-color: hsl(var(--primary)); box-shadow: inset 0 0 0 1px hsl(var(--primary)); }
.aba-tipo.ativa .n { color: hsl(var(--primary)); }