/* MiniDVR 2 — identidade visual
   Cor só comunica estado: azul = gravado, âmbar = pessoa, vermelho = sem sinal.
   Todo o resto é grafite sobre névoa. Placas em DIN (Bahnschrift) para nomes e títulos;
   textos sobre o vídeo em fonte monoespaçada, como o OSD gravado pelas próprias câmeras. */

:root {
  --nevoa: #EEF1F4;
  --papel: #FFFFFF;
  --papel-2: #F6F8FA;
  --grafite: #14202B;
  --cinza: #5B6B7A;
  --linha: #D5DCE3;
  --gravado: #2F6FEB;
  --pessoa: #F2A900;
  --alarme: #D6412C;
  --ok: #1F9D63;
  --atencao: #B86E00;
  --tela: #0A0F14;
  --vazio: repeating-linear-gradient(135deg, transparent 0 3px, rgba(91,107,122,.28) 3px 4.5px);
  --sombra: 0 1px 2px rgba(20,32,43,.06), 0 4px 16px rgba(20,32,43,.06);
  --raio: 10px;
  --placa: "Bahnschrift SemiCondensed", Bahnschrift, "DIN Alternate", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", sans-serif;
  --texto: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --osd: "Cascadia Mono", Consolas, "Roboto Mono", "SF Mono", ui-monospace, monospace;
  --topo: 56px;
  --base: 0px;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --nevoa: #0C1218;
  --papel: #141D26;
  --papel-2: #19242F;
  --grafite: #E3EAF1;
  --cinza: #8FA0B1;
  --linha: #243240;
  --gravado: #4C8DFF;
  --pessoa: #FFB81C;
  --alarme: #FF5A45;
  --ok: #36C27F;
  --atencao: #F0A330;
  --vazio: repeating-linear-gradient(135deg, transparent 0 3px, rgba(143,160,177,.22) 3px 4.5px);
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--nevoa); color: var(--grafite); font: 14px/1.45 var(--texto); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.placa { font-family: var(--placa); font-weight: 600; letter-spacing: .02em; font-stretch: semi-condensed; }
.osd { font-family: var(--osd); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.muted { color: var(--cinza); }
:focus-visible { outline: 2px solid var(--gravado); outline-offset: 2px; }
h1, h2, h3 { margin: 0; }
h1.placa { font-size: 26px; text-transform: uppercase; letter-spacing: .06em; }
h2.placa { font-size: 17px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------------------------------------------------------------- topo e abas */
.topo { position: sticky; top: 0; z-index: 30; height: var(--topo); display: flex; align-items: center; gap: 16px;
  padding: 0 20px; background: var(--papel); border-bottom: 1px solid var(--linha); }
.marca { font-family: var(--placa); font-size: 20px; letter-spacing: .12em; font-weight: 400; white-space: nowrap; }
.marca b { font-weight: 700; }
.saude-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px;
  border: 1px solid var(--linha); background: var(--papel-2); cursor: pointer; font-family: var(--placa); font-size: 14px;
  letter-spacing: .03em; max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saude-chip span:last-child { overflow: hidden; text-overflow: ellipsis; }
.luz { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.saude-chip[data-nivel="alerta"] { border-color: color-mix(in srgb, var(--atencao) 45%, var(--linha)); }
.saude-chip[data-nivel="alerta"] .luz { background: var(--atencao); }
.saude-chip[data-nivel="critico"] { border-color: color-mix(in srgb, var(--alarme) 50%, var(--linha)); color: var(--alarme); }
.saude-chip[data-nivel="critico"] .luz { background: var(--alarme); animation: pisca 1.6s ease-in-out infinite; }
.saude-chip[data-nivel="desconectado"] .luz { background: var(--cinza); }
.abas { display: flex; gap: 2px; margin-left: auto; }
.abas button { display: inline-flex; align-items: center; gap: 7px; height: var(--topo); padding: 0 14px; border: 0; background: none;
  cursor: pointer; color: var(--cinza); font-family: var(--placa); font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 2px solid transparent; }
.abas button svg { width: 18px; height: 18px; }
.abas button:hover { color: var(--grafite); }
.abas button.ativa { color: var(--grafite); border-bottom-color: var(--grafite); }
.relogio { font-size: 15px; color: var(--cinza); min-width: 70px; text-align: right; }

main { padding: 20px; max-width: 1680px; margin: 0 auto; }
.aba { display: none; }
.aba.ativa { display: block; }

/* ---------------------------------------------------------------- controles */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--linha); background: var(--papel); cursor: pointer; text-decoration: none;
  white-space: nowrap; font-weight: 500; }
.botao:hover { border-color: var(--cinza); }
.botao svg { width: 18px; height: 18px; }
.botao.primario { background: var(--grafite); color: var(--papel); border-color: var(--grafite); }
.botao.perigo { color: var(--alarme); }
.botao:disabled { opacity: .5; cursor: default; }
.icone { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--linha);
  background: var(--papel); cursor: pointer; padding: 0; }
