/* Sem Grid, variáveis CSS e gap: precisa rodar em navegador antigo de TV.
   O palco tem sempre 1920x1080 e é escalado pelo player.js, por isso os tamanhos são em px. */

html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: Roboto, "Segoe UI", Arial, Helvetica, sans-serif; color: #fff; cursor: default; }
* { -webkit-box-sizing: border-box; box-sizing: border-box; }

#palco {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden;
  -webkit-transform-origin: 0 0; transform-origin: 0 0;
  background: #14171c;
}

/* ---------- telas de configuração (código, departamento, diagnóstico) ---------- */
.config { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; padding: 70px 120px; background: #14171c; }
.config-titulo { font-size: 64px; font-weight: 700; margin: 0 0 12px; text-align: center; }
.config-sub { font-size: 34px; color: #aeb6c2; margin: 0; text-align: center; }

.codigo-caixas { text-align: center; margin: 36px 0 24px; height: 104px; }
.codigo-caixa {
  display: inline-block; width: 92px; height: 104px; line-height: 104px; margin: 0 8px;
  border-radius: 14px; background: #232830; font-size: 70px; vertical-align: top;
}
.codigo-msg { height: 50px; line-height: 50px; text-align: center; font-size: 34px; color: #ffb4a2; }
.teclado { width: 684px; margin: 16px auto 0; }
.tecla {
  float: left; width: 212px; height: 134px; line-height: 134px; margin: 0 6px 12px;
  border-radius: 16px; background: #2b313b; text-align: center; font-size: 64px; font-weight: 700;
}
.tecla-texto { font-size: 38px; }
.tecla-entrar { background: #1f6f4a; }

.focavel.foco { background: #ffd23f; color: #14171c; }

.lista-dep { margin: 100px auto 0; width: 1560px; text-align: center; }
.dep {
  display: inline-block; width: 480px; height: 260px; padding-top: 86px; margin: 0 16px 32px;
  border-radius: 20px; background: #2b313b; font-size: 54px; font-weight: 700; vertical-align: top; overflow: hidden;
}
.dep-nome { line-height: 62px; }
.dep-uso { margin-top: 10px; font-size: 26px; font-weight: 400; opacity: .8; }
.aviso-tela { padding-top: 400px; }
.sem-produtos { padding-top: 340px; text-align: center; font-size: 56px; opacity: .8; }

.diag { font-size: 30px; line-height: 50px; margin-top: 30px; }
.diag-linha { border-bottom: 1px solid #2b313b; overflow: hidden; }
.diag-rotulo { float: left; width: 420px; color: #aeb6c2; }
.diag-valor { margin-left: 420px; word-wrap: break-word; }
.diag-tecla { color: #ffd23f; font-weight: 700; }
.diag-ajuda { font-size: 30px; color: #aeb6c2; text-align: center; margin-top: 30px; }

/* ---------- menu sobre a tabela ---------- */
.menu-fundo { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #000; background: rgba(0, 0, 0, .72); }
.menu { position: absolute; left: 560px; top: 180px; width: 800px; padding: 40px; border-radius: 24px; background: #14171c; }
.menu-titulo { font-size: 44px; font-weight: 700; margin-bottom: 26px; text-align: center; }
.menu-item { height: 96px; line-height: 96px; margin-top: 14px; border-radius: 14px; background: #2b313b; font-size: 40px; text-align: center; }

/* ---------- tabela ---------- */
.tabela { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; padding: 34px 40px 0; }

.topo { position: relative; height: 118px; }
.selo { float: left; width: 104px; height: 104px; line-height: 104px; border-radius: 52px; text-align: center; font-size: 46px; font-weight: 800; }
.selo-logo { float: left; width: 104px; height: 104px; border-radius: 16px; background: #fff; }
.topo-textos { float: left; margin-left: 26px; }
.topo-loja { font-size: 32px; line-height: 40px; }
.topo-dep { font-size: 60px; line-height: 66px; font-weight: 800; }
.relogio { position: absolute; right: 0; top: 18px; font-size: 62px; font-weight: 700; }

.conteudo { position: relative; height: 848px; margin-top: 8px; overflow: hidden; }
.cards { margin-right: -20px; }
.card { position: relative; float: left; margin: 0 20px 20px 0; border-radius: 18px; overflow: hidden; }
.grade .card { width: 445px; height: 268px; }
.destaque-lista { position: absolute; left: 580px; top: 0; width: 1260px; height: 848px; overflow: hidden; }
.destaque-lista .card { width: 406px; height: 268px; }

.card-nome { height: 76px; padding: 12px 18px 0; font-size: 31px; line-height: 34px; font-weight: 700; overflow: hidden; }
.card-foto { position: absolute; left: 14px; bottom: 16px; width: 130px; height: 130px; }
.card-precos { position: absolute; right: 18px; bottom: 14px; text-align: right; }
.preco-de { font-size: 28px; line-height: 32px; text-decoration: line-through; opacity: .75; }
.preco { font-size: 72px; line-height: 76px; font-weight: 800; white-space: nowrap; }
.preco-moeda { font-size: 30px; font-weight: 700; margin-right: 4px; }
.preco-cent { font-size: 38px; font-weight: 700; }
.preco-un { font-size: 26px; line-height: 28px; opacity: .8; }
.selo-oferta { position: absolute; right: 0; top: 0; padding: 4px 16px; border-bottom-left-radius: 14px; font-size: 24px; line-height: 30px; font-weight: 800; }
.card-oferta .card-nome { padding-right: 112px; }

.destaque-painel { position: absolute; left: 0; top: 0; width: 560px; height: 828px; padding: 34px; border-radius: 24px; text-align: center; overflow: hidden; }
.destaque-rotulo { font-size: 60px; line-height: 66px; font-weight: 900; }
.destaque-foto { display: block; width: 330px; height: 330px; margin: 20px auto 8px; }
.destaque-nome { height: 112px; font-size: 48px; line-height: 56px; font-weight: 800; overflow: hidden; }
.destaque-de { font-size: 34px; line-height: 44px; opacity: .85; }
.destaque-preco { font-size: 116px; line-height: 118px; font-weight: 900; white-space: nowrap; }
.destaque-preco .preco-moeda { font-size: 46px; }
.destaque-preco .preco-cent { font-size: 58px; }
.destaque-info { font-size: 28px; line-height: 36px; margin-top: 4px; }

.rodape { position: relative; height: 40px; line-height: 40px; font-size: 24px; opacity: .85; }
.paginas { position: absolute; left: 0; width: 1840px; top: 0; text-align: center; }
.pagina { display: inline-block; width: 18px; height: 18px; margin: 0 7px; border-radius: 9px; background: #888; opacity: .4; }
.pagina-atual { opacity: 1; }
.sem-rede { position: absolute; right: 0; top: 11px; width: 18px; height: 18px; border-radius: 9px; background: #f2b134; }

.aviso-ok {
  position: absolute; left: 610px; bottom: 60px; width: 700px; height: 84px; line-height: 84px;
  border-radius: 42px; background: #000; background: rgba(0, 0, 0, .86); color: #fff; font-size: 36px; text-align: center;
}
.aguarde { position: absolute; left: 0; top: 480px; width: 1920px; text-align: center; font-size: 48px; }

/* ---------- temas ---------- */
.tema-brasa .tabela { background: #1b0f0b; color: #fff; }
.tema-brasa .selo { background: #d9411e; color: #fff; }
.tema-brasa .card { background: #2c1a13; color: #fff; }
.tema-brasa .card-oferta { background: #6e1c0c; }
.tema-brasa .preco { color: #ffcf56; }
.tema-brasa .selo-oferta { background: #ffcf56; color: #2c1a13; }
.tema-brasa .destaque-painel { background: #c8341a; color: #fff; }
.tema-brasa .destaque-rotulo, .tema-brasa .destaque-preco { color: #ffe27a; }
.tema-brasa .pagina { background: #ffcf56; }

.tema-trigo .tabela { background: #f6ecd9; color: #3a2614; }
.tema-trigo .selo { background: #8a4b1f; color: #fff; }
.tema-trigo .card { background: #fffaf0; color: #3a2614; }
.tema-trigo .card-oferta { background: #ffdf9e; }
.tema-trigo .preco { color: #a2410d; }
.tema-trigo .selo-oferta { background: #a2410d; color: #fff; }
.tema-trigo .destaque-painel { background: #8a4b1f; color: #fff; }
.tema-trigo .destaque-rotulo, .tema-trigo .destaque-preco { color: #ffdf9e; }
.tema-trigo .pagina { background: #8a4b1f; }

.tema-gelo .tabela { background: #0d2238; color: #fff; }
.tema-gelo .selo { background: #2e9bd6; color: #fff; }
.tema-gelo .card { background: #16344f; color: #fff; }
.tema-gelo .card-oferta { background: #0f6a8f; }
.tema-gelo .preco { color: #8fe3ff; }
.tema-gelo .selo-oferta { background: #8fe3ff; color: #0d2238; }
.tema-gelo .destaque-painel { background: #0f6a8f; color: #fff; }
.tema-gelo .destaque-rotulo, .tema-gelo .destaque-preco { color: #c9f1ff; }
.tema-gelo .pagina { background: #8fe3ff; }