/* Invest Webinar: tema escuro com dourado para o participante; painel claro para a equipe. */
:root {
  --fundo: #0e0e0f;
  --superficie: #18181a;
  --borda: #2b2b2e;
  --texto: #f2f1ee;
  --suave: #a7a49d;
  --dourado: #d4a845;
  --dourado-escuro: #b88d2c;
  --erro: #ff8a7a;
  --raio: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--dourado); }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0.2rem 0 0.8rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.8rem; }
code { word-break: break-all; }

.botao {
  display: inline-block;
  background: var(--dourado);
  color: #111;
  border: 0;
  border-radius: 8px;
  padding: 0.8rem 1.2rem;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--dourado-escuro); }
.botao:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #fff3; outline-offset: 2px; }
.botao.secundario { background: transparent; color: var(--dourado); border: 1px solid var(--dourado); }
.botao[disabled] { opacity: 0.5; cursor: not-allowed; }
[hidden] { display: none !important; }

/* Páginas de inscrição e avisos */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.5rem; margin: 2rem auto; }
.estreito { max-width: 560px; }
@media (max-width: 600px) { .cartao { margin: 0; border-radius: 0; border-inline: 0; min-height: 100vh; padding: 1.25rem 16px; } }
.selo { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--dourado); margin: 0; font-weight: 700; }
.descricao { color: var(--suave); }
.quando { font-size: 1.05rem; }
.erro { color: var(--erro); font-weight: 600; }
.formulario { display: grid; gap: 1rem; margin-top: 1rem; }
.formulario label { display: grid; gap: 0.35rem; font-weight: 600; }
.formulario input:not([type="checkbox"]) {
  font: inherit; color: var(--texto); background: #0b0b0c; border: 1px solid var(--borda);
  border-radius: 8px; padding: 0.75rem;
}
.formulario .consentimento { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; color: var(--suave); font-size: 0.92rem; }
.formulario .consentimento input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; flex: none; }
.opcional { font-weight: 400; color: var(--suave); }
.link-copia { background: #0b0b0c; border: 1px solid var(--borda); border-radius: 8px; padding: 0.6rem; font-size: 0.85rem; }

/* Sala */
.topo {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 16px; border-bottom: 1px solid var(--borda); background: var(--superficie);
}
.situacao { color: var(--dourado); font-size: 0.9rem; font-weight: 600; }
.sala { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; padding: 16px; max-width: 1400px; margin: 0 auto; }
.sala-replay { grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
@media (max-width: 900px) { .sala { grid-template-columns: minmax(0, 1fr); padding: 0 0 16px; gap: 12px; } }
.coluna-video { display: grid; gap: 12px; align-content: start; }
.palco { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--raio); overflow: hidden; }
@media (max-width: 900px) { .palco { border-radius: 0; } }
.palco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tela { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; background: radial-gradient(circle at center, #1d1a12, #000 70%); }
.tela-conteudo { display: grid; gap: 0.6rem; justify-items: center; }
.tela-conteudo p { margin: 0; }
.tela-titulo { font-size: 1.15rem; font-weight: 600; }
.contador { font-size: clamp(2.2rem, 7vw, 3.4rem); font-variant-numeric: tabular-nums; color: var(--dourado); font-weight: 700; }
.controles-sala { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px; }
.controles-sala:has(> :not([hidden])) { padding-bottom: 0; }
@media (min-width: 901px) { .controles-sala { padding: 0; } }

.oferta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, #1f1a0d, var(--superficie)); border: 1px solid var(--dourado);
  border-radius: var(--raio); padding: 14px 16px; margin: 0 16px;
}
@media (min-width: 901px) { .oferta { margin: 0; } }
.oferta-texto { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 260px; }
.oferta-produto { font-size: 1.05rem; }
.oferta-preco { color: var(--dourado); font-weight: 700; font-size: 1.1rem; }
.oferta-chamada, .oferta-prazo { color: var(--suave); font-size: 0.9rem; }
.oferta .botao { flex: 0 0 auto; }

.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); height: calc(100vh - 100px); min-height: 420px; }
@media (max-width: 900px) { .chat { height: 60vh; margin: 0 16px; } }
.chat-topo { display: flex; justify-content: space-between; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--borda); font-weight: 600; }
.mensagens { list-style: none; margin: 0; padding: 0.6rem 0.9rem; overflow-y: auto; display: grid; gap: 0.55rem; align-content: start; }
.mensagem { display: grid; gap: 0.1rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.mensagem strong { font-size: 0.82rem; color: var(--suave); }
.mensagem.autor-equipe strong, .mensagem.autor-programada strong { color: var(--dourado); }
.mensagem.autor-equipe, .mensagem.autor-programada { background: #221d10; border-left: 3px solid var(--dourado); padding: 0.4rem 0.6rem; border-radius: 6px; }
.form-chat { display: flex; gap: 8px; padding: 0.7rem 0.9rem; border-top: 1px solid var(--borda); }
.form-chat input { flex: 1; min-width: 0; font: inherit; color: var(--texto); background: #0b0b0c; border: 1px solid var(--borda); border-radius: 8px; padding: 0.6rem; }
.form-chat .botao { padding: 0.6rem 0.9rem; }
.aviso-chat { margin: 0; padding: 0 0.9rem 0.6rem; color: var(--suave); font-size: 0.85rem; min-height: 1.2em; }

/* Painel da equipe (claro) */
.pagina-painel {
  --fundo: #f5f4f0; --superficie: #ffffff; --borda: #dedbd3; --texto: #1c1b19; --suave: #6b675f; --dourado: #8a6612; --dourado-escuro: #6d500d;
}
.pagina-painel .botao { color: #fff; }
.pagina-painel .topo { position: sticky; top: 0; z-index: 2; }
.menu { display: flex; gap: 1rem; flex-wrap: wrap; }
.menu a { text-decoration: none; font-weight: 600; }
.painel { max-width: 1200px; margin: 0 auto; padding: 16px; display: grid; gap: 1.2rem; }
.subtitulo { color: var(--suave); margin-top: -0.5rem; }
.bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; overflow-x: auto; }
.destaque { border-color: var(--dourado); }
.pendencias { background: #fff7e6; border: 1px solid #e8c77a; border-radius: var(--raio); padding: 0.8rem 1rem; }
.pendencias h2 { font-size: 1rem; }
.pendencias ul { margin: 0; padding-left: 1.2rem; }
.numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.numero { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 0.8rem; display: grid; gap: 0.1rem; }
.numero-valor { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.numero-rotulo { font-size: 0.85rem; color: var(--suave); }
.numero-detalhe { font-size: 0.8rem; color: var(--dourado); }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabela th, .tabela td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tbody th { width: 220px; color: var(--suave); font-weight: 600; }
.etiqueta { font-size: 0.75rem; background: #efe7d3; color: #6d500d; border-radius: 999px; padding: 0.1rem 0.5rem; font-weight: 600; }
.acao { font-size: 0.85rem; margin-left: 0.6rem; background: none; border: 0; color: var(--dourado); cursor: pointer; font-weight: 600; text-decoration: underline; }
.retencao { width: 100%; height: auto; background: #faf9f6; border-radius: 6px; }
.retencao rect { fill: #c99a2e; }
.retencao .marca { stroke: #1c1b19; stroke-dasharray: 3 3; }
.retencao .marca-texto { font-size: 11px; fill: #1c1b19; }
.legenda, .vazio { color: var(--suave); font-size: 0.85rem; }
.chat-equipe .mensagens { max-height: 420px; border: 1px solid var(--borda); border-radius: 8px; background: #faf9f6; }
.chat-equipe .mensagem { grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 0.6rem; }
.chat-equipe .mensagem.autor-equipe, .chat-equipe .mensagem.autor-programada { background: #f6efdc; }
.chat-equipe .mensagem.oculta { opacity: 0.45; text-decoration: line-through; }
.chat-equipe .form-chat { padding: 0.7rem 0 0; border: 0; }
.chat-equipe .form-chat input { background: #fff; color: var(--texto); }
.chat-equipe .aviso-chat { padding: 0.4rem 0 0; }
@media (max-width: 700px) { .chat-equipe .mensagem { grid-template-columns: 1fr; } }