.icone:hover { border-color: var(--cinza); }
.icone.grande { width: 46px; height: 46px; border-radius: 23px; background: var(--grafite); color: var(--papel); border-color: var(--grafite); }
.icone.grande svg { width: 22px; height: 22px; }
svg.cheio, .palco-play svg { fill: currentColor; stroke: none; }
.segmentado { display: inline-flex; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; background: var(--papel); }
.segmentado button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font-family: var(--osd); font-size: 13px; border-right: 1px solid var(--linha); color: var(--cinza); }
.segmentado button svg { width: 16px; height: 16px; }
.segmentado button:last-child { border-right: 0; }
.segmentado button.ativa { background: var(--grafite); color: var(--papel); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 17px; border: 1px solid var(--linha);
  background: var(--papel); cursor: pointer; white-space: nowrap; font-family: var(--placa); font-size: 14px; letter-spacing: .03em; }
.chip.ativa { background: var(--grafite); color: var(--papel); border-color: var(--grafite); }
.chip .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.chip .ponto.off { background: var(--alarme); }
.alternar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--cinza); user-select: none; }
.alternar input { width: 16px; height: 16px; accent-color: var(--grafite); }
.grupo { display: flex; align-items: center; gap: 8px; }
.espaco { flex: 1; }

/* ---------------------------------------------------------------- aviso geral */
.aviso { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px; border-radius: var(--raio);
  background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--atencao); box-shadow: var(--sombra); }
.aviso.critico { border-left-color: var(--alarme); }
.aviso strong { font-family: var(--placa); font-size: 16px; letter-spacing: .02em; display: block; }
.aviso p { margin: 3px 0 0; color: var(--cinza); }
.aviso .botao { margin-left: auto; }

/* ---------------------------------------------------------------- ao vivo */
.barra-aovivo { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--cinza); flex-wrap: wrap; }
.legenda i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.cor-gravado { background: var(--gravado); }
.cor-pessoa { background: var(--pessoa); width: 3px !important; }
.cor-vazio { background: var(--vazio), var(--papel-2); outline: 1px solid var(--linha); }
.barra-aovivo .alternar { margin-left: auto; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.cam { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.cam.alerta { border-color: var(--pessoa); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pessoa) 55%, transparent); }
.tela { position: relative; aspect-ratio: 16 / 9; background: var(--tela); cursor: pointer; overflow: hidden; }
.tela video, .tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tela img.quadro { opacity: 0; transition: opacity .25s; }
.tela video { opacity: 0; transition: opacity .35s; }
.tela.com-video video { opacity: 1; }
.tela.com-foto img.quadro { opacity: 1; }
/* OSD: branco com contorno, como o texto que a camera grava na propria imagem */
.osd-sobre { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; padding: 10px 12px;
  font-family: var(--osd); font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: .06em; pointer-events: none; z-index: 2;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0 0 6px rgba(0,0,0,.6); }
/* a camera grava a hora no canto de cima a direita e o nome embaixo a esquerda: os selos
   do DVR ficam embaixo a direita, onde a imagem esta livre */
.selos { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; gap: 6px; align-items: center; }
.rec-tag { font-family: var(--osd); font-size: 12px; color: #fff; letter-spacing: .08em; padding: 3px 8px 3px 7px; border-radius: 4px;
  background: rgba(10,15,20,.6); display: flex; align-items: center; gap: 6px; }
