/* ==========================================================================
   Tela da TV: travada no tamanho da tela (sem rolagem). Tudo em vw/vh para
   ficar proporcional em TV Full HD ou 4K.
   ========================================================================== */

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  font-size: clamp(12px, .85vw, 28px);
}

/* --- Topo --- */
.topo {
  display: flex;
  align-items: center;
  gap: 2vw;
  padding: 1.4vh 2vw;
  border-bottom: 1px solid var(--borda);
  background: var(--topo);
  backdrop-filter: saturate(180%) blur(20px);
}
.topo-logo { height: 6.4vh; width: auto; }
.topo-titulo { display: flex; flex-direction: column; border-left: 1px solid var(--borda); padding-left: 2vw; }
.topo-rotulo {
  color: var(--marca);
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .85em;
}
.topo-titulo h1 { margin: 0; font-size: 2em; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 1.2vw; }
.relogio { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
#relogioHora { font-size: 2.6em; font-weight: 700; font-variant-numeric: tabular-nums; }
#relogioData { color: var(--texto-suave); text-transform: capitalize; }
.btn-tela-cheia {
  background: var(--cartao-2);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  font-size: 1.4em;
  padding: .2em .55em;
  cursor: pointer;
}
:fullscreen .btn-tela-cheia, :fullscreen .btn-tema { display: none; }
a.btn-tema { text-decoration: none; }

/* --- Indicadores --- */
.kpis {
  display: grid;
  grid-template-columns: 1.1fr 1fr 3.4fr .9fr 1.2fr .9fr;
  gap: 1vw;
  padding: 1.6vh 2vw 0;
}
.kpi {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 1.1vh 1.1vw;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.kpi-valor { font-size: 2.9em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-rotulo { color: var(--texto-suave); font-size: .95em; margin-top: .35em; }
.kpi-destaque { background: linear-gradient(135deg, var(--marca), var(--marca-escura)); border-color: transparent; }
.kpi-destaque .kpi-rotulo { color: rgba(255, 255, 255, .85); }
.kpi-barra { height: .7vh; background: var(--cartao-2); border-radius: 99px; margin-top: .8vh; overflow: hidden; }
.kpi-barra i { display: block; height: 100%; width: 0; background: var(--verde); transition: width .6s; }
.kpi-alerta.tem-atraso { border-color: var(--perigo); background: color-mix(in srgb, var(--perigo) 10%, var(--cartao)); }
.kpi-alerta.tem-atraso .kpi-valor { color: var(--perigo); }

#kpisTipos { flex-direction: row; align-items: center; justify-content: space-around; gap: .8vw; }
.kpi-tipo { display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 1; }
.kpi-tipo .kpi-valor { font-size: 2.2em; color: var(--tipo); }
.kpi-tipo .kpi-rotulo { white-space: nowrap; font-size: .85em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* --- Area principal (paginas que giram) --- */
.conteudo {
  flex: 1;
  min-height: 0;
  padding: 1.6vh 2vw;
  display: flex;
  transition: opacity .35s;
}
.conteudo.saindo { opacity: 0; }
.conteudo > * { flex: 1; min-height: 0; }

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  font-size: 1.6em;
  text-align: center;
  gap: 1vh;
}
.vazio strong { color: var(--texto); font-size: 1.4em; }

/* ---------- Visao "Empresas": um bloco por empresa ---------- */
.grade-empresas {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--linhas), minmax(0, 1fr));
  gap: 1.4vh 1vw;
}
.emp {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-top: .6vh solid var(--cor);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.emp-topo { display: flex; align-items: center; gap: .8vw; padding: 1.2vh 1vw .8vh; }
.logo {
  flex-shrink: 0;
  width: 5.4vh;
  height: 5.4vh;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: .35vh;
}
.logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-iniciais { color: #fff; font-weight: 800; font-size: 1.5em; padding: 0; }
.emp-nome { min-width: 0; flex: 1; }
.emp-nome h2 {
  margin: 0;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emp-nome span { color: var(--texto-suave); font-size: .9em; white-space: nowrap; }
.emp-placar { text-align: right; flex-shrink: 0; line-height: 1.05; }
.emp-placar strong { font-size: 1.6em; font-weight: 800; }
.emp-placar span { display: block; color: var(--texto-suave); font-size: .8em; }

.emp-resumo { display: flex; align-items: center; gap: .6vw; padding: 0 1vw .8vh; flex-wrap: wrap; }
.emp-contador {
  font-size: .9em;
  font-weight: 600;
  padding: .1em .55em;
  border-radius: 99px;
  background: color-mix(in srgb, var(--tipo) 22%, transparent);
  color: color-mix(in srgb, var(--tipo) 75%, var(--texto));
}
.emp-barra { height: .45vh; background: var(--cartao-2); margin: 0 1vw .8vh; border-radius: 99px; overflow: hidden; }
.emp-barra i { display: block; height: 100%; background: var(--verde); }

.lista {
  list-style: none;
  margin: 0;
  padding: 0 .6vw .8vh;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.ativ {
  display: grid;
  grid-template-columns: 3.4em 3.2em 1.7em minmax(0, 1fr) auto;
  align-items: center;
  gap: .4vw;
  padding: .55vh .4vw;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--tipo);
  margin-bottom: .45vh;
  background: var(--cartao-2);
}
.ativ-dia { font-weight: 700; font-size: .85em; color: var(--texto-suave); }
.ativ-dia b { color: var(--texto); }
.ativ-hora { font-variant-numeric: tabular-nums; color: var(--texto-suave); font-size: .9em; }
.ativ-ico { text-align: center; }
.ativ-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.selo { font-size: .72em; font-weight: 700; padding: .15em .5em; border-radius: 99px; white-space: nowrap; letter-spacing: .03em; }
.selo-feito { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); }
.selo-andamento { background: color-mix(in srgb, var(--amarelo) 16%, transparent); color: var(--amarelo); }
.selo-atraso { background: color-mix(in srgb, var(--perigo) 16%, transparent); color: var(--perigo); }
.selo-hoje { background: var(--marca); color: #fff; }
.ativ.hoje { background: color-mix(in srgb, var(--marca) 14%, var(--cartao-2)); }
.ativ.feito .ativ-titulo { color: var(--texto-suave); }
.ativ.feito { opacity: .7; }
.ativ.cancelado { opacity: .45; }
.ativ.cancelado .ativ-titulo { text-decoration: line-through; }
.mais { color: var(--texto-suave); font-size: .9em; text-align: center; padding: .3vh 0; }
.lista-vazia { color: var(--texto-suave); text-align: center; padding: 2vh 0; font-size: .95em; }

/* ---------- Visao "Semana": empresas x dias ---------- */
.grade-semana {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--linhas), minmax(0, 1fr));
  gap: .5vh .4vw;
}
.grade-semana.poucas { grid-template-rows: auto repeat(var(--linhas), 17vh); align-content: start; }
.sem-cab {
  text-align: center;
  padding: .7vh 0;
  border-radius: var(--radius-sm);
  background: var(--cartao);
  box-shadow: var(--sombra);
  font-weight: 700;
  line-height: 1.1;
}
.sem-cab span { display: block; color: var(--texto-suave); font-weight: 500; font-size: .85em; }
.sem-cab.hoje { background: var(--marca); }
.sem-cab.hoje span { color: rgba(255, 255, 255, .85); }
.sem-cab.fim-semana { opacity: .7; }
.sem-empresa {
  display: flex;
  align-items: center;
  gap: .6vw;
  background: var(--cartao);
  border-left: .4vw solid var(--cor);
  border-radius: var(--radius-sm);
  padding: 0 .7vw;
  min-width: 0;
  min-height: 0;
}
.sem-empresa .logo { width: 4.2vh; height: 4.2vh; }
.sem-empresa strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05em; }
.sem-celula {
  background: var(--cartao);
  border-radius: var(--radius-sm);
  padding: .4vh .3vw;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35vh;
}
.sem-celula.hoje { background: color-mix(in srgb, var(--marca) 12%, var(--cartao)); outline: 1px solid color-mix(in srgb, var(--marca) 50%, transparent); }
.chip {
  flex-shrink: 0;
  font-size: .82em;
  padding: .25vh .35vw;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tipo) 22%, var(--cartao-2));
  border-left: 3px solid var(--tipo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip b { font-variant-numeric: tabular-nums; }
.chip.feito { opacity: .55; }
.chip.feito::after { content: ' ✓'; color: var(--verde); }
.chip.cancelado { opacity: .4; text-decoration: line-through; }
.chip.atrasada { border-left-color: var(--perigo); background: color-mix(in srgb, var(--perigo) 16%, var(--cartao-2)); }
.sem-celula .mais { text-align: left; font-size: .78em; padding: 0 .2vw; }

/* --- Rodape --- */
.rodape {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5vw;
  padding: .9vh 2vw 1.2vh;
  color: var(--texto-suave);
  font-size: .95em;
}
.rodape-visao { font-weight: 600; color: var(--texto); min-width: 18vw; }
.paginas { display: flex; gap: .4vw; flex: 1; justify-content: center; }
.paginas i { width: .7vw; height: .7vw; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--borda); }
.paginas i.ativa { background: var(--marca); }
.rodape-direita { display: flex; align-items: center; gap: 1vw; min-width: 18vw; justify-content: flex-end; }
.legenda { display: flex; gap: .9vw; }
.legenda span { white-space: nowrap; }
.conexao { width: 10px; height: 10px; border-radius: 50%; background: var(--perigo); }
.conexao.ok { background: var(--verde); }
.progresso-pagina { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.progresso-pagina i { display: block; height: 100%; width: 0; background: var(--marca); }

/* --- Faixa da diretoria (acima do rodape) --- */
.faixa-diretoria {
  display: flex;
  gap: 1vw;
  padding: 0 2vw;
  height: 10vh;
  font-size: 1.12em;
}
.faixa-salas { display: flex; gap: 1vw; flex-shrink: 0; }
.faixa-sala {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 16vw;
  padding: 0 1.1vw;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--verde) 10%, var(--cartao));
  border: 1px solid color-mix(in srgb, var(--verde) 45%, transparent);
  box-shadow: var(--sombra);
}
.faixa-sala strong { font-size: 1.35em; line-height: 1.1; }
.faixa-sala .estado { font-weight: 700; color: var(--verde); letter-spacing: .04em; }
.faixa-sala span { color: var(--texto-suave); font-size: .9em; white-space: nowrap; }
.faixa-sala.ocupada { background: color-mix(in srgb, var(--perigo) 10%, var(--cartao)); border-color: var(--perigo); }
.faixa-sala.ocupada .estado { color: var(--perigo); }
.faixa-agenda {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1vw;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 0 1vw;
  overflow: hidden;
}
.faixa-rotulo {
  flex-shrink: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--marca);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .7em;
}
.faixa-reunioes { display: flex; gap: .7vw; min-width: 0; overflow: hidden; height: 100%; align-items: center; }
.faixa-reuniao {
  flex-shrink: 0;
  max-width: 22vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 78%;
  padding: 0 .9vw;
  border-radius: var(--radius-sm);
  background: var(--cartao-2);
  border-left: .35vw solid var(--cor);
  line-height: 1.2;
}
.faixa-reuniao b { font-variant-numeric: tabular-nums; }
.faixa-reuniao .tit { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-reuniao .info { color: var(--texto-suave); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-reuniao.agora { background: color-mix(in srgb, var(--marca) 22%, var(--cartao-2)); }
.faixa-reuniao.agora b::after { content: ' · AGORA'; color: var(--marca); }
.faixa-vazia { color: var(--texto-suave); }

/* --- Aviso grande --- */
.alerta {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--veu);
  backdrop-filter: blur(14px) saturate(140%);
  animation: alerta-entra .4s ease-out;
}
.alerta-cartao {
  width: 62vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.6vh;
  padding: 5vh 4vw;
  border-radius: 2vw;
  background: var(--cartao);
  border-top: .8vh solid var(--cor, var(--marca));
  box-shadow: var(--sombra-forte);
}
.alerta-quando {
  background: var(--marca);
  color: #fff;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .4vh 1.6vw;
  border-radius: 99px;
  font-size: 1.6em;
  animation: alerta-pisca 1.2s ease-in-out infinite;
}
.alerta-hora { font-size: 5em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.alerta-titulo { font-size: 3em; line-height: 1.15; }
.alerta-quem { font-size: 1.9em; color: var(--texto-suave); }
.alerta-onde { font-size: 2.2em; font-weight: 700; color: var(--amarelo); }
@keyframes alerta-entra { from { opacity: 0; transform: scale(1.04); } }
@keyframes alerta-pisca { 50% { opacity: .55; } }