/* Visual da tela pública (em pé, sem interação, sem rolagem).
   As variáveis (cores, fontes) ficam no tokens.css. O voluntário e a coordenação NÃO usam este arquivo.

   A mesma página serve para duas telas:
     - Totem  1080 × 1920 (9:16): uma linha por sala, lotação à direita.
     - Painel  336 × 1008 (1:3):  bem estreito; cada sala fica empilhada (fim deste arquivo).
   O navegador escolhe pelo formato da tela (@media no fim), não pelo tamanho em pixels.

   Tamanhos: tudo é medido em --u, que vale 1% da largura da tela (10,8 px no totem, 3,36 px no painel).
   O min(...) com a altura faz a página encolher se a tela for mais "larga" que o previsto:
   assim tudo sempre cabe, sem rolar. */

:root {
  --u: min(1vw, 0.5625vh);
  --lado: calc(3.6 * var(--u)); /* margem lateral */
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

html { background: var(--bg); }

body {
  margin: 0 auto;
  width: calc(100 * var(--u)); /* numa tela deitada, fica centralizado */
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* nunca rola */
  cursor: none;       /* ninguém usa mouse no totem */
  user-select: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: calc(2.2 * var(--u));
  line-height: 1.25;
  font-variant-numeric: tabular-nums; /* horários e % com algarismos da mesma largura */
}

h1, h2, p { margin: 0; }


/* ---------- Topo: logo à esquerda, "Room Occupancy" à direita ---------- */

.topo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(3 * var(--u));
  padding: calc(2.4 * var(--u)) var(--lado) calc(2 * var(--u));
  /* Faixa metade verde, metade amarela (cores do BRACIS) */
  border-bottom: calc(0.6 * var(--u)) solid;
  border-image: linear-gradient(90deg, var(--green) 50%, var(--yellow) 50%) 1;
}

.logo {
  display: block;
  height: calc(11 * var(--u));
  width: auto;
  filter: brightness(0) invert(1); /* o logo é azul: deixa ele todo branco para aparecer no fundo azul */
}

.titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(5 * var(--u));
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-align: right;
  color: var(--yellow);
}


/* ---------- Salas ---------- */

/* As salas dividem igualmente a altura que sobra (1fr cada), separadas por um fio */
.salas {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  padding: calc(0.8 * var(--u)) calc(1.2 * var(--u));
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sem conexão há mais de 2 minutos: os números podem estar velhos */
.salas.desatualizado {
  opacity: 0.35;
  filter: grayscale(1);
}

/* Cada sala: [nome, sessão de agora, próxima] à esquerda; [%, barra, nível] à direita */
.sala {
  min-height: 0;
  overflow: hidden; /* se um título for enorme, corta em vez de empurrar a tela */
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(25 * var(--u));
  column-gap: calc(4 * var(--u));
  align-items: center;
  padding: calc(1.2 * var(--u)) calc(2.4 * var(--u));
  border-top: 1px solid var(--border);
}

.sala:first-child { border-top-color: transparent; }

.sala-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(0.7 * var(--u));
}

.sala-nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(4.3 * var(--u));
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sala-agora {
  display: flex;
  flex-direction: column;
  gap: calc(0.2 * var(--u));
}

.horario {
  font-size: calc(2.2 * var(--u));
  font-weight: 600;
  color: var(--ink-3);
}

