/* ===================================================================
   Digital Lobby Signage — Clickweb / Meridian
   Fonte da verdade: Figma "Digital Lobby", frame v2 (node 32:343).
   Todos os valores abaixo vêm da API do Figma, não de medição visual.

   Grade: 1920x1080, padding 60, colunas 573 / 609 / 586, gap 16,
          linhas 811 + 133. Coluna da direita atravessa as duas linhas.
   1rem = 16px em 1920px de largura; escala proporcionalmente.
   =================================================================== */

:root {
  --ink: #1c2938;
  --tan: #c9ba9f;

  /* ---- vidro fosco: cards são branco translúcido sobre o fundo da página,
     não mais branco sólido com sombra. Cada nível tem sua própria opacidade
     medida no Figma — empilhar essas camadas é o que produz o efeito de
     profundidade (ex.: uma linha "zebrada" é só mais uma camada de --glass-1
     por cima do card, que já é translúcido). */
  --glass-1: rgba(255, 255, 255, 0.40); /* cards de primeiro nível */
  --glass-2: rgba(255, 255, 255, 0.20); /* caixa do clima, dentro do card de status */
  --glass-3: rgba(255, 255, 255, 0.30); /* linhas "zebradas" da lista de reuniões */
  --glass-4: rgba(255, 255, 255, 0.70); /* tiles do rodapé de ajuda */
  --glass-5: rgba(255, 255, 255, 0.80); /* tiles do QR code */
  --glass-border: rgba(255, 255, 255, 0.20);

  /* hairline navy 6% — usado no card "acontecendo agora" (única borda escura) */
  --hairline: rgba(28, 41, 56, 0.06);
  /* divisor antes de "Para mais informações" */
  --rule: rgba(28, 41, 56, 0.15);

  --bar-red:    #e27171;
  --bar-steel:  #476d99;
  --bar-green:  #4fbf71;
  --bar-purple: #757ac4;
  --bar-olive:  #b2bf4f;

  --radius: 1rem; /* 16px — todos os cards e tiles */

  /* único card com sombra própria: o painel de boas-vindas (imagem escura,
     não vidro fosco) */
  --shadow-welcome: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.03),
                     0 0.75rem 1rem rgba(0, 0, 0, 0.08);

  --logo-cycle: 40s; /* ciclo completo clickweb -> Meridian -> clickweb */
}

* {
  box-sizing: border-box;
}

html {
  /* O design tem 1920x1080. A escala segue o menor entre largura e altura
     disponíveis, então o painel nunca é cortado — em telas fora do 16:9
     sobra margem nas laterais em vez de perder o rodapé. */
  font-size: min(0.83333vw, 1.481481vh);
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f6 url("../assets/bg-board.jpg") center / cover no-repeat;
  color: var(--ink);
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
}

p, h1, h2 {
  margin: 0;
}

/* ============================== GRADE ============================== */

.board {
  display: grid;
  grid-template-columns: 35.8125rem 38.0625rem 36.625rem; /* 573 / 609 / 586 */
  grid-template-rows: 50.6875rem 8.3125rem;               /* 811 / 133 */
  gap: 1rem;                                              /* 16 */
  width: 120rem;   /* 1920 */
  height: 67.5rem; /* 1080 */
  padding: 3.75rem; /* 60 */
}

.col-left {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
}

.welcome {
  grid-area: 1 / 2;
  min-width: 0;
  min-height: 0;
}

.meetings {
  grid-column: 3;
  grid-row: 1 / span 2; /* 586 x 960 */
  min-width: 0;
  min-height: 0;
}

.help {
  grid-column: 1 / span 2; /* 1198 */
  grid-row: 2;
}

.card {
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}

/* ========================== TIPOGRAFIA ========================== */

.card-title {
  font-size: 1.25rem;    /* 20 */
  font-weight: 600;
  line-height: 1.575rem; /* 25.2 */
}

.card-sub {
  font-size: 0.875rem; /* 14 */
  font-weight: 400;
  line-height: 1.1rem; /* 17.6 */
}

/* =================== Relógio + clima (573 x 127) =================== */

