/* Tela do participante (F6, E2) — mock CANONICOS/MOCK_TELA_TRANSMISSAO.png + DESIGN.md; tokens em comum/tokens.css.
   D-F6-6: o verde do mock virou coral (etiquetas, sinal, ponto de "Acompanhar"). */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--cor-fundo);color-scheme:dark}
/* Opção B (decisão de 12/10/2026): a página tem a ALTURA DA TELA e não rola. Na transmissão só a caixa da legenda
   rola; a barra de letra e o "Sair do evento" ficam sempre à vista. `100vh` é a reserva para navegador
   sem `dvh`. */
body{margin:0;background:var(--cor-fundo);color:var(--cor-texto);font:var(--tipo-body-md);-webkit-font-smoothing:antialiased;height:100vh;height:100dvh;display:flex;flex-direction:column;
  --primaria:var(--cor-primaria);--acento:var(--cor-secundaria);--escala:1;
  /* F11, leva 4c-2: valores da tela sem personalização; `aplicarMarca` grava os do evento (cores-marca.js) */
  --primaria-rgb:24,87,197;--acento-rgb:255,107,90;--sobre-primaria:#fff;--sobre-acento:var(--cor-fundo);--icone:#B1C5FF;--acento-texto:var(--acento)}
.mono{font-family:var(--fonte-mono);font-variant-numeric:tabular-nums}
.sec{color:var(--cor-texto-2)}

/* cabeçalho com o lockup oficial */
.topo{display:flex;align-items:center;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) 10px max(var(--gutter),env(safe-area-inset-left))}
.lockup{height:36px;max-width:62%;object-fit:contain;object-position:left center}
/* F11, leva 4c-2: a marca Silent Hub reduzida, à direita, quando a logomarca do cliente está no lugar principal (o arquivo
   oficial tem margem transparente: 38 px de imagem dão ~21 px de marca); medidas de docs/laboratorio/pfizer-2026-10/pfizer.css */
.marca-sh{height:38px;margin:-4px -8px -4px 0;flex:none}
.amb{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--cor-texto-apagado)}

/* Cada tela ocupa o que sobra abaixo do cabeçalho. Leva 4c-1 (29/10/2026): sem a navegação fixa de baixo, os 67 px que a
   tela reservava para ela voltam à legenda; fica só a folga da área segura. Se uma tela não couber (celular deitado), é
   ELA que rola por dentro, nunca a página. */
.tela{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:0 max(var(--gutter),env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));max-width:560px;width:100%;margin:0 auto}
.tela > *{flex:none}
.cartao{background:var(--cor-superficie);border:1px solid var(--borda-fina);border-radius:var(--raio-xl);padding:var(--espaco-md)}
h1,h2{font-family:var(--fonte-titulo);margin:0 0 6px}
h1{font:var(--tipo-headline-lg-mobile)}h2{font:var(--tipo-headline-md)}

/* entrada por PIN */
.entrada{margin-top:24px;display:grid;gap:10px}
.pin{width:100%;background:var(--cor-campo);border:1px solid rgba(255,255,255,.1);border-radius:var(--raio-lg);color:var(--cor-texto);font:700 32px/40px var(--fonte-mono);letter-spacing:.35em;text-align:center;padding:12px 0 12px .35em;margin:8px 0}
.pin::placeholder{color:var(--cor-texto-apagado);letter-spacing:.2em}
.pin:focus{outline:none;border-color:var(--primaria)}
button{font-family:var(--fonte-texto);cursor:pointer}
.primario{width:100%;background:var(--primaria);color:var(--sobre-primaria);border:0;border-radius:var(--raio-base);padding:14px;font:700 16px/20px var(--fonte-titulo)}
.primario:hover{filter:brightness(1.12)}.primario:disabled{opacity:.6;cursor:wait}
.fantasma{background:transparent;color:var(--cor-texto);border:1px solid rgba(255,255,255,.15);border-radius:var(--raio-full);padding:8px 14px;font:600 13px/16px var(--fonte-texto)}
.fantasma:hover{background:rgba(255,255,255,.05)}
/* toque no celular: todo alvo tem pelo menos 44 px de altura (e 44 de largura nos botões de letra) */
.fantasma,.chip,.letra,.acompanhar{min-height:44px}.letra{min-width:44px}
button:focus-visible,.campo:focus-visible,.pin:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.erro{color:var(--cor-critico);font-size:13px;min-height:18px}

/* cartão do palco */
.palco{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center}
.icone-palco{width:48px;height:48px;border-radius:50%;background:rgba(var(--primaria-rgb),.25);color:var(--icone);display:grid;place-items:center}
.etiqueta{font:700 11px/14px var(--fonte-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--acento-texto)}
/* palco sem áudio chegando: a etiqueta deixa o coral (coral é só "ao vivo") e fica apagada; o nome permanece */
.palco.fora .etiqueta{color:var(--cor-texto-apagado)}
.palco-nome{font:700 18px/24px var(--fonte-titulo);margin-top:2px}
.palco-evento{font-size:13px}
.sinal{display:flex;align-items:flex-end;gap:3px;height:26px}
.sinal i{width:5px;background:var(--acento);border-radius:2px;opacity:.25}
.sinal i:nth-child(1){height:8px}.sinal i:nth-child(2){height:14px}.sinal i:nth-child(3){height:20px}.sinal i:nth-child(4){height:26px}
.sinal[data-nivel="1"] i:nth-child(-n+1),.sinal[data-nivel="2"] i:nth-child(-n+2),.sinal[data-nivel="3"] i:nth-child(-n+3),.sinal[data-nivel="4"] i{opacity:1}

/* idiomas */
.fileira{display:flex;gap:8px;align-items:center}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--cor-superficie);border:1px solid rgba(255,255,255,.1);border-radius:var(--raio-full);padding:8px 14px 8px 10px;color:var(--cor-texto-2);font:600 14px/18px var(--fonte-texto)}
.chip .cod{font:700 10px/12px var(--fonte-mono);letter-spacing:.04em;color:var(--cor-texto-2)}
.chip.ativo{border-color:var(--primaria);background:rgba(var(--primaria-rgb),.18);color:var(--cor-texto)}
.chip.ativo .cod{color:var(--icone)}
/* F11, leva 4c-2: com a cor do cliente (ou no tema claro) o chip ativo é cheio na cor primária; texto pela luminância dela */
.cor-cliente .chip.ativo{background:var(--primaria);color:var(--sobre-primaria)}
.cor-cliente .chip.ativo .cod,.cor-cliente .chip.ativo svg{color:var(--sobre-primaria)}
/* F8/E5 (decisão B de Marcelo, 19/10/2026): com 5 idiomas ou mais, um botão único no estilo do chip ativo; o <select>
   transparente por cima recebe o toque e abre a lista nativa (16 px para o iOS não ampliar a tela) */
