/* TELA LEVE: CSS que roda em Chromium 38 (sem grid, sem variáveis, sem min()).
   1em = 1% da largura da tela (o app.js acerta o font-size de #tela). */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0A1622; color: #E8F0F8; }
body { font-family: "Figtree", Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; -webkit-box-sizing: border-box; }
.tela { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; font-size: 19.2px; }
.disp { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 800; }
.suave { color: #9DB0C3; }
.azul { color: #3E8BFF; }
.areia { color: #E6AE57; }
.verde { color: #3CC486; }
.alerta { color: #F06A5B; }

/* margem de segurança 3% (overscan) */
.segura { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 3% 3%; }
.coluna { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.linha { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.centro { -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; text-align: center; }
.cresce { -webkit-flex: 1; flex: 1; min-height: 0; min-width: 0; }

.carregando { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.girando { width: 5em; height: 5em; border-radius: 50%; border: 0.5em solid #1F3A52; border-top-color: #3E8BFF; -webkit-animation: gira 1s linear infinite; animation: gira 1s linear infinite; }
@-webkit-keyframes gira { to { -webkit-transform: rotate(360deg); } }
@keyframes gira { to { transform: rotate(360deg); } }
@-webkit-keyframes entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes entra { from { opacity: 0; } to { opacity: 1; } }
.entra { -webkit-animation: entra 0.6s ease both; animation: entra 0.6s ease both; }

/* marca */
.marca { display: inline-block; vertical-align: middle; }
.marca-ico { display: inline-block; vertical-align: middle; width: 2.8em; height: 2.8em; margin-right: 0.5em; }
.marca-ico i { position: absolute; top: 22%; left: 22%; right: 22%; bottom: 22%; border-top: 0.2em solid #fff; border-bottom: 0.2em solid #fff; }
.marca-txt { display: inline-block; vertical-align: middle; font-size: 2.2em; }

/* código */
.cod-numero { font-size: 11em; line-height: 1; letter-spacing: 0.06em; color: #3E8BFF; margin: 0.05em 0 0; }
.cod-qr { background: #fff; padding: 1em; border-radius: 1.2em; margin-left: 5em; }
.cod-qr img { display: block; width: 15em; height: 15em; }
.cod-texto { font-size: 2.2em; margin: 1em 0 0; }
.cod-sub { font-size: 1.5em; margin: 0.5em 0 0; }
.cod-erro { font-size: 1.5em; color: #F06A5B; border: 1px solid #5a2a2a; background: rgba(240,106,91,0.1); border-radius: 0.8em; padding: 0.5em 1.2em; margin-top: 1.2em; }
.botao { display: inline-block; font: inherit; font-size: 1.4em; font-weight: 600; color: #E8F0F8; background: #0F2132; border: 0.15em solid #1F3A52; border-radius: 0.8em; padding: 0.6em 1.2em; margin: 1.4em 0.4em 0; outline: none; cursor: pointer; }
.botao:focus { background: #3E8BFF; border-color: #3E8BFF; color: #fff; }

/* tela de informação */
.titulo { margin-bottom: 2em; }
.titulo h2 { font-size: 4.2em; line-height: 1; margin: 0; }
.titulo p { font-size: 1.6em; margin: 0.5em 0 0; }
.rodape { border-top: 1px solid #1F3A52; padding-top: 1.2em; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-end; align-items: flex-end; }
.rodape .arena { font-size: 2.4em; line-height: 1; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rodape .data { font-size: 1.3em; margin: 0.3em 0 0; }
.rodape .hora { font-size: 3.6em; line-height: 1; margin: 0 0 0 0.5em; }

.esp-lista { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -1.5em; }
.esp-item { width: 100%; padding: 0 1.5em 1em; }
.esp-lista.duas .esp-item { width: 50%; }
.esp-cx { background: #0F2132; border-radius: 0.8em; padding: 0.8em 1.4em; }
.esp-hora { font-size: 3.4em; line-height: 1; color: #3E8BFF; margin-right: 0.5em; }
.esp-quadra { font-size: 2.2em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esp-fila { font-size: 2em; font-weight: 700; color: #E6AE57; background: rgba(230,174,87,0.15); border-radius: 2em; padding: 0.2em 0.8em; margin-left: 0.5em; white-space: nowrap; }

.vag-lista { display: -webkit-flex; display: flex; margin: 0 -1em; }
.vag-item { width: 33.333%; padding: 0 1em; }
.vag-cx { background: #0F2132; border-radius: 1em; padding: 1.6em; text-align: center; }
.vag-esp { display: inline-block; font-size: 1.4em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #3CC486; background: rgba(60,196,134,0.15); border-radius: 2em; padding: 0.2em 0.8em; }
.vag-tit { font-size: 2.2em; font-weight: 700; line-height: 1.15; margin: 0.6em 0 0; max-height: 2.3em; overflow: hidden; }
.vag-quando { font-size: 2em; margin: 0.3em 0 0; }
.vag-faltam { font-size: 2em; font-weight: 600; color: #E6AE57; margin: 0.3em 0 0; }
.vag-qr { display: block; margin: 1em auto 0; width: 14em; height: 14em; background: #fff; padding: 0.5em; border-radius: 0.6em; }
.quadrei { font-size: 1.3em; text-align: right; max-width: 10em; margin-right: 0.8em; }
.quadrei-qr { width: 7em; height: 7em; background: #fff; padding: 0.4em; border-radius: 0.5em; }

/* ocioso */
.oc-nome { font-size: 7em; line-height: 1; margin: 0.4em 0 0; }
.oc-sub { font-size: 2.4em; margin: 0.6em 0 0; }
.oc-hora { font-size: 6em; line-height: 1; margin: 0.4em 0 0; }
.oc-data { font-size: 1.8em; margin: 0.3em 0 0; }
.oc-quadra { position: absolute; top: 8%; left: 8%; right: 8%; bottom: 8%; border: 0.25em solid rgba(31,58,82,0.6); border-radius: 2em; }
.oc-meio { position: absolute; top: 8%; bottom: 8%; left: 50%; border-left: 0.25em solid rgba(31,58,82,0.6); }

/* anúncio: por cima de tudo */
.anuncio { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 10; opacity: 0; -webkit-transition: opacity 0.6s ease; transition: opacity 0.6s ease; }
.anuncio.visivel { opacity: 1; }
.anuncio-midia { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.anuncio canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; }
.relogio-peq { position: absolute; right: 3%; bottom: 3%; z-index: 4; font-size: 1.2em; color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.55); border-radius: 2em; padding: 0.3em 0.9em; }
.sem-rede { position: absolute; right: 3%; top: 3%; z-index: 20; width: 1em; height: 1em; border-radius: 50%; background: #F06A5B; box-shadow: 0 0 0 0.3em rgba(0,0,0,0.6); }

/* demonstração: faixa por cima de tudo (até do anúncio) */
.faixa-demo { position: absolute; top: 2.5%; left: 50%; z-index: 30; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; font-size: 1.5em; font-weight: 600; letter-spacing: 0.12em; background: rgba(10,22,34,0.88); border-radius: 3em; padding: 0.4em 0.5em 0.4em 1.4em; }
.faixa-demo .botao-sair { font-size: 1em; letter-spacing: 0; margin: 0 0 0 1em; padding: 0.3em 1em; border-radius: 3em; background: transparent; border-color: rgba(255,255,255,0.6); }
.faixa-demo .botao-sair:focus { background: #fff; border-color: #fff; color: #0A1622; }
.em-demo #info.segura { padding-top: 7.5%; } /* título dos cartões não fica embaixo da faixa */