.status {
  position: relative;
  flex-shrink: 0;
  height: 7.9375rem; /* 127 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 1rem 1.5rem; /* 16 / 16 / 16 / 24 — assimétrico no Figma */
  overflow: hidden; /* corta as gotas do canvas nas bordas arredondadas do card */
}

/* canvas de chuva por trás do relógio/clima — position:absolute + primeiro
   filho de um flex container pinta atrás dos outros itens (regra de
   stacking do flexbox: todo filho pinta em ordem do DOM, mesmo os
   posicionados), sem precisar de z-index. Intensidade é controlada em
   renderWeather() e só liga de verdade quando a previsão é chuva/garoa. */
.status-rain-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.clock {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12 */
}

/* sem badge/fundo no design atual — só o ícone com traço, solto no branco */
.clock-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* SVG vetorial com stroke #1c2938 nativo — sem precisar de filter */
.clock-badge img {
  width: 1.5rem; /* 24 */
  height: 1.5rem;
}

.clock-text {
  display: flex;
  flex-direction: column;
}

.clock-time {
  font-size: 3.5rem;  /* 56 */
  font-weight: 400;
  line-height: 3.5rem; /* 56 */
  font-variant-numeric: tabular-nums;
}


.clock-date {
  font-size: 0.875rem; /* 14 */
  font-weight: 400;
  line-height: 1.1rem; /* 17.6 */
}

/* vidro mais transparente que o card externo (20% vs 40%) — camada extra */
.weather {
  display: flex;
  align-items: center;
  gap: 1rem;       /* 16 */
  padding: 1rem;   /* 16 */
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}

.weather-icon {
  width: 3rem; /* 48 */
  height: 3rem;
  flex-shrink: 0;
  /* recolore o SVG colorido para monocromático — brightness(0.65) sem reduzir
     o contraste (a versão anterior usava contrast(0.55), que achatava tudo
     pro cinza médio e ficava ilegível sobre o vidro claro) */
  filter: grayscale(1) brightness(0.65);
}

.weather-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem; /* 5 */
}

.weather-desc,
.weather-city {
  font-size: 0.875rem;
  line-height: 1.1rem;
}

.weather-city {
  display: flex;
  align-items: center;
  gap: 0.3125rem; /* 5 */
}

/* o "|" antes da cidade é uma barrinha 2x12 arredondada, cor areia */
.weather-tick {
  width: 0.125rem;  /* 2 */
  height: 0.75rem;  /* 12 */
  flex-shrink: 0;
  border-radius: 100px;
  background: var(--tan);
}

/* ==================== Mapa de acessos (573 x 504) ==================== */

.map {
  flex-shrink: 0;
  height: 31.5rem; /* 504 */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;     /* 24 */
  padding: 1.5rem; /* 24 */
}

.map-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0d0d0d;
}

/* scaleMode=FILL no Figma: a imagem 1920x1080 é cortada nas laterais */
.map-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* canvas de "pings" por cima do mapa — img não é positioned, então um
   elemento position:absolute pinta depois dela por padrão (sem precisar
   de z-index) */
.map-pings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ====================== QR codes (573 x 148) ====================== */

.qr {
  flex-shrink: 0;
  height: 9.25rem; /* 148 */
  display: flex;
  align-items: center;
  gap: 2rem;            /* 32 */
  padding: 1rem 1.5rem; /* 16 / 24 */
  /* textura pontilhada do mockup, por cima do vidro translúcido */
  background: url("../assets/qr-pattern.png") center / cover no-repeat, var(--glass-1);
}

.qr-text {
  width: 17.3125rem; /* 277 */
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4 */
}

.qr-group {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* 16 */
  flex-shrink: 0;
}

.qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* 8 */
}

.qr-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5rem;  /* 88 */
  height: 5.5rem;
  padding: 0.75rem; /* 12 */
  background: var(--glass-5);
  border-radius: var(--radius);
  overflow: hidden;
}

/* faixa de luz varrendo o tile de tempos em tempos ("escaneie aqui"),
   depois pausa parada fora do tile até o próximo ciclo — só transform,
   não mexe em layout/paint fora da faixa */
.qr-tile::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -35%;
  width: 35%;
  height: 150%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
  transform: translateX(-140%);
  animation: qr-shimmer 9s ease-in-out infinite;
  pointer-events: none;
}

