:root {
  --fundo: #0d1117;
  --painel: #151b23;
  --painel-2: #1c2430;
  --borda: #263040;
  --texto: #e6edf3;
  --texto-2: #8b98a8;
  --azul: #1f9bd7;
  --verde: #2fbf71;
  --vermelho: #e5534b;
  --amarelo: #d6a42b;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- login ---------- */
.tela-login { align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #16212d, var(--fundo) 70%); }
.login-caixa { width: min(360px, calc(100% - 32px)); background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 32px 28px; text-align: center; }
.login-logo { width: 220px; max-width: 100%; margin-bottom: 12px; }
.login-caixa h1 { font-size: 20px; margin: 0; }
.login-sub { color: var(--texto-2); margin: 4px 0 24px; }
.login-caixa form { display: grid; gap: 14px; text-align: left; }
.login-caixa label { display: grid; gap: 6px; color: var(--texto-2); font-size: 13px; }
.login-caixa input { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; color: var(--texto); font: inherit; }
.login-caixa input:focus { outline: 2px solid var(--azul); outline-offset: 0; border-color: transparent; }
.login-caixa button { margin-top: 6px; background: var(--azul); border: 0; border-radius: 8px; padding: 11px; font-weight: 600; color: #fff; }
.login-erro { color: var(--vermelho); margin: 0; font-size: 13px; }

/* ---------- topo ---------- */
.topo { height: 56px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--painel); border-bottom: 1px solid var(--borda); }
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca img { height: 34px; }
.marca div { display: grid; line-height: 1.2; }
.marca strong { font-size: 15px; white-space: nowrap; }
.marca span { color: var(--texto-2); font-size: 12px; }
.layouts { margin: 0 auto; display: flex; gap: 4px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 3px; }
.layouts button { background: none; border: 0; border-radius: 6px; padding: 5px 12px; color: var(--texto-2); }
.layouts button.ativo { background: var(--painel-2); color: var(--texto); }
.topo-dir { display: flex; align-items: center; gap: 14px; }
.relogio { font-variant-numeric: tabular-nums; color: var(--texto-2); }
.usuario { color: var(--texto-2); }
.sair { background: none; border: 1px solid var(--borda); border-radius: 6px; padding: 5px 12px; }
.sair:hover { border-color: var(--texto-2); }

/* ---------- corpo ---------- */
.corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr 300px; }
.lateral { background: var(--painel); border-right: 1px solid var(--borda); padding: 12px 8px; overflow-y: auto; }
.grupo { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; border-radius: 6px; padding: 8px 10px; text-align: left; font-weight: 600; }
.grupo:hover { background: var(--painel-2); }
.grupo.ativo { background: var(--painel-2); box-shadow: inset 3px 0 0 var(--azul); }
.conta { color: var(--texto-2); font-weight: 400; font-size: 12px; }
.cam-item { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: 0; border-radius: 6px; padding: 5px 10px 5px 22px; color: var(--texto-2); text-align: left; }
.cam-item:hover { background: var(--painel-2); color: var(--texto); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-2); flex: none; display: inline-block; }
.ponto.ok { background: var(--verde); }
.ponto.sem { background: var(--vermelho); }
.legenda { color: var(--texto-2); font-size: 12px; padding: 12px 10px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- mosaico ---------- */
.mosaico-area { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 8px; gap: 8px; }
.mosaico { flex: 1; min-height: 0; display: grid; gap: 6px; }
.quadro { position: relative; background: #000; border-radius: 6px; overflow: hidden; cursor: zoom-in; min-height: 0; border: 1px solid transparent; }
.quadro:hover { border-color: var(--azul); }
.quadro video-stream, .quadro video { position: absolute; inset: 0; width: 100%; height: 100%; }
.quadro video { object-fit: contain; background: #000; }
.quadro-nome { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 6px; background: linear-gradient(transparent, rgba(0,0,0,.75)); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.quadro-aviso { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-2); font-size: 13px; pointer-events: none; text-align: center; padding: 8px; }
.quadro.sem-sinal .quadro-aviso { color: var(--vermelho); }
.paginas { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--texto-2); }
.paginas button { background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; width: 32px; height: 28px; font-size: 18px; line-height: 1; }

/* ---------- placas ---------- */
.placas { background: var(--painel); border-left: 1px solid var(--borda); padding: 14px 12px; display: flex; flex-direction: column; min-height: 0; }
.placas h2 { font-size: 15px; margin: 0 0 10px; }
.placas input { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; color: var(--texto); font: inherit; text-transform: uppercase; }
.placas input:focus { outline: 2px solid var(--azul); border-color: transparent; }
.placas-status { color: var(--texto-2); font-size: 12px; margin: 8px 2px; min-height: 16px; }
.lista-placas { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 6px; align-content: start; }
.lista-placas li { cursor: pointer; }
.lista-placas li:hover { outline: 1px solid var(--azul); }
.lista-placas li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; background: var(--painel-2); border-radius: 6px; padding: 8px 10px; }
.placa-tag { grid-row: span 2; background: #f3f5f7; color: #111; border-radius: 4px; border-top: 5px solid #1a4fa0; padding: 1px 7px 2px; font: 700 15px/1.2 "Consolas", "Courier New", monospace; letter-spacing: 1px; }
.placa-ponto { font-size: 12.5px; }
.placa-hora { color: var(--texto-2); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- ampliada ---------- */
.ampliada { width: min(1400px, 96vw); height: min(860px, 92vh); padding: 0; border: 1px solid var(--borda); border-radius: 10px; background: #000; color: var(--texto); overflow: hidden; }
.ampliada::backdrop { background: rgba(0,0,0,.8); }
.ampliada[open] { display: flex; flex-direction: column; }
.ampliada-topo { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--painel); }
.ampliada-dica { color: var(--texto-2); font-size: 12px; margin-right: auto; }
.ampliada-topo button { background: none; border: 1px solid var(--borda); border-radius: 6px; width: 32px; height: 28px; }
.ampliada-video { position: relative; flex: 1; }
.ampliada-video video-stream, .ampliada-video video { position: absolute; inset: 0; width: 100%; height: 100%; }
.ampliada-video video { object-fit: contain; }

@media (max-width: 1100px) {
  .corpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .lateral { display: flex; gap: 4px; overflow-x: auto; padding: 6px; border-right: 0; border-bottom: 1px solid var(--borda); }
  .lateral .cam-item, .legenda { display: none; }
  .grupo { width: auto; white-space: nowrap; }
  #grupos { display: contents; }
  .placas { max-height: 34vh; border-left: 0; border-top: 1px solid var(--borda); }
  .layouts, .usuario { display: none; }
}

/* ---------- secoes do menu e troca de senha ---------- */
.secao-titulo { color: var(--texto-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 14px 10px 4px; }
a.sair { color: var(--texto); text-decoration: none; }
a.sair[hidden] { display: none; }
.senha-dlg { padding: 0; border: 0; background: none; color: var(--texto); }
.senha-dlg::backdrop { background: rgba(0,0,0,.7); }
.senha-dlg form.login-caixa { display: grid; gap: 14px; text-align: left; }
.senha-aviso { margin: 0; color: var(--texto); opacity: .85; font-size: 14px; line-height: 1.4; }
.login-caixa button.secundario { margin-top: 0; background: none; border: 1px solid var(--borda); color: var(--texto); }
@media (max-width: 1100px) { .secao-titulo { display: none; } }

/* area fora da tela onde as cameras das outras paginas conectam antes de serem vistas */
.aquecimento { position: fixed; left: -10000px; top: 0; width: 320px; height: 180px; overflow: hidden; pointer-events: none; }
.aquecimento video-stream { display: block; width: 320px; height: 180px; }

/* o componente do go2rtc desenha textos tecnicos (modo, erros); o portal mostra os proprios avisos */
video-stream div { display: none !important; }
.quadro video-stream { opacity: 0; transition: opacity .3s; }
.quadro.tocando video-stream { opacity: 1; }
.quadro.tocando .quadro-aviso { display: none; }

/* seletor de cliente (workspace) da equipe Connecty, no topo das telas */
.ws-sel { background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); border-radius: 6px;
  padding: 5px 8px; font: inherit; max-width: 240px; }
.ws-sel[hidden], .abas button[hidden] { display: none; }