/*
 * Widgets da VemVer na TV. Mesmo desenho das prévias do painel (web/src/ui/contentMock.tsx):
 * fundo verde-escuro com luz de tela, números grandes, rótulos em mono, curva de progresso e a marca no rodapé.
 * Medidas em vw (largura da tela): um desenho para TV em pé (.vt) e outro para deitada (.hz).
 * Compatível com WebView antigo de TV Box: sem `gap` em flex, sem `inset`, sem :has.
 */
@font-face { font-family: Gabarito; src: url(../fonts/gabarito-bold.ttf); font-weight: 700; }
@font-face { font-family: Gabarito; src: url(../fonts/gabarito-semibold.ttf); font-weight: 600; }
@font-face { font-family: Onest; src: url(../fonts/onest-regular.ttf); font-weight: 400; }
@font-face { font-family: Onest; src: url(../fonts/onest-semibold.ttf); font-weight: 600; }
@font-face { font-family: Martian; src: url(../fonts/martian-mono-medium.ttf); font-weight: 500; }

html, body { margin: 0; height: 100%; overflow: hidden; background: #0b130e; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }

.frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; opacity: 0; }
.frame.on-air { opacity: 1; }

/* ------------------------------ moldura comum ------------------------------ */
.w {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;
  color: #E6EFE8; font-family: Onest, sans-serif;
  background: radial-gradient(120% 70% at 85% 0%, #21402a 0%, #122016 50%, #0b130e 100%);
  padding: 8vw 7vw;
}
.hz .w { padding: 4.4vw 5.4vw; }
.body { -webkit-flex: 1; flex: 1; min-height: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

.label { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-family: Martian, monospace; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: #56BA5D; font-size: 3.5vw; margin-bottom: 5vw; }
.label i { display: block; width: 2vw; height: 2vw; border-radius: 50%; background: currentColor; margin-right: 2vw; }
.hz .label { font-size: 1.7vw; margin-bottom: 2.2vw; }
.hz .label i { width: 1vw; height: 1vw; margin-right: 1vw; }

.footer { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 5vw; }
.hz .footer { margin-top: 2.2vw; }
.bar { -webkit-flex: 1; flex: 1; height: .8vw; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-right: 3vw; }
.hz .bar { height: .4vw; margin-right: 2vw; }
.bar b { display: block; height: 100%; width: 0; border-radius: 99px; background: #56BA5D; }
.footer img { height: 4.6vw; display: block; }
.hz .footer img { height: 2.2vw; }

.g { font-family: Gabarito, sans-serif; font-weight: 700; line-height: .95; letter-spacing: -.02em; }
.m { font-family: Martian, monospace; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: rgba(230,239,232,.55); }
.p { line-height: 1.3; color: rgba(230,239,232,.72); }
.box { border-radius: 2.5vw; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); padding: 3.6vw 4vw; }
.hz .box { padding: 1.6vw 2vw; }
.end { margin-top: auto; }

/* ------------------------------ hora ------------------------------ */
.clock .body { -webkit-justify-content: center; justify-content: center; }
.clock .hm { font-size: 26vw; font-weight: 600; font-variant-numeric: tabular-nums; }
.clock .hm small { font-size: 40%; opacity: .45; margin-left: 1.5vw; }
.clock .date { font-size: 5.6vw; margin-top: 3vw; }
.hz .clock .body { -webkit-align-items: center; align-items: center; }
.hz .clock .hm { font-size: 20vw; }
.hz .clock .date { font-size: 2.6vw; margin-top: 1.2vw; }

/* ------------------------------ tempo ------------------------------ */
.ico { position: relative; display: inline-block; -webkit-flex-shrink: 0; flex-shrink: 0; width: 15vw; height: 15vw; }
.hz .ico { width: 7vw; height: 7vw; }
.ico .sun { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: #F2B33D; box-shadow: 0 0 6vw rgba(242,179,61,.45); }
.ico .cloud { position: absolute; width: 80%; height: 46%; right: -22%; bottom: -4%; border-radius: 99px; background: rgba(255,255,255,.88); }
.ico.cloudy .sun { background: #9DB4C0; box-shadow: none; }
.ico.rain .cloud { background: #9DB4C0; }
.ico.rain .sun { background: #C9D3D8; box-shadow: none; }
.ico.rain .drops { position: absolute; left: 30%; bottom: -30%; width: 60%; height: 22%; background: repeating-linear-gradient(100deg, transparent 0, transparent 18%, #6FB7E8 18%, #6FB7E8 26%); }
.ico.night .sun { background: #D7E2DA; box-shadow: 0 0 5vw rgba(215,226,218,.3); }
.weather .now { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 6vw; }
.weather .now .g { font-size: 30vw; margin-right: 4vw; }
.weather .cond { font-size: 6vw; color: #E6EFE8; margin-top: 4.5vw; }
.weather .credit { font-size: 2.6vw; margin-top: 2vw; }
.hz .weather .credit { font-size: 1.2vw; margin-top: .8vw; }
.pair { display: -webkit-flex; display: flex; }
.pair > * { -webkit-flex: 1; flex: 1; }
.pair > * + * { margin-left: 3vw; }
.pair .m { font-size: 3vw; }
.pair .g { font-size: 7vw; margin-top: 1.4vw; }
.days { display: -webkit-flex; display: flex; margin-top: 3vw; }
.day { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; border-radius: 2vw; background: rgba(255,255,255,.05); padding: 2.6vw 1vw; }
.day + .day { margin-left: 2vw; }
.day .m { font-size: 2.8vw; }
.day .dot { width: 5.4vw; height: 5.4vw; border-radius: 50%; background: #F2B33D; margin: 1.4vw 0; }
.day .dot.cloudy, .day .dot.rain { background: #9DB4C0; }
.day .g { font-size: 4vw; }
.day .min { font-size: 3vw; opacity: .55; margin-top: .6vw; }
.hz .weather .body { -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; }
.hz .weather .now { margin-top: 0; }
.hz .weather .now .g { font-size: 13vw; margin-right: 2vw; }
.hz .weather .cond { font-size: 2.4vw; margin-top: 1.4vw; }
.hz .weather .left { margin-right: 4vw; }
.hz .weather .right { -webkit-flex: 1; flex: 1; }
.hz .pair > * + * { margin-left: 1.2vw; }
.hz .pair .m { font-size: 1.4vw; }
.hz .pair .g { font-size: 3.2vw; margin-top: .6vw; }
.hz .days { margin-top: 1.4vw; }
.hz .day { padding: 1.2vw .6vw; }
.hz .day + .day { margin-left: 1vw; }
.hz .day .m { font-size: 1.3vw; }
.hz .day .dot { width: 2.6vw; height: 2.6vw; margin: .6vw 0; }
.hz .day .g { font-size: 2vw; }
.hz .day .min { font-size: 1.4vw; }

/* ------------------------------ notícia ------------------------------ */
.badge { -webkit-align-self: flex-start; align-self: flex-start; border-radius: 99px; background: #56BA5D; color: #0b130e; font-family: Martian, monospace; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 3.2vw; padding: 1.2vw 3vw; }
.news .body { -webkit-justify-content: flex-end; justify-content: flex-end; }
.news .headline { font-size: 11vw; margin: 3.4vw 0; transition: opacity .3s linear; }
.news .photo { width: 100%; height: 70vw; border-radius: 2.5vw; overflow: hidden; background: rgba(255,255,255,.05); }
.news .photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s linear; }
.news.with-photo .body { -webkit-justify-content: space-between; justify-content: space-between; }
.news.with-photo .headline { font-size: 8.4vw; }
.hz .news.with-photo .body { -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; }
.hz .news .photo { width: 42%; height: 30vw; -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 3.4vw; }
.hz .news.with-photo .headline { font-size: 4.4vw; }
.news .source { font-size: 2.8vw; }
.hz .badge { font-size: 1.5vw; padding: .5vw 1.4vw; }
.hz .news .body { -webkit-justify-content: center; justify-content: center; }
.hz .news .headline { font-size: 5.2vw; margin: 1.4vw 0; }
.hz .news .source { font-size: 1.3vw; }

/* ------------------------------ você sabia ------------------------------ */
.trivia .w { background: linear-gradient(160deg, #6CCB72, #56BA5D 55%, #3f9a46); color: #0b130e; }
.trivia .label { color: #0b130e; }
.trivia .bar { background: rgba(11,19,14,.15); }
.trivia .bar b { background: #0b130e; }
.trivia .body { -webkit-justify-content: center; justify-content: center; }
.trivia .big { font-size: 24vw; }
.trivia .text { font-size: 8vw; font-weight: 600; margin-top: 4vw; }
.trivia .note { font-size: 4.4vw; color: rgba(11,19,14,.7); margin-top: 4vw; line-height: 1.3; }
.hz .trivia .big { font-size: 11vw; }
.hz .trivia .text { font-size: 3.6vw; margin-top: 1.4vw; }
.hz .trivia .note { font-size: 2vw; margin-top: 1.4vw; }

/* ------------------------------ câmbio ------------------------------ */
.exchange .body { -webkit-justify-content: center; justify-content: center; }
.quote + .quote { margin-top: 3vw; }
.quote .from { font-size: 3.4vw; }
.quote .row { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 1.4vw; }
.quote .g { font-size: 12vw; }
.quote .var { font-family: Martian, monospace; font-weight: 500; font-size: 3.4vw; }
.var.up { color: #56BA5D; } .var.down { color: #F2B23E; }
.hz .exchange .list { display: -webkit-flex; display: flex; }
.hz .quote { -webkit-flex: 1; flex: 1; }
.hz .quote + .quote { margin-top: 0; margin-left: 2vw; }
.hz .quote .from { font-size: 1.6vw; }
.hz .quote .g { font-size: 5.6vw; }
.hz .quote .var { font-size: 1.6vw; }

/* ------------------------------ peça em CSS (anúncio sem arquivo) ------------------------------ */
/* identidade do anunciante ou do ponto, em tela cheia, sem nada da VemVer */
.pc { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between; padding: 9vw 8vw; font-family: Gabarito, sans-serif; }
.pc .k { font-family: Onest, sans-serif; font-size: 4.4vw; letter-spacing: .06em; text-transform: uppercase; opacity: .8; font-weight: 600; }
.pc .t { font-size: 13vw; line-height: .98; font-weight: 700; letter-spacing: -.02em; }
.pc .s { font-family: Onest, sans-serif; font-size: 5.6vw; line-height: 1.25; opacity: .9; margin-top: 5vw; }
.pc .b { -webkit-align-self: flex-start; align-self: flex-start; border-radius: 99px; padding: 2.4vw 5vw; font-size: 4.6vw; font-weight: 700; }
.pc.post { -webkit-justify-content: center; justify-content: center; }
.pc.post .t { font-size: 14vw; margin-top: 6vw; } .pc.post .s { font-size: 6.4vw; margin-top: 6vw; }
.hz .pc { -webkit-justify-content: center; justify-content: center; padding: 5vw 6vw; }
.hz .pc .k { font-size: 2.2vw; } .hz .pc .t { font-size: 7.5vw; margin-top: 2vw; } .hz .pc .s { font-size: 3.2vw; margin-top: 2vw; }
.hz .pc .b { font-size: 2.4vw; padding: 1.2vw 2.6vw; margin-top: 2.4vw; }

/* ------------------------------ institucional ------------------------------ */
.house .body { -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; }
.house img { width: 56vw; }
.house .tagline { font-size: 5.2vw; margin-top: 6vw; color: rgba(230,239,232,.75); }
.hz .house img { width: 22vw; }
.hz .house .tagline { font-size: 2.4vw; margin-top: 2.4vw; }

/* ------------------------------ loteria ------------------------------ */
.lottery .body { -webkit-justify-content: center; justify-content: center; }
.game + .game { margin-top: 3vw; }
.game-name { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; -webkit-justify-content: space-between; justify-content: space-between; }
.game-name b { font-family: Gabarito, sans-serif; font-size: 5.2vw; }
.game-name .m { font-size: 2.6vw; }
.balls { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 2vw -0.7vw 0; }
.ball { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 9vw; height: 9vw; margin: .7vw; border-radius: 50%; font-family: Gabarito, sans-serif; font-weight: 700; font-size: 4vw; color: #fff; }
.balls.small .ball { width: 7.2vw; height: 7.2vw; font-size: 3.2vw; }
.lottery .prize { font-size: 2.8vw; margin-top: 1.6vw; }
.lottery .credit { font-size: 2.4vw; margin-top: 2.4vw; }
.hz .lottery .games { display: -webkit-flex; display: flex; }
.hz .game { -webkit-flex: 1; flex: 1; }
.hz .game + .game { margin-top: 0; margin-left: 1.6vw; }
.hz .game-name b { font-size: 2.2vw; } .hz .game-name .m { font-size: 1.1vw; }
.hz .ball { width: 3.6vw; height: 3.6vw; font-size: 1.6vw; margin: .3vw; }
.hz .balls.small .ball { width: 2.9vw; height: 2.9vw; font-size: 1.3vw; }
.hz .lottery .prize { font-size: 1.2vw; } .hz .lottery .credit { font-size: 1.1vw; margin-top: 1vw; }