/* Player da TV + estilo dos slides (também usado nas prévias do painel). */
[hidden] { display: none !important; }
/* Só a página da TV (tv.php) fica travada em tela cheia; painel e site rolam normalmente. */
html.tv-page, body.tv { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff; cursor: none;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

#app { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
/* TV montada na vertical com o navegador em paisagem: gira o conteúdo 90° */
body.portrait #app { width: 100vh; height: 100vw; top: 100%; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
  transform-origin: 0 0; -webkit-transform-origin: 0 0; }

#stage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.bar:not([hidden]) ~ #stage { bottom: 0; }
.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .6s ease; transition: opacity .6s ease; }
.layer.on { opacity: 1; }
.media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.slide-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Rodapé: relógio + letreiro (fica por cima do conteúdo, 8% da altura) */
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 8vh; min-height: 48px; display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center; background: #0F6CBD; color: #fff; z-index: 5; box-shadow: 0 -1px 0 rgba(255,255,255,.15); }
.bar .clock { padding: 0 2.2vw; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.3); height: 100%;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; }
.bar .clock b { font-size: 3.4vh; line-height: 1; font-weight: 700; }
.bar .clock span { font-size: 1.7vh; opacity: .85; margin-top: .4vh; }
.ticker { -webkit-flex: 1; flex: 1; overflow: hidden; white-space: nowrap; height: 100%; position: relative; }
.ticker span { position: absolute; top: 50%; left: 0; font-size: 3vh; font-weight: 600; padding-left: 100%;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  -webkit-animation: tick 30s linear infinite; animation: tick 30s linear infinite; }
@-webkit-keyframes tick { from { -webkit-transform: translate(0, -50%); } to { -webkit-transform: translate(-100%, -50%); } }
@keyframes tick { from { transform: translate(0, -50%); } to { transform: translate(-100%, -50%); } }

/* Avisos */
.alert-banner { position: absolute; left: 3vw; right: 3vw; bottom: 11vh; z-index: 8; background: #FFC20E; color: #1a1a1a;
  border-radius: 1.2vh; padding: 2.2vh 3vw; font-size: 4vh; font-weight: 700; line-height: 1.25; text-align: center;
  box-shadow: 0 1vh 4vh rgba(0,0,0,.45); }
.alert-full { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; background: #B3261E; color: #fff;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; }
.alert-full > div { font-size: 7vh; font-weight: 800; line-height: 1.2; padding: 0 8vw; }

/* Sem conteúdo / mensagens */
.idle { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--brand, #0F6CBD); text-align: center;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; }
.idle-name { font-size: 8vh; font-weight: 800; }
.idle-sub { font-size: 3vh; opacity: .8; margin-top: 2vh; }
.fs-hint { position: absolute; top: 3vh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10;
  background: rgba(0,0,0,.78); color: #fff; padding: 1.4vh 2.4vw; border-radius: 99px; font-size: 2.6vh; }
.net { position: absolute; top: 1vh; right: 1vh; width: 1.2vh; height: 1.2vh; border-radius: 50%; background: #FFC20E; z-index: 10; opacity: .8; }
.tv-message { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; text-align: center; padding: 0 10vw; background: #0b1b2b; }
.tv-message h1 { font-size: 6vh; margin: 2vh 0; }
.tv-message p { font-size: 3vh; opacity: .85; }
.brand-tv { font-size: 2.6vh; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }

/* ---------- Slides: 1em = 1% da largura do quadro (definido por slide.js) ---------- */
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.slide-inner { padding: 0 7em; width: 100%; box-sizing: border-box; }
.slide-title { font-size: 5.2em; line-height: 1.08; margin: 0 0 .35em; font-weight: 800; letter-spacing: -.01em; }
.slide-body { font-size: 2.5em; line-height: 1.35; margin: 0; padding: 0; opacity: .95; }
.slide-body p { margin: 0 0 .45em; }
.slide-footer { position: absolute; left: 7em; right: 7em; bottom: 9em; font-size: 1.7em; opacity: .8; }
.slide-kicker { font-size: 2em; text-transform: uppercase; letter-spacing: .14em; opacity: .8; margin-bottom: .6em; font-weight: 600; }

.tpl-aviso .slide-inner { border-left: .6em solid rgba(255,255,255,.85); padding-left: 3em; margin-left: 4em; }
.tpl-boasvindas { text-align: center; }
.tpl-boasvindas .slide-title { font-size: 6.4em; }
.tpl-boasvindas .slide-body { font-size: 3.4em; font-weight: 600; }
.tpl-horario .slide-body { list-style: none; }
.tpl-horario .slide-body li { padding: .45em 0; border-bottom: 1px solid rgba(255,255,255,.3); }
.tpl-campanha::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background: -webkit-linear-gradient(135deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.16) 55%); background: linear-gradient(135deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.16) 55%); }
.slide-inner, .slide-photo, .slide-footer { position: relative; z-index: 1; }
.slide-footer { position: absolute; }
.tpl-campanha .slide-title { font-size: 6.6em; text-transform: uppercase; }
.tpl-equipe .slide-title { font-size: 4.6em; }
.tpl-equipe .slide-body p { padding: .3em 0; border-bottom: 1px solid rgba(255,255,255,.3); }

/* Clima no rodapé */
.bar .weather { padding: 0 2vw; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.3); height: 100%;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; }
.bar .weather b { font-size: 3.4vh; line-height: 1; font-weight: 700; }
.bar .weather span { font-size: 1.7vh; opacity: .85; margin-top: .4vh; }

/* Fila de senhas */
.calls { position: absolute; right: 2vw; top: 3vh; z-index: 6; width: 24vw; background: rgba(10,20,30,.82); border-radius: 1.4vh; padding: 1.6vh 1.6vw; }
.calls-title { font-size: 1.9vh; text-transform: uppercase; letter-spacing: .12em; opacity: .75; margin-bottom: .8vh; }
.calls ul { list-style: none; margin: 0; padding: 0; }
.calls li { padding: .8vh 0; border-top: 1px solid rgba(255,255,255,.15); font-size: 2.6vh; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.calls li:first-child { border-top: 0; font-size: 3.6vh; font-weight: 800; }
.calls li small { display: block; font-size: 1.9vh; font-weight: 400; opacity: .8; }
.call { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 11; background: var(--brand, #0F6CBD); text-align: center;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center;
  -webkit-animation: callin .5s ease-out; animation: callin .5s ease-out; }
.call-label { font-size: 4vh; text-transform: uppercase; letter-spacing: .3em; opacity: .85; }
.call-ticket { font-size: 26vh; font-weight: 900; line-height: 1; margin: 1vh 0; }
.call-person { font-size: 7vh; font-weight: 700; }
.call-room { font-size: 6vh; margin-top: 3vh; display: inline-block; align-self: center; -webkit-align-self: center; background: rgba(255,255,255,.18); padding: 1.2vh 3vw; border-radius: 99px; font-weight: 700; }
.call.no-ticket .call-label, .call.no-ticket .call-ticket { display: none; }
.call.no-ticket .call-person { font-size: 14vh; }
@-webkit-keyframes callin { from { opacity: 0; -webkit-transform: scale(1.06); } to { opacity: 1; -webkit-transform: none; } }
@keyframes callin { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* Fora do horário: tela escura */
.off { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; background: #000; }

/* Anúncios */
.ad-label { position: absolute; top: 2.4vh; left: 2vw; z-index: 3; background: rgba(0,0,0,.62); color: #fff; font: 600 1.9vh/1 "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; padding: .9vh 1.2vw; border-radius: 99px; }
.ad-qr { position: absolute; right: 2vw; bottom: 11vh; z-index: 3; background: #fff; border-radius: 1.2vh; padding: 1vh; text-align: center; color: #111;
  box-shadow: 0 .6vh 2.4vh rgba(0,0,0,.35); }
.ad-qr img { display: block; width: 16vh; height: 16vh; image-rendering: pixelated; }
.ad-qr span { display: block; font: 600 1.6vh/1.2 "Segoe UI", Roboto, Arial, sans-serif; margin-top: .6vh; }
.preview-16x9 .ad-label { font-size: 11px; padding: 4px 8px; top: 8px; left: 8px; }

.off-msg { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; color: #9aa4ae; font-size: 4vh; }
.off-msg small { font-size: 2.6vh; }

/* Slide com foto (modelo Equipe) */
.slide.has-photo .slide-inner { padding-left: 5em; }
.slide-photo { -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 26em; height: 34em; margin-left: 7em; border-radius: 1.4em; overflow: hidden;
  box-shadow: 0 0 0 .5em rgba(255,255,255,.85); background: rgba(255,255,255,.15); }
.slide-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }

/* fundos claros: linhas e moldura escuras */
.bg-menta .slide-body li, .bg-lavanda .slide-body li, .bg-pessego .slide-body li,
.bg-menta .slide-body p, .bg-lavanda .slide-body p, .bg-pessego .slide-body p { border-color: rgba(0,0,0,.14); }
.bg-menta.tpl-aviso .slide-inner, .bg-lavanda.tpl-aviso .slide-inner, .bg-pessego.tpl-aviso .slide-inner { border-left-color: currentColor; }
.bg-menta .slide-photo, .bg-lavanda .slide-photo, .bg-pessego .slide-photo { box-shadow: 0 0 0 .5em rgba(255,255,255,.95), 0 1.5em 3em rgba(0,0,0,.15); }
.bg-menta.tpl-campanha::before, .bg-lavanda.tpl-campanha::before, .bg-pessego.tpl-campanha::before {
  background: -webkit-linear-gradient(135deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.45) 55%); background: linear-gradient(135deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.45) 55%); }

/* ================= Apps da TV (1em = 1% da largura) ================= */
.app { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box;
  padding: 3.6em 5em 6.4em; display: flex; flex-direction: column; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.15; }
.app-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2em; }
.app-title { font-size: 2.6em; font-weight: 800; letter-spacing: -.01em; }
.app-brand { font-size: 1.3em; opacity: .75; font-weight: 600; }
.app-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.app-msg { font-size: 2.4em; opacity: .85; text-align: center; }
.app-foot { order: 9; margin-top: 1.2em; font-size: 1.15em; opacity: .75; }
.app-stale { position: absolute; right: 5em; top: 1.4em; font-size: .95em; opacity: .7; }
.app.light .app-foot, .app.light .app-brand { opacity: .8; }

/* clima */
.w-now { display: flex; align-items: center; gap: 3em; }
.w-icon svg { width: 17em; height: 17em; display: block; filter: drop-shadow(0 .4em .8em rgba(0,0,0,.18)); }
.w-temp { font-size: 11em; font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.w-desc { font-size: 3em; font-weight: 700; margin-top: .2em; }
.w-city { font-size: 1.8em; opacity: .85; margin-top: .3em; }
.w-extra { font-size: 1.5em; opacity: .8; margin-top: .6em; }
.w-days { display: flex; gap: 1.6em; margin-top: 2.6em; }
.w-day { flex: 1; background: rgba(255,255,255,.14); border-radius: 1.2em; padding: 1.1em 1em; text-align: center; }
.app.light .w-day { background: rgba(255,255,255,.55); }
.w-dname { font-size: 1.6em; font-weight: 700; }
.w-dicon svg { width: 5em; height: 5em; display: block; margin: .4em auto; }
.w-dmax { font-size: 2.4em; font-weight: 800; display: inline-block; margin-right: .4em; }
.w-dmin { font-size: 1.8em; opacity: .75; display: inline-block; }
.w-drain { font-size: 1.2em; opacity: .8; margin-top: .3em; }

/* notícias */
.n-card { border-left: .5em solid currentColor; padding-left: 2.4em; animation: appIn .6s ease both; }
.n-time { font-size: 1.5em; opacity: .75; font-weight: 600; margin-bottom: .6em; text-transform: uppercase; letter-spacing: .06em; }
.n-title { font-size: 4.2em; font-weight: 800; line-height: 1.08; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.n-summary { font-size: 2em; opacity: .85; margin-top: .9em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.n-dots { margin-top: 2.4em; padding-left: 2.9em; }
.n-dots span { display: inline-block; width: .9em; height: .9em; border-radius: 50%; background: currentColor; opacity: .3; margin-right: .6em; }
.n-dots span.on { opacity: 1; width: 2.4em; border-radius: .45em; }
@keyframes appIn { from { opacity: 0; transform: translateY(1em); } to { opacity: 1; transform: none; } }

/* loterias */
.l-contest { font-size: 2em; font-weight: 600; opacity: .9; margin-bottom: 1.6em; }
.l-balls { display: flex; flex-wrap: wrap; gap: 1.2em; }
.l-ball { width: 2.2em; height: 2.2em; border-radius: 50%; background: #fff; color: #1b1b1b; font-size: 3.6em; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 .15em .4em rgba(0,0,0,.25); }
.l-balls.many { gap: .8em; }
.l-balls.many .l-ball { font-size: 2.3em; }
.l-balls.small .l-ball { font-size: 2.3em; }
.l-sub { font-size: 1.8em; font-weight: 700; margin: 1.1em 0 .6em; }
.l-next { margin-top: 2.4em; display: flex; flex-wrap: wrap; gap: 1.2em; align-items: center; }
.l-acc { background: #FFD34D; color: #3a2a00; font-size: 2em; font-weight: 800; padding: .35em .8em; border-radius: .4em; text-transform: uppercase; }
.l-prize { font-size: 2.4em; font-weight: 700; }

/* cotações */
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); gap: 2em; }
.q-grid.many { grid-template-columns: repeat(4, 1fr); gap: 1.4em; }
.q-card { background: rgba(0,0,0,.18); border-radius: 1.4em; padding: 2em 2.2em; }
.app.light .q-card { background: rgba(255,255,255,.6); }
.q-name { font-size: 2em; font-weight: 700; opacity: .9; }
.q-bid { font-size: 4.2em; font-weight: 800; letter-spacing: -.02em; margin: .25em 0; white-space: nowrap; }
.q-grid.many .q-bid { font-size: 3em; }
.q-pct { font-size: 1.8em; font-weight: 700; display: inline-block; padding: .2em .6em; border-radius: .4em; }
.q-pct.up { background: rgba(46, 204, 113, .9); color: #fff; }
.q-pct.down { background: rgba(231, 76, 60, .9); color: #fff; }

/* relógio */
.app-relogio .app-body { align-items: center; text-align: center; }
.c-hi { font-size: 3.4em; font-weight: 700; opacity: .9; }
.c-time { font-size: 19em; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: .05em 0; font-variant-numeric: tabular-nums; }
.c-date { font-size: 3em; font-weight: 600; opacity: .9; }

/* dica */
.tip { max-width: 72em; animation: appIn .6s ease both; }
.tip-title { font-size: 5.6em; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.tip-text { font-size: 2.8em; line-height: 1.35; margin-top: .8em; opacity: .92; }

/* wi-fi: QR centralizado, sem senha na tela */
.app-wifi .app-body { align-items: center; }
.wf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wf-qr { background: #fff; border-radius: 1.6em; padding: 1.4em; box-shadow: 0 .6em 2em rgba(0,0,0,.25); }
.wf-qr img { width: 26em; height: 26em; display: block; image-rendering: pixelated; }
.wf-cap { font-size: 2.6em; font-weight: 800; margin-top: .8em; }
.wf-net { font-size: 1.9em; font-weight: 600; opacity: .9; margin-top: .4em; }
.wf-note { font-size: 1.6em; opacity: .8; margin-top: .4em; }

/* contagem */
.cd { text-align: center; }
.cd-pre { font-size: 3.4em; font-weight: 700; opacity: .9; }
.cd-num { font-size: 20em; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.cd-num.today { font-size: 12em; }
.cd-unit { font-size: 4em; font-weight: 800; margin-top: -.1em; }
.cd-event { font-size: 3em; font-weight: 600; margin-top: .6em; opacity: .92; }
.cd-event.big { font-size: 5em; font-weight: 800; }

/* aniversariantes */
.bd { list-style: none; margin: 0; padding: 0; }
.bd li { display: flex; align-items: baseline; gap: 1.2em; padding: .55em 0; border-bottom: .08em solid rgba(255,255,255,.25); font-size: 2.6em; }
.app.light .bd li { border-bottom-color: rgba(0,0,0,.12); }
.bd.cols { column-count: 2; column-gap: 4em; }
.bd.cols li { font-size: 2em; break-inside: avoid; }
.bd-day { font-weight: 800; min-width: 3.4em; font-variant-numeric: tabular-nums; }
.bd-name { font-weight: 600; }
.bd li.today { font-weight: 800; }
.bd li.today .bd-name { background: rgba(255,255,255,.22); padding: 0 .4em; border-radius: .3em; }

/* galeria de apps no painel */
.app-thumb .app-head { margin-bottom: 1em; }

/* ===== Pareamento da TV ===== */
.pair-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; color: #fff; text-align: center;
  background: radial-gradient(ellipse at 80% 0%, rgba(56,189,248,.25) 0%, transparent 50%), linear-gradient(135deg, #0B1220 0%, #0B3A66 60%, #0F6CBD 100%);
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;
  font-family: "Segoe UI", Roboto, Arial, sans-serif; }
.pair-screen h1 { font-size: 6vh; margin: 1.5vh 0 5vh; }
.pair-box { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: 3vh; padding: 5vh 6vh; }
.pair-left { text-align: left; max-width: 60vh; margin-right: 7vh; }
.pair-step { font-size: 3vh; line-height: 1.35; margin: 0 0 3vh; opacity: .9; }
.pair-pin { white-space: nowrap; font-size: 13vh; font-weight: 800; letter-spacing: .08em; line-height: 1; font-variant-numeric: tabular-nums; }
.pair-hint { font-size: 2.4vh; opacity: .7; margin: 3vh 0 0; }
.pair-right { text-align: center; }
.pair-right p { font-size: 2.2vh; opacity: .75; margin: 1.5vh 0 0; }
.pair-qr { background: #fff; border-radius: 2vh; padding: 1.6vh; width: 30vh; height: 30vh; }
.pair-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.pair-again { display: inline-block; margin-top: 2vh; padding: 1.5vh 4vh; border-radius: 1vh; background: #fff; color: #0B3A66; font-weight: 700; text-decoration: none; font-size: 3vh; }
/* app avaliação */
.fbq { display: flex; align-items: center; justify-content: space-between; gap: 5em; }
.fbq-text { flex: 1; min-width: 0; }
.fbq-head { font-size: 6em; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.fbq-stars { font-size: 5em; color: #FFD34D; letter-spacing: .1em; margin: .3em 0; }
.fbq-sub { font-size: 2.4em; opacity: .9; line-height: 1.3; }
.app-avaliacao .fbq { align-items: flex-end; }
.app-avaliacao .wf-qr img { width: 21em; height: 21em; }