.qr-item:nth-child(2) .qr-tile::after {
  animation-delay: 3s;
}

@keyframes qr-shimmer {
  0%   { transform: translateX(-140%); }
  12%  { transform: translateX(440%); }
  100% { transform: translateX(440%); }
}

.qr-tile img {
  width: 3.875rem; /* 62 */
  height: 3.875rem;
}

.qr-caption--clickweb {
  width: 5rem;       /* 80 */
  height: 0.875rem;  /* 14 */
}

.qr-caption--meridian {
  width: 6.875rem;  /* 110 */
  height: 1.125rem; /* 18 */
}

/* ================= Painel de boas-vindas (609 x 811) ================= */

.welcome {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-welcome);
  /* fallback caso o vídeo não rode (reduced-motion, codec, carregando) */
  background: #04070f;
}

.welcome-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* overlay preto a 40% que o Figma aplica sobre o vídeo */
.welcome-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* dip suave pra preto exatamente no ponto de corte do loop — sem isso, o
   vídeo dá um "trancro" visível ao voltar pro início. Opacidade controlada
   via JS (smoothVideoLoop, em app.js), acompanhando video.currentTime. */
.welcome-loop-fade {
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: 0;
  pointer-events: none;
}

.welcome-content {
  position: relative;
  height: 100%;
  padding: 5.625rem 1.5rem 0; /* 90 / 24 */
}

.welcome-eyebrow {
  font-size: 1.5rem;      /* 24 */
  font-weight: 600;
  line-height: 1.8875rem; /* 30.2 */
  text-align: center;
  color: #ffffff;
}

/* ---- Alternância clickweb <-> Meridian ----
   Centralizado no painel inteiro (609 x 811), não no espaço sobrando abaixo
   do texto — por isso fica fora do fluxo do .welcome-content, como um irmão
   absoluto cobrindo o painel todo e centralizando o conteúdo dentro dele.
   Os dois logos ficam empilhados no mesmo slot. Cada um aparece por metade do
   ciclo e a passagem é limpa: o primeiro termina de sumir em 50%, exatamente
   quando o segundo (deslocado meio ciclo) começa a aparecer — sem os dois
   wordmarks sobrepostos no meio do fade. */
.welcome-logos {
  position: absolute;
  inset: 0;
}

/* width fixo (não 100% do container, que agora é o painel inteiro) — os dois
   logos têm proporções bem diferentes (clickweb é uma faixa larga e baixa,
   Meridian é um emblema empilhado, mais alto), então cada um usa a altura
   que sua própria proporção pedir dentro dessa largura comum */
.welcome-logo {
  position: absolute;
  inset: 0;
  margin: auto; /* centraliza no painel inteiro, nas duas direções */
  width: 21.25rem; /* 340 */
  height: auto;
  opacity: 0;
  animation: logo-cycle var(--logo-cycle) ease-in-out infinite;
  /* os vídeos das logos têm fundo #000 sólido (não têm canal alpha — mp4
     não suporta transparência). "screen" ignora preto puro por completo
     (preto não contribui em nada nesse blend) e deixa só o traço brilhante
     aparecer por cima do painel, sem precisar de WebM+VP9 alpha (suporte
     instável em navegador embarcado de TV). */
  mix-blend-mode: screen;
}

.welcome-logo--meridian {
  animation-delay: calc(var(--logo-cycle) / -2);
}

.welcome-logo--clickweb {
  width: 25rem; /* 400 — um pouco maior que o padrão (340), só essa logo */
}

/* ciclo mais longo (era 18s): a troca em si continua rápida (~1,6s de fade,
   4% do ciclo), só o tempo que cada logo fica parado na tela que aumentou
   bastante (era ~4,7s, agora ~16,8s) */
@keyframes logo-cycle {
  0%   { opacity: 0; }
  4%   { opacity: 1; } /* fade in  ~1,6s */
  46%  { opacity: 1; } /* na tela  ~16,8s */
  50%  { opacity: 0; } /* fade out ~1,6s */
  100% { opacity: 0; } /* apagado enquanto o outro aparece */
}

/* ==================== Reuniões (586 x 960) ====================
   O card não tem padding lateral: o card de "agora" e as linhas da lista são
   full-bleed, e só os textos soltos recebem os 24px. */

