/* ---------------------------------------------------------------------------
   TEMA POR FRENTE (14/09/2026)

   Camada visual UNICA das telas do approval. A decisao de QUAL tema vale nao
   mora aqui: ela vem do servidor, em GET /api/marca (server.cjs, mapa MARCAS).
   O tema.js so escreve data-tema="escuro" no <html>, e este arquivo repinta.

   Como funciona: as telas ja desenham tudo com as mesmas variaveis
   (--glass, --glass-strong, --glass-border, --hairline, --field, --text...).
   Redefinindo essas variaveis debaixo de [data-tema="escuro"], a tela inteira
   vira preta sem tocar em nenhuma regra de layout. As poucas regras abaixo do
   bloco de variaveis existem porque alguns pontos das telas tem branco ou
   preto cravado em vez de variavel, e sem elas o texto sumiria no fundo.

   O tema CLARO e o padrao e NAO e tocado por este arquivo: sem o atributo
   data-tema, nada aqui casa, e as frentes da empresa continuam pixel a pixel
   como eram antes. Essa e a garantia de nao regressao.
--------------------------------------------------------------------------- */

/* PALETA: vem da identidade visual registrada da marca, em
   Empresas/influenciadores/amaro/identidade-visual.md (07/09/2026). Preto, cinza
   escuro, branco quebrado e vermelho como ruptura. Inventar cor aqui fica fora:
   mudanca de paleta se faz naquele arquivo primeiro. */
html[data-tema="escuro"] {
  --accent: #f5f5f5;          /* branco quebrado da marca */
  --accent-hover: #ffffff;
  --text: #f5f5f5;
  --text-muted: #9a9a9a;

  /* Verde e vermelho existem so como ESTADO (aprovado/reprovado), e nunca como cor
     de marca. O vermelho puro #FF0000 e o da ruptura, reservado pro destaque que
     corta, entao o de reprova usa um tom vizinho pra evitar competir com ele. */
  --green: #4ade80;
  --green-hover: #35c96b;
  --red: #ff3b3b;
  --red-hover: #e02b2b;
  --ruptura: #ff0000;         /* o vermelho da marca: corta, marca, nega */

  /* superficies: degraus de preto, ancorados no #000 e no #1A1A1A da marca */
  --glass: #101010;
  --glass-strong: #1a1a1a;    /* cinza escuro da marca */
  --glass-border: #2a2a2a;
  --hairline: #232323;
  --field: #141414;

  --shadow: 0 8px 30px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-soft: 0 4px 18px rgba(0,0,0,0.4);
}

/* Fundo: o claro usa #F5F5F5 com tres halos azuis. No escuro vira preto chapado
   com halos brancos quase imperceptiveis, so pra a pagina nao ficar morta. */