.seletor-idioma{position:relative;cursor:pointer;padding:8px 12px 8px 14px}
.seletor-idioma svg{color:var(--icone);flex:none}
.seletor-idioma select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0}
.seletor-idioma:focus-within{outline:2px solid var(--icone);outline-offset:2px}
.bloco-copiar{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.copiar{display:inline-flex;align-items:center;gap:6px;flex:none;font-family:var(--fonte-mono);letter-spacing:.06em}
.nota-copiar{font-size:10px;line-height:12px;color:var(--cor-texto-apagado);text-align:right}
/* F11, leva 4b (Marcelo, 27/10/2026: "Eles devem ser reduzidos a metade da altura, e ocupar 2 linhas. Estão disputando
   espaço com o botão copiar, nao faz sentido. Use exatamente o mesmo dimensionamento usado nos botões da tela da
   pfizer"): as mesmas regras de control/estatico/pfizer/pfizer.css:60-70, na mesma posição da cascata (depois do .chip,
   do .seletor-idioma e do .copiar). O chip passa de 44 px (o min-height de toque dos botões, linha 40) a ~20 px. */
.fileira{flex-wrap:wrap;row-gap:6px}
.chips{flex-wrap:wrap;overflow:visible;gap:6px}
.chip{min-height:0;padding:2px 10px 2px 8px;gap:6px;font:600 12px/14px var(--fonte-texto)}
.chip .cod{font:700 9px/10px var(--fonte-mono)}
.seletor-idioma svg{width:12px;height:12px}
.copiar{min-height:0;padding:2px 10px;gap:5px;font:600 12px/14px var(--fonte-mono)}
.copiar svg{width:12px;height:12px}
/* F11, leva 4c-1 (Marcelo, 29/10/2026: "na tela do publico, o idioma e o botao copiar, devem estar na mesma linha"): os
   chips entram direto na fileira, e o Copiar vem logo depois do último deles, na mesma linha (quando os chips quebram, o
   Copiar fecha a última linha, encostado à direita). Tamanho e cor dos chips são os de 27/10. */
.chips{display:contents}
.bloco-copiar{margin-left:auto}
@media (max-width:480px){
  .nota-copiar{display:none}
}

/* transcrição */
/* a caixa da legenda ocupa todo o espaço entre os chips de idioma e a barra de letra, e só ela rola */
.tela > .transcricao{flex:1 1 0;min-height:130px;overflow-y:auto;scroll-behavior:smooth;padding:var(--espaco-md) var(--espaco-md) 8px}
.paragrafos p,.agora-texto{font:var(--tipo-transcription-stream-mobile);letter-spacing:var(--tipo-transcription-stream-mobile-espaco);font-size:calc(16px * var(--escala));line-height:calc(26px * var(--escala));margin:0 0 14px}
.paragrafos p{color:var(--cor-texto)}
.agora{border-left:3px solid var(--primaria);padding-left:14px;margin-top:4px}
.agora .etiqueta{margin-bottom:6px}
.agora-texto{color:#fff;font-weight:600}
.cursor{display:inline-block;width:3px;height:1.1em;background:var(--acento);vertical-align:-0.15em;margin-left:3px;border-radius:1px;animation:pisca 1s steps(2) infinite}
@keyframes pisca{to{opacity:0}}
.vazio{font-size:14px}
/* INTERVALO na caixa da legenda (D-E1-9; Leva 3A): o evento está pausado. Apagado, sem coral: nada está ao vivo. */
.intervalo{border-left:3px solid var(--cor-texto-apagado);padding-left:14px;margin:4px 0 14px}
.intervalo .etiqueta{color:var(--cor-texto-2);margin-bottom:6px}
.intervalo p{margin:0;font-size:14px}

/* barra de letra e expandir texto */
.barra-letra{display:flex;align-items:center;gap:10px;background:var(--cor-superficie);border:1px solid var(--borda-fina);border-radius:var(--raio-full);padding:8px 10px 8px 18px}
.letra{background:transparent;border:0;color:var(--cor-texto-2);font:700 15px/20px var(--fonte-texto);padding:4px 6px}
.letra.grande{color:var(--cor-texto);font-size:19px}
.sep{width:1px;height:18px;background:rgba(255,255,255,.12)}
.btn-expandir-texto{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--raio-full);padding:8px 14px;color:var(--cor-texto);font:600 13px/18px var(--fonte-texto);cursor:pointer;min-height:44px}
.btn-expandir-texto svg{color:var(--icone);flex:none}
.btn-expandir-texto:hover{background:rgba(255,255,255,.12)}

/* modo expandido (viewport inteiro / tela cheia para leitura imersiva) */
.transcricao.expandida{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;z-index:9999!important;border-radius:0!important;margin:0!important;padding:calc(env(safe-area-inset-top) + 64px) var(--espaco-lg) calc(env(safe-area-inset-bottom) + 24px)!important;background:var(--cor-fundo)!important;box-shadow:none!important}
.btn-fechar-expandido{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:10000;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:var(--raio-full);color:#fff;padding:8px 16px;font:600 14px/18px var(--fonte-texto);cursor:pointer;backdrop-filter:blur(8px)}
.btn-fechar-expandido:hover{background:rgba(255,255,255,.22)}

/* Mudo local (Leva P6.1): silencia o som só neste aparelho. Ícone no traço fino dos demais, azul claro; ligado: texto
   apagado e ícone riscado. Coral não entra aqui: coral é só "ao vivo". */
.mudo{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--cor-texto);font:600 14px/18px var(--fonte-texto);padding:8px 6px;min-height:44px}
.mudo svg{flex:none;color:var(--icone)}
.mudo .corte{display:none}
.mudo.ligado span{color:var(--cor-texto-apagado)}
.mudo.ligado .corte{display:block}
/* F11, leva 4c-2 (Marcelo, 30/10/2026: "um botão discreto escrito tema escuro/tema claro. nao precisa botar icone") */
.tema{background:transparent;border:0;color:var(--cor-texto-2);font:600 13px/16px var(--fonte-texto);padding:4px 6px;min-height:44px}
.sep{flex:none}
/* com o botão de tema, cinco alvos dividem a barra no celular: "Tema claro" e "Expandir texto" quebram em duas linhas e
   tudo cabe sem rolagem (medido em 375 e 360 px) */
@media (max-width:420px){.barra-letra{gap:4px;padding-left:10px;padding-right:8px}.barra-letra .sep{display:none}.mudo{padding:8px 2px}.tema{padding:4px 2px}.btn-expandir-texto{padding:4px 10px}}
@media (max-width:359px){.barra-letra{flex-wrap:wrap;border-radius:var(--raio-xl)}}
/* "Sair do evento" também na aba Transmissão, abaixo da barra de letra (Leva P6.1). */
.sair-transmissao{align-self:center}
.nota{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--cor-texto-apagado);text-align:center}
.erro.aviso-midia,#aviso-midia{text-align:center;font-size:12px}
/* F11, leva 4b: o aviso "Tradução não disponível" no mesmo estilo do aviso de mídia; sem altura reservada quando some.
   Leva 4c-2: na cor de acento quando o evento é personalizado; a tela escura padrão segue a de hoje. */