.meetings {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 0; /* 24 em cima e embaixo, 0 nas laterais */
  overflow: hidden;  /* o raio do card recorta as linhas full-bleed */
}

.meetings-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24 */
  min-height: 0;
}

.meetings-title {
  padding: 0 1.5rem;
}

.meet-block {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16 */
}

.meet-label {
  display: flex;
  align-items: center;
  gap: 0.25rem; /* 4 */
  padding: 0 1.5rem;
  font-size: 1rem;        /* 16 */
  font-weight: 400;
  line-height: 1.2625rem; /* 20.2 */
}

/* escudo navy medido no mockup: ~10x9 dentro de um slot de 14 */
.meet-marker {
  width: 0.875rem;  /* 14 */
  height: 0.875rem;
  flex-shrink: 0;
  object-fit: contain;
}

/* ---- card da reunião em andamento (536 x 119, recuado 24px) ---- */

.meet-now-wrap {
  padding: 0 1.5rem;
}

/* o vídeo fica fora do trecho que o JS reescreve (recompute()/advanceNow()
   rodam a cada 8-20s) — senão ele reiniciaria a cada atualização */
.now-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8 */
  height: 7.4375rem; /* 119 */
  padding: 2rem 1.5rem; /* 32 / 24 */
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06);
  /* fallback caso o vídeo não rode */
  background: #04070f;
}

/* anel interno que pisca quando o conteúdo do card muda de verdade (nova
   reunião, virou "vazio" etc.) — inset porque .now-card tem overflow:hidden,
   um glow pra fora seria cortado. .flash é adicionada via JS (ver
   renderNow()) e não precisa ser removida: a animação não é infinita, então
   só volta a rodar se a classe for removida e reaplicada (força reflow). */
.now-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 rgba(111, 178, 255, 0);
  opacity: 0;
  pointer-events: none;
}

.now-card.flash::after {
  animation: now-card-flash 900ms ease-out;
}

@keyframes now-card-flash {
  0% { box-shadow: inset 0 0 0 3px rgba(111, 178, 255, 0.6); opacity: 1; }
  100% { box-shadow: inset 0 0 0 0 rgba(111, 178, 255, 0); opacity: 0; }
}

/* fundo animado — simulação de rede neural (canvas 2D, código próprio, ver
   app.js). Sem vídeo/gif/lottie: não compete com o decodificador de vídeo
   da TV, não tem arquivo pra carregar, não tem como travar. */
.now-card-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #04070f;
}

/* "desaparece" do layout mas deixa os filhos (bar+texto, ou a mensagem vazia)
   participando do flex do .now-card como se fossem filhos diretos */
.now-card-content {
  display: contents;
}

.now-card .meet-empty {
  position: relative;
  padding: 0;
  color: rgba(255, 255, 255, 0.7);
}

/* sem reunião em andamento: sem vídeo, card claro simples — como os demais
   cards de vidro fosco, não o tratamento escuro usado quando há conteúdo */
.now-card.is-empty {
  background: var(--glass-1);
  border-color: var(--glass-border);
  box-shadow: none;
}

.now-card.is-empty .now-card-bg {
  display: none;
}

.now-card.is-empty .meet-empty {
  color: rgba(28, 41, 56, 0.45);
}

/* ---- estado "sem reunião agora, mas tem uma chegando" ----
   mesma estrutura visual do now-bar/now-text, só que em tons de tinta pro
   card claro (o now-title/now-meta originais são brancos/areia, pensados
   pro vídeo escuro) */
.next-bar {
  position: relative;
  width: 0.25rem; /* 4 */
  height: 3rem;   /* 48 */
  flex-shrink: 0;
  border-radius: 100px;
  background: rgba(28, 41, 56, 0.3);
}

.next-title {
  position: relative;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.575rem;
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
}

.next-meta {
  position: relative;
  font-size: 1rem;
  line-height: 1.2625rem;
  color: rgba(28, 41, 56, 0.6);
}

/* position:relative aqui (não no wrapper display:contents, que ignora
   propriedades de caixa) — elementos posicionados pintam sempre acima de
   estáticos, então sem isso o vídeo absoluto cobriria bar e texto */