/* Título da sessão: no máximo 2 linhas */
.sessao-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: calc(2.8 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.sem-sessao {
  font-size: calc(2.6 * var(--u));
  color: var(--muted);
}

/* Próxima sessão: uma linha só */
.sala-proxima {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(2.2 * var(--u));
  color: var(--ink-3);
}

.sala-proxima .rotulo {
  font-weight: 600;
  color: var(--next);
}

.sala-proxima > span + span { margin-left: calc(1 * var(--u)); }

/* Lotação, à direita */
.sala-lotacao {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(0.8 * var(--u));
}

.porcentagem {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(8.6 * var(--u));
  line-height: 0.95;
  letter-spacing: -0.035em;
}

/* O "+" do "100%+" (gente em pé), menor e no alto */
.porcentagem .mais {
  font-size: 0.55em;
  vertical-align: super;
}

/* Barra: trilho + parte colorida */
.barra {
  width: 100%;
  height: calc(1.3 * var(--u));
  border-radius: var(--radius-pill);
  background: var(--track);
  overflow: hidden;
}

.barra-cheia {
  height: 100%;
  border-radius: inherit;
}

.nivel {
  font-size: calc(2.4 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}


/* ---------- Cores por nível (o texto sempre acompanha a cor) ---------- */

.nivel-livre .porcentagem,
.nivel-livre .nivel,
.nivel-sem .porcentagem,
.nivel-sem .nivel { color: var(--muted); }

.nivel-livre .barra-cheia,
.nivel-tranquila .barra-cheia { background: var(--lvl-low-fill); }
.nivel-tranquila .nivel { color: var(--lvl-low-text); }

.nivel-moderada .barra-cheia { background: var(--lvl-mid-fill); }
.nivel-moderada .nivel { color: var(--lvl-mid-text); }

.nivel-lotada .barra-cheia,
.nivel-cheia .barra-cheia { background: var(--lvl-high-fill); }
.nivel-lotada .porcentagem,
.nivel-lotada .nivel,
.nivel-cheia .porcentagem,
.nivel-cheia .nivel { color: var(--lvl-high-text); }

/* Sala cheia: a linha inteira ganha fundo (e some o fio acima e abaixo dela) */
.sala.nivel-cheia {
  background: var(--lvl-high-bg);
  box-shadow: inset 0 0 0 calc(0.3 * var(--u)) var(--lvl-high-fill); /* contorno vermelho */
  border-radius: calc(1.6 * var(--u));
}
.sala.nivel-cheia,
.sala.nivel-cheia + .sala { border-top-color: transparent; }


/* ---------- Rodapé: azul mais escuro, com a mesma faixa verde e amarela do topo ---------- */

.rodape {
  flex-shrink: 0;
  padding: calc(1.4 * var(--u)) var(--lado) calc(1.6 * var(--u));
  border-top: calc(0.6 * var(--u)) solid;
  border-image: linear-gradient(90deg, var(--green) 50%, var(--yellow) 50%) 1;
  background: var(--bg-2);
  color: var(--ink-3);
  font-size: calc(1.9 * var(--u));
  text-align: center;
}


/* ---------- Painel 336 × 1008 ----------
   Vale para telas pelo menos 2 vezes mais altas que largas (o painel é 1:3; o totem, 9:16, não entra).
   Aqui --u vale 1% de 336 px = 3,36 px, por isso os números abaixo são maiores que os do totem.
   Cada sala fica empilhada:
       Room Nobres        36%
       Plenty of seats
       ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
       09:00–10:30 Workshop on…
       Next 10:30 Tutorial…                      */

@media (max-aspect-ratio: 1/2) {
  :root {
    --u: min(1vw, 0.3333vh);
    --lado: calc(4 * var(--u));
  }

  body { font-size: calc(4 * var(--u)); }

  .topo {
    gap: calc(2 * var(--u));
    padding: calc(3 * var(--u)) var(--lado) calc(2.4 * var(--u));
    border-bottom-width: calc(1 * var(--u));
  }

  .logo { height: calc(15 * var(--u)); }

  .titulo { font-size: calc(6.6 * var(--u)); }

  .salas { padding: calc(1 * var(--u)) calc(1.5 * var(--u)); }

  /* As duas colunas viram uma grade só: "display: contents" faz os itens de dentro de
     .sala-info e .sala-lotacao serem posicionados direto na grade da sala. */
  .sala {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nome    pct"
      "nivel   pct"
      "barra   barra"
      "agora   agora"
      "proxima proxima";
    align-content: center;
    align-items: end;
    column-gap: calc(2 * var(--u));
    row-gap: calc(0.8 * var(--u));
    padding: calc(1.8 * var(--u)) calc(2.5 * var(--u));
  }

  .sala-info,
  .sala-lotacao { display: contents; }

  .sala-nome    { grid-area: nome; font-size: calc(5.9 * var(--u)); }
  .nivel        { grid-area: nivel; font-size: calc(4.2 * var(--u)); align-self: start; }
  .porcentagem  { grid-area: pct; font-size: calc(10.5 * var(--u)); align-self: center; }
  .barra        { grid-area: barra; height: calc(1.8 * var(--u)); margin-top: calc(0.6 * var(--u)); }
  .sala-agora   { grid-area: agora; }
  .sala-proxima { grid-area: proxima; font-size: calc(3.9 * var(--u)); }

  /* Horário e título da sessão na mesma linha, no máximo 2 linhas ao todo */
  .sala-agora:not(.sem-sessao) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
  }
  .horario { font-size: calc(3.9 * var(--u)); }
  .sala-agora .horario { margin-right: calc(1.5 * var(--u)); }
  .sala-agora .sessao-titulo { display: inline; font-size: calc(4.5 * var(--u)); }

  .sem-sessao { font-size: calc(4.3 * var(--u)); }

  .sala.nivel-cheia { border-radius: calc(2.4 * var(--u)); }

  .rodape {
    padding: calc(2 * var(--u)) var(--lado) calc(2.4 * var(--u));
    font-size: calc(3.4 * var(--u));
  }
}


@media (prefers-reduced-motion: reduce) {
  .salas { transition: none; }
}