/* 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);
}
@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);
  }
}
:root[data-theme="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; }
.abas { display: flex; gap: 2px; }
.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)); }

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;
}
.card-link { transition: box-shadow .15s, border-color .15s; }
.card-link:hover { box-shadow: var(--sombra-alta); border-color: hsl(var(--primary) / .35); }
.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; }
.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) {
  .topo { padding: 12px 16px; gap: 12px; }
  .quem { width: 100%; margin-left: 0; }
  main { padding: 20px 16px 50px; }
  .grade, .grade-elenco { grid-template-columns: 1fr; }
  .cabeca { flex-wrap: wrap; }
}