.now-bar {
  position: relative;
  width: 0.25rem; /* 4 */
  height: 3rem;   /* 48 */
  flex-shrink: 0;
  border-radius: 100px;
  background: var(--tan);
}

.now-text {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8 */
}

.now-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.575rem;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
}

.now-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8 */
  font-size: 1rem;
  line-height: 1.2625rem;
  color: var(--tan);
}

.now-meta .dot {
  width: 0.25rem; /* 4 */
  height: 0.25rem;
  border-radius: 100px;
  background: var(--tan);
  flex-shrink: 0;
}

/* ---- lista das próximas reuniões (584 x 77 por linha, sem gap) ---- */

.meet-rows {
  display: flex;
  flex-direction: column;
}

.meet-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;  /* 8 */
  height: 4.8125rem; /* 77 */
  padding: 1rem 1.5rem; /* 16 / 24 */
}

/* linha "zebrada": mais uma camada de vidro por cima do card, que já é
   translúcido — não é branco sólido */
.meet-row:nth-child(odd) {
  background: var(--glass-3);
}

.row-bar {
  width: 0.25rem; /* 4 */
  height: 2.5rem; /* 40 */
  flex-shrink: 0;
  border-radius: 100px;
  background: var(--bar, var(--tan));
}

.bar-red    { --bar: var(--bar-red); }
.bar-steel  { --bar: var(--bar-steel); }
.bar-green  { --bar: var(--bar-green); }
.bar-purple { --bar: var(--bar-purple); }
.bar-olive  { --bar: var(--bar-olive); }

.row-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4 */
}

.row-title {
  font-size: 1.125rem;      /* 18 */
  font-weight: 600;
  line-height: 1.41875rem;  /* 22.7 */
  overflow: hidden;
  white-space: nowrap;
}

/* alvo do scroll (JS): translateX quando o texto não cabe. display:inline-block
   é obrigatório pra scrollWidth medir o texto, não a largura do container. */
.marquee-text {
  display: inline-block;
  will-change: transform;
}

.row-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem; /* 6 */
  font-size: 0.875rem;
  line-height: 1.1rem;
}

.row-meta .dot {
  width: 0.1875rem; /* 3 */
  height: 0.1875rem;
  border-radius: 100px;
  background: var(--ink);
  flex-shrink: 0;
}

/* padding horizontal já vem do container: 0 em .meet-now-wrap (que só cuida
   do recuo do card), 1.5rem em .meet-rows (full-bleed) */
.meet-empty {
  padding: 1rem 0;
  font-size: 1rem;
  line-height: 1.2625rem;
  color: rgba(28, 41, 56, 0.45);
}

.meet-rows .meet-empty {
  padding: 1rem 1.5rem;
}

/* ---- rodapé do painel ---- */

.meetings-foot {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24 */
  padding: 0 1.5rem;
  flex-shrink: 0;
}

.meetings-rule {
  height: 0.125rem; /* 2 */
  border-radius: 100px;
  background: var(--rule);
}

.meetings-note {
  font-size: 0.875rem;
  line-height: 1.1rem;
}

/* ================= Rodapé de ajuda (1198 x 133) ================= */

.help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem; /* 24 */
}

.help-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4 */
  flex-shrink: 0;
}

.help-sub {
  font-size: 1rem;        /* 16 */
  line-height: 1.2625rem; /* 20.2 */
  white-space: nowrap;
}

.help-icons {
  display: flex;
  gap: 0.75rem; /* 12 */
  flex-shrink: 0;
}

/* largura "hug": rótulo + 24px de padding de cada lado */
.help-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* 8 */
  height: 6.25rem; /* 100 */
  padding: 1rem 1.5rem; /* 16 / 24 */
  background: var(--glass-4);
  border-radius: var(--radius);
  font-size: 0.875rem;  /* 14 */
  font-weight: 600;
  line-height: 1.1rem;  /* 17.6 */
  white-space: nowrap;
}

.help-icon img {
  width: 2.5rem; /* 40 */
  height: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
  /* sem os vídeos, o fundo escuro de fallback assume nos dois lugares */
  .welcome-video,
  .now-card-bg {
    display: none;
  }

  .welcome-logo {
    animation: none !important;
  }

  .welcome-logo--clickweb {
    opacity: 1;
  }
}