.rec-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff3b2f; animation: pisca 2s ease-in-out infinite; }
.pessoa-tag { padding: 3px 9px; border-radius: 4px; background: var(--pessoa); color: #1a1300;
  font-family: var(--placa); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.sem-sinal { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; text-align: center; gap: 6px; padding: 16px;
  background: rgba(10,15,20,.72); color: #fff; }
.sem-sinal b { font-family: var(--placa); font-size: 24px; letter-spacing: .14em; color: #ff7a6b; }
.sem-sinal span { font-family: var(--osd); font-size: 13px; color: #cdd6de; }
.sem-sinal small { font-size: 12px; color: #9fb0bf; max-width: 300px; justify-self: center; }
.tela.sem-sinal-on img.quadro { opacity: .5 !important; filter: grayscale(1); }
.carregando { position: absolute; inset: 0; display: grid; place-content: center; z-index: 1; color: #8a9aa8; font-family: var(--osd); font-size: 12px; }
.fita { position: relative; height: 10px; background: var(--vazio), var(--papel-2); border-top: 1px solid var(--linha); cursor: pointer; }
.fita .f { position: absolute; top: 0; bottom: 0; background: var(--gravado); }
/* pessoas ocupam so a faixa de cima: com centenas por dia, cobririam a cobertura inteira */
.fita { height: 12px; }
.fita .f { top: 4px; }
.fita .p { position: absolute; top: 0; height: 4px; width: 1.5px; background: var(--pessoa); }
.cob-linha .fita .f { top: 6px; }
.cob-linha .fita .p { height: 5px; }
.fita-horas { display: flex; justify-content: space-between; padding: 3px 12px 0; font-family: var(--osd); font-size: 10.5px; color: var(--cinza); }
.cam-rodape { display: flex; align-items: center; gap: 8px; padding: 8px 8px 10px 12px; }
.cam-rodape .nome { font-family: var(--placa); font-size: 16px; letter-spacing: .03em; }
.cam-rodape .estado { font-size: 12.5px; color: var(--cinza); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-rodape .estado.ruim { color: var(--alarme); }
.cam-rodape .texto { min-width: 0; flex: 1; }
.cam-rodape .icone { width: 34px; height: 34px; }

/* foco: uma camera grande */
.foco { position: fixed; inset: 0; z-index: 50; background: var(--tela); display: flex; flex-direction: column; }
.foco .tela { flex: 1; aspect-ratio: auto; cursor: default; }
.foco .tela video, .foco .tela img { object-fit: contain; }
.foco-barra { display: flex; align-items: center; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #0f171f; color: #e3eaf1; }
.foco-barra .botao, .foco-barra .icone { background: #1b2733; border-color: #2c3b4a; color: #e3eaf1; }
.foco-barra .nome { font-family: var(--placa); font-size: 18px; letter-spacing: .04em; margin-right: auto; }
.foco-barra .res { font-size: 12px; color: #8fa0b1; }
.foco-barra .botao.primario { background: #e3eaf1; color: #0f171f; border-color: #e3eaf1; }
.foco-barra .icone.ativo { background: #e3eaf1; color: #0f171f; }

/* ---------------------------------------------------------------- gravacoes (tela unica, sem rolagem) */
body.modo-rec main { height: calc(100dvh - var(--topo) - var(--base)); padding: 14px 20px 12px; overflow: hidden; }
body.modo-rec #aba-gravacoes { height: 100%; }
.rec { height: 100%; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.rec-topo { display: flex; align-items: center; gap: 12px; }
.rec-topo .chips { flex: 1; min-width: 0; }
.dia { display: flex; align-items: center; gap: 6px; }
.dia select { height: 36px; border-radius: 8px; border: 1px solid var(--linha); background: var(--papel); padding: 0 10px; font-family: var(--osd); }
.palcos { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px; }
.palcos.dois { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.palco { position: relative; min-height: 0; background: var(--tela); border-radius: var(--raio); overflow: hidden; }
/* comparacao: barra da segunda camera no alto, sobre a imagem */
.cmp-barra { position: absolute; left: 8px; right: auto; max-width: calc(100% - 16px); top: 8px; z-index: 4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-barra select { height: 32px; max-width: 60vw; border-radius: 7px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,15,20,.72); color: #fff;
  padding: 0 8px; font-family: var(--osd); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.cmp-barra .icone { width: 32px; height: 32px; background: rgba(10,15,20,.72); color: #fff; border-color: rgba(255,255,255,.25); }
.chip.comparada { outline: 2px dashed var(--grafite); outline-offset: -4px; }
.faixas-cmp { position: absolute; left: 0; right: 0; bottom: 8px; height: 6px; background: var(--vazio); }
.faixas-cmp .f { position: absolute; top: 0; bottom: 0; background: var(--grafite); opacity: .55; border-radius: 2px; }
.faixas-cmp .m { position: absolute; top: -2px; bottom: -2px; min-width: 3px; background: var(--pessoa); border-radius: 2px; cursor: pointer; }
.palco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.palco video.on { opacity: 1; pointer-events: auto; }
.palco .osd-sobre { font-size: 14px; }
.palco-vazio { position: absolute; inset: 0; display: grid; place-content: center; color: #8a9aa8; font-family: var(--osd); font-size: 13px; }
.palco-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%;
  border: 0; background: rgba(10,15,20,.55); color: #fff; cursor: pointer; display: none; place-items: center; z-index: 3; }
.palco-play svg { width: 30px; height: 30px; }
.palco.pausado .palco-play { display: grid; }
.controles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.controles .direita { margin-left: auto; }
.mostrador { font-size: 17px; padding: 0 12px; height: 36px; display: inline-flex; align-items: center; border-radius: 8px;
  background: var(--tela); color: #fff; letter-spacing: .04em; }
.corte { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--papel); border: 1px dashed var(--grafite); }
.corte .osd { font-size: 13px; }
.linha { position: relative; height: 92px; flex: none; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
.linha-rolagem { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.linha-trilho { position: relative; height: 100%; min-width: 100%; cursor: crosshair; touch-action: pan-x; user-select: none; }
.regua { position: absolute; left: 0; right: 0; top: 0; height: 26px; border-bottom: 1px solid var(--linha); }
.regua .t { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--linha); }
.regua .t span { position: absolute; left: 4px; top: 5px; font-family: var(--osd); font-size: 11px; color: var(--cinza); white-space: nowrap; }
.regua .t.menor { top: 18px; }
.faixas { position: absolute; left: 0; right: 0; top: 36px; height: 30px; background: var(--vazio); }
.faixas .f { position: absolute; top: 0; bottom: 0; background: var(--gravado); border-radius: 2px; }
/* trecho que ja saiu do notebook e toca do Google Drive: mesmo azul, listrado */
.faixas .f.nuvem { background: repeating-linear-gradient(135deg, var(--gravado) 0 6px, color-mix(in srgb, var(--gravado) 45%, transparent) 6px 12px); }
.marcas { position: absolute; left: 0; right: 0; top: 30px; height: 42px; pointer-events: none; }
.marcas .m { position: absolute; top: 0; height: 100%; min-width: 3px; background: var(--pessoa); border-radius: 2px; pointer-events: auto; cursor: pointer; opacity: .95; }
.selecao { position: absolute; top: 26px; bottom: 0; background: color-mix(in srgb, var(--grafite) 16%, transparent);
  border-left: 2px solid var(--grafite); border-right: 2px solid var(--grafite); pointer-events: none; }
.cabeca { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--alarme); pointer-events: none; z-index: 4; }
.cabeca span { position: absolute; bottom: 2px; left: 6px; font-size: 11px; background: var(--alarme); color: #fff; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.linha-vazia { position: absolute; inset: 0; display: grid; place-content: center; color: var(--cinza); }

/* ---------------------------------------------------------------- eventos */
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-width: 0; }
.filtros .chips { max-width: 100%; }
.resumo-ev { color: var(--cinza); font-size: 12.5px; margin: 0 0 10px; }
.ev-dia { margin: 22px 0 10px; font-family: var(--placa); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza);
  display: flex; align-items: center; gap: 10px; }
.ev-dia::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.ev-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ev { position: relative; border-radius: 8px; overflow: hidden; background: var(--tela); cursor: pointer; aspect-ratio: 16 / 9; border: 0; padding: 0; }
.ev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev .osd-sobre { font-size: 11px; padding: 6px 8px; gap: 8px; }
.ev .osd-sobre span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .osd-sobre span:last-child { flex: none; }
.ev.pessoa { outline: 2px solid var(--pessoa); outline-offset: -2px; }
.mais { margin: 18px auto; display: flex; }
.visor img { max-width: min(92vw, 1500px); max-height: 74vh; display: block; margin: 0 auto; border-radius: 6px; }
.visor-barra { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.visor-barra .osd { margin-right: auto; }

/* ---------------------------------------------------------------- sistema */
.sis-manchete { padding: 18px 20px; border-radius: var(--raio); background: var(--papel); border: 1px solid var(--linha); margin-bottom: 14px;
  display: flex; align-items: center; gap: 16px; box-shadow: var(--sombra); }
.sis-manchete .luz { width: 14px; height: 14px; }
.sis-manchete h1 { font-family: var(--placa); font-size: 26px; letter-spacing: .02em; font-weight: 600; }
.sis-manchete p { margin: 2px 0 0; color: var(--cinza); }
.sis-manchete[data-nivel="critico"] .luz { background: var(--alarme); }
.sis-manchete[data-nivel="alerta"] .luz { background: var(--atencao); }
.problemas { display: grid; gap: 10px; margin-bottom: 14px; }
.problema { padding: 12px 16px; border-radius: var(--raio); background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--atencao); }
.problema.critico { border-left-color: var(--alarme); }
.problema.info { border-left-color: var(--gravado); }
.problema b { font-family: var(--placa); font-size: 16px; letter-spacing: .02em; }
.problema p { margin: 3px 0 0; color: var(--cinza); }
.sis-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.painel { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; min-width: 0; }
.painel.largo { grid-column: 1 / -1; }
.painel h2 { margin-bottom: 12px; }
.painel summary { cursor: pointer; font-size: 17px; text-transform: uppercase; letter-spacing: .06em; }
.cobertura { display: grid; gap: 8px; }
.cob-linha { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: 12px; }
.cob-linha .nome { font-family: var(--placa); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cob-linha .fita { height: 18px; border: 1px solid var(--linha); border-radius: 3px; }
.cob-linha .pct { font-family: var(--osd); font-size: 12px; text-align: right; color: var(--cinza); }
.cob-horas { position: relative; height: 16px; margin-left: 162px; margin-right: 68px; font-family: var(--osd); font-size: 10.5px; color: var(--cinza); }
.cob-horas span { position: absolute; transform: translateX(-50%); }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-family: var(--placa); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza);
  padding: 6px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .osd { font-size: 12.5px; }
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 10px; font-family: var(--placa); font-size: 13px;
  letter-spacing: .03em; white-space: nowrap; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pilula.ruim { background: color-mix(in srgb, var(--alarme) 13%, transparent); color: var(--alarme); }
.pilula.meio { background: color-mix(in srgb, var(--atencao) 15%, transparent); color: var(--atencao); }
.pilula.neutra { background: var(--papel-2); color: var(--cinza); }
.barra-disco { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--papel-2); border: 1px solid var(--linha); margin: 6px 0 12px; }
.barra-disco span { display: block; height: 100%; }
.disco-legenda { display: grid; grid-template-columns: auto 1fr auto; gap: 5px 10px; align-items: center; font-size: 13px; }
.disco-legenda i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.disco-legenda .osd { text-align: right; }
.fato { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.fato:last-child { border-bottom: 0; }
.fato span:first-child { color: var(--cinza); }
.historico { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.historico li { display: grid; grid-template-columns: 124px 14px 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.historico li:last-child { border-bottom: 0; }
.historico time { font-family: var(--osd); font-size: 12px; color: var(--cinza); }
.historico .luz { width: 8px; height: 8px; align-self: center; }
.historico .critico { background: var(--alarme); } .historico .alerta { background: var(--atencao); }
.historico .ok { background: var(--ok); } .historico .info { background: var(--linha); }
.registro { max-height: 420px; overflow: auto; font: 12px/1.5 var(--osd); background: var(--papel-2); padding: 10px 12px; border-radius: 6px; margin: 12px 0 0; white-space: pre-wrap; word-break: break-word; }
.passos { margin: 8px 0 0; padding-left: 20px; color: var(--cinza); }
.passos li { margin: 3px 0; }
.passos code, .codigo { font-family: var(--osd); font-size: 12px; background: var(--papel-2); padding: 1px 5px; border-radius: 4px; }

/* ---------------------------------------------------------------- ajustes */
.ajustes { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.ajustes-menu { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topo) + 20px); }
.ajustes-menu button { text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--cinza); }
.ajustes-menu button.ativa { background: var(--papel); color: var(--grafite); box-shadow: var(--sombra); font-weight: 600; }
.aj-sec { display: none; }
.aj-sec.ativa { display: block; }
.aj-sec > h2 { margin-bottom: 14px; }
.formulario { display: grid; gap: 16px; max-width: 720px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; }
.campo { display: grid; gap: 5px; }
.campo > span { font-weight: 600; }
.campo small { color: var(--cinza); }
.campo input[type=text], .campo input[type=number], .campo input[type=password], .campo input[type=time], .campo input[type=date], .campo input[type=url], .campo select {
  height: 38px; border-radius: 8px; border: 1px solid var(--linha); background: var(--papel-2); padding: 0 10px; max-width: 420px; }
.campo-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.campo-linha .campo { flex: 1; min-width: 150px; }
.formulario .rodape { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--linha); padding-top: 14px; }
.cam-lista { display: grid; gap: 10px; }
.cam-item { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; padding: 10px; background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio); }
.cam-item img { width: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: var(--tela); }
.cam-item .nome { font-family: var(--placa); font-size: 17px; }
.cam-item .detalhes { font-size: 12.5px; color: var(--cinza); }
.descoberta { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 12px; }
.descoberta ul { list-style: none; margin: 8px 0 0; padding: 0; }
.descoberta li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linha); }
.descoberta li:last-child { border-bottom: 0; }
.teste-res { display: grid; gap: 4px; font-size: 13px; padding: 10px 12px; background: var(--papel-2); border-radius: 8px; }
.teste-res .sim { color: var(--ok); } .teste-res .nao { color: var(--alarme); }

/* ---------------------------------------------------------------- modal e toast */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(8,12,16,.62); display: grid; place-items: center; padding: 16px; }
.modal-caixa { background: var(--papel); border-radius: 12px; padding: 18px 20px; max-width: min(96vw, 1560px); max-height: 94dvh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); position: relative; }
.modal-caixa.estreita { width: min(96vw, 560px); }
.modal-caixa h2 { margin-bottom: 12px; }
.modal-fechar { position: absolute; right: 10px; top: 10px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--base)); transform: translate(-50%, 20px); opacity: 0; z-index: 70; pointer-events: none;
  background: var(--grafite); color: var(--papel); padding: 10px 16px; border-radius: 8px; box-shadow: var(--sombra); transition: all .2s; max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: var(--alarme); color: #fff; }

@keyframes pisca { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1100px) {
  .abas button span { display: none; }
  .abas button { padding: 0 12px; }
}
@media (max-width: 760px) {
  :root { --topo: 52px; --base: calc(62px + env(safe-area-inset-bottom)); }
  .topo { padding: 0 12px; gap: 10px; }
  .relogio { display: none; }
  .saude-chip { max-width: none; flex: 0 1 auto; min-width: 0; margin-left: auto; }
  .abas { position: fixed; left: 0; right: 0; bottom: 0; height: var(--base); margin: 0; background: var(--papel); border-top: 1px solid var(--linha);
    padding-bottom: env(safe-area-inset-bottom); z-index: 40; }
  .abas button { flex: 1; flex-direction: column; justify-content: center; gap: 3px; height: 62px; padding: 0; font-size: 11px; letter-spacing: .04em;
    border-bottom: 0; border-top: 2px solid transparent; }
  .abas button span { display: block; }
  .abas button.ativa { border-top-color: var(--grafite); }
  main { padding: 12px 12px calc(12px + var(--base)); }
  body.modo-rec main { padding: 8px 10px 8px; }
  h1.placa { font-size: 21px; }
  .grade { grid-template-columns: 1fr; gap: 12px; }
  .barra-aovivo { gap: 10px; }
  .legenda { order: 3; width: 100%; }
  .rec-topo { flex-wrap: wrap; gap: 8px; }
  .rec-topo .chips { flex-basis: 100%; }
  .dia { width: 100%; } .dia select { flex: 1; }
  .controles { gap: 8px; }
  .mostrador { font-size: 14px; flex: 1; justify-content: center; }
  .foco-barra .res { display: none; }
  .controles .direita { margin-left: 0; width: 100%; justify-content: space-between; }
  /* so as barras de controle viram icones; fora delas o rotulo cabe e explica o botao */
  .controles .botao span, .foco-barra .botao span, .cmp-barra .botao span { display: none; }
  .controles .botao, .foco-barra .botao { padding: 0 10px; }
  .corte { flex-wrap: wrap; }
  /* no celular em pe, o video fica na proporcao dele e a linha do tempo ganha o espaco que sobra */
  .palcos { flex: 0 0 auto; grid-template-rows: auto; }
  .palcos.dois { grid-template-columns: minmax(0, 1fr); }
  .palco { aspect-ratio: 16 / 9; }
  .cmp-barra { left: 6px; top: 6px; gap: 4px; max-width: calc(100% - 12px); }
  .cmp-barra select { height: 28px; font-size: 11px; max-width: 60vw; }

  .cmp-barra .icone { width: 28px; height: 28px; }
  /* pessoas e placas numa faixa propria acima da cobertura: no celular o dia inteiro cabe em
     360 px e centenas de marcas cobriam todo o azul */
  .linha { height: auto; flex: 1 1 auto; min-height: 104px; max-height: 190px; }
  .marcas { top: 28px; height: 22px; }
  .marcas .m { height: 12px; top: 10px; min-width: 2px; }
  .marcas .m.pl { top: 0; height: 8px; }
  .faixas { top: 54px; height: calc(100% - 62px); min-height: 34px; }
  .sis-grade { grid-template-columns: 1fr; }
  .cob-linha { grid-template-columns: 92px 1fr 44px; gap: 8px; }
  .cob-horas { margin-left: 100px; margin-right: 52px; }
  .ajustes { grid-template-columns: 1fr; }
  .ajustes-menu { flex-direction: row; overflow-x: auto; position: static; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .ajustes-menu::-webkit-scrollbar { display: none; }
  .ajustes-menu button { white-space: nowrap; }
  .cam-item { grid-template-columns: 88px 1fr; }
  .cam-item img { width: 88px; }
  .cam-item .grupo { grid-column: 1 / -1; justify-content: flex-end; }
  .ev-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ev .osd-sobre { font-size: 10px; padding: 5px 6px; gap: 6px; }
  .ev-dia { font-size: 14px; flex-wrap: wrap; row-gap: 0; }
  .ev-dia::after { display: none; }
  /* tipos de evento: faixa inteira, cada botao do tamanho do texto, rolando se faltar espaco */
  #evTipos { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
  #evTipos::-webkit-scrollbar { display: none; }
  #evTipos button { flex: 1 0 auto; justify-content: center; white-space: nowrap; padding: 0 10px; }
  .historico li { grid-template-columns: 94px 12px 1fr; }
  .painel { padding: 14px; }
  /* janelas: a foto do evento cabe na largura da caixa, sem vazar para a direita */
  .modal { padding: 8px; }
  .modal-caixa { padding: 14px; max-width: 100%; }
  .visor img { max-width: 100%; max-height: 62dvh; }
  .foco-barra { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .foco-barra .nome { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fato span:last-child, .fato b:last-child { text-align: right; }
  .cam-item { gap: 10px; }
  /* tabelas do Sistema: um cartao por camera, titulo da coluna a esquerda */
  .tabela.cartoes, .tabela.cartoes tbody { display: block; }
  .tabela.cartoes thead { display: none; }
  .tabela.cartoes tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--linha); }
  .tabela.cartoes tr:last-child { border-bottom: 0; }
  .tabela.cartoes td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .tabela.cartoes td::before { content: attr(data-r); color: var(--cinza); font-family: var(--texto); font-size: 13px; text-align: left; }
  .tabela.cartoes td:first-child { padding-bottom: 6px; }
  .tabela.cartoes td:first-child::before, .tabela.cartoes td:empty, .tabela.cartoes td:last-child:not([data-r])::before { display: none; }
  .tabela.cartoes td:last-child:has(.botao) { justify-content: flex-end; padding-top: 6px; }
}
.modal-caixa .campo input, .modal-caixa .campo select { max-width: none; width: 100%; }

/* ---------------------------------------------------------------- placas
   A placa aparece desenhada como e na rua: Mercosul branca com a faixa azul, antiga cinza.
   Caractere que o leitor nao firmou fica apagado e sublinhado: olhe a foto antes de confiar. */
.pl { --pl: 20px; display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; font-size: var(--pl); line-height: 1;
  background: #fff; color: #1b1f24; border: .08em solid #1b1f24; border-radius: .2em; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.08); flex: none; }
.pl .faixa { background: #1f3f9a; color: #fff; font: 700 .28em/1 var(--placa); letter-spacing: .4em; text-align: center; padding: .24em 0 .2em .4em; }
.pl .txt { display: flex; justify-content: center; padding: .1em .36em .07em; font-family: var(--placa); font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.pl .txt i { font-style: normal; }
.pl .txt i.meio { color: #5d6670; }
.pl .txt i.duv { color: #aab1b9; text-decoration: underline dotted; text-underline-offset: .1em; text-decoration-thickness: .06em; }
.pl .txt i.tr { padding: 0 .04em; }
.pl.antiga { background: #c5cad0; border-color: #3a3f45; }
.pl.antiga .txt { padding-top: .2em; padding-bottom: .12em; }
.pl.grande { --pl: 46px; }
.pl.mini { --pl: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.5); }

.pl-busca { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pl-campo { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--linha);
  background: var(--papel); flex: 1; min-width: 260px; max-width: 580px; color: var(--cinza); }
.pl-campo:focus-within { border-color: var(--grafite); color: var(--grafite); }
.pl-campo input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; color: var(--grafite);
  font: 700 22px/1 var(--placa); letter-spacing: .14em; text-transform: uppercase; }
.pl-campo input::placeholder { font: 400 14px var(--texto); letter-spacing: 0; text-transform: none; color: var(--cinza); }
.pc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; }
.pc { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel);
  overflow: hidden; cursor: pointer; text-align: left; }
.pc:hover { border-color: var(--cinza); }
.pc-img { position: relative; aspect-ratio: 16 / 9; background: var(--tela); display: block; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-img .pc-foto { position: absolute; right: 6px; bottom: 6px; width: 44%; height: auto; object-fit: contain; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 2px 10px rgba(0,0,0,.55); background: #000; }
.pc-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px 12px; }
.pc-meta { font-size: 12px; color: var(--cinza); }
.pc-nome { font-family: var(--placa); font-size: 14px; letter-spacing: .02em; }
.ev.placa-ev .ev-placa { position: absolute; left: 8px; bottom: 8px; right: 8px; display: flex; align-items: center; gap: 6px; z-index: 2; }
.ev.placa-ev .ev-placa b { color: #fff; font-family: var(--placa); font-size: 13px; text-shadow: 0 0 4px #000, 0 0 2px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.placa-ev .pl { --pl: 16px; box-shadow: 0 1px 6px rgba(0,0,0,.6); }
.veiculos tbody tr { cursor: pointer; }
.veiculos tbody tr:hover { background: var(--papel-2); }
.veiculos td:first-child { display: flex; align-items: center; gap: 10px; }
.vc-foto { width: 88px; border-radius: 4px; background: #000; display: block; }

.modal-caixa.larga { width: min(96vw, 1320px); }
.pd { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.pd-imgs { display: grid; gap: 10px; align-content: start; }
.pd-cena { width: 100%; border-radius: 8px; background: var(--tela); display: block; }
.pd-foto { width: min(100%, 380px); border-radius: 6px; border: 1px solid var(--linha); background: #000; display: block; }
.pd-lado { display: flex; flex-direction: column; gap: 9px; padding-top: 30px; min-width: 0; }
.pd-lado > .pl { align-self: flex-start; }
.pd-q { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd-cc { display: flex; gap: 5px; align-items: flex-end; height: 50px; }
.pd-cc .cc { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 26px; height: 100%; }
.pd-cc .cc b { width: 100%; background: var(--ok); border-radius: 3px 3px 0 0; }
.pd-cc .cc b.meio { background: var(--atencao); }
.pd-cc .cc b.duv { background: var(--alarme); }
.pd-cc .cc i { font: 600 12px/1.4 var(--osd); font-style: normal; color: var(--cinza); }
.pd-conhecida { padding: 8px 10px; border-radius: 8px; background: var(--papel-2); }
.pd-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.area-ed { position: relative; user-select: none; touch-action: none; cursor: crosshair; border-radius: 8px; overflow: hidden;
  background: var(--tela); width: min(100%, 1100px); }
.area-ed img { display: block; width: 100%; pointer-events: none; }
.area-ret { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(8,12,16,.55); border-radius: 3px; pointer-events: none; z-index: 2; }
.osd-fora { position: absolute; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(214,65,44,.5) 0 6px, transparent 6px 12px); }

.aj-placas { display: grid; gap: 12px; max-width: 920px; }
.aj-sub { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 0; color: var(--cinza); }
.conh-lista { display: grid; gap: 2px; }
.conh { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.conh:last-child { border-bottom: 0; }
.conh-nome { font-family: var(--placa); font-size: 15px; }
.conh .pilula svg, .pd-conhecida svg { width: 14px; height: 14px; }
.sim { color: var(--ok); } .nao { color: var(--alarme); } .meio-txt { color: var(--atencao); }
.placa-tag { display: inline-flex; align-items: center; gap: 6px; }
.placa-tag b { color: #fff; font-family: var(--placa); font-size: 12px; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.marcas .m.pl { top: 0; height: 9px; width: 4px; min-width: 4px; background: var(--grafite); border-radius: 2px; }
.marcas .m.pl.baixa { opacity: .4; }

@media (max-width: 900px) { .pd { grid-template-columns: 1fr; } .pd-lado { padding-top: 0; } .pl.grande { --pl: 36px; } }
@media (max-width: 760px) {
  .pl-campo { min-width: 100%; }
  .pc-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pc-info { padding: 8px; }
  .pc .pl { --pl: 16px; }
  .veiculos .vc-foto { display: none; }
}

/* cadastro do codigo do celular */
.cod-cadastro { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; padding: 12px; border-radius: 8px; background: var(--papel-2); }
.cod-qr svg { width: 196px; height: 196px; display: block; border-radius: 6px; stroke: none; }
@media (max-width: 760px) { .cod-qr { margin: 0 auto; } }
.cod-cadastro .passos { flex: 1; min-width: 220px; margin: 0; }
.cod-cadastro .passos code { white-space: normal; }
.cod-campo { height: 42px; width: 150px; border-radius: 8px; border: 1px solid var(--linha); background: var(--papel); padding: 0 10px;
  font: 600 20px/1 var(--osd); letter-spacing: .25em; text-align: center; }

/* tela cheia das gravacoes: o #palcos inteiro (com a comparacao, se estiver aberta) */
.palco-sair { display: none; position: absolute; right: 10px; top: 10px; z-index: 5; width: 40px; height: 40px;
  background: rgba(10,15,20,.6); color: #fff; border-color: rgba(255,255,255,.25); }
.palcos.cheia { background: #000; gap: 0; width: 100%; height: 100%; grid-template-rows: minmax(0, 1fr); }
.palcos.cheia .palco { aspect-ratio: auto; border-radius: 0; height: 100%; }
.palcos.cheia .palco-sair { display: grid; place-items: center; }
.palcos.cheia.dois { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (orientation: portrait) { .palcos.cheia.dois { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } }
/* tela cheia do ao vivo: a imagem inteira, sem cortar as bordas */
.tela:fullscreen { background: #000; aspect-ratio: auto; }
.tela:fullscreen video, .tela:fullscreen img { object-fit: contain; }