html[data-tema="escuro"] body {
  background: #000000;
  background-image:
    radial-gradient(1100px 600px at 12% -8%, rgba(255,255,255,0.045), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(255,255,255,0.028), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
}

/* Spinner: a borda base era rgba(0,0,0,0.1), invisivel sobre preto. */
html[data-tema="escuro"] .spinner { border-color: rgba(255,255,255,0.14); border-top-color: var(--accent); }

/* Pontos com branco translucido cravado no HTML (botao, campo, bloco de versao,
   opcao de refazer). No claro eram "quase branco sobre cinza"; aqui viram
   "quase preto sobre preto", mantendo a mesma hierarquia de profundidade. */
html[data-tema="escuro"] .btn-reject,
html[data-tema="escuro"] .btn-save,
html[data-tema="escuro"] .btn-cancel,
html[data-tema="escuro"] .redo-option,
html[data-tema="escuro"] #reject-panel,
html[data-tema="escuro"] .queue-item,
html[data-tema="escuro"] .queue-empty,
html[data-tema="escuro"] textarea,
html[data-tema="escuro"] input[type="text"] {
  background: var(--field);
  color: var(--text);
  border-color: var(--glass-border);
}
html[data-tema="escuro"] textarea::placeholder,
html[data-tema="escuro"] input::placeholder { color: #767676; }

html[data-tema="escuro"] .btn-reject { color: var(--red); }
html[data-tema="escuro"] .btn-save, html[data-tema="escuro"] .btn-cancel { color: var(--text-muted); }
html[data-tema="escuro"] .btn-reject:hover:not(:disabled) { background: rgba(255,107,107,0.16); }
html[data-tema="escuro"] .btn-cancel:hover { background: #262626; color: var(--text); }
html[data-tema="escuro"] .redo-option:hover { border-color: var(--accent); background: #232323; }

/* Botao de aprovar: verde continua sendo o sinal de aprovado, com texto preto
   por cima porque o verde do escuro e claro demais pra texto branco. */
html[data-tema="escuro"] .btn-approve { background: var(--green); color: #000000; }
html[data-tema="escuro"] .btn-approve:hover:not(:disabled) { background: var(--green-hover); }

/* Estado APROVADO e REPROVADO: continuam distinguiveis um do outro e do fundo. */
html[data-tema="escuro"] .status-badge {
  background: rgba(255,255,255,0.10); color: var(--text); border-color: rgba(255,255,255,0.22);
}
html[data-tema="escuro"] .status-badge.approved {
  background: rgba(61,220,132,0.16); color: var(--green); border-color: rgba(61,220,132,0.4);
}
html[data-tema="escuro"] .status-badge.rejected {
  background: rgba(255,107,107,0.16); color: var(--red); border-color: rgba(255,107,107,0.4);
}

/* Chip do agente e caminho do arquivo no cabecalho do card: no claro eram azul
   translucido e cinza; no preto, o azul original destoava do resto da tela. */
html[data-tema="escuro"] .meta .pill {
  background: rgba(255,255,255,0.10); color: var(--text); border: 1px solid rgba(255,255,255,0.18);
}
html[data-tema="escuro"] .meta code,
html[data-tema="escuro"] code { background: rgba(255,255,255,0.08); color: var(--text-muted); }

/* Realce de acento: no claro era azul translucido; no escuro, branco a 10%,
   senao sumiria (o acento virou branco). */
html[data-tema="escuro"] .btn-share { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--text); }
html[data-tema="escuro"] .btn-share:hover { background: rgba(255,255,255,0.16); }
html[data-tema="escuro"] .btn-share.copiado { background: rgba(61,220,132,0.18); color: var(--green); border-color: rgba(61,220,132,0.4); }

/* Botao cheio de acento (copiar todos, confirmar): acento virou branco, entao o
   texto por cima tem que ser preto pra continuar legivel. */
/* O botao "copiar todos" com acento cheio (branco puro) roubava a atencao do
   conteudo, que e o que a pessoa veio ler. Vira superficie elevada com borda
   clara: continua sendo o elemento mais forte da coluna, sem berrar. */
html[data-tema="escuro"] .copiar-todos {
  background: #262626; color: var(--text); border: 1px solid rgba(255,255,255,0.22);
}
html[data-tema="escuro"] .copiar-todos:hover { background: #333333; }

/* Titulo do card (SLIDE 1, SLIDE 2...): no claro era azul e se distinguia do
   corpo do prompt. Com o acento virando branco, titulo e corpo ficaram do mesmo
   tom e a hierarquia sumiu. Aqui o titulo fica no branco cheio e o corpo do
   prompt desce pra cinza (ver .prompt-text acima), o que devolve a separacao
   na ordem certa: o rotulo manda, o texto e o conteudo. */
html[data-tema="escuro"] .card__title { color: var(--text); }
html[data-tema="escuro"] .btn-copy { background: var(--glass-strong); color: var(--text); border-color: var(--glass-border); }
html[data-tema="escuro"] .btn-copy:hover { background: #2a2a2a; }
html[data-tema="escuro"] .btn-copy.copiado { background: var(--green); color: #000000; border-color: var(--green); }
html[data-tema="escuro"] .btn-reject-confirm { background: var(--red); color: #000000; }
html[data-tema="escuro"] .btn-reject-confirm:hover { background: var(--red-hover); }

/* Texto com cinza escuro cravado (corpo do prompt, tema do slot no calendario):
   ficaria ilegivel sobre preto. */
html[data-tema="escuro"] .prompt-text,
html[data-tema="escuro"] .slot__tema { color: #c8c8c8; }

/* Sobreposicao do modal: mais densa, pra separar do fundo que ja e preto. */
html[data-tema="escuro"] .confirm-modal { background: rgba(0,0,0,0.72); }
html[data-tema="escuro"] .btn-confirm-approve { background: var(--green); color: #000000; }
html[data-tema="escuro"] .btn-confirm-approve:hover { background: var(--green-hover); }

/* ---- CALENDARIO ---- */
html[data-tema="escuro"] td.celula.hoje { background: rgba(255,255,255,0.06); }
html[data-tema="escuro"] tr.linha-frente td { border-bottom-color: #3a3a3a; }
html[data-tema="escuro"] .nav button:hover,
html[data-tema="escuro"] .header .nav button:hover { background: #2a2a2a; }

/* Slot previsto (tracejado) e seu hover: no claro era branco translucido. */
html[data-tema="escuro"] .slot { border-color: rgba(255,255,255,0.26); background: #181818; }
html[data-tema="escuro"] .slot:hover { background: #242424; }

/* Estados do slot: aviso (laranja), erro (vermelho), progresso (roxo) e feito
   (verde) precisam continuar distinguiveis ENTRE SI sobre o preto, entao cada
   um ganha um tom mais claro que o original e uma borda mais forte. */
html[data-tema="escuro"] .slot.feito,
html[data-tema="escuro"] .slot.st-approved { border-color: var(--green); background: rgba(61,220,132,0.16); }
html[data-tema="escuro"] .slot.feito::after { color: var(--green); }
html[data-tema="escuro"] .slot.st-pending   { border-color: #767676; background: rgba(255,255,255,0.06); }
html[data-tema="escuro"] .slot.st-rejected  { border-color: var(--red); background: rgba(255,107,107,0.16); }
html[data-tema="escuro"] .slot.st-archived  { border-color: #767676; background: rgba(255,255,255,0.08); }
html[data-tema="escuro"] .slot.st-refazendo,
html[data-tema="escuro"] .slot.avulso       { border-color: var(--ruptura); background: rgba(255,0,0,0.10); }
html[data-tema="escuro"] .slot__avulso-tag  { color: var(--ruptura); background: rgba(255,0,0,0.12); }

/* Marcos da trilha copy/design/post: o "off" era cinza claro sobre branco. */
html[data-tema="escuro"] .marco { background: rgba(255,255,255,0.09); color: #9a9a9a; }
html[data-tema="escuro"] .marco.on-pending  { background: #767676; color: #000000; }
html[data-tema="escuro"] .marco.on-approved,
html[data-tema="escuro"] .marco.on-ok       { background: var(--green); color: #000000; }
html[data-tema="escuro"] .marco.on-rejected { background: var(--red); color: #000000; }
html[data-tema="escuro"] .marco.on-archived { background: #767676; color: #000000; }
html[data-tema="escuro"] .marco.on-prog     { background: var(--ruptura); color: #f5f5f5; }
html[data-tema="escuro"] .slot__abrir       { color: var(--accent); }

/* LOGO: nenhum tratamento, de proposito.
   O logo-heapp.png e azul (#0098FF) com fundo transparente, entao ele ja aparece
   limpo e legivel sobre o preto sem filtro nenhum. Uma primeira versao aplicava
   filter: invert(1) aqui e foi REMOVIDA depois de olhar o print: o invert virava
   o azul da marca em amarelo, ou seja, descaracterizava o logo. O dono disse que
   o logo CONTINUA sendo o da HEApp ate ele mandar o novo, e mudar a cor dele e
   justamente nao continuar sendo o da HEApp. */

/* Trivium Med (11/10/2026): acento dourado e texto escuro nos botoes, so nesta marca. */
html[data-tema="escuro"][data-marca="trivium"] { --accent: #c9a961; --accent-hover: #d8bc7c; }
html[data-tema="escuro"][data-marca="trivium"] button { color: #000; }