#aviso-traducao{text-align:center;font-size:12px;min-height:0}
.cor-cliente #aviso-traducao{color:var(--acento-texto)}
#aviso-traducao[hidden]{display:none}
/* transmissão encerrada ou conexão perdida: o aviso inteiro é o botão de tentar de novo */
.religar{width:100%;white-space:normal;border-radius:var(--raio-lg);padding:12px 14px;line-height:18px}
.religar:disabled{opacity:.6;cursor:wait}
/* o navegador só toca som depois de um toque: botão coral, pois é o "ao vivo" chegando */
.tocar{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--acento);color:var(--sobre-acento);border:0;border-radius:var(--raio-full);padding:14px 22px;font:700 15px/18px var(--fonte-titulo);box-shadow:0 0 24px rgba(var(--acento-rgb),.35);animation:pulso-tocar 1.6s ease-in-out infinite;z-index:5}
@keyframes pulso-tocar{0%,100%{box-shadow:0 0 0 0 rgba(var(--acento-rgb),.5)}50%{box-shadow:0 0 0 12px rgba(var(--acento-rgb),0)}}
body > audio{display:none}

.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:6px 0 14px;font-size:14px}
.dl dt{color:var(--cor-texto-apagado);font-family:var(--fonte-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;align-self:center}.dl dd{margin:0}

/* F11, leva 4c-2 (Marcelo, 29/10/2026, "vamos usar o C"): tema claro escolhido no modelo. Superfícies e textos do
   laboratório Pfizer (docs/laboratorio/pfizer-2026-10/pfizer.css:5-20) e as regras de componente dele (:49-95), lendo a
   cor do cliente em vez das da Pfizer; a fonte segue Sora e Manrope. Só vale depois do PIN: a tela de entrada não sabe o
   evento e fica escura. */
/* Marcelo, 30/10/2026: "tema claro - fundo branco fffff, fontes em contraste, e tema escuro fundo atual e fontes atuais":
   fundo branco e os textos com pelo menos 4,5:1 sobre ele (o cinza do laboratório, #718096, dá 4:1 e foi escurecido). */
body.tema-claro{--cor-fundo:#FFFFFF;--cor-superficie:#FFFFFF;--cor-superficie-2:#F1F5F9;--cor-superficie-3:#E2E8F0;--cor-campo:#FFFFFF;
  --cor-texto:#0A142F;--cor-texto-2:#4A5568;--cor-texto-apagado:#5F6B7D;--borda-fina:#E2E8F0;--borda-interna:#E2E8F0}
.tema-claro .topo{background:var(--cor-superficie);border-bottom:1px solid var(--borda-fina);gap:12px;padding-bottom:12px;margin-bottom:10px}
.tema-claro .fantasma,.tema-claro .pin{border-color:#CBD5E1}
.tema-claro .fantasma:hover{background:rgba(10,20,47,.04)}
.tema-claro .icone-palco{background:rgba(var(--primaria-rgb),.1)}
.tema-claro .chip{border-color:var(--borda-fina)}
.tema-claro .chip .cod{color:var(--cor-texto-apagado)}
.tema-claro .chip.ativo{border-color:var(--primaria)}
.tema-claro .agora-texto{color:var(--cor-texto)}
.tema-claro .sep{background:var(--borda-fina)}
.tema-claro .btn-expandir-texto{background:var(--cor-superficie-2);border-color:var(--borda-fina)}
.tema-claro .btn-expandir-texto:hover{background:var(--cor-superficie-3)}
.tema-claro .btn-fechar-expandido{background:var(--cor-superficie);border-color:#CBD5E1;color:var(--cor-texto);backdrop-filter:none}
.tema-claro .btn-fechar-expandido:hover{background:var(--cor-superficie-2)}

/* Tela baixa (até 700 px de altura visível): modo compacto. Cabeçalho, cartão do palco, barra de letra e os espaços
   entre os blocos encolhem para a caixa da legenda manter pelo menos 10 linhas na letra normal, com tudo à vista
   (medido em 375x667 e 360x640). Os alvos de toque continuam com 44 px. */
@media (max-height:700px){
  .topo{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:6px}
  .lockup{height:28px}
  .marca-sh{height:32px}
  .tela{gap:6px}
  .palco{padding-top:8px;padding-bottom:8px}
  .barra-letra{padding-top:4px;padding-bottom:4px}
}

@media (min-width:768px){.lockup{height:30px}.marca-sh{height:34px}.palco-nome{font-size:20px}.paragrafos p,.agora-texto{font-size:calc(20px * var(--escala));line-height:calc(32px * var(--escala))}}