: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-grav { color: var(--texto); text-decoration: none; border: 1px solid var(--borda); border-radius: 6px; padding: 4px 10px; font-size: 13px; }
.ampliada-grav:hover { border-color: var(--azul); }
.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; }

/* ================= celular / app instalado ================= */
.topo { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
.menu-btn { display: none; }
.nav-celular { display: none; }
.offline-icone { width: 96px; border-radius: 22px; margin-bottom: 12px; }
.dica-instalar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; gap: 10px; align-items: center; background: #10304a; border: 1px solid var(--azul); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.dica-instalar span { flex: 1; }
.dica-instalar button { background: none; border: 0; font-size: 16px; padding: 4px 6px; }
.login-caixa .instalar { margin-top: 12px; width: 100%; }

@media (max-width: 700px) {
  body { font-size: 15px; }
  .topo { position: relative; gap: 10px; padding-left: 12px; padding-right: 12px; height: calc(52px + env(safe-area-inset-top)); }
  .marca { gap: 8px; }
  .marca img { height: 26px; }
  .marca strong { font-size: 14px; }
  .marca div { min-width: 0; }
  .marca strong, .marca > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .marca span { font-size: 11.5px; }
  .grupo { gap: 8px; }
  .menu-btn { display: grid; gap: 4px; place-content: center; margin-left: auto; flex: none; width: 42px; height: 36px;
    background: none; border: 1px solid var(--borda); border-radius: 8px; }
  .menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--texto); }
  .topo-dir { display: none; position: absolute; z-index: 60; top: 100%; left: 8px; right: 8px; flex-direction: column;
    align-items: stretch; gap: 8px; margin: 4px 0 0 !important; background: var(--painel); border: 1px solid var(--borda);
    border-radius: 12px; padding: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
  .topo.menu-aberto .topo-dir { display: flex; }
  .topo-dir .sair, .topo-dir form button, .topo-dir .ws-sel { width: 100%; max-width: none; padding: 11px; text-align: center; font-size: 15px; }
  .topo-dir form { display: block; }
  .topo-dir .usuario { display: block !important; text-align: center; padding: 2px 0 4px; }
  .relogio { display: none; }

  /* mosaico: uma camera por linha, rolando; placas numa aba propria (barra de baixo) */
  .corpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lateral { padding: 6px 8px; }
  .grupo { padding: 7px 12px; border: 1px solid var(--borda); border-radius: 999px; font-weight: 500; }
  .grupo.ativo { box-shadow: none; border-color: var(--azul); }
  .mosaico-area { overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
  .mosaico { flex: none; gap: 8px; }
  .quadro { aspect-ratio: 16 / 9; }
  .placas { display: none; }
  body.ver-placas .lateral, body.ver-placas .mosaico-area { display: none; }
  body.ver-placas .corpo { grid-template-rows: 1fr; }
  body.ver-placas .placas { display: flex; max-height: none; border: 0; }
  .lista-placas li { padding: 10px 12px; }
  .nav-celular { display: flex; flex: none; background: var(--painel); border-top: 1px solid var(--borda);
    padding-bottom: env(safe-area-inset-bottom); }
  .nav-celular > * { flex: 1; display: grid; place-items: center; gap: 2px; padding: 8px 0 7px; background: none; border: 0;
    color: var(--texto-2); text-decoration: none; font-size: 12px; }
  .nav-celular svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .nav-celular .ativo { color: var(--azul); }

  /* camera ampliada: tela cheia (deitar o celular aumenta) */
  .ampliada { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; margin: 0; }
  .ampliada-topo { padding-top: calc(10px + env(safe-area-inset-top)); }
  .ampliada-dica { display: none; }
  .ampliada-topo strong { margin-right: auto; }
}

/* dentro do aplicativo (WebView): o app tem a propria barra; some o topo do site */
.em-app .topo, .em-app .nav-celular { display: none !important; }
.em-app body { padding-top: 0; }