/* SGCE · tv.css — Modo TV (digital signage) em retrato (9:16) ou paisagem (16:9) */

body.tvr-body {
  margin: 0; overflow: hidden; height: 100vh;
  background: linear-gradient(170deg, #12333a 0%, #0d2228 60%, #0a1a1f 100%);
  color: #e8f0ee; font-family: 'Segoe UI', system-ui, sans-serif;
}
#tvRetrato { display: flex; flex-direction: column; height: 100%; padding: 2.2vh 2.4vw; padding: 2.2cqh 2.4cqw; gap: 1.6vh; gap: 1.6cqh; }

/* ── Raiz girável: as TVs que não giram a imagem giram aqui por CSS ──
   0/180: mesmo tamanho da tela; 90/270: largura↔altura trocadas.
   container-type:size faz cqh/cqw seguirem o painel LÓGICO (girado). */
#tvRoot { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; container-type: size; }
#tvRoot.tvr-rot90  { width: 100vh; height: 100vw; transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
#tvRoot.tvr-rot180 { transform: rotate(180deg); }
#tvRoot.tvr-rot270 { width: 100vh; height: 100vw; transform-origin: top left; transform: rotate(-90deg) translateX(-100%); }

/* ── Cabeçalho: logo · relógio/data · clima/local ── */
.tvr-head { display: flex; align-items: flex-start; gap: 2vw; gap: 2cqw; }
.tvr-logo { height: calc(7vh * var(--tvfs, 1)); height: calc(7cqh * var(--tvfs, 1)); width: auto; flex-shrink: 0; margin-top: .6vh; margin-top: .6cqh; }
.tvr-clockbox { flex: 1; }
.tvr-clock { font-size: calc(8.5vh * var(--tvfs, 1)); font-size: calc(8.5cqh * var(--tvfs, 1)); font-weight: 800; line-height: 1; letter-spacing: -2px; }
.tvr-clock sup { font-size: calc(3.2vh * var(--tvfs, 1)); font-size: calc(3.2cqh * var(--tvfs, 1)); font-weight: 600; opacity: .75; margin-left: .4vw; margin-left: .4cqw; }
.tvr-date { font-size: calc(2.4vh * var(--tvfs, 1)); font-size: calc(2.4cqh * var(--tvfs, 1)); color: #b8ccc8; margin-top: .6vh; margin-top: .6cqh; }
.tvr-clima { text-align: right; }
.tvr-temp { font-size: calc(5.5vh * var(--tvfs, 1)); font-size: calc(5.5cqh * var(--tvfs, 1)); font-weight: 700; display: flex; align-items: center; gap: 1vw; gap: 1cqw; justify-content: flex-end; }
.tvr-temp i { font-size: calc(5vh * var(--tvfs, 1)); font-size: calc(5cqh * var(--tvfs, 1)); opacity: .9; }
.tvr-local { font-size: calc(2.1vh * var(--tvfs, 1)); font-size: calc(2.1cqh * var(--tvfs, 1)); color: #b8ccc8; margin-top: .4vh; margin-top: .4cqh; }

/* ── Grade única por áreas (muda com a orientação) ── */
.tvr-grid {
  flex: 1; min-height: 0; display: grid; gap: 1.4vh 1.2vw; gap: 1.4cqh 1.2cqw;
  /* RETRATO: card da estação em faixa no topo; 2 colunas abaixo */
  grid-template-columns: 1fr 1.15fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "est    est"
    "cal    mural"
    "agenda mural"
    "agenda rss";
}
/* PAISAGEM (16:9): 3 colunas — calendário/agenda · mural · estação/notícias */
body.tvr-paisagem .tvr-grid {
  grid-template-columns: 0.9fr 1.5fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "cal    mural  est"
    "agenda mural  rss";
}
.tvr-a-est    { grid-area: est; }
.tvr-a-cal    { grid-area: cal; }
.tvr-a-agenda { grid-area: agenda; min-height: 0; }
.tvr-a-mural  { grid-area: mural; min-height: 0; display: flex; flex-direction: column; }
.tvr-a-rss    { grid-area: rss; min-height: 0; overflow: hidden; }

.tvr-card {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; padding: 1.8vh 1.4vw; padding: 1.8cqh 1.4cqw; overflow: hidden;
}
.tvr-card-t {
  font-size: calc(1.9vh * var(--tvfs, 1)); font-size: calc(1.9cqh * var(--tvfs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  color: #cfe2de; border-bottom: 1px solid rgba(255,255,255,.14);
  padding-bottom: .9vh; padding-bottom: .9cqh; margin-bottom: 1.2vh; margin-bottom: 1.2cqh;
}
#tvr-agenda { overflow: hidden; height: 100%; }
.tvr-vazio { color: #7e9691; font-size: calc(1.9vh * var(--tvfs, 1)); font-size: calc(1.9cqh * var(--tvfs, 1)); padding: 1.5vh 0; padding: 1.5cqh 0; }

/* ── Card da estação (estilo do card público, sem botão) ── */
.tvr-a-est { display: flex; gap: 1.2vw; gap: 1.2cqw; align-items: stretch; }
.tvr-est-foto { flex-shrink: 0; width: 24%; min-width: 120px; border-radius: 12px; overflow: hidden; background: #0a1a1f; }
.tvr-est-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tvr-est-semfoto { display: flex; align-items: center; justify-content: center; font-size: calc(6vh * var(--tvfs, 1)); font-size: calc(6cqh * var(--tvfs, 1)); color: #4d6a64; }
.tvr-est-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8vh; gap: .8cqh; justify-content: center; }
.tvr-est-nome { font-size: calc(3vh * var(--tvfs, 1)); font-size: calc(3cqh * var(--tvfs, 1)); font-weight: 800; }
.tvr-est-status { font-size: calc(2.2vh * var(--tvfs, 1)); font-size: calc(2.2cqh * var(--tvfs, 1)); font-weight: 700; }
.tvr-est-status.st-ok   { color: #6fdc8c; }
.tvr-est-status.st-info { color: #5db9e8; }
.tvr-est-status.st-warn { color: #f0c24b; }
.tvr-est-status.st-off  { color: #8a9a97; }
.tvr-est-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .8vh .8vw; gap: .8cqh .8cqw; }
.tvr-est-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .9vh .8vw; padding: .9cqh .8cqw; }
.tvr-est-l { font-size: calc(1.5vh * var(--tvfs, 1)); font-size: calc(1.5cqh * var(--tvfs, 1)); text-transform: uppercase; letter-spacing: .5px; color: #9fb8b3; }
.tvr-est-v { font-size: calc(2.2vh * var(--tvfs, 1)); font-size: calc(2.2cqh * var(--tvfs, 1)); font-weight: 800; margin-top: .2vh; margin-top: .2cqh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvr-est-uso { display: flex; align-items: center; gap: .8vw; gap: .8cqw; font-size: calc(2vh * var(--tvfs, 1)); font-size: calc(2cqh * var(--tvfs, 1)); color: #cfe2de; }
.tvr-est-uso img { width: calc(4.2cqh * var(--tvfs, 1)); height: calc(4.2cqh * var(--tvfs, 1)); border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.25); }
.tvr-est-uso i { font-size: calc(3.4vh * var(--tvfs, 1)); font-size: calc(3.4cqh * var(--tvfs, 1)); color: #7e9691; }
.tvr-est-prev { font-size: calc(2vh * var(--tvfs, 1)); font-size: calc(2cqh * var(--tvfs, 1)); color: #f0c24b; font-weight: 600; }
.tvr-est-prev span { color: #9fb8b3; font-weight: 400; font-size: calc(1.7vh * var(--tvfs, 1)); font-size: calc(1.7cqh * var(--tvfs, 1)); }
/* Paisagem: o card fica em coluna (foto no topo) */
body.tvr-paisagem .tvr-a-est { flex-direction: column; }
body.tvr-paisagem .tvr-est-foto { width: 100%; height: 18vh; height: 18cqh; }

/* ── Mini-calendário ── */
.tvr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4vh .3vw; gap: .4cqh .3cqw; text-align: center; }
.tvr-cal-h { font-size: calc(1.5vh * var(--tvfs, 1)); font-size: calc(1.5cqh * var(--tvfs, 1)); color: #8fa8a3; text-transform: uppercase; padding-bottom: .5vh; padding-bottom: .5cqh; }
.tvr-cal-d { font-size: calc(2vh * var(--tvfs, 1)); font-size: calc(2cqh * var(--tvfs, 1)); padding: .55vh 0; padding: .55cqh 0; border-radius: 8px; position: relative; color: #d9e6e3; }
.tvr-cal-d.hoje { background: #d9453c; color: #fff; font-weight: 800; }
.tvr-cal-d.tem-evento::after {
  content: ''; position: absolute; left: 22%; right: 22%; bottom: .2vh; bottom: .2cqh; height: .5vh; height: .5cqh;
  border-radius: 3px; background: #7a6fd0;
}
.tvr-cal-d.hoje.tem-evento::after { background: rgba(255,255,255,.8); }

/* ── Agenda ── */
.tvr-ag-dia { display: flex; gap: 1vw; gap: 1cqw; padding: 1.1vh 0; padding: 1.1cqh 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.tvr-ag-num { font-size: calc(3.4vh * var(--tvfs, 1)); font-size: calc(3.4cqh * var(--tvfs, 1)); font-weight: 300; color: #cfe2de; min-width: 5vw; min-width: 5cqw; line-height: 1; }
.tvr-ag-corpo { flex: 1; min-width: 0; }
.tvr-ag-sem { font-size: calc(1.7vh * var(--tvfs, 1)); font-size: calc(1.7cqh * var(--tvfs, 1)); color: #8fa8a3; margin-bottom: .4vh; margin-bottom: .4cqh; }
.tvr-ag-ev { font-size: calc(1.95vh * var(--tvfs, 1)); font-size: calc(1.95cqh * var(--tvfs, 1)); padding: .25vh 0 .25vh .8vw; padding: .25cqh 0 .25cqh .8cqw; border-left: 4px solid #5db9e8; margin: .35vh 0; margin: .35cqh 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvr-ag-hora { color: #9fb8b3; font-size: calc(1.7vh * var(--tvfs, 1)); font-size: calc(1.7cqh * var(--tvfs, 1)); margin-right: .4vw; margin-right: .4cqw; }

/* ── Mural ── */
.tvr-mural { flex: 1; min-height: 24vh; min-height: 24cqh; border-radius: 12px; overflow: hidden; background: #000;
  display: flex; align-items: center; justify-content: center; position: relative; }
.tvr-mural video { width: 100%; height: 100%; object-fit: contain; }
/* Fundo: a própria imagem borrada COBRINDO o quadro (sem barras pretas) */
.tvr-mural .tvr-mural-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(28px) brightness(.5) saturate(1.1);
  transform: scale(1.12);   /* esconde as bordas do desfoque */
}
/* Frente: a figura COMPLETA, nítida, no maior tamanho possível */
.tvr-mural .tvr-mural-fg {
  position: relative; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.55));
}

/* ── RSS ── */
.tvr-rss-item { padding: 1vh 0; padding: 1cqh 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.tvr-rss-item:last-child { border-bottom: none; }
.tvr-rss-t { font-size: calc(2vh * var(--tvfs, 1)); font-size: calc(2cqh * var(--tvfs, 1)); font-weight: 700; color: #e8f0ee; line-height: 1.35; }
.tvr-rss-r { font-size: calc(1.7vh * var(--tvfs, 1)); font-size: calc(1.7cqh * var(--tvfs, 1)); color: #9fb8b3; margin-top: .3vh; margin-top: .